スマートフォン専用サイトへのリダイレクト(モバイル)作成「.htaccess」の設置

12.10.14 23:34 | コメント(0)

アクセスリダイレクト(モバイル)作成

レスポンシブデザイン対応を行わず、パソコン専用サイトとスマートフォン専用サイトを分けて制作した際、共通のドメインで開いた時、デバイスによってパソコン用のディレクトリ、スマートフォン用のディレクトリと自動的に「リダイレクト(転送)」を行うことが出来ます。

htaccessのリダイレクト機能を使用すれば、スマートフォンや携帯電話からのアクセスを判断し自動的に専用ページに「リダイレクト(転送)」することが出来ます。

そこで今回は、「.htaccess」ファイルを使って「リダイレクト(転送)」と呼ばれるアクセス判断機能をウェブサイト内に設置する方法をご紹介致します。

 1. リダイレクト(転送)
 2. 「.htaccess」ファイル作成
 3. 「.htaccess」ファイルの記載

リダイレクト(転送)

各デバイスから同じドメインにアクセスした際に、「.htaccess」ファイルでデバイスを確認し、判断して各ファイルに転送をします。

リダイレクト(転送)

リダイレクト(転送)

「.htaccess」ファイル作成

最初にリダイレクトを利用するには、「.htaccess」ファイルを作成する必要があります。

「.htaccess」ファイル

.htaccessファイル

「.htaccess」ファイルの記載

リダイレクトを利用するためには、「.htaccess」ファイルの中に、下記の内容を記載します。
※例でスマートフォンサイトのファイルを置いているディレクトリを「/smart/」とします。

スマートフォンからドメインを検索した際にスマートフォン専用ファイルにリダイヤル(転送)

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^$ /smart/ [R,L]


スマートフォンからドメインを検索した際にスマートフォン専用ファイルにリダイヤル(転送)

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^$ /smart/ [R,L]

項目 説明
RewriteCond %{HTTP_USER_AGENT} アクセス端末のユーザエージェント名の表記
RewriteCond %{QUERY_STRING} !mode=pc 「?mode=pc」という文字列が付いていた場合には、スマートフォン用ページに移動させない(リダイレクトしない)ようにする記述です。
RewriteRule RewriteRuleを使うことで、指定したディレクトリ内のファイルにリダイレクトが掛かります。

端末を細かく設定する場合は別の設定方法もあります。

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^$ /smart/ [R,L]


サーバーへアップロード

FFFTP
以上で設定完了です。
試しにリダイレクト(モバイル)が掛かるか確認してみましょう。
カテゴリ:WEB屋になる為の知識と技術, スマートフォン制作と作成方法

Facebookでコメントする

コメントする

おすすめの記事

Facebookの投稿
ウェブ制作技術 SNS・ブログ
おすすめウェブサイト
ウェブ制作のご注文は全国対応

北海道 青森 岩手 秋田 宮城 山形 福島 東京 神奈川 埼玉県 千葉 茨城 群馬 栃木 愛知 静岡 三重 岐阜 新潟 長野 山梨 石川 富山 福井 大阪 京都 奈良 兵庫 滋賀 和歌山 岡山 広島 鳥取 山口 島根 愛媛 徳島 高知 香川 福岡 佐賀 長崎 大分 熊本 宮崎 鹿児島 沖縄

PAGE TOP