Rails環境でTwitterとFacebookを使ってサイトの拡散をするため自動投稿させるアプリを作成してみた

On 5 12月, 2014 By yoshii With 0 Comments

今回、こんなキャンペーンサイトをつくりました。

複数の応募作品に対して「投票」をするサイト
「投票」するにはTwitterかFacebookのアカウントが必要
アカウントを使って「投票」すると、投票した旨がそのアカウントから投稿・ツイートされる

開発を担当し、（ほぼ）初めてTwitterとFacebookのアプリを作りAPIを叩いたりしたので、情報をまとめてみます。
Facebookアプリは、一部のAPI利用のためにレビュー申請をしなければならないなど難しい点が多く、ハマりどころが多かったのですが、それは別の記事にまとめようと思います。

今回は TwitterとFacebookの比較、アプリ登録〜Ruby on Railsでの実装 をまとめてみます。

環境

Ruby 2.1.2
Rails 4.1.6

アプリの登録

Twitter／Facebook どちらもアカウントが必要です。
今回は開発用アプリと本番用アプリを２つずつ登録しました。こうすることで、開発環境と本番環境で別のAPI Keyを使用することができます。

Twitter／Facebookのアプリの違い

Twitterは、アカウントとアプリが１：Ｎで紐付いています。
１つのアカウントが複数のアプリを作成できますが、その アカウントに対してアプリが紐づいている ため他のアカウントでアプリの管理などはできません。

逆にFacebookは、アカウントとアプリがＮ：１で紐付くイメージです。
あるアプリにはＡさんとＢさんが開発者として紐づいており、また別のアプリではＢさんとＣさんが開発者、というように アプリに対してアカウントが紐づいている という違いがあります。

ただ、どちらもアプリ固有のAPIキーを使用してAPIにアクセスする、という点は同じです。

Twitterアプリの登録

Twitterにログインし、 https://apps.twitter.com/ にアクセス。

Create New App をクリック。

必要項目を埋めて Create your Twitter Application をクリックします。

アプリ登録が完了すると、画面上でAPI Keyが確認できます。

Facebookアプリの登録

Facebookのポリシー上「複数アカウントを持つ」ことが許可されていないため、開発用アカウントを作成してアプリ登録ということは基本的にできません。持っているアカウントで登録をしましょう。

まずは https://developers.facebook.com/ から開発者登録をします。
その後、ヘッダの「Apps」から Add a New App を選択。

ウェブサイト向けアプリを選択。

必要な項目を入力すると、アプリが登録できます。簡単ですね。登録が完了すると、Twitter同様API Keyが確認できます。

実装

今回はRails環境なので、以下のGemを使って便利に実装しました。

Omniauth … OAuth認証してログイン処理をしてくれる
Koala … FacebookのGraph APIにアクセスするライブラリ
Twitter … Twitter APIにアクセスするライブラリ

共通設定

Rails4.1以降はAPI Keyなどを config/secrets.yml に書くと良いようです。

config/secrets.yml

# プログラムからは Rails.application.secrets.facebook_id のようにアクセスできます。

# 開発用アプリのKeyを直接設定
default: &default
  facebook_id: '000000000000000'
  facebook_secret_key: '0123456789abcdef0123456789abcdef'
  twitter_consumer_key: 'xxxxxxxxxxxxxxxxxxxxxxx'
  twitter_consumer_secret: 'yyyyyyyyyyyyyyyyyyyyyyyyyyyy'

development:
  <<: *default

test:
  <<: *default

# 本番環境では環境変数にKEYを登録します
production:
  facebook_id: <%= ENV["FACEBOOK_APP_ID"] %>
  facebook_secret_key: <%= ENV["FACEBOOK_APP_SECRET"] %>
  twitter_consumer_key: <%= ENV["TWITTER_CONSUMER_KEY"] %>
  twitter_consumer_secret: <%= ENV["TWITTER_CONSUMER_SECRET"] %>

# プログラムからは Rails.application.secrets.facebook_id のようにアクセスできます。

# 開発用アプリのKeyを直接設定

default: &default

facebook_id: '000000000000000'

facebook_secret_key: '0123456789abcdef0123456789abcdef'

twitter_consumer_key: 'xxxxxxxxxxxxxxxxxxxxxxx'

twitter_consumer_secret: 'yyyyyyyyyyyyyyyyyyyyyyyyyyyy'

development:

<<: *default

test:

<<: *default

# 本番環境では環境変数にKEYを登録します

production:

facebook_id: <%= ENV["FACEBOOK_APP_ID"] %>

facebook_secret_key: <%= ENV["FACEBOOK_APP_SECRET"] %>

twitter_consumer_key: <%= ENV["TWITTER_CONSUMER_KEY"] %>

twitter_consumer_secret: <%= ENV["TWITTER_CONSUMER_SECRET"] %>

config/initializers/omniauth.rb

# 認証
Rails.application.config.middleware.use OmniAuth::Builder do
  # facebook scopeを指定し、使用する権限を明記する必要があります
  provider :facebook, Rails.application.secrets.facebook_id, Rails.application.secrets.facebook_secret_key, scope: 'email,status_update,publish_actions'

  # twitter
  provider :twitter, Rails.application.secrets.twitter_consumer_key, Rails.application.secrets.twitter_consumer_secret
end

# キャンセル
OmniAuth.config.on_failure = Proc.new do |env|
  OmniAuth::FailureEndpoint.new(env).redirect_to_failure
end

# 認証

Rails.application.config.middleware.use OmniAuth::Builder do

# facebook scopeを指定し、使用する権限を明記する必要があります

provider :facebook, Rails.application.secrets.facebook_id, Rails.application.secrets.facebook_secret_key, scope: 'email,status_update,publish_actions'

# twitter

provider :twitter, Rails.application.secrets.twitter_consumer_key, Rails.application.secrets.twitter_consumer_secret

end

# キャンセル

OmniAuth.config.on_failure = Proc.new do |env|

OmniAuth::FailureEndpoint.new(env).redirect_to_failure

end

Twitter

こんな感じで投稿ができました。Keyは auth から引っぱってこれそうな気がしますが、ちょっと分からなかったのでライブラリの例に倣って書きました。

    auth = request.env["omniauth.auth"]
    
    client = Twitter::REST::Client.new do |config|
      # developer
      config.consumer_key         = Rails.application.secrets.twitter_consumer_key
      config.consumer_secret      = Rails.application.secrets.twitter_consumer_secret
      # user
      config.access_token         = auth.credentials.token
      config.access_token_secret  = auth.credentials.secret
    end
    
    # Twitter投稿
    client.update("投稿の内容をここに記述")

    # フォローさせることもできます
    client.follow("twitter_acount_name")

auth = request.env["omniauth.auth"]

client = Twitter::REST::Client.new do |config|

# developer

config.consumer_key = Rails.application.secrets.twitter_consumer_key

config.consumer_secret = Rails.application.secrets.twitter_consumer_secret

# user

config.access_token = auth.credentials.token

config.access_token_secret = auth.credentials.secret

end

# Twitter投稿

client.update("投稿の内容をここに記述")

# フォローさせることもできます

client.follow("twitter_acount_name")

Facebook

コード上はこういう感じでOKです。
ただ実際にアプリから投稿APIを使用するには、Facebookにアプリのレビューをしてもらう必要があります。その辺りについてはまた後日…。

    auth = request.env["omniauth.auth"]
    access_token = auth.credentials.token
    
    graph = Koala::Facebook::API.new(access_token)
    graph.put_wall_post("本文", {
      "name" => "リンク先の名前（タイトル）",
      "link" => "http://www.campaign-site_url.xxx/",
      "description" => "リンクの説明",
      "picture" => "http://www.campaign-site_url.xxx/image.jpg"
    })

auth = request.env["omniauth.auth"]

access_token = auth.credentials.token

graph = Koala::Facebook::API.new(access_token)

graph.put_wall_post("本文", {

"name" => "リンク先の名前（タイトル）",

"link" => "http://www.campaign-site_url.xxx/",

"description" => "リンクの説明",

"picture" => "http://www.campaign-site_url.xxx/image.jpg"

})

投稿したリンクのプレビュー方法

TwitterでもFacebookでも、ただテキストを投稿するのではなく、プレビュー画像なども一緒に投稿できると分かりやすくて良いと思います。

例えばTwitterでYouTubeのリンク先を含めてツイートするとタイムラインでプレビューができたりしますが、似たようなことが自作サイトでも実現可能です。

TwitterとFacebookで方法がかなり違うので、これも押さえておくと役に立つのではないかと思います。

Twitterでプレビュー

Twitter Cardsを利用します。これにより、先ほどのYouTubeの例のように 「URLをツイートすると自動でプレビューを表示」 させることができます。
カードの種類は何点かありますが、キャンペーンサイトであれば画像をプレビューする程度のベーシックなSummaryカードで良いと思います。

リンク先のHTMLにメタタグを挿入します。
Card ValidatorサイトにてURLの申請をします。URLを入力して申請するだけで数分で完了します。

Facebookでプレビュー

こちらはTwitterよりも簡単で、投稿用APIの引数に画像のURL等を渡してあげるだけでOKです。
少し上にも同じコードを載せていますが、Koalaを使った場合は以下のようにするとプレビューを出すことができます。

    graph.put_wall_post("本文", {
      "name" => "リンク先の名前（タイトル）",
      "link" => "http://www.campaign-site_url.xxx/",
      "description" => "リンクの説明",
      "picture" => "http://www.campaign-site_url.xxx/image.jpg"
    })

graph.put_wall_post("本文", {

"name" => "リンク先の名前（タイトル）",

"link" => "http://www.campaign-site_url.xxx/",

"description" => "リンクの説明",

"picture" => "http://www.campaign-site_url.xxx/image.jpg"

})

より詳細な情報は、実際に実行しているAPI /user/feed のリファレンスを参照してみてください。

おまけ – ロゴの使用規約

TwitterとFacebookと連携したサイトを作るとなると、ボタンやアイコンにロゴを入れたりすることもあると思います。当然と言えば当然ですが、これも規約が決まっており勝手なロゴ使用はできません。

エンジニアの立場としては、どちらかというとデザイナーさんが用意したものを適用する、というケースが多いかもしれませんが、利用規約は知っておくべきかと思います。

Twitterのブランドガイドライン | About
https://about.twitter.com/ja/press/brand-assets
Using Facebook Brand Assets
https://www.facebookbrand.com/

Pocket