Photoshop 使いは、Brackets でコーディングが楽になる!? 初心者のためのテキストエディタ。

Web/10 Jul 2015

先日は「初心者のためのテキストエディタ。迷ったら Atom がおすすめ。」にて Atom が良いと申し上げましたが、「他のやつも紹介せい!」とのお声をいただきまして、そう言われると次に紹介できるのはこれしかない。ということで、Brackets についてです。

Adobe 製のオープンソースのテキストエディタ

公式サイト Bracketsはこんな感じ。

Brackets site

サイトは美しく作られているのですが、ヘッダー右端のメニューアイコン(俗に言うハンバーガーメニュー) にテキストが被っているのがめちゃくちゃ気になります。これ ↓

Brackets site

デザインに携わっているとカラム落ちなどのわかりやすいものはもちろん、このようなテキスト被りも目ざとく発見してしまいます。そして、発見すると、どんな CSS なのかを Developper Tool で見てしまいます。これは Web 屋あるあるですね。

Brackets のサイトは Atom とはまた違う洗練されたデザイン。テキスト量が多い気がしますが、フォントに使われている source-sans-pro が美しい。Google font にあったので、これはすぐに導入できそうです。

source-sans-pro - google fonts

Brackets はこんな人におすすめ

  • Adobe Creative Cloud の Photoshop をよく使う
  • テキストエディタは無料で使いたい
  • 起動がもっさりしているのは使いたくない

というか、別に初心者じゃなくても十分使える高性能のエディタなので、Web デザインに Photoshop を使っているかどうかで決めても良いと思います。

Photoshop ファイルを読み込んでコーディングを楽にしてくれる

Extract for Brackets という拡張機能を使って、Photoshop で作成したデータ(PSD ファイル)を読み込ませることができます。さすがの Adobe 製ですね。ただし、これを使うには、Creative Cloud アカウントが必要。

実際にやってみると、下図のように表示してくれます。これによって得られる情報は、Photoshop のレイヤー構造やテキストの幅と高さ、x,y 座標など様々。Creative Cloud の有償版を使っていなくても、Extract に関してはアカウントを作れば利用可能なようです。

Extract for Brackets

では、どのように使うのかというと、PSD データを Brackets に読み込ませた状態で、CSS を記述するとします。クラス名coverとした div 要素に background プロパティで画像を指定したい時は、下記のように最初の文字を入れるだけで、コードのヒントを出してくれます。

code hint

b と打つだけで、 background: url(images/brackets.png); みたいにやってくれます。パスやファイル名などは間違えたりする場合があるので、結構嬉しい。

ちなみに自分はデザインする時は Mac 専用アプリの Sketch3 を使ってます。Photoshop は画像をいじる時くらいしか使わないので、個人的な需要は少なめな気がしております。

タブは拡張機能(プラグイン)を入れないと使えない

初期でタブが使えません。最初どこからタブを表示させるのかと結構探しましたが、拡張機能(プラグイン)を入れないとダメでした。で、この拡張機能のインストール画面の読み込みにめちゃくちゃ時間かかります。あまりにも長いので、インストールし直しましたが変わらずでした。しばらくアイコンがくるくる回ります。

extension lodaing

クイックオープンが便利

クイックオープンを使えば、任意のファイルに素早くアクセスできます。Brackets 特有の機能ではないですが、文字数を足すと絞りこんでくれる時の検索のスムーズさはかなり良いです。

quick open

最初は CSS でも慣れてくると SCSS や LESS なるものに出会う機会があります。これらで記述できるようになると関数を作成して使用したり、変数を指定したりなど、よりプログラミング志向の記法を使えるようになります。

開発時に SCSS や LESS を使う際は、機能やコンテンツごとに個別にファイルを作成することも少なくないので、ファイル数が多くなりがちです。でもクイックオープンがあれば、サイドバーの階層から探さなくてもファイル名の数文字を入れるだけで、容易にアクセスできるという訳です。

開発用サーバーも立てられる

ローカルでサーバーを立てずに HTML / CSS の作業をファイルをブラウザ確認する程度なら必要ないかもしれませんが、JavaScript を使う場合はエラーが出ることがあります。外部に通信しようとかそういう系統のことをする場合ですね。

通常はローカルのファイルをブラウザで読み込ませると file:///Users/Desktop/test/index.html みたいになりますが、ライブプレビュー機能を使うと、 http://127.0.0.1:52187/index.html のように開発用サーバーが立ち上がるので実際の環境に近い形で挙動を確認できます。

live preview

この時、index.html がプロジェクトの中に含まれていなかったりすると、正しく表示してくれないので注意。 http://localhost:8000/ のようなローカルホストもいけるらしいのですが、自分の環境ではうまくいかなかったので割愛。

Web をがっつりやる人にはおすすめ!!

Brackets はオープンソースなため、開発コードが Github に上がっています。これを見るとかなり高度ですが、ほぼ HTML / CSS / JS のみで作られています。自分は見ただけではさっぱりわかりませんが、これから Web 制作を学ぶ人にとって、馴染みやすい言語でもテキストエディタのようなアプリケーションが作れる良い事例です。ものすごいハードル高いですが。

また、公式サイトによると、

With new features and extensions released every 3-4 weeks, it's like getting presents all year long.

とあり、「3 から 4 週間で新機能や拡張機能をリリースしていくし、1 年中何かしら良いことすんで」と言っておられるので、Atom と同様にすごいスピードで進化していくと思われます。

タブを拡張機能から入れてしまえば、起動も入力も重さも全く気にならず割と快適に使えるはずです。拡張機能の待ち時間を除いては。

参考になるサイト

他のエディタと比べてみて

前回紹介したAtomと今回の Brackets、どちらも無料なのにすごく良かったです。

有償の Sublime Text と比べると、こっちは「恋に落ちるエディタ」というキャッチがすごくイヤなのですが、性能は確かで安定性においてはまだ上かなという感じ。もし Sublime Text を使っていなかったら迷わずどちらかを選ぶと思います。

詳しい機能はすでに参考にあげたように、素晴らしい記事が上がっているので、自分は初心者やテキストエディタを何使おうか迷っている人に向けての観点で書いてみました。前回の記事と合わせて是非参考になれば、書いた甲斐があるってもんです。


追記: 開発ペースがゆっくりになるようです。

公式サイトの「Brackets Blog」によると、2015/10/15 に 最新バージョン 1.5 がリリースされ、安定性の向上と Mac の El Captitan で起こっていた全画面表示やフリーズして落ちるといったバグも改善されていて、さらに、今後は Brackets を Dreamweaver に組み込むために開発周期がゆっくりになるようです。

で、久々に使ってみた感想は、これええね。 今朝から使っていますが、安定しているおかげかすごく使い易く、日本語の改行位置もちょうど良い。拡張機能を開く際のクルクルは未だに長いですがね。 HTML / CSS / JavaScript やそれらの拡張言語、フロントエンド系のことをやるには十分なツールかと思います。日本語入力の快適さは Brackets が自分好みなので、当面はこれでブログを更新しようかと思います。

将来的なことを考えると Dreamweaver を使っている人は、Brackets の方が都合良いかもしれませんね。