酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

【Rails初学者向け】Twitterへ投稿するRailsアプリを作ってみよう

最近初心者の人向けにRuby/Railsのアプリの開発についてレクチャーしたので、その時作った手順をブログ記事にしました。

もし、やってみてわからないところとか、ハマりやすいところとかあれば @zyunnosuke にメッセージください!


プロジェクトを作成

ローカル開発の場合

ターミナルで以下のコマンドを実行してください。

1
2
3
4
5
# 新しいRailsアプリを作成
rails new twitter_post_sample --skip-bundle

# twitter_post_sample のフォルダに移動
cd twitter_post_sample

Cloud 9の場合

  • Cloud9』にログインして新しいworkspaceを作成
  • privateのRailsアプリを作成してください

Gemfileに以下を追加

プロジェクト直下のGemfileを開いて以下を追加して下さい。 (minimum-omniauth-scaffold は最後に補足を書いています)

1
2
3
gem 'twitter'
gem 'minimum-omniauth-scaffold'
gem 'haml'

追加したらターミナルで以下のコマンドを実行します。

1
bundle install --jobs=4 --path=vendor/bundle

Ruby Gemライブラリをインターネットから持ってきて、自動でローカルに保存します。

Twitter認証用のScaffold

以下のコマンドを実行して、OmniAuth用のScaffoldを作成。

1
bundle exec rails g minimum:omniauth:scaffold

テーブルの作成

1
bundle exec rake db:migrate

TwitterのAPI keyを取得

Twitter Application Managementに新しいアプリを登録して下さい。 手順がわからない場合は、『Rails環境でTwitterとFacebookを使ってサイトの拡散をするため自動投稿させるアプリを作成してみた』 を参考にしてみてください。

最初にユーザー登録とか必要かもしれません。

ちなみに設定は以下の様ようにしました。

Name : (ユニークな名前にしてください。クライアント名としてtwitter上で表示されるのでいい名前にしてください)
Description : (適当に書いてください)
Website : http://www.example.com (公開するときはそのURLを。今回はローカルテスト用の設定です)
Callback URL : http://www.example.com/callback (公開するときはコールバックのURLを書いてください。今回はローカルテスト用の設定です)

「Keys and Access Tokens」に Consumer Key と Consumer Secret があるので、次のファイルに書いてください。

Twitter API keyをRailsに設定

config/settings.local.yml を開いて以下の内容を追記して下さい。

1
2
3
4
# Twitter OAuth Local Setting
# - 可能なら環境変数にしてしまったほうがいいと思います
twitter_key:    "xxxxxxxxxxxxxxxxxxxxxxx"
twitter_secret: "yyyyyyyyyyyyyyyyyyyyyyyyyyyy"

controllerの処理を追加

新しい処理を行うcontrollerのactionを追加します。

app/controller/top_controller.rbに以下の内容を追加します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
class TopController < ApplicationController
  # ↓ ここを追加
  # tweet
  def tweet
    client = Twitter::REST::Client.new do |config|
      # applicationの設定
      config.consumer_key         = Settings.twitter_key
      config.consumer_secret      = Settings.twitter_secret
      # ユーザー情報の設定
      user_auth = current_user.authentications.first
      config.access_token         = user_auth.token
      config.access_token_secret  = user_auth.secret
    end

    # Twitter投稿
    client.update(params[:text])

    redirect_to root_path, notice: 'ツイートしました!'
  end
end

viewを作成

app/views/top/index.html.haml にフォームを設置します。

1
2
3
= form_tag tweet_path do
  = text_area_tag :text
  = submit_tag 'ツイートする'

あと念のため、今回は facebook / githubのログインは削除します。

app/views/layouts/application.html.haml の以下を削除してください。

1
2
= link_to 'Facebook', '/auth/facebook'
= link_to 'GitHub',   '/auth/github'

routesに以下を追加

ルーティング情報を追加します。

config/routes.rbに以下の内容を追加します。

1
2
3
4
Rails.application.routes.draw do
  # tweet
  post '/top/tweet' => 'top#tweet', as: :tweet
end

実行確認

ターミナルで以下のコマンドを実行して rails サーバーを起動してください。 (Cloud9の場合は、startボタンでrailsサーバーを起動)

1
bundle exec rails s

そして、ブラウザで http://localhost:3000 を開いてください。

左上の「Login: Twitter」をクリックしてログイン。そしてツイートボタンをおすと

とツイートできました。(※ 実話です!)

(補足) minimum-omniauth-scaffold について

今回使ったRubyGemの shu0115/minimum-omniauth-scaffold は、Facebook/Twitter/GitHubのアカウントを使ったログイン機能のscaffoldを提供してくれるGemです。

すごく便利なのでFacebook/Twitter/GitHubのアカウントを使ったログイン機能を実装したいときは、是非試してみてください。

ちなみに、拙著の紹介記事は、『「minimum-omniauth-scaffold」 Facebook/Twitter/GitHubログインを高速実装!』もおすすめです!


Special Thanks

おすすめの書籍