ドキュメント

連携

カスタムアプリでのShopify接続

App StoreのアプリではなくShopify Dev Dashboardで作成した独自のカスタムアプリで、ShopifyストアをAmICitedに接続します。スコープ、Client IDとシークレット、制限事項を説明します。

ChatGPTで開く Claudeで開く

Shopifyは通常、Shopify App StoreのFlowHuntアプリで接続します(ECストアを参照)。ストアに公開アプリを入れたくない場合や、ストアのポリシーでApp Storeからのインストールが禁止されている場合は、Shopify Dev Dashboardで自分で作成したカスタムアプリで接続できます。

接続後のカスタムアプリは、App Storeからインストールした場合と同じように動作します。インポートの見積もり、注文と商品の過去データの取り込み、Eshopレポート、リンク構築、CMSのすべてが利用できます。

EC連携はProプラン以上で利用でき、接続できるのはワークスペースの管理者のみです。

始める前に#

  • ストア自身のShopify組織を使用します。 アプリはストアと同じShopify組織に属している必要があります。代理店が自社のアプリをクライアントのストアに使うことはできないため、アプリはクライアント側で作成する必要があります。
  • カード決済。 Shopify経由で請求されているワークスペースでは、カスタムアプリを使用できません。先にプランをカード決済に切り替えてください。
  • Shopifyの権限。 ストアのDev Dashboardでアプリを作成できる必要があります(ストアのオーナー、またはアプリ開発が許可されたスタッフアカウント)。

Shopifyでアプリを作成する#

  1. Shopify管理画面でApp developmentを開く

    Shopifyの管理画面で Settings、Apps、Develop apps の順にクリックし、Build apps in Dev Dashboard をクリックします。Shopify Dev Dashboard に直接アクセスし、ストアを所有するアカウントでログインすることもできます。

    左下のメニューにSettingsがあるShopify管理画面のホーム
    メニューにAppsがあるShopify管理画面のSettings
    Develop appsボタンがあるShopify管理画面のアプリ設定
    Build apps in Dev Dashboardボタンがあるアプリ開発ページ
  2. アプリを作成する

    Dev Dashboardで Apps を開き、Create app をクリックします。組織にすでにアプリがある場合は、右上の Create app をクリックし、Create app manually を選択します。

    Shopify Dev DashboardのAppsページ
    Dev DashboardのGet API credentialsの下にあるCreate appリンク
  3. アプリ情報とスコープを入力する

    • App name(1):わかりやすい名前を入力します。例:「AmICited」。
    • App URL(2):https://app.flowhunt.io/。Embed app in Shopify admin のチェックを外します。このアプリにはShopify内の独自画面がありません。
    • Allowed redirection URL(s):空欄のままにします。AmICitedはアプリのClient IDとClient secretでサインインするため、Shopifyからリダイレクトされることはありません。Use legacy install flow もチェックを外したままにします。
    • Scopes(3、API access の下):次のリストを貼り付けます。これはApp Storeのアプリが要求するスコープと同じなので、カスタムアプリでも60日より前の注文履歴を除くAmICitedのすべての機能が使えます(下記参照)。
    text
    read_orders,write_orders,read_products,write_products,read_customers,write_customers,read_inventory,write_inventory,read_locations,write_price_rules,read_content,write_content,read_themes,write_themes,read_locales

    Webhooks API version はそのままにします。

    App name、URL、Scopes、Webhooks API versionがあるDev DashboardのCreate an appフォーム

    貼り付ける代わりにチェックボックスで選びたい場合は、Scopes 欄の上にある Select from list をクリックし、上のリストの各スコープを検索して(1)チェックを入れ、Done をクリックします(2)。

    Scopes欄の上にあるSelect from listリンク
    検索欄とDoneボタンがあるSelect scopesダイアログ
  4. アプリを作成する

    名前、URL、スコープを入力したら、フォーム右上の Create app をクリックします(上のフォームのスクリーンショットの4)。Shopifyがアプリを作成し、最初のバージョンをリリースします。

    Create an appフォーム右上のCreate appボタン
  5. バージョンが有効になっていることを確認する

    アプリのメニューで Versions を開きます。最初のバージョンに Active と表示されています。後でスコープを変更した場合は、Create version をクリックして変更を反映させてください。

    最初のバージョンにActiveと表示されたDev DashboardのVersionsページ
  6. 配布方法をカスタムに設定する

    カスタムアプリは、自分のストアに限定しないとインストールできません。

    1. アプリの Overview で Distribution カード(Manage custom install link)をクリックします。ShopifyでPartners Dashboardが開きます。アカウントの選択を求められたら、ストアで使っているアカウントを選びます。
    2. Custom distribution(1)を選び、Select(2)をクリックします。配布方法は後から変更できません。
    3. Store domain にストアの your-store.myshopify.com アドレスを入力し(1、下のストアのアドレスを確認するを参照)、Generate link(2)をクリックします。Allow multi-store install for one Plus organization は、ストアが複数のストアを持つShopify Plus組織に属している場合にのみ関係します。
    Distributionカードが表示されたDev Dashboardのアプリ概要
    Partners Dashboard用のShopifyアカウント選択画面(ぼかし処理済み)
    Custom distributionとSelectボタンがあるDistributionページ
    Store domain欄とGenerate linkボタンがあるCustom distributionフォーム
  7. ストアにアプリをインストールする

    アプリはストアにインストールされるまで、何も読み取れません。

    1. Dev Dashboardでアプリの Overview を開き、Installs カード上部の Install app をクリックします。ダッシュボードによっては、下のスクリーンショットのようにこのボタンが Test app と表示されます。Apps 一覧でアプリの行にある ⋯ メニューを開き、Install app を選ぶこともできます。
    2. 接続するストアを選択します。
    3. アプリが要求するアクセス権を確認し、Install をクリックします。
    Installsの下にTest appボタンがあるDev Dashboardのアプリ概要
    アプリをインストールするストアを選ぶShopifyのストア選択画面
    InstallボタンがあるShopify管理画面のUpdate data access画面

    画面に「This app hasn’t been reviewed」という警告が表示されますが、問題ありません。App Storeのアプリではなく、自分のアプリだからです。

  8. Client IDとClient secretをコピーする

    Dev Dashboardでアプリの Settings を開きます。Credentials の下で、Client ID と Client secret をコピーします(各欄の横にあるコピーボタンを使います)。シークレットはパスワードと同様に扱ってください。

    Dev DashboardのメニューにあるアプリのSettings項目
    Client IDが表示されたCredentialsセクション(ぼかし処理済み)
    Client secretが表示されたCredentialsセクション

カスタムアプリでインポートされるのは直近60日分の注文です

Shopifyは、60日より前の注文を read_all_orders スコープを持つアプリにしか返しません。また、Dev Dashboardはカスタムアプリでこのスコープを拒否します(「Contains invalid scopes: read_all_orders」)。そのため、カスタムアプリでの接続では直近60日分の注文がインポートされ、Eshopレポートもそこから始まります。インポートの見積もりではより長い期間が表示されることがありますが、実際のインポートは60日で止まります。注文履歴をすべて取り込みたい場合は、代わりにApp Storeのアプリで接続してください。

AmICitedで接続する#

  1. ストアのアドレスを確認する

    Shopifyの管理画面で Settings を開きます。ストアのアドレス(your-store.myshopify.com)は、メニュー上部のストア名の下に表示されています。

    ストア名の下にmyshopify.comのアドレスが表示されたShopify管理画面のSettings(ぼかし処理済み)
  2. Shopifyのダイアログを開く

    Data Sources に移動し、Eshops の Connect Shopify Store をクリックしてから、Use a custom app instead をクリックします(下のスクリーンショットの1)。

  3. ストアと認証情報を入力する

    Store address、Client ID、Client secret を入力し(2)、Connect store をクリックします(3)。

    Use a custom app insteadと、Store address、Client ID、Client secretの入力欄があるShopifyダイアログ
  4. ドメインを選び、インポートを確定する

    App Storeからインストールした場合と同じように、ストアをドメインに紐づけ、インポートする注文履歴の期間を選びます。確定する前に、各オプションの予想行数と1回限りの費用が表示されます。

その後、他のストアと同じように顧客データとショップ設定を行います。

カスタムアプリの違い#

商品を編集してもすぐにリンクが再適用されないのはなぜですか?

カスタムアプリにはShopifyのWebhookが届きません。そのため、Shopifyで商品やページを編集しても、リンク構築はすぐにはリンクを再適用しません。リンクは次回ルールが実行されたときに再適用されます。

アプリが削除またはアンインストールされるとどうなりますか?

1日ほどで接続が停止し、ワークスペースに通知が届きます。再接続するには、同じダイアログを開いて Update credentials を選び、アプリの現在のClient IDとClient secretを入力します。

インポートが60日前までしか遡らないのはなぜですか?

それより古い注文にはShopifyの read_all_orders スコープが必要ですが、Dev Dashboardはカスタムアプリでこのスコープを受け付けません。そのため、カスタムアプリでの接続では直近60日分の注文がインポートされ、以降は新しい注文が引き続き取り込まれます。すべての履歴が必要な場合は、App Storeのアプリを使用してください。

代理店は1つのアプリをすべてのクライアントで使えますか?

いいえ。アプリはストアと同じShopify組織に属している必要があるため、クライアントごとに独自のアプリを作成します。

関連ページ#