iPhone4のsafariは無駄な通信をするようにできている
「iPhone/iPadxHTML5アプリ制作」という入門書を買い、サンプルアプリで遊んでいました。基本的にはHTML5、CSS3、JavaScriptだけを駆使して(Objectve-Cを使わず)、傾きセンサー、GPS、動画再生などを使ったちょっとおもしろいアプリを組んでいくという中身です。
その中にピアノ・アプリがありました。HTML5のAudioを使って
(new Audio("C.mp3")).play();
といった感じで、ドの鍵盤に見えるところをタップすると、そのイベントハンドラでド(C.mp3)のファイルを指定してインスタンスを作り、play()メソッドで鳴らすという実に簡単な仕組みです。
ところがiPhone4で3Gだと遅くてまともに動かないようなことが書いてあるのですが、それにしても尋常じゃないほどまともに動かない(笑)。鍵盤をタップする前にインスタンスを作っておいて、タップした時にplay()メソッドを呼ぶ改良版も載っているけど、それさえ尋常ではない。というか改良前と変わっていないことに疑問を持ちました。
で、ネットで海外を調べたところAudioがノロいのは結構既知な感じでした。でもWindows版のsafari(JavaScriptエンジンは同じWebKit)だと早い。どーもAudioの問題ではなくブラウザのキャッシュがおかしいんじゃないのって思いました。普通に考えて、改良版のようにインスタンスにしなくてもmp3はキャッシュされるので、改良前でも弾いているうちにレスポンス良くなるハズ。
別の情報でYahooの人がキャッシュのテストしてみた結果が載っていました。
Mobile Browser Cache Limits: Android, iOS, and webOS
この記事は１年前ともう古いですが、当時の実験では、
Android2.1が１ファイルあたり２メガまで、トータルでも２メガまでに対して、iPhone4のIOS4.xは１ファイルあたりたったの100Kまで、トータルで1.9メガまで
となっていました。100Kという制限も衝撃ですが、この記事をしてもおかしいのが、私のテストしたピアノのmp3は１ファイル100Kありませんし、トータルでも１メガも無いので、この記事どおりならキャッシュされるハズです。
さらにテストをして気づいたのが、IEやWindows版safariでピアノが表示されてから、LANケーブルを引っこ抜いても正しく動作します。つまりキャッシュされている。ところが、iPhoneでピアノが表示されてから、「設定」で「機内モード」にして3GもWi-Fiも使えないようにするとＮＧ。明らかにキャッシュしていないことがわかりました。ちなみにhtmlのページ遷移はキャッシュされていました。
これキャリアが儲かるようにワザと通信量を増やすための仕様？
こんな疑いを持ちたくなります。
気を取り直して、先述の本には出ていない別の方法としてcache.manifestファイルにキャッシュするファイルを宣言するという方法があるのを知ったのでこんな感じで作ってみました。
CACHE MANIFEST
# Version: 0001CACHE:
./sound/A3.mp3
./sound/A3u.mp3
./sound/B3.mp3
./sound/C3.mp3
./sound/C3u.mp3
./sound/C4.mp3
./sound/D3.mp3
./sound/D3u.mp3
./sound/E3.mp3
./sound/F3.mp3
./sound/F3u.mp3
./sound/G3.mp3
./sound/G3u.mp3
./css/main.css
これもだめでした。なんでもiPhoneの場合、cache.manifestで一度キャッシュすると消すのが大変らしいのですがそもそもキャッシュしてくれない(泣)
もうひとつ。同じ音の時を連続して鳴らすと、違う音の時よりぜんぜん早い！このことから最後のmp3だけはキャッシュしていると推測できます。あくまで推測ですが、オーディオやビデオ系のファイルは「サイズが大きいに違いない」という前提か何かでキャッシュしない仕様のようです。
ついでに知ったのが、Macユーザーには常識らしいのですがsafariのキャッシュはゼロにしたほうが速いとか。iPhoneのsafariでも「もたついてきたらキャッシュクリアせよ」というような記述がありました。何のためのキャッシュやら。本末転倒なトホホな感じですね。
とにかく
今のAudioやキャッシュの仕様ではBGM以外、たとえばポップアップや警告音とかにカワイイ音とか使うのはやめておいたほうがいい
でしょう。スマートフォンのビジネス向けのSIもたぶんこれから増えてくると思いますが、
「PCのブラウザとかわらんでしょ。ネイティブアプリでないから」
なんて軽い調子で作ると、このようなPCと違う挙動で痛い目に遭うので注意が必要ですね。
※私のまわりは楽観視している人多い(^^;
P.S
本のサンプルアプリはすべてWindows AzureのVMRoleで動かしています。たぶん本を書いた人は手持ちのPCでWi-Fiで繋げているっぽいので気がつかなかったのでしょう。
