Shopify アプリケーションとは何か、およびその作成方法

私たちが何をしているかについて開発者やエンジニアリング リーダーと話すときによく受ける質問の 1 つは、Shopify アプリケーションとは正確には何ですか? また、それを構築するにはどのようなツールと技術が必要ですか? もう 1 つのよくある質問は、Shopify アプリを作成した経験がなくても問題はありますか?

Shopify アプリケーション開発のさまざまな技術的側面について詳しく説明することで、これらの質問に答えましょう。

Shopify アプリとウェブアプリの比較

このトピックに関する私たちの見解は、Shopify アプリケーションは標準の Web アプリケーションとほとんど同じように機能しますが、API を介して Shopify プラットフォームと密接に接続されているということです。 これにはいくつかの意味があります。

• Shopify アプリを構築するには、ウェブアプリと同じテクノロジーを使用できます。 特定のテクノロジーに制限されることはありません (ただし、特定のテクノロジーを使用すると生活が楽になる場合があります。これについては後で説明します)。
• 通常、バックエンドとフロントエンドの両方を構築する必要があります。
• あなたは、アプリケーションのホスティングと操作を担当します。
• アプリケーションが Shopify によって承認されると、リリースプロセスも完全に管理されます。

‍

マーチャントの観点から言えば、Shopify は Software-as-a-Service (SaaS) であり、Shopify アプリでもあります。 これは、マーチャントがアプリケーションをインストールするために、どのような種類のコードも操作する必要がないことを意味します。

Shopify アプリケーション コンポーネント

通常、Shopify アプリケーションに含まれる 3 つの論理コンポーネントを特定します。

• マーチャント管理者
• Webhook 処理
• 顧客向けアプリケーション (ストアフロント UI)

これらの 3 つのうち、最後のものは必ずしも必要ではありません。 マーチャントに提供する機能によって異なります。 たとえば、Candy Rack アプリは 3 つのコンポーネントすべてで構成されていますが、Loyal は最初の 2 つの部分のみで構成されています。

マーチャント管理者

マーチャント管理者は、マーチャントがアプリケーションをセットアップおよび構成するダッシュボードです。 Shopify は、Shopify インターフェース (いわゆる組み込みアプリケーション) 内でマーチャント管理者にサービスを提供することをお勧めします。 これは、iframe を使用して Shopify 管理にアプリを埋め込むことを意味します。

組み込みアプリケーションにはいくつかの制限があります。

• 認証のしくみにより、多かれ少なかれ単一ページのアプリケーション アーキテクチャに制限されます (ただし、Turbolinks または Inertia.js の助けを借りて部分的な回避策が可能です)。
• Shopify が提供するライブラリがあるため、React をフロントエンドの記述に使用すると効率的かもしれません。Polaris UI ライブラリは、UX が Shopify 管理者の残りの部分と一致していることを確認し、App Bridge は、Shopify コンテキスト データをアプリケーションに提供するフロントエンド ブリッジとして機能します。 iframe で実行されます。

マーチャント管理者は、アプリとマーチャントの間の最初の接点でもあり、インストール プロセスが処理される場所でもあります。 インストールとは、基本的に、OAuth を介して加盟店のストア データにアクセスするためのアクセス許可を取得することを意味します。

また、アプリケーションが無料でない場合に課金を処理するアプリケーションの一部でもあります。

Webhook 処理

Webhook は、Shopify がインストールされているストアで発生するさまざまなイベント (新しい注文の作成や製品の更新など) についてアプリケーションに通知する方法です。 サブスクライブするイベントを決定します。

受信したイベントに基づいて実行する必要があるビジネス ロジックは、必ずバックグラウンド ワーカーで処理する必要があります。 そうしないと、アプリケーションが簡単に過負荷になる可能性があります。 アプリケーションの外部でイベント受信を委任することも検討できます。

‍

顧客向けアプリケーション (ストアフロント UI)

アプリケーションが Shopify Storefront を拡張する場合 (つまり、店舗の顧客に新しい機能を提供することを意味します)、それをフロント ストアに「挿入」する必要があります。 そのためには、API を介して Shopify に JavaScript リソースをフロント ストアに挿入するように指示する必要があります。 これには、スクリプト タグとアプリ埋め込みブロックの 2 つの最も一般的な方法があります。 アプリ ブロック (アプリ セクションとも呼ばれます) を使用して、一部のビジュアル コンポーネントでストアフロント テーマを直接拡張することもできます。

顧客向けアプリケーションの開発は、プロセス全体の中で最も難しい部分かもしれません。 通常、フロント ストアのデフォルトの動作を拡張またはオーバーライドします。 これを行うときは、さまざまな Shopify テーマで、さまざまなストア設定で、予期しない状況で何も壊れないように動作することを確認する必要があります。 これに加えて、アプリに干渉する他のサードパーティ アプリケーションが常に存在する可能性があります。

フロント ストアの UI は、アプリのパフォーマンスとサイズにも注意を払う必要があります。

Shopify アプリ開発の進化

Shopify アプリケーションの構築は、基本的に Web アプリケーションの開発であると前に説明しましたが、このステートメントは実際には部分的にしか当てはまりません。 2021 年、Shopify はチェックアウト拡張機能の概念を導入しました。 それ以前は、Shopify アプリでチェックアウトの機能を拡張することはできませんでした。 この点では、非常に限定された環境 (たとえば、事前に準備された React コンポーネントの特定のセットのみを使用できる) で発生するため、開発者のエクスペリエンスは Web アプリとは異なり、ビルドとリリースのプロセスは Shopify によって処理されます。

将来的には、Shopify が他の分野でこのアプローチに移行し、サードパーティのアプリケーションをより細かく制御できるようになる可能性があります。 その結果、Shopify アプリの開発は、Web アプリの開発からさらに離れていきます。

デジスムージー技術スタック

‍

この記事から、私たちが使用するテクノロジーについて詳しく知ることができます。

結論

技術的な観点からShopifyアプリケーションを構築することの意味と、使用できるテクノロジーを理解していただけたと思います.

最後に、最初に尋ねた質問に戻りましょう。 Web 開発のバックグラウンドを持つエンジニアが、Shopify アプリケーションで作業するチームに参加することは問題ですか? 絶対にないと思います。 エンジニアが最新の Web アプリケーション開発で使用される概念とテクノロジーを十分に理解している場合、エンジニアはすぐに飛び込むことができます。 Shopify のエコシステムと API に関する知識は、段階を追って身に付きます。