無料エディター「Brackets」にも恋に落ちた

先日から、Adobe提供の無料開発エディター「Brackets」を使っています。

僕はこれまで、Wordpressテーマの開発などは「恋に落ちるエディター」のキャッチフレーズでおなじみのSublime Text 3を利用してきました。Sublime Textは、そのキャッチフレーズ通りの素晴らしいエディターです。

けれど、初めてBracketsをインストールして少し使ってみた瞬間から、「これは!」と、Sublime Textを初めて使った時と負けないぐらいの衝撃を受けました。

Bracketsも、Sublime Textと同様拡張で様々な機能を追加できるようになっています。けれどまず今回はデフォルト機能だけで気に入った部分を紹介したいと思います。

スポンサーリンク
レクタングル(大)広告

Bracketsとは

Bracketsのインターフェース

Bracketsは、HTML、CSS、JavaScriptで開発されているオープンソースコードエディターです。Windows、Macなどで利用できます。

AdobeによるとBracketsは、HTML、CSS、JavaScript用となっています。けれど、C系、PHP、Ruby、Python他、37の言語でシンタックスハイライトが用意されており、メジャーな言語なら問題なく利用できると思います。

加えて、無料で使えるうえに、導入も簡単、デフォルトで日本語にも対応しています。これからWEB制作などの勉強を始める方には、うってつけのエディターではないかと思います。

テーマで見た目を変更したり、拡張で機能の補強もできるので、WEB初学者から上級者まで、幅広くカバーできるエディターになっていると思います。

とりあえずインストール方法

初期設定もとても簡単です。(以下Windowsでの方法)

まずBracketsからファイルをダウンロードします。

Brackets - A modern, open source code editor that understands web design.

ダウンロードしたファイルを起動すると以下のようなインストーラーが立ち上がります。

Bracketsのインストール

英語のインストーラーですが、(特別な設定が不要の場合は)「Next」を押していくだけでインストールは終わってしまいます。

で、Bracketsを起動すると、もう既に以下のような日本語環境になっています。

起動時に既に日本語環境になっている

とにかく、日本人が母国語で利用するために、余分な初期設定が全く必要ないのは手軽です。

デフォルト状態で既に気に入ったところ

Bracketsは、デフォルトの状態で既に、Sublime Textなどにはない、便利な機能を備えています。

以下では、Bracketsを使ってみて「えっ!何これ、すごい!」と思わず興奮してしまった機能などを紹介していきたいと思います。

なんたって無料

climb-173_640

まず、何と言っても無料でこれだけのエディターが使えるのは、素晴らしいです。

Sublime Textでもずっと、無料で使用しようと思えばできますが、購入を促すダイアログがときどき表示されて、心苦しい思いを感じてしまうのではないでしょうか。(僕は購入して利用しています。)

同じ、無料の高機能エディターで、Atomもあるのですが、個人的にはBracketsの方が好みです。

インストールした瞬間に日本語表示

インストールした時点で日本語化されている

Bracketsのインストールは30秒で終わるほどのとても簡単なものです。インストール終了後、デフォルト状態でメニューの全てが日本語化されて利用できるようになっています。

加えて、拡張やテーマのインストールもやろうと思えばすぐにできるようになっています。

Sublime Textは、パッケージ(拡張)のインストールをしようと思ったら、

  1. コンソールを開く
  2. サイトを開く
  3. パッケージ導入コードをコピー
  4. コンソールに貼り付けて実行

という手順が必要でした。けれどBracketsは、即インストールできる状態になっています。

それに、日本語化となるとSublime Textは、結構な作業が必要でしたが、Bracketsは日本語化にかかる作業時間は0です。

もちろんデフォルトで日本語IMEにも対応しています。

コードを折りたためる

Bracketsは、デフォルト状態でコードを折りたためるようになっています。

CSSコードはもちろん、

CSSコードを折りたたむことができる

HTMLコードも

HTMLコードを折りたたむことができる

PHPのfunctionやif文なども折りたたんだり、展開したりできます。

PHPのファンクションやif文を折りたたむことができる

エディターによっては、これができるものもありますが、Sublime Textデフォルトにはなかったもので。

これができると、当分利用する必要のない部分を閉じておけるので便利です。

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

Bracketsは、デフォルトで開始タグ、終了タグ、開始カッコ、終了カッコをハイライト表示してくれます。

タグの場合

開始タグ終了タグを強調表示

カッコの場合

開始カッコ、終了カッコを強調表示

これがあるだけで、範囲の確認のしやすさが段違いで作業効率が上がります。

CSSのクイック編集

HTMLの要素やID、クラスなどを右クリックして「クイック編集」を選択すれば(Ctrl+EでもOK)、編集箇所直下にクイック編集ウィンドウが開きスタイルなどを変更することができます。

CSSのクイック編集

わざわざ、場所を探す必要もなく、CSSファイルを開きなおす必要もないので、この機能にはかなり心を打ち抜かれました。

色のクイック編集

CSSの色の変更も簡単です。

色部分にマウスカーソルを乗せると、色も見ることができますし、カラーコード部分を右クリックして「クイック編集」を選択(Ctrl+EでもOK)すれば、直下にカラーピックツールが表示され色選択ができます。

色のクイック編集

ホバービュー

マウスカーソルを、画像ファイル文字列などの上に乗せると、その画像がポップアップして表示されます。

ファイルにマウスを乗せると画像などがポップアップされる

コードを書いていて「これどんな画像だったっけ?」なんて時には便利です。

ライブプレビュー機能

Bracketsは、編集した瞬間から変更状態をブラウザで確認できる「ライブプレビュー機能」がデフォルトで搭載されています。

ライブプレビュー機能

CSSも編集した瞬間からブラウザにプレビュー表示されます。

CSSでのライブプレビュー機能

拡張が豊富、しかも取得が簡単

右サイドバーの「拡張機能マネージャー」拡張機能マネージャーのボタンボタンを押せば、すぐに拡張をインストールし始めることができます。

2015-06-16_12h43_46

既にかなりの数の便利な拡張機能がそろっています。

ざっと数を数えてみたのですが、600種類以上はあるような気がします。

拡張機能マネージャー

インストールは簡単で、単にキーワードで検索して、出てきた結果から「インストール」ボタンを押すだけです。

Bracketsの拡張をインストールする方法

このように、めちゃくちゃ管理が簡単です。

WordPress向けのBrackets拡張については以下に詳しく書いてあります。

前回、無料エディター「Brackets」の素晴らしいデフォルト機能について書きました。Bracketsは、デフォルト...

テーマも豊富で設定が手軽

テーマの数も豊富です。ちょっとざっと数えてみた感じですが、この記事を書いた時点では180以上のテーマをエディター上からインストールできるようになっています。

Bracketsのテーマの管理

インストール方法は、拡張とほぼ同じです。

メインメニューから「表示→テーマ」を選択し、

メインメニューのテーマメニューを選択

出てくる「テーマ設定」ダイアログの「現在のテーマ」から利用したいテーマを選択します。

Bracketsのテーマ設定ダイアログ

僕は、暗色系のテーマのほうが見やすいので、Monokai系のテーマにしています。

BracketsでMonokaiテーマを利用

Bracketsのテーマは、以下からスクリーンショットを見ながら、好みのものを探すこともできます。

Brackets Themes: A collection of Brackets editor themes

まとめ

このように、Bracketsは、デフォルトの状態で既にかなり使えるエディターになっていると思います。その他にもまだまだ、良いところは沢山ありますが、ちょっと紹介しきれません。

これに加えて、いろいろな機能を追加できる拡張が600以上、テーマも百数十はそろっています。いくらでも、機能の補強が可能です。

1つ難点を挙げるとすれば、拡張をいろいろインストールしていくと、起動や動作などが重くなるくらいでしょうか。

それでも、正直な感想として「これが無料で使えるなんて本当にいいんだろうか?」って感じです。どうしてこんな良いエディターに先日まで気づかなかったんだろう。

しばらく、Sublime TextとBracketsどちらをメインエディターにするかのせめぎ合いになりそうです。

拡張のお勧めは以下。

前回、無料エディター「Brackets」の素晴らしいデフォルト機能について書きました。Bracketsは、デフォルト...
スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告

スポンサーリンク

『無料エディター「Brackets」にも恋に落ちた』へのコメント

  1. 名前:taku 投稿日:2015/06/20(土) 00:33:38 ID:c50fb7f5f

    記事見て早速bracketsをダウンロードしてみました!
    非常に使いやすくて、紹介してくれてありがとうございます!

    ちょっと気になるんですけど
    dropboxなどのオンラインストレージを使用して
    他のPCと共有することは可能なのでしょうか?

  2. アバター画像 名前:わいひら 投稿日:2015/06/20(土) 14:26:43 ID:1b0a3a9ae

    僕も最近知って、使い始めたのですが、無料なのにとても良いエディターですよね。

    dropboxなどのオンラインストレージを使用して
    他のPCと共有することは可能なのでしょうか?

    こういった拡張みたいなもののことでしょうか?
    Dropbox extension for Brackets

  3. 名前:taku 投稿日:2015/06/20(土) 14:40:36 ID:07ea6a87f

    イメージとしてはこんな感じです。
    http://qiita.com/ma_me/items/f3fe90e5185bddf68f12

    シンボリックリンク作成して拡張機能を共有するということです。
    一つのPCで必死に入れた拡張を他のPCでもやりたくないので(笑)

  4. アバター画像 名前:わいひら 投稿日:2015/06/20(土) 21:01:40 ID:1b0a3a9ae

    こんな方法があったんですね。
    教えていただき、ありがとうございます。
    Bracketsの設定を調べてみたところ、Windowsなら、以下の位置の中身の幾つかをシンボリックリンクで共有すればいけるのではないかと思います。

    C:\Users\ユーザー名\AppData\Roaming\Brackets

    まだ試していませんが、後で試してみたいと思います。

  5. アバター画像 名前:わいひら 投稿日:2015/06/20(土) 22:08:59 ID:1b0a3a9ae

    拡張だけで良いのなら、以下のパスを同期すればいいのかもしれません。

    C:\Users\ユーザー名\AppData\Roaming\Brackets\extensions

  6. 名前:砂糖ハイジ 投稿日:2018/01/31(水) 12:48:15 ID:08f9286fe

    この記事に記載されているリンクからbracketsをダウンロードしたのですが日本語ではなく英語でした。
    ググってみても解決策がわかりません。何か日本語化する方法は無いのでしょうか?
    それとも古いバージョンをダウンロードすればいいのでしょうか?
    わいひらさんに聞くのは間違っているかもしれませんが、何かお知りでしたら教えていただきたいと思いコメントさせていただきました。

  7. 名前:砂糖ハイジ改め佐藤ハイジ 投稿日:2018/01/31(水) 15:15:15 ID:08f9286fe

    ごめんなさい。解決しました。
    “debug”→”switch language”から日本語を選択するだけでした。
    お騒がせしました。

  8. アバター画像 名前:わいひら 投稿日:2018/02/02(金) 01:22:28 ID:6dbd3a304

    うまくいったようでよかったです^^

  9. 名前:K. Oda 投稿日:2019/05/01(水) 14:56:52 ID:f81848384

    Bracketsをインストールしましたが正しいBrackets.jsonではありません。というメッセ字が現れ、下記のコードが表示されました。どこをどう直せばよいのかお教えいただけませんでしょうか。
    {
    “brackets-eslint.gutterMarks”: true,
    “brackets-eslint.useLocalESLint”: false,
    “fonts.fontSize”: “12px”,
    “fonts.fontFamily”: “‘SourceCodePro-Medium’, MS ゴシック, ‘MS Gothic’, monospace”
    }
    “livedev.multibrowser”: true

  10. アバター画像 名前:わいひら 投稿日:2019/05/02(木) 12:06:35 ID:5fd31a6be

    「“livedev.multibrowser”: true」が{波括弧}内から外れているからではないでしょうか。
    正しく記述するのであれば、こうかと思います。

    {
      “brackets-eslint.gutterMarks”: true,
      “brackets-eslint.useLocalESLint”: false,
      “fonts.fontSize”: “12px”,
      “fonts.fontFamily”: “‘SourceCodePro-Medium’, MS ゴシック, ‘MS Gothic’, monospace”,
      “livedev.multibrowser”: true
    }