セットアップ
使ったモジュールは以下。・PhoneGap 3.0
・phonegap-facebook-plugin - commit:0a057d245779d840c9ab8ae85f82f941fa096caa
・Facebook SDK for iOS v3.7.1
PhoneGap 3.0 は普通にドキュメントに従ってインストール。npm なかったので node のインストールからやった。
phonegap-facebook-plugin と Facebook SDK は github からそれぞれ clone 。Facebook SDK は clone 後に ./scripts/build_all.sh でビルドしておく。
PhoneGap プロジェクトの作成
phonegap-facebook-plugin を組み込む PhoneGap プロジェクトを作成しておきます。PhogeGap のドキュメントのこのへんを見たらよさそう。また実際に Xcode でビルドして iOS Simulator で起動することも確認しておくといいかも。phonegap-facebook-plugin の組み込み
基本的には phonegap-facebook-plugin のここを参照して各種設定していけばよかったけど、いくつか調整が必要だったのでそれらを中心に書いておきます。まず Facebook iOS SDK と JavaScript SDK を追加します。
1. Download the latest Facebook SDK for iOS from the iOS Dev Center.
これは上ですでにやっているので OK 。2. Add the Facebook SDK for iOS Framework by dragging the FacebookSDK.framework folder from the SDK installation folder into the Frameworks section of your Project Navigator.
Facebook SDK の build 以下に FacebookSDK.framework があるのでそれを XCode 内の Frameworks にコピーします。3. Choose 'Create groups for any added folders' and deselect 'Copy items into destination group's folder (if needed)' to keep the reference to the SDK installation folder, rather than creating a copy.
コピーしないで参照にしておきましょうとのこと。4. Add the Facebook SDK for iOS resource bundle by dragging the FacebookSDKResources.bundle file from the FacebookSDK.framework/Resources folder into the Frameworks section of your Project Navigator.
Facebook SDK v3.7.1 では FacebookSDKResources.bundle は廃止されたようなのでこの手順は飛ばして OK （build 以下の FacebookSDK.framework/Versions/A/Resources/FacebookSDKResources.bundle.README にその旨が書いてあります）。5. As you did when copying the Framework, choose 'Create groups for any added folders' and deselect 'Copy items into destination group's folder (if needed)'
これも飛ばして OK 。6. Add the headers by dragging the DeprecatedHeaders folder from the FacebookSDK.framework/Versions/A/DeprecatedHeaders folder into the Frameworks section of your Project Navigator.
build 以下の FacebookSDK.framework/Versions/A/DeprecatedHeaders を Xcode 内の Frameworks にコピーします。7. Choose 'Create groups for any added folders' and deselect 'Copy items into destination group's folder (if needed)'. This adds the headers as a reference.
これも同じく、コピーしないで参照にしておきましょうとのこと。8. Click on your project's icon (the root element) in Project Navigator, select your Project, then the Build Settings tab, search for Other Linker Flags.
Linker Flags を追加するのでその画面を開きます。9. Add the value -lsqlite3.0
追加します。10. Add the value -ObjC
これは最初から記載されていたので追加の必要はありませんでした（なかったら追加しましょう）。11. Click on your project's icon (the root element) in Project Navigator, select your Target, then the Build Phases tab, then the Link Binary With Libraries option.
Library を追加するので Link Binary With Libraries を開きます。12. Add the Social.framework framework. Make it an optional framework to support pre iOS6 apps.
追加します。13. Add the Accounts.framework framework. Make it an optional framework to support pre iOS6 apps.
追加します。14. Add the AdSupport.framework framework. Make it an optional framework to support pre iOS6 apps.
追加します。15. Add the Security.framework framework. Make it an optional framework to support pre iOS6 apps.
追加します。次に PhoneGap Facebook Plugin を追加します。
1: Locate the plugins section of your Project Navigator and create a group "ios". Make sure it is added as a "group" (yellow folder)
Plugins が Frameworks と同列にあるのでそこに ios グループを作成します。2: From the Cordova Facebook Plugin folder copy FacebookConnectPlugin.h and FacebookConnectPlugin.m from the src folder into the new group "ios".
phonegap-facebook-plugin の src の中に FacebookConnectPlugin.h と FacebookConnectPlugin.m があるので上で作った ios の中にコピーします。3: Find the config.xml file in the project navigator and add a new entry as a child to the plugin tag:
ドキュメントでは、を config.xml に追加するようにとあるんですが、そうではなく以下を追加します。
また追記する config.xml は www の中の config.xml ではなく、プロジェクト直下の config.xml のようです。
最後に phonegap-facebook-plugin の www 以下のファイル（cdv-plugin-fb-connect.js と facebook-js-sdk.js）をプロジェクト以下の www にコピーしておきます。
あとはドキュメントにある通り、
・[プロジェクト名]-info.plist に FacebookAppID を追加
・URL whitelist を設定（config.xml の access を変更）
・URL Scheme を設定（'fb' + Facebook App の App ID な感じ）
しておく。
サンプルアプリで起動してみる
ドキュメントにもありますが phonegap-facebook-plugin の example 以下にある HackBook で起動してみます。やることはあまりなくて、HackBook 以下をプロジェクトの www 以下にコピーするのと、www 以下の index.html の末尾にある <script> タグ内の JavaScript のコードに App ID を記載すれば OK 。あと細かいけど <script> の facebook-js-sdk.js が facebook_js_sdk.js になっているので修正する必要があります。
ここまでやって起動すれば、Facebook の認証が走って、その後こんな画面が表示されるはず。
この後 SSO やサーバー再度での signed request のハンドリングなどまだまだ試したいことが色々とあるけど、一旦動いたのでこの辺でおしまい。
