iframeミニアプリケーション
ミニアプリケーションを作成する
- アドミンページで、メタフレームセクションに移動します。
- 「カスタムセクション」ブロックで、「新しいアプリを追加」をクリックします。
- ミニアプリケーションを作成後すぐにアクティブ化する場合は、「有効」トグルをアクティブ化に切り替えます。
お知らせ
アクティブ化されたミニアプリケーションの名前の横に緑色のインジケーターが表示され、非アクティブ化されたアプリケーションの横に黒いインジケーターが表示されます。
- ミニアプリケーションタイプとして「Iframe」を選択します。
- ミニアプリケーションの名前を入力します。チェックボックスを使用して、開いているミニアプリケーションのヘッダーに名前を表示するかどうかを選択できます。
- iframeに表示されるウェブサイトまたはウェブアプリケーションのURLを入力します。
- このミニアプリケーションのMetaframeメニューに表示されるアイコンをアップロードします。
注意
アップロードされたアイコンの要件:
画像フォーマット:SVG。
最大画像サイズ:12KB。
- ユーザーがログインする前または後にミニアプリケーションをメタフレームに表示するかどうかを選択します。
- 「アプリを作成」をクリックします。
作成したミニアプリケーションは編集または削除できます。
ミニアプリケーションの終了を構成する方法
ミニアプリケーションの作成時に「この名前をセクションヘッダーに表示する」ボックスをオンにすると、開いているiframeの上にその名前と閉じるアイコンが表示されます。
このボックスにチェックを入れない場合、iframeを閉じるロジックはミニアプリケーションに実装する必要があります。メタフレームウィジェットが閉じるイベントを正しく処理するには、@xsolla-metaframe/mini-app:close
タイプのpostMessage
を送信するスクリプトをミニアプリケーションコードに追加します:
Copy
- javascript
window.parent.postMessage(
{
type: '@xsolla-metaframe/mini-app:close',
payload: null,
},
'*',
);
ミニアプリケーションの高さを変更する方法
iframeの高さをミニアプリケーションの高さに一致させるには、高さを調整するためのロジックをミニアプリケーションに実装する必要があります。メタフレームウィジェットが高さ変更イベントを正しく処理するには、@xsolla-metaframe/mini-app:set-window-height
タイプのpostMessage
を送信するスクリプトをミニアプリケーションコードに追加します。また、ミニアプリケーションが高さが変更されるたびに自動的にメッセージを送信するときに、動的な高さ調整を構成することもできます。
注意:
- ミニアプリケーションのルート要素の高さは、親要素の高さに対するパーセンテージとして定義すべきではありません。この値を
max-content
、auto
、または固定高さ、例えばピクセル単位で指定することができます。 - ミニアプリケーションは、高さを調整する必要があるときはいつでもメッセージを送信する必要があります。
- 送信されるメッセージの数に制限はありません。
Copy
- javascript
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 });
この記事は役に立ちましたか?
ご意見ありがとうございました!
あなたのメッセージを確認し、体験を向上させるために利用させていただきます。誤字脱字などのテキストエラーを見つけましたか? テキストを選択し、Ctrl+Enterを押します。