【今日のひとこと】2023年7月にUAが終了に。ShopifyでもGA4のデフォルト化が待たれますね…!

Shopify POS の開発で参考になったリソースまとめ

以前の記事で Shopify POS を利用したクーポンアプリのデモをしました。その際に参考になったリソースを以下にまとめておきます。

参考リンク

なぜまとめの必要性を感じたか

Shopify POS の開発では、App Bridge を多用します。

App Bridge とは要するに Shopify の管理画面にアプリを埋め込むための JavaScript ライブラリなのですが、App Bridge はドキュメントが少々手ごわい(たどりにくい)のと、日本語で解説している記事がほとんど存在しないこともあり、軽いデモアプリのつもりで作りはじめたものの、実装には割と苦労しました。

日本語のドキュメントが現時点(執筆時の2022年4月)では少ないので、自身のメモと、未来の開発者が検索とかで見つけていただく際に少しでも参考になればと思ってまとめておきます。

あくまでまとめなのでリンク+メモ程度の内容ですが、そのうち追記するかもしれません!


Shopify POS の拡張機能

Shopify POS をアプリと連携するための機能として、3つのエクステンション(拡張機能)存在します

POS links

POS links を使用すると、Shopify POS 用のアプリで用意したページに直接リンクさせることが可能です。

たとえば、上記の記事で紹介したクーポンを作成できるアプリの場合「ユーザーが保有しているクーポンをリストにしたページを POS links でリンクさせる」といったやり方になります。

参考リンク

Cart app extensions

指定されたエンドポイントをアプリに設定することで、customer_idや、Cart app extension で使用できるアクションおよびテンプレートを受け取ることが可能です。

Shopify POS のドキュメントでは、カスタマーが保有しているポイントからディスカウントクーポンを発行するサンプルが記載されています。

参考リンク

Product recommendation extensions

マーチャントが Shopify POS からおすすめ商品にサクッとアクセスできるようにする拡張機能です。商品の詳細を表示したときや、カート内が変更された時などに動作(スマートグリッドに表示)します。

参考リンク

Shopify POS 対応で使用できる App Bridge アクションセット

以下は、Shopify POS で利用することが多い App Bridge のアクションセットをまとめています。

アクションセットとは、App Bridge を使ってShopifyとやり取りする際に、Shopify のインターフェースをコントロールするための複数のアクション(SHOWとかCLEARとか)をまとめて定義したものです。モーダルやボタン、ポップアップなど、ネイティブ Shopify と同じ UI が使えるのでシームレスな UX を構築できます。

※内容とリンクは2022年4月時点のものです。今後はもっと増えていくと思います

POS

POS を使用しているユーザー情報や場所を取得することができます。

店舗別で売り上げを集計したり、スタッフ別で集計するようなアプリもこれで作れそうです。デバイス情報も取得できます。

参考リンク

Cart

Shopify POS のカートに、商品の追加、顧客の追加、ディスカウントの追加、それぞれの情報の取得、更新などができます。
POS links で作成した機能に実装することで、カート内の情報を触ることができるので便利です。

参考リンク

Scanner

デバイスについているカメラやバーコードスキャナーを使用して、商品バーコードをスキャンすることができます。

参考リンク

Sharing

共有シートを呼び出し、iOS、Android デバイス上のアプリにコンテンツを共有できます。

参考リンク


Shopify POS 開発は楽しいので、引き続きトライしていきます!