最近、Adobe Edge Code CCを使い始めました
記事作成日:2013年10月3日
今まで、主なHTMLエディタはDreamweaverを使っていたのですが、1ヶ月程前のアップデート以降、文字を入力したりマウスをクリックする度にエディタ画面が点滅したり、ファイル管理からプロジェクトを切り替えると数十~数百個程度のファイル数のプロジェクトでも異常な程読み込みに時間が掛かったり、不具合だらけで使用に耐えない状態になったので、Adobe Edge Codeに切り替えてみました。
Adobe Edge Code CCは、Adobe Creative Cloudで提供されている無償のエディタソフトです。
Adobe IDを持っていれば、Creative Cloud製品を購入していなくても無償でダウンロード出来ると思います。
ちなみに、WindowsとMacの両方に対応しています。
http://html.adobe.com/jp/edge/code/
で、使い始めて分かったのですが思いの外便利な機能満載です。
まだPreview版だと言うのに、全然実用に耐えうる機能を持ってます。
1.豊富なプラグイン
Adobe Edge Code CCのプラグインは基本的にGit Hub上で提供されています。
「Edge Code プラグイン」とかで調べたら沢山出てきますね。
種類も豊富なので、自分に合ったエディタにカスタマイズ可能です。
例えば、エディタの色とかですかね。
人によっては結構こだわりある人いますし。
2.Adobe Edge Inspectとの連携
Adobe Edge Codeには、Adobe Edge Inspectというクロスブラウザー確認用のソフトウェアとの連携機能が含まれています。
Adobe Edge InspectはWindows/Macの各種ブラウザはもちろん、AndroidやiOSアプリでも配布されているので、PC・スマホの互換チェックが可能です。
■スマホサイトのチェック方法
使い方もシンプルで、チェックしたいHTMLファイルを開いた状態で、右側のユーティリティボタンからAdobe Edge Inspectを選択、トグルをONにします。
そしたら、自動でローカルネットワーク内に存在するデバイスを探します。
見つかったらデバイス側にパスコードが表示されるので、それを入力します。
これでAdobe Edge CodeとAdobe Edge Inspectの連携は完了です。
後はブラウザチェックをするだけ。いちいちテストサーバーにアップして~みたいな事はしなくて良いです。
ただ、どうやら外部サーバーのファイルやDBを読み込むようなWebサイトだと正常に動作しないようです。
3.変数・関数のコードヒントが優秀
最近のエディタでは当たり前のように付いているコードヒント機能ですが、もちろんAdobe Edge Codeにも付いています。
エディタによってはコードヒントが凄く重かったりする事があるのですが。Adobe Edge Codeは非常に軽いです。
また、多少間違って入力してしまっても、それっぽい物がコードヒントに表示される仕様です。
また、自作の変数や関数もコードヒントに表示されます。
という訳で、Adobe Edge Codeを使ってみての感想でした。
個人的に一番大好きなエディタはCoda2なのですが、それに匹敵するのではないかと思っています。
とりあえず、今後の発展、正式リリースがすごく楽しみです。
ただ、Dreamweaverみたいに色んな機能をゴテゴテ付けた結果たかがエディタなのに糞重くなるという事は避けて欲しいですね・・・。