この投稿では、同僚の Jonathan が WordPress のインタラクティビティ API を使って作ったオンラインゲーム「Dodge」を紹介します。詳しくは、本人の投稿もぜひ参照してみてください：Introducing Dodge, a WordPress game!（By Jonathan Bossenger – X・Twitter、WordPress プロフィール）

---

Dodge の遊び方

ルールはシンプルで、キャラクター（ここでは WordPress のロゴ）が敵（その他のロゴたち）に当たらないように、十字キーで逃げ続けるというものです。

1. 「S」キーで開始
2. 十字キーで動き回る
3. 「R」キーでリセット

ぶつかった時に表示されるポップアップに名前を入れると、本日のハイスコア欄に記録が残ります。ちなみに、私の今日のハイスコアは 59.47 秒。

まずは、直接遊んでみてください 🙌🏼

Dodge に使われているインタラクティビティ API

Dodge の裏ではいくつかの技術が動いていますが、メインとなっているのは WordPress のインタラクティビティ APIです。これは昨年提案されたばかりの新技術で、まだ開発段階のものです。実際のウェブサイトで出会うことはまだなかなかないでしょう。

インタラクティビティ API の1番のメリットは、Webページを更新しなくてもサイトのコンテンツとやり取りができるという点です。例えば・・・

• Webページのフォームを送信するとします。今までの WordPress サイトだと、送信ボタンを押してから画面が変わり、新しい画面に「送信されました」と表示されることが多かったです。このインタラクティビティ API を使うと、画面を切り替えることなく、そのまま「送信されました」と表示できるようになります。
• 検索バーからサイト内検索をかけるとします。従来は新しいページに遷移し、そこに検索結果が表示されることが多かったです。インタラクティビティ API を利用すると、ページを遷移せずに結果を表示できるようになりします。

つまり、よりスムーズなユーザー体験が実現可能になるわけです！

インタラクティビティ API を使わなくても、上にあげた機能は実現可能かもしれません。ただ、その構築や保守の段階で開発者にかかる負担が大きくなってしまう懸念があります。そこで WordPress コアの中でそれを実現できる機能を提供しようという提案がされた経緯があります。（詳しくはこちら：Proposal: The Interactivity API – A better developer experience in building interactive blocks）

Dodge に使われているその他の技術

WordPress で投稿を書くと、段落ブロック、見出しブロック、画像ブロックなど、さまざまなブロックを使いますが、なんとこの Dodge も一つのブロックとして開発されました！製作者の GitHub からダウンロードして、自分のサイトにもプラグインとしてアップすることができます。

Dodge には、インタラクティビティ API の他にも、さまざまな WordPress 技術が盛り込まれています。

• ハイスコアのデータは、カスタム投稿タイプで管理
• ハイスコアデータの作成権限は、WordPress に備わっているユーザ権限機能で管理
• ハイスコアデータの取得・登録は、WordPress REST API を利用
• ゲームの下にハイスコアを示すには、ショートコードを利用

こちらは馴染みのあるものが多いのではないでしょうか？

終わりに

いかがでしたか？インタラクティビティ API の秘めている可能性、少しでもわかってもらえたでしょうか？今後、他にもどういった場面に適用されていくか、ワクワクして見守っています 😊

---

本投稿のアイキャッチ画像は、https://www.freepik.com/ai/image-generator を利用し、AI を用いて作成されました。