プレーヤーにTwitterフィードボックスを追加する

Brightcove News

今回はプレーヤーに Twitter フィードボックスを簡単に追加できるプラグインを紹介します。

BEML テンプレート内で SWFLoader 要素でこのプラグインを指定して、Twitter 検索を行う際のキーワードもしくはハッシュタグを指定すると、その結果を Twitter フィードボックスに表示することができます。

brightcove.createExperiences();

※ このサンプルではハッシュタグ (#brightcove) を Twitter フィードボックスに表示しています。

今回利用するプラグインは以下から取得が可能です。

パッケージ一式
https://github.com/BrightcoveOS/Twitter-Feed-SWF/zipball/c263b0e7d301b30ce7fd23ca3bf74ae0673448ea

最新ソース (GitHub)
https://github.com/BrightcoveOS/Twitter-Feed-SWF

※ ただし、上記に含まれるソースコードは言語が英語で動作するように記述されています。日本語で動作させるためにはソースコードに一部修正が必要になります。修正方法は以下の通りです。

TweetFeed のソースファイルの１つ、com.brightcove.opensource.TwitterSearch.as の params.lang = "en"; の行をコメントアウトして再ビルドします。

ActionScript3 をビルドする環境がない方のために日本語に対応した SWF を用意しました。以下の URL から取得ができます。
http://dev.brightcove.co.jp/blog/twitter/TwitterFeed.swf

■ 設定方法

BEMLテンプレートにSWFLoader要素を１行追加するだけです。

height属性： Twitter フィードボックスの高さを指定します。デフォルトは 36 です。
※ 横幅はプレーヤーのサイズに自動的に調整されます。
source属性： TwitterFeed.swf を置いている URL を指定します。

以下に BEML テンプレートのサンプルを示します。

※ TwitterFeed.swf を指定する SWFLoader 要素はプレーヤーの真上か真下に配置するのがよいかと思います。所望の位置に配置するにはBEMLのレイアウトを多少調整する必要があるかと思います。

以上で設定は完了です。このBEMLテンプレートを使ってプレーヤーを作成して動画を割り当てます。

■ 利用方法

Twitter 検索する際に指定できるものとして以下のものがあります。

検索キーワード
キーワードをそのまま指定します。
ハッシュタグ
文字の先頭に # をつけて指定します。
ユーザー名
文字の先頭に @ をつけて指定します。

指定方法には以下の 3 種類があります。

1. SWFLoader 要素の source で TwitterFeed.swf を指定する際に指定する方法

BEML テンプレート内の SWFLoader 要素の source で TwitterFeed.swf を指定する際に「?twitterTerm=revision3」のように SWF の URL の末尾にパラメータを指定します。

例

2. JavaScript のプレーヤー公開コードにタグを追加する方法

JavaScript のプレーヤー公開コードにのようにタグを追加します。タグで指定したものは SWFLoader 要素の source で指定した twitterTerm より優先されます。通常はこの方法を使うのがよいかと思います。

3. ページの URL のパラメータで指定する方法

プレーヤーを貼り付けているページの URL に twitterTerm のパラメータを追加して指定する方法です。例えばプレーヤーを貼り付けているページの URL が http://mydomain.com/view.html の場合、以下のように指定します。

http://mydomain.com/view.html?twitterTerm=revision3

この方法で指定した twitterTerm は JavaScript のプレーヤー公開コードのタグで指定した twitterTerm、SWFLoader 要素の source で指定した twitterTerm よる優先されます。

■ 動作について

TwitterFeed SWF では Twitter 検索結果の上限は 20 個までとなっています。また検索結果は読みやすさを考慮して古いものから順にソートされて表示されます。
表示されているツイートをクリックすると新しいウインドウが開いて該当のツイートが表示されます。Twitter フィードボックス端の矢印をクリックすると前後のツイートへ移動することができます。また 10 秒間何も操作しないと次のツイートが自動的に表示されます。

■ 技術的情報

TwitterFeed SWF は内部的に以下の Twitter 検索を実施します。

http://search.twitter.com/search.json

q パラメータ： twitterTerm で指定したものがここに入ります。
rpp パラメータ： 20（検索結果最大は 20 個まで）