公開講座資料【Google Apps Script編】公開！

---

Google Apps Script (GAS) 講座：ステップ・バイ・ステップ コード例

【サンプルシート】このスプレッドシートをコピーして使用してください。

Google Sheets: Sign-in

Access Google Sheets with a personal Google account or Google Workspace account (for business use).

docs.google.com

【ステップ１：はじめの一歩】ログにメッセージを表示する

まずはGASの基本操作に慣れましょう。スプレッドシートからスクリプトエディタを開き、最初のコードを実行する体験が重要です。

目的：

• スクリプトエディタの開き方を覚える
• 関数を作成し、実行する基本フローを体験する
• Logger.log() で実行結果を確認する方法を学ぶ

codeJavaScript

// Code.gs
function firstScript() {
  const message = "こんにちは、GASの世界へようこそ！";
  Logger.log(message);
}

講座でのポイント解説「Logger.log() は、プログラムが正しく動いているか確認するための『メモ書き』や『確認用スタンプ』のようなものです。これから何度も使いますので覚えておきましょう」と説明します。実行ログの確認方法も丁寧に解説してください。

---

【ステップ２：スプレッドシート操作の基本】セルに文字を書き込む

いよいよGASの真骨頂、スプレッドシートとの連携です。プログラムからセルを操作する感動を味わってもらいます。

目的：

• スプレッドシートの情報を取得する方法を学ぶ (SpreadsheetApp, getSheetByName)
• 特定のセルを指定し、値を書き込む方法を学ぶ (getRange, setValue)

codeJavaScript

// Code.gs
function writeToCell() {
  // 現在アクティブなスプレッドシートを取得
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  // "シート1" という名前のシートを取得
  const sheet = ss.getSheetByName("シート1");

  // A1セルを指定して、文字を書き込む
  sheet.getRange("A1").setValue("GASからの書き込みに成功！");
}

講座でのポイント解説「SpreadsheetAppがスプレッドシート全体、sheetが特定のシート、getRange(“A1”)がセルを指す、というように住所のように対象を絞り込んでいくイメージです」と伝えると分かりやすいです。

---

【ステップ３：単純作業の自動化】表のデータを一括処理する

プログラミングの強力な武器である「繰り返し処理」を学びます。手作業でやると面倒な計算を、一瞬で終わらせる体験を提供します。

目的：

• 複数のセルからデータをまとめて取得する方法を学ぶ (getValues)
• forループを使った繰り返し処理を覚える
• 処理結果を複数のセルに一括で書き込む方法を学ぶ (setValues)

準備：
スプレッドシートに以下のような簡単な売上データを用意してもらいます。
| | A | B | C | D |
|—|—|—|—|—|
| 1 | 商品名 | 単価 | 数量 | 合計金額 |
| 2 | りんご | 100 | 5 | |
| 3 | みかん | 50 | 10 | |
| 4 | ぶどう | 300 | 2 | |codeJavaScript

// Code.gs
function calculateTotal() {
  // "シート1" という名前のシートを取得します。シート名が違う場合は修正してください。
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("シート1");
  
  // データが入力されている最後の行番号を取得します（この例では5）
  const lastRow = sheet.getLastRow();
  
  // ヘッダー行(2行目)を除き、データが始まる3行目から取得するように修正します。
  // C3セルからD列の最後までデータをまとめて取得
  const dataRange = sheet.getRange("C3:D" + lastRow);
  const values = dataRange.getValues();
  
  const results = [];
  // 取得したデータを1行ずつ処理（ループ）
  for (let i = 0; i < values.length; i++) {
    const price = values[i][0];    // 0番目の列 = C列（単価）
    const quantity = values[i][1]; // 1番目の列 = D列（数量）
    const total = price * quantity;
    results.push([total]); // 結果を配列に追加
  }
  
  // 結果を書き込む開始位置をE3セルに修正します。
  // getRange(行番号, 列番号, 行数, 列数)
  sheet.getRange(3, 5, results.length, 1).setValues(results);
}

講座でのポイント解説getValues()で取得するデータは「2次元配列」という箱に入っていること、forループでその箱を一つずつ開けていくイメージを伝えます。手作業との速度の違いを実感してもらうことが重要です。

---

【ステップ３応用編】専用メニューからワンクリックで実行しよう！

毎回スクリプトエディタを開いて実行ボタンを押すのは、少し手間がかかりますよね。
そこで、スプレッドシートのメニューバーに「合計金額を計算」という専用ボタンを追加して、誰でも簡単にスクリプトを実行できるようにカスタマイズしてみましょう！

これには、onOpen() という特別な関数を使います。

1. onOpen()関数とは？

onOpen() という名前の関数は、**「このスプレッドシートが開かれた（Openされた）時に、自動的に実行される」**という特別な役割を持っています。
この性質を利用して、スプレッドシートが開かれるたびに、メニューを追加する命令を実行させるのです。

2. 追加するコード

以下のコードを、既存の calculateTotal() 関数の上か下に追記してください。codeJavaScript

/**
 * スプレッドシートを開いた時に実行される関数。
 * カスタムメニューを追加します。
 */
function onOpen() {
  // スプレッドシートのUI（ユーザーインターフェース）を取得
  const ui = SpreadsheetApp.getUi();
  
  // '便利ツール' という名前のカスタムメニューを作成
  ui.createMenu('便利ツール')
      .addItem('合計金額を計算', 'calculateTotal') // メニュー項目を追加
      .addToUi(); // UIにメニューを追加
}

3. コードの簡単な解説

• SpreadsheetApp.getUi(): 「スプレッドシートの見た目（UI）を操作しますよ」というおまじないです。
• .createMenu(‘便利ツール’): メニューバーに表示される親メニューの名前を「便利ツール」に設定しています。好きな名前に変更できます。
• .addItem(‘合計金額を計算’, ‘calculateTotal’):
  • 最初の ‘合計金額を計算’ は、メニューに表示されるボタンのテキストです。
  • 次の ‘calculateTotal’ は、そのボタンがクリックされた時に実行される関数名です。ここで、私たちが作った calculateTotal 関数と紐づけています。
• .addToUi(): 「完成したこのメニューを、スプレッドシートのUIに追加してください」という最後の命令です。

4. 完成版コードの全体像

Code.gs ファイル全体が以下のようになっていることを確認してください。codeJavaScript

// Code.gs

/**
 * スプレッドシートを開いた時に実行される関数。
 * カスタムメニューを追加します。
 */
function onOpen() {
  // スプレッドシートのUI（ユーザーインターフェース）を取得
  const ui = SpreadsheetApp.getUi();
  
  // '便利ツール' という名前のカスタムメニューを作成
  ui.createMenu('便利ツール')
      .addItem('合計金額を計算', 'calculateTotal') // メニュー項目を追加
      .addToUi(); // UIにメニューを追加
}


/**
 * C列の単価とD列の数量を掛け算し、E列に合計金額を書き込む関数。
 */
function calculateTotal() {
  // "シート1" という名前のシートを取得します。シート名が違う場合は修正してください。
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("シート1");
  
  // データが入力されている最後の行番号を取得します
  const lastRow = sheet.getLastRow();
  
  // ヘッダー行(2行目)を除き、データが始まる3行目から取得
  const dataRange = sheet.getRange("C3:D" + lastRow);
  const values = dataRange.getValues();
  
  const results = [];
  // 取得したデータを1行ずつ処理（ループ）
  for (let i = 0; i < values.length; i++) {
    const price = values[i][0];    // 0番目の列 = C列（単価）
    const quantity = values[i][1]; // 1番目の列 = D列（数量）
    const total = price * quantity;
    results.push([total]); // 結果を配列に追加
  }
  
  // 結果を書き込む開始位置をE3セルに修正
  sheet.getRange(3, 5, results.length, 1).setValues(results);
}

5. 使い方と動作確認

1. 上記のコードをスクリプトエディタに貼り付け、必ず保存ボタン（フロッピーディスクのアイコン）をクリックします。
2. スプレッドシートの画面に戻り、**ブラウザのページを再読み込み（リロード）**してください。（これが一番重要です！）
3. ページの読み込みが終わると、メニューバー（「ファイル」「編集」「表示」…の並び）に**「便利ツール」**という新しいメニューが追加されているはずです。
4. E列の合計金額を一度クリアしてから、**「便利ツール」→「合計金額を計算」**をクリックしてみてください。
5. スクリプトが実行され、E列に合計金額が自動で入力されれば成功です！

これで、プログラミングを知らない人でも、このシートを使うだけで簡単に合計金額を計算できるようになりました。

【Webアプリの第一歩】シンプルなWebページを表示する

いよいよWebアプリ作成の入り口です。GASを使って、自分だけのWebページをインターネットに公開する体験をします。

目的：

• Webページを表示するための特別な関数 doGet() を学ぶ
• HTMLを生成する HtmlService を知る
• Webアプリとして「デプロイ」する手順を覚える

講座でのポイント解説doGet という名前の関数は特別で、生成されたURLにアクセスがあった時に自動で実行される「お約束」であることを強調します。「デプロイ」という言葉の意味と、手順（新しいデプロイ→種類の選択→アクセスできるユーザーを「全員」に設定）を丁寧に解説してください。

フォームでデータを受け取るWebアプリ（サンプル）

【サンプルファイル:スプレッドシート】コピーして使用してください。

Google Sheets: Sign-in

Access Google Sheets with a personal Google account or Google Workspace account (for business use).

docs.google.com

ユーザーが入力したデータをスプレッドシートに記録する、実用的なWebアプリを作成します。フロントエンド（HTML）とバックエンド（GAS）の連携が鍵です。

目的：

• HTMLファイルを作成し、GASから呼び出す方法を学ぶ
• HTML側(google.script.run)からGAS側の関数を呼び出す方法を覚える
• Webフォームからの入力をスプレッドシートに追記する、一連の流れを完成させる

手順：

1. Code.gs を作成
2. スクリプトエディタで「ファイル」→「新規作成」→「HTMLファイル」を選び、index.html という名前でファイルを作成します。

Code.gs（サーバーサイドの処理）codeJavaScript

// Code.gs

function doGet(e) {
  // index.html ファイルを読み込んでWebページとして表示
  // ★★★ここを修正！★★★
  return HtmlService.createHtmlOutputFromFile('index');
}

// HTML側から呼び出される関数
function recordMessage(name, message) {
  try {
    const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("問い合わせ");
    // 新しい行としてデータを追記
    sheet.appendRow([new Date(), name, message]);
    return "メッセージを記録しました！"; // 成功メッセージを返す
  } catch (error) {
    return "エラーが発生しました: " + error.message; // エラーメッセージを返す
  }
}

index.html（ブラウザで表示される画面）codeHtml

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <!-- ▼▼▼ 見た目を整えるコードを追加 ▼▼▼ -->
    <style>
      /* 画面全体のフォントなどを指定 */
      body {
        font-family: sans-serif;
        padding: 20px;
      }
      /* 入力欄やボタンの共通設定 */
      input, textarea, button {
        display: block; /* これで要素が縦に並びます */
        width: 300px;   /* 幅を300pxに統一 */
        margin-bottom: 10px; /* 下に10pxの余白を設ける */
        padding: 8px;
        font-size: 16px;
      }
      /* メッセージ入力欄の高さを調整 */
      textarea {
        height: 100px;
      }
      /* 送信ボタンの色などを調整 */
      button {
        cursor: pointer; /* マウスカーソルを指の形に */
        background-color: #007bff;
        color: white;
        border: none;
      }
      /* 結果表示欄のスタイル */
      #status {
        margin-top: 15px;
        font-weight: bold;
      }
    </style>
    <!-- ▲▲▲ ここまで追加 ▲▲▲ -->
  </head>
  <body>
    <h1>お問い合わせフォーム</h1>
    <p>名前とメッセージを入力して送信してください。</p>
    
    <input type="text" id="nameInput" placeholder="お名前">
    <textarea id="messageInput" placeholder="メッセージ"></textarea>
    <button onclick="submitForm()">送信</button>
    
    <div id="status"></div>

    <script>
      function submitForm() {
        // 画面の入力値を取得
        const name = document.getElementById("nameInput").value;
        const message = document.getElementById("messageInput").value;
        
        // メッセージを表示
        document.getElementById("status").innerText = "送信中...";
        
        // GAS側の recordMessage 関数を呼び出し
        google.script.run
          .withSuccessHandler(function(response) {
            // 成功したら、返ってきたメッセージを表示
            document.getElementById("status").innerText = response;
            // 入力欄をクリア
            document.getElementById("nameInput").value = "";
            document.getElementById("messageInput").value = "";
          })
          .recordMessage(name, message);
      }
    </script>
  </body>
</html>

講座でのポイント解説google.script.run が、ブラウザ（HTML）とサーバー（GAS）を繋ぐ「魔法の電話」であることを説明します。Webアプリは一度「デプロイ」した後、コードを修正したら**「新しいバージョン」として再度デプロイし直さないと変更が反映されない**、という非常に重要な注意点を伝えてください。

出来上がったWEBアプリの公開方法

GASからデプロイすれば公開URLが作成され、WEBアプリとして使用することができるようになります！

このステップを踏むことで、受講者はGASの基本から応用までを体系的に学び、最終的には自分で作ったWebアプリが動くという大きな成功体験を得ることができるでしょう。頑張ってください！

【発展編】GASをAIの強力な操作パネルに！Dify & Vertex AI 連携入門

皆さん、これまでの講座でGASの基本とDifyの便利さを学んできました。この最終章では、その二つを連携させ、Googleスプレッドシートから直接、私たちが作ったAIを呼び出す方法を学びます。

さらに、プロフェッショナルな現場で使われるGoogle自身のAI基盤**「Vertex AI」**との連携にも挑戦します。これにより、皆さんのGASスキルは「業務効率化」から「AIを活用したソリューション開発」へと大きくステップアップします！

この章のゴール

1. GASからDifyのAIアプリを呼び出し、スプレッドシート上で結果を受け取る。
2. GASから**Google Cloud Vertex AI (Gemini)**を直接呼び出し、スプレッドシート上で結果を受け取る。（※GoogleCloudで有料契約が必要）
3. 「Dify連携」と「Vertex AI連携」の違いと使い分けを理解する。

---

パート１：GASとDifyの連携 〜自作AIアプリのリモコンを作ろう〜

Difyで作成・調整したカスタムAI（RAGで賢くしたAIなど）を、スプレッドシートのカスタム関数から呼び出してみましょう。

ステップA：Difyから「秘密の合鍵（APIキー）」を取得する

GASが私たちのDifyアプリを操作するには、「APIキー」という秘密の合鍵が必要です。

1. Difyのダッシュボード画面に戻り、画面右上のアイコンから**「設定」**をクリックします。
2. 左メニューから**「APIキー」**を選択します。
3. **「APIキーを作成」**ボタンを押し、キーの名前（例：GAS連携用）を入力して作成します。
4. 表示された**secret-…**から始まる長い文字列（シークレットキー）をコピーし、PCのメモ帳などに大切に保管します。このキーは一度しか表示されません！

ステップB：GASでDifyを呼び出すコードを書く

1. Googleスプレッドシートを開き、[拡張機能] > [Apps Script] でスクリプトエディタを開きます。
2. 以下のコードをコピー＆ペーストします。

codeJavaScript

// ★★★ここにDifyからコピーしたAPIキーを貼り付け★★★
const DIFY_API_KEY = 'secret-xxxxxxxxxxxxxxxxxxxxxxxx';

/**
 * Difyのチャットボットに質問を送信し、回答を取得するカスタム関数
 * @param {string} prompt ユーザーからの質問
 * @return {string} AIからの回答
 * @customfunction
 */
function ASK_DIFY(prompt) {
  if (!prompt) {
    return "質問を入力してください";
  }

  // Dify APIのエンドポイントURL (会話型API)
  const apiUrl = 'https://api.dify.ai/v1/chat-messages';

  const payload = {
    inputs: {},
    query: prompt,
    user: "gas-user-01", // ユーザーを識別するためのID（固定でOK）
    response_mode: "blocking" // 回答が完了するまで待つモード
  };

  const options = {
    method: 'post',
    contentType: 'application/json',
    headers: {
      'Authorization': 'Bearer ' + DIFY_API_KEY
    },
    payload: JSON.stringify(payload),
    muteHttpExceptions: true // エラー時もスクリプトを止めない
  };

  try {
    const response = UrlFetchApp.fetch(apiUrl, options);
    const json = JSON.parse(response.getContentText());
    
    // Difyからの回答は 'answer' というキーに入っている
    return json.answer;
  } catch (e) {
    return "エラーが発生しました: " + e.toString();
  }
}

コードのポイント解説

• UrlFetchApp.fetch(): GASが外部のWebサービス（API）と通信するための命令です。
• headers: 通信時の「身分証明書」のようなもの。「Bearer」という形式でAPIキーを提示しています。
• payload: Difyに送る「注文書」です。「query」にユーザーの質問を入れるのがルールです。

1. コードを保存します。

ステップC：スプレッドシートで試す！

1. スプレッドシートの好きなセルに、=LEN()や=SUM()のように、私たちが作ったカスタム関数を入力します。
2. セルに次のように入力してみてください。
   =ASK_DIFY(“Difyとは何ですか？”)
3. 「読み込んでいます…」と表示された後、DifyのAIからの回答がセルに表示されれば大成功です！

---

パート２：GASとVertex AIの連携 〜GoogleのAIエンジンに直接アクセス〜

次に、よりプロフェッショナルな方法である、Google CloudのVertex AIに直接アクセスしてみましょう。こちらは設定が少し複雑ですが、より低レベルでAIを制御できます。

【重要】事前準備と注意点

• Google Cloud Platform (GCP)のアカウントが必要です。
• GCPで請求先アカウントが有効になっている必要があります。（無料枠がありますが、設定は必須です）
• Vertex AI APIを有効化しておく必要があります。

ステップA：GCPで認証情報を設定する（OAuth 2.0）

Difyと違い、Googleのサービス同士の連携では、より安全なOAuth 2.0という認証方法を使います。

1. GASプロジェクトの [設定] > [GCPプロジェクト] で、GCPプロジェクト番号を紐付けます。
2. 紐付けたGCPプロジェクトの [APIとサービス] > [認証情報] に移動します。
3. [認証情報を作成] > [OAuth クライアント ID] を選択し、アプリケーションの種類を「ウェブアプリケーション」に設定します。
4. **「承認済みのリダイレクト URI」**に、GASプロジェクトの「デプロイ」情報から取得できるリダイレクトURIを追加します。（非常に重要な手順です）
5. 作成された**「クライアントID」と「クライアントシークレット」**をコピーしておきます。

ステップB：GASでVertex AI (Gemini) を呼び出すコードを書く

Vertex AIの認証は複雑なので、ライブラリを使って簡略化します。

1. スクリプトエディタの左側メニュー「ライブラリ」の「＋」をクリックします。
2. スクリプトID 1B7FSrk570L1klBdf4j47ubv-cO9VCI5hMS5AbGulpA09zT-HBXKSJw1A を入力し、「検索」→「追加」します。（これはOAuth2ライブラリです）
3. 以下のコードをエディタに貼り付けます。

codeJavaScript

// ★★★GCPで取得した情報を貼り付け★★★
const CLIENT_ID = 'YOUR_CLIENT_ID';
const CLIENT_SECRET = 'YOUR_CLIENT_SECRET';

// ★★★GCPプロジェクトIDを貼り付け★★★
const PROJECT_ID = 'your-gcp-project-id';
const LOCATION = 'asia-northeast1'; // 東京リージョン

/**
 * Vertex AI (Gemini) に質問を送信し、回答を取得するカスタム関数
 * @param {string} prompt ユーザーからの質問
 * @return {string} AIからの回答
 * @customfunction
 */
function ASK_VERTEX(prompt) {
  if (!prompt) {
    return "質問を入力してください";
  }

  const service = getVertexAiService();
  if (!service.hasAccess()) {
    // 認証されていない場合、認証用URLを返す
    const authorizationUrl = service.getAuthorizationUrl();
    return "認証が必要です。このURLを開いて許可してください: " + authorizationUrl;
  }

  const accessToken = service.getAccessToken();
  const apiUrl = `https://${LOCATION}-aiplatform.googleapis.com/v1/projects/${PROJECT_ID}/locations/${LOCATION}/publishers/google/models/gemini-1.0-pro:streamGenerateContent`;

  const payload = {
    "contents": {
      "role": "user",
      "parts": { "text": prompt }
    }
  };

  const options = {
    'method': 'post',
    'contentType': 'application/json',
    'headers': {
      'Authorization': 'Bearer ' + accessToken
    },
    'payload': JSON.stringify(payload)
  };

  try {
    const response = UrlFetchApp.fetch(apiUrl, options);
    const json = JSON.parse(response.getContentText());
    // Vertex AI (Gemini) からの回答の構造
    return json[0].candidates[0].content.parts[0].text;
  } catch (e) {
    return "エラーが発生しました: " + e.toString();
  }
}

// OAuth2認証サービスをセットアップするための関数（おまじない）
function getVertexAiService() {
  return OAuth2.createService('VertexAI')
    .setAuthorizationBaseUrl('https://accounts.google.com/o/oauth2/auth')
    .setTokenUrl('https://accounts.google.com/o/oauth2/token')
    .setClientId(CLIENT_ID)
    .setClientSecret(CLIENT_SECRET)
    .setCallbackFunction('authCallback')
    .setPropertyStore(PropertiesService.getUserProperties())
    .setScope('https://www.googleapis.com/auth/cloud-platform');
}

// 認証コールバック関数（おまじない）
function authCallback(request) {
  const service = getVertexAiService();
  const authorized = service.handleCallback(request);
  if (authorized) {
    return HtmlService.createHtmlOutput('認証に成功しました。このタブを閉じて、スプレッドシートで再度関数をお試しください。');
  } else {
    return HtmlService.createHtmlOutput('認証に失敗しました。');
  }
}

1. コードを保存します。

ステップC：認証と実行

1. 初回実行時は必ず認証が必要です。
2. スプレッドシートのセルに =ASK_VERTEX(“こんにちは”) と入力します。
3. すると、セルに「認証が必要です…」というURLが表示されます。
4. そのURLをコピーしてブラウザで開き、アカウントを選択して許可します。
5. 成功画面が出たら、再度スプレッドシートに戻り、もう一度同じセルでEnterキーを押すなどして再計算させます。
6. 今度はVertex AI (Gemini)からの回答が表示されれば大成功です！

---

まとめ：Dify連携とVertex AI連携、どう使い分ける？

項目	GAS + Dify連携	GAS + Vertex AI連携
設定の簡単さ	◎ 簡単 (APIキーを貼るだけ)	△ 複雑 (GCPとOAuth2の設定が必要)
できること	自分がDifyで作成・調整した**カスタムAI (RAG含む)**を呼び出せる	Googleの**素のAIモデル (Geminiなど)**を直接呼び出せる
柔軟性	△ Difyの機能の範囲内	◎ 高い (モデルのパラメータなど細かく制御可能)
おすすめの用途	・社内マニュアルFAQボットの自動化<br>・特定の役割を持たせたAIの呼び出し	・より汎用的な文章生成や要約<br>・Google Cloudサービスとの密な連携

結論：
まずはDifyでAIをしっかり作り込み、それをGASから呼び出すのが最も簡単で実用的です。
より高度な制御や、Google Cloudとの深い連携が必要になった時に、Vertex AI連携に挑戦するのが良いでしょう！

参考となる記事

複雑な関数を使わずにGASで授業の時数を算出できるようにした例

サイドバー活用のガントチャート

GAS +AI（Dify API）を使ったWEBアプリ

【おまけ】この動画はエクセルのマクロについてですが、コード作成についてAIへどのように尋ねるのか参考になります。