【18】React Nativeでテキストエディタを作ってみる！【デプロイ編】

こんにちは！かたつむり(@Katatumuri_nyan)です！

Reactを触ってみて、サイト的なものは作れるようになりました(*´ω｀)
そこで、次はReactNativeを触ってみようと思い、簡単なテキストエディタを作成しようと企んでおります(笑)

アプリの機能としては十分できてきたと思うので、これからビルド・デプロイ・公開申請をしていきます！

GitHubでソースコードを管理しています！

最初から見る↓
【1】React Nativeでテキストエディタを作ってみる！【下調べ編】

前回を見る↓
【17】React Nativeでテキストエディタを作ってみる！【細かい修正編】

環境

React Native
Expo
windows 10

参考

React Native + Expo – WindowsでアプリビルドからAppストア申請まで！【2020年3月時点】
Expo公式ドキュメント
こちらを参考に公開申請していきます。

公開申請用の設定 app.jsonの構成

まず、app.jsonに公開用の設定を書いていきます。2.app.jsonを構成します

既に、app.jsonはあるので、足りなさそうな部分を書き足しました。

{
  "expo": {
    "name": "snail_Markdown_TextEditor",
    "slug": "snail_Markdown_TextEditor",
    "version": "1.0.0",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
+      "bundleIdentifier": "com.katatumuri.snailmarkdowntexteditor",
+      "buildNumber": "1.0.0",
      "supportsTablet": true,
      "usesIcloudStorage":true
    },
    "android": {
+      "package": "com.katatumuri.snailmarkdowntexteditor",
+      "versionCode": 1,
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

ビルド

ビルドしていくので、とりあえず expo startします。

Andoroid用にビルド

Android用にビルドすることを選択した場合
expo build:android -t apkAndroid向けにビルドする場合、APK（）またはAndroid App Bundle（expo build:android -t app-bundle）のビルドを選択できます。アプリバンドルをお勧めしますが、プロジェクトでGoogle Playアプリ署名が有効になっていることを確認する必要があります。詳細については、こちらをご覧ください。
プロジェクトを初めてビルドするときに、キーストアをアップロードするか、それともGoogleに処理してもらうかを尋ねられます。キーストアが何であるかわからない場合は、キーストアを生成してもらうことができます。それ以外の場合は、自由にアップロードしてください。
Expoにキーストアを生成させることを選択した場合は、後でキーストアを実行して安全な場所にバックアップすることを強くお勧めしますexpo fetch:android:keystore。アプリをGooglePlayストアに送信したら、そのアプリに対する今後のすべての更新は、Googleが受け入れるために、同じキーストアで署名する必要があります。何らかの理由で、将来プロジェクトを削除したり、資格情報をクリアしたりした場合、キーストアをバックアップしていないと、アプリに更新を送信できなくなります。

Expoの公式ドキュメント通りにやっていきます。
Google Playアプリ署名がわからないので、apkでやってみますｗ
別コンソールを開いてexpo build:android -t apk

Expoのアカウントがあるので、
ログインします。

キーストアを作るか聞かれるので、作っておきます。

ビルド中、Expoのホームでこんな感じで表示されてました。

できたっぽい

iOS用のビルド

iOS用にビルドすることを選択した場合
iOS用のスタンドアロンアプリは、アーカイブexpo build:ios -t archive（expo build:ios -t simulator）ビルドまたはシミュレーター（）ビルドの2つの異なるタイプでビルドできます。シミュレータービルドを使用すると、スタンドアロンアプリをシミュレーターでテストできます。アプリをストアに公開したり、TestFlightなどのツールを使用して配布したりする場合は、アーカイブを使用する必要があります。
iOS向けにビルドする場合、独自のオーバーライドを提供する機会を持ちながら、Expoに必要なクレデンシャルを作成させるかどうかを選択できます。Apple IDとパスワードはローカルで使用され、Expoのサーバーに保存されることはありません。

公式ドキュメント通りにやっていきます。
expo build:ios -t archive

Appleにログインするよう求められます。

Appleにログインしたら、認証をする必要があるみたいです。

おっと！Appleに課金してないからダメみたいです。
Apple Developerアカウントを作成します。

Apple Developerアカウントを作成

App Store Small Business Programに登録します。

登録画面に移動

ログインします。

あれ！だめでした。

developerアカウントはあるみたいなので、どうしたらいいんだろうｗ

Apple Developer Program←登録するのはこっちでした！

登録していきます。

個人情報の登録

法人の種類を選択

その後、支払いをします。

支払いをしたものの、アクティベート用のメールが来ず、この表示のママなので、待ちます。

数日後、アクティベートされたみたいなので、ビルドからやり直します。

iOS用にビルド

ログインします

ログインすると、Expoを使うかどうか聞かれます。
Expo使う設定にします。

全部Expoを使うようにします。

こちらもExpoにまかせます。

すると、ビルドが始まるので、待ちます。

ちなみに、Expoのサイト上ではこのような表示になっています。

ビルドが終わったようです。

ビルドしたファイルをダウンロードしておきます。

アプリをストアへ送信

ビルドしたアプリを各ストアへ送信していきます。

公式ドキュメントを見ながら送信していきます。

Google App Storeへ送信

重要：
・Googleサービスアカウントを作成し、そのJSON秘密鍵をダウンロードする必要があります。
・その後、Google Play Consoleでアプリを作成し、少なくとも1回は手動でアプリをアップロードする必要があります。

とのことなので、Googleサービスアカウントを作成していきます。

Google Play Consoleへの登録

Google Play Consoleにアクセスします。

利用規約に同意。

デベロッパーアカウントを作成します。
（ここでも支払いが必要…(;´д｀)トホホ）

電話番号の書き方を参考に。

クレジットカードで購入します。

支払い完了

アプリの作成

参考　　

Google Play Consoleで、アプリを作成していきます。

アプリを作成を押す。

アプリの情報を入力していきます。
アプリを無料に設定すると、公開後に有料にすることはできないようです。

すべてのアプリ一覧に、新しいアプリが表示されました。

アプリのセットアップ

アプリのセットアップをしていきます。

一つ一つ設定していきます。

アプリアイコン・グラフィックの作成

↑この画面で、アプリのアイコン・グラフィック・スクリーンショットを設定しないといけないみたいなので、作成していきます。

アプリのリリース

アプリを公開する前に、テストしないといけないみたいなので、、、
今回はオープンテストで行うようにしようと思います。

「誰でもGooglePlayで登録することで、アプリをテストできるようにする」を選びました。

国や地域を選択

タスクを確認して、リリースする国を追加します。

オープンテスト版リリースの作成

アプリバンドルでのビルド

アプリバンドルが必要みたいですね…。
アプリバンドルでビルドしなおします。

expo build:android -t app-bundle

おわりました！

こちらをExpoからダウンロードして、オープンテスト版リリースの作成画面でアップロードします。

プライバシーポリシーの追加

こちらのサイトを参考に、プライバシーポリシーを作ります。
このブログの固定ページに掲載して、URLを記載することにします。

スマホアプリ版アプリケーション・プライバシーポリシー

Apple Storeへ送信

私はWindowsなので、直接送信できないのでは…と思い、Expoの有料プランに登録するか迷っていました。
（MacOSでしか使えなさそうなTransporterというアプリが必要）

そこでこんな記事を発見→WindowsからApp Store Connectにipaファイルをアップロードする
ひとまずは、この方法で試していきたいと思います。

App Store Connectへの接続

App Store Connectとやらに接続しないといけないみたいなので、接続していきます。

なにやら管理画面が出てきました！
「マイApp」を選択します。

Appを追加

ここからアプリを追加していきます。

ここでもアプリの情報を入力していきます。

iOSを選択

こちらの記事によると、SKUはなんでもいいらしい！

App情報を追加

こちらで、アプリの情報を追加していきます。
追加できたら、「審査へ提出」をおします。

ビルド

アップロードツールを表示を押します。

Xcodeはないので、「Transporter App をダウンロード」を押したいところですが、Mac用のリンクなので、違うとこから行きます。

上の方で紹介した、WindowsからApp Store Connectにipaファイルをアップロードするを参考に、Windows用のTransporterをダウンロードします。

Transporter User Guide 2.2こちらからダウンロードしていきます。
ちなみに、linux用の物もあるようです。

Windowsというリンクからダウンロードできます。

詳細を押して

実行を押します。

‘C:\Program Files (x86)\itms というところに iTMSTransporter.cmd があるので、これをPowerShell上で実行すればよさそうです。
PowerShell上で以下を行います。

& 'C:\Program Files (x86)\itms\iTMSTransporter.cmd' -help

こんな感じになった…ｗ
ちゃんとインストールされてますね

次は、以下をPowerShellで打ちます。

App uploads for macOS, Linux, and Windows: Specifies the directory and filename for the app source file (.pkg or .ipa). For Linux and Windows, -assetDescription is required.

& 'C:\Program Files (x86)\itms\iTMSTransporter.cmd' -m upload -assetFile 【ipaファイルの場所】 -u 【Appleconnectのユーザー名】 -p 【Appleconnectのパスワード】 -assetDescription .\Desktop\AppStoreInfo.plist -v eXtreme

あ、、、これMac無いとアップロードできないやつですね…。
詰みました💦

結局、Macでアップロードして申請提出しました🙇💦

記事を更新したら、Twitter(@Katatumuri_nyan)に共有されるようになっています。

よかったらフォローお願いいたします～！

質問・リクエスト・アドバイス等ございましたら、コメント欄にお願いいたします！

ではでは！
また次回お会いできるのを楽しみにしております。

環境

参考