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:type | website を設定します |
og:url | index.htmlを配置したページのURL |
og:image | サムネイルの画像のURL |
thumbnail | サムネイルの画像のURL |
og:site_name | サイトの名前 |
og:title | サイトの名前 |
twitter:card | player を設定します |
twitter:image | サムネイルの画像のURL |
twitter:player | index.htmlを配置したページのURL |
twitter:title | サイトの名前 |
twitter:player:width | 1280 画面のサイズ横幅 |
twitter:player:height | 720 画面サイズ縦幅 |
twitter:site | Twitterのアカウント |
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を使います