前回を受けて早速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
以下の内容で作成します。
<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 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なので、さらにオフライン対応などもできたらなぁなどとも思っています。