Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

genzouw
## Job Programmer ## Good at language Java, Groovy, PHP, Bash, JavaScript ## Other language C, C++, C#, Objective-C, VB, Delphi, HTML, CSS, SQL, Ruby
https://genzouw.com
zenkigen
「テクノロジーを通じて、人と企業が全機現できる社会の創出に貢献する」 『全機現』という言葉は、「人の持つ能力の全てを発揮する」という禅の言葉です。 多くの大人が全機現し、それを見た子供達が、大人になることに希望を持つ社会を次世代に引き渡したい。 その思いが当社の創業精神です。
https://harutaka.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away