Android
iOS
reactnative
expo
CRNA

非iOSエンジニアがExpoのReact Native(CRNA)で作ったアプリを初めてAppleに申請するまで


作ったアプリ

最強のねこ21

21の数字を言ったら負けなミニゲームです。よければ遊んでみてください🙇‍


はじめに


対象者


  • React Native(CRNA)で作ったアプリをはじめてAppleに申請する人


    • Androidも申請しましたが、はまるところがなかったので最後にちょこっと記述しています



  • 話さないこと


    • React Nativeでアプリを作る方法



  • 話すこと


    • アプリが完成しAppleに申請するまで




Expoとは


開発時のXcodeのバージョン


  • OSX 10.11 for Xcode 7.3.1


    • Appleにアップロードしたときにエラーが出てダメでした



  • OSX 10.13 for Xcode 9.4.1


    • 最新版にアップデートしたらうまくいきました。OSとXcodeを最新にするのが吉




全体の流れ


  1. Developer登録

  2. アプリアイコン作成

  3. スクリーンショット作成

  4. app.json作成

  5. ExpoでスタンドアローンAppをビルド

  6. Application Loaderでアップロード

  7. 審査へ提出



1. Developer登録


2. アプリアイコン作成


  • Apple申請用に 1024 x 1024 の正方形(丸角にしなくていい)のpngファイルを準備します

  • クオリティの高いアイコンを作る技術がない場合、フリー素材を加工するのが楽です


今回使用したサイト


  • フリー素材(無料)



  • 画像加工(無料)



    • Figma


      • メールアドレス登録必要

      • ブラウザで動作する

      • メニューが英語


      • 日本語テキストが4つしか使えない






    • FireAlpaca


      • メニューが日本語

      • 今回は使わなかったけどこっちの方が簡単かもしれない?






作ったもの

app-icon-128.png


  • 制作時間30分くらい

  • 画像が透過(アルファ)だとエラーになるため透過をなくします




3. スクリーンショット画像作成

Apple申請用に 1242 x 2208 のpngファイルを1枚以上準備します


  1. Expoのシミュレータでスクリーンショットをとる

  2. 画像を開く(プレビュー)

  3. デスクトップメニューバーの ツール -> サイズを調整

  4. 🔒をクリックし幅と高さを変更して保存



4. app.json 作成


app.json

{

"expo": {
"name": "StrongestCat21",
"icon": "./assets/icons/app-icon.png",
"version": "1.0.0",
"slug": "cat21",
"sdkVersion": "25.0.0",
"ios": {
"bundleIdentifier": "com.firebaseapp.horieapp.strongestcat"
},
"android": {
"package": "com.firebaseapp.horieapp.strongestcat",
"permissions": []
}
}
}


name


  • アプリの名前

  • アプリアイコンの下に表示される文字になるため10文字以内にするべきでした...

  • 日本以外にも配信する予定だったので英語にしました




icon


  • アプリアイコンで作成したファイルのパス


version


  • アプリのバージョン

  • JS以外の修正があった場合はバージョンを上げて再申請します


sdkVersion


  • ExpoのSDKのバージョン


slug


  • Expoで管理するID

  • 英数字ハイフンアンダーバーのみ


ios: bundleIdentifier


  • iOSアプリのID

  • ドメイン名の逆+アプリ名が一般的

  • ユニークであればドメインを取得する必要はないらしいです




android: package


  • AndroidアプリのID


  • ハイフンを使ったら下記のエラーが出ました



Field: android.package - 'android.package' should be a reverse DNS notation unique name for your app. For example, host.exp.exponent, where exp.host is our domain and Expo is our app..


android:permissions


  • スタンドアローンAppがインストール時に要求する権限のリスト


    • [] に設定すると、必要最小限の権限のみが使用され、Androidアプリの申請時にプライバシーポリシーが不要になります



  • カメラ機能などを使う場合は記述が必要になり、Androidアプリの申請時にプライバシーポリシーが必要になります

  • 参考: https://docs.expo.io/versions/latest/workflow/configuration#android


5. iOS用のスタンドアローンAppをビルド


expコマンドのインストール

$ npm install -g exp


スタンドアローンAppビルド

$ exp login

$ exp build:ios


  • 途中で何度か選択肢がでますが、Expoにまかせる(そのままEnter)を選べばOKです

  • 10分くらいかかります

  • 最後にスタンドアローン(ipa)ファイルのリンクが表示されるので、アクセスしダウンロードします


6. Appleにアプリをアップロード


  1. Xcode を開く

  2. デスクトップメニューバーの Xcode → Open Developer Tools → Application Loader

  3. さきほどのipaファイルを選択

  4. 完了まで15分くらいかかります

※数分待ってもApp Store Connectに表示されない場合は失敗している可能性があります


7. 審査へ提出

※ブラウザはSafariがいいらしいですが、Chromeでも大丈夫でした



  1. App Store Connectにログイン → マイApp → アクティビティ

  2. さきほどアップロードしたのアプリが登録されているか確認します

  3. アプリ情報などの入力



  4. アプリの処理完了のメールが届いたら「審査へ提出」ボタンを押します


    • ※処理完了まで数時間かかります



  5. 広告無しでも「広告が存在する」とエラーが出ました


    • 何らかのパッケージが原因でエラーが出るようです

    • せっかくなので広告(AdMob)を追加してみます




AdMob


  • ExpoでAdMobのツールが提供されています

  • AdMobのアカウントを登録し、下記のタグを空いているスペースに追加します


    • adUnitIDは自分のAdMobのコードに差し替えてください



  • 本物の広告が完全に表示されるまでは数時間かかりました(テスト用はすぐ出ます)

import { AdMobBanner } from 'expo'

<AdMobBanner
bannerSize="banner"
adUnitID="ca-app-pub-3940256099942544/6300978111" // Test ID, Replace with your-admob-unit-id
/>


アプリをアップデート


  • JSだけの更新であれば下記のコマンドで反映されます


    • 再ビルドする必要なし


    • app.jsonのバージョンを変更する必要なし



$ exp publish

※iOSアプリに関しては以上です。広告有りにして申請を出し、2日くらいで審査OKのメールが来ました



Google Playの申請


  • Appleの申請より待ち時間もなく、すぐに申請/公開できました

  • 説明が日本語のため、はまるところも特にありませんでした

  • 今回は試していませんが、プライバシーポリシーが必要な場合は少し大変そうです


Appleとの主な違い


  • 初回に $25 を1度支払うだけ

  • アプリの審査なし

  • アプリをそのままブラウザからアップロードできる


    • スタンドアローンApp作成コマンド


      • $ exp build:android





  • アプリアイコン


    • 512 x 512 のpngファイルが必要



  • ヘッダー画像


    • 1024 x 500 のpngファイルが必要



  • スクリーンショットは最低2枚


    • サイズは下記を満たしていれば自由


      • 1辺の最小の長さ: 320px

      • 1辺の最大の長さ: 3840px






Expoを使うことで得るもの


  • iOSアプリもAndroidアプリも両方作れる

  • スタンドアローンAppが簡単に作れる

  • JSだけのアップデートであれば、審査なしですぐにアップデートできる

  • Expoのツールを使えば色々簡単


    • AdMobなど



  • 参考:ExpoでReact Nativeアプリを開発するメリット5選


Expoの不満点


多言語化


今回使用したモジュール


package.json

    "@expo/vector-icons": "6.2.1",

"ex-react-native-i18n": "0.0.3",
"expo": "^25.0.0",
"native-base": "2.3.9",
"react": "16.2.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-25.0.0.tar.gz",
"react-native-auto-scroll": "0.0.1",
"react-native-i18n": "2.0.12",
"react-native-storage": "0.2.2",
"react-navigation": "1.4.0"