強震モニタ_62#wp7dev_jp

先日教えてもらった、防災科学研究所の強震モニタ。Windows Phone のお気に入りに登録しておくと便利です。

しかし、こういうのはアプリにしなくては、と思ってアプリ化してみました。といっても、Web ブラウザコントロールを張り付けているだけです。Marketplaceには出してないけど。

Screen Capture-20120228201527497Screen Capture-20120228201528056

ポイントは、「一切コードを書かないこと!」 そう、徹底的に Expression Blend です。なので、コードはXAML側だけ。基本すべてBlendで作成。

image

  • サイトのタイトル部分を隠すためにRectangle で目隠し。
  • その上にWindows Phone のアプリケーション風にタイトルを配置。
  • 問題はブラウザがスクロールできてしまう事。そこで、触らせないように図形オブジェクトを配置。
    ただ、いくつかのボタンは触れるように穴をあけた、パスオブジェクトを作った。(図ではピンクですが、実際は透明)
  • 起動時はブラウザが真っ白なのが嫌なのでOpacityを0にしておき、サイトを読み込んだら(LoadCompleted)アニメーションでOpacityを1にする。

操作防止用のパスはOpacity=0としてはいけない。触れなくなるから。Opacity=1で透明色にすると触れるようになる=ブラウザには触れなくなる。

<phone:PhoneApplicationPage
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 
    xmlns:eim="clr-namespace:Microsoft.Expression.Interactivity.Media;assembly=Microsoft.Expression.Interactions" 
    xmlns:ec="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions" 
    x:Class="PhoneApp106.MainPage"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <phone:PhoneApplicationPage.Resources>
        <Storyboard x:Name="ShowBrowser">
            <DoubleAnimation Duration="0:0:0.5" To="1" 
                Storyboard.TargetProperty="(UIElement.Opacity)" 
                Storyboard.TargetName="webBrowser1" d:IsOptimized="True"/>
        </Storyboard>
    </phone:PhoneApplicationPage.Resources>
 
    <!--LayoutRoot は、すべてのページ コンテンツが配置されるルート グリッドです-->
    <Grid x:Name="LayoutRoot" Background="Transparent">

        <phone:WebBrowser x:Name="webBrowser1" 
              Source="http://realtime-earthquake-monitor.appspot.com/" Opacity="0" 
              IsScriptEnabled="True" Width="483" Height="635">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="LoadCompleted">
                    <eim:ControlStoryboardAction Storyboard="{StaticResource ShowBrowser}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </phone:WebBrowser>

        <Rectangle Fill="Black" Height="98" Stroke="Black" VerticalAlignment="Top"/>
        <TextBlock HorizontalAlignment="Left" Margin="10,10,0,0" Text="強震モニタ" 
                   VerticalAlignment="Top" Foreground="White" FontSize="60" />
        <Path Fill="#01000000" 
              Data="M240,675 L240,700 L260,700 L260,675 z M10,675 L10,700 L200,700 
              L200,675 z M205,100 L205,130 L350,130 L350,100 z M10,100 L10,130 
              L40, 130 L40,100 z M0,0 L480,0 L480,770 L0,770 z"  />
        
    </Grid>
</phone:PhoneApplicationPage>