20230829_easy2_大学院で勉強したらジオアプリを1日で作れるようになった話

2023年8月29日に開催された「エンジニア達の「完全に理解した」Talk　#44」の発表資料です。

Transcript

1. 大学院で勉強したらジオアプリを 1日で作れるようになった話 29-Aug-2023 エンジニア達の「完全に理解した」Talk #44 @hisaos
2. 目次 • 自己紹介 • 産業技術大学院大学 • システムプログラミング特論 • こんなもの作ったよ • まとめ • おまけ • 参考資料リスト
3. 自己紹介 • @hisaos（X/Facebook） • ソフトウェア会社のマーケティング部署でローカライズのお仕事 • 前職エンジニア・前前職ローカライズ・前前前職エンジニア... • 社会人・大学生・大学院生の3足のわらじ • プログラミングはしばらくやってなかった
4. 産業技術大学院大学 • 公式ウェブサイト • 品川シーサイド駅最寄りの「専門職大学院」 • IT、モノづくり、事業開発などが学べる • 授業は平日の夜と土曜 • オンライン受講で完結できる授業も多数あり • 修士論文なし、代わりにPBLというものをやる • 修了すると「専門職修士」の学位がもらえる • 科目履修生やってみたnote記事
5. システムプログラミング特論 • 2ヶ月間、Python（一部Java）でいろいろ実装する授業 ◦ UNIX系OSのコマンド（の簡易版）を書いてみる（授業の大部分これ） ◦ データ構造による処理効率の違いを実行時間を計測して見てみる ◦ スレッドについて学ぶ ◦ プロセスやパイプラインの扱いを学ぶ ◦ 簡易シェルを書く ◦ オリジナルの題材を考えて、 APIを使ってアプリを作ってみる ←今回のネタ
6. こんなもの作ったよ • お出かけ先に引っ越したい • そこは安全な場所か、家賃はどの程度か • 「スマホで撮った写真を上げたらその場所のハザードマップと不動産価格情報を セットにして表示するアプリ」があったらええやん • 授業でFlaskを学んだし、そういうOpenAPIあったよね？作ろう
7. おおまかな処理の流れ
8. 動作例（動画）
9. 動作例（静止画） ハザードマップ もとい洪水時の浸水深マップ 赤いほどヤバい（深い） アップロードした写真 土地総合情報システムから取 り出した地価情報
10. 実装環境・利用したライブラリ • MacBook Pro, 13-inch, M1, 2020（メモリ16GB） • iPhone 13 Pro Max • Pythonオンリー • 利用したライブラリ ◦ 標準ライブラリ：io、json、datetime、base64 ◦ 外部ライブラリ：Flask、folium、Requests、PIL(Pillow) ◦ OpenAPI ▪ 国土交通省国土地理院「 ハザードマップポータルサイト 」で公開のハザードマップ情報取得 API ▪ 同じく国土地理院の 逆ジオコーディングAPI ▪ 国土交通省土地総合情報システム「 不動産取引価格情報取得 API」
11. タイムライン 実装は約1日で完了 • 7/31正午課題提出〆切→セーフ • ↑7/30に実装とか頑張る ◦ base64化した画像をFlaskのテンプレに渡すところでハマるが、あとは大体素直に行く • ↑7/29に構想を固める ◦ Exifからlatlon抽出して、国土地理院あたりに APIあったからアレ使って ...とか考える • ↑平日に風呂りながらネタをぼんやり出す ◦ スマホで写真撮って上げたらその辺の情報アプリあったらええやん
12. まとめ • やっぱりコード書くとたのしー • ネタを頭に詰めて風呂につかってぼんやりするといいぞ • OpenAPIの力を借りると1日でもなんかそれっぽいの出来るぞ
13. おまけ：外からアクセスできるようにしたかった • AWSにデプロイして外からアクセスできるようにする • EC2/S3を使うのかなと漠然と思ってたが、最近はElastic Beanstalkというものを使 うらしい • まずAWS公式のチュートリアルをやる • 次にFlaskアプリのデプロイのチュートリアルをやる ◦ virtualenvコマンド、ebコマンド（EB CLI）は別途インストールする ◦ virtualenvはHomebrewでインストールできる ◦ EB CLIインストール時にハマるが、公式からリンクされている GitHubレポジトリにworkaroundがあ るので、それに従う ◦ 途中でアクセスキーとシークレットキーを作ることにもなるので、 公式のガイドに従う • ここまでやるとサンプルアプリに外からアクセスはできるようになった
15. おまけ：自分のPythonアプリのための環境作成+デプロイ • 今回作ったアプリをまとめたフォルダーに移動 • サンプルアプリのデプロイでは仮想環境を使っていたがそれを使わず、開発環境で pip3 freezeを打ってrequirements.txtを作る • eb initする • eb create <自分のアプリ名>して環境を作り、デプロイする • …とやったら終わりかと思ったらそんなに甘くなかった ◦ Flaskアプリのコードが立ち上がらなくて 502ばっかり返す状態。 ◦ よくあるケースらしいのでもうちょい調べて動かしたい
16. おまけ：土地情報総合システムAPIの生の返り値 • 「API操作説明」の最初に書いてあるAPIを呼ぶURLにパラメー ターを入れて検索するとこんな感じの JSONが返ってくる • 地価を知りたい時に読むには余計な情報も多いので、アプリで は必要なものだけ抽出して表示 • パラメーターがやや独特 ◦ 期間指定してデータを取得するが、年月指定は「西暦4桁+四半期」（例 ：2023年第一四半期→「20231」）のように変換する必要あり ◦ 期間の最初と最後を示すfromとtoは1四半期以上開ける ◦ toが現在の年月の1つ前の四半期以前にしないとダメっぽい ▪ たとえば2023年8月で取得できる最新のデータを1四半期分取り たい場合、2023年8月は第3四半期扱い（「20233」に含まれる）な ので、from=20231、to=20232と指定する ◦ areaとcityはどっちか指定すればOK ▪ 今回は「写真を撮った近く」のハザードマップと地価情報を知りた かったので、cityで指定（左の「MunicipalityCode」と一致） ▪ 同じく国土交通省の逆ジオコーディングAPIに緯度経度を与えると 返ってくるJSONにキー「muniCd」がある。その値がそのまま使え る
17. おまけ：Exifの例 • Exifは「タグ番号」と呼ばれるキーで値をまとめている ◦ どのタグ番号がどんなデータかは「 Exchangeable image file format」のウィキペディアからリンクされている「 CIPA規格類」 のPDFに詳しく載っている ◦ 緯度経度（高度）データは 34853のタグに含まれている ▪ 左の画像で’N’の次にある数値が緯度（北緯。度分秒 表記）、’E’の次にある数値が経度（東経。度分秒表記）
18. 参考資料リスト（1/4） • Pythonパッケージ関連 ◦ Python 標準ライブラリ: https://docs.python.org/ja/3/library/index.htm ▪ Python以外何もインストールしなくても使えるパッケージの一覧。 ◦ PyPI: https://pypi.org/ ▪ 外部ライブラリを探す時に活用。 • 国土交通省(国土地理院 API・土地総合情報システム API)関連 ◦ e-gov API カタログ: https://api-catalog.e-gov.go.jp/info/ja/apicatalog/list ▪ 日本の行政が公開している OpenAPI のカタログ。 ◦ ハザードマップポータルサイト: https://disaportal.gsi.go.jp/hazardmap/copyright/opendata.html ◦ 重ねるハザードマップ: https://disaportal.gsi.go.jp/maps/ ◦ 土地総合情報システム - API 操作説明: https://www.land.mlit.go.jp/webland/api.html ◦ API を使って土地の公示価格を調べるプログラムを作る : https://thinkit.co.jp/story/2013/06/12/4123 ◦ folium で「重ねるハザードマップ」を重ねる: https://qiita.com/mhangyo/items/1770497a8d81004629a4 ◦ 国土地理院 API でお手軽ジオコーディング&逆ジオコーディング: https://memo.appri.me/programming/gsi-geocoding- api#%E9%80%86%E3%82%B8%E3%82%AA%E3%82%B3%E3%83%BC%E3%83%87%E3%8 2%A3%E3%83%B3%E3%82%B0API
19. 参考資料リスト（2/4） • Exif/Pillow 関連 ◦ Exchangeable image file format: https://ja.wikipedia.org/wiki/Exchangeable_image_file_format ◦ Pillow documentation: https://pillow.readthedocs.io/en/stable/handbook/tutorial.htm ◦ Exif について: https://hp.vector.co.jp/authors/VA032610/JPEGFormat/AboutExif.htm ◦ Python の Pillow で画像処理!PIとの違いは?インストールから使い方まで : https://camp.trainocate.co.jp/magazine/python-pillow/ ◦ Pillow で Exif 情報を遊ぶ〜辞書の復習を兼ねて〜 : https://qiita.com/mo256man/items/b4567b0e0945b99f9cff ◦ Python Tips: 画像の Exif データを取得したい : https://www.lifewithpython.com/2014/12/python-extract-exif-data-like-data-from- images.html
20. 参考資料リスト（3/4） • folium/leaflet 関連 ◦ leaflet 公式: https://leafletjs.com/ ◦ Using folium with flask - Folium 0.14.0 documentation: https://python-visualization.github.io/folium/flask.html ◦ 地図の Wikipedia!OpenStreetMap のデータを Python で簡単にダウンロードできる Pyrosm と leafmap を使ってみよう!: https://qiita.com/nokonoko_1203/items/823abd6920553ee5f457 ◦ React Leaflet を使って地図アプリを作成してみよう : https://fintan.jp/page/7849/ ◦ 場所の緯度経度を取得してマップに統計データを重ねる : https://qiita.com/thmd9726/items/34cfdfa771e0d6f7fffd ◦ [Python プログラミング]インタラクティブな地図作成が出来る leafmap を使ってみる: http://www.otupy.net/archives/40336496.html ◦ Folium: Python で地図可視化: https://takaishikawa42.hatenablog.com/entry/2019/01/11/234716 ◦ 【Python】Flask で Web アプリケーションを作る 6 -matplotlib のグラフを Web 画面に 描画する: https://www.learning-nao.com/?p=3915Ω
21. 参考資料リスト（4/4） • Flask 関連 ◦ Flask でのテンプレートの継承のやり方についてまとめました〜 block, extends〜: https://www.nblog09.com/w/2020/12/18/flask-extends/ ◦ Flask1.0.2 から HTMを返し、変数の埋め込み、 if、for、ファイル分割をする : https://nansystem.com/flask-render_template/ ◦ Flask を使って画像データをアップロードする方法 : https://progmemo.hatenablog.jp/entry/2022/07/19/020830 ◦ 画像 Base64 エンコード: https://web-toolbox.dev/tools/base64-encode-image ◦ werkzeug.FileStorage.save - Flask API document: https://tedboy.github.io/flask/generated/generated/werkzeug.FileStorage.save.html ◦ Python base64 in HTM- broken image: https://stackoverflow.com/questions/60467123/python-base64-in-html-broken-image ◦ how can I open an image of FileStorage type in Pillow: https://stackoverflow.com/questions/65266569/how-can-i-open-an-image-of- filestorage-type-in-pillow