Modern UI for Office Work

Modern UI for Office Work @wtnabe Kanazawa.rb meetup #40 2015-12-12
(Sat) at IT-Plaza MUSASHI

お品書き今回やりたいこと材料まとめ

今回やりたいこと Select2 - The jQuery replacement for select boxes

いきなりDemo

背景

Excelは便利計算しなくても表形式のデータ管理に別シートでマスタ管理みたいなことも「⼊⼒規則」で <select> のようにも

便利だけれど、こういうのは困る

もう⼀度やりたいこと⼿でデータ⼊⼒するでも正規化したい「⼊⼒規則」は部分⼀致検索できない

それjQueryでできるよ

jQuery, jQuery-Select2 を組み込む jQuery-Select2 にデータを渡して fire $('select').select2({ data: [ {id:
1, text: '1'}, {id: 2, text: '2'} ] });

いやいやいやそれHTMLの世界の話ですよね

安⼼してください

Google Spreadsheetでできますよ

材料 Google Spreadsheet Google Apps Script UiオブジェクトとMenu HtmlService Sidebar remote
scriptの実⾏ https://select2.github.io/

Google Apps Scriptの概要は端折ります

Google Apps Scriptの詳細を⼀部紹介します

UiオブジェクトとMenu 独⾃メニューを追加できる新しいアクションを追加する基本 .getUi().createMenu(name) .addItem('title', funcName) .addToUi()

HtmlService Uiオブジェクトに変わる新しいUI組み⽴て⽤のオブジェクト（出⼒は別途） Webページとして Custom Dialogとして Sidebarとしてとして

var html = HtmlService .createTemplateFromFile(htmlName) .evaluate() .setSandboxMode(HtmlService.SandboxMode.IFRA .setTitle(title) .setWidth(200); SpreadsheetApp.getUi().showSidebar(html);

HtmlService PHPっぽい⽂法のテンプレート <?= ?> 式は書けるけど構造化データはセットできない（古式ゆかしい感じ） Google Apps ScriptはCSSなどのAssetは置けないので全部CDNで
ex) https://cdnjs.com

$('select').select2({data: [ <? getOptions().map(function(e, i) { ?> {id: '<?= e
?>', text: '<?= e ?>'}, <? }); ?> ] }); ややつらい…

Custom Dialog / Sidebar Modeless UI 値を返さない要ユーザーからの⼊⼒の扱いの設計

Remote Script & XHR google.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 !

Modern UI for Office Work

Modern UI for Office Work

wtnabe

More Decks by wtnabe

Other Decks in Programming

Featured

Transcript