PR

WebViewを使ってHTMLコンテンツを表示させる

2014年6月12日(木)
薬師寺 国安

今回はWebViewコントロールの使い方を解説します。MSDNによると、WebViewクラスは、「アプリのHTMLコンテンツをホストするコントロールを提供する」と記述されています。早い話が、HTMLコンテンツをWebViewで表示できるということです。

VS2012時点のWebViewには、HTMLコンテンツを表示できる機能はありましたが、「戻る」、「進む」、「再読み込み」等の機能は付いていなくて、結構使いづらかったです。筆者もあまり使ったことがありませんでした。その代わりに、WinRT XAML Toolkit(「タイマーを使って時刻を表示してみよう」で解説済み)に付属しているWebBrowserコントロールを良く使っていました。

しかし、VS2013になってWebViewコントロールの機能が大幅に改善し、「戻る」、「進む」、「再読み込み」の機能も追加されました。そこで今回は、この機能アップされたWebViewコントロールの使い方を学んでいこうと思います。

今回もプロジェクトを作成するところから始めましょう。プロジェクト名は「WebViewSample」としました。

今回使用する主なコントロールは表1の通りです。

表1.1: 使用する主なコントロール

コントロール名 名前 役割
TextBox addressTextBox URLを入力する入力ボックス
WebView WebView1 HTMLコンテンツを表示する
AppBarButton okButton URLを入力後タップするボタン
AppBarButton backButton [戻る]ボタン
AppBarButton forwardButton [進む]ボタン
AppBarButton refreshButton [再読み込み]ボタン

ソリューションエクスプローラー内のMainPage.xamlをクリックして、デザイン画面を起動します。表1のコントロールを「ツールボックス」からレイアウトしましょう。

コントロールの配置

表1のコントロールを配置すると図1のようになります。

図1 各コントロールを配置した
図1 各コントロールを配置した

今回のレイアウトはこれだけです。AppBarButtonのプロパティの設定方法は、もう何度も出てきているので手順は省略します。もしわからない場合は、この連載をもう一度読み直してください。

書き出されるXAMLはリスト1のようになります。

リスト1 書き出されたXAML(MainPage.xaml)

  • (1)例のごとくViewBoxでGrid要素を囲んでいる。ViewBox要素は、伸縮およびスケーリングを実行して単一の子を、使用可能な領域全体に引き伸ばすことができるコンテンツ デコレータを定義する。
  • (2)今回の目玉となるWebViewコントロールを配置している。
  • (3)[戻る]ボタンを配置している。
  • (4)[OK]ボタンと、[進む]、[再読み込み]ボタンを配置している。

 

<Page
    x:Class="WebViewSample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WebViewSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Viewbox>■(1)
        <Grid Background="Black" Height="767">
            <StackPanel  HorizontalAlignment="Left" Height="100"  VerticalAlignment="Top" Width="1356" Background="Navy" Orientation="Horizontal">
                <TextBlock HorizontalAlignment="Left" Height="68" Margin="20,15,0,0" TextWrapping="Wrap" Text="WebView" VerticalAlignment="Top" Width="306" FontSize="48" FontWeight="Bold"/>
            </StackPanel>
            <WebView HorizontalAlignment="Left" Height="582" Margin="0,100,0,0" VerticalAlignment="Top" Width="1356"/>■(2)
            <StackPanel x:Name="StackPanel1" HorizontalAlignment="Left" Height="100"  VerticalAlignment="Bottom" Width="1356" Background="Black" Orientation="Horizontal">
                <AppBarButton x:Name="backButton" Icon="Back" Height="73" Margin="0,15,0,0"/>■(3)
                <TextBox x:Name="addressTextBox" Height="40" Margin="0,29,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="970" FontFamily="Meiryo UI" FontSize="22" />
                <AppBarButton x:Name="okButton" Height="101" Label="OK" VerticalAlignment="Top" Width="96" Icon="Accept" Margin="0,15,0,-16"/>■(4)
                <AppBarButton x:Name="forwardButton" Height="101"  VerticalAlignment="Top" Width="96" Icon="Forward" Margin="0,15,0,-16"/>■(4)
                <AppBarButton x:Name="refreshButton" Height="101"  VerticalAlignment="Top" Width="96" Icon="refresh" Margin="0,15,0,-16"/>■(4)
            </StackPanel>
        </Grid>
    </Viewbox>■(1)
</Page>

さて、次はもうプログラムコードを書くだけになってしまいました。ソリューションエクスプローラーからMainPage.xamlを展開して、MainPage.xaml.vbをダブルクリックして、コードエディターを起動しましょう。

Think IT会員限定特典
  • HTMLコンテンツを表示させるプログラム(3種)

    『Windows ストア アプリ 100行プログラミング』 第7回のサンプルプログラムです。
薬師寺国安事務所

薬師寺国安事務所代表。Visual Basic プログラミングと、マイクロソフト系の技術をテーマとした、書籍や記事の執筆を行う。
1950年生まれ。事務系のサラリーマンだった40歳から趣味でプログラミングを始め、1996年より独学でActiveXに取り組む。1997年に薬師寺聖とコラボレーション・ユニット PROJECT KySS を結成。2003年よりフリーになり、PROJECT KySS の活動に本格的に参加、.NETやRIAに関する書籍や記事を多数執筆する傍ら、受託案件のプログラミングも手掛ける。Windows Phoneアプリ開発を経て、現在はWindows ストア アプリを多数公開中

Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。Microsoft MVP for Development Platforms - Windows Phone Development(Oct 2012-Sep 2013)。Microsoft MVP for Development Platforms - Client Development(Oct 2013-Sep 2014)。Microsoft MVP for Development Platforms-Windows Platform Development (Oct 2014-Sep 2015)。

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています