docomo 2015-16冬春モデル予約受付中

スマートフォン対応サイト制作日誌 V ~リダイレクト処理~

今までのお話はこちら
1.スマートフォン対応サイト制作日誌 I ~ロゴの追加~
2.スマートフォン対応サイト制作日誌 II ~カテゴリの追加~
3.スマートフォン対応サイト制作日誌 III ~テーブルタグの修正~
4.スマートフォン対応サイト制作日誌 IV ~トップメニューの作成~

終わった・・・、遂に終わったよ・・・(´;ω;`)

長かったXperia非公式マニュアル スマートフォン対応の旅も、遂にこの記事で終了です。
しかも今回の内容はコピペいろんなTipsのサイトを参考にした内容なので、
今までのような地味なリンク修正や画像加工も無く、プログラム一つ書くだけで終了という
いやー、やっぱプログラム覚えないとダメだよねってことを再認識させられる内容です。

今回は「.httaccess」ファイルを使って、スマートフォンからのアクセスを自動振り分けしています。

やり方としては、以下の6行を.htaccessファイルに記述します。
既に.htaccessファイルが存在するディレクトリに設置する場合は、既存の.htaccessファイル内に追記して下さい。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^$ リダイレクト先のURL [R,L]
</IfModule>

で、4行目の

RewriteCond %{QUERY_STRING} !mode=pc

これはURLの末尾に「?mode=pc」という文字列が付いていた場合には、
スマートフォン用ページに自動的に遷移させない(リダイレクトしない)ようにする記述になっています。

ですので、トップメニュー作成の時に作成したPC版サイトへのリンク先を
http://someya.tv/xperia/?mode=pc
にしておく必要があります。
そうしておかないと、PC版トップページ(http://someya.tv/xperia/)に移動した際に、
またリダイレクトされてスマートフォン版のトップページに強制連行されてしまいます アワワ ヽ(´Д`;≡;´Д`)丿 アワワ

ちなみにjavascriptを使った振り分け方もあるようなので、関心のある方は
同じスマートフォンメディア研究員の「のらり」さんの記事を参考にしてみてください。
ここでいっちょスマフォサイトを作っちゃうよ【その5・最終回】

そんなわけで、全5回に渡ってこっそり書いてきたスマートフォン対応サイト制作日誌もこれにて終了です。
あとは訪問者様の感想を聞きながら、微調整をしていきたいと思います。

ん?
スマートフォンオプション for Movable Typeを使って、
jQuery Mobileを活用したサイトを再構築するんじゃなかったのかって?

ふん、そんなの900記事近くリダイレクト処理する苦行に耐えられそうになかったからやめたよ(`・ω・´)キリッ
(注:このサイトで使っている拡張子をphpからhtmlにする必要がありました。)

スポンサーリンク
  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク