はじめに
このような記事を書くのは初めてなので、温かい目で読んでいただけると幸いです。
この記事では、私が通う学校で運行しているスクールバスの現在位置を確認できるシステム（サービス？）の開発記録を残しておこうと思います。
システムを開発するまでに至った経緯
多くの児童・生徒がスクールバスを利用している
私が通う学校は、幼稚園・小学校・中学校・高等学校をもつ学園であり、多くの児童・生徒が在籍していて、さまざまな地域から通っています。
そのため、どの地域からも安全に通えるように、各方面へ送迎するスクールバスを運行しています。
スクールバスが抱える問題
私は小学校から高校の12年間、このスクールバスを利用して通っているのですが、昔からある悩みを抱えていました。
「今、スクールバスがどこにいるのかわからない...」
利用者である私も、バス停に迎えに来てくれる親も、ずっとそのことが気がかりでした。
特に雨や雪の日は交通渋滞が起きて、スクールバスが停留所に到着するのが、大幅に遅れるため、バス停でいつまでも待つ必要があります。
最近は、子供にキッズスマホを持たせて常に連絡を取れるようにしていたり、位置情報を共有している家庭も多いとは思いますが、小学校低学年の子供にスマホを持たせるのを躊躇う親御さんも少なくないと思います。
無いなら自分で作る！！
そこで、スクールバスの現在位置を確認できるサービスを作れば、その悩みを少しでも無くすことができるのではないかと考え、自分で作ってみることにしました。
作ってみるとは言ったものの...
最初にシステムを自分で作ろうと思いついたのは、高校1年生のときでした。
しかしその頃の私は、全くと言っていいほどプログラミングに触れたことがありませんでした。
（強いて言えば、学校の授業でたまにScratchを使って遊んでいたぐらい。）
自力でネットサーフィンをして独学を進め、一応、必要最低限の知識は何となく分かった気になれるぐらいにはなりました。
このときお世話になったサイト↓
しかし、現実はそう甘くはありませんでした。
当初、学校の理科室に余っていたRaspberry PiをWebサーバーとして使おうと思って頑張って構築していたんです！
学校の理科室にラズパイが余っているってどんな学校？笑
一旦、基礎は作れたので他の端末でサイトを確認してみたら、同じネットワーク上では確認できましたが、外部からアクセスすることができませんでした。
なぜ？
そうです。ポートの開放です。
基本中の基本でしたが、全く理解していなかった私は何日もそのことに悩まされていました。
（初心者が必ず通る道なのでは？）
学内での開発による弊害
あるとき、ようやくポートについて気付きましたが、それと同時に、もう1つ重大なことに気づいてしまいました。
それは、学校のWi-Fiのポートを開放する権限が無いということです。
まあ、そうですよねー...。
（もし学校で何がWebサービスを作りたい人は気をつけてください。）
結構そこら辺面倒くさいので
ngrokとか一時的に外部公開するサービスはあるにはありますが、できれば長期的に使いたかったので断念しました。
その後もエラー続きで、気力も落ちていき、段々「作ろう！」という意思は薄れていきました...。
最初からクラウドサービス使えばよかったのに
消えかけた意思が復活！
高校3年になっていきなり、あの頃諦めてしまったシステム開発への意識が蘇ってきました。
そのきっかけとなったのは、2022年度施行開始された新学習指導要領による、高校での「情報Ⅰ」の必修化です。
高校2年の途中ぐらいから、情報の授業でオンラインプログラミング学習サービスの「Progate」を使うことになりました。久々にプログラミングを学習していたところ、コーディングの楽しさに気づいてしまい、沼にハマってしまいました。
と、まあそんなことがあってシステム開発に再挑戦することになりました。
（経緯というより、ほとんど思い出話になってしまいましたが、ここまで読んでいただいた方ありがとうございます。）
どんなシステム（サービス）にするか
スクールバスの現在位置を確認できるサービスと言っても、作り方はいくつでもある。
そこで私がシステムを開発する上で心掛けるのは、
「直感的で誰もが簡単に使えること」
一見、あたりまえだと思うかもしれませんが、意外と身の回りのサービスでも出来てないものがあるんです。言及はしませんが、どこだかのホームページやアプリは、さまざまな機能があってもデザイン的にとても使えたものじゃないものだってあります。
なので私は、シンプルかつ単純明快なサービスを目指します。
Webアプリ or ネイティブアプリ？
システムをどの形式で作るかについて、私はWebアプリで作ることにしました。
理由は時間が無いというのが一番ですが、個人的にHTML,CSS,JavaScriptが使い慣れていて、楽だったからです。
（新たに言語を覚える気力は無かった...。）
他のちゃんとした理由としてはこの通りです。
システムの仕組み
簡潔にまとめると、
スクールバスから位置情報（緯度と経度の座標）をサーバーに送り、ユーザーが開いたサイトの地図上に送られてきた位置情報にマーカーを配置。
と言った感じです。
使ったもの
フロントエンド部分は、
・HTML
・CSS
・JavaScript
バックエンド部分は、
・（JavaScriptの実行環境として）Node.js
また、webサーバー等はラズパイの自作サーバーではなく、Google Cloud Platformを利用しました。
数あるレンタルサーバーの中からGCPを選んだ理由は特にありません。
90日間の無料トライアルがあったぐらいしか
どうやってバスから位置情報を取得するか
最初は3つの候補がありました、
- ラズパイ的なプログラムを実行できる端末を取り付ける。
- 運転手のスマホでプログラムを実行。
- タブレット端末を購入し、専用端末としてバスに載せる。
1について、スクールバスから電源を持ってくる必要があり、それが私の通う学校では不可能であるため却下。（作るのにも時間がかかる）
2について、運転手のプライバシーが確実に守られないため却下。（また、ガラケーの運転手もいるため）
3について、充電すればある程度バッテリーが持ち、アプリをインストールすれば利用可能で、モバイル通信も可能であるため、この方法で進めることにしました。
その端末に位置情報をAPIサーバー宛に送るハイブリッドアプリを作成し、apkファイルでインストールして、バス運行時、運転手に操作してもらうことで位置情報を送れるようにしました。
取得した位置情報をどのように反映させるか
Webサーバーとは別に、位置情報の送受信用APIサーバー（Node.js）を構築して、以下のようなエンドポイントを立てて、常に更新される位置情報をユーザーの画面に表示できるようにしました。
- バスから位置情報を受け取るエンドポイント（~/update-location）
- ユーザーにバスの位置情報を表示させるエンドポイント（~/device-location）
Node.jsのおかげで...！
並行処理が効率的に行える非同期処理に優れたNode.jsを使用しているので、複数のユーザーが同時にバスの位置情報を確認しても安定した接続ができるようになっています。
通信についても、HTTPではなく、WebSocketを利用することで、よりリアルタイムな通信を実現しました。
システムの構成図
利用中の画面
実際に運用してみて...
このシステムを1ヶ月ほど、私の通う高校のスクールバス利用者の生徒とその保護者を対象に試験運用を行ったところ、思っていた以上に好評で、スクールバスの現在位置を確認できるこのシステムの需要は高いことがわかりました。
今後の展望
今回開発したシステムは、私の通う学校の教職員などからもだいぶ好評で、現在は学園全体で実運用されています。
運用され始めてから1ヶ月ぐらい経ちますが、多くの方々に利用していただいています。
まだまだ改善の余地あり
現在のシステムは、バスの位置を地図上に表示しているだけなので、
- バス停の登録
- 走行経路の履歴確認
- 学園関係者のみがアクセスできる認証機能
などといった改善を進めていきたいと思います。
さいごに
最後まで読んでいただきありがとうございました。
システムの細かい部分について、触れられていないこともたくさんあるので、もし興味のある方は是非コメントで質問してください！