CordovaのFacebook PluginをiOS, Android, Web全てで導入する方法、詰まったこと #HTML5

cordovaでnativeのFacebook SDKを利用してFacebook連携出来るようにするphonegap-facebook-pluginというものがある。これを使いたい。

導入

インストール

ionic plugin add https://github.com/phonegap/phonegap-facebook-plugin.git --variable APP_ID="123456789" --variable APP_NAME="myApplication"

APP_IDとAPP_NAMEを指定しないと後でplatform別に怒られるので指定しておく。

例えば以下の様な感じでaccess_tokenが取れる。公式のサンプルはpublic_infoのアクセス権を指定しているが、いきなりpublic_infoは怒られるのでemailとかにしとく。

var fbLoginSuccess = function (userData) {
    alert("UserInfo: " + JSON.stringify(userData));
    facebookConnectPlugin.getAccessToken(function(token) {
        alert("Token: " + token);
    }, function(err) {
        alert("Could not get access token: " + err);
    });
}

facebookConnectPlugin.login(["email"],
    fbLoginSuccess,
    function (error) { alert("" + error) }
);

つまったこと

これを導入したとたんにビルド通らなくてまじ泣きそうになったので、詰まったことの解決方法を書いてみます。

iOS, Android

platformをrmしてaddしなおせばなんとかなる

全体を通して言えることで、試行錯誤してるうちにplatform以下の環境がおかしくなることがある。
その場合はplatform/以下のディレクトを自前で消すのではなく、きちんとコマンドを発行して消してあげる。さらに言えば、エラーになりうるpluginも消してしまったほうがよい。

ionic platform rm ios
ionic platform rm android
ionic plugin remove com.phonegap.plugins.facebookconnect

例えばfacebookconnectプラグインを残して、ionic platform add iosをするとAPP_IDがないと怒られて追加が途中で失敗する。困るのがfacebookconnect plugin以降に行われる処理も止まるので、怒られた後にionic plugin add ~でfacebook connect pluginのみ追加すればいいという話ではなくなってしまう。綺麗にplatform addしたいので、自分はplatformと合わせてfacebookconnect pluginも消すことを選んだ流れ。

iOSで、Plugin 'org.apache.cordova.facebook.Connect' not found, or is not a CDVPluginとか、
Androindで、Error initializing Cordova: Class not foundとか、
エラーが出る時は上記の理由でplatform addが正常に完了していないのが理由だったりした。

iOS

Xcodeで開けばなんとかなる

buildできなくてplatform/iosをXcodeで開いたらFacebookSDK.hがないというエラーが出てた。
自分の環境が悪かったのかverの問題かまでわかってないんですが、FacebookのサイトからSDK落としてきてXcodeからimportしてあげることで解決出来た。
ionic buildでは表示されないエラーがあったりするので、迷宮入りしそうだったらXcodeやEcliseで開いてみるのはあり。

Android

公式のREAD MEに従えばなんとかなる

てきとーにやってて、動かなくてなんなんだ！Android！ってなってたら公式のREAD MEにAndroid用の手順が書いてあった。ちゃんと読むようにしたい。

Web

ライブラリとか追加すればなんとかなる

Web向けにライブラリがまとめられたファイルがあるのでそれを読み込むようにしてあげる。
以下の場所に設置してあるので適当な場所に移して、読み込んであげる。
plugins/com.phonegap.plugins.facebookconnect/www/js/facebookConnectPlugin.js

<div id="fb-root"></div>
<script type="text/javascript" src="js/facebookConnectPlugin.js"></script>

あと、Webのみapp_idのセットが必要だったのでそれも以下でやってる。

if (!window.cordova) {
  facebookConnectPlugin.browserInit(app_id);
}

以上。楽な道などない。