Pyxel製ゲームをPWAとして公開する(2)

前回を受けて早速Pyxel製ゲームをPWAとして公開する具体的な手順を紹介していきます。

流れとしてはPWAのWebアプリを作り、それをホスティングサービスを使って公開、となります。

まずWebアプリの作成から行きましょう。

プロジェクトフォルダーの作成

Webアプリのファイル一式を含むフォルダーを作成します。アプリの名前にするのがいいでしょう。「pyxel-pwa-sample」として進めます。

ファイルの作成

Webアプリを構成するファイル群を作成して配置します。ファイルの配置としては以下のようになります。各ファイルについて説明します。

pyxel-pwa-sample
└── public
    ├── app.pyxapp
    ├── assets
    │   └── icons
    │       ├── icon-128x128.png
    │       ├── icon-144x144.png
    │       ├── icon-152x152.png
    │       ├── icon-192x192.png
    │       ├── icon-384x384.png
    │       ├── icon-512x512.png
    │       ├── icon-72x72.png
    │       └── icon-96x96.png
    ├── index.html
    ├── manifest.webmanifest
    └── serviceworker.js

app.pyxapp

Pyxelで作成したPyxelアプリケーションファイルです。

index.html

以下の内容で作成します。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>My Game</title>

    <meta name="viewport"
        content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <link rel="manifest" href="manifest.webmanifest">
    <meta name="theme-color" content="#000000">

    <script src="https://cdn.jsdelivr.net/gh/kitao/pyxel/wasm/pyxel.js"></script>
</head>

<body>
    <pyxel-play name="app.pyxapp"></pyxel-play>

    <script type="application/javascript">
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('./serviceworker.js');
        }
    </script>
</body>

</html>

How To Use Pyxel Web (日本語) · kitao/pyxel Wiki · GitHub の「Pyxel カスタムタグで HTML ファイルを記述する」にある方法を基本に PWAとして必要なWeb Application ManifestへのリンクやService Workerの登録を追加しています。 titleなどはアプリにあわせて変更しましょう。

manifest.webmanifest

PWAとして必要なWebアプリの情報を持つWeb Application Manifestと言われるファイルです。以下の内容で作成します。

{
  "name": "My Game",
  "short_name": "My Game",
  "theme_color": "#000000",
  "background_color": "#000000",
  "display": "standalone",
  "scope": "./",
  "start_url": "./",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable any"
    }
  ]
}

name, short_name などの値はアプリにあわせて変更しましょう。

serviceworker.js

PWAとして必要な、PWAならではの機能を記述するService Workerと言われるファイルです。今回は特に機能の記述は必要ないので空のファイルです。

icon-*.png

アプリのアイコン画像です。 manifest.webmanifest での定義通り各サイズのファイルが必要です。以下のサイトを使うと512 x 512 の1枚のPNGファイルから各サイズのファイルを簡単に作成できます。

tools.crawlink.com

すべてのファイルを作成したらWebアプリは完成です。続けてPC上での動作確認、ホスティングサービスを使っての公開を行います。

Node.js のインストール

このあとのPC上での動作確認やホスティングサービスを使った公開に必要なNode.jsをインストールします。

例えばWindowsであればダウンロード | Node.js から Windows Installer (.msi) をダウンロードしてインストールします。

http-server のインストール

http-server を使ってPC上でWebアプリの動作確認をしてみましょう。

PowerShellなどのターミナルを起動し、プロジェクトフォルダーをカレントディレクトリーにします。

以下のコマンドを実行してプロジェクトでnpmコマンドによるパッケージのインストールができるようにします。

> npm init

コマンドを実行するとパッケージ名をどうするかなど複数の事柄について尋ねられますが、すべてデフォルトで、つまりひたすらエンターキーを押していけば大丈夫です。

そして以下のコマンドでhttp-serverパッケージをインストールします。

> npm i http-server --save-dev

インストールできたら以下のコマンドでhttp-serverを実行します。

> npx http-server public -p 8888

実行したら、ターミナルに表示されているようにWebブラウザーで「http://127.0.0.1:8888」にアクセスしてみます。 Webブラウザー上でPyxelで作成したアプリが遊べればOKです。

ターミナルに戻ってCtrl+Cを押してhttp-serverを終了します。

Firebaseのプロジェクト作成

最後にホスティングサービスを使ってWebアプリを公開します。今回はGoogleのモバイル・Webアプリ開発プラットフォームFirebaseの1機能であるFirebase Hostingというホスティングサービスを利用します。制限もありますが無料で使うことができます。

まず以下からアカウントを登録します。

firebase.google.com

アカウントを登録したら「プロジェクトを追加」からFirebaseのプロジェクトを作成します。プロジェクト名は、これもまたアプリ名にするといいかと思います。

プロジェクトを作成したら、プロジェクトの管理画面が開くので、画面左のメニューの「構築」の中にある「Hosting」をクリックします。 Hostingの画面が表示されるので「使ってみる」をクリックします。

firebase-tools のインストール

ターミナルから Firebase Hosting へのホスティングを行うために firebase-tools をインストールします。

PowerShellなどのターミナルを起動し、プロジェクトフォルダーをカレントディレクトリーにします。そして以下のコマンドを実行します。

> npm install firebase-tools --save-dev

続けて以下のコマンドを実行してFirebaseにログインします。

> npx firebase login

そして以下のコマンドを実行してプロジェクトフォルダーに対してFirebaseを設定します。

> npx firebase init

このプロジェクトフォルダーについてどの機能を有効にするかと聞かれるのでカーソルキーの↑↓で「Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys」を選択し、スペースキーを押してチェックを入れ、エンターキーを押して決定します。

続けて複数の事柄について尋ねられますが、エンターキーを押していけば大丈夫です。強いて言えば「What do you want to use as your public directory?」の質問に対する回答がプロジェクトフォルダー内に作成しているindex.htmlを配置しているフォルダーのフォルダー名と一致しているかは見ておきましょう。おそらくデフォルト値は「public」なので一致しているはずです。