React NativeでCrashlyticsを使う手順

簡単だけど記録として残しておくための記事です。

前提

• Macを使っている
  • この記事ではiOSアプリについての手順のみ紹介します
• React Nativeがインストール済みで使ってiOSアプリを作ったことがある
  • HelloWorld程度の知識で十分です
  • 使用したバージョン
    • react-native-cli: 2.0.1
    • react-native: 0.43.3
• Xcodeを少しだけ触ったことがある
  • ビルド、実行ぐらいができれば十分です
• FabricのMacアプリがインストールされている
• Crashlyticsがなにをしてくれるかをざっくり知っている

手順

プロジェクトを作成する

まずはReact Nativeのプロジェクトを作成します。

$ react-native init Hello

しばらくするとプロジェクトのディレクトリが作成されます。

Fabricアプリを使ってCrashlyticsを導入する

アプリを追加する

FabricのMacアプリで「New App」を選ぶと、Mac内にある.xcodeprojを探してくれるようです。

先程作成したプロジェクト内の.xcodeprojファイルがあると思うので、それを選択します。

使用するツールを選択する

次に使用したいツールを選択します。

今回はCrashlyticsのみをInstallして次に進みます。

ビルドスクリプトを編集する

続いて、Xcodeでビルドスクリプトを編集します。Fabricアプリで以下の画面が表示されるとともに、Xcodeが起動します。

プロジェクトの設定から「Build Phases」を選択し、左上の「+」ボタンから「New Run Script Phase」を選択します

「Run Script」のブロックが追加されるので、そこにFabricアプリに表示されているコマンドを貼り付けます。

コマンドを貼り付けたら、Cmd-Bなどでアプリをビルドします。

ライブラリをインストールする

ビルドが完了すると、Fabricアプリの画面が以下のように切り替わります。

この画面に切り替わったら、Crashlyticsを使用するために必要なライブラリをXcodeプロジェクトにインストールします。

FabricアプリのバッグのようなアイコンをXcodeプロジェクトにドラッグアンドドロップすると、以下のような画面が表示されます。

「Finish」ボタンをクリックして先に進みます。

コードを編集する

ライブラリをインストールすると、以下のような画面が表示されます。

画面でハイライト表示されているコードをコピーして、プロジェクト内のAppDelegate.mファイルに貼り付けます。

せっかくReact Nativeを使っているのにObj-Cだなんて辛い！と思うかもしれませんが我慢してください。

コードを追加し終わったら、Fabricアプリの画面の「Next」をクリックして先に進みます。

アプリを起動する

Fabricアプリが以下のような画面になるので、Xcodeを使用し、Cmd-Rなどでアプリを実行します。

無事にアプリが起動すれば、iOSシミュレータで以下のような画面が表示されます。

あわせて、Fabricアプリも以下のような画面に切り替わります。

これでCrashlyticが導入できました。Fabricの画面を見てみるとHelloアプリが追加されています。

Mastering React Native