このアプリは、以下のサービスやテクノロジーについて検証することを目的に開発しました。

• 生成AIを利用したアプリケーション開発
• オープンデータとして公開されているデータの活用
• AWS Amplify ( Gen2 )を利用したアプリケーションの公開

アプリケーションの企画や初期コードの実装には、Claudeを利用しました。まず京都市のオープンデータポータルサイトから利用したいデータファイルをダウンロードします。その後ファイルをClaudeへアップロードし、データからアプリケーションの企画案を作らせました。

提案されたアイディアの中から、最も自分が実際に使う可能性が高いと感じたものが、この最終電車アラートアプリです。このアイディアからデモアプリを実際に作成させ、ユーザー体験がどのようになるかなどをおおまかに決定していきます。

その後、Next.jsやAWS Amplifyを利用することを条件として指定し、Claudeにコーディングを依頼するセッションを新しく作成しました。セッションを新しくしたのは、コードを書かせることによるトークン数の消費量や、没案となった別のアプリの情報が混ざらないようにするためです。

また、この作業と並行して京都市が公開しているCSVファイルをJSON形式に変換するスクリプトについても実装させています。JSONへの変換タスクのみを指示してもよいのですが、定期的なダイヤ改正に対応することを考えると、変換するツールを用意する方が効率的だと考えたため、変換スクリプトを作成し、それによってJSON化させています。

「新しい技術を試すためのアプリ開発」がテーマであるため、プロダクションでの導入経験がない or 少ないものを優先的に選定しています。

• フロントエンドフレームワーク: Next.js App Router
• ホスティング環境: AWS Amplify Gen2 Hosting

UIについてはRadix UIとTailwind CSSを選択していますが、これはClaudeが選んだ以外の理由はありません。

App Routerを利用していますが、ダイヤ改正されるまでデータが変わることはまずないだろうということから、ほとんど静的化する前提で実装しています。JSONに保存された時刻データをサーバー側で取得し、Stateへ持たせます。あとは路線名やダイヤパターンに応じてどのデータを参照するかを変更する処理をクライアント側で実行します。サーバー側の処理ではありますが、キャッシュとして保持してくれている想定ですので、事実上静的ページ・SPAとして振舞います。

データについて

京都市が公開しているオープンデータ、「京都市営地下鉄時刻表（令和６年３月１６日烏丸線ダイヤ変更）」を利用しています。このデータのライセンスはCC-BY 4.0（表示）です。