Shogo's Blog

たぶんプログラミングとかについて書いていくブログ

Octopress用OEmbedプラグインを作ってみた

Octopressでツイートを引用しようと思ったけど 使えそうなプラグインがなかったので作ってみた。 ツイートに限らずいろんなものを挿入できるよ!

OEmbed

調べてみるとツイートの表示はOEmbedというのを使うとできるらしい。 これはURLを埋め込み適した形に変換してくれるプロトコル。 ツイートのURLから引用のためのHTMLを作ったり、YouTubeのURLから動画再生用のHTMLを作ることができる。

せっかくだからOEmbedに対応してしまえばいろんなものを埋め込めて便利だよね!ってことでやってみた。

インストール

ruby-oembedをインストール。

1
gem install ruby-oembed

ruby-oembedは名前から想像できる通り、RubyでOEmbedプロトコルを扱うためのライブラリ。 Provider(OEmbedの提供者)を自分で追加したり、Discovery(HTMLドキュメントにProviderの情報を入れる)にも対応している。 しかし、プロキシ環境下で動かなかったり、文字コードのエラーを吐いて死んだりしたので、 フォークして改造版ruby-oembedを作った。 もしオリジナルで不具合が出るようなら、こちらもどうぞ。

oembed_tagからoembed_tag.rbをダウンロードして、pluginsフォルダに置く。

Gemfileを適当なテキストエディタで開き、「gem ‘ruby-oembed'」の行を追加

Gemfile
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
source "http://rubygems.org"

group :development do
  gem 'rake'
  gem 'rack'
  gem 'jekyll'
  gem 'rdiscount'
  gem 'pygments.rb'
  gem 'RedCloth'
  gem 'haml', '>= 3.1'
  gem 'compass', '>= 0.11'
  gem 'rubypants'
  gem 'rb-fsevent'
  gem 'stringex'
  gem 'liquid', '2.2.2'
  gem 'ruby-oembed' #追加
end

gem 'sinatra', '1.2.6'

これでとりあえずは動くはず。 以上の作業に加えて、キャッシュファイルがリポジトリに含まれないよう.gitignoreに.oembed-cacheを追加しておく。

使い方

以下の様に書くと、適切な埋め込み方法をWebから取得して変換してくれる。

1
{% oembed URL %}

Twitter

1
{% oembed https://twitter.com/shogo82148/status/233612741670207488 %}

slideshare

1
{% oembed http://www.slideshare.net/shogo82148/ss-10377588 %}

YouTube

1
{% oembed http://www.youtube.com/watch?v=rrsxEGgQDkM %}

参考

Comments