アプリの個人開発でリワード広告を表示するやり方を探している方向け。
Admob広告の一つリワード広告を自分のflutterアプリに組み込むやり方を本記事でわかりやすく解説します。
この記事は以下のような方を対象者としています。
- アプリ開発を副業で考えている方
- flutterにAdmobのリワード広告を組み込む方法を探している方
- 個人開発で副収入を得たいと考えている方
目次
前置き: リワード広告とは?
リワード広告とはゲームアプリ等でよく見かけますが、動画を見たら再度プレイできたりするあの動画広告のことです。
このリワード広告を組み込むことで、表示された広告に応じた広告料が開発者に支払われます。
もちろん広告はユーザにとっては良いものではないかもしれません。
しかし、開発者としては収益を上げることは大きなモチベーションになります。
そのため、本記事ではリワード広告をflutterを使ってどのように組み込むのか詳しく説明していきます。
そもそも個人開発の広告とはなんなのか、どれくらいの収益がもらえるのか詳しく知りたい方は下記別記事をご覧ください。
また、本記事の内容は下記動画でもハンズオンで解説しているのでリワード広告を組み込む際にぜひ参考にしてみてください。
まずは修正ファイルの確認をしましょう
まずはどのファイルを修正しなければならないのか説明します。
(今回はflutter createで新規作成したプロジェクトを元に解説していきます。)
リワード広告をflutterで実装する際に修正が必要なファイルは下記の4つです。
- AndroidManifest.xml
- build.gradle
- pubspec.yaml
- main.dart
また、今回はflutter createで新規作成したデモアプリをベースに解説します。
通常下記+ボタンを押すと画面に表示されている数字がカウントされていきます。
しかし今回はこのボタンを押下したらリワード広告を表示するように処理を変更したいと思います。
では早速各ファイルの修正箇所を説明していきます。
AndroidManifest.xmlとは?
まずはAndroidManifest.xmlファイルから修正していきます。
AndroidManifest.xmlとはAndroidアプリの様々な情報を定義するファイルです。
1 |
|
上記日本語でコメントアウトしている箇所です。
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画像のようにテスト用の広告が表示されたら成功です。
さいごに
ここまでお読みいただきありがとうございました。
アプリ開発を数年続けている経験から、挫折しない個人開発のやり方について解説しています。
アプリの個人開発にご興味があれば、こちらも併せてご覧ください。
また、私は3年ほど前に海外移住をして現在ベトナムのダナンというところに住んでいます。
ベトナムでエンジニアとして働く様子やブログ、アプリ開発のマネタイズTipsに関する動画を投稿しています。
また、海外移住の 英語とプログラミングを習得することを推奨しています。
これは私の経験則から言えることですが、上記二つのスキルがあれば海外移住は絶対に実現できます。
以下に僕が実際に使って効率よくプログラミング学習ができるおすすめサービスを載せます😌
速習!おすすめプログラミング勉強法【Udemy】
いくつかプログラミング学習サービスを利用しましたが、一番効率よく勉強できると感じたのはUdemyでした。
Udemyでは動画での説明や解説等もあり親切で、学習教材も豊富にあることから プログラミング初学者の方が短期間でエンジニアを目指したいのであれば、非常に良い教材だと思います。
ちなみに私は文系卒で社会人になってから独学でudemyを使ってプログラミングの勉強をして、実際にエンジニアとして採用されました
Udemyのコースは1つ1,000円ほどなので、ITの参考本を一冊(3,000円)を買うよりもUdemyのコースを購入する方が安い上により効率的にプログラミングを勉強できると思います。
世界最大級のオンライン学習サイトUdemy
また、別記事にてダナンでの生活やIT関連についても記事を書いていますのでクリックいただけると嬉しくて踊ります💃