「職人技」では未来が見えない！みんなが使えるAdobeのHTML5関連ツールとソリューション。

Eビジネス推進連合会 HTML5ワーキンググループ (第3回) | 2012.03.19
「職人技」では未来が見えない！みんなが使えるAdobeの
HTML5関連ツールとソリューション。
太田禎一 | アドビシステムズ株式会社テクニカルエバンジェリスト

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

 マルチデバイス対応のWebサイトやアプリの実装技術としてHTML5とそ
の関連技術は欠かせないものとなっていますが、厳然と存在するブラウ
ザ実装の差異や開発ツールの不在といった理由により、往々にしてデキ
る個人の「職人技」に頼る場合が多いようです。そんななかいくつか登
場しはじめた、HTML5開発技術を「民主化」するツールやソリューショ
ンをご紹介します。

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 2

おまえダレ？

 テクニカルエバンジェリストです。正式な肩書きなのですごめんなさい
 放送・出版・デジタルメディアを中心に、いろいろなお客様に最新
Adobeテクノロジーや、そのよさをお伝えする仕事
 直接お伺いしたり、イベント・カンファレンスでお話したり


DIGITAL MARKETING

DIGITAL MEDIA


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

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

現在 HTML Flash/Adobe AIR

数年後 HTML Flash/Adobe AIR

サーバー
& サービス

ツール

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

HTML5 Flash Playerプラグイン
（Web標準＆ブラウザ）＆AIRアプリ

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

26%
22.7%
11.97%
11.27%
4.66%
4.16%
IE6/7/8
3.88% 32.28%
2.58%
2.12%

Source: http://gs.statcounter.com/#browser_version-JP-monthly-201202-201203-bar

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

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

Source: http://gs.statcounter.com/#browser_version-JP-daily-20080701-20120319

PCでのHTML5は
注意が必要（Polyfillsとかね）。


html5please.us

要素・
プロパティごとに
オススメのPolyfillsも
教えてくれます

Link: http://html5please.us/

ただし、モバイルを考えれば
HTML5にはいますぐとりかかるべし！


caniuse.com

http://caniuse.com/#agents=desktop
http://caniuse.com/#agents=mobile

モバイルだけだと
HTML5/CSS3
実装が進んでるのが
確認できる

Link: http://caniuse.com/#agents=mobile

とはいえ…市場の成長とともにさらに深刻化する分断化問題

OS
画面サイズ
CPU

アプリストア
マウス/タッチブラウザ
画面解像度

ブラウザ
バージョン


で…「HTML5」って
どーやってつくるの？


「HTML5」時代のコンテンツ開発

ブラウザ内蔵の機能
のみですべてを実現

Audio/Video グラフィック

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


「HTML5」時代のコンテンツ開発

ブラウザ内蔵の機能
のみですべてを実現

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


現時点でHTML＋CSS＋JavaScript開発ワークフローに使える
“HTML5”ツールたち

Flash (by Adobe) HTML5 (by Adobe) HTML5 (by 3rd Party)

画像作成 Photoshop, Illustrator Photoshop, Illustrator Any tools

画像最適化 Photoshop, Fireworks Photoshop, Fireworks Any tools

アニメーション Flash Pro Adobe Edge Tumult Hype/Sencha
Animator/jQuery/Eas
el.js/etc.,
IDE Flash Pro/Flash Builder Dreamweaver WebStorm/TextMate/
Aptana/etc.,

UIコンポーネント Flex Components None jQuery UI/etc.,

アプリケーション Flex None jQuery/Dojo, Ext JS,
フレームワーク SproutCore,
Backbone.js/etc.,
動作テスト Flash Builder Adobe Shadow Chrome Dev Tools,
Firebug, Weinre


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


だからこそツールの選択には
将来の開発体制も含めた
総合力が重要。


Adobeがきっちりカバーして
いままでと同様
「職人技」を「民主化」いたします。


ADOBE


DOUBLE DOWN

HTML5に賭け金倍額！

Photo: O Palsson http://www.flickr.com/people/opalsson/

Adobeの総合力

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

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

ツール

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

HTML5
（Web標準＆ブラウザ）

typekit解説


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


PhoneGap

Link: http://phonegap.com/

PhoneGapによるアプリのクロスプラットフォーム対応

HTML (& Dreamweaver) & PhoneGap ソリューション
 Web技術 (HTML/CSS/JavaScript) だけでクロスプ
ラットフォームアプリケーションを開発
 アドレス帳やカメラ等のネイティブ機能への直接
コールも可能
 クラウド側でマルチプラットフォーム対応コンパ
イルが可能な”PhoneGap Build”も
ファイル形式

対応プラットフォーム

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

PhoneGap

Link: http://www.youtube.com/watch?v=E0UV5i5jY50

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

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

PhoneGap Build

Link: http://build.phonegap.com/

iOS/AndroidにおけるPhoneGap＆Adobe AIRアプリの構造比較

■ Obj-C/Native
■ Web標準
■ Flash/Flex
■ Middleware

Native Wrapper (PhoneGap) Adobe AIR Runtime
compiled as native code
iOS built-in (Captive Runtime)
WebKit

Native API ActionScript 3 (Optional)
JavaScript HTML/CSS Access from (Flex Framework) Native
interpreted
JavaScript compiled down Extension
by WebKit
to native code written in
JavaScript (not interpreted) C++/Obj-C
Native API
Access via
Native
Extension

iOS/Android iOS/Android

iPhone/iPad/Android Hardware iPhone/iPad/Android Hardware


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


ツール：Adobe Dreamweaver CS5.5

 デザイナー向け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アプリも
ハイブリッドアプリも
このツールひとつで完結。


Adobe Muse解説


Adobe Muse

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

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

Muse民主化ポイント

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


Adobe Edge解説


Adobe Edge


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

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

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

Adobe Edge Runtime API ＝ JavaScript連携が容易

jQueryのセレクタを利用

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

Link: http://labs.adobe.com/technologies/edge/resources/jsapi.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等非対応環境のための代替画像設定もカンタン。


Adobe Shadow解説


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

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

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

Shadow民主化ポイント

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


Touch Apps解説


Adobe Touch Apps

Link: http://www.adobe.com/products/touchapps.html

Link: http://www.youtube.com/watch?v=nlZTc8jre6E

Creative Cloudのビジョン

a a

Creative Cloud

クライアン
アイデア出デザイン
ト制作配信計測・解析
し検討
打ち合わせ

Adobe Debut Adobe Ideas Adobe Collage PS Touch

Adobe Proto Adobe Kuler

Adobe Debut

HTML5ツールを含めたAdobeの総合力
＋制作ワークフローの進化 (タッチ)
＝Adobe Creative Cloud


で…Flashは？


Flashテクノロジーの今後10年を見据えた進化

PC
ブラウザ

スマートフォン
ブラウザ

スマートフォン
アプリ


Adobe AIRによるアプリのクロスプラットフォーム対応

Adobe Flash Professional/Flash Builder & ソリューション
Adobe AIR SDK
 Flash/Flex (AS3) 技術でクロスプラットフォーム
なアプリを開発。ネイティブ機能連携 (ANE) も
 Woven Interactive社の場合
 ネイティブと遜色のない描画スピード (40fps)
 ネイティブ開発に比べ45%のコストカット
 メンテやサポートを考慮すればトータル50%〜60%のコファイル形式
スト削減

Mac

Android 対応プラットフォーム

Link: http://www.flash-3d.net/2011/03/air-2-6-game-development/

Stage 3D on Mobileデモ (ビデオ)

Link: http://www.youtube.com/watch?v=c1w_5ghL91o

クロスプラットフォームアプリ開発ソリューションそれぞれの特徴

特徴適した用途タイプ
Adobe AIR Flash開発資産と経汎用的だがビジュクロスコンパイル
験をそのまま活かアル系が得意型
せる (2D・3Dゲーム等)
Corona 優れたアニメー汎用的だがビジュ
ション性能アル系が得意 (2D
ゲーム等)
Titanium ネイティブUIパー汎用的
ツとAPIを活用でき
る
Unity ゲーム開発に特化高度な3Dゲーム

PhoneGap HTML＋CSS＋汎用的 HTML5ハイブリッ
JavaScriptだけで開ド型
発可能


【参考】Mobile Performance Tests: HTML5 vs. AIR

FPS for 350 sprites
60%
54% Flash (Adobe AIR)
はモバイルアプリ
50% になってもHTML5
44% 43% より安定して高速

40% 36%
31%
30% Adobe AIR
Canvas 2D
20%

10%
3%
0%
iPhone 4S iPad 2 XOOM

Source: http://esdot.ca/site/2011/mobile-performance-tests-html5-vs-air

今後のサービス・コンテンツビジネス成功のカギ

インタラクティブ
アーティスト・グラフィック
デザイナーアニメーターデザイナー

C++/Java イラスト
レーター

Director Flash ゲーム
(Shockwave) クリエイター
(Timeline & ActionScript)
Flashの
膨大なクリエイ
ティブプールを HTML5や
どれだけビジネスにスマートフォン
活かせるかどうかがアプリ開発を含む
チャレンジあらたなビジネス
チャンス


Flashアニメーションのマルチアウトプット (次期CSから)

CanvasベースのJSアニメーション
フレームワーク”easelJS”

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

Link: http://easeljs.com/

CreateJS

Link: http://createjs.com/

まとめ

まだまだ発表できない
開発中のHTML5ツールやソリューションが
今年以降続々登場します。ご期待ください。


「職人技」では未来が見えない！みんなが使えるAdobeのHTML5関連ツールとソリューション。

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Destacado

Destacado (20)

Similar a 「職人技」では未来が見えない！みんなが使えるAdobeのHTML5関連ツールとソリューション。

Similar a 「職人技」では未来が見えない！みんなが使えるAdobeのHTML5関連ツールとソリューション。 (20)

Más de Teiichi Ota

Más de Teiichi Ota (15)

Último

Último (9)

「職人技」では未来が見えない！みんなが使えるAdobeのHTML5関連ツールとソリューション。