カラーミー 2024年02月29日 naeco.jp

カラーミーショップにブログ記事を埋め込む方法（2022年版）

ブログ埋め込み例

多くのお店で「お知らせ／ニュース／新着情報」などの情報発信を行っています。
そういう場合にブログ記事をカラーミーショップ に埋め込みたいことがあります。

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

今回はサンプルコードを中心に実装方法について記事にしました。

RSSフィードについて

ブログは記事情報をXML形式（HTMLに似たタグで記述）で配信しています。具体的には、ブログ側で決められた場所にファイルが存在します
（WordPressの例：https://naeco.jp/category/colorme/feed）。

RSSフィードを読めば、記事タイトル・リンク先URL・画像URLなどを取得することができます。

RSSフィードの一例（抜粋）

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/">

  <channel>
    <title>カスタマイズ - naeco.jp</title>
    <atom:link href="https://naeco.jp/category/customize/feed" rel="self" type="application/rss+xml" />
    <link>https://naeco.jp</link>
    <description>カラーミーショップのカスタマイズ屋さん</description>
    <lastBuildDate>
      Tue, 05 Mar 2019 07:31:55 +0000 </lastBuildDate>
    <language>ja</language>
    <sy:updatePeriod>
      hourly </sy:updatePeriod>
    <sy:updateFrequency>
      1 </sy:updateFrequency>
    <generator>https://wordpress.org/?v=5.1</generator>
    <item>
      <title>カラーミーショップにブログ記事を埋め込む方法（2019年版）</title>
      <link>https://naeco.jp/customize/blog-rss-yql</link>
      <pubDate>Tue, 05 Mar 2019 05:00:54 +0000</pubDate>
      <dc:creator>
        <![CDATA[naeco]]>
      </dc:creator>
      <category>
        <![CDATA[カスタマイズ]]>
      </category>
      <category>
        <![CDATA[RSS]]>
      </category>
      <category>
        <![CDATA[メディアEC]]>
      </category>
      <guid isPermaLink="false">https://naeco.jp/?p=3142</guid>
      <description>
        <![CDATA[<p><img width="320" height="180" src="https://naeco.jp/wp/wp-content/uploads/2018/05/blog_yql_eyecatch-320x180.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="ブログRSS配信アイキャッチ" srcset="https://naeco.jp/wp/wp-content/uploads/2018/05/blog_yql_eyecatch-320x180.jpg 320w, https://naeco.jp/wp/wp-content/uploads/2018/05/blog_yql_eyecatch-300x169.jpg 300w, https://naeco.jp/wp/wp-content/uploads/2018/05/blog_yql_eyecatch-768x432.jpg 768w, https://naeco.jp/wp/wp-content/uploads/2018/05/blog_yql_eyecatch-880x495.jpg 880w, https://naeco.jp/wp/wp-content/uploads/2018/05/blog_yql_eyecatch-848x477.jpg 848w, https://naeco.jp/wp/wp-content/uploads/2018/05/blog_yql_eyecatch.jpg 987w" sizes="(max-width: 320px) 100vw, 320px" /></p>
<p>追記）YQL（Yahoo Query Language）の無料サービス終了に伴って、記事を書き直しました。 多くのお店で、お客様向けに「お知らせ／ニュース／新着情報」の情報発信を行っています。そういう場合にブログ記事をカ...</p>
<p>The post <a rel="nofollow" href="https://naeco.jp/customize/blog-rss-yql">カラーミーショップにブログ記事を埋め込む方法（2019年版）</a> appeared first on <a rel="nofollow" href="https://naeco.jp">naeco.jp</a>.</p>
]]>
      </description>
    </item>
    <item>
      <title>カラーミーショップにインスタ画像を埋め込む方法 (2019年版)</title>
      <link>https://naeco.jp/customize/instagram-rss-yql</link>
      <pubDate>Tue, 05 Mar 2019 02:35:02 +0000</pubDate>
      <dc:creator>
        <![CDATA[naeco]]>
      </dc:creator>
      <category>
        <![CDATA[カスタマイズ]]>
      </category>
      <category>
        <![CDATA[メディアEC]]>
      </category>
      <category>
        <![CDATA[Instagram]]>
      </category>
      <guid isPermaLink="false">http://naeco.jp/?p=1759</guid>
      <description>
        <![CDATA[<p><img width="320" height="180" src="https://naeco.jp/wp/wp-content/uploads/2017/07/instagram-top-thumb-320x180.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="https://naeco.jp/wp/wp-content/uploads/2017/07/instagram-top-thumb-320x180.jpg 320w, https://naeco.jp/wp/wp-content/uploads/2017/07/instagram-top-thumb-300x169.jpg 300w, https://naeco.jp/wp/wp-content/uploads/2017/07/instagram-top-thumb-768x432.jpg 768w, https://naeco.jp/wp/wp-content/uploads/2017/07/instagram-top-thumb-880x495.jpg 880w, https://naeco.jp/wp/wp-content/uploads/2017/07/instagram-top-thumb-848x477.jpg 848w, https://naeco.jp/wp/wp-content/uploads/2017/07/instagram-top-thumb.jpg 1280w" sizes="(max-width: 320px) 100vw, 320px" /></p>
<p>追記）YQL（Yahoo Query Language）の無料サービス終了に伴って、記事を書き直しました。 情報発信やブランディングにInstagram（インスタグラム、インスタ）を利用している方は多いですが、公式のウィ...</p>
<p>The post <a rel="nofollow" href="https://naeco.jp/customize/instagram-rss-yql">カラーミーショップにインスタ画像を埋め込む方法 (2019年版)</a> appeared first on <a rel="nofollow" href="https://naeco.jp">naeco.jp</a>.</p>
]]>
      </description>
    </item>

処理の流れ

カラーミーショップから起動した「PHPスクリプト」が
→「ブログのRSSフィードを取得」し
→「必要項目を切り出し」て
→「Ajax+JSONP」という方法でカラーミーショップに「送信」して
→カラーミーショップで「表示」

作り込みが必要な主な部分はPHPスクリプトで、ブログ（RSS）とカラーミーショップのあいだで橋渡しをする重要な機能です。

中身は以下の三つです。

  • simplexml_load_file関数でRSSフィードを取得します
  • 取得データをいい感じに切り出します（foreach内）
  • Ajax+JSONPでカラーミーに送信します

サンプルコード

display-rss-feed.php

<?php
define (MAX_NUM,10); //表示させたい件数
$rss = simplexml_load_file('https://your-domain.jp/category/feed', 'SimpleXMLElement', LIBXML_NOCDATA);
$i = 0;

foreach($rss->channel->item as $item) {
  if($i >= MAX_NUM) {break;}
  $title = $item->title; //記事タイトル
  $link = $item->link; //リンク先URL 
  $date = date("Y/m/d", strtotime($item->pubDate)); //日時
  $description = $item->description ; // 詳細 
  $description = str_replace("[","",$description);
  $description = str_replace("]","",$description);
  if(preg_match_all('/<img([\s\S]+?)>/is', $item->description, $matches)) {
    $matches = str_replace("src =","src=",$matches);
    foreach($matches[0] as $img) {
      if($img === reset($matches[0])) {//最初の画像にマッチしたもの
        if(preg_match('/src=[\'"](.+?(jpe?g|png|gif))[\'"]/', $img, $m)) {
          $thumb = $m[1]; //サムネイル画像URL
        }
      }
    }
  }
  $outdata.='<li><a href="'. $link.'" target="_blank"><img src="'. $thumb .'" /></a><p>'.$title.'</p></li>';
  $i++;
}

//出力用配列にセット
$output = array(
'out' => $outdata
);

header( 'Content-Type: text/javascript; charset=EUC-JP' );
echo $_GET['callback'] . '(' . json_encode($output). ')';

jQuery

$.getJSONP = function(url,callback,param) {
  return $.ajax({
    url: url,
    scriptCharset: "utf-8",
    dataType: "jsonp",
    success: callback
  })
}
$.getJSONP("https://your-domain.jp/display-rss-feed.php", onDataHandler)
function onDataHandler(response) {
  if(response.out != null){
    $("#news-blog").append(response.out);
  }
}

HTML

<!-- 出力先 -->
<ul id="news-blog"></ul>

コーディングの解説

サンプルコードはWordPressの例です。

RSSフィードから必要な項目を切り出す部分（PHPのforeach内）は、使っているブログに合わせてコードを書き換える必要があります。

ブログによってはRSSフィードに画像URLが含まれていなかったり、広告が入っていたりします。ブログに合う作りが必要になります。

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

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

表示件数のMAX_NUMや、$outdateのHTMLタグをjQueryのコードの方で書くともっとスマート。

おわりに

お仕事のご依頼は下の記事を参考にどうぞ。
ブログの最新記事をカラーミーに埋め込む【プロダクトページ】

RSSフィードを表示する例

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

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

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

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

補足2　iframeを使わないメリット・デメリット

iframeは表示速度が遅くなる場合があります。
また、サーバー側の設定で許可されていない場合も、たまにあります。

WordPress Popular PostなどのWordPressの機能は、iframeでカラーミーショップ内に埋め込める場合があります。

執筆者

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

メーカー系情報システム部門出身の個人事業主。
自作するのが好きですぐに試したくなる、凝り性なWebエンジニア。
カラーミーショップ、モールなどのECについて記事にしています。

ご相談・お問い合わせはこちら