文化祭のHPとLINE@のマップ機能を実装した話 (4/4)
はじめに
学校の文化祭で技術系の開発をする団体ができたので、活動の一環としてHPとLINE@の製作に携わりました。
このページでは主にCreateJSを使ったHPの具体的な実装方法などをまとめています。
文化祭の話については、4つのページに分けています。
1．実装した機能（HP/LINE@）全体の概要
2．LINE＠のmap機能について
3．HPのmapページについて（概要とCreateJSやHTML,JSの基本事項について）
4．HPのmapページについて（実装方法、実装時の注意点などについて）（今回）
ここでは、CreateJSを用いたHPのMAP機能実装や構成についての詳細と
苦労したことや、開発上気を付けたほうが良いこと、兼忘備録や引継ぎ資料みたいなものを書いています。
目次
HP-map機能実装についての概要
HPの全体構成は(その1)で書いています。
MAPの切り替えかた
「クリックしたらMAPが切り替わる」
これを、大きく分けて2通りの種類で実装しました。
1．透明度を変える
表示物の透明度を変更することで、切り替わっているような動作を実現しています。
2．座標位置を変える
座標位置を変更することで、切り替えの動作を実装しています。
切り替え時にTweenを使うことで、スライドしたように見せることができます。
同様に、図のような「左 >> 右」以外にも上下のスライド切り替え等が実装できます。
親子構造（コンテナ）
表示・非表示の切り替えは上に示したように行っています。 多くのオブジェクトが存在するとき、一つ一つ透明度や座標を変えていると管理がとても大変になります。 複数のオブジェクト（画像・図形等）をまとめて表示・まとめて非表示できたら楽です。
前回、createjs.Containerクラス（コンテナ）を使うと簡単に親子構造が作れる、と書きました。
親子関係を作ると、まとめて表示・非表示ができるようになり、管理やプログラムも楽になります。
今回は下図のような親子関係を構築しました。 全てコンテナで、それぞれのコンテナの中に色々な要素やオブジェクトを格納しています。 StageのなかにDisplayContainerが入っていて、その中に...といった感じです。
実際は同じ階層（例えばエリアA～F）のコンテナを一つの配列にしたり
[AreaContainer A,AreaContainer B, ... , F]
構内の場合、棟・フロアで2次元配列に格納したりしました。
[
[2棟1階Container, ... , 2棟4階],
[3棟1階, ... ,3棟4階],
... ,
[8棟---]
]
それぞれのコンテナ（親）の中に、次のようなオブジェクト（子）が入っています。
全てのオブジェクトについての座標管理が、LINE＠と同様にめっちゃくちゃ大変でした。
MAPページの全体構成・使用したデータ
全体構成は次の図のようになっています。
動的データと静的データの2種類がありました。
データの詳細は次のようになっています。 HTMLコードをJSONに入れていますが、詳細は次に説明します。
詳細情報の表示の仕方
詳細情報の表示はModalを使って実装しました。 ピンをクリックすると、次の3つの動作が起こります。
- ピンが赤くなる
- Modalの中身が書き換わる
- Modalが表示される
クリックしたとき内部では次の図のように動いています。
プログラム全体の流れ
最後にプログラム全体の流れについてです。 全体の流れは次の図のようになっています。 なお、urlの最後にプロパティーを付け、指定のMAPページを表示する動作について、この図では触れていません。
リサイズについて、当初Canvasでの処理が分かりませんでした。
「読み込んだ最初の画面に合わせる」という動作だけできていたので、一番最初まで戻しています。
リサイズが起こると、サーバーから読み込む動作ももう一度繰り返されるので、読み込んだ画像がもう一回ダウンロードされるという問題があります。（キャッシュについてはよく知らないので割愛します。）
なので、最低でも次のような流れにしたほうが良いですね。
前回の記事で紹介したリサイズのコードなら再読み込みしていないので参考に。
苦労したこと、絶対知っておいたほうが良いこと
共通データの設計
共通データとは、MAPページ以外の色々なところで使用するデータのことを示しています。これらは開発者全員にしっかり共有させ、なるべく多くの人で設計することも大事です。
例えば、IDや模擬店詳細情報の形式等です。
まずIDについて。MAP(HP)では、次のIDを利用しました。
- boothID
- laboID
- AreaID
これらのIDを用いて取得できる情報は次のようなものです。
- 模擬店詳細情報のHTMLデータ
- 研究室詳細情報のHTMLデータ
- エリア内に位置するboothID,AreaID等
模擬店一覧ページや、研究室一覧ページ、Topページでも、同じIDを使用しました。ただし、ページごとにIDの中身が違ったり用途は同じだけど、わざわざ別にIDを作っているみたいなこともありました。
共通データを仕様としてまとめておくと、データの受け渡しで混乱が減るので重要です。 また、共通データの仕様は、なるべく開発者全員で話し合い、決定することが重要です。
また、IDをわかり易いものにすることも重要です。
一部のIDを適当に付けてしまいました。開発が進んでくるとIDの管理がしんどくなります。。。
超分かりにくかった代表例（部活動）は以下。
fb tnf sw bsk
左からフットボール、陸上(track and field)、水泳、バスケットボール等です。
分かりやすいコメントと変数名は大事。
今回のMAPページは自分ひとりで全て作りましたが、何人かでコーディングする場合は特に、適切なコメントやわかり易い変数名を使うことが重要です。
キャメル記法とか、スネーク記法とか調べたら色々出てきます。
この辺は宗教的な何かを感じるので調べて下さい。 参考：https://qiita.com/Kunikata/items/0337c6744a7c8fbc1586 英単語：https://oxynotes.com/?p=8679
個人的には、jsDoc（JavaScriptドキュメントコメント）とかにはまってました。 こんな感じのやつ
/** * 例示のための関数です * @param {int} hoge * @return {obj} fuga */ function func(hoge){ ... }
あと、codicっていう日本語から変数名出してくれるサイトもあるので、初心者の人は参考にするといいかも。
codic : https://codic.jp/
クラス(Class)
オブジェクト指向言語には、クラスという概念があります。 クラスを知っておくと書くプログラムの質が格段に上がることがあります。
そもそも開発した当初は、授業でクラスをしていなかったので余り理解ができていませんでした。クラスを使用したプログラムを書くと、自分が書いたMAPのコードは確実にわかり易く、簡潔になります。
あと設計もしやすいです。
時間に余裕があれば、クラスを使用したプログラミング力を身に着けるのも重要です。
JavaScriptでは、ES6以前はクラスが導入されていなかったのですが、クラス構造のようなものは作れます。 参考：https://qiita.com/yas-nyan/items/3783ad8839072022ad97
前回の記事で示したプログラムでは、クラス構造を作っています。 参考：https://github.com/sho0126hiro/CreateJS/blob/master/retina(responsive)/fullscreen/responsive.js
非同期処理
Promise/async/awaitです。頑張ればざっくりとは、すぐに理解できます。MAPページはJS歴2ヶ月の人が書いたので、コールバック地獄に陥りました。地獄です。読みにくい。
確実に使えるようになっておくべきです。
来年度HP開発（やるなら）やってみたいこと
Three.js
次も同じMAPを担当するなら、ARを使った位置表示とかをやってみたくなった、というのが今回の感想です。Three.jsでは、webGLを用いて三次元空間での処理に特化しているようで、VRを使ったwebサイトの作成もできるようです。
たった4行でできる！ ブラウザ向けVRをThree.jsで実装する方法 - ICS MEDIA
React.js
最近、Reactの派生であるReactNativeを用いたアプリ開発を行ったので、React.jsについての知見を得たいところです。
Ruby on RailsとかNodeとか
シンプルにサーバーサイドの開発をしたいです。Http通信について最近ようやく理解できたぐらいのレベルなので、DB設計とかAPI開発とかの、バックエンドについての勉強もしてみたいです。
最後に
振り返りです。LINEに関してはyryr君が基盤を作ってくれましたが、HPについては完全に0から、自分ひとりで作りました。
JavaScript歴1~2ヶ月の割に結構作れたなぁと思います。Canvasの描画がスマホでできなかったことに気づいたのが文化祭2週間前、その後2週間でLINE＠を実装し、当初予定していなかった研究室情報も表示する、というなかなかの限界開発をしていました。
文化祭のHPの開発に携わったことで、多くの知識や開発手法やスケジューリング等いろいろ勉強になりました。
今興味あるのはフロントよりバックです。
文化祭のHPの開発ができた（しかも今年初）なんて、相当恵まれているなぁと感じています。
残りの高専生活も大事にしていきたいですね。
