はじめに
どんなアプリを作ったの？
「寝過ごし・乗り過ごし防止」アプリ
降車する駅を登録しておくと、
電車などの乗物で近づいたタイミングで教えてくれるアプリ
サラリーマンや電車通勤の学生向け
つまり？⇒
- 降りる駅を気にしなくて済む！
- 寝ててもOK！漫画やスマホに熱中しててもOK！
- 音楽でアナウンスが聞こえなくてもOK！
アプリの使い方
- 自宅や会社・学校の最寄り駅を検索して駅を登録
- 登録した駅に一定距離に近づくと通知してくれる
- 必要に応じて通知時間を設定
本記事の目的
宣伝目的だよ。 備忘録やExpoを使用してみた感想など。
これから使ってみたいって人に興味を持っていただけたら嬉しい。
ある程度ダウンロードされたらどれくらい需要があるのかも書きたいと思います。
話すこと
- 開発当初から申請が通るまでの手順
- Expo(React-native)でどんなライブラリを使ったか
- どんな機能を使ったか
- 連携した外部機能
- 苦労したこと
- したいけどできなかったこと
- これからしたいこと
-
収入・ダウンロード数※いつかは掲載します
話さないこと
- Expoなどの具体的な使い方
- App Storeの申請方法
開発当初から申請が通るまでの手順
- 持ち物
- imac
- iphone6S (Expo Clientをインストール)
- 環境・ツール
- Expo Snack
- 最初のプログラム開発。簡単な実装はこれで確認したほうが楽。
- vscode
- 「Expo Snack」から途中で交代。中盤～終盤はこちらで実装。
- Github(smartGitで管理)
- ソースコード管理といったらコレでしょ。
- xcode(Application loader)
- これがないとApp Storeにビルドファイルをアップロードできないのです。
- iphone simulator
- App Store公開時にipadサイズ、iphoneXRサイズのスクリーンショットが必要。
- (iphone:MandalArtアプリ)
- アプリのアイデアだし、メモなどに。
- Expo Snack
- Expoに登録してExpo Snackで画面周りや簡易機能などをゴリゴリに実装(2019/03～04)
- 簡単に実機・Emu接続ができるので検査 ※バグがあったら「１」に戻る(2019/03～04)
- ある程度できたらvscodeでビルド(2019/04～06)
- 「3」でビルドしたipaファイルをxcodeでアップロード(2019/05～06)
- App Storeに申請 ※リジェクト(申請却下)されたら「3」に戻る(2019/05～06)
- 目出度く公開完了(2019/06/20)
開発時にどんなライブラリを使ったか
ええい、package.jsonを見たほうがはやい！
package.json
"axios": "0.19.0",
"ex-react-native-i18n": "0.0.5",
"expo": "^33.0.0",
"expo-ads-admob": "^5.0.1",
"expo-localization": "^5.0.1",
"expo-location": "^5.0.1",
"expo-permissions": "^5.0.1",
"expo-task-manager": "^5.0.1",
"react": "16.8.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
"react-native-app-link": "1.0.0",
"react-native-elements": "1.1.0",
"react-native-maps": "^0.24.2",
"react-native-modal-datetime-picker": "7.4.2",
"react-native-swipeout": "2.3.6",
"react-native-vector-icons": "6.5.0",
"react-navigation": "3.11.0",
"react-redux": "7.0.3",
"redux": "^4.0.0-0",
"sentry-expo": "^1.13.0"
どんな機能を使ったか
- axios
- API実行
- ex-react-native-i18n
- メッセージ、名称などを簡易に多言語化
- expo
- Expoのメイン機能
- expo-ads-admob
- google-admobの広告
- expo-location
- expo-task-manager
- 位置情報取得・geolocation機能
- expo-permissions
- iphoneの通知・位置情報取得権限
- react-native-app-link
- 無料版アプリから有料版アプリへのリンク飛ばし
- react-native-elements
- ヘッダーなどExpoの素材でないもの系
- react-native-maps
- 地図、本アプリではGoogle Mapを使用
- react-native-modal-datetime-picker
- 時刻picker
- react-native-swipeout
- リストを横スワイプ(削除)できる
- react-native-vector-icons
- アイコン系、豊富で見てみると面白い
- react-navigation
- 画面遷移
- react-redux
- redux
- reduxによるステータスの保存。ただしアプリ履歴を消したら、ステータスも消えてしまうので、AsyncStorageにも設定していた。
- sentry-expo
- バグ検出用
連携した外部機能
- Google API ※一定以上で有料
- Geolocationや位置情報を取得時に使用
- 駅名検索で使用(place API)
- google-Admob
- 広告。Expoだとgoogle-Admobの広告機能が簡単に実装できます。
- sentry-expo
- sentryというExpoで管理できない発生したエラーもこちらで出力、感知してくれます。終盤のAppleリジェクト時にお世話になりました。
苦労したこと
- Apple様によるリジェクト地獄。合計20回ほど。
- Expoでは動く、自分の実機でも動く。でもApple様は動かない。
- Emulatorで確認⇒実機で確認⇒sentryで確認しました。
- こっちでは動くのに、こっちでは動かないってことが多々あった。
- App Store ConnectよりdSYMでcrash-reportを確認してみる。
- Google Mapの地図を使う場合は『app.json』に"config":{"googleMapsApiKey":"XXXXXXXXXXXXX"}を記載する必要がある。
- Emulatorで確認⇒実機で確認⇒sentryで確認しました。
- その他の指摘
- 通知(notofication)を使用する場合は「Permissions.getAsync(
Permissions.NOTIFICATIONS」を使ってね - 位置情報取得を使用する場合は「Permissions.askAsync(Permissions.LOCATION)」を使ってね
- 位置情報取得を使用する場合は『app.json』に"infoPlist": {"NSLocationWhenInUseUsageDescription":"AAA","UIBackgroundModes":["location"]}を記載する必要がある
- 通知(notofication)を使用する場合は「Permissions.getAsync(
- テンプレのような指摘内容、そして意味不明なクラッシュレポート
- 英語
- Google翻訳
- Expoでは動く、自分の実機でも動く。でもApple様は動かない。
- Expo Clietで途中からgeolocationがテストできなくなった。(実機では動くから心配しないで)
- iMacのバージョンが古くて、xcodeが最新じゃない
- ビルドしたIPAファイルを実機に入れることができなかった。 それでも申請は通った。
- デザイン
- デザインは色々な人にみてもらった。最初は明るめな色にしていたが、暗めがいい、類似色に統一したほうがいいと意見をたくさんもらった。
- 奥が深い...(ちなみに、アプリアイコンはデザイナーに作ってもらいました)
したいけどできなかったこと
- 無料版と有料版は分けたくなかった(アプリ内課金を使いたかった)
- デタッチを使えばできるんだけど、xcodeを使っての管理になるのが嫌だったので止めた
- バックグラウンドでの通知時にバイブレーションや音声機能を使用
- 無理だった。バックグラウンドではアプリの機能の一部が使えなくなった。
これからしたいこと
- Android対応
- Expoってマルチプラットフォーム開発が強みなんです。だからAndoridもすぐビルドはできたのですが、iosとは違ってできること、できないことがあります。
- 海外の言語対応
- App Storeの申請では国ごとに説明を変えることができる。まずはアメリカなどの英語圏を網羅して分母を増やしていきたい。
- デザイン、要望の対応
- 画面の機能以外に構想はしていたが、蛇足な気がしたので排除した。しかし、今後も色々と要望は出てくると思うので多数の意見は組んでいきたい。
- マーケティング
- まずは無料版が売れたらいいなぁと感じています。そのために、SNSやアプリのレビューサイトなどを色々駆使して世に知らしめていきたいと思っています。
終わり
Expoはクラウドの開発環境なのですが、PCのスペックが低かったこともありとても使いやすかったです。実機と簡単に接続ができるところもGoo！
会社の業務でreactを触っていたので、開発しやすかったのはありますが、初めてのアプリ開発はけっこう楽しかったです。
