読者です 読者をやめる 読者になる 読者になる

自習室

こもります

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

.nodejs .JavaScript

まえおき

こちらの記事に触発されて、4sq API を叩いてみたくなりました。すばらしいツールなのでぜひ試してみて下さい。

今までfoursquareにチェックインした都道府県を塗りつぶしてくれるツールを作ったよ - koogawa blog今までfoursquareにチェックインした都道府県を塗りつぶしてくれるツールを作ったよ - koogawa blog

#foursquareでチェックインした都道府県を塗りつぶしてくれる地図機能欲しい。MapKitでそんな事できるかな— Kosuke Ogawa (...

行動ログをどう使う?

FourSquareを自分も3年続けていて、立派な行動ログとして情報がたまっています。ただ、標準のアプリだと、情報の取りだし方が画一的で少し物足りないです。

また、すべての情報をがっつり取り出してみたいなら、4sq APIをガンガン叩いてすべてを可視化してくれるツールもあります。こちらはこちらで非常に便利。

4sqmap - Foursquare Maps and Statistics4sqmap - Foursquare Maps and Statistics

思い出し方のデザイン

人それぞれ、意味のある「思い出し方」があるように思います。

  • いつ/どこで (プッシュで思い出させる?暇なときぶらーっと見る?スマホで?PCのブラウザで?)
  • なにを (データのフィルタリング、何を思い出したい?)
  • どのように (データの構造化、見るのにかける時間、どんな順番で?)

これらを自分に照らし合わせて自由にデザイン出来ると、4sqに貯め込んだ情報をもっと活かせるのでは、と思います。

最近4sq本体もサービスの方向性を変えようとしていたりして、「チェックイン」という情報をどのように使えるか考えているみたいですね。

米Foursquare、新アプリ「Swarm」を公開 -INTERNET Watch

今回は、自分にとって意味のある思い出し方を実現するための前段として4sqAPIを使えるようになってみます。

やってみる

全体の流れ

  1. アプリ登録をする
  2. APIの叩き方を検討する
  3. node-foursquareのtestをしてみる
  4. 自分でつかってみる

1. アプリ登録をする

Getting Started | Foursquare for DevelopersGetting Started | Foursquare for Developers

ここから始まります。冒頭の "create an app" をクリックすると、自分のアカウントで管理するアプリのビューに行くので、そこで「新しいアプリを作る」を選択します

f:id:AMANE:20140517110754p:plain

  • Download / welcome page url
    ここは最終的にアプリをサービスとしてリリースするならそれなりの紹介ページなどを作って登録すべきでしょうが、今回は練習なので、私はこのブログのアドレスを入れました。

  • Your privacy policy url
    ここにも同様に、このブログのアドレスを入れました

  • Redirect URL(s)
    ここはあとで重要になりますが、とりあえず空欄で大丈夫です。

  • 他にも記入欄がありますが、ここでは空欄でOKです。本記事では、Webブラウザで使うアプリをつくります。

これで「変更を保存する」を押すと、図のようにアプリが登録されます。ここに表示される Client ID と Client secret が重要です。

f:id:AMANE:20140517110805p:plain

2. APIの叩き方を検討する

アプリを登録してはじめのページ Getting Started | Foursquare for Developers に戻ってくると、どんなことがしたいですか? と聞かれています。自分のチェックイン履歴にまつわる情報が欲しいので、右上の "Connect With Foursquare Users" を選びました。

これから作るアプリケーションを介して、ユーザー(たとえば自分)の情報にアクセスするには、アプリに対して「FourSquare上の私のデータにアクセスして良いですよ」という許可を与えます。これをやるために、最近ではTwitterFacebookもOAuth2.0を基本とした似たような仕組みを使っています。

OAuth 2.0でWebサービスの利用方法はどう変わるか(1/3)- @ITOAuth 2.0でWebサービスの利用方法はどう変わるか(1/3)- @IT

この記事ではOAuthの詳細は省略します。上記ページなどを参考になさって下さい。

FourSquareのページに戻ります。ページの真ん中あたりの client libraries をクリックすると、言語やプラットフォームごとに4sqAPIが使いやすくなるように有志で作って下さっているライブラリへのリンク集があります。

最近js + ウェブアプリ開発強化中なので、本記事ではnodeでやることにします。

二つのライブラリ

前者は、Venuesを取得するための非常にシンプルなmoduleで、ユーザ認証などもしないものです。後者はデータ取得の面についてはほぼフル機能で、contributerも16名いますのでかなり充実していそうです。こちらを使うことにします。

3.1 node-foursquare の test のセットアップ

ここからはnode-foursquareのREADMEに従って進めていきます。nodeそのもののインストールは飛ばします。npm install node-foursquare してmoduleを取得してきます。まずはざっと使えることを確認するTestアプリを配布してくださっているので、それを動かしてみます。

clintandrewhall/node-foursquare · GitHub

f:id:AMANE:20140517114643p:plain

アプリケーションの情報をモジュール化して持たせます。 node-foursquare/test/config.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.
  }
};

このconfigではFourSquareのOAuthをしたあとに戻ってくるアドレスを http://localhost:3000/callback としていますので、自分のアプリケーション登録もそのようにしておきます。

f:id:AMANE:20140517115301p:plain

ここまで指定したら、

# node-modules/node-foursquare にて
node test

とすると、テストアプリが立ち上がります。

3.2 node-foursquare test 動作確認

この状態でブラウザでhttp://localhost:3000 にアクセスすると、FourSquareのOAuth画面に飛ばされます。ここで自分の4sqアカウントでログインして許可すると、testアプリが自分の情報にアクセスすることを許可したことになります。

f:id:AMANE:20140517120045p:plain

許可すると、ブラウザの画面は適当な文字列を受け取って表示します。

f:id:AMANE:20140517121048p:plain

このとき、Node.js を実行しているコンソールを見ると、test.jsが4sqAPIを用いて実行した結果が出力されています。赤字のエラーも混ざっていますが読んでみると、引数が self になっているAPIコールは成功していることが分かります。

テストのコードを読んでみると、すべてのAPIコールを順番にかけていって、ちゃんと返事が返ってきたらOK、エラーだったらERRORと出力するだけのアプリのようです。

f:id:AMANE:20140517121533p:plain

これでtestは完了です。

次回へ続く

少し長くなってしまったので、expressを使って自分でウェブアプリを作るところは次回に持ち越します。