動的に Twitter の検索結果を取得＆表示してみたかった
かなり前になっちゃいますが、御朱印の Web サービスを作ってみようかなと思っていたんですが、その中で神社・仏閣の御朱印についてのつぶやき（ツィート）を表示しようかなと考えてました。例えば、熱田神宮についてのページを見た時には『伏見稲荷 御朱印』で検索したようなツィートが表示される、という感じです。（先に完成したものを貼っておきます）
一番シンプルな形でやろうとすると、Twitter の埋め込み型のウィジェット作成機能に頼ることになるんですが、これだと数千・数万ある神社・仏閣の全てでウィジェットの作成が必要になるので現実的じゃありません。ということで、任意のワードで Twitter を検索し、その結果を表示することをまずは手元で試してみようかなと思った次第です。色々とてこずったのでメモを残しておきます。
目次
ステップ1：まずは Ruby 開発環境準備から
事前に準備としてやるべきことは2つあって、1つは Windows 環境に Ruby をインストールすることです。Mac 環境の方は特に無視してもらって、Mac 用の Ruby 導入方法を試してください。
Windows 環境での Ruby 導入方法としては、公式ページからたどれるものがいくつかあります。
良く紹介されているのは RubyInstaller ですね。gem と呼ばれる Ruby 用のパッケージ管理システムを利用するためには DevKitTool を導入する必要等がありますが、その手の資料は豊富にあるのでそちらを参考にすればよいと思われます。ただ、最近はメンテが別の開発者に移ったようで、2.4 以降のものについては資料が少なめです。自分はその登場前に導入したので Ruby は 2.3.3 で、DevKitTool を利用しました。
ちょっと気になったのは RailsInstaller というインストーラで、こちらは Rails が利用できるまでを1セットで行える様なので実はこっちが楽だったりするのかも？試してないので何とも言えませんが。
ステップ2：Twitter の開発者・アプリ登録
お次は Twitter の API を利用するために開発者登録とアプリ登録を行いましょう。
https://dev.twitter.com/index が開発者向け情報が集まっているところで、ドキュメントへのリンクなどもあります。このページの上部にある 『My apps』を選んでみると、Twitter に登録している自分が開発中のアプリ一覧が表示されます。まだ開発者登録をしていないと登録を促されることになるかと思います。実際の登録手順やらは以下のページを参考にさせていただきました。
注意点としてはアプリケーションの開発には、電話番号とメールアドレスの登録が必須であるという点ですね。まぁ、やましいところはないのでサクッと登録してしまいましょう。アプリケーション登録後は『Keys and Access Tokens』のタブに書かれている Consumer Key (API Key) と Consumer Secret (API Secret) が開発に必要になりますので確認しておきましょう。これは公開しちゃうとなりすまして API 呼ばれてしまうのでむやみに公開しないのが吉。
ステップ3：Twitter API を扱うために gem を導入する
Ruby で Twitter の API を簡単にたたくために gem を導入します。GitHub のプロジェクトは こちら です。
gem install twitter
これでインストールは完了で、後はコードを書くだけですが、少し引っかかるところがありました。
SSL_Connect エラーが出てしまった場合の対処方法
普通にコードを書いて Twitter の検索結果を取得しようとすると、SSL コネクションエラーではじき返されてしまいました。これについては全く同じ壁にぶつかられた方が対処方法を公開されていたのでそちらで乗り切れました。感謝！
Qiita：RubyでTwitterを SSLではじかれる件（Windows)
対処方法は一行コードを追加して SSL の検証をすっ飛ばすものと、ちゃんと設定を変更してやる方法の2つが紹介されてますが、今回は別の時に困る可能性を考慮して後者を選択しました。Ruby の通信で利用する証明書の置き場所とか知らなかったよ……。
ステップ4：コードを書いてみる
準備は整ったのでコードを書いてみた結果が↓こちら。
ごくごく簡単なコメントは入れていますが、大したことはしておりません。
最終的に出力したいのはツィートをまとめた HTML ファイルなので、そのあたりをベタっと出力して、コンテンツとなるツィートは、検索結果をもとにツィートの ID を Twitter 公式のウィジェットのコードにそのまま渡しているだけです。
#!/usr/bin/env ruby
# coding: utf-8
require 'twitter'
client ||= Twitter::REST::Client.new do |config|
config.consumer_key = 'ここは発行されたアクセスキーを入れるところ'
config.consumer_secret = 'ここは発行されたシークレットを入れるところ'
end
if ARGV[0].nil?
puts 'Erro occured. Please input keyword'
exit 1
end
word = ARGV[0]
# 出力する HTML ファイルの途中（ツィートの表示する前の部分）をベタっと出力する
puts <<-EOS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>#{word}</title>
<script src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</head>
<body>
<div id="container"></div>
<script>
EOS
# 雑に SSL 検証をスルーしたい場合は下の行のコメントアウトを削除する
#OpenSSL::SSL::VERIFY_PEER = OpenSSL::SSL::VERIFY_NONE
# 御朱印と指定した単語（サービス的には神社仏閣名）を含んで、かつ画像が掲載されているツィートを検索し、Twitter のウィジェットで表示する
client.search("#{word} 御朱印 filter:images", lang: 'ja', result_type: 'recent').map do |tweet|
puts "\t\ttwttr.widgets.createTweet('#{tweet.id}', document.getElementById('container'),{theme: 'dark'});"
end
# ツィート以下の HTML 後半部分をベタに出力する
puts <<-EOS
</script>
</body>
</html>
EOS
完成品と改善点など
とりあえず完成したものを再度こちらに貼っておきます。やりたかったこと自体は達成できているので、まぁ満足です。
ただ、本当はタイムライン風にツィートを表示したかったのですが、今回は一番簡単な Twitter 公式の単体ツィート表示用のウィジェットを利用してみました。たぶんガイドラインを守ればもう少し見た目を変えたりすることはできそうな感じです。API によりツィートのユーザー名などもとれるのでそのあたりもちゃんと表示できますし、実際にサービスを作る段階になったらもう少し掘り下げて考えてみたいところです。
コメントはまだありません