カラーミーのfetchタグ禁止に対策する方法【iframe】

2022年9月27日

この記事の目次

1.カラーミーショップでfetchの使用が禁止に

カラーミーショップのデザインテンプレート内で「fetch」タグの使用を禁止とする旨の通達が2018年6月にありました。これにより、fetchタグを使用していたショップオーナーは、対処しなければならなくなりました。（※すべての人が対処しなければならないわけではありません。）

1-1.廃止日はいつ？

では、いつまでに対処しなければならないのか？
カラーミーショップからは以下の様な通達がありました。

いつもカラーミーショップをご利用いただきありがとうございます。
2019年1月21日(月)より、デザインテンプレート内における記述方式「fetch(フェッチ)」の利用を禁止させていただく運びとなりました。
同タグをお使いの店長さまには、これまでにもメールで本件を告知してまいりましたが、
一部お伝えできていない方がおりましたため、利用禁止時期を延長のうえ再度ご連絡さしあげております。

※2019/1/22 追記：廃止日が【2019年2月19日】に変更となりました。

1-2.fetchタグとは？

fetchとは、phpのテンプレートエンジンである「Smarty」の関数で、テンプレートの出力を返す関数です。
カラーミーショップでは、デザインテンプレート内で、fetch関数を以下の様なタグで使用することができます。

使用例

<{fetch file="http://example.com/"}>

2.fetchタグの代替手段とは？

ここからは、実際にfetchタグの代替手段を見ていきます。但し、静的なページを取得している場合と動的なページを取得している場合では対処方法が違いますので注意が必要です。

3.静的なページを取得している場合

まず、静的なページとは、「サーバー上のファイルをそのままブラウザで表示している」ページだと考えてください。この場合の代替手段は、「カラーミーショップのFTPオプションを使用する。」方法です。
この方法を使用するには、カラーミーの「FTPオプション」に申込みをしている必要があります。（※レギュラープランとラージプランでは標準で利用可能です。）
そして、【file001.shop-pro.jp】などの自身のサーバー領域に、取得したいファイルをアップロードします。
後は、今まで同様「fetchタグ」を使用してファイルを取得することができます。つまり、まとめると以下の様になります。

1.FTPオプションに加入（※プランによっては標準で利用可。）
2.FTPサーバーに接続（FTPオプションについてはこちらをご参照ください。）
3.【file001.shop-pro.jp】などの自身のサーバー領域にファイルをアップロード。
4.fetchタグでアップしたファイルを取得。

以上で完了となります。

※FTPオプションに申し込みたくない人は？

もし、静的なページを取得している人で、FTPオプションに加入したくないという方は、次の「動的なページを取得している場合」をお試しください。但し、こちらも別のサーバーを用意する必要がありますので、ご注意ください。

4.動的なページを取得している場合

続いては、CMSやRSSなど、動的なページを取得している場合の代替手段を見ていきましょう。fetchタグ廃止によって最も影響を受けるであろう方は、この動的なページを取得している場合だと思います。

そこで今回は、「iframeタグ」を使用した方法をご説明いたします。

※iframeタグについての説明は以下でご確認ください。
HTMLのiframe（インラインフレーム）の使い方

iframeタグには、いくつかの属性を指定します。

<iframe src="http://example.com/" width="100%" frameborder="0" scrolling="no" class="iframe"></iframe>

まず、src属性で「読み込みたいファイルのパス」、width属性で「幅」、frameborder属性で「枠線」をなくし、scrolling属性で「スクロール表示」をしない設定にしています。ご自身の環境に合わせて適宜属性を設定してください。

5.動的なページを取得する場合の注意点

上記の方法で上手くいく場合はよいのですが、いくつか注意しなければならないことがありますので記載しておきます。

SSL対応をしているか？

iframeタグを使用する場合、親ページ（カラーミー側）でSSL対応（URLがhttps://～で始まる）している場合、子ページ（取得したいページ）でもSSL対応していなければエラーが出てしまい、表示されません。
したがって、どちらかがSSL対応している場合は、もう一方もSSLに対応しなければなりません。もしくは、どちらもSSL対応されていなければ表示可能です。（※iframe関係なしにSSL対応をオススメはしますが…）

文字コードの修正

カラーミーショップのテンプレートでは、文字コードを「ECU-JP」にする必要があります。fetchで取得したファイルは、ECU-JPで出力しなければ文字化けを起こす場合が多いです。
しかし、iframeで取得する場合は、子ページ側に合わせた文字コードを指定する必要があります。

例えば、「WordPressのRSS機能を使用して投稿をiframeで読み込む」といったことがしたい場合、取得したコンテンツをECU-JPに変換する必要がありました。

<?php 
  $description = mb_convert_encoding($description, "EUC-JP", "auto"); 
?>

iframeでは、これを子ページ側の文字コードに合わせる必要があります。（例えばWordPressなら「UTF-8」等。）もし、iframeで取得した際に文字化けが起こっていた場合は、文字コードを確認してみてください。

iframeの高さを自動調整（レスポンシブ対応）したい場合

fetchと違いiframeの場合、子ページ側のスタイルが適用されます。しかし、別ドメインのiframeをレスポンシブ対応しようとすると上手くいきません。heightをpx指定できる場合は問題ないのですが、スマートフォンなどでは、コンテンツの幅や高さはデバイスによって変化します。

※なぜ、レスポンシブ対応できないのか？

別ドメインのサイトからiframeを読み込む際に、iframe内部のHTMLにはアクセスができません。これは、クロスサイトスクリプティングを防止するためにブラウザに備わっている機能です。つまり、「iframe内部の高さを取得して親ページ内のiframeの高さと合わせたい」といったことができないということです。

ということで、jQueryを使って対処して行きます。流れとしては、

・子ページ側の要素の高さを取得。
・親ページ側でiframeを読み込む。
・子ページで取得した高さをiframeに指定する。

このようになります。

子ページ側

$(function(){
  var h = $('html').height();
  parent.postMessage(h, 'https://example.com/');
  //第二引数に親ドメインを指定する
});

親ページ側

<iframe src="https://hoge.com/iframe.html" width="100%" frameborder="0" scrolling="no" class="iframe"></iframe>

$(window).on('message', function(e){
  var height = e.originalEvent.data;
  $('.iframe').css({'height': height + 'px'});
});

参照
iframeのクロスオリジンを倒す – Qiita

6.まとめ

カラーミーショップのfetch禁止に伴う対策をご紹介しました。
カラーミーショップはwebに関する知識があまりない方が運用していることも多いかと思います。
そのような方の参考になればと思い、今回記事にしました。

よかったらシェアしてね！

URLをコピーしました！