「Adobe Edge Code」の基本操作と、コーディングを爆速化する厳選ショートカット

「Adobe Edge Code CC」徹底入門（2）

　本記事は、Edge Code CC Previewの内容をもとに執筆したものです。今後の開発において、機能や操作方法が変更となることがあります。Edge CodeはAdobe Creative Cloudから入手でき、無償メンバーでも利用できます。前回の導入に続いて、今回はAdobe Edge Code（以下、Edge Code）基本操作について網羅していきたいと思います。

Adobe Edge Codeの基本操作

　Edge CodeのUIは直感的に使えるようシンプルに削ぎ落とされており、洗練された印象を与えます。ファイル間の移動を極力感じない操作感は、軽量エディタのイメージを変えてくれるでしょう。

　本稿では、各UIの役割やコーディングを高速化するために便利なショートカットなどを紹介していきます。また、解説はMacベースで行います。Windowsの方は適宜commandをCtrlに、optionをAltに読み替えてご覧ください。controlとされているところはWindowsでもそのままCtrlとなります。

Edge Codeの各UIの役割

　Edge CodeのUIは上図のように4つのエリアで構成されています。各部の名称が定まっているわけではありませんが、本稿では下記のように定義させていただきます。

1. Working Files（作業中ファイルのナビゲータ）
2. ファイルナビゲータ
3. コードエリア
4. ユーティリティボタン

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の起動がボタンとして用意されています。それぞれ先進的な機能を備えたボタンで、ショートカットも用意されていますが、直感的に扱えるようにボタンエリアが設けられているようです。機能の詳細を見ていきます。