必要条件

この記事に必要な予備知識

HTML/CSS/JavaScriptに関する基礎知識

 

Adobe Edge Code

ユーザーレベル

すべて

原文 作成日: 2012/9/24
HTML, CSS, and JavaScript code editing with Edge Code

コーディングに使うツールと言えば、昔は、コーディング機能がほとんどゼロに近いテキストエディタか、様々な機能が一体化したIDEかの二択だけでした。最近では、まだその2つの選択肢はあるものの、3つ目の選択肢が注目され人気を集めています。それは、動作が軽く、しかもコードヒントやデバッグなど、IDEだけが持っていたような主要機能を実装しているコードエディタです。


Adobe Edge Codeは、アドビがリリースした新しいコードエディタで、まさにこの3つ目の選択肢のようなツールと言えます。もちろん、HTMLのコードヒント、HTML/CSS/JavaScriptのカラーリングといった機能があります。それだけでなく、開発初期段階ながらも、最近のコードエディタならお馴染みのLESSにも対応しています。さらに、HTML/CSS/JavaScriptをメインとしているデベロッパーや、コーディングをするデザイナーにとって役立つ、今までにない機能が多数あります。本記事では、Edge Codeの主な機能を取り上げ、いかに役に立つかを紹介します。

Edge CodeとBracketsの違い

皆さんの中には、Bracketsをご存知で、Edge CodeってBracketsみたいだと思った方もいるでしょう。お察しの通りです。Bracketsを知らない方に説明すると、Bracketsは、アドビが立ち上げたオープンソースのコードエディタで、アプリ自体がHTML/CSS/JavaScriptで構築されています。MITライセンスで配布されており、GitHub上で完全にオープンな形で開発されています。Edge Codeは、BracketsにAdobe Creative Cloudのツールやサービスと連携する拡張機能を組み込んだディストリビューション版です。主な違いと言えば、Bracketsは無料でオープンソースであるということです。それは、今後も変わりません。Edge Codeも、Creative Cloudメンバーであれば無料で使用できます。

クイック編集で素早くコーディング

他のコードエディタにはない、Edge Codeならではの機能の1つが「クイック編集」というコンセプトです。経験を積んだWebコーダーならご存知じの通り、Webサイトの1ページだけをコーディングするにしても、複数のファイルを用いることがあります。HTMLファイルに、通常は複数のCSSファイル、そして場合によっては複数のJavaScriptファイル。一般的なワークフローでは、ページのレイアウトや機能をちょっと変更するだけでも、これらのファイルを何度も行き来することになるでしょう。こうした状況は、非効率的であるだけでなく、混乱や不要なミスを起こしがちになります。

Edge Codeのクイック編集では、メインのHTMLファイルを離れることなく、インラインで他のファイルを編集することができます。現在、クイック編集が対応しているのはCSSとJavaScriptファイルだけですが、今後の他のタイプのファイルにも対応する予定です。実際に、クリック編集がどのようなものか見てみましょう。
これ以降サンプルとして、オンラインサービス「Initializr」で作成したシンプルなHTMLファイルを用います。Initializr.comでは、HTML5のスターターテンプレートをカスタマイズしながら作成できます。ここでは、ベースとして[Classic H5BP](H5BP=HTML5 Boilerplate)を選び、[HTML/CSS template]欄は[Mobile-first Responsive]、[H5BP Optional]欄のオプションは全てチェックを外して、カスタムテンプレートを生成しました。サンプルを用意していますが、皆さんご自身で作成したテンプレートを使っていただいても結構です。

Note:配布しているサンプルファイルでは、66行目のjQueryスクリプトの読み込み記述で「http://」を使用するように変更しています。なお、Edge Codeでは、ファイルを読み込む際にfile://プロトコルを使用しています。

Edge Codeを起動して、メニューの[File]→[Open Folder...]を選び、サンプルデータのフォルダを指定します。すると、左ペインにフォルダ内の構成がリストアップされるので、index.htmlを選びます。スクロールして、33行目にある<article>タグにカーソルを置きます。クイック編集を使うには、その状態で「Ctrl/Cmd+E」ショートカット、あるいは右クリックメニューから[Quick Edit]を選びます。すると、main.css内の<article>タグに関連した記述(239行目と333行目)が、インラインで表示されます。

インラインエディタの右側には、該当タグに関連した記述があるファイルがリストアップされ、内容を切り替えることができます。例えば、このサンプルではnormalize.cssの項目を選ぶと、normalize.css内の<article>タグに関連した記述に切り替わります。インラインエディタ上での編集内容は、すぐさまHTMLの表示結果に反映されます。なお、インラインエディタ右側のリストは、「Alt/Option+Up/Down」ショートカットで切り替えることもできます。

皆さんが大喜びする前に、現時点での制限・注意事項について説明しておきます。Bracketsはオープンソースとして開発が始まったばかりですし、現在リリースされているEdge Codeはプレビュー版です。まず1つ目として、クイック編集を表示した際、Edge Codeはプロジェクト内の“全て”のCSSファイル内を検索し、該当するHTMLタグに関連したCSSコードを検出します。つまり、HTMLファイルにリンクしているCSSファイルのみをターゲットとした検索ではありません。そのため、HTMLファイルにリンクされていないCSSファイルからも、同一のセレクタ名があれば、誤って検出してしまうことがあります。2つ目は、Edge Codeでは、カスケードやタグのコンテキストが考慮されません。そのため、あるべきものを検出できないこともありえます。こうした問題はあるものの、クイック編集によって、作業効率がかなり改善されることでしょう。今後の開発において、クイック編集のサポートや性能を拡張していきますので、ご期待ください。

もう1つクイック編集の素晴らしい特徴として、クイック編集で編集した内容はすぐにライブプレビューに反映されます。次は、ライブプレビューについて説明しましょう。

ライブプレビューで編集内容を確認

一般的なWebデザイン・開発のワークフローの場合、エディタでHTML/CSS/JavaScriptのコードを編集し、ブラウザーに切り替えて、ページを再読み込みして編集結果をテストするといった作業を行います。この一連の作業をワークフローの中で一度だけ行うのであれば、些細なこととして済ませばいいのですが、実際には何度も繰り返し行い、一日の就業時間内で何百回も行うこともあります。Edge Codeには、この苦痛を軽減してくれる「ライブプレビュー」という機能があります。この機能を使えば、ブラウザーにプロジェクトを表示し、ファイルを編集する度に自動で再読み込みして表示します。

実際にライブプレビューがどのような機能なのか、先程のindex.htmlを使って作業しながら説明しましょう。ライブプレビューをオンにするには、Edge Code画面の右上にある雷アイコンをクリックします。

ライブプレビューが動作するのは、今のところChromeのみです。Chromeがインストールされていない環境でライブプレビューを実行すると、警告が表示されます。なお、Chromeがインストールされた環境で初めてライブプレビューを実行する際、リモートデバッグを有効にするために、Chromeの再起動を促すメッセージが表示されます。準備が整ったところで、ライブプレビュー機能を使ってみましょう。

  1. index.htmlの17行目「<div class="header-container">」にカーソルを置きます。
  2. 「Ctrl/Cmd+E」ショートカットでクイック編集を開き、「Alt/Option+Down」ショートカットでmain.cssの85行目のCSSを表示させます。
  3. 背景色を明るくしてみましょう。backgroundプロパティの値を「#f16529」から「#E69424」に変更します。
  4. すると、ファイルを保存しなくても、ブラウザーの表示結果が変更されます。

まあ、上記のカラー変更でサンプルのデザインが改善されたとは言えませんが(私はデザインがあまり得意ではないのです)、編集・確認の作業は大幅に改善されているのではないでしょうか。プレビュー版では、クイック編集と同様に、ライブプレビューにおいても制限・注意事項があります。1つ目は、対応しているのはCSSファイルのみです。HTMLやJavaScriptの編集内容は反映されません。2つ目は、ライブプレビューで一度に確認できるのは、1つのHTMLファイルのみです。複数のHTMLファイルを変更する場合は、最初にChromeで表示しているHTMLファイルを閉じてから、次のHTMLファイルを表示させることになります。最後に、Edge Codeでは、ブラウザーでファイルを開く際にfile://プロトコルを使用しています。いくつかのブラウザーは、この仕様に対応していません。今後の開発において、ライブプレビューの性能を改善していきますので、ご期待ください。

Adobe Edge Web Fonts拡張機能

前述した通り、Edge Codeには、Creative Cloudのツールやサービスと連携するための拡張機能があらかじめ組み込まれています。その1つが、Edge Web Fonts向けの拡張機能です。Edge Web Fontsは、TypeKitとGoogle Web Fontsにある無料かつオープンソースのフォントを提供しており、言わば、無料・高品質Webフォントの総合サービスです。

main.cssを開いて、91行目にあるclass属性「title」のスタイル定義にfont-familyプロパティを追加しましょう。「font-family:」と入力して、さらに半角スペースを開けると、図4のようにコードヒントが表示されます。

「Browse Web Fonts」をクリックすると、Edge Web Fontsサービスで利用可能なフォントの一覧が表示されます。左側のメニューでフォントのスタイルカテゴリーを選び、一覧からフォントを選択して、[Done]ボタンをクリックします。すると、選択したフォントの名前が、font-familyプロパティの値として入力されます。

ここでは「Amathysta」フォントを選びました。「title」のスタイル定義は、以下のようになります。

.title {     color: white;     font-family: amethysta; }

フォントの追加が終わったら、Edge Code画面の右上にあるEdge Web Fontsのロゴをクリックします(雷アイコンの横です)。すると、scriptタグの埋め込みコードが表示されたウィンドウが開きます。これをindex.htmlのheadタグ内にコピペします。ブラウザーで表示させると、「h1.title」部分がAmethystaフォント(別なフォントを選んだ場合は、そのフォント)に変更されています。

カスタム拡張機能を作り、Edge Codeを拡張できる

Edge Codeはまだ開発初期段階ですが、拡張性を持っています。皆さん自身でカスタム機能を開発して追加することができます。さらに、Edge CodeはオープンソースプロジェクトであるBracketsをベースにしているので、既にそのコミュニティで開発された多くの拡張機能を利用することができます。

それでは試しに、PhoneGap Buildとの連携用にアドビが作成した、無料の拡張機能をEdge Codeにインストールしてみましょう。PhoneGap Buildとは、HTML/CSS/JavaScriptを使って、iOSやAndroidなどの様々なモバイルプラットフォーム向けにネイティブアプリを開発できるサービスです。この拡張機能をインストールすれば、Edge Codeが、PhoneGap Buildでのモバイルアプリ開発における、理想的なツールになるのです。PhoneGap Buildの詳細については、Raymond Camdenの記事「PhoneGap Build levels up」をご覧ください。

  1. brackets-phonegapページからZIPファイルをダウンロードして解凍します。
  2. Edge Codeで、メニューから[Help]→[Show Extensions Folder]を選び、開いたextensionsフォルダー内のuserディレクトリを選択します。
  3. 解凍した拡張機能のZIPをファイルを、userディレクトリにコピーして、Edge Codeを再起動します。

この拡張機能を利用するには、build.phonegap.comで無料のPhoneGap Buildアカウントを作成してください。この拡張機能を初めて利用する際は、まずPhoneGap Buildアカウントでログインする必要があります。いったんログインすれば、Edge Code画面の下に、作成したPhoneGap Buildプロジェクトがリストアップされるようになります。なお、Edge CodeのプロジェクトフォルダとPhoneGap Buildプロジェクトとをリンクさせることができます。

いったんリンクが設定されると、Edge Codeから直接PhoneGap Buildへファイルを送信できるようになり、PhoneGap Buildでのプロジェクトの再構築や、全てのOS用のネイティブインストーラーの再作成が可能となります。この拡張機能の素晴らしい機能の1つが、PhoneGap Buildで構築したアプリをデバイスにインストールする際に必要となるQRコードに直接アクセスできることです。PhoneGap Buildのサイトにわざわざ行く必要はありません。

自分でも拡張機能を作成したいという方は、「How to write extensions · adobe/brackets Wiki · GitHub」をご覧ください。

おわりに

この記事を通して、Edge Codeプレビュー版の概要や、Edge Codeの今後の展開が掴めたと思います。Edge Codeには他のコードエディタには無い機能がたくさんあり、これまでのコーディングワークフローを刷新し、生産性を向上させることができます。定期的にアップデートしていきますので、楽しみにしてください。

また、Bracketsプロジェクトに貢献したいという方は、GitHubの「Adobe GitHub repository for Brackets」からプロジェクトをフォークしてください。Bracketsが、HTML/CSS/JavaScriptを使ってどのように開発されているのかが分かります。Bracketsの開発にEdge Codeを使うこともできます。Bracketsのアーキテクチャに興味ある方は、David Deraedtの記事「An Overview of Brackets Code Architecture」をご覧ください。