こんにちわ、夏になると無性にビアガーデンにいきたくなる高橋です。
今回はJavaScript Test ConsoleというFacebookが提供しているツールを使って
Facebookアプリの開発をサーバ不要、Javascriptだけで手軽に始める方法を記事にしたいと思います。
JavaScript Test Console
https://developers.facebook.com/tools/console/
Facebook developersで提供されているJavaScript Test Consoleというツールを使います。
このツールはテキストボックスにJavascriptのソースを貼付けるだけで簡単に
JavaScript SDKのメソッドを試すことができます。
使い方を簡単に説明します。
①ソースコード入力フォーム。ここにHTMLとJavascriptのソースを入力します。
②色々と動作するサンプルが用意されており、ここから読み込めます。
③アプリのタイプを選択できます。（外部Webサイト、キャンバス、ページタブ から選択）
④Save Codeとされてますが特にソースが保存されるわけではなさそうです。⑥のログエリアと⑦のHTML描画エリアがクリアされます。
⑤実行ボタン。①で入力した内容が実行されます。
⑥ログエリア。APIのコールバックにLog.info.bind(<タイトル>)を指定するとレスポンスのjsonを整形して表示してくれます。Log.info(<タイトル>, )を実行しても同じです。
⑦HTML描画エリア。①で入力したHTMLはここに描画されます。
サンプルプログラムの仕様
今回実装するサンプルプログラムの仕様をざっくり以下とします。
・インストール状態を判定し、インストールしていない場合はインストールボタンを表示
・インストールしている場合は、チェックイン履歴をAPIで取得し一覧表示する
・チェックインの明細をクリックするとGoogleマップにピンを立てて表示する
STEP1 インストールボタンの実装
まずはインストール状態を判定します。
インストール状態を判定するメソッドは
FB.getLoginStatus(＜コールバック＞)
です。
では試しにインストール状態で以下のコードを実行してみましょう。
JavaScript Test Consoleでは
ボタンでインストールできます。
|
1 2 3 |
<script type="text/javascript">// <![CDATA[ FB.getLoginStatus(Log.info.bind('FB.getLoginStatusのレスポンス')); // ]]></script> |
このコードを実行してみると
|
1 2 3 4 5 6 7 8 9 |
{ "authResponse": { "accessToken": "CAAAAKvQdWksBAFarIFXDM2U2Cr9...", "userID": "1765100216", "expiresIn": 4076, "signedRequest": "Olp9NSfbsJXK2sZXhAqySbXfhIG1L..." }, "status": "connected" } |
こんなレスポンスが返ってきました。
response.status != “connected”
の場合にインストールボタンを置けばよさそうです。
では
インストール状態を判定し、インストールしていない場合はインストールボタンを表示
まで実装してみましょう。
インストールさせるメソッドは
FB.login(<コールバック>, <パーミッション>)
です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!-- 非インストール時のコンテンツ --> <div id="content_not_authorized" style="display: none; text-align: center;"><button id="btn_install">インストールしてスタート！</button></div> <!-- インストール時のコンテンツ --> <div id="content_connected" style="display: none;">インストール時のコンテンツ</div> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> <script type="text/javascript"> //インストール状態を判定して表示を切り替える function switchContent(response){ if(response.status == "connected"){ //インストール時の処理 $("#content_not_authorized").hide(); $("#content_connected").show(); }else{ //非インストール時の処理 $("#content_not_authorized").show(); $("#content_connected").hide(); } } //インストールボタンのonclickイベント $('#btn_install').click(function(){ FB.login(switchContent); }); //インストール状態を取得 //switchContent()をcallback FB.getLoginStatus(switchContent); </script> |
実行してみると
こんな感じになります。
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イベントを合わせて拡張します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!-- 非インストール時のコンテンツ --> <div id="content_not_authorized" style="display: none; text-align: center;"><button id="btn_install">インストールしてスタート！</button></div> <!-- インストール時のコンテンツ --> <div id="content_connected" style="display: none;">インストール時のコンテンツ</div> <pre><script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> <script type="text/javascript"> //インストール状態を判定して表示を切り替える function switchContent(response){ if(response.status == "connected"){ //インストール時の処理 $("#content_not_authorized").hide(); $("#content_connected").show(); //APIを使い、チェックイン履歴を取得 FB.api('/me/checkins', Log.info.bind('APIのレスポンス')); }else{ //非インストール時の処理 $("#content_not_authorized").show(); $("#content_connected").hide(); } } //インストールボタンのonclickイベント $('#btn_install').click(function(){ //switchContent()をcallback、user_statusパーミッションを取得 FB.login(switchContent, {scope: 'user_status'}); }); //インストール状態を取得 //switchContent()をcallback FB.getLoginStatus(switchContent); </script> |
このコードを実行すると
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
{ "data": [ { "id": "3082425957357", "from": { "name": "Akira Takahashi", "id": "1765100216" }, "message": "危うく会社のセキュリティカードをスイカ代わりに使うところだった。", "place": { "id": "144699755567092", "name": "恵比寿駅", "location": { "street": "", "city": "Shibuya-ku", "state": "Tokyo", "country": "Japan", "zip": "", "latitude": 35.646888708075, "longitude": 139.7098624626 } }, "application": { "name": "Facebook for iPhone", "namespace": "fbiphone", "id": "6628568379" }, "created_time": "2013-06-20T13:48:03+0000", "likes": { "data": [ {...} ], "paging": { "cursors": { "after": "MTAwMDAxOTExMTYyMzg3", "before": "MTAwMDAzMDIzNDEyMzI1" } } }, "comments": { "data": [ {...} ], "paging": { "cursors": { "after": "Ng==", "before": "MQ==" } } } }, { "id": "2681510934732", "from": { "name": "Akira Takahashi", "id": "1765100216" }, "message": "Facebook Nightに来ております。今日は弊社役員が登壇します！", "place": { "id": "194622313898149", "name": "株式会社サイバード", "location": { "street": "", "city": "Tokyo", "state": "Tokyo", "country": "Japan", "zip": "", "latitude": 35.650208308492, "longitude": 139.70281482605 } }, "application": { "name": "Facebook for iPad", "namespace": "fbipad_", "id": "173847642670370" }, "created_time": "2013-01-30T09:04:53+0000", "likes": { "data": [ {...} ], "paging": { "cursors": { "after": "MTAwMDAxMjk3MzI5ODcz", "before": "MTAwMDAzMDIzNDEyMzI1" } } } }, ... |
こんなレスポンスが返ってきました。
たとえばチェックインしたスポットの名前を取得するには
こんな感じでアクセスすればよさそうです。
|
1 2 3 |
for(i=0; i<response.data.length; i++){ alert(response.data[i].place.name); } |
これで残りの仕様も実装できますね。
インストールしている場合は、チェックイン履歴をAPIで取得し一覧表示する
チェックインの明細をクリックするとGoogleマップにピンを立てて表示する
コードはこんな感じになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!-- 非インストール時のコンテンツ --> <div id="content_not_authorized" style="display: none; text-align: center;"><button id="btn_install">インストールしてスタート！</button></div> <!-- インストール時のコンテンツ --> <div id="content_connected" style="display: none;"> <div style="float: left; width: 350px;"><iframe id="map" style="width: 350px; height: 350px;" src="http://maps.google.co.jp/maps?output=embed" height="240" width="320"></iframe></div> <ul id="checkin_list" style="float: left; width: 300px; height: 350px; overflow-x: scroll;"></ul> </div> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> <script type="text/javascript"> //インストール状態を判定して表示を切り替える function switchContent(response){ if(response.status == "connected"){ //インストール時の処理 $("#content_not_authorized").hide(); $("#content_connected").show(); //APIを使い、チェックイン履歴を取得 FB.api('/me/checkins', function(response){ var res = response; for(i=0; i<response.data.length; i++){ $("#checkin_list").append(" <li id='place_" + i + "' latitude='" + response.data[i].place.location.latitude + "' longitude='" + response.data[i].place.location.longitude + "' >" + response.data[i].place.name + "</li> "); $("#place_" + i).click(function(){ $("#map").attr("src", "http://maps.google.co.jp/maps?q=" + $(this).text() + "@" + $(this).attr("latitude") + "," + $(this).attr("longitude") + "&output=embed"); }); } }); }else{ //非インストール時の処理 $("#content_not_authorized").show(); $("#content_connected").hide(); } } //インストールボタンのonclickイベント $('#btn_install').click(function(){ FB.login(switchContent, {scope: 'user_status'}); }); //インストール状態を取得 //switchContent()をcallback FB.getLoginStatus(switchContent); </script> |
実行してみると
このように動きました。
最後に
いかがでしたでしょうか？
APIがすぐに試せてどういうレスポンスが返ってくるのか確認しながら開発できるので
取り組みやすいのではないでしょうか。
実際はアプリを開発するとなると色々やらないといけない事はありますが
どんな事ができるのか確認したり、学習したりという用途には使えると思います。
Facebookアプリを開発してみたいけど、どこから手を付けていいかわからない
という方はぜひお試しください。
最近ではコードを書く機会がめっきり減って来てプログラマー35歳限界説に恐怖しています。 このブログを口実に無理矢理新しい技術に触れていきたいと思っています。
