Shopifyアプリ開発の手順│開発言語や環境も解説

さまざまな機能を使用できるため、ShopifyでECサイトを運営している方は多いです。Shopifyを利用している人の多くがShopifyアプリも利用しています。

Shopifyはアプリによって自社ECサイトの機能を簡単に拡張することができ、とても便利です。しかし既存のアプリだけでは、自社の求める機能を満たせないことがあります。

そんなときは自社でアプリを開発してしまうのもひとつの方法です。今回の記事ではアプリを開発する手順や、言語・環境について解説します。手順はひとつひとつ丁寧に解説していきますので、開発言語が使用できる方はぜひ挑戦してみてください。

Shopifyアプリの種類

Shopifyでは標準機能として、商品管理、注文管理、カート、決済などのECサイトにおいて必要な機能が備わっています。

レビュー、配送の詳細指定、サブスクリプション販売などの機能は標準機能にはなく、機能を拡張していく際にはアプリを入れることで簡単に実装することができます。

このアプリにはいくつか種類があります。

公開アプリ

Shopifyのアプリストアで販売されているアプリです。有料・無料合わせて約8,000以上のアプリが存在し、Shopifyオーナーは誰でも利用することができます。

アプリの開発・管理はShopifyパートナーが行っており、公開アプリはShopifyの審査に合格する必要があります。

カスタムアプリ

特定のShopifyストアのために作成されたアプリです。公開アプリでは満たすことができないそのストアが持つ特定のニーズを満たすためにカスタムアプリは設計され、独自の機能を提供します。

アプリの開発・管理はShopifyパートナーが行う点は公開アプリと同様ですが、カスタムアプリにはShopifyの審査は必要ありません。

プライベートアプリ

特定のShopifyストアの特定のニーズを満たすために作成されるアプリという点では、カスタムアプリと同様です。カスタムアプリと異なる点は開発・管理はShopifyのストアオーナー側である点、ストア画面には埋め込めない点、その仕組みなどです。

プライベートアプリは2023年1月より作成自体ができなくなっており、カスタムアプリが推奨されています。

Shopifyアプリの開発に必要な言語と環境

アプリを開発する上で必要となる言語や環境を紹介します。

開発言語

Shopifyのアプリはプログラミングを行って開発します。プログラミングとはコンピューターに仕事をさせる指示を書くことです。この機械に指示する際に使われる言葉が、プログラミング言語です。

プログラミング言語は多数の種類がありますが、Shopifyでは主にRuby、JavaScript、Liquid、GraphQL、HTML/CSSなどを使用してアプリが開発されます。

そのため開発者にはこれらのプログラミング言語を複合的に使用するスキルが求められます。

開発環境

アプリの開発においてはサーバーを用意する必要があります。

サーバーとは、ユーザーが使用するコンピュータ端末に対して情報やサービスを提供するコンピューターやプログラムのことを指します。データを保管する倉庫のようなものをイメージしてください。

例えばあなたがスマホでPLAYBITのサイトを閲覧する時、あなたの端末にサイトの詳細情報はありません。端末がサイトの情報が置いてあるサーバーにアクセスして情報を取得し、あなたのスマホのブラウザに表示しています。

AWS(Amazon Web Services)などのクラウドサービスを利用すれば、手軽にサーバーを準備することが可能です。

その他、プログラム間で情報のやり取りをする「API」、アプリにストア情報取得の許可を与える仕組みの「OAuth」などの知見も必要になります。

Shopifyアプリ開発の手順 

Shopifyアプリの開発を進める手順について解説します。専門的な知識が必要になりますので自社での開発が難しい場合はアプリ開発を専門としている開発会社に依頼することをおすすめします。

開発会社に発注する際に注意しておきたいことは「Shopifyアプリの開発は難しい?開発会社への依頼方法や手順を解説」の記事で解説しています。他社に開発を依頼する場合は参考にしてください。

開発ストアの作成

開発中のアプリの動作を確認するためには開発ストアを利用します。

開発ストアを作成するには、パートナーダッシュボードから開発ストアを作成し、後ほど作成するShopifyアプリをインストールして、動作確認を行いながら開発します。

ここで作成する開発ストアはあくまでテスト用のストアで、クライアントからの受託案件など譲渡する場合は、譲渡するストアとは別に作成してください。開発中にShopifyアプリをインストールすると、クライアント様に譲渡できないテストストアになります。

クライアントのアプリをでShopifyストアを作る際は、開発ストアで開発して、その後クライアントに所有権を移譲するかたちで、公開ストア(課金が発生する)に移行します。

アプリを開発中にインストールするストアは、お客様がお持ちのストアや所有権を移行される予定のストアにはインストールしないように注意が必要です。

Shopify CLIなどを通して、テスト目的でShopifyアプリをストアにインストールした場合は、自動的にテストストアに変換されます。

Shopifyアプリの作成と認証情報の取得

アプリ開発には、Shopifyに登録されている情報を取得・更新することがあります。

アプリからShopifyの情報を利用するためには、Shopifyが提供するAPI(アプリケーションプログラミングインターフェース)を利用します。

Shopify APIとは「Shopifyのコンテンツ作成や情報の取得などを外部のアプリから行うための仕組み」のことです。

ShopifyのAPIは誰でも利用できるわけではなく、セキュリティ上、特定の資格情報をもった人だけが利用できます。

Shopifyでは、利用するアプリについての資格情報を2種類の方法で作成することができます。

1つ目の方法は、パートナーダッシュボードからアプリを作成するやり方です。

パートナーダッシュボードにログインをしてアプリメニューからアプリを作成し、APIを利用するために必要な資格情報(APIキーとシークレットキー)を取得することができます。ここで取得した資格情報は、自身が作成するアプリケーションで使用します。

2つ目の方法は、Shopify CLIを使用するやり方となります。

Shopify CLI は、Shopifyアプリの構築に役立つツールで、使用することでShopifyアプリをすばやく生成することができるようになります。

開発環境のセットアップ

Shopifyのアプリ開発は基本的にどの言語でも開発が可能ですが、Node.js、Rubyは公式テンプレートが用意されているため開発しやすいです。

特に、ShopifyではNode.jsベースのRemixフレームワークの使用が推奨されています。

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

必須要件
  • Node.js 18 以降がインストールされている。
  • Node.js パッケージ マネージャー ( npmYarn 1.x、またはpnpm ) がインストールされている。
  • Git 2.28.0 以降がインストールされている。 

参照:Shopify CLI for apps

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

アプリケーションの開発・開発ストアへのインストール

自身の開発環境が準備できたらShopifyアプリ開発が始められます。

Shopify APIを使用することで作成したアプリ内で「Shopiyの注文一覧の取得」「お客様の登録情報の変更」など、さまざまなことが実現可能となります。

アプリ開発の場合、以下の2種類のAPIを利用します。

これらのAPIの利用には、制限があるため利用する場合は注意してください。

API標準制限Shopify Advanceの制限Shopify Plusの制限
Shopify Admin API(GraphQL)50ポイント/秒100ポイント/秒500ポイント/秒
Shopify Admin API(REST)2リクエスト/秒4リクエスト/秒20リクエスト/秒

また、開発を円滑に進める上で動作確認は必要不可欠です。

アプリケーションの動作をテストするにはテストストアへのインストールが必要となるので、忘れないように注意が必要です。

※ 前述の通り、作成したアプリをインストールしたストアは譲渡ができなくなってしまうので、インストール先にご注意ください。

デバッグと最適化

アプリが完成したらテストを行い、不具合や改善点があればデバッグし、最適化を行います。

デバッグにおいては、想定しているインプットパターンや操作パターン(正常系)のテストだけではなく、想定外のインプットなどがあったとき(異常系)にもちゃんと正常に処理されるか、エラーハンドリングが正常に機能しているのかなどを確認します。

アプリケーションのデプロイ

最後に、完成したアプリケーションを実際に公開しましょう。

本番環境のサーバ上にプログラムを配置して、ユーザーが利用できる状態にします。

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

もちろん、カスタマイズすればサーバーレスアーキテクチャにも対応できるので、要件に応じてサーバーを選択してください。

参照:Deploy your web app

ドキュメントの作成

必要に応じて、ユーザーがアプリの設定方法・使い方を理解できるようドキュメントを作成します。

アプリ上に設置、または別サイトにFAQなどを作成します。

Shopifyアプリ開発後に行うべきこと

ここまでShopifyのアプリ開発のやり方について解説してきました。

ただ、アプリケーションの開発は完成したら終わりではなく、より多くのお客様に使用していただくことや、より良い顧客体験を提供するために日々改善が必要となります。

メンテナンスとアップデート

運用を始めると新たに不具合やバグが見つかることがあるため、公開後は定期的にメンテナンスとアップデートをしましょう。

またShopifyは、3カ月ごとの四半期初め(1月、4月、7月、10月)に新しい API バージョンをリリースします。

各バージョンは最低12カ月サポートすることがShopifyよりアナウンスされていますが、できる限りリリース毎にアップデートすることをおすすめします。

マーケティング

開発したアプリは、自社で活用するだけではなく、Shopifyのアプリストアで公開し、販売することも可能です。

ダウンロードされるアプリの60%がアプリストア内の検索経由であるため、アプリストア内で上位表示されることが重要です。そこで、適切なキーワード選定を心がけましょう。

またタイトルや説明文の設定もしっかり行うことでダウンロード数の増加が期待できます。アプリストアには、YouTube動画も掲載できるため、効果や操作方法のわかりやすい動画を用意すると効果的でしょう。

そして無料体験期間の設定や無料プランを設けることも、ダウンロード数の増加に繋がります。

選定したキーワードにおいて、すでに定評があるアプリが存在する場合には、アプリストア内の広告の活用も有効です。アプリストアの広告は、Shopifyパートナーのみが利用できます。詳細は公式ページをご確認ください。

またShopify公式ブログにあるマーケティング手法の記事も参考になります。

Shopifyのアプリを開発し、自社ECサイトに必要な機能を手に入れよう!

今回はアプリ開発について解説しました。

必要な機能を実現できるアプリがない際には、ぜひ自社でアプリの開発を検討してみてください。

必要なアプリがないということは、同じように悩んでいるEC運営者がいるかもしれない、ということです。開発したアプリを公開して販売することもできるので、アプリを作った際には公開して、多くのユーザーに使ってもらいましょう。

監修:株式会社Forest Book 代表取締役 森本竜治
Shopifyアプリ開発およびストア構築に特化したフルスタックエンジニア。Shopifyのアプリ開発を学べるテックギークを運営している。

テックギーク-Shopifyアプリ開発スクール

執筆:鈴木由将
Webエンジニア歴4年以上。会社員として Ruby on Rails を用いたアプリ開発に携わる傍ら、自己学習にてReact.jsを習得(実務での使用経験あり)。「システムではなくサービスを作ること」をモットーに、エンジニアとしてただ技術力を提供するのではなく、その先にある「自分が提供する価値」を大切にしている。