clasp 事始め

claspとは

Google App Scriptをローカルマシンで便利に使えるようにGoogleのプロジェクトツール。

インストール

npm install -g @google/clasp

https://script.google.com/home/usersettings にアクセスすると下記のような設定ができるので有効にする。

自分の環境だとclaspのパスが通ってなく command not found になった。nodenvでいれていて export PATH="~/.nodenv/shims:$PATH".bashrc に追加した。

$ clasp --version
2.3.0

無事パスが通った。

ログイン

ログインの確認。してなさそう。

$ clasp login --status
You are not logged in.
$ clasp login
Logging in globally...
(node:20018) ExperimentalWarning: The fs.promises API is experimental
🔑 Authorize clasp by visiting this url:
Authorization successful.
Default credentials saved to: ~/.clasprc.json 

コマンドを打つと画面遷移してアカウントの連携ができる。

無事ログイン完了。随分 シンプルなページ。

typescriptを使えるように

typescriptを使いたいのがメインの目的なので参考にしているblogを参考に環境を準備してみる。

$ mkdir hello-world
$ cd hello-world/
$ npm i -S @types/google-apps-script
$ tree
.
├── node_modules
│   └── @types
│       └── google-apps-script
│           ├── LICENSE
│           ├── README.md
│           ├── apis
│           │   ├── adsense_v1_4.d.ts
│           │   ├── analytics_v3.d.ts
│           │   ├── analyticsreporting_v4.d.ts
│           │   ├── appsactivity_v1.d.ts
│           │   ├── bigquery_v2.d.ts
│           │   ├── calendar_v3.d.ts
│           │   ├── classroom_v1.d.ts
│           │   ├── content_v2.d.ts
│           │   ├── dfareporting_v3_3.d.ts
│           │   ├── directory_v1.d.ts
│           │   ├── docs_v1.d.ts
│           │   ├── drive_v2.d.ts
│           │   ├── driveactivity_v2.d.ts
│           │   ├── gmail_v1.d.ts
│           │   ├── groupsmigration_v1.d.ts
│           │   ├── groupssettings_v1.d.ts
│           │   ├── licensing_v1.d.ts
│           │   ├── mirror_v1.d.ts
│           │   ├── peopleapi_v1.d.ts
│           │   ├── reports_v1.d.ts
│           │   ├── reseller_v1.d.ts
│           │   ├── sheets_v4.d.ts
│           │   ├── slides_v1.d.ts
│           │   ├── tagmanager_v2.d.ts
│           │   ├── tasks_v1.d.ts
│           │   ├── youtube_v3.d.ts
│           │   ├── youtubeanalytics_v2.d.ts
│           │   └── youtubepartner_v1.d.ts
│           ├── google-apps-script-events.d.ts
│           ├── google-apps-script.base.d.ts
│           ├── google-apps-script.cache.d.ts
│           ├── google-apps-script.calendar.d.ts
│           ├── google-apps-script.card-service.d.ts
│           ├── google-apps-script.charts.d.ts
│           ├── google-apps-script.conference-data.d.ts
│           ├── google-apps-script.contacts.d.ts
│           ├── google-apps-script.content.d.ts
│           ├── google-apps-script.data-studio.d.ts
│           ├── google-apps-script.document.d.ts
│           ├── google-apps-script.drive.d.ts
│           ├── google-apps-script.forms.d.ts
│           ├── google-apps-script.gmail.d.ts
│           ├── google-apps-script.groups.d.ts
│           ├── google-apps-script.html.d.ts
│           ├── google-apps-script.jdbc.d.ts
│           ├── google-apps-script.language.d.ts
│           ├── google-apps-script.lock.d.ts
│           ├── google-apps-script.mail.d.ts
│           ├── google-apps-script.maps.d.ts
│           ├── google-apps-script.optimization.d.ts
│           ├── google-apps-script.properties.d.ts
│           ├── google-apps-script.script.d.ts
│           ├── google-apps-script.sites.d.ts
│           ├── google-apps-script.slides.d.ts
│           ├── google-apps-script.spreadsheet.d.ts
│           ├── google-apps-script.types.d.ts
│           ├── google-apps-script.url-fetch.d.ts
│           ├── google-apps-script.utilities.d.ts
│           ├── google-apps-script.xml-service.d.ts
│           ├── index.d.ts
│           └── package.json
└── package-lock.json
4 directories, 64 files
$ touch tsconfig.json
$ vim tsconfig.json
$ cat tsconfig.json
{
  "compilerOptions": {
    "lib": ["es2019"],
    "experimentalDecorators": true
  }
}

プロジェクトの作成

$ clasp create --title "Hello World" --type standalone
(node:20839) ExperimentalWarning: The fs.promises API is experimental
Created new standalone script: https://script.google.com/d/1QoTkRYwxa_vHJEOdVZk2rKvI8jZ3c2JdahkGcrF_RAgX3wpmN8cpAzYe/edit
Warning: files in subfolder are not accounted for unless you set a '.claspignore' file.
Cloned 1 file.
└─ appsscript.json

タイムゾーンを Asia/Tokyoに変更する

$ cat appsscript.json
{
  "timeZone": "America/New_York",
  "dependencies": {
  },
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8"

codeを書いていく

const greeter = (person: string) => {
    return `Hello, ${person}!`;
}
function testGreeter() {
    const user = 'Ken';
    Logger.log(greeter(user));
}
$ clasp push
(node:21224) ExperimentalWarning: The fs.promises API is experimental
? Manifest file has been updated. Do you want to push and overwrite? Yes
└─ appsscript.json
└─ hello.ts
Pushed 2 files.
$ clasp open
(node:21322) ExperimentalWarning: The fs.promises API is experimental
Opening script: https://script.google.com/d/xxxxxx/edit

ブラウザがたちあがります

testGreeter を実行してみる

ちゃんとでてた!

これでなんとなく手順はわかった。次からtypescriptの学習をやってく。


参考

https://panda-program.com/posts/clasp-typescript ほとんどこの通りに作業させていただきました。