Clotho の偶感録

個人用メモを世界に垂れ流す。

あれから 7 ヶ月経ったけどまた GhostText のことやってる

Visual Studio Code の GhostText 拡張をいじる

ようやく懸念事項が片付いて,放置していたブログでも書くかなあといざブログ編集画面を開き Sublime Text 3 を起動しつつ GhostText のアイコンをポチってみたのだけれども,ここ最近は仕事で Visual Studio Code (以下 VS Code) を触ることが多くて気に入っていたので,Sublime から VS Code に環境を移行しようかなあということで自宅 Mac をたちあげポチポチやってみたところ,

GhostText と VS Code がつながらない (またか)。

www.kagura-c.info

まーブログ放置する直前の最後の記事でぶち当たった 「ポート使われちゃってる問題」 ふたたび,ですな。

あーそういえばポート変えなきゃなー知ってる知ってる,と VS Code の GhostText 拡張の設定を探し回ったところ……無い。

愕然として GhostText 拡張のページを見てみたら,GitHub へのリンクがあるのでしかたない GitHub 行きゃソースあんだろちょっと眺めるかー……と。

ハードコーディングしてあるぜ……。

しょうがない,自分で対応しますか。

調べてみたところ,VS Code の拡張を作るためには node.js とかあればいいらしい。

前提

Git の知識と macOS の Terminal でいろいろできる知識が必要です。
(説明なんもしてない)

拡張を作るための準備 (開発環境)

余計なこと (Visual Studio Marketplace に公開するとか) するのでなければ,開発環境は簡単に作れるんですと。 VS Code の拡張は,拡張子 .vsix のファイルができれば Marketplace に無くてもインストールできるので。

手を付ける前にちょっと調査したんだけれど,VS Code API とか見ても Qiita とか Stack Overflow とか軽く検索しても,VS Code の設定画面に追加する方法がすぐには分からなかった。
できてる拡張はあるからちゃんと探せばできるはずなんだけど,これ手を付けた時点で午前 3 時だし 4 時には .vsix 作って寝たい。

というわけで。

うちの環境はすでに node.js が入っていたのだけれども,無い場合はインストールする。

macOS でかつ homebrew 導入済みの人はコマンド一発ですな。

$ brew install nodejs
(略)
$ node -v
v11.8.0
$ npm -v
6.5.0

んで node.js のパッケージマネージャー npm で必要なモジュールを入れましょー。

まずは npm 自身の更新を。

$ npm install -g npm
(略)
+ npm@6.7.0
(略)

終わったら本題のモジュール達。

$ npm install -g yo generator-code vsce eslint
(略)
+ vsce@1.55.0
+ eslint@5.13.0
+ yo@2.0.5
+ generator-code@1.1.44
(略)

yo は要らないかも? まあ入れておきましょう helloworld くらい作りましょう

必要なものはこれくらいかな。

ghosttext-vscode リポジトリを開発環境にクローン

VS Code の GhostText 拡張リポジトリは以下の URI です。

https://github.com/jtokoph/ghosttext-vscode.git

修正はローカル環境のみでやってどこにもプッシュしないなら上の URI から直に git clone すればよろしい。

適当なディレクトリで

$ git clone https://github.com/jtokoph/ghosttext-vscode.git

でオッケー。

私が修正した後のリポジトリでいいなら

$ git clone https://github.com/clotho-moirai/ghosttext-vscode.git

としてくださいまし。

ポートは 14001 に変更済み,GhostText 起動後は Markdown モードでエディタが開くよ。

変更内容は以下のようになっております。

https://github.com/clotho-moirai/ghosttext-vscode/commit/11c24eb65bb3b1ade248b81bd4ad542748167c2a?diff=split

時間があればここら辺設定できるようにしたいんだけどねー。
そこまでやったらプルリクエスト送れるんだけどねー。
時間無いからね。しかたないしかたない。

VS Code 拡張インストールファイルを作る

これは簡単ですね。
クローンしたディレクトリに cd で移動して,

$ cd ./ghosttext-vscode
$ vsce package

てな感じで vsce コマンドを実行してくださいな。

うまくいけば僥倖,わたしの場合はこんなん出ました。

$ vsce package
npm ERR! missing: nodejs-websocket@1.7.1, required by ghosttext@1.1.0
npm ERR! missing: tmp@0.0.31, required by ghosttext@1.1.0
npm ERR! missing: os-tmpdir@1.0.2, required by tmp@0.0.31

依存パッケージが無いんですって。
というわけで npm にお願いします。

$ npm install
(略)

added 427 packages from 881 contributors and audited 1332 packages in 7.868s
found 14 vulnerabilities (3 low, 7 moderate, 3 high, 1 critical)
  run `npm audit fix` to fix them, or `npm audit` for details

脆弱性がなんとか言ってまともに終わってないっす。
私の環境は node.js で他のモジュールも入ってるので普通に終わるひとは終わるんでしょうねきっと。

なんか実行して直せ言ってるのでやってみましょう。

$ npm audit fix
npm WARN ghosttext@1.1.0 No license field.

+ vscode@1.1.28
added 40 packages from 58 contributors, removed 126 packages, updated 50 packages and moved 4 packages in 6.366s
fixed 11 of 14 vulnerabilities in 1332 scanned packages
  1 package update for 3 vulns involved breaking changes
  (use `npm audit fix --force` to install breaking changes; or refer to `npm audit` for steps to fix these manually)

文句を言いつつも進んだ気がします。
--force 付きはヤバい気がするので,にっちもさっちも行かなくなるまでは保留ね。

もういっかい。

$ npm install
Detected VS Code engine version: ^1.5.0
Found minimal version that qualifies engine range: 1.5.0
Fetching vscode.d.ts from: https://raw.githubusercontent.com/Microsoft/vscode/4fc690be310dd02e0ab6529c0b9bf348a8b26a19/src/vs/vscode.d.ts
vscode.d.ts successfully installed!

npm WARN ghosttext@1.1.0 No license field.

audited 1321 packages in 2.679s
found 3 vulnerabilities (1 low, 1 high, 1 critical)
  run `npm audit fix` to fix them, or `npm audit` for details

パッケージ作ってみる。

$ vsce package
 DONE  Packaged: $HOME/src/vscode_extensions/ghosttext-vscode/ghosttext-1.1.0.vsix (28 files, 42.38KB)

わーいできました。

作った拡張ファイルを VS Code にインストール

この ghosttext-1.1.0.vsix を直に VS Code に入れればおしまいですよ。

サイドバーの 拡張機能 をクリック (下図: 1)して,拡張機能のメニューから [VSIX からのインストール…] をクリック (下図: 2, 3) して,ghosttext-1.1.0.vsix を選択してインストールしてやりましょう。

はー終わった終わった。寝よ。

つかいかた

解説サイトたくさんあるけど一応かいとく。

  1. VS Code
    1. VS Code を起動する
    2. コマンドパレットを開く (Mac なら Command + Shift + p)
    3. 表示されてる > の後ろに "ghost" とかキー入力する
    4. 補完候補にある "Enable GhostText" を選択して Enter
  2. Web ブラウザ (GhostText 拡張機能インストール済み)
    1. はてなブログの編集画面とか開く
    2. 本文入力欄 (テキストエリア) をクリックしとく
    3. ブラウザのツールバーにあるはずの GhostText のアイコンをクリック
  3. できあがり
    1. うまく動いてれば,起動済みの VS Code に新しいタブが開くので,適当に "test" とか入力してみる
    2. ブラウザの本文入力欄に,自動的に "test" と表示されるはず

うまくいかないとき (私の場合)

1. Enable GhostText してない

コマンドパレットで "Enable GhostText",してね。
これするまで GhostText サーバー起動してないから,誰も待ち受け始めてないからね。

3. キャッシュ残ってる

VS Code に普通に Marketplace から入れた GhostText 拡張は,拡張を一旦アンインストールした後もキャッシュぽいのに残ってるみたい。
デバッグするとちゃんとポートとか変更後のコードが動くのに,.vsix で入れると GhostText 自体動かなくなるのはキャッシュのせいだった。

GhostText 拡張をアンインストールしたあとは,VS Code を終了させてからキャッシュフォルダを削除してあげるとイイみたい。

Mac の場合)

$ rm -rf ~/.vscode/extensions/tokoph.ghosttext-1.1.0

で完全に削除完了。

VS Code を起動して .vsix ファイルをインストールしてね。

そういえば AdSense

復活してました。
なんでだろね。

たまーに Google さんから AdSense のためにちゃんとしろメールが来るんだけど,内容見てみると非 SSL かつサブドメイン無しでこのブログにアクセスしにきて 404 で撃退されてたりとか変な感じだったのよね。
ちょっと Google Search Console とか弄ってみたけどもう大丈夫かな?