本記事は 2026/02/01 ~ 2026/03/01 の間毎日 AI アプリケーション開発（AI を搭載したアプリ開発 or AI を使用した開発）をテーマに 30 days AI challenge を行う 2 日目のブログポストです。
今日は早速本題に入ります。
本日のアプリ
今日作成したアプリは “お散歩ルート自動生成アプリ” です。最近運動不足解消のため散歩へ出かけますが、その散歩ルートがいつも同じでマンネリ化してしまうため、それを防ぐために自動でお散歩ルートを考えてもらうアプリです。
なお、今回も GitHub Copilot をふんだんに使いコード生成自体はおおよそ AI に書いてもらいましたが、アプリ自体に AI の組み込みはありません。
見た目は↓こんな感じです。
主な目的としては現在の地点からのお散歩ルートの生成なので、現在の location を取得し、その情報をもとに指定した時間で往復できるようなルートを生成しています。補助機能として、住所を指定することでその地点から算出してくれますが、この自由入力から実際の住所をマッピングする箇所がうまくいかず、住所を指定するとかなりあいまいな地点を示します。
それでもとりあえず動けばよし！ということで今日の成果物はこちらとします。
技術要素
肝心な技術要素ですが、上記画像を見ていただければわかる通り API としては Microsoft Azure Maps を使用しています。
※当初 Bing Maps API の使用を考えておりましたが、Bing Maps API はすでに廃止予定とのことで現在は Azure Maps への移行が推奨されているようでした。
JavaScript コードで大半の Map 描画処理を実装し（AI がですが、、）atlas という Azure Maps API を含む名前空間を使用して MAP 情報、ルート情報を取得しています。
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css">
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>API キー（というか認証キー）が Azure リソース側から取得が可能なので、こちらをキーとして定義し Azure Maps へ認証しています。
C#/Blazor からこの JavaScript コード内の各関数を呼び出し、画面描画する際に MAP 情報を呼び出し、ルート検索ボタンをクリックした際に現在の場所を取得する関数、ルート生成の呼び出しをトリガーします。コードの全容は乗せませんが、async function generateRoute(options) という一つの関数でルート取得を行っており、ここがこのアプリの肝となります。
おわりに
今日のアプリは “とりあえず動けばよし” という勢いで作ってしまい、まさに Vibe Coding でした。逆に言えば、コードの大部分を理解せずに動いているので、これを運用保守、デバッグしようとするとかなり苦労すると思えます。
今回のアプリの根幹をなす JS コードですが、たった 1 つ 2 つのプロンプトで 360 行にも及ぶコードが生成されました。確かに生成 AI によるコーディングはアプリの作成（アイデアを動くアプリにする過程）を容易にしますが、コードを書けない/読めないユーザーが使うと、運用保守観点でも非常に扱いが難しいと思われます。
明日はアプリの作成に加え、過去のアプリ明日のアプリの中身に目を向け、より “なぜ動いているのか” に焦点を当ててみようと思います。
今日も閲覧いただきありがとうございました。
コメント