目次
要注意事項
この手法はtwitterの規約上グレーな部分があります。(後述)
最悪アカウント凍結なども考えられるので、利用する場合は自己責任でお願いします。
初めに
まずはこちらのツイートをご覧ください。
何も進んでないけどサンプルが動いたので進捗を出した気分を醸し出すhttps://t.co/tQtUlkeDiB
— 東大で登壇したニム式@TL閲覧自粛中 (@ni26mu) January 5, 2019
なんと、twitter上でゲームが出来ます。モバイルでも動きます。
これはTinyUnity(正式にはProjectTiny)のサンプルにあるゲームですが、ひと手間加えるとこんな風にtwitter上でプレイ出来るようになります。
概要
TinyUnityとは
Webで動かすことを前提とした、小さくて軽いUnityの機能です。正式にはProject Tinyと言うそうです。
参考:【Unity】小さく、軽く、早い、Tiny Mode(Project Tiny)についてのアレコレ
なぜTwitterで動くのか
Open Graph Protocol (オープン・グラフ・プロトコル、通称OGP)という技術を使っています。twitterやwebページにURLが貼られた時、自動的に画像やタイトルや概要などに変換されるアレです。
twitterでは、PlayerCardと呼ばれるOGPがあり、それを利用してゲームを再生しています。
実装の手順
TinyUnityの準備
以下のサイトが詳しいです。
参考:Tiny Unity (Tiny Mode) を使ってみる
参考:TinyUnityのインストールする流れとすべてのデモのまとめ
大雑把な手順は以下の通り。
- Unity2018.3.0.b12以降のUnityをインストール
- エディター > Window > PackageManagerAdvancded > Show preview packages > Tiny Mode > Install
- エディター > Tiny > Import Samples
- 任意の.utprojectファイル(今回はTinySamples/FlyingYolk/FlyingYolk.utproject)を開く
プロジェクトのビルド
インスペクターからutprojectの設定をします。Build ConfigrationをReleaseに変えます。
その後Buildボタンを押すと、プロジェクトフォルダのTinyExport/FlyingYolk/html5/release/binというフォルダに、ビルドされたファイル(game.js、game.js.map、index.htmlの3つ)が生成されます。これを使います。
(ブラウザで自動的に実行されるので、動作の確認はそちらで行ってください)
※他のサンプルでは3ファイル生成されたのですが、なぜかFlyngYolkではindex.htmlファイルしか生成されませんでした。理由は分かりません。
なお、どちらの状況でもすべて同じ手順で動きます。
サーバーの準備、https化
先程の3ファイルをwebサーバーの同フォルダ内に置き、index.htmlにアクセスして動作確認をします。
またTwitterに表示させるために、後述のファイルも含め全てhttps化(SSLサーバ証明書を導入)する必要があります。
※個々人の状況に全対応した説明をするのはちょっと無理があるので、ご利用のレンタルサーバーなどの解説やgoogle検索で対応してください。
※ちなみに自分はさくらのレンタルサーバーで無料SSLを導入しました。
PlayerCardの設定
先程生成されたhtmlファイルのほかにもう一つ自前でhtmlファイルを用意します。(仮にcard.htmlとしますがなんでも良いです)
これはtwitterで表示させるために必要なファイルで、自分で作成と設定をする必要があります。
以下のコードをコピペしていくつか書き換えた後、サーバーにアップロードします。場所はtinyのファイルと別でも大丈夫です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SimpleInput</title>
<meta name="twitter:card" content="player">
<meta name="twitter:title" content="TinyTest">
<meta name="twitter:image" content="https://***/***.png">
<meta name="twitter:player" content="https://***/index.html">
<meta name="twitter:player:height" content="350">
<meta name="twitter:player:width" content="350">
</head>
<body>
</body>
</html>
- <title>タグ 適当な名前をつけます。他人から見えることは無いかと思います。
- twitter:title 適当な名前をつけます。サムネのタイトルになります。
- twitter:image サムネイル(再生前に表示)に使う画像ファイルのURLを指定します。
- twitter:player 先程アップロードしたindex.htmlを指定します。最重要。
設定が出来たか確認をするには、twitter社が提供しているCard validatorという検証ツールがあります。そちらにcard.htmlのURLを貼り付けてPreviewCardボタンを押します。
エラー表示などなくサムネ画像が表示され、画像クリックで実際に動作すればOKです。
ツイートする
ここまで出来たらあとはツイートするだけです。お疲れ様でした。
なお、以前は審査が必要だったようですが、年々簡略化され、現在はないようです。
注意点
規約的に怪しい
規約をよく見ると、Player Cardはゲームに使えないっぽい記述があります。
一応ゲームに利用している前例(審査があった頃)もありますし、「コンテンツに無関係なゲームを動画プレイヤーの中に入れるな」というようにも読めます。
しかし今の所はっきりとはしないので、やる場合は自己責任でお願いします。
なおPlayerCard以外を使ってね、と書いてありますが(今回の用途では)使い物になりません。
Do not build end-to-end interactive experiences inside the video or audio player unrelated to Player Card content, such as the following: purchasing, gaming, polling, messaging, and data entry. Instead, build these interactive experiences with our other Card types or enhance your Player Card content with links to your website or mobile application.
まだベータ
TinyModeはまだベータのため、ドキュメントや解説サイトが少なく、また今後破壊的な変更が入る可能性があります。
TypeScript
使用するのはC#ではないです。別言語です。
が、今後正式版になるまでにはC#に置き換わると決まってるようです。
ECS
比較的新しい技術で通常のUnityとは大分異なります。TinyModeでは多少扱いやすいらしいです。
まだまだ弱いTiny
2Dしか出来ない、物理もない(ありました)といった、出来ないことばかりの状態なので、現状の用途はかなり限られます。
Web知識がいる
TinyUnityで出力されるのは.js(JavaScript)です。Unity上でのコーディングや動作確認をする上では知らなくても問題ありませんが、実際に運用する(今回のようにサーバーに置くなど)場合は多少Web系の知識が必要になってきます。
関連知識
実は今回の技術はTinyUnityが最初ではなく、むしろ完全な後追いです。元になっているのはHTML5という規格で、ブラウザゲームやインスタントゲーム(FacebookやLINE QUICK GAMEなど)に利用されています。(twitterで動かすのはやや応用になりますが)
日本では全く話題になってませんが、中国では既に一大市場となっており、HTML5向けエンジンとしてEgretやCocosなどが使われています。
まとめ
- TinyModeでゲームを作り、Releaseビルドする
- 出来たファイルをサーバーにアップロードし、https化する
- PlayerCardの設定をする
- ツイートする
所感
Unityと名前が付いていますが、全然別物だと思って取り組むのが正解だと思います。
またベータである、言語の入れ替えが決まっている、機能が弱い、などの理由により、まだまだ本格利用には遠いでしょう。
個人的にはかなりの可能性を感じているので、今の段階では体験版やプロモーションなど簡単な用途に利用しつつ研究をして、今後の本格利用に備えておこうと思っています。