ウェブアプリ

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

以下の要件を満たしていれば、スタンドアロン スクリプトアプリケーションにバインドされたスクリプト 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

たとえば、次のように usernameage などのパラメータを 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 ダイアログの Deployed URL も必要です。

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

  1. ウェブアプリを追加する Google サイトのページを開きます。
  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 サイトに埋め込まれたウェブアプリで使用することもおすすめしません。