自己紹介

こんにちは、おこめなんと言う者です。
普段はFree Templateという団体で謎解きやボードゲームをつくっています。

2019年のクリスマスに謎解きサイトをつくったので、その時の経験を共有して
WEB謎制作のハードルを下げられたらと思って記事を書いています。

お時間ある方は『クリスマスとイタズラ好きの悪魔ちゃん』を解いてみてくれたらうれしいです。

ちなみにWEB謎制作でプログラミングの楽しさにめざめて
今は謎解きスマホアプリを制作中です！
作りおわったらまた記事を書くと思うのでよろしくお願いします。

対象の読者

web謎作ってみたいけどやり方わからない謎クラスタ
謎解きに興味あるエンジニア

謎解きに興味もってくれて、「作りたい！」って思った人はTwitterでDMくれたら全力で手伝わせていただきます。

環境/言語

環境:wordpress（Cocoon）
言語:html,css,javascript,jQuery

もともと謎解きのブログとして運用していたwordpressのサイト上で作っています。
Cocoonというテーマを使うと、編集画面からjavascriptを書けるので簡単にできます。

基本的に画面の見た目はhtml,cssというものを使って
「クリックしたら〇〇する」みたいな条件はjavascriptを使うとできます。
jQueryはjavascriptみたいなものだと思ってます。（間違っていたらごめんなさい）
書き方が違うだけであまりやってることは変わらないと思います。

具体的な例

ここからはネタバレになってしまうので、まだ解いていない人で解きたい方はこちらが終わってから読んでください。
難しいと思ったところだけピックアップして説明しています。

アドベントカレンダー

CSSでアドベントカレンダー作ったよー

の記事を参考にしました。
コピペでこんなにかっこいいカレンダーがつくれるのすごいですよね。

あまり難しいことはわからないので、雪を降らすのはあきらめました。
重要なのはカレンダーの扉が開くなので！

下記のコードは扉の一部です。
ざっくり説明すると
クリックしたときだけ特殊なCSSが効き扉が開いたように見える仕組みです。
疑似セレクタ？というらしいですが詳しくはわかりません。

カレンダーの扉


      <td class="cale">
        <div class="advent-calendar__item">
          <input class="box" type="checkbox" name="1" value="1" id="1">
          <label for="1">
            <div class="contents">
              <img src="画像のURL">
            </div>
            <div class="contents2">
              <span class="contentsText">き</span>
            </div>
            <div class="door"><span>1</span></div>
          </label>
        </div>
      </td>

クリックで画像切り替え

HAPPY　HALLOWEENがMERRY　CHRISTMASに切り替わる部分です。
こちらも難しいことはやってなくて、クリックするとCSSが切り替わります。
魔女の帽子を隠す→サンタ帽を出す
みたいなことをやっています。

帽子の切り替え


      <td class="cale">
        <div class="hidden_box">
            <label for="label1" class="boushi1">
            </label>
            <input type="checkbox" id="label1"/>
          <div class="hidden_show">
            H
          </div>
          <div class="hidden_show2">
             M
          </div>
        </div>
      </td>

帽子の切り替え


/*チェックは見えなくする*/
.hidden_box input {
    display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: auto;
    opacity: 1;
}
/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}
/*中身を非表示にしておく*/
.hidden_box .hidden_show2 {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show2 {
    height: auto;
    opacity: 1;
}

ただし、謎の答えを入力するまではクリックしても反応しないようにしたかったので
既に謎の答えを入力して正解していたら、クラスを切り替えるみたいなことを下記でやっています。

帽子をクリックしたときの処理


//魔女のぼうし
$(".boushi1").click(function () {
    if (questionFlg2) {

        $(this).removeClass("boushi1");
        $(this).addClass("boushi2");

        $(this).next(".hidden_show").css('display', 'none');
        $(this).next(".hidden_show").removeClass("hidden_show");

        $(this).next().next().addClass("hidden_show3");
        $(this).next().next().removeClass("hidden_show2");
    }

});

questionFlg2が正解済みであることをチェックしている部分です。

蜘蛛の巣を動かす

こちらが参考サイトです。

・ドラッグアンドドロップする
JavaScriptを使って要素をドラッグ＆ドロップで移動

・枠に吸い込まれるような見た目をつくる
こちら

↑の二つのサイトをコピペして組み合わせると蜘蛛の巣をドラッグアンドドロップして赤枠にはめると雪の結晶になる演出ができます。

スマホ全機種に対応するのが難しくて枠にはめる判定値（どれくらい近くにきたらはまった判定にするか）を大きくとらざるを得なかったので、クリックしただけで蜘蛛の巣が枠にはまった機種もあると思います。ごめんなさい。

あとはスマホだとドラッグしにくかったと思います。PC用にサイトをつくってしまったのが今回の反省点の一つです。

反省点

レスポンシブ対応: PC用の見た目を先につくってしまったので、スマホの見た目に修正するのがつらかったです。次回つくるときは、スマホの見た目からつくることにします。
以前の作業を忘れる: 1日3~4時間ずつ作っていたのですが前日やった作業を思い出すのに時間がかかっていた気がします。まとまった時間をとって一気に作った方がいいと思いました！
名前を適当につけすぎた: よくわからないフラグやクラス名が沢山あって過去の自分をぶんなぐりたくなりました
よくわからないけど使ってみ過ぎた: コピペを多用しすぎて、何やってるか分からないまま進めたので細かい修正が全くできなくて困りました。少しは理解しつつ進めないとだめですね・・・
表示遅すぎ: 勉強不足でいいプログラミングができていないのに加えて画像を多用しているのでサイトがめちゃくちゃ重くなってしまいました。いらない処理を消したり、画像を軽くするともっと早くなると思います。

まとめ

プログラミング未経験でしたが、ググりまくってコピペしまくれば低クオリティだけどなんとか動かせるものは作れるということがわかりました。

謎クラの皆さんぜひWEB謎いっぱいつくって解かせてください！

謎解きが好きすぎて未経験でも2週間で謎解きサイトが作れた話