Geminiに相談するだけでGoogle Apps Script Web アプリを作る相談のコツ

中村州男　著
毎日無料のGeminiに相談するだけで作るGoogle Apps Script Webアプリ

Geminiの相談相手は，相談内容によって，黒色枠は「Proモード」（賢い）必須，灰色枠は「思考モード」（普通）でも可能，のように使い分け，できる限り，「高速モード」は使わない方がよい。なお，下記は，2026.4.15時点のやり取りである。Geminiは，日々成長するので，回答内容は参考程度に留めて頂きたい。

第1章相談準備

あなたはプロのWebエンジニアおよびシステムエンジニアです。
Gemini API を使って「入力された依頼文に基づいて，最小0個から最大10個のファイルまたはURLをアップロードして，生成結果を表示する」GASのWebアプリを省略せずに作ってください。

Gemini APIを利用して、0〜10個のファイル・URLとテキストを送信できるGASのWebアプリですね。

設計・コーディングの基準に則り、各種変数・定数・関数名、ならびにHTMLの`name`属性等を日本語で統一し、処理履歴を記録する際も`getActiveSpreadsheet()`は使わず、`DriveApp`を利用してファイル名からスプレッドシートを特定するロジックを実装しています。コードは一切省略せず記述しています。

以下の2つのファイルを作成・保存し、デプロイしてください。

### 1. コード.gs（サーバー側処理）

事前に、GASエディタの歯車マーク（プロジェクトの設定）から、スクリプトプロパティにプロパティ名 `GEMINI_API_KEY`、値にご自身のAPIキーを設定してください。

```javascript
（コードは省略）
```

### 2. インデックス.html（クライアント側UI）

フロントエンドでBase64エンコード処理を行い、動的に0〜10個のフォーム項目を追加・削除できるように設計しています。

```html
（コードは省略）
```

※Gemini API KEYの設定をして，コードを貼り付けて実行するが，エラーが出る。
そこで，表示されたエラーメッセージをコピーして，そのまま貼り付けて相談する。

Gemini API エラー: models/gemini-1.5-flash is not found for API version v1beta, or is not supported for generateContent. Call ListModels to see the list of available models and their supported methods.

ご不便をおかけしております。そのエラーは、指定したモデル名（`gemini-1.5-flash`）が現在のAPIバージョン（`v1beta`）において、すでに**非推奨（デプロイ終了）**となっているか、あるいは新しいモデル名への移行が必要であることを示しています。

2026年現在の最新の安定版モデルである **`gemini-2.0-flash`** または、より高度な推論が可能な **`gemini-2.5-flash`** に書き換えることで解決します。

「コード.gs」内のモデル指定箇所を以下のように修正してください。

### 修正後の「コード.gs」（主要部分のみ抜粋）

```javascript
function ジェミニにリクエスト送信(依頼文, 添付情報配列) {
  const スクリプトプロパティ = PropertiesService.getScriptProperties();
  const ジェミニ_エーピーアイ_キー = スクリプトプロパティ.getProperty('GEMINI_API_KEY');

  if (!ジェミニ_エーピーアイ_キー) {
    return "エラー: スクリプトプロパティに「GEMINI_API_KEY」が設定されていません。";
  }

  // 【修正ポイント】2026年現在の推奨モデル名に変更
  // 安定性を重視する場合は gemini-2.0-flash、最新機能を使う場合は gemini-3-flash-preview 等
  const ジェミニ_モデル名 = "gemini-2.0-flash"; 
  const エンドポイント_ユーアールエル = `https://generativelanguage.googleapis.com/v1beta/models/${ジェミニ_モデル名}:generateContent?key=${ジェミニ_エーピーアイ_キー}`;

  // （以下、以前のコードと同じ）
```

### なぜエラーが出たのか？
Gemini APIは進化が速く、特定の「エイリアス（モデル名）」は数ヶ月から1年程度で新しいバージョンに置き換わります。

* **`gemini-1.5-flash`**: 2025年後半に多くのリージョンで非推奨となりました。
* **`gemini-2.0-flash`**: 現在のマルチモーダル処理（画像・URL解析）における標準的なモデルです。
* **`gemini-2.5-pro`**: より複雑なプログラミングや、長大なデータの解析が必要な場合に選択します。

### 補足：モデル一覧の確認方法
もし上記でも同様のエラーが出る場合は、APIキーが対応しているモデルを直接確認できます。以下のコードをGASエディタに貼り付けて実行（`実行`ボタン押下）し、ログに出力される一覧から利用可能な名前を探してみてください。

```javascript
function 利用可能なモデルを確認() {
  const キー = PropertiesService.getScriptProperties().getProperty('GEMINI_API_KEY');
  const ユーアールエル = `https://generativelanguage.googleapis.com/v1beta/models?key=${キー}`;
  const 応答 = UrlFetchApp.fetch(ユーアールエル);
  console.log(応答.getContentText());
}
```

モデル名を変更するだけで、UI（HTML側）の修正は不要です。再度デプロイ（または「デプロイを管理」から「編集」→「新しいバージョン」として保存）して、動作を確認してみてください。

今回の修正で、最新の高速なレスポンスが得られるようになるはずです。他に気になる点はありますか？

※ジェミニ_モデル名に最新版の「gemini-3-flash-preview」を貼り付けて，実行すると正しく動作する。
Geminiに相談するだけでGoogle Apps Script Webアプリが作れる！

Geminiに相談するだけで作る初めてのWebアプリの「依頼文」の内容

「依頼文」だけ，「音声ファイルを選択して，議事録を起こす」など，自由に試してください。

画像ファイルの中心にあるモノの名詞が以下のPDFファイルにある1列目の品目の中にある名詞と一致する分別区分と備考(注釈)を全て列挙せよ。https://www.city.kochi.kochi.jp/uploaded/attachment/163134.pdf

もし，PDFファイルが見つからない等の回答がある場合は，年度が変わってURLリンクが切れている可能性があります。
その場合には，「高知市家庭ごみ辞典」で検索して，正しいPDFファイルをダウンロードできるURLを指定してください。

第2章と第3章は，同一チャット内の継続した相談です。

第2章ログイン相談

2−1

. これはおススメできない相談内容ですので，もし相談する場合は「思考モード」で

GAS Webアプリのログイン画面を作りたい。

Google Apps Script（GAS）で独自のログイン画面を作るのは、社内ツールや個人用アプリのセキュリティを少し高めたい時に非常に有効な手段ですね。

GAS自体には「ログイン機能」というコンポーネントは用意されていないため、**「Googleスプレッドシートをデータベース代わりにして、入力されたID/PWと照合する」**という仕組みを自作するのが一般的です。

以下に、シンプルで拡張しやすい実装手順をまとめました。

---

## 1. 準備：スプレッドシート（ユーザーマスタ）
まずは、認証情報を保存するシートを作成します。

* **シート名:** `users`
* **A列:** `userid`
* **B列:** `password`

---

## 2. サーバー側処理（Code.gs）
`doGet` で画面を表示し、JavaScriptから呼び出される「照合関数」を用意します。

```javascript
（コードは省略）
```

---

## 3. クライアント側（index.html）
ログインフォームを作成します。ここではCSSフレームワーク（Bootstrapなど）を使うと手軽に見栄えが良くなります。



```html
（コードは省略）
```

---

## 4. ログイン後の画面（main.html）
認証に成功した時に表示したい内容を記述します。

```html
（コードは省略）
```

---

## 5. デプロイ時の注意点
GASをWebアプリとして公開する際、設定を以下のようにするのがコツです。

1.  **次のユーザーとして実行:** 「自分（作成者）」
    * これで、利用者がスプレッドシートへのアクセス権を持っていなくても、スクリプト経由でID/PWの照合が可能になります。
2.  **アクセスできるユーザー:** 「全員（Anyone）」または「全員（Googleアカウント所有者）」

---

### 💡 ワンポイント・アドバイス
この方法はシンプルですが、本格的な運用をするなら以下の点に注意してください。

* **セキュリティ:** パスワードを平文（そのままの文字）でスプレッドシートに保存するのは、開発段階なら良いですが、本番ではハッシュ化（暗号化のようなもの）して保存するのがベターです。
* **セッション管理:** このコードは「画面を書き換えているだけ」なので、ブラウザをリロードするとログイン前に戻ってしまいます。継続的なログイン状態を維持したい場合は、`PropertiesService` やブラウザの `localStorage` を組み合わせる必要があります。

まずはこの最小構成で「動くもの」を作ってみるのが一番の近道ですよ。

今回のログイン画面は、特定のグループ（社内など）で使う予定のものですか？それとも不特定多数向けですか？

※画面を作るごとにHTMLファイルが増えるのは避けたい。
また，スプレッドシートのファイル名を定数で指定してデータベースとして利用したい。
最終的には，販売管理（得意先や商品のマスター管理・売上管理・請求管理・販売分析）のアプリにしたい。
これらの想い（要望）は，事前に伝えないとGeminiが忖度できないので…

GAS Webアプリのログイン画面を作りたい。ただし，画面を作るごとにHTMLファイルが増えるのは避けたい。また，スプレッドシートのファイル名を定数で指定してデータベースとして利用したい。最終的には，販売管理（得意先や商品のマスター管理・売上管理・請求管理・販売分析）のアプリにしたい。

ご要望の「1ファイル構成（SPA）」「ファイル名指定によるDB連携」「将来の拡張性」をすべて盛り込んだ、実戦的なテンプレートを作成しました。

前回の権限エラーを回避するため、`DriveApp`を適切に呼び出すロジックと、コード内でファイル名を定数として管理する構成にしています。

---

### 1. アプリケーションの全体構造（SPA）

複数の画面を作る代わりに、一つのHTML内で`<div>`を切り替える「シングルページアプリケーション（SPA）」方式を採用します。これにより、ファイル管理が劇的に楽になります。



---

### 2. Code.gs（サーバーサイド）

スプレッドシート名を定数で管理し、動的にIDを取得する仕組みです。

```javascript
（コードは省略）
```

---

### 3. index.html（クライアントサイド：SPA構成）

この1ファイルの中に「ログイン」「メニュー」「各機能」をすべて詰め込みます。

```html
（コードは省略）
```

---

### 4. 運用のポイント

1.  **スプレッドシートの準備**: 
    Googleドライブ上に`販売管理データベース`という名前でファイルを作成し、`Users`シートと`Customers`シートを作成しておいてください。
2.  **権限の承認**: 
    前回の回答通り、エディタで一度実行して`DriveApp`の権限を承認してください。
3.  **拡張のしやすさ**: 
    新しい機能（例：請求管理）を追加したいときは、`index.html`に`<div id="page-billing">`を1つ追加し、ナビゲーションにリンクを増やすだけです。ファイルは一切増えません。

### 動作シミュレーション
1つのファイルでどのように画面が切り替わるのか、以下のシミュレーターで体験してみてください。

この構成をベースにすれば、GASの制限（ファイル管理の煩雑さ）を回避しつつ、大規模なシステムへ成長させることが可能です。次はどの機能（得意先入力フォームや売上計算など）を具体化したいですか？

※貼り付けて，デプロイすると，動作する。しかし，…

2−2

3回間違えたらロック，メールによる2段階認証を追加したい。

販売管理システムに「3回失敗でロック」と「メールによる2段階認証」を追加すると、一気に業務用アプリとしての信頼性が高まりますね。

これを実現するには、**スプレッドシートの項目追加**と、**一時的な認証コードを保存する仕組み（PropertiesService）**の利用がポイントになります。

### 1. スプレッドシート（Usersシート）の準備

`Users`シートの項目を以下のように構成してください（列順は任意ですが、コードと合わせてください）。

| A: ID | B: パスワード | C: 名前 | D: メールアドレス | E: 失敗回数 | F: ロック状態 |
| :--- | :--- | :--- | :--- | :--- | :--- |
| admin | pass123 | 管理者 | user@example.com | 0 | (空) |

---

### 2. Code.gs（サーバーサイドのロジック）

認証フローを「パスワード確認」→「コード送信」→「コード検証」の2ステップに分割します。

```javascript
（コードは省略）
```

---

### 3. index.html（UIの更新）

「認証コード入力画面」を新しく追加します。

```html
（コードは省略）
```

---

### 実装のポイント

1.  **PropertiesService**: 
    サーバー側にデータを一時保存する機能です。これを使うことで、ブラウザ側にコードを持たせることなく安全に検証ができます。
2.  **ロックの解除**: 
    ロックされた（`LOCKED`になった）ユーザーは、スプレッドシートの「F列」を手動で消去すれば再度ログインできるようになります。
3.  **セキュリティ**: 
    `MailApp.sendEmail` を使うため、デプロイ時に「メール送信の権限」を承認する必要があります。

これで、銀行や大手SaaSのような堅牢なログインフローが完成します。次は、マスター管理（得意先情報の登録など）の具体的な画面作成に進みますか？

※指定された部分を正しく貼り付けて，デプロイすれば動作するはずだが，面倒。さらに…

その前に，排他制御の搭載と，2段階認証後のメニューの表示は，得意先マスター・商品マスター・売上管理・請求管理・販売分析の5項目にしてください。

ご要望を反映し、**「排他制御（LockService.getScriptLock）」**の導入と、**「5つのメニュー項目」**へのUI整理を行いました。

GASにおける排他制御は、複数のユーザーが同時に同じデータを更新してデータが壊れるのを防ぐために非常に重要です。

### 1. Code.gs（排他制御の追加）

`LockService` を使い、スプレッドシートへの書き込み（ログイン失敗回数の更新やデータの保存など）が発生する際に、他の処理を待機させる仕組みを組み込みます。

```javascript
（コードは省略）
```

---

### 2. index.html（5つのメニュー項目の整理）

メニューを指定の5項目（得意先・商品・売上・請求・分析）に整理し、SPAとして切り替えられるようにします。

```html
（コードは省略）
```

---

### 今回の更新のポイント

1.  **`LockService` の活用**: 
    `getDbWithLock` を通じて、DB操作が競合しないようにしました。誰かがログイン処理（書き込み）をしている間、他の人は30秒間待機し、順次処理されます。
2.  **UIの整理（5項目）**: 
    ご指定いただいた「得意先マスター」「商品マスター」「売上管理」「請求管理」「販売分析」の5つのページ切り替えボタンを設置しました。
3.  **セッション管理の擬似化**: 
    `currentUid` を保持することで、2段階認証時にどのユーザーのコードを検証すべきか特定しています。

### 排他制御のイメージ
複数のユーザーが同時に操作したときの動きを理解するための図解です。



次は、具体的に「得意先マスター」の登録・一覧表示機能を作っていきますか？それとも「売上入力」のフォーム作成から始めますか？

※指定された部分を正しく貼り付けて，デプロイすれば動作するはずだが，面倒。そこで…

2−3

すみません。ここまでの全ソースコードを表示してください。

これまでの実装（SPA構成、スプレッドシートDB連携、3回失敗ロック、メール2段階認証、排他制御、5つのメニュー項目）をすべて統合した、**完全版のソースコード**をまとめました。

コピー＆ペーストしてすぐに使えるように、`Code.gs` と `index.html` の2ファイルに整理しています。

---

### 1. サーバーサイド処理（`Code.gs`）

```javascript
/**
 * =========================================
 * 1. 基本設定
 * =========================================
 */
const DB_FILE_NAME = "販売管理データベース"; // 連携するスプレッドシート名
const AUTH_CODE_EXPIRE_MIN = 5;         // 2段階認証コードの有効期限（分）

/**
 * =========================================
 * 2. Webアプリ起動処理
 * =========================================
 */
function doGet() {
  return HtmlService.createTemplateFromFile('index')
    .evaluate()
    .setTitle('販売管理システム')
    .addMetaTag('viewport', 'width=device-width, initial-scale=1')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

/**
 * =========================================
 * 3. データベース（スプレッドシート）取得処理
 * =========================================
 */
function getDbWithLock() {
  const lock = LockService.getScriptLock();
  try {
    // 競合を防ぐため最大30秒間待機
    lock.waitLock(30000);
    
    const files = DriveApp.getFilesByName(DB_FILE_NAME);
    if (files.hasNext()) {
      return SpreadsheetApp.open(files.next());
    }
    throw new Error(`Googleドライブ内に「${DB_FILE_NAME}」が見つかりません。`);
  } catch (e) {
    throw new Error("現在システムが混み合っています。時間を置いてやり直してください。");
  }
}

/**
 * =========================================
 * 4. 認証処理 Step1（パスワード確認 ＆ メール送信）
 * =========================================
 */
function authenticateStep1(userId, password) {
  const lock = LockService.getScriptLock();
  try {
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName('Users');
    
    if (!sheet) return { success: false, message: "Usersシートが存在しません" };
    
    const data = sheet.getDataRange().getValues();
    
    // スプレッドシートの列構成（0:ID, 1:PW, 2:名前, 3:Email, 4:失敗回数, 5:ロック状態）
    for (let i = 1; i < data.length; i++) {
      if (data[i][0].toString() === userId) {
        
        // ① ロック状態の確認
        if (data[i][5] === "LOCKED") {
          return { success: false, message: "アカウントがロックされています。管理者に連絡してください。" };
        }

        // ② パスワードの照合
        if (data[i][1].toString() === password) {
          // 成功：失敗回数をリセット
          sheet.getRange(i + 1, 5).setValue(0);
          
          // 2段階認証コード生成（6桁の乱数）
          const code = Math.floor(100000 + Math.random() * 900000).toString();
          
          // サーバー側にコードを一時保存
          const props = PropertiesService.getScriptProperties();
          props.setProperty("2FA_" + userId, JSON.stringify({
            code: code,
            expiry: new Date().getTime() + (AUTH_CODE_EXPIRE_MIN * 60000)
          }));

          // メール送信
          const email = data[i][3];
          MailApp.sendEmail({
            to: email,
            subject: "【販売管理システム】認証コードのご案内",
            body: `認証コードは [ ${code} ] です。\n${AUTH_CODE_EXPIRE_MIN}分以内に入力してください。`
          });

          return { success: true, needs2FA: true, userId: userId };
          
        } else {
          // 失敗：失敗回数をカウントアップ
          let failCount = Number(data[i][4] || 0) + 1;
          sheet.getRange(i + 1, 5).setValue(failCount);
          
          // 3回失敗でロック
          if (failCount >= 3) {
            sheet.getRange(i + 1, 6).setValue("LOCKED");
            return { success: false, message: "3回失敗したためアカウントをロックしました。" };
          }
          return { success: false, message: `パスワードが違います（あと${3 - failCount}回でロック）` };
        }
      }
    }
    return { success: false, message: "ユーザーIDが見つかりません。" };
  } catch (e) {
    return { success: false, message: "エラー: " + e.message };
  } finally {
    lock.releaseLock(); // 処理が終わったら必ずロックを解除
  }
}

/**
 * =========================================
 * 5. 認証処理 Step2（2段階認証コード検証）
 * =========================================
 */
function verify2FACode(userId, inputCode) {
  const props = PropertiesService.getScriptProperties();
  const storedData = props.getProperty("2FA_" + userId);
  
  if (!storedData) return { success: false, message: "セッションが切れました。最初からやり直してください。" };
  
  const auth = JSON.parse(storedData);
  const now = new Date().getTime();
  
  if (now > auth.expiry) {
    return { success: false, message: "認証コードの有効期限が切れています。" };
  }
  
  if (auth.code === inputCode) {
    props.deleteProperty("2FA_" + userId); // 使用済みコードを削除
    
    // ユーザー名を取得してログイン完了
    const lock = LockService.getScriptLock();
    try {
      const ss = getDbWithLock();
      const rows = ss.getSheetByName('Users').getDataRange().getValues();
      const userRow = rows.find(r => r[0].toString() === userId);
      return { success: true, userName: userRow[2] };
    } finally {
      lock.releaseLock();
    }
  } else {
    return { success: false, message: "認証コードが正しくありません。" };
  }
}

/**
 * =========================================
 * 6. 汎用データ取得（マスター管理等のため）
 * =========================================
 */
function getSheetData(sheetName) {
  const lock = LockService.getScriptLock();
  try {
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName(sheetName);
    if (!sheet) return [];
    return sheet.getDataRange().getValues();
  } catch (e) {
    return [];
  } finally {
    lock.releaseLock();
  }
}
```

---

### 2. クライアントサイド画面（`index.html`）

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <base target="_top">
  <style>
    /* ========== 全体設定 ========== */
    :root { --primary: #2c3e50; --bg: #f4f7f6; --accent: #3498db; }
    body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; background: var(--bg); color: #333; display: flex; flex-direction: column; height: 100vh; }
    .hidden { display: none !important; }
    
    /* ========== ログイン画面 ========== */
    #view-login { display: flex; justify-content: center; align-items: center; height: 100vh; }
    .login-box { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); width: 320px; }
    
    /* ========== メインレイアウト ========== */
    #view-main { display: flex; flex-direction: column; height: 100%; }
    
    /* ナビゲーションバー */
    nav { background: var(--primary); color: white; padding: 0 20px; display: flex; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
    nav h3 { margin-right: 30px; }
    nav ul { list-style: none; display: flex; gap: 5px; margin: 0; padding: 0; }
    nav li { padding: 15px 20px; cursor: pointer; transition: 0.2s; font-weight: bold; font-size: 14px; }
    nav li:hover { background: #34495e; border-radius: 4px; }
    .logout-btn { margin-left: auto; color: #e74c3c; }
    
    /* コンテンツエリア */
    main { flex: 1; padding: 20px; overflow-y: auto; }
    .card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
    
    /* ========== フォーム部品 ========== */
    input { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; }
    button { width: 100%; padding: 12px; background: var(--accent); color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 16px; margin-top: 10px; }
    button:disabled { background: #ccc; cursor: not-allowed; }
    button:hover:not(:disabled) { background: #2980b9; }
    
    #login-msg { color: #e74c3c; font-size: 13px; margin-top: 10px; font-weight: bold; text-align: center; }
  </style>
</head>
<body>

  <div id="view-login">
    <div class="login-box">
      <h2 style="text-align: center; margin-bottom: 20px;">販売管理システム</h2>
      
      <div id="step1">
        <label style="font-size: 12px; font-weight: bold;">ユーザーID</label>
        <input type="text" id="uid" placeholder="IDを入力">
        <label style="font-size: 12px; font-weight: bold;">パスワード</label>
        <input type="password" id="upw" placeholder="パスワードを入力">
        <button id="btn-login" onclick="onLoginStep1()">ログイン</button>
      </div>

      <div id="step2" class="hidden">
        <p style="font-size: 13px; color: #555;">登録されたメールアドレスに6桁の認証コードを送信しました。</p>
        <label style="font-size: 12px; font-weight: bold;">認証コード</label>
        <input type="text" id="auth-code" placeholder="123456" maxlength="6" style="text-align: center; font-size: 20px; letter-spacing: 5px;">
        <button id="btn-verify" onclick="onLoginStep2()">認証する</button>
        <a href="#" onclick="location.reload()" style="font-size: 12px; display: block; text-align: center; margin-top: 15px; color: #666;">最初からやり直す</a>
      </div>

      <p id="login-msg"></p>
    </div>
  </div>

  <div id="view-main" class="hidden">
    <nav>
      <h3>販売管理 v1.0</h3>
      <ul>
        <li onclick="showPage('customer')">得意先マスター</li>
        <li onclick="showPage('product')">商品マスター</li>
        <li onclick="showPage('sales')">売上管理</li>
        <li onclick="showPage('invoice')">請求管理</li>
        <li onclick="showPage('analysis')">販売分析</li>
      </ul>
      <div class="logout-btn" onclick="location.reload()" style="cursor:pointer; padding: 15px; font-weight: bold;">ログアウト</div>
    </nav>
    
    <main>
      <div id="p-home" class="page card">
        <h2>ようこそ、<span id="display-name"></span> さん</h2>
        <p>上部のメニューから操作を選択してください。</p>
      </div>

      <div id="p-customer" class="page card hidden">
        <h2>得意先マスター</h2>
        <p>得意先の一覧表示、新規登録、編集を行う画面をここに構築します。</p>
      </div>
      
      <div id="p-product" class="page card hidden">
        <h2>商品マスター</h2>
        <p>商品の価格や在庫、カテゴリを管理する画面をここに構築します。</p>
      </div>
      
      <div id="p-sales" class="page card hidden">
        <h2>売上管理</h2>
        <p>日々の売上伝票（得意先・商品・数量の入力）を登録する画面をここに構築します。</p>
      </div>
      
      <div id="p-invoice" class="page card hidden">
        <h2>請求管理</h2>
        <p>締め日ごとの請求書発行や、入金消込を行う画面をここに構築します。</p>
      </div>
      
      <div id="p-analysis" class="page card hidden">
        <h2>販売分析</h2>
        <p>売上推移や商品別売上ランキングなどのグラフを表示する画面をここに構築します。</p>
      </div>
    </main>
  </div>

  <script>
    let currentUserId = "";

    // 1. パスワード認証をリクエスト
    function onLoginStep1() {
      const uid = document.getElementById('uid').value;
      const upw = document.getElementById('upw').value;
      const btn = document.getElementById('btn-login');
      const msg = document.getElementById('login-msg');
      
      if (!uid || !upw) {
        msg.innerText = "IDとパスワードを入力してください。";
        return;
      }

      btn.disabled = true;
      btn.innerText = "確認中...";
      msg.innerText = "";
      
      google.script.run
        .withSuccessHandler(res => {
          btn.disabled = false;
          btn.innerText = "ログイン";
          
          if (res.success && res.needs2FA) {
            currentUserId = res.userId;
            document.getElementById('step1').classList.add('hidden');
            document.getElementById('step2').classList.remove('hidden');
          } else {
            msg.innerText = res.message;
          }
        })
        .authenticateStep1(uid, upw);
    }

    // 2. 2段階認証コードをリクエスト
    function onLoginStep2() {
      const code = document.getElementById('auth-code').value;
      const btn = document.getElementById('btn-verify');
      const msg = document.getElementById('login-msg');
      
      if (!code) {
        msg.innerText = "コードを入力してください。";
        return;
      }

      btn.disabled = true;
      btn.innerText = "認証中...";
      msg.innerText = "";
      
      google.script.run
        .withSuccessHandler(res => {
          btn.disabled = false;
          btn.innerText = "認証する";
          
          if (res.success) {
            // ログイン成功：メイン画面へ切り替え
            document.getElementById('display-name').innerText = res.userName;
            document.getElementById('view-login').classList.add('hidden');
            document.getElementById('view-main').classList.remove('hidden');
            showPage('home'); // 初期はホームを表示
          } else {
            msg.innerText = res.message;
          }
        })
        .verify2FACode(currentUserId, code);
    }

    // 3. メニュー切り替え処理（SPA）
    function showPage(pageId) {
      // 全ての .page 要素を隠す
      document.querySelectorAll('.page').forEach(page => {
        page.classList.add('hidden');
      });
      // 指定されたIDのページだけ表示する
      document.getElementById('p-' + pageId).classList.remove('hidden');
    }
  </script>
</body>
</html>
```

---

### ⚠️ 動作させるための最終確認（スプレッドシートの準備）

このコードを動かすためには、Googleドライブの直下に **`販売管理データベース`** という名前のスプレッドシートが必須です。
ファイルを作成し、以下の通りに **`Users`** というシートを作成してください。

| A列 (ID) | B列 (パスワード) | C列 (名前) | D列 (メールアドレス) | E列 (失敗回数) | F列 (ロック状態) |
| :--- | :--- | :--- | :--- | :--- | :--- |
| **admin** | **pass123** | **管理者** | **あなた自身のメールアドレス※** | `0` または空白 | 空白 |

> ※**重要:** D列には必ず**あなた自身が受信できる実在のメールアドレス**を入力してください（ここに2段階認証のコードが届きます）。

上記をセットし、GASエディタで「新しいデプロイ」を行えば、安全で本格的なログイン画面が動作します！
次は、各メニュー（得意先マスターなど）の中身の作り込みですね。どこから始めましょうか？

※これまでのコードを全て削除して，「Code.gs」と「index.html」を貼り付けて，デプロイすると，ログイン後にエラーが出る。
そこで，エラーメッセージをコピーして…

エラー: MailApp.sendEmail を呼び出す権限がありません。必要な権限: https://www.googleapis.com/auth/script.send_mail。詳しくは、https://developers.google.com/apps-script/guides/support/troubleshooting#authorization-is をご覧ください。

メール送信機能（2FA）を追加したことで、Googleから**「このアプリが勝手にメールを送っても良いですか？」**という確認が必要になった状態ですね。

前回の `DriveApp` の時と同様、以下の手順で**一度だけ承認作業**を行えば解決します。

---

### 1. エディタで承認を実行する

もっとも確実なのは、エディタ上で関数を「実行」して承認画面を出すことです。

1.  GASエディタを開きます。
2.  画面上部の関数選択ドロップダウンで **`authenticateStep1`** を選択します。
3.  **「実行」** をクリックします。
4.  「承認が必要」というポップアップが出るので、**「権限を確認」** をクリックします。
5.  自分のGoogleアカウントを選び、**「詳細」→「（プロジェクト名）に移動」→「許可」** の順に進めます。

> **※補足:** `authenticateStep1` を実行すると、引数（IDやPW）がないためログにエラーが出るかもしれませんが、**「許可」ボタンを押した時点で権限付与は成功**しています。

---

### 2. マニフェストファイル（appsscript.json）の確認

もし上記でうまくいかない場合、またはWebアプリとして「全員」に公開している場合は、マニフェストファイルに直接スコープを書き込むのが確実です。

1.  設定（歯車アイコン）から **「「appsscript.json」マニフェスト ファイルをエディタで表示する」** をオンにします。
2.  `appsscript.json` を開き、`oauthScopes` を以下のように更新します。

```json
{
  "timeZone": "Asia/Tokyo",
  "dependencies": {},
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "webapp": {
    "executeAs": "USER_DEPLOYING",
    "access": "ANYONE"
  },
  "oauthScopes": [
    "https://www.googleapis.com/auth/drive",
    "https://www.googleapis.com/auth/spreadsheets",
    "https://www.googleapis.com/auth/script.send_mail",
    "https://www.googleapis.com/auth/script.container.ui"
  ]
}
```

---

### 3. 【重要】新しいバージョンでデプロイし直す

権限を承認した後は、**WebアプリのURLを最新の状態に更新**する必要があります。

1.  右上の **「デプロイ」** ＞ **「デプロイを管理」** をクリック。
2.  現在のデプロイの **「鉛筆アイコン（編集）」** をクリック。
3.  バージョンを **「新バージョン」** に変更して、再度 **「デプロイ」** をクリック。

---

### なぜこの手順が必要か
Google Apps Scriptは、ユーザーのプライバシーを守るために「メールを送信する」「ドライブを操作する」といった動作を厳格に管理しています。
今回は以下の3つの大きな権限を組み合わせています。

* **DriveApp**: データベース（スプレッドシート）をファイル名で探すため
* **SpreadsheetApp**: データを読み書きするため
* **MailApp**: 2段階認証コードを送るため

これでログインができるようになります。無事にログインできたら、次は5つのメニューのどれから作り込んでいきましょうか？（例：まずは「得意先マスター」の登録画面など）

※しかし，アクセス承認できないので…

authenticateStep1 を実行しても，アクセス承認の画面が出ませんが。

承認画面（許可プロンプト）が出ないのは、GASのエディタが「このコードは本当に実行されるのか？」を判断する際に、時々うまく検知できないことが原因です。特に引数（`userId` など）が必要な関数をそのまま実行すると、途中でエラーになってしまい、承認フローまでたどり着かないことがあります。

確実に承認画面を出すための**「権限強制トリガー」**という小技を使いましょう。

---

### 1. 権限を強制的に呼び出す専用関数を作る

以下のコードを `Code.gs` の一番下に貼り付けてください。

```javascript
/**
 * 承認画面を出すためだけのダミー関数
 * これを実行すると、使っている全てのサービスへの許可を一度に求められます
 */
function askPermission() {
  // 1. ドライブ権限
  DriveApp.getFilesByName('test');
  // 2. スプレッドシート権限
  SpreadsheetApp.getActive();
  // 3. メール送信権限
  MailApp.sendEmail(Session.getActiveUser().getEmail(), '権限テスト', 'これはテストです');
  
  console.log("全ての権限が承認されています！");
}
```

### 2. 手順

1.  GASエディタ上の関数選択で **`askPermission`** を選択します。
2.  **「実行」** ボタンを押します。
3.  今度はかなりの確率で「承認が必要」という画面が出てくるはずです。

---

### それでも出ない場合にチェックすること

#### ① ポップアップブロックを疑う
ブラウザのURLバーの右端に「ポップアップがブロックされました」というアイコン（赤い×印など）が出ていませんか？ 承認画面は別ウィンドウで開くため、ブラウザに止められている可能性があります。**「常に許可」** に設定してください。

#### ② すでに「承認済み」になっていないか確認
実はもう承認が終わっているかもしれません。
* エディタの左側にある **「実行数」** （時計アイコン）をクリックします。
* 最近の実行履歴を見て、ステータスが **「完了」** になっていれば承認は済んでいます。
* 逆に **「失敗」** や **「未承認」** となっていたら、そこをクリックしてエラー内容を確認してください。

#### ③ プロジェクトの設定（スコープ）を確認
サイドバーの「プロジェクトの設定（歯車アイコン）」をクリックし、下の方にある **「Google Cloud Platform (GCP) プロジェクト」** が「標準」になっているか確認してください（通常はデフォルトのままで大丈夫ですが、変更していると挙動が変わります）。

---

### 承認が終わったら...
無事に `askPermission` が完了（ログに「全ての権限が承認されています！」と表示）したら、**再度「新しいデプロイ」**を行ってください。

> **💡 なぜ「新しいデプロイ」が必要か？**
> GASのWebアプリは、デプロイした瞬間の権限状態を「スナップショット」として保持します。後からエディタで権限を追加しても、デプロイし直さない限り、Webアプリ側（公開URL側）にはその権限が伝わらないからです。

これでメールが飛ぶようになるはずです！ ログインできるようになったら教えてくださいね。次は「得意先マスター」の作成など、アプリの中身に入りましょう。

※アクセス承認し，再度，デプロイしてから，実行すると，ログイン後のメニュー表示まで正しく動作する。
Geminiに相談するだけでGoogle Apps Script Webアプリが作れる！

第3章マスター相談

3-1

マスターの基本機能を搭載した得意先マスター（自動付番の得意先コード・得意先名・郵便番号・住所・電話番号）の操作を追加してください。

「得意先マスター」の基本機能として、**「一覧表示」「新規登録（自動付番）」「編集」「削除」**のすべての操作を統合したコードを作成しました。

今回のポイントは、スプレッドシートの最終行を確認して「C001, C002...」のように自動でコードを割り振るロジックと、入力フォームの制御です。

---

### 1. スプレッドシート（Customersシート）の準備

スプレッドシートに **`Customers`** という名前のシートを作成し、1行目（見出し）を以下のように設定してください。

| A列 | B列 | C列 | D列 | E列 |
| :--- | :--- | :--- | :--- | :--- |
| **得意先コード** | **得意先名** | **郵便番号** | **住所** | **電話番号** |

---

### 2. Code.gs（サーバーサイドの追加）

既存の `Code.gs` の末尾に追加してください。

```javascript
/**
 * 得意先一覧の取得
 */
function getCustomers() {
  const data = getSheetData('Customers');
  if (data.length === 0) return [];
  // ヘッダーを除いたデータを返す
  return data.slice(1);
}

/**
 * 得意先の保存（新規登録・更新）
 */
function saveCustomer(customer) {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000);
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName('Customers');
    const data = sheet.getDataRange().getValues();
    
    let targetRow = -1;

    // 新規登録か更新かの判定
    if (!customer.code) {
      // --- 新規登録（自動付番） ---
      let maxNum = 0;
      for (let i = 1; i < data.length; i++) {
        const codeNum = parseInt(data[i][0].toString().replace('C', ''), 10);
        if (codeNum > maxNum) maxNum = codeNum;
      }
      customer.code = "C" + ("000" + (maxNum + 1)).slice(-3); // 例: C001
      targetRow = sheet.getLastRow() + 1;
    } else {
      // --- 更新 ---
      for (let i = 1; i < data.length; i++) {
        if (data[i][0] === customer.code) {
          targetRow = i + 1;
          break;
        }
      }
    }

    if (targetRow > 0) {
      sheet.getRange(targetRow, 1, 1, 5).setValues([[
        customer.code, 
        customer.name, 
        customer.zip, 
        customer.address, 
        customer.tel
      ]]);
      return { success: true, code: customer.code };
    }
    return { success: false, message: "対象データが見つかりません" };
  } catch (e) {
    return { success: false, message: e.toString() };
  } finally {
    lock.releaseLock();
  }
}

/**
 * 得意先の削除
 */
function deleteCustomer(code) {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000);
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName('Customers');
    const data = sheet.getDataRange().getValues();
    
    for (let i = 1; i < data.length; i++) {
      if (data[i][0] === code) {
        sheet.deleteRow(i + 1);
        return { success: true };
      }
    }
    return { success: false };
  } finally {
    lock.releaseLock();
  }
}
```

---

### 3. index.html（クライアントサイドの更新）

`index.html` の `<main>` 内にある `#p-customer` 部分と、`<script>` 内を以下のように書き換えてください。

#### HTML（`#p-customer`部分）
```html
<div id="p-customer" class="page card hidden">
  <div style="display:flex; justify-content:space-between; align-items:center;">
    <h2>得意先マスター</h2>
    <button onclick="openCustomerForm()" style="width:auto; padding:8px 15px;">＋新規登録</button>
  </div>

  <div style="overflow-x:auto; margin-top:20px;">
    <table id="customer-table" style="width:100%; border-collapse:collapse;">
      <thead>
        <tr style="background:#eee; text-align:left;">
          <th style="padding:10px; border-bottom:2px solid #ddd;">コード</th>
          <th style="padding:10px; border-bottom:2px solid #ddd;">得意先名</th>
          <th style="padding:10px; border-bottom:2px solid #ddd;">郵便番号</th>
          <th style="padding:10px; border-bottom:2px solid #ddd;">住所</th>
          <th style="padding:10px; border-bottom:2px solid #ddd;">電話番号</th>
          <th style="padding:10px; border-bottom:2px solid #ddd;">操作</th>
        </tr>
      </thead>
      <tbody id="customer-list-body"></tbody>
    </table>
  </div>

  <div id="customer-modal" class="hidden" style="position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); display:flex; justify-content:center; align-items:center; z-index:1000;">
    <div class="card" style="width:400px;">
      <h3 id="form-title">得意先登録</h3>
      <input type="hidden" id="cust-code">
      <label>得意先名</label><input type="text" id="cust-name">
      <label>郵便番号</label><input type="text" id="cust-zip" placeholder="000-0000">
      <label>住所</label><input type="text" id="cust-address">
      <label>電話番号</label><input type="text" id="cust-tel" placeholder="00-0000-0000">
      
      <div style="display:flex; gap:10px; margin-top:10px;">
        <button onclick="saveCustomerData()" id="btn-cust-save">保存</button>
        <button onclick="closeCustomerForm()" style="background:#95a5a6;">キャンセル</button>
      </div>
    </div>
  </div>
</div>
```

#### JavaScript（`showPage` などの下に追加）
```javascript
// 得意先管理の初期化（ページ表示時にデータを読み込む）
function initCustomerPage() {
  google.script.run.withSuccessHandler(renderCustomerTable).getCustomers();
}

// テーブルの描画
function renderCustomerTable(data) {
  const tbody = document.getElementById('customer-list-body');
  tbody.innerHTML = '';
  data.forEach(row => {
    const tr = document.createElement('tr');
    tr.innerHTML = `
      <td style="padding:10px; border-bottom:1px solid #ddd;">${row[0]}</td>
      <td style="padding:10px; border-bottom:1px solid #ddd;">${row[1]}</td>
      <td style="padding:10px; border-bottom:1px solid #ddd;">${row[2]}</td>
      <td style="padding:10px; border-bottom:1px solid #ddd;">${row[3]}</td>
      <td style="padding:10px; border-bottom:1px solid #ddd;">${row[4]}</td>
      <td style="padding:10px; border-bottom:1px solid #ddd;">
        <button onclick="editCustomer('${row[0]}','${row[1]}','${row[2]}','${row[3]}','${row[4]}')" style="width:auto; padding:4px 8px; font-size:12px; background:#f39c12;">編集</button>
        <button onclick="deleteCustomerData('${row[0]}')" style="width:auto; padding:4px 8px; font-size:12px; background:#e74c3c;">削除</button>
      </td>
    `;
    tbody.appendChild(tr);
  });
}

// フォームを開く
function openCustomerForm() {
  document.getElementById('form-title').innerText = "得意先登録（新規）";
  document.getElementById('cust-code').value = "";
  document.getElementById('cust-name').value = "";
  document.getElementById('cust-zip').value = "";
  document.getElementById('cust-address').value = "";
  document.getElementById('cust-tel').value = "";
  document.getElementById('customer-modal').classList.remove('hidden');
}

// 編集画面を開く
function editCustomer(code, name, zip, addr, tel) {
  document.getElementById('form-title').innerText = "得意先編集 (" + code + ")";
  document.getElementById('cust-code').value = code;
  document.getElementById('cust-name').value = name;
  document.getElementById('cust-zip').value = zip;
  document.getElementById('cust-address').value = addr;
  document.getElementById('cust-tel').value = tel;
  document.getElementById('customer-modal').classList.remove('hidden');
}

function closeCustomerForm() {
  document.getElementById('customer-modal').classList.add('hidden');
}

// 保存処理
function saveCustomerData() {
  const btn = document.getElementById('btn-cust-save');
  const customer = {
    code: document.getElementById('cust-code').value,
    name: document.getElementById('cust-name').value,
    zip: document.getElementById('cust-zip').value,
    address: document.getElementById('cust-address').value,
    tel: document.getElementById('cust-tel').value
  };

  if (!customer.name) return alert("得意先名を入力してください");

  btn.disabled = true;
  google.script.run.withSuccessHandler(res => {
    btn.disabled = false;
    if (res.success) {
      closeCustomerForm();
      initCustomerPage(); // 再読み込み
    } else {
      alert("エラー: " + res.message);
    }
  }).saveCustomer(customer);
}

// 削除処理
function deleteCustomerData(code) {
  if (!confirm(code + " を削除しますか？")) return;
  google.script.run.withSuccessHandler(res => {
    if (res.success) initCustomerPage();
  }).deleteCustomer(code);
}

// 既存の showPage 関数を少し修正して、ページ切り替え時にデータを読み込むようにする
function showPage(pageId) {
  document.querySelectorAll('.page').forEach(p => p.classList.add('hidden'));
  document.getElementById('p-' + pageId).classList.remove('hidden');
  
  if (pageId === 'customer') {
    initCustomerPage();
  }
}
```

---

### 追加された機能の解説
1.  **自動付番**: 新規登録時、既存のコードから最大値を読み取り、次に続く番号（例：C005）を自動生成します。
2.  **モーダル入力**: 画面遷移せず、その場で入力・編集ができるモダンな操作感にしています。
3.  **一覧の即時反映**: 保存や削除が終わると、サーバーから最新データを取得して表示を更新します。
4.  **編集と新規の使い分け**: Hidden（隠し）要素の `cust-code` が空なら「新規」、値があれば「更新」として処理を分岐させています。

これで「得意先マスター」の基盤が整いました！同様の手順で「商品マスター」も作成できますし、いよいよ「売上入力」でこれらを選択して伝票を作る工程に進むことも可能です。次はどうされますか？

※「Code.gs（サーバーサイドの追加）」「index.html（クライアントサイドの更新）-HTML（#p-customer部分）の置換,
JavaScript（showPage などの下に追加）」の追加等をして，デプロイしてから，実行すると，メニューから選択した得意先マスター処理が正しく動作する。

3-2

マスターの基本機能を搭載した商品マスター（自動付番の商品コード・商品名・単価）の操作を追加してください。

「得意先マスター」の構造をベースに、**「商品マスター」**の機能を追加しましょう。商品コードは「P001, P002...」と自動付番されるように設計します。

得意先マスターの実装パターンをそのまま流用できるので、コードの整合性が取れてメンテナンスもしやすくなります。

---

### 1. スプレッドシート（Productsシート）の準備

スプレッドシートに **`Products`** という名前のシートを追加し、1行目を以下のように設定してください。

| A列 | B列 | C列 |
| :--- | :--- | :--- |
| **商品コード** | **商品名** | **単価** |

---

### 2. Code.gs（サーバーサイドの追加）

既存の `Code.gs` の末尾に以下の関数を追加してください。

```javascript
/**
 * 商品一覧の取得
 */
function getProducts() {
  const data = getSheetData('Products');
  if (data.length === 0) return [];
  return data.slice(1);
}

/**
 * 商品の保存（新規登録・更新）
 */
function saveProduct(product) {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000);
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName('Products');
    const data = sheet.getDataRange().getValues();
    
    let targetRow = -1;

    // 新規登録か更新かの判定
    if (!product.code) {
      // --- 新規登録（自動付番: P001...） ---
      let maxNum = 0;
      for (let i = 1; i < data.length; i++) {
        const codeNum = parseInt(data[i][0].toString().replace('P', ''), 10);
        if (!isNaN(codeNum) && codeNum > maxNum) maxNum = codeNum;
      }
      product.code = "P" + ("000" + (maxNum + 1)).slice(-3);
      targetRow = sheet.getLastRow() + 1;
    } else {
      // --- 更新 ---
      for (let i = 1; i < data.length; i++) {
        if (data[i][0] === product.code) {
          targetRow = i + 1;
          break;
        }
      }
    }

    if (targetRow > 0) {
      sheet.getRange(targetRow, 1, 1, 3).setValues([[
        product.code, 
        product.name, 
        product.price
      ]]);
      return { success: true, code: product.code };
    }
    return { success: false, message: "対象データが見つかりません" };
  } catch (e) {
    return { success: false, message: e.toString() };
  } finally {
    lock.releaseLock();
  }
}

/**
 * 商品の削除
 */
function deleteProduct(code) {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000);
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName('Products');
    const data = sheet.getDataRange().getValues();
    
    for (let i = 1; i < data.length; i++) {
      if (data[i][0] === code) {
        sheet.deleteRow(i + 1);
        return { success: true };
      }
    }
    return { success: false };
  } finally {
    lock.releaseLock();
  }
}
```

---

### 3. index.html（クライアントサイドの更新）

#### HTML（`#p-product`部分を書き換え）
```html
<div id="p-product" class="page card hidden">
  <div style="display:flex; justify-content:space-between; align-items:center;">
    <h2>商品マスター</h2>
    <button onclick="openProductForm()" style="width:auto; padding:8px 15px;">＋新規登録</button>
  </div>

  <div style="overflow-x:auto; margin-top:20px;">
    <table id="product-table" style="width:100%; border-collapse:collapse;">
      <thead>
        <tr style="background:#eee; text-align:left;">
          <th style="padding:10px; border-bottom:2px solid #ddd;">コード</th>
          <th style="padding:10px; border-bottom:2px solid #ddd;">商品名</th>
          <th style="padding:10px; border-bottom:2px solid #ddd; text-align:right;">単価</th>
          <th style="padding:10px; border-bottom:2px solid #ddd; text-align:center;">操作</th>
        </tr>
      </thead>
      <tbody id="product-list-body"></tbody>
    </table>
  </div>

  <div id="product-modal" class="hidden" style="position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); display:flex; justify-content:center; align-items:center; z-index:1000;">
    <div class="card" style="width:350px;">
      <h3 id="prod-form-title">商品登録</h3>
      <input type="hidden" id="prod-code">
      <label>商品名</label><input type="text" id="prod-name">
      <label>単価 (円)</label><input type="number" id="prod-price" placeholder="0">
      
      <div style="display:flex; gap:10px; margin-top:10px;">
        <button onclick="saveProductData()" id="btn-prod-save">保存</button>
        <button onclick="closeProductForm()" style="background:#95a5a6;">キャンセル</button>
      </div>
    </div>
  </div>
</div>
```

#### JavaScript（既存のスクリプト末尾に追加）
```javascript
// 商品管理の初期化
function initProductPage() {
  google.script.run.withSuccessHandler(renderProductTable).getProducts();
}

// テーブル描画
function renderProductTable(data) {
  const tbody = document.getElementById('product-list-body');
  tbody.innerHTML = '';
  data.forEach(row => {
    const tr = document.createElement('tr');
    tr.innerHTML = `
      <td style="padding:10px; border-bottom:1px solid #ddd;">${row[0]}</td>
      <td style="padding:10px; border-bottom:1px solid #ddd;">${row[1]}</td>
      <td style="padding:10px; border-bottom:1px solid #ddd; text-align:right;">${Number(row[2]).toLocaleString()} 円</td>
      <td style="padding:10px; border-bottom:1px solid #ddd; text-align:center;">
        <button onclick="editProduct('${row[0]}','${row[1]}','${row[2]}')" style="width:auto; padding:4px 8px; font-size:12px; background:#f39c12;">編集</button>
        <button onclick="deleteProductData('${row[0]}')" style="width:auto; padding:4px 8px; font-size:12px; background:#e74c3c;">削除</button>
      </td>
    `;
    tbody.appendChild(tr);
  });
}

function openProductForm() {
  document.getElementById('prod-form-title').innerText = "商品登録（新規）";
  document.getElementById('prod-code').value = "";
  document.getElementById('prod-name').value = "";
  document.getElementById('prod-price').value = "";
  document.getElementById('product-modal').classList.remove('hidden');
}

function editProduct(code, name, price) {
  document.getElementById('prod-form-title').innerText = "商品編集 (" + code + ")";
  document.getElementById('prod-code').value = code;
  document.getElementById('prod-name').value = name;
  document.getElementById('prod-price').value = price;
  document.getElementById('product-modal').classList.remove('hidden');
}

function closeProductForm() {
  document.getElementById('product-modal').classList.add('hidden');
}

function saveProductData() {
  const btn = document.getElementById('btn-prod-save');
  const product = {
    code: document.getElementById('prod-code').value,
    name: document.getElementById('prod-name').value,
    price: document.getElementById('prod-price').value
  };

  if (!product.name || !product.price) return alert("全ての項目を入力してください");

  btn.disabled = true;
  google.script.run.withSuccessHandler(res => {
    btn.disabled = false;
    if (res.success) {
      closeProductForm();
      initProductPage();
    } else {
      alert("エラー: " + res.message);
    }
  }).saveProduct(product);
}

function deleteProductData(code) {
  if (!confirm(code + " を削除しますか？")) return;
  google.script.run.withSuccessHandler(res => {
    if (res.success) initProductPage();
  }).deleteProduct(code);
}

// showPage 関数の更新
function showPage(pageId) {
  document.querySelectorAll('.page').forEach(p => p.classList.add('hidden'));
  document.getElementById('p-' + pageId).classList.remove('hidden');
  
  if (pageId === 'customer') initCustomerPage();
  if (pageId === 'product') initProductPage(); // 追加
}
```

---

### 今回のポイント
* **コードの統一感**: `saveProduct` と `saveCustomer` など、関数名や引数の渡し方を揃えることで、今後の機能拡張（売上管理など）でも同様のロジックを使い回せるようにしています。
* **金額の表示**: 一覧画面では `toLocaleString()` を使い、金額を「1,000 円」のようにカンマ区切りで見やすく整形しています。
* **自動付番の接頭辞**: 商品は **P** (Product)、得意先は **C** (Customer) と接頭辞を変えることで、データが混ざらない工夫をしています。

これで「得意先」と「商品」の2つのマスターが揃いましたね！いよいよシステムの中核である「売上管理（伝票入力）」に進む準備が整いました。売上管理では「どの得意先に」「どの商品を」「いくつ」売ったかを登録することになりますが、次はその画面作成でよろしいでしょうか？

※「Code.gs（サーバーサイドの追加）」「index.html（クライアントサイドの更新）-HTML（#p-customer部分）の置換,
JavaScript（showPage などの下に追加）」の追加等をして，デプロイしてから，実行すると，メニューから選択した商品マスター処理が正しく動作する。

3-3

「得意先」と「商品」の2つのマスターの一覧表示の際に，件数が増えた場合に備えて，検索して表示内容を絞り込む機能を追加してください。

件数が増えてくると、目的のデータを探すだけで一苦労ですよね。
サーバー（スプレッドシート）に毎回聞きに行くと動作が重くなるため、今回は**「一度読み込んだ一覧データに対して、ブラウザ側でリアルタイムに絞り込む機能」**を追加しましょう。

この方法なら、1文字入力するごとに即座にリストが更新されるため、非常に快適に検索できます。

---

### 1. index.html の更新（検索窓の追加）

「得意先マスター」と「商品マスター」のそれぞれのテーブルの上に、検索入力欄を追加します。

#### 【得意先マスター部分：HTML】
`#p-customer` 内の「＋新規登録」ボタンの横あたりに配置します。

```html
<div style="margin-top: 15px; display: flex; gap: 10px;">
  <input type="text" id="cust-search" onkeyup="filterCustomer()" placeholder="得意先名、コード、住所などで検索..." style="flex: 1; margin: 0;">
  <div style="line-height: 40px; font-size: 13px; color: #666;">
    <span id="cust-count">0</span> 件表示
  </div>
</div>
```

#### 【商品マスター部分：HTML】
`#p-product` 内も同様に追加します。

```html
<div style="margin-top: 15px; display: flex; gap: 10px;">
  <input type="text" id="prod-search" onkeyup="filterProduct()" placeholder="商品名、コードで検索..." style="flex: 1; margin: 0;">
  <div style="line-height: 40px; font-size: 13px; color: #666;">
    <span id="prod-count">0</span> 件表示
  </div>
</div>
```

---

### 2. JavaScript の更新（絞り込みロジック）

`<script>` タグ内に以下の検索用関数を追加してください。既存の `renderCustomerTable` なども、件数をカウントするために少しだけ修正します。

```javascript
/**
 * 汎用的なテーブル絞り込み関数
 * @param {string} inputId 入力欄のID
 * @param {string} tbodyId テーブルボディのID
 * @param {string} countId 件数表示ラベルのID
 */
function execFilter(inputId, tbodyId, countId) {
  const query = document.getElementById(inputId).value.toLowerCase();
  const rows = document.getElementById(tbodyId).getElementsByTagName('tr');
  let visibleCount = 0;

  for (const row of rows) {
    // 行内の全テキストを結合して、検索語が含まれるかチェック
    const text = row.textContent.toLowerCase();
    if (text.includes(query)) {
      row.style.display = "";
      visibleCount++;
    } else {
      row.style.display = "none";
    }
  }
  document.getElementById(countId).innerText = visibleCount;
}

// 得意先の絞り込み実行
function filterCustomer() {
  execFilter('cust-search', 'customer-list-body', 'cust-count');
}

// 商品の絞り込み実行
function filterProduct() {
  execFilter('prod-search', 'product-list-body', 'prod-count');
}

/**
 * 既存の描画関数を微修正（描画直後に件数を更新する）
 */
function renderCustomerTable(data) {
  const tbody = document.getElementById('customer-list-body');
  tbody.innerHTML = '';
  data.forEach(row => {
    const tr = document.createElement('tr');
    tr.innerHTML = `
      <td style="padding:10px; border-bottom:1px solid #ddd;">${row[0]}</td>
      <td style="padding:10px; border-bottom:1px solid #ddd;">${row[1]}</td>
      <td style="padding:10px; border-bottom:1px solid #ddd;">${row[2]}</td>
      <td style="padding:10px; border-bottom:1px solid #ddd;">${row[3]}</td>
      <td style="padding:10px; border-bottom:1px solid #ddd;">${row[4]}</td>
      <td style="padding:10px; border-bottom:1px solid #ddd; text-align:center;">
        <button onclick="editCustomer('${row[0]}','${row[1]}','${row[2]}','${row[3]}','${row[4]}')" style="width:auto; padding:4px 8px; font-size:12px; background:#f39c12;">編集</button>
        <button onclick="deleteCustomerData('${row[0]}')" style="width:auto; padding:4px 8px; font-size:12px; background:#e74c3c;">削除</button>
      </td>
    `;
    tbody.appendChild(tr);
  });
  // 描画後に検索窓の状態を反映
  filterCustomer();
}

function renderProductTable(data) {
  const tbody = document.getElementById('product-list-body');
  tbody.innerHTML = '';
  data.forEach(row => {
    const tr = document.createElement('tr');
    tr.innerHTML = `
      <td style="padding:10px; border-bottom:1px solid #ddd;">${row[0]}</td>
      <td style="padding:10px; border-bottom:1px solid #ddd;">${row[1]}</td>
      <td style="padding:10px; border-bottom:1px solid #ddd; text-align:right;">${Number(row[2]).toLocaleString()} 円</td>
      <td style="padding:10px; border-bottom:1px solid #ddd; text-align:center;">
        <button onclick="editProduct('${row[0]}','${row[1]}','${row[2]}')" style="width:auto; padding:4px 8px; font-size:12px; background:#f39c12;">編集</button>
        <button onclick="deleteProductData('${row[0]}')" style="width:auto; padding:4px 8px; font-size:12px; background:#e74c3c;">削除</button>
      </td>
    `;
    tbody.appendChild(tr);
  });
  // 描画後に検索窓の状態を反映
  filterProduct();
}
```

---

### 今回の工夫ポイント

1.  **リアルタイム検索 (`onkeyup`):**
    キーボードを叩くたびに `execFilter` が走ります。わざわざ「検索ボタン」を押す必要がないので、直感的な操作が可能です。
2.  **全文検索方式:**
    `row.textContent` を使うことで、コード・名前・住所など、表示されている全ての項目を対象に検索できるようにしています。例えば「東京」と打てば、住所に東京が含まれる得意先が全てヒットします。
3.  **件数の可視化:**
    「いま何件に絞り込まれているか」を表示することで、大量のデータの中から目的の1件にたどり着いた確信が持てるようにしています。
4.  **描画との同期:**
    新規登録や更新をした後、一覧が再描画されても検索ワードが維持されるように、`render` 関数の最後で再度フィルタリングを実行しています。

これで、データが数百件、数千件と増えても、一瞬でターゲットを見つけることができますね！

さて、マスターが使いやすくなったところで、次はいよいよ**「売上管理（売上伝票の入力）」**に取り掛かりましょうか？それとも、今のうちにマスター情報をExcelから一括で取り込むような機能に興味がありますか？

※指定された部分を正しく貼り付けて，デプロイすれば動作するはずだが，面倒。そこで…

すみません。ここまでの全ソースコードを表示してください。

これまでのすべての機能（2段階認証・排他制御・得意先マスター・商品マスター・検索絞り込み機能など）を統合した、完全版のソースコードです。

`Code.gs` と `index.html` の2つのファイルにコピー＆ペーストしてご使用ください。

---

### 1. サーバーサイド処理（`Code.gs`）

```javascript
/**
 * =========================================
 * 1. 基本設定
 * =========================================
 */
const DB_FILE_NAME = "販売管理データベース"; // 連携するスプレッドシート名
const AUTH_CODE_EXPIRE_MIN = 5;         // 2段階認証コードの有効期限（分）

/**
 * =========================================
 * 2. Webアプリ起動処理
 * =========================================
 */
function doGet() {
  return HtmlService.createTemplateFromFile('index')
    .evaluate()
    .setTitle('販売管理システム')
    .addMetaTag('viewport', 'width=device-width, initial-scale=1')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

/**
 * =========================================
 * 3. データベース（スプレッドシート）取得処理
 * =========================================
 */
function getDbWithLock() {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000); // 競合を防ぐため最大30秒間待機
    const files = DriveApp.getFilesByName(DB_FILE_NAME);
    if (files.hasNext()) {
      return SpreadsheetApp.open(files.next());
    }
    throw new Error(`Googleドライブ内に「${DB_FILE_NAME}」が見つかりません。`);
  } catch (e) {
    throw new Error("現在システムが混み合っています。時間を置いてやり直してください。");
  }
}

/**
 * =========================================
 * 4. 認証処理
 * =========================================
 */
function authenticateStep1(userId, password) {
  const lock = LockService.getScriptLock();
  try {
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName('Users');
    if (!sheet) return { success: false, message: "Usersシートが存在しません" };
    
    const data = sheet.getDataRange().getValues();
    
    for (let i = 1; i < data.length; i++) {
      if (data[i][0].toString() === userId) {
        if (data[i][5] === "LOCKED") {
          return { success: false, message: "アカウントがロックされています。管理者に連絡してください。" };
        }

        if (data[i][1].toString() === password) {
          sheet.getRange(i + 1, 5).setValue(0);
          
          const code = Math.floor(100000 + Math.random() * 900000).toString();
          const props = PropertiesService.getScriptProperties();
          props.setProperty("2FA_" + userId, JSON.stringify({
            code: code,
            expiry: new Date().getTime() + (AUTH_CODE_EXPIRE_MIN * 60000)
          }));

          const email = data[i][3];
          MailApp.sendEmail({
            to: email,
            subject: "【販売管理システム】認証コードのご案内",
            body: `認証コードは [ ${code} ] です。\n${AUTH_CODE_EXPIRE_MIN}分以内に入力してください。`
          });

          return { success: true, needs2FA: true, userId: userId };
          
        } else {
          let failCount = Number(data[i][4] || 0) + 1;
          sheet.getRange(i + 1, 5).setValue(failCount);
          if (failCount >= 3) {
            sheet.getRange(i + 1, 6).setValue("LOCKED");
            return { success: false, message: "3回失敗したためアカウントをロックしました。" };
          }
          return { success: false, message: `パスワードが違います（あと${3 - failCount}回でロック）` };
        }
      }
    }
    return { success: false, message: "ユーザーIDが見つかりません。" };
  } catch (e) {
    return { success: false, message: "エラー: " + e.message };
  } finally {
    lock.releaseLock();
  }
}

function verify2FACode(userId, inputCode) {
  const props = PropertiesService.getScriptProperties();
  const storedData = props.getProperty("2FA_" + userId);
  if (!storedData) return { success: false, message: "セッションが切れました。最初からやり直してください。" };
  
  const auth = JSON.parse(storedData);
  const now = new Date().getTime();
  if (now > auth.expiry) return { success: false, message: "認証コードの有効期限が切れています。" };
  
  if (auth.code === inputCode) {
    props.deleteProperty("2FA_" + userId);
    const lock = LockService.getScriptLock();
    try {
      const ss = getDbWithLock();
      const rows = ss.getSheetByName('Users').getDataRange().getValues();
      const userRow = rows.find(r => r[0].toString() === userId);
      return { success: true, userName: userRow[2] };
    } finally {
      lock.releaseLock();
    }
  } else {
    return { success: false, message: "認証コードが正しくありません。" };
  }
}

/**
 * =========================================
 * 5. 汎用データ取得
 * =========================================
 */
function getSheetData(sheetName) {
  const lock = LockService.getScriptLock();
  try {
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName(sheetName);
    if (!sheet) return [];
    return sheet.getDataRange().getValues();
  } catch (e) {
    return [];
  } finally {
    lock.releaseLock();
  }
}

/**
 * =========================================
 * 6. 得意先マスター管理
 * =========================================
 */
function getCustomers() {
  const data = getSheetData('Customers');
  if (data.length === 0) return [];
  return data.slice(1);
}

function saveCustomer(customer) {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000);
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName('Customers');
    const data = sheet.getDataRange().getValues();
    let targetRow = -1;

    if (!customer.code) {
      let maxNum = 0;
      for (let i = 1; i < data.length; i++) {
        const codeNum = parseInt(data[i][0].toString().replace('C', ''), 10);
        if (codeNum > maxNum) maxNum = codeNum;
      }
      customer.code = "C" + ("000" + (maxNum + 1)).slice(-3);
      targetRow = sheet.getLastRow() + 1;
    } else {
      for (let i = 1; i < data.length; i++) {
        if (data[i][0] === customer.code) {
          targetRow = i + 1;
          break;
        }
      }
    }

    if (targetRow > 0) {
      sheet.getRange(targetRow, 1, 1, 5).setValues([[customer.code, customer.name, customer.zip, customer.address, customer.tel]]);
      return { success: true, code: customer.code };
    }
    return { success: false, message: "対象データが見つかりません" };
  } catch (e) {
    return { success: false, message: e.toString() };
  } finally {
    lock.releaseLock();
  }
}

function deleteCustomer(code) {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000);
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName('Customers');
    const data = sheet.getDataRange().getValues();
    for (let i = 1; i < data.length; i++) {
      if (data[i][0] === code) {
        sheet.deleteRow(i + 1);
        return { success: true };
      }
    }
    return { success: false };
  } finally {
    lock.releaseLock();
  }
}

/**
 * =========================================
 * 7. 商品マスター管理
 * =========================================
 */
function getProducts() {
  const data = getSheetData('Products');
  if (data.length === 0) return [];
  return data.slice(1);
}

function saveProduct(product) {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000);
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName('Products');
    const data = sheet.getDataRange().getValues();
    let targetRow = -1;

    if (!product.code) {
      let maxNum = 0;
      for (let i = 1; i < data.length; i++) {
        const codeNum = parseInt(data[i][0].toString().replace('P', ''), 10);
        if (!isNaN(codeNum) && codeNum > maxNum) maxNum = codeNum;
      }
      product.code = "P" + ("000" + (maxNum + 1)).slice(-3);
      targetRow = sheet.getLastRow() + 1;
    } else {
      for (let i = 1; i < data.length; i++) {
        if (data[i][0] === product.code) {
          targetRow = i + 1;
          break;
        }
      }
    }

    if (targetRow > 0) {
      sheet.getRange(targetRow, 1, 1, 3).setValues([[product.code, product.name, product.price]]);
      return { success: true, code: product.code };
    }
    return { success: false, message: "対象データが見つかりません" };
  } catch (e) {
    return { success: false, message: e.toString() };
  } finally {
    lock.releaseLock();
  }
}

function deleteProduct(code) {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000);
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName('Products');
    const data = sheet.getDataRange().getValues();
    for (let i = 1; i < data.length; i++) {
      if (data[i][0] === code) {
        sheet.deleteRow(i + 1);
        return { success: true };
      }
    }
    return { success: false };
  } finally {
    lock.releaseLock();
  }
}

/**
 * =========================================
 * 8. 権限付与用ダミー関数（初回のみエディタから実行）
 * =========================================
 */
function askPermission() {
  DriveApp.getFilesByName('test');
  SpreadsheetApp.getActive();
  MailApp.sendEmail(Session.getActiveUser().getEmail(), '権限テスト', 'これはテストです');
  console.log("全ての権限が承認されています！");
}
```

---

### 2. クライアントサイド画面（`index.html`）

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <base target="_top">
  <style>
    /* ========== 全体設定 ========== */
    :root { --primary: #2c3e50; --bg: #f4f7f6; --accent: #3498db; }
    body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; background: var(--bg); color: #333; display: flex; flex-direction: column; height: 100vh; }
    .hidden { display: none !important; }
    
    /* ========== ログイン画面 ========== */
    #view-login { display: flex; justify-content: center; align-items: center; height: 100vh; }
    .login-box { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); width: 320px; }
    
    /* ========== メインレイアウト ========== */
    #view-main { display: flex; flex-direction: column; height: 100%; }
    nav { background: var(--primary); color: white; padding: 0 20px; display: flex; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
    nav h3 { margin-right: 30px; }
    nav ul { list-style: none; display: flex; gap: 5px; margin: 0; padding: 0; }
    nav li { padding: 15px 20px; cursor: pointer; transition: 0.2s; font-weight: bold; font-size: 14px; }
    nav li:hover { background: #34495e; border-radius: 4px; }
    .logout-btn { margin-left: auto; color: #e74c3c; cursor: pointer; padding: 15px; font-weight: bold; }
    
    main { flex: 1; padding: 20px; overflow-y: auto; }
    .card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
    
    /* ========== フォーム部品 ========== */
    input { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; }
    button { padding: 12px; background: var(--accent); color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 16px; margin-top: 10px; width: 100%; }
    button:disabled { background: #ccc; cursor: not-allowed; }
    button:hover:not(:disabled) { background: #2980b9; }
    #login-msg { color: #e74c3c; font-size: 13px; margin-top: 10px; font-weight: bold; text-align: center; }
  </style>
</head>
<body>

  <div id="view-login">
    <div class="login-box">
      <h2 style="text-align: center; margin-bottom: 20px;">販売管理システム</h2>
      <div id="step1">
        <label style="font-size: 12px; font-weight: bold;">ユーザーID</label>
        <input type="text" id="uid" placeholder="IDを入力">
        <label style="font-size: 12px; font-weight: bold;">パスワード</label>
        <input type="password" id="upw" placeholder="パスワードを入力">
        <button id="btn-login" onclick="onLoginStep1()">ログイン</button>
      </div>
      <div id="step2" class="hidden">
        <p style="font-size: 13px; color: #555;">登録されたメールアドレスに6桁の認証コードを送信しました。</p>
        <label style="font-size: 12px; font-weight: bold;">認証コード</label>
        <input type="text" id="auth-code" placeholder="123456" maxlength="6" style="text-align: center; font-size: 20px; letter-spacing: 5px;">
        <button id="btn-verify" onclick="onLoginStep2()">認証する</button>
        <a href="#" onclick="location.reload()" style="font-size: 12px; display: block; text-align: center; margin-top: 15px; color: #666;">最初からやり直す</a>
      </div>
      <p id="login-msg"></p>
    </div>
  </div>

  <div id="view-main" class="hidden">
    <nav>
      <h3>販売管理 v1.0</h3>
      <ul>
        <li onclick="showPage('customer')">得意先マスター</li>
        <li onclick="showPage('product')">商品マスター</li>
        <li onclick="showPage('sales')">売上管理</li>
        <li onclick="showPage('invoice')">請求管理</li>
        <li onclick="showPage('analysis')">販売分析</li>
      </ul>
      <div class="logout-btn" onclick="location.reload()">ログアウト</div>
    </nav>
    
    <main>
      <div id="p-home" class="page card">
        <h2>ようこそ、<span id="display-name"></span> さん</h2>
        <p>上部のメニューから操作を選択してください。</p>
      </div>

      <div id="p-customer" class="page card hidden">
        <div style="display:flex; justify-content:space-between; align-items:center;">
          <h2>得意先マスター</h2>
          <button onclick="openCustomerForm()" style="width:auto; padding:8px 15px;">＋新規登録</button>
        </div>
        <div style="margin-top: 15px; display: flex; gap: 10px;">
          <input type="text" id="cust-search" onkeyup="filterCustomer()" placeholder="得意先名、コード、住所などで検索..." style="flex: 1; margin: 0;">
          <div style="line-height: 40px; font-size: 13px; color: #666;"><span id="cust-count">0</span> 件表示</div>
        </div>
        <div style="overflow-x:auto; margin-top:20px;">
          <table style="width:100%; border-collapse:collapse;">
            <thead>
              <tr style="background:#eee; text-align:left;">
                <th style="padding:10px; border-bottom:2px solid #ddd;">コード</th>
                <th style="padding:10px; border-bottom:2px solid #ddd;">得意先名</th>
                <th style="padding:10px; border-bottom:2px solid #ddd;">郵便番号</th>
                <th style="padding:10px; border-bottom:2px solid #ddd;">住所</th>
                <th style="padding:10px; border-bottom:2px solid #ddd;">電話番号</th>
                <th style="padding:10px; border-bottom:2px solid #ddd;">操作</th>
              </tr>
            </thead>
            <tbody id="customer-list-body"></tbody>
          </table>
        </div>
        <div id="customer-modal" class="hidden" style="position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); display:flex; justify-content:center; align-items:center; z-index:1000;">
          <div class="card" style="width:400px;">
            <h3 id="form-title">得意先登録</h3>
            <input type="hidden" id="cust-code">
            <label>得意先名</label><input type="text" id="cust-name">
            <label>郵便番号</label><input type="text" id="cust-zip" placeholder="000-0000">
            <label>住所</label><input type="text" id="cust-address">
            <label>電話番号</label><input type="text" id="cust-tel" placeholder="00-0000-0000">
            <div style="display:flex; gap:10px; margin-top:10px;">
              <button onclick="saveCustomerData()" id="btn-cust-save">保存</button>
              <button onclick="closeCustomerForm()" style="background:#95a5a6;">キャンセル</button>
            </div>
          </div>
        </div>
      </div>
      
      <div id="p-product" class="page card hidden">
        <div style="display:flex; justify-content:space-between; align-items:center;">
          <h2>商品マスター</h2>
          <button onclick="openProductForm()" style="width:auto; padding:8px 15px;">＋新規登録</button>
        </div>
        <div style="margin-top: 15px; display: flex; gap: 10px;">
          <input type="text" id="prod-search" onkeyup="filterProduct()" placeholder="商品名、コードで検索..." style="flex: 1; margin: 0;">
          <div style="line-height: 40px; font-size: 13px; color: #666;"><span id="prod-count">0</span> 件表示</div>
        </div>
        <div style="overflow-x:auto; margin-top:20px;">
          <table style="width:100%; border-collapse:collapse;">
            <thead>
              <tr style="background:#eee; text-align:left;">
                <th style="padding:10px; border-bottom:2px solid #ddd;">コード</th>
                <th style="padding:10px; border-bottom:2px solid #ddd;">商品名</th>
                <th style="padding:10px; border-bottom:2px solid #ddd; text-align:right;">単価</th>
                <th style="padding:10px; border-bottom:2px solid #ddd; text-align:center;">操作</th>
              </tr>
            </thead>
            <tbody id="product-list-body"></tbody>
          </table>
        </div>
        <div id="product-modal" class="hidden" style="position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); display:flex; justify-content:center; align-items:center; z-index:1000;">
          <div class="card" style="width:350px;">
            <h3 id="prod-form-title">商品登録</h3>
            <input type="hidden" id="prod-code">
            <label>商品名</label><input type="text" id="prod-name">
            <label>単価 (円)</label><input type="number" id="prod-price" placeholder="0">
            <div style="display:flex; gap:10px; margin-top:10px;">
              <button onclick="saveProductData()" id="btn-prod-save">保存</button>
              <button onclick="closeProductForm()" style="background:#95a5a6;">キャンセル</button>
            </div>
          </div>
        </div>
      </div>
      
      <div id="p-sales" class="page card hidden"><h2>売上管理</h2><p>作成予定</p></div>
      <div id="p-invoice" class="page card hidden"><h2>請求管理</h2><p>作成予定</p></div>
      <div id="p-analysis" class="page card hidden"><h2>販売分析</h2><p>作成予定</p></div>
    </main>
  </div>

  <script>
    let currentUserId = "";

    /* --- ログイン --- */
    function onLoginStep1() {
      const uid = document.getElementById('uid').value;
      const upw = document.getElementById('upw').value;
      const btn = document.getElementById('btn-login');
      const msg = document.getElementById('login-msg');
      if (!uid || !upw) return msg.innerText = "IDとパスワードを入力してください。";
      btn.disabled = true; btn.innerText = "確認中..."; msg.innerText = "";
      
      google.script.run.withSuccessHandler(res => {
        btn.disabled = false; btn.innerText = "ログイン";
        if (res.success && res.needs2FA) {
          currentUserId = res.userId;
          document.getElementById('step1').classList.add('hidden');
          document.getElementById('step2').classList.remove('hidden');
        } else msg.innerText = res.message;
      }).authenticateStep1(uid, upw);
    }

    function onLoginStep2() {
      const code = document.getElementById('auth-code').value;
      const btn = document.getElementById('btn-verify');
      const msg = document.getElementById('login-msg');
      if (!code) return msg.innerText = "コードを入力してください。";
      btn.disabled = true; btn.innerText = "認証中..."; msg.innerText = "";
      
      google.script.run.withSuccessHandler(res => {
        btn.disabled = false; btn.innerText = "認証する";
        if (res.success) {
          document.getElementById('display-name').innerText = res.userName;
          document.getElementById('view-login').classList.add('hidden');
          document.getElementById('view-main').classList.remove('hidden');
          showPage('home');
        } else msg.innerText = res.message;
      }).verify2FACode(currentUserId, code);
    }

    /* --- SPA画面切り替え --- */
    function showPage(pageId) {
      document.querySelectorAll('.page').forEach(p => p.classList.add('hidden'));
      document.getElementById('p-' + pageId).classList.remove('hidden');
      if (pageId === 'customer') initCustomerPage();
      if (pageId === 'product') initProductPage();
    }

    /* --- 検索・絞り込み共通機能 --- */
    function execFilter(inputId, tbodyId, countId) {
      const query = document.getElementById(inputId).value.toLowerCase();
      const rows = document.getElementById(tbodyId).getElementsByTagName('tr');
      let visibleCount = 0;
      for (const row of rows) {
        if (row.textContent.toLowerCase().includes(query)) {
          row.style.display = ""; visibleCount++;
        } else row.style.display = "none";
      }
      document.getElementById(countId).innerText = visibleCount;
    }
    function filterCustomer() { execFilter('cust-search', 'customer-list-body', 'cust-count'); }
    function filterProduct() { execFilter('prod-search', 'product-list-body', 'prod-count'); }

    /* --- 得意先マスター --- */
    function initCustomerPage() { google.script.run.withSuccessHandler(renderCustomerTable).getCustomers(); }
    
    function renderCustomerTable(data) {
      const tbody = document.getElementById('customer-list-body');
      tbody.innerHTML = '';
      data.forEach(row => {
        const tr = document.createElement('tr');
        tr.innerHTML = `
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[0]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[1]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[2]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[3]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[4]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd; text-align:center;">
            <button onclick="editCustomer('${row[0]}','${row[1]}','${row[2]}','${row[3]}','${row[4]}')" style="width:auto; padding:4px 8px; font-size:12px; background:#f39c12;">編集</button>
            <button onclick="deleteCustomerData('${row[0]}')" style="width:auto; padding:4px 8px; font-size:12px; background:#e74c3c;">削除</button>
          </td>`;
        tbody.appendChild(tr);
      });
      filterCustomer();
    }

    function openCustomerForm() {
      document.getElementById('form-title').innerText = "得意先登録（新規）";
      document.getElementById('cust-code').value = "";
      document.getElementById('cust-name').value = "";
      document.getElementById('cust-zip').value = "";
      document.getElementById('cust-address').value = "";
      document.getElementById('cust-tel').value = "";
      document.getElementById('customer-modal').classList.remove('hidden');
    }

    function editCustomer(code, name, zip, addr, tel) {
      document.getElementById('form-title').innerText = "得意先編集 (" + code + ")";
      document.getElementById('cust-code').value = code;
      document.getElementById('cust-name').value = name;
      document.getElementById('cust-zip').value = zip;
      document.getElementById('cust-address').value = addr;
      document.getElementById('cust-tel').value = tel;
      document.getElementById('customer-modal').classList.remove('hidden');
    }

    function closeCustomerForm() { document.getElementById('customer-modal').classList.add('hidden'); }

    function saveCustomerData() {
      const btn = document.getElementById('btn-cust-save');
      const customer = {
        code: document.getElementById('cust-code').value,
        name: document.getElementById('cust-name').value,
        zip: document.getElementById('cust-zip').value,
        address: document.getElementById('cust-address').value,
        tel: document.getElementById('cust-tel').value
      };
      if (!customer.name) return alert("得意先名を入力してください");
      btn.disabled = true;
      google.script.run.withSuccessHandler(res => {
        btn.disabled = false;
        if (res.success) { closeCustomerForm(); initCustomerPage(); }
        else alert("エラー: " + res.message);
      }).saveCustomer(customer);
    }

    function deleteCustomerData(code) {
      if (!confirm(code + " を削除しますか？")) return;
      google.script.run.withSuccessHandler(res => { if (res.success) initCustomerPage(); }).deleteCustomer(code);
    }

    /* --- 商品マスター --- */
    function initProductPage() { google.script.run.withSuccessHandler(renderProductTable).getProducts(); }
    
    function renderProductTable(data) {
      const tbody = document.getElementById('product-list-body');
      tbody.innerHTML = '';
      data.forEach(row => {
        const tr = document.createElement('tr');
        tr.innerHTML = `
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[0]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[1]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd; text-align:right;">${Number(row[2]).toLocaleString()} 円</td>
          <td style="padding:10px; border-bottom:1px solid #ddd; text-align:center;">
            <button onclick="editProduct('${row[0]}','${row[1]}','${row[2]}')" style="width:auto; padding:4px 8px; font-size:12px; background:#f39c12;">編集</button>
            <button onclick="deleteProductData('${row[0]}')" style="width:auto; padding:4px 8px; font-size:12px; background:#e74c3c;">削除</button>
          </td>`;
        tbody.appendChild(tr);
      });
      filterProduct();
    }

    function openProductForm() {
      document.getElementById('prod-form-title').innerText = "商品登録（新規）";
      document.getElementById('prod-code').value = "";
      document.getElementById('prod-name').value = "";
      document.getElementById('prod-price').value = "";
      document.getElementById('product-modal').classList.remove('hidden');
    }

    function editProduct(code, name, price) {
      document.getElementById('prod-form-title').innerText = "商品編集 (" + code + ")";
      document.getElementById('prod-code').value = code;
      document.getElementById('prod-name').value = name;
      document.getElementById('prod-price').value = price;
      document.getElementById('product-modal').classList.remove('hidden');
    }

    function closeProductForm() { document.getElementById('product-modal').classList.add('hidden'); }

    function saveProductData() {
      const btn = document.getElementById('btn-prod-save');
      const product = {
        code: document.getElementById('prod-code').value,
        name: document.getElementById('prod-name').value,
        price: document.getElementById('prod-price').value
      };
      if (!product.name || !product.price) return alert("全ての項目を入力してください");
      btn.disabled = true;
      google.script.run.withSuccessHandler(res => {
        btn.disabled = false;
        if (res.success) { closeProductForm(); initProductPage(); }
        else alert("エラー: " + res.message);
      }).saveProduct(product);
    }

    function deleteProductData(code) {
      if (!confirm(code + " を削除しますか？")) return;
      google.script.run.withSuccessHandler(res => { if (res.success) initProductPage(); }).deleteProduct(code);
    }
  </script>
</body>
</html>
```

※これまでのコードを全て削除して，「Code.gs」と「index.html」を貼り付けて，デプロイすると，
メニューから選択した得意先や商品マスター処理（検索含む）が正しく動作する。
Geminiに相談するだけでGoogle Apps Script Webアプリが作れる！

第4章は，新規作成した別のチャットでの相談です。

第4章売上管理相談

4-2

※前章最後で回答された「Code.gs」と「index.html」をテキスト・ファイルに保存して，
「+ファイルアップロード」をクリックして，2つのファイルを添付してから相談する。

1. 前提条件（環境と目的）
添付した「Code.gs」と「index.html」のシステムに，売上管理を追加してください。

2. データベースの構成
これまでに作成したシートに追加するシートは以下の通りです。
Companyシート：2行目に 自社名, 郵便番号, 住所, TEL, FAX
Salesシート：A列から順に 伝票番号, 日付, 得意先コード, 得意先名, 合計金額, 備考, 商品コード1, 数量1, 単価1...（最大6行分）

3. 実装したい売上管理機能のリスト
一覧表示: Salesシートのデータをテーブル表示し、検索フィルターをつける。
新規・編集機能: モーダルウィンドウで入力。得意先と商品はDatalistでオートコンプリート検索ができること。
単価と合計の自動計算: 商品を選ぶと単価が入り、数量を入れると自動計算されること。
印刷機能: 画面のCSSの影響を受けないよう、別ウィンドウを開いて専用の伝票HTMLを生成し、マスターから商品名を再取得して，Companyシートのデータを自社欄に印刷すること。

4. プログラムの制約やルール
スプレッドシートのデータ取得時は、排他制御（LockService.getScriptLock）を入れること。
データ取得時はエラー防止のため getDisplayValues() を使い、全て文字列として扱うこと。
動的にHTMLを生成・出力する処理が含まれるため、scriptタグ等のエスケープ処理や、文字列の分割結合（'<' + '/script>'など）を確実に行い、構文エラーを防いでください。
既存の関数（onLoginStep1など）の動作に影響を与えないよう、スコープに注意し、そのまま末尾にコピペして動く独立したコードブロックとして出力してください。
文字列の置換を行う際、正規表現のエラーが起きやすいので、極力 split().join() を使うか、正規表現のエスケープ（バックスラッシュ）を正確に行ってください。

ご提示いただいたシステムの構成に合わせて、売上管理機能を追加するためのコードを作成しました。
既存のコードを変更することなく、それぞれのファイルの末尾（または指定の場所）に貼り付けるだけで動作するように設計しています。

### 1. `Code.gs` の末尾に追加するコード
`Code.gs` の一番下の行に、以下のコードをそのまま貼り付けてください。

```javascript
/**
 * =========================================
 * 9. 売上管理機能・印刷データ取得
 * =========================================
 */
function getSales() {
  const lock = LockService.getScriptLock();
  try {
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName('Sales');
    if (!sheet) return [];
    // エラー防止のため getDisplayValues を使用し全て文字列として扱う
    const data = sheet.getDataRange().getDisplayValues();
    if (data.length === 0) return [];
    return data.slice(1);
  } catch (e) {
    return [];
  } finally {
    lock.releaseLock();
  }
}

function saveSale(sale) {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000);
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName('Sales');
    const data = sheet.getDataRange().getDisplayValues();
    let targetRow = -1;

    if (!sale.saleNo) {
      let maxNum = 0;
      for (let i = 1; i < data.length; i++) {
        const num = parseInt(data[i][0].split('S').join(''), 10);
        if (!isNaN(num) && num > maxNum) maxNum = num;
      }
      sale.saleNo = "S" + ("0000" + (maxNum + 1)).slice(-4);
      targetRow = sheet.getLastRow() + 1;
    } else {
      for (let i = 1; i < data.length; i++) {
        if (data[i][0] === sale.saleNo) {
          targetRow = i + 1;
          break;
        }
      }
    }

    if (targetRow > 0) {
      // Salesシート: 伝票番号(1), 日付(2), 得意先C(3), 得意先名(4), 合計(5), 備考(6), (商品C, 数量, 単価)x6 = 24列
      let rowData = [
        sale.saleNo, sale.date, sale.custCode, sale.custName, sale.totalAmount, sale.memo
      ];
      for (let i = 0; i < 6; i++) {
        if (sale.items && sale.items[i]) {
          rowData.push(sale.items[i].prodCode, sale.items[i].qty, sale.items[i].price);
        } else {
          rowData.push("", "", "");
        }
      }
      sheet.getRange(targetRow, 1, 1, rowData.length).setValues([rowData]);
      return { success: true, saleNo: sale.saleNo };
    }
    return { success: false, message: "対象データが見つかりません" };
  } catch (e) {
    return { success: false, message: e.toString() };
  } finally {
    lock.releaseLock();
  }
}

function deleteSale(saleNo) {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000);
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName('Sales');
    const data = sheet.getDataRange().getDisplayValues();
    for (let i = 1; i < data.length; i++) {
      if (data[i][0] === saleNo) {
        sheet.deleteRow(i + 1);
        return { success: true };
      }
    }
    return { success: false };
  } finally {
    lock.releaseLock();
  }
}

function getPrintData(saleNo) {
  const lock = LockService.getScriptLock();
  try {
    const ss = getDbWithLock();
    // Company情報の取得
    const compSheet = ss.getSheetByName('Company');
    const company = compSheet ? (compSheet.getDataRange().getDisplayValues()[1] || []) : [];
    
    // 対象のSales行を取得
    const salesSheet = ss.getSheetByName('Sales');
    const salesData = salesSheet ? salesSheet.getDataRange().getDisplayValues() : [];
    let saleRow = null;
    for (let i = 1; i < salesData.length; i++) {
      if (salesData[i][0] === saleNo) {
        saleRow = salesData[i];
        break;
      }
    }
    
    // 商品マスター情報の取得(名前表示用)
    const prodSheet = ss.getSheetByName('Products');
    const products = prodSheet ? prodSheet.getDataRange().getDisplayValues().slice(1) : [];

    return { success: true, company: company, sale: saleRow, products: products };
  } catch (e) {
    return { success: false };
  } finally {
    lock.releaseLock();
  }
}
```

---

### 2. `index.html` の更新
`index.html` に関しては、以下の2箇所の作業を行ってください。

#### ① HTML要素の置き換え
既存の `<div id="p-sales" class="page card hidden"><h2>売上管理</h2><p>作成予定</p></div>` の1行を見つけて、以下の内容に**置き換え**てください。

```html
      <div id="p-sales" class="page card hidden">
        <div style="display:flex; justify-content:space-between; align-items:center;">
          <h2>売上管理</h2>
          <button onclick="openSalesForm()" style="width:auto; padding:8px 15px;">＋新規伝票</button>
        </div>
        <div style="margin-top: 15px; display: flex; gap: 10px;">
          <input type="text" id="sales-search" onkeyup="filterSales()" placeholder="伝票番号、得意先名などで検索..." style="flex: 1; margin: 0;">
          <div style="line-height: 40px; font-size: 13px; color: #666;"><span id="sales-count">0</span> 件表示</div>
        </div>
        
        <datalist id="dl-customers"></datalist>
        <datalist id="dl-products"></datalist>

        <div style="overflow-x:auto; margin-top:20px;">
          <table style="width:100%; border-collapse:collapse;">
            <thead>
              <tr style="background:#eee; text-align:left;">
                <th style="padding:10px; border-bottom:2px solid #ddd;">伝票番号</th>
                <th style="padding:10px; border-bottom:2px solid #ddd;">日付</th>
                <th style="padding:10px; border-bottom:2px solid #ddd;">得意先</th>
                <th style="padding:10px; border-bottom:2px solid #ddd; text-align:right;">合計金額</th>
                <th style="padding:10px; border-bottom:2px solid #ddd; text-align:center;">操作</th>
              </tr>
            </thead>
            <tbody id="sales-list-body"></tbody>
          </table>
        </div>

        <div id="sales-modal" class="hidden" style="position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); display:flex; justify-content:center; align-items:center; z-index:1000;">
          <div class="card" style="width:700px; max-height:90vh; overflow-y:auto;">
            <h3 id="sales-form-title">売上伝票登録</h3>
            <div style="display:flex; gap:10px;">
              <div style="flex:1;"><label>伝票番号</label><input type="text" id="sale-no" readonly placeholder="自動採番" style="background:#eee;"></div>
              <div style="flex:1;"><label>日付</label><input type="date" id="sale-date"></div>
            </div>
            <label>得意先 (コードまたは名前で検索)</label>
            <input type="text" id="sale-cust" list="dl-customers" placeholder="得意先を選択...">
            
            <table style="width:100%; margin-top:15px; border-collapse:collapse; font-size:14px;">
              <thead>
                <tr style="background:#f9f9f9;">
                  <th style="padding:5px; text-align:left;">商品 (コードまたは名前)</th>
                  <th style="padding:5px; width:100px;">単価</th>
                  <th style="padding:5px; width:80px;">数量</th>
                  <th style="padding:5px; width:100px;">金額</th>
                </tr>
              </thead>
              <tbody id="sales-items-container">
                </tbody>
            </table>
            
            <div style="display:flex; justify-content:flex-end; margin-top:15px; align-items:center; gap:15px;">
              <div style="font-weight:bold;">合計金額: <span id="sale-total-display" style="font-size:20px; color:var(--accent);">0</span> 円</div>
              <input type="hidden" id="sale-total-val" value="0">
            </div>

            <label>備考</label><input type="text" id="sale-memo">
            
            <div style="display:flex; gap:10px; margin-top:15px;">
              <button onclick="saveSalesData()" id="btn-sales-save">保存</button>
              <button onclick="closeSalesForm()" style="background:#95a5a6;">キャンセル</button>
            </div>
          </div>
        </div>
      </div>
```

#### ② Javascriptの追加
既存の `<script>` タグの一番最後（`</script>` の直前）に、以下のJSコードをそのまま貼り付けてください。
（※既存の `showPage` 関数をフックして動作するため、元のコードを書き換える必要はありません）

```javascript
    /* =========================================
       売上管理用 JavaScript
       ========================================= */
    let globalCustomers = [];
    let globalProducts = [];

    // 既存のshowPage関数を拡張して、売上ページの初期化をフックする
    const originalShowPage = showPage;
    showPage = function(pageId) {
      originalShowPage(pageId);
      if (pageId === 'sales') initSalesPage();
    };

    function initSalesPage() {
      // 顧客と商品マスターを取得し、Datalistを構築
      google.script.run.withSuccessHandler(data => {
        globalCustomers = data;
        const dlCust = document.getElementById('dl-customers');
        dlCust.innerHTML = '';
        data.forEach(c => {
          const opt = document.createElement('option');
          opt.value = c[0] + " : " + c[1]; // C001 : 会社名
          dlCust.appendChild(opt);
        });

        google.script.run.withSuccessHandler(pData => {
          globalProducts = pData;
          const dlProd = document.getElementById('dl-products');
          dlProd.innerHTML = '';
          pData.forEach(p => {
            const opt = document.createElement('option');
            opt.value = p[0] + " : " + p[1]; // P001 : 商品名
            dlProd.appendChild(opt);
          });
          
          // 明細行UIの生成(初回のみ)
          const container = document.getElementById('sales-items-container');
          if (container.children.length === 0) {
            for(let i=0; i<6; i++) {
              container.innerHTML += `
                <tr class="sale-row">
                  <td><input type="text" class="si-prod" list="dl-products" onchange="onProdSelect(this)" placeholder="商品選択"></td>
                  <td><input type="number" class="si-price" readonly style="background:#eee; text-align:right;"></td>
                  <td><input type="number" class="si-qty" oninput="calcSaleTotal()" placeholder="0" style="text-align:right;"></td>
                  <td><input type="text" class="si-sub" readonly style="background:#eee; text-align:right;" value="0"></td>
                </tr>`;
            }
          }
          // データ取得と描画
          google.script.run.withSuccessHandler(renderSalesTable).getSales();
        }).getProducts();
      }).getCustomers();
    }

    function renderSalesTable(data) {
      const tbody = document.getElementById('sales-list-body');
      tbody.innerHTML = '';
      data.forEach(row => {
        const tr = document.createElement('tr');
        tr.innerHTML = `
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[0]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[1]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[3]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd; text-align:right;">${Number(row[4]).toLocaleString()} 円</td>
          <td style="padding:10px; border-bottom:1px solid #ddd; text-align:center;">
            <button onclick="editSale('${row[0]}')" style="width:auto; padding:4px 8px; font-size:12px; background:#f39c12;">編集</button>
            <button onclick="printSale('${row[0]}')" style="width:auto; padding:4px 8px; font-size:12px; background:#2ecc71;">印刷</button>
            <button onclick="deleteSaleData('${row[0]}')" style="width:auto; padding:4px 8px; font-size:12px; background:#e74c3c;">削除</button>
          </td>`;
        tbody.appendChild(tr);
      });
      filterSales();
    }

    function filterSales() { execFilter('sales-search', 'sales-list-body', 'sales-count'); }

    // --- モーダル・入力制御 ---
    function openSalesForm() {
      document.getElementById('sales-form-title').innerText = "売上伝票登録（新規）";
      document.getElementById('sale-no').value = "";
      document.getElementById('sale-date').value = new Date().toISOString().split('T')[0];
      document.getElementById('sale-cust').value = "";
      document.getElementById('sale-memo').value = "";
      
      const rows = document.querySelectorAll('.sale-row');
      rows.forEach(r => {
        r.querySelector('.si-prod').value = "";
        r.querySelector('.si-price').value = "";
        r.querySelector('.si-qty').value = "";
        r.querySelector('.si-sub').value = "0";
      });
      calcSaleTotal();
      document.getElementById('sales-modal').classList.remove('hidden');
    }

    function onProdSelect(elem) {
      const row = elem.closest('tr');
      const val = elem.value.split(' : ')[0].trim();
      const priceElem = row.querySelector('.si-price');
      const match = globalProducts.find(p => p[0] === val);
      
      if (match) { priceElem.value = match[2]; } 
      else { priceElem.value = ""; }
      calcSaleTotal();
    }

    function calcSaleTotal() {
      const rows = document.querySelectorAll('.sale-row');
      let total = 0;
      rows.forEach(r => {
        const price = Number(r.querySelector('.si-price').value) || 0;
        const qty = Number(r.querySelector('.si-qty').value) || 0;
        const sub = price * qty;
        r.querySelector('.si-sub').value = sub.toLocaleString();
        total += sub;
      });
      document.getElementById('sale-total-val').value = total;
      document.getElementById('sale-total-display').innerText = total.toLocaleString();
    }

    function closeSalesForm() { document.getElementById('sales-modal').classList.add('hidden'); }

    // --- 保存・編集・削除 ---
    function saveSalesData() {
      const btn = document.getElementById('btn-sales-save');
      const custInput = document.getElementById('sale-cust').value;
      const custCode = custInput.split(' : ')[0].trim();
      
      let custName = "";
      const custMatch = globalCustomers.find(c => c[0] === custCode);
      if (custMatch) { custName = custMatch[1]; } 
      else { custName = custInput; } // マスタにない場合は入力値をそのまま

      const sale = {
        saleNo: document.getElementById('sale-no').value,
        date: document.getElementById('sale-date').value,
        custCode: custCode,
        custName: custName,
        totalAmount: document.getElementById('sale-total-val').value,
        memo: document.getElementById('sale-memo').value,
        items: []
      };

      if (!sale.date || !custCode) return alert("日付と得意先は必須です");

      const rows = document.querySelectorAll('.sale-row');
      rows.forEach(r => {
        const pInput = r.querySelector('.si-prod').value;
        const pCode = pInput.split(' : ')[0].trim();
        const pQty = r.querySelector('.si-qty').value;
        const pPrice = r.querySelector('.si-price').value;
        if (pCode && pQty) {
          sale.items.push({ prodCode: pCode, qty: pQty, price: pPrice });
        }
      });

      if (sale.items.length === 0) return alert("商品を1つ以上入力してください");

      btn.disabled = true;
      google.script.run.withSuccessHandler(res => {
        btn.disabled = false;
        if (res.success) { closeSalesForm(); initSalesPage(); }
        else alert("エラー: " + res.message);
      }).saveSale(sale);
    }

    function editSale(saleNo) {
      google.script.run.withSuccessHandler(data => {
        const row = data.find(r => r[0] === saleNo);
        if (!row) return;

        document.getElementById('sales-form-title').innerText = "売上伝票編集 (" + saleNo + ")";
        document.getElementById('sale-no').value = row[0];
        document.getElementById('sale-date').value = row[1];
        
        // 得意先のセット(マスタ検索)
        const cMatch = globalCustomers.find(c => c[0] === row[2]);
        document.getElementById('sale-cust').value = cMatch ? (cMatch[0] + " : " + cMatch[1]) : row[3];
        document.getElementById('sale-memo').value = row[5];

        const trs = document.querySelectorAll('.sale-row');
        for (let i = 0; i < 6; i++) {
          const offset = 6 + (i * 3);
          const pCode = row[offset] || "";
          const pQty = row[offset + 1] || "";
          const pPrice = row[offset + 2] || "";
          
          let pVal = pCode;
          const pMatch = globalProducts.find(p => p[0] === pCode);
          if (pMatch) pVal = pCode + " : " + pMatch[1];

          trs[i].querySelector('.si-prod').value = pVal;
          trs[i].querySelector('.si-price').value = pPrice;
          trs[i].querySelector('.si-qty').value = pQty;
        }
        calcSaleTotal();
        document.getElementById('sales-modal').classList.remove('hidden');
      }).getSales();
    }

    function deleteSaleData(saleNo) {
      if (!confirm(saleNo + " を削除しますか？")) return;
      google.script.run.withSuccessHandler(res => { if (res.success) initSalesPage(); }).deleteSale(saleNo);
    }

    // --- 印刷処理 ---
    function printSale(saleNo) {
      const win = window.open('', '_blank');
      win.document.write('印刷データを読み込んでいます...');
      
      google.script.run.withSuccessHandler(res => {
        if (!res || !res.success || !res.sale) {
          win.close();
          alert("印刷データの取得に失敗しました。Companyシート等の設定を確認してください。");
          return;
        }

        const comp = res.company; // 自社名, 郵便番号, 住所, TEL, FAX
        const sale = res.sale;    // 伝票番号, 日付, 得意先C, 得意先名, 合計, 備考, (商品C, 数量, 単価)x6
        const prods = res.products;

        let html = `<!DOCTYPE html><html><head><title>売上伝票_${sale[0]}</title><style>
          body { font-family: "Noto Sans JP", sans-serif; padding: 40px; color: #333; }
          .header { display: flex; justify-content: space-between; margin-bottom: 30px; }
          .title { text-align: center; font-size: 24px; letter-spacing: 5px; margin-bottom: 40px; border-bottom: 2px solid #333; padding-bottom: 10px; }
          table { width: 100%; border-collapse: collapse; margin-top: 20px; }
          th, td { border: 1px solid #000; padding: 10px; font-size: 14px; }
          th { background-color: #f2f2f2; }
          .text-left { text-align: left; }
          .text-right { text-align: right; }
          .text-center { text-align: center; }
          .company-info { font-size: 13px; line-height: 1.6; }
        </style></head><body>`;
        
        html += `<div class="title">売上伝票</div>`;
        html += `<div class="header">`;
        html += `  <div><h2 style="margin:0 0 10px 0; border-bottom:1px solid #333; padding-bottom:5px; display:inline-block; min-width:250px;">${sale[3]} 御中</h2><br>伝票番号: ${sale[0]}<br>発行日: ${sale[1]}</div>`;
        html += `  <div class="company-info"><strong style="font-size:16px;">${comp[0] || '自社名未設定'}</strong><br>〒${comp[1] || '---'}<br>${comp[2] || '住所未設定'}<br>TEL: ${comp[3] || '---'}<br>FAX: ${comp[4] || '---'}</div>`;
        html += `</div>`;
        
        html += `<table>
                  <tr><th style="width:15%;">商品コード</th><th style="width:40%;">商品名</th><th style="width:15%;">単価</th><th style="width:10%;">数量</th><th style="width:20%;">金額</th></tr>`;
        
        for (let i = 0; i < 6; i++) {
          const offset = 6 + (i * 3);
          const pCode = sale[offset];
          const pQty = sale[offset + 1];
          const pPrice = sale[offset + 2];
          
          if (pCode && pQty) {
            let pName = "不明な商品";
            const pMatch = prods.find(p => p[0] === pCode);
            if (pMatch) pName = pMatch[1];
            
            const rowTotal = Number(pQty) * Number(pPrice);
            html += `<tr>
                      <td class="text-center">${pCode}</td>
                      <td class="text-left">${pName}</td>
                      <td class="text-right">${Number(pPrice).toLocaleString()}</td>
                      <td class="text-center">${pQty}</td>
                      <td class="text-right">${rowTotal.toLocaleString()}</td>
                    </tr>`;
          }
        }
        
        html += `<tr><th colspan="4" class="text-right">合計金額</th><th class="text-right" style="font-size:16px;">￥${Number(sale[4]).toLocaleString()}</th></tr>`;
        html += `</table>`;
        html += `<div style="margin-top:30px; font-size:14px;">備考: ${sale[5] || ''}</div>`;
        
        // スクリプトタグのエスケープ結合
        const sEnd = '<' + '/script>';
        html += `<script>
                  window.onload = function() { window.print(); };
                  window.onafterprint = function() { window.close(); };
                 ${sEnd}</body></html>`;
        
        win.document.open();
        win.document.write(html);
        win.document.close();
      }).getPrintData(saleNo);
    }
```

※「Code.gs（サーバーサイドの追加）」「index.html（クライアントサイドの更新）-① HTML要素の置き換え,
② Javascriptの追加」の追加等をして，デプロイしてから，実行すると，メニューから選択した売上管理処理が正しく動作する。
Geminiに相談するだけでGoogle Apps Script Webアプリが作れる！

第5章は，新規作成した別のチャットでの相談です。

第5章請求管理相談

5-1

※前章最後に動作したプロジェクトの「Code.gs」と「index.html」をテキスト・ファイルに保存して，
「+ファイルアップロード」をクリックして，2つのファイルを添付してから相談する。

1. 前提条件（環境と目的）
添付した「Code.gs」と「index.html」のシステムに，請求管理を追加してください。

2. データベースの構成
これまでに作成したシートは以下の通りです。
Companyシート：2行目に 自社名, 郵便番号, 住所, TEL, FAX
Customersシート：A列から順に 得意先コード, 得意先名, 郵便番号, 住所, 電話番号
Productsシート：A列から順に 商品コード, 商品名, 単価
Salesシート：A列から順に 伝票番号, 日付, 得意先コード, 得意先名, 合計金額, 備考, 商品コード1, 数量1, 単価1...（最大6行分）

3. 実装したい請求管理機能のリスト
概要: 指定した月の売上データを集計し、該当月に売上があった全得意先分の請求書を、ボタン1つで一括生成・印刷する機能。
帳票・印刷レイアウト:
得意先マスターから取得した「郵便番号」「住所」「電話番号」を宛名部分に印字すること。
「お支払期日」を算出し、「指定した月の翌月20日」として明記すること。
Companyシートのデータを自社欄に印字すること。
「ご請求金額（総合計）」は、明細の合計値ではなく、請求書の見出し（ヘッダー部分）に大きく目立つように印字すること。
得意先ごとの請求書内訳には、該当する全伝票の明細を日付順で結合して，マスターから商品名を再取得して，配置すること。
ページオーバーフロー処理: 1ページあたりの明細行数（例: 20行）をJS側で厳密にカウントし、超過する場合はテーブルを分割してCSSの page-break-after: always; を用いて確実に改ページさせること。
【重要】最後のページには `page-break-after: always;` が適用されないようJSで制御し、余計な白紙ページを生成しないこと。CSSには `box-sizing: border-box;` を使用すること。

4. プログラムの制約やルール
スプレッドシートのデータ取得時は、排他制御（LockService.getScriptLock）を入れること。
データ取得時はエラー防止のため getDisplayValues() を使い、全て文字列として扱うこと。
動的にHTMLを生成・出力する処理が含まれるため、scriptタグ等のエスケープ処理や、文字列の分割結合（'<' + '/script>'など）を確実に行い、構文エラーを防いでください。
既存の関数（onLoginStep1など）の動作に影響を与えないよう、スコープに注意し、そのまま末尾にコピペして動く独立したコードブロックとして出力してください。
文字列の置換を行う際、正規表現のエラーが起きやすいので、極力 split().join() を使うか、正規表現のエスケープ（バックスラッシュ）を正確に行ってください。

ご提示いただいた既存のコード構造と要件に基づき、請求管理機能の追加コードを作成しました。
排他制御（LockService.getScriptLock）、`getDisplayValues()` による文字列ベースでの安定したデータ取得、`split().join()` を用いた安全な置換処理、および印刷時の厳密な改ページ制御（白紙ページの防止）といった制約をすべて満たすように実装しています。

以下の手順に沿って、各ファイルへコードを追記・修正してください。

### 1. `index.html` の編集
まず、作成予定となっていた HTML の請求管理用の枠組みを書き換えます。その後、下部の `<script>` タグ内に専用の JavaScript 関数を追加します。

**① HTML側の書き換え**
`<div id="p-invoice" class="page card hidden">...</div>` の部分を以下のコードに丸ごと差し替えてください。

```html
      <div id="p-invoice" class="page card hidden">
        <h2>請求管理</h2>
        <p>対象月を選択し、その月に売上があった全得意先の請求書を一括生成します。</p>
        <div style="display:flex; gap:15px; align-items:center; margin-top:20px;">
          <label style="font-weight:bold;">請求月:</label>
          <input type="month" id="invoice-month" style="width:200px; margin:0;">
          <button onclick="generateInvoices()" style="width:auto; padding:10px 20px;">一括請求書作成・印刷</button>
        </div>
        <p id="invoice-msg" style="margin-top:15px; color:#e74c3c; font-weight:bold;"></p>
      </div>
```

**② JavaScript の追記**
`index.html` の最下部（`</script>` の直前）に、以下の関数を追加してください。既存の関数とは独立して動作します。

```javascript
    /* =========================================
       請求管理（一括印刷）用 JavaScript
       ========================================= */
    function generateInvoices() {
      const monthInput = document.getElementById('invoice-month').value;
      const msgArea = document.getElementById('invoice-msg');
      msgArea.innerText = "";

      if (!monthInput) {
        msgArea.innerText = "請求月を選択してください。";
        return;
      }

      const btn = event.target;
      const originalText = btn.innerText;
      btn.innerText = "データ集計中...";
      btn.disabled = true;

      google.script.run.withSuccessHandler(res => {
        btn.innerText = originalText;
        btn.disabled = false;

        if (!res.success) {
          msgArea.innerText = "エラー: " + res.message;
          return;
        }

        printBulkInvoices(monthInput, res.company, res.invoices);
      }).getInvoiceBulkData(monthInput);
    }

    function printBulkInvoices(monthStr, company, invoices) {
      const win = window.open('', '_blank');
      win.document.write('請求書データを生成しています...');

      // 支払期日の算出（指定月の翌月20日）
      const parts = monthStr.split('-');
      let year = parseInt(parts[0], 10);
      let month = parseInt(parts[1], 10);
      month++;
      if (month > 12) {
         month = 1;
         year++;
      }
      const dueDateStr = year + "年" + month + "月20日";
      const targetMonthStr = parts[0] + "年" + parseInt(parts[1], 10) + "月分";

      const linesPerPage = 20;

      let html = `<!DOCTYPE html><html><head><title>請求書一括印刷_${monthStr}</title><style>
        * { box-sizing: border-box; }
        body { font-family: "Noto Sans JP", sans-serif; margin: 0; padding: 0; color: #333; }
        .page { padding: 40px; width: 100%; min-height: 100vh; }
        .page-break { page-break-after: always; }
        .header-flex { display: flex; justify-content: space-between; margin-bottom: 20px; }
        .title { text-align: center; font-size: 26px; letter-spacing: 5px; margin-bottom: 30px; border-bottom: 2px solid #333; padding-bottom: 10px; }
        .cust-info { font-size: 14px; line-height: 1.6; }
        .comp-info { font-size: 13px; line-height: 1.6; }
        .billing-total-box { margin-top: 20px; border-bottom: 3px solid #333; padding-bottom: 5px; display: inline-block; min-width: 300px; }
        .billing-total-text { font-size: 16px; font-weight: bold; }
        .billing-total-amount { font-size: 28px; font-weight: bold; margin-left: 20px; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 13px; }
        th, td { border: 1px solid #000; padding: 8px; }
        th { background-color: #f2f2f2; text-align: center; }
        .text-left { text-align: left; }
        .text-right { text-align: right; }
        .text-center { text-align: center; }
      </style></head><body>`;

      let pageHtml = "";

      for (let i = 0; i < invoices.length; i++) {
        const inv = invoices[i];
        const items = inv.items;
        const totalPages = Math.ceil(items.length / linesPerPage) || 1;

        for (let p = 0; p < totalPages; p++) {
          // JSによる厳密な改ページ制御：最後の顧客の最後のページには page-break を適用しない
          const isLastCustomer = (i === invoices.length - 1);
          const isLastPageOfCustomer = (p === totalPages - 1);
          const needPageBreak = !(isLastCustomer && isLastPageOfCustomer);
          const pageClass = needPageBreak ? "page page-break" : "page";

          pageHtml += `<div class="${pageClass}">`;
          pageHtml += `<div class="title">請 求 書</div>`;
          pageHtml += `<div class="header-flex">`;
          
          // --- 左側: 得意先情報と請求金額（ヘッダー） ---
          pageHtml += `<div class="cust-info">`;
          pageHtml += `〒${inv.custZip || '---'}<br>`;
          pageHtml += `${inv.custAddr || '---'}<br>`;
          pageHtml += `TEL: ${inv.custTel || '---'}<br><br>`;
          pageHtml += `<h2 style="margin:0;">${inv.custName} 御中</h2>`;
          
          // 1ページ目のみ総合計と期日を明記
          if (p === 0) { 
            pageHtml += `<div class="billing-total-box">`;
            pageHtml += `<span class="billing-total-text">ご請求金額</span>`;
            pageHtml += `<span class="billing-total-amount">￥${inv.totalAmount.toLocaleString()}</span>`;
            pageHtml += `</div>`;
            pageHtml += `<div style="margin-top:10px; font-weight:bold;">お支払期日: ${dueDateStr}</div>`;
            pageHtml += `<div style="margin-top:5px; font-weight:bold;">対象月: ${targetMonthStr}</div>`;
          }
          pageHtml += `</div>`;

          // --- 右側: 自社情報 ---
          pageHtml += `<div class="comp-info">`;
          pageHtml += `<strong style="font-size:18px;">${company[0] || '自社名未設定'}</strong><br>`;
          pageHtml += `〒${company[1] || '---'}<br>`;
          pageHtml += `${company[2] || '住所未設定'}<br>`;
          pageHtml += `TEL: ${company[3] || '---'}<br>`;
          pageHtml += `FAX: ${company[4] || '---'}<br>`;
          pageHtml += `</div>`;
          pageHtml += `</div>`; 

          // --- 明細テーブル ---
          pageHtml += `<table>`;
          pageHtml += `<tr><th style="width:15%;">日付</th><th style="width:15%;">伝票番号</th><th style="width:30%;">商品名</th><th style="width:10%;">数量</th><th style="width:15%;">単価</th><th style="width:15%;">金額</th></tr>`;
          
          const startIdx = p * linesPerPage;
          const endIdx = Math.min(startIdx + linesPerPage, items.length);
          
          for (let j = startIdx; j < endIdx; j++) {
            const item = items[j];
            pageHtml += `<tr>`;
            pageHtml += `<td class="text-center">${item.date}</td>`;
            pageHtml += `<td class="text-center">${item.saleNo}</td>`;
            pageHtml += `<td class="text-left">${item.pName}</td>`;
            pageHtml += `<td class="text-center">${item.qty}</td>`;
            pageHtml += `<td class="text-right">${item.price.toLocaleString()}</td>`;
            pageHtml += `<td class="text-right">${item.subTotal.toLocaleString()}</td>`;
            pageHtml += `</tr>`;
          }
          
          // 空行埋め (レイアウトを常に揃える)
          for (let j = endIdx; j < startIdx + linesPerPage; j++) {
            pageHtml += `<tr><td> </td><td></td><td></td><td></td><td></td><td></td></tr>`;
          }
          
          pageHtml += `</table>`;
          pageHtml += `</div>`; 
        }
      }

      html += pageHtml;

      // scriptタグの分割エスケープ
      const sEnd = '<' + '/script>';
      html += `<script>
                window.onload = function() { window.print(); };
                window.onafterprint = function() { window.close(); };
               ${sEnd}</body></html>`;

      win.document.open();
      win.document.write(html);
      win.document.close();
    }
```

---

### 2. `Code.gs` の編集
`Code.gs` の一番下の末尾に、以下のサーバー側ロジックを追加してください。この関数は、指定された月の売上データをすべて抽出し、顧客ごとにグループ化したうえで明細の計算と結合を行います。

```javascript
/**
 * =========================================
 * 10. 請求管理機能（一括データ集計）
 * =========================================
 */
function getInvoiceBulkData(monthStr) {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000);
    const ss = getDbWithLock();

    // 各シートから getDisplayValues() を用いて安全に文字列として一括取得
    const compSheet = ss.getSheetByName('Company');
    const company = compSheet ? (compSheet.getDataRange().getDisplayValues()[1] || []) : [];

    const custSheet = ss.getSheetByName('Customers');
    const custData = custSheet ? custSheet.getDataRange().getDisplayValues().slice(1) : [];

    const prodSheet = ss.getSheetByName('Products');
    const prodData = prodSheet ? prodSheet.getDataRange().getDisplayValues().slice(1) : [];

    const salesSheet = ss.getSheetByName('Sales');
    const salesData = salesSheet ? salesSheet.getDataRange().getDisplayValues().slice(1) : [];

    // 日付フォーマットの揺らぎ（YYYY-MM と YYYY/MM）に対応させるため置換処理を使用
    const targetPrefix1 = monthStr;
    const targetPrefix2 = monthStr.split('-').join('/');

    // 該当月の伝票をフィルタリング
    const monthlySales = salesData.filter(row => {
       const dateStr = row[1] || "";
       return dateStr.indexOf(targetPrefix1) === 0 || dateStr.indexOf(targetPrefix2) === 0;
    });

    if (monthlySales.length === 0) {
       return { success: false, message: "指定された月の売上データがありません。" };
    }

    // 得意先コードごとに明細をグループ化
    const invoiceMap = {};
    
    monthlySales.forEach(sale => {
       const saleNo = sale[0];
       const date = sale[1];
       const custCode = sale[2];

       if (!invoiceMap[custCode]) {
         const cMatch = custData.find(c => c[0] === custCode);
         invoiceMap[custCode] = {
           custCode: custCode,
           custName: cMatch ? cMatch[1] : sale[3],
           custZip: cMatch ? cMatch[2] : "",
           custAddr: cMatch ? cMatch[3] : "",
           custTel: cMatch ? cMatch[4] : "",
           totalAmount: 0,
           items: []
         };
       }

       // 伝票内にある最大6つの商品データを走査
       for (let i = 0; i < 6; i++) {
         const offset = 6 + (i * 3);
         const pCode = sale[offset];
         const pQty = Number(sale[offset + 1]);
         const pPrice = Number(sale[offset + 2]);

         if (pCode && pQty > 0) {
           const pMatch = prodData.find(p => p[0] === pCode);
           const pName = pMatch ? pMatch[1] : "不明な商品";
           const subTotal = pQty * pPrice;
           
           invoiceMap[custCode].totalAmount += subTotal;
           invoiceMap[custCode].items.push({
             date: date,
             saleNo: saleNo,
             pCode: pCode,
             pName: pName,
             qty: pQty,
             price: pPrice,
             subTotal: subTotal
           });
         }
       }
    });

    // オブジェクトから配列に変換し、日付順にソート
    const results = [];
    for (let code in invoiceMap) {
       const inv = invoiceMap[code];
       inv.items.sort((a, b) => {
         if (a.date < b.date) return -1;
         if (a.date > b.date) return 1;
         return 0;
       });
       results.push(inv);
    }

    return {
      success: true,
      company: company,
      invoices: results
    };

  } catch (e) {
    return { success: false, message: e.toString() };
  } finally {
    lock.releaseLock();
  }
}
```

これらのコードを追加することで、指定された月のすべての伝票から明細を抽出し、20行ごとの改ページ制御を含めた請求書の一括印刷が可能になります。また、白紙ページの生成を防ぐ処理や、正規表現を避けた手法を用いていますので、構文エラーのリスクを抑えた安定した動作が期待できます。実装に関して他に気になる点があれば教えてください。

※「index.html の編集-① HTML側の書き換え, ② JavaScript の追記」，
「Code.gs（サーバーサイドの追加）」追加等をして，デプロイしてから，実行すると，
メニューから選択した請求管理処理が動作するが，気になることが…。

改ページは15行ごとに変更してください。また，得意先ごとのページ連番と総ページ数を各ページの右上に印字してください。

ご要望に合わせて、1ページあたりの明細行数を15行に変更し、各ページの右上に「現在のページ / 総ページ数」を印字する機能を追加しました。

以下の修正済みコードを、既存のコードと差し替えてください。

### 1. `index.html` の JavaScript 部分（修正）
`printBulkInvoices` 関数内の行数設定と、HTML生成ロジックを更新しています。

```javascript
    /* =========================================
       請求管理（一括印刷）用 JavaScript - 15行/ページ連番対応版
       ========================================= */
    function generateInvoices() {
      const monthInput = document.getElementById('invoice-month').value;
      const msgArea = document.getElementById('invoice-msg');
      msgArea.innerText = "";

      if (!monthInput) {
        msgArea.innerText = "請求月を選択してください。";
        return;
      }

      const btn = event.target;
      const originalText = btn.innerText;
      btn.innerText = "データ集計中...";
      btn.disabled = true;

      google.script.run.withSuccessHandler(res => {
        btn.innerText = originalText;
        btn.disabled = false;

        if (!res.success) {
          msgArea.innerText = "エラー: " + res.message;
          return;
        }

        printBulkInvoices(monthInput, res.company, res.invoices);
      }).getInvoiceBulkData(monthInput);
    }

    function printBulkInvoices(monthStr, company, invoices) {
      const win = window.open('', '_blank');
      win.document.write('請求書データを生成しています...');

      const parts = monthStr.split('-');
      let year = parseInt(parts[0], 10);
      let month = parseInt(parts[1], 10);
      month++;
      if (month > 12) {
         month = 1;
         year++;
      }
      const dueDateStr = year + "年" + month + "月20日";
      const targetMonthStr = parts[0] + "年" + parseInt(parts[1], 10) + "月分";

      // --- 1ページあたりの行数を15行に変更 ---
      const linesPerPage = 15;

      let html = `<!DOCTYPE html><html><head><title>請求書一括印刷_${monthStr}</title><style>
        * { box-sizing: border-box; }
        body { font-family: "Noto Sans JP", sans-serif; margin: 0; padding: 0; color: #333; }
        .page { padding: 40px; width: 100%; min-height: 100vh; position: relative; }
        .page-break { page-break-after: always; }
        .page-number { position: absolute; top: 20px; right: 40px; font-size: 12px; }
        .header-flex { display: flex; justify-content: space-between; margin-bottom: 20px; }
        .title { text-align: center; font-size: 26px; letter-spacing: 5px; margin-bottom: 30px; border-bottom: 2px solid #333; padding-bottom: 10px; }
        .cust-info { font-size: 14px; line-height: 1.6; }
        .comp-info { font-size: 13px; line-height: 1.6; }
        .billing-total-box { margin-top: 20px; border-bottom: 3px solid #333; padding-bottom: 5px; display: inline-block; min-width: 300px; }
        .billing-total-text { font-size: 16px; font-weight: bold; }
        .billing-total-amount { font-size: 28px; font-weight: bold; margin-left: 20px; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 13px; }
        th, td { border: 1px solid #000; padding: 8px; }
        th { background-color: #f2f2f2; text-align: center; }
        .text-left { text-align: left; }
        .text-right { text-align: right; }
        .text-center { text-align: center; }
      </style></head><body>`;

      let pageHtml = "";

      for (let i = 0; i < invoices.length; i++) {
        const inv = invoices[i];
        const items = inv.items;
        // 総ページ数の算出
        const totalPages = Math.ceil(items.length / linesPerPage) || 1;

        for (let p = 0; p < totalPages; p++) {
          const isLastCustomer = (i === invoices.length - 1);
          const isLastPageOfCustomer = (p === totalPages - 1);
          const needPageBreak = !(isLastCustomer && isLastPageOfCustomer);
          const pageClass = needPageBreak ? "page page-break" : "page";

          pageHtml += `<div class="${pageClass}">`;
          
          // --- ページ連番（右上に印字） ---
          pageHtml += `<div class="page-number">${p + 1} / ${totalPages}</div>`;

          pageHtml += `<div class="title">請 求 書</div>`;
          pageHtml += `<div class="header-flex">`;
          
          // 左側: 得意先情報
          pageHtml += `<div class="cust-info">`;
          pageHtml += `〒${inv.custZip || '---'}<br>`;
          pageHtml += `${inv.custAddr || '---'}<br>`;
          pageHtml += `TEL: ${inv.custTel || '---'}<br><br>`;
          pageHtml += `<h2 style="margin:0;">${inv.custName} 御中</h2>`;
          
          if (p === 0) { 
            pageHtml += `<div class="billing-total-box">`;
            pageHtml += `<span class="billing-total-text">ご請求金額</span>`;
            pageHtml += `<span class="billing-total-amount">￥${inv.totalAmount.toLocaleString()}</span>`;
            pageHtml += `</div>`;
            pageHtml += `<div style="margin-top:10px; font-weight:bold;">お支払期日: ${dueDateStr}</div>`;
            pageHtml += `<div style="margin-top:5px; font-weight:bold;">対象月: ${targetMonthStr}</div>`;
          }
          pageHtml += `</div>`;

          // 右側: 自社情報
          pageHtml += `<div class="comp-info">`;
          pageHtml += `<strong style="font-size:18px;">${company[0] || '自社名未設定'}</strong><br>`;
          pageHtml += `〒${company[1] || '---'}<br>`;
          pageHtml += `${company[2] || '住所未設定'}<br>`;
          pageHtml += `TEL: ${company[3] || '---'}<br>`;
          pageHtml += `FAX: ${company[4] || '---'}<br>`;
          pageHtml += `</div>`;
          pageHtml += `</div>`; 

          // 明細テーブル
          pageHtml += `<table>`;
          pageHtml += `<tr><th style="width:15%;">日付</th><th style="width:15%;">伝票番号</th><th style="width:30%;">商品名</th><th style="width:10%;">数量</th><th style="width:15%;">単価</th><th style="width:15%;">金額</th></tr>`;
          
          const startIdx = p * linesPerPage;
          const endIdx = Math.min(startIdx + linesPerPage, items.length);
          
          for (let j = startIdx; j < endIdx; j++) {
            const item = items[j];
            pageHtml += `<tr>`;
            pageHtml += `<td class="text-center">${item.date}</td>`;
            pageHtml += `<td class="text-center">${item.saleNo}</td>`;
            pageHtml += `<td class="text-left">${item.pName}</td>`;
            pageHtml += `<td class="text-center">${item.qty}</td>`;
            pageHtml += `<td class="text-right">${item.price.toLocaleString()}</td>`;
            pageHtml += `<td class="text-right">${item.subTotal.toLocaleString()}</td>`;
            pageHtml += `</tr>`;
          }
          
          // 15行に満たない場合の空行埋め
          for (let j = endIdx; j < startIdx + linesPerPage; j++) {
            pageHtml += `<tr><td> </td><td></td><td></td><td></td><td></td><td></td></tr>`;
          }
          
          pageHtml += `</table>`;
          pageHtml += `</div>`; 
        }
      }

      html += pageHtml;

      const sEnd = '<' + '/script>';
      html += `<script>
                window.onload = function() { window.print(); };
                window.onafterprint = function() { window.close(); };
               ${sEnd}</body></html>`;

      win.document.open();
      win.document.write(html);
      win.document.close();
    }
```

### 主な変更内容
1.  **行数設定の変更**: `const linesPerPage = 15;` とし、テーブル内の空行埋めループもこの値に連動するようにしました。
2.  **ページ連番の追加**: 
    * CSS に `.page-number` クラスを追加し、`position: absolute;` で各ページの右上に固定配置されるようにしました。
    * 得意先ごとにループ内で `totalPages`（総ページ数）を計算し、現在のページ `p + 1` と組み合わせて `1 / 3` の形式で出力しています。
3.  **レイアウトの整合性**: `page` クラスに `position: relative;` を追加することで、絶対配置したページ番号が各ページの枠内に正しく収まるようにしています。

`Code.gs` 側のロジックに変更はありませんので、そのまま前回のコードをお使いいただけます。これで、より細かな改ページ制御と、複数ページにわたる請求書の管理がしやすくなります。

※index.html の JavaScript 部分（修正）をして，デプロイしてから，実行すると，
メニューから選択した請求管理処理が正しく動作する。
Geminiに相談するだけでGoogle Apps Script Webアプリが作れる！

5-2

請求書の印刷様式を<table>〜</table>の間だけ入れた新たに作成したHTMLファイル（請求書.html）から読み取り，function printBulkInvoicesで代入した変数名と互換性がある{{変数名}}を指定して差し込む方式にしてください。ただし，オーバーフロー時には合計請求金額などは入れないようにしてください。

ご要望通り、印刷様式を外部HTMLファイル（`請求書.html`）から読み込み、`printBulkInvoices` で使用していた変数名と互換性のある `{{変数名}}` 形式で差し込む方式を整理しました。

オーバーフロー（2ページ目以降）の際には、金額や住所などのヘッダー情報を自動的に空文字へ置換する制御を加えています。

### 1. `請求書.html` の作成
GASエディタの「＋」メニューからHTMLファイルを作成し、名前を「請求書」として以下の内容を貼り付けてください。15行分の明細プレースホルダを含んでいます。

```html
<div class="page-number">{{pageNo}}</div>
<div class="title">請 求 書</div>

<table style="width:100%; border:none; margin-bottom:20px;">
  <tr>
    <td style="vertical-align:top;">
      〒{{custZip}}<br>{{custAddr}}<br>TEL: {{custTel}}<br>
      <h2 style="margin:10px 0;">{{custName}} 御中</h2>
      <div class="total-box">ご請求金額: {{totalAmount}}</div>
      <div style="margin-top:10px;"><b>お支払期日: {{dueDate}}</b></div>
      <div>対象月: {{targetMonth}}</div>
    </td>
    <td style="text-align:right; vertical-align:top; width:200px;">
      <strong style="font-size:1.2em;">{{compName}}</strong><br>
      〒{{compZip}}<br>{{compAddr}}<br>
      TEL: {{compTel}}<br>FAX: {{compFax}}
    </td>
  </tr>
</table>

<table class="item-table">
  <thead>
    <tr>
      <th style="width:12%;">日付</th>
      <th style="width:13%;">伝票番号</th>
      <th style="width:35%;">商品名</th>
      <th style="width:10%;">数量</th>
      <th style="width:15%;">単価</th>
      <th style="width:15%;">金額</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>{{date}}</td><td>{{saleNo}}</td><td>{{pName}}</td><td>{{qty}}</td><td>{{price}}</td><td>{{subTotal}}</td></tr>
    <tr><td>{{date}}</td><td>{{saleNo}}</td><td>{{pName}}</td><td>{{qty}}</td><td>{{price}}</td><td>{{subTotal}}</td></tr>
    <tr><td>{{date}}</td><td>{{saleNo}}</td><td>{{pName}}</td><td>{{qty}}</td><td>{{price}}</td><td>{{subTotal}}</td></tr>
    <tr><td>{{date}}</td><td>{{saleNo}}</td><td>{{pName}}</td><td>{{qty}}</td><td>{{price}}</td><td>{{subTotal}}</td></tr>
    <tr><td>{{date}}</td><td>{{saleNo}}</td><td>{{pName}}</td><td>{{qty}}</td><td>{{price}}</td><td>{{subTotal}}</td></tr>
    <tr><td>{{date}}</td><td>{{saleNo}}</td><td>{{pName}}</td><td>{{qty}}</td><td>{{price}}</td><td>{{subTotal}}</td></tr>
    <tr><td>{{date}}</td><td>{{saleNo}}</td><td>{{pName}}</td><td>{{qty}}</td><td>{{price}}</td><td>{{subTotal}}</td></tr>
    <tr><td>{{date}}</td><td>{{saleNo}}</td><td>{{pName}}</td><td>{{qty}}</td><td>{{price}}</td><td>{{subTotal}}</td></tr>
    <tr><td>{{date}}</td><td>{{saleNo}}</td><td>{{pName}}</td><td>{{qty}}</td><td>{{price}}</td><td>{{subTotal}}</td></tr>
    <tr><td>{{date}}</td><td>{{saleNo}}</td><td>{{pName}}</td><td>{{qty}}</td><td>{{price}}</td><td>{{subTotal}}</td></tr>
    <tr><td>{{date}}</td><td>{{saleNo}}</td><td>{{pName}}</td><td>{{qty}}</td><td>{{price}}</td><td>{{subTotal}}</td></tr>
    <tr><td>{{date}}</td><td>{{saleNo}}</td><td>{{pName}}</td><td>{{qty}}</td><td>{{price}}</td><td>{{subTotal}}</td></tr>
    <tr><td>{{date}}</td><td>{{saleNo}}</td><td>{{pName}}</td><td>{{qty}}</td><td>{{price}}</td><td>{{subTotal}}</td></tr>
    <tr><td>{{date}}</td><td>{{saleNo}}</td><td>{{pName}}</td><td>{{qty}}</td><td>{{price}}</td><td>{{subTotal}}</td></tr>
    <tr><td>{{date}}</td><td>{{saleNo}}</td><td>{{pName}}</td><td>{{qty}}</td><td>{{price}}</td><td>{{subTotal}}</td></tr>
  </tbody>
</table>
```

### 2. `Code.gs` の修正
サーバー側でHTMLファイルを読み込んでブラウザへ送るための関数を追加します。

```javascript
/**
 * HTMLファイルから請求書テンプレートを文字列として取得
 */
function getTemplateHtmlFromFile() {
  return HtmlService.createHtmlOutputFromFile('請求書').getContent();
}

/**
 * 印刷用データ取得時、一緒にテンプレートも取得するように統合
 */
function getInvoiceBulkDataWithTemplate(monthStr) {
  const data = getInvoiceBulkData(monthStr); 
  if (data.success) {
    data.templateHtml = getTemplateHtmlFromFile();
  }
  return data;
}
```

### 3. `index.html` の JavaScript 部分（修正）
`printBulkInvoices` のロジックと互換性を保ちながら、プレースホルダを置換する処理を実装します。

```javascript
    function generateInvoices(btn) {
      const monthInput = document.getElementById('invoice-month').value;
      if (!monthInput) { alert("請求月を選択してください。"); return; }

      const originalText = btn.innerText;
      btn.innerText = "データ集計中...";
      btn.disabled = true;

      google.script.run
        .withSuccessHandler(res => {
          btn.innerText = originalText;
          btn.disabled = false;
          if (!res.success) { alert("エラー: " + res.message); return; }

          // UIフリーズ防止のため少し遅延させて印刷処理を実行
          setTimeout(() => {
            printWithTemplate(res.templateHtml, res.invoices, monthInput, res.company);
          }, 100);
        })
        .withFailureHandler(err => {
          btn.innerText = originalText;
          btn.disabled = false;
          alert("通信エラー: " + err.message);
        })
        .getInvoiceBulkDataWithTemplate(monthInput);
    }

    function printWithTemplate(templateHtml, invoices, monthStr, company) {
      // 日付・対象月の計算 (printBulkInvoices 互換)
      const parts = monthStr.split('-');
      let year = parseInt(parts[0], 10);
      let month = parseInt(parts[1], 10);
      month++;
      if (month > 12) { month = 1; year++; }
      const dueDateStr = year + "年" + month + "月20日";
      const targetMonthStr = parts[0] + "年" + parseInt(parts[1], 10) + "月分";

      const win = window.open('', '_blank');
      let finalHtml = `<!DOCTYPE html><html><head><style>
        body { font-family: "Noto Sans JP", sans-serif; margin: 0; padding: 0; color: #333; }
        .page { width: 210mm; height: 296mm; padding: 10mm; position: relative; page-break-after: always; }
        .page:last-child { page-break-after: auto; }
        .page-number { position: absolute; top: 10mm; right: 10mm; font-size: 12px; }
        .title { text-align: center; font-size: 26px; border-bottom: 2px solid #000; margin-bottom: 20px; padding-bottom: 5px; }
        .total-box { font-size: 20px; border-bottom: 3px solid #000; display: inline-block; padding: 5px 20px 0 0; margin-top: 10px; font-weight: bold; }
        .item-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
        .item-table th, .item-table td { border: 1px solid #000; padding: 6px; height: 32px; font-size: 13px; word-wrap: break-word; }
        .item-table th { background: #f2f2f2; text-align: center; }
      </style></head><body>`;

      invoices.forEach(inv => {
        const linesPerPage = 15;
        const totalPages = Math.ceil(inv.items.length / linesPerPage) || 1;

        for (let p = 0; p < totalPages; p++) {
          let pageContent = templateHtml;

          // 1ページ目 (p === 0) か 2ページ目以降かでの出し分け (オーバーフロー制御)
          if (p === 0) {
            pageContent = pageContent.split('{{custZip}}').join(inv.custZip || '---');
            pageContent = pageContent.split('{{custAddr}}').join(inv.custAddr || '---');
            pageContent = pageContent.split('{{custTel}}').join(inv.custTel || '---');
            pageContent = pageContent.split('{{totalAmount}}').join('￥' + inv.totalAmount.toLocaleString());
            pageContent = pageContent.split('{{dueDate}}').join(dueDateStr);
            pageContent = pageContent.split('{{targetMonth}}').join(targetMonthStr);
          } else {
            // 2ページ目以降は金額や住所を空にする
            pageContent = pageContent.split('{{custZip}}').join('');
            pageContent = pageContent.split('{{custAddr}}').join('');
            pageContent = pageContent.split('{{custTel}}').join('');
            pageContent = pageContent.split('{{totalAmount}}').join('');
            pageContent = pageContent.split('{{dueDate}}').join('');
            pageContent = pageContent.split('{{targetMonth}}').join('');
          }

          // 全ページ共通
          pageContent = pageContent.split('{{custName}}').join(inv.custName + (p > 0 ? " (続き)" : ""));
          pageContent = pageContent.split('{{pageNo}}').join((p + 1) + " / " + totalPages);
          
          // 自社情報 (company 配列から展開)
          pageContent = pageContent.split('{{compName}}').join(company[0] || '');
          pageContent = pageContent.split('{{compZip}}').join(company[1] || '');
          pageContent = pageContent.split('{{compAddr}}').join(company[2] || '');
          pageContent = pageContent.split('{{compTel}}').join(company[3] || '');
          pageContent = pageContent.split('{{compFax}}').join(company[4] || '');

          // 明細行 15行の差し込み
          const startIdx = p * linesPerPage;
          for (let i = 0; i < linesPerPage; i++) {
            const item = inv.items[startIdx + i];
            // replace は最初に見つかった1つだけを置換するため、15個の {{変数}} を順番に埋められる
            pageContent = pageContent.replace('{{date}}', item ? item.date : "");
            pageContent = pageContent.replace('{{saleNo}}', item ? item.saleNo : "");
            pageContent = pageContent.replace('{{pName}}', item ? item.pName : "");
            pageContent = pageContent.replace('{{qty}}', item ? item.qty : "");
            pageContent = pageContent.replace('{{price}}', item ? item.price.toLocaleString() : "");
            pageContent = pageContent.replace('{{subTotal}}', item ? item.subTotal.toLocaleString() : "");
          }

          finalHtml += `<div class="page">${pageContent}</div>`;
        }
      });

      finalHtml += `</body></html>`;
      win.document.write(finalHtml);
      win.document.close();
      
      // 読み込み完了後に印刷ダイアログを表示
      win.onload = function() {
        win.print();
      };
    }
```

### この方式の特徴
* **高速動作**: スプレッドシートを介さず、GAS内のHTMLファイルを直接文字列として扱うため、非常に軽量です。
* **デザインの柔軟性**: `請求書.html` を編集するだけで、ロゴの配置やフォントの変更が自由に行えます。
* **オーバーフロー対応**: 2ページ目以降に住所や金額が表示されないよう `split().join('')` で確実に消去し、宛名に `(続き)` という識別子を付与しています。
* **15行固定**: HTML側にプレースホルダを15個並べることで、データが少ない場合でも表の形が崩れないよう制御しています。

※「請求書.html」を新規作成し，Libre Office Calcで差し込みタグ（「1.請求書.html の作成」で示された{{変数名}}）を入力し，一旦，Libre Office Calc形式で保存した後，
HTML形式で保存し，ブラウザで開いて，右クリックから「ページのソースを表示」で<table>〜</table>の間をコピーして，貼り付ける。
「Code.gs」の末尾追加，「index.html」の JavaScript（修正）をして，デプロイしてから，実行すると，
メニューから選択した請求管理処理で請求書テンプレートを使用した請求書が印刷できる。
Geminiに相談するだけでGoogle Apps Script Webアプリが作れる！

第6章販売分析相談

6-1

6-1は，新規作成した別のチャットでの相談です。

1. 前提条件（環境と目的）
添付した「Code.gs」と「index.html」のシステムに，販売分析を追加してください。

2. データベースの構成
これまでに作成したシートは以下の通りです。
Companyシート：2行目に 自社名, 郵便番号, 住所, TEL, FAX
Customersシート：A列から順に 得意先コード, 得意先名, 郵便番号, 住所, 電話番号
Productsシート：A列から順に 商品コード, 商品名, 単価, 原価
Salesシート：A列から順に 伝票番号, 日付, 得意先コード, 得意先名, 合計金額, 備考, 商品コード1, 数量1, 単価1...（最大6行分）

3. 実装したい販売分析機能のリスト
商品マスターの「D列」に「原価」を追加したので，一覧表示や入力画面に「原価」を追加する。
メニューの「販売分析」をクリックすると，売上や利益を利用した「ダッシュボード」を表示する。

4. プログラムの制約やルール
スプレッドシートのデータ取得時は、排他制御（LockService.getScriptLock）を入れること。
データ取得時はエラー防止のため getDisplayValues() を使い、全て文字列として扱うこと。

[cite_start]販売管理システムへの「原価」追加および「販売分析」機能の統合コードを作成しました。ご指定の通り、データ取得時には排他制御（LockService.getScriptLock）を利用し、エラー防止のため `getDisplayValues()` にて全て文字列として取得するルールを適用しています [cite: 4, 61]。

以下の手順に従って、`Code.gs` と `index.html` を更新してください。

### 1. `Code.gs` の更新

まず、商品マスター保存処理を4列（原価追加）に対応させます。次に、売上と原価からダッシュボード用のデータを集計する新規関数を追加します。

**変更点 ①：`saveProduct` の修正**
既存の `saveProduct` 関数を以下のコードで上書きしてください。データの取得方法も指定に沿って `getDisplayValues()` に変更しています。

```javascript
function saveProduct(product) {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000);
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName('Products');
    // 全て文字列として扱うため getDisplayValues に変更
    const data = sheet.getDataRange().getDisplayValues();
    let targetRow = -1;

    if (!product.code) {
      let maxNum = 0;
      for (let i = 1; i < data.length; i++) {
        const codeNum = parseInt(data[i][0].toString().replace('P', ''), 10);
        if (!isNaN(codeNum) && codeNum > maxNum) maxNum = codeNum;
      }
      product.code = "P" + ("000" + (maxNum + 1)).slice(-3);
      targetRow = sheet.getLastRow() + 1;
    } else {
      for (let i = 1; i < data.length; i++) {
        if (data[i][0] === product.code) {
          targetRow = i + 1;
          break;
        }
      }
    }

    if (targetRow > 0) {
      // D列（原価）を含めた4列のデータを保存
      sheet.getRange(targetRow, 1, 1, 4).setValues([[product.code, product.name, product.price, product.cost]]);
      return { success: true, code: product.code };
    }
    return { success: false, message: "対象データが見つかりません" };
  } catch (e) {
    return { success: false, message: e.toString() };
  } finally {
    lock.releaseLock();
  }
}
```

**変更点 ②：販売分析用関数の追加**
`Code.gs` の最下部に、以下のダッシュボード集計用関数を追加してください。

```javascript
/**
 * =========================================
 * 11. 販売分析機能
 * =========================================
 */
function getDashboardData() {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000); // 排他制御
    const ss = getDbWithLock();
    
    // 1. 商品マスターから原価マップを作成 (getDisplayValuesで取得)
    const prodSheet = ss.getSheetByName('Products');
    const prodData = prodSheet ? prodSheet.getDataRange().getDisplayValues().slice(1) : [];
    const costMap = {};
    prodData.forEach(p => { 
      costMap[p[0]] = Number(p[3]) || 0; // p[0]:コード, p[3]:原価
    });

    // 2. 売上データを取得 (getDisplayValuesで取得)
    const salesSheet = ss.getSheetByName('Sales');
    const salesData = salesSheet ? salesSheet.getDataRange().getDisplayValues().slice(1) : [];

    let totalSales = 0;
    let totalProfit = 0;
    const monthlyData = {};

    // 3. 売上と原価の集計処理
    salesData.forEach(sale => {
      const dateStr = sale[1] || "";
      if (!dateStr) return;
      
      // YYYY-MM形式に統一して月別のキーを作成
      const month = dateStr.substring(0, 7).split('/').join('-');
      if (!monthlyData[month]) monthlyData[month] = { sales: 0, profit: 0 };

      let saleTotal = 0;
      let saleCost = 0;

      // 伝票内の最大6つの商品を計算
      for (let i = 0; i < 6; i++) {
        const offset = 6 + (i * 3);
        const pCode = sale[offset];
        const pQty = Number(sale[offset + 1]) || 0;
        const pPrice = Number(sale[offset + 2]) || 0;

        if (pCode && pQty > 0) {
          const subSales = pQty * pPrice;
          const unitCost = costMap[pCode] || 0; // マスターから原価を引く
          const subCost = pQty * unitCost;

          saleTotal += subSales;
          saleCost += subCost;
        }
      }

      totalSales += saleTotal;
      totalProfit += (saleTotal - saleCost);
      monthlyData[month].sales += saleTotal;
      monthlyData[month].profit += (saleTotal - saleCost);
    });

    // 4. グラフ用にデータを整形 (月順でソート)
    const sortedMonths = Object.keys(monthlyData).sort();
    const labels = [];
    const salesArr = [];
    const profitArr = [];

    sortedMonths.forEach(m => {
      labels.push(m);
      salesArr.push(monthlyData[m].sales);
      profitArr.push(monthlyData[m].profit);
    });

    return {
      success: true,
      summary: { sales: totalSales, profit: totalProfit },
      chart: { labels: labels, sales: salesArr, profit: profitArr }
    };

  } catch (e) {
    return { success: false, message: e.toString() };
  } finally {
    lock.releaseLock();
  }
}
```

---

### 2. `index.html` の更新

UIとJavaScriptの両方を更新します。グラフ描画のために軽量な外部ライブラリ（Chart.js）を利用します。

**変更点 ①：Chart.js の読み込み追加**
`<head>` タグ内の `</style>` の直後に、以下の1行を追加してください。

```html
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
```

**変更点 ②：商品マスター画面の修正**
商品マスターのHTML一覧とモーダル部分（`<div id="p-product" ...>` 内）を以下のように置き換えます。原価用の列と入力フォームが追加されます。

```html
      <div id="p-product" class="page card hidden">
        <div style="display:flex; justify-content:space-between; align-items:center;">
          <h2>商品マスター</h2>
          <button onclick="openProductForm()" style="width:auto; padding:8px 15px;">＋新規登録</button>
        </div>
        <div style="margin-top: 15px; display: flex; gap: 10px;">
          <input type="text" id="prod-search" onkeyup="filterProduct()" placeholder="商品名、コードで検索..." style="flex: 1; margin: 0;">
          <div style="line-height: 40px; font-size: 13px; color: #666;"><span id="prod-count">0</span> 件表示</div>
        </div>
        <div style="overflow-x:auto; margin-top:20px;">
          <table style="width:100%; border-collapse:collapse;">
            <thead>
              <tr style="background:#eee; text-align:left;">
                <th style="padding:10px; border-bottom:2px solid #ddd;">コード</th>
                <th style="padding:10px; border-bottom:2px solid #ddd;">商品名</th>
                <th style="padding:10px; border-bottom:2px solid #ddd; text-align:right;">単価</th>
                <th style="padding:10px; border-bottom:2px solid #ddd; text-align:right;">原価</th>
                <th style="padding:10px; border-bottom:2px solid #ddd; text-align:center;">操作</th>
              </tr>
            </thead>
            <tbody id="product-list-body"></tbody>
          </table>
        </div>
        <div id="product-modal" class="hidden" style="position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); display:flex; justify-content:center; align-items:center; z-index:1000;">
          <div class="card" style="width:350px;">
            <h3 id="prod-form-title">商品登録</h3>
            <input type="hidden" id="prod-code">
            <label>商品名</label><input type="text" id="prod-name">
            <div style="display:flex; gap:10px;">
              <div style="flex:1;"><label>単価 (円)</label><input type="number" id="prod-price" placeholder="0"></div>
              <div style="flex:1;"><label>原価 (円)</label><input type="number" id="prod-cost" placeholder="0"></div>
            </div>
            <div style="display:flex; gap:10px; margin-top:10px;">
              <button onclick="saveProductData()" id="btn-prod-save">保存</button>
              <button onclick="closeProductForm()" style="background:#95a5a6;">キャンセル</button>
            </div>
          </div>
        </div>
      </div>
```

**変更点 ③：販売分析画面のUI作成**
`<div id="p-analysis" ...>` を見つけて、以下のダッシュボードデザインに置き換えます。

```html
      <div id="p-analysis" class="page card hidden">
        <h2>販売分析ダッシュボード</h2>
        <p style="color:#666; font-size:14px;">直近の売上および原価計算に基づく累計データと月別推移です。</p>
        
        <div style="display: flex; gap: 20px; margin: 20px 0;">
          <div style="flex: 1; background: #3498db; color: white; padding: 20px; border-radius: 8px; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
            <h3 style="margin-top:0; font-size:16px;">累計売上</h3>
            <div id="dash-total-sales" style="font-size: 28px; font-weight: bold; letter-spacing: 1px;">0 円</div>
          </div>
          <div style="flex: 1; background: #2ecc71; color: white; padding: 20px; border-radius: 8px; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
            <h3 style="margin-top:0; font-size:16px;">累計粗利</h3>
            <div id="dash-total-profit" style="font-size: 28px; font-weight: bold; letter-spacing: 1px;">0 円</div>
          </div>
          <div style="flex: 1; background: #f39c12; color: white; padding: 20px; border-radius: 8px; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
            <h3 style="margin-top:0; font-size:16px;">全体利益率</h3>
            <div id="dash-profit-margin" style="font-size: 28px; font-weight: bold;">0 %</div>
          </div>
        </div>

        <div style="width: 100%; background: #fff; padding: 15px; border: 1px solid #eee; border-radius: 8px; box-sizing: border-box;">
          <canvas id="analysisChart" height="100"></canvas>
        </div>
      </div>
```

**変更点 ④：JavaScript機能の更新**
`<script>` 内にある既存の `showPage` 関数周りや、商品マスターの各種関数を更新・追加します。該当する既存のコードを上書き、または追加してください。

```javascript
    /* --- SPA画面切り替え --- */
    // （元の showPage および下部の拡張 showPage を削除し、こちらに統合します）
    function showPage(pageId) {
      document.querySelectorAll('.page').forEach(p => p.classList.add('hidden'));
      document.getElementById('p-' + pageId).classList.remove('hidden');
      if (pageId === 'customer') initCustomerPage();
      if (pageId === 'product') initProductPage();
      if (pageId === 'sales') initSalesPage();
      if (pageId === 'analysis') initAnalysisPage();
    }

    /* --- 商品マスター関連の更新 --- */
    function renderProductTable(data) {
      const tbody = document.getElementById('product-list-body');
      tbody.innerHTML = '';
      data.forEach(row => {
        const cost = row[3] ? Number(row[3]) : 0; // 原価
        const tr = document.createElement('tr');
        tr.innerHTML = `
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[0]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[1]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd; text-align:right;">${Number(row[2]).toLocaleString()} 円</td>
          <td style="padding:10px; border-bottom:1px solid #ddd; text-align:right;">${cost.toLocaleString()} 円</td>
          <td style="padding:10px; border-bottom:1px solid #ddd; text-align:center;">
            <button onclick="editProduct('${row[0]}','${row[1]}','${row[2]}','${cost}')" style="width:auto; padding:4px 8px; font-size:12px; background:#f39c12;">編集</button>
            <button onclick="deleteProductData('${row[0]}')" style="width:auto; padding:4px 8px; font-size:12px; background:#e74c3c;">削除</button>
          </td>`;
        tbody.appendChild(tr);
      });
      filterProduct();
    }

    function openProductForm() {
      document.getElementById('prod-form-title').innerText = "商品登録（新規）";
      document.getElementById('prod-code').value = "";
      document.getElementById('prod-name').value = "";
      document.getElementById('prod-price').value = "";
      document.getElementById('prod-cost').value = "";
      document.getElementById('product-modal').classList.remove('hidden');
    }

    function editProduct(code, name, price, cost) {
      document.getElementById('prod-form-title').innerText = "商品編集 (" + code + ")";
      document.getElementById('prod-code').value = code;
      document.getElementById('prod-name').value = name;
      document.getElementById('prod-price').value = price;
      document.getElementById('prod-cost').value = cost || 0;
      document.getElementById('product-modal').classList.remove('hidden');
    }

    function saveProductData() {
      const btn = document.getElementById('btn-prod-save');
      const product = {
        code: document.getElementById('prod-code').value,
        name: document.getElementById('prod-name').value,
        price: document.getElementById('prod-price').value,
        cost: document.getElementById('prod-cost').value
      };
      if (!product.name || !product.price) return alert("商品名と単価は必須です");
      btn.disabled = true;
      google.script.run.withSuccessHandler(res => {
        btn.disabled = false;
        if (res.success) { closeProductForm(); initProductPage(); }
        else alert("エラー: " + res.message);
      }).saveProduct(product);
    }

    /* =========================================
       販売分析機能用 JavaScript (末尾等に追加)
       ========================================= */
    let chartInstance = null;

    function initAnalysisPage() {
      // 画面切り替え時にローディング表示
      document.getElementById('dash-total-sales').innerText = "計算中...";
      document.getElementById('dash-total-profit').innerText = "計算中...";
      
      google.script.run.withSuccessHandler(res => {
        if (!res.success) {
          alert("分析データの取得に失敗しました: " + res.message);
          return;
        }

        // サマリー表示の更新
        const totalSales = res.summary.sales;
        const totalProfit = res.summary.profit;
        const margin = totalSales > 0 ? ((totalProfit / totalSales) * 100).toFixed(1) : 0;

        document.getElementById('dash-total-sales').innerText = totalSales.toLocaleString() + " 円";
        document.getElementById('dash-total-profit').innerText = totalProfit.toLocaleString() + " 円";
        document.getElementById('dash-profit-margin').innerText = margin + " %";

        // グラフの描画
        const ctx = document.getElementById('analysisChart').getContext('2d');
        if (chartInstance) { chartInstance.destroy(); } // 既存グラフがあれば破棄

        chartInstance = new Chart(ctx, {
          type: 'bar',
          data: {
            labels: res.chart.labels,
            datasets: [
              {
                label: '売上金額 (円)',
                data: res.chart.sales,
                backgroundColor: 'rgba(52, 152, 219, 0.7)',
                borderColor: 'rgba(41, 128, 185, 1)',
                borderWidth: 1
              },
              {
                label: '粗利益 (円)',
                data: res.chart.profit,
                type: 'line',
                fill: false,
                borderColor: 'rgba(46, 204, 113, 1)',
                backgroundColor: 'rgba(46, 204, 113, 1)',
                tension: 0.1,
                borderWidth: 2
              }
            ]
          },
          options: {
            responsive: true,
            scales: { y: { beginAtZero: true } },
            plugins: {
              title: { display: true, text: '月別 売上・利益推移' }
            }
          }
        });

      }).getDashboardData();
    }
```

※変更箇所が多岐にわたるので，面倒だし，間違える可能性が高いので…

すみません。変更箇所が多いので，「Code.gs」と「index.html」の全コードを提示願います。

承知いたしました。変更箇所が多岐にわたるため、すべて統合した完全版のソースコードを以下に提示します。

既存のファイルをこちらのコードで上書き保存してください。

### 1. Code.gs（完全版）
商品マスターへの原価保存機能と、販売分析ダッシュボード用のデータ集計機能（排他制御・`getDisplayValues`使用）を含んでいます。

```javascript
/**
 * =========================================
 * 1. 基本設定
 * =========================================
 */
const DB_FILE_NAME = "販売管理データベース"; // 連携するスプレッドシート名
const AUTH_CODE_EXPIRE_MIN = 5; // 2段階認証コードの有効期限（分）

/**
 * =========================================
 * 2. Webアプリ起動処理
 * =========================================
 */
function doGet() {
  return HtmlService.createTemplateFromFile('index')
    .evaluate()
    .setTitle('販売管理システム')
    .addMetaTag('viewport', 'width=device-width, initial-scale=1')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

/**
 * =========================================
 * 3. データベース（スプレッドシート）取得処理
 * =========================================
 */
function getDbWithLock() {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000); // 競合を防ぐため最大30秒間待機
    const files = DriveApp.getFilesByName(DB_FILE_NAME);
    if (files.hasNext()) {
      return SpreadsheetApp.open(files.next());
    }
    throw new Error(`Googleドライブ内に「${DB_FILE_NAME}」が見つかりません。`);
  } catch (e) {
    throw new Error("現在システムが混み合っています。時間を置いてやり直してください。");
  }
}

/**
 * =========================================
 * 4. 認証処理
 * =========================================
 */
function authenticateStep1(userId, password) {
  const lock = LockService.getScriptLock();
  try {
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName('Users');
    if (!sheet) return { success: false, message: "Usersシートが存在しません" };
    
    const data = sheet.getDataRange().getValues();
    for (let i = 1; i < data.length; i++) {
      if (data[i][0].toString() === userId) {
        if (data[i][5] === "LOCKED") {
          return { success: false, message: "アカウントがロックされています。管理者に連絡してください。" };
        }

        if (data[i][1].toString() === password) {
          sheet.getRange(i + 1, 5).setValue(0);
          const code = Math.floor(100000 + Math.random() * 900000).toString();
          const props = PropertiesService.getScriptProperties();
          props.setProperty("2FA_" + userId, JSON.stringify({
            code: code,
            expiry: new Date().getTime() + (AUTH_CODE_EXPIRE_MIN * 60000)
          }));
          const email = data[i][3];
          MailApp.sendEmail({
            to: email,
            subject: "【販売管理システム】認証コードのご案内",
            body: `認証コードは [ ${code} ] です。\n${AUTH_CODE_EXPIRE_MIN}分以内に入力してください。`
          });
          return { success: true, needs2FA: true, userId: userId };
          
        } else {
          let failCount = Number(data[i][4] || 0) + 1;
          sheet.getRange(i + 1, 5).setValue(failCount);
          if (failCount >= 3) {
            sheet.getRange(i + 1, 6).setValue("LOCKED");
            return { success: false, message: "3回失敗したためアカウントをロックしました。" };
          }
          return { success: false, message: `パスワードが違います（あと${3 - failCount}回でロック）` };
        }
      }
    }
    return { success: false, message: "ユーザーIDが見つかりません。" };
  } catch (e) {
    return { success: false, message: "エラー: " + e.message };
  } finally {
    lock.releaseLock();
  }
}

function verify2FACode(userId, inputCode) {
  const props = PropertiesService.getScriptProperties();
  const storedData = props.getProperty("2FA_" + userId);
  if (!storedData) return { success: false, message: "セッションが切れました。最初からやり直してください。" };
  
  const auth = JSON.parse(storedData);
  const now = new Date().getTime();
  if (now > auth.expiry) return { success: false, message: "認証コードの有効期限が切れています。" };
  if (auth.code === inputCode) {
    props.deleteProperty("2FA_" + userId);
    const lock = LockService.getScriptLock();
    try {
      const ss = getDbWithLock();
      const rows = ss.getSheetByName('Users').getDataRange().getValues();
      const userRow = rows.find(r => r[0].toString() === userId);
      return { success: true, userName: userRow[2] };
    } finally {
      lock.releaseLock();
    }
  } else {
    return { success: false, message: "認証コードが正しくありません。" };
  }
}

/**
 * =========================================
 * 5. 汎用データ取得
 * =========================================
 */
function getSheetData(sheetName) {
  const lock = LockService.getScriptLock();
  try {
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName(sheetName);
    if (!sheet) return [];
    return sheet.getDataRange().getValues();
  } catch (e) {
    return [];
  } finally {
    lock.releaseLock();
  }
}

/**
 * =========================================
 * 6. 得意先マスター管理
 * =========================================
 */
function getCustomers() {
  const data = getSheetData('Customers');
  if (data.length === 0) return [];
  return data.slice(1);
}

function saveCustomer(customer) {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000);
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName('Customers');
    const data = sheet.getDataRange().getValues();
    let targetRow = -1;

    if (!customer.code) {
      let maxNum = 0;
      for (let i = 1; i < data.length; i++) {
        const codeNum = parseInt(data[i][0].toString().replace('C', ''), 10);
        if (codeNum > maxNum) maxNum = codeNum;
      }
      customer.code = "C" + ("000" + (maxNum + 1)).slice(-3);
      targetRow = sheet.getLastRow() + 1;
    } else {
      for (let i = 1; i < data.length; i++) {
        if (data[i][0] === customer.code) {
          targetRow = i + 1;
          break;
        }
      }
    }

    if (targetRow > 0) {
      sheet.getRange(targetRow, 1, 1, 5).setValues([[customer.code, customer.name, customer.zip, customer.address, customer.tel]]);
      return { success: true, code: customer.code };
    }
    return { success: false, message: "対象データが見つかりません" };
  } catch (e) {
    return { success: false, message: e.toString() };
  } finally {
    lock.releaseLock();
  }
}

function deleteCustomer(code) {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000);
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName('Customers');
    const data = sheet.getDataRange().getValues();
    for (let i = 1; i < data.length; i++) {
      if (data[i][0] === code) {
        sheet.deleteRow(i + 1);
        return { success: true };
      }
    }
    return { success: false };
  } finally {
    lock.releaseLock();
  }
}

/**
 * =========================================
 * 7. 商品マスター管理
 * =========================================
 */
function getProducts() {
  const data = getSheetData('Products');
  if (data.length === 0) return [];
  return data.slice(1);
}

function saveProduct(product) {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000);
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName('Products');
    // 全て文字列として扱うため getDisplayValues に変更
    const data = sheet.getDataRange().getDisplayValues();
    let targetRow = -1;

    if (!product.code) {
      let maxNum = 0;
      for (let i = 1; i < data.length; i++) {
        const codeNum = parseInt(data[i][0].toString().replace('P', ''), 10);
        if (!isNaN(codeNum) && codeNum > maxNum) maxNum = codeNum;
      }
      product.code = "P" + ("000" + (maxNum + 1)).slice(-3);
      targetRow = sheet.getLastRow() + 1;
    } else {
      for (let i = 1; i < data.length; i++) {
        if (data[i][0] === product.code) {
          targetRow = i + 1;
          break;
        }
      }
    }

    if (targetRow > 0) {
      // D列（原価）を含めた4列のデータを保存
      sheet.getRange(targetRow, 1, 1, 4).setValues([[product.code, product.name, product.price, product.cost]]);
      return { success: true, code: product.code };
    }
    return { success: false, message: "対象データが見つかりません" };
  } catch (e) {
    return { success: false, message: e.toString() };
  } finally {
    lock.releaseLock();
  }
}

function deleteProduct(code) {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000);
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName('Products');
    const data = sheet.getDataRange().getValues();
    for (let i = 1; i < data.length; i++) {
      if (data[i][0] === code) {
        sheet.deleteRow(i + 1);
        return { success: true };
      }
    }
    return { success: false };
  } finally {
    lock.releaseLock();
  }
}

/**
 * =========================================
 * 8. 権限付与用ダミー関数（初回のみエディタから実行）
 * =========================================
 */
function askPermission() {
  DriveApp.getFilesByName('test');
  SpreadsheetApp.getActive();
  MailApp.sendEmail(Session.getActiveUser().getEmail(), '権限テスト', 'これはテストです');
  console.log("全ての権限が承認されています！");
}

/**
 * =========================================
 * 9. 売上管理機能・印刷データ取得
 * =========================================
 */
function getSales() {
  const lock = LockService.getScriptLock();
  try {
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName('Sales');
    if (!sheet) return [];
    // エラー防止のため getDisplayValues を使用し全て文字列として扱う
    const data = sheet.getDataRange().getDisplayValues();
    if (data.length === 0) return [];
    return data.slice(1);
  } catch (e) {
    return [];
  } finally {
    lock.releaseLock();
  }
}

function saveSale(sale) {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000);
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName('Sales');
    const data = sheet.getDataRange().getDisplayValues();
    let targetRow = -1;
    if (!sale.saleNo) {
      let maxNum = 0;
      for (let i = 1; i < data.length; i++) {
        const num = parseInt(data[i][0].split('S').join(''), 10);
        if (!isNaN(num) && num > maxNum) maxNum = num;
      }
      sale.saleNo = "S" + ("0000" + (maxNum + 1)).slice(-4);
      targetRow = sheet.getLastRow() + 1;
    } else {
      for (let i = 1; i < data.length; i++) {
        if (data[i][0] === sale.saleNo) {
          targetRow = i + 1;
          break;
        }
      }
    }

    if (targetRow > 0) {
      // Salesシート: 伝票番号(1), 日付(2), 得意先C(3), 得意先名(4), 合計(5), 備考(6), (商品C, 数量, 単価)x6 = 24列
      let rowData = [
        sale.saleNo, sale.date, sale.custCode, sale.custName, sale.totalAmount, sale.memo
      ];
      for (let i = 0; i < 6; i++) {
        if (sale.items && sale.items[i]) {
          rowData.push(sale.items[i].prodCode, sale.items[i].qty, sale.items[i].price);
        } else {
          rowData.push("", "", "");
        }
      }
      sheet.getRange(targetRow, 1, 1, rowData.length).setValues([rowData]);
      return { success: true, saleNo: sale.saleNo };
    }
    return { success: false, message: "対象データが見つかりません" };
  } catch (e) {
    return { success: false, message: e.toString() };
  } finally {
    lock.releaseLock();
  }
}

function deleteSale(saleNo) {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000);
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName('Sales');
    const data = sheet.getDataRange().getDisplayValues();
    for (let i = 1; i < data.length; i++) {
      if (data[i][0] === saleNo) {
        sheet.deleteRow(i + 1);
        return { success: true };
      }
    }
    return { success: false };
  } finally {
    lock.releaseLock();
  }
}

function getPrintData(saleNo) {
  const lock = LockService.getScriptLock();
  try {
    const ss = getDbWithLock();
    // Company情報の取得
    const compSheet = ss.getSheetByName('Company');
    const company = compSheet ? (compSheet.getDataRange().getDisplayValues()[1] || []) : [];
    
    // 対象のSales行を取得
    const salesSheet = ss.getSheetByName('Sales');
    const salesData = salesSheet ? salesSheet.getDataRange().getDisplayValues() : [];
    let saleRow = null;
    for (let i = 1; i < salesData.length; i++) {
      if (salesData[i][0] === saleNo) {
        saleRow = salesData[i];
        break;
      }
    }
    
    // 商品マスター情報の取得(名前表示用)
    const prodSheet = ss.getSheetByName('Products');
    const products = prodSheet ? prodSheet.getDataRange().getDisplayValues().slice(1) : [];

    return { success: true, company: company, sale: saleRow, products: products };
  } catch (e) {
    return { success: false };
  } finally {
    lock.releaseLock();
  }
}

/**
 * =========================================
 * 10. 請求管理機能（一括データ集計）
 * =========================================
 */
function getInvoiceBulkData(monthStr) {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000);
    const ss = getDbWithLock();
    // 各シートから getDisplayValues() を用いて安全に文字列として一括取得
    const compSheet = ss.getSheetByName('Company');
    const company = compSheet ? (compSheet.getDataRange().getDisplayValues()[1] || []) : [];

    const custSheet = ss.getSheetByName('Customers');
    const custData = custSheet ? custSheet.getDataRange().getDisplayValues().slice(1) : [];
    const prodSheet = ss.getSheetByName('Products');
    const prodData = prodSheet ? prodSheet.getDataRange().getDisplayValues().slice(1) : [];

    const salesSheet = ss.getSheetByName('Sales');
    const salesData = salesSheet ? salesSheet.getDataRange().getDisplayValues().slice(1) : [];

    // 日付フォーマットの揺らぎ（YYYY-MM と YYYY/MM）に対応させるため置換処理を使用
    const targetPrefix1 = monthStr;
    const targetPrefix2 = monthStr.split('-').join('/');

    // 該当月の伝票をフィルタリング
    const monthlySales = salesData.filter(row => {
       const dateStr = row[1] || "";
       return dateStr.indexOf(targetPrefix1) === 0 || dateStr.indexOf(targetPrefix2) === 0;
    });
    if (monthlySales.length === 0) {
       return { success: false, message: "指定された月の売上データがありません。" };
    }

    // 得意先コードごとに明細をグループ化
    const invoiceMap = {};
    monthlySales.forEach(sale => {
       const saleNo = sale[0];
       const date = sale[1];
       const custCode = sale[2];

       if (!invoiceMap[custCode]) {
         const cMatch = custData.find(c => c[0] === custCode);
         invoiceMap[custCode] = {
           custCode: custCode,
           custName: cMatch ? cMatch[1] : sale[3],
           custZip: cMatch ? cMatch[2] : "",
           custAddr: cMatch ? cMatch[3] : "",
           custTel: cMatch ? cMatch[4] : "",
           totalAmount: 0,
           items: []
         };
       }

       // 伝票内にある最大6つの商品データを走査
       for (let i = 0; i < 6; i++) {
         const offset = 6 + (i * 3);
         const pCode = sale[offset];
         const pQty = Number(sale[offset + 1]);
         const pPrice = Number(sale[offset + 2]);

         if (pCode && pQty > 0) {
           const pMatch = prodData.find(p => p[0] === pCode);
           const pName = pMatch ? pMatch[1] : "不明な商品";
           const subTotal = pQty * pPrice;
           
           invoiceMap[custCode].totalAmount += subTotal;
           invoiceMap[custCode].items.push({
             date: date,
             saleNo: saleNo,
             pCode: pCode,
             pName: pName,
             qty: pQty,
             price: pPrice,
             subTotal: subTotal
           });
         }
       }
    });
    // オブジェクトから配列に変換し、日付順にソート
    const results = [];
    for (let code in invoiceMap) {
       const inv = invoiceMap[code];
       inv.items.sort((a, b) => {
         if (a.date < b.date) return -1;
         if (a.date > b.date) return 1;
         return 0;
       });
       results.push(inv);
    }

    return {
      success: true,
      company: company,
      invoices: results
    };
  } catch (e) {
    return { success: false, message: e.toString() };
  } finally {
    lock.releaseLock();
  }
}

/**
 * HTMLファイルから請求書テンプレートを文字列として取得
 */
function getTemplateHtmlFromFile() {
  return HtmlService.createHtmlOutputFromFile('請求書').getContent();
}

/**
 * 印刷用データ取得時、一緒にテンプレートも取得するように統合
 */
function getInvoiceBulkDataWithTemplate(monthStr) {
  const data = getInvoiceBulkData(monthStr); 
  if (data.success) {
    data.templateHtml = getTemplateHtmlFromFile();
  }
  return data;
}

/**
 * =========================================
 * 11. 販売分析機能
 * =========================================
 */
function getDashboardData() {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000); // 排他制御
    const ss = getDbWithLock();
    
    // 1. 商品マスターから原価マップを作成 (getDisplayValuesで取得)
    const prodSheet = ss.getSheetByName('Products');
    const prodData = prodSheet ? prodSheet.getDataRange().getDisplayValues().slice(1) : [];
    const costMap = {};
    prodData.forEach(p => { 
      costMap[p[0]] = Number(p[3]) || 0; // p[0]:コード, p[3]:原価
    });

    // 2. 売上データを取得 (getDisplayValuesで取得)
    const salesSheet = ss.getSheetByName('Sales');
    const salesData = salesSheet ? salesSheet.getDataRange().getDisplayValues().slice(1) : [];

    let totalSales = 0;
    let totalProfit = 0;
    const monthlyData = {};

    // 3. 売上と原価の集計処理
    salesData.forEach(sale => {
      const dateStr = sale[1] || "";
      if (!dateStr) return;
      
      // YYYY-MM形式に統一して月別のキーを作成
      const month = dateStr.substring(0, 7).split('/').join('-');
      if (!monthlyData[month]) monthlyData[month] = { sales: 0, profit: 0 };

      let saleTotal = 0;
      let saleCost = 0;

      // 伝票内の最大6つの商品を計算
      for (let i = 0; i < 6; i++) {
        const offset = 6 + (i * 3);
        const pCode = sale[offset];
        const pQty = Number(sale[offset + 1]) || 0;
        const pPrice = Number(sale[offset + 2]) || 0;

        if (pCode && pQty > 0) {
          const subSales = pQty * pPrice;
          const unitCost = costMap[pCode] || 0; // マスターから原価を引く
          const subCost = pQty * unitCost;

          saleTotal += subSales;
          saleCost += subCost;
        }
      }

      totalSales += saleTotal;
      totalProfit += (saleTotal - saleCost);
      monthlyData[month].sales += saleTotal;
      monthlyData[month].profit += (saleTotal - saleCost);
    });

    // 4. グラフ用にデータを整形 (月順でソート)
    const sortedMonths = Object.keys(monthlyData).sort();
    const labels = [];
    const salesArr = [];
    const profitArr = [];

    sortedMonths.forEach(m => {
      labels.push(m);
      salesArr.push(monthlyData[m].sales);
      profitArr.push(monthlyData[m].profit);
    });

    return {
      success: true,
      summary: { sales: totalSales, profit: totalProfit },
      chart: { labels: labels, sales: salesArr, profit: profitArr }
    };

  } catch (e) {
    return { success: false, message: e.toString() };
  } finally {
    lock.releaseLock();
  }
}
```

---

### 2. index.html（完全版）
Chart.jsの読み込み、商品マスターへの原価UI追加、販売分析ダッシュボードのUIおよび処理を追加しています。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <base target="_top">
  <style>
    /* ========== 全体設定 ========== */
    :root { --primary: #2c3e50; --bg: #f4f7f6; --accent: #3498db; }
    body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; background: var(--bg); color: #333; display: flex; flex-direction: column; height: 100vh; }
    .hidden { display: none !important; }
    
    /* ========== ログイン画面 ========== */
    #view-login { display: flex; justify-content: center; align-items: center; height: 100vh; }
    .login-box { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); width: 320px; }
    
    /* ========== メインレイアウト ========== */
    #view-main { display: flex; flex-direction: column; height: 100%; }
    nav { background: var(--primary); color: white; padding: 0 20px; display: flex; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
    nav h3 { margin-right: 30px; }
    nav ul { list-style: none; display: flex; gap: 5px; margin: 0; padding: 0; }
    nav li { padding: 15px 20px; cursor: pointer; transition: 0.2s; font-weight: bold; font-size: 14px; }
    nav li:hover { background: #34495e; border-radius: 4px; }
    .logout-btn { margin-left: auto; color: #e74c3c; cursor: pointer; padding: 15px; font-weight: bold; }
    
    main { flex: 1; padding: 20px; overflow-y: auto; }
    .card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
    
    /* ========== フォーム部品 ========== */
    input { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; }
    button { padding: 12px; background: var(--accent); color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 16px; margin-top: 10px; width: 100%; }
    button:disabled { background: #ccc; cursor: not-allowed; }
    button:hover:not(:disabled) { background: #2980b9; }
    #login-msg { color: #e74c3c; font-size: 13px; margin-top: 10px; font-weight: bold; text-align: center; }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>

  <div id="view-login">
    <div class="login-box">
      <h2 style="text-align: center; margin-bottom: 20px;">販売管理システム</h2>
      <div id="step1">
        <label style="font-size: 12px; font-weight: bold;">ユーザーID</label>
        <input type="text" id="uid" placeholder="IDを入力">
        <label style="font-size: 12px; font-weight: bold;">パスワード</label>
        <input type="password" id="upw" placeholder="パスワードを入力">
        <button id="btn-login" onclick="onLoginStep1()">ログイン</button>
      </div>
      <div id="step2" class="hidden">
        <p style="font-size: 13px; color: #555;">登録されたメールアドレスに6桁の認証コードを送信しました。</p>
        <label style="font-size: 12px; font-weight: bold;">認証コード</label>
        <input type="text" id="auth-code" placeholder="123456" maxlength="6" style="text-align: center; font-size: 20px; letter-spacing: 5px;">
        <button id="btn-verify" onclick="onLoginStep2()">認証する</button>
        <a href="#" onclick="location.reload()" style="font-size: 12px; display: block; text-align: center; margin-top: 15px; color: #666;">最初からやり直す</a>
      </div>
      <p id="login-msg"></p>
    </div>
  </div>

  <div id="view-main" class="hidden">
    <nav>
      <h3>販売管理 v1.0</h3>
      <ul>
        <li onclick="showPage('customer')">得意先マスター</li>
        <li onclick="showPage('product')">商品マスター</li>
        <li onclick="showPage('sales')">売上管理</li>
        <li onclick="showPage('invoice')">請求管理</li>
        <li onclick="showPage('analysis')">販売分析</li>
      </ul>
      <div class="logout-btn" onclick="location.reload()">ログアウト</div>
    </nav>
    
    <main>
      <div id="p-home" class="page card">
        <h2>ようこそ、<span id="display-name"></span> さん</h2>
        <p>上部のメニューから操作を選択してください。</p>
      </div>

      <div id="p-customer" class="page card hidden">
        <div style="display:flex; justify-content:space-between; align-items:center;">
          <h2>得意先マスター</h2>
          <button onclick="openCustomerForm()" style="width:auto; padding:8px 15px;">＋新規登録</button>
        </div>
        <div style="margin-top: 15px; display: flex; gap: 10px;">
          <input type="text" id="cust-search" onkeyup="filterCustomer()" placeholder="得意先名、コード、住所などで検索..." style="flex: 1; margin: 0;">
          <div style="line-height: 40px; font-size: 13px; color: #666;"><span id="cust-count">0</span> 件表示</div>
        </div>
        <div style="overflow-x:auto; margin-top:20px;">
          <table style="width:100%; border-collapse:collapse;">
            <thead>
              <tr style="background:#eee; text-align:left;">
                <th style="padding:10px; border-bottom:2px solid #ddd;">コード</th>
                <th style="padding:10px; border-bottom:2px solid #ddd;">得意先名</th>
                <th style="padding:10px; border-bottom:2px solid #ddd;">郵便番号</th>
                <th style="padding:10px; border-bottom:2px solid #ddd;">住所</th>
                <th style="padding:10px; border-bottom:2px solid #ddd;">電話番号</th>
                <th style="padding:10px; border-bottom:2px solid #ddd;">操作</th>
              </tr>
            </thead>
            <tbody id="customer-list-body"></tbody>
          </table>
        </div>
        <div id="customer-modal" class="hidden" style="position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); display:flex; justify-content:center; align-items:center; z-index:1000;">
          <div class="card" style="width:400px;">
            <h3 id="form-title">得意先登録</h3>
            <input type="hidden" id="cust-code">
            <label>得意先名</label><input type="text" id="cust-name">
            <label>郵便番号</label><input type="text" id="cust-zip" placeholder="000-0000">
            <label>住所</label><input type="text" id="cust-address">
            <label>電話番号</label><input type="text" id="cust-tel" placeholder="00-0000-0000">
            <div style="display:flex; gap:10px; margin-top:10px;">
              <button onclick="saveCustomerData()" id="btn-cust-save">保存</button>
              <button onclick="closeCustomerForm()" style="background:#95a5a6;">キャンセル</button>
            </div>
          </div>
        </div>
      </div>
      
      <div id="p-product" class="page card hidden">
        <div style="display:flex; justify-content:space-between; align-items:center;">
          <h2>商品マスター</h2>
          <button onclick="openProductForm()" style="width:auto; padding:8px 15px;">＋新規登録</button>
        </div>
        <div style="margin-top: 15px; display: flex; gap: 10px;">
          <input type="text" id="prod-search" onkeyup="filterProduct()" placeholder="商品名、コードで検索..." style="flex: 1; margin: 0;">
          <div style="line-height: 40px; font-size: 13px; color: #666;"><span id="prod-count">0</span> 件表示</div>
        </div>
        <div style="overflow-x:auto; margin-top:20px;">
          <table style="width:100%; border-collapse:collapse;">
            <thead>
              <tr style="background:#eee; text-align:left;">
                <th style="padding:10px; border-bottom:2px solid #ddd;">コード</th>
                <th style="padding:10px; border-bottom:2px solid #ddd;">商品名</th>
                <th style="padding:10px; border-bottom:2px solid #ddd; text-align:right;">単価</th>
                <th style="padding:10px; border-bottom:2px solid #ddd; text-align:right;">原価</th>
                <th style="padding:10px; border-bottom:2px solid #ddd; text-align:center;">操作</th>
              </tr>
            </thead>
            <tbody id="product-list-body"></tbody>
          </table>
        </div>
        <div id="product-modal" class="hidden" style="position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); display:flex; justify-content:center; align-items:center; z-index:1000;">
          <div class="card" style="width:350px;">
            <h3 id="prod-form-title">商品登録</h3>
            <input type="hidden" id="prod-code">
            <label>商品名</label><input type="text" id="prod-name">
            <div style="display:flex; gap:10px;">
              <div style="flex:1;"><label>単価 (円)</label><input type="number" id="prod-price" placeholder="0"></div>
              <div style="flex:1;"><label>原価 (円)</label><input type="number" id="prod-cost" placeholder="0"></div>
            </div>
            <div style="display:flex; gap:10px; margin-top:10px;">
              <button onclick="saveProductData()" id="btn-prod-save">保存</button>
              <button onclick="closeProductForm()" style="background:#95a5a6;">キャンセル</button>
            </div>
          </div>
        </div>
      </div>
      
      <div id="p-sales" class="page card hidden">
        <div style="display:flex; justify-content:space-between; align-items:center;">
          <h2>売上管理</h2>
          <button onclick="openSalesForm()" style="width:auto; padding:8px 15px;">＋新規伝票</button>
        </div>
        <div style="margin-top: 15px; display: flex; gap: 10px;">
          <input type="text" id="sales-search" onkeyup="filterSales()" placeholder="伝票番号、得意先名などで検索..." style="flex: 1; margin: 0;">
          <div style="line-height: 40px; font-size: 13px; color: #666;"><span id="sales-count">0</span> 件表示</div>
        </div>
        
        <datalist id="dl-customers"></datalist>
        <datalist id="dl-products"></datalist>

        <div style="overflow-x:auto; margin-top:20px;">
          <table style="width:100%; border-collapse:collapse;">
            <thead>
              <tr style="background:#eee; text-align:left;">
                <th style="padding:10px; border-bottom:2px solid #ddd;">伝票番号</th>
                <th style="padding:10px; border-bottom:2px solid #ddd;">日付</th>
                <th style="padding:10px; border-bottom:2px solid #ddd;">得意先</th>
                <th style="padding:10px; border-bottom:2px solid #ddd; text-align:right;">合計金額</th>
                <th style="padding:10px; border-bottom:2px solid #ddd; text-align:center;">操作</th>
              </tr>
            </thead>
            <tbody id="sales-list-body"></tbody>
          </table>
        </div>

        <div id="sales-modal" class="hidden" style="position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); display:flex; justify-content:center; align-items:center; z-index:1000;">
          <div class="card" style="width:700px; max-height:90vh; overflow-y:auto;">
            <h3 id="sales-form-title">売上伝票登録</h3>
            <div style="display:flex; gap:10px;">
              <div style="flex:1;"><label>伝票番号</label><input type="text" id="sale-no" readonly placeholder="自動採番" style="background:#eee;"></div>
              <div style="flex:1;"><label>日付</label><input type="date" id="sale-date"></div>
            </div>
            <label>得意先 (コードまたは名前で検索)</label>
            <input type="text" id="sale-cust" list="dl-customers" placeholder="得意先を選択...">
            
            <table style="width:100%; margin-top:15px; border-collapse:collapse; font-size:14px;">
              <thead>
                <tr style="background:#f9f9f9;">
                  <th style="padding:5px; text-align:left;">商品 (コードまたは名前)</th>
                  <th style="padding:5px; width:100px;">単価</th>
                  <th style="padding:5px; width:80px;">数量</th>
                  <th style="padding:5px; width:100px;">金額</th>
                </tr>
              </thead>
              <tbody id="sales-items-container">
                </tbody>
            </table>
            
            <div style="display:flex; justify-content:flex-end; margin-top:15px; align-items:center; gap:15px;">
              <div style="font-weight:bold;">合計金額: <span id="sale-total-display" style="font-size:20px; color:var(--accent);">0</span> 円</div>
              <input type="hidden" id="sale-total-val" value="0">
            </div>

            <label>備考</label><input type="text" id="sale-memo">
            
            <div style="display:flex; gap:10px; margin-top:15px;">
              <button onclick="saveSalesData()" id="btn-sales-save">保存</button>
              <button onclick="closeSalesForm()" style="background:#95a5a6;">キャンセル</button>
            </div>
          </div>
        </div>
      </div>

      <div id="p-invoice" class="page card hidden">
        <h2>請求管理</h2>
        <p>対象月を選択し、その月に売上があった全得意先の請求書を一括生成します。</p>
        <div style="display:flex; gap:15px; align-items:center; margin-top:20px;">
          <label style="font-weight:bold;">請求月:</label>
          <input type="month" id="invoice-month" style="width:200px; margin:0;">
          <button onclick="generateInvoices(this)" style="width:auto; padding:10px 20px;">一括請求書作成・印刷</button>
        </div>
        <p id="invoice-msg" style="margin-top:15px; color:#e74c3c; font-weight:bold;"></p>
      </div>

      <div id="p-analysis" class="page card hidden">
        <h2>販売分析ダッシュボード</h2>
        <p style="color:#666; font-size:14px;">直近の売上および原価計算に基づく累計データと月別推移です。</p>
        
        <div style="display: flex; gap: 20px; margin: 20px 0;">
          <div style="flex: 1; background: #3498db; color: white; padding: 20px; border-radius: 8px; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
            <h3 style="margin-top:0; font-size:16px;">累計売上</h3>
            <div id="dash-total-sales" style="font-size: 28px; font-weight: bold; letter-spacing: 1px;">0 円</div>
          </div>
          <div style="flex: 1; background: #2ecc71; color: white; padding: 20px; border-radius: 8px; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
            <h3 style="margin-top:0; font-size:16px;">累計粗利</h3>
            <div id="dash-total-profit" style="font-size: 28px; font-weight: bold; letter-spacing: 1px;">0 円</div>
          </div>
          <div style="flex: 1; background: #f39c12; color: white; padding: 20px; border-radius: 8px; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
            <h3 style="margin-top:0; font-size:16px;">全体利益率</h3>
            <div id="dash-profit-margin" style="font-size: 28px; font-weight: bold;">0 %</div>
          </div>
        </div>

        <div style="width: 100%; background: #fff; padding: 15px; border: 1px solid #eee; border-radius: 8px; box-sizing: border-box;">
          <canvas id="analysisChart" height="100"></canvas>
        </div>
      </div>
    </main>
  </div>

  <script>
    let currentUserId = "";

    /* --- ログイン --- */
    function onLoginStep1() {
      const uid = document.getElementById('uid').value;
      const upw = document.getElementById('upw').value;
      const btn = document.getElementById('btn-login');
      const msg = document.getElementById('login-msg');
      if (!uid || !upw) return msg.innerText = "IDとパスワードを入力してください。";
      btn.disabled = true; btn.innerText = "確認中..."; msg.innerText = "";
      
      google.script.run.withSuccessHandler(res => {
        btn.disabled = false; btn.innerText = "ログイン";
        if (res.success && res.needs2FA) {
          currentUserId = res.userId;
          document.getElementById('step1').classList.add('hidden');
          document.getElementById('step2').classList.remove('hidden');
        } else msg.innerText = res.message;
      }).authenticateStep1(uid, upw);
    }

    function onLoginStep2() {
      const code = document.getElementById('auth-code').value;
      const btn = document.getElementById('btn-verify');
      const msg = document.getElementById('login-msg');
      if (!code) return msg.innerText = "コードを入力してください。";
      btn.disabled = true; btn.innerText = "認証中..."; msg.innerText = "";
      
      google.script.run.withSuccessHandler(res => {
        btn.disabled = false; btn.innerText = "認証する";
        if (res.success) {
          document.getElementById('display-name').innerText = res.userName;
          document.getElementById('view-login').classList.add('hidden');
          document.getElementById('view-main').classList.remove('hidden');
          showPage('home');
        } else msg.innerText = res.message;
      }).verify2FACode(currentUserId, code);
    }

    /* --- SPA画面切り替え --- */
    function showPage(pageId) {
      document.querySelectorAll('.page').forEach(p => p.classList.add('hidden'));
      document.getElementById('p-' + pageId).classList.remove('hidden');
      if (pageId === 'customer') initCustomerPage();
      if (pageId === 'product') initProductPage();
      if (pageId === 'sales') initSalesPage();
      if (pageId === 'analysis') initAnalysisPage();
    }

    /* --- 検索・絞り込み共通機能 --- */
    function execFilter(inputId, tbodyId, countId) {
      const query = document.getElementById(inputId).value.toLowerCase();
      const rows = document.getElementById(tbodyId).getElementsByTagName('tr');
      let visibleCount = 0;
      for (const row of rows) {
        if (row.textContent.toLowerCase().includes(query)) {
          row.style.display = ""; visibleCount++;
        } else row.style.display = "none";
      }
      document.getElementById(countId).innerText = visibleCount;
    }
    function filterCustomer() { execFilter('cust-search', 'customer-list-body', 'cust-count'); }
    function filterProduct() { execFilter('prod-search', 'product-list-body', 'prod-count'); }

    /* --- 得意先マスター --- */
    function initCustomerPage() { google.script.run.withSuccessHandler(renderCustomerTable).getCustomers(); }
    
    function renderCustomerTable(data) {
      const tbody = document.getElementById('customer-list-body');
      tbody.innerHTML = '';
      data.forEach(row => {
        const tr = document.createElement('tr');
        tr.innerHTML = `
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[0]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[1]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[2]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[3]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[4]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd; text-align:center;">
            <button onclick="editCustomer('${row[0]}','${row[1]}','${row[2]}','${row[3]}','${row[4]}')" style="width:auto; padding:4px 8px; font-size:12px; background:#f39c12;">編集</button>
            <button onclick="deleteCustomerData('${row[0]}')" style="width:auto; padding:4px 8px; font-size:12px; background:#e74c3c;">削除</button>
          </td>`;
        tbody.appendChild(tr);
      });
      filterCustomer();
    }

    function openCustomerForm() {
      document.getElementById('form-title').innerText = "得意先登録（新規）";
      document.getElementById('cust-code').value = "";
      document.getElementById('cust-name').value = "";
      document.getElementById('cust-zip').value = "";
      document.getElementById('cust-address').value = "";
      document.getElementById('cust-tel').value = "";
      document.getElementById('customer-modal').classList.remove('hidden');
    }

    function editCustomer(code, name, zip, addr, tel) {
      document.getElementById('form-title').innerText = "得意先編集 (" + code + ")";
      document.getElementById('cust-code').value = code;
      document.getElementById('cust-name').value = name;
      document.getElementById('cust-zip').value = zip;
      document.getElementById('cust-address').value = addr;
      document.getElementById('cust-tel').value = tel;
      document.getElementById('customer-modal').classList.remove('hidden');
    }

    function closeCustomerForm() { document.getElementById('customer-modal').classList.add('hidden'); }

    function saveCustomerData() {
      const btn = document.getElementById('btn-cust-save');
      const customer = {
        code: document.getElementById('cust-code').value,
        name: document.getElementById('cust-name').value,
        zip: document.getElementById('cust-zip').value,
        address: document.getElementById('cust-address').value,
        tel: document.getElementById('cust-tel').value
      };
      if (!customer.name) return alert("得意先名を入力してください");
      btn.disabled = true;
      google.script.run.withSuccessHandler(res => {
        btn.disabled = false;
        if (res.success) { closeCustomerForm(); initCustomerPage(); }
        else alert("エラー: " + res.message);
      }).saveCustomer(customer);
    }

    function deleteCustomerData(code) {
      if (!confirm(code + " を削除しますか？")) return;
      google.script.run.withSuccessHandler(res => { if (res.success) initCustomerPage(); }).deleteCustomer(code);
    }

    /* --- 商品マスター --- */
    function initProductPage() { google.script.run.withSuccessHandler(renderProductTable).getProducts(); }
    
    function renderProductTable(data) {
      const tbody = document.getElementById('product-list-body');
      tbody.innerHTML = '';
      data.forEach(row => {
        const cost = row[3] ? Number(row[3]) : 0; // 原価
        const tr = document.createElement('tr');
        tr.innerHTML = `
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[0]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[1]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd; text-align:right;">${Number(row[2]).toLocaleString()} 円</td>
          <td style="padding:10px; border-bottom:1px solid #ddd; text-align:right;">${cost.toLocaleString()} 円</td>
          <td style="padding:10px; border-bottom:1px solid #ddd; text-align:center;">
            <button onclick="editProduct('${row[0]}','${row[1]}','${row[2]}','${cost}')" style="width:auto; padding:4px 8px; font-size:12px; background:#f39c12;">編集</button>
            <button onclick="deleteProductData('${row[0]}')" style="width:auto; padding:4px 8px; font-size:12px; background:#e74c3c;">削除</button>
          </td>`;
        tbody.appendChild(tr);
      });
      filterProduct();
    }

    function openProductForm() {
      document.getElementById('prod-form-title').innerText = "商品登録（新規）";
      document.getElementById('prod-code').value = "";
      document.getElementById('prod-name').value = "";
      document.getElementById('prod-price').value = "";
      document.getElementById('prod-cost').value = "";
      document.getElementById('product-modal').classList.remove('hidden');
    }

    function editProduct(code, name, price, cost) {
      document.getElementById('prod-form-title').innerText = "商品編集 (" + code + ")";
      document.getElementById('prod-code').value = code;
      document.getElementById('prod-name').value = name;
      document.getElementById('prod-price').value = price;
      document.getElementById('prod-cost').value = cost || 0;
      document.getElementById('product-modal').classList.remove('hidden');
    }

    function closeProductForm() { document.getElementById('product-modal').classList.add('hidden'); }

    function saveProductData() {
      const btn = document.getElementById('btn-prod-save');
      const product = {
        code: document.getElementById('prod-code').value,
        name: document.getElementById('prod-name').value,
        price: document.getElementById('prod-price').value,
        cost: document.getElementById('prod-cost').value
      };
      if (!product.name || !product.price) return alert("商品名と単価は必須です");
      btn.disabled = true;
      google.script.run.withSuccessHandler(res => {
        btn.disabled = false;
        if (res.success) { closeProductForm(); initProductPage(); }
        else alert("エラー: " + res.message);
      }).saveProduct(product);
    }

    function deleteProductData(code) {
      if (!confirm(code + " を削除しますか？")) return;
      google.script.run.withSuccessHandler(res => { if (res.success) initProductPage(); }).deleteProduct(code);
    }

    /* =========================================
       売上管理用 JavaScript
       ========================================= */
    let globalCustomers = [];
    let globalProducts = [];

    function initSalesPage() {
      // 顧客と商品マスターを取得し、Datalistを構築
      google.script.run.withSuccessHandler(data => {
        globalCustomers = data;
        const dlCust = document.getElementById('dl-customers');
        dlCust.innerHTML = '';
        data.forEach(c => {
          const opt = document.createElement('option');
          opt.value = c[0] + " : " + c[1]; // C001 : 会社名
          dlCust.appendChild(opt);
        });

        google.script.run.withSuccessHandler(pData => {
          globalProducts = pData;
          const dlProd = document.getElementById('dl-products');
          dlProd.innerHTML = '';
          pData.forEach(p => {
            const opt = document.createElement('option');
            opt.value = p[0] + " : " + p[1]; // P001 : 商品名
            dlProd.appendChild(opt);
          });
          
          // 明細行UIの生成(初回のみ)
          const container = document.getElementById('sales-items-container');
          if (container.children.length === 0) {
            for(let i=0; i<6; i++) {
              container.innerHTML += `
                <tr class="sale-row">
                  <td><input type="text" class="si-prod" list="dl-products" onchange="onProdSelect(this)" placeholder="商品選択"></td>
                  <td><input type="number" class="si-price" readonly style="background:#eee; text-align:right;"></td>
                  <td><input type="number" class="si-qty" oninput="calcSaleTotal()" placeholder="0" style="text-align:right;"></td>
                  <td><input type="text" class="si-sub" readonly style="background:#eee; text-align:right;" value="0"></td>
                </tr>`;
            }
          }
          // データ取得と描画
          google.script.run.withSuccessHandler(renderSalesTable).getSales();
        }).getProducts();
      }).getCustomers();
    }

    function renderSalesTable(data) {
      const tbody = document.getElementById('sales-list-body');
      tbody.innerHTML = '';
      data.forEach(row => {
        const tr = document.createElement('tr');
        tr.innerHTML = `
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[0]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[1]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[3]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd; text-align:right;">${Number(row[4]).toLocaleString()} 円</td>
          <td style="padding:10px; border-bottom:1px solid #ddd; text-align:center;">
            <button onclick="editSale('${row[0]}')" style="width:auto; padding:4px 8px; font-size:12px; background:#f39c12;">編集</button>
            <button onclick="printSale('${row[0]}')" style="width:auto; padding:4px 8px; font-size:12px; background:#2ecc71;">印刷</button>
            <button onclick="deleteSaleData('${row[0]}')" style="width:auto; padding:4px 8px; font-size:12px; background:#e74c3c;">削除</button>
          </td>`;
        tbody.appendChild(tr);
      });
      filterSales();
    }

    function filterSales() { execFilter('sales-search', 'sales-list-body', 'sales-count'); }

    // --- モーダル・入力制御 ---
    function openSalesForm() {
      document.getElementById('sales-form-title').innerText = "売上伝票登録（新規）";
      document.getElementById('sale-no').value = "";
      document.getElementById('sale-date').value = new Date().toISOString().split('T')[0];
      document.getElementById('sale-cust').value = "";
      document.getElementById('sale-memo').value = "";
      
      const rows = document.querySelectorAll('.sale-row');
      rows.forEach(r => {
        r.querySelector('.si-prod').value = "";
        r.querySelector('.si-price').value = "";
        r.querySelector('.si-qty').value = "";
        r.querySelector('.si-sub').value = "0";
      });
      calcSaleTotal();
      document.getElementById('sales-modal').classList.remove('hidden');
    }

    function onProdSelect(elem) {
      const row = elem.closest('tr');
      const val = elem.value.split(' : ')[0].trim();
      const priceElem = row.querySelector('.si-price');
      const match = globalProducts.find(p => p[0] === val);
      
      if (match) { priceElem.value = match[2]; } 
      else { priceElem.value = ""; }
      calcSaleTotal();
    }

    function calcSaleTotal() {
      const rows = document.querySelectorAll('.sale-row');
      let total = 0;
      rows.forEach(r => {
        const price = Number(r.querySelector('.si-price').value) || 0;
        const qty = Number(r.querySelector('.si-qty').value) || 0;
        const sub = price * qty;
        r.querySelector('.si-sub').value = sub.toLocaleString();
        total += sub;
      });
      document.getElementById('sale-total-val').value = total;
      document.getElementById('sale-total-display').innerText = total.toLocaleString();
    }

    function closeSalesForm() { document.getElementById('sales-modal').classList.add('hidden'); }

    // --- 保存・編集・削除 ---
    function saveSalesData() {
      const btn = document.getElementById('btn-sales-save');
      const custInput = document.getElementById('sale-cust').value;
      const custCode = custInput.split(' : ')[0].trim();
      
      let custName = "";
      const custMatch = globalCustomers.find(c => c[0] === custCode);
      if (custMatch) { custName = custMatch[1]; } 
      else { custName = custInput; } // マスタにない場合は入力値をそのまま

      const sale = {
        saleNo: document.getElementById('sale-no').value,
        date: document.getElementById('sale-date').value,
        custCode: custCode,
        custName: custName,
        totalAmount: document.getElementById('sale-total-val').value,
        memo: document.getElementById('sale-memo').value,
        items: []
      };

      if (!sale.date || !custCode) return alert("日付と得意先は必須です");

      const rows = document.querySelectorAll('.sale-row');
      rows.forEach(r => {
        const pInput = r.querySelector('.si-prod').value;
        const pCode = pInput.split(' : ')[0].trim();
        const pQty = r.querySelector('.si-qty').value;
        const pPrice = r.querySelector('.si-price').value;
        if (pCode && pQty) {
          sale.items.push({ prodCode: pCode, qty: pQty, price: pPrice });
        }
      });

      if (sale.items.length === 0) return alert("商品を1つ以上入力してください");

      btn.disabled = true;
      google.script.run.withSuccessHandler(res => {
        btn.disabled = false;
        if (res.success) { closeSalesForm(); initSalesPage(); }
        else alert("エラー: " + res.message);
      }).saveSale(sale);
    }

    function editSale(saleNo) {
      google.script.run.withSuccessHandler(data => {
        const row = data.find(r => r[0] === saleNo);
        if (!row) return;

        document.getElementById('sales-form-title').innerText = "売上伝票編集 (" + saleNo + ")";
        document.getElementById('sale-no').value = row[0];
        document.getElementById('sale-date').value = row[1];
        
        // 得意先のセット(マスタ検索)
        const cMatch = globalCustomers.find(c => c[0] === row[2]);
        document.getElementById('sale-cust').value = cMatch ? (cMatch[0] + " : " + cMatch[1]) : row[3];
        document.getElementById('sale-memo').value = row[5];

        const trs = document.querySelectorAll('.sale-row');
        for (let i = 0; i < 6; i++) {
          const offset = 6 + (i * 3);
          const pCode = row[offset] || "";
          const pQty = row[offset + 1] || "";
          const pPrice = row[offset + 2] || "";
          
          let pVal = pCode;
          const pMatch = globalProducts.find(p => p[0] === pCode);
          if (pMatch) pVal = pCode + " : " + pMatch[1];

          trs[i].querySelector('.si-prod').value = pVal;
          trs[i].querySelector('.si-price').value = pPrice;
          trs[i].querySelector('.si-qty').value = pQty;
        }
        calcSaleTotal();
        document.getElementById('sales-modal').classList.remove('hidden');
      }).getSales();
    }

    function deleteSaleData(saleNo) {
      if (!confirm(saleNo + " を削除しますか？")) return;
      google.script.run.withSuccessHandler(res => { if (res.success) initSalesPage(); }).deleteSale(saleNo);
    }

    // --- 印刷処理 ---
    function printSale(saleNo) {
      const win = window.open('', '_blank');
      win.document.write('印刷データを読み込んでいます...');
      
      google.script.run.withSuccessHandler(res => {
        if (!res || !res.success || !res.sale) {
          win.close();
          alert("印刷データの取得に失敗しました。Companyシート等の設定を確認してください。");
          return;
        }

        const comp = res.company; // 自社名, 郵便番号, 住所, TEL, FAX
        const sale = res.sale;    // 伝票番号, 日付, 得意先C, 得意先名, 合計, 備考, (商品C, 数量, 単価)x6
        const prods = res.products;

        let html = `<!DOCTYPE html><html><head><title>売上伝票_${sale[0]}</title><style>
          body { font-family: "Noto Sans JP", sans-serif; padding: 40px; color: #333; }
          .header { display: flex; justify-content: space-between; margin-bottom: 30px; }
          .title { text-align: center; font-size: 24px; letter-spacing: 5px; margin-bottom: 40px; border-bottom: 2px solid #333; padding-bottom: 10px; }
          table { width: 100%; border-collapse: collapse; margin-top: 20px; }
          th, td { border: 1px solid #000; padding: 10px; font-size: 14px; }
          th { background-color: #f2f2f2; }
          .text-left { text-align: left; }
          .text-right { text-align: right; }
          .text-center { text-align: center; }
          .company-info { font-size: 13px; line-height: 1.6; }
        </style></head><body>`;
        
        html += `<div class="title">売上伝票</div>`;
        html += `<div class="header">`;
        html += `  <div><h2 style="margin:0 0 10px 0; border-bottom:1px solid #333; padding-bottom:5px; display:inline-block; min-width:250px;">${sale[3]} 御中</h2><br>伝票番号: ${sale[0]}<br>発行日: ${sale[1]}</div>`;
        html += `  <div class="company-info"><strong style="font-size:16px;">${comp[0] || '自社名未設定'}</strong><br>〒${comp[1] || '---'}<br>${comp[2] || '住所未設定'}<br>TEL: ${comp[3] || '---'}<br>FAX: ${comp[4] || '---'}</div>`;
        html += `</div>`;
        
        html += `<table>
                  <tr><th style="width:15%;">商品コード</th><th style="width:40%;">商品名</th><th style="width:15%;">単価</th><th style="width:10%;">数量</th><th style="width:20%;">金額</th></tr>`;
        
        for (let i = 0; i < 6; i++) {
          const offset = 6 + (i * 3);
          const pCode = sale[offset];
          const pQty = sale[offset + 1];
          const pPrice = sale[offset + 2];
          
          if (pCode && pQty) {
            let pName = "不明な商品";
            const pMatch = prods.find(p => p[0] === pCode);
            if (pMatch) pName = pMatch[1];
            
            const rowTotal = Number(pQty) * Number(pPrice);
            html += `<tr>
                      <td class="text-center">${pCode}</td>
                      <td class="text-left">${pName}</td>
                      <td class="text-right">${Number(pPrice).toLocaleString()}</td>
                      <td class="text-center">${pQty}</td>
                      <td class="text-right">${rowTotal.toLocaleString()}</td>
                    </tr>`;
          }
        }
        
        html += `<tr><th colspan="4" class="text-right">合計金額</th><th class="text-right" style="font-size:16px;">￥${Number(sale[4]).toLocaleString()}</th></tr>`;
        html += `</table>`;
        html += `<div style="margin-top:30px; font-size:14px;">備考: ${sale[5] || ''}</div>`;
        
        // スクリプトタグのエスケープ結合
        const sEnd = '<' + '/script>';
        html += `<script>
                  window.onload = function() { window.print(); };
                  window.onafterprint = function() { window.close(); };
                 ${sEnd}</body></html>`;
        
        win.document.open();
        win.document.write(html);
        win.document.close();
      }).getPrintData(saleNo);
    }

    /* =========================================
       請求管理（一括印刷）用 JavaScript
       ========================================= */
    function generateInvoices(btn) {
      const monthInput = document.getElementById('invoice-month').value;
      if (!monthInput) { alert("請求月を選択してください。"); return; }

      const originalText = btn.innerText;
      btn.innerText = "データ集計中...";
      btn.disabled = true;

      google.script.run
        .withSuccessHandler(res => {
          btn.innerText = originalText;
          btn.disabled = false;
          if (!res.success) { alert("エラー: " + res.message); return; }

          // UIフリーズ防止のため少し遅延させて印刷処理を実行
          setTimeout(() => {
            printWithTemplate(res.templateHtml, res.invoices, monthInput, res.company);
          }, 100);
        })
        .withFailureHandler(err => {
          btn.innerText = originalText;
          btn.disabled = false;
          alert("通信エラー: " + err.message);
        })
        .getInvoiceBulkDataWithTemplate(monthInput);
    }

    function printWithTemplate(templateHtml, invoices, monthStr, company) {
      // 日付・対象月の計算 (printBulkInvoices 互換)
      const parts = monthStr.split('-');
      let year = parseInt(parts[0], 10);
      let month = parseInt(parts[1], 10);
      month++;
      if (month > 12) { month = 1; year++; }
      const dueDateStr = year + "年" + month + "月20日";
      const targetMonthStr = parts[0] + "年" + parseInt(parts[1], 10) + "月分";

      const win = window.open('', '_blank');
      let finalHtml = `<!DOCTYPE html><html><head><style>
        body { font-family: "Noto Sans JP", sans-serif; margin: 0; padding: 0; color: #333; }
        .page { width: 210mm; height: 296mm; padding: 10mm; position: relative; page-break-after: always; }
        .page:last-child { page-break-after: auto; }
        .page-number { position: absolute; top: 10mm; right: 10mm; font-size: 12px; }
        .title { text-align: center; font-size: 26px; border-bottom: 2px solid #000; margin-bottom: 20px; padding-bottom: 5px; }
        .total-box { font-size: 20px; border-bottom: 3px solid #000; display: inline-block; padding: 5px 20px 0 0; margin-top: 10px; font-weight: bold; }
        .item-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
        .item-table th, .item-table td { border: 1px solid #000; padding: 6px; height: 32px; font-size: 13px; word-wrap: break-word; }
        .item-table th { background: #f2f2f2; text-align: center; }
      </style></head><body>`;

      invoices.forEach(inv => {
        const linesPerPage = 15;
        const totalPages = Math.ceil(inv.items.length / linesPerPage) || 1;

        for (let p = 0; p < totalPages; p++) {
          let pageContent = templateHtml;

          // 1ページ目 (p === 0) か 2ページ目以降かでの出し分け (オーバーフロー制御)
          if (p === 0) {
            pageContent = pageContent.split('{{custZip}}').join(inv.custZip || '---');
            pageContent = pageContent.split('{{custAddr}}').join(inv.custAddr || '---');
            pageContent = pageContent.split('{{custTel}}').join(inv.custTel || '---');
            pageContent = pageContent.split('{{totalAmount}}').join('￥' + inv.totalAmount.toLocaleString());
            pageContent = pageContent.split('{{dueDate}}').join(dueDateStr);
            pageContent = pageContent.split('{{targetMonth}}').join(targetMonthStr);
          } else {
            // 2ページ目以降は金額や住所を空にする
            pageContent = pageContent.split('{{custZip}}').join('');
            pageContent = pageContent.split('{{custAddr}}').join('');
            pageContent = pageContent.split('{{custTel}}').join('');
            pageContent = pageContent.split('{{totalAmount}}').join('');
            pageContent = pageContent.split('{{dueDate}}').join('');
            pageContent = pageContent.split('{{targetMonth}}').join('');
          }

          // 全ページ共通
          pageContent = pageContent.split('{{custName}}').join(inv.custName + (p > 0 ? " (続き)" : ""));
          pageContent = pageContent.split('{{pageNo}}').join((p + 1) + " / " + totalPages);
          
          // 自社情報 (company 配列から展開)
          pageContent = pageContent.split('{{compName}}').join(company[0] || '');
          pageContent = pageContent.split('{{compZip}}').join(company[1] || '');
          pageContent = pageContent.split('{{compAddr}}').join(company[2] || '');
          pageContent = pageContent.split('{{compTel}}').join(company[3] || '');
          pageContent = pageContent.split('{{compFax}}').join(company[4] || '');

          // 明細行 15行の差し込み
          const startIdx = p * linesPerPage;
          for (let i = 0; i < linesPerPage; i++) {
            const item = inv.items[startIdx + i];
            // replace は最初に見つかった1つだけを置換するため、15個の {{変数}} を順番に埋められる
            pageContent = pageContent.replace('{{date}}', item ? item.date : "");
            pageContent = pageContent.replace('{{saleNo}}', item ? item.saleNo : "");
            pageContent = pageContent.replace('{{pName}}', item ? item.pName : "");
            pageContent = pageContent.replace('{{qty}}', item ? item.qty : "");
            pageContent = pageContent.replace('{{price}}', item ? item.price.toLocaleString() : "");
            pageContent = pageContent.replace('{{subTotal}}', item ? item.subTotal.toLocaleString() : "");
          }

          finalHtml += `<div class="page">${pageContent}</div>`;
        }
      });

      finalHtml += `</body></html>`;
      win.document.write(finalHtml);
      win.document.close();
      
      // 読み込み完了後に印刷ダイアログを表示
      win.onload = function() {
        win.print();
      };
    }

    /* =========================================
       販売分析機能用 JavaScript
       ========================================= */
    let chartInstance = null;

    function initAnalysisPage() {
      // 画面切り替え時にローディング表示
      document.getElementById('dash-total-sales').innerText = "計算中...";
      document.getElementById('dash-total-profit').innerText = "計算中...";
      
      google.script.run.withSuccessHandler(res => {
        if (!res.success) {
          alert("分析データの取得に失敗しました: " + res.message);
          return;
        }

        // サマリー表示の更新
        const totalSales = res.summary.sales;
        const totalProfit = res.summary.profit;
        const margin = totalSales > 0 ? ((totalProfit / totalSales) * 100).toFixed(1) : 0;

        document.getElementById('dash-total-sales').innerText = totalSales.toLocaleString() + " 円";
        document.getElementById('dash-total-profit').innerText = totalProfit.toLocaleString() + " 円";
        document.getElementById('dash-profit-margin').innerText = margin + " %";

        // グラフの描画
        const ctx = document.getElementById('analysisChart').getContext('2d');
        if (chartInstance) { chartInstance.destroy(); } // 既存グラフがあれば破棄

        chartInstance = new Chart(ctx, {
          type: 'bar',
          data: {
            labels: res.chart.labels,
            datasets: [
              {
                label: '売上金額 (円)',
                data: res.chart.sales,
                backgroundColor: 'rgba(52, 152, 219, 0.7)',
                borderColor: 'rgba(41, 128, 185, 1)',
                borderWidth: 1
              },
              {
                label: '粗利益 (円)',
                data: res.chart.profit,
                type: 'line',
                fill: false,
                borderColor: 'rgba(46, 204, 113, 1)',
                backgroundColor: 'rgba(46, 204, 113, 1)',
                tension: 0.1,
                borderWidth: 2
              }
            ]
          },
          options: {
            responsive: true,
            scales: { y: { beginAtZero: true } },
            plugins: {
              title: { display: true, text: '月別 売上・利益推移' }
            }
          }
        });

      }).getDashboardData();
    }
  </script>
</body>
</html>
```

※これまでのコードを全て削除して，「Code.gs」と「index.html」を貼り付けて，デプロイすると，
メニューから選択した販売分析（ダッシュボード）が正しく動作する。
Geminiに相談するだけでGoogle Apps Script Webアプリが作れる！

6-2

6-2は，新規作成した別のチャットでの相談です。

※「6-1」で動作したプロジェクトの「Code.gs」と「index.html」をテキスト・ファイルに保存して，
「+ファイルアップロード」をクリックして，2つのファイルを添付してから相談する。

1. 前提条件（環境と目的）
添付した「Code.gs」と「index.html」のシステムの販売分析のダッシュボードの上に検索パネル，下に集計表追加した「Code.gs」と「index.html」の全コードを提示願います。


2. データベースの構成
これまでに作成したシートは以下の通りです。
Companyシート：2行目に 自社名, 郵便番号, 住所, TEL, FAX
Customersシート：A列から順に 得意先コード, 得意先名, 郵便番号, 住所, 電話番号
Productsシート：A列から順に 商品コード, 商品名, 単価, 原価
Salesシート：A列から順に 伝票番号, 日付, 得意先コード, 得意先名, 合計金額, 備考, 商品コード1, 数量1, 単価1...（最大6行分）

3. 実装したい販売分析機能のリスト
検索パネル: デフォルトで今年を集計期間として計算し，画面上部に「集計開始月」と「集計終了月」を指定する入力欄（<input type="month">）と、「集計実行」ボタンを配置して再計算できるようにしてください。
追加する集計表: 
得意先別集計表（得意先ごとの売上合計表）
商品別集計表（商品ごとの売上合計表）
【大分類:得意先 / 小分類:商品】集計表（得意先ごとのブロックの中に、購入された商品の一覧が表示される階層型リスト）
【大分類:商品 / 小分類:得意先】集計表（商品ごとのブロックの中に、購入した得意先の一覧が表示される階層型リスト）
集計ロジック:
各集計表の右上（または直上）には、それぞれ独立した「この表を印刷」ボタンを配置してください。
各集計表の印字の際，上部に集計期間を表示してください。
単純な行列のクロス集計表は作成せず、すべて縦方向のリスト（テーブル）形式で生成してください。
各表はすべて**「売上合計金額の降順（大きい順）」**でソートしてください（階層型集計表の場合、大分類も売上降順、その中の小分類も売上降順にすること）。
テーブルのデザインは Bootstrap 5 のクラス（table, table-striped 等）を活用して見やすくしてください。
ページオーバーフロー処理: 指定した表のみを、1ページあたりの明細行数（例: 20行）をJS側で厳密にカウントし、超過する場合はテーブルを分割してCSSの page-break-after: always; を用いて確実に改ページさせること。
【重要】最後のページには `page-break-after: always;` が適用されないようJSで制御し、余計な白紙ページを生成しないこと。CSSには `box-sizing: border-box;` を使用すること。

4. プログラムの制約やルール
スプレッドシートのデータ取得時は、排他制御（LockService.getScriptLock）を入れること。
データ取得時はエラー防止のため getDisplayValues() を使い、全て文字列として扱うこと。
動的にHTMLを生成・出力する処理が含まれるため、scriptタグ等のエスケープ処理や、文字列の分割結合（'<' + '/script>'など）を確実に行い、構文エラーを防いでください。
既存の関数（onLoginStep1など）の動作に影響を与えないよう、スコープに注意し、そのまま末尾にコピペして動く独立したコードブロックとして出力してください。
文字列の置換を行う際、正規表現のエラーが起きやすいので、極力 split().join() を使うか、正規表現のエスケープ（バックスラッシュ）を正確に行ってください。

ご提示いただいた要件に基づき、販売分析ダッシュボードに「期間検索パネル」「4種の集計表（Bootstrap風デザイン）」「厳密な改ページ制御を含む印刷機能」を追加しました。

排他制御（LockService.getScriptLock）や `getDisplayValues()` による文字列処理、正規表現エラーを防ぐための `split().join()` など、すべての制約とルールを遵守して組み込んでいます。

以下が更新された `index.html` と `Code.gs` の全コードです。

### 1. index.html

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <base target="_top">
  <style>
    /* ========== 全体設定 ========== */
    :root { --primary: #2c3e50; --bg: #f4f7f6; --accent: #3498db; }
    * { box-sizing: border-box; }
    body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; background: var(--bg); color: #333; display: flex; flex-direction: column; height: 100vh; }
    .hidden { display: none !important; }
    
    /* ========== ログイン画面 ========== */
    #view-login { display: flex; justify-content: center; align-items: center; height: 100vh; }
    .login-box { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); width: 320px; }
    
    /* ========== メインレイアウト ========== */
    #view-main { display: flex; flex-direction: column; height: 100%; }
    nav { background: var(--primary); color: white; padding: 0 20px; display: flex; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
    nav h3 { margin-right: 30px; }
    nav ul { list-style: none; display: flex; gap: 5px; margin: 0; padding: 0; }
    nav li { padding: 15px 20px; cursor: pointer; transition: 0.2s; font-weight: bold; font-size: 14px; }
    nav li:hover { background: #34495e; border-radius: 4px; }
    .logout-btn { margin-left: auto; color: #e74c3c; cursor: pointer; padding: 15px; font-weight: bold; }
    
    main { flex: 1; padding: 20px; overflow-y: auto; }
    .card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
    
    /* ========== フォーム部品 ========== */
    input { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; }
    button { padding: 12px; background: var(--accent); color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 16px; margin-top: 10px; width: 100%; }
    button:disabled { background: #ccc; cursor: not-allowed; }
    button:hover:not(:disabled) { background: #2980b9; }
    #login-msg { color: #e74c3c; font-size: 13px; margin-top: 10px; font-weight: bold; text-align: center; }

    /* ========== Bootstrap 5風 テーブルUI ========== */
    .table { width: 100%; border-collapse: collapse; margin-top: 10px; margin-bottom: 20px; background-color: #fff; }
    .table th, .table td { padding: 12px; border-bottom: 1px solid #dee2e6; vertical-align: middle; font-size: 14px; }
    .table thead th { vertical-align: bottom; border-bottom: 2px solid #dee2e6; background-color: #f8f9fa; }
    .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(0,0,0,.025); }
    .table-bordered th, .table-bordered td { border: 1px solid #dee2e6; }
    .table-primary { background-color: #cfe2ff !important; font-weight: bold; }
    .table-primary th, .table-primary td { border-color: #bacbe6; }
    .text-end { text-align: right !important; }
    .text-center { text-align: center !important; }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>

  <div id="view-login">
    <div class="login-box">
      <h2 style="text-align: center; margin-bottom: 20px;">販売管理システム</h2>
      <div id="step1">
        <label style="font-size: 12px; font-weight: bold;">ユーザーID</label>
        <input type="text" id="uid" placeholder="IDを入力">
        <label style="font-size: 12px; font-weight: bold;">パスワード</label>
        <input type="password" id="upw" placeholder="パスワードを入力">
        <button id="btn-login" onclick="onLoginStep1()">ログイン</button>
      </div>
      <div id="step2" class="hidden">
        <p style="font-size: 13px; color: #555;">登録されたメールアドレスに6桁の認証コードを送信しました。</p>
        <label style="font-size: 12px; font-weight: bold;">認証コード</label>
        <input type="text" id="auth-code" placeholder="123456" maxlength="6" style="text-align: center; font-size: 20px; letter-spacing: 5px;">
        <button id="btn-verify" onclick="onLoginStep2()">認証する</button>
        <a href="#" onclick="location.reload()" style="font-size: 12px; display: block; text-align: center; margin-top: 15px; color: #666;">最初からやり直す</a>
      </div>
      <p id="login-msg"></p>
    </div>
  </div>

  <div id="view-main" class="hidden">
    <nav>
      <h3>販売管理 v1.0</h3>
      <ul>
        <li onclick="showPage('customer')">得意先マスター</li>
        <li onclick="showPage('product')">商品マスター</li>
        <li onclick="showPage('sales')">売上管理</li>
        <li onclick="showPage('invoice')">請求管理</li>
        <li onclick="showPage('analysis')">販売分析</li>
      </ul>
      <div class="logout-btn" onclick="location.reload()">ログアウト</div>
    </nav>
    
    <main>
      <div id="p-home" class="page card">
        <h2>ようこそ、<span id="display-name"></span> さん</h2>
        <p>上部のメニューから操作を選択してください。</p>
      </div>

      <div id="p-customer" class="page card hidden">
        <div style="display:flex; justify-content:space-between; align-items:center;">
          <h2>得意先マスター</h2>
          <button onclick="openCustomerForm()" style="width:auto; padding:8px 15px;">＋新規登録</button>
        </div>
        <div style="margin-top: 15px; display: flex; gap: 10px;">
          <input type="text" id="cust-search" onkeyup="filterCustomer()" placeholder="得意先名、コード、住所などで検索..." style="flex: 1; margin: 0;">
          <div style="line-height: 40px; font-size: 13px; color: #666;"><span id="cust-count">0</span> 件表示</div>
        </div>
        <div style="overflow-x:auto; margin-top:20px;">
          <table style="width:100%; border-collapse:collapse;">
            <thead>
              <tr style="background:#eee; text-align:left;">
                <th style="padding:10px; border-bottom:2px solid #ddd;">コード</th>
                <th style="padding:10px; border-bottom:2px solid #ddd;">得意先名</th>
                <th style="padding:10px; border-bottom:2px solid #ddd;">郵便番号</th>
                <th style="padding:10px; border-bottom:2px solid #ddd;">住所</th>
                <th style="padding:10px; border-bottom:2px solid #ddd;">電話番号</th>
                <th style="padding:10px; border-bottom:2px solid #ddd;">操作</th>
              </tr>
            </thead>
            <tbody id="customer-list-body"></tbody>
          </table>
        </div>
        <div id="customer-modal" class="hidden" style="position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); display:flex; justify-content:center; align-items:center; z-index:1000;">
          <div class="card" style="width:400px;">
            <h3 id="form-title">得意先登録</h3>
            <input type="hidden" id="cust-code">
            <label>得意先名</label><input type="text" id="cust-name">
            <label>郵便番号</label><input type="text" id="cust-zip" placeholder="000-0000">
            <label>住所</label><input type="text" id="cust-address">
            <label>電話番号</label><input type="text" id="cust-tel" placeholder="00-0000-0000">
            <div style="display:flex; gap:10px; margin-top:10px;">
              <button onclick="saveCustomerData()" id="btn-cust-save">保存</button>
              <button onclick="closeCustomerForm()" style="background:#95a5a6;">キャンセル</button>
            </div>
          </div>
        </div>
      </div>
      
      <div id="p-product" class="page card hidden">
        <div style="display:flex; justify-content:space-between; align-items:center;">
          <h2>商品マスター</h2>
          <button onclick="openProductForm()" style="width:auto; padding:8px 15px;">＋新規登録</button>
        </div>
        <div style="margin-top: 15px; display: flex; gap: 10px;">
          <input type="text" id="prod-search" onkeyup="filterProduct()" placeholder="商品名、コードで検索..." style="flex: 1; margin: 0;">
          <div style="line-height: 40px; font-size: 13px; color: #666;"><span id="prod-count">0</span> 件表示</div>
        </div>
        <div style="overflow-x:auto; margin-top:20px;">
          <table style="width:100%; border-collapse:collapse;">
            <thead>
              <tr style="background:#eee; text-align:left;">
                <th style="padding:10px; border-bottom:2px solid #ddd;">コード</th>
                <th style="padding:10px; border-bottom:2px solid #ddd;">商品名</th>
                <th style="padding:10px; border-bottom:2px solid #ddd; text-align:right;">単価</th>
                <th style="padding:10px; border-bottom:2px solid #ddd; text-align:right;">原価</th>
                <th style="padding:10px; border-bottom:2px solid #ddd; text-align:center;">操作</th>
              </tr>
            </thead>
            <tbody id="product-list-body"></tbody>
          </table>
        </div>
        <div id="product-modal" class="hidden" style="position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); display:flex; justify-content:center; align-items:center; z-index:1000;">
          <div class="card" style="width:350px;">
            <h3 id="prod-form-title">商品登録</h3>
            <input type="hidden" id="prod-code">
            <label>商品名</label><input type="text" id="prod-name">
            <div style="display:flex; gap:10px;">
              <div style="flex:1;"><label>単価 (円)</label><input type="number" id="prod-price" placeholder="0"></div>
              <div style="flex:1;"><label>原価 (円)</label><input type="number" id="prod-cost" placeholder="0"></div>
            </div>
            <div style="display:flex; gap:10px; margin-top:10px;">
              <button onclick="saveProductData()" id="btn-prod-save">保存</button>
              <button onclick="closeProductForm()" style="background:#95a5a6;">キャンセル</button>
            </div>
          </div>
        </div>
      </div>
      
      <div id="p-sales" class="page card hidden">
        <div style="display:flex; justify-content:space-between; align-items:center;">
          <h2>売上管理</h2>
          <button onclick="openSalesForm()" style="width:auto; padding:8px 15px;">＋新規伝票</button>
        </div>
        <div style="margin-top: 15px; display: flex; gap: 10px;">
          <input type="text" id="sales-search" onkeyup="filterSales()" placeholder="伝票番号、得意先名などで検索..." style="flex: 1; margin: 0;">
          <div style="line-height: 40px; font-size: 13px; color: #666;"><span id="sales-count">0</span> 件表示</div>
        </div>
        
        <datalist id="dl-customers"></datalist>
        <datalist id="dl-products"></datalist>

        <div style="overflow-x:auto; margin-top:20px;">
          <table style="width:100%; border-collapse:collapse;">
            <thead>
              <tr style="background:#eee; text-align:left;">
                <th style="padding:10px; border-bottom:2px solid #ddd;">伝票番号</th>
                <th style="padding:10px; border-bottom:2px solid #ddd;">日付</th>
                <th style="padding:10px; border-bottom:2px solid #ddd;">得意先</th>
                <th style="padding:10px; border-bottom:2px solid #ddd; text-align:right;">合計金額</th>
                <th style="padding:10px; border-bottom:2px solid #ddd; text-align:center;">操作</th>
              </tr>
            </thead>
            <tbody id="sales-list-body"></tbody>
          </table>
        </div>

        <div id="sales-modal" class="hidden" style="position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); display:flex; justify-content:center; align-items:center; z-index:1000;">
          <div class="card" style="width:700px; max-height:90vh; overflow-y:auto;">
            <h3 id="sales-form-title">売上伝票登録</h3>
            <div style="display:flex; gap:10px;">
              <div style="flex:1;"><label>伝票番号</label><input type="text" id="sale-no" readonly placeholder="自動採番" style="background:#eee;"></div>
              <div style="flex:1;"><label>日付</label><input type="date" id="sale-date"></div>
            </div>
            <label>得意先 (コードまたは名前で検索)</label>
            <input type="text" id="sale-cust" list="dl-customers" placeholder="得意先を選択...">
            
            <table style="width:100%; margin-top:15px; border-collapse:collapse; font-size:14px;">
              <thead>
                <tr style="background:#f9f9f9;">
                  <th style="padding:5px; text-align:left;">商品 (コードまたは名前)</th>
                  <th style="padding:5px; width:100px;">単価</th>
                  <th style="padding:5px; width:80px;">数量</th>
                  <th style="padding:5px; width:100px;">金額</th>
                </tr>
              </thead>
              <tbody id="sales-items-container">
                </tbody>
            </table>
            
            <div style="display:flex; justify-content:flex-end; margin-top:15px; align-items:center; gap:15px;">
              <div style="font-weight:bold;">合計金額: <span id="sale-total-display" style="font-size:20px; color:var(--accent);">0</span> 円</div>
              <input type="hidden" id="sale-total-val" value="0">
            </div>

            <label>備考</label><input type="text" id="sale-memo">
            
            <div style="display:flex; gap:10px; margin-top:15px;">
              <button onclick="saveSalesData()" id="btn-sales-save">保存</button>
              <button onclick="closeSalesForm()" style="background:#95a5a6;">キャンセル</button>
            </div>
          </div>
        </div>
      </div>

      <div id="p-invoice" class="page card hidden">
        <h2>請求管理</h2>
        <p>対象月を選択し、その月に売上があった全得意先の請求書を一括生成します。</p>
        <div style="display:flex; gap:15px; align-items:center; margin-top:20px;">
          <label style="font-weight:bold;">請求月:</label>
          <input type="month" id="invoice-month" style="width:200px; margin:0;">
          <button onclick="generateInvoices(this)" style="width:auto; padding:10px 20px;">一括請求書作成・印刷</button>
        </div>
        <p id="invoice-msg" style="margin-top:15px; color:#e74c3c; font-weight:bold;"></p>
      </div>

      <div id="p-analysis" class="page card hidden">
        <h2>販売分析ダッシュボード</h2>
        
        <div style="background:#f9f9f9; padding:15px; border:1px solid #ddd; border-radius:5px; margin-bottom:20px; display:flex; gap:15px; align-items:center;">
          <label style="font-weight:bold; font-size:14px;">集計期間:</label>
          <input type="month" id="agg-start" style="width:150px; margin:0;">
          <span>〜</span>
          <input type="month" id="agg-end" style="width:150px; margin:0;">
          <button onclick="execAnalysis()" style="width:auto; padding:8px 20px; margin:0; font-size:14px;">集計実行</button>
        </div>

        <p style="color:#666; font-size:14px;">指定期間の売上および原価計算に基づくデータと月別推移です。</p>
        
        <div style="display: flex; gap: 20px; margin: 20px 0;">
          <div style="flex: 1; background: #3498db; color: white; padding: 20px; border-radius: 8px; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
            <h3 style="margin-top:0; font-size:16px;">売上合計</h3>
            <div id="dash-total-sales" style="font-size: 28px; font-weight: bold; letter-spacing: 1px;">0 円</div>
          </div>
          <div style="flex: 1; background: #2ecc71; color: white; padding: 20px; border-radius: 8px; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
            <h3 style="margin-top:0; font-size:16px;">粗利合計</h3>
            <div id="dash-total-profit" style="font-size: 28px; font-weight: bold; letter-spacing: 1px;">0 円</div>
          </div>
          <div style="flex: 1; background: #f39c12; color: white; padding: 20px; border-radius: 8px; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
            <h3 style="margin-top:0; font-size:16px;">全体利益率</h3>
            <div id="dash-profit-margin" style="font-size: 28px; font-weight: bold;">0 %</div>
          </div>
        </div>

        <div style="width: 100%; background: #fff; padding: 15px; border: 1px solid #eee; border-radius: 8px; box-sizing: border-box;">
          <canvas id="analysisChart" height="100"></canvas>
        </div>

        <hr style="margin:40px 0; border:0; border-top:2px dashed #ddd;">
        <h2>各種集計表（期間指定）</h2>

        <div style="margin-bottom:40px;">
          <div style="display:flex; justify-content:space-between; align-items:center;">
            <h3>1. 得意先別集計表</h3>
            <button onclick="printAggTable('custTotal')" style="width:auto; padding:5px 15px; font-size:13px; background:#2ecc71;">この表を印刷</button>
          </div>
          <div id="container-custTotal" style="max-height:400px; overflow-y:auto; margin-top:10px;"></div>
        </div>

        <div style="margin-bottom:40px;">
          <div style="display:flex; justify-content:space-between; align-items:center;">
            <h3>2. 商品別集計表</h3>
            <button onclick="printAggTable('prodTotal')" style="width:auto; padding:5px 15px; font-size:13px; background:#2ecc71;">この表を印刷</button>
          </div>
          <div id="container-prodTotal" style="max-height:400px; overflow-y:auto; margin-top:10px;"></div>
        </div>

        <div style="margin-bottom:40px;">
          <div style="display:flex; justify-content:space-between; align-items:center;">
            <h3>3. 【大分類:得意先 / 小分類:商品】集計表</h3>
            <button onclick="printAggTable('custProd')" style="width:auto; padding:5px 15px; font-size:13px; background:#2ecc71;">この表を印刷</button>
          </div>
          <div id="container-custProd" style="max-height:400px; overflow-y:auto; margin-top:10px;"></div>
        </div>

        <div style="margin-bottom:40px;">
          <div style="display:flex; justify-content:space-between; align-items:center;">
            <h3>4. 【大分類:商品 / 小分類:得意先】集計表</h3>
            <button onclick="printAggTable('prodCust')" style="width:auto; padding:5px 15px; font-size:13px; background:#2ecc71;">この表を印刷</button>
          </div>
          <div id="container-prodCust" style="max-height:400px; overflow-y:auto; margin-top:10px;"></div>
        </div>
      </div>
    </main>
  </div>

  <script>
    let currentUserId = "";

    /* --- ログイン --- */
    function onLoginStep1() {
      const uid = document.getElementById('uid').value;
      const upw = document.getElementById('upw').value;
      const btn = document.getElementById('btn-login');
      const msg = document.getElementById('login-msg');
      if (!uid || !upw) return msg.innerText = "IDとパスワードを入力してください。";
      btn.disabled = true; btn.innerText = "確認中..."; msg.innerText = "";
      
      google.script.run.withSuccessHandler(res => {
        btn.disabled = false; btn.innerText = "ログイン";
        if (res.success && res.needs2FA) {
          currentUserId = res.userId;
          document.getElementById('step1').classList.add('hidden');
          document.getElementById('step2').classList.remove('hidden');
        } else msg.innerText = res.message;
      }).authenticateStep1(uid, upw);
    }

    function onLoginStep2() {
      const code = document.getElementById('auth-code').value;
      const btn = document.getElementById('btn-verify');
      const msg = document.getElementById('login-msg');
      if (!code) return msg.innerText = "コードを入力してください。";
      btn.disabled = true; btn.innerText = "認証中..."; msg.innerText = "";
      
      google.script.run.withSuccessHandler(res => {
        btn.disabled = false; btn.innerText = "認証する";
        if (res.success) {
          document.getElementById('display-name').innerText = res.userName;
          document.getElementById('view-login').classList.add('hidden');
          document.getElementById('view-main').classList.remove('hidden');
          showPage('home');
        } else msg.innerText = res.message;
      }).verify2FACode(currentUserId, code);
    }

    /* --- SPA画面切り替え --- */
    function showPage(pageId) {
      document.querySelectorAll('.page').forEach(p => p.classList.add('hidden'));
      document.getElementById('p-' + pageId).classList.remove('hidden');
      if (pageId === 'customer') initCustomerPage();
      if (pageId === 'product') initProductPage();
      if (pageId === 'sales') initSalesPage();
      if (pageId === 'analysis') initAnalysisPage();
    }

    /* --- 検索・絞り込み共通機能 --- */
    function execFilter(inputId, tbodyId, countId) {
      const query = document.getElementById(inputId).value.toLowerCase();
      const rows = document.getElementById(tbodyId).getElementsByTagName('tr');
      let visibleCount = 0;
      for (const row of rows) {
        if (row.textContent.toLowerCase().includes(query)) {
          row.style.display = ""; visibleCount++;
        } else row.style.display = "none";
      }
      document.getElementById(countId).innerText = visibleCount;
    }
    function filterCustomer() { execFilter('cust-search', 'customer-list-body', 'cust-count'); }
    function filterProduct() { execFilter('prod-search', 'product-list-body', 'prod-count'); }

    /* --- 得意先マスター --- */
    function initCustomerPage() { google.script.run.withSuccessHandler(renderCustomerTable).getCustomers(); }
    
    function renderCustomerTable(data) {
      const tbody = document.getElementById('customer-list-body');
      tbody.innerHTML = '';
      data.forEach(row => {
        const tr = document.createElement('tr');
        tr.innerHTML = `
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[0]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[1]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[2]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[3]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[4]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd; text-align:center;">
            <button onclick="editCustomer('${row[0]}','${row[1]}','${row[2]}','${row[3]}','${row[4]}')" style="width:auto; padding:4px 8px; font-size:12px; background:#f39c12;">編集</button>
            <button onclick="deleteCustomerData('${row[0]}')" style="width:auto; padding:4px 8px; font-size:12px; background:#e74c3c;">削除</button>
          </td>`;
        tbody.appendChild(tr);
      });
      filterCustomer();
    }

    function openCustomerForm() {
      document.getElementById('form-title').innerText = "得意先登録（新規）";
      document.getElementById('cust-code').value = "";
      document.getElementById('cust-name').value = "";
      document.getElementById('cust-zip').value = "";
      document.getElementById('cust-address').value = "";
      document.getElementById('cust-tel').value = "";
      document.getElementById('customer-modal').classList.remove('hidden');
    }

    function editCustomer(code, name, zip, addr, tel) {
      document.getElementById('form-title').innerText = "得意先編集 (" + code + ")";
      document.getElementById('cust-code').value = code;
      document.getElementById('cust-name').value = name;
      document.getElementById('cust-zip').value = zip;
      document.getElementById('cust-address').value = addr;
      document.getElementById('cust-tel').value = tel;
      document.getElementById('customer-modal').classList.remove('hidden');
    }

    function closeCustomerForm() { document.getElementById('customer-modal').classList.add('hidden'); }

    function saveCustomerData() {
      const btn = document.getElementById('btn-cust-save');
      const customer = {
        code: document.getElementById('cust-code').value,
        name: document.getElementById('cust-name').value,
        zip: document.getElementById('cust-zip').value,
        address: document.getElementById('cust-address').value,
        tel: document.getElementById('cust-tel').value
      };
      if (!customer.name) return alert("得意先名を入力してください");
      btn.disabled = true;
      google.script.run.withSuccessHandler(res => {
        btn.disabled = false;
        if (res.success) { closeCustomerForm(); initCustomerPage(); }
        else alert("エラー: " + res.message);
      }).saveCustomer(customer);
    }

    function deleteCustomerData(code) {
      if (!confirm(code + " を削除しますか？")) return;
      google.script.run.withSuccessHandler(res => { if (res.success) initCustomerPage(); }).deleteCustomer(code);
    }

    /* --- 商品マスター --- */
    function initProductPage() { google.script.run.withSuccessHandler(renderProductTable).getProducts(); }
    
    function renderProductTable(data) {
      const tbody = document.getElementById('product-list-body');
      tbody.innerHTML = '';
      data.forEach(row => {
        const cost = row[3] ? Number(row[3]) : 0; 
        const tr = document.createElement('tr');
        tr.innerHTML = `
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[0]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[1]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd; text-align:right;">${Number(row[2]).toLocaleString()} 円</td>
          <td style="padding:10px; border-bottom:1px solid #ddd; text-align:right;">${cost.toLocaleString()} 円</td>
          <td style="padding:10px; border-bottom:1px solid #ddd; text-align:center;">
            <button onclick="editProduct('${row[0]}','${row[1]}','${row[2]}','${cost}')" style="width:auto; padding:4px 8px; font-size:12px; background:#f39c12;">編集</button>
            <button onclick="deleteProductData('${row[0]}')" style="width:auto; padding:4px 8px; font-size:12px; background:#e74c3c;">削除</button>
          </td>`;
        tbody.appendChild(tr);
      });
      filterProduct();
    }

    function openProductForm() {
      document.getElementById('prod-form-title').innerText = "商品登録（新規）";
      document.getElementById('prod-code').value = "";
      document.getElementById('prod-name').value = "";
      document.getElementById('prod-price').value = "";
      document.getElementById('prod-cost').value = "";
      document.getElementById('product-modal').classList.remove('hidden');
    }

    function editProduct(code, name, price, cost) {
      document.getElementById('prod-form-title').innerText = "商品編集 (" + code + ")";
      document.getElementById('prod-code').value = code;
      document.getElementById('prod-name').value = name;
      document.getElementById('prod-price').value = price;
      document.getElementById('prod-cost').value = cost || 0;
      document.getElementById('product-modal').classList.remove('hidden');
    }

    function closeProductForm() { document.getElementById('product-modal').classList.add('hidden'); }

    function saveProductData() {
      const btn = document.getElementById('btn-prod-save');
      const product = {
        code: document.getElementById('prod-code').value,
        name: document.getElementById('prod-name').value,
        price: document.getElementById('prod-price').value,
        cost: document.getElementById('prod-cost').value
      };
      if (!product.name || !product.price) return alert("商品名と単価は必須です");
      btn.disabled = true;
      google.script.run.withSuccessHandler(res => {
        btn.disabled = false;
        if (res.success) { closeProductForm(); initProductPage(); }
        else alert("エラー: " + res.message);
      }).saveProduct(product);
    }

    function deleteProductData(code) {
      if (!confirm(code + " を削除しますか？")) return;
      google.script.run.withSuccessHandler(res => { if (res.success) initProductPage(); }).deleteProduct(code);
    }

    /* --- 売上管理 --- */
    let globalCustomers = [];
    let globalProducts = [];

    function initSalesPage() {
      google.script.run.withSuccessHandler(data => {
        globalCustomers = data;
        const dlCust = document.getElementById('dl-customers');
        dlCust.innerHTML = '';
        data.forEach(c => {
          const opt = document.createElement('option');
          opt.value = c[0] + " : " + c[1];
          dlCust.appendChild(opt);
        });

        google.script.run.withSuccessHandler(pData => {
          globalProducts = pData;
          const dlProd = document.getElementById('dl-products');
          dlProd.innerHTML = '';
          pData.forEach(p => {
            const opt = document.createElement('option');
            opt.value = p[0] + " : " + p[1];
            dlProd.appendChild(opt);
          });
          
          const container = document.getElementById('sales-items-container');
          if (container.children.length === 0) {
            for(let i=0; i<6; i++) {
              container.innerHTML += `
                <tr class="sale-row">
                  <td><input type="text" class="si-prod" list="dl-products" onchange="onProdSelect(this)" placeholder="商品選択"></td>
                  <td><input type="number" class="si-price" readonly style="background:#eee; text-align:right;"></td>
                  <td><input type="number" class="si-qty" oninput="calcSaleTotal()" placeholder="0" style="text-align:right;"></td>
                  <td><input type="text" class="si-sub" readonly style="background:#eee; text-align:right;" value="0"></td>
                </tr>`;
            }
          }
          google.script.run.withSuccessHandler(renderSalesTable).getSales();
        }).getProducts();
      }).getCustomers();
    }

    function renderSalesTable(data) {
      const tbody = document.getElementById('sales-list-body');
      tbody.innerHTML = '';
      data.forEach(row => {
        const tr = document.createElement('tr');
        tr.innerHTML = `
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[0]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[1]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[3]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd; text-align:right;">${Number(row[4]).toLocaleString()} 円</td>
          <td style="padding:10px; border-bottom:1px solid #ddd; text-align:center;">
            <button onclick="editSale('${row[0]}')" style="width:auto; padding:4px 8px; font-size:12px; background:#f39c12;">編集</button>
            <button onclick="printSale('${row[0]}')" style="width:auto; padding:4px 8px; font-size:12px; background:#2ecc71;">印刷</button>
            <button onclick="deleteSaleData('${row[0]}')" style="width:auto; padding:4px 8px; font-size:12px; background:#e74c3c;">削除</button>
          </td>`;
        tbody.appendChild(tr);
      });
      filterSales();
    }

    function filterSales() { execFilter('sales-search', 'sales-list-body', 'sales-count'); }

    function openSalesForm() {
      document.getElementById('sales-form-title').innerText = "売上伝票登録（新規）";
      document.getElementById('sale-no').value = "";
      document.getElementById('sale-date').value = new Date().toISOString().split('T')[0];
      document.getElementById('sale-cust').value = "";
      document.getElementById('sale-memo').value = "";
      
      const rows = document.querySelectorAll('.sale-row');
      rows.forEach(r => {
        r.querySelector('.si-prod').value = "";
        r.querySelector('.si-price').value = "";
        r.querySelector('.si-qty').value = "";
        r.querySelector('.si-sub').value = "0";
      });
      calcSaleTotal();
      document.getElementById('sales-modal').classList.remove('hidden');
    }

    function onProdSelect(elem) {
      const row = elem.closest('tr');
      const val = elem.value.split(' : ')[0].trim();
      const priceElem = row.querySelector('.si-price');
      const match = globalProducts.find(p => p[0] === val);
      
      if (match) { priceElem.value = match[2]; } 
      else { priceElem.value = ""; }
      calcSaleTotal();
    }

    function calcSaleTotal() {
      const rows = document.querySelectorAll('.sale-row');
      let total = 0;
      rows.forEach(r => {
        const price = Number(r.querySelector('.si-price').value) || 0;
        const qty = Number(r.querySelector('.si-qty').value) || 0;
        const sub = price * qty;
        r.querySelector('.si-sub').value = sub.toLocaleString();
        total += sub;
      });
      document.getElementById('sale-total-val').value = total;
      document.getElementById('sale-total-display').innerText = total.toLocaleString();
    }

    function closeSalesForm() { document.getElementById('sales-modal').classList.add('hidden'); }

    function saveSalesData() {
      const btn = document.getElementById('btn-sales-save');
      const custInput = document.getElementById('sale-cust').value;
      const custCode = custInput.split(' : ')[0].trim();
      
      let custName = "";
      const custMatch = globalCustomers.find(c => c[0] === custCode);
      if (custMatch) { custName = custMatch[1]; } 
      else { custName = custInput; }

      const sale = {
        saleNo: document.getElementById('sale-no').value,
        date: document.getElementById('sale-date').value,
        custCode: custCode,
        custName: custName,
        totalAmount: document.getElementById('sale-total-val').value,
        memo: document.getElementById('sale-memo').value,
        items: []
      };

      if (!sale.date || !custCode) return alert("日付と得意先は必須です");

      const rows = document.querySelectorAll('.sale-row');
      rows.forEach(r => {
        const pInput = r.querySelector('.si-prod').value;
        const pCode = pInput.split(' : ')[0].trim();
        const pQty = r.querySelector('.si-qty').value;
        const pPrice = r.querySelector('.si-price').value;
        if (pCode && pQty) {
          sale.items.push({ prodCode: pCode, qty: pQty, price: pPrice });
        }
      });

      if (sale.items.length === 0) return alert("商品を1つ以上入力してください");

      btn.disabled = true;
      google.script.run.withSuccessHandler(res => {
        btn.disabled = false;
        if (res.success) { closeSalesForm(); initSalesPage(); }
        else alert("エラー: " + res.message);
      }).saveSale(sale);
    }

    function editSale(saleNo) {
      google.script.run.withSuccessHandler(data => {
        const row = data.find(r => r[0] === saleNo);
        if (!row) return;

        document.getElementById('sales-form-title').innerText = "売上伝票編集 (" + saleNo + ")";
        document.getElementById('sale-no').value = row[0];
        document.getElementById('sale-date').value = row[1];
        
        const cMatch = globalCustomers.find(c => c[0] === row[2]);
        document.getElementById('sale-cust').value = cMatch ? (cMatch[0] + " : " + cMatch[1]) : row[3];
        document.getElementById('sale-memo').value = row[5];

        const trs = document.querySelectorAll('.sale-row');
        for (let i = 0; i < 6; i++) {
          const offset = 6 + (i * 3);
          const pCode = row[offset] || "";
          const pQty = row[offset + 1] || "";
          const pPrice = row[offset + 2] || "";
          
          let pVal = pCode;
          const pMatch = globalProducts.find(p => p[0] === pCode);
          if (pMatch) pVal = pCode + " : " + pMatch[1];

          trs[i].querySelector('.si-prod').value = pVal;
          trs[i].querySelector('.si-price').value = pPrice;
          trs[i].querySelector('.si-qty').value = pQty;
        }
        calcSaleTotal();
        document.getElementById('sales-modal').classList.remove('hidden');
      }).getSales();
    }

    function deleteSaleData(saleNo) {
      if (!confirm(saleNo + " を削除しますか？")) return;
      google.script.run.withSuccessHandler(res => { if (res.success) initSalesPage(); }).deleteSale(saleNo);
    }

    function printSale(saleNo) {
      const win = window.open('', '_blank');
      win.document.write('印刷データを読み込んでいます...');
      
      google.script.run.withSuccessHandler(res => {
        if (!res || !res.success || !res.sale) {
          win.close(); return alert("印刷データの取得に失敗しました。");
        }

        const comp = res.company;
        const sale = res.sale;
        const prods = res.products;

        let html = `<!DOCTYPE html><html><head><title>売上伝票_${sale[0]}</title><style>
          body { font-family: "Noto Sans JP", sans-serif; padding: 40px; color: #333; box-sizing: border-box; }
          .header { display: flex; justify-content: space-between; margin-bottom: 30px; }
          .title { text-align: center; font-size: 24px; letter-spacing: 5px; margin-bottom: 40px; border-bottom: 2px solid #333; padding-bottom: 10px; }
          table { width: 100%; border-collapse: collapse; margin-top: 20px; }
          th, td { border: 1px solid #000; padding: 10px; font-size: 14px; }
          th { background-color: #f2f2f2; }
          .text-left { text-align: left; }
          .text-right { text-align: right; }
          .text-center { text-align: center; }
          .company-info { font-size: 13px; line-height: 1.6; }
        </style></head><body>`;
        
        html += `<div class="title">売上伝票</div><div class="header">`;
        html += `<div><h2 style="margin:0 0 10px 0; border-bottom:1px solid #333; padding-bottom:5px; display:inline-block; min-width:250px;">${sale[3]} 御中</h2><br>伝票番号: ${sale[0]}<br>発行日: ${sale[1]}</div>`;
        html += `<div class="company-info"><strong style="font-size:16px;">${comp[0] || '自社名未設定'}</strong><br>〒${comp[1] || '---'}<br>${comp[2] || '住所未設定'}<br>TEL: ${comp[3] || '---'}<br>FAX: ${comp[4] || '---'}</div></div>`;
        
        html += `<table><tr><th style="width:15%;">商品コード</th><th style="width:40%;">商品名</th><th style="width:15%;">単価</th><th style="width:10%;">数量</th><th style="width:20%;">金額</th></tr>`;
        
        for (let i = 0; i < 6; i++) {
          const offset = 6 + (i * 3);
          const pCode = sale[offset];
          const pQty = sale[offset + 1];
          const pPrice = sale[offset + 2];
          
          if (pCode && pQty) {
            let pName = "不明な商品";
            const pMatch = prods.find(p => p[0] === pCode);
            if (pMatch) pName = pMatch[1];
            const rowTotal = Number(pQty) * Number(pPrice);
            html += `<tr><td class="text-center">${pCode}</td><td class="text-left">${pName}</td><td class="text-right">${Number(pPrice).toLocaleString()}</td><td class="text-center">${pQty}</td><td class="text-right">${rowTotal.toLocaleString()}</td></tr>`;
          }
        }
        
        html += `<tr><th colspan="4" class="text-right">合計金額</th><th class="text-right" style="font-size:16px;">￥${Number(sale[4]).toLocaleString()}</th></tr></table>`;
        html += `<div style="margin-top:30px; font-size:14px;">備考: ${sale[5] || ''}</div>`;
        
        const sEnd = '<' + '/script>';
        html += `<script>window.onload=function(){window.print();};window.onafterprint=function(){window.close();};${sEnd}</body></html>`;
        
        win.document.open(); win.document.write(html); win.document.close();
      }).getPrintData(saleNo);
    }

    /* --- 請求管理 --- */
    function generateInvoices(btn) {
      const monthInput = document.getElementById('invoice-month').value;
      if (!monthInput) { alert("請求月を選択してください。"); return; }
      const originalText = btn.innerText; btn.innerText = "データ集計中..."; btn.disabled = true;

      google.script.run
        .withSuccessHandler(res => {
          btn.innerText = originalText; btn.disabled = false;
          if (!res.success) return alert("エラー: " + res.message);
          setTimeout(() => { printWithTemplate(res.templateHtml, res.invoices, monthInput, res.company); }, 100);
        }).withFailureHandler(err => {
          btn.innerText = originalText; btn.disabled = false; alert("通信エラー: " + err.message);
        }).getInvoiceBulkDataWithTemplate(monthInput);
    }

    function printWithTemplate(templateHtml, invoices, monthStr, company) {
      const parts = monthStr.split('-');
      let year = parseInt(parts[0], 10);
      let month = parseInt(parts[1], 10) + 1;
      if (month > 12) { month = 1; year++; }
      const dueDateStr = year + "年" + month + "月20日";
      const targetMonthStr = parts[0] + "年" + parseInt(parts[1], 10) + "月分";

      const win = window.open('', '_blank');
      let finalHtml = `<!DOCTYPE html><html><head><style>
        body { font-family: "Noto Sans JP", sans-serif; margin: 0; padding: 0; color: #333; box-sizing: border-box; }
        .page { width: 210mm; height: 296mm; padding: 10mm; position: relative; page-break-after: always; }
        .page:last-child { page-break-after: auto; }
        .page-number { position: absolute; top: 10mm; right: 10mm; font-size: 12px; }
        .title { text-align: center; font-size: 26px; border-bottom: 2px solid #000; margin-bottom: 20px; padding-bottom: 5px; }
        .total-box { font-size: 20px; border-bottom: 3px solid #000; display: inline-block; padding: 5px 20px 0 0; margin-top: 10px; font-weight: bold; }
        .item-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
        .item-table th, .item-table td { border: 1px solid #000; padding: 6px; height: 32px; font-size: 13px; word-wrap: break-word; }
        .item-table th { background: #f2f2f2; text-align: center; }
      </style></head><body>`;

      invoices.forEach(inv => {
        const linesPerPage = 15;
        const totalPages = Math.ceil(inv.items.length / linesPerPage) || 1;
        for (let p = 0; p < totalPages; p++) {
          let pageContent = templateHtml;
          if (p === 0) {
            pageContent = pageContent.split('{{custZip}}').join(inv.custZip || '---');
            pageContent = pageContent.split('{{custAddr}}').join(inv.custAddr || '---');
            pageContent = pageContent.split('{{custTel}}').join(inv.custTel || '---');
            pageContent = pageContent.split('{{totalAmount}}').join('￥' + inv.totalAmount.toLocaleString());
            pageContent = pageContent.split('{{dueDate}}').join(dueDateStr);
            pageContent = pageContent.split('{{targetMonth}}').join(targetMonthStr);
          } else {
            pageContent = pageContent.split('{{custZip}}').join('');
            pageContent = pageContent.split('{{custAddr}}').join('');
            pageContent = pageContent.split('{{custTel}}').join('');
            pageContent = pageContent.split('{{totalAmount}}').join('');
            pageContent = pageContent.split('{{dueDate}}').join('');
            pageContent = pageContent.split('{{targetMonth}}').join('');
          }
          pageContent = pageContent.split('{{custName}}').join(inv.custName + (p > 0 ? " (続き)" : ""));
          pageContent = pageContent.split('{{pageNo}}').join((p + 1) + " / " + totalPages);
          pageContent = pageContent.split('{{compName}}').join(company[0] || '');
          pageContent = pageContent.split('{{compZip}}').join(company[1] || '');
          pageContent = pageContent.split('{{compAddr}}').join(company[2] || '');
          pageContent = pageContent.split('{{compTel}}').join(company[3] || '');
          pageContent = pageContent.split('{{compFax}}').join(company[4] || '');

          const startIdx = p * linesPerPage;
          for (let i = 0; i < linesPerPage; i++) {
            const item = inv.items[startIdx + i];
            pageContent = pageContent.replace('{{date}}', item ? item.date : "");
            pageContent = pageContent.replace('{{saleNo}}', item ? item.saleNo : "");
            pageContent = pageContent.replace('{{pName}}', item ? item.pName : "");
            pageContent = pageContent.replace('{{qty}}', item ? item.qty : "");
            pageContent = pageContent.replace('{{price}}', item ? item.price.toLocaleString() : "");
            pageContent = pageContent.replace('{{subTotal}}', item ? item.subTotal.toLocaleString() : "");
          }
          finalHtml += `<div class="page">${pageContent}</div>`;
        }
      });
      finalHtml += `</body></html>`;
      win.document.write(finalHtml); win.document.close();
      win.onload = function() { win.print(); };
    }

    /* =========================================
       販売分析機能用 JavaScript
       ========================================= */
    let chartInstance = null;
    let currentAggData = null; // 集計表のデータを保持

    function initAnalysisPage() {
      // デフォルトを今年に設定
      const now = new Date();
      const yyyy = now.getFullYear();
      document.getElementById('agg-start').value = yyyy + "-01";
      document.getElementById('agg-end').value = yyyy + "-12";
      execAnalysis();
    }

    function execAnalysis() {
      const start = document.getElementById('agg-start').value;
      const end = document.getElementById('agg-end').value;

      document.getElementById('dash-total-sales').innerText = "計算中...";
      document.getElementById('dash-total-profit').innerText = "計算中...";
      
      google.script.run.withSuccessHandler(res => {
        if (!res.success) {
          alert("分析データの取得に失敗しました: " + res.message);
          return;
        }

        // サマリー表示の更新
        const totalSales = res.summary.sales;
        const totalProfit = res.summary.profit;
        const margin = totalSales > 0 ? ((totalProfit / totalSales) * 100).toFixed(1) : 0;

        document.getElementById('dash-total-sales').innerText = totalSales.toLocaleString() + " 円";
        document.getElementById('dash-total-profit').innerText = totalProfit.toLocaleString() + " 円";
        document.getElementById('dash-profit-margin').innerText = margin + " %";

        // グラフの描画
        const ctx = document.getElementById('analysisChart').getContext('2d');
        if (chartInstance) { chartInstance.destroy(); }

        chartInstance = new Chart(ctx, {
          type: 'bar',
          data: {
            labels: res.chart.labels,
            datasets: [
              { label: '売上金額 (円)', data: res.chart.sales, backgroundColor: 'rgba(52, 152, 219, 0.7)', borderColor: 'rgba(41, 128, 185, 1)', borderWidth: 1 },
              { label: '粗利益 (円)', data: res.chart.profit, type: 'line', fill: false, borderColor: 'rgba(46, 204, 113, 1)', tension: 0.1, borderWidth: 2 }
            ]
          },
          options: { responsive: true, scales: { y: { beginAtZero: true } }, plugins: { title: { display: true, text: '月別 売上・利益推移' } } }
        });

        // 集計表データの保持と描画
        currentAggData = res.tables;
        renderAnalysisTables();

      }).getDashboardData(start, end);
    }

    // 画面上に各種集計表を描画する関数
    function renderAnalysisTables() {
      if (!currentAggData) return;

      // 1. 得意先別集計表
      let h1 = '<table class="table table-striped table-bordered"><thead><tr><th style="width:25%">得意先コード</th><th>得意先名</th><th class="text-end" style="width:25%">売上金額</th></tr></thead><tbody>';
      currentAggData.custTotal.forEach(r => h1 += `<tr><td class="text-center">${r.code}</td><td>${r.name}</td><td class="text-end">${r.total.toLocaleString()} 円</td></tr>`);
      h1 += '</tbody></table>';
      document.getElementById('container-custTotal').innerHTML = h1;

      // 2. 商品別集計表
      let h2 = '<table class="table table-striped table-bordered"><thead><tr><th style="width:25%">商品コード</th><th>商品名</th><th class="text-end" style="width:25%">売上金額</th></tr></thead><tbody>';
      currentAggData.prodTotal.forEach(r => h2 += `<tr><td class="text-center">${r.code}</td><td>${r.name}</td><td class="text-end">${r.total.toLocaleString()} 円</td></tr>`);
      h2 += '</tbody></table>';
      document.getElementById('container-prodTotal').innerHTML = h2;

      // 3. 【得意先 / 商品】階層リスト
      let h3 = '<table class="table table-bordered"><thead><tr><th style="width:15%" class="text-center">階層</th><th>コード : 名称</th><th class="text-end" style="width:25%">売上金額</th></tr></thead><tbody>';
      currentAggData.custProd.forEach(m => {
        h3 += `<tr class="table-primary"><td class="text-center">大分類</td><td>${m.code} : ${m.name}</td><td class="text-end">${m.total.toLocaleString()} 円</td></tr>`;
        m.items.forEach(c => {
          h3 += `<tr><td class="text-center" style="color:#666; font-size:12px;">┗ 小分類</td><td style="padding-left:30px">${c.code} : ${c.name}</td><td class="text-end">${c.total.toLocaleString()} 円</td></tr>`;
        });
      });
      h3 += '</tbody></table>';
      document.getElementById('container-custProd').innerHTML = h3;

      // 4. 【商品 / 得意先】階層リスト
      let h4 = '<table class="table table-bordered"><thead><tr><th style="width:15%" class="text-center">階層</th><th>コード : 名称</th><th class="text-end" style="width:25%">売上金額</th></tr></thead><tbody>';
      currentAggData.prodCust.forEach(m => {
        h4 += `<tr class="table-primary"><td class="text-center">大分類</td><td>${m.code} : ${m.name}</td><td class="text-end">${m.total.toLocaleString()} 円</td></tr>`;
        m.items.forEach(c => {
          h4 += `<tr><td class="text-center" style="color:#666; font-size:12px;">┗ 小分類</td><td style="padding-left:30px">${c.code} : ${c.name}</td><td class="text-end">${c.total.toLocaleString()} 円</td></tr>`;
        });
      });
      h4 += '</tbody></table>';
      document.getElementById('container-prodCust').innerHTML = h4;
    }

    // 各集計表の印刷処理（行数を厳密にカウントして改ページ制御）
    function printAggTable(type) {
      if (!currentAggData) return alert("データがありません");

      const start = document.getElementById('agg-start').value || "指定なし";
      const end = document.getElementById('agg-end').value || "指定なし";
      const periodStr = `${start} 〜 ${end}`;

      let lines = [];
      let title = "";
      let isNested = false;

      // 印刷用データの一次元化展開
      if (type === 'custTotal') {
        title = "得意先別集計表";
        currentAggData.custTotal.forEach(d => lines.push({ col1: d.code, col2: d.name, amount: d.total }));
      } else if (type === 'prodTotal') {
        title = "商品別集計表";
        currentAggData.prodTotal.forEach(d => lines.push({ col1: d.code, col2: d.name, amount: d.total }));
      } else if (type === 'custProd') {
        title = "【大分類:得意先 / 小分類:商品】集計表";
        isNested = true;
        currentAggData.custProd.forEach(major => {
          lines.push({ isHeader: true, text: `${major.code} : ${major.name}`, amount: major.total });
          major.items.forEach(minor => lines.push({ isHeader: false, text: `${minor.code} : ${minor.name}`, amount: minor.total }));
        });
      } else if (type === 'prodCust') {
        title = "【大分類:商品 / 小分類:得意先】集計表";
        isNested = true;
        currentAggData.prodCust.forEach(major => {
          lines.push({ isHeader: true, text: `${major.code} : ${major.name}`, amount: major.total });
          major.items.forEach(minor => lines.push({ isHeader: false, text: `${minor.code} : ${minor.name}`, amount: minor.total }));
        });
      }

      if (lines.length === 0) return alert("印刷するデータがありません。");

      const rowsPerPage = 20; // 1ページあたりの最大明細行数
      const totalPages = Math.ceil(lines.length / rowsPerPage);
      const win = window.open('', '_blank');

      let html = `<!DOCTYPE html><html><head><title>${title}</title><style>
        * { box-sizing: border-box; }
        body { font-family: "Noto Sans JP", sans-serif; margin: 0; padding: 0; color: #333; }
        .page { width: 210mm; padding: 15mm; margin: 0 auto; }
        .title { text-align: center; font-size: 24px; margin-bottom: 10px; border-bottom: 2px solid #333; padding-bottom: 5px; }
        .period { text-align: right; font-size: 14px; margin-bottom: 15px; }
        .table { width: 100%; border-collapse: collapse; }
        .table th, .table td { border: 1px solid #333; padding: 10px; font-size: 14px; }
        .table th { background-color: #f2f2f2; text-align: center; }
        .bg-primary-subtle { background-color: #e6f0ff; font-weight: bold; }
        .text-end { text-align: right; }
        .text-center { text-align: center; }
      </style></head><body>`;

      for (let p = 0; p < totalPages; p++) {
        // 【重要】最後のページには改ページCSSを当てない
        let pb = (p < totalPages - 1) ? "page-break-after: always;" : "";
        html += `<div class="page" style="${pb}">`;
        html += `<div class="title">${title}</div>`;
        html += `<div class="period">集計期間: ${periodStr}    (${p+1}/${totalPages}ページ)</div>`;
        html += `<table class="table">`;

        if (!isNested) {
          html += `<thead><tr><th style="width:25%">コード</th><th style="width:50%">名称</th><th style="width:25%">売上金額</th></tr></thead><tbody>`;
          const chunk = lines.slice(p * rowsPerPage, (p + 1) * rowsPerPage);
          chunk.forEach(r => {
            html += `<tr><td class="text-center">${r.col1}</td><td>${r.col2}</td><td class="text-end">${r.amount.toLocaleString()} 円</td></tr>`;
          });
        } else {
          html += `<thead><tr><th style="width:20%">階層</th><th style="width:55%">コード : 名称</th><th style="width:25%">売上金額</th></tr></thead><tbody>`;
          const chunk = lines.slice(p * rowsPerPage, (p + 1) * rowsPerPage);
          chunk.forEach(r => {
            if (r.isHeader) {
              html += `<tr class="bg-primary-subtle"><td class="text-center">大分類</td><td>${r.text}</td><td class="text-end">${r.amount.toLocaleString()} 円</td></tr>`;
            } else {
              html += `<tr><td class="text-center" style="font-size:12px; color:#555;">┗ 小分類</td><td style="padding-left:25px">${r.text}</td><td class="text-end">${r.amount.toLocaleString()} 円</td></tr>`;
            }
          });
        }
        html += `</tbody></table></div>`;
      }

      const sEnd = '<' + '/script>';
      html += `<script>
        window.onload = function() { window.print(); };
        window.onafterprint = function() { window.close(); };
      ${sEnd}</body></html>`;

      win.document.open();
      win.document.write(html);
      win.document.close();
    }
  </script>
</body>
</html>
```

### 2. Code.gs

```javascript
/**
 * =========================================
 * 1. 基本設定
 * =========================================
 */
const DB_FILE_NAME = "販売管理データベース"; // 連携するスプレッドシート名
const AUTH_CODE_EXPIRE_MIN = 5; // 2段階認証コードの有効期限（分）

/**
 * =========================================
 * 2. Webアプリ起動処理
 * =========================================
 */
function doGet() {
  return HtmlService.createTemplateFromFile('index')
    .evaluate()
    .setTitle('販売管理システム')
    .addMetaTag('viewport', 'width=device-width, initial-scale=1')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

/**
 * =========================================
 * 3. データベース（スプレッドシート）取得処理
 * =========================================
 */
function getDbWithLock() {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000); // 競合を防ぐため最大30秒間待機
    const files = DriveApp.getFilesByName(DB_FILE_NAME);
    if (files.hasNext()) {
      return SpreadsheetApp.open(files.next());
    }
    throw new Error(`Googleドライブ内に「${DB_FILE_NAME}」が見つかりません。`);
  } catch (e) {
    throw new Error("現在システムが混み合っています。時間を置いてやり直してください。");
  }
}

/**
 * =========================================
 * 4. 認証処理
 * =========================================
 */
function authenticateStep1(userId, password) {
  const lock = LockService.getScriptLock();
  try {
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName('Users');
    if (!sheet) return { success: false, message: "Usersシートが存在しません" };
    
    const data = sheet.getDataRange().getValues();
    for (let i = 1; i < data.length; i++) {
      if (data[i][0].toString() === userId) {
        if (data[i][5] === "LOCKED") {
          return { success: false, message: "アカウントがロックされています。管理者に連絡してください。" };
        }

        if (data[i][1].toString() === password) {
          sheet.getRange(i + 1, 5).setValue(0);
          const code = Math.floor(100000 + Math.random() * 900000).toString();
          const props = PropertiesService.getScriptProperties();
          props.setProperty("2FA_" + userId, JSON.stringify({
            code: code,
            expiry: new Date().getTime() + (AUTH_CODE_EXPIRE_MIN * 60000)
          }));
          const email = data[i][3];
          MailApp.sendEmail({
            to: email,
            subject: "【販売管理システム】認証コードのご案内",
            body: `認証コードは [ ${code} ] です。\n${AUTH_CODE_EXPIRE_MIN}分以内に入力してください。`
          });
          return { success: true, needs2FA: true, userId: userId };
          
        } else {
          let failCount = Number(data[i][4] || 0) + 1;
          sheet.getRange(i + 1, 5).setValue(failCount);
          if (failCount >= 3) {
            sheet.getRange(i + 1, 6).setValue("LOCKED");
            return { success: false, message: "3回失敗したためアカウントをロックしました。" };
          }
          return { success: false, message: `パスワードが違います（あと${3 - failCount}回でロック）` };
        }
      }
    }
    return { success: false, message: "ユーザーIDが見つかりません。" };
  } catch (e) {
    return { success: false, message: "エラー: " + e.message };
  } finally {
    lock.releaseLock();
  }
}

function verify2FACode(userId, inputCode) {
  const props = PropertiesService.getScriptProperties();
  const storedData = props.getProperty("2FA_" + userId);
  if (!storedData) return { success: false, message: "セッションが切れました。最初からやり直してください。" };
  
  const auth = JSON.parse(storedData);
  const now = new Date().getTime();
  if (now > auth.expiry) return { success: false, message: "認証コードの有効期限が切れています。" };
  if (auth.code === inputCode) {
    props.deleteProperty("2FA_" + userId);
    const lock = LockService.getScriptLock();
    try {
      const ss = getDbWithLock();
      const rows = ss.getSheetByName('Users').getDataRange().getValues();
      const userRow = rows.find(r => r[0].toString() === userId);
      return { success: true, userName: userRow[2] };
    } finally {
      lock.releaseLock();
    }
  } else {
    return { success: false, message: "認証コードが正しくありません。" };
  }
}

/**
 * =========================================
 * 5. 汎用データ取得
 * =========================================
 */
function getSheetData(sheetName) {
  const lock = LockService.getScriptLock();
  try {
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName(sheetName);
    if (!sheet) return [];
    return sheet.getDataRange().getValues();
  } catch (e) {
    return [];
  } finally {
    lock.releaseLock();
  }
}

/**
 * =========================================
 * 6. 得意先マスター管理
 * =========================================
 */
function getCustomers() {
  const data = getSheetData('Customers');
  if (data.length === 0) return [];
  return data.slice(1);
}

function saveCustomer(customer) {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000);
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName('Customers');
    const data = sheet.getDataRange().getValues();
    let targetRow = -1;

    if (!customer.code) {
      let maxNum = 0;
      for (let i = 1; i < data.length; i++) {
        const codeNum = parseInt(data[i][0].toString().replace('C', ''), 10);
        if (codeNum > maxNum) maxNum = codeNum;
      }
      customer.code = "C" + ("000" + (maxNum + 1)).slice(-3);
      targetRow = sheet.getLastRow() + 1;
    } else {
      for (let i = 1; i < data.length; i++) {
        if (data[i][0] === customer.code) {
          targetRow = i + 1;
          break;
        }
      }
    }

    if (targetRow > 0) {
      sheet.getRange(targetRow, 1, 1, 5).setValues([[customer.code, customer.name, customer.zip, customer.address, customer.tel]]);
      return { success: true, code: customer.code };
    }
    return { success: false, message: "対象データが見つかりません" };
  } catch (e) {
    return { success: false, message: e.toString() };
  } finally {
    lock.releaseLock();
  }
}

function deleteCustomer(code) {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000);
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName('Customers');
    const data = sheet.getDataRange().getValues();
    for (let i = 1; i < data.length; i++) {
      if (data[i][0] === code) {
        sheet.deleteRow(i + 1);
        return { success: true };
      }
    }
    return { success: false };
  } finally {
    lock.releaseLock();
  }
}

/**
 * =========================================
 * 7. 商品マスター管理
 * =========================================
 */
function getProducts() {
  const data = getSheetData('Products');
  if (data.length === 0) return [];
  return data.slice(1);
}

function saveProduct(product) {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000);
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName('Products');
    // 全て文字列として扱うため getDisplayValues
    const data = sheet.getDataRange().getDisplayValues();
    let targetRow = -1;
    
    if (!product.code) {
      let maxNum = 0;
      for (let i = 1; i < data.length; i++) {
        const codeNum = parseInt(data[i][0].toString().replace('P', ''), 10);
        if (!isNaN(codeNum) && codeNum > maxNum) maxNum = codeNum;
      }
      product.code = "P" + ("000" + (maxNum + 1)).slice(-3);
      targetRow = sheet.getLastRow() + 1;
    } else {
      for (let i = 1; i < data.length; i++) {
        if (data[i][0] === product.code) {
          targetRow = i + 1;
          break;
        }
      }
    }

    if (targetRow > 0) {
      sheet.getRange(targetRow, 1, 1, 4).setValues([[product.code, product.name, product.price, product.cost]]);
      return { success: true, code: product.code };
    }
    return { success: false, message: "対象データが見つかりません" };
  } catch (e) {
    return { success: false, message: e.toString() };
  } finally {
    lock.releaseLock();
  }
}

function deleteProduct(code) {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000);
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName('Products');
    const data = sheet.getDataRange().getValues();
    for (let i = 1; i < data.length; i++) {
      if (data[i][0] === code) {
        sheet.deleteRow(i + 1);
        return { success: true };
      }
    }
    return { success: false };
  } finally {
    lock.releaseLock();
  }
}

/**
 * =========================================
 * 8. 権限付与用ダミー関数（初回のみエディタから実行）
 * =========================================
 */
function askPermission() {
  DriveApp.getFilesByName('test');
  SpreadsheetApp.getActive();
  MailApp.sendEmail(Session.getActiveUser().getEmail(), '権限テスト', 'これはテストです');
  console.log("全ての権限が承認されています！");
}

/**
 * =========================================
 * 9. 売上管理機能・印刷データ取得
 * =========================================
 */
function getSales() {
  const lock = LockService.getScriptLock();
  try {
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName('Sales');
    if (!sheet) return [];
    const data = sheet.getDataRange().getDisplayValues();
    if (data.length === 0) return [];
    return data.slice(1);
  } catch (e) {
    return [];
  } finally {
    lock.releaseLock();
  }
}

function saveSale(sale) {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000);
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName('Sales');
    const data = sheet.getDataRange().getDisplayValues();
    let targetRow = -1;
    
    if (!sale.saleNo) {
      let maxNum = 0;
      for (let i = 1; i < data.length; i++) {
        const num = parseInt(data[i][0].split('S').join(''), 10);
        if (!isNaN(num) && num > maxNum) maxNum = num;
      }
      sale.saleNo = "S" + ("0000" + (maxNum + 1)).slice(-4);
      targetRow = sheet.getLastRow() + 1;
    } else {
      for (let i = 1; i < data.length; i++) {
        if (data[i][0] === sale.saleNo) {
          targetRow = i + 1;
          break;
        }
      }
    }

    if (targetRow > 0) {
      let rowData = [
        sale.saleNo, sale.date, sale.custCode, sale.custName, sale.totalAmount, sale.memo
      ];
      for (let i = 0; i < 6; i++) {
        if (sale.items && sale.items[i]) {
          rowData.push(sale.items[i].prodCode, sale.items[i].qty, sale.items[i].price);
        } else {
          rowData.push("", "", "");
        }
      }
      sheet.getRange(targetRow, 1, 1, rowData.length).setValues([rowData]);
      return { success: true, saleNo: sale.saleNo };
    }
    return { success: false, message: "対象データが見つかりません" };
  } catch (e) {
    return { success: false, message: e.toString() };
  } finally {
    lock.releaseLock();
  }
}

function deleteSale(saleNo) {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000);
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName('Sales');
    const data = sheet.getDataRange().getDisplayValues();
    for (let i = 1; i < data.length; i++) {
      if (data[i][0] === saleNo) {
        sheet.deleteRow(i + 1);
        return { success: true };
      }
    }
    return { success: false };
  } finally {
    lock.releaseLock();
  }
}

function getPrintData(saleNo) {
  const lock = LockService.getScriptLock();
  try {
    const ss = getDbWithLock();
    const compSheet = ss.getSheetByName('Company');
    const company = compSheet ? (compSheet.getDataRange().getDisplayValues()[1] || []) : [];
    
    const salesSheet = ss.getSheetByName('Sales');
    const salesData = salesSheet ? salesSheet.getDataRange().getDisplayValues() : [];
    let saleRow = null;
    for (let i = 1; i < salesData.length; i++) {
      if (salesData[i][0] === saleNo) {
        saleRow = salesData[i];
        break;
      }
    }
    
    const prodSheet = ss.getSheetByName('Products');
    const products = prodSheet ? prodSheet.getDataRange().getDisplayValues().slice(1) : [];

    return { success: true, company: company, sale: saleRow, products: products };
  } catch (e) {
    return { success: false };
  } finally {
    lock.releaseLock();
  }
}

/**
 * =========================================
 * 10. 請求管理機能（一括データ集計）
 * =========================================
 */
function getInvoiceBulkData(monthStr) {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000);
    const ss = getDbWithLock();
    
    const compSheet = ss.getSheetByName('Company');
    const company = compSheet ? (compSheet.getDataRange().getDisplayValues()[1] || []) : [];

    const custSheet = ss.getSheetByName('Customers');
    const custData = custSheet ? custSheet.getDataRange().getDisplayValues().slice(1) : [];
    
    const prodSheet = ss.getSheetByName('Products');
    const prodData = prodSheet ? prodSheet.getDataRange().getDisplayValues().slice(1) : [];

    const salesSheet = ss.getSheetByName('Sales');
    const salesData = salesSheet ? salesSheet.getDataRange().getDisplayValues().slice(1) : [];

    const targetPrefix1 = monthStr;
    const targetPrefix2 = monthStr.split('-').join('/');

    const monthlySales = salesData.filter(row => {
       const dateStr = row[1] || "";
       return dateStr.indexOf(targetPrefix1) === 0 || dateStr.indexOf(targetPrefix2) === 0;
    });
    
    if (monthlySales.length === 0) {
       return { success: false, message: "指定された月の売上データがありません。" };
    }

    const invoiceMap = {};
    monthlySales.forEach(sale => {
       const saleNo = sale[0];
       const date = sale[1];
       const custCode = sale[2];

       if (!invoiceMap[custCode]) {
         const cMatch = custData.find(c => c[0] === custCode);
         invoiceMap[custCode] = {
           custCode: custCode,
           custName: cMatch ? cMatch[1] : sale[3],
           custZip: cMatch ? cMatch[2] : "",
           custAddr: cMatch ? cMatch[3] : "",
           custTel: cMatch ? cMatch[4] : "",
           totalAmount: 0,
           items: []
         };
       }

       for (let i = 0; i < 6; i++) {
         const offset = 6 + (i * 3);
         const pCode = sale[offset];
         const pQty = Number(sale[offset + 1]);
         const pPrice = Number(sale[offset + 2]);

         if (pCode && pQty > 0) {
           const pMatch = prodData.find(p => p[0] === pCode);
           const pName = pMatch ? pMatch[1] : "不明な商品";
           const subTotal = pQty * pPrice;
           
           invoiceMap[custCode].totalAmount += subTotal;
           invoiceMap[custCode].items.push({
             date: date,
             saleNo: saleNo,
             pCode: pCode,
             pName: pName,
             qty: pQty,
             price: pPrice,
             subTotal: subTotal
           });
         }
       }
    });
    
    const results = [];
    for (let code in invoiceMap) {
       const inv = invoiceMap[code];
       inv.items.sort((a, b) => {
         if (a.date < b.date) return -1;
         if (a.date > b.date) return 1;
         return 0;
       });
       results.push(inv);
    }

    return {
      success: true,
      company: company,
      invoices: results
    };
  } catch (e) {
    return { success: false, message: e.toString() };
  } finally {
    lock.releaseLock();
  }
}

function getTemplateHtmlFromFile() {
  return HtmlService.createHtmlOutputFromFile('請求書').getContent();
}

function getInvoiceBulkDataWithTemplate(monthStr) {
  const data = getInvoiceBulkData(monthStr); 
  if (data.success) {
    data.templateHtml = getTemplateHtmlFromFile();
  }
  return data;
}

/**
 * =========================================
 * 11. 販売分析機能・集計データ取得機能
 * =========================================
 */
function getDashboardData(startMonth, endMonth) {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000);
    const ss = getDbWithLock();

    // マスターの取得（getDisplayValuesで全て文字列）
    const custSheet = ss.getSheetByName('Customers');
    const custData = custSheet ? custSheet.getDataRange().getDisplayValues().slice(1) : [];
    
    const prodSheet = ss.getSheetByName('Products');
    const prodData = prodSheet ? prodSheet.getDataRange().getDisplayValues().slice(1) : [];
    const costMap = {};
    prodData.forEach(p => { 
      costMap[p[0]] = Number(p[3]) || 0; 
    });

    // 売上データの取得
    const salesSheet = ss.getSheetByName('Sales');
    const salesData = salesSheet ? salesSheet.getDataRange().getDisplayValues().slice(1) : [];

    let totalSales = 0;
    let totalProfit = 0;
    const monthlyData = {};

    // 各種集計用のマップ
    const custMap = {};
    const prodMap = {};
    const custProdMap = {}; // { custCode: { total:0, items: { prodCode: total } } }
    const prodCustMap = {}; // { prodCode: { total:0, items: { custCode: total } } }

    const startStr = startMonth || "";
    const endStr = endMonth || "";

    salesData.forEach(sale => {
      const dateStr = sale[1] || "";
      if (!dateStr) return;
      
      const month = dateStr.substring(0, 7).split('/').join('-');
      if (startStr && month < startStr) return;
      if (endStr && month > endStr) return;

      if (!monthlyData[month]) monthlyData[month] = { sales: 0, profit: 0 };

      let saleTotal = 0;
      let saleCost = 0;
      const custCode = sale[2];

      for (let i = 0; i < 6; i++) {
        const offset = 6 + (i * 3);
        const pCode = sale[offset];
        const pQty = Number(sale[offset + 1]) || 0;
        const pPrice = Number(sale[offset + 2]) || 0;

        if (pCode && pQty > 0) {
          const subSales = pQty * pPrice;
          const unitCost = costMap[pCode] || 0;
          const subCost = pQty * unitCost;

          saleTotal += subSales;
          saleCost += subCost;

          // ----- 以下、各種集計処理 -----
          // 1. 得意先別集計
          if (!custMap[custCode]) custMap[custCode] = 0;
          custMap[custCode] += subSales;

          // 2. 商品別集計
          if (!prodMap[pCode]) prodMap[pCode] = 0;
          prodMap[pCode] += subSales;

          // 3. 【得意先 / 商品】集計
          if (!custProdMap[custCode]) custProdMap[custCode] = { total: 0, items: {} };
          custProdMap[custCode].total += subSales;
          if (!custProdMap[custCode].items[pCode]) custProdMap[custCode].items[pCode] = 0;
          custProdMap[custCode].items[pCode] += subSales;

          // 4. 【商品 / 得意先】集計
          if (!prodCustMap[pCode]) prodCustMap[pCode] = { total: 0, items: {} };
          prodCustMap[pCode].total += subSales;
          if (!prodCustMap[pCode].items[custCode]) prodCustMap[pCode].items[custCode] = 0;
          prodCustMap[pCode].items[custCode] += subSales;
        }
      }

      totalSales += saleTotal;
      totalProfit += (saleTotal - saleCost);
      monthlyData[month].sales += saleTotal;
      monthlyData[month].profit += (saleTotal - saleCost);
    });

    // --- 名前補完用ヘルパー関数 ---
    const getCustName = (code) => {
      const match = custData.find(x => x[0] === code);
      return match ? match[1] : code;
    };
    const getProdName = (code) => {
      const match = prodData.find(x => x[0] === code);
      return match ? match[1] : code;
    };

    // --- マップを配列に変換し、金額の降順でソート ---
    const custTotalArr = Object.keys(custMap)
      .map(c => ({ code: c, name: getCustName(c), total: custMap[c] }))
      .sort((a, b) => b.total - a.total);

    const prodTotalArr = Object.keys(prodMap)
      .map(p => ({ code: p, name: getProdName(p), total: prodMap[p] }))
      .sort((a, b) => b.total - a.total);

    const custProdArr = Object.keys(custProdMap).map(c => {
      let itemsArr = Object.keys(custProdMap[c].items)
        .map(p => ({ code: p, name: getProdName(p), total: custProdMap[c].items[p] }))
        .sort((a, b) => b.total - a.total); // 小分類も降順
      return { code: c, name: getCustName(c), total: custProdMap[c].total, items: itemsArr };
    }).sort((a, b) => b.total - a.total); // 大分類も降順

    const prodCustArr = Object.keys(prodCustMap).map(p => {
      let itemsArr = Object.keys(prodCustMap[p].items)
        .map(c => ({ code: c, name: getCustName(c), total: prodCustMap[p].items[c] }))
        .sort((a, b) => b.total - a.total); // 小分類も降順
      return { code: p, name: getProdName(p), total: prodCustMap[p].total, items: itemsArr };
    }).sort((a, b) => b.total - a.total); // 大分類も降順

    // --- グラフ用データの整形 ---
    const sortedMonths = Object.keys(monthlyData).sort();
    const labels = [];
    const salesArr = [];
    const profitArr = [];

    sortedMonths.forEach(m => {
      labels.push(m);
      salesArr.push(monthlyData[m].sales);
      profitArr.push(monthlyData[m].profit);
    });

    return {
      success: true,
      summary: { sales: totalSales, profit: totalProfit },
      chart: { labels: labels, sales: salesArr, profit: profitArr },
      tables: {
        custTotal: custTotalArr,
        prodTotal: prodTotalArr,
        custProd: custProdArr,
        prodCust: prodCustArr
      }
    };
  } catch (e) {
    return { success: false, message: e.toString() };
  } finally {
    lock.releaseLock();
  }
}
```

付録

④大量データに耐えられるようにするには

付録は，新規作成した別のチャットでの相談です。

※「6-2」で動作したプロジェクトの「Code.gs」と「index.html」をテキスト・ファイルに保存して，
「+ファイルアップロード」をクリックして，2つのファイルを添付してから相談する。

データ件数が増えたので，最初に全件を一覧表示するのを止めて，得意先マスター・商品マスター・売上データの検索方法を検索ボタンをクリックしたら，直接，スプレッドシートから絞り込んで表示するようにして欲しい。なお，新規登録した場合は，一覧表示に戻る時にそのデータを表示して欲しい。また，売上伝票入力の際にも，得意先マスター・商品マスターを最初に全件を一覧表示するのを止めて，得意先マスター・商品マスターの検索方法を検索ボタンをクリックしたら，直接，スプレッドシートから絞り込んで表示するようにして欲しい。添付のコードから，変更した全コードを教えて欲しい。

ご提示いただいた要件に沿って、以下の変更を行いました。

1. **一覧の初期表示を停止:** 得意先マスター・商品マスター・売上管理の各画面を開いた際、初期状態ではデータを全件読み込まず空の状態で表示されるようにしました。
2. **検索ボタンでの直接絞り込み:** 画面上に「検索」ボタンを配置し、クリック時にサーバー（スプレッドシート）側で直接データを検索・絞り込んでクライアントに返す仕組みにしました。
3. **新規登録・編集後の単一表示:** データを新規登録または編集した後に一覧へ戻る際、登録したコード（または伝票番号）で再検索をかけ、そのデータのみが一覧に表示されるようにしました。
4. **売上伝票入力時のマスター検索:** 売上伝票の「得意先」および「商品」の入力欄について、最初に全件を読み込むのをやめました。検索語を入力して「検索」ボタンをクリックしたときにのみ該当データを取得し、選択候補（プルダウン）として表示するように変更しました。

以下が変更した全コードです。

### 1. index.html

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <base target="_top">
  <style>
    /* ========== 全体設定 ========== */
    :root { --primary: #2c3e50; --bg: #f4f7f6; --accent: #3498db; }
    * { box-sizing: border-box; }
    body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; background: var(--bg); color: #333; display: flex; flex-direction: column; height: 100vh; }
    .hidden { display: none !important; }
    
    /* ========== ログイン画面 ========== */
    #view-login { display: flex; justify-content: center; align-items: center; height: 100vh; }
    .login-box { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); width: 320px; }
    
    /* ========== メインレイアウト ========== */
    #view-main { display: flex; flex-direction: column; height: 100%; }
    nav { background: var(--primary); color: white; padding: 0 20px; display: flex; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
    nav h3 { margin-right: 30px; }
    nav ul { list-style: none; display: flex; gap: 5px; margin: 0; padding: 0; }
    nav li { padding: 15px 20px; cursor: pointer; transition: 0.2s; font-weight: bold; font-size: 14px; }
    nav li:hover { background: #34495e; border-radius: 4px; }
    .logout-btn { margin-left: auto; color: #e74c3c; cursor: pointer; padding: 15px; font-weight: bold; }
    
    main { flex: 1; padding: 20px; overflow-y: auto; }
    .card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
    
    /* ========== フォーム部品 ========== */
    input { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; }
    button { padding: 12px; background: var(--accent); color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 16px; margin-top: 10px; width: 100%; }
    button:disabled { background: #ccc; cursor: not-allowed; }
    button:hover:not(:disabled) { background: #2980b9; }
    #login-msg { color: #e74c3c; font-size: 13px; margin-top: 10px; font-weight: bold; text-align: center; }

    /* ========== Bootstrap 5風 テーブルUI ========== */
    .table { width: 100%; border-collapse: collapse; margin-top: 10px; margin-bottom: 20px; background-color: #fff; }
    .table th, .table td { padding: 12px; border-bottom: 1px solid #dee2e6; vertical-align: middle; font-size: 14px; }
    .table thead th { vertical-align: bottom; border-bottom: 2px solid #dee2e6; background-color: #f8f9fa; }
    .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(0,0,0,.025); }
    .table-bordered th, .table-bordered td { border: 1px solid #dee2e6; }
    .table-primary { background-color: #cfe2ff !important; font-weight: bold; }
    .table-primary th, .table-primary td { border-color: #bacbe6; }
    .text-end { text-align: right !important; }
    .text-center { text-align: center !important; }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>

  <div id="view-login">
    <div class="login-box">
      <h2 style="text-align: center; margin-bottom: 20px;">販売管理システム</h2>
      <div id="step1">
        <label style="font-size: 12px; font-weight: bold;">ユーザーID</label>
        <input type="text" id="uid" placeholder="IDを入力">
        <label style="font-size: 12px; font-weight: bold;">パスワード</label>
        <input type="password" id="upw" placeholder="パスワードを入力">
        <button id="btn-login" onclick="onLoginStep1()">ログイン</button>
      </div>
      <div id="step2" class="hidden">
        <p style="font-size: 13px; color: #555;">登録されたメールアドレスに6桁の認証コードを送信しました。</p>
        <label style="font-size: 12px; font-weight: bold;">認証コード</label>
        <input type="text" id="auth-code" placeholder="123456" maxlength="6" style="text-align: center; font-size: 20px; letter-spacing: 5px;">
        <button id="btn-verify" onclick="onLoginStep2()">認証する</button>
        <a href="#" onclick="location.reload()" style="font-size: 12px; display: block; text-align: center; margin-top: 15px; color: #666;">最初からやり直す</a>
      </div>
      <p id="login-msg"></p>
    </div>
  </div>

  <div id="view-main" class="hidden">
    <nav>
      <h3>販売管理 v1.0</h3>
      <ul>
        <li onclick="showPage('customer')">得意先マスター</li>
        <li onclick="showPage('product')">商品マスター</li>
        <li onclick="showPage('sales')">売上管理</li>
        <li onclick="showPage('invoice')">請求管理</li>
        <li onclick="showPage('analysis')">販売分析</li>
      </ul>
      <div class="logout-btn" onclick="location.reload()">ログアウト</div>
    </nav>
    
    <main>
      <div id="p-home" class="page card">
        <h2>ようこそ、<span id="display-name"></span> さん</h2>
        <p>上部のメニューから操作を選択してください。</p>
      </div>

      <div id="p-customer" class="page card hidden">
        <div style="display:flex; justify-content:space-between; align-items:center;">
          <h2>得意先マスター</h2>
          <button onclick="openCustomerForm()" style="width:auto; padding:8px 15px;">＋新規登録</button>
        </div>
        <div style="margin-top: 15px; display: flex; gap: 10px;">
          <input type="text" id="cust-search" placeholder="得意先名、コード、住所などで検索..." style="flex: 1; margin: 0;">
          <button onclick="execCustomerSearch()" style="width:auto; padding:8px 20px;">検索</button>
          <div style="line-height: 40px; font-size: 13px; color: #666;"><span id="cust-count">0</span> 件表示</div>
        </div>
        <div style="overflow-x:auto; margin-top:20px;">
          <table style="width:100%; border-collapse:collapse;">
            <thead>
              <tr style="background:#eee; text-align:left;">
                <th style="padding:10px; border-bottom:2px solid #ddd;">コード</th>
                <th style="padding:10px; border-bottom:2px solid #ddd;">得意先名</th>
                <th style="padding:10px; border-bottom:2px solid #ddd;">郵便番号</th>
                <th style="padding:10px; border-bottom:2px solid #ddd;">住所</th>
                <th style="padding:10px; border-bottom:2px solid #ddd;">電話番号</th>
                <th style="padding:10px; border-bottom:2px solid #ddd;">操作</th>
              </tr>
            </thead>
            <tbody id="customer-list-body"></tbody>
          </table>
        </div>
        <div id="customer-modal" class="hidden" style="position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); display:flex; justify-content:center; align-items:center; z-index:1000;">
          <div class="card" style="width:400px;">
            <h3 id="form-title">得意先登録</h3>
            <input type="hidden" id="cust-code">
            <label>得意先名</label><input type="text" id="cust-name">
            <label>郵便番号</label><input type="text" id="cust-zip" placeholder="000-0000">
            <label>住所</label><input type="text" id="cust-address">
            <label>電話番号</label><input type="text" id="cust-tel" placeholder="00-0000-0000">
            <div style="display:flex; gap:10px; margin-top:10px;">
              <button onclick="saveCustomerData()" id="btn-cust-save">保存</button>
              <button onclick="closeCustomerForm()" style="background:#95a5a6;">キャンセル</button>
            </div>
          </div>
        </div>
      </div>
      
      <div id="p-product" class="page card hidden">
        <div style="display:flex; justify-content:space-between; align-items:center;">
          <h2>商品マスター</h2>
          <button onclick="openProductForm()" style="width:auto; padding:8px 15px;">＋新規登録</button>
        </div>
        <div style="margin-top: 15px; display: flex; gap: 10px;">
          <input type="text" id="prod-search" placeholder="商品名、コードで検索..." style="flex: 1; margin: 0;">
          <button onclick="execProductSearch()" style="width:auto; padding:8px 20px;">検索</button>
          <div style="line-height: 40px; font-size: 13px; color: #666;"><span id="prod-count">0</span> 件表示</div>
        </div>
        <div style="overflow-x:auto; margin-top:20px;">
          <table style="width:100%; border-collapse:collapse;">
            <thead>
              <tr style="background:#eee; text-align:left;">
                <th style="padding:10px; border-bottom:2px solid #ddd;">コード</th>
                <th style="padding:10px; border-bottom:2px solid #ddd;">商品名</th>
                <th style="padding:10px; border-bottom:2px solid #ddd; text-align:right;">単価</th>
                <th style="padding:10px; border-bottom:2px solid #ddd; text-align:right;">原価</th>
                <th style="padding:10px; border-bottom:2px solid #ddd; text-align:center;">操作</th>
              </tr>
            </thead>
            <tbody id="product-list-body"></tbody>
          </table>
        </div>
        <div id="product-modal" class="hidden" style="position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); display:flex; justify-content:center; align-items:center; z-index:1000;">
          <div class="card" style="width:350px;">
            <h3 id="prod-form-title">商品登録</h3>
            <input type="hidden" id="prod-code">
            <label>商品名</label><input type="text" id="prod-name">
            <div style="display:flex; gap:10px;">
              <div style="flex:1;"><label>単価 (円)</label><input type="number" id="prod-price" placeholder="0"></div>
              <div style="flex:1;"><label>原価 (円)</label><input type="number" id="prod-cost" placeholder="0"></div>
            </div>
            <div style="display:flex; gap:10px; margin-top:10px;">
              <button onclick="saveProductData()" id="btn-prod-save">保存</button>
              <button onclick="closeProductForm()" style="background:#95a5a6;">キャンセル</button>
            </div>
          </div>
        </div>
      </div>
      
      <div id="p-sales" class="page card hidden">
        <div style="display:flex; justify-content:space-between; align-items:center;">
          <h2>売上管理</h2>
          <button onclick="openSalesForm()" style="width:auto; padding:8px 15px;">＋新規伝票</button>
        </div>
        <div style="margin-top: 15px; display: flex; gap: 10px;">
          <input type="text" id="sales-search" placeholder="伝票番号、得意先名などで検索..." style="flex: 1; margin: 0;">
          <button onclick="execSalesSearch()" style="width:auto; padding:8px 20px;">検索</button>
          <div style="line-height: 40px; font-size: 13px; color: #666;"><span id="sales-count">0</span> 件表示</div>
        </div>
        
        <datalist id="dl-customers"></datalist>
        <datalist id="dl-products"></datalist>

        <div style="overflow-x:auto; margin-top:20px;">
          <table style="width:100%; border-collapse:collapse;">
            <thead>
              <tr style="background:#eee; text-align:left;">
                <th style="padding:10px; border-bottom:2px solid #ddd;">伝票番号</th>
                <th style="padding:10px; border-bottom:2px solid #ddd;">日付</th>
                <th style="padding:10px; border-bottom:2px solid #ddd;">得意先</th>
                <th style="padding:10px; border-bottom:2px solid #ddd; text-align:right;">合計金額</th>
                <th style="padding:10px; border-bottom:2px solid #ddd; text-align:center;">操作</th>
              </tr>
            </thead>
            <tbody id="sales-list-body"></tbody>
          </table>
        </div>

        <div id="sales-modal" class="hidden" style="position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); display:flex; justify-content:center; align-items:center; z-index:1000;">
          <div class="card" style="width:700px; max-height:90vh; overflow-y:auto;">
            <h3 id="sales-form-title">売上伝票登録</h3>
            <div style="display:flex; gap:10px;">
              <div style="flex:1;"><label>伝票番号</label><input type="text" id="sale-no" readonly placeholder="自動採番" style="background:#eee;"></div>
              <div style="flex:1;"><label>日付</label><input type="date" id="sale-date"></div>
            </div>
            
            <label>得意先 (検索語を入力して検索ボタンを押してください)</label>
            <div style="display:flex; gap:5px; margin-bottom:5px;">
              <input type="text" id="sale-cust-query" placeholder="得意先コード、名前など" style="flex:1;">
              <button onclick="execSaleCustSearch()" style="width:auto; padding:8px 15px;">検索</button>
            </div>
            <input type="text" id="sale-cust" list="dl-customers" placeholder="検索結果から選択...">
            
            <table style="width:100%; margin-top:15px; border-collapse:collapse; font-size:14px;">
              <thead>
                <tr style="background:#f9f9f9;">
                  <th style="padding:5px; text-align:left;">商品 (検索して候補から選択)</th>
                  <th style="padding:5px; width:100px;">単価</th>
                  <th style="padding:5px; width:80px;">数量</th>
                  <th style="padding:5px; width:100px;">金額</th>
                </tr>
              </thead>
              <tbody id="sales-items-container">
                </tbody>
            </table>
            
            <div style="display:flex; justify-content:flex-end; margin-top:15px; align-items:center; gap:15px;">
              <div style="font-weight:bold;">合計金額: <span id="sale-total-display" style="font-size:20px; color:var(--accent);">0</span> 円</div>
              <input type="hidden" id="sale-total-val" value="0">
            </div>

            <label>備考</label><input type="text" id="sale-memo">
            
            <div style="display:flex; gap:10px; margin-top:15px;">
              <button onclick="saveSalesData()" id="btn-sales-save">保存</button>
              <button onclick="closeSalesForm()" style="background:#95a5a6;">キャンセル</button>
            </div>
          </div>
        </div>
      </div>

      <div id="p-invoice" class="page card hidden">
        <!-- 請求管理ダミー表示 -->
        <h2>請求管理</h2>
        <p>対象月を選択し、その月に売上があった全得意先の請求書を一括生成します。</p>
        <div style="display:flex; gap:15px; align-items:center; margin-top:20px;">
          <label style="font-weight:bold;">請求月:</label>
          <input type="month" id="invoice-month" style="width:200px; margin:0;">
          <button onclick="generateInvoices(this)" style="width:auto; padding:10px 20px;">一括請求書作成・印刷</button>
        </div>
        <p id="invoice-msg" style="margin-top:15px; color:#e74c3c; font-weight:bold;"></p>
      </div>

      <div id="p-analysis" class="page card hidden">
        <!-- 分析画面ダミー表示 -->
        <h2>販売分析ダッシュボード</h2>
        <!-- 省略せず既存コード維持 -->
        <div style="background:#f9f9f9; padding:15px; border:1px solid #ddd; border-radius:5px; margin-bottom:20px; display:flex; gap:15px; align-items:center;">
          <label style="font-weight:bold; font-size:14px;">集計期間:</label>
          <input type="month" id="agg-start" style="width:150px; margin:0;">
          <span>〜</span>
          <input type="month" id="agg-end" style="width:150px; margin:0;">
          <button onclick="execAnalysis()" style="width:auto; padding:8px 20px; margin:0; font-size:14px;">集計実行</button>
        </div>
        <!-- 以下略（そのまま維持）-->
        <div style="display: flex; gap: 20px; margin: 20px 0;">
          <div style="flex: 1; background: #3498db; color: white; padding: 20px; border-radius: 8px; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
            <h3 style="margin-top:0; font-size:16px;">売上合計</h3>
            <div id="dash-total-sales" style="font-size: 28px; font-weight: bold; letter-spacing: 1px;">0 円</div>
          </div>
          <div style="flex: 1; background: #2ecc71; color: white; padding: 20px; border-radius: 8px; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
            <h3 style="margin-top:0; font-size:16px;">粗利合計</h3>
            <div id="dash-total-profit" style="font-size: 28px; font-weight: bold; letter-spacing: 1px;">0 円</div>
          </div>
          <div style="flex: 1; background: #f39c12; color: white; padding: 20px; border-radius: 8px; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
            <h3 style="margin-top:0; font-size:16px;">全体利益率</h3>
            <div id="dash-profit-margin" style="font-size: 28px; font-weight: bold;">0 %</div>
          </div>
        </div>
        <div style="width: 100%; background: #fff; padding: 15px; border: 1px solid #eee; border-radius: 8px; box-sizing: border-box;">
          <canvas id="analysisChart" height="100"></canvas>
        </div>
        <hr style="margin:40px 0; border:0; border-top:2px dashed #ddd;">
        <h2>各種集計表（期間指定）</h2>
        <div style="margin-bottom:40px;">
          <div style="display:flex; justify-content:space-between; align-items:center;">
            <h3>1. 得意先別集計表</h3>
            <button onclick="printAggTable('custTotal')" style="width:auto; padding:5px 15px; font-size:13px; background:#2ecc71;">この表を印刷</button>
          </div>
          <div id="container-custTotal" style="max-height:400px; overflow-y:auto; margin-top:10px;"></div>
        </div>
        <div style="margin-bottom:40px;">
          <div style="display:flex; justify-content:space-between; align-items:center;">
            <h3>2. 商品別集計表</h3>
            <button onclick="printAggTable('prodTotal')" style="width:auto; padding:5px 15px; font-size:13px; background:#2ecc71;">この表を印刷</button>
          </div>
          <div id="container-prodTotal" style="max-height:400px; overflow-y:auto; margin-top:10px;"></div>
        </div>
        <div style="margin-bottom:40px;">
          <div style="display:flex; justify-content:space-between; align-items:center;">
            <h3>3. 【大分類:得意先 / 小分類:商品】集計表</h3>
            <button onclick="printAggTable('custProd')" style="width:auto; padding:5px 15px; font-size:13px; background:#2ecc71;">この表を印刷</button>
          </div>
          <div id="container-custProd" style="max-height:400px; overflow-y:auto; margin-top:10px;"></div>
        </div>
        <div style="margin-bottom:40px;">
          <div style="display:flex; justify-content:space-between; align-items:center;">
            <h3>4. 【大分類:商品 / 小分類:得意先】集計表</h3>
            <button onclick="printAggTable('prodCust')" style="width:auto; padding:5px 15px; font-size:13px; background:#2ecc71;">この表を印刷</button>
          </div>
          <div id="container-prodCust" style="max-height:400px; overflow-y:auto; margin-top:10px;"></div>
        </div>
      </div>
    </main>
  </div>

  <script>
    let currentUserId = "";

    /* --- ログイン --- */
    function onLoginStep1() {
      const uid = document.getElementById('uid').value;
      const upw = document.getElementById('upw').value;
      const btn = document.getElementById('btn-login');
      const msg = document.getElementById('login-msg');
      if (!uid || !upw) return msg.innerText = "IDとパスワードを入力してください。";
      btn.disabled = true; btn.innerText = "確認中..."; msg.innerText = "";
      
      google.script.run.withSuccessHandler(res => {
        btn.disabled = false; btn.innerText = "ログイン";
        if (res.success && res.needs2FA) {
          currentUserId = res.userId;
          document.getElementById('step1').classList.add('hidden');
          document.getElementById('step2').classList.remove('hidden');
        } else msg.innerText = res.message;
      }).authenticateStep1(uid, upw);
    }

    function onLoginStep2() {
      const code = document.getElementById('auth-code').value;
      const btn = document.getElementById('btn-verify');
      const msg = document.getElementById('login-msg');
      if (!code) return msg.innerText = "コードを入力してください。";
      btn.disabled = true; btn.innerText = "認証中..."; msg.innerText = "";
      
      google.script.run.withSuccessHandler(res => {
        btn.disabled = false; btn.innerText = "認証する";
        if (res.success) {
          document.getElementById('display-name').innerText = res.userName;
          document.getElementById('view-login').classList.add('hidden');
          document.getElementById('view-main').classList.remove('hidden');
          showPage('home');
        } else msg.innerText = res.message;
      }).verify2FACode(currentUserId, code);
    }

    /* --- SPA画面切り替え --- */
    function showPage(pageId) {
      document.querySelectorAll('.page').forEach(p => p.classList.add('hidden'));
      document.getElementById('p-' + pageId).classList.remove('hidden');
      if (pageId === 'customer') initCustomerPage();
      if (pageId === 'product') initProductPage();
      if (pageId === 'sales') initSalesPage();
      if (pageId === 'analysis') initAnalysisPage();
    }

    /* --- 得意先マスター --- */
    function initCustomerPage() { 
      document.getElementById('customer-list-body').innerHTML = '';
      document.getElementById('cust-count').innerText = "0";
      document.getElementById('cust-search').value = '';
    }
    
    function execCustomerSearch(forceQuery) {
      const query = forceQuery !== undefined ? forceQuery : document.getElementById('cust-search').value;
      google.script.run.withSuccessHandler(renderCustomerTable).searchCustomers(query);
    }

    function renderCustomerTable(data) {
      const tbody = document.getElementById('customer-list-body');
      tbody.innerHTML = '';
      data.forEach(row => {
        const tr = document.createElement('tr');
        tr.innerHTML = `
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[0]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[1]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[2]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[3]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[4]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd; text-align:center;">
            <button onclick="editCustomer('${row[0]}','${row[1]}','${row[2]}','${row[3]}','${row[4]}')" style="width:auto; padding:4px 8px; font-size:12px; background:#f39c12;">編集</button>
            <button onclick="deleteCustomerData('${row[0]}')" style="width:auto; padding:4px 8px; font-size:12px; background:#e74c3c;">削除</button>
          </td>`;
        tbody.appendChild(tr);
      });
      document.getElementById('cust-count').innerText = data.length;
    }

    function openCustomerForm() {
      document.getElementById('form-title').innerText = "得意先登録（新規）";
      document.getElementById('cust-code').value = "";
      document.getElementById('cust-name').value = "";
      document.getElementById('cust-zip').value = "";
      document.getElementById('cust-address').value = "";
      document.getElementById('cust-tel').value = "";
      document.getElementById('customer-modal').classList.remove('hidden');
    }

    function editCustomer(code, name, zip, addr, tel) {
      document.getElementById('form-title').innerText = "得意先編集 (" + code + ")";
      document.getElementById('cust-code').value = code;
      document.getElementById('cust-name').value = name;
      document.getElementById('cust-zip').value = zip;
      document.getElementById('cust-address').value = addr;
      document.getElementById('cust-tel').value = tel;
      document.getElementById('customer-modal').classList.remove('hidden');
    }

    function closeCustomerForm() { document.getElementById('customer-modal').classList.add('hidden'); }

    function saveCustomerData() {
      const btn = document.getElementById('btn-cust-save');
      const customer = {
        code: document.getElementById('cust-code').value,
        name: document.getElementById('cust-name').value,
        zip: document.getElementById('cust-zip').value,
        address: document.getElementById('cust-address').value,
        tel: document.getElementById('cust-tel').value
      };
      if (!customer.name) return alert("得意先名を入力してください");
      btn.disabled = true;
      google.script.run.withSuccessHandler(res => {
        btn.disabled = false;
        if (res.success) { 
          closeCustomerForm(); 
          document.getElementById('cust-search').value = res.code;
          execCustomerSearch(res.code); 
        }
        else alert("エラー: " + res.message);
      }).saveCustomer(customer);
    }

    function deleteCustomerData(code) {
      if (!confirm(code + " を削除しますか？")) return;
      google.script.run.withSuccessHandler(res => { if (res.success) initCustomerPage(); }).deleteCustomer(code);
    }

    /* --- 商品マスター --- */
    function initProductPage() { 
      document.getElementById('product-list-body').innerHTML = '';
      document.getElementById('prod-count').innerText = "0";
      document.getElementById('prod-search').value = '';
    }
    
    function execProductSearch(forceQuery) {
      const query = forceQuery !== undefined ? forceQuery : document.getElementById('prod-search').value;
      google.script.run.withSuccessHandler(renderProductTable).searchProducts(query);
    }
    
    function renderProductTable(data) {
      const tbody = document.getElementById('product-list-body');
      tbody.innerHTML = '';
      data.forEach(row => {
        const cost = row[3] ? Number(row[3]) : 0; 
        const tr = document.createElement('tr');
        tr.innerHTML = `
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[0]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[1]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd; text-align:right;">${Number(row[2]).toLocaleString()} 円</td>
          <td style="padding:10px; border-bottom:1px solid #ddd; text-align:right;">${cost.toLocaleString()} 円</td>
          <td style="padding:10px; border-bottom:1px solid #ddd; text-align:center;">
            <button onclick="editProduct('${row[0]}','${row[1]}','${row[2]}','${cost}')" style="width:auto; padding:4px 8px; font-size:12px; background:#f39c12;">編集</button>
            <button onclick="deleteProductData('${row[0]}')" style="width:auto; padding:4px 8px; font-size:12px; background:#e74c3c;">削除</button>
          </td>`;
        tbody.appendChild(tr);
      });
      document.getElementById('prod-count').innerText = data.length;
    }

    function openProductForm() {
      document.getElementById('prod-form-title').innerText = "商品登録（新規）";
      document.getElementById('prod-code').value = "";
      document.getElementById('prod-name').value = "";
      document.getElementById('prod-price').value = "";
      document.getElementById('prod-cost').value = "";
      document.getElementById('product-modal').classList.remove('hidden');
    }

    function editProduct(code, name, price, cost) {
      document.getElementById('prod-form-title').innerText = "商品編集 (" + code + ")";
      document.getElementById('prod-code').value = code;
      document.getElementById('prod-name').value = name;
      document.getElementById('prod-price').value = price;
      document.getElementById('prod-cost').value = cost || 0;
      document.getElementById('product-modal').classList.remove('hidden');
    }

    function closeProductForm() { document.getElementById('product-modal').classList.add('hidden'); }

    function saveProductData() {
      const btn = document.getElementById('btn-prod-save');
      const product = {
        code: document.getElementById('prod-code').value,
        name: document.getElementById('prod-name').value,
        price: document.getElementById('prod-price').value,
        cost: document.getElementById('prod-cost').value
      };
      if (!product.name || !product.price) return alert("商品名と単価は必須です");
      btn.disabled = true;
      google.script.run.withSuccessHandler(res => {
        btn.disabled = false;
        if (res.success) { 
          closeProductForm(); 
          document.getElementById('prod-search').value = res.code;
          execProductSearch(res.code); 
        }
        else alert("エラー: " + res.message);
      }).saveProduct(product);
    }

    function deleteProductData(code) {
      if (!confirm(code + " を削除しますか？")) return;
      google.script.run.withSuccessHandler(res => { if (res.success) initProductPage(); }).deleteProduct(code);
    }

    /* --- 売上管理 --- */
    let cachedCustomers = [];
    let cachedProducts = [];

    function initSalesPage() {
      cachedCustomers = [];
      cachedProducts = [];
      document.getElementById('sales-list-body').innerHTML = '';
      document.getElementById('sales-count').innerText = "0";
      document.getElementById('sales-search').value = '';
      
      const container = document.getElementById('sales-items-container');
      if (container.children.length === 0) {
        for(let i=0; i<6; i++) {
          container.innerHTML += `
            <tr class="sale-row">
              <td>
                <div style="display:flex; gap:5px; margin-bottom:5px;">
                  <input type="text" class="si-prod-query" placeholder="検索語" style="flex:1;">
                  <button onclick="execSaleProdSearch(this)" style="width:auto; padding:5px;">検索</button>
                </div>
                <input type="text" class="si-prod" list="dl-products" onchange="onProdSelect(this)" placeholder="候補から選択">
              </td>
              <td style="vertical-align: bottom;"><input type="number" class="si-price" readonly style="background:#eee; text-align:right;"></td>
              <td style="vertical-align: bottom;"><input type="number" class="si-qty" oninput="calcSaleTotal()" placeholder="0" style="text-align:right;"></td>
              <td style="vertical-align: bottom;"><input type="text" class="si-sub" readonly style="background:#eee; text-align:right;" value="0"></td>
            </tr>`;
        }
      }
    }

    function execSalesSearch(forceQuery) {
      const query = forceQuery !== undefined ? forceQuery : document.getElementById('sales-search').value;
      google.script.run.withSuccessHandler(renderSalesTable).searchSales(query);
    }

    function renderSalesTable(data) {
      const tbody = document.getElementById('sales-list-body');
      tbody.innerHTML = '';
      data.forEach(row => {
        const tr = document.createElement('tr');
        tr.innerHTML = `
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[0]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[1]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd;">${row[3]}</td>
          <td style="padding:10px; border-bottom:1px solid #ddd; text-align:right;">${Number(row[4]).toLocaleString()} 円</td>
          <td style="padding:10px; border-bottom:1px solid #ddd; text-align:center;">
            <button onclick="editSale('${row[0]}')" style="width:auto; padding:4px 8px; font-size:12px; background:#f39c12;">編集</button>
            <button onclick="printSale('${row[0]}')" style="width:auto; padding:4px 8px; font-size:12px; background:#2ecc71;">印刷</button>
            <button onclick="deleteSaleData('${row[0]}')" style="width:auto; padding:4px 8px; font-size:12px; background:#e74c3c;">削除</button>
          </td>`;
        tbody.appendChild(tr);
      });
      document.getElementById('sales-count').innerText = data.length;
    }

    function openSalesForm() {
      document.getElementById('sales-form-title').innerText = "売上伝票登録（新規）";
      document.getElementById('sale-no').value = "";
      document.getElementById('sale-date').value = new Date().toISOString().split('T')[0];
      
      document.getElementById('sale-cust-query').value = "";
      document.getElementById('sale-cust').value = "";
      document.getElementById('dl-customers').innerHTML = "";
      document.getElementById('dl-products').innerHTML = "";
      document.getElementById('sale-memo').value = "";
      
      const rows = document.querySelectorAll('.sale-row');
      rows.forEach(r => {
        r.querySelector('.si-prod-query').value = "";
        r.querySelector('.si-prod').value = "";
        r.querySelector('.si-price').value = "";
        r.querySelector('.si-qty').value = "";
        r.querySelector('.si-sub').value = "0";
      });
      calcSaleTotal();
      document.getElementById('sales-modal').classList.remove('hidden');
    }

    function execSaleCustSearch() {
      const query = document.getElementById('sale-cust-query').value;
      google.script.run.withSuccessHandler(data => {
        const dlCust = document.getElementById('dl-customers');
        dlCust.innerHTML = '';
        data.forEach(c => {
          if(!cachedCustomers.find(x => x[0] === c[0])) cachedCustomers.push(c);
          const opt = document.createElement('option');
          opt.value = c[0] + " : " + c[1];
          dlCust.appendChild(opt);
        });
        document.getElementById('sale-cust').focus();
      }).searchCustomers(query);
    }

    function execSaleProdSearch(btn) {
      const row = btn.closest('tr');
      const query = row.querySelector('.si-prod-query').value;
      google.script.run.withSuccessHandler(data => {
        const dlProd = document.getElementById('dl-products');
        dlProd.innerHTML = '';
        data.forEach(p => {
          if(!cachedProducts.find(x => x[0] === p[0])) cachedProducts.push(p);
          const opt = document.createElement('option');
          opt.value = p[0] + " : " + p[1];
          dlProd.appendChild(opt);
        });
        row.querySelector('.si-prod').focus();
      }).searchProducts(query);
    }

    function onProdSelect(elem) {
      const row = elem.closest('tr');
      const val = elem.value.split(' : ')[0].trim();
      const priceElem = row.querySelector('.si-price');
      const match = cachedProducts.find(p => p[0] === val);
      
      if (match) { priceElem.value = match[2]; } 
      else { priceElem.value = ""; }
      calcSaleTotal();
    }

    function calcSaleTotal() {
      const rows = document.querySelectorAll('.sale-row');
      let total = 0;
      rows.forEach(r => {
        const price = Number(r.querySelector('.si-price').value) || 0;
        const qty = Number(r.querySelector('.si-qty').value) || 0;
        const sub = price * qty;
        r.querySelector('.si-sub').value = sub.toLocaleString();
        total += sub;
      });
      document.getElementById('sale-total-val').value = total;
      document.getElementById('sale-total-display').innerText = total.toLocaleString();
    }

    function closeSalesForm() { document.getElementById('sales-modal').classList.add('hidden'); }

    function saveSalesData() {
      const btn = document.getElementById('btn-sales-save');
      const custInput = document.getElementById('sale-cust').value;
      const custCode = custInput.split(' : ')[0].trim();
      
      let custName = "";
      const custMatch = cachedCustomers.find(c => c[0] === custCode);
      if (custMatch) { custName = custMatch[1]; } 
      else { custName = custInput; }

      const sale = {
        saleNo: document.getElementById('sale-no').value,
        date: document.getElementById('sale-date').value,
        custCode: custCode,
        custName: custName,
        totalAmount: document.getElementById('sale-total-val').value,
        memo: document.getElementById('sale-memo').value,
        items: []
      };

      if (!sale.date || !custCode) return alert("日付と得意先は必須です");

      const rows = document.querySelectorAll('.sale-row');
      rows.forEach(r => {
        const pInput = r.querySelector('.si-prod').value;
        const pCode = pInput.split(' : ')[0].trim();
        const pQty = r.querySelector('.si-qty').value;
        const pPrice = r.querySelector('.si-price').value;
        if (pCode && pQty) {
          sale.items.push({ prodCode: pCode, qty: pQty, price: pPrice });
        }
      });

      if (sale.items.length === 0) return alert("商品を1つ以上入力してください");

      btn.disabled = true;
      google.script.run.withSuccessHandler(res => {
        btn.disabled = false;
        if (res.success) { 
          closeSalesForm(); 
          document.getElementById('sales-search').value = res.saleNo;
          execSalesSearch(res.saleNo); 
        }
        else alert("エラー: " + res.message);
      }).saveSale(sale);
    }

    function editSale(saleNo) {
      google.script.run.withSuccessHandler(res => {
        if (!res.success) return alert(res.message);
        const row = res.saleRow;

        document.getElementById('sales-form-title').innerText = "売上伝票編集 (" + saleNo + ")";
        document.getElementById('sale-no').value = row[0];
        document.getElementById('sale-date').value = row[1];
        
        if(!cachedCustomers.find(c => c[0] === row[2])) {
          cachedCustomers.push([row[2], res.custName]);
        }
        document.getElementById('sale-cust-query').value = "";
        document.getElementById('sale-cust').value = row[2] ? (row[2] + " : " + res.custName) : row[3];
        document.getElementById('sale-memo').value = row[5];

        const trs = document.querySelectorAll('.sale-row');
        for (let i = 0; i < 6; i++) {
          const item = res.items[i];
          let pVal = item.pCode;
          if (item.pCode) {
            if(!cachedProducts.find(p => p[0] === item.pCode)) {
              cachedProducts.push([item.pCode, item.pName, item.pPrice]);
            }
            pVal = item.pCode + " : " + item.pName;
          }
          trs[i].querySelector('.si-prod-query').value = "";
          trs[i].querySelector('.si-prod').value = pVal;
          trs[i].querySelector('.si-price').value = item.pPrice;
          trs[i].querySelector('.si-qty').value = item.pQty;
        }
        calcSaleTotal();
        document.getElementById('sales-modal').classList.remove('hidden');
      }).getSaleDetail(saleNo);
    }

    function deleteSaleData(saleNo) {
      if (!confirm(saleNo + " を削除しますか？")) return;
      google.script.run.withSuccessHandler(res => { if (res.success) initSalesPage(); }).deleteSale(saleNo);
    }

    function printSale(saleNo) {
      const win = window.open('', '_blank');
      win.document.write('印刷データを読み込んでいます...');
      
      google.script.run.withSuccessHandler(res => {
        if (!res || !res.success || !res.sale) {
          win.close(); return alert("印刷データの取得に失敗しました。");
        }

        const comp = res.company;
        const sale = res.sale;
        const prods = res.products;

        let html = `<!DOCTYPE html><html><head><title>売上伝票_${sale[0]}</title><style>
          body { font-family: "Noto Sans JP", sans-serif; padding: 40px; color: #333; box-sizing: border-box; }
          .header { display: flex; justify-content: space-between; margin-bottom: 30px; }
          .title { text-align: center; font-size: 24px; letter-spacing: 5px; margin-bottom: 40px; border-bottom: 2px solid #333; padding-bottom: 10px; }
          table { width: 100%; border-collapse: collapse; margin-top: 20px; }
          th, td { border: 1px solid #000; padding: 10px; font-size: 14px; }
          th { background-color: #f2f2f2; }
          .text-left { text-align: left; }
          .text-right { text-align: right; }
          .text-center { text-align: center; }
          .company-info { font-size: 13px; line-height: 1.6; }
        </style></head><body>`;
        
        html += `<div class="title">売上伝票</div><div class="header">`;
        html += `<div><h2 style="margin:0 0 10px 0; border-bottom:1px solid #333; padding-bottom:5px; display:inline-block; min-width:250px;">${sale[3]} 御中</h2><br>伝票番号: ${sale[0]}<br>発行日: ${sale[1]}</div>`;
        html += `<div class="company-info"><strong style="font-size:16px;">${comp[0] || '自社名未設定'}</strong><br>〒${comp[1] || '---'}<br>${comp[2] || '住所未設定'}<br>TEL: ${comp[3] || '---'}<br>FAX: ${comp[4] || '---'}</div></div>`;
        
        html += `<table><tr><th style="width:15%;">商品コード</th><th style="width:40%;">商品名</th><th style="width:15%;">単価</th><th style="width:10%;">数量</th><th style="width:20%;">金額</th></tr>`;
        
        for (let i = 0; i < 6; i++) {
          const offset = 6 + (i * 3);
          const pCode = sale[offset];
          const pQty = sale[offset + 1];
          const pPrice = sale[offset + 2];
          
          if (pCode && pQty) {
            let pName = "不明な商品";
            const pMatch = prods.find(p => p[0] === pCode);
            if (pMatch) pName = pMatch[1];
            const rowTotal = Number(pQty) * Number(pPrice);
            html += `<tr><td class="text-center">${pCode}</td><td class="text-left">${pName}</td><td class="text-right">${Number(pPrice).toLocaleString()}</td><td class="text-center">${pQty}</td><td class="text-right">${rowTotal.toLocaleString()}</td></tr>`;
          }
        }
        
        html += `<tr><th colspan="4" class="text-right">合計金額</th><th class="text-right" style="font-size:16px;">￥${Number(sale[4]).toLocaleString()}</th></tr></table>`;
        html += `<div style="margin-top:30px; font-size:14px;">備考: ${sale[5] || ''}</div>`;
        
        const sEnd = '<' + '/script>';
        html += `<script>window.onload=function(){window.print();};window.onafterprint=function(){window.close();};${sEnd}</body></html>`;
        
        win.document.open(); win.document.write(html); win.document.close();
      }).getPrintData(saleNo);
    }

    // 請求管理・分析機能については元のまま維持（省略）
    function generateInvoices(btn) {
      const monthInput = document.getElementById('invoice-month').value;
      if (!monthInput) { alert("請求月を選択してください。"); return; }
      const originalText = btn.innerText; btn.innerText = "データ集計中..."; btn.disabled = true;

      google.script.run
        .withSuccessHandler(res => {
          btn.innerText = originalText; btn.disabled = false;
          if (!res.success) return alert("エラー: " + res.message);
          setTimeout(() => { printWithTemplate(res.templateHtml, res.invoices, monthInput, res.company); }, 100);
        }).withFailureHandler(err => {
          btn.innerText = originalText; btn.disabled = false; alert("通信エラー: " + err.message);
        }).getInvoiceBulkDataWithTemplate(monthInput);
    }

    function printWithTemplate(templateHtml, invoices, monthStr, company) {
      const parts = monthStr.split('-');
      let year = parseInt(parts[0], 10);
      let month = parseInt(parts[1], 10) + 1;
      if (month > 12) { month = 1; year++; }
      const dueDateStr = year + "年" + month + "月20日";
      const targetMonthStr = parts[0] + "年" + parseInt(parts[1], 10) + "月分";

      const win = window.open('', '_blank');
      let finalHtml = `<!DOCTYPE html><html><head><style>
        body { font-family: "Noto Sans JP", sans-serif; margin: 0; padding: 0; color: #333; box-sizing: border-box; }
        .page { width: 210mm; height: 296mm; padding: 10mm; position: relative; page-break-after: always; }
        .page:last-child { page-break-after: auto; }
        .page-number { position: absolute; top: 10mm; right: 10mm; font-size: 12px; }
        .title { text-align: center; font-size: 26px; border-bottom: 2px solid #000; margin-bottom: 20px; padding-bottom: 5px; }
        .total-box { font-size: 20px; border-bottom: 3px solid #000; display: inline-block; padding: 5px 20px 0 0; margin-top: 10px; font-weight: bold; }
        .item-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
        .item-table th, .item-table td { border: 1px solid #000; padding: 6px; height: 32px; font-size: 13px; word-wrap: break-word; }
        .item-table th { background: #f2f2f2; text-align: center; }
      </style></head><body>`;

      invoices.forEach(inv => {
        const linesPerPage = 15;
        const totalPages = Math.ceil(inv.items.length / linesPerPage) || 1;
        for (let p = 0; p < totalPages; p++) {
          let pageContent = templateHtml;
          if (p === 0) {
            pageContent = pageContent.split('{{custZip}}').join(inv.custZip || '---');
            pageContent = pageContent.split('{{custAddr}}').join(inv.custAddr || '---');
            pageContent = pageContent.split('{{custTel}}').join(inv.custTel || '---');
            pageContent = pageContent.split('{{totalAmount}}').join('￥' + inv.totalAmount.toLocaleString());
            pageContent = pageContent.split('{{dueDate}}').join(dueDateStr);
            pageContent = pageContent.split('{{targetMonth}}').join(targetMonthStr);
          } else {
            pageContent = pageContent.split('{{custZip}}').join('');
            pageContent = pageContent.split('{{custAddr}}').join('');
            pageContent = pageContent.split('{{custTel}}').join('');
            pageContent = pageContent.split('{{totalAmount}}').join('');
            pageContent = pageContent.split('{{dueDate}}').join('');
            pageContent = pageContent.split('{{targetMonth}}').join('');
          }
          pageContent = pageContent.split('{{custName}}').join(inv.custName + (p > 0 ? " (続き)" : ""));
          pageContent = pageContent.split('{{pageNo}}').join((p + 1) + " / " + totalPages);
          pageContent = pageContent.split('{{compName}}').join(company[0] || '');
          pageContent = pageContent.split('{{compZip}}').join(company[1] || '');
          pageContent = pageContent.split('{{compAddr}}').join(company[2] || '');
          pageContent = pageContent.split('{{compTel}}').join(company[3] || '');
          pageContent = pageContent.split('{{compFax}}').join(company[4] || '');

          const startIdx = p * linesPerPage;
          for (let i = 0; i < linesPerPage; i++) {
            const item = inv.items[startIdx + i];
            pageContent = pageContent.replace('{{date}}', item ? item.date : "");
            pageContent = pageContent.replace('{{saleNo}}', item ? item.saleNo : "");
            pageContent = pageContent.replace('{{pName}}', item ? item.pName : "");
            pageContent = pageContent.replace('{{qty}}', item ? item.qty : "");
            pageContent = pageContent.replace('{{price}}', item ? item.price.toLocaleString() : "");
            pageContent = pageContent.replace('{{subTotal}}', item ? item.subTotal.toLocaleString() : "");
          }
          finalHtml += `<div class="page">${pageContent}</div>`;
        }
      });
      finalHtml += `</body></html>`;
      win.document.write(finalHtml); win.document.close();
      win.onload = function() { win.print(); };
    }

    let chartInstance = null;
    let currentAggData = null;

    function initAnalysisPage() {
      const now = new Date();
      const yyyy = now.getFullYear();
      document.getElementById('agg-start').value = yyyy + "-01";
      document.getElementById('agg-end').value = yyyy + "-12";
      execAnalysis();
    }

    function execAnalysis() {
      const start = document.getElementById('agg-start').value;
      const end = document.getElementById('agg-end').value;

      document.getElementById('dash-total-sales').innerText = "計算中...";
      document.getElementById('dash-total-profit').innerText = "計算中...";
      
      google.script.run.withSuccessHandler(res => {
        if (!res.success) {
          alert("分析データの取得に失敗しました: " + res.message);
          return;
        }

        const totalSales = res.summary.sales;
        const totalProfit = res.summary.profit;
        const margin = totalSales > 0 ? ((totalProfit / totalSales) * 100).toFixed(1) : 0;

        document.getElementById('dash-total-sales').innerText = totalSales.toLocaleString() + " 円";
        document.getElementById('dash-total-profit').innerText = totalProfit.toLocaleString() + " 円";
        document.getElementById('dash-profit-margin').innerText = margin + " %";

        const ctx = document.getElementById('analysisChart').getContext('2d');
        if (chartInstance) { chartInstance.destroy(); }

        chartInstance = new Chart(ctx, {
          type: 'bar',
          data: {
            labels: res.chart.labels,
            datasets: [
              { label: '売上金額 (円)', data: res.chart.sales, backgroundColor: 'rgba(52, 152, 219, 0.7)', borderColor: 'rgba(41, 128, 185, 1)', borderWidth: 1 },
              { label: '粗利益 (円)', data: res.chart.profit, type: 'line', fill: false, borderColor: 'rgba(46, 204, 113, 1)', tension: 0.1, borderWidth: 2 }
            ]
          },
          options: { responsive: true, scales: { y: { beginAtZero: true } }, plugins: { title: { display: true, text: '月別 売上・利益推移' } } }
        });

        currentAggData = res.tables;
        renderAnalysisTables();

      }).getDashboardData(start, end);
    }

    function renderAnalysisTables() {
      if (!currentAggData) return;

      let h1 = '<table class="table table-striped table-bordered"><thead><tr><th style="width:25%">得意先コード</th><th>得意先名</th><th class="text-end" style="width:25%">売上金額</th></tr></thead><tbody>';
      currentAggData.custTotal.forEach(r => h1 += `<tr><td class="text-center">${r.code}</td><td>${r.name}</td><td class="text-end">${r.total.toLocaleString()} 円</td></tr>`);
      h1 += '</tbody></table>';
      document.getElementById('container-custTotal').innerHTML = h1;

      let h2 = '<table class="table table-striped table-bordered"><thead><tr><th style="width:25%">商品コード</th><th>商品名</th><th class="text-end" style="width:25%">売上金額</th></tr></thead><tbody>';
      currentAggData.prodTotal.forEach(r => h2 += `<tr><td class="text-center">${r.code}</td><td>${r.name}</td><td class="text-end">${r.total.toLocaleString()} 円</td></tr>`);
      h2 += '</tbody></table>';
      document.getElementById('container-prodTotal').innerHTML = h2;

      let h3 = '<table class="table table-bordered"><thead><tr><th style="width:15%" class="text-center">階層</th><th>コード : 名称</th><th class="text-end" style="width:25%">売上金額</th></tr></thead><tbody>';
      currentAggData.custProd.forEach(m => {
        h3 += `<tr class="table-primary"><td class="text-center">大分類</td><td>${m.code} : ${m.name}</td><td class="text-end">${m.total.toLocaleString()} 円</td></tr>`;
        m.items.forEach(c => {
          h3 += `<tr><td class="text-center" style="color:#666; font-size:12px;">┗ 小分類</td><td style="padding-left:30px">${c.code} : ${c.name}</td><td class="text-end">${c.total.toLocaleString()} 円</td></tr>`;
        });
      });
      h3 += '</tbody></table>';
      document.getElementById('container-custProd').innerHTML = h3;

      let h4 = '<table class="table table-bordered"><thead><tr><th style="width:15%" class="text-center">階層</th><th>コード : 名称</th><th class="text-end" style="width:25%">売上金額</th></tr></thead><tbody>';
      currentAggData.prodCust.forEach(m => {
        h4 += `<tr class="table-primary"><td class="text-center">大分類</td><td>${m.code} : ${m.name}</td><td class="text-end">${m.total.toLocaleString()} 円</td></tr>`;
        m.items.forEach(c => {
          h4 += `<tr><td class="text-center" style="color:#666; font-size:12px;">┗ 小分類</td><td style="padding-left:30px">${c.code} : ${c.name}</td><td class="text-end">${c.total.toLocaleString()} 円</td></tr>`;
        });
      });
      h4 += '</tbody></table>';
      document.getElementById('container-prodCust').innerHTML = h4;
    }

    function printAggTable(type) {
      if (!currentAggData) return alert("データがありません");

      const start = document.getElementById('agg-start').value || "指定なし";
      const end = document.getElementById('agg-end').value || "指定なし";
      const periodStr = `${start} 〜 ${end}`;

      let lines = [];
      let title = "";
      let isNested = false;

      if (type === 'custTotal') {
        title = "得意先別集計表";
        currentAggData.custTotal.forEach(d => lines.push({ col1: d.code, col2: d.name, amount: d.total }));
      } else if (type === 'prodTotal') {
        title = "商品別集計表";
        currentAggData.prodTotal.forEach(d => lines.push({ col1: d.code, col2: d.name, amount: d.total }));
      } else if (type === 'custProd') {
        title = "【大分類:得意先 / 小分類:商品】集計表";
        isNested = true;
        currentAggData.custProd.forEach(major => {
          lines.push({ isHeader: true, text: `${major.code} : ${major.name}`, amount: major.total });
          major.items.forEach(minor => lines.push({ isHeader: false, text: `${minor.code} : ${minor.name}`, amount: minor.total }));
        });
      } else if (type === 'prodCust') {
        title = "【大分類:商品 / 小分類:得意先】集計表";
        isNested = true;
        currentAggData.prodCust.forEach(major => {
          lines.push({ isHeader: true, text: `${major.code} : ${major.name}`, amount: major.total });
          major.items.forEach(minor => lines.push({ isHeader: false, text: `${minor.code} : ${minor.name}`, amount: minor.total }));
        });
      }

      if (lines.length === 0) return alert("印刷するデータがありません。");

      const rowsPerPage = 20; 
      const totalPages = Math.ceil(lines.length / rowsPerPage);
      const win = window.open('', '_blank');

      let html = `<!DOCTYPE html><html><head><title>${title}</title><style>
        * { box-sizing: border-box; }
        body { font-family: "Noto Sans JP", sans-serif; margin: 0; padding: 0; color: #333; }
        .page { width: 210mm; padding: 15mm; margin: 0 auto; }
        .title { text-align: center; font-size: 24px; margin-bottom: 10px; border-bottom: 2px solid #333; padding-bottom: 5px; }
        .period { text-align: right; font-size: 14px; margin-bottom: 15px; }
        .table { width: 100%; border-collapse: collapse; }
        .table th, .table td { border: 1px solid #333; padding: 10px; font-size: 14px; }
        .table th { background-color: #f2f2f2; text-align: center; }
        .bg-primary-subtle { background-color: #e6f0ff; font-weight: bold; }
        .text-end { text-align: right; }
        .text-center { text-align: center; }
      </style></head><body>`;

      for (let p = 0; p < totalPages; p++) {
        let pb = (p < totalPages - 1) ? "page-break-after: always;" : "";
        html += `<div class="page" style="${pb}">`;
        html += `<div class="title">${title}</div>`;
        html += `<div class="period">集計期間: ${periodStr}    (${p+1}/${totalPages}ページ)</div>`;
        html += `<table class="table">`;

        if (!isNested) {
          html += `<thead><tr><th style="width:25%">コード</th><th style="width:50%">名称</th><th style="width:25%">売上金額</th></tr></thead><tbody>`;
          const chunk = lines.slice(p * rowsPerPage, (p + 1) * rowsPerPage);
          chunk.forEach(r => {
            html += `<tr><td class="text-center">${r.col1}</td><td>${r.col2}</td><td class="text-end">${r.amount.toLocaleString()} 円</td></tr>`;
          });
        } else {
          html += `<thead><tr><th style="width:20%">階層</th><th style="width:55%">コード : 名称</th><th style="width:25%">売上金額</th></tr></thead><tbody>`;
          const chunk = lines.slice(p * rowsPerPage, (p + 1) * rowsPerPage);
          chunk.forEach(r => {
            if (r.isHeader) {
              html += `<tr class="bg-primary-subtle"><td class="text-center">大分類</td><td>${r.text}</td><td class="text-end">${r.amount.toLocaleString()} 円</td></tr>`;
            } else {
              html += `<tr><td class="text-center" style="font-size:12px; color:#555;">┗ 小分類</td><td style="padding-left:25px">${r.text}</td><td class="text-end">${r.amount.toLocaleString()} 円</td></tr>`;
            }
          });
        }
        html += `</tbody></table></div>`;
      }

      const sEnd = '<' + '/script>';
      html += `<script>
        window.onload = function() { window.print(); };
        window.onafterprint = function() { window.close(); };
      ${sEnd}</body></html>`;

      win.document.open();
      win.document.write(html);
      win.document.close();
    }
  </script>
</body>
</html>
```

### 2. Code.gs

```javascript
/**
 * =========================================
 * 1. 基本設定
 * =========================================
 */
const DB_FILE_NAME = "販売管理データベース"; // 連携するスプレッドシート名
const AUTH_CODE_EXPIRE_MIN = 5; // 2段階認証コードの有効期限（分）

/**
 * =========================================
 * 2. Webアプリ起動処理
 * =========================================
 */
function doGet() {
  return HtmlService.createTemplateFromFile('index')
    .evaluate()
    .setTitle('販売管理システム')
    .addMetaTag('viewport', 'width=device-width, initial-scale=1')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

/**
 * =========================================
 * 3. データベース（スプレッドシート）取得処理
 * =========================================
 */
function getDbWithLock() {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000); // 競合を防ぐため最大30秒間待機
    const files = DriveApp.getFilesByName(DB_FILE_NAME);
    if (files.hasNext()) {
      return SpreadsheetApp.open(files.next());
    }
    throw new Error(`Googleドライブ内に「${DB_FILE_NAME}」が見つかりません。`);
  } catch (e) {
    throw new Error("現在システムが混み合っています。時間を置いてやり直してください。");
  }
}

/**
 * =========================================
 * 4. 認証処理
 * =========================================
 */
function authenticateStep1(userId, password) {
  const lock = LockService.getScriptLock();
  try {
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName('Users');
    if (!sheet) return { success: false, message: "Usersシートが存在しません" };
    
    const data = sheet.getDataRange().getValues();
    for (let i = 1; i < data.length; i++) {
      if (data[i][0].toString() === userId) {
        if (data[i][5] === "LOCKED") {
          return { success: false, message: "アカウントがロックされています。管理者に連絡してください。" };
        }

        if (data[i][1].toString() === password) {
          sheet.getRange(i + 1, 5).setValue(0);
          const code = Math.floor(100000 + Math.random() * 900000).toString();
          const props = PropertiesService.getScriptProperties();
          props.setProperty("2FA_" + userId, JSON.stringify({
            code: code,
            expiry: new Date().getTime() + (AUTH_CODE_EXPIRE_MIN * 60000)
          }));
          const email = data[i][3];
          MailApp.sendEmail({
            to: email,
            subject: "【販売管理システム】認証コードのご案内",
            body: `認証コードは [ ${code} ] です。\n${AUTH_CODE_EXPIRE_MIN}分以内に入力してください。`
          });
          return { success: true, needs2FA: true, userId: userId };
          
        } else {
          let failCount = Number(data[i][4] || 0) + 1;
          sheet.getRange(i + 1, 5).setValue(failCount);
          if (failCount >= 3) {
            sheet.getRange(i + 1, 6).setValue("LOCKED");
            return { success: false, message: "3回失敗したためアカウントをロックしました。" };
          }
          return { success: false, message: `パスワードが違います（あと${3 - failCount}回でロック）` };
        }
      }
    }
    return { success: false, message: "ユーザーIDが見つかりません。" };
  } catch (e) {
    return { success: false, message: "エラー: " + e.message };
  } finally {
    lock.releaseLock();
  }
}

function verify2FACode(userId, inputCode) {
  const props = PropertiesService.getScriptProperties();
  const storedData = props.getProperty("2FA_" + userId);
  if (!storedData) return { success: false, message: "セッションが切れました。最初からやり直してください。" };
  
  const auth = JSON.parse(storedData);
  const now = new Date().getTime();
  if (now > auth.expiry) return { success: false, message: "認証コードの有効期限が切れています。" };
  if (auth.code === inputCode) {
    props.deleteProperty("2FA_" + userId);
    const lock = LockService.getScriptLock();
    try {
      const ss = getDbWithLock();
      const rows = ss.getSheetByName('Users').getDataRange().getValues();
      const userRow = rows.find(r => r[0].toString() === userId);
      return { success: true, userName: userRow[2] };
    } finally {
      lock.releaseLock();
    }
  } else {
    return { success: false, message: "認証コードが正しくありません。" };
  }
}

/**
 * =========================================
 * 5. 汎用データ取得
 * =========================================
 */
function getSheetData(sheetName) {
  const lock = LockService.getScriptLock();
  try {
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName(sheetName);
    if (!sheet) return [];
    return sheet.getDataRange().getValues();
  } catch (e) {
    return [];
  } finally {
    lock.releaseLock();
  }
}

/**
 * =========================================
 * 6. 得意先マスター管理
 * =========================================
 */
function getCustomers() {
  const data = getSheetData('Customers');
  if (data.length === 0) return [];
  return data.slice(1);
}

// 追加: 検索用関数
function searchCustomers(query) {
  const data = getCustomers();
  if (!query) return data; 
  const q = query.toLowerCase();
  return data.filter(row => row.join(' ').toLowerCase().includes(q));
}

function saveCustomer(customer) {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000);
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName('Customers');
    const data = sheet.getDataRange().getValues();
    let targetRow = -1;

    if (!customer.code) {
      let maxNum = 0;
      for (let i = 1; i < data.length; i++) {
        const codeNum = parseInt(data[i][0].toString().replace('C', ''), 10);
        if (codeNum > maxNum) maxNum = codeNum;
      }
      customer.code = "C" + ("000" + (maxNum + 1)).slice(-3);
      targetRow = sheet.getLastRow() + 1;
    } else {
      for (let i = 1; i < data.length; i++) {
        if (data[i][0] === customer.code) {
          targetRow = i + 1;
          break;
        }
      }
    }

    if (targetRow > 0) {
      sheet.getRange(targetRow, 1, 1, 5).setValues([[customer.code, customer.name, customer.zip, customer.address, customer.tel]]);
      return { success: true, code: customer.code };
    }
    return { success: false, message: "対象データが見つかりません" };
  } catch (e) {
    return { success: false, message: e.toString() };
  } finally {
    lock.releaseLock();
  }
}

function deleteCustomer(code) {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000);
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName('Customers');
    const data = sheet.getDataRange().getValues();
    for (let i = 1; i < data.length; i++) {
      if (data[i][0] === code) {
        sheet.deleteRow(i + 1);
        return { success: true };
      }
    }
    return { success: false };
  } finally {
    lock.releaseLock();
  }
}

/**
 * =========================================
 * 7. 商品マスター管理
 * =========================================
 */
function getProducts() {
  const data = getSheetData('Products');
  if (data.length === 0) return [];
  return data.slice(1);
}

// 追加: 検索用関数
function searchProducts(query) {
  const data = getProducts();
  if (!query) return data; 
  const q = query.toLowerCase();
  return data.filter(row => row.join(' ').toLowerCase().includes(q));
}

function saveProduct(product) {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000);
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName('Products');
    const data = sheet.getDataRange().getDisplayValues();
    let targetRow = -1;
    
    if (!product.code) {
      let maxNum = 0;
      for (let i = 1; i < data.length; i++) {
        const codeNum = parseInt(data[i][0].toString().replace('P', ''), 10);
        if (!isNaN(codeNum) && codeNum > maxNum) maxNum = codeNum;
      }
      product.code = "P" + ("000" + (maxNum + 1)).slice(-3);
      targetRow = sheet.getLastRow() + 1;
    } else {
      for (let i = 1; i < data.length; i++) {
        if (data[i][0] === product.code) {
          targetRow = i + 1;
          break;
        }
      }
    }

    if (targetRow > 0) {
      sheet.getRange(targetRow, 1, 1, 4).setValues([[product.code, product.name, product.price, product.cost]]);
      return { success: true, code: product.code };
    }
    return { success: false, message: "対象データが見つかりません" };
  } catch (e) {
    return { success: false, message: e.toString() };
  } finally {
    lock.releaseLock();
  }
}

function deleteProduct(code) {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000);
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName('Products');
    const data = sheet.getDataRange().getValues();
    for (let i = 1; i < data.length; i++) {
      if (data[i][0] === code) {
        sheet.deleteRow(i + 1);
        return { success: true };
      }
    }
    return { success: false };
  } finally {
    lock.releaseLock();
  }
}

/**
 * =========================================
 * 8. 権限付与用ダミー関数（初回のみエディタから実行）
 * =========================================
 */
function askPermission() {
  DriveApp.getFilesByName('test');
  SpreadsheetApp.getActive();
  MailApp.sendEmail(Session.getActiveUser().getEmail(), '権限テスト', 'これはテストです');
  console.log("全ての権限が承認されています！");
}

/**
 * =========================================
 * 9. 売上管理機能・印刷データ取得
 * =========================================
 */
function getSales() {
  const lock = LockService.getScriptLock();
  try {
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName('Sales');
    if (!sheet) return [];
    const data = sheet.getDataRange().getDisplayValues();
    if (data.length === 0) return [];
    return data.slice(1);
  } catch (e) {
    return [];
  } finally {
    lock.releaseLock();
  }
}

// 追加: 売上の検索用関数
function searchSales(query) {
  const data = getSales();
  if (!query) return data; 
  const q = query.toLowerCase();
  return data.filter(row => row.join(' ').toLowerCase().includes(q));
}

// 追加: 伝票編集用の詳細データ取得
function getSaleDetail(saleNo) {
  const lock = LockService.getScriptLock();
  try {
    const ss = getDbWithLock();
    const salesSheet = ss.getSheetByName('Sales');
    const salesData = salesSheet.getDataRange().getDisplayValues();
    let saleRow = null;
    for (let i = 1; i < salesData.length; i++) {
      if (salesData[i][0] === saleNo) {
        saleRow = salesData[i];
        break;
      }
    }
    if (!saleRow) return { success: false, message: "伝票が見つかりません" };

    const custSheet = ss.getSheetByName('Customers');
    const custData = custSheet.getDataRange().getDisplayValues();
    let custName = saleRow[3];
    for (let i=1; i<custData.length; i++){
       if(custData[i][0] === saleRow[2]) { custName = custData[i][1]; break; }
    }

    const prodSheet = ss.getSheetByName('Products');
    const prodData = prodSheet.getDataRange().getDisplayValues();
    const items = [];
    for (let i = 0; i < 6; i++) {
      const offset = 6 + (i * 3);
      const pCode = saleRow[offset];
      const pQty = saleRow[offset + 1];
      const pPrice = saleRow[offset + 2];
      let pName = "";
      if (pCode) {
         for(let j=1; j<prodData.length; j++){
            if(prodData[j][0] === pCode) { pName = prodData[j][1]; break; }
         }
      }
      items.push({ pCode, pName, pQty, pPrice });
    }

    return { success: true, saleRow, custName, items };
  } catch(e) {
    return { success: false, message: e.toString() };
  } finally {
    lock.releaseLock();
  }
}

function saveSale(sale) {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000);
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName('Sales');
    const data = sheet.getDataRange().getDisplayValues();
    let targetRow = -1;
    
    if (!sale.saleNo) {
      let maxNum = 0;
      for (let i = 1; i < data.length; i++) {
        const num = parseInt(data[i][0].split('S').join(''), 10);
        if (!isNaN(num) && num > maxNum) maxNum = num;
      }
      sale.saleNo = "S" + ("0000" + (maxNum + 1)).slice(-4);
      targetRow = sheet.getLastRow() + 1;
    } else {
      for (let i = 1; i < data.length; i++) {
        if (data[i][0] === sale.saleNo) {
          targetRow = i + 1;
          break;
        }
      }
    }

    if (targetRow > 0) {
      let rowData = [
        sale.saleNo, sale.date, sale.custCode, sale.custName, sale.totalAmount, sale.memo
      ];
      for (let i = 0; i < 6; i++) {
        if (sale.items && sale.items[i]) {
          rowData.push(sale.items[i].prodCode, sale.items[i].qty, sale.items[i].price);
        } else {
          rowData.push("", "", "");
        }
      }
      sheet.getRange(targetRow, 1, 1, rowData.length).setValues([rowData]);
      return { success: true, saleNo: sale.saleNo };
    }
    return { success: false, message: "対象データが見つかりません" };
  } catch (e) {
    return { success: false, message: e.toString() };
  } finally {
    lock.releaseLock();
  }
}

function deleteSale(saleNo) {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000);
    const ss = getDbWithLock();
    const sheet = ss.getSheetByName('Sales');
    const data = sheet.getDataRange().getDisplayValues();
    for (let i = 1; i < data.length; i++) {
      if (data[i][0] === saleNo) {
        sheet.deleteRow(i + 1);
        return { success: true };
      }
    }
    return { success: false };
  } finally {
    lock.releaseLock();
  }
}

function getPrintData(saleNo) {
  const lock = LockService.getScriptLock();
  try {
    const ss = getDbWithLock();
    const compSheet = ss.getSheetByName('Company');
    const company = compSheet ? (compSheet.getDataRange().getDisplayValues()[1] || []) : [];
    
    const salesSheet = ss.getSheetByName('Sales');
    const salesData = salesSheet ? salesSheet.getDataRange().getDisplayValues() : [];
    let saleRow = null;
    for (let i = 1; i < salesData.length; i++) {
      if (salesData[i][0] === saleNo) {
        saleRow = salesData[i];
        break;
      }
    }
    
    const prodSheet = ss.getSheetByName('Products');
    const products = prodSheet ? prodSheet.getDataRange().getDisplayValues().slice(1) : [];

    return { success: true, company: company, sale: saleRow, products: products };
  } catch (e) {
    return { success: false };
  } finally {
    lock.releaseLock();
  }
}

/**
 * =========================================
 * 10. 請求管理機能（一括データ集計）
 * =========================================
 */
function getInvoiceBulkData(monthStr) {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000);
    const ss = getDbWithLock();
    
    const compSheet = ss.getSheetByName('Company');
    const company = compSheet ? (compSheet.getDataRange().getDisplayValues()[1] || []) : [];

    const custSheet = ss.getSheetByName('Customers');
    const custData = custSheet ? custSheet.getDataRange().getDisplayValues().slice(1) : [];
    
    const prodSheet = ss.getSheetByName('Products');
    const prodData = prodSheet ? prodSheet.getDataRange().getDisplayValues().slice(1) : [];

    const salesSheet = ss.getSheetByName('Sales');
    const salesData = salesSheet ? salesSheet.getDataRange().getDisplayValues().slice(1) : [];

    const targetPrefix1 = monthStr;
    const targetPrefix2 = monthStr.split('-').join('/');

    const monthlySales = salesData.filter(row => {
       const dateStr = row[1] || "";
       return dateStr.indexOf(targetPrefix1) === 0 || dateStr.indexOf(targetPrefix2) === 0;
    });
    
    if (monthlySales.length === 0) {
       return { success: false, message: "指定された月の売上データがありません。" };
    }

    const invoiceMap = {};
    monthlySales.forEach(sale => {
       const saleNo = sale[0];
       const date = sale[1];
       const custCode = sale[2];

       if (!invoiceMap[custCode]) {
         const cMatch = custData.find(c => c[0] === custCode);
         invoiceMap[custCode] = {
           custCode: custCode,
           custName: cMatch ? cMatch[1] : sale[3],
           custZip: cMatch ? cMatch[2] : "",
           custAddr: cMatch ? cMatch[3] : "",
           custTel: cMatch ? cMatch[4] : "",
           totalAmount: 0,
           items: []
         };
       }

       for (let i = 0; i < 6; i++) {
         const offset = 6 + (i * 3);
         const pCode = sale[offset];
         const pQty = Number(sale[offset + 1]);
         const pPrice = Number(sale[offset + 2]);

         if (pCode && pQty > 0) {
           const pMatch = prodData.find(p => p[0] === pCode);
           const pName = pMatch ? pMatch[1] : "不明な商品";
           const subTotal = pQty * pPrice;
           
           invoiceMap[custCode].totalAmount += subTotal;
           invoiceMap[custCode].items.push({
             date: date,
             saleNo: saleNo,
             pCode: pCode,
             pName: pName,
             qty: pQty,
             price: pPrice,
             subTotal: subTotal
           });
         }
       }
    });
    
    const results = [];
    for (let code in invoiceMap) {
       const inv = invoiceMap[code];
       inv.items.sort((a, b) => {
         if (a.date < b.date) return -1;
         if (a.date > b.date) return 1;
         return 0;
       });
       results.push(inv);
    }

    return {
      success: true,
      company: company,
      invoices: results
    };
  } catch (e) {
    return { success: false, message: e.toString() };
  } finally {
    lock.releaseLock();
  }
}

function getTemplateHtmlFromFile() {
  return HtmlService.createHtmlOutputFromFile('請求書').getContent();
}

function getInvoiceBulkDataWithTemplate(monthStr) {
  const data = getInvoiceBulkData(monthStr); 
  if (data.success) {
    data.templateHtml = getTemplateHtmlFromFile();
  }
  return data;
}

/**
 * =========================================
 * 11. 販売分析機能・集計データ取得機能
 * =========================================
 */
function getDashboardData(startMonth, endMonth) {
  const lock = LockService.getScriptLock();
  try {
    lock.waitLock(30000);
    const ss = getDbWithLock();

    const custSheet = ss.getSheetByName('Customers');
    const custData = custSheet ? custSheet.getDataRange().getDisplayValues().slice(1) : [];
    
    const prodSheet = ss.getSheetByName('Products');
    const prodData = prodSheet ? prodSheet.getDataRange().getDisplayValues().slice(1) : [];
    const costMap = {};
    prodData.forEach(p => { 
      costMap[p[0]] = Number(p[3]) || 0; 
    });

    const salesSheet = ss.getSheetByName('Sales');
    const salesData = salesSheet ? salesSheet.getDataRange().getDisplayValues().slice(1) : [];

    let totalSales = 0;
    let totalProfit = 0;
    const monthlyData = {};

    const custMap = {};
    const prodMap = {};
    const custProdMap = {}; 
    const prodCustMap = {}; 

    const startStr = startMonth || "";
    const endStr = endMonth || "";

    salesData.forEach(sale => {
      const dateStr = sale[1] || "";
      if (!dateStr) return;
      
      const month = dateStr.substring(0, 7).split('/').join('-');
      if (startStr && month < startStr) return;
      if (endStr && month > endStr) return;

      if (!monthlyData[month]) monthlyData[month] = { sales: 0, profit: 0 };

      let saleTotal = 0;
      let saleCost = 0;
      const custCode = sale[2];

      for (let i = 0; i < 6; i++) {
        const offset = 6 + (i * 3);
        const pCode = sale[offset];
        const pQty = Number(sale[offset + 1]) || 0;
        const pPrice = Number(sale[offset + 2]) || 0;

        if (pCode && pQty > 0) {
          const subSales = pQty * pPrice;
          const unitCost = costMap[pCode] || 0;
          const subCost = pQty * unitCost;

          saleTotal += subSales;
          saleCost += subCost;

          if (!custMap[custCode]) custMap[custCode] = 0;
          custMap[custCode] += subSales;

          if (!prodMap[pCode]) prodMap[pCode] = 0;
          prodMap[pCode] += subSales;

          if (!custProdMap[custCode]) custProdMap[custCode] = { total: 0, items: {} };
          custProdMap[custCode].total += subSales;
          if (!custProdMap[custCode].items[pCode]) custProdMap[custCode].items[pCode] = 0;
          custProdMap[custCode].items[pCode] += subSales;

          if (!prodCustMap[pCode]) prodCustMap[pCode] = { total: 0, items: {} };
          prodCustMap[pCode].total += subSales;
          if (!prodCustMap[pCode].items[custCode]) prodCustMap[pCode].items[custCode] = 0;
          prodCustMap[pCode].items[custCode] += subSales;
        }
      }

      totalSales += saleTotal;
      totalProfit += (saleTotal - saleCost);
      monthlyData[month].sales += saleTotal;
      monthlyData[month].profit += (saleTotal - saleCost);
    });

    const getCustName = (code) => {
      const match = custData.find(x => x[0] === code);
      return match ? match[1] : code;
    };
    const getProdName = (code) => {
      const match = prodData.find(x => x[0] === code);
      return match ? match[1] : code;
    };

    const custTotalArr = Object.keys(custMap)
      .map(c => ({ code: c, name: getCustName(c), total: custMap[c] }))
      .sort((a, b) => b.total - a.total);

    const prodTotalArr = Object.keys(prodMap)
      .map(p => ({ code: p, name: getProdName(p), total: prodMap[p] }))
      .sort((a, b) => b.total - a.total);

    const custProdArr = Object.keys(custProdMap).map(c => {
      let itemsArr = Object.keys(custProdMap[c].items)
        .map(p => ({ code: p, name: getProdName(p), total: custProdMap[c].items[p] }))
        .sort((a, b) => b.total - a.total); 
      return { code: c, name: getCustName(c), total: custProdMap[c].total, items: itemsArr };
    }).sort((a, b) => b.total - a.total); 

    const prodCustArr = Object.keys(prodCustMap).map(p => {
      let itemsArr = Object.keys(prodCustMap[p].items)
        .map(c => ({ code: c, name: getCustName(c), total: prodCustMap[p].items[c] }))
        .sort((a, b) => b.total - a.total); 
      return { code: p, name: getProdName(p), total: prodCustMap[p].total, items: itemsArr };
    }).sort((a, b) => b.total - a.total); 

    const sortedMonths = Object.keys(monthlyData).sort();
    const labels = [];
    const salesArr = [];
    const profitArr = [];

    sortedMonths.forEach(m => {
      labels.push(m);
      salesArr.push(monthlyData[m].sales);
      profitArr.push(monthlyData[m].profit);
    });

    return {
      success: true,
      summary: { sales: totalSales, profit: totalProfit },
      chart: { labels: labels, sales: salesArr, profit: profitArr },
      tables: {
        custTotal: custTotalArr,
        prodTotal: prodTotalArr,
        custProd: custProdArr,
        prodCust: prodCustArr
      }
    };
  } catch (e) {
    return { success: false, message: e.toString() };
  } finally {
    lock.releaseLock();
  }
}
```

※これまでのコードを全て削除して，「Code.gs」と「index.html」を貼り付けて，デプロイすると，
大量データに耐えられる方式で正しく動作する。
Geminiに相談するだけでGoogle Apps Script Webアプリが作れる！

おまけ

YouTube更新内容によって，必要に応じて，増やしていきます。

おまけは，新規作成した別のチャットでの相談です。

【2026.5.6】デプロイした初回に限り，外部APIを利用して，URLをQRコード表示するには（スマホで簡単にテストするために）

件名：GAS WebアプリのQRコード自動生成・保存機能の作成依頼

【現状と背景】
GAS（スタンドアロン）で複雑なWebアプリを作成しています。doGet 関数や index.html はすでに作り込まれているため、既存の処理に影響を与えないよう、最小限の修正で済む実装を希望します。

【やりたいこと】
実行時に自身のWebアプリURLをQRコード化し、Googleドライブに保存する機能を「既存のHtmlOutputを加工する独立した関数」として作成してください。

【詳細条件】

URLの取得: ScriptApp.getService().getUrl() を使用。

保存ルール:

保存先はプロジェクト本体と同じフォルダ。

ファイル名は「プロジェクト名.png」。

重要: 同名ファイルが存在する場合は、生成・保存処理をスキップすること。

Webアプリとの連携:

初回（画像生成時）のみ、Base64形式で既存のHTMLの </body> 直前にQRコード画像を挿入して表示させること。

2回目以降（保存済み）は、HTMLに何も加えずそのまま返すこと。

実装の制約:

外部API（QuickChart等）を使用。

index.html は編集せず、GAS側で getContent() して文字列置換（Base64埋め込み）を行うこと。

既存の doGet を汚さないよう、 function modifyHtmlForQr(htmlOutput) { ... } のような、HtmlOutput オブジェクトを受け取って加工して返す「ラップ関数」の形式で作成してください。

既存の `doGet` 関数が複雑であるとのこと、承知いたしました。

`doGet` 内の修正が**「最後に出力する直前に1行関数を呼び出すだけ」**で済むように、QRコードの判定・生成・HTML追記のロジックをすべて独立した関数（`appendQrCodeIfNeeded`）に切り出しました。

### 1. 既存の `doGet` への追加（イメージ）
現在の `doGet` の最後、`return` する直前にある `HtmlOutput` オブジェクトを、作成した関数に通すだけで完了します。

```javascript
// 【既存の複雑な doGet 関数】
function doGet(e) {
  // 既存の複雑な処理がたくさんある想定...
  // 例: let htmlOutput = HtmlService.createTemplateFromFile('index').evaluate();
  // 例: htmlOutput.setTitle("マイアプリ").addMetaTag(...);
  
  // ↓↓↓ 今回追加する1行 ↓↓↓
  htmlOutput = appendQrCodeIfNeeded(htmlOutput);
  
  return htmlOutput;
}
```

### 2. コピペして追加する関数（ファイルの末尾などに貼り付けてください）

以下の関数をスクリプトファイルに追加してください。既存のHTML出力を受け取り、初回のみ画像付きの新しいHTML出力に差し替えて返します。

```javascript
/**
 * QRコードの生成・保存・HTMLへの追記を行う関数
 * @param {GoogleAppsScript.HTML.HtmlOutput} htmlOutput - 既存のHTML出力オブジェクト
 * @return {GoogleAppsScript.HTML.HtmlOutput} 変更後（またはそのまま）のHTML出力オブジェクト
 */
function appendQrCodeIfNeeded(htmlOutput) {
  // プロジェクト本体の情報を取得
  const scriptId = ScriptApp.getScriptId();
  const scriptFile = DriveApp.getFileById(scriptId);
  const projectName = scriptFile.getName();
  const qrFileName = projectName + ".png"; // 保存するファイル名
  
  // プロジェクトと同じフォルダを取得
  const parents = scriptFile.getParents();
  let folder = DriveApp.getRootFolder();
  if (parents.hasNext()) {
    folder = parents.next();
  }

  // 同名ファイルが存在するかチェック
  const existingFiles = folder.getFilesByName(qrFileName);
  if (existingFiles.hasNext()) {
    // 2回目以降：すでに存在する場合は何もしないで元の htmlOutput をそのまま返す
    return htmlOutput;
  }

  // --- 以下、初回（画像生成時）のみ実行される処理 ---

  // 自身のWebアプリURLを取得して QuickChart API でQRコード生成
  const webAppUrl = ScriptApp.getService().getUrl();
  const apiUrl = "https://quickchart.io/qr?text=" + encodeURIComponent(webAppUrl) + "&size=250&margin=2";
  const response = UrlFetchApp.fetch(apiUrl);
  const blob = response.getBlob().setName(qrFileName);
  
  // Googleドライブに画像を保存
  folder.createFile(blob);
  
  // Base64にエンコード
  const base64Data = Utilities.base64Encode(blob.getBytes());
  const contentType = blob.getContentType();
  const base64ImageString = `data:${contentType};base64,${base64Data}`;
  
  // HTMLに追記するブロック
  const appendHtml = `
    <div style="margin-top: 30px; padding: 15px; border-top: 2px dashed #ccc; text-align: center;">
      <p>※初回アクセス時限定表示※<br>WebアプリのQRコードがGoogleドライブに保存されました。</p>
      <img src="${base64ImageString}" alt="QR Code">
    </div>
  `;
  
  // 元のHTML文字列を取得
  let htmlString = htmlOutput.getContent();
  
  // </body>タグがあれば直前に、なければ末尾に追加
  if (htmlString.includes('</body>')) {
    htmlString = htmlString.replace('</body>', appendHtml + '\n</body>');
  } else {
    htmlString += appendHtml;
  }
  
  // HTMLを書き換えた新しい HtmlOutput オブジェクトを作成
  let newHtmlOutput = HtmlService.createHtmlOutput(htmlString);
  
  // 元のタイトルが設定されていれば引き継ぐ
  if (htmlOutput.getTitle()) {
    newHtmlOutput.setTitle(htmlOutput.getTitle());
  } else {
    newHtmlOutput.setTitle(projectName);
  }
  // viewportの設定（スマホ対応）を追加
  newHtmlOutput.addMetaTag('viewport', 'width=device-width, initial-scale=1');
  
  return newHtmlOutput;
}
```

### この設計のメリット
* **既存のコードを壊さない**: `doGet` 内の変数の流れに「フック」する形になるため、既存の複雑な処理やルーティングを汚しません。
* **分離された役割**: 画像生成やドライブへのアクセスといった副作用のある処理が `doGet` の本筋から分離されるため、メンテナンスが容易です。

※「Code.gs」の「1. 既存の doGet への追加」と「2. コピペして追加する関数（ファイルの末尾などに貼り付けてください）」をして，デプロイすると，
デプロイした初回（正確には，同一フォルダ上に「プロジェクト名.png」ファイルが無ければ）にURLのQRコードが表示される。

【2026.5.7】デプロイした初回に限り，外部にあるqrcode.jsを内包して，URLをQRコード表示するには（スマホで簡単にテストするために）

QRコードが表示されない場合は，オープンソース qrcode.jsのURLが変更になった可能性がある。
その場合は，正しいURLを見つけて，依頼文のURL部分を変更する。

【件名】GAS WebアプリのQRコード自動生成・保存機能の作成依頼
【現状と背景】
GAS（スタンドアロン）で複雑なWebアプリを作成しています。doGet関数やindex.htmlはすでに作り込まれているため、既存の処理に影響を与えないよう、最小限の修正で済む実装を希望します。
また、プロジェクトの構成ファイルは厳密に「Code.gs」と「index.html」の2つだけにしたいです。
【やりたいこと】
実行時に自身のWebアプリURLをQRコード化し、Googleドライブに保存する機能を「既存のHtmlOutputを加工する独立した関数」として作成してください。
【詳細条件】1. URLの取得と保存ルール:

ScriptApp.getService().getUrl() を使用してURLを取得すること。
保存先は「プロジェクト本体と同じフォルダ」とし、ファイル名は「プロジェクト名.png」とすること。
重要: フォルダ内に同名ファイルがすでに存在する場合は、QRコードの生成・保存処理、およびHTMLの書き換えを一切行わず、受け取ったHtmlOutputをそのまま返すこと。
2. qrcode.jsの動的読み込み（ファイル数制限の遵守）:

外部の画像生成APIは使用しないこと。
オープンソースの qrcode.js を利用するが、プロジェクトを2ファイル構成に保つため、GAS上に qrcode.gs などの別ファイルを作成してはいけない。
初回実行時（画像生成が必要な場合）のみ、UrlFetchApp で外部から下記URLから qrcode.js を取得し、eval() を用いてGAS上で動的に展開して実行すること（呼び出し形式は qrcode(0, 'L') とする）。URL:https://cdnjs.cloudflare.com/ajax/libs/qrcode-generator/1.4.4/qrcode.min.js
すでに画像が保存済みで処理をスキップする場合は、このダウンロード通信自体も行わないこと。
3. Webアプリとの連携:

初回（画像生成時）のみ、Base64形式で既存のHTMLの </body> 直前にQRコード画像（<img>タグ）を挿入して表示させること。
index.html ファイル自体は編集せず、GAS側で getContent() を使用して文字列置換（Base64埋め込み）を行うこと。
既存の doGet を汚さないよう、function modifyHtmlForQr(htmlOutput) { ... } のような、HtmlOutputオブジェクトを受け取って中身を書き換え（setContentを使用）、返す「ラップ関数」の形式で作成すること。既存のHtmlOutputのメタタグなどの設定は維持すること。

ご提示いただいた条件に基づき、既存のプロジェクト構成を維持したまま導入できる「QRコード生成・保存ラップ関数」を作成しました。

このコードは、Googleドライブ内を確認し、**画像が存在しない初回実行時のみ**ライブラリの取得・QR生成・ファイル保存・HTML加工をすべて自動で行います。

### 実装コード（Code.gs）

既存の `doGet` 関数の最後で、この `modifyHtmlForQr` を呼び出すだけで機能が有効になります。

```javascript
/**
 * 既存のHtmlOutputを受け取り、必要に応じてQRコードを付与して返すラップ関数
 */
function modifyHtmlForQr(htmlOutput) {
  const scriptId = ScriptApp.getScriptId();
  const scriptFile = DriveApp.getFileById(scriptId);
  const folder = scriptFile.getParents().next();
  const projectName = scriptFile.getName();
  const fileName = projectName + ".png";

  // 1. 同名ファイルの存在確認
  const existingFiles = folder.getFilesByName(fileName);
  if (existingFiles.hasNext()) {
    // 既に存在する場合は何もせずそのまま返す
    return htmlOutput;
  }

  // 2. URLの取得
  const url = ScriptApp.getService().getUrl();
  if (!url) {
    // デプロイされていない（URLがない）場合はスキップ
    return htmlOutput;
  }

  try {
    // 3. qrcode.jsの動的読み込みと実行
    const libUrl = "https://cdnjs.cloudflare.com/ajax/libs/qrcode-generator/1.4.4/qrcode.min.js";
    const jsText = UrlFetchApp.fetch(libUrl).getContentText();
    eval(jsText); // GAS上でqrcode関数を使えるようにする

    // QRコード生成 (呼び出し形式: qrcode(0, 'L'))
    const qr = qrcode(0, 'L');
    qr.addData(url);
    qr.make();
    
    // Base64データ（Data URL）の作成
    // ※第1引数はセルサイズ、第2引数はマージン
    const qrDataUrl = qr.createDataURL(4, 12);
    const base64Data = qrDataUrl.split(',')[1];
    const blob = Utilities.newBlob(Utilities.base64Decode(base64Data), "image/png", fileName);

    // 4. Googleドライブへ保存
    folder.createFile(blob);

    // 5. HTMLの書き換え（</body>直前に挿入）
    const htmlContent = htmlOutput.getContent();
    const qrImgTag = `<div style="text-align:center; margin-top:20px;">
                        <p style="font-size:12px; color:#666;">Web App QR Code</p>
                        <img src="${qrDataUrl}" alt="QR Code">
                      </div>`;
    
    const newHtml = htmlContent.replace('</body>', qrImgTag + '</body>');
    htmlOutput.setContent(newHtml);

    return htmlOutput;

  } catch (e) {
    console.error("QRコード生成エラー: " + e.toString());
    return htmlOutput;
  }
}

/**
 * 既存のdoGet（実装例）
 */
function doGet(e) {
  // 既存の処理
  let output = HtmlService.createHtmlOutputFromFile('index.html')
      .setTitle('売上管理システム')
      .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
  
  // 今回作成した関数でラップして返す
  return modifyHtmlForQr(output);
}
```

---

### この実装のポイント

*   **完全な独立性**: `modifyHtmlForQr` 関数は `HtmlOutput` を受け取って `HtmlOutput` を返すため、既存の `doGet` 内の複雑なロジックを汚しません。
*   **ファイル数制限の遵守**: `eval()` を利用することで、プロジェクト内に新しい `.gs` ファイルを増やすことなく外部ライブラリの機能を利用しています。
*   **実行負荷の最小化**: `folder.getFilesByName()` によるチェックを最初に行うため、2回目以降のアクセスでは `UrlFetchApp`（通信）や `eval()`（計算）は一切発生せず、パフォーマンスへの影響は軽微です。
*   **自動保存先**: `ScriptApp.getScriptId()` から親フォルダを特定するため、プロジェクトがどのフォルダに移動されても、常にその「本体と同じ場所」に画像を保存します。

### 注意事項
*   **初回実行時の権限**: 実行時に `DriveApp`（ファイル操作）と `UrlFetchApp`（外部通信）の承認が求められます。
*   **Webアプリの公開設定**: `ScriptApp.getService().getUrl()` は、Webアプリとして一度もデプロイされていない状態では空文字を返すことがあります。必ず一度「新しいデプロイ」を行ってから動作を確認してください。

※「Code.gs」の「1. 既存の doGet への追加」と「2. コピペして追加する関数（ファイルの末尾などに貼り付けてください）」を貼り付けて，デプロイすると，
デプロイした初回（正確には，同一フォルダ上に「プロジェクト名.png」ファイルが無ければ）にURLのQRコードが表示される。

Geminiに相談するだけでGoogle Apps Script Web アプリを作る相談のコツ

第1章 相談準備

Geminiに相談するだけで作る初めてのWebアプリの「依頼文」の内容

第2章 ログイン相談

2−1

2−2

2−3

第3章 マスター相談

3-1

3-2

3-3

第4章 売上管理相談

4-2

第5章 請求管理相談

5-1

5-2

第6章 販売分析相談

6-1

6-2

付録