📝

クソコード大喜利大会を開催するためにやったこと - 第5回 #KusoKoudoKaigi 主催ログ

2022/08/20に公開

イベント

クソコード

kusokoudokaigi

idea

KusoKoudoKaigi主催者の主催ログです。

開催のために何をやったのか
大変だったこと・次回の課題
の備忘録です。

KusoKoudoKaigi とは

YouTube Live で行われるクソコード大喜利大会です。
VTuberの珠響そうき、こと私が~~有象無象の~~視聴者からクソコードを募集して、配信上でレビューして、最狂のクソコードを決める配信です。

公式リンク → https://kusokoudo.love/

直近では、第5回を 8月14日(日) に開催しました。
↓配信↓

結果まとめは → https://docs.google.com/presentation/d/e/2PACX-1vRUCuXihm6Ywc4VgxVrGYM7VsIy3kpVVJd_5pWO77jlakFj4j9PDv7i-lzCAMKRCkvpLxCfg1zQXdsm/pub

以下、おおよそ時系列順にやったことを書いてきます。

開催前にやったこと

開催日を決める

開催までに必要な工数を見積もりつつ、自分のスケジュールと相談しつつ、開催日を決める。
今回は、ニコV祭にも合わせて動画を投稿したかったので、ニコV祭の1週間前に決定した。

KusoKoudoKaigiは当日の審査員以外は、全部私が作業していて、開催場所もYouTubeなので、私の一存で開催が決定できる。
審査員をお願いする際に、明確に日時が決まっていないと、審査員の方もスケージュールが分からず、快諾しずらい。

レギュレーションを考える

1~4回はなんとなく、コンセプトだけで、縛りナシで開催した。
第5回はマンネリ化回避のため、FizzBuzz縛りに決めたので、FizzBuzz縛りにふさわしいストーリーを考えた。

ストーリー

あなたの仕事場に、ナイフを持った不審者が現れ、こう言いました。
「今すぐFizzBuzzとやらのコードを出せ！ 15まで出力しろ！！」
あなたはFizzBuzzのプログラムとその出力結果を、提出しなければなりません。

堅い要件定義じゃなくて、曖昧なストーリーを出したのは、そっちの面白そうだったから。
実際ストーリーに合うけど、FizzBuzzじゃないコードも投稿されて面白かった。

開催概要を書いたページを作る

こんな感じ → https://kusokoudo.love/kaigi/5/
ホームページ自体は、4回開催直後くらいに作っていたので、そこに第5回用のページを新たに作る。
経験があったので、GatsbyJS + Netlify でテキトーに作る。

開催の告知ツイートの作成

開催概要まで決定したのでツイートで告知する。
そのとき、コンセプトに合ったテキトーなフリー画像を使って、開催概要を画像化したものを貼る。文字だけのツイートは流れやすいので。

審査員の募集

ツイートをして、ツイートにいいねをくれた人や、過去につながりのあった人に審査員やりませんかと声を掛けていく。
審査員はボランティアなので、見知らぬ人に声を掛けにいくのはハードルが高い。

Discord 鯖の準備

審査員の方とやり取りしたり、配信当日通話するための Discord 鯖を作る。
チャンネル構成は↓のとおり。

あとは、#readmeに、当日の流れや当日までにやってほしいこと書いたり、#立ち絵等素材共有用で審査員の画像(サムネイル制作や配信画面作成で使う)を受け取る。

クソコードの募集

クソコードは Google Form で募集する。

Form はこんな感じ

GitHubとかではなく、Google Form を使うのは、匿名で一定量のテキストを提出できるから。
誰でも出せるように、提出者の名前覧も必須項目にしてない。

ついでに、コーディングだけだとあれなので、クソエピソードも募集する。

ただ、Google Form にも欠点があって、取得した回答は .csvか、スプレッドシートにしか出力できない。

.csvの場合: ","の文字列があった場合、パースできない
スプレッドシートの場合: 一度スプレッドシートに出力してから、.htmlでダウンロードすることになる。そのため、空白文字(特に whitespace とかいう言語)がサヨナラする。

クソコードをマークダウンに変換するスクリプトの手直し

KusoKoudoKaigi では、.html形式でフォームの回答を取得している。
それを、配信上でレビューするために、見やすい形式にする必要がある。
さしあたって、マークダウンのシンタックスハイライトが優秀なので、マークダウン形式に変換して、それを VSCode でプレビューすればいい。
スクリプトはこんな感じ↓

今回からはただゴリゴリ変換するんじゃなくて、各回答のテキストをマークダウンのどの位置に書くか、テンプレート？で指定できるようにした。
これで、回答の項目が変わってもソースコード変えなくて済むね。

あと、今回はプログラムの出力結果を画像で提出できるようにしたので、↓の記事を参考に、マークダウン上で Google Drive 上の画像を見れるようにした。

告知動画を作る

今回は久しぶりの開催だったのと、レギュレーションがあったので、告知動画を作った。

告知動画

https://youtu.be/gzfiSqPOPvk

結果発表用の画像作成

最優秀賞と優秀賞を決める予定なので、発表時に見栄えするように、飾り文字がついた画像を用意する。
賞自体は配信当日に、その場で決めるが、発表の時に画像をすぐに出せるようにおおまかに作っておく。
言い忘れていたが、私はこの手の画像を全部AviUtlで作っている。

YouTubeLive の準備

枠を立てる

配信日時を指定してYouTubeに枠を作っておく
サムネイルを作って枠にサムネイルを指定しておく
配信概要欄に公式サイトのリンクを貼ったり、説明を書いたりする。審査員のみなさまのTwitter情報なども貼る
配信内で使ったフリー素材のクレジットを忘れずに

配信画面の作成

以下の3つの画面をOBS上で準備しておく。
上2つは素材を並べたり、BGMをかけたりするだけなので簡単。

配信待機画面
休憩・結果集計中に出す蓋絵画面
本配信の画面

本配信の画面で出すもの

VSCode の画面
- 基本的にここにクソコードなり結果発表なり全部出す。
- 文字サイズの確認を特に。普通サイズだと視聴者に見えないかも。
タイトルと帯
- タイトルや説明文をすみっコに置く
コメントをのせる(ワンコメがオススメ)
審査員の画像
- Discord で喋ってる人が分かりやすくなるやつを使う → https://manten-do.net/archives/273
- 審査員の人数分作るのはﾁｮｯﾄ面倒くさい

配信当日にやったこと

配信直前にやったこと

採点用のスプレッドシートの作成
- 0~4で評価してもらうので、スプレッドシートのセルに0~4を選ぶプルダウンを設定する。データ/データの入力規則から設定できる
- クソコードネームと投稿者のお名前を記入する。
  - 今回はクソコードの投稿数が多かったので、テンポを良くするために、前もってクソコードを見て、採点用シート上にクソコードを要約した名前を記入しておく。
- その他: 紹介順にナンバーを振る。人数分列を作る。右端に合計点を表示する。
審査員に15分前に集合してもらって、配信の流れと採点の方法の説明

配信中にやったこと

OBSの仮想カメラ機能で画面共有

同じ審査員の人達と、同じ画面でコードをレビューするために、OBSの仮想カメラ機能を使って、YouTubeに流している内容と同じものを Discord のカメラに映す。

司会進行

投稿数から1本あたりにかけられる時間を見積もって、なんとなくタイムキープする
適宜YouTubeLiveのコメントを拾う
投稿されたクソコードへの感謝を忘れない
最後に審査員をしてくれた人の告知と宣伝の時間をとる

全体の流れはこんな感じ

0:00:00 待機画面
0:03:04 開始(企画説明等)
~~本編~~
0:12:55 0 爆発するFizzBuzz / nekoti
0:18:53 1 switch文で列挙 / CALS
0:22:04 2 並行処理FizzBuzz / 村雲ルネ
0:25:50 3 FizzBuzz.txtを探す。ついでに掃除もする。 / nekoti
0:31:00 4 バイナリのファイル名がだいじです / zunda
0:33:24 5 eval=eval / nekoti
0:37:43 6 "15"まで出力する / Souto
0:40:26 7 Excel FizzBuzz / nekoti
0:45:57 8 Wikiでカンニング / nekoti
0:48:38 9 ランダムで当たるまで / Chanya
0:53:37 10 プライドだけがいっちょ前に肥大化したプログラミング初心者 / ミノ駆動
1:04:30 11 16以上の判定は予想外 / 奄美くろ🥕
1:07:05 12 スリープソート風FizzBuzz / くと
1:11:45 13 whitespaceでFizzBuzz / すえよし。
1:14:45 14 正しい出力結果？欲しけりゃくれてやるぜ / たややん
1:17:05 15 手打ちでFizzBuzz / おさ
1:20:26 16 FizzBuzzゲーム / nekoti
1:23:31 17 IPアドレスFizzBuzz / nekoti
~~休憩はじまり~~
1:25:59 休憩
~~休憩終わり~~
1:32:54 18 "15まで" 出力する / RubyっくQue部
1:34:25 19 人力決定木FizzBuzz / えぶぶ
1:36:44 20 リテラルなしFizzBuzz / 神野まひろ
1:39:10 21 なでしこFizzBuzz / nekoti
1:42:53 22 三項演算子ネスト / kkntzw
1:44:27 23 やりすぎコーディング規約 / nekoti
1:50:05 24 ランダムとBoxing / 柿色めいと
1:54:03 25 凪♡ / 奄美くろ🥕
1:57:08 26 while+ラベル / kkntzw
1:59:30 27 強盗に出力させる / nekoti
2:03:03 28 フィボナッチ数……FizzBuzz / すえよし。
2:05:37 29 無限メモリ / pyaa
2:08:24 30 経年劣化するFizzBuzz / 霧の人
2:15:14 31 オーバーフローするFizzBuzz / 大王

2:17:40 リナさんのコードが消失
~~集計~~
2:22:48 集計開始
~~クソエピソード~~
2:29:22 0 クソエピソード / イキリプログラマ
2:30:39 1 クソエピソード / 大王
2:32:44 2 クソエピソード / nekoti
~~最後~~
2:35:30 結果発表
2:39:43 クロージング

採点・集計

スプレッドシートで採点が終わった後、データ/シートの並べ替え機能を使って、点数の高い順に行を並び替える。
これで、1位と2位のクソコードが分かる。
その後、用意しておいた発表画像に名前とか書き込んで、結果発表の準備をする。

配信後にやったこと

Webサイトを更新
結果をツイート
結果を Google Slide でまとめて公開: スライド → https://docs.google.com/presentation/d/e/2PACX-1vRUCuXihm6Ywc4VgxVrGYM7VsIy3kpVVJd_5pWO77jlakFj4j9PDv7i-lzCAMKRCkvpLxCfg1zQXdsm/pub
- スライドの中で、採点の詳細と投稿されたクソコードの全部を公開する。
- スライドを使うのは、Webサイトを編集するより楽だから。
配信を見返してタイムスタンプをつける: 概要欄参照 → https://www.youtube.com/watch?v=F7uy8MjuBJ4
今回だけ: ニコV祭に投稿する用に切り抜き動画の作成
- これとか → https://youtu.be/GWFDEXlFSXg

感想

良かったこと

5回目かつFizzBuzz縛りだったにも関わらず、多種多様なクソコードが見られて楽しかった。
いらない知識がついた。
記事書いてる時点で、高評価が39ももらえていて、多くの人に楽しんでもらえてなにより。

たいへんだったこと

良いコード/悪いコードで学ぶ設計入門の著者であるミノ駆動さんに
RTされたのもあって、クソコード投稿数が予想よりも多くなった。
結果、32件のクソコードを連続でレビューするという(審査員にとって)地獄の企画となった。

次回への課題

主催めんどい問題

運営が私1人で、私の趣味で開催してるので、私が頑張らないと開催されない。
正直、私も何も考えずにクソコードを投げつける視聴者側になりたい……
「こんな企画見たい」で開催したはいいものの、主催者は視聴者になれないという矛盾

本音を言うと
KusoKoudoKaigi は、ビブリオバトル並に、色んな場所で色んな人が開く大会になって欲しい。

解決するには、誰かしら主催側に巻き込まないといけない……じんみゃくぅ

開催形式難しい問題

クソコードがどれくらい投稿されるかというのは、蓋を開けてみないと読めない。

主催としては、極力全てのコードを読みたいし、これまではそれでなんとかなってきた。
だけど、今回くらいの数が投稿されると、全部を見るのは難しくなって、配信で取り上げられないコードが出てきてしまう。
KusoKoudoKaigi の趣旨として、ネタに走ることで技術力の低いコードでも、恥ずかしがらなくていいし、プログラミング歴3秒の人でもチャレンジできるっていう部分がある。
だから極力全部見たいし、予選とか設けるのちょっと抵抗ある。
~~内輪の小さい企画だからこそ気にせずに済む面も……ゆえに、ビブリオバトルになってほしいお気持ち~~

で、よしんば、予選を設けたとしても、クソコードがどれくらい投稿されるか分からない。
クソコードの投稿数に応じて、審査の手順を変えないといけなくてﾁｮｯﾄめんどくさい。
どうするかなー

あとがき

そんな感じで、クソコード大喜利大会の開催ログでした。
なんでこんな開催手順書を書いたかというと、今後一人で運営が難しくなったときに、代わりに誰かにやってもらおうかなと思ってるからです。
あと、上にも書いたんですが、ビブリオバトル的に色んな人に開催してほしいっていうのもあります。
ということで、一緒に運営したいよって人大歓迎です。

今後継続的に開催するには、色々考えることもあるので、もしよろしければ開催について助言などお願いします。

全てのクソコードに感謝。