.NET TIPS

［ASP.NET］TreeViewコントロールでツリー・メニューを作成するには？

山田 祥寛
2005/04/01

　Webサイトが大規模になってくると、複雑に入り組んだページ階層の構造をうまくユーザーにナビゲーションすることは重要な課題となる。せっかく有用なコンテンツを提供しているのにユーザーがその場所まで行き着けない、あるいはサイト内を散策している途中でサイトを去ってしまうとしたら、重大な機会損失でもある。

　こうした問題に対して、サイト共通のツリー・メニューを設置する手法は、（典型的ではあるが）有効なアプローチの1つである。しかし、ツリー・メニューを自前で用意するには、ASP.NETの知識だけではなく高度なDynamic HTML（DHTML）の仕組みを理解しておく必要がある。これは多くの開発者にとって負担に感じられるはずだ。ツリー・メニューの有効性を理解しつつも、これまで実現にこぎ着けなかったという開発者の方もきっと多いのではないだろうか。

　そこで本稿では、ASP.NET上でツリービューを簡単に実現するためのカスタム・コントロールとして、TreeView WebBrowserコントロール（以降、TreeViewコントロール）を紹介する。TreeViewコントロールを利用することで、XMLファイルやファイル・システム、データベースなどから比較的簡単にツリービュー形式のメニューを生成できるようになる。本稿では、最も手軽な手法として、XMLファイルからツリービューを生成する方法を紹介する。

　それでは、具体的なコードを見ていくことにしよう。

1. TreeViewコントロールを利用可能にする

　上述したように、TreeViewコントロールはASP.NETに標準で備わったサーバ・コントロールではない。使用するに当たっては、「Internet Explorer WebBrowserコントロール」と呼ばれる拡張のサーバ・コントロール群をダウンロードし、セットアップする必要がある（ちなみに、本稿ではTreeViewコントロールしか紹介しないが、Internet Explorer WebBrowserコントロールには、そのほかにもMultiPageやTabStrip、ToolBarといった有用なコントロールが含まれている。これらについては後日紹介することにしたい）。

　まず、上記のWebページからダウンロードしたIEWebControls.exeをダブルクリックする。インストール・ウィザードが起動するので、後はウィザードの指示に従って進んでいくだけで、必要なファイルが（デフォルトでは）「C:\Program Files\IE Web Controls」フォルダに展開されるはずだ。

　次に、「C:\Program Files\IE Web Controls」フォルダの直下に格納されたbuild.batを実行する。これによって、ソース・コードのコンパイル処理が行われ、その結果は「C:\Program Files\IE Web Controls」フォルダ直下の「build」フォルダに保存されるはずだ。そして「build」フォルダの配下には、「Runtime」フォルダとInternet Explorer WebBrowserコントロールの本体であるMicrosoft.Web.UI.WebControls.dllが含まれているはずだ。

　ここで、「Runtime」フォルダの中身全部を「%SITE_TOP%/webctrl_client/1_0」フォルダの直下に、Microsoft.Web.UI.WebControls.dllをアプリケーション・ルート配下の「bin」フォルダ直下に、それぞれコピーしていただきたい（「%SITE_TOP%」はサイトのトップ・フォルダ、例えば「c:\Inetpub\wwwroot」を表すものとする）。

　以上で、一連のセットアップは終了だ。これで、Microsoft.Web.UI.WebControls.dllを配置したアプリケーション配下で、Internet Explorer WebBrowserコントロールを利用できるようになる。

2. メニュー情報をXML形式で定義する

　TreeViewコントロールでは、あらかじめ定義されたXMLファイルを解析し、ツリービューに整形する機能を標準で提供している。ここでは、まずそのXMLファイル（ツリー定義ファイル）を用意してみることにしよう。

　その記述例は以下のようになる。

<?xml version="1.0" encoding="Shift_JIS"?>
<TREENODES>
  <TreeNode Text="新刊書籍情報" Target="_blank"
      NavigateUrl="books.aspx" Type="Folder">
    <TreeNode Text="JSP＆サーブレットサンプル集"
      NavigateUrl="sample.aspx" Type="File" />
    <TreeNode Text="10日でおぼえるXML入門教室"
      NavigateUrl="xml.aspx" Type="File" />
    <TreeNode Text="基礎PHP"
      NavigateUrl="php.aspx" Type="File" />
  </TreeNode>
  <TreeNode Text="Q＆A掲示板"
    NavigateUrl="bbs.aspx" Type="File" />
  <TreeNode Text="サーバサイド環境構築設定"
    NavigateUrl="config.aspx" Type="Folder">
    <TreeNode Text="ASP.NET環境設定"
      NavigateUrl="e_aspnet.aspx" Type="File" />
    <TreeNode Text="PHP環境設定"
      NavigateUrl="e_php.aspx" Type="File" />
    <TreeNode Text="JSP＆サーブレット環境設定"
      NavigateUrl="e_jsp.aspx" Type="Folder">
      <TreeNode Text="J2SE"
        NavigateUrl="e_j2se.aspx" Type="File" />
      <TreeNode Text="Tomcat"
        NavigateUrl="e_tomcat.aspx" Type="File" />
    </TreeNode>
  </TreeNode>
</TREENODES>
ツリーを定義するためのXMLファイル（sitemap.xml）

　ツリー定義ファイルのルート要素は<TREENODES>要素だ（すべて大文字で記述すること）。<TREENODES>要素の配下に登場するのは、基本的に<TreeNode>要素だけだ。

　<TreeNode>要素1つで、ツリーにぶら下がるノード1つを表すことができ、もしも配下にサブメニューを追加したいとしたら、<TreeNode>要素を入れ子で記述すればよい。<TreeNode>要素で利用可能な主な属性は、以下の表に示すとおり。

属性 概要
NavigateUrl リンク先のURL
Target リンク先のターゲット
Text コンテンツのタイトル
Type ツリーの表示形式（本稿ではFile、Folderとなっているが、この値は開発者が自由に決定できる。詳細後述）
<TreeNode>要素で利用可能な主な属性

　なお、Type属性での指定値は、TreeNodeTypeコントロールで定義されるノード型の名前（本稿では、File、Folder）に対応している必要がある。TreeNodeTypeコントロールは実際のWebフォーム（.aspxファイル）上に記述するが、これについては後述する。

3. ツリービューをWebフォーム上に表示する

　定義ファイルが準備できたら、いよいよWebフォームの作成だ。以下のような.aspxファイルをアプリケーション上に作成していただきたい。

<%@ Page ContentType="text/html"%>
<%@ Register TagPrefix="ie" Namespace="Microsoft.Web.UI.WebControls"
             Assembly="Microsoft.Web.UI.WebControls" %>
<html>
<head>
<title>TreeViewコントロールでツリー表示</title>
</head>
<body>
<form runat="Server">
<ie:TreeView id="tree" runat="Server"
  SystemImagesPath="/webctrl_client/1_0/treeimages"
  TreeNodeSrc="sitemap.xml">
  <ie:TreeNodeType Type="Folder"
    ExpandedImageUrl="/webctrl_client/1_0/images/folderopen.gif"
    ImageUrl="/webctrl_client/1_0/images/folder.gif" />
  <ie:TreeNodeType Type="File"
    ImageUrl="/webctrl_client/1_0/images/html.gif" />
</ie:TreeView>
</form>
</body>
</html>
TreeViewコントロールを利用した.aspxファイルの例（treeview.aspx）

　TreeViewコントロールを利用するに当たって注目していただきたいポイントは、以下の3点だ。

（1）カスタム・コントロールを有効化する

　カスタム・コントロールであるTreeViewを利用するには、まず@Registerディレクティブでコントロールを有効化しておく必要がある。Assembly属性でカスタム・コントロールが定義されたアセンブリ名を、Namespace属性でカスタム・コントロールが属する名前空間を、そして、TagPrefix属性はカスタム・コントロールの接頭辞を、それぞれ宣言する。TagPrefix属性の値はページ内で一意でさえあれば任意に決定してよい。

　これによって、Microsoft.Web.UI.WebControls名前空間に属するカスタム・コントロールを、ページ内で「<ie:〜 />」というタグにより呼び出せるようになる。

（2）TreeViewコントロールにツリー定義ファイルを関連付ける

　上述の手順2で定義したツリー定義ファイルをTreeViewコントロールと関連付けるのは、TreeNodeSrc属性の役割だ。ここで先ほど定義したツリー定義ファイルのファイル名を指定すればよい。また、SystemImagesPath属性では、ツリー・イメージを生成するために最低限必要な画像ファイルへのパスを設定しておく必要がある。

　そのほかにもTreeViewコントロールで利用可能な属性は多く存在するが、詳細は「TREEVIEW Element」を参照していただきたい。

（3）TreeNodeTypeコントロールでノード型を定義する

　TreeNodeTypeコントロールの記述は必須ではない。デフォルトのツリービューを手っ取り早く出力したい場合には、TreeViewコントロールの記述だけで十分だ。

　TreeNodeTypeコントロールは、ツリー配下のノードごとに表示スタイルを切り替えたい場合などに使用する。本稿では、Folder、Fileという2つの型を宣言しているのが見て取れるはずだ。ExpandedImageUrl属性はノードを展開した場合に表示される画像を、ImageUrl属性はノードを閉じたときに表示される画像を、それぞれ指定する。Type属性には任意の型名を自分で決めて指定することができるが、先ほどのツリー定義ファイルにおけるType属性の値と対応している必要がある。

　以上が理解できたら、さっそくサンプル・コードを動かして、その動作を実際に試してみよう。以下の画面のような結果を得られれば成功だ。実際に画面に触れて、フォルダ・イメージのノードがドリルダウンできることも確認してみよう。

treeview.aspxの実行結果
閉じられたフォルダ・ノードをダブルクリックすると、そのフォルダが展開される。このようにしてすべてのフォルダ・ノードをドリルダウンしていくことができる。

　なお、本稿ではツリー定義を外部ファイル（sitemap.xml）に記述する方法を採用しているが、より手っ取り早く.aspxファイル内で記述することも可能だ。最後に.aspxファイル内で記述する方法を紹介して、本TIPSを締めくくることにしたい。

<%@ Page ContentType="text/html"%>
<%@ Register TagPrefix="ie" Namespace="Microsoft.Web.UI.WebControls"
             Assembly="Microsoft.Web.UI.WebControls" %>
<html>
<head>
<title>TreeViewコントロールでツリー表示</title>
</head>
<body>
<form runat="Server">
<ie:TreeView id="tree" runat="Server"
  SystemImagesPath="/webctrl_client/1_0/treeimages"
  TreeNodeSrc="sitemap.xml">
  <ie:TreeNodeType Type="Folder"
    ExpandedImageUrl="/webctrl_client/1_0/images/folderopen.gif"
    ImageUrl="/webctrl_client/1_0/images/folder.gif" />
  <ie:TreeNodeType Type="File"
    ImageUrl="/webctrl_client/1_0/images/html.gif" />
  <ie:TreeNode Text="新刊書籍情報" Target="_blank"
      NavigateUrl="books.aspx" Type="Folder">
    <ie:TreeNode Text="JSP＆サーブレットサンプル集"
      NavigateUrl="sample.aspx" Type="File" />
    <ie:TreeNode Text="10日でおぼえるXML入門教室"
      NavigateUrl="xml.aspx" Type="File" />
    <ie:TreeNode Text="基礎PHP"
      NavigateUrl="php.aspx" Type="File" />
  </ie:TreeNode>
  <ie:TreeNode Text="Q＆A掲示板"
    NavigateUrl="bbs.aspx" Type="File" />
  <ie:TreeNode Text="サーバサイド環境構築設定"
    NavigateUrl="config.aspx" Type="Folder">
    <ie:TreeNode Text="ASP.NET環境設定"
      NavigateUrl="e_aspnet.aspx" Type="File" />
    <ie:TreeNode Text="PHP環境設定"
      NavigateUrl="e_php.aspx" Type="File" />
    <ie:TreeNode Text="JSP＆サーブレット環境設定"
      NavigateUrl="e_jsp.aspx" Type="Folder">
      <ie:TreeNode Text="J2SE"
        NavigateUrl="e_j2se.aspx" Type="File" />
      <ie:TreeNode Text="Tomcat"
        NavigateUrl="e_tomcat.aspx" Type="File" />
    </ie:TreeNode>
  </ie:TreeNode>
</ie:TreeView>
</form>
</body>
</html>
ツリー定義情報を.aspxファイルに組み込んだ例（treeview_up.aspx）
太字部分がXMLファイルでの定義内容から組み込んだコード。ツリー定義ファイルでTreeNode要素だった個所は、このファイルではie:TreeNode要素となっている。プレフィックスとして指定されている「ie:」は前述したTagPrefix属性の指定によるもの。

　このコードでも、先ほどのtreeview.aspxと同様の結果が得られるはずだ。End of Article

カテゴリ：Webフォーム　処理対象：IE WebBrowserコントロール
使用ライブラリ：TreeViewコントロール（Microsoft.Web.UI.WebControls名前空間）
使用ライブラリ：TreeNodeTypeコントロール（Microsoft.Web.UI.WebControls名前空間）
　
この記事と関連性の高い別の.NET TIPS
［ASP.NET］データベースからツリー・メニューを生成するには？
［ASP.NET］フォルダ構造やドキュメントをツリー表示するには？
［ASP.NET］TreeViewコントロールで深階層のツリー情報を効率よく読み込むには？
［ASP.NET］データベースからツリー・メニューを作成するには？
TreeViewコントロールで現在選択されているノードを変更するには？
このリストは、（株）デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。
generated by

「.NET TIPS」


Insider.NET フォーラム 新着記事
  • 第2回　簡潔なコーディングのために （2017/7/26）
    　ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回　Visual Studio Codeデバッグの基礎知識 （2017/7/21）
    　Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回　明瞭なコーディングのために （2017/7/19）
    　C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator （2017/7/18）
    　Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

Insider.NET 記事ランキング

本日 月間
＠IT