LoginSignup
15

More than 3 years have passed since last update.

ポートフォリオにTwitterAPIを使ってツイートする機能を実装する(アカウント申請した後の流れ)

Last updated at Posted at 2020-11-21

Ruby on Railsで製作したポートフォリオ(ダイエットアプリ)にTwitterAPIを連携させて、ポートフォリオで投稿すると、Twitterにツイートされるような設定を行いました。

やりたいこと

ポートフォリオのアプリで投稿すると、Twitterで「投稿しました」とツイートされるようにしたい。
Railsで投稿系のアプリを作っている方で、「Twitter APIと連携させたい」と思っている方の参考になれば幸いです。

ちなみに、deviseと連携してTwitterログイン機能を実装されている方もいますが、僕はまだそれはやっていません。

TwitterAPIと連携させる手順

① TwitterAPIに自分のアプリの登録手続きを行う
② Twitter developerアカウントでAPI key(Consumer Key)、API secret key(Cosumer Secret)、Access token、Access token secretの4つを取得する
③ TwitterAPIに書き込み権限を許可する
④ gem 'twitter'を$ bundle installする
⑤ 投稿するコントローラー(PostsController)に必要な記述を追加する

今回の記事では、②〜⑤について説明します。

①TwitterAPIへのアプリ登録手続きのやり方 については、
Twitter API 登録 (アカウント申請方法) から承認されるまでの手順まとめ ※2019年8月時点の情報
にかなり丁寧に書かれていますので、こちらを見ながら進めて頂ければと思います。

TwitterAPIの用途を英語で書く必要がありますが、英語力全く自信ない自分でもできたので、全然大丈夫だと思います。

①の手続きが特に問題なければ、「Account Application Approved」というタイトルのメールが届きます。そのメールに記載されているリンクからdeveloper acountに入ることができます。メールは手続きしてからその日の数時間後に届きました。

② Twitter developerアカウントでAPI key(Consumer Key)、API secret key(Cosumer Secret)、Access token、Access token secretの4つを取得する

「いきなり難しそうな横文字が出てきて何だ?!」と思うかもしれませんが、なんてことないです。
あとで⑤コントローラーに追加の記述をするところで使うための準備をするだけです。

画像の箇所にカーソルを合わせると「keys and tokens」と表示が出てきます。カギのマークをクリックします。
スクリーンショット 2020-11-21 午後7.30.55.png

すでにAPIキーとシークレットキーを登録済みであれば「View keys」を、まだ作っていなければ「Regenerate」をクリックしましょう。
どちらを押しても特に問題が起きる心配はないので大丈夫です。
スクリーンショット 2020-11-21 午後7.34.15.png

必要な4つの情報のうち2つはわかったので、残りあと2つですね。
Access tokens & secretの「Revoke」は取り消すという意味だったので、「Regenerate(作り直す)」がいいと思います。
スクリーンショット 2020-11-21 午後7.38.02.png

③ TwitterAPIに書き込み権限を許可する

settingタブをクリックしましょう。
スクリーンショット 2020-11-21 午後7.55.21.png

ちょっと下の方に行って「App permissions」の「Edit」をクリックしましょう。
スクリーンショット 2020-11-21 午後7.57.37.png

書き込み権限を許可する設定にしましょう。
スクリーンショット 2020-11-21 午後7.58.52.png

④ gem 'twitter'を$ bundle installする

https://github.com/sferik/twitter
公式ページにも書いてあるので、ぜひご確認ください。

⑤ 投稿するコントローラー(PostsController)に必要な記述を追加する

やることはめちゃくちゃ少ないです。
本当にこれだけ?!という感じです。

privateメソッドに下記の記述を書き込む
先ほどdeveloper アカウントで確認した4つの情報をここで使います。

セキュリティ対策として、環境変数での設定に修正しました。

posts_controller.rb
private
  def twitter_client
    @client = Twitter::REST::Client.new do |config|
      config.consumer_key = ENV['CONSUMER_KEY']
      config.consumer_secret = ENV['CONSUMER_SECRET']
      config.access_token = ENV['ACCESS_TOKEN']
      config.access_token_secret = ENV['ACCESS_TOKEN_SECRET']
    end
  end

環境変数で設定するやり方

下記コマンドで環境変数を設定するファイルを開きます。

vim ~/.bash_profile 

そこに下記のように環境変数を設定します。

export CONSUMER_KEY='config.consumer_keyに代入する文字列'
export CONSUMER_SECRET='config.consumer_secretに代入する文字列'
export ACCESS_TOKEN='config.access_tokenに代入する文字列'
export ACCESS_TOKEN_SECRET='config.access_token_secretに代入する文字列'

最後に上記の設定を反映させるため下記のコマンドを実行します。

source ~/.bash_profile

☆☆☆ 注意 ☆☆☆
Twitter APIの権限を「読み込みのみ」から「読み込みと書き込み」に変更した場合は、③で確認した4つのキーやトークンを作り直す必要があります(regenerateをクリックするだけです)のでご注意ください。

ストロングパラメーターで設定したTwitterAPIキーの設定をcreateメソッドに反映させるために、上の方に下記の記述を追加します。

posts_controller.rb
before_action :twitter_client, only: [:create]

そして投稿が保存された場合の挙動に下記の記述を追加します。
引数にTwitterにツイートしたい文章を入れてください。

posts_controller.rb
def create
  @post = Post.new(post_params)
    if @post.save
      @client.update("例)投稿しました!(ここにTwitterにツイートされる内容を書き込む)")
      redirect_back(fallback_location: root_path)
    else
     #省略
    end
end

どうでしたか?思ったよりやること少なくてビックリですよね?
それだけ使いやすく作られているということですね!

僕は書き込み権限を許可する設定をせずに投稿しようとしてちょっと詰まりました...。
皆さんはそんなことしないようにお気をつけください。

完成イメージ動画

8b7f434d469683ebbbdca1146c56feb4.gif
Gyazo GIFは7秒しか録画できないので、非常にわかりづらいかもしれませんが、雰囲気だけでも伝わってくれたら嬉しいです。

ダイエットアプリなので、食べたものを投稿できるようになっているのですが、食べたものを投稿すると、Twitterで「TwitterAPIと連携しました!!」と自動でツイートされる設定をしました。よーく見ると見えるかもしれません。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15