TOP
サイトマップ疑似URLと静的URL
普通にWEBページを作ると、ディレクトリを作って、index.html(php)などのファイルをUPすることで、URLが生成されます。
UPしたファイルを閲覧するのであればそれで問題がないわけですが、ファイルをUPしないで、静的なURLを作りたいときがあるんですよね。
疑似URLとは？
- .htmlファイルを使わずに静的URLを生成する
- 1つの.htmlから複数のURLを生成できる
パラメータをつけるとファイルがなくても別ページは作れる
PHPの場合、ページネーションと言われる、記事ページのまとめの2ページ目以降を作るときなどは、GETパラメータを使ってページ送りを実現したりします。
GETパラメータについてはこちらのページに。
ただ、このやり方だと「/blog/?page=2」のように、静的なURLではなく、動的URLと言われる方法になります。
動的URLとは簡単にいうと、パラメータと呼ばれる「?page=2」というリクエストに応じたページをプログラムなどで生成する方法です。
「/blog/page2/」のような静的なURLを生成したい場合はどうするか。
.htaccessを使って内部転送を行うことで対応できます。
.htaccessを使った静的URLの作り方
htaccessを使うことでいろんなことができるんですが、色々ありすぎるので細かい話は解説しません。（というか詳しくないので語れない）
とりあえず、間違えると簡単にページが壊れる、ということだけは覚えておきましょう。
htaccessで壊れたページは、元の状態にもどせば直るので、編集前にコピーを取っておいて、すぐに戻せる状態にして試すのが必須です。
前提条件の確認
設置場所とその挙動を理解しないと混乱が生じますので、解説の前に前提条件を確認します。
.htaccessファイルの設置ディレクトリ
https://www.start-point.net/blog/web/php/giji/test/
上記ディレクトリに.htaccessファイルを設置します。
ベースとなるindex.htmlファイルも設置します。
その結果、本来存在しない(.htmlファイルが存在しない)静的URLを動的に生成します。
https://www.start-point.net/blog/web/php/giji/test/new/
↑こんな感じです。
サンプルURLが長くて恐縮です。
疑似URLを生成する .htaccess
簡単に概要を説明すると、疑似URLを生成したいディレクトリに以下のhtaccessファイルを設置します。
なお、.htaccessファイルは設置するディレクトリによって挙動が変わる、というか、適用範囲が変わりますのでご注意ください。
.htaccessファイル内に適用範囲の指定がない場合、設置されたディレクトリ以下で記載内容が適用されます。
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{REQUEST_URI} !/$
RewriteCond %{REQUEST_URI} !\.[^/\.]+$
RewriteRule ^(.*)$ $1/ [R=301,L]
RewriteRule ^(.*)/$ ?tag=$1 [QSA,L]
</IfModule>
※こちらの.htaccessを利用してもサーバー環境によってはうまく動作しない場合があります。
.htaccessファイルの解説
1行目：IfModule mod_rewrite.c
1行目、サーバーで mod_rewriteが使えるかどうかの判定をしています。
.htaccessはサーバー環境に機能がよって使える使えないがあるので、使える場合に実行するというif文になります。
<IfModule mod_rewrite.c>
2行目：RewriteEngine on
2行目はURLを書き換える「mod_rewrite」の有効化の宣言です。
RewriteEngine on
3～4行目：末尾をスラッシュで終わらせる
3行目のこちらは、なくてもいいんですが、URLの最後が「/(スラッシュ)」で終わってない場合はスラッシュをつける、という文です。
RewriteCond %{REQUEST_URI} !/$
RewriteCond %{REQUEST_URI} !\.[^/\.]+$
5～6行目：パラメータを書き換える
5～6行目、これが今回のキモのURLの書き換えを担っている文です。
RewriteRule ^(.*)$ $1/ [R=301,L] RewriteRule ^(.*)/$ ?tag=$1 [QSA,L]
URLの末尾をパラメータに置き換える、という処理をしています。
疑似URLを作るのにパラメータに変換するとか何言ってんの？と思われた方、これから詳しく解説します。
今回のサンプルでは「tag」というパラメータに変換するという処理をしています。
https://www.start-point.net/blog/web/php/giji/test/new/というURLの、「new」が「tag=new」パラメータとして処理されます。
パラメータ変換して疑似URLに対応する
パラメータを使って疑似URLを生成することで、パラメーターに応じたページを出し分けることができるようになります。
パラメータに応じた表示内容を書き込む
パラメータに応じた処理というのは、GETパラメーターを取得して、それに応じた処理を「PHP」であったり「javaScript」などで書き込むわけです。
それによって、発行されるURLに応じたページが作成できます。
疑似URLの活用方法
一般的な活用方法だと、先述した次ページを自動生成する際にパラメータによる動的ページを静的ページに置き換えたりする用途が一般的です。
SEOに動的URLより静的URLの方が有利であった、という時代があったのでそうすることがありました。
最近は動的URLでも静的URLでも、検索順位に対する優位性は特になくなったと言われています。
ファーストビューの画像を静的URLで書き換えたいと。
私の仕事でよくあるのがLPのファーストビューの画像を変更したい、というケースです。
疑似URLじゃなくても対応可能なのですが、効果測定の観点から静的なURLで画像を出し分けたいと相談を受けまして、疑似URLで対応しました。
静的にURLを作って対応してもいいんですが、ファーストビュー以外、ほぼ同じhtmlファイルのディレクトリをコピーして対応すると、ファーストビュー以外の内容が変更された場合に、コピーしたファイルも変更しなければならず、めんどくさいわけです。
疑似URLの仕組みを利用すると、HTMLファイルは1つで、色々な静的URLのページが生成できるので非常に都合が良いと。
同じ内容でもコピーしたHTMLファイルが存在していると、.htmlファイルの中身を手動で書き換える必要が出てきてしまうので、それを防ぐのが目的です。
画像を出し分けるコード PHP編
一番簡単なのがPHPで対応するコードです。
//パラメータの有無判定
if(isset($_GET["tag"])){
//パラメータがある場合 $para 代入
$para = $_GET["tag"];
//FV表示用のパスに利用
$fv = 'img/'.$para.'.png';
}else{
//パラメータがない場合デフォルトの画像を表示させる
$fv = 'img/fv.png';
}
//FV表示用のコード
echo '<img src="'.$fv.'">';
パラメータと同じ名前の画像ファイルを予め用意しておく必要がありますが、これでURLに応じたファーストビューの画像を静的URLで出し分けることができます。
この仕組みを1つ用意しておくだけで、何パターンのテストが来ても画像ファイルを用意しておけば、一括で対応できるので非常に楽です。
javaScriptで対応する場合
PHPが使えればPHPで対応したいところですが、場合によってはPHPが使えない場合もあります。
なので、javaScriptで対応する場合がこちら。
このコードは書き換え用の画像が存在する場合は、画像の書き換えを行い、存在しない場合はデフォルト画像を表示する、という処理もしています。
HTMLの対象コード
//FV画像のHTML <img src="fv.png" width="750" height="660" id="fv_img">
↑画像にIDを振って書き換える画像を指定します。
書き換えを行うjavaScript
以下のjavaScriptをFV画像のHTML以下に記述します。
JSが読み込まれた時点で「document.getElementById('fv_img')」が存在しない場合はエラーになります。
<script>
//対象のFV画像を取得
const fv = document.getElementById('fv_img');
//現在のURLのパスを取得
const path = location.pathname.split('/');
//パラメータ部のURLを取得
let img_name = path[6];
//置換画像のURL指定
const temp_src = img_name + '.png';
//画像確認の関数を呼び出し
check_img(temp_src);
//画像確認用の関数
function check_img(url) {
//imgインスタンスの生成
const img = new Image();
//関数の引数からURLを取得
img.src = url;
//画像が存在する場合、FVの画像を書き換える
img.onload = function () {
fv.src = img_name + '.png';
//確認用のconsole.log(本番UPはコメントアウト)
console.log('画像あり')
};
//画像が存在しない場合
img.onerror = function () {
//デフォルト画像を表示
fv.src = 'fv.png';
//確認用のconsole.log(本番UPはコメントアウト)
console.log('画像なし');
};
};
</script>
javaScriptの流れを簡単に図解にするとこんな感じです。
疑似URLのパラメータにあたる部分を let img_nameに代入しています。
URLを取得してファイル名に使う
差し替え画像の名前に使うURLを取得します。
//現在のURLのパスを取得
const path = location.pathname.split('/');
//パラメータ部のURLを取得
let img_name = path[6];
javaScriptの「location.pathname.split('/')」で現在のURLを「/(スラッシュ)」で分割します。
今回は「new」にあたるURL名が欲しいので、6番目のURLを取得します。
6番目と言っていますが0から数えて6番目になります。
let img_nameをconsole.logで確認するとわかりやすいです。
console.logで確認すると以下のように出力されます。
0: ""
1: "blog"
2: "web"
3: "php"
4: "giji"
5: "test"
6: "new"
6番目に「new」がいるのでpath[6]を指定して、パスをimg_nameに代入すると。
//置換画像のURL指定 const temp_src = img_name + '.png';
画像がサーバーにいるかチェックする
取得した画像がサーバーにUPされているかをチェックします。
//画像確認の関数を呼び出し check_img(temp_src);
check_imgという自作関数の引数にチェックするファイル名(temp_src)を代入しています。
check_img関数の処理
check_imgのコード。
//画像確認用の関数
function check_img(url) {
//imgインスタンスの生成
const img = new Image();
//関数の引数からURLを取得
img.src = url;
//画像が存在する場合、FVの画像を書き換える
img.onload = function () {
fv.src = img_name + '.png';
//確認用のconsole.log(本番UPはコメントアウト)
console.log('画像あり')
};
//画像が存在しない場合
img.onerror = function () {
//デフォルト画像を表示
fv.src = 'fv.png';
//確認用のconsole.log(本番UPはコメントアウト)
console.log('画像なし');
};
}
まず、new Image()で画像インスタンスを生成します。
このnew Image()の解説は解説サイトをご確認ください。
img.srcで引数に指定された画像のURLを指定します。
画像のパスを指定していますが、本当にその画像があるのかが現時点では不明なわけです。
「img.onload」と「img.onerror」を使って判別しております。
画像が存在する場合の処理 img.onload
img.onloadは画像の読み込みが完了した場合に処理が走ります。
//画像が存在する場合、FVの画像を書き換える
img.onload = function () {
fv.src = img_name + '.png';
//確認用のconsole.log(本番UPはコメントアウト)
console.log('画像あり')
};
最初の方に書いてあった「fv」のパスを書き換えると。
fv.src = img_name + '.png';
↓
↓fvはこれ
↓
//対象のFV画像を取得
const fv = document.getElementById('fv_img');
ファーストビュー以外に書き換えたい画像がある場合は、対象画像を定義して、書き換えの処理を追加すれば複数個所でも大丈夫です。
画像が存在しない場合の処理 img.onerror
画像が存在しない場合は.errorが走りますので、その場合はデフォルトの画像を表示させています。
//画像が存在しない場合
img.onerror = function () {
//デフォルト画像を表示
fv.src = 'fv.png';
//確認用のconsole.log(本番UPはコメントアウト)
console.log('画像なし');
};
動作確認用にconsole.logを設定してますが、本番環境にUPする際はコメントアウトか削除します。
画像がちゃんと読まれていれば画像が表示され、コンソールログに「画像あり」と表示され、画像が読み込めない場合はデフォルト画像が表示され、コンソールログに「画像なし」と表示されます。
疑似URLの間違いやすいポイント
最初にこの疑似URLを使おうとしたとき、なぜかわからないのですがリダイレクト処理をかけて対応するという先入観がありました。
存在しないURLを実在するURLに転送して実現するんだろうという思い込みがそうさせていたのだと思います。
実際にやり方を調べるとそうではなく、トリガーとなるパラメーターを利用してページ内部を変更し、URLを静的に作るものだと知りました。
ワードプレスなどもこのやり方でURLを生成しているそうです。
疑似URLのまとめ
今回の疑似URLは簡易的なもので、ファーストビューの書き換えを中心に解説しました。
このやり方を活用すれば、複数個所の画像書き換えはもちろん、データベースに記事全体、または、セクションの一部を保存しておいて、動的に呼び出しつつ、URLは静的なURLを発行するということが可能になります。
疑似URLを使うメリット
- .htmlファイルを使わずに静的URLを生成する
- 1つの.htmlから複数のURLを生成できる
- ベースファイルを修正すれば
疑似URLも同時に修正できる
LINEで送る
Tweetする
Facebook
