思いつきでweb謎もどきを作った話
こんにちは。Nakaです。ATGMが終わってから一ヶ月が経って、そろそろ夏休みの終わりも見え始めた頃ですがいかがお過ごしでしょうか。
今日は、私が投稿したとあるweb謎もどきについてのメモを書き連ねようと思います。誰かに見せるため、というよりは自分用メモの割合が強いので非常に読みにくいと思いますが、その点はご容赦ください。
それがこちらです。いかにもふざけた名前ですが、もしこの記事をご覧の方でまだプレイされていない方がいらっしゃいましたら是非プレイしてみてください。
また、この記事は上記コンテンツのネタバレを含みます。ご了承ください。
そもそものきっかけ
なぜこのweb謎を作ったのか、という話からしていきます。そもそも、今回これを作ったのは「謎解きコンテンツを作る」というのが目的では無く「webの勉強をする」というのが主たる目的でした。今年の夏休みにN予備校のサービスを使いwebに関する基本的な勉強をして、その一つの成果物として今回のコンテンツを制作しました。
とは言っても、webの勉強としてのコンテンツは別に謎解きで無くてもかまいません。今回わざわざ謎解きコンテンツにした理由は海老さんという方の影響が大きいです。(本当の名前はもう少し長いらしいのですがあんまりよく覚えていないのでいつも海老さんとお呼びしています。)
その方が8月31日の誕生日に合わせてオリジナルのLINE謎を公開しているのです。これを見て、私も誕生日に合わせて謎解きコンテンツを作ってみるのが良いかもしれないと強く思いました。
しかし、当時私の誕生日のわずか一週間前。謎の中身を作るだけでも大変なのにそれに加えてwebの構成をやらなければならないという、とても大変なことをすることになりました。
謎の中身
というわけで、web謎を作ることになったのですが生憎私は知識が非常に浅く大層なことが全くできません。何ができるかもよくわかっていません。なのでそこは大きく妥協して、「小謎のみ」「別にLINE謎であってもいいような」「でも誕生日に合わせて作ったってことはわかる」ものを作成することにしました。
私自身、謎を作るのはとても苦手なのですが、今回は一番最後の問題から全ての謎の答えを決めて、その答えに合うような謎を一つ一つ作成しました。解説は省略します。気分が向いたら、没問とともに解説記事を書くかもしれません。
web本体の作成
というわけで、謎の中身はどうにかこうにかひねり出しました。が、肝心のwebが一切できていません。先述したようにN予備校のサービスを利用したのですが、特に教科書のようなものがあるわけではないので資料が発展性に非常に乏しいです。なので、コンテンツ内の無いようを模倣しながらの作成になりました。
Expressというサービスを利用してシステムの構築はそこそこ楽をしました。urlの依存関係がそこそこ楽に作れるのは非常にアドです。pugというhtmlテンプレートのシステムを併用することでhtmlの記述も楽をしました。楽してばっかりだな。ですが、逆に言うと、これ以外の方法を私は知りません。これらの道具を取り上げられると何もできなくなるので正直勉強が足りていません。
また、楽をしてばかりなので当然細かい部分の配慮が全くできていません。デザインが一切無いのは本当にどうにかした方が良いです。これは今後の課題。
web特有の問題
本当に特有なのかはなんともいえないのですが、私がシステムを作る上でかなり悩んだことがあります。それは「正解判定」と「次のリンクへの移動」です。
一つ目の正解判定、ただやるだけであればたいしたことをする必要はありません。しかし、「開発者モードなどでhtmlやjsのコードを見ても答えがわからないようにする」という要件をつけようとすると話がとてもややこしくなります。
ここからしばらくややこしくわかりにくい話が続きます。「正解判定」と「次のリンクへの移動」の章は軽く流すと良いと思います。
正解判定
アイデア1【諦める】
諦める。はい。面倒なので諦める、というのは多分立派な解法の一つです。プレイヤーを信頼して、注意書きに「開発者モードでのソース閲覧禁止」との記述を追加するのが考えられます。まあ、ソースを覗いてチートするのは謎解き的には面白さを減らす行為なので、やる方が悪いという話にはなるかもしれません。
ですが、今回はあくまでもwebの勉強です。あきらめずちゃんと実装しましょう。
アイデア2【答えをサーバーに問い合わせる】
これは我ながら良いアイデアだと思いました。つまり、プレイヤーのPCには答えのデータを一切残さず、サーバーに解答を送信してその答えが合っているかどうかをサーバー側で判断する、ということです。
サーバーに格納されているデータをのぞき見られたらもちろんアウトな訳ですが、そこは一旦諦めることにしました。そこまで来ると私の知識でどう対処すれば良いのかよくわからないです。
が、これにはちょっとした問題が。それは、サーバーへのアクセス回数がめちゃくちゃ増える、というもの。答えを送信するたびにサーバーにアクセスするので、無いとは思いますが一度に多くの方がプレイした場合、必要以上の負荷がサーバーにかかることになります。サーバーへの負荷の概算方法を私は一切知らないので本当に負荷が重いのかは全くわからないのですが、とりあえずこの方法は最後の手段として一度保留することにしました。
アイデア3【ハッシュ値を使う】
ハッシュ値とは何か、というのを私はちゃんと説明できないのですが、ざっくり言うと「あるアイテム(文字列とか数字とか)と対応する数字」です。この数字は作るのは(コンピュータの処理的には)簡単なのですが、数字だけ見たときに元のアイテムがなんなのかを解読するのが大変です。
そして、答えが提出されたときに、答えのハッシュ値を取得してそれがサーバーから与えられた答えのハッシュ値と一致するかを確認します。一致すれば正解、次のページに進みます。
めちゃくちゃ詳細の説明を省きましたが、ハッシュ値の話を知っている人であればなんとなく何をやってるかは伝わるような気がします。
これならサーバーへのアクセスは最低限ですむので、貧弱回線を使ってる人でも快適にプレイできます(?)。
次のリンクへの移動
しかし、実はこれだけではまだ問題が残っています。
次のページへのリンクがそのままの形で残っていたらコピペで次の問題に進めてしまいます。ここもどうにかして情報を隠さないといけません。今度は諦めるはなしで考えます。
アイデア1【ハッシュ値を使う】
さっきハッシュ値をつかったので今回もurlをハッシュ値にすれば行けるのでは？と一瞬だけ思ったのですが、残念ながらそうはいきません。なぜなら、ハッシュ値から元の値への復元は限りなく困難だからです。そもそもそのような使い方を想定したものではないので没です。
アイデア2【サーバー側でリダイレクト】
これもかなりよさげなアイデアです。というか、本質的には正解判定のアイデア2と同じことです。この実装にしておけばかなり楽そうだったのですが、同じ理由で没。
アイデア3【urlを謎の答えで暗号化】
これは私が自力で出したアイデアでは無く、ましーさんに教えてもらったアイデアです。
どういうことか。まずはサーバー側で「謎が解けたら次に行くurl」を「そこで解いた謎の答え」で暗号化して、そのデータをプレイヤーに送信します。そして、プレイヤーが謎が解けたら、その答えを使って暗号化されたurlを復号します。こうすることで謎が解けないと次のページがわからないようなシステムにできました。
まさに、謎の答えが鍵になっている感じがして実装しているときにとてもわくわくしました。
ヒントの話
次はヒントの話。今度はデータの格納の仕方では無く、その表示の仕方の話。
ヒントの表示の仕方というと、それ専用のページを立てるというのが挙げられると思います。最初はそうしようと思ったのですが、正直めんどくさかったので別の方法をとることにしました。それがアラートというものの利用です。うまく説明できないので、なんのこっちゃという人は実際にヒントを取得してみてください。そのときにポップアップしてくるアイテムのことです。
ここは個人的こだわりポイントなのですが、ヒントを複数用意した時は何回もヒントを取得するとそのたびに次のヒントが表示されるように実装しました。ですが、実際プレイする方からしたら何回もクリックするのはストレスになるかもしれないので、良い実装だったかはあんまり自信がありません。
実は、今回のヒント機能は最後まで行くと答えが表示されるのですが、答えの一つ前のヒントでは、「次は答えが表示される」という旨のアナウンスが自動で追加されるようになっています。こういうどうでも良さそうな実装が結構楽しかったです。
まとめ
ここまでやって、無事完成までこぎ着けました。この記事を書いている段階ではまだ公開されていないので、感想が来たら良いな～と思いながら記事を書いています。
当然いろいろ懸念点だったり、修正したい点はたくさんあるのですが、そこは今後の課題として明日以降の自分が今後別の作品を作るときに丸投げしたいと思います。
次の目標はGASを使わないで、サーバーを使ったline謎を作ってみること、です。が、正直いろんなハードルが立ちはだかっているので果たしてどうにかなるのだろうか･･････。最初の方にも言いましたが、N予備校の資料がほんとうに発展性に欠ける資料なので、もうちょっと網羅的に書かれている書籍を購入して勉強しようかと悩んでいます。お金無いけど。
ここまで読んでくださりありがとうございました。天気は不安定がちですが、くれぐれも体調には気をつけてお過ごしください。
この記事が気に入ったらサポートをしてみませんか？