楽天APIを使って新着アイテムを表示する方法(JavaScript) 名古屋でホームページ制作ならCatworkWeb

楽天APIを使って新着アイテムを表示する方法(JavaScript)

こんにちは、エンジニアの岳田です。
今回は楽天APIを使って、サイト内に新着アイテムを表示する方法について書いていこうと思います。
APIをたたくプログラムはJavaScriptを使用しています。

そもそもAPIとは何か

APIとは「アプリケーション・プログラミング・インターフェース（Application Programming Interface）」の略称で、WEBサービスやWEBアプリにはそれぞれAPIが準備されており、そのAPIを使って一部の機能を利用したり、商品や情報を表示することが出来ます。

今回は楽天APIを使用して楽天の新着商品を表示しますが、GooglAPIを使ってGoogleログイン機能を利用したり、instagramAPIを利用してタグ検索で画像を表示させたりなど、各WEBサービスやアプリによって利用できる機能は変わりますが便利な機能がたくさんあります。

APIのたたき方

それぞれ利用しているサービスやアプリ、プログラムによって書き方は違ってくると思うので、ドキュメントなど見るといいと思います。
正直最初は意味わからなかったです（笑）
Youtubeなど見ていても初心者が躓きやすいポイントだと言われているエンジニアの方も多いので、あせらず理解していきましょう（私もそこまで理解深くないです）。
今回はJavascriptで楽天APIをたたいていきます。

実際に楽天APIをたたいてみる

楽天APIのアプリIDを取得する

アプリIDを取得するためには楽天会員のアカウントが必要になります（個人のものでも大丈夫です）。

楽天APIを使用するためには、まずRakuten Web Serviceのアカウントを作成してアプリIDというものを取得する必要があります。

Rakuten Web Serviceにアクセスする

Rakuten Web Service サイト

画面右上の「New App」をクリックする

楽天アカウントでログインします

項目に沿って入力します

アプリ名には、RakutenAPIを利用するアプリ名やウェブサイト名を入力します。
アプリURLにはアプリやウェブサイトのURLを入力します（今回は弊社のテストサーバーのURLを入力しました）。
入力が完了したら「規約に同意して作成する」をクリックします。

アプリIDを確認しましょう

上記でアプリIDの発行は完了です。
サイト右上の「Your App」から制作したアプリ情報が表示されます

Rakuten Web Service内でAPIの中身を確認します

アプリIDも出来たことだし、実際に楽天APIをたたいてみよう・・・の前に、動作確認をしてどんな感じのデータが取れるのかを確認するだけなら、Rakuten Web Serviceサイト内でお試し実行することが可能です。

API Test Formにアクセスします

API Test Form

APICategoryは、どの楽天サイトから取得するかの設定になります。今回は楽天市場からデータを取得するため、Rakuten ichibaを選択していますが、bookやtravelなど各楽天サイトよりデータ取得できるので試してみてください。

データはJson形式で取得するので、Response formatはJsonにしておきます。

検索したい条件に従ってパラメーターを入力します

今回は検索キーワードに「API」が含まれるものを取得します。
カスタムパラメーターで「hits」を設定すると取得数を設定できます。
今回は10件取得します（デフォルトは30件です）。
取得する内容が決まったら「GET」ボタンを押してみましょう。

実際にAPIをたたいた時に取得される内容を確認する

すべては表示されていませんが、上記が実際に楽天APIをたたいた時に取得できるJsonの中身になります。こちらを利用してサイトに表示させていきます。

まとめ

ちょっと長くなってしまったので、今回は一旦ここでやめて、次回実際にJavascriptでAPIをたたいてサイトに表示させる方法を書きたいと思います！
結構ここまででも面倒だと感じる人も多いと思いますが、一回やってしまえば慣れてきますので頑張りましょう！
では、また次回お会いしましょう(@^^)/~~~