次の方法で共有

チュートリアル: イメージを備えたカスタム マスター ページおよびサイト ページのインポート

このチュートリアルでは、SharePoint カスタム マスター ページとイメージが含まれているサイト ページを Visual Studio SharePoint プロジェクトにインポートする方法について説明します。

このチュートリアルでは、次のタスクの実行方法を示します。

  • SharePoint Designer でカスタム マスター ページを作成し、イメージを使用してサイト ページを作成する。

  • カスタム マスター ページ、イメージ、およびサイト ページを SharePoint ソリューション (.wsp) ファイルにエクスポートする。

  • .wsp ファイルを、[SharePoint ソリューション パッケージのインポート] パッケージを使用して Visual Studio SharePoint プロジェクトにインポートして配置する。

注意

お使いのマシンで、Visual Studio ユーザー インターフェイスの一部の要素の名前や場所が、次の手順とは異なる場合があります。 これらの要素は、使用している Visual Studio のエディションや独自の設定によって決まります。 詳細については、「Visual Studio の設定」を参照してください。

必須コンポーネント

このチュートリアルを完了するには、次のコンポーネントが必要です。

  • サポート対象エディションの Microsoft Windows および SharePoint。 詳細については「SharePoint ソリューションの開発要件」を参照してください。

  • Visual Studio 2010.

  • SharePoint Designer 2010。

SharePoint Designer で項目を作成する

この例では、エクスポートする 3 つの項目 (カスタム マスター ページ、カスタム マスター ページを参照するサイト ページ、およびサイト ページに表示されるイメージ ファイル) を SharePoint Designer で作成する方法を示します。 イメージは SharePoint の /images/ フォルダーに追加されます。

SharePoint Designer でカスタム マスター ページを作成するには

  1. SharePoint Designer のナビゲーション ペインで、[マスター ページ] をクリックします。

  2. リボンの [空白のマスター ページ] をクリックします。

  3. SharePoint Designer の下部にある [コード] タブをクリックします。

  4. 既存のモジュールのマークアップを次のマークアップに置き換えます。

    <%@ Master Language="C#" %>
<%@ Register tagprefix="SharePoint" namespace="Microsoft.SharePoint.WebControls" assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<html dir="ltr">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<SharePoint:RobotsMetaTag runat="server" __designer:Preview="" __designer:Values="&lt;P N='InDesign' T='False' /&gt;&lt;P N='ID' T='ctl00' /&gt;&lt;P N='Page' ID='1' /&gt;&lt;P N='TemplateControl' ID='2' /&gt;&lt;P N='AppRelativeTemplateSourceDirectory' R='-1' /&gt;"></SharePoint:RobotsMetaTag>
<title>Web Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ContentPlaceHolder id="ContentPlaceHolderMain" 
        runat="server">
      </asp:ContentPlaceHolder>
</form>
</body>
</html>

  5. ページを mybasic1.master として保存します。

SharePoint Designer でイメージをコンテンツ データベースに追加する

次に、サイト ページに表示するイメージを追加できます。 イメージは、SharePoint コンテンツ データベースに配置されます。

SharePoint Designer でイメージをコンテンツ データベースに追加するには

  1. リボンの [すべてのファイル] をクリックし、ツリー ビューの [イメージ] をクリックします。

  2. リボンの [ファイルのインポート] をクリックし、インポートするファイルを選択し、[OK] をクリックします。 この例では、myimg1.png という名前のファイルを選択します。

    オプションとして、イメージを整理するためのサブフォルダーを作成できます。

  3. [インポート] ダイアログ ボックスを閉じます。

サイト ページを作成する

この基本的なサイト ページでは、カスタム マスター ページを使用して前の手順で追加したイメージを表示します。

サイト ページを作成するには

  1. ナビゲーション ペインで、[サイト ページ] をクリックします。

  2. リボンの [ページ] ボタンをクリックし、[ASPX] をクリックします。 新しいファイルに mycontentpage1.aspx という名前を付けます。

    オプションとして、サイト ページを整理するためのサブフォルダーを作成できます。

  3. 一覧の [MyContentPage1.aspx] をクリックしてそのプロパティ ページを開き、ページ下部の [編集] リンクをクリックします。

  4. ページ下部の [コード] ボタンをクリックします。

  5. 既存のモジュールのマークアップを次のマークアップに置き換えます。

    <%@ Import Namespace="Microsoft.SharePoint.ApplicationPages" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Page Language="C#" Inherits="Microsoft.SharePoint.WebControls.LayoutsPageBase" MasterPageFile="../_catalogs/masterpage/mybasic1.master" meta:progid="SharePoint.WebPartPage.Document" %>

<asp:Content ID="Main" ContentPlaceHolderID="ContentPlaceHolderMain" runat="server">
<img alt="My Image" longdesc="My image from images folder" src="../images/myimg1.png" />
</asp:Content>

  6. 更新したサイト ページを保存します。

SharePoint から項目をエクスポートする

項目を SharePoint から SharePoint ソリューション (.wsp) ファイルにエクスポートします。

SharePoint から項目をエクスポートするには

  1. SharePoint Designer で、ナビゲーション バーの [チーム サイト] をクリックし、リボンの [テンプレートとして保存] をクリックします。

  2. [テンプレートとして保存] ダイアログ ボックスで、ファイル名とテンプレート名を入力し、[コンテンツを含む] チェック ボックスをオンにし、[完了] をクリックします。

    これで、サイトのコンテンツが .wsp ファイルに保存されます。

  3. ソリューションをエクスポートした後、[ソリューション ギャラリー] リンクをクリックして、使用可能なソリューション ファイルの一覧を表示します。

  4. 新しい .wsp ファイルをクリックし、それをシステムに保存します。

項目を Visual Studio にインポートする

.wsp ファイルを Visual Studio にインポートします。インポートしたコンテンツに対して、カスタマイズ、項目の追加、配置を実行できます。

.wsp ファイルから Visual Studio に項目をインポートするには

  1. Visual Studio で、[SharePoint ソリューション パッケージのインポート] プロジェクトを作成します。

  2. [インポートする項目の選択] ページで、[種類] 列の [モジュール] から、次の表の中のインポートするファイルだけを選択します。

    ファイル名

    説明

    _catalogsmasterpage_

    カスタム マスター ページです。

    images_

    SharePoint ファイル システム内のイメージ ファイルです。

    SitePages_

    サイト ページです。

  3. [完了] をクリックして、選択した項目をインポートします。

  4. ソリューション エクスプローラーで、カスタム マスター ページをクリックし、その [配置競合の解決] プロパティを [自動] に設定します。

    これにより、配置競合を自動的に解決できます。

  5. 新しいマスター ページの名前が既存のページと同じである場合は、SharePoint Designer で既存のページが "既定のマスター ページ" または "カスタム マスター ページ" としてマークされていないことを確認します。

    既存のマスター ページが、既定のマスター ページまたはカスタム マスター ページとしてマークされている場合、マスター ページを削除できないことを示す配置エラーが発生します。 この問題を回避するには、次を実行します。

    • 既存のマスター ページが既定のマスター ページとして設定されている場合は、別のマスター ページを一時的に既定のマスター ページとして設定します。 ファイルを SharePoint に配置した後、新しいマスター ページを既定のマスター ページとして設定します。

    • 既存のマスター ページがカスタム マスター ページとして設定されている場合は、別のマスター ページを一時的にカスタム マスター ページとして設定します。 ファイルを SharePoint に配置した後、新しいマスター ページをカスタム マスター ページとして設定します。

  6. [ビルド] メニューの [ソリューションの配置] をクリックします。

  7. SharePoint サイトを開いて、配置された項目を表示します。

ファイルを Visual Studio にインポートして SharePoint に配置する別の方法として、ファイルを Visual Studio のモジュールに追加することもできます。 詳細については「方法: マスター ページまたはテーマをインポートする」および「モジュールを使用してソリューションにファイルを追加する」を参照してください。

参照

概念

Web パーツまたはアプリケーション ページの再利用できるコントロールの作成

その他の技術情報

既存の SharePoint サイトからのアイテムのインポート

SharePoint ソリューションの開発