オプション設定
HTMLオーバーレイ機能
放送ストリームに含まれるデータとは独立したHTMLページをビデオにオーバーレイする、言わば「勝手データ表示」機能があります。
Magnezioには放送ストリームに含まれるメタデータをHTMLに通知する機能に加え、TwitterのStreaming API
を利用して特定のハッシュタグを含むtweet(つぶやき)を連続して受信する機能が組み込まれており、受信したtweetをHTMLに通知することもできます。
ハッシュタグは複数指定でき、投稿数の多いハッシュタグを指定すると多数のtweetが受信されますが、Magnezioでは以下の方法で受信したtweetの通知の可否を決定します:
- 自身のtweet、自身のfriendsのtweet、自身のfollowerのtweetは通知されます。
- whitelist.xmlに登録されている人のtweetは通知されます。
- blacklist.xmlに登録されている人のtweetは通知されません。
- それ以外のtweetで、retweetを含むものやblacktags.xmlに登録されているハッシュタグを含むものは通知されません。
- 以上のどれにも当てはまらないtweetは通知可能な「ノイズ」と見なされ、予め設定されている
・通知頻度(=時間あたりの通知数、デフォルトは12 tweets/分)
・通知のS/N比(デフォルトは50%)
に従って取捨選択されます。これらの設定値はJavaScriptで変更することができます。
overlay.html
HTMLオーバーレイをONにすると、Androidデバイス上の
/sdcard/com.mediagram.magnezio/html/overlay.html
がビデオにオーバーレイ表示されます。デフォルトのファイル名はoverlay.htmlですが、「HTMLを選択... 」メニューで所定のディレクトリ
/sdcard/com.mediagram.magnezio/html/
に置かれている任意のHTMLに変更できます(拡張子は.html又は.htm)。
HTMLはどんな内容でも構わず、必ずしも通知されたメタデータやtweetを表示/利用する必要はありませんが、以下の制限があります:
- HDテレビ画面の解像度(1920×1080画素)を想定し、レンダリングはこのサイズに固定されています。 液晶の解像度が異なる場合はフルスクリーン表示になるようスケーリングされます。 横画面の場合は常に全画面表示になりStatus Barは表示されません。 液晶解像度が16:9でない場合は、画面の下部又は左右(sidepanel表示)に黒い非表示領域が設けられます。
- header要素内で
<meta name="viewport" content="width=1920,height=1080"/>
を指定してビデオ全画面にオーバーレイさせます。 - 縦横のスクロールバー表示やズーム表示のUIは禁止されています。
- 横画面ではAndroid 4.2.x以降では画面をタップするとAction BarとNavigation BarがHTMLの手前に表示されるため、 その背後に置かれた要素はタップできなくなります。 また、ビデオ再生時にはHTMLの手前に再生制御のUIが提示されますので、その背後に置かれた要素はタップできなくなります。
- ビデオにオーバーレイするため背景は透明に設定してありますので、background-color に濃い色を指定するとビデオが見えづらくなり、機種によってフリッカーが発生する可能性があります。
-
MagnezioでTwitter機能を利用する場合は、Twitterのアカウントが必要です。
最初に一度だけOAuth認証によりTwitterにログインし、Access Tokenを取得する必要があります。
Twitterを利用しない場合は「つぶやきを表示しますか?(Twitterアカウントが必要です)」というダイアログで「表示しない」を選んで下さい。その際に「設定を保存」をチェックしておくと、次にHTMLオーバーレイ機能をONにした時にこの手順を省略できます。
後日Twitterを利用したくなった場合は、Androidのアプリケーション管理画面でMagnezioアプリの「データを消去」で設定をクリアして下さい。 クリアすると、設定済みの郵便番号も含めBMLのスクリプトで設定されたデータ(NVRAM、ブックマーク、ルート証明書等)が全てクリアされます。
- HTMLオーバーレイをONにするとunloadイベント、OFFにするとonunloadイベントがそれぞれ発生しますので、必要に応じて開始/停止処理をして下さい。
-
HTML にJavaScript関数onMetaData()が定義されていれば、放送ストリームに含まれているメタデータが通知されます。関数の仕様は以下の通りです。
function onMetaData(meta) {...}
引数metaは以下のプロパティを持つオブジェクトです:
meta.tsName その放送ストリームの名称(放送局名) meta.eventName 番組名 meta.startTime 番組開始時刻 meta.duration 番組の長さ meta.text 番組説明
メタデータに放送用追加記号が含まれる場合、置換可能なものは[二]や[デ]のような標準文字の組み合わせに自動置換します。また改行は捨てられます。 -
HTML にJavaScript関数onCaption()が定義されていれば、放送ストリームに含まれている字幕文字列が通知されます。関数の仕様は以下の通りです。
function onCaption(cap) {...}
引数metaは以下のプロパティを持つオブジェクトです:
cap 字幕文字列(UTF-8符号)
文字列は全て全角に変換され、DRCS、改行、引用符(”)は除去されます。
字幕に放送用追加記号が含まれる場合、置換可能なものは[二]や[デ]のような標準文字の組み合わせに自動置換します。 -
HTML にJavaScript関数onVideoStarted(), onVideoStopped(), onVideoCurrentPosition()が定義されていれば、ビデオの再生開始、停止、現在位置が通知されます。それぞれの関数の仕様は以下の通りです。
function onVideoStarted() {...}
ビデオ再生が開始したことが通知されます。
function onVideoStopped () {...}ビデオ再生が停止したことが通知されます。
function onVideoCurrentPosition(millis) {...}ビデオ再生開始から約1秒間隔で現在の再生位置が通知されます。
millis 現在の再生位置(current position、再生開始時刻からの経過時間)
単位はミリ秒 -
tweetを表示(処理)する場合はHTMLにJavaScript関数onTweet()を定義して下さい。関数の仕様は以下の通りです。
function onTweet(tweet) {...}
引数tweetは以下のプロパティを持つオブジェクトです:
tweet.date tweetの時刻を表すミリ秒(又はtweetが到着した時刻) tweet.id tweetのID tweet.text tweetの本文(本文中の改行や全角スペースは半角スペースに置換されます) tweet.user tweetをしたユーザのscreen name tweet.image tweetをしたユーザのアイコン tweet.myself tweetがユーザ自身のものならtrue tweet.friend tweetをしたユーザがfriendならtrue tweet.follower tweetをしたユーザがfollowerならtrue tweet.white tweetをしたユーザがwhitelist.xmlに登録されていればtrue tweet.isRetweet tweetがretweetならtrue tweet.tags tweetに含まれるハッシュタグの一覧 onTWeet()に渡されるtweetは、様々なXMLファイルやJavaScript APIでで制御可能です。
-
tweetに関する統計情報を取得してtweetの勢いなどを表示するには、HTMLにJavaScript関数onTweetStat()を定義して下さい。関数の仕様は以下の通りです。
function onTweetStat(stat) {...}
引数tweetは以下のプロパティを持つオブジェクトです:
stat.total オーバーレイを開始してから受信した総tweet数(通知されないものも含む) stat.average オーバーレイを開始してから受信した平均tweet数(tweets/分) stat.count 最後の15秒間に受信したtweet数(通知されないものも含む) stat.shown 最後の15秒間に通知されたtweet数 stat.averageOfLastInterval 最後の15秒間に通知された平均tweet数の分換算値
hashtags.xml
MagnezioのTwitter機能がStreaming APIで取得するハッシュタグの一覧は、以下のXMLで変更可能です:
/sdcard/com.mediagram.magnezio/html/hashtags.xml
hashtags.xmlが存在しない場合の初期設定は以下の通りで、テレビ放送キー局の主要なハッシュタグが列挙されています:
<hashtag>#nhk24</hashtag>
<hashtag>#nhk_NEWSWEB</hashtag>
<hashtag>#nhk_fukayomi</hashtag>
<hashtag>#nhk</hashtag>
<hashtag>#etv</hashtag>
<hashtag>#nhk_etv</hashtag>
<hashtag>#nhk2</hashtag>
<hashtag>#ntv</hashtag>
<hashtag>#tvnihon</hashtag>
<hashtag>#tbs</hashtag>
<hashtag>#fujitv</hashtag>
<hashtag>#tvasahi</hashtag>
<hashtag>#tvtokyo</hashtag>
</hashtags>
onTweet()にはhashtags.xmlに記載されているハッシュタグを含むtweetが通知されます。通知されたtweetの表示方法を変えたり、表示するハッシュタグやユーザを限定・除外したり、メタ情報を利用して特定の番組ではHTML表示自体を透明にして消すなど、JavaScriptで自由に利用できます。
blacklist.xml
特定のユーザのtweetを除去したければそのユーザのscreen nameをblacklist.xmlに列挙します。
Magnezioはそのscreen nameを持つユーザのtweetをonTweet()に通知しません:
/sdcard/com.mediagram.magnezio/html/blacklist.xml
<sn>xxxxx</sn>
<sn>yyyyy</sn>
...
</blacklist>
whitelist.xml
特定のユーザ(著名人、見識者など、friendsでもfollowerでも無い人)のtweetを表示したければそのユーザのscreen nameをwhitelist.xmlに列挙します。
Magnezioはそのscreen nameを持つユーザのtweetを無条件にonTweet()に通知します:
/sdcard/com.mediagram.magnezio/html/whitelist.xml
<sn>xxxxx</sn>
<sn>yyyyy</sn>
...
</whitelist>
blacktags.xml
特定のハッシュタグを含むtweetを排除できます:
/sdcard/com.mediagram.magnezio/html/blacktags.xml
blacktags.xmlが存在しない場合はhashtags.xmlで指定したタグを含む全tweetが通知されます:
<hashtag>#xxxxxx</hashtag>
<hashtag>#yyyyyy</hashtag>
</blacktags>
onTweet()にはblacktags.xmlに記載されているハッシュタグを含むtweetは通知されません。
XMLファイルの管理、デフォルト設定値の変更
以下の関数を利用してJavaScriptからMagnezioにコマンドを送って各種の設定値やXMLファイルの内容を変更できます。
function magnezioCommand(cmd) { var a = document.createElement("a"); a.href = "magnezio:" + cmd; if (document.createEvent) { var e = document.createEvent("MouseEvents"); e.initEvent("click", true, true); a.dispatchEvent(e); } }
magnezioCommand()の引数cmdは、
という形式の文字列で、利用可能なcommandは以下の通りです(サンプルとしてデフォルト値のparam付)。
tweetの通知頻度を12回/分に設定します。
S/N比を50%に設定します。
ノイズtweetがretweetである場合、通知しません。
blacklistにscreenNameを追加します。
whitelistにscreenNameを追加します。
blacktagsにhashtagを追加します。hashtagには"#"を含めません。
blacklist.xmlを空にします。
whitelist.xmlを空にします。
blacktags.xmlを空にします。
overlay.htmlの例
<html> <head> <meta charset="utf-8"/> <script> var liCount = 3; function onTweet(tweet) { if (tweet.text.length > 0 && tweet.user.length > 0) { var li = document.createElement("li"); li.innerText = tweet.text + " by @" + tweet.user; var ul = document.getElementById("ul"); ul.removeChild(ul.childNodes.item(liCount - 1)); ul.insertBefore(li, ul.childNodes.item(0)); // or ul.appendChild(li); } } function load() { var ul = document.getElementById("ul"); for (var i = 0; i < liCount; i++) { var li = document.createElement("li"); li.innerText = ""; ul.appendChild(li); } } function unload() { } </script> </head> <body onload="load()" onunload="unload()"> <ul id="ul" style="position:absolute; left:20px; top:820px; width:1880px; height:240px; background-color:rgba(48,48,48,0.75); clip:rect(0px,1880px,240px,0px); color:white; font-family:sans-serif; font-size:250%;"> </ul> </body> </html>
この例ではHTMLのbodyに画面下部の半透明の領域にUL要素が置かれ、onload処理でliCount個(=3個)のIL要素を子要素として追加しています。onTweet()が呼ばる都度、最後の(=3つ目の、一番古い)IL要素を削除して新しいtweetのテキストを含んだLI要素をUL要素の先頭に追加し、新しいtweetが一番上に表示されます。
弊社Webにごく簡単なtweet表示のサンプルを2つ用意してありますので、redirectするかコピーしてご利用下さい(redirectの方法はFAQをご覧下さい)。
番組名表示を加えた例:
http://www.mediagram.co.jp/magnezio/html/twitter.zip
ニコ動風tweet表示例:
http://www.mediagram.co.jp/magnezio/html/nicofoo.zip
このようにHTMLオーバーレイの仕組みは極めて単純です。メタ情報利用して表示内容をフィルターしたり、表示するHTMLを切り替えたり、字幕やtweetを分析して関連する情報を表示するなど工夫してみて下さい。デバイスに転送するには...
作成したoverlay.html、hashtags.xml、blacklist.xmlをAndroidデバイスに転送する方法は色々ありますが、Android SDKのadbを利用する場合は以下のコマンドラインを参考にして下さい:
$ adb push overlay.html /sdcard/com.mediagram.magnezio/html
$ adb push hashtags.xml /sdcard/com.mediagram.magnezio/html
$ adb push blacklist.xml /sdcard/com.mediagram.magnezio/html
フォントの設定
データ放送で利用される文字には放送用追加記号(JIS 90区から94区)が含まれており、Androidデバイスに標準搭載されているフォントでは正しく表示されません。以下のフォント(パスは固定)があれば、BMLや字幕表示でそのフォントが利用されます:
/sdcard/com.mediagram.magnezio/fonts/kaku_gothic.ttf
/sdcard/com.mediagram.magnezio/fonts/futomaru_gothic.ttf