中小企業診断士兼システムエンジニアの複眼ブログ

ブログのRSSを取得して他のサイトに貼り付ける

MovableTypeやWordPresをCMSとして使い、サイト全体をブログで構築していれば、新着記事をトップページに引用することができる。イベント情報をアップすれば、トップにも記事が反映されるので、利用者にも親切・ＳＥＯ的にもＯＫ・サイト管理も簡単になる　という三方一両得的なメリットが享受できる。

無料ブログやブログを日記としてしか使っていない場合は、このメリットは生かせない。ただJavaScriptやAjaxをHTMLに埋め込めば、ブログのRSSを取得して、別のサイトに表示することはできる。スクリプトで表示しているだけなのでＳＥＯ面ではメリットにはならないが、いちいちブログの記事の抜粋をHTMLに追記してアップする苦労からは解放される。

PHPを使えばHTMLに直接書き込むことができるのでＳＥＯ的にも有利となるが、サーバの制約がありPHPが使えないこともある。というわけでJavaScriptを使う方法が一般的だ。Ajaxも使えるが、別ドメインのデータが取得できないという制限があるので同一サーバにサイトとブログを持つ人に限られていた。

GoogleAPIでRSSを取得する

GoogleがGoogleAJAXFeedAPIを提供してくれている。これは別サーバのデータを取得できないというAJAXの制限をGoogleがプロキシサーバ（代理サーバ）を立てて取得してくれる　という仕組み？だ。とにかく利用してみよう。

GoogleAPIでRSSを取得してみた

まづGoogleAPIを利用するためにＡＰＩキーを取得する必要があるが、GoogleMapAPIと同じキーなので取得済みだった。（未取得ならGoogleのガイダンスに従って取得しておこう）Google AJAX Feed APIを利用するページが開かれた。利用許諾を承認して、APIを使うサイトのURLを入力して　Generate API Key ボタンをクリックする。Your API Key と　スクリプトが表示されるので、スクリプトをHTMLに貼り付ければとりあえずの作業は終了だ。

スクリプトは以下の通り

<script type="text/javascript" 
src="http://www.google.com/jsapi?key=XXX"></script>

<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
      var feed = new 
        google.feeds.Feed("http://www.digg.com/rss/index.xml");
      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 div = document.createElement("div");
            div.appendChild(document.createTextNode(entry.title));
            container.appendChild(div);
          }
        }
      });
    }
    google.setOnLoadCallback(initialize);
 
    </script>

GoogleAPIスクリプトをカスタマイズして概要を表示させる

貼り付けたHTMLには、ブログ記事のタイトルが表示されている。既定ではタイトルしか表示しないようだが、ここは概要や日付けも表示させたいところだ。貼り付け先のスタイルにあわせてHTMLタグも入れたい。

以下の行をコメント化する

            var div = document.createElement("div");
            div.appendChild(document.createTextNode(entry.title));
            container.appendChild(div);

代わりに下の行を追加

            var entry = result.feed.entries[i];
            var eTitle = entry.title;
            var eContent = entry.content;
            var eDescription = entry.contentSnippet;
            var eDate = entry.publishedDate;
            container.innerHTML += "<h4>"+eTitle+"</h4>";
            container.innerHTML += "<p>" + eDate+"<br />";
            container.innerHTML += eDescription+"</p>";

RSSの表示画像はこんな感じ

このページは貼り付けたRSSを表示しているだけ。新着情報やブログ新着記事など、本格的に利用する場合は、トップページ等の貼り付けるページに　feed というdivを作り、h4 p へのスタイルを指定することになる。

GoogleAPIは検索エンジンのペナルティもなしで安心だ

せっかくブログを書いていても肝心のネットショップのトップページに記事が反映されないのはモッタイない　ということで、これまでいろいろなサービスを取り上げたことがあるが、いずれも作者やサービス提供サイトへのリンクが避けられなかった。このGoogeAPIならリンクの表示もなく、飛び先もGoogleなので検索エンジンのペナルティを気にすることなく、安心して使える。お勧めです。

この記事は　http://www.openspc2.org/JavaScript/Ajax/Ajax_study/chapter22/001/index.html　を参考にさせていただきました。AJAXだけでなく　JavaScriptの情報も参考にさせていただいています。　openspc@po.shiojiri.ne.jp　さんに感謝！　塩尻、お近くです。

ブログサービスのホームページだったら

お知り合いがアメーバブログを使っているとのことだったので、アメーバブログのトップページにブログ紹介or検索があるだろうと考えて「アメーバブログ」で検索してみた。

Googleで一位で表示されたのは、アメーバブログ by CyberAgentのページ

コレって、会員登録のページでしょ。会員数１５０万人突破！と豪語しているので勧誘に熱心なことはわかるが、既存ユーザのフォローを考えるなら、今あるブログの紹介や検索のページが開くべきではないか？

会員登録する際も、今のブログを見てから登録するかどうか検討すると思われる。新規利用者にとっても既存のブログを紹介するほうが有効ではないだろか。いきなり会員登録ページに誘導されるとは！

CyberAgent本体のサイトを開いてみたが、アメーバブログでクリックすると同じ会員登録画面に誘導された。アメーバのようにとらえどころが無いのが売りなのかもしれない。

念のため、FC2で検索すると、FC2ブログの紹介と既存ブログの新着記事の一覧、既存ブログの検索ページが開く。

ブログサービスならこれが普通だと思うのだが・・・

リフレ簡単カレンダー設置方法

リフレネットの簡単カレンダーは物販サイトに不可欠な営業日カレンダーが簡単に、しかも無料で設置できる、便利なサービスだ。無料ブログで作る物販サイトでも利用させていただいている。ただ、リフレ簡単カレンダープラスが登場して、設置方法が少々混乱してきたので、リフレ簡単カレンダーとの設置方法の違いをまとめてみた。

→リフレの各種カレンダーを設置した無料ブログで作る物販サイトサンプル

リフレ簡単カレンダーには３つのカレンダーがある！

もっと簡単なカレンダーは、簡単カレンダーのトップ画面にあるHTMLタグを貼り付けるもの。ＩＤの登録は不要だが、自社の休日の設定などはできない。→以下、お手軽カレンダ

簡単カレンダーは従来から提供されているサービス。ＩＤを登録し、設定ファイルを作成して、自分のサーバにアップする。休日の変更等は自分のサーバにアップした設定ファイルを変更することになる。→以下、簡単カレンダ

簡単カレンダープラスは簡単カレンダーの派生バージョン。設定ファイルをサーバにアップする手間を省き、設定画面で休日等を変更したら、同画面で作成されたHTMLタグをコピーし自分のHTMLにはりつけることになる。→以下、プラスカレンダ

■お手軽カレンダの設置方法

設置もお手軽。リフレ簡単カレンダーのトップページのHTMLタグを貼り付けるだけ。

曜日の設定ができないので、土日祝日が休みの企業しか使えない！？

お手軽カレンダの設置画面（クリックで拡大、以下の画像も同様）

■簡単カレンダの設置方法

リフレ簡単カレンダーのトップページの下にある　ユーザ登録（無料）のリンクから入る。

リフレ簡単カレンダの入り口

ニックネームとメールアドレスを入力する。

簡単カレンダ登録画面

入力したアドレスに登録用のＵＲＬが送られてくるので、そのＵＲＬを開いて設定ファイルを保存する。

簡単カレンダ設定画面

休日も任意に設定できるが、設定ファイルを自分のサーバにアップし、設置用のHTMLに設定ファイルのURLを書く必要がある。サーバへのファイルのアップロードができ、かつアップしたファイルの場所が分かる人でないと設置は難しい。

■プラスカレンダの設置方法

サーバへの設定ファイルのアップロードができない！という人のタメに作られたのがプラスカレンダ。簡単カレンダと同じリフレ簡単カレンダーのトップページの上部の　こちらから　のリンクから入る。

プラスカレンダの入り口　簡単カレンダと間違えないように！

ＩＤを登録する。登録後はログイン画面から設定画面に入って設定を行う。

プラスカレンダのログイン画面

曜日や休日の設定を行う。設定が終わったら、HTMLのタグをコピーして、貼り付けたいページにペーストする。

プラスカレンダの設定画面

設定を変更するたびにHTMLが変わる。変更のたびにHTMLをコピー＆ペーストするのが面倒でなければこちらの方がより簡単に使えてプラスかもしれない。ただし、複数のサイトにカレンダーを設置して、一括して設定を変更したい人には簡単カレンダーの方が便利だと思われる。

設定画面で休日や色を変更すれば、HTMLを貼り付け直さなくても変更内容が反映されるようです。訂正します。さすがプラス！。HTMLを貼り付けるサイトのURLを登録しないとカレンダーが表示されません。

→リフレの各種カレンダーを設置した無料ブログで作る物販サイトサンプル

商品ページの構成をどうするか

ブログでネットショップなどのビジネスサイトを作る場合、商品ページの構成にはチョットした工夫が必要になる。個別の商品ページはブログの記事として作成することになるが、本来、ブログは日記としての利用を前提として作られているため、新着順に記事が掲載されてしまう。ビジネスブログ、ビジネスサイトの場合、新着順では具合が悪いことになる。

→ FC2ブログで作った通販ビジネスサイトサンプル商品ページ

トップページはテンプレートの変更で

トップページはブログのテンプレートを変更して、常に固定的なコンテンツを表示させる。

無料ブログFC2の場合は、プラグインのカテゴリ３にフリーエリアを追加して、index_areaに表示させる。この場合、特にトップのカテゴリは作らない。

MovableTypeの場合は、いろいろな方法あるが、テンプレート index.htmlを変更し、トップカテゴリのみを表示させる方法でサンプルを作成した。

さて商品ページはどうするか

普通ネットショップで取扱う商品はいくつかの商品群に分けられる。この商品群をブログのカテゴリに追加する。これで各商品群はブログのメニューに表示される。

商品群＝カテゴリを選択した後で、個々の商品のページを一覧として表示してもいいが、商品数が多い場合、ページが縦に長くなりすぎてしまう。#moreで詳細を見る　という対応も考えられるが、トップページで商品群をクリックしたら、いきなり商品の一覧というのも味気ない。

商品群ごとに紹介ページを作る

商品群が選択された場合、常に最初に表示されるページ、つまり商品群の紹介ページがあれば、群内の商品にどんなものがあるかが分かり、訪問者の利便性が高まる。紹介ページには商品のサムネイル画像やイメージ画像を入れ、段組で商品の簡単な説明をつける。各商品の詳細はリンク先の個別商品ページに書いておけばいい。

個別商品ページは

商品群の紹介ページからリンクされる個別ページには各商品の詳しい説明や画像を記述する。カートに入れるボタンも入れておく。このページを商品の数だけ作り、商品群＝カテゴリに分類すればいい。

商品群紹介ページと個別商品ページの並び順は

これで商品群の紹介ページと個々の商品ページができた。ただし、このままでは商品群カテゴリを選択したときの表示順が新着順＝作成順になってしまう。商品群が選択されたとき、常に先頭に紹介ページを表示するにはどうするか？

答えはブログの特性を利用すれば簡単だ。ブログは日記として作られ、日付の新しい順に記事を表示する。この仕様を利用して、紹介記事の日付をカテゴリ内の他の記事の日付より新しくしておけば常に先頭に表示されることになる。２番目以降に表示させたい記事も日付でコントロールできる。

商品の数が多いとき

商品数が多いと商品ページの数が多くなり、商品群紹介ページも長くなる。見ている側はあまり多い商品にはついていけない。商品数が多い場合は、商品群の中を細分化し、群内の商品をグループに分ける。商品群紹介ページではグループへリンクし、グループのページから個別の商品ページにリンクする。このように入れ子（ネスト、レベル）を深くしていけば、商品数が増えても対応できる。

階層はあまり深くしないこと

ただし、あまり階層を深くすると訪問者が来なくなる　と言われているので注意が必要だ。

商品群は３−６／サイト、グループは２，３／商品群、商品は１０数個程度／グループ　このくらいが限度ではないだろうか

カテゴリで表示するエントリの数 無料ブログFC2の場合

カテゴリ、ここでは商品群が選択された場合に表示する記事＝エントリの数は原則としてブログで決まっているが、カテゴリごとに設定できると好都合だ。

FC2では、環境設定→ブログの設定→記事の設定で、１ページに表示する記事の数を１から３０の範囲で指定する。ブログ単位での設定であり、残念ながらFC2ではカテゴリごとに表示する数を設定することはできない。（その下にある　最近の記事リストの表示数　とはプラグインの新着記事で表示する記事の数）

表示数を増やすとカテゴリを選択した際に表示される記事が増えることになる。通常のブログならそれでも我慢できるかもしれないが、ビジネスサイトでは問題だ。

商品ページだけを考えれば表示数を１にしてもいいのだが、ブログとして使っているカテゴリで困ったことになる。

FC2の場合、表示数を５に設定するのが妥当ではないだろうか。商品群カテゴリの場合、１．商品群の全体の説明ページ＋２．商品グループＡ＋３．商品グループＢ＋４．お勧め商品＋５．定番商品　で５つとなる。

ブログとして使っているカテゴリでも５つの記事が表示されれば問題はないのではないか。FC2の場合、カテゴリ内の記事が多くなると、前ページ、次ページがカテゴリページの下部に表示されるので、ページ単位＝５エントリ単位で見ることができる。

サンプルサイトではカテゴリページの先頭に表示、前ページ・次ページの上に表示される、記事の一覧の表示をカットした。このほうがサイトとしては標準的となる。

→ FC2ブログで作った通販ビジネスサイトサンプル商品ページ

カテゴリで表示するエントリの数 MTの場合

MovableTypでは、設定→表示に関する初期設定でメインページに表示する数をエントリ単位か日付単位かで設定する。カテゴリページで表示するエントリはそのカテゴリ内のすべてのエントリとなる（MTのブログでボリュームのあるカテゴリを見る時にえらく時間がかかるのはこのためである）。ただしMTはテンプレートの中で　MTEntries lastn="15"　などと表示する数がコントロールできる。これを使えば、カテゴリごとに表示する数が変えられる。さすがMTだ。

MovableTypeと無料ブログを比較する

ブログを作る際にMovableTypeで行くか？　それともFC2などの無料ブログで行くか？　を検討する必要がある。単なるお日記ブログではなく、ビジネスサイトをブログで作る場合は、より慎重に検討しなければならない。

ビジネスサイトを作る　という前提で、MovableTypeと無料ブログの比較表を作ってみた。無料ブログはアクティブ数でlivedoorを抜いた！という話もあるFC2をターゲットにしている。

こんな感じでしょうか？