Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

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

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

目次

Adobe Edge Codeの基本操作

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

 本稿では、各UIの役割やコーディングを高速化するために便利なショートカットなどを紹介していきます。また、解説はMacベースで行います。Windowsの方は適宜commandCtrlに、optionAltに読み替えてご覧ください。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の起動がボタンとして用意されています。それぞれ先進的な機能を備えたボタンで、ショートカットも用意されていますが、直感的に扱えるようにボタンエリアが設けられているようです。機能の詳細を見ていきます。


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

著者プロフィール

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

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

バックナンバー

連載:Adobe Developer Connection

もっと読む

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