UnityをTwitter上で動かす

Unityをツイッターで動かすには Twitterのplayer cardという機能を使います

PCのみ動きます。 スマホでアクセスするとサイトにリンクが張られた状態になって クリックすると移動します

サンプル

公式の説明サイト

https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/player-card

大まかな手順

UnityをWebGL出力してWebで遊べるようにします。

index.htmlのmetaヘッダーを設定します

	<meta property="og:description" content="どんどん亭さんから協力を得て、岬ばにらが音ゲームを制作しました。無料でプレーできるので、みなさん楽しんでください" />
	<meta property="og:type" content="website" />
	<meta property="og:url" content="https://www.misaki-vanilla.com/dondontei/" />
	<meta property="og:image" content="https://www.misaki-vanilla.com/dondontei/TemplateData/img/dondonteigame.png" />
	<meta name="thumbnail" content="https://www.misaki-vanilla.com/dondontei/TemplateData/img/dondonteigame.png" />
	<meta property="og:site_name" content="どんどん亭音ゲーム" />
	<meta property="og:title" content="どんどん亭音ゲーム" />
	<meta name="twitter:card" content="player" />
	<meta name="twitter:image" content="https://www.misaki-vanilla.com/dondontei/TemplateData/img/dondonteigame.png">
	<meta name="twitter:player" content="https://www.misaki-vanilla.com/dondontei/index.html">
	<meta name="twitter:title" content="どんどん亭音ゲーム">
	<meta name="twitter:player:width" content="1280">
	<meta name="twitter:player:height" content="720">
	<meta name="twitter:site" content="@Misaki_Vanilla" />

あとはツイッターでリンクを発言するだけです。

一番最初は反映までに30分~1時間ぐらいかかるかも

プロパティの説明

og:description説明文を書きます
og:typewebsite を設定します
og:urlindex.htmlを配置したページのURL
og:imageサムネイルの画像のURL
thumbnailサムネイルの画像のURL
og:site_nameサイトの名前
og:titleサイトの名前
twitter:cardplayer を設定します
twitter:imageサムネイルの画像のURL
twitter:playerindex.htmlを配置したページのURL
twitter:titleサイトの名前
twitter:player:width1280 画面のサイズ横幅
twitter:player:height720 画面サイズ縦幅
twitter:siteTwitterのアカウント

1時間以上まっても反映されない時ここにURLを入力して
https://cards-dev.twitter.com/validator

右下のLogってところにこういうメッセージが出てるか確認します

INFO:  Card loaded successfully

UnityのWebページを置くサーバーのNginxやApacheなど初期のままだと

埋め込みで別サイトからアクセス出来なくする設定があり

 X-Frame-Options がSAMEORIGINかDENYになっている場合は X-Frame-Options設定を消します。

その他メモ

普通のページを移動させるだけのカードを作る場合は

twitter:cardはsummary_large_imageを使います

https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary-card-with-large-image