スマートフォンにおけるHTML5対応状況 (1)
今回はmixiアプリ for Touch限定ではなく、スマートフォンにおけるHTML5の対応状況について。
まず、基本的にiPhone・Android共に標準のブラウザではWebkitを描画エンジンとして用いており、共通する仕様が非常に多いです。
それらはSafari・Google Chromeを使ってご存じの方も多いかと。
webkitと言えば常に新しい規格を作り標準規格として採用された実績を持つブラウザ、HTML5の対応にも期待が持てます。基本的にhtml5の技術は進んでバリバリ使ってOKと考えましょ。
ただ、XPERIAはAndroid1.6ということで、現存するAndroid端末の中でもかなり古いため、webkitのバージョンが古いのでしょう。ちょっと心配な面もあります。
また、HTML5と言っても実はかなり広義にわたる意味を持っており、今までのXHTMLと違いCSSやJavaScriptなどの技術も含めたもののようですね。そのあたりはググッてください。
ここでは簡略してHTML5の
- html
- css3
- JavaScript
について簡単にまとめて行きます。
まずざっくりとした対応状況
iPhone(iOS) | Android(Xperia) | |
---|---|---|
@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。長くなるので別エントリーで。
HTML5 Video
Flashなどを利用せずにVideo素材を再生する。動画の制御はJSで可能だが、XPERIAは非対応。また、Androidでは将来的にFlashへの対応を発表しているが、XPERIAは未定。
そうなると動画をiPhone・XPERIA双方で再生るる方法はYouTubeだけ。
SVG
Canvasと同様ベクトル描画が可能。Canvasと異なるのはJSではなく、画像と同様に一ファイルでの書き出しが可能、またAdobe Illustratorでの書き出しが可能で、非常に現状のデータとの親和性が高い。しかし残念ながらXPERIA非対応。。
更に深く後ほどのエントリーで掘ります。
てなわけでこのエントリーはここまで。