Dumb Game Lab

ブログ · 開発の裏側

開発日誌 · レビュー対応

「スマホの比率に合っていません」というレビューが教えてくれたこと

Justin Lee, Dumb Game Lab ·

ネットカフェ育成(PC방 키우기)のゲーム画面。アイソメトリックのPCバンの中でお客がPCの前に座っていて、画面のいちばん下に「ショップ」、稲妻の形の「加速」、「チラシ配り」のボタンが1列に並んでいる

Android 15からは、targetSdkが35以上のアプリの画面が、ステータスバーとナビゲーションバーの下まで強制的に広がります。WebViewで描くCapacitorアプリなら、capacitor.config.jsonのandroid.adjustMarginsForEdgeToEdgeを"force"にしてWebViewをシステムバーの内側に下げ、バーの裏に透けるウィンドウ背景をアプリの地色で塗ると、下のボタンがまた見えるようになります。下の余白をピクセルの数字で足す応急処置は、端末ごとにバーの高さが違うので合いませんでした。

星1つと一緒に届いたレビュー

2026年11月2日、猫のネットカフェ育成のGoogle Playページに、星1つの韓国語レビューが1件つきました。原文は韓国語で、日本語に訳すとこうです。

「ゲームは面白いけど、スマホの比率に合っていません。動かせない家具も多いです。ゲームがスマホの比率に合うだけで、見えるボタンが増えそうなので残念です。面白いけど遊びにくいので、直ったらやります」

その日のうちにお詫びの返信を書き、原因も同じ日に見つけました。この記事は、その1日で何を見つけ、何を直したか、そしてまだ何がわかっていないかの記録です。

星1つの理由は面白さではなく、ボタンでした

レビューを読み返すと、「面白い」が2回出てきます。ゲームが嫌いで星1つをつけたのではありませんでした。見えるはずのボタンが見えず、家具が動かせなくて遊べない、という話でした。

直す側から見ると、こういうレビューはありがたいものです。面白くないという言葉はどこを直せばいいか教えてくれませんが、ボタンが見えないという言葉は、画面のどの行を見ればいいかを指してくれます。最後の一文も「直ったらやります」でした。直せば戻ってきてくれる人、ということです。

同じころ、「家具が動かせません」という報告も別に届いていました。たどってみると原因が同じだったので、2つのチケットを1つにまとめました。家具を選ぶと画面の下に移動、回転、しまう、売るのボタンが1列で出ますが、その列がまるごと隠れていました。

ネットカフェ育成のゲームタブの画面。インストール済みのゲームとロック中のゲームのカードが格子状に並び、画面のいちばん下に「ショップ」ボタンと「チラシ配り 10/10」ボタンがある
いちばん下の「ショップ」と「チラシ配り」があるこの行が、ナビゲーションバーの下に潜っていました。

Android 15で変わったこと

Android 15から、targetSdk 35以上でビルドしたアプリはedge-to-edgeが強制されます。アプリの画面が上のステータスバーと下のナビゲーションバーの下まで広がり、その下に潜る部分をよけるのはアプリ側の仕事です。このアプリはtargetSdkが36なので、そのまま対象でした。

ネイティブアプリなら、システムが渡すインセットの値を受け取って余白を決めれば済みます。うちのゲームはCapacitor 7の上でWebViewの中に描く作りで、WebView側で読むenv(safe-area-inset-bottom)の値が0で入ってきました。Webのコードは下にバーがないと信じてタブバーを画面の端にくっつけ、その上にナビゲーションバーが重なりました。

バーの高さはナビゲーションの方式や端末ごとに違うので、同じアプリでも人によって隠れ方が違ったはずだと推測しています。実際に測った値ではありません。

下の余白24pxの応急処置がだめだった理由

実は、この問題の跡は前からありました。コードに、下の余白を24px足す行が入っていたのです。下が隠れて見えたので、その分だけ持ち上げた応急処置でした。

数字1つでは足りません。ナビゲーションバーの高さは、端末ごと、ナビゲーション方式ごとに違います。バーが24pxより厚ければやはり隠れますし、バーがない環境では余計な空白ができます。応急処置は1台を直している間に、ほかの端末では潜ったままだったことになります。

そこで今回は24pxの行を消しました。余白をWebのコードが推測するのをやめて、WebViewが最初からバーの内側にだけ描かれるように変える方を選びました。

直し方:設定1行とバーの色の注入、そして検査

修正は11月2日、レビューが届いたその日にマージしました。タイクーンアプリ6本と、新しいゲームを作るテンプレートに同じ変更を入れています。

1つ目は、capacitor.config.jsonのandroid.adjustMarginsForEdgeToEdgeを"force"にしたことです。この値がWebViewをシステムバーの内側に下げます。"auto"にしなかったのは、autoはテーマにedge-to-edgeのオプトアウト設定があると無効になるのに、Android 16はそのオプトアウトを無視するからです。Android 14以下ではインセットが0なので、forceにしても何も変わりません。

2つ目はバーの色です。WebViewを内側に下げると、今度はバーの裏にウィンドウ背景が透けますが、既定値が白なので、暗いゲームの上下に白い帯ができます。そこで、ビルドのときにAndroidテーマのウィンドウ背景とステータスバー、ナビゲーションバーの色をアプリの地色で塗るスクリプトを入れました。地色が暗ければ、バーのアイコンは明るくします。androidフォルダはsyncのたびに書き直されるので、このスクリプトが必ずsyncの後に走るよう順番をつなぎました。

3つ目は再発防止です。アプリごとにこの設定が入っているかを見る検査を作り、コミットのたびに走らせるようにしました。まだ設定を入れられていないほかのジャンルのアプリ7本は、理由を書いて台帳に載せてあり、この台帳は減る方向にしか直せません。新しいアプリが設定なしで入ってきたら、検査が止めます。

  • capacitor.config.jsonにandroid.adjustMarginsForEdgeToEdge: "force"
  • ウィンドウ背景とシステムバーの色をアプリの地色で注入(syncの後に実行)
  • 下の余白24pxの応急処置を削除
  • アプリごとに設定の有無を見る検査と、減るだけの例外台帳

まだ測れていないこと

1つは実機での確認です。うちにあるテスト用のスマホはAndroid 14なので、この症状がそもそも出ません。直したビルドの下のタブバーを、Android 15の端末で自分の目で確かめる作業は、まだ残っています。

もう1つは結果の数字です。修正のあとで評価がどうなったか、あのレビューの方がまた来てくれたかは、まだ測れていません。直してから3日しか経っておらず、いま使える数字がありません。数字が出たら、この記事を直します。

レビュー35件を分けてみると

今回のことをきっかけに、PCバンのアルバイトアプリにたまっていたレビュー35件を、内容ごとに分けてみました。

いちばん多かったのは、ゲームにそもそも入れないという起動失敗の27件でした。ただし10月14日以降は、新しく入った起動失敗のレビューは0件です。前回直したものが効いている、という意味に読んでいます。

広告の話2件の中には、広告を見終わった直後にレビューをお願いするウィンドウが出る問題がありました。広告を見たばかりの瞬間は、レビューをお願いするのにいちばん悪いタイミングです。11月3日に、広告の後10分以内はレビューを聞かないように変えました。

分類件数
起動失敗27
動作の重さ3
広告2
セーブ1
操作1
その他1

FAQ

Android 15でアプリの下のボタンがナビゲーションバーに隠れるのはなぜですか?

Android 15から、targetSdkが35以上のアプリには、画面がシステムバーの下まで強制的に広がるedge-to-edgeが適用されます。アプリがバーの高さ分の余白を取らないと、いちばん下のボタンがナビゲーションバーの下に潜ります。

CapacitorアプリでadjustMarginsForEdgeToEdgeはどう設定しますか?

capacitor.config.jsonのandroidの項目にadjustMarginsForEdgeToEdgeを入れます。ネットカフェ育成では"force"にしました。"auto"はテーマにedge-to-edgeのオプトアウトがあると無効になりますが、Android 16はオプトアウトを無視するので、force側を選びました。

下の余白をピクセルで足してはだめですか?

端末ごと、ナビゲーション方式ごとにバーの高さが違うので、数字1つでは合いません。このアプリにも24pxを足す応急処置がありましたが、厚いバーではやはり隠れたままだったので、今回消しました。

WebViewをバーの内側に下げたら、上下に白い帯ができました。

バーの裏にウィンドウ背景が透けているのです。既定のウィンドウ背景が白だからです。Androidテーマのウィンドウ背景とステータスバー、ナビゲーションバーの色をアプリの地色に合わせると消えます。Capacitorはsyncのときにandroidフォルダを書き直すので、色を入れる手順はsyncの後に置く必要があります。

ほかの記事

新作ゲームと小さなお知らせを、月に1回ほどお届けします。

他の言語English한국어日本語繁體中文