「brackets」はご存知でしょうか。
アドビのDWのコーディング機能と少し拡張したいと思っていたらまさに「brackets」がおすすめだと思います。コードヒント機能もあるのでコーダー初心者でも安心です。
多分そうだと思います。
多分です。。。
そう、私もこれからインストールするので詳しい事までわかりません！！
ただコーダーにはかなり強力な武器になりそうです。
しかも無料！！
さー一緒にダウンロードからはじましょう。
Brackets – A modern, open source code editor that understands web design.
早速解凍してアプリへインストール。
起動してみます。最初に出てくる画面がこちらです。「BRACKETS をはじめる前に」というタイトル名のファイルが表示されます。
「Getting Started」をクリックして、ローカルファイルをまず設定しましょう。ディレクトリを選ぶとかってにツリーを生成してくれます。
ここでは「_test」のテスト用フォルダをどこか好きな場所に作成しておき、先ほどのフォルダを開くから選択します。そうすると真っ白な綺麗な画面に。
さてここに、ファイルを作ってみます。
右クリックするとメニューが表示されますので、「新しいファイルを作成」からindex.htmlファイルを作成してみました。
とりあえず、そのファイルになにか書いておきましょうか。
<h1>HELLO WORLD</h1>
※デフォルトの文字コードはUTF-8です。なのでJISコードのファイルはプレビューすると文字化けするそうです。ただし使える方法もあるので後ほど説明していきます。
さて、「brackets」にはDWにもあるライブビューの機能があるようなので設定してみます。メニューバーのデバックから環境設定ファイルを開くをクリックします。そうすると自動的に「brackets.json」というファイルが作成されますが大事なファイルなので削除しないで下さい。
さてここにこちらのコードをコピペします。
{
“livedev.multibrowser”: true
}
こんな感じになりました。そのまま上書き保存します。
ではさきほどの「<h1>HELLO WORLD</h1>」をライブビューで出力できるか試してみましょう。まずビューしたいファイルを選択します。ここでは「index.html」を選択してから、メニューバーの「ファイル」から「ライブプレビュー」をクリックします。そうすると出ましたね。
こんな感じで出ましたね。ブラウザに表示されたURLは保存しておきましょう。それがライブビューのアドレスです。
もしもライブビューが表示されない場合は「bracketsを再起動」してから同じ手順をしてみてください。とにかくライブビューが表示されない場合は「bracketsを再起動」！
しかしライブビューの機能はこういうものではありませんでした。。。そのライブビューはどうも最初に選択した「Getting Started」の中のファイルでないと作動しない様子です。一旦「Getting Started」に戻して、デフォルトの「BRACKETS をはじめる前に」のファイルにします。
そして右側にある「雷のようなマーク」をクリックするとちょっと驚き。ブラウザを更新しなくてもリアルタイムで変わります。まさにライブビューですね。
ライブビューを動画にしてみました。
その他の基本的な機能１
右下の「INS」の右側の項目にコードで各コードヒントとエディット機能を選択できます。
その他の基本的な機能２
画面分割の機能で２画面でコードを確認できます。
左側のメニューの上下を移動させます。（よくドラックドロップしまいがちですのでご注意を）
その他の基本的な機能３（Inline Editors）
HTMLとCSSを連携したまま同じ画面内で編集できる機能。それがインライン編集機能（クィック編集）です。＜＞内で「Command ＋ E」もしくは「右クリックメニュー」で該当するクラスを呼び出しその場で編集できます。
その他の基本的な機能４
コードから画像や色を読み取る。影のついた枠のなかにカラーやイメージのキャプチャーが自動的に表示されます。
一応基本操作も動画にしてみました。
バージョン１．２で加わったドラックドロップ機能です。ソースごとコピーする場合に便利です。やり方は簡単です。
「brackets.json」のファイルに以下を追加します。
“dragDropText”:true
そうすると、こんな感じになっていると思います。これでオッケー！
{
“livedev.multibrowser”: true
“dragDropText”:true
}
ビフォーアフター的に動画にしてみました。
てな感じかな。次回はもう少し掘り下げてみようかな。
