Bracketsを一ヶ月間使ったら惚れちゃいました。

こんにちは、はじめまして。
メインエディタをSublime Text3からBracketsに乗り換えたばかりのnatsumiine(ナツミーヌ)です。記念すべき初記事は、優さんからお誘いをいただいたBracketsアドベントカレンダーの8日目!少しでもBracketsに興味を持っていただけたら嬉しいです。

使用環境など
OS:Windows7
職種:webデザイナー(業務で使う言語はほぼHTML・CSSのみ)
業務内容:運用メイン(テキスト・画像・html修正)、時々がっつりコーディング

Bracketsとの出会い

Bracketsは、Adobe社がオープンソースで開発している無償のコードエディタです。
“恋に落ちるエディタ”SublimeTextに馴染めず入れてから1ヶ月放置。どうにか設定を終えて使ってみると、最初こそ恋に落ちたものの今度は機能(特にショートカットキー)が多すぎて覚えられず…w作業効率を上げたくて導入したのに、逆に効率は落ちてしまいました。

そんな矢先、優さんの書いた記事を読んで出会ったのがこのシンプルでイケメンな彼、Bracketsというわけです。

シンプルで手に馴染むBrackets

…が。

使用時間が一番長いのに、なんと私の会社マシンには拡張機能が入りませんでしたw(かろうじてテーマは変えられますw)それでもBracketsを使い続ける理由は、シンプルな操作性、日本語UI、初期設定のままで十分に使いやすい、の3点。ショートカットキーもSublimeTextほど多くなく、物覚えの悪い私でも使いこなせるエディタなんです。

では、具体的にどんな所にホレ込んだのかをご紹介!

彼の好きなところBest5♥

5位 デフォルトのテーマでも十分見やすい

自分が気に入ったテーマを探すのは楽しいですがそれなりに時間がかかりますよね。
でもBracketsに最初から入っている2種類のテーマはとっても見やすくて、このまま変えなくてもいいなぁと思ってしまうほど。

Brackets Dark
Brackets Dark

Brackets Light
Brackets Light

4位 ショートカットキーが少ない

ユーザキーマップ(ショートカットキーの定義ファイル)をカスタマイズすれば増やせますが、SublimeTextほど編集系の機能がないため覚えるキーも少なく、手に負えるレベルで助かっています。おなじみの同文字列を複数選択できる機能ももちろん搭載。SublimeText風キーマップの設定もできますよ~!

3位 開始タグと終了タグのハイライトがデフォルト!

特に長いソースコードを書いていると、開始タグや終了タグを見失って修正時にカラム落ち、なんて経験はありませんか?Bracketsは初期設定のままで開始タグと終了タグ部分をハイライト表示してくれるんです。

開始タグと終了タグのハイライト表示

過去に書かれたぐちゃぐちゃソースを触る機会が多いので、特に<div>~</div>を移動する時には本当に助けられています、よく見失いますw

2位 ホバークイックビュー

画像のパスにカーソル→その画像とサイズがプレビュー表示される
ホバークイックビュー(画像)

カラーコード部分にカーソル→実際の色がプレビュー表示される
ホバークイックビュー(カラーコード)

説明不要の便利機能、ホバークイックビュー。
特に画像のサイズだけ後から追記する場合など、いちいち元ファイルを開かなくてもいいので便利すぎます…。

1位 リアルタイムプレビューとハイライト機能

なんとBracketsにはリアルタイムプレビューが標準搭載…!通常のコーディング作業はもちろん、ローカルサーバで開発するWordPressだってプレビューしてくれちゃうんです!現在編集している部分をハイライト表示してくれるイケメンっぷりにも最高にホレてます。コレがなかったらSublimeTextを無理やり使い続けていたかもしれません。

彼に直してほしいところ

一度保存しないとファイルタイプを選べない

一度保存してからでないとファイルタイプが選べず、カラースキームが適用されません。ちょこっとソースを書いてCMSへ投入したい、など保存する必要がない場合には地味に不便です。

UTF-8以外のファイルは読み込めない

Shift-JisやEUC-JPなどは一度UTF-8に変換する必要があります。UTF-8で書かれたソース以外は読んですらくれないという頑固っぷり…ここは早く改善されるといいなぁ。

また、今あるUTF-8への変換拡張機能は変換後のファイルがコピーとして出力される→それを再読み込みしなければならず、使い勝手が良いとは言えません。(UTF-8→他コードといった逆変換も不可)

Sassが使いづらい

Sassを使いながらリアルタイムプレビューを使う場合、コンパイルできる環境を事前に整えた後に「Brackets Sass」という拡張機能を入れる必要があります。また、出力されるCSSのオプションも現在は「nested」と「compressed」のみ対応とのこと。コンパイルをショートカットキーで行えるようにする、Compassをサポートすると書かれているので今後に期待します!

リンク集

私がBracketsを導入する際にとても参考になった記事をまとめてみました。

まとめ

いかがでしたか?まだまだ成長過程にありますが、メインエディタとしてこれからもバリバリ使い続けていくつもりです。(ちなみにSublime Textも膨大なテキスト修正時に重宝しており、決して嫌いなわけではありません!)少しでもブラケッターの方が増えたら嬉しく思います!

次の記事は12/21日(日曜)、ろっとさんです。どうぞよろしくお願いします^^
それでは…

Bracketsソイヤッ! (っ°ロ°)╮-=ニ= 三≡’,;’;’Brackets))’Д’)

1 件のコメント

  1. ひょっとちゃんsays: 返信

    こんにちは。初めてコメントします。
    最近braketsを使い始めたのですが、ローカルのwordpressでのライブプレビューが動作しなくて疑問に思っています。
    wordpressのテーマのindex.phpでライブプレビューボタンを押すとchromeが立ち上がり、プレビューできるのですが、ライブプレビューが反映されません、、、
    サーバーサイドでなにか設定が必要なのでしょうか?
    こちらの記事にてローカルサーバーでのwordpressもプレビューしているとのことでしたので質問してしまいました。
    そういうのは受け付けてないという感じであれば申し訳ないです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


トラックバックURL

http://miinedesign.jp/blog/web-design/fallinlove-brackets/trackback/

PAGE TOP