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