前回の「Google Apps ScriptによるWebアプリケーション開発」では、入力した名前をpostで特定のURLに送信して、アプリケーション側で受け取って処理して・・・といった形で実装しました。

この方法だと、一つのスクリプト(前回の例だとコード.gs)に全てのリクエストが集中して、actionというリクエストパラメーターによって、if・・・elseで場合分けをして、次の画面遷移先を決めるといった実装になり、あまりきれいではありません。

そういう問題を解決するためかどうかは知りませんが、Google Apps Scriptには、Java ScriptからGoogle Apps Scriptの特定の関数が実行できる「google.script.run」というオブジェクトが用意されています。こちらを利用して、Ajax的に(というかAjaxなんですが)ページを全部クライアントサイドで書き換えて、擬似的に画面遷移を実現してみようと思います。実現する機能は、前回の「Google Apps ScriptによるWebアプリケーション開発」と同じです。

以下のコードをスクリプトエディタで作成します。

■main.gs
ユーザーが一番初めにアクセスするスクリプトです。index.htmlに遷移するだけの機能を持ったスクリプトです。

function doGet() {

  return HtmlService.createHtmlOutputFromFile('index')
          .setSandboxMode(HtmlService.SandboxMode.IFRAME);

}

■index.html
main.gsから遷移したページです。一番最初に表示するページです。以降の画面遷移は、このページ内の<div id="html">~</div>をGoogle Apps Scritpから書き換えることによって実現します。

<html>
  <head>
    <title>テストアプリケーション</title>
  
    <script>
      function transitionPage(resultHtml) {
        var outputDiv = document.getElementById('html');
        outputDiv.innerHTML = resultHtml;
      }
            
      function onClick(form) {
        google.script.run.withSuccessHandler(transitionPage).getMyName(form);
      }

    </script>
  </head>

  <body>
    <div id="html">

      <form id="myForm">
        <h1>あなたの名前を入力してください。</h1><br>
        <input type="text" name="name">
        <input type="button" value="送信" onClick='onClick(this.parentNode)'>
      </form>

    </div>
  </body>

</html>

■function.gs
index.htmlの名前入力フォームから入力した内容を受け取り、result.htmlの内容を取得して返すスクリプトです。

function getMyName(form) {

  var output = HtmlService.createTemplateFromFile('result');
  output.name = form['name'];
  return output.evaluate().getContent();

}

■result.html
入力した名前を表示するページです。

<div id="html">
  <h1>あなたの名前は<?= name ?>です。</h1>
</div>

処理の流れは以下のとおりになります。

  1. ユーザーはGoogle Apps Scriptを公開した時に生成されたURLにアクセスします。

  2. main.gsのdoGet関数が呼ばれて、index.htmlに遷移します。このdoGet関数は、単純にindex.htmlに遷移するだけの関数です。

  3. index.htmlに遷移して、名前の入力画面が表示されます。名前を入力して送信をクリックすると、送信ボタン押下時に定義されたonClick関数が呼ばれます。

  4. onClick関数の中に定義されている以下の関数が呼ばれます。

    google.script.run.withSuccessHandler(transitionPage).getMyName(form);
    

    これは、Google Apps Scriptのfunction.gsファイルで定義したgetMyName関数を呼び、getMyName関数で記述されている処理が成功したらJava ScriptのtransitionPage関数を呼ぶといった処理になります。transitionPage関数に当たる部分をコールバック関数と呼びます。以降、再び説明にうつります。

  5. 4のgoogle.script.run~が呼ばれると、まずgetMyName関数が呼ばれます。引数のformは、onClick関数で指定されたthis.parentNodeつまり<form id="myForm">~</form>のオブジェクト全体になります。

  6. getMyName関数では、引数として渡されたformオブジェクトに格納されたnameを読み取り、入力された名前を取得します。そして、result.htmlに記載されているHTMLの内容を戻り値として返します。

  7. 次にindex.html内に記載されているtransitionPage関数が呼ばれます。この関数の引数は、6で戻り値として返されたresult.htmlに記載されているHTMLの内容になります。

  8. transitionPage関数では、<div id="html">~</div>の内容を取得して、引数として渡されたHTMLの内容に書き換えています。つまり、この処理でindex.htmlにもともと記載されていた入力フォームが消えて、名前を表示する画面に入れ替わるということになります。