iOSデバイステスト

2019-05-23

RN(react native)で開発したプロジェクトをiOSデバイスでテストしてみましょう。

概要

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

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

RN(react native)をアンドロイド(Android)デバイスでテストする方法が知りたい方はアンドロイドデバイステストを確認してください。

iOS / Mac

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

prepare iphone mac

PCでRN(react native)の開発環境を設定する方法が知りたい方は以前のブログRNインストールを参考してください。

開発アカウント生成

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

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

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)へ全ての内容が詳しく載せております。やってみましょう。

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

    signing in xcode

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

    login signing in xcode

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

    signing error in xcode

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

    signing error solve in xcode

    左にあるTargetsの項目で プロジェクト名Testsを選択してTeam横にあるドロップダウンメニューを押してsigning(アイディを選択)をします。

    signing test target in xcode

  4. 左上のシミュレータを選択するところでUSBで接続してるデバイスに変更して矢印を押してプロジェクトを実行します。

    device test in xcode

    注意:これはデバイスでテストするためのビルドです。したがって、シミュレータと同じようにPCへRN(react native)の開発サーバーが立ち上がってそのサーバーとデバイスが連動してテストが出来る仕組みです。したがって同じWifi/ネットワークの環境じゃないとデバイスがサーバーを見つかれないのでテストが出来ないです。

  5. ビルドが無事に終わったら下記のようなメッセージが出ます。

    security error

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

参考

Buy me a coffeeBuy me a coffee
Posts