アップススクリプトでウェブアプリを作成する

アップススクリプトでウェブアプリを作成する

事務所内や顧問先のお客様と共有するツールはウェブアプリにしてしまうのが効果的です。このページでは基本的なウェブアプリの作成から公開までの方法を掲載しています。

ウェブアプリのサンプルコード

アップススクリプトでウェブアプリを作成するには、doGetもしくはdoPostという名前の関数を作成して、HtmlOutputまたはTextOutputを返します。

doGetはウェブアプリにGetでアクセスした場合、doPostはウェブアプリにPostでアクセスした場合に実行される関数です。

HtmlOutputとTextOutputの違いは返されるデータがHTMLデータなのか単なるテキストデータなのかです。ユーザーインターフェースを表示したいのであればHtmlOutputが、APIとして使用したいのであればTextOutputが適しています。

HtmlOutputは、HtmlServiceから作成します。文字列から作成することもできますが、独立したHTMLファイルから作成することもできます。サンプルでは後者の方法を採用しています。TextOutputは、ContentServiceを利用して文字列から作成します。

gsファイル

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile("html");
}

function doPost(e) {
  var str = JSON.stringify(e);
  return ContentService.createTextOutput(str);
}

doGetではユーザーがGetアクセスした場合に、下記HTMLファイルからHtmlOutputを作成してHTMLデータを返します。doPostではユーザーがPostアクセスした場合に、パラメータeを文字列に変換してTextOutputとして返します。

パラメータeはJSON形式のデータとして与えられます。GetのクエリパラメータやPostの送信データをウェブアプリで受け取る場合に使用します。

HTMLファイル

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <form action="https://script.google.com/macros/s/AKfycbybeR9bVTokwPBfsFUpdW6aQa8GxXg-ESmNyDci3jmfJGbk3MNN/exec" target="_blank" method="post">
      <input type="text" name="text" value="Hello World!">
      <input type="submit">
    </form>
  </body>
</html>

Getアクセス時に返すHTMLデータサンプルです。テキストインプットとサブミットボタンを含むフォームを設置しています。

フォームはサンプル自身にPostを送信します。Postで送信するパラメータはtextのみです。

ウェブアプリの公開手順

ウェブアプリの公開と実行権限

作成したウェブアプリは公開することで実行できるようになります。公開するには、「公開>ウェブアプリケーションとして導入...」を選択します。

プロジェクト バージョンは、新しく作成する場合は「新規作成」、過去に作成したバージョンを公開する場合は「そのバージョン」を選択します。(同時に2つのバージョンを公開することはできません。)

次のユーザーとしてアプリケーションを実行は、「自分」か「アクセスしているユーザー」を選択できます。自分を選択した場合、アプリケーションにアクセスできるユーザーは、「自分だけ」、「全員」、「全員(匿名ユーザーを含む)」から選択できます。アクセスしているユーザーを選択した場合、アプリケーションにアクセスできるユーザーは「自分だけ」、「全員」から選択できます。

これはアプリケーションを実行するためにはグーグルアカウントが必要でること、今回は使用していませんがスプレッドシートやカレンダーのデータにアクセスする場合に誰のデータにアクセスするかに関係します。

今回のサンプルウェブアプリであれば次のような意味を持ちます。

  • 自分:自分だけ → 自分だけが実行できる(ログイン必要)
  • 自分:全員 → 誰でも実行できる(ログイン必要)
  • 自分:(匿名ユーザーを含む) → 誰でも実行できる(ログイン不要)
  • アクセスしているユーザー:自分だけ → 自分だけが実行できる(ログイン必要)
  • アクセスしているユーザー:全員 → 誰でも実行できる(ログイン必要)

ウェブアプリのURL

ウェブアプリを実行するURLは2つあります。1つは最後がexec、もう1つは最後がdevです。

execはバージョン管理されたプロジェクトが実行されます。そのためプロジェクトバージョンを選択して公開しているバージョンのプログラムが実行されます。

devはバージョンを新規作成していなくても、現在のソースコードの状態に応じたプログラムが実行されます。開発中はこちらのURLを使用します。

今回のサンプルの実行URLです。匿名で実行できます。

ウェブアプリの実行結果

テキストインプットと送信ボタン

ウェブアプリにGetアクセスすると図のようなテキストインプットと送信ボタンが表示されます。このまま送信した場合、次のようなテキストが表示されます。

{"parameter":{"text":"Hello World!"},"contextPath":"","contentLength":19,"queryString":null,"parameters":{"text":["Hello World!"]},"postData":{"length":19,"type":"application/x-www-form-urlencoded","contents":"text=Hello+World%21","name":"postData"}}

ここで表示されたパラメータがウェブアプリで使用できるパラメータです。これを見て分かる通りウェブアプリでHeaderは使用できません。またHtmlOutputに外部ファイルでjavascriptを読み込んでも動作しない点は注意が必要です。