なる自習室こもりますこの広告は、90日以上更新していないブログに表示しています。.JavaScript前置き前回はアプリを登録してクライアントIDとクライアントキーをもらい、node-foursquareのtestアプリでそれを使ってAPIにアクセスするところまでやりました。自習室まえおきこちらの記事に触発されて、4sqAPIを叩いてみたくなりました。すばらしいツールなのでぜひ試してみて下さい。同梱のtestアプリは、APIを使ってちゃんと結果を受け取れたかだけコンソールで確認して終わりだったので、取得したデータをブラウザ上でビジュアライズするなどしたいです。今回はその準備をします。今回のプロジェクトはこちらにアップしました。GitHub今回やらないことログインやセッション管理このアプリケーションをサービスとして公開して複数名に使っていただくことは想定していません。セッションを使ってログイン状態やaccessTokenを管理するようなことまでは実装しません。すると、必要なモジュールがインストールされます。(3.5系)ejsnode-foursquareがインストールされます。3.5系にしたのは、勉強の都合でまだ4系の情報があまりネット上になかったのが理由です。それをモジュールとして起動時にアプリがロードします。}};各画面の紹介ここから先は、上記コードが見られることを前提に進めていきます。機能ログイン前画面:初回アクセス時の画面。GitHub1.ログイン画面ボタンを押すと、OAuthを始めます。呼ばれるコードはこちら。OAuthが始まります。GitHub2.OAuth画面これは4sqAPIが渡してくれる画面です。「許可する」を押すと、4sqapiからnode.jsのアプリにaccessTokenが返されます。リダイレクトするよう指定して、呼ばれるのがこの関数になります。得られるaccessTokenをコールバック関数内で保存します。本来はセッションと紐づけてDBに保存したりするべきですが、ここではローカルでいつ消えるか分からない変数にとりあえず入れておきます。});};OAuthのまとめここまでの流れをシーケンス図でまとめると以下の様になります。試しにAPIを呼んでみる上の二つのリンクを押したときに呼ばれるコードは以下の様な物です。ブラウザはjsonの文字列を生で受け取るので、上の絵のようにそのままはき出しています。データをオブジェクトとして受け取った後、クライアント側で活用4や5では、うけとったJSONをブラウザがそのまま表示して終わりです。6では、クライアント側でjQueryがJSONをオブジェクトとして受け取って、その後インタラクティブに活用することを想定します。いってもココでは練習程度と言うことでたいしたことはせず、ブラウザ側でDOMの中にjsonの文字列を流し込みます。実際は、GoogleMapAPIを使って地図の中にピンを落としたり、ユーザ操作に合わせてインタラクティブなビジュアリゼーションを行ったりしたいです。リンクをクリックすると、jsonを返してくれることを期待したGETリクエストを発行する。上のAPIを使う流れはこんな感じ。さいごにこれで、node.jsがクライアントブラウザとfoursquareを仲介して、いろいろやる土台が整いました。APIを使って何をするのか、と言うところが宙ぶらりんです。用いたウェブアプリのセッション管理について勉強予定です。同一ソリューション内ライブラリ参照と、ライブラリプロジェクトへの静的リンクライブラリのリンクの仕方。3はてなブログをはじめよう!AMANEさんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。