libro
www.tuyano.com
Google Apps Scriptプログラミング [中級編]

Uiによる簡易インターフェイスの作成 (5/5)

作成:2013-06-30 11:49
更新:2013-06-30 11:49

■より複雑なインターフェイスを作成するshowDialog/shoSlider

alertやpromptよりももっと複雑なインターフェイスを作りたい、というような場合には、HTMLやUiInstanceを使ったGUIを作成して表示するという方法があります。非常にユニークなのは、ダイアログとして表示する他に、サイドバーとして表示させる方法も用意されていることでしょう。


・ダイアログを表示する
《Ui》.showDialog(《GUI部品》);

・サイドバーを表示する
《Ui》.showSidebar(《GUI部品》);

メソッド自体は非常に単純です。引数に用意する「GUI部品」というのがどういうものか、がポイントになります。これは、「UiInstance」や「HtmlService」といったものが使われます。これらについては一応これまでの記事で説明してありますが、簡単にまとめておきましょう。


・UiInstanceについて
これは、UiApp.createApplicationで作成する、Google Apps ScriptのUI部品を組み合わせて作るGUIです。詳細は以下に説明しています。
http://libro.tuyano.com/index3?id=647004

・HtmlServiceについて
HTMLは、HtmlServiceを使ってHtmlのテキストやファイルを読み込み利用するためのものです。詳細は以下に説明しています。
http://libro.tuyano.com/index3?id=926001&page=3


これらを使ってGUIを組み立て、それをダイアログやサイドバーとして表示すればいいわけです。注意すべきは、これらのメソッドは単に表示をするだけのものであり、その中でのインタラクティブな操作（サーバー側とやり取りするなど）については、HtmlServiceおよびUiInstanceで実装する必要がある、という点です。

以下に、HtmlServiceを利用した簡単なサンプルを挙げておきます。ここではプロジェクト内に「sample.html」というファイルを作成して、これをダイアログとして呼び出しています。表示されるHTMLページにはフォームが１つあり、これでサーバー側とやり取りをしています。

HtmlServiceで表示されるクライアント側HTMLとサーバー側であるGoogle Apps Scriptのスクリプトの間では、google.script.run.withSuccessHandlerというものを利用してやり取りをすることができます。このあたりについては、上記にあげたHtmlServiceの説明記事で触れてありますのでそちらを参考にしてください。これらの使い方がわかれば、showDialog/showSidebarでかなり本格的に作りこんだGUIを表示できるようになるでしょう。


※プログラムリストが表示されない場合

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

●プログラム・リスト●

※Google Apps Script側のスクリプト

function showDlog(){
  var html = HtmlService.createHtmlOutputFromFile("sample.html")
  .setTitle("Sample HTML")
  .setWidth(400)
  .setHeight(400);
  DocumentApp.getUi().showDialog(html);
}

function processForm(form){
  Logger.log(form);
  var str = form.text1
  return "あなたは、" + str + "と送信しました。";
}


※「sample.html」ファイルの内容

<html>
<head>
<script>
function onClickBtn(){
google.script.run.withSuccessHandler(onSuccess)
    .processForm(document.querySelector('#form1'));
}
function onSuccess(res){
var msg = document.querySelector("#msg");
msg.textContent = res;
}
</script>
</head>
<body>
<h1>sample dialog</h1>
<p id="msg">何か送信して。</p>
<form id='form1' onsubmit="javascript:return false;">
<input type='text' name='text1'>
<input type='button' value='click' onclick='onClickBtn();'>
</form>
</body>
</html>
※関連コンテンツ

「Google Apps Scriptプログラミング [中級編]」に戻る