トレーニング
ラーニング パス
FastTrack サービス、データ管理などを使用して、財務と運用アプリの実装を成功させるためのプロジェクト方法論を計画および設計します。
このブラウザーはサポートされなくなりました。
Microsoft Edge にアップグレードすると、最新の機能、セキュリティ更新プログラム、およびテクニカル サポートを利用できます。
重要
Visual Studio App Center は、2025 年 3 月 31 日に廃止される予定です。 完全に廃止されるまで Visual Studio App Center を引き続き使用できますが、移行を検討できる推奨される代替手段がいくつかあります。
App Center SDK ではモジュールアーキテクチャが使用されるため、任意またはすべてのサービスを使用できます。
App Center Analytics と App Center のクラッシュを使用するようにアプリで App Center React Native SDK を設定し始めましょう。
開始する前に、次の前提条件が満たされていることを確認します。
App Center ポータルでアプリを既に作成している場合は、この手順をスキップできます。
アプリを作成したら、App Center ポータルの [設定] ページでアプリ シークレットを取得できます。 [設定] ページの右上隅にある 3 つの垂直ドットをクリックし、[アプリ シークレット] を選択Copy app secret
して取得します。
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 が用意されています。複数のサービスに役立ちます。
React Nativeで App Center SDK を使用するには、2 つの方法があります。iOS 用と android 用のappcenter-config.jsonの構成AppCenter-Config.plist
、または appSecret を引数として受け入れるネイティブ開始関数を呼び出します。
iOS ディレクトリから を実行 pod install --repo-update
して CocoaPods の依存関係をインストールします。
次の内容の名前 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>
アプリの AppDelegate.m または AppDelegate.mm ファイルを 変更して、SDK を開始するためのコードを含めます。
#import <AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes.h>
application:didFinishLaunchingWithOptions:
追加します。[AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];
アプリの 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];
アプリの 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>
appcenter-config.jsonという名前の新しいファイルを次の内容でandroid/app/src/main/assets/
作成し、 をアプリ シークレットの値に置き換えます{APP_SECRET_VALUE}
。
{
"app_secret": "{APP_SECRET_VALUE}"
}
注: assets という名前のフォルダーが存在しない場合は、"project_root/android/app/src/メイン/assets" の下に作成する必要があります。
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)
注意
React モジュールが Podfile 内の相対パスを使用してリンクされているが、プロジェクトで参照されていない場合、リンク スクリプトは失敗します。これは、静的ポッド バージョンを使用して App Center をリンクするためです。 リンクスクリプトを既に実行している場合は、React Nativeトラブルシューティングセクションの手順に従うか、自分でリンクする必要があります
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 メソッドによってトリガーされるかに関係なく、クラッシュはアプリケーションの再起動後に常に処理されます。 クラッシュは、アプリケーションがクラッシュした時点では処理できません。
プロジェクト android/app/src/main/assets/appcenter-config.json
の を編集し、プレースホルダーの値を YOUR_APP_SECRET
App Center プロジェクトのアプリケーション シークレットに置き換えます。
プロジェクトの ios/{YourAppName}/AppCenter-Config.plist
ファイルを編集し、プレースホルダーの値を YOUR_APP_SECRET
App Center プロジェクトのアプリケーション シークレットに置き換えます。 AppCenter-Config.plist が既に存在し、Xcode プロジェクトの一部ではない場合は、手動で Xcode プロジェクトに追加する必要があります (XCode でアプリを右クリックし、[アプリ名>にファイルを<追加]をクリックします)。
CocoaPods を使用しない場合は、この統合を行います。 上記のように CocoaPods 経由で SDK を統合することを 強くお 勧めします。 それでも、iOS ネイティブ SDK を手動で統合することもできます。
注意
最新の App Center React Native SDK は、必ずしも最新の App Center iOS SDK に依存するとは限りません。これは、iOS SDK が更新され、React Nativeされる前にリリースされるためです。
その結果、React Native SDK が依存する iOS SDK のバージョンを把握する必要があります。
zip ファイルとして提供されているReact Native フレームワーク用の App Center SDK をダウンロードし、解凍します。
AppCenterReactNativeShared という名前のフォルダーが表示されます。このフォルダーには、必要なReact Native iOS ブリッジ用の 1 つのフレームワークが含まれています。
zip ファイルとして提供されている 対応する iOS フレームワーク用 App Center SDK をダウンロードし、解凍します。
App Center サービスごとに異なるフレームワークを含む AppCenter-SDK-Apple/iOS というフォルダーが表示されます。 呼び出される AppCenter
フレームワークは、異なるモジュール間で共有されるコードを含んでいるため、プロジェクトで必要です。
[省略可能]サード パーティ製ライブラリのサブディレクトリを作成します。
Finder を開き、以前に解凍した AppCenter-SDK-Apple/iOS フォルダーと AppCenterReactNativeShared フォルダーを、プロジェクトのフォルダーの場所にコピーします。
Xcode のプロジェクトに SDK フレームワークを追加します。
AppCenter React Native プラグイン プロジェクトをアプリのプロジェクトにリンクします。
[プロジェクト ナビゲーター] が表示されていることを確認します (⌘+1)。
AppCenter React Native プラグインごとに、ソース コードを含むフォルダーに移動します。 パスはそれぞれ になります。
/node_modules/appcenter/ios
/node_modules/appcenter-analytics/ios
/node_modules/appcenter-crashes/ios
Finder から Xcode のプロジェクト ナビゲーターにファイルをドラッグ アンド ドロップ .xcodeproj
します。 通常は、[ ライブラリ ] グループの下にあります。
AppCenter React Native プラグインのライブラリをリンクします。 プロジェクト設定を開き、[リンクされたフレームワークとライブラリ] セクションの [全般] タブで、前の手順で追加したターゲット ライブラリを参照する新しい項目を追加します。
libAppCenterReactNative.a
libAppCenterReactNativeAnalytics.a
libAppCenterReactNativeCrashes.a
ヘッダー検索パスを変更して、AppCenter React Native プラグイン プロジェクトからヘッダーを検索します。 プロジェクト設定を開き、[ヘッダー検索パス] セクションの [ビルド設定] タブで、ヘッダー ファイルの新しい場所を追加します。
$(SRCROOT)/../node_modules/appcenter/ios/AppCenterReactNative
$(SRCROOT)/../node_modules/appcenter-analytics/ios/AppCenterReactNativeAnalytics
$(SRCROOT)/../node_modules/appcenter-crashes/ios/AppCenterReactNativeCrashes
アプリの 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];
次のコンテンツを含む名前 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 以降を使用するアプリのみです。
React Native 0.60 以降の自動リンクを無効にします。
null
設定dependency.platforms.ios
します。module.exports = {
dependency: {
platforms: {
ios: null,
...
}
}
};
ヘッダー検索パスを変更して、App Center React Native プラグイン プロジェクトからReact Nativeヘッダーを検索します。
recursive
追加します。${SRCROOT}/../../../ios/Pods/Headers
コマンドを react-native link
使用しない統合手順。
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 への移行については、 このガイド に従ってください。
プロジェクトのアプリ レベルの build.gradle ファイル (android/app/build.gradle
) を開き、セクションに次の行を dependencies
追加します。
dependencies {
implementation project(':appcenter-crashes')
implementation project(':appcenter-analytics')
implementation project(':appcenter')
...
}
アプリの 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()
@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)
);
}
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>
appcenter-config.jsonという名前の新しいファイルを次のコンテンツでandroid/app/src/main/assets/
作成し、 をアプリ シークレットの値に置き換えますAPP_SECRET_VALUE
。
{
"app_secret": "APP_SECRET_VALUE"
}
警告
ソース コードにアプリ シークレットを埋め込むことはお勧めしません。
注意
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>
これで、コマンド ラインまたは Xcode/Android Studio からアプリケーションをビルドして起動できます。
次のコマンドを使用して、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
起動できます。
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 ガイドとチュートリアルの 「分析 と クラッシュ 」セクションを参照してください。
トレーニング
ラーニング パス
FastTrack サービス、データ管理などを使用して、財務と運用アプリの実装を成功させるためのプロジェクト方法論を計画および設計します。