2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

React NativeAdvent Calendar 2023

Day 20

2023年、書き初め ならぬ アプリ書き出し初め のノリでアプリ作ってみた

Last updated at Posted at 2023-12-19

はじめに

こんにちは、@mediaboxesです。
久しぶりにReactNativeのAdvent Calendarに投稿します。

ReactNativeはTypeScriptでiOSとAndroidの両方のアプリを作れるという、エコな開発でサクッとアプリを作って両OSのアプリを作るれるので、新規事業の開発で重宝しています。
最近はマネージメント層として開発から離れていたので、学びのために休日開発をやってみたので総括として投稿します。

作ってみた

なぜ作ったか

業務でReactNativeで開発が多いのですが、長期運用するとバージョンアップで大変苦労してきました。

  • 素のReactNativeをバージョンアップするとネイティブプロジェクトが無限パズル
  • ExpoのManaged workflowでネイティブプロジェクトを考えなくて楽だが、やりたいことが出来ないことがよくある
  • ExpoのBare workflowで結局ネイティブプロジェクトを管理しなければいけない

しかし、Expo SDK 42で発表されたexpo-dev-clientを使うことで、Managed workflowでネイティブプロジェクトをあまり考えなくても、ネイティブプロジェクトに影響するライブラリを使えるという革命が起き、これに興味を持ちました。

2023年正月は休みが取りやすく、やることもなかったので、書き初めならぬアプリ書き出し初めだ!とノリで勢いだけで3日ほどでアプリのベースを作ることができました。

なにを作った

植物の成長やダイエットの記録を簡単に残せて、パラパラ動画として書き出せるアプリを作りました。

a a b

▼ サービスURL

iOS

Android

どうやって作った

記事が長くなるので細かな実装方法は他の方の記事の方が詳細もあるので割愛します。またどこかで情報共有できればと思います。

動画書き出しライブラリ

FFmpegKitライブラリを使うことで写真を繋げて動画として書き出しています。
ExpoのManaged workflowだけでは難しかったのですが、expo-dev-clientを使うことでFFmpegKitのライブラリを扱うことができるようになりました。

課金システムのライブラリ

Expoの公式サイトでExpo InAppPurchasesが非推奨になったという情報があり、 RevenueCat'sを導入しました。
登録件数上限の解放や広告非表示機能を月額サービスで提供しています。
月額サービスを業務でやったことがなかったので、どうしてもやってみたいと思っていました。

広告配信ライブラリ

Google AdMobで広告を表示しています。React Nativeで広告を表示するために、react-native-google-mobile-adsライブラリを使用しています。

多言語化対応

日本語以外にも海外のユーザーを考慮して多言語化に対応しました。i18n-jsを利用しています。

expo-dev-clientのおかげでネイティブプロジェクトはバージョン管理せず、EAS Build上でネイティブプロジェクトのビルドを行っています。
その他の機能はExpoのManaged workflowに含まれるライブラリをできるだけ使用しています。

運用してみて

ここからはReactNativeとは関係がないですが、せっかくなので運用の数値を赤裸々に公開します。
全然いい数値じゃないので希望もないですが、改善のアドバイスがあればぜひお願いします。

新規ユーザー数

スクリーンショット 2023-11-26 23.26.31.png
Firebaseアナリティクスの数値です。
2月に公開してから12月の現在までのユーザー数が980人ほど、そのうちiOSが590人、Androidが390人です。
思った以上にだんだんダウンロードされませんねー。ちなみにこの後説明する広告費を使った結果です。

広告費

個人でできる範囲で少額の広告を配信してみました。
特に凝った広告は作らず、必要情報を入力して自動で広告が表示されるようにしました。

Google 広告

スクリーンショット 2023-11-26 23.10.00.png
費用:$282
期間:4/6~4/22
配信:iOS/Android
表示回数: 5.96万回
クリック回数:1203回

SerchAds

スクリーンショット 2023-11-26 23.14.54.png
費用:¥13,680
期間:9/21~9/27
配信:iOS
表示回数: 15.5万回
クリック回数:156回
こちらはiOS限定ですがAppleのストアなどで表示される広告です。

広告収益

広告費、流入数とそして収益について。あ、アプリ内課金はチリなので特になしです。
設置している広告配信システムはGoogleAdmobです。
広告設置箇所は各画面にバナー広告とたまに全画面広告です。
11.png
Firebaseアナリティクスの数値です。
2月に公開してから12月の現在まで広告収入が約4,300円ほど、そのうちiOSが約3,500円、Androidが約800円ほどでした。
とても少ないですねー、このアプリで広告の収益化は難しいようです。あとはもっとユーザー数が増えないとですね。

まとめ

バージョンアップ

expoにしたことでネイティブプロジェクトを触ることなくバージョンアップできるのが最高でした。
とはいえ、expoやReactNativeやモジュールなど、どんどんバージョンアップが必要な機会が多い。
そうすると仕様変更など動かないことも多くやっぱりバージョンアップの手間が消えることはない。

費用対効果

もっとマーケットフィットやマーケティングをしっかりやらないと利益を出すなんて夢のまた夢。誰かアプリのユーザー数の増やし方収益化を教えてくださいw

つまり

でもエンジニアとして勝手に作りたいものを作れたので楽しかったらすべてOK!
そんなサクッと作って楽しむのにはReactNativeはピッタリ!
Flutterでもいいけど、I Love JS!

おまけ

5A094224-79F2-43AA-8DC6-EBA13B19333F.gif
アプリの記録のために買ったパキラ。記録するたびに大きくなるのを感じて愛着が湧きます。

81EDD86C-C8F8-488D-B7B7-1951ACA64E07.gif
サンスベリアの記録をしましたがほぼ1年間成長の変化が少ない。。

毎日顔を記録して髪や髭の伸びる速さを実感していますが写真は割愛。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?