[[Image:chiibus-map-mobile-icon.png|left|40px|link=https://fukudat.net/chiibus-map]]
[https://www.metro.tokyo.lg.jp/ 東京都][https://www.city.minato.tokyo.jp/ 港区]の[[wiki-ja:コミュニティバス|コミュニティバス]]「[[wiki-ja:ちぃばす|ちぃバス]]の運行状況をリアルタイムで表示するアプリケーション。
http://fukudat.net/chiibus-map で稼働している。[[Chiibus-map-mobile|iOS版はこちら]]を参照。[[Category:fukudat.net]][[Category:How-To]] == QRコード ==[[Image:chiibus-map-qr.png|link=https://fukudat.net/chiibus-map]]
== What's New ==
Docker Container化した。[[Projects/Chiibus-map|プロジェクト]]参照。
== 免責 ==
もし問題を発見したら[[User:Fukudat]]にご連絡ください．
== どうやって動いているか(備忘録) ==
内部構造は、
<pre>
フロントエンド (Web サーバー) →[リバースプロキシ]→ バックエンド (API サーバー) →[http]→[ばすくるサービス]
</pre>
となっていて、[[google:docker-compose|docker-compose]] で制御された container 上で動いている。
=== Webサーバー ===
[[google:angular+-angularjs|angular]] でWeb UIを記述。地図コンポーネントには[https://angular-maps.com/ Angular Google Map]を使用。
ちいばすの運行状況取得のために、後ろのAPIサーバをhttp越しに呼び出す。
Web server には[[google:nginx|nginx]]を選択。nginx公式docker imageをベースに、[[google:node|node]] と [[google:angular+-angularjs|angular/cli]] をインストール。
=== APIサーバー ===
Pythonベースの [[google:gunicorn|gunicorn]], [[google:python+flask|flask]] で RESTful API風に仕立てる。
http://www.buskuru.com/chiibus/pc/index.php からリアルタイムの運行データをスクレイピングして取得している。
[[Category:How-To]][[Category:fukudat.net]]
