Web制作環境を整える その1 – Sublime Text 3 で始める今時の開発環境

Sublime Text で始めよう

Web制作に必要なツールは、何は無くともまずエディタからでしょ、ってことで、素敵なテキストエディタ「Sublime Text 3」を導入します。ちなみに、開発者とって素敵なだけで素人には全くお勧めできないですが。

Sublime Text の現時点でのバージョンは2.0.2ですが、ベータ版としてSublime Text 3が結構前から配布されています。
今回は Sublime Text 3 の64bitポータブル版を導入してみます。

Sublime Text 公式から目当てのファイルをダウンロードします。
ポータブルバージョンもありますが、スタンダードをダウンロードしてインストールしました。

sublime_text.exe を起動しましょう。こじんまりとした黒いウィンドウが表示されました。

このエディタの特徴は、世界中のユーザが作成してくれた追加機能(パッケージ)をオンラインで取得し、機能を強化・カスタマイズしていける点です。と同時に、出来る事が多すぎたり、設定が複雑かつ多すぎなのが初心者にお勧めできない点でもあります。

Dreamweaver や他の統合開発環境と違い、非常に軽快に動作しますし、プロジェクト管理なんかもできちゃいます。

そして、パッケージを追加する事でVimライクなキーストロークへ変更する事が可能なことも大きなポイントです。

何はともあれ、パッケージを取得するためのパッケージ(?)である、「Package Control」をインストールしましょう。これを入れないと何も始まらない。

https://sublime.wbond.net/installation にアクセスして Sublime Text 2用のコードをコピーします。
コピーできたら、Sublime Text 2 のメニュー [View] – [Show Console] を選択します。

コンソールが表示されるので、先ほどコピーしたコードをペーストして Enter
ってなんかエラーでた。

通信関係のエラーのようで、再起動しろって言われたので Sublime Text 3 を再起動しましたが、無事インストールできた模様です。

後は好きなパッケージを入れていけばいいのですが、とりあえず日本語に対応させたいのでその手順を。

メニュー自体も「Japanize」というパッケージで日本語化できるのですが、パッケージを追加して増えていくメニュー項目もどうせ英語ですし、よく使う機能はショートカットキーで覚えてしまうので、メニューの日本語化はしません。

メニューの [Preferrence] – [Package Control] でもいいのですが、ここは漢らしくキーボードショートカットで Ctrl + Shift + p を押します。これはメニューでいう [Tools] – [Command Palette] って奴ですね。

ここに文字を打っていくと、使用できる機能をインクリメンタルサーチしてくれます。アバウトな感じにキーボードを打ち込んで「Package Control: Install Packages」を選択して Enter

数秒の読み込みの後、配布されているパッケージのリストが表示されます。ここでもインクリメンタルサーチが働くので、「IMESupport」を選択します。

このパッケージは、Windows版で日本語を入力する時にインライン入力にならない動作を、インライン入力に対応させるものです。Mac版を使ってる人には要らないですね。

次は、日本語の文字コードへの対応です。日本語環境で使用される文字コードは主に3つ。「Shift-JIS」「EUC-JP」「UTF-8」の3つです。それぞれに利用されてきた経緯は違いますが、Sublime Text の標準機能では、UTF-8 にのみ対応しています。日本中の人が UTF-8 を使ってくれれば、開発者として非常に楽なのですが、多くのシェアをしめる Windows で使用される、日本語の標準文字コードは Shift-JIS ですから、対応させてあげる必要があります。

文字コードを変換する「ConvertToUTF8」というパッケージを、先程と同様にインストールしましょう。

このパッケージをインストールすることで、「Shift-JIS」「EUC-JP」の他に、中国語と韓国語に対応するようになりました。Shift-JIS で保存する場合の使い方は、メニューの [File] – [Set File Encoding to] から [Japanese(Shift-JIS)] で文字コードを変換してから保存します。[Reopen whis Encoding] や [Save with Encoding] に組み込めればスマートになりそうですね。

「ConvertjaZenHan」というパッケージも見つけたので、ついでにインストールしちゃいます。このパッケージは名前の通り、全角<->半角変換をしてくれる機能ですね。
メニューの [Tools] – [ConverjaZenHan] から選択範囲内とファイル全体の変換を選べます。

これで日本語にも問題なく対応できるようになりました。次回は、Sublime Text 2 をカッコよく決めるカスタマイズをしていきます。