見出し画像

本田圭佑に嫉妬した人向け、Twitterで直接じゃんけん出来るゲームの作り方。

twitterを見てるとみなやたらと本田圭祐とじゃんけんしている。
じゃんけんで勝つとペプシの引換券がもらえるのだがやたらと強い。
さらに煽…文才溢れるセリフを放つことがあちこちでネタにされている。

煽りスキルはともかく、ティラノスクリプトはtwitterのTLから直接遊べるゲームを作ることが出来るのを思い出した。ので作った。

上記ツイートの三角マークからプレイ可能。

TL上でのプレイはPCのみに対応しているがプレイの敷居はDLするより低く感じられるだろう。リンクに飛べばスマホでもプレイ出来る。
ADV向けゲーム製作ツールのティラノスクリプトはTwitterCardという形でツイートに埋め込んでそのままプレイ出来る。

TwitterCardはブログの記事を貼ると画像とか動画が自動で埋め込みされるヤツの総称なのでどこかで見たことある人も居るだろう。
ただしティラノスクリプトは全て自動でやってくれるわけではないのでその顛末を記しておきたい。
以下は興味のある人向けで。

・ティラノスクリプトでhtml5製のじゃんけんゲームを作る

ティラノスクリプトでじゃんけんゲームを作りましょう。
ティラノスクリプトの使い方まで書くと記事が終わるのでチュートリアルで覚えてください。ADVはゲーム制作のなかで特に難易度が低いのでおすすめです。

https://tyrano.jp/usage/tutorial/about

ゲームができたらTL上に表示させるには2つの方法で実装できる

○方法1:ノベルゲームコレクションに公開する
ノベルゲームコレクションはティラノスクリプト、ティラノビルダー製のゲームを公開できるサービス。
ここで公開されたゲームのURL末尾に「?tlplay=1」を追加してつぶやくことでTL上のプレイが可能になる。
とっても神棚。
ただし、応募条件として完成途中のものや体験版は応募できないのでテストプレイ用にというわけにはいかない。
あと公開されるまでに一週間ほどの審査時間があるので
本田圭佑ブームが去ってしまうことを考えると今回は見送りだ。

○方法2:サーバーにアップする。
自分が利用している「さくらレンタルサーバー」で説明を進めていく。
おおよそほかも一緒だと思う

http://shikemokumk.hateblo.jp/entry/2018/03/28/235244

ほとんどこのリンクにある通りなのでそれを見ながら一例として見てほしい。

・ゲームをアップロードする。
ゲームを丸ごとアップロードすればOK。

・SSLを導入する
いわば「http "s"://~」になっていること。
なんとさくらレンタルサーバーは無料でSSLが導入できる。やったぜ。
https://help.sakura.ad.jp/hc/ja/articles/115000136822--無料SSL-サーバコントロールパネルからの導入手順

自分のサーバーがSSLを無料で使えるかどうかとかは各々調べていただきたい。
手軽なゲームをつくっている限りは高価なSSLを導入はしなくてもいいかと。
確認として「http "s"://」でアクセスできていればOK。

・index.htmlを編集
headタグ間におまじないをいれる。
次の「Twitterへの申請」に必要な文面。
私の場合はこんな感じ

<meta name="twitter:card" content="player">
<meta name="twitter:site" content="@wiki_da">
<meta name="twitter:title" content="デプシーとじゃんけん">
<meta name="twitter:description" content="デプシーとじゃんけん">
<meta name="twitter:image" content="https://wikida.net/gametalk_janken/image.png">
<meta name="twitter:player" content="https://wikida.net/gametalk_janken/index.html">
<meta name="twitter:player:width" content="960">
<meta name="twitter:player:height" content="640">

twitter:imageとtwitter:playerは必ず「http "s"://」で入れること。(1敗)

・Twitterへの申請
https://cards-dev.twitter.com/validator
上記リンクからTwitterにTL上への埋込の許可を申請します。
テキストボックスに「http "s"://」で入力します。(httpで入力して2敗)
「Preview Card」ボタンを押してLOGが全て緑色にの文字が表示され、プレビューが想像どおりなら完了です。

赤い字でERRORなどが表示されていたらスペルミスやタグの位置、「http "s"://」になっているかなど確認してください。
紹介している記事だと初回に申請ボタンがあるとのことですが
現在は手順が簡略化されているので「Preview Card」ボタンを押すだけで大丈夫です。

※余談
ティラノスクリプトにはURLパラメータからシナリオ分岐できるプラグインがある。
https://tyranos.me/archives/216
このパラメータを入れていないURLだけ申請しても申請していないパラメータのURLはプレイできない。
もし利用するときはすべてのパラメータを申請する必要がある。

・レッツ、ツイート!
ここまでできたらあとは「http "s"://」のURLでつぶやくだけ。(1敗)
自動で動画のような再生マークが出てTL上でプレイできる。

○で、これがなんの役に立つんだ?

今後Twitterを利用したキャンペーンのパロディができるし、
野球拳とかTwitter上でプレイできたりする。すごい。
みんなもどんどんじゃんけんしよう。

サポートは執筆時のコーヒー代にいたします。