• 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。(詳細

このWikiはいつでも誰でも編集できます

「oEmbed」の版間の差分

提供: WordPress Codex 日本語版
移動先: 案内検索
(改名提案はなし、oEmbedとします。)
(最新版に更新、対応サイトのリストと更新履歴を英語版のリンクに変更。)
2行目: 2行目:
 
__TOC__
 
__TOC__
  
簡単な[[ショートコード API|ショートコード]]を使うことで、 WordPress サイトに動画・画像・ツイート・音楽などのコンテンツを、とても簡単に '''埋め込む'''(embed)ことができます。
+
簡単な[[ショートコード API|ショートコード]]を使うことで、 WordPress サイトに動画・画像・ツイート・音楽などのコンテンツを、とても簡単に '''埋め込む'''(embed)ことができます。この機能は [https://wordpress.org/news/2009/12/wordpress-2-9/ WordPress 2.9] で追加されました。
  
== 概要 ==
+
== 使い方 ==
  
 
[[Writing Posts|投稿]]や[[Pages|固定ページ]]にメディアを埋め込むには、本文欄に URL を書くだけです。URL は独立した行に書くこと、(投稿表示時にクリックできるような)[[Wikipedia:ja:ハイパーリンク|ハイパーリンク]]にしないこと、の2点に注意してください。
 
[[Writing Posts|投稿]]や[[Pages|固定ページ]]にメディアを埋め込むには、本文欄に URL を書くだけです。URL は独立した行に書くこと、(投稿表示時にクリックできるような)[[Wikipedia:ja:ハイパーリンク|ハイパーリンク]]にしないこと、の2点に注意してください。
16行目: 16行目:
 
すごいでしょう?</pre>
 
すごいでしょう?</pre>
  
のように入力すれば、Youtube動画を含むURLを自動的に変換して、ビジュアルエディタのプレビューで表示できます。また、オプションとして <code>[embed]</code> [[ショートコード API|ショートコード]]で URL を囲むことも可能です。表示結果は同じですが、URL を独立した行に書かなくてもよくなります。また、(固定値ではなく)最大幅・高さを以下のように設定することもできます。
+
 
 +
のように入力すれば、URL を YouTube 埋め込みコード自動変換して、ビジュアルエディタのプレビューで表示できます。
 +
 
 +
また、オプションとして <code>[embed]</code> [[ショートコード API|ショートコード]]で URL を囲むことも可能です。
  
 
  [embed width="123" height="456"]...[/embed]
 
  [embed width="123" height="456"]...[/embed]
32行目: 35行目:
 
デフォルトでは限られたサイトからの URL のみに有効です。安全対策のため、WordPress は内部のホワイトリストに一致する URL のみを埋め込みます。
 
デフォルトでは限られたサイトからの URL のみに有効です。安全対策のため、WordPress は内部のホワイトリストに一致する URL のみを埋め込みます。
  
=== このメディア埋め込み機能を使えるサイトは? ===
+
== メディア埋め込み元として使えるサイト ==
  
以下のサイトを利用できます。
+
'''[[:en:Embeds#Okay.2C_So_What_Sites_Can_I_Embed_From.3F|英語版 Codex のリスト]]'''をご覧ください。
 
+
{| class="widefat"
+
|- style="background:#464646; color:#d7d7d7;"
+
! '''サービス'''
+
! '''埋め込みの種類'''
+
! '''追加時'''
+
|-
+
| [http://animoto.com Animoto]
+
| 動画
+
| [[Version 4.0|WordPress 4.0]]
+
|
+
|-
+
| [http://blip.tv/ Blip]
+
| 動画
+
| [[Version 2.9|WordPress 2.9]]
+
|
+
|-
+
| [http://collegehumor.com CollegeHumor]
+
| 動画
+
| [[Version 4.0|WordPress 4.0]]
+
|
+
|-
+
| [http://www.dailymotion.com/ DailyMotion]
+
| 動画
+
| [[Version 2.9|WordPress 2.9]]
+
|
+
|-
+
| [http://www.flickr.com/ Flickr]
+
| 動画 & 画像
+
| [[Version 2.9|WordPress 2.9]]
+
|
+
|-
+
| [http://www.funnyordie.com/ FunnyOrDie.com]
+
| 動画
+
| [[Version 3.0|WordPress 3.0]]
+
|
+
|-
+
| [http://www.hulu.com/ Hulu]
+
| 動画
+
| [[Version 2.9|WordPress 2.9]]
+
|
+
|-
+
| [http://imgur.com Imgur]
+
| 画像
+
| [[Version 3.9|WordPress 3.9]]
+
|
+
|-
+
| [http://instagram.com Instagram]
+
| 画像
+
| [[Version 3.5|WordPress 3.5]]
+
|
+
|-
+
| [http://www.isnare.com/ iSnare]
+
| 記事
+
| [[Version 2.9|WordPress 2.9]]
+
|
+
|-
+
| [http://issuu.com Issuu]
+
| ドキュメント
+
| [[Version 4.0|WordPress 4.0]]
+
|
+
|-
+
| [http://meetup.com Meetup.com]
+
| 各種コンテンツ
+
| [[Version 3.9|WordPress 3.9]]
+
|
+
|-
+
| [http://embedarticles.com EmbedArticles]
+
| 各種コンテンツ
+
| [[Version 3.9|WordPress 3.9]]
+
|
+
|-
+
| [http://mixcloud.com Mixcloud]
+
| 音楽
+
| [[Version 4.0|WordPress 4.0]]
+
|
+
|-
+
| [http://photobucket.com/ Photobucket]
+
| 画像
+
| [[Version 2.9|WordPress 2.9]]
+
|
+
|-
+
| [http://www.polldaddy.com/ PollDaddy]
+
| 投票・アンケート
+
| [[Version 3.0|WordPress 3.0]]
+
|
+
|-
+
| [http://www.rdio.com/ Rdio]
+
| 音楽
+
| [[Version 3.6|WordPress 3.6]]
+
|
+
|-
+
| [http://revision3.com/ Revision3]
+
| TV shows
+
| [[Version 2.9|WordPress 2.9]]
+
|
+
|-
+
| [http://www.scribd.com/ Scribd]
+
| ドキュメント
+
| [[Version 2.9|WordPress 2.9]]
+
|
+
|-
+
| [http://www.slideshare.net SlideShare]
+
| プレゼンスライド
+
| [[Version 3.5|WordPress 3.5]]
+
|
+
|-
+
| [http://www.smugmug.com/ SmugMug]
+
| 写真
+
| [[Version 3.0|WordPress 3.0]]
+
|
+
|-
+
| [http://soundcloud.com/ SoundCloud]
+
| 音楽
+
| [[Version 3.5|WordPress 3.5]]
+
|
+
|-
+
| [http://www.spotify.com/ Spotify]
+
| 音楽
+
| [[Version 3.6|WordPress 3.6]]
+
|
+
|-
+
| [http://www.ted.com/ TED]
+
| 動画
+
| [[Version 4.0|WordPress 4.0]]
+
|
+
|-
+
| [http://twitter.com Twitter]
+
| ソーシャルメディア
+
| [[Version 3.4|WordPress 3.4]]
+
|
+
|-
+
| [http://www.viddler.com/ Viddler]
+
| 動画
+
| (4.0 で非推奨)
+
|
+
|-
+
| [http://vimeo.com/ Vimeo]
+
| 動画
+
| [[Version 2.9|WordPress 2.9]]
+
|
+
|-
+
| [http://vine.co/ Vine]
+
| 動画
+
| [[Version 4.1|WordPress 4.1]]
+
|
+
|-
+
| [http://wordpress.tv/ WordPress.tv]
+
| 動画
+
| [[Version 2.9|WordPress 2.9]]
+
|
+
|-
+
| [http://www.youtube.com/ YouTube]
+
| 動画
+
| [[Version 2.9|WordPress 2.9]]
+
|
+
|}
+
  
 
'''注'''
 
'''注'''
* Twitter - 古いバージョンの WordPress では HTTPS 埋め込みに問題が発生することがありますが、URL を HTTP に変更すれば修正できます。
+
* Twitter - 古いバージョンの WordPress では HTTPS 埋め込みに問題が発生することがありますが、URL を HTTPS HTTP に変更すれば修正できます。
 
* YouTube - 公開済み、または限定公開の動画およびプレイリストのみに対応しています。「非公開」動画は埋め込めません。
 
* YouTube - 公開済み、または限定公開の動画およびプレイリストのみに対応しています。「非公開」動画は埋め込めません。
 +
* Tumblr - 投稿 (name.tumblr.com/post/etc) のみが認識されます。個別の画像 (name.tumblr.com/image) は埋め込めません。
  
== 他のサイトに対応するには? ==
+
== 他のサイトに対応する方法 ==
  
 
他のサイトへの対応を追加する方法は、そのサイトが oEmbed に対応しているかどうかによって異なります。
 
他のサイトへの対応を追加する方法は、そのサイトが oEmbed に対応しているかどうかによって異なります。
209行目: 56行目:
 
[[関数リファレンス/wp_embed_register_handler|<code>wp_embed_register_handler()</code>]]/[[:en:Function Reference/wp_embed_register_handler|en]] を使ってハンドラーを登録します。その後、HTML を生成するコールバック関数が必要になります。
 
[[関数リファレンス/wp_embed_register_handler|<code>wp_embed_register_handler()</code>]]/[[:en:Function Reference/wp_embed_register_handler|en]] を使ってハンドラーを登録します。その後、HTML を生成するコールバック関数が必要になります。
  
== 埋め込み対応を無効化するには? ==
+
=== oEmbed 対応サイトの埋め込みを無効化する ===
  
 
対応済みの oEmbed プロバイダを無効化したい場合は、[[関数リファレンス/wp_oembed_add_provider|<code>wp_oembed_add_provider()</code>]]/[[:en:Function Reference/wp_oembed_add_provider|en]] を呼び出してください。
 
対応済みの oEmbed プロバイダを無効化したい場合は、[[関数リファレンス/wp_oembed_add_provider|<code>wp_oembed_add_provider()</code>]]/[[:en:Function Reference/wp_oembed_add_provider|en]] を呼び出してください。
  
== oEmbed 自動探知は使えますか? ==
+
=== コアでの oEmbed プロバイダのホワイトリスト化 ===
  
WordPress の oEmbed 実装では、自動探知は無効化されています。デフォルトでは、内部のホワイトリストに挙げられた、安全とみなされたサイトからのメディアのみを埋め込むことができます。これは、悪意のあるサイトのメディアを間違って埋め込んでしまうことがないようにするためです。
+
コアに含める oEmbed プロバイダに対しては一定の基準があります。既存のホワイトリストに新しいものを追加するには、[https://make.wordpress.org/core/handbook/contribute/design-decisions/#whitelisting-oembed-providers 一定の条件]を満たす必要があります。
  
しかし、十分に知識があり、そのような防衛策が必要ないなら、<code>unfiltered_html</code> 権限を持つユーザー(管理者と編集者)は oEmbed 探知(ディスカバリー)タグが <code>&lt;head&gt;</code> にあるすべてのサイトからのメディアを埋め込むようにもできます。これには、[http://wordpress.org/extend/plugins/enable-oembed-discovery/ Enable oEmbed Discovery] プラグインを使うだけです。
+
== oEmbed 自動探知 ==
 +
 
 +
バージョン4.4時点で WordPress は oEmbed 自動探知 (discovery) をサポートしていますが、ホワイトリストに登録されていないサイトから埋め込めるコンテンツの種類には厳しい制限があります。
 +
 
 +
具体的には、HTML および動画コンテンツはフィルタリングされ、リンク、ブロッククォート、iframe のみが許可されます。これらをさらにフィルタリングして、悪質なコンテンツの挿入を防止しています。その後、HTML はサンドボックス化され、そこへ追加のセキュリティ制限が加えられます。
 +
 
 +
しかし、十分に知識があり、そのような防衛策が必要ないなら、<code>unfiltered_html</code> 権限を持つユーザー(管理者と編集者)に対し、<code>&lt;head&gt;</code> に oEmbed 探知タグを持つサイトからの埋め込みを許可することはできます。[http://wordpress.org/extend/plugins/enable-oembed-discovery/ oEmbed Discovery プラグイン]を有効化するだけです。これは一般的には推奨しません。
 +
 
 +
「リンク」と「写真」タイプの oEmbed 探知コンテンツはこのように幅広くフィルタリングされているわけではありませんが、セキュリティのために適切にエスケープされ、悪質なコンテンツがサイトに表示されないようになっています。
  
 
== 外部資料 ==
 
== 外部資料 ==
223行目: 78行目:
 
=== 日本語記事 ===
 
=== 日本語記事 ===
 
* [http://webos-goodies.jp/archives/getting_started_with_oembed.html oEmbed でメディア共有サイトのコンテンツを簡単埋め込み]
 
* [http://webos-goodies.jp/archives/getting_started_with_oembed.html oEmbed でメディア共有サイトのコンテンツを簡単埋め込み]
* [http://www.google.com/support/youtube/bin/answer.py?hl=jp&answer=164669 YouTube ヘルプ | 詳細: oEmbed による動画の埋め込み]
+
* [hhttps://support.google.com/youtube/answer/171780?hl=ja YouTube ヘルプ | 動画と再生リストを埋め込む]
* [http://bono.s206.xrea.com/2010/01/1017-wp29/ power source* » WP: WordPress 2.9 新機能・仕様変更まとめ] - <code>[embed]</code> ショートコードで利用できるパラメータ
+
  
 
=== 英語記事 ===
 
=== 英語記事 ===
* [http://www.wpbeginner.com/wp-themes/how-to-set-oembed-max-width-in-wordpress-3-5-with-content_width/ How do I resize my oEmbeds?] <tt>$content_width</tt> 値の設定方法の説明
+
 
* [http://www.viper007bond.com/2009/10/13/easy-embeds-for-wordpress-2-point-9/ Summary of this feature] - コード作者による機能のまとめ
+
* [http://oembed.com/ oEmbed.com] - 技術的仕様を含む oEmbed 公式サイト oEmbed website with technical details of the spec
* [http://www.webmonkey.com/2010/02/get_started_with_oembed/ Webmonkey guide to oEmbed]
+
* [http://www.webmonkey.com/2010/02/get_started_with_oembed/ Get Started With OEmbed] - by Webmonkey.com
* [http://oembed.com/ Official oEmbed website] - oEmbed の技術的仕様
+
* [http://generatewp.com/oembed/ WordPress oEmbed Providers Registration Generator] - by GenerateWP.com
* [http://web-profile.com.ua/wordpress/useful/embed-video-into-post/ Other ways to insert video into post on WordPress site]
+
* [http://www.viper007bond.com/2009/10/13/easy-embeds-for-wordpress-2-point-9/ Easy Embeds For WordPress 2.9] - by Alex Mills (Viper007Bond)
* [http://yoast.com/wordpress/video-seo/ Video SEO Plugin] - 埋め込まれた動画を自動的に検知し、動画 XML サイトマップを追加するプラグイン
+
* [http://wordpress.org/plugins/simple-youtube-embed/ Simple YouTube Embed Plugin] YouTube を (embedded by URLでの埋め込み もしくは ショートコード埋め込みで) レスポンシブで美しい見た目で埋め込む。
+
  
 
== 更新履歴 ==
 
== 更新履歴 ==
  
* [[Version 2.9|2.9]] :  
+
'''[[:en:Embeds#Changelog|英語版の更新履歴]]'''をご覧ください。
** ビルトイン埋め込みに対応。
+
 
* [[Version 3.0|3.0]] :  
+
** SmugMug と FunnyOrDie.com に対応。
+
* [[Version 3.4|3.4]] :
+
** Twitter を追加。
+
* [[Version 3.5|3.5]] :
+
** Instagram、SoundCloud、SlideShare を追加。
+
* [[Version 3.6|3.6]] :
+
** Rdio、Spotify を追加。
+
* [[Version 3.9|3.9]] :
+
** Qik サービスが2014年4月に終了したため対応削除。
+
* [[Version 4.0|4.0]] :
+
** エディタ内のプレビューのソースコードを大幅に調整した。
+
** CollegeHumor, Issuu, Mixcloud, YouTubeプレイリスト, TED talks を追加。
+
** Viddler を埋め込み先のサービス終了に伴い削除。
+
* [[Version 4.1|4.1]] :
+
** Vine を追加。
+
  
 
'''注:''' [[Version 3.5|WordPress 3.5]] で埋め込みオプションがメディア設定画面から削除されました。
 
'''注:''' [[Version 3.5|WordPress 3.5]] で埋め込みオプションがメディア設定画面から削除されました。
260行目: 96行目:
 
{{Stub}}
 
{{Stub}}
  
{{原文|Embeds|144013}}<!-- 2014-09-18T06:51:10 DrewAPicture -->
+
{{原文|Embeds|162273}}<!-- 07:46, 24 March 2018 Typoholic01 -->
  
 
<!-- {{DEFAULTSORT:}}ページ名日本語にしたら書く -->
 
<!-- {{DEFAULTSORT:}}ページ名日本語にしたら書く -->

2018年5月15日 (火) 10:31時点における版

簡単なショートコードを使うことで、 WordPress サイトに動画・画像・ツイート・音楽などのコンテンツを、とても簡単に 埋め込む(embed)ことができます。この機能は WordPress 2.9 で追加されました。

使い方

投稿固定ページにメディアを埋め込むには、本文欄に URL を書くだけです。URL は独立した行に書くこと、(投稿表示時にクリックできるような)ハイパーリンクにしないこと、の2点に注意してください。

例えば、

この動画を見てみてください。 

http://www.youtube.com/watch?v=dQw4w9WgXcQ

すごいでしょう?


のように入力すれば、URL を YouTube 埋め込みコード自動変換して、ビジュアルエディタのプレビューで表示できます。

また、オプションとして [embed] ショートコードで URL を囲むことも可能です。

[embed width="123" height="456"]...[/embed]

WordPress が URL を使ってメディアを埋め込むことができなかった場合、URL のハイパーリンクが表示されます。

oEmbed

簡単なメディア埋め込み機能のほとんどは、oEmbed によって提供されています。oEmbed は、A というサイト(例えばあなたのブログ)が B というサイト(例えば YouTube)に、コンテンツ(例えば動画)を埋め込むために必要な HTML を問い合せるためのプロトコルです。

oEmbed は、メディアを埋め込みたいサイトから HTML コードをコピー&ペーストしたりしなくて済むように設計されています。動画、画像、テキストなどに対応しています。

どんな URL でもこの機能を使えますか?

デフォルトでは限られたサイトからの URL のみに有効です。安全対策のため、WordPress は内部のホワイトリストに一致する URL のみを埋め込みます。

メディア埋め込み元として使えるサイト

英語版 Codex のリストをご覧ください。

  • Twitter - 古いバージョンの WordPress では HTTPS 埋め込みに問題が発生することがありますが、URL を HTTPS HTTP に変更すれば修正できます。
  • YouTube - 公開済み、または限定公開の動画およびプレイリストのみに対応しています。「非公開」動画は埋め込めません。
  • Tumblr - 投稿 (name.tumblr.com/post/etc) のみが認識されます。個別の画像 (name.tumblr.com/image) は埋め込めません。

他のサイトに対応する方法

他のサイトへの対応を追加する方法は、そのサイトが oEmbed に対応しているかどうかによって異なります。

oEmbed 対応サイト

サイトが oEmbed に対応している場合は、wp_oembed_add_provider()/en を呼び出し、そのサイトの URL 形式を内部のホワイトリストに追加します。

oEmbed 非対応サイト

wp_embed_register_handler()/en を使ってハンドラーを登録します。その後、HTML を生成するコールバック関数が必要になります。

oEmbed 対応サイトの埋め込みを無効化する

対応済みの oEmbed プロバイダを無効化したい場合は、wp_oembed_add_provider()/en を呼び出してください。

コアでの oEmbed プロバイダのホワイトリスト化

コアに含める oEmbed プロバイダに対しては一定の基準があります。既存のホワイトリストに新しいものを追加するには、一定の条件を満たす必要があります。

oEmbed 自動探知

バージョン4.4時点で WordPress は oEmbed 自動探知 (discovery) をサポートしていますが、ホワイトリストに登録されていないサイトから埋め込めるコンテンツの種類には厳しい制限があります。

具体的には、HTML および動画コンテンツはフィルタリングされ、リンク、ブロッククォート、iframe のみが許可されます。これらをさらにフィルタリングして、悪質なコンテンツの挿入を防止しています。その後、HTML はサンドボックス化され、そこへ追加のセキュリティ制限が加えられます。

しかし、十分に知識があり、そのような防衛策が必要ないなら、unfiltered_html 権限を持つユーザー(管理者と編集者)に対し、<head> に oEmbed 探知タグを持つサイトからの埋め込みを許可することはできます。oEmbed Discovery プラグインを有効化するだけです。これは一般的には推奨しません。

「リンク」と「写真」タイプの oEmbed 探知コンテンツはこのように幅広くフィルタリングされているわけではありませんが、セキュリティのために適切にエスケープされ、悪質なコンテンツがサイトに表示されないようになっています。

外部資料

日本語記事

英語記事

更新履歴

英語版の更新履歴をご覧ください。


注: WordPress 3.5 で埋め込みオプションがメディア設定画面から削除されました。

このページ「oEmbed」はまだ書きかけで、情報が不足しています。続きを書いて WordPress を手助けしましょう.


最新英語版: WordPress Codex » Embeds最新版との差分