田舎暮らしのウェブ屋ブログ

ホームページのハウツー・グルメレポ・書評 etc・・・

スマートフォンサイトとPCサイトの切り替え:サイトの振り分け方法(2).htaccess+javascript

パソコンサイトとスマートフォンサイトの振り分け

パソコンサイトとスマートフォンサイトの切り替え方法。
今回は、「.htaccess(mod_rewrite)でスマートフォン向けページへリダイレクトさせる方法」の、.htaccessとJavaScriptを組み合わせた方法をご紹介します。

配布サイト

以下のページで設置方法が紹介されています。
(jQueryについてさっぱりわからない、と言う人には説明が不足しているので、あとの文章で補足します)

.htaccess(mod_rewrite)でスマートフォン向けページへリダイレクトさせる方法

メリットとデメリット

メリット

  • 個々のページでPCサイトとSPサイトの切り替え対応ができるので、ユーザビリティやSEOの面で優れている
    例) PCサイト:htte://miraiynet.com/spexample.html ⇔ SPサイト:htte://miraiynet.com/sp/spexample.html
    対応するページで振り分け可能。
    ※ただし、SPサイトは決まったフォルダ内で、PCサイトと同じファイル名でなくてはならない。
  • .htaccessと、SPサイト側へのjsの設定のみでOK。
    (ただし、PC側に「SPサイトへ切り替え」のリンクをつける場合は別)

デメリット

  • PCサイトに対応するファイル名のSPサイトページがない場合はnot foundになってしまう。
    (ページがない場合のリダイレクト設定が必要)
  • .htaccessの記述にミスがあるとサイト全体に影響が及ぶ可能性もあるので設置注意。

設置の補足と、使用してみた感想

設置の補足です。

SPサイトの<head></head>内には、紹介ページのjavascript以外に、jQuery本体と、jquery-cookie が必要です。
↓このように

<script src="js/jquery-1.8.1.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script>
function changeView() {
    $.cookie("viewmode", "pc", { path: "/" });
}
</script>

SPサイトから「PCサイトへ切り替え」リンクを踏むと、あとはずっとPCサイトが表示されます。
(基本的にそのブラウザを閉じるまで)
PCサイトからも「SPサイト切り替え」のリンクをはっておいた方がいいかもしれませんね。
(PCサイトからSPサイトへは、普通のリンクでOKです)

関連記事

コメント

コメントはまだありません。

コメントの投稿

お名前

メールアドレス

URL

トラックバック: http://miraiyanet.com/myblog/pcsp130609.html/trackback

ページトップへ