iframeミニアプリケーション

ミニアプリケーションを作成する

  1. アドミンページで、メタフレームセクションに移動します。
  2. カスタムセクション」ブロックで、「新しいアプリを追加」をクリックします。
  1. ミニアプリケーションを作成後すぐにアクティブ化する場合は、「有効」トグルをアクティブ化に切り替えます。
お知らせ
アクティブ化されたミニアプリケーションの名前の横に緑色のインジケーターが表示され、非アクティブ化されたアプリケーションの横に黒いインジケーターが表示されます。
  1. ミニアプリケーションタイプとして「Iframe」を選択します。
  2. ミニアプリケーションの名前を入力します。チェックボックスを使用して、開いているミニアプリケーションのヘッダーに名前を表示するかどうかを選択できます。
  3. iframeに表示されるウェブサイトまたはウェブアプリケーションのURLを入力します。
  4. このミニアプリケーションのMetaframeメニューに表示されるアイコンをアップロードします。
注意

アップロードされたアイコンの要件:

  • 画像フォーマット:SVG。

  • 最大画像サイズ:12KB。

  1. ユーザーがログインする前または後にミニアプリケーションをメタフレームに表示するかどうかを選択します。
  2. アプリを作成」をクリックします。

作成したミニアプリケーションは編集または削除できます。

ミニアプリケーションの終了を構成する方法

ミニアプリケーションの作成時に「この名前をセクションヘッダーに表示する」ボックスをオンにすると、開いているiframeの上にその名前と閉じるアイコンが表示されます。

このボックスにチェックを入れない場合、iframeを閉じるロジックはミニアプリケーションに実装する必要があります。メタフレームウィジェットが閉じるイベントを正しく処理するには、@xsolla-metaframe/mini-app:closeタイプのpostMessageを送信するスクリプトをミニアプリケーションコードに追加します:

Copy
Full screen
Small screen
window.parent.postMessage(
  {
    type: '@xsolla-metaframe/mini-app:close',
    payload: null,
  },
  '*',
);

ミニアプリケーションの高さを変更する方法

iframeの高さをミニアプリケーションの高さに一致させるには、高さを調整するためのロジックをミニアプリケーションに実装する必要があります。メタフレームウィジェットが高さ変更イベントを正しく処理するには、@xsolla-metaframe/mini-app:set-window-heightタイプのpostMessageを送信するスクリプトをミニアプリケーションコードに追加します。また、ミニアプリケーションが高さが変更されるたびに自動的にメッセージを送信するときに、動的な高さ調整を構成することもできます。

注意:

  • ミニアプリケーションのルート要素の高さは、親要素の高さに対するパーセンテージとして定義すべきではありません。この値をmax-contentauto、または固定高さ、例えばピクセル単位で指定することができます。
  • ミニアプリケーションは、高さを調整する必要があるときはいつでもメッセージを送信する必要があります。
  • 送信されるメッセージの数に制限はありません。
動的なiframeの高さ調整の実装例:
Copy
Full screen
Small screen
const setMiniAppWindowHeight = (heightInPixels: number) => {
  window.parent.postMessage(
    {
      type: '@xsolla-metaframe/mini-app:set-window-height',
      payload: {
        heightInPixels: heightInPixels,
      },
    },
    '*',
  );
};

const handleResize = () => {
  setMiniAppWindowHeight(document.body.clientHeight);
};

handleResize();

const observer = new MutationObserver(handleResize);
observer.observe(document.body, { childList: true, subtree: true });
この記事は役に立ちましたか?
ありがとうございます!
改善できることはありますか? メッセージ
申し訳ありません
この記事が参考にならなかった理由を説明してください。 メッセージ
ご意見ありがとうございました!
あなたのメッセージを確認し、体験を向上させるために利用させていただきます。
最終更新日: 2025年1月30日

誤字脱字などのテキストエラーを見つけましたか? テキストを選択し、Ctrl+Enterを押します。

問題を報告する
当社は常にコンテンツを見直しています。お客様のご意見は改善に役立ちます。
フォローアップ用のメールをご提供してください
ご意見ありがとうございました!