名刺アプリ作成のすすめ(Windows 8.1 アプリ開発入門) 第10回 ～ アプリ内でのWebサイトの表示 ～

マイクロソフトの田中達彦です。
本連載では、Windows 8.1に対応した名刺アプリの作り方を通じて、アプリの開発方法を説明します。
今回は、アプリ内でWebサイトを表示させる方法を説明します。

[WebViewコントロール]
Windowsストア アプリからWebサイトを表示させるとき、2つの方法があります。
1つは別のウィンドウでWebサイトを表示させる方法です。別ウィンドウでWebサイトを表示させる方法は、第8回で説明しました。

もう1つは、アプリ内でWebサイトを表示させる方法です。
アプリ内でWebサイトを表示させるときには、WebViewというコントロールを使用します。
このWebViewは、コントロールの内部で任意のWebサイトを表示させることができます。
下図は、WebViewを使用してアプリ内でWebサイトを表示している例です。

[別のページの作成]
それでは、作成中のアプリにWebViewを使ったページを追加してみましょう。
Visual Studioのソリューション エクスプローラーのプロジェクト名が表示されているところを右クリックし、[追加]-[新しい項目]を選択します。

新しい項目の追加ダイアログが表示されたら、基本ページを選んで[追加]ボタンを押します。
このときのファイル名のデフォルトはBasicPage1.xamlです。

このファイル名を任意の名前に変更できますが、ここではデフォルトの名前のまま使用します。
もしファイル名を変えたときは、この後の記事のBasicPage1という部分を読み替えてください。
基本ページと似ているものに、空白のページというものがあります。
基本ページと空白のページの大きな違いは、戻るボタンがついているかどうかです。
今回追加するページは、トップページからナビゲーションされるように設定するので、再びトップページに戻れるように空白のページではなく基本ページを使用しています。

BasicPage1が追加されたら、Visual Studioの中央にデザイン画面が表示されます。
左側にあるツールボックスの中からWebViewと書かれたコントロールを探し出し、デザイン画面の下のほうにドラッグ アンド ドロップします。

もしツールボックスが表示されていないときは、メニューの[表示]-[ツールボックス]を選ぶと表示されます。
WebViewは「すべてのXAMLコントロール」を展開すると出てきます。

[WebViewの大きさを整える]
WebViewをドラッグ アンド ドロップしたままの状態では、WebViewが小さい正方形として表示されます。
このままではWebサイトを表示させるには小さすぎますので、WebViewの大きさを変更しましょう。

ここでWebViewの端をドラッグすると大きくなりますが、その方法の場合は不都合が出てしまいます。
端をドラッグして大きくする方法では、WebViewの幅や高さがドラッグした大きさで固定されます。
もし違う解像度のPCで見たときには、幅と高さが固定されているためWebViewの周囲の黒い余白の部分が大きすぎたり小さすぎたりする可能性があります。
そこで、WebViewの大きさを幅と高さで決めるのではなく、アプリが表示されている画面の大きさによって変わるように設定します。

まず、WebViewコントロールの幅と高さの情報をリセットします。
デザイン画面でWebViewを選択している状態にして、プロパティウィンドウを表示させます。
プロパティウィンドウの中からWidthとHeightと書かれたところを見つけ出し、右端にある黒い四角をクリックします。
以下のようなメニューが表示されたら、[リセット]を選択します。

これで、幅と高さの情報をリセットしました。

もしプロパティウィンドウにWidthやHeightの表示がなく、イベント名が並んでいる状態だったときは、プロパティウィンドウの右上にあるスパナの形をしたボタン () をクリックすることで、プロパティの表示に戻ります。

次に、WebViewコントロールの横方向と縦方向の配置状況を変更します。
プロパティウィンドウでHorizontalAlignmentとVerticalAlignmentと書かれたところを見つけ、以下の図のようにそれぞれ4つあるボタンのいちばん右にあるStretchボタンを選択します。

これで、アプリが表示されている場所の大きさに合わせてWebViewコントロールの大きさが変わるようになりました。

最後の仕上げとして、上下左右の余白を設定します。
プロパティウィンドウにMarginという余白を設定するためのプロパティが表示されています。
ここに、上の図のように左右の余白を120、上の余白を0、下の余白を60に設定します。

上の余白を0に設定しているものの、デザイン画面上は上に余白が140px分あるように表示されます。
WebViewコントロールを貼り付けている先はGridというコントロールで、そのGridはあらかじめ上下に分割されている状態で定義されています。
その分割している線が、上から140pxの場所にあります。
WebViewコントロールをツールボックスからドラッグ アンド ドロップしたときに、「画面の下のほうにドラッグ アンド ドロップ」と書いています。
これは、上下に分割されている場所のうち、下のほうにドロップしてもらうために入れた文言です。

Windowsストアアプリの場合、余白の取り方のガイドラインがあります。
コンテンツを表示させる領域の余白は、上余白が140px、左余白が120pxというガイドラインがあります。
今回は、そのガイドラインを踏襲した余白を設定しました。
ガイドラインについては、以下のWebサイトをご参照ください。
https://msdn.microsoft.com/ja-jp/library/windows/apps/hh872191.aspx#_______

[特定のWebサイトの表示]
現段階ではWebViewコントロールを貼り付けただけで、特定のWebサイトを表示させる設定をしていません。
それでは、BasicPage1が読み込まれたときに特定のWebページを表示させるように設定しましょう。

最初に、貼り付けているWebViewコントロールに名前をつけます。
デザイン画面でWebViewコントロールを選択するか、XAMLのコードのWebViewの行にキャレットを置いて、プロパティウィンドウを見ます。
プロパティウィンドウのいちばん上にある名前の部分に、「<名前なし>」と表示されているので、ここにwebView1と入力します。

これで貼り付けているWebViewコントロールに、webView1という名前が付きました。

次に、Visual Studioのドキュメント アウトラインを表示し、下図のようにpageRootと書かれた部分を選択します。

そしてプロパティウィンドウのイベントボタン(右上の稲妻ボタン)を押して、pageRootのイベント一覧を表示させます。
イベントの中からLoadedと書かれたイベントを探し、その右側のテキストボックスをダブルクリックします。
Loadedイベントは、このページが読み込まれたときに発生するイベントです。

ダブルクリックすることにより、Loadedに対応したイベントハンドラーが自動的に生成され、以下のようにBasicPage1.xaml.csに作られたイベントハンドラーが表示されます。

ここに、以下の黄色でマーカーしたコードを入力します。

private void pageRoot_Loaded(object sender, RoutedEventArgs e)
{
    webView1.Navigate(new Uri("https://www.microsoft.com/"));
}

URLは、任意のものに変更してしまって構いません。
これでBasicPage1側の実装は終わりです。

[トップページからのナビゲーション]
トップページの2つめのボタンをクリックしたら、BasicPage1が表示されるように実装しましょう。
トップページであるHubPage1.xamlを表示し、以下のように2つめのボタンのContentの部分を「Webサイト」に変更します。

このContentに設定した文字列が、アプリを実行したときにボタンに表示されます。

キャレットが2つめのボタンの行にあるままの状態で、プロパティウィンドウにイベント一覧を表示させます。
先ほどイベントボタンを押しているので、イベントの一覧が表示されているはずです。
もしイベントの一覧が表示されていなければ、プロパティウィンドウの右上のイベントボタンを押してください。

プロパティウィンドウにClickと書かれたところがあるので、その右側のテキストボックスをダブルクリックします。
button2_Clickというイベントハンドラーが自動生成されますので、ここに黄色でマーカーしたコードを入力します。

private void button2_Click(object sender, RoutedEventArgs e)
{
    ((Frame)(Window.Current.Content)).Navigate(typeof(BasicPage1));
}

これで、必要な実装は終わりました。
BasicPage1を表示しているときに、左上にMy Applicationという文字列が表示されます。
BasicPage1.xamlにこの文字列が定義されているので、必要に応じて文字列を変更します。

次回は単純なテキストを表示させるページの実装について説明します。

[前後の記事]
第9回 ハブ ページ (トップページ) の追加

マイクロソフト
田中達彦