iTunes内のランキングをサイドバーに表示する方法（LinkShare対応だよ！）

以前、AppStore、MacAppastoreにあるアプリのアイコンを取得するサイトをJavaScript(jQuery)を用いて作りました。

MacAppStoreとAppStoreにあるアプリのアイコンを取得するページ作ったお！ | MasterPeace21

そのあと、1ヶ月間ほど軽くPHPの勉強を始めたので、新たにAppStoreにあるアプリのランキングを取得するという方法を、こちらのサイトから勉強させていただきました。

PHP - WordPressでiPhoneアプリのランキングを表示させる方法（simpleXML） - | Learn iPhone, iOS, Objective-c, cocos2d and ….?

これに、応用を効かせてAppStoreのアフィリエイトを扱っているLinkShareのリンクを生成するプログラムに書き換えさせていただきました。

サンプル

まず、どんな感じなのかを紹介します。

まぁ、こんな感じなのをサイドバーに出力させようというモノです。上のリンクの方にプログラム自体の詳しい内容が書かれているので、プログラムを知りたい方は参考にしてください。僕もかなり勉強になりました。

簡単に、説明するとAppleがAppStoreなどのランキングをRSSで配信しています。そのランキングをPHPで取得し、htmlに書く変えているんです。はい。

実際に埋め込んでみよう。

まず、通常ではサイドバーのテキストウィジェットからPHPを埋め込むことはできません。なので、それを可能にするプラグインを導入したいと思います。

WordPress › PHP Code Widget « WordPress Plugins

プラグインページからもインストール可能です。

以下のコードを、さきほどのプラグインで追加されたPHP Codeのウィジェットに書きますす。

LinkShare対応版

<?php 
date_default_timezone_set('Asia/Tokyo');
$rssUrl = "https://itunes.apple.com/jp/rss/toppaidapplications/limit=5/xml";
$rss = file_get_contents($rssUrl);
$xml = simplexml_load_string($rss);
$rssresults = '';
$ranking = 0;
$api_url = "http://getdeeplink.linksynergy.com/createcustomlink.shtml";
$token = "ace5823ba061746afb60147efa2c0b333531ea5c86026dfe36191e61007f6ba9";
$mid_list = 13894;
define('URI_RSS', 'http://itunes.apple.com/rss');
echo '<div class="list-item"><div class="item-block">';
foreach($xml->entry as $val) {
$ranking++;
$request = $api_url . "?token=" . $token . "&mid=" . $mid_list . "&murl=" . $val->id;
$response = file_get_contents($request);
$rssresults .= '<div class="app-ranking"><div class="app-number"><span class="ranking">'.
$ranking.'</span></div><div class="app-info"><div class="inner-app"><div><a href="'.$response.'" title="'.
$val->title.'"><img src="'.
$val->children(URI_RSS)->image[2].'" alt="'.
$val->children(URI_RSS)->name.'"align="left" width="100"style="border-radius: 15px;width: 75px;box-shadow: 1px 2px 3px gray;margin-right:10px;"></a></div><a href="'.
$response.'"><div style="font-size:13px;font-weight:bold;padding:3px 0;">'.mb_strimwidth($val->children(URI_RSS)->name, 0, 50, "…", utf8).'</a></div><div style="font-size:9px;font-weight:bold;color:#3A3A3A;">Release : <a href='.
$val->children(URI_RSS)->artist->attributes()->href.'>'.
$val->children(URI_RSS)->artist.'</a></div><div class="app-price">価格 : '.
$val->children(URI_RSS)->price.
'</div></div></div></div>';
echo $rssresults;
$rssresults = '';
}
echo '</div></div>';
echo '更新日:'.date( "Y/m/d", time());
?>

LinkShare未対応版（こっちのが読み込みは早いです。）

<?php
date_default_timezone_set('Asia/Tokyo');
//echo 'Top 99 Free Game Apps';
$rssUrl = "https://itunes.apple.com/jp/rss/toppaidapplications/limit=5/genre=6002/xml";
$rss = file_get_contents($rssUrl);
$xml = simplexml_load_string($rss);
$rssresults = '';
$ranking = 0;
define('URI_RSS', 'http://itunes.apple.com/rss');
echo '<div class="list-item"><div class="item-block">';
foreach($xml->entry as $val) {
$ranking++;
$rssresults .= '<div class="app-ranking"><div class="app-number"><span class="ranking">'.
$ranking.'</span></div><div class="app-info"><div class="inner-app"><div><a href="'.$val->id.'" title="'.
$val->title.'"><img src="'.
$val->children(URI_RSS)->image[2].'" alt="'.
$val->children(URI_RSS)->name.'"align="left" width="100"style="border-radius: 15px;width: 75px;box-shadow: 1px 2px 3px gray;margin-right:10px;"></a></div><a href="'.
$val->id.'"><div style="font-size:13px;font-weight:bold;padding:3px 0;">'.mb_strimwidth($val->children(URI_RSS)->name, 0, 50, "…", utf8).'</a></div><div style="font-size:9px;font-weight:bold;color:#3A3A3A;">Release : <a href='.
$val->children(URI_RSS)->artist->attributes()->href.'>'.
$val->children(URI_RSS)->artist.'</a></div><div class="app-price">価格 : '.
$val->children(URI_RSS)->price.
'</div></div></div></div>';
echo $rssresults;
$rssresults = '';
}
echo '</div></div>';
echo '更新日:'.date( "Y/m/d", time());
?>

僕が使っているCSSです。上のリンクの方のCSSから300px相当に合うように書き換えています。

.list-item {
	width: 300px;
	margin-bottom: 30px;
	clear: both;
}
.item-block {
	margin-top: 6px;
	width: 300px;
}
.app-ranking {
	height: 90px;
	width: 300px;
	margin-bottom: 6px;
}
.app-number {
	background-color: skyblue;
	color: #FFFFFF;
	float: left;
	font-size: 15px;
	font-weight: bold;
	height: 30px;
	text-align: center;
	width: 30px;
	border-radius: 20px;
	z-index: 99999;
	opacity: 0.9;
	position: relative;
	left: 10px;
	bottom: 10px;
}
.ranking {
	color: #FFFFFF;
	display: block;
	margin-top: 6px;
}
.app-info {
	display: block;
	float: left;
	height: 60px;
	margin-top: 1px;
	text-align: left;
	width: 270px;
	z-index: -1;
}
.app-info .inner-app {
	float: left;
	height: 60px;
	margin-top: 3px;
	width: 260px;
}
.app-info img {
    border: 0px solid #CCCCCC;
    float: left;
    height: 75px;
    padding: 0px;
    width: 75px;
    display: block;
}
.app-price{
	font-size:10px;
	font-weight:bold;
}

はい、完成です。表示されましたか？？(^^ゞ

ちょっと、記事が長くなりそうなので、LinkShareへの対応の仕方・いろいろなカスタマイズ方法・使うにあたっての注意点、読み込み速度低下への対処法など以降のエントリーにしたいと思います。

iTunes内のランキングをサイドバーに表示する方法。（LinkShare設定編） | MasterPeace21

iTunes内のランキングをサイドバーに表示する方法（色んなランキング編） | MasterPeace21

10日でおぼえるPHP入門教室 第4版

山田 祥寛

翔泳社 2012-09-14

￥ 2,709

Amazon.co.jp で詳細を見る

• 
• ツイート
•