強震モニタをアプリ化

#wp7dev_jp

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

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

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

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

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

 <phone:PhoneApplicationPage

     xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"

     xmlns:x="https://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="https://schemas.microsoft.com/expression/blend/2008"

     xmlns:mc="https://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="https://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>

Additional resources