hexo-oembedを公開しました

2019-02-07Tech / WebHexo, Web, npm, oEmbed

HexoにYouTubeなどのサイトを記事に埋め込むためのプラグインを作成して、npmに公開しました。この記事はそのプラグインの紹介記事です。

https://www.npmjs.com/package/hexo-oembed

embed oEmbed item on your Hexo article.. Latest version: 0.1.8, last published: 2 years ago. Start using hexo-oembed in your project by runn…

プラグイン制作記事は以下に書きました。興味があればそちらも読んで頂けると嬉しいです。

hexo-oembedについて

hexo-oembedはブログ構築ツールHexoのプラグインで、投稿にYouTubeやSlideShareやSpeaker Deckやインスタグラム等さまざまなメディアをパーマリンクを指定するだけで埋め込むためのタグを提供します。埋め込みのための業界標準としてoEmbedというものがありますが、この仕様を利用しているためhexo-oembedという名前になっています。特徴は以下です。

oEmbed Discoveryのサポート
- YouTube, Vimeo, Twitter, SlideShare, Speaker Deck, CodePen, TED, pixiv等、oEmbed Discoveryに対応している様々なメディアを埋め込むことができます
- パーマリンクがoEmbed Discoveryに対応しているかどうかは、oEmbed Testerでしらべることができます
oEmbedのエンドポイントを設定ファイルで指定可能
- oEmbed Discoveryに対応していないサイトでも、oEmbedに対応していればoEmbedのエンドポイントを個別に設定ファイル(_config.yml)に指定することで埋め込めます
- Instagram, Gyazo, FlickrなどはoEmbedに対応しています
- エンドポイントはoEmbedのサイトから入手可能です

インストール

npmコマンドでインストールしてください。

1	`$ npm install hexo-oembed --save`

使い方

埋め込みたいページのパーマリンクを指定するだけです。[maxwidth]と[maxheight]は埋め込みのオブジェクトに期待する最大幅と最大高を数値(ピクセル)で指定します。サイトが対応していればこの値を超えない埋め込みコンテンツを返してくれます。

1	`{% oembed permlink [maxwidth] [maxheight] %}`

デモ

貼ろうと思えば楽しくていくらでも貼れる感じですが重くなるので3つにしておきます。
もっと見たい方はデモページをご覧ください。

YouTube

ちょうどこれを書いているときに3億再生いきました。マトリョシカの頃から応援してたけどまさかここまで人気になるとは・・・

1	`{% oembed https://www.youtube.com/watch?v=SX_ViT4Ra7k %}`

Twitter

1	`{% oembed https://twitter.com/hinastory999/status/1089514744174632960 %}`

Kubernetes Meetup Tokyo　#15 - KubeCon 2018 Recap に初参加 - cats cats cats https://t.co/O3ScDbSriz
— hinastory (@hinastory999) January 27, 2019

Speaker Deck

1	`{% oembed https://speakerdeck.com/ladicle/recap-kubecon-plus-cloud-nativecon-north-america-2018-overview %}`

設定

Hexoの設定ファイル(_config.yml)に以下の設定が可能です。

className

埋め込まれたコンテンツに付与されるCSSクラスのベース名を指定できます。
(デフォルト: oembed)

endpoints

oEmbedプロバイダのエンドポイントを指定できます。
(デフォルト: なし)

oEmbedプロバイダは以下から取得できます。

https://oembed.com/#section7

oEmbedプロバイダのエンドポイントとしてmatchとurlが定義できます。パーマリンクのホスト名がmatchを含んでいた場合、そのエンドポイントが選択され,urlのアドレスでプロバイダに問い合わせます。

もしエンドポイントの定義にマッチしなかった場合は oEmbed Discoveryを利用してエンドポイントを探します。

例えばYouTubeはoEmbed Discoveryに対応しているのでendpointsにYouTubeの定義は必要ありません。

embedlyKey

もし、embedlyKeyを指定すればEmbed.lyにフォールバックします。

Embed.lyはoEmbedに対応していないサイトのoEmbed情報の提供も行っています。利用したい場合はサインアップして、APIキーの設定してください。

設定サンプル

_config.yml:

oembed:
  className: oembed
  embedlyKey:
  endpoints:
    instagram:
      match: instagram
      url: http://api.instagram.com/oembed/
    gyazo:
      match: gyazo
      url: https://api.gyazo.com/api/oembed/
    flickr:
      match: flickr
      url: http://www.flickr.com/services/oembed/

リポジトリ

以下のリポジトリで開発しています。バグ報告、ご要望はIssuesへどうぞ。プルリクエストも歓迎です。

hexo-oembedを公開しました

hexo-oembedについて

インストール

使い方