当サイトを最適な状態で閲覧していただくにはブラウザのJavaScriptを有効にしてご利用下さい。
JavaScriptを無効のままご覧いただいた場合には一部機能がご利用頂けない場合や正しい情報を取得できない場合がございます。
承知しました
本サイトではWebサイトのエクスペリエンスを向上させるために、Cookieを使用しています。Cookieはブラウザの設定から無効にできます。本サイトで使用するCookieについては、プライバシーポリシーをご確認ください。
お問い合わせ 無料トライアル

Blog

ブログ

開発者向け

Kenticoクラウドショーケースサイトの作成

By Bryan Soltis  

過去数か月にわたって、ケンティコロードショーは世界中の都市に最新情報と技術情報をもたらしました。これらのセッションのいずれかに参加した場合は、KenticoCloudの.NETCoreボイラープレートプロジェクトについて聞くことができます。プレゼンテーションの一環として、このオープンソースプロジェクトを使用して数分でサイトを構築する方法を紹介しました。この記事では、私たちがカバーしたプロセスと、ショーケースサイトのすべてのソースコードを紹介します。

Kentico Roadshowに参加した場合は、Kentico11やKenticoCloudに多くの優れた新機能が追加されています。イベントの大部分は、新しいヘッドレスCMSと、デジタルエージェンシーがプロジェクトでそれをどのように使用できるかでした。これには、概要セッション、新機能のハイライト、デモンストレーション、およびパートナーからのケーススタディが含まれていました。

各会議では、新しい.NET CoreMVCボイラープレートプロジェクトを数分で作成する方法を紹介しました。セッションでは高レベルの領域が取り上げられましたが、より詳細なコードを提供したいと思います。 Kentico CloudShowcaseサイトを構築した方法は次のとおりです。

KenticoCloudでコンテンツを定義/作成する

プロセスの最初のステップは、KenticoCloudコンテンツを作成することでした。これには、Kentico Cloud内でのコンテンツタイプの定義と、コンテンツインベントリへの入力が含まれます。ショーケースの例では、これには2つのコンテンツタイプの作成が含まれていました。1つはページコンテンツ用で、もう1つはプロジェクトの詳細用です。

コンテンツページ
以前のブログに続いて、ページコンテンツを保持するための一般的なコンテンツページコンテンツタイプを作成しました。これには、いくつかの標準要素と、プロジェクトの1つを強調するためのモジュラーコンテンツ要素が含まれていました。

Kentico Kontent

事業
このコンテンツタイプには、個々のプロジェクトに関連するすべての要素が含まれていました。特に、 Multiple Choice要素を利用して、プロジェクトで使用するテクノロジーを指定しました。

Kentico Kontent

在庫

コンテンツタイプを作成した後、コンテンツアイテムを追加しました。 Homeという名前の単一のコンテンツページアイテムを作成しました。 個々のプロジェクトのプロジェクトタイプのコレクション。

Kentico Kontent

Kenticoクラウドボイラープレート

コンテンツが作成された後、Kentico Cloud .NET CoreMVCボイラープレートを利用する準備が整いました。このオープンソースプロジェクトは、企業がKentico Cloudを使い始めるのを支援するために、Kenticoとそのパートナーによって作成されました。これには、多くの実証済みのベストプラクティスに加えて、開発者がプロジェクトを迅速に進めるのに役立つ革新的な機能と構成が含まれています。

プレゼンテーションでは、dotnewコマンドを使用して新しいプロジェクトを作成しました。次に、プロジェクトを開いて機能をテストしました。

Kentico Kontent

ボイラープレートプロジェクトの詳細については、こちらをご覧ください。

コードの変更

ボイラープレートプロジェクトをダウンロードして実行すると、カスタムコードを追加する準備が整いました。プレゼンテーションのために、いくつかのコードスニペットを用意しました。実行されたすべての変更の概要は次のとおりです。

KenticoクラウドプロジェクトIDを構成する
appsettings.jsonファイルをKenticoクラウドプロジェクトIDで更新しました。

Kenticoクラウドコードジェネレーター
Kentico Cloud .NETコードジェネレータプロジェクトを使用して、KenticoクラウドのContentPageおよびProjectコンテンツタイプのクラスファイルを作成しました。

生成されたクラスは次のとおりです。

 public partial class Contentpage { public string Title { get; set; } public IEnumerable Headerimage { get; set; } public string Content { get; set; } public IEnumerable Featuredproject { get; set; } public string Footer { get; set; } public ContentItemSystemAttributes System { get; set; } } public partial class Project { public string Url { get; set; } public DateTime? Datesubmitted { get; set; } public IEnumerable Screenshot { get; set; } public IEnumerable Technologies { get; set; } public ContentItemSystemAttributes System { get; set; } }

コードジェネレータプロジェクトの詳細については、こちらをご覧ください。
生成されたクラスをVSプロジェクトに追加します
生成されたクラスをプロジェクトに追加しました。さらに、ContentPageクラスに新しいプロパティを追加するための部分クラスを作成しました。このプロパティ（ TopProject ）を使用すると、注目のプロジェクトをプロジェクトとして強く入力できます。
 using System.Linq;namespace RoadshowShowcase.Models.ContentTypes{ public partial class Contentpage { public Project TopProject { get { return Featuredproject.Cast().First(); } } }}

最後に、ビューに渡すHomeDataという名前の新しいViewModelを作成しました。このクラスには、 ContentPageオブジェクトとProjectオブジェクトのコレクションが含まれていました。これにより、ページのコンテンツとプロジェクトのコレクションをモデルとして渡すことができます。
 public class HomeData { public Contentpage Content { get; set; } public IEnumerable Projects { get; set; } }
コントローラ/ビューの更新
新しいクラスを配置したら、 HomeControllerをDeliver APIコードで更新して、KenticoCloudコンテンツを取得しました。私はHomeDataオブジェクトを作成し、私のHomeDataオブジェクトのプロパティごとに別々のKenticoクラウドAPI呼び出しでそれを埋め。
 public async Task Index() { HomeData data = new HomeData(); // Get the Home ContentPage from Kentico Cloud var responseContent = await DeliveryClient.GetItemAsync('home'); data.Content = responseContent.Item; // Get the KenticoCloudProject items from Kentico Cloud var responseProjects = await DeliveryClient.GetItemsAsync( new EqualsFilter('system.type', 'project'), new OrderParameter('elements.datesubmitted', SortOrder.Descending) ); data.Projects = responseProjects.Items; return View(data); }

ビューの場合、 ContentPage contentプロパティを取得して、ページテキストを表示しました。 FeaturedProjectのために、私はその詳細を取得するために私の部分クラスで定義された新しいTopProjectプロパティを活用しました。
 
 @foreach (var image in Model.Content.TopProject.Screenshot) { @image.Name } 
 
 
 @Model.Content.TopProject.System.Name 
 
URL
 
@Model.Content.TopProject.Url
 
Technologies
 
 
     @foreach (var technology in @Model.Content.TopProject.Technologies) { 
  • @technology.Name
    •  } 
 
 

モデル内のプロジェクトごとに、スクリーンショット、名前、詳細を表示するレイアウトを定義しました。
 @foreach (var project in Model.Projects) { if (@project.System.Codename != Model.Content.TopProject.System.Codename) { 
 
 
 @foreach (var image in project.Screenshot) { @image.Name } 
 
 
  
 @project.System.Name 
  
 
 
URL
 
@project.Url
 
Technologies
 
 
     @foreach (var technology in project.Technologies) { 
  • @technology.Name
    •  } 
 
 
 
 
 
 } }

スタイリング
コーディングの変更を適用した後、自分のデザインに一致するようにサイトのスタイルとフォーマットを更新しました。これには、site.cssファイルへのいくつかのクラスの追加が含まれていました。これらのスタイルは、主に私の背景色、プロジェクトのフォーマット、およびその他の外観上の変更を定義しました。応答性を維持できるように、サイトのレイアウトは必ず残しておきました。 
Kentico Kontent

 JavaScriptの場合、Shared / _Layout.cshtmlファイルにjQueryへの参照を追加し、次の関数でsite.jsファイルを更新しました。この関数は、プロジェクトリストにアニメーションを追加します。
 $(function () { $('.project-link-toggle').click(function () { $('.project-details-content').not($(this).parent().next('.project-details-content')).slideUp(); $(this).parent().next('.project-details-content').slideToggle(); });});

試して！
すべての更新を適用した後、テストする準備ができました。プロジェクトをビルドし、Startup.csファイルの名前空間の問題を解決し、サイトをチェックアウトしました。 
Kentico Kontent

サイトが正しく表示されていることを確認した後、KenticoCloudのコンテンツを更新して別のプロジェクトを取り上げました。次に、サイトを更新して変更を確認しました。 
Kentico Kontent
前進する
このブログとロードショーのプレゼンテーションの目的は、KenticoCloudと.NETCoreMVCボイラープレートプロジェクトをアプリケーションに活用する方法を示すことでした。ソースコードをダウンロードして機能を確認することをお勧めします。これはオープンソースプロジェクトであるため、新しいベストプラクティスが定義されると、コミュニティから継続的に更新されます。そして、それはコミュニティプロジェクトなので、それをより良くして貢献するのを手伝ってみませんか？がんばろう！
コードを取得する
プロジェクトをGitHubに追加しました。ここから完全なソースコードをダウンロードできます。
 Kentico CloudGitHubプロジェクト


                    
                
                    

                

                    
Headless CMSの導入をお考えでしょうか？

                    
クラウドとマルチデバイスに最適化されたKentico Kontentをお試しください

                    

                        Webでデモを申し込む
                        無料トライアルを試す