Optimizely OMVP の 1 日: Optimizely S の紹介

Optimizely CMS (SaaS) で表示テンプレートを管理するには、従来、REST API を直接操作するか、JSON 構成ファイルを手動で管理する必要がありました。本日は、表示テンプレート管理に視覚的で使いやすいインターフェイスを提供する新しいオープンソース ツール、Optimizely SaaS Style Manager を共有できることを嬉しく思います。

表示テンプレートとは何ですか?

Optimizely CMS (SaaS) では、表示テンプレート (「スタイル」とも呼ばれます) は、コンテンツ編集者がコンテンツの視覚的なプレゼンテーションをカスタマイズする方法を定義します。これにより、Visual Builder 内でセクション、行、列の事前定義されたスタイル オプションを作成できるため、デザイン変更のたびに開発者の介入を必要とせずに、コンテンツ エディターに柔軟性が与えられます。

各表示テンプレートには次のものを含めることができます。

• 固有のキー 識別用
• 表示名 コンテンツ編集者に表示される
• ベースタイプ (セクション、行、または列)
• 関連するコンテンツ タイプ コンテキスト固有のスタイル設定用
• カスタム設定 さまざまなエディター タイプ (テキスト、ブール値、数値、ドロップダウン) を使用

挑戦

Optimizely CMS API は表示テンプレートに対して完全な CRUD 操作を提供しますが、生の API 呼び出しまたは JSON ファイルを介して管理することにはいくつかの課題があります。

• ビジュアルインターフェイスなし 既存のテンプレートを参照するため
• 手動での JSON 編集 構文エラーが発生しやすい
• 移行が難しい 環境間のテンプレート
• 検索やフィルタリングはありません テンプレートがたくさんある場合

スタイルマネージャーを入力してください

スタイル マネージャーは、REST API 経由で Optimizely CMS インスタンスに直接接続する Blazor ベースの Web アプリケーションで、表示テンプレートの完全な管理インターフェイスを提供します。

主な特長

1. 完全な CRUD 操作
直感的なフォームベースのインターフェイスを通じて、表示テンプレートを作成、表示、編集、削除します。 JSON を手作りしたり、生の API 呼び出しを行ったりする必要はもうありません。

2. スマートな検索とフィルタリング
キーおよび表示名にわたるテキスト検索を使用してテンプレートをすばやく検索したり、基本タイプ (セクション、行、列) でフィルターしたりできます。デバウンス入力を使用すると、大規模なテンプレート コレクションでもインターフェイスの応答性が維持されます。

3. 動的設定管理
複数のエディター タイプをサポートして、テンプレート設定を視覚的に構成します。

• 弦 – テキスト入力フィールド
• ブール値 – トグルスイッチ
• 番号 – 数値入力
• 選択 – カスタム選択肢を含むドロップダウン メニュー

JSON に触れることなく、設定と選択肢を追加、削除、並べ替えます。

4. コンテンツタイプの統合
新しい検索可能なコンテンツ タイプのドロップダウンは、CMS インスタンスから利用可能なコンテンツ タイプを直接取得します。フィルタリングするために入力を開始し、キーボード ナビゲーションを使用して、テンプレートに適切なコンテンツ タイプを選択するだけです。

5. インポートとエクスポート
環境間でテンプレートを簡単に転送:

• 輸出 すべてのテンプレート、または特定のテンプレートを選択して JSON としてダウンロード
• 輸入 JSONを貼り付けるかファイルをアップロードすることで
• 紛争の解決 – 既存のテンプレートをスキップするか上書きするかを選択します
• 詳細な結果 インポートされた各テンプレートの成功/失敗を表示する

6. 安全なOAuth認証
Style Manager は、自動トークン キャッシュと更新を備えた OAuth 2.0 クライアント認証情報フローを使用します。 API 資格情報が一度構成されると、アプリケーションは認証を透過的に処理します。

はじめる

前提条件

構成

アップデート アプリ設定.json API 認証情報を使用して:

{
“OptimizelyApi”: {
“BaseUrl”: “https://api.cms.optimizely.com/preview3”,
“TokenUrl”: “https://api.cms.optimizely.com/oauth/token”,
“ClientId”: “あなたのクライアント ID”,
“ClientSecret”: “あなたのクライアント シークレット”
}
}

アプリケーションの実行

dotnet run

に移動します https://ローカルホスト:5001 表示テンプレートの管理を開始します。

使用例

環境の移行

ステージング環境で新しいテンプレートを開発しますか?それらを JSON としてエクスポートし、数回クリックするだけで運用環境にインポートできます。競合解決機能により、分岐したテンプレートを誤って上書きすることがなくなります。

テンプレートの監査

特定のコンテンツ タイプのすべてのテンプレートを確認する必要がありますか?検索機能とフィルター機能を使用して、関連するテンプレートをすばやく見つけて監査します。

ラピッドプロトタイピング

ビジュアル インターフェイスを介してテンプレート構成を作成および反復し、バージョン管理またはドキュメント用に最終的な JSON をエクスポートします。

チームのコラボレーション

共有環境にインポートする前に、エクスポートされた JSON ファイルをチーム メンバーと共有してレビューしてください。プレビュー機能には、何が作成または更新されるのかが正確に表示されます。

技術アーキテクチャ

Style Manager は、最新の .NET テクノロジーを使用して構築されています。

• ASP.NETコアブレイザー Interactive Server レンダリングを使用して応答性の高い SPA エクスペリエンスを実現
• 追い風CSS クリーンで実用性を第一に考えたデザイン
• HTTPクライアント 透過的な認証のための DelegatingHandler パターンを使用
• System.Text.Json 効率的な JSON シリアル化のために

このアプリケーションは、以下を明確に分離したクリーンなアーキテクチャ原則に従っています。

• ページ – UI 用の Blazor コンポーネント
• サービス – ビジネスロジックとAPI通信
• モデル – Optimizely API スキーマに一致するデータ転送オブジェクト

次は何ですか？

これはほんの始まりにすぎません。将来的な機能拡張には次のようなものがあります。

• 一括操作 複数のテンプレートを同時に管理する場合
• テンプレートのバージョン管理 時間の経過に伴う変化を追跡する
• 検証ルール 設定値については
• テンプレートの複製 バリエーションを素早く作成するため
• ダークモード 深夜のテンプレート管理セッション用

結論

Optimizely SaaS Style Manager は、表示テンプレート管理を開発者中心の API タスクからアクセスしやすい視覚的なワークフローに変換します。テンプレート作成のスピードアップを目指す開発者であっても、既存のテンプレートを監査する必要がある技術コンテンツ管理者であっても、Style Manager は必要なツールを提供します。

このアプリケーションはオープンソースであり、使用、変更、および貢献することができます。ぜひ試してみて、Optimizely CMS ワークフローがどのように改善されるかをお知らせください。

スタイル マネージャーは、Optimizely CMS REST API を使用して表示テンプレートを管理します。 API 認証情報に、実行する必要がある操作に対する適切な権限があることを確認してください。

2026 年 1 月 13 日