カーセンサーAPI や BASE と連携して在庫を自動管理。手軽に運用できるECサイトへ
WSエンジニアリング様のサイトをリニューアルさせていただきました。
社長みずからサイトに掲載されている緑色の S2000 で スーパー耐久 のレースにドライバーとして参戦されているチューニングショップのサイトになります。
今回は 外部APIを利用した特製モジュールを2つ利用していますので、その点を紹介して行きます。
案件概要
| URL | https://wseg.jp/ |
|---|---|
| クライアント | WSエンジニアリング |
| 業種 | 中古車 |
| 仕様 | CMS実装、スマホ対応、外部サービスとの連携 |
| リリース | 2018/2 |
| 期間 | 4ヵ月 |
提案内容
リクルート カーセンサーAPI を利用した在庫車両の掲載
リクルートが運営している中古車販売のポータルサイト「カーセンサー」に掲載されている中古車の情報を表示させる API を利用します。店舗の在庫情報を利用して自社サイトに情報登録することなく、普段のカーセンサーWebサイトの更新をするだけで、自社サイトに在庫車両を掲載することが可能になります。
公開ページ
在庫車両の一覧ページ
通常のエントリーの一覧を表示させるようにカーセンサーAPIからの情報を一覧表示することが可能です。また、情報の検索画面も自動生成し実際の在庫であるメーカーや車種や年式について在庫の車両情報から生成しサブカラムに設置しています。
ページの下に「Powered by カーセンサー Webサービス【画像提供：カーセンサー】」と API を利用している際には、この画像をカーセンサーから利用していることを表記する必要があります。
在庫車両の詳細ページ
トピックパスについても HOME > 在庫車両 > ホンダ > S2000 > 2.0 のように生成し、それぞれの一覧ページも用意しています。このページにフォームを設置して簡単に問い合わせをすることもできますが、今回は問い合わせの一元管理をカーセンサーの管理ページ側で対応するために問い合わせについては（カーセンサーで在庫確認・見積依頼）というボタンで飛ばすようにしています。
次に、管理ページ側の設定がどのようになっているのかを紹介していきます。店舗の設定については、リクルート カーセンサーAPI を利用するための設定を以下のキャプチャ画像のように行います。
管理ページ
店舗情報登録
他のサーバーから JSONデータを取得してページを表示することになるので残念ながら表示が遅くなりますので、キャッシュ時間を長めに設定しておくことで自サーバーにデータがあるように処理が可能になります。
この API は店舗IDで検索ができず位置情報で車両を検索する仕様になっていますので、緯度経度と範囲を設定して店舗を絞り込んでいきます。範囲を広げると複数の店舗の一覧が表示されますが、できるだけ範囲を狭くして設定した方がいいでしょう。 APIのアクセス1回で100台までしか情報を取得できない仕様についても対応し同時に数回アクセスして大型の店舗であっても全件取得も可能にしています。
詳細ページ設定
表示側のモジュールの設定については、ループ部分の CSS の設定で PC やスマートフォンの時に何台を横に並べて表示できるのかを管理ページ側で指定できるようにし、ページャーの指定も通常のエントリーと同様にしています。
BASE API と連動した通販コンテンツの構築
「EC（ネット通販）もしたい！」と言われる事がよくあります。これまで ECサイトの運用をされていない方に弊社では、費用を抑え、手軽に始めることができることから BASE の利用をお勧めしていることから、今回は自社のWebサイトに BASE の商品を連動表示できる BASE API を活用した提案をしています。
公開ページ
BASEの商品を並べた一覧ページ
BASEの商品を並べた詳細ページ
一覧と詳細ページどちらも表示させることが可能になっており、（カートに入れる）と（商品の在庫確認）のボタンをクリックすると本来の BASE のサイトが表示されますが、それまでは自社のWebサイトで商品を紹介することができます。
会員には別の料金で販売したい、多言語対応したい、詳細ページに商品を紹介する動画を貼りたい、のように BASE 連携では実現できないような要望が出てきた次の段階で a-blog cms 内にしっかり作り込んでみたいと思っております。
最後に
上記のコンテンツを見せ方を変えてトップページにもレイアウトしていますので、実際のサイトでもご覧ください。 * WSエンジニアリング
