React Native Facebook公式サンプルソースをビルド、実行するまで

#**はじめに**
React Native開発にあたり、Facebook公式サンプルソース F8APP を実行できるまでの手順を書いてみました。習得の近道は公式サンプルソースを解読するのが一番と思ってます。
<img src="https://qiita-image-store.s3.amazonaws.com/0/117828/ac6e12d7-a3b5-2afd-9f31-74240b9389ef.jpeg"  width=35%>

<img src="https://qiita-image-store.s3.amazonaws.com/0/117828/9df5a8c3-850a-c199-789f-856b827014e1.jpeg"  width=35%>
 
#**Facebook公式サンプルソース F8APPについて**
Building the F8 App
http://makeitopen.com

Github
https://github.com/fbsamples/f8app

Google Play
https://play.google.com/store/apps/details?id=com.facebook.f8
![f8app_gooleplay.png](https://qiita-image-store.s3.amazonaws.com/0/117828/897a8e2e-0783-61db-e287-cc21e607fe3d.png)

AppStore
https://itunes.apple.com/jp/app/f8/id853467066?mt=8
![f8app_appstore.png](https://qiita-image-store.s3.amazonaws.com/0/117828/ecfd42b6-4f73-0300-c5f7-4cd8e8ca403d.png)


#**投稿者の開発環境**
- Mac OS High Sierra v10.13.3
- node v9.4.0
- yarn v1.5.1
- npm v5.7.1
- Docker v17.12.0-ce
- Xcode v9.2
- Android Studio v3.0.1
- create-react-native-app v1.0.0
- FacebookSDKs-iOS-4.31.1
- Watchman v4.9.0
- JDK v1.8.0_71


※各環境の構築手順は、省略


#**FACEBOOK SDK導入、F8APPダウンロード**
<b>公式SDKをダウンロード</b>
ダウンロードURL
https://developers.facebook.com/docs/ios/getting-started?locale=ja_JP

<b>ドキュメントフォルダにSDK配置</b>
ダウンロードしたSDKを解凍後、Macの「~/Documents/FacebookSDK」フォルダに配置する。

<b>公式サンプルソースをダウンロード</b>

```
$git clone https://github.com/fbsamples/f8app.git
```

<b>パッケージ管理開始</b>

```
$cd f8app/
$yarn
```
![yarn.png](https://qiita-image-store.s3.amazonaws.com/0/117828/5dc321fb-e4a0-8664-1744-4e9753c21a86.png)


#**Android　ビルド、エミュレーター実行**
Android Studio３．０１で、androidフォルダを開くと、ビルドエラーとなる。
![f8 app error.png](https://qiita-image-store.s3.amazonaws.com/0/117828/1450f89e-89ed-58d3-b6bf-24fb39787cab.png)

ビルドグレードルのSDKバージョンを以下の様に変更する。

<b>build.gradleの設定</b>
Android Studioの導入バージョンによっては、多少異なりますが、SDKは２６.0.2以上を指定すれば大丈夫と思います。

| パス | ファイル名 |
|:-----------|:------------|
| build.gradle<br>(Module: App)      | compileSdkVersion 26<br>buildToolsVersion '26.0.2'<br>compile "com.android.support:appcompat-v7:26.0.2"|
| build.gradle<br>(Module: react-native-fbsdk)      | compileSdkVersion 26<br>buildToolsVersion '26.0.2'<br>compile "com.android.support:appcompat-v7:26.0.2"|
| build.gradle<br>(Module: react-native-linear-gradient)      | compileSdkVersion 26<br>buildToolsVersion '26.0.2'|
| build.gradle<br>(Module: react-native-video-player)      | compileSdkVersion 26<br>buildToolsVersion '26.0.2'<br>compile "com.android.support:appcompat-v7:26.0.2"|
| build.gradle<br>(Module: react-native-photo-view)      | compileSdkVersion 26<br>buildToolsVersion '26.0.2'|
| build.gradle<br>(Module: react-native-push-notification)      | compileSdkVersion 26<br>buildToolsVersion '26.0.2'<br>compile "com.android.support:appcompat-v7:26.0.2"|

<b>エミュレーターで動作確認</b>
F8APPに付属のローカルサーバを起動する（既に起動済みの場合は不要）。

``` 
$yarn server
``` 

エミュレーターを起動し、正常に動作することを確認する。

``` 
$yarn android
``` 
<img src="https://qiita-image-store.s3.amazonaws.com/0/117828/ac6e12d7-a3b5-2afd-9f31-74240b9389ef.jpeg"  width=35%>

>エミュレーター実行は、yarn androidコマンドで行う。
このコマンドでAndroid向けに、ビルド等が正確に行われる。
Android Studio上からのエミュレーター実行だと、うまくいかない。


#**iOS ビルド、エミュレーター実行**
Bundle Identifilerとプロビジョニングファイルを別途準備しておく。
<b>XCODE側設定</b>
　　XCODEでf8appのiosフォルダを開きます。
　　XCODE->General->Identify->Bundle Identifilerを設定する。
　　XCODE->General->Signing->Provisioning Profileを設定する。
　　XCODE->Build Settings->Framework Search PathsにFacebook SDKのパスを設定する。
　　　　「~/Documents/FacebookSDK」



<b>エミュレーターで動作確認</b>
F8APPに付属のDockerのAPサーバを起動する（既に起動済みの場合は不要）。
Dockerの環境が必要です。


```
$yarn server
```

エミュレーターを起動し、動作することを確認する。

```
$yarn ios
```
XCODEが起動するため、クリーン、ビルドを行う。
正常にビルド後、エミュレーターを指定して実行する。
<img src="https://qiita-image-store.s3.amazonaws.com/0/117828/5c9e34e3-3834-60a8-57f3-a6aa448921a2.png"  width=35%>


> エミュレーター実行時にbasisフォントがない旨のエラー画面表示になる事象が発生した場合、jsファイルの「basis」フォントの箇所を「helvetica」に修正する。
必ず発生する訳ではなく、当手順の検証で、２回目の時は発生しなかった。

> | パス | ファイル名 |
|:-----------|:------------|
| js/filter      | Topicitem.js  |
| js/tabs/demos     | DemosCaruosel.js|
| js/tabs     | F8TabsView.js |
| js/tabs/schedule     | F8SessionDetails.js（２箇所） |
| js/tabs/schedule     | GeneralScheduleView.js |
| js/tabs/schedule     | SessionsCarousel.js |

>XCODEでビルド時に、RNVideoPlayerプロジェクトのSearch pathに、AppDelegate.hが参照できないエラーが発生した場合、header search pathの追加を行う。
必ず発生する訳ではなく、当手順の検証で、１回目の時は発生しなかった。
![RNVideoPlayer.h 2018-03-18 12-08-05.png](https://qiita-image-store.s3.amazonaws.com/0/117828/8fef6399-9e37-6b6a-3cdb-cb7afbc2c3a0.png)
![Monosnap 2018-03-18 11-58-48.png](https://qiita-image-store.s3.amazonaws.com/0/117828/ee6166fc-e6b7-4561-f724-28f7f40182ff.png)



#**Android、iOS実機で検証する**
エミュレーターでなく、実機検証する場合、APサーバ接続先をlocalhostからローカルIPアドレスに変更する。
またF8APPは、Facebookログインを行っており、実行にはFacebook開発用のアプリIDが、必要です。
Facebook開発サイトに、アプリ情報を登録し、アプリIDを入手し、env.jsファイルに設定を行う。
<b>DockerのAPサーバを停止</b>
　　ターミナルで起動中の場合、CTRL＋Cで停止する。

<b>jsファイルのローカルサーバのIPアドレス変更</b>
　　f8app/env.jsファイルのserverURLとgraphqlURLのlocalhostをローカルIPアドレスに変更する。
　　＜変更前＞
　　serverURL: "http://localhost:1337",
　　graphqlURL: "http://localhost:4000/graphql",
　　＜変更後＞
　　serverURL: "http://ローカルIPアドレス:1337",
　　graphqlURL: "http://ローカルIPアドレス:4000/graphql",

<b>FACEBOOK開発用のアプリIDを取得</b>
　　FACEBOOKログインを利用する場合、Facebookアプリ開発用のアプリIDが必要です。
　　開発者サイトでAndroidアプリをウイザードに従い登録し、取得する。

　　Facebook開発サイト
　　https://developers.facebook.com/docs/apps/register?locale=ja_JP

　　登録に必要な証明書キーは、keytookコマンドで作成する。
　　下記のコマンドを打つと、２８文字のキーがコンソールに表示される。
　　この値をFACEBOOKのアプリIDのキーハッシュに登録する。
　
　　$keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64

　　取得したアプリIDをapp/res/values/strings.xmlに元からある値を上書する形で登録する。
　　なおファイルはリリース用、デバック用の２ファイルあるので、各々で設定する

```
<resources>
<string name="app_name">F8</string>
<string name="facebook_app_id">アプリID</string>
</resources>
```
<b>DockerのAPサーバ起動</b>

```
$yarn server
```


<b>実機確認</b>
　　アプリを実機に転送し、実機動作を確認する。
　　初回起動時には、他のアプリに重ねて描画する設定画面が表示されるため、有効化する。
　　有効化した後で、再実行するとアプリが正常に起動表示されます。
<img src="https://qiita-image-store.s3.amazonaws.com/0/117828/810e7dbb-966b-a569-6c1f-3277f426748b.png"  width=35%>

アプリ起動後、SKIP FOR NOWで動作を確認してください。
<img src="https://qiita-image-store.s3.amazonaws.com/0/117828/ac6e12d7-a3b5-2afd-9f31-74240b9389ef.jpeg"  width=35%>
>「CONTINUE WITH FACEBOOK」ボタンのFacebookログインは、実機ではうまくいかない事があります。
>多分、FacebookのアプリIDとの兼ね合いと思いますが、分かる方、いたら教えてくださると助かります。

><img src="https://qiita-image-store.s3.amazonaws.com/0/117828/52676028-4a39-dcb3-fc55-c6c82f229968.png"  width=35%>