メタフレームのメソッドとイベントを探る

window.metaframeオブジェクト

スクリプトがロードされると、metaframeオブジェクトは、アプリケーションのグローバルなwindowオブジェクトで利用できるようになります。メタフレームオブジェクトには、ウェブアプリケーションでメタフレームを管理するのに必要なメソッドのリストが含まれています。

window.metaframe.createメソッド

メソッド署名：

 1window.metaframe.create: (parameters: {
 2 loginProjectId: string,
 3 merchantId?: number,
 4 projectId?: number,
 5 orbsApiHostId?: string,
 6 isMobile?: boolean,
 7 isCollapsed?: boolean,
 8 layoutSettings?: {
 9     desktop: {
10       widgetMarginTop?: number,
11     },
12     mobile: {
13       widgetMarginTop?: number,
14     },
15   },
16}) => void;

ウェブアプリケーションでメタフレームを初期化します。

window.metaframe.setIsMobileメソッド

メソッド署名：

1window.metaframe.setIsMobile(isMobile: boolean)

メタフレームをデスクトップ版からモバイル版に、またはその逆に切り替えます。

window.metaframe.partnerActionsオブジェクト

オブジェクトにはメタフレームでアクションをトリガーするメソッドが含まれます。

このオブジェクトのメソッドを使用する前に、メタフレームが完全にロードされていることを確認する必要があります。これを行うには、メタフレームのロードイベントをサブスクリプします。イベントが処理されると、このオブジェクトのメソッドが使用可能になります。

メタフレームのロードイベントにリスナーを設定する例：

1window.addEventListener("@metaframe-partner-events:app-loaded", () => {
2
3 //Here you can use partner actions
4
5});

window.metaframe.partnerActions.openBackpackItemPageメソッド

メソッド署名：

1openBackpackItemPage: (itemId: string) => void;

Backpackセクションで指定したアイテムのページを開きます。

このメソッドが正しく機能するためには、次の条件を満たす必要があります：

• パブリッシャーアカウントで「バックパック」機能が有効になっています。
• ユーザーはメタフレームに認証されます。

window.metaframe.partnerActions.openLoginメソッド

メソッド署名：

1openLogin: () => void;

ユーザー認証フォームを開きます。ユーザーが既に認証されている場合は、ブラウザコンソールにエラーが表示されます。

window.metaframe.partnerActions.openProfileメソッド

メソッド署名：

1openProfile: () => void;

現在のユーザーのProfileセクションを開きます。ユーザーが認証されていない場合は、ブラウザコンソールにエラーが表示されます。

window.metaframe.partnerActions.openWalletメソッド

メソッド署名：

1openWallet: () => void;

現在のユーザーのWalletセクションを開きます。ユーザーが認証されていない場合は、ブラウザコンソールにエラーが表示されます。

window.metaframe.partnerActions.openBackpackメソッド

メソッド署名：

1openBackpack: () => void;

現在のユーザーのBackpackセクションを開きます。ユーザーが認証されていない場合は、ブラウザコンソールにエラーが表示されます。

window.metaframe.partnerActions.openCustomMiniAppメソッド

メソッド署名：

1openCustomMiniApp: (params: {miniAppName: string}) => void;

以下のいずれかの条件を満たす場合、指定されたカスタムセクションをiframeタイプで開きます：

• 指定したカスタムセクションの設定でユーザーログイン前にこのアプリを表示するトグルが有効で、現在のユーザーが認証されていない場合。
• 指定したカスタムセクションの設定でユーザーログイン後にこのアプリを表示するトグルが有効で、現在のユーザーが認証された場合。

条件が満たされない場合は、ブラウザコンソールにエラーが表示されます。

window.Metaframe.partnerActions.pushNotificationメソッド

メソッド署名：

1pushNotification: (params: {
2  type: string; // use “success”, “warning”, “error” or “info”
3  text: string;
4  button?: {
5    text: string;
6    onClick: () => void;
7  };
8  durationInMs?: number;
9}) => void;

新しい通知を通知スタックにプッシュします。

window.metaframe.partnerActions.setIsCustomMiniAppVisibleメソッド

メソッド署名：

1setIsCustomMiniAppVisible: (params: {
2  miniAppName: string;
3  isVisible: boolean;
4}) => void;

指定したカスタムセクションを表示または非表示にします。

ウィジェットイベント

次のメタフレームイベントをサブスクライブできます：

カスタムセクションのイベントの追跡

メタフレームには、アクションタイプのカスタムセクションを追加できます。このセクションは、クリックするとウェブサイトを開くなどのアクションを実行するボタンとして表示されます。

カスタムセクションをクリックしたイベントを追跡するには、@metaframe:custom-action:<ACTION_ID>イベントを登録する必要があります。<ACTION_ID>はカスタムセクション設定時にパブリッシャーアカウントで生成されたアクションIDです。

カスタムセクションクリックイベントのリスナーを設定する例：

1document.addEventListener("@metaframe:custom-action:00000000-0000-0000-0000-000000000000", () => {
2
3 // Your code here...
4
5})