ABC 2013 Springで発表したAdobe Edgeツールの紹介資料です。

1. モバイルコンテンツ制作を効
率化するツールを使いこなせ
- Adobe Edge ツール & サービス -
ABC Spring 2013

2. Who?
- 轟 啓介（とどろき けいすけ）
- アドビのデベロッパーマーケティング
- 担当はFlashからHTML5まで多岐
- 前職は開発者
- Java/J2EE（7年）、AS3/Flex/AIR（2年）
- HTML/JS/PHPなどは必要な範囲で
@keisuke322
- USTREAM番組「ADC OnAir」MC
【緩募】都内で流しソー
- http://onair.adobe-adc.jp/ メンを食べられる店情報
を夏までにください。

3. Modern Web Needs
Modern Tools
HTML5とその関連技術で制作する「Modern Web」、
それに対して必要なものは「Modern Tools」である

4. Adobe Edge ツール & サービス
洗練された最先端のWebサイトを構築できる新しいツール&サービス
Edge Animate 1.0 Edge Reflow Edge Code Edge Inspect 1.0
sneak preview preview
Edge Web Fonts Typekit PhoneGap Build
Sep 26, 2012 - Debut

5. Adobe Edge ツール & サービス
洗練された最先端のWebサイトを構築できる新しいツール&サービス
Edge Animate 1.5 Edge Reflow Edge Code Edge Inspect 1.2
preview preview 3
Edge Web Fonts Typekit PhoneGap Build
Feb 15, 2013 - Updated!

6. E W
! Edge Reflow プレビュー版公開中
N
レスポンシブWebデザイン専用ツール

7. レスポンシブWebデザイン
(RWD)
1つのHTMLで様々な
画面サイズのデバイスに対応

8. RWDのコスト
依頼者
PCもスマホも1ソースでコスト削減
制作者
制作難易度はUP / 安易な見積もりは危険

9. 従来ワークフローのリスク
ADC OnAir Season 2 / 第1回「レスポンシブWebデザイン徹底討論」より
http://onair.adobe-adc.jp

10. RWDのリスク
単に画面サイズが異なる話ではない
デバイスによって利用シーンが異なる
情報の優先度が異なる
情報設計の重要性が非常に高い

11. 早めのプロトタイプで回避
ここからEdge Reflow
投入！
ADC OnAir Season 2 / 第1回「レスポンシブWebデザイン徹底討論」より
http://onair.adobe-adc.jp

12. レスポンシブWebデザインを
もっと自由に、簡単に。

13. Edge Reflow - 3つの特徴
- ブレークポイント設定
- ブラウザ幅に応じたレイアウトを定義
- ブラウザ幅別の「動く」デザインカンプを同時に作成
- CSSスタイル設定
- 様々なCSS3表現をコーディングなしで設定
- メディアクエリーで定義されたCSSも書き出し
- 強力なプレビュー機能
- PCブラウザだけでなく、Edge Inspect連携でスマホ、タ
ブレット上で、リアルタイムにデザインを確認

14. Phone Tablet PC

15. Phone Tablet PC
header header header
article article article article article article
1 1 2 1 2 3
footer
article3
article3
footer
footer

16. Edge Inspect
モバイルサイトのリモート検証ツール

17. Edge Inspect - 3つの特徴
- リモートで画面遷移
- 母艦PCの画面遷移が接続されたデバイス上でも追従
- リモートで Web インスペクト
- 母艦PCからデバイス上のHTML画面に対して、Webイン
スペクトが可能（Developer Tools）
- リモートでスクリーンショット
- 母艦PCからボタン一発で全デバイスのHTML画面のスク
リーンショットを撮影し、母艦PCに保存

18. 入門ガイド
1. 接続デバイスが同じネットワーク
上にあることを確認
- 自動検出するには同サブネットに
- IPアドレス指定による手動接続可
2. デバイスをPCのChromeに接続
A.自動検出
B. 手動接続
3. デバイス上でページのデバッグ
- PCのChrome操作で画面遷移、イン
スペクション、画面ショット

19. Edge Code プレビュー版公開中
まったく新しい超軽量コードエディター

20. Edge Code - 2つの特徴
- クイック編集
- Cmd + E (Mac) / Ctrl + E (Win)
- カーソルのあるHTMLタグのCSSやJSのプロパティ、メ
ソッドの定義をファイル切り替えせずにダイレクトに表
示
- ライブプレビュー
- Chromeブラウザと連携して、CSSの変更を保存する前
にライブプレビュー

21. A
T ED
!
New Features, Feb 15
PD
U ‣ preview 3 (2013/2/15)
- エディター機能強化
- エディターコアのCodeMirror ver. 3によるエ
ディター機能の強化
- CSS コード補完強化、定義検索
- ネイティブ メニュー
‣ preview 2 (2012/12/13)
- クイック編集にカラーピッカー追加
- Edge Web Fonts サポート
- プロジェクト設定
- WebサーバーURL指定でサーバーサイドコン
テンツにも対応

22. Brackets
- オープンソースのコードエディター
- Edge Codeはアドビ ディストリビューション
- http://brackets.io
- Feature Backlog : http://bit.ly/BracketsBacklog
Brackets Adobe Edge Code
+ PhoneGap Build
+ Edge Web Fonts

23. Edge Animate 正式版無償提供中
直感的なHTML5アニメーション制作ツール

24. Edge Animate - 3つの特徴
- タイムライン操作によるアニメーション設定
- プロパティ単位のキーフレーム編集 / イージング機能 /
ピンツール etc
- JavaScript スニペット
- JSが苦手な人でも基本的なスクリプトを一発挿入
- HTML5非対応ブラウザーのフォールバック設定
- 代替画像設定、chrome Frame プロンプト設定にも対応

25. 様々な用途
アニメーションバナー 既存サイトへの アニメーション /
（スマホでも動作） アニメーション追加 ゲームコンテンツ
押井守監督「ちまみれマイ・らぶ」
Comic Animation
電子出版コンテンツ

26. レスポンシブに
px %
異なる画面サイズに対応させるために、コン
テンツをリキッドにすることも検討する

27. レスポンシブに
Edge Animate Sample リキッドレイアウト
TRY http://html.adobe.com/edge/animate/showcase/catch/catch.html
DOWNLOAD http://download.macromedia.com/pub/developer/edge-animate/
showcase-examples/EA_Sample_catch.zip

28. A
T ED
!
New Features, Feb 15
PD
U - グラデーションサポート
- CSSの線形/円形グラデーション
- Edge Web Fonts サポート
- タイポグラフィ導入を簡単に提供
* 現時点では英文fontのみ
- CSS Filter サポート
- 反転、色相循環、コントラスト、
彩度、セピア、グレースケール…
* 現時点ではChrome, Safari, iOS 6, BlackBerry 10のみ

29. HTML5 アニメーション
DOM Canvas CSS
アニメーション アニメーション アニメーション
+
Edge Animate CreateJS Flash Professional CreateJS Dreamweaver

30. PhoneGap Build
モバイルアプリのパッケージサービス

31. 無償ビルドの機能制限
無償ビルドは Creative Cloud の無償メンバーシップから入手
リリースビルド 機能制限
Edge Animate 1.5 なし
HTML5アニメーションツール
Animate 1.x は完全無償提供
Edge Code preview 3 なし
HTML / CSS / JS コードエディタ
Edge Inspect 同時接続
モバイルサイトのリモート検証
1.2 デバイス1台
Edge Reflow preview なし
レスポンシブWebデザインツール
* 2013年2月15日現在

32. 無償サービスの機能制限
サービス 機能制限
Edge Web Fonts 正式 なし
無償のWebフォントサービス
現在は英文フォントのみ
PhoneGap Build privateアプリ1つ
クラウドでモバイルアプリを作成
正式 publicアプリ無制限
* 2013年2月15日現在

33. Dreamweaver & Edge Tools
統合制作環境 統合制作環境と専用ツールは役割
が異なる。
これらを自由に組み合わせて最適
なワークフローを構築する事を提
案。
Dreamweaver
web workflow
Edge Animate Edge Reflow Edge Code PhoneGap Build Edge Inspect
専用ツール

34. Web情報番組「ADC OnAir」
3.19 TUE. 20:30 ONAIR
Vol. 03
HTML5とEdgeツールが開く
コンテンツ制作の可能性
http://onair.adobe-adc.jp

35. Adobe & HTML
アドビのWebに対する取り組みや
Edge ツール & サービスの最新情報を掲載。
http://html.adobe.com/jp

36. ADC
Adobe Developer Connection
Web技術ポータルサイト。著名クリエイター/開発
者による技術記事を定期的に掲載。
http://www.adobe.com/jp/devnet/

37. HTML5 特設サイト
HTML5関連のサンプルが入手できるサイト。
http://adobe-html5.jp

38. 本日のツール
Edge Edge
Reflow Inspect
レスポンシブWebデザイン モバイルサイトのリモート
専用ツール 検証ツール
Edge Edge
Code Animate
まったく新しい超軽量の 直感的なHTML5アニメーシ
コードエディター ョン制作ツール