今までのブログ執筆環境を見直して、もっと効率よく出来ないか試行錯誤しています。
名前は知っていましたが、難しそうなイメージで使わずにいたSublimeTextに手を出してみました。
今までのエディタ
MacとWindowsが混在している環境で続きを書くことがあるので、ブラウザから使えるWebエディタを使っていました。
HTML Instant : Real-Time HTML Editor
モブログ用にTextforceを使っていて、Quicklook機能を使うために、ファイルの保存形式をhtmlにしていました。
直接開くことができないので、MacではCotEditorを、Windowsではサクラエディタを経由してコピペしていました。
CotEditor
価格: 無料(記事公開時)
サイズ: 12.7 MB
カテゴリ: 仕事効率化, 開発ツール
Sublime Text3
Programing用のコード書き専用エディタといったイメージが強くて、ブログ向きでは無いと思い手を出していませんでしたが、執筆環境見直しのためいろいろ調べてみると、結構使えることが分かりました。
むしろブログ用途でも、積極的に使っていくべき、完成度の高いエディタでした。
ダウンロード
Sublime Text3は、公式サイトからダウンロードします。
Sublime Text - Download
現在、Mac、Windows、Ubuntuに対応しています。
Windowsには、Portable版も用意されています。
デフォルトでも見やすい画面は、流石に打ち込み専用という感じですね。
Programing用途で使われることを前提にしたエディタですので、ブログ用にいくつかアドインをインストールします。
機能追加のためにPackageControllをインストール
Sublime Text3は、アドオンやプラグインのようなパッケージという追加機能のシステムが用意されています。
この機能を使うためには、まずPackageControllというパッケージ管理ツールをインストールします。
PackageControllは、公式サイトに表示されているコマンドをSublime Text3のコンソールに入力します。
Installation - Package Control
Sublime Textの２と３用がありますので、バージョンに注意してコピペします。
今回は、Sublime Text3を使用しますので、３用のタブからコピーします。
import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
Sublime Text3のコンソールは、「control + `」のショートカットか、「view → Show Console」で表示します。
こちらに貼り付けると、自動でインストールされます。
パッケージのインストール
PackageControllがインストールできたら、各種パッケージをインストールしていきます。
ショートカット「Ctrl + Shift + p」か、メニューの「Tools → Command Palette...」でCommand Paletteを表示します。
コンソール欄に「install」と入力すると、補完候補に「Package Control:Install Package」が出てきますので、選択してパッケージのインストールモードに入ります。
追加したいパッケージ名を入力します。
選択すると、自動でダウンロードしてインストールが始まります。
このように追加パッケージのインストールは、非常に簡単です。
便利なパッケージを見つけたらすぐに試せるので、自分好みにカスタマイズできますね。
追加したパッケージ
ブログ用途ということで、今回導入したのは以下の通り。
| HTML5 | HTMLの自動補完、ハイライト |
| CSS Snippets | CSSの自動補完 |
| JQuery | JQueryの自動補完 |
| Emmet | HTML,CSSの記述を高速化する「Zen-Codingプラグイン」の次期バージョン |
| Bracket Highlighter | タグの開始タグと閉じタグをハイライト表示 |
| AutoFileName | imgタグのパスを入力する際、ファイル名を補完 |
主に自動補完機能で、HTMLやCSSなど途中まで打てば候補が表示されると、タグのハイライトをさせるパッケージです。
Emmetは、スニペットを記入して、ショートカット「Ctrl + E」で展開させるとコードが一度に記入されるパッケージです。実際使ってみるととても便利です。
スニペットを覚えるのは大変ですが、公式サイトでチートシートが用意されているので、よく使うものは自然と覚えると思います。
Emmet Cheat Sheet
まとめ
Webエディタの利点は、OSを選ばずブラウザさえあれば同じ環境で使えることと、プレヴュー機能がデフォルトで使えるという点でした。
欠点は、ファイル管理がしにくいこと、書きかけのデータが消える危険があること、インターネット環境に繋がっていないと使えないことです。
Sublime Text3は、代表的なOSには対応しているので、同じ環境で使えます。パッケージが豊富なので使い易さの点でもカスタマイズ可能です。
ブログ用に使うには少し設定などが必要ですが、情報も豊富なので調べやすい点も高評価ですね。
エディタ関係は、欲しい機能や使い方によって好みが分かれるので、実際に自分でいろいろ試して見るしかありませんね。
この記事もSublime Text3で書いてますが、今まで使ってきたエディタと比べてもかなり好感触です。
カスタマイズが進み、馴染んでくれば手放せなくなりそうです。
