Bracketsの使い方 | IT工房｜AI入門とWeb開発

Sublime Text だの Atom だの便利なエディタがほとんど無料で使用できる中、Dreamweaverの存在価値が無くなってきていました。
そんな中突如 Dreamweaver CC 2017(Beta)が姿を現しました。
どうやらコードエディタ部分はBracketsベースになるようです。また、ベースにNode.jsを使っているようなので、サーバー環境も構築できたりと、ちょっと面白い使い方もできるようになるかもしれません。
ということで、今回は Brackets の導入です。

Brackets の導入
拡張機能の導入

Brackets の導入

Brackets とはAdobe社が提供する無料の開発エディターです。Sublime Textなどと同様に拡張機能を入れると非常に便利なツールになります。
Bracketsのダウンロードはこちらです。

エディタとしての使用方法は、Sublime Text や Atomを使用経験があればほとんど直感的に使用できます。

ライブビュー機能（ブラウザでの確認）と拡張機能マネージャーは右端のボタンです。

初めてこの手のエディタを使用する方はコチラのサイトがわかりやそうです。

便利な機能はHTMLのクラス名やID名のところで「command + E」キーを押すとそのクラス名にCSSの設定があれば、編集領域が表示されることです。
「command + E」キーはJavaScriptの関数やCSS３のアニメーションのanimation-timing-functionプロパティのベジェ曲線をコントロールできたりします。
また、BracketsがSublime Text や Atomと違って有利な点は　AdobeのPhotoshopと連携できるところでしょうか。
「Extract for Brackets」という拡張機能を導入することでPhotoshopで作成したカンプをから直接サイズなどのデータを取得できる便利な仕組みです。
ところが、「Extract for Brackets」は2016年6月28日で廃止となります。
気になるのは、Dreamweaverのベータ版が正式リリースした後のAdobe社のBracketsに対するサポートです。置き去りにされる気がしないでもないです。Sublime Textからあっさり乗り換えるのも危険な気がします。。

拡張機能の導入

emmetの導入

拡張機能マネジャーで「emmet」と検索して出てきたものをinstallするだけです。
例によって「!」と「Tab」で基本タグを入れるとlang属性が「en」になります。
これを「ja」にするには以下のようにします。
Macの場合
メニューの「ヘルプ」>「拡張機能のフォルダーを開く」から以下

extensions/user/brackets-emmet/node_modules/emmet/lib/snippets.json

Windowsの場合
メニューの「ヘルプ」>「拡張機能のフォルダーを開く」から以下

extensions¥user¥brackets-emmet¥node_modules¥emmet¥lib¥snippets.json

変更後の抜粋

{
 "variables": {
  "lang": "ja",
  "locale": "ja-JP",
  "charset": "UTF-8",
  "indentation": "\t",
  "newline": "\n"
 },

JavaScript & CSS CDN Suggestionsの導入

jQueryなどのライブラリを簡単に記述するには、以下の拡張機能を追加します。
「JavaScript & CSS CDN Suggestions」と拡張機能マネージャーで検索して出てきたものをインストールします。

クロスブラウザの対応

デフォルトではライブプレビューはchromeで開かれます。
これをクロスブラウザ対応にするには、メニューの「デバッグ」→「環境設定ファイルを開く」で開かれるファイルを編集します。
画面は2分割で表示され、片方は（下画像左）オリジナルの環境設定ファイルで読み込みだけで編集できません。
もう片方（下画像右）が編集用ファイルです。こちらにjson形式で記述します。
編集用ファイルにすでに何らかのデータが入っている場合はカンマで区切って記述します。

クロスドメインにするための記述

"livedev.multibrowser": true

ブラウザの使い方

メニューのファイルから「試験ライブプレビューを有効にする」にチェックを入れます。
ブラウザのアドレスには、「http://127.0.0.1:49653/test.html」などのようにlocalhostを表す127.0.0.1のアドレスが表示されているはずです。ブラウザに表示されたアドレスを使用したいブラウザで表示すると以降ファイルを編集するごとにライブ表示されるようになります。

もしファイルをドラッグアンドドロップでBracketsを使用していたなら、エラーになり「試験ライブプレビューを有効にする」にチェックを入れて使用できません。この機能を使用するにはフォルダでルートを決めてから、そのフォルダにファイルを作成して、フォルダごとBracketにドラッグアンドドラッグしてサイトを作成してからファイルを開くと問題なく使用できます。