React Native

はじめに 先日、初めて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 [email protected] 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で初回時のみ初期化するようにしてみました。 もしかしたらもっといいやり方があるかもしれません。 参考までに。 ...

はじめに これまで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と同様、起動コマンドが必要になります。 ...