RSSフィードをカラーミーに表示する

他サイトの情報をカラーミーショップ上で表示したいことがあります。
以前はfetch(Smarty関数)を使って、PHPで動的に作成したページをカラーミーショップに埋め込んでいることがよくありましたが、セキュリティ上の理由からか、この方法は使えなくなりました。
fetch廃止に伴ってカラーミ―ショップのサポートの方からは、iframe(HTMLタグ)による代替が提案されています。

今回検討する方法はそれとは別のものになります。
ブログは記事情報をRSSフィードというきまった形式で配信していますので、そこからタイトル・URL・画像などを取得することができます。

送受信は非同期通信(Ajax)で行いますので、表示速度によるストレスはあまりないです。
SEO的にも問題ありません(確認済み)。

RSSフィードの例(一部)RSSフィード例

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

作り込みが必要な部分はPHPスクリプトで、ブログとカラーミーショップのあいだで橋渡しをする重要な機能です。中身は以下の三つです
・simplexml_load_file関数でRSSフィードを取得します
・取得データをいい感じに切り出します
・Ajax+JSONPでカラーミーに送信します

ブログRSSをカラーミーに表示する(デモページ)

ブログ記事をカラーミーに表示する例

上例のように、トップページ上部でスライドショーにして、お客様の目をひくこともできます。
カルーセル(画像を横並び)にすると、すこしおとなしめなお知らせ欄などにも使えます。

もちろんスライドショー(カルーセル)表示せずに、HTML・CSSで整形して表示させることも可能です。

WordPressではカテゴリー・タグごとにRSSフィードを配信しているので、必要な記事情報だけを取得できます。

実装
カラーミーショップとブログの連携方法として、比較的導入しやすい手段です。
PHPが動作するウェブサーバーが必要です。

注意点
アイキャッチ画像を取ってきますので、スライドショー表示する場合は大きいサイズが必要です。画像の縦横比はそろっている方がよいです。

Feed43(外部サービス)を使ってRSSフィードを配信している自ショップのインスタ画像なども取得可能です(SnapWidgetを利用して設置する場合が多いと思いますが選択肢として)。

参考)RSSを利用したインスタ画像表示(デモページ)

執筆者

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

メーカー系情報システム部門出身で、第一種情報処理技術者
個人事業主/カラーミー歴10年目/カラーミーショップ公認パートナー。
カスタマイズやモールへの出店作業 (CSV) をお手伝いしています。

お仕事のご相談はこちら

関連記事