なお、本記事はEdge Code CC Previewの内容をもとに執筆したものです。今後の開発において、機能や操作方法が変更となることがあります。Edge CodeはAdobe Creative Cloudから入手でき、無償メンバーでも利用できます。
Adobe Edge Code CCとは
「Adobe Edge Code CC」（以下Edge Code）は、Adobeから最先端のWebサイトを構築するためにリリースされたAdobe Edgeツール＆サービスのコードエディタ担当のツールで、8/26執筆現在プレビュー5が公開されています。
Edge CodeのリリースによりAdobeはDreamweaver（以下DW）と2つのエディタをラインナップとして掲げることになりましたが、DWが全部入りの統合エディタとすれば、Edge Codeは軽量かつ、最新の開発スタイルに必要な機能がふんだんに盛り込まれた次世代エディタの様相を呈しています。
Adobe Edgeツール＆サービスとは
Adobe Edgeツール＆サービス（以下Edge Tools）は多様な閲覧環境に対応しなくてはならない、最新のWeb制作現場のニーズに答えるべく、従来のツール群とは別のラインナップとして開発されたシリーズです。名前のとおりエッジの効いたアプリケーションが揃っており、今後よりユーザーが増えていくことが予想されます。
モバイルの実機とリアルタイム連動確認が可能なEdge Inspect CC、Flashを作るような感覚でHTML5ベースのアニメーションを構築するEdge Animate CC、レスポンシブデザインのプロトタイプを迅速に行うためのEdge Reflow CC、HTML5のコードをモバイルアプリケーションに書き出すためのPhoneGap Buildなど、機能やニーズに特化したツールが並びます。
これらのツール群はまだまだ発展途上ですが、それぞれのツールが使いやすい形でお互い親和性を持てるように日々開発が進められており、アップデートのたびにとても良いツールに進化していっています。Edge Toolsのページで各ツールの詳しい情報を確認することができます。
Adobe Bracketsとの違い
AdobeはEdge Codeとは別に、HTML5とCSSとJavaScriptで構築されたAdobe Brackets（以下Brackets）というオープンソースエディタを公開しており、Edge CodeはBracketsのディストリビューションとしてEdge Toolsの他のツールとの親和性を高めたツールとして作られています。
Bracketsは、8/26現在Sprint 30に至るまでにユーザーのフィードバックをよい形で取り入れて進化し続けています。Edge CodeはこのBracketsの良質な開発サイクルを継承しつつ、Edge Toolsとのシームレスな連携により高度な開発環境を構築することができ、ツールを開発環境モジュールのような感覚で好きに選べるライトさは好感が持てます。
従来のAdobeのツール群はバージョンが変わるたびに使い勝手が大きく変わり、ユーザーの声が届いていないように見受けられる節が多々感じられましたが、いい形でフィードバックも取り入れているようで、ロックインも大きくは発生しないことが期待できます。
Edge Codeのその他の特徴
前述のとおり、Edge Codeは軽量ながらも優れた拡張性を備えたエディタです。詳しくは第2回で触れていきますが、主な特徴として下記のようなものがあります。
- 多くのBrackets用プラグインが利用可能
- エディタ上で直接画像のプレビューが可能
- HTML上でCSSを直接編集（コンテキスト内編集）
- ブラウザ上でのリアルタイムプレビュー
- 簡易ローカルサーバー環境を標準搭載
- 直感的なカラー編集
- Adobe Kulerとの統合開発
- Edge Inspectと連動したモバイル開発環境
- シームレスにEdge Web Fontsを指定可能
- PhoneGap Buildとの連携
- HTML5ベースの拡張機能開発が可能
- コード上でCSSドキュメントの閲覧が可能
- RequireJSやjQueryの標準サポート
- JSLintの標準搭載
- 編集中のCSS箇所をブラウザ上でハイライト
- 直感的な拡張機能管理
このように他のエディタにはない、Adobeならではの機能を多く備えており、今後Web制作者にとって欠かせないエディタになる可能性を感じます。
