2011年10月12日

スマートフォン、タブレットのUA(ユーザーエージェント)判別と判定方法

PCサイト、モバイルサイト、スマホサイトの3サイト対応はPHPやCGI、.htaccess、Javascriptでのユーザーエージェント(useragent)での切替で対応できます!ただ、PCサイトに加え、モバイルサイト、スマートフォンサイト構築も対応しないといけませんので、WEB制作会社は儲かる?ただ、効率化等を考えなければ時代の流れにおいていかれちゃいますね・・・。

スマホやタブレットは脱PCの流れです。ジョブスが作ったパーソナルコンピューターは、自分自身のイノベーションで自分終焉させ、新しいスマホやタブレットの時代を作りました。自分の作った偉大なる発明や商品も新しい時代の前に容赦なく叩き壊して先に進む勇気と先見性・・・。素晴らしいですよね。

今後、パソコン、携帯電話の流れはスマートフォン、タブレット、更にインターネットTV?といった家電、身近なIT機器に流れていくことは間違いありません。

スマホ、タブレットの流れに乗り遅れないように・・・。

PHPでのスマホ判定、判別には「useragent」のチェックが大事。もちろんJavaScriptでもできますよ。サーバがPHPに対応していない場合はCGIかJavaScriptでユーザーエージェントで判別し、別なドメインかディレクトリーのスマホ対応サイトに誘導するか、CSS等の切替でスマートフォン専用のページレイアウトに切り換えていく必要がありますね。

詳しくは下記のサイトにて、スマホUA(ユーザーエージェント)の内容、PHPでのユーザーエージェント判別と別ページへの誘導、JavaScriptを用いたユーザーエージェントの誘導、CSSの切替方法が記載されていますよ!

http://www.kagua.biz/android/ualist.html
http://linker.in/journal/2010/03/iphonecssphpjavascriptcss.php

ちなみに・・・

PHPでUAを調べます。(iPhoneの場合)


$browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
if ($browser == true){
$browser = 'iphone';
}



その後はCSSをスマホ対応のものに切り換えたり、スマホ対応ページに誘導することもできますね。

次はJavaScriptです。まずはUAを調べます。


if (navigator.userAgent.indexOf('iPhone') != -1) {
document.write('');
}else {
document.write('');
}



コチラではUAを判定した後、CSSを切り換えるようにしています。コチラもUAを判定した後にスマホ対応のページに誘導するなどの手法が考えられますね。

スマホページの作成自体はコチラの書籍等をご確認下さい!HTML5の流れ・・・・ちゃくちゃくときてますね!おいていかれないようにしなくちゃね!

iPhone+Android スマートフォンサイト制作入門 (WEB PROFESSIONAL) [大型本]
価格: ¥ 2,499 通常配送無料



大企業を中心に、iPhoneやAndroidといったスマートフォン向けに最適化されたWebサイトを構築する企業が増えています。本書は、いわゆる「スマートフォンサイト」の基本的な作り方をいちから解説した入門書です。 「スマートフォンサイトはまったくの初めて」という方でも理解できるように、サイト設計~制作~公開までの流れを、著者が手掛けた実例で解説。PCサイトをCSSとJavaScriptだけでスマートフォンに対応させたり、jQueryを使ってタブパネルなどの定番のUIを作ったり、実務で使えるTips も多数盛り込みました。 内容だけでなく、色分け付きのフルカラーのソースコード、サンプルの動きをすぐに確認できる「liveサンプル」、画面設計に便利な専用ノート「ペーパープロトタイピングブック」(本書に付属)など、見やすさ、使いやすさにもこだわった1冊です。

HTML5+CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応 [単行本(ソフトカバー)]
価格: ¥ 2,310 通常配送無料


パソコン用サイトを小さくしても、iPhone対応ではありません!★ パソコン用サイトをベースに、見やすく使いやすいiPhoneサイトを設計&制作する方法を最新の「HTML5」&「CSS3」を使い、実在サイトを例にサンプルコードを交えて実践的に解説。iPhoneにふさわしいデザイン・ノウハウも満載です。

HTML5の流れの中でも変わらないものはプログラムの基本だったりします。基本をしっかり押さえてお客を見据えていれば、ツールが替わっても本質は変わりませんから心配ありませんね♪
posted by WEBプログラム at 10:05| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。