事務員がAI使ってChrome拡張機能を作った話

前書き

みなさんこんにちは！
気がついたら前回の投稿から2年経過しておりました。

前回↓

前回は「ChatGPT使ってこんなことしてみた〜」系の記事でしたが、今年はより業務効率化に寄ったお話しです。
私と同じような属性の方の役に立てば良いなと思いつつ、作ったもののご紹介をします。

実際にやったこと

• 経費精算チェックを効率化するためのChrome拡張機能を作った
• 国土数値情報の駅データから、AIを使って駅名＆座標のcsvを作った
• 全国の駅データから関東圏の駅だけを絞り込むための座標を求めた

つくったもの

「駅をプルダウンから選択して・地図上に表示して・徒歩圏内かを確認するChrome拡張機能」

↓こんな感じです

拡張機能のファイルと役割

ここはAIに解説してもらったものを一部修正して記載します。

構成

extension/
  ├── manifest.json
  ├── popup.html
  ├── popup.js
  ├── background.js
  ├── styles.css
  └── assets/
       └── station2.csv

ファイル	役割
manifest.json	拡張機能の設定、権限、エントリーポイント定義
popup.html	ポップアップUIの構造（駅入力欄など）
popup.js	駅データ読み込み、駅名抽出処理など
background.js	ページ上のテキスト選択から駅名を抽出するService Worker
styles.css	UI全体のスタイル、マーカーの色定義
station2.csv	駅名・緯度・経度のデータベース

なぜつくったのか？

みなさんもこういった移動することってありますよね

• A駅→B駅 に地下鉄で移動
• （→B駅から徒歩移動が間に挟まってC駅に移動）
• →C駅→A駅 に地下鉄で移動

仕事柄、出張交通費等の経費精算のチェック作業をしているのですが、その中でこういった↑経路で申請が上がってくると
「B駅からC駅は歩ける距離なんか？🤔（申請漏れではないのか？🤔）」
というのを確認する必要がありまして、その確認作業を効率化してぇなあ、というのが開発動機でした。

効率化に向けて全体の流れを考える

• Chrome拡張としてワンクリックで使えるようにしたい
• 拡張機能に持たせる駅の座標データが必要だろう
  • 国土数値情報の駅データに載っていそうである
  • (もしかしたら後で手動調整するかもしれないから、自分が慣れている)csvにして拡張機能で読ませよう
• OpenStreetMap上に載せて視覚的にわかるようにしよう
• 駅の候補絞り込みも実装したい
• コード部分は全面的にAIに頼もう
  • 環境の準備をしよう
    • ChatGPT Plusプラン
    • Visual Studio Code
      • Codexが動く状態
  • ※環境構築手順については今回は割愛させていただきます

つくっていこう

まずはデータの準備（座標のデータが欲しい）

「国土交通省国土数値情報ダウンロードサイト　鉄道データ」を使います
https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N02-2024.html

「〜Station.geojson」というファイルを開いてみると↓

もっと詳しく見てみると…これは明らかに座標の値

AIにデータ加工の指示を出す

プロンプトはこんな感じでした。
（長いのでここでは改行を入れていますが、実際には1行で指示出ししています）

〜Station.geojsonの加工をお願いします。
1行毎に、"type": "Feature", "properties":
{ "N02_001": "X", "N02_002": "X", "N02_003": "X", "N02_004": "X", "N02_005": "YYY" }, 
"geometry": { "type": "MultiLineString", "coordinates": 
[ [ [ aaa.aaaaa, bb.bbbbb ], [ ccc.ccccc, dd.ddddd ]
という形で駅の座標データが書かれているので、このうち「YYY」という駅名と、
「aaa.aaaaa」という座標、「bb. bbbb」という座標の3データのみ抽出し、
それを新しいCSVファイルとして作成してください。

これだけの指示でうまいことcsvになってくれました↓

ここまできたら欲しい機能を提案するだけ（適宜欲しい機能を細かく指示出し）

では、Chromeで動作する拡張機能を作成してください。
拡張機能のボタンをクリックしたらOpenStreetMapがウィンドウで表示され、
そのウィンドウには駅を選択できるプルダウンをつけてください。
選択した駅は（先ほど作成した）csvの座標を用いて、OpenStreetMap上にポイントで表示してください。
また、テキストの貼り付け欄を追加して、そのテキストがヒットした駅だけをプルダウンで選択できるようにしてください。

そうして完成したものがこちら↓

使ってみて

ちょっとした問題を発見

• 日本の駅は同じ（漢字の）名前の駅が複数あることにここで気が付く
  • 「三田」駅など
  • これが検索の時に想定外の挙動に（東京近辺で調べたかったのに兵庫県の方がヒット、のような）

→関東圏の駅を確認することが多いため、駅の候補を関東圏のみに絞り込む方針へ

改善：関東圏への絞り込み方法

• https://geojson.ioを使う
• ざっくり関東圏を囲む
  

→欲しい範囲が「138.65...〜140.90...」、「34.86...〜36.52...」とわかりました。

※geojson.ioとは？

ブラウザ上で地図を動かしながら好きな形状のGeoJSONデータを作ることのできるウェブサービスです。
今回は「関東圏だけをざっくり四角形で囲んだ座標が欲しい」という目的のために使用しました。
マウスで関東圏を囲むだけでその四角形の四隅の座標が右側に表示されるので、「特定範囲の座標が欲しいなぁ」といった時に便利なサービスです。
https://geojson.io

座標がわかったのでAIに改善指示を出す

csv加工の指示

出発と到着駅の座標csvを加工してください。
lon列が「138.65...〜140.90...」で、lat列が「34.86...〜36.52...」の
範囲内にあるデータのみを抽出し、新しいcsvとして出力してください。

csvが完成したら拡張機能の更新指示

現在の拡張機能は（前に作成したcsv）を参照していますが、
（新しく作成したcsv）を参照してください。

「（）」書きをしている部分は実際のファイル名を入れた方が正確に動いてくれるはずです。
（old.csvを参照していましたが、new.csvを参照するように〜、のように）

今回のまとめ

• 国土数値情報の駅データから、AIの力を借りて駅名＋座標のCSVを簡単に作れる
• 特定範囲の座標が欲しい時はgeojson.io が便利
• Chromeの拡張機能＆OpenStreetMap で、「駅を選んで地図上にポイントを表示する」ツールは意外とあっさり作れる

本当は駅間距離を計測して徒歩◯分です、という表示までさせたいところなのですが、今回はここまで…
地図上での目視だけでもある程度は「この駅間は徒歩で問題ないな」というのは掴めるので、現状満足しています。
ぜひみなさんも自分専用の最強の拡張機能を作ってみてください。