自習室

こもります

FourSquare API を Node.js から使ってみる (後編)

前置き

前回はアプリを登録してクライアントIDとクライアントキーをもらい、node-foursquareのtestアプリでそれを使ってAPIにアクセスするところまでやりました。今回はその続きです。

FourSquare API を Node.js から使ってみる (前編) - 自習室FourSquare API を Node.js から使ってみる (前編) - 自習室

まえおきこちらの記事に触発されて、4sqAPIを叩いてみたくなりました。すばらしいツールなのでぜひ試してみて下さい。今までfoursquareにチェックインした...

続き 4. 自分のアプリを作ってみる

前回試した node-foursqaure 同梱のtestアプリは、APIを使ってちゃんと結果を受け取れたかだけコンソールで確認して終わりだったので、取得したデータをブラウザ上でビジュアライズするなどしたいです。今回はその準備をします。

今回のプロジェクトはこちらにアップしました。

izmhr/node-foursquare-test · GitHubizmhr/node-foursquare-test · GitHub

今回やらないこと

  • ログインやセッション管理
    このアプリケーションをサービスとして公開して複数名に使っていただくことは想定していません。なので、セッションを使ってログイン状態やaccessTokenを管理するようなことまでは実装しません。

  • データを素敵に使うこと
    素敵ビジュアリゼーションやデータの解析・解釈を行うのが本来の目的ですが、今回はAPIを使えるようにすることにとどめます

前準備

プロジェクトを取得する

cloneなりzipでDLなりどうぞ

izmhr/node-foursquare-test · GitHub

モジュールのインストール

npm install すると、必要なモジュールがインストールされます。今回は

がインストールされます。 3.5系にしたのは、勉強の都合でまだ4系の情報があまりネット上になかったのが理由です。

クライアントアプリ情報の準備

前回記事と同様に、APIを叩くために必要な情報をclient.js に記入します。それをモジュールとして起動時にアプリがロードします。

module.exports = {
  'secrets' : {
    'clientId' : 'YOUR_CLIENT_ID',
    'clientSecret' : 'YOUR_CLIENT_SECRET',
    'redirectUrl' : 'http://localhost:3000/callback' // This should also be set in your OAuth profile.
  }
};

各画面の紹介

ここから先は、上記コードが見られることを前提に進めていきます。

機能

  1. ログイン前画面:初回アクセス時の画面。ユーザにOAuthをうながします
  2. ログイン:FourSquareのOAuthを行います
  3. コールバック: FourSquareのOAuth結果(AccessToken)を受け取って、サーバで管理し、ユーザーにはログイン後の画面を表示します
  4. 試しにAPIを呼んでみる(1) OAuthをおこなったユーザ自身の情報を表示します
  5. 試しにAPIを呼んでみる(2) OAuthをおこなったユーザ自身のチェックイン履歴を表示します
  6. 試しにAPIを呼んでみる(3) データをオブジェクトとして受け取った後、クライアント側で活用します

これらをふまえて、ルーティングは以下の様になります

// ~/app.js
app.get('/', routes.index); // 1&3 accessTokenの有無で画面が変わる

// oauth
app.get('/login', routes.login);  // 2. 4sqに対してOAuthの開始を要求する
app.get('/callback', routes.callback);  // 3. OAuthの結果、4sqAPI側から呼ばれる

// testing
app.get('/Users/getUser/self', routes.getUserSelf); // 4.ユーザー情報の取得
app.get('/Users/self/getVenueHistory', routes.getVenueHistorySelf );  // 5&6 チェックイン履歴の取得

node-foursquare-test/app.js at master · izmhr/node-foursquare-test · GitHub

1.ログイン画面

f:id:AMANE:20140517231314p:plain

ボタンを押すと、OAuthを始めます。呼ばれるコードはこちら。foursquare オブジェクトはClientID・リダイレクト先のURLなどを渡して生成するので、foursquare.getAuthClientRedirectUrl() だけでOAuthが始まります。

// routes/index.js
exports.login = function(req, res) {
  res.writeHead(303, { 'location': foursquare.getAuthClientRedirectUrl() });
  res.end();
};

node-foursquare-test/routes/index.js at master · izmhr/node-foursquare-test · GitHub

2.OAuth画面

f:id:AMANE:20140517231431p:plain

これは4sqAPIが渡してくれる画面です。「許可する」を押すと、4sqapiからnode.jsのアプリにaccessTokenが返されます。

3.OAuth成功後コールバック画面

f:id:AMANE:20140517231555p:plain

コンフィグで http://localhost:3000/callback にリダイレクトするよう指定して、呼ばれるのがこの関数になります。得られるaccessTokenをコールバック関数内で保存します。本来はセッションと紐づけてDBに保存したりするべきですが、ここではローカルでいつ消えるか分からない変数にとりあえず入れておきます。

exports.callback = function(req, res){
  foursquare.getAccessToken({
    code: req.query.code
  }, function (error, accessToken) {
    if(error) {
      res.send('An error was thrown: ' + error.message);
    }
    else {
      // Save the accessToken and redirect.
      console.log("get valid access token : " + accessToken);
      savedAccessToken = accessToken;
      res.redirect("/");
    }
  });
};

OAuthのまとめ

ここまでの流れをシーケンス図でまとめると以下の様になります。

f:id:AMANE:20140517232052p:plain

4, 5. 試しにAPIを呼んでみる

f:id:AMANE:20140517232454p:plain

上の二つのリンクを押したときに呼ばれるコードは以下の様な物です。node-foursquareの Users/getUser 命令をつかって、resultとしてjsonを受け取り、更にそれをres.json(result) でブラウザに返します。ブラウザはjsonの文字列を生で受け取るので、上の絵のようにそのままはき出しています。

exports.getVenueHistorySelf = function(req, res) {
  var params = req.query;
  foursquare.Users.getVenueHistory("self", params, savedAccessToken, function(err, result){
    if(err) {
      console.log("getVenueHistory error");
      res.send('getVenueHistory error');
    }
    if(result) {
      res.json(result);
    }
  });
};

node-foursquare-test/routes/index.js at master · izmhr/node-foursquare-test · GitHub

6. データをオブジェクトとして受け取った後、クライアント側で活用

f:id:AMANE:20140517233613p:plain

4や5では、うけとったJSONをブラウザがそのまま表示して終わりです。 6では、クライアント側でjQueryJSONをオブジェクトとして受け取って、その後インタラクティブに活用することを想定します。といってもココでは練習程度と言うことでたいしたことはせず、ブラウザ側でDOMの中にjsonの文字列を流し込みます。実際は、GoogleMapAPIを使って地図の中にピンを落としたり、ユーザ操作に合わせてインタラクティブなビジュアリゼーションを行ったりしたいです。

// views/index.ejs
  <script>
$(function(){
  $("#test").on("click", function(event){
    event.preventDefault();
    // リンクをクリックすると、jsonを返してくれることを期待したGETリクエストを発行する。
    // コールバックで、受け取ったjsonをテキストとしてhtmlの中に書き込む
    $.getJSON("/Users/self/getVenueHistory", function(json){
      $("#testresult").text(JSON.stringify(json, null, "  "));
      console.log(json);
    });
  });  
});
  </script>
<!-- 中略 -->
  <a href="" id="test"><p>get my venues as JSON object (by jQuery)</p></a>

node-foursquare-test/views/index.ejs at master · izmhr/node-foursquare-test · GitHub

Node.jsが仲介してfoursquare API を叩く流れのシーケンス図

上のAPIを使う流れはこんな感じ。

f:id:AMANE:20140517235129p:plain

さいごに

これで、node.jsがクライアントブラウザとfoursquareを仲介して、いろいろやる土台が整いました。

しかし、肝心のFourSquare APIを使って何をするのか、と言うところが宙ぶらりんです。また現状のプロジェクトをそのままどこかのサーバで公開すると、アクセスした人同士がお互いのaccesstokenを利用し合って大混乱状態になります(笑)

というわけで次回は、Node.js と MongoDB を用いたウェブアプリのセッション管理について勉強予定です。