公開日：2010年6月9日(水) 11:00
By PROJECT KySS
タグ：設計／開発, リッチ・クライアント, Silverlight,
WebBrowserコントロールでHTMLコンテンツを表示する
Silverlight 4で追加されたWebBrowserコントロールでは、Silverlightプラグインの中にHTMLコンテンツをホストすることができます。今回は、Trustedモード（高い信頼性に基づいたモード）のブラウザ外実行で、WebBrowserコントロール内にHTMLコンテンツを表示してみましょう。
筆者の開発環境は、Microsoft Windows7 Professional（32bit）、Visual Studio 2010 Ultimate、Silverlight 4 Tools RC2 for Visual Studio 2010、Expression Blend 4 RC、Silverlight_4_Toolkit_April_2010です（いずれも英語版）。ダウンロード用サンプルは、Silverlight 4 Tools for Visual Studio 2010でも動作確認済みです。開発環境の構築については、第1回目を参照してください。これ以降、Visual Studio 2010 はVS 2010、Expression Blend 4 RCはBlendと略します。
サンプル・ファイルはこちらからダウンロードできます。
今回実装する機能の動作は次の通りです。
まず、ListBoxコントロールに表示されているメニューを選択すると、リンク先のページがWebBrowserコントロール内に表示されます（図1）。また、TextBoxコントロール内にHTMLもしくはXHTMLでマークアップした内容を記述して[OK]ボタンをクリックすると、WebBrowser内にHTMLコンテンツが表示されます。あるいは、HTMLファイルのソースコードをコピーしておき、キーボードの[Ctrl]+[V]キーを使ってTextBoxコントロール内にペーストしてもかまいません。図2は、リスト1のXHTMLコードを入力して表示した例です。
|
|
| 図1: ListBoxコントロールのメニューを選択し、該当するページが表示されている（クリックで拡大） |
|
|
| 図2: TextBox内に記述したXHTMLでマークアップされたコンテンツが、WebBrowser内に表示されている（クリックで拡大） |
リスト1: TextBoxに入力したXHTMLコード
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>サンプルXHTML</title>
</head>
<body>
<h1 style="color:crimson">Information(2010/04/27)</h1>
<div style="font-size:12pt;color:navy">
先般よりアナウンスしております新サーバへの移設作業中です。<br/>
いましばらくお待ちください。
</div>
<iframe src="http://www.projectkyss.net" width="700px" height="500px" /> </body>
</html>
XML文書ファイルを追加して、参照を追加する
では、さっそくサンプルを作っていきましょう。
ツールの操作手順については第1回目で述べましたので、ここでは簡単に説明します。
VS 2010のメニューから[File/New/Project]を選択します。本稿では開発言語としてVisual Basicを使いますので、開発言語がVisual Basicになっていることを確認のうえ「Silverlight Application」を選択して、「Name」に任意のプロジェクト名（サンプルでは「SL4_WebBrowser」）を入力します。
.NET Frameworkのバージョンはデフォルトの「4」、「New Silverlight Application」の［Options］の「Silverlight Version」もデフォルトの「Silvelright 4 」のままで［OK］ボタンをクリックします。
Solution Explorerペインのプロジェクト名を選択して、マウスの右クリックで表示されるショートカット・メニューから、「Project Dependencies（プロジェクト依存関係）」を選択します。「Project Dependencies」ダイアログボックスの「Depends on（依存先）」内のチェックボックスにチェックを付けておきます。
次に、Solution Explorer（ソリューションエクスプローラ）内の「SL4_WebBrowser」を右クリックして、「Add/Existing Item…」から、ListBoxコントロールに表示するデータを記録したXML文書を参照して追加します（リスト2）。このXML文書ファイルは、ダウンロード用サンプルには追加済みです。なお、データは1冊の本の情報以外はサンプル用のダミーです。
リスト2 使用するXML文書の例（bookInfo.xml）
<?xml version="1.0" ?>
<書籍情報>
<書籍>
<書籍名 url="http://www.projectkyss.net/dummy/xmlDesign.htm">XML設計の心得</書籍名>
～<書籍名></書籍名>繰り返し～
</書籍>
</書籍情報>
このXMLデータの処理にはLINQ to XMLを用いますので、VS 2010のメニューから「Project／Add Reference」（参照の追加）を選択して、System.Xml.Linqを追加しておきます（図3）。
|
|
| 図3: System.Xml.Linqを追加する（クリックで拡大） |
著者について
PROJECT KySS
四国のSOHO。薬師寺国安（VBプログラマ）と、薬師寺聖（デザイナ、エンジニア）によるコラボレーション・ユニット。1997年6月、Dynamic HTMLとDirectAnimationの普及を目的として結成。共同開発やユニット名義での執筆活動を行う。XMLおよび.NETに関する著書や連載多数。最新刊は「Silverlight実践プログラミング」両名とも、Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。http://www.PROJECTKySS.NET/
連載一覧
この記事を評価する
本誌は、読者登録いただくことにより、毎月無料でみなさまのお手元まで直接お届けいたします（書店などでは販売していません）。
企業の情報システムを担当する方々や事業部門のIT担当の方々、およびIT関連プロフェッショナルの方々を対象に、実践的に役立つ情報を掲載、幅広く業務にご活用いただけます。
