初歩的なリドルの作り方

初めてリドルを作ろうとしている人を対象にしたページです。
技術的に高度なものを作ろうとしている方には、あまり役に立たないと思います。
また、HTML の作り方自体がわからないという人は、まず簡単な HTML ページを自分で作れるようになってから、あらためてこのページをごらんください。

もし「こんなことも書いたほうがいいよ」という方は、ぜひご一報を。

どうやって解答するの？

私の「ナオのリドル 10 題」シリーズでは、テキストボックスに答えを入力するという形式をとっています。しかも日本語文字での解答が可能です。
ただ、この方式は JavaScript を使用したもので、技術的にはやや高度なものです。ここでは、JavaScript を使わない最低限の技術でリドルを作る方法について説明します。

一番単純な方法は「URL 書き換え式リドル」です。
これは、URL の末尾にある HTML ファイル名 (****.htm または ****.html) の拡張子以外の部分 (左の例では「****」) を、答えを表す文字列に書き換えるというものです。
たとえば、問題が「1 月を英語で」なら、URL の末尾を「january.htm」のように書き換え、Enter キーを押せばそのページに移動します。

特別な細工は何もいらないので、技術的にはきわめて単純です。そのためリドル作成初心者にはおすすめと言えます。しかしいくつか気をつけなければいけないことはあります。

答えは英語？日本語？

URL はアルファベットで入力しますから、URL 書き換え式リドルの答えは英語にするのが一番わかりやすいです。

答えを日本語の単語にする場合、URL 書き換え式ではローマ字入力することになります。
ところがローマ字入力の方式は複数あるので、どれを採用するかは全体で統一する必要があります。通常はヘボン式を使用します。
長音や拗音など表記を間違えやすいものも多いので注意してください。制作者が間違えるともはや解答不能です。
たとえば、ヘボン式での入力の場合・・・
　丹波社長 → ○ tambashacho　× tanbasyatyou
　備中高松 → ○ bitchutakamatsu　× bicchutakamatu

他の人のリドルで、間違った答えを入力したらエンディングページが開いたことが・・・

あるある (笑) ・・・って制作者側としては笑い事ではないんですが。
たとえば、問題が 3 問あって、ページ構成が
　オープニング (index.htm) : とりあえず「one」と入力
　1 問目 (one.htm) : 答えは cat
　2 問目 (cat.htm) : 答えは dog
　3 問目 (dog.htm) : 答えは rat
　エンディング (rat.htm)
となっていた場合に、1 問目で間違って URL に「cat」ではなく「rat」と入力してしまうと、エンディングにショートカット！

これを避ける方法としては、「答えの前 (または後) に問題番号を入力させる」という方法があります。
上の例で言えば、
　オープニング (index.htm) : とりあえず「one」と入力
　1 問目 (one.htm) : 答えは cat なので「1cat」と入力
　2 問目 (1cat.htm) : 答えは dog なので「2dog」と入力
　3 問目 (2dog.htm) : 答えは rat なので「3rat」と入力
　エンディング (3rat.htm)
のようにすれば、この問題は回避できます。
解答者側としてはめんどくさいですけどね。

実際にはこういう問題が起こることはそれほど多くはないので、この措置をとらないリドルの方が多いようですが、心配な方はこの措置をとっておくとよいでしょう。

JavaScript を使えば、解答者に手間をかけさせずにこの問題を解決できるんですが、上級編になるのでここでは説明しません。

ディレクトリ (フォルダ) の作り方で注意すること

「1 作品につき 1 ディレクトリ」が鉄則。
たとえば、私のリドル (http://www.gran-fenix.com/fun/riddle/ 以下) の場合、ディレクトリ構成は・・・

のようになっています。
これを守らず、全リドル作品のファイルを同じディレクトリに保存した場合、「間違った答えを入力したら他のリドル作品のページに移動した」などという論外な事態が発生する可能性があります (実例報告を見たこともあります)。

HTMLファイルの作り方で注意すること

次のような meta タグを head セクション内に入れておいてください。「検索エンジンで他の問題ページの所在を検索する」というカンニングを防止するためのものです。
もちろん、リドルのオープニングページについては不要です。

あとは、当たり前のことではありますが、URL 書き換え式リドルの場合、前の問題で入力する文字列をファイル名にしてください。
たとえば 1 問目の答えが「answer」なら、2 問目のページは「answer.htm」。
問題番号まで入力させるなら、それにあわせて「1answer.htm」などのようにします。

ヒントや答えを巧妙に隠しておくための HTML テクニック

「リドルの解き方 : 基礎テクニック」で紹介しているようなテクニックを使うのが一般的です。
ただしこのテクニックはあくまで補助で、基本は問題文で勝負！です。そこは忘れずに。

ここまで、URL 書き換え式リドルの作り方の基礎をざっと説明しました。
フォーム入力型のリドルは JavaScript を使ったりするなど少し (かなり？) 構造がややこしくなります。
JavaScript の自作に慣れていらっしゃらない方には、oz さん作成のフォーム入力型リドルのテンプレートのご利用をおすすめします。

ではここから、問題と答えを考える場合の注意事項の説明に入ります。

どんな問題を作るものなの？

次のようなパターンがあります。複数を組み合わせたパターンの問題も多いです。

「こんな問題は作っちゃダメ」っていうのはある？

1. 複数通りの答えが想定される問題。
答えが英語の場合、想定される英単語が複数存在する場合があります。
たとえば、問題が「十二支の 2 番目。答えは英語で」となっていた場合、これだけでは cow、bull、ox のどれを入力すればよいかわかりません。
このような場合、さらに答えを特定するためのヒント (「2 文字目が u」とか) をどこかに仕込む必要があります。
もちろん、答えが複数通り想定されることがないよう注意が必要なのは、日本語の場合でも同様です。
たとえば問題が「徳川家康の孫」ときたら答えが何通りあることやら・・・
もちろん、最初から答えが 1 通りしかありえない問題にするのが最善なのは言うまでもありません。

2. 自分にしかわからない問題。
特に暗号解読問題とかマニア知識 (映画や音楽関連のものとか) を要する問題なんかは、知らない人でも解けるように、問題を解くカギをちゃんと用意しておかないといけません。
検索が必要な問題は、検索語を特定するところまでが謎解きで、検索自体は簡単にできるといいでしょう。検索エンジンによって検索結果が変わったり、同じ検索エンジンでも結果表示が時によってずいぶん変わることがあるため、検索結果画面でのひと悩みを必要とするような問題はできるだけ避けてください。
重要なことは、答えがわかったときに解答者に「あーなるほどねー」と思ってもらえるようなものにする、ということです。
何らかの知識が必要な問題では「これに関する知識がない人はどうやったら正解にたどり着けるか」という解答者視点での推敲を忘れずに。

問題ができあがったよ！さあ公開しようか・・・

ちょっと待ったぁー！
ファイル一式をアップロードした後、リドルの存在を公開する前にやることがひとつ。
それはテストプレイ。自分でやってみるのはもちろんのこと、誰かお友だちにもやってもらいましょう。
これは主に上で書いた「自分にしかわからない問題」がないかどうかを確認するためと、ブラウザーや OS によって違う動作をしないかどうかを確認するためです。

さあ、これであなたもリドル作家！
みなさんのリドルに挑戦できる日を楽しみにしています。