今日からShopify で販売を開始しよう

Shopifyを無料で試して、ビジネスの開始、運営、成長の為に必要なすべてのツールとサービスを体験しましょう。

ノートパソコンで小規模ビジネス向けローンの申し込みを行っている女性。

Shopifyアプリとテーマの開発方法

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

アプリ開発の流れ

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

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

[開発ストアの追加] > 

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

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

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

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

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

[テーマを使ったストアフロントの作成] >(ストアフロントに機能を追加する場合)

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

[チェックアウトの拡張] >(配送先指定から決済までの処理に機能を追加する場合)

[アプリストアへの申請] >(アプリストアにアプリを公開したい場合)

テーマ開発の流れ

テーマ開発の基本的な流れは以下になります。

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

[開発ストアの追加] >  

[テーマを使ったストアフロントの作成] >

[テーマストアへの申請] (テーマストアにテーマを公開したい場合)

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

 こちらから行います。

開発ストアの追加

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

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

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

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

資格情報を使ってAPIを呼び出すためのパーミションを取得するURLを生成し、開発ストアへインストールします(※実際にアプリストアに掲載された場合や、アプリ設定のテスト機能を使う場合は、アプリ設定のURLが呼ばれますので、その中で新規か再インストールかを判別して、このパーミション取得用のURLにリダイレクトさせる必要があります。再インストールかどうかの判定は、現在保存されているアクセストークンでストア属性を参照するAPIを呼び出して、トークンが有効化どうか確認するなどがあります)。

APIを使った処理の作成

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

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

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

APIはGraphQLが推奨となっています。GraphQLが初めてという方は、GraphQLの基本的な説明をご覧ください。

GraphQLのデータ検索の方法は、QueryRootを参照してください。細かい検索仕様も記載されています。

セッション管理はクッキーではなく、セッショントークンを使います。詳しくはチュートリアルをご覧ください。

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

配送関連のAPIを使うことで、配送の自動化倉庫連携アプリによる送料計算(注:マーチャントの条件あり)を実現できます。

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

GraphQLを始めよう

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

Shopify Fulfillment Orders API:フルフィルメント体験の向上

Polarisを使ったUIの作成

(埋め込みアプリにしたい場合)

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

サブスクリプション(定期購入)を実現するアプリの開発も可能です。詳しくはこちらをご覧ください。

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

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

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

Webhookを使った処理の作成

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

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

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

テーマを使ったストアフロントの作成

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

ストアフロント、すなわちオンラインストアのサイト側(購入者が利用する側)に機能を追加する場合(例:カートに独自項目を増やす、会員向けポイント機能を作るなど)は、テーマの開発をする必要があります。その際に、テーマの中身をストアのデータに基づいて動的に変更するにはLiquidというテンプレート言語を使います。そのようにして作られたテーマは管理画面からテーマエディタを使ってドラッグ&ドロップなどで視覚的にカスタマイズできます。

アプリからテーマに機能を追加したい場合(例:チャット提供やポイント付与など)は、Theme app extensionsを使います。詳しい仕様はこちら、実装方法はこちら(Shopify CLIが必要です)をご覧ください。

Shopifyのオンラインストアの特定のURLをアプリの描画に置き換えたい場合(例:テーマの画面遷移の中にアプリが提供する外部の画面を差し込むなど)、アプリのサーバーにテーマからアクセスしたい場合(例:サーバーを介してAdmin APIをテーマのJavaScriptから呼び出して結果を得たいなど)は、App proxiesという機能を使ってShopifyのオンラインストアのURLとアプリのサーバーのURLをマッピングすることができます。

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

Shopifyの様々なデータ(例:Product、Collection、Customer、Orderなど)に独自の項目を追加したい場合(例:顧客の誕生日や注文の配送日時など)は、Metafieldsを使ってAPIとShopify管理画面で実現することができます。MetafieldsはテーマからLiquidとして参照することができ、テーマエディタとも連動するので、テーマに高い柔軟性、拡張性を持たせることができます。

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

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

Shopify Theme Sectionを初めて作成するときのポイント

Online Store 2.0でApp Blockをレスポンシブにする方法

Shopify Theme Blocksの使い方

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

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

    以前はヘッドレスコマースと呼ばれていた、オンラインストアをShopify外部のウェブサイトやモバイルアプリとして作成し、コマース機能だけShopifyから提供する開発方法はカスタムストアフロントと呼ばれ、Storefront APISDK、コーディングの不要なチェックアウトリンクを利用して実現します。また、HydrogenというReactベースのフレームワークを使うことで、高い柔軟性を持った高機能なカスタムストフロントをホスティング環境付きで開発することができます。

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

    Shopify Storefront API:カスタムストアフロントを強化するアップデート

    Hydrogenによる構築:開発者プレビューが利用可能になりました

    Hydrogenを使用したストアフロントはなぜパフォーマンスが高いのか

    チェックアウトの拡張

    配送先指定から決済までの処理に機能を追加する場合)

    商品ページからカート画面まではテーマがUXを提供しますが、それ以降の配送先指定、配送方法(送料)選択、決済(購入完了)の画面はチェックアウトと呼ばれ、Shopifyが提供します(デザインの一部はテーマから変更可能)。このチェックアウトにアプリから機能を提供するにはCheckout app extensionsを使います。Checkout extensionsは、UI extensionsShopify Scriptで構成され、以下の拡張ポイントを持ちます。

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

    購入後チェックアウト拡張機能:ベータアクセスで利用可能に

    アプリストアへの申請

    (アプリストアにアプリを公開したい場合)

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

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

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

    テーマストアへの申請

    (テーマストアにテーマを公開したい場合)

    自分で独自に作ったテーマは、アプリストアとは別にテーマストアに公開申請して販売することができます。多くのマーチャントに価値を提供できるテーマが開発できた場合は、テーマストアに公開申請を出してたくさんのマーチャントに使ってもらいましょう(申請した後は審査が入ります)。

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

    Shopifyテーマレビューを効率的に進めるためのポイント

    Shopifyテーマストアで成功するために必要なこと

    サンプルコードや開発ツールの活用

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

    アプリとテーマの開発の注意点

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

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

    レート制限について

    ShopifyのAPIのバージョンと廃止について

    ShopifyテーマでSassが非推奨となります

    アプリとテーマの開発のTIPS

      • ベストプラクティスを読み込む
      • テスト環境について
        • 前述のようにパートナーアカウントから開発ストアを作成すれば無期限でテスト環境を入手できます
          • 仕様を要望に合うように読み替える
            • 要望を直接満たす仕様がShopifyになかったとしても、既存の仕様をうまく読み替える(応用する)ことで解決することもあります。例えば、こちらの配送日時指定の追加方法は、エレメントのタイプやUIを変えることで他のカート拡張に応用できますし、こちらのクーポンコードのURL埋め込みは会員向けポイント機能の構築などに応用できます

              その他の参考資料

              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 CLI for themesを使うと、ローカルPCでプレビューできたりと、よりスムーズにローカル環境での開発が可能です。
              トピック: