ホームページ制作、SPサイトのファイル名・ディレクトリ構造

締切済

質問者：wngsv
質問日時：2017/03/03 05:40
回答数：5件

こんにちは。
私はホームページを作っていて、現在そのサイトのスマホ向けページを作ろうとしています。
SPサイトとPCサイトを別のhtmlファイルで書き、.htaccessファイルを使ってユーザーのアクセスを振り分けようと考えているのですが、そのディレクトリ構造をどのようにしようか迷っています。

インターネットで色々と調べてみた所、.htaccessの振り分けをする場合、
/index.html　のspページは、/sp/index.html
/news/index.html　のspページは、/sp/news/index.html　と言ったように
rootフォルダにspフォルダを作ってそれ以下の構造はpc版と同じにする形が一般的なようですが、

SPサイトとPCサイトで同じ画像を使う場合
１：/news/img/hoge.jpg　と、/sp/news/img/hoge.jpg　に同じ画像を保存する
２：/sp/*.html　のimgタグは絶対パスでPC版のimgフォルダを参照する
３：全て相対参照で、.htaccessでimgフォルダのリクエストのときは/sp/を外す
のいずれかが求められると思うのですが、いずれもややこしく感じられます。

私は、spフォルダを作らずに、
/index.html　のspページは、/index_sp.html
/news/index.html　のspページは、/news/index_sp.html　と言ったように
SPサイトのファイルも同じフォルダに入れ、ファイル名だけを変更するといった形の方が
imgタグなどのsrcの設定などが簡単だと思います。
このやり方が一般的でない(?)理由はなにかあるのでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

最新から表示
回答順に表示

No.5

回答者： ORUKA1951
回答日時：2017/03/04 14:22

No.2,No.3です。

サイトを利用する端末は、「様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」、さらには点字出力、・・・そしてなによりも最近は、「検索エンジン」。
　スマホは、そのうちでPCのブラウザと同じscreenと分類されるmediaです。そして、最近はとても幅広のディスプレイから、タブレットやスマホのような小さなディスプレイもある。screenだけを想定したにしても・・
<style media="screen">
　そのうちで、
@media screen and (max-width: 800px){
　なら、と条件を加えることができるようになりました。(media query)。いわゆるレスポンシブです。

　これは、
1. まず、screenメディア向けに、リキッドデザインで作成する。
　　これで、基本的にはスマホも利用できるはず
2. それで対応できない場合はmedia queryを使う。
　　小さな画面ではデザインを変更する。
　　@media screen and (max-width: 800px){
　　　別ファイルにすることもできます。
3. スマホやタブレットの場合は画面は縮小されるので、viewportを指定しておく
　 <meta name="viewport" content="width=device-width; initial-scale=1.0">
　という順番になるでしょう。

　ただし、フューチャーホン(高機能携帯電話)は、
<style media="handheld, tty">
　になります。この場合は、データ量の多いページは、HTMLを分割して、文字通り別ファイルが良いでしょう。スタイルシートへの対応も遅れているのでね。

　印刷が想定されるページは、
<style media="print">
　が必要な場合も、

★スマホに限らず、内容が異なる場合は専用ページでよいですが、同じ内容なら別ページにはしない。そのために、１ページの内容量を減らすなどの工夫が必要な場合もありますね。

- 0
- 件

通報する

No.4

回答者： t_fumiaki
回答日時：2017/03/03 18:30

No.1続き

一般的な方法の動機は「作り手側の論理」です。

「作りやすさ」を優先して「使う側の使いやすさ」を無視してるからです。

本当は、使う側からすれば、どちらでも良いです。

付け加えるならば、レスポンシブにしなくてpcとスマホでソース内容を分けるべきです。

フォントの大きさを無視して良いなら、スマホサイトはpcサイトを相似形に小さくすれば良いです。

そう出来ない理由は文字のサイズです。
文字を3pxなどと小さくしたら読めません。

だからpcサイトの様には文字数を多くは出来ない。
だからpcサイトとはレイアウトも変えないといけない。

そういう制約が出ます。

それを解決する「使う側に易しいサイト」はpcとスマホでソースを別にする事です。

方法は自由で有って、問題は何も有りません。

- 1
- 件

通報する

No.3

回答者： ORUKA1951
回答日時：2017/03/03 16:33

No.2です。

それでも、どうしても専用のディレクトリが必要な場合は、絶対パスを利用するほうが楽です。
　これは、SPに限らず、すべての参照ファイルやサイト内リンクもです。
　なぜなら、HTMLファイルを他のディレクトリに移動したり、階層を変更したときも書き換えなくて済むからです。
★ただし、ローカルでテストするために、テスト用のローカルサーバーをパソコンにインストールしておかないと、作業が難しいでしょう。

　なお、スマホも、mediaはscreenですが、それ以外にも印刷機やスクリーンリーダー、携帯電話(フューチャーホン)、点字端末もあるのですよ。先のサンプルはHTMLには文書構造しか書かれていないので、それら相手のスタイルシートを用意すればよいし、なくても、ちゃんと利用できますね。印刷したり、スマホがiOSなら「リーダー」使ってごらんなさい。

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2017/03/03 12:14

＞SPサイトとPCサイトを別のhtmlファイルで書き、

ホームページでなくウェブサイトですね。
　　https://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC …
　htmlでなく、HTML(頭文字だから大文字)
★別のファイルを作るのは、最大の間違い。
　「HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
　構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

　単純に、たった一つのHTMLを書き、スタイルシートだけ分ければよい。作成もメンテナンスもとっても楽。わざわざレスポンシブにする必要もないことが多い。
　また、
＞rootフォルダにspフォルダを作ってそれ以下の構造はpc版と同じにする形が一般的なようですが、
　も間違い。大規模なサイトでしたら、PATH_INFOで動的に作成すればよいので、実在のフォルダーがあるわけではない。
　スタイルシートやレスポンシブに対応していない端末のために、path_infoで、動的にページを作成しているだけで、別のページがあるわけではないことが多いです。
　ただ、同じ内容で複数のページを作成するのは、SEO的に極めてまずい方法ですよ。googleは作るな!!と言っている。

★せっかくHTML使って作成するのに、利用端末ごとに複数のページを作るのは本末転倒です。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

たった一つ文書を作成すれば、どのような端末からも利用できるようにするのがHTMLの最大の目的なのですよ。

簡単なサンプル
★タブは＿に置換してあるので戻す。
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
　の右上(DATA)でチェック済み

<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="ORUKA">
<style media="screen">

</style>
</head>
<body>
＿<header>
＿＿<h1 id="title">Your title</h1>
＿＿<nav>
＿＿＿<ul>
＿＿＿＿<li><a href="/">Top</a></li>
＿＿＿＿<li><a href="/products">製品</a></li>
＿＿＿＿<li><a href="/link">links</a></li>
＿＿＿</ul>
＿＿</nav>
＿</header>
＿<section>
＿＿<h2>A smaller heading</h2>
＿＿<p>
＿＿＿これはサンプルです。
＿＿</p>
＿＿<section id="A">
＿＿＿<h3>Ａ項</h3>
＿＿</section>
＿＿<section id="B">
＿＿＿<h3>Ｂ項</h3>
＿＿</section>
＿＿<nav>
＿＿＿<h3>ナビゲーション</h3>
＿＿＿<ol>
＿＿＿＿<li><a href="#TOP">TOP</a></li>
＿＿＿＿<li><a href="#A">Ａ項</a></li>
＿＿＿＿<li><a href="#B">Ｂ項</a></li>
＿＿＿</ol>
＿＿</nav>
＿＿<aside>
＿＿＿<h3>Something aside</h3>
＿＿＿<p>本文と直接関係ない(aside)な記事</p>
＿＿</aside>
＿</section>
＿<footer>
＿＿<h3>A nice footer</h3>
＿</footer>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

なるほどCSSで切り替えるのがSEO的に最も良い方法なのですね
ひとつのHTMLファイルで頑張って作ってみたいと思います

通報する

お礼日時：2017/03/04 00:05

No.1

回答者： t_fumiaki
回答日時：2017/03/03 07:11

フォルダで一括で切り替えた方が、単純にスッキリするからです。

pcとスマホはディスプレイサイズが違うので、画像もそれに合わせて別に用意します。

こうすれば、.htaccessによる振り分けは一発で出来ます。
RewriteRule ^$ /sp/$1 [R=301,L]　とか
RewriteRule ^$ /m/ [R,L]　とか

また、振り分けで考慮した方が良い点は、googleへ「振り分けていますよ」と認識して貰って、コピペサイトではない事をアピールする事ですね。

スマホ側のソースに、canonialを追加し、「正はpcサイトです」と宣言します（全ページ)。

pc側のソースには、alternateを追加し、「スマホ側にも同じページがあります」と宣言します（全ページ）。

上記の様に、ややこしいので、レスポンシブで対応する方法が流行ってる訳です。
レスポンシブならソースは共用なので、上記の一切が不要になるからです。