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

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

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

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

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

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

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

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

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

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

設定方法

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

<SWFLoader height="36" id="twitterFeed" source="http://mydomain.com/TwitterFeed.swf" />

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

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

<Runtime>
 <Theme name="Deluxe" style="Light"/>
 <Layout>
  <VBox padding="3">
   <VideoPlayer id="videoPlayer"/>
   <SWFLoader height="36" id="twitterFeed" source="http://dev.brightcove.co.jp/blog/twitter/TwitterFeed.swf"/>
  </VBox>
 </Layout>
</Runtime>

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

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

利用方法

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

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


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

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

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

<SWFLoader height="36" id="twitterFeed" source="http://dev.brightcove.co.jp/thase/twitter/TwitterFeed.swf?twitterTerm=revision3"/>


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

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

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

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

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

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

動作について

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

技術的情報

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

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

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