WebStormでGAS+clasp+TypeScriptを扱うための手順
前書き
この記事はUnityゲーム開発者ギルド2 Advent Calendar 20209日目の記事です。
前回はりべるんさんの自作ゲームのストーリーや設定についてあれこれ考えたお話でした！
今回は最近趣味で触っている「Google App Script(GAS)」について書こうと思います。
GASはどんなことに使えるのかは、こちらの記事を見ていただいた方がイメージも付きやすいと思うので参考にしていただければと思います。
Google Apps Script(GAS)でできること・活用事例25選｜Yoshio Kimura｜note
GASはブラウザ上のエディタでも記載することが可能なのですが、claspというライブラリを使うことで、ローカルのIDE(VisualStudioCodeやWebStormなど)で記述することが可能になります。
UDGDの中には「Unity」で使う「Rider」も含まれてる「Jetbrains All Products Pack」を買ってる方もいらっしゃると思うので、今回はその中に含まれている「WebStorm」を用いてclasp環境でGAS+型を指定できるTypeScriptを導入して書いてみようと思います。
動作、確認環境
- Windows10
- WebStorm 2020.2.2
claspの導入
導入自体は、以下の記事が参考になりましたので、説明は省かせていただきます。
GAS用のCLIツール clasp を使ってGASをローカルで開発して実行するの巻。 - Qiita
ローカル環境構築
ローカル環境にclaspを入れ、WebStormのプロジェクトの作成までの流れを説明します。
以下の記事を参考にしています。
GASをClaspとTypescriptでローカル開発してみた。(Clasp / Typescript / TSLint / Prettier)
スプレッドシートIDの取得
まずはclasp環境を構築するために必要なGASのプロジェクトのスクリプトIDをコピーするために、先にGASのプロジェクトを作っておきます。
作成後、ファイル→プロジェクトのプロパティを選択後、無題のプロジェクトの名前を変更するとScriptIDが表示されますのでコピーします。
実行環境のClasp対応
次にclaspを入れるフォルダを作成します。
今回は説明のためフォルダ名を「test_clasp」にします。
次にコマンドプロンプトを起動し、先程作成した「test_clasp」までcdで移動し、下記のコマンドを上から順に入力します。
<scriptId>の部分は先程コピーしたスクリプトIDを入力してください。
npm入れてる前提なので、インストールされてない方はインストールをしてください。
clasp clone <scriptId>
npm init -y // package.json作成
npm install @google/clasp tslint -D // claspのパッケージとtypescriptのlintを追加
npm install @types/google-apps-script -S // gasの型定義パッケージ
tslint --init // ここがうまくいかなかったので、事前にnpm install tslint typescript -g をした
今回ソースコードをsrc用のフォルダに記載したかったので、
srcフォルダを作成し、.clasp.jsonにrootDirを追加します。
{
"scriptId":"scriptIDが入っています",
"rootDir": "src"
}
このsrcフォルダがGASと同期するコードのディレクトリにしたいので、appscript.jsonもここに移動します。
ここまで来るとフォルダ構成が以下のようになっているはずです。
test_clasp
|-- src
|-- appsscript.json
|-- Code.ts //このあと追加するファイル。このファイルをCode.gsに変換させる役割を持つ。
|-- .clasp.json
|-- Code.js //これはClone時のCode.gs。今回はTypeScriptを使うためこれは使わないので消しても大丈夫
|-- package.json
|-- tsconfig.json
|-- tslint.json
WebStormでスクリプト編集
次にWebStormのIDEを開き、「File」→「Open」を選択し、先程作成したClaspのフォルダを指定するとプロジェクトが開かれます。
次にsrcフォルダ直下に「Code.ts(TypeScriptFile)」を追加します。
今回はローカルの環境がウェブの環境に反映がされてるか確認するため、実行されたら「シート1」という名前のシートの1行1列目にHelloWorldと記述する簡易的なスクリプトを作ります。
function HelloWorld(){
const sheet = SpreadsheetApp.getActive().getSheetByName('シート1');
sheet.getRange(1,1).setValue('HelloWorld');
}
上記の設定がうまく行っていると、GASについてのインテリジェンスも効くようになっているはずです。
ウェブ上のエディタに反映させる
再びコマンドプロンプトに戻り、以下のコマンドを上から順番に入力します。
clasp push //これでCode.tsの内容をGASに反映させる
clasp open //ウェブのGASのエディタを開く
ウェブのエディタが開かれると、Code.gsが先程のTypeScriptのコードがJavaScriptに変換された状態で記述されています。
// Compiled using ts2gas 3.4.4 (TypeScript 3.6.4)
var exports = exports || {};
var module = module || { exports: exports };
function HelloWorld() {
var sheet = SpreadsheetApp.getActive().getSheetByName('シート1');
sheet.getRange(1, 1).setValue('HelloWorld');
}
実行確認
早速実行してみます。
▶の近くに関数を選択する場所があるので、「HelloWorld」に変更し、▶を押します。
スプレッドシートを操作しようとしているので認証エラーが出ますが、許可を確認を選択し、Googleの認証画面に飛ぶので自分のアカウントを選択して権限を通すようにします。
関数実行後、スプレッドシートが以下のようになっていれば成功です。
ここまでのおさらいとして、ローカルのWebStormで作業し、ウェブ上のGASに反映させるためには以下の流れになります。
- Code.tsに処理を記述する
- コマンドプロンプトで「clasp push」を実行する
- コマンドプロンプトで「clasp open」を実行し、ローカルの内容がウェブに反映されてるか確認する。
あとがき
今回は簡易的なスクリプトでしたが、他にもトリガーと呼ばれるものを利用して特定の時間に定期的に実行させたり、スプレッドシート以外の機能(Google Form、Gmailなど)にもアクセスしたりなど、様々なことができますのでこの記事がお役に立てれば幸いです。
次回は10日目の青木ととさんの自分が配信/動画制作のために触り始めたツールを紹介しますです！
Discussion