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

 

今までのブログ執筆環境を見直して、もっと効率よく出来ないか試行錯誤しています。
名前は知っていましたが、難しそうなイメージで使わずにいた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で書いてますが、今まで使ってきたエディタと比べてもかなり好感触です。
カスタマイズが進み、馴染んでくれば手放せなくなりそうです。

Amazonでお得に買う方法

ネット通販の代表格Amazon。Amazonプライム会員に登録すると送料無料の他にも様々な特典がついてきます。

そんなAmazonでの買い物を、さらにお得にするなら、Amazonギフト券への購入チャージをおすすめします。

 

現金でチャージするたびに、チャージ額 × 最大2.5%分のポイントがもらえます。

Amazonプライム会員の方なら是非活用して、更にお得に利用しましょう。

CHARGE NOW

コンビニ・ATM・ネットバンクが対象

1円単位で購入可能

スポンサーリンク

フォローする