iOS(phoneGap)で facebook のjavascript SDKを動かす

BOOK TITLE

Lorem Ipsum

DOLOR SET AMET

チャプタ 1

Lorem ipsum dolor sit amet, ligula suspendisse nulla

pretium, rhoncus tempor placerat fermentum, enim

integer ad vestibulum volutpat. Nisl rhoncus turpis est,

vel elit, congue wisi enim nunc ultricies sit, magna

tincidunt. Maecenas aliquam maecenas ligula nostra,

accumsan taciti. Sociis mauris in integer, a dolor netus

non dui aliquet, sagittis felis sodales, dolor sociis mauris,

vel eu est libero cras.

KT002

https://developers.facebook.com/ios/ Download the SDK

https://developers.facebook.com/docs/getting-started/getting-started-with-the-ios-sdk/#project

https://developers.facebook.com/docs/mobile/ios/build/

https://developers.facebook.com/docs/sdk-reference/iossdk/3.0/protocol/FBGraphUser/

2

セクション 1

facebook

3

phoneGap 2.5 + phonegap-facebook-plugin

+ facebook SDK3.2Xcode 4.6.1 iOS(phoneGap)で facebook の javascript SDKを動かす

4

まず、phoneGapをインストールして コマンドラインより、Xcode の プロジェクトを作成

作成したプロジェクトを実行してみる

5

ダウロードした　phoneGap　の zip ファイルを解凍し、 解凍したディレクトリに移動して create を実行

$ cd phonegap-2.5.0/

$ ./lib/ios/bin/create ./HelloFBjs HelloFBjs HelloFBjs

6

一部、警告が表示されるが　表示部分をコメントアウトして config.xml に同等の内容を追記

http://docs.phonegap.com/en/2.5.0/cordova_splashscreen_splashscreen.md.html#Splashscreen

作成された project を Xcode で開き、 実行してエラーがないことを確認

7

この状態で www フォルダ以下に facebook の javascript SDK を install して、動けば簡単なのですが、

残念ながらそうはいきません。

phonegap-facebook-plugin が 必要となります。

8

FacebookConnectPlugin に添付されているサンプルプログラムを作成したプロジェクトに組み込んで、 現時点でどこまでの動作となるか試してみる

9

https://github.com/phonegap/phonegap-facebook-plugin　よりダウンロードしたファイルを解凍 この中の example/Simple/index.html を稼働させてみることにします

phonegap-facebook-plugin から HelloFBjsプロジェクトにファイルをコピー

www/Simple/index.html --> indexSimple.html　（ファイル名変更） www/lib/facebook_js_sdk.js --> www/

www/cdv-plugin-fb-connect.js --> www/

10

HelloFBjs[31709:18e03] ERROR: Plugin 'org.apache.cordova.facebook.Connect' not found, or is not a CDVPlugin. Check your plugin mapping in config.xml.2013-03-20 13:21:05.926 HelloFBjs[31709:18e03] -[CDVCommandQueue executePending] [Line 103] FAILED pluginJSON = [ "org.apache.cordova.facebook.Connect190025982", "org.apache.cordova.facebook.Connect", "init", [ "appid" ]

index.html にindexSimple.htmlのリンクを作成して 実行すると、画面が表示されるがログには以下のエラー ERROR: Plugin 'org.apache.cordova.facebook.Connect' not found, or is not a CDVPlugin.

11

FacebookConnectPlugin が示す手順に従い、iOS用facebook SDKを導入し、

config.xml や plist の設定を行う

12

以下、https://github.com/phonegap/phonegap-facebook-plugin　のReadme.md に従い、 作業を進めます。

いきなり iOS用の facebook

SDKのインストールを要求され、ちょっとうんざりさせられます。

13

iOS用 facebook SDK のインストールおよび設定 * iOS のfacebook SDKは以下にインストールされます　　　　　　　　　　　~/Documents/FacebookSDK 　３つのフォルダをdrag&dropで追加 　other link flag に -lsqlite3.0 追加 　AdSupport,Account,Socila framework の追加

14

エラー対応dyld: Library not loaded different behavior for 6.0 simulator/6.0 device

この時点で実行してみて、dyldエラーが発生した場合の対応 追加した framework を Required から optional に変更する

15

・navtive/ios/FacebookConnectPlugin ファイルをプロジェクトに追加 ・config.xml に FacebookConnectPluginの

エントリーを追加

16

config.xml の

<access origin=”*” > にて allow all domains.

17

・plist はエディターで直接 xml を記述した方が簡単かもしれません ・developer.facebook.com にアプリ登録を行い、app_id を取得します 　　登録に指定するサイトURLには適当な値を設定する必要があります（空白はだめ）

18

以上作業完了　 ( Me ) をクリックすると友達一覧がページ送りなしで表示されます

画像が正しく表示されないため修正