2018年8月8日水曜日

ReactNativeでFacebookSDKを使って画像や動画をシェアする方法


背景

ReactNativeとはFacebookが作っている、JavaScriptという言語でスマートフォンアプリを作れるフレームワークです。

スマートフォンアプリからFacebookに画像や動画をシェアしたい場合は、FaceookSDKを利用する必要があるようです。
(SDK無しでシェアする方法はあるのかもしれませんが、この記事ではSDKを使う前提で話を進めます。)
そのSDKをReactNativeで使うために、react-native-fbsdkというライブラリが提供されています。

しかし、react-native-fbsdkには、画像や動画をシェアするための型は用意されているものの、どう書けば良いかが詳しく書かれていませんでした。
試行錯誤の末、react-native-fbskdで画像と動画をシェアすることに成功したので、その方法を共有します。

使ったもの

react-native-fbsdkをインストールしたReactNativeアプリ
fbsdkのreadmeに書いてある手順で、アプリにsdkをインストールてください。

この記事で試した各プログラムのバージョンはこちらです。
react-native: 0.55.4
react-native-fbsdk: 0.7.0

画像をシェアする方法

contentTypeをphotoとして、SharePhotoContentSharePhotoを定義し、それをShareDialog.showに渡すと画像をシェアできます。
const FBSDK = require('react-native-fbsdk')
const {
  ShareApi,
} = FBSDK

const photoUri = 'file://' + '/path/of/photo.png'
const sharePhotoContent = {
  contentType = 'photo',
  photos: [{ imageUrl: photoUri }],
}

// ...

ShareDialog.show(tmp.state.sharePhotoContent)


動画をシェアする方法

contentTypeをvideoとして、ShareVideoContentShareVideoを定義し、それをShareDialog.showに渡すと動画をシェアできます。
const FBSDK = require('react-native-fbsdk')
const {
  ShareApi,
} = FBSDK

const videoUri = 'file://' + '/path/of/video.mp4'
const shareVideoContent = {
  contentType = 'video',
  video: { localUrl: videoUri },
}

// ...

ShareDialog.show(tmp.state.shareVideoContent)


まとめ

react-native-fbsdkを利用して、画像と動画をFacebookにシェアできました。
一度Android版でシェアを実現し、雰囲気を感じ取りながらJSで記述してみたとこと、期待通りにシェアできたので、記事として内容を共有しました。

この記事に関する内容のプルリクエストを送っています。
それが受理されれば、readmeを読めばすんなりと画像や動画をシェアできる人が増えると思います。

何かの参考になれば嬉しいです。

参考

react-nativeのsdkの概要説明
文章をシェアする方法が説明されています。
Facebook Sharing for React Native

Android版のsdkの概要説明
こちらには画像のシェア方法が説明されています。
Androidでのシェア

Android版sdkの資料
ShareVideo
SharePhoto

react-native-sdkの実装
パラメータをどのように記述したら良いか、実装を見ると分かりました。
SharePhoto
SharePhotoContent
ShareVideo
ShareVideoContent

2 件のコメント :

daisoftware さんのコメント...

Hey, very nice site. I came across this on Google, and I am stoked that I did. I will definitely be coming back here more often. Wish I could add to the conversation and bring a bit more to the table, but am just taking in as much info as I can at the moment. Thanks for sharing.

React Native Development Company

Asuki Kono さんのコメント...

I'm glad to know that this article helps you.
Thank you for the comment.