Asial Blog

Recruit! Asialで一緒に働きませんか?

MonacaアプリにネイティブFacebookプラグインを導入してみよう!

カテゴリ :
Monaca
タグ :
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」は次の項目に記述しています。

  1. document.addEventListener('deviceready', initApp, false);
  2.  
  3. function initApp() {
  4.     // Login
  5.     facebookConnectPlugin.login(["public_profile"], fbLoginSuccess, function (error) {
  6.       alert("" + error)
  7.     });
  8.   }


■ユーザー情報を取得する


ログインが成功した際に呼ばれる処理です。ここでは Facebook Graph APIを利用して、ユーザー情報としてemailと友達リストを取得しています。

  1. var fbLoginSuccess = function (userData) {
  2.     alert("UserInfo: " + JSON.stringify(userData));
  3.  
  4.     // Get email and friends 
  5.     facebookConnectPlugin.api(userData.authResponse.userID + "/?fields=id,email,friends", ["email", "user_friends"], function (result) {
  6.       alert("Result: " + JSON.stringify(result));
  7.     }, function (error) {
  8.       alert("Failed: " + JSON.stringify(error));
  9.     });
  10.   };


■サンプルプロジェクトのコード


index.html


  1. <!DOCTYPE HTML>
  2. <html>
  3.  
  4. <head>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  7.   <script src="components/loader.js"></script>
  8.   <link rel="stylesheet" href="components/loader.css">
  9.   <link rel="stylesheet" href="css/style.css">
  10. </head>
  11.  
  12. <body>
  13. <br/>This is a template for Monaca app.
  14. <div id="fb-root"></div>
  15. </body>
  16. <script>
  17.   document.addEventListener('deviceready', initApp, false);
  18.  
  19.   function initApp() {
  20.     // Login
  21.     facebookConnectPlugin.login(["public_profile"], fbLoginSuccess, function (error) {
  22.       alert("" + error)
  23.     });
  24.   }
  25.  
  26.   var fbLoginSuccess = function (userData) {
  27.     alert("UserInfo: " + JSON.stringify(userData));
  28.  
  29.     // Get email and friends 
  30.     facebookConnectPlugin.api(userData.authResponse.userID + "/?fields=id,email,friends", ["email", "user_friends"], function (result) {
  31.       alert("Result: " + JSON.stringify(result));
  32.     }, function (error) {
  33.       alert("Failed: " + JSON.stringify(error));
  34.     });
  35.   };
  36.  
  37. </script>
  38.  
  39. </html>


■参考情報


・Wizcorp/phonegap-facebook-plugin
https://github.com/Wizcorp/phonegap-facebook-plugin


■お知らせ


Monacaチームでは現在、新規開発メンバーを大募集中です。詳しくはこちらを参照ください!
https://ja.monaca.io/careers.html