【jquery】楽天GOLD用　パソコンのゴールドページにスマホでアクセスしたらGOLDスマホページにリダイレクト

11/17に書いた↓があるんですが、
楽天GOLDなどでスマホに飛ばすとき[jquery]

諸事情でPCゴールドを見せるのが微妙だったので、
とりあえず別verで対処しておこうかなーと。
まあ、楽天限定じゃないので、実質的にはjqueryでのスマホ振り分けになりますね。

●前提条件として
pcとスマホで同じページがあること
たとえば　http://www.rakuten.ne.jp/gold/●●●/aaa.html がPCとした場合、
スマホでは　http://www.rakuten.ne.jp/gold/●●●/sp/aaa.html のページがあるのが条件です。
　　

<script type="text/javascript">
<!--
 var currentUrl = window.location.href;
 var resultUrl =  currentUrl.replace("http://www.rakuten.ne.jp/gold/●●●/", "http://www.rakuten.ne.jp/gold/●●●/sp/"); 

 if((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1)
  || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
	window.location.href = resultUrl;
 }
-->
</script>

これはどこのページをスマホで見ても対応したスマホページを表示させかったので、URLを置換して表示させています。
無い場合は普通にトップにリダイレクトさせればよいので

<script type="text/javascript">
<!--

 if((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1)
  || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
	window.location.href = "http://www.rakuten.ne.jp/gold/●●●/sp/";
 }
-->
</script>

こうなりますのです。
楽天の場合は大体がドリウィで構築してることが多いのでPCのテンプレヘッダに入れて構築すれば一瞬で完了＾＾ｂ
ユーザビリティ的には１番目が良いかな～と思ったり。

javascript jquery smartphone

[覚書]スマホでページ内リンク

ページ内リンク押せないので焦ってたらスマホは同ページ内リンク効かないですね

というわけで、こちらのサイトさんのコードを拝借しまして
http://mermaid1112.hatenablog.com/entry/2012/09/01/192503
http://jsdo.it/blogparts/sFQq　

<script>
var flag;
$('a')
.bind( 'touchstart', function(){
flag = true;
}).bind( 'touchmove', function(){
flag = false;
}).bind( 'touchend', function(e){
linkEvent(this,e);
flag = false;
});

function linkEvent(self,e){
if(flag){
var url = $(self).attr('href'),
$target = $(url);
if ($target.length) {
e.preventDefault();
//$(window).scrollTop($target.offset().top);
$('html,body').animate({ scrollTop: $target.offset().top }, 'normal', 'swing');

return false;
}
}
}

</script>

//で消している下の部分を

$(window).scrollTop($target.offset().top);

スムーズスクロールにしたかったんでこっちに修正して完了！

$('html,body').animate({ scrollTop: $target.offset().top }, 'normal', 'swing');
iphone smartphone

スマホ　メニューのスクロール慣性に対応したドロワーメニュー【spslidemenu】

正式名称をようやく知りました。ドロワーメニューっていうですねアレ。

sidrを入れていたのですが、iphoneのchromeとandroid標準ブラウザ(仕様的)で不具合頻発だったので
探しに探しまくりいろいろ検証した（約３時間ほど）結果、

be-hase.comさんの【Spslidemenu】が操作性・安定性ともに一番使いやすいかと思います。
http://be-hase.com/javascript/428/

※ただやはり「android標準ブラウザ」は強敵で、demoにあります「No Header」はメニューが開かず延々更新されるという罠。
（はじめてandoroidがにくいと思った瞬間）
まさしく↓ですね。４時間ほど格闘しました。

Android端末におけるオーバーレイ表示時の困った現象の報告と、その対処法について
http://blog.bluearrowslab.com/smartphone/topicks/237/

とりあえずなんちゃって対処方法はまた今度。。。覚えてたら書こう。。。

javascript smartphone

スマホページ　横スライドページ形式の参考サイト

ずっと何がしか面倒そーややこしそーで避けていたスマホコーディングにもとうとう手を出さないといけなくなりまして...

今回はこの方法じゃないので、使わないのですが

今後役にたつと思うので（というか作ってみたいので）φ(・ｪ・o)~ﾒﾓﾒﾓ

【jQuery mobile でまず押さえておきたいページ構造】
http://billboardtop100.net/BLOG/jquery-mobile/cat26/

jquery smartphone

[Jquery]スマホ対応のイメージスライダー[Flexslider]

スマホ案件で既存で使われてたスライダーがうまく作動しないってことだったのでこちらに切替。

スワイプもフリックも使わない単純なイメージスライダーが良かったので、軽いし導入もらくらくでした。

[Flexslider]
http://www.woothemes.com/flexslider/

導入方法は下記を参考しました
http://sterfield.co.jp/designer/%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%B3%E5%AF%BE%E5%BF%9C%E3%81%AE%E7%94%BB%E5%83%8F%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%80%E3%83%BC.html

jquery smartphone