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

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」どうやってつくる？


「HTML5時代」以前のWeb開発

高度なことは
プラグインで

Audio/Video どこでも同じようにグラフィック
表示され、動作する♡

アプリケーション

Web Storage
Web Sockets
File API
Offline Web Apps

アニメーション UI


「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


1日でマスターできるHTML5まとめ！

CSS3って
HTML5？

Link: http://matome.naver.jp/odai/2130703450443574201

Bad News…

「HTML5」って
バラバラな技術が混在している
だけでなく、ツールも
未成熟？だと！？


Good News!

だいじょうぶ。
「HTML5」の民主化はじまってます。


具体的には？ ☞ Adobe & HTML

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アプリ

というわけで、いますぐ使える
Adobeの「HTML5」対応ツールを
いくつかご紹介します。


typekit
(Webフォント)


typekit

Link: https://typekit.com/

typekit利用例：The New Yorker

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/

typekit民主化ポイント

きちんと権利クリアされた高品質な
フォントを安心して使える。
使い方はコードをコピペして埋め込むだけ。
フォント形式 (EOTとか) を意識せず
旧いブラウザ (IE) にも対応できる。


PhoneGap
(HTML5ハイブリッドアプリ開発)


Apache Cordova/PhoneGap
Apache Cordova
＝オープンソースPJ

PhoneGap
＝Adobeのディストリ
ビューション

Link: http://incubator.apache.org/cordova/ http://phonegap.com/

WikipediaアプリはPhoneGap製

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”も
ファイル形式

対応プラットフォーム

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 (デバイス機能)


PhoneGapのデバイス機能アクセス

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/


PhoneGap民主化ポイント

HTML/CSS/JSだけでモバイルアプリ開発。
膨大なJSライブラリがそのまま使える。
PhoneGap BuildならマルチPF対応が容易。


Dreamweaver CS6
(HTML5/CSS3コーディング)


Dreamweaver CS6

 デザイナー向けWebサイト・アプリ開発ツール
 jQuery等のコードヒント
 作業環境内で動作確認 (ライブビュー＝WebKit)
 可変グリッドレイアウト対応

入ってます！


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/


Dreamweaver民主化ポイント

つねに結果 (ライブビュー) を確認
しながら作業でき、HTML/CSS/jQuery
うろ覚えでもコードを補完してくれる。
アダプティブデザインWebサイトも
モバイルWebアプリもこれひとつで完結。


Fireworks CS6
(CSS3デザイン)


CSSプロパティ抽出


Fireworksの代替ツール (ごく一部)

CSS3 Button Generator CSS3 Generator
http://css3button.net/ http://www.css3.me/


Fireworks民主化ポイント

CSSを直接書かなくても
思い通りの形状やグラデーションが
作成できる。


Adobe Muse
(HTML5 Webページ制作)


Adobe Muse

 HTML5ページ作成ツール
 DTPデザインのメタファー
 コーディング不要 (Dreamweaverでさえも苦手な人向け)

Link: http://muse.adobe.com/

Muse民主化ポイント

HTML/CSSの知識がゼロでも
DTPツールのノリでWebページ制作。
スライドショーもドラッグ&ドロップ
だけで追加できちゃう。


Adobe Edge
(CSS3アニメーション制作)


Adobe Edge


WebページへのEdgeアニメーション組み込み

Edgeランタイム
スクリプトの参照

実際に表示される
div領域


モバイルアプリへのEdgeアニメーション組み込み例

Edgeなら位置・
サイズ・色・形状のアニ
メーションをコードを書かずに
簡単に実現できます。
タイミングの微調整をし、Web
やアプリとして複数プラット
フォームに配布するのも、他の
ゲーム開発ワークフローに
比べてほんの僅かな時間
しかかかりません。

Link: Adobe Success Story http://www.adobe.com/cfusion/showcase/index.cfm?event=casestudydetail&casestudyid=1694931

Webだけでなく電子書籍にも対応するEdge


Adobe Edge Runtime API ＝ JavaScript連携が容易

jQueryのセレクタを利用

Adobe独自のアニメーション
エンジン (CSS3＋JavaScript)

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/


Edge民主化ポイント

HTML/CSS/JSの知識がゼロでも
FlashのようなHTMLアニメーション
と簡単なインタラクションを容易に作成できる。
しかも別ツールを使わずにファイルサイズを最小化。
IE8等非対応環境のための代替画像設定もカンタン。


Flash Professional

(HTML5 Canvasアニメーション制作)


Flash Professional CS6：アニメーションのマルチアウトプット

[スプライトシートを作成] コマンド

HTML5 CanvasベースのJSアニメーション
フレームワーク”easelJS” (CreateJSの一部)

Link: http://createjs.com/#!/EaselJS

Flash Pro民主化ポイント

従来のアニメーション制作ワークフロー
そのままにHTMLアニメーションを作成できる。


Adobe Shadow

(マルチスクリーンHTML動作テスト)


リモート
インスペクション
(DOM確認・編集)

モバイルデバイスに
直接URLを送信し確認
(Bonjour接続)

Link: http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow/

Shadow民主化ポイント

開発機と (何台もの) 実機を行ったり
来たりしないでもサイトの確認ができる。
しかも実行中のコードを手元で確認
できたりして。


Adobeの総合力

HTML ブランインタラクデジタルカジュアルプレミアムハイエンド
デザインディングティブコン書籍ゲームビデオ 3Dゲーム
&エフェクト &リッチ広告テンツ

HTML
今後続々ツール・
ソリューションを
サーバー出していきます。
& サービスこれが総合力！

ツール

フレーム
ワーク
映像配信 Web JavaScript モバイル
フォントライブラリアプリ

HTML5
（Web標準＆ブラウザ）

Adobeの総合力＝Adobe Creative Suite 6 + Adobe Creative Cloud

¥5,000/mo.* 

+

Link: http://www.adobe.com/jp/products/creativecloud.html *個人版年間プラン/月 (標準価格)

「HTML5」どう使う？


顧客「うちのサイトFlash使わないでFlashぽくやってよ。」
Web屋「はぁ。」
顧客「ほらアイパッドで見られるようにさ。」
Web屋「それHTML5なら楽勝っすよ！」
顧客「もちろんIEでも動くよね。」
Web屋「え。」
顧客「え。」


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
Source: 1http://www.adobe.com/products/flashplatformruntimes/statistics.displayTab3.html 2http://riastats.com/

「HTML5」の定義

にょろ〜ん！

世の中における期待値
(アイパッドで動くとか)を踏まえ
HTML5＝脱Flash
という意味だと仮定して
もっとわかりやすく
「アンプラグド」と呼んでみる。


まとめ：アンプラグド vs. Flash勢力図 (2012年5月現在)

アニメーゲーム・高
表示エフェ RIA (業務
ション・度なインタオンライン
クト・スラアプリケー
モーションラクティブビデオ
イドショーション)
GFX コンテンツ


乱暴に言うと、アンプラグドは２種類

にょろにょろ〜ん！

HTML5
と
jQuery


乱暴に言うと、使い分けはかんたん

HTML5
IE6/7/8切り捨て案件

jQuery
IE6/7/8対応案件


直近のブラウザバージョン別インターネット利用シェア (WW)

IE6/7/8
38%

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%

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%

Source: http://gs.statcounter.com/#browser_version_partially_combined-JP-monthly-201203-201204-bar

ブラウザバージョン別インターネット利用シェア推移 (国内)

この推移を見てると
IE8が5%以下に
なるのにあと2年近く
かかりそう

Source: http://gs.statcounter.com/#browser_version_partially_combined-JP-daily-20080701-20120528

ポイント

一般ユーザー向けの
PC Webサイトで本当に
IE6/7/8を捨てられる＝「HTML5」だけで
すべて済むようになるまでは
だいたいあと2年の辛抱。

いっぽう企業内に目を向けると…


企業内における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

Source: Web広告研究会による第4回企業内Web閲覧環境調査 https://www.wab.ne.jp/wab_sites/contents/1449

でもインターネットアクセスの
主流はいまやスマホ・タブレット
でしょ？


スマートフォンが年間出荷台数で初めてPC・タブレット合計を抜く

Source: http://www.asahi.com/digital/cnet/CNT201202060023.html

年間出荷台数シェア≠インストールベース

大事なのは
こっち！


インストールベースのシェア≒インターネットアクセス比率


スマホ・タブレット vs. PCのインターネット利用シェア (国内)

人口1.2億人に対する
普及率1

スマホ 9.7%
パソコン 83.4%

うち48% 6.41%
Android

うち48%
iOS

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
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

Source: http://gs.statcounter.com/#mobile_vs_desktop-IN-monthly-200812-201205 1 http://bit.ly/KOdbh8

ポイント

国内のインターネットアクセス
主流はまだまだPCであり続ける。

インターネット全体の
ユーザー動向と、個々のサイトでの
アクセス解析 (GA/SC) 結果を見ながら
効果が高いところに選択的に「HTML5」を導入するべき。

「こっち立てればあっちが立たず」状態はしばらく続く


じゃぁ手っ取り早く
どうすればいいか教えれ？


高度にインタラクティブなサイト (ゲーム要素など)

デバイススマホ・タブレッ PC IE6/7/8 PC モダンブラウザ
ト
テクノロジー HTML5 Canvas (EaselJS)
やれる度 ○ × ◎
顧客ハッピー度   

ト
テクノロジー Flash
やれる度 × ◎ ◎
顧客ハッピー度   

ト
テクノロジー HTML5 Canvas Flash
やれる度 ○ ◎ ◎
顧客ハッピー度   

シンプルなアニメーションやスライドショー

ト
テクノロジー jQuery
やれる度 ◎ ◎ ◎
顧客ハッピー度   

ト
テクノロジー CSS3 (Adobe Edge)
やれる度 ◎ × ◎
顧客ハッピー度   

ト
テクノロジー Flash
やれる度 × ◎ ◎
顧客ハッピー度   

ポイント

IE6/7/8対応が必須な場合
思い切ってサイト全体で
「できること」をjQueryレベルに
ガマンすることも選択肢のひとつ。

IE6/7/8を切って「HTML5」で作っても
スマホ・タブレットで見られないとか
特定ブラウザで見ろ的なサイトは
Flash以上に「害悪」。


まとめ


「HTML5」は
使い所を熟慮し、
クライアントと握ったうえで使う。

登場し始めた「HTML5」
民主化ツールを知り、賢く使う。


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

Recommandé

Contenu connexe

En vedette

En vedette (11)

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

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

Plus de Teiichi Ota

Plus de Teiichi Ota (16)

Dernier

Dernier (7)

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