Metaframeのメソッドとイベントを探る

window.metaframeオブジェクト

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

window.metaframe.createメソッド

メソッド署名：

window.metaframe.create: (parameters: {
 loginProjectId: string,
 merchantId?: number,
 projectId?: number,
 orbsApiHostId?: string,
 isMobile?: boolean,
 isCollapsed?: boolean,
 layoutSettings?: {
     desktop: {
       widgetMarginTop?: number,
     },
     mobile: {
       widgetMarginTop?: number,
     },
   },
}) => void;

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

window.metaframe.setIsMobileメソッド

メソッド署名：

window.metaframe.setIsMobile(isMobile: boolean)

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

window.metaframe.partnerActionsオブジェクト

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

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

Metaframeのロードイベントにリスナーを設定する例：

window.addEventListener("@metaframe-partner-events:app-loaded", () => {

 //Here you can use partner actions

});

window.metaframe.partnerActions.openBackpackItemPageメソッド

メソッド署名：

openBackpackItemPage: (itemId: string) => void;

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

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

• アドミンページで「バックパック」機能が有効になっています。
• ユーザーはMetaframeに認証されます。

window.metaframe.partnerActions.openLoginメソッド

メソッド署名：

openLogin: () => void;

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

window.metaframe.partnerActions.openProfileメソッド

メソッド署名：

openProfile: () => void;

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

window.metaframe.partnerActions.openWalletメソッド

メソッド署名：

openWallet: () => void;

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

window.metaframe.partnerActions.openBackpackメソッド

メソッド署名：

openBackpack: () => void;

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

window.metaframe.partnerActions.openCustomMiniAppメソッド

メソッド署名：

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

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

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

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

window.metaframe.partnerActions.pushNotificationメソッド

メソッド署名：

pushNotification: (params: {
  type: string; // use “success”, “warning”, “error” or “info”
  text: string;
  button?: {
    text: string;
    onClick: () => void;
  };
  durationInMs?: number;
}) => void;

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

window.metaframe.partnerActions.setIsCustomMiniAppVisibleメソッド

メソッド署名：

setIsCustomMiniAppVisible: (params: {
  miniAppName: string;
  isVisible: boolean;
}) => void;

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

ウィジェットイベント

次のMetaframeイベントをサブスクライブできます：

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

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

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

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

document.addEventListener("@metaframe:custom-action:00000000-0000-0000-0000-000000000000", () => {

 // Your code here...

})