文化祭のHPとLINE＠のマップ機能を実装した話（1/4）
はじめに
学校の文化祭で技術系の開発をする団体ができたので、活動の一環としてHPとLINE@の製作に携わりました。
このページではHPの概要や、実装した機能のポイント、LINE＠の機能の概要及び自分の担当箇所について書いています。
文化祭の話については、4つのページに分けています。
1．実装した機能（HP/LINE@）全体の概要 （今回）
2．LINE＠のmap機能について
3．HPのmapページについて（概要とCreateJSやHTML,JSの基本事項について）
4．HPのmapページについて（実装方法、実装時の注意点などについて）
目次
- HPについて
- 全体の概観
- ページ一覧
- 機能のポイント
- LINE＠について
- 実装した機能
- 自分の担当箇所について
- 詳細MAPの細かな機能について
- HPとLINE@の両方で実装した理由
HPについて
概観
ページ一覧
- TOPページ
- 模擬店・研究室公開ページ
- イベント詳細ページ
- 詳細マップページ（PCのみ有効）
- アクセス
- LINE@招待ページ
HPの機能のポイント
- 模擬店の店員が公開する模擬店情報を操作することができる
売るもの、値段、写真を変更できるようにしています。
画像の公開には、不適切な内容などがHPに公開しないように管理者側の認証を必要としています。
認証システムも実装しています。
また、データの更新はHPの全ページ及び、LINE@の情報と対応させているため、ユーザーは随時最新情報を得ることができます。 - イベントの情報も更新できる
イベントの最新情報や、時間の変更などにも対応しました。 - 最新情報をTOPページに投稿できる
当日の緊急な連絡や、イベントの最新情報など、特定の情報をリアルタイムでTOPページに表示させることができるようにしました。
HP全体についての詳細はsakakendoのブログを見てください。
LINE@について
実装した機能
- プッシュメッセージ
学生に対する点呼の時間や緊急連絡などの、特定のユーザーに対するメッセ―ジの送信を行います。 - 近くの模擬店を探す
LINE Beaconを使った機能です。ユーザーの位置を取得し、近くの模擬店を表示します。 - 校内の詳細MAP
HPの詳細MAP機能と同じ機能を実装しています。 - 写真の収集
ユーザーが送信した画像をdropboxに格納し、今後のイベントに役立てます。 - Goodボタン
体育館でボタンを押した回数がリアルタイムでカウントされ、イベント内の盛り上がりを可視化させます。 - ご意見箱
GoogleFormに飛ばします。
LINE@についての詳細は全体の設計をしたゆるゆるのブログを見てください。
自分の担当箇所について
自分はHPのMAPページ・LINE@招待ページ、LINE＠のMAP機能の実装をしました。
LINE＠招待ページはHTML/CSS/JSを使った単純なページですが、詳細MAPページはJSメインの少し複雑なページになっています。技術的な話は次回以降します。お楽しみに！
1．詳細MAPの細かな機能について
詳細MAPを製作するにあたり、
「詳細」なマップであることに加えて、ほかの情報との関連性を高めることに重点を置いて開発しました。
以下の機能を実装しました。
- 使い方の表示
- マップの移動は直観的。クリックしたエリア、フロアなどにジャンプする。
- もちろん戻ることも可能。
- 他のページとの関連性について
- 模擬店一覧ページで選択した模擬店から、詳細なMAP場所を表示させる
- 研究室公開の一覧のページから、詳細マップを表示する。
- マップピンをクリックすると、クリックした場所の模擬店情報の詳細が表示
- 模擬店の情報はリアルタイムで更新される
- スマートフォンでアクセスするとLINE@招待ページに飛ぶ
上の機能と同様の機能を全てLINE@でも実装しました。
2． HPとLINE@の両方で実装した理由
始めは、HPのみの予定でしたが、「スマートフォン・タブレット端末で表示される画像、オブジェクトの画質が極端に落ちるバグ」に当たってしまいました...。
どうにかHPのバグを直しHPの詳細マップをスマホで表示したかったのですが、
以下の4つの理由から、webページの開発を一時中断しました。
1．バグの原因が特定できないこと
2．考えられるバグの原因がかなり多いこと
3．同じバグを簡単なプログラムで再現できないこと
4．振り出しに戻って同じwebサイトの開発をする余裕がなかったこと
スマートフォンなどで綺麗に表示されないバグの詳細・解決策については後日公開します。
そんな中、同時に開発していたLINE@で
HPと同じような直観的な動作をすることができそう、もちろん画像もきれいに表示される！
ということを知り、LINE@への詳細MAP機能の実装をすることになりました。
つづく。
次回：LINE@-詳細MAP機能の実装方法について
