rails と instagram ruby gem を使って作る世界遺産検索サイト｜【coedo.rb】ruby /...

【CoEdo.rb】Ruby / Ruby on Rails ビギナーズ勉強会 第５回

Ticklecode

Yoshinori Kobayashi 1

Rails と Instagram Ruby Gem を 使って作る世界遺産検索サイト

Heritagram - World Heritage Instagram -

2

生まれは 奈良県 です

小林由憲（こばやしよしのり）

Twitter: @AsbyuKobayashi

In Advance Only ブログ:

もくもく会（自主勉強会） を複数の運営メンバーや アドバイザーの方々と ともに、定期開催しています。

勉強会を開催しています)^o^(

3

【CoEdo.rb】 Ruby / Ruby on Rails

ビギナーズ勉強会

Swiftビギナーズ勉強会

WordPressもくもく 勉強会

4

最初にデモをします。

5

アジェンダ

１．Instagram（インスタグラム）について

２．Rails と Instagram Ruby Gem

３．Instagram Ruby Gem の感想

6

１．Instagram（インスタグラム）について

7

Instagram（インスタグラム） の利用者

2014年度では・・・ Instagram、月間ユーザー3億人を達成― ついにTwitterを追い越す

http://www.itmedia.co.jp/news/articles/1412/11/news049.html

サービス開始から累計で300億点の写真が投稿された

Instagram、月間ユーザー3億人を達成―ついにTwitterを追い越す | TechCrun

http://jp.techcrunch.com/2014/12/11/20141210not-a-fad/

Instagram、MAUが3億人突破でTwitter超え - ITmedia ニュース

8

InstagramをWebサイトで使う理由。

・タイムラグがほぼない。 ⇒現地で撮影して、現地でネットにアップされる。

⇒臨場感があるフォトが多い。

・サイズが正方形で揃っている。 ⇒配置しやすい、サイズ加工の必要がない。

・APIが整備されている。 ⇒Instagram Ruby Gemなどでサックリ使える！

9

２．Rails と Instagram Ruby Gem

10

Instagram Ruby Gem

Instagram REST と Search API をラップして使いやすくしてくれている。

https://github.com/Instagram/instagram-ruby-gem

11

InstagramのAPIを使って画像をひっぱてくる - Qiita

Instagram gem with Rails - Ajmal Afif's blog

Web+DB mochiz ねこまみれ開発 Ruby2 Rails4 Bootstrap3 Heroku でつくる Nyanstagram風 ビューアーアプリ

Instagram Ruby Gem の導入と最初の使い方

https://s3-ap-northeast-1.amazonaws.com/nyansta-book/book.pdf

http://qiita.com/Braian/items/1cfb108fe3292e5d20bb

http://blog.ajmalafif.com/instagram-gem-with-rails/

最初の導入や、基本的な使い方は次のサイトに記載があります。

12

controller で緯度・経度情報の設定と、 イメージの取得

class HomeController < ApplicationController

def index

# 緯度・経度

lat = 48.636111

lng = -1.511111

@place = Instagram.media_search(lat,lng,{:count => 20})

end

end

media_search で緯度・経度を指定して検索できる。 :count は取得するイメージの件数。

controllers/home_controller.rb

ポイント１

13

view で取得したイメージを出力

views/home/index.html.erb

<% @place.each do |p| %>

<%= image_tag(p.images.low_resolution.url,:class => "img-

rounded") %>

<% end %>

class HomeController で取得したイメージオブジェクトを、 images.low_resolution.url とたどるとURLを取得できる。

ポイント２

14

補足：取得したイメージオブジェクト（json）の 中身を調べる

取得したデータはInstagram Ruby Gemが使いやすくしてくれている。

データ構造を理解してアクセスするために、デバッグ出力するとよくわかる。

<% @place.each do |p| %>

<%= debug p %>

<% end %>

Instagramの公式サイトでも、レスポンスがまとめられている。

https://instagram.com/developer/endpoints/media/

「GET /media/search」の[RESPONSE]で確認できる。

15

３．Instagram Ruby Gem の感想

とにかく使いやすい！ ⇒難解な、APIリクエスト組み立てをしなくてもよい。

⇒レスポンス（json）を整理してくれているので、取り出しやすい！

定番のgemなので、国内外で制作事例が探せる。

GitHub RubyGems

16

ご清聴ありがとうございました。