第3回

itocon の裏側

書いた人：修士１年 井上隼英。ガジェット好き。最近買ってよかったガジェットはAFTERSHOKの骨伝導イヤホン。

itoconつかってますか？

この記事を読みに来てくれている方々は，きっと毎日使ってくれていますよね？

本日は，そんな itocon ユーザのみなさまなら一度は思ったことがあるであろう「 itocon のシステムってどうなってるの？」という疑問にお答えします。

itocon の裏側がどうなっているのか気になって夜も眠れないそこのあなたは，絶対最後まで読んでください！

注意：この記事はWebやプログラミングについて基本的な知識がある方向けになります。

itocon システム概観

itoconのシステム全体像は上の図のようになります。処理が行われる順番は

  1. バス停に設置されているカメラやパケットセンサのAPIを叩いて，それぞれのセンサからデータを取得

  2. センサのデータをもとに混雑度を計算

  3. JSONファイルに計算した混雑度とタイムスタンプの情報を追記

  4. JSONファイルから最新の混雑度とバス発車時の混雑度を読込み，HTMLファイルを生成

となっています。この処理を1分おきに繰り返しています。それではそれぞれの処理を詳細に見ていきましょう。


  1. バス停に設置されているカメラやパケットセンサのAPIを叩いて，それぞれのセンサからデータを取得

APIとは異なるアプリケーション同士がデータのやり取りをするためのインターフェイスのことで，世の中の様々なアプリケーションやシステムで使用されています。
つまり，itoconというアプリが，「カメラでバス停の人数をカウントするアプリ」と「学内WiFiに接続しているデバイス数をカウントするアプリ」と通信してデータを受け取るためのものです。itoconがそれぞれのセンサのAPIにリクエストを送るとレスポンスとしてそれぞれのセンサからのデータが送られてきます。

ちなみに itocon の LINE Bot は LINE のMessaging API を使用して作られています。


  1. センサのデータをもとに混雑度を計算

さて，続いて2番の処理ではセンサから受け取ったデータから混雑度計算します。この処理は単純でそれぞれのセンサから受け取ったデータをしきい値をもとに4段階の混雑度のどのクラスに所属するかを判定しています。


  1. JSONファイルに計算した混雑度とタイムスタンプの情報を追記

3番の処理では，2番で計算した混雑度をJSONファイルに追記します。JSONファイルはKey と Value の組 によって記述されるファイル形式のことで，itoconの場合は混雑度を取得した時刻と混雑度の情報を一組にして，混雑度を取得するたびに追記をしていきます。つまりどういうことかというと，例えば 「2020年07月31日15:34」の混雑度が「1」だったとすると以下のようなデータが追記されます。

{
"time" : "2020-07-31T15:34:00+09:00",
"congestion_level" : 1
}

ここで "time"と"congestion_level"が Key でそれぞれの右側のコロン（：）のあとに書かれているのが Value ，つまり内容ということで，時刻 2020-07-31T15:34:00+09:00と混雑度 1 となっています。このようなデータが1分毎に追記されていきます。つまり，1分後の混雑度が 2 だとしたら，上のファイルは1分後には

{
"time" : "2020-07-31T15:34:00+09:00",
"congestion_level" : 1
},
{
"time" : "2020-07-31T15:35:00+09:00",
"congestion_level" : 2
}

このようになっているということですね。


  1. JSONファイルから最新の混雑度とバス発車時の混雑度を読込み，HTMLファイルを生成

最後の処理ではJSONファイルに保存された混雑度とバスの時刻表のデータをもとにHTMLファイルを生成していきます。HTMLとはwebページを表示するためのプログラミング言語（正しくはマークアップ言語ですが…）で，HTMLで記述されたファイルをHTMLファイルといいます。みなさんがWebサイトを見るときは，サーバからHTMLファイルがダウンロードされて，ブラウザで表示しています。最後の処理では先程のJSONファイルから最新の混雑度とバス発車時の混雑度を取得し，それをもとにHTMLファイルを生成しています。みなさんがitoconにアクセスするとこのHTMLファイルが読み込まれ，スマホやPCに表示されます。なお，バス発車時の混雑度はバス時刻表の時刻を参照して取得しています。


以上がitoconの裏側で行われている処理です。1から4までの処理は1分おきに定期実行されるているので，1分おきに新しいHTMLファイルが作成されることになります。つまり，最新の混雑度を見ようとしてブラウザを頻繁にリロードしても1分おきにしか更新されないので努力の無駄ということですね。

ここで，なぜ1分おきにHTMLファイルを生成しているのだ？と思われるかもしれません。多くのアプリケーションでは，クライアントがアクセスするたびにAPIにアクセスします。しかし，itoconでは1分に1回，itoconのシステムがそれぞれのセンサのAPIにアクセスするのみになっています。これは，それぞれのセンサアプリはitoconとは関係のない外部のサービスであるので，クライアント数分の膨大なアクセスがされる可能性を残したくないというのが理由です。伊都キャンパスは，学生と教職員を合わせると，2万人が活動しています。そして、学生の35%、教職員の46%がバスを利用しているそうです（参考：プレスリリース）。もし、itoconファンが増えて、毎朝の通勤・通学時間に、大人数がitoconを見ると（本当にそうなると、開発者としては幸せであるのですが・・・）、センサのAPIを管理している方々に迷惑がかかるため、利用者数に関係なく、アクセス数を一定とするため、1分ごとの更新としています。

終わりに

itoconを開発するにあたっては様々な制約条件があり，それをクリアするために色々と工夫をした結果，上で説明したようなシステム構成になっています。どんな制約があって，どう工夫したのかも書きたかったのですが，長くなりそうなので本日はここで終わろうと思います。

itoconの裏側はどうだったでしょうか？専門用語ばっかりでわからなかったという人は参考文献を眺めてみてください。これでみなさんがぐっすり眠れるようになれば幸いです。

参考文献