薄い構成層
Angularコンポーネントは、iframeをレンダリングし、寸法を設定し、オプションのイベント出力を接続するだけです。
Angularゲームウィジェット
ブラウザゲーム用のAngularゲームウィジェット
Angular アプリケーションでは、ゲーム エンジンをバンドルにインポートすることなく、プレイ可能なブラウザ ゲームを作成できます。コンポーネントでフレームをレンダリングし、フレーム URL を安全にバインドし、ホスト アプリケーションがゲーム プレイ シグナルを必要とするときに postMessage イベントを購読します。
コンポーネントテンプレート
メッセージリスナー
レスポンシブ iframe
署名済みの完了サポート
簡潔な答え
フレームルートを使用し、ページコンテキストを追加します。
Angular では、/embed/{gameSlug}/frame/ を指す iframe を持つコンポーネントを作成し、クエリ文字列に tenantId を渡し、data.source が gamesiknow であるウィンドウ メッセージ イベントをリッスンします。
Angular対応のゲームウィジェットをお試しください
このデモでは、Angularサービスまたはコンポーネントが処理できるiframeイベントと親ページイベントを示します。
Angular開発者がゲームembedを追加しています
Angularチームがiframeウィジェットを使用する理由
iframe は、ゲームランタイムを Angular バンドルの外に保ちつつ、サービスやコンポーネントで型付きイベント処理を可能にします。
アプリにゲームロジックはありません
ボードのルール、アセット、およびリアルタイムの動作は、Games I Know フレームのルート内に留まります。
フレームワークセーフ境界
ゲーム内部構造に依存しない@HostListenerまたは専用のメッセージサービスを使用してください。
セットアップフロー
Angularでゲームウィジェットをembedする方法
スタンドアロンコンポーネントまたはフィーチャーコンポーネントを作成し、安定したフレームURLをバインドし、コンポーネントが破棄されたときにリスナーをクリーンアップします。
ステップ 1
GameWidgetComponentを作成します
幅100%、高さ約640px、allow="fullscreen"、およびGames I KnowフレームURLを持つiframeを追加します。
ステップ 2
フレームURLを構築する
環境変数または実行時設定から取得した tenantId とオプションの campaignId を使用して、/embed/{gameSlug}/frame/ を構成します。
ステップ 3
@HostListener またはサービスを使用してリッスンします
ウィンドウ メッセージ イベントを処理し、GAME_STARTED と完了に対して data.source === "gamesiknow" でフィルタリングします。
ステップ 4
報酬を受け取る前に確認する
Angularアプリがコンテンツのロックを解除する場合、署名付きトークンをバックエンドに転送し、パートナーサーバーキーで検証してから報酬を付与してください。
実装
Angularの実装に関する注意事項
変更検出サイクル全体を通してiframe srcを安定させ、破棄時にメッセージハンドラーの購読を解除します。
iframe の再マウントは避けてください。
変更検出のたびに iframe を再作成しないでください。テナントまたはゲームが変更されない限り、src を一度だけバインドしてください。
ngOnDestroy のクリーンアップ機能を使用する
開発モードで重複したハンドラーが発生しないように、コンポーネントが破棄されたときにメッセージリスナーを削除します。
UIと検証を分離する
Angularは勝者UIを素早く表示できますが、クレジットや賞品の決定はサーバー側で行うべきです。
利用可能なゲーム
ページに合ったゲームを選択してください
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 セットアップ
よくある質問
Angularゲームウィジェットに関するよくある質問
/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 は Angular ライブラリですか、それとも npm パッケージですか？
いいえ。Games I Know embed は iframe ベースなので、Angular、React、Next.js、Astro、その他のスタックでの統合が軽量になります。
ブラウザゲームを追加する準備はできましたか？
パートナーアカウントを作成し、ドメインを登録して、ウェブサイト用のドメイン制限付きiframeを生成してください。