高専祭でARスタンプラリーのウェブページを作った時の話

沼津高専2019アドベントカレンダーのトップバッターを務めます、Hoppyです。
今年のアドベントカレンダーは下級生の参加が多い分昨年とはまた違った雰囲気のアドベントカレンダーになると思います。今年もどうぞよろしくお願いいたします。
さて、簡単に自己紹介すると
・高2の春に初めて自分のパソコン(13万くらいのゲーミングノートPC)を持つ
・高2夏からAviUtlで映像を作り始める
・プログラミングの知識は高2、高3に授業でやったC言語の知識(弊学科では親関数と子関数、ポインタなどまでやります)だけ
・ゲーミングノートPCなのにPCゲームなんもやってない
といった感じです。よわよわこうせんせいとか言わないで
そんな僕ですがこの度沼津高専の学生会直属の組織、NIT2.0の企画でARスタンプラリーのサイト制作のほとんどを任されました。

ARスタンプラリーとは、学校内に配置されたQRコードを探し、作成したウェブページ上でマーカーを読み込むことで各学科をモチーフにしたモデルのスタンプを集め、景品をもらうという企画。

ウェブサイトを作る際、デザイン作成→コーディングの順に行うことが多いと思いますが僕はコーディングのみを行いました(デザインはつよつよがいたのでそちらにお願いしました…)
作ったページのリンクです
NIT2.0 ARスタンプラリー

苦労した点を以下にまとめていきます

CSSでハンバーガーメニューの実装、めっちゃ大変やん

HTMLとCSSの基礎知識は某プログラミングについてめっちゃ詳しく教えてくれるサイトのスライドを見たり自分でも本を買うなどし容易に知識を得ることができましたがハンバーガーメニューについてはだいぶ困りました。正直何をどう使えばいいのか全く分からず、3日くらいググりまくりました。
コピペしてそのまま使える！というサイトのコードをコピペしたのにｺﾚｼﾞｬﾅｲ感あったのはいい思い出(遠い目)
そして色々調べまくった結果、以下のコードにより実装ができました。

base-style.css

#ham-menu{
    background-color: #457389;
    box-sizing: border-box;
    height: 100%;
    padding: 10px 40px;
    position: fixed;
    right: -300px;
    top: 0;
    transition: transform 0.1s linear 0s;
    width: 300px;
    z-index: 1000;
}

#ham-menu::before {
    background-color: #457389; 
    border-radius: 0 0 0 10px; 
    color: #333; 
    content: "≡";
    display: block;
    font-size: 60px;
    height: 60px;
    line-height: 60px;
    position: absolute;
    right: 100%;
    text-align: center;
    top: 0;
    width: 60px;
}
#menu-background {
    background-color: #333; 
    display: block;
    height: 100%;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: all 0.1s linear 0s; 
    width: 100%;
    z-index: -1;
}

#ham-menu:hover {
    transform: translate(-300px); 
}

#ham-menu:hover + #menu-background {
    opacity: 0.5;
    z-index: 999;
}

いろいろなサイトの記事を参考にしながらなんとか実装できました。
しかし、ここまでできたものの、最後の最後まであることに苦しめられていました。

ワイ「ハンバーガーメニュー開いてカメラ開いたろ」
ホームのメニュー「ええで」
ワイ「カメラは大丈夫やな、次チケットのページいこ」
カメラの画面のメニュー「…(反応ﾅｼ)」
な　　ぜ　　な　　の　　か

これも3日くらい悩みましたが、メニューのul要素の前にに以下のコードをはめ込むことで問題解決できました。

index.html

            <div id="ham-menu" ontouchstart="">

問題解決できたのは嬉しいですがなんでホームのメニューは反応したのにカメラや他のページのメニューは反応しなかったのかわからずもやもやしています。原因分かるつよつよの方いらっしゃればコメントお願いします。

AR.jsすげえな！

ARスタンプラリーの肝となるQRコードを読み取りモデルを表示させスタンプを押すARカメラの部分。
今回モデルのデータを取り込んだQRコードはこちらのサイトを使用しました。
AR.js Marker Traning
各学科をモチーフにしたモデル、スタンプはFusion360,Blenderにてメンバーが製作しました。
ARカメラを使用する部分については昨年度使用したコードを参考にし、要点をざっくりまとめると
・aframe.min.js、aframe-ar.min.jsを使用
・a-assetsタグで使用するモデル(.objファイルと.mtlファイル)を指定
・a-markerタグで名称、サイズ、表示される向きを指定
をしました。

反省点

・カメラを起動する際読み込みが遅い→モデルのデータが重いから？
・スタンプがどこにあるかのマップを準備できなかった
・知名度が低く参加率が悪かった
・本当はコーディング班があったが全員忙しくて作業の分担ができず、一人でずっと制作していたため自分だけの負担が大きかった

実際に作ってみた感想

学校でやったCに比べ、HTMLやCSSは勉強が少し楽に感じました。HTMLのコードを書いている際、プログラムを組んでるというよりかはどちらかというと映像を作ったりポスターを書いている感覚に近いものがありました。
また初めはARは敷居が高いように感じていましたが実装してみてaframe.min.jsなどを使えば容易にARコンテンツを作ることができとても驚きました。ここ最近様々な分野でARなどが使われている理由がなんとなくわかった気がします。
もっと勉強して自分の作った映像作品を載せるページなども作ってみようと強く思いました。

最後まで読んでくださりありがとうございました。これからのNIT2.0の活動もどうぞよろしくお願いいたします。
Twitter:NIT2.0
個人のやつ
ほっぴー()(本垢) Hoppy(映像等技術関連)