Home > SmartPhone
SmartPhone Archive
【Android】【ActionScript】FlashPlayer11で追加されたJSONがas3corelibとバッティングする
- 2011-11-16 (水)
- ActionScript | SmartPhone
Androidで確認したので一応Androidカテゴリで。 PCでも再現するかどうかは不明。
FlashPlayer11で新たに追加された”JSON”が、FlashPlayer10以前でJSONを扱えるようにするas3corelibの”JSON”とバッティングするっぽい。
import com.adobe.serialization.json.JSON;</p> <p>if(Capabilities.version.match(/11.\d.\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'); }などとして書き出すことで対応した
- Comments: 0
- Trackbacks: 0
【Android】orientationchangeの挙動制御
- 2011-11-09 (水)
- JavaScript | SmartPhone
ちょこちょこまとめてみた。
まず
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 < 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; !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 として持たせると、複数要素に指定したときにうまく動かなさそうなので、 各要素ごとに持つとかそんな感じ。
- Comments: 0
- Trackbacks: 0
【iPhone】iOS5で追加になったもろもろ
- 2011-10-13 (木)
- CSS | HTML | JavaScript | SmartPhone
ここ見ながらまとめてる 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で回避可能。
- Comments: 0
- Trackbacks: 0
【iPhone】JSで画像の読み込みを行うとMobileSafariがクラッシュする(ことがある)
- 2011-09-21 (水)
- JavaScript | SmartPhone
http://stackoverflow.com/questions/2986039/ipad-iphone-browser-crashing-when-loading-images-in-javascript http://bugs.jquery.com/ticket/6944
実際経験した状況では、 1) JSで2~10枚ほどの画像を、new Image() でロードする(画像はbase64でエンコード、dataURIで読み込み) 2) 読み込んだ画像を、canvasやCSSのbackgroundとして、50%縮小して、1~2枚ずつ描画。 3) 1、2の処理を10回ほど繰り替えすと、Safariがクラッシュする場合がある。
canvasでやるよりは、CSSでやった方が頻度が多い気がする。 たぶん縮小とかしてるのも良くない原因な気がする。 その他にも音声の読み込みをしてる場合があるので、 色々メモリは食ってそうな気がする。
- Comments: 0
- Trackbacks: 0
【iPhone】Audioを読み込むイベントがどこまで持ちまわせるか
- 2011-09-19 (月)
- JavaScript | SmartPhone
タイトルがイミフだけどとりあえずメモ。
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()は出来ないような、そんな気がする。
詳細は時間があるときに検証する。
- Comments: 0
- Trackbacks: 0
【iPhone,Android】スマートフォンでの音声再生まとめ
- 2011-08-31 (水)
- ActionScript | JavaScript | SmartPhone
スマートフォン向けのWebアプリを作る際に調べたこととかそんな感じのことの自分用メモ。 音声再生周りのことに関して、でもAudioのことだけとは限らない。
- Comments: 0
- Trackbacks: 0
【iPhone,Android】タッチデバイスかどうか判定する
- 2011-07-21 (木)
- JavaScript | SmartPhone
isTouch : (function(){ // タッチデバイス判定 return (document.ontouchstart !== undefined); })()
っていうのをオブジェクトの中に入れていつでも呼び出せるようにしてみたり。
- Comments: 0
- Trackbacks: 0
【JS】AndroidのAudio周りのメモ
- 2011-06-20 (月)
- JavaScript | SmartPhone
■追記 2011/6/21 17:52 ————————————————————————— 色々調べてみた結果、どうもAndroidの場合、Audioの対応状況は、 OSのバージョン如何の問題ではなく、端末によって対応状況がまちまちな模様。。
Android端末のHTML5対応状況について調べてみた | Septeni Engineers’ Blog 上記のサイトで検証してる端末が、デフォルトで搭載されてるバージョンで検証したのか、 アップデートして検証したのかがわからないので、憶測の域を過ぎないまでも、 端末によるばらつきは事実と見ていいような気がする。 (OSのバージョンとブラウザのバージョンが紐付いてるわけではない?)
とりあえずAndroidで音声再生をしたい場合は諦めてFlashにしてしまうのが良さそう(仕事でやるなら)
今度はAndroid編。 (iPhone編はこっち)
とりあえずAudio周りに限らずそこに至るまでに調べたこととか。
- Comments: 0
- Trackbacks: 0
【JS】iPhoneのAudio周りのメモ
- 2011-06-13 (月)
- JavaScript | SmartPhone
自分用にメモ iOS4.0 と 4.2 の端末で色々検証
- Comments: 0
- Trackbacks: 2
【JS】iOS4.1以下で、audioを制御できない【とみせかけて犯人はPHP】
- 2011-06-08 (水)
- JavaScript | PHP | SmartPhone
■追記 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以下で起こるものと推測する。
- Comments: 0
- Trackbacks: 0
ホーム > SmartPhone
- Search
- Feeds
- Meta