🌰

C#ベースのオープンソースCMS「Orchard Core」をヘッドレスCMSとして利用する

gushwell

2024/08/26に公開

Orchard Coreシリーズの最初の記事で説明しましたが、Orchard　CoreはヘッドレスCMSとして利用することも可能です。

この記事では、OrchardCoreをヘッドレスCMSとして利用する方法について説明します。

ヘッドレス(Headless) CMS とは

ヘッドレス(Headless) CMSは、バックエンド専用のコンテンツ管理システムです。
「ヘッドレス（Headless）」という用語は、フロントエンド (ヘッド) をバックエンド (ボディ) から取り除くという考え方から来ています。
ヘッドレスCMSはコンテンツリポジトリとして機能し、RESTful API やGraphQL APIを介してコンテンツを任意のデバイスに表示することができます。

そのため、ヘッドレスCMS にとってコンテンツがどこにどのように表示されるかは重要ではありません。その代わりに、構造化されたコンテンツの保存と配信のみに重点を置いています。

フロントエンドはヘッドレスCMSとは疎結合のため、使い慣れたWebテクノロジー(VueやReact, Svelteなど)を使ってウェブサイトを構築することができます。

GraphQLを利用可能にするための手順

ここでは、Orchard をヘッドレスCMSとして設定するためのステップバイステップのガイドを示します。

ステップ 1: プロジェクトをセットアップする

Visual Studioの場合

Visual Studio を使用して、新しい .NET Core Web アプリプロジェクトを作成します。テンプレートを選択する必要はありません。
デフォルトでは空のテンプレートを選択できます。プロジェクトが作成されたら、Orchard Core CMS パッケージをプロジェクトに追加します。

NuGetを使い、プロジェクトファイルに「OrchardCore.Application.Cms.Targets」パッケージをインストールします。

コマンドラインの場合

以下のコマンドを実行します。OrchardCoreHeadlessは任意の名前です。

dotnet new occms -n OrchardCoreHeadless
cd OrchardCoreHeadless
dotnet run

ステップ 2: Program.cs ファイルを更新して、Orchard CMS を使用するようにアプリケーションを構成する。

コマンドラインの場合は、すでにこのようになっています。

using OrchardCore.Logging;

var builder = WebApplication.CreateBuilder(args);

builder.Host.UseNLogHost();
builder.Services.AddOrchardCms();

var app = builder.Build();

if (!app.Environment.IsDevelopment()) {
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseOrchardCore();

app.Run();

ステップ 3: アプリケーションを起動し、新しいサイトをセットアップする

アプリケーションを実行し、サイト名、管理者の資格情報、タイムゾーンなどを入力して新しいサイトを設定します。
Orchard Core は、コンテンツ、テーマ、ビューを設定しない Blank Site レシピを提供します。このレシピは、Orchard CoreをヘッドレスCMSとして設定するためのコンテンツ管理機能を提供します。
通常、ヘッドレスCMS サイトを作成するには、[レシピ] ドロップダウンで、[Blank site] を選択しますが、この記事では説明の都合で、いつものように[Blog]レシピを使うこととします。

なお、Blank siteでサイトを作成すると、以下のページが表示されますが、問題ありません。

ステップ 4: コンテンツタイプとコンテンツアイテムを作成する

Adminページを開き、コンテンツタイプとそのコンテンツタイプ内にフィールドを作成する必要があります。

システム内には複数のコンテンツタイプが存在する可能性があります。たとえば、サイトにはホームページ、ブログアイテム、製品ページのコンテンツタイプなどが含まれる場合があります。

コンテンツタイプを作成したら、サイトデータを追加できます。

各コンテンツアイテムはコンテンツタイプに基づくドキュメントであり、フィールドとそれらのフィールドに追加されるデータを定義します。

コンテンツの基礎は、以下の記事で簡単に説明しています。

この基礎が理解できれば、独自のコンテンツを定義することができるはずです。

なお、この記事では、Blog記事を取得する例を示しています。

ステップ 5: フロントエンドアプリケーションの API を有効にする

GraphQL モジュールを有効にする

GraphQLとは、簡単に言えば、データを取得・更新するためのクエリ言語です。
クライアントは、このGraphQLを利用し、CMSシステムからデータを取得します。

GrapQLの概要は、以下のページも参考にしてください。

以下のページで、GraphQL モジュールを有効にします。

すると、GraphQL メニュー項目が表示されます。

GraphQLメニューで開くこのページは、GraphQLエンドポイントの汎用エクスプローラーです。このページで GraphQL クエリをテストすることができます。このクエリは、CMS システムからデータを取得するために使用されます。

GraphQL API を使用する

認証なしで利用できるようにする

アプリケーションで GraphQL API エンドポイントを GraphQL クエリとともに使用して、CMS からデータを取得します。

GraphQL クエリを使用すると、必要なものだけを取得できます。アプリケーションでレンダリングする必要があるコンテンツ項目とフィールドを定義すると、それらのフィールドのみが返されるため、アプリケーションは非常に軽くて高速になります。

これが完了すると、ヘッドレスCMS は、GraphQL API を通じて選択したフロントエンドアプリケーションと統合できるようになります。

まずは、認証なしで利用できるようにしてみます。

Orchard Coreの管理者ページで、[ロール]を選び、Anonimouseを見つけ、[編集]ボタンをクリックします。

[Execute GraphQL]の[許可]にチェックを入れ、[保存]をクリックします。

Graph QLを利用してみる

以下は、"Altair GraphQL Client"の実行画面です。あとで、Postmanでの利用例も示します。

ここでは、以下のようなクエリを実行しています。(BlogレシピのBlog記事のデータを取得しています)

{
  blogPost {
    tags {
      taxonomyContentItemId
    }
    subtitle
    displayText
    markdownBody {
      markdown
    }
  }
}

OpenIDで認証し、クエリを呼び出す

まずは、OPenIDの[OpenID Authorization Server],[OpenID Token Validation]の2つの機能を有効にします。

次に、OpenID Serverの設定を行います。
[Allow Client Credentials Flow]にチェックを入れます。

下へスクロールして更新ボタンをクリックします。

次に、このGraphQLを呼び出した際のロールを設定します。ここでは、Adminstratoeを指定していますが、本当ならもっと弱い権限のロールを使った方が良いでしょう。
[Execute GraphQL]の[許可]にチェックを入れ、[保存]をクリックします。

次に、クライアントアプリケーションの設定を行います。
メニュー[OpenID Connect]-[Applications]を選び、[Add an application]ボタンをクリックします。

Create a new application のページが開くので、ここでクライアントIDやシークレット値を入力します。

クライアントID

決まった桁数はありませんが、通常は8～128文字程度の範囲で設定します。
クライアントIDは一意であり、人間が識別しやすい文字列であれば十分です。

クライアントシークレット

最小桁数: 多くのプロバイダーは16文字以上を推奨していますが、セキュリティを考慮して32文字以上を推奨します。
最大桁数: 実際の制限はプロバイダーによりますが、通常は64文字～128文字程度までサポートされています。

ここでは以下のような値を入力しました

項目	値
Client Id	orchard-core-sample-client
Display Name	orchard-core-sample-client
Type	Confidential client
Client Secrets	90ri1anLF18bSeOMFLU5U4N8kV86TuSU
Flows	[Allow Client Credentials Flow]にチェック
Client Credentials Roles	Administratorにチェック

Postmanで呼び出してみる

まずは、tokenを取得します。以下に、Postmanの実行結果を示します。

Method:Post  
URL:https://localhost:5001/connect/token  
Content-Type:application/x-www-form-urlencoded  
Body:grant_type=client_credentials&client_id=orchar-core-sample-client&client_secret=90ri1anLF18bSeOMFLU5U4N8kV86TuSU

これで、JWT（access_token）が返るので、JWTを使い、以下のようにGraphQLを呼び出します。

リクエストの設定:

HTTPメソッドを POST に設定します。  
URLを設定します。例: http://localhost:5000/api/graphql  
ヘッダーの設定: Content-Type=application/json   
リクエストボディの設定:

 {
  blogPost {
    tags {
      taxonomyContentItemId
    }
    subtitle
    displayText
    markdownBody {
      markdown
    }
  }
 }

JWTの設定:

GraphQLのクエリをBodyに設定:

クエリの結果:

GraphQLを使うと、クライアントからOrchard Coreのコンテンツを取得できることがわかりました。

Orchard Core ヘッドレスCMSの利点

最後に、Orchard Core をヘッドレスCMSとして利用する際の利点を示します。

1.柔軟性

OrchardをヘッドレスCMSとして使用することで、組織内で利用可能な技術的専門知識に基づいてアプリケーションのフロントエンドを決定し、設計できます。
さらに、同じコンテンツリポジトリを使用して、デバイスごとに異なる技術スタックを使用してコンテンツを表示することもできます。

2.コントロール

コンテンツ・リポジトリを完全にコントロールし、APIを使用してデータをさまざまなシステムに送信することができます。

3.適応性

デジタル革命が本格化する中、新しいマーケティング・コミュニケーション・プラットフォームが出現している。1つのプラットフォームを使ってコンテンツを管理しながら、望むだけ多くのマーケティング・チャンネルを簡単に更新・追加することができます。

4.時間と資源の節約

Orchardには、コンテンツを管理するための幅広い機能、ユーザーの役割、その他多くの機能が搭載されており、コストやリソースを節約することができます。

Orchard Coreに関する記事一覧は以下のページで確認できます。

GitHubで編集を提案

株式会社ジードテックブログPublication

株式会社ジードのテックブログです。株式会社ジードはクラウド上で動作するWebアプリケーションの開発、Webサイトの制作およびクラウドの運用・監視を行う企業です。本社は栃木県宇都宮市。利用技術は、Azure, C#, ASP.NET Core, Vue, JavaScript, WordPressなど。