Adobe Edge Codeの基本操作
Edge CodeのUIは直感的に使えるようシンプルに削ぎ落とされており、洗練された印象を与えます。ファイル間の移動を極力感じない操作感は、軽量エディタのイメージを変えてくれるでしょう。
本稿では、各UIの役割やコーディングを高速化するために便利なショートカットなどを紹介していきます。また、解説はMacベースで行います。Windowsの方は適宜commandをCtrlに、optionをAltに読み替えてご覧ください。controlとされているところはWindowsでもそのままCtrlとなります。
Edge Codeの各UIの役割
Edge CodeのUIは上図のように4つのエリアで構成されています。各部の名称が定まっているわけではありませんが、本稿では下記のように定義させていただきます。
- Working Files（作業中ファイルのナビゲータ）
- ファイルナビゲータ
- コードエリア
- ユーティリティボタン
1. Working Files（作業中ファイルのナビゲータ）
通常のタブエディタと違い上部のタブはなく、サイドバーに現在開いているファイル名が縦に並んでいき、タブの役割も兼ねるUIで見やすくまとめられています。個人的にはスッキリしていて、使い勝手がいいと感じます。タブ間はcontrol+tabで移動可能です。
2. ファイルナビゲータ
Edge Codeには、プロジェクトファイルなどの独自ファイルは特にありません。その代わり、過去に開いたフォルダが記憶され、いつでも直近に開いたフォルダをプロジェクトのように開きやすくなっています。フォルダ名をクリックすると過去に開いたフォルダ一覧とフォルダを開くメニューが表示され、選択すると該当のフォルダメニューへすぐに切り替わります。一度に開けるウィンドウは1つのみです。
3. コードエリア
Edge Codeのコードエリアには魔法が備わっています。極力画面遷移を減らした使い勝手は感動すら覚えます。後ほどショートカットの節で、魔法の詳細とそのためのショートカットをご紹介します。
4. ユーティリティボタン
ユーティリティボタンは初期設定では、ライブプレビューの開始、Adobe Edge Web Fonts（以下、Edge Web Fonts）との連携、Adobe Edge Inspect（以下、Edge Inspect）との連携、Extension Managerの起動がボタンとして用意されています。それぞれ先進的な機能を備えたボタンで、ショートカットも用意されていますが、直感的に扱えるようにボタンエリアが設けられているようです。機能の詳細を見ていきます。
a. ライブプレビュー（Live Preview）の開始ボタン
Edge Codeには、デフォルトでGoogle Chrome（以下Chrome）とのリアルタイム連動機能が備わっています。ボタン一つで簡易サーバーが起動し、Chromeとの連動が始まります。ファイルを保存すると自動でChromeがリロードされます。これはうれしいですね。
簡易サーバー上でプレビューされるため、/images/などのルートパスで記述してもしっかりプレビューが可能です。ローカルサーバーは独自のポートを適宜割り振ってEdge Codeが立ち上げてくれますが、別のローカル開発環境をターゲットサーバーにすることも可能です。
現在はChromeのみ対応していますが、今後すべてのメジャーブラウザに対応できるようにする予定とのことです。これほど手軽にライブプレビューが始まるというのは、Web制作者の強い味方になりそうです。
b. Edge Web Fontsとの連携
Edge Web Fontsは、世界中の商用Webフォントへのアクセスを提供するTypekitを使った無償のWebフォントサービスです。サイトにWebフォントを組み込むためのJavaScript/CSSのコードを提供してくれます。
Edge Codeを使うことによって、Google Web FontsやAdobe Typekitとの連携がエディタからシームレスに行えます。通常は各Webフォントの提供元サイトへ行ってフォントを選ぶ手間が発生しますが、Edge Web Fontsを利用することでローカルのフォントを選ぶような感覚で扱うことが可能になります。
CSSのプロパティでfont-familyとタイプすると、フォント一覧と共にBrowse Web Fonts..という項目が表示されます。これを選ぶと、Edge Web Fontsを選択するダイアログが現れます。
ユーティリティボタンのWeb Fontsボタンは、Web Fontsをまだ使用していなかったり、CSSファイル以外を開いている場合に押すと、Web Fontsの読み込み手順の解説が表示されます。すでに読み込まれている場合は、現在読み込んでいるWeb Fonts用スクリプトの編集ダイアログが表示されます。
いずれの設定パネルも別ウィンドウが立ち上がるわけでなく、すべてエディタ内で完結するようになっており、HTMLベースのアプリケーションらしさを感じます。ローカルのサクサクの操作性を持った、Webアプリケーションといった印象です。Webアプリ開発の参考にもなるのではないでしょうか？
c. Edge Inspectとの連携
Edge Inspectは、同Wi-Fiネットワーク上のデバイスと連動してリアルタイムプレビューを可能にするためのアプリケーションです。PC上でリロードすると即座にデバイスもリフレッシュされるため、モバイルサイトの開発にはもはやなくてはならないツールと言えます。
無償のプランでは1デバイスのみ接続可能ですが、有料プランにすると複数のデバイスを同期することができるため、確認のためのコストが圧倒的に軽減されます。Edge Codeでは、ライブプレビュー機能とEdge Inspectを連動させることが可能なため、迅速なモックアップ開発ツールとしてはもちろん、日常的な開発確認環境としても重宝します。
詳しい説明は割愛しますが、Edge Code上から、接続しているモバイルデバイスのリロード、フルスクリーンモードの切り替え、スクリーンショットの撮影管理が可能です。
d. Extension Managerの起動
Edge Code用のプラグインとしてBrackets用のものがそのままインストール可能です。BracketsのプラグインはGithubに公開されており、Extension ManagerにgithubのURLを貼り付け、インストールボタンを押せばすぐに拡張機能が使用可能になります。UIが分かりやすく、削除も簡単にでき、管理のしやすさを意識して作られています。
コーディングを爆速化するショートカット
前項で簡単に触れましたが、Edge Codeで快適にコーディングするためにいくつか抑えておくととても便利で感動するショートカットがあります。そんなに多くはないので、試しに使ってみることをおすすめします。
HTML上でCSSを直接編集？ 「command+E」
Edge Codeの最大の魅力という表現をすると大げさかもしれませんが、私はこれを初めてみた時にとても感動しました。HTMLファイルを開き、スタイルを確認したいタグにカーソルを合わせて、command+Eを押すと、タグのすぐ下に対応するCSSが表示されます。複数にスタイルが分けられている場合は、該当のファイル一覧のナビゲーションと共にスタイルが表示されます。ここでの編集は直接ファイルへ反映されます。
関数宣言へジャンプ 「command+E」
CSS編集と同じように、JavaScriptの関数宣言もまったく同じショートカットで同じようにインライン編集が可能です。呼び出している関数名の上にカーソルを合わせ、command+Eを押すと定義元が真下に展開されます。もちろんビルトイン関数は表示されませんが、ソースの研究や、引き継いだソースコードの編集時に重宝します。
直接色編集 「command+E」
色を指定している箇所で、command+Eを押すと、真下にカラーピッカーが現れます。Adobe Kulerとも連動し、コードを書きながらモックを作るワークフローを想起させてくれます。
Adobe KulerはAdobeが提供するカラーパレットを共有するコミュニティサイトで、カラーパレットをストックしたりダウンロードして、いくつかのAdobeツールとも連携できるサービスです。
なお、プレビュー5の時点で日本語環境ではバグがあるため、うまく連動されていないようです。連動させる方法は下記で詳しく解説されています。
CSSのクイックドキュメント 「command+K」
CSSプロパティの上でcommand+Kを押すことで、WebPlatform.orgのドキュメントを見ることができます。
クイックオープン 「command+shift+O」
フォルダ内のファイルをインクリメンタルサーチで絞込みをしながら、クイックオープンできます。
ファイル内関数クイック検索 「command+T」
ファイル内の関数をインクリメンタルサーチで絞込みをしながら、定義へ移動できます。
その他のショートカット
| 機能 | ショートカット |
|---|---|
| 行の削除 | command+shift+D |
| 行の複製 | command+D |
| ファイル内検索 | command+F |
| フォルダ内検索 | command+shift+F |
| ファイル内文字列置換 | command+option+F |
| 行コメント切り替え | command+/ |
| ブロックコメント切り替え | command+option+/ |
| すべてのウィンドウを閉じる | command+shift+W |
| すべてのファイルを保存 | command+option+S |
| フォルダを開く | command+option+O |
| コードヒントを表示 | control+space |
その他の特徴
ブラウザ上で該当CSS箇所のハイライト
Edge Codeには、Google Chrome Developer Toolsにおける要素の検証に似た機能が備わっています。ライブプレビュー中にCSSファイルの定義にカーソルを合わせるとブラウザ内の該当箇所がハイライトされます。
Developer Tools上で編集した場合、最終的にファイルに反映する必要がありますが、Edge Codeではその手間が省け、かなりの開発効率向上につながります。
JavaScriptコードサポート
Edge CodeのJavaScriptコードサポートは、Tern projectをベースに作られています。Tern ProjectはオープンソースのJavaScriptコードサポートエンジンです。Edge CodeはRequireJSやjQueryの標準サポートやキャメルケースのサポートもサポートしています。
画像の直接プレビュー
地味に嬉しい機能が、画像パスを記述したコードの上にカーソルを合わせるだけでコード上に直接サムネールが表示される機能です。別のイメージが入っていないか分かりやすい上に、正しいパスが挿入されているかどうかを確認できるので、重宝する機能です。
相対パスのコードヒント
地味に嬉しいシリーズでもう一つ、相対パスの候補をコードヒントで出してくれる機能が便利です。CSSやJavaScriptで使うのと同じように、imgのソース指定やaタグのリンク指定などでcontrol+spaceを押すと、パスの一覧を候補で表示してくれます。
モバイルファースト開発の万能エディタ
Edge Codeの機能を駆け足で見てきましたが、いかがでしたでしょうか。軽量にリッチな機能を備えているため、さまざまな活用シーンが想定されます。何よりも気軽にモバイルサイト開発向けの環境が整うことはAdobeのエディタならではの優位性だと感じます。次回はEdge Codeをより便利に使うために入れておきたい拡張機能を紹介します。
