283
252

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

きれいな動きしてるだろ。ウソみたいだろ。ReactNativeExpoで動いているんだぜ。それで。

Last updated at Posted at 2019-10-10

ネイティブと同じくらいヌルヌル動く

実物のアプリ

※興味があったらインストールして動きを体感してみてください

Expoとは?

React Native開発で「開発環境、デバッグ環境、ビルド、証明書の作成/管理、スマホアプリに必用な機能」などを簡単にしてくれるやつ。
1ソースでiOSとAndroidとWebの開発が可能。

ReactNative+Expoでスマホゲーム

1年間で6本リリースして、合計1万インストール/10万円達成しました。
以下、ReactNative+Expoの知見ではなく、スマホアプリを開発してみて知っておきたかった知見になります。

Webではなくアプリにしてよかった点

Admobが使える

インタースティシャル広告(全画面表示のやつ)とリワード広告(動画30秒見るやつ)は、バナー広告の10倍以上単価が高いため強いです。
アプリならAdblockされません。
ちなみに実装はExpoを使うと数行のコードでできます。

サーバーなどが不要

Webサーバーや独自ドメインなどを用意する必要がなくて楽です。

Apple、Google、アプリ紹介サイトからの流入

Webよりも流入の入口がたくさんあるような気がします(個人的な感想)

ライバルの比率

Webだと無料で質の高いものがたくさんありますが、
Webと比べるとアプリの方がまだ競合が少ない気がします(個人的な感想)

アプリにしてつらい点

Apple Developer登録料

毎年手動で更新する必要があるのと高い($99)

更新などに申請が必要

Expoを使うと審査なしでアップデートできますが、Androidの場合は注意が必要。
参考: https://qiita.com/kaba/items/b6e777d1c0b7ce1f78c6

もっと早く(1年前の自分が)知りたかったこと

Firebaseは中国からのアクセスが禁止されている

多言語対応することで、流入を増やすことができます。自分は機械翻訳ですが、英語と中国語に対応しています。
しかし、Firebaseは中国からのアクセスが禁止されているため、中国からのユーザー登録やランキング登録ができていなかったという...。
次作からはPlayFabを使ってみる予定です。
ちなみにインストール数は日本9:他1くらいの割合です。

中国語対応は中国の翻訳会社と提携するのがいいらしいが

中国の翻訳会社と提携すると中国で宣伝もしてくれて流入がすごく増えるらしい。
提携の条件として提携会社が用意した広告を使う必要がありますが、React Nativeだと組み込める広告の仕組みがないため断られます。

リリースブーストできるサイトがある

予約トップ10
無名な開発者でもリリース前に登録するだけで、当日のインストール数が100〜増えます(有名なアプリなどは1万〜など)
このサイトを知らなかった始めの頃は、リリース当日のインストール数が10くらいでした。

タブレットでも動くようにしないといけない

Appleの審査はタブレットでも行われるらしいので、タブレット対応が必須です。
何度もタブレットでの描画がおかしいという理由でリジェクトされました。
react-native-responsive-screenを使うと画面のサイズごとに伸縮したUIを作れるのでオススメです。
もしくはスプリットビューで対応(参考: https://medium.com/@craftzdog/how-to-support-split-view-on-ipad-with-react-native-4b3b4b934b0c)

アプリのタイトルは10文字まで

ホーム画面に表示される名前が10文字以内でないと途切れてしまいます。

3000以上のフリーアイコン素材

Twemoji
絵文字をフリーの画像にしたスマホ版いらすとやみたいなやつ。著作権を気にせず使える。
これを組み合わせるだけでいい感じのが作れそう。

申請時のスクリーンショットに絵文字があるとダメらしい

参考: https://iphone-mania.jp/news-202076/
Twemojiの使用は大丈夫でした。

オンラインでアプリアイコンやスクリーンショットの加工ができる便利ツール

Figma
簡易Photoshop的なやつ。無料で使えます。日本語フォントが4つしか使えないので注意。

インディーズゲームの展示イベントがある

インディーズゲームのコンテストがある

開発者コミュニティ

運営者ギルド: https://qiita.com/organizations/admin-guild
作っているものにアドバイスもらえたり、みんな目標を持って何かを作っているので刺激をたくさんもらえます。

以下、自分がよく使うReactNativeのオススメライブラリ

※スター順にリスト化されているサイト
https://github.com/jondot/awesome-react-native

UI系はNative Base か React Native Elements

WebでいうとBootstrapみたいなやつです。どちらも機能多めでオススメです。
下記の機能を使う頻度で選択しています。
Toast機能を使いたい場合は NativeBase
Tooltip機能を使いたい場合は React Native Elements

ちなみにデフォルトのアイコンは
NativeBase: Ionicons
React Native Elements: Material Design
※ type='font-awesome' のように指定すれば他も使えますが、特にこだわりもないのでデフォルトを使ってしまいます...

ナビゲーション

ReactNavigation

データ保存

react-native-storage

レスポンシブ対応

react-native-responsive-screen

モーダル

react-native-modal

アニメーション

react-native-animatable

タイプライター

react-native-typewriter

こんな感じのが作れます

これから

  • ExpoにTypeScriptが対応されたのでTypeScriptで実装したい
  • Expoにアプリ内課金機能が実装されたので試したい
  • インディーズゲームの展示イベントとコンテストに参加したい
283
252
1

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
283
252

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?