HTML／CSS／JavaScript コーディングツール「Adobe Edge Code Preview」を使ってみました

Adobe Edge Code Preview とは？

Adobe Edge Code Preview は、Adobe が提供している HTML／CSS／JavaScript のコーディングツールです。 HTML5 と JavaScript で作られているオープンソースコーディングツール「Brakets」がベースとなっています。 軽快な動作がウリのツールです。

Adobe Edge Code Preview のインストール

Adobe Edge Code Preview は Creative Cloud ユーザーであれば無料でダウンロードすることができます。 Creative Cloud 自体も Creative Cloud スタータープラン (無料) がありますので、どなたでもインストールが可能です。 以下のサイトで無料登録できます。

https://creative.adobe.com/join/starter

登録が完了するとアプリケーション一覧から Adobe Edge Code Preview がダウンロードできます。あとは普通にインストールして完了です。

Adobe Edge Code Preview を使ってみる

ファイルの閲覧と編集

起動すると、下図の画面が表示されます。

左側にはファイル一覧が表示され、デフォルトで「Getting Started」というフォルダとサンプルの HTML、CSS ファイルが開かれています。まずは index.html をクリックしてみます。

ファイルのソースコードが表示されますが、これはまだ閲覧モードで開いている状態です。表示されているソースコードを直接編集するか、ファイル名をダブルクリックすることで編集モードになり、対象のファイルがファイル一覧の一番上の編集中ファイルリストに追加されます。

ライブプレビュー機能

ライブプレビューは、ソースコードの編集内容をブラウザ上でリアルタイムに反映してくれる機能です。現在は CSS のみ機能します(ブラウザ上では対象の CSS が適用されている HTML を表示します)。また Google Chrome のみで動作します。 実際に使ってみましょう。まず編集したい CSS が適用されている HTML ファイルを開いた状態にし、右上の Live Preview アイコンをクリックします。

すると、ブラウザの新しいタブに先ほど編集していた HTML ファイルが表示されると思います(Chromeの再起動が必要な場合はダイアログが表示され、再起動できます)。この状態で CSS ファイルを開き、編集すると保存しなくてもリアルタイムに反映されます！

Edge Web Font 連携

Edge Web Font は無料のWebフォントライブラリツールです。500以上の無料フォントが提供されています(現在は英文フォントのみ)。Adobe Edge Code は Edge Web Font との連携機能を持っているので、 Edge Web Font で提供されているフォントを簡単に組み込むことができます。 Edge Web Font を使うには、CSSファイルに font-family プロパティのコードヒントとして表示されるリストの一番下にある「Browse Web Fonts...」を選択します。

下図のような Edge Web Font の一覧画面が表示されるので、好きなフォントを選択して Done をクリックします。

先ほどの font-family に対象のフォント名が入力されます。これで CSS に指定することができました。 あとは HTML に script タグを書かなければいけませんが、右上のアイコンをクリックするとコードを表示してくれます。

あとはこのコードを適用している HTML に書き足して終わりです。

実際にブラウザで表示してみると、 Web Font に置き換わっていることが確認できます。

JSLint

JSLint は構文をチェックしてくれるツールです。ファイル保存時に自動でチェックしてくれるように設定することができます。 チェックを有効にするには、メニューから 「View ＞ Enable JSLint」 を選択します。

この状態で誤った構文が入っている状態で保存すると、エラーがある場合、どの構文が誤っているかメッセージを表示してくれます。

まとめ

Adobe Edge Code Preview を使ってみてまず感じたのが、とても軽快に動作するという点です。まだ機能が少ないという理由もあるとは思いますが、この良さは今後バージョンアップしても活かして欲しいところですね。シンプルなインターフェースもとても好感が持てました。 またライブプレビュー機能は開発効率をかなり高めてくれそうな可能性を感じました。現在は CSS のみですが、 HTML や JS もライブプレビューが使えるととても便利ですね。他の Adobe 製品との連携など、更なる機能が充実すれば HTML コンテンツ制作にかなり便利なツールになると思います。これからのバージョンアップに期待したいですね。

リンク

• Adobe Edge Code Web