18
9

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 5 years have passed since last update.

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

Last updated at Posted at 2018-11-01

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 の値もリアルタイムで変更される。

18
9
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
18
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?