オルタナティブ・ブログ > プロジェクトマネジメント10.0 >

失敗しないウェブアプリケーション開発の処方箋

【Facebook】JavaScript SDK のメソッド紹介

»

お世話になっております。
ループス岡村(直)です。

前回のエントリ「【Facebook】JavaScriptでソーシャルグラフにアクセスするのは意外と簡単」では、JavaScript SDK の概要とどんなことができるのかを紹介させていただきました。今回は JavaScript SDK のメソッドについて触れたいと思います。

  • Facebook JavaScript SDK の構成要素
    1. コアメソッド
    2. イベントハンドリング
    3. XFBML メソッド
    4. データアクセスユーティリティ
    5. キャンバスメソッド

以下に記述した内容は基本的に Facebook Developers の説明に基づきます。また、前回紹介した JS Test Console などを使ってできるだけ実際の挙動を確認しています。とはいえ、条件網羅・分岐網羅はまだまだ不十分ですので、何かお気づきの点等ありましたらご連絡いただけると助かります。Facebook Developers にはコードのサンプルが豊富にあります。メソッド名にリンクを張っておきましたので興味のある方は参照していただければと思います。

■コアメソッド

ログインやログアウト、APIへのアクセス、投稿用インターフェースなどを含む最も基本的なメソッド群です。

  • FB.api
    Graph API の呼び出しをラップします。名前や画像などの公開データの他、権限が与えられている範囲内の様々なデータにアクセスすることが可能です。
  • FB.init
    JavaScript SDKライブラリを初期化します。参照するJSファイルは言語によって指定する必要があるようです。日本の場合は ”http://connect.facebook.net/ja_JP/all.js”  を参照すればよいと思います。引数は全てオプションですが、アプリケーションIDとXFBMLのパースは必要なケースが多いでしょう。
  • FB.logout
    バックグラウンドでFacebookからログアウトさせます。
  • FB.getLoginStatus
    カレントユーザーのログイン状態をFacebookサーバに問い合わせ、ログインしていれば Session オブジェクトを取得します。
  • FB.login
    ログインとパーミッションの設定を行います。「パーミッションの設定」とは、外部アプリがユーザーに代わってどんなことができるのか、どんなデータにアクセスできるのか、といった権限委譲のことです。指定できるパーミッション設定の詳細は Facebook Developers の Extended Permissions ページを参照してください。
  • FB.ui
    フィードの送信やリンクのシェアといった操作を行う際に、Facebook 側のインターフェースをポップアップで表示します。どんな動作ができるかは、JS Test Console の Sample が参考になります。データのポストに画面遷移が不要になるため、開発をとても簡単にしてくれると思います。
  • FB.getSession
    現在のセッションに同期的なアクセサを提供します。セッションは FB.getLoginStatus() で取得できるのですが、どういった場合にこちらのメソッドを使った方がよいのかは筆者にはよくわかっていません。ページの読み込み時にこのメソッドを使うことはできず、通常は FB.getSession() を使う方が安全とのことです。


■イベントハンドリング
いわゆるListenerというやつだと思います。様々なイベントをトリガとして処理(コールバック関数)を実行できます。

◯メソッド

  • FB.Event.subscribe
    イベントを登録すると、そのイベントが発生する度にコールバック関数を呼び出します。
  • FB.Event.unsubscribe
    FB.Event.subscribe で登録したリスナーを削除します。

◯登録可能なイベント

  • auth.login
    ユーザーがログインした際に発生。
  • auth.logout
    ユーザーがログアウトした際に発生。
  • auth.sessionChange
    セッションが変更された際に発生。
  • auth.statusChange
    ステータスが変更された際に発生。
  • xfbml.render
    FB.XFBML.parse() メソッドの処理終了時に発生。
  • edge.create
    ユーザーが「いいね!」すると発生。
  • comments.add
    コメントが追加されると発生。
  • fb.log
    ログメッセージで発生。(よくわからない)

■XFBMLメソッド
ドキュメント中のXFBMLと一部のFBMLマークアップをパース、レンダリングします。

◯パース可能なXFBML、FBML

  • fb:activity
    Social Plugins の Activity Feed です。
  • fb:add-profile-tab
    アプリケーションを、ユーザーマイページのタブに追加させるボタンを生成させる・・・はずなんですが、現在マイページにタブが追加できないため正常に動作しません。
  • fb:bookmark
    アプリケーションを、マイページの「ブックマーク」欄に追加するためのボタンを生成します。ブックマークされるURLは、アプリケーション設定の「ブックマークURL」で設定できます。
  • fb:comments
    Social Plugins の Comments です。FBMLとしても定義されているのですが、Social Plugins の入力ページと引数が違います。どういう関係なのかはよくわかりません。
  • fb:friendpile
    Social Plugins の Facepile です。タグ名とプラグイン名が微妙に違うのが気になります。
  • fb:like
    有名なLikeボタンです。これも Social Plugins で定義されています。
  • fb:like-box
    Social Plugins の Like Box です。
  • fb:live-stream
    Social Plugins の Live Stream です。
  • fb:login-button
    Social Plugins の Login Button です。
  • fb:pronoun(※)
    代名詞を生成します。自分が見ていたら「you」、それ以外で男性なら「he」、女性なら「she」、わからなければ「they」という風になるようです。
  • fb:recommendations
    Social Plugins の Recommendations です。
  • fb:serverFbml(※)
    IFrame 内の FBML を Facebook サーバでレンダリングします。FB.XFBML.parse() にリストアップされているFBMLをレンダリングする際は不要です。
  • fb:user-status(※)
    FBMLです。uid で指定されたユーザーのステータスを返します。戻り値に "http"、もしくは "https" で始まる文字列があればハイパーリンクの形にレンダリングします。

(※)動作未確認



■データアクセスユーティリティ
FQLを利用してデータを取得することができます。FQL とは、Facebook Query Language の略です。SQLを使ったことがある人ならイメージしやすいと思いますが、以下のような書式でFacebookに対してデータの問い合わせを行います。

SELECT [fields] FROM [table] WHERE [conditions]

複数テーブルに対する問い合わせができないなど、SQLと異なる点もあります。自分自身を表す ”me()"、現在時刻を表す ”now()" など、いくつかの関数もあります。詳細は Facebook Developsers の説明ページを参照してください。

  • FB.Data.query
    FQLクエリを実行し、結果を取得します。また、非同期的にデータを取得するために待機することができます。
  • FB.Data.WaitOn
    複数のFQLクエリをセットすることができ、全てが取得されるまで待機します。

テーブルは友達、グループ、ユーザー、クッキー、ドメイン、アルバム、ファンページのインサイト、イベント、イベント参加者、位置情報、ファンの情報、プライバシー、ステータスなど多岐に渡り、権限がある範囲内でアクセスできます。



■キャンバスメソッド

アプリケーションの描画エリアに関するメソッドです。

  • FB.Canvas.setSize
    iframeをリサイズするようFacebookに通知します。
  • FB.Canvas.setAutoResize
    サイズ変更は可能だが、いつ変更するかわからない場合に有効です。サイズが変更されるタイミングが分かっている場合、CPUの節約のため setSize を使った方がよいでしょう。

■終わりに
ここまで試してみて思ったのは、Facebook のデータへこんなに自由なアクセスが許されているのであれば、クライアントを実装することも可能なのではないか、ということです。日本でFacebookが流行らない理由として、馴染みのないインターフェースに対する利用者の抵抗感や、デザインをカスタマイズできない点がしばしば引き合いにだされます。こういった課題を補って有り余る素晴らしい機能性が Facebook にはありますが、第三者による拡張でその不足をより直接的に補うことができる可能性を感じました。とは言え、私自身が興味を持っている「ガラケー向けFacebookクライアントサービス」の実装は、素直に作ればサーバサイドでAPIと何度も通信をすることになり、あまり現実的ではないのかもしれません。まあ、できるなら誰かがとっくにやってますよね。フィジビリティの検証も含め、今後時間と機会があったら考えてみたいと思います。

と、いうわけで2回に渡って Facebook JavaScript SDK に関するエントリを書いてみました。私自身の仕事は最近ますます営業やプロマネ寄りにシフトしており、ソースコードを書くことはほとんどありません。現場で触っていない開発系の話題について、中途半端な知識で情報を発信してもよいのだろうか。そんなことを考えながら書いていました。きちんと検証しきれていない内容を皆様にお伝えする現状について、率直にお詫び申し上げたいと思います。それでも、本エントリの内容がどなたかのお役に立つことを願っています。 ありがとうございました。

Comment(0)