運営している食事系ブログでは、出汁素材や味噌、玄米、調理道具など、実際に自分が使っているものを記事の中で紹介しています。
そこで以前から面倒だと感じていたのが、商品リンクの管理でした。
楽天市場で商品を探してリンクを作り、記事に貼る。しばらくすると売り切れていたり、別の商品を探し直す必要が出てきたりします。
それなら、
「楽天市場の商品APIから、今販売されている商品を自動で取得して、食材ごとに探しやすくできないか？」
と考えました。
そこで作ったのが、WordPressで動く「食材選びサポーター」です。
出汁素材、味噌、玄米、精米機、肉、魚、野菜などを、カテゴリや条件を選びながら楽天市場から探せます。
開発には楽天市場商品検索APIとCodexを使用しました。
最初の商品表示までは驚くほど簡単でした。
ところが、実際の商品データを入れてみると、そこから次々に問題が出てきます。
今回は、完成したツールの紹介だけではなく、そこに至るまでの失敗や修正も含めて書いてみます。
この記事は「聞くだけで分かる」音声（17分06秒）も用意しています。作業しながらどうぞ。
【音声版】を再生する（ページの最後へ移動します）
なぜ「食材選びサポーター」を作ろうと思ったのか
食事系ブログでは、自分で試した食材や調理方法を中心に記事を書いています。
たとえば出汁なら、あご、昆布、かつお、煮干し、干しエビなど。
ご飯についても、玄米を購入して家庭用精米機で五分づきにする、といった実際の使い方を紹介しています。
記事を読んで、
「同じような食材を使ってみたい」
と思った人もいるでしょう。
これまでは、そのための商品を私が楽天市場で探し、リンクを記事に貼っていました。
ただ、この方法では、
- 楽天市場で商品を探す
- 商品リンクを作る
- 記事に貼る
- 売り切れたら確認する
- 必要なら別の商品を探す
という作業が発生します。
記事が増えれば、管理する商品リンクも増えていきます。
だったら特定の商品を固定して紹介するだけではなく、その時点で楽天市場にある商品を読者自身が探せるようにした方が便利ではないかと考えました。
ここで重要なのが、このツールの役割です。
名前は「食材選びサポーター」。
食事内容を診断したり、「これを食べれば健康になる」と判断したりするツールではありません。
また、最安値を探すためのものでもありません。
食材や調理道具を、カテゴリや条件から探しやすくする。
そこに役割を絞りました。
楽天市場商品検索APIを使うことにした
商品情報の取得には、楽天市場商品検索APIを使いました。
APIというと難しそうですが、今回の場合は、WordPressから楽天市場の商品データを検索するための窓口と考えれば分かりやすいと思います。
楽天Web Serviceでアプリケーションを登録し、
- Application ID
- Access Key
- Affiliate ID
などを設定しました。
構造としては、WordPressのPHP側から楽天APIへアクセスします。
Access Keyなどをブラウザ側へ直接出さないためです。
楽天Web Serviceでのアプリ登録や許可IPアドレスなどの初期設定は、少し面倒でした。
しかし、APIの準備が終わってしまえば、商品情報を取得すること自体は思っていたほど難しくありませんでした。
CodexにWordPressプラグインを作らせた
今回は、自分でPHPを一から書いていません。
作りたいものと必要な機能をまとめてCodexに渡し、WordPressプラグインとして作らせました。
最初に指定した主な機能は、
- 楽天APIの設定画面
- API接続テスト
- 商品検索
- 商品画像
- 商品名
- ショップ名
- 価格
- レビュー
- 送料情報
- 楽天アフィリエイトURL
- 商品カード
- キャッシュ
- ショートコード
- スマートフォン対応
などです。
完成物は、WordPressの管理画面からアップロードできるプラグインZIPにしました。
使用した環境は、WordPress、PHP、楽天市場商品検索API、楽天アフィリエイト、Codex、ConoHa WINGです。
13分待ったら本当に商品が表示された
最初のプラグインを作らせたとき、Codexは約13分間処理していました。
待っている側からすると、
「まだ作っているのか」
と思うくらいには長く感じます。
しかし、よく考えるとAPIの設定画面から商品カード、キャッシュ、ショートコードまで含んだWordPressプラグインを作っています。
一から自分で作る時間を考えれば、13分はかなり短い。
完成したZIPをWordPressへアップロードし、楽天APIの認証情報を設定してみました。
すると、本当に楽天市場の商品が表示されました。
商品画像が出る。
価格も出る。
レビューも出る。
楽天市場の商品ページにも移動できる。
ここでは、
「楽天APIの設定が少し面倒なだけで、商品を出すところまではこんなに簡単なのか」
と思いました。
ところが、本当の開発はここからでした。
簡単だったのはここまでだった
楽天APIから商品情報を取得すること自体は、すぐにできました。
問題は、実際の商品を表示してからです。
検索してみると、
- 関係ない商品が混ざる
- 特定の商品ばかり出てくる
- 条件によっては商品がほとんど出ない
- カテゴリの分け方が実際の用途に合わない
- 商品タイトルが非常に長い
といった問題が出てきました。
楽天市場の商品名には、多くの検索キーワードが含まれているものもあります。
そのため、こちらが指定した言葉が商品名に含まれていても、欲しかった商品とは少し違うことがあります。
逆に条件を細かく指定すると、今度は検索結果が極端に減ります。
つまり難しかったのは、
「APIから商品を取ること」ではなく、「何を探せるようにするか」
でした。
ここからはコードそのものより、カテゴリの分け方や検索条件を考える作業が中心になっていきます。
出汁・玄米・精米機を実際の使い方に合わせて修正
最初、出汁は「出汁」という大きなカテゴリにしていました。
ところが実際に検索すると、素材だけではなく、だしパックや顆粒調味料なども混ざります。
私が普段やっているのは、素材から出汁を取る方法です。
そこで、
- あご
- 昆布
- かつお
- 煮干し
- 干しエビ
- 貝系
と、素材別に探せるように変更しました。
ツール側の分類を、実際の使い方に合わせた形です。
業務用の購入先は別枠にした
私が使っている出汁素材の一部は、「ネット商社ドットコム」で購入しています。
こちらは楽天アフィリエイトではありません。
それでも、私と同じ素材を使いたい人もいるかもしれないため、出汁カテゴリでは別枠で案内することにしました。
ただし、業務用寄りの商品なので最低購入量が1kgからとなります。
ここで注意したいのが、乾物の1kgは思っているよりもかなり巨大だということです。
肉や米の1kgとは感覚が違います。干しエビや煮干しなどは軽いぶん、1kgになるとかなりの量になります。
大きな冷凍庫がある人、別に冷凍庫を持っている人、頻繁に出汁を取る人などには選択肢になりますが、一般家庭で少量だけ欲しい場合には向きません。
その場合は、楽天市場から必要な量の商品を探す方が現実的です。
五分づき米は「商品を探す」発想をやめた
玄米まわりでも、一度考え方を変えています。
当初は「五分づき米」を直接検索できるようにしようと考えていました。
しかし、五分づき米そのものが一般商品として大量に流通しているわけではありません。
私自身も、
玄米を買う → 家庭用精米機で精米する → 五分づきにする
という方法です。
それなら、五分づき米そのものを無理に探すより、
玄米と家庭用精米機を探せる方が実際の使い方に合っています。
そこで「玄米」と「精米機」をそれぞれ探せる構成に変更しました。
精米機は「精米方式」で探せるようにした
家庭用精米機については、
- かくはん式
- 対流式
- 圧力式（圧力循環式）
といった精米方式から探せるようにしました。
3分づき、5分づき、7分づき、白米、無洗米などは、多くの家庭用精米機に備わっている基本的な機能です。
そこで、この部分を大きな検索条件にするのではなく、精米方式を選べるようにしています。
普通に家庭で使うなら、かくはん式でも十分だと私は考えています。
一方で方式にこだわって選びたい人なら、対流式や圧力式も探せます。
肉・魚・野菜まで追加
最初に用意していたのは、
出汁素材、味噌、玄米、精米機。
この4カテゴリーでした。
機能としては成立していたのですが、実際の画面を見ると少し寂しい。
「食材選びサポーター」という名前なら、普段の料理で使うものも探せた方が使いやすそうです。
そこで、肉、魚、野菜を追加しました。
肉は、
- 牛肉
- 豚肉
- 鶏肉
魚は、
- 骨取り
- 切り身
- 干物
- 缶詰
野菜は、
- 葉物
- 根菜
- 果菜
- きのこ
- セット
という形で選べます。
これで、調味料や主食だけではなく、日常的に使う食材まで探せるようになりました。
ところが野菜を追加したことで、また別の問題が出てきます。
無農薬に絞ったら商品が1件になった
最初、野菜カテゴリは「無農薬野菜」にしていました。
少しこだわった食材を探せる方がいいと思ったからです。
ところが実際に楽天APIで検索してみると、条件が狭すぎました。
根菜を選択してみると、
商品が1件。
これでは、商品を探すためのツールとして選択肢が少なすぎます。
ここで「無農薬野菜」というカテゴリそのものを見直しました。
トップカテゴリは単純に、
「野菜」
へ変更。
まずは一般的な野菜を広く探せるようにしました。
最初から頭の中だけで仕様を決めていたら、そのまま「無農薬野菜」で完成させていたかもしれません。
実際の商品データを表示したからこそ気付けた問題です。
有機・農薬不使用は任意条件に変更
無農薬系の商品を探す機能そのものをなくしたわけではありません。
代わりに、野菜カテゴリの中へ「こだわり条件」を追加しました。
選べるのは、
- 指定なし
- 有機
- 農薬不使用
の3種類です。
通常は「指定なし」で広く商品を探す。
こだわりたい人だけ「有機」や「農薬不使用」を選ぶ。
この形なら、普段使いでは商品数を確保しつつ、条件を付けて探したい場合にも対応できます。
検索条件は細かければ細かいほど便利、というわけではない。
今回、実際の商品データを扱って分かったことの一つです。
記事内からショートコードで呼び出せる
「食材選びサポーター」は専用ページだけでなく、ブログ記事の途中にも表示できるようにしました。
WordPressのショートコードを使います。
たとえば、
[food_supporter category="dashi"]
なら出汁素材。
[food_supporter category="miso"]
なら味噌。
そのほか、
[food_supporter category="brown_rice"]
[food_supporter category="rice_polisher"]
[food_supporter category="meat"]
[food_supporter category="fish"]
[food_supporter category="vegetables"]
と、記事の内容に合わせて呼び出せます。
これなら、出汁の記事を読んでいる人には出汁素材、玄米の記事なら玄米、精米の記事なら家庭用精米機と、その場で関連商品を探してもらえます。
記事を読んだあとに楽天市場を開いて、一から検索し直す手間を少し減らせます。
楽天アフィリエイトリンクも自動で付く
楽天Web Serviceには自分のAffiliate IDを設定しています。
商品ボタンには楽天APIから返される affiliateUrl を使うため、表示された商品から楽天市場へ移動した場合も、楽天アフィリエイトのリンクとして機能します。
ただ、今回これを作った目的は「自動収益化」ではありません。
私にとって大きいのは、記事を書くたびに商品リンクを探して作り、売り切れたら別の商品へ貼り替える、といった作業を減らせることです。
読者側も、私があらかじめ選んだ一つの商品を見るだけではなく、その時点で販売されている候補から探せます。
また、アクセスのたびに楽天APIを呼び出す必要はないため、取得した商品情報はWordPress側で一定時間キャッシュするようにしました。
APIへの不要なリクエストを減らし、表示を安定させるためです。
必要な場合は、管理画面からキャッシュを削除できます。
Codexを使って分かった「最初は簡単、作り込むと少し面倒」
今回の感想を一言でまとめると、
「最初は簡単。作り込むと少し面倒。」
でした。
楽天APIにつないで商品を表示するところまでは、思っていた以上に簡単です。
難しかったのは、
- どんなカテゴリにするか
- どんなキーワードで探すか
- 条件をどこまで絞るか
- 出てきた商品が自然か
- 読者が実際に探しやすいか
を決めることでした。
開発中は、
実際の画面を見る → 違和感を見つける → 仕様を考え直す → Codexへ修正を指示する → ZIPを作り直す → WordPressへ上書きする → また確認する
という作業を繰り返しました。
今回、人間側で一番重要だったのはコードを書くことではありません。
「無農薬野菜で検索したら1件しか出ない。これでは使いにくい」
「五分づき米を探すより、玄米と精米機を探せた方が実際の使い方に合っている」
といった違和感を見つけて、次の仕様を決めることでした。
AIに一発で完成品を作らせるというより、AIに作らせたものを人間が実際に使い、またAIに直させる。
今回は、この往復がかなり有効でした。
まとめ
楽天APIから商品を表示するところまでは、Codexを使うことで想像以上に短時間で作れました。
一方、実際の商品を扱い始めると、カテゴリや検索条件は何度も修正することになりました。
「最初は簡単。作り込むと少し面倒。」
それでも、修正してすぐ実物を確認できるので、試行錯誤そのものはかなり楽になりました。
今回作った「食材選びサポーター」は、これから実際の記事内でも使いながら、必要に応じて手を加えていく予定です。
▶ 出汁・味噌・玄米・肉・魚・野菜を探せる「食材選びサポーター」を使ってみる
