ライブプレビュー

AdobeのエディタでBracketsってやつ。 Adobeと言えば、お高いイメージだったけど...これはフリーでMac OSXでも使えちゃう。 さらには、何やらライブプレビューっていう、Chromeがインストールされていれば修正したコードがすぐにブラウザに反映されるって機能が気になった...。 畑違いだけどFirefox OSのアプリ作るのにも使えそ？ってこともあって、使ってみる。 まずは、インストール。 ブラウザでこのURLを開く。 http://brackets.io/ ページの左上にある"Try It"をクリックする。 "Try It"って見出しの分の中にコッソリあるリンクをクリックする。 ページの右側にある"Download Brackets"をクリックする。 Firefoxだとこんな感じでダウンロードしていいか？って聞いてくるので、”ファイルを保存”ボタンをクリックする。 ファイルがダウンロードできたら、おしまい。 次はインストール。 さっきダウンロードしたdmgファイルをダブルクリックする。 Brackets Sprint 23ってのをApplicationsフォルダにコピーしてくれって言ってくるので、コピーする。 インストールおしまい。 Bracketsを起動してみる。 アプリケーションフォルダを開いて、Brackets Sprint 23ってアイコンをダブルクリックする。 もし、こんなメッセージが出てきたときはOSXの環境設定を変更する(変更する方法はここ)。 インターネットからダウンロードしたものだけど、開いてもいい？って聞いてくるので、”開く”ボタンをクリックする。 起動するとこんな感じ。 ちなみに、一回きりで表示されるメッセージが案外重要だったり...。 どうやら、こいつと相性がいいのは"Google Chrome"だそうな。 で、例のライブレビューを試してみる。 最初はサンプルコードが表示されとる。 画面の右っかわのカミナリっぽいアイコンをクリックする。 Chromeが起動している場合は再起動すればライブプレビューが使えるよ？って言ってくるので、"Chromeを再起動"ボタンをクリックする。 カミナリっぽいアイコンが満タンなったらオッケ？ プレビュー画面。 これは普通。 たとえば、コードをドラッグしてみると...。 プレビュー画面でもドラッグされる。 何か使えそ？ 似たようなアプリでIntel XDKってのがあるみたい。 そっちと比べてみてからメインを決めようかしら。

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