Apps Scriptによるより高度な開発プロセス/More Advanced Development Process with Apps Script

Transcript

1. Apps Script
   によるより高度な
   開発プロセス
   html5j web platform 2016-10-19
   村上 雅彦 @fossamagna
   

   View Slide

2. 村上 雅彦 a.k.a @fossamagna
   株式会社 永和システムマネジメント 所属
   2
   

   View Slide

3. 今日のお話
   Apps Script
   による高度な開発プロセスの紹介(G
   Suite Developers Blog
   のおさらい)
   さらに高度な開発プロセスの紹介
   3
   

   View Slide

4. Apps Script
   による高度な開発プロセ
   スって？
   2015/12
   に G Suite Developers Blog (
   当時は
   Google Apps Developers Blog)
   で紹介された開発
   プロセス
   Google
   上のApps Script
   はランタイムとして利用す
   る
   コー
   ディングなどは開発者のマシン上で行う
   参考 : https://googledevjp.blogspot.jp/2016/01/apps-
   script.html
   4
   

   View Slide

5. 一言でいうと、Drive API
   Export / Import
   を利用した
   Apps Script
   のロー
   カル開発
   5
   

   View Slide

6. Drive API Export /Import
   Google Drive REST API
   で Apps Script
   のソー
   スコー
   ドをインポー
   ト・
   エクスポー
   トする機能。
   Google Drive
   上の Apps Script (.gs
   ファイル、.html
   ファイル)
   をロー
   カルマシンにエクスポー
   ト(
   ロー
   カ
   ルマシンからのインポー
   ト)
   が可能
   https://developers.google.com/apps-script/import-
   export
   node-google-apps-script , gas-manager
   を使えばコマン
   ド1
   つでエクスポー
   ト・
   インポー
   トが可能
   6
   

   View Slide

7. Drive API Export /Import (
   注意点1)
   スタンドアロー
   ンプロジェクトのみ可能
   SpreadSheet
   やDocs
   などのコンテナ付属のプロ
   ジェクトは不可
   SpreadSheet
   の独自関数などはコンテナ付属のプ
   ロジェクト必須なので対象外
   アプリのバー
   ジョン管理、Web
   アプリの公開、
   実
   行はできない
   Script Editor
   で実施する
   7
   

   View Slide

8. Drive API Export /Import (
   注意点2)
   JavaScript
   のコー
   ドのバリデー
   ションが実行され
   る。
   バリデー
   ションに引っかかると5xx
   エラー
   にな
   る。
   部分的なインポー
   ト・
   エクスポー
   トはできない
   プロジェクトのソー
   スは全てインポー
   ト・
   エク
   スポー
   ト
   8
   

   View Slide

9. いろいろ注意点があるけど
   Export/Import
   してロー
   カル
   開発することのメリットは？
   9
   

   View Slide

10. ロー
    カル開発でのメリット
    Git
    などでソー
    ス管理できる
    好みのエディタやIDE
    を利用できる
    Lint
    やminify
    などのツー
    ルが利用できる
    テストが実施しやすい
    10
    

    View Slide

11. とりあえず、
    ロー
    カルマシン
    にソー
    スコー
    ドを持って来れ
    ば、
    あとはこっちのもの！
    11
    

    View Slide

12. 実際にメリットを活用した一
    歩進んだ開発プロセスを紹介
    12
    

    View Slide

13. Apps Script
    でも require()
    関
    数を使おう
    13
    

    View Slide

14. require()
    とは
    CommonJS
    のモジュー
    ル機能。
    Node.js
    ならネイティブに利用可能
    Browserify
    やWebpack
    を利用することでブラウザ
    環境でも
    14
    

    View Slide

15. Apps Script
    でも Browserify
    を利用して require()
    を使って
    みよう!
    15
    

    View Slide

16. と、
    その前に
    16
    

    View Slide

17. Apps Script
    にも「
    ライブラリ」
    とい
    うモジュー
    ル機能がある
    https://developers.google.com/apps-
    script/guide_libraries
    17
    

    View Slide

18. Apps Script
    ネイティブのモジュー
    ル
    機能は ライブラリ
    Apps Script
    のプロジェクトを別のプロジェクトか
    ら利用する仕組み
    ライブラリ側は普通にコー
    ディング、
    あとは公開す
    るだけ
    利用する側は使いたいライブラリをScript Editor
    で
    ライブラリのプロジェクトキー
    を指定して利用す
    る
    利用時は利用側がライブラリに割り振ったオブジ
    ェクトに生やした形式で利用できる
    18
    

    View Slide

19. ライブラリの利用したコー
    ド例
    Project: LibA
    function sum() {
    return Array.prototype.slice.call(arguments)
    .reduce(function(previousValue, currentValue) {
    return previousValue + currentValue;
    });
    }
    Project: App
    function main() {
    var sum = LibA.sum(1, 2, 3);
    Logger.log(sum); // 6.0
    }
    19
    

    View Slide

20. ライブラリの問題点
    遅い
    別プロジェクトを読み込んで実行するので遅い
    公式サイトでトップで警告している
    管理が手動
    ライブラリの追加・
    削除はScript Editor
    のUI
    か
    らのみ可能
    ライブラリとアプリ側で何が共有されるかが複雑
    Script Properties
    はライブラリ側で作成したイン
    スタンスが全てのアプリで共有されるなど
    20
    

    View Slide

21. 一歩進んだ開発での解決策
    それが require()
    21
    

    View Slide

22. Apps Script
    での require()
    は
    Browserify + gasify
    で実現
    22
    

    View Slide

23. Browserify + gasify
    のポイント
    Browserify
    ならApps Script
    のライブラリに頼らず
    にモジュー
    ル機能を利用できる
    依存モジュー
    ルの管理もpackage.json
    で可能になる
    npm
    で公開されているもジュー
    ルが利用できる(
    使
    えるものは)
    Browserify
    だけではApp Script
    で実行可能なコー
    ド
    が出力できないので gasify
    と組み合わせて利用す
    る
    23
    

    View Slide

24. Apps Script
    で require()
    するサンプルコー
    ド
    app.js
    sum.js
    module.exports = function sum() {
    return Array.prototype.slice.call(arguments)
    .reduce(function(previousValue, currentValue) {
    return previousValue + currentValue;
    });
    };
    var sum = require('./sum');
    global.main = function () { // `global`
    オブジェクトに関数を代入する
    Logger.log(sum(1, 2, 3)); // 6.0
    };
    24
    

    View Slide

25. Apps Script
    向け browserify
    での ビルド方法
    次のコマンドを実行するだけ。
    $ browserify main.js -p gasify -o bundle.js
    ビルドは通常のJavaScript
    と同じように browserify
    を実行する。
    global
    オブジェクトのプロパティに代入された関
    数から関数宣言文を生成させるので、 gasify
    の指
    定を忘れずに。
    25
    

    View Slide

26. ビルドしたファイルは Drive API
    Export /Import
    でプロジェクトにイン
    ポー
    トすれば
    gas-manager , node-google-apps-script
    を使えばコマンド1
    つ
    でインポー
    ト可能
    26
    

    View Slide

27. これであなたも今日から
    require()
    し放題！
    27
    

    View Slide

28. require()
    でモジュー
    ル化でき
    たらテストもしやすい
    28
    

    View Slide

29. Apps Script
    での自動テスト
    29
    

    View Slide

30. Apps Script
    向けのテストフレー
    ムワ
    ー
    クの種類
    Node.js
    で実行するタイプ
    Apps Script
    固有のオブジェクトはモックで代用
    Apps Script
    として実行するタイプ
    Apps Script
    固有のオブジェクトは本物を利用
    30
    

    View Slide

31. 既存のテストフレー
    ムワー
    ク(
    ライブラ
    リ)
    Node.js
    で実行するタイプ
    gas-local
    Apps Script
    として実行するタイプ
    QUnit for Google Apps Script
    rajah
    gsunit
    gast
    31
    

    View Slide

32. CI
    でもテストできるの？
    32
    

    View Slide

33. Node.js
    で実行するタイプは
    モックを利用するので通常の Node.js
    で実行するテストと
    あまり違わない
    33
    

    View Slide

34. Apps Script
    として実行するタ
    イプのテストフレー
    ムワー
    ク
    はCI
    との連携が難しい
    既存のものはScriptEditor
    からやWeb
    アプリとして実行す
    ることが前提になっている
    34
    

    View Slide

35. 無いものは作ればいい(
    作った)
    gas-test (
    シンプルなテスト実行フレー
    ムワー
    ク)
    JSON, XML, Logger
    から選択して結果を出力可能
    gas-test-cli (gas-test
    を利用するためのCLI
    ツー
    ル)
    テストコー
    ドのビルド機能( gas-test
    のテストを
    実行して結果を返すコー
    ドでラップ)
    gas-test
    の実行機能(Execution API
    でテストコー
    ドを実行)
    gas-test
    を実行するために必要な認可のセットア
    ップ機能
    35
    

    View Slide

36. Apps Script
    のテストとCI
    の連携
    基本構成
    [CI Server] -> Execution API -> [Apps Script]
    Execution API
    を利用してCI
    サー
    バからApps Script
    のテストコー
    ドを実行する(Web
    アプリでは認証周
    りに問題が残る)
    実行結果をCI
    サー
    バで評価してテストの成功可否
    を判断
    xUnit
    フォー
    マット、JSON
    フォー
    マットをCI
    サ
    ー
    バに返す。CI
    サー
    バ側でレスポンス内容を評
    価。 36
    

    View Slide

37. gas-test
    サンプルプロジェクト
    https://github.com/fossamagna/gas-test-
    sample
    37
    

    View Slide

38. 高度な開発のオススメ構成
    Drive API Export/Import
    を利用してロー
    カルのソ
    ー
    スをデプロイする
    ソー
    スはGit
    等で管理、
    ロー
    カルのソー
    スは
    Browserify + gasify + (Babel)
    でビルドする
    開発用、
    自動テスト用、
    プロダクションの各環境
    毎にプロジェクト(Drive
    上のApps Script)
    を作成す
    る
    gas-test
    でCI
    サー
    バと連携させて自動テストを実行
    する
    master
    ブランチにpush
    されたたらCI
    でビルドして
    自動デプロイも 38
    

    View Slide

39. Apps Script
    で高度な開発プロセス
    を始めてみよう！
    39
    

    View Slide