mixi チェックするブライトコーブプレーヤを作ってみる

 

9月13日、mixi meetup 2010 で mixi Connect をさらに発展させる mixi Plugin と mixi Graph API が発表されました。インターネットのすべてをソーシャル化する、というミッションを掲げ、ソーシャルグラフのオープン化をさらに加速させています。昨年 Facebook の開発者向けコンファレンス f8 で発表された Social Plugin, Open Graph, Graph API 同様、ソーシャルメディアの中に蓄えられている情報へのアクセスとソーシャルメディアの外にある膨大なリソールを取り込む仕組みが提供されることになりました。早速、mixi Plugin のひとつ mixi チェックのブライトコーブプレーヤ用プラグインを作ってみました。

出来上がりは ↑ な感じです(HTMLファイルはこちらです)。mixi チェックボタンをクリックすると、動画のタイトル、短い説明のメタデータと共に、動画のサムネールが mixi チェックに送られます。送られたリンクはシングルプレーヤで配信し、HTML5での配信オプションを有効にしてありますので、 iPhone/iPad/iPod Touch の Safari ブラウザでも視聴可能です。

mixi チェックは Facebook の "Like" ボタン と同じく、ソーシャルメディアの外側にあるリソースを取り込み、ソーシャルグラフで共有するための仕組みを提供します。URLさえ付いていればどんなものでも共有できるので、バイラルをさらに加速させるマーケティングエンジンとしても企業のマーケティングに大きなインパクトがあるでしょう。

動画視聴解析 のリーディングプロバイダ、TubeMogul と 弊社 Brightcove の共同リサーチの結果(Brightcove & TubeMogul Release Q2 Online Video Research Report)では、Twitter や Facebook が動画への誘導先として急速な成長を遂げていることが分かります。Twitter や Facebook から動画コンテンツを発見し、視聴するユーザの増加率は、検索エンジンや直接リンクを参照するユーザの増加率を上回るペースで成長しています。今年中には動画への誘導トラフィックで Facebook が Yahoo! を抜くのではないかと予想されています。Facebook の成長率は 月間 48%、Twitter は 月間 38%、Yahoo! 月間 35%、Google 月間 38% となっています。

前置きはこれくらいにして、早速本題。mixi チェックのボタンをブライトコーブの動画プレーヤにも実装してみたいと思います。実装の手順は以下のような感じです。

Brightcove プレーヤに組込むプラグイン(BEMLコンポーネント)の開発

Brightcove プレーヤに組込むBEMLコンポーネントmixiCheckPlugin.swf というファイル名で ActionScript3 で開発します。Twitter へつぶやくプレーヤを作ってみる で紹介した BEML プラグインと同じ手法です。開発環境の準備などはこちらを御覧ください。プラグインをすぐに試してみたい方は mixi-check-beml-plugin.zip ダウンロードし、次の手順へと進んでください。mixiチェックには『チェックキー』というトークンが必要になります。mixi デベロッパーセンターから開発者として申し込み、Developer Dashboard からmixi Plugin のアプリケーションを登録するとチェックキーがもらえます。mixi チェックのボタンを実装するにはこのキーが必要になりますので、mixi デベロッパーセンターで予め必要な登録を済ませてください。

Brightcoveプレーヤのプラグインとしてコンポーネントを作成する場合は、com.brightcove.api.CustomModule クラスを継承します。Brightcove プラグインとしてのお作法は initialize():void メソッドを実装するだけ。ここで、PlayerModuleやSocialMediaModule への参照を取得します。mixiチェックボタンがクリックされると onMouseClick イベントが呼び出され、onEmbedCode() でプレーヤへのリンクを取得、PostToSocialMedia()で mixi チェックの API が呼び出されています。mixi-check-beml-plugin.zip には ActionScript のソースコードも含まれていますので、そちらを参考にしてください。

mixiCheckPlugin.swf が完成したら、サーバにFTPでファイルをアップロードします。Flash Player から読み込まれるため、crossdomain.xml が必要になる場合もありますので、注意してください(crossdomain.xml の詳細についてはブライトコーブヘルプ、Flash のクロスドメインセキュリティを参照してください)。

Brightcove プレーヤプラグインの設定

Chromeless Video Player の下に mixiチェックボタンを読み込むような新しいプレーヤを作ります。ブライトコーブスタジオにログインし、Publishing モジュールから新しいプレーヤテンプレートを作成します。新しいプレーヤテンプレートには下記のBEMLを使います。

[mixiチェックプレーヤ]

<Runtime>
  <Theme name="Deluxe" style="Light"/>
  <Layout backgroundColor="0x01000000">
    <VBox>

      <ChromelessVideoPlayer id="videoPlayer"/>
      <SWFLoader source="http://www.mycompany.com/[path]/[to]/[swf]/MixiCheckPlugin.swf?check_key=xxxxx.....xxxxxx" width="100%" height="25" depth="2"/>

    </VBox>
  </Layout>
</Runtime>

このプレーヤテンプレートでのキモは、SWFLoader タグで読み込まれている mixiCkeckPlugin.swf のあとについているパラメータです。check_key というパラメータで指定されている値は、mixi デベロッパーセンターで mixi Plugin アプリケーションを登録した際に発行されるチェックキーです。これを SWFLoader タグの source 属性に指定する URL に追加します。Chromless Video Player の下にプラグインが入るので、その分の高さを調整するために、サイズを480 x 295 に変更します。プレーヤテンプレートはこれで完成です。あとはこのテンプレートからプレーヤを作成し、HTMLページにパブリッシュすれば完成です。出来上がりのHTMLはこちら

まとめ

ソーシャルメディアがコンテンツディスカバリの手段として定着している海外では、検索エンジンではなく、ソーシャルメディア経由で動画コンテンツがユーザの目に触れることが一般的になりつつあります。バイラルしやすさとネットの近距離ユーザからの情報として、動画をマーケティングに活かしユーザへの認知度、ブランディング、商品説明などこれまでのマーケティングとは異なるアプローチでユーザにリーチすることが可能になります。

日本でもソーシャルメディアの最大手ミクシィがそのプラットフォームを開放したので、ソーシャルマーケティングにさらに注目が集まっていくことが予想されます。ブライトコーブのプレーヤの柔軟な API を使えば mixi だけでなく、今後出てくるであろうソーシャルメディアのAPIとの連携も簡単に、再利用可能な形で開発することができます。是非、mixi チェックを使って動画のバイラルマーケティングを試してみてはいかがでしょうか。