32
26

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ローカルでgas編集・更新するための環境設定

Last updated at Posted at 2018-06-30

動機

普段はweb屋さんをしていますが、この仕事をしていると、

  • 「googleスプレッドシートでこんな感じに作って」
  • 「googleフォームをこんな風にしたい」

なんていう社内からのリクエストが飛んできたりします。
大体はサクッと作れたりするのですが、今回そこそこの量のコードを書かないといけない仕事を依頼されたときに私は思いました。

「スクリプトエディタが使いづらい。。。」

※デフォルトのこれです
スクリーンショット 2018-06-30 14.34.19.png

目的

google apps scriptのベースはjavascriptなので、理想は、普段どおりvimを使うこと。
ただ、スクリプトエディタは更新と同時に実行したりデバッグしたり出来ます。
スプレッドシートなどを確認する都合などもあるので、その部分はブラウザ上で出来ればいいかなと思いました。
なので、今回は、

  • ローカル環境でgasを編集する
  • 編集した内容を簡単に更新する

ための環境を作ります。

環境

  • macOS High Sierra 10.13.5
  • node v10.5.0
    (v0.12.x 以上であれば良いようです。)

手順

1. インストールとOAuth承認

ホームディレクトリでコマンド叩く

$ npm install -g node-google-apps-script

Google Developers Consoleからプロジェクト作成。
スクリーンショット 2018-06-30 13.49.05.png

プロジェクトが出来たら、APIを有効化。
スクリーンショット 2018-06-30 13.57.11.png

Google Drive APIを検索して選択。
スクリーンショット 2018-06-30 13.51.05.png

有効にする。
スクリーンショット 2018-06-30 13.51.26.png

ダッシュボードに戻るので、「承認情報」から、承認情報を作成。
「OAuth クライアント ID」を選択。
スクリーンショット 2018-06-30 13.52.45.png

サービス名を求められたので設定。
スクリーンショット 2018-06-30 13.52.59.png

スクリーンショット 2018-06-30 13.53.19.png

アプリケーションの種類は「その他」を選択。
スクリーンショット 2018-06-30 13.53.54.png

クライアントIDとシークレットが表示される。
スクリーンショット 2018-06-30 13.54.05.png

先ほど作成したIDが表示されるので、右の編集アイコンをクリック。
スクリーンショット 2018-06-30 13.54.52.png

jsonファイルをダウンロード。
スクリーンショット 2018-06-30 13.55.05.png

jsonファイルを、ダウンロードしたフォルダからホームディレクトリに移動。

そのままコマンドを打って、認証。

$ gapps auth ./client_secret_<client_secret_key>.json

正常に読み込まれると、

Please visit the following url in your browser (you'll only have to do this once): https://accounts.google...

と表示されるので、表示されているURLに移動して、承認する。

Successfully Authenticated with Google Drive!

という画面が出たら成功。

2. gasプロジェクトの作成とローカルでの編集

任意の場所にgasファイルを作成する。
スクリーンショット 2018-06-30 14.42.52.png

作ったファイルのURLからプロジェクトIDをコピーして下記のコマンドを打つ。

$ gapps init <Project ID>

すると、ローカルにファイルが出来る。
(画像はvim上の画面)
スクリーンショット 2018-06-30 14.54.21.png

3. 更新

ファイルを編集・保存したら、一度vimを抜けて、コマンドを打つ。

$ gapps upload

これだけ。

感想・その他

下記のリンクを参考にさせていただいたのですが、とっても良いですね。
開発速度がエグいくらい違います。
本当にこういった情報の共有には助けられます。
感謝感謝ですね。

ちなみに、アップロードされるのはjsファイルとhtmlファイルのみだそうです。
また、ブラウザのスクリプトエディタ上での更新は反映されないので、もしブラウザ上で更新してしまった場合は、自動生成された

  • gapps.config.json
  • src(ディレクトリ)

を削除してしまえば、もう一度$ gapps initが使えます。

参考

Google Apps Scriptの開発をモダンに行う方法

32
26
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
32
26

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?