Contenu connexe
Similaire à Adobe Creative SuiteではじまるHTML5の民主化 (20)
Adobe Creative SuiteではじまるHTML5の民主化
- 1. R社勉強会 | 2012.06.11
Adobe Creative SuiteではじまるHTML5の民主化
太田禎一 | アドビ システムズ 株式会社 デジタルメディア ビジネス開発部
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 2. おまえダレ?
デジタルメディア・ゲーム関連のビジネス開発を担当しています
放送・出版・デジタルメディアを中心に、いろいろなお客様に最新
Adobeテクノロジーや、そのよさをお伝えする仕事
イベント・カンファレンスでお話したりも、ときどきします
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 2
- 4. 「HTML5時代」以前のWeb開発
高度なことは
プラグインで
Audio/Video どこでも同じように グラフィック
表示され、動作する♡
アプリケーション
Web Storage
Web Sockets
File API
Offline Web Apps
アニメーション UI
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 4
- 5. 「HTML5時代」のWeb開発
ブラウザ内蔵の機能
のみですべてを実現
Audio/Video グラフィック
HTML5だけじゃなくて
HTML5 Video いろんな技術の SVG
HTML5 Audio HTML5 Canvas
組み合わせ♡
H.264 WebGL
アプリケーション
WebM Web Fonts
Theora
Web Storage
Web Sockets
File API
アニメーション Offline Web Apps UI
DOM+JavaScript HTML5 Forms
DOM+CSS3 Transforms Drag and Drop
HTML5 Canvas Touch Events
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 5
- 6. 1日でマスターできるHTML5まとめ!
CSS3って
HTML5?
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 6
Link: http://matome.naver.jp/odai/2130703450443574201
- 7. Bad News…
「HTML5」って
バラバラな技術が混在している
だけでなく、ツールも
未成熟?だと!?
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 7
- 8. Good News!
だいじょうぶ。
「HTML5」の民主化はじまってます。
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 8
- 9. 具体的には? ☞ Adobe & HTML
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 9
Link: http://html.adobe.com/
- 10. AdobeはHTML5 & Flashでデジタルメディアをトータルにカバー
HTML ブラン インタラク デジタル カジュアル プレミアム ハイエンド
デザイン ディング ティブコン 書籍 ゲーム ビデオ 3Dゲーム
&エフェクト &リッチ広告 テンツ
現在 HTML Flash/Adobe AIR
数年後 HTML Flash/Adobe AIR
サーバー
& サービス
ツール
フレーム
ワーク
映像配信 Web JavaScript モバイル
フォント ライブラリ アプリ
HTML5 Flash Playerプラグイン
(Web標準&ブラウザ) &AIRアプリ
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 10
- 11. というわけで、いますぐ使える
Adobeの「HTML5」対応ツールを
いくつかご紹介します。
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 11
- 12. typekit
(Webフォント)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 12
- 13. typekit
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 13
Link: https://typekit.com/
- 14. typekit利用例:The New Yorker
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 14
Link: http://www.newyorker.com/
- 15. typekitの代替ソリューション (ごく一部)
CSS3 @font-face こっち側は
日本語フォント対応
(自分でがんばる方式) (typekitは現在未対応)
http://www.w3.org/TR/css3-webfonts/ デコもじ (有償)
http://decomoji.jp/
Google Web Fonts (無償)
http://www.google.com/webfonts/ フォントプラス (有償)
http://webfont.fontplus.jp/
Fonts.com (有償)
http://webfonts.fonts.com/ タイプスクウェア (有償)
http://typesquare.com/
FontDeck (有償) アマナイメージズWEBフォント (有償)
http://fontdeck.com/ http://amanaimages.com/font/web/
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 15
- 16. typekit民主化ポイント
きちんと権利クリアされた高品質な
フォントを安心して使える。
使い方はコードをコピペして埋め込むだけ。
フォント形式 (EOTとか) を意識せず
旧いブラウザ (IE) にも対応できる。
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 16
- 17. PhoneGap
(HTML5ハイブリッドアプリ開発)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 17
- 18. Apache Cordova/PhoneGap
Apache Cordova
=オープンソースPJ
PhoneGap
=Adobeのディストリ
ビューション
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 18
Link: http://incubator.apache.org/cordova/ http://phonegap.com/
- 19. WikipediaアプリはPhoneGap製
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 19
Link: http://blog.wikimedia.org/2012/04/05/new-wikipedia-app-for-ios-and-an-update-for-our-android-app/
- 20. PhoneGapによるアプリのクロスプラットフォーム対応
HTML (& Dreamweaver) & PhoneGap ソリューション
Web技術 (HTML/CSS/JavaScript) だけでクロスプ
ラットフォームアプリケーションを開発
アドレス帳やカメラ等のネイティブ機能への直接
コールも可能
クラウド側でマルチプラットフォーム対応コンパ
イルが可能な”PhoneGap Build”も
ファイル形式
対応プラットフォーム
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 20
Link: http://www.phonegap.com/
- 21. iOS/AndroidにおけるPhoneGapアプリの構造
■ ネイティブ
■ Web標準
ネイティブなアプリケーションラッパー
■ ミドルウェア
(PhoneGap)
内蔵ブラウザ
(WebKit)
HTML/JSは JavaScriptから
HTML/CSS
システム側の デバイスAPI
WebKitが にアクセス可能
実行
JavaScript
iOS/Android (OS)
iPhone/iPad/Android (デバイス機能)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 21
- 23. PhoneGapの代替ソリューション (ごく一部)
AppCloud (Brightcove) Sencha Touch 2
http://www.brightcove.com/ja/%E3%82% http://www.sencha.com/products/touch/
B3%E3%83%B3%E3%83%86%E3%83%B
3%E3%83%84%E3%82%A2%E3%83%97
%E3%83%AA%E3%83%97%E3%83%A9
%E3%83%83%E3%83%88%E3%83%95%
E3%82%A9%E3%83%BC%E3%83%A0
Appspresso Rhodes
http://appspresso.com/ http://www.rhomobile.com/
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 23
- 24. PhoneGap民主化ポイント
HTML/CSS/JSだけでモバイルアプリ開発。
膨大なJSライブラリがそのまま使える。
PhoneGap BuildならマルチPF対応が容易。
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24
- 25. Dreamweaver CS6
(HTML5/CSS3コーディング)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 25
- 26. Dreamweaver CS6
デザイナー向けWebサイト・アプリ開発ツール
jQuery等のコードヒント
作業環境内で動作確認 (ライブビュー=WebKit)
可変グリッドレイアウト対応
入ってます!
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 26
- 27. Dreamweaverの代替ツール (ごく一部)
Aptana TextMate
http://aptana.com/ http://macromates.com/
WebStorm Visual Studio
http://www.jetbrains.com/webstorm/ http://www.microsoft.com/japan/m
sdn/vstudio/
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 27
- 28. Dreamweaver民主化ポイント
つねに結果 (ライブビュー) を確認
しながら作業でき、HTML/CSS/jQuery
うろ覚えでもコードを補完してくれる。
アダプティブデザインWebサイトも
モバイルWebアプリもこれひとつで完結。
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 28
- 29. Fireworks CS6
(CSS3デザイン)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 29
- 31. Fireworksの代替ツール (ごく一部)
CSS3 Button Generator CSS3 Generator
http://css3button.net/ http://www.css3.me/
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 31
- 32. Fireworks民主化ポイント
CSSを直接書かなくても
思い通りの形状やグラデーションが
作成できる。
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 32
- 33. Adobe Muse
(HTML5 Webページ制作)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 33
- 34. Adobe Muse
HTML5ページ作成ツール
DTPデザインのメタファー
コーディング不要 (Dreamweaverでさえも苦手な人向け)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 34
Link: http://muse.adobe.com/
- 35. Muse民主化ポイント
HTML/CSSの知識がゼロでも
DTPツールのノリでWebページ制作。
スライドショーもドラッグ&ドロップ
だけで追加できちゃう。
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 35
- 36. Adobe Edge
(CSS3アニメーション制作)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 36
- 37. Adobe Edge
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 37
- 38. WebページへのEdgeアニメーション組み込み
Edgeランタイム
スクリプトの参照
実際に表示される
div領域
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 38
- 39. モバイルアプリへのEdgeアニメーション組み込み例
Edgeなら位置・
サイズ・色・形状のアニ
メーションをコードを書かずに
簡単に実現できます。
タイミングの微調整をし、Web
やアプリとして複数プラット
フォームに配布するのも、他の
ゲーム開発ワークフローに
比べてほんの僅かな時間
しかかかりません。
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 39
Link: Adobe Success Story http://www.adobe.com/cfusion/showcase/index.cfm?event=casestudydetail&casestudyid=1694931
- 41. Adobe Edge Runtime API = JavaScript連携が容易
jQueryのセレクタを利用
Adobe独自のアニメーション
エンジン (CSS3+JavaScript)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 41
Link: http://www.adobe.com/devnet-apps/edge/api/current/EdgeAPI.0.1.6.html
- 42. Edgeの代替ツール
Tumult Hype (DOMアニメ) Sencha Animator (DOMアニメ)
http://tumultco.com/hype/ http://extjs.co.jp/products/animator/
Radi (HTML5 Canvas)
http://radiapp.com/
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 42
- 43. Edge民主化ポイント
HTML/CSS/JSの知識がゼロでも
FlashのようなHTMLアニメーション
と簡単なインタラクションを容易に作成できる。
しかも別ツールを使わずにファイルサイズを最小化。
IE8等非対応環境のための代替画像設定もカンタン。
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 43
- 44. Flash Professional
(HTML5 Canvasアニメーション制作)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 44
- 45. Flash Professional CS6:アニメーションのマルチアウトプット
[スプライトシートを作成] コマンド
HTML5 CanvasベースのJSアニメーション
フレームワーク”easelJS” (CreateJSの一部)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 45
Link: http://createjs.com/#!/EaselJS
- 46. Flash Pro民主化ポイント
従来のアニメーション制作ワークフロー
そのままにHTMLアニメーションを作成できる。
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 46
- 47. Adobe Shadow
(マルチスクリーンHTML動作テスト)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 47
- 48. リモート
インスペクション
(DOM確認・編集)
モバイルデバイスに
直接URLを送信し確認
(Bonjour接続)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 48
Link: http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow/
- 49. Shadow民主化ポイント
開発機と (何台もの) 実機を行ったり
来たりしないでもサイトの確認ができる。
しかも実行中のコードを手元で確認
できたりして。
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 49
- 50. Adobeの総合力
HTML ブラン インタラク デジタル カジュアル プレミアム ハイエンド
デザイン ディング ティブコン 書籍 ゲーム ビデオ 3Dゲーム
&エフェクト &リッチ広告 テンツ
HTML
今後続々ツール・
ソリューションを
サーバー 出していきます。
& サービス これが総合力!
ツール
フレーム
ワーク
映像配信 Web JavaScript モバイル
フォント ライブラリ アプリ
HTML5
(Web標準&ブラウザ)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 50
- 51. Adobeの総合力=Adobe Creative Suite 6 + Adobe Creative Cloud
¥5,000/mo.*
+
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 51
Link: http://www.adobe.com/jp/products/creativecloud.html *個人版 年間プラン/月 (標準価格)
- 53. 顧客「うちのサイトFlash使わないでFlashぽくやってよ。」
Web屋「はぁ。」
顧客「ほらアイパッドで見られるようにさ。」
Web屋「それHTML5なら楽勝っすよ!」
顧客「もちろんIEでも動くよね。」
Web屋「え。」
顧客「え。」
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 53
- 54. Flash Playerの普及率
Millward Brown調べ1 (2011.06) RIASTATS調べ2 (2012.05)
Flash Player 10+ Flash Player 10+
98.9% (Japan) 88.06% (Japan)
※PCのみ ※スマホ・タブレット含む
54
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Source: 1http://www.adobe.com/products/flashplatformruntimes/statistics.displayTab3.html 2http://riastats.com/
- 55. 「HTML5」の定義
にょろ〜ん!
世の中における期待値
(アイパッドで動くとか)を踏まえ
HTML5=脱Flash
という意味だと仮定して
もっとわかりやすく
「アンプラグド」と呼んでみる。
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 55
- 56. まとめ:アンプラグド vs. Flash勢力図 (2012年5月現在)
アニメー ゲーム・高
表示エフェ RIA (業務
ション・ 度なインタ オンライン
クト・スラ アプリケー
モーション ラクティブ ビデオ
イドショー ション)
GFX コンテンツ
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 56
- 57. 乱暴に言うと、アンプラグドは2種類
にょろにょろ〜ん!
HTML5
と
jQuery
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 57
- 58. 乱暴に言うと、使い分けはかんたん
HTML5
IE6/7/8切り捨て案件
jQuery
IE6/7/8対応案件
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 58
- 59. 直近のブラウザバージョン別インターネット利用シェア (WW)
IE6/7/8
38%
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 59
Source: http://marketshare.hitslink.com/browser-market-share.aspx?qprid=2&qpcustomd=0
- 60. 直近のブラウザバージョン別インターネット利用シェア (WW)
31.05%
20.7%
15.36%
15.07%
3.44%
2.8% IE6/7/8
2.73% 19.35%
2.01%
1.41%
1.26%
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 60
Source: http://gs.statcounter.com/#browser_version_partially_combined-ww-monthly-201203-201204-bar
- 61. 直近のブラウザバージョン別インターネット利用シェア (国内)
25.71%
24.39%
16.93%
15.97%
3.76%
3.68% IE6/7/8
1.67% 29.71%
1.56%
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 61
Source: http://gs.statcounter.com/#browser_version_partially_combined-JP-monthly-201203-201204-bar
- 62. ブラウザバージョン別インターネット利用シェア推移 (国内)
この推移を見てると
IE8が5%以下に
なるのにあと2年近く
かかりそう
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 62
Source: http://gs.statcounter.com/#browser_version_partially_combined-JP-daily-20080701-20120528
- 63. ポイント
一般ユーザー向けの
PC Webサイトで本当に
IE6/7/8を捨てられる=「HTML5」だけで
すべて済むようになるまでは
だいたいあと2年の辛抱。
いっぽう企業内に目を向けると…
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 63
- 64. 企業内におけるIE6/7/8ユーザーむちゃむちゃ多い
社内でもっとも多く利用されているブラウザ
Webページ閲覧可能企業ベース(n=153)
4.6% IE9.x
9.8% 5.9% ちなみにFlashが
0.7% IE8.x
閲覧できない企業は
1割 IE7.x
2.6%
24.2% IE6.x以前
Firefox
Safari
38.6% 13.7% Netscape
Opera
Chrome
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 64
Source: Web広告研究会による第4回企業内Web閲覧環境調査 https://www.wab.ne.jp/wab_sites/contents/1449
- 65. でもインターネットアクセスの
主流はいまやスマホ・タブレット
でしょ?
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 65
- 67. 年間出荷台数シェア≠インストールベース
大事なのは
こっち!
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 67
- 69. スマホ・タブレット vs. PCのインターネット利用シェア (国内)
人口1.2億人に対する
普及率1
スマホ 9.7%
パソコン 83.4%
うち48% 6.41%
Android
うち48%
iOS
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 69
Source: http://gs.statcounter.com/#mobile_vs_desktop-JP-monthly-200812-201205 1 http://bit.ly/NgPmju
- 70. スマホ・タブレット vs. PCのインターネット利用シェア (韓国)
人口0.49億人に対する
普及率
スマホ1 40%
パソコン2 80.9%
うち87% 19.73%
Android
うち11%
iOS
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 70
Source: http://gs.statcounter.com/#mobile_vs_desktop-KR-monthly-200812-201205 1 http://reut.rs/Kf328x 2 http://bit.ly/JVEiYe
- 71. スマホ・タブレット vs. PCのインターネット利用シェア (インド)
人口12億人に対する
普及率1
携帯電話 80%
パソコン 3%
うち16% 48.71%
Samsung
うち60%
Nokia
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 71
Source: http://gs.statcounter.com/#mobile_vs_desktop-IN-monthly-200812-201205 1 http://bit.ly/KOdbh8
- 72. ポイント
国内のインターネットアクセス
主流はまだまだPCであり続ける。
インターネット全体の
ユーザー動向と、個々のサイトでの
アクセス解析 (GA/SC) 結果を見ながら
効果が高いところに選択的に「HTML5」を導入するべき。
「こっち立てればあっちが立たず」状態はしばらく続く
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 72
- 73. じゃぁ手っ取り早く
どうすればいいか教えれ?
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 73
- 74. 高度にインタラクティブなサイト (ゲーム要素など)
デバイス スマホ・タブレッ PC IE6/7/8 PC モダンブラウザ
ト
テクノロジー HTML5 Canvas (EaselJS)
やれる度 ○ × ◎
顧客ハッピー度
デバイス スマホ・タブレッ PC IE6/7/8 PC モダンブラウザ
ト
テクノロジー Flash
やれる度 × ◎ ◎
顧客ハッピー度
デバイス スマホ・タブレッ PC IE6/7/8 PC モダンブラウザ
ト
テクノロジー HTML5 Canvas Flash
やれる度 ○ ◎ ◎
顧客ハッピー度
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 74
- 75. シンプルなアニメーションやスライドショー
デバイス スマホ・タブレッ PC IE6/7/8 PC モダンブラウザ
ト
テクノロジー jQuery
やれる度 ◎ ◎ ◎
顧客ハッピー度
デバイス スマホ・タブレッ PC IE6/7/8 PC モダンブラウザ
ト
テクノロジー CSS3 (Adobe Edge)
やれる度 ◎ × ◎
顧客ハッピー度
デバイス スマホ・タブレッ PC IE6/7/8 PC モダンブラウザ
ト
テクノロジー Flash
やれる度 × ◎ ◎
顧客ハッピー度
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 75
- 76. ポイント
IE6/7/8対応が必須な場合
思い切ってサイト全体で
「できること」をjQueryレベルに
ガマンすることも選択肢のひとつ。
IE6/7/8を切って「HTML5」で作っても
スマホ・タブレットで見られないとか
特定ブラウザで見ろ的なサイトは
Flash以上に「害悪」。
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 76
- 77. まとめ
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 78. 「HTML5」は
使い所を熟慮し、
クライアントと握ったうえで使う。
登場し始めた「HTML5」
民主化ツールを知り、賢く使う。
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 78
- 79. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.