1. Adobe Edge Animateを活用した
HTML5+CSS対応サイト作成
株式会社システムフレンド
西村誠

2. 自己紹介
株式会社システムフレンド勤務
WTMにはWindows PhoneやWindowsストアア
プリ、EC-CUBEの内容で登壇
なんとなくマイクロソフト系の人という認識のは
ず・・・

3. 自己紹介
でも、忘れていませんか？

4. 自己紹介
でも、忘れていませんか？
私の広島デビューは
Adobe Flash(AIR)だったことを！！

5. Flex User Group 全国ツアーin広島
http://atnd.org/events/4688

6. 自己紹介
Adobe Flash好きです。
プログラマー向けのFlash作成ツールFlexが好
きです。
最近は仕事が無いですが・・・

7. 自己紹介
あっ、広島来た時から太ってたんだと
思ったあなた！！
途中(やや)やせていた時もあったんです
よ！！
証拠画像なし

8. Adobe Flash不遇
とにかくFlashが好きなんです！！
でも、Flash開発の機会が減ってしまった
(一部分野ではいまだに健在)

9. Adobe Flash不遇
・モバイルに搭載するにはパワフルすぎた
・タッチ対応が遅れた
・Appleが・・・iPhoneが、iPadが・・・

10. Adobe Flash不遇
ただしFlashの衰退はAdobeの衰退ではない
AdobeはCreative Cloudのように開発ツールを
売る会社
HTML5がはやればそれを開発するツールを出
せばいいじゃないか！！

11. Edge Animateの登場
AdobeがFlashのようなタイムラインでHTML5を
編集できるツールを発表しました。
それがEdge Animateです。

12. Edge Animateの登場

13. Edge Animateの登場
AdobeがFlashのようなタイムラインでHTML5を
編集できるツールを発表しました。
それがEdge Animateです。

14. Edge Animateの特徴
・JavaScriptコードレスでアニメーションが作成
できる。
(ただしイベントのトリガーなどはJavaScriptで)
・Flashに似ているので直感的に操作できる

15. Edge Animateの特徴
・JavaScriptコードレスでアニメーションが作成
できる。
(ただしイベントのトリガーなどはJavaScriptで)
・Flashに似ているので直感的に操作できる
・もちろんスマフォでも見れる！！
(IEは・・・後述・・・)

16. Edge Animate
ローディングの作成
コンテンツを先読みしている間は
ローディングを表示することが可能。
コンテンツを読み込まない間にアニメーション
を始めると中途半端な表示になる

17. Edge Animate
ローディングの作成

18. Edge Animate
リソースの管理

19. Edge Animate
画面のプレビュー

20. Edge Animate
アニメーションの作成

21. IE8
Adobe Edgeに限らずHTML5対応で問題なるの
がIE8以前のブラウザ。
最近はIE6は対応から外せることも多くなりまし
たが、IE8は・・・
その場合Edge AnimateだとGoogle Chrome
Frameのインストールを促すことができる

22. IE8

23. IE8
ただし正常に表示できるIE9でもGoogle
Chrome Frameのインストールを促してしまうの
で、修正したほうが良い。

24. 下位ステージ
わかりづらいけど、
HTML5+CSS3対応していないバラウザで
静的なページを表示する設定

25. JavaScript
通常のJS＋Edgeで用意されたAPI
Adobe Edge Animate CC
JavaScript API 2.0
http://www.adobe.com/devnet-docs/ja_JP/edgeanimate/api/current/index.html

26. JavaScript
実はコメントが大事
//Edge symbol: 'stage'
(function(symbolName) {
})("stage");
//Edge symbol end:'stage‘
コメントがないとエラーになることがあるので注意
Edge上のエディタで編集すると問題ないけど、テキストエディタなど
で編集するとやらかす

27. Windowsストアアプリにも
Windows 8のストアアプリはHTML+JSでも開発可能。
Edgeで作成したアニメーションも簡単に移植可能
[参考]Adobe Edge Animate入門 番外編1 ストアアプリに移植する
http://coelacanth.heteml.jp/blog/adobe-edge-
animate%E5%85%A5%E9%96%80%E7%95%AA%E5%A4%96%E7%B7%A81-
%E3%82%B9%E3%83%88%E3%82%A2%E3%82%A2%E3%83%97%E3%83%A
A%E3%81%AB%E7%A7%BB%E6%A4%8D%E3%81%99%E3%82%8B/

28. 実際の使いどころ
PCブラウザで表示する想定だと、
IE問題が要検討
スマフォの利用はあり
なにより簡単にモックが作れる

29. 実際の使いどころ
某県のPRサイト案件
最初Adobe Edgeで作成したがIE8問題発生!!
Edge版はモックとして、jQueryでゴリゴリ書き直
し
問題は出たがEdge Animateの素早いモック作
成は後半の作りこみに役立った

30. 実際の使いどころ
自分のブログのヘッダー
このくらいなら簡単に作れる！！

31. 実際の使いどころ
このようにページの一部に埋め込む場合は
元来のBoｄｙタグの中身を埋め込みたい場所
にコピーして、
JSや画像、CSSを適切な場所に配置する

32. 実際の使いどころ
スマフォ案件
スマフォ案件のWebViewで読み込みは
問題なく稼働！！
やはりスマフォと相性が良いかも？

33. その他Edgeツール

34. その他Edgeツール
Edge Reflow(Preview)
レスポンシブな
サイト作成

35. その他Edgeツール
Edge Code(Preview)
コーディングツール
DWとの違いは？

36. その他Edgeツール
Edge Inspect
Webブラウザと
連動してスマフォ
などの表示を確認
これ便利！！

37. その他Edgeツール
Edge Web Fonts
Webフォントを
埋め込み
ただし
日本語フォントは・・・

38. その他Edgeツール
PhoneGap Build
なんかクラウド
かっこいいｗ

39. まとめ
Adobe Edge AnimateはHTML5の開発シーンに
役立つツールになるはず！！
IE問題など課題はあるけど、
HTML5+CSS3に興味がある方は是非触ってみ
てください！！
私が紹介できるのは入口だけです。
使いこなしたらぜひ教えてくださいｗ

40. 宣伝？
広島ではこの後も勉強会、セミナー、いろいろ
あります！！

41. 宣伝？
オープンソースカンファレンス広島
時間：10月6日(日) 10時から17時
場所：サテライトキャンパス広島 ５F
オープンソースのお祭り
なぜかWindows Phone ハンズオンで参加！！

42. 宣伝？
ヒーロー島秋の収穫祭
時間：10月12日(土) 10時から18時30分
場所：マイクロソフト 中国支店セミナールーム
マイクロソフトのテクノロジーの祭典
北陸のMVP主婦来場

43. 宣伝？
第一回 ECサイト構築勉強会
時間：11月30日(土) 時間は午後から
場所：サテライトキャンパス広島
ECサイトを構築する、もしくは興味がある
開発者のための勉強会
仕事に結びつくコミュニティ創りをテーマに！！

44. 御清聴ありがとうございました