【App BUilder】Shopify 連携用のAPI をノーコードで作ってApp Builder で使う方法

杉本和也
リードエンジニア

App Builder でShopifyバックエンドAPI接続でお困りですか？CData API Serverでローコード開発、データ連携API構築を短時間実現。無償トライアルですぐにスタート。

App Builder はインフラジスティックス社が提供している「ドラッグアンドドロップで迅速なアプリケーション開発作成を可能にする」ローコードツールです。この記事では、CData API Server を使ってApp Builder から Shopify に接続してデータを取得する方法を説明します。

API Server の設定

以下のリンクからAPI Server の無償トライアルをスタートしたら、セキュアなShopify OData サービスを作成していきましょう。

Shopify への接続

App Builder からShopify のデータを操作するには、まずShopify への接続を作成・設定します。

API Server にログインして、「Connections」をクリック、さらに「接続を追加」をクリックします。
「接続を追加」をクリックして、データソースがAPI Server に事前にインストールされている場合は、一覧から「Shopify」を選択します。
事前にインストールされていない場合は、コネクタを追加していきます。コネクタ追加の手順は以下の記事にまとめてありますので、ご確認ください。
CData コネクタの追加方法はこちら >>
それでは、Shopify への接続設定を行っていきましょう！
それでは、Shopify への接続・認証について説明していきましょう。Shopify では、アクセストークンとOAuth の2つの接続方法をサポートしています。

アクセストークンによる接続

アクセストークン経由の接続には、以下の2つのステップが必要です。
1. Shopify の管理画面でアクセストークンを作成
2. アクセストークンを使用して認証
アクセストークンの作成

まず、アプリを登録してアクセストークンを取得してみましょう。手順は以下のとおりです。
1. 管理画面からShopify にログインし、Apps → Apps and sales channels に進みます
2. Develop apps をクリックしてCreate an app を選択します
3. Overview タブのConfiguration で、Admin API integration をクリックし、アプリに許可するストアのアクセス権を選択してください。CData製品が必要とするAdmin API 権限については、 href="/kb/help/" target="_blank">ヘルプドキュメントの「はじめに」セクションをご確認ください
4. Save をクリックします
5. Overview タブのConfiguration で、Storefront API integration をクリックし、アプリに許可するストアのアクセス権を選択します。CData製品が必要とするStorefront API 権限は以下のとおりです：
  - unauthenticated_read_content
6. Save をクリックします
7. API Credentials を選択します
8. "Access tokens" の下でInstall app をクリックします。これでアクセストークンが作成されます
9. Admin API Access token のアクセストークンをコピーします。注意：トークンの公開およびコピーは1回のみ可能ですので、必ず保存してください
アクセストークンによる認証

続いて、アクセストークンで認証するには、以下のプロパティを設定してください。
- AuthScheme：AccessToken に設定
- AccessToken：カスタムアプリからコピーしたアクセストークンの値に設定
OAuth 認証を介した接続については、ヘルプドキュメントの「OAuth 認証の使用」をご確認ください。
接続情報の入力が完了したら、「保存およびテスト」をクリックします。

それでは、Shopify への接続・認証について説明していきましょう。Shopify では、アクセストークンとOAuth の2つの接続方法をサポートしています。

アクセストークンによる接続

アクセストークン経由の接続には、以下の2つのステップが必要です。

Shopify の管理画面でアクセストークンを作成
アクセストークンを使用して認証

アクセストークンの作成

まず、アプリを登録してアクセストークンを取得してみましょう。手順は以下のとおりです。

管理画面からShopify にログインし、Apps → Apps and sales channels に進みます
Develop apps をクリックしてCreate an app を選択します
Overview タブのConfiguration で、Admin API integration をクリックし、アプリに許可するストアのアクセス権を選択してください。CData製品が必要とするAdmin API 権限については、 href="/kb/help/" target="_blank">ヘルプドキュメントの「はじめに」セクションをご確認ください
Save をクリックします
Overview タブのConfiguration で、Storefront API integration をクリックし、アプリに許可するストアのアクセス権を選択します。CData製品が必要とするStorefront API 権限は以下のとおりです：
- unauthenticated_read_content
Save をクリックします
API Credentials を選択します
"Access tokens" の下でInstall app をクリックします。これでアクセストークンが作成されます
Admin API Access token のアクセストークンをコピーします。注意：トークンの公開およびコピーは1回のみ可能ですので、必ず保存してください

アクセストークンによる認証

続いて、アクセストークンで認証するには、以下のプロパティを設定してください。

AuthScheme：AccessToken に設定
AccessToken：カスタムアプリからコピーしたアクセストークンの値に設定

OAuth 認証を介した接続については、ヘルプドキュメントの「OAuth 認証の使用」をご確認ください。

API Server のユーザー設定

次に、API Server 経由でShopify にアクセスするユーザーを作成します。「Users」ページでユーザーを追加・設定できます。やってみましょう。

「Users」ページで ユーザーを追加をクリックすると、「ユーザーを追加」ポップアップが開きます。
次に、「ロール」、「ユーザー名」、「権限」プロパティを設定し、「ユーザーを追加」をクリックします。
その後、ユーザーの認証トークンが生成されます。各ユーザーの認証トークンとその他の情報は「Users」ページで確認できます。

Shopify 用のAPI エンドポイントの作成

ユーザーを作成したら、Shopify のデータ用のAPI エンドポイントを作成していきます。

まず、「API」ページに移動し、「テーブルを追加」をクリックします。
アクセスしたい接続を選択し、次へをクリックします。
接続を選択した状態で、各テーブルを選択して確認をクリックすることでエンドポイントを作成します。

OData のエンドポイントを取得

以上でShopify への接続を設定してユーザーを作成し、API Server でShopify データのAPI を追加しました。これで、OData 形式のShopify データをREST API で利用できます。API Server の「API」ページから、API のエンドポイントを表示およびコピーできます。

オンプレミスDB やファイルからのAPI Server 使用（オプション）

オンプレミスRDB やExcel/CSV などのファイルのデータを使用する場合には、API Server のCloug Gateway / SSH ポートフォワーディングが便利です。是非、Cloud Gatway の設定方法記事を参考にしてください。

App Builder でプロジェクトを作成する

Web API の準備ができたら、App Builder で作業を進めていきます。

App Builder を立ち上げて「＋新しいアプリ」をクリックします。

テンプレートから任意のものを選択します。

これでアプリを作成するための下準備が整いました。

データソースの追加

前述の通りApp Builder ではREST API に接続したアプリを手軽に作成することができます。API 接続部分はあらかじめデータソースとして定義しておくことで、簡単にUI とバインドすることができるようになるので、まずはこのデータソースの準備を進めます。

画面左の「データ」タブに移動し新しく「REST API」を追加します。

「REST API データソースの設定」で任意の名称を入力し、ソースとして「OpenAPI」または「URL の追加」を選択します。今回はOpenAPI の手順で解説します。OpenAPI を使わない場合は「URL の追加」で手動で設定します。

ここでは先程CData Connect AI からダウンロードしておいたOpenAPI の定義を使用するので「定義のアップロード」をクリックします。

アップロードが完了したら「エンドポイントの設定」をクリックします。

「エンドポイントの設定」ではOpenAPI で定義されているエンドポイントの一覧の中から利用するものを選択し、App Builder で利用するデータソースとして定義します。今回はデータの一覧が取得できるGET エンドポイントを指定し、事前に作成したユーザーID・トークンを使って必要な認証情報を入力します。
「送信」をクリックして「200OK」を受け取ったら接続はOKです。