PBR3 解体新書 システムやさん編
ごあいさつ
皆様こんにちは。Puzzle Boss Rush 3 でシステム屋さんを主に担当しておりました、ウドと申します。この記事ではシステム、問題ページや正解判定まわりのあれやこれやについて書いてゆきたいと思います。おたのしみに。
なお、あまり技術的な内容には立ち入らず、読み物的な内容になる予定です。そうなるようにがんばって書きます。
見た目を改善せよ
今回システムとして入った一番大きな役割は、フォームの見た目を整え、（最低限の）スマホ表示に対応することでした（スマホ用のUIが使いやすいかと言われると、これが諸説あるのですけど……）。2.5までのフォームのサンプルがあったので、bootstrapというライブラリを使って、比較的かんたんに整えることができました。
そのほか、回答フォームへのURLをリンクにしたり、一部フォームではアンサーキーの形式を指定してエラーを出したりと、地味な改良を加えています。ほんとはツイートと共にでっかい画像がバーンと出てくるような仕組みにしたかったのですが、GAS（Google Apps Script）ではこれが出来ないようで諦めました。あれができるとビジュアル的にイベントやってるぞ！感が出るのでよいのですけどね。
ツイートで見かけたご意見として、秒数がマイナスになっても送信されない……というのがありましたが、送信判定の部分は大きく変更してはいないので、これは実は原因がわからないのです。すみません。サーバー側で60秒待つという処理がやや不安定なよう？です。
あとはタブを複数開くことでブルートが容易になってしまうのを対策したほうが良い、という声もありましたが、これを防ぐためにはギルド制のようなものを導入するしかなく、それもGASでは厳しいです。PBRが自前サーバーを立ててギルドシステムを構築する日は来るのでしょうか。
世界観へのこだわり
予想外に早く最低限の見た目が整ったので、こんどは遊び心を出していきたいと思っていました。その一つは背景です。各日、フォームの背景画像がパズルに合わせたものとなっていたのですが、これはなんとなくパズルに関連した感じで、敷き詰めるので縦横つながるように……とか考えながら、チマチマ作ったものです。こだわりポイントです。
なお、Day9の珍妙なオブジェは何か？と悩まれた方もいるかもしれませんが、これはビグツァイト様式の塔です。誰がなんと言おうと塔です。ほらだんだん塔に見えてきたでしょ？塔のページは差別化が難しかったので、いまどの塔の何階にいるか、ビジュアル的に少しでも助けにならないかなと思って考えたものです。当初、ビグツァイト様式であることを忘れ、上に行くほど細くなる普通の塔にしていたのですが、当日指摘されて慌てて直しました。上に行くほど広くなる設計、見るからに不安定ですね。下の階から壊せば魔王城も崩れるのでは……？
あとは判定結果のところ、ゲームのダイアログ風となっておりました。実はここだけ専用のフォントを使ったりしてちょっとこだわっています。当初、フォームをもっとストーリーに寄せたいと考えていたので、その名残です。勇者が魔物を退治する、というストーリーではなかったので、今となっては別のアプローチがよかったかなあと考えていますが、まあ雰囲気作りということで、ひとつ。
そうそう、各Dayのロゴはすべてにょろっぴぃさんに作っていただいたものです。ロゴほしいです～～って話をしたら作っていただけることになり、個性豊かなロゴがOP映像やフォームを彩ってくれました。すごい！
なお、Day5 Instructionlessのロゴは報告書やOP映像のものと異なっていましたが、Instructionless Gridへのリスペクト（？）です。小ネタに気づかれた方はいらっしゃいましたか？
大ミッション・ハニーアイランド
運営開始当初、作問希望を取っていたときの話です。自分は作問希望は出していなかったので、他人事のように眺めていたのですが、そのなかにこんな話がありました。
・盤面全体がハニーアイランドになっている
・各マスにはハニーアイランドをはじめとする小問がある
・小問を解くと、そのマスが白か黒かの判定が出る
・全体のハニーアイランドを解くとクリア
みたいなのを作れたら面白いかな、と思っています（小問は半分ぐらい解けばいいと思うので、基本的に軽くしつつ、たまに地雷も混ざっているとか）。61問もあるので、システムとチェックが若干大変そうですが…
！？
2.5までのシステムで考えれば、解答欄を61個作るか、フォームを61個作るしかありません。解答欄はまだしも、フォームをそれだけ作るとなるともはや「若干」では済みません。それはさすがに無謀なのでは……と一瞬思いましたが、ここで即無理だと判定するようでは自分が運営に入った意味がない、と思い直し、実現する方法を考えました。
できればフォームを一つで済ませたい、小問ぶん全部の入力欄を作るのは筋が悪そうなので、解答欄は1コにして、選んだ小問に合わせて判定を切り替えたい、小問の判定をするたびにフォームを送信するのはどうにもテンポが悪そうなので、どうにか小問の判定は裏でやりたい……など、かなり大掛かりな仕掛けになることは容易に予想されました。それでも、とりあえず手を動かさないことには始まらない……と、プロトタイプを作り始め……
「絶賛IG中失礼します。やるかどうかは別にして、たたき台を作ってみました
左のマスをクリックすると右の小問が切り替わって、解答すると盤面が白か黒に塗られる感じを想定しています」
この投稿をしたのが話題の出た翌日です（当時、運営メンバー有志でギルドを組み、IGを解いていました）。いやこの人、めっちゃやる気満々じゃないですか。ともあれ、システムがなんとかなりそうとわかったことが追い風に……なったかどうかはわかりませんが、ハニアプロジェクト（今命名）が動き始めました。
小問判定が思ったように出来なくて焦ったり、問題種のアイコンを作ったりするのに地味に時間をかけたり、safariで表示が愉快なことになるバグに悩まされたりと、順風満帆ではありませんでしたが、どうにか動くものが作れそうでした。画面構成はいろいろ試したのですが、タブを切り替えないで解けたほうがいいということで、現行の大ハニアと埋め込み画面を横に並べるやり方に落ち着きました。解答判定は送信のたびにスプシにアクセスしていますが、できるだけアクセス回数は減らしたかったので、問題URLは全てページに生で埋め込んでいます。この作業を自動化できず、問題配置が変わるたびに手動で反映したのは反省点ですね。アンサーキーの設定ミスにもつながってしまいました。ペコン。
チュートリアルページは本番のページを流用して作ったものです。問題アイコンが変わっていたことに気づきましたか？実はチャットでツッコまれるまで六角形アイコンのままで、あわてて作り直しました。突然凝ったシステムを出すとみんな困るかなという心配が出ていたので、チュートリアルが簡単に作れるライブラリを導入してオミナスくんに説明してもらいました。連日パズルと戦っている間に模擬戦場まで用意するとは、オミナスくんもなかなか隅に置けません。当初、ストーリーが定まってなかった頃は団長に説明してもらっていたのですが、団長は『推理で攻めるのが有効』とか言わない、かといってナナはちょっと出番が多すぎ、ということで、オミナスくんになった経緯があります。……これを書いてて思い出したのですが、CaSPの開発に関わったジジィを説明役として勝手に登場させる計画を考えていた気もするのですが、いつの間にやら忘れてたなあ。また機会があれば狙っていこうと思います。別にストーリー班にきちんと打診すればいいだけの話なんですが。
さて、そんなこんなでフォームが出来たは良かったのですが、出題するにあたって懸念材料はありました。GASのシステムが、PBRの小規模とはいえ集中するアクセスに耐えられるかということです。……いや、Googleにこんな企画ごときで影響を及ぼすとは思いませんが、ページ単位で規制がかけられている可能性は十分にありますからね。
小問判定は送信したアンサーキーをGoogleスプレッドに入力しておいたアンサーキーと照合するのですが、googleスプレッドにアクセスできる回数が決まっていると聞いて気を揉んだり(これはあとで調べたらどうも違うようなのですが)、それでなくとも判定に10秒も15秒もかかるようではテンポは落ちてしまいます。システムが律速になってしまうのは避けたかったので、ミラーページを用意したり、最悪タイムアタックを諦めてもらう覚悟もしていました。出題当日は気が気ではなかったのですが、当日の反応や、アンケートの結果を見る限りでは、そんな心配は全部杞憂におわったようで、心底ほっとしています。
反省
さて、概ね滞りなくシステム担当の仕事を遂行できたと自負しておりますが、反省もあります。
・変更が容易な仕組みにしたかった
たとえば、GASのページに画像を追加するには、以下の手順を踏む必要があります。
①Googleドライブの画像からリンクを取得する
②リンクをGASで使用できる形式に書き換える
③ページに画像を追加する
これを一枚ずつ行います。非常に面倒くさいです。特に②が非常に面倒で、インストレスの前日など特にこの作業に追われていたりしました。この手の作業をどうにかこうにかして効率化して、直前には余裕を持ってチェック作業をしたかったです。作業がギリギリになった結果、直前の動作チェックをメンバーにぶん投げてしまうこととなりました。直前にあがってくるフォームを丁寧にチェックしてくださった皆様、本当にありがとうございます。
・自分がボトルネックにならない仕組みにしたかった
上とも関連するのですが、システムを自分で抱えるということは、システムの修正は全部自分の仕事になるということです。あたりまえ体操ですね。もしページに問題があった場合でも、自分が作業できない時間は何も進まないのです。それではよろしくないので、たとえば問題のURLをスプレッドシートで管理して、ページを表示するときにそれを参照する仕組みをつくっておけば、もし誤りがあった場合でも誰でも簡単に変更できます。実際インストレスやハニーアイランドでのミスも、こういう仕組みができていれば防げたかもしれません。このあたりは、もしPBR4の運営に関われたら改善してゆきたいところです。
おまけ
討伐者が出ると、運営のSlackに隊員たちが通知しに来てくれました。
もちろんbotです。運営で使用していたチャットツール、Slackはこの手のbotが強力かつ簡単に出来るので、ずっとなにかやりたいなと思っていたところ、解答フォームと連携させることを思いつき、これはたしかDay1当日に仕込んだのでした。ページの作成の詰めを前日や前々日に自転車操業でやっていた中、並行して毎日違う通知を仕込んでいたので、何をわざわざ自分から仕事を増やしているのかという感じでしたが、運営メンバーにも概ね好評だったようです。
なお、一度まちがってニューヨーク標準時でbotを仕込んでしまったことがあり、本来は24時に来るはずの定時報告が翌14時に来るといったトラブルもありました。この日の担当だったグリンはニューヨークに住んでるのかもしれません。
～～～～～～～～～～
クロスレビュー
（広瀬あつみ）
プロトタイプハニア（チュートリアルとして公開されたものの原型）が上がってきた時に、感動してすごいすごいといろいろ反応したような気がします。各Dayの出題ページも細かいところまでこだわっていて良かったですよね。Day1背景のドミノみたいなやつ等の画像もかわいかったです。
（にょろっぴぃ）
ハニーアイランドの原案を書いた1人です。こういうものが出来たら面白そうだけど、実装が色々大変そうだな…と思っていたのですが、システム屋のおかげであのような問題を出すことが出来ました。準備中は何か出てくるたびに「すごい」しか言っていなかった気がします。
この記事が気に入ったらサポートをしてみませんか？