開発者向け
ヘッドレスWebテンプレートから美しいWebサイトを起動する方法
By Jan Sedo
簡単なウェブサイトを作成するように最後に任されたのはいつですか？それがマーケティングのランディングページであるか、あなたの犬のブログ（素晴らしいコンテンツを想像してください！）であるか、あなたの個人的なプレゼンテーションであるかは関係ありません。そのWordPressテンプレートを起動するのにどれくらい時間がかかりましたか？そして、それよりも速くて簡単な方法があるとしたらどうでしょうか？
過去にページをすばやく作成するという課題に直面したときはいつでも、WordPressを使用していました。すでにPHP対応のサーバーとデータベースがマシンにインストールされていたので、新しいデータベースユーザーを作成し、いくつかの構成作業を行うだけで、それが機能しました。数時間から数日後、私は実用的なWebサイトを展開する準備ができました。
私は開発者のバックグラウンドを持っており、過去にMySQLを頻繁に使用していたため、このプロセスは私にとっては問題ありませんでした。私のフロントエンドの同僚の何人かにとって、これはそうではありませんでした。それらをphpMyAdmin （MySQLのWebベースの管理インターフェイス）に入れると、そのデータベース内のすべてのデータが危険にさらされたため、開発ツールをインストールして、WordPressのインストールを構成する必要がありました。そして、私の注意を必要としたさらに別のタスクは、これらのサイトをリモートサーバーに展開することでした。
とにかく、2010年ではありません。フロントエンド開発はますます人気が高まっており、ほとんどの人がJavaScriptを作成できるようになりました。これと連携して、Webテンプレートを作成および使用する新しい方法が登場します。
ヘッドレスCMSのより良い方法
ヘッドレスコンテンツ管理システム（CMS）について聞いたことがありますか？今日では、すべてをクラウドに配置するのが好きです。クラウドは、簡単で、手頃な価格で、どこでも利用できるからです（インターネットに接続している場合）。ヘッドレスCMSの使用はまさにそれです。インストール、保守、更新を必要とせずに、コンテンツ管理用の最新の管理インターフェイスを利用できます。
これにより、そのデータベースを気にする必要がなくなるため、新しい概念が方程式に取り入れられます。データはヘッドレスCMSの背後にあり、APIを使用してサイトにデータをプルできます。これにより、オプションが大幅に解放されます。コンテンツがアプリケーションに関連付けられていない場合、Webサイトの実装は、フロントエンドの実装自体によってのみ表されるようになります。これにより、使用するテクノロジーを完全に自由に使用できます。
Webテンプレート2.0
私は簡単なウェブサイトを作成するためのより速い方法を約束したので、茂みの周りを十分に打ち負かします。 1つの小さな.zipファイルのテンプレートは次のとおりです。
kc-template-multiverse-master.zip （ZIP、4.6MB）
このパッケージには、完全にレスポンシブなHTML5Webサイトの実装に必要なすべてのものが含まれています。その2番目の部分は、コンテンツモデルとアイテムを含むコンテンツ自体を含むデータインポートパッケージです。 JavaScriptやデータのAPIを呼び出す方法について知る必要はありません-それはすべてあなたのために準備されています。この時点で、完全なサイトから2歩離れています。あなたにできることは何が残っていますか？
- コンテンツ部分をヘッドレスCMSプロジェクトにインポートします
- あなたのサイトにそれを見つける場所を知らせてください
やってみましょう！
KenticoKontentに
ヘッドレスCMSについては前述しましたが、KenticoKontentがその1つです。コンテンツをモデル化して制限し、コンテンツを編集するためのアクセス許可を定義し、UIを合理化する機能により、これはあなたとあなたのコンテンツ編集者が大いに楽しむ場所です。
他のクラウドサービスに慣れているように、ヘッドレスCMSを無料で使用できます。 Kentico Kontentは、「スターター」と呼ばれる永久無料のプランを提供しています。これは、小規模なWebサイトに最適です。一部の高度な機能は、より高いTierプランでロックを解除し、検討する価値がありますが、それは別の話です。 Kentico Kontentを初めて使用する場合は、kontent.aiで無料のアカウントを作成できます。
通常、CMSをインストールするときは、飛び込んでコンテンツの作成を開始します。ただし、テンプレートを使用すると、パッケージのコンテンツのおかげで、すでに有利なスタートを切ることができます。
では、どのようにインポートしますか？ Kentico Kontentには、コンテンツとモデルをプログラムで操作できるAPIがあり、次のステップで使用します。でも心配しないでください。手を汚す必要はありません。他の誰かがすでに手間のかかる作業を行っているので、素敵なUIを介してすべてをインポートできます。
プロジェクトIDとコンテンツ管理APIキーを必ずマークダウンしてください。両方とも、アプリのAPIキーの下のプロジェクト設定にあります。
コンテンツのインポート
今の時間をメモしてください。輸入に数分以上かかる場合は、ビールを購入します。データをインポートするには、次のツールを確認してください：https：//kentico.github.io/kontent-template-manager/templates
これは、テンプレートのコンテンツ部分が生まれた場所です。ツール自体はすでにKenticoKontentのコンテンツ管理APIを使用しているため、そのインポート/エクスポートスクリプトを理解する必要はありません。
それで、それは私たちのために正確に何ができるでしょうか？
- 後でインポートできるデータエクスポートパッケージを作成できます
- 既存のプロジェクト間でアイテムを移行できます
- プロジェクトまたはZIPパッケージから新しいプロジェクトにデータをインポートできます
最後のオプションは、私たちが求めているものです。エクスポートパッケージは、プロジェクトマネージャーが理解するデータの大きなJSONであり、プロジェクトのすべてのコンテンツモデルとコンテンツアイテムが含まれています。これは、ある種のSQLインポートと考えることができます。
では、インポートを行う方法は？
- アーカイブを解凍し、データインポートパッケージを見つけます
- KCプロジェクトマネージャーツールの[インポート]タブに移動します
- 前の段落のAPIキーをツールにフィードします
- インポートパッケージをドラッグアンドドロップして、インポートを確認します
注：このツールもオープンソースであるため、 GitHubでコードを確認してください。最終的には、ツールをフォークして調整したり、自分でホストしたりできます。
ウェブサイトの完成
Kentico Kontentを開くと、インポートされたすべてのデータが表示されます。最後のステップであり、必要なカスタマイズは、KenticoKontentのプロジェクトのプロジェクトIDをサイトに通知することだけです。だから、お気に入りのコードエディタを開くか、メモ帳だけを開いて、構成ファイルを開きます。どのファイルであるかはテンプレートごとに異なります。この場合は/assets/js/kenticokontent.jsです。 'kontent'の部分をプロジェクトIDに置き換えます。
それでおしまい！これで、お気に入りのブラウザでindex.htmlを開き、新しいサイトをクリックできます。コンテンツを更新したいときはいつでも、KenticoKontentを開いて変更してください。あなたのウェブサイトは変更を反映します。
サイトの実装を調整するために、サイトコードファイルを編集できます。特定のコンポーネントに分割されているため、事前の知識がほとんどまたはまったくなくても簡単にカスタマイズできます。 JavaScriptを少し知っているなら、それはあなたにとって簡単なことです。更新を押すと、コードがすぐに変更されます。
あなたのサイトをオンラインにする
これで、更新と保守が簡単な動的コンテンツでローカルに実行されるWebサイトができました。やることリストに残っているのは、あなたの成果を世界に示し、それをオンラインで公開することだけです。
このようなサイトを展開する最も簡単な方法は、ファイルをコピーしてリモートサーバーに貼り付けることです。これは、追加の構成を必要としない静的ファイルの集まりです。新しいサイトをホストするサーバーを所有していないか、サーバーにアクセスできない場合は、より自動化された展開方法や、GitHub Pages、Surgeなどのさまざまなホスティングプロバイダーもあります。あなたが本当の技術者で、もっと知りたいのなら、 この記事をチェックしてください。
概要
だからあなたはそれを持っています！必要なすべてのコンテンツ管理機能を備えたWebサイトと優れたContentas a Serviceプラットフォームを実装する準備ができており、数回のクリックとテキストファイルの編集ですべて無料です。必要なのはサンプルコンテンツを独自のものに変更することだけです。データ。ここですべてのテンプレートのリストを確認してください。
すばらしいコミュニティメンバーと一緒に毎週新しいテンプレートを追加しているので、ニーズに合ったテンプレートがすぐに見つからない場合は、数日おきにチェックインしてください。もしそうなら、どうやって見つけたのか教えてください！
