ブラウザのテキストフィールドで好きなエディタを使う

ブログとかで長文を書くとき、どうしてますか。
大抵の人はそのままテキストフィールドに文章を入力していると思います。しかしこのブログを見ているような人達のことを考えると、「テキストフィールドでブログ書くやつは情弱」とか言い出してエディタを開き始めてもおかしくない。この前後ろから忍び寄ってこっそり見てたらエディタ開いてブログ書いてた人いたから間違いない。普段vimやemacsを使っているという人は特に、キーバインドが気になるからいつものエディタで書きたいと思う。でもわざわざエディタ開いて文章書いてコピーしてブラウザに戻ってペーストしてって言うのが面倒だしかっこ良くない。

それ拡張で

GoogleChromeのテキストフィールドでこれをやるには、Edit with Emacsという拡張を使う。Emacsって名前に書いてあるけどEmacsは関係ない。Edit with Emacsは、テキストフィールドでAlt+Enter(デフォルトではこのキーショートカットは無効になってるので有効化する)を押すと、サーバにPOSTで通信が送られて、サーバがエディタを開いて、エディタを閉じるとサーバが内容をブラウザに返して、返ってきた値をEdit with Emacsがテキストフィールドに挿入するという仕組み。

サーバは自分で用意する必要がある。edit_server_rackというRackで実装されたサーバがあるので、これを利用する。config.ruの5行目でEmacsを利用するようになってるので、ENV['EDITOR']とか'vim'とかに上書きする。書き換えたらrackupで起動する。rackを利用しているから事前にgem install rackが必要かもしれない。screenとかでバックグラウンドで適当に動かすと良さそう。これで、ブラウザのテキストフィールドで好きなエディタが使えるようになる。

それ他のエディタで

MacVim-Kaoriya版を使ってる人は、ここからmvimというスクリプトをダウンロードして、パスの通るところにおいて'mvim -f'を設定すると良い。gitとかでMacVimを使う方法を参考にした。TextMateを使ってる人はmateっていうコマンドが付属していると思うから、mateにパス通して'mate -w'を設定すると良い。*1それ以外のエディタでも、コマンドで外部から良い感じに呼び出せる奴だと上手くいきそう。「git ◯◯ 使う」とかでググるんや。

それ他のブラウザで

SafariだとCocoaとテキストフィールドを連携させる仕組みがあるので、エディタ側が対応していれば何の拡張も要らない。TextMateとかは「Safariだとその場でTextMate呼び出せるよ！」って謳っている。Safariで色々やりたい人はQuickCursorってアプリを調べてみると良い。FirefoxだとIt's All Text!っていうAdd-onがあるのでそれを使うと良い。但しEdit with Emacsと違って少し重い。Firefoxは2年前に使ってたわ。

まとめ

導入方法まとめです。

# 1. Chrome拡張のEdit with Emacsを入れる # 2. 拡張の設定でキーボードショートカットを有効化する # 3. サーバを入れて動かす $ git clone https://github.com/kayakaya/edit\_server\_rack.git $ cd edit\_server\_rack $ vim config.ru $ gem install rack $ rackup # 4. おもむろにはてなブログのテキストフィールドを開いてAlt+Enterを押す # 5. エディタが開くので適当に文章を入力して保存して閉じる # 6. ブラウザに戻るとテキストフィールドに文章が挿入されている # 7. Happy Blogging with your favorite Editor!