【Shopify.dev和訳】Apps/Dev tools/AppBridge/Migrate fm LegacySDK
この記事について
この記事は、Migrate your app from legacy SDKs to Shopify App Bridgeの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
レガシー SDK から Shopify App Bridge にアプリをマイグレーションする | Migrate your app from legacy SDKs to Shopify App Bridge
Shopify には、Embedded App SDK (EASDK)とPOS App SDKという 2 つの非推奨のクライアントサイドアプリライブラリがあり、Shopify App Bridge と同様の機能を持っています。
Shopify App Bridge を直接使用する | Using Shopify App Bridge directly
Shopify App Bridge actions を直接使ってアプリをアップグレードすることを選択した場合、以下のようなメリットがあります。
-
モジュール式の JavaScript を含む、最新のフロントエンド開発ワークフロー
-
SemVer を使用した厳密なバージョニングにより、さらなる安定性と予測可能性が得られます。
将来的には、ほとんどの新機能はShopify App Bridgeにのみ追加され、EASDK では利用できなくなります。新しいアプリを構築する場合や、既存のアプリを大幅にアップグレードする場合は、Shopify App Bridge の使用にアップグレードすることをお勧めします。
EASDK アプリのマイグレーション | Migrating your EASDK app
まずはEmbedded App SDK (EASDK)のドキュメントから始めるのが良いでしょう。このドキュメントは対応する App Bridge のメソッドで更新されています。EASDK から Shopify App Bridge に既存のアプリをマイグレーションする際に、注意すべき点がいくつかあります。
非推奨の機能
Shopify.API.Modal.input
入力モーダルは Shopify App Bridge ではサポートされていません。
代わりに iFrame モーダルを使うことができます。
Shopify.API.Modal.setHeight
モーダルのサイズはApp Bridge で増分設定され、モーダルのコンテンツに自動的に合わせることができます。
モーダルの URL
モーダルは、アプリのオリジンの外からの URL を受け入れません。
別のドメインからのコンテンツを埋め込むには、iFrame モーダルを作成し、そこにコンテンツを埋め込みます。
3 次モーダルボタン
Shopify App Bridge では、ボタンのスタイリングを完全にコントロールできるため、プライマリおよびセカンダリのボタンですべてのユースケースをカバーできます。
アプリアイコン
ShopifyApp.Bar.setIcon または ShopifyApp.Bar.initialize を通じて icon パラメータを使ってアプリのアイコンを設定することは、廃止されました。
Partners Dashboard の App setup ページでアプリのアイコンを設定できるようになりました。
デバッグオプション付きの ShopifyApp.init
debugオプション付きのinitの呼び出しは、App Bridge ではサポートされていません。
代わりに Redux DevTools と開発版のライブラリを使用してデバッグすることをお勧めします。
ページネーション
ShopifyApp.Bar.initializeとShopifyApp.Bar.setPaginationを使ってタイトルバーにページネーションを追加することは、非推奨となりました。アプリの UI にページネーションを組み込むことをお勧めします。Polaris を使用している場合は、Polaris Page コンポーネントで提供されるページ処理コントロールを使用できます。
アプリのタイトルバーにページネーションを保持したい場合は、Shopify App Bridge を使用してタイトルバーにページネーションボタンを追加することができます。
Shopify App Bridge を使用して、タイトルバーにページネーションボタンを追加する場合。
import createApp from "@shopify/app-bridge"
import { TitleBar, Button } from "@shopify/app-bridge/actions"
const app = createApp({
apiKey: "12345",
host: "host from URL param",
})
const paginationPreviousButton = Button.create(app, { label: "←" })
paginationPreviousButton.subscribe(Button.Action.CLICK, function () {
// ページネーションで前に戻るときの処理
})
const paginationNextButton = Button.create(app, { label: "→" })
paginationNextButton.subscribe(Button.Action.CLICK, function () {
// ページネーションで次に進むときの処理
})
const titleBarOptions = {
buttons: {
secondary: [paginationPreviousButton, paginationNextButton](),
},
}
const myAppTitleBar = TitleBar.create(app, titleBarOptions)
Polaris Page コンポーネントのページネーションコントロールを使用する場合
Polaris Page コンポーネントについてはこちらをご覧ください。
import React, { useCallback } from "react"
import { Page } from "@shopify/polaris"
function myApp() {
const paginationPrevious = useCallback(() => {
// ページネーションで前に戻るときの処理
}, []())
const paginationNext = useCallback(() => {
// ページネーションで次に進むときの処理
}, []())
const paginationOptions = {
hasNext: true,
hasPrevious: true,
onNext: paginationNext,
onPrevious: paginationPrevious,
}
return (
<Page title="My App" pagination={paginationOptions}>
App
</Page>
)
}
protocol URL パラメータ
すべての組み込みアプリケーションは HTTPS を使用する必要があるため、protocolパラメータはもはや意味を持ちません。
フレームの URL を同期しておく
EASDK のinitialize機能は、Shopify の管理画面の URL を自動的に更新します。
Shopify App Bridge は、より幅広い用途に対応するように設計されているため、このような仮定をすることはできません。HistoryとRedirectアクションを使用したナビゲーションのみを認識しています。
アプリがナビゲーションにリンクやサーバーサイドのリダイレクトを使用している場合は、EASDK のinitializeメソッドを呼び出した場所（例えば、createApp()の後）でHistory.Action.REPLACEアクションをディスパッチすることで、URL を同期させることができます。
React のシングルページアプリを使用している場合は、Shopify App Bridge のRoute Propagator コンポーネントを利用できます。
モジュール化された JavaScript を使用した場合
import createApp from "@shopify/app-bridge"
import { History } from "@shopify/app-bridge/actions"
function initializeApp() {
const app = createApp({
apiKey: "API key from Shopify Partner Dashboard",
host: "host from URL param",
})
const history = History.create(app)
history.dispatch(History.Action.REPLACE, `${window.location.pathname}`)
return app
}
ES5 と CDN にホストされたライブラリを使用した場合
var AppBridge = window["app-bridge"]()
var createApp = AppBridge.default
var actions = AppBridge.actions
var History = actions.History
function initializeApp() {
var app = createApp({
apiKey: "API key from Shopify Partner Dashboard",
host: "host from URL param",
})
var history = History.create(app)
history.dispatch(History.Action.REPLACE, window.location.pathname)
return app
}
POS App SDK アプリのマイグレーション | Migrating your POS App SDK app
POS App SDK のドキュメントが更新され、対応する Shopify App Bridge のメソッドが追加されました。ここでは、既存のアプリを Shopify App Bridge にマイグレーションする際に注意すべき点をご紹介します。
カートの動作
すべてのカート関連の機能は、Shopify App Bridge のCartアクションセットによって処理されます。カートアクションをディスパッチするには 3 つのステップがあります。
-
Cartアクショングループのインスタンスを作成:
import { Cart } from "@shopify/app-bridge/actions"
var app = createApp({
apiKey: "12345",
host,
})
var cart = Cart.create(app)
- カート更新アクションを
subscribeすると、unsbscribe関数が返される:
var unsubscribe = cart.subscribe(Cart.Action.UPDATE, function (payload) {
console.log(payload)
})
- 目的のカートアクションをディスパッチします。アクションによっては、
Cartのメソッドを使ってアクションを構築する必要があります。
- 単純なカートアクションで、アクションタイプを
dispatchに渡す:
cart.dispatch(Cart.Action.FETCH)
- アクションコンストラクタのメソッドを使った、より複雑なカートアクション:
var customerPayload = { id: 123 }
cart.dispatch(Cart.setCustomer(customerPayload))
ユーザーデータと位置情報の取得
POS App SDK では、ユーザーと位置情報のデータは専用のメソッドを使って取得していました。Shopify App Bridge では、app.getState()を使用してこのデータにアクセスします。
import createApp from "@shopify/app-bridge"
var app = createApp({
apiKey: "API key from Shopify Partner Dashboard",
host: "host from URL param",
})
app.getState("pos").then(function (pos) {
console.log("POS location data:", pos.location)
console.log("POS user data:", pos.user)
})
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Discussion