東方イントロクイズ製作秘話
この記事は
GUTアドベントカレンダー2019｜ブログ｜東大幻想郷｜サークルスクエア
の12/4担当分です。
概要
かつて東方Projectの楽曲でイントロクイズができる Flash を使ったサイトがあったが消滅していたため、イントロクイズができるサイトを自ら作った。
こちらで遊べる
故「東方イントロ当て」
「東方イントロ当て」というサイトがあった。
東方Projectの紅魔郷〜星蓮船+αの原曲でイントロクイズができるサイトで、最高難易度の Lunatic は相当音源が短くて程よく正解できながらもかなり難しく、楽しめるものだった。
我らが東大幻想郷のメンバー達の間でも有名なサイトで、人が集まっているときにたまに皆で遊ぶこともあった。
次の動画を見れば大体のイメージができると思う。
どうだろう？おもしろそう？それだけで分かるの気持ち悪い？
感想は人それぞれだが、たまにやりたくなる遊びだった。
しかし、2019年8月、久しぶりにやってみようとすると……
Yahoo!ジオシティーズの死に伴い、「東方イントロ当て」も遊べなくなってしまったのだった……
おしまい。
ということで、代わりに東方原曲でイントロクイズを遊ぶ方法が無いか探したところ、どれもイマイチだった*1ので、イントロクイズができるサイトを自分で作ることにした。
そもそも”どこに”作るのか
一般的にクイズができるようなサイトを作ろうとすれば、サーバを借りてそこに必要なファイルを置く必要がある。
しかしそもそもお金がかかったり手続きが煩雑そうな感じがしたりと、サーバを借りるのは面倒そうなので、別の手段を採った。
かの有名な「設計図共有サイト」である GitHub にアカウントを作る（無料）と、そこに個人用のサイトを作ることができるので、それを利用することにした。が、この方法には重大な欠点がある（後述）。
製作工程
まずはクイズの形をつくる
イントロクイズというのは、
- 音楽の冒頭を流して
- 解答者の解答を受け取って
- 正しいか正しくないか判定する（正解表示は場合によっては不要だと思う）
というのが最低限の要素となる。
しかも、今回はそれらに加えて
- 解答するためのボタンとしてたくさんの東方原曲の名前を作品ごとに並べる
- 再生する時間を変化させて難易度を変化させる
- 最初に難易度や出題数を選べるようにする
というようなことを実現したい。
しかし、いきなりすべての要素を満たそうとするのではなく、まずは
- 解答者の解答を受け取って
- 正しいか正しくないか判定する
という要素だけを満たした、普通のクイズができるページを試しに作った。
https://nerewid.github.io/quiz.html
これはインターネットの海に転がっていたソースコードを組合わせて完成させた。
6 問のクイズがランダムな順で出題され、選択肢を押すと正誤がでるショボいクイズである。
しかし、
- 問題の順番をランダムにする
- ボタンを押すと解答ができる
- 最後に何問正解したか示す
といった基本的な要素を実装することができて、これから作りたいものの土台になるものをつくることができた。
曲を流す
実は曲を流すのは、そこまで難しくもなかった。
「こういうツールを使えば音声ファイルを流せるよ」みたいな情報はすぐに見つかったので、全然苦労した記憶がない。
しかし、故「東方イントロ当て」のように、
- 再生する時間を変化させて難易度を変化させる
ところで苦労した。
最初は「あるファイルの冒頭 0.n 秒だけ再生する」という仕様にすればいいのかなと考えていた。しかし、自分が調べた限りでは、「十分に長い音声ファイルを読み込んでそのうち途中の数秒を再生する」という方法は存在したが、その方法では「冒頭 0.n 秒だけ再生する」というのはうまくいかなかった。
大量の音声ファイルをあらかじめ編集しておく
「一つの曲に対して一つのファイルを用意し、難易度ごとに再生する時間を変化させる」という戦略はダメそうだと分かった。そこで難易度ごとに短くカットしておいたファイルを再生することにした。
しかし 243 曲出題する曲があって、難易度が5個（Easy, Normal, Extra, Hard, Lunatic）ある。すると
243 * 5 = 1215 ファイル を手動で編集しなければならない
この編集には冒頭の無音をカットして、更に 0.1, 0.3, 0.5 秒などと指定の秒数を切り出す操作が含まれている。ということで、かなり手動でやるのは大変な量である。
そこで SoX というツールを使って MacOS のターミナル上で原曲の音声ファイルに対して一括処理した。無音の処理と一定の長さの切り出しを自動でやってくれる。
find . -name *.mp3 -exec sox {} ../{} trim 0 0.1 \;
find . -name ../*.mp3 -exec sox {} ./0.1/{} silence 1 0.08 0.2% : restart\;
みたいなことをやるとほんの10秒弱で処理が終わる。嬉しい。
また、ある無音の閾値を調整して、Lunatic であってもある程度音量が大きい部分から切り出すようにした。
こうして問題として流すファイルを用意できた。
ちなみに難易度設定は
再生時間
Easy 1.0秒
Normal 0.5秒
Extra 0.3秒
Hard 0.2秒
Lunatic 0.1秒
である*2。
解答のためのボタン
イントロクイズとしてテンポよく答えてもらうためにも、解答はボタンでできることが望ましい。一方で、選択肢は 240 個ほど存在するので、全てを一度に表示することはできない。
- 作品名のボタンだけを並べる
- 作品名のボタンを押すと曲名の一覧がボタンとして現れる
- 曲名のボタンを押すと解答になる
という風に作った。
その他ここで説明しなかったような内容も実装して、「東方イントロクイズ」が3日程で完成した。
色々な工夫
出題数を自分で決められるようにした。
全問に挑戦したい人、サクッと遊びたい人など、様々なニーズに対応するために、問題数を始める前に指定できるようにした。
出題範囲を絞れるようにした
ED曲やスタッフロール曲はゲームでしか曲に触れていない人が触れる機会が少ないため、場合によっては出題しない方がいいと考えた。
また同様に小数点ナンバーの作品も出題から除外できるようにした。
実は自分もこの機能をオンにして遊ぶ（正直）
json ファイルから曲名ボタンを動的生成
作品のリスト及び曲のリストは json ファイルという形式で管理している。そのファイルに曲についての種々の情報を記載して、出題や表示に利用している。将来問題が追加する時のことを考え、画面に表示されるボタンをこのファイルを利用して動的に生成するようにした。簡単に言えば、この json ファイルを更新するだけで画面で表示される曲名ボタンも自動で更新されるようにした。
運ゲーにならないように
プレイヤーズスコアは風神録に含めています。
・狂気の瞳はイントロで永夜抄と花映塚の判別がつかないので、どちらを答えてもOKにしています
・妖怪の山はイントロで風神録とダブルスポイラーの判別がつかないので、どちらを答えてもOKにしています
「細かい話」というページにこのように書いたが、要は
「曲の途中で違いが分かるけれど、イントロでは判別できない2曲」はどちらを答えてもOK
にしたということ。
ファイル名の隠蔽
ブラウザで F12 を押すとどういったファイルがやり取りされているか見ることができる。最初は音声ファイルの名前を
12802.mp3
という風に名前をつけていた*3。
これは
128 （→12.8 妖精大戦争）02（→の2番目の曲）
という意味で、「いたずらに命をかけて」の音声ファイルである。
そのためこの規則を理解してしまった人には、出題される問題がバレてしまう可能性があった。そこで"12802"の部分を変換して、必要な時には"12802"に戻せるけども見ただけでは分からないようにした。簡単な暗号化になる。
解答時間の計測
解答時間を計測して結果画面で示すようにした。（それだけ）
ツイートボタン設置
結果画面で結果をツイートできるようにした。（それだけ）
至らない点
スマホ対応が微妙
いちおうスマホで遊べるようにレイアウトを調整したが、うまく動かないという感想を見かけた。あらゆる端末で遊べる保証はできない。推奨は PC + Chrome 。
スコアを集計できない
全問に挑戦した人のランキングを作ったり、曲ごとの正解率などを出せたら面白そうであるが、残念ながらそれはできない。
それは前述した GitHub の欠点によるものである。
GitHub 上で公開したサイトは、データを利用者から受け取ることができない（多分）。そのため今まで何問正解したかどうかやどの問題で正解したかといった情報は、利用者のブラウザ上にしか残っていないもので、どうやっても管理者の私が知ることはできない。そのため正解率などを出そうとすれば、利用者からデータを受け取るために意を決してサーバを借りる必要がある。
反響
結果をツイートできるようにして、ハッシュタグ #東方イントロクイズ も用意したので、反響を見ることができた。楽しんでいる方が居るようで嬉しい。
全問正解している人
東方イントロクイズに挑戦しました！
— sou1（そういち） (@sou_swampert) August 18, 2019
難易度Lunaticで 243問中243問正解！
解答時間： 1436.9 秒
https://t.co/0F7KgZ6Df5 #東方イントロクイズ
やりました！！！ 東方イントロクイズLunatic！！！
全問正解！！！！！！！
プレイ動画を上げている方も
難易度調整はうまくいったかな〜と思う。
感想
まず我ながらこのサイトで遊んでて楽しい！
あと作ること自体がいい経験になった。
何回も改良を加えて遊びやすくなったと思う。
みんな遊んでくれよな！
おわり
