第3回　リアルタイム連携を設定する

前回は、CommentsListとほかのコントロールを連携させて、XMLデータソースの情報を表示させる仕組みを作りました。今回は、動画の再生時間に連動して動画と他のコントロールの表示が変わる仕組みを作り、XMLを書き換えることで表示を更新する方法をご紹介いたします。

前回までの解説で、動画ファイル（「video.wmv」）がアプリケーション画面の最背面に表示されるよう配置しました。引き続き、MovieSlider のつまみを動画の時間経過に従って移動させる設定を施していきます。

MovieSliderがあらわす数値の最小値と最大値を設定します。MovieSliderを選択した状態で、［プロパティ］パネルの「共通プロパティ」ウィンドウを開き、「Maximum」の欄を「21」、「Minimum」の欄を「0」に設定します【図1】。

次に、MovieSliderのつまみが左から右へ移動させるプログラムを書きます。今回はBlendのXAMLコード画面【図2】、【図3】と、Visual Studio【図4】の2箇所でコードを記述します。

ページ上部の「XAML」タブをクリックして、Window1.xamlのXAMLコードを表示させます。

XAMLコードの28行目付近（【図3】では27行目）に、「＜storyboard x:key="video_wmv"＞」という記述があります。この記述を以下のように書き換えてください。

XAMLコード：書き替え前
＜storyboard x:key="video_wmv"＞

XAMLコード：書き替え後
＜storyboard currenttimeinvalidated="TimeInvalidated" x:key="video_wmv"＞

次に、［プロジェクト］パネルの［ファイル］にある「Window1.xaml.cs」をダブルクリックします。するとVisual Studioが起動して、Window1.xaml.csの内容が表示されます。21行目に以下のコードを挿入し、ファイルを保存、Visual Studioを終了します。

private void TimeInvalidated(object sender, EventArgs args)
{
Clock storyboardClock = (Clock)sender;
TimeSpan timespan = storyboardClock.CurrentTime.Value;
MovieSlider.Value = Convert.ToDouble(timespan.Seconds);
}

ここまででWindow1.xamlを保存し、［F5］キーを押して、このプロジェクトをテスト起動させます。関連するファイルを保存して「プロジェクトのテスト」をクリックしてください【図5】。

動画に連動して、Sliderのつまみが左から右へ移動していれば、成功です。

次に、動画の時間経過に合わせて、CommentsList上の指定が変化するプログラムを記述します。

comments.xmlには、各コメントが表示されるタイミングが＜time＞＜/time＞のタグに記述されています。これを読み込んで、指定のタイミングでコメントが表示される仕組みのプログラムをこれから書いていきます。

［プロジェクト］パネルの［ファイル］にある「Window1.xaml.cs」をダブルクリックします。するとVisual Studioが起動して、Window1.xaml.csの内容が表示されます【図6】。

26行目に以下のコードを挿入します。

追加するコード
XmlNode node = null;
XmlNode time = null;
for (int i = 0; i < CommentsList.Items.Count; i++)
{
node = (XmlNode)CommentsList.Items［i］;

time = node.FirstChild;

if (Convert.ToDouble(timespan.Seconds) == Convert.ToDouble(time.InnerText))
{
CommentsList.SelectedIndex = i;
break;
}
}

次に、10行目に以下のコードを挿入します。

追加するコード
using System.Xml;

ここまで行なったら、いったんWindow1.xamlを保存し、［F5］キーを押して、このプロジェクトをテスト起動させます。関連するファイルを保存して「プロジェクトのテスト」をクリックしてください【図7】。テスト画面上では、時間の経過に合わせてCommentsListの中身が、指定したタイミングで選択され、それに合わせてComment欄の内容が変化します。

ここまでは、各オブジェクトの配置や配色といったデザイン・レイアウト面をそっちのけで作ってきたので、ここでレイアウトを調整します。

レイアウトとデザインの調整は、キャンバス上でのドラッグするか、あるいは［オブジェクトとタイムライン］パネルでオブジェクトを指定し、 ［プロパティ］パネルで行います。筆者は以下のようにデザインを変更しました。

・Window
Widgh: 640
Height:513
・video_wmv
Width:Auto
Height:480
Margin: すべて0
・CommentsList
配置：キャンバスの左下
Background: No brush
Borderbrush: No brush
Foreground: 白
テキストサイズ：16
・Comment
配置：キャンバスの下部
Foreground: 白
テキストサイズ：20

・MovieSlider
配置：キャンバスの上部

最後に、XMLファイルの内容を変えて、あなたのオリジナルの字幕を表示させましょう。

第1回で［既存のアイテムの追加］を行い、XMLファイルの内容をプロジェクト内に読み込みましたが、この時点では、XMLファイルの内容を変更しても、アプリケーションの内容には反映されません。そこでまずは、XMLファイルの内容に連動して、アプリケーションに表示される内容が変化するように設定を変更します。

Visual Studioを起動し、ツールバーの［ファイル］から［プロジェクトを開く］を選択します。ファイル選択欄が表示されますので、サンプルアプリケーションがあるフォルダを選択して、「Lesson5.csproj」を選択します【図8】。

プロジェクトファイルの一覧が［ソリューション エクスプローラ］パネルに表示されますので、「comments.xml」をシングルクリックします。

「comments.xml」をシングルクリックすると［プロパティ］パネルにcomments.xmlファイルの各種設定が表示されるので、 ［プロパティ］パネルに表示された設定のうち、［ビルド アクション］を「コンテンツ」へ、［出力ディレクトリにコピー］を「常にコピーする」へ変更します【図9】。

ツールバーの［ファイル］から［すべてを保存］を選択します。「Lesson5.sln」の保存を求められるので、保存してください。

続いて、XMLの内容を書き換えます。［comments.xml］をテキストエディタで開くと、XMLデータの内容を確認・変更・保存を行うことができます【図10】。

「＜time＞」と「＜/time＞」の間に書かれた数は、その下の2行に書かれている内容を表示するタイミング（単位：秒）を意味します。数値と言葉を書き換えて、字幕をカスタマイズします【図11】。カスタマイズした後は、エディタを終了してください。

ここまで終えたらWindow1.xamlを保存し、［F5］キーを押して、このプロジェクトをテスト起動させます。関連するファイルを保存して「プロジェクトのテスト」をクリックしてください。CommentsListとcomment欄には、カスタマイズした設定の字幕が表示されます【図12】。

以上、Blendを使ってデータバインドを行う方法を3回にわたって紹介してきました。

Blendはインタラクティブなアプリケーションを作るうえで強力なツールといえます。その一方で、今回Visual Studioを使って設定を変更したように、アプリケーションを作り込むには現在のところBlend以外のツールも使いこなす必要があることも、おわかりいただけたのではないかと思います。

データバインドはほかのアプリケーションやシステムとの連携を行う上で非常に重要な機能ですので、覚えておいて損はないノウハウです。ネット上にはさまざまな形式のXMLファイルを入手できますので、例えばそれらを閲覧するまったく新しいユーザーインターフェイスを作ってみるのもおもしろいかもしれません。