[Sitecore Rocks] Sitecore MVC 用の Webアプリケーションプロジェクトをセットアップする Sitecore 7.2 版その2 MVCページを作成してみる

handcraft 6/4/2014 2961 N/A Sitecore XP

[Sitecore Rocks] Sitecore MVC 用の Webアプリケーションプロジェクトをセットアップする Sitecore 7.2 版でプロジェクトを準備したので実際に MVC ページを作成してみましょう。

1.ビュー(cshtml) の作成

作成したプロジェクトの Views フォルダーに Layouts フォルダーを作成してその配下に cshtml を作成していきます。

Solution Explorer の sc.mvc プロジェクトの Layouts フォルダーを右クリック -> 追加 -> 新しい項目をクリックします。 MVC 5 ビューページ (Razor) テンプレートをしようして cshtml ファイルを作成します。今回は下図のように SimpleMvcLayout という名前でMVCページを作成します。

本記事では例として cshtml を次のように編集しました。cshtmlファイルを編集時にインテリセンスが上手く動作しない場合はビルドしたりVisual Studio を再起動してみてください。また、下記サンプルで Sitecore.Mvc.Analytics.Extensions は VisitorIdentification() を使用する場合に必要になります。

@using Sitecore.Mvc.Presentation
@using Sitecore.Mvc
@using Sitecore.Mvc.Analytics.Extensions
@model RenderingModel

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>SimpleMvcLayout</title>
    @Html.Sitecore().VisitorIdentification()
</head>
<body>
    <h1>
        @Html.Sitecore().Field("Title")
    </h1>
    <div>
        @Html.Sitecore().Field("Text")
    </div>
    <div>
        @Html.Sitecore().Placeholder("content")
    </div>
</body>
</html>

プロジェクトをビルドしてエラーが発生しないことを確認します。

2.レイアウトの定義アイテムの作成

プログラムを作成したのでレイアウト定義アイテムを作成していきます。 Sitecore Explorer でレイアウト定義アイテムを作成します。下図のように Sitecore Explorer から Layoutsを右クリック -> Add -> New Item をクリックします。

Add New Item ダイアログで下図のようにテンプレートに Layout を指定してレイアウトの定義アイテムを作成します。今回は SimpleMvcLayout という名前でレイアウトのアイテムを作成しました。

アイテムの編集画面が表示されます。Path フィールドに作成した SimpleMvcLayout.cshtml ファイルのパス(本例では /Views/Layouts/SimpleMvcLayout.cshtml) を入力します。忘れずに保存してください。

これでレイアウトの定義アイテムの準備ができたので、適当なコンテンツアイテムにレイアウト詳細の設定を行います。今回はHomeアイテムに対してレイアウトの設定をします。Sitecore Explorer で home アイテムを選択します。右クリック→ Task -> Design Layout をクリックします。もしくはショートカットのCtrl + U を入力してレイアウト詳細を変更します。Layoutのテキストボックスに作成した SimpleMvcLayout を設定します。忘れずに保存してください。

あとは、プロジェクトを Sitecore のWebサイトに発行してページエディターや外部サイトにアクセスしてページの表示を確認してみてください。うまく表示されるとめでたしめでたしなのですが、場合によっては下図のように次のようなコンパイルエラーを伝えるエラー画面が表示される可能性があります。

これは cshtml のみがプロジェクトに含まれているためです。本来 cs ファイルの内容な ASP.NET MVC のプロジェクトは存在しないのですが、Sitecore MVC の場合コントローラークラスを使用せずにビューを定義できることから、このようなエラーが発生する場合があります。本格的に作り始めると cshtmlのみの Webアプリケーションプロジェクトになることはないと思いますが注意が必要です。本コンパイルエラーを回避するには適当な cs ファイルを作成してWeb アプリケーションプロジェクトに含めるようにするか、 Views/Web.config のsystem.web.webPages.razor に <add namespace="sc.mvc" /> のようなWebアプリケーションの名前空間ようの記述があるので、そこの記述を削除して再デプロイ(発行)してみてください。その場合、cshtmlで参照するような cs ファイルを作成するようになったらタグを追加し直してください。Web.configに対してタグの記述を削除したことを忘れるといけないので一時的に無害なcsファイルを作成しておくのが簡単かもしれません。

3.まとめ

簡単ですが説明は以上です。Sitecore の Web サイトを拡張するように Visual Studio のプロジェクトをセットアップするため、通常のスクラッチの開発と比べ開発にとりかかるのに1手間かかりますが、セットアップ方法を覚えればそんなに難しいことではないと理解していただけると思います。

// Net planet-es V2