‘スマートフォン’ タグのついている投稿
Mobile SafariのaudioタグでBASIC認証下の領域のmp3が再生されない
環境
iPhone5
iOS 8.4.1
他の環境はチェックしていない。
現象
audioタグで音声を再生させるテストページを作成。以下のようなざっくりシンプルなソースを書いた。
<audio src="./test.mp3" id="sound"></audio> <p id="play">PLAY</p> <script> $("#play").click(function(){ document.getElementById("sound").play(); }); </script>
PLAYをタップしたらtest.mp3が再生される仕組みなのだけど、どうしても音が出ない。PCのブラウザでアクセスした場合は問題なく再生される。
間違った方向に悩む
これはmp3のエンコードがおかしくて音が出ないのでは無いか?という見当違いなことを考えてビットレートを変えてみたり、ステレオをモノラルにしてみたり、mp3をwavにしてみたりと試したのだが状況は変わらず。もちろんすべてPCでは再生される。
WEBサーバのMIME設定が漏れてるかな?と思いいじってみるも、元々PCでは再生されているわけでそんなはずもなく。
BASIC認証が足かせだった
なんかおかしいなあ、ということで試しに別サーバに置いたmp3を指定してみたら再生された。別サーバなので、環境は全然違うのだけど、これはBASIC認証なんじゃないか?ということに気付き、試しにBASIC認証外にソース一式持って行ったらあっさり動いた。
iOS関係のバグみたいだが
そもそもBASIC認証下でmp3再生するような要求は、公開前のテストサイトくらいなものなので、まあそういう不具合あっても仕方がないですよね、レアケースですよね、なんて思った次第。
ざっと検索すると似たような事例がiOSのバグとしてあるようだけど、いつまでたってもBASIC認証を記憶するようにならないMobile Safariに、多くを期待しても仕方がないのでは、という風に考えている。
サイトのスマートフォン対応はさらに分化する方向なのか
以前「PCサイトのスマートフォン対応時の考え方」という記事を書いた。スマートフォン用サイトをPCサイトと別に用意するというのは、携帯サイトを作るのが始まった時と同じような感じという内容。去年の秋のことだ。
それから半年近く経ち、状況が大分変わって来ている。ホットな分野だけに進むのが早い。
今月になって、Googleのウェブマスター向け公式ブログが以下のような記事を出した。
Android のユーザーエージェントの検出について
http://googlewebmastercentral-ja.blogspot.com/2011/05/android.html
Androidからのブラウジングでは、UserAgentからタブレットかスマートフォンかを見分けて対処できますよ、という内容。
携帯キャリアでも端末のUserAgentについての解説はあるけれど、それと同じことをAndroidについてGoogleが説明している。
利便性をあげるための提案として有難いことだし、これは
「スマートフォンとタブレットでユーザーの使い方が異なります。対処できるのでお願いします。」
というメッセージだともとれる。
つまり、スマートフォン対応とは
- PCサイト
- 携帯サイト
- スマートフォンサイト
なイメージがあるけれど、今現在では
- PCサイト
- 携帯サイト
- スマートフォンサイト
- タブレットサイト(PCサイトそのままでも可)
という内容で検討すべき、ということだ。
工数など仕事としての面では、出来ればタブレットサイトはPCサイトを表示する方向で進めることになるケースが多いかも知れないが、ユーザーの利用シーンがスマートフォンの普及でさらに増えた、という意識を持った方が良いだろう。
スマートフォン対応サイトへの導線
PCサイトのスマートフォン対応時の考え方 に引き続く感じで思いついたことをまとめたメモ。
サイトが用意出来たら、そこにどうやって人を引き込むかという課題は、サイトの企画段階からあるべきもの。とはいえ、サイト開発中に状況が変化したりもするし、リリース後にだって刻々と変わっていく。サイトの特性によって一般論にあわない部分もあるだろうし、現実にやってみないと分からないことだって沢山ある。
ということで結局は常にトライ&エラーになるんだろうけど、そんなこと言っても仕方が無いので、思いつきをいくつか書いてみる。
- PCサイトとスマートフォンの自動振り分けを用意する
- PCサイトにスマートフォン用サイトへのリンクを設ける
- 告知ページやメールマガジンなどでスマートフォン対応したことをお知らせする
- TwitterやFacebook、mixiチェックなどSNSへのリンクを取り入れる
PCサイトとスマートフォンの自動振り分けを用意する
検索エンジンやブックマークなど、今までPCサイトを表示していたURLで、スマートフォンからのアクセスの場合にはスマートフォンサイトを表示するようにする。
これでスマートフォンユーザにとっては今までと変わりなくスマートフォンサイトへ誘導することが出来る。
ただし、PCサイトで閲覧したいという要望であったり、PCサイトと同じ機能を提供しないページの場合には検討が必要となってくる。
スマートフォンサイトに対応すべきページは、サイトに入ってくる所からになるということも言える。
PCサイトにスマートフォン用サイトへのリンクを設ける
スマートフォン用ページが用意されていない、用意はされているが機能が一部異なっている為PCサイトのURLではスマートフォンページを表示出来ない、などの理由で自動振り分けに対応できないページには、PC用ページ上でスマートフォン用のリンクを用意する。この場合のリンク先をどこにするかは検討が必要。
単純にPCからのアクセスの場合でも、スマートフォン用サイトが用意されていることをアピールすることで、認知を増やし、アクセスする機会を増やすことも考えられる。
告知ページやメールマガジンなどでスマートフォン対応したことをお知らせする
同じく、スマートフォン用サイトが用意されていることをアピールすることで認知を増やし、アクセスする機会を増やすことも考えられる。
メールマガジンや告知のRSSなどは別サービスからの閲覧が発生することも予想できるし、それらは、移動中などモバイル環境から閲覧するシーンが容易に想定できる。サイトに告知を上げるだけでは無く、色々な手段でアピール出来た方が可能性は広がる。
Twitterアカウントがあれば、定期的にアピールすることで、RTなどで情報が広まるなんてことも考えられる。
TwitterやFacebook、mixiチェックなどSNSへのリンクを取り入れる
上記の告知機会を作っていく為の手段。
SNSとスマートフォンの組み合わせは非常に相性が良く、モバイル環境から閲覧するシーンが容易に想定できる。その為、ユーザがSNSにリンクをアップ出来るような、「ReTweet」や「いいね」「チェック」などのボタンを用意する。
なんだか書いていて、当たり前のことばっかりだなぁと思ったりもするけれど、これが半年先ではどんな風になっているのか?比較することを考えるとちょっとだけ面白そうだ。