プログラミング

ブラウザゲームをPWA(Progressive web apps)化してiPhone/Android版を公開した話

投稿日:

PCブラウザゲームを公開してしばらくたった時にスマホ版も出したいなと思いました。ブラウザゲームなのでそのままでもスマホのWebで開けば遊ぶことができます。しかしスマホが回転するごとに画面が乱れたり、アドレスバーが邪魔だったりします。また収益化の面でいえば、ブラウザゲームのままの状態であるとスマホの最大のメリットであるAdmobを使用する事ができません。

以下、PCブラウザゲームをPWA(Progressive web apps)としてiPhone/Androidのネイティブアプリとして公開した話です。要点、キーワードのみで簡潔に述べました。参考にされる場合は自己責任でお願い致します。

PWAは意外と簡単だった

PWAの作り方を全く知らない状態からスタートしました。かなり多くの作業量を想定していましたが、情報収集をしていくうちに意外とあっさりできる事が分かりました。

・WebViewを1つ用意する

ほぼこれだけで終了です。
AndroidならWebView、iPhoneならWKWebViewです。これにブラウザゲームのURLを指定するだけで基本部分は完成です。

WebViewの画面サイズ調整に少々苦労

Android、iPhoneともに様々な画面サイズがあるので、その全てにおいて不具合がない要する必要があります。これが私にとっては結構大変でした。htmlのビューサイズ指定の部分を少し勉強しなおして何とか形にしました。

Admob広告表示/非表示にJavascript連携を使用

ネイティブ側のAdmob広告の表示/非表示は Java(Objective-c )ー Javascript間の連携を使用する事で実現できます。この連携機能は非常に便利で、やりたい事はほぼできると思われます。具体的な連携方法(使用する関数など)はWeb検索で記事が多数見つかります。

Android審査は難なく通過

Android版で苦労した点はWebViewの画面サイズの調整ぐらいでした。Play Consoleの審査もすぐにAcceptされて公開する事ができました。アップデートしていく上で何回かリジェクトをもらいましたが、原因は全てスクリーンショットの内容についてでした。シューティングゲームだったのですが、相手を撃っている画像は「暴力的」という理由で全てリジェクト対象になりました。銃をかまえてスコープで覗いている物も落とされました。また判断基準は一定でなく、一度通過した物も次回アップデート時に違反となった事もありました。

iPhone審査はやや厳しめ

PWA化に関する部分でのNGはありませんでしたが、それ以外の部分で何度もリジェクトを受けました。
解決する事ができなかったのが

・アカウント削除機能についての審査

です。ゲーム内で得たポイントの記憶やランキングなどためにゲームアカウント作成機能は当たり前のように組み込んでいました。しかし近年の規制強化でユーザー側でアカウントを削除できる機能を実装してく必要があるそうです。このアカウント削除機能の規定がとんでもなく厳格で、小規模開発者に対応できるレベルではないと感じました。

とりあえず公開だけしたかったのでやむを得ず、アカウント作成機能ごと削除する事で審査を通過しました。作成機能自体がなければ削除機能の実装の必要もないからです。しかしアカウントがないとランキング参加などやり込み要素が無くなってしまうのでゲームとしては大きな痛手です。将来的にはしっかりと削除機能を実装したいと思います。

PWA最大のメリットはストアへの掲載

PCブラウザゲームを公開して困ったのが宣伝方法です。ブラウザゲームは自分の裁量で自由に作成、公開ができますがブラウザゲーム用のストア的な物がないので宣伝に苦労しました。海外の大手ゲームサイト「Crazy Games」への登録を試みましたが審査が厳しく何度やってもリジェクトを受けました。提出したゲームの質が低かったとも言えます。しかし完成度が低くても多くの人に遊んでもらいたいものです。

PWAでGoogle Play Store、App Storeという2代巨頭ストアに載る事ができます。あっという間に数100DLを得る事ができました。人の目に触れるようにはなったのでここからはゲームの完成度次第でその後のDL数、収益が決まってくると思われます。

-プログラミング

執筆者:

関連記事

Android Studio Admob Error “No Ads Config” from Domain “com.google.android.gms.ads

D/MyApp: {“Code”: 3,“Message”: “No ad config.”,“Domain&#82 …

有限要素法の弾塑性解析Pythonコードを実行してみた

有限要素法、弾塑性解析についてWeb検索をしていた所、Pythonコードを見つけました。 https://qiita.com/Altaka4128/items/86e25d66196dfe7160f3 …

FFmpeg.wasmの使い方。クロスオリジンアイソレーション(COOP,COEP)って何ですの?

今さらですがJavascriptでFFmpegが使えるようになっているらしいとの情報を得て早速試してみました。FFmpeg.wasmというらしいです。公開された当初は容易に使用できたらしいですが、現在 …

blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

エラー内容と状況 JavascriptからPHPを呼び出したら下記エラーがAccess to XMLHttpRequest at ‘https://ooo/xxx.php’ f …

How to use FFmpeg.wasm. What’s the Cross Origin Isoration?

Nowadays, I got the information that FFmpeg can be used with Javascript and I tried it immediately. …

スポンサーリンク