Allied ArchitectsAllied ArchitectsEngineer Blog

今すぐJavascriptだけで始めるFacebookアプリ入門

2013/08/25 JavaScript

こんにちわ、夏になると無性にビアガーデンにいきたくなる高橋です。

今回はJavaScript Test ConsoleというFacebookが提供しているツールを使って
Facebookアプリの開発をサーバ不要、Javascriptだけで手軽に始める方法を記事にしたいと思います。

JavaScript Test Console

https://developers.facebook.com/tools/console/

Facebook developersで提供されているJavaScript Test Consoleというツールを使います。
このツールはテキストボックスにJavascriptのソースを貼付けるだけで簡単に
JavaScript SDKのメソッドを試すことができます。

使い方を簡単に説明します。

JavaScript Test Console

①ソースコード入力フォーム。ここにHTMLとJavascriptのソースを入力します。
②色々と動作するサンプルが用意されており、ここから読み込めます。
③アプリのタイプを選択できます。(外部Webサイト、キャンバス、ページタブ から選択)
④Save Codeとされてますが特にソースが保存されるわけではなさそうです。⑥のログエリアと⑦のHTML描画エリアがクリアされます。
⑤実行ボタン。①で入力した内容が実行されます。
⑥ログエリア。APIのコールバックにLog.info.bind(<タイトル>)を指定するとレスポンスのjsonを整形して表示してくれます。Log.info(<タイトル>, )を実行しても同じです。
⑦HTML描画エリア。①で入力したHTMLはここに描画されます。

サンプルプログラムの仕様

今回実装するサンプルプログラムの仕様をざっくり以下とします。
・インストール状態を判定し、インストールしていない場合はインストールボタンを表示
・インストールしている場合は、チェックイン履歴をAPIで取得し一覧表示する
・チェックインの明細をクリックするとGoogleマップにピン
を立てて表示する

STEP1 インストールボタンの実装

まずはインストール状態を判定します。
インストール状態を判定するメソッドは
FB.getLoginStatus(<コールバック>)
です。

では試しにインストール状態で以下のコードを実行してみましょう。
JavaScript Test Consoleでは

ボタンでインストールできます。

このコードを実行してみると

こんなレスポンスが返ってきました。
response.status != “connected”
の場合にインストールボタンを置けばよさそうです。

では
インストール状態を判定し、インストールしていない場合はインストールボタンを表示
まで実装してみましょう。

インストールさせるメソッドは
FB.login(<コールバック>, <パーミッション>)
です。

実行してみると

こんな感じになります。

STEP2 APIを使ってチェックイン履歴を取得する

次にAPIを使ってチェックイン履歴を取得する処理を見ていきましょう。
チェックインを取得する方法は色々ありますが、今回はGraph APIで
/me/checkins
のように取得します。
http://developers.facebook.com/docs/reference/api/checkin/

JavascriptでGraph APIをコールするには以下のメソッドを使います。
FB.api(<API>, <callback>)

では先ほどのコードに
インストール時にはチェックイン履歴を取得しレスポンスをログに出力する
ように変更を加えてみます。

チェックインを取得するには
user_status
というパーミッションが必要になりますので、
インストールボタンのonclickイベントを合わせて拡張します。

このコードを実行すると

こんなレスポンスが返ってきました。
たとえばチェックインしたスポットの名前を取得するには
こんな感じでアクセスすればよさそうです。

これで残りの仕様も実装できますね。
インストールしている場合は、チェックイン履歴をAPIで取得し一覧表示する
チェックインの明細をクリックするとGoogleマップにピンを立てて表示する

コードはこんな感じになります。

実行してみると

このように動きました。

最後に

いかがでしたでしょうか?
APIがすぐに試せてどういうレスポンスが返ってくるのか確認しながら開発できるので
取り組みやすいのではないでしょうか。
実際はアプリを開発するとなると色々やらないといけない事はありますが
どんな事ができるのか確認したり、学習したりという用途には使えると思います。
Facebookアプリを開発してみたいけど、どこから手を付けていいかわからない
という方はぜひお試しください。

tiger
  • tiger
  • Webエンジニア
  • 最近ではコードを書く機会がめっきり減って来てプログラマー35歳限界説に恐怖しています。 このブログを口実に無理矢理新しい技術に触れていきたいと思っています。

RELATION ENTRY

シェルスクリプトだけでMySQLのクエリ結果をメールで通知する

シェルスクリプトだけでMySQLのクエリ...

2014/10/9 Shell

こんにちは。tigerです。 8月のことになりますが僕がPM的な立ち位置で関わっているGreenSnapという新サービスをリリースいたしました。 今回はそのときに作成したシェルスクリプトを晒しちゃいたいと思います。 はじめに WebサービスにつきものなのがKPIですよね。 KPIは...

続きを読む

Facebook発の新言語HackをHeroku上で動かす

Facebook発の新言語HackをHe...

2014/06/17 PHP

こんにちは。tigerです。 最近ではブログのネタが思いつかず、このブログを引退しようかと本気で考えています。 今回は奇跡的に思いついた「Hack × Heroku」をお送りしたいと思います。 Hackとは http://hacklang.org/ 2014年3月に発表されたFac...

続きを読む

tigerの記事一覧へ

ページTOPへ