Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

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

目次

その他の特徴

ブラウザ上で該当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をより便利に使うために入れておきたい拡張機能を紹介します。



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

著者プロフィール

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

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

バックナンバー

連載:Adobe Developer Connection

もっと読む

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