19
BOOK TITLE Lorem Ipsum DOLOR SET AMET

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

Embed Size (px)

Citation preview

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

BOOK TITLE

Lorem Ipsum

DOLOR SET AMET

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

チャプタ 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

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

3

phoneGap 2.5 + phonegap-facebook-plugin

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

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

4

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

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

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

5

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

$ cd phonegap-2.5.0/

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

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

6

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

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

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

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

7

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

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

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

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

8

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

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

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/

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

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.

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

11

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

config.xml や plist の設定を行う

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

12

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

いきなり iOS用の facebook

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

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

13

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

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

14

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

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

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

15

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

エントリーを追加

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

16

config.xml の

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

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

17

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

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

18

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

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