0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-01-26

#追記(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を起動しようとした。

が、エラーになった。
いぜん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モードにならないので)

超快適。

(終わり)

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?