ぽっちぽちにしてやんよ

技術ネタとかアプリに関する話とか

React NativeのアプリをExpoで単体アプリ(Standalone App)ビルド

こんばんは,ぽちです.

最近はReact Nativeで戯れていて,quickAnnictというアプリを出してたりします.quickAnnictはAnnictというアニメ視聴管理サービスに素早くアニメ見た記録を残すためのアプリ.

https://itunes.apple.com/jp/app/quickannict/id1227142164?mt=8

quickAnnictはreact-native initで作ってたんですが,別アプリを作ったときにExpo( expo.io )の便利さに気づいてExpo入りしようと頑張ってるナウです.

んで,Expo入りしている途中でどうしても単体アプリ(Standalone App)としてビルドしないといけない理由が出てきたので,その手順を記しておきます.

ちなみにその理由とは,quickAnnictの場合は,Deep Linkingと言われるURLの先頭のスキーマをアプリ固有のやつにして,URLキックしたときにアプリが開いてくるやつです.アレがStandalone Appとしてビルドして確認しないとExpo XDEでの確認だと出来ない.

さて,手順ですが,基本はドキュメントに全部書いてます. https://docs.expo.io/versions/v17.0.0/guides/building-standalone-apps.html#content

まずexpo.ioにログインするためにexp login

$ exp login
? Username/Email Address: **********
? Password: **********

Success.

exp.jsonを編集する.

$ vi exp.json
  • bundleIdentifierを入れる
  • iconを入れる
  • nameを入れる
  • versionを入れる

exp startする.自分の場合はもう始まってた.

$ exp start
[exp] Making sure project is set up correctly...
[exp] Your project looks good!
[exp] exp is already running for this project. Exiting...

exp build:iosする.

$ exp build:ios
[exp] Making sure project is set up correctly...
[exp] Your project looks good!
[exp] Checking if current build exists...

[exp] No currently active or previous builds for this project.
[exp] Checking for existing Apple credentials...

We need your Apple ID/password to manage certificates and provisioning profiles from your Apple Developer account.
? What's your Apple ID? ***********
? Password? ***********
? What is your Apple Team ID (you can find that on this page: https://developer.apple.com/account/#/membership)? ***********
[exp] Validating Apple credentials...
[exp] Credentials valid.

? Do you already have a distribution certificate you'd like us to use,
or do you want us to manage your certificates for you? true
[exp] Generating distribution certificate...
[exp] Distribution certificate setup complete.
[exp] Validating app id...
? Do you already have a push notification certificate you'd like us to use,
or do you want us to manage your push certificates for you? true
[exp] Fetching a new push certificate...
[exp] Push certificate setup complete.
[exp] Starting build process...
[exp] Publishing...
[exp] Building iOS bundle
[exp] Building Android bundle
[exp] Analyzing assets
[exp] Uploading assets
[exp] No assets changed, skipped.
[exp] Uploading JavaScript bundles
[exp] Published
[exp] Your URL is

https://exp.host/@pchw/(ここにexp.jsonで指定したslugが入る)

[exp] Building...
[exp] Build successfully started, it may take a few minutes to complete. Run "exp build:status" to monitor it.

Team IDは Sign in with your Apple ID - Apple Developer にいくと

image

に書かれてる.

その後ビルドが出来上がるまでちょっと時間がかかるので,定期的にexp build:statusで進捗どうですか?する

$ exp build:status
[exp] Making sure project is set up correctly...
[exp] Your project looks good!
[exp] Checking if current build exists...

[exp] ============
[exp] Build Status
[exp] ============

[exp] iOS: Build in progress...

まだ出来上がってない.

$ exp build:status
[exp] Making sure project is set up correctly...
[exp] Your project looks good!
[exp] Checking if current build exists...

[exp] ============
[exp] Build Status
[exp] ============

[exp] iOS:
[exp] IPA: https://***********.ipa

おっ出来たみたいやな!

IPA: のところに書かれているURLにアクセスしてバイナリをダウンロードする.

あとはTestFlightで配布するなどする.(fastlane pilot uploadを使うと楽)

$ PILOT_IPA="/Users/pochi/Downloads/なんとかかんとか.ipa" fastlane pilot upload

まとめ

  • Expoだけでどうしても確認できない項目があったので,Standalone Appとしてビルドする必要があった
  • Expoの補助を得て,割りと簡単にStandalone Appとしてビルドが出来た
  • しかし,Expo XDE経由のjs更新すぐ確認に比べると手間がマッハ
  • 特にbuildに非同期の待ちが発生するのと,TestFlightへのアップロード→実機での確認でめちゃくちゃ時間を浪費する
  • Standalone Appとしてビルドして確認しなければならないケースはなるべく回避したほうが開発効率が良い