iTunes内のランキングをサイドバーに表示する方法（ロードの問題点と解決法）

2013/02/28

Written by: EISUKE

Category: IT

NewImage

今回で、iTunes内のランキングをサイドバーに表示する方法の最後の記事とします。

まず、問題点とは何か？それは、LinkShareのリンクを生成することでPHPプログラムの読み込みに時間がかかり、ページ全体の読み込み速度低下に繋がってしまっている事です。今日は、その解決策を紹介します！！

無料ランキングはLinkShare使わないコードを

無料のランキングはLinkShareのURLを生成しないバージョンを使うのが最適かと思います。LinkShareのURLを使わないコードは、下記の記事に追記しましたので、参照してください。

LinkShareを使う方法の解決策

ちょっと、難しくなってくるかもしれませんが、jQueryのAjax(非同期通信)を用いる事で解決出来ます。

簡単に説明すると、ランキングの部分だけ裏でロードする仕組みです。ページ全体が読み込みが完了してから、ランキング部分を読み込んでいます。

この方法を使う場合は今までの方法は忘れてくださいｗ

まず、以下のPHPをファイルで保存します。まぁ名前はranking.phpでもしときましょう。

<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">
<title>rankign</title>
   <style type="text/css">
    <!--
.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-left: 15px;
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;
}
    -->
    </style>
<?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;
//LinkShareの設定甩パラメータ
$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;
//print "RequestURL:$request\r\n";
$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: 70px;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());
?>
</html>

保存したファイルをFTPソフトなどで自分のサーバーにアップロードします。

NewImage

アップロードが完了したら、サイドバーのテキストウィジェットに以下のJavaScriptを書きます。

<script>
$.ajax({
    url: "http://masterpeace21.com/ranking.php",
    success: function(data) {
    $("#AppRanking").append(data);
},
    error: function(data){
    $("#AppRanking").append("ランキングを取得できませんでした。");
}
});
</script>
<div id="AppRanking"></div>

コード内のURL部分は先ほどアップロードしたranking.phpのフルパスを指定してあげましょう！相対参照パスだと、上手く表示できないページが出てくる場合があります。

以上、終わりです。

後は、前回・前々回の記事を参考に自分の好きなランキングLinkShareの設定をしてください。