android

マークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。

mp4とgifアニメがandroidやiphoneでちゃんと表示されるか調べた

そういうサイトがなにげに見つからなかったので調べたよ。

スマホサイトを作っていて浮かんだ疑問1
「そもそもgifアニメってandroidでもiphoneでも動くんだっけ?」


サンプルを作ってみたのでいろいろな端末でみてみよう


 ■結論
実験の結果、htmlに貼り付けた状態のgifアニメは、、
iOS8のsafari → ちゃんと動く
Android2.3ブラウザ(AQUOS phone) → ちゃんと動く
Android4.1のブラウザ(Galaxy S3) → ちゃんと動く

※その他の端末は 見てないごめんね。


スマホサイトを作っていて浮かんだ疑問2
「mp4ファイルにリンクを張った場合、androidやiphoneではどういう処理になるんだっけ?」 



上記のサンプルのページの一番下にある、mp4へのリンクをクリックしてみる。

■結論
iOS8のsafari → その場で動画が再生される。ローカル保存はできない。
Android2.3ブラウザ(AQUOS phone) → 開くアプリを選べる。デフォはその場で再生。
Android4.1のブラウザ(Galaxy S3) → デフォは「マイファイル」に保存される。

ここはなにげに端末やOSによって動きがわかれたぞ!気をつけろ!!


 
 スマホサイトを作っていて浮かんだ疑問3
「じゃぁmovファイルならiphoneで保存させられる?」 



mp4だとその場で再生が始まるだけというのはわかった。そんじゃぁ、movファイルへリンクを貼ればiphoneでもカメラロールに保存させるページが作れるのかな?

■結論
できない。
長押ししたりいろいろやってみたけど、movファイルでも再生されるだけで保存はできない。

なにかアプリを導入せずに動画ファイルをローカルに保存させることはiphoneではできないみたいね。


 
 スマホサイトを作っていて浮かんだ疑問4
「gifアニメなら保存させられる?」 



mp4動画はあきらめよう。代わりにgifアニメならローカルに保存させられるのかな?
さっきのサンプルに貼り付けたgifアニメを長押しして保存してみたよ。

■結論
iOS8のsafari → カメラロールに保存できるが、カメラロール内ではgifアニメは動かない。
Android2.3ブラウザ(AQUOS phone) → ローカルに保存されるがローカルではgifアニメは動かない。
Android4.1のブラウザ(Galaxy S3) → 「マイファイル」に保存される。ローカルでも動く。


難しいねぇ。

以上、スマートフォンの動画周りの挙動調査でした。 

失礼します! 

navigator.geolocation.getCurrentPositionがandroidでうまくいってないとき

はまったけど解決がどこにも載っていなかったので自己解決。

位置情報を取得してマップに載せるなどをしたいときに
geolocation APIを使うよね。

if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(
ほげほげ
);

ってやつ。 

これ、pcブラウザやiOS safariでは普通にうまくいってるのに、androidではうまくいかない現象がおきた。
どうやらnavigator.geolocation.getCurrentPositionの部分でエラーが起きているぽい。
geolocationは使えるのにnavigator.geolocation.getCurrentPositionでエラーがおきる。
謎だ・・。
迷宮だ。

いろいろ試行錯誤してみて、解決したのがこれ


enableHighAccuracyオプションをtrueで設定する 


書き方はこんな感じ

if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(
function (pos) {
var crd = pos.coords;
nowlat = crd.latitude;
nowlong = crd.longitude;
},
function (err) {
alert(err.message);
},{
enableHighAccuracy: true,
timeout : 5000
}
);
} else {

}

 navigator.geolocation.getCurrentPosition()

の3番目の引数にはオプションを設定できるんだけども、そこに何もいれていなかったらandroidでうごかなかったところ、上記のようにオプションを加えたらandroidでも表示された。


enableHighAccuracyってなに

enableHighAccuracyというのは、詳しくはしらないけど、GPSを使ってより詳細な位置情報を取得するというオプション設定だ。
その代償としてバッテリーの消耗が激しくなる。

これを使うとGPSを使うというのなら、これをfalseにするといったい何をつかって位置情報をしるの??という疑問は残るものの、 とりあえずこれでandroidも解決!
 
オプションについてやや詳しく書いてあるサイト
Geolocation API


ではお先に失礼します。

androidでoverflow:scrollがきかないのをjavascript(jQuery)で解決する

※一部ソースが間違えていたので修正しました[20131028]


サイトをつくっていて、特定の領域だけスクロールさせたいとき、
要素をdivでかこんで

overflow:scroll;

などとします。

スマホ用サイトでも、使うことはちょくちょくあるのですが、なんとandroidでは、overflow:scrollがきかずに、強制的にoverflow:hidden;になってしまうというバグが。

それを解決するライブラリも半日探したけれど見つからず、、
しょうがないのでjavascriptを自分で書いて解決してみたら、
思いの外簡単だったので、共有しときます。

基本的にはコピペでいけると思います。

javascript部分(というかjQuery) 

$(function(){
var box = $('#touchbox')[0];
var touchStartPositionX;
var touchStartPositionY;
var touchMovePositionX;
var touchMovePositionY;
var moveFarX;
var moveFarY;
var startScrollX;
var startScrollY;
var moveScrollX;
var moveScrollY;

box.addEventListener("touchstart",touchHandler,false);
box.addEventListener("touchmove",touchHandler,false);

function touchHandler(e){
var touch = e.touches[0];
if(e.type == "touchstart"){
touchStartPositionX = touch.pageX;
touchStartPositionY = touch.pageY;
//タッチ前スクロールをとる
startScrollX = $('#touchbox').scrollLeft();
startScrollY = $('#touchbox').scrollTop();
}
if(e.type == "touchmove"){
e.preventDefault();
//現在の座標を取得
touchMovePositionX = touch.pageX;
touchMovePositionY = touch.pageY;
//差をとる
moveFarX = touchStartPositionX - touchMovePositionX;
moveFarY = touchStartPositionY - touchMovePositionY;
//スクロールを動かす
moveScrollX = startScrollX +moveFarX;
moveScrollY = startScrollY +moveFarY;
$('#touchbox').scrollLeft(moveScrollX);
$('#touchbox').scrollTop(moveScrollY);
}
}
});


HTMLは以下のような形

<div id="touchbox">
スクロールさせたいボックスの中身が入る
</div> 


利用するときは、javascriptの中の2行目の#touchboxを好きな名前に変更してください。


やっていることとしては、

①touchstartで触った瞬間の座標をとる
②touchmoveで動かすたびに動かした量分、座標を変更する

の2つです。

androidだけで動かしたい場合は、ユーザーエージェントでandroidだけに読ませてもいいかもです。

if(navigator.userAgent.indexOf('Android') > 0){
上記のjavascriptを入れる
}




touchイベントの取り方などについては、こちらのサイト様を参考にしました!
http://www.webcyou.com/?p=3121



 タッチして動かしているときにブラウザ自体が動いちゃうのを防ぐために
preventDefault();をいれているのですが、touchした動作すべてにperventDefaultを入れると、div内にはいっているaタグが無効になっちゃうという弊害があるので、

上記の例では、touchmoveのときにだけpreventDevaultをすることでaタグがあってもちゃんとリンクがとぶようにしています。


これをもとに、超簡易なjQueryライブラリをつくってみようかと思ってるんですが、時間がないのでまた別の機会に。 

androidではボタンをタップ(タッチ)するとオレンジの枠がでてうっとおしい

スマートフォンサイトを作って、iphoneでチェックするときは、リンクをつけたボタン画像なんかをタップしても 全然気にならないのに、androidで見ると、いちいちタップするたびにオレンジの枠が出て、うっとおしいですよね。

あれはcssでサクリと消せます。

*{-webkit-tap-highlight-color:rgba(0,0,0,0);}

 cssファイルにこれを一行いれるだけです。


僕はiphoneユーザーということもあって、androidのオレンジの枠が気になるので入れておきたい派。 

androidでbox-sizingがうまくいかないバグ

スマホではとっても楽になる
css3のbox-sizingプロパティ。 


box-sizing:border-box

とすると、paddingとborderをwidthやheightの中に含めてくれます。

心置きなく

width:100%;
padding:10px;

とかできます。 


でも、androidだと、box-sizingがそのままではうまくいかない。
(バグではないですけど)

androidの場合はwebkitのベンダープレフィクスをつければOK

box-sizing:border-box;
-webkit-box-sizing:border-box;
 
他にもこの手のcss3 の解決法はありそう。
困ったらとりあえずベンダープレフィックスをつけてみるというのもひとつですね。
 
記事検索

リモキュー

お仕事のご依頼・お問い合わせはこちら

コーディングのお仕事が得意です。

https://twitter.com/tacshock
タグクラウド
QRコード
QRコード
  • ライブドアブログ