Mac OS XでフリーなHTMLエディタ “Brackets”を使ってみる

プログラミング

AdobeのエディタでBracketsってやつ。
Adobeと言えば、お高いイメージだったけど…これはフリーでMac OSXでも使えちゃう。

さらには、何やらライブプレビューっていう、Chromeがインストールされていれば修正したコードがすぐにブラウザに反映されるって機能が気になった…。
畑違いだけどFirefox OSのアプリ作るのにも使えそ？ってこともあって、使ってみる。

まずは、インストール。

  1. ブラウザでこのURLを開く。
    http://brackets.io/
  2. ページの左上にある"Try It"をクリックする。
  3. “Try It"って見出しの分の中にコッソリあるリンクをクリックする。
  4. ページの右側にある"Download Brackets"をクリックする。
  5. Firefoxだとこんな感じでダウンロードしていいか？って聞いてくるので、”ファイルを保存”ボタンをクリックする。
  6. ファイルがダウンロードできたら、おしまい。

次はインストール。

  1. さっきダウンロードしたdmgファイルをダブルクリックする。
  2. Brackets Sprint 23ってのをApplicationsフォルダにコピーしてくれって言ってくるので、コピーする。

インストールおしまい。
Bracketsを起動してみる。

  1. アプリケーションフォルダを開いて、Brackets Sprint 23ってアイコンをダブルクリックする。

    もし、こんなメッセージが出てきたときはOSXの環境設定を変更する(変更する方法はここ)。
  2. インターネットからダウンロードしたものだけど、開いてもいい？って聞いてくるので、”開く”ボタンをクリックする。
  3. 起動するとこんな感じ。

    ちなみに、一回きりで表示されるメッセージが案外重要だったり…。
    どうやら、こいつと相性がいいのは"Google Chrome"だそうな。

で、例のライブレビューを試してみる。
最初はサンプルコードが表示されとる。

画面の右っかわのカミナリっぽいアイコンをクリックする。

Chromeが起動している場合は再起動すればライブプレビューが使えるよ？って言ってくるので、"Chromeを再起動"ボタンをクリックする。

カミナリっぽいアイコンが満タンなったらオッケ？

プレビュー画面。
これは普通。

たとえば、コードをドラッグしてみると…。

プレビュー画面でもドラッグされる。

何か使えそ？

似たようなアプリでIntel XDKってのがあるみたい。
そっちと比べてみてからメインを決めようかしら。

[amazonjs asin="483994332X" locale="JP" title="スマートフォンサイトのためのHTML5+CSS3 (Web Designing BOOKS)"]

プログラミングAdobe,App,Apple,Brackets,Chrome,CSS,Googleケータイ,HTML,Intel XDK,JavaScript,Mac,OSX,Sprint 23,Webアプリ,アップル,アドビ,アプリ,エディタ,クローム,グーグル,フリー,プレビュー,マック,ライブプレビュー,リアルタイム,開発環境