Edge Reflowの最近のブログ記事

Edge Reflow のプレビュー 7 が公開されました。

とりあえず起動すると、お試し用のプロジェクトが表示されます。Reflow の基本的な使い方が分かるようにデザインされたページで、初めての人がそのままいろんな機能を試せるようになっています。

お試しプロジェクトが自動的に表示されるのは、初回起動時のみです。後で表示させたくなったときは、Help メニューから "Open Welcome Project" を選択します。

Reflow は、Tab キーを押すと、プレビューモードに切り替えられるので、サンプルの動作確認、編集してその結果を確認、などが手軽にできます。Reflow 取っ付きにくいよーと感じていた方も、今回は楽しめるかもしれません。

また、今回はレイアウトエンジンが刷新されたこと、ボタン等のフォーム要素が扱えるようになるなど、プロトタイプツールとしても使えそうな変更が行われました。少し製品の位置付けが変わってきた印象です。

Brackets に新しい拡張機能 Reflow Cleaner が公開されました。Reflow Cleaner は、Reflow で制作したデザインから、クリーンな HTML と CSS を生成する (ことを目的として開発された) 拡張機能です。

Reflow は、作業中のデザインをブラウザで表示確認するために HTML コードを生成します。しかし、生成されるコードの構造は、Reflow からの扱い易さを優先したもので、残念ながら、そのまま開発に利用するには適したものではありません。

Reflow はデザインツールである、という点からは、この仕様は理解できなくもないものですが、とはいえ、せっかく HTML ベースのデザインツールを使うのだから、その出力をコーディングに活かせないのかという期待も、Reflow が登場した頃からずっと聞かれてきた声でした。そこで、コーディング環境である Brackets の拡張機能として、Reflow が生成するコードを元に、開発に適した HTML や CSS を生成する機能が追加された、というのが背景のようです。

Edge Reflow のプレビュー版がアップデートされました。同じく本日アップデートされた Photoshop CC と連携して、Photshop のデザインカンプを直接 Reflow のデザインアセットとに変換できます。

従来から提供されている CSS 属性を生成する機能とは完全に次元が異なり、デザインカンプから "自動的に HTML が生成され" て、しかも配置情報の一部は "相対値に変換" されていたりします。Web デザイナーにとっては全く新しい体験だと思いますので、是非お試しください。

インストールの際は、まず Photshop CC を更新して、その後 Reflow の更新を行います。これは、Reflow のインストール時に Photshop のプラグインがインストールされるためです。後からプラグインをインストールする場合は、以下から別途ダウンロードできます。

Reflow の前のバージョンをを既にインストールしてある環境でも、Creative Cloud アプリは、更新ではなく新規インストールとして扱います。これは既知のバグだそうです。

Edge Reflow のプレビュー 4 が公開されました。新機能は以下の通りです。

  • 複数ページのサポート
  • ドラッグ操作による値の変更
  • 右クリックからのメニュー表示
  • Cmd/Ctrl キーによる、描画/選択モードの切り替え
  • プロジェクト保存時の HTML 生成
  • Undo 機能の拡張
  • Tab キーを押すとプレビューモードに移行

新機能の使い方を紹介したビデオが公開されています。説明は英語ですが参考になると思いますので、とりあえず。

先日の ADC OnAir でもご紹介したばかりの Edge Reflow の新しいプレビュー版が公開されました。

最初のバージョンからは、レイアウト機能の強化と、スタイル関連の拡張、また、使い勝手の改善やパフォーマンスの向上も実現されています。Adobe ID をお持ちの方は Creative Cloud から無償でダウンロードできます。

すでにプレビュー版をインストールしている場合は、起動すると画面の右にプレゼントのアイコンが表示されます。クリックするとアップデートの情報が表示されます。

以下、今回の更新個所を具体的にご紹介します。

2 月 20 日に放送が開始された ADC OnAir シーズン 2 の第 1 回のテーマは、レスポンシブデザインのワークフローと、 Edge Reflow でした。企画中に検討されたものの、時間の都合上、番組内には収められなかった話題をいくつかご紹介します。

まだ、見てないという人はこちらからご覧になれます。 (シーズン2 第1回『レスポンシブデザインのワークフロー徹底討論!』

レスポンシブデザインの Web サイト制作ワークフロー

何を繰り返すのか?という話

Edge Reflow は、レスポンシブ Web デザインのために開発が始められた新しいツールです。昨年のイベントで紹介されたので、ご存知の方も多いと思います。

この Edge Reflow のプレビュー版が Creative Cloud に公開されました。

これまで、デバイスと PC に対応するサイトをデザインしようと思った時は、ブラウザで直接確認しながら行う方法か、既存のデザインツールを使う、という選択だったかと思いますが、ブラウザで確認するためにはコードを扱う必要が出てきますし、既存のデザインツールは 「ステージサイズは固定」 という前提で作られています。

もしかして新しいアプローチが求められているのでは ? ということで設計されたのが、Edge Reflow ということです。

Edge Reflow の位置づけを知るのに参考になりそうなので、FAQ からの他のツールとの比較に関する文章の抜粋をご紹介します。Fireworks と Dreamweaver との比較の箇所です。

2014年1月

Sun Mon Tue Wed Thu Fri Sat
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
レンタルサーバー

月別 アーカイブ

Powered by Movable Type 4.261