nikumaro2’s blog

webエンジニアです。HTML、CSS、Javascript、React.jsの開発についてまとめます。また、初心者英語TOEIC350点。音楽(ベース)、ゴルフなどもたまに、、

【ReactNative expo】スマホアプリを公開するまでにしたこと

プログラミング javaScript

スマホアプリを初リリースしました。リリースまでにしたことなどまとめたいと思います。

リリースまで

２、３時間を週５日×３ヶ月くらいでリリースしたので、大体100時間ちょっとくらいでリリースできた気がします。
Reactを本格的に使いのが初めてだったので、勉強しながらだったので、次やったら半分ぐらいの時間でできそう。

内訳は、

  • 環境構築　10%

  • コーディング　20%

  • レイアウト調整　50%

  • ビルド、広告、各種登録、アイコン画像作成、審査　20％
    ぐらいな感じでした。CSS苦手。。


アプリについて

コンセプトは、ゴルフのときに簡単にすぐ目的場所までの距離を測れるアプリ。シンプルに操作できて、動作が軽いアプリを目指しました。

Simple Golf
Simple Golf
無料
posted withアプリーチ


全体の流れ

環境構築
コーディング
Apple Developerの登録
ビルド
アイコン画像作成
広告の導入
審査


使った技術

  • 言語
    HTML
    CSS
    JavaScript
    Node.js

  • フレームワーク
    ReactNative
    expo

    ちなみに、
    ReactNativeは、HTML,CSS,JavaScriptなどのWEB技術でスマホアプリを作れるフレームワークで、同じコードでAndroid版アプリも作れる優れもの。

    Expoは、簡単にアプリ開発や検証が可能で面倒なビルドや検証作業から解放され、また便利なモジュールも多く使うことができるので、大幅なショートカットに繋がる。PC上で修正した箇所が瞬時にスマホ上に反映される優れもの。


環境構築

GitHubの登録
VSCodeの環境構築
VSCodeとGitHubの連携


コーディング

　なるべく自作のコンポーネントを作って、presentationalコンポーネントと containerコンポーネントを分けるように実装していました。
　全体の構成は、Atomic Designを意識して構成。

使用した外部パッケージは大体以下

  • レイアウト react-native-elements、native-base

  • 画面遷移 react-navigation

  • 地図 react-native-maps

  • 位置情報 expo-location

  • 状態管理 unstated


Apple Developerの登録

1年間の有効期限で１万2000円かかりました。。元を取れるように頑張らないと。


ビルド

exp build:iosを実行して、Apple DeveloperのIDとKeyを入力。
ビルドできるはずでしたが、このようなエラーが、、Reason:Unknown reason, raw:“Could not receive latest API key from App Store Connect, this might be a server issue.”
ずっと原因が分からず苦労しましたが、expo-cliがApple Developerに２段階認証が導入される前のバージョンになっていたためログインできていなかった模様。
npm install expo-cli　で最新バージョンに更新したらビルド通りました。


アイコン画像作成

シルエットACを使ってがんばりました。


広告の導入

expo-ads-admobで簡単に実装できました。
googleのAdMobに登録して、アプリを登録して、キーを発行して、コードに書くだけで意外と簡単にできました。


審査

２回拒否されました。
拒否理由は以下でした。

  • アプリ内でToBeUpdateと表示していた部分があって、不完全なものは承認できないとのこと。言われてみればそうですね、、

  • スマホの位置情報を使う理由を以下のinfoPlistのようにapp.jsonに記述し、ユーザーに許可を求める必要があるが書いてませんでした。
    あと、最初、英語のみで記述(主言語は日本語を選択しているのに)していたら、ダメだと言われました。

 ...
  "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "ここはユニークな文字列なら良いらしい",
      "infoPlist": {
        "NSLocationWhenInUseUsageDescription": "このアプリでは、現在地から目的地までの距離を測定するために端末の位置情報が必要です。In this app, the location information of the terminal is required to measure the distance from the current location to the target location."
      },
      "config": {
        "googleMobileAdsAppId": "ここにAdMobのkeyを記述"
      }
    }
...

app.jsonが結構苦戦しました。

これらを直したら無事リリースできました。