GitHub Pages + PWAでティラノスクリプトのゲームをスマホで動かしてみた

はじめに

ティラノスクリプトで作ったゲームをPWAにしたい人でGitHub Pagesを使いたい人向けの記事です。

動機

以前、この記事を読んでティラノスクリプトでもPWA対応ができることは知っていたんですが試したことがなかったのでやってみた。

qiita.com

で、PWA対応ができているかを確認するのにいちいちレンタルサーバー借りたりするのも面倒臭かったのでGitHub Pagesで代用してみました。

やったこと

まずはGitHubに適当な名前でリポジトリを作ります。
リポジトリ名はあとで使うので控えておいてください。

次にティラノスクリプトの公式サイトからサンプルのゲームをダウンロードします。
今回は数多くのゲームがリリースされていることを鑑みてv4系列を使用しました。

tyrano.jp

また、PWA対応なのでスタンダードパッケージを使っています。

ダウンロードしてきたサンプルを適当なディレクトリに入れてから git initします。

あとは、manifest.jsonを記事を参考に以下のように作成します。
追加する箇所はindex.htmlと同じ階層です。

{
    "short_name": "SHORTNAME",
    "name": "GAME_TITLE",
    "icons": [
        {
            "src": "link.png",
            "sizes": "144x144",
            "type": "image/png"
        },
        {
            "src": "link_02.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ],
    "start_url": "/<作成したリポジトリ名>/",
    "display": "fullscreen",
    "background_color": "#000",
    "theme_color": "#fff",
    "orientation": "landscape"
}