SlideShare a Scribd company logo

Adobe Creative SuiteではじまるHTML5の民主化

Teiichi Ota
Teiichi Ota

2012/6/1に沖縄で開催された「Creators Night vol.5 Adobe次世代セミナー」およびR社社内勉強会でつかった資料です。HTML5ツールとその使いどころのあたりを。

1 of 79
Downloaded 43 times
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
3
「HTML5」どうやってつくる？ © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
22
PhoneGapのデバイス機能アクセス © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 22 Source: http://en.wikipedia.org/wiki/PhoneGap
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
30
CSSプロパティ抽出 © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 30
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
40
Webだけでなく電子書籍にも対応するEdge © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 40
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 *個人版 年間プラン/月 (標準価格)
52
「HTML5」どう使う？ © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
乱暴に言うと、アンプラグドは２種類 にょろにょろ〜ん！ 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
66
スマートフォンが年間出荷台数で初めてPC・タブレット合計を抜く © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 66 Source: http://www.asahi.com/digital/cnet/CNT201202060023.html
67
年間出荷台数シェア≠インストールベース 大事なのは こっち！ © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 67
68
インストールベースのシェア≒インターネットアクセス比率 © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 68
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.
R社勉強会 | 2012.06.11 Adobe Creative SuiteではじまるHTML5の民主化 太田禎一 | アドビ システムズ 株式会社 デジタルメディア ビジネス開発部 © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
おまえダレ？  デジタルメディア・ゲーム関連のビジネス開発を担当しています  放送・出版・デジタルメディアを中心に、いろいろなお客様に最新 Adobeテクノロジーや、そのよさをお伝えする仕事  イベント・カンファレンスでお話したりも、ときどきします © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 2
「HTML5」どうやってつくる？ © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
「HTML5時代」以前のWeb開発 高度なことは プラグインで Audio/Video どこでも同じように グラフィック 表示され、動作する♡ アプリケーション Web Storage Web Sockets File API Offline Web Apps アニメーション UI © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 4
「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
1日でマスターできるHTML5まとめ！ CSS3って HTML5？ © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 6 Link: http://matome.naver.jp/odai/2130703450443574201
Bad News… 「HTML5」って バラバラな技術が混在している だけでなく、ツールも 未成熟？だと！？ © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 7
Good News! だいじょうぶ。 「HTML5」の民主化はじまってます。 © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 8
具体的には？ ☞ Adobe & HTML © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 9 Link: http://html.adobe.com/
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
というわけで、いますぐ使える Adobeの「HTML5」対応ツールを いくつかご紹介します。 © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 11
typekit (Webフォント) © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 12
typekit © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 13 Link: https://typekit.com/
typekit利用例：The New Yorker © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 14 Link: http://www.newyorker.com/
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
typekit民主化ポイント きちんと権利クリアされた高品質な フォントを安心して使える。 使い方はコードをコピペして埋め込むだけ。 フォント形式 (EOTとか) を意識せず 旧いブラウザ (IE) にも対応できる。 © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 16
PhoneGap (HTML5ハイブリッドアプリ開発) © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 17
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/
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/
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/
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
PhoneGapのデバイス機能アクセス © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 22 Source: http://en.wikipedia.org/wiki/PhoneGap
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
PhoneGap民主化ポイント HTML/CSS/JSだけでモバイルアプリ開発。 膨大なJSライブラリがそのまま使える。 PhoneGap BuildならマルチPF対応が容易。 © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24
Dreamweaver CS6 (HTML5/CSS3コーディング) © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 25
Dreamweaver CS6  デザイナー向けWebサイト・アプリ開発ツール  jQuery等のコードヒント  作業環境内で動作確認 (ライブビュー＝WebKit)  可変グリッドレイアウト対応 入ってます！ © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 26
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
Dreamweaver民主化ポイント つねに結果 (ライブビュー) を確認 しながら作業でき、HTML/CSS/jQuery うろ覚えでもコードを補完してくれる。 アダプティブデザインWebサイトも モバイルWebアプリもこれひとつで完結。 © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 28
Fireworks CS6 (CSS3デザイン) © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 29
CSSプロパティ抽出 © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 30
Fireworksの代替ツール (ごく一部) CSS3 Button Generator CSS3 Generator http://css3button.net/ http://www.css3.me/ © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 31
Fireworks民主化ポイント CSSを直接書かなくても 思い通りの形状やグラデーションが 作成できる。 © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 32
Adobe Muse (HTML5 Webページ制作) © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 33
Adobe Muse  HTML5ページ作成ツール  DTPデザインのメタファー  コーディング不要 (Dreamweaverでさえも苦手な人向け) © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 34 Link: http://muse.adobe.com/
Muse民主化ポイント HTML/CSSの知識がゼロでも DTPツールのノリでWebページ制作。 スライドショーもドラッグ&ドロップ だけで追加できちゃう。 © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 35
Adobe Edge (CSS3アニメーション制作) © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 36
Adobe Edge © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 37
WebページへのEdgeアニメーション組み込み Edgeランタイム スクリプトの参照 実際に表示される div領域 © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 38
モバイルアプリへの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
Webだけでなく電子書籍にも対応するEdge © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 40
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
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
Edge民主化ポイント HTML/CSS/JSの知識がゼロでも FlashのようなHTMLアニメーション と簡単なインタラクションを容易に作成できる。 しかも別ツールを使わずにファイルサイズを最小化。 IE8等非対応環境のための代替画像設定もカンタン。 © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 43
Flash Professional (HTML5 Canvasアニメーション制作) © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 44
Flash Professional CS6：アニメーションのマルチアウトプット [スプライトシートを作成] コマンド HTML5 CanvasベースのJSアニメーション フレームワーク”easelJS” (CreateJSの一部) © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 45 Link: http://createjs.com/#!/EaselJS
Flash Pro民主化ポイント 従来のアニメーション制作ワークフロー そのままにHTMLアニメーションを作成できる。 © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 46
Adobe Shadow (マルチスクリーンHTML動作テスト) © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 47
リモート インスペクション (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/
Shadow民主化ポイント 開発機と (何台もの) 実機を行ったり 来たりしないでもサイトの確認ができる。 しかも実行中のコードを手元で確認 できたりして。 © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 49
Adobeの総合力 HTML ブラン インタラク デジタル カジュアル プレミアム ハイエンド デザイン ディング ティブコン 書籍 ゲーム ビデオ 3Dゲーム &エフェクト &リッチ広告 テンツ HTML 今後続々ツール・ ソリューションを サーバー 出していきます。 & サービス これが総合力！ ツール フレーム ワーク 映像配信 Web JavaScript モバイル フォント ライブラリ アプリ HTML5 （Web標準＆ブラウザ） © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 50
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 *個人版 年間プラン/月 (標準価格)
「HTML5」どう使う？ © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
顧客「うちのサイトFlash使わないでFlashぽくやってよ。」 Web屋「はぁ。」 顧客「ほらアイパッドで見られるようにさ。」 Web屋「それHTML5なら楽勝っすよ！」 顧客「もちろんIEでも動くよね。」 Web屋「え。」 顧客「え。」 © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 53
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/
「HTML5」の定義 にょろ〜ん！ 世の中における期待値 (アイパッドで動くとか)を踏まえ HTML5＝脱Flash という意味だと仮定して もっとわかりやすく 「アンプラグド」と呼んでみる。 © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 55
まとめ：アンプラグド vs. Flash勢力図 (2012年5月現在) アニメー ゲーム・高 表示エフェ RIA (業務 ション・ 度なインタ オンライン クト・スラ アプリケー モーション ラクティブ ビデオ イドショー ション) GFX コンテンツ © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 56
乱暴に言うと、アンプラグドは２種類 にょろにょろ〜ん！ HTML5 と jQuery © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 57
乱暴に言うと、使い分けはかんたん HTML5 IE6/7/8切り捨て案件 jQuery IE6/7/8対応案件 © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 58
直近のブラウザバージョン別インターネット利用シェア (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
直近のブラウザバージョン別インターネット利用シェア (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
直近のブラウザバージョン別インターネット利用シェア (国内) 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
ブラウザバージョン別インターネット利用シェア推移 (国内) この推移を見てると 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
ポイント 一般ユーザー向けの PC Webサイトで本当に IE6/7/8を捨てられる＝「HTML5」だけで すべて済むようになるまでは だいたいあと2年の辛抱。 いっぽう企業内に目を向けると… © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 63
企業内における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
でもインターネットアクセスの 主流はいまやスマホ・タブレット でしょ？ © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 65
スマートフォンが年間出荷台数で初めてPC・タブレット合計を抜く © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 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
スマホ・タブレット 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
スマホ・タブレット 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
スマホ・タブレット 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
ポイント 国内のインターネットアクセス 主流はまだまだPCであり続ける。 インターネット全体の ユーザー動向と、個々のサイトでの アクセス解析 (GA/SC) 結果を見ながら 効果が高いところに選択的に「HTML5」を導入するべき。 「こっち立てればあっちが立たず」状態はしばらく続く © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 72
じゃぁ手っ取り早く どうすればいいか教えれ？ © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 73
高度にインタラクティブなサイト (ゲーム要素など) デバイス スマホ・タブレッ 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
シンプルなアニメーションやスライドショー デバイス スマホ・タブレッ 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
ポイント IE6/7/8対応が必須な場合 思い切ってサイト全体で 「できること」をjQueryレベルに ガマンすることも選択肢のひとつ。 IE6/7/8を切って「HTML5」で作っても スマホ・タブレットで見られないとか 特定ブラウザで見ろ的なサイトは Flash以上に「害悪」。 © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 76
まとめ © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
「HTML5」は 使い所を熟慮し、 クライアントと握ったうえで使う。 登場し始めた「HTML5」 民主化ツールを知り、賢く使う。 © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 78
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Ad

Recommended

「職人技」では未来が見えない！みんなが使えるAdobeのHTML5関連ツールとソリューション。
「職人技」では未来が見えない！みんなが使えるAdobeのHTML5関連ツールとソリューション。「職人技」では未来が見えない！みんなが使えるAdobeのHTML5関連ツールとソリューション。
「職人技」では未来が見えない！みんなが使えるAdobeのHTML5関連ツールとソリューション。
Teiichi Ota
 
patterns & practices "Project Silk" に見る HTML5 とモダンブラウザのための Web 開発の今後
patterns & practices "Project Silk" に見る HTML5 とモダンブラウザのための Web 開発の今後patterns & practices "Project Silk" に見る HTML5 とモダンブラウザのための Web 開発の今後
patterns & practices "Project Silk" に見る HTML5 とモダンブラウザのための Web 開発の今後
Akira Inoue
 
Flex開発を加速するFlash Builder 4新機能紹介
Flex開発を加速するFlash Builder 4新機能紹介Flex開発を加速するFlash Builder 4新機能紹介
Flex開発を加速するFlash Builder 4新機能紹介
Keisuke Todoroki
 
PhoneGap Introduction
PhoneGap IntroductionPhoneGap Introduction
PhoneGap Introduction
Keisuke Todoroki
 
ICT ERA+ABC 2012東北講演
ICT ERA+ABC 2012東北講演ICT ERA+ABC 2012東北講演
ICT ERA+ABC 2012東北講演
Monaca
 
Adobe Creative Cloud：アイデアを携えて、町へ出よう
Adobe Creative Cloud：アイデアを携えて、町へ出ようAdobe Creative Cloud：アイデアを携えて、町へ出よう
Adobe Creative Cloud：アイデアを携えて、町へ出よう
Teiichi Ota
 
企画者が押さえておきたいHtml5アプリ開発の要点
企画者が押さえておきたいHtml5アプリ開発の要点企画者が押さえておきたいHtml5アプリ開発の要点
企画者が押さえておきたいHtml5アプリ開発の要点
Monaca
 
いまさら聞けない！HTML5超入門
いまさら聞けない！HTML5超入門いまさら聞けない！HTML5超入門
いまさら聞けない！HTML5超入門
Monaca
 
Flashテクノロジーの今後とあなたの人生とのかかわりについて
Flashテクノロジーの今後とあなたの人生とのかかわりについてFlashテクノロジーの今後とあなたの人生とのかかわりについて
Flashテクノロジーの今後とあなたの人生とのかかわりについて
Teiichi Ota
 
PCとモバイルの両方で妥協しないマルチデバイス映像配信の最適解：Adobe Media Server & Adobe Access DRM
PCとモバイルの両方で妥協しないマルチデバイス映像配信の最適解：Adobe Media Server & Adobe Access DRMPCとモバイルの両方で妥協しないマルチデバイス映像配信の最適解：Adobe Media Server & Adobe Access DRM
PCとモバイルの両方で妥協しないマルチデバイス映像配信の最適解：Adobe Media Server & Adobe Access DRM
Teiichi Ota
 
ChromeでSilverlightが使えなくなってしまったこの世界におけるプレミアム動画保護 (DRM) への最適アプローチとは？
ChromeでSilverlightが使えなくなってしまったこの世界におけるプレミアム動画保護 (DRM) への最適アプローチとは？ChromeでSilverlightが使えなくなってしまったこの世界におけるプレミアム動画保護 (DRM) への最適アプローチとは？
ChromeでSilverlightが使えなくなってしまったこの世界におけるプレミアム動画保護 (DRM) への最適アプローチとは？
Teiichi Ota
 
Adobe Primetime：プレミアム動画配信事業者のための「次世代TV」収益最大化ソリューション（サブスクリプション＆動画広告）
Adobe Primetime：プレミアム動画配信事業者のための「次世代TV」収益最大化ソリューション（サブスクリプション＆動画広告）Adobe Primetime：プレミアム動画配信事業者のための「次世代TV」収益最大化ソリューション（サブスクリプション＆動画広告）
Adobe Primetime：プレミアム動画配信事業者のための「次世代TV」収益最大化ソリューション（サブスクリプション＆動画広告）
Teiichi Ota
 
Adobe Primetime & Adobe Marketing Cloud： オールスクリーン対応のプレミアム動画事業収益化ソリューション
Adobe Primetime & Adobe Marketing Cloud： オールスクリーン対応のプレミアム動画事業収益化ソリューションAdobe Primetime & Adobe Marketing Cloud： オールスクリーン対応のプレミアム動画事業収益化ソリューション
Adobe Primetime & Adobe Marketing Cloud： オールスクリーン対応のプレミアム動画事業収益化ソリューション
Teiichi Ota
 
「HTML5」における動画DRMのゆくえとか
「HTML5」における動画DRMのゆくえとか「HTML5」における動画DRMのゆくえとか
「HTML5」における動画DRMのゆくえとか
Teiichi Ota
 
HTML5でDRMってアリなの？〜誰も教えてくれないマルチデバイス時代のコンテンツ保護。その現状と展望
HTML5でDRMってアリなの？〜誰も教えてくれないマルチデバイス時代のコンテンツ保護。その現状と展望HTML5でDRMってアリなの？〜誰も教えてくれないマルチデバイス時代のコンテンツ保護。その現状と展望
HTML5でDRMってアリなの？〜誰も教えてくれないマルチデバイス時代のコンテンツ保護。その現状と展望
Teiichi Ota
 
HTML5時代のネット動画技術〜良い子悪い子普通の子（増補改訂版）
HTML5時代のネット動画技術〜良い子悪い子普通の子（増補改訂版）HTML5時代のネット動画技術〜良い子悪い子普通の子（増補改訂版）
HTML5時代のネット動画技術〜良い子悪い子普通の子（増補改訂版）
Teiichi Ota
 
Flash VideoやFlashゲームを含めた「フルWeb」がSmart TVにやってくる！
Flash VideoやFlashゲームを含めた「フルWeb」がSmart TVにやってくる！Flash VideoやFlashゲームを含めた「フルWeb」がSmart TVにやってくる！
Flash VideoやFlashゲームを含めた「フルWeb」がSmart TVにやってくる！
Teiichi Ota
 
HTML5は本当にFlashの代替になり得るのか？～Webテクノロジー進化論
HTML5は本当にFlashの代替になり得るのか？～Webテクノロジー進化論HTML5は本当にFlashの代替になり得るのか？～Webテクノロジー進化論
HTML5は本当にFlashの代替になり得るのか？～Webテクノロジー進化論
Teiichi Ota
 
マルチデバイスへ広がる最新動画配信とビジネス現場への活かし方
マルチデバイスへ広がる最新動画配信とビジネス現場への活かし方マルチデバイスへ広がる最新動画配信とビジネス現場への活かし方
マルチデバイスへ広がる最新動画配信とビジネス現場への活かし方
Teiichi Ota
 
Sneak Previews (ADC MEETUP ROUND 01)
Sneak Previews (ADC MEETUP ROUND 01)Sneak Previews (ADC MEETUP ROUND 01)
Sneak Previews (ADC MEETUP ROUND 01)
Teiichi Ota
 
120829atechhills3flashfinal 120829215733-phpapp01
120829atechhills3flashfinal 120829215733-phpapp01120829atechhills3flashfinal 120829215733-phpapp01
120829atechhills3flashfinal 120829215733-phpapp01
Chris Brownlee
 
Web Technology Meeting
Web Technology MeetingWeb Technology Meeting
Web Technology Meeting
dynamis
 
HTML5 + Firefox OS
HTML5 + Firefox OSHTML5 + Firefox OS
HTML5 + Firefox OS
dynamis
 
HTML5 OS
HTML5 OSHTML5 OS
HTML5 OS
dynamis
 
PhoneGapとハイブリッド開発
PhoneGapとハイブリッド開発PhoneGapとハイブリッド開発
PhoneGapとハイブリッド開発
Andy Hall
 
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
SwapSkills
 
Attractive HTML5
Attractive HTML5Attractive HTML5
Attractive HTML5
Sho Ito
 
更に進化するCSSの表現力と 新しいWebツール [Reloaded]
更に進化するCSSの表現力と 新しいWebツール [Reloaded]更に進化するCSSの表現力と 新しいWebツール [Reloaded]
更に進化するCSSの表現力と 新しいWebツール [Reloaded]
Keisuke Todoroki
 
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival FukuokaHTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
Keisuke Todoroki
 
HTML2013 Web=OS
HTML2013 Web=OSHTML2013 Web=OS
HTML2013 Web=OS
dynamis
 

More Related Content

Viewers also liked (11)

Flashテクノロジーの今後とあなたの人生とのかかわりについて
Flashテクノロジーの今後とあなたの人生とのかかわりについてFlashテクノロジーの今後とあなたの人生とのかかわりについて
Flashテクノロジーの今後とあなたの人生とのかかわりについて
Teiichi Ota
 
PCとモバイルの両方で妥協しないマルチデバイス映像配信の最適解：Adobe Media Server & Adobe Access DRM
PCとモバイルの両方で妥協しないマルチデバイス映像配信の最適解：Adobe Media Server & Adobe Access DRMPCとモバイルの両方で妥協しないマルチデバイス映像配信の最適解：Adobe Media Server & Adobe Access DRM
PCとモバイルの両方で妥協しないマルチデバイス映像配信の最適解：Adobe Media Server & Adobe Access DRM
Teiichi Ota
 
ChromeでSilverlightが使えなくなってしまったこの世界におけるプレミアム動画保護 (DRM) への最適アプローチとは？
ChromeでSilverlightが使えなくなってしまったこの世界におけるプレミアム動画保護 (DRM) への最適アプローチとは？ChromeでSilverlightが使えなくなってしまったこの世界におけるプレミアム動画保護 (DRM) への最適アプローチとは？
ChromeでSilverlightが使えなくなってしまったこの世界におけるプレミアム動画保護 (DRM) への最適アプローチとは？
Teiichi Ota
 
Adobe Primetime：プレミアム動画配信事業者のための「次世代TV」収益最大化ソリューション（サブスクリプション＆動画広告）
Adobe Primetime：プレミアム動画配信事業者のための「次世代TV」収益最大化ソリューション（サブスクリプション＆動画広告）Adobe Primetime：プレミアム動画配信事業者のための「次世代TV」収益最大化ソリューション（サブスクリプション＆動画広告）
Adobe Primetime：プレミアム動画配信事業者のための「次世代TV」収益最大化ソリューション（サブスクリプション＆動画広告）
Teiichi Ota
 
Adobe Primetime & Adobe Marketing Cloud： オールスクリーン対応のプレミアム動画事業収益化ソリューション
Adobe Primetime & Adobe Marketing Cloud： オールスクリーン対応のプレミアム動画事業収益化ソリューションAdobe Primetime & Adobe Marketing Cloud： オールスクリーン対応のプレミアム動画事業収益化ソリューション
Adobe Primetime & Adobe Marketing Cloud： オールスクリーン対応のプレミアム動画事業収益化ソリューション
Teiichi Ota
 
「HTML5」における動画DRMのゆくえとか
「HTML5」における動画DRMのゆくえとか「HTML5」における動画DRMのゆくえとか
「HTML5」における動画DRMのゆくえとか
Teiichi Ota
 
HTML5でDRMってアリなの？〜誰も教えてくれないマルチデバイス時代のコンテンツ保護。その現状と展望
HTML5でDRMってアリなの？〜誰も教えてくれないマルチデバイス時代のコンテンツ保護。その現状と展望HTML5でDRMってアリなの？〜誰も教えてくれないマルチデバイス時代のコンテンツ保護。その現状と展望
HTML5でDRMってアリなの？〜誰も教えてくれないマルチデバイス時代のコンテンツ保護。その現状と展望
Teiichi Ota
 
HTML5時代のネット動画技術〜良い子悪い子普通の子（増補改訂版）
HTML5時代のネット動画技術〜良い子悪い子普通の子（増補改訂版）HTML5時代のネット動画技術〜良い子悪い子普通の子（増補改訂版）
HTML5時代のネット動画技術〜良い子悪い子普通の子（増補改訂版）
Teiichi Ota
 
Flash VideoやFlashゲームを含めた「フルWeb」がSmart TVにやってくる！
Flash VideoやFlashゲームを含めた「フルWeb」がSmart TVにやってくる！Flash VideoやFlashゲームを含めた「フルWeb」がSmart TVにやってくる！
Flash VideoやFlashゲームを含めた「フルWeb」がSmart TVにやってくる！
Teiichi Ota
 
HTML5は本当にFlashの代替になり得るのか？～Webテクノロジー進化論
HTML5は本当にFlashの代替になり得るのか？～Webテクノロジー進化論HTML5は本当にFlashの代替になり得るのか？～Webテクノロジー進化論
HTML5は本当にFlashの代替になり得るのか？～Webテクノロジー進化論
Teiichi Ota
 
マルチデバイスへ広がる最新動画配信とビジネス現場への活かし方
マルチデバイスへ広がる最新動画配信とビジネス現場への活かし方マルチデバイスへ広がる最新動画配信とビジネス現場への活かし方
マルチデバイスへ広がる最新動画配信とビジネス現場への活かし方
Teiichi Ota
 
Flashテクノロジーの今後とあなたの人生とのかかわりについて
Flashテクノロジーの今後とあなたの人生とのかかわりについてFlashテクノロジーの今後とあなたの人生とのかかわりについて
Flashテクノロジーの今後とあなたの人生とのかかわりについて
Teiichi Ota
 
PCとモバイルの両方で妥協しないマルチデバイス映像配信の最適解：Adobe Media Server & Adobe Access DRM
PCとモバイルの両方で妥協しないマルチデバイス映像配信の最適解：Adobe Media Server & Adobe Access DRMPCとモバイルの両方で妥協しないマルチデバイス映像配信の最適解：Adobe Media Server & Adobe Access DRM
PCとモバイルの両方で妥協しないマルチデバイス映像配信の最適解：Adobe Media Server & Adobe Access DRM
Teiichi Ota
 
ChromeでSilverlightが使えなくなってしまったこの世界におけるプレミアム動画保護 (DRM) への最適アプローチとは？
ChromeでSilverlightが使えなくなってしまったこの世界におけるプレミアム動画保護 (DRM) への最適アプローチとは？ChromeでSilverlightが使えなくなってしまったこの世界におけるプレミアム動画保護 (DRM) への最適アプローチとは？
ChromeでSilverlightが使えなくなってしまったこの世界におけるプレミアム動画保護 (DRM) への最適アプローチとは？
Teiichi Ota
 
Adobe Primetime：プレミアム動画配信事業者のための「次世代TV」収益最大化ソリューション（サブスクリプション＆動画広告）
Adobe Primetime：プレミアム動画配信事業者のための「次世代TV」収益最大化ソリューション（サブスクリプション＆動画広告）Adobe Primetime：プレミアム動画配信事業者のための「次世代TV」収益最大化ソリューション（サブスクリプション＆動画広告）
Adobe Primetime：プレミアム動画配信事業者のための「次世代TV」収益最大化ソリューション（サブスクリプション＆動画広告）
Teiichi Ota
 
Adobe Primetime & Adobe Marketing Cloud： オールスクリーン対応のプレミアム動画事業収益化ソリューション
Adobe Primetime & Adobe Marketing Cloud： オールスクリーン対応のプレミアム動画事業収益化ソリューションAdobe Primetime & Adobe Marketing Cloud： オールスクリーン対応のプレミアム動画事業収益化ソリューション
Adobe Primetime & Adobe Marketing Cloud： オールスクリーン対応のプレミアム動画事業収益化ソリューション
Teiichi Ota
 
「HTML5」における動画DRMのゆくえとか
「HTML5」における動画DRMのゆくえとか「HTML5」における動画DRMのゆくえとか
「HTML5」における動画DRMのゆくえとか
Teiichi Ota
 
HTML5でDRMってアリなの？〜誰も教えてくれないマルチデバイス時代のコンテンツ保護。その現状と展望
HTML5でDRMってアリなの？〜誰も教えてくれないマルチデバイス時代のコンテンツ保護。その現状と展望HTML5でDRMってアリなの？〜誰も教えてくれないマルチデバイス時代のコンテンツ保護。その現状と展望
HTML5でDRMってアリなの？〜誰も教えてくれないマルチデバイス時代のコンテンツ保護。その現状と展望
Teiichi Ota
 
HTML5時代のネット動画技術〜良い子悪い子普通の子（増補改訂版）
HTML5時代のネット動画技術〜良い子悪い子普通の子（増補改訂版）HTML5時代のネット動画技術〜良い子悪い子普通の子（増補改訂版）
HTML5時代のネット動画技術〜良い子悪い子普通の子（増補改訂版）
Teiichi Ota
 
Flash VideoやFlashゲームを含めた「フルWeb」がSmart TVにやってくる！
Flash VideoやFlashゲームを含めた「フルWeb」がSmart TVにやってくる！Flash VideoやFlashゲームを含めた「フルWeb」がSmart TVにやってくる！
Flash VideoやFlashゲームを含めた「フルWeb」がSmart TVにやってくる！
Teiichi Ota
 
HTML5は本当にFlashの代替になり得るのか？～Webテクノロジー進化論
HTML5は本当にFlashの代替になり得るのか？～Webテクノロジー進化論HTML5は本当にFlashの代替になり得るのか？～Webテクノロジー進化論
HTML5は本当にFlashの代替になり得るのか？～Webテクノロジー進化論
Teiichi Ota
 
マルチデバイスへ広がる最新動画配信とビジネス現場への活かし方
マルチデバイスへ広がる最新動画配信とビジネス現場への活かし方マルチデバイスへ広がる最新動画配信とビジネス現場への活かし方
マルチデバイスへ広がる最新動画配信とビジネス現場への活かし方
Teiichi Ota
 

Similar to Adobe Creative SuiteではじまるHTML5の民主化 (20)

Sneak Previews (ADC MEETUP ROUND 01)
Sneak Previews (ADC MEETUP ROUND 01)Sneak Previews (ADC MEETUP ROUND 01)
Sneak Previews (ADC MEETUP ROUND 01)
Teiichi Ota
 
120829atechhills3flashfinal 120829215733-phpapp01
120829atechhills3flashfinal 120829215733-phpapp01120829atechhills3flashfinal 120829215733-phpapp01
120829atechhills3flashfinal 120829215733-phpapp01
Chris Brownlee
 
Web Technology Meeting
Web Technology MeetingWeb Technology Meeting
Web Technology Meeting
dynamis
 
HTML5 + Firefox OS
HTML5 + Firefox OSHTML5 + Firefox OS
HTML5 + Firefox OS
dynamis
 
HTML5 OS
HTML5 OSHTML5 OS
HTML5 OS
dynamis
 
PhoneGapとハイブリッド開発
PhoneGapとハイブリッド開発PhoneGapとハイブリッド開発
PhoneGapとハイブリッド開発
Andy Hall
 
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
SwapSkills
 
Attractive HTML5
Attractive HTML5Attractive HTML5
Attractive HTML5
Sho Ito
 
更に進化するCSSの表現力と 新しいWebツール [Reloaded]
更に進化するCSSの表現力と 新しいWebツール [Reloaded]更に進化するCSSの表現力と 新しいWebツール [Reloaded]
更に進化するCSSの表現力と 新しいWebツール [Reloaded]
Keisuke Todoroki
 
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival FukuokaHTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
Keisuke Todoroki
 
HTML2013 Web=OS
HTML2013 Web=OSHTML2013 Web=OS
HTML2013 Web=OS
dynamis
 
2014年メディア工房勉強会　第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会　第1章「Webの仕組みとHTML5」2014年メディア工房勉強会　第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会　第1章「Webの仕組みとHTML5」
Takashi Endo
 
モダンなWebとモダンな開発ツールの新ネタ
モダンなWebとモダンな開発ツールの新ネタモダンなWebとモダンな開発ツールの新ネタ
モダンなWebとモダンな開発ツールの新ネタ
Andy Hall
 
FITC2014 モダンなWeb
FITC2014 モダンなWebFITC2014 モダンなWeb
FITC2014 モダンなWeb
Andy Hall
 
HTML5でできるカメラアプリを実際に体験しよう
HTML5でできるカメラアプリを実際に体験しよう HTML5でできるカメラアプリを実際に体験しよう
HTML5でできるカメラアプリを実際に体験しよう
Hideki Akiba
 
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
Sho Ito
 
開発事例に学ぶHtml5アプリのポイント
開発事例に学ぶHtml5アプリのポイント開発事例に学ぶHtml5アプリのポイント
開発事例に学ぶHtml5アプリのポイント
Monaca
 
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
Keisuke Todoroki
 
CEDEC 2013 - FlashによるアセットワークフローのHTML5やネイティブアプリへのうまい持ち込み方
CEDEC 2013 - FlashによるアセットワークフローのHTML5やネイティブアプリへのうまい持ち込み方CEDEC 2013 - FlashによるアセットワークフローのHTML5やネイティブアプリへのうまい持ち込み方
CEDEC 2013 - FlashによるアセットワークフローのHTML5やネイティブアプリへのうまい持ち込み方
Andy Hall
 
Html5超入門
Html5超入門Html5超入門
Html5超入門
Monaca
 
Sneak Previews (ADC MEETUP ROUND 01)
Sneak Previews (ADC MEETUP ROUND 01)Sneak Previews (ADC MEETUP ROUND 01)
Sneak Previews (ADC MEETUP ROUND 01)
Teiichi Ota
 
120829atechhills3flashfinal 120829215733-phpapp01
120829atechhills3flashfinal 120829215733-phpapp01120829atechhills3flashfinal 120829215733-phpapp01
120829atechhills3flashfinal 120829215733-phpapp01
Chris Brownlee
 
Web Technology Meeting
Web Technology MeetingWeb Technology Meeting
Web Technology Meeting
dynamis
 
HTML5 + Firefox OS
HTML5 + Firefox OSHTML5 + Firefox OS
HTML5 + Firefox OS
dynamis
 
HTML5 OS
HTML5 OSHTML5 OS
HTML5 OS
dynamis
 
PhoneGapとハイブリッド開発
PhoneGapとハイブリッド開発PhoneGapとハイブリッド開発
PhoneGapとハイブリッド開発
Andy Hall
 
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
SwapSkills
 
Attractive HTML5
Attractive HTML5Attractive HTML5
Attractive HTML5
Sho Ito
 
更に進化するCSSの表現力と 新しいWebツール [Reloaded]
更に進化するCSSの表現力と 新しいWebツール [Reloaded]更に進化するCSSの表現力と 新しいWebツール [Reloaded]
更に進化するCSSの表現力と 新しいWebツール [Reloaded]
Keisuke Todoroki
 
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival FukuokaHTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
Keisuke Todoroki
 
HTML2013 Web=OS
HTML2013 Web=OSHTML2013 Web=OS
HTML2013 Web=OS
dynamis
 
2014年メディア工房勉強会　第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会　第1章「Webの仕組みとHTML5」2014年メディア工房勉強会　第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会　第1章「Webの仕組みとHTML5」
Takashi Endo
 
モダンなWebとモダンな開発ツールの新ネタ
モダンなWebとモダンな開発ツールの新ネタモダンなWebとモダンな開発ツールの新ネタ
モダンなWebとモダンな開発ツールの新ネタ
Andy Hall
 
FITC2014 モダンなWeb
FITC2014 モダンなWebFITC2014 モダンなWeb
FITC2014 モダンなWeb
Andy Hall
 
HTML5でできるカメラアプリを実際に体験しよう
HTML5でできるカメラアプリを実際に体験しよう HTML5でできるカメラアプリを実際に体験しよう
HTML5でできるカメラアプリを実際に体験しよう
Hideki Akiba
 
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
Sho Ito
 
開発事例に学ぶHtml5アプリのポイント
開発事例に学ぶHtml5アプリのポイント開発事例に学ぶHtml5アプリのポイント
開発事例に学ぶHtml5アプリのポイント
Monaca
 
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
Keisuke Todoroki
 
CEDEC 2013 - FlashによるアセットワークフローのHTML5やネイティブアプリへのうまい持ち込み方
CEDEC 2013 - FlashによるアセットワークフローのHTML5やネイティブアプリへのうまい持ち込み方CEDEC 2013 - FlashによるアセットワークフローのHTML5やネイティブアプリへのうまい持ち込み方
CEDEC 2013 - FlashによるアセットワークフローのHTML5やネイティブアプリへのうまい持ち込み方
Andy Hall
 
Html5超入門
Html5超入門Html5超入門
Html5超入門
Monaca
 
Ad

More from Teiichi Ota (16)

昨今のデジタルマーケティング市場とその展望：2018夏
昨今のデジタルマーケティング市場とその展望：2018夏昨今のデジタルマーケティング市場とその展望：2018夏
昨今のデジタルマーケティング市場とその展望：2018夏
Teiichi Ota
 
ADC MEETUP ROUND 03 Adobe new tools
ADC MEETUP ROUND 03 Adobe new toolsADC MEETUP ROUND 03 Adobe new tools
ADC MEETUP ROUND 03 Adobe new tools
Teiichi Ota
 
ポストPC時代をにらんだRIA中長期戦略
ポストPC時代をにらんだRIA中長期戦略ポストPC時代をにらんだRIA中長期戦略
ポストPC時代をにらんだRIA中長期戦略
Teiichi Ota
 
110803a smart tv_adobe
110803a smart tv_adobe110803a smart tv_adobe
110803a smart tv_adobe
Teiichi Ota
 
110915 ria effectiveness
110915 ria effectiveness110915 ria effectiveness
110915 ria effectiveness
Teiichi Ota
 
110928 otf ttf_test
110928 otf ttf_test110928 otf ttf_test
110928 otf ttf_test
Teiichi Ota
 
「ポストPC」時代におけるFlash Videoの優位性
「ポストPC」時代におけるFlash Videoの優位性「ポストPC」時代におけるFlash Videoの優位性
「ポストPC」時代におけるFlash Videoの優位性
Teiichi Ota
 
スマートフォン・ビジネスの「金脈」を探る
スマートフォン・ビジネスの「金脈」を探るスマートフォン・ビジネスの「金脈」を探る
スマートフォン・ビジネスの「金脈」を探る
Teiichi Ota
 
Back to the Basics, and Beyond - Adobe's Take
Back to the Basics, and Beyond - Adobe's TakeBack to the Basics, and Beyond - Adobe's Take
Back to the Basics, and Beyond - Adobe's Take
Teiichi Ota
 
Adobe Dreamweaver CS5.5 (仮)
Adobe Dreamweaver CS5.5 (仮)Adobe Dreamweaver CS5.5 (仮)
Adobe Dreamweaver CS5.5 (仮)
Teiichi Ota
 
クロスプラットフォーム戦略の優位性
クロスプラットフォーム戦略の優位性クロスプラットフォーム戦略の優位性
クロスプラットフォーム戦略の優位性
Teiichi Ota
 
Adobe RIA製品のご紹介 Flash PlatformとFlexフレームワーク
Adobe RIA製品のご紹介 Flash PlatformとFlexフレームワークAdobe RIA製品のご紹介 Flash PlatformとFlexフレームワーク
Adobe RIA製品のご紹介 Flash PlatformとFlexフレームワーク
Teiichi Ota
 
クリエイティブが変わる！マルチプラットフォームに対応するための最先端の取り組み
クリエイティブが変わる！マルチプラットフォームに対応するための最先端の取り組みクリエイティブが変わる！マルチプラットフォームに対応するための最先端の取り組み
クリエイティブが変わる！マルチプラットフォームに対応するための最先端の取り組み
Teiichi Ota
 
IT業界におけるキャラクターの栄枯盛衰
IT業界におけるキャラクターの栄枯盛衰IT業界におけるキャラクターの栄枯盛衰
IT業界におけるキャラクターの栄枯盛衰
Teiichi Ota
 
「トリセツ」の枠を超えはじめたTCの進化
「トリセツ」の枠を超えはじめたTCの進化「トリセツ」の枠を超えはじめたTCの進化
「トリセツ」の枠を超えはじめたTCの進化
Teiichi Ota
 
100920 test
100920 test100920 test
100920 test
Teiichi Ota
 
昨今のデジタルマーケティング市場とその展望：2018夏
昨今のデジタルマーケティング市場とその展望：2018夏昨今のデジタルマーケティング市場とその展望：2018夏
昨今のデジタルマーケティング市場とその展望：2018夏
Teiichi Ota
 
ADC MEETUP ROUND 03 Adobe new tools
ADC MEETUP ROUND 03 Adobe new toolsADC MEETUP ROUND 03 Adobe new tools
ADC MEETUP ROUND 03 Adobe new tools
Teiichi Ota
 
ポストPC時代をにらんだRIA中長期戦略
ポストPC時代をにらんだRIA中長期戦略ポストPC時代をにらんだRIA中長期戦略
ポストPC時代をにらんだRIA中長期戦略
Teiichi Ota
 
110803a smart tv_adobe
110803a smart tv_adobe110803a smart tv_adobe
110803a smart tv_adobe
Teiichi Ota
 
110915 ria effectiveness
110915 ria effectiveness110915 ria effectiveness
110915 ria effectiveness
Teiichi Ota
 
110928 otf ttf_test
110928 otf ttf_test110928 otf ttf_test
110928 otf ttf_test
Teiichi Ota
 
「ポストPC」時代におけるFlash Videoの優位性
「ポストPC」時代におけるFlash Videoの優位性「ポストPC」時代におけるFlash Videoの優位性
「ポストPC」時代におけるFlash Videoの優位性
Teiichi Ota
 
スマートフォン・ビジネスの「金脈」を探る
スマートフォン・ビジネスの「金脈」を探るスマートフォン・ビジネスの「金脈」を探る
スマートフォン・ビジネスの「金脈」を探る
Teiichi Ota
 
Back to the Basics, and Beyond - Adobe's Take
Back to the Basics, and Beyond - Adobe's TakeBack to the Basics, and Beyond - Adobe's Take
Back to the Basics, and Beyond - Adobe's Take
Teiichi Ota
 
Adobe Dreamweaver CS5.5 (仮)
Adobe Dreamweaver CS5.5 (仮)Adobe Dreamweaver CS5.5 (仮)
Adobe Dreamweaver CS5.5 (仮)
Teiichi Ota
 
クロスプラットフォーム戦略の優位性
クロスプラットフォーム戦略の優位性クロスプラットフォーム戦略の優位性
クロスプラットフォーム戦略の優位性
Teiichi Ota
 
Adobe RIA製品のご紹介 Flash PlatformとFlexフレームワーク
Adobe RIA製品のご紹介 Flash PlatformとFlexフレームワークAdobe RIA製品のご紹介 Flash PlatformとFlexフレームワーク
Adobe RIA製品のご紹介 Flash PlatformとFlexフレームワーク
Teiichi Ota
 
クリエイティブが変わる！マルチプラットフォームに対応するための最先端の取り組み
クリエイティブが変わる！マルチプラットフォームに対応するための最先端の取り組みクリエイティブが変わる！マルチプラットフォームに対応するための最先端の取り組み
クリエイティブが変わる！マルチプラットフォームに対応するための最先端の取り組み
Teiichi Ota
 
IT業界におけるキャラクターの栄枯盛衰
IT業界におけるキャラクターの栄枯盛衰IT業界におけるキャラクターの栄枯盛衰
IT業界におけるキャラクターの栄枯盛衰
Teiichi Ota
 
「トリセツ」の枠を超えはじめたTCの進化
「トリセツ」の枠を超えはじめたTCの進化「トリセツ」の枠を超えはじめたTCの進化
「トリセツ」の枠を超えはじめたTCの進化
Teiichi Ota
 
100920 test
100920 test100920 test
100920 test
Teiichi Ota
 
Ad

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
  • 3. 「HTML5」どうやってつくる？ © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  • 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
  • 22. PhoneGapのデバイス機能アクセス © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 22 Source: http://en.wikipedia.org/wiki/PhoneGap
  • 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
  • 30. CSSプロパティ抽出 © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 30
  • 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
  • 40. Webだけでなく電子書籍にも対応するEdge © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 40
  • 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 *個人版 年間プラン/月 (標準価格)
  • 52. 「HTML5」どう使う？ © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  • 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. 乱暴に言うと、アンプラグドは２種類 にょろにょろ〜ん！ 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
  • 66. スマートフォンが年間出荷台数で初めてPC・タブレット合計を抜く © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 66 Source: http://www.asahi.com/digital/cnet/CNT201202060023.html
  • 67. 年間出荷台数シェア≠インストールベース 大事なのは こっち！ © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 67
  • 68. インストールベースのシェア≒インターネットアクセス比率 © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 68
  • 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.