Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

「Adobe Edge Code CC」徹底入門(2)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2013/09/09 14:00

目次

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


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 又村 洋史(マタムラ ヒロフミ)

    株式会社イノーヴ WEBクリエイター。キャンペーンサイト・コーポレートサイト・ECサイトを中心に手がける。 土日はWEBの学校クスールで非常勤講師としてJavaScriptなどを教えています。日々学ぶことばかり。個人ブログ「Deconcepter」ではWEBに関わる人が押さえておきたい情報の...

バックナンバー

連載:Adobe Developer Connection

もっと読む

おすすめ記事

All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5