Help us understand the problem. What is going on with this article?

【GAS】WSLでclaspを使いたいがChromeがうまく動かない問題の解決

追記(2019-02-28)

実はclasp loginするとき、下に

🔑Authorize clasp by visiting this url:
https://accounts.google.com/o/oauth2/v2/auth?access_type=なんとかかんとか。。。

みたいなURLが出るので、それをブラウザーからChromeにコピペしてもログインだけは出来る。
ということで、この記事まるまる必要なかった気がするが、まあWSLのbashからWindowsのChromeが起動できるといろいろ便利なこともあるので記事はそのまま残す。

ここまでのあらすじ:

  • GASの開発をWeb上ではなく、WSL上のEmacsで行いたいと思っていた
  • そこで、Google謹製のローカル開発環境claspを導入しようとしたが、ひとつ問題があった
  • claspにloginするときに、Chromeが表示されて、そこでログインしなければならないのだが、筆者のWSL環境でChromeを起動できなかった
  • そこでclaspコマンドはDOSプロンプト(cmd.exe)、開発はEmacsでやっていたが、いろいろ楽しいことができなくて困っていた

詳細は=> https://qiita.com/query1000/items/259a60ba1be8743b858b

本項のあらすじ:

  • WSLからWindowsのChromeをシェルコマンドで実行すればいいという記事を見つけた
  • これでWSL上のclasp loginでWindowsのChromeを使ってログインし、快適な作業環境を手に入れた
  • 特にすばらしいのがEmacsのauto-shell-commandである

前提条件

  • Windows 10を使っている
  • WSLを使っている
  • GASで開発が出来ている

UNIXのChromeの残骸を消した

WSLは、Windows側のexeプログラムを実行できるという素晴らしい機能がある。
以下の記事を参考に、Windowsのchromeを起動しようとした。

https://medium.com/@h.taiju/open-google-chrome-on-emacs-in-wsl-3493966d26ec

が、エラーになった。
いぜんWSL上にインストールして、動かないから諦めたchromeが残っていたのだ。
以下のようにして消した。

$ sudo dpkg -l | grep chrome
$ sudo apt purge chrome-stable

WSLからWindows上のChromeを呼ぶシェルスクリプト
上のサイトからまんまコピペ。

~/bin/google-chrome.sh
#! /bin/sh
exec /mnt/c/Program\ Files\ \(x86\)/Google/Chrome/Application/chrome.exe "$@"

~/binにはパスを通しておく。

UNIXのnodeとnpmを再インストール

nodeをglobalで入れていなかったらしいのであらためてインストールした。

$ sudo apt update
$ sudo apt upgrade
$ sudo apt install nodejs
$ sudo apt install npm

上記事にあったようなエラーは解消されたのか、出なかった。
代わりにinquirer@6.0.0か7.0.0がないと言われた。
うまくインストールできないので無視した。

Windowsのnodeを消す

WindowsのプログラムをWSLから実行できるのが仇となって、次のような変なエラーになった。

$ npm -v
: not foundram Files/nodejs/npm: 3: /mnt/c/Program Files/nodejs/npm:
: not foundram Files/nodejs/npm: 5: /mnt/c/Program Files/nodejs/npm:
/mnt/c/Program Files/nodejs/npm: 6: /mnt/c/Program Files/nodejs/npm: Syntax error: word unexpected (expecting "in")

これは、Windowsからアプリケーションの追加と削除画面に行き、Node.jsを削除すると消えた。

WSLのnodeとnpmがようやく動いた

$ node --version
v8.10.0
$ npm --version
3.5.2

npmの古さが気になるが一応インストールできた。

(2020-05-07付記)TypeScriptを使う場合は。。

ここからこっちの記事を参考にしたほうがいいです。
https://qiita.com/HeRo/items/f2ce057c6b1456e896ad

claspのインストール

$ npm i @google/clasp -g

でclaspをインストールし、

$ clasp login

でログイン。

見事にWindows側のChromeが起動し、ログインに成功した!
ここまで長かったよ。

WSLで出来ると何がうれしいか

  • バッチファイルがシェルスクリプトで書ける
  • TypeScriptが使える(でも、Web側で修正が難しいので今回は見送り)
  • cmd.exeとzshを行ったり来たりしないでずむ

などの細かい点があるが、最大の目標はEmacsのauto-shell-commmand を使うことである。

auto-shell-command

これは、Emacs上でファイルを改変すると、自動的にコマンドを実行できるというものだ。
これで、ファイルが改変されたら自動的にpushが行われ、デプロイが行うように出来る。
https://qiita.com/ongaeshi/items/0e45e4bfa5a813c1b9e4

恥ずかしいけど一応init.el晒し。

init.el
  (require 'deferred)
  (require 'auto-shell-command)
  (require 'popwin)

  ;; キーバインドの設定
  ;(global-set-key (kbd "C-c C-m") 'ascmd:toggle) ; Temporarily on/off auto-shell-command run
  ;(global-set-key (kbd "C-c C-,") 'ascmd:popup)  ; Pop up '*Auto Shell Command*'
  ;(global-set-key (kbd "C-c C-.") 'ascmd:exec)   ; Exec-command specify file name

  ;; ;; エラー時のポップアップを見やすくする
  ;(push '("*Auto Shell Command*" :height 20 :noselect t) popwin:special-display-config)

  ;; ;; 結果の通知をGrowlで行う (optional)
  ;;(defun ascmd:notify (msg) (deferred:process-shell (format "growlnotify -m %s -t emacs" msg))))

  (ascmd:add '("/mnt/c/Users/cf/GDrive/foo" "foopush.sh")) ; fooの下を触ったらpush
foopush.sh
#! /bin/sh
cd /mnt/c/Users/cf/GDrive/foo
if [ $? -ne 0 ]; then
    echo "cd failed"
    exit 1
fi
if [ -e js.js ]; then
   mv js.js js.html
fi
if [ $? -ne 0 ]; then
    echo "rename failed"
    exit 1
fi
clasp push
if [ $? -ne 0 ]; then
    echo "clasp failed"
    exit 1
fi
clasp deploy --deploymentId:????????????????????????????????????????????????????
if [ $? -ne 0 ]; then
    echo "deploy failed"
    exit 1
fi
mv js.html js.js
if [ $? -ne 0 ]; then
    echo "rename failed"
    exit 1
fi

js.jsというのはクライアントサイドJavaScriptのファイルで、GASのHTMLでインクルードして使う。
この件は先の記事にも書いたが、GASはhtmlとjsしか持っていかないので、push前にhtmlにリネームし、push後にjsにリネームし戻している。
(拡張子をjsにしないとEmacsがjsモードにならないので)

超快適。

(終わり)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした