読者です 読者をやめる 読者になる 読者になる

エボログ

PC、スマホ、オーディオ、エアーガン、東方Project、Web制作等、趣味とか色々と。なんでもありな感じで。

【お知らせ】
当ブログは下記サイトに移転しました。
http://blog.evolutor.net/

最近、Adobe Edge Code CCを使い始めました

今まで、主なHTMLエディタはDreamweaverを使っていたのですが、1ヶ月程前のアップデート以降、文字を入力したりマウスをクリックする度にエディタ画面が点滅したり、ファイル管理からプロジェクトを切り替えると数十~数百個程度のファイル数のプロジェクトでも異常な程読み込みに時間が掛かったり、不具合だらけで使用に耐えない状態になったので、Adobe Edge Codeに切り替えてみました。
f:id:evolutor:20131003111625j:plain

Adobe Edge Code CCは、Adobe Creative Cloudで提供されている無償のエディタソフトです。
Adobe IDを持っていれば、Creative Cloud製品を購入していなくても無償でダウンロード出来ると思います。
ちなみに、WindowsとMacの両方に対応しています。

http://html.adobe.com/jp/edge/code/

で、使い始めて分かったのですが思いの外便利な機能満載です。
まだPreview版だと言うのに、全然実用に耐えうる機能を持ってます。

1.豊富なプラグイン

f:id:evolutor:20131003111735j:plain

Adobe Edge Code CCのプラグインは基本的にGit Hub上で提供されています。
「Edge Code プラグイン」とかで調べたら沢山出てきますね。
f:id:evolutor:20131003111853j:plain

種類も豊富なので、自分に合ったエディタにカスタマイズ可能です。

例えば、エディタの色とかですかね。
人によっては結構こだわりある人いますし。
f:id:evolutor:20131003111910j:plain

2.Adobe Edge Inspectとの連携

Adobe Edge Codeには、Adobe Edge Inspectというクロスブラウザー確認用のソフトウェアとの連携機能が含まれています。
Adobe Edge InspectはWindows/Macの各種ブラウザはもちろん、AndroidiOSアプリでも配布されているので、PC・スマホの互換チェックが可能です。

■スマホサイトのチェック方法

使い方もシンプルで、チェックしたいHTMLファイルを開いた状態で、右側のユーティリティボタンからAdobe Edge Inspectを選択、トグルをONにします。
f:id:evolutor:20131003112004j:plain

そしたら、自動でローカルネットワーク内に存在するデバイスを探します。
見つかったらデバイス側にパスコードが表示されるので、それを入力します。
f:id:evolutor:20131003112131p:plain

これでAdobe Edge CodeとAdobe Edge Inspectの連携は完了です。
後はブラウザチェックをするだけ。いちいちテストサーバーにアップして~みたいな事はしなくて良いです。

ただ、どうやら外部サーバーのファイルやDBを読み込むようなWebサイトだと正常に動作しないようです。
f:id:evolutor:20131003112141p:plain

■PCサイトのチェック方法

PCサイトは右側のユーティリティボタンから「Live Preview」を選択します。
そしたら、Adobe Edge Inspectの拡張機能がインストールされているブラウザが起動するので、ここで確認するだけです。
f:id:evolutor:20131003112159j:plain

ちなみに、PCとスマホサイトを同時にEdge Inspectで連携させている場合、PCサイトをリロードしたらスマホサイトもリロードされます。
ページ遷移も同じでです。

3.変数・関数のコードヒントが優秀

最近のエディタでは当たり前のように付いているコードヒント機能ですが、もちろんAdobe Edge Codeにも付いています。
エディタによってはコードヒントが凄く重かったりする事があるのですが。Adobe Edge Codeは非常に軽いです。
また、多少間違って入力してしまっても、それっぽい物がコードヒントに表示される仕様です。
f:id:evolutor:20131003112214j:plain

また、自作の変数や関数もコードヒントに表示されます。
f:id:evolutor:20131003112222j:plain


という訳で、Adobe Edge Codeを使ってみての感想でした。
個人的に一番大好きなエディタはCoda2なのですが、それに匹敵するのではないかと思っています。

とりあえず、今後の発展、正式リリースがすごく楽しみです。
ただ、Dreamweaverみたいに色んな機能をゴテゴテ付けた結果たかがエディタなのに糞重くなるという事は避けて欲しいですね・・・。