![閉じる [x]](http://dw1.s81c.com/i/c.gif){kind=small}
Web 2.0 の物語は、すなわちユーザーによるコンテンツ生成の物語です。Flickr、Facebook、MySpace、YouTube などのサイトでは、ユーザーが単純なオンライン・ツールを使って、自分で撮った写真やビデオ映像 (動画) をクラウドにアップロードし、より広範なコミュニティーと共有することができます。クラウド・ベースのコンテンツを作成および共有するためのツールは容易に入手できる上に、開発者が Web サービスを利用してユーザー生成コンテンツにプログラムでアクセスできることから、さまざまなソースからのコンテンツを組み合わせ、新しいコンテンツ駆動型のアプリケーション (マッシュアップ) を実現できるようになっています。
けれども、そこには 1 つの小さな問題があります。例えば、写真は Flickr にあり、動画は YouTube にあり、TV 番組は Hulu にある場合、Blogger のブログ・ポストにこれらのコンテンツをまとめて組み込むにはどうすればよいのでしょうか。もちろん該当するコンテンツへのハイパーリンクを張るという方法も使えますが、ブログ･ポストの適所に写真や動画、TV 番組をそのまま埋め込めるとしたら便利だと思いませんか？
そこで登場するのが oEmbed です。その名前からわかるように、oEmbed はこの問題を解決するために、ユーザーが Flickr や YouTube などの外部サイトに置かれた写真や動画などのリッチ・コンテンツの URL を、そのコンテンツの埋め込み表現に変換できるようにしています。この記事では oEmbed について紹介し、サード・パーティーのコンテンツを oEmbed と PHP を使用して Web ページに埋め込む方法を具体的に説明します。
まずは oEmbed の概要を紹介します。oEmbed の公式サイト (http://www.oembed.com) では、oEmbed を以下のように説明しています。
...サード・パーティーのサイトの URL を埋め込み表現にするためのフォーマットであり、... (oEmbed によって) Web サイトは、ユーザーがリソースへのリンクを送信すると、埋め込みコンテンツを表示することができるようになり、直接そのリソースを構文解析する必要はありません。
oEmbed のトランザクションには、プロバイダーとコンシューマーが関係します。コンシューマーはプロバイダーの API エンドポイントにリクエストを送信することで、特定のコンテンツ項目を要求します。プロバイダーは要求されたコンテンツ項目を XML または JSON にエンコードした表現を返すことによって、これらのリクエストに対応します。
この手法は、実際にはどのように機能するのでしょうか。例えばブログ・ポストを作成し、そこに YouTube にアップロードした動画の 1 つを表示したいとします。それには、以下の方法があります。
- 動画へのハイパーリンクを張り、ユーザーがそのリンクをクリックすると、ユーザーを YouTube にリダイレクトして動画を見られるようにします。
- YouTube の組み込みメディア・プレイヤーを使用して、動画を直接ブログ・ポストに埋め込みます。
最初の方法は手軽ですが、ユーザーが皆さんのサイトから YouTube にリダイレクトされるため、ユーザーの注意が他に向いてしまうことになります。2 番目の方法は、ユーザーをそのまま皆さんのサイトにとどめますが、この方法を使うには、YouTube の組み込みプレイヤーがどのように機能するかを学ばなければなりません。
oEmbed は、この 2 つよりも単純な第 3 のソリューションを提供します。YouTube は oEmbed のプロバイダーとなっているため、対象とする動画を要求するリクエストを YouTube の oEmbed API エンドポイントに送信することができます。このリクエストに対するレスポンスは、組み込み動画プレイヤーの HTML コードが含まれる XML または JSON 文書です。このコードは、動画を表示するために直接ブログ・ポストで使用できるので、さらに手作業で処理する必要はありません。
リスト 1 に、YouTube の動画に対する oEmbed リクエストとレスポンスの一例を記載します。
リスト 1. oEmbed リクエスト
GET http://www.youtube.com/oembed?url=http://www.youtube.com/watch?v=hI-BDR2UcmU &format=xml <?xml version="1.0" encoding="utf-8"?> <oembed> <provider_url>http://www.youtube.com/</provider_url> <title>NORAD Tracks Santa - US Region</title> <html><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/hI-BDR2UcmU?fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/hI-BDR2UcmU?fs=1" type="application/x-shockwave-flash" width="425" height="344" allowscriptaccess="always" allowfullscreen="true"></embed></object></html> <author_name>NORADTracksSanta</author_name> <height>344</height> <thumbnail_width>480</thumbnail_width> <width>425</width> <version>1.0</version> <author_url>http://www.youtube.com/user/NORADTracksSanta</author_url> <provider_name>YouTube</provider_name> <thumbnail_url>http://i1.ytimg.com/vi/hI-BDR2UcmU/hqdefault.jpg</thumbnail_url> <type>video</type> <thumbnail_height>360</thumbnail_height> </oembed> |
上記のリクエストの送信先となっている http://www.youtube.com/oembed は、oEmbed リクエストに対する YouTube API エンドポイントです。この API が、url リクエスト・パラメーターで要求されている動画の URL に渡されます。このリクエストに対しては、動画の作成者やタイトルなどの動画のメタデータと適切な HTML 埋め込みコードが含まれたレスポンスが返されます。
oEmbed プロバイダーは、レスポンスを XML または JSON のいずれかのフォーマットで返すことができます。すべてのレスポンスは UTF-8 でエンコードされます。レスポンスのフォーマットを指定するには、リクエストに format パラメーターを指定します。リスト 2 に一例を記載します。
リスト 2. YouTube の oEmbed API を使用する
GET http://www.youtube.com/oembed?url=http://www.youtube.com/watch?v=hI-BDR2UcmU
&format=json
{
"provider_url": "http:\/\/www.youtube.com\/",
"title": "NORAD Tracks Santa - US Region",
"html": "<object width=\"425\" height=\"344\"><param name=\"movie\"
value=\"http:\/\/www.youtube.com\/v\/hI-BDR2UcmU?fs=1\"><\/param>
<param name=\"allowFullScreen\" value=\"true\"><\/param>
<param name=\"allowscriptaccess\" value=\"always\"><\/param>
<embed src=\"http:\/\/www.youtube.com\/v\/hI-BDR2UcmU?fs=1\"
type=\"application\/x-shockwave-flash\" width=\"425\" height=\"344\"
allowscriptaccess=\"always\" allowfullscreen=\"true\"><\/embed><\/object>",
"author_name": "NORADTracksSanta",
"height": 344,
"thumbnail_width": 480,
"width": 425,
"version": "1.0",
"author_url": "http:\/\/www.youtube.com\/user\/NORADTracksSanta",
"provider_name": "YouTube",
"thumbnail_url": "http:\/\/i1.ytimg.com\/vi\/hI-BDR2UcmU\/hqdefault.jpg",
"type": "video",
"thumbnail_height": 360
}
|
oEmbed が機能する仕組みを理解できたところで、次はコードについて検討します。この記事全体を通して前提とするのは、読者の皆さんが HTML、SQL、および XML を使い慣れていること、そして実際に機能する Apache または PHP 開発環境を使用できることです。また、記事で使用する PHP コンポーネントは OOP の原則に従って作成されているので、PHPでのクラスとオブジェクトの操作について基本的な知識を持っていることも前提となります。
oEmbed を PHP アプリケーションで使用する場合、ライブラリーには PEAR Services_oEmbed または php-oembed のいずれかを選択することができます。記事に記載する例の大半では PEAR Services_oEmbed を使用するため (ただし、参考用に php-oembed を使用する例もいくつか記載します)、この PEAR Services_oEmbed ライブラリーをインストールしてください。PEAR の Web サイト (リンクについては「参考文献」を参照) から手動でダウンロードしてインストールすることも、以下のように PEAR インストーラーを使用して自動的にインストールすることもできます。
shell> pear install Services_oEmbed-0.2.0 |
インストールが完了したら、リスト 3 に記載する単純なサンプル・コードを試してみてください。
リスト 3. YouTube の oEmbed API を使用する
<?php
// include class
include 'Services/oEmbed.php';
// define content URL
$url = 'http://www.youtube.com/watch?v=hI-BDR2UcmU';
// define API endpoint
$options = array(
Services_oEmbed::OPTION_API => 'http://www.youtube.com/oembed'
);
// get oEmbed representation
$oEmbed = new Services_oEmbed($url, $options);
$video = $oEmbed->getObject();
?>
<html>
<head></head>
<body>
<div>
<?php echo $video; ?>
</div>
</body>
</html>
|
リスト 3 のコードはまず Services_oEmbed クラスをロードし、それから埋め込むコンテンツ (この例では YouTube の動画) の URL を定義しています。次に、Services_oEmbed クラスのインスタンスを初期化するために、クラス・コンストラクターに 2 つの引数を渡します。引数の 1 つは YouTube の URL、もう 1 つはオプションからなる配列です。
オプション配列の重要な要素は、使用する oEmbed API エンドポイントです。この例では、YouTube の oEmbed エンドポイントである
http://www.youtube.com/oembed を使用しています。最後に、サービス・オブジェクトの getObject() メソッドを呼び出すことで、oEmbed リクエストを実行して返された指定の動画のオブジェクト表現を取得します。
このオブジェクト表現に含まれるのは、要求された動画の URL、作成者、プロバイダー、タイトルなどの詳細情報です。さらに、オブジェクト表現にはサムネイルと動画オブジェクトのサイズ情報を組み込むこともできます。図 1 に一例として、オブジェクトの内容を示します。
図 1. PEAR Services_oEmbed によって返された oEmbed オブジェクト
図 2 に、リスト 3 の出力を示します。この例で表示している動画は、米国内でサンタクロースを追跡している NORAD についての動画です。
図 2. 埋め込まれた YouTube の動画
リスト 4 のように、埋め込みメディアのメタデータを追加することができます。
リスト 4. oEmbed メタデータを使用する
<?ph4
// include class
include 'Services/oEmbed.php';
// define content URL
$url = 'http://www.youtube.com/watch?v=hI-BDR2UcmU';
// define API endpoint
$options = array(
Services_oEmbed::OPTION_API => 'http://www.youtube.com/oembed'
);
// get oEmbed representation
$oEmbed = new Services_oEmbed($url, $options);
$video = $oEmbed->getObject();
?>
<html>
<head></head>
<body>
<div>
<?php echo $video; ?>
</div>
<div>
Type: <?php echo $video->type;?> <br/>
Title: <?php echo $video->title;?> <br/>
Author: <a href="<?php echo $video->author_url;?>">
<?php echo $video->author_name;?></a> <br/>
Provider: <a href="<?php echo $video->provider_url;?>">
<?php echo $video->provider_name;?></a> <br/>
</div>
</body>
</html>
|
図 3 に、リスト 4 の出力を示します。このように、動画と併せてタイプ (video)、タイトル (NORAD Tracks Santa - US Region)、作成者 (NORADTracksSanta)、およびプロバイダー (YouTube) などの詳細情報が表示されます。
図 3. 埋め込まれた YouTube の動画と追加されたメタデータ
oEmbed 仕様では、メディアのタイプとして、photo (写真)、video (動画)、link (リンク)、rich (リッチ・メディア) の 4
つを定義していることに注意してください。タイプによって返されるメタデータは異なり、例えば、動画の html
パラメーターには動画プレイヤーの埋め込みコードが含まれ、写真の url パラメーターには写真の URL
が指定されます。リクエストおよびレスポンスの全パラメーターのリストについては、仕様 (「参考文献」にリンクを記載) を調べてください。
注意が必要なもう 1 つの点として、getObject() の呼び出しに追加パラメーターとして maxheight パラメーターと maxwidth パラメーターを含んだ配列を含めると、返されるオブジェクト表現の高さと幅を指定することができます。
oEmbed の利点は、人気の高い多種多様な Web サービスでサポートされていることです。Flickr、Facebook、YouTube、Vimeo、Viddler、Revision3 は、その一例に過ぎません。リスト 5 に Revision3 の動画を埋め込む場合のプロセスを示します。
リスト 5. Revision3 の oEmbed API を使用する
<?php
// include class
include 'Services/oEmbed.php';
// define content URL
$url = 'http://revision3.com/foundation/jackdorsey';
// define API endpoint
$options = array(
Services_oEmbed::OPTION_API => 'http://revision3.com/api/oembed/'
);
// get oEmbed representation
$oEmbed = new Services_oEmbed($url, $options);
$object = $oEmbed->getObject();
?>
<html>
<head></head>
<body>
<div>
<?php echo $object; ?>
</div>
<div>
Type: <?php echo $object->type;?> <br/>
Title: <?php echo $object->title;?> <br/>
Author: <a href="<?php echo $object->author_url;?>">
<?php echo $object->author_name;?></a> <br/>
Provider: <a href="<?php echo $object->provider_url;?>">
<?php echo $object->provider_name;?></a> <br/>
</div>
</body>
</html>
|
図 4 には、動画と併せ、タイプ (video)、タイトル (Jack Dorsey)、作成者 (Foundation)、およびプロバイダー (Revision3) などの詳細情報が出力されています。
図 4. 埋め込まれた Revision3 の動画
リスト 6 には別の例として、deviantART Web サイトからの作品 (フラクタル図形) を埋め込む場合のプロセスを記載します。
リスト 6. deviantART の oEmbed API を使用する
<?php
// include class
include 'Services/oEmbed.php';
// define content URL
$url = 'http://undead-academy.deviantart.com/art/Spool-192326055';
// define API endpoint
$options = array(
Services_oEmbed::OPTION_API => 'http://backend.deviantart.com/oembed'
);
// get oEmbed representation
$oEmbed = new Services_oEmbed($url, $options);
$object = $oEmbed->getObject();
?>
<html>
<head></head>
<body>
<div>
<?php echo $object; ?>
</div>
<div>
Type: <?php echo $object->type;?> <br/>
Title: <?php echo $object->title;?> <br/>
Author: <a href="<?php echo $object->author_url;?>">
<?php echo $object->author_name;?></a> <br/>
Provider: <a href="<?php echo $object->provider_url;?>">
<?php echo $object->provider_name;?></a> <br/>
</div>
</body>
</html>
|
図 5 の出力には、写真とその詳細情報としてタイプ (photo)、タイトル (Spool)、作成者 (Undead_Academy)、およびプロバイダー (DeviantART) が示されています。
図 5. 埋め込まれた deviantART の画像
多くの Web アプリケーションではすでに独自の oEmbed API エンドポイントを提供しているものの、そうでないアプリケーションもあります。アプリケーションが
oEmbed API エンドポイントを提供していないとしても、oohEmbed サービスを使用すればアプリケーションにアクセスすることはできます。「各種 Web サイトの
HTML 埋め込みコードを提供する oEmbed 対応プロバイダー」と自称する oohEmbed を使用すれば、amazon.com の製品イメージ、Twitter
の近況アップデート、Google ビデオ、Metacafe、Slideshare、TwitPic、Wikipedia、Wordpress
などのアプリケーションやサービスにもアクセスすることができます。ただし、oohEmbed がサポートするのは JSON 出力のみで、maxwidth パラメーターと maxheight パラメーターはほとんどの場合、無視されます。
リスト 7 に、oohEmbed を使用して Wikipedia のコンテンツを Web ページに埋め込む例を記載します。
リスト 7. oohEmbed と Wikipedia を使用する
<?php
// include class
include 'Services/oEmbed.php';
// define content URL
$url = 'http://en.wikipedia.org/wiki/Drupal';
// define API endpoint
$options = array(
Services_oEmbed::OPTION_API => 'http://oohembed.com/oohembed/'
);
// get oEmbed representation
$oEmbed = new Services_oEmbed($url, $options);
$object = $oEmbed->getObject();
?>
<html>
<head></head>
<body>
<div>
<?php echo $object->html; ?>
</div>
<div>
Type: <?php echo $object->type;?> <br/>
Title: <?php echo $object->title;?> <br/>
Author: <a href="<?php echo $object->author_url;?>">
<?php echo $object->author_name;?></a> <br/>
Provider: <a href="<?php echo $object->provider_url;?>">
<?php echo $object->provider_name;?></a> <br/>
</div>
</body>
</html>
|
リスト 7 で指定されている API エンドポイントは、Wikipedia ではなく、oohEmbed に属していることに注意してください。プロキシーのような動作をする oohEmbed は、oEmbed リクエストを受け取って該当数するリンクを調べ、必要なデータが含まれる oEmbed 対応のレスポンスを呼び出し側に返します。
図 6 に、リスト 7 の出力を示します。ここには動画とその詳細情報として、タイプ (link)、タイトル (Drupal)、作成者 (特定の作成者の名前が記載されていないため、この項目は空白です)、プロバイダー (Wikipedia) が示されています。
図 6. 埋め込まれた Wikipedia のページ
リスト 8 は、oohEmbed を使用して Slideshare のプレゼンテーション (リッチ・メディア・タイプ) を Web ページに埋め込む例です。
リスト 8. oohEmbed と Slideshare を使用する
<?php
// include class
include 'Services/oEmbed.php';
// define content URL
$url =
'http://www.slideshare.net/weierophinney/best-practices-of-php-development-presentation';
// define API endpoint
$options = array(
Services_oEmbed::OPTION_API => 'http://oohembed.com/oohembed/'
);
// get oEmbed representation
$oEmbed = new Services_oEmbed($url, $options);
$object = $oEmbed->getObject();
?>
<html>
<head></head>
<body>
<div>
<?php echo $object; ?>
</div>
<div>
Type: <?php echo $object->type;?> <br/>
Title: <?php echo $object->title;?> <br/>
Author: <a href="<?php echo $object->author_url;?>">
<?php echo $object->author_name;?></a> <br/>
Provider: <a href="<?php echo $object->provider_url;?>">
<?php echo $object->provider_name;?></a> <br/>
</div>
</body>
</html>
|
図 7 に示すリスト 8 の出力には、プレゼンテーションとその詳細情報としてタイプ (rich)、タイトル (Best Practices of PHP Development)、作成者 (weierophinney (これは有効なリンクです))、プロバイダー (SlideShare (これも有効なリンクです)) が表示されています。
図 7. 埋め込まれた Slideshare のプレゼンテーション
リスト 9 は、oohEmbed によって製品 URL から amazon.com の製品イメージを取得して埋め込むコードです。
リスト 9. oohEmbed と amazon.com を使用する
<?php
// include class
include 'Services/oEmbed.php';
// define content URL
$url = 'http://www.amazon.com/Framework-Beginners-Guide-Vikram-Vaswani/dp/007163939X';
// define API endpoint
$options = array(
Services_oEmbed::OPTION_API => 'http://oohembed.com/oohembed/'
);
// get oEmbed representation
$oEmbed = new Services_oEmbed($url, $options);
$object = $oEmbed->getObject();
?>
<html>
<head></head>
<body>
<div>
<?php echo $object; ?>
</div>
<div>
Type: <?php echo $object->type;?> <br/>
Title: <?php echo $object->title;?> <br/>
Author: <a href="<?php echo $object->author_url;?>">
<?php echo $object->author_name;?></a> <br/>
Provider: <a href="<?php echo $object->provider_url;?>">
<?php echo $object->provider_name;?></a> <br/>
</div>
</body>
</html>
|
図 8 に示すリスト 9 の出力には、本の表紙とその詳細情報としてタイプ (photo)、タイトル (Zend Framework, A Beginner's Guide)、作成者 (Vikram Vaswani (有効なリンク))、プロバイダー (Amazon Product Image (有効なリンク)) が表示されています。
図 8. 埋め込まれた Amazon の製品イメージ
PEAR Services_oEmbed ライブラリーの代わりに、php-oembed ライブラリーを使ってコンテンツを Web ページに埋め込むこともできます。このライブラリーのインストールは簡単で、ライブラリーをダウンロードして (「参考文献」にリンクを記載)、PHP インクルード・パスに設定された場所にコピーすればよいのです。一方、ライブラリーの構成に関しては、Services_oEmbed よりも多少複雑になります。
php-oembed ライブラリーは、oEmbed プロバイダーと API エンドポイントに関する独自のリストを、インストール・ディレクトリーに格納された providers.xml という名前の XML ファイルに保持します。したがって、特定の oEmbed プロバイダーを使用するには、まずはそのプロバイダーの情報をこのファイルに追加しなければなりません。例えば、deviantART の oEmbed API を使用したいとしたら、最初に providers.xml ファイルを編集してリスト 10 に記載するエントリーを追加します。
リスト 10. providers.xml ファイルを編集してエントリーを追加する
<?xml version="1.0"?>
<providers>
<provider>
<url>http://*.flickr.com/*</url>
<endpoint>http://www.flickr.com/services/oembed/</endpoint>
</provider>
<provider>
<url>http://*.pownce.com/*</url>
<endpoint>http://api.pownce.com/2.1/oembed.{format}</endpoint>
</provider>
<provider>
<url>http://*.deviantart.com/*</url>
<endpoint>http://backend.deviantart.com/oembed</endpoint>
</provider>
<provider>
<url>http://*.youtube.*/*</url>
<endpoint>http://www.youtube.com/oembed</endpoint>
</provider>
</providers>
|
プロバイダーが追加された後は、リスト 11 のように PHP スクリプトで php-oembed を使用できるようになります。
リスト 11. php-oembed ライブラリーと併せて oohEmbed と deviantART を使用する
<?php
// define provider configuration
define('PROVIDER_XML', 'providers.xml');
// include classes
include 'ProviderManager.class.php';
include 'EmbedProvider.class.php';
include 'OEmbedProvider.class.php';
include 'LazyTemplateEngine.class.php';
include 'OEmbed.class.php';
include 'PhotoEmbed.class.php';
// create provider manager
$manager = ProviderManager::getInstance();
// define content URL
$url = 'http://undead-academy.deviantart.com/art/Spool-192326055';
// get oEmbed representation
$object = $manager->provide($url, 'object');
?>
<html>
<head></head>
<body>
<div>
<img src="<?php echo $object->url; ?>" />
</div>
<div>
Type: <?php echo $object->type;?> <br/>
Title: <?php echo $object->title;?> <br/>
Author: <a href="<?php echo $object->author_url;?>">
<?php echo $object->author_name;?></a> <br/>
Provider: <a href="<?php echo $object->provider_url;?>">
<?php echo $object->provider_name;?></a> <br/>
</div>
</body>
</html>
|
リスト 11 のコードは最初に、providers.xml ファイルの場所を定義して、php-oembed
に必要なすべての関連クラスをインクルードします。次に、ProviderManager サービス・オブジェクトを生成し、このオブジェクトの provide()
メソッドを使ってコンテンツの URL の oEmbed 表現を取得します。この表現を返す際のフォーマットには、XML、JSON、PHP オブジェクト、PHP 配列、またはシリアライズ・ストリングを使用することができます。
図 9 は、返されるオブジェクトの一例です (図 9 のテキストのみを表示したものを見るには、ここをクリックしてください)。
図 9. php-oembed によって返された oEmbed オブジェクト
あとは、このオブジェクトのプロパティーを使用して、写真とその詳細情報としてタイプ (photo)、タイトル (Spool)、作成者 (Undead_Academy)、プロバイダー (DeviantART) などを、埋め込み表現と併せてとても簡単に Web ページに組み込むことができます (図 10 を参照)。
図 10. 埋め込まれた deviantART の画像
サンプル・アプリケーション: インライン・コンテンツの埋め込み
oEmbed で PHP を使用する基本的な方法は、以上のとおりです。今度はサンプル・アプリケーションのコンテキストで、これまでに説明した内容が実際にどのように機能するのかを見てみましょう。oEmbed の目的はコンテンツを Web ページに埋め込むことに他なりません。そこで、サンプル・アプリケーションではコンテンツ (ブログ・ポストなど) を入力するためのフォームをユーザーに提供し、入力されたコンテンツに含まれるハイパーリンクを oEmbed を使用して自動的に埋め込み表現に変換します。
リスト 12 に、完全なコードを記載します。
リスト 12. インラインにコンテンツを埋め込むサンプル・アプリケーション
<html>
<head></head>
<body>
<?php if (isset($_POST['submit'])): ?>
<?php
// include class
include 'Services/oEmbed.php';
// define API endpoint
$options = array(
Services_oEmbed::OPTION_API => 'http://oohembed.com/oohembed/'
);
// get post body
// extract all URLs into array
$oBody = $_POST['body'];
$title = $_POST['title'];
preg_match_all('!https?://[\S]+!', $oBody, $matches);
$urls = $matches[0];
$embeds = array();
// for each URL
// get embed code from oohembed if available
// else convert to simple hyperlink
foreach ($urls as $url) {
// get oEmbed representation
$oEmbed = new Services_oEmbed($url, $options);
try {
$object = $oEmbed->getObject(array('maxheight' => '100', 'maxwidth' => '100'));
$embeds[] = (string)$object;
} catch (Exception $e) {
$embeds[] = "<a href=\"" . $url . "\">" . $url . "</a>";
}
}
// replace URLs in body with code
// print revised output
$nBody = str_replace($urls, $embeds, $oBody);
?>
<h1>Preview New Post</h1>
<h2><?php echo $title; ?></h2>
<p>
<?php echo nl2br($nBody); ?>
</p>
<?php else: ?>
<h1>Add New Post</h1>
<form method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>">
<p>
Title: <br/>
<input type="text" name="title" size="40" />
</p>
<p>
Body: <br/>
<textarea name="body" rows="10" cols="50"></textarea>
</p>
<input type="submit" name="submit" />
</form>
<?php endif; ?>
</body>
</html>
|
リスト 12 のコードは、if-else() 条件テストによって、2
つのセクションに分かれています。この条件テストは、フォームが送信されたかどうかを調べ、送信されていない場合には、ユーザーにページのタイトルと本文のコンテンツを入力するよう求める単純な
Web フォームを表示します。ユーザーは、両方のフィールドにテキストを入力します。テキストには必要に応じてハイパーリンクを含めることもできます。リスト 12 によって生成される Web フォームは、図 11
に示すとおりです。この図では、フォームにサンプルのテキストが入力された状態になっています (図 11
のテキストのみを表示したものを見るには、ここをクリックしてください)。
図 11. インライン・コンテンツの埋め込みをサポートする Web フォーム
フォームが送信されると、このスクリプトは新しい Services_oEmbed オブジェクトを初期化して、そのオブジェクトに oohEmbed API
エンドポイントを渡します。続いて、ユーザーから送信されたコンテンツを構文解析し、単純な正規表現を使って本文中にあるすべての URL を抽出します (注: この正規表現は
XSS 攻撃に対してはセキュアではないため、本番環境では使用しないでください)。こうして見つかった URL が、$urls という名前の PHP 配列に格納されます。
次に、foreach() ループと try-catch{}
ブロックを使用して URL 配列を繰り返し処理し、各 URL を Services_oEmbed オブジェクトの getObject() メソッドに渡します。このステップの結果、対応するリモート・コンテンツの oohEmbed API
に対してリクエストが送信されます。サポート対象となっているサービスにコンテンツが置かれている場合には、getObject() メソッドは対応する HTML 埋め込みコードを返し、このコードが $embeds という別の配列に格納されます。コンテンツがサポートされない場合には、コードは例外をスローし、それを try-catch{} ブロックがキャッチします。この例外は、URL の埋め込み表現が使用できなかったことを意味します。したがって、URL
は単純に HTML アンカー・タグに変換されて、$embeds 配列に格納されます。
最後のステップは、ユーザーから送信されたオリジナルのコンテンツ本体で検索して置換する操作を実行し、各 URL を対応する HTML 埋め込みコードまたは HTML ハイパーリンクのいずれかに置き換えます。そして改訂後のコンテンツ本体が、Web ページに出力されるというわけです。
図 12 に、埋め込みコンテンツがインラインに表示された最終的な出力を示します。
図 12. コンテンツがインラインに埋め込まれた Web ページ
この記事では、サード・パーティーの Web サービスで保管されている写真や動画、そしてスライドなどのリッチなコンテンツを、oEmbed 仕様を使用して Web ページに埋め込む方法を駆け足で学びました。oEmbed 仕様は、複数の人気の高いアプリケーションや Web サイトのデータを Web ページに埋め込む上で効率的かつ直観的な方法となります。記事に記載した例では、oEmbed を対象とした 2 つの PHP クライアント・ライブラリーを利用し、Flickr、YouTube、SlideShare、Wikipedia、そして amazon.com などの人気の Web サイトで oEmbed を使用する方法を説明しました。
これらの例からわかるように、oEmbed は唯一の目的、つまりコンテンツを埋め込むためだけに設計された専用の単純な API であり、この目的を極めて見事に実現します。コンテンツの集約と検索を中心とした独創的な新しいアプリケーションを構築することを目指す開発者にとって、oEmbed は柔軟なツールになります。ぜひ、実際に使って確かめてみてください。
学ぶために
- oEmbed 仕様: サード・パーティーのサイトでの URL を埋め込み表現にできるフォーマット、oEmbed について詳しく学んでください。
- PEAR Services_oEmbed コンポーネント: オブジェクトのタイプ、タイトル、作成者の情報、サムネイルの詳細など、URI に関する情報を見つけることを目的としたこのオープン仕様の詳しい内容を読んでください。
- oohEmbed サービス: さまざまな Web サイトの HTML 埋め込みコードを提供する、この oEmbed 対応プロバイダーについての詳細を読んでください。
- この著者による他の記事
(Vikram Vaswani 著、developerWorks、2007年8月から現在まで): XML や Google Base Data API 以外の Google API、そしてその他の技術に関する記事を読んでください。
- developerWorks の XML エリア: XML 分野でのスキルを磨くための資料を入手してください。
- My developerWorks: developerWorks のエクスペリエンスを自分流にカスタマイズしてください。
- IBM XML 認定: XML や関連技術の IBM 認定技術者になる方法について調べてください。
- XML technical
library: 広範な技術に関する記事とヒント、チュートリアル、標準、そして IBM Redbooks については、developerWorks XML
ゾーンを参照してください。また、XML に関するヒントを読んでください。
- developerWorks の
Technical events and webcasts: これらのセッションで最新情報を入手してください。
- developerWorks on Twitter: 今すぐ参加して developerWorks のツイートをフォローしてください。
- developerWorks podcasts: ソフトウェア開発者向けの興味深いインタビューとディスカッションを聞いてください。
- developerWorks オンデマンド・デモ: 初心者向けの製品のインストールおよびセットアップから熟練開発者向けの高度な機能に至るまで、さまざまに揃ったデモを見てください。
製品や技術を入手するために
- PEAR Services_oEmbed コンポーネント: URI に関する情報を検索するためのオープン仕様をダウンロードしてください。
- php-oembed ライブラリー: JavaScript および PHP クライアントが使用できる oEmbed 対応のインターフェースを提供する PHP ライブラリーをダウンロードしてください。php-oembed は、プロキシーとして機能することによって、OEmbed プロバイダーを処理します。また、独自の埋め込みプロバイダーを追加できるプログイン・システムもあります。
- IBM 製品の評価版:
DB2®、Lotus®、Rational®、Tivoli®、および WebSphere®
のアプリケーション開発ツールとミドルウェア製品を体験するには、評価版をダウンロードするか、IBM SOA Sandbox のオンライン試用版を試してみてください。
議論するために
- XML
ゾーンのディスカッション・フォーラム: XML 関連のフォーラムに参加してください。
- developerWorks blogs: これらのブログを調べて、ブログに参加してください。
Vikram Vaswani は、オープンソースのツールと技術を専門とするコンサルティング・サービス会社、Melonfire の創業者で、現在 CEO を務めています。彼は、『Zend Framework: A Beginners Guide』および『PHP: A Beginners Guide』の著者でもあります。
目次
タグ
スライダーバーを使用することで、より多く（少なく）タグを表示します。
人気のタグは、この特定のコンテンツ・ゾーン（例えば、Java テクノロジー、Linux や WebSphere など）に対するトップのタグを表示します。
マイ・タグは、この特定のコンテンツ・ゾーン（例えば、Java テクノロジー、Linux や WebSphere など）に対するお客様ご自身のタグを表示します。
記事の人気タグ |
記事のマイ・タグタグ・リストへスキップ
記事の人気タグ |
記事のマイ・タグ