今回で、iTunes内のランキングをサイドバーに表示する方法の最後の記事とします。
まず、問題点とは何か?それは、LinkShareのリンクを生成することでPHPプログラムの読み込みに時間がかかり、ページ全体の読み込み速度低下に繋がってしまっている事です。今日は、その解決策を紹介します!!
無料ランキングはLinkShare使わないコードを
無料のランキングはLinkShareのURLを生成しないバージョンを使うのが最適かと思います。LinkShareのURLを使わないコードは、下記の記事に追記しましたので、参照してください。
iTunes内のランキングをサイドバーに表示する方法(LinkShare対応だよ!) | MasterPeace21
LinkShareを使う方法の解決策
ちょっと、難しくなってくるかもしれませんが、jQueryのAjax(非同期通信)を用いる事で解決出来ます。
簡単に説明すると、ランキングの部分だけ裏でロードする仕組みです。ページ全体が読み込みが完了してから、ランキング部分を読み込んでいます。
この方法を使う場合は今までの方法は忘れてくださいw
まず、以下の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ソフトなどで自分のサーバーにアップロードします。
アップロードが完了したら、サイドバーのテキストウィジェットに以下の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の設定をしてください。
iTunes内のランキングをサイドバーに表示する方法(LinkShare対応だよ!) | MasterPeace21