htaccessを使った疑似URLの生成

htaccessを使った疑似URLの生成

URLの疑似静的化 動的URLを静的URLにする方法

#208 URLの疑似静的化

WEB制作

htacessを使ってhtmlファイルが存在しない静的URLを生成する方法と、実際に仕事で使った疑似URLの活用方法の紹介です。 SEO的なメリットよりも修正コストを下げるために疑似URLを活用しました。 覚えておくと色々と使える方法です。

公開日:
最終更新日:

商品リンクにアフィリエイト広告を利用しています

サイトマップサイトマップ

疑似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を生成することで、パラメーターに応じたページを出し分けることができるようになります。

疑似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も同時に修正できる

URLの疑似静的化の関連ページ

ランダム表示バナー

PHPで作るランダムバナー表示プログラム

PHPでランダム表示させるバナープログラムです。 バナーと言っていますが、別にバナーじゃなくてもランダムで表示できます。

PHPを使って作るCMS

PHPを覚えたらSQLも覚えて自作のCMSを作ってみよう

PHPを覚えたらデータベース回りも一緒に覚えるのがオススメです、 制作できるものの幅が広がって色々な仕組みを理解できます

日付比較

キャンペーン期間中だけ表示させるPHPプログラム

期間限定の表示は訴求が強いけど、取り忘れるとユーザーに損した気分を与えてしまうので、忘れずにしっかり対応したいですね。

PHPで作るカレンダーの作り方2

PHP+jQueryで作る土日祝日が選べないカレンダーの作り方

PHPで作るカレンダーの作り方の第二弾です。 今回はクリックした日付を取得してformに代入するところも解説してます。

PHPの覚え方

PHPの良いところは難しいと思われていること

PHPって人が思っているほど難しくなく、便利でいろいろな面白いものを作れるプログラミング言語です。

配列の解説

PHPの連想配列の多次元配列を使ったクイズの作り方

PHPの配列ってイメージは付くけどちゃんと理解するのが難しい。 例題がわかりづらいせいだと思うんですよね。これはわかりやすい。

PHPで作るカレンダー

PHP+HTMLで作る 祝日対応のカレンダーの作り方

forとifとforeachがメインのPHPによるカレンダーの作り方です。 祝日設定がちょっとめんどくさいんですよね。

POST送信

PHPを使った漢字クイズの作り方解説 その1 POST送信

【初心者向け】PHPを使った漢字クイズの作り方を解説します。1回目はGETとPOSTの簡単な解説から実際に使うPHPの紹介です。

PHP覚え方

PHPを手っ取り早く覚えるには作りたいものを作ること

PHP単体でもHTMLよりもできることの幅はひろがるけれど、それにプラスしてデータベースを扱えるようになると無敵感を味わえます。

WEB言語紹介

WEB制作をささえるHTML・CSS・Javascript・PHP

いつもWEB制作をささえてくれるいろいろな言語を紹介しています。 他にもMySQLがあるんですが長くなるので割愛しました

アンカーリンクナビ

交差監視を利用したアンカーリンクナビゲーション

JavaScriptの「Intersection Observer」を使い、ナビゲーションが変化するアンカーリンクを作りました。

bookblock

本をめくるJqueryライブラリ bookblock

本をめくるようなモーションを実現するbookblock.jsを改造してレスポンシブ対応にしてみました。

jquery-match-height.js

高さを簡単に揃えるjquery-match-height.js

簡単に要素の高さを揃える「jquery-match-height.js実際の使用例をわかりやすく画像付きで解説しています。

indexOf

JavaScriptのIndexOfの使い方の復習

indexOfを使ってindex番号を取得する方法の解説記事を書いていたら、indexOfを使わなくても取得できました。

交差監視

Intersection Observer APIを図解で解説

Intersection Observerを仕事で使ったときに理解度が足りないと感じわかりやすい解説記事を書きました。

スクロール監視

スクロール監視の新定番 intersecton observer API

スクロールに応じて何を変更させたりするときに便利なintersecton Observer APIの解説記事です。

つまづきやすい5つのポイント

【初心者むけ】Jqueryのつまづきやすい5つのポイント解説

Jqueryの構文がわかってなかったとき、とりあえずコピペして使ってました。 ちゃんと理解して使うとできることが増えます

tableデザイン

tableで作る表をシンプルでキレイに作るHTMLとCSS

tableで表を作るときに気を付けたいのが、どこまでシンプルでわかりやすく作れるかという点ではないかと個人的には思ってます

CLS対策上級編

CLS対策上級編 CSSのインライン化とAdcence遅延読み込み

CSSのインライン化とGoogle Adcence遅延読み込みでGoogleのスコアを大幅に改善しCLSもほぼ0にしました

CSSで作る横スライド

1行のCSSで作る横スライドの作り方

CSSのoverflow-x: scrollを使った横スライドの簡単な作り方と事例紹介です。 簡単便利はいいことだ。

SNSでこの記事をシェアできます

ブログ デイリーアクセスランキング

洗顔せっけんどろあわわ
1位

洗顔せっけんどろあわわ

長らくずっと使い続けている洗顔せっけんどろあわわを紹介します。 クリームみたいな泡で洗える美容成分の詰まった洗顔せっけん

HIHO FINE BUBBLE+
2位

HIHO FINE BUBBLE+

暖かいミストで洗顔するとすごく気持ちいいシャワー。 節水効果も高く非常に満足度の高いシャワーヘッドになっています。

SPIBELT(スパイベルト)
3位

SPIBELT(スパイベルト)

無くしやすいカメラレンズのキャップの収納&持ち運びに便利なミニマルなウエストポーチ SPIBELT(スパイベルト)のレビューです。

タフグミ
4位

タフグミ

仕事の合間によく食べるグミ。私は歯ごたえがあるグミが好きです。そんなハードグミ界にタフグミが登場。最近こればっかり食べています。

静岡県家族旅行三日目
5位

静岡県家族旅行三日目

静岡県家族旅行三日目はお城巡り。駿府城公園から、掛川城、可睡斎に立ち寄り、浜松城を巡り、浜名湖畔のホテルで宿泊。

ノートPCスタンド
6位

ノートPCスタンド

ノートパソコンを横にしまうと結構な専有面積があるのですが、立てて収納できればわずか数cmで使えるので本当に快適です!

車用スマホホルダー
7位

車用スマホホルダー

スマホをカーナビとして使うと熱さで充電ができなくなるので、熱対策と1年間使って外れることがなかったスマホホルダーの紹介。

スクロール監視
8位

スクロール監視

スクロールに応じて何を変更させたりするときに便利なintersecton Observer APIの解説記事です。

SEO titleとh
9位

SEO titleとh

SEOの内部構造の基本であるTitleタグとHタグの使い方と自分の考えを書きました。 基本だからこそ重要な要素

掛川花鳥園と寸又峡
10位

掛川花鳥園と寸又峡

掛川花鳥園の鳥が自由に飛び交って腕でも肩でも鳥をのせて楽しめるあの空間が大好きになりました。夢の吊り橋は遠い。

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

世の中にある比較サイトや、いかがでしたか系サイトが嫌いなんです。使ってないのにえらそうなこと言うなと。なので体験談です。

WEB制作

WEB制作

WEBサイトを作れますと一言に言っても色々な技術があるわけですよ。アウトプットの形は一緒でもいろいろこだわりがあるんです。

カメラ

カメラ

2018年4月に購入したソニーのミラーレス一眼「α7Ⅲ」に関連する記事一覧ページです。 作例集やカメラグッズレビューなど。

美味しいもの

美味しいもの

食に関してはあまりこだわりがないんですけどね、こだわりがない分美味しいと思ったものは本当においしいと思ったものなんですよ

Amazonプライム動画

Amazonプライム動画

Amazonプライム会員なら無料で利用できるAmazonプライム動画から、いろいろな動画をみたレビュー記事のまとめページ

旅LOG

旅LOG

家族旅行やおでかけした際の旅ブログです。夏休みの家族旅行(4人家族)で訪れた観光名所の感想などを記しています。

プロフィール

プロフィール

Start-Point.netの管理人のプロフィール紹介を兼ねた、自分の中のルールや決め事やエピソードなでお書いていきます

日記

日記

日記と言っても色々な日記があるわけで、記録的な日記や心理描写を色濃く描いた日記などをまとめたページです。

thanks

thanks

自分を表現することって意外と難しいんですよね。照れがあったり、間違ったこといってないかとよくわからない何かと戦ったりして。