小型部品の表面
Reactコンポーネントは、iframeをレンダリングし、サイズを設定し、必要に応じてイベントハンドラーを管理するだけで済みます。
Reactゲームウィジェット
ブラウザゲーム用のReactゲームウィジェット
React チームは、プレイ可能なウィジェットを追加するためにゲームをゼロから構築する必要はありません。React コンポーネント内に Games I Know iframe をレンダリングし、フレーム URL を渡して、親アプリがゲームの状態を必要とするときに postMessage イベントをリッスンします。
iframeコンポーネント
Reactメッセージリスナー
レスポンシブなラッパー
署名済みの完了サポート
簡潔な答え
フレームルートを使用し、ページコンテキストを追加します。
Reactでは、/embed/{gameSlug}/frame/ 用に小さな iframe コンポーネントを作成し、tenantId を URL パラメータとして渡し、Games I Know イベントのメッセージリスナーをアタッチします。
React対応のゲームウィジェットをお試しください
このデモでは、iframe と、React アプリが購読できる親ページイベントを示します。
React開発者がゲームembedを追加しています
Reactチームがiframeウィジェットを使用する理由
iframe は、イベントベースの統合を可能にしながらも、ゲームランタイムをアプリから分離します。
ゲームエンジンバンドルなし
このゲームは、ボードロジック、アセット、リアルタイムコードなどを追加して、Reactアプリケーションのバンドルサイズを増やすことはありません。
明確な統合境界
親アプリは、ゲームの内部構造に直接依存することなく、イベントに反応することができます。
セットアップフロー
Reactでゲームウィジェットを作成する方法
iframe をコンポーネントでラップし、必要に応じてフレーム URL をメモ化し、アンマウント時にメッセージリスナーをクリーンアップします。
ステップ 1
GameWidgetコンポーネントを作成します
幅100%、高さ固定、allow="fullscreen"、およびGames I KnowフレームURLを指定してiframeをレンダリングします。
ステップ 2
テナント構成を渡します
ダッシュボードのデータが整理されるように、テナントIDとオプションのキャンペーンIDを使用してsrcを構築してください。
ステップ 3
使用効果を聞く
window.addEventListener("message", handler) をアタッチし、data.source が gamesiknow であるメッセージをフィルタリングします。
ステップ 4
報酬を受け取る前に確認する
Reactアプリが報酬をアンロックする場合は、何かを付与する前にバックエンドを呼び出し、署名済みの結果を検証してください。
実装
Reactの実装に関する注意事項
iframe コンポーネントはシンプルなままにしておきましょう。ほとんどのバグは、サイズ設定の不安定さ、リスナーの重複、またはブラウザのメッセージを過信することから発生します。
安定した鍵を使用する
親レンダリングのたびに iframe を再マウントしないでください。ゲームまたはテナントの設定が変更されない限り、ソースを安定させてください。
リスナーを整理する
useEffectからクリーンアップ関数を返すことで、React開発モードで重複したイベントハンドラが残らないようにします。
UIと検証を分離する
Reactは結果を素早く表示できますが、賞品やクレジットの決定はサーバー側で行うべきです。
利用可能なゲーム
ページに合ったゲームを選択してください
Tic Tac Toe
Embed for same-screen play on your site, or send players to Games I Know to challenge a friend remotely with a room link.
Embed セットアップ
Four in a Row
Embed for local two-player drops on one screen, or link friends to play Four in a Row online from anywhere.
Embed セットアップ
Bingo
Same-screen Bingo in your embed, or host a remote room so players can join from their own devices.
Embed セットアップ
I Know
Quick trivia in your embed on one screen, or run a live room so friends can answer from anywhere.
Embed セットアップ
Sudoku
Embed a solo Sudoku puzzle for calm brain breaks on blogs, school pages, and waiting-room screens.
Embed セットアップ
Word Search
Embed a solo Word Search puzzle for quick brain breaks on blogs, school pages, and waiting-room screens.
Embed セットアップ
よくある質問
Reactゲームウィジェットに関するよくある質問
/embed/{gameSlug}/ と /embed/{gameSlug}/frame/ の違いは何ですか?
iframe の src として /embed/{gameSlug}/frame/ を使用してください。このルートは、ウェブサイト embed および postMessage イベント用に構築された軽量ゲームフレームです。/embed/{gameSlug}/ ルートは、一般公開用のプレビューおよび SEO ページであり、iframe 内に配置するルートではありません。
訪問者はアプリをダウンロードしたり、アカウントを作成したりする必要がありますか？
いいえ。訪問者は、スマートフォン、タブレット、ノートパソコン、デスクトップパソコンのブラウザiframe内でプレイできます。パートナーアカウントが必要なのは、embedをインストールするウェブサイトの所有者のみです。
embed を自分のドメインに限定することはできますか？
はい。Games I Know embed は登録済みの Web サイトとドメイン制限付きテナント設定に基づいて設計されているため、コピーされた iframe コードは許可されていないサイトで自由に再利用することはできません。
現在、embed可能なGames I Knowタイトルはどれですか？
Tic Tac Toe、Four in a Row、Bingo、およびI Knowは、embed対応のブラウザゲームとして利用可能です。embedのドキュメントでは、サポートされているゲーム全体で同じイベントモデルを使用しています。
Games I Know は React パッケージですか？
いいえ。Games I Know と embed は iframe に基づいています。これにより、セットアップはフレームワークに依存せず、React コンポーネント内でも問題なく動作します。
ブラウザゲームを追加する準備はできましたか？
パートナーアカウントを作成し、ドメインを登録して、ウェブサイト用のドメイン制限付きiframeを生成してください。