ドキュメントタイプの設計とプロパティ定義
Umbracoにおけるサイト開発の核心は、ドキュメントタイプ、テンプレート、コンテンツノードの3要素を組み合わせることにあります。まずはデータベース構造の骨格となるドキュメントタイプを作成します。公式サイトよりベースとなる静的リソースを入手し、開発環境を整えてください。
管理画面の「Settings」セクションから「Document Type」を選択し、新規作成を開始します。一般的なランディングページでは以下の構造が標準的です。
- 見出し情報（元々は Page Title）
- 本文コンテンツ（元々は Body Text）
- フッター表記（元々は Meta Title/Description をフッター用途に流用）
作成時に任意の名前（例：LandingPage）を入力すると、システムが自動的に一意なエイリアスを生成します。このエイリアスは後続のコードで参照する際に必須となるため、英数字のみの簡潔な命名規則を守ってください。説明文欄にはチーム内での識別情報を記載します。
次に「Permissions」タブを開き、「Allow at root」チェックボックスを有効にします。これにより、コンテンツルート直下に該当タイプのインスタンスを配置できる権限が与えられます。アイコンは視認性を高めるために検索機能から割り当ててください。
さらに「Design」タブにて新しいタブコンテナを追加し、「Add property」からデータフィールドを展開していきます。エディタ種類には「Textbox」を採用するのが一般的です。各フィールドを作成する際に入力された名称は自動で小文字のcamelCase形式に変換され、これがプロパティの実際のキーとして保存されます。説明欄にはフィールドの役割を簡潔に記録し、一覧性を持たせてください。
テンプレートの作成と外部アセットの結合
ドキュメントタイプの作成が完了すると、Umbraco側は対応する Razor テンプレートファイルを自動生成します。「Settings」＞「Templates」配下にそのファイルが確認できるはずです。初期状態ではC#のインヘリテーション宣言のみが含まれた空の状態です。
ここにHTML構造を組み込みます。外部スタイルシートやJavaScriptライブラリを適切にパス指定して読み込みます。実務ではフロントエンドエンジニアが制作したマークアップをそのまま移植し、CMS管理画面からは動的な値のみを差し替える設計が推奨されます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/assets/styles/main.css">
<script src="/assets/scripts/vendor.js"></script>
</head>
<body class="landing-template">
<header class="page-header">
<h1 id="site-title"></h1>
<nav role="navigation">
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main class="content-wrapper">
<article class="entry-body">
<p class="text-content"></p>
</article>
</main>
<footer class="site-footer">
<p class="copyright-info"></p>
</footer>
</body>
</html>上記マークアップをテンプレートエディタに貼り付け、CSS/JSのパス調整後、保存操作を行います。
コンテンツノードの生成とRazorフィールドレンダリング
構造定義とテンプレートが完成したら、実際に閲覧可能なページインスタンスを作成します。「Content」セクションへ移動し、ルートノード右側のメニューから「Create」＞「LandingPage」を選択してください。ここで注意すべき点は、事前にドキュメントタイプのパーミッション設定が正しく反映されていることです。
作成画面が表示されると、前述で定義したプロパティフォームが自動展開されます。必要なテキスト値を入力し、「Save And Publish」を実行すると、URLパスに基づく公開状態になります。ただし、この段階ではテンプレート内の<h1>や<p>タグの中身が空のため、ブラウザ表示は空白のままです。
最終的にデータベースに蓄積した値をHTMLに描画するには、Razor構文を使用して明示的なフィールドバインドを行います。テンプレートエディタを開き、対応するDOM要素内に以下のようなヘルパーメソッドを埋め込んでください。
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
Layout = null;
}
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/assets/styles/main.css">
</head>
<body>
<header class="page-header">
@Umbraco.Field("sectionHeading")
<nav role="navigation">
<ul>
<li><a href="/">トップ</a></li>
</ul>
</nav>
</header>
<main class="content-wrapper">
@Umbraco.Field("mainArticle", convertSimpleHtml: true)
</main>
<footer class="site-footer">
@Umbraco.Field("copyrightNotice")
</footer>
</body>
</html>コード例では元のエイリアス名を sectionHeading、mainArticle、copyrightNotice に変更しています。また、本文フィールドに対して convertSimpleHtml: true パラメータを付与することで、管理画面から入力された改行や段落タグがHTMLエスケープされずにそのままレンダリングされるよう制御しています。保存後、該当ページのURLにアクセスすると、コンテンツセクションで登録した値がテンプレート構造に合わせて正しく展開されることを確認できます。