React Nativeの概要

重要

Visual Studio App Center は、2025 年 3 月 31 日に廃止される予定です。 完全に廃止されるまで Visual Studio App Center を引き続き使用できますが、移行を検討できる推奨される代替手段がいくつかあります。

詳細については、サポートタイムラインと代替手段に関するページを参照してください。

• Android
• iOS
• iOS の拡張機能
• React Native
• MAUI/Xamarin
• UWP
• WPF/WinForms
• Unity
• macOS
• macOS 拡張機能
• tvOS
• Cordova

App Center SDK ではモジュールアーキテクチャが使用されるため、任意またはすべてのサービスを使用できます。

App Center Analytics と App Center のクラッシュを使用するようにアプリで App Center React Native SDK を設定し始めましょう。

1.前提条件

開始する前に、次の前提条件が満たされていることを確認します。

• 0.34 以降を実行するReact Native プロジェクトReact Native使用しています。
• Android バージョン 5.0/API レベル 21 以降、または iOS バージョン 9.0 以降で実行されているデバイスを対象としています。
• iOS でクラッシュ レポート機能を提供する他のライブラリは使用していません。
• iOS の場合、SDK を使用する既定の方法には CocoaPods が必要です。 (CocoaPods をインストールしていない場合は、CocoaPods はじめにに従ってインストールしてください)。 それでも、SDK を手動でリンクすることができます。

2. App Center ポータルでアプリを作成してアプリ シークレットを取得する

App Center ポータルでアプリを既に作成している場合は、この手順をスキップできます。

1. appcenter.ms に向かいます。
2. サインアップまたはログインし、ポータルの右上隅にある [ 新規追加 ] という青いボタンをクリックし、ドロップダウン メニューから [ 新しいアプリの追加 ] を選択します。
3. アプリの名前と説明 (省略可能) を入力します。
4. 適切な OS (Android または iOS) を選択し、プラットフォームとして [React Native] を選択します。
5. 右下にある [ 新しいアプリの追加] ボタンをクリックします。

アプリを作成したら、App Center ポータルの [設定] ページでアプリ シークレットを取得できます。 [設定] ページの右上隅にある 3 つの垂直ドットをクリックし、[アプリ シークレット] を選択Copy app secretして取得します。

3. App Center SDK モジュールを追加する

SDK の既定の統合では、iOS 用 CocoaPods が使用されます。 アプリで CocoaPods を使用していない場合は、iOS アプリ用にReact Native SDK を手動で統合する必要があります。

ターミナルを開き、React Native プロジェクトのルートに移動し、次の行を入力して App Center Analytics とクラッシュをアプリに追加します。

npm install appcenter appcenter-analytics appcenter-crashes --save-exact

よりも優先yarnnpmされる場合は、次のコマンドを使用して App Center をインストールします。

yarn add appcenter appcenter-analytics appcenter-crashes --exact

App Center SDK では、使用する App Center サービス用のモジュールを追加するだけのモジュール形式のアプローチが使用されます。 appcenter-analytics と appcenter-crashes は、追加のセットアップを必要とせず、価値を提供するため、ほぼすべてのアプリに追加するのが理にかなっています。 appcenter には汎用の App Center API が用意されています。複数のサービスに役立ちます。

3.1 React Native 0.60 用に SDK を自動的に統合する

React Nativeで App Center SDK を使用するには、2 つの方法があります。iOS 用と android 用のappcenter-config.jsonの構成AppCenter-Config.plist、または appSecret を引数として受け入れるネイティブ開始関数を呼び出します。

3.1.1 iOS React Native統合する

iOS ディレクトリから を実行 pod install --repo-update して CocoaPods の依存関係をインストールします。

3.1.1.1 AppSecret オプション 1 の設定: 構成 AppCenter-Config.plist

1. 次の内容の名前 AppCenter-Config.plist を持つ新しいファイルを作成し、アプリ シークレットの値に置き換えます {APP_SECRET_VALUE} 。 このファイルを Xcode プロジェクトに追加することを忘れないでください (Xcode でアプリを右クリックし、[AppName> にファイルを<追加...] をクリックします)。

   <?xml version="1.0" encoding="UTF-8"?>
   <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "https://www.apple.com/DTDs/PropertyList-1.0.dtd">
   <plist version="1.0">
       <dict>
       <key>AppSecret</key>
       <string>{APP_SECRET_VALUE}</string>
       </dict>
   </plist>
   

2. アプリの AppDelegate.m または AppDelegate.mm ファイルを 変更して、SDK を開始するためのコードを含めます。

   • 次のインポートを追加します。

   #import <AppCenterReactNative.h>
   #import <AppCenterReactNativeAnalytics.h>
   #import <AppCenterReactNativeCrashes.h>
   

   • メソッドに次の行を application:didFinishLaunchingWithOptions: 追加します。

   [AppCenterReactNative register];
   [AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
   [AppCenterReactNativeCrashes registerWithAutomaticProcessing];
   

3.1.1.2 AppSecret オプション 2 の設定: コードでの構成

アプリの AppDelegate.m または AppDelegate.mm ファイルを 変更して、SDK を開始するためのコードを含めます。

• 次のインポートを追加します。

#import <AppCenterReactNativeShared/AppCenterReactNativeShared.h>
#import <AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes.h>

• メソッドに次の行を application:didFinishLaunchingWithOptions: 追加します。

[AppCenterReactNativeShared setStartAutomatically:YES];
[AppCenterReactNativeShared setAppSecret:@"{Your App Secret}"];
[AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];

3.1.2 Android React Native統合する

アプリの res/values/strings.xml を変更して、次の行を含めます。

<string name="appCenterCrashes_whenToSendCrashes" moduleConfig="true" translatable="false">DO_NOT_ASK_JAVASCRIPT</string>
<string name="appCenterAnalytics_whenToEnableAnalytics" moduleConfig="true" translatable="false">ALWAYS_SEND</string>

3.1.2.1 AppSecret オプション 1 の設定: appcenter-config.jsonの構成

appcenter-config.jsonという名前の新しいファイルを次の内容でandroid/app/src/main/assets/作成し、 をアプリ シークレットの値に置き換えます{APP_SECRET_VALUE}。

{
    "app_secret": "{APP_SECRET_VALUE}"
}

注: assets という名前のフォルダーが存在しない場合は、"project_root/android/app/src/メイン/assets" の下に作成する必要があります。

3.1.2.2 AppSecret オプション 2 の設定: コードでの構成

App Center Analytics と App Center のクラッシュを使用するには、アプリの メイン アクティビティ クラスの onCreate-callback 内に次の行を追加します。

AppCenter.start(getApplication(), "{Your App Secret}", Analytics.class, Crashes.class);

AppCenter.start(application, "{Your App Secret}", Analytics::class.java, Crashes::class.java)

3.2 0.60 未満React Native SDK を自動的に統合する

注意

React モジュールが Podfile 内の相対パスを使用してリンクされているが、プロジェクトで参照されていない場合、リンク スクリプトは失敗します。これは、静的ポッド バージョンを使用して App Center をリンクするためです。 リンクスクリプトを既に実行している場合は、React Nativeトラブルシューティングセクションの手順に従うか、自分でリンクする必要があります

1. react-native link コマンドを使用して、プラグインをReact Native アプリにリンクします。

   react-native link appcenter
   react-native link appcenter-analytics
   react-native link appcenter-crashes
   

   iOS の場合、次のようなエラーが表示された場合は、CocoaPods から App Center SDK for iOS と macOS をダウンロードしようとします。

   Added code to initialize iOS App Center SDK in ios/reactnativesample/AppDelegate.m
   Analyzing dependencies [!] Unable to find a specification for AppCenterReactNativeShared (~> {version}) 
   

   次のコマンドを実行します。

   pod repo update
   

   次に、 の実行 react-native linkを再試行します。

   注意

   App Center SDK は、リンクプロセス中に App Center モジュールのモックを自動的に設定しません。 アプリケーションで Jest テスト フレームワーク を使用していて、Jest でテストを実行しているときに App Center SDK によって発生するエラーが発生する場合は、package.json ファイルの jest セクションに以下を追加します (使用中のモジュールのみを含めます)。

   "setupFiles": [
      "<rootDir>/node_modules/appcenter/test/AppCenterMock.js",
      "<rootDir>/node_modules/appcenter-analytics/test/AppCenterAnalyticsMock.js",
      "<rootDir>/node_modules/appcenter-crashes/test/AppCenterCrashesMock.js",
   ]
   

   注意

   クラッシュの処理が自動であるか、Javascript メソッドによってトリガーされるかに関係なく、クラッシュはアプリケーションの再起動後に常に処理されます。 クラッシュは、アプリケーションがクラッシュした時点では処理できません。

2. プロジェクト android/app/src/main/assets/appcenter-config.json の を編集し、プレースホルダーの値を YOUR_APP_SECRET App Center プロジェクトのアプリケーション シークレットに置き換えます。

3. プロジェクトの ios/{YourAppName}/AppCenter-Config.plist ファイルを編集し、プレースホルダーの値を YOUR_APP_SECRET App Center プロジェクトのアプリケーション シークレットに置き換えます。 AppCenter-Config.plist が既に存在し、Xcode プロジェクトの一部ではない場合は、手動で Xcode プロジェクトに追加する必要があります (XCode でアプリを右クリックし、[アプリ名>にファイルを<追加]をクリックします)。

3.3 [iOS のみ] react-native リンクまたは CocoaPods を使用せずに、React Native用に SDK を手動で統合する

CocoaPods を使用しない場合は、この統合を行います。 上記のように CocoaPods 経由で SDK を統合することを 強くお 勧めします。 それでも、iOS ネイティブ SDK を手動で統合することもできます。

注意

最新の App Center React Native SDK は、必ずしも最新の App Center iOS SDK に依存するとは限りません。これは、iOS SDK が更新され、React Nativeされる前にリリースされるためです。

その結果、React Native SDK が依存する iOS SDK のバージョンを把握する必要があります。

1. zip ファイルとして提供されているReact Native フレームワーク用の App Center SDK をダウンロードし、解凍します。

2. AppCenterReactNativeShared という名前のフォルダーが表示されます。このフォルダーには、必要なReact Native iOS ブリッジ用の 1 つのフレームワークが含まれています。

3. zip ファイルとして提供されている 対応する iOS フレームワーク用 App Center SDK をダウンロードし、解凍します。

4. App Center サービスごとに異なるフレームワークを含む AppCenter-SDK-Apple/iOS というフォルダーが表示されます。 呼び出される AppCenter フレームワークは、異なるモジュール間で共有されるコードを含んでいるため、プロジェクトで必要です。

5. [省略可能]サード パーティ製ライブラリのサブディレクトリを作成します。

   • ベスト プラクティスとして、サード パーティ製ライブラリは通常、サブディレクトリ内に存在するため (多くの場合、Vendor と呼ばれます)、ライブラリのサブディレクトリでプロジェクトを整理していない場合は、ここで (プロジェクトの ios ディレクトリの下に) Vendor サブディレクトリを作成します。
   • Xcode プロジェクト内に Vendor という名前のグループを作成して、ディスク上のファイル構造を模倣します。

6. Finder を開き、以前に解凍した AppCenter-SDK-Apple/iOS フォルダーと AppCenterReactNativeShared フォルダーを、プロジェクトのフォルダーの場所にコピーします。

7. Xcode のプロジェクトに SDK フレームワークを追加します。

   • [プロジェクト ナビゲーター] が表示されていることを確認します (⌘+1)。
   • AppCenter.framework、AppCenterAnalytics.framework、AppCenterCrashes.framework、AppCenterReactNativeShared.framework ファイルを Finder (前の手順の場所) から Xcode の Project Navigator にドラッグ アンド ドロップします。 SDK を開始するには 、AppCenter.framework ファイルと AppCenterReactNativeShared.framework ファイルが必要です。そうしないと、他のモジュールが機能せず、アプリがコンパイルされません。
   • ダイアログが表示され、アプリターゲットがオンになっていることを確認し、[ 完了] をクリックします。

8. AppCenter React Native プラグイン プロジェクトをアプリのプロジェクトにリンクします。

   • [プロジェクト ナビゲーター] が表示されていることを確認します (⌘+1)。

   • AppCenter React Native プラグインごとに、ソース コードを含むフォルダーに移動します。 パスはそれぞれ になります。

     • /node_modules/appcenter/ios
     • /node_modules/appcenter-analytics/ios
     • /node_modules/appcenter-crashes/ios

   • Finder から Xcode のプロジェクト ナビゲーターにファイルをドラッグ アンド ドロップ .xcodeproj します。 通常は、[ ライブラリ ] グループの下にあります。

9. AppCenter React Native プラグインのライブラリをリンクします。 プロジェクト設定を開き、[リンクされたフレームワークとライブラリ] セクションの [全般] タブで、前の手順で追加したターゲット ライブラリを参照する新しい項目を追加します。

   • libAppCenterReactNative.a
   • libAppCenterReactNativeAnalytics.a
   • libAppCenterReactNativeCrashes.a

10. ヘッダー検索パスを変更して、AppCenter React Native プラグイン プロジェクトからヘッダーを検索します。 プロジェクト設定を開き、[ヘッダー検索パス] セクションの [ビルド設定] タブで、ヘッダー ファイルの新しい場所を追加します。

• $(SRCROOT)/../node_modules/appcenter/ios/AppCenterReactNative
• $(SRCROOT)/../node_modules/appcenter-analytics/ios/AppCenterReactNativeAnalytics
• $(SRCROOT)/../node_modules/appcenter-crashes/ios/AppCenterReactNativeCrashes

11. アプリの AppDelegate.m または AppDelegate.mm ファイルを変更して、SDK を開始するためのコードを含めます。

    • 次のインポートを追加します。

    #import <AppCenterReactNative/AppCenterReactNative.h>
    #import <AppCenterReactNativeAnalytics/AppCenterReactNativeAnalytics.h>
    #import <AppCenterReactNativeCrashes/AppCenterReactNativeCrashes.h>
    

    • メソッドにこれらの行を追加するapplication:didFinishLaunchingWithOptions:

    [AppCenterReactNative register];
    [AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
    [AppCenterReactNativeCrashes registerWithAutomaticProcessing];
    

12. 次のコンテンツを含む名前 AppCenter-Config.plist の新しいファイルを作成し、アプリ シークレットの値に置き換えます {APP_SECRET_VALUE} 。 このファイルを XCode プロジェクトに追加することを忘れないでください (XCode でアプリを右クリックし、[アプリ名>にファイルを<追加]をクリックします)。

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "https://www.apple.com/DTDs/PropertyList-1.0.dtd">
    <plist version="1.0">
        <dict>
        <key>AppSecret</key>
        <string>{APP_SECRET_VALUE}</string>
        </dict>
    </plist>
    

注意

次の 2 つの手順は、React Native 0.60 以降を使用するアプリのみです。

13. React Native 0.60 以降の自動リンクを無効にします。

    • 各 App Center パッケージの node_modules フォルダー内で、react-native.config.js を開き、 にnull設定dependency.platforms.iosします。

    module.exports = {
      dependency: {
        platforms: {
          ios: null,
          ...
        }
      }
    };
    

14. ヘッダー検索パスを変更して、App Center React Native プラグイン プロジェクトからReact Nativeヘッダーを検索します。

    • [プロジェクト ナビゲーター] が表示されていることを確認します (⌘+1)。
    • 手順 8 の [ライブラリ] グループに追加した AppCenter React Native プラグイン プロジェクトごとに、次の手順を実行します。
      • プロジェクトを選択し、[ヘッダー検索パス] セクションの [ビルド設定] タブで、ヘッダー ファイルの新しい場所をオプションでrecursive追加します。${SRCROOT}/../../../ios/Pods/Headers

3.4 [Android のみ] react-native リンクなしで 0.60 未満React Native SDK を手動で統合する

コマンドを react-native link 使用しない統合手順。

1. android/settings.gradle ファイルを開き、次の行を挿入します。 プロジェクトに必要な依存関係を含めます。 このセクションでは、各 SDK モジュールを個別の依存関係として追加する必要があります。 App Center Analytics とクラッシュを使用する場合は、次の行を追加します。

     include ':appcenter-crashes'
     project(':appcenter-crashes').projectDir = new File(rootProject.projectDir, '../node_modules/appcenter-crashes/android')
     include ':appcenter-analytics'
     project(':appcenter-analytics').projectDir = new File(rootProject.projectDir, '../node_modules/appcenter-analytics/android')
     include ':appcenter'
     project(':appcenter').projectDir = new File(rootProject.projectDir, '../node_modules/appcenter/android')
   

注意

jCenter サポートが終了したため、すべてのアセンブリが Maven Central リポジトリに移動されました。 jCenter から Maven Central への移行については、 このガイド に従ってください。

2. プロジェクトのアプリ レベルの build.gradle ファイル (android/app/build.gradle) を開き、セクションに次の行を dependencies 追加します。

   dependencies {
       implementation project(':appcenter-crashes')
       implementation project(':appcenter-analytics')
       implementation project(':appcenter')
       ...
   }
   

3. アプリの MainApplication.java ファイルを変更して、SDK を開始するためのコードを含めます。

   • インポート セクションにこれらの行を追加する

   import com.microsoft.appcenter.reactnative.crashes.AppCenterReactNativeCrashesPackage;
   import com.microsoft.appcenter.reactnative.analytics.AppCenterReactNativeAnalyticsPackage;
   import com.microsoft.appcenter.reactnative.appcenter.AppCenterReactNativePackage;
   

   • AppCenter パッケージを メソッドに追加するList<ReactPackage> getPackages()

   @Override
   protected List<ReactPackage> getPackages() {
     return Arrays.<ReactPackage>asList(
         new MainReactPackage(),
           new AppCenterReactNativeCrashesPackage(MainApplication.this, getResources().getString(R.string.appCenterCrashes_whenToSendCrashes)),
           new AppCenterReactNativeAnalyticsPackage(MainApplication.this, getResources().getString(R.string.appCenterAnalytics_whenToEnableAnalytics)),
           new AppCenterReactNativePackage(MainApplication.this)
     );
   }
   

4. strings.xml ファイル (android/app/src/main/res/values) を開き、タグ内<resources></resources>に次の行を追加します。

   <string name="appCenterAnalytics_whenToEnableAnalytics" moduleConfig="true" translatable="false">ALWAYS_SEND</string>
   <string name="appCenterCrashes_whenToSendCrashes" moduleConfig="true" translatable="false">DO_NOT_ASK_JAVASCRIPT</string>
   

5. appcenter-config.jsonという名前の新しいファイルを次のコンテンツでandroid/app/src/main/assets/作成し、 をアプリ シークレットの値に置き換えますAPP_SECRET_VALUE。

   {
       "app_secret": "APP_SECRET_VALUE"
   }
   

警告

ソース コードにアプリ シークレットを埋め込むことはお勧めしません。

3.5 自動バックアップを使用してデバイスに関する正しくない情報を取得しないようにする場合は、次の手順に従います。

注意

Android 6.0 (API レベル 23) 以降を対象とするアプリでは、自動バックアップが自動的に有効になります。 

注意

バックアップ規則を含むカスタム ファイルが既にある場合は、3 番目の手順に切り替えます。

a. android/app/src/メイン/res/xml フォルダーにappcenter_backup_rule.xmlファイルを作成します。

b. プロジェクトの AndroidManifest.xmlファイルを 開きます。 属性を android:fullBackupContent 要素に <application> 追加します。 appcenter_backup_rule.xml リソース ファイルを指している必要があります。

android:fullBackupContent="@xml/appcenter_backup_rule"

c. appcenter_backup_rule.xml ファイルに次のバックアップ規則を追加します。

<full-backup-content xmlns:tools="http://schemas.android.com/tools">
    <exclude domain="sharedpref" path="AppCenter.xml"/>
    <exclude domain="database" path="com.microsoft.appcenter.persistence"/>
    <exclude domain="database" path="com.microsoft.appcenter.persistence-journal"/>
    <exclude domain="file" path="error" tools:ignore="FullBackupContent"/>
    <exclude domain="file" path="appcenter" tools:ignore="FullBackupContent"/>
</full-backup-content>

4. SDK を起動する

これで、コマンド ラインまたは Xcode/Android Studio からアプリケーションをビルドして起動できます。

4.1 コマンド ラインからアプリケーションをビルドして実行する

次のコマンドを使用して、iOS アプリケーションをビルドして起動できます。

react-native run-ios

ヒント

iOS シミュレーターまたは iOS デバイスで起動するには、 で react-native run-ios --device "myDeviceName"iOS デバイス名を指定します。

次のコマンドを使用して、Android アプリケーションをビルドして起動できます。

react-native run-android

ヒント

(コマンドからadb devices) でデバイス ID を指定することで、Android エミュレーターまたは Android デバイスでreact-native run-android --deviceId "myDeviceId"deviceId起動できます。

4.2 Xcode または Android Studio からアプリケーションをビルドして実行する

iOS の場合は ios/{appname}.xcworkspace 、Xcode でプロジェクトまたは ios/{appname}.xcodeproj ファイルを開き、そこからビルドします。

注意

(手順 3.1 のように) を介して react-native link App Center を自動的にリンクした場合は、Xcode でプロジェクトの ios/{appname}.xcworkspace ファイルを開く必要があります。 App Center CocoaPods の依存関係は、 ではなく xcodeprojでのみxcworkspace機能し、ios/{appname}.xcodeprojファイルには App Center CocoaPods 依存関係がリンクされていないためです。

Android の場合は、 Android Studio で Android プロジェクトをインポートし、そこからビルドします。

SDK によって自動的に収集される分析とクラッシュのデータをポータルで視覚化するように設定されています。 追加のセットアップは必要ありません。 App Center でできることについては、API ガイドとチュートリアルの 「分析 と クラッシュ 」セクションを参照してください。