Blog

ヘッドレスコンテンツ管理システム（CMS）の利点をよりよく理解するために、KenticoKontentでゼロからブログを作成しました。あなたの次のヘッドレスプロジェクトで有利なスタートを切るために、私がどのようにコンテンツモデリング、実装、そしてブログの立ち上げに取り組んだかを読んでください。

コンテンツモデルの作成

私の最初のステップは、コンテンツモデリングについて考えることでした。優れたコンテンツモデリングの基礎は、すべてのオブジェクト、サブオブジェクト、関係、およびプレゼンテーションコンテキストを考慮することです。ブログを作成していたので、ブログの2つのコアオブジェクトである作成者と投稿のコンテンツタイプから始めました。これら2つのオブジェクトの属性のほとんどは、KenticoKontentコンテンツタイプの単純な要素にきれいにマッピングされています。

考慮すべき2つの小さなオブジェクトもありました。ウィキペディアへの参照を作成し、単純なHTML埋め込みを有効にするために、これらが必要でした。編集者は、コンテンツインベントリに再利用可能なアイテムとして存在するのではなく、それらをコンポーネントとして投稿の本体に埋め込みます。これにより、柔軟性を犠牲にしたり、コンテンツインベントリに不必要に追加したりすることなく、本文のコンテンツの構造が向上しました。

モデル化する必要のある別のタイプのオブジェクトは、私がプレゼンテーションオブジェクトと呼んでいるものでした。これらのオブジェクトは、他のオブジェクトを表示するための追加のコンテキストを提供したり、特定の配信チャネルの詳細を提供したりします。私のブログでは、3つのプレゼンテーションオブジェクトを作成しました。最初のオブジェクトは一般的なページオブジェクトで、残りの2つは分類の詳細とデフォルトの構成のためのオブジェクトでした。

複数のオブジェクトがメタデータとタイトル/注目画像の定義に同じフィールドのいくつかを必要としたため、KenticoKontentのコンテンツスニペット機能を使用しました。これにより、モデルを定義する時間を節約でき、意味のあるときにモデルが均一になるようになりました。

最後に、投稿について考慮すべき関係もいくつかありました。著者と投稿は、多対多の関係を持つ必要がありました。この場合、投稿は作成者に直接依存していましたが、作成者には投稿の依存関係がなかったため、リンクされたアイテム要素を投稿コンテンツタイプに追加して、この関係をモデル化しました。投稿もカテゴリを介して相互に関係がありました。これを管理するために、KenticoKontent分類法を使用することを選択しました。タグ用の特別なコンテンツタイプを作成することを検討しましたが、編集者が自分でタグを作成できる柔軟性が必要だとは感じませんでした。さらに、分類法が明確な定義を強制し、クエリを簡単にするための独自のAPIを備えていることが気に入りました。

コンテンツの消費

コンテンツモデルを配置した後、実装を開始しました。これはVue.jsでの最初のプロジェクトの1つだったので、最初にこれに遭遇しました。最終的に、私は好きないくつかのパターンと実践に落ち着きました。

優れたJavaScriptSDKとモデルジェネレーターを使用して、RESTエンドポイントの操作を簡単にしました。それは私に大きなジャンプスタートを与えましたが、Vue.jsコンポーネントで公開したくない複雑さを追加しました。その結果、SDKとモデルの周りにラッパーのセットを作成して、物事を単純化することになりました。マッピングコードを追加する必要がありましたが、このマッピングにより、最終的にコンテンツの操作がはるかに簡単になりました。

ラッパーにより、基本的なキャッシュ戦略を簡単に追加することもできました。私のアプローチは、SDKが要求するURLをキーとして使用し、クエリの結果をメモリ内のキャッシュオブジェクトに保存することでした。時限無効化や永続化などの凝ったものは追加しませんでしたが、後で簡単に追加できるはずです。

注意すべきもう1つの実装の詳細は、URLへのアプローチです。著者と分類法については、コードネームの「スラッグ化」バージョンを使用することを選択しました。これは、コードネームを一意にする必要があり、カスタマイズする必要がないことを知っていたためです。ブログの投稿はもっと複雑でした。これらについては、URLがわかりやすいように、URLスラッグと公開日の組み合わせを使用しました。私が克服する必要があった1つの複雑さは、ハイパーリンクとして他のアイテムにリンクされている場合、公開日が利用できないことでした。ハンドラーに渡されたGUIDに基づいて適切なルートにリダイレクトするリダイレクトハンドラーを実装することで、これを解決しました。一般的なページの場合、URL slug要素を使用しましたが、現時点では強制できないため、コンテンツエディターはこれに一意の値を指定する必要があることをガイドラインに記載しました。ルーティングは、渡されたスラッグに基づいて汎用ページを見つけようとし、最初の一致を返します。一致するものが見つからない場合は、代わりに404ページが表示されます。

サイトの立ち上げ

プロジェクトのデプロイに関しては、いくつかのチェックボックスをオンにしたいと思いました。まず、無料にしたかったのです。次に、継続的デプロイが必要でした。Netlifyはこれらの要件の両方をうまく処理しました。最初のデプロイメントが構成されたら、私のようなシングルページアプリケーションをよりSEOに適したものにすることを目的としたいくつかの機能を有効にしました。私がしなければならなかった重要なことの1つは、すべてのパスがインデックスページに解決されるように、ワイルドカードリダイレクトハンドラーを追加することでした。このように、誰かがページをブックマークした場合でも、私のアプリケーションは正しくロードされます。 Netlifyは、検索エンジンがサイトをクロールできるようにする事前レンダリングオプション（現在ベータ版）も提供しています。

深くなる

このプロジェクトを詳しく見るには、 GitHubでコードを探索し、デプロイされたサイトをkontent-sample-app-vue-blog-travel.netlify.comで見つけて、最終製品を確認できます。ブログを作成するように促した場合は、KenticoKontentの無料トライアルを手に入れることができます。