iPhotographer

このブログ最近はほぼInstagramの写真を貼って、
一言二言コメントするブログになっているので、
Instagramの画像を貼付ける作業が投稿ごとに必要なんですが、
ブログにInstagramの画像を貼るためには、
iPhoneのアプリからURLをメールで送る手間が毎回必要でした。

この手間がすごくバカバカしいために、
ブラウザでInstagramのイメージタグを取得するこちらのサービスを作りました。
RubyのPaaSとして話題のherokuの勉強をしたかったこともあり、
サーバーはherokuを使っています。

初めはIDEとrailsを使って作ってみようとしたのですが
APIの利用とかherokuへのデプロイのフローが初心者には難解で
とりあえずRubyの軽量フレームワークであるSinatraとテキストエディターで
サービスを作ることにしました。

Sinatraの良い所は、現時点ですでにInstagramの仕様例も、herokuの使用例も
かなり多くネットに公開されていて参考にできること。
こちらのサイトをもろもろ参考にさせていただきました。
本当ネットの先人の善意に感謝です。
http://d.hatena.ne.jp/ruedap/20110128/ruby_heroku_sinatra_hello_world
http://rewish.org/ruby/nantokastagram
http://snapwidget.com/

おおまかに開発手順を紹介するとこんなかんじです。
1) 開発用のディレクトリをつくり、ターミナルでこのディレクトリに移動
2) "git init"
3) "heroku create"
4) Gemfile, index.rb, config.ru, views/, public/images/, public/css/を作りコーディング
5) http://instagr.am/developerでAPIキーをつくる
6) "bundle install" → Gemfile.lockが生成されればだいたいOK
7) "git add ."
8) "git -commit -m 'xx'"
9) "git push heroic master"
もちろん、gitやrvm、Instgramやheroku、sinatraなどのgemのインストールが
あらかじめ必要ですが（これはこれでそれなりに面倒）、フローとしてはすごくシンプルです。

スクリプトの中身もシンプルです。
今回はInstagaram APIを使ったのでパーサーも書いていません。
index.rbは以下のとおり

require "rubygems"

require "sinatra"

require "instagram"

require "erb"



enable :sessions



#CALLBACK_URL = "http://localhost:4567/oauth/callback"

CALLBACK_URL = "http://itag.heroku.com/oauth/callback"



Instagram.configure do |config|

  config.client_id = "自分のキー"

  config.client_secret = "自分の暗号"

end



get "/" do

 '<a href="/oauth/connect">Connect with Instagram</a>'

 #erb :startpage 実際はテンプレートを使ってますが上の一行だけでも大丈夫

end



get "/oauth/connect" do

  redirect Instagram.authorize_url(:redirect_uri => CALLBACK_URL)

end



get "/oauth/callback" do

  response = Instagram.get_access_token(params[:code], :redirect_uri => CALLBACK_URL)

  session[:access_token] = response.access_token

  redirect "/feed"

end



get "/feed" do

  client = Instagram.client(:access_token => session[:access_token])

  @user = client.user.username

  @recent = client.user_recent_media

  erb :index

end

あとはviewsディレクトリ下のテンプレートでjQueryをつかってゴリゴリします。
イメージタグ用のURLはHTML5っぽく独自データ属性に放り込んでみました。

<% @recent.each do |r| %>

<div class="item">

 <div class="pic"><img src="<%=r.images.thumbnail.url%>" class="<%=r.id%>" data-url="<%=r.link%>"></div>

 </div>

<% end %>

ちょっとひっかかったのがGemfileとconfig.ruの記述について
Gemfileはこんな感じ

source :rubygems

gem 'sinatra'

gem 'instagram'

config.ruは
requireのうしろのパスにheroku環境では./を付ける必要があります。

require './index'

run Sinatra::Application

というようにかなりシンプルなフローでアプリを公開することができました。
herokuとsinatra楽しいです。今回はモデルを使わないような簡単なサービスですが、
これからもう少し規模の大きいサービスのモックアップなどにも使って
テストしてみたいなと考えています。