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

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

OEmbed

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

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

インストール

ruby-oembedをインストール。

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’」の行を追加

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から取得して変換してくれる。

&#123;% oembed URL %&#125;

例

Twitter

&#123;% oembed https://twitter.com/shogo82148/status/233612741670207488 %&#125;

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

slideshare

&#123;% oembed http://www.slideshare.net/shogo82148/ss-10377588 %&#125;

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

YouTube

&#123;% oembed http://www.youtube.com/watch?v=rrsxEGgQDkM %&#125;

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

Shogo's Blog