カラーミーショップにブログ記事を表示する方法(YQL編)

ブログRSS配信アイキャッチ

多くのお店で、お客様向けに「お知らせ/ニュース/新着情報」の告知を行っています。
告知の更新場所として、カラーミーショップの管理画面にあるお知らせ欄を使ったり、より詳細な内容については、外部サービスのFacebook、Twitter、ブログなどを利用して発信していることと思います。

Facebook、Twitterについては、公式機能でウィジェットが用意されていますので、コードをコピペすれば、カラーミーショップへ簡単に貼り付けることが可能です(その代わり、デザインはほとんどできません)。

ブログの場合はRSS配信(RSSフィード)がありますので、そこから必要な情報を切り出せばカラーミーショップに表示することは可能です。

すべてを自前で制作する場合ですと、PHPでRSS配信(XML形式)を読み込んで項目を整形するプログラムを作って、ウェブサーバー上に置いて、カラーミーショップ側からプログラムを呼び、AjaxとJSONPでデータを送受信する流れになります。

外部サービスを利用すると、上述の部分を制作せずに済みます(省コスト)。
以前はGoogle Feed APIが有名でしたがサービス終了しましたので、最近では、YQL(Yahoo Query Language)を利用することが多いようです。

今回は、YQLを利用してRSS配信からブログ記事を取得する方法について紹介します。
ある程度コーディングできる方でしたら、コピペで実装できるかなと思います。

YQLについて

YQLのページは英語ですので、なかなか理解しにくいです。
YQL、RSSで検索すると、参考になるウェブサイトが多数見つかりますので、コーディングの内容を深く理解したい場合は、それらも併せて参照ください。

YQLメイン画面

上画面(https://developer.yahoo.com/yql/)は、YQLで取得した内容をプレビューできるページです。
YQL Queryに、RSS配信ページのURLを含めたSQL文みたいなのを記述します。

ためしに、当ブログ(https://naeco.jp)のRSS配信を取得してみます。
YQL Queryに「select * from rss where url='https://naeco.jp/feed/'」と入れて、Testボタンを押すと、Response窓に結果が返ってきました。

YQLでJSON取得テスト

当ブログのRSS配信をJSON(JavaScript Object Notation)という形式で受け取りました。
カラーミーショップでブログを表示するには、受け取った内容を取り出して、加工・整形して、出力する必要があり、そのためのコーディングが必要になります。

受け取る内容(Response)は、WordPressやアメブロなどブログサービスによって異なる場合があります。
当ブログはWordPressを使っていますが、同じWordPressを利用している場合でも使用プラグインによって、内容が異なる場合があります。
下記コードが動かない場合は上画面のResponseで項目名("title"、"pubDate"など)を確認して、コードの中身を見直す必要があります。JavaScriptの知識が少し必要です。

コーディング

JavaScript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://img.shop-pro.jp/tmpl_js/76/jquery.tile.js"></script>

<script type="text/javascript">
  function img_height() {
    var thumb_height = $('.article img').width() * 0.56;
    $('.article a').css('height', thumb_height + 'px');
  }
</script>

<script type="text/javascript">
  $(function(){
    $.getJSON("https://query.yahooapis.com/v1/public/yql?callback=?", {
      q: "select * from rss where url='https://naeco.jp/feed/'",
      format: "json"
    }, function(json) {
      var container = document.getElementById('feed');
      for (var i = 0; i < json.query.results.item.length; i++) {
        var entry = json.query.results.item[i];

        /* 日付の整形 */
        var dd = new Date(entry.pubDate); // now
        var yearNum = dd.getYear();
        if (yearNum < 2000) yearNum += 1900;
        var m = dd.getMonth() + 1;
        if (m < 10) {
          m = '0' + m;
        }
        var d = dd.getDate();
        if (d < 10) {
          d = '0' + d;
        }
        var date = yearNum + '/' + m + '/' + d;

        /* 画像の取得 */
        var imgsrc = entry.encoded.match(/src="(.*?)"/igm);
        if ( imgsrc[0] == null) {
          imgsrc[0] = 'src="https://example.com/image/noimage.jpg"';
        }

        /* 説明文を取得 */
        var desc = entry.description.substr( entry.description.indexOf("<p>") + 3, entry.description.indexOf("...") );

        container.innerHTML += '<div class="article">' + 
                             '<a href="' + entry.link + '" target="_blank">' + 
                             '<img ' + imgsrc[0] + ' />' +  '</a>' + 
                             '<p class="date">' + date + '</p><p class="title">' + 
                             entry.title + '</p><p>' + desc + '</p></div>';
      }
    });
  });

  /* ロード時 */
  $(window).load(function (){
    $('.article').tile(5); /* jquery.tile.js */
    img_height(); /* 画像高さの調整 */
  });

  /* リサイズ時 */
  $(window).resize(function (){
    $('.article').tile(5);
    img_height();
  });
</script>

CSS

#feed {
  width: 100%;
}
.article {
  display: inline-block;
  margin: 1%;
  vertical-align: top;
  width: 18%;
}
.article a {
  display: block;
  overflow: hidden;
}
.article img {
  width: 100%;
}
.date {
  font-size: small;
}
.title {
  font-weight: bold;
}

HTML

<!-- 出力先 -->
<div id="feed"></div>

コーディングの解説

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
jQuery本体。設置場所がカラーミーショップの場合は読み込み済みですので、記述不要です。

<script src="https://img.shop-pro.jp/tmpl_js/76/jquery.tile.js"></script>
要素の高さを揃えるjQueryプラグイン。
div要素(<div class="article">~</div>)の高さを揃えています。
$('.article').tile(5);で実行しています(5つずつ高さを揃えます)。

function img_height()
画像の高さがまちまちなので、jQueryでheightを指定するようにしています。
img要素の外側のa要素を「overflow: hidden;」として、縦長の場合は下を切って、横長の場合は空白を入れるようにしています。

q: "select * from rss where url='https://naeco.jp/feed/'",
上のプレビュー時で見たYQL Queryと同じです。
(基本的には)各自ブログのRSS配信しているURLに変更するだけです。

imgsrc[0] = 'src="https://example.com/image/noimage.jpg"';
画像がなかったら、あらかじめ用意したnoimage.jpgを表示します。

/* ロード時 */ /* リサイズ時 */
要素の高さと画像の高さを計算しセットします。

コードの実行結果

当ブログのRSS配信から、画像、日付、タイトル、説明文を取得して、HTMLで出力しています。
デザインはCSSで修正できますので、お好みでどうぞ。

ブログRSSを整形した結果

おわりに

YQLは無料で利用できますが、いつかサービス終了する可能性があります。
YQLなしでも、ウェブサーバーがあれば、PHP+Ajax+JSONPで実装できます。
検索するとPHPを使わない方法として、RSS配信をjQueryで取得するという記事も見つかります。

カラーミーショップが常時SSL化している場合は、ブログ(取ってくる先)もSSL対応しておく必要があります。

表示できる最大件数は使っているブログのRSS配信件数によります。

以前に書いた記事が今回の内容と似ていますので、参考にどうぞ。
参考)カラーミーショップにインスタグラムの画像を表示する方法(新) | naeco.jp

補足 カラーミーショップのfetch禁止

カラーミーショップのオーナー様へのお知らせで告知されたように、今後はfetchが利用できなくなります。
オーナー様へのお知らせでは、これまでfetchで動的に生成されるページを取得していた場合は、代替手段としてiframeの利用を提案しています。

・CMSやRSSなど、動的に生成されるページを取得している場合
iframeタグで読み込むことでショップ内にページを表示させることが可能となります。

参照元:2018/06/27 - デザインテンプレートで一部の記述が使えなくなります(要ログイン)

iframeはサーバー側の設定で許可されていない場合がたまにあります。
iframeで上手く読み込めない場合は、YQLで取ってくるという選択肢もあります。

 

お仕事のご依頼はお問い合わせフォームからどうぞ。

執筆者

えーじ@naeco.jp この記事を書いた人

メーカー系情報システム部門出身で、第一種情報処理技術者
カラーミー歴10年目/カラーミーショップ公認パートナー。
好きが高じてブログを書いていますが、カラーミーの中の人ではありません。