|
|---|
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開発ページ
1.認証ダイアログを設定する
Open Graphを有効にするには、認証ダイアログで「publish_actions」のパーミッションを設定する必要があります。アプリを選択した状態で「設定を編集」をクリックし、メニューから「認証ダイアログ」を選択します。
認証ダイアログ
「Authenticated Referrals」の「User & Friend Permissions」に「publish_actions」と入力してください。
Authenticated Referrals
これで認証ダイアログの設定は完了です。
2.Actionを設定する
Open Graphに必要な要素として、「Action」と「Object」があります。行動を表す動詞部分を「Action」と呼び、対象となるモノを表す名詞部分（目的語）を「Object」と呼びます（参考記事）。
Open Graph
今回は、Actionに「Play」、Objectに「game」を登録してみましょう。アプリの設定画面から「オープングラフ」→「Getting Started」を選択し、ActionとObjectを入力して、「スタート」をクリックします。
アプリの設定＞Open Graph>Getting Started
すると、「Action」の設定画面が表示されます。設定項目を上から順番に解説します。
Define Action Type
Actionの名前とプロパティを設定する項目です。
Define Action Type
- 名前
- Actionの名前です。
- プロパティ
- Action投稿時に指定できるプロパティです。新たなプロパティも設定できます。
Configure Story Text
Actionの時制を設定します。Actionの現在/過去時制を両方使用するかどうかや、Actionの前置詞を設定できます。
Configure Story Text
Configure Story Attachment
Actionがフィードさせるときのレイアウトや、表示される説明文を設定できます。
Configure Story Attachment
- Attachment Layout
- Actionがフィードされるときのレイアウトを以下から選択します。
・Item：
左側に画像、右側にテキストを表示する一般的なレイアウトです。
Open GraphのItem
・Number：
数字と単位を表示できます。ポイントを使用するゲームアプリなどに適しています。
Open GraphのNumber
・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」を選択してください。
