SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Adobe Developer Connection(AD)

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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の起動がボタンとして用意されています。それぞれ先進的な機能を備えたボタンで、ショートカットも用意されていますが、直感的に扱えるようにボタンエリアが設けられているようです。機能の詳細を見ていきます。

次のページ

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Adobe Developer Connection連載記事一覧

もっと読む

この記事の著者

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

株式会社イノーヴWEBクリエイター。キャンペーンサイト・コーポレートサイト・ECサイトを中心に手がける。 土日はWEBの学校クスールで非常勤講師としてJavaScriptなどを教えています。日々学ぶことばかり。...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7370 2013/09/27 10:36

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング