instagram で遊ぼう。
おはようございます。こんにちは、こんばんは。JavaScript Advent Calendar 2011 の 19 日目の記事になります。@aerith です。JavaScript の話そんなにまったくないです。
- サンプルデータが欲しい。
- 気軽に UI 設計の練習したい。
- なんでもいいから作りたい。
上記のようなことをやろうと思ったときに JavaScript は、「なんでもいいから作りたい。」「気軽に練習したい。」の部分はとても満たしてくれます。
さらに最近では jQuery や Ext JS、prototype.js なんかのフレームワークもこなれてきて、自分でクロスブラウザ対応を考えたりすることも減ってきているので。いきなりフレームワークを使う是非は置いておきますが、比較的とっつきやすい言語なんじゃないかなあと思っています。
でも JavaScript でサンプルデータが欲しいって思ったときに、実際どうしますか？自分でアプリを作れる人はそれで済みます。でも、みんながみんな一度にいくつもの言語を覚えることができるわけではないです。かといって例えば、サーバに CSV とか XML とか YAML とか JSON を手書きしてアップロードする、というのはあまり現実的ではないです。しかもそれにしたって、なんとか太郎とかかくかく花子とかいうデータばかり見てても何が正しいのかわからなくなってきますし、生きたデータが手にはいるならそれに越したことないです。(今だと JSONP とかありますけどね。/ iframe から抜いたりとか。/ JavaScript だけで認証下のデータを取得できて、それが仕様化されてるのがすごい。)
それで instagram さんで遊んでみたわけなのですが。
- ドキュメントが割としっかりしてる(英語だけど、返ってくるデータの構造も記載されているので、理解できなくてもなんとかなります。)
- 返ってくるデータの構造が好き(他の方はどうだかわかりません。)
- そもそもパソコンからだとまともに見れない(iPhone 用に特化したサイトなのでしょうがないです。)
- 上記理由からパソコン用のアプリケーションを作るのは比較的モチベーションになりやすい。
- デモページ作りながら食べたにくまんとかおでんおいしかった。
instagram さんは、OAuth 2.0 プロトコルを採用した認証方法が API にあって、上記の「サンプルデータが欲しい。」という用件を JavaScript だけで満たすことができます。
このサイト用に実装したファイルは以下の 3 点です。
- http://i.sakura.aerith.sc/index.html
- http://i.sakura.aerith.sc/javascripts/asayake.js
- http://i.sakura.aerith.sc/stylesheets/content.css
(中はそんなに大事でもないので、暇な方だけ追ってください。ページを開いたときにトークンがあるかどうかを見てその結果で認証 → ページの初期化 → データの取得 → 要素の追加 → アクションの付与、がおおざっぱな流れになります。)
ぼくが知ってるころといえば、取得するデータの数だけ裏側に CGI とか作ったり(クエリストリングとかポストデータで切り替えとかはしてましたけど。)、JavaScript も ページとかグローバルメニューのカテゴリ分だけ用意したり、ちょっとしたものを試そうとするだけでもちょっと大変でした(ぼくが無能なだけです。)。ぼくが始めて JavaScript をやったときは、本に載ってた document.writeLn を document.writeIn だと勘違いしてサンプルを動かすことができずに、一回挫折しました。
(こんなのはちょっとした笑い話で、今回のデモページ作るのも、自分の打ち間違いを直してた時間のほうが実装時間よりも長かったので、実装にはまったく関係なくて、ドジをいい加減直そうっていうだけなのですが。)
閑話休題、最近ではベースの HTML を一枚用意しておいて、API を経由して要素を操作して作る、1ページのアプリケーションが流行ってきています。たぶん。
上のデモページもそんな感じを若干意識してます。これは見るだけですが、写真やフォローしてる人をページ繰りで取得したり、画像に star/unstar できたり、コメントをつけられる用にしたら、そこそこ使えるパソコン用のアプリケーションになります。見るだけとはいえ、いろんな人の写真を自分が動かせているのは楽しい。こういうのも、生きたデータの利点だと思います。
(SPA でも OPA でもいんですけど、どっちもえっちくないですか？おっぱいおっぱい。失礼しました。)
だらだらと長いこと書きましたけど。
- 別に instagram じゃなくても OAuth 2.0 対応サイトならどこでもよかった。
- でも、instagram さんくらいドキュメントがしっかりできていれば見ただけでだいたいどう作ればいいかわかってすごい。
- google 先生とか他の人のサイトを呼んでいいところはどんどんパクろう。
- Twitter とかでも簡単に聞けたりしてすごい。
- フレームワークとか、JSONP とか OAuth 2.0 とか人に聞ける環境とかどんどん環境よくなるし、JavaScript 楽しいのでやってみてください。
みんなが楽しくモノ作りをできますように。次は @nazomikan さんです。エントリあげるの遅くなってごめんなさい！！
追記しました。
