React Native開発：Facebook SDKを組み込むについて

皆さん、こんにちは。

今回は「React Native開発：Facebook SDKを組み込む」について紹介させていただきます。

React Native 0.83以降でFacebook SDKを組み込むには、主に次の手順を踏みます。
Facebookの認証やその他の機能を使用するためには、react-native-fbsdkを使用することが一般的です。

# 必要なパッケージのインストール
まず、Facebook SDKを使うために必要なパッケージをインストールします。

```
npm install react-native-fbsdk-next
```

または、Yarnを使っている場合:

```bash
yarn add react-native-fbsdk-next
```

# iOSの設定

iOSでFacebook SDKを利用するためには、CocoaPodsのインストールが必要です。まず、iOSディレクトリに移動して、CocoaPodsをインストールします。

```
cd ios
pod install
```

次に、FacebookのApp IDとApp Nameを設定するために、Info.plistファイルに以下の内容を追加します。

```
<key>FacebookAppID</key>
<string>YOUR_FACEBOOK_APP_ID</string>
<key>FacebookDisplayName</key>
<string>YOUR_FACEBOOK_APP_NAME</string>
<key>FacebookAutoLogAppEventsEnabled</key>
<true/>
<key>FacebookAdvertiserIDCollectionEnabled</key>
<true/>
```

`YOUR_FACEBOOK_APP_ID`と`YOUR_FACEBOOK_APP_NAME`を自分のFacebookアプリの設定に置き換えてください。

# Androidの設定

次に、Android側の設定を行います。`android/app/src/main/res/values/strings.xml`に以下のエントリを追加します。

```xml
<string name="facebook_app_id">YOUR_FACEBOOK_APP_ID</string>
<string name="facebook_client_token">YOUR_FACEBOOK_CLIENT_TOKEN</string>
```

次に、`android/app/src/main/AndroidManifest.xml`に以下の設定を追加します。

```xml
<application
  android:name=".MainApplication"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:theme="@style/AppTheme"
  android:usesCleartextTraffic="true">
  
  <meta-data
    android:name="com.facebook.sdk.ApplicationId"
    android:value="@string/facebook_app_id"/>

  <activity
    android:name="com.facebook.FacebookActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    android:theme="@android:style/Theme.Translucent.NoTitleBar" 
    android:launchMode="singleTask"
    android:hardwareAccelerated="true" 
    android:windowSoftInputMode="adjustResize">
    <intent-filter>
      <action android:name="android.intent.action.VIEW" />
      <category android:name="android.intent.category.DEFAULT" />
      <category android:name="android.intent.category.BROWSABLE" />
      <data android:scheme="fbYOUR_FACEBOOK_APP_ID" />
    </intent-filter>
  </activity>
</application>
```

`YOUR_FACEBOOK_APP_ID`を実際のFacebookアプリIDに置き換えてください。

# Facebook SDKの利用

React NativeのアプリでFacebookの認証機能を利用するためには、以下のようにコードを書きます。

```javascript
import React, { useEffect } from 'react';
import { Button, View } from 'react-native';
import { LoginManager, AccessToken } from 'react-native-fbsdk-next';

const FacebookLogin = () => {
  const loginWithFacebook = () => {
    LoginManager.logInWithPermissions(['public_profile', 'email'])
      .then(result => {
        if (result.isCancelled) {
          console.log('Login cancelled');
        } else {
          console.log('Login success with permissions: ' + result.grantedPermissions.toString());
          // トークンを取得
          AccessToken.getCurrentAccessToken().then(data => {
            console.log(data.accessToken.toString());
          });
        }
      })
      .catch(error => {
        console.log('Login fail with error: ' + error);
      });
  };

  return (
    <View>
      <Button title="Login with Facebook" onPress={loginWithFacebook} />
    </View>
  );
};

export default FacebookLogin;
```

# Facebook Developer Consoleの設定

- Facebookアプリの設定：Facebookの[開発者コンソール](https://developers.facebook.com)にアクセスし、新しいアプリを作成してください。
- アプリIDとApp Secret：アプリIDとApp SecretはFacebook開発者コンソールから取得できます。
- Facebookログインの設定：Facebookログイン機能を有効にし、適切なプラットフォーム（iOSとAndroid）を選択して設定します。

# アプリのビルドと実行

すべての設定が完了したら、アプリをビルドして実行します。
- iOSの場合：
```
npx react-native run-ios
```
- Androidの場合：
```
npx react-native run-android
```

これで、React Nativeアプリ内でFacebook SDKを使用する準備が整いました。Facebookログインを通じてユーザー認証を行うことができます。

今日は以上です。

ありがとうございました。
よろしくお願いいたします。