Shogo's Blog

Aug 9, 2012 - 1 minute read - Comments - Octopress

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

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

```plain
{% oembed URL %}

Twitter

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

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

slideshare

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

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

YouTube

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

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

参考