最終的に表示がどうなるのか

Safariでは一応確認はしているけれど、iPhoneの実際のサイズや、縦横に向きを変えたときの見え方などがわからないので、ネットからiPhoneデモのソフトをダウンロードしました。

http://code.google.com/p/ibbdemo3/

ここにあります。
使用するにあたってadobe Airが必要。

外形もiPhoneをかたどっており、なんかそれっぽいです。

iPhone, iPodtouch をもってないから、最終表示確認はこれでいいかな（笑）。
アンドロイドはこれでよしとするか。

去年の９月にスマートフォン用サイトの製作に着手して、長いこと途中のまま放置状態でした。

今年の１月からまた作り始めました。
作成にあたって、気になった点をつれづれなるままに記録としてのこしてます。

＜phpによるデバイスの振り分け＞

携帯デバイスと同様に、iPod,iPhone,Androidといったスマートフォンのデバイスからアクセスがあった場合、それらを判断してスマートフォンサイトにジャンプする。

以前に、携帯デバイス振り分けをphpで記述したので、同様にphpで記述した。

＜記述＞
<?php 
// 携帯振り分け　
$ua = $_SERVER['HTTP_USER_AGENT']; 
if( 
 strpos($ua, 'DoCoMo') || strpos($ua, 'KDDI') || 
 strpos($ua, 'UP.Browser') || strpos($ua, 'Vodafone') || 
 strpos($ua, 'SoftBank') 
){ 

header("Location: "携帯用サイトのＵＲＬ");
exit; 
}elseif(
 strpos($ua,'iPhone') || strpos($ua,'iPod') ||
 strpos($ua,'Android')
){ 
header('Location: "スマートフォン用サイトのＵＲＬ");
exit; 
}
?>

＜所感 及び 注意点＞

１）記述はくれぐれも間違えずに・・・

ネット上で、『ユーザーエージェントをつかったデバイス判断』の記述を探して、それをそのままコピペしたら、正しく動作しませんでした。
いろいろ原因を探したところ、ネットで見つけた記述の　'　（クォーテーションマーク）が、全角のクォーテーションマークだったことが判明。
何も疑わず記述を使った私がいけないのだが、こういうことは気をつけよう。
ちなみに私の記述は使っていただいても大丈夫です。

２）header関数

header関数は、ｈｔｔｐヘッダーに強制的に飛ぶ関数です。
なので、header関数は、最初に書かれている必要があり、header関数が実行された後は、exitする必要があります。
そのため、header関数を複数使う場合は、同じイフ構文内に収める必要があります。

＜疑問点＞
いわゆるアンドロイド系のデバイスを判断する場合、この'Android'だけでは不十分な気がします。

アンドロイドには、スマートフォンサイズ（３．５インチ、５インチ）、タブレット（約７インチ、約１０インチ）などの多彩なサイズが存在します。

これらすべて、'Android'で飛ばしたくないな（笑）。

しかし、７インチのタブレットってなんか中途半端なサイズな気がする・・・。
でも意外と残ったりして（笑）。

いま、いわゆるスマートフォン用のサイトを作成しています。

jQurey Mobile というJavascriptを基本に作成を開始しました。

いま手初めに、オーナーブログのスマートフォンサイトを作成しています。

そうしたところ、いきなり大きな問題に直面したので記録しておきます。

＜問題＞
jQurey Mobileはページ遷移が、ちょっと特殊で、一枚のHTMLで数枚のページを表示することができる。コレを可能にするためハッシュを行っている。
しかしそれが原因で、内部で作成したいわゆる普通のサイトに飛ぶとハッシュが競合しておかしくなったりする。

ブログ記事は、PCサイト用の記事をそのまま転用することになるので、その記事内部からのPCサイトへのリンクをクリックすると、間違いなくおかしくなる。

＜解決方法＞
a タグに、rel="external"を記述するとハッシュを行わず、そのままPCサイトに飛ぶことができる。

ただ、これはすでに書かれたブログ記事の内部リンクをすべてrel="external"と記入しなければならないことになる。

だれか、rel="external"追加のプラグインを作ってくれないかなぁ。