🧬

Shopify Functions を試してみる（Developer Preview 段階）

2022/12/17に公開

React

Rust

Shopify

tech

これは、OPENLOGI Advent Calendar 2022 17日目の投稿記事です。

はじめに

物流アウトソーシングのプラットフォームを開発している OPENLOGI の Advent Calendar としてこの記事を書きました。
オープンロジでは、 Shopify などの外部 EC カートサービスとの連携の開発を行っており、日頃から Shopify API を使った開発を行っています。

今回は、 Shopify Edition Summer '22 で発表された新機能の中から、Shopify Functions について、誰が・いつ・何ができるのか? がいまいちよく分かっていなかったので、公式ドキュメントを読みながら整理してみたいと思います。
※ 公式ドキュメントにはチュートリアルもサンプルコードも充実していますので、この記事ではそれについて詳細を追うというよりは、概要をまとめたものになります。

Shopify Functions とは

https://shopify.dev/api/functions

Shopify Functions は、今までカスタマイズ不可能だった、Shopify のバックエンドのロジックを拡張できる専用の Function API とそれを使った拡張機能のことです。
アプリ開発者が、Shopify CLI を使用してアプリの機能として作成し、アプリとして公開することで、マーチャントがストアにその機能を導入できるようになります。

記事公開時点では、チェックアウト内のディスカウントのロジックを拡張できる API のみが提供されていますが、今後は

配送料計算
チェックアウト・カートのバリデーション
決済設定

などが提供される予定となっているようです。
また Shopify のプランに関わらず利用できるようになるということで、アプリ開発者にとってはかなり目が離せないトピックです。

今まで触れなかった Shopify バックエンドの拡張が可能に

今なにができるのか

執筆現在では、下記の API が用意されており、ディスカウントの仕組みをアプリで作ることができます。

クーポンコードによる割引や、2個以上買うと10％オフ、のような割引の設定を作成し、チェックアウトに反映させることができます。
ディスカウントの設定画面の UI は、専用の react ライブラリが用意されているので、Shopify ネイティブのディスカウント機能と同等のものを作成することができます。

アプリで作成できるディスカウント設定画面

アプリで作成したディスカウントは「ディスカウント」画面で管理できる

スクリーンショットのように、「2個以上買うと10％オフに！」といった自動割引を作成すると、チェックアウトで作成したFunction を Shopify のバックエンドが実行し、割引が適用されます。

出典：https://shopify.dev/api/functions

でもそういう割引って、デフォルト機能でできるよね？

そうですね。今説明したようなディスカウント機能は、アプリを入れなくてもデフォルトの機能で実現可能ですよね。Shopify Functions ではメタフィールドに任意の値を保持・取得ができるので、デフォルト機能では実現できないような、より複雑な条件での割引ロジックを作りたいときに、アプリで実現できるようになります。
しかし確かにまだ公開されている API は少なく、ディスカウントに関する熱い想いがない場合は、後続の API の発表を待っていてよいかもしれません（個人の感想になっちゃいますが・・すみません；）。配送関連の API が公開されてからキャッチアップするよりも、今のうちにいろいろ試しておくと楽しいです。

技術スタック

Shopify Functions では既存の Shopify CLI でのアプリ作成のスタックに加えて、Rust が導入されました。Functions ロジックは Rust で記述し WebAssembly にコンパイルします。それにより優れたパフォーマンスを実現できます。

Shopify CLI *v3.0以降
- node.js
- react
Rust
- cargo-wasi

※ WebAssembly についての概要：

実際のコードを見てみよう

ボリュームディスカウント（まとめ買いで割引）を設定できる、サンプルコードとチュートリアルが用意されていますので、実際に Shopify 上で動かすところまで試してみました。
※ コードの詳しい中身はチュートリアルに記載がありますので、ここではサンプルコードをローカルで立ち上げる箇所だけを記述しました。

事前準備

Shopify CLI をインストールします。

> brew tap shopify/shopify
> brew install shopify-cli

Rust をインストールしていない場合、インストールします。

> curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
# パスを通します
> export PATH="$HOME/.cargo/bin:$PATH" >> .zshrc
> source .zshrc
# インストールできているか確認します
> rustc --version

cargo-wasi をインストールします。

> cargo install cargo-wasi
# インストールできているか確認します
> cargo wasi --version

Shopify の開発ストアを Checkout Extensibility プレビューモードで作成します。

開発ストアを新規作成時に選べる。作成済のストアではできない

サンプルコードをインストールして立ち上げる

サンプルコードから Shopify アプリを新規作成します。

> yarn create @shopify/app --template https://github.com/Shopify/function-examples/sample-apps/discounts-tutorial

アプリを作るパートナーアカウントとストアを選んで（事前準備で作った Checkout Extensibility プレビューモードの開発ストア）、名前を付けて新規作成すると、アプリ名のディレクトリに必要なコードがインストールされます。
Function は、extensions/Volume ディレクトリ内に作成されています。

Function をデプロイします。

> yarn deploy

デプロイすると、.env に SHOPIFY_VOLUME_ID が追加されるので、その値を web/frontend/pages/Volume/new.jsx 内の FUNCTION_ID に入れます。

const todaysDate = new Date();
const FUNCTION_ID = "01GM8264RD5FJFW*********"; // ここに

ローカルでアプリを立ち上げます。

> yarn dev

このとき、アプリを既存アプリに紐付けるか新規作成するか聞かれるので、既存アプリに紐付けるを選んで、1 で作成したアプリ名を選びます。
ターミナルに ngrok の URL が生成されるので、その URL をクリックしてアプリをインストールします。

開発ストアで確認する

ストアの「ディスカウント」から「ディスカウントを作成」を押すと、最下部に作成したアプリ名の項目が表示されます。そこから Volumeディスカウントを作成できます。

まとめ

Shopify Functions は、

アプリ開発者向けの新しい Shopify バックエンド拡張用 API のこと（ストアの管理画面から何かをつくれるものではなく、アプリの機能として提供するもの）
現時点では、ディスカウント用の API しか提供されていないが、今後それ以外の拡張を提供する予定があり、後続の情報に目が離せない。
Shopify CLI （v3.0 以降）で作成ができ、ロジックは Rust で書いて WebAssembly にコンパイルするため高速に動作する

ということがわかりました。

おわり

Shopify アプリ開発を行っていると、勝手にいろいろな新しい技術が身につくと常々思っているのですが、Rust と WebAssembly をやるなら今か・・・(・.・;)と思いました。
Shopify はめちゃめちゃ全然我々を飽きさせてくれないので、これからも楽しい開発ライフをおくりましょう〜。

おまけ

Women Developers Summit 2022 に、Shopifyのセッションで、Shopify Plus についてや、コマース業界でのキャリアについて、座談会形式でお話しをしました！記事になりましたので見てね。