web謎の入力フォームの作り方

2020-04-21公開 2019-04-21更新

web謎の入力フォームの作り方タイトル画像

web謎を作ろうと思ったときに障壁となるものの1つが正解判定のフォームの作成だと思います。

正解判定フォームの形式には、多くの種類があるのですが、どれも使用できるサイトが限られていたり、アラート文が出せなかったりと強み弱みがあります。(それについてはまた別記事で書いていきたいと思っています。)

  • ベタ書き
  • おんせん式
  • 小判式
  • ティーポット式 (←今回紹介するのはこれ!)
  • ページ鍵掛け式
  • URL代入式 などなど…

ここでは、筆者が用いている方法(ティーポット式)とその使い方について書いていきます。

ティーポット式の名前の由来


名前は、当時このシステムの利用方法や暗号化プログラムを公開してくださっていたサイトの名前に由来します(2015年頃に閉鎖しています)。

特に重要でも無いので、解読部から暗号化プログラムを復元してくださった先輩の名前を取ってぬるー式と呼んだり、所属していたENIG-ROIDに広く普及しているのでエニグロ式と呼んだりもしてますが、まぁどうでもいいでしょう。

HTMLに直接記述する方法ですので、HTML自体を書き換えることができるサイト・人であることが条件です。

暗号化ツール

まずはメインの暗号化ツールを置いておきます。




暗号化ツールの使い方は書いてある通りですが、

  • 1番目の欄に、答えが入力されたときに遷移する先のURLを入れる
  • 2番目の欄に、入力が想定される答えを入れる
  • 生成ボタンを押す

で、暗号(数字5桁か数字2桁がたくさん並んでいるもの)を生成してくれます。

サンプル

サンプルです。


  • 「とっぷ」と入力するとこのサイトのトップページに飛ぶ
  • 「りんく」と入力するとこのサイトのweb謎リンク集ページに飛ぶ
  • 「あらーと」と入力するとアラートが出る。

ようになっています。

HTML側の記述は?

以下をコピーして、コメント文を参考にcURLの中身とif文の中身を書き換えてください。

(時間のあるときにもう少し丁寧な説明を書きます…。)

See the Pen teapod tool by しゑひ (@shiwehi) on CodePen.


ティーポット式を使用する強み

ティーポット式を使用したときの強みは以下の通りです。

  • 入力形式を問わない
  • 複数の入力方式・複数ワードに対応可能
  • 遷移先の振り分けやアラートに対応可能

入力形式を問わない

wordpressでは記事自体に鍵を掛けることができるため、擬似的に同様の仕組みを利用することができますが、パスワードが半角英数字でないといけないという制約があります。

ティーポット式はJavaScriptで正誤判定を行なっているため、入力方式を問いません。

複数の入力方式・複数ワードに対応可能

公式LINEアカウントと同様にティーポット式では複数の入力方式・入力ワードに対応することができます。

そのため、大文字と小文字、ひらがなとカタカナといった表記揺れに対応することが可能です。

遷移先の振り分けやアラートに対応可能

複数ワードに対応しているということは、答えによって遷移先のページを変えることができるということです。

また、JavaScriptのif文で判定をしてるため惜しいときに「もう少し考えてみましょう!」といったアラートメッセージを表示することもできます。URL代入式の様に、答えが異なった際に404ページに飛んでしまうこともありません。


このツールを用いる場合の注意点

このツールを使用するときに覚えておいて欲しい注意点が何点かあります。

ソースを読める人に次に進まれてしまう

こちらのツールはJavaScriptというプログラム言語を使用して答えと遷移先URLを暗号化しています。

そのため、パッとソースを見ただけでは分からないですが、JavaScriptを読める人は頑張れば遷移先URLを復元して次のページに進むことができてしまいます。

謎解きのページを見に来ている人は謎を解きに来ていると思うので、そもそもソースを解析しようと思う人はいないと思うのですが、早解きの大会や賞品があるとき等の不正が他人の結果に影響を与える場合には、使用しないほうが良いでしょう。

遷移先URLが短いと誤作動を起こす場合がある

このツールは、入力された単語で暗号化されたURLを復元しているのですが、プログラムの都合上、判定時のURLが短いと誤作動が起きてしまいます。

不正解のワードでも正解判定されて存在しないページに飛んでしまう場合や、何も反応しない場合があることが確認されています。

この現象を防ぐためには、正誤判定部のURL指定の記述を出来るだけ長くする必要があります。

まとめ

  • 比較的簡単にweb謎の入力フォームは作成できる!
  • 使用する際は誤作動に注意して使用してください。

先輩からこのツールを教えてもらった時は、HTMLが辛うじて書けるかな、という程度でしたが、教えてもらいながら作成することができました。

正直、どの方式を使っても(ベタ書きであっても)普通に謎を解き進めていく分には関係ないと思いますが、「さすがにベタ書きはちょっと…。」という人は使ってみてください!

↓↓↓この記事をシェア↓↓↓