先日、初めて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. 組織アカウントとして登録する

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

さいごに

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

🔗 アプリへのリンク

かねてより興味があったタロット占いのアプリを作ってみました。 1枚でサクッと占ったり、10枚でじっくり占うこともできます。

このアプリを作った経緯としましては、最近うちの子供がタロット占いにハマっておりまして、カードの意味を覚えたり、カードを組み合わせてどのように解釈するか、といったところの練習になるといいなと思い開発しました！

アドバイスの部分は、生成AIを使って自然な文章で提案してくれるようにしました。

技術的なこと

以前公開したタイピング練習用のアプリ の基本構成と同じ、Next.js＆Cloudflare Pagesを採用しています。 ほどんと同じなので、異なる部分のみ記載したいと思います。

ちなみにこちらは現時点（2025年3月末時点）のものであり、まだまだ改善点がありますので変わる可能性ありです。

Next.jsのAPIルート

タイピング練習用アプリ においては、フロントエンドのみの構成でした。 今回のアプリでは、生成AIのエンドポイントをたたく必要があったため、セキュリティのためにAPIルートを使用しました。 Cloudflare Pagesにデプロイすると、自動的にCloudflare Functionsとして動作させることができました。

ただ途中、ビルドがうまく通らなかったので、Next.jsのバージョンを15→14に落としました。

Cursor（AIコードエディタ）

月$20の課金をして、Cursorを導入してみました。 ものすごい速さで画面を作り上げてくれて、驚愕です。。 結構メンタルやられるレベルで速いですねww

バージョンは0.47.8を利用。 直近アップデートがあり、これまではComposerとChatが分かれていたところのUIが、統合されたようです。 チャットでのやり取りの中で、適宜Agent（自動でコーディングしてくれるモード）とAsk（質問モード）を使い分けられるようになっています。コンテキストが分断されることなく使い分けられるのがとてもいいですね。

生成AI（Gemini2.0 Flash Lite）

初めて自作アプリの中に生成AIを組み込んでみました。 今のところは無料枠で全く問題ないです。

使ってみた感想としては、ドメイン制限やレートリミット、入力文字のサニタイジングなど、結構考えることが多かったです。 普段の業務では、組織内で使うアプリに組み込む程度で、悪意を持ったプロンプトへの対応を想定していないことが多いため、勉強になりました。

まとめ

• タロット占いアプリ を公開しました。
• Cursorを使った開発の速度は爆上がり！！
• アプリに生成AIを積極的に組み込んでいきたいです。

先日、タイピングアプリ をリリースしました。

こちらはこちらでまだ改善の余地ありですが、新しくアプリ作っていきたいと思います！

うちの子どもたちが、昨年から家庭内で会社を立ち上げまして、親を相手に商売を始めました( ´∀｀ )

お手伝いチケットを紙で手作りして、何枚かつづりで売ってくれます。

例えば、「マッサージ10分券を10枚つづりで〇円」、「夕食作り代行券を5枚つづりで〇円」、のような感じです。

親としてはとても助かってます✨

子どもとしても、前金でお金を受け取れるのでモチベーションが維持できるみたいです。

趣味でほしいものがあったら、あのお手伝いを〇回すれば買える・・のように逆算できるので良いですね。

ただ、チケットを作ったり授受したりするのが徐々に（お互いに）面倒くさくなってきたので、電子化したいという娘からの要望でした。

できれば通知機能とかを備えたスマホアプリ化したいのですが、一旦はMVPを備えたWebアプリとして実装してみたいと思います。

（スマホ用アプリは、テスト的に作ったことはありますが、実際にストアにリリースしたことはありません。おいおいやっていきたいです！）

データベースを選ぶ

前回のタイピングアプリではデータベースを使用しませんでした。

今回作るアプリではデータベースが必要になります。

一旦は家庭内で使うだけだけど、よさそうなら一般公開できると嬉しい。

個人開発で無料から始められるデータベースサービスをいくつかピックアップしてみました。

• Firestore（FirebaseのDB）

  • 以前使ったことがある。・・が、NoSQLのツボをいまいちつかめなかった記憶がある。

• Supabase

  • Firestoreの代替サービスという位置づけらしい。最近はこちらの方が人気がある模様
  • RDBが使えるので違和感なく使えそう

• Neon

  • PlanetScale（以前無料で使えてた）の代替として使っている記事がいくつかあった

• Cloudflare D1（CloudflareのDB）

  • SQLiteベースのデータベース。
  • SQLiteとは、単一のファイルにどんどんデータを書き込んでいく方式のDB。簡易利用向け

Cloudflare D1を使ってみる

アプリをCloudFlare Pagesにデプロイしようと思っているので、まずは相性のよさそうなCloudflare D1を使ってみようと思います。

SQLiteは以前軽く学習目的で触ったことがあって、その時はあまり意識してなったのですが、実際にアプリに組み込もうと思うと結構制約が出てきそうです。

大規模な集計ができなかったり、同時並行で読み書きができなかったり、あたりでしょうか。

実際に無料枠で使ってみて、支障があるなら別のサービスに切り替えるようにしてみます。

課金体系と無料枠について

D1の使用料金は、読み書きの行数（レコード数）と、保存されているデータの容量で決まるようです。

また、制限を超えるとクエリが実行できなくなって、課金すれば制限を解除できるとのこと。

途中で勝手に課金が始まる訳ではないのは良いですね。

無料枠は以下の通り。

• 読み取り行数：500万/日
• 書き込み行数：100,000/日
• ストレージ：5GB

読み取り行数は、スキャンが走ったレコードの件数がカウントされる。1000件のレコードが入ったテーブルをフルスキャンすると1000とカウントされ、結合などでスキャンが走るとその件数分カウントされる。

適切にインデックスをはると節約できるようですが、インデックス更新は書き込み件数にカウントされる、と。

最初は慣れるまで時間かかるかな。実際にテーブルいくつか作ってみただけで何回かクエリ発行されてました。

実際に作ってみる

実際にDBとテーブルを作ってみました。

Cloudflareダッシュボード、「ストレージとデータベース」→「D1 SQLデータベース」→「作成」でデータベースを作成。

名前を入れるだけで作れました。

次にDBの中にテーブルを作成します。

列の型（タイプ）では、以下の4つしか選べませんでした！

• text（文字列）
• integer（整数）
• real（小数）
• blob（ファイル類）

日付とか、真偽値とか、もろもろtextに突っ込む形のようです。SQLiteってこんな感じなのね～。

これをPagesとかWorkersとかで使うとかなりシームレスに使えるのかな？

大きな支障がない限りはこのまま進めてみます。

次回へ続く。

🔗 アプリへのリンク

🔗 アプリに対する思いはこちらに記載しました。

このアプリは、子どもたちにタッチタイピングを効率的に習得してほしいという思いで開発しました。

必要最低限の内容で、スピーディーに学ぶことができます。

ここでタッチタイピングを習得したら、寿司打のスコアもアップするかも！？

技術構成

アプリを公開するにあたり、以下の技術を使用しました。

開発環境・使用言語

• Visual Studio Code
• Next.js
• TypeScript
• App Router
• Tailwind　CSS

今回はフロントエンドのみの構成としました。

ソース管理

• Github

デプロイ

• Cloudflare Pages

Githubのブランチを指定すると、自動でビルド＆デプロイまでしてくれます。

今回初めて使いましたが、非常に便利です！！

個人レベルでは無料プランで十分です。

ビルド回数が月500回までの制限があるので、そこだけ意識しています。

デプロイ先の選定にあたっては、以下を考慮しました。

• 商用利用できること（広告はったりしたい）
  • 無料プランだと商用利用できないところが多い。
• 従量課金ではなく定額であること
  • いつの間にか金額が増えてた！を気にしたくない。

上記の条件を満たしていれば課金しても良かったのですが、無料プランで対応できたのはありがたいです。

ドメイン取得

• Cloudflare Register

今後アプリ増やしていきたい思いですが、アプリごとにドメインをとるか、サブドメインで分けて増やしていくかは悩んだところ。

一旦はサブドメインを増やしていくこととし、評判良いものができたら切り出してアプリ固有のドメインをとる方向でいくことにしました。

長く使っていく想定なので、ドメインを原価提供してくれているCloudflare Registerを利用することとしました。

アクセス分析

• Cloudflare Web Analytics
• Hotjar

アクセス分析=Google Analytics の頭でいましたが、Cloudflare Web Analyticsというものを知り、そのまま使うこととしました。

こちらはあくまでサーバー側に届いたリクエストを分析するというものなので、Google Analyticsと得られる情報は異なるようです。

とりあえずPV数など簡易な情報が得られればよいので、採用することにしました。

Hotjarは、画面レコーディングやヒートマップ（画面のどこが頻繁にクリックされるか等）などを提供してくれるサービスです。

その他

• 今回、認証やDBは使用していません。ユーザー登録なしのシンプル構成としました。

• アプリ内のメニューをどこまで進んだかを保存するために、ローカルストレージを使用しています。

• ChatGPTにコード生成を助けてもらってます。課金はせずに、ブラウザの無料版のみ使用。課金するタイミング完全に見失ってる。

• 画面のスケッチとかはしないタイプの人間です。実装しながら画面作ってます。

• アプリの中で使っている画像については、娘にお絵描きしてもらいました。

所要時間

2024年の年末あたりから着手し始め、お正月にぼちぼち開発していたのですが、公開までには全部合わせて1ヵ月くらいでした。

アプリの開発自体はAIが助けてくれたので比較的スムーズに行きましたが、デプロイ先の選定や、周辺で使うサービスの選定などに少し時間をかけました。

今後について

ちゃんと生成AIに課金して、アプリ作ってもらうのを試したいですね。

以下、試してみたいプロダクト。

Cursor(カーソル)

VSCodeからフォーしたエディタで、会話しながらコードを修正してくれる模様。

対象のソースを指定して、これに対して修正してという指示ができるのは便利そう。

操作感がVSCodeと変わらないのはよさそうだけど、エディタかえるのは正直ハードルが高い。

移行はよさそうでも、帰ってくるのがしんどそう。

Cline（クライン）

VSCodeの拡張機能でカーソルと同じようなことができる？という程度の理解です。

カーソルよりよさそうかなーという印象なので試してみたいです。

bolt.new（ボルト）

言葉でアプリの説明を定義すると、全自動で勝手に作ってくれるというものらしい。

良いという噂は聞くけど、どうだろう？

自動生成されたコードの可読性とかメンテナンス性については気になるところ。