【Vim重症患者に朗報】WebサイトのTextAreaの内容をターミナル上のVimで編集する方法
Vim重症患者に朗報
一日の大半を ターミナル あるいは Vim で過ごす人は、徐々に指の動きがVimキーバインドで侵されていきます。
Vim使いは誰でもきっと以下のような症状に悩まされているはずです。
- エクセルを使っていたら、いつの間にか jjj や kkk のような文字がセルに入力されていた
- ブラウザで上下するときについつい j や k を入力してしまう
- 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 のページには、 Python3 の websockets パッケージが必要、という記載もあるので、これもインストール。
$ 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
幸い、いずれも要件を満たしていた。
使い方
- Vim を起動
- ノーマルモード状態で
:GhostTextStart
と入力 - TextArea が配置されているページをChromeで開く
- GhostText 拡張アイコン(右上)を押す
これで、Vim上に TextArea 上の内容が表示される。編集するとWebページ上の TextArea の値もリアルタイムで変更される。
Author And Source
この問題について(【Vim重症患者に朗報】WebサイトのTextAreaの内容をターミナル上のVimで編集する方法), 我々は、より多くの情報をここで見つけました https://qiita.com/genzouw/items/604b4a3709e5a30a5e1e著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .