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

埋め込みアプリはShopifyのエコシステムに不可欠なパートであり、そのおかげでマーチャントは慣れ親しんだShopify Adminを離れることなくストアに機能を追加することができます。

埋め込みアプリはShopifyのエコシステムに不可欠なパートであり、そのおかげでマーチャントは慣れ親しんだShopify Adminを離れることなくストアに機能を追加することができます。あなたはShopifyアプリ開発者として、マーチャントのビジネス成長に役立つ機能をアプリによって提供するというこの絶好の機会を間違いなく認識していることでしょう。

埋め込みアプリは小さな実験レベルから想像以上にパワフルな機能へと進化を続けてきました。当初、Shopifyパートナーは、埋め込みアプリ開発キット（EASDK）とPOS開発キット（POSSDK）というツールを使って埋め込みアプリの開発をしていました。しかしアプリエコシステムが発展するにつれ、これらのツールでは開発者のニーズを満たせなくなってきました。

そこで、わたしたちはShopify Unite 2019において、すべてのShopifyプラットフォームで使える埋め込みアプリのための統合開発ツールを紹介しました。それがShopify App Bridgeです。

Shopify App Bridgeにより、開発者はマーチャントがadminで操作するあらゆる場所にアプリを埋め込むことができます。Shopify App Bridgeで書かれた単一のフロントエンドによって、POS、デスクトップ、そしてモバイル体験を強化できます。Shopify App Bridgeで構築されたアプリはパフォーマンスと柔軟性が高く、機能も多く、ほかのShopifyアプリでは不可能な方法でハードウェアを活用できます。今回の記事では、Shopify App Bridgeを利用することで得られる機会を最大化する方法を見ていきます。

目次

・パフォーマンスと柔軟性

・アクションとアクションセット

・ハードウェア

・変更のマネジメント

パフォーマンスと柔軟性

Shopify App Bridgeが登場するまで、Shopify POSとadminの両方で使用できるアプリは、個別のクライアントサイドのライブラリを使う必要がありました。1つはShopify POS用で、もう1つはWebのadminの埋め込み用です。Shopify App Bridgeはこの要件を1種類のライブラリのみに変え、統合されたマーチャントのエクスペリエンスと合理化された開発フローを可能にしました。

Shopify App Bridgeは一貫性と開発の効率性を向上させただけではなく、EASDKやPOSSDKで構築されたアプリの場合と比べて4倍速い読み込み時間を実現しています。

モバイルにおけるShopify App Bridgeの読み込み時間とEASDKの読み込み時間の比較

アクションとアクションセット

アクションは、Shopify App Bridgeを使ってShopifyとやり取りする際の新しい方法です。アクションを使用することで、多様なShopifyのUI要素をコントロールできます。トップバー、読み込み表示、モーダル、リソースピッカー、ボタンなどが使えるので、アプリ体験はネイティブなShopifyのように感じられます。ポップアップメッセージを表示したり、前後関係に合わせて保存バーをアクティベートしたり、アクションはコンテキストに沿って動作させることが可能です。

アクションは、アクションセットと連携することでさらに威力を発揮します。アクションセットは持続的なアクションの組み合わせで、いつでも実行や通知ができます。アクションセットを作成すると、その設定はShopifyとアプリの間で共有され、一貫します。それぞれのサイドで、個々のアクションセットのステートを認識しているので、モーダルがオープンなのか、タイトルバーの中にあるのは何か、といったことが共有されます。

すべてのアクションセットは、APIのシンプルさと一貫性を保つために同じインターフェイを使用します。それが、create、set、subscribe、dispatchです。

・create：アクションセットを初期化するために使用。場合によってオプションがある。

・set：可能な場合にアクションセットの設定をアップデートする。例：タイトルバーのタイトルを更新。

・subscribe：モーダルのクローズ時など、ShopifyのUIにおけるイベントを通知。

・dispatch：Shopifyにアクションを送り、機能をアクティベートする。

いくつかの例外を除き、アクションセットを作成すると共有ステート内部の設定がストアされ、それ自体ではあまり効果がありません。アクションセットはアクションを準備して処理できるようにします。

アクション

アクションタイプは、アクションセットが利用できるアクションを静的に定義したものです。これらはアプリとShopifyの間で交わされれる個別のメッセージで、タスクの処理やイベントの通知をおこなうためのものです。例としてトーストメッセージ（ポップアップメッセージ）を挙げると、このアクションセットはToastであり、ここで可能なアクションはSHOWとCLEARになります。同様に、Loadingのアクションセットで可能なアクションはSTARTとSTOPです。これらはShopify App Bridgeで利用可能なアクションセットの2つの例に過ぎません。Shopify App Bridgeの成長にともない、新機能のためのアクションセットがもっと追加されていきます。

ポップアップを表示するためのアクションタイプの使用

アクションセットが作成されると、そこに含まれるアクションが実行できるようになります。また、Shopifyで実行されたアクションの通知が受けられます。たとえば、マーチャントがShopify Adminでモーダルを閉じると、ShopifyはCLOSEアクションを実行し、アプリがその通知を受け取ります。また、アクション実行後のコールバック処理をアプリが提供することもできます。

シンプルで一貫性のあるAPI（create、set、subscribe、dispatch）と静的に定義されたアクションを組み合わせ、Shopify App Bridgeはきめ細かで最小限で済むコントロールを提供します。これにより、Shopify App Bridgeの拡張性も高まります。また、アクションを使用することで、特定のビジュアルデザインに結びついたメソッドから解放され、機能性によってグループ化された構成的なブロックが使用できるようになります。

アクションセットはつねにステートに透明性をもたらすため、Redux DevToolsなどを使用してアプリの現状ステートを検証することができ、デバッグのために過去のアクションをリプレイすることさえ可能です。

Redux DevToolsによるデバッグ

こちらも参考にしてください：Shopify App CLI：アプリ開発を高速化するツール

ハードウェア

Shopify App Bridgeは、スキャナーアクションを使用して、カメラやNFCリーダーなどの強力なデバイスハードウェア機能にアクセスすることができます。アプリはデバイスの種類を確認する機能検出を使用することができ、モバイルデバイスのハードウェアに対して可能なアクセス権をリクエストします。アクセスが承認されると、機能検出によってアプリはハードウェアの利用が可能かどうかとスキャンを開始できるかどうかを知ることができます。

変化のマネージメント

今日のテクノロジーの進歩はとても早く、変化についていくのは一仕事です。Shopify App Bridgeは、ライブラリのセマンティックなバージョニングにより、安定性と新機能の迅速な提供という二面性のバランスをとっています。そのため、適応サイクルを完全にコントロールできます。

 

埋め込みアプリ開発のための統合ツール

Shopify App Bridgeは、埋め込みアプリの素早い開発を可能にし、マーチャントのために統合的で機能性の高いプロダクトを作成する機会を広げます。この機会を今日から活用してください。

Shopify App Bridgeの改良アップデートについて最新情報を得るには、開発者チェンジログをご購読ください。

原文：Hanna Chen 翻訳：深津望