TWSNMP MV開発21日目：Android版も謎の現象に悩む

今朝は４時半に、助手の猫さんが起こしてくれました。彼女はお腹が空いて大変だったようで大騒ぎしていました。
昨日は、サッカー皇后杯準決勝を観ました。浦和レッズレディースが延長後半に劇的な同点ゴールでPK戦を制して決勝進出です。一昨日の男子日本代表の試合とは一味違いました。

昨日、iOS版の問題も解決できたのでAndroidのエミュレーターで試してみました。問題なく簡単に動くと思っていましたが、そんなに開発は甘くないです。これまた、謎の問題続出です。

• TWSNMP　FCと通信できない（このためマップも表示できない）

• 下のボタンナビが、右半分しか表示されない

• ダークモードの動作が変

まったく手がかりがないので、まず、AndroidのWebViewのデバックをする方法調べました。

Android WebViewのデバック方法 - Qiita

５年前の記事ですが、今でも大丈夫でした。
こちらは、普通のChromeのアドレスバーに chrome://inspect と入力すれば
OKでした。Androidエミュレータのアプリがでてきました。

inspectで見慣れたデバック画面が開きます。

デバック画面のコンソールで確認するるとTWSNMP FCと通信できない問題はAndoridのセキュリティーの制限でhttpとhttpsの通信が混在しているのがだめだったようです。capacitor.config.tsに

  server: {
    androidScheme: 'http',
    cleartext: true,
  },

  android:{
    allowMixedContent: true,
  },

を書けば解決しました。

下のボタンナビ

が右半分しか表示されない問題は、半分右に移動のCSSが変な動作になっているようでした。Andoroid向けに修正するのも何なのでボタンナビの種類を基本的なものに変更してみました。

門が丸くないものす。これで、うまくいったのでこれにします。

ダークモードの切り替えは、謎のままです。マップの表示は切り替わりますが、ボタンなどのその他の表示がだめです。切り替え自体の処理は問題ないのですがtailwindcssの動作が反映されていないようです。
とりあえず、保留にしようと思います。

TWSNMP MVのマップ表示のソースを見ていてズーム機能をつけるアイデアを思いつきました。試してみると

うまくいきます。
これは、TWSNMP FCとシン・TWSNMPにも応用できそうです。
PCだとマウスのホイールで拡大縮小できそうです。

明日に続く