ウェブアプリ

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

スタンドアロン スクリプトとアプリケーションにバインドされたスクリプト 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. [Deploy] をクリックします。

ウェブアプリの URL は、アプリを使用するユーザーと共有することができます（アクセス権を付与されている場合）。

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

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

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

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

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

権限

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

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

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

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

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

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

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

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

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

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

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

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

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