Facebook Open Graph の Aggregation で遊んでみよう（ギャラリー編）

前回の記事からだいぶ経ってしまいました…。前回はアクション、オブジェクトを使って遊びました。
今回は Aggregation（アグリゲーション）を使って遊んでみましょう！

アグリゲーションでどんなことができるのか

ざっくりこんなことができます。

Instagram Sample Nike+ Sample

※ Facebook で自分や友だちのタイムラインをみるとたまにこういうのありますよね

表示方法の種類（レイアウトスタイル）

アグリゲーションとは集合・集計であり、Facebook Open Graph では全部で 6 種類のアグリゲーションの表示方法（Layout Style）を提供しています。
それぞれ機能に応じてレイアウトスタイルを使い分けましょう。

Layout Style

レイアウトスタイル	用途
List	以下の用途に当てはまらない場合はリストを使うべきかも
Gallery	写真とか動画を扱うアプリに最適？
Table	何に使うんだろ
Map	緯度経度、地図が関連するアプリなんかに最適？
Item	ゲーミフィケーションを組み込んだアプリなんかに最適？
Number	ゲームのスコアを表示したり、何かの距離とか、数値に関することに使えそう？

まあ、使ってみないとわからないので使ってみましょう。

ギャラリーを使って遊んでみる

今回はギャラリーを使います。
もし、既にご自身で開発されているサービスに組み込まれている画像投稿機能などがあれば、この記事を読み、実践することでその機能を簡単に拡張させることができると思います。

基本設定などの前置きはこちらを参考にしていただくとして、本記事では要所の設定方法、ソースコードに関して進めたいと思います。

※サンプルのソースは全て Ruby + Sinatra です。PaaS は Heroku を使ってます。

アプリ設定

まず、アプリ画面からアプリを作成し、基本設定を済ませます。
※サンドボックスモードなど各々で注意してください。

次に Open Graph の設定をします。
アクション、オブジェクトをそれぞれ take、picture と入力し、次の画面へ。
アクション＋オブジェクト入力

アグリゲーションの設定では Layout Style で Gallery を選択してください。

これでアプリ設定は完了です。

Open Graph protocol の設定

さきほど登録したアクション、オブジェクトを Open Graph protocol (OGP) に適切に設定します。
この設定は Apps > 該当アプリ > Open Graph > Dashboard の Get Code からコピペするのがいいでしょう。
Open Graph protocol Get Code

ただ、今回はせっかく Ruby + Sinatra を使っているので Haml 形式に置き換えます。
諸々判別用に @id とか使っていますが、気にしないでください。

!!! 5
%html
  %head(prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# fbapi-testapp: http://ogp.me/ns/fb/fbapi-testapp#")
    %title="Sample Picture: #{@id}"
    %meta(property="fb:app_id" content="{APP_ID}")
    %meta(property="og:type"   content="{NAMESPACE}:{OBJECT}")
    %meta(property="og:url"    content="http://fbapi-testapp.herokuapp.com/picture/#{@id}")
    %meta(property="og:title"  content="Sample Picture: #{@id}")
    %meta(property="og:image"  content="{IMAGE_URL}")
  %body
    %p
      Picture ID,
      = @id

認証

認証処理にアプリ情報をセットしましょう。

アクションを投稿するからといって変わった認証をすることはありません。
スコープに publish_actions を渡せば大丈夫です。ご自由に認証処理を書いてください。
※以下のコードはかなりザックリしてますので参考程度に。

enable :sessions

$FACEBOOK_APP_ID = 'app_id'
$FACEBOOK_SECRET = 'secret'

use OmniAuth::Builder do
  provider :facebook, $FACEBOOK_APP_ID, $FACEBOOK_SECRET, {:scope => 'publish_actions'}
end

get '/auth/:provider/callback' do
  @auth = request.env['omniauth.auth']
  session[:access_token] = @auth['credentials']['token']
  haml :callback, :layout => true
end

アクション投稿

ここでは OAuth 認証が完了したあとを想定しています。

先程、設定したアクション、オブジェクトで投稿してみたいと思います。
※Graph API の操作には RestGraph を利用させていただきました。

rg = RestGraph.new(
  :access_token => session[:access_token],
  :app_id => $FACEBOOK_APP_ID,
  :secret => $FACEBOOK_SECRET
)
@response = rg.post("me/fbapi-testapp:take",
  :picture => "http://fbapi-testapp.herokuapp.com/picture/1"
)

何事もなければこれでアクションが投稿できるはずです。
上のコードの post に渡している内容を解説すると、fbapi-testapp はアプリの名前空間、take は登録したアクション、picture も登録したオブジェクトです。

@response = rg.post("me/アプリ名前空間:アクション名",
  :オブジェクト名 => "先程、OGPの記述をしたHTMLページのURL"
)

実際にはこのように表示されます。
投稿したアカウントのタイムラインへアクセスして確認しましょう。
Recent Activity

アグリゲーションの確認

無事アクションが投稿できたら、次はアグリゲーションを確認します。

アクションを何回か投稿するとより分かりやすくなり、それっぽくなるので違う写真を用いて投稿してみるといいでしょう。
アクションを投稿したアカウントのタイムラインにアクセスしてみましょう。

このように表示されていれば成功です。
Aggregations

最後に

今回はレイアウトスタイルにギャラリーを使用しましたが、他のスタイルも使い方はほぼ同じです。
またギャラリーではほぼ出番がないので触れていないのですが、アグリゲーションの並び替えはカスタマイズすることもできます。

次回はまた別のスタイルを試して記事を書きます。
そこで並び替えのカスタマイズについても触れられればと思います。

最後まで読んでいただきありがとうございました！

をぶろぐ

ARTICLE