強震モニタをアプリ化
先日教えてもらった、防災科学研究所の強震モニタ。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>