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

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

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">動画サンプル <a href="https://t.co/PZBXGGvIuo">pic.twitter.com/PZBXGGvIuo</a></p>&mdash; HorieH@ゆうしゃとさんすうリリース (@h0rieh) <a href="https://twitter.com/h0rieh/status/1182156133126983680?ref_src=twsrc%5Etfw">October 10, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


### 実物のアプリ
※興味があったらインストールして動きを体感してみてください

- [iOS](https://apps.apple.com/us/app/brave-math/id1478742090?l=ja&ls=1)
- [Android](https://play.google.com/store/apps/details?id=com.firebaseapp.horieapp.math)

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

### ReactNative+Expoでスマホゲーム
１年間で６本リリースして、合計１万インストール/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


もっと早く(１年前の自分が)知りたかったこと
----------
### Firebaseは中国からのアクセスが禁止されている
多言語対応することで、流入を増やすことができます。自分は機械翻訳ですが、英語と中国語に対応しています。
しかし、Firebaseは中国からのアクセスが禁止されているため、中国からのユーザー登録やランキング登録ができていなかったという...。
次作からは[PlayFab](https://azure.microsoft.com/ja-jp/services/playfab/)を使ってみる予定です。
ちなみにインストール数は日本９：他１くらいの割合です。

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

### リリースブーストできるサイトがある
[予約トップ10](https://yoyaku-top10.jp/)
無名な開発者でもリリース前に登録するだけで、当日のインストール数が100〜増えます（有名なアプリなどは１万〜など）
このサイトを知らなかった始めの頃は、リリース当日のインストール数が10くらいでした。

### タブレットでも動くようにしないといけない
Appleの審査はタブレットでも行われるらしいので、タブレット対応が必須です。
何度もタブレットでの描画がおかしいという理由でリジェクトされました。
[react-native-responsive-screen](https://github.com/marudy/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://github.com/twitter/twemoji)
絵文字をフリーの画像にしたスマホ版いらすとやみたいなやつ。著作権を気にせず使える。
これを組み合わせるだけでいい感じのが作れそう。

### 申請時のスクリーンショットに絵文字があるとダメらしい
参考: https://iphone-mania.jp/news-202076/
Twemojiの使用は大丈夫でした。

### オンラインでアプリアイコンやスクリーンショットの加工ができる便利ツール
[Figma](https://www.figma.com)
簡易Photoshop的なやつ。無料で使えます。日本語フォントが４つしか使えないので注意。

### インディーズゲームの展示イベントがある
- [東京ゲームショウ](http://tgs.cesa.or.jp/)
- [デジゲー博](http://digigame-expo.org/)

### インディーズゲームのコンテストがある
- [Indie Games Festival 2019](https://events.withgoogle.com/indie-games-festival-2019-japan/)
- [厦門国際アニメマンガフェスティバルゲームコンテスト](http://game.cybersousa.org/) ※中国

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


以下、自分がよく使うReactNativeのオススメライブラリ
---------
※スター順にリスト化されているサイト
https://github.com/jondot/awesome-react-native

### UI系はNative Base か React Native Elements
WebでいうとBootstrapみたいなやつです。どちらも機能多めでオススメです。
下記の機能を使う頻度で選択しています。
Toast機能を使いたい場合は [NativeBase](https://nativebase.io/)
Tooltip機能を使いたい場合は [React Native Elements](https://react-native-elements.github.io/react-native-elements/)

ちなみにデフォルトのアイコンは
NativeBase: [Ionicons](https://ionicframework.com/docs/v3/ionicons/)
React Native Elements: [Material Design](https://material.io/resources/icons/)
※ type='font-awesome' のように指定すれば他も使えますが、特にこだわりもないのでデフォルトを使ってしまいます...


### ナビゲーション
[ReactNavigation](https://reactnavigation.org/)

### データ保存
[react-native-storage](https://github.com/sunnylqm/react-native-storage)

### レスポンシブ対応
[react-native-responsive-screen](https://github.com/marudy/react-native-responsive-screen)

### モーダル
[react-native-modal](https://github.com/react-native-community/react-native-modal)

### アニメーション
[react-native-animatable](https://github.com/oblador/react-native-animatable)

### タイプライター
[react-native-typewriter](https://github.com/TaylorBriggs/react-native-typewriter)

こんな感じのが作れます
<img src="https://qiita-image-store.s3.amazonaws.com/0/69627/fa8b49bd-09d4-8a64-9190-08c1592c91fc.gif" width="40%" />

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