タグ: エディタ

  • Adobe製オープンソースのエディタ、「Brackets」がすごかった。

    Adobe製オープンソースのエディタ、「Brackets」がすごかった。

    アドビ、オープンソースのHTMLエディタ「Brackets」を公開。まだまだ開発中 - Publickey
    など、開発が続いていた、Adobe製エディタです。

    また、Creative Cloudに入っている Adobe Edge Codeの元になっているようです。FedoraとRHELみたいな関係と思えばいいんですかね。

    Brackets

    https://github.com/adobe/brackets

    Adobe Edge Codeを触ってみたついでにこっちも触ってみたのですが、なかなかすごかったので紹介。

    ライブプレビュー & ライブ編集

    エディタの右上の「雷マーク」をくりっくすると、
    livepreview

    という表示がでて、ローカルサーバーが立ち上がり、ライブプレビューが動作します。

    「DreamWeaverのプレビュー部分がブラウザにならないかな・・・」とか
    「開発者ツールで編集したCSSそのまま保存できないかな・・・」

    というマークアップエンジニアの願いが遂に現実のものに!

    また、CSSを編集していると、
    livepreview2

    みたいな感じで、現在編集している要素がハイライトされます。

    拡張機能

    また、拡張機能もたくさん用意されているようです。
    https://github.com/adobe/brackets/wiki/Brackets-Extensions

    また、基本的には、Macの場合であれば、 「ファイル → 拡張機能のインストール」から、GithubレポジトリのURL(ブラウザでアクセスできるURL)をコピペするだけでインストールできます。

    extention

    GUIも日本語化されているし、jsonやらテキストファイルで設定を書くようなことも無いので、デザイナーさんでも取っ付き易そうですね。

    ただ、OSのnode.jsを使うようなプラグインもあるので、その場合はコンソールを叩いたりする必要はあるみたいです。

    HTML/CSS/Javascriptで作られているので、拡張機能の作成のハードルも低そうです。

    また、色やグラデーション、img要素にカーソルを合わせれば、その色やら画像が表示されたりなど、Adobeならではの気遣いみたいなものを感じます。

    また、JSLintが標準で入っていたり、jQueryの入力保管が最初から入っていたり、当然のごとく、Emmet/Zen-Codingもプラグインありますし、LessをコンパイルするプラグインもあったりでフロントエンドならSublimeより良い選択肢かも知れません。

    DreamWeaverの使いやすい入力保管も受け継いでいてHTMLも書きやすいです。

    かつてDwをテキストエディタとしてのみ使い、現在はSublime Text 2でコードを書いている僕のような人間にとって、Brackets / Adobe Edge Code は良い選択肢かも知れないですね。