Bracketsに感動！インストールしたプラグイン達
開発環境を調えたくなり、CGI用（しかも、Perl (ﾏﾃ） ）に考えていたのに、
WEB開発用にBracketsをインストールしました。
ちなみに、これまで使っていたのはSublimeText3。
これはこれでお気に入りなので、使い続けると思います。
とりあえず、色々なエディターを昨日より触れたのですが・・
Bracketsが、なにか使いやすくて感動してしまいました。
さすが、Adobeやるなｗ
しかもAdobe戦略も、丸っとそっくりお見通ししちゃったが・・・（ぇ
それでも使いたい、Brackets。
ということで、今回はBracketsのご紹介です。
１．Bracketsとはなにか？
HTML、CSS、JavaScript の3つを主要ターゲット言語として、特化してつくられている、
オープンソース（OSS)として Github 上で公開されているもの。
つまり完全無料で、使えるエディタです。
※ダウンロードは、 http://brackets.io/ から可能。
このBrackets。 実は、HTML × CSS × JavaScript で作られているんです。
ちょっとびっくりですよね。しかも、Node.js が同梱されているので、
簡易 web サーバーをクリック一発で立ち上げられるという代物。
作成中のリアルタイムプレビューなども見れちゃいますｗ これって結構、嬉しい機能。
２．一番凄いのは、Extract for Brackets機能！
そして何が一番すごいかって、それは、Extract for Brackets機能です。
なんと、PDFやPSDファイルがあれば、中にあるレイヤーやスタイル、フォント、形状を解析し、
ブラウザー上で設定値を取得したり画像の書き出しを行うことができる機能。
Creative Cloud FilesのWeb版の中で作業が可能ですが、Creative Cloudの無償会員でも利用可能なんです。
ほら、戦略丸見え（笑）
でもこれがあれば、PSDやPDFファイルさえ、貰ってしまえば、
その通りに作るだけでいいわけで、かなり楽～になりますよね。
でも、できたら・・・自分はPhotoshopからイラレに移った側なので、
切り出し方などの説明は、こちらがわかりやすいです。
PSDデザインカンプからのコーディングに超便利！Extract for Brackets - WEBCRE8.jp
Extractはブラウザー上でPSDを解析し設定値や切り出し画像を取得できる ...
これを見ながら、PDFを切り出しレイアウトしてみよう！
３．JavaScript のコードヒントがわかりやすい
また、JavaScriptのコードヒントが、デフォルトで結構しっかりできています。
例えば
❐グローバルスコープだと斜体表示
❐true、falseといったキーワードは灰色で表示
❐候補一覧に出てくるキーワードの文字色ですが、重要度やそスコープに応じて色分け表示
緑色: その場で問題なく使用出来るもの / ローカルスコープ
青色: 親スコープ
紫色: 親の親スコープ
黒色: その他
なかなか、しっかりしてるでしょ。
４．何より嬉しい日本語対応
そして何よりも嬉しいのが、最初から日本語対応なこと。
そう、日本語になるように設定する必要すらもないんですね。
これって結構、メリット高くないですか？ やっぱり、普段の言語でわかりやすいのが一番！
５．そして、拡張機能の追加が容易であること
しかも、拡張機能がとても豊富で便利でした。
あまり拡張機能を入れると、メモリを喰いまくるのは通常仕様ですが、
それでも、これだけ有れば、かなりの作業が楽になります。
ということで、まだ入れるかもしれませんが、
自分が入れた、Brackets拡張プラグイン（エクステンション）をご紹介します！
Brackets拡張プラグイン（エクステンション）
最初に入れたほうがいい、プラグイン
❐Extensions Rating
エクステンションのダウンロード数や評価を表示します。
プラグインのレーティングや、話題になっていることを表すアイコン、
翻訳言語数などが表示されるようになるので、プラグインの人気を判定する材料になります。
やっぱり良いものは、人気が高い！
❐Themes for Brackets
色々なカラーテーマの詰め合わせです。エディタの見栄えを色々変えることができます。
気分もこれで結構変わりますよね。
❐Brackets Icons
サイドバーのファイル名にアイコンがつくので、ファイルの種類などが見分けしやすくなります。
❐Tabs - Custom Working
開いているファイルをタブで表示するプラグインです。
有名なプラグインで、Documents Toolbarがありますが、
その機能にプラスして、
ドラッグ&ドロップでタブを移動出来、左右のサイドバーの開閉、
分割表示設定、タブのソート、タブの一覧表示が可能なので、とても便利です。
❐Sidebar Plus
サイドバーの挙動を改善してくれます。
デフォルトでは閉じるか開くかしか出来ませんが、「一時的に開く」ということが出来るようになります。
❐Shizimily Multi-Encoding for Brackets
通常はUTF-8ファイルしか開けませんが、普通にShift_JISも開けるようになります。
沢山のエンコード言語に対応
❐Indent Guide
インデントのガイドラインを（縦線で）表示
※一緒に使うとスクリプトがとても見やすくなります。
※「表示」メニューから「Indent Guides」のチェックをオンにしてください。
❐Show Whitespace
半角スペースをSublime Text風に表示してくれます。
※一緒に使うとスクリプトがとても見やすくなります。
※「表示」メニューから「Show Whitespace」のチェックをオンにしてください。
❐Overscroll
ファイルの最終行より更に下方までスクロール出来るようになります。結構便利。
❐Minimap❐
ファイル全体を見渡すためのエクステンションです。
❐Brackets Outline List
開いているファイルの構造をアウトライン化して表示してくれるプラグインです。
サイドバーなどに表示され、クリックすることで飛ぶことができます。
※右のツールバーにある「Toggle Outline」ボタンをクリックすることで、
左サイドバーにアウトラインを表示することができるようになります。
❐BluePrint Beta
上の２つの機能が一つになっているもの。
JavaScript、HTML、CSS、LESS、SCSS、PHP、pythonで、
アウトラインとミニマップを表示させることができます。
❐Various improvements
ファイルの更新日時や、サイズなどを表示してくれます
❐Brackets Outline List
ファイルの構造をアウトライン表示してくれます。
対応ファイルもJavaScript、CoffeeScript、CSS、SCSS、LESS、XML、HTML、SVG、Markdown、PHPと多様で、とても便利です。
❐Display Shortcuts
「ヘルプ」メニューの「Show Shortcuts（Ctrl+Alt+/）」を選択することで、
現在割り当て中のショートカットリストを確認できます。
別途拡張プラグインKey Remapperで設定した、独自キーにも対応可能。
これ、プラグインをたくさん入れた時に、ショートカット確認にとても役に立ちます。
❐SFtpUpload
編集したファイルを、すぐにFTPで指定したディレクトリへアップロードしてくれる
❐Brackets Tools
色んなコーディングサポート機能が一つになったプラグインです。かなり便利！
| 空白行の削除 | Remove Empty/Blank Lines（以下、ツールより選択） |
|---|---|
| 改行の削除 | Remove Break Lines |
| 行頭の連番を削除 | Remove line numbers |
| 重複行の削除 | Remove duplicate lines |
| 単語リストを配列に変換 | Word To Array |
| 単語リストをulリストに変換 | Word To List |
| 単語リストをulリストに変換と同じ？ | Line To List |
| HTMLタグの消去 | HTML Tag Remove/Strip |
| トリム | Trim |
| 左トリム | Left Trim |
| 右トリム | Right Trim |
| 先頭からX文字削除 | First x Char Remove |
| 末尾からX文字削除 | Last x Char Remove |
| 単語を小文字化、ハイフン区切りに | To SEO URL |
| 大文字に変換 | To Upper Case |
| 小文字に変換 | To Lower Case |
| 単語の1文字目を大文字に変換 | To Title Case |
| HTMLエンコード | HTML Encode |
| HTMLデコード | HTML Docode |
| URLエンコード | URL Encode |
| URLデコード | URL Decode |
| 新規HTML5ファイルを開く | New HTML5 （ファイルから or サイドバー空白Wクリック） |
| 同じ単語をハイライト | Highlight Selected Word（表示から選択） |
詳しくはこちらを確認してみてください。
Bracketsの7つ道具的エクステンション Brackets Tools - Qiita
使える機能が画像付きでわかりやすいです！
❐todo
コード内に、Todoコメントを残すプラグイン。これで、効率アップ間違いなし！
コード下に色別枠で表示され、そこをクリックするとすぐコードへ飛べる。
.todoファイルを設置することにより更に柔軟な設定・カスタマイズが出来る・・らしい。
緑 <!-- /* NOTE メモなどを記載します。 */ -->
オレンジ <!-- /* TODO TODO内容を記載します。例：コメントを修正する */ -->
グレー <!-- /* CHANGES 更新した内容を記載。例：2014/5/31にjqueryをバージョンアップしました! */ -->
赤 <!-- /* FIXME バグや改善すべき点を記載。 */ -->
青 <!-- /* FUTURE 未来へ向けて書き込みましょう。 */ -->
※TODO枠は、右にある■にチェックマークアイコンをクリックすることで、現れます。（or Ctrl + ALT + T)
詳細：https://github.com/mikaeljorhult/brackets-todo
☆作業後は、TODOコメントを全て削除するようにしておくといいかも。
❐Brackets Editor Bookmarks
ソースコード内にブックマークを設定でき、いつでもブックマーク箇所へジャンプ出来ます。
ブックマークは「ナビゲーション」メニューから「Toggle Bookmark」などを行うことでできます。
［コマンドの場合］
ブックマークの追加・削除： cmd option K（Mac） Ctrl+Shift+K（Win）
次のブックマークへ ： cmd P（Mac） Ctrl+P（Win）
前のブックマークへ ： cmd option P（Mac） Ctrl+Shift+P（Win）
フォント関係
❐Adobe Edge Web Fonts
Adobe, Google,などのWebフォントを手軽に組み込める
HTML関係
❐More HTML5 Code Hints
HTML5のコードヒントを拡張します。picture要素やsrcset属性までサジェストしてくれるようになります
❐Add HTML template
HTMLファイルのひな型みたいなものが欲しい時
※Emmetプラグインを入れて、使えるようになったらいらないような？
❐Emmet
かつて「Zen-Coding」と呼ばれていた省略形のコードを利用して、素早くコーディング
ダミーテキストを挿入、色んなオプションもある
lorem と文字列を入力して Tab を打つと、Lorem ipsum dolor sit amet ... と残りの文字列を補完してくれる
❐Paste and Indent
よく、コードをコピペして使うことがある方へ。
貼付けた位置のコードインデントの深さと合わせて貼付けられます。
コードの移動の他、他のファイルからまるまる持ってきたりするときに超便利です。
HTML・CSS・Javascript便利ツール
❐Brackets CSS Class Code hint
編集中のHTMLが読み込んでいるCSSのセレクターに書かれているclassとIDが、
属性値の記述時にコードヒントとして自動的に出てきます。
❐CSSFier
HTMLをコピーしてCSSに貼付けすると、全ての空のルールセットをだーっと作ってくれます。
HTMLに書いたclassやID、要素名のルールセットから、逆にCSSを作ってくれる！（びっくり！）
❐JavaScript & CSS CDN Suggestions
Google APIやCDNJSなどから、主要なCDNにあるJSやCSSの名前をサジェストしてくれ、
かつ選択したらバージョンを指定するとタグの記述が完成します。
❐CDN Finder
jsDelivrで公開されているCDNを検索し、URLを手軽に取得することができます。
※JavaScript & CSS CDN Suggestionsと似ているので、好きな方を利用して下さい。
❐Autoprefixer
保存時に必要なものに自動でプレフィックスを付加する
※機能を有効にするには、「編集」メニューから「Auto prefix on save」にチェックをしておく必要があります。
※「Auto prefix selection」を選択すると、選択しているテキストのプレフィックスを最適化してくれます。
そもそも、プレフィックス（vendor prefix）って一体何？（・・*
拡張機能ですよという明示をするものなのですが、
各ブラウザごと動きが違わないように、同じ事が出来る様に、
プロパティ名や値の先頭に、ベンダープレフィックスを付ける事が推奨されているものです。
-webkit-
Google Chrome、Safariを判別する識別子。
上記ブラウザが「WebKit採用ブラウザ」である事からこの識別子になっています。
-moz-
Firefoxを判別する識別子。
Mozilla Firefoxの頭文字「Moz」が識別子になっています。
-ms-
Internet Explorerを判別する識別子。
Microsoft Internet Explorerの頭文字「Ms」が識別子になっています。
-o-
Operaを判別する識別子。
Operaの頭文字「O」が識別子になっています。
抜粋先：http://www.yoshikiminatoya.com/lab/csslab/4336.html
コードフォーマット
❐minifier
cssやjavascriptを簡単に圧縮することが出来ます。 .min保存可能
❐Beautify
コードフォーマットのプラグイン。HTMLもCSSをワンクリックでフォーマットしてくれる
minファイル等を復元・解析する際に重宝します。
※保存時に、自動で成形するには、「編集」メニューから「Beautify on save」にチェックをつけてください。
対象範囲を選択し、ショートカット（Mac:Cmd+Shift+L, Win:Ctrl+Shift+L）
または編集→Beautifyで実行出来ます。
■Brackets Snippets
そもそも、コード・スニペットとは何か？
コード・スニペットとは、よく使われる短いコードの断片に分かりやすい名前を付け、
簡単な操作でソース・コードに挿入可能にしたもの。
つまり、この拡張子を入れることで、これまでの多数集まっているスニペットたちから、
やりたいコード・スニペットを選ぶことで、それを利用できるようになる。
Brackets × "スニペット管理" で爆速コーディングを実現する - Qiita
スニペットの使い方はこちらを参考にどうぞ！
BracketsでWordpress開発をしようと思ったら登録したいPHPスニペットまとめ
こちらもわかりやすいです。
レスポンシブWebデザイン
❐Response for Brackets - original
レスポンシブWebデザインをBracketsで行えるようにするプラグイン
ウインドウ幅を定義してそれぞれのCSSを書いていくことができるようになる。
その際にどのコードがどの部分にあるのかということを示してくれる
コードエディター「Brackets」のレスポンシブモードが最強！（リリースされるかわからないけど…） ? Rriver
Responsive Design Tool ...
Responseプラグインの詳しい説明があります。
❐edge-inspect-extension
Web制作をする上で欠かせないのが実機でのチェックするのに、
検証環境である「Adobe Edge Inspect」を使って、Bracketsのライブプレビューのように、
制作しているページをリロード操作なくすぐに確認できる。
また、接続している全ての端末で同期が取られる。
※インストールすると、右側にモバイル端末と目のアイコンが表示されるので、ここから使用する。
❐CanIUse
ブラウザのサポート状況を手軽に調べることができます。
プロジェクト管理用
❐Markdown Preview
マークダウンをプレビューできる。
❐Unused Files
プロジェクト内で使用していないファイルを検出出来ます。
特に運用更新時などで使っていない古いファイルを検出する際に効力を発揮します。
>------インストールしていない、プロジェクト管理用 ※検討中------<
❐Brackets Git
GitHubを使ってプロジェクトやバージョン管理をしている時、ファイルのやりとりをするのに便利
❐Gist Manager
Gistを呼び出したり投稿できる
チェックしてあるけれど入れていないものが、いっぱい（（*￣□￣*； ←どうしよう～（ぉぃｗ
他にも色々あるので、下記のページから一覧してチェックして探してみてもいいかもしれません。
Extensions一覧 https://github.com/adobe/brackets/wiki/Brackets-Extensions
いろいろなサイトを参考にさせて頂いて、自分用にメモしたものを元に、
記事させて頂きました。URLを保存できていないサイトも有りますが、
ありがとうございます！！
他、基本的なBracketsの使い方は、こちらを参考にしてみてください。
【オープンソース】Adobe Brackets を使ってみたよ【テキストエディタ】 ｜ Developers.IO
こちらも使い方が参考になります。
Bracketsだって激しく進化してますよ！メインエディターとして1年使ってみて - WEBCRE8.jp
ろが大きいです。実際、前述の記事のAtomや大人気のSublime Textなど他のエディターにしても、それを求める人のニーズに寄っていってるんじゃないですかね。 BracketsはAdobeの各種デ ...
基本的に使える機能の紹介
ありがとうございました。
