position: absolute;

ブラウザのtextareaでもSublime Textを利用する


このエントリーはWeb制作者のためのSublime Textの教科書のアウトテイク的なエントリーです。

CMSなどを用いて制作や運用をしていると、どうしてもtextareaとの付き合いが多くなります。チャチャッと終わる場合はいいのですが、テキストが多い場合や、HTMLやマークダウンで入力するときはエディターでやりたくなります。コピーペーストでも良いといえば良いのですけど、そういうひと手間は減らすに限るので、そのやり方をいくつか紹介しておきます。

ちなみにSublime Textとしているところをそれ以外の自分のお気に入りのエディターにしてしまえば大体そのまま利用できると思います。

WindowsではText Editor Anywhere

Windowsを利用している場合はText Editor Anywhereでいいと思います。私もWindows環境ではこれでSublime Textを利用しています。

これについては下記のスライドを参照してください。

Text editor anywhereでtextareaもsublime text 2

Mac環境では…

以前は、QuickCursorがText Editor Anywhereの様に利用できましたが、現在は開発の停止やSandboxの変更などで現実的に利用できません。なので、ブラウザごとに対応を行うことになります。

Firefox

It's All Text!を利用すればSublime Textに関わらず、エディターを指定して利用できます。ショートカットの設定も可能です。また、マークダウンの利用が多い場合は、.mdなど拡張子を指定しておけばシンタックスの効いた状態でSublime Textが開きます。


Google Chrome

Google Chromeの場合、セキュリティポリシーの関係か、他のアプリケーションとの連携がなかなか難しいようなので、結構ややこしい感じになります。以下の手順で導入します。

1. Edit with Emacsをインストール

Edit with Emacsをインストールします。名前にEmacsと入っているようにEmacsを利用するためのアドオンですが、ここから調整してSublime Textで利用できるようにします。

2. edit-serverを入手

edit-serverをcloneするかダウンロードします。Pythonで動作するプログラムです。それを配置します(私の場合は~/bin/edit-serverに配置しました。)

これは、chromeとSublime Textが直接データをやりとりすることができないため、Mac内でテキストデーターをやりとりするためのサーバを立ち上げるために必要となるものです。ですので、chromeないのtextareaでSublime Textを利用する際には必ずこのサーバーを起動する必要があります。

3. __init__.pyを編集

edit-serverのディレクトリ内にある__init__.pyを編集します。編集する箇所は36行目あたりのOPEN_CMDの定義部分です。もともとedit-serverはEdit with Emacsvimを利用するためのものですので、それを参考に書き換えます。

# OPEN_CMD = shlex.split(os.environ.get('EDIT_SERVER_EDITOR', 'gvim -f'), comments=False)
OPEN_CMD = shlex.split(os.environ.get('EDIT_SERVER_EDITOR', 'subl -w'), comments=False)

ちなみにSublime Textの指定にsublとしていますが、それについてはWeb制作者のためのSublime Textの教科書の155ページのコラム『MacでSublime Textをターミナルから開く』を参照してください(Web上でも情報はあると思いますが)。その設定を行っていない場合はSublime Textのアプリケーションのパスを記述してください。

さらに私の場合は.bash_profileに下記エイリアスを記述しています。これでターミナルでeditserverと打ち込むとedit-serverが起動します。

alias editserver='python ~/bin/edit-server/edit-server'

4. Edit with Emacsを利用してSublime Textを起動

これでedit-serverが起動している状態であれば、chrome内のtextareaを右クリック(ショートカットは[option] + [return])するとSublime Textが起動します。その状態でファイルを保存すれば編集内容が反映されます。

Safari

すいません。知りません。誰かご存じですか。

Alfredを利用する

最近(?)マカーの間で話題沸騰のAlfredを利用する方法もあります。ただし、無料版でなく、17ユーロ(このエントリー書いてた時点で3,000円ぐらい)を支払うと利用できるPowerPackが必要です。これであれば、ブラウザは(おそらく)どれでも利用できます。

1. A QuickCursor Alternativeのalfredworkflowを入手する

A QuickCursor Alternativeからダウンロードしてファイルをダブルクリックするとalfredworkflowが利用できる状態になります。

2. ブラウザのtextareaにフォーカスが当たっている状態でAlfredを起動する

設定したショートカットなどでAlfredを起動してeditwithと入力します。その後Sublime Textを指定します(sublimeと打ち込む途中で出てくると思います)。それで、textareaの内容でSublime Textが起動します。



3. 編集終了後再びAlfredを起動する

Sublime Textでの編集が完了したら再びAlfredを起動してpaste backと入力します。するとtextareaに編集内容が反映されて該当のウィンドウが閉じられます。これは編集を保存しなくても反映されます。

4. 既存のテキストが存在する場合はcut(切り取り)

注意点としてはPaste Backすると、Sublime Text内のテキストがまるっと追加されてしまうので、既存のテキストが存在刷る場合はtextarea内をカットしてSublime Textを起動してペーストするという形にしてください。



それにつけてもText Editor Anywhereの便利さよ

2年前に東京で行われたSublime Textの勉強会に岡山サテライト会場を立てて、岡山からサテライトセッションを行った時に、Text Editor Anywhereを紹介したのですが、その時に主催の吉川さんから「Macでは?」と聞かれて「Windowsだけです(キリッ)!」と返事して「大都会にはWindowsしか売っていない」という噂が立てられた程ですが(違、まあ、Macの場合はFirefoxでない場合はいろいろややこしいです。当時はAlfredとか知りませんでしたし、そもそもMac持ってなかったですし。

Alfredに関しては有料のPowerPackですので、「紹介されても!」という感じかも知れませんが、alfredworkflowが利用できるようになると相当便利ですので、一度PowerPackへのアップグレードは検討いただいてもいいかと思います。

ちなみに私は主にEdit With Emacsを利用しています。