LoginSignup
224

More than 3 years have passed since last update.

Twitterのタイムライン上で動くブラウザゲームをJSで作りました

Last updated at Posted at 2018-04-25

TL; DR

  • JavaScriptでブラウザゲームを作りました。
  • UFOを操作して動物を誘拐するゲームです。
  • TwitterのOGPを設定すると、ツイートに埋め込むことができます。

ss1.png

『Alien Abduction』

こちらからプレイできます。
https://alien.laineus.com/

画面をタップするだけのミニゲーム的なやつです。

ss2.png

ツイートに埋め込む

なんとツイートに埋め込むことができました!

(↑ぜひリツイートお願いします!)

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を使いたくなさすぎて↑を使いました。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
224