Shopify埋め込みアプリの三種の神器：Polaris、App Bridge、App extensionsを使いこなそう！

マーチャントに様々な機能を提供できるShopifyアプリの中でも、管理画面に埋め込める埋め込みアプリはマーチャントにたくさんの価値を与えられるものとして重宝されます。この記事では、その埋め込みアプリ開発に欠かせない、Polaris、App Bridge、App extensionsについてその基礎的な内容をご紹介したいと思います。

1.  Polarisとは？

Polarisとは、マーチャントに最高のUXを提供するためのUIコンポーネント、およびそのドキュメント群の総称です。Shopifyアプリを作る人にとって最大のメリットは、Shopify自体がPolarisを使って管理画面の構築をしているので、アプリパートナーが開発する管理画面向け埋め込みアプリもShopify標準の画面のように提供できることです。これにより、普段Shopifyの管理画面に慣れ親しんだマーチャントに抵抗なく利用してもらうことができます。また、Polarisのコンポーネントは、非常に洗練された部品として設計されているため、あまり時間をかけず美しく使いやすいUXをデザインすることができます。

 PolarisのData tables コンポーネントのサンプル

Shopifyの管理画面のレポート画面の一部分

Polarisのもう１つの特徴は１つのコードでWeb、Android、iOSの３つの環境に対応したUIを提供できるレスポンシブルデザインになっていることです。Shopifyの埋め込みアプリは、Webだけでなく、ShopifyのPOSアプリにも提供可能なため、モバイルブラウザ対応だけでなく、ネイティブアプリのように見せる工夫もされています。

PolarisのDescription listコンポーネントのWebでの表示例

同じコンポーネントのiOSでの表示例

そんな特徴を持つPolarisですが、そのシステムとしての実体は、スタイルシートのライブラリであり、その提供方法は２種類あります。１つは、React、もう一つはHTMLです。各コンポーネントには、それぞれの方法のコピーアンドペースト可能なコードが提供されているので、詳しいことを理解する前にまず試してみることができます。次にそれぞれのPolarisの実装方法についてみてみましょう。

Reactを使った実装方法

Reactを使いたい場合は、Getting startedからリンクされているGithubの記述にそって、PolarisのReactモジュールをインストールすることで利用可能となります。あとは、使いたいコンポーネントのコードを貼り付ければその描画が出来ます。

PolarisのData tableコンポーネントのReactコード

 HTMLを使った実装方法

HTMLとして使いたい場合は、同じくGetting startedからリンクされているGithubの記述にそって、CDNとして提供されているCSSファイルを読み込むことで利用可能となります（CSSはコード内のclassによって適用されます）。あとは、同じく使いたいコンポーネントのコードを貼り付ければその描画が出来ます。

同じくData tableコンポーネントのHTMLコード

この２つの実装方法の差異についてですが、Reactを使ったことがない人にとってはHTMLの方が取り掛かりやすいと思いますが、Reactを使うことで後述のApp Brideとの統合がしやすくなるので、Reactを触ったことがない人もShopifyアプリの開発を機会にぜひ取り組んでみていただけたらと思います。

また、Polarisは前述のとおり、単なる部品のライブラリだけを指すのではなく、デザインのコンセプトやTIPSをまとめたドキュメントライブラリでもあります。最も頻繁に参照するのは、Componentsかと思いますが、ぜひその他のメニュー（Experiencesなど）も参照してみてください。

2. App Bridgeとは？

Polarisがマーチャント向けのUI部品の集まりであるとしたら、App Bridgeは、マーチャント向けの機能（動作）部品の集まりと言えます。Polaris同様、Shopify自体もその管理画面の機能に使っているので、Shopifyの標準の機能と同様の動作を簡単に組み込むことができます。以下は、Shopifyの管理画面の機能で、App Bridgeを使って提供できるもののいくつかの例です。

OAuthの認証

アプリのパンくずリスト（TitleBar）

ポップアップメッセージ（Toast）

商品選択用ポップアップ画面（ResourcePicker）

 このような拡張ポイントはアクションと呼ばれ、開発者向けページを参照することで、どのような種類があるか確認できます。

Polaris同様、App BridgeもShopifyのPOSアプリ用のアクションが用意されており、POS用埋め込みアプリの開発にも対応しています。

このようなApp Brideの特徴を把握する一番良い方法は、その実装方法を確認することかと思います。Polarisのシステムとしての実体はスタイルシートのライブラリとご説明しましたが、App Bridgeの実体は、JavaScriptのライブラリです。そして、Polaris同様、その実装方法にReactを使うことができます。

Reactを使った実装方法

Reactを使いたい場合は、Getting startedにあるモジュールのインストールを行い、Reactコンポーネントを参照しながら実装します。

TitleBarのReactでの実装例

Reactを使わず実装する場合

モジュール（importを使う方法）を利用する場合は、React同様、Getting startedにあるモジュールのインストールを行います。モジュールを使わず、App BridgeをCDNから直接呼び出しES5（ECMAScript 5）として記述したい場合（フロントのHTML内で完結させたい場合）は、上記のGetting startedに記載されているCDNのファイルを直接貼り付けます。

モジュールを使った例

ES5とCDNを使った例

前述のようにPolarisがReactを使っているので、App BridgeでもReactを使うことで統合された見通しの良いコードを書くことができます。ただし、Reactが何らかの理由で使えず、PolarisをHTMLで記述している場合でも、App BridgeもHTML内で完結したJavaScriptとして利用することが可能です。

こちらの記事も参考にしてください：

Shopify App Bridgeを使用して高速で機能的なアプリを作成する

埋め込みアプリの読み込みをすばやく確実におこなう方法

3. App extensionsとは？

三種の神器の最後は、App extensionsです。App extensionsは、マーチャントが日々触れるShopifyの管理画面の様々なメニュー（商品詳細や注文詳細など）に、アプリの画面を表示させることができる拡張ポイントです。商品や注文といったデータごとに操作が必要なアプリの場合、都度マーチャントをアプリのトップ画面に戻すことなく、対象となるデータの画面から直接アプリをデータと共に起動することができます。

App extensionsは、アプリの拡張機能の設定から対象となるメニューと呼び出されるアプリのURLを指定することで利用できます。

アプリの拡張機能の設定画面 

上記の設定で実際に表示されるメニュー

App extensions独自のSDKやライブラリはありませんが、実装には前述のApp Bridgeを使う必要があります。例えば、メニューをクリックしてアプリの画面を表示する場合は、App BridgeのModalアクションを経由して読み込まなければいけません。

App extensionsは、PolarisやApp Bridgeに比べてあまり多く取り上げられることはないですが、上手に使うとアプリの利便性を大きく高めるものですので、ぜひ活用いただければと思います。

こちらの記事も参考にしてください：

ShopifyサブスクリプションAPIについて：Shopifyチェックアウトと統合できるアプリの構築

最後に

マーチャント向けのShopify埋め込みアプリの三種の神器、Polaris、App Bridge、App extensionsの説明はいかがでしたでしょうか？

これら３つは埋め込みアプリに必ず必要なものではありませんし、現にこれらを使っていない埋め込みアプリも多数存在します。 しかし、Polarisの洗練されたUIを、App Bridgeで管理画面にシームレスに溶け込ませて、それをApp extensionsによって最適な場所に投じることが、アプリストアでレビューの高い、たくさんのインストールを生む利便性の高いアプリの開発に繋がることは確かです。

なお、このブログでご紹介したPolarisやApp Bridgeは、公式チュートリアルアプリで実際に手を動かしながら確認できますので、ぜひお試しください。