【Shopify.dev和訳】Apps/Dev tools/App Bridge/Migrating to 2.0
この記事について
この記事は、Migrate your app from Shopify App Bridge 1.x to Shopify App Bridge 2.0の記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Shopify App Bridge 1.x から Shopify App Bridge 2.0 にアプリをバージョンアップする | Migrate your app from Shopify App Bridge 1.x to Shopify App Bridge 2.0
Shopify App Bridge 1.x から App Bridge 2.0 に移行することで、アプリのパフォーマンスや柔軟性が向上し、最新の機能を利用できるようになります。
App Bridge 2.0 には、アクションのための合理的なインターフェースと、ツリーシェイクのための改良されたアーキテクチャが含まれています。
必要事項 | Requirements
- 本記事は、アプリが App Bridge 1.x 上で動作している方向けの記事です。
host パラメータを使用するようにアプリを変更する | Modify your app to use the host parameter
App Bridge 2.0 では、新たにhostという名前のクエリパラメータが導入されました。
base64 エンコードされたhostパラメータは、組み込みアプリをホストしている現在のドメインを表します。
Shopify の管理画面 | In the Shopify admin
Shopify admin は、埋め込みアプリを読み込む際に、アプリの URL の一部としてhostパラメータを提供します。
https://example.org/?hmac={hmac}&host={base64_encoded_hostname}&session={session}&shop={shop_origin}×tamp=1409617544
OAuth フローの後 | After the OAuth flow
hostクエリパラメータは、指定された許可リストのリダイレクト URL へのGETリクエストの一部として、アプリでも利用できます。hostの詳細については、Shop originを参照してください。
https://example.org/some/redirect/uri?code={authorization_code}&hmac=da9d83c171400a41f8db91a950508985&host={base64_encoded_hostname}&shop={shop_origin}&state={nonce}×tamp=1409617544
更新されたcreateAppメソッドを使用するために、hostパラメータを保存する必要があります。
const app = createApp({
apiKey: apiKey,
host: host,
})
ActionType から Action enum への変更 Modify your app to use the Action enum instead of ActionType
ライブラリの合理化とインターフェースの簡素化のために、App Bridge のアクションから列挙型（enum）のActionTypeが削除されました。
現在は、列挙型（enum）のActionのみが使用されています。
このアップデートによりコードを変更する必要がある場合は、下記のようにアクションのサブスクリプションで変更します。
例 | Examples
// Right
app.subscribe(Error.Action.INVALID_ACTION, (data) => {})
app.subscribe(Loading.Action.START, () => {})
app.subscribe(History.Action.REPLACE, (payload: History.Payload) => {})
// Wrong
app.subscribe(Error.ActionType.INVALID_ACTION, (data) => {})
app.subscribe(Loading.ActionType.START, () => {})
app.subscribe(History.ActionType.REPLACE, (payload: History.Payload) => {})
非推奨のヘルパーやタイプを削除 | Remove any helpers and types previously marked deprecated
下記ののヘルパーメソッドおよび型定義は、App Bridge 1.0 では非推奨とされています。
App Bridge 2.0 では、これらは完全に削除されています。
-
HandlerData型定義 -
getShopOriginヘルパーメソッド -
getUrlParamsヘルパーメソッド
上記のヘルパーメソッドや型定義をインポートして使用しているコードでは、独自のバージョンを作成する必要があります。
次のステップ | Next steps
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Discussion