Dreamweaverでスマートフォンサイト作成2

PCサイトとスマフォサイトの振り分け設定

パソコン用のサイトとスマートフォン用のサイトを作り分けても、別々のアドレスでアクセスさせるのではあまり意味がありません。パソコンでアクセスしてきたらパソコン用サイトへ、スマートフォンでアクセスしてきたらスマートフォン用サイトへ、と同じアドレスでアクセスしてきても、振り分けるように設定したいと思います。

ユーザーエージェントとは

ウィキペディアによると、『ユーザーエージェントとは、利用者があるプロトコルに基づいてデータを利用する際に用いるソフトウェアまたはハードウェアを指す』と以下かなり難しいことが書かれていますが、ここで使用する『ユーザーエージェント』とは、サイトのユーザーがWebブラウザ(Internet ExplorerやFirefox、Safari等)を通じてサーバーへ送信する文字情報を指します。この『ユーザーエージェント』により、サイトの振り分けを行いたいと思います。

PHPにより振り分け

ユーザーエージェントによる振り分けと言っても、.htaccessファイルによる振り分け、JavaScriptsによる振り分け、PHPにより振り分け等、色々な種類がありますが、PHPにより振り分け方法を紹介したいと思います。

PC用に作ったindex.phpを開き、セッションが開始される前の箇所にPHPのコードを入力します。

<?php
 $ua=$_SERVER['HTTP_USER_AGENT'];
 if((strpos($ua,'iPhone')!==false)||(strpos($ua,'Android')!==false))
 {
 header("Location:/sp/index.php");
 exit();
 }
 ?>

PHP初心者に、簡単に意味を解説します。変数$uaにサーバーからの情報(ユーザーエージェント)を代入します。その代入された$uaの中に『iPhone』の文字か『Android』の文字が含まれていたら、spフォルダのindex.phpへ移動するようにと命令しています。尚、最後のexit()がないとそれ以降のPHPも実行されますので、いったん会員認証画面へ移動して、認証してから、再度spフォルダのindex.phpへ移動する形になります。PC用の認証画面は見づらいのでスマートフォン用の認証画面も作成したいと思います。とりあえず現状は、スマートフォンからアクセスすれば誰でもWinRoad会員専用サイト(テストサイト)へ移動することができます。又、このままでは、iPadもスマートフォン専用のサイトへ強制的に移動する形になっていますが、その辺の変更は後日設定します。

これで『iphone』や『Android』からサーバーへアクセスしてきた場合、『sp』フォルダのindex.phpへ振り分けることができます。

jQuery Mobile ページ

それでは前回の続きとして、『Dreamweaver CS5.5』のjQuery Mobileコマンドアイコンを端から検証してみたいと思います。

①一番左端の『jQuery Mobileページ』のアイコンをクリックしてみます。出てきた『jQuery Mobile ページ』ダイアログを見てみると、現在のページにjQuery Mobileを適用させるためのアイコンみたいです。『OK』をクリックしてみます。

②ページ名の入力画面とヘッダー、フッターを使用するかどうかの確認画面が出ます。そのまま何も変更せずに『OK』ボタンをクリックします。

③下記のようにコードとデザインが作成されました。

④いったん『test.php』で保存して、Device Centralで表示してみます。以下のように表示されます。

jQuery Mobile リストビュー

①次にDreamweaverのデザイン画面に戻り、左から2番目の『jQuery Mobile リストビュー』をクリックしてみます。『リストタイプ』は、番号付きか番号無しを選択するようになっています。項目はリストの項目数を選択するようになっています。この辺は説明の必要は無いと思います。

②それ以降のチェックはどのような機能なのか検証するため、いったん何もチェックを入れずに『OK』ボタンをクリックし、Device Centralで表示してみます。下記のようなページボタンが生成されています。

③次に全部にチェックを入れ、同じくDevice Centralで表示してみます。下記のようになっています。

詳細な使い方とかは、そのうち検証したいと思います。本日はここまでにします。

このエントリーを含むはてなブックマーク Buzzurlにブックマーク livedoorクリップ Yahoo!ブックマークに登録

トラックバック&コメント

この投稿のトラックバックURL:

コメントをどうぞ

このページの先頭へ