スマートフォンサイトとPCサイトのURLを振り分け

締切済

質問者：ryuujinn11
質問日時：2012/09/23 00:47
回答数：5件

PCと、携帯、スマートフォンで違うページを閲覧させたい場合は、どのようにしたらいいのでしょうか？

さらにスマートフォンに関してはandoroidとiphoneでも振り分けたいです

検索していたらPHPやJavaScriptや.htaccessなど様々な方法があるようなのですが

どれが一般的なのか今ひとつわかりません

ユーザーエージェントを判別するには、

PHPやJavaScriptや.htaccessなど様々な方法があるようなのですが

できるだけ簡単な記述もしくは方法で

PCと携帯、スマートフォン（スマートフォンならandroidとiphoneも振り分けたい）で

違うページを閲覧させる方法がありましたら

教えてください。お願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

最新から表示
回答順に表示

No.5

回答者： taloo
回答日時：2012/09/25 03:13

>どれが一般的なのか今ひとつわかりません

一長一短ありますから、これが一般的というものはありません。

たとえばJavaScriptを使うとケータイやJavaScript未使用ブラウザで振り分け出来なくなりますが、
ウインドウサイズで振り分ける等、JavaScriptでしかできない方法で振り分ける事も可能になります。

一番簡単なのは.htaccessだと思いますが、
CGI（PHP等）を使用しているのなら逆にCGIの処理（開発管理）が複雑になる可能性もありますし、
その場合はCGIで処理した方が簡単にできるようになると思います。

>PCと携帯、スマートフォン（スマートフォンならandroidとiphoneも振り分けたい）で
>
>違うページを閲覧させる方法がありましたら
まずは.htaccessをお勧めします。

- 0
- 件

通報する

No.4

回答者： ORUKA1951
回答日時：2012/09/23 19:11

ここは議論する場ではないのですが。

　そもそも同じ画面との質問ではなく、まったく異なるデザインのページで構わないのですよね。

　そもそもプリンター、テキストブラウザや読み上げソフト、点字端末、検索エンジン(これが結構重要)、テレビなど様々な端末での利用が想定されるサイトの場合、それぞれのユーザーエージェントごとにページを作成していたら無駄です。

　きちんと、文書構造にしたがってマークアップすることだけをHTMLに任せて、スタイルシートを読み込まない、javascriptを利用しないユーザーエージェント、検索エンジンには素のHTMLで十分です。多少エレメントの属性で色をつけたり。
→『Lynx などのテキストブラウザを使用して、サイトを確認します（ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります）。 (googleガイドライン http://support.google.com/webmasters/bin/answer. … )』

　印刷が想定されるページには、ディスプレイで表示されるときと印刷用は異なるスタイルシートを用意するのと同じです。

　そしてメディアタイプでスタイルシートを切り替えればよいです。
　必要ならユーザーに代替スタイルシートを選択させれば良いです。
私は、基本的に
<link rel="stylesheet" type="text/css" href=".CSS/standard.css">
<link rel="stylesheet" type="text/css" media="screen" href="/CSS/screen.css" title="標準">
<link rel="Alternate styleSheet" type="text/css" media="screen" href="/CSS/big.css" title="大きめな文字">
<link rel="styleSheet" type="text/css" media="handheld" href="/CSS/handheld.css">
<link rel="styleSheet" type="text/css" media="print" href="/CSS/print.css">
とかしています。サイトの趣旨によって変わります。スマホの場合はウィンドウ幅でスタイルシートが選択されるようにしています。もちろんデザインは、それぞれの端末用に最適化しているのでまったく異なる場合もあります。
　その場合は、スタイルシートをUSER_AGENTで切り替えています。

　視覚障害者の利用まで考慮しなければならないときは、media="aural"や代替スタイルシーも要求される場合があります。

　すべてのページに対して、アクセスしてきたのは携帯だからアッチ、スマホだからコッチとされたのではたまりません。検索エンジンで折角、目的に合いそうなページを見つけて飛んだら『この端末では利用できない』なんていわれたら。

1) 外部スタイルシートを利用できる端末には、それぞれ可能なスタイルシートを読ませる。
2) <head>内のスタイルシートしか利用できない端末には、<head></head>内に記述する。
3) スタイルシートを利用できない携帯電話やPDAには素のHTMLを表示させる。
4) 印刷が想定されるページには、media="screen"でできるだけ白黒で表示させる。

　そんなに難しいものではないですけど・・・
　ただしオーサリングツールでそれをしようとすると完成するまでに寿命が来るかも。

今から12年前の1999年勧告のHTM4.01ですでにこうなることは想定されていて、
『HTMLの性質上、プレゼンテーションに関する要素や属性は、次々と他の機構、とりわけスタイルシートに置換えられていく。また、文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になるということが、経験的に知られている。 (構造とプレゼンテーションの分離 http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』なのですが、もう12年もなるのに、いまだにHTML3.2の時代の振り分けがされています。

- 0
- 件

通報する

No.3

回答者： b0a0a
回答日時：2012/09/23 18:34

基本はサーバー側でUAを識別してください

PC用のサイトが見たい閲覧者や、スマホ用のサイトが見たい閲覧者はまずブラウザが送るUAを変えるので、そのニーズに答えることができます

ちなみに自分もできるだけシンプルかつフレキシブルな１つのサイトにした方がいいと思います
これから家電や腕時計等の日用品もブラウザ機能を持ってきますからUAだけで分けようとするのは難しいと思われます、Android１つとっても千差万別です
せっかく複数ページを作るのならもっと違う分け方(必要な機能に対応しているか)でするか、閲覧者に選択させるべきでしょう
特に画面サイズとか、見やすさの点はフレキシブルにした方がいいです

- 0
- 件

通報する

No.2

回答者： shockatz
回答日時：2012/09/23 14:44

PCやHTML5端末ならいざ知らず、ガラケーまで含んで単一のHTMLで済ますなどというのは、現実的には不可能です。

対応エンコーディングの違いまで、どうやって吸収できるのか逆に聞きたい。
解像度についても同じ。フルHDに近いPCと、たかだか480pxのスマホで同じ画面？　ありえませんね。

UA判定は手軽さから言うと、
.htaccess > Javascript > サーバサイド（php/asp.net/java等）の順

機能・拡張性からいうとサーバサイド（php/asp.net/java等）> Javascript > .htaccess　の順です。

最近、とくにガラケーはアクセスが大幅に減っており、DoCoMo用のソースだけ用意して他はサーバサイドで自動変換するケースが多く、UA判定だけを行うというケースはまれなため、サーバサイドを使うのが常套手段ではないでしょうか？

- 0
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2012/09/23 09:44

　膨大な種類の携帯電話、これからもどんどん増えるスマートホン、タブレット、・・・これらに合わせて何枚もの同じ内容のページを作り続けるつもりですか？、そもそも何のためにウェブページ(ホームページじゃない)を作るつもりですか？

　少なくとも、ホームページ(サイトのトップページと言う本来とは違う意味で)だけはひとつのページのほうが良いですよ。

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

　たった一つのウェブページを様々な端末や検索エンジンに利用できるようにするために、私たちはHTMLでウェブページを作成しているのです。!!!--同じような内容の複数のページを異なるURLで提供したらGoogleからはじかれることもあります。

　そのためには、HTMLには文書構造だけを記述して、そのどの部分を表示して、どれを表示しないか。どのように表現(プレゼンテーション)するかはスタイルシートで指定すればよいです。このほうがはるかに楽です。たった一枚の文書だけ作ればよいのですから・・。そのうえでパソコン専用のウェブページがあれば、それへのリンクは携帯端末には表示させなければ良い。
→携帯スマートホンスタイルシート - Google 検索 ( https://www.google.co.jp/#hl=ja&safe=off&output= … )
★すくなくとも、サイトのホームページ(トップ)だけは端末に依存しないように作成する。
★すべての端末で利用できるよう、まっとうなウェブページを作成する。
★データ量や内容で特定の端末だけを想定しているページへのリンクはそれ以外の端末には表示させない。

　利用する分にはよいですが、製作者の立場、あるいはこの様な場合は「ホームページ」じゃ意味が通じなくなります。
→ホームページ - Wikipedia ( http://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC% … )