なお、本記事は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制作者にとって欠かせないエディタになる可能性を感じます。
Edge Codeの導入手順
Creative Cloudへの登録
Edge Codeをインストールするには、Creative Cloudへの登録が必要です。登録がお済みでない方は、Creative Cloudのページから利用するプランの登録ボタンをクリックし、手続きを行ってください。
Edge Code導入の準備
Creative Cloudへの登録が完了したら、Edge Codeの製品ページのダウンロードボタンからインストールを行います。単体のアプリケーションのダウンロードが始まるわけではなく、Adobe Creative Cloudデスクトップアプリケーション（以下デスクトップアプリケーション）のダウンロードが開始されます。
他のCretive Cloud製品をお使いの方は、直接デスクトップアプリケーションが起動されます。
Adobe Application Managerをインストール済みの方は、自動でアップグレードされます。
Edge Codeのインストール
Creative Cloudのアプリケーションは、デスクトップアプリケーションを経由してダウンロードし、インストールまでの一連の処理が一括して行われます。使用したい製品のインストールボタンをクリックするだけで、インストールが始まります。インストールが完了すると、下記のようにアプリケーションのグループに表示されます。
インストールが完了したら、通常のアプリケーションと同様の方法で起動しましょう。初回はデモコードが表示されますので、［File］-［Open Folder］から適宜ご自分のプロジェクトフォルダを開いて使用してください。次回はEdge Codeの特徴的な機能の使い方と、便利なショートカットを紹介していきます。
