GAS（Google Apps Script）でHelloWorldしてみた（②Webアプリケーション編）

10668 ワード
新人プログラマ応援 GoogleAppsScript HelloWorld GoogleAppsScript テキストリンク

1．はじめに

前回は、GASでバッチを作ったのですが、今回は、GASでWebアプリケーションを作ってみたいと思います。

前回の記事：
「GAS（Google Apps Script）でHelloWorldしてみた（①バッチプログラム編）」

Webアプリケーションというのは、HTTPによる通信を行うもので、主にGETとPOSTが用いられますよね。その両方を実装してみます。
GASの細かな操作は前回の記事で書いたので、今回はその辺、端折ります。

2．HTTP GETでHelloWorld

GASでHTTPのGETリクエストを受け付けて、「HelloWorld」の文字列を返すプログラムを作ってみます。

2.1．単純なGETリクエストでHelloWorld

前回のプロジェクトにファイルを追加して、
ファイルの追加は、
「ファイル」→「New」→「スクリプトファイル」 で追加できます。

以下のコードを書いてみます。

HttpGetTest.gs
function doGet(e) {
    return ContentService.createTextOutput("HelloWorld!!");
}

↓こんな感じ

↓ 「公開」→「ウェブアプリケーションとして導入」を選択

↓の設定で、

①「Current web app URL」：に書かれているURLが公開後にアクセス可能なURLになります。
②「Project version」は、このWebアプリケーションのバージョンです。

③「Execute the app as」：このGASを実行するアカウントです。
・「Me（メールアドレス）」を選択した場合には誰からのアクセスでも必ず、GASの作者ということになる。
・「User accessing the web app」を選択すると、アクセスした人自体のアカウントで実行されます（アクセス時、Googleアカウントへのログインが必須になる。）。

一般的なWEBアプリケーションのように作るのであれば、「Me（メールアドレス）」を選択しておきます。

④「Who has access to the app」：誰がアクセス可能かを指定します。
・「Only myselef」を選択すると、自分だけがアクセス可能
・「全ユーザー」を選択すると、Googleアカウントを持つ全ユーザーがアクセス可能
・「Anyone, even anonymous」を選択すると、誰でもアクセス可能

一般的なWEBアプリケーションのように作るのであれば、「Anyone, even anonymous」を選択します。

（※ここ、知らないと、若干ハマりポイントになりますので注意しますしょう。）

あえて、別ブラウザでアクセスしてみます。
↓のように表示されればOKです。

2.2．パラメーター付きGETリクエストでHelloWorld

以下のように書き直します。

HttpGetTest.gs
function doGet(e) {

  var name = e.parameter.name;
  var age = e.parameter.age;

  var html = "HelloWorld!!<BR><BR>";
  html += "Name：" + name + "<BR>";
  html += "Age：" + age + "<BR>";

  return HtmlService.createHtmlOutput(html);
}

前の同様に、公開すればいいのですが、更新のときは、バージョンを「New」にしておかないと、上書きされませんでした。

「更新」ボタンをクリックして、パラメーターを付けてアクセスします。
[例]https://script.google.com/macros/s/[ID]/exec?name=TAROU&age=30

このように表示されれば想定通りです。

3．HTTP POSTでHelloWorld

3.1．POSTリクエストでHelloWorld

Postで送られてくるパラメータの取り方は、GETリクエストと

HttpGetTest.gs
function doPost(e) {

  var name = e.parameter.name;
  var age = e.parameter.age;

  var html = "HelloWorld!!<BR><BR>";
  html += "Name：" + name + "<BR>";
  html += "Age：" + age + "<BR>";

  return HtmlService.createHtmlOutput(html);
}

3.2．POSTリクエストを発行して試してみる

GETリクエストの場合はブラウザのアドレスバーに入力するだけで試すことができましたが、POSTリクエストの場合は、少々工夫が必要になります。

ご自分のデスクトップ上に、以下のようなPOSTデータを送信するHTMLファイル「test.html」を作成します。

test.html
<!DOCTYPE html>
<head>
  <meta charset="shift_jis">
  <title>doPostテスト</title>
</head>
<body>
  ■doPostテスト
  <form method="post" action="https://script.google.com/macros/s/[ID]/exec">
    <label>名前：<input type="text" name="name"></label><BR>
    <label>年齢 <input type="text" name="age"></label><BR>
    <input type="submit" value="送信"><BR>
  </form>
</body>
</html>

ブラウザで開くとこんな感じになります。

名前、年齢を適当に入力して、「送信」ボタンをクリックすると、↓のように表示されます。

もし、POSTで動いているのか、GETで動いているのか判別付けたいという場合には、ログを仕込むなどしてみてください。

4．まとめ

GASを使うと、サーバの準備なしに簡単なアプリケーションサーバも作れてしまうんですね。
個人的にちょっとしたプログラムを提供する場合などには便利ですね。