🌉

【Shopify.dev和訳】Apps/Dev Tools/App Bridge/Methods

2021/09/05に公開約6,400字

この記事について

この記事は、App Bridge/Methodsの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定|リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

メソッド

初期化メソッド

createApp(config)

appオブジェクトを返します。アプリのインスタンスを初期化するために使用します。

config オブジェクトには、以下のキーが必要です。

キー タイプ 説明
apiKey string Partners Dashboard でアプリケーションに提供された API キーです。
host string Shopify ショップのオリジン/ドメイン。これは、セッションに保存されます。これは Shopify API から返されるもので、異なるマーチャント/ショップごとに動的に設定する必要があります。形式は "example.myshopify.com "に似ています。
javascript
import createApp from "@shopify/app-bridge"
const app = createApp({
  apiKey: "API key from Shopify Partner Dashboard",
  host: host,
})
CDN-hosted
var AppBridge = window["app-bridge"]
var createApp = AppBridge.createApp
const app = createApp({
  apiKey: "API key from Shopify Partner Dashboard",
  host: host,
})

アプリオブジェクトのメソッド

app.dispatch(action)

アクションを Shopify App Bridge にディスパッチします。ホスト(Shopify Admin や Shopify Mobile など)は、これらのディスパッチを聞くためにアクションをサブスクライブすることができます。

キー タイプ 説明
action Action Shopify App Bridge に含まれるアクションの一つ。
app.dispatch(
  Redirect.toRemote({
    url: "http://example.com",
  })
)

app.error(callback)

アクションに起因するものも含め、すべてのエラーを購読します。すべてのエラーの購読を解除するために使用できるメソッドを返します。

キー タイプ 説明
callback function エラーが発生したときに実行したい関数です。
const unsubscribeFromErrors = app.error((data) => { )
const {...
type, // エラーの種類
action, // オリジナルのアクションとその id
message, // エラーを修正するための追加のヒント
} = data;

// すべてのエラーをここで処理します

スイッチ(タイプ) {
case Error.Action.INVALID_PAYLOAD:
// エラーに対して何かを行う
ブレークします。
}
});

// すべてのエラーから配信停止する
unsubscribeFromErrors();

app.getState()

Promise を返します。解決すると、現在ログインしているスタッフメンバーを含む、アプリの現在の状態に関する情報が返されます。

app.getState().then((data) => {)
const {.
appInfo,
ローディング
モーダル
ナビゲーション。
pos,
resourcePicker,
staffMember,
タイトルバー。
トースト
} = data;
});

app.subscribe(callback, id?)

すべてのアクションを購読します。購読解除に使用できるメソッドを返します。

引数は

キー タイプ 説明
callback function アクションがディスパッチされたときに実行させたい関数です。
id int サブスクライブする特定のアクションセットインスタンスの ID(オプション)。
const unsubscribeFromAll = app.subscribe((data) => {})
// すべてのアクションをここで処理します
console.log(data);
});

// すべてのアクションから登録を解除する
unsubscribeFromAll()です。

app.subscribe(eventNameSpace, callback, id?)

eventNameSpace または id が指定された場合、このメソッドは指定されたタイプのアクションを購読します。

引数を指定します。

キー タイプ 説明
eventNameSpace string 特定のタイプのアクションのみをサブスクライブするためにこれを含める:例えば、Modal.Action.OPEN. (オプション)
callback function アクションがディスパッチされたときに実行したい関数です。
id int サブスクライブする特定のアクションセットインスタンスの ID(オプション)。
const unsubscribeModalOpen = app.subscribe(Modal.Action.OPEN, (data) => {...
// Modal のオープンアクションがディスパッチされるたびに何かを行う
});

// Modal のオープンアクションの配信を停止する
unsubscribeModalOpen()

プラットフォームメソッド

app-bridge-utils packageで利用可能な以下のユーティリティーメソッドは、組み込みアプリがどのプラットフォームで実行されているかに応じて true または false を返します。

  • isShopifyMobile: isShopifyMobile: アプリが Shopify Mobile 上で動作している場合、true を返します。
  • isShopifyPOS: アプリが Shopify POS 上で動作している場合、true を返します。
  • isShopifyPing: アプリが Shopify Ping 上で動作している場合、true を返します。
  • isMobile: 上記の条件のいずれかが真であれば真を返します。
import { isMobile } from "@shopify/app-bridge-utils"

if (isMobile()) {
  // アプリがモバイルで動作している
} else {
  // アプリはデスクトップのウェブブラウザーで実行されています
}

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定|リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Discussion

ログインするとコメントできます