Shopifyアプリ開発の手順や注意点

こんにちは、KIYONOエンジニアの田代です。

Shopifyは8000を超えるアプリを自由に導入し機能を拡張することが可能ですが、求める機能を持ったアプリが存在していないこともありますし、求める機能を持っているが日本語に対応していないアプリというのも多々あります。

そのような場合は、アプリを自身で開発してしまうという方法を取ることもできますが、通常のアプリケーション開発とは異なる専門知識が必要になるため、少々とっつきにくい印象があることも否めません。

そこで今回は、Shopifyでアプリを開発する方法を分かりやすく解説させていただきますのでご参考いただけると幸いです。

Shopifyアプリとは？

おさらいとして、そもそもShopifyアプリってなんだっけ？というところから解説していきます。

Shopifyアプリとは「Shopifyに標準で搭載されていない機能を追加するための仕組み」です。

似ている概念として、WordPressのプラグインがよく挙げられますが、WordPressのプラグインが「WordPress本体と同じサーバーやデータベースを共有している」のに対して、Shopifyアプリは「Shopify本体のサーバーとは別のサーバーで管理されているもの」となっています。

そのため、Shopifyアプリから直接Shopify内のデータベースを操作することはできず、APIを通じてデータのやり取りをするイメージとなります。

Shopifyアプリの種類

Shopifyアプリとは？が理解できたところで、大きく分けて3つ存在するShopifyアプリの種類について見ていきましょう。

パプリックアプリ

スマートフォンにおけるアプリストアと同じように、ShopifyアプリにもShopify App Storeというアプリストアがあり、そちらで公開することによりアプリを多くの方に使っていただくことができます。

無料・有料のどちらでもアプリを公開することが可能となっています。

注意点として、Shopify App Storeへアプリを公開するには、Shopifyによる審査とGDPRというEUの個人情報に関する規則への対応が必須となります。

プライベートアプリ

基本的な概念はパブリックアプリと変わりませんが、複数のストアにインストールしたいがパプリックに公開したくない場合はこちらを選択します。

URLを知っている人のみアプリのインストールができるイメージとなります。

※2022年末からプライベートアプリは新規作成できなくなっており、後述するカスタムアプリが推奨されています。

カスタムアプリ

特定のストアにインストールするために作成するアプリ形態となっています。

Shopifyのデフォルト機能やパプリックアプリで対応できない特定のニーズを満たす機能などは、カスタムアプリで開発することになります。

パップリックアプリのように、Shopify App Storeに公開されることはないため、前述した審査などは必要ありません。

Shopifyアプリの開発言語

Shopifyのアプリはプログラミングによって開発します。プログラミングとはコンピューターに指示を書くことで、この時に使用するのがプログラミング言語となります。

Shopifyアプリの開発にはプログラミング言語の中でも、アプリのバックエンド開発には「Ruby」や「Node.js」、アプリのインターフェース開発には「React」や「Vue.js」が主に使用されます。

使用できないプログラミング言語なども特にないため、プログラミング言語には開発や自社のノウハウなどを加味して選択するといいでしょう。

Shopifyアプリ開発の注意点

Shopifyアプリの開発前に知っておくべき注意点として、Shopifyアプリのフロントエンド構築には、大きくわけて以下の二つの方式があるということ。

• 埋め込みアプリ
• 非埋め込みアプリ

この二つの違いについてご紹介していきます。

埋め込みアプリ

冒頭でご紹介した通り、Shopifyアプリは「Shopify本体のサーバーとは別のサーバーで管理されているもの」となっています。

そのため、直接Shopifyのダッシュボードへアプリの管理画面を埋め込みたい場合は、iFrameでアプリ側の画面を読み込みにいく仕組みを使用しています。

その弊害として、MPA（マルチページアプリケーション）のようなページ遷移を挟んで画面を描画する作りだと、サードパーティcookieのセキュリティ上の問題でログイン状態をアプリ側のcookieに保存しておくことができず、ページ遷移のたびにログイン状態が途切れてしまうことになります。

そのためページ遷移をするたびにログイン認証をかける必要があり、ShopifyではJWT（JSON Web Token）という方式が用意されています。

上記よりは簡単な方法としては、SPA（シングルページアプリケーション）で作成すれば実際にはページ遷移を挟まないため、ログイン状態が途切れることなく作成することができます。

非埋め込みアプリ

非埋め込みアプリとは、Shopifyの管理画面とは完全に別のウィンドウとしてアプリの管理画面を立ち上げる方式のことです。

アプリの要件次第ではありますが「Shopifyの管理画面とは独立したウィンドウでアプリを表示したい」や「SPAなど埋め込みアプリを開発する時間がない」などの場合はこちらの方式をとることになります。

Shopifyアプリ開発の手順

ここからはShopifyアプリ開発の手順を細かく見ていきましょう。

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

パートナーアカウントとは、Shopifyのテーマ開発やアプリ開発、ストア構築を行う際に必要になるアカウントです。

Shopifyのストア登録がお済みの方は、ストア登録に使用したメールアドレスを活用できます。

パートナーアカウントを作成すると、専用のダッシュボードへのアクセスが可能になり、アプリの登録などのパートナー機能を利用可能になります。

開発ストアの作成・追加

次にShopifyパートナーのダッシュボードから開発ストアの作成を行います。

ダッシュボードから「ストア管理」をクリックし、ストア一覧画面から「ストアを追加」をクリック、ポップアップが表示されますので「開発ストアを作成」をクリックして作成画面に遷移してください。

ストア名やストアURLなどの必須項目を入力し保存すれば開発ストアの追加完了です。

この開発ストアを活用することで、カスタムアプリの作成や構築したアプリやテーマのテストが可能となります。

アプリの作成

Shopifyパートナーのダッシュボードメニューから「アプリ管理」を選択し「アプリを作成」をクリックしましょう。

アプリ作成画面へ遷移すると、Shopify CLIを使用するか手動で作成するか選択できますのでやりやすい方法で作成してください。

クライアント資格情報を取得

アプリが正常に作成されましたら、アプリ一覧に作成したアプリが追加されていますので、アプリ名をクリックしてアプリ詳細画面へ遷移してください。

アプリ詳細画面へ遷移すると、クライアント資格情報として「クライアントID」や「クライアントシークレット」が記載されていますので、コピーして紛失や流出することがないよう安全に保管してください。

クライアントIDやクライアントシークレットはアプリへのアクセスや設定などに使用します。

開発環境のセットアップ

クライアント資格情報を取得できましたら、開発環境のセットアップを行います。

前述した通り、Shopifyアプリはどの言語でも開発可能ですが、その中でもRubyやNode.jsは公式テンプレートが用意されているほか、ドキュメントなども充実しているため開発がやりやすくなっています。（Shopify自体がRubyで構築されているので親和性も高い）

また、Shopify CLIを利用したShopifyアプリに必要となる開発環境の要件については以下のとおりとなっています。

• Node.js18以降がインストールされている
• Node.jsのパッケージマネージャー、npm,yarn,pnpmのいずれかがインストールされている
• Git 2.28.0以降がインストールされている

詳しくは公式ドキュメントにまとめられていますのでご参照ください。

また以前は、ngrokやCloudflare Tunnelなどの開発用サーバーが必要でしたが、最新のShopify CLIではCloudflareを自動的に接続してくれるので不要になりました。

アプリ開発/開発ストアへのインストール

開発環境のセットアップが完了しましたら、アプリの開発に移っていきましょう。

Shopifyのアプリ開発には、基本的にはShopifyが提供しているAPIを活用することで各種機能を構築します。
Shopify APIを活用することで、Shopifyが持っているリソースに対してCRUD処理（Create, Read, Update, Delete）が可能となります。

アプリ開発がある程度進み動作確認などをしたい場合は、開発ストアへアプリをインストールしましょう。

アプリのデプロイ

最後に完成したアプリをデプロイして公開します。

Shopifyのテンプレートには、DockerファイルやFly.ioの設定が公開されているため、コンテナをデプロイできるサーバーであれば簡単にデプロイすることが可能になっています。

参考：Deploy to a hosting service