“超”軽量なコードエディター「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の無償メンバーがダウンロードできるうちに使ってみてほしい」と結んだ。
