Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

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

目次

コーディングを爆速化するショートカット

 前項で簡単に触れましたが、Edge Codeで快適にコーディングするためにいくつか抑えておくととても便利で感動するショートカットがあります。そんなに多くはないので、試しに使ってみることをおすすめします。

HTML上でCSSを直接編集? 「command+E」

 Edge Codeの最大の魅力という表現をすると大げさかもしれませんが、私はこれを初めてみた時にとても感動しました。HTMLファイルを開き、スタイルを確認したいタグにカーソルを合わせて、command+Eを押すと、タグのすぐ下に対応するCSSが表示されます。複数にスタイルが分けられている場合は、該当のファイル一覧のナビゲーションと共にスタイルが表示されます。ここでの編集は直接ファイルへ反映されます。

関数宣言へジャンプ 「command+E」

 CSS編集と同じように、JavaScriptの関数宣言もまったく同じショートカットで同じようにインライン編集が可能です。呼び出している関数名の上にカーソルを合わせ、command+Eを押すと定義元が真下に展開されます。もちろんビルトイン関数は表示されませんが、ソースの研究や、引き継いだソースコードの編集時に重宝します。

直接色編集 「command+E」

 色を指定している箇所で、command+Eを押すと、真下にカラーピッカーが現れます。Adobe Kulerとも連動し、コードを書きながらモックを作るワークフローを想起させてくれます。

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

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

著者プロフィール

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

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

バックナンバー

連載:Adobe Developer Connection

もっと読む

おすすめ記事

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