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

はじめに

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
f8app_gooleplay.png

AppStore
https://itunes.apple.com/jp/app/f8/id853467066?mt=8
f8app_appstore.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ダウンロード

公式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

yarn.png

Android ビルド、エミュレーター実行

Android Studio3.01で、androidフォルダを開くと、ビルドエラーとなる。
f8 app error.png

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

build.gradleの設定
Android Studioの導入バージョンによっては、多少異なりますが、SDKは26.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」に修正する。
必ず発生する訳ではなく、当手順の検証で、2回目の時は発生しなかった。

パス ファイル名
js/filter Topicitem.js
js/tabs/demos DemosCaruosel.js
js/tabs F8TabsView.js
js/tabs/schedule F8SessionDetails.js(2箇所)
js/tabs/schedule GeneralScheduleView.js
js/tabs/schedule SessionsCarousel.js

XCODEでビルド時に、RNVideoPlayerプロジェクトのSearch pathに、AppDelegate.hが参照できないエラーが発生した場合、header search pathの追加を行う。
必ず発生する訳ではなく、当手順の検証で、1回目の時は発生しなかった。
RNVideoPlayer.h 2018-03-18 12-08-05.png
Monosnap 2018-03-18 11-58-48.png

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コマンドで作成する。
  下記のコマンドを打つと、28文字のキーがコンソールに表示される。
  この値をFACEBOOKのアプリIDのキーハッシュに登録する。
 
  $keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64

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

<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との兼ね合いと思いますが、分かる方、いたら教えてくださると助かります。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.