ECサイトを作るときの候補にあがるサービスがBASEやstoresなどだと思います。

スクラッチでシステムを組んで開設するとなると、最低数百万円の費用がかかってしまい、初期投資には大きな出費になってしまい負担が大きいです。ただBASEやstoresなどのサービスを使用すれば、ほぼ初期費用はかからず、ECサイトを作成することができるので、新しく事業を始めるこのようサービスを使って新しく事業をはじめるといいかもしれません。ただし、初期費用がかからない分、自分の思い通りのサイトにならない場合もあると思います。

BASEを使っていると、いろいろカスタマイズしたくなるとおもいますがでテンプレートの変更で出来ることは限られています。しかしBASEのAPIというサービスを使えば、プログラムを組める方であれば、ある程度カスタマイズは可能です。今回はECサイトでよくある売上を元に商品のランキング一覧をBASEのAPIを使って作って見ようと思います。

ただし、BASEのAPIは使用制限があるので、アクセス数が多いサイトだとすぐAPIに制限がかかってしまうので気をつけてください。

※今回は、BASEで公開しているサイト内に売上げランキングを表示するために、一度自前のサーバーでBASEのAPIを叩いて１日１回データを作成して、そのデータをBASEのサイトからJavascriptで参照することで表示しています。BASEで公開しているサイトにAPIを使って何か表示する場合は、BASE自体にアクセストークンやデータを保存できないので、別サーバーを必ず用意する必要があります。

実装に必要な知識

• HTML
• Javascript
• Jsonファイル
• PHP
• Auth0
• API

なお、ソースコードについては一部しか公開していないので、参考程度にみていただければと思います。

BASEのAPIで売上げランキングを作成する方法

１．BASEのAPIを使えるように申請する

まず、APIを使うためには、BASE Developersにランキングを表示したいBASEサイトのアカウントでログインして、申請が必要なります。

https://developers.thebase.in/

APIの使い方は、こちらの公式ドキュメントを参照してください。

ログインすると下のような画面が表示されますので、ヘッダーメニューにあるアプリケーション
をクリックします。

「アプリを作成する」のボタンを押します。

必須項目を入力していきます。入力に迷いそうなところは下記を参照してください。

• 「アプリ名」は適当な名前で問題ないです。今回なら「商品売上げランキング」等
• 「アプリの説明」は適当な名前で問題ないです。「売上ランキングを表示するためのアプリです」等
• 「アプリURL」はBASEのサイトのURLを記入します。
• 「コールバックURL」はAPIを実行するURLを記入します
• 「利用権限」は、今回はランキングの生成なので、「商品情報を見る」と「注文情報を見る」にチェックを入れます。

必須項目を入力した申請ボタンを押します。

申請が承認されるまでには２週間ほどかかりますので、気長に待ちましょう。申請が完了すると
申請時に入力したメールアドレスにメールが届きます。

２．APIからデータを取得する

たぶん、ここで挫折する人が多いかと思いますがBASEでのAPIの使用するにはAouth2.0という認証システムでアクセスします。
BASEのAPIは初回アクセス時に認証（BASEでのログイン情報）が必要になり、再度APIを使用するには
そのときに発行されるトークンを使い再度アクセスしないといけません。しかもそのトークンは有効期限があるので
一定時間立つと使用できなくなり、再度APIを使用するにはログイン認証が必要なります。

ちなみに、ログイン認証時に発行されるトークンは２種類あり、それぞれ有効期限が違います。
リフレッシュトークンは初回認証時とAPIを叩いたときにも新しく発行されます。

• アクセストークン　有効期限３時間
• リフレッシュトークン　有効期限３０日

なので、継続的にAPIを使用するには、リフレッシュトークンをどこかに保存しておいて、それを使って
再度APIでデータを取得します。

Aouth認証については、こちらのサイトが参考になると思います。

３．APIから注文情報を取得する

APIから注文情報を取得する方法ですが今回はPHPを使って取得します。
PHPからAPIでデータを取得する方法はこちらを参考させていただきました。

参考サイトの商品取得部分を改変して、注文情報を取得するように変更します。

注文情報を取得するにはBASE　APIの下記のドキュメントを参照してみてください。

注文情報APIドキュメント
https://docs.thebase.in/docs/api/orders/

上記サイトに取得できるjsonファイルのサンプルがあります。

４．取得したデータから販売個数のアイテムを多い順のデータを作る

注文情報からランキングを作る方法ですが、注文情報からはどの商品が何個買われたかはわからないので、
注文情報と注文詳細情報の２つのデータを取得する必要があります。

3で取得した注文情報のunique_keyから再度APIを叩いてunique_keyに紐付いている注文情報詳細を取得して、購入された商品と個数をPHP上で計算します。

注文情報詳細APIドキュメント
https://docs.thebase.in/docs/api/orders/detail

上記サイトに取得できるjsonファイルのサンプルがあります。

上記で取得した商品ごとの販売個数を多い順に商品を並び替え、各商品の画像やURL、値段も商品IDを元にAPIからデータを取得し、そのデータをJsonファイルに出力します。

５．４で作成したデータをBASEのサイトに表示させる。

４で作成したJSONファイルを読み込み、BASEのサイト上に表示させます。
サンプルのJsonファイルとJavascriptのソースを掲載しておきます。

ランキングデータjsonファイル

ランキング表示javascript

CSSスタイルの調整などは必要ですが以下のような一覧がつくれるようになります。

まとめ

BASEのAPIを使えば、ECサイトでよくある売上げランキング商品一覧もつくれるようになります。
ハードルは少し、高めですがプログラムの知識があれば、BASEでもがんばってカスタマイズは可能です。
アイディア次第で他の機能も実装できるかもしれません。ぜひチャレンジしてみてください。