Shopify ブログ

ネットショップ開設にチャレンジしてみませんか？

Shopifyアプリの開発方法

Shopifyに様々な独自機能を組み込めるShopifyアプリ。この記事はそんなShopifyアプリの開発に必要な基本情報と役に立つTIPSを日本の開発者向けにまとめたものです。初心者の方からすでに開発に着手されている方にまで必要な情報を簡単に幅広く網羅してあります。全ての情報は以下の公式サイト（英語）に記載されています。

開発の流れ

アプリ開発の基本的な流れは以下になります。

[パートナーアカウントの登録] > 

[開発ストアの追加] > 

[アプリの作成と資格情報の取得] > 

[開発ストアへのインストール] > 

[APIを使った処理の作成] > 

[Polarisを使ったUIの作成] >（埋め込みアプリにしたい場合）

[Webhookを使った処理の作成] >（通知をトリガーにした処理をする場合）

[テーマを使ったストアフロントの編集] >（ストアフロントに機能を追加する場合）

[テーマを使わない外部ストアフロントの構築] >（ストアフロントを外部サイトやモバイルアプリで構築したい場合）

[アプリストアへの申請]（アプリストアに公開したい場合）

パートナーアカウントの登録

 こちらから行います。

開発ストアの追加

 アカウント登録後ログインするパートナーダッシュボードに表示されるストアの追加ボタンから行います。

アプリの作成と資格情報の取得

パートナーダッシュボードのアプリメニューからアプリを作成し、APIを利用するために必要な資格情報（credentails）を取得します。
  • 詳細情報
  • Shopify App CLI （後述のパーミション取得やPolaris利用のコードを自動生成してくれるコマンドラインツール）

開発ストアへのインストール

資格情報を使ってAPIを呼び出すためのパーミションを取得するURLを生成し、開発ストアへインストールします

APIを使った処理の作成

取得したパーミションからOAuth2.0の仕様に従いアクセストークンを生成して、APIを呼び出します

APIには以下の３種類がありますが、アクセストークンの取得方法は同じです。

GraphQL Admin APIについては以下のアプリで動作確認が可能です。

APIはGraphQLが推奨となっています。

クッキーポリシーの問題や読み込みスピードの改善などのために、新しいセッショントークンを使った認証方法が追加されました。詳しくはこちらとチュートリアルをご覧ください。

GraphQLを使った一括処理はBulk operation APIsを使います。詳しくはチュートリアルをご覧ください。

こちらの記事も参考にしてください：

埋め込みアプリの読み込みをすばやく確実におこなう方法

GraphQLとAPIレート制限について

Polarisを使ったUIの作成

（埋め込みアプリにしたい場合）

マーチャント管理画面やPOSアプリに埋め込むUIを作成するには、PolarisというUIライブラリを使います。これによりShopifyと同様のデザインを持ちかつ、モバイルアプリにも対応したUIを作成できます。そしてShopifyの画面と作成したUIを連携するにはApp BridgeというSDKを使います。また、管理画面に独自のメニューを挿入するには、App extensionsにアプリのURLを設定します。App BridgeとApp extensionsを利用することでアプリのメイン画面以外にも、注文管理画面やPOSアプリのメニューといった拡張ポイントにアプリの機能を追加することができます。

サブスクリプション（定期購入）を実現するアプリの開発も可能になりました。詳しくはこちらとFAQをご覧ください。

こちらの記事も参考にしてください：

Shopify埋め込みアプリの三種の神器：Polaris、App Bridge、App extensionsを使いこなそう！

ShopifyサブスクリプションAPIについて：Shopifyチェックアウトと統合できるアプリの構築

Webhookを使った処理の作成

（通知をトリガーにした処理をする場合）

Webhookを使うことで通知に基づく処理を実装することができます（例：注文が来たら連携している在庫システムのAPIを呼び出すなど）。Webhookはマーチャントの設定画面から手動で登録も可能ですし、APIで自動登録することも可能です（APIで登録したWebhookは設定画面には表示されません。削除はAPI、または登録したアプリのアンインストールで行われます）。

Webhookは、決められた時間以内にShopify側でレスポンスが受信されないと再送されます。ですので重複して送信される可能性を想定し、かつ最初にレスポンスを返してからあとで非同期で処置を行うような設計が必要となります。詳細は上記のリンク先をご覧ください。

Amazon EventBridgeを使ったWebhookの実装も可能になりました。詳しくはこちらをご覧ください。

Webhookの配信ログがパートナーダッシュボードから参照可能になりました。詳しくはこちらをご覧ください。

こちらの記事も参考にしてください：

ShopifyアプリMechanicの開発者はEventBridgeでどのようにスケーリングしたのか

テーマを使ったストアフロントの編集

（ストアフロントに機能を追加する場合）

ストアフロント、すなわちオンラインストアのサイト側（購入者が利用する側）に機能を追加する場合（例：カートに独自項目を増やす、会員向けポイント機能を作るなど）は、テーマをカスタマイズする必要があります。またストアフロントからAPIによりデータを操作する場合は、前述のStorefront APIを利用します。テーマをショップのデータに基づいて動的に変更するにはLiquidというテンプレート言語を挿入する必要があります。

アプリのインストール時に自動的にテーマのカスタマイズを行うには、Online store APIsを使う必要がありますが、変更箇所が軽微な場合はヘルプに挿入手順を書くことで対応も可能です。

Shopifyのオンラインストアの特定のURLをアプリの描画に置き換えたい場合（例：チェックアウトの途中にアプリが提供する外部の画面を差し込みたい場合など）、サーバーサイドのAPIをテーマから呼び出したい場合などは、App proxiesという機能を使ってShopifyのオンラインストアのURLとアプリのサーバーのURLをマッピングすることができます。

注文完了ページに独自のスクリプトを挿入したい場合（コンバージョン計測のJavaScriptを実行したい、Liquidのデータを表示したいなど）は、追加スクリプトの設定を行うか、上記のScriptTag APIを呼び出すことで可能です。

テーマには動画や3Dモデルを差し込むこともできます。詳細は以下をご参照ください。

こちらの記事も参考にしてください：

Shopifyテーマカスタマイズの三種の神器：Cart attributes、Line Item Property、Customer noteを使いこなそう！

初めてのShopifyテーマセクション作成

    テーマを使わない外部ストアフロントの構築

    （ストアフロントを外部サイトやモバイルアプリで構築したい場合）

    いわゆるヘッドレスコマースに代表されるような、オンラインストアを外部のウェブサイトやモバイルアプリとして作成し、コマース機能だけShopifyから提供するアプリを作るには、前述のStorefront APIと外部向けのBuy SDKを利用します。

    アプリストアへの申請

    （アプリストアに公開したい場合）

    アプリには１つのマーチャントのみにインストール可能な非公開のCustom appsと、アプリストアに公開して任意のマーチャントに利用してもらうPublic appsがあります（検索対象から外して実質非公開のように運用する設定もできます）。多くのマーチャントのニーズに合う汎用的なアプリが開発できた場合は、アプリストアに申請を出してたくさんのマーチャントに使ってもらいましょう。アプリは無料でも有料でも公開できます（申請した後は審査が入ります）。

    こちらの記事も参考にしてください：

    Shopifyアプリ公開パーフェクトガイド：アプリエコシステムに上手に参加する方法

    チュートリアルと開発ツールの活用

    上記の開発の流れを体験できるチュートリアルがあります。細かい部分はわからなくても書かれた通りに実装していけば実際に動作するアプリを作ることができます。また、開発ツールのページには様々なサンプルコードやツールが紹介されていますのでぜひ目を通してください。

    アプリ開発の注意点

    アプリ開発にはいくつか注意点がありますので以下もご参照ください。

    アプリ開発のTIPS

      • テスト環境について
        • 前述のようにパートナーアカウントから開発ストアを作成すれば無期限でテスト環境を入手できます
      • Shopifyデータの拡張
        • Metafields というShopifyの様々なデータ（例：Customer、Product、Orderなど）に任意の項目をAPIで更新、参照できる機能があります。登録したデータはテーマからLiquidとして参照することもできるので、ストアフロントの機能開発にも役立ちます
      • アプリストアのアプリから技術を学ぶ
        • アプリのインストール画面（前述の[アプリの作成と資格情報の取得]に該当）には必要となるAPIや機能のパーミションが求められます。逆に言えば、この画面を詳しく見ることでどういった技術が使われているか確認できます
        • ストアフロント向けのアプリの場合、アプリがインストールされた後のテーマやページの変更や、ストアフロントの内部をブラウザの開発コンソールで確認することで、アプリがどういった処理をしているか推測することができます
      • 仕様を要望に合うように読み替える
        • 要望を直接満たす仕様がShopifyになかったとしても、既存の仕様をうまく読み替える（応用する）ことで解決することもあります。例えば、こちらの配送日時指定の追加方法は、エレメントのタイプやUIを変えることで他のカート拡張に応用できますし、こちらのクーポンコードのURL埋め込みは会員向けポイント機能の構築などに応用できます
      • 配送料計算や倉庫連携のアプリを作成する場合
        • ストアフロントのデザイン方法
          • Shopifyはテーマを一から作る上で、デザイン思考の５つのステップを取り入れることを推奨しています
          • テーマをデザインする際は、こちらに書かれているアクセシビリティへの対応をしてみましょう。テーマの理解を深めるためにも役立ちます。Shopifyのアクセシビリティへのポリシーはこちらを参照ください
          • モバイルファーストのデザインとテーマのパフォーマンスは重要なポイントです。こちらに書かれているShopifyのパフォーマンス改善の事例を参考にしてみてください
        • テーマを単独でテーマストアに公開する（※現在受付停止）
          • 自分で独自に作ったテーマは、アプリストアとは別にテーマストアに申請して公開することができます。詳しくはこちらを参照してください

        その他の参考資料

        Shopifyパートナープログラムでビジネスを成長させる
        マーケティング、カスタマイズ、またはWebデザインや開発など提供するサービスに関係なく、Shopifyパートナープログラムはあなたを成功へと導きます。プログラムの参加は無料で、収益分配の機会が得られ、ビジネスを成長させる豊富なツールにアクセスできます。情熱的なコマースコミュニティに今すぐ参加しましょう！

        今すぐ登録

        よくある質問

        Shopifyアプリを開発するにあたって、使用するプログラミング言語に制限はありますか？　

        いいえ、ありません。ただし、Shopifyの提供するAPIや仕組みに対応できるウェブアプリケーションを作ることができるプログラミング言語である必要があります。

        Shopifyアプリを開発するにあたって、必ずReactを使わないといけないのでしょうか？

        いいえ、Reactを使わなくても、代替のJavaScriptやCSSのライブラリが提供されています。ただし、Reactの利用が推奨されています。

        Shopifyアプリを開発するにあたって、必ずGraphQLを使わないといけないのでしょうか？

        いいえ、GraphQLを使わなくてもREST APIで開発することはできますが、推奨はGraphQLであり、新しい機能のほとんどはGraphQLでのみサポートされます。

        Shopifyアプリを開発するにあたって、サーバー環境は自分で用意する必要がありますか？

        はい、 Shopifyアプリの実体はShopifyの外部のウェブアプリケーションとなるため、アプリ開発者の方でそれをホスティングするサーバー環境を用意していただく必要があります。

        Shopifyのテーマは自分のPC上で開発できますか？

        はい、管理画面からテーマをダウンロードしてローカルのPC上で変更して再度ストアにアップロードして使うことができます。Shopify Theme Kitを使うと、よりスムーズにローカル環境での開発が可能です。
        トピック:
        Shopify開発者