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を探してくれるようです。

f:id:ariarijp:20170412135814p:plain

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

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

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

f:id:ariarijp:20170412135830p:plain

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

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

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

f:id:ariarijp:20170412135846p:plain

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

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

f:id:ariarijp:20170412142658p:plain

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

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

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

f:id:ariarijp:20170412140625p:plain

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

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

f:id:ariarijp:20170412141203p:plain

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

コードを編集する

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

f:id:ariarijp:20170412141403p:plain

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

f:id:ariarijp:20170412141659p:plain

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

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

アプリを起動する

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

f:id:ariarijp:20170412141942p:plain

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

f:id:ariarijp:20170412142233p:plain

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

f:id:ariarijp:20170412142310p:plain

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