デベロッパーマーケティングスペシャリスト 轟啓介氏（撮影：峯雄一氏）
HTML5の可能性が期待される一方で、生産性はクリアすべき課題の一つだ。CSSフリーでの開発やJavaScriptを使用したアニメーションの作成、さまざまなデバイスごとに動的に変化するWebデザインなど、Webサイトの制作には続々と新しい手法やアプローチが登場している。高いクリエイティビティを期待される中で生産性を両立させることは、クリエイターにとって不可避な課題と言えるだろう。
そうした制作現場に対し、アドビが提案する「モダンなWebのためのモダンなツール」が「Adobe Edge Tools & Services」である。2012年9月の発表時には一部のみのリリースだったが、2013年2月15日にはプレビュー版も含めてほぼすべてがダウンロードできるようになった。
高度なアニメーション作成ツール「Adobe Edge Animate」
まず、轟氏がセミナータイトルどおり“無料”で使えるものとして勧めるのが、2月15日にVer1.5になった「Adobe Edge Animate」だ。主にHTML5で、リッチなアニメーションコンテンツを作るためのツールであり、タイムライン操作で緻密な設定が行える。JavaScriptも使えるが、基本的なスクリプトが挿入できるため、いわゆる「ゴリゴリ」に書かなくても十分使えるという。
実際の活用場面として、はじめに紹介されたのは、iOSやAndroidなどのスマートフォンにおける「アニメーションバナー」だ。また、HTMLを読み込んで加工できるので、既存サイトにもアニメーションが容易に追加できるという。轟氏は実際に会場でアニメーションバナーを作成し、CSSのグラデーション機能やEdge Web Fontsの利用、タイムライン操作の簡便性に加え、非対応ブラウザのアラート機能などを披露した。
轟氏は「画像を使わなくてもここまでの表現ができる。アドビはDOM、Canvas、CSSのいずれのアニメーションにも対応しており、用途や環境に応じて動画作成の選択肢が増えたと考えてもらえば」と語る。そして事例として、押井守監督作品のiPad 向け電子出版「ちまみれマイ・らぶ」が紹介された。なお、メイキングやインタビューがアドビのギャラリーサイトに掲載されているので、関心のある人は閲覧するとよいだろう。
“超”軽量なコードエディター「Adobe Edge Code」
次に紹介された「Adobe Edge Code」は、“超”軽量なコードエディターであり、大きな特徴が2つあるという。まず1つ目は轟氏が「魔法のコマンド」と呼ぶ「クイック編集」だ。通常、Webサイトの一部を修正するだけでも、CSSやJavaScriptなどの複数のファイルを行き来する必要が生じることがある。それでは手間がかかるだけでなく、ミスも頻発しやすいという問題があった。「Adobe Edge Code」では、当該の場所にカーソルを置いてCommand＋E（Mac）またはCtrl＋E（Win）のコマンドを実行すると、カーソル行の下から新たな画面が出現し、すべてのファイルから関連部分がリストになって表示される。そのまま関連部分を直接編集してもよいし、さらに関連部分が記載されている各ファイルにジャンプして、同コマンドを実行することも可能だ。CSSのカラー設定ではカラーピッカーを出現させて編集することもできる。該当する場所をまとめて修正ができるので、煩雑さが緩和されるというわけだ。また、コードヒント機能ではHTMLタグやCSSプロパティだけでなく、無償のWebフォントサービス、Adobe Edge Web Fontsとの連携にも対応している。
そして、こうした修正時の生産性を上げるのが、もう一つの特徴である「ライブプレビュー」である。これまで修正箇所の確認はコードを毎回読み込んで行われていた。しかし、「Adobe Edge Code」はGoogle Chromeと連携することで、CSSの変更を保存せずともリアルタイムでブラウザに反映させ、確認ができるのだ。さらに2月15日のアップデートで、CSSプロパティとHTMLタグおよび属性を一気に絞り込み検索する「Go to Definition機能」が追加された。これも「取り散らかし」がちなコードを検索したり、整理したりする上で便利な機能といえるだろう。
コード編集の生産性を上げる「Adobe Edge Code」
さらに「Adobe Edge Code」はHTML、CSS、およびJavaScriptで作成されているため、自分で拡張機能を作ったり、コミュニティで配布された拡張機能を取り込んだりすることもできる。拡張方法についてはアドビのデベロッパーコネクションに掲載されており、5月にはハッカソンも企画されているという。
なお「Adobe Edge Code」は、完全無料のオープンソースプロジェクト「Brackets」がベースになったディストリビューション版だが、現在のところ、Creative Cloudの無償メンバーでも使用できるため、こちらも早めにダウンロードしておきたい。
レスポンシブWebデザインのためのツール「Adobe Edge Reflow」
最後に紹介された「Adobe Edge Reflow」は、1つのHTMLファイルをスマートフォンやPCなど異なる画面サイズに応じて調整する「レスポンシブWeb」を意識して開発されたツールだ。
その背景について、轟氏は「端末の多様化や予算削減の中で注目されている手法ではあるものの、現場では情報デザインの壁はもちろんのこと、クライアントとの折衝で苦慮している様子が伺える。苦労して作成したCSSを何度もやり直しするのは辛いもの。できるだけ早い段階でイメージを共有できることが重要となる」と説明する。つまり「Adobe Edge Reflow」は、レイアウトやビジュアルデザインを簡単に作成でき、実機でも作動する”動くカンプ”を手軽につくることができる。それによって、デスマーチから開発者を解放するというわけだ。
「動くカンプ」としてクライアント等との共有を促進。
「Adobe Edge Reflow」は、CSSでのレイアウト、段組み作りが手軽にできる「CSSグリッドシステム」を採用しており、直感的に画面の表示サイズが変更できる。また、機能としては大変シンプルなつくりとなっている。複雑な画像の作成はPhotoshopなどに委ねて連携することを想定し、レイアウト＆デザインのみに特化させたというわけだ。
そうして作成した画面は、サイズを変更することで簡単に見え方を確認することができる。また作成画面上だけでなく、Edge Inspectと連携してPCブラウザはもちろん、スマートフォンやタブレットなど実機でリアルタイムにデザインを確認することも可能だ。この際、メディアクエリーで定義されたCSSが書きだされているので、それをもとに調整すれば制作時間を短縮することも可能だという。
他にも「Adobe Edge Tools & Services」のさまざまな無償サービスの状況が紹介された。その充実ぶりに対して「Dreamweaver」のユーザーの懸念の声が上がりそうだが、轟氏は「統合制作環境と専用ツールの違いは大きく、比べる意味はない。ワークフローをうまく回すためにもツールを使い分けてほしい」と説明し、「ぜひ、Creative Cloudの無償メンバーがダウンロードできるうちに使ってみてほしい」と結んだ。
