Facebook勉強会アプリでもページでもJavaScript SDKを使うと便利

Date: 2011-07-10
Author: かみやん

Ctrl + ↑ : Normal Screen Presen

自己紹介

かみやん (Twitter@kamiyam)
システム開発会社
ほとんどWebのシステム
Java・C#

FaceBookアプリの紹介

TwitterTLのTweetをいいね！出来るアプリ: Tweet Likes

Google App Engineというクラウドプラットフォームサービスを使っています

FaceBook JavaScript SDK

FaceBook JavaScript SDKとは？: http://developers.facebook.com/docs/reference/javascript/; http://connect.facebook.net/ja_JP/all.js; FaceBookアプリ/ページでいろんな機能や情報を提供するライブラリです; 正直な所あんまり機能は多く無いです・・・:D; でも、JavaScriptSDKを使う大きな理由があります

FaceBookアプリ/ページとiframe

その前にちょっとFaceBookアプリの仕組みについて

FaceBookアプリではiframeを使う場合、外部サイトをFaceBookのサイトの一部であるように見せています..

iframe解説

iframeを使ったFaceBookアプリを分かりやすく

柴犬だいすき！Shibastagram: Shibastagram
柴犬もふもふ！Shibamofugram: ~~Shibamofugram~~（※発表時のみ公開）

iframeにスクロールバーが・・・

ここで普通はAuto-resizeを設定しますね。

すると、今度は親画面のスクロール位置や高さなどを情報として取得しなければなりません。

iframeを使う場合のJavaScriptの挙動について

iframeを使う場合、iframeを呼び出す元サイトのドメインと呼び出される側のドメインの違いに注意が必要です

クロスドメイン下のサイト情報へのアクセス

クロスドメイン下でのJavaScript

ドメインの違うサイトの情報にJavaScriptはアクセスすることができません

・・・基本的に

｡oO 応用的なところは・・・お察しください

フレーム間のスクリプト記述とセキュリティ

じゃ、アプリのスクロールの位置とか画面サイズとかどうやって調べるの？

それ、JavaScript SDKならできるよ・・・！

FaceBookアプリでJavaScript SDKを使う理由

FaceBookアプリ/ページとiframe内の情報のやりとりにどうしても必要

つまりアクセス用APIとして利用

実際、JavaScript SDKにはFaceBookアプリ側の画面情報を取得してくる関数などがあります

JavaScript SDK 紹介

FB.init: 初期化処理
FB.Canvas: 画面情報
FB.Canvas.setAutoResize(): 画面リサイズ処理
FB._inCanvas: FaceBookアプリ内かどうか
FB.log: iFrame内のサイトからアプリ画面のコンソールに出力
FB.XFBML.parse(): 動的に配置した「いいね！」ボタンのXFBMLを再評価する

まとめ

JavaScript SDK便利！！！