Brackets(ブラケッツ)のインストール方法と使ってみた評価

• Windows 7 32bit
• Brackets 1.5

まずは Brackets公式サイト からインストーラーをダウンロードします。

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

「Brackets.Release.1.5.msi」をクリックしてダウンロードします。

ダブルクリックでインストールを開始します。

「実行」ボタンを押下します。

インストーラーは英語ですが、特に難しいことはありません。

インストール先を変更する場合は、「Change」ボタンを押下します。

ここではデフォルト(C:/Program Files/Brackets)のまま進めます。

チェックボックスはOnのままにしておきましょう。「Next」ボタンで次へ進みます。

「Install」ボタンを押下してインストールします。

「Finish」ボタンを押下すればインストールはおしまいです。

スタートメニューから「Brackets」ボタンを押下すればBracketsが起動します。

おぉぉぉ、起動しましたね。

インストールはとても簡単でした。デフォルトで日本語化されているので、英語が苦手な方でもすぐに使えますね。

Bracketsをデフォルトのまま使ってみます。様々な特徴がありますので紹介します。

画面右下をクリックすると、言語設定やインデント方法が変更できます。言語は、保存したファイル名から自動で選択されますが、自分で変更することもできます。

インデントは、プログラマによってスペースだったりタブだったりしますので、簡単に自由に変更できるのはうれしいですね。ちなみに私はスペース2派です＾＾

Webサイトを作る場合、フォルダを作ってファイルを保存しますよね。Bracketsでは「ファイル」-「開く」でWebサイトのフォルダを開くこともできますが、ドラッグ＆ドロップで開けるのも特徴です。切り替えはドロップダウンでおこないます。

Bracketsでは作業スペースを分割することができます。メニュー右上のボタンを押下すると、分割ダイアログが出てきます。上下と左右に分割できます。画面の小さいPCで開発していると邪魔になるかもしれませんが、大きいモニタがあればそれなりに重宝しそうです。

Bracketsではタグや括弧の範囲をハイライト表示してくれます。これがあると範囲の確認が容易ですね。

BracketsではHTMLやCSSのコード候補の表示やコード補完機能があります。下図では「text-decoration」を入力していますが、「textd」とハイフンなしでも候補が出ています。作業効率も上がりますね。

BracketsではCSSのクイック編集機能が用意されています。HTMLのIDやクラスにカーソルを当てて右クリックすれば「クイック編集」が開きます。

クイック編集は CTRL + E でも可。

複数のCSSがある場合には、「新規ルール」を選択し、該当のCSSを選択します。

CSSのソースが表示されるので、その場で編集が可能です。

IDやクラスでCSSファイル内を探す必要がないので、この機能はかなり使えると思います。

Bracketsでは色のクイック編集も用意されています。まずカーソルを色部分に乗せると、色が確認できます。右クリックで「クイック編集」を選択します。

カラーピッカーが出てくるので好きな色を設定できます。

Bracketsでは画像ファイルのパスにマウスカーソルを当てると、その画像を表示してくれます。元画像のサイズも表示してくれるのがうれしいですね。

Bracketsでは変更後の状態をすぐに確認できるライブプレビュー機能があります。この機能を使うには「Google Chrome」がインストールされている必要があります。「Google Chrome」をまだインストールされていない方は、これを機にインストールしましょう。

・Chrome ブラウザ - Google

画面右の「稲妻」ボタンを押下します。

ChromeでWebサイトが開きます。HTMLやCSSなどを編集すれば、すぐに反映されます。

Bracketsはテーマも豊富です。人によって黒系の画面が好きな人もいれば、白系の画面が好きな人もいるでしょう。テーマを変更することでツールを使う楽しさを味わえますし、気分によってテーマ変更するのもありだと思います。

まずは以下のサイトでビジュアル的にどんなテーマがいいかを探します。

・Brackets Themes

インストールしたいテーマが決まったら、画面右の「拡張機能マネージャー」ボタンを押下します。

ここでは「Visual Studio」テーマをインストールしてみます。検索ボックスにキーワードを入力して「インストール」ボタンを押下します。

メニューバーの表示から「テーマ」を選択します。

現在のテーマから「Visual Studio」を選択して、「完了」ボタンを押下します。

おぉぉぉ、VBっぽい画面になりましたねー。

結局のところデフォルトが一番よかったので私はでデフォルトのまま使っています。好みのテーマがあれば切り替えて利用しましょう。

デフォルトでも機能は十分ですが、拡張インストールすることで更なる作業効率アップが見込めます。取得は簡単です。テーマと同じく「拡張機能マネージャー」ボタンを押下し、検索ボックスにキーワードを入力して「インストール」ボタンを押下すればおしまいです。簡単ですね。

どんな拡張機能をインストールするかは、扱う言語や好みもあるので「これをいれればいい」ということはありませんが、個人的にインストールしている拡張機能を紹介します。

個人的にはWordpressのテーマ編集などをよくおこなうので、PHP、Wordpress系の拡張機能が中心となった感じです。他にも便利な拡張機能がたくさんあると思います。これは便利だというものがあればコメントもらえるとうれしいです。

Brackets(ブラケッツ)のインストール方法と使ってみた評価を紹介しました。

個人的な評価としては「とても軽くて使いやすい」といった印象でした。IDEを使うとどうしても重くなるのですが、このBracketsはライトな感じでいいですね。とはいえ、拡張機能をガンガン入れていくと、IDE同様、起動や動作が重くなるんでしょうけどね・・＾＾；

コーディング作業をしてみた印象としては、CSSのクイック編集やライブプレビューでかなり効率化できたと思います。まだテンプレートサイトを作った程度でしか使っていませんが、今後も使い続けてみようと思いました。

皆さんもぜひ試してみてください。