Windows版 SublimeText3で開発を始めるまでのインストール〜初期設定の手順をご紹介します。
Sublime Text3とは
SublimeText3はMacやWindows、Linuxなど様々なOSに対応した軽量のテキストエディタです。
名目上は「有料」ということになっていますが、無料でも時々表示される購入をうながすメッセージをキャンセルし続けることで使い続けることができます。
昨今は同じく無料で使い続けられるGitHub社のエディタAtomの人気が急上昇しており、個人的にもいずれはこちらのエディタが主流になると予想しておりますが、Atomは未だ過渡期にあり今日の開発に使うにはある程度慣らされたSublimeTextのほうをオススメします。
インストール
http://www.sublimetext.com/3にアクセスし、「Download」からお使いのOSに合わせたSublimeTextをダウンロードします。
今回はWindows7の64bit版にインストールするので「Windows 64 bit」からダウンロードします。
ダウンロードしたファイルをダブルクリックで実行するとセットアップウィザード（案内）が出るので指示通りに進めてインストールしましょう。
すべて英語ですが「Next」を「Finish」が表示されるまで押し続ければOKです。
インストールが完了すると上画像のように表示されるのでクリックしてSublimeTextを起動しましょう。
インストール作業はこれで終わりです。
設定
インストール直後の初回起動時のSublimeTextは以下のような画面になっています。
このままでは使いにくいので色々と設定していきます。
サイドバーの表示
上のメニューの「View」→「Side Bar」→「Show Side Bar」でファイルやフォルダを管理できるサイドバーを表示することができます。
左側にサイドバーが表示されました。
エリアを分ける
このままでも使用できますが、左側にhtml、右側にCSSのように画面を分割して使えると使いやすいので画面分割を設定します。
メニューの「View」→「Layout」→「Column:2」を今回は選びます。
３分割したければ「Column:3」を、4分割したければ「Column:4」を選んでください。
「Rows」は画面を縦分割ではなく横に分割したい場合に選択しますが、私は未だに横分割を使ったことは一度もないです。
画面が縦に分割され、左右で使うことができるようになりました。
カラースキームの変更
このまま使用しても問題ないのですが、個人的には黒画面に白字があまり好きでないので画面の配色などを制御する「カラースキーム」を変更します。
メニューの「Preferences」→「color Scheme」→「Solarized(Light)」を今回は選びます。
配色が変更されて画面が明るくなりました。
SublimeTextはデフォルトでいくつかカラースキームを選べるので色々試して自分に合う設定を探してみてください。
パッケージ インストールの準備
パッケージ（プラグイン）はSublimeTextにデフォルトでは設定されていない機能を自分でどんどん追加していくことができる便利な機能です。
SublimeTextは世界中の有志が開発した便利なパッケージを無料で利用することができます。
そんな便利な機能のパッケージを使うためには少し複雑な作業が必要になるので順を追って解説していきます。
コンソールの表示
まずは「コンソール」というエリアを表示します。
「View」→「Show Console」を選択すると、
上画像のようにSublimeTextの画面下にカーソルが点滅している入力エリアが表示されます。
次に以下のコードをコピーしてそのエリアにコピー＆ペーストしてください。
import urllib.request,os,hashlib; h = ‘eb2297e1a458f27d836c04bb0cbaf282’ + ‘d0e7a3098092775ccb37ca9d6b2e4b7d’; 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)
※上記コードがうまくいかない場合はコチラから最新版の記述をコピーしてください。
上画像のように貼り付けたらキーボードの「Enter」キーを押して実行してください。
正常に終了すると「Preferences」→「Package Control」というパッケージをインストールしていくためのメニューを選択できるようになっています。
以上でパッケージを使うための前準備は終了です。
エディタを自分好みに設定する
SublimeTextはデフォルトのままでは文字サイズが小さかったり行間が狭かったりと使いにくいので、使いやすいように自分好みに設定していきます。
「Preferences」→「Setting – User」を選択します。
すると上画像のような画面が表示されるのでココに各種設定を書いていきます。
設定例としては上画像のようになります。
最初は各項目の意味がわからないと思うので以下をコピペして保存してみてください。
{
"color_scheme": "Packages/Color Scheme – Default/Solarized (Light).tmTheme",
"default_encoding": "UTF-8", //文字コードの設定
"fallback_encoding": "UTF-8", //文字コードの設定
"font_size": 16, //文字サイズの設定
"highlight_line": true, //現在選択中の行に背景色を付ける
"line_padding_top": 7, //行の隙間を設定する
"tab_size": 4, //「tabキー」を押したときのサイズを設定する
"word_wrap": true //長い行を折り返すようにする
}
すると上画像のようになります。文字サイズや行間が変更されました。
これは代表的な設定のほんの一例ですが、SublimeTextには色々な設定項目が用意されているので慣れてきたら調べながら自分好みのエディタに設定していってみてください。
以上がSublimeTextのインストール〜初期設定の手順でしたが正常に作業を終了することができたでしょうか。
Dreamweaverなどに比べると各種設定が少しとっつきにくく感じるかもしれませんが、ひとつひとつは難しくないので順をおってゆっくり取り組んでみてください。