ブログエディタ用にSublime Text3をインストール

SublimeText3_eye

今までのブログ執筆環境を見直して、もっと効率よく出来ないか試行錯誤しています。
名前は知っていましたが、難しそうなイメージで使わずにいた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

SublimeText3_inst001
現在、Mac、Windows、Ubuntuに対応しています。
Windowsには、Portable版も用意されています。

SublimeText3_inst002
デフォルトでも見やすい画面は、流石に打ち込み専用という感じですね。

Programing用途で使われることを前提にしたエディタですので、ブログ用にいくつかアドインをインストールします。

機能追加のためにPackageControllをインストール

Sublime Text3は、アドオンやプラグインのようなパッケージという追加機能のシステムが用意されています。
この機能を使うためには、まずPackageControllというパッケージ管理ツールをインストールします。

PackageControllは、公式サイトに表示されているコマンドをSublime Text3のコンソールに入力します。
Installation – Package Control

Sublime Textの2と3用がありますので、バージョンに注意してコピペします。
今回は、Sublime Text3を使用しますので、3用のタブからコピーします。

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)

SublimeText3_inst003
Sublime Text3のコンソールは、「control + `」のショートカットか、「view → Show Console」で表示します。

SublimeText3_inst004
こちらに貼り付けると、自動でインストールされます。

パッケージのインストール

PackageControllがインストールできたら、各種パッケージをインストールしていきます。

SublimeText3_inst005
ショートカット「Ctrl + Shift + p」か、メニューの「Tools → Command Palette…」でCommand Paletteを表示します。

SublimeText3_inst006
コンソール欄に「install」と入力すると、補完候補に「Package Control:Install Package」が出てきますので、選択してパッケージのインストールモードに入ります。

SublimeText3_inst007
追加したいパッケージ名を入力します。

SublimeText3_inst008
選択すると、自動でダウンロードしてインストールが始まります。

このように追加パッケージのインストールは、非常に簡単です。
便利なパッケージを見つけたらすぐに試せるので、自分好みにカスタマイズできますね。

追加したパッケージ

ブログ用途ということで、今回導入したのは以下の通り。

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で書いてますが、今まで使ってきたエディタと比べてもかなり好感触です。
カスタマイズが進み、馴染んでくれば手放せなくなりそうです。

スポンサーリンク







シェアする

フォローする