Silverlightで世界のナベアツ時計

世界のナベアツをSilverlightで作ってみた。(これほんとにMacでも動くのか？)
秒を数える(音が出る)のだが、3の倍数と、3がつく秒数の時にアホになる。
(追記)Moonlightで動かしてみた人がいますね。
あまり興味のない人は知らないかもしれないけど、SilverlightはJavascriptとXAMLファイルがあればアプリを作れる。(複雑なベクタグラフィクスを表現するXAMLはツールで生成したいところだが……)

JavaScriptはこんな感じでいい。ロジックと音声ファイルを変えればFizzBazz時計になるね。

function createSilverlight()
{
  Silverlight.createObjectEx({
    source: 'Nabe.xaml',
    parentElement: document.getElementById('SilverlightPlugInHost'),
    id: 'SilverlightPlugIn',
    properties: {
      width: '400',
      height: '400',
      background:'#ffffff',
      isWindowless: 'false',
      version: '1.0'
    },
    events: {
      onLoad: startClock
    },    
    context: null 
  });
}
function startClock()
{
  setInterval(count,1000);
}
function onEnd(sender, args)
{
  sender.Stop();
}
function count()
{
  var d = new Date();
  var ag = document.getElementById('SilverlightPlugIn');
  ag.content.findName("time").Text = getTime(d);
  var sec = d.getSeconds();
  var sound = ag.content.findName("s" + sec);
  sound.Play();
  if (isAho(sec)) {
    ag.content.findName("aho").Begin();
  }
}
function getTime(d)
{
  var h = d.getHours();
  if (h < 10) h = "0" + h;
  var m = d.getMinutes();
  if (m < 10) m = "0" + m;
  var s = d.getSeconds();
  if (s < 10) s = "0" + s;
  return h + ":" + m + ":" + s;
}
function isAho(sec)
{
  if (sec % 3 == 0) return true;
  return (("" + sec).indexOf("3") >= 0)
}

XAMLはこんな感じ。音声ファイルの宣言がみっともないけど。

<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas.Resources>
    <Storyboard x:Name="aho">
      <DoubleAnimationUsingKeyFrames
        Storyboard.TargetName="face1" Storyboard.TargetProperty="Opacity">
        <DiscreteDoubleKeyFrame Value="0" KeyTime="0:0:0"/>
        <DiscreteDoubleKeyFrame Value="1" KeyTime="0:0:0.4"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimation BeginTime="0:0:0" Storyboard.TargetName="rotate"
        Storyboard.TargetProperty="Angle" From="0" To="45" Duration="0:0:0.2" AutoReverse="true"/>
    </Storyboard>
  </Canvas.Resources>
  <Canvas Width="400" Height="550">
    <Canvas.Background>
      <ImageBrush ImageSource="image/bg.png" />
    </Canvas.Background>
    <Image x:Name="face2" Source="image/face2.png"
      Width="160" Height="216" Canvas.Left="120" Canvas.Top="5">
      <Image.RenderTransform>
        <RotateTransform x:Name="rotate" Angle="0" CenterX="50" CenterY="180" />
      </Image.RenderTransform>
    </Image>
    <Image x:Name="face1" Source="image/face1.png"
      Width="160" Height="216" Canvas.Left="120" Canvas.Top="5"/>
    <TextBlock x:Name="time" FontWeight="Bold" Text="00:00:00"
      TextWrapping="NoWrap" Foreground="Black" FontSize="80" Canvas.Left="20" Canvas.Top="200"/>
    <MediaElement x:Name="s0" Source="sound/s00.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s1" Source="sound/s01.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s2" Source="sound/s02.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s3" Source="sound/s03.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s4" Source="sound/s04.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s5" Source="sound/s05.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s6" Source="sound/s06.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s7" Source="sound/s07.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s8" Source="sound/s08.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s9" Source="sound/s09.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s10" Source="sound/s10.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s11" Source="sound/s11.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s12" Source="sound/s12.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s13" Source="sound/s13.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s14" Source="sound/s14.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s15" Source="sound/s15.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s16" Source="sound/s16.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s17" Source="sound/s17.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s18" Source="sound/s18.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s19" Source="sound/s19.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s20" Source="sound/s20.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s21" Source="sound/s21.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s22" Source="sound/s22.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s23" Source="sound/s23.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s24" Source="sound/s24.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s25" Source="sound/s25.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s26" Source="sound/s26.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s27" Source="sound/s27.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s28" Source="sound/s28.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s29" Source="sound/s29.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s30" Source="sound/s30.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s31" Source="sound/s31.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s32" Source="sound/s32.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s33" Source="sound/s33.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s34" Source="sound/s34.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s35" Source="sound/s35.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s36" Source="sound/s36.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s37" Source="sound/s37.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s38" Source="sound/s38.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s39" Source="sound/s39.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s40" Source="sound/s40.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s41" Source="sound/s41.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s42" Source="sound/s42.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s43" Source="sound/s43.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s44" Source="sound/s44.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s45" Source="sound/s45.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s46" Source="sound/s46.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s47" Source="sound/s47.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s48" Source="sound/s48.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s49" Source="sound/s49.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s50" Source="sound/s50.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s51" Source="sound/s51.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s52" Source="sound/s52.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s53" Source="sound/s53.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s54" Source="sound/s54.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s55" Source="sound/s55.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s56" Source="sound/s56.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s57" Source="sound/s57.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s58" Source="sound/s58.mp3" AutoPlay="false" MediaEnded="onEnd"/>
    <MediaElement x:Name="s59" Source="sound/s59.mp3" AutoPlay="false" MediaEnded="onEnd"/>
  </Canvas>
</Canvas>