前回を受けて早速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ファイルから各サイズのファイルを簡単に作成できます。
すべてのファイルを作成したら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のプロジェクトを作成します。 プロジェクト名は、これもまたアプリ名にするといいかと思います。
プロジェクトを作成したら、プロジェクトの管理画面が開くので、画面左のメニューの「構築」の中にある「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」なので一致しているはずです。
ホスティング
設定ができたら以下のコマンドを実行してホスティングします。
> npx firebase deploy
ターミナルに表示されるメッセージの最後の方に「Hosting URL:」としてホスティング先のURLが表示されます。 これでホスティング完了です。 そのURLにPCのWebブラウザーや、スマホのWebブラウザーなどでアクセスしてみましょう。
前回紹介した通りスマホであれば「アプリをインストール」もできるはずです。
これで出来上がりですけど、最低限のPWAなので、さらにオフライン対応などもできたらなぁなどとも思っています。
