Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Modern UI for Office Work

088b1b43ff5dd64aa0f000da9e9da777?s=47 wtnabe
December 12, 2015

Modern UI for Office Work

Google Apps Script の HtmlService を使って Modern UI を追加する

088b1b43ff5dd64aa0f000da9e9da777?s=128

wtnabe

December 12, 2015
Tweet

Transcript

  1. Modern UI for Office Work @wtnabe Kanazawa.rb meetup #40 2015-12-12

    (Sat) at IT-Plaza MUSASHI
  2. お品書き 今回やりたいこと 材料 まとめ

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

  4. いきなりDemo

  5. 背景

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

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

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

  9. それjQueryでできるよ

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

    1, text: '1'}, {id: 2, text: '2'} ] });
  11. いやいやいや それHTMLの世界の話ですよね

  12. 安⼼してください

  13. Google Spreadsheetで できますよ

  14. 材料 Google Spreadsheet Google Apps Script UiオブジェクトとMenu HtmlService Sidebar remote

    scriptの実⾏ https://select2.github.io/
  15. Google Apps Scriptの概要は 端折ります

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

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

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

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

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

    ex) https://cdnjs.com
  21. $('select').select2({data: [ <? getOptions().map(function(e, i) { ?> {id: '<?= e

    ?>', text: '<?= e ?>'}, <? }); ?> ] }); ややつらい…
  22. Custom Dialog / Sidebar Modeless UI 値を返さない 要ユーザーからの⼊⼒の扱いの設計

  23. Remote Script & XHR google.script.run $(selector).on('click', function() { google.script.run.myFunc(value); });

  24. XHRでremoteのfunction nameとvalueが送られる [ "myFunc", "[\"\u3044\u308d\u306f\"]", null, [0], null, true ]

    remoteではSpreadsheetのアクティブなセルに⼊⼒するなど
  25. もう⼀度Demo

  26. まとめ GoogleApps は HTML で UI を追加できる Custom UI は

    Modeless なので⼊⼒をど う扱うのか考える必要アリ google.script.run だけで remote の script を呼び出してデータを渡せる
  27. まとめ GoogleApps は Web のノウハウが活きる しかも楽に

  28. ハックしがいある

  29. Enjoy Happy Hacking !