ウェブアプリ

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

スタンドアロン スクリプトとアプリケーションにバインドされたスクリプト 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] も必要です。

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

  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 サイトに埋め込まれたウェブアプリでの使用もおすすめしません。