Subscribed unsubscribe Subscribe Subscribe

JavaScriptでInstagramのWeb UIを作る

Instagram APIで、それなりに色々なことができるなーと調べているうちに、「JavaScriptだけでiPhone Appと同等のページを作れるのでは?」と思い、試しにちょっと作ってみた。
http://www1216u.sakura.ne.jp/jstagram/
JSで作ったInstagramってことで"JStagram"。iPhoneから見ると結構近いUIになっているんじゃないかと。
startボタンを押すと認証ページに飛んで、OKして戻ってくると自分のフィード(自分がフォローしているユーザの投稿)が見えます。ユーザ名のリンクはそのユーザの投稿一覧になる。 というところまでで時間切れ。


ソースを見ていただければ分かる通り、htmlページ1枚で作っていて、サーバ側の処理など何もしていません。URLのpathは一つで、クエリパラメータとフラグメント識別子を判別して書き出す内容を切り替える、ということをしているだけ。jsonpAPIを叩いて、結果をもとにjQueryでDOM生成。
http://instagr.am/developer/manage/ でclientを作る際のCALLBACK URLと、認証ページにリダイレクトさせるときに渡すURLが等しればちゃんとaccess_tokenを取得できるようなので、こういう使い方で認証が必要なページもJavaScriptだけで作れてしまう。


ということはjsdo.itでも作れますね。ということで作ってみた。

JStagram - jsdo.it - share JavaScript, HTML5 and CSS

「ポピュラー」タブの部分とか、場所ごとの一覧、follower&followingの一覧とかもAPIからとれるようなので、誰かフォークして作ってみてくれないかなー。スタイル調整とかも今のところ適当だし。。


まぁ、実用的なところではlistagramとかI4PCとかステキなのがあるので、これはただの試みってことで。APIもいつ変更されるか分からないし。