Upgrade to Pro — share decks privately, control downloads, hide ads and more …

clasp導入の落とし穴/ installing clasp

clasp導入の落とし穴/ installing clasp

GASのローカル開発環境であるclaspを導入するときに、実際に直面したトラブルと、その解決方法をまとめました。

0ca5eb5cd0c8131c361844b060307e58?s=128

m-haketa

May 20, 2019
Tweet

Transcript

  1. clasp導入の落とし穴

  2. 2 自己紹介 名前: 羽毛田 睦土(はけた まこと) 仕事: 会計事務所 経営 エクセルセミナー

    運営 ソフトウエア 開発 Twitter: @excelspeedup
  3. 3 Clasp導入手順 1. Node.jsインストール 2. claspインストール 3. GAS環境にログイン 4. 自動補完用ファイルのインストール

    5. GASプログラムの同期準備 6. プログラム作成・アップロード
  4. Step2,3,4 4 Clasp設定に潜む落とし穴 その1 1. Node.jsインストール 2.claspインストール 3. GAS環境にログイン 4.

    自動補完用ファイルのインストール 5. GASプログラムの同期準備 6. プログラム作成・アップロード
  5. Step2,3,4 2種類のインストール方法 5 freee残高ダウンロード Analytics日次自動通知 Twitter日次フォロワー取得 clasp clasp プロジェクト npm

    install ... -g npm install ... –save-dev 1. グローバルインストール 2. ローカルインストール
  6. Step2,3,4 初心者向けにはどちらがおすすめ? 6 npm install @google/clasp -g npm install @google/clasp

    --save-dev 1. グローバルインストール 2. ローカルインストール
  7. Step2,3,4 初心者向けにはどちらがおすすめ? 7 npm install @google/clasp -g npm install @google/clasp

    --save-dev 1. グローバルインストール 2. ローカルインストール ※初心者限定
  8. Step2,3,4 ローカルインストールをするとどうなる? 8

  9. Step2,3,4 自動補完用ファイルはローカル必須 9 npm install @types/google-apps-script -g npm install @types/google-apps-script

    --save-dev 1. グローバルインストール 2. ローカルインストール
  10. Step5,6 10 落とし穴 その2 1. Node.jsインストール 2. claspインストール 3. GAS環境にログイン

    4. 自動補完用ファイルのインストール 5.GASプログラムの同期準備 6. プログラム作成・アップロード
  11. Step5,6 同期の準備をする 11 (プロジェクトルート フォルダ) test.ts src test.ts clasp create

    Googleサーバ clasp push clasp push clasp create -rootDir ./src
  12. Step5,6 初心者にはどちらがおすすめ? 12 clasp create clasp create –rootDir ./src 1.

    プロジェクトルートフォルダをrootDirに指定 2. srcフォルダをrootDirに指定
  13. Step5,6 初心者にはどちらがおすすめ? 13 1. プロジェクトルートフォルダをrootDirに指定 2. srcフォルダをrootDirに指定 clasp create clasp

    create –rootDir ./src
  14. Step5,6 rootDir指定をしないとどうなる? 14

  15. Step5,6 rootDirとclasp pushの関係 15 (プロジェクトフォルダ) Node_modules 大量のjsファイル -rootDir ./src (プロジェクトフォルダ)

    test.ts -rootDir . Node_modules src test.ts jsファイル Googleサーバ clasp push
  16. Step ? 16 落とし穴 その3 1. Node.jsインストール 2. claspインストール 3.

    GAS環境にログイン 4. 自動補完用ファイルのインストール 5. GASプログラムの同期準備 6. プログラム作成・アップロード
  17. Step ? claspコマンド実行時にエラー 17

  18. Step ? 文法チェックが明らかにおかしい 18

  19. Step ? Npmパッケージをインストールし直す 19 npm uninstall @google/clasp –g npm install

    @google/clasp -g npm install 私の環境では、これで解決しました
  20. 20 claspをとりあえず動かしたいときには? このブログに導入手順をまとめてあります https://gas.excelspeedup.com/

  21. ここから未公開スライド 21

  22. Step2,3,4 ローカルインストールするときは 22 npm install @google/clasp --save-dev npm run clasp

    login "scripts": { ... “clasp”: “clasp” }, package.json すべてのclaspコマンドの前に 「npm run」を付ける p8の補足
  23. Step5,6 RootDirを指定しないときは 23 node_modules/** .claspignore (プロジェクトフォルダ) Node_modules jsファイル test.ts Push対象から除外される

    p14の補足
  24. ありがとうございました! 24