web謎の入力フォームの作り方(ティーポット式)

暗号化ツール

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

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

• 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が辛うじて書けるかな、という程度でしたが、教えてもらいながら作成することができました。

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