チュートリアル: 追加コンテンツを備えたサイト定義の作成
このチュートリアルでは、サイト定義に追加できるさまざまな要素を組み込んだ、豊富な機能を備えたサイト定義の作成方法を示します。 作成するのは、従業員の氏名と勤務地に基づいて、Bing マップ上に従業員を配置できる従業員検索サイト定義です。
このチュートリアルでは、次のタスクについて説明します。
Visual Studio プロジェクト テンプレートを使用してサイト定義を作成する。
カスタム マスター ページをソリューション内に追加して組み込む。
可視 Web パーツをソリューションに追加する。
カスタム フィールドをソリューションに追加する。
カスタム フィールドを含むコンテンツ タイプを追加する。
コンテンツ タイプに基づいてリスト定義を追加する。
サイト定義と共に配置するリストのリスト インスタンスと既定のデータを追加する。
サイトの既定の default.aspx ページに可視 Web パーツを追加してカスタマイズする。
可視 Web パーツのユーザー コントロールをカスタマイズする。
可視 Web パーツ上に表示されるカスタム ロゴ イメージをソリューションに追加する。
注意
お使いのマシンで、Visual Studio ユーザー インターフェイスの一部の要素の名前や場所が、次の手順とは異なる場合があります。 これらの要素は、使用している Visual Studio のエディションや独自の設定によって決まります。 詳細については、「Visual Studio の設定」を参照してください。
必須コンポーネント
このチュートリアルを実行するには、次のコンポーネントが必要です。
サポート対象エディションの Microsoft Windows および SharePoint。 詳細については「SharePoint ソリューションの開発要件」を参照してください。
SharePoint Designer 2010。
Visual Studio 2010.
Bing Maps プラットフォーム開発者アカウントの資格情報。 Bing Maps Account Center (Bing Maps アカウント センター)で、無料の開発者アカウントを申し込むことができます。
サイト定義ソリューションの作成
まず、Visual Studio でサイト定義プロジェクトを作成します。
サイト定義プロジェクトを作成するには
[ファイル] メニューの [新規作成] をポイントし、[プロジェクト] をクリックして [新しいプロジェクト] ダイアログ ボックスを表示します。
[Visual C#] または [Visual Basic] の [SharePoint] ノードを展開して、[2010] をクリックします。
[テンプレート] ペインの [サイト定義] を選択します。
[名前] ボックスに「Testsitedef2」と入力し、[OK] をクリックします。
SharePoint カスタマイズ ウィザードが表示されます。
[デバッグのサイトとセキュリティ レベルの指定] ページで、サイト定義をデバッグする SharePoint サーバー サイトの URL を入力するか、既定の場所 (http://<システム名>/) を使用します。
[この SharePoint ソリューションの信頼レベル] セクションでは、既定値の [ファーム ソリューションとして配置する] を使用します。
サイト定義プロジェクトはすべてファーム ソリューションとして配置する必要があります。 サンドボックス ソリューションとファーム ソリューションの違いの詳細については、「サンドボックス ソリューションの考慮事項」を参照してください。
[完了] をクリックします。 ソリューション エクスプローラーにプロジェクトが表示されます。
ロゴ イメージの追加
次に、サイト定義で会社のロゴとして使用するイメージをソリューションに追加します。
イメージを追加するには
ソリューション エクスプローラーでプロジェクト ノードを右クリックし、[追加] をポイントして、[SharePoint "イメージ" のマップされたフォルダー] をクリックします。
Images フォルダーは SharePoint ファイル システムに直接マップされるので、そのフォルダーに追加されたファイルは SharePoint /images フォルダーに配置され、SharePoint で使用できるようになります。
Images の下の TestSiteDef2 フォルダーを右クリックし、[追加] をポイントして、[既存の項目] をクリックします。 ロゴとして使用するイメージ ファイルを選択し、[追加] をクリックします。
別の方法として、ショートカット メニューの [新しい項目] をクリックして新しいイメージを作成できますが、この場合は選択できるイメージの種類が限定されます。 通常は、他のツールを使用してイメージを作成することをお勧めします。
他のイメージをソリューションに追加する場合は、手順 2. を繰り返します。 たとえば、このトピックで後で追加するイメージ コントロール用のプレースホルダーとして機能するイメージを追加できます。
カスタム マスター ページの追加
サイト定義でカスタム マスター ページを使用する場合は、そのページをソリューションに追加できます。
カスタム マスター ページを追加するには
マスター ページを作成します。 詳細については、「ASP.NET マスター ページ」を参照してください。
カスタム マスター ページをエクスポートして Visual Studio にインポートします。「チュートリアル: イメージを備えたカスタム マスター ページおよびサイト ページのインポート」を参照してください。
マスター ページをモジュールに追加します。 これを行うには、ソリューション エクスプローラーでプロジェクト ノードを右クリックし、[追加] をポイントします。次に、[新しい項目] をクリックします。
[新しい項目の追加] ダイアログ ボックスで、SharePoint テンプレートの一覧の [モジュール] をクリックします。 モジュールに名前を付けます。
モジュール内の既定の Sample.txt ファイルを削除します。
モジュールに _catalogs という名前のフォルダーを追加し、そのフォルダーの下に masterpage という名前の別のフォルダーを追加します。
これは、SharePoint 内の他のマスター ページのファイルの場所と一致します。
masterpage フォルダーの下にマスター ページを追加します。 これを行うには、モジュール ノードを選択し、[プロジェクト] メニューの [既存項目の追加] をクリックします。 マスター ページを見つけて選択します。 マスター ページ ファイルには、.master ファイル名拡張子が付いています。
マスター ページの [配置競合の解決] の設定を [自動] に変更します。
モジュールの Elements.xml をダブルクリックして、XML デザイナーで開きます。
マスター ページが参照されるように Elements.xml ファイルを更新する必要があります。
既存のモジュールのマークアップを次のマークアップに置き換えます。
<?xml version="1.0" encoding="utf-8"?> <Elements xmlns="https://schemas.microsoft.com/sharepoint/"> <Module Name="[Module Name]" Url="_catalogs/masterpage"> <File Path="[Module Name]\_catalogs\masterpage\[Master Page Name].master" Url="[Master Page Name].master" Type="GhostableInLibrary" /> </Module> </Elements>
プレースホルダーの値は、モジュールとマスター ページの実際の名前に必ず置き換えてください。
default.aspx ファイル内のマスター ページの名前を変更します。 たとえば、マスター ページの名前が "newmaster.master" の場合は、次を使用します。
<%@ Page language="C#" MasterPageFile="~/_catalogs/masterpage/newmaster.master" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,Microsoft.SharePoint,Version=14.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" %>
プロジェクトを保存します。
カスタム プロジェクトの定義
カスタム リストを作成するために後で使用するカスタム フィールドを定義します。 これらのフィールドは、コードで必要な追加データをサイト定義に指定します。
カスタム プロジェクトを定義するには
ソリューション エクスプローラーでサイト定義ノードを右クリックし、[追加] をポイントして、[新しい項目] をクリックします。
テンプレートの一覧で、[空の要素] をクリックし、要素に「SiteColumns」という名前を付けます。
Elements.xml ファイルで、マークアップを次のマークアップに置き換えます。
<?xml version="1.0" encoding="utf-8"?> <Elements xmlns="https://schemas.microsoft.com/sharepoint/"> <Field ID="{587DE9D5-618C-42C4-A754-06EA36CF7496}" Type="Text" Name="Latitude" DisplayName="Latitude" Group="Coordinates"/> <Field ID="{5D1CFF2C-8032-4792-AB34-8E0A0520B478}" Type="Text" Name="Longitude" DisplayName="Longitude" Group="Coordinates"/> <Field ID="{8B7E3CC0-40B5-465E-81FE-D63B7471B7CE}" Type="Text" Name="Region" DisplayName="Region" Group="Coordinates"/> <Field ID="{8A152314-DB62-4EC7-96E7-E28F8A253B1D}" Type="Text" Name="StaffNumber" DisplayName="StaffNumber" Group="Coordinates"/> </Elements>
このマークアップは、4 つのカスタム フィールド (Latitude、Longitude、Region、および StaffNumber) を SharePoint に追加します。 これらのフィールドを使用して、従業員と勤務地を特定します。 必要に応じて、さらにフィールドを追加できます。 [ツール] メニューの [GUID の作成] ツールを使用して、それぞれの追加フィールドの一意の GUID を生成します。
注意
このソリューションを再実行する場合は、フィールド定義をコメント アウトして、エラーが発生しないようにします。
プロジェクトを保存します。
コンテンツ タイプの追加
新しいフィールドを参照するコンテンツ タイプを作成します。
コンテンツ タイプを追加するには
ソリューション エクスプローラーでサイト定義ノードを右クリックし、[追加] をポイントして、[新しい項目] をクリックします。
テンプレートの一覧の [コンテンツ タイプ] をクリックし、新しいコンテンツ タイプに「StaffListContentType」という名前を付けます。
[コンテンツ タイプの設定の選択] ページで、ベース コンテンツ タイプの一覧の [連絡先] をクリックします。
コンテンツ タイプ用の Elements.xml ファイルで、マークアップを次のマークアップに置き換えます。
<?xml version="1.0" encoding="utf-8"?> <Elements xmlns="https://schemas.microsoft.com/sharepoint/"> <!-- Parent ContentType: Contact (0x0106) --> <ContentType ID="0x010600a024d6b9cf214430a254b1272eaedc4f" Name="TestSiteDef2 - StaffListContentType" Group="Custom Content Types" Description="My Content Type" Inherits="TRUE" Version="0"> <FieldRefs> <FieldRef ID="{587DE9D5-618C-42C4-A754-06EA36CF7496}" Name="Latitude" DisplayName="Latitude"/> <FieldRef ID="{5D1CFF2C-8032-4792-AB34-8E0A0520B478}" Name="Longitude" DisplayName="Longitude"/> <FieldRef ID="{8B7E3CC0-40B5-465E-81FE-D63B7471B7CE}" Name="Region" DisplayName="Region"/> <FieldRef ID="{8A152314-DB62-4EC7-96E7-E28F8A253B1D}" Name="StaffNumber" DisplayName="StaffNumber"/> </FieldRefs> </ContentType> </Elements>
プロジェクトを保存します。
リスト定義の追加
新しいコンテンツ タイプを参照するリスト定義を作成します。
リスト定義を追加するには
ソリューション エクスプローラーでサイト定義ノードを右クリックし、[追加] をポイントして、[新しい項目] をクリックします。
テンプレートの一覧の [コンテンツ タイプに基づくリスト定義] をクリックし、リスト定義に「StaffListDefinition」という名前を付けます。
[リスト定義の設定の選択] ページでは、既定の表示名とベース コンテンツ タイプを使用します。 [このリスト定義のリスト インスタンスを追加する] チェック ボックスをオフにし、[完了] をクリックします。
これは、新しいコンテンツ タイプのリスト定義のベースになります。 後で、リスト インスタンスを onet.xml ファイル内に作成します。
Schema.xml をダブルクリックして開きます。 カスタム フィールドが既に、ファイルの先頭で参照されています。
onet.xml への既定のリスト データの追加
サイト定義の配置後に、新しいリスト定義と既定の従業員情報を従業員リストに渡すには、データをサイト定義の onet.xml ファイルに追加します。
onet.xml にリスト データを追加するには
onet.xml ファイルをダブルクリックして開きます。
<Lists/> タグを次のマークアップに置き換えます。
<Lists> <List Title="StaffList" FeatureId="fea29b33-8752-45d4-a5bd-6f7a54db7d49" Url="Lists/TestSiteDef2-StaffList" Description="" Type="10000"> <Data> <Rows> <Row> <Field Name="FirstName">David</Field> <Field Name="FullName">David Pelton</Field> <Field Name="Region">Northwest</Field> <Field Name="Longitude">-122.33</Field> <Field Name="Latitude">47.60</Field> <Field Name="StaffNumber">100200</Field> </Row> <Row> <Field Name="FirstName">Joe</Field> <Field Name="FullName">Joe Healy</Field> <Field Name="Region">Southwest</Field> <Field Name="Longitude">-115.13</Field> <Field Name="Latitude">36.15</Field> <Field Name="StaffNumber">100300</Field> </Row> <Row> <Field Name="FirstName">Lisa</Field> <Field Name="FullName">Lisa Andrews</Field> <Field Name="Region">Northeast</Field> <Field Name="Longitude">-73.98</Field> <Field Name="Latitude">40.75</Field> <Field Name="StaffNumber">100400</Field> </Row> <Row> <Field Name="FirstName">Chris</Field> <Field Name="FullName">Chris Ashton</Field> <Field Name="Region">Southeast</Field> <Field Name="Longitude">-84.38</Field> <Field Name="Latitude">33.76</Field> <Field Name="StaffNumber">100500</Field> </Row> </Rows> </Data> </List> </Lists>
フィーチャーのスコープをサイト レベルに設定します。 これを行うには、ソリューション エクスプローラーでフィーチャー ファイルをダブルクリックしてフィーチャー デザイナーを開きます。 フィーチャー デザイナーで、[スコープ] を [サイト] に設定します。
プロジェクトを保存します。
Bing Maps サービスへの参照の追加
Bing Maps Imagery サービスを呼び出して、選択した従業員の位置を表示するマップを用意します。
Bing Maps Imagery サービスをソリューションに追加するには
サービス参照をプロジェクトに追加します。 これを行うには、ソリューション エクスプローラーでプロジェクト ノードを右クリックし、[サービス参照の追加] をクリックします。
[サービス参照の追加] ダイアログ ボックスで、[アドレス] ボックスに次の URL を入力します。
http://dev.virtualearth.net/webservices/v1/imageryservice/imageryservice.svc?wsdl
[移動] をクリックし、[名前空間] ボックスに「ImageryService」と入力して、[OK] をクリックします。
サイト定義から app.config ファイルを削除します。
サービスによって追加されるこのファイルは、必要なエンドポイントとバインドを提供しますが、 SharePoint ソリューションでは正常に動作しません。その機能は、後でコードを使用して追加します。
Bing Maps Web サービスでは、要求を送信するには Bing Maps キーが必要です。 Bing Maps Account Center (Bing Maps アカウント センター)でアカウントを申し込んで、キーを取得してください。
コントロール付きの Visual Web パーツの作成
次に、サイト定義のメイン ページに表示する、コントロール付きの可視 Web パーツを作成します。
可視 Web パーツを作成するには
ソリューション エクスプローラーでサイト定義ノードを右クリックし、[追加] をポイントして、[新しい項目] をクリックします。
テンプレートの一覧の [可視 Web パーツ] を選択し、Web パーツの名前として既定の値 VisualWebPart1 を使用します。
VisualWebPart1UserControl.ascx の既存のマークアップの下に、次のコードを追加します。
<style type="text/css"> .style4 { height: 205px; width: 187px; } .style5 { height: 396px; width: 187px; } .style7 { height: 205px; width: 291px; } .style8 { height: 396px; width: 291px; } </style> <table style="width: 100%;"> <tr> <td align="center" class="style4" valign="middle"> <asp:Image ID="Image1" runat="server" Height="200px" ImageUrl="~/_layouts/images/TestSiteDef2/logo.jpg" Width="350px" /> </td> <td class="style7"> <asp:Label ID="Label1" runat="server" Font-Size="XX-Large" Font-Underline="True" Text="Tailspin Toys"></asp:Label> <br /> <br /> <asp:Label ID="Label7" runat="server" Font-Size="X-Large" Font-Underline="False" Text="Employee Locator"></asp:Label> </td> </tr> <tr> <td class="style5" valign="top"> <br /> <asp:Label ID="Label2" runat="server" Font-Size="Large" Text="Region:"></asp:Label> <br /> <asp:DropDownList ID="DropDownList1" runat="server" Height="24px" Width="352px" onselectedindexchanged="DropDownList1_SelectedIndexChanged" AutoPostBack="True"> <asp:ListItem>Northeast</asp:ListItem> <asp:ListItem>Northwest</asp:ListItem> <asp:ListItem>Southeast</asp:ListItem> <asp:ListItem>Southwest</asp:ListItem> </asp:DropDownList> <br /> <br /> <asp:Label ID="Label6" runat="server" Font-Size="Large" Text="Staff:"></asp:Label> <br /> <asp:ListBox ID="ListBox1" runat="server" Width="352px" onselectedindexchanged="ListBox1_SelectedIndexChanged" AutoPostBack="True"></asp:ListBox> <br /> <br /> </td> <td class="style8"> <br /> <asp:Label ID="Label5" runat="server" Font-Size="Large" Text="Map Location:"></asp:Label> <br /> <asp:Image ID="Image2" runat="server" Height="388px" ImageUrl="" Width="465px" /> </td> </tr> </table> <br />
このコードにより、タイトル、ロゴ イメージ、地域を含むドロップダウン リスト ボックス、従業員名を表示するリスト ボックス、およびマップを表示するイメージ コントロールがページに追加されます。
VisualWebPart1UserControl.ascx の下にある VisualWebPart1UserControl.ascx.cs ファイルを開き、そのコードを次のコードに置き換えます。
using System; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using Microsoft.SharePoint; using TestSiteDef2.ImageryService; using System.ServiceModel; using System.ServiceModel.Channels; using System.Text; namespace TestSiteDef2.SiteDefinition.VisualWebPart1 { public partial class VisualWebPart1UserControl : UserControl { protected void Page_Load(object sender, EventArgs e) { } protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e) { string selectedRegion = DropDownList1.SelectedItem.Text; SPSite site = new SPSite(Context.Request.Url.AbsoluteUri); // Add the SharePoint server name below. string webName = Context.Request.Url.AbsoluteUri.Replace("https://localhost/", ""); webName = webName.Replace("http://[SharePoint Server Name]/", ""); webName = webName.Replace("/default.aspx", ""); SPWeb web = site.AllWebs[webName]; SPList list = web.Lists["StaffList"]; ListBox1.Items.Clear(); foreach (SPListItem item in list.Items) { if (item["Region"].ToString() == selectedRegion) { // LinkTitle == LastName -> see schema.xml ListBox1.Items.Add(item["StaffNumber"] + ": " + item["FullName"].ToString()); } } } protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e) { // Reference the site based on its URL. SPSite site = new SPSite(Context.Request.Url.AbsoluteUri); // Add the SharePoint server name below. string webName = Context.Request.Url.AbsoluteUri.Replace("https://localhost/", ""); webName = webName.Replace("http://[SharePoint Server Name]/", ""); webName = webName.Replace("/default.aspx", ""); SPWeb web = site.AllWebs[webName]; // Reference the new list "StaffList" (as defined in onet.xml). SPList list = web.Lists["StaffList"]; // Get the string entered in the listbox, split it up. // String format: ("XXXXXX: First Last") string fullName = ListBox1.SelectedItem.Text; string[] splitStr = fullName.Split(':'); string longitude = ""; string latitude = ""; // Iterate through list, get the latitude/longitude // values for the selected employee's StaffNumber. foreach (SPListItem item in list.Items) { if (splitStr[0] == item["StaffNumber"].ToString()) { longitude = item["Longitude"].ToString(); latitude = item["Latitude"].ToString(); break; } } // Fetch the Bing map based on the selected employee's // latitude and longitude. ShowMap(longitude, latitude); } public void ShowMap(string Longitude, string Latitude) { Image2.ImageUrl = GetMap(Latitude, Longitude, Latitude + "," + Longitude); } private string GetMap(string Latitude, string Longitude, string locationString) { // Set the address to the Bing Maps imagery service. EndpointAddress address = new EndpointAddress("http://dev.virtualearth.net/webservices/v1/imageryservice/imageryservice.svc"); // Set up the binding, channel, and Bing Maps key. BasicHttpBinding binding = new BasicHttpBinding(); binding.UseDefaultWebProxy = true; ChannelFactory<IImageryService> factory = new ChannelFactory<IImageryService>(binding, address); IImageryService channel = factory.CreateChannel(address); // Add your key below. string key = "[Bing Maps key]"; MapUriRequest mapUriRequest = new MapUriRequest(); // Set credentials using a valid Bing Maps key mapUriRequest.Credentials = new ImageryService.Credentials(); mapUriRequest.Credentials.ApplicationId = key; // Set the location of the requested image. mapUriRequest.Center = new ImageryService.Location(); string[] digits = locationString.Split(','); mapUriRequest.Center.Latitude = double.Parse(digits[0].Trim()); mapUriRequest.Center.Longitude = double.Parse(digits[1].Trim()); // Set the map style and zoom level. MapUriOptions mapUriOptions = new MapUriOptions(); mapUriOptions.Style = MapStyle.AerialWithLabels; mapUriOptions.ZoomLevel = 17; // Set the size of the requested image in pixels. mapUriOptions.ImageSize = new ImageryService.SizeOfint(); mapUriOptions.ImageSize.Height = 388; mapUriOptions.ImageSize.Width = 465; mapUriOptions.Style = MapStyle.AerialWithLabels; mapUriRequest.Options = mapUriOptions; // Add a pushpin to the current location. ImageryService.Pushpin[] MapPins = new ImageryService.Pushpin[1]; MapPins[0] = new Pushpin(); MapPins[0].IconStyle = "34"; MapPins[0].Location = new Location(); MapPins[0].Location.Latitude = Convert.ToDouble(Latitude); MapPins[0].Location.Longitude = Convert.ToDouble(Longitude); mapUriRequest.Pushpins = MapPins; // Open the channel and retrieve the map. ((IChannel)channel).Open(); MapUriResponse mapUriResponse = channel.GetMapUri(mapUriRequest); ((IChannel)channel).Close(); return mapUriResponse.Uri; } } }
default.aspx ページへの可視 Web パーツの追加
次に、可視 Web パーツをサイト定義の default.aspx ページに追加します。
default.aspx ページに可視 Web パーツを追加するには
default.aspx ページを開き、WebPartPages タグの下に次のマークアップを追加します。
<%@ Register Tagprefix="MyWebPartControls" Namespace="TestSiteDef2.SiteDefinition.VisualWebPart1" Assembly="$SharePoint.Project.AssemblyFullName$" %>
この行は、MyWebPartControls という名前を Web パーツとそのコードに関連付けます。 Namespace パラメーターは、VisualWebPart1Usercontrol.ascx コード ファイルに使用される名前空間と同じです。
</asp:Content> 要素の後の、ContentPlaceHolderId="PlaceHolderMain" セクションとその内容を次のマークアップに置き換えます。
<asp:Content ID="Content1" ContentPlaceHolderId="PlaceHolderMain" runat="server"> <h1> Welcome to Tailspin Toys </h1> <MyWebPartControls:VisualWebPart1 runat="server" /> </asp:Content>
先ほど作成した可視 Web パーツへの参照がこのマークアップによって作成されます。
サイト定義ソリューションの実行と配置
次に、プロジェクトを実行し、SharePoint に配置します。
サイト定義を実行して配置するには
- F5 キーを押します。 Visual Studio によってコードがコンパイルされ、プロジェクトのフィーチャーが追加された後、すべてのファイルが .wsp ファイルにパッケージされ、.wsp ファイルが SharePoint Server に配置されます。 次に、SharePoint によってファイルがインストールされ、フィーチャーがアクティブ化されて、[新しい SharePoint サイト] ページが表示されます。
サイト定義に基づくサイトの作成
新しいサイト定義を使用してサイトを作成します。
サイト定義を使用してサイトを作成するには
SharePoint サイトでは、[新しい SharePoint サイト] ページが表示されます。
[タイトルと説明] セクションで、サイトのタイトルと説明に「My New Site」と入力します。
[Web サイトのアドレス] セクションの [URL 名] ボックスに「mynewsite」と入力します。
[テンプレート] セクションで、[SharePoint のカスタマイズ] タブをクリックし、[テンプレートの選択] ボックスの一覧の [TestSiteDef2] をクリックします。
他の設定は既定値のままにして、[作成] をクリックします。
新しいサイトが表示されます。
新しいサイトのテスト
次に、新しいサイトが正しく動作するかどうかを確認するためにサイトをテストします。
新しいサイトをテストするには
[地域] の下のボックスで、いずれかの場所を選択します。
その地域の従業員の名前が、[スタッフ] の一覧に表示されます。
[スタッフ] の一覧で従業員の名前をクリックします。
その従業員のマップ位置が、イメージ コントロール内に表示されます。
注意
Bing Maps サービスを使用できない場合は、"EndPointNotFoundException" エラーが表示されます。 これが発生した場合は、時間を置いて再試行します。