MonacaアプリにネイティブFacebookプラグインを導入してみよう！
こんにちは、渡辺です。
今回は、「Wizcorp/phonegap-facebook-plugin」プラグインを利用してFacebookと連携するサンプルプロジェクトを作ります。
■利用するプラグイン
Wizcorp/phonegap-facebook-plugin
( https://github.com/Wizcorp/phonegap-facebook-plugin )
■サンプルプロジェクトについて
サンプルプロジェクトでは、Facebookへログイン後にログインしたユーザーのメールアドレスと友達リストを取得します。取得した情報は、アラートで表示し ます。また、このプロジェクトはMonacaテンプレートの「最小限のテンプレート」をもとに作成しています。
・サンプルプロジェクトの動作確認環境
・iPhone6 (iOS 8.1.2)
・GALAXY Note 2 SC-02E (Android4.3 )
・デバッグビルドしたアプリで確認済
(注意:ストア版デバッガーおよびカスタムデバッガーでは動作しないので注意してください。)
■準備
準備としては、サンプルプロジェクトを作成する前に、まず下記の「サンプルプロジェクト Facebook クライアント」ページにある事前準備作業を行い、「App ID 」と「 APP NAME」を取得してください。
・サンプルプロジェクト Facebook クライアント
http://docs.monaca.mobi/cur/ja/sampleapp/samples/facebook
■プラグインのインストール
こちらの過去記事に記述したましたので、参照ください。
また、プラグインをインストールする際には、ZIP形式でのインポートをお薦めします。
注意する点として、今回のプラグインの場合、GitHubからダウンロードしたZIP内容に一部誤りのようなところがあります。対処法としては、一度解凍して再度WinArchiverなどのソフトを利用して圧縮すると正しい形式のZIPが作成されます。
■プラグインの設定
プラグインのインストール作業が完了したら、次はプラグインで利用する「APP_ID」と「APP_NAME」をプラグインの設定画面にて指定します。
ここで使用する値は、「準備」の項目で用意したものとなります。
■Facebookへログインする
「deviceready」イベントが発生した際に、Facebookへのログインが開始するようにしています。
ログインが成功した場合は、「fbLoginSuccess」を実施します。「fbLoginSuccess」は次の項目に記述しています。
document.addEventListener('deviceready', initApp, false);
function initApp() {
// Login
facebookConnectPlugin.login(["public_profile"], fbLoginSuccess, function (error) {
alert("" + error)
});
}
■ユーザー情報を取得する
ログインが成功した際に呼ばれる処理です。ここでは Facebook Graph APIを利用して、ユーザー情報としてemailと友達リストを取得しています。
var fbLoginSuccess = function (userData) {
alert("UserInfo: " + JSON.stringify(userData));
// Get email and friends
facebookConnectPlugin.api(userData.authResponse.userID + "/?fields=id,email,friends", ["email", "user_friends"], function (result) {
alert("Result: " + JSON.stringify(result));
}, function (error) {
alert("Failed: " + JSON.stringify(error));
});
};
■サンプルプロジェクトのコード
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<br/>This is a template for Monaca app.
<div id="fb-root"></div>
</body>
<script>
document.addEventListener('deviceready', initApp, false);
function initApp() {
// Login
facebookConnectPlugin.login(["public_profile"], fbLoginSuccess, function (error) {
alert("" + error)
});
}
var fbLoginSuccess = function (userData) {
alert("UserInfo: " + JSON.stringify(userData));
// Get email and friends
facebookConnectPlugin.api(userData.authResponse.userID + "/?fields=id,email,friends", ["email", "user_friends"], function (result) {
alert("Result: " + JSON.stringify(result));
}, function (error) {
alert("Failed: " + JSON.stringify(error));
});
};
</script>
</html>
■参考情報
・Wizcorp/phonegap-facebook-plugin
https://github.com/Wizcorp/phonegap-facebook-plugin
■お知らせ
Monacaチームでは現在、新規開発メンバーを大募集中です。詳しくはこちらを参照ください！
https://ja.monaca.io/careers.html
