3DSのブラウザ調査

html5 3ds

SPEC vol.2の賞品としてNintendo 3DSをいただきました。関係者の方ありがとうございます。

ちょうど2011/6/7からWebブラウザが配信されたので、どんなもんなのか調査。公式なスペックはhttp://www.nintendo.co.jp/3ds/hardware/features/browser.htmlで確認できる。

まずは特に気にせずjsdo.itにある自分のコードをいくつか動かしてみようとしたところ、ほとんどが遅くてうまく動かない。

次。仕事で作ったスマートフォン向けのページとかを見てみる。gradient/border-radius/text-shadwo/box-shadowくらいしか使っていないのだけれども、そこそこ見られる。text-shadow/box-shadowは未対応っぽい。gradientは-webkit-gradientに対応しているっぽい。

続いて、簡単なコードでどのくらい動くのかを簡単に調査。

  • border-radiusはある程度有効
    • 半径が大きい時にあまりきれいでない
    • %指定はできない
    • 10px 20px/20px 10pxみたいなのはOK
  • text-shadow/box-shadowは未対応？
  • webkit-gradientに対応している
    • webkit-linear-gradientなどには対応していない
  • webkit-transition/-webkit-animationに対応している
  • 要素にタッチするとhoverしたことになる
    • A要素なんかだとhoverの瞬間が訪れないかも
  • タッチ自体はmousedownのイベントとなる（touchstartではない）
  • localStorageは未対応
  • video要素/audio要素は未対応
  • インラインSVGは未対応（image/svg+xmlと表示される）
  • 3D機能は無効（MPO閲覧時は専用ビューアっぽい表示になる）
  • canvasはほとんどの機能が利用できるが描画はかなり遅い

結論としては、普通のWebサイトを見る分には充分な感じ（Flashは未対応だけど）。html5関連を使った豪華なものは厳しそう。どうしてもアニメーションとかしたければ-webkit-transition/-webkit-animationで、canvasは使わないのが良さそう。

iPhone 3GとかiPod touch 2nd generationくらいの能力だと思っていると（CSS3に結構対応しているけれどもcanvas描画は遅い）ちょうどいいかも。実際iPhone向けに作ったサイトがそこそこ見られたし（viewportの設定が効くのでちょうどいい大きさで表示される）。