【初心者向け】プログラミング未経験でもできる！謎解きサイトを作る方法

Word Pressで自分の作った謎を公開したい！そんなあなたに、コピペだけで簡単な謎解きサイトを作れる方法を紹介します！プログラミングは少しかじっただけという人でも、大丈夫です。

この記事でわかること

Word Pressで謎解きサイトを作る方法
簡単なHTML、CSS、JavaScript の書き方
動的なサイトを作る基本知識

この記事を書いた人

あさまる（25）
理系大学院生（情報系）
プログラミング歴 6年
WEBアプリケーションを制作中

Word Pressで少しでも HTML や CSS を触ったことがあれば、簡単に謎解きサイトが作れるような難易度になっています。

こんな謎解きサイトを作るよ

今回作るのは、正解すると次の問題が現れる形式の謎解きクイズです。まずは、こちらのクイズ記事を見てみてみましょう！

2022年2月14日【謎解き #1 】あま〜い招待状に挑戦しよう！

画像のクイズ、ヒント、解答欄があり、「答える」ボタンを押すと、「正解！」などのメッセージが表示されます。さらに、正解した場合は、次の問題が表示されます。

このような謎解きクイズは、基本PCでの制作が中心になります。Word Press で、CSS や JavaScript のコードを入力して、上の記事のような簡易謎解きクイズ記事を作ってみましょう。

下準備

プラグインの追加

まずは、WordPress で JavaScript というプログラムを動かす必要があります。 JavaScript は、ホームページを動的に変化させるためのプログラムです。

JavaScript を動かすために、こちらのサイトを参考に、「Simple Custom CSS and JS」というプラグインを、実際に導入してみました。Scripts n Stylesというプラグインも紹介されていましたが、日本語に対応していないためオススメしません。

↓オススメのプラグイン情報

Simple Custom CSS and JS

解答フォームを作る

さっそく、謎解き記事を作っていきます。新規記事を作成して、問題画像とカスタムHTMLを追加しましょう。

謎解きの画像が既にできていれば、追加しておきましょう。

HTMLとは、Webサイトの内容そのものです。Word Press 自体も HTML で構成されています。ちなみに、CSSとは、HTMLに記述された文字や背景などを、装飾装飾するためのプログラムです。

問題画像の下の、カスタムHTMLに以下のコードをコピペしましょう。

カスタムHTML

<input type="text" id="ans1_01_text" placeholder="数字を入力">
<button onclick="(function(){var val = ans1_01_text.value; check(val, '4', 'ans1_02');})();">答える！</button>

< >で囲われたものをタグと言います。上のコードでは、input タグと button タグが記述されています。

タグは </input> のようなスラッシュ（ / ）をつけたタグとセットで、使う必要があります。placeholder は、入力欄が空欄の時に薄い字で表される文字列です。

inputタグは、文字を入力する場所です。今回だと、解答者が答えを入力する部分です。id は、このタグに付けられた名前で、サイト内で固有のものにしなくてはいけません。

id は、好きなものに変更しても構いません。今回は、わかりやすいように、「ans1_01_text」としてみました。

こちらは、ボタンを作成するタグです。onclick は、ボタンが押されたときの動作を記述しています。onclick 内の function では、「ans1_01_text」の入力内容を受け取り、check () という JavaScript のコードを動かすように指示しています。

次に、Word Press のツールボックスから、「カスタム CSS ＆ JS」（「Simple Custom CSS and JS」を導入すると出てくるよ）を開いて、JavaScript（js とも訳される）を書いていきます。

記述する内容はこちら。前述したボタンの onclick で出てきた関数 check ( ) の内容を記述しています。

JavaScript

function check(val, ans) //val は 入力された答え、ans は正解
  {
                if (val == ""){//もし、回答が入力されていない場合
                    alert("答えを入力してください。");    //メッセージを出力
                    return false;    //本来の動作をキャンセル

                }else if(val == ans){//もし、回答と正解が同じ場合
                    alert("正解！");   //正解メッセージを表示
                    return false;    //本来の動作をキャンセル

                }else{//上の２つ以外場合
                    alert("不正解！");   //不正解メッセージを表示
                    return false;    //本来の動作をキャンセル
                }
  }

javaScript のコードを保存したら、謎解き記事のプレビューから動作するかを確認しましょう。

正解後、次の問題を表示する仕組み

2 問目を作ってグループ化

謎解き記事の、問題画像・カスタムHTMLを複製して、2 問目としましょう。さらに、2問目の問題画像・カスタムHTMLをグループ化しましょう。

グループ化機能は、Word Press 標準搭載の機能ですが、使い方が少しわかりにくいので、注意です。問題画像にグループ機能をつけ、カスタムHTML に近づけてみましょう。

グループに id と class をつける

グループのブロックメニューから、id（HTMLアンカー）と追加CSSクラスを記述しています。

id は input タグでも出てきた固有の名前になりますので、被らないように気をつけましょう。今回は「ans1_02」としました。また、id ではなくHTMLアンカーと書いてありますが、同じものです。

さらに、id（HTMLアンカー）の下にある、追加CSSクラスに「quizBox」と記述しておきましょう。class（クラス）は id と違い、固有である必要はありません。同じクラスを持つ要素は、同じ装飾になります。

「quizBox」という class を使って、2問目以降を隠したり表示したりします。

カスタムCSSでクラスを記述

JavaScriptと同じく、最初に導入した「Simple Custom CSS and JS」プラグインの編集メニューから、CSS を記述します。CSSとは、記事の見た目を装飾してくれるプログラムです。

問題を表示したり、非表示にしたりするための「quizBox」という class を作成します。今回は、2 問目から最終問題までの問題を非表示にしたいので、2 問目から最終問題に「quizBox」を適用しています。

追加CSS

.quizBox {
	visibility:hidden;
}

「quizBox」の前に「. （ピリオド）」をつけ忘れないようにしましょう。「. （ピリオド）」は、「quizBox という class ですよ」という目印です。「 visibility : hidden; 」と書いたことで、「quizBox」のクラスを持っているタグは、非表示になります。

正解時に、次の問題を表示

1 問目を正解した時に、2 問目を表示する仕組みを作りましょう。まず、1 問目のカスタム HTML を以下のように書き換えます。

カスタムHTML

<input type="text" id="ans1_01_text" placeholder="数字を入力">
<button onclick="(function(){var val = ans1_01_text.value; check(val, '4', 'ans1_02');})();">答える！</button>

check(val, ‘4’, ‘ans1_02’);

変化したのは、button タグの check の中身です。「 ‘ans1_02’ 」が増えており、これは 2 問目のグループの id（HTMLアンカー）です。

つまり、 button タグでは、「ボタンが押された時に、回答者の解答（val）と、問題の答え（’4’）、次に表示する問題の id（ ‘ans1_02’ ）を、JavaScript の check 関数に渡す」という指示を出しています。

次に、JavaScript の方も、以下のように追記しましょう。

JavaScript

function check(val, ans, next){  //「 ,next」を追記
                if (val == ""){
                    alert("答えを入力してください。"); 
                    return false; 
                }else if(val == ans){
                    alert("正解！"); 
                    document.getElementById(next).style.visibility　= "visible";  //ここを追記
                    return false;
                }else{
                    alert("不正解！"); 
                    return false;
                }
            }

check(val, ans, next)

カスタムHTMLの button タグで、「ボタンが押された時に、回答者の解答（val）と、問題の答え（’4’）、次に表示する問題の id（ ‘ans1_02’ ）を、JavaScript の check 関数に渡す」と指示していましたよね。

3 つの情報を渡しているので、JavaScript の check 関数も、3 つの情報を受け取れるように変更しています。

document.getElementById(next).style.visibility　= “visible”;

「 document 」というのは、謎解き記事全体のことを指しています。「 getElementById 」は、「 id から、要素を探す」という意味なので、「記事内から、next という id の要素を探す」という意味。

さらに「 style 」で、要素のCSSを変更することができます。「 visibility 」を「 “visible” 」としているので、非表示であった要素が、表示されるようになります。

ひと通り記述できたら、プレビューで動作するかを確認してみましょう。

さらに問題を増やすとき

3 問目以降の問題を作るときは、先ほど作成した 2 問目のグループを複製して増やしましょう。問題を増やす時の注意は以下の通りです。動作が上手くいかない場合は、確認しましょう。

問題グループの id（ HTML アンカー）が、固有のものになっているか
カスタム HTML の check（①, ②, ③）が、次の問題グループの id を指しているか

最終問題の動作

最終問題についても、問題を増やす時と同じ要領で、グループを複製し、問題画像の部分をエンディングの画像に変更しましょう。さらに、カスタムHTMLを削除して、謎解きの記事は完成です。

ヒントの設置

謎解きに行き詰まった挑戦者をサポートするために、ヒントを設置したい時もあるでしょう。筆者は SANGO という Word Press のテーマを使っており、アコーディオンという機能を利用して、ヒントを作成しています。アコーディオンとは、クリックすることで、内容が表示される仕組みのこと。

軽めのDOM攻撃対策

問題の解答欄のような、自由に入力できるフォームを設けるときは注意が必要です。これまでのコードで出てきたように、HTMLは < > で区切られたタグで、記事を構成しています。攻撃者が、入力フォームに記事の HTML を崩すようなタグを入力フォームに記入するという、サイトへの攻撃（ DOM攻撃）を行う可能性があります。

DOM 攻撃を防ぐために、入力フォームの入力文字数に制限を設けましょう。

カスタムHTML

<div class="center">
<input type="text" id="ans1_01_text" cols="10" placeholder="数字を入力" 　maxlength="2">
<button 　onclick="(function(){var val = ans1_01_text.value; check(val, '4', 'ans1_02');})();">答える！</button>
</div>

maxlength=”2″

input タグ内に「 maxlength=”2″ 」を追加しました。これで、2 文字までしか入力できない仕様になります。問題によって解答も変わるので、値は変更しても構いません。攻撃となる入力は、 < > を含むタグです。

タグは < > < / > で 1 セットなため、最低でも 5 文字以上入力できなければ、攻撃は不可能です。そのため、入力文字数に制限をつけることで、攻撃を防ぐことができます。

そのほかにも、様々なネットでの攻撃があるようですが、今回は機密情報などを扱っているわけではないので、簡単な対策のみをしておきましょう。

新しく謎解き記事を作るときのポイント

違う内容の謎解き記事を作成する場合のポイントは、下の 2 つです。

id の重複に気をつける
JavaScript の check ( ) は、他の記事でも利用可能

id は、サイト内で固有のものである必要があるので、違う記事であっても、グループの id を決めるときは、重複がないように気をつけましょう。また、今回書いた JavaScript は、別の記事にも適用されているので、変更する必要はありません。

ボタンをオシャレにしたいとき

この記事では、問題を表示・非表示を変更するために、CSS を書いていました。しかし、本来の CSS の目的は、サイトの整形や装飾です。

解答用のボタンを装飾したい場合には、カスタム CSS に、下のようなコードを追記してみます。「 center 」は、中央寄せを、「 btn-square-pop 」は、ボタンの見た目の変更を指示する class です。

追加CSS

.quizBox {
	visibility:hidden;
}

//以下を追加

.center{
	text-align:center;
}

.btn-square-pop {
  position: relative;
  display: inline-block;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: #FFF;
  background: #f9c64d;/*背景色*/
	 border-top: none;
	 border-right: none;
	 border-left: none;
  border-bottom: solid 2px #efad17;/*少し濃い目の色に*/
  border-radius: 4px;/*角の丸み*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
  font-weight: bold;
}

また、謎解き記事にある各問題のカスタム HTML に、「 center 」クラス付きの div タグと、 button タグに「 btn-square-pop 」クラスを追記します。

カスタムHTML

<div class="center">
<input type="text" id="ans1_01_text" cols="10" placeholder="数字を入力" 　maxlength="2">
<button class="btn-square-pop" 　onclick="(function(){var val = ans1_01_text.value; check(val, '4', 'ans1_02');})();">答える！</button>
</div>

これで、ボタンの装飾を変更することができました。

ちなみに、「 btn-square-pop 」は、サルワカで紹介されているコードに、少し変更を加えたものです。下のサイトから、気になるデザインを探してみましょう。