CA Reward

Tech Blog

Tech Blogトップに戻る

Google Apps Script を ES2015 で開発

2016.12.28

  • このエントリーをはてなブックマークに追加
  • Pocket
いいちゃん
いいちゃんエンジニア

こんにちは、エンジニアのいいのです。

今年も残すところあと少し。 大掃除を兼ねてGoogle Apps Script(以下GAS)にあるコードをES2015で書き換えていこうと思います。

今回はローカルでの開発環境作りからES2015化、GASへのアップロード方法までをご紹介致します。

やること

  • GASプロジェクト作成
  • ローカル環境構築
  • ES2015化
  • GASにアップロード

GASプロジェクト作成

GASでプロジェクトを作成します。

既にプロジェクトがあればここはスルーしてください。

Google Driveの任意の場所でGASのファイルを作成します。

GAS

APIキー作成

作成したGASプロジェクトを開きます。

プロジェクト名とコード名もこの時に付けておきましょう。

コード名はデフォルトだとコード.gsになっています。

このままにすると、ローカルで開発するファイル名がコード.jsになってしまいます。

では、APIキーを作成しましょう。

api_key

Developer Consoleを表示 を押して、GoogleAPIsを開きます。

popup

認証情報を作成します。

04.png

認証情報はOAuth クライアント IDを選択し、アプリケーションの種類その他です。

名前はTestAppScriptとでもしておきましょう。

05.png

APIキーができたら、JSONファイルをダウンロードします。

ここからはローカルでの作業になります。

ローカル環境構築

node-google-apps-script をインストール

ローカル環境でGASのダウンロード/アップロード操作をするために、node-google-apps-scriptをインストールしましょう。

GASプロジェクト構築

ローカルの任意の場所にプロジェクト用フォルダを作成します。

作成後、フォルダに移動して、先程GASからダウンロードしたJSONファイルを置きます。

client_secret_.jsonこんな感じのJSONファイルです。

JSONファイルを置いたらGoogleDriveの認証を通します。

表示されたURLをブラウザで開きます。

Successfully Authenticated with Google Drive! と表示されれば成功です。

GASプロジェクトのプロパティに記載されているスクリプト IDをコピーして

を実行します。

すると、ローカルにGASのコードがダウンロードされてきます。

おめでとうございます。

これでローカルでの編集が可能となりました。

自分の好きなエディターでガシガシ開発していきましょう。

ついでにGitでの管理もおすすめします。

ES2015化

ここからES2015化していきます。

Gulpを使ってES2015で書いたコードをES5にトランスパイルしてGASプロジェクトにアップロードできるようにします。

せっかくローカルで開発できるのでテストコードも書いていきます。

今回、私が使用したnpmパッケージです。

ローカルのpackage.jsonに反映してnpm installしましょう。

作業ディレクトリ作成

srcディレクトリはgappsがアップロードするディレクトリなので、

src_es2015という作業ディレクトリを作成し、ここにES2015でコードを書いていきます。

src_es2015に書いたコードをBrowserify,Babelify,Gasifyを通してES5化したコードを src ディレクトリに作成します。

コード作成

サンプルコードをES2015で書いてみましょう。

src_es2015/sample.js

src_es2015/lib/utils.js

合わせてテストコードも書いておきましょう。

test/utils_spec.js

gulpfile.babel.js

では、Gulpを実行してみましょう。

まずはテストです。

テストを通過していますね。

次はトランスパイルです。

src/sample.jsを見ると トランスパイルされたコードが反映されているはずです。

ではアップロードしてみましょう。

ブラウザでGASのプロジェクトを見てみると先ほどのsample.gsが反映されているはずです。

実行できるか確認してみましょう。

06.png 07.png 08.png

GAS上で実行することができました。

あとは既存のスクリプトに反映していけばOKですね!

まとめ

お疲れさまでした。

良いお年を。