自分のウェブサイトやブログに麻雀ソリティアを埋め込む

TheMahjong.com に新しい機能が追加されました。これからは、自分のウェブサイトやブログに麻雀ソリティアのゲームを直接埋め込めるようになります。小さな個人ブログでも、ゲームポータルでも、パズルや脳トレーニングのページでも、訪問者はあなたのサイト上でそのまま麻雀ソリティアを遊べます。

この記事では、新しい埋め込み機能の仕組み、どんな人向けの機能なのか、そして麻雀ソリティアのゲームを自分のサイトに追加する方法を説明します。

埋め込み機能を追加した理由

麻雀ソリティアはさまざまなタイプのコンテンツと相性が良いゲームです。パズルの攻略ガイド、テーマ別の記事、記憶力・注意力に関するページ、単純にレイアウトを集めたコレクションなどがその例です。こうした場合、別サイトへのリンクを貼るよりも、ページ上にゲームそのものがあるほうが自然に機能します。

埋め込み機能を使えば、サイトの作りを変えずにそれを実現できます。必要な場所に組み込める小さな独立したゲームブロックのように動きます。ページには短いコード断片を追加するだけで、あとはすべてこちら側で処理します。ゲームは当社のサーバーから読み込まれ、常に最新の状態に保たれ、TheMahjong.com と同じように動作します。

麻雀ソリティアを埋め込む2つの方法

麻雀ソリティアをページに追加する方法は、次の2つのシンプルなやり方があります。

• ほとんどすべてのウェブサイトで動作する iframe
• 多くの有名なコンテンツ管理システム（CMS）でサポートされている oEmbed

どちらの方法でも表示されるゲームは同じです。違うのは、ページに追加する手順だけです。

オプション1：シンプルな iframe 埋め込み

iframe を使う方法では、ページに貼り付けられる短い HTML スニペットが手に入ります。サイトの HTML を直接編集できる場合や、エディタにカスタムコード用のブロックがある場合に向いています。

一般的な iframe 埋め込みコードは次のようになります。

<iframe 
  src="https://themahjong.com/shared-game" 
  title="Mahjong game" 
  loading="lazy" 
  allowFullScreen 
  style="width:100%;height:600px;border:none">
</iframe>

ここでは次のことができます。

• ゲームを表示したい場所に、このブロックを配置する。
• コンテナの幅に合わせられるように、width をパーセンテージで調整する。
• ページのレイアウトに合わせて、height をピクセル単位で調整する。

もし TheMahjong.com を応援したい場合は、埋め込んだゲームの近くに当サイトへの小さなテキストリンクを追加できます。必須ではありませんが、追加していただけるととても助かります。

オプション2：CMS 向け oEmbed

サイトが oEmbed に対応した CMS（たとえば WordPress、Drupal、Joomla など、適切なプラグインを入れたもの）で動いている場合は、iframe の HTML を直接扱わずに埋め込み機能を利用できます。

すべての「共有」ページには、レイアウトの URL と oEmbed コードが用意されています。

エディタによっては、このレイアウトの URL を自動的に埋め込みゲームに変換できるものがあります。その場合は、埋め込みコンテンツ対応のブロックに URL を貼り付けるだけで完了です。別の構成では、テーマやプラグインが用意している専用のフィールドやブロックに oEmbed コードを貼り付けるよう求められる場合もあります。

CMS 上でゲームの代わりに普通のリンクしか表示されない場合、その部分のエディタでは oEmbed が有効になっていないか、そもそもサポートされていない可能性が高いです。

埋め込みが特によく機能する場所

埋め込みがもっとも効果的なのは、ゲームがトピックを邪魔するのではなく、むしろ支えてくれるページです。麻雀ソリティアのブロックが特によく機能する代表的な場所をいくつか挙げます。

• テーマ別ブログ記事やコラム。パズル、リラックスできるゲーム、集中力、日々のちょっとした休憩などについて書いているなら、埋め込んだ麻雀ソリティアのレイアウトを、テキストの横に置く小さなインタラクティブ例として使えます。ページのテーマにざっくり合うレイアウトを選べば、ゲームが唐突に見えることもありません。
• サイト内のゲーム・パズルコーナー。すでに「ゲーム」や「パズル」のセクションを持つサイトでは、埋め込んだ麻雀ソリティアを単なるリンクではなく、ページの主要コンテンツのひとつとして配置できます。これは、小さな個人プロジェクトにも、ゼロから開発することなくクラシックなパズルを1本追加したい大規模ポータルサイトにも向いています。
• 記憶力・注意力・トレーニングに関するページ。集中力、パターン認識、手軽な日々の脳トレ習慣などを扱う記事には、実際にプレイできる例があると効果的です。麻雀ソリティアは、インストール不要でページから離れることもなく、すぐ試せる“低プレッシャー”なアクティビティとしてよくマッチします。
• 季節・イベント向けのページ。秋の特集、冬のホリデー、地域の祭りなど、季節やイベントに合わせたコンテンツには、ページの雰囲気に合ったレイアウトを埋め込めます。たとえば、毎日の星占い記事に十二宮のシンボルをかたどったレイアウトを使う、といった形です。メインテキストの近くにテーマに沿ったレイアウトを置くことで、ページ全体の完成度が上がり、訪問者が少し長く滞在する理由にもなります。
• コミュニティハブや「ひと休み」ページ。コミュニティサイトやフォーラム、チームサイトの中には、「ひと休み」や「1分だけ遊ぶ」といったシンプルなページを用意しているところもあります。そうした場所では、埋め込まれた麻雀ソリティアのレイアウトが、小さな独立したアクティビティとして自然に収まります。登録やダウンロードも不要です。

パフォーマンスと読み込みについて

埋め込まれたゲームは、TheMahjong.com から HTTPS 経由で読み込まれます。メインサイトと同じコードとアセットを使っているため、性能もほぼ同じです。一度ゲームがキャッシュされれば、再訪時にはレイアウトがすばやく読み込まれるはずです。

iframe に loading="lazy" 属性を付けてゲームを埋め込むと、多くのブラウザはプレイヤーがその近くまでスクロールするまで読み込みを待機します。1ページに複数の埋め込みがある場合でも、これによってページ全体の反応性を保ちやすくなります。

この新しい埋め込み機能が、あなたのサイトのどこかによい居場所を見つけてくれることを願っています。単一の記事の一部として使っても、ゲームセクションの一要素として使っても構いません。コンテンツに自然になじむまで、さまざまなレイアウトや配置を試してみてください。