Optimizely OMVP の 1 日

こんにちは。Optimizely OMVP の 1 日の別の記事へようこそ。この投稿では、CMS 12 で blazor ベースのアドオンを作成する方法と、これを Optimizely 独自のフィードを含むさまざまな NuGet フィードで公開する方法について説明します。

概要

この包括的なガイドでは、最新の .NET 開発の力とエンタープライズ コンテンツ管理を組み合わせて、Optimizely CMS 用のカスタム Blazor アドオンを構築するプロセスについて説明します。

Blazor は、スタック全体で C# を使用してリッチでインタラクティブな管理インターフェイスを作成するユニークな機会を CMS 開発者に提供し、言語間のコンテキスト切り替えを排除し、Optimizely のバックエンド API とのシームレスな統合を可能にします。カスタム ダッシュボード ウィジェット、特殊なプロパティ エディター、または完全な管理ツールを構築している場合でも、Blazor のコンポーネント ベースのアーキテクチャとリアルタイム機能により、Optimizely の機能を拡張するための理想的な選択肢となります。

このチュートリアルでは、Optimizely ソリューション内で Blazor プロジェクトを設定し、それを CMS の認証およびルーティング システムと統合し、プラットフォームにネイティブな感覚を与える洗練された管理インターフェイスを作成する方法を学びます。

このガイドを終えるまでに、編集者のエクスペリエンスを強化し、特定のビジネス ニーズに合わせて Optimizely CMS を拡張する、運用環境に対応した Blazor アドオンを構築するための知識が得られます。最新の UI フレームワークを検討している経験豊富な Optimizely 開発者であっても、CMS の世界に参入した Blazor 愛好家であっても、このガイドは成功するために必要な実践的な洞察を提供します。

設定

次のセクションでは、プロジェクトのセットアップ方法、Blazor 機能の有効化方法、アドオンのメニューの作成方法、承認の有効化方法、さらにプロジェクトを垂直スライス機能にセットアップする方法について説明します。

拡張プロジェクトの作成

この拡張機能の例では、次のように 3 つの個別のプロジェクトを作成しました。

• OptiGraphExtensions – メインの Blazor アドオン プロジェクト
• OptiGraphExtensions.Test – 機能の単体テスト
• SampleCMS – OptiGraphExtensions プロジェクトへの参照を備えた Optimizely CMS 12 の完全な実行バージョンを使用すると、実際の CMS 12 アプリケーションでテストできます。

CMS にアドオン DLL を反映させ、アドオンを検索するには、CMS によって選択されるようにアセンブリを定義する module.config がアドオン プロジェクトのルートに必要です。この場合、アセンブリはプロジェクトと同じ名前の「OptiGraphExtensions」を参照します。

新しいメニューオプションの追加

アドオンを CMS に表示するには、新しい MenuProvider を作成する必要があります。以下に示すように、クラスを装飾します [MenuProvider] IMenuProvider インターフェイスから継承します。次に、GetMenuItems メソッド内で個々のメニュー項目を作成します。

[MenuProvider]
public sealed class OptiGraphExtensionsMenuProvider : IMenuProvider
{
    public IEnumerable GetMenuItems()
    {
        // Nested Menu Example
        yield return CreateMenuItem("Opti Graph Extensions", "/global/cms/optigraphextensions", "/optimizely-graphextensions/administration/about/", SortIndex.Last + 30);
        yield return CreateMenuItem("About", "/global/cms/optigraphextensions/about", "/optimizely-graphextensions/administration/about/", SortIndex.Last + 31);
        yield return CreateMenuItem("Synonyms", "/global/cms/optigraphextensions/synonyms", "/optimizely-graphextensions/administration/synonyms", SortIndex.Last + 32);
        yield return CreateMenuItem("Pinned Results", "/global/cms/optigraphextensions/pinned.results", "/optimizely-graphextensions/administration/pinned-results", SortIndex.Last + 33);
    }

    private static UrlMenuItem CreateMenuItem(string name, string path, string url, int index)
    {
        return new UrlMenuItem(name, path, url)
        {
            IsAvailable = context => true,
            SortIndex = index,
            AuthorizationPolicy = OptiGraphExtensionsConstants.AuthorizationPolicy
        };
    }
}

サンプル CMS で Blazor を有効にする

以下を「Program.cs」または「Startup.cs」に追加します。

services.AddServerSideBlazor();

また、ApplicationBuilder で以下を追加する必要があります。

app.UseEndpoints(endpoints =>
{
    …
    endpoints.MapBlazorHub();
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Home}/{action=Index}/{id}");
    …
});

上記を追加したら、Optimizely CMS インスタンスで Blazor を実行できるようにするために必要な作業はこれだけです。

メイン管理コントローラー

メニュー オプションのコントローラーを必ず作成する必要があります。これは次の方法で作成されます。見てわかるように、ルートは上記の MenuProvider で指定されたルートと一致します。

[Authorize(Policy = OptiGraphExtensionsConstants.AuthorizationPolicy)]
public sealed class AdministrationController : Controller
{
    [HttpGet]
    [Route("~/optimizely-graphextensions/administration/about")]
    public IActionResult About()
    {
        var model = new AdministrationViewModel
        {
            Title = "Opti Graph Extensions - About",
            Subtitle = "OptiGraphExtensions is a comprehensive add-on for Optimizely CMS 12 that provides seamless management of both synonyms and pinned results within Optimizely Graph. This add-on enables content editors and administrators to enhance search experiences through intelligent synonym mapping and strategic result pinning capabilities, all integrated directly into your Optimizely CMS administration interface."
        };

        return View("~/Views/OptiGraphExtensions/Administration/About/Index.cshtml", model);
    }

    [HttpGet]
    [Route("~/optimizely-graphextensions/administration/synonyms")]
    public IActionResult Synonyms()
    {
        var model = new AdministrationViewModel
        {
            Title = "Opti Graph Extensions - Synonyms",
        };

        return View("~/Views/OptiGraphExtensions/Administration/Synonyms/Index.cshtml", model);
    }

    [HttpGet]
    [Route("~/optimizely-graphextensions/administration/pinned-results")]
    public IActionResult PinnedResults()
    {
        var model = new AdministrationViewModel
        {
            Title = "Opti Graph Extensions - Pinned Results",
        };

        return View("~/Views/OptiGraphExtensions/Administration/Pinned-Results/Index.cshtml", model);
    }
}

上記のコントローラーでリンクされているビューには、独自の個別の機能内に存在する関連する Razor コンポーネントを呼び出すメインの RenderComponentAsync 機能が含まれています (垂直機能のスライスについては以下で説明します)。この例を以下に示します。

@{
    Layout = "/Views/Shared/Layouts/_LayoutBlazorAdminPage.cshtml";
}

@(await Html.RenderComponentAsync(Microsoft.AspNetCore.Mvc.Rendering.RenderMode.Server))

参照されるメイン レイアウトは次のようになり、メインの Blazor js ファイルが含まれます。

@using EPiServer.Framework.Web.Resources
@using EPiServer.Shell.Navigation



    

    
    @ClientResources.RenderResources("ShellCore")

    
    @ClientResources.RenderResources("ShellCoreLightTheme")
    
    

    


    @Html.AntiForgeryToken() 
    @Html.CreatePlatformNavigationMenu()
    


    @RenderBody()