HTML5 browser Apps [ Hoolegan ]

振ってキモチを届けたい。

feels Native, HTML5 browser Apps.

2012.09.25 at Facebook App AWARDS

稲守貴久

都内にあるIT企業の研究開発部門でUX設計者

Twit ：@inamoly
Blog ：http://inamoly.com
Like! ：Facebookもmixiも大好きです

触ったことありますか？

先日、 Mark Zuckerberg氏が
こんな発言をしました。

Facebook CEO Mark Zuckerberg

Zuck「HTML5に賭けたのは失敗」

When I’m introspective about the last few years I think
the biggest mistake that we made, as a company, is betting
too much on HTML5 as opposed to native… because it just
wasn’t there.

過去数年を振り返って反省するとき、企業と
しての最大の間違いだったのは、ネイティブ
の反対としてHTML5に大きく賭けすぎたこ
とだ。なぜなら、単にその時期ではなかった。

Zuck「腐ってやがる早すぎたんだ」

IE6問題とか耳にしますが
新しすぎる問題ってある？

実際に試してみました

HTML5でネイティブっぽい
ブラウザアプリを作りました

スマートフォンを振ることでイベント
参加者の感情をリアルタイムに表示する
イベント可視化ツールです。

HTML5 browser Apps [ Hoolegan ]

Facebookアカウントでログイン

Smartphone view

イベントを選び、Shakeボタンをタップ

Smartphone view

スマホを上下に振ります

Smartphone view

Shake数が計測、送信されます。

PC view

Shake数をさまざまなViewで確認できます

PC view

参加ユーザーリスト

PC view

Shakeされている位置の情報

PC view

３Dも頑張りました

開発時に苦労したお話を共有

ブラウザの対応状況がバラバラ
特に下記で苦戦

・Deviceorientation
・Devicemotion
・Vibration API
・Audio Data API

傾きセンサー - DeviceOrientation
問題点

-上下の加速度がかかると、センサーの値が狂う
-推奨ブラウザであるFirefoxで、なぜか値のプラスマイナス
が逆になってしまう
・バージョンアップ(Ver.14?)したタイミングで発生
・Firefox Auroraの時だけ値にマイナスを掛けて対応
if ((navigator.userAgent.indexOf('rv:14.0') > 0) ||
(navigator.userAgent.indexOf('rv:15.0') > 0)) {
beta = beta * (-1);
}

加速度センサー - DeviceMotion
問題点

-対応ブラウザが限られる
・Firefox (Android)
・Mobile Safari(iOS)
それぞれ端末ごとに加速度センサーの精度が異なる

-精度が違う
-精度高・GALAXY NEXUS 、NEXUS S
-精度中・iPhone4 、iPhone4S
-精度低・P-01D 、P-04D 、REGZA Phone

オーディオ再生 - Audio Data API
問題点

-Firefox（Android）でしか正常に再生されない
-iOSでもオーディオデータ再生のみは問題無いが、
DeviceOrientation、DeviceMotion、Vibration APIと組み合
わせると再生できなくなった
・ロード完了時に発生するcanplayイベントが発生しない
・iBooNというアプリを作っている方のBLOGを参考に以下
を行なったが、再生できず
1.素材のAudioファイルは１つにまとめる
2.初回のみユーザアクションでプリロードしておく
3.再生位置を変更、部分的にループさせる

バイブレーション - Vaibration API
問題点

-対応ブラウザが限られる
Firefox (Android)

iOSでは現状、震えないです。

Zuck「腐ってやがる早すぎたんだ」
だいたいあってる (どや


ありがとうございました。

HTML5 browser Apps [ Hoolegan ]

More Related Content

Viewers also liked (14)

Similar to HTML5 browser Apps [ Hoolegan ] (6)

HTML5 browser Apps [ Hoolegan ]