Edited at

【Vim重症患者に朗報】WebサイトのTextAreaの内容をターミナル上のVimで編集する方法


Vim重症患者に朗報

一日の大半を ターミナル あるいは Vim で過ごす人は、徐々に指の動きがVimキーバインドで侵されていきます。

Vim使いは誰でもきっと以下のような症状に悩まされているはずです。


  1. エクセルを使っていたら、いつの間にか jjjkkk のような文字がセルに入力されていた

  2. ブラウザで上下するときについつい jk を入力してしまう

  3. Webサイトの入力フォーム上でVimキーバインドが使えずイライラする

プライベートだけではなく、ビジネス上でもWebの入力フォームにコミュニケーション情報をプロットすることが多い近年、 (3) のイライラは少しつづ精神を蝕んでいきます。

これは良くない!ということでなんとかできないか改善してみました。


GhostText

ぴったりなプラグインに出会う。

以下のようなシステム構成で、Chorme上に表示されている TextArea の内容を ターミナル上のVim で編集できる事がわかりました。


+-----------------------------+ +----------------------------+
| GhostText(Chrome Extension) | =[localhost:4001]=> | ghost-text.vim(Vim Plugin) |
+-----------------------------+ +----------------------------+

Chrome拡張である GhostText がサーバとなり、 Vimプラグインである ghost-text.vim と通信しあうことで TextArea を編集できるということ。

早速試してみた。


必要なもの


  • Chrome

  • Vim

※自分は手元にMacしかなかったため試せていないが、WindowsやLinuxでも動くのではないでしょうか。


インストール


GhostText(Chorme拡張)

GhostText - Chrome Web Store より、拡張をインストール


ghost-text.vim(Vimプラグイン)

GitHub - pandysong/ghost-text.vim: support for ghost-text in regular vim より。



  • dein.vm を使っている場合は以下の1文を .vimrc に記載しておけばOK。


    • call dein#add('pandysong/ghost-text.vim')




websockets(Python3)

pandysong/ghost-text.vim のページには、 Python3websockets パッケージが必要、という記載もあるので、これもインストール。

$ python3 --version

Python 3.7.0

$ pip3 --version
pip 10.0.1 from /usr/local/lib/python3.7/site-packages/pip (python 3.7)

$ pip3 install websockets
Requirement already satisfied: websockets in /usr/local/lib/python3.7/site-packages (6.0)

すでにインストールされていた。


その他


  • Vimのサポートにもいくつか制約があった。



    • python3 がサポートされていること、


    • channel がサポートされていること、



% vim --version| grep -e python -e channel

+channel +iconv +packages -toolbar
+comments +libcall -python +viminfo
+conceal +linebreak +python3 +vreplace

幸い、いずれも要件を満たしていた。


使い方



  1. Vim を起動

  2. ノーマルモード状態で :GhostTextStart と入力


  3. TextArea が配置されているページをChromeで開く


  4. GhostText 拡張アイコン(右上)を押す

これで、Vim上に TextArea 上の内容が表示される。編集するとWebページ上の TextArea の値もリアルタイムで変更される。