Go to Qiita Advent Calendar 2024 Top
LoginSignup
63
53

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.

@HorieHin運営者ギルド

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

Last updated at Posted at 2018-07-04

作ったアプリ

最強のねこ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登録
  1. アプリアイコン作成
  • Apple申請用に 1024 x 1024 の正方形（丸角にしなくていい）のpngファイルを準備します
  • クオリティの高いアイコンを作る技術がない場合、フリー素材を加工するのが楽です

今回使用したサイト

  • フリー素材（無料）
  • 画像加工（無料）
    • Figma
      • メールアドレス登録必要
      • ブラウザで動作する
      • メニューが英語
      • 日本語テキストが４つしか使えない
    • FireAlpaca
      • メニューが日本語
      • 今回は使わなかったけどこっちの方が簡単かもしれない？

作ったもの

app-icon-128.png

  • 制作時間30分くらい
  • 画像が透過（アルファ）だとエラーになるため透過をなくします
  1. スクリーンショット画像作成

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

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

  2. 画像を開く（プレビュー）

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

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

  5. 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
  1. iOS用のスタンドアローンAppをビルド

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

$ npm install -g exp

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

$ exp login
$ exp build:ios
  • 途中で何度か選択肢がでますが、Expoにまかせる（そのままEnter）を選べばOKです
  • 10分くらいかかります
  • 最後にスタンドアローン（ipa）ファイルのリンクが表示されるので、アクセスしダウンロードします
  1. Appleにアプリをアップロード
  1. Xcode を開く
  2. デスクトップメニューバーの Xcode → Open Developer Tools → Application Loader
  3. さきほどのipaファイルを選択
  4. 完了まで15分くらいかかります

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

  1. 審査へ提出

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

  1. App Store Connectにログイン → マイApp → アクティビティ
  2. さきほどアップロードしたのアプリが登録されているか確認します
  3. アプリ情報などの入力
  1. アプリの処理完了のメールが届いたら「審査へ提出」ボタンを押します
    • ※処理完了まで数時間かかります
  2. 広告無しでも「広告が存在する」とエラーが出ました
  • 何らかのパッケージが原因でエラーが出るようです
  • せっかくなので広告（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アプリに関しては以上です。広告有りにして申請を出し、２日くらいで審査OKのメールが来ました

Google Playの申請

  • Appleの申請より待ち時間もなく、すぐに申請/公開できました
  • 説明が日本語のため、はまるところも特にありませんでした
  • 今回は試していませんが、プライバシーポリシーが必要な場合は少し大変そうです

Appleとの主な違い

  • 初回に $25 を１度支払うだけ
  • アプリの審査なし
  • アプリをそのままブラウザからアップロードできる
    • スタンドアローンApp作成コマンド
      • $ exp build:android
  • アプリアイコン
    • 512 x 512 のpngファイルが必要
  • ヘッダー画像
    • 1024 x 500 のpngファイルが必要
  • スクリーンショットは最低２枚
    • サイズは下記を満たしていれば自由
      • １辺の最小の長さ: 320px
      • １辺の最大の長さ: 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"
63
53
0

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
Sign upLogin
63
53

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?