*「brackets」にはまってみる。基礎操作

2015.4.17 0Comments brackets

「brackets」はご存知でしょうか。

アドビのDWのコーディング機能と少し拡張したいと思っていたらまさに「brackets」がおすすめだと思います。コードヒント機能もあるのでコーダー初心者でも安心です。

 

多分そうだと思います。

 

多分です。。。

 

そう、私もこれからインストールするので詳しい事までわかりません!!
ただコーダーにはかなり強力な武器になりそうです。

 

しかも無料!!

 

さー一緒にダウンロードからはじましょう。

Brackets – A modern, open source code editor that understands web design.

 

f:id:artcube-yoshida:20150417184417p:plain

 

早速解凍してアプリへインストール。

f:id:artcube-yoshida:20150417184457p:plain

 

 

起動してみます。最初に出てくる画面がこちらです。「BRACKETS をはじめる前に」というタイトル名のファイルが表示されます。
「Getting Started」をクリックして、ローカルファイルをまず設定しましょう。ディレクトリを選ぶとかってにツリーを生成してくれます。

f:id:artcube-yoshida:20150417185531p:plain

 

 

ここでは「_test」のテスト用フォルダをどこか好きな場所に作成しておき、先ほどのフォルダを開くから選択します。そうすると真っ白な綺麗な画面に。

f:id:artcube-yoshida:20150417190127p:plain

 

 

さてここに、ファイルを作ってみます。

右クリックするとメニューが表示されますので、「新しいファイルを作成」からindex.htmlファイルを作成してみました。

f:id:artcube-yoshida:20150417193010j:plain

 

とりあえず、そのファイルになにか書いておきましょうか。
<h1>HELLO WORLD</h1>

※デフォルトの文字コードUTF-8です。なのでJISコードのファイルはプレビューすると文字化けするそうです。ただし使える方法もあるので後ほど説明していきます。

f:id:artcube-yoshida:20150417192914j:plain

 

 

さて、「brackets」にはDWにもあるライブビューの機能があるようなので設定してみます。メニューバーのデバックから環境設定ファイルを開くをクリックします。そうすると自動的に「brackets.json」というファイルが作成されますが大事なファイルなので削除しないで下さい。
さてここにこちらのコードをコピペします。
{
“livedev.multibrowser”: true
}

f:id:artcube-yoshida:20150417193543j:plain

こんな感じになりました。そのまま上書き保存します。

f:id:artcube-yoshida:20150417193828j:plain

 

ではさきほどの「<h1>HELLO WORLD</h1>」をライブビューで出力できるか試してみましょう。まずビューしたいファイルを選択します。ここでは「index.html」を選択してから、メニューバーの「ファイル」から「ライブプレビュー」をクリックします。そうすると出ましたね。

f:id:artcube-yoshida:20150417194402j:plain

こんな感じで出ましたね。ブラウザに表示されたURLは保存しておきましょう。それがライブビューのアドレスです。
もしもライブビューが表示されない場合は「bracketsを再起動」してから同じ手順をしてみてください。とにかくライブビューが表示されない場合は「bracketsを再起動」!

f:id:artcube-yoshida:20150417200134j:plain

 

 

しかしライブビューの機能はこういうものではありませんでした。。。そのライブビューはどうも最初に選択した「Getting Started」の中のファイルでないと作動しない様子です。一旦「Getting Started」に戻して、デフォルトの「BRACKETS をはじめる前に」のファイルにします。

f:id:artcube-yoshida:20150417223201j:plain

 

 

そして右側にある「雷のようなマーク」をクリックするとちょっと驚き。ブラウザを更新しなくてもリアルタイムで変わります。まさにライブビューですね。

f:id:artcube-yoshida:20150417223437j:plain

ライブビューを動画にしてみました。

その他の基本的な機能1

右下の「INS」の右側の項目にコードで各コードヒントとエディット機能を選択できます。

f:id:artcube-yoshida:20150417201241j:plain

 

 

その他の基本的な機能2

画面分割の機能で2画面でコードを確認できます。
左側のメニューの上下を移動させます。(よくドラックドロップしまいがちですのでご注意を)

f:id:artcube-yoshida:20150417212014j:plain

 

 

その他の基本的な機能3(Inline Editors)

HTMLとCSSを連携したまま同じ画面内で編集できる機能。それがインライン編集機能(クィック編集)です。<>内で「Command + E」もしくは「右クリックメニュー」で該当するクラスを呼び出しその場で編集できます。

f:id:artcube-yoshida:20150417234133j:plain

 

 

その他の基本的な機能4

コードから画像や色を読み取る。影のついた枠のなかにカラーやイメージのキャプチャーが自動的に表示されます。

f:id:artcube-yoshida:20150417234522j:plain

f:id:artcube-yoshida:20150417234521j:plain

 

一応基本操作も動画にしてみました。

 

 

バージョン1.2で加わったドラックドロップ機能です。ソースごとコピーする場合に便利です。やり方は簡単です。
「brackets.json」のファイルに以下を追加します。
“dragDropText”:true
そうすると、こんな感じになっていると思います。これでオッケー!
{
“livedev.multibrowser”: true

“dragDropText”:true
}
ビフォーアフター的に動画にしてみました。

てな感じかな。次回はもう少し掘り下げてみようかな。