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

Transcript

1. Apps Script によるより高度な 開発プロセス html5j web platform 2016-10-19 村上 雅彦 @fossamagna
2. 村上 雅彦 a.k.a @fossamagna 株式会社 永和システムマネジメント 所属 2
3. 今日のお話 Apps Script による高度な開発プロセスの紹介(G Suite Developers Blog のおさらい) さらに高度な開発プロセスの紹介 3
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
5. 一言でいうと、Drive API Export / Import を利用した Apps Script のロー カル開発 5
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
7. Drive API Export /Import ( 注意点1) スタンドアロー ンプロジェクトのみ可能 SpreadSheet やDocs などのコンテナ付属のプロ ジェクトは不可 SpreadSheet の独自関数などはコンテナ付属のプ ロジェクト必須なので対象外 アプリのバー ジョン管理、Web アプリの公開、 実 行はできない Script Editor で実施する 7
8. Drive API Export /Import ( 注意点2) JavaScript のコー ドのバリデー ションが実行され る。 バリデー ションに引っかかると5xx エラー にな る。 部分的なインポー ト・ エクスポー トはできない プロジェクトのソー スは全てインポー ト・ エク スポー ト 8
9. いろいろ注意点があるけど Export/Import してロー カル 開発することのメリットは？ 9
10. ロー カル開発でのメリット Git などでソー ス管理できる 好みのエディタやIDE を利用できる Lint やminify などのツー ルが利用できる テストが実施しやすい 10
11. とりあえず、 ロー カルマシン にソー スコー ドを持って来れ ば、 あとはこっちのもの！ 11
12. 実際にメリットを活用した一 歩進んだ開発プロセスを紹介 12
13. Apps Script でも require() 関 数を使おう 13
14. require() とは CommonJS のモジュー ル機能。 Node.js ならネイティブに利用可能 Browserify やWebpack を利用することでブラウザ 環境でも 14
15. Apps Script でも Browserify を利用して require() を使って みよう! 15
16. と、 その前に 16
17. Apps Script にも「 ライブラリ」 とい うモジュー ル機能がある https://developers.google.com/apps- script/guide_libraries 17
18. Apps Script ネイティブのモジュー ル 機能は ライブラリ Apps Script のプロジェクトを別のプロジェクトか ら利用する仕組み ライブラリ側は普通にコー ディング、 あとは公開す るだけ 利用する側は使いたいライブラリをScript Editor で ライブラリのプロジェクトキー を指定して利用す る 利用時は利用側がライブラリに割り振ったオブジ ェクトに生やした形式で利用できる 18
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
20. ライブラリの問題点 遅い 別プロジェクトを読み込んで実行するので遅い 公式サイトでトップで警告している 管理が手動 ライブラリの追加・ 削除はScript Editor のUI か らのみ可能 ライブラリとアプリ側で何が共有されるかが複雑 Script Properties はライブラリ側で作成したイン スタンスが全てのアプリで共有されるなど 20
21. 一歩進んだ開発での解決策 それが require() 21
22. Apps Script での require() は Browserify + gasify で実現 22
23. Browserify + gasify のポイント Browserify ならApps Script のライブラリに頼らず にモジュー ル機能を利用できる 依存モジュー ルの管理もpackage.json で可能になる npm で公開されているもジュー ルが利用できる( 使 えるものは) Browserify だけではApp Script で実行可能なコー ド が出力できないので gasify と組み合わせて利用す る 23
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
25. Apps Script 向け browserify での ビルド方法 次のコマンドを実行するだけ。 $ browserify main.js -p gasify -o bundle.js ビルドは通常のJavaScript と同じように browserify を実行する。 global オブジェクトのプロパティに代入された関 数から関数宣言文を生成させるので、 gasify の指 定を忘れずに。 25
26. ビルドしたファイルは Drive API Export /Import でプロジェクトにイン ポー トすれば gas-manager , node-google-apps-script を使えばコマンド1 つ でインポー ト可能 26
27. これであなたも今日から require() し放題！ 27
28. require() でモジュー ル化でき たらテストもしやすい 28
29. Apps Script での自動テスト 29
30. Apps Script 向けのテストフレー ムワ ー クの種類 Node.js で実行するタイプ Apps Script 固有のオブジェクトはモックで代用 Apps Script として実行するタイプ Apps Script 固有のオブジェクトは本物を利用 30
31. 既存のテストフレー ムワー ク( ライブラ リ) Node.js で実行するタイプ gas-local Apps Script として実行するタイプ QUnit for Google Apps Script rajah gsunit gast 31
32. CI でもテストできるの？ 32
33. Node.js で実行するタイプは モックを利用するので通常の Node.js で実行するテストと あまり違わない 33
34. Apps Script として実行するタ イプのテストフレー ムワー ク はCI との連携が難しい 既存のものはScriptEditor からやWeb アプリとして実行す ることが前提になっている 34
35. 無いものは作ればいい( 作った) gas-test ( シンプルなテスト実行フレー ムワー ク) JSON, XML, Logger から選択して結果を出力可能 gas-test-cli (gas-test を利用するためのCLI ツー ル) テストコー ドのビルド機能( gas-test のテストを 実行して結果を返すコー ドでラップ) gas-test の実行機能(Execution API でテストコー ドを実行) gas-test を実行するために必要な認可のセットア ップ機能 35
36. Apps Script のテストとCI の連携 基本構成 [CI Server] -> Execution API -> [Apps Script] Execution API を利用してCI サー バからApps Script のテストコー ドを実行する(Web アプリでは認証周 りに問題が残る) 実行結果をCI サー バで評価してテストの成功可否 を判断 xUnit フォー マット、JSON フォー マットをCI サ ー バに返す。CI サー バ側でレスポンス内容を評 価。 36
37. gas-test サンプルプロジェクト https://github.com/fossamagna/gas-test- sample 37
38. 高度な開発のオススメ構成 Drive API Export/Import を利用してロー カルのソ ー スをデプロイする ソー スはGit 等で管理、 ロー カルのソー スは Browserify + gasify + (Babel) でビルドする 開発用、 自動テスト用、 プロダクションの各環境 毎にプロジェクト(Drive 上のApps Script) を作成す る gas-test でCI サー バと連携させて自動テストを実行 する master ブランチにpush されたたらCI でビルドして 自動デプロイも 38
39. Apps Script で高度な開発プロセス を始めてみよう！ 39