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

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

「oEmbed」の版間の差分

提供: WordPress Codex 日本語版
移動先: 案内検索
(リンク調整等)
(改名提案はなし、oEmbedとします。)
(4人の利用者による、間の18版が非表示)
1行目: 1行目:
{{NeedTrans}}
+
 
{{Rename|E}}
+
 
__TOC__
 
__TOC__
Starting with [[Version 2.9|WordPress 2.9]], it's super easy to embed videos, images, and other content into your WordPress site.
 
  
== In A Nutshell ==
+
簡単な[[ショートコード API|ショートコード]]を使うことで、 WordPress サイトに動画・画像・ツイート・音楽などのコンテンツを、とても簡単に '''埋め込む'''(embed)ことができます。
  
All you need to do to embed something into a post or [[Pages|page]] is to post the URL to it into your content area. Make sure that the URL is on its own line and not hyperlinked (clickable when viewing the post).
+
== 概要 ==
  
For example:
+
[[Writing Posts|投稿]]や[[Pages|固定ページ]]にメディアを埋め込むには、本文欄に URL を書くだけです。URL は独立した行に書くこと、(投稿表示時にクリックできるような)[[Wikipedia:ja:ハイパーリンク|ハイパーリンク]]にしないこと、の2点に注意してください。
  
Check out this cool video:
+
例えば、
+
ht<span></span>tp://www.youtube.com/watch?v=nTDNLUzjkpg
+
+
That was a cool video.
+
  
WordPress will automatically turn that into a YouTube embed when the post is viewed.
+
<pre>この動画を見てみてください。
  
You can also opt to wrap the URL in the <code>[embed]</code> shortcode. It will accomplish the same effect, but does not require the URL to be on its own line.
+
<nowiki>http://www.youtube.com/watch?v=dQw4w9WgXcQ</nowiki>
 +
 
 +
すごいでしょう?</pre>
 +
 
 +
のように入力すれば、Youtube動画を含むURLを自動的に変換して、ビジュアルエディタのプレビューで表示できます。また、オプションとして <code>[embed]</code> [[ショートコード API|ショートコード]]で URL を囲むことも可能です。表示結果は同じですが、URL を独立した行に書かなくてもよくなります。また、(固定値ではなく)最大幅・高さを以下のように設定することもできます。
 +
 
 +
[embed width="123" height="456"]...[/embed]
 +
 
 +
WordPress が URL を使ってメディアを埋め込むことができなかった場合、URL のハイパーリンクが表示されます。
  
 
== oEmbed ==
 
== oEmbed ==
  
The easy embedding feature is mostly powered by oEmbed, a protocol for site A (such as your blog) to ask site B (such as YouTube) for the HTML needed to embed content (such as a video) from site B.
+
簡単なメディア埋め込み機能のほとんどは、oEmbed によって提供されています。oEmbed は、A というサイト(例えばあなたのブログ)が B というサイト(例えば YouTube)に、コンテンツ(例えば動画)を埋め込むために必要な HTML を問い合せるためのプロトコルです。
  
oEmbed was designed to avoid having to copy and paste HTML from the site hosting the media you wish to embed.  It supports videos, images, text, and more.
+
oEmbed は、メディアを埋め込みたいサイトから HTML コードをコピー&ペーストしたりしなくて済むように設計されています。動画、画像、テキストなどに対応しています。
  
== Can I Use Any URL With This? ==
+
== どんな URL でもこの機能を使えますか? ==
  
Not by default, no. WordPress will only embed URLs matching an internal whitelist. This is for security purposes.
+
デフォルトでは限られたサイトからの URL のみに有効です。安全対策のため、WordPress は内部のホワイトリストに一致する URL のみを埋め込みます。
  
=== Okay, So What Sites Can I Embed From? ===
+
=== このメディア埋め込み機能を使えるサイトは? ===
  
You can use all of these:
+
以下のサイトを利用できます。
  
* [http://www.youtube.com/ YouTube]
+
{| 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] (only [http://videopress.com/ VideoPress]-type videos for the time being)
+
| [[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]]
 +
|
 +
|}
  
== How Can I Add Support For More Websites? ==
+
'''注'''
 +
* Twitter - 古いバージョンの WordPress では HTTPS 埋め込みに問題が発生することがありますが、URL を HTTP に変更すれば修正できます。
 +
* YouTube - 公開済み、または限定公開の動画およびプレイリストのみに対応しています。「非公開」動画は埋め込めません。
  
Adding support for an additional website depends on whether the site supports oEmbed or not.
+
== 他のサイトに対応するには? ==
  
=== Adding Support For An oEmbed-Enabled Site ===
+
他のサイトへの対応を追加する方法は、そのサイトが oEmbed に対応しているかどうかによって異なります。
  
If a site supports oEmbed, you'll want to call <code>[[関数リファレンス/wp_oembed_add_provider|wp_oembed_add_provider()]]</code>/[[:en:Function Reference/wp_oembed_add_provider|en]] to add the site and URL format to the internal whitelist.
+
=== oEmbed 対応サイト ===
  
=== Adding Support For A Non-oEmbed Site ===
+
サイトが oEmbed に対応している場合は、[[関数リファレンス/wp_oembed_add_provider|<code>wp_oembed_add_provider()</code>]]/[[:en:Function Reference/wp_oembed_add_provider|en]] を呼び出し、そのサイトの URL 形式を内部のホワイトリストに追加します。
  
You'll need to register a handler using <code>[[関数リファレンス/wp_embed_register_handler|wp_embed_register_handler()]]</code>/[[:en:Function Reference/wp_embed_register_handler|en]] and provide a callback function that generates the HTML.
+
=== oEmbed 非対応サイト ===
  
== What About oEmbed Discovery? ==
+
[[関数リファレンス/wp_embed_register_handler|<code>wp_embed_register_handler()</code>]]/[[:en:Function Reference/wp_embed_register_handler|en]] を使ってハンドラーを登録します。その後、HTML を生成するコールバック関数が必要になります。
  
The oEmbed implementation in WordPress has discovery disabled. By default, you can only embed from websites that are listed on the internal whitelist. This is to prevent accidental embedding from malicious websites.
+
== 埋め込み対応を無効化するには? ==
  
However if you feel you are knowledgeable enough to avoid this, you can give <code>unfiltered_html</code> users (Administrators and Editors) the ability to embed from websites that have oEmbed discovery tags in their <code>&lt;head&gt;</code>. You merely need to install [http://wordpress.org/extend/plugins/enable-oembed-discovery/ this plugin].
+
対応済みの oEmbed プロバイダを無効化したい場合は、[[関数リファレンス/wp_oembed_add_provider|<code>wp_oembed_add_provider()</code>]]/[[:en:Function Reference/wp_oembed_add_provider|en]] を呼び出してください。
  
== External Resources ==
+
== oEmbed 自動探知は使えますか? ==
  
* [http://www.viper007bond.com/2009/10/13/easy-embeds-for-wordpress-2-point-9/ Summary of this feature] by the author of this code
+
WordPress の oEmbed 実装では、自動探知は無効化されています。デフォルトでは、内部のホワイトリストに挙げられた、安全とみなされたサイトからのメディアのみを埋め込むことができます。これは、悪意のあるサイトのメディアを間違って埋め込んでしまうことがないようにするためです。
* [http://www.webmonkey.com/tutorial/Get_Started_With_OEmbed Webmonkey guide to oEmbed]
+
 
* [http://oembed.com/ Official oEmbed website] (technical details of the spec)
+
しかし、十分に知識があり、そのような防衛策が必要ないなら、<code>unfiltered_html</code> 権限を持つユーザー(管理者と編集者)は oEmbed 探知(ディスカバリー)タグが <code>&lt;head&gt;</code> にあるすべてのサイトからのメディアを埋め込むようにもできます。これには、[http://wordpress.org/extend/plugins/enable-oembed-discovery/ Enable oEmbed Discovery] プラグインを使うだけです。
 +
 
 +
== 外部資料 ==
 +
 
 +
=== 日本語記事 ===
 +
* [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 による動画の埋め込み]
 +
* [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://www.webmonkey.com/2010/02/get_started_with_oembed/ Webmonkey guide to 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 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|81260}}<!-- 15:16, 21 December 2009 Otto42 版 -->
+
{{原文|Embeds|144013}}<!-- 2014-09-18T06:51:10 DrewAPicture -->
  
 
<!-- {{DEFAULTSORT:}}ページ名日本語にしたら書く -->
 
<!-- {{DEFAULTSORT:}}ページ名日本語にしたら書く -->
 
[[Category:上級トピック]]
 
[[Category:上級トピック]]
[[Category:wp2.9]]
 
 
 
[[en:Embeds]]
 
[[en:Embeds]]
 +
[[fr:Contenus Intégrés]]
 +
[[hr:Ugradnje]]
 +
[[it:Embed]]
 +
[[nl:Insluiten]]
 +
[[pt-br:Embutidos]]
 +
[[ru:Вставка объектов]]
 +
[[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最新版との差分