HTML5 Carnival Fukuokaで発表したアドビの Edge ツールの紹介です。基本的に現段階（2013/2/9）なら、結構な範囲でHTML5のWeb制作ツールを無償で使えます。 この機をお見逃しなく。

1. HTML5 の Web制作を
確実に楽にする最新の
アドビWeb制作ツール
- Adobe Edge ツール & サービス -
アドビ システムズ 株式会社
HTML5 Carnival Fukuoka

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. さて、HTML5。
仲良くやってますか？

4. HTML5の幻想
- 夢見がちなクライアントは、
- HTML5なら何でもできるんでしょ？
- あのサイトみたいにスマホでも見れるやつ、よろしく！
- とりあえず、HTML5！
- HTML5を理解している制作者は、
- 「何でも」って、そんな簡単に… 言うんじゃねー、この○○○
- レスポンシブですか。
1ソースですが手間が掛かるので予算を… もっと上乗せせんかい、この○○○
- 「とりあえず」って、ビールじゃないんだから… もはや逝ってよし

5. Modern Web Needs
Modern Tools

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

7. 本日の4つのツール
1. HTML5アニメーション
- コーディングが苦手でも大丈夫
2. HTML / CSS / JavaScript の生産性↑
- 一度使うと忘れられない魔法のツール
3. モバイルサイトの実機テスト
- 実機テストをお手軽に！
4. レスポンシブWebデザイン
- RWDをもっともっと簡単に！

8. Adobe Edge Animate
HTMLアニメーションツール

9. Adobe Edge Animate
HTMLアニメーションツール
• HTML5 / CSS3 / JavaScript によるインタラクティブコンテンツの制作ツール
• 主な用途
• スマホ環境でも閲覧可能なバナー作成
• 既存サイトへのアニメーション / インタラクション追加
• スマホ向け電子出版 / ゲームのコンテンツ作成
• 主な機能
• タイムライン操作によるアニメーション設定
• プロパティ単位のキーフレーム編集 / イージング機能 / ピンツール etc
• レスポンシブアニメーション
• HTML5非対応ブラウザーのフォールバック設定

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

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

12. Adobe Edge Code プレビュー版公開中
HTML / CSS / JavaScript コードエディター

13. Adobe Edge Code プレビュー版公開中
HTML / CSS / JavaScript コードエディター
•HTML/CSS/JavaScriptで作られた超軽量コードエディター
•Web制作者の作業効率を一気に上げる2つの機能
•クイック編集
•Cmd + E (Mac) / Ctrl + E (Win)
•カーソルのあるHTMLタグやJSのプロパティ、メソッド
の定義をファイル切り替えせずにダイレクトに表示
•ライブプレビュー
•Chromeブラウザと連携して、CSSの変更を保存する前
にライブプレビュー

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

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

16. Adobe Edge Inspect
モバイルサイトのリモート検証ツール
• スマホやタブレット向けのWebサイトを母艦PCからリモートで検証
する超便利ツール
• モバイルサイト検証者の作業効率を一気に上げる3つの機能
• リモートで画面遷移
• 母艦PCの画面遷移が接続されたデバイス上でも追従
• リモートで Web インスペクト
• 母艦PCからデバイス上のHTML画面に対して、Webインスペク
トが可能（Developer Tools）
• リモートでスクリーンショット
• 母艦PCからボタン一発で全デバイスのHTML画面のスクリーン
ショットを撮影し、母艦PCに保存

17. Adobe Edge Inspect
モバイルサイトのリモート検証ツール
• 必要なもの
• 母艦PC（Mac / Win）+ Chromeブラウザ
• 検証対象デバイス（iOS / Android）
• 上記にインストールするInspectアプリ
• 母艦PCとデバイスはパスコード（デバイス
にインストールしたInspectアプリが最初に
表示）を使ってコネクションを作る

18. Adobe Edge Reflow プレビュー版近日公開
レスポンシブWebデザイン専用ツール

19. 無償ビルドの機能制限
無償ビルドは Creative Cloud の無償メンバーシップから入手
リリースビルド 機能制限
Edge Animate 1.0 なし
HTML5アニメーションツール
Animate 1.x は完全無償提供
Edge Code preview 2 なし
HTML / CSS / JS コードエディタ
Edge Inspect 同時接続
モバイルサイトのリモート検証
1.1 デバイス1台
Edge Reflow preview 1
レスポンシブWebデザインツール 近日公開予定
なし
* 2013年2月9日時点の状況です

20. Adobe Edge Web Fonts いつでも無償
無料のWebフォントサービス

21. Adobe PhoneGap Build 無償 & 有償
モバイルアプリのパッケージサービス

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

23. Adobe Edge ツール & サービス
洗練された最先端のWebサイトを構築できる新しいツール&サービス
Edge Animate Edge Reflow Edge Code Edge Inspect
Edge Web Fonts Typekit PhoneGap Build

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

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

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

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

28. ADC OnAir
アドビのUSTREAM番組。FlashからHTML5まで。
http://onair.adclounge.jp

29. CREATE THE WEB TOUR
Edge AnimateからCode、PhoneGap、Inspectなど
紹介するイベント。全セッション録画公開中。
http://adobe.ly/adcmeetup06