ウェブアプリ

スクリプトのユーザー インターフェースを作成する場合は、スクリプトをウェブアプリとして公開できます。たとえば、ユーザーがサポートチームのメンバーとの予約をスケジュールできるスクリプトは、ユーザーがブラウザから直接アクセスできるように、ウェブアプリとして公開するのが最適です。

スタンドアロン スクリプトと Google Workspace アプリケーションにバインドされたスクリプトは、以下の要件を満たしていればウェブアプリに変換できます。

ウェブアプリの要件

スクリプトは、次の要件を満たしている場合にウェブアプリとして公開できます。

リクエスト パラメータ

ユーザーがアプリにアクセスするか、プログラムがアプリに HTTP GET リクエストを送信すると、Apps Script は関数 doGet(e) を実行します。プログラムがアプリに HTTP POST リクエストを送信すると、Apps Script は代わりに doPost(e) を実行します。どちらの場合も、e 引数は、リクエスト パラメータに関する情報を含むことができるイベント パラメータを表します。イベント オブジェクトの構造は、次の表のとおりです。

フィールド
e.queryString

URL のクエリ文字列部分の値。クエリ文字列が指定されていない場合は null

name=alice&n=1&n=2
e.parameter

リクエスト パラメータに対応する Key-Value ペアのオブジェクト。複数の値を持つパラメータに対しては、最初の値のみが返されます。

{"name": "alice", "n": "1"}
e.parameters

e.parameter に似たオブジェクト。ただし、各キーの値の配列を含む

{"name": ["alice"], "n": ["1", "2"]}
e.pathInfo

/exec または /dev の後の URL パス。たとえば、URL パスが /exec/hello で終わる場合、パス情報は hello です。
e.contextPath 使用されず、常に空の文字列です。
e.contentLength

POST リクエストのリクエスト本文の長さ。GET リクエストの場合は -1

332
e.postData.length

e.contentLength と同じ

332
e.postData.type

POST 本文の MIME タイプ

text/csv
e.postData.contents

POST 本文のコンテンツ テキスト

Alice,21
e.postData.name

常に値「postData」

postData

たとえば、次のように username や age などのパラメータを URL に渡すことができます。

https://script.google.com/.../exec?username=jsmith&age=21

その後、次のようにパラメータを表示できます。

function doGet(e) {
  var params = JSON.stringify(e);
  return ContentService.createTextOutput(params).setMimeType(ContentService.MimeType.JSON);
}

上記の例では、doGet(e) は次の出力を返します。

{
  "queryString": "username=jsmith&age=21",
  "parameter": {
    "username": "jsmith",
    "age": "21"
  },
  "contextPath": "",
  "parameters": {
    "username": [
      "jsmith"
    ],
    "age": [
      "21"
    ]
  },
  "contentLength": -1
}

スクリプトをウェブアプリとしてデプロイする

スクリプトをウェブアプリとしてデプロイする手順は次のとおりです。

  1. スクリプト プロジェクトの右上にある [デプロイ] > [新しいデプロイ] をクリックします。
  2. [種類の選択] の横にある [デプロイタイプを有効にする] > [ウェブアプリ] をクリックします。
  3. [デプロイ構成] の各項目にウェブアプリの情報を入力します。
  4. [デプロイ] をクリックします。

アクセス権を付与したユーザーには、ウェブアプリの URL を共有できます。

ウェブアプリのデプロイをテストする

スクリプトをウェブアプリとしてテストする手順は次のとおりです。

  1. スクリプト プロジェクトの右上にある [デプロイ] > [デプロイをテスト] をクリックします。
  2. [種類の選択] の横にある [デプロイタイプを有効にする] > [ウェブアプリ] をクリックします。
  3. ウェブアプリの URL の下にある [コピー] をクリックします。

  4. ブラウザに URL を貼り付けて、ウェブアプリをテストします。

    この URL は /dev で終わり、スクリプトの編集権限を持つユーザーのみがアクセスできます。このアプリのインスタンスは、常に最後に保存されたコードを実行し、開発中のテストのみを目的としています。

権限

ウェブアプリの権限は、アプリの実行方法によって異なります。

  • 自分としてアプリを実行 - この場合、ウェブアプリにアクセスするユーザーにかかわらず、スクリプトは常にスクリプトのオーナーであるユーザーとして実行されます。
  • ウェブアプリにアクセスするユーザーとしてアプリを実行する - この場合、スクリプトはウェブアプリを使用しているアクティブ ユーザーの ID で実行されます。この権限付与方法では、ユーザーがアクセスを承認すると、ウェブアプリにスクリプト オーナーのメールアドレスが表示されます。

ウェブアプリを Google サイトに埋め込む

ウェブアプリを Google サイトに埋め込むには、まずデプロイする必要があります。Deploy ダイアログのデプロイ先 URLも必要です。

ウェブアプリを Sites ページに埋め込む手順は次のとおりです。

  1. ウェブアプリを追加するサイトのページを開きます。
  2. [挿入] > [URL を埋め込む] を選択します。
  3. ウェブアプリの URL を貼り付けて、[追加] をクリックします。

ウェブアプリは、ページのプレビューのフレームに表示されます。ページを公開すると、サイトの閲覧者がウェブアプリを正常に実行する前に、ウェブアプリの承認が必要になることがあります。承認されていないウェブアプリは、ユーザーに承認プロンプトを表示します。

ウェブアプリとブラウザの履歴

Apps Script ウェブアプリで、複数ページのアプリケーションや、URL パラメータで制御される動的 UI をシミュレートすることが望ましい場合があります。これを適切に行うには、アプリの UI またはページを表す状態オブジェクトを定義し、ユーザーがアプリを操作する際に状態をブラウザの履歴にプッシュします。履歴イベントをリッスンして、ユーザーがブラウザのボタンで前後に移動したときにウェブアプリが正しい UI を表示するようにすることもできます。読み込み時に URL パラメータをクエリすることで、アプリはこれらのパラメータに基づいて UI を動的に構築し、ユーザーが特定の状態でアプリを起動できるようにします。

Apps Script には、ブラウザの履歴にリンクされたウェブアプリの作成を支援する 2 つの非同期クライアントサイド JavaScript API が用意されています。

  • google.script.history では、ブラウザの履歴の変更に動的に対応するためのメソッドが提供されます。これには、状態（定義可能な単純なオブジェクト）をブラウザの履歴にプッシュする、履歴スタックの最上位の状態を置き換える、履歴の変更に対応するリスナー コールバック関数を設定するなどが含まれます。

  • google.script.url は、現在のページの URL パラメータと URL フラグメント（存在する場合）を取得する手段を提供します。

これらの履歴 API はウェブアプリでのみ使用できます。サイドバー、ダイアログ、アドオンではサポートされていません。この機能は、Google サイトに埋め込まれたウェブアプリでの使用もおすすめしません。