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

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

「oEmbed」の版間の差分

提供: WordPress Codex 日本語版
移動先: 案内検索
(最新版に更新。)
(改名提案はなし、oEmbedとします。)
(3人の利用者による、間の13版が非表示)
1行目: 1行目:
{{Rename|E}}
+
 
 
__TOC__
 
__TOC__
[[Version 2.9|WordPress 2.9]] 以降、動画・画像・その他のコンテンツを WordPress サイトに'''埋め込む'''(embed)のがとても簡単になりました。
+
 
 +
簡単な[[ショートコード API|ショートコード]]を使うことで、 WordPress サイトに動画・画像・ツイート・音楽などのコンテンツを、とても簡単に '''埋め込む'''(embed)ことができます。
  
 
== 概要 ==
 
== 概要 ==
9行目: 10行目:
 
例えば、
 
例えば、
  
この動画を見てみて!
+
<pre>この動画を見てみてください。
+
<nowiki>http://www.youtube.com/watch?v=nTDNLUzjkpg</nowiki>
+
+
すごいでしょう?
+
  
のように入力すれば、投稿が表示される際、URLの位置に自動的に YouTube 動画が埋め込まれます。有効化するには、[[管理パネル]] > [[管理パネル#Settings|設定]] > [[Settings Media SubPanel|メディア設定]]画面の「自動埋め込み」にチェックしましょう。また、(固定ではない)最大幅と高さを以下のように指定することも可能です。
+
<nowiki>http://www.youtube.com/watch?v=dQw4w9WgXcQ</nowiki>
 +
 
 +
すごいでしょう?</pre>
 +
 
 +
のように入力すれば、Youtube動画を含むURLを自動的に変換して、ビジュアルエディタのプレビューで表示できます。また、オプションとして <code>[embed]</code> [[ショートコード API|ショートコード]]で URL を囲むことも可能です。表示結果は同じですが、URL を独立した行に書かなくてもよくなります。また、(固定値ではなく)最大幅・高さを以下のように設定することもできます。
  
 
  [embed width="123" height="456"]...[/embed]
 
  [embed width="123" height="456"]...[/embed]
  
 
WordPress が URL を使ってメディアを埋め込むことができなかった場合、URL のハイパーリンクが表示されます。
 
WordPress が URL を使ってメディアを埋め込むことができなかった場合、URL のハイパーリンクが表示されます。
 
また、URL を <code>[embed]</code> [[ショートコード API|ショートコード]]で囲むこともできます。表示結果は同じですが、URL は独立した行に書かれていなくてもよく、「Auto-embeds」設定も不要です。(利用できるパラメータは[[#外部資料|外部資料]]を参照)
 
  
 
== oEmbed ==
 
== oEmbed ==
  
簡単なメディア埋め込み機能のほとんどは、oEmbed によって提供されています。oEmbed は、A というサイト(例えばあなたのブログ)が B というサイト(例えば YouTube)に、コンテンツを埋め込むために必要な HTML を問い合せるためのプロトコルです。
+
簡単なメディア埋め込み機能のほとんどは、oEmbed によって提供されています。oEmbed は、A というサイト(例えばあなたのブログ)が B というサイト(例えば YouTube)に、コンテンツ(例えば動画)を埋め込むために必要な HTML を問い合せるためのプロトコルです。
  
 
oEmbed は、メディアを埋め込みたいサイトから HTML コードをコピー&ペーストしたりしなくて済むように設計されています。動画、画像、テキストなどに対応しています。
 
oEmbed は、メディアを埋め込みたいサイトから HTML コードをコピー&ペーストしたりしなくて済むように設計されています。動画、画像、テキストなどに対応しています。
37行目: 36行目:
 
以下のサイトを利用できます。
 
以下のサイトを利用できます。
  
* [http://www.youtube.com/ YouTube] (only public videos and playlists - "unlisted" and "private" videos will not embed)
+
{| class="widefat"
* [http://vimeo.com/ Vimeo]
+
|- style="background:#464646; color:#d7d7d7;"
* [http://www.dailymotion.com/ DailyMotion]
+
! '''サービス'''
* [http://blip.tv/ blip.tv]
+
! '''埋め込みの種類'''
* [http://www.flickr.com/ Flickr] (both videos and images)
+
! '''追加時'''
* [http://www.viddler.com/ Viddler]
+
|-
* [http://www.hulu.com/ Hulu]
+
| [http://animoto.com Animoto]
* [http://qik.com/ Qik]
+
| 動画
* [http://revision3.com/ Revision3]
+
| [[Version 4.0|WordPress 4.0]]
* [http://www.scribd.com/ Scribd]
+
|
* [http://photobucket.com/ Photobucket]
+
|-
* [http://www.polldaddy.com/ PollDaddy]
+
| [http://blip.tv/ Blip]
* [http://video.google.com/ Google Video]
+
| 動画
* [http://wordpress.tv/ WordPress.tv](現在は [http://videopress.com/ VideoPress] 形式の動画のみ)
+
| [[Version 2.9|WordPress 2.9]]
* [http://www.smugmug.com/ SmugMug](WordPress 3.0 以降)
+
|
* [http://www.funnyordie.com/ FunnyOrDie.com](WordPress 3.0 以降)
+
|-
* [http://twitter.com/ Twitter.com] Twitter (WordPress 3.4 以降)
+
| [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 に変更すれば修正できます。
 +
* YouTube - 公開済み、または限定公開の動画およびプレイリストのみに対応しています。「非公開」動画は埋め込めません。
  
 
== 他のサイトに対応するには? ==
 
== 他のサイトに対応するには? ==
66行目: 208行目:
  
 
[[関数リファレンス/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 プロバイダを無効化したい場合は、[[関数リファレンス/wp_oembed_add_provider|<code>wp_oembed_add_provider()</code>]]/[[:en:Function Reference/wp_oembed_add_provider|en]] を呼び出してください。
  
 
== oEmbed 自動探知は使えますか? ==
 
== oEmbed 自動探知は使えますか? ==
81行目: 227行目:
  
 
=== 英語記事 ===
 
=== 英語記事 ===
 +
* [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://www.viper007bond.com/2009/10/13/easy-embeds-for-wordpress-2-point-9/ Summary of this feature] - コード作者による機能のまとめ
 
* [http://www.webmonkey.com/2010/02/get_started_with_oembed/ Webmonkey guide to oEmbed]
 
* [http://www.webmonkey.com/2010/02/get_started_with_oembed/ Webmonkey guide to oEmbed]
 
* [http://oembed.com/ Official oEmbed website] - oEmbed の技術的仕様
 
* [http://oembed.com/ Official oEmbed website] - oEmbed の技術的仕様
 +
* [http://web-profile.com.ua/wordpress/useful/embed-video-into-post/ Other ways to insert video into post on WordPress site]
 +
* [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 3.0|3.0]] : SmugMug と FunnyOrDie.com に対応。
+
* [[Version 2.9|2.9]] :
 +
** ビルトイン埋め込みに対応。
 +
* [[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]] で埋め込みオプションがメディア設定画面から削除されました。
  
 
{{Stub}}
 
{{Stub}}
  
{{原文|Embeds|122300}}<!-- 22:56, 5 October 2012 Yuraz -->
+
{{原文|Embeds|144013}}<!-- 2014-09-18T06:51:10 DrewAPicture -->
  
 
<!-- {{DEFAULTSORT:}}ページ名日本語にしたら書く -->
 
<!-- {{DEFAULTSORT:}}ページ名日本語にしたら書く -->
 
[[Category:上級トピック]]
 
[[Category:上級トピック]]
[[Version 3.4|3.4]]
 
Twitter を追加
 
[[Version 3.0|3.0]]
 
SmugMug を追加
 
FunnyOrDie.com を追加
 
[[Version 2.9|2.9]]
 
ビルトイン埋め込み対応を導入。
 
 
 
[[en:Embeds]]
 
[[en:Embeds]]
 +
[[fr:Contenus Intégrés]]
 
[[hr:Ugradnje]]
 
[[hr:Ugradnje]]
 +
[[it:Embed]]
 +
[[nl:Insluiten]]
 
[[pt-br:Embutidos]]
 
[[pt-br:Embutidos]]
 
[[ru:Вставка объектов]]
 
[[ru:Вставка объектов]]
 
[[zh-cn:嵌入]]
 
[[zh-cn:嵌入]]

2015年6月7日 (日) 14:18時点における版

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

概要

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

例えば、

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

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

すごいでしょう?

のように入力すれば、Youtube動画を含むURLを自動的に変換して、ビジュアルエディタのプレビューで表示できます。また、オプションとして [embed] ショートコードで URL を囲むことも可能です。表示結果は同じですが、URL を独立した行に書かなくてもよくなります。また、(固定値ではなく)最大幅・高さを以下のように設定することもできます。

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

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

oEmbed

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

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

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

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

このメディア埋め込み機能を使えるサイトは?

以下のサイトを利用できます。

サービス 埋め込みの種類 追加時
Animoto 動画 WordPress 4.0
Blip 動画 WordPress 2.9
CollegeHumor 動画 WordPress 4.0
DailyMotion 動画 WordPress 2.9
Flickr 動画 & 画像 WordPress 2.9
FunnyOrDie.com 動画 WordPress 3.0
Hulu 動画 WordPress 2.9
Imgur 画像 WordPress 3.9
Instagram 画像 WordPress 3.5
iSnare 記事 WordPress 2.9
Issuu ドキュメント WordPress 4.0
Meetup.com 各種コンテンツ WordPress 3.9
EmbedArticles 各種コンテンツ WordPress 3.9
Mixcloud 音楽 WordPress 4.0
Photobucket 画像 WordPress 2.9
PollDaddy 投票・アンケート WordPress 3.0
Rdio 音楽 WordPress 3.6
Revision3 TV shows WordPress 2.9
Scribd ドキュメント WordPress 2.9
SlideShare プレゼンスライド WordPress 3.5
SmugMug 写真 WordPress 3.0
SoundCloud 音楽 WordPress 3.5
Spotify 音楽 WordPress 3.6
TED 動画 WordPress 4.0
Twitter ソーシャルメディア WordPress 3.4
Viddler 動画 (4.0 で非推奨)
Vimeo 動画 WordPress 2.9
Vine 動画 WordPress 4.1
WordPress.tv 動画 WordPress 2.9
YouTube 動画 WordPress 2.9

  • Twitter - 古いバージョンの WordPress では HTTPS 埋め込みに問題が発生することがありますが、URL を HTTP に変更すれば修正できます。
  • YouTube - 公開済み、または限定公開の動画およびプレイリストのみに対応しています。「非公開」動画は埋め込めません。

他のサイトに対応するには?

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

oEmbed 対応サイト

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

oEmbed 非対応サイト

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

埋め込み対応を無効化するには?

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

oEmbed 自動探知は使えますか?

WordPress の oEmbed 実装では、自動探知は無効化されています。デフォルトでは、内部のホワイトリストに挙げられた、安全とみなされたサイトからのメディアのみを埋め込むことができます。これは、悪意のあるサイトのメディアを間違って埋め込んでしまうことがないようにするためです。

しかし、十分に知識があり、そのような防衛策が必要ないなら、unfiltered_html 権限を持つユーザー(管理者と編集者)は oEmbed 探知(ディスカバリー)タグが <head> にあるすべてのサイトからのメディアを埋め込むようにもできます。これには、Enable oEmbed Discovery プラグインを使うだけです。

外部資料

日本語記事

英語記事

更新履歴

  • 2.9 :
    • ビルトイン埋め込みに対応。
  • 3.0 :
    • SmugMug と FunnyOrDie.com に対応。
  • 3.4 :
    • Twitter を追加。
  • 3.5 :
    • Instagram、SoundCloud、SlideShare を追加。
  • 3.6 :
    • Rdio、Spotify を追加。
  • 3.9 :
    • Qik サービスが2014年4月に終了したため対応削除。
  • 4.0 :
    • エディタ内のプレビューのソースコードを大幅に調整した。
    • CollegeHumor, Issuu, Mixcloud, YouTubeプレイリスト, TED talks を追加。
    • Viddler を埋め込み先のサービス終了に伴い削除。
  • 4.1 :
    • Vine を追加。

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

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


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