ウェブサイトにゲームを追加する方法

ほとんどのウェブサイトは、閲覧、ざっと目を通す、クリックして進むことを前提に作られています。これは便利な反面、静的な印象を与えることもあります。シンプルなブラウザゲームを追加することで、アプリのダウンロードやプレイヤーアカウントの作成、ページからの離脱を促さずに、訪問者に何か楽しめるものを提供できます。

ウェブサイトにゲームを追加する最も簡単な方法は、通常、iframe ゲーム embed またはゲームウィジェットを使用することです。ページに小さな HTML スニペットを配置すると、ゲームは自己完結型のフレーム内で実行されます。GamesIKnow Embed はまさにこの目的のために作られています。ブログ、WordPress サイト、小規模ビジネスの Web サイト、コミュニティ ページ、学校、レストラン、開発者プロジェクトなどに適合する軽量のブラウザ ゲームです。

簡単な回答：ウェブサイトにゲームを追加するにはどうすればいいですか？

ウェブサイトにゲームを追加するには、ブラウザゲームを選択し、プロバイダーの iframe またはゲームウィジェットのコードをコピーして、CMS またはアプリに貼り付け、モバイルで embed をテストし、ゲームに関する役立つテキストとともにページを公開します。GamesIKnow Embed では、iframe は専用の /embed/{gameSlug}/frame/ URL とパートナー設定からのテナント ID を使用します。

1. ページの内容と読者層に合ったゲームを選びましょう。
2. embedプラットフォームから提供されるiframeフレームURLを使用してください。
3. iframe を WordPress、ウェブサイトビルダー、または React/Next.js コンポーネントに貼り付けてください。
4. 高さの安定化、タイトル属性の明確化、遅延読み込み、およびフルスクリーンサポートを設定します。
5. 公開前に、モバイル端末とデスクトップ端末でページをプレビューしてください。

ウェブサイトにおけるゲームウィジェットとは何ですか？

ウェブサイトゲームウィジェットとは、通常のウェブページ内に組み込まれる、ブラウザでプレイできる小型ゲームのことです。ほとんどの場合、ウィジェットはiframeとして機能します。つまり、ゲーム自体はプロバイダによってホストされ、サイト側では周囲の記事、ランディングページ、リソースページ、またはビジネスページのコンテンツを管理します。

ウェブサイトにゲームを追加する理由とは？

ゲームを導入するからといって、サイトをゲームポータルにする必要はありません。多くのウェブサイトにとって最適な活用法は、大きなページの中にちょっとしたインタラクティブな要素を取り入れることです。例えば、ブログ記事の簡単なアクティビティ、レストランのQRコードページの待合室ゲーム、学校サイトの授業用アクティビティ、コミュニティページのちょっとした息抜きなどです。

• ゲームは、静的なページをより魅力的に見せるのに役立ちます。
• 訪問者はページを離れることなく、何か楽しめるものを見つけることができる。
• ブログやコミュニティサイトは、ページに簡単なインタラクション要素を取り入れることで、より印象に残りやすくなる。
• 中小企業は、本格的なカスタムアプリを開発しなくても、遊び心のある要素を取り入れることができます。
• 開発者や代理店は、小さくて独立した iframe を使用して、インタラクティブな Web サイト ウィジェットを追加できます。

ウェブサイトにゲームを追加する最良の方法

ウェブサイトにゲームを追加する方法はいくつかあります。最適な方法は、使用するプラットフォーム、必要な制御レベル、そしてゲームを自分で開発したいかどうかによって異なります。

iframe ゲーム embed を使用する

iframe embed は多くの場合、最も手っ取り早い方法です。ゲームはプロバイダーによってホストされ、ページはゲーム用のスペースを確保します。これにより、ゲームの実行環境がページコードから分離され、多くのプラットフォームでスニペットが動作するようになります。

ゲームウィジェットを使用する

ゲームウィジェットは通常、iframe に加えて、推奨サイズ、明確なタイトル、フルスクリーンサポート、場合によっては親ページが受信できるイベントメッセージなどの便利なデフォルト設定を備えています。これが GamesIKnow Embed の背後にある実用的なモデルです。

HTML5ゲームを追加する

現代のブラウザゲームは、スマートフォン、タブレット、ノートパソコン、デスクトップパソコンのブラウザ上で動作するため、HTML5ゲームと呼ばれることがよくあります。独自のHTML5ゲームをホストすることもできますが、ほとんどのウェブサイト所有者は、ゲームエンジン、アセット、モバイルレイアウト、バグ修正などを自分で管理する必要がないように、プラットフォームを利用することを好みます。

カスタムHTMLブロックを使用してWordPressにゲームを追加する

WordPressでは、カスタムHTMLブロックを使用するのが最も簡単な方法です。iframeのスニペットを貼り付け、ページをプレビューして、周囲のテキストとレイアウトを調整してください。WordPressの設定でiframeタグが削除されてしまう場合は、管理者権限が必要になるか、allowed-iframeプラグインが必要になる場合があります。

React または Next.js にゲームを追加する

ReactまたはNext.jsでは、iframeをコンポーネントとしてレンダリングし、フレームのsrcを安定させます。分析やゲームイベントが必要な場合は、クライアントコンポーネントでGames I Knowフレームからの信頼できるpostMessageイベントをリッスンします。

ゼロからオリジナルのゲームを構築する

ゲーム自体が製品である場合は、カスタムゲームが適しています。通常のブログ、代理店サイト、学校のページ、または地域のビジネスページの場合は、embedの方が通常は高速でメンテナンスも簡単です。

最も簡単なオプション: GamesIKnow Embed を使用します。

GamesIKnow Embed を使用すると、ウェブサイトの所有者は、簡単な iframe だけで、ベータ版期間中に無料のブラウザゲームを追加できます。訪問者は、アプリのダウンロードやプレイヤー登録なしでブラウザ上でプレイできます。これらのゲームは軽量でモバイルフレンドリーであり、本格的なゲームプラットフォームではなく、手軽にインタラクティブなブロックを追加したいページ向けに設計されています。

現在利用可能なゲームには、Tic Tac Toe、Four in a Row、Bingo、I Know、数独、ワードサーチなどがあります。これらは、シンプルなブラウザゲームウィジェットを必要とするブログ、学校、レストラン、コミュニティウェブサイト、中小企業のページ、社内ポータル、開発者サイトなどに最適です。

embed コードの例

Games I Know は、Web サイト embed 用に専用の iframe フレーム ルートを使用します。公開されている /embed/{gameSlug}/ ページは、人間が読みやすいランディング ページです。iframe の src には、パートナー ダッシュボードから取得したテナント ID を指定して /embed/{gameSlug}/frame/ を指定する必要があります。

<iframe
  src="https://gamesiknow.com/embed/tic-tac-toe/frame/?tenantId=YOUR_TENANT_ID"
  title="Tic Tac Toe by Games I Know"
  width="100%"
  height="640"
  style="border:0;border-radius:16px;max-width:420px;display:block;margin:0 auto;"
  loading="lazy"
  allow="fullscreen"
  allowfullscreen
></iframe>

上記のライブデモでは、Games I Know デモテナントを使用しています。ご自身のウェブサイトの場合は、パートナーアカウントを作成し、ドメインを登録して、ダッシュボードで生成されたテナントまたは embed キー値を使用することで、フレームが承認済みのサイトに紐付けられます。

WordPressにゲームを追加する方法

1. ゲームを表示させたいWordPressのページまたは投稿を開きます。
2. ゲームをプレイするセクションの近くに、カスタムHTMLブロックを追加してください。
3. embed ダッシュボードから Games I Know iframe スニペットを貼り付けます。
4. デスクトップとモバイルでプレビューし、必要に応じて周囲のセクションのテキストを調整してください。
5. ゲームのサイズ、タイトル、レイアウトが適切になったら、ページを公開してください。

Reactにゲームを追加する方法

Reactの場合、iframeコンポーネントはシンプルに保ちましょう。安定したフレームURLを渡し、アクセシビリティのために明確なタイトルを設定し、適切な高さを確保し、アプリでembedイベントが必要な場合にのみpostMessage処理を追加します。

const gameSrc = "https://gamesiknow.com/embed/tic-tac-toe/frame/?tenantId=YOUR_TENANT_ID";

export function GameEmbed() {
  return (
    <iframe
      src={gameSrc}
      title="Tic Tac Toe by Games I Know"
      width="100%"
      height={640}
      style={{
        border: 0,
        borderRadius: 16,
        maxWidth: 420,
        display: "block",
        margin: "0 auto",
      }}
      loading="lazy"
      allow="fullscreen"
      allowFullScreen
    />
  );
}

Next.jsにゲームを追加する方法

Next.js では、ゲームに関する役立つ見出し、本文、FAQコンテンツを含め、ページ自体がインデックス可能な状態を維持してください。iframe はサーバーコンポーネントでレンダリングできますが、postMessage リスナーはクライアントコンポーネントに配置する必要があります。

const gameSrc = "https://gamesiknow.com/embed/tic-tac-toe/frame/?tenantId=YOUR_TENANT_ID";

export default function GamesPage() {
  return (
    <main>
      <h1>Play Tic Tac Toe</h1>
      <iframe
        src={gameSrc}
        title="Tic Tac Toe by Games I Know"
        width="100%"
        height={640}
        style={{
          border: 0,
          borderRadius: 16,
          maxWidth: 420,
          display: "block",
          margin: "0 auto",
        }}
        loading="lazy"
        allow="fullscreen"
        allowFullScreen
      />
    </main>
  );
}

ウェブサイトにゲームを追加するのに最適な場所

• ブログ記事の中で、ちょっとしたインタラクティブな休憩がテーマに合うもの。
• 既にリピーターを集めているリソースページ。
• コミュニティページ、クラブページ、地域グループのサイト。
• 学校の活動ページと教室のリソースハブ。
• レストランの待ち時間ページ、メニューのQRコードページ、イベントページ。
• 小さなインタラクションがオファーをサポートするランディングページ。
• 404ページ、または遊び心が期待される楽しいページ。

初心者におすすめのゲーム

ゲームを追加する前に知っておくべきヒント

• ゲームは記事の内容に関連性を持たせ、すべての記事に無理やり挿入しないようにしてください。
• 公開前にモバイル端末でiframeをテストしてください。
• 1つのページに、アクティブなembedを過剰に配置しないでください。
• 最初のビューポートの下に表示される iframe スニペットには遅延読み込みを使用します。
• iframe の高さを適切な範囲に保って、ページが不自然にジャンプすることなくゲームがプレイしやすいようにしてください。
• 支援技術がembeddedゲームを説明できるように、明確なタイトル属性を使用してください。
• エンゲージメントデータが重要な場合は、アナリティクスを使用してクリック数、開始数、完了したラウンド数を追跡してください。

クイックチェックリスト

1. ゲームを選択し、それがページの意図に合致していることを確認してください。
2. iframe 内で専用の Games I Know フレーム URL を使用してください。
3. ゲームに関する有益なページコンテンツを追加することで、ページのSEO効果を維持しましょう。
4. スマートフォン、タブレット、デスクトップでページをプレビューできます。
5. 公開後、訪問者が実際にウィジェットを使用しているかどうかを監視します。