作ったアプリ
最強のねこ21
21の数字を言ったら負けなミニゲームです。よければ遊んでみてください🙇
はじめに
対象者
- React Native(CRNA)で作ったアプリをはじめてAppleに申請する人
- Androidも申請しましたが、はまるところがなかったので最後にちょこっと記述しています
- 話さないこと
- React Nativeでアプリを作る方法
- 話すこと
- アプリが完成しAppleに申請するまで
Expoとは
- ReactNative開発補助ツール
- https://expo.io/
-
CRNA(create-react-native-app)
- ローカルに開発環境作成
-
Expo Snack
- React NativeをWeb上で簡単に体験
-
Expo XDE
- iPhone、Androidのシミュレート
- 参考:ExpoでReact Nativeアプリを開発するメリット5選
- ビルド時にプロビジョニングプロファイル不要。審査不要でアップデート可能
開発時のXcodeのバージョン
- OSX 10.11 for Xcode 7.3.1
- Appleにアップロードしたときにエラーが出てダメでした
- OSX 10.13 for Xcode 9.4.1
- 最新版にアップデートしたらうまくいきました。OSとXcodeを最新にするのが吉
全体の流れ
- Developer登録
- アプリアイコン作成
- スクリーンショット作成
- app.json作成
- ExpoでスタンドアローンAppをビルド
- Application Loaderでアップロード
- 審査へ提出
1. Developer登録
- Apple Developer
- 開発用のAppleIDがない場合は新規に作成してください
- 毎年$99かかります
- 注文してから48時間かかります
- 申請する2日前くらいに購入するとちょうどいいです
- 基本的に入力フォームに従って入力していきます
2. アプリアイコン作成
- Apple申請用に 1024 x 1024 の正方形(丸角にしなくていい)のpngファイルを準備します
- クオリティの高いアイコンを作る技術がない場合、フリー素材を加工するのが楽です
今回使用したサイト
- フリー素材(無料)
-
シルエットAC
- メールアドレス登録必要
-
シルエットAC
- 画像加工(無料)
-
Figma
- メールアドレス登録必要
- ブラウザで動作する
- メニューが英語
-
日本語テキストが4つしか使えない
- 参考:Figmaで日本語を使う
-
FireAlpaca
- メニューが日本語
- 今回は使わなかったけどこっちの方が簡単かもしれない?
-
Figma
作ったもの
- 制作時間30分くらい
- 画像が透過(アルファ)だとエラーになるため透過をなくします
- 画像をプレビューで開いて ファイル -> 書き出し アルファのチェックを外す(透過無の場合はチェックが表示されない)
3. スクリーンショット画像作成
Apple申請用に 1242 x 2208 のpngファイルを1枚以上準備します
- Expoのシミュレータでスクリーンショットをとる
- 画像を開く(プレビュー)
- デスクトップメニューバーの ツール -> サイズを調整
🔒をクリックし幅と高さを変更して保存
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文字以内にするべきでした...
- 日本以外にも配信する予定だったので英語にしました
- 言語ごとに変更するやり方もあるみたいです
- 参考:iOSアプリの多言語対応
- 言語ごとに変更するやり方もあるみたいです
icon
- アプリアイコンで作成したファイルのパス
version
- アプリのバージョン
- JS以外の修正があった場合はバージョンを上げて再申請します
sdkVersion
- ExpoのSDKのバージョン
slug
- Expoで管理するID
- 英数字ハイフンアンダーバーのみ
ios: bundleIdentifier
- iOSアプリのID
- ドメイン名の逆+アプリ名が一般的
- ユニークであればドメインを取得する必要はないらしいです
- 念のためFirebase Hostingで仮ドメイン作りました
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にアプリをアップロード
- Xcode を開く
- デスクトップメニューバーの Xcode → Open Developer Tools → Application Loader
- さきほどのipaファイルを選択
- 完了まで15分くらいかかります
※数分待ってもApp Store Connectに表示されない場合は失敗している可能性があります
7. 審査へ提出
※ブラウザはSafariがいいらしいですが、Chromeでも大丈夫でした
- App Store Connectにログイン → マイApp → アクティビティ
- さきほどアップロードしたのアプリが登録されているか確認します
- アプリ情報などの入力
- 参考:App Storeでアプリを公開する為にiTunes Connectからアプリを申請する手順
- サポートURLは必須なのでGoogleフォームで作成しました
- 契約/税金/口座情報
- 参考: http://galakutaapp.blogspot.com/2016/12/blog-post.html
- 無料アプリでも情報を入力しないとダメらしいです
- 「審査OKだけど入力しないと公開できないよ」のメールが来ました
- 役職を入力する必要があるのですが、個人なので何でもいいらしいです。私は Developer にしました
- アプリの処理完了のメールが届いたら「審査へ提出」ボタンを押します
- ※処理完了まで数時間かかります
- 広告無しでも「広告が存在する」とエラーが出ました
- 何らかのパッケージが原因でエラーが出るようです
- せっかくなので広告(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
- スタンドアローンApp作成コマンド
- アプリアイコン
- 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の不満点
- XCode上で作業する必要がある機能などがExpoが対応していないと使えない
- アプリアイコン、アプリ名を多言語化
- アプリ内課金
- Expoを外さないとできないらしい
- アプリアイコン、アプリ名を多言語化
多言語化
- i18nを使いReact Native(CRNA)で多言語化
- アプリ名、アプリアイコンを多言語対応する場合
- Xcodeで設定ファイルを作る必要がある
- 参考:iOSアプリの多言語対応
- 画像に文字を入れず、アプリ名は英語にするのが簡単ですね
- Xcodeで設定ファイルを作る必要がある
今回使用したモジュール
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"