ナビゲーションコントロール

[アーティクル]
06/15/2015

最終更新日: 2010年11月1日

適用対象: SharePoint Foundation 2010

この記事の内容
階層リンク
トップリンクバー
サイドリンクバー
ツリービュー

Microsoft SharePoint Foundation Web サイトのクロムには、サイトでの移動、重要なコンテンツをより簡単に検索できるようにする、サイト内での現在の場所の確認、以前の場所にすばやく戻るといった、ユーザーに役立つ一連のコントロールが含まれます。

Web サイトのホームページのマスターページに、これらのコントロールのマークアップが示されています。SharePoint Foundation 2010 では、コンテンツおよびアプリケーションページの両方での主要なマスターページは、v4.master です。

注意

既定のマスターページの詳細については、「SharePoint Foundation の既定のマスターページ」を参照してください。

ナビゲーションを補助する、以下の 4 つの主要な機能が v4.master で定義されています。

階層リンク
トップリンクバー
サイドリンクバー
ツリービュー

階層リンク

階層リンクは、SharePoint Foundation Web サイトのコンテンツページの上部に表示されるナビゲーション要素で、リボン上では [サイトの操作] の右隣にあります。上方向キーが重ねられたフォルダーのアイコンで示されます。アイコン上にマウスポインターを置くと、"上へ移動" というヒントが表示されます。アイコンをクリックすると、ポップアップメニューが表示されます。このメニューは、サイト階層でのユーザーの現在の位置を示します。現在の位置より前のリンクをクリックすると、その場所を開くことができ、出発点にすばやく戻ることができます。

v4.master で、階層リンクは以下のマークアップで定義されます。

注意

マークアップを読みやすくする目的で、リソース式 ("$Resources:wss,resource_id") は、ローカライズされた文字列値で置換されています。

<asp:contentplaceholder id="PlaceHolderGlobalNavigation" runat="server">
    <SharePoint:PopoutMenu
        runat="server"
        ID="GlobalBreadCrumbNavPopout"
        IconUrl="/_layouts/images/fgimg.png"
        IconAlt="Navigate Up"
        IconOffsetX=0
        IconOffsetY=112
        IconWidth=16
        IconHeight=16
        AnchorCss="s4-breadcrumb-anchor"
        AnchorOpenCss="s4-breadcrumb-anchor-open"
        MenuCss="s4-breadcrumb-menu">
        <div class="s4-breadcrumb-top">
            <asp:Label 
                runat="server" 
                CssClass="s4-breadcrumb-header" 
                Text="This page location is:" />
        </div>
        <asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server">
            <SharePoint:ListSiteMapPath
                runat="server"
                SiteMapProviders="SPSiteMapProvider,SPContentMapProvider"
                RenderCurrentNodeAsLink="false"
                PathSeparator=""
                CssClass="s4-breadcrumb"
                NodeStyle-CssClass="s4-breadcrumbNode"
                CurrentNodeStyle-CssClass="s4-breadcrumbCurrentNode"
                RootNodeStyle-CssClass="s4-breadcrumbRootNode"
                NodeImageOffsetX=0
                NodeImageOffsetY=353
                NodeImageWidth=16
                NodeImageHeight=16
                NodeImageUrl="/_layouts/images/fgimg.png"
                RTLNodeImageOffsetX=0
                RTLNodeImageOffsetY=376
                RTLNodeImageWidth=16
                RTLNodeImageHeight=16
                RTLNodeImageUrl="/_layouts/images/fgimg.png"
                HideInteriorRootNodes="true"
                SkipLinkText="" />
            </asp:ContentPlaceHolder>
    </SharePoint:PopoutMenu>
    <div class="s4-die">
        <asp:ContentPlaceHolder id="PlaceHolderGlobalNavigationSiteMap" runat="server" Visible="false">
        </asp:ContentPlaceHolder>
    </div>
</asp:contentplaceholder>

このマークアップについて最初に注目すべき点は、階層リンク全体が ContentPlaceHolder コントロール (ID="PlaceHolderGlobalNavigation") 内に含まれるということです。これは、コンテンツページを作成して、マスターページで定義される既定のコンテンツをオーバーライドする Content コントロールを追加できるということです。

マークアップの大部分が、ポップアップメニューの定義に関係しています。マークアップから分かるように、メニューは PopoutMenu コントロールでレンダリングされます。このコントロールには、メニューヘッダーで使用する Label コントロールと、ユーザーが Web サイトを移動できるようにするハイパーリンクで使用する ListSiteMapPath コントロールが含まれます。ListSiteMapPath コントロールは、コンテンツページでオーバーライドできるように、もう 1 つの ContentPlaceholder コントロール (ID="PlaceHolderTitleBreadcrumb") 内に入れ子になっています。

ListSiteMapPath コントロールは、ペアになったプロバイダー、SPSiteMapProvider と SPContentMapProvider から、ナビゲーションのデータを取得します。最初のプロバイダーは、サイト階層内の Web サイトについてのデータを提供します。第 2 のプロバイダーは、リスト、ライブラリ、フォルダー、およびサイトページのような、サイトコンテンツのデータを提供します。両方のナビゲーションプロバイダーが、標準的な ASP.NET サイト上のサイトマップデータのソースである SiteMapProvider クラスから派生します。

注意

ナビゲーションプロバイダーは、パスドライブ:\inetpub\wwwroot\wss\VirtualDirectories\Port_Number\web.config にある、Web アプリケーションのルートディレクトリにある web.config ファイルの、<system.web>セクションで宣言されます。

トップリンクバー

トップリンクバーは、Web サイトのタイトルと詳細のすぐ下に表示される、タブが付いた帯状の要素です。トップリンクバー上の最初のリンクは、"ホーム" 位置です。一般的に、このリンクは、バーが定義される Web サイトを示し、その他のリンクは、サイト階層のより下にある複数の Web サイトを示します。しかし、常にこの構造になっているわけではありません。有効な URL はすべてリンクとして使用でき、また、リンクは、どのような順に配列してもかまいません。

サブサイトは、親 Web サイトからトップリンクバーを継承できます。このようにすれば、トップリンクバーにより、複数の Web サイト間で一貫したナビゲーションエクスペリエンスを実現できます。詳細については、「[方法] サイト間でトップリンクバーを共有する」を参照してください。

v4.master で、トップリンクバーは以下のマークアップで定義されます。

<asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" runat="server">
    <SharePoint:AspMenu
      ID="TopNavigationMenuV4"
      Runat="server"
      EnableViewState="false"
      DataSourceID="topSiteMap"
      AccessKey="1"
      UseSimpleRendering="true"
      UseSeparateCss="false"
      Orientation="Horizontal"
      StaticDisplayLevels="2"
      MaximumDynamicDisplayLevels="1"
      SkipLinkText=""
      CssClass="s4-tn"/>
    <SharePoint:DelegateControl 
        runat="server" 
        ControlId="TopNavigationDataSource" 
        Id="topNavigationDelegate">
        <Template_Controls>
            <asp:SiteMapDataSource
              ShowStartingNode="False"
              SiteMapProvider="SPNavigationProvider"
              id="topSiteMap"
              runat="server"
              StartingNodeUrl="sid:1002"/>
        </Template_Controls>
    </SharePoint:DelegateControl>
</asp:ContentPlaceHolder>

階層リンクのマークアップと同様に、トップリンクバーを定義するマークアップは、コンテンツページデザイナーが自分のコンテンツで既定のコンテンツをオーバーライドできるように、ContentPlaceHolder コントロールに含まれています。

トップリンクバーは、AspMenu コントロールによりレンダリングされます。メニューは、コントロールのマークアップで Orientation プロパティが "Horizontal" に設定されることにより指定された、水平方向にレンダリングされます。StaticDisplayLevels プロパティの設定は "2" です。通常、この設定は、メニュー上のノードが子ノードを持っている場合、それが親ノードの 1 列下に表示されることを意味します。しかし、実際には、子ノードは、親ノードの右の、同じレベルに表示されます。これは、CssClass プロパティの設定で、カスケードスタイルシート (CSS) クラスがメニューに添付されていることによるものです。CSS でより簡単にメニュー項目を制御できるように、コントロールのマークアップは、UseSimpleRendering プロパティを "true" に設定します。

メニュー構造が 2 レベルより深い場合は、MaximumDynamicDisplayLevels プロパティの設定での制御の結果として、第 3 のレベルにある項目ではポップアップメニューが表示されます。この設定が "1" であることから、ポップアップメニューは、静的メニュー上に表示される 2 つのレベル以下の、1 つのレベルだけで表示されます。これ以外のすべてのレベルは破棄されます。

メニューの背後にあるデータソースは、SiteMapDataSource コントロールです。マークアップから分かるように、SiteMapProvider プロパティは、SiteMapProvider クラスから派生した SPNavigationProvider クラスのインスタンスに、データソースコントロールをバインドします。

また、ShowStartingNode プロパティの値が False であることに注意してください。これは、実際の開始ノードが、トップリンクバーを構成するノードツリーのルートであることによるものです。これは、内部的に機能し、ページにレンダリングされるようには意図されていません。StartingNodeUrl プロパティ "sid.1002" の値は、URL としては適切ではありませんが、トップリンクバーのルートノードの SharePoint 識別子を指し示す式です。

以下のコードを使用して、ルートノードを取得することができます。

SPNavigationNode toplinkbar = web.Navigation.GetNodeById(1002);

Dim toplinkbar as SPNavigationNode = web.Navigation.GetNodeById(1002)

このオブジェクトでは、Title プロパティは "SharePoint Top Navigation Bar" を返し、Url プロパティは "/" を返します。

ヒント
SharePoint Designer 2010 で v4.master を開いて、ShowStartingNode の値を True に変更すると、同様の結果が得られます。変更を保存して、ブラウザーで Web サイトのホームページを表示すると、トップリンクバー上の最初のノードに表示テキスト [SharePoint Top Navigation Bar] が含まれているのを確認できるはずです。

SharePoint Designer 2010 で v4.master を開いて、ShowStartingNode の値を True に変更すると、同様の結果が得られます。変更を保存して、ブラウザーで Web サイトのホームページを表示すると、トップリンクバー上の最初のノードに表示テキスト [SharePoint Top Navigation Bar] が含まれているのを確認できるはずです。

トップリンクバーのノードツリーのルートを表す SPNavigationNode オブジェクトは、SPNavigationNode オブジェクトのコレクションを返す Children プロパティを持っています。このコレクション内のオブジェクトは、トップリンクバー上に表示されるノードを表します。このコレクションは列挙可能で、以下の簡単なコンソールアプリケーションに示すように、容易に反復処理することができます。

using System;
using Microsoft.SharePoint;
using Microsoft.SharePoint.Navigation;

namespace ConsoleApp
{
    class Program
    {
        static void Main(string[] args)
        {
            using (SPSite site = new SPSite("https://localhost"))
            {
                using (SPWeb web = site.OpenWeb())
                {
                    SPNavigationNode toplinkbar = web.Navigation.GetNodeById(1002);
                    if (toplinkbar != null)
                    {
                        foreach (SPNavigationNode node in toplinkbar.Children)
                        {
                            Console.Write("| {0} ", node.Title);
                        }
                        Console.WriteLine("|");
                    }
                }
            }
            Console.Write("\nPress ENTER to continue....");
            Console.ReadLine();
        }
    }
}

Imports System
Imports Microsoft.SharePoint
Imports Microsoft.SharePoint.Navigation

Module ConsoleApp

    Sub Main()

        Using site As New SPSite("https://localhost")

            Using web As SPWeb = site.OpenWeb()

                Dim toplinkbar As SPNavigationNode = web.Navigation.GetNodeById(1002)

                If toplinkbar IsNot Nothing Then

                    For Each node As SPNavigationNode In toplinkbar.Children
                        Console.Write("| {0} ", node.Title)
                    Next
                    Console.WriteLine("|")

                End If

            End Using

        End Using

        Console.Write(vbCrLf & "Press ENTER to continue....")
        Console.Read()
    End Sub

End Module

サイドリンクバー

サイドリンクバー は、Web サイトのページの左側に表示できるリンクのメニューです。メニューは、サイト内でのナビゲーションに使われ、通常、リスト、ドキュメントライブラリ、およびその他のサイトコンテンツへのリンクを含みます。また、外部コンテンツへのリンクを含めることもできます。

サイト所有者は、[サイトの操作] メニューの管理者ユーザーインターフェイスにアクセスして、サイドリンクバー メニューを有効にするか、非表示にすることができます。開発者は、同様の処理をするコードを作成することができます。詳細については、「[方法] サイドリンクバーを表示または非表示にする」を参照してください。

v4.master で、サイドリンクバー メニューを定義するマークアップは、ツリービューコントロールのマークアップも含む ContentPlaceHolder コントロール (ID="PlaceHolderLeftNavBar") 内の入れ子になっています。結果として、ページデザイナーは、両方のナビゲーションコントロールを自分自身のコンテンツで置換することができます。組み込みの Web テンプレートに関連付けられているコンテンツページは、その他のコンテンツを置き換えます。会議ワークスペーステンプレートは、その例です。

サイドリンクバー メニューのマークアップは、それぞれ、UIVersionedContent コントロール内にある、2 つのバージョンを定義します。1 つの UIVersionedContent コントロールでは UIVersion 属性の値は "3"、もう 1 つのコントロールでは値は "4" です。どちらのバージョンがページでレンダリングされるかは、サイトコレクション管理者が、コレクション内の Web サイトに新しいユーザーインターフェイスを適用したかに依存します。詳細については、「ビジュアルアップグレード」を参照してください。

注意

SPWeb.UIVersion プロパティにアクセスすることで、プログラミングによりユーザーインターフェイスのバージョン番号を取得できます。

サイドリンクバーメニューのバージョン 4 は、以下のマークアップで定義されます。

<SharePoint:AspMenu 
    id="V4QuickLaunchMenu" 
    runat="server" 
    EnableViewState="false" 
    DataSourceId="QuickLaunchSiteMap" 
    UseSimpleRendering="true" 
    UseSeparateCss="false" 
    Orientation="Vertical" 
    StaticDisplayLevels="2" 
    MaximumDynamicDisplayLevels="0" 
    SkipLinkText="" 
    CssClass="s4-ql" />

サイドリンクバー メニューは、1 つあるいは複数のレベルのメニュー項目を持つことができる一連の見出しとして表示されます。実際にページにレンダリングされるメニューレベルの数は、メニューを表示する AspMenu コントロールの構成に依存します。

以前の例では、StaticDisplayLevels プロパティの値は "2" で、これは、見出しと、見出しの下の 1 レベルの、合わせて 2 つのメニューレベルが表示されることを意味します。これらの 2 つの見出し以下のその他のレベルは、動的なポップアップメニューで表示されます。ポップアップメニューで表示されるレベルの数は、MaximumDynamicDisplayLevels プロパティの設定に依存します。この場合、プロパティ値は "0" で、これはポップアップメニューが無効であることを意味します。この結果、サイドリンクバー に 2 つ以上のメニューレベルがあっても表示されません。

AspMenu コントロールのマークアップ内の DataSourceID プロパティは、以下のマークアップで構成される SiteMapDataSource コントロールを指し示します。

<asp:SiteMapDataSource 
    SiteMapProvider="SPNavigationProvider" 
    ShowStartingNode="False" 
    id="QuickLaunchSiteMap" 
    StartingNodeUrl="sid:1025" 
    runat="server" />

トップリンクバーのデータソースの場合と同様に、サイドリンクバー メニューのデータソースでは、ShowStartingNode プロパティが False に設定されています。ルートノードはサイドリンクバー メニュー自体の情報を持っており、表示されるようには意図されていません。メニューのその他すべてのノード (リンク) は、このノードの子です。StartingNodeUrl プロパティの値 "sid.10252" は、サイドリンクバーのルートノードの SharePoint 識別子を示します。

以下のコードを使用して、ルートノードを取得することができます。

SPNavigationNode quicklaunch = web.Navigation.GetNodeById(1025);

Dim quicklaunch as SPNavigationNode = web.Navigation.GetNodeById(1025)

このオブジェクトでは、Title プロパティは "Quick launch" を返し、Url プロパティは "/" を返します。

ノードツリーのルートにある SPNavigationNode オブジェクトは、(メニュー項目の最初のレベルである、見出しを表す) SPNavigationNode オブジェクトのコレクションを返す Children プロパティを持っています。また、各見出しは、メニュー項目の 2 番目のレベルを表す、子ノードを持つことができます。2 番目のレベルのノードも、ツリーの下方に同じく子ノードを持つことができ、それ以下も同様です。

以下のコンソールアプリケーションは、サイドリンクバー メニュー内をたどり、アイテムを列挙する方法を示します。このアプリケーションは、サイドリンクバーメニューの各見出しの表示テキストを出力し、各見出しの下のすべてのメニューレベルの表示テキストを出力する目的で、回帰的なメソッドを呼び出します。

using System;
using Microsoft.SharePoint;
using Microsoft.SharePoint.Navigation;

namespace ConsoleApp
{
    class Program
    {
        static void Main(string[] args)
        {
            using (SPSite site = new SPSite("https://localhost"))
            {
                using (SPWeb web = site.OpenWeb())
                {
                    SPNavigationNode quicklaunch = web.Navigation.GetNodeById(1025);
                    if (quicklaunch != null)
                    {
                        foreach (SPNavigationNode heading in quicklaunch.Children)
                        {
                            PrintNode(heading);
                            Console.WriteLine(new String('-', 10));
                        }
                    }
                }
            }
            Console.Write("\nPress ENTER to continue....");
            Console.ReadLine();
        }

        static void PrintNode(SPNavigationNode node)
        {
            Console.WriteLine(node.Title);
            foreach (SPNavigationNode item in node.Children)
                 PrintNode(item);
        }
    }
}

Imports System
Imports Microsoft.SharePoint
Imports Microsoft.SharePoint.Navigation

Module ConsoleApp

    Sub Main()

        Using site As New SPSite("https://localhost")

            Using web As SPWeb = site.OpenWeb()

                Dim quicklaunch As SPNavigationNode = web.Navigation.GetNodeById(1025)

                If quicklaunch IsNot Nothing Then

                    For Each heading As SPNavigationNode In quicklaunch.Children

                        PrintNode(heading)
                        Console.WriteLine(New String("-", 10))

                    Next

                End If

            End Using

        End Using

        Console.Write(vbCrLf & "Press ENTER to continue....")
        Console.Read()
    End Sub

    Sub PrintNode(ByRef node As SPNavigationNode)

        Console.WriteLine(node.Title)
        For Each item As SPNavigationNode In node.Children
            PrintNode(item)
        Next

    End Sub

End Module

ツリービュー

ツリービューは、すべてのサイトコンテンツの階層的なビューを表示するナビゲーション要素です。既定では、ツリービューは無効です。有効にされると、ページの左のナビゲーション領域に表示されます。サイドリンクバーが有効の場合、ツリービューはその下に表示されます。

Web サイトの管理者は、管理ユーザーインターフェイスの Tree View ページでツリービューを有効にすることができます。[ツリービュー] ページを表示するには、[サイトの操作]、[サイトの設定] の順にクリックします。[外観] で、[ツリービュー] をクリックします。

コードでツリービューを有効にするには、SPWeb.TreeViewEnabled プロパティを true に設定します。

サイドリンクバーと同様に、ツリービューは 2 つのバージョンを持っています。v4.master で、両方のバージョンが、SPRememberScroll コントロール内に入れ子になった SPTreeView コントロールでレンダリングされます。SPTreeView コントロールは、SPHierarchyDataSourceControl クラスのインスタンスからデータを取得します。

v4.master で、バージョン 4 は以下のマークアップで定義されます。

<SharePoint:DelegateControl runat="server" ControlId="TreeViewAndDataSource">
  <Template_Controls>
    <SharePoint:SPHierarchyDataSourceControl 
        runat="server" 
        id="TreeViewDataSourceV4" 
        RootContextObject="Web" 
        IncludeDiscussionFolders="true" />
    <SharePoint:SPRememberScroll 
        runat="server" 
        id="TreeViewRememberScrollV4" 
        onscroll="javascript:_spRecordScrollPositions(this);" 
        style="overflow: auto;height: 400px;width: 155px; ">
        <SharePoint:SPTreeView 
            id="WebTreeViewV4" 
            runat="server" 
            ShowLines="false" 
            DataSourceId="TreeViewDataSourceV4" 
            ExpandDepth="0" 
            SelectedNodeStyle-CssClass="ms-tvselected" 
            NodeStyle-CssClass="ms-navitem" 
            SkipLinkText="" 
            NodeIndent="12" 
            ExpandImageUrl="/_layouts/images/tvclosed.png" 
            ExpandImageUrlRtl="/_layouts/images/tvclosedrtl.png" 
            CollapseImageUrl="/_layouts/images/tvopen.png" 
            CollapseImageUrlRtl="/_layouts/images/tvopenrtl.png" 
            NoExpandImageUrl="/_layouts/images/tvblank.gif">
        </SharePoint:SPTreeView>
    </SharePoint:SPRememberScroll>
  </Template_Controls>
</SharePoint:DelegateControl>

ツリービューコントロールのデータソースが SPHierarchyDataSourceControl オブジェクトであり、オブジェクトの RootContextObject プロパティが "Web" に設定されている点に注意してください。これは、ツリーがルートとなるコンテキストを設定します。結果として、ツリービューは、ドキュメントライブラリとリストに続いて、現在のサイトのすべてのサブサイトへのリンクをレンダリングします。

次の方法で共有

ナビゲーションコントロール

階層リンク

トップリンクバー

サイドリンクバー

ツリービュー

関連項目

タスク

概念

その他のリソース

次の方法で共有

ナビゲーション コントロール

階層リンク

トップ リンク バー

サイド リンク バー

ツリー ビュー

関連項目

タスク

概念

その他のリソース

ナビゲーションコントロール

トップリンクバー

サイドリンクバー

ツリービュー