koeyacho - 橋梁点検 音声入力システム

橋梁点検の現場で、損傷名や寸法などのデータを音声で入力し、リアルタイムでGoogleスプレッドシートに記録するためのウェブアプリケーションです。 ポケモンタイプチェッカーのUIを参考に、現場での使いやすさを重視したダーク/ライトテーマ切り替え可能なデザインを採用しています。

✨ 機能

• 音声入力: 「主桁、腐食、0.3ミリ」のように話しかけるだけでデータを解析・入力。
• オフライン対応: 電波の届かない橋梁下でもデータ入力が可能。オンライン復帰時に一括同期。
• 複数橋対応: Google Driveのフォルダと連携し、複数の橋（スプレッドシート）を管理。
• リアルタイム確認: 入力したデータはその場で画面リストに表示。
• CSV出力: 記録したデータをCSV形式でダウンロード可能。

🚀 セットアップガイド

1. Google Driveの準備

1. Google Driveに 「点検データ」 という名前のフォルダを作成します。
2. このフォルダの ID（URLの末尾 folders/ 以下の文字列）を控えておきます。
3. 必要に応じて、年度や班ごとにサブフォルダを作成し、その中に点検用の 空のスプレッドシート を作成してください。

2. GASバックエンドのデプロイ

1. 任意のGoogleスプレッドシートを開き、拡張機能 > Apps Script を開きます。
2. このリポジトリの gas_backend.js の内容をコピーして貼り付けます。
3. コード内の TARGET_FOLDER_ID に、手順1で控えたフォルダIDを設定します。
4. スクリプト プロパティ に以下を設定します。
   • GEMINI_API_KEY: Gemini APIキー
   • LOOKUP_SPREADSHEET_ID: 参照用GoogleスプレッドシートID
5. LOOKUP_SPREADSHEET_ID で指定する参照用Googleスプレッドシートには、部材リスト、損傷リスト シートを用意してください。
   • 部材一覧: B:F 列
   • 損傷番号: K 列
   • 損傷名: L 列
6. デプロイ > 新しいデプロイ を選択します。
   • 種類: ウェブアプリ
   • ユーザー: 自分
   • アクセス: 全員（誰でもアクセス可能）
7. 発行された ウェブアプリURL をコピーします。

3. 一括作成ツールの準備（オプション）

1. 別のスプレッドシートを用意し、Apps Scriptに batch_create_sheets.js を貼り付けます。
2. TARGET_FOLDER_ID を設定します。
3. スプレッドシートをリロードするとメニューに「一括作成」が表示されます。これを使って大量の点検用ファイルを一括生成できます。

4. アプリの起動

1. iPhoneのSafariなどで、デプロイされたアプリのページ（GitHub Pages URL）を開きます。
2. 共有 ボタン > ホーム画面に追加 をタップします。
3. ホーム画面のアイコンからアプリを起動します。
4. 設定画面で手順2の GASウェブアプリURL を入力して保存します。
5. 「🔄 更新」ボタンを押し、橋リストが表示されれば準備完了です！

📱 使い方

1. 橋の選択: リストから点検する橋を選びます。
2. 場所の選択: 部位（下面、下部工など）と径間を選択します。
3. 音声入力: マイクボタンを押し、「部材名」「変状名」「寸法」を話します。
   • 例：「床版、ひび割れ」
   • 例：「主桁、腐食、幅30ミリ」
4. 記録: 内容が正しければ「✓ 記録する」ボタンを押します。
5. 同期: オフライン時はデータが端末にたまります。電波が入る場所で「クラウドに同期」ボタンを押してください。

⚠️ 注意事項

• プライベートブラウズモードではLocalStorageが保存されない場合があるため、通常モードで使用してください。
• 音声認識はブラウザの機能（Web Speech API）を使用しているため、通信環境や端末によって精度が異なる場合があります。

📂 ファイル構成

• index.html: アプリ本体（フロントエンド）
• gas_backend.js: Google Apps Script バックエンド用コード
• batch_create_sheets.js: スプレッドシート一括作成ツール用コード
• koeyacho_dictionary.csv: （参考）辞書データの元データ