Expo

はじめに これまでいくつかの記事で触れてきましたが、ついに初めてのAndroidアプリをGoogle Play ストアで公開することができました！㊗️ 本記事では、Expoで開発したアプリの紹介と、Google Play ストアへの公開手順について詳しく解説します。 アプリの概要 🔗 どっちがおトク？ 単価チェッカー このアプリは、2つの商品の「価格」と「量」を入力するだけで、どちらの商品がお得かを瞬時に計算して表示します。 初めてのアプリということで、シンプルかつ実用的な機能に絞り、私自身が日常的に使いたいと思えるものを作りました。また、収益化の一環として広告も実装しています。 類似アプリが多数存在する中での審査通過を心配していましたが、問題なく承認されました。キーボードの挙動や画面レイアウトなど、使いやすさを重視して調整を重ねていますので、ぜひインストールしてご利用ください😊 アプリを公開するまでの手順 1. EASでストア提出用ビルドを作成 事前に、AdMobの広告ユニットIDを本番用にしておきます。 以下のコマンドでストア提出用のビルドを作成します。 eas build --platform android --profile production ビルド完了後、ExpoのダッシュボードからAABファイルをダウンロードします。このファイルは後ほどGoogle Play Consoleでアップロードします。 2. Google Play Consoleでアプリを作成 Google Play Consoleのホーム画面から「アプリを作成」をクリックします。 デフォルトの言語は、（後々は海外マーケットも狙っていきたいとは思いますが、一旦）日本語にしておきます。 アプリ/ゲームの区分を選択します。 申告事項に同意してアプリを作成します。 3. ストア掲載情報の設定 新規作成したアプリのダッシュボードから、「アプリのセットアップ」＞「アプリに関する情報を提供し、ストアの掲載情報を設定します」のセクションに表示されているタスクを順次対応していきます。 プライバシーポリシーの設定 プライバシーポリシーのURLを設定します。 今回はCloudflare Pagesを使用して、HTMLファイルで作成したプライバシーポリシーを直接アップロードする形で公開しました。 アプリのアクセス権 認証が必要な機能がある場合は、事前に認証情報を連携する必要があります。 広告の設定 アプリ内での広告表示の有無を申告します。 コンテンツのレーティング 年齢制限に関わるコンテンツの有無を申告します。画面の指示に従って回答を進めます。 ターゲットユーザー アプリの対象ユーザー層を設定します。13歳未満をターゲットとする場合は、より厳格な基準を満たす必要があります。 今回のアプリは、一人で買い物をする可能性のある中学生以上を想定しているため、13歳以上を対象としています。 データセーフティ 収集するデータの種類を申告します。 今回は広告表示のみで、ユーザーデータの収集は行わないため、「いいえ」と回答しました。 行政アプリ 行政から配信されるアプリかどうかを申告します。 金融取引機能 金融取引機能をもつかどうか、どのような取引か、などを申告します。 健康 健康関連の機能があるかどうか、どのような機能か、などを申告します。 アプリカテゴリと連絡先情報 アプリのカテゴリ、タグ、およびストアに表示する連絡先情報を設定します。 ストアの掲載情報 アプリ名、説明文、アイコン、フィーチャーグラフィック（検索結果一覧などに表示される横長の画像）、スクリーンショット等を設定します。 ...

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