先日、初めてReact Nativeを触ってみたというポスト をしました。

まずはAndroidアプリを公開したいと考えており、組織アカウントとして登録するためにDUNS Numberの取得申請中でございます。 （東京商工リサーチで申請し、7営業日程たちますが、まだ音沙汰なしです。。）

スマホアプリで収益を得たいと考えていますが、まずは一番ハードルが低そうな広告収入を目指していきます。

今回は、Expoで作ったAndroidアプリに、react-native-google-mobile-adsライブラリを使ってAdMobを設置する手順をご紹介します。

1. AdMobの設定手順

Google AdMobのアカウント作成とアプリ登録

AdMob（https://admob.google.com/ ）にアクセスし、ユーザー登録します。

その後、アプリを追加します。

プラットフォームは「Android」を選択、まだストアにアプリを公開していないので、「いいえ」を選択。

アプリの名前を入力し、「アプリを追加」をクリック。

アプリの作成が完了しました。「完了」をクリック。

広告ユニットの作成

次は、広告ユニットを作成します。「広告ユニットを追加」をクリック。

広告のフォーマットがいくつかあります。起動時に全面表示するものだったり、全部見たら報酬を得られる系のものだったり。今回は、単純に画面の一部に広告が表示されればよいため、「バナー」を選択。

広告ユニット名には、自分で識別できるように適当に名前を付けて、「広告ユニットの作成」をクリック。

広告ユニットの作成が完了したら、アプリIDと広告ユニットIDが表示されるので、コピーしておきます。 （こちらの画像の広告ユニットIDは、すでに無効となっています）

2. Expoアプリへの実装

ライブラリのインストール

react-native-google-mobile-adsをインストールします。最新バージョン（v15）をインストールしたところ後続手順でビルドエラーが発生したため、v14でインストールするようにしました。

npx expo install react-native-google-mobile-ads@14.11.0

app.jsonの設定

react-native-google-mobile-adsをインストールすると、app.jsonに"react-native-google-mobile-ads"の記載が追加されていると思います。

その部分を、以下のように修正します。

[
    "react-native-google-mobile-ads",
    {
        "android_app_id": "ca-app-pub-6970209880901801~7980726474"  // アプリIDを設定します
    }
]

開発ビルドの作成

広告を使用するには、Expo Goのみでは対応できないので、開発ビルドを行う必要があります。

npx eas-cli build --profile development

ビルドが完了したら、表示されているQRコードをスマホで読み取ってリンクに飛び、Installボタンを押してダウンロードおよびインストールを行います。

その後、npx expo startで開発サーバーを起動した上で、アプリを起動しておきます。

広告コンポーネントの実装

実際に、アプリに広告を配置してみます。

アプリの初回起動時に、SDKの初期化を行う必要があるようです。 とりあえずホーム画面においてuseEffectで初回時のみ初期化するようにしてみました。 もしかしたらもっといいやり方があるかもしれません。 参考までに。

import mobileAds, { BannerAd, BannerAdSize, TestIds } from 'react-native-google-mobile-ads';

// アプリの初回起動時にSDKを初期化
useEffect(() => {
    mobileAds()
        .initialize()
        .then(() => {
            console.log('AdMob SDK initialized');
        });
}, []);

// テスト広告の設定
const adUnitId = TestIds.BANNER;

// バナー広告のコンポーネント
<BannerAd
    unitId={adUnitId}
    size={BannerAdSize.MEDIUM_RECTANGLE}
    requestOptions={{
        requestNonPersonalizedAdsOnly: true,
    }}
/>

開発時は、テスト広告しか表示してはいけないようです。 本番アプリではTestIds.BANNERの部分を、先ほど取得した広告ユニットIDに差し替えてください。

sizeには、幾つかの種類があります。ANCHORED_ADAPTIVE_BANNERだと横幅いっぱいに広がってくれるため、様々なサイズの端末に対応できるということでおすすめです。

私のアプリには高さが足りないと感じたため、もう少し存在感のある、MEDIUM_RECTANGLEを使ってみました。

まとめ

React Native + Expoで構築するスマホアプリに、AdMob広告を貼る手順をご紹介しました。

色々試行錯誤していた時は、Bare workflowにする必要がある（ネイティブコードをいじる必要がある）という情報も転がっていたのでハマってしまいました。

実際にはBare workflowにする必要はなく、Managed workflowのまま開発を進められました。

おそらく以前は対応していなかったものが後々対されるようになったという感じでしょうかね。

Managed workflowのまま、広告貼れるよというお話でした。

これまでWeb開発を中心に行ってきた私が、新たな挑戦としてスマホアプリ開発に取り組むことにしました。Android StudioやKotlinでの開発経験はあるものの、コード量の多さや学習の難しさから断念した過去があります。しかし、自己啓発と収益化の可能性を考え、まずはAndroidアプリから始めてみることにしました。

技術選定：React Native vs Flutter

スマホアプリ開発の主要な選択肢として、React NativeとFlutterが挙げられます。X（旧Twitter）で個人開発者の投稿を見ると、Flutterを採用している方が多い印象でした。しかし、Reactの経験がある私にとっては、React Nativeの方が学習コストが低いと判断し、Cursorと共に開発を始めることにしました。

Cursorに最新のReact Nativeドキュメントを読み込ませて、順に一緒にやってもらいました。余談ですが、今後新しい技術がでてきたら、とりあえずドキュメントを読ませてハンズオンを一緒にやってみるのが一番早いのかなと思ってます。

最新のドキュメントを読んではいたものの、古いコマンドを提案してきていたようで途中でうまく起動せず、結局ドキュメントで最新のコマンドを探して打つという・・（笑）まああるあるですね。

React Native + Expoでの開発の流れ

細かい話は省略しますが、ざっくりと開発の流れを記載します。

1. 初期セットアップ

Expoを使用することで、開発のハードルを大幅に下げることができました。VSCodeで開発できる点も大きなメリットです。以前はAndroid Studioが必要でしたが、その重さと待ち時間の長さがネックでした。

プロジェクトの作成は以下のコマンドで簡単に行えます。

npx create-expo-app@latest

その後、以下のコマンドで開発サーバーを起動します。（tunnelオプションを付けないとExpo Goアプリがブルースクリーンになりました）

npx expo start --tunnel

驚くほどReactと開発体験が似てますね。すばらしい。

2. Expo Goでの開発

そしてExpo GoアプリをGoogle Play ストアから探してインストールします。 （Expoでアカウント登録もしました）

npx expo start でターミナルに表示されたQRコードを、Expo Goアプリから起動したスキャナで読み取ると、デフォルトアプリが動き出します。

コードを修正すると、ホットリロードでスマホ側に即座に修正が反映されます。

以前は、実機で確認するには毎回ビルドして転送コードでファイルを転送して、というのが必要だった記憶があるので、スピーディーにできるようになりましたね。

開発自体も、コンポーネントをどんどん配置していくという流れがReactの開発と非常によく似ています。これほどスムーズにWebアプリ開発からスマホアプリ開発に移行できるとは。食わず嫌いせずにもっと早くやってればよかったです。

実際の仕様決めやコード実装は、生成AIと協働で進めていきます。まずはシンプルなアプリを作って公開するまでの一連の手順を経験してみたいと思います。

3. 開発ビルドの作成

ある程度開発が進んでくると、Expo Goだけでは対応できなくなってくるので、ちゃんとビルドして実機で動かせるようにする必要があります。 ドキュメントでは、唐突に「Development Build」を作る的な話になるので、最初は混乱しました。 要するに、Expo Goアプリというのは、Expoの開発体験をお試しできるように作られた、プレビュー用のアプリという位置付けのようです。

標準的な機能しか対応しておらず、ちょっとコミいったことをしようと思ったら、改めてビルドして実機にインストールして動作させる必要があります。

開発ビルドをゲットするには、プロジェクトにexpo-dev-clientライブラリを追加した上で、EASというビルド用のツールを使います。

下記コマンドにより、Androidアプリの開発用にビルドを作成できます。

eas build --platform android --profile development

ビルドの時間は10～15分程かかりました。 ビルドが終了したら、スマホでExpoの開発者ページに飛んでファイルをダウンロードして実行すると、勝手にインストールが開始されます。 （ビルドは時間が長いので、途中でターミナルを閉じても問題ないようです。しばらくしてからExpoの開発者ページに飛べば、インストールのボタンが表示されています。）

開発ビルドを動作させるには、Expo Goと同様、起動コマンドが必要になります。

npx expo start --tunnel

Expo Goの時と同じコマンドですが、プロジェクトにexpo-dev-clientがインストールされていれば、開発ビルドが使用するサーバーが自動的に立ち上がるようです。

ビルドの待ち時間は長いですが、開発ビルドもExpo Goと同様、基本的にはコードを修正したらホットリロードでリアルタイム反映されるので、開発体験としてそれほど変わりません。 なので、一度Expo Goでの開発を経験したら、次回からは最初からDevelopment Buildを使って開発を進めるでもいいかなと思いました。

ただ、アプリの設定に関わるようなこと（ロゴマークなどの変更なども含めて）を変えた場合には、毎回ビルドしなおさないと反映されないようです。

4. 内部配布用ビルドの作成

内部配布用のビルドは以下のコマンドで作成できます。

eas build --platform android --profile preview

上記コマンドを実行し、ビルドが完了するまで待つと、インストール用のURLが発行されます。 リンクを知っている人だけが、各自の実機にアプリをインストールできるようになるというわけです。

5. ストア提出用ビルドの作成

そして、いよいよストア提出用のビルド。

eas build --platform android --profile production

同様にしばらく待つと、開発者ページにダウンロードのボタンが表示されます。

Google Play Consoleでの課題

アプリの公開を目指す中で、Google Play Consoleでの登録時に思いがけない課題に直面しました。

個人情報の公開問題

ストア提出用のアプリは準備OK！これをGoogle Play Consoleからアップロードして審査を通れば晴れてストアに公開できるはず、と思ったのですが、思いがけない弊害がありました。

まず、開発者として登録するためには最初に払いきりの$25を支払う必要があります。 これは想定していたのですが、アカウントの登録をしていると、氏名や住所が公開されるとあるじゃないですか。

確かに数年前にアカウント確認が厳しくなるという話は聞いていたのですが、住所まで公開されるとは把握しておらず。

ざっと調査したところによると、開発者アカウントは、組織アカウントか個人アカウントのいずれかを選択する必要があるようです。以下、あくまでもご参考まで。

組織アカウントの場合：

• 氏名＋住所が公開される
• 氏名は屋号でもOK（ただし公式に政府が発行した資料、もしくは公共料金の領収証などを提出する必要がある）
• DUNS（ダンズ）ナンバーを取得し、申請する必要がある。（ナンバーは東京商工リサーチのサイトから取得できる）

個人アカウントの場合：

• 有料コンテンツ販売しているアカウントであれば、氏名＋住所が公開される
• 無料のみならば、氏名と国のみ公開される
• テスト要件が厳しくなっている。20名で14日間クローズドテストを実施しないと、アプリの申請ができないようになっているらしい。

ちなみに、有料コンテンツ販売しているアカウントとは、「有料アプリやアプリ内購入が可能なアプリ」になるそうで、AdMob広告のみの場合は該当しないようです。 ただし、過去に一度でも（テストのためであっても）報酬を受け取るように有効化したアカウントについては有料扱いみたいです。

また、これは全く知らなかったのですが、個人アカウントだとテスト要件が厳しくなっています。 20人にインストールしてもらうとなると、かなり厳しい印象。 みんなでクローズドテストを乗り切ろう的なコミュニティはあるようですが、他人の開発した、どんな悪意あるコードが埋め込まれてるか分からないアプリなんてインストールしたくないよなぁ、と思ってしまいました。（インストールしてもらうためには、自分も協力しないとなわけで。）

今後の対応策

個人開発者が締め出されているといわれていますが、皆さんブログなどで対応策を発信してくださっていて、本当にありがたい。今のところ、以下の対応をとろうと考えています。

1. バーチャルオフィスで公開用の住所を取得する

   • DMMバーチャルオフィス（郵便転送サービス付きで660円/月のミニマムプランがよさそう）を契約する

2. 新規に電話番号を取得する

   • POVO2.0を契約する
   • 基本的には受電のみなら0円、半年に一度数百円程度の有料トッピングを購入する必要がある
   • 現在使っているスマホでデュアルSIMが対応できたので、eSIMとして追加する

3. 開業届を修正申告する

   • すでに提出はしていますが、現在は屋号を使っていないので、新しく屋号を登録します
   • 事業所の新設として申請します。（通常、申請する必要はないですが、あえて印鑑付きの書面が欲しいので）
   • e-Taxでもとれるけど、印鑑あった方が後々楽なので、管轄の税務署に出向こうと思います。（腰が重い…）

4. 組織アカウントとして登録する

   • 上記対策を実施後、組織アカウントとして登録予定

さいごに

スマホアプリの開発においてはまだまだヒヨッコの開発者ですが、なんとか安全にストア公開まで持っていけるように頑張ります！ 詳細な対策の進捗については、また別の記事で報告させていただきます。