#はじめに
React Native開発にあたり、Facebook公式サンプルソース F8APP を実行できるまでの手順を書いてみました。習得の近道は公式サンプルソースを解読するのが一番と思ってます。
#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
AppStore
https://itunes.apple.com/jp/app/f8/id853467066?mt=8
#投稿者の開発環境
- 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ダウンロード
公式SDKをダウンロード
ダウンロードURL
https://developers.facebook.com/docs/ios/getting-started?locale=ja_JP
ドキュメントフォルダにSDK配置
ダウンロードしたSDKを解凍後、Macの「~/Documents/FacebookSDK」フォルダに配置する。
公式サンプルソースをダウンロード
$git clone https://github.com/fbsamples/f8app.git
パッケージ管理開始
$cd f8app/
$yarn
#Android ビルド、エミュレーター実行
Android Studio３．０１で、androidフォルダを開くと、ビルドエラーとなる。
ビルドグレードルのSDKバージョンを以下の様に変更する。
build.gradleの設定
Android Studioの導入バージョンによっては、多少異なりますが、SDKは２６.0.2以上を指定すれば大丈夫と思います。
| パス | ファイル名 |
|---|---|
| build.gradle (Module: App) |
compileSdkVersion 26 buildToolsVersion '26.0.2' compile "com.android.support:appcompat-v7:26.0.2" |
| build.gradle (Module: react-native-fbsdk) |
compileSdkVersion 26 buildToolsVersion '26.0.2' compile "com.android.support:appcompat-v7:26.0.2" |
| build.gradle (Module: react-native-linear-gradient) |
compileSdkVersion 26 buildToolsVersion '26.0.2' |
| build.gradle (Module: react-native-video-player) |
compileSdkVersion 26 buildToolsVersion '26.0.2' compile "com.android.support:appcompat-v7:26.0.2" |
| build.gradle (Module: react-native-photo-view) |
compileSdkVersion 26 buildToolsVersion '26.0.2' |
| build.gradle (Module: react-native-push-notification) |
compileSdkVersion 26 buildToolsVersion '26.0.2' compile "com.android.support:appcompat-v7:26.0.2" |
エミュレーターで動作確認
F8APPに付属のローカルサーバを起動する（既に起動済みの場合は不要）。
$yarn server
エミュレーターを起動し、正常に動作することを確認する。
$yarn android
エミュレーター実行は、yarn androidコマンドで行う。
このコマンドでAndroid向けに、ビルド等が正確に行われる。
Android Studio上からのエミュレーター実行だと、うまくいかない。
#iOS ビルド、エミュレーター実行
Bundle Identifilerとプロビジョニングファイルを別途準備しておく。
XCODE側設定
XCODEでf8appのiosフォルダを開きます。
XCODE->General->Identify->Bundle Identifilerを設定する。
XCODE->General->Signing->Provisioning Profileを設定する。
XCODE->Build Settings->Framework Search PathsにFacebook SDKのパスを設定する。
「~/Documents/FacebookSDK」
エミュレーターで動作確認
F8APPに付属のDockerのAPサーバを起動する（既に起動済みの場合は不要）。
Dockerの環境が必要です。
$yarn server
エミュレーターを起動し、動作することを確認する。
$yarn ios
XCODEが起動するため、クリーン、ビルドを行う。
正常にビルド後、エミュレーターを指定して実行する。
エミュレーター実行時に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の追加を行う。
必ず発生する訳ではなく、当手順の検証で、１回目の時は発生しなかった。
#Android、iOS実機で検証する
エミュレーターでなく、実機検証する場合、APサーバ接続先をlocalhostからローカルIPアドレスに変更する。
またF8APPは、Facebookログインを行っており、実行にはFacebook開発用のアプリIDが、必要です。
Facebook開発サイトに、アプリ情報を登録し、アプリIDを入手し、env.jsファイルに設定を行う。
DockerのAPサーバを停止
ターミナルで起動中の場合、CTRL＋Cで停止する。
jsファイルのローカルサーバのIPアドレス変更
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",
FACEBOOK開発用のアプリIDを取得
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>
DockerのAPサーバ起動
$yarn server
実機確認
アプリを実機に転送し、実機動作を確認する。
初回起動時には、他のアプリに重ねて描画する設定画面が表示されるため、有効化する。
有効化した後で、再実行するとアプリが正常に起動表示されます。
アプリ起動後、SKIP FOR NOWで動作を確認してください。
「CONTINUE WITH FACEBOOK」ボタンのFacebookログインは、実機ではうまくいかない事があります。
多分、FacebookのアプリIDとの兼ね合いと思いますが、分かる方、いたら教えてくださると助かります。
