第6回
予測機能追加とUI大幅リニューアル！
書いた人： 現在研究生・来年度M1の松尾周汰。バンドとお酒が大好き。しかし、最近いろいろな人から酒クズと呼ばれ心と肝臓が痛い。
- はじめに
お久しぶりの更新です！
福岡では2回目の緊急事態宣言が発令されて各活動において制限を課されたり、工夫が必要とされたりでむず痒い思いが多かったですね。。（早く居酒屋でワイワイみんなと飲みたい）
もちろん悪いことばかりではなく、普段の活動ができない分、出来ず終いで終わっていた勉強や新たな課題に挑戦した人も多いのではないでしょうか。自分もそのひとりで、Web開発やモバイルアプリ開発をちょこちょこ始めてみました。特にWeb開発では興味があったJavaScriptフレームワークであるVue.js（サイトの見た目や動きの処理をいい感じに助けてくれる便利な機能）を勉強しているときに丁度itoconのシステムをアップデートさせようとの話があがったので、自分が手を上げてVueでの書き換えに挑戦してみました。
様々な機能追加や修正続きでリリースまで時間がかかってしまいましたが、今回ついに出来上がった新itoconシステムについて紹介していきます！
2. なぜ Vue.js ?
そもそもなぜ書き換えをしたのかを紹介します。技術的な話が多いのでよくわからんと思ったら飛ばしていただいても大丈夫です。
旧システム：毎分API呼び出しとHTML更新
データ取得方法の詳しい内容は、第3回「itoconの裏側」 をご覧ください。
初版のitoconはAPIを用いて得たセンサデータから混雑度を計算し、その情報をもとに毎分HTMLを生成することでWebサイトの見た目を更新するというシステムでした。ここで先輩や教授とミーティングを重ねた結果、改善したいと思う点が2つ出てきました。
1つ目がページ更新効率の向上です。毎分のAPIリクエストやHTMLを直接書き直すことをせず、変わらない情報は残してアップデートがある部分だけ更新することを目指しました。
2つ目が拡張性を持ったページへの変更です。対象となるバス停の数が増えていくことや予測混雑度データも表示されることを踏まえ、同じ部品や似たパーツを再利用して効率よくコードを書けるようにすることを目指しました。
これらを実現するためにリアクティブなデータの更新や部品 (コンポーネント) の再利用が容易にできるVue.jsを用いて新システムを作ることにしました。
旧システム簡易説明図
新システム：JSON読み込みで最新データ更新
どんな処理が変更されたかを紹介していきます。
変更点1
APIリクエストの時点でサーバ上のJSONファイルにタイムスタンプとその時間の混雑度のレベル（1 ~ 4）が毎分格納されていることに着目し、Web側はAPIリクエストをせずにJSONを読み込むだけの処理に変更しました。これによりAPIリクエスト関係の細かい処理を気にせずにファイル読み込みだけをする簡単な処理で終わらせることができました。具体的な処理は、ページの読み込みや更新が行われた時に混雑度情報が格納されているJSONファイルの最新情報（サーバが正しく動いている限りは現在時刻のデータが該当）を読み込み、表示させるというものです。
変更点2
Vueのコンポーネント機能を使用し共通部品をまとめることで、対象バス停が増えたときでも簡単に追加編集ができるようになりました。また、CSSフレームワークにVuetifyを使用することでなんとなくモダンな感じのUIにアップデートしました（したつもり）。
以上の変更により、Webからは毎分のAPIリクエストの必要がなくWebにアクセスしているユーザがページを閲覧・更新した時だけ通信が発生します。
新システム簡易説明図
3. 新画面紹介！
第2セクションでは裏の処理の話でしたがここでは実際に変わった部分について紹介していきます！
UI の変更
基本構成は変わりませんが、上でも少し触れた通りフレームワークを用いてモダンな感じの見た目に変更しました。
以下画像付きで詳しく紹介します。
予測混雑追加
今回1番の目玉機能！
その日の予測される混雑度をバス停時刻に対応させて表示します。「もっと見る」ボタンで表示される混雑度データのうち、現在時刻より未来のバス停時刻に対応するものはカラーで、過去のものはグレーで表示されます。未来のデータは今までの蓄積されたデータから予測されたもので毎日新しく生成されています。過去のデータは実際に計測された実測値が入ります。感覚的には天気予報を見るようなイメージで作りました。
現在時刻と現在の混雑度の下に「次のバス」と「予測混雑度」を表示させているので「そろそろバス乗りたいけど混雑してないかな？」という時にさくっと確認できます。
※現在は九大学研都市駅のみ対応です。今後のアップデートをお楽しみに！
カレンダー機能追加
日付部分をタップするとカレンダーが出てきて直感的に日付指定ができるので、素早く過去の情報を閲覧できます。
予測機能追加
「もっと見る」ボタンを押すことで過去の混雑度や予測混雑度の表示 / 非表示の切り替えができます。
サイドバーへ移行
今まで画面下部にあった各種情報へのリンクをサイドバーにまとめました。利用規約、運営組織、データソースのページも再構成しています。
4. おわりに
ざっくりと新機能開発の裏側とシステムの紹介をしました。
まだまだ「混雑」や「密」というワードが重要なテーマになっているこの時代やコロナが収まった後であっても、いかにそれらを回避・解消する便利なツールを扱えるかが大事になっていると感じています。ぜひitoconを活用して混雑を避けた快適な通勤通学を送ってください！
今回はこの辺りで終わりですがまだまだアップデートしていくitocon、今後も要チェックです！！