コピペで使える！モール型ECサイトでのインラインフレーム活用法 [リファラー編]

2017.02.20
2019.09.11

どうもこんばんは！HYPのこうじです。

今のご時世レスポンシブレイアウトがはびこっている中、『インラインフレーム』を利用する機会は極端に減ったのではないでしょうか。

なんせ、縦幅が動的に変更してくれないインラインフレームはレスポンシブではすこぶる使いづらい。
かといって、動的に変更させるくらいならWordpressでも使ってCMS管理しちゃいなYO！って感じですもんね。

ですが、一昔前の文化を”わがもの顔”で走るモール型ECにはいまだにインラインフレームはなくてはならない重要パーツです。
それは…

javascriptが使えない。
スタイルシートもロクに使えない。
各モールが用意したweb管理画面から変更する為非常に管理がしづらい。よってCMS化もしづらい。

そんな理由から大抵の出店者は、各モールが用意したFTPサーバーを利用して、HTMLファイルを使用したjavascriptやスタイルシートを使って使いやすいページを作成したり、各モールを一括更新するCMS作ったりとか、管理のしやすさとサイトの使いやすさを実現します。

そんなこんなで、モール型ECでは何かとお世話になるインラインフレームをもっと便利に使う一例をご紹介します！

リファラーを利用した更新楽ちんフレーム

インラインフレームを使用して、そのまま窓の様な感じで違うHTMLファイルを表示するのも良いですが、ちょっとjavascriptで工夫するだけで、とっても便利に活用できます。
例えばリファラーを利用して、一つのhtmlファイルから商品ページごとに全く異なる商品一覧を表示する方法を紹介します。

リファラーとは？

リファラーというのは、簡単に言うと『前のページのURL』です。
例えばインラインフレームでhtmlファイルを読み込むと、読み込み元のURLを取得する事が可能です。
この方法を利用すると…なんか色々出来そうですね！GUFUFU。

リファラーを利用してインラインフレームを利用するメリット

もちろん、そのページごとに表示する為のインラインフレームを要するのも一つの正解です。

『iframe-item-000.html』･･･『iframe-item-009.html』といった感じで商品毎にファイルを用意する。
それは管理がすさまじいことになりそうなので、今度は『category-000.html』･･･『category-009.html』といった感じで商品ジャンルに合わせたオススメを表示させることで簡略化。

などなど…。

ただ、これだとファイルが多くなりすぎて管理が煩雑になりがちです。
例えば『ちょっとデザインを変えたいな～』なんて事があったら、100商品あったらその分全て変更する必要性が出てきます。これは面倒ですね。

そういった、使ってみると、ページとしてはページとしてはとっても便利で需要もあるのに、管理しきれず結局放置。なんてのはよくあるパターンですね。

そんなケースを回避し、テンプレートは極力簡素に、かつカテゴリーや商品毎に訴求内容を変更出来る方法の一つがリファラーを使った方法です。

インラインフレームに表示するほねこを作成しよう！

まずはjavascriptは見ただけで吐き気がする人向けに根幹部分以外はタグで作った方法で制作してみます。

HTML

重要なのはどの画像情報を表示させるかを判別出来るように、商品番号を属性に含める事です。
下記例でいうと『data-code=”item-001″』がそれになります。
最終的にはURLから商品ページを判断するので、例えば楽天なら『商品管理番号』、Yahooなら『ページID』を設定しましょう。

ちなみになんで、クラスで判断させずにカスタム属性を使用しているかというと、これは完全に好みです。別にクラスでもいいです。
最後の商品番号選択箇所に『hogepiyo』とふざけた値が振られた要素は、該当しない商品番号が参照された場合に表示する汎用バナーとして用意しました。

[html]
<!–*** 商品ページAに表示するバナー。 ***–>
<div class="banner" data-code="item-001">
<a href="#">
<img src="example.png" class="image">
</a>
</div>
<!–*** 商品ページBに表示するバナー。 ***–>
<div class="banner" data-code="item-002">
<a href="#">
<img src="example.png" class="image">
</a>
</div>
<!–*** 商品ページCに表示するバナー。 ***–>
<div class="banner" data-code="item-003">
<a href="#">
<img src="example.png" class="image">
</a>
</div>
<!–*** 指定バナーが無い場合に表示するバナー。 ***–>
<div class="banner" data-code="hogepiyo">
<a href="#">
<img src="example.png" class="image">
</a>
</div>
[/html]

StyleSheet

読み込み元から参照された一つだけを表示したいので、まずは全てのバナーを非表示状態にしています。
そして読み込み元のURLを選択して、その要素のみを表示するようにするために『selected』クラスを振られたものだけが表示されるようにします。

[css]
.banner
{
  /* 全てのバナーを非表示にする。 */
  display: none;
}
.banner.selected
{
  /* 選択バナーを表示状態にする。 */
  display: block;
}
[/css]

これで土台の準備は完了です！
『俺（私）詳しいぜ！』って方はもっと凝ったデザインを作ってください！

参照元から商品番号を割り出そう

ここから、商品番号をリファラーから取得して、該当要素を選択するスクリプトを書いていきます。
今にも吐きそうな人はもう少しの辛抱です。

ちなみにスクリプトの手順は、概ねこんな感じです。

リファラを利用して、参照元の商品番号を取得する。
取得した商品番号と一致するバナー要素を探す。
あればそれを表示状態に。なければ汎用バナーを表示させる。

まずはリファラーを取得

リファラーの取得方法は下記の方法で取得します。
取得自体はめちゃくちゃ簡単ですね。

[js]
// リファラーを取得。
var ref = document.referrer;
[/js]

URLから商品番号を取得

商品番号は正規表現で持ってきます。
例として、Yahooショッピングと楽天市場のケースを紹介します。

楽天市場のケース

[js]
// 正規表現でマッチする文字列を取得。
var match = ref.match(///item.rakuten.co.jp/[a-z0-9-_]+/([a-z0-9-_]+)/?/);

// カテゴリーページとかでも使えるように、取得する文字にはあらかじめ汎用バナーの文字を入れて置く。
var code = "hogepiyo";

// もし参照元が商品ページでマッチする場合は、商品番号を書き換える。
if (match) code = match[1];
[/js]

Yahooショッピングのケース

楽天となんら変わらないです。

[js]
// 正規表現でマッチする文字列を取得。
var match = ref.matches(///store.shopping.yahoo.co.jp/[a-z0-9-_]+/([a-z0-9-_]+).html/);

// カテゴリーページとかでも使えるように、取得する文字にはあらかじめ汎用バナーの文字を入れて置く。
var code = "hogepiyo";

// もし参照元が商品ページでマッチする場合は、商品番号を書き換える。
if (match) code = match[1];
[/js]

これで、参照元のURLから商品番号の割り出しが出来ました！

表示する要素にクラスを振ろう

あとは、表示する要素に対して先ほど設定した『selected』クラスを振れば、その要素のみが表示されます。
そして、あらかじめ汎用バナー用の文字列を入れてありますので、商品ページからのアクセスでは無い場合は汎用画像を表示してくれます。
これでカテゴリーページ等、商品ページじゃない部分でも空白になる事なく利便性が高まりますね！

Vanilla JS

[js]
// 要素を取得。
var banner = document.querySelector('[data-code = "' + code + '"]');

// 要素がある場合のみ処理をする。
if (banner) banner.classList.add('selected');
[/js]

jQuery

[js]
// 要素を取得。
var $banner = $('[data-code = "' + code + '"]');

// 要素がある場合のみ処理をする。
if ($banner.size() &amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; 0) $banner.addClass('selected');
[/js]

これで指定要素の表示が出来るようになりました！