Webアプリケーション開発とHtml Service (7/7)

■ミニ掲示板を作成する

残るは、メッセージを投稿するための仕組みづくりです。Google Apps ScriptのWebアプリケーションは、基本的にAjaxでサーバーとやり取りをします。したがって、フォームを用意してPOST送信して処理……といったやり方は、GAS的ではありません。あくまでJavaScriptを利用してサーバーと遣り取りをするのです。

では、どのように行うのか。これが、実は意外とややこしいのです。先ほど、スクリプトレットからサーバー側のスクリプトにある関数を呼び出すということをおこないましたが、これはそのまま関数呼び出すだけで非常に簡単でした。が、JavaScriptの場合、そう単純ではありません。

JavaScriptから、Google Apps Script側にアクセスをするために、「google.script.run」というオブジェクトが用意されています。これはGASのオブジェクトではなく、クライアント側（つまりブラウザ側）のJavaScriptのスクリプトで利用するものです。このオブジェクトに用意されているメソッドを使ってサーバーとやり取りをするのです。

google.script.run.関数( 引数 );

こんな具合に実行すると、サーバー側に用意された関数を呼び出すことができます。ただし、「変数 = google.script.run.……」なんて具合にすれば実行結果を受け取れるか？というと、これはできません。サーバーとのやり取りは、Ajax（非同期通信）であることを思い出してください。

非同期ですから、実行したら直ぐに結果が貰えるわけではありません。ではどうするのかというと、コールバック関数を用意するのです。

google.script.run.withSuccessHandler( コールバック ).呼び出す関数(○○);

このように、「withSuccessHandler」というメソッドを使います。これはgoogle.script.run自身を返すため、メソッドチェーンを使った記述が可能です。引数に関数を指定することで、関数の呼び出しが完了したら指定のコールバック関数が呼び出されるようになります。

このwithSuccessHandlerは、Ajax通信が成功したときに呼び出されるものですが、同様に、通信に失敗したときに呼び出される「withFailureHandler」という関数も用意されています。

●フォーム送信機能の実装
では、このgoogle.script.run.withSuccessHandlerを利用して、フォームの送信処理を組み込んでみましょう。下のリスト欄に、index.htmlとサーバー側スクリプトの修正を掲載しておきました。今度はアクセスすると、入力フィールドとボタンのあるフォームが表示されます。ここでテキストを書いてボタンを押すと、それがサーバーに送信され、その下に表示されるメッセージのリストに追加されます。

ここでは、いくつもの要素が呼び出しあって処理が行われていきますので流れを整理しておきましょう。

1. フォームの送信
フォームに用意したボタンのonclickに、実行する処理を用意してあります。これは以下のようになっていますね。

google.script.run.withSuccessHandler(onSuccess).processForm(this.parentNode)

processFormというサーバー側の関数を呼び出し、成功すればコールバック関数onSuccessが呼び出され事後処理を行う、という形になっています。processFormでは、ボタンのparentNode（つまり、<form>タグのDOMオブジェクト）が引数として渡されています。

2. processFormの処理
フォームのボタンから呼び出されるサーバー側の関数processFormでは、送信されたフォームのテキストとScriptDbに保存されているオブジェクトの数を使ってmsgdataオブジェクトを作り保存しています。

  var db = ScriptDb.getMyDb();
  var n = db.query({type:'msgdata'}).getSize();
  var obj = {type:'msgdata',msg:form.text1,num:n};
  db.save(obj);

db.queryの後に「getSize」というものが呼び出されていますが、これはqueryで取得されたオブジェクトの数を返すメソッドです。それから、保存するオブジェクトを用意するところで、msgの値に「msg:form.text1」と指定してありますね。processFormを呼び出す際、引数でフォームが指定されていました。これにより、フォームの内容がまとめられ引数に渡されていたのです。このオブジェクト内のtext1プロパティに、id="text1"のコントロールの値が収められている、というわけです。

  var result = db.query({type:'msgdata'}).sortBy('num', db.DESCENDING, db.NUMERIC);
  var str = "";
  while(result.hasNext()){
    str = str + '<li>' + result.next().msg + '</li>';
  }
  return str;

関数の後半は、queryでオブジェクトを取得し、そこから順に値を取り出して<li>タグをテキストとして作成していく処理です。こうしてリストの内容ができあがったら、これをreturnします。

3. onSuccessの処理
最後に、通信完了後に呼び出されるコールバック関数の処理です。このonSuccessでは、引数にprocessFormからの返り値が渡されますので、これをそのまま<ul>タグ内に設定するだけです。

      var list = document.getElementById("list");
      list.innerHTML = res;

これでリストの表示が更新されました。google.script.runのメソッドとコールバックの仕組みがわかれば、クライアントのJavaScriptからGoogle Apps Scriptのサーバーにアクセスすることは割と簡単にできるようになります。

Google Apps Scriptも、これでWebアプリケーション構築のための仕組みがかなり整って来ました。ぼちぼち、本格的にサーバー開発に使うことを考えてみてもいい頃かも知れませんね。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※index.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" 
  content="text/html; charset=utf-8">
  <title>Sample jsp</title>
  <style>
    h1 {font-size:16pt; background:#AAFFAA;padding:5px;}
    p {margin:10px;}
  </style>
  <script>
    function onSuccess(res){
      var list = document.getElementById("list");
      list.innerHTML = res;
     }
  </script>
</head>
<body>
  <h1>Sample jsp page</h1>
  <form id='myForm' onsubmit="javascript:return false;">
    <input type='text' name='text1'>
    <input type='button' value='click' onclick='google.script.run.withSuccessHandler(onSuccess).processForm(this.parentNode)'>
  </form>
  <hr>
  <ul id="list">
<?
var res = getMsgs();
while(res.hasNext()){
  output.append('<li>' + res.next().msg + '</li>');
}
?>
  </ul>
</body>
</html>


※スクリプト

function doGet() {
  var output = HtmlService.createTemplateFromFile('index');
  return output.evaluate();
}

function getMsgs(){
  var db = ScriptDb.getMyDb();
  var result = db.query({type:'msgdata'}).sortBy('num', db.DESCENDING, db.NUMERIC);
  return result;
}

function processForm(form){
  var db = ScriptDb.getMyDb();
  var n = db.query({type:'msgdata'}).getSize();
  var obj = {type:'msgdata',msg:form.text1,num:n};
  db.save(obj);
  var result = db.query({type:'msgdata'}).sortBy('num', db.DESCENDING, db.NUMERIC);
  var str = "";
  while(result.hasNext()){
    str = str + '<li>' + result.next().msg + '</li>';
  }
  return str;
}

<< 前へ　

記事のリストに戻る

PC Site G+ mail