前回の記事 からだいぶ経ってしまいました…。前回はアクション、オブジェクトを使って遊びました。
今回は Aggregation（アグリゲーション） を使って遊んでみましょう！
アグリゲーションでどんなことができるのか
ざっくりこんなことができます。
※ Facebook で自分や友だちのタイムラインをみるとたまにこういうのありますよね
表示方法の種類（レイアウトスタイル）
アグリゲーションとは集合・集計であり、Facebook Open Graph では全部で 6 種類のアグリゲーションの表示方法（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 からコピペするのがいいでしょう。
ただ、今回はせっかく 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"
)
実際にはこのように表示されます。
投稿したアカウントのタイムラインへアクセスして確認しましょう。
アグリゲーションの確認
無事アクションが投稿できたら、次はアグリゲーションを確認します。
アクションを何回か投稿するとより分かりやすくなり、それっぽくなるので違う写真を用いて投稿してみるといいでしょう。
アクションを投稿したアカウントのタイムラインにアクセスしてみましょう。
このように表示されていれば成功です。
以上。 - 元記事