独自サーバーでティラノ製ゲームをツイッターのタイムライン上で遊べるようにする

ティラノスクリプトはタイムライン上で、ゲームをプレイしてもらうことが可能です。

PCからだと動画みたいにツイッターのタイムライン上でゲームが動きます。
ゲームを遊んでもらうまでのリーチは最強じゃないかコレ。 pic.twitter.com/4BxN29NdMx
— シケモクMK🦖 (@shikemokumk) 2018年3月12日

現在は、ノベルゲームコレクションに作品を登録することで、だれでも簡単にタイムラインプレイヤーを利用することができるようになっています。

ノベルゲームコレクション、投稿作品がタイムラインプレイに対応。ツイッター上でゲームが起動して遊べる。 | TYRANOS

しかし、自分が管理しているサーバー上で配信したいケースもありますね。自分のサーバーに配置したゲームをタイムラインプレイヤー形式で配信することも可能です。

*ただし、レンタルサーバーの借り方や、アップロード方法、SSL化などはここでは解説しませんのでご了承ください

自サーバーに配置したゲームをタイムラインプレイヤーにする手順

①ゲームの出力

ブラウザ形式で出力して、サーバーにアップロードしてください。

また、ブラウザゲームにアクセスするサーバーがSSL対応されていることが必要です。SSL対応とは、https://〜のようなURLでアクセスできる状態になっていることです。

f:id:shikemokumk:20180328233115p:plain

②HTMLファイルを編集

このゲームを起動するHTML（ティラノのindex.html）もしくは同一ドメインの中でゲーム紹介ページのHTMLをエディタでひらいて、以下のタグを<head>と</head>の間に書き込みます。

<meta name="twitter:card" content="player">
<meta name="twitter:site" content="@関係するTwitterアカウント">
<meta name="twitter:title" content="タイムラインプレイヤーに表示するタイトル">
<meta name="twitter:description" content="ゲームの説明文">
<meta name="twitter:image" content="https://xxxxxxxx.com/image.png（ゲームのサムネ画像。タイムライン上でゲーム起動前に表示される）">
<meta name="twitter:player" content="https://xxxxxxxx.jp/game/（ブラウザ形式でアップしたティラノの起動URL）">
<meta name="twitter:player:width" content="960"> confit.tjsのscWidth ヨコ幅
<meta name="twitter:player:height" content="640"> confit.tjsのscHeight タテ幅

これを、自分のゲームの情報にあわせて、書き換えます。

ちなみに、ティラノのデフォルトプロジェクトを、ティラノ公式で動作させているものは以下のような記述になります。

<meta name="twitter:card" content="player">
<meta name="twitter:site" content="@shikemokumk">
<meta name="twitter:title" content="ティラノスクリプト動作デモ">
<meta name="twitter:description" content="ティラノスクリプトの基本動作をプレイできます">
<meta name="twitter:image" content="https://tyrano.jp/img/top/sample/first.png">
<meta name="twitter:player" content="https://tyrano.jp/demogame/first/">
<meta name="twitter:player:width" content="960">
<meta name="twitter:player:height" content="640">