こんにちは！
悩めるコーダーウフルこと、ゆぅです！

さて、今回のテーマは「jQuery Mobileでサイトを作ってみた。Vol.3」！
（第一弾「jQuery Mobile基礎」、第二弾「jQuery Mobile　オリジナルテーマ作成編」なんかもあるので見てない方はこちらもどうぞ。）

今回でjQuery Mobile関連いったん最終回です。
(8月に出るという噂のjQuery Mobile正式版が出たらもうちょっと何か書くかもしれません。)

こちらが今のところのスマホ版ウフル会社サイトです。
PCからでもアクセス可能。(IEで見るのは微妙ですが見れないことはないです）

jQuery Mobile自体がまだベータ版ということで、実験的に作成したものなので中身はとてもシンプル。
ホームにはお知らせ、ウフルについてには会社概要、アクセスにはGoogle マップで地図を載せ、各ページ下部にはお問い合わせボタンとTwitter、Facebookへのリンクボタンを配置しています。フッターにはPC版への表示切替用リンク付けています。

スマートフォンでPC版にアクセスするとスマホ版を表示

PC版(http://uhuru.co.jp/)にスマートフォン（今回はAndroid,iPhone,iPad対応）でサイトを表示させたときに、スマートフォン版(http://uhuru.co.jp/sp/)へ飛ばす処理をしています。

PC版のheadの中に下記を追加。

<script type="text/javascript">
//<![CDATA[
    function getRequest(){
		if(location.search.length > 1) {
			var get = new Object();
		    var ret = location.search.substr(1).split("&");
		    for(var i = 0; i < ret.length; i++) {
		    	var r = ret[i].split("=");
		    	get[r[0]] = r[1];
		    }
		    return get;
		} else {
		    return false;
		}
	}

	var get = getRequest();
	var viewas = get['viewas'];
	var agent = navigator.userAgent;
	if (viewas != 'pc') {
		if(agent.indexOf('Linux; U; Android ') != -1
			|| agent.indexOf('iPhone; U') != -1
			|| agent.indexOf('iPad; U') != -1){
			location.href = '/sp/';
		}
	}
//]]>
</script>

（※サイトにアクセスしたときに「スマホ版を表示させますか？はい/いいえ」的なものは入れてません。私自身がせっかちなので「どっちでもいいから早く表示して！」って思ってしまうんで。。。今後は何か考えます。）

スマホ版からPCの表示に切り替えるリンクをフッターにつけておきます。

<a href="/index.php?viewas=pc">PC</a>

ここの部分は別の中の人に作っていただいたのでさらっとしか書けないですが、アクセスしたときURLに「viewas=pc」がないときに、AndroidかiPhoneかiPadかどうかを判断して、そうだった場合は「/sp/」に飛ばしています。スマホ版から戻るときには「viewas=pc」をURLにひっつけるわけです。

PC版をスマートフォンで見る場合はフッターにスマホ版へのリンクを表示させます。

<div class="sm_display">
        <p>表示:<a href="/sp/">スマートフォン</a> | PC</p>
</div>

このままだとPCで見てもそのまま表示されてしまうのでCSSで消しておき、メディアクエリを使ってスマートフォンで見たときだけ表示されるようにします。

.sm_display {
	display:none;
}
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) ,
only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	.sm_display{
		display:inherit;
	}
}

今回作成した会社サイトは暫定版って感じなので本当にシンプル構成なのですが、今後もうちょっと凝ったものにしたいなと思います。

参考サイト

• コリス | [CSS]Media Queries（メディア クエリ）を使用したデバイスごとの指定方法のまとめ
  

おまけ

実はスマホ版ウフル会社サイトは密かにheader,footer等のタグが使われています。例えば「＜div data-role=”header”＞」 を「＜header data-role=”header”＞」とか。でもタグでheader って定義してるのに、data-role（カスタムデータ属性）でまた役割を示してるのが冗長な気がしていて今後ってheaderって書くだけでdata-role=”header”と同じことになんないのかしらとか思ったり。

ナビゲーション部分には「data-role=”navbar”」を使用しているのですが、ページ内リンクをした際、該当ページの前のページ（今、表示されている前のページ）のナビゲーションにフォーカスが当たり、「ui-btn-hover-任意の一文字（ボタンにホバーした時のクラス）」クラス追加されてしまって困りました。結局、jQueryMobileを落としてきてカスタマイズ。。。ページ内リンクだからかなぁ。。。（カスタマイズは”vmouseover focus”:function(b){if(b=d(b.target)){var b=a(b),c=b.attr(“data-”+a.mobile.ns+”theme”);b.removeClass(“ui-btn-up-”+
c).addClass(“ui-btn-hover-”+c)}}…ってなってるところを”vmouseover”: function…に変えてみただけです。）