3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

UnityとShopifyをサクッと連携させる

Last updated at Posted at 2021-05-25

TL;DR

この記事では以下のような人を対象に、Shopify・Unity連携用SDKであるShopify/unity-buy-sdkについて紹介します。

  • ShopifyでできたECサイトを持っている
  • UnityアプリにShopifyサイトの購買体験を組み込みたい

Shopify APIについて

Shopify APIで検索すると主にAdmin APIとStorefront APIについての記事をよく見かけます。これらは提供している目的とプラットフォームが少し違います。

Admin API Storefront API
目的 Shopifyサイトに独自機能を追加 他プラットフォームとの連携
プラットフォーム GraphQL、REST GraphQLのみ

Shopify/unity-buy-sdkで使うのは__Storefront API__の方なので、個人的に調べる際は注意してください。

また、GraphQL??という人については、ざっくりと「単一のエンドポイントにPOSTでクエリを投げてCRUDが実行できるAPIの形式」くらいの認識でいいと思います。(詳細については別途記事を執筆予定)

導入

1.Shopifyサイトでプライベートアプリを作成

(この手順はShopifyのテストサイトを使う場合不要です)
1-1. 自分のShopifyサイトにログイン
1-2. 管理画面から「アプリの管理」>「プライベートアプリを管理する」>「新しいプライベートアプリを作成する」
1-3. プライベートアプリ名や緊急連絡用開発者メールを入力後、ストアフロントAPIのチェックボックスを有効にして保存
1-4. アプリ作成後生成されるストアフロントアクセストークンをメモ(後ほど連携させる際に必要)

スクリーンショット 2021-05-25 8.00.11.png

参考)Shopify Storefront API - Getting started

2.UnityアプリにSDKをインポート

2-1.shopify-buy.unitypackageをダウンロード
2-2. Unityプロジェクトを開いて、ダウンロードしたunitypackageをインポート
2-3. サンプルシーンですぐに動作確認する場合は、Build SettingsでVending Machine Exampleシーンを追加することを忘れずに

参考)Github - Using the Shopify SDK for Unity

3.動作確認

Vending Machine Exampleを実行すると以下のような自販機のサンプルシーンが動きます。(デフォルトではShopifyのサンプルショップと連携した商品表示になっています)

29879870-52fb2574-8d74-11e7-83a7-7074289bdb6e.png
(Shopify SDK for Unity READMEより引用)

自分のShopify ECサイトと連携するにはShopPopup.csのStart()内にストアフロントアクセストークンとショップドメインを追記すれば商品一覧に自分のECサイトの商品が表示されます。

ShopPopup.cs
  private void Start()
  {
    string AccessToken = "b8d417759a62f7b342f3735dbe86b322"; // 1-4でメモしたストアフロントアクセストークン
    string ShopDomain = "sample.myshopify.com"; // 自分のShopify ECサイトドメイン

※注意点
Shopify APIはアップデートが頻繁に行われています。現在GitHubで公開されているのは2020-01です。バージョンでAPIのエンドポイントが変わってくるので、使用したいバージョンごとにエンドポイントを更新する必要があります。
更新するファイルはバージョンアップPRのファイル差分を参考に2020-01の箇所を該当バージョンに変えるといいでしょう。

応用

テンプレートをインポートした状態でできることは、商品一覧の取得、カートの作成、カート情報を引き継いでの決済(ブラウザ、Apple Pay)などです。その他の情報を取得したり、決済をアプリ内で完結させたい場合は他のAPIをコールする必要が出てきます。

そんな時のqueryやmutationの書き方はEXAMPLES.mdに書かれています。結構これは重要だと思います。

例えば以下のようなショップ情報を取得するクエリを実行するには

query {
  shop {
    name
    primaryDomain {
      url
      host
    }
  }
}

ShopifyBuy.Client().Query()を使って次のように書くことができます。以下のコードを3.動作確認でアクセストークンとショップドメインを記述した後に追記すれば、サンプルシーンを実行した時にショップ情報がデバッグログに出力されるはずです。

    ShopifyBuy.Init(accessToken, shopDomain);

    // The following builds a custom query.
    // This example uses named parameters but these could be omitted.
    ShopifyBuy.Client().Query(
        // Pass a lambda expression to 'buildQuery'
        // The lambda receives a QueryRootQuery instance.
        buildQuery: (query) => query
            .shop(shopQuery => shopQuery
                .name()
                .primaryDomain(primaryDomainQuery => primaryDomainQuery
                    .url()
                    .host()
                )
            ),
        callback: (result, error) => {
            // Results in a QueryRoot instance
            Debug.Log("Shop name: " + result.shop().name());
            Debug.Log("Shop url: " + result.shop().primaryDomain().url());
        }
    );

同様に、mutationの実行にはShopifyBuy.Client().Mutaiton()が用意されおり、詳しい書き方はこちらに書いています。

参考サイト

以上に書いた参考サイト以外にも役立ちそうなサイトです。

最後に

内容に誤りや補足があればコメントお願いします。

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?