きっかけ
2025年、日本国内全域で、熊の出没や、熊による被害が相次いでいます。
私も北海道札幌市に住んでおり、住んでいる場所では直接的に熊と遭遇する可能性はさほど高くないものの、豊平川を伝って札幌都心部まで来たら、という恐怖を感じながら生活しています。
札幌市では、今年度のヒグマ出没情報が公式サイトとして公開されています。
ただ、こちらのサイトでは、最新年度と過去の年度のデータが別ページで表示されていて、全データを一元管理して表示できなく、また、フィルタができないなど、私が見たいと思う角度で見ることができない状態でした。
そのような時に、札幌市が整備したオープンデータのサイトを見つけ、その中で2017年以降のヒグマ出没情報がCSV形式で公開されており、私が欲しいと思っていた情報も含まれていることを知りました。
「欲しいものがないなら自分で作ってしまえ」ということで、趣味の範囲で開発することにしました。
また、背景の地図については、せっかくオープンなデータを使うので、OpenStreetMap を使わせていただくことにしました。
開発の経緯
要件・仕様の策定
過去のデータから最新年度のデータまで含めて、データを一元管理して掲載することにしました。
また、フィルタ条件を指定して情報を絞り込む機能も欲しいと考え、実装することにしました。
フィルタ条件としては、まずは年、月を最低限指定して絞り込めるようにしようと考えました。
技術選定
Webアプリケーションとして、特に今回は、フロントエンドのみでの公開しようと考えました。
私自身、バックエンド側として、Python Djangoでの開発を長く経験して得意なのですが、バックエンド側で実装・公開する場合、どうしても公開用にサーバを立てる必要が出てきて、そのためのコストがかかります。
フロントエンドのみで公開する場合、低コストのレンタルサーバやAmazon S3などのオブジェクトストレージ、さらには無償で使用できるGitHub Pagesでもサイトを公開できます。
また、OpenStreetMapや位置情報データを扱う場合、LeafletやMapLibre GLなど、フロントエンドの技術との親和性が高いことも、フロントエンドのみで公開する大きな理由です。
コード生成AIの活用
前述したとおり、私自身はこれまで、バックエンド側を中心に経験してきており、フロントエンドの実装は専らjQueryしか使っておらず、Vue.jsやReactJSの経験はゼロでした。
ReactJSを勉強して実装してみたい、という思いはあったものの、ゼロから勉強する場合、何年かかることやら・・・。と、去年までであらば諦めるところでした。
しかし、今年（2025年）の夏ごろから、私の周りでコード生成AIの話題が出てきて、職場でもClaude CodeやDevinなどを導入し、効果も出てきていると聞いています。
そこで私もコード生成AIを使って、どこまで開発できるかを試してみることにしました。
夏ごろはコードよく使われるものとして、Claude CodeやGeminiを聞く機会が多かったのですが、秋ごろからOpen AIのCodexの精度も高くて使える、という声を聞く機会も増えてきたので、今回は Codex をWSL2上のCLIで使うことにしました。
CSVからGeoJSONへの変換ツールの開発
また、CSV形式で公開されているデータをGeoJSON形式に変換する際、当初は QGIS というツールを使って手作業で行っていたのですが、手作業だと操作ミスや手順忘れの可能性がありますし、CSV形式の項目をそのままGeoJSONに変換するより、表示やフィルタをしやすいように属性を追加した方がいいと考え、変換ツールを作ることにしました。
この変換は私が得意としてきたPythonで、JupyterLab のノートブックで行うこととしました。
こちらは、私がもともと得意としてきたことなので、コード生成AIは使わず、自力で実装できました。
OpenStreetMapとオープンデータの利用にあたって
私は職場の転勤で2024年の春まで5年ほど大阪にいたのですが、その最初の年、ある勉強会に参加し、知り合いが1人もいなくて少々孤独な中、 OpenStreetMap Foundation Japan の 坂ノ下勝幸さん が声をかけてくださったおかげで、OpenStreetMapの存在を知ることになりました。
その後、大阪にいる期間の中で何度かマッピングパーティやWikimediaの編集などのイベントに参加する機会を頂き、その中で、OpenStreetMapやオープンデータを活用するにあたって最低限守らなければいけない大切な考え方（ライセンスやマナーなど）などについても学ぶことができました。
今回のサイトの公開においても、先人がこれまで培ってきてくださった仕組みやデータを使わせていただくので、ライセンスを確認し、クレジットの表記についてもCodexに指示をしながら表記しました。
開発したサイト
以上のような経緯で開発してきたサイトも完成し、2025年11月23日(日)にGitHub Pagesで公開しました。
サイトのソースコードはこちらです。
CSVからGeoJSONへの変換ツールはこちらです。