Windows版 Sublime Text 3のインストール〜初期設定の手順

Windows版 SublimeText3で開発を始めるまでのインストール〜初期設定の手順をご紹介します。

Sublime Text3とは

SublimeText3はMacやWindows、Linuxなど様々なOSに対応した軽量のテキストエディタです。

名目上は「有料」ということになっていますが、無料でも時々表示される購入をうながすメッセージをキャンセルし続けることで使い続けることができます。

昨今は同じく無料で使い続けられるGitHub社のエディタAtomの人気が急上昇しており、個人的にもいずれはこちらのエディタが主流になると予想しておりますが、Atomは未だ過渡期にあり今日の開発に使うにはある程度慣らされたSublimeTextのほうをオススメします。

インストール

http://www.sublimetext.com/3にアクセスし、「Download」からお使いのOSに合わせたSublimeTextをダウンロードします。

20150726001957

今回はWindows7の64bit版にインストールするので「Windows 64 bit」からダウンロードします。

20150726002920

ダウンロードしたファイルをダブルクリックで実行するとセットアップウィザード(案内)が出るので指示通りに進めてインストールしましょう。

すべて英語ですが「Next」を「Finish」が表示されるまで押し続ければOKです。

20150726003313

インストールが完了すると上画像のように表示されるのでクリックしてSublimeTextを起動しましょう。

インストール作業はこれで終わりです。

設定

インストール直後の初回起動時のSublimeTextは以下のような画面になっています。

20150726003624

このままでは使いにくいので色々と設定していきます。

サイドバーの表示

20150726004045

上のメニューの「View」→「Side Bar」→「Show Side Bar」でファイルやフォルダを管理できるサイドバーを表示することができます。

20150726004122

左側にサイドバーが表示されました。

エリアを分ける

このままでも使用できますが、左側にhtml、右側にCSSのように画面を分割して使えると使いやすいので画面分割を設定します。

20150726004826

メニューの「View」→「Layout」→「Column:2」を今回は選びます。

3分割したければ「Column:3」を、4分割したければ「Column:4」を選んでください。

「Rows」は画面を縦分割ではなく横に分割したい場合に選択しますが、私は未だに横分割を使ったことは一度もないです。

20150726004921

画面が縦に分割され、左右で使うことができるようになりました。

カラースキームの変更

このまま使用しても問題ないのですが、個人的には黒画面に白字があまり好きでないので画面の配色などを制御する「カラースキーム」を変更します。

20150726005047

メニューの「Preferences」→「color Scheme」→「Solarized(Light)」を今回は選びます。

20150726005116

配色が変更されて画面が明るくなりました。

SublimeTextはデフォルトでいくつかカラースキームを選べるので色々試して自分に合う設定を探してみてください。

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

パッケージ(プラグイン)はSublimeTextにデフォルトでは設定されていない機能を自分でどんどん追加していくことができる便利な機能です。

SublimeTextは世界中の有志が開発した便利なパッケージを無料で利用することができます。

そんな便利な機能のパッケージを使うためには少し複雑な作業が必要になるので順を追って解説していきます。

コンソールの表示

まずは「コンソール」というエリアを表示します。

20150726011550

「View」→「Show Console」を選択すると、

20150726011619

上画像のように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)

※上記コードがうまくいかない場合はコチラから最新版の記述をコピーしてください。

20150726011746

上画像のように貼り付けたらキーボードの「Enter」キーを押して実行してください。

20150726012101

正常に終了すると「Preferences」→「Package Control」というパッケージをインストールしていくためのメニューを選択できるようになっています。

以上でパッケージを使うための前準備は終了です。

エディタを自分好みに設定する

20150726014055

SublimeTextはデフォルトのままでは文字サイズが小さかったり行間が狭かったりと使いにくいので、使いやすいように自分好みに設定していきます。

20150726014141

「Preferences」→「Setting – User」を選択します。

20150726014527

すると上画像のような画面が表示されるのでココに各種設定を書いていきます。

20150726014919

設定例としては上画像のようになります。

最初は各項目の意味がわからないと思うので以下をコピペして保存してみてください。

{
	"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 //長い行を折り返すようにする
}

20150726015453

すると上画像のようになります。文字サイズや行間が変更されました。

これは代表的な設定のほんの一例ですが、SublimeTextには色々な設定項目が用意されているので慣れてきたら調べながら自分好みのエディタに設定していってみてください。


以上がSublimeTextのインストール〜初期設定の手順でしたが正常に作業を終了することができたでしょうか。

Dreamweaverなどに比べると各種設定が少しとっつきにくく感じるかもしれませんが、ひとつひとつは難しくないので順をおってゆっくり取り組んでみてください。