ブログやチャットツール、メールなどで Web ブラウザを利用して長文を書く機会はあると思うが、ブラウザのテキストエリアではショートカットキーが殆ど使えずシンタックスハイライトも無いなど、文章を書くのは不便だと感じたことは無いだろうか。自分も文章を書く際には Vim を利用する事が多く、特にブログのような長文を記述する必要がある際にはほぼ必ず利用している。
しかし、外部エディタを利用するということは一々エディタからブラウザへコピーをする必要があるという欠点もある。
Web ブラウザで文章を書く際に外部エディタを利用するのであれば、GhostText という拡張機能を利用してみよう。
GitHub - fregante/GhostText: 👻 Use your text editor to write in your browser. Everything you type in the editor will be instantly updated in the browser (and vice versa).GhostText を利用すれば Web ブラウザのテキストエリアと任意のエディタを連携し、リアルタイムで内容を反映させることができる。
利用できるブラウザは Chrome, Microsoft Edge, Vivaldi, Firefox, Safari と主要なものは全て対応している。一方で利用できるエディタ VSCode, Atom, Emacs, Vim, NeoVim, Sublime, Acme とややプログラマ向けのものばかりとなっている。
Vivaldi(Chrome) と Vim で GhostText を利用する方法
今回は自分の利用している環境である Windows 10 で Vivaldi と Vim を組み合わせて試してみる事にした。Vivaldi は Chrome の拡張機能がそのまま利用できるので、Chrome ウェブストアから GhostText をインストールしよう。
https://chrome.google.com/webstore/detail/ghosttext/godiecgffnchndlihlpaajjcplehddcaVim 側は vim-ghost プラグインを dein.vim 経由でインストールした。
GitHub - raghur/vim-ghost: Vim/Nvim client for GhostText - Edit browser text areas in Vim/NeovimVim のプラグインを管理する為に Dein をインストールした | Lonely Mobiler
なお vim-ghost を利用する際には Python が必要となる。インストール済みの Vim で利用できるバージョンと合わせる必要があり、自分の場合は Python 3.7 をインストールした。それから pip で pynvim もインストールしておく。
dein.vim でプラグインを追加している箇所に以下の一行を追加する。
call dein#add('raghur/vim-ghost')
Python の設定がされていなければそれも vimrc に記述する。
let g:python3_host_prog = 'C:\Users\ryomatsu\AppData\Local\Programs\Python\Python37\python.exe'
これで準備できた。vimrc を読み込み直したら :GhostStart コマンドを実行し、Web ブラウザでテキストエリアにフォーカスを当てた状態でツールバーから GhostText のアイコンを押してみよう。
そうすると、実行中のエディタでテキストエリアを編集可能になる。外部エディタで編集中はテキストエリアの枠線が水色っぽく変化し、エディタに入力した内容がリアルタイムでテキストエリア内に反映されているのがわかると思う。
終了する際はエディタを閉じれば OK だ。
このような感じで、初期設定が必要ではあるものの、好きなエディタを利用してテキストを入力することができるようになる。Web ブラウザを利用して長文を書く機会があるのであれば、インストールしておくととても便利だと思う。