本記事ではExpoを利用してアプリをリリースする最終段階を超わかりやすく解説しています。ReactNativeやExpoの記事は非常に少なくて初心者は困ります。そんな初心者の方へ向けてExpoでアプリをリリースするためのビルドからデベロッパーでの書き方などを超わかりやすく解説します!
本記事の内容
Apple developer programへの加入
ビルドするためにはApple developer programへの加入が必要です。年間費は少し高いですが、加入が絶対条件ですので必要な方は加入をしておきましょう。
>>https://developer.apple.com/jp/programs/
simulatorでビルド結果の確認
本格的なビルドを行う前に、Simulatorのデモ機にビルドして動作をテストします。
ターミナルでビルド
ターミナルで開発中のディレクトリへ移動へ移動します。移動後、下のコマンドを実行しましょう。
expo build:ios
ビルドが進むと「archive(リリース)」「simulator(シミュレーターで確認)」の選択が出ますので、「simulator」をクリックして動作を確認しましょう。
少し時間がかかる場合もありますが、数分で下の画面移るはずです。下の画面に映れば、赤い部分のリンクを開きましょう
![](https://tetoblog.org/wp-content/uploads/2021/07/22819b61564e7be2c7dd280615a84be4-1024x715.png)
ビルドのダウンロード
下の画面に変わりますので、expoのユーザー情報を認証しましょう。
![](https://tetoblog.org/wp-content/uploads/2021/07/fb76f8ee910fa1d598397a149fb6e93c-1024x545.png)
ログインが完了すれば、下の画面のようにターミナルでビルドしたデータが反映されているはずです。
右下あたりの「Download」をクリックしましょう。
![](https://tetoblog.org/wp-content/uploads/2021/07/c3da002cab118d76f9b32b8d4482afd5-1-1024x701.png)
ダウンロードしたファイルをダブルクリックして、下のようにアプリケーションファイルを開きましょう。
![](https://tetoblog.org/wp-content/uploads/2021/07/95df20484312032cd8c2752fafa47461-1024x162.png)
エミュレーターへのインストール
エミュレータを起動し、先程のアプリケーションファイルをエミュレータへドラッグアンドドロップしましょう。自動でエミュレータへインストールが開始します。
![](https://tetoblog.org/wp-content/uploads/2021/07/6ab4ef95c9426780e0b7662f670b6746-1024x591.png)
下のようにエミュレーターにインストールされていれば内容を確認して動作のテストを行いましょう。
ここで問題がなければリリースに向けて本格的なビルドへ移ります。
![](https://tetoblog.org/wp-content/uploads/2021/07/7404789566232b09a9d0649aea2e6c5b-483x1024.png)
リリースに向けてビルド
本格的なビルドをを行います。
ターミナルで開発中のディレクトリへ移動へ移動します。移動後、下のコマンドを実行しましょう。
expo build:ios
ビルドが進むと「archive(リリース)」「simulator(シミュレーターで確認)」の選択が出ますので、「archive」をクリックします。
その後いろいろな選択画面がでてきますが、すべて「Let Expo handle the process」を選択していきましょう。
最終画面でURLが表示されるので、URLを開きましょう。
![](https://tetoblog.org/wp-content/uploads/2021/07/a8b1c52da54d5aa0057c4cd1dd8e9ccd-1024x642.png)
下の画面になりますので、ダウンロードをクリックしてipsフォルダをダウンロードします。
![](https://tetoblog.org/wp-content/uploads/2021/07/fe4ba0401255d52d159e9dde5be9ce08-1024x643.png)
下のようにダウンロードされていればOKです。
![](https://tetoblog.org/wp-content/uploads/2021/07/8fe41ba3c683fd8cdc1184eaf27d9e15-1024x203.png)
Appleへ申請
下のAppleのサイトを開きます。
https://appstoreconnect.apple.com
SKUの欄は名前と同様の文字で構いません。
バンドルIDは先程のipaファイルが自動で選択できるかと思います。
![](https://tetoblog.org/wp-content/uploads/2021/07/cc124febb4b04df3a6633232472c08c7-1024x677.png)
次に下のように必須項目を入力していきます。
サポートURLはお問い合わせができるページをインターネット上に作っておきましょう。GoogleフォームなどでもOKです。
スクリーンショットの画像ものせる必要があります。
iPad以外の6.5インチと5.5インチの部分にアップロードしましょう。
このページが完成すれば右上の保存をクリックして、左側の「App情報」「価格および配信状況」「Appのプライバシー」などのページも完成させましょう。
![](https://tetoblog.org/wp-content/uploads/2021/07/2e006de9281f7c6d35de34a4539fd223-1024x640.png)
特に重要なことは、Appのプライバシーを設定する際は、データ収集をするにチェックしておきましょう。
データ収集しなくとも、Expoを利用する時点でここはチェックをしておかなければなりません。
![](https://tetoblog.org/wp-content/uploads/2021/07/e1cb99962172c1923d30c54d2b15fec6-1024x621.png)
Transpoterでビルドファイルを送信
AppStoreでTransPorterのアプリケーションをインストールしましょう。
![](https://tetoblog.org/wp-content/uploads/2021/07/60ede4ed44bedee3ebbcab469fd23dd6.png)
インストール後、今回のアプリケーションのipaファイルを開きましょう。
下のような画面が開きますので、「デリバリ」をクリックします。
![](https://tetoblog.org/wp-content/uploads/2021/07/9f570dc0727df54461c823bfe3ca1ba0-1024x556.png)
下のAppleのサイトを開きます。先程作業を行っていた、「https://appstoreconnect.apple.com」のURLのサイトを再度リロードしましょう。「ビルド」の部分が下のように変わっていればOKです。
反映されるまでに15分〜30分程度かかるそうですので、もし変わっていなければ気長に待ちましょう。
![](https://tetoblog.org/wp-content/uploads/2021/07/5177f2463ffecf4479a79ea3981e5b6c-1-1024x622.png)
クリック後は必要情報を選択肢、終了すればついに右上の「申請」をクリックして申請を行いましょう。
これで作業は終了です。
ということで本記事は、
exopを利用したReactNativeアプリのリリース方法を紹介しました。わからないことは本記事最後のコメント欄に記載してくださいね。
最後まで読んでいただき、ありがとうございました\(^o^)/
おすすめ書籍
高評価レビュー多数の有名書籍です!
ReactNativeの参考に、持っていて間違いない一冊ですよ\(^o^)/
超オススメのPC用品
PCを操作する上で、トラックボールマウスが非常におすすめです!
僕も感動したこのマウスを、騙されたと思って使ってみてください!(^^)
外部モニターで2倍以上の効率化が見込めます!
安いものだと、たったの1万円前後なのでおすすめですよー!\(^o^)/