わいひら氏(寝ログ)リコメンドで、無料エディタBracketsを使いはじめたワイ氏。

その高機能さに今更ながら打ち震えております。スゴイ!これスゴイ!スゴイ!!(語彙力)
無料でここまでできるって、素晴らしいです。
Bracketsをオススメしたい人(この記事を読んでほしい人)
- オイラと同類なHTML直打ち大好きロートル野郎(イエーイ仲間!!)
- ワードプレスでブログ運営している人(PHPのカスタマイズをする人)
- C系とかJavaScriptとかRubyとかPythonとかVBScriptとか使う人
かゆい所に手が届く!絶妙コーディング体験
Brackets、今までも結構普通に使ってたんです。
主にワードブレスのPHPをいじったりCSSをいじったりで、カスタマイズする時に使用していました。その時も「ワーイ便利だなー」くらいには思っていました。
なぜ今回わたしがBracketsのすばらしさに打ち震えることになったかというと、一からサイト構築をする機会があったからです。まあサイト構築といっても大げさなものではなくて、自分の仕事用のテンプレートを整理しただけなんですけれども。
だけど、それだけで「こんなに便利だったのか!」と驚きました。ギークの力、すごい。
以下に、わたしの個人的に感動したポイントを挙げます。
タグを勝手に閉じてくれる

divの「<d」を入れた時点で予測変換がバババッと出ます。
そして、 <div>と打ち終わった瞬間――

閉じてくれます。早っ!!
リンクを貼ろうとしたら「これじゃね?」ってサジェストしてくれる

リンクをはる時って、正確に記述しないと上手くつながりません。なので、ファイル名が長かったり、パスが下層だったり(フォルダが何個もあったり)したら、結構面倒くさいことになります。正確に覚えてられなかったりする。
だけど、Bracketsは打ち込んでいくとその下層にあるファイルやフォルダ名を予測してくれます。「そうそう、このファイル~」ってすぐ見つけられて便利!
打ち込んだHTMLをChromeで即プレビュー
エディタでコーディングしたものって、ブラウザでどう表示されるか、そのままではわかりません。いちいちブラウザを立ち上げて、アドレスバーにファイルを指定して見なければなりません。
だけど、Bracketsはボタン一つで動作確認できるのです!
やり方は動画を見ていただければイメージしやすいかと。
しかも、1回開けばリアタイで「どう変わったか」がわかります。ありがたい!
どんなCSSを指定しているのか 一目でわかる
「あれ、このclassって何を指定していたっけ…?」って混乱しちゃうことってありますよね。Bracketsなら、いちいちスタイルシート(CSS)のファイルを開かなくても、何を指定しているか一目でわかるんです!
動画のように、調べたいclassを指定した状態でCtrl(Command)+Eを押すと、該当部分のCSSが出てきます。「ちょっと色変えたいな~」とか「ちょっと文字の大きさ変えたいな~」とか「余白もっと増やそうかな~」とか、本文(HTML)をいじりながらスタイルもいじれちゃうんです!
シンプルなサイトだったら、Bracketsで十分構築可能
今回わたしが構築したのは、自分の仕事用のテンプレート整理用サイトです。
ローカルにファイルを置いて、地味に地味に使っています。↓こんなかんじ

予約が来たら「はい遠隔のお客様~」「はいカウンセリング~」「オプションはこれでーす!」ってボタンをポチポチッとしていくと、そのお客様に必要なご案内がパッパッパッパって表示されまーす!って仕組みですね。
名前とか日付とかはjavascriptちゃんで出力しときます。
要するに、夢小説の名前変換と同じ要領です!オタクスキルは無駄にならない。
あとはコピペしてお客様に返信すればよいのです。らっくちーん!
まあ、もっと言えば、エクセルでちゃんとマクロ組んだほうが、より精度が高くて保守しやすいシステムを作れるんでしょうけれども……。↓こういうやつ。
だけど、Bracketsを使ってサイト構築するなら、これで不便なく行けちゃいます。そのくらいコーディングしやすいです。
有料のソフトだったらこれくらいの機能は当たり前だと思いますが、無料でここまでできるのがすごいのです。すばらしい。
Bracketsのダウンロード
Bracketsのサイトからダウンロードできます。無料です。試しに使ってみて損は無し。

ブログカードが英語で表示されてますが、ちゃんと日本語で使えます。