スマホでPCサイト見たらスマホへ誘導するリンク

質問

スマートフォンサイトを初めて制作を試みていますが

スマートフォンでPCサイトを見た時に
下記URL　日産自動車のホームページのように
スマートフォンサイトはこちらというリンクがある場合があります。
http://www.nissan.co.jp/

これを作成したいのですが、どうすればいいのでしょうか？

スマホサイトからもPCサイトへ
リンクさせたいです。

初歩的質問で申し訳ありませんが
ご存じの方教えてください。よろしくお願いいたします。

回答No.2

shockatz

PCサイトとスマホサイトの区別は、基本的にサーバサイドフレームワーク（Java StrutsやASP.NET MVC、Cake phpなど）で行います。
ユーザエージェント、デバイスインフォメーション等の項目を判定しますが、これらのサーバサイド環境では、「生の」ユーザエージェント文字列を扱わなくていいよう、ライブラリ化されています。
また、「グローバルフィルタ」といって、いちいち記述しなくても、指定されたディレクトリ以下へのアクセスで自動的に判定をかけることができ、非常に使いやすいものです。

以前は"iPhone"や"Android"のようなUA文字列で一律に「スマホ」判定を行っていましたが、現在はタブレットの登場や、スマートフォンの高解像度化で、PC用ページとスマホ用ページのどちらを見せるか、という判定基準が難しくなっています。
ご提示のサイトの例では、「スマートフォン」デバイスで高解像度タイプの場合に、「あんたどっち見たいんだ？」といったような選択肢を出しているのだと思います。

なので、
・「グローバルフィルタ」（フレームワークによって読み方が違います）でユーザエージェントとデバイスを判定。
・そのデバイスが明らかにターゲットデバイスと異なっている場合は、ルーティングを書き変えて別サイトに誘導（スマホ -> PC、PC -> スマホ）。
・一部のAndroidデバイスのように、解像度判定だけでターゲット判定できない場合は、別デバイス用サイトへの入り口を提示してあげるのがプロっぽい方法です。

あ、CSS3だけで全デバイスに対応するなんて夢みたいな話が涌いてますが、真に受けないように。
そもそもデバイスの情報表示能力や、CSS3ブラウザ間の互換性すら全く取れていない状況で、そんなスキームは話になりません。

お礼

回答ありがとうございました。
色々勉強になりました。

回答No.1

ORUKA1951

そのサイト自体はソースを見たらすぐわかるようにjavascriptで判別していますね。
　⇒User Agent Switcher :: Add-ons for Firefox ( https://addons.mozilla.org/ja/firefox/addon/user-agent-switcher/?src=search )
や
　⇒FireMobileSimulator ( https://addons.mozilla.jp/firefox/details/8519 )
では表示されないので、ソースを見ると
　<script type="text/javascript" src="/TOP/2011/JS/UADisp.js" charset="utf-8"></script>
　がありました。
・サーバーでhtaccessにて振り分ける
・ページを動的に作成する。
・javascriptで
　など色々な手法がありますが、CSS3の登場で、もはや過去のものとなりつつあります。

　理由は

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。
・・・【中略】・・・
　HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より

　特にスマホは、今後のユーザーの一角を占める重要なツールとなります。いちいち、端末ごとにページを作らなくても良いのがHTMLの最大の利点で、その長所があるから、わざわざHTMLでウェブページを作るのです。

　率直に正しいHTMLでページを作成し、スタイルシートを使ってリキッドデザインでページを作成し、どうしてもそれでも不足な場合は、CSS3のMediaqueryを使ってスタイルシートで振り分ければ良いです。

　別の質問で先ほど回答した
　⇒ホームページにカレンダーを設置するには - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7989636.html )
　のNo.1の回答のHTML--回答ではUTF-8と言っていますがShift_JISです。これをブラウザで表示してみてください。＿はタブに戻すこと。
　ブラウザのウィンドウ幅を色々変えてみて御覧なさい。480px以上のウィンドウ幅なら、超幅広ディスプレイなら幅900pxでページ中央に表示されるはずです。

　スマホ用、携帯用、スクリーンリーダー用、パソコン用、印刷用・・・と様々なページを用意するのは馬鹿げています。SEO的にも最悪になります。
　それをしなくて済むのがHTMLですよ。

お礼

回答ありがとうございました。
細かい説明をして頂きありがとうございます。
勉強になりました。