ハナモゲラボ / 試行錯誤の実験人生

日々、PCや各種デバイス、楽器等に翻弄されながら電脳の森をさまよう男の日常と様々な実験をさらりと記しております。

PC、スマートフォン、携帯サイト。さて、どう振り分けようか。

December 13 2011

最近のWeb制作の大きな柱となるのが
■PCサイト
■ガラケーサイト(フィーチャーフォン、だっけ)
■スマートフォンサイト
の3つでありますが、
そりゃ同じHTMLでCSSで切り替えるって事もできたりもします。

そしてiPhoneの総本山とも言えるAppleは
実はスマートフォン専用サイトを作っていない。

pxt|考察:Appleはスマホサイトを作らない。
http://www.pxt.jp/ja/diary/article/257/index.html

小さな画面でありながらページ上の構成要素の全体を一目で把握して、
自分が必要な情報に、直感的なダブルタップの操作でフォーカスできる。
興味の順に次々読み進められるし、斜め読みだってできてしまう。

これが、Appleが掲げたモバイルサイトのデザインであり、
Mobile Safari のUI設計の本質なのではないだろうか。
実際に「スマホサイトがないことに今まで気づかずにいられた」のは、
このデザインで特にストレスを感じなかった証拠でもある。

実はAppleは、スマホサイトをしっかり作っていた、というわけだ。

とはいえ、ニッポンにはまだまだガラケーのユーザーがいるのも事実。
そのガラケーですらDocomo,au,softbankの仕様はおろか
各機種の画面サイズやらブラウザのバージョンやらでもうムチャクチャな状態だ。
しかし、これは無視できない。
最近はだいぶと仕様が各キャリアで近づいてきているが
やはり一番クセのあるDocomoの仕様で合わせて制作するパターンが多い。

PCサイトをWordpressで構築して、WPTouchやKetai Styleなどの
プラグインを駆使して制作する手もあるにはあるが
固定ページがTOPページだと色々と手を入れないとけっこうキツい。

なので
■PCサイトは静的サイト
■ガラケーサイトはDocomoに合わせたインラインCSSで3キャリアをカバー
■スマートフォンサイト(iPhone,android)は兼用で制作
と、各自3つのサイトを制作して振り分けるケースを考えてみました。

まずは.htaccessを使ってガラケーからのアクセスを専用ディレクトリに転送する。
ルート下にmbというディレクトリを作ってそこにガラケーサイトを設置した場合、
HTTP_USER_AGENTを使って移動させるための記述。
(正確にはmb以外にアクセスしてくる端末を強制的にmbに飛ばす、って感じ)

RewriteEngine on
RewriteCond %{REQUEST_URI} !(^/mb/)
RewriteCond %{HTTP_USER_AGENT} ^(DoCoMo|KDDI|DDIPOKET|UP\.Browser|J-PHONE|Vodafone|SoftBank)
RewriteRule ^(.*)$ /mb/ [R,L]

次はスマートフォンですが、こいつはPCサイトも普通に見れるので
強制的に飛ばすよりも、ユーザーに選択させる方が吉、と思い
PCサイトページにjavascriptを使って、バナーを表示させる事にする。

spというディレクトリにスマートフォン専用サイトを設置するとして

 if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0 ) {
document.write('<p align="center"><a href="./sp/index.html"><img src="./img/tosmart.jpg" width="600" height="140" /></a>');
}

この記述のjsファイルを作って、bodyタグのすぐ下でscriptタグで読み込ませると
iPad以外のスマートフォン端末がPCサイトのTOPにアクセスしてきた場合に
600×140ピクセルのバナーを最上部、中央配置で表示させる事ができます。
PCで見てもこれは表示されません。

後はスマートフォンサイトのフッターにPCサイトへの切り替えスイッチを設置。
これでユーザーがPCサイトとスマートフォンサイトを
行ったり来たり出来る様になります。

それにしてもあと3年とかで、なにもかもが大きく変わってそうですねえ。
だからこそ、この仕事はおもしろいんですけども。

| Posted in Web関連 | Comments (0)

Post a Comment

※メールアドレス、URLは任意入力です。メールアドレスは入力しても公開されません。

« May 2017 June 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30