📖

はじめてShopifyアプリを開発する方へ~要点をざっくり解説

2022/10/27に公開約5,700字

Shopifyアプリ開発について要点をまとめました。

「はじめてShopifyアプリを開発するけど、イマイチ全体像が掴めない・・・」

という方、ぜひ参考にしてみて下さい。

大まかな流れ

  1. Shopifyアカウントを作成する
  2. Shopifyパートナーアカウントを作成する
  3. 開発ストアを作成する
  4. 開発環境を整える
  5. アプリ開発作業
  6. 本番サーバーにアップする

Shopifyパートナー・開発ストアについて

開発したアプリは、全て『Shopifyパートナー』というサービス上で管理を行います。

アプリを動かすサーバーの設定やインストールするストアの選択など、何かアプリの設定が必要なときは、とりあえずShopifyパートナーを見て下さい。

なお、アプリ開発を始める際は、まず初めにShopifyパートナー上で『開発ストア』の作成を行ってください。

開発ストアは、アプリをテストするためだけの専用ストアです。

他人は閲覧できません。

利用料は無料です。

Shopifyアカウントを作成したときに作るShopifyストアは、トライアル期間が終了するとログインすらできなくなりますが、開発ストアに使用期限はありません。

つまり、開発ストアがあれば、開発のために月額費用を払う必要はないってことです。

アプリの開発終了後は、公開アプリなら審査へと進み、カスタムアプリならインストールするストアをShopifyパートナー上で選択します。

カスタムアプリについての詳細は、以下の記事をご覧ください↓

https://zenn.dev/kodama_k/articles/05f429b6d2b079

開発環境ついて

Shopifyアプリは、外部サーバーにインストールしたアプリをShopify内で表示させる方式になっています。

よって、自作のShopifyアプリを動かすには、サーバーを自分で契約して用意する必要があります。

とはいえ、サーバーの準備は後回し。

コードを書き換えるたび、サーバーにアップして確認なんてことを繰り返してたら、時間がいくらあっても足りません。

そこで、今自分が使用しているパソコンを仮想サーバーにして、アプリ開発を行うのが一般的です。

これなら、ファイル保存するだけで、すぐにアプリの動作を確認することができます。

開発環境の手順については、以下の記事をご覧ください↓

https://zenn.dev/kodama_k/articles/42b47d9f681361

開発言語ついて

公式ドキュメントに沿って開発環境を整えていると、インストールするサンプルアプリの言語を選択するよう促されます。

  • Node.js
  • PHP
  • Ruby

例えば、ここで「Node.js」を選択すると、Node.jsをベースにしたサンプルアプリがインストールされます。

このサンプルアプリを元にコードを書き換えて、自作アプリを制作していきます。

私はPHPが得意なので、はじめはPHPを選択したのですが、本番サーバーでエラーが出て、どうしてもうまく動かせず。

仕方ないので、Node.jsでプログラムを書き直してみたら、驚くほどあっさりと動きました。

Node.js

サーバーサイドで使用できるJavaScriptです。

PHPの代わりだと思っても貰えればOKです。

フロントエンドはHTMLとJavaScriptを使い、サーバーサイドをPHPで構築しているWEBサービスも多いと思いますが、このNode.jsを使えば、フロントエンドだけでなくサーバーサイドもJavaScriptでコードを書くことができます。

とは言っても、フロントエンドとサーバサイドのデータ間のやりとりがなくなるわけではありません。

結局は、PHPと同じようにGET・POSTの処理は必要です。

JavaScriptは得意だけど、あまりPHPは得意でない人とか、まだプログラム言語を一つも習得していない人は、PHPを覚える必要が無いので良いかもしれません。

PHP

サーバーサイドに使用する最もスタンダードなプログラム言語です。

JavaScriptよりも簡単に習得することができます。

※PHPを選択した場合、『Laravel』というフレームワークをインストールする必要があります。

Ruby

書いたことないので分かりませんが、スタートアップ系のWEBサービスに良く利用されているイメージです。

おそらく、最近のWEBサイトを構築するのに、構成だったり必要なライブラリが揃っていたりと、色々使い勝手が良いのでしょう。

※Rubyを選択した場合、『Rails』というフレームワークをインストールする必要があります。

処理の流れ

インストールされるサンプルアプリは、「ボタンを押すと、商品数が5個追加される」というプログラムになっています。

ボタンを押す
   ↓
[商品を5個追加]という命令が、フロントエンドからバックエンドへ送信される
   ↓
命令を受け取ったバックエンドが、[ストアに商品を5個追加して頂きたいんですけど・・・]とShopifyストアのAPIにリクエストします。
   ↓
APIから「成功」というメッセージが届く

サンプルアプリについての詳細は、下記の記事をご覧ください↓
https://zenn.dev/kodama_k/articles/8a899678f18551

APIについて

Shopifyストアから情報を引き出したり、操作するために『API』という機能を利用します。

例えば、「最近の注文を10件取得したい」という場合。

ShopifyのAPIに「orders」「first: 10」というクエリを投げかければ、その情報を返してくれます。

REST APIとGraphQL API

Shopifyでは、RESTとGraphQLの2つのAPIが利用できます。

どちらを使うべきか?

RESTでしか取得できない情報もあるようですが、GraphQLの方が性能的には優れています。

https://ichyaku.com/shopify-graphql-rest/

とりあえず、Shopiストアの管理画面で閲覧できる情報(Admin API)を取得したい場合は、GraphQLでコードを書いておけば間違いありません。

以下、注文リストを取得する場合の参考ページを置いておきます(英文)↓

【GraphQL】
https://shopify.dev/api/admin-graphql/2022-10/queries/orders#examples-Get_the_first_10_orders_with_authorized_payments

【REST】
https://shopify.dev/api/admin-rest/2022-10/resources/order#get-orders?since-id=123

Node.js版のサンプルアプリだと、「web/helpers/product-creator.js」でGraphQLでAPIを呼び出しています。

プログラムが呼び出されるルート

サンプルアプリ(node.js版)を例に、どのようなルートを辿ってプログラムが呼び出されるかを書いておきます。

web/index.js
   ↓
web/frontend/index.html
   ↓
web/frontend/index.jsx
   ↓
web/frontend/App.jsx

https://xxx.myshopify.com/admin/apps/アプリ名/
   ↓
web/frontend/index.jsx
   ↓
web/frontend/components/ProductsCard.jsx
   ↓
web/helpers/product-creator.js

サンプルアプリを改造しようと思ったら、

  • web/index.js
  • web/frontend/index.jsx
  • web/frontend/components/ProductsCard.jsx
  • web/helpers/product-creator.js

この4つのファイルを触ればOKです。

jsxファイルについて

サンプルアプリ(Node.js版)フロントエンドには、「.jsx」というファイルが使用されています。

「.jsx」は、ReactというJavaScriptライブラリを用いたファイルであることを示しています。

Reactライブラリを用いたプログラムコードは、JavaScriptの構文の中にHTMLを組み込んだような見栄えのコードにできるため、理解しやすいコードを書くことができます。

Shopify独自のコンポーネントについて

「.jsx」の中では、「polaris」や「app-bridge-react」といったコンポーネントが呼び込まれています。

polaris・app-bridge-reactは、Shopify独自のコンポーネントです。

polarisとは?

polarisは、Shopifyストアで使用されているパーツのデザインをそのまま呼び出せるコンポーネントです。

例えば、テーブルのデザインであれば、<DataTable>というpolarisタグを使用します。

https://polaris.shopify.com/components/data-table

ボタンのデザインであれば、<Button>です。

https://polaris.shopify.com/components/button

polarisを使えば、HTML・CSSを書かずにShopifyと同じデザインに統一できるので、大幅に作業時間を短縮することができます。

app-bridgeとは?

app-bridgeは、Shopifyストアで使用されている機能をそのまま呼び出せるコンポーネントです。

例えば、ポップアップメッセージを表示したり、
https://shopify.dev/apps/tools/app-bridge/actions/toast

ナビゲーションメニューを取り付けたり、
https://shopify.dev/apps/tools/app-bridge/actions/menu/navigation

app-bridgeを使えば、Shopifyストアで使用されている同じ機能をアプリでも使うことができるので、大幅に作業時間を短縮することができます。

本番サーバーへのアップについて

Shopifyアプリを動かすサーバーは、開発者が自分で用意しなくてはなりません。

Shopifyストアは、あくまで外部で動いているアプリを埋め込んでいるだけです。

Shopifyアプリを動かすサーバーとして、公式ドキュメントでは「Haroku」と「fly.io」2つのサーバーの公開手順を紹介しています。

https://shopify-dev.translate.goog/apps/deployment/web?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja&_x_tr_pto=sc

Herokuは2022年11月28日に無料プランが廃止となりましたが、fly.ioであれば、2022年10月現在も無料で利用できます。

Node.js版サンプルアプリであれば、公式ドキュメントの手順通り進めるだけで、簡単に設置可能です。

実際にアップする方法については、下記の記事をご覧ください↓
https://zenn.dev/kodama_k/articles/3d11a72032a8a0

学習コスト

私の場合、JavaScript・PHPを使って簡単なシステムくらいは自作できるスキルを持ち合わせているので、そう難しくは考えていませんでしたが、自作アプリをアップするまでに一ヵ月を要しました。

難しいというよりは、分からないことが多かったです。

Shopifyの場合、特にネット上の情報が少ないのが一番の問題でした。

日本語の情報なんて、「ほぼない」に等しいので、海外のフォーラムを翻訳しながら読み漁ることになります。

また、ShopifyテーマとShopifyアプリの情報が混在しており、情報の精査も大変。

決して、数万円で見積を出すことのないようご注意を!

Discussion

ログインするとコメントできます