Webを作っている者です。
各デバイスごと(PC、携帯電話、スマートフォン)にリンクの飛ばし先を振り分けたいと思っています。
.htaccessを用いての振り分けというのはよく聞くのですが、私がやりたいのは
index.html←ここはPC、携帯、スマートフォン共通のトップページ
↓
入場リンク(ボタンは一つ)
→PC用ページ(PC用サイトのディレクトリに飛ばす)
→携帯用ページ(携帯用サイトのディレクトリに飛ばす)
→スマートフォン用ページ(スマートフォン用サイトのディレクトリに飛ばす)
要するに、トップページは共通でそこにある一つのリンクボタンをクリックした際に振り分けたいのですが、
この場合は.htaccessで振り分けが可能でしょうか?
.htaccessが無理でしたら、どのように振り分けれるでしょうか?
よろしくお願いいたします。
No.4ベストアンサー
- 回答日時:
いろいろ方法はあると思いますが、質問者さんがご存知の方法でもできますよ。
まず、index.html自体を.htaccessを使って振り分ける方法は分かるのですよね?
それを前提にすると、index.htmlは入場リンクを置いて、そのリンク先はindex2.htmlとする。その上で、index2.htmlへのアクセスを.htaccessを使って振り分ければよいのかと思います。
No.3
- 回答日時:
こまけーことはいいんだよ。
そういった振り分けをしろってクライアントから言われてることも多いんだよ。(今回はわからんけど)
.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
- 回答日時:
<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-html4 … )]より
なのです。だから発展してきたし、それがあるからHTMLでページを作成するのですから、ユーザーエージェントごとにページを作っていたのでは意味がありません。
同じ項の中ほどに
【引用】____________ここから
HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。
もし【相互運用性確保の】努力が成されなければ、Webは互換性のないフォーマット毎に分け隔てられた世界に分割され、すべての関係者にとっての商業的可能性が減少することとなるであろう、大きなリスクを負うこととなる。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
特にスマホの利用が想定されるサイトでしたら、スマホはCSS3にも対応していることも考えると、PC用とスマホ用は同じHTMLでよいはずです。
また同じコンテンツのページを複数置く事はSEO的にも重大な問題です。
[基本的には]
・ページはHTMLを活用して一つのページのみ作成する。
・ユーザーエージェントによってスタイルシートでデザインのみ変更する。
基本的には480px~1000px程度のリキッドデザインで作成し、
それ以上は必要に応じてmedia Queryでデザインを変更する。
・データ量が多いなど携帯電話には負荷が大きいページは小分けして専用ページへのリンクを設ける。
・端末専用ページが必要なら設ける。
スマホ用アプリなど
これが、最も作成するのは容易でしょう。もちろんSEO的にも全く問題ないですし、「ただ1種類の文書しか作る必要がなくなるから」
No.1
- 回答日時:
よくやる手?は
アクセスしてきた端末の使用してる「ユーザーエージェント」って奴を見て、判断して振り分けてやる。
とかですが。。。
おいらは、かなり大雑把にしかやったことないので、どこまで細かく出来るのかは、何ともいえません。。。
他の方の回答も参考にしたいので、参考情報~程度の書き込みですが、失礼します。
http://ja.wikipedia.org/wiki/%E3%83%A6%E3%83%BC% …
http://www.openspc2.org/userAgent/
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- 格安スマホ・SIMフリースマホ スマートフォンを持ちたいのですが、どこが安くて良いですか? 6 2022/09/06 20:36
- その他(クラウドサービス・オンラインストレージ) firestorage_androidスマホでダウンロードできない 1 2022/10/25 08:18
- docomo(ドコモ) 携帯 arrows we の操作 4 2023/03/29 18:53
- ホームページ作成・プログラミング パスワードつきホームページ トップページ以下はどうなる 6 2022/08/16 12:04
- 格安スマホ・SIMフリースマホ ガラホからスマホデビューをしたい 5 2022/09/15 08:15
- その他(IT・Webサービス) WEBサイト内のファイルを探す方法は? 1 2022/11/11 16:38
- ホームページ作成・プログラミング ログインしないとみることができないWebページの作成方法 3 2023/07/29 13:33
- docomo(ドコモ) ドコモのスマートフォンを安く買う方法は? 9 2022/09/28 20:07
- ハッキング・フィッシング詐欺 至急です。 ブラウザを開いていないのに、ブザー音とともに、変な警告画面が、出てきます。 4 2023/01/02 18:58
- その他(ネットショッピング・通販・ECサイト) ジョーシンでクレジットカード番号が入力できません 1 2022/08/22 23:07
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ホームページを作っているので...
-
レスポンシブデザインとは? ...
-
HPビルダーのフレームページ...
-
スマホ横幅が720px だけ 横が...
-
Excelで、社外秘(閲覧のみ)と...
-
HTMLからフォルダを開きたい
-
HTMLページが勝手にダウンロー...
-
ホームページでファイルをダウ...
-
VBA URLDownloadToFileについて
-
iPadの標準ブラウザでローカルH...
-
Webサイトから、txtファイルを...
-
どのページもすべて同じURLなの...
-
form action="#"
-
HTMLで別PCのフォルダを開く
-
ページの途中にリンクするとそ...
-
URLDownloadToFile でダウンロ...
-
リンク先に日本語フォルダがあ...
-
htmlの謎
-
htmlファイルの表示が真っ白
-
XREA使用で作成したHTMLファイ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ホームページを作っているので...
-
ホームページ、iPadやiPhoneで...
-
スマホでPCサイト見たらスマホ...
-
ブラウザ切り替え
-
スマホだけメニューが開く設定...
-
ガラケーサイトの一般的な画面...
-
ホームページ制作、SPサイトの...
-
Safariで、ボタンが丸くなるの...
-
リンクの下線は消すのが普通?
-
趣味でhtmlを勉強するのに適し...
-
平均的なウィンドウサイズとは?
-
画面は固定と可変のどちらがい...
-
スマートフォン制作の画像サイ...
-
HPビルダーのフレームページ...
-
レスポンシブ 横1080px高解像度...
-
PC・ガラケー・スマホの振り分け
-
厳しいご意見を下さい!
-
(Webデザイン)ボタンのレイアウ...
-
PCとスマホで列の数を使い分け...
-
WEB閲覧中のPCの解像度を...
おすすめ情報