楽天API

JAVASCRIPT
2023.03.26

楽天市場で独自の商品コードを商品名や説明欄に記載している場合に、そのコードで楽天APIで商品情報を取得する。テキストエリアに、１コードごとに改行されたデータを入力することで、まとめて取得する。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>fetch async test</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<style>
h1 {font-size: 1.2em;}
    .fs-small {font-size: .75em;}
</style>
<body>

<h1>RAKUTEN API - fetch &amp; localstorage -</h1>
<div><textarea id="inputData"></textarea></div>
<div><button id="code2url" type="button">BUTTON</button></div>
<div id="count" style="
    width: 0;
    height: 0;
    border-bottom-style: solid;
    border-bottom-width: 8px;
    border-bottom-color: #26ff94;
transition: all .3s linear;
"></div>
<div id="output" class="fs-small">no result</div>


<script>
    //const sleep = msec => new Promise(resolve => setTimeout(resolve, msec));

    const result = [];

    let html = '';
    let save = localStorage.getItem('save');
    if(save){
        save = JSON.parse(save);
        //console.log(save.length);
        for(let i in save){
            //console.log(save[i]);
            html += '<hr>';
            html += save[i].ir + ':<br>';
            html += save[i].name + ':<br>';
            html += save[i].img + ':<br>';
            html += save[i].price + ':<br>';
            //html += save[i].caption + ':<br>';
            html += '<a href="' + save[i].url + '" target="_blank">' + save[i].url + '</a><br>';
        }
        $('#output').html(html);
        localStorage.clear();
    }

    $('#code2url').on('click', function(){
        let inputD = $('#inputData').val()
        inputD = inputD.split('\n');
        inputD = inputD.filter(Boolean);
        //console.log(inputD);
        loopFetch(inputD);
    });

    async function getRakData(argument){
        const sCode = '[楽天のショップコード]';
        const appId = '[楽天APIのID]';

        const arg = argument;
        const irc = arg.irc;
        const index = arg.index;
        const num = arg.num;

        const params = {
            format : 'json',
            formatVersion : '2',
            field : '1',
            availability : '1',
            shopCode : sCode,
            applicationId : appId,
            keyword : irc
        };
        const queryParams = new URLSearchParams(params);
        const url = 'https://app.rakuten.co.jp/services/api/IchibaItem/Search/20220601?';
        const endpoint = url + queryParams;

        const obj= {};
        const response = await fetch(endpoint);
        const respOk = await response.ok;
        if(respOk){
            let json = await response.json();
            obj.ir = await irc;
            obj.url = await json.Items[0].itemUrl;
            obj.name = await json.Items[0].itemName;
            obj.img = await json.Items[0].mediumImageUrls[0];
            obj.price = await json.Items[0].itemPrice;
            obj.caption = await json.Items[0].itemCaption;
            await result.push(obj);
            if(result.length == num){
                let _save = await JSON.stringify(result);
                await localStorage.setItem('save', _save);
                await location.reload();
            }
        }else{
            console.log(respOk);
        }
    };

    function loopFetch(DATA){
        for(let i=0; i<DATA.length; i++){
            (function(i){
                setTimeout(function(){
                    let per = (i+1)/DATA.length*100;
                    $('#count').css({'width':per+'%'});
                    let arg = {
                        irc : DATA[i],
                        index : i,
                        num : DATA.length
                    }
                    getRakData(arg);
                }, i*1000);
            })(i);
        }
    }


</script>
</body>
</html>
Copied title and URL