redditから人気の猫画像をランダムに取得し、9パズルにするウェブページを作ってみた。
こんな感じ。画像重いかな。
ここで遊べる。
http://xiidec.appspot.com/gifpzl.html
redditとは
日本では最近流行り始めたばかりだけど、海外ではかなりメジャーらしいソーシャルニュースサイト。アクセス数では世界24位らしい。tumblr(30位)より上だけど、eBay(20位)より下、そういうポジション。
2chのような掲示板とも言えるし、スラドのようなニュース雑談サイトの側面もあり、はてブのようにニュース＋ちょっとしたコメントという側面もある。そして、かわいい猫gifアニメや面白gifアニメが集まる場所でもある。
誰でも自由に板を作れるので、ジャンルは多岐にわたる。
たとえば・・・
- オバマ大統領やビルゲイツなどの有名人が降臨して質問に答える/r/IAmA(英語)。
- プログラミングについて語る/r/programming(英語)。
- 日本のテレビ番組について語る/r/JapaneseGameShows(英語)。
- アルファベットの「G」が好きな人が集まる/r/ggggg(英語)。
- そして今回利用する、猫のgifアニメを投稿する/r/CatGifs(英語)。
もちろん日本語の板もある。まだ出来たばかりだけど。
今回は上にもあげた/r/CatGifsからgifアニメを取得してパズルを作ってる。
redditのAPI
今回の猫パズルはクライアントサイドのJavascriptだけで実現してる。
サーバーサイドは一切無し。ローカルでも動く。
面倒なことは外部のAPIに丸投げ。他力本願。
というわけでredditのAPIについて。
reddit.com: api documentation
http://www.reddit.com/dev/api
redditはサイトの構造自体が今風にできているので、APIも非常に使いやすい。
APIからちょっと離れて、まずはredditをブラウザで見る場合のURLを見てみると…
板のスレッド一覧
https://www.reddit.com/r/{板名}/{ソート方法}/
ユーザー別の投稿一覧
https://www.reddit.com/user/{ユーザー名}/
スレッドのレス一覧
https://www.reddit.com/r/{板名}/comments/{スレID}/{スレタイトル}/
こういう構造になってる。
これらのURLの末尾に、.rssを付加すればRSSで取得でき、.jsonを付加すればJSON形式でデータが取得できる。
例えばredditの日本語サブレの中では最大の講読者数を誇るニュー速Rのスレッド一覧を新着順にJSON形式で取得する場合はこれでいける。
https://www.reddit.com/r/newsokur/new.json
一貫性があって素晴らしい。
基本的にreddit内のページは(たぶん)すべてこの法則に沿ってる。情報を取得しようがないユーザーパスワード設定のページでさえ、試しに.rssや.jsonを付加すればRSSやJSONが返ってきた。中身空っぽだったけど。
投稿関連はOAuthでログインしてPOSTする必要があるけど、情報を取得するだけなら法則性さえ分かれば何とかなる。
ちなみに今回はクライアント側のJavascriptだけで実装したいので、JSONPを使う。
http://www.reddit.com/r/{板名}.json?jsonp={コールバック関数名}&limit={取得したい件数}
このURLを投げて、コールバックの中で返ってきたJSONを利用するだけ。
・・・
余談だけどredditの創設メンバーの一人は、14歳でRSS 1.0の立案メンバーになり、クリエイティブ・コモンズの設計にも関わり、Markdownの開発にも関わってた人らしい。なるほど開発者に優しい作りなわけだ。残念ながら自殺しちゃったけど…
ネットの自由を標榜した悲劇の天才「アーロン・スワーツ」を再考する
http://csi.sproutgroup.co.jp/archives/000098.html
パズル部分
パズル部分は特筆するような部分はあんまりない。普通の9パズル。
3x3に並べたdiv要素の画像をクリックされるたびに差し替えてパズルっぽくしてる。
| .a | .b | .c |
|---|---|---|
| .d | .e | .f |
| .g | .h | . i |
こんな感じでdiv要素を配置して、
画像をCSS spriteする。
例えば300x300pxの画像なら
.a{background-position : - 0px -0px}
.b{background-position : -100px -0px}
.c{background-position : -200px -0px}
.d{background-position : - 0px -100px}
.e{background-position : -100px -100px}
.f{background-position : -200px -100px}
.g{background-position : - 0px -200px}
.h{background-position : -100px -200px}
.i{background-position : -200px -200px}
こんな感じ。
座標がマイナスになってるのがミソ。
左上の見えない領域に画像がはみ出してるイメージ。
まとめ
redditはドキュメント含めAPIが充実してるので、関連サービスを作りやすそう。
ちなみに今回の猫gifパズルはパラメータを変えれば他の板のgifも読み込める。
ではでは。