PhoneGap 3.0 + phonegap-facebook-plugin + iOS

PhoneGap 3.0 と phonegap-facebook-plugin の組み合わせを試した時のメモ。

セットアップ

使ったモジュールは以下。

・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 のハンドリングなどまだまだ試したいことが色々とあるけど、一旦動いたのでこの辺でおしまい。

第27回 浦佐温泉 耐久山岳マラソン大会

今年も参加してきました。ラップは以下。

 1km: 3:58
 2km: 4:21
 3km: 4:52
 4km: 4:53
 5km: 5:13
 6km: 5:30
 7km: 4:58
 8km: 5:03
 9km: 4:20
10km: 4:08
11km: 4:21
12km: 4:49
13km: 5:29
14km: 5:02
15km: 4:23
16km: 4:16
17km: 4:09
18km: 4:08
19km: 4:00
20km: 4:11
 Fin: 4:32 (1:36:43)

上りは高心拍を維持して走れていい感じ。下りは故障が怖くて抑え気味になってしまった。ぺらいシューズにしたのが失敗だった気がしなくもない。とはいえ、とりあえず最後までスピードを維持して走れたし目標のタイムも達成できたので全体としては合格点。

このレースを通じて筋力が大分ついてきて強度の高い練習ができる下地ができた印象。新潟まではスピードと LT の向上に努めることとする。新潟の目標は 1:24:00 くらいかな。

Hyperlapse

Google Street View から動画を生成できるっぽい。これはすごい。

Google Street View Hyperlapse from Teehan+Lax Labs on Vimeo.

http://hyperlapse.tllabs.io/

remote_api 404 Not Found

Google App Engine の remote_api が 404 Not Found になる件について。

app.yaml の handlers 定義の順序に気をつけましょう、というオチ。悲しい。

以下、引用：

---

9. The order that handlers in app.yaml, web.xml, and appengine-web.xml are specified in matters

One of the more common and subtle mistakes people make when configuring their app is to forget that handlers in the application configuration files are processed in order, from top to bottom. For example, when installing remote_api, many people do the following:

handlers:
- url: /.*
script: request.py

- url: /remote_api
script: $PYTHON_LIB/google/appengine/ext/remote_api/handler.py
login: admin

The above looks fine at first glance, but because handlers are processed in order, the handler for request.py is encountered first, and all requests - even those for remote_api - get handled by request.py. Since request.py doesn't know about remote_api, it returns a 404 Not Found error. The solution is simple: Make sure that the catchall handler comes after all other handlers.

The same is true for the Java runtime, with the additional constraint that all the static file handlers in appengine-web.xml are processed before any of the dynamic handlers in web.xml.

---

from 10 things you probably didn't know about

Joe Gebbia, Airbnb

Aribnb の Joe Gebbia さん。

サービスの着想から立派に立ち上がった現在までを振り返ったプレゼンテーション。

Joe Gebbia: The Airbnb Story from Piers Fawkes on Vimeo.

次旅行に行く時にぜひ使ってみたいっすね。