| パソコン / ホームページの作り方 |
| 2020/5/3 |
もっとも、単にスマホページを作るだけなら、PCページと同じフォルダーにスマホページを作るのがもっとも簡単です。
たとえば、「スマホページを作る(1)モバイルフレンドリーとは」のPCページのURLは次のようになっています。
http://rokugadb.html.xdomain.jp/pc/hp/sumaho-1/body.html
これに対応するスマホページのURLは次のようになっています。
http://rokugadb.html.xdomain.jp/pc/hp/sumaho-1/mb-body.html
つまり「sumaho-1」というフォルダーにPCページ（body.html）とスマホページ（mb-body.html）を作り、アップロードしてあるのです。こうすれば、画像ファイルなどは共有できます。
次のように、PCページのタイトル（上部）とリスト（右部）は、インラインフレームで外部データを表示させているだけなので、このページのデータは本文部分のみです。あらかじめ、スマホページの雛形を作っておき、PCページの本文データを貼り付け、画像サイズなど手直しすれば、割とたやすくスマホページが出来上がります。
しかし、この方法では、PCページとスマホページが、PCとスマホそれぞれに表示されてしまいます。PCにはPCページが、スマホにはスマホページが自動的に表示されるようにしておく方が親切です。
そのためには、まず、(1)PCサイト内にスマホサイトを作り、次に、(2)「.htaccess」で、それぞれを相互に転送できるようにする必要があります。
(1)PCサイト内にスマホサイトを作るのは、とても簡単です。
（index.htmlを置いてある）親フォルダー（ルートディレクトリ）に、スマホサイト用のフォルダー（たとえば、_sp）を作り、そこに、index.htmlを含め、PCサイトのすべてのデータをコピーします。そして、すべてのhtmlファイルをスマホページ用に修正すれば、スマホサイトが出来上がります。サイト全体では、2つのindex.htmlが存在しますが、別に問題はないようです。「_sp」フォルダーは、一種の独立自治区のようになっています。
PCサイトのindex.htmlのURLは次のとおりです。
http://rokugadb.html.xdomain.jp/index.html
スマホサイトのindex.htmlのURLは次のとおりです。
http://rokugadb.html.xdomain.jp/_sp/index.html
スマホサイトのhtmlファイルからは、PCサイト内の画像ファイルを参照表示できないので、スマホサイト内にも同じ画像ファイルをコピーする必要があります。
(2)「.htaccess」で、それぞれを相互に転送できるようにするには、
ルートディレクトリの「.htaccess」ファイルに、次のデータを挿入します（リダイレクトだけじゃない！スマートフォンサイトを作ったら設定するべき3つのこと）。
| <IfModule mod_rewrite.c> RewriteEngine on RewriteCond %{REQUEST_URI} !/_sp/ RewriteCond %{HTTP_USER_AGENT} (iPod|iPhone|iPad|Android|Windows\ Phone) RewriteRule ^(.*)$ _sp/$1 [R] RewriteBase / RewriteCond %{REQUEST_URI} /_sp/ RewriteCond %{HTTP_USER_AGENT} !(iPod|iPhone|iPad|Android|Windows\ Phone) RewriteRule ^_sp/(.*)$ $1 [R] RewriteBase / </IfModule> |
以上の(1)(2)の処理を終え、アップロードを済ませ、スマホで、アドレスバーに次のURLを入力しました。
http://rokugadb.html.xdomain.jp/index.html
すると、次のページが表示されました。うまく、転送できたようです。
次に、モバイル フレンドリーテストでPCページのURLを入力すると、スクリーンショットにスマホページが表示され、「このページはモバイル フレンドリーです」という結果となりました。うまく転送された結果、「モバイル フレンドリー」となったようです。
ただし、スマホサイトを完成しない間に、転送設定にしてしまうと、（スマホではPCページが表示されないので）スマホページが出来ていないデータはスマホでは表示できなくなってしまいます。したがって、転送設定のタイミングには注意が必要です