ホームページの作り方(HP作成法)を解説

ホームページの作り方(HP作成法)

携帯ブラウザへの対応

iphoneやスマホのようなモバイル端末のモニタは、PCモニタに比べて非常に小さいためPC環境で作成しているサイトは強制的に縮小されて表示されます。

指で拡大して閲覧してもよいのですが、モバイル端末のモニタサイズに合わせて表示させてあげたほうが優しいかも?(両方選べる構成がベスト)

携帯用にミラーサイトを作成する

携帯用のスタイルに作り替えたミラーサイトを準備するところから始めます。

例えば、http://www.○○○.com/というサイトであれば、携帯サイトのurlをhttp://www.○○○.com/iphone/として、index.htmlのディレクトリにiphoneフォルダを作って、そこにコピーを作ります。

そしたら、iphoneフォルダ内コピーの方をiphone画面に合わせて作り変え、もちろんスタイルも変えて、http://www.○○○.com/に携帯でアクセスがあった時に、http://www.○○○.com/iphone/にリダイレクトさせるようにします。

iphone用のミラーサイトは、iphoneの画面表示領域が320px×416pxであることに留意して、幅320pxとして作成します。windows用の表示デモ機がないので、モバイルsafariと同じレンダリングエンジンを搭載しているpcのsafariか、Chromeで表示確認するとよいでしょう。

文字はwidth:320pxにページ要素を調整すればいいだけなんですが、画像を縮小させるのはよいじゃないかもしれませんね。320px範囲に入らなければ、はみ出して表示されます。

また、metaタグでviewportを指定しておかないと、表示領域を980pxとみなしてiphoneで表示されてしまいますので、下記記述を追加する。content=部分は320pxとすることもできるが、デバイスにより横幅が変わることに対応させることを考えれば、device-widthがいいであろう。

<!-- HTML -->
<meta name="viewport" content="width=device-width" />
<meta name="format-detection" content="telephone=no" />
<link rel="apple-touch-icon" href="○○.png" />

1行目は320pxでないデバイスもあるので、そのデバイスに合わせて表示幅を調整する記述。2行目は、ハイフンや連続の数字を電話番号として認識させないための記述。3行目は、パネルアイコンに使用する画像を指定。

文字サイズは14~18pxあたりで、行間は1.4~1.6emあたりがよいとのこと。

/* CSS */
-webkit-text-size-adjust:none;

フォントサイズを自動調整させないための記述も追加しておく。

リダイレクトについて

リダイレクトには、.htaccess、javascript、PHPの3パータンの方法がある。

.htaccessによるリダイレクト徹底解説 from Masahiko Kawai

.htaccessを利用したリダイレクト

<!-- .htaccess内 -->
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod|Android|BlackBerry|Windows.Phone) [NC]
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^$ http://kanri.nkdesk.com/iphone/ [R,L]
</IfModule>

apacheの命令、mod_rewriteを使用するとモバイル端末はA、PCはBというように端末でリダイレクト先を振り分けることができる。

上から順番に実行され、改行がandの意味。。

上記でいうと、まずenginON(書き換えをON)にして、ベースを/にする(.htaccessの設置してある階層。/abcならabcフォルダの全てのファイル)。でiponeまたはipod…(小文字大文字区別なし)端末でのアクセス→改行(and)→(query_string)?以下がmode=pcでないサイトの時、問答無用にhttp://kanri.nkdesk.com/iphone/にリダイレクト[R]しろというもの。rewitebeseは初期値が/だから別に書かなくてもいい。

(RewriteRule データ リダイレクト先)のりダイレクト先をURLで指定すると、ブラウザのURLが書き換えられてそこに飛ばされる。この方法はログが増えるから推奨されない。

.htaccessは、以下の表(http://webtech.akijapan.com/htaccess/rewrite.phtmlより引用)がわかりやすい。

ディレクティブと書式 初期値 説明
RewriteEngine on/off off 書き換えの可否を設定。
RewriteOptions inherit - inherit : 現在の設定値を親ディレクトリの設定値から強制的に継承する。
RewriteBase / / 書き換えのベースとなるパス(ベースが明白な場合は不要)。
RewriteCond テスト文字列 条件 パターン。 - 条件によるテスト文字列とパターンの比較。
RewriteRule パターン 置換対象。 - パターンを置換対象で置き換える。

オプション

[R] 強制的にリダイレクト (Redirect) する。
[R=301] : 永久的に移動。HTTP レスポンスの「301 : Moved Permanently」を返します。。
[R=302] : 一時的な移動。HTTP レスポンスの「302 : Moved Temporarily」を返します、デフォルト。
[F] 強制的にアクセス禁止 (Forbidden) にする。
HTTP レスポンスの「403 : Forbidden」を返します。
[G] 強制的に消去済み (Gone) にする。
HTTP レスポンスの「410 : Gone」を返します。
もはや存在しないページを消去済みとしてマークします。
[L] 書き換えが行われたら終了 (Last) にする。
現在の書き換え後の URL が後続のルール によってそれ以上書き換えられることを防止します。
[NC] パターンについて、文字の大小を区別しない(No Case)。
つまり、”A-Z” と “a-z” は区別されません。
[OR] または。

正規表現

文字 説明
! 否定。
. 任意の1文字。
[ ] 括弧内のいずれかの文字。
[^ ] 括弧内のいずれかの文字以外。
| または。
? 直前の文字の0回または1回の繰り返し
* 直前の文字の0回以上の繰り返し。
+ 直前の文字の1回以上の繰り返し。
( ) 選択範囲の境界を明示する、もしくは後方参照を作成する。
^ 行頭。
$ 行末。
$n (0 <= n <= 9) 後方参照。 n番目の( )内の値が入ります。
%{ } サーバ変数の取得。
\ (日本語環境では円マーク)正規表現の特殊文字をエスケープする。

サーバ変数

変数名 説明
HTTP_USER_AGENT ブラウザの種類とバージョン。
HTTP_REFERER 参照元の URL 。
HTTP_COOKIE 設定されているクッキー情報。
HTTP_FORWARDED プロキシサーバ情報。
HTTP_HOST 接続要求しているホスト名。
HTTP_PROXY_CONNECTION 接続先プロキシサーバとの接続状態。
HTTP_ACCEPT ブラウザが認識可能なデータ形式。
DOCUMENT_ROOT サイトのルートディレクトリ。
SERVER_ADMIN サーバ管理者のメールアドレス情報。
SERVER_NAME サーバのホスト名、ドメイン名、またはIPアドレス情報。
SERVER_ADDR サーバのIPアドレス。
SERVER_PORT 送信に使われたサーバのポート番号。
SERVER_PROTOCOL 送信に使われたプロトコルの名前とレビジョン情報。
SERVER_SOFTWARE 起動したサーバソフトウエアの名前とバージョン情報。
REMOTE_ADDR リモートホストのIPアドレス情報。
REMOTE_HOST リモートホストのドメイン名。
REMOTE_USER ユーザの認証名。
REMOTE_IDENT リモートホストのユーザ名。
REQUEST_METHOD リクエストを送信した方法。
REQUEST_URI リクエストされたURI。
SCRIPT_FILENAME 現在実行しているスクリプト名。
PATH_INFO クライアントから送られるパス情報。
QUERY_STRING URL に付加して渡された “?” 以降の文字列。
AUTH_TYPE ユーザを認証するときに使用する認証方法。
TIME_YEAR サーバのシステム日付・年
TIME_MON サーバのシステム日付・月
TIME_DAY サーバのシステム日付・日
TIME_HOUR サーバのシステム日付・時
TIME_MIN サーバのシステム日付・分
TIME_SEC サーバのシステム日付・秒
TIME_WDAY サーバのシステム日付・曜日
TIME サーバのシステム日付・Unix タイムスタンプ。
<!-- .htaccess内 -->
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_URI} !(^/iphone/)
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod|Android|BlackBerry|Windows.Phone) [NC]
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^(.*)$ iphone/$1 [R=301,L]
</IfModule>

そこで、正規表現を作り変えて、http://kanri.nkdesk.com/以下のファイルのうち、先頭から最後まで間で0文字以上の文字の繰り返しをiphoneフォルダ直下に置き換え、301でリダイレクトさせる。

上の表から、^は先頭、$は最後、()はグループ、.*は0文字以上の羅列、R=301はブラウザのURLも書き換えて永久リダイレクトであることがわかる。

$1は()内を前方参照するから、http://kanri.nkdesk.com/aiueo/hoge.htmlであればhttp://kanri.nkdesk.com/iphone/aiueo/hoge.htmlに変わるということ。

これだけだと、無限ループに陥って、リダイレクトが多すぎとかそんな感じのエラーになるから、!(^/iphone/)という、iphoneの文字が入っていれば、それ以降の命令を実行させないようにしておく。これにより、http://kanri.nkdesk.com/iphone/iphone/iphone・・・のような無限ループを防げる。

正規表現では、 「^(.*)(\.[a-z]+)$ iphone/$1/$2」のようにグループ化した表現を2つ並べて$1に(.*)、$2に(\.[a-z]+)というように続けて(1文字を分割して)代入することも可能。「\.」は「.」がメタ文字なのでバックスラッシュでエスケープしているだけでその文字自体に意味はない。この正規表現なら、0文字以上の繰り返しを$1に、そこで一旦切って、ドットからa~zの1文字以上の繰り返しまでを$2に入れろという意味。

サイト全体をリダイレクトさせるには

補足として、サイト全体をモバイル、PCサイトを含めて、そのままリダイレクトさせたいのであれば、下記3パターンを使う。

.htaccessファイルを置いたディレクトリの下層ディレクトリに対しても同様な効果が適用されるが、下層にもし別の.htaccessファイルが置いてあれば、そっちが優先される。

<!-- .htaccess内 -->
RedirectMatch 301 .* http://www.nkdesk.com/
Redirect permanent /first/ http://nkdesk.com/second/
Redirect permanent / http://www.nkdesk.com/

1行目は、サイト全体(前頁)を、引越し先のトップページに飛ばす方法で、古いサイトのトップページだけ残して、その階層にhtaccessファイルを置いて上を1行書いておけば、新しいサイトのトップに飛んでくれる。(サイトの階層が変わっているサイト向け)

2行目は、ディレクトリ構造を生かしたまま、かつフォルダ名を変えてしまった場合に、firstから以下全部をsecondに変えて飛ばす。(サイトの階層のフォルダ名だけ変えてしまったサイト向け)

3行目は、2行目のフォルダ名を変えない、つまりそのままURLだけ変えてリダイレクトさせるパターンで、階層が維持されたままリダイレクトされる。(ただのURLだけ変える移転ならこれを使う)

正規表現は、通常バックスラッシュ(デリミタ)で最初と最後を囲むけど、囲まなくても動くみたいね。

リダイレクトはデフォは302だけど、イコールをつけて301を指定することもできます。301は永久移動、302は一時移動ということで、サイトの移転であれば301を使うべきだが、モバイル端末へのリダイレクトは301でも302でもいいらしい。

また、サーバー変数の補足として、URIというのは、URLと同じものと考えてよさそう。http/kanri.nkdesk.com/iphone/aaa.htmlというURLがあったとして、$_SERVER["SERVER_NAME"]でkanri.nkdesk.comが、$_SERVER["PHP_SELF"]で/iphone/aaa.htmlが取得できる。

ページトップへ