もう既に有名で、もはや紹介する必要すらないであろうものではありますが、SublimeTextをしばらく使ってみたのでその話を書いてみます。
→Sublime Text: The text editor you’ll fall in love with
「恋に落ちるエディタ」という意味になるでしょうか。TOPページでデモが流れていて機能が紹介されていて、便利そうに見えます。Macっぽい感じがしますが、Windowsでも使えます。LinuxもOKみたいです。
とはいえ、このエディタの一番いいところは「何も設定しなくてもカッコイイ」というところではないかと個人的には思っています。エディタといえば、大抵は無骨な、メモ帳とほとんど変わらない、あるいはちょっと便利な機能を持っているものか、もっと統合開発環境みたいに重くて、やっぱり無骨なものがほとんどな気がしています。もちろん、カスタムすればどれも十分に良い感じになるのだけど、特に何もしなくてもカッコイイものは少ないのでは、と。(知らないだけかもしれない)。使っていたらそれなんてエディタですか？ってプログラマじゃない人が聞きたくなるエディタってすごいんじゃないかと。
まあ、カッコイイかどうかはカスタムすれば良いとして、そうでない部分も充実しています。自分が一番感動したのは、フォルダを投げると、そのフォルダをプロジェクトとみなしてくれて、左側のフォルダツリーに表示してくれるところです。いちいちACtionScriptプロジェクトだとか、Flexプロジェクトだとか、Javaプロジェクトだとか、選ぶ必要がない。フォルダを投げ込むだけ。HTMLの環境として、NetBeansを使ってたこともあったんですが、HTMLのプロジェクト、という概念がそもそも無かったのでうーん、と思ってたんですが、このフォルダぶっこみ方式は何も考えずにいけたのでいいな、と。他に、Ctrl+Dの一括編集機能も便利です(デモで紹介されているやつです)。
拡張機能をインストールする場合、結構面倒なエディタが多いという認識なんですが、SublimeText2の場合、PackageControlというプラグインをインストールすると、各種便利な拡張機能が簡単に使えるようになります。
PackageControlをインストールするときは若干迷ったけれど、こちらから「Install」に進み、書いてあるそのままを実行すればOKでした。
→Sublime Package Control – a Sublime Text 2 Package Manager by wbond
(キーが分かりにくいですが、日本語キーボードの場合、WinはCtrl+@、MacはCtrl+Shift+@と思います。(⌘ではなくてCtrl))
終わったら再起動。
PackageControlを最初に入れるのがポイントで、あとは
Ctrl+Shift+P
を入力後、出てきたウィンドウで「inst」などと入れてEnterして、その後のウィンドウでそれっぽい名前を入れれば、インストールできるプラグインが表示されます。簡単。実に簡単。
とりあえずは以下のプラグインを入れてみました。
- Emmet
- jQuery
- SCSS
jQueryはまあjQueryなので、EmmetとSCSSを紹介。
Emmet
EmmetはHTMLタグ挿入のためのプラグインです。昔はZenCodingという名前で、こちらは自分も名前だけ聞いたことがありました。(が、使ってなかった。こんなにHTMLを作ることになるとは思わなかったから…。)
html:5
とだけ書いたものを5の右隣りにカーソルを合わせてCtrl+Eすると、
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
という感じにしてくれたりとか。改行してあるテキストをliタグでリストにしてくれたりとか、HTMLでやってるといちいち面倒だなぁと思うところをさくさくやってくれたりします。
Macだと以下の設定をしないとうまく動かなかったような気がします。設定ファイルを「⌘+,」で開いて、
//tabでの展開の上書きをしない : Emmet "disable_tab_abbreviations" : true, //改行でフォーマットしない(日本語確定時の誤動作防止) : Emmet "disable_formatted_linebreak" : true
と書くと、標準のTab展開をせず、また、日本語確定したときに消える、という現象を防ぐことができます。
SCSS
CSSの拡張言語にSassというものがあって、その文法の1つ…ですが多くの場合、SassはSCSSで書かれているものが多いように思います。
→Sass – Syntactically Awesome Stylesheets
何が便利かって言うと、
- 変数が使える
- 関数が使える
- ネストできる
というあたりでしょうか。
Sass(+Compass)についてはこちらのサイトがかなり参考になったので、オススメです。
→SassとCompassを使って楽しくCSSコーディング！ – Develo.org
導入から利点についてまでまとめられているので、使ったこと無い方はぜひ。
さて、そろそろHTML5らしい書き方を覚えないと、と思いはじめています。sacrifsでした。