Movable TypeでもPCとSPそれぞれ表示。.htaccessを使い同じURLで。

スマホサイトはレスポンシブではなくスマホ専用ページを表示

最終更新日:2017年5月9日

2017年5月にリニューアルしたため、この記事の情報は古くなっています。
リニューアル後は全ページ(極一部JavaScript必須のページを除く)AMP対応、スマホファーストのレスポンシブとしています。

レスポンシブは手抜き?

私はレスポンシブデザインでスマホ対応するよりも、PCとSP、それぞれに最適化したページがあるサイトの方が好きです。
レスポンシブということは、PCを表示しているときに、まったく関係ないSP用のスタイルや画像も読み込んでいることになります。
パフォーマンス低下に繋がります。
デザインも、折衷したようなデザインとなってしまいます。
それなりに手間をかければ、レスポンシブでも最適化したデザインにはできますが。
ユーザー第一で考えれば、スマホサイトとPCサイトは別に作るべきだと思います。

このサイトのスマホ対応方針

サイトのフロント側の構築をはじめます。
デザインする前に、レスポンシブにするかどうか悩みました。
けど、やっぱりやめて、スマホサイトを作ることにしました。
というより、スマホファーストでPCサイトを別途つくるといったほうがいいですが。

条件は、1ソースであることと、URLが同じであること。
レスポンシブをやめることで、運用に支障が出てはいけません。
URLも、スマホとPCで分けるのはいただけません。

.htaccessで振り分ける。

Movable Typeのアーカイブマッピングの設定で、PCページは「/pc/」配下に。
SPサイトは「/sp/」配下に、HTMLファイルを吐き出すようにしました。
JavaScriptやCSSファイルは、「/_media/」配下に全部置きます。

そのうえで、.htaccessで下記設定をしました。
※今後編集するかもしれません。

RewriteEngine on
RewriteBase /
#ループ防止&特定のディレクトリ以下は除外
RewriteCond %{REQUEST_URI} ^/(pc|sp|_media)/
RewriteRule .* - [L]
#画像ファイル等は除外
RewriteCond %{REQUEST_FILENAME} ^(.*)\.(gif|png|jpg|jpeg|svg|css|js|json|pdf|xml|rss|csv)$ [NC]
RewriteRule .* - [L]
#SP
RewriteCond %{HTTP_USER_AGENT} (iPod|iPhone|Android.*Mobile|Windows.*Phone|Firefox.*Phone|BB10.*Mobile) [NC]
RewriteRule  ^(.*)$ sp/$1  [L,NS]
#PC
RewriteRule  ^(.*)$ pc/$1  [L,NS]

行末の [L]は、ここで処理を終了させるという合図です。

RewriteCond %{REQUEST_URI} ^/(pc|sp|_media)/
RewriteRule .* - [L]

で、/pc/、/sp/、/_media/配下へのアクセスはここで処理を終了させます。

RewriteCond %{REQUEST_FILENAME} ^(.*)\.(gif|png|jpg|jpeg|svg|css|js|json|pdf|xml|rss|csv)$ [NC]
RewriteRule .* - [L]

で、画像ファイル等へのアクセスはここで処理を終了させます。
htmlファイルへのアクセスだけ処理するほうがスマートですが、
「test.html」「test/」「test」などいろいろなパターンが考えられるのでやめました。
もっと綺麗な書き方があるかもしれないけど。。

#SP
RewriteCond %{HTTP_USER_AGENT} (iPod|iPhone|Android.*Mobile|Windows.*Phone|Firefox.*Phone|BB10.*Mobile) [NC]
RewriteRule  ^(.*)$ sp/$1  [L,NS]
#PC
RewriteRule  ^(.*)$ pc/$1  [L,NS]

ここでUserAgentを判別して、マッチしたら/sp/配下へ。
マッチしなかったら、/pc/配下へ。

リダイレクト先のディレクトリ直下に、下記の.htaccessをそれぞれ設置する。

.htaccess
RewriteEngine off

コメント(0)

コメント投稿画面を開く
CLOSE ×