とにかく簡単にYahoo!ショッピングAPIを使ってHTMLページに商品検索結果を表示する

静的HTMLページに、Yahoo!ショッピングでの特定ストアからの検索結果を表示したい!という場合。
自社サイトからYahoo!ショッピングへ誘導する場合や、ブログパーツを制作する場合に使える方法です。
PHP等を使わず、HTMLとJavaScriptだけでページ内に挿入可能です。最速5分で出来ます。

まず「アプリケーションID」を取得する

Yahoo!ショッピングの商品検索APIを使用するためには、「Yahoo! JAPAN ID」と「アプリケーションID」を取得する必要があります。
Yahoo!デベロッパーネットワーク公式ヘルプ「アプリケーションIDを登録する」を参考に、アプリケーション情報の入力から登録を行います。

アプリケーションの種類は「テキスト解析APIや地図APIなど、公開情報を扱うWeb APIはどちらを選択しても利用できます。」とのことですのでどちらでも良さそうですが、筆者は「サーバーサイド」を選びました。

作成したアプリケーションIDは、アプリケーションの管理からも確認できます。

コードをHTMLに挿入する

上記のコードをHTMLに挿入します。

リクエストパラメータについて

「●●あなたのアプリケーションID●●」には先ほど取得したアプリケーションIDを記入します。

「●●検索したいストアのID●●」には、ストアIDを記入します。
例えば、ストアURLが「http://store.shopping.yahoo.co.jp/ikebe/」の場合、「ikebe」の部分がIDになります。
(たまたまサンプルとして出したストアにつき、特に深い意味はありません)
もしYahoo!ショッピング内の全ストアから検索したい場合は、この行を削除します。

「●●検索させたいキーワード●●」に、キーワードを入力します。
「UTF-8エンコードされた文字列をご利用ください。」とのことです。
検索キーワードが半角英数の場合は、何も気にすることなくそのまま入力できますが、検索したいキーワードが日本語文字列の場合はエンコードが必要です。
わからない場合は、「URLエンコード・デコードフォーム」などのツールを使って、UTF-8エンコードした文字列を入れておきます。

商品順序の並べ替えや絞り込みは、「リクエストパラメータ」を追加することにより可能です。
追加できるパラメータは、商品検索APIのリクエストパラメータ紹介より、参照可能です。

また、キャッチコピーやレビュー件数など、その他の情報も、上記ページの「レスポンスフィールド」に紹介されている記述を元に表示させることができます。

爆速JSONPについて

このスクリプトでは、JSONを簡単に扱うために、「爆速JSONP」を読み込んで使用しています。
テンプレートの表記は{{ mustache }}という形式を採用しているそうです。

mustacheは簡易的なIF判定はできますが、あまり複雑な判定はできません。
今回のサンプルHTMLでは、何かしらの商品情報が返ってきているかの確認のために、{{#ResultSet.0.Result.0.Name}}でリストタグを囲っています。
この商品検索APIのレスポンスを見るに、「Nameという項目がない=商品がない」として判定するのが一番早いと思ったからです。
(他にもっとスマートな方法はあるでしょうか?)

「#」を「^」に変更するとFalseの判定ができますので、

{{^ResultSet.0.Result.0.Name}}
該当する商品はありません
{{/ResultSet.0.Result.0.Name}}

このように囲むと、検索結果に商品が出てこなかった場合の対応も可能です。

HTMLを確認する

先ほどのコードを貼り付けたHTMLを開いて確認してみます。
何かしら、上記のような商品のリストが表示されていれば成功です!

あとは、CSSで見た目を整えていきましょう。

CSSのサンプル

CSSは本当に煮るなり焼くなりお好きなように、なのですが、敢えて取り急ぎ書くのであればこんな感じでしょうか。
liの%が合ってませんが。

そうすると、このように、横並びの商品一覧になります!

ひとりごと

Yahoo!ショッピングがアフィリエイト非対応になってから随分経つので、需要はないのではないかと思いつつ、将来自分がサクッとコピペしたい時のためにも記録しておきます。
PHP等の動的なシステムは使えず、かつ、リアルタイムで商品情報を取ってきたい時のために。

この記事にコメントする

メールアドレスは公開されません。コメントは管理者による承認後に公開されます。

関連記事

jQuery Validation Engineにフォームの必須入力チェックをさせたところ、なぜか、文字を入力しているのに「この項目は必須項目です」というエラーが発生しました。
つまり、フォームに入力しているのに、入力していないというエラーが出てしまったのです。
続きを読む

さくらのレンタルサーバでは、サーバコントロールパネルからCRON(CRONTAB)を最大5つまで設定できる。
このCRONを使用することで、指定した時間に自動的にウェブページを書き換えることができる。
実は、SSHでログインすれば、6つ以上のCRONを設定することも可能だ。
ここまで書けば情報としては十分な気もするけれど、一応、手順も書いておく。
続きを読む

YOURLSは、無料&オープンソースのPHP製URL短縮プログラム。
自分のサーバに設置することで「TinyURL」や「bitly」のような短縮URL生成サービスを公開できる。

続きを読む

2015年3月時点にて取得できるドメインの中から、バンド活動/音楽活動におすすめのドメイン名をピックアップ。

続きを読む