React Nativeを始める

重要

Visual Studio App Center は、2026 年 6 月 30 日まで引き続きサポートされる分析機能と診断機能を除き、2025 年 3 月 31 日に廃止されました。 詳細を参照してください。

• アンドロイド
• iOS
• iOS 拡張機能
• React Native
• MAUI/Xamarin
• UWP
• WPF/WinForms
• ユニティ
• macOS
• macOS 拡張機能
• tvOS

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

アプリで App Center Analytics と App Center Crashes を使用するために、App Center React Native SDK のセットアップを始めましょう。

1.前提条件

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

• React Native 0.34 以降を実行する 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

yarnよりもnpmを好む場合は、次のコマンドを使用して 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 React Native iOS の統合

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

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

1. AppCenter-Config.plistという名前の新しいファイルを次の内容で作成し、{APP_SECRET_VALUE}をアプリ シークレットの値に置き換えます。 このファイルを Xcode プロジェクトに追加することを忘れないでください (Xcode でアプリを右クリックし、[ Add files to <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 React Native Android の統合

次の行を含むように、アプリの 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の構成

という名前の新しいファイルを作成し、android/app/src/main/assets/をアプリ シークレットの値に置き換えます。

{
    "app_secret": "{APP_SECRET_VALUE}"
}

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

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

App Center Analytics と App Center Crashes を使用するには、アプリのメイン アクティビティ クラスの 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 から iOS および macOS 用 App Center SDK をダウンロードしようとします。

   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 でアプリを右クリックし、[ファイルの追加] をクリックして <App Name>...)。

3.3 [iOS のみ] React ネイティブリンクまたは CocoaPods を使用せずに React Native 用に SDK を手動で統合する

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

注

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

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

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

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

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

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 のプロジェクト ナビゲーターにドラッグ アンド ドロップします。 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 でアプリを右クリックし、[Add files to <App Name>...] をクリックします)。

    <?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 を開き、 dependency.platforms.ios を null に設定します。

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

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

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

3.4 [Android のみ] React ネイティブリンクなしで 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;
   

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

   @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. という名前の新しいファイルを作成し、android/app/src/main/assets/をアプリ シークレットの値に置き換えます。

   {
       "app_secret": "APP_SECRET_VALUE"
   }
   

警告

ソース コードにアプリ シークレットを埋め込むことは推奨されません。

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

注

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

注

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

ある。 android/app/src/main/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

ヒント

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

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

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

注

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

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

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