Webに関すること

Androidで確認したので一応Androidカテゴリで。 PCでも再現するかどうかは不明。

FlashPlayer11で新たに追加された”JSON”が、FlashPlayer10以前でJSONを扱えるようにするas3corelibの”JSON”とバッティングするっぽい。

import com.adobe.serialization.json.JSON;</p>

<p>if(Capabilities.version.match(/11&#46;\d&#46;\d/i)){
  JSON.parse(json);
}else{
  JSON.decode(json);
}

とやろうとすると、 player10用のパブリッシュでは、JSON.parseが引っかかり、 player11用のパブリッシュでは、JSON.decodeが引っかかる。

仕方が無いので、10用11用と書き出して、

var reg = /(1\d).\d r\d/i;
reg = fp.match(reg);
if(reg[1] > 10){
  swfobject.embedSWF('hoge.swf', 'swf', width, height, '11.0.0');
}else{
  swfobject.embedSWF('hoge.swf', 'swf', width, height, '10.0.0');
}

などとして書き出すことで対応した

ちょこちょこまとめてみた。

まず

Androidには、window.orientation 及び window.onorientationchange を持ってるのと持ってないのがあるらしいので、

$(window).data('orientation', (function(){
  if(typeof window.orientation === 'number'){
    return Math.abs(window.orientation);
  }else{
    return (window.innerWidth < window.innerHeight) ? 0 : 90;
  }
})());

こんな感じで orientation を window の data として保持しておく。 同じように onorientationchange の方もラッパーを作っておく。

orientationChange = function(handler){
  $window = $(window);
  var has_orientation = typeof window.orientation === 'number';
  var EVENT_TYPE = has_orientation ? 'orientationchange' : 'resize';</p>

<p>({
    check : function(){
      if($window.data('orient_width') == window.innerWidth){
        return false;
      }else{
        $window.data({
          orientation : this.getOrientation(),
          orient_width : window.innerWidth,
          orient_height : window.innerHeight
        });
        return true;
      }
    },
    getOrientation : function(){
      if(has_orientation){
        return Math.abs(window.orientation);
      }else{
        return (window.innerWidth &lt; window.innerHeight) ? 0 : 90;
      }
    },
    exec : function(){
      var _self = this;</p>

<pre><code>  $window.data({
    orientation : _self.getOrientation(),
    orient_width : window.innerWidth,
    orient_height : window.innerHeight
  });

  $window.bind(EVENT_TYPE, function(e){
    $window.data('orientation', _self.getOrientation());

    if(v.UA.isAndroid &amp;amp;&amp;amp; !has_orientation){
      (function(){
        if(!_self.check()){ setTimeout(arguments.callee, 100); }
        else{
          handler();
        }
      })();
    }else{
      $window.data({
        orient_width : window.innerWidth,
        orient_height : window.innerHeight
      });
      handler();
    }
  });
  handler();
}
</code></pre>

<p>}).exec();
}

らしい、っていうのは実機で遭遇したわけではないため。

Android だった場合全部 resize イベントに回そうかとも考えたけど、 やっぱり orientation を持ってるものはそっちで処理するようにした。

で

上記の状態で、イベントハンドラに要素をセンタリングする処理を渡したところ、 画面の向きを変えてもハンドラが実行されていないようだったので調べてみた。

ハンドラの中で、window.innerWidth や window.innerHeight を使ってる場合、 orientation の切り替え直後は、

landscape時：portrait時の window.innerWidth/Height portrait時：landcaape時の window.innerWidth/Height

が返ってきてた。 setTimeout 使って監視してみると、100msほど遅れて切り替わる感じ。

別に動的に必要なものでもないので、読み込み時に保持してしまおう。

毎回 setTimeout 使うのもめんどくさいので。 というわけで、

device = {
  innerWidth : (function(){
    var portrait,landscape;
    var innerHeight = (isIOS) ? screen.height : window.outerHeight/window.devicePixelRatio|0;
    if($(window).data('orientation') === 0){
      portrait = window.innerWidth;
      landscape = innerHeight;
    }else{
      portrait = innerHeight;
      landscape = window.innerWidth;
    }</p>

<pre><code>return {
  portrait : portrait,
  landscape : landscape
};
</code></pre>

<p>})(),
  innerHeight : (function(){
    var portrait,landscape;
    var bar = (function(){
      if(isIOS){
        return ($(window).data('orientation')===0) ? 52 : 64;
      }else{
        return (window.outerHeight/window.devicePixelRatio) - window.innerHeight;
      }
    })();
    if($(window).data('orientation')===0){
      portrait = window.innerHeight;
      landscape = window.innerWidth - bar;
    }else{
      portrait = window.innerWidth - bar;
      landscape = window.innerHeight;
    }
    return {
      portrait : portrait,
      landscape : landscape
    };
  })()
}

window.outerHeight から取ろうとするとなぜかデバイスのY軸方向のピクセル数を返しやがりますので、 window.outerHeight / window.devicePixelRatio と、pixelRatio の倍率を考慮してやると、欲しい値になる。

outerHeight から innerHeight を引くとアドレスバーの高さが取れるので、 JSが読み込まれた時点での端末の向きを見て、window.innerWidth/Heightから、 縦/横向きの時の innerWidth/Height をそれぞれ計算して変数に入れておく。

iPhoneの場合は、ツールバーが portrait時：44px landscape時：32px なので、これにステータスバーの20pxを足した固定値でOK。 outerHeight も window.outerHeight もしくは screen.height でOK。 (そもそもこの処理も必要ないけども)

これで orientationchange の時にこっちの意図通り変化してくれない window.innerWidth/Height を見に行かなくても、 要素のセンタリングができるようになった。

何か忘れてる

持たざる者は？

window.onorientationchange を持っていない場合、 window.onresize で、window.innerWidth と window.innerHeight を比べて端末の向きを判別するので、 おとなしく状態監視をしたほうが無難な気がする。 $(window) に data として持たせると、複数要素に指定したときにうまく動かなさそうなので、 各要素ごとに持つとかそんな感じ。

ここ見ながらまとめてる http://jsdo.it/GeckoTang/8ldM

• position: fixed;の実装
• overflow: scroll/auto;に対応が1本指でスクロールするようになった
  • -webkit-overflow-scrolling: touch;を指定するとスクロールバーを出せる(ネイティブなスクロールになる)
  • バーが出てた方が動きが滑らか

position:fixed;な要素と-webkit-overflow-scrollinを指定している要素が重なった時、z-indexを指定していないとおかしな挙動をする。 z-indexが指定してあれば問題ない模様。

あとは日時に関する入力タイプ(<input type=”datetime”>など)でドラムが出るようになった。

• date
• month
• time
• datetime

などなど。 valueに値が無いと空っぽ表示→クリックすると現在時刻。

<input type=”range”>がスライダー表示になった。 -webkit-appearance: slider-vertical;で縦スライダー。 ::-webkit-slider-thumbで動かすアレのスタイル指定。

あとはプライベートブラウジングのときのこれ iOS5で追加されるPrivate BrowsingモードとWebStorageの兼ね合い ::ハブろぐ はやっぱりそうなっていた。 try～catchで回避可能。

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

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

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

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

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

Continue reading

今まで見たこと無いエラーが出てきたので。

うーうーうなってたらげこさんが調べてくれました。

http://rubyforge.org/forum/forum.php?max_rows=100&style=nested&offset=2021&forum_id=33

By: Tim Hunter RE: Writing an image to STDOUT [ 返信 ] 2005-11-18 13:18 A follow-up: I checked this out last night. It turns out that to_blob works with 0×0 GIF and MIFF images, and raises a MagickException for a 0×0 PNG image. However, if you call to_blob with a 0×0 JPEG image then libjpeg will exit. I’ve added a check to to_blob for this case. With the test, if you call to_blob for a 0×0 JPEG image to_blob will raise a RunTimeError exception.

「0×0の画像を writtenImage() しようとするとエラーが出るよ！」 ってことらしいです。

実際のコードを見てみたら、 グローバルで定義した変数を、関数の中で使うときに、 global hoge; ってやってなかったので、値が全部 NULL になったのが原因のようでした。

エラーメッセージでググっても答えが見つからなかったのでタイトルにしてしまうのです。

自分用にメモ 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」が表示されていたので、これにて終了。

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