無料エディタBracketsが使いやすすぎる件

ビジネス:スピリチュアルブログ
写真ACK

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

無料エディター「Brackets」にも恋に落ちた
Adobe製のテキストエディター「Brackets」よかった点、使い方、インストール方法などの紹介です。Bracketsは、初めて利用した時にデフォルト状態の使いやすさに衝撃を受けました。WEB制作初心者には、おすすめのフリーエディターだと思います。


その高機能さに今更ながら打ち震えております。スゴイ!これスゴイ!スゴイ!!(語彙力)
無料でここまでできるって、素晴らしいです。

Bracketsをオススメしたい人(この記事を読んでほしい人)

  • オイラと同類なHTML直打ち大好きロートル野郎(イエーイ仲間!!)
  • ワードプレスでブログ運営している人(PHPのカスタマイズをする人)
  • C系とかJavaScriptとかRubyとかPythonとかVBScriptとか使う人

かゆい所に手が届く!絶妙コーディング体験

Brackets、今までも結構普通に使ってたんです。
主にワードブレスのPHPをいじったりCSSをいじったりで、カスタマイズする時に使用していました。その時も「ワーイ便利だなー」くらいには思っていました。

なぜ今回わたしがBracketsのすばらしさに打ち震えることになったかというと、一からサイト構築をする機会があったからです。まあサイト構築といっても大げさなものではなくて、自分の仕事用のテンプレートを整理しただけなんですけれども。

だけど、それだけで「こんなに便利だったのか!」と驚きました。ギークの力、すごい。
以下に、わたしの個人的に感動したポイントを挙げます。

タグを勝手に閉じてくれる

divの「<d」を入れた時点で予測変換がバババッと出ます。

そして、 <div>と打ち終わった瞬間――

閉じてくれます。早っ!!

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

リンクをはる時って、正確に記述しないと上手くつながりません。なので、ファイル名が長かったり、パスが下層だったり(フォルダが何個もあったり)したら、結構面倒くさいことになります。正確に覚えてられなかったりする。

だけど、Bracketsは打ち込んでいくとその下層にあるファイルやフォルダ名を予測してくれます。「そうそう、このファイル~」ってすぐ見つけられて便利!

打ち込んだHTMLをChromeで即プレビュー

エディタでコーディングしたものって、ブラウザでどう表示されるか、そのままではわかりません。いちいちブラウザを立ち上げて、アドレスバーにファイルを指定して見なければなりません。

だけど、Bracketsはボタン一つで動作確認できるのです!

Brackets: A Free Open Source Code Editor for the Web

やり方は動画を見ていただければイメージしやすいかと。
しかも、1回開けばリアタイで「どう変わったか」がわかります。ありがたい!

どんなCSSを指定しているのか 一目でわかる

「あれ、このclassって何を指定していたっけ…?」って混乱しちゃうことってありますよね。Bracketsなら、いちいちスタイルシート(CSS)のファイルを開かなくても、何を指定しているか一目でわかるんです!

Brackets: A Free Open Source Code Editor for the Web

動画のように、調べたいclassを指定した状態でCtrl(Command)+Eを押すと、該当部分のCSSが出てきます。「ちょっと色変えたいな~」とか「ちょっと文字の大きさ変えたいな~」とか「余白もっと増やそうかな~」とか、本文(HTML)をいじりながらスタイルもいじれちゃうんです!

シンプルなサイトだったら、Bracketsで十分構築可能

今回わたしが構築したのは、自分の仕事用のテンプレート整理用サイトです。
ローカルにファイルを置いて、地味に地味に使っています。↓こんなかんじ

予約が来たら「はい遠隔のお客様~」「はいカウンセリング~」「オプションはこれでーす!」ってボタンをポチポチッとしていくと、そのお客様に必要なご案内がパッパッパッパって表示されまーす!って仕組みですね。

名前とか日付とかはjavascriptちゃんで出力しときます。
要するに、夢小説の名前変換と同じ要領です!オタクスキルは無駄にならない。

あとはコピペしてお客様に返信すればよいのです。らっくちーん!

まあ、もっと言えば、エクセルでちゃんとマクロ組んだほうが、より精度が高くて保守しやすいシステムを作れるんでしょうけれども……。↓こういうやつ。

テンプレートを指定して、差し込みで電子メールを送信する

だけど、Bracketsを使ってサイト構築するなら、これで不便なく行けちゃいます。そのくらいコーディングしやすいです。
有料のソフトだったらこれくらいの機能は当たり前だと思いますが、無料でここまでできるのがすごいのです。すばらしい。

Bracketsのダウンロード

Bracketsのサイトからダウンロードできます。無料です。試しに使ってみて損は無し。

A modern, open source code editor that understands web design
Brackets is a lightweight, yet powerful, modern text editor. We blend visual tools into the editor so you get the right amount of help when you want it. With ne...

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

世界の中心でHTML直打ちの素晴らしさを叫ぶ記事

HTML直打ちはいいぞっ!
HTML直打ちってばマジ最高!
HTML直打ちすれば人生は楽しい!!

タイトルとURLをコピーしました