jQuery Mobileの記事一覧

・簡単な使い方と使用例
　使い方と使用例（その１）
　使い方と使用例（その２）

・ユーザーインターフェース（画面）の作り方
　jQuery Mobileの構造を覚えよう
　ボタン
　ヘッダー
　フッター
　フォームメニュー
　折りたたみ式（アコーディオン式）メニュー
　ナビゲーションバー
　全画面表示
　リストメニュー
　モーダルダイアログ
　リンク構築上の注意点

・API
　Configuring defaults（その１）
　Configuring defaults（その２）
　Events
　プロパティ・メソッド

iPhoneやiPadに代表されるスマートフォンやタブレットの大きな特徴の一つに縦持ちした場合と横持ちした場合、画面が縦長もしくは横長になる。

せっかくなので、縦持ちから横持ちに切り替え時に、スタイルシートを入れ替えたい。
今回はその方法について簡単に説明する。

以下のようなタグをヘッダーに埋め込めば、画面が縦長の場合と横長の場合でスタイルシートが入れ替わる。
もちろん、「portrait.css」や「landscape.css」は個別に用意する必要がある。

    <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 
    <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

上記設定で、
　・画面が縦長の場合には「portrait.css」が適用
　・画面が横長の場合には「landscape.css」が適用
されることとなる。

画面の小さなiPhoneなどのスマートフォンと画面の大きなiPadなどのタブレットで適用されるスタイルシートを変更したい場合もあるだろう。
その場合は、以下のように上記スタイルシートを変更することで、iPhoneとiPadの場合に適用されるスタイルシートを変更することが可能だ。
それが、「max-device-width」もしくは「min-device-width」となる。
「max-device-width」は最大の横幅が指定された幅以下であった場合という意味
「min-device-width」はその逆で、最小の横幅が指定された幅以上であった場合という意味となる。

したがって、iPadとiPhoneでスタイルシートを入れ替える場合は、以下のような記述となる。

    <!-- iPad Stylesheet --> 
    <link rel="stylesheet" media="all and (max-device-width: 1024px) and 
    (orientation:portrait)" href="ipad-portrait.css" type="text/css" /> 

    <link rel="stylesheet" media="all and (max-device-width: 1024px) and 
    (orientation:landscape)" href="ipad-landscape.css" type="text/css" /> 


  <!-- iPhone Stylesheet --> 

    <link rel="stylesheet" media="all and (max-device-width: 480px)" 
    href="iphone.css" type="text/css" /> 

上記はの場合
　・「横幅が1024px」までで「縦長」の場合は「ipad-portrait.css」が適用
　・「横幅が1024px」までで「横長」の場合は「ipad-landscape.css」が適用
　・「横幅が480px」までの場合は「iphone.css」が適用
されることとなる。
※iPhoneに限っては縦長、横長のいずれでも同じスタイルシートが適用している。

PC用サイトとスマートフォン用サイトで閲覧させるURLを振り分ける方法には幾通りかある。
今回はもっともポピュラーな方法であるJava Scriptを用いた方法を紹介

Apple系のスマートフォンは大きくわけると
　・iPhone
　・iPad
　・iPod touch
に分けられる

それぞれのUser-Agent(ユーザーエージェント)は以下のように設定されている。
（バージョンによる差異はある）

iPhone	Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_2_1 like Mac OS X; ja-jp) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148a Safari/6533.18.5
iPad	Mozilla/5.0 (iPad; U; CPU OS 4_2_1 like Mac OS X; ja-jp) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5
iPod touch	Mozilla/5.0 (iPod; U; CPU iPhone OS 3_0 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16
android	Mozilla/5.0 (Linux; U; Android 1.6; ja-jp; SonyEricssonSO-01B Build/R1EA018) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1

このUser-Agentのキーワード、つまり「iPhone」「iPad」「iPod」「android」で判定をさせるのが一般的なようだ。

以下の例は、iPadはPC用に、「iPhone」「iPod」「android」はスマートフォン用サイトに遷移させるJava Scriptの記述

強制的に飛ばさずに、いったん確認ダイアログを出力させるようにしている。

<script type="text/javascript"> // iPhoneまたは、Androidの場合は振り分けを判断
 if (navigator.userAgent.indexOf('iPhone') > 0 
 && navigator.userAgent.indexOf('iPad') == -1) 
 || navigator.userAgent.indexOf('iPod') > 0 
 || navigator.userAgent.indexOf('Android') > 0) 
   {     
       if(confirm('このサイトにはスマートフォン用のサイトがあります。\n表示しますか？')) 
           {         location.href =http://サブドメイン名';     
           }
   } 
</script> 

少々応用して、何度も同じメッセージを出さないようにしたのが以下の記述
直前のreferrerがスマート用の（サブ）ドメインかどうかを確認しているだけの違いだ

<script type="text/javascript"> // iPhoneまたは、Androidの場合は振り分けを判断
 if (document.referrer.indexOf('サブドメイン名') == -1 
 && ((navigator.userAgent.indexOf('iPhone') > 0 
 && navigator.userAgent.indexOf('iPad') == -1) 
 || navigator.userAgent.indexOf('iPod') > 0 
 || navigator.userAgent.indexOf('Android') > 0)) 
   {     
       if(confirm('このサイトにはスマートフォン用のサイトがあります。\n表示しますか？')) 
           {         location.href = 'http://サブドメイン名';     
           }
   } 
</script>