ionicへのPhonegap Facebook Pluginの導入手順


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

## 1. ionicでアプリを作る

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

```bash
$ 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>``` の下にでも入れる）

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

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

```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を控えておく

![ionic-pfp-integration_1.png](https://qiita-image-store.s3.amazonaws.com/0/77141/32a10449-38c3-3f31-b539-cc7415de8f50.png "ionic-pfp-integration_1.png")

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

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

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

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

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

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

### プラグインをaddする

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

```bash
$ 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に上げておいたので、以下で取得できます。

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

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

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

```bash
$ ionic build
```

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

![ionic-pfp-integration_2.png](https://qiita-image-store.s3.amazonaws.com/0/77141/dd425c08-c680-bc1a-59bb-2a173822ac95.png "ionic-pfp-integration_2.png")

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

## 4. Facebookのアプリを公開モードにする

Facebookにアプリを登録した時点では、サンドボックスモードになっています。あくまでテスト用なので、アプリを登録した人のアカウントではログインできますが、そうじゃない一般の人はアプリを使うことができません。
アプリを公開する時に、公開モードにしてあげる必要があります。

### プラットフォームを追加する

Facebook Developerにアクセスし、左ペインのSettingsをクリック。
+ Add Platformというボタンが出てくるので、それを選択。

![ionic-pfp-integration_3.png](https://qiita-image-store.s3.amazonaws.com/0/77141/8d6d9fbe-7ee2-3341-14c6-27289caff87c.png "ionic-pfp-integration_3.png")

iOSを選択。

![ionic-pfp-integration_4.png](https://qiita-image-store.s3.amazonaws.com/0/77141/9c4d6b40-f16f-95a1-2e76-7ccde5e040d4.png "ionic-pfp-integration_4.png")

iOSのところのBundle IDを入力します。
あとで必要になるので、ついでにContact Emailも入力しておきます。これがないと、Facebook Appとして公開できません。

![ionic-pfp-integration_5.png](https://qiita-image-store.s3.amazonaws.com/0/77141/733de668-b64c-d654-0783-b6d06b3e4ec1.png "ionic-pfp-integration_5.png")

### 公開モードに変える

クソみたいなアプリしかできてませんが、公開してしまいましょう。
左ペインのStatus & Reviewを選択すると、右側のボタンが押せるようになっていると思いますので、押します。

![ionic-pfp-integration_6.png](https://qiita-image-store.s3.amazonaws.com/0/77141/f41d77ea-9f85-0c7b-daa1-05380d6f5328.png "ionic-pfp-integration_6.png")

本当に公開しちゃって良いの？と聞かれるので、迷わずYESを選択すると、画面がリロードされて、以下のようになります。

![ionic-pfp-integration_7.png](https://qiita-image-store.s3.amazonaws.com/0/77141/78c1da5b-21a0-d52c-8be4-29d52b6ca401.png "ionic-pfp-integration_7.png")

○だったものが、●に変われば公開されたってこと。

## 5. 動作確認する

実機なり、エミュレータなりで動作させてみます。

```bash
$ ionic emulate ios
```