CSS html PHP Tool

カスタマイズ自由・軽量なエディタ「Sublime Text 2」

職場ではWindows、自宅ではMacなので、両プラットフォームで使えて、更に使いやすいエディタはないものかと探していたところ、「Sublime Text 2」というエディタを見つけました。今年の春頃から話題になっているエディタのようで、Web上の評価がすごく高い様子。 ダウンロードは無料で、継続利用する場合はお金がかかります。とはいっても、無料期間に制限はなく、タイトルバーに（UNREGISTERED）という表示されることと、保存時にたまに「購入する？」（←実際は英語）と聞かれるくらいで、それ以外の制限はないようです。（今のところはですが） HTML、CSS、JSを使っていたり、Zen-cordingも使いたいし、PHPやParlもやるよって人には、ベストなエディタです。IDE系のツールほどゴテゴテしてないので、動作もUIもシンプル・軽量で使いやすいです。

初期設定

  1. 下記リンクからダウンロード出来ます。Windows、Mac、Linuxで利用できます。 Sublime Text: The text editor you’ll fall in love with
  2. 通常通りインストール
  3. UIは全て英語です。そのままではやはり使いづらいので日本語化します。 下記BLOGで日本語化ファイルが公開されています。 ゆーがいぶろぐ（http://blog.huwy.org/article/292827228.html）
  4. 初期設定のままでもそれなりに使えるエディタですが、このエディタはここからの設定次第で自分好みで使いやすくなります。 メニュー「Preferences」→Settings User (command + ,)を開きます。 ※Sublime Textには設定画面がありません。JSON形式でファイルを編集して設定します。

     更に詳しい設定内容は、https://bitbucket.org/dat/sublime-text-2-preferences-japanese/wiki/Preferences%20Japaneseで確認できます。

Packageの導入

自動補完や構文検証などの拡張機能は「Package」として導入します。Sublime Text のPackageはコンソールからインストールします。 その都度コンソールからインストールするのは面倒なので、まずは「Package Control」というPackageを管理するPackageをインストールします。

  1. メニュー「View」→Show Consoleを押すと、下部にコンソール画面が表示されます。

  2. そのコンソール画面に下記をコピーペーストして実行すると、インストールが始まります。終わったら再起動します。

    import urllib2,os; pf=’Package Control.sublime-package’; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),’wb’).write(urllib2.urlopen(‘http://sublime.wbond.net/’+pf.replace(‘ ‘,’%20’)).read()); print ‘Please restart Sublime Text to finish installation’

    英語ページですが、下記ページでも詳しく解説されています。 http://wbond.net/sublime_packages/package_control/installation

  3. Ctrl+Shift+pで「Package Control」の「Command Plette」が開きます。そこに「install」と入力し、「Package Control: Install Package」を選ぶと、Packageを検索できるようになります。 例えば、「html」と入力すると、「html」に関連するPackageがリストで表示されます。項目には名前と簡単な説明文が表示されるので、どんなPackageなのかは分かると思います。

お気に入り機能：Sidebar

Sidebar機能の付いたエディタは、最近では珍しくありません。もうデフォルトで付いていないと選択肢から外すという人もいると思います。 もちろんSublime TextにもSidebarは付いていますが、普通のエクスプローラー型のSidebarとは大違いです。 /CSSフォルダと/html/js/フォルダを開いておきたいときは、この２つのフォルダをSidebarにドラッグすると、この２つの両方を開いておけます。 HTMLフォルダと関連資料のフォルダの両方を開いて、資料を見ながらHTML編集も手間無くできます。 他にも、開いているファイルは「OPEN FILES」にリストで表示され、ファイルを閉じることも簡単で、ファイルをたくさん開く人にはかなり便利な機能だと思います。

お気に入り機能：Project管理

Sidebar機能だけでも便利なのですが、いくつもの案件をこなすときにその都度フォルダをドラッグしたりするのは、大変面倒な作業です。 そんな時には、Project機能が便利です。 メニュー「Project」→Save Project As…を押すと、Sidebarで開いたフォルダやファイル、開いているタブなど、その時の環境を「Project」として保存できます。 次からはこのProjectファイルをメニュー「Project」→Open Projectから開くだけで、Projectを保存したときの状態を復元できますので、すぐに前回の続きから作業を開始できます。 この他にもキーボードショートカットやインストールしたPackageの設定・ショートカットも、全てカスタマイズ可能です。 GUIではなくJSON形式での記述なのでなれないと大変かもしれませんが、カスタマイズ次第でDreamWeaverを超える自分だけのエディタが作れます。

関連記事