TweetDeck人気のTwitterクライアントTweetDeckにFoursquareのチェックイン履歴を表示してみました。きっかけなんでこんなことやってるのかというと下記ブログでFoursquareのAPIの存在を知り、せっかくなので自分もやってみたかったのです。blog割りとTwitter廃人のため、オリジナルのWebアプリを作るよりはよく使うTweetDeckのカラムに友人や自分のチェックイン情報が流れてきたら面白いんじゃね?と思ったのがきっかけです。最初にネタバレするとこれはできませんでした(え)。拡張を使ってそこそこ時間がかかったので記事にします。Extensionsを使ってHTMLの改ざんを行います。上の画像で分かる通りカラムを真似てFoursquareのチェックイン情報をアイテムとして表示しています。ExtensionsはChrome拡張のことでHTMLとJavascriptの知識があれば簡単に作れる便利なものです。Extensionsを公開しました。APITwitterなどのOAuthによるアプリを作ったことがある人はあまり苦労しないと思います。IDなどを生成しましょう。https://ja.foursquare.com/developers/register次にこのアプリを使うユーザーに権限を委譲してもらいアクセストークンを生成してもらいます。Flowの1と2を実行しましょう。Connectingアクセストークンができたら試しに権限を委譲してもらったアカウントのチェックインリストをjsonでもらいます。vはバージョニングでこの日付のfoursquareのAPI仕様を利用するというものです。afterTimestampはこの日付以降のもの、ということです。これはUNIXエポックと呼ばれる時間形式で1970年1月1日からの経過時間を示しています。オンラインで見やすい形式に変換するものもあります。テストではcurlでアクセスしてますが、もちろんブラウザで直接開いてもOKです。Converterここで友人のチェックイン情報もuser_idを指定して取得しようとしたところnot-authorizedとでてしまいました。このAPIではまだUSER_IDはselfしか対応してないとのこと。友人のリストは取得できます。Endpointsjsonのデータ構造ですが、下記のようにきれいに整形してくれるサービスを利用すると目的の値にどのようにたどっていけばわかりやすいです。extensionsで使うmanifest.jsonになります。Chrome拡張でやらないよ、という人は見なくてもOKです。contentscript.jsが今回のメインのJavaScriptになります。}contentscript.js今回のメインコードになります。開いたページのタイトルがTweetDeckであった場合、チェックインリストを受け取って無理やりTweetDeckに突っ込んでます。データを取得するところまではいいと思いますが、やはり無理やり突っ込むのは無理がありそうですね...。自分でcssを書けば良いのですが、今回は面倒なのでTweetDeckのクラスなどをそのまま使わせてもらいました。汚くて読めたものではないですね。columnParent.prepend(foursquareColumn);}最後に本当はチェックインの通知もアプリで取得できるのですが、TweetDeckの改ざんが想定よりも筋が悪い気がしてきたので、このタスクは一旦止めちゃいました。通知のフックやグローバルのストリーミングデータ(別途foursquareチームにメールが必要)もあるようなので、また別ネタでリトライ予定です。Extensionsで通知だけ、などでも良いかもしれないですね。Developersおまけちなみに今回は使いませんでしたが、自分の友人の情報を取得するにはこんな感じでできました。コードを整理してgithubに置きました。月別アーカイブスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。