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

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

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

MURAKAMI Masahiko

October 18, 2016
Tweet

More Decks by MURAKAMI Masahiko

Other Decks in Programming

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