Blog

Kentico CloudのようなヘッドレスCMSの最も優れた点の1つは、ほぼすべての言語で開発できることです。 AngularやReactのような洗練されたJavaScriptライブラリであろうと、.NETやASP（shudder）のような古典的なフレームワークであろうと、コンテンツ配信にKentico Cloudを使用すると、プレゼンテーションに完全に集中できます。開発者がこの新しいプラットフォームを採用するのを支援するために、私たちはあなたを動かすためのいくつかのオープンソースプロジェクトを持っています。この記事では、KenticoCloudサンプルJavaScriptサイトを使用してサイトの構築を開始する方法を紹介します。

私は20年近くWeb開発を行ってきましたが、そのすべては主にMicrosoftスタック上にありました。確かに、私は他の言語を見てきましたが、私のキャリアを通して常にC＃とWindowsベースの開発にフォールバックしているように見えました。さて、最近の優れた開発者のように、成功するには1つのフレームワークに単独で焦点を合わせる以上のことが必要であることを私は知っています。そのため、私は常に新しいテクノロジーやシステムでスキルを伸ばしたいと考えています。

Kentico Cloudを使用すると、簡単に分岐して新しいことを試すことができます。 APIはほぼどこからでも使用できるため、ほぼすべての言語を取得して使用を開始できます。バックエンドに焦点を当てた開発者であるJavaScriptと私は、時々…うーん…「不安定な」関係にあります。はい、私はそれが非常に強力で有能であり、最近すべてのクールなサイトを運営していることを知っていますが、私たちが一緒に働いたとき、私たちはいつもうまくやっていくとは限りません。

JSの不一致を克服するために、Kentico CloudJavaScriptサンプルアプリをチェックすることにしました。プロジェクトを使用する過程で、同じことをしたいと思っている場合に備えて、いくつかのヒントを提供するのが良いかもしれないと思いました。

ヒント

他のサンプルプロジェクトやSDKについては、Kentico Cloud DeveloperHubを確認してください。

環境の準備

プロジェクトの最初のステップは、環境をセットアップすることです。この場合、それはあなたがいくつかの重要な部分をインストールしていることを確認することを意味します。サンプルプロジェクトは完全なReactサイトであるため、実行するにはマシンにNode.jsをインストールする必要があります。また、Notepadが本当に好きでない限り、ある種のコードエディタがあると便利です。

Visual StudioCodeをインストールします

コードを更新するには、なんらかのエディターが必要になります。 JavaScript / TypeScriptサイトで作業するときは、 Visual StudioCodeをインストールすることを強くお勧めします。それはそれらの言語のための素晴らしいハイライトとフォーマットを提供します。

ここからVisualStudioCodeをインストールできます。

Node.jsのインストール

Visual Studioインストーラーで、 Node.js開発パッケージを選択できます。このオプションは、Node.jsサポート、追加のJavaScriptおよびTypeScriptサポート、およびいくつかの診断機能をインストールします。

Node.jsを手動でインストールする

手作業で行う場合は、 Node.jsサイトにアクセスして、そこからファイルをダウンロードできます。

サンプルリポジトリのクローンを作成します

すべてのインストールを順番に取得したら、サンプルプロジェクトを取得する準備が整います。 GitHubにアクセスして、最新バージョンをダウンロードしてください。

このプロジェクトはオープンソースであるため、開発者の貢献が増えるにつれて、継続的な更新が期待できます。

サンプルサイトの実行

サンプルプロジェクトのクローンを作成すると、サイトを立ち上げる準備が整います。 Node.jsコマンドプロンプトを開き、クローンプロジェクトのルートに移動します。 npm installコマンドを実行してパッケージをダウンロードし、サイトを構成します。

パッケージをインストールした後、 npmstartコマンドを実行してNode.jsサーバーを起動します。このコマンドは、Reactライブラリを初期化し、 http：// localhost：3000でリクエストのリッスンを開始します。

ここから、サンプルサイトを表示できます。アプリケーションをクリックして、コンテンツに慣れることをお勧めします。これは、将来的に更新するのに役立ちます。

プロジェクト構造を理解する

このサイトは純粋なReactアプリケーションであるため、.NETWebアプリケーションとはかなり異なって構築されています。まず、JavaScriptとサポートファイルはたくさんあります。これは、コンパイルがなく、パフォーマンスが非常に速いことを意味します。 Reactを初めて使用する場合は、サンプルサイトを理解するのに役立つフレームワークを必ず読んでください。 Reactの詳細については、こちらをご覧ください。

サンプルプロジェクト内の注目すべきファイルのいくつかは次のとおりです。

Client.js

このファイルは、KenticoCloudクライアントとリクエストの作成を一元化します。これにより、このファイルをページに含めることが非常に簡単になり、呼び出しの一貫性と適切な処理が保証されます。

Stores / XXX.js

これらのファイルは、KenticoCloudから取得したデータの構造とコンテナーを定義します。これには、データのプル、状態変化時のデータの更新、およびフィルタリングが含まれます。別のタイプのデータをプルする場合は、KenticoCloudコンテンツタイプに対してこの構造を複製する必要があります。

Pages / XXX.js

これらのファイルには、実際のコンテンツのレイアウトが含まれています。 /Stores/xxx.jsファイルを利用して、Kentico Cloudコンテンツを取得し、その表示方法を定義するように要求します。新しいページを実装するときは、Reactでレイアウトをフォーマットする方法を必ず学んでください。

カスタムコードの追加

サンプルプロジェクトを実行しているので、「これをプロジェクトに使用するにはどうすればよいですか？」と考えているかもしれません。サンプルファンデーションを使用してサイトを構築する場合は、KCコンテンツの構造とデータを取得するために、いくつかの部分を更新する必要があります。私の場合、Kentico Cloudのブログ投稿をプルして、記事セクションのように表示するようにアプリケーションを更新したいと思いました。

プロジェクトIDを更新します

Client.jsファイルには、KenticoクラウドプロジェクトIDがあります。コンテンツを取得するには、この値をプロジェクトIDで更新する必要があります。

 const projectId = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';

ヒント

まだサイトを実行している場合は、そのページを更新するとサイトが更新されます。これは、Reactがファイルの状態を常に監視しており、変更があることを認識しているためです。それが発生すると、コードをリロードします。また、サンプルサイトではコンテンツの多くが消えてしまうこともすぐにわかります。これは、新しいKCプロジェクトに、サンプルサイトが期待するコンテンツタイプ/コンテンツがないためです。

新しいストアを追加する

あなたがあなたのコンテンツを見たいならば、あなたは新しい店を作りたいでしょう。 / Storesフォルダーに、コンテンツ用の新しいファイルを作成します。私の場合、KenticoCloudのブログ投稿をプルするためにBlogpost.jsという名前のブログを作成しました。

新しいファイルでは、既存のストアを青写真として使用し、特定のコンテンツ構造でコードを更新しました。

 Client.getItems({ 'system.type': 'blog_post', 'elements' : 'title,date,header_image,perex,url_slug', 'order': 'elements.date[desc]', 'limit': '5' }).then((response) => { blogposts = response.items; notifyChange(); });

サンプルサイトでは、各ストアがデータを取得して構造化する方法が少し異なります。必要に応じて、複数の関数を利用して、フィルタリングおよび順序付けされたコンテンツを返すものもあります。さまざまな可能性を理解するために、必ず各ストアを確認してください。

新しいページを追加する

新しいストアを作成したら、新しいページを作成する準備が整います。このファイルは、コンテンツのレイアウトとその表示方法を定義します。他のページと同じ構造に従い、/ Pagesフォルダーに新しいファイルを作成することをお勧めします。 /Pages/Blogpost.jsという名前の新しいファイルを作成しました。

繰り返しになりますが、コンテンツを表示する方法のサンプルとして既存のページを使用してください。私の場合、ブログの投稿には既存のArticles.js構造を使用しました。

 result.push( 
 
    
 {postDate} 
 
 
 {title} 
  
 
 
 );

ルーティング/ヘッダー

あなたがする必要がある最後のステップは、新しいページへのルートとトップメニューのリンクを追加することです。 index.jsファイルで、新しいルートを追加する必要があります。

 import BlogpostsPage from './Pages/Blogposts';...


そして、 / Components / Header.jsファイルに、新しいページへのリンクを追加します。


テスト

新しいファイルと更新を作成したら、テストする準備が整います。サイトを停止した場合は、npmstartコマンドを繰り返してノードサーバーを起動します。次に、サイトを参照して新しいページを表示します。



私のデモでは、新しいページがKentico Cloudのブログ投稿を正しくプルして表示しています。あなたのコンテンツが表示されない場合は、必ず定義された正しいコンテンツ構造を持たせるためにあなたの/Stores/XXX.jsと/Pages/XXX.jsファイルを確認してください。

前進する

Kentico Cloudは非常に多くのテクノロジーで実装できるため、開発者にとって可能性は無限です。コンテンツにクラウドベースのSaaSを活用しながら、開発に任意の言語、OS、またはフレームワークを自由に使用できます。このブログにあるようなサンプルプロジェクトを引き続き提供して、開始に役立てます。また、オープンソースであるため、必要に応じて貢献していただければ幸いです。がんばろう！

コードを取得する