当サイトを最適な状態で閲覧していただくにはブラウザのJavaScriptを有効にしてご利用下さい。
JavaScriptを無効のままご覧いただいた場合には一部機能がご利用頂けない場合や正しい情報を取得できない場合がございます。
同意しました
本サイトではWebサイトのエクスペリエンスを向上させるために、Cookieを使用しています。Cookieはブラウザの設定から無効にできます。詳細はこちらから

Document

ドキュメント

ASP.NET MVC5開発チュートリアル

最終更新日:

Kentico Xperience MVC 5 開発チュートリアルへようこそ。このチュートリアルでは、(ASP.NET MVC 5 フレームワークをベースにした)モデル・ビュー・コントローラーのアーキテクチャパターンを使用して、簡単なウェブサイトを作成する方法をご紹介します。

標準的な MVC モデルとコントローラを構築します。モデルとコントローラは、Xperience データベースからデータを取得し、HTML とインラインコードで構成された MVC ビューを介してライブサイトに表示します。Xperienceのコンテンツ構造は、コンテンツリポジトリとして機能するページによって表現されます。

要件

MVC開発には、ASP.NETフレームワークの開発コンセプトに高いレベルで精通していることに加え、C#の経験と標準開発ツールへのアクセスが必要となります。Visual StudioなどのASP.NET MVC開発用のIDEが必要となります。

注意:このチュートリアルの目的は、ASP.NET MVC の一般的な開発原理を教えることではなく、Xperience での Web サイト開発の仕組みを紹介することです。

チュートリアルを始める前に、MVC 開発の概念や Linq 構文の基本を理解している必要があります。すぐに使いこなせるようにするために、以下の無料のリソースを利用することができます。

基本的な概念の整理

  • Xperienceの開発モデル

  • ライブサイトの仕組み

  • バックエンドの仕組み

  • アプリケーション間のデータ共有

  • Xperienceサイトのライセンス

  • Xperienceを使用する利点

Xperience開発モデル

Xperience サイトでは、ライブサイトを表示する MVC アプリケーションと、ウェブサイトの管理用に Xperience アプリケーションという 2 つの異なるウェブアプリケーションを使用します。

  • MVCアプリケーション (ライブサイト)

    フロントサイトは標準の ASP.NET MVC アプリケーションで表示され、ASP.NET MVC フレームワークが提供する自由度やその他の機能を利用できます。Xperience API は NuGet パッケージを使用して MVC アプリケーションに統合されています。

  • Xperienceアプリケーション (バックエンド)

    コンテンツリポジトリとして機能し、コンテンツ編集やユーザー管理などのデフォルト機能やカスタムモジュールを含む管理インターフェイスを提供します。管理インターフェイスはASP.NET Web Forms上に構築されています。

  • 共有データベース

    両アプリケーションは同じデータベースを共有し、Xperience APIを使用してデータを処理します。Webファーム機能は、メモリにキャッシュされたデータ(設定やページコンテンツなど)とファイル(メディアライブラリなど)の両方について、アプリケーション間の変更を同期させるために使用されます。

ライブサイトの仕組み

ライブサイトのウェブユーザは、MVC アプリケーションとのみ対話します。ユーザーがブラウザからページをリクエストすると、MVC アプリケーションはページの URL を対応するルートにマッチさせます。ルートはリクエストを処理するコントローラアクションをターゲットとしています。通常、MVC アプリケーションは Xperience API と Xperience アプリケーションから生成されたクラスを使用してページデータを取得し、対応するビューにデータを渡す適切なモデルを準備します。ビューは、ブラウザに表示されるページ出力を定義します。

バックエンドの仕組み

エディタは、Xperience の管理インターフェイス、主に Pages アプリケーションでウェブサイトのコンテンツを管理します。エディタは、コンテンツツリー内で構成されたページを作成し、(ウェブサイトの開発者が設計したコンテンツ構造に基づいて)ページフィールドに値を入力したり、ページビルダーのインターフェイスを使用してコンテンツを編集します。開発者は、Xperience API を使用して MVC アプリケーションを介してライブサイト上にコンテンツを表示します。

アプリケーション間のデータ共有

MVCアプリケーションとXperienceアプリケーションは、ウェブファーム内のサーバーとして動作するように設定されています。両方のアプリケーションが同じデータベースを使用し、Xperience APIを介して操作を実行するため、このような設定が可能になります。ウェブファームの同期化により、一方のアプリケーションで行われたデータやファイルの変更が他方のアプリケーションに即座に反映されます。

たとえば、Web サイトのエディタが管理インターフェイスでページのテキストを変更すると、データはデータベースで更新されます。その後、Xperience アプリケーションは同期タスクを開始し、MVC アプリケーションはキャッシュ内の一致するデータを無効にするために実行します。コンテンツに対する新しいリクエストが来ると、MVC アプリケーションはデータベースから更新されたコンテンツを提供します。同じプロセスは、サイト設定や管理インターフェイスを通じて設定された他の値やファイルに対しても動作します。

次の図は、Xperience MVC サイトのアーキテクチャとデータフローをまとめたものです。

Kentico Xperience development model diagram

Xperienceサイトのライセンス

MVCライブサイトと管理用アプリケーションを別々のドメインで運用する場合、両方のドメインのライセンスを取得する必要があります。ただし、必要なのは MVC サイト用のライセンスのみで、管理用の追加ライセンスは無料で提供されます。MVC アプリケーションのライセンスについての詳細は、Xperience のドキュメントを参照してください。

Xperienceを使用する利点

以下の表は、Xperience MVC開発モデルのメリットをまとめたものです。

開発者 コンテンツ編集者
・標準的な ASP.NET MVC デザインパターンを使用してサイトを作成し、Razor ビューエンジンを活用できます。 ・ライブサイトアプリケーションを管理インターフェイスから分離することで、軽量、高速、かつ最適化されたウェブサイトの開発が可能になります。 ・Visual Studioなどの標準ツールを使用しての作業ができます。 ・ウェブサイトをカスタマイズして拡張したり、ASP.NET対応のライブラリやツールを統合したりすることができます。 ・把握しやすい管理インターフェースを使用できます。 ・ページビルダーとWYSIWYGリッチテキストエディタを使用してコンテンツを編集できます。 ・ワークフロー機能を使用して、ライブサイトに公開する前に変更をプレビューできます。 ・多数のオンラインマーケティングおよびeコマース機能を利用できます。

チュートリアル順路

この短いチュートリアルを最大限に活用するには、指定された順序でページの順序に従います。

  1. Xperienceのインストール

  2. MVCアプリケーションの構成

  3. ページタイプの作成

  4. サイトにページを追加する

  5. 生成されたクラスの操作

  6. ウェブサイトのレイアウトを作成する

  7. ページコンテンツの表示

  8. ナビゲーションメニューの作成

  9. Xperience開発の次のステップ

次のページ: Xperienceのインストール

完成したページ: 10の1