GMOとくとくBBのWebページのスマートフォン対策と.htaccessの設定

スマートフォン用Webページの作り方を提示します。これを別のディレクトリに設置した上で、http://e.gmobb.jp/user_name/ 直下に．htaccessファイルを設置し、スマートフォンでアクセスした場合にスマートフォン用Webページを見せるようにします。．htaccessファイルには、「スマートフォンでのアクセス時のURL転送」以外に下記の追記も行いました。

文字コードがUTF-8のテキストファイル(licence．txt等)のブラウザ表示
*．cgiや*．logファイルへのアクセス禁止(念の為)
ETagを無に
画像ファイル以外のgzip圧縮
キャッシュデータの活用(設定できなかった)

1. スマートフォン対応のWebページ作成

30分でスマホサイト作成 | 勝手にスマホサイトまとめとhtaccessによるPC・スマートフォンの振り分け転送を見て、スマートフォン専用のWebページを作成することにしました。通常のWebページのURLは、そのままのhttp://e.gmobb.jp/user_name/にして、スマートフォン対応のWebページをhttp://e.gmobb.jp/user_name/sp/にしました。

勝手にスマホサイトまとめには、「5.簡単スマホサイト作成ツール」や「6.無料スマホサイトテンプレート」もあるので、これらから、

スマートフォン対応のWebページの雛形htmlファイルを作成
The W3C Markup Validation Serviceで、雛形htmlファイルの文法を検査し修正
雛形htmlファイルを使用して、Webページをスマートフォン対応のWebページに作り直し
スマートフォン対応のWebページをスマートフォン対応のURL(http://e.gmobb.jp/user_name/sp/)にアップロード
CGI以外の画像フォルダ等は、通常のURL(http://e.gmobb.jp/user_name/)と同じものをスマートフォン対応のURLにアップロード
htaccessによるPC・スマートフォンの振り分け転送に従い、http://e.gmobb.jp/user_name/に．htaccessファイルを設置。 (http://e.gmobb.jp/user_name/sp/には．htaccessファイルを設置せずに上記の．htaccessを継承させます。)

developer tool	内容の説明
	スマートフォン対応のWebページの表示を確認するには、Google Chromeを使用しました。左図の様に右上の「Google Chromeの設定」マークをクリックし、「その他のツール」から「デベロッパーツール」を起動するとスマートフォンでのWebページの表示を確認できます。
	左図の様なスマートフォンでのWebページの表示が行われない場合は、の□ボタン(toggle device modeボタン)を押すと切り替わります。 (swap dimensions)ボタンを押すと縦長と横長に切り替えられます。
	サイトの構成 http://e.gmobb.jp/user_name/ <--- PCのWebページ(PCのサイト) /.htaccess <--- URL転送設定 /cgi <--- PCとスマートフォン共用のcgiディレクトリ /img <--- PCの画像ディレクトリ /download <--- PCのダウンロードディレクトリ /pdf <--- PCのpdfディレクトリ /sp/ <--- スマートフォン用Webページ(スマートフォンのサイト) /img <--- スマートフォン用画像ディレクトリ /download <--- スマートフォン用ダウンロードディレクトリ /pdf <--- スマートフォン用pdfディレクトリ

htaccessによるPC・スマートフォンの振り分け転送に記載されている内容に従い、 PCのサイト(http://e.gmobb.jp/user_name/)にのみ．htaccessファイルを設置します。動作は以下の様になります。

PCで、PCのサイトにアクセスするとURL転送しない。(/user_name/以下の従来のWebページのまま)
スマートフォンで、PCのサイトにアクセスすると/user_name/sp/にURL転送する。 (スマートフォン用Webページを見せる。)尚、ブラウザに表示するアドレスは、URL転送する前のアドレスのままとする。
PCで、スマートフォンのサイトにアクセスするとPCのサイトにURL転送する。(/user_name/へURL転送) 尚、ブラウザに表示するアドレスは、URL転送した後のアドレスにする。

下記にPCのサイト(http://e.gmobb.jp/user_name/)に設置した．htaccessファイルの内容を示します。(全．htaccessファイルの内容)

<IfModule mod_rewrite.c>
  RewriteEngine on
  ### URL転送 ###
  # 参考サイト
  # http://html-five.jp/195/
  # http://blog.dawgsdk.org/weblog/archives/411011
  RewriteEngine on

  # URLに/user_name/sp/と/user_name/cgi/を含まないスマートフォンアクセスは
  # スマートフォンサイトにURL転送する。(URL表示アドレスは変えない)
  # %{REQUEST_URI}=/user_name/xxx.html
  RewriteCond %{REQUEST_URI} !/user_name/(sp|cgi)/
  RewriteCond %{HTTP_USER_AGENT}  (iPod|iPhone|iPad|Android|Windows\ Phone)
  RewriteBase /user_name
  RewriteRule ^(.*)$      sp/$1 [L,NS]

  # URLに/user_name/sp/を含むPCアクセスは
  # PCサイトにURL転送する。(URL表示アドレスは変える)
  RewriteCond %{REQUEST_URI} /user_name/sp/
  RewriteCond %{HTTP_USER_AGENT} !(iPod|iPhone|iPad|Android|Windows\ Phone)
  RewriteBase /user_name
  RewriteRule ^sp/(.*)$   $1    [R]
</IfModule>

2. このサイト固有の．htaccessファイルの設定内容

このサイトのWebページの文字コードは、全てUTF-8(BOMなし)なので、licence．txt等のテキストファイルをブラウザで表示すると文字化けを起こします。これを改善するのと、念の為に「*．cgi」や「*．log」ファイルへのアクセスを禁止する設定も行います。

下記にPCのサイト(http://e.gmobb.jp/user_name/)に設置した．htaccessファイルの追記内容を示します。(全．htaccessファイルの内容)

# 文字コードをUTF-8に設定
<FilesMatch "\.(htm|html|txt|css|js)$">
  AddDefaultCharset UTF-8
</FilesMatch>

# 「．htaccess」や「*．cgi」や「*．log」ファイルへのアクセス禁止
<FilesMatch "^(\.ht|\.cgi|\.log)">
  order allow,deny
  deny from all
</FilesMatch>

3. アクセスの高速化を目指した．htaccessファイルの設定内容

アクセスの高速化(サーバーのデータ送出の高速化)を目指して、GTmetrixで、Webサイトの検査を行います。内容を見ればわかりますが、サイト側で実施すべき内容とWebサーバー側で実施すべき内容に分かれます。

サイト側で実施すべき内容は、まずHTMLを正しい文法で書くことと画像ファイル等の軽量化です。

HTMLの文法チェックは、Another HTML-lint gatewayを利用して行います。 HTML5で書かれたスマートフォン対応のWebページの場合は、The W3C Markup Validation Serviceで、HTMLの文法チェックを行います。
Webページの画像は、高精度な減色専用ツールのPadieで16色の減色処理を行い、PNGGauntlet - PNG Compression Software | BenHollis.netで、軽量化します。また、画像サイズも可能な限り小さくします。

Webサーバー側で実施すべき内容は、．htaccessファイルに下記の設定を行います。

ETagを無に
画像ファイル以外のgzip圧縮
キャッシュデータの活用(設定できなかった)

GTmetrixでのWebサイトの検査内容

GTmetrix | Website Speed and Performance Optimizationの Analyze Performance of:の下にURLを入力して下さい。
上図は、このサイトのホームページ(http://e.gmobb.jp/sakaguchi/)を入力した結果(2015年 1月20日)です。
1. GTmetrixに入力したサイトです。
2. Page速度評価。
3. Page速度とサイズ。
4. 結果のPDFのダウンロード。
5. Timelineというタグを左クリックします。
となっています。

下図は、Timelineタグの内容で時系列の結果です。
1. ブラウザからWebサーバーへの要求でAccept-Encoding gzip, deflateで、圧縮算法にdeflateを採用したgzip圧縮ファイルを受け付けるという内容です。
2. Webサーバーからブラウザへの応答でServerは、Apache/2.2.23であることが判ります。
3. GMOとくとくBBの場合は、通常、無圧縮なので、「Content-Encoding: gzip」という応答ヘッダは、ありません。しかし、事前にgzip圧縮したファイルを準備しておき、後述する．htaccessファイルの設定を行えば下図の様に圧縮して「Content-Encoding: gzip」という応答ヘッダが付加されます。

Webサイトの検査後の．htaccessファイルの追記内容(全．htaccessファイルの内容)
[参考頁：ページの表示速度を改善する方法 | Web Design Leaves]

FileETag none



# gzip圧縮
#<IfModule mod_deflate.c>					GMOとくとくBBでは、このif条件は成立しない
# AddOutputFilterByType を使用する方法
#  AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/javascript text/text
#</IfModule>


<IfModule mod_rewrite.c>
  RewriteEngine on
  ### gzip 圧縮 ###
  # 参考サイト
  # http://www.webdesignleaves.com/wp/htmlcss/217/
  # gzipが許容されていれば
  RewriteCond %{HTTP:Accept-Encoding} gzip

  # CSS,html,xml,xsl,JavaScript ファイル
  RewriteCond %{REQUEST_FILENAME} \.(css|html|txt|xml|xsl|js)$

  # 拡張子が「.gz」でなければ次へ
  RewriteCond %{REQUEST_FILENAME} !\.gz$

  # 元のファイルの末尾に「.gz」を付与したファイルが存在すれば次へ
  RewriteCond %{REQUEST_FILENAME}.gz -s

  # URIの末尾に「.gz」を付与"
  RewriteBase /user_name
  RewriteRule .+ %{REQUEST_URI}.gz [L]

  # MIME-TYPEとgzエンコードを指定"
  <FilesMatch "\.css\.gz$">
    ForceType "text/css; charset=UTF-8"
    AddEncoding x-gzip .gz
  </FilesMatch>
  <FilesMatch "\.html\.gz$">
    ForceType "text/html; charset=UTF-8"
    AddEncoding x-gzip .gz
  </FilesMatch>
  <FilesMatch "\.txt\.gz$">
    ForceType "text/plain; charset=UTF-8"
    AddEncoding x-gzip .gz
  </FilesMatch>
  <FilesMatch "\.xml\.gz$">
    ForceType "text/xml; charset=UTF-8"
    AddEncoding x-gzip .gz
  </FilesMatch>
  <FilesMatch "\.xsl\.gz$">
    ForceType "text/xsl; charset=UTF-8"
    AddEncoding x-gzip .gz
  </FilesMatch>
  <FilesMatch "\.js\.gz$">
    ForceType "application/x-javascript; charset=UTF-8"
    AddEncoding x-gzip .gz  
  </FilesMatch>
</IfModule>


# 以下のアクセス期限の設定は、GMOとくとくBBでは、できなかった。
# アクセス期限の設定
<ifModule mod_expires.c>					GMOとくとくBBでは、このif条件は成立しない
  ExpiresActive On						GMOとくとくBBでは、実行されればInternal Server Errorになる
  ExpiresDefault "access plus 1 seconds"
  ExpiresByType text/html "access plus 1 seconds"
  ExpiresByType image/gif "access plus 2592000 seconds"
  ExpiresByType image/jpeg "access plus 2592000 seconds"
  ExpiresByType image/png "access plus 2592000 seconds"
  ExpiresByType image/x-icon "access plus 2592000 seconds"
  ExpiresByType image/vnd.microsoft.icon "access plus 1 seconds"
  ExpiresByType text/css "access plus 604800 seconds"
  ExpiresByType text/javascript "access plus 2592000 seconds"
  ExpiresByType application/x-javascript "access plus 2592000 seconds"
  ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
</ifModule>

<Files ~ ".(gif|jpe?g|png|ico)$">
#  Header set Cache-Control "max-age=2592000, public"		GMOとくとくBBでは、Internal Server Errorになるので、コメント化
</Files>
<Files ~ ".(css|js|gz)$">
#  Header set Cache-Control "max-age=604800, public"		GMOとくとくBBでは、Internal Server Errorになるので、コメント化
</Files>

4. おまけ

前項のgzip圧縮ファイルは、Webページを変えるたびに再圧縮する必要があり、作業が面倒です。そこで指定フォルダだけの一括圧縮バッチファイルと指定フォルダ以下の一括圧縮バッチファイルを作成しました。 Webページのあるフォルダにこのバッチファイルを入れておき、クリックすると圧縮対象ファイル数分のgzip圧縮ファイルが一括して生成されます。

尚、このバッチファイルを使用するには、gzip．exeが必要で、パスの通ったシステムフォルダ内にgzip．exeが存在する必要があります。 gzip．exeの導入は、GNU File Compress/Uncompress Tool gzip for Windowsで行ってください。

指定フォルダだけの一括圧縮バッチファイルの内容

@echo off
REM Webページ用gzip一括圧縮(現在フォルダのみ)
for %%f in (*.css)  do gzip -9 -c -f %%f > %%f.gz
for %%f in (*.html) do gzip -9 -c -f %%f > %%f.gz
for %%f in (*.txt)  do gzip -9 -c -f %%f > %%f.gz
for %%f in (*.xml)  do gzip -9 -c -f %%f > %%f.gz
for %%f in (*.xsl)  do gzip -9 -c -f %%f > %%f.gz
for %%f in (*.js)   do gzip -9 -c -f %%f > %%f.gz

指定フォルダ以下の一括圧縮バッチファイルの内容

@echo off
REM Webページ用gzip一括圧縮(子フォルダを含む)
for /R %%f in (*.css)  do gzip -9 -c -f %%f > %%f.gz
for /R %%f in (*.html) do gzip -9 -c -f %%f > %%f.gz
for /R %%f in (*.txt)  do gzip -9 -c -f %%f > %%f.gz
for /R %%f in (*.xml)  do gzip -9 -c -f %%f > %%f.gz
for /R %%f in (*.xsl)  do gzip -9 -c -f %%f > %%f.gz
for /R %%f in (*.js)   do gzip -9 -c -f %%f > %%f.gz

5. 謝辞

下記のWebページを利用させて頂きました。有用なページ、有難うございました。

30分でスマホサイト作成 | 勝手にスマホサイトまとめ
htaccessによるPC・スマートフォンの振り分け転送
Apache : mod_rewriteリファレンス
HTMLの文法チェックは、Another HTML-lint gateway
スマートフォンでの表示確認：Windows TIPS：Google Chromeブラウザーでスマートフォンサイトをチェックする - ＠IT
htaccsessの設定方法：.htaccess ファイルのメモ | Web Design Leavesとページの表示速度を改善する方法 | Web Design Leaves

｜目次｜▲頁先頭｜