YQL(Yahoo Query Language)を使って何かしたいなと思い、
IKEA の商品在庫数が PC ページからだと見えなくて、スマホページからだと見えていたので、
YQL と javascript で商品在庫数を取得してみました。
それを元に react でガワを作って、now にあげたページはこちらになります。
YQL について
YQL の詳細はこちらの記事を参考にしました。
YQL Console が廃止になったので、こちらのページで試しながら YQL を組み立てました。
IKEA の商品在庫数のページ
IKEA では商品毎に商品 ID が振られ、商品ページが存在するのですが、
商品毎に商品在庫情報の XML ページが存在します。
そのページを今回は YQL で取得し、javascript で整形しました。
YQL のクエリはこんな感じ
select * from xml where url = 'http://www.ikea.com/jp/ja/iows/catalog/availability/30339293 '
実際に使うエンドポイントはこのようになります。
https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%20%3D%20'http%3A%2F%2Fwww.ikea.com%2Fjp%2Fja%2Fiows%2Fcatalog%2Favailability%2F30339293%20'&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys
YQL を使った javascript のコード
今回は、エラーハンドリングもなしで、データ取得できる前提で作っています。。。
また、在庫を見たいのが関東近辺の店舗だけだったので、
データ取得後関東近辺の店舗情報だけを取得しています。
import axios from 'axios';
export default async function getStockInfo(productNo) {
const API_URL = `https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%20%3D%20%27http%3A%2F%2Fwww.ikea.com%2Fjp%2Fja%2Fiows%2Fcatalog%2Favailability%2F${productNo}%27%20%20&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys`;
const storeMap = {
'448': '港北',
'447': 'Tokyo-Bay',
'887': '新三郷',
'359': '立川'
};
const results = await axios.get(API_URL);
const status = results.data.query.results['ikea-rest'].actionResponse.code;
const localStore =
results.data.query.results['ikea-rest'].availability.localStore;
const storeData = localStore.filter(function(value, index) {
for (let d in this) {
if (d === value.buCode) return value;
}
}, storeMap);
const stocks = storeData.map(dd => {
return {
storeName: storeMap[dd.buCode],
stock: dd.stock.availableStock
};
});
return { status, stocks };
}
YQL使ってみて
YQL知らなかった時は、GoogleAppsScriptでCORS回避するとかしていたのですが、
YQLの方が断然楽に作れるので、YQLもっと使っていきたいと思います。