このページではソースコードの一部分を簡単な解説をしています。
作成したページはコチラから
ソースコードはgithubにあります
概要
Yahooショッピングの検索キーワードランキングと売上総合ランキングを同時に表示をし、検索されているキーワードと実際に売れている商品を比較できるようなページを作ってみました。ランキングの取得にはYahoo! JAPANが提供しているショッピング情報取得APIを利用しています。PHPでAPIからJSONファイルを取得し、javascriptを使って取得してきたJSONファイルをDOM操作で画面に表示させています。
PHPを使ってAPIからランキングを取得する
APIからJSONを取得をするクラスGetJsonを作りました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
/** * APIからJSONを取得するクラス * * @var string $url APIのエンドポイントurl * @var array $query リクエストパラメータを'パラメータ' => '値'の連想配列 */ class GetJson{ public string $url; public array $query; public function __construct(string $url, array $query) { $this->url = $url; $this->query = $query; } /** * APIからjsonを取得するメソッド * * @return string jsonファイル */ public function getJson(){ $query = $this->query; $url = $this->url; // クエリ文字列を生成してURLに追加 $url .= http_build_query($query); try { // jsonを取得 $response = file_get_contents($url); // jesonをエンコード $json = json_encode($response, true); return $json; } catch (Exception $e) { } } } |
二つの変数を用意してクラスGetJsonのインスタンスを作成します。一つ目の変数はAPIエンドポイントのURLです。もう一つの変数はリクエストパラメータを連想配列で作ります。リクエストするにあたって必須のリクエストパラメーターはappidになります。appidはコチラから取得できます。その他のパラメーターはコチラで確認できます。必要に応じて追加してください。
|
1 2 3 4 5 6 7 8 9 |
// APIエンドポイント $keywordUrl = 'https://shopping.yahooapis.jp/ShoppingWebService/V2/queryRanking?'; // リクエストパラメータ $keywordQuery = [ 'appid' => '', // <-- ここにあなたのアプリケーションIDを設定してください。 ]; $keyword = new GetJson($keywordUrl, $keywordQuery); // クラスGetJsonのインスタンスを作成 $keywordJson = $keyword->getJson(); // getJsonメソッドを実行してAPIからjsonを取得する |
JavaScriptで画面に表示する
javascriptでDOMを操作してHTMLを生成しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
// 検索キーワードランキングをhtmlにレンダリングする function showKeywordRanking() { const keywordRanking = JSON.parse(keywordJson).keyword_ranking.ranking_data; // PHPで取得したjsonをパースして変数に格納する const data = JSON.parse(keywordJson).keyword_ranking.meta.end_date; // 集計日を取得 document.querySelector(".data").textContent = `集計日：${data}`; const fragment = document.createDocumentFragment(); // 空のDocumentFragmentを作成する const template = document.getElementById("keywordTemplate"); // template要素を取得 // jsonファイルをfor文で回して必要な項目を取得する for (let i = 0; i < keywordRanking.length; i++) { const clone = template.content.cloneNode(true); // templateタグのコンテンツを取得し複製する let png; // 順位横の矢印の選択 switch (keywordRanking[i].vector) { case "up": png = "./img/up.png"; break; case "down": png = "./img/down.png"; break; case "stay": png = "./img/stay.png"; break; } // DOM操作でhtmlに反映させる clone.querySelector(".rank span").textContent = keywordRanking[i].rank; // 順位 clone.querySelector(".rank img").src = png; // 矢印 clone.querySelector(".keyword > a > p").textContent = // 検索キーワード keywordRanking[i].query; clone.querySelector(".keyword a").href = keywordRanking[i].url; // URL clone.querySelector(".pre_rank p").textContent = keywordRanking[i].pre_rank; // 前回順位 clone.querySelector(".score p").textContent = keywordRanking[i].score; // スコア fragment.appendChild(clone); // DocumentFragmentへ一時保管 } document.querySelector(".keywordTable").appendChild(fragment); // ループを抜けたらまとめてappendChildする } |
最後までお読みいただきありがとうございました。