このページの本文へ

サンプルで学ぶOpen Graphの設定とアプリへの実装

2012年08月17日 11時00分更新

萩原伸悟/jAction

  • この記事をはてなブックマークに追加
本文印刷
Facebookapp

 FacebookのGraph APIとJavaScriptライブラリー「jAction」を使ったFacebookモバイルアプリの作り方を解説する本連載。今回はFacebookアプリの新機能「Open Graph」の設定方法を紹介し、実際に本連載で作成した「ソーシャルブロック崩し」ゲームに実装する方法を解説します。

Open Graphとは

 FacebookのOpen Graphとは、「映画を観た」「音楽を聴いた」「買い物をした」など、ユーザーのさまざまな活動(アクティビティ)を、Facebookのタイムライン上に共有する機能です。Open Graphで共有された活動はFacebookのSocial Graphに蓄積されていくので、アプリ開発者は「いいね!」と同様にFacebookのインサイトを使って、実際にアプリを使っているアクティブなユーザーを解析できます(詳しくは、前回の記事を参照してください)。

 今回は、実際に自作のFacebookアプリにOpen Graphを設定してみましょう。本記事では、Facebookモバイルアプリの基本的な設定、およびアプリの開発は完了している前提で解説しますので、Facebookモバイルアプリの設定は以下の記事を参照ください。

Facebookの開発者登録とモバイルアプリの作成準備
http://ascii.jp/elem/000/000/681/681161/

 ログインした状態でFacebook開発者ページへ移動し、画面上部のメニューバーの「アプリ」を選択します。その後、アプリの一覧から対象のアプリを選択してください。

Facebook開発ページ
Facebook開発ページ

1.認証ダイアログを設定する

 Open Graphを有効にするには、認証ダイアログで「publish_actions」のパーミッションを設定する必要があります。アプリを選択した状態で「設定を編集」をクリックし、メニューから「認証ダイアログ」を選択します。

認証ダイアログ
認証ダイアログ

 「Authenticated Referrals」の「User & Friend Permissions」に「publish_actions」と入力してください。

Authenticated Referrals
Authenticated Referrals

 これで認証ダイアログの設定は完了です。

2.Actionを設定する

 Open Graphに必要な要素として、「Action」と「Object」があります。行動を表す動詞部分を「Action」と呼び、対象となるモノを表す名詞部分(目的語)を「Object」と呼びます(参考記事)。

Open Graph
Open Graph

 今回は、Actionに「Play」、Objectに「game」を登録してみましょう。アプリの設定画面から「オープングラフ」→「Getting Started」を選択し、ActionとObjectを入力して、「スタート」をクリックします。

アプリの設定>Open Graph>Getting Started
アプリの設定>Open Graph>Getting Started

 すると、「Action」の設定画面が表示されます。設定項目を上から順番に解説します。

Define Action Type

 Actionの名前とプロパティを設定する項目です。

Define Action Type
Define Action Type
名前
Actionの名前です。
プロパティ
Action投稿時に指定できるプロパティです。新たなプロパティも設定できます。

Configure Story Text

 Actionの時制を設定します。Actionの現在/過去時制を両方使用するかどうかや、Actionの前置詞を設定できます。

Configure Story Text
Configure Story Text

Configure Story Attachment

 Actionがフィードさせるときのレイアウトや、表示される説明文を設定できます。

Configure Story Attachment
Configure Story Attachment
Attachment Layout
Actionがフィードされるときのレイアウトを以下から選択します。

・Item:
左側に画像、右側にテキストを表示する一般的なレイアウトです。

Open GraphのItem
Open GraphのItem

・Number:
数字と単位を表示できます。ポイントを使用するゲームアプリなどに適しています。

Open GraphのNumber
Open GraphのNumber

・Map:
地図とともに表示できます。位置情報を使ったアプリに適しています。

Open GraphのMap
Open GraphのMap

プレビュー

 ここまでの設定内容をもとにしたプレビューが表示されます。下にある「詳細設定」から、使用頻度が高い項目をピックアップして解説します。

Graph API URL
Graph APIでActionを呼び出すときのURLを設定します。
Unique Action
このActionを別のObjectにも所属させるかどうかを設定します。
Linked Action
Action Linksを設定します。Action Linksを設定すると、フィード上のActionの投稿から遷移せず、直接Actionが取られるようになります。
Action Link Preview
Action Linksがフィード上でどのように表示されるか確認できます。
Action Link URL
Action Linksのエンドポイントを設定します。


 これらのActionに関する設定はデフォルトの状態でも構いません。今回は何も入力せずに一番下の「Save changes and Next」を選択してください。

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く