Adobe Brackets1.0がリリースされたので、入れているプラグインを紹介します

シェアする

  • このエントリーをはてなブックマークに追加
  • 10

こんばんは。@a_kikaです。

先ほど、ボーっとTwitterのタイムラインを見たら、Adobe Brackts1.0がリリースされたことを知り、いそいそとダウンロードしました。
以前はCodaをメインに使っていましたが、Coda2.0にするタイミングを失い、ズルズルとしてしまい、だったら他を使ってみようかとSublime Textなどを使ってみたのですが、個人的にはどうもしっくり来ず、AdobeのオープンソーステキストエディタのBracketsが意外としっくりきたので、こちらをメインにしつつたまに古いCodaをひっぱりだしてきています。

このBrackets、軽くてシンプルで、でも拡張機能を入れるとかなりパワフルになるので気に入っているのですが、
昨日リリースされたBrackets1.0はExtract for Bracketsという、PSDファイルからサイズやデザイン要素をPSDファイルから取り出してCSSにコーディングしてくれる機能が搭載されました!
横着者にはなんて嬉しい…

考えてみたら、Bracketsってあまり記事にしていなかったので、今日はBracketsの魅力と使用しているプラグインをご紹介します!

Brackets logo

スポンサーリンク

シンプルで軽い

Brackts

画面がとにかくシンプル。
Sublime Textもシンプルなのですが、Bracketsファイルツリーとメイン画面の色が違うのがとても見やすいし、
拡張機能を入れることで、ファイルがHTMLかCSSかなどアイコンで出てくれるのも見やすいです。
後、とにかく動作が軽い!
Codaも軽いけれど、Bracketsはもっと軽い!
Macだとmiとか軽いですよね。あれと変わらない軽さです。

タグ補完機能が良い

Brackets タグ補完機能

タグ補完機能はかなりいいです。
Sublime Textも試しましたが、Bracketsの方が良いような…
これは、もっとSublime Textを使いこなさないと何とも言えませんが、Codaに劣ることはないと思います。

Google Chromeでのライブビュー機能

ライブビュー

コードを打っていてライブビューで見れるというのは便利ですよね。
最早これないと無理!
Bracketsはきちんとプレビュー機能があります。
右上にある稲妻のようなアイコンをクリックするとブラウザが立ち上がりプレビューされます。
なので、これを開きながらCSSを編集したりするととても便利です。
Codaで便利なのは、このライブビューだったのですが、Brackets内ではできないまでもきちんとプレビューが出来るのは便利です。
プレビューされたのはこんな感じ↓

プレビュー

拡張機能を入れるのが楽

CodaやSublime Textに拡張機能があるようにBracketsもGithubにて公開されています。
そして、この拡張機能を入れるのがとにかく簡単。
こんなに簡単でいいのでしょうか?

Bracketsプラグイン

右上のブロックのようなアイコンをクリックすると拡張機能を捜すことのできる画面が出てきます。
GithubにあるURLやダウンロードしたzipファイルからインポートすることもできますが、
検索ツールバーに欲しい拡張機能名を入力すると検索結果がでるので、”インストール”をクリックするとインストール完了です。
わざわざファイルをダウンロードする必要もないので、これは便利です。

私はWebデザイナーではないけれど、たまに仕事でコーディングしたりということがあるので、
そういう時はDreamweaverかBrackets、たまにCodaを使っています。
これで無料というのは嬉しすぎます。

ちなみに、私がBracketsに入れている拡張機能をご紹介します。

  • Emmet
  • Color Picker
  • Brackets File Icons
  • Indent Guides
  • Documents Toolbar
  • W3CValidation

Emmetは説明いりませんよね。
おなじみ、Zen-codingです。

Color PickerはCSSコーディング時の色指定の時にグラフィカルにすることができます。
これ、Codaで普通にやっていましたが、カラーコードなんて覚えていられないので、とても便利です。

Brackers File Icons
先ほど、ファイルツリーにファイルの種類別にアイコンを出せると言いましたが、それがこの拡張機能。
地味で、別になくても困らないけれど、HTMLファイルなのかCSSファイルなのかアイコンで一目でわかるのは便利なので入れています。

Indent Guides
インデントを表示してくれる拡張機能です。

Documents Toolbar
開いているファイルをタブ表示できます。
これも、間違いを起こさないために便利。

そのほか、FTP機能などもありますが、あまりエディターからアップロードすることはないので入れていません。

と、すっごく良いことばかり書いてきましたが、製品ではないので、バグのようなものは少なからずあります。
たまに、タグ補完が効かなくなったり…
後、HTMLやCSS、JavaScriptに絞っているので、PHPなどはあまり向かないかもしれません。
なので、Wordpressなどをいじるのであれば、CodaやSublime Textの方がいいと思います。

Brackets1.0ダウンロード

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする