SaaS CMS とビジュアルビルダー

Optimizely は SaaSy を導入しています…。

今年、Optimizely のカンファレンス Opticon 2024 がテキサス州サンアントニオで開催されました。たくさんの素晴らしい機能やアップデートが発表されました。彼らはまた、いくつかの技術的なワークショップも実施しました。私がとても楽しみにしていたワークショップセッションの一つは、「SaaS CMS とビジュアルビルダー」 デヴィッド・クナイプ、レムコ・ジャンゼン、エリック・マークソン指揮。

この記事では、Optimizely SaaS と Visual Builder の概要と、技術ワークショップの詳細な体験について説明します。

Optimizely SaaS とは何ですか?

Optimizely コンテンツ管理システム (SaaS) は、複数のプラットフォーム間でコンテンツを管理および配布できる多用途のヘッドレス コンテンツ管理システム (CMS) です。コンテンツ管理をプレゼンテーション層から分離することで、あらゆるデバイスやプラットフォームで豊かなデジタル エクスペリエンスを提供できます。

SaaS CMS プラットフォームは、企業がインフラストラクチャやメンテナンスの手間をかけずにデジタル コンテンツを管理できる、最新かつ柔軟でコスト効率の高い方法を提供します。クラウドを活用することで、企業は Web サイトとデジタル エクスペリエンスを最新かつ安全に保ち、パフォーマンスを最適化することができます。小規模な Web サイトを運営している場合でも、大規模な企業を運営している場合でも、SaaS CMS は、シームレスなコラボレーションと拡張性を実現しながら、コンテンツを効率的に作成、管理、最適化するために必要なツールを提供できます。

CMS (SaaS) には、Optimizely の Visual Builder を使用してコンテンツを作成し、ライブ プレビューを表示できるユーザーフレンドリーなインターフェイスがあります。また、インスタンスをセットアップするための REST API と、コンテンツを簡単に取得するための Optimizely Graph も提供します。これにより、コンテンツの管理が容易になり、優れたユーザー エクスペリエンスの提供に集中できるようになります。

主要なツール:

• ビジュアルビルダー: ライブ プレビューを備えた、コンテンツを作成および整理するためのシンプルなドラッグ アンド ドロップ ツール。
• REST API: 開発者が CMS インスタンス、コンテンツ タイプを設定し、他のリソースをプログラムで管理できるようにします。
• グラフを最適化する: 一貫したデジタル エクスペリエンスを実現するために、さまざまなプラットフォーム間でコンテンツを簡単に取得できます。

ビジュアルビルダーとは何ですか?

SaaS CMS のビジュアル ビルダーは、ユーザーがコーディングのスキルを必要とせずにコンテンツを作成および整理できるシンプルなドラッグ アンド ドロップ ツールです。使いやすいインターフェイスを提供し、テキスト、画像、ビデオなどのコンテンツ要素を追加、配置、カスタマイズしながら、変更のライブ プレビューを確認できます。これは、最終製品が公開前に期待どおりに見えることを確認するのに役立ちます。最小限の技術的労力で Web サイトやアプリケーションを迅速に構築および更新したいユーザーに最適です。

Optimizely のビジュアル ビルダー (SaaS) のコンテキストでは、エクスペリエンス、アウトライン、セクション、ブループリント、スタイルなどの基本的な概念が、コンテンツの構造化、管理、表示方法において重要な役割を果たします。

ここでは、これらの概念がどのように連携して機能するかを示します。

• 経験: コンテンツ、デザイン、機能を組み合わせたユーザー インターフェイス全体。
• 概要: ページのコンテンツ構造のマップまたは設計図。セクションと要素がどのように配置されているかを示します。
• セクション: ページ内の論理ブロック。関連するコンテンツをグループ化します (ヘッダー、フッター、ヒーロー セクションなど)。
• 要素: 各セクションを埋める個々のコンテンツ (テキスト、画像、ボタンなど)。
• 青写真: ページの構造とレイアウトを定義する再利用可能なテンプレートで、コンテンツ作成の開始点となります。
• スタイル: セクション、要素、およびエクスペリエンス全体の外観を定義するビジュアル デザイン ルール。

ワークショップ

技術ワークショップは、David 氏による SaaS CMS と Visual Builder の紹介から始まりました。彼は、Optimizely が SaaS ベースのヘッドレス CMS を使用してコンテンツ管理システムの可能性をどのように再考したかについて説明しました。また、最も注目すべき機能の 1 つである Visual Builder についても説明しました。これは、リアルタイム プレビューと組み合わせた直感的なドラッグ アンド ドロップ インターフェイスを提供します。

Remko は、Next.js スターター アプリを使用して Optimizely SaaS を開始し、それを Vercel にデプロイする方法について説明しました。彼は、Optimizely CMS SaaS Core インスタンスと Optimizely Starter Kit のサンプル コードを提供してくれました。次に、Vercel と GitHub にアカウントを作成しました。私たちは皆、ローカル環境をセットアップして、Node.js の最新の LTS バージョンと Yarn の安定したバージョンと一致することを確認していました。

まず、CMS SaaS インスタンスにログインし、[設定]に移動して、サンプル データをインポートしました。コンテンツがアップロードされたら、新しい API クライアントを作成し、[設定]->[API クライアント]ページからグラフ トークンを生成しました。 Visual Studio Code を使用して、Optimizely SaaS を使用して Next.js アプリをローカルに構成しました。次の環境変数を含む .env ファイルを SaaS インスタンスの構成値に更新しました。

• OPTIMIZELY_CMS_URL : ビルド プロセスが Optimizely CMS にアクセスできる URL。
• OPTIMIZELY_GRAPH_SECRET : コンテンツ グラフ シークレットは、CMS ダッシュボードの「コンテンツのレンダリング」セクション内に表示できます。
• OPTIMIZELY_GRAPH_APP_KEY : コンテンツ グラフ アプリ キー。CMS ダッシュボードの「コンテンツのレンダリング」セクション内に表示されます。
• OPTIMIZELY_GRAPH_SINGLE_KEY : コンテンツ グラフの単一キー。CMS ダッシュボードの「コンテンツのレンダリング」セクション内に表示されます。
• OPTIMIZELY_CMS_CLIENT_ID : CMS で構成された API クライアント ID。
• OPTIMIZELY_CMS_CLIENT_SECRET : CMS で構成された API クライアント シークレット。

Yarnコマンドを使用して開発サーバーを起動し、ブラウザで「https://localhost:3000」でアプリを起動しました。

GitHub アカウントにログインしました。 Git リポジトリを作成し、Vercel アプリ URL に加えて環境変数を構成しました。 GitHub アカウントの最後のステップは、サイトを Vercel アカウントにデプロイすることでした。私たちのサンプル Web サイトは稼働しており、Optimizaly SaaS からのデータをレンダリングしていました。

次のステップは、CMS でチャネルの初期構成を実行することでした。新しいチャネル定義を作成し、含まれているコンテンツ パックから開始ページを選択し、ホストの詳細 (ホスト名として Vercel URL) を追加し、言語を構成しました。私たちは、アップロードされたコンテンツと構成された変更が Optimizely Graph に反映されていることを確認したいと考えていました。そこで、「Optimizely Graph Content Synchronization Job」というスケジュールされたジョブを実行しました。次に、ビジュアルエディターが実行され、Optimizely Graph によってコンテンツが正しく反映されることを確認しました。これにより、SaaS インスタンスで行われたコンテンツの更新がローカル開発環境に即座に反映され、シームレスで効率的な開発プロセスが促進されます。

この強固な基盤が整備されたことで、Optimizely の強力な機能を活用してアプリケーションの機能とユーザー エクスペリエンスを向上させるための設備が完全に整いました。私たちは、Optimizely の SaaS CMS と Visual Builder がマーケティング戦略を大幅に強化し、ワークフローを合理化し、エンゲージメントを新たな高みに引き上げることができることに気づきました。

結論

Optimizely SaaS 環境をセットアップし、サンプル データをインポートし、Next.js スターター アプリを Vercel にデプロイすることに成功しました。

ビジュアル編集機能は、コンテンツ管理効率の大幅な進歩を表しており、コンテンツ更新の機敏性の向上を目指す SaaS ビジネスにとって不可欠なツールとなっています。この革新的なワークフローにより、コンテンツ作成者はコンテンツ ブロックを直接操作できるようになり、更新に必要な時間を大幅に短縮できます。さまざまなデジタル エクスペリエンスでコンテンツがどのように使用されているかを明確かつ直感的に把握できるようになり、一貫性と正確性の両方が向上します。最終的には、編集プロセスを変革し、コンテンツそのものと同じくらいシームレスで楽しいものにします。

2024 年 12 月 30 日