Movable TypeでoEmbed提供 (仮)

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 のテンプレートのサンプルがあります。実際に使用しているもので、直に記述している部分をテンプレートタグに置き換えしたものです。

Movable Type 6 ~ oEmbed提供用のファイルサンプル -- Bitbucket

※ このブログの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 対応テスト | maRkのつれづれぼっくす

（上の記事は出力結果の例で、oEmbed の使用は、記事作成の画面のところで記事URLのコピーを貼付けします）

Movable TypeでoEmbed提供 (仮)

Comments:

Trackbacks:0