SharePoint 開発ツールとデザイン ツールおよび操作

この記事では、SharePoint で利用可能な開発とデザインのオプションに関する情報を取り上げます。 また、リモート プロビジョニング パターンを使用して SharePoint サイトにブランド化アセットを適用する方法も記します。

注:

この記事で提供されるコードは、明示または黙示のいかなる種類の保証なしに現状のまま提供されるものであり、特定目的への適合性、商品性、権利侵害の不存在についての暗黙的な保証は一切ありません。

用語と概念

表 1. SharePoint 開発とデザインに関する主要な用語と概念

用語または概念 定義 詳細情報
デザイン マネージャー 発行機能が有効にされている SharePoint 発行サイトまたはチーム サイトでアクティブにされている機能で、サイトのブランド化アセットのインポートや管理、およびデザイン パッケージへのアセットのエクスポートに使用できます。 デザイン マネージャーを使用して、Adobe PhotoShop や Adobe DreamWeaver などの他のツールで作成したブランド化アセットを SharePoint にインポートします。

SharePoint Designer は、OneDrive for Business または発行機能が有効化されていない SharePoint チーム サイトには使用できません。
デザイン パッケージ SharePoint 発行サイトで使用するように設計され、デザイン マネージャーに格納されているブランド化アセットが含まれています。 SharePoint コンポジット ハンドブック
リモート プロビジョニング プロバイダー ホスト型アドインで、SharePoint の外部で実行するテンプレートとコードを使用してサイトのプロビジョニングを実行する際に使用するモデルです。 - SharePoint 2013 でのサイト プロビジョニングの手法とリモート プロビジョニング
- SharePoint 2013 のアプリを使用したセルフサービス サイトのプロビジョニング
ルート Web サイト コレクション内の最初の Web。 場合によっては、ルート Web は Web アプリケーション ルートを指すこともあります。
セキュリティで保護されたソリューション アセンブリ、コンパイルされていない他のコンポーネント、XML マニフェスト ファイルが含まれる .wsp ファイル。 セキュリティで保護されたソリューションでは、部分的に信頼されているコードが使用されます。 セキュリティで保護されたソリューション
SharePoint Designer HTML デザイナー、および SharePoint でブレンド化要素を管理するためのデザイン アセット管理ツール。 SharePoint Designer は主にカスタム ワークフローをサポートします。 - SharePoint サイト開発の最新情報
.wsp ファイル SharePoint ソリューション ファイル。 .wsp はサイト アセットをカテゴリに分類し、manifest.xml ファイルに整理する .cab ファイルです。 ソリューションの概要

開発オプション

SharePoint を開発プラットフォームとして使用する場合、コンテンツを開発、テスト、ビルド、展開するための環境の作成が必要になります。 開発用のオプションについては、「SharePoint ワークフロー オブジェクト モデル」と」「アプリケーション ライフサイクル管理 (ALM) API」を参照してください。

表 2. SharePoint の開発、テスト、承諾のオプション

オプション 考慮事項
Team Foundation Server - 簡単にアクセスできるように Visual Studio Team Services に配置されています。
- ソース コードとライフ サイクルの一元化管理システムが含まれています。
クラウドのテストと承諾の環境 - 承諾テストのために別個のテナントを使用します。
- オンプレミスのテスト用の別個のテスト環境を備えます。
オンプレミスのテストと承諾の環境 - オンプレミスの SharePoint の展開に使用します。
- お客様のオンプレミスまたは Microsoft Azure によってホストされます。

ほとんどの場合は、少なくとも以下のテナントが必要になります。ただし、要件によって異なる可能性があります。

  • 開発テナント。 独自の開発者サイトをプロビジョニングして使用するのがベスト プラクティスです。 このようにすると、使用するデータが運用環境に混入するのを避けられます。 開発者向けサイトにサインアップしてプロビジョニングするには、「Office 365 で SharePoint アドインの開発環境をセットアップする」を参照してください。

  • 統合/テスト テナント。 このサイトは、新しいアプリや機能が複数のサイト コレクション全体と、実稼働環境内のサービスとデータに対して動作することを確認するために使用します。 プレビュー内の機能を含めるように環境を構成します (これを実行するには、テナント管理コンソールで、[サービス設定] を選択してから、[更新プログラム] 設定で、[最初のリリース] を選択します)。Visual Studio Team Services を使用して、自動テストと、その他の連続統合テストを実行することができます。

  • 運用テナント。 テスト、受け入れ、承認が済んだアプリをこのテナントにリリースします。 このテナントに開発者サイトを作成し、対象範囲の小規模な、または他に影響を与えないアプリを開発してテストできます。 通常、開発環境と運用環境が混在しないようにします。

デザイン ツール

HTML、画像、CSS ファイル、JavaScript ファイルなどの標準的な Web デザインおよび開発ツールを使用して、SharePoint サイト ブランド化アセットを作成します。 たとえば、Adobe DreamWeaver と Adobe PhotoShop を使用して、SharePoint サイトをブランド化するために使用する HTML、CSS、JavaScript、および画像ファイルをデザインすることができます。 または、SharePoint Designer を使用して、ブランド化アセットを作成、管理、およびカスタマイズしたり、Visual Studio でカスタム ソリューションを作成したりすることができます。

SharePoint デザイン パッケージと .wsp ファイル

デザイン パッケージは、デザイン アセットをパッケージ化するための予測可能な規則に従う、デザイン マネージャーによって作成される .wsp ファイルです。 本質的には、セキュリティで保護されたソリューションです。 別のツールを使用して .wsp ファイルにブランド化アセットをパッケージする場合には、ブランド化アセットがこのような一定の予測可能な状態にはなりません。

デザイン パッケージには、カスタマイズされたファイルすべてが含まれます。 たとえば、カスタム コンテンツ タイプを使用したページ レイアウトを作成した場合、デザイン パッケージにはそのページ レイアウト、ページ レイアウトが使用するカスタム コンテンツ タイプ、すべてのカスタム サイト列が含まれます。 また、次の場所にアップロードされたファイルを含む、ご使用の SharePoint サイトに適用された構成済み外観に関連するいくつかのファイルもデザイン パッケージに入ります。

  • サイト アセット ライブラリ
  • スタイル ライブラリ
  • マスター ページ ギャラリー

サイトに対してカスタムのブランド化を適用する前に構成済み外観を適用した場合には、デザイン パッケージに .themedcss と .themedpng ファイル拡張子のファイルが含まれます。 SharePoint サイトに対してデザイン パッケージ内のブランド化アセットを適用するには、デザイン パッケージをエクスポートして、リモート プロビジョニング パターンを使用してデザイン パッケージのコンテンツを適用します。

SharePoint には、デザイン パッケージの操作に使用できる API が含まれています。 SSOM、CSOM、JSOM のいずれかを使用している場合、 DesignPackage クラスまたは DesignPackageInfo クラスを使用できます。

デザイン パッケージ CSOM を使用してデザイン パッケージのコンテンツを SharePoint サイトに適用する

次の例は、リモート プロビジョニング パターンでデザイン パッケージ API を使用して、デザイン パッケージのコンテンツを SharePoint サイトに適用する方法を示しています。

このコードは、発行サイトで使用することを目的に設計されました。 デザイン パッケージ API を使用して発行機能が有効になっているチーム サイトにブランド化を適用することもできますが、長期にわたるサポートに関する問題が生じる可能性があります。

using Microsoft.SharePoint.Client;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Microsoft.SharePoint.Client.Publishing;
namespace ProviderSharePointAppWeb
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_PreInit(object sender, EventArgs e)
        {
            Uri redirectUrl;
            switch (SharePointContextProvider.CheckRedirectionStatus(Context, out redirectUrl))
            {
                case RedirectionStatus.Ok:
                    return;
                case RedirectionStatus.ShouldRedirect:
                    Response.Redirect(redirectUrl.AbsoluteUri, endResponse: true);
                    break;
                case RedirectionStatus.CanNotRedirect:
                    Response.Write("An error occurred while processing your request.");
                    Response.End();
                    break;
            }
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            // Use TokenHelper to get the client context and Title property.
            // To access other properties, the add-in might need to request permissions
            // on the host web.
            var spContext = SharePointContextProvider.Current.GetSharePointContext(Context);
            
            // Publishing feature GUID to use the infrastructure for publishing. 
            Guid PublishingFeature = Guid.Parse("f6924d36-2fa8-4f0b-b16d-06b7250180fa");

            // The site-relative URL of the design package to install.
            // This sandbox design package should be uploaded to a document library.
            // For practical purposes, this can be a configuration setting in web.config.
            string fileRelativePath = @"/sites/devsite/brand/Dev.wsp";

            //string fileUrl = @"https://SPXXXXX.com/sites/devsite/brand/Dev.wsp";
            
        
            using (var clientContext = spContext.CreateUserClientContextForSPHost())
            {
                // Load the site context explicitly or while installing the API, the path for
// the package will not be resolved.
                // If the package cannot be found, an exception is thrown. 
                var site = clientContext.Site;
                clientContext.Load(site);
                clientContext.ExecuteQuery();
              
                // Validate whether the Publishing feature is active. 
                if (IsSiteFeatureActivated(clientContext,PublishingFeature))
                {
                    DesignPackageInfo info = new DesignPackageInfo()
                    {
                        PackageGuid = Guid.Empty,
                        MajorVersion = 1,
                        MinorVersion = 1,
                        PackageName = "Dev"
                    };
                    Console.WriteLine("Installing design package ");
                    
                    DesignPackage.Install(clientContext, clientContext.Site, info, fileRelativePath);
                    clientContext.ExecuteQuery();

                    Console.WriteLine("Applying design package");
                    DesignPackage.Apply(clientContext, clientContext.Site, info);
                    clientContext.ExecuteQuery();
                }
            }
        }
        public  bool IsSiteFeatureActivated( ClientContext context, Guid guid)
        {
            var features = context.Site.Features;
            context.Load(features);
            context.ExecuteQuery();

            foreach (var f in features)
            {
                if (f.DefinitionId.Equals(guid))
                    return true;
            }
            return false;
        }
 
    }
}

FileCreationInformation を使用してブランド化アセットとマスター ページをチーム サイトにアップロードする

SharePoint CSOM 機能を使用すると、デザイン パッケージのインストールとアンインストール、および SharePoint Online サイトへのデザイン パッケージのエクスポートを実行できます。

たとえば、SP.Publishing.DesignPackage.install メソッド (sp.publishing) または DesignPackage.Install メソッドを使用して、次の例に示されているように、デザイン パッケージをサイトにインストールできます。

public static void Install(
    	ClientRuntimeContext context,
	    Site site,
	    DesignPackageInfo info,
    	string path
)

DesignPackageInfo クラスは、インストールするデザイン パッケージのコンテンツを記述するメタデータを指定します。 Uninstall メソッドは、次の例に示されているようにサイトからデザイン パッケージをアンインストールする場合に使用します。

public static void UnInstall(
	    ClientRuntimeContext context,
	    Site site,
    	DesignPackageInfo info
)

発行機能が有効にされているチーム サイトや SharePoint Online 上の発行サイトをブランドする必要がある場合は、ExportEnterprise メソッドや ExportSmallBusiness メソッドを使用することで、サイト テンプレートのデザイン パッケージをソリューション ギャラリーにエクスポートできます。 次の例に示されているように、小規模ビジネスのサイト テンプレートに ExportSmallBusiness メソッドを使用し、その他のすべてのサイト テンプレートには ExportEnterprise メソッドを使用します。

public static ClientResult<DesignPackageInfo> ExportEnterprise(
	    ClientRuntimeContext context,
	    Site site,
	    bool includeSearchConfiguration
)

ExportSmallBusiness メソッドを使用すると、次の例に示すように、デザイン パッケージに検索構成を含めることができます。 すべてのデザイン パッケージ メソッドがサイト コレクションのレベルで動作することに注意してください。 デザイン パッケージの名前は文字列 packageName で表現されます。

public static ClientResult<DesignPackageInfo> ExportSmallBusiness(
	    ClientRuntimeContext context,
	    Site site,
	    string packageName,
	    bool includeSearchConfiguration
)

SharePoint Online のデザイン ツール オプション

SharePoint Online サイトのブランド化に使用可能なツールは、SharePoint Online のエディションと、構築するサイトの種類によって異なります。 たとえば、Small Business のエディションには、1 つのチーム サイトと 1 つのパブリック サイトが含まれます。 発行サイトは含まれません。 SharePoint Online のサイト ビルダー アドインを使用すると、パブリック サイトのブランド化をカスタマイズできます。

Enterprise エディションには、発行は含まない、ドメインのルート Web アプリケーションのチーム サイト コレクションが含まれます。 パブリック サイトは含まれません。 デザイン マネージャーを使用して、SharePoint Online Enterprise エディションの発行サイトの SharePoint サイト ブランド化要素を管理します。

関連項目