back
Uiによる簡易インターフェイスの作成 (5/5)
■より複雑なインターフェイスを作成するshowDialog/shoSlider
alertやpromptよりももっと複雑なインターフェイスを作りたい、というような場合には、HTMLやUiInstanceを使った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を表示できるようになるでしょう。
・ダイアログを表示する
《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を表示できるようになるでしょう。
(by. SYODA-Tuyano.)
※リストが表示されない場合
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>
| << 前へ |