<h2 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h2>
<p data-line="2" class="code-line">シビックテック任意団体 <a href="https://code4oyama.org/" target="_blank" rel="nofollow noopener noreferrer">Code for OYAMA</a> (栃木県小山市) の石橋です。<br>
<a href="https://zenn.dev/bishi/articles/20250730a_article" target="_blank">前回</a>作った「<strong><a href="https://apps.code4oyama.org/oyama_aed_map" target="_blank" rel="nofollow noopener noreferrer">おやまAEDマップ</a></strong>」をベースに「<strong><a href="https://apps.code4oyama.org/oyama_child_facilitation_map" target="_blank" rel="nofollow noopener noreferrer">おやま子ども施設マップ</a></strong>」を作ってみました。こちらも栃木県小山市が提供しているオープンデータを利用しています。</p>
<h2 id="%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%A6%82%E8%A6%81" data-line="6" class="code-line">
<a class="header-anchor-link" href="#%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%A6%82%E8%A6%81" aria-hidden="true"></a> プロジェクト概要</h2>
<h3 id="%E9%96%8B%E7%99%BA%E8%83%8C%E6%99%AF" data-line="8" class="code-line">
<a class="header-anchor-link" href="#%E9%96%8B%E7%99%BA%E8%83%8C%E6%99%AF" aria-hidden="true"></a> 開発背景</h3>
<p data-line="10" class="code-line">小山市が<a href="https://www.city.oyama.tochigi.jp/opendata.php" target="_blank" rel="nofollow noopener noreferrer">オープンデータカタログ</a>として公開しているオープンデータのなかでおやまAEDマップで利用したもの以外にも緯度経度情報を含んだものがいくつもあります。そのうちの子ども施設情報(保育所、幼稚園、こども園など)を使ってマップアプリを作っていきます。</p>
<p data-line="12" class="code-line">おやまAEDマップのプロジェクトはある程度のプログラミング知識があれば他のマップへの応用が容易にできるように構成されています。今回はAIを利用したバイブコーディングを念頭にその手順を説明します。<br>
元のおやまAEDマップの機能や利用方法については<a href="https://zenn.dev/bishi/articles/20250730a_article" target="_blank">前回の記事</a>を参照して下さい。</p>
<h2 id="%E7%A7%BB%E8%A1%8C%E6%89%8B%E9%A0%86" data-line="15" class="code-line">
<a class="header-anchor-link" href="#%E7%A7%BB%E8%A1%8C%E6%89%8B%E9%A0%86" aria-hidden="true"></a> 移行手順</h2>
<p data-line="16" class="code-line">今回はAIエージェントを利用してコードを修正していきます。ここではClaude Codeを利用していますが、エージェント機能を持つのであればGitHub Copilotなど他の環境でも同じように移行作業をできるかと思います。</p>
<h3 id="1.-%E5%85%A8%E4%BD%93%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A7%8B%E6%88%90" data-line="18" class="code-line">
<a class="header-anchor-link" href="#1.-%E5%85%A8%E4%BD%93%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A7%8B%E6%88%90" aria-hidden="true"></a> 1. 全体ファイル構成</h3>
<div class="code-block-container"><pre><code class="code-line" data-line="22">www/
├── index.php☆                   # 📍 メインページ
├── facility_detail.php☆         # 📄 施設詳細ページ
├── login.php☆                   # 🔐 管理者ログイン
├── admin.php★                   # 🛠️ 管理者ダッシュボード
├── admin_add.php★               # ➕ 新規施設登録
├── admin_edit.php★              # ✏️ 施設編集
├── admin_password.php☆          # 🔑 パスワード変更
├── admin_export_csv.php☆        # 📊 CSV エクスポート
├── auth_check.php☆              # 🔒 認証・セキュリティ
├── api_facilities.php★          # 🔌 施設情報API
├── init_db.php★                 # 🗄️ データベース初期化
├── facility_form_functions.php★ # 🔧 共通フォーム処理
├── css/
│   ├── common.css               # 🎨 共通スタイル
│   ├── admin.css                # 🎨 管理画面用CSS
│   └── main.css                 # 🎨 メインページ用CSS
├── license/                     # 📄 ライセンス情報
└── facility_images/             # 🖼️ 画像保存ディレクトリ（自動作成）

app_db/oyama_child_facilitation_map/★ # 🔒 Web外ディレクトリ
├── config.php★                  # ⚙️ 設定ファイル
└── facilities.db★               # 🗄️ SQLiteデータベース
</code></pre></div><p data-line="48" class="code-line">（凡例）<br>
★：構造的に異なる箇所があり、フィールドや項目数・内容が違うため変更時は注意が必要です。<br>
☆：主にWeb表記や名称のみの差分で、構造やロジックはほぼ同じです。</p>
<p data-line="52" class="code-line">全体のファイル構成は上記の通り。<br>
これらのファイルをどのような手順で書き換えていけば良いのかを説明していく。</p>
<h3 id="2.-%E8%A8%AD%E5%AE%9A%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E5%A4%89%E6%9B%B4" data-line="55" class="code-line">
<a class="header-anchor-link" href="#2.-%E8%A8%AD%E5%AE%9A%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E5%A4%89%E6%9B%B4" aria-hidden="true"></a> 2. 設定ファイルの変更</h3>
<p data-line="57" class="code-line">このプロジェクトには <strong>設定ファイル（<code>config.php</code>）</strong> があり、アプリの名称や表示に関する部分、DBのテーブル構成、CSVインポート構成など基本的な部分はこのファイルを書き換えることで対応できるようになっています。</p>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename">config.php データベース設定例抜粋</span></div>
<pre><code class="code-line" data-line="59">    // データベース設定
    'database' =&gt; [
        'path' =&gt; __DIR__ . '/facilities.db',
        'tables' =&gt; [
            'facilities' =&gt; [
                'columns' =&gt; [
                    'id' =&gt; 'INTEGER PRIMARY KEY AUTOINCREMENT',
                    'csv_no' =&gt; 'TEXT',  // CSVの識別番号
                    'name' =&gt; 'TEXT NOT NULL',  // 名称
</code></pre>
</div><div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename">config.php アプリケーション設定例抜粋</span></div>
<pre><code class="code-line" data-line="70">    // アプリケーション設定
    'app' =&gt; [
        'name' =&gt; 'おやま子ども施設マップ',
        'version' =&gt; '1.0.0',
        'timezone' =&gt; 'Asia/Tokyo',
        'facility_name' =&gt; '子育て支援施設',  // 施設の呼称
        'categories' =&gt; [
            '認可公立保育所',
            '認可私立保育所',
</code></pre>
</div><p data-line="81" class="code-line">そのため、まずこのファイルを概要としてまとめ、AIにこれを参照してもらいながらその他のファイルを更新していくと不整合が起きにくいと思います。<br>
とはいえ、このファイルをきちんと書いていくのは骨が折れます。ですが今回のように元々あるCSVデータを用意できるのであれば簡単にAIに更新を依頼できます。</p>
<ol data-line="84" class="code-line">
<li data-line="84" class="code-line">小山市が提供しているオープンデータ(CSVファイル)をダウンロードして、プロジェクトに加えます。(今回は「子育て施設_小山市オープンデータ_UTF-8.csv」というファイル名にしました)</li>
<li data-line="85" class="code-line">AIに次のように依頼します。</li>
</ol>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename">AI Script</span></div>
<pre><code class="code-line" data-line="87">現在のoyama_aed_map(おやまAEDマップ)をベースに
oyama_child_facilitation_map(おやま子ども施設マップ)を作成していきます。
まずapp_db/oyama_child_facilitation_map/config.phpを修正してdbのテーブル構成やアプリの全体像を
カスタマイズしてください。他のファイルは変更しないでください。
「子育て施設_小山市オープンデータ_UTF-8.csv」を参照してください。
カテゴリについてはcsvの「種別」フィールドを元に作成するつもりです。
</code></pre>
</div><p data-line="95" class="code-line">わりと雑な指示だとは思いますが、これだけでかなりいい感じに修正を加えてくれます。最後のカテゴリというのは、マップ表示の際にマーカーの色や表示/非表示を切り替えるためのものなのですが、今回はCSVファイルに「種別」フィールドあるのでそれをそのまま使います。<br>
ちなみにおやまAEDマップの時にはCSVインポート時に施設名称からカテゴリを自動生成する特殊な処理が入っていました。</p>
<h3 id="3.-%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%E7%94%9F%E6%88%90%E9%83%A8%E3%81%AE%E5%A4%89%E6%9B%B4" data-line="98" class="code-line">
<a class="header-anchor-link" href="#3.-%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%E7%94%9F%E6%88%90%E9%83%A8%E3%81%AE%E5%A4%89%E6%9B%B4" aria-hidden="true"></a> 3. データベース生成部の変更</h3>
<p data-line="100" class="code-line">次にデータベースを生成するinit_db.phpを変更します。こちらは以下の3つの機能を持ったファイルです。</p>
<ol data-line="102" class="code-line">
<li data-line="102" class="code-line">データを残したままテーブル構成を変更</li>
<li data-line="103" class="code-line">データを全削除してサンプルデータを書き込む</li>
<li data-line="104" class="code-line">データを全削除してCSVファイルをアップロードしてインポートする</li>
</ol>
<p data-line="106" class="code-line">これらをあらためて明確に指示します。そうしないと勝手に機能を省かれたり、要らない機能を追加されてしまったりしたことがありました。</p>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename">AI Script</span></div>
<pre><code class="code-line" data-line="108">このconfig.phpの構成に基づいてinit_db.phpを書き換えてください。
機能はこれまで通り以下の3つ。
1. データを残したままテーブル構成だけを変更する。
2. データを全て削除してサンプルデータを格納する。
3. データを全て削除してアップロードされたCSVファイルを読み込む。
</code></pre>
</div><h3 id="4.-%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%E3%81%8B%E3%82%89%E8%AA%AD%E3%81%BF%E5%87%BA%E3%81%97" data-line="116" class="code-line">
<a class="header-anchor-link" href="#4.-%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%E3%81%8B%E3%82%89%E8%AA%AD%E3%81%BF%E5%87%BA%E3%81%97" aria-hidden="true"></a> 4. データベースから読み出し</h3>
<p data-line="117" class="code-line">この時点でデータベースの生成までできるのですが、入れたデータを読み出さなくては確認出来ません。api_facilities.phpを呼び出すと以下のようにデータベースの内容を読み出すことができるのでここを実装しておくことで書き込みと読み出しの整合性をAIに確認してもらえます。</p>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename">api_facilities.php実行結果</span></div>
<pre><code class="code-line" data-line="119">[
    {
        "id": 1,
        "csv_no": "0107000001",
        "name": "やはた保育所",
        "name_kana": "ヤハタホイクショ",
        "lat": 36.308707,
        "lng": 139.797489,
        "address": "栃木県小山市八幡町2-8-8",
        "address_detail": "",
        "installation_position": "",
        "phone": "(0285)21-2725",
        "phone_extension": "",
        "corporate_number": "",
        "organization_name": "",
        "available_days": "満2か月から",
        "start_time": "07:30",
        "end_time": "19:30",
        "available_hours_note": "日曜・祝祭日・年末年始はお休み。",
        "pediatric_support": "有",
        "website": "",
        "note": "",
        "category": "認可公立保育所",
        "images": []
    },
    {
        "id": 2,
        "csv_no": "0107000002",
        "name": "桑保育所",
        "name_kana": "クワホイクショ",
</code></pre>
</div><div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename">AI Script</span></div>
<pre><code class="code-line" data-line="151">構成したデータベースからデータを読み出すapi_facilities.phpを更新してください。
</code></pre>
</div><p data-line="154" class="code-line">これでデータベースの格納データが読み出せます。ただしデータベース内に公開できない情報(個人情報など)がある場合にはそれらを除くようにする必要があります。</p>
<h3 id="5.-%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%E3%81%AE%E6%9B%B8%E3%81%8D%E8%BE%BC%E3%81%BF%E8%AA%AD%E3%81%BF%E5%87%BA%E3%81%97%E7%A2%BA%E8%AA%8D" data-line="156" class="code-line">
<a class="header-anchor-link" href="#5.-%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%E3%81%AE%E6%9B%B8%E3%81%8D%E8%BE%BC%E3%81%BF%E8%AA%AD%E3%81%BF%E5%87%BA%E3%81%97%E7%A2%BA%E8%AA%8D" aria-hidden="true"></a> 5. データベースの書き込み読み出し確認</h3>
<p data-line="158" class="code-line">ターミナルからPHPサーバーを起動してローカルで動作確認をします。</p>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename">terminal PHPサーバー起動</span></div>
<pre><code class="code-line" data-line="160">oyama_child_facilitation_map % php -s localhost:8000
</code></pre>
</div><p data-line="164" class="code-line">ブラウザから<code>localhost:8000/login.php</code>でログインします。ログインパスワードはconfig.phpに記述してある<code>admin123(初期値)</code>です。<br>
ログインすると管理画面である<code>admin.php</code>が表示されますがこのファイルはまだ修正していないので表示が乱れたりしていると思います。一旦無視してください。<br>
次にブラウザから<code>localhost:8000/init_db.php</code>でデータベース初期化機能を表示します。ここでCSVファイルをアップロードして読み込みます。正常に完了すればCSVファイルを元にしたデータベースファイル(app_db/oyama_child_facilitation_map/facilities.db)が生成されています。</p>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename">AI Script</span></div>
<pre><code class="code-line" data-line="168">api_facilities.phpを利用し生成されたDBと元のCSVを比較して問題がないか確認してください
</code></pre>
</div><p data-line="171" class="code-line">上記のようにAIに指示して問題のないことを確認します。</p>
<h3 id="6.-%E3%83%9E%E3%83%83%E3%83%97%E8%A1%A8%E7%A4%BA" data-line="173" class="code-line">
<a class="header-anchor-link" href="#6.-%E3%83%9E%E3%83%83%E3%83%97%E8%A1%A8%E7%A4%BA" aria-hidden="true"></a> 6. マップ表示</h3>
<p data-line="175" class="code-line">ここまでくればあとはマップ表示に関する部分を修正するだけで一般ユーザー向けの実装が完成します。</p>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename">AI Script</span></div>
<pre><code class="code-line" data-line="177">index.phpとfacility_detail.phpを修正してマップ表示をしてください。
</code></pre>
</div><p data-line="180" class="code-line">とても雑な指示ですがここまでであらかた必要な構成や情報は組み上がっているので、これだけの指示でもいい感じに仕上げてくれます。<br>
一般ユーザが利用する場面なので実際にブラウザから <code>localhost:8000/index.php</code> と表示して不整合などないかよく確認する必要があります。問題があれば手作業でコードを修正するかAIに細かく依頼しましょう。</p>
<h3 id="7.-%E7%AE%A1%E7%90%86%E8%80%85%E6%A9%9F%E8%83%BD" data-line="183" class="code-line">
<a class="header-anchor-link" href="#7.-%E7%AE%A1%E7%90%86%E8%80%85%E6%A9%9F%E8%83%BD" aria-hidden="true"></a> 7. 管理者機能</h3>
<p data-line="185" class="code-line">これまでの構成に問題がなければ、管理者機能についても簡単な指示で修正できるはずです。</p>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename">AI Script</span></div>
<pre><code class="code-line" data-line="187">管理者機能に関する部分で必要な修正をしてください。
</code></pre>
</div><p data-line="190" class="code-line">こんな感じでいけると思いますが、不整合がでるようであればいったん修正を元に戻してもらってから修正するファイルを細かく刻んで指示いくと良いと思います。<br>
極個人的な印象ですがAIによるバイブコーディングの場合、ある程度の構成が決まってくるまでは細かく刻んで指示を出して、あらかた概略が決まってきたらわりと雑な指示でも上手いことやってくれる気がします。</p>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81" data-line="193" class="code-line">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h2>
<p data-line="195" class="code-line">本記事では、既存の「おやまAEDマップ」をベースに、オープンデータを活用して「おやま子ども施設マップ」を効率的に構築する手順を紹介しました。<br>
設定ファイルやデータベース構成のカスタマイズ、AIエージェントを活用したバイブコーディングによる移行作業、マップ表示や管理機能の修正など、実践的なノウハウをまとめています。<br>
同様のマップシステムを作成したい方や、AIを活用した開発プロセスに興味がある方の参考になれば幸いです。</p>
<hr data-line="199" class="code-line">
<p data-line="201" class="code-line"><strong>プロジェクト情報:</strong></p>
<ul data-line="202" class="code-line">
<li data-line="202" class="code-line">webサイト: <a href="https://apps.code4oyama.org/oyama_child_facilitation_map" target="_blank" rel="nofollow noopener noreferrer">おやま子ども施設マップ</a>
</li>
<li data-line="203" class="code-line">GitHub: <a href="https://github.com/code4oyama/oyama_child_facilitation_map" target="_blank" rel="nofollow noopener noreferrer">oyama_child_facilitation_map</a>
</li>
<li data-line="204" class="code-line">開発者: 石橋利也 <a href="https://code4oyama.org/" target="_blank" rel="nofollow noopener noreferrer">Code for OYAMA</a>
</li>
</ul>


(AIに手伝ってもらって)AEDマップをベースに子ども施設マップを作る

5. データベースの書き込み読み出し確認

Discussion