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