Adobe「Edge Code」の使い方!インストールから基本操作、拡張機能の追加まで。

昨年の2月にAptana Studio3の記事を書いてから、1年ほどAptanaちゃんを使っていたのですが、ちょっと忙しくしている間に、他にも素敵な子たちがいるとかいないとか目にするようになり、ずっと気になっていました。
で、ようやく時間ができたので、まずはAdobeの「Edge Code」を試してみました。ということで、これから「Edge Code」を使ってみようと思っている人に向けに、インストールから基本操作、拡張機能の追加方法までを書いていきます。

ところで「Edge Code」って何?

Adobe Edge Tools & Services

Edge Codeとは、2012年9月にリリースされた「Adobe Edge Tools & Services」の中にある、HTML, CSS, JavaScriptのコードエディタです。現在のところ、プレビュー版として無料で配布されています。ちなみにプレビュー版とは、開発中のソフトウェアを一般に公開したもので、「ベータ版」とほぼ同じ意味になります。
対応OSはMacとWindows。言語はPreview 2から日本語対応されています。嬉しいですね。

特徴として、HTMLのコードヒント、HTML/CSS/JavaScriptのカラーリング機能があり、LESSにも対応しています。
また、Edge Codeの大きなウリである「クイック編集機能」「ライブプレビュー機能」「Edge Web Fontsとの連携」についての説明は、Adobe Developer Connectionの記事に、わかりやすーく書かれているので、ここでは割愛します。

【追記:2013.06.17】

この記事を書いた直後にリリースされたPreview 3は、日本語対応になっていないそうです。が、Edge Codeの元となっているオープンソースのBracketsは日本語対応されているそうなので、日本語が良ければそちらを試してみてください。

インストールしよう!

まずはインストールしましょう。「Adobe Edge Tools & Services」から「今すぐ開始」ボタンをクリックします。Creative Cloudに登録していない場合は、ガイダンスにしたがって登録を進めてください。

  1. ログインを済ませたら、ヘッダーのツールバーにある「アプリケーション」をクリック。
  2. ツール一覧の中から「Edge Code(Preview)」のダウンロードをクリック。
  3. ポップアップが表示されるので「OK」をクリック。
  4. ダウンロードが完了したらインストーラーを起動してインストール開始。
  5. 特別なアレとかはなく、終わったら「Finish」をクリック。

これでインストール完了です。

起動してみよう!

では、早速起動してみましょう。早いですね、快適です。
UIもシンプルで余計なものが一切ない感じ。ヴィジュアルも洗練されています。
日本語なので基本操作の説明はこれといって必要なさそうです。

Edge Code起動後のスクリーンショット

ご覧のとおり初期画面では、Edge Codeの入門ガイド的なHTMLファイルが表示されます。
まずは、このファイルをブラウザで表示させてみましょう。ツールバーの右端にある雷アイコンをクリックすると、ローカルのブラウザで下のようなページが表示されます。
このライブプレビュー機能が使えるブラウザは、現在Google Chromeのみですが、将来的に他のブラウザでもこの機能が使えるようにしたい、と書かれていますね。

Edge Code 初期ファイルをライブプレビュー

便利な拡張機能を追加しよう!

このままだとアレなんで、便利な拡張機能(エクステンション)を追加してみましょう。
Edge CodeはもともとオープンソースプロジェクトであるBracketsをベースにしているので、そのコミュニティで開発された多くの拡張機能を利用することができます。
Brackets Extensions

ここでは、とりあえず「Emmet/Zen Coding」の拡張を入れてみましょう。

  1. まずは「Emmet-Brackets-v1.0.zip」をダウンロードします。
  2. Edge Codeの「ヘルプ」>「拡張機能のフォルダを開く」をクリックします。
  3. 開いたフォルダの「User」フォルダ内にダウンロードしたzipファイルを展開して入れます。
  4. Edge Codeを再起動すると、ツールバーに「Emmet」が表示され、使えるようになります。
Edge CodeにEmmet/Zen-Codingの拡張を追加

と、他にも様々な拡張機能が用意されているので、こんな手順でお好みの拡張機能を追加してカスタマイズするといいでしょう。

個人的には、HTML Templatesなんかは中身をカスタマイズして使えそうだし、CanIUseも入れておくと便利かも。あとはAuto Formatterのようなコード整形の拡張は入れたいなーなんて思っています。

新しいプロジェクトを作成しよう!

Edge Code上で新しいプロジェクトを作成するには、ツールバーの「ファイル」>「フォルダを開く」>「新しいフォルダーの作成」をクリックして、任意の名前でフォルダを作成して「OK」をクリック。ここでは、「サンプルプロジェクト」という名前にしました。
すると、サイドバーに表示されていたデフォルトの「Geeting Started」というプロジェクトが閉じて、「サンプルプロジェクト」が表示されます。
ちなみに、プロジェクト名の右にある▼アイコンをクリックすると、プロジェクトの切り替えが可能です。

新しいプロジェクトを作成して開いたところ

あとは、Ctrl+Nでプロジェクトフォルダ内に新規ファイルを作成していけばOK!

ちょっと不便だなーと思った点など

エディタ上でファイルを削除できないっぽい。
せっかくサイドバーにプロジェクトファイルが表示されているので、ここからファイルを削除できると嬉しいですね。ちなみにファイル名の変更は可能です。

あとは、PHPファイルに対応していないので、WordPressのテーマづくりには不向きかも…。WordPress直下のindex.phpをライブプレビューすることは可能なものの、編集するPHPファイルを切り替える度にライブプレビューまで切り替わってしまいます。

他にも細かい点ではいろいろありますが、まだプレビュー版ですし、これからに期待ですね!

ということで、ざっくりとですがEdge Codeの使い方でした!
もっとこうしたら便利だよーなど、アドバイスがありましたらお教えください。

Pocket

  • 参考になります^^
    ちなみに私がダウンロードしたタイミングでは「Preview 3」になっており、何故か日本語表示じゃなくなってました…orz
    素直にAptanaを試してみたいと思います。

    • Nise Chさん、コメントありがとうございます!
      もう、Preview3になっちゃったんですね…(;´∀`)
      また時間があるときにでも確認してみますね!
      情報をありがとうございますー。

  • si-

    「フリーの高機能HTMLエディタ「Aptana Studio3」の日本語化と「Zen-Coding」のインストール方法。」をやってみたのですが、Zen-Coding・Emmet共に対応してなくて天を仰いで呆然としてます・・・。色々調べたのですがもうできなさそうです。何か良い方法がありましたら教えて下さい。失礼しました。

  • si-

    windows7でできましたw。linuxでやってたからダメだっただけでしたw

    • si-さん、コメントありがとうございます!
      お返事遅くなっちゃいましたが…、解決できたようで良かったです( ´∀`)

  • よしかた

    説明ありがとうございます。
    edge code の方だとファイル、編集、表示、ナビゲートなどが表示されているツールバー
    無くなっちゃってるんですが(´;ω;`)
    もし表示設定とかいじって表示されているのであれば教えてください(´;ω;`)
    Edge reflowいじくってるんでちょっと将来統合されることを期待してます(^ω^)

    • よしたかさん、コメントありがとうございます!
      Preview 2では、この記事のキャプチャーのようにデフォルトで上部の日本語メニューがあったのですが、新しいバージョンでは無くなっているようですね。。
      また今後のバージョンアップで対応されるといいですねー。
      ちなみに、Bracketsはデフォルトで日本語対応されていて、日本語のツールバーが表示されます。
      http://download.brackets.io/

      • よしかた

        返信ありがとうございます。
        Bracketsは前にも利用してたので、再度活用してみます(∩´∀`)∩
        edge reflowからのhtmlの書き出し方法もわかったので、それと併用してみます。
        ありがとうございました。

  • よしかた

    バージョンが一番新しいからかもしれませんが(;・∀・)

  • Pingback: コーディングを早くする「Edge Code CC」「Edge Inspect CC」「Muse CC」 | WEBに関するあれこれ解決!()

  • Pingback: コーディングを早くする「Edge Code CC」「Edge Inspect CC」「Muse CC」 | WEBに関するあれこれ解決!()