HANT blog

リアルタイム動画アンケートサービスHANTのブログ

ECMA2015でGoogle Apps Scriptを開発する

こんにちは、エンジニアの芦澤です。みなさん日々の業務、自動化してますか。

弊社のサービスHANTでは、SEOの確認の為Google検索での順位を手動で取得してスプレッドシートに登録しています。 ですが、検索するキーワードが増えてくると流石に毎日手動でキーワード毎に順位を取得するなんて時間がもったいなくなってきます。そこで自動化です。

社内のサーバーにスクリプトを置いてcronで定期実行してもよかったのですが、今回はリソースを内部に保持しないようGoogle Apps Scriptを選択しました。

※Googleデベロッパーブログに次の記事が出ていたのを思い出したのでローカルで開発してコマンドラインからGoogle Driveにアップしようという軽い気持ちです。

Google DriveからGoogle Apps Scriptを新規作成

f:id:Ashizawa:20160902160450p:plain

とりあえず、言われるままGoogle Apps Scriptを作成してみます。

f:id:Ashizawa:20160902160451p:plain

初期状態はmyFunctionが定義されているだけのコード.gsという名のファイルのみですね。

Google Console準備

どうやらローカルにGASをダウンロードする為にはGoogle Driveと認証が必要で証明書を用意する必要があるみたいです。

f:id:Ashizawa:20160902160453p:plain

Google Apps Scriptから移動できるようなのでメニューを選んで移動します。

f:id:Ashizawa:20160902160454p:plain

これは今開いているプロジェクトの名前を決める必要があるみたいです。

f:id:Ashizawa:20160902160457p:plain

プロジェクトの作成が済むと上記の画面が現れるので、Developers Console を表示をクリックして移動します。

f:id:Ashizawa:20160902160455p:plain

Developers Consoleに遷移したら認証情報を選択しOAuthクライアントIDをクリックし遷移します。

f:id:Ashizawa:20160902160456p:plain

クライアントIDの作成でその他を選び、プロジェクトの名前を付けます。

f:id:Ashizawa:20160902160500p:plain

これで認証用の情報が作成されます。

開発準備

次にローカルで作業する為の環境を整えましょう。

f:id:Ashizawa:20160902160501p:plain

まずはDevelopers Consoleでさきほど作成したクライアントIDのJSONファイルをダウンロードします。

そしてローカルで開発する際に一番重要なnode-google-apps-scriptのインストールをおこないます。 個人的にはグローバルに入れるほど重要度が高いツールではないのでカレントディレクトリで作成していくことにします。 ひとまず必要な物をインストールするとします。

% mkdir -p ~/work/gas-sample
% cd ~/work/gas-sample
% npm init
% npm install --save-dev node-google-apps-script babel-cli babel-preset-latest browserify babelify gasify

node-google-apps-scriptのインストールが完了するとgappsコマンドが使えるようになります。 さきほどダウンロードしたJSONファイルを用いてコマンドラインから認証します。

% $(npm bin)/gapps auth ~/client_secret_CLIENT_SECRET.json

Please visit the following url in your browser (you\'ll only have to do this once): https://accounts.google.com/o/oauth2/auth?access_type...

コマンドを叩くとURLが出てくるので、表示されたURLをブラウザで開きます。無事に認証が終わると次の文章がターミナル上に表示されます。

Successfully Authenticated with Google Drive!

次にGoogle Apps ScriptのURLにあるProject IDをコピーして控えましょう。

f:id:Ashizawa:20160902160459p:plain

gappsの引数に先ほどコピーしたProject IDを渡し初期化とスクリプトのダウンロードをおこないます。

% $(npm bin)/gapps init PROJECT_ID

初期化が終わった状態のカレントディレクトリは次のような構成になっているはずです。

.
├─ gapps.config.json
├─ node_modules
├─ package.json
└─ src
  └─ コード.js

コード.jsをエディタで開いて変更してみましょう。

% $(npm bin)/gapps push

変更したらpushコマンドをたたきブラウザ上のgasが変更されていれば準備は完了です。

ECMA2015を書いてみる

今回ECMA2015をES5へ変換するにはBabelとBrowserifyを使用します。 まずはファイルを作成してみます。

% echo '{ "presets": ["latest"] }' > .babelrc
% mkdir lib
% touch lib/main.js
% touch lib/SampleClass.js

.babelrcはBabelの設定ファイルです。これがないとトランスパイル出来ないので気を付けて下さい。 lib/main.jsは次のような簡単な内容で用意しておきます。現時点ではサンプルですので後ほど好きな内容に書き換えて下さい。

import {SampleClass} from './SampleClass';

global.myFunction = function() {
  const sample = new SampleClass();
  sample.log();
}

lib/main.jsはGoogle Apps Scriptのエンドポイントとらえると理解しやすいです。 function myFunction()だった箇所をglobal.myFunction = function()にすることでbrowserifyを使ってes5に変換してもアクセスできるようにしておきます。

npmgasifyをインストールしましたがgasifyを使用するとbrowserifyを使ってglobal付きトランスパイルができるようになります。 gasifyを使用しない場合Google Apps Scriptでエラーが出てしまい関数を実行することができない為注意して下さい。

export class SampleClass {
  constructor() {
    return this;
  }

  log() {
    Logger.log('SampleClass!');
  }
}

メインのクラスは一旦サンプルとして上記のシンプルな構成にしておきます。

% $(npm bin)/browserify -t babelify -p gasify -p licensify ./lib/main.js -o ./src/コード.js

browserifyでトランスパイルしてgaaps initでダウンロードしたファイルを上書きします。 これでアップロードするファイルが用意できました。

アップロードしてみる

% $(npm bin)/gapps push

pushでsrcの中身をGoogle Apps Scriptにアップロードします。ブラウザで開いているコード.jsが変更されているか確認してみましょう。

f:id:Ashizawa:20160902160503p:plain

上記のようにトランスパイルされたJavaScriptが表示されたでしょうか。

f:id:Ashizawa:20160902160505p:plain

関数を選択して実行してみましょう。実行したらログを開いて出力されていれば成功です。

まとめ

ポイントをまとめると次のようになります。

  • Google Apps Scriptで処理を用意する
  • Google Consoleで認証する
  • node-google-apps-scriptを使ってローカルにGoogle Apps Scriptを用意する
  • ローカルでの開発環境を整える
  • 実際にローカル環境でECMA2015を使って開発する
  • gappsコマンドでGoogle Apps Scriptにアップロードする

今回はGoogle Apps Scriptをローカルで開発するための環境設定について手順をまとめてみました。いかがでしたでしょうか。

この記事が少しでもみなさんのお役に立てれば幸いです。