More than 5 years have passed since last update.

ionicへのPhonegap Facebook Pluginの導入手順

Last updated at 2015-05-09Posted at 2015-05-09

資料がバラバラに存在するので結構ハマりました。思考の整理ついでにまとめてみました。何故か簡単になってる。。
ちなみに、iosのみです。Androidは実機がないのでやってません。やることになったら追記します。

1. ionicでアプリを作る

まず、ionic-cliを使ってios用のブランクアプリを作る。
ngCordovaを入れておくと、ionicとの統合が楽になるので、これも入れておく。

$ ionic start ionic-facebook-integration blank
$ cd ionic-facebook-integration
$ ionic platform add ios
$ bower install ngCordova --save

続いて、 http://ngcordova.com/docs/install/ に記載の通り、アプリを修正します。

www/index.htmlに以下を追加。（ <script src="js/app.js"></script> の下にでも入れる）

<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>

www/js/app.jsのモジュール読み込み部分を以下に修正。

angular.module('starter', ['ionic', 'ngCordova'])

あとは実際にプログラムに組み込む部分の話なので今はスルー。

2. Facebook Developerにアプリを登録する

Facebook Developerにアクセスする。アカウントがない人は、この段階で作っておきます。
https://developers.facebook.com/

以下、簡単な手順。

My Apps -> Add a New App でアプリを登録する
iOSを選択
ダイアログが出てくるので、適当に情報を入力する（facebookやfb等のトレードマークのキーワードは使えません）
謎のセキュリティチェックがあるので、質問に答える
以下の感じになればOKなので、App IDを控えておく

なお、ログイン連携だけであればデフォルトの設定でいけます。
が、ウォールへの投稿等をやろうとすると、Facebookによるレビューが必要になってくるので注意。

3. ionicアプリにphonegap-facebook-pluginを導入する

ここが鬼門。公式サイトに書いてある通りにやれば良いのかと思いきや、自分はうまくいかない時がありました。何故だ。
公式サイトへのリンクも掲載しておきます。
https://github.com/Wizcorp/phonegap-facebook-plugin

githubからソースコードを落としてくる

適当なディレクトリにcloneしましょう。

$ git clone https://github.com/Wizcorp/phonegap-facebook-plugin.git

プラグインをaddする

公式ドキュメント通りやれば良いのだが、ionicの場合、プラグインの導入は ionic plugin add とかで、ionic-cliを使用するのが一般的。が、通ぶると上手くできない。cordovaコマンドを使わないと何故かうまくいかないので注意。

$ cordova -d plugin add /path/to/cloned/phonegap-facebook-plugin --variable APP_ID="123456789" --variable APP_NAME="myApplication"

なお、この時点でAPP_IDとAPP_NAMEはFacebook Developerに登録したものを必ず入力。
あとでも修正できるが、忘れるのが怖いのでここで入れておくようにします。

pluginsの下にcom.phonegap.plugins.facebookconnectというディレクトリができていればOK。
自分の場合は、色々やりすぎたのか、ここにコピーされないこともあった。そういう時はまさかの手動コピー。

何か処理を書く

折角なので、手順おさらい用にFacebookアカウントを使ったログインアプリを作ってみました。
サンプルですが、GitHubに上げておいたので、以下で取得できます。

$ git clone https://github.com/todoken/ionic-facebook-integration.git

ionicアプリをビルドして設定を確認

ionicアプリをビルドします。

$ ionic build

ビルドすると、platforms/iosの下に、xcodeproj拡張子のファイルができますので、これを開きます。
左ペインのResourcesの下にplistがありますので、これの中身を見ると、以下の画像のようになっていると思います。

確認ポイントは、モザイクがかかっている FacebookAppID と URL types -> Item 0 -> URL Schemes -> Item 0 です。
ここがそれぞれ、自分の発行したFacebookのAppIDになっているかを確認します。
どういう操作をしたらそうなるのか不明ですが、Item 0の値が消えていることがありました。