Web作成、ひとつのリンクボタンから振り分けたい

質問

Webを作っている者です。
各デバイスごと(PC、携帯電話、スマートフォン)にリンクの飛ばし先を振り分けたいと思っています。
.htaccessを用いての振り分けというのはよく聞くのですが、私がやりたいのは

index.html←ここはPC、携帯、スマートフォン共通のトップページ
↓
入場リンク（ボタンは一つ）
→PC用ページ(PC用サイトのディレクトリに飛ばす)
→携帯用ページ(携帯用サイトのディレクトリに飛ばす)
→スマートフォン用ページ(スマートフォン用サイトのディレクトリに飛ばす)

要するに、トップページは共通でそこにある一つのリンクボタンをクリックした際に振り分けたいのですが、
この場合は.htaccessで振り分けが可能でしょうか？
.htaccessが無理でしたら、どのように振り分けれるでしょうか？

よろしくお願いいたします。

回答No.4

tracer · ベストアンサー

いろいろ方法はあると思いますが、質問者さんがご存知の方法でもできますよ。

まず、index.html自体を.htaccessを使って振り分ける方法は分かるのですよね？
それを前提にすると、index.htmlは入場リンクを置いて、そのリンク先はindex2.htmlとする。その上で、index2.htmlへのアクセスを.htaccessを使って振り分ければよいのかと思います。

回答No.3

Taiyonoshizuku

こまけーことはいいんだよ。

そういった振り分けをしろってクライアントから言われてることも多いんだよ。（今回はわからんけど）

.htaccessよりはJavaScriptまたはサーバ側の処理でリンク先を変えるのがいいんじゃない？
ユーザーエージェンシーを見て動的にリンク先を変える方法。

今ユーザエージェンシーは多岐に渡るから詳細はどっか検索してみて。

JavaScriptでやるかサーバー側でやるか決めてくれたら簡単にだけど組んであげるよ。
サーバー側でやるなら動作する言語を教えて。

補足

ありがとうございます。
JavaScriptでのやり方を自分なりに調べてみたらできたのですが、携帯電話の場合だとJavascriptが読み込めないのでどうしようかという感じです。しかし、スマホの場合だと.htaccessが効かないみたいですね。。
No.4さんのように、新しく/e/というディレクトリを作ってそのなかにindex2.htmlと.htaccessを入れて、index2.htmlには以下のようなスクリプトを入れてみました。
<script>
(function(){

var ua = navigator.userAgent.toUpperCase();
var url = document.location.pathname;
var spDir = '../mobile/top.html';

(ua.indexOf('IPHONE') != -1 || (ua.indexOf('ANDROID') != -1 && ua.indexOf('MOBILE') != -1))?
isSP() :
isPC();

function isSP(){
if(url.match('../mobile/top.html')){
return false;
}else{
location.href = '../mobile/top.html';
}
}

function isPC(){
if(!url.match('../mobile/top.html')){
return false;
}else{
location.href = '/';
}
}

}());

(function(){
var ua = navigator.userAgent.toUpperCase();
if(ua.indexOf('IPHONE') != -1 || (ua.indexOf('ANDROID') != -1 && ua.indexOf('MOBILE') != -1)){
location.href = '../mobile/top.html';
}
}());
</script>

これはiPhoneなどスマホ用です。
携帯とPCは.htaccessを読み込ませるようにしたいのですが、どうもうまくいきません。
記述が間違っているのでしょうか。以下のように書きました。

# 携帯とPCを判別
# 携帯は../mobile/フォルダに移動 PCは../html/フォルダに移動

# Options -Indexes
# < IfModule mod_rewrite.c>

# DoCoMo
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} DoCoMo
RewriteRule ^$ '../mobile/' [R]

# Softbank
RewriteCond %{HTTP_USER_AGENT} J-PHONE
RewriteRule ^$ '../mobile/' [R]
RewriteCond %{HTTP_USER_AGENT} Vodafone
RewriteRule ^$ '../mobile/' [R]
RewriteCond %{HTTP_USER_AGENT} SoftBank
RewriteRule ^$ '../mobile/' [R]

# AU KDDI
RewriteCond %{HTTP_USER_AGENT} KDDI
RewriteRule ^$ '../mobile/' [R]
RewriteCond %{HTTP_USER_AGENT} UP.Browser
RewriteRule ^$ '../mobile/' [R]

# DDI Pocket
RewriteCond %{HTTP_USER_AGENT} DDIPOCKET
RewriteRule ^$ '../mobile/' [R]

# WILLCOM
RewriteCond %{HTTP_USER_AGENT} WILLCOM
RewriteRule ^$ '../mobile/' [R]

# iPod
RewriteCond %{HTTP_USER_AGENT} iPod
RewriteRule ^$ '../smart/' [R]

# iPhone
RewriteCond %{HTTP_USER_AGENT} iPhone
RewriteRule ^$ '../smart/' [R]

# WILLCOM
RewriteCond %{HTTP_USER_AGENT} PDA
RewriteRule ^$ '../smart/' [R]

# PC Internet Explorer Firefox
RewriteCond %{HTTP_USER_AGENT} Mozilla
RewriteRule ^$ '../html/' [R]

# PC Opera
RewriteCond %{HTTP_USER_AGENT} Opera
RewriteRule ^$ '../html/' [R]

# Mac Safari
RewriteCond %{HTTP_USER_AGENT} Safari
RewriteRule ^$ '../html/' [R]
# < /IfModule>

# .htaccess ここまで

このように書いたのですが、自動振り分けされません。
階層は分かりずらいですうが、このようになっています。
index.html
/mobile/←この中に携帯用トップページtop.htmlがある
/smart/←この中にスマホ用トップページtop.htmlがある
/html/←この中にPC用トップページtop.htmlがある
/e/←この中にindex2.htmlと.htaccessがある

よろしくお願い致します。

回答No.2

ORUKA1951

<nav>
　<ul>
　　<li><a href="/mobile">スマホ</a></li>
　　<li><a href="/phone">携帯</a></li>
　　<li><a href="/pc">パソコン</a></li>
　</ul>
</nav>
とでもして、スタイルシートのmedia queryを使ってスタイルシートで表示を変えるのが楽でしょう。

　なお、本来の方法ではありません。トップページだけでなく、すべてのページでこれを行えば良いのです。

★HMLの最も重要な目的は
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
どんな環境からも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文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。
　もし【相互運用性確保の】努力が成されなければ、Webは互換性のないフォーマット毎に分け隔てられた世界に分割され、すべての関係者にとっての商業的可能性が減少することとなるであろう、大きなリスクを負うこととなる。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より

　特にスマホの利用が想定されるサイトでしたら、スマホはCSS3にも対応していることも考えると、PC用とスマホ用は同じHTMLでよいはずです。
　また同じコンテンツのページを複数置く事はSEO的にも重大な問題です。

[基本的には]
・ページはHTMLを活用して一つのページのみ作成する。
・ユーザーエージェントによってスタイルシートでデザインのみ変更する。
　　基本的には480px～1000px程度のリキッドデザインで作成し、
　それ以上は必要に応じてmedia Queryでデザインを変更する。
・データ量が多いなど携帯電話には負荷が大きいページは小分けして専用ページへのリンクを設ける。
・端末専用ページが必要なら設ける。
　　スマホ用アプリなど

　これが、最も作成するのは容易でしょう。もちろんSEO的にも全く問題ないですし、「ただ1種類の文書しか作る必要がなくなるから」

回答No.1

STICKY2006

よくやる手？は

アクセスしてきた端末の使用してる「ユーザーエージェント」って奴を見て、判断して振り分けてやる。
とかですが。。。

おいらは、かなり大雑把にしかやったことないので、どこまで細かく出来るのかは、何ともいえません。。。

他の方の回答も参考にしたいので、参考情報～程度の書き込みですが、失礼します。

http://ja.wikipedia.org/wiki/%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%82%A8%E3%83%BC%E3%82%B8%E3%82%A7%E3%83%B3%E3%83%88
http://www.openspc2.org/userAgent/