Google Apps Script の HtmlService を使って Modern UI を追加する
Modern UIfor Office Work@wtnabeKanazawa.rb meetup #402015-12-12 (Sat) at IT-Plaza MUSASHI
View Slide
お品書き今回やりたいこと材料まとめ
今回やりたいことSelect2 - The jQuery replacement for select boxes
いきなりDemo
背景
Excelは便利計算しなくても表形式のデータ管理に別シートでマスタ管理みたいなことも「⼊⼒規則」で のようにも
便利だけれど、こういうのは困る
もう⼀度やりたいこと⼿でデータ⼊⼒するでも正規化したい「⼊⼒規則」は部分⼀致検索できない
それjQueryでできるよ
jQuery, jQuery-Select2 を組み込むjQuery-Select2 にデータを渡して fire$('select').select2({data: [{id: 1, text: '1'},{id: 2, text: '2'}]});
いやいやいやそれHTMLの世界の話ですよね
安⼼してください
Google Spreadsheetでできますよ
材料Google SpreadsheetGoogle Apps ScriptUiオブジェクトとMenuHtmlServiceSidebarremote scriptの実⾏https://select2.github.io/
Google Apps Scriptの概要は端折ります
Google Apps Scriptの詳細を⼀部紹介します
UiオブジェクトとMenu独⾃メニューを追加できる新しいアクションを追加する基本.getUi().createMenu(name).addItem('title', funcName).addToUi()
HtmlServiceUiオブジェクトに変わる新しいUI組み⽴て⽤のオブジェクト(出⼒は別途)WebページとしてCustom DialogとしてSidebarとしてとして
var html = HtmlService.createTemplateFromFile(htmlName).evaluate().setSandboxMode(HtmlService.SandboxMode.IFRA.setTitle(title).setWidth(200);SpreadsheetApp.getUi().showSidebar(html);
HtmlServicePHPっぽい⽂法のテンプレート = ?>式は書けるけど構造化データはセットできない(古式ゆかしい感じ)Google Apps ScriptはCSSなどのAssetは置けないので全部CDNでex) https://cdnjs.com
$('select').select2({data: [ getOptions().map(function(e, i) { ?>{id: '= e ?>', text: '= e ?>'}, }); ?>]});ややつらい…
Custom Dialog / SidebarModeless UI値を返さない要ユーザーからの⼊⼒の扱いの設計
Remote Script & XHRgoogle.script.run$(selector).on('click', function() {google.script.run.myFunc(value);});
XHRでremoteのfunction nameとvalueが送られる["myFunc","[\"\u3044\u308d\u306f\"]",null,[0],null,true]remoteではSpreadsheetのアクティブなセルに⼊⼒するなど
もう⼀度Demo
まとめGoogleApps は HTML で UI を追加できるCustom UI は Modeless なので⼊⼒をどう扱うのか考える必要アリgoogle.script.run だけで remote のscript を呼び出してデータを渡せる
まとめGoogleApps は Web のノウハウが活きるしかも楽に
ハックしがいある
Enjoy Happy Hacking !