oEmbed は、URLよりページに埋め込み可能なコードを得るのに便利なしくみです。Movable Typeのサイトでこれを提供するための方法(正式なものではありませんが)のメモです。
oEmbed については、以下のページが詳しく解説されています。
設計の概要は以下の通りです。
- URL情報から、必要な情報を取得するのに Data-API を使用する
- Data-API から、URLに対応する記事の情報を返すAPIのカスタムインデックステンプレートを作る。APIはとりあえず、PHPで作成する
- APIは外部サイトからのクロスドメインアクセスの都合上、 Access-Control-Allow-Originヘッダー 出力で対策しておく
- APIで返す内容は、パーマリンク、ページタイトル、ページコンテンツくらいでよい。タイプはrich(iframe 利用)にすることで、概要・記事で使用している画像サムネイル等も掲載できる
- ページコンテンツは EntryExcerpt (Data-API でのキーは excerpt)を利用する(毎記事適切な概要入力されていること前提として)
- iframe で返すためのアーカイブテンプレートが必要
- エンベッド用アーカイブをアーカイブテンプレートに追加する
- エンベッド用アーカイブのURIと元記事のURIを紐付けしないと呼び出しができない。このブログではパーマリンクに記事IDを含めていないため、そのままでは無理
- 元記事のURI(/path/to/archives/記事ファイルネーム/)は /path/to/archives/embed/記事ファイルネーム/ のように置換する方針とする
- /embed/* は robots.txt 等に検索でインデックスされないようにしておく
- エンベッド用アーカイブは、使用頻度からダイナミックパブリッシングのほうで採用。表示パフォーマンスは不利になるが、仕組上、エンベッド記事の実体(静的なファイル)はないので、全体の再構築のときに響かない
流れとして、もう少し簡単にまとめます。
- Data-APIをつかって、記事に関係するデータをJSON形式であらかじめ出力しておく
- 記事URLのリクエストから、記事情報を得る
- 必要な情報をパースして、oEmbedの仕様に合った形式で返す
- エンベッド用のアーカイブを用意してこれを iframe にて埋め込む形にする
概説になりましたが、oEmbed対応については以上です。
以下に API のテンプレートのサンプルがあります。実際に使用しているもので、直に記述している部分をテンプレートタグに置き換えしたものです。
※ このブログのURLの構成に基づいているので、そのままコピーしただけでは使えません。
※ Movable Typeのテンプレートタグが入っていますので、他のCMSでも同様にそのままの状態では使用できません。
※ Data-APIの同梱されていない Movable Typeでは動作しません。出力のJSONのキャッシュとして、bit-part/mt-plugin-DataAPIPHPCache を使っています。
※ 作成したのが Data-API のバージョンが 1のときのもので現在は v2 が出ていますが、/v1/ のフォルダがのこっていればそのまま使えています。
実際に使用している記事は以下にあります。WordPressでは、標準で、oEmbedのサイトはホワイトリスト方式になっていますので、wp_oembed_add_provider()に追加しておくなどします。
(上の記事は出力結果の例で、oEmbed の使用は、記事作成の画面のところで記事URLのコピーを貼付けします)