はじめに
facebookで投稿するときにurlを貼り付けると、自動的に写真や記事のタイトルがカードになって表示されるのが素敵で、どうやっているのか気になって調べてみました。
忘れそうなので書いておきます。
環境
rails 4.2.4
ruby 2.0.0
OGP（Open Graph Protocol）
サイトの紹介に使用する簡単な説明や画像をhtmlに記すためのルール。
htmlのmetaタグに書かれた情報を元に、写真や記事タイトルを取得してカードで表示しているそうです。
The Open Graph protocolやfacebook for developersが詳しいです。
ただ、全てのサイトがOGPで書かれた情報があるわけではないので、例えばサイトのタイトルであれば、titleタグで取得するなどしたほうがよさそう。
Nokogiri
Railsで、リンク先のHTML解析などをやるにはこれがいいらしい。
Nokogiriとopen-uriをインストール
gemfile
gem 'nokogiri'
gem 'open-uri'
$ bundle install
NokogiriでHTMLを読み込む
require 'nokogiri'
require 'open-uri'
url = 'http://www.perfume-web.jp'
charset = nil
html = open(url) do |f|
charset = f.charset # 文字種別を取得
f.read # htmlを読み込んで変数htmlに渡す
end
# ノコギリを使ってhtmlを解析
doc = Nokogiri::HTML.parse(html, charset)
解析した中から欲しい情報をピックアップする
doc.css(@@@)で、@@@はCSSセレクタで要素を指定してればよいみたい。
今回のようにcontent属性を取りたい場合は/@contentをセレクタの後ろにしていすればよいようです。
サイトのタイトル
# site title
if doc.css('//meta[property="og:site_name"]/@content').empty?
p doc.title.to_s
else
p doc.css('//meta[property="og:site_name"]/@content').to_s
end
サイトのdescription
# description
if doc.css('//meta[property="og:description"]/@content').empty?
p doc.css('//meta[name$="escription"]/@content').to_s
else
p doc.css('//meta[property="og:description"]/@content').to_s
end
サイトのイメージ
# image
p doc.css('//meta[property="og:image"]/@content').to_s
結果
"Perfume Official Site"
"所属事務所アミューズによるPerfumeオフィシャルサイト"
"http://www.perfume-web.jp/img/og.png"
参考にしたページ
Nokogiriのこと
http://morizyun.github.io/blog/ruby-nokogiri-scraping-tutorial/
meta要素のこと
https://reference.hyper-text.org/html5/element/meta/