Apr 9, 2014
Sublime Text 3をDreamweaver並みに使いやすくする方法
デザイナーbizです。
「テキストエディタは何を使っているんですか？」「おすすめはありますか？」とエディタ話で盛り上がる時期かと思います。
私の場合はDreamweaverや秀丸を使ってコーディングをしていましたが、Sublime Text 3 を使ってみてとても使い心地が良かったので、その導入方法を紹介していこうと思います。
ここでの説明は、Win + Sublime Text 3 環境をベースに説明していきます。
目次
- Sublime Textのダウンロード
- Dreamweaver並みに使える設定にする方法
- 機能追加をするにはまずPackageControllをインストール
- 日本人なら初めに知りたい日本語化
- 日本人なら一度は悩まされる文字コード問題
- Dreamweaver並みに使えるパッケージ一覧
- まとめ
Sublime Textのダウンロード
Sublime Textは言ってしまえば、コーディングに特化したテキストエディタです。
Mac・Windows・Linuxに対応しています。
公式サイトからSublime Text3をダウンロード
http://www.sublimetext.com/3
この中から、自分の使っているOSをクリックしてダウンロードします。
Dreamweaver並みに使える設定にする方法
機能追加をするにはまずPackageControllをインストール
PackageControllとは、Sublime Textに機能を追加できるプラグインです。
これを入れると、HTMLのコードをハイライトしてくれるパッケージや入力補助をしてくれるパッケージなどを簡単にSublime Textに機能を追加することが出来ます。
（1）PackageControllのサイトからインポートスクリプトをコピーします。
Sublime Text 3 PackageControll
https://sublime.wbond.net/installation
「SUBLIME TEXT 3」のタブの内容をコピーしてください。
import urllib.request,os; pf = ‘Package Control.sublime-package’; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), ‘wb’).write(urllib.request.urlopen( ‘http://sublime.wbond.net/’ + pf.replace(‘ ‘,’%20′)).read())
（2）Sublime Textを開いて、「ctrl+`」または、 「View > Show Console」 でコンソールを表示します。
できたら下の入力枠に先ほどコピーした内容をペーストして「Enter」を押してください。
これでPackage Controlが使用できるようになりました。
日本人なら初めに知りたい日本語化
Package Controlから、日本語化するためのパッケージをインストールする手順を紹介していきます。
まず、「Ctrl + Shift + p」でPackage Controlを起動します。
「Package Control:Install Package」を選択して
「japanize」入力してパッケージをインストールします。
しかし日本語化はパッケージインストールしただけでは終わらないので、適応手順に沿って日本語化を行います。
インストール後に表示される適応手順に沿って行けばメニューが日本語化されます。
適用手順
- C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Japanizeにインストールされている*.jpファイルを、
C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Defaultにコピーします。※Defaultフォルダがない場合は作成してください。 - コピーしたファイルをオリジナルのファイル（.jpが付かないファイル）と置き換えます。（念のため、オリジナルのファイルが有る場合は.orgなどを付けて保管しておきましょう。）
- C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Japanize\Main.sublime-menu（.jpが付かない方）を、
C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Userにコピーします。すると、他のプラグインで上書きされてしまっているトップメニューも日本語化されます。
日本人なら一度は悩まされる文字コード問題
Sublime Textを使っていると必ず文字コードの問題に悩まされます。
Sublime TextはUTF-8が文字コードなので、Shift-jisのファイルを開くとばっちり文字化けしてしまいます。
そこで、文字化けに対応するパッケージをインストールする手順を紹介していきます。
「Package Control:Install Package」を選択して
「ConvertToUTF8」入力してパッケージをインストールします。
↓Shift-jisのファイルを開いた時の表示
↓プラグインを入れた後のShift-jisのファイルを開いた時の表示
Dreamweaver並みに使えるパッケージ一覧
HTML入力補助系
パッケージ名内容HTML5HTML5の自動補完 HTML5 のスニペット集と自動補完とハイライト。CSS SnippetsCSSの自動補完jQueryjQueryの自動補完EmmetHTML,CSSの記述を高速化する「Zen-Codingプラグイン」の次期バージョンBracket Highlighterタグの開始タグと閉じタグをハイライト表示タグとかブラケットの開始と終了を強調して表示する。AutoFileNameimgタグのパスを入力する際、ファイル名を補完sublimelint構文エラーを検出して表示する。SublimeCodeIntel通常は Ctrl + Space で補完を表示するものを自動で表示する。Tag閉じタグ </ を打つと補完してくれる。ColorPickerカラーピッカーを表示Emmet LiveStyleDeveloper Toolsから直接CSSが編集出来る。（Google ChromeまたはSafariの連動が別途必要）
FTP系
パッケージ名内容SFTPSublime Text上からFTPでアップロード
その他
パッケージ名内容IMESupport全角日本語入力に対応させる
まとめ
このように、「Package Control:Install Package」→好きなパッケージを入れるという手順を覚えてしまえば、どんどんDreamweaver並みにカスタマイズ出来てしまいます。
正直今回の記事でデフォルトの便利な機能が紹介出来なかったので機会があれば紹介します。
