JavaScript を使用して SharePoint サイト UI をカスタマイズする

[アーティクル]
09/28/2023

JavaScript を使用して SharePoint サイトの UI を更新できます。

適用対象:Office 365 | SharePoint 2013 | SharePoint Online

重要

この拡張オプションは、従来の SharePoint エクスペリエンスにのみ使用できます。コミュニケーションサイトのような、SharePoint Online の最新エクスペリエンスではこのオプションを使用できません。 html ページストラクチャーまたは追加設定なしの CSS スタイル名に依存関係を追加すべき ではない ことに注意してください。これらは通知なしで調整されることがあります。

Core.EmbedJavaScript サンプルアドインは、JavaScript を使用して、ステータスバーメッセージを SharePoint サイト上のすべてのページに追加し、[新しいサブサイト] リンクを [サイトコンテンツ] ページから削除します。

カスタムマスターページを作成する方法ではなく、JavaScript を使用して SharePoint サイトに UI の更新を適用する (埋め込み JavaScript 手法とも呼ばれます) 場合は、このソリューションを使用します。

はじめに

開始するには、GitHub の Office 365 Developer パターンとプラクティスプロジェクトから Core.EmbedJavaScript サンプルアドインをダウンロードします。

Core.EmbedJavaScript アプリの使用

このコードサンプルを実行すると、図 1 のように、プロバイダー向けのホスト型アドインが表示されます。

図 1. Core.EmbedJavaScript アドインの開始ページのスクリーンショット

埋め込み JavaScript サンプルのスタートページのスクリーンショット

[ 埋め込みカスタマイズ] を選択すると、次の方法で SharePoint サイトがカスタマイズされます。

図 2 のように、SharePoint サイト内のすべてのページにステータスバーメッセージを作成します。
図 3 のように、[新しいサブサイト] リンクを [サイトコンテンツ] から削除します。

図 2. すべてのページに追加されるステータスバーのスクリーンショット

すべての SharePoint サイトのページに追加されたステータスバー

図 3. [サイトコンテンツ] ページから削除される [新しいサブサイト] リンクのスクリーンショット

[サイトコンテンツ] の新しいサブサイトリンクが削除されます。

図 1 の [ 埋め込み] カスタマイズ 呼び出しを default.aspx で btnSubmit_Click 選択します。 btnSubmit_Click は、次の処理を実行する AddJsLink を呼び出します。

スクリプトブロック定義を表す文字列を作成します。このスクリプトブロック定義は、SharePoint サイト上のすべてのページに含まれる JavaScript ファイル (scenario1.js) を指します。
UserCustomActions を使用して、SharePoint サイトで定義されているすべてのユーザーカスタムアクションを取得します。 scenario1.js という名前の JavaScript ファイルへの既存の参照は削除されます。
新しいカスタムアクションを作成し、手順 1 で作成したスクリプトブロック定義をその新しいカスタムアクションに割り当てます。
Web サイトに新しいカスタムアクションを追加します。

SharePoint サイト上のすべてのページで scenario1.js が実行され、図 2 と図 3 に示されているカスタマイズ済みの UI が表示されるようになります。

注:

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

 public void AddJsLink(ClientContext ctx, Web web)
        {
            string scenarioUrl = String.Format("{0}://{1}:{2}/Scripts", this.Request.Url.Scheme, 
                                                this.Request.Url.DnsSafeHost, this.Request.Url.Port);
            string revision = Guid.NewGuid().ToString().Replace("-", "");
            string jsLink = string.Format("{0}/{1}?rev={2}", scenarioUrl, "scenario1.js", revision);

            StringBuilder scripts = new StringBuilder(@"
                var headID = document.getElementsByTagName('head')[0]; 
                var");

            scripts.AppendFormat(@"
                newScript = document.createElement('script');
                newScript.type = 'text/javascript';
                newScript.src = '{0}';
                headID.appendChild(newScript);", jsLink);
            string scriptBlock = scripts.ToString();

            var existingActions = web.UserCustomActions;
            ctx.Load(existingActions);
            ctx.ExecuteQuery();
            var actions = existingActions.ToArray();
            foreach (var action in actions)
            {
                if (action.Description == "scenario1" &amp;&amp;
                    action.Location == "ScriptLink")
                {
                    action.DeleteObject();
                    ctx.ExecuteQuery();
                }
            }

            var newAction = existingActions.Add();
            newAction.Description = "scenario1";
            newAction.Location = "ScriptLink";

            newAction.ScriptBlock = scriptBlock;
            newAction.Update();
            ctx.Load(web, s => s.UserCustomActions);
            ctx.ExecuteQuery();
        }

SharePoint はダウンロード最小化戦略 (MDS) を使って、ユーザーが SharePoint サイト上のページ間をナビゲートする際にブラウザーでダウンロードされるデータの量を減らします。詳細については、「ダウンロード最小化戦略の概要」を参照してください。 scenario1.js では、次のコードを使用すると、SharePoint サイトで最小ダウンロード戦略を使用するかどうかにかかわらず、 常に実行RemoteManager_Inject 。

// Is MDS enabled?
if ("undefined" != typeof g_MinimalDownload &amp;&amp; g_MinimalDownload &amp;&amp; (window.location.pathname.toLowerCase()).endsWith("/_layouts/15/start.aspx") &amp;&amp; "undefined" != typeof asyncDeltaManager) {
    // Register script for MDS if possible
    RegisterModuleInit("scenario1.js", RemoteManager_Inject); //MDS registration
    RemoteManager_Inject(); //non MDS run
} else {
    RemoteManager_Inject();
}

RemoteManager_Inject は、SharePoint サイト上で以下のタスクを実行します。

ホスト Web 上でステータスバーを作成します。 RemoteManager_Inject は SP を使用します。SOD.executeOrDelayUntilScriptLoaded を使用して、 SetStatusBar を呼び出してステータスバーをサイトに追加する前に、sp.js が最初に読み込まれるようにします。 JavaScript ファイルは、SP を使用して非同期的に読み込まれるためです 。SOD.executeOrDelayUntilScriptLoaded では、コードがその JavaScript ファイルで定義されている関数を呼び出す前に、JavaScript ファイル (sp.js) が確実に読み込まれます。
[サイトコンテンツ] ページで新しいサブサイト リンクを非表示にします。

function RemoteManager_Inject() {

    loadScript(jQuery, function () {
        $(document).ready(function () {
            var message = "<img src='/_Layouts/Images/STS_ListItem_43216.gif' align='absmiddle'> <font color='#AA0000'>JavaScript customization is <i>fun</i>!</font>"

            // Execute status setter only after SP.JS has been loaded
            SP.SOD.executeOrDelayUntilScriptLoaded(function () { SetStatusBar(message); }, 'sp.js');

            // Customize the viewlsts.aspx page
            if (IsOnPage("viewlsts.aspx")) {
                //hide the subsites link on the viewlsts.aspx page
                $("#createnewsite").parent().hide();
            }
        });
    });
}

function SetStatusBar(message) {
    var strStatusID = SP.UI.Status.addStatus("Information : ", message, true);
    SP.UI.Status.setStatusPriColor(strStatusID, "yellow");
}

function IsOnPage(pageName) {
    if (window.location.href.toLowerCase().indexOf(pageName.toLowerCase()) > -1) {
        return true;
    } else {
        return false;
    }
}

Share via

JavaScript を使用して SharePoint サイト UI をカスタマイズする

はじめに

Core.EmbedJavaScript アプリの使用

関連項目

その他のリソース