kazumalab tech log

流行りとリラックマと嵐が大好きです。技術的ログ。

Instagram APIを使ってみました。Ruby on Rails編

Rails

かずまです。

Omnioauth-TwitterやFacebookは使ったことあったのですがInstagramでのoauth認識は初挑戦でした。
ただ、ほぼ同じ実装でできました。

# Gemfile
gem omniauth-instagram

これを追加するだけでできます。
多分Githubはこれ・・・だと思います。
github.com

devise + omnioauthはこちら２つ参考にするといいと思います。
これはやっていいのかわかりませんが、自分はSocialProfileのカラムにaccess_tokenを追加しました。
パラメーターで@socialprofileを読み込むとaccess_tokenも見えてしまうので安全ではないかも・・・と疑問ですがInstagram apiで使いやすいのでカラムを別につくりました。もしやらないほうがいい、というのがあればコメント等で教えていただけるとありがたいです。

qiita.com

qiita.com

Instagram Developper

コレにアクセスしてアプリケーションを作ります。(作り方割愛)
https://www.instagram.com/developer/
callback URIにちゃんと入れないとエラーが出ます。

僕の場合、ローカル環境のURIは

http://localhost:3000/users/auth/instagram/callback

です。

"補足"
昨年末からSandboxというものができたため、Instagramに承認されるまで(提出、審査が必要)
Sandboxに登録されているユーザーのみAPIを利用できます。
【保存版】Instagramの審査の流れ、手順、必要なものまとめ - Qiita
詳しくここに書かれています。助かる〜。

アプリケーション作成後

Client_idとClient_secretはコピーしてomnioauth.ymlにペーストしておきます。

次はこんな感じでdevise.rbに書きます。

# config/initializers/devise.rb
OAUTH_CONFIG = YAML.load_file("#{Rails.root}/config/omniauth.yml")[Rails.env].symbolize_keys!

config.omniauth :instagram, OAUTH_CONFIG[:instagram]['key'], OAUTH_CONFIG[:instagram]['secret']

これらはOauth認証するときに必要になります。
サインイン機能がきちんとできていればこれで

Instagram APIを使う

今回はユーザーの詳細ページにて、Instagramの画像を取ってきます。
gem のinstagramを使います。

# Gemfile
gem instagram

今回はInstagramでサインアップ、サインインさせてSocialProfile.access_tokenにトークンを追加している状態で話を進めます。

UsersControllerの中に書いていきます。

# users_controller.rb
before_action :set_user, only: :show

def show
   if user_signed_in?
      @social = SocialProfile.where(user_id: current_user.id).first
      client = Instagram.client(access_token: @social.access_token.to_s)
   end
   
   unless client
      @medias = ""
   else
      @medias = client.user_recent_media
   end
end

def set_user
      @user = User.find(params[:id])
end

次にview/user/show.html.erbに書いていきます。

<p>
  <strong>名前：</strong>
  <%= @user.username %><!-- 適宜カラム名は変更してください -->
</p>

<% @medias.each do |media| %>
	<img src='<%= media.images.low_resolution.url %>'class="img-thumbnail img-responsive">
	<p><%= media.caption.text %></p>
	<p><%= Time.at(media.created_time.to_i) %></p>
<% end %>

これで表示できるようになります。

f:id:kazumalab:20160826084630p:plain
いい感じですね〜。このスクショでは写真が縦横並ぶようにその他の要素を非表示にしています。

Instagramの時間は1421677966 のように返ってきますのでそれを変更してあげます。
RubyではTime.atを使うみたいです。かっこのなかはIntegerですのでStringではエラーが出ます。(to_i利用)

情報を取り出す

上のshow.html.erbのコードではmedia.caption.textとありますが、これは投稿の際につけたテキストを取ってくることができます。このテキストにはハッシュタグも含まれます。

mediasの中には最近の写真が入っています。そのデータの情報を取り出す一覧で良いサイトを見つけました。
Instagram API から投稿画像を取得しスライダー/カルーセル表示 – lesson me
うーん。今のところCaptionとcreated_timeぐらいですかね。。。少ない。

もしかするとSamd boxでなければ全部使えるのかも知れないので申請してみます。

こんな感じで簡単に使えるのがいいですね。