目次

作成日

19 February 2013

この記事で使用されるアドビ製品：

Adobe Edge Animate, Adobe Edge Code, Adobe Edge Reflow

2013年2月14日から15日にかけて、「デブサミ」の愛称ですでにお馴染みとなった総合ITカンファレンス「Developer Summit」が今年も開催された。技術者コミュニティと連携して2003年にスタートし、今年で11回目を迎えた同カンファレンス。本記事では2日目に行われたアドビシステムズ株式会社の轟啓介氏によるセッションの様子をレポートする。なお、当日使われたセッションスライドはこちらで公開されている。

セッションのテーマは、無償で使えるアドビの新しいWeb制作ツールの紹介。アドビのWeb製作ツールと言えばAdobe Dreamweaverや2012年秋に発表されたAdobe Edgeツール&サービスだが、轟氏のセッションではその中から同日に新バージョンがリリースされたばかりの「Edge Animate」と「Edge Code」、そして「Edge Reflow」の3つのツールが紹介された。

最先端のWeb技術に対応した最先端のツール群

轟氏はまず近年のHTML5の流行について言及し、「表現力が高く、いろいろな新しいことができそうだという期待がある。その一方で、ビジネスで使う上では厳しそうな一面というものも明らかになってきた」と指摘した。特に問題になるのが生産性だ。技術的にいかに優れていたとしても、アウトプットできるものがコストに見合わなければ、業務用途で採用するのは難しい。

そこで必要になるのが優れたツールによるサポートである。ツールベンダーであるアドビは、これまでもDreamweaverをはじめとしてWeb製作をサポートする様々なツールを提供してきた。しかしHTML5に代表されるように、Webの世界の進化のスピードは極めて速い。そこで同社では、「Modern Web Needs Modern Tools」というメッセージを添えて2012年9月に「Adobe Edgeツール&サービス」を発表した。

Edgeツール&サービスは、HTML5/CSS3をはじめとする最先端のWeb技術を用いてWebサイトやWebアプリを構築することができる新しいツールおよびサービス群であり、Creative Cloudのメンバー向けに追加料金なしで提供されている。正式版の一部と、プレビュー版については無償メンバーでも利用することができる。現在、Edgeツール&サービスには以下のツール/サービスが含まれている。

  • Edge Animate - HTML/CSS/JavaScriptによるアニメーションやインタラクティブコンテンツの作成ツール
  • Edge Reflow - レスポンシブWebデザインをサポートするWebデザインツール
  • Edge Code - HTML/CSS/JavaScriptのコーディングに特化したコードエディタ
  • Edge Inspect - 複数のモバイルデバイス上のWebデザインを同時に確認できるプレビューツール
  • Edge Web Fonts - 膨大な数のオープンソースWebフォントにアクセスできる無料のWebフォントサービス
  • Typekit - 商用フォントをWeb経由で利用できるフォントサービス
  • PhoneGap Build - Web標準技術で作成したモバイルアプリを作成し、クラウド上でビルドしてパッケージ化できるアプリ開発プラットフォーム

この日、上記のツール群のうち「Edge Animate」、「Edge Code」、「Edge Reflow」に関するアップデートが発表されている。轟氏のセッションでは、この3ツールについてデモを交えた紹介が行われた。

さらに表現力が向上した「Edge Animate 1.5」

Edge Animateは、HTML5/CSS3/JavaScriptベースのインタラクティブなコンテンツを作成することができるツールである。Edgeツール&サービスの発表時点から正式版であるバージョン1.0がリリースされたが、今回はその次期バージョンとしてEdge Animate 1.5がリリースされた。

轟氏は、Edge Animateに搭載されているWeb制作者の作業効率を大幅に向上させるための主な機能として、次の3つの機能をデモを交えながら紹介した。

  • タイムライン操作によるアニメーション設定
    • プロパティ単位のキーフレーム編集やイージング機能、ピンツールなどを備える
    • Flash ProfessionalやAfter Effectに似た馴染みのある操作性
  • JavaScriptスニペット
    • JavaScriptを知らなくても、基本的なスクリプトはスニペットから選択するだけで簡単に挿入できる
  • HTML5非対応ブラウザのフォールバック設定
    • HTML5に対応していないブラウザ用に代替画像の設定が可能
    • Google Chrome Frameプロンプト設定にも対応している

アップデートされたEdge Animate 1.5では、さらに次のような新機能が追加されているという。

  • CSSグラデーションのサポート
    • CSSによる線形/円形のグラデーションを簡単に作成することができるようになった。
  • Edge Web Fontsのサポート
    • フォントパネルにEdge Web Fontsとの連携機能が統合され、Animateプロジェクトへのタイポグラフィに導入を容易に行えるようになった（ただし、現時点ではEdge Web Fontsでは提供されているのは英文フォントのみで、日本語フォントには対応していない）。
  • CSS Filterのサポート
    • CSS Filterによるフィルター効果を設定できるようになった。CSS FilterはCSSのみでフィルター効果を表現できる規格で、反転や色相循環、コントラスト、彩度調整、セピア化、グレースケール化などがサポートされている。

上記に加えて、轟氏は既存のWebサイトのソースコードを読み込んで、Edge Animateでアニメーション効果を追加するというデモを披露した。ここで注目したいのが、アニメーション追加後に出力されるソースコードである。Edge Animateでは既存のHTMLのコードへの修正を最小限に抑えるよう配慮されているため、編集後もソースコードの可読性を損なうことはないとのことだ。

なお、Edge Animateは「バージョン1.x」の段階では機能制限なしで完全無償提供することが発表されている。

エディタ機能が大幅に強化された「Edge Code preview 3」

続いて轟氏は、ソースコードエディタ「Edge Code」について紹介した。今回、Edge Codeは3つ目のプレビュー版である「Edge Code preview 3」がリリースされた。Edge Codeの最大の特長は、HTML/CSS/JavaScriptのコーディング向けに特化して設計されているという点である。そのため余分な機能は省き、極めて軽量に動作するように作られている。轟氏からはEdge Codeの特徴的な2つの機能が紹介された。、

1つ目は「クイック編集」機能だ。これはHTMLコードの編集中に、関連するCSSやJavaScriptのコードをインライン編集することができる機能。エディタ上でショートカットキー（Windowsは[Ctrl]+[E]、Mac OSは[Cmd]+[E]）を入力すると、カーソルのあるHTMLタグに設定されてCSSやJavaScriptのプロパティ、メソッドなどの定義をインラインで表示し、編集することができる。ファイルを切り替える必要も無ければ、膨大なコードの中から該当箇所を探し出す手間も必要もない。

2つ目は「ライブプレビュー」機能。Webブラウザ（Google Chrome）と連携して、CSSの変更をリアルタイムにブラウザ上で確認することができる。ブラウザ上でページをリロードする必要がないだけでなく、CSSファイルを保存する必要すらもなく、本当にリアルタイムに変更が反映されるという点が興味深い。

轟氏によれば、今回リリースされたpreview 3では、次のような機能強化が行われているという。

  • 「CodeMirror Ver.3」 によるエディタ機能の強化
  • CSSコード補完機能および定義検索の強化
  • ネイティブメニューの追加

また、前身となったpreview 2は2012年12月13日にリリースされており、そのときには次のような機能が追加されているとのことだ。

  • クイック編集機能へのカラーピッカー（色選択パネル）の追加
  • Edge Web Fontsのサポート
  • プロジェクト設定によるWebサーバ指定

Edge Codeはそれ自身がHTML/CSS/JavaScriptで作られており、拡張機能のためのインタフェースも用意されているため、JavaScriptを知っているプログラマーであれば独自に拡張することもできるようになっている。ADCでは5月以降にEdge Codeをテーマにしたハッカソンも開催する予定だという。

また、轟氏はEdge Codeがオープンソース「Brackets」をベースとして作成されていることも紹介。Bracketsの最新のコードはGitHubリポジトリ上で公開されているので、最新機能をいち早く試したい場合などにはこちらを利用するのがお勧めとのこと。BracketsはEdge Code正式リリース後にも無償で利用できる。

レスポンシブWebデザインをサポートする「Edge Reflow preview 1」

この日リリースされた3つ目のツールが、レスポンシブWebデザインの実現をサポートする「Edge Reflow preview 1」である。Edge Reflowについてはこれまではsneak previewが公開されているのみだったので、一般ユーザ向けにはこれが初のプレビュー版となる。レスポンシブWebデザインとは、ユーザが使用しているデバイスの画面サイズや解像度ごとに最適なレイアウトを自動で選択して描画する仕組み。技術的には、CSSのメディアクエリーを利用し、画面サイズや解像度に応じて適用するCSS定義を切り替えることにより実現する。

スマートフォンやタブレットをはじめとする様々なサイズのデバイスが普及した現在では、レスポンシブWebデザインはマルチスクリーン対応のための極めて重要な技術であると言える。しかしながら、これを実現するためには3つの壁が存在すると轟氏は指摘する。

1つ目は「情報デザインの壁」。同じサイトを見る場合でも、閲覧するデバイスが異なれば、見たい情報の優先度や重要度が変わることもあるため、コンテンツの量や配置もデバイスごとに最適化を検討しなければならない。

2つ目は「レイアウトデザインの壁」。レスポンシブWebデザインによるWebサイトの構築では、クライアントとの意思疎通をスムーズにするために、モバイルデバイスでの見た目も含めたデザインの提案が重要になる。しかし短い提案期間でCSSデザインの具体的なイメージを共有するのは容易ではない。

3つ目は「イテレーションの壁」。レイアウトデザインの壁に関連するが、デバイスに応じた最適なデザインを実現するためには、手戻りも考慮したアジャイル的なやり方が必要になることがある。しかしながら、現実にはレイアウト変更の再実装は容易ではなく、限られた製作期間では実現が難しい。

そこで、この3つの壁を乗り越え、もっとに自由にレスポンシブWebデザインを実現する目的で作られた専用のツーつがEdge Reflowだという。具体的には、次のような機能が用意されているとのこと。

  • ブレークポイント設定
    • ブレークポイントを定め、それを基準にしてブラウザ幅に合わせたコンテンツレイアウトを定義できる
    • 実際に動作する異なるスクリーン幅のデザインカンプを同時に作成可能
  • CSSスタイル設定
    • 様々なCSS3の設定に対応
    • メディアクエリーで定義されたCSSも書き出しできる
  • 強力なプレビュー機能
    • PCブラウザだけでなく、Edge Inspect連携を利用してスマートフォンやタブレット上でも アルタイムにデザインを確認できる

Edge Reflowはグリッドベースのデザインパネルを持っており、コンテンツをグリッドに合わせて配置し、グリッド幅に応じてCSS定義を切り替えるためのブレークポイントを定めることでレスポンシブWebデザインを実現する。轟氏は、実際にEdge ReflowでWebページをデザインするデモを披露した他、現在公開中のAdobe MAX 2013の日本語サイトがEdge Reflowを用いてデザインされていることも紹介した。したがって、同サイトにアクセスすれば、Edge ReflowでレスポンシブWebデザインがどのように実現されているのかを確認することができる。

なお、Edge Reflowに関してはこちらの記事でも詳しく紹介 されているので、本レポートと合わせて参照していただきたい。

最後に轟氏は、Dreamweaverと今回紹介したEdgeツール&サービスの関係について触れた。同氏によれば、DreamweaverがWeb製作のための様々な機能を集めた統合製作環境であるのに対して、Edgeツール&サービスで提供されるツールやサービスはそれぞれが特定の目的に特化した専用ツールという位置づけになっているという。したがって両者の目的は決して競合するようなものではなく、自由に組み合わせることで現場のニーズに合わせた最適なワークフローを構築して欲しいとのことだ。