2013年04月25日

-webkit-overflow-scrolling: touch がきかない場合

以前は iOS 系では「スクロールは2本指でできます」とか「iScroll を使いましょう」というのが定番でしたが、-webkit-overflow-scrolling: touch が登場してくれたおかげで、
.scroll {
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}
という感じで CSS を書くだけで、1本指で、しかも慣性スクロールできるようになりました。
かなり楽な世の中になりました。

ちなみに Android でも Android 4.0.4 Safari/534.30 であれば、-webkit-overflow-scrolling: touch が動作しました。
が、scroll をつける div などの高さを設定しておかないとスクロールバーが表示されず、スクロールできませんでした。
Android でも -webkit-overflow-scrolling: touch を使いたいのにうまく動作しないという場合は、scroll させたい領域の高さを指定してみることをおすすめします。
続きを読む
タグ:HTML5 CSS
posted by おちエン at 00:00| Comment(0) | 開発 | このブログの読者になる | 更新情報をチェックする

2013年04月24日

Android の scrollTop

Audio の話はお休みして、今日は Android の話。
Android で -webkit-overflow-scrolling: touch などとした scroll 領域に対して、JavaScript から scrollTop を設定してもこれが全く利きません。
かなり雑ですが、以下のようなコード。
<ul id="scroll">
<li>aaaaaaaaaaaa</li>
<li>bbbbbbbbbbbb</li>
<li>cccccccccccc</li>
// 省略
<li>zzzzzzzzzzzzzz</li>
</ul>

<script type="text/javascript">
<!--
$(document).ready(function(){
	var y = "100px";
	$("#scroll").animate({scrollTop: y});
});
//-->
</script>
PC では当然、iPhone や iPad でも動きますが、Android では Safari, Chrome 共に動きません。
この問題については、https://code.google.com/p/android/issues/detail?id=19625 でみんなが不平不満を書き込んでいます。
この URL に解決方法として、
  1. overflow: auto を overflow: hidden に変更
  2. scrollTop を設定
  3. overflow を再度 auto もしくは scroll に戻す
ということが書かれていますが、Android 4 系では3番目で結局 scrollTop が元に戻る、すなわち 0 になってしまいました。
現状では、この bug が修正するのを待つしかないようです。
posted by おちエン at 01:24| Comment(0) | 開発 | このブログの読者になる | 更新情報をチェックする

2013年04月22日

HTML5 Audio の tips【iOSの仕様 3】

iOS ではユーザがクリックなどの動作を行わない限り、音声がダウンロードされないという仕様を再度。
ではクリックを自動でさせたらどうなるか試してみました。
$(document).ready(function(){
	$('#pbutton').click();
});
な感じです。
残念ながらこの方法でごまかしても、iOS5 では音声は流れませんでした。

この仕様を回避する唯一の方法は、UIWebView だけの iPhone アプリを作ってしまうというものだけです。
UIWebView の設定で、
UIWebView.allowsInlineMediaPlayback = YES;
UIWebView.mediaPlaybackRequiresUserAction = NO;
とすれば、ユーザのクリックなしで音声をロードすることが可能になります。
言うまでもないですが、HTML5 app ではなくなってしまいます。
詳しくは、http://flowz.com/2011/03/apple-disabled-audiovideo-playback-in-html5/ を参照。
タグ:javascript HTML5
posted by おちエン at 22:22| Comment(0) | 開発 | このブログの読者になる | 更新情報をチェックする

2013年04月20日

HTML5 Audio の tips【iOSの仕様 2】

昨日に引き続き HTML5 の Audio についての話。
iOS ではユーザの具体的なアクションがなければ、音声のダウンロードができないという仕様になっているということについては昨日書きました。
しょうがないので100歩譲って、最初のワンクリックはユーザにしてもらうとして、複数の音声をダウンロードすることはできるのか?というのが今日の話。
結論から言うと、可能ではありますが問題があります。

複数の音声のロードのサンプルは以下。
このコードだと実際に音声がロードできたか目で確認もできます。
<body>
<audio id="audio1" src="http://www.foo.com/1.mp3" controls></audio><br />
<audio id="audio2" src="http://www.foo.com/2.mp3" controls></audio><br />
<audio id="audio3" src="http://www.foo.com/3.mp3"" controls></audio><br />
<button id="pbutton">play</button>
<script type="text/javascript">
<!--
$(document).ready(function(){
    $('#pbutton').bind('click', function() {
        for (var i=1; i<4; i++) {
            $('#audio' + i).load();
        }
    });
});
//-->
</script>
</body>
上記コードを実行すれば分かりますが、複数の音声のロードは iPad などでもできるようです。
JavaScript で完全に裏側でもロードできますが、canplay イベントが常に発生するわけではないという bug があるせいで、すべての音声をきれいな方法で再生することはできません。
例えば、以下のコード。
音声がすべてロードされれ、canplay イベントが発生すれば、同時にいくつかの音声が聞こえるはずですが、
<body>
<button id="pbutton">play</button>
<script type="text/javascript">
<!--
$(document).ready(function(){
    var audioUrls = [ // データを入れておく ];

    $('#pbutton').bind('click', function() {
        for (var i=0; i<audioUrls.length; i++) {
            var audio = new Audio();
            audio.src = audioUrls[i];
            audio.load();
            $(audio).bind('canplay', i, function(event) {
                alert('canplay: ' + event.data);
                $(this).get(0).play();
            });
        }
    });
});
//-->
</script>
</body>
ブラウザではすべての音声が流れ出しますが、iPad などでは1つしか音が流れなかったり、全部流れたり、実行する度に結果が違うという羽目に。。。

解決策としては、複数の音声を1つにまとめる Audio Sprites という方法を取るしか無いです。
イメージ的には CSS Sprites と同じです。
Audio Sprites については以下の URL で。 http://remysharp.com/2010/12/23/audio-sprites/
posted by おちエン at 16:05| Comment(0) | 開発 | このブログの読者になる | 更新情報をチェックする

2013年04月19日

HTML5 Audio の tips【iOSの仕様】

HTML5 の Audio を使うという案件があって、これがなかなかはまったので備忘録として、色々書いておきます。
そもそも HTML5 の Audio はブラウザによって仕様がまちまちで、特に iPhone(iPad), Android の挙動にはかなり苦しめられました。

まず、一番重要なのはiOS ではユーザがクリックなどの動作を行わない限り、音声がダウンロードされないという点です。
たとえば、
$(document).ready(function(){
    var sound = new Audio();
    sound.autoplay = false;
    sound.src = "http://www.foo.com/hoge.mp3";
    sound.load();
    $(sound).bind('canplay', function(event) { event.target.play(); });
});
というコード、iPad では一生再生されません。
iPad などで再生させるためには、a タグ、img タグ、button タグなどの click イベントで駆動させるように書き換えないといけません。
$(document).ready(function(){
    var sound = new Audio();
    sound.autoplay = false;
    sound.src = "http://www.foo.com/hoge.mp3";
    $('#pbutton').bind('click', function() {
        sound.load();
        $(sound).bind('canplay', function(event) { event.target.play(); });
    });
});
当然ながら autoplay などはできないので iPhone/iPad 対応するのであれば、設計段階から念頭においておく必要があります。
タグ:javascript HTML5
posted by おちエン at 22:19| Comment(0) | 開発 | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。