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

Modern UI for Office Work

wtnabe
December 12, 2015

Modern UI for Office Work

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

wtnabe

December 12, 2015
Tweet

More Decks by wtnabe

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

  4. いきなりDemo

    View Slide

  5. 背景

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  9. それjQueryでできるよ

    View Slide

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

    View Slide

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

    View Slide

  12. 安⼼してください

    View Slide

  13. Google Spreadsheetで
    できますよ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  24. XHRでremoteのfunction nameとvalueが送られる
    [
    "myFunc",
    "[\"\u3044\u308d\u306f\"]",
    null,
    [0],
    null,
    true
    ]
    remoteではSpreadsheetのアクティブなセルに⼊⼒するなど

    View Slide

  25. もう⼀度Demo

    View Slide

  26. まとめ
    GoogleApps は HTML で UI を追加できる
    Custom UI は Modeless なので⼊⼒をど
    う扱うのか考える必要アリ
    google.script.run だけで remote の
    script を呼び出してデータを渡せる

    View Slide

  27. まとめ
    GoogleApps は Web のノウハウが活きる
    しかも楽に

    View Slide

  28. ハックしがいある

    View Slide

  29. Enjoy Happy Hacking !

    View Slide