iOSデバイステスト

概要

リアクトネイティブ(React Native)で開発したプロジェクトをシミュレータでテストすることは大変ですね。今まで開発したリアクトネイティブ(React Native)プロジェkとをシミュレータではなくデバイスでテストしてみましょう。

このブログはシリーズです。下記のブログも確認してください。

リアクトネイティブ(React Native)をアンドロイド(Android)デバイスでテストする方法が知りたい方はアンドロイドデバイステストを確認してください。

iOS / Mac

アイホンでテストするためにはMacが必要です。Mac、iOSデバイス(アイホン)とテストしたいプロジェクトを準備します。

prepare iphone mac

PCでリアクトネイティブ(React Native)の開発環境を設定する方法が知りたい方は以前のブログリアクトネイティブ(React Native)インストールを参考してください。

開発アカウント生成

デバイスでテストするためにはアップル開発者アカウント(Apple developer account)が必要です。開発者登録じゃなくアカウントの生成なので無料で使うことが可能です。アップル開発者アカウントがある方はこの項目はスキップしても構わないです。

下のリンクを押してアップル開発者アカウント(Apple developer account)生成サイトに行きます。

アップル開発者アカウント(Apple developer account): https://developer.apple.com/

apple developer site

右上のaccountメニューを押します。

apple developer site login

アップルアカウントがある方はログインしてください。アカウントがない方はCreate Apple IDでアップルアカウントを作ります。アップル開発者アカウントじゃなくアップルアカウントです。アイホンでアプリをダウンロードする時使ってるアカウントでログインすればいいです。

agreement

アップル開発者アカウントを使うための利用規約です。By checking this box I confirm that I have read and agree to be bound by the Agreement above.を押して同意してSubmitを押して次のページへ遷移します。

completed to create developer account

アップル開発者アカウント(Apple developer account)の生成が終わりました。

デバイステスト

公式サイト(react native)へ全ての内容が詳しく載せております。やってみましょう。

USBを使ってテストしたいデバイスとMacを接続します。
リアクトネイティブ(React Native)プロジェクトがあるフォルダへios/[プロジェクト名].xcodeprojファイルを実行します。
xcodeが実行されたら左上のプロジェクト名を選択してプロジェクト名の右へある画面上のGeneralタブを選択します。スクロールしてちょっと下に行くとSigningの項目が見えます。Teamの項目の右へあるAdd an Account...ボタンを押します。

上部で作ったアップル開発者アカウント(Apple developer account)のID/PWを入力してNextボタンを押します。

ログイン後に出る画面の下にあるDownload Manual Profilesボタンを押して後ウィンドウを閉じます。そしたらTeamの横にある項目がドロップダウンメニューになったことが分かります。ドロップダウンメニューを開いて上で追加したアイディを選択します。

上のようなエラーが出る方はxcodeの同じ画面の上の所にあるIdentityのBundle Identifierを変更てください。

左にあるTargetsの項目で プロジェクト名Testsを選択してTeam横にあるドロップダウンメニューを押してsigning(アイディを選択)をします。
左上のシミュレータを選択するところでUSBで接続してるデバイスに変更して矢印を押してプロジェクトを実行します。

注意：これはデバイスでテストするためのビルドです。したがって、シミュレータと同じようにPCへリアクトネイティブ(React Native)の開発サーバーが立ち上がってそのサーバーとデバイスが連動してテストが出来る仕組みです。したがって同じWifi/ネットワークの環境じゃないとデバイスがサーバーを見つかれないのでテストが出来ないです。
ビルドが無事に終わったら下記のようなメッセージが出ます。

詳しく説明があるのでやってみましょう。デバイスの設定を実行します。一般を選択して プロファイルとデバイス管理を選択します。デベロッパAPP項目にある自分のアップル開発アカウント(Apple developer account)を選択します。 APPを検証を押します。その後xcodeに戻ってもう一回矢印を押してプロジェクトを実行して上手く起動することを確認します。