LoginSignup
130
112

More than 5 years have passed since last update.

React NativeでiOS, Androidのストア公開のTips

Last updated at Posted at 2016-12-19

最初に

忘れてはいけない、でも目を背けがちなストア公開を記事にします。
私の場合ですが、web案件がメインだったため、社内に詳しい人物がおらず調べながらストア公開をしました。
また、ReactNativeをやるということは、何かしらWeb開発の経験がある人が多そう。共通課題と思っています。

私の場合、

  • RNで知見が少ない
  • そもそもWeb開発がメインだからストア公開とかヤベェ。
  • iOSはやったことあるけど、Android知らねえや(一方のみ)

などで、事前に時間がかかるだろうと、2週間程度余裕を見まして、開発と並行してリリース準備を進めました。
Tipsとして残したいと思います。

  • 尚、記憶を頼りにソースを見て書いてます。間違い&指摘があればすみません。すぐに直します。

今回は以下を前提としています。

  • 開発環境 Mac OS X El Capitan
  • React Native ver 0.28(以降も流れ自体は変わらないとは思いますが)

大前提 開発者登録は出来てますか?

当然のことですが、App Store、google playにアプリを出すにはデベロッパー登録が必要です。
Androidは\$25/初回登録、iOSは\$99/年間 必要となります。

登録手順のStepは各所で公開されているのでググって調べましょう。
Google Play Developer登録手順
iOS Developer Program登録手順

公開の準備をする

公開用のbuildを作成する前に、アプリ情報を入力する必要があります。

Android

Manifestfileを変更

android/app/src/main/AndroidManifest.xml
変更が必要あるのは

  • android:versionCode (内部の番号google playにuploadするたびインクリメントが必要)
  • android:versionName (google playで表示されるversion番号)
  • android:label="@string/app_name" (アプリ名)
  • android:icon="@mipmap/xxxxxxx" (ランチャーに表示されるアイコン)

android/app/src/main/res/values/strings.xml
に参照があるので変更すると良いでしょう。

build.gradle を変更

Manifestfileとbuilde.gradleを合わせるようにしています。

android {
    compileSdkVersion 23
    buildToolsVersion "23.0.3"

    defaultConfig {
        multiDexEnabled true
        applicationId "com.yourapplicationId"
        minSdkVersion 16
        targetSdkVersion 23
        versionCode 3
        versionName "1.0.1"
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
        renderscriptTargetApi 20
        renderscriptSupportModeEnabled true
    }

アイコンを作成

Androidのiconを作成します。解像度によったアイコンを準備してあげる必要があります。
一つずつ作るのは手間がかかりすぎるので、次のようなIcon generatorを使用すると時間短縮になります。
MakeAppIconは「1536x1536px」で画像を用意するとそれぞれの解像度にあったiconを作成してくれます。
それらを各フォルダに配置し、android:iconを設定します。

※ google playに登録用のアプリアイコンも作成されます。後々使います。

iOS

iOSプロビジョニングプロファイルの更新

iOSの場合は正規開発者がbuildしたものか、悪意のあるアプリが公開されないか。というところが徹底されていると感じます。
それが、プロビジョニングプロファイルの作成の面倒に繋がると思います。
全てこの記事では説明できない + iOSアプリでも共通項目のため下記を参照してください。

詳しくは以下(初見では手順9,10行くまでにめちゃくちゃハマりました。。。)
http://qiita.com/siglab/items/c3f8560fbafd44ad7633
http://qiita.com/edo_m18/items/6f10e57f95b25d9dab4e#%E6%89%8B%E9%A0%86

正直、プロビジョニング周りははてなが多いです。図解してくれる記事があったので助かりました。
全然サインアップができない。。。と頭抱えていたら、Bundle Identifierの間違いだったことがあります。
http://qiita.com/fujisan3/items/d037e3c40a0acc46f618

Info.plistを編集する

Project > Target > General > Identity
でアプリ名や、Version、buildを設定します。
スクリーンショット 2016-12-19 20.21.38.png
Bundle IdentifierはApple Developerで証明書を作成した名前と合わせてください。

Signingを行う

Signingを行う前に、Developer Teamで登録されている。Teamがあるか確認してください。
ない場合は、Xcode > Preferences > Accounts > Apple IDsを追加してください。

XcodeのSigning機能を使用すると自動化され便利です。
Project > TARGETS > General > SigningからAutomatically manage signingにチェックします。
すると、Teamがでてくるので、Teamを選択します。

スクリーンショット 2016-12-19 21.02.30.png

アイコンを作成

iOSのiconを作成します。Androidと同じく解像度によったアイコンを準備してあげます。
iconはImage.xcassetsに設定します。
スクリーンショット 2016-12-19 20.13.39.png

公開用のbuildを作成する

公開用に署名されたbuildを作る必要があります。

Android

buildを作成し、デジタル署名する必要があります。
基本的な流れはGuideで確認できます。

keystoreを作成

デジタル署名用のkeystoreを作成します。

keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

開発者の情報、パスワードなどを入力してkeystoreを作成してください。
※ 尚、このkeystoreを紛失 or パスワードを忘れると、apkを更新できず大変なことになるので必ずどこかに控えましょう。

buildを作成

gradleの機能を利用して、buildを作成することができます。
androidフォルダに移動し、以下のコマンドを叩きます。

cd android && ./gradlew assembleRelease

以下のファイルが作成されます。
android/app/build/outputs/apk/app-release-unsigned.apk

デジタル署名を行う。

release用のファイルは作成されましたが、公開するにはデジタル署名を行う必要があります。
先ほど作成したkeystoreを使用し、署名を行います。

jarsigner -verbose -keystore my-release-key.keystore app/build/outputs/apk/app-release-unsigned.apk my-key-alias

zipalignを行う。

コンソールから作ったapkはzipalignを行う必要があります。(IDEの時は自動らしい)
これは、apkを最適化し、実行時のRAMの軽減をしてくれます。お約束事なのでやっておきましょう。

zipalign -f -v 4 app/build/outputs/apk/app-release-unsigned.apk my-app.apk

参考
http://qiita.com/androhi/items/9c7340d709e856f9b71e

AndroidはreleaseBuildの作り方がわからず戸惑いましたが、
やり方さえ確立できれば、リリースの際に手こずった印象はなかったです。
Debug Buildを始めて通す時が大変だった印象。。。

iOS

iOSは準備が大変な分、ビルドの方法はシンプルだった印象です。

アプリをアーカイブする

Product > Archive を選択します。
グレーの場合はビルドターゲットをシュミレータから変更しましょう。
スクリーンショット 2016-12-19 21.09.31.png

以上!!!
と言いたいところですが、初アーカイブできるまで何度か設定周りを触った印象です。。。
一つ一つメモっておけばよかったのですが、余裕がなくてできていませんでした。
ただし、ログをググるとReact Nativeのissueに上がってたと思います。

Libraries周りのBuild Settingsを触った覚えもあります。

公開手順

Android

1. google play developer consoleにアクセスします。
2. Create applicationをクリックしてアプリを作成
3. APK > 製品版に最初のAPKをアップロードをクリックでapkをupload
4. 必要項目(*)を入力して(アプリ名やスクリーンショットやその他もろもろ)

ここでは書ききれないので下記などを参考にしてください。
http://dev.classmethod.jp/smartphone/android/android-app-how-to-release/

iOS

  1. iTune Connect > マイ App > + > 新規App
  2. バンドルIDを一致させたアプリを作成します
  3. Archiveが成功するとリストが表示されるので  > 選択 > Upload App Storeを選択します。
  4. 有効なTeamを選択し、Validationを行います。
  5. 成功すれば、自動的にuploadされます。

以前の記憶では何かのUploaderを使用した覚えがあるが、Archive、これは便利。
バンドルIDが不一致の場合、情報が少ないエラーに泣かされるので注意(笑)

図解でわかりやすいです。
https://iphone-app-tec.com/ios/app-upload.html

まとめ

手順自体はついつい忘れがちなので、忘れ防止に書いたが既に忘れてて笑った(笑)

React Nativeだからというところは少なく、
AndroidとiOS特有のものが多いです。逆に言うとiOS & Android ディベロッパーが近くにいるとアドバイスくれるかも。
エラーは仕方ありません。素直にissueを漁りましょう。

130
112
2

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
130
112