ホーム画面のアイコンだけが、青い「×」のままだった ― 3本のアプリで同じ不具合を繰り返した理由

ストアでは正しいのに、ホーム画面だけ違う

アプリを Google Play で更新して、スマホのホーム画面を見ると、見覚えのないアイコンが並んでいる。

白い背景に、水色の「×」のような印。ストアのページには、ちゃんと自分で用意したアイコンが出ているのに、ホーム画面だけが違う。

私はこの不具合を、3本のアプリで続けて起こしました。 節約記録アプリ、ワードバトル、ゴルフのスコア集計アプリです。

この水色の「×」は、アプリを作るのに使っている Capacitor という仕組みの、最初から入っているアイコンでした。

1本目:「問題ありませんか?」

最初に気づいたのは、6月6日の朝。節約記録アプリのクローズドテストで、更新した版を入れたときです。このときは「読み込み中」のまま起動しない不具合も同時に出ていて、その話は審査を3回通っても起動しなかった記事に書きました。

アイコンについて、AIはすぐに「Capacitor の初期アイコンです」と見抜きました。私のアイコン画像を各サイズに変換して、アプリの中のアイコンのフォルダに上書きする、という手順です。

上書きするのは、各フォルダの2つのファイル(ic_launcher.png と ic_launcher_round.png)でした。

ところが、フォルダを開くと、もう1つファイルがありました。ic_launcher_foreground.png。気になったので、聞きました。

アイコンが格納されている各フォルダには「ic_launcher_foreground.png」も含まれています。問題ありませんか?

AIの答えは、「問題ありません。アダプティブアイコン用のファイルで、今回は上書き不要です。そのまま触らないでください」でした。

言われたとおりにして、作り直しました。

9日後、まだ違っていた

6月15日の夜、別の修正の版が審査を通ったので、あらためてアイコンを直そうとしました。ホーム画面は、まだ私のアイコンではありませんでした。

AIと一緒にフォルダを調べていくと、原因が分かりました。

Android 8 以降のスマホは、ホーム画面のアイコンを「アダプティブアイコン」という別の仕組みで描きます。その設定ファイル(mipmap-anydpi-v26 フォルダの ic_launcher.xml)に、こう書かれていました。

アイコン = 背景(白) + 前景(ic_launcher_foreground)

前景として呼ばれていたのは、まさに6月6日に「触らないで」と言われたファイルでした。中身は、最初から入っていた水色の「×」です。私が差し替えた2つのファイルは、今のスマホのホーム画面では使われていなかったのです。

直し方は、こうでした。

  1. 前景のファイル(ic_launcher_foreground.png)を、私のアイコンに差し替える
  2. 背景の色(白)を、アイコンと同じ濃い緑にする
  3. アダプティブアイコンは、スマホによって円や角丸に切り抜かれる。中央のおよそ3分の2から外は切れることがあるので、アイコンに余白をつけて収める

この版が審査を通り、スマホで更新すると、ホーム画面のアイコンがやっと直っていました。

2本目:節約記録アプリのときと同じ

6月26日、ワードバトルで同じことが起きました。今度は、私から先に言いました。

節約記録アプリのときも発生していた起動アイコンのバグがワードバトルでも発生しています。

ストアのアイコンは紺色の角丸に、青い円と黄色い稲妻。ホーム画面は、白に水色の「×」。AIの見立ては同じで、アダプティブアイコンの一式をまるごと作り直すことになりました。

ついでに1つ頼みました。アイコンの下のほうに入っていた「WORD BATTLE」という文字が、ホーム画面の大きさだと読めなかったので、消してほしいと。

ここで、AIが妙に凝り始めました。文字を消した跡に光る輪の一部が残る、反対側の輪を使って光ごと直す……と、翌朝まで分析が続きました。私はこう返しました。

そんなに難しく考えなくても、アイコンですから、サクッと作成していただいて大丈夫ですよ。

AIは「了解しました、サクッと仕上げます」と答えて、すぐにアイコン一式を作ってくれました。

3本目:自分で確かめる場所が分かっていた

6月27日の朝には、ゴルフのアプリでも同じ症状に気づきました。

今度は最初から「ワードバトルで発生していた不具合と同じと思われますので、同じように一式を書き出してください」と頼みました。AIは、元の画像の角が白く塗り残されていて、丸く切り抜いたときに汚く見えることにも気づいて、そこも直してくれました。

そして今回は、私のほうから確かめたい場所を聞きました。mipmap-anydpi-v26 に、古いファイルが残っていないか。

AIに教わって、そのフォルダの2つの設定ファイルを開き、前景と背景が新しい画像と色を指しているかを自分の目で確かめました。

1本目では、どこを見ればいいのかも分かりませんでした。3本目では、見るべき場所を自分で言えるようになっていました。

なぜ3回も起きたのか

理由は単純でした。Capacitor で新しいアプリを作ると、毎回、初期アイコンの一式が入った状態から始まるからです。

アイコンを差し替えるとき、目に見える画像(ic_launcher.png)だけを替えても、今のスマホのホーム画面には反映されません。新しくアプリを作るたびに、同じ落とし穴が待っていました。

これからアイコンを差し替える方へ

Capacitor で Android アプリを作っている方は、アイコンを差し替えたら、次の4つを確かめてみてください(私の3本のアプリで効いたことです)。

  1. res/mipmap-anydpi-v26/ の ic_launcher.xml と ic_launcher_round.xml … 前景と背景に、何を指しているか
  2. 各 mipmap- フォルダの ic_launcher_foreground.png … 自分のアイコンに替わっているか
  3. 背景の色 … 白のままになっていないか
  4. 余白 … 大事な部分が中央に収まっているか。角に塗り残しがないか

差し替えたあとは、Android Studio で「Clean Project」をしてから作り直すと確実です。

振り返って

左に水色の「×」のアイコン、右に節約記録アプリ・ワードバトル・ゴルフのいまのアイコン3つを並べた比較画像
左は6月ごろ、ホーム画面に出ていた水色の「×」。右はいま(10月)のホーム画面。節約記録とワードバトルは、その後アイコンの絵そのものも描き替えています

1本目のとき、私は「問題ありませんか?」と聞きました。あの質問は、正しい場所を指していました。

AIの「問題ありません」で、そこで止まってしまった。気になったことは、答えをもらったあとでも、もう一度確かめていい。3本のアイコンが、それを教えてくれました。

この記事のアプリ:ワードバトル/節約記録アプリ(紹介ページ)

コメント

タイトルとURLをコピーしました