Facebook Graph APIで自分の投稿をJSONで取得するためのアクセストークンを発行する旅

この記事は「Facebookの自分の投稿をJSONで取得し、自分のブログやウェブアプリケーションで利用する」ことを目的としている人向けに書いている。執筆時のGraph APIのバージョンはv2.12だ。

Facebookページの投稿を取得する方法はググればいくらでも出てくるが、自分の投稿(ユーザーの投稿)を取得するとなると微妙にググラビリティが低い。それらの記事はスクリーンショットが不足していたり、API処理の方に文字量が割かれていたりで要領を得ないことが多い。

オレはもっと 根本的な始め方が知りたいのだ。なのでオレがわかりやすく書く。画像が大量にあるので漏らさず刮目せよ。


Facebook Graph APIを利用するとなるとFacebookアプリがいるんでしょう?となりがちだが実際そうである。

アプリを作らなくても表題のことを実現することは一応できる。しかし アクセストークンの有効期限が1時間程度しかないため、実用的でない。長期間有効なアクセストークンを発行するためにはFacebookアプリを作成するしかないというわけだ。「Facebookアプリ」とかいう時点でハードルが高く感じるが、試した結果そんなにちゃんとしなくてもよさそうだった。

まず開発者向けFacebookに登録が必要だ。 developers.facebook.comに開発者登録した(もしくはしたい)アカウントでログインし、ヘッダーメニューの「スタートガイド」から始める。

「スタートガイド」でスタートするのはなんか変な気がする。普通に「スタート」でいいのでは。

ダイアログが出るのでアカウントを目視確認しつつ次へ。人によっては指差し確認もした方がよい。

ログインしているユーザーアイコンが出るが、ユーザー名は出ないのは不親切というほかない。

アプリ名は表示用でしかないのでわかりやすいものをつけよう。注釈の通り後からいくらでも変えられる。

名前をつけるフェーズで「今または後で変更」という説明はちょっと変に思える。

次はCAPTCHAだ。この手のやつは大文字と小文字を区別するのかしないのかよくわからない。でもFacebookのCAPTCHAは文字も大きくて判別しやすいのでまだ楽な方だ。

「ボックスにテキストを入力してください」と「以下にコードを入力してください」は説明文の重複だろうか。「画像に書かれたアルファベットをテキストフィールドに入力してください」とかでいいのにな。

役割を選ぶ。自分に一番当てはまるものと言っても、列挙されているラベルが何をするのか詳細が書かれていないと選べないはずではないだろうか? 僕は開発者だが、何の開発者であるかは問われないなら、そもそも聞かれる意味もわからない。こういうとこだぞ、ユーザーアンケート。

こんなもの今答えなくてもいいじゃないか。アプリ作成自体のフローに不要なものはスキップできるようにしてほしい。

クダを巻いているうちにアプリ作成は一旦完了。

ようこそ的な画面はページ遷移を自動でしていい気がする。このままこのダイアログの右上にある✖️ボタンを押したらまたアプリ作成から始まるのか?全く予想がつかない。結局「Add Your First Product」のボタンを押すほかない。ていうか急にProductという言葉が出てきたがそれは何だ?アプリのこととは違うのか?(違う)

開発者登録済みのアカウントなら、ログイン後はヘッダー右端の「マイアプリ」とか「アプリを作成」とかいうボタンをクリックしよう。既存アプリがある人はプルダウンになるので、そこから「新しいアプリを追加」をクリックする。

Facebookアプリなのか マイアプリなのか アプリなのか、一体どれを信じればいいのか謎だが、developers.facebook.comにいる間は「Facebookアプリ=マイアプリ=アプリ」と思ってよい。

マイアプリというラベルでのプルダウンに開発者設定やログアウトのリンクがあるのは解せないが、今は見ないでおこう。

新しいアプリ作成ダイアログは特に困ることはないだろう。

「新しいアプリを追加」のフローだと、表示名を後から変更可能な旨が書いていない。不親切。 CAPTCHA is めんどい。

CAPTCHAを抜けるとアプリが追加され、作成したアプリのダッシュボードへページ遷移する。

ダッシュボードのヘッダーの「ツール」ドロップダウンから「グラフAPIエクスプローラー」をクリック。Graph APIは日本語表記だとグラフAPIなのだなぁ。こういうのはどの言語でもアルファベット表記に統一していいと思う。

「ツール」はマウスホバーでドロップダウンが表示されるが、それ自体もリンクになっている。どっちかだけでいいんじゃないだろうか……。

グラフAPIエクスプローラーにページ遷移後、コンテンツエリア右上側の「Graph API Explorer」が選択されたプルダウンから先ほど追加したアプリを選択する。こっちはアルファベットなんだな……。

こういったUIがselect要素的なプルダウンだと気づくのは結構難しい気がするのだけど普通の人はすぐわかるのだろうか。プルダウンならば、デフォルトで何かが選択済みな状態にしない方がいい。そうしてしまうと選択済みのラベルを出さなくてはならなくなり、他に選択可能な項目があることを予見させづらくなってしまう気がするのだ。

先ほど追加したアプリ名を選択したら、その下のプルダウンでさらに「ユーザーアクセストークンを取得」を選択。

またこの「項目が選択済みになってそれがラベルになってしまっているプルダウン」だ。せめてUAスタイルのままのselect要素であったなら、多少理解も早いのだろうに。

選択するとダイアログが出る。今回は自分の投稿が欲しいので「user_posts」にチェックを入れて「アクセストークンを取得」ボタンをクリック。トークンハイジャック時に余計なことをされない様に必要最低限のものを選択しよう。過ぎたるは及ばざるが如し。しかし過ぎたい時もあるだろうから、そこは任せる。

アクセス許可をチェックボックスで選択するタイプのダイアログ。どれで何が取得できるのか一切わからないので手探り感が半端ない。予測はできるが、試すまで確証を得られないのはダメなきがする。

「アクセストークンを取得」ボタンをクリックすると認証許可的なダイアログが出るので ログインする。

「ログインレビューの申請」というアラートが出ているが無視してよい。

だいたい、なんで「ログイン」なんだろう。ログインならさっきしたじゃねーか。ここは「ログインしてアクセスを許可する」的なラベルの方がいいと思う。

認証許可するとアクセストークンが発行されている。 基本的にこのトークンは人に知られない方がいい。スクリーンショットではあえて掲載しているが、フハハハ!そのまさかだ!(このトークンはもう失効している)

「アクセストークンが発行されました」などのテキストが表示されてもいいように思う。注意していないとわからない。

めでたくトークンが発行されたので、試しにgetに渡す値にme?fields=postsと入れて送信ボタンを押してみよう。すると自分の投稿がズララっと出てきたであろう。 スクリーンショットの絵面はバグっているように見えるが、僕のFacebookアカウントにおいては完全に正常なので問題ない

左カラムの「フィールドを検索」でいろんな情報を追加できるので楽しい。

さて、これで大体OKに見えるが、この アクセストークンの有効期限を延長しなければならない。アプリを作成してもユーザーアクセストークンのデフォルト有効期限は1時間なのだ。もっと頑張れよ。そういうとこだぞ。

アクセストークンが表示されているエリアの先頭にある丸iアイコンをクリックすると、アクセストークン情報というポップアップが表示される。ここがクリックできることに気づくまで5万年かかった。

ちなみにヘッダーメニューの「ツール」プルダウンにある「アクセストークンツール」からも目的のページへ行ける。

ポップアップから遷移すると、アクセストークンツールのページで当該のトークンがデバッグされている状態になっているだろう。これがトークンの詳細画面となる。

有効期限が約1時間以内となっていることがわかる。

コンテンツエリア左下の「アクセストークンを延長」というボタンをクリックすると、有効期限が長くなった新しいトークンが発行される。気付きにくいが有効期限が1時間のトークンとは異なっているはずだ。

緑色のテキストでページに追加された文字列が「長期アクセストークン」だ。

長期アクセストークンの右側にある「デバッグ」ボタンからさらにアクセストークンの詳細が見られる。有効期限は2ヶ月以内となっているだろう。

長期アクセストークンの詳細で、有効期限が約2ヶ月以内となっているのが確認できる。

以上で作業は終わりである。

トークンの確認は アクセストークンのページからできる。

ここにはアプリごとのトークンが表示される。アプリが持てるトークンはアプリトークン1つとユーザーアクセストークン1つの合計2つだけということになる。

グラフAPIエクスプローラーでユーザーアクセストークンを取得し直すと トークンが変わってしまう。更新すると有効期限が1時間しかないので、 またトークンの延長をしなければならない。前のトークンはアクセストークンのページからはわからなくなってしまう上に、 直ちに失効するわけでもない様だったので注意。

冒頭でも言ったように、アプリ作成なしでも自分の投稿を取得するトークンは発行できる。グラフAPIエクスプローラーのページで、アプリ選択で「Graph API Explorer」にし「てユーザーアクセストークンを取得」すればいい。 この方法では有効期限の 延長ができないので1時間程度しか利用できないトークンしか手に入らない。面倒だがアプリを作成しよう。


ところで、ユーザーアクセストークンは投稿以外にも多くの情報を取得できる。アイコンはもちろん、プロフィール、学歴、職歴、タグ付け、pokeなども取得可能だ。グラフAPIエクスプローラーで送信ボタンを押すと左カラムにパラメータが並ぶ。そこからプルダウンでいろいろ追加できるので試してみると面白い。

パラメータで何を取得できるのか予測はできるが、あまりに値まんまのラベルなのでもうちょっと工夫があっても良さそう。いかにもUIデザインできないエンジニアが作ったような画面だ。

追加した項目がJSONで返ってこなかったら、アクセス許可設定が不足している可能性がある。その場合は「トークンを取得」でアクセス許可の項目を見直すといい。 ただしそれでトークンが変わるのでとにかく注意すべし。また延期の操作が必要になる。

ちゃんとしたFacebookアプリ作成では、アプリを公開するために他にもいろいろやることがあるが、アクセストークンさえ手にはいれば表題のことは実現できるので、アプリの公開までは必要ない。なのでFacebookログインとかAnalyticsを設定とかステータスとかは全て無視していい。

アプリのダッシュボードに移動するといろいろメッセージが出ているが、無視していい。無視していいって楽だよな。


ちなみに、developersの登録を削除したくなった場合は 開発者設定というページの一番のボタンでできる。

アプリのダッシュボードページのヘッダーメニューでは、アイコンのプルダウンの方に「開発者設定」のリンクがある。

ページをスクロールダウンしていき、コンテンツエリアの最後に「開発者アカウントの削除」の項目が現れた。ここはGitHubのようにもっとデンジャーゾーンとして赤くマークされていてもいい気がする。

開発者アカウントを削除する前に作成していたアプリを先に消す必要がある。

先の項目ではアカウントの削除時にまとめてアプリを消せるような感じの説明文だが、「アカウントを削除」ボタンを押してみるとダイアログが出て、アプリが残っていると「アカウントを削除」ボタンがdisabledになっている。つまり先にアプリを消す必要がある、ということになる。何かおかしい。

アプリを消すのは すべてのアプリページから可能だ。アプリのボックスの右上にドロップダウンメニューがあり、そこから消せる。アプリを全て消したら再び「開発者設定」からアカウントを削除すればよい。

ドロップダウンだらけだなぁ。項目が二つくらいならコンポーネントに出しておいてもいいんじゃないだろうか……。

一応書いておくが、Facebookの一般利用のユーザーアカウント自体はここでは消えない。あくまで当該ユーザーアカウントを開発者登録から外す、という処理になる。

アプリを消さずに開発者登録を外す場合は別のアカウントをアプリの管理者に追加しなければならない。アプリのトップページの左サイドに「役割」という項目があり、そこから管理者を追加しよう。

大規模なFacebookアプリになると、ここに様々なアカウントが並ぶのだろう。TKGアイコンが一つだけだと何だか寂しい。


アクセストークンが発行されたらようやくウェブアプリケーションの開発が進められる。

グラフAPIエクスプローラーの「コードを取得」というボタンから、JavaScriptのコードをコピペできる。

SDK利用を前提にしているのでSDK自体の読み込み方や記述は省かれている。SDKのおかげで記述が簡素になっているが、簡素すぎてこれだけだと余計に分かりづらくなってしまっている気がする。

しかしこれはFacebook SDKを利用した場合のコードだ。昨今の非同期なウェブアプリケーションでは扱いづらい。

そこでエンドポイントを次のようにすればSDKなしでも非同期通信できる。 非同期通信ライブラリのAxiosを使うとこう。

import axios from 'axios';

let data;

const graph_api = 'https://graph.facebook.com/v2.12/me';
const param = '?fields=posts';
const token = '&access_token=*********************************************...';

axios.get(graph_api + param + token)
  .then(res => {
    data = res.data;
  })
  .catch(error => {
    console.log(error)
  });

みんな大好きjQuery v3.3.1の$.ajaxを使うとこう。

var data;
var graph_api = 'https://graph.facebook.com/v2.12/me';
var param = '?fields=posts';
var token = '&access_token=*********************************************...';

$.ajax({
  url: graph_api + param + token
  })
  .done(function(res) {
    data = res.data;
  })
  .fail(function(jqXHR, status) {
    console.log(status)
  })
  .always(function(res) {
    console.log(res)
  });

つまり通信するURLにパラメータとアクセストークンを全部くっつけてGETすればいい。

プロダクトで利用する際は、この前に アクセストークンが正しいかチェックした方がいい。 Stack Overflowにエントリがある。日本語で読みたい人は Qiitaのこの記事がわかりやすいと思う。


ようやく旅は終わった。長かった。おかえりなさい。お疲れ様。さぁ、仕事に戻ろう……。