AI時代のECサイト運営体験: カラーミーショップとOpenAI GPTsでつくる、ショップ運営アシスタント

昨今、OpenAIのChatGPTをはじめとする、生成AIの発展が注目されています。 弊社の運営するECサイト構築サービス カラーミーショップ においても、生成AIの活用を進めています。 2023年には、カラーミーAIアシスタント(β)をリリースしました。

今回は、昨年提供を開始した生成AIに関連する機能とは少し違う、生成AIとカラーミーショップの使い方について説明します。 OpenAI GPTsとカラーミーショップAPIを組み合わせて作成できる、ショップ運営アシスタントの紹介です。¹

この記事に従えば、すぐに使えるショップ運営アシスタントを、開発者に限らず、誰でも作成できます。ただし、本稿で使用するOpenAI GPTsの利用には、OpenAI社の有料サービス ChatGPT Plusへの加入が必要です。アシスタントの作成/利用に必要なため、この点はご注意ください。

ショップ運営アシスタントの概要

まずは、完成したアシスタントを紹介します。次の動画をご覧ください。

ご覧の通り、カラーミーショップに登録された商品の確認や、操作などが行えます。 従来は決められた手順に従って管理画面から作業していた内容を、自然言語で指示するだけで、必要な操作をAIが判断し、行なってくれます。

ショップ運営アシスタントの構成

このショップ運営のアシスタントの構成を、簡単に紹介します。なお、本節は開発者に向けたものです。ショップ運営アシスタントを今すぐ作りたい方は、次節「ショップ運営アシスタントの作り方」へ進んでください。

このアシスタントは、利用するショップオーナーの他、カスタムGPTであるショップ運営AIアシスタントと、カラーミーショップAPIで構成されます。

カスタムGPT

2024年11月6日、OpenAIは、個別の用途にカスタマイズしたチャットインターフェースのアシスタントを作成できる、OpenAI GPTsを発表しました。 GPTsで作成されたアシスタントは「カスタムGPT」と呼ばれます。 GPTsでは、カスタムGPTの作成自体も、チャットインターフェース上で自然言語を用いて行えます。そのアシスタントの名前は何か、どのような用途に向けたものか、どのようにカスタマイズするかを指示して、作成できるようになっています。

Action

GPTsで作成するカスタムGPTには、外部のWeb APIとの連携を可能にする「Action」と呼ばれる機能が提供されています。 AIが必要に応じてWeb APIへリクエストを送信し、結果をAIが読み取ることができるようになります。

Actionは、カスタムGPTを作成する際に、Open API Specificationに従った仕様書や認可方法を指定することで利用できます。 どのようなWeb APIであるかは、Open API Specificationの仕様書から読み取られるので、プログラムを書く必要も、Web APIの使い方をAIに指南する必要もありません。

カラーミーショップAPI

カラーミーショップでは、ショップ運営に関わるさまざまな操作をWeb APIから行える、カラーミーショップAPIを提供しています。

これはいわゆるREST APIの形式で、ドキュメントや、Open API Specificationに従った仕様も公開されています。 認可はOAuth 2.0に従っており、カラーミーショップのアカウントを持つ人が、自身のアカウントでログインし、許可することで、APIを利用できます。

カラーミーショップAPIは、商品や在庫、受注、顧客、ショップクーポンなどに関する機能を提供していますが、今回は、商品情報の閲覧/編集機能、クーポンの閲覧機能を主に使うこととします。 Open API Specificationに従った仕様書が公開されていること、認可方式がOAuth 2.0であることから、そのままカスタムGPTのActionとして追加できます。

ショップ運営アシスタントの作り方

それでは、冒頭の動画で紹介したようなアシスタントを、実際に作ってみましょう。

必要なものは以下のとおりです。

• カラーミーショップのアカウント
• カラーミーショップの開発者アカウント²
• ChatGPT Plus(有料)を契約したOpenAIのアカウント

1. カラーミーショップ APIのクライアントID、クライアントシークレットを発行

まずは、カラーミーショップAPIを利用するための、クライアントID、クライアントシークレットを発行します。

COLORME Developerに、カラーミーショップの開発者アカウントでログインした後、「アプリを作成」から新たなプライベートアプリを作成します。

アプリ名とリダイレクトURIを入力します。リダイレクトURIは現時点で不明なため、仮の値で構いません。後ほどOpenAIから発行されるものに置き換えます。 入力したら「保存」を押下してください。

項目	入力する内容
アプリ名	ショップ運営アシスタント カスタムGPT
リダイレクトURI	urn:ietf:wg:oauth:2.0:oob

保存すると、作成されたアプリの設定画面へ遷移します。「クライアントID」と「クライアントシークレット」が表示されますので、これらをコピーしておきます。クライアントシークレットは秘匿情報ですから、他の人に知られることのないよう、取り扱いに注意してください。

また、このページではリダイレクトURIを変更できます。後ほど変更する際はここから行なってください。

2. カスタムGPTの作成

次に、ChatGPTのカスタムGPTを作成します。

まず、ログイン済みのChatGPTの画面を開きます。 次に、左側のメニュー内の「Explore」から、GPTsの一覧を開き、最も上の「Create a GPT」を選びます。

すると、カスタムGPTの作成画面へ遷移します。左側がカスタムGPTの作成を行なう画面、右側が作成されたカスタムGPTの動作を試す画面です。 作成するときも対話しながら進められることがカスタムGPTの特徴の一つですが、ここでは説明のために、左側の中でも「Configure」タブのみを使って、設定を進めます。

項目	入力する内容
Name	カラーミーショップ運営アシスタント
Description	カラーミーショップのショップ運営をサポートするアシスタント
Instruction	商品情報の閲覧、更新、在庫情報の更新、ショップクーポンの閲覧ができます。これらの操作を通して、カラーミーショップのショップ運営をサポートします。

3. Actionの登録

続いて、カスタムGPTがカラーミーショップAPIを実行できるよう、Actionを登録します。先ほどのConfigureタブの下の方にある「Create new action」を押下します。

出現した画面で、カラーミーショップAPIの実行に必要な情報を入力します。 まずはAuthenticationを設定します。⚙️を押下して、Authenticationの設定画面を開いてください。

Authenticationの設定として、次の内容を入力し「Save」を押下します。

項目	入力する内容
Authentication Type	OAuthを選択
Client ID	COLORME Developerから取得したクライアントID
Client Secret	COLORME Developerから取得したクライアントシークレット
Authorization URL	https://api.shop-pro.jp/oauth/authorize
Token URL	https://api.shop-pro.jp/oauth/token
Scope	read_products write_products read_shop_coupons
Token Exchanged Method	Default (POST request)を選択

次に、APIの仕様書を読み込みます。 カスタムGPTはWeb APIのフォーマットを記述する仕様であるOpen API Specificationに従った仕様書を読み込むことができます。 カラーミーショップAPIも、仕様書を公開しているので、これを読み込みます。

「Import from URL」を押下し、テキストエリアに次表の内容を入力して、「Import」を押します。 読み込むと、エラー In path /v1/sales/{sale_id}/cancel, method put, operationId cancelSale, description has length 434 exceeding limit of 300 が発生しますが、これは次の手順で解消します。

項目	入力する内容
Schemaが公開されたURL	https://api.shop-pro.jp/v1/spec/open_api.json

表示されているエラー In path /v1/sales/{sale_id}/cancel, method put, operationId cancelSale, description has length 434 exceeding limit of 300 は、含まれる説明文が、OpenAIの許容する長さよりも長すぎることで発生しているようです。今回使わない受注キャンセルに関連する説明であるため、適当に書き換えて回避することにします。 ブラウザのページ内検索(ChromeではCtrl+FもしくはCommand+F)で、cancel"と検索して、エラーが発生した箇所にカーソルを合わせ、当該の説明文を次表のとおり置き換えます。

変更前の内容

変更後の内容

"受注をキャンセルすると、以下のことが起こります。\n\n- 該当受注の商品購入数が0になる\n- 該当受注の合計金額が0になる\n- 該当受注の\`canceled\`が\`true\`になる\n- 該当受注に使用されたショップポイント・GMOポイントがキャンセルされる\n- 該当受注の決済がAmazon Pay、LINE Pay、または楽天ペイ（オンライン決済）である場合は、決済金額が自動的に購入者へ返金される\n- 該当受注の決済がPayPay（イプシロン）である場合には、イプシロン側の決済もキャンセルされる\n- ショップポイントがキャンセルされる\n\n販売手数料確定前の場合は以下のことが起こります。\n- 販売手数料が0になる\n- 付与したGMOポイントがキャンセルされる\n- 購入者が使用したGMOポイントがキャンセルされる\n\n現在、以下の機能はサポートしていません。\n- キャンセル連動設定を利用した、クレジット（イプシロン）決済のキャンセル\n- 分割された受注のキャンセル\n",

"受注をキャンセルします。",

4. コールバックURLの登録

これで、Actionの登録が終わりました。「Edit actions」の左側に表示された「＜」を押すと、GPTビルダーのConfigureタブに戻ることができます。

戻った画面を見ると、Actionに「api.shop-pro.jp」と表示されていることがわかります。

その下に「Callback URL」が表示されます。表示されたURLをコピーして、COLORME DeveloperのリダイレクトURIに設定してください。最初に入力した値 urn:ietf:wg:oauth:2.0:oob はダミーのもので実際には使いませんので、上書きしてしまって結構です。

最後に、画面右上で緑色の「Save」を押下し「Publish to」と表示されたら「Only me」を選び、「Confirm」を押して確定します。

これで、自分だけのショップ運営アシスタントを作ることができました。

5. 使ってみる

作成されたショップ運営アシスタントを実際に使ってみましょう。

右側のPreview画面の下にある「Message ショップ運営アシスタント」と表示されている箇所に、質問してみます。 すると、以下の画像の通り、カラーミーショップAPIとの通信が必要であれば、ログインを求められます。自身のカラーミーショップのアカウントへログインすることで、続行できます。

なお、カスタムGPTは、scopeで許可された権限の範囲内であらゆる操作を実行する可能性があります。都度、実行するAPIの内容を確認して「Allow」ボタンを押す他に、ボタンの押下を省略して実行する「Always allow for api.shop-pro.jp」という選択肢もありますが、自己の責任において、注意して利用してください。

ショップ運営アシスタントを使ってみると、あいまいな説明や、雑な問いかけに対しても、会話のラリーを続けることで、目的を果たせることがわかります。 冒頭の動画のように、例えば在庫数の変更や、商品の説明文の変更、おすすめ商品の変更など、カラーミーショップAPIの提供するさまざまな操作を、自由な入出力で実行できます。

おわりに

このように、カラーミーショップとOpenAI GPTsを組み合わせることで、チャットインターフェースをベースにした、AI時代のECサイト運営体験を試せるようになりました。生成AIを介して、利用者の望む形式の入力/出力を、システムが扱えるようになったことがわかるかと思います。

カラーミーショップは、昨年、多数の機能をリリースしました。その中には生成AIを活用したものも含まれています。これからも、ショップオーナーのために、優れたUIと機能を提供します。その手段として、生成AIの利用も加速していくものと考えています。