MagpieRSSとMixItUpを使ってレスポンシブなアンテナサイトをつくってみた。その１ |

作ろうと思ったきっかけ

このブログではありませんが自分のブログのアクセスがなかなか延びない上に、アクセス流入が期待できるアンテナサイトも大手は殆ど相手にしてくれません。

なら自分で作っちゃえと言うことで作ってみました。

最初はLivedoorの相互RSSツールかなんかで取得したデータをJavaScriptで並び替えればそれらしいのが出来るんじゃないかみたいな甘い考えで色々調べ始めたらそんなに甘くないことが判明。

けど折角だからそんなに難しくもなさそうだし勉強にもなりそうなので作ってみました。

しかしどうせ作るなら技術畑出身者がゴリゴリ吐き出したようなページではなくデザインの流行も取り入れようと思いフラットでレスポンシブな感じで作ろうと思いました。

RSSパーサーPHPライブラリMagpieRSS

RSSをPHPで扱おうと思った場合はこれ一択といえるくらい有名なライブラリです。
MagpieRSSとリスト項目のソート表示や並べ替えがクールに出来るjQueryプラグインMixItUpを利用することに決めました。

まずはMagpieの利用手順

１．MagpieRSSを公式サイト（http://magpierss.sourceforge.net/）からダウンロード

２．DLしたファイルを解凍していくつもファイルがありますが利用するのは拡張子が「.inc」のファイル4つとextlibのフォルダのみ。

３．これらのファイルを当該ディレクトリにアップロード、文字コードをUTF-8、開発用にキャッシュ保持時間を短くしたら準備完了

キャッシュ保持時間の変更はrssfetch.incの350行目あたりの時間で調整します（秒数）

変更前
    if ( !defined('MAGPIE_CACHE_AGE') ) {
        define('MAGPIE_CACHE_AGE', 60*60); // one hour
    }
変更後
    if ( !defined('MAGPIE_CACHE_AGE') ) {
        define('MAGPIE_CACHE_AGE', 30); //30秒
    }

変更前

if ( !defined('MAGPIE_CACHE_AGE') ) {

define('MAGPIE_CACHE_AGE', 60*60); // one hour

}

変更後

if ( !defined('MAGPIE_CACHE_AGE') ) {

define('MAGPIE_CACHE_AGE', 30); //30秒

}

文字コードの変更はこちらもrssfetch.incの357~

変更前

    if ( !defined('MAGPIE_OUTPUT_ENCODING') ) {
        define('MAGPIE_OUTPUT_ENCODING', 'ISO-8859-1');
    }
変更後

    if ( !defined('MAGPIE_OUTPUT_ENCODING') ) {
        define('MAGPIE_OUTPUT_ENCODING', 'UTF-8');
    }

変更前

if ( !defined('MAGPIE_OUTPUT_ENCODING') ) {

define('MAGPIE_OUTPUT_ENCODING', 'ISO-8859-1');

}

変更後

if ( !defined('MAGPIE_OUTPUT_ENCODING') ) {

define('MAGPIE_OUTPUT_ENCODING', 'UTF-8');

}

基本的な部分のコードはこちらのページ（コケムスシェルターアンテナサイト入門【PHP】）を参考にさせていただきました。

しかしこのコードでは巷のアンテナサイトのようにパースした情報を日付順にソートして吐き出すだけでジャンルごとに分けることができません。

そこでこのような感じでジャンル毎にブログ名で配列を作ります。

$rssUrl=array(
'http://hamusoku.com/index.rdf',//ハム速
'http://blog.livedoor.jp/kinisoku/index.rdf',//キニ速


//社会
'http://jipangnet.blog.fc2.com/?xml',//ジパング
'http://kaigainohannoublog.blog55.fc2.com/?xml',//パンドラの憂鬱
'http://asiareaction.blog.fc2.com/?xml',//中国の反応

//WEB
'http://blog.livedoor.jp/itsoku/index.rdf',//IT速報
'http://gadgetlife2ch.blog.fc2.com/?xml',//ガジェットらいふ速報-2ちゃんねるまとめ-
'http://www.ideaxidea.com/feed',//ideaidea
'http://www.webcreatorbox.com/feed/'//WEBクリエイター
);

$omoshiro=array(
'ハムスター速報',
'キニ速');

$social=array(
'【海外の反応】　パンドラの憂鬱',
'（　｀ハ´）中国の反応ブログ',
'ジパング　世界の反応'
);

$web=array(
'IT速報',
'ガジェットらいふ速報-2ちゃんねるまとめ-',
'IDEA*IDEA',
'Webクリエイターボックス');

$rssUrl=array(

'http://hamusoku.com/index.rdf',//ハム速

'http://blog.livedoor.jp/kinisoku/index.rdf',//キニ速

//社会

'http://jipangnet.blog.fc2.com/?xml',//ジパング

'http://kaigainohannoublog.blog55.fc2.com/?xml',//パンドラの憂鬱

'http://asiareaction.blog.fc2.com/?xml',//中国の反応

//WEB

'http://blog.livedoor.jp/itsoku/index.rdf',//IT速報

'http://gadgetlife2ch.blog.fc2.com/?xml',//ガジェットらいふ速報-2ちゃんねるまとめ-

'http://www.ideaxidea.com/feed',//ideaidea

'http://www.webcreatorbox.com/feed/'//WEBクリエイター

);

$omoshiro=array(

'ハムスター速報',

'キニ速');

$social=array(

'【海外の反応】　パンドラの憂鬱',

'（　｀ハ´）中国の反応ブログ',

'ジパング　世界の反応'

);

$web=array(

'IT速報',

'ガジェットらいふ速報-2ちゃんねるまとめ-',

'IDEA*IDEA',

'Webクリエイターボックス');

ここで入れるブログ名はRSS情報でtitleとして送られてくるものをコピー&ペーストで挿入します。

そして結果を吐き出す繰り返し（forやWhile）文の中でifとelseifを使って分岐します。

例：

if(in_array($site_title, $web)){
		 echo "$titlelink$site_titlelink";
		}elseif(in_array($site_title, $social)){
			 echo "$titlelink$site_titlelink";
			}else{
			 echo "$titlelink$site_titlelink";
				};

if(in_array($site_title, $web)){

echo "$titlelink$site_titlelink";

}elseif(in_array($site_title, $social)){

echo "$titlelink$site_titlelink";

}else{

echo "$titlelink$site_titlelink";

};

ソート表示するだけなら他にも方法はありますが、ジャンル別にXMLを生成してRSSを再送信したいときに利用しました。

ここまでがMagpieRSSの基本的な利用方法です。

あとはパースしたデータを目的に応じて吐き出すのが主な作業になりますが大手アンテナサイトと比較して最低限必要だと思った機能を追加していきます。

１．取得した記事へのリンクページを自動生成。

２．取得したRSSのURLを自動生成したページに変更して再送信（RSSフィードの自動生成）

３．日付毎のRSS取得データ

４．生成した全ページへのリンクとsitemap.xmlの自動生成

ここまでがMagpieRSSで取得したデータを利用する機能。

５．人気記事の表示（Google Core Reporting APIを利用）

６．記事検索

７．あとで読む機能の追加（jQyeryCacheやLocal Strageを利用）

ここまでできれば大手アンテナサイトと比較しても遜色無いボリュームのまとめサイトが出来ると思います。

更にMixItUpを利用してクールなソート表示機能をつけた上で、レスポンシブデザインで作ろうと言うのが今回の目標になります。

続きは「MagpieRSSとMixItUpを使ってレスポンシブなアンテナサイトをつくってみた。その２」

ひとこと

Magpieとはカササギという鳥の名前らしい（サムネ画像）

参考リンク先で紹介されてるのと同じ本を2年前に購入しました、カラーで分かりやすくオススメです。
今でも苦手なSQLの項目はよく読み返します。