Rails×Twitter×Bootstrapで作る即席WEBサービス

  • Pocket
  • このエントリーをはてなブックマークに追加
  • 162 follow us in feedly

 

まえがき

・アプリケーションフレームワークとしてのRuby on Rails

・Twitterアカウントでログインしてもらうための仕組み

・CSSフレームワークとしてBootstrap

この3つを使ってWEBサービスの雛形を作ろう!

とゆうのが今回のお題です。

 

開発環境

・OS: Mac

・Ruby: 1.9

・gem: 1.8.23

・Rails: 3.2.13

・DB: sqlite3

といった環境

 

Gemfileの編集

# Bootstrap
gem "therubyracer"
gem "less-rails" #Sprockets (what Rails 3.1 uses for its asset pipeline) supports LESS
gem "twitter-bootstrap-rails"

# omniauth
gem 'omniauth'
gem 'omniauth-twitter'

を追加する

できたらgemの更新

> bundle install

 

Bootstrapのインストールとレイアウトファイルの上書き

> rails generate bootstrap:install less

これでassets内にbootstrapのlessファイルが作成される。

 

> rails generate bootstrap:layout application fixed

レイアウトファイルを上書きしていいか聞かれるので”Y”しましょう。

 


<%- if session[:user_uid].blank? then %>
<a href="/auth/twitter">ログイン</a>
<%- else %>
<a href="/auth/logout">ログアウト</a>
<%- end %>

せっかくなのでレイアウトファイルにログインのリンクを作っておきましょう。

適当な場所に追加します。

 

OmniAuthの設定ファイルの作成

config/initializers/omniauth.rb を作成

Rails.application.config.middleware.use OmniAuth::Builder do
  provider :twitter,"Consumer key","Consumer secret"
end

今更だけどTwitterのアプリ登録は事前に済ませておく。

 

コントローラーとモデルとビューの作成

> rails generate scaffold User uid:string token:string secret:string 

> rake db:migrate

ユーザー管理用

 

> rails generate controller pages

とりあえず作ったコントローラー

ついでに views/pages/index.html.erbも作る、中は何も書かなくてOK

pages_controller.rbにindexアクションを追加

class PagesController < ApplicationController
	def index
	end
end

 

> rails generate controller sessions

ログイン管理のコントローラー

 

ルーティングファイルの編集

config/routes.rbの中はこんな感じで

  root :controller => 'pages', :action => 'index'

  #OmniAuth
  match "/auth/:provider/callback" => "sessions#callback"
  match "/auth/logout"             => "sessions#logout"

rootのパスを変更しているので public内のindex.htmlを削除しておく

 

ログイン用のコントローラーの編集

sessions_controller.rbをこんな感じで

# -*- encoding: UTF-8 –*-
class SessionsController < ApplicationController
  def callback
    auth = request.env["omniauth.auth"]
    user = User.find_by_uid(auth["uid"])

    if user
      # 既にログインしたことがあるならそのままリダイレクト
      session[:user_uid] = user.uid
      redirect_to '/',
                  :notice     => "ログインしました。"
    else
      # ログインしたことがない場合はユーザー追加
      User.create_user(auth)
      session[:user_uid] = auth["uid"]
      redirect_to '/',
                  :notice     => "ログインしました。"
    end 
  end

  def logout
    session[:user_uid] = nil
      redirect_to '/',
                  :notice     => "ログアウトしました。"
  end
end

 

ユーザー作成メソッドを作成

models/user.rb

class User < ActiveRecord::Base

  def self.create_user(auth)
    create! do |user|
      user.uid    = auth["uid"]
      user.token  = auth['credentials']['token']
      user.secret = auth['credentials']['secret']
    end
  end

end

 

動作確認

これでTwitterでログインするBootstrapでデザインされたrailsアプリケーションの作成が完了!

ログインボタンをおすと初回ログインの際にはレコードが追加され、

以降のログインの際にはセッションだけもらうようになります。

もしかしたら設定漏れがあるかもしれませんが。。。

おすすめ書籍

パーフェクトRuby (PERFECT SERIES 6)
Rubyサポーターズ すがわら まさのり 寺田 玄太郎 三村 益隆 近藤 宇智朗 橋立 友宏 関口 亮一
技術評論社
売り上げランキング: 9,964
プログラミング言語 Ruby
プログラミング言語 Ruby
posted with amazlet at 13.12.02
まつもと ゆきひろ David Flanagan
オライリージャパン
売り上げランキング: 114,558

関連記事

Screeny-Shot-2013-08-12-15.08.04.pngScreeny-Shot-2013-08-12-15.08.04.png

PythonのWebフレームワークBottleを試してみた

まえがき このブログでPythonネタを書くのは初めてになりますが、...

記事を読む

スクリーンショット 2013-10-30 22.20.23

Ruby製ポケモン図鑑ライブラリをバージョンアップしました!!フェアリー対応に!!

まえがき 全国1億人のポケモンファンのみなさん、先日公開しましたRu...

記事を読む

fontawesome-1fontawesome-1.png

『FontAwesome』でBootstrapで使えるアイコンを増やす

まえがき 今回は『Font Awesome』を使ってBootstrap...

記事を読む

github-travisci-ruby-rspec-1github-travisci-ruby-rspec-1.png

RubyのテストをGiHub・TravisCIを使ってやってみる

まえがき 今回はTravisCIというGitHubで使える無料のCIツ...

記事を読む

半沢直樹gemを公開しました。

まえがき 先日、はじめてGemを公開してみました。 サンプル用に半...

記事を読む

新着記事

no image

PHPでRubyのirbっぽいインタラクティブなスクリプトが実行できる「boris」

まえがき PHPでもRubyのirbみたいなことがしたくて探してみたと...

記事を読む

2015年の抱負と去年の振り返り〜よちよちWEB業界1年経験して〜

まえがき あけましておめでとうございます。今年もどうぞよろしくお願いし...

記事を読む

Java SE 7 Bronze試験(1Z0-802)を受けてきました

まえがき 以前から少し受けてみたかった試験『Java SE 7 Bro...

記事を読む

HubotでJenkinsのジョブを実行する

まえがき HubotをつかってJenkinsのジョブをじっこうしてみた...

記事を読む

no image

Hubotをforeverでデーモン化する

まえがき 今回はHubotをforeverを使ってデーモン化してみた時...

記事を読む

スポンサーリンク

  • Sorry. No data so far.

PAGE TOP ↑