アプリの個人開発でリワード広告を表示するやり方を探している方向け。

Admob広告の一つリワード広告を自分のflutterアプリに組み込むやり方を本記事でわかりやすく解説します。

この記事は以下のような方を対象者としています。

本記事の対象者

  • アプリ開発を副業で考えている方
  • flutterにAdmobのリワード広告を組み込む方法を探している方
  • 個人開発で副収入を得たいと考えている方

目次

前置き: リワード広告とは?

Tranquilpeak
リワード広告とはゲームアプリ等でよく見かけますが、動画を見たら再度プレイできたりするあの動画広告のことです。

このリワード広告を組み込むことで、表示された広告に応じた広告料が開発者に支払われます。

もちろん広告はユーザにとっては良いものではないかもしれません。

しかし、開発者としては収益を上げることは大きなモチベーションになります。

そのため、本記事ではリワード広告をflutterを使ってどのように組み込むのか詳しく説明していきます。

そもそも個人開発の広告とはなんなのか、どれくらいの収益がもらえるのか詳しく知りたい方は下記別記事をご覧ください。

【アプリ開発】個人開発で広告収益を上げるための6つのポイントを解説

個人でアプリを作って収益を上げるやり方を探している方向け。
アプリ開発を副業で考えている方向けに広告収入のやり方、及びおすすめの収益戦略を本記事で解説します。

また、本記事の内容は下記動画でもハンズオンで解説しているのでリワード広告を組み込む際にぜひ参考にしてみてください。

まずは修正ファイルの確認をしましょう

まずはどのファイルを修正しなければならないのか説明します。
(今回はflutter createで新規作成したプロジェクトを元に解説していきます。)

リワード広告をflutterで実装する際に修正が必要なファイルは下記の4つです。

ポイント

  • AndroidManifest.xml
  • build.gradle
  • pubspec.yaml
  • main.dart

また、今回はflutter createで新規作成したデモアプリをベースに解説します。

通常下記+ボタンを押すと画面に表示されている数字がカウントされていきます。

しかし今回はこのボタンを押下したらリワード広告を表示するように処理を変更したいと思います。
Tranquilpeak

では早速各ファイルの修正箇所を説明していきます。

AndroidManifest.xmlとは?

まずはAndroidManifest.xmlファイルから修正していきます。

AndroidManifest.xmlとはAndroidアプリの様々な情報を定義するファイルです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.rewardads">
    <!-- ↓この1行を追加 -->
    <!-- この1行でアプリがインターネットに接続できるようになる -->
    <uses-permission android:name="android.permission.INTERNET" /> 
   <application
        android:label="rewardads"
        android:icon="@mipmap/ic_launcher">
        <!-- ↓下記3行を追加 -->
        <!-- ここでは広告ID(広告を識別するための一意のID)を定義(今回はテスト広告用IDを指定) -->
            <meta-data
        android:name="com.google.android.gms.ads.APPLICATION_ID"
        android:value="ca-app-pub-3940256099942544~3347511713"/>
        <activity
            android:name=".MainActivity"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
            <meta-data
              android:name="io.flutter.embedding.android.NormalTheme"
              android:resource="@style/NormalTheme"
              />
            <meta-data
              android:name="io.flutter.embedding.android.SplashScreenDrawable"
              android:resource="@drawable/launch_background"
              />
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
        <meta-data
            android:name="flutterEmbedding"
            android:value="2" />
    </application>
</manifest>

上記日本語でコメントアウトしている箇所です。

4行コードを書くだけです。

build.gradleとは?

build.gradleとはandroidアプリをビルド(ソースコードから機械用の言語に変換しアプリを起動できる状態にする)するために使われる設定ファイルです。

androidアプリは基本的にこのgradleという技術を使ってアプリのビルドが実行されます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
def localProperties = new Properties()
def localPropertiesFile = rootProject.file('local.properties')
if (localPropertiesFile.exists()) {
    localPropertiesFile.withReader('UTF-8') { reader ->
        localProperties.load(reader)
    }
}

def flutterRoot = localProperties.getProperty('flutter.sdk')
if (flutterRoot == null) {
    throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.")
}

def flutterVersionCode = localProperties.getProperty('flutter.versionCode')
if (flutterVersionCode == null) {
    flutterVersionCode = '1'
}

def flutterVersionName = localProperties.getProperty('flutter.versionName')
if (flutterVersionName == null) {
    flutterVersionName = '1.0'
}

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"

android {
    compileSdkVersion 30

    sourceSets {
        main.java.srcDirs += 'src/main/kotlin'
    }

    defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "com.example.rewardads"
        <!-- 下記minSdkVersionを16から20に変更する -->
        <!-- 理由はAdmobライブラリの最低必要バージョンが19以上であり、16のままだとバージョンのコンフリクトを起こしてアプリがクラッシュするため -->
        minSdkVersion 20
        targetSdkVersion 30
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }

    buildTypes {
        release {
            signingConfig signingConfigs.debug
        }
    }
}

flutter {
    source '../..'
}

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
}

build.gradleはたった1行の修正のみです。

pubspec.yamlとは?

pubspec.yamlファイルではプロジェクト内で使用するライブラリの名前とバージョン名を定義します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
name: rewardads
description: A new Flutter project.

publish_to: 'none' # Remove this line if you wish to publish to pub.dev

version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
<!-- 下記1行を追加 -->
<!-- この1行を追加しファイルを保存することで、自分のプロジェクトにfirease_admobライブラリをインストールできます。 -->
  firebase_admob: ^0.11.0


  cupertino_icons: ^1.0.2

dev_dependencies:
  flutter_test:
    sdk: flutter


flutter:


  uses-material-design: true

上記1行のみです。

ちなみにAdmob広告の実装についてはfirebase_admobライブラリではなくgoogle_mobile_adsライブラリの使用が推奨されているようです。

ただ、私が使った際に色々とうまくいかなかったので今回はfirebase_admobを使っています。

main.dartとは?

ようやくflutterでアプリを開発する際に使用するメインファイルの説明に来ました。

flutterアプリでadmobのリワード広告を表示するためには、下記三つの処理を書く必要があります。

ポイント

  • 広告データを生成する処理
  • 生成した広告データをアプリ起動時にロードする処理
  • 広告を表示する処理

それでは順番に説明していきます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
import 'package:flutter/material.dart';
<!-- 下記1行追加 -->
<!-- pubspec.yamlでインストールしたライブラリをmain.dartで使えるようにする -->
import 'package:firebase_admob/firebase_admob.dart';

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

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  <!-- 下記5行を追加 -->
  <!-- initStateはアプリ起動時に行う処理を管理します。 -->
  <!-- ここで広告データを生成する処理を呼び出し、アプリ起動時に広告データをロードします -->
  @override
  void initState() {
    super.initState();
    createRewardAdAndLoad();
  }

 <!-- 下記5行を追加 -->
 <!-- ここでテスト用の広告データを作成します -->
 <!-- adUnitIdで広告IDを指定します -->
 <!-- テストではなく本番用の広告IDを指定するときはadUnitIdにadmobで取得した広告IDを入れればOKです -->
  createRewardAdAndLoad() {
    RewardedVideoAd.instance.load(
        adUnitId: RewardedVideoAd.testAdUnitId,
        targetingInfo: MobileAdTargetingInfo());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        <!-- 下記7行を追加  -->
        <!-- ここではボタンを押下したら広告を表示する処理を書きます  -->
        onPressed: () {
          RewardedVideoAd.instance..show();
          RewardedVideoAd.instance.listener = (RewardedVideoAdEvent event,
              {String rewardType, int rewardAmount}) {
            print("showed");
          };
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

リワード広告のテストをしましょう

お疲れ様でした。

上記4つのファイルの修正が完了したら、flutter runコマンドでアプリのビルドランを実行しましょう。

gif画像のようにテスト用の広告が表示されたら成功です。

Tranquilpeak

さいごに

ここまでお読みいただきありがとうございました。

アプリ開発を数年続けている経験から、挫折しない個人開発のやり方について解説しています。

アプリの個人開発にご興味があれば、こちらも併せてご覧ください。

【アプリ開発】98%挫折しない個人開発のはじめ方

アプリの個人開発を始めたいけど何からしたら良いのか分からない人向け。 アプリ作りを途中で挫折しない方法を私自身の経験から本記事にて解説します。

また、私は3年ほど前に海外移住をして現在ベトナムのダナンというところに住んでいます。

ベトナムでエンジニアとして働く様子やブログ、アプリ開発のマネタイズTipsに関する動画を投稿しています。

また、海外移住の 英語とプログラミングを習得することを推奨しています。
これは私の経験則から言えることですが、上記二つのスキルがあれば海外移住は絶対に実現できます

以下に僕が実際に使って効率よくプログラミング学習ができるおすすめサービスを載せます😌

速習!おすすめプログラミング勉強法【Udemy】

いくつかプログラミング学習サービスを利用しましたが、一番効率よく勉強できると感じたのはUdemyでした。

Udemyでは動画での説明や解説等もあり親切で、学習教材も豊富にあることから プログラミング初学者の方が短期間でエンジニアを目指したいのであれば、非常に良い教材だと思います。

ちなみに私は文系卒で社会人になってから独学でudemyを使ってプログラミングの勉強をして、実際にエンジニアとして採用されました

Udemyのコースは1つ1,000円ほどなので、ITの参考本を一冊(3,000円)を買うよりもUdemyのコースを購入する方が安い上により効率的にプログラミングを勉強できると思います。
世界最大級のオンライン学習サイトUdemy

また、別記事にてダナンでの生活やIT関連についても記事を書いていますのでクリックいただけると嬉しくて踊ります💃

【Udemy】未経験から始める格安プログラミング講座4選

未経験だけどプログラミングを学んでエンジニアになりたい、社会人だから時間もそれほど多く無いので効率よく勉強したい。 私もその内の一人でした。今回の記事で最短でエンジニアになるためのおすすめUdemy講座4選をご紹介したいと思います。

【IT資格は無意味】未経験エンジニアがIT資格の勉強をおすすめしない4つの理由とは?

プログラミングを勉強し始めてIT資格を取ろうか悩んでいる方向け。 プログラミング未経験の方が資格勉強をされることは僕の経験上おすすめしません。 なぜ資格の勉強がプログラミング学習において、エンジニアの就活においてNGかこの記事で解説します。

【個人開発】副業でアプリを作りたいならサーバーは契約しない方がいい理由

個人で副業のためにアプリ開発をしてみたいと考えている方向け。 iOS/Androidの個人アプリ開発の場合データのやりとりを行うため、サーバを契約する人が多いです。 しかし、考えなしにサーバを契約するのは非常に大きなデメリットがあるため、私はあまりオススメしません。 ではどの様にしてお金をかけずにアプリ作りができるか、なぜFirebaseを使うべきなのかこの記事で解説していきます。

【海外にもある!?】海外就活でブラック企業を回避する方法

海外での就活を考えている方向けの記事です。 ブラック企業は日本企業のイメージがありますが、そんなことはありません。 日本の就活とは違う点、また海外の就活で失敗しないために事前に知っておいた方が良い情報を本記事にてまとめていきます。

【ダナンの物価】ダナン在住者が伝える2020年ベトナム最新状況!

最近観光地として人気が高まっているダナンですが、近年物価の変動が大きくなっていっているように感じます。 2019年〜2020年でのダナンの物価はどのようなものなのか、ダナン在住者として現地の声をお届けできればと思います

【残業大国】日本の異常な労働環境をベトナムで働いてみて実感した件

日本ってやっぱり「働く」ことに関しては異常ですよ。 「お客様は神様」精神、残業を美徳とする文化、過労死という言葉を作り出してしまう労働環境。 今回は日本の異常な労働環境をベトナムの労働環境と比較しながら説明したいと思います😱

【海外移住】ベトナムに移住したら日本の8億倍住みやすかった件

海外移住を始めて2年ほどが経過しました、日本に住んでいた時と今ベトナムに移住してからとでどのように生活が変わったのかをこちらの記事にまとめていこうと思います。

【ダナンの家賃】日本相場の半額以下!?ベトナム家賃相場調査!

ベトナム・ダナンへ移住を考えている方向け。 海外移住をする上で家賃相場を事前に知っておくことは生活費がどれくらいかかるのか計算ができるので非常に重要です。 こちらの記事で家賃相場、賃貸契約の流れ、賃貸契約時のトラブルについて解説していきます。

【おすすめ】Udemy講座でAWS ソリューションアーキテクト アソシエイトを一発合格できた件

AWS ソリューションアーキテクトの勉強をしている方向け。
Udemyでのおすすめ講座、一発合格のための勉強方法から受験の手順まで本記事でまとめました。
認定試験の受験を考えている方には必見です。

【python】文字認識で画像からテキストを出力するやり方をわかりやすく【Tesseract&PyOCR】

こんにちはkzyです。 今回は文字認識ライブラリのPyOCRとTesseractを使って画像からテキストを抽出したいと思います。 環境構築含めpythonでの文字認識のやり方を簡潔に説明できればと思います。

【コピペOK】flutterのSizedBoxとExpandedの違いをわかりやすく

flutterでオブジェクトのサイズ調整の理解が曖昧な方向け。 flutterでアプリ開発を行う際に頻出する項目の一つのため、この記事でなるべくわかりやすく解説します。

【python】文字認識したテキストをエクセルに出力するやり方をわかりやすく【PyOCR + XlsxWriter】

こんにちはkzyです。 今回はPyOCRで文字認識したテキストをエクセルに出力する方法を解説します。 具体的にはXlsxWriterというライブラリを使用してPythonスクリプトからエクセル操作を行います。