GASでDOM操作と非同期連携

GAS実践の概要

Google Apps Script（GAS）は、Google Workspace のサービスを拡張するためのスクリプト言語です。GAS実践では、スプレッドシートやドキュメント、Gmail などを自動化し、業務効率を大幅に向上させることができます。この記事では、クライアント側連携を中心に、google.script.run を使ったサーバー側関数呼び出しの実装方法を解説します。

クライアント側連携とgoogle.script.run

クライアント側連携とは、HTML/JavaScript から GAS のサーバー側関数を呼び出す仕組みです。google.script.run は、クライアント側で非同期にサーバー側関数を実行し、結果を受け取るための API です。以下のように簡単に呼び出せます。

google.script.run
  .withSuccessHandler(function(result) {
    console.log('成功:', result);
  })
  .withFailureHandler(function(error) {
    console.error('失敗:', error);
  })
  .myServerFunction('引数1', 42);

この例では、myServerFunction というサーバー側関数に文字列と数値を引数渡し、成功時に withSuccessHandler で結果を受け取ります。失敗時は withFailureHandler が呼び出されます。

サーバー側関数呼び出しと非同期処理

サーバー側関数は、Apps Script のコードエディタで次のように定義します。

function myServerFunction(param1, param2) {
  // 何らかの処理
  return '受け取った値: ' + param1 + ', ' + param2;
}

google.script.run は非同期処理であるため、呼び出し直後に結果を待つ必要はありません。コールバック関数（withSuccessHandler）で結果を受け取ることで、UI をブロックせずにスムーズな操作が可能です。

コールバックとDOM操作でインタラクティブにする

取得したデータを DOM に反映させることで、インタラクティブなページを作成できます。例えば、以下のように結果を表示する要素を更新します。

google.script.run
  .withSuccessHandler(function(result) {
    document.getElementById('output').textContent = result;
  })
  .myServerFunction('テスト', 123);

ここで、output はページ内にある <div id="output"></div> などの要素です。コールバック内で DOM 操作を行うことで、ユーザーに即時フィードバックを提供できます。

まとめとして、GAS実践ではクライアント側連携を活用し、google.script.run を使ってサーバー側関数呼び出しを非同期に行い、withSuccessHandler でコールバックを受け取り、DOM 操作でインタラクティブな UI を構築することが重要です。これにより、Google Workspace の機能を拡張しつつ、ユーザー体験を向上させることができます。

なんでも技術ブログ

このブログを検索