Adobe Edge Reflow と Inspect とりあえずどんなものか

スポンサーリンク

2013年2月15日、先週の金曜日、まえまえから紹介されていたAdobe Edge Reflowのプレビュー版がついにリリースされました。プレビュー版ね、プレビュー版。

Adobe Edge Reflow

Creative Cloudに新たに追加されたので、そこからゲットしましょう(もちろん無料アカウントでも可)。今回のプレビュー版では、Edge Inspectと連携する機能が新たに加わっていたので、とりあえずどんなものか試してみます。なかなかいいです、コレ。

Inspect と Reflow

ADC MEETUP 06 – CREATE THE WEB TOUR – 』のセッション6セッション5や(6はInspectでした)、この週末に公開されたAdobe ADC記事の『レスポンシブWebデザイン制作におけるEdge Reflowの可能性』などで、Reflowの概要は説明されていますので、まず読んでみてください。

Edge Reflowは、超簡単に言うと「レスポンシブWebデザインをビジュアル的に作れるよ」というような製品です。コードをガリガリ書かずに感覚的に「ブラウザの横幅がこのサイズだったら、こんなレイアウト、このサイズだったら、こう」みたいな事をツールを使ってやりたい人には好まれそうなもの。

ただし、現時点では、このプレビュー版、いじってみるとわかりますが、まだまだアイデアを製品にしたような感じ。書き出し機能もないし。。上記の記事にも書かれているように、可能性を秘めた生まれたばかりの製品だと思った方がいいですね。Creative Cloudは、こういう段階の製品もどんどん追加してくんですね。

Edge Inspectは、だいぶ前にリリースされているので、すでに使っているモバイルサイト開発者の方も多いと思いますが、パソコンのChromeブラウザで表示しているサイトを一気に複数のモバイル端末で表示させる事ができる便利なやつ。こちらは、まぁ、詳しく読むなら『Adobe Edge Inspect:様々なデバイスで手軽にブラウザーテスト』ですね。

Edge Inspectを軽く試すところからやってみます。

  1. 両方ともダウンロードしたら、Applicationフォルダにドラッグ&ドロップ。Inspectの方は、母艦となるパソコンにこれをインストールして起動し、その他にChromeのプラグインをインストール、また、各デバイスに各ストアから無料で入手できるモバイル用のアプリもインストールします。プラグインなどの入手先は、こちらに。

    Edge Reflow
    Edge Inspect

  2. まず最初にEdge Inspectだけ軽く試してみます。母艦となるマシンでInspectを起動、ChromeのプラグインでONにしておきます。そして、各モバイル(iOS/Android/Kindle)用のInspectアプリから、その母艦に接続(最初だけは表示されたキーを入れてとなります)すると、そのChromeで表示されいているページが各デバイスで表示されます。つまり、モバイルの表示を確かめるのに、URLを入力する必要がないのでとても便利、というわけです。

    Chromeのプラグイン

  3. パソコンでURLを叩くと一気に接続されているモバイルの表示が切り替わるので気持ちいいです。

    Inspectでモバイル表示を確認

    iPad、Nexus7、iPhone、Kindleをテストしている様子

  4. さらに気持ちいいのは、スクリーンショット収集機能。このカメラボタンを押すと、カシャカシャカシャという音がなり、一気にWifiを経由して母艦のマシンにスクリーンショットが集まってきます。その時点での状態を記録したテキストファイルまで保存しておいてくれます。

    スクリーンショット収集機能

  5. さて、今度は、Edge Reflow。この製品、機能的にもまだまだシンプルなので、体感的にも使い方はわかると思います。やや詳しく書かれているのは、先程紹介したAdobe ADC記事の『レスポンシブWebデザイン制作におけるEdge Reflowの可能性』。レスポンシブWebデザインについても説明されていますので必見。

    Edge Reflow

  6. 画面下のここをクリックすると構造がどうなってるか見る事ができます。Bodyの中にまず「Container」がある事がわかります。これの中にDivでボックスを次々に配置してる感じですね。このBox管理については、まだまだ独特ですが、これが将来的に最終書き出し機能がついたらどうなるのか、というところは見所かもです(当然書き出し機能はつくだろうと思うので)。今は基本的にレイアウトをプレビューするだけ、かな使えるのは。なので、今はモックアップ制作には使えます、と言われてるんだと思います。

    Reflowが作るレイアウトの構造

  7. 面白いのは、この「Orientation」。ここを長押しね。これはDefaultの状態(最初のCSS定義)をパソコン表示用にするか、モバイル表示用にするか、という向きですね。モバイルファーストだとか言われてきましたが、この製品が本気を出したら、どっち向きでもいける気がしてきます。僕は、PC表示用を先に作って、それをモバイル表示用のCSSで上書きしていく方が感覚的に作りやすいです。

    Orientation

  8. 最後に、Inspectとの連携。これはEdgeの仲間なだけはありますね。先述したInspectによるモバイル表示確認をこのReflow自体に組み込んじゃいました。Reflowで作っている状態をほぼリアルタイムに各デバイスで表示してくれます。気持ちよすぎです。これはやってみないとわからない!

    Inspectとの連携

  9. 画面右上にある、モバイルアイコンみたいなのがそうです。一見わかりにくいですが、今回のプレビュー版からの機能だと思います。今までのデモではなかったと思います。

    右上に小さなモバイルアイコンがある

「いくつものモバイル画面を見ながらリアルタイムに作る」、この環境が打ち合わせに持っていけるなら、クライアントさんとレイアウトを見ながら、あーだこーだリアルタイムにやれるかもですね。お試しを!

動くモックアップ制作