ウェブアプリ

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

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

ウェブアプリの要件

スクリプトがウェブアプリとして公開されるには、次の要件を満たしている必要があります。

リクエスト パラメータ

ユーザーがアプリにアクセスするか、プログラムがアプリに 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

常に値 &postt;postData"

postData

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

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

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

function doGet(e) {
  var params = JSON.stringify(e);
  return HtmlService.createHtmlOutput(params);
}

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

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

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

スクリプトをウェブアプリとしてデプロイするには、次の手順を行います。

  1. スクリプト プロジェクトの右上にある [Deploy] > [New deployment] をクリックします。
  2. [タイプを選択] の横にある [デプロイタイプを有効にする] [> ウェブアプリ] をクリックします。
  3. [Deployment configuration] の下に、ウェブアプリに関する情報を入力します。
  4. [デプロイ] をクリックします。

ウェブアプリの URL は、アクセス権がある限り、アプリを使用するユーザーと共有することもできます。

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

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

  1. スクリプト プロジェクトの右上にある [Deploy > Test deploy] をクリックします。
  2. [タイプを選択] の横で [デプロイタイプを有効にする] [ウェブアプリ] をクリックします。
  3. ウェブアプリの URL の下の [コピー] をクリックします。
  4. ブラウザに URL を貼り付けて、ウェブアプリをテストします。

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

権限

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

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

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

また、以前の Google サイト新しいバージョンの Google サイトの両方でウェブアプリを埋め込むこともできます。

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

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

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

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

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

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

スクリプトを従来の Google サイトバインドする方法は、スクリプトを Google ドキュメントまたはスプレッドシートにバインドする場合とほぼ同じです。バインドされたスクリプトを作成するには、サイトにアクセスして歯車アイコン 設定 をクリックし、[サイトを管理] を選択します。[サイトを管理] ページで、左側のナビゲーションにある [Apps Scripts]、[新しいスクリプトを追加] の順にクリックします。これにより、Apps Script エディタで新しいスクリプトが開き、ウェブアプリをコーディングしてデプロイできます。

ウェブアプリをページに埋め込むこともできます。ウェブアプリをサイトにバインドすることも、URL を含むウェブアプリを使用することもできます。Google サイトのページにウェブアプリを埋め込む手順は次のとおりです。

  1. 編集権限がある既存のサイトを開くか、新しいサイトを作成します。
  2. ウェブアプリを埋め込むサイトのページに移動します。
  3. 編集アイコン、[Insert > Google Apps Script] の順にクリックします。
  4. ウェブアプリを表すスクリプトをリストから選択します。ウェブアプリがこのサイトにバインドされていない場合は、代わりにウェブアプリの URL を貼り付けることができます。
  5. [選択] ボタンをクリックし、次のダイアログで必要なオプションを選択して、[保存] をクリックします。
  6. 変更内容をページに保存すると、[ウェブアプリ] サイトにウェブアプリが埋め込まれていることがわかります。

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

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

Apps Script には、ブラウザの履歴にリンクされたウェブアプリの作成に役立つクライアント側の JavaScript API が 2 つあります。

  • google.script.history には、ブラウザの履歴の変更に対する動的レスポンスを可能にするメソッドが用意されています。これには、ブラウザの履歴への状態(定義可能なシンプルなオブジェクト)のプッシュ、履歴スタックの最上位の状態の切り替え、履歴変更に対応するリスナー コールバック関数の設定などがあります。

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

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