カテゴリー: ｆａｃｅｂｏｏｋ app develop

facebook のcanvas型アプリの場合、一般的な方法では
リロードできないこともあるらしいので、メモってみました
画面のリロードを
javascript で行うには
window.location.reload() が一般的
でも、これだと
window は facebook の枠内に表示されている
内部フレームを指してしまい、画面全体リロードはできない
画面全体を指すウィンドウオブジェクト top もあるけど
これもダメ
window.top.location.reload()
top.location.reload()
で
画面全体のリロードを行おうとしても
facebook により top オブジェクトにアクセスできないようになっているのでNG
さらに、ブラウザの仕様で
内部フレームから歩かのウィンドウオブジェクトにアクセスできないこともあるのでダメ
top.location.href=”ジャンプ先URL”
これもダメ
現在確認できている成功例は
window.open(“ジャンプ先のURL”,”_top”)
として
ターゲットを画面全体としてURLを開くように指示すること
リロードの場合
ジャンプ先のURLは
自分自身のURLを指定するので
http://apps.facebook.com/アプリID
となります
window.top.open(“URL”)
だと
topへのアクセスが失敗するのでダメでした

Canvas型アプリの場合、
アプリを起動している時点でユーザはログインしている状態であることがほとんど
このため、FB.getLoginStatus() をつかっても
facebook への接続除隊を示すデータが渡される
でも、本来なら
接続状態をかくにんして
接続していないならログインすることを進めるようにするほうがベター
例えば
複数のウィンドウとかタブでfacebook を開いていたり
開発者用アプリのせ低画面からテストユーザ環境でログインしたりとかもあるので
接続していないというケースも多々あります
最近では、ブラウザも
firefox とか google chrome とか
いろいろでているし
（IEがないのは windows ほぼ使わないため）
アプリが必要としている権限の情報については
Graph API で取得可能
アプリの権限については
/me/permissions
にアクセスすれば取得できます
取得した権限の一覧は
JSONハッシュオブジェクト形式で
{‘権限の名前’:1}
となっています
例えば
{‘publish_stream’:1}
publish_stream は投稿の権限になります
もし、user_checkins を見たいなら
{‘user_checkins’:1}
を探します
あと、facebook アプリの場合
ほとんど最初にひつような全部の権限を要求しますが
必要に応じて権限を要求するようにもできます
このような作りにしたほうが
最近は安心されるかもしれません
というか、一般的に権限をみるユーザは
あまりいないかもしれません
スマホアプリで権限に気をつめるユーザはあまりいないように
facebook アプリとかでも
権限はあまり気にしていないようです

PHP　SDKをつかって
チェックイン情報を取得する場合、
１つめの引数に /me/checkins
２つめに　GET
3つ目の引数に　チェックインの数を limit で指定します
ちなみに、チェックインの場所を取得するには
適切なアクセストークンが必要なので注意
例をかくと
$checkins =$facebook->api(‘/me/checkins’,’GET’,’array(‘limit’=>1));
こうすれば
最新の1件のチェックイン情報を取得できます
さらに、
$place =$checkins[‘data’][0][‘place’];
とすれば
場所の表示もされます
チェックイン情報を取り扱うには
パーミッションが必要です
必要となるパーミッションは
user_checkins
これは
チェックイン履歴を取得するものです
友達のチェックイン履歴を取得したいなら
friends_checkins
が必要です

facebook の標準機能だと、GPS搭載デバイスに限り
チェックイン投稿可能
よく、ウォールとかに
～市付近とか
～にいます
とかでるけど
これはチェックインじゃなくて
位置情報が付加されているだけ
つまり、携帯とかのカメラとかと同じ
ではチェックイン投稿を行う条件ですが
これはチェックイン可能なfacebook ページのページID
そして
自分の緯度経度情報が必要
ちなみに、自分の緯度経度情報に関しては
サンプルで行ったように改ざんかのうだけど
チェックイン対象となる施設の市の近くにしないとダメ
もうちょっと正確にいうと
対象施設から
数百m～1Kmの範囲ぐらい
となります

canvas型アプリも
一般的なWebサイトみたいに別のurlのリクエストに送信して
その結果を表示できます
canvas型の場合、
内部フレームにアプリの画面が表示されていて
リクエストの結果は
指定しないと同じフレームに表示されます
このため、facebookが指定した枠はそのままになります

友達のプロフィールアイコンのURLは
https://graph.facebook.com/ユーザID/picture/
になります
このURLには、クエリー文字列を追加できす
https://graph.facebook.com/ユーザID/picture?type=square
とすると
50×50ピクセルの画像に
最後の squareを
smallなら　横幅 50　ピクセル
normalなら　100 ピクセル
large なら 200 ピクセル
というように
画像のサイズ調整ができます
あと、
return_ssl_resource=1
とすると
HTTPS
で画像のURLへ転送できます

友達のプロフィールアイコンのURLは
https://graph.facebook.com/ユーザID/picture/
になります
このURLには、クエリー文字列を追加できす
https://graph.facebook.com/ユーザID/picture?type=square
とすると
50×50ピクセルの画像に
最後の squareを
smallなら　横幅 50　ピクセル
normalなら　100 ピクセル
large なら 200 ピクセル
というように
画像のサイズ調整ができます
あと、
return_ssl_resource=1
とすると
HTTPS
で画像のURLへ転送できます

JavaScript Test Console で確認できるスクリプトでは
Legacy REST API
ですが、これは順次廃止され
Graph API へ移行されつつあります
FB.api()
では
FB.api(‘/me/friends’ , ‘get’ ,function (response){
})
というように
第一引数 /me/friends で
友達一覧を取得します
2番目の引数
get
でアクセス方法で get を指定
3番目の引数に
コールバック関数を指定します
これで、
コールバック関数の引数
response へ
友達一覧が格納されます
legacy rest API のように
取得する友達の数に
制限をつけるなら
2番目に
オプションに jsonp オプションを
指定すればok
です
制限は limit オプションで指定します
もし5人にしたいなら
FB.api(‘/me/friends’,'{limit: 5},’get’,function(response){
});
というようにします
legacy API との大きな違いは
graph API の場合
reaponse.data に
ユーザー情報が jsonp ハッシュオブジェクトの
配列で格納されるということです
このため、
response.data.length
を利用し
友達の情報の数を取得してます

Ｊａｖａ Script Test Console で
友達情報取得のサンプルを作成できます
https://developers.facebook.com/tools/
へアクセスし
Learning how to use the APIs
（APIの使いかたの学習）
の中にある
JavaScript Test Console
をクリックして
Examples
をクリック
fb.api
の中にある
friends
をクリックします
すると、 example ボタンのしたに
友達登録した人が表示されます
ちなみに、ログインしていないとでません
あと、example は例題とか　例　という意味です

10日でおぼえるFacebookアプリ開発入門教室
でおみくじアプリで画像をつけて投稿する時に
すこしわかりにくいかもしれなかったところをメモです
画像ファイルは、サンプルの中に含まれています
あと、もうひとつ書籍をみただけではつまづきそうなのが
source: ‘http://XXXXXX’+ image_file[x],
のところです
これを XAMPP で行うなら
htdocs のところに images フォルダをコピーして
source: ‘http://localhost/images/’+ image_file[x],
というように、フルパスで記述します
もし、公開サーバーやレンタルサーバーなら
images をアップロードして
パスを記述します
もし、hebereke.net　というドメインなら
http://hebereke.net/images/
というようになります