SlideShare a Scribd company logo
Ruby on RailsでTwitter連携アプリをサクっと作る


       Fumitaka Yanase : giftee.co
                @i7a16k
Agenda
1. ruby / rails に関して

2.Twitter連携アプリ作成の実例

  2.1.下準備

  2.2.Sign in with Twitter

  2.3.Tweet

  2.4.Deploy
1.Ruby on Rails に関して
about:rails(1)
「同じ事を繰り返さない」「設定よりも規約」を理念としたフレームワーク

 railsのフォルダ構造(抜粋)

   (アプリ名)
     |-app/
        |-assets
        |-controllers
        |-helpers
        |-mailers
        |-models
        |-views
     |-config/
     |-db/
     |-doc
     |-lib
     |-log
     |-public
     |-script
     |-test
     |-tmp
     |-vendor
about:rails(2)
railsはルータとMVCにより制御される

                                        http://my.url/hoge/piyo
                                                   ↓
                    routes.rb
                                     fooコントローラのbarメソッド

        ①                ②
                    controller

                ④                ③
    ⑤        View                model
2.Twitter連携アプリ作成の実例
キティったー
こんなのこれから作ってみます


http://bit.ly/twtr_hack_rails
2.1 下準備
アプリ登録
Twitterにアプリの登録を行う
   dev.twitter.com




                         なんかいれとく
アプリ登録
Write権限も取れるように
   dev.twitter.com




                       Read and Write に変更
   dev.twitter.com




                                       Consumer
                                         key /
                                   Cosumer secretを
                                     控えておく
rails インストール
ruby / rubygemsのインストール(説明省略)

rubygemsを使ってrailsをインストール

gem install rails
rails準備
 rails new コマンドにより、アプリケーションの枠組みが作成される

    rails new <アプリ名>

生成されるファイル群

-rw-r--r--    1   i7a16k   staff    765   7   29   14:02   Gemfile
-rw-r--r--    1   i7a16k   staff   2463   7   29   14:02   Gemfile.lock
-rw-r--r--    1   i7a16k   staff   9208   7   29   14:02   README.rdoc
-rw-r--r--    1   i7a16k   staff    274   7   29   14:02   Rakefile
drwxr-xr-x    8   i7a16k   staff    272   7   29   14:02   app/
drwxr-xr-x   10   i7a16k   staff    340   7   29   14:02   config/
-rw-r--r--    1   i7a16k   staff    159   7   29   14:02   config.ru
drwxr-xr-x    3   i7a16k   staff    102   7   29   14:02   db/
drwxr-xr-x    3   i7a16k   staff    102   7   29   14:02   doc/
drwxr-xr-x    4   i7a16k   staff    136   7   29   14:02   lib/
drwxr-xr-x    3   i7a16k   staff    102   7   29   14:02   log/
drwxr-xr-x    8   i7a16k   staff    272   7   29   14:02   public/
drwxr-xr-x    3   i7a16k   staff    102   7   29   14:02   script/
drwxr-xr-x    8   i7a16k   staff    272   7   29   14:02   test/
drwxr-xr-x    3   i7a16k   staff    102   7   29   14:02   tmp/
drwxr-xr-x    4   i7a16k   staff    136   7   29   14:02   vendor/
Rails and twitter #twtr_hack
2.2 Sign in with Twitter
TOPページ表示(1)
controllerを追加し、TOPページを作成する

    rails g controller home index

生成されるファイル群

     create   app/controllers/home_controller.rb
      route   get "home/index"
     invoke   erb
     create     app/views/home
     create     app/views/home/index.html.erb
     invoke   test_unit
     create     test/functional/home_controller_test.rb
     invoke   helper
     create     app/helpers/home_helper.rb
     invoke     test_unit
     create       test/unit/helpers/home_helper_test.rb
     invoke   assets
     invoke     coffee
     create       app/assets/javascripts/home.js.coffee
     invoke     scss
     create       app/assets/stylesheets/home.css.scss
Rails and twitter #twtr_hack
TOPページ表示(2)
root設定をroutes.rbに追加
    routes.rb
   root :to => ‘home#index’


public/index.htmlを削除

   rm public/index.html

  ※ちなみにさっきでてたのはこのpublic.html
Rails and twitter #twtr_hack
Twitter ログイン
gem設定をGemfileに追加
     Gemfile

  gem ‘omniauth-twitter’


  bundle install

omniauth用の設定ファイルを追加

 config/initializers/omniauth.rb
  TWITTER_CONSUMER_KEY = ‘xxxxx’
  TWITTER_CONSUMER_SECRET = ‘yyyy’

  Rails.application.config.middleware.use OmniAuth::Builder do
    provider :twitter, TWITTER_CONSUMER_KEY, TWITTER_CONSUMER_SECRET
  end

 ※dev.twitter.comで取得したconsumer keyとconsumer secretを使う
Rails and twitter #twtr_hack
Twitter ログイン
Twitterログイン用のリンク追加
  /app/views/home/index.html.erb
  <%= link_to ‘Sign in with Twitter’, ‘/auth/twitter’ %>
Rails and twitter #twtr_hack
callbackの制御
ログイン用のコントローラーを作成

   rails g controller sessions




routes.rbに設定を追加
      routes.rb
   match ‘/auth/twitter/callback’ => ‘sessions#create’



sessions_controller.rb に、createメソッド追加
  sessions_controller.rb
   def create
       raise request.env[“omniauth.auth”].to_yaml
   end

                                                         ユーザ情
                                                報がこの中に入っているので
                                                     確認してみる
Rails and twitter #twtr_hack
取得された情報
oauth後取得されている情報

  provider: twitter
  uid: '118282075'
  info:
    nickname: i7a16k
    name: i7a
    location: Spikers Camp
    image: http://a0.twimg.com/profile_images/1602452666/
  i7aicon_normal.jpg
    description: i7aで「いな」と読ませたいらしいです。16kはspikeoutというゲーム
  より。エンジニアとして http://giftee.co/
     の中の人をやってます。ちなみにIME and DiMENSiONの中の人。男なんですけど、キ
  ティが好きです。 (キティの中の人含め)
    urls:
      Website: http://and-d.i7a16k.net/
      Twitter: http://twitter.com/i7a16k
  credentials:
    token: 118282075-xxxxxxxxxxxxxxxxxxxxxxxxx
    secret: yyyyyyyyyyyyyyyyyyyyyyyy
モデルを作ろう
userモデルを作成

  rails g model user provider:string uid:string
  name:string token:string secret:string

  rake db:migrate



       カラム名                 型                意味


           id             integer           自動生成


        provider          string          連携サービス名


          uid             string        連携サービスのユーザid


         name             string         連携サービスでの名前


         token            string          アクセストークン


        secret            string         シークレットトークン
Rails and twitter #twtr_hack
ログインロジック
sessions#createにロジック追加
 sessions_controller.rb
    def create
      auth = request.env[“omniauth.auth”]
      user = User.find_by_provider_and_uid(auth[“provider”],auth[“uid”])
    || User.create_with_omniauth(auth)
      session[:user_id] = user.id

      redirect_to root_url
    end


user.rb にユーザ作成処理追加
         user.rb
    self.create_with_omniauth(auth)
      create! do |user|
          user.provider = auth[“provider”]
          user.uid = auth[“uid”]
          user.name = auth[“info”][“name”]
          user.token = auth[“credentials”][“token”]
          user.secret = auth[“credentials”][“secret”]
      end
    end
Rails and twitter #twtr_hack
ログイン後
application_controller.rb に current_user メソッド追加
  application_controller.rb
 helper_method :current_user

 private

 def current_user
   @current_user ||= User.where(:id => session[:user_id]) if session[:user_id]
 end


index.html.erbにログイン状態に応じた制御を追加

       index.html.erb
    <% if current_user %>
      こんにちは <%=current_user.name%> さん
    <% else %>
      <%= link_to ‘Sign in with Twitter’, ‘/auth/twitter’ %>
    <% end %>
Rails and twitter #twtr_hack
ログアウト実装
index.html.erb に ログアウトのリンク追加

     index.html.erb
<% if current_user %>
  こんにちは <%=current_user.name%> さん
  <%= link_to ‘Sign Out’, signout_path %>
<% else %>
  <%= link_to ‘Sign in with Twitter’, ‘/auth/twitter’ %>
<% end %>


routes.rb にログアウトの設定追加
     index.html.erb
   match ‘/signout’ => ‘sessions#destroy’, :as => :signout


sessions_controller にdestroyメソッド追加
  sessions_controller.rb
   def destroy
     session[:user_id] = nil
     redirect_to root_url
   end
Rails and twitter #twtr_hack
2.3 Tweet ・・・ はまた次回?

More Related Content

What's hot (20)

PDF
Garageを触ってみた
Yoichi Toyota
 
PPTX
Zabbixを2分でインストール
真乙 九龍
 
PDF
最近のRails開発のはなし
Yoichi Toyota
 
PDF
Spring Bootで変わる Javaアプリ開発! #jsug
Toshiaki Maki
 
PDF
SpringOne 2GX 2014 参加報告 & Spring 4.1について #jsug
Toshiaki Maki
 
KEY
Mojoliciousをウェブ制作現場で使ってみてる
jamadam
 
PDF
Ruby on Rails Tutorial
Ken Iiboshi
 
PDF
FuelPHPでSentry導入
fagai
 
PPT
CodeIgniterのページングに関して。
Takatsugu Ishikawa
 
PPT
Apache Module
Tomohiro Ikebe
 
PDF
Haikara
jewel12
 
PPTX
実用裏方 Perl 入門
keroyonn
 
PDF
One night Vue.js
Masahiro Kyuden
 
PDF
Ansible 2.8 アップデート情報 -機能追加と注意点-
akira6592
 
PPT
ASP.NET MVC 1.0
Shinpei Ohtani
 
PDF
開発チームもIaCやってみたい~VSOとDockerの組合せにチャレンジ~
CubedKachi
 
PPT
Ruby on Rails Tutorial Chapter8-10
Sea Mountain
 
PPTX
実は怖くないDevOps
Masanori Ishigami
 
PDF
Docker+CoreOS+GCEで自動スケール分散レイトレ
peryaudo
 
Garageを触ってみた
Yoichi Toyota
 
Zabbixを2分でインストール
真乙 九龍
 
最近のRails開発のはなし
Yoichi Toyota
 
Spring Bootで変わる Javaアプリ開発! #jsug
Toshiaki Maki
 
SpringOne 2GX 2014 参加報告 & Spring 4.1について #jsug
Toshiaki Maki
 
Mojoliciousをウェブ制作現場で使ってみてる
jamadam
 
Ruby on Rails Tutorial
Ken Iiboshi
 
FuelPHPでSentry導入
fagai
 
CodeIgniterのページングに関して。
Takatsugu Ishikawa
 
Apache Module
Tomohiro Ikebe
 
Haikara
jewel12
 
実用裏方 Perl 入門
keroyonn
 
One night Vue.js
Masahiro Kyuden
 
Ansible 2.8 アップデート情報 -機能追加と注意点-
akira6592
 
ASP.NET MVC 1.0
Shinpei Ohtani
 
開発チームもIaCやってみたい~VSOとDockerの組合せにチャレンジ~
CubedKachi
 
Ruby on Rails Tutorial Chapter8-10
Sea Mountain
 
実は怖くないDevOps
Masanori Ishigami
 
Docker+CoreOS+GCEで自動スケール分散レイトレ
peryaudo
 

Viewers also liked (8)

PDF
Map Making with QGIS
Sagar Arlekar
 
PDF
Map Making with QGIS - Part II
Sagar Arlekar
 
PDF
Rails Plugins - Linux For You, March 2011 Issue
Sagar Arlekar
 
PDF
Ruby gems
Papp Laszlo
 
PPT
Rails e suas Gems
Rodrigo Martins
 
PPT
Omniauth
munotsumit007
 
PDF
Some OAuth love
Nicolas Blanco
 
PDF
APIs for mobile
Andrei Navarro
 
Map Making with QGIS
Sagar Arlekar
 
Map Making with QGIS - Part II
Sagar Arlekar
 
Rails Plugins - Linux For You, March 2011 Issue
Sagar Arlekar
 
Ruby gems
Papp Laszlo
 
Rails e suas Gems
Rodrigo Martins
 
Omniauth
munotsumit007
 
Some OAuth love
Nicolas Blanco
 
APIs for mobile
Andrei Navarro
 

Similar to Rails and twitter #twtr_hack (20)

KEY
Rails基礎講座 part.2
Jun Yokoyama
 
PDF
Tottoruby 20110903
Takashi SAKAGUCHI
 
PDF
Web技術勉強会23回目
龍一 田中
 
PDF
初めてのPadrino
Takeshi Yabe
 
PDF
APIMeetup 20170329_ichimura
Tomohiro Ichimura
 
PPTX
13016 n分で作るtype scriptでnodejs
Takayoshi Tanaka
 
PPT
Struts2を始めよう!
Shinpei Ohtani
 
PDF
jQuery と MVC で実践する標準志向 Web 開発
Akira Inoue
 
PDF
Server side Swift & Photo Booth
LINE Corporation
 
PDF
成長を加速する minne の技術基盤戦略
Hiroshi SHIBATA
 
PDF
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
ThinReports
 
PDF
ヒカルのGo 資料 Webアプリケーションの作り方
Yosuke Furukawa
 
PDF
Ruby開発者のためのHeroku入門
Salesforce Developers Japan
 
PPTX
徳島OSS勉強会第四回 シラサギハンズオン 0925
Yu Ito
 
PDF
Sflt17 meteorではじめる最速ウェブアプリ開発
Hironao Sekine
 
PDF
Kubernetes Meetup Tokyo #23 kubebuilder-v2
Kazuhito Matsuda
 
PDF
G0042 h
silicone69
 
PPTX
シラサギハンズオン 1015 1016
Yu Ito
 
PDF
20091030cakephphandson 01
Yusuke Ando
 
Rails基礎講座 part.2
Jun Yokoyama
 
Tottoruby 20110903
Takashi SAKAGUCHI
 
Web技術勉強会23回目
龍一 田中
 
初めてのPadrino
Takeshi Yabe
 
APIMeetup 20170329_ichimura
Tomohiro Ichimura
 
13016 n分で作るtype scriptでnodejs
Takayoshi Tanaka
 
Struts2を始めよう!
Shinpei Ohtani
 
jQuery と MVC で実践する標準志向 Web 開発
Akira Inoue
 
Server side Swift & Photo Booth
LINE Corporation
 
成長を加速する minne の技術基盤戦略
Hiroshi SHIBATA
 
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
ThinReports
 
ヒカルのGo 資料 Webアプリケーションの作り方
Yosuke Furukawa
 
Ruby開発者のためのHeroku入門
Salesforce Developers Japan
 
徳島OSS勉強会第四回 シラサギハンズオン 0925
Yu Ito
 
Sflt17 meteorではじめる最速ウェブアプリ開発
Hironao Sekine
 
Kubernetes Meetup Tokyo #23 kubebuilder-v2
Kazuhito Matsuda
 
G0042 h
silicone69
 
シラサギハンズオン 1015 1016
Yu Ito
 
20091030cakephphandson 01
Yusuke Ando
 

Recently uploaded (7)

PDF
プライバシ保護のためのインターネットアーキテクチャの進化 (2025-07-11)
Jun Kurihara
 
PDF
20250711_日本IBM ミドルウエア・ユーザー研究会(JIMUC)総会_中村会長資料.pdf
ChikakoInami1
 
PDF
20250711JIMUC総会IBM Automation_Platform最新情報_Connpass公開版.pdf
ChikakoInami1
 
PDF
PostgreSQL18新機能紹介(db tech showcase 2025 発表資料)
NTT DATA Technology & Innovation
 
PDF
20250717_Devin×GitHubCopilotで10人分の仕事は出来るのか?.pdf
Masaki Yamakawa
 
PDF
20250710_Devinで切り拓くDB革命_〜価値創出に集中せよ〜.pdf
Masaki Yamakawa
 
PDF
[Hardening Designers Confernece 2025]ランサムウェアでの見えざるログ・見えるログ
kataware
 
プライバシ保護のためのインターネットアーキテクチャの進化 (2025-07-11)
Jun Kurihara
 
20250711_日本IBM ミドルウエア・ユーザー研究会(JIMUC)総会_中村会長資料.pdf
ChikakoInami1
 
20250711JIMUC総会IBM Automation_Platform最新情報_Connpass公開版.pdf
ChikakoInami1
 
PostgreSQL18新機能紹介(db tech showcase 2025 発表資料)
NTT DATA Technology & Innovation
 
20250717_Devin×GitHubCopilotで10人分の仕事は出来るのか?.pdf
Masaki Yamakawa
 
20250710_Devinで切り拓くDB革命_〜価値創出に集中せよ〜.pdf
Masaki Yamakawa
 
[Hardening Designers Confernece 2025]ランサムウェアでの見えざるログ・見えるログ
kataware
 

Rails and twitter #twtr_hack

  • 2. Agenda 1. ruby / rails に関して 2.Twitter連携アプリ作成の実例 2.1.下準備 2.2.Sign in with Twitter 2.3.Tweet 2.4.Deploy
  • 3. 1.Ruby on Rails に関して
  • 4. about:rails(1) 「同じ事を繰り返さない」「設定よりも規約」を理念としたフレームワーク railsのフォルダ構造(抜粋) (アプリ名) |-app/ |-assets |-controllers |-helpers |-mailers |-models |-views |-config/ |-db/ |-doc |-lib |-log |-public |-script |-test |-tmp |-vendor
  • 5. about:rails(2) railsはルータとMVCにより制御される http://my.url/hoge/piyo ↓ routes.rb fooコントローラのbarメソッド ① ② controller ④ ③ ⑤ View model
  • 9. アプリ登録 Twitterにアプリの登録を行う dev.twitter.com なんかいれとく
  • 10. アプリ登録 Write権限も取れるように dev.twitter.com Read and Write に変更 dev.twitter.com Consumer key / Cosumer secretを 控えておく
  • 11. rails インストール ruby / rubygemsのインストール(説明省略) rubygemsを使ってrailsをインストール gem install rails
  • 12. rails準備 rails new コマンドにより、アプリケーションの枠組みが作成される rails new <アプリ名> 生成されるファイル群 -rw-r--r-- 1 i7a16k staff 765 7 29 14:02 Gemfile -rw-r--r-- 1 i7a16k staff 2463 7 29 14:02 Gemfile.lock -rw-r--r-- 1 i7a16k staff 9208 7 29 14:02 README.rdoc -rw-r--r-- 1 i7a16k staff 274 7 29 14:02 Rakefile drwxr-xr-x 8 i7a16k staff 272 7 29 14:02 app/ drwxr-xr-x 10 i7a16k staff 340 7 29 14:02 config/ -rw-r--r-- 1 i7a16k staff 159 7 29 14:02 config.ru drwxr-xr-x 3 i7a16k staff 102 7 29 14:02 db/ drwxr-xr-x 3 i7a16k staff 102 7 29 14:02 doc/ drwxr-xr-x 4 i7a16k staff 136 7 29 14:02 lib/ drwxr-xr-x 3 i7a16k staff 102 7 29 14:02 log/ drwxr-xr-x 8 i7a16k staff 272 7 29 14:02 public/ drwxr-xr-x 3 i7a16k staff 102 7 29 14:02 script/ drwxr-xr-x 8 i7a16k staff 272 7 29 14:02 test/ drwxr-xr-x 3 i7a16k staff 102 7 29 14:02 tmp/ drwxr-xr-x 4 i7a16k staff 136 7 29 14:02 vendor/
  • 14. 2.2 Sign in with Twitter
  • 15. TOPページ表示(1) controllerを追加し、TOPページを作成する rails g controller home index 生成されるファイル群 create app/controllers/home_controller.rb route get "home/index" invoke erb create app/views/home create app/views/home/index.html.erb invoke test_unit create test/functional/home_controller_test.rb invoke helper create app/helpers/home_helper.rb invoke test_unit create test/unit/helpers/home_helper_test.rb invoke assets invoke coffee create app/assets/javascripts/home.js.coffee invoke scss create app/assets/stylesheets/home.css.scss
  • 17. TOPページ表示(2) root設定をroutes.rbに追加 routes.rb root :to => ‘home#index’ public/index.htmlを削除 rm public/index.html ※ちなみにさっきでてたのはこのpublic.html
  • 19. Twitter ログイン gem設定をGemfileに追加 Gemfile gem ‘omniauth-twitter’ bundle install omniauth用の設定ファイルを追加 config/initializers/omniauth.rb TWITTER_CONSUMER_KEY = ‘xxxxx’ TWITTER_CONSUMER_SECRET = ‘yyyy’ Rails.application.config.middleware.use OmniAuth::Builder do provider :twitter, TWITTER_CONSUMER_KEY, TWITTER_CONSUMER_SECRET end ※dev.twitter.comで取得したconsumer keyとconsumer secretを使う
  • 21. Twitter ログイン Twitterログイン用のリンク追加 /app/views/home/index.html.erb <%= link_to ‘Sign in with Twitter’, ‘/auth/twitter’ %>
  • 23. callbackの制御 ログイン用のコントローラーを作成 rails g controller sessions routes.rbに設定を追加 routes.rb match ‘/auth/twitter/callback’ => ‘sessions#create’ sessions_controller.rb に、createメソッド追加 sessions_controller.rb def create raise request.env[“omniauth.auth”].to_yaml end ユーザ情 報がこの中に入っているので 確認してみる
  • 25. 取得された情報 oauth後取得されている情報 provider: twitter uid: '118282075' info: nickname: i7a16k name: i7a location: Spikers Camp image: http://a0.twimg.com/profile_images/1602452666/ i7aicon_normal.jpg description: i7aで「いな」と読ませたいらしいです。16kはspikeoutというゲーム より。エンジニアとして http://giftee.co/ の中の人をやってます。ちなみにIME and DiMENSiONの中の人。男なんですけど、キ ティが好きです。 (キティの中の人含め) urls: Website: http://and-d.i7a16k.net/ Twitter: http://twitter.com/i7a16k credentials: token: 118282075-xxxxxxxxxxxxxxxxxxxxxxxxx secret: yyyyyyyyyyyyyyyyyyyyyyyy
  • 26. モデルを作ろう userモデルを作成 rails g model user provider:string uid:string name:string token:string secret:string rake db:migrate カラム名 型 意味 id integer 自動生成 provider string 連携サービス名 uid string 連携サービスのユーザid name string 連携サービスでの名前 token string アクセストークン secret string シークレットトークン
  • 28. ログインロジック sessions#createにロジック追加 sessions_controller.rb def create auth = request.env[“omniauth.auth”] user = User.find_by_provider_and_uid(auth[“provider”],auth[“uid”]) || User.create_with_omniauth(auth) session[:user_id] = user.id redirect_to root_url end user.rb にユーザ作成処理追加 user.rb self.create_with_omniauth(auth) create! do |user| user.provider = auth[“provider”] user.uid = auth[“uid”] user.name = auth[“info”][“name”] user.token = auth[“credentials”][“token”] user.secret = auth[“credentials”][“secret”] end end
  • 30. ログイン後 application_controller.rb に current_user メソッド追加 application_controller.rb helper_method :current_user private def current_user @current_user ||= User.where(:id => session[:user_id]) if session[:user_id] end index.html.erbにログイン状態に応じた制御を追加 index.html.erb <% if current_user %> こんにちは <%=current_user.name%> さん <% else %> <%= link_to ‘Sign in with Twitter’, ‘/auth/twitter’ %> <% end %>
  • 32. ログアウト実装 index.html.erb に ログアウトのリンク追加 index.html.erb <% if current_user %> こんにちは <%=current_user.name%> さん <%= link_to ‘Sign Out’, signout_path %> <% else %> <%= link_to ‘Sign in with Twitter’, ‘/auth/twitter’ %> <% end %> routes.rb にログアウトの設定追加 index.html.erb match ‘/signout’ => ‘sessions#destroy’, :as => :signout sessions_controller にdestroyメソッド追加 sessions_controller.rb def destroy session[:user_id] = nil redirect_to root_url end

Editor's Notes