JavaScript

タイトルがイミフだけどとりあえずメモ。

iPhoneでAudioを読み込み(再生)させるには、 ユーザーによる任意のイベントが必要。

で、この「任意のイベント」がどこまで持ちまわせるか。 どこまでも持っていけるものではないみたい。

var audio = new Audio('hoge.mp3');
$('a.hoge').click(function(){
  audio.play();
});

これは大丈夫。

getJSON のコールバックでplay()

$('a.hoge').click(function(){
  $.getJSON('getjson.php', function(json){
    var audio = new Audio(json.audio_name);
    audio.play();
  });
});

これはたぶんダメ。

getJSONしてきたものをコールバックの外の変数に入れて、setTimeoutでJSONがセットされるのを確認してからplay()

$('a.hoge').click(function(){
  var json;
  $.getJSON('getjson.php', function(data){
     json = data;
  });</p>

<p>setTimeout(function(){
    if(typeof json === 'undefined') setTimeout(arguments.callee, 100);
    else{
      var audio = new Audio(json.audio_name);
      audio.play();
    }
  });
});

これもたぶんダメ。

同期通信でJSON取りに行って、play()

$('a.hoge').click(function(){
  var jsonText = $.ajax({url:'getjson.php',async:false});
  var json = JSON.parse(jsonText.responseText);</p>

<p>var audio = new Audio(json.audio_name);
  audio.play();
});

これもたぶんダメ。

試しに無名関数で囲ってみる

$('a.hoge').click(function(){
  var audio;
  (function(){
    audio = new Audio('hoge.mp3');
    audio.play();
  })();</p>

<p>});

ダメっぽい。

「任意のイベント」(ここではclick)のイベントハンドラのスコープの中で、 且つそのイベント発生後、通信が起こっていない状況じゃないと、 load/play()は出来ないような、そんな気がする。

詳細は時間があるときに検証する。

スマートフォン向けのWebアプリを作る際に調べたこととかそんな感じのことの自分用メモ。 音声再生周りのことに関して、でもAudioのことだけとは限らない。

Continue reading

  isTouch : (function(){
    // タッチデバイス判定
    return (document.ontouchstart !== undefined);
  })()

っていうのをオブジェクトの中に入れていつでも呼び出せるようにしてみたり。

■追記 2011/6/21 17:52 ————————————————————————— 色々調べてみた結果、どうもAndroidの場合、Audioの対応状況は、 OSのバージョン如何の問題ではなく、端末によって対応状況がまちまちな模様。。

Android端末のHTML5対応状況について調べてみた | Septeni Engineers’ Blog 上記のサイトで検証してる端末が、デフォルトで搭載されてるバージョンで検証したのか、 アップデートして検証したのかがわからないので、憶測の域を過ぎないまでも、 端末によるばらつきは事実と見ていいような気がする。 (OSのバージョンとブラウザのバージョンが紐付いてるわけではない？)

とりあえずAndroidで音声再生をしたい場合は諦めてFlashにしてしまうのが良さそう(仕事でやるなら)

今度はAndroid編。 (iPhone編はこっち)

とりあえずAudio周りに限らずそこに至るまでに調べたこととか。

Continue reading

自分用にメモ iOS4.0 と 4.2 の端末で色々検証

Continue reading

■追記 2011/6/8 19:06 —————————————————————————- 解決しました。

実際の環境では、PHPでドキュメントルートの外からmp3のデータを引っ張ってきていたのですが、 そのコード上で、

header("Content-Type: audio/mpeg, audio/x-mpeg, audio/x-mpeg-3, audio/mpeg3");

と、Content-Type を複数指定していました。 ここを、 “audio/mpeg” のみに(こっそり)直したところ、無事iOS4.0の端末でも再生されるようになりました。 まさかPHPの方が原因だったとは･･･。

結論

iOS4.0(恐らくiOS4.1以下)では、複数の Content-Type には非対応、iOS4.2から(何故か)対応するようになった。

おまけ

ちなみに、 複数指定されていた Content-Type を、それぞれ一つずつ選んで渡してみたところ、次のような結果に。

	iOS4.2	iOS4.0
audio/mpeg	○	○
audio/x-mpeg	○	○
audio/x-mpeg-3	○	×
audio/mpeg3	○	○

とはいっても、例えば、 “audio/mpeg, audio/mpeg3″ のように指定しても、やっぱり鳴らなかったので、

複数指定はやっぱりダメなようです。

まだ検証中。 とりあえず検証してる内容をメモ。

何が起こったか

iOS4.1以下の端末(iPhone 3GS,iPhone4問わず)で、以下のスクリプトで音声再生ができない。 (実際に検証したのはiOS4.0の端末と、iOS4.2の端末)

var audio = new Audio('hoge.mp3');
$('#play').bind('touchend', function(){
    audio.play();
});

じゃぁなんでiOS4.1以下なの

Safari – Wikipedia iOS4.2 から Safari5 が搭載されるようになってる。怪しい。

HTMLMediaElement Class Reference | Safari Developer Library iOS4.1 まで使われていた autobuffer が廃止され、iOS4.2 からは preload というプロパティに変わっている。

この辺に原因があるのではと思い、この現象はiOS4.1以下で起こるものと推測する。

Continue reading

iPhone向け(Androidも？)にゲームなどを作る際、 連続でタップをする可能性のあるインターフェース(例えばADVの会話シーンなど)に、 event.click を使ってしまうと、どうも動きがもっさりとしてサクサク進まない。

そういう時は、event.click ではなく event.touchstart/touchend を使うとサクサク進むようになる。

Continue reading

指摘を受けたのでメモ。

例えば http://example.com/ に以下のようなコードを書いたとする。

var url = location.href;
document.write('<a href="' + url + '">リロードするお！</a>');

この状態でアドレスバーに http://example.com/#’>”><script>alert(0)</script> と打ち込むと、 IE8以下及びIE9互換モードの場合、alertが実行されてしまう。

Continue reading

げこたんが色々いじってるのを横目で見てたらなんだか楽しそうなのでやってみました。 wget とか make とかやってたみたいですがとりあえず MacPorts でサーチかけてみたらしっかりあるではないですか。 というわけで、インストール。

sudo port install nodejs

インストール作業はとりあえずこれで終了。

あとはここに書いてあるJSを作成して実行！

node test.js

127.0.0.1:8124 でしっかりと「HelloWorld」が表示されていたので、これにて終了。

ぱっと見てみた感じ色々できそうで楽しそうだったので今後何に使っていくか検討してみようと思います。 とりあえずは社内の作業用ツールで実験実験。

JPEGとかPNGとかの画像をダウンロードさせるページを作っていたのですが、 aタグのhrefに画像のパスを書いても、対象の画像に遷移して困ってしまいました。 ZIP等をダウンロードするときみたいに確認ダイアログを出したかったので、 色々調べてみました。

perlやPHPでファイルのダウンロード確認ダイアログを表示させる方法 | perl/CGI | 阿部辰也のブログ――人生はひまつぶし。

ここのPHPのソースを一部改変してJSからドーンします。

<?
$files = $_GET;
$src = &quot;./hoge/{$files['filename']}&quot;;</p>

<h1>HTTPヘッダを送信</h1>

<p>if(file_exists($src)){
header(&quot;Content-type: application/octet-stream&quot;);
header(&quot;Content-Disposition: attachment; filename=\&quot;{$files['filename']}\&quot;&quot;);</p>

<h1>出力</h1>

<p>readfile($src);
}else{
  header(&quot;Location: ./fuga.html&quot;);
}
?&gt;

header(“Content-Disposition: attachment; filename=\”{$files['filename']}\”"); ここの記述でダイアログを表示させる(ついでにファイル名を決めることができる)ようですが、 セキュリティ的に問題もある模様。 [Studying HTTP] HTTP Header Fields

あと、ファイルによってMIMEタイプ(Content-Type)が異なるので、それもなんとかしなければならず。 PHP の mime_content_type() を使おうとするも非推奨とのことで断念。 とりあえず application/octet-stream とすることで回避(と言えるのかわかりませんが)しました。

で、このPHPをJSから叩く

    $('a.download').click(function(e){
      e.preventDefault();
      var filename = ($(this).attr('href')).split('/');
      filename = filename[filename.length-1];
      location.href = './fuga.php?filename='+filename;
    });

firebug とかで href 書き換えられて押されたりすると怖いので、 ファイル名の部分だけを切り取って送るようにしました。

ここまでできたので、今度は欲しい画像を選んでZIPに圧縮してダウンロード、とか作りたいのですが。 さぁ、時間が無い。

■おまけ application/octet-stream とはなんぞ web用語辞典 – application/octet－stream

なんだかわからないけど何かのファイル っていう意味っぽいです。