Quantcast
Channel: Vimタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 5608

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

$
0
0

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


Viewing all articles
Browse latest Browse all 5608

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>