ウェブアプリ

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

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

ウェブアプリの要件

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

• doGet(e) または doPost(e) 関数が含まれています。
• この関数は、HTML サービス HtmlOutput オブジェクトまたは コンテンツ サービス TextOutput オブジェクトを返します。

リクエスト パラメータ

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

たとえば、次のように username や age などのパラメータを 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
}

警告: 次のパラメータ名はシステムによって予約されているため、URL パラメータや POST 本文では使用しないでください。

• c
• sid

これらのパラメータを使用すると、次の HTTP 405 エラーが返される場合があります。「リクエストされたファイルは存在しません」というエラー メッセージが表示されます。可能であれば、別のパラメータ名を使用するようにスクリプトを更新してください。

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

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

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

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

注: あるドメインにデプロイされたウェブアプリは、オーナー権限が別のドメインの共有ドライブまたはアカウントに変更されると、機能しなくなります。この問題は、新しいオーナーまたは共同編集者が新しいドメインにウェブアプリを再デプロイすることで解決できます。あるいは、ウェブアプリを元のドメインに戻すと、再デプロイせずにそのドメインでウェブアプリが再び機能し始めます。

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

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

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

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

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

警告: デベロッパーとして実行するウェブアプリをデプロイする場合は、ScriptApp.getOAuthToken() を介して取得した OAuth トークンを処理する際に十分な注意を払う必要があります。これらのトークンは他のアプリケーションにデータへのアクセス権を付与できます。クライアントに送信しないでください。

権限

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

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

警告: 不正行為を防止するために、Apps Script では、新規ユーザーがユーザーとして実行するウェブアプリを承認できる頻度に制限が設けられています。これらの上限は、公開アカウントが Google Workspace ドメインの一部であるかどうかによって異なります。

注: 共有ドライブを使用すると、ウェブアプリで共同作業を行えます。共有のウェブアプリをデプロイするときに、「そのまま実行」を選択すると、ウェブアプリはデプロイされたユーザーの権限で実行されます（スクリプトのオーナーはないため）。

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