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