React Native + Expo - WindowsでアプリビルドからAppストア申請まで！【2020年3月時点】
ついについに、もう長いこと取り掛かってきたReact Native + Expoでのアプリ作成の第一号をAppストアに申請しました。
アプリ作成自体にも苦戦し続けてきたわけですが、とりあえずできた！というところからストアに置くまでの手順もなかなか手強かったです...特にWindowsゆえに。
ネット上の情報をかき集めて見た限り方法も繰り返し変更されてきているので、いつまで役に立つかは分かりませんが、React Native + Expoで作成したアプリのWindowsでのビルドからストア申請までの一連の流れを記しておきます。
（ちなみにアカウント認証などの関係でiPhone所持は前提になってます、まぁApp Storeに申請、てことだからきっと大丈夫だよね？）
- Apple Developer Program加入
- Build
- App Store ConnectでのApp登録
- ipaファイルのアップロード
- Test Flight
- App審査に提出
- OTA Update
- おわりに
Apple Developer Program加入
こればかりは他にどうしようもありません。年間99USD必要ですが、お金で解決です。
https://developer.apple.com/programs/
Build
アプリのDirectoryでやることとして、まずはapp.jsonをいくつか加筆修正します。これについては、全体的な流れも含め、下記サイトにはお世話になりました。
【React Native】【Expo】iOS/Android ストア申請用のビルドを作る - React Native Tech Blog
非iOSエンジニアがExpoのReact Native(CRNA)で作ったアプリを初めてAppleに申請するまで - Qiita
公式によると色々とオプションの設定項目あるみたいですが、今回は深入りせず。
Buildの時点でIconとsplash screenの画像が必要になります。
ちなみに下記サイトなどで簡単に画像サイズ調整できます。
PEKO STEP - 無料で楽しめるゲームやアプリの配信サイト
とりあえずビルドしてみまっしょい。
expo build:ios
すると。。。
ios build error
Authentication with Apple Developer Portal failed! bash exited with non-zero code: 127
公式によると
Windows Subsystem for Linux
早速Windows不遇の始まりです。下記案内を参考にWindows Subsystem for Linuxを導入しましょう。
Expoの方の説明でUbuntu推奨とあったので、よく理解しないままに選んで進めました。
Get Ubuntu 18.04 LTS - Microsoft Store en-AU
Initialize the distro (e.g. Ubuntu)
Initialize a new WSL Linux distro | Microsoft Docs
さて、こうしてWSLを導入、実行したことを確認して再度expo build:ios！
無事にBuildが始まりました。途中でCertificateのことやらなんやら聞かれますが、自分で何か設定したいわけでなければ基本的にLet Expo handle the processで大丈夫です。
Expoがよしなにやってくれるわけですね、ありがたや。
このままBuild完了かと思いきや、下記のようなエラーが。。。
ECONNREFUSE 127.0.0.1:19001、調べてみるとExpoにてあるあるエラーとして取り上げられてました。
Common Development Errors - Expo Documentation
上記の方法あるいは単にプロジェクトのディレクトリ内にある.expoフォルダを削除しちゃっても平気です。
再びのbuild！
ようやく無事にBuildされました。リンク先にいけば生成されたipaファイルをダウンロードできます。
App Store ConnectでのApp登録
My App → 新規App と進む。
App名、言語、Bundle Identifier (Build したときに生成されたものが選択できるはず)、SKU (開発者ごとにアプリを識別するための値なのでご自由に)、年齢制限、などなど
で、App登録をすると更に色々と記載項目がずらりと並びます。このあたりの詳細は下記リンク参照で！
[2018年版] よく分かる！iOSアプリのリリース手順のまとめ ｜ Developers.IO
AppStoreの審査でリジェクトされない登録方法 | iTunes Connect - ITブログ時々なんでもブログ
些細なことですが、スクリーンショットは6.5、5.5、12.9インチと3バージョン必要になります。
自分はこの用意を面倒くさがり自分のiPhone7でのテストをスクショしたものをリサイズして使いまわしたために縦横比がひどいです...ちゃんとしたアプリ公開の時には、それぞれのエミュレータでのスクショなどをアップしましょう。
（というかそれぞれのエミュレータでUIチェックしてないという。。。次回からちゃんとするんだ。）
しかも後から気づいたけど、ここって普通スクショ＋簡単な説明だよね、、、これも次回からは（汗）
ipaファイルのアップロード
作成したAppをBuildし、Appの情報もApp Store Connectで登録した、後は手元のipaファイルをApp Store Connectにアップロードだ！
expo upload: ios で一発さ！
Unsupported platform! This feature works on macOS only.
...なんて思ったら大間違い、そうWindowsユーザーならね！（怒泣）
マニュアルでアップロードするにはTransporterなるソフトウェアを使わねばならないみたい。
が、こちらもMacのみ対応となっております。。。
自分が調べた限りでは、Windows機体からアップロードするには下記のような方法があるみたいです。
1．AppUploaderなる中国製のソフトウェア
うーん、どうなんでしょう。利用例もそんなにネット上で見つけられず、、、最初のお試し期間はタダだけど以降は有料、そんなシステムみたいですね。
【Unity】Windows で iOS アプリをリリース（詳細）Part 3 : Lab 7 in Singapore
２．VirtualBoxなどで仮想MacをWindows上で動かす。
技術的には全然問題ないみたいですが、なんでもライセンス違反だとの記載がちらほら。
Xcode - windowsPCによるiOS開発｜teratail
３．MacInCloud
ExpoのForumでもやはりWindowsでアップロードできないの？的な質問がちょこちょこ、、、そんな中で挙がっていたのがMacInCloudというクラウド上でMacPCを借りるシステム。
（これは2番とは違って違反にならないのか？疑問ですが突っ込まずにいます。）
iOS test app step by step - Help: Expo SDK - Forums
Build Expo ios without mac and ios phone - Help: Expo-CLI/Build Service - Forums
日本語のレビューもちらほら。悪くなさそうですね。
Windowsユーザーでも気軽にMacOSが手に入る！？MacinCloudを契約してみた | Maromaro Blog
MacInCloudのサイトの説明でもちゃんと最新版のXcodeを搭載しているよ、とのこと。
最新アップロードツールのTransporterも記載ありました。
Xcode Updated to 11.3.1 on MacinCloud Catalina Servers : MacinCloud Support Portal
MacInCloudによるTransporter実行
というわけで、このMacInCloudを試してみることにしました。
レンタルする機体の設定項目がいくつか並ぶ。スペック的には最低限のもので十分!
で、MacInCloudにログイン（PWは自分で設定）、更にメールに届いたログイン情報で仮想Macにログイン！（そんな迷わないだろうけど、上記リンクのレビューにも解説あり）すると....
ありました、例のTransporter。
プラスシンボルからipaファイルを選択（自分はドロップボックス経由でこの仮想Macからipaファイルにアクセスしました。）し、Deliver！
無事にipaがアップロードされた模様です。MacInCloudの役目はこれだけです笑
実機の方からApp Store ConnectのTest Flightのセクションを見てみると....
このアップロードからテストフライトまでの流れもExpoのドキュメントに記載されてますね。
Uploading Apps to the Apple App Store and Google Play - Expo Documentation
しばらく経つと（自分の場合は20分くらいでした）、メールにて処理完了とのお知らせが届きます。
と、ここで輸出コンプライアンス情報に関する回答項目が....ちょろっと調べた範囲で対応しましたが、何も問題ないことを祈るばかりです。
https://www.ateliee.com/archives/3363
iOSアプリ提出の輸出コンプライアンスで、通信にHTTPSを使っているだけの場合の解釈 - Qiita
Test Flight
さて、いよいよアプリもアップロードされ、Test Flightでの最終チェックです！
ビルドのテスターの追加ですが、サイドメニューの”App Store Connectユーザを追加”からだと自分自身のAppleアカウントをサクッとテスターに追加できます。
そして自分のiPhoneにTestFlightのアプリをインストールした状態で、メールに届くテスター招待を開くと...
アップロードした自分のアプリが！！！
もちろんExpoで開発中に実機で動かしてきたわけですが、今度はちゃんとStandaloneでインストールした上で動作を確認できます。
感動ですね。これで異常がないか改めてチェックしたら、いよいよ審査に提出です。
App審査に提出
審査に提出したら、翌朝には返事が来てました。結果はReject。
まぁ何かしら不備があるだろうとは思っていたので
詳細はApple Store ConnectのResolution Centerを見てね、とのこと。
内容としてはSupport URLが正しくないですよ、と...そりゃそうですね、サポートページなんぞ用意していなかったのでとりあえずGithubのレポジトリのリンクを載せるという雑っぷりでしたから。
ちょっと古いですが、調べてトップに出てきた下記情報を信じてメールアドレスを記載したgithubのプロフィールページで代用しました。
アプリで飯を食う: iOSアプリのサポートURLは何でもいい
あるいは簡単にアプリ用サイトを作るかですね。。。
アプリ申請のサポートURLはLPで！簡単LP作成Webサービス『ペライチ』のご紹介 | モナカプレス
Resolution Centerにフィードバックに対する返事を送信するフォームがあるので、実際に修正を加えたらこちらで直しましたよ、と申告した方が親切でしょう。
再提出してみると、また翌朝には返事が。
審査通りました！Yay！
24時間以内にApp Storeに並ぶはず、とのこと。
App Storeで検索してみると....
あったーーーーーーーーー！！
ついに自作アプリ公開です！！
長い道のりでした...我ながらお疲れさまでした！
OTA Update
実際にアプリを公開してからバグ修正や新機能実装などなど、アプリを更新することがあるでしょう。
自分も公開してから早速、ここは直しておきたい！という点が...
更新がjsのみの変更であれば、expo publishだけでOK！
このOTAアップデートがExpoの大きな魅力の一つでしょう。
Configuring OTA Updates - Expo Documentation
ただ、下記リンクにもあるようにOTAアップデートの最新版に追いつくためにはアップデートの回数分アプリ再起動が必要になるなど、注意点もいくつか。
ExpoのOTAアップデートとrelease-channelについてまとめてみた。 - Qiita
アイコンやスプラッシュスクリーンや、js以上の変更となる場合はBuildからやり直しです。その際にはapp.jsonの
version
ios.buildNumber
android.versionCode
を変更しておく(基本的にただ数値増やす)ことを忘れずに！
おわりに
以上が、React Native + Expoで作成したアプリをWindowsでビルドからAppストア申請まで行う方法のまとめでした。
通常のウェブサイトのデプロイと比べても結構な手間だと思います。特にWindowsユーザーとしては。。。
まぁアップルのストアにアプリを置くんだから仕方ないのかもですが、Transporterのあたりとか、排他的な印象ありますよね。
それでも、この流れで無事にアプリを公開することができました。
開発そのものも楽しんでいますが、やっぱり使われてこそのアプリでありユーザーの声を元に更に発展していくものでしょうから、暫定版でももっと早く公開したかったなという思いもあります。
この辺りのアプリ開発の振り返りはまた別記事で。
WindowsでのBuildから申請までをまとめた記事は調べた限りでは無かったので、この記事が少しでもWindowsユーザーのiosアプリ開発の助けになればと願います。
他にも注意点や改善点などあれば遠慮なくご連絡ください！
