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

© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Adobe Creative SuiteではじまるHTML5の民主化太田禎一 | アドビシステムズ株式会社デジタルメディアビジネス開発部

R社勉強会 | 2012.06.11


おまえダレ？

デジタルメディア・ゲーム関連のビジネス開発を担当しています

放送・出版・デジタルメディアを中心に、いろいろなお客様に最新Adobeテクノロジーや、そのよさをお伝えする仕事

イベント・カンファレンスでお話したりも、ときどきします

2


「HTML5」どうやってつくる？


「HTML5時代」以前のWeb開発

4

Audio/Video

グラフィック

UI

アニメーション

アプリケーション

Web Storage Web Sockets

File API Offline Web Apps

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

どこでも同じように表示され、動作する♡


「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だけじゃなくていろんな技術の組み合わせ♡


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

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

CSS3って HTML5？

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


Bad News…

「HTML5」ってバラバラな技術が混在している

だけでなく、ツールも未成熟？だと！？

7


Good News!

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

8


具体的には？ ☞ Adobe & HTML

9 Link: http://html.adobe.com/

http://html.adobe.com/


AdobeはHTML5 & Flashでデジタルメディアをトータルにカバー

10

ブランディング

&リッチ広告

HTML デザイン

&エフェクト

インタラクティブコンテンツ

デジタル書籍

カジュアルゲーム

ハイエンド 3Dゲーム

プレミアムビデオ

フレームワーク

サーバー & サービス

ツール

映像配信 Web フォント

JavaScript ライブラリ

モバイルアプリ

Flash Playerプラグイン＆AIRアプリ

HTML5 （Web標準＆ブラウザ）

HTML Flash/Adobe AIR 現在

HTML Flash/Adobe AIR 数年後

http://bp2.forddirect.fordvehicles.com/2011-Ford-Taurus


というわけで、いますぐ使える Adobeの「HTML5」対応ツールを

いくつかご紹介します。

11


typekit (Webフォント)

12


typekit

13 Link: https://typekit.com/

https://typekit.com/


typekit利用例：The New Yorker

14 Link: http://www.newyorker.com/

http://www.newyorker.com/


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は現在未対応)

http://www.google.com/webfonts/

http://www.w3.org/TR/css3-webfonts/

http://decomoji.jp/

http://webfonts.fonts.com/

http://fontdeck.com/

http://typesquare.com/

http://amanaimages.com/font/web/

http://webfont.fontplus.jp/


typekit民主化ポイント

きちんと権利クリアされた高品質なフォントを安心して使える。

使い方はコードをコピペして埋め込むだけ。フォント形式 (EOTとか) を意識せず旧いブラウザ (IE) にも対応できる。

16


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

17


Apache Cordova/PhoneGap

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

Apache Cordova ＝オープンソースPJ

PhoneGap ＝Adobeのディストリ

ビューション

http://incubator.apache.org/cordova/

http://phonegap.com/


WikipediaアプリはPhoneGap製

19 Link: http://blog.wikimedia.org/2012/04/05/new-wikipedia-app-for-ios-and-an-update-for-our-android-app/

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

20 Link: http://www.phonegap.com/

ソリューション

ファイル形式

対応プラットフォーム

http://www.phonegap.com/


iOS/AndroidにおけるPhoneGapアプリの構造

21

iPhone/iPad/Android (デバイス機能)

iOS/Android (OS)

ネイティブなアプリケーションラッパー (PhoneGap)

内蔵ブラウザ (WebKit)

HTML/CSS

JavaScript

JavaScriptからデバイスAPI

にアクセス可能

HTML/JSはシステム側の

WebKitが実行

■ ネイティブ ■ Web標準 ■ ミドルウェア


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

22 Source: http://en.wikipedia.org/wiki/PhoneGap

http://en.wikipedia.org/wiki/PhoneGap


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/

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








http://www.sencha.com/products/touch/

http://www.rhomobile.com/

http://appspresso.com/


PhoneGap民主化ポイント

HTML/CSS/JSだけでモバイルアプリ開発。膨大なJSライブラリがそのまま使える。

PhoneGap BuildならマルチPF対応が容易。

24


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

25


Dreamweaver CS6

デザイナー向けWebサイト・アプリ開発ツール jQuery等のコードヒント

作業環境内で動作確認 (ライブビュー＝WebKit)

可変グリッドレイアウト対応

26

入ってます！


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/

http://aptana.com/

http://macromates.com/

http://www.jetbrains.com/webstorm/



http://www.microsoft.com/japan/msdn/vstudio/

http://www.microsoft.com/japan/msdn/vstudio/


Dreamweaver民主化ポイント

つねに結果 (ライブビュー) を確認しながら作業でき、HTML/CSS/jQuery

うろ覚えでもコードを補完してくれる。アダプティブデザインWebサイトも

モバイルWebアプリもこれひとつで完結。

28


Fireworks CS6 (CSS3デザイン)

29


CSSプロパティ抽出

30


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

31

CSS3 Generator http://www.css3.me/

CSS3 Button Generator http://css3button.net/

http://www.css3.me/

http://css3button.net/


Fireworks民主化ポイント

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

作成できる。

32


Adobe Muse (HTML5 Webページ制作)

33


Adobe Muse

HTML5ページ作成ツール DTPデザインのメタファー

コーディング不要 (Dreamweaverでさえも苦手な人向け)

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

http://muse.adobe.com/


Muse民主化ポイント

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

だけで追加できちゃう。

35


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

36


Adobe Edge

37


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

38

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

実際に表示される div領域


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

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

Edgeなら位置・サイズ・色・形状のアニ

メーションをコードを書かずに簡単に実現できます。

タイミングの微調整をし、Web やアプリとして複数プラット

フォームに配布するのも、他のゲーム開発ワークフローに

比べてほんの僅かな時間しかかかりません。

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


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

40


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

http://www.adobe.com/devnet-apps/edge/api/current/EdgeAPI.0.1.6.html


Edgeの代替ツール

42

Tumult Hype (DOMアニメ) http://tumultco.com/hype/

Sencha Animator (DOMアニメ) http://extjs.co.jp/products/animator/

Radi (HTML5 Canvas) http://radiapp.com/

http://tumultco.com/hype/

http://extjs.co.jp/products/animator/

http://radiapp.com/


Edge民主化ポイント

HTML/CSS/JSの知識がゼロでも FlashのようなHTMLアニメーション

と簡単なインタラクションを容易に作成できる。しかも別ツールを使わずにファイルサイズを最小化。 IE8等非対応環境のための代替画像設定もカンタン。

43


Flash Professional

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

44


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

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

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

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

http://createjs.com/


Flash Pro民主化ポイント

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

46


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確認・編集)

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


Shadow民主化ポイント

開発機と (何台もの) 実機を行ったり来たりしないでもサイトの確認ができる。

しかも実行中のコードを手元で確認できたりして。

49


Adobeの総合力

50

ブランディング

&リッチ広告

HTML デザイン

&エフェクト

インタラクティブコンテンツ

デジタル書籍

カジュアルゲーム

ハイエンド 3Dゲーム

プレミアムビデオ

フレームワーク

サーバー & サービス

ツール

映像配信 Web フォント

JavaScript ライブラリ

モバイルアプリ

HTML5 （Web標準＆ブラウザ）

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

http://bp2.forddirect.fordvehicles.com/2011-Ford-Taurus


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

51

+

¥5,000/mo.*

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

http://www.adobe.com/jp/products/creativecloud.html


「HTML5」どう使う？


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

53


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/

http://www.adobe.com/products/flashplatformruntimes/statistics.displayTab3.html

http://riastats.com/


「HTML5」の定義

世の中における期待値 (アイパッドで動くとか)を踏まえ

HTML5＝脱Flash という意味だと仮定して

もっとわかりやすく「アンプラグド」と呼んでみる。

55

にょろ〜ん！


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

表示エフェクト・スライドショー

アニメーション・

モーションGFX

RIA (業務アプリケー

ション)

ゲーム・高度なインタラクティブコンテンツ

オンラインビデオ

56

http://www.pentax.jp/japan/products/k-01/

http://www.enfantsterrible.com/

http://dev.sencha.com/deploy/ext-4.0.0/examples/desktop/desktop.html

http://www.cuttherope.ie/

http://vimeo.com/18667898


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

HTML5 と

jQuery

57

にょろにょろ〜ん！


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

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

jQuery IE6/7/8対応案件

58


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

59

IE6/7/8 38%

Source: http://marketshare.hitslink.com/browser-market-share.aspx?qprid=2&qpcustomd=0

http://marketshare.hitslink.com/browser-market-share.aspx?qprid=2&qpcustomd=0


直近のブラウザバージョン別インターネット利用シェア (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%

http://gs.statcounter.com/


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

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%



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

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

この推移を見てると IE8が5%以下に

なるのにあと2年近くかかりそう



ポイント

一般ユーザー向けの

PC Webサイトで本当に IE6/7/8を捨てられる＝「HTML5」だけで

すべて済むようになるまではだいたいあと2年の辛抱。

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

63


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

https://www.wab.ne.jp/wab_sites/contents/1449


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

でしょ？

65


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

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

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


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

67

大事なのはこっち！


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

68


スマホ・タブレット 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


http://bit.ly/NgPmju


スマホ・タブレット 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


http://reut.rs/Kf328x

http://bit.ly/JVEiYe


スマホ・タブレット 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


http://bit.ly/KOdbh8


ポイント

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

インターネット全体の

ユーザー動向と、個々のサイトでのアクセス解析 (GA/SC) 結果を見ながら

効果が高いところに選択的に「HTML5」を導入するべき。

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

72


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

73


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

デバイススマホ・タブレット

PC IE6/7/8 PC モダンブラウザ

テクノロジー HTML5 Canvas (EaselJS) やれる度 ○ × ◎ 顧客ハッピー度

74



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



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


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



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

75



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



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


ポイント

IE6/7/8対応が必須な場合

思い切ってサイト全体で「できること」をjQueryレベルに

ガマンすることも選択肢のひとつ。

IE6/7/8を切って「HTML5」で作ってもスマホ・タブレットで見られないとか

特定ブラウザで見ろ的なサイトは Flash以上に「害悪」。

76


まとめ


「HTML5」は使い所を熟慮し、

クライアントと握ったうえで使う。

登場し始めた「HTML5」

民主化ツールを知り、賢く使う。

78

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

Technology

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