Google Apps Scriptの新しい開発画面(IDE)が12月にリリースされたものの、なぜか完全リリースが延長されて、1月末までに順次リリースに変更され、ようやく自分の開発画面も新しいものにバージョンアップしました。そこで、今回の新しい開発画面がどのように変更になったのかをまとめてみようと思います。

新しい機能も加えられている反面、削られてるものもあったりするので、実際に開発をすすめる上でのポイントをまとめています。ベースとなっているのは、VSCodeでも採用されているMonaco Editorという事です。

図:これまでの古臭いIDEから随分と見た目が変わった

新しく変更された部分

レイアウト部分

一番大きな変更はこれまでは、メニューに集約されていた主要な機能は、サイドバーに集約された点。また、サイドバーのgsやhtmlファイルですが、V8対応で問題になっていたファイルの順番の変更ができるようになっています。また、ライブラリの追加やGoogle APIの参照などもサイドバー集約されているので、一意で確認できるようになっています。

さらにトリガーや実行数、プロジェクトの設定などはアイコンのサイドバーに集約。実行ログに関しては、VBEのイミディエイトペインのように画面下部にログ結果が出るようになり、以前よりも遥かに使いやすくなりました。

図:スクリプトプロパティもここに集約すれば良いのに・・・

ライブラリの追加

サイドバーに集約されたライブラリ一覧。+アイコンをクリックして、ライブラリのスクリプトIDを入れて利用します。旧来から使えていたプロジェクトキーは利用不可能です。他のウェブサービスを利用する際によく利用する、OAuth2.0 Library for Google Apps Scriptを入れてみました。

スクリプトID:1B7FSrk5Zi6L1rSxxTDgDEUsPzlukDsi4KGuTMorsTQHhGBzBkMun4iDF

スクリプトIDを入れて、検索をし、バージョンを指定(通常は最新版を指定)、コードで使うID(接頭子となる文字列)を選んで追加ボタンを押すだ(このあたりはこれまでと同じ)

このライブラリ設定は元になるスプレッドシートをコピーした場合、コピー先にも設定されているので再設定は不要です。

図:ライブラリ追加画面

自作ライブラリの版を更新する

これまで自作ライブラリの場合、版を更新してスクリプトIDを公開すればよかったのですが、今回の新IDEでは版を管理するという機能が消滅し、デプロイにすべて統一されています。つまり手順が変わっているのです。ライブラリは版管理が肝要なので、外部にスクリプトIDを公開したり、また社内で利用する場合でも、コードを追加・編集した場合には以下の手順で更新が必要です。

  1. 初めてリリースする場合は、右上のデプロイをクリックして、新しいデプロイをクリック
  2. 種類の選択にて、ライブラリを選択
  3. 左サイドバーに出てくる「ライブラリ」を必ずクリックしましょう。
  4. 説明文を入れて、アクセス権限を設定します。
  5. デプロイをクリックする
  6. これで、Version1がリリースされます。再度版を重ねる場合には、右上のデプロイをクリックして、デプロイを管理を開く
  7. プロジェクトの設定を開く
  8. スクリプトIDがあるのでこれを公開する(一度リリースするとIDは変わらないです)

このスクリプトIDを利用する場合は、前項にあるライブラリの追加の手順で追加し、リリースされてる版を確認して設定が必要です。

図:デプロイしないとライブラリは使えない

APIの参照

Google Apps Scriptから利用するGoogleの各種API。特によく利用するのはDrive APIですが、これがないとGASでサポートされていないようなGoogle Driveの操作が出来ません。但し現在はまだ、Drive APIなどはv2までで、v3の利用はOAuth2認証のコードやUrlfetchAppで自前で実装が必要です。

ライブラリ同様に、サービスの+アイコンをクリックして、APIを選び、バージョンを指定(通常は最新版を指定)、コードで使うID(接頭子となる文字列)、追加ボタンをクリックします。

このサービス設定は元になるスプレッドシートをコピーした場合、コピー先にも設定されているので再設定は不要です。

図:Google APIの利用で必須です

実行ログの出力

実行ログはこれまでメニューからいちいち開いて確認していました。console.logやLogger.logどちらも下部に表示される実行ログに出るようになりました。また、以前から問題視されていた「ログが出るまで時間がかかり過ぎる」問題も修正されています。

但し、忘れがちなのですが、一度実行ボタンを押して「認証」をしてからでないと、関数を選んで実行してもログは出てきません。stackdriverloggingはこれまで通りです。

また、特徴としてエラーコード内のリンクをクリックするとエラー発生場所までジャンプしてくれます。これはありがたいです。GASのデバッグのし辛さが1個解消されました。

図:実行ログがすぐ確認できるようになった

図:エラー発生場所にジャンプできる

デバッグ

デバッグ機能も強化されていますが使うためには、V8ランタイムを使用しなければなりません。V8ランタイム使用はサイドバーの歯車をクリックしてChrome V8 ランタイムを有効にするをチェック入れればOKです。

オンにしたら、コードの行番号の横をクリックするとブレークポイントをセット出来ます。これで実行するとデバッグ開始。ステップインで一個ずつブレークポイントを移動しながらの確認や、変数の中身をチェックしながらの実行。これでまた一つ、GASのデバッグのし辛さが解消されました。

図:ブレークポイントやステップインの活用がしやすくなった

スクリプトトリガー

サイドバーに集約されたスクリプトトリガー。トリガー追加画面はこれまでの画面と変わりません。スクリプトダッシュボードにあるようなトリガー一覧で確認できるようになっています。

旧エディタにあった「全部のトリガー」のような意味不明なものは消えています。そのプロジェクトで使ってるトリガーだけが一覧表示されています。トリガーは時計のアイコンがそれになるので、クリックするだけで表示されます。

図:一意に確認できる

プロジェクトの移動

Google Apps Script標準で利用は出来ないGoogle Cloud Platformの機能を使いたい場合、プロジェクトの移動が必要です。GCP側のプロジェクトの番号を割り当てて紐付けが必要になります。この作業もサイドバーの設定に集約されています。プロジェクト変更手順は以下の通り。

  1. サイドバーの歯車アイコンをクリック
  2. プロジェクトの設定の一番下の「プロジェクトを変更」をクリックする
  3. 「こちら」にリンクがあるので、クリックしてGCPの画面へ移動する
  4. GCP画面上部の▼をクリックして、作っておいたGCPプロジェクトの一覧を開く
  5. 選択元は自身の組織(ドメイン)を選んでおくこと
  6. 対象となるプロジェクトをクリックする
  7. メイン画面の「プロジェクト情報」にあるプロジェクト番号を控えておく
  8. GASの2.の画面に戻って、7.の番号を入れプロジェクトを設定ボタンをクリック
  9. これで移動完了。GCPの各種API類を利用することができるようになります。

この紐付けは元になるスプレッドシートなどをコピーした場合、コピー先のシートは紐付けされていないので、再度設定が必要になります。

図:GCP側プロジェクト一覧

図:プロジェクト移動画面

デプロイ

ウェブアプリケーションとして公開であったり、ライブラリとして公開、スプレッドシートアドオンAppsScript APIとして公開(Web API)を利用する場合の機能が一箇所に集約されて、右上のデプロイボタンとなりました。今回は最も良く利用するウェブアプリケーションとして公開をやってみようと思います。

  1. デプロイボタンをクリックする
  2. 新しいデプロイをクリック
  3. ダイアログが出るので、種類の選択をクリックする
  4. ウェブアプリを選択
  5. 説明文やウェブアプリの実行権限、アクセス範囲を設定し、デプロイをクリックする
  6. ウェブアプリのURL(末尾がexecのURL)が表示されるので、これにアクセスするとウェブアプリが開かれる
  7. テスト用の末尾がdevのURLにアクセスしたい場合は、2.にて「デプロイをテスト」を実行。同じくURLが取得出来ます。
  8. 新しい版でウェブアプリを再度デプロイする場合は、2.〜5.を普通に実行するだけ。過去の版は自動的にアーカイブされます。これまでのように、わざわざnewをクリックしてからのデプロイは必要ありません
  9. 逆に過去の版を再デプロイしたい場合、アーカイブにあるリリースを選択して、デプロイをクリックする

※過去の版を削除したりデプロイを停止する機能が旧版にはあったのですが、新IDE上ではこれらが見当たりません。

※但しデプロイできるのはスクリプトのオーナーだけですので注意(通常はファイルのオーナーとイコール)

図:デプロイ画面が一箇所に集約された

絵文字が使えるようになった

これまでも、コード内で絵文字といったサロゲートペアな文字列(Unicode6)は使えていたと言えば使えていたのですが、削除すると?みたいなのが残り、もう一度削除しないと消えないといった具合におかしな表記でした。

しかし、新IDEではこれが正式に対応。普通に使えるようになっています。絵文字と入力して変換するもよし、macOSならばCommand+Control+Spaceで一覧を出して選ぶも良しです。(WindowsならばWinキー+.で表示)

図:絵文字はとっても便利

新しく追加された機能

ショートカットキー

F1キーをクリックすると、Google Apps Scriptのショートカットキー一覧が閲覧できるようになりました。そんなに頻繁には使いませんが、あのショートカットキーなんだっけで探し回る必要はありません。

図:ショートカットキー自体も増えてるみたい

コードの折りたたみ

新IDEからはVSCodeのような、関数などのコードを折りたたむ機能が追加されました。関数横にカーソルを持っていくと「>」という記号が出るので、クリックすると折りたたまれ、再度クリックすると再度展開されるようになります。非常に多くの関数などをひとつのgsファイルに記述していると、コードが長々となってメンテナンス性が落ちるので、この機能は非常に有用です。

図:関数の中身を非表示にできる

コード補完と定義の参照

これまでもあった、スクリプトのコード補完(VSでいうところのインテリセンス)が強化されています。もちろん自分で作ったライブラリのJSDocを用意しておけば、引数やメソッドを一覧で表示できるようになっています。

また、今回の機能強化で右クリックメニューが強化されており、例えば用意しておいたグローバル変数を選択し、右クリックメニューで参照へ移動を選ぶとその変数を利用してるコードへジャンプできるようになっています(同様に定義や関数も参照することも可能になっています)。

また、インデントがまちまちな状態を、ドキュメントのフォーマットで一律のインデントに修正してくれたり、他にも見慣れない機能追加がされています。

※一方で検索画面にて検索して、対象の文字列がどのGSファイルにあるのか串刺しで検索ができなくなってるので、参照や定義・関数以外を調べるのはちょっと不便になった。

図:JSDocはきちんと用意しておいたほうが良いです

図:変数参照で利用してる関数を調べられます。

その他

スクリプトプロパティ画面が削除された

リリース直後から問題視されていたのが、「スクリプトプロパティの確認画面がなくなった」点です。設定した各種スクリプトプロパティの値を画面上から一意で確認できないため、何がセットされてしまっているのか開発上もまた、その後のメンテナンス上もちょっと困ったことになっています。版の管理も削除されてしまっています。

あくまでも値を確認できるようにしたい場合には、代替手段としてはスクリプトプロパティを利用せずに、それらの値関係はJSONファイルとして書き出し、そのファイルに対して読み書きをするスタイルにすれば良いかと思います。但し、JSONファイルのIDは管理が必要なので、エディタ上で直書きする等の必要もありますし、ユーザ毎に用意するのであれば、ユーザ毎のIDをどうやって管理するかの手段が必要です。

※もともと旧IDEでもユーザプロパティは画面上から見えないようになってましたが、スクリプトプロパティが見えないのは非常に不便

図:なんで削ってしまったのか・・・

複数プロジェクトの作成が困難に

旧版では、1つのスプレッドシートに複数のプロジェクトを作り込んで、例えば申請用フォーム、承認用フォーム、共通ライブラリといった具合に別管理をしていました(1アプリに付き1つしかウェブアプリは作れない為)。

今回の新IDEだと新規追加できるのは、スクリプトファイルとHTMLファイルの2種類のみになっています。ではどのように、複数プロジェクトを作り込むか?そのために旧IDEに戻すというのもスマートじゃありません。

  • https://script.google.com/home/projects/create?parent=スプレッドシートのIDのURLを実行する

これで作成が可能です。但し作ってしまうと、IDE上から削除が出来ない(削除する機能も無い為)。そこで以下のような手順で作成し削除できます。

  1. AppsScript Dashboardを開く
  2. すべてのプロジェクトを開き、日付をソートすると作ったばかりのプロジェクトが一番上に出てくる
  3. この画面からであれば、︙をクリックして削除する事が可能です。

Dashboardからはプロジェクトを作成できるのですが、スプレッドシート紐付けのコンテナバインドなプロジェクトは作れません(スタンドアローンなプロジェクトしか作れない)。

図:プロジェクトの削除はDashboardから

図:旧版にあったプロジェクトの新規作成がなくなってる・・・

図:無事にスプレッドシートに複数のプロジェクトを追加できた

Google Apps Script Github Assistantが対応

以前より広く利用されていたChrome Extensionである「Google Apps Script Github Assistant」ですが、新IDEでも利用できるようです。但しログイン方法がちょっと異なっています。そのまま、普通にIDであるメアドとパスワードでログインしてしまうと、Cannot read property ‘forEach’ of undefinedというエラーが出て使えません。以下手順でTokenを生成して入力します。

  1. Github Assistantのログイン画面にあるGithub Access Tokenをクリック(要Githubへのログイン)
  2. Generate New Tokenをクリックする
  3. Noteにわかりやすい名前をつけて、repoおよび必要なアクセス権限にチェックを入れる
  4. Personal Access Tokenが出るのでコピーする
  5. Github Assistantに戻り、自分のメアドおよび4.のアクセストークンを入れてGithub Loginをクリック
  6. Google Apps Scriptの開発画面をリロードすると、読み込まれてRepository updatedが出るようになる

図:Githubでコードのバージョン管理ができるようになる

図:ログイン画面はパスワードではなくAccess Tokenが必要

AppsScript Colorでダークモード

Chrome Extensionである「AppsScript Color」ですが、新IDEでも利用が可能です。拡張機能を追加し、開発画面上の月・太陽のアイコンをクリックすれば、ダークモードと通常モードの切替が可能です。

図:エディタ部分がダークモードになります

旧式に戻すこともできる

現在はまだ、旧式のIDEに戻すことも可能です。右上に「以前のエディタを使用」をクリックすれば、旧IDEに戻せます。そちらでは、スクリプトプロパティ画面もまだ残っているので、画面上から確認も可能です。また、新しいエディタに復帰したい場合には、新しいエディタを使用ボタンをクリックすれば戻れます。

図:新旧両方のエディタがまだ利用可能です

プロジェクトキーは使用不可能に

ライブラリの追加で以前利用されていたプロジェクトキー。もともと、以前よりスクリプトIDに取って代わるので、廃止になりますというアナウンスがついていたかと思いますが、いよいよ新IDEでは利用不可能になりました。

しかし、メンテナンスされていない古いライブラリの中には、プロジェクトキーだけが公開されていて、スクリプトIDが公開されていないものもあったりします。Githubにソースコードが公開されているようなものであれば、自分で取り込んで自分でスクリプトIDを発行して利用すれば継続して利用できますが、古いライブラリは使えなくなってしまいました。

できれば、ライブラリの類はソースコードを公開してほしい所です。

図:以前のプロジェクトキーはもう使えない

appsscript.jsonを表示する

Google Apps Scriptの各種ライブラリの設定やOAuthスコープの情報などを格納してるappsscript.jsonですが、デフォルトでは非表示になっています。通常ユーザが手動で弄ることはないので、これでも困らないのですが、開発者の人の中には確認したい人もいるでしょう。表示する方法は以下の手順です。

  1. サイドバーの歯車アイコン(プロジェクトの設定)を開く
  2. 「appsscript.json」マニフェストファイルをエディタで表示するにチェックを入れる
  3. ファイルのリストにappsscript.jsonが表示されるのでクリックすると中身が見られる

図:チェックをいれるだけです

図:無事にappsscript.jsonの中身を確認できた

スクリプトプロパティ一覧を見えるようにする

新IDEからはスクリプトプロパティやユーザプロパティの一覧は確認できるUIがありません。そうなると面倒なのが一体なにが今現在プロパティに入っているのか不明なままになるという点。

そこで、一覧確認用のUIをVue.js + Vuetifyを用いて簡単に作りました。現在はスクリプトプロパティのみですが、改造してユーザプロパティを更に取得してみたり、画面上から値の読み書き、一括削除などもできるようにすれば、便利じゃないかなぁと思います。サンプルファイルはこちらになります。

サンプルを開くとメニューに「プロパティチェック」という項目があるので開き、チェック表を実行するとプロパティ一覧が表示されます。

図:簡単にスプレッドシート上で閲覧できる

ソースコード

GAS側コード

  • getScriptPropertiesで一括取得し、forループでkeyとvalueを取得して返します
  • 返す形式は、VuetifyのSimple-Table側で設定したkey名に合わせてあげます。

HTML側コード

  • UIはVue.js+Vuetifyにて作成しています。
  • simple-tableにて作成しており、ヘッダ部分は固定しています。

動画

関連リンク

共有してみる: