Blog

インターネット全体に非常に多くの美しいWebサイトテンプレートがあるため、独自のサイトをこれまでになく簡単に構築できます。ただし、サイトを動的にすることは、初心者にとって常に少しの課題でした。以前、ヘッドレスWebテンプレートの使用方法を説明しました。今回は、作り方、世界に見せて、有名になる方法を説明します。

誰かが私に彼らのためにウェブサイトを作るように頼んだときはいつでも、私はいつもデザインから始めました。私はデザイナーではなく開発者なので、どうやら最善のアイデアではありません。もっと才能のある人に任せなければならないことに気付く前に、私は何度も失敗しました。時間が経つにつれて、私はほとんどの場合、オンラインでテンプレートを探し始める方が良いこと、そして最初に考えていたものにできるだけ近いものを見つけることがはるかに簡単であることを学びました。

それは簡単な部分です。しかし、それは機能的なウェブサイトに変える必要がある単なるテンプレートです。そして時は金なりですが、どうやってそれをできるだけ早くするのですか？

テンプレートを動的サイトに変える

単純なHTMLWebサイトテンプレートは、デザインを示す静的ファイル（HTML、CSS、JS、画像など）の集まりです。このような既成のサイトで何かを変更したい場合は、提供されたマークアップファイルの追加と編集を開始する必要があります。 HTMLの調整は簡単に聞こえるかもしれませんが、美容師であり、サイトを作成した母親は非常に反対します。そして、あなたは彼女にHTMLを教えたくありません。あなたはそれを知っています。

したがって、コンテンツを実装の外に移動する必要があります。 Content-as-a-Service（CaaS）クラウドプラットフォームを使用すると、小規模なWebサイトで簡単に利用でき、無料で、何もインストールする必要がないため、優れた方法です。 HTMLテンプレートは、そこから動的コンテンツを取得するコードで拡張されています。

前回の記事で、ヘッドレスWebテンプレートの使用方法を紹介しました。それは楽しかったですが、開発者として、私たちは時々手を汚したいと思っています:-)。今すぐ一緒にテンプレートを作成しましょう。

ヘッドレスWebテンプレートの内容

中には何が入っていますか？元のテンプレートは、CSSスタイル、JavaScriptコード、およびHTMLで構成されています。これは、HTML5UP.netやstartbootstrap.comなどのカタログサイトから無料のHTMLWebサイトをダウンロードしたときに得られるものです。

ヘッドレスWebテンプレートには、2つの主要な部分があります。これらに対処する必要があります。

1. テンプレートの実装
2. コンテンツインポートパッケージ

KenticoKontentと組み合わせたJavaScriptフレームワークVue.jsに基づく実装を見てみましょう。私はインターネットブラウザとJavaScriptの非常に限られた知識しか必要としないのでVue.jsを選びました:-)。別のプラットフォームをご希望の場合は、 Kentico Kontentの他のSDK （PHP、.NET、Javaなどを含む）をお気軽にチェックしてください。

コンテンツインポートパッケージは、圧縮されたJSONデータの束に凝縮された分離されたコンテンツです。これは、テンプレートマネージャーツールによって自動的に作成されます。

そして最後に、このショーケースの目的のために、 Grayscaleと呼ばれるブートストラップテンプレートを選択しました。

Vue.jsの実装

一見すると、ウェブサイトは非常に洗練されていてシンプルです。シングルページアプリケーションであるため、ナビゲーションボタンは、リダイレクトを行うのではなく、ページのセクションにスクロールします。コード内のルーティングに対処する必要がないため、これは完璧です。

ここで、テンプレートのコンテンツをセクションに分割する必要があります。これは、将来のVue.jsコンポーネントをうまく示し、デザインをコンテンツモデルにマッピングします。 Webサイトのどの部分に動的コンテンツがあるか、またはかなり静的になるかを考えてください。下部にある著作権の言及のような一部の部分は、頻繁に変更されることを期待しないため、コードの一部として残すことができます。

Webサイトの上部を見ると、デザインをコンテンツモデルにマッピングすると次のようになります。

保存するコンテンツの種類がわかったら、KenticoKontentでモデルを作成します。ログイン（サインアップ）して、新しい空のプロジェクトを作成します。これまでにこれを行ったことがない場合は、左上のプロジェクトコンテキストドロップダウンから[マイプロジェクト]を選択してアクセスできます（または、ログインしたらここをクリックしてください）。

新しいプロジェクトで、左側のパネルの[コンテンツモデル]に移動し、最初のセクションの新しいコンテンツタイプを作成します。これはコンテンツテンプレートです。

次に、[コンテンツとアセット]（左側のメニューの2番目のリンク）に切り替えて、作成したモデルに基づいて新しいコンテンツアイテムを作成し、データを入力します。これが実際のコンテンツです。

次に、CMSから取得するすべてのコンテンツ（つまり、テンプレート上のすべてのコンポーネント）をすすぎ、繰り返します。あなたはおそらくその考えを理解しているので、私はウェブサイトのすべての部分を通過することはしません。

コンテンツの準備ができたら、テンプレートコードを確認し、静的コンテンツを、以前にモデル化して作成したコンテンツへの参照に置き換えることができます。私が行った手順は次のとおりです。

• index.htmlに追加のJavaScriptを含める-Vue.js、Kentico Kontent JavaScript SDK
• Vue.jsでターゲットにできるように、すべての本文コンテンツをいくつかのIDで追加の
  にラップします
• Vue.jsとSDKDeliveryクライアントをインスタンス化します
• コンポーネントのマークアップをindex.htmlからVue.jsコンポーネントに移動します

GitHubで完全な実装を見つけてください。実装は常にSRCサブフォルダーにあり、物事をクリーンで整理されていることに注意してください。

deliveryClientを使用してデータを取得し、それらをテンプレート部分の動的な値として使用していることがわかります。これが圧倒的であると思われる場合、またはVue.jsを使い始めたばかりの場合でも、心配する必要はありません。この場合にぴったりのステップバイステップの記事がかなりあります。 こことここでそれらをチェックしてください。

コンテンツインポートパッケージの準備

実装を準備し、モデルを作成したら、コンテンツ部分をテンプレートにバンドルする必要があります。 [エクスポート]タブのKenticoKontentテンプレートマネージャーを使用してzipを生成できます。このステップでは、KenticoKontentプロジェクトのGUIDが必要になります。プロジェクト設定画面（[開発]-> [APIキー]の下）で見つけます。

[データのエクスポート]ボタンを押すと、ツールはプロジェクトデータを含む.zipファイルを吐き出します。それをcontent.zipとして最終テンプレートに含めます。

あなたの作品を世界に見せましょう

テンプレートにスポットライトを当てる準備ができたら、 Kentico KontentTemplateギャラリーにテンプレートを含めたいと思います。私たちの盗品はあなたのプルリクエストを待っています:-)。

貢献チェックリストは次のようになります（ ガイドラインから）：

• GitHubでリポジトリを作成します。
• 必要なすべてのファイルがリポジトリにあることを確認してください。
  • テンプレートの実装を含む/ srcフォルダー
    • content.zip、KenticoKontentテンプレートマネージャーから生成されたアーカイブ
    • テンプレート.jpgとサイトのスクリーンショット
    • サイトを実行するための手順が記載されたREADME.md

一人でできるかわからない？私たちはいつも喜んで手伝ってくれる素敵な人たちです。 Gitterでpingを実行するだけです。

概要

迅速なウェブサイト開発は未来であり、私たちは流れに沿って進むことを可能にするための第一歩を踏み出しました。私たちは一緒に、誰かの貴重な時間を節約したり、初心者がWebサイトを構築するのに役立つ素晴らしいテンプレートを作成しました。皆様のご協力をお待ちしておりますので、ギャラリーにアクセスしてご参加ください。