🛰️

AI（Claude Code）実践記３：スマート農業支援ツール「Satellite Data Viewer」開発記

に公開
Claude
jaxa
tech

はじめに：「引き算」の開発思想

以前、私は農業DXを目指して「farm-management」という多機能な管理システムを開発しました。

しかし、機能を盛り込みすぎた結果、使いにくく、メンテナンスも困難なシステムになってしまいました。

そこで今回は**「引き算」の開発思想**で、本当に必要な機能だけに絞った軽量ツールを再構築することにしました。

コンセプト:

✅ JAXA衛星データ（LST・NDVI）と気象庁平年値の比較に特化
✅ お名前ドットコムのレンタルサーバーで公開可能な構成
✅ セキュアで保守性の高いコード
結果として、セキュリティテストも12/12で合格した、堅牢なアプリケーションが完成しました。
GitHubリポジトリ:

実行例：

AI活用の秘訣：過去の記録が開発を加速させる

今回の開発で最も効果的だったのは、過去の記録をAIに読み込ませるという手法です。

読み込ませた資料

farm-managementのGitHubリポジトリ - 以前の実装パターンと課題
気象庁平年値データの前処理ブログ記事 - データ構造と処理方法
要件定義書 - Claude Codeと対話して作成
この事前準備により、複雑な実装が驚くほどスムーズに進みました：

🎯 Haversine公式による最寄り観測所検索 → 一発で実装成功
📊 Chart.jsでの3本線比較グラフ → 衛星データ vs 最高・最低気温の可視化
🔐 SQLインジェクション・XSS対策 → 12項目すべてのセキュリティテスト合格
重要な気づき：

AIに作業を依頼する前に、テーマについてしっかりリサーチし、ブログやGitHubに記録を残しておくことで、AIへの指示が劇的にスムーズになります。

技術スタック

Frontend: HTML5, CSS3, JavaScript (Vanilla)
Backend: PHP 8.x, MySQL 8.x
Maps: Leaflet.js 1.9.4
Charts: Chart.js 4.4.1
Data: JAXA G-Portal API, 気象庁平年値
Security: PreparedStatement, strip_tags(), Input Validation

主要機能

1. 地図上でのLST（地表面温度）可視化

Leaflet.jsを使用して、衛星観測データを地図上にマーカーとして表示。温度に応じて色が変わるヒートマップ風の表現を実装しました。

function getMarkerColor(lst) {
    const lstNum = parseFloat(lst);
    if (isNaN(lstNum)) return '#9E9E9E';
    
    if (lstNum < 10) return '#2196F3';      // 寒冷
    if (lstNum < 15) return '#4CAF50';      // 涼しい
    if (lstNum < 20) return '#8BC34A';      // やや涼しい
    if (lstNum < 25) return '#FFC107';      // 温暖
    if (lstNum < 30) return '#FF9800';      // 暖かい
    return '#F44336';                        // 高温
}

2. 衛星データ vs 気象庁平年値の3本線グラフ比較

最も苦労したのがこの機能です。当初は平均気温のみの比較でしたが、最終的に最高気温・最低気温を含む3本線グラフに進化しました。

// Chart.js設定（抜粋）
datasets: [
    {
        label: '衛星観測値（LST）',
        data: lstData,
        borderColor: '#1E88E5',
        borderWidth: 3
    },
    {
        label: '平年値（最高気温）',
        data: climateMaxData,
        borderColor: '#F44336',
        borderDash: [5, 5]
    },
    {
        label: '平年値（最低気温）',
        data: climateMinData,
        borderColor: '#2196F3',
        borderDash: [5, 5]
    }
]

サマリーカード表示も実装し、一目で温度の偏差がわかるUIにしました。

3. 最寄り観測所の自動検索（Haversine公式）

ユーザーが入力した緯度・経度から、最も近い気象観測所をHaversine公式で計算します。


SELECT station_id, station_name, latitude, longitude,
    (6371 * acos(
        cos(radians(:lat)) * cos(radians(latitude)) *
        cos(radians(longitude) - radians(:lon)) +
        sin(radians(:lat)) * sin(radians(latitude))
    )) AS distance_km
FROM weather_stations
ORDER BY distance_km ASC
LIMIT 1

このSQL一発で、全国の気象観測所から最寄りの1つを検索できます。

4. セキュリティ対策：12/12テスト合格

セキュリティテストスクリプトを作成し、以下の項目をすべてクリアしました。


$ bash backend/test_security.sh

=========================================
テスト結果サマリー

合格: 12
不合格: 0
合計: 12
✓ すべてのテストに合格しました！

実装した対策：

✅ SQLインジェクション対策（プリペアドステートメント + is_numeric()）
✅ XSS対策（strip_tags()でHTMLタグ除去）
✅ 入力バリデーション（緯度-90～90、経度-180～180）
✅ 認証情報保護（.gitignoreでconfig.php除外）
// XSS対策の実装例
name = strip_tags(data['name']);
prefecture = isset(data['prefecture']) ? strip_tags($data['prefecture']) : null;

5. CSVエクスポート機能

現場で使えるデータ出力機能も実装しました。BOM付きUTF-8でExcelとの互換性を確保しています。

日付,地点名,緯度,経度,LST(℃),NDVI,平年値_最高(℃),平年値_最低(℃)
2026-01-08,Nanaka Farm,32.8032,130.7075,18.23,0.745,10.9,2.4
2026-01-09,Nanaka Farm,32.8032,130.7075,19.15,0.752,10.9,2.4

開発フロー

1. 要件定義（Day 0）

Claude Codeと対話しながら、以下の要件定義書を作成しました。

機能要件: 衛星データ表示、平年値比較、CSV出力
非機能要件: レスポンシブ対応、セキュリティ対策、保守性
技術制約: お名前ドットコム共用サーバー対応（PHP 8.x, MySQL 8.x）

2. チュートリアル作成（Day 0）

要件定義書をもとに、実装手順をステップバイステップで整理。これにより手戻りが大幅に減少しました。

3. 実装（Day 1 - Day 2）

Day 1: バックエンド + 基本UI

データベース設計（locations, observations, climate_normals）
RESTful API実装（7エンドポイント）
地図表示とマーカー機能

Day 2: グラフ機能 + セキュリティ

Chart.js統合
3本線比較グラフ実装
セキュリティテスト作成と全項目パス

4. セキュリティテスト（Day 2）

自動テストスクリプトを作成し、本番デプロイ前に脆弱性を徹底チェック。

テスト項目

  1. SQLインジェクション対策（2項目）
  2. XSS対策（1項目）
  3. 認証情報保護（2項目）
  4. APIエンドポイント（3項目）
  5. バリデーション（2項目）
  6. ファイルパーミッション（2項目）

詰まったポイントとAIによる解決策
Issue 1: NaN表示問題
問題: Chart.jsで平年値がNaNと表示される

原因: APIレスポンスのパスが間違っていた

// ❌ 間違い
const climateAvg = data.climate_avg_temp

// ✅ 正解
const climateAvg = data.climate_normal.avg_temp

解決: Claude Codeがデバッグログを追加し、データパスを特定してくれました。

Issue 2: XSSテスト失敗
問題: <script>タグは除去されているのに、テストが失敗

原因: JSONレスポンスに改行が含まれ、grepがマッチしない

  • ❌ 失敗
echo "$RESPONSE" | grep -q '"success":true'
  • ✅ 成功

RESPONSE_COMPACT=(echo "RESPONSE" | tr -d '\n')
echo "$RESPONSE_COMPACT" | grep -q 'success.*true'


解決: Claude Codeがテストスクリプトのパターンマッチングを修正してくれました。

Issue 3: CSV出力の平年値更新
問題: フロントエンドは最高・最低気温表示なのに、CSVは平均気温のまま

解決: APIのCSV出力ロジックを修正し、ヘッダーとデータを統一
```js
// ヘッダー行
fputcsv($output, [
    '日付', '地点名', '緯度', '経度', 
    'LST(℃)', 'NDVI', 
    '平年値_最高(℃)', '平年値_最低(℃)'  // 更新
]);

まとめ：AI時代の開発で大切なこと

1. 記録を公開しておく

ブログやGitHubに開発記録を残すことで、AIへの指示が劇的に効率化されます。

📝 技術ブログ → データ処理方法の参照
🐙 GitHubリポジトリ → 過去の実装パターンの再利用
📋 要件定義書 → 手戻り防止

2. 事前リサーチを徹底する

AIに作業を依頼する前に、テーマについて深く対話・リサーチすることで、要件定義の質が上がります。

3. 「引き算」の開発思想

機能を盛り込みすぎず、本当に必要なものだけに絞ることで：

🚀 開発速度が上がる
🛡️ セキュリティリスクが減る
🔧 保守性が向上する

4. セキュリティをないがしろにしない

公開前提のアプリケーションでは、セキュリティテストを自動化し、継続的にチェックすることが重要です。

次のステップ

お名前ドットコムサーバーへのデプロイ
JAXA G-Portal APIとの自動連携
リアルタイム通知機能（温度異常検出時）
PWA化（オフライン対応）

おわりに

AI（Claude Code）と協働することで、わずか2日間で実用的な農業DXツールを開発できました。

重要なのは、AIに丸投げするのではなく、人間が設計思想と要件を明確にすることです。その上で、AIに実装の詳細を任せることで、驚くほど高速に開発が進みます。

「自分もAIで農業DXをやってみたい」と思った方は、ぜひこのリポジトリを参考にしてみてください。質問があれば、GitHubのIssuesでお待ちしています！

リンク

📦 GitHubリポジトリ: https://github.com/hiroAkikoDy/satellite-data-viewer
📄 セキュリティチェックリスト: SECURITY_CHECKLIST.md
🚀 デプロイメントガイド: DEPLOYMENT.md
技術スタック: PHP 8.x, MySQL 8.x, Leaflet.js 1.9.4, Chart.js 4.4.1
開発期間: 2日間
セキュリティテスト: 12/12 PASSED ✅
開発者: Koga Hiroaki with Claude Sonnet 4.5

Discussion