【ReactNative開発】Facebook APIで取得したプロフィール画像URLから高解像度の画像を取得する

こんにちは。今日は、小ネタですが、Facebook APIで取得したプロフィール画像の解像度をあげる方法について記録に残しておきます。

FacebookログインAPIなどで、Facebookの情報を取得した時、以下のような戻り値が得られます。（スコープをpublic_profileとした場合）

＜Facebook APIから取得できるユーザ情報の例＞

Object {
  "apiKey": "xxx",
  "appName": "[DEFAULT]",
  "authDomain": "xxx",
  "createdAt": "xxx",
  "displayName": "xxx",
  "email": null,
  "emailVerified": false,
  "isAnonymous": false,
  "lastLoginAt": "xxx",
  "multiFactor": Object {
    "enrolledFactors": Array [],
  },
  "phoneNumber": null,
  "photoURL": "https://graph.facebook.com/xxx/picture",
  "providerData": Array [
    Object {
      "displayName": "xxx",
      "email": null,
      "phoneNumber": null,
      "photoURL": "https://graph.facebook.com/xxx/picture",
      "providerId": "facebook.com",
      "uid": "xxx",
    },
  ],
  "redirectEventId": null,
  "stsTokenManager": Object {
    "accessToken": "xxx",
    "apiKey": "xxx",
    "expirationTime": 1631842507207,
    "refreshToken": "xxx",
  },
  "tenantId": null,
  "uid": "xxx",
}

この時、プロフィール画像は、上記のようにURL形式で与えられます。

これをそのまま、アプリで表示させると・・・な、なんか解像度が低い・・・

・・・     
<Image style={styles.profileImage}
  source={{uri: profileImage}}
/>
・・・

調べてみると、URLにクエリパラメータを付与することで解像度やサイズ等調整できることがわかった。

https://stackoverflow.com/questions/26934938/facebook-graph-api-get-custom-profile-picture-size/26936806

今回は、こちらに倣って、取得したURLに”?type=large”を付与して画像を取得することで、画像をみやすくすことができた。

以上、小ネタでした！

本日も最後までご覧いただきありがとうございました！

おしまい

[番外編] ReactNativeをもっと学ぶなら・・・

React Nativeをもっとちゃんと学びたい！という方は、こちらにおすすめコンテンツをまとめましたので、ご参考にしていただければと思います・・！

土台のJavaScript/TypeScriptに不安がある方は、こちらもまとめましたので、ご参考になりましたら幸いです。