地図と生成AI

2025/7/18(金)に開催されたAzure OpenAI Service Dev Days 2025 ( https://azureai.connpass.com/event/354972/ ) の懇親会LT大会に参加した時に発表した資料です。

Transcript

1. 地図と生成AI 2025/07/18 Azure OpenAI Service Dev Days 2025 懇親会LT大会 NTTテクノクロス 中島進也（なかしょ）
2. 自己紹介 • なかしょ（中島進也） @nakasho_dev • 所属：NTTテクノクロス株式会社 デジタルトランスフォーメーション事業部 • 業務：MaaS関連のスマートフォンアプリ開発担当 • 趣味： ➢妻とモンハンデート ➢IT関連の勉強会（主にモバイル系 or アジャイル系 or Microsoft系） ➢技術コミュニティの運営スタッフ ✓eXtreme Programming Japan User Group（XPJUG） 2019〜 ✓TDD BootCamp Online (TDDBC) 2020～ ※本資料は私個人の意見であり、所属企業・部門見解を代表するものではありません。
3. https://confengine.com/conferences/scrummatsuri XP祭り2025 10/4(土)開催
4. 図と生成AIのミスマッチ 4 • 生成AIで出力した絵はそれっぽいけど、どこかおかしい ➢生成AIはピクセルの集まりとしての絵を描くのは得意 ➢図が持つ構造や意味を理解して描くのは苦手 • 生成された図を編集するのは難しい とりあえず出力してみた けど、細かい修正ってど うしたらよいんだろう？
5. 地図は「絵」ではなく「データ」 5 • 地図は一見すると「図」や「絵」に見える • マップには緯度経度が設定されている ➢任意の場所に移動しやすい • マップタイルにはZoomレベルが設定されている ➢レベルを指定して拡大縮小しやすい • GeoJSONに代表される構造化されたGISデータ Zoom レベルを 拡大 139.666776, 35.646405
6. GeoJSONは地図の設計図 6 • 地理空間情報を扱うJSONフォーマット • Feature ➢Geometry ✓Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon ➢Properties ✓属性情報をKey-Valueで持つ ✓GeoJSONに対応したSDKによっては特定のKeyを自動で解釈できる
7. 7 https://www.geospatial.jp/ckan/dataset/ksj-p29-13 { "type": "Feature", "properties": { "行政区域コード": "13112", "公共施設大分類": "16", "公共施設小分類": "16001", "学校分類": "16001", "名称": "太子堂小学校", "所在地": "太子堂5-7-4", "管理者コード": 3.0 }, "geometry": { "type": "Point", "coordinates": [ 139.666776, 35.646405 ] } } G空間情報センターで無料 で配布されている国土数 値情報（学校）ー東京都 を使用。
8. 8 https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N02-v2_3.html { "type": "Feature", "properties": { "N02_001": "11", "N02_002": "2", "N02_003": "山手線", "N02_004": "東日本旅客鉄道" }, "geometry": { "type": "MultiLineString", "coordinates": [[ [139.7066,35.72145], [139.70596,35.71933] ]] } } 国土交通省の国土数値情 報ダウンロードサイトで 無料で配布されている鉄 道データから「新幹線」 と山手線を抽出して使用。
9. 地図操作アプリを作りたい 9 • 以下のライブラリ、サービスを使用したWebアプリ ➢Kotlin ➢Spring Boot ➢Spring AI ➢Azure Open AI ➢ホットペッパーグルメサーチAPI ✓https://webservice.recruit.co.jp/doc/hotpepper/reference.html • IntelliJ ＋ Github Copilot Agent modeで開発 ➢Claude Sonnet 4を使用 • ソースコードは触らない • AIが開発したコードは原則Accept
10. 指示内容 10 • 右側にチャット欄、左側にAzureMapsのWeb地図が表示されて いて、チャットで指示をすると地図を自動で移動してくれて、 ピン立てやルート案内をしてくれるWebアプリを作りたい。 チャットの解釈にはAzure OpenAIを使用する。 GISの情報につ いてはAzureMapsのAPIを使う。 • RECRUIT_API_KEY という環境変数でリクルートWEBAPIの キーを設定している。 リクルートWeb APIのグルメAPIを使用して、 地図上にピンを立てるようにしてほしい。 APIで受け取った結果を GeoJSON形式にしてAzureMapsに渡してピンを表示したい。
11. 自然言語で地図を操作するアプリ
12. ズームレベルの拡大を指示
13. ズームレベルが拡大された
14. 新宿駅に移動を指示
15. 新宿駅に移動（ちょっとずれてる）
16. 新宿駅周辺のラーメン店の表示を指示
17. 周辺のラーメン店がマーカーで表示
18. タップすると詳細が表示
19. 桂花ラーメンといえば熊本
20. 熊本城に移動（ちょっとずれてる）
21. まとめ 21 • 一般的な図や絵の加工は生成AIと相性が悪い • 地図は「絵」ではなく「データ」 • GeoJSONは地図における設計図 ➢様々な情報をGeoJSONに変換し地図に入力することで地図を編集できる • 生成AIは対話的に地図を生成・分析できる強力なパートナー • 今回作成したサンプルアプリ ➢https://github.com/nakasho-dev/MapWithChat
22. ご清聴ありがとうございました。 22 @nakasho_dev