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

Blog

ブログ

開発者向け

KenticoCloudを使用したフレームワークなしのシングルページアプリケーションの構築

By Rui Wang  

新しいソフトウェア製品を学習しようとするときに直面する可能性のある課題の1つは、それをテストするための適切なプロジェクトを見つけることです。 Kentico CloudのようなヘッドレスCMSを使用してWebサイトを構築すると、多くの疑問が生じます。どのフレームワークを使用していますか?サイトを運営するための環境はありますか?そして、最も重要なことは、Webサイトプロジェクトは、HTMLで直接実行できるデータのブロックを含む長いページだけでなく、適切な選択ですか?

KenticoCloudヘッドレスCMSから

Kentico Cloudの操作方法を学び始めたとき、最初に行ったプロジェクトは、個人のブログのコンテンツを使用したサンプルのブログWebサイトでした。そのプロジェクトの基盤として、 KenticoCloudサンプルの.NETMVCWebアプリケーションを使用しました。これは正常に機能しました。

その後、誰かがWordPressでこれを行うことができるかどうか疑問に思いましたが、なぜ彼らはKentico CloudとMVCでそれを行うのでしょうか?これらのテクノロジーの一方または両方を特に使用したい場合を除いて、ブログWebサイトにとっては少しやり過ぎです。

jQueryを使用したシングルページアプリケーションの構築

MVC、Node.js、AngularJSなどの凝ったフレームワークを使用せずにWebサイトを作成したい場合はどうなりますか?誰かが、開発者がフレームワークを知ったり学んだりする必要のない、シンプルな表示レイヤーを備えたヘッドレスCMSによって管理される構造化データを使用してシンプルなWebサイトを構築できますか?

そのことを念頭に置いて、フロントエンドディスプレイにjQueryとHTMLのみを使用し、Kentico Cloudを使用してデータを提供するシングルページアプリケーション(SPA)の構築に着手しました。もちろん、時間を節約し、すべてを最初から書かないようにするために、誰かが以前に同様の概念を使用してページを作成したことがあるかどうかを確認し、DannyMarkovによる優れたチュートリアル「フレームワークなしのシングルページアプリの作成」を見つけました。

この記事では、リストビュー、単一アイテムビュー、フィルター機能など、私が探していたすべての機能を備えた、優れたクライアント側のJSSPAを準備する手順について説明します。 Kentico Cloudからデータを生成し、JSを更新して適切なデータを取得するだけで済みました。

Kentico Kontent


プロジェクトには、KenticoCloudサンプルサイトのカフェデータを使用しました。出力には、選択時に詳細情報が表示されたすべてのカフェの場所を一覧表示し、地域で場所をフィルタリングするフィルターも追加しました。 Kentico Cloudでは、カフェ用に定義されたコンテンツタイプを使用し、サイトマップを使用してカフェを地域ごとに整理しました。

このプロジェクトで私が直面した唯一の課題は、Kentico Cloudから生成されたJSONを理解することでした。これは、Dannyのサンプルプロジェクトよりも複雑だからです。それ以外は、余計な作業はあまりありませんでした。一日の中で、私のためのサンプルSPAカフェの場所を配信しました。これは、jQueryを参照するHTMLページ、JSファイル、およびCSSファイルで構成されています。それだけです、フレームワークのないSPA。

SPAはどのプロジェクトに適していますか?

この種のシングルページアプリケーションは、データが1回読み込まれ、すべてのアクションがクライアント側で実行されるため、読み込むデータが多すぎない単純なサイトに適しています。アイテムが数百ある場合、これは理想的ではないため、リクエストに基づいて追加のデータを個別に取得する必要があります。

この種のSPAの本当に良い使い方は何でしょうか?私の頭に浮かぶプロジェクトの種類は、会議やイベントのマイクロサイトまたはランディングページです。

たとえば、会議には3つのトラックでセッションがあります。開発者は、Kentico Cloudでセッションをコンテンツタイプとして定義し、イベントの主催者とコンテンツ編集者がイベントの日付に近づくにつれてセッションを管理および更新できるようにすることができます。

次に、サイトマップまたは分類法を定義して、各セッションとトラック間の関係を管理できます。イベント主催者にとって、KenticoCloudでこれを管理する方法を学ぶのは本当に簡単です。開発者に関しては、いくつかのデザイン要素を含むフロントエンドディスプレイを数日以内に完成させることができるでしょう。ただし、今のところ、KenticoCloudの外部でイベント登録を処理する必要があります。

別れの考え

イベントのマイクロサイトまたはランディングページにKenticoCloudヘッドレスCMSを使用して、フレームワークなしでシングルページアプリケーションを構築することは、イベント後に不要になる可能性があり、開発者とコンテンツ編集者の両方にとって優れたソリューションです。

シングルページアプリケーションで示したように、開発者は、複雑なフレームワークの学習や操作による通常の障害を回避して、最小限の労力で必要なすべてをすばやく準備できます。さらに、ビジネスユーザーは、開発者を関与させることなく、コンテンツを簡単に編集できます。

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

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