先日から、Adobe提供の無料開発エディター「Brackets」を使っています。
僕はこれまで、Wordpressテーマの開発などは「恋に落ちるエディター」のキャッチフレーズでおなじみのSublime Text 3を利用してきました。Sublime Textは、そのキャッチフレーズ通りの素晴らしいエディターです。
けれど、初めてBracketsをインストールして少し使ってみた瞬間から、「これは!」と、Sublime Textを初めて使った時と負けないぐらいの衝撃を受けました。
Bracketsも、Sublime Textと同様拡張で様々な機能を追加できるようになっています。けれどまず今回はデフォルト機能だけで気に入った部分を紹介したいと思います。
目次
Bracketsとは
Bracketsは、HTML、CSS、JavaScriptで開発されているオープンソースコードエディターです。Windows、Macなどで利用できます。
AdobeによるとBracketsは、HTML、CSS、JavaScript用となっています。けれど、C系、PHP、Ruby、Python他、37の言語でシンタックスハイライトが用意されており、メジャーな言語なら問題なく利用できると思います。
加えて、無料で使えるうえに、導入も簡単、デフォルトで日本語にも対応しています。これからWEB制作などの勉強を始める方には、うってつけのエディターではないかと思います。
テーマで見た目を変更したり、拡張で機能の補強もできるので、WEB初学者から上級者まで、幅広くカバーできるエディターになっていると思います。
とりあえずインストール方法
初期設定もとても簡単です。(以下Windowsでの方法)
まずBracketsからファイルをダウンロードします。
ダウンロードしたファイルを起動すると以下のようなインストーラーが立ち上がります。
英語のインストーラーですが、(特別な設定が不要の場合は)「Next」を押していくだけでインストールは終わってしまいます。
で、Bracketsを起動すると、もう既に以下のような日本語環境になっています。
とにかく、日本人が母国語で利用するために、余分な初期設定が全く必要ないのは手軽です。
デフォルト状態で既に気に入ったところ
Bracketsは、デフォルトの状態で既に、Sublime Textなどにはない、便利な機能を備えています。
以下では、Bracketsを使ってみて「えっ!何これ、すごい!」と思わず興奮してしまった機能などを紹介していきたいと思います。
なんたって無料
まず、何と言っても無料でこれだけのエディターが使えるのは、素晴らしいです。
Sublime Textでもずっと、無料で使用しようと思えばできますが、購入を促すダイアログがときどき表示されて、心苦しい思いを感じてしまうのではないでしょうか。(僕は購入して利用しています。)
同じ、無料の高機能エディターで、Atomもあるのですが、個人的にはBracketsの方が好みです。
インストールした瞬間に日本語表示
Bracketsのインストールは30秒で終わるほどのとても簡単なものです。インストール終了後、デフォルト状態でメニューの全てが日本語化されて利用できるようになっています。
加えて、拡張やテーマのインストールもやろうと思えばすぐにできるようになっています。
Sublime Textは、パッケージ(拡張)のインストールをしようと思ったら、
- コンソールを開く
- サイトを開く
- パッケージ導入コードをコピー
- コンソールに貼り付けて実行
という手順が必要でした。けれどBracketsは、即インストールできる状態になっています。
それに、日本語化となるとSublime Textは、結構な作業が必要でしたが、Bracketsは日本語化にかかる作業時間は0です。
もちろんデフォルトで日本語IMEにも対応しています。
コードを折りたためる
Bracketsは、デフォルト状態でコードを折りたためるようになっています。
CSSコードはもちろん、
HTMLコードも
PHPのfunctionやif文なども折りたたんだり、展開したりできます。
エディターによっては、これができるものもありますが、Sublime Textデフォルトにはなかったもので。
これができると、当分利用する必要のない部分を閉じておけるので便利です。
開始タグ終了タグをハイライト表示
Bracketsは、デフォルトで開始タグ、終了タグ、開始カッコ、終了カッコをハイライト表示してくれます。
タグの場合
カッコの場合
これがあるだけで、範囲の確認のしやすさが段違いで作業効率が上がります。
CSSのクイック編集
HTMLの要素やID、クラスなどを右クリックして「クイック編集」を選択すれば(Ctrl+EでもOK)、編集箇所直下にクイック編集ウィンドウが開きスタイルなどを変更することができます。
わざわざ、場所を探す必要もなく、CSSファイルを開きなおす必要もないので、この機能にはかなり心を打ち抜かれました。
色のクイック編集
CSSの色の変更も簡単です。
色部分にマウスカーソルを乗せると、色も見ることができますし、カラーコード部分を右クリックして「クイック編集」を選択(Ctrl+EでもOK)すれば、直下にカラーピックツールが表示され色選択ができます。
ホバービュー
マウスカーソルを、画像ファイル文字列などの上に乗せると、その画像がポップアップして表示されます。
コードを書いていて「これどんな画像だったっけ?」なんて時には便利です。
ライブプレビュー機能
Bracketsは、編集した瞬間から変更状態をブラウザで確認できる「ライブプレビュー機能」がデフォルトで搭載されています。
CSSも編集した瞬間からブラウザにプレビュー表示されます。
拡張が豊富、しかも取得が簡単
右サイドバーの「拡張機能マネージャー」ボタンを押せば、すぐに拡張をインストールし始めることができます。
既にかなりの数の便利な拡張機能がそろっています。
ざっと数を数えてみたのですが、600種類以上はあるような気がします。
インストールは簡単で、単にキーワードで検索して、出てきた結果から「インストール」ボタンを押すだけです。
このように、めちゃくちゃ管理が簡単です。
WordPress向けのBrackets拡張については以下に詳しく書いてあります。
テーマも豊富で設定が手軽
テーマの数も豊富です。ちょっとざっと数えてみた感じですが、この記事を書いた時点では180以上のテーマをエディター上からインストールできるようになっています。
インストール方法は、拡張とほぼ同じです。
メインメニューから「表示→テーマ」を選択し、
出てくる「テーマ設定」ダイアログの「現在のテーマ」から利用したいテーマを選択します。
僕は、暗色系のテーマのほうが見やすいので、Monokai系のテーマにしています。
Bracketsのテーマは、以下からスクリーンショットを見ながら、好みのものを探すこともできます。
まとめ
このように、Bracketsは、デフォルトの状態で既にかなり使えるエディターになっていると思います。その他にもまだまだ、良いところは沢山ありますが、ちょっと紹介しきれません。
これに加えて、いろいろな機能を追加できる拡張が600以上、テーマも百数十はそろっています。いくらでも、機能の補強が可能です。
1つ難点を挙げるとすれば、拡張をいろいろインストールしていくと、起動や動作などが重くなるくらいでしょうか。
それでも、正直な感想として「これが無料で使えるなんて本当にいいんだろうか?」って感じです。どうしてこんな良いエディターに先日まで気づかなかったんだろう。
しばらく、Sublime TextとBracketsどちらをメインエディターにするかのせめぎ合いになりそうです。
拡張のお勧めは以下。
記事見て早速bracketsをダウンロードしてみました!
非常に使いやすくて、紹介してくれてありがとうございます!
ちょっと気になるんですけど
dropboxなどのオンラインストレージを使用して
他のPCと共有することは可能なのでしょうか?