WordPressでつくったブログサイトからfeedを拾って、表題、概要、画像を受け取りEC-CUBEのトップに新着一覧として表示させることができたのでそのまとめ。
まずは実装したサイト。こんな感じでブログの新着情報を拾ってきて表示しています。
目次
作業の流れ
おおまかな作業の流れは以下のとおり。
1. Google AJAX Feed APIのJavaScriptを作成する
2. EC-CUBEの /data/smarty/templates/自分のテーマ/site_frame.tpl に１のScriptを書き込む
3. EC-CUBEの管理画面から、新規ブロックを作成しトップページに表示する
1. Google AJAX Feed APIのJavaScriptを作成する
以前はAPIキーが必要だったようだが、現在ではそれが必要でないようなので、
<script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript">
とすることで、すぐに使える様になる。
実際に使ったスクリプトは下記のとおり。
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("http://smartlight.jp/feed/"); //自分のブログのフィード
feed.setNumEntries(5);
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var gazo = entry.content.match(/(http:){1}[\S_-]+((\.jpg)|(\.JPG))|(\.gif)|(\.png)/);
var photo = ("<img src='画像がなかったときにかわりに表示させる画像のURL' />");
if(gazo){
var element = document.createElement('tr');
element.innerHTML += "<td class='feed_pic'><a href='" + entry.link + "'><img src=" + gazo[0] + " width=80 /></a></td>" + '<td class="feed_text"><a href="' + entry.link + '">' + entry.title + '</a><br>' + entry.contentSnippet + '</td>';
container.appendChild(element);
} else {
var element = document.createElement('tr');
element.innerHTML += "<td class='feed_pic'><a href='" + entry.link + "'><img src=" + photo + " width=50 /></a></td>" + '<td><a href="' + entry.link + '">' + entry.title + '</a></td>';
container.appendChild(element);
}
}
}
});
}
google.setOnLoadCallback(initialize);
</script>
ポイント
① 画像を表示させる
画像を表示させる方法については、下記のブログに方法が書いてありました。本当はアイキャッチ画像だけをとりたいんだけど、それができるかどうかはまた今度。
Google Feed APIで画像付き最新情報を表示｜ホームページ制作ならSource Marine
②記事の抜粋を表示させる。
当初、http://smartlight.jp/feed/をみると、descriptionに記事の抜粋があったのでこれを表示させようと試行錯誤していたのだが、このフィードが無いとのエラーが発生。ちょうど、クラウドサーバー勉強会にきていたsuin先生に相談したところ、まずは、cosole.log(entry)として中身を確認してみたらとのアドバイスをもらい、entryを確認してみた。
方法は、以前ブログに書いたのでこちらを参考にしてください。
jQueryやJavaScriptでvar_dump()したいときは、console.log(hoge)してChromeのコンソールでみればいいらしい
で、結果的に ”entry.contentSnippet”が概要だと判明しました。
③テーブルにしました。
実は、jQueryもJavaScriptもまだ初心者なので、DOMの経験値が低いです。トライ&エラーで、なんとかイメージと表題と概要を表示することができました。ここら辺、経験値積んで、思い通りにDOMを操れるようになりたいものです。ちなみに、こうした方がいいよ！っていうアドバイス、大歓迎です！
2. EC-CUBEの /data/smarty/templates/自分のテーマ/site_frame.tpl に１のScriptを書き込む
作業自体は簡単です。ただ上で作成したScriptをテンプレートファイルの中の、
の中に追加するだけ。私はの前に挿入しました。方法はこちらのサイトに書かれています。
EC-CUBEにWordPressの新着を表示させる | 不思議猫日記本店 / dejavu-i
3. EC-CUBEの管理画面から、新規ブロックを作成しトップページに表示する
EC-CUBEの管理画面から、新規ブロックを追加して下記の内容のテンプレートファイルを作成しました。
これでOKです！
<div id="smartlight_blog_bloc"><h2><span class="square">■</span>スマートライトブログ新着情報</h2> <div> <table id="feed"></table> </div> </div>
まとめ
ということで、この土曜日でなんとか自分の思い描いていたことを実装することができました。
テーマファイルにPHPを書けばすぐに実装できるWordPressと違い、EC-CUBEは、クラス、拡張クラス、テンプレート、データベースの書き換えと、WordPressからやってきた人には最初戸惑うことばかりですが、PHP初心者の大きな壁となる【CLASS】に挑まざる終えない状況になり、プログラマーレベルを大幅に上げてくれることうけあいです。
さらに、物販に直接結びつくEC-CUBEの経験と知識を得ることは、自分の収益を産み出すビジネスのツールの一つとして、大幅に可能性を与えてくれると感じました。ついでにいうと、EC-CUBEはメールマガジンのシステムも兼ね備えているので、これだけでも相当すごいです。
ということで、今回の実装にはEC-CUBEのテンプレートファイルひとつだけをいじることで済んだのですが、これを機会にEC-CUBEは勉強しておくといいと思います。
あと、EC-CUBEは今後外部サイトから中の情報を利用できるようにするAPIを実装する予定があったり、プラグイン機能を導入するそうで、WordPress連携のプラグインも作りたい！という方もおられるそうです。
たのしみですね！
↓ ちなみに、私がEC-CUBEカスタマイズの一歩目を勉強している本はこちらです。
