TL; DR
- JavaScriptでブラウザゲームを作りました。
- UFOを操作して動物を誘拐するゲームです。
- TwitterのOGPを設定すると、ツイートに埋め込むことができます。
『Alien Abduction』
こちらからプレイできます。
https://alien.laineus.com/
画面をタップするだけのミニゲーム的なやつです。
ツイートに埋め込む
なんとツイートに埋め込むことができました！
UFOを操作して動物を誘拐するゲームを作りました！
— らいね (@Laineus) 2018年4月25日
PCだとタイムライン上で直接プレイできます↓
Alien Abduction https://t.co/7qAtPXTnGj #phina_js
（↑ぜひリツイートお願いします！）
TwitterのOGPのカードタイプに、playerというものがあり、オリジナルの音声・動画プレイヤーを埋め込むことができます。
これを使ってツイートすると、ツイート内にiframeでマウントされるため、canvasのコンテンツもそのまま動くようです。
playerカードは、他のカードタイプとは手順が少し異なります。
- OGPを設定する
- HTTPS対応する
- Twitterへ審査に出して承認してもらう
申請や表示確認は、CardValidatorから行います。
審査は、ドメイン単位で行われ、自分の場合3日で承認されました。
<meta name="twitter:card" content="player">
<meta name="twitter:player" content="https://alien.laineus.com/fullscreen/">
〜略〜
シェア元のページはどうなっていてもよく、twitter:playerに指定されているページの方がツイートに埋め込まれます。
審査対象のドメインもtwitter:playerに指定したほうです。
また、コンテンツ自体に関しても、サイズがウィンドウにフィットしている必要があるなど、いくつかルールがあるようです。
詳しくは下記記事を参考に。
Twitterがしゃべる！？Playerカードの作成方法 - Voicy Tech Blog
http://voicetech.hatenablog.com/entry/2017/05/14/133539
審査自体は感覚的には結構ゆるいように感じました。
ただし、Twitterのカードのポリシー的にOKなのか怪しいので、削除されたりするかもしれません。
試す際は自己責任でおねがいします。
2020/07/10 追記: 多分現在は審査が要らないぽいです。→『 秘密にしておきたかったんだけど、実はTwitterにはWebページを埋め込めるんだよね』
ゲーム開発用JSライブラリ「Phina.js」
ゲームの開発に使ったライブラリを紹介します。
公式サイト
http://phinajs.com/
JavaScriptでCanvasのゲームを作るための和製ライブラリです。
ゲーム進行や描画まわりの管理といった基盤となる部分や、当たり判定などさまざまなゲームに汎用的に使える機能などが提供されます。
ソースコード
GitHub
https://github.com/laineus/alien
BGM
BGMは、こちらのブラウザで動作する作曲ソフトでさくっと作りました。
ほんとはCubaseというWindows用のちゃんとした作曲ソフトを持っているんですが、最近Linux以外のOSを使いたくなさすぎて↑を使いました。