こんにちはフロントエンドエンジニアのまさにょんです!
今回は、Apache(Webサーバー)でスマホ判定をして、スマホ専用ページにリダイレクトさせる方法を解説していきます。
目次
Apache(Webサーバー)でスマホ判定をしてスマートフォン専用のWebページに移動
まずは、完成形の設定を観てみましょう。
それぞれの意味は、別途解説します。
次のSampleでは、Apacheでスマホの場合だけ判定して、スマホ専用の Members Only Page に案内しています。
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteBase /
### ここから、スマホ判定 & スマホ専用ページ移動の処理
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile) [NC]
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^members-only-page$ /members-contents/members-top/members-only-smart-phone/ [R,L]
### ここまでが、スマホ判定 & スマホ専用ページ移動の処理
</IfModule>
HTTP_USER_AGENTを使って、スマホ判定をする
RewriteCondを使うことで、RewriteRuleによる「URL書き換え」処理を実行する条件を指定できます。
RewriteCondの基本構文は、次のとおりです。
RewriteCond %{変数名} (一致パターン) [フラグ]
今回は、変数名に「HTTP_USER_AGENT」を指定しており、この変数にはアクセス端末のユーザエージェント名が入ってきます。
一致パターンでは「iPhone」または「Android + Mobile」という文字列が存在する場合という意味の正規表現(パターン)にしています。
フラグでは、[NC] フラグを使い「大文字・小文字を区別しない」ようにしています。
[NC] フラグによって、一致パターンに「Android」と書いておけば、
実際にユーザエージェント名に含まれる文字列が「android」でも「ANDROID」でも同じだとみなされます。
#『「iPhone」または「Android + Mobile」という文字列が存在する場合』という条件指定
# [NC] フラグで「大文字・小文字を区別しない」
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile) [NC]
スマホ側でPCモード(PC版サイト)を選択しているかどうかを確認
こちらは、RewriteCondを使って、URLの末尾に「?mode=pc」という文字列が付加されていない場合だけを対象にしています。
この「?mode=pc」というQueryParamaterは、スマホ側でPCモード(PC版サイト)を選択している際に付与されるものです。
PC版サイトを閲覧するモードにしている場合は、それを邪魔する必要はないですから条件を入れて除外しておきます。
# URLの末尾に「?mode=pc」という文字列が付加されていない場合だけを対象にする
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRuleでPC版のWebページURLをスマホ版のWebページURLに書き換える
先述したRewriteCondを使うことで、対象を絞り込んだら最終的にRewriteRuleで「URL書き換え」処理を実行していきます。
RewriteRuleを使うことで、指定した正規表現にマッチしたURLを書き換えられます。
RewriteRuleの基本構文は、次のとおりです。
RewriteRule (一致パターン) (置換先) [フラグ]
一致パターンには「.htaccess」ファイルのある場所(ディレクトリ)からの相対パスで対象を指定します。
この一致パターンでは、正規表現を使用して、書き換える対象を判定するようにします。
置換先には、相対パス(=ファイル名などで始まる記述方法)でも、
絶対パス(=「/」記号で始まる記述方法)でも、絶対URI(=「https://」などで始まる記述方法)でも書くことができます。
フラグには、[R,L] を指定しています。
「R」は「リダイレクトする」という意味で、URLを書き換えてページ移動させるので必須です。
「L」は書き換え規則の最終行であることを示しており、これ以降のRewriteRuleは無視されます。
# RewiteCondの条件を満たす時、[ members-only-page ] のURLの部分を
# [ /members-contents/members-top/members-only-smart-phone/ ] に書き換えて、リダイレクトする
RewriteRule ^members-only-page$ /members-contents/members-top/members-only-smart-phone/ [R,L]
Twitterやってます!Follow Me!
神聖グンマー帝国の逆襲🔥
神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ!!!!!