Shopifyアプリ開発の手順とは?ツールや注意点も解説【2024年最新版】

Shopifyアプリ開発の手順とは?ツールや注意点も解説

コロナ渦でEC需要が高まっている昨今、世界で多くの人に利用されているECサービスであるShopifyを使ってビジネスを展開している人も多いのではないでしょうか。

Shopifyの魅力の1つとして、使いたい機能を搭載したアプリを自身で開発できることが挙げられます。しかし、開発手順が分からず困っている人もいるでしょう。正しい開発手順を理解していないと、アプリ開発に失敗する恐れがあります。

そこで、本記事ではShopifyアプリの開発手順を詳しく解説します。また、Shopifyアプリ開発ツールや開発時の注意点についても解説します。

  • Shopifyに欲しい機能を加えたい
  • Shopifyのアプリ開発方法が知りたい
  • 開発したアプリをShopifyに組み込む方法が知りたい

上記の項目に該当する方は、ぜひ参考にしてください。

※なお、制作会社の探し方・選び方がわからない!という方は、当サイト「システム幹事」へお気軽にご相談ください。目的・予算にあった制作会社を「人力で」マッチングします。相談料、会社紹介料はすべて無料です。

【無料】Shopifyアプリを開発できる会社を探す

目次
  1. 1. Shopifyとは
  2. 2. Shopifyアプリの種類
    1. 2-1. 公開アプリ
    2. 2-2. カスタムアプリ
  3. 3. Shopifyにおけるアプリ開発準備
    1. 3-1. 開発言語
    2. 3-2. 開発環境
  4. 4. Shopifyアプリ開発の手順
    1. 4-1. 1.パートナーアカウント登録
    2. 4-2. 2.開発ストア追加
    3. 4-3. 3.アプリ作成
    4. 4-4. 4.APIの資格取得と連携
    5. 4-5. 5.開発ストアにインストール
    6. 4-6. 6.アプリのテスト
  5. 5. Shopifyアプリ開発ツール5選
    1. 5-1. Polaris
    2. 5-2. Webhook
    3. 5-3. App Bridge
    4. 5-4. App extensions
    5. 5-5. Checkout extensions
  6. 6. Shopifyアプリを開発する際の注意点
    1. 6-1. 定期的にアプリをアップグレードする
    2. 6-2. アクセストークンのセキュリティを強化する
    3. 6-3. コードの上書きを防ぐためにGitで管理する
    4. 6-4. アプリの呼び出しにはプラン毎に制限がある
  7. 7. 開発環境が整っていなければ制作会社への依頼もおすすめ
    1. 7-1. 株式会社これから
    2. 7-2. 株式会社Huckleberry
    3. 7-3. 株式会社フルバランス
  8. 8. Shopifyのアプリ開発 まとめ

Shopifyとは

Shopifyとは

引用:Shopify

Shopifyとは、世界NO.1のシェアを誇るECプラットフォームです。初心者から大企業まで商材や事業規模に関わらず本格的なECサイトを構築できるため、多くの人から支持を集めています。

また、低コストながら幅広い機能が実装されている点も人気の秘訣です。従来は日本企業にはあまり使われていませんでしたが、2017年に日本向けにカスタマイズされたことから、多くの日本企業もShopifyを利用するようになりました。

Shopifyにはすでに7000種類以上ものアプリが開発されており、自身でのアプリ開発も可能です。具体的には、翻訳機能やサブスク機能などを追加できます。以上のように、機能拡張性が高い点もShopifyならではの魅力だといえます。

【無料】Shopifyアプリ開発について相談する

Shopifyアプリの種類

Shopifyアプリには、次の2種類が存在します。

  • 公開アプリ
  • カスタムアプリ

上記に加えて「プライベートアプリ」も使われていましたが、2022年11月時点では推奨されていません。独自アプリ開発はカスタムアプリで可能です。カスタムアプリを利用して独自のアプリを開発しましょう。

公開アプリ

Shopify app store

※画像引用:Shopify app store

公開アプリはどのストアでも共通して使える機能が備わっており、一般に公開されています。Shopifyアプリストアを通じてインストール可能です。「未登録」とカテゴライズされているアプリもありますが、こちらもShopifyアプリストアからインストールできます。

機能面やセキュリティ面で審査に通過したアプリのみが表示されるため、安心して使えるでしょう。機能はどのストアでも共通して使えるものばかり。操作性に戸惑いを覚える機会も多くはないと考えられます。

カスタムアプリ

カスタムアプリは、単一のストア向けに開発されたアプリです。公開アプリとは異なり、Shopifyアプリストア上には掲載されません。

カスタムアプリの役割は、Shopifyストアの管理画面への機能追加やAPI連携の設定です。自身のストアにオリジナリティのある機能を搭載したい際に重宝するでしょう。

また、外部の人にアプリ開発を依頼する場合、管理画面にアクセスしたりストアにAPIアクセスしたりせずにアプリを開発できるため、セキュリティ面も安心です。

【無料】Shopifyアプリ開発について相談する

Shopifyにおけるアプリ開発準備

ここでは、Shopifyにおけるアプリ開発準備として、次の内容について解説します。

  • 開発言語
  • 開発環境

開発言語はShopifyに関わらず、多くのECサイトで重要な存在です。両者の違いを理解しておきましょう。

開発言語

Shopifyアプリを開発する際には、PHP・Ruby・JavaScriptなどの言語で開発が可能です。一般的なWeb開発に使われている言語を利用できればいいといえるでしょう。

なお、Shopifyが直接サポートしている言語はJavaScript・Rubyの2つです。また、Shopify独自の開発言語であるLiquid(Rubyベースの言語)について理解しておけば、テーマにおける特有の機能デザインを充実させられます。

開発環境

Shopifyアプリは、Shopify外部のアプリであるため、開発する際にはサーバーを借りる必要があります。

アプリを開発したりテストをしたりする際には、ローカル環境でも実行できます。しかし、開発ストアにShopifyアプリをダウンロードするには、インターネットを使って外部アクセスする必要があります。代表的な開発環境は次の2つです。

  • ngrokを利用する
  • リバースSSHポートフォワーディングを利用した、SSHサーバーを経由しローカルサーバーを外部公開する
  • AWSを利用する

いずれにしても開発途中でサーバーは必要になるため、別途探しておかなければなりません。Shopifyアプリの開発前に手配しておきましょう。

【無料】Shopifyアプリ開発について相談する

Shopifyアプリ開発の手順

本章では、Shopifyアプリ開発の手順を解説します。具体的には、次のとおりです。

  1. パートナーアカウント登録
  2. 開発ストア追加
  3. アプリ作成
  4. 開発環境を準備する
  5. カスタムアプリの設定をする
  6. アプリのテスト

それぞれの手順について詳しく解説するため、ぜひ参考にしてください。

1.パートナーアカウント登録

まずはじめに、Shopifyのパートナーアカウントを登録しましょう。パートナーアカウントは、Shopifyストアに登録した際に使ったメールアドレスで作成できます。

パートナーアカウントを登録したあとは、専門のダッシュボードにアクセスできます。そして、パートナー向けの機能であるアプリの追加や登録などを利用できるようになります。

Shopifyパートナーアカウントには利用規約があるため、登録する前に必ず確認しておきましょう。Shopifyに関連するキーワードを用いて広告を出稿したり、サイトのドメインに「Shopify」の文言を使用したりなどの行為が禁止されています。

2.開発ストア追加

開発ストアの追加

次に、開発ストアを追加します。開発ストアとは、Shopifyで画面をカスタマイズしたりアプリを開発したりする際に使う機能です。パートナーアカウント取得後に開発するアプリとして「カスタムアプリ」と「公開アプリ」が選択できるようになります。

開発ストアを使えば、カスタムアプリを作成したり構築したアプリ・テーマをテストしたりできます。しかし、インストールできるアプリは無料のものかパートナー向けのもののみであるため、注意が必要です。

3.アプリ作成

カスタムアプリの作成

いよいよ、アプリ作成に移ります。先述したとおり、PHP・Ruby・JavaScript・Liquidなどの言語を用いてアプリを開発できます。

具体的な方法は以下のとおりです。

  1. ダッシュボード画面を開いて「アプリ管理」を選択
  2. 「アプリを作成する」をクリックし、「カスタムアプリ」を選択
  3. 開発したいアプリ名・アプリURL・リダイレクトURLを入力
  4. 「アプリを作成する」というバナーをクリック

上記の工程で、アプリ作成が完了します。

4.APIの資格取得と連携

アプリの作成が終わると、アプリへのアクセスに必要となるAPIキー・APIシークレットキーが表示されます。APIとはなにかと何かをつなぐという意味で使用されるコンピューター用語です。

APIキーやAPIシークレットキーが外部に漏れてしまうと不正アクセスなどのトラブルに発展する恐れがあります。また、アプリをカスタマイズする際に入力を求められることもあるため、絶対に紛失・流出させないように厳重に保管してください。

5.開発ストアにインストール

開発ストアにインストールします。一度開発ストアにインストールしなければ、アプリのテストが行えません。具体的な手順は次のとおりです。

  • 資格の情報を用いてAPIを呼び出すために必要なパーミッションを入手するためのURLを生成
  • 開発ストアへインストール

なお、開発ストアへのインストールの際、パーミッション取得用のURLにリダイレクトさせなければなりません。また、アプリが再インストールされたものである場合、トークンの有効性を確認しなければならない手間がかかります。

6.アプリのテスト

最後に、「アプリ管理」画面に表示されている「開発ストアでテストします」をクリックし、アプリのテストを行いましょう。確認する内容は表示や機能が狙った通りになっているかどうかです。

エラーが表示されなければ、テストは完了です。もしテストの段階でエラーや不具合を発見した場合は再度アプリに手を加えなければなりません。やや手間ではありますが、ユーザーも管理者も問題なくアプリを利用するためには重要なポイントです。

【無料】Shopifyアプリ開発について相談する

Shopifyアプリ開発ツール5選

ここでは、Shopifyアプリ開発ツールを5つ紹介します。具体的には、次のとおりです。

  • Polaris
  • Webhook
  • App Bridge
  • App extensions
  • Checkout extensions

Polaris

マーチャント管理画面やPOSアプリに埋め込むUIを作成する際に使用するツールです。UIライブラリが備わっているため、Shopifyと同様のデザイン性を持っていながら、モバイルアプリにも対応できるという利点を兼ね備えているのが特徴です。

注文管理画面やPOSアプリメニューなどの拡張ポイントに機能追加もできます。ただし管理画面のカスタマイズには「App extensions」が、Shopify画面と作成したUIを連携させるには「App Bridge」がそれぞれ必要です。

Webhook

Webhookは、通知に基づく処理を実装できます。例えば、顧客から注文が入ったら在庫システムを呼び出すといったことが可能です。

Webhookはマーチャント設定画面から登録できます。方法は手動でも問題ありません。もしくはAPIを用いて自動登録も可能。都合のいい方で設定しましょう。

ただし設定の際には、特定の時間内にShopifyからのレスポンスを受けなければなりません。最初にレスポンスを返した後に、非同期の状態で対処する必要があり、やや手間がかかります。

App Bridge

App Bridgeは、Shopifyの画面と作成したUIを連携する際に用います。大きくUIを変更できないものの、シンプルな操作でUI連携が可能となっています。サンプルコードもあるため、一部を書き換えれば難しい操作ではないでしょう。

Polarisと完全互換しているため、アプリ内外のコンポーネントの提供が可能になります。双方を同時に使用する際は、Polarisで<AppProvider>を、App Bridgeで<Provider>の両方を設定しなければなりません。

App extensions

App extensionsは、管理画面に独自のメニューを挿入する際にアプリのURLを設定します。可能な拡張は次の3つです

  • 管理リンク
    Shopifyの管理画面全体でマーチャントがアプリ機能にアクセスできるようになる
  • 一括アクションリンク
    ドロップダウンメニューでマーチャントがアプリ機能にアクセスできるようになる
  • ナビゲーションリンク
    アプリ内になるアイテムを、デバイスを問わず一貫して表示できるようになる

主に管理に関する拡張機能を追加する開発ツールだと思っておけばいいでしょう。

Checkout extensions

商品ページやカート画面以降の配送先指定・配送方法(送料)選択・決済(購入完了)などをチェックアウトと呼びます。チェックアウトにアプリの機能を追加する際に、Checkout extensionsを使います

ここまで紹介したアプリ開発ツールは、それぞれできることが異なることを覚えておきましょう。どの機能を拡張したいのかなどを明確にしておくと、タイムロスを少なくして開発できます。

ただし、公式サイトにある説明は英語ばかりであるため、自社で開発する場合は英語がわかる人材かアプリ開発の知識がある人が必要です。

【無料】Shopifyアプリ開発について相談する

Shopifyアプリを開発する際の注意点

Shopifyアプリを開発する際には、次の4つの注意点をおさえる必要があります。

  • 定期的にアプリをアップグレードする
  • アクセストークンのセキュリティを強化する
  • コードの上書きを防ぐためにGitで管理する
  • アプリの呼び出しにはプラン毎に制限がある

上記の注意点を抑えた上でShopifyアプリを開発すれば、大きな問題が発生しにくくなります。

定期的にアプリをアップグレードする

Shopifyを継続的に利用する場合、定期的にアプリをアップグレードする必要があります。具体的には、四半期ごとにAPIをアップデートして新たなバージョンを出しています。

つまり、定期的にアプリをアップグレードする必要があるのです。アップグレードを忘れると、正常にShopifyの機能を使えなくなる恐れがあるため、注意が必要です。

正常に使えなくなってしまうと開発側だけではなく利用者側にもトラブルが発生する可能性があります。アップグレードのタイミングが決まっているため、忘れないようにスケジュールに組み込んでおくといいでしょう。

アクセストークンのセキュリティを強化する

Shopifyを安全に使うためには、アクセストークンのセキュリティを強化する必要があります。

アプリ開発時には、APIキー・APIシークレットキーといった「サービス利用に必要な認証情報」を頻繁に変更しましょう。変更しないままでいると、情報漏洩が起こる恐れがあります。

ECサイトでは、顧客の大切な情報を守る必要があるため、必ずセキュリティ強化を行いましょう。おろそかにしてしまうと個人情報流出で大変な目になってしまう可能性も否定できません。

コードの上書きを防ぐためにGitで管理する

アプリを開発する際には、「Git」という分散型バージョン管理システムを利用する必要があります。もう少し詳しく説明すると、ファイルのバージョン管理ができるようにできるツールです。

「Git」を使えば編集履歴を管理できるため、複数の環境で編集をした場合に片方のコードが上書きされて消えてしまうことを防げます

主にプログラマーがバックアップ手段の1つとして使用しています。Shopifyアプリは個人で開発できますが、個人開発でもバックアップは必要です。上書き防止と合わせて管理しておきましょう。

アプリの呼び出しにはプラン毎に制限がある

Shopifyにアプリを連携させる場合、プランに応じたレート制限が設けられています。レート制限は、APIに対して設けられています。Shopifyがプラットフォームを安定させるために必要な制限です。

プランによっては、短時間に大量のデータ処理を行う場合制限対象となるため、注意が必要です。

API名

標準の制限

ShopifyPlusでの制限

Shopify Admin API

(GraphQL)

50ポイント/秒

100ポイント/秒

Shopify Admin API

(REST)

2リクエスト/秒

4リクエスト/秒

Shopify Storefront API

リクエスト毎に最低0.5秒


ユーザーIP毎に60秒

リクエスト毎に最低0.5秒


ユーザーIP毎に120秒

Shopify Plusは標準プランの実質2倍のレート制限となっています。なお、アプローチはリクエスト間の時間に関わるものです。

【無料】Shopifyアプリ開発について相談する

開発環境が整っていなければ制作会社への依頼もおすすめ

Shopifyアプリを開発するには、LiquidやPolarisといったShopify独自の言語や機能も理解する必要があります。しかし、開発環境が整っていないと新たに習得しなければならない事柄が多く、身につけるのにも時間がかかってしまうのが実情です。

反対に、アプリ開発を行なっている制作会社へ依頼すれば、専門スキルを駆使してアプリを作成して貰えます。

ここでは、Shopifyアプリの受託関連に強いおすすめの起業を紹介します。具体的には、以下のとおりです。

  • 株式会社これから
  • 株式会社Huckleberry
  • 株式会社フラクタ

株式会社これから

株式会社これから

引用:株式会社これから

株式会社これからのおすすめポイント ・集客や売り上げの改善なども依頼できる
・売れるECサイトを構築してくれる
・単にECサイトの見栄えを整えるだけでなく売り上げ向上が期待できる

「株式会社これから」は、Shopifyの制作以外にも、集客や売り上げの改善などをワンストップで任せられる開発会社です。単にShopifyの見た目を整えるだけでなく「売れるECサイト」に拘って制作してくれるため、売り上げへの貢献が期待できるでしょう。

【無料】Shopifyアプリ開発について相談する

株式会社Huckleberry

株式会社Huckleberry

引用:株式会社Huckeberry

株式会社Huckeberryのおすすめポイント ・マーケティング施策の立案・実施等やD2Cサービスの企画・開発などの業務も依頼できる
・アプリ開発の経験も多数あるため安心できる
・日本のECショップに適しているなShopifyアプリを提供している

「株式会社Huckeberry」は、Shopifyを利用したECサイト構築のみならず、マーケティング施策の立案・実施等やD2Cサービスの企画・開発などに渡る、EC事業の全般を行っています。アプリ開発も多数行っているため、安心して任せられるでしょう。

【無料】Shopifyアプリ開発について相談する

株式会社フルバランス

株式会社フルバランス

引用:株式会社フルバランス

株式会社フルバランスのおすすめポイント ・Shopify公認上級パートナーの実績がある
・ベンチャー企業から大手企業まで、幅広いニーズに対応可能
・基幹システムや物流、成長支援に対応

「株式会社フルバランス」は、日本にShopifyが上陸した当初からECサイト構築を手がけてきた老舗企業です。Shopifyに関する専門書籍出版も手掛けており、さらなる事業成長を計画している企業におすすめの開発会社といえます。

【無料】Shopifyアプリ開発について相談する

Shopifyのアプリ開発 まとめ

世界トップクラスのシェアを誇るECプラットフォームであるShopifyを活用すれば、クオリティが高く顧客にとって使いやすいECサイトを作成できます。

さらに、自身でアプリを開発してオリジナル要素を付け加えることも可能です。アプリ開発の際には、PHP・Ruby・JavaScriptといった、一般的なWeb制作で用いられる言語が必要となります。また、Polaris・Webhook・App Bridge・App extensions・Checkout extensionsなどの開発ツールを使うのも効果的です。

shopifyでアプリを開発する際には、制作業者へ依頼するのがおすすめです。どの業者に依頼するか選択に困ったら、ぜひシステム幹事に相談してください。予算・目的にあった制作会社を無料でマッチングするため、適切な制作業者を選択できます。

コンサルタントのご紹介 システム幹事 コンサルタント 岩田真 岩田 専任のコンサルタントが、
お客様の予算と目的を丁寧にヒアリング。
最適な会社をピックアップ・ご紹介させていただきます!
初心者の方でも安心してご相談いただけます。

【無料】Shopifyアプリが開発できる会社を探す

Q. Shopifyアプリ開発の流れは?

Shopifyアプリ開発の流れは「?パートナーアカウント登録」「?開発ストア追加」「?アプリ作成」「?APIの資格取得と連携」「?開発ストアにインストール」「?アプリのテスト」です。それぞれの詳しい内容は記事内で紹介していますので、ぜひご覧ください。

Q. Shopifyアプリ開発の際の注意点は?

Shopifyアプリ開発の注意点は「定期的にアプリをアップグレードする」「コードの上書きを防ぐためにGitで管理する」等が挙げられます。詳しくは記事をご覧ください。