スマートフォンにおけるHTML5対応状況 (1)

今回はmixiアプリ for Touch限定ではなく、スマートフォンにおけるHTML5の対応状況について。


まず、基本的にiPhoneAndroid共に標準のブラウザではWebkitを描画エンジンとして用いており、共通する仕様が非常に多いです。
それらはSafariGoogle Chromeを使ってご存じの方も多いかと。

webkitと言えば常に新しい規格を作り標準規格として採用された実績を持つブラウザ、HTML5の対応にも期待が持てます。基本的にhtml5の技術は進んでバリバリ使ってOKと考えましょ。
ただ、XPERIAはAndroid1.6ということで、現存するAndroid端末の中でもかなり古いため、webkitのバージョンが古いのでしょう。ちょっと心配な面もあります。

また、HTML5と言っても実はかなり広義にわたる意味を持っており、今までのXHTMLと違いCSSJavaScriptなどの技術も含めたもののようですね。そのあたりはググッてください

ここでは簡略してHTML5

について簡単にまとめて行きます。


まずざっくりとした対応状況


  iPhoneiOS AndroidXperia
@font-face  
Canvas
Canvas Text
HTML5 Audio  
HTML5 Video  
rgba()
hsla()
border-image:
border-radius:
box-shadow:
opacity:
Multiple backgrounds
CSS Animations
CSS Columns
CSS Gradients
CSS Reflections
CSS 2D Transforms
CSS 3D Transforms  
CSS Transitions
Geolocation API  
localStorage  
sessionStorage  
SVG  
SMIL  
SVG Clipping  
Drag and Drop
hashchange  
X-window Messaging
History Management  
applicationCache  
Web Sockets    
Web Workers    
Web SQL Database  
IndexedDB    
Input Types†    
Input Attributes‡    

こっからいくつかクローズアップして見ていきます。

@font-face

最近話題になったWeb fontです。いわゆるWebFontsで、サーバー上に置いたフォントファイルをダウンロードすることにより、ユーザー環境に関わらず、共通のフォントを表示できます。
Google font directoryデコもじなんかのサービスが始まって注目を集めましたが、残念がらiPhoneは非対応。

rgba()/border-image:/border-radius:/box-shadow:/Multiple backgrounds/CSS Gradients

日常的に使うレベルの便利CSS3。長くなるので別エントリーで。

Canvas

図形やグラフなど、ベクトル描写ができる技術。JSで記述。iPhoneAndroid両対応なので、ベクトル描写をする場合はCanvasに限定される。

HTML5 Video

Flashなどを利用せずにVideo素材を再生する。動画の制御はJSで可能だが、XPERIAは非対応。また、Androidでは将来的にFlashへの対応を発表しているが、XPERIAは未定。
そうなると動画をiPhoneXPERIA双方で再生るる方法はYouTubeだけ。

SVG

Canvasと同様ベクトル描画が可能。Canvasと異なるのはJSではなく、画像と同様に一ファイルでの書き出しが可能、またAdobe Illustratorでの書き出しが可能で、非常に現状のデータとの親和性が高い。しかし残念ながらXPERIA非対応。。


更に深く後ほどのエントリーで掘ります。
てなわけでこのエントリーはここまで。