【2024年版】Shopifyアプリ開発方法を初心者向けに丁寧に解説！

Shopifyでのアプリ開発は初めての方には難しく感じられるかもしれませんが、基本的なステップを理解することで誰でも始められます。この記事では、初心者の方でもわかりやすいように、Shopifyアプリ開発の基本的な手順をステップバイステップで解説します。必要なツールの設定から、基本的なアプリの作成、APIの利用、そして最終的にアプリをShopify App Storeに公開するまでの流れを詳しく紹介します。この記事を読むことで、Shopifyアプリ開発の基礎を理解し、自分自身のプロジェクトを始める自信を持つことができるようになるでしょう。

Shopifyの概要

Shopifyは、オンラインストアを簡単に作成・運営できるeコマースプラットフォームです。初心者から経験豊富な企業まで、あらゆるビジネスのニーズに応えることができるように設計されています。
主要な機能には、商品管理、顧客管理、注文処理、在庫管理、支払い処理、配送設定、SEO機能、マーケティングツールなどがあります。これらの機能を通じて、ユーザーはコードの知識がなくてもプロフェッショナルなオンラインストアを構築できます。
また、豊富なアプリやテーマを利用して、ビジネスに最適なカスタマイズが可能です。

Shopifyアプリの役割

Shopifyアプリは、基本機能に加えて特定のビジネスニーズに合わせて機能を拡張するための重要なツールです。例えば、在庫管理の効率化、カスタマーサポートの強化、マーケティングの自動化、特別なデザイン要件の実現など、多岐にわたるシーンで利用されます。
Shopifyアプリには、無料アプリ、有料アプリ、そして特定のビジネス要件に合わせて開発されるカスタムアプリの三種類があります。無料アプリは基本的な機能を提供し、有料アプリはより高度な機能やサポートを提供します。
カスタムアプリは特定のビジネスニーズに合わせて独自に開発されるため、完全にカスタマイズされたソリューションを提供します。

Shopifyアプリの開発環境を構築

Shopifyアプリを開発するためには、以下のツールをインストールする必要があります。

1. Node.js: Node.jsは、JavaScriptのランタイム環境で、Shopifyアプリの開発には欠かせません。Node.jsの公式サイト（https://nodejs.org/）からダウンロードしてインストールしてください。
2. Ruby: Shopify CLIを使用するためには、Ruby 3.x以上が必要です。以下の方法でインストールできます：
   • 公式サイトからダウンロード: https://www.ruby-lang.org/からダウンロードしてインストールしてください。
   • Macの場合（Homebrew使用）:brew install ruby
   • Windowsの場合（apt-get使用）:sudo apt-get install ruby
3. Shopify CLI: Shopify CLIは、Shopifyアプリの開発、デプロイ、管理を容易にするツールです。以下のコマンドを使用してインストールします：npm install -g @shopify/cli基本的なコマンドは以下の通りです：
   • shopify login: Shopifyにログインします。
   • npm init @shopify/app@latest: 新しいShopifyアプリを作成します。

Shopifyパートナーダッシュボードへの登録

Shopifyアプリを開発・販売するためには、Shopifyパートナープログラムに登録する必要があります。以下の手順で登録を行います：

1. Shopifyパートナープログラムに登録: https://partners.shopify.com/にアクセスし、アカウントを作成します。パートナープログラムに登録することで、開発者は新しいアプリの作成、テストストアの作成、収益の確認など、様々な機能を利用できます。
2. 新しいアプリの作成: パートナーダッシュボードにログイン後、「アプリ管理」セクションから新しいアプリを作成できます。ここではアプリの名前、APIキーの取得などを行います。また、新しいアプリの作成はCLIコマンドからも可能です。

ステップ1: 新しいアプリを作成する

Shopify CLIを使用して新しいShopifyアプリを作成できます

1. アプリを作成するディレクトリに移動します。アプリは新しいサブディレクトリに作成されます。
2. 新しいアプリを作成するには、次のコマンドを実行します。ターミナルコピー$shopify app init
3. プロンプトが表示されたら、アプリの名前を入力し、「Remix で開始」を選択してRemix テンプレートを使用します。ヒント拡張機能のみのアプリを作成する場合は、「最初の拡張機能を追加して開始する」を選択します。拡張機能のみのアプリの詳細については、こちらをご覧ください。その他のほとんどのケースでは、Remix テンプレートを使用することをお勧めします。ただし、他のテンプレートを使用することも、独自のテンプレートを用意することもできます。他のアプリ テンプレートの使用の詳細については、こちらをご覧ください。新しいアプリが作成され、Shopify アプリを構築するために必要なすべての依存関係とともに Shopify CLI がインストールされます。

ステップ2: ローカル開発サーバーを起動する

「ステップ 2: ローカル開発サーバーを起動する」というセクションへのアンカー リンク

アプリが作成されたら、ローカル開発サーバーとShopify CLIを使用して作業できます。

Shopify CLI はCloudflareを使用して、HTTPS URL を使用してアプリにアクセスできるようにするトンネルを作成します。

1. 新しく作成したアプリ ディレクトリに移動します。ターミナルコピー$cd my-new-app
2. 次のコマンドを実行して、アプリのローカル サーバーを起動します。ターミナルコピー$shopify app dev

Shopify CLI は次のタスクを実行します。

• パートナーアカウントにログインし、パートナー組織を選択する手順を説明します。
• パートナーダッシュボードでアプリを作成し、ローカルコードをアプリに接続します
• Prisma SQLiteデータベースを作成します
• ローカルマシンと開発ストアの間にトンネルを作成します

を実行したときに実行されるプロセスの詳細についてはdev、Shopify CLI コマンド リファレンスを参照してください。

ステップ3: 開発ストアにアプリをインストールする

開発ストアにアプリをインストールし、アプリのテストに使用できる製品を開発ストアに自動的に追加することができます。

1. サーバーが実行中の状態で、 を押すと、pアプリのプレビュー URL がブラウザで開きます。URL を開くと、開発ストアにアプリをインストールするように求められます。
2. 開発ストアにアプリをインストールするには、「アプリをインストール」をクリックします。これで、新しいアプリがインストールされた開発ストアが実行されるようになりました。
3. 新しいアプリのホームページから、「製品の生成」をクリックして、開発ストア用の製品を作成します。

アプリの主要ファイルとフォルダの説明

ShopifyのRemixテンプレートを使用したアプリの構造を理解するために、主要なファイルやフォルダの役割を説明します。テンプレートのソースコードはこちらで確認できます。

1. プロジェクトルート:
   • package.json: このファイルは、プロジェクトの依存関係やスクリプトを管理します。新しいパッケージをインストールする際にここに記載されます。
   • .env: 環境変数を定義するファイルです。このファイルには、APIキーやシークレットキーなどの機密情報が含まれます。
   • remix.config.js: Remixの設定ファイルで、ビルドやデプロイの設定を管理します。
   • tsconfig.json: TypeScriptの設定ファイルです。TypeScriptを使用する際のコンパイルオプションを定義します。
2. appフォルダ:
   • entry.server.jsx: サーバーサイドレンダリングのエントリーポイントです。サーバー側での初期レンダリングを担当します。
   • entry.client.jsx: クライアントサイドレンダリングのエントリーポイントです。ブラウザ上でのレンダリングを担当します。
   • root.jsx: アプリケーション全体のルートコンポーネントです。グローバルなレイアウトや共通の設定を管理します。
   • routes: Viewファイルを格納するディレクトリです。ファイル名がエンドポイントと一致するファイルベースルーティングを採用しています。
     • auth.$.jsx: 認証を管理するコンポーネントです。アプリのインストールやスコープの更新を管理します。
     • app._index.jsx : 埋め込みアプリ内で表示するコンポーネントです。Shopifyアプリとして認証された後にビューを表示します。
     • qrcodes.jsx: パブリックなコンポーネントです。Shopifyアプリの認証を経由せず表示させたいコンポーネントになります。
   • components: 再利用可能なUIコンポーネントが含まれています。アプリ内で複数回使用される小さなパーツを管理します。
   • styles: CSSファイルやスタイル設定が含まれています。アプリ全体のデザインやレイアウトを管理します。
3. publicフォルダ:
   • favicon.ico: アプリケーションのファビコンです。ブラウザタブに表示されるアイコンを設定します。

ShopifyのRemixテンプレートを使用したアプリの構造を理解することは、効率的に開発を進めるための基本です。主要なファイルやフォルダの役割を把握し、それぞれがどのように機能するかを理解することで、より効果的なアプリ開発が可能になります。 

Shopifyアプリをデプロイする

Shopify CLI を使用すると、開発中にローカル環境を使用してアプリを実行できます。ただし、Web アプリをデプロイして別の環境で機能をテストしたり、アプリを本番環境にデプロイして配布の準備をしたりすることもできます。

ステップ1: ホスティングを設定する

アプリをShopifyやアプリユーザーに提供するには、アプリをホストする必要があります。たとえば、App Bridgeを使用してShopify管理画面またはShopify POSにアプリを埋め込む場合、ShopifyがiframeまたはモバイルWebビューにアプリを表示できるように、アプリのページをホストする必要があります。

すべてのShopify アプリ テンプレートには、 Docker コンテナーに Web アプリをデプロイするための手順が記載されたDockerfileが含まれています。デプロイ プロセスを簡素化するには、Docker を使用したデプロイをサポートするホスティング プロバイダーを選択することをお勧めします。

お好みのサービスやプラットフォームを使用してアプリをホストできます。ここでは、例としてFly.ioを使用します。

Fly.ioでホスティングを設定する

Fly.io でアプリのホスティングを設定します。

1. Fly.io をインストールしflyctlてサインアップします。詳細な手順については、Fly.io のドキュメントを参照してください。
2. アプリディレクトリに移動します:ターミナルコピー$cd my-app
3. 次のコマンドを実行して、Fly.io で新しいアプリを作成し、fly.tomlファイルを作成します。ターミナルコピー$flyctl launch

ステップ2: 環境変数を取得する

Shopify CLI を使用して作成されたアプリは、設定に環境変数を使用します。ローカル開発中、Shopify CLI は環境変数を環境に直接提供します。ただし、アプリをデプロイするには、アプリのこれらの変数を取得して、後の手順で設定できるようにする必要があります。

1. アプリディレクトリに移動します:ターミナルコピー$cd my-app
2. 環境変数として設定する必要がある値を取得するには、好みのパッケージ マネージャーを使用して次のコマンドを実行します。
   $shopify app env show
3. SCOPES、SHOPIFY_API_KEYおよびSHOPIFY_API_SECRET の値をメモします。これらの値をホストされたアプリの環境変数として設定する必要があります。

ステップ3: 環境変数を設定する

ホストされたアプリを作成したら、環境変数を設定して構成する必要があります。取得した環境変数と、アプリおよびホスティング環境に固有の追加の変数を設定する必要があります。

すべてのアプリに次の環境変数を提供する必要があります。

変数	説明
PORT	アプリを実行するポート。Nodeアプリ テンプレートEXPOSEを使用して構築されたアプリの場合、この変数はの値と同じ値に設定する必要がありますDockerfile。デフォルト値は です8081。
SHOPIFY_APP_URL（またはHOSTRemix以外のアプリの場合）	アプリがデプロイされたときにアクセスされる完全修飾ドメイン名 (FQDN)。HTTPS を含める必要があります。
APP_ENV	アプリの環境。この変数は PHP アプリ専用であり、 に設定する必要がありますproduction。
SCOPES	Shopify CLI を使用して取得されたアプリのアクセス スコープ。
SHOPIFY_API_KEY	Shopify CLI を使用して取得されたアプリのクライアント ID 。
SHOPIFY_API_SECRET	Shopify CLI を使用して取得されたアプリのクライアント シークレット。この値は安全に保存する必要があります。

Fly.io を設定する

「Fly.io を構成する」というタイトルのセクションへのアンカー リンク

Fly.io アプリを構成して、アプリ コードを実行し、Shopify と通信します。

fly.tomlファイルを更新する

1. プロジェクト ルートから を開きますfly.toml。
2. セクションで[env]、次の形式を使用して環境変数を追加します。設定ファイルは次のようになります。

...
[env]
  PORT = "8081"
  SHOPIFY_APP_URL = "https://my-app.fly.dev"
  SHOPIFY_API_KEY = "<API_KEY>"
  SCOPES = "write_products"
...
[http_service]
  ...
  internal_port = 8081
  ...

シークレットキーを設定する

$flyctl secrets set SHOPIFY_API_SECRET=<API_SECRET>

ステップ4: アプリをデプロイする

アプリに環境変数を追加したら、ホスティング ソリューションのデプロイ プロセスに従ってアプリをデプロイできます。このプロセスを使用して、アプリに更新をプッシュすることもできます。

次のセクションでは、Fly.io のデプロイ プロセスの例を示します。

Fly.ioにデプロイ

次のコマンドを実行して、アプリを Fly.io にデプロイします。

$flyctl deploy --remote-only

ステップ5: パートナーダッシュボードでURLを更新する

アプリをデプロイした後、アプリをテストして使用できるように、アプリの設定で URL を更新する必要があります。ホストされているアプリを指すように、次の設定を更新する必要があります。

• アプリ URL : アプリのベース URL。この URL はHOST/SHOPIFY_APP_URL の 環境変数と一致する必要があります。
• 許可されたリダイレクト URL : アプリのコールバック URL。これは通常、アプリの URL と同じで、/auth/callbackが付加されます。

1. パートナーダッシュボードから、[アプリ]に移動します。
2. ホスティング プロバイダーにデプロイしたアプリを選択します。
3. [構成]ページの [URL] セクションで、[アプリ URL]と[許可されたリダイレクト URL] の設定を更新します。

以下は、Fly.io に設定できる URL の例です。

ホスティングプロバイダー	アプリURL	許可されたリダイレクト URL
フライアイオー	https://my-app.fly.dev	https://my-app.fly.dev/auth/callback(リミックス) https://my-app.fly.dev/api/auth/callback(非リミックス)

まとめ

Shopifyアプリ開発の基本的な手順を理解することは、成功への第一歩です。この記事を通じて、初心者の方でも自信を持ってアプリ開発を始められるようになることを目指しました。Shopifyの強力な機能を活用し、独自のアプリを開発して、ビジネスを次のレベルへと進化させましょう。
Shopifyアプリの開発は、最初は難しく感じるかもしれませんが、適切なツールとリソースを使用すれば、誰でもプロフェッショナルなアプリを作成できます。Node.jsやRubyのインストール、Shopify CLIの使用、パートナープログラムへの登録、そしてアプリの作成とデプロイなど、基本的なステップを踏むことで、効率的かつ効果的にアプリ開発を進めることができます。
また、ShopifyのRemixテンプレートを使用することで、開発環境を迅速に整え、効率的にプロジェクトを進めることができます。主要なファイルやフォルダの役割を理解することで、より深くアプリの構造を把握し、開発プロセスをスムーズに進めることができるでしょう。
最後に、アプリをデプロイする際の環境変数の設定やFly.ioなどのホスティングサービスの利用方法をマスターすることで、アプリを安全かつ確実に運用できます。これらの知識と技術を活用して、あなたのビジネスをさらに発展させてください。
この記事が、Shopifyアプリ開発の世界への第一歩として役立つことを願っています。引き続き、挑戦と学びを楽しんでください。そして、素晴らしいアプリを開発し、多くの人々に価値を提供しましょう。