Shopifyアプリケーションとは一体何なのか、Shopifyアプリケーションを構築するためにはどのようなツールや技術が必要なのか。 また、Shopifyアプリケーションの構築経験がなくても問題ないのか、という質問もよくあります。

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

Shopifyのカスタム開発をお探しなら、当社のShopify専門家にお問い合わせいただくだけでなく、フリーランスプラットフォームでShopify専門家を検索することもできます。

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

Shopifyアプリは、標準的なWebアプリケーションとほぼ同じように機能しますが、APIを介してShopifyプラットフォームと密接に接続されています。 これにはいくつかの意味があります：

• Shopifyアプリを構築するために、Webアプリと同じ技術を使用することができます。 特定の技術に制限されることはありません（ただし、特定の技術を使用することで、生活が楽になることがあります。）
• 通常、バックエンドとフロントエンドの両方を構築する必要があります。
• アプリケーションのホスティングと運用はあなたの責任です。
• アプリケーションがShopifyによって承認されると、リリースプロセスも完全にあなたの管理下に置かれます。

‍

ShopifyはSoftware-as-a-Service(SaaS)であり、Shopifyのアプリケーションと同じように、マーチャントの視点に立つと、マーチャントはあなたのアプリケーションをインストールするために、どのようなコードにも触れる必要がないことを意味します。

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

Shopifyアプリケーションには3つの論理コンポーネントがあります：

• マーチャント管理
• ウェブフック処理
• 顧客向けアプリケーション（ストアフロントUI）

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

マーチャント管理画面

マーチャント管理画面は、マーチャントがアプリケーションの設定や設定を行うダッシュボードです。 Shopifyでは、マーチャント管理画面をShopifyのインターフェイス内で提供することを推奨しています（いわゆる埋め込みアプリケーション）。 つまり、iframeを使用してShopifyの管理画面にアプリを埋め込むことになります。

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

• 認証の仕組み上、多かれ少なかれシングルページアプリケーションアーキテクチャに制限されます（Turbolinksや Inertia.jsを利用することで部分的な回避は可能です）。
• Shopifyから提供されているライブラリがあるので、フロントエンドを書くためにReactを使うのは効率的かもしれません：Polaris UIライブラリは、あなたのUXがShopifyの管理画面の他の部分と一貫していることを確認し、App Bridgeは、Shopifyのコンテキストデータをiframeで実行されているアプリケーションに提供するフロントエンドブリッジとして機能します。

Merchant adminはまた、あなたのアプリとマーチャントの間の最初のタッチポイントであり、インストールプロセスが処理される場所です。 インストールは基本的に、OAuthを介してマーチャントのストアデータにアクセスするためのパーミッションを取得することを意味します。

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

ウェブフック処理

Webhookは、Shopifyがインストールされている店舗で発生する様々なイベントをアプリケーションに通知する方法です。 どのイベントを購読するかは、あなたが決定します。

受信したイベントに基づいて実行される必要のあるビジネスロジックは、バックグラウンドワーカーによって処理されるべきです。 そうでなければ、アプリケーションに過負荷がかかりやすくなります。アプリケーションの外部にイベント受信を委譲することも検討できます。

‍

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

あなたのアプリケーションがShopifyのストアフロントを拡張する（つまり、ストアの顧客に新しい機能を提供する）場合、フロントストアに「挿入」する必要があります。 そのためには、あなたのJavaScriptリソースをフロントストアに注入するようにAPIを介してShopifyに伝える必要があります。 そのための2つの最も一般的な方法があります：スクリプトタグと App Embedブロック。 また、App Blocks（Appセクションとも呼ばれる）を使用して、いくつかのビジュアルコンポーネントで直接ストアフロントテーマを拡張する可能性もあります。

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

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

Shopifyアプリ開発の進化

Shopifyアプリの開発は基本的にWebアプリの開発であると前述しましたが、実はこれは部分的にしか当てはまりません。 2021年、Shopifyはチェックアウトエクステンションという概念を導入しました。 それ以前は、Shopifyアプリでチェックアウトの機能を拡張することはできませんでした。 この点で、開発者の体験はWebアプリとは異なり、非常に限定された環境（例えば、あらかじめ用意された特定のReactコンポーネントセットしか使用できない）で行われ、ビルドとリリースのプロセスはShopifyによって処理されます。

将来的には、Shopifyがサードパーティのアプリケーションをよりコントロールできるように、他の分野でもこのアプローチに移行する可能性がある。 その結果、Shopifyのアプリ開発はウェブアプリ開発からさらにシフトしていくだろう。

Digismoothieの技術スタック

DigismoothieでShopifyアプリの開発に使用している技術を見てみましょう。

‍

私たちが使用しているテクノロジーについては、ナレッジベースをご覧ください。

まとめ

技術的な観点からShopifyアプリケーションを構築するということはどういうことなのか、そしてどのような技術を使うことができるのか、お分かりいただけたかと思います。

最後に、冒頭の質問に戻りましょう。 Web開発のバックグラウンドを持つエンジニアがShopifyアプリケーションを開発するチームに参加することは問題ないのでしょうか？ 私は絶対に問題ないと思います。 エンジニアが最新のWebアプリケーション開発で使用されるコンセプトと技術を十分に理解していれば、すぐに飛び込むことができます。 ShopifyのエコシステムとAPIに関する知識は、段階を追ってついてくるでしょう。