Google Apps ScriptによるWebアプリケーションの開発方法について記載します。

ここでは以下の様なシンプルなWebアプリケーションを開発するものとします。

1.名前を入力して「送信」ボタンをクリックする。

2.1で入力した名前が、次の画面で表示される。

まず、以下のURLにアクセスします。

https://script.google.com/

以下の画面が表示されるので、「ウェブアプリケーション」をクリックします。

スクリプトエディタが起動します。画面左側にある「コード.gs」「Index.html」などが並んでいますが、「コード.gs」以外全て削除します。

コード.gsの部分を以下のコードに置き換えます。

■コード.gs

function doGet(e) {・・・(1)

var action = e.parameter['action'];・・・(2)
var output;

// 名前入力画面を表示
if (action == 'regist') {

    output = HtmlService.createTemplateFromFile('regist.html');・・・(3)

// 名前表示画面を表示
} else if (action == 'result'){

    var output = HtmlService.createTemplateFromFile('result.html');

    output.name = e.parameter['name']; ・・・(4)

}

return output.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME); ・・・(5)

}
function doPost(e) { ・・・(6)
    return doGet(e);
}

これは、Google Apps ScriptのURLが呼ばれた時に、一番最初に実行されるスクリプトになります。

(1)のdoGet関数は、GET(URLの後ろにパラメーターでつけるやつ)でアクセスした時に呼ばれる関数です。

(6)のdpPost関数はPOST(HTMLから<form post=”・・・” action=”・・・”>でsubmitされたとき)したときに呼ばれる関数です。入力されたパラメータは、引数eに格納されます。ここでは、postで来たリクエストも、そのままdoGet関数に渡しています。

(2)はPOST及びGETで入力されたパラメータを受け取るコードになります。ここではactionに画面遷移先を指定しています。パラメーターactionにregistが指定されると名前入力画面、resultだと名前表示画面に遷移します。

(3)は指定した画面に遷移するためのおまじないになります。最終的には、(5)で output.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME)をreturnすると、指定したHTMLに遷移します。

(4)は、名前表示画面のHTMLに渡したいパラメーターを指定しています。

次に、名前入力画面のHTMLです。

■regist.html

<!DOCTYPE html>
<html>
    <head>
        <title>テストアプリケーション</title>
    </head>
    <body>
        <form method="post" action="https://script.google.com/a/macros/contoso.com/s/XXXXXXXX">
            <h1>あなたの名前を入力してください。</h1><br>
            <input type="text" name="name">
            <input type="submit" value="送信">
            <input type="hidden" name="action" value="result">

        </form>
    </body>
</html>

actionの部分に指定するURLはアプリケーションを公開するまでわからないので、仮のURLを入力しておいて下さい。

次に、名前表示画面です。

■result.html

<!DOCTYPE html>
<html>
    <head>
        <title>テストアプリケーション</title>
    </head>
    <body>
        <h1>あなたの名前は、<?= name ?>です。</h1>
    </body>
</html>

<?= name ?>の部分ですが、これは、コード.gsで(4)で渡されたパラメータを受け取る処理になります。こちらには、名前入力画面で入力した名前が格納されています。

ここまでできたら、画面上部メニューから「ファイル」→「保存」の順にクリックして下さい。以下の画面が表示されるので、プロジェクト名(なんでもよいです)を入力して、「OK」をクリックして下さい。

次に、画面上部メニューから「公開」→「ウェブアプリケーションとして導入」をクリックして下さい。以下のように入力して、「導入」をクリックして下さい。

以下の画面が表示されます。「現在のウェブアプリケーションのURL」をコピーして、「OK」をクリックして下さい。

先ほどコピーしたURLを「regist.html」のactionの部分に入力して下さい。

先ほどの手順に従って、再度アプリケーションを公開して下さい。

最後に、先ほどコピーした「現在のウェブアプリケーションのURL」の末尾にaction=registというパラメーターをつけて下さい。以下のようになります。

https://script.google.com/a/macros/contoso.com/s/XXXXXXXX?action=regist

上記のURLをブラウザに入力して、実行するとアプリケーションが起動します。
これで完了です。

ちなみに、コードを修正するたびにWebアプリケーションの公開をするのは面倒です。そこで、公開する前にテスト実行する方法があります。もう一度、上部メニューから「公開」→「ウェブアプリケーションとして導入」をクリックして下さい。以下の画面が表示されます。

「ウェブ アプリケーションで最新のコードをテストします。」というのが表示されていると思います。「最新のコード」をクリックして下さい。

すると、公開する前にテスト実行することが出来ます。このときのURLをブックマークしておけば、コードを修正したらいつでもすぐに実行出来ます。