ポリシー違反「偶発的クリックを誘導するレイアウト – 予期しないタイミングでのインタースティシャル広告の表示」を解決した話

2024年1月7日

開発環境
OS:Windows 11
SDK:Android Studio Flamingo | 2022.2.1

概要

ポリシー違反「偶発的クリックを誘導するレイアウト – 予期しないタイミングでのインタースティシャル広告の表示」の警告メールが届きました。

ポリシー違反の発生から解決までの顛末。

ポリシー違反は唐突に届く

またしても唐突にポリシー違反の警告メールが届きました。

今回指摘されたのはアプリ「エストーク」、サーバーレスでも動くチャットアプリです。

今回はどんな指摘なんでしょうか。

早速、ポリシーセンターを表示します。

検出された問題は、

「偶発的クリックを誘導するレイアウト – 予期しないタイミングでのインタースティシャル広告の表示」

そして、添付されていた画像は、

インタースティシャル広告が表示された画像でした。

問題とあわせて考察すると

偶発的クリックを誘発するタイミングでインタースティシャル広告を表示してますよ、という指摘のようです。

そこで改めてアプリ「エストーク」のインタースティシャル広告表示タイミングを見直すとフレンドリスト表示時、画像リスト表示時、チャット画面表示時の3か所でした。

画面を表示するタイミングで確率でインタースティシャル広告を表示しています。

ポリシー違反の指摘を踏まえると画面表示時にインタースティシャル広告を表示すると偶発的クリックを誘発する、ということのようです。

さて、どう改修するか。

表示タイミング自体は変えたくない。

でも、画面表示のタイミングで唐突にインタースティシャル広告を表示すると偶発的にクリックを誘発する。

そこでインタースティシャル広告を表示する前に「これから広告を表示します。」というポップアップを表示するように改修してみました。

ポリシー違反解除

審査リクエストを出した翌日。

ポリシー違反が解除されました。

画面表示直後にインタースティシャル広告を表示させる場合は

広告を表示する旨をポップアップ表示するなどワンクッション置いた方がよさそうです。

今月のみてみて(2023年12月)

Firebase連携アプリ、みてみてエストーク伊勢125社巡り

このうち、みてみてにフォーカスを当て、Firebaseのアクセス動向やアプリの改善を考察する開発記事です。

Realtime Database+Storage構成の投稿アプリ

まずはアプリのユーザー数の変動とともにFirebaseのアクセス動向を確認します。

2023年12月1日~2023年12月31日のユーザー数の変動

(ユーザー数の変動)

1ヶ月の新規獲得ユーザー数

アプリの起動処理を少し改善したもののユーザー数に変動なし。

(インストールの上位国)

今月もフィリピン、インドネシアがインストール率上位を維持。

パキスタン、マレーシアでも動きあり。

2023年12月31日直近のFirebaseの変動

(Firebaseの変動)

直近のfirebaseの動き
1ヶ月のfirebase使用量

大きな動きはなし。

2023年12月1日~2023年12月31日のAdMob

今月はAdMob広告収入:29円、 Firebase使用料:0円となりました。

今月のみてみて

(今月の投稿ピックアップ)

Happy New Year。

今後の改善案

(未消化の課題)

・投稿の編集機能追加

・写真を複数投稿可能にする

・手持ち画像も投稿できるようにする

・盛り上がってるトークの強調表示

・チャット機能強化

・アプリUIブラッシュアップの継続

・フレンドグループ化と共有機能の追加

ポリシー違反「コンテンツの前面に重なって表示されるGoogleが配信する広告の扱い」を解決した話

2023年10月22日

開発環境
OS:Windows 11
SDK:Android Studio Flamingo | 2022.2.1

問題

以下に示した画像はポリシー違反「コンテンツの前面に重なって表示されるGoogleが配信する広告の扱い」に該当します。 修正しなさい。

概要

とあるアプリの改修リリースを行ってから5か月が経過したある日、突如、ポリシー違反「コンテンツの前面に重なって表示されるGoogleが配信する広告の扱い」の警告メールが届きました。

ポリシー違反の発生から解決までの顛末。

ポリシー違反は突然に

アプリ「みてみて」を改修し、リリースしたのが2023年5月4日。

それから5か月が経過した10月14日、突如、ポリシー違反の警告メールが届きました。

メールが届いた時点ですでに広告配信に制限がかけられている模様。

それは困る、と慌ててAdmobのポリシーセンターを確認してみると、

ポリシーセンターに問題と関連画像が表示されていました。

検出された問題は、

「コンテンツの前面に重なって表示されるGoogleが配信する広告の扱い」

そして、添付されていた画像は、

アプリのマップ画面でした。

どうやらこのマップ画面が違反対象のようです。

う~ん、何が駄目なのか・・・

パッと見た感じでは分かりません。

なんとか解決の糸口はないかと「重なっている」点に注目してみると

Googleマップの上にバナー広告を配置していたことに気付きました。

そう確信し、レイアウトの調整を行い、アプリをリリース。

アプリがストアに展開されるのを確認し、ポリシーセンターから審査をリクエスト。

違った

そして、翌日。

早々と返ってきた返事。

ち、違ったのか・・・

こうなってくると何が駄目なのか、Admobに聞きたくなるが明確な問い合わせ先がない。

そこでなんとか意思疎通を図ろうと試みる。

リクエストのコメント欄に「コンテンツと表示が重ならないようマップ画面のレイアウトを修正しました。修正内容が間違っているなら詳細を教えて欲しい」

と記入。再度、リクエスト。

すると約2時間後・・・

また同じフォーマットでメールが返って来た!

コメントに対するリアクションもない・・・

どう改修すればよいか検討がつかない、しかし、広告配信の制限を解除したい。

広告自体を削除すれば、コンテンツと重なるという違反は解除されるはず。

これで少なくともマップ画面以外の広告は復帰できる。

そう期待し、再審査に挑んだ。

う、嘘だろ

そして翌日。

届いたメールを見て驚愕した。

デバッグ用フォルダ

ポリシー違反が解決されていない。

そ、そんなバカな・・・

広告自体を削除したのに・・・

絶望しかけたそのとき、

ふとポリシーセンターを見直してみると問題の欄に違反項目が追加されていた。

ヒントを出してくれているのかい!(涙

新たに追加された問題は、「サイトの仕様:ナビゲーション」であった。

ガイドラインを確認すると広告の近くにボタンなどを配置し、誤操作を誘発してしまうのはポリシー違反になるとのこと。

その点を考慮し、レイアウト調整を行い、アプリをリリース。

再審査をリクエストした。

ポリシー違反解除

問題発生から4日。

ついにポリシー違反が解除されました。

はてさて最初の指摘でこの修正ができるものなんだろうか?という疑問が沸き起こる。

最終的にポリシー違反が解除されたレイアウトが以下です。

回答

SHA-1証明書のフィンガープリントを確認する

2023年10月18日

開発環境
OS:Windows 11
SDK:Android Studio Flamingo | 2022.2.1

概要

GCPなどを利用する際に登録が必要となるSHA-1証明書のフィンガープリント。
フィンガープリントの確認の方法を記載します。

デバッグアプリのフィンガープリント

デバッグモードで作成したAndroidアプリのフィンガープリントは同じ開発環境(同一PC内のAndroid Studio)で作成する場合、全てのアプリで共通の値となります。

デバッグアプリのフィンガープリントを確認するには、下記コマンドを実行します。

keytool -keystore path-to-debug-or-production-keystore -list -v

keytoolの実体は、C:\Program Files\Android\Android Studio\jbr\bin\keytool.exeです。

環境変数のパスに「C:\Program Files\Android\Android Studio\jbr\bin」を追加するか、

C:\Program Files\Android\Android Studio\jbr\binのフォルダに移動した後、コマンドを実行する必要があります。

また、path-to-debug-or-production-keystoreは、keystoreのパスです。

通常は下記のように.androidフォルダ内に格納されています

C:\xxxxx\.android\debug.keystore

コマンドを実行すると下記のようになり、フィンガープリントが表示されます。

キーストアのパスワードを聞かれますが、何も入力せずエンターキー押下で出力されました。

リリースアプリのフィンガープリント

リリースアプリの場合はGoogle Play Consoleから確認できます。

まずは確認したいアプリを選択し、タブから設定の「アプリの署名」を選択。

アプリ署名鍵の証明書から確認することができます。

デバッグ用フォルダ

今月のみてみて(2023年9月)

Firebase連携アプリ、みてみてエストーク伊勢125社巡り

このうち、みてみてにフォーカスを当て、Firebaseのアクセス動向やアプリの改善を考察する開発記事です。

Realtime Database+Storage構成の投稿アプリ

まずはアプリのユーザー数の変動とともにFirebaseのアクセス動向を確認します。

2023年9月1日~2023年9月30日のユーザー数の変動

(ユーザー数の変動)

1ヶ月の新規獲得ユーザー数

前回のアプリ改修日が2023年5月4日。

そして、いまだ改修が進まぬ状況。

それでもユーザー数の変動があるのはありがたい話。

(インストールの上位国)

今月もフィリピン、インドネシアがインストール率上位を維持。

スウェーデンは初めてか。

2023年9月30日直近のFirebaseの変動

(Firebaseの変動)

直近のfirebaseの動き
1ヶ月のfirebase使用量

Hosting(Webサイト)で少しアクセスが伸びる。

Webサイトはおまけ要素なので上限80%超えてきたらWebサイトを閉じるか検討しないとだがそこまで伸びないか。

2023年9月1日~2023年9月30日のAdMob

今月はAdMob広告収入:56円、 Firebase使用料:0円となりました。

今月のみてみて

(今月の投稿ピックアップ)

久々に通いたくなる博多らーめんのお店を発見。

今後の改善案

(未消化の課題)

・アプリ起動処理の見直し

・チャット機能強化

・アプリUIブラッシュアップの継続

・フレンドグループ化と共有機能の追加

新機能のお知らせ

執筆:2023年8月27日

新機能のお知らせです。
近日、新機能として掲示板、通称「みんなの声」を追加致します。
伊勢志摩のリアルタイムな情報などを書き込んでいきたいと思っています。
是非ともお気軽にご利用ください。

Flutter SDKバージョンを管理する

2023年8月20日

開発環境
OS:Windows 11
SDK:VS Code + Flutter 3.7.5

概要

プロジェクト毎にFlutter SDKのバージョンを使い分ける方法です。

Flutter SDKのバージョン管理

Flutter SDKの開発サイクルは早いです。

日々、機能改善、機能追加が行われており、それに伴い、SDKバージョンも上がっています。

今現在(2023.08.20)の最新バージョンは、3.13.0です。

(SDKバージョンはこちらをチェック)

最新バージョンを使うことで既存機能やセキュリティの向上、新しい機能が利用できるなどのメリットがありますが、

その一方、バージョンが上がることによって問題になるのが挙動やI/Fの変更です。

自身がコーディングした箇所でバージョン違いによるI/Fの問題が発生する分には対応できますが、

組み込んでいるパッケージ内で最新バージョンに対応できないエラーが出るとお手上げです。

そこでそのようなバージョン違いによるパッケージ内エラーが発生するプロジェクトでは、

Flutter SDKのバージョンを開発当時のまま使用することでエラーの発生を抑えます。

(特にFlutter SDKバージョン2.x.x→3.x.xのバージョンアップはエラーが出やすいです。)

Flutte SDKバージョン管理ツール、fvmを使用します。

fvmをインストールする

まずはfvmをインストールします。

インストール手順については下記を参照してください。

Flutterプロジェクトにfvmを設定する

fvmで管理したいプロジェクトのフォルダに移動し、fvmコマンドを実行します。

コマンド内容
fvm releasesFlutter SDKのリリースバージョンをリスト表示する
fvm use (version)使用するバージョンを指定する
fvm install (version)指定バージョンのFlutter SDKをインストールする
fvm listインストール済みバージョンをリスト表示する
fvm remove (version)指定バージョンを削除する

※fvm useコマンドは、Windowsの場合、管理者権限のあるコマンドプロンプトで実行する必要があります。

fvmの設定が完了するとプロジェクトフォルダ内に.fvmが作成されます。

fvmを使用する

後はflutterコマンドの前にfvmを付けて使用します。

アプリを実行するなら、

fvm flutter run -d (実行対象)

アプリを作るなら、

fvm flutter build appbundle

今回は以上です。

Windowsにfvmをインストールする

2023年8月20日

開発環境
OS:Windows 11
SDK:VS Code + Flutter 3.7.5

概要

Flutter SDKのバージョン管理ツール、fvmをインストールします。

Chocolateyをインストールする

Windowsでfvmをインストールする場合、

Chocolatey(ソフトウェア管理ツール(無料))を使ってインストールすることになります。

そのため、まずはChocolateyをインストールします。

管理者権限のパワーシェルを起動し、下記コマンド※を入力します。

※複数行で表示されていますが、1つのコマンドです。

(詳細は、こちら

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString(‘https://community.chocolatey.org/install.ps1’))

途中、キー入力が必要ですが、「Y」か、「A」を入力すればインストールが継続します。

これでChocolateyがインストールできました。

fvmをインストールする

次に管理者権限のパワーシェルで下記コマンドを入力し、fvmをインストールします。

choco install fvm

こちらも途中、キー入力が必要です。「Y」か、「A」でインストールが継続します。

これでfvmのインストールが完了。

のはずですが、コマンドプロンプトで「fvm –version」と入力しても動作しませんでした。

fvmのインストールが失敗する要因

どうやらfvmのインストールが失敗しているようです。

もう1度、fvmインストールコマンド「choco install fvm」を実行し、

キー入力の場面で「P」を入力し、実行スクリプトを確認してみます。

スクリプトを見ると、

dart pub getで何かを取得し、dart compileを使ってfvm.exeを作成する。

という流れのようです。

スクリプトが成功するとC:\ProgramData\chocolatey\lib\fvm\binにfvm.exeができるよう

ですが、フォルダの中を確認してみると存在しません。

つまり、dart compileでfvm.exeが作れていないってことのようです。。。

そこで最初に実行した「choco install fvm」コマンドの実行結果を見直してみると・・・

Error: Unable to find git in your PATH.

エラーが出ていました。

「git」が見つからない、だと。

gitをインストールする

PCに「git」がインストールされていないのが問題だったようです。

そこで管理者権限のパワーシェルで下記コマンドを入力し、gitをインストールします。

choco install git

こちらも同様、途中、キー入力が必要です。「Y」か、「A」でインストールが継続します。

もう一度、fvmをインストールする

gitのインストールが完了したので再度、fvmをインストールします。

fvm自体はすでにインストール済み、スクリプトが失敗した状態なので

強制インストールのオプション付きでインストールコマンドを実行します。

choco install fvm –force

ついに成功しました。

これでfvmが使用できます。

Macにfvmをインストールする

ちなみにMacにfvmをインストールする場合は下記コマンド。

brew install fvm

Homebrewがインストールされていれば、これだけでインストールできます。

(Windows)Chonolatey = (Mac)Homebrewって感じですね。

今回は以上です。

二見浦海水浴場

執筆:2023年8月19日

2023年の夏も終わりが近づいてきました。
ここ2、3年せっかくの夏にも関わらず夏らしいことをしていなかったな、なんて思ったら、無性に泳ぎたくなりまして久振りに二見浦海水浴場に行ってきました。
ここは伊勢神宮125社の1社、御塩殿神社のすぐ近くにある公設海水浴場で水質はそれほどですが、遠浅の穏やかな海が楽しめます。
二見浦といえば、お伊勢参りの参拝者が二見浦の浜辺で海水を浴び、身を清めて伊勢神宮を訪れたとも言われています。
伊勢神宮参拝の前に訪れてみてはいかがでしょうか?

Webサイトを表示する

2023年8月5日

開発環境
OS:Windows 11
SDK:VS Code + flutter 3.7.5

概要

Webサイトを表示します。

Webサイトを表示する方法

flutterでWebサイトを表示する方法は2パターンあります。

Webブラウザを起動させて表示する方法と

ウィジェットWebViewを用意し、ウィジェットに表示させる方法です。

パターン1.Webブラウザを起動させて表示する

まずはパッケージ、url_launcher(ver 6.1.11)を導入します。

パッケージ詳細はこちら

コマンド入力する場合は、プロジェクトフォルダまで移動した後、下記を入力します。

flutter pub add url_launcher

あとは、launchUrlString(URL)をコールするだけです。

今回は、関数化し、ボタンタップ時に実行させるようにしました。

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher_string.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

void _openUrl() async {
  const url = 'https://messageexchanger-fa3e1.web.app';
  if (await canLaunchUrlString(url)) {
    await launchUrlString(url);
  } else {
    throw 'can not access this url.';
  }
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        height: double.infinity,
        alignment: Alignment.center,
        child: Column(
          children: <Widget>[
            Expanded(
              flex: 1,
              child: Container(
                alignment: Alignment.center,
                child:Image.asset('images/sample.jpg'),),),
            Expanded(
              flex :1,
              child: Container(
                alignment: Alignment.center,
                child: ElevatedButton(
                  onPressed: () async {
                    _openUrl();
                  },
                  style: ElevatedButton.styleFrom(
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(5),
                    ),
                  ),
                  child: const Text('Web'),
                  ),))
          ],
        ),
      ),
    );
  } 
}

Chromeで実行した結果、Webサイトが表示されました。

起動時
ボタンタップ後

Androidで実行する場合は、AndroidManifest.xmlにqueries定義を追加する必要があります。

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.sample">

    <queries>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="https" />
        </intent>
    </queries>

   <application
        android:label="sample"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">

  ・・・
起動時
ボタンタップ後

パターン2.ウィジェットWebViewを用意し、ウィジェットに表示させる

まずはパッケージ、webview_flutter(ver4.2.2)を導入します。

パッケージ詳細はこちら

コマンド入力する場合は、プロジェクトフォルダまで移動した後、下記を入力します。

flutter pub add webview_flutter

あとは、ScaffoldのbodyにWebViewWidgetを配置するだけです。

今回は、メイン画面とサブ画面の2画面を作成し、メイン画面でボタンタップするとWebViewWidgetを配置したサブ画面に遷移させるようにしてみました。

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class SubPage extends StatelessWidget  {
  const SubPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:WebViewWidget(
            controller: WebViewController()
              ..setJavaScriptMode(JavaScriptMode.unrestricted)
              ..loadRequest(Uri.parse("https://messageexchanger-fa3e1.web.app"))
          ),
    );
  }
}

Androidアプリで実行した結果、Webサイトが表示されました。

メイン画面
サブ画面

WebViewの注意点

webview_flutterのパッケージ詳細を見ると

サポート対象機種が、AndroidとiOSとなっています。

サポート対象に記載のないChromeで表示するとサブ画面表示のタイミングでダウンしました。

Chromeでは使用できないようです。

今回は以上です。