| Program
ブラウザの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 Emacs
でvim
を利用するためのものですので、それを参考に書き換えます。
# 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
を利用しています。