WEBCRE8.jp > 使う > Sublime Text2との恋を見送り、Adobe Bracketsに巡り会いました

Sublime Text2との恋を見送り、Adobe Bracketsに巡り会いました

この記事は約8分ぐらいで読めます

永らくHTMLエディターを移ることなく過ごしてきたのですが、先日Adobe Bracketsの記事を見て一目ぼれし、インストールしてみました。ごめんな、Sublime Text…！

どうもハマれなかったSublime Text

私は普段HTMLを書くときに結構適当なエディターを使ってきたんですが、いい加減ちゃんと効率のいい、Zen-Codingにも対応してて、HTML5の予測変換も出来てSassに対応したエディターを使わなきゃなーと思ってました。

そして現れたのがSublime Text。

確かに、知人友人のweb制作者達がこいつの魅力にバッタバッタとやられてました。私も望んでいる要件を満たしているこいつが気になってはいました。

ちょうど@sou_labさんと@kojika17さんがミニ勉強会を開いてくれたこともあって、とりあえずこれを触ってみる機会が出来ました。

しかし…どうも手になじまない。皆が絶賛していて、機能的にも良いものだという事は間違いないのだけど、何故かずっとこれを使おうとは思えない…。

そして先日、

この二つの記事を読みました。紹介されているのはAdobeからリリースされているオープンソースのエディター、Adobe Brackets。

ビビっときました。こいつだ、私が使いたいのはこいつだと思いました。…前持っていっておくと、Bracketsは前述の私の要件を満たしてはいませんｗ

Adobe Brackets

それでもなぜAdobe Bracketsがツボに入ったか、私のようなそこまでハードなコーディングをしない、さらっとHTMLやCSSを書いてweb制作をする人向けだと思われた特徴を挙げます。

インストールの説明も単純なので飛ばします。必要ないと思いますしｗ一応、Brackets | Downloadsからダウンロードします。

インターフェースが日本語です。まずこれはやはり英語に苦手意識を持っている人にとって大きいです。

日本語のインターフェース

後から知ったのですが、この日本語化には我らがhtml5jの白石さんが携わっているんですね！@kojika17さんに教えてもらったんですけど。確かにそういう話、見た気がしますけど忘れてました…。当時の私は使わないと思ってたんでしょうねー。

私は普段Firefoxを使っているんですが、動作の重いものだけGoogle Chromeで開くことで併用しています。あとFirefox、なんかバージョン上げてからずっと動画の表示が上手くいかないので動画だけ諦めてChromeで見てますｗ

このAdobe Bracketsは、エディター上で編集したコードをGoogle Chrome上で開き、そのウィンドウはCSSの変更をリアルタイムに反映します。HTML、JSの編集は保存時に反映します。今後Chrome以外でも出来るようにはなりそうですね。

右上の稲妻マークを押すと出るダイアログ

Sublime Text2もこういう機能はPackageで対応しているようですけど、やっぱりこのリアルタイムっぷりはインパクトでかいです。機能の使いやすさにおいてもダイアログが出て、使うべき場所へスムーズに連れていかれるというUIに依る部分が大きいです。

拡張機能はSublime Text2でもわりと簡単に出来ますが、Adobe Bracketsも簡単です。右上の拡張機能ボタンを押すと出てくる入力欄に、GitHubの拡張機能のページのURLを入れるだけです。

拡張機能を探すというボタンを押すとChromeが立ち上がる

エクステンションを選択する

飛んだページのURLを入力するとインストールできる

作業の手順は何手かあるんですけど、Bracketsが起こす挙動や説明と、こっちに期待されているであろう操作がキレイに繋がっているんですよね。すごくしっくりきます。

まあ、拡張機能はまだ英語なんで完全にってわけにはいかないですけど、それでも一部が日本語になっていることで操作の滑り出しが良いです。

で、拡張機能の説明が英語なのでまだあんまりやってませんけど、とりあえずEmmet(Zen-Coding)は入れましたｗ

他にも本来はHTML、CSS、JavaScriptの入力補完しかないものの、PHPをサポートする拡張機能があるみたいですね。

まず色んなところで言われていますが、コードビューの分割が出来ないのが痛いです。私は時々iPad上でJSbinでコーディングしたりしてますけど、やっぱり分割は便利ですよね。

それと、2013年の5月の現時点では致命的なことにSassに拡張機能でも対応していません。これは残念…。

Adobe Bracketsはまだどんどんバージョンアップがされており、現在はSprint24(sprintは全力疾走の意)という事です。拡張機能のコミッターも多数いることですし、上に挙げた二つは対応が必要として現在検討されているようです。英語が分からないのでたぶんですけどそんな感じ。

ざっくりとでしたがAdobe Bracketsの紹介をしてみました。

私の場合はこれからSassを覚えたいのですぐさま導入という訳にもいかなかったりするのですが、その辺が必要なければ、軽くコーディングする人にはすごく向いていると思います。フロントエンドバリバリって人には他の選択肢があるかもです。

Adobe BracketsのCreative Cloud版であるEdge Codeの方もこの分だとかなり触ってみたいところですけど、とりあえずもうちょっとこっちを触ってみたいと思います。まあEdge Codeも無料なので別に今から使ってみてもいいんですけど。殆ど一緒みたいですし。

Sublime Textをメインで使いながら軽いものはこっちで作るって感じでもいいですね。Sass対応後の完全移行も期待したいところです…！