Page 1
Adobe Edge Animateを活用したHTML5+CSS対応サイト作成
株式会社システムフレンド
西村誠
Page 2
自己紹介
株式会社システムフレンド勤務
WTMにはWindows PhoneやWindowsストアアプリ、EC-CUBEの内容で登壇
なんとなくマイクロソフト系の人という認識のはず・・・
Page 4
自己紹介
でも、忘れていませんか?
私の広島デビューは
Adobe Flash(AIR)だったことを!!
Page 5
Flex User Group 全国ツアーin広島
http://atnd.org/events/4688
Page 6
自己紹介
Adobe Flash好きです。
プログラマー向けのFlash作成ツールFlexが好きです。
最近は仕事が無いですが・・・
Page 7
自己紹介
あっ、広島来た時から太ってたんだと
思ったあなた!!
途中(やや)やせていた時もあったんですよ!!
証拠画像なし
Page 8
Adobe Flash不遇
とにかくFlashが好きなんです!!
でも、Flash開発の機会が減ってしまった
(一部分野ではいまだに健在)
Page 9
Adobe Flash不遇
・モバイルに搭載するにはパワフルすぎた
・タッチ対応が遅れた
・Appleが・・・iPhoneが、iPadが・・・
Page 10
Adobe Flash不遇
ただしFlashの衰退はAdobeの衰退ではない
AdobeはCreative Cloudのように開発ツールを売る会社
HTML5がはやればそれを開発するツールを出せばいいじゃないか!!
Page 11
Edge Animateの登場
AdobeがFlashのようなタイムラインでHTML5を編集できるツールを発表しました。
それがEdge Animateです。
Page 13
Edge Animateの登場
AdobeがFlashのようなタイムラインでHTML5を編集できるツールを発表しました。
それがEdge Animateです。
Page 14
Edge Animateの特徴
・JavaScriptコードレスでアニメーションが作成できる。
(ただしイベントのトリガーなどはJavaScriptで)
・Flashに似ているので直感的に操作できる
Page 15
Edge Animateの特徴
・JavaScriptコードレスでアニメーションが作成できる。
(ただしイベントのトリガーなどはJavaScriptで)
・Flashに似ているので直感的に操作できる
・もちろんスマフォでも見れる!!
(IEは・・・後述・・・)
Page 16
Edge Animate
ローディングの作成
コンテンツを先読みしている間は
ローディングを表示することが可能。
コンテンツを読み込まない間にアニメーションを始めると中途半端な表示になる
Page 17
Edge Animate
ローディングの作成
Page 18
Edge Animate
リソースの管理
Page 19
Edge Animate
画面のプレビュー
Page 20
Edge Animate
アニメーションの作成
Page 21
IE8
Adobe Edgeに限らずHTML5対応で問題なるのがIE8以前のブラウザ。
最近はIE6は対応から外せることも多くなりましたが、IE8は・・・
その場合Edge AnimateだとGoogle Chrome Frameのインストールを促すことができる
Page 23
IE8
ただし正常に表示できるIE9でもGoogle Chrome Frameのインストールを促してしまうので、修正したほうが良い。
Page 24
下位ステージ
わかりづらいけど、
HTML5+CSS3対応していないバラウザで
静的なページを表示する設定
Page 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
Page 26
JavaScript
実はコメントが大事 //Edge symbol: 'stage'
(function(symbolName) { })("stage"); //Edge symbol end:'stage‘ コメントがないとエラーになることがあるので注意 Edge上のエディタで編集すると問題ないけど、テキストエディタなどで編集するとやらかす
Page 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%AA%E3%81%AB%E7%A7%BB%E6%A4%8D%E3%81%99%E3%82%8B/
Page 28
実際の使いどころ
PCブラウザで表示する想定だと、
IE問題が要検討
スマフォの利用はあり
なにより簡単にモックが作れる
Page 29
実際の使いどころ
某県のPRサイト案件
最初Adobe Edgeで作成したがIE8問題発生!!
Edge版はモックとして、jQueryでゴリゴリ書き直し
問題は出たがEdge Animateの素早いモック作成は後半の作りこみに役立った
Page 30
実際の使いどころ
自分のブログのヘッダー
このくらいなら簡単に作れる!!
Page 31
実際の使いどころ
このようにページの一部に埋め込む場合は
元来のBodyタグの中身を埋め込みたい場所にコピーして、
JSや画像、CSSを適切な場所に配置する
Page 32
実際の使いどころ
スマフォ案件
スマフォ案件のWebViewで読み込みは
問題なく稼働!!
やはりスマフォと相性が良いかも?
Page 34
その他Edgeツール
Edge Reflow(Preview)
レスポンシブな
サイト作成
Page 35
その他Edgeツール
Edge Code(Preview)
コーディングツール
DWとの違いは?
Page 36
その他Edgeツール
Edge Inspect
Webブラウザと
連動してスマフォ
などの表示を確認
これ便利!!
Page 37
その他Edgeツール
Edge Web Fonts
Webフォントを
埋め込み
ただし
日本語フォントは・・・
Page 38
その他Edgeツール
PhoneGap Build
なんかクラウド
かっこいいw
Page 39
まとめ
Adobe Edge AnimateはHTML5の開発シーンに役立つツールになるはず!!
IE問題など課題はあるけど、
HTML5+CSS3に興味がある方は是非触ってみてください!!
私が紹介できるのは入口だけです。
使いこなしたらぜひ教えてくださいw
Page 40
宣伝?
広島ではこの後も勉強会、セミナー、いろいろあります!!
Page 41
宣伝?
オープンソースカンファレンス広島
時間:10月6日(日) 10時から17時
場所:サテライトキャンパス広島 5F
オープンソースのお祭り
なぜかWindows Phone ハンズオンで参加!!
Page 42
宣伝?
ヒーロー島秋の収穫祭
時間:10月12日(土) 10時から18時30分
場所:マイクロソフト 中国支店セミナールーム
マイクロソフトのテクノロジーの祭典
北陸のMVP主婦来場
Page 43
宣伝?
第一回 ECサイト構築勉強会
時間:11月30日(土) 時間は午後から
場所:サテライトキャンパス広島
ECサイトを構築する、もしくは興味がある
開発者のための勉強会
仕事に結びつくコミュニティ創りをテーマに!!