Modern UI for Office Work

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

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