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が分かりやすく、削除も簡単にでき、管理のしやすさを意識して作られています。
