Jekyllによるコンテンツモデリング

これはまったく新しいテーマではありませんが、最近、チームの作業でコンテンツモデリングのスキルを再検討する理由があります。 私たちの経験は、私たちの実践方法の限界が明らかになり始めているところまで来ています。 私たちの最も一般的な問題は、人々が自分自身とメンタルモデルを選択したプラットフォームとその慣習に結び付ける傾向があることです。

コンテンツをモデル化する方法を人々に教える代わりに、Drupalでコンテンツをモデル化する方法、またはWordPressでコンテンツをモデル化する方法を教えることになります。 ただし、コンテンツがどのプラットフォームに含まれるかに関わらず、ユーザーの最善の利益に焦点を当ててアプローチすることをお勧めします。

SmashingMagの詳細：

• JekyllとGitHubPagesでブログを作成する
• 静的ウェブサイトジェネレーターが次の大きなものである理由
• 静的ウェブサイトジェネレーターのレビュー：Jekyll、Middleman、Roots、Hugo
• スタイルガイド主導の開発の自動化

この考え方は、私が少し夢中になっているアイデアに戻りました。つまり、特定のアイデアをクライアントに伝えるためにアーティファクトを作成する必要がある場合、そのアーティファクトがウェブサイトの写真や図でいっぱいのPDFの代わりに実際のウェブサイトに可能です。

したがって、私は自分自身に問いかけました。プラットフォームにとらわれない方法でコンテンツをすばやくモデル化し、同時にクライアントやチームに意図を伝えるのに理想的なアーティファクトを構築するために使用できるツールはありましたか？

コンテンツモデリングの高レベルの理論

Jekyllに入る前に少し迂回しましょう。 コンテンツモデリングの説明からすべての規則とプラットフォーム固有の言語を削除して、3つの部分からなるシステムとして定義できると思います。

1. 核となるアイデアは、オブジェクトのアイデアです。つまり、サイト全体でまとめられるコンテンツの単位です。 たとえば、ブログの投稿や人はサイト上のオブジェクトになります。
2. オブジェクトには、それらを定義する属性があります。 ブログ投稿には、タイトル、コンテンツの本文、作成者を含めることができます。 人は名前、写真、経歴を持つことができます。
3. オブジェクトには、サイトのどこに到達するかを決定する関係があり、レイアウトには、オブジェクトのどの属性がどこで使用されるかを定義するロジックがあります。 この例のブログ投稿オブジェクトは、作成者が人物であるため、人物オブジェクトに接続されています。 著者の名前とプロフィールへのリンクを投稿ページに出力し、著者の完全な経歴をプロフィールページに出力します。

概説した高レベルのアイデアを尊重するシステムを作成したかったのですが、チームが特定のプラットフォームに固有のアイデアを気にすることなく、適切と思われる属性と関係を自由に作成できるようにしました。 代わりに、ユーザーにとって最適なものに基づいてコンテンツを定義することに集中できます。 そして、Jekyllにはこれを可能にする機能があることがわかりました。

Jekyllを入力してください

Jekyllは静的なブログフレームワークです。 そして、コメントセクションに向かう前に、はい、それ自体がプラットフォームと見なすのが正しいことを私は知っています。 ただし、DrupalやWordPressなどに比べていくつかの利点があります。

Jekyllはシンプルさを真剣に受け止めています。 データベースはなく、代わりにフラットファイルとプレーンな古いHTMLを生成するいくつかのLiquidテンプレートタグに依存しています。 液体は限られており、シンプルで非常に人間が読める形式です。 Liquidタグで構築されたテンプレートを誰かに見せることができ、フロントエンドコードの経験が少しあれば、テンプレートの機能を理解していることがわかりました。

これの良いところは、データベースを実行する方法、データベースに接続する方法、テンプレートを操作するようにCMSの管理領域を構成する方法などを誰かに示す必要がないことです。 代わりに、Jekyllをインストールして、サーバーの起動方法を教えることができます。 ユーザーがMacを使用している場合、これが2分間のプロセスであり、最初に試したときに機能する可能性が高くなります。

Jekyllはまた、ユーザーの喉に多くの慣習を強制しません。 好みのファイル構造とアセットパイプラインを作成し、ファイル間に独自の関係を確立し、好きな方法でマークアップを書く自由があります。 それが持っているいくつかの規則は、あなたのスタイルに合うように簡単に再構成できます。

コレクションを使用してオブジェクトを作成および含む

それはまだ実験的な機能と考えられていますが、Jekyllにはコレクションと呼ばれるものがあり、これを使用して、私が説明しているシステムを作成できます。

基本的に、フォルダを作成し、作成するオブジェクトのタイプにちなんで名前を付けます。 次に、そのフォルダーにファイルを追加すると、各ファイルはそのコレクション内のオブジェクトを表します。 オブジェクトを取得したら、すべてのファイルの先頭でYAMLを使用してオブジェクトの属性を作成できます。 YAMLは、情報を簡単に格納できるキーと値のペアを定義できる構文です。

このシステムの良いところは、信じられないほどシンプルなことです。 すべてが人間が読める形式であり、新しいユーザーが簡単に習得できるように機能します。 誰かが最終的なシステムでコンテンツと関係を作成する方法について多くのドキュメントを作成するのではなく、それを作成するだけです。 設計者は、オブジェクトとその属性が何であるかを確認できるため、設計システムを計画できます。 フロントエンド開発者は、マークアップとCSSを設計するための機能するWebサイトを持っています。

特定のシステムや規則を使用する必要がないため、好みのシステムや規則、またはプロジェクトの最終的なプラットフォームの規則を使用できます。 また、バックエンド開発者は、テンプレートとロジックを、すでに書き出されているため、使用することを決定したCMSに転送するときに、設計者の意図を簡単に判断できます。

オブジェクトと関係を持つシンプルなサイトを構築しましょう

このアイデアを試してみる場合は、単純なJekyllサイトをセットアップしてから、オブジェクトと関係を構築する必要があります。 最終製品を見たい場合は、このGitHubリポジトリから入手できます。 （注：これにはターミナルを使用する必要がありますが、これはかなり基本的な使用法です。約束します。）

Jekyllのインストール

Macを使用している場合、これは非常に簡単です。 Rubyはすでにインストールされています。Jekyllをインストールするだけです。 ターミナルを開き、次のように入力します。

 gem install jekyll

これにより、Jekyll Rubygemとその依存関係がインストールされます。 実行が完了すると、それだけです。Jekyllがあります。

サイトの設定

次に、Jekyllスキャフォールドを開始する必要があります。 すべてのWebプロジェクトを、MacのホームフォルダーにあるSitesというフォルダーに保存します。 したがって、最初に次のコマンドでナビゲートする必要があります。

 cd ~/Sites

次に、次のコマンドを使用して、適切なファイルと構造を持つフォルダーを生成できます。

 jekyll new my-new-site

「my-new-site」は、プロジェクトと呼びたいものに置き換えることができます。 取得するのは、その名前のフォルダーと、その中のすべての適切なファイルです。

Finderを開いて新しいフォルダに移動し、中身を確認します。 次のように表示されます。

Jekyllが提供するすべてのものは必要ないので、最初にいくつかのファイルとフォルダーを削除します。 / _includes 、 / _ posts 、 / _ sass 、 about.md 、 feed.xmlを投げましょう。

構成

次に、サイト全体の構成をセットアップします。 _config.ymlを開きます。 そこにはたくさんの入門的なものがあります。 それを削除して、好みの構成に置き換えます。 このプロジェクトの新しい構成は次のとおりです。

 permalink: pretty collections: projects people

URLが/path/to/file.htmlではなく/ path / to / file /のようになるように作成しました。これは、個人的な好みです。 また、プロジェクトと人の2つのコレクションを作成しました。 新しいコレクションは、構成ファイルに追加する必要があります。

これで、プロジェクトでこれらのコレクションのフォルダーを作成できます。

Jekyllがそれらをどう処理するかを認識できるように、フォルダー名は_ （アンダースコア）文字で始まる必要があります。

いくつかのオブジェクトを作成する

私たちが最初に作るオブジェクトは私たちの人々です。 Markdownを使用してこれらのファイルを作成します。これにより、ファイルはきれいできれいになりますが、適切なセマンティックHTMLが生成されます。 アメリカの歴史からの数字のファイルをいくつか作成したことがわかります（これは、ハミルトンを1か月間ノンストップで聴いているという事実に関連している場合と関連していない場合があります）。

人のファイルに入れる属性は次のとおりです。

 --- object-id: first-name: last-name: job: listing-priority: wikipedia-url: ---

後でこれらのオブジェクトのいずれかを具体的に参照するためにobject-idを使用します。 姓名を分割して、さまざまな場所で使用する組み合わせを選択できるようにし（システムで必要な場合）、 jobを使用してそれらの機能を定義します。 （これは、Jekyllのページがデフォルトで持つ変数であるため、「title」は避けています。）リストの優先度の属性も含めました。これにより、気まぐれに従って各人を並べ替えることができますが、並べ替えることもできます。アルファベット順や数値などのいくつかの組み込みメソッド。 最後に、その人のWikipediaページへのリンク用のフィールドがあります。

これらはすべて、YAMLフロントマターとして定義するために、上部と下部の3つのハイフンの間に含まれています。 各バイオのコンテンツはYAMLの後に続き、HTMLの任意の量と構造にすることができます（ただし、すべてをきれいに保つためにMarkdownフォーマットを使用します）。

完全に入力された人物オブジェクトは次のようになります（わかりやすくするためにコンテンツは切り捨てられています）。

 --- object-id: alexander-hamilton first-name: Alexander last-name: Hamilton job: 1st United States Secretary of the Treasury listing-priority: 1 wikipedia-url: https://en.wikipedia.org/wiki/Alexander_Hamilton --- Alexander Hamilton (January 11, 1755 or 1757 – July 12, 1804) was...

そして、これがプロジェクトオブジェクトです（わかりやすくするためにコンテンツは切り捨てられています）。

 --- object-id: united-states-coast-guard title: United States Coast Guard featured: true featured-priority: 2 listing-priority: 1 architect-id: alexander-hamilton wikipedia-url: https://en.wikipedia.org/wiki/United_States_Coast_Guard --- The United States Coast Guard (USCG) is...

これにはいくつかの違いがあります。 featuredの属性を設定しました。 プロジェクトが紹介されている場合は、ホームページに一覧表示されます。 すべてのプロジェクトがプロジェクトページに一覧表示されます。 また、プレースメントごとに優先される並べ替え順序が設定されています。 また、プロジェクトを作成した人のidへの参照が含まれているため、後で直接参照できます。

オブジェクトからページを生成する

_config.ymlファイルを変更することで、これらのオブジェクトごとにページを作成できます。

 permalink: pretty collections: projects: output: true people: output: true

output: trueを指定すると、その中のオブジェクトごとにページが生成されます。 ただし、オブジェクトのファイルにはコンテンツが含まれていないため、現在、オブジェクトはデータを出力しません。つまり、空のページを取得するだけです。 それを行うためのレイアウトテンプレートを作成しましょう。

このファイルは_layoutsフォルダーに配置されます。 ただし、最初に、処理するdefault.htmlファイルがあります。 これにより、すべてのHTMLファイルで一貫性のあるマークアップが保持されます。

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>{{ page.title }}</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/css/styles.css" /> </head> <body> <header role="banner"> ... </header> <div role="main"> <div class="container"> {{ content }} </div> </div> <footer role="contentinfo"> ... </footer> </body> </html>

次のようなLiquidタグがあります： {{ content }} 。 Jekyllによってページにレンダリングされるすべてのファイルには、テンプレートを指定する必要があります。 テンプレートを指定すると、そのファイルのコンテンツがレイアウトテンプレートの{{ content }}タグの場所にレンダリングされます。 これで、すべてのページに表示される内容を繰り返す必要がなくなりました。

次に、人物オブジェクト用の独自のレイアウトテンプレートを作成します。 これは次のようになります。

 --- layout: default --- <header class="intro person-header"> <h1>{{ page.first-name }} {{ page.last-name }}</h1> <h2>{{ page.job }}</h2> </header> <div class="person-body"> {{ page.content }} <a href="{{ page.wikipedia-url }}">Read more about {{ page.first-name }} {{ page.last-name }} on Wikipedia</a> </div>

このファイルは、コードがデフォルトのレイアウトテンプレートに挿入され、マークアップが人物オブジェクトファイルのデータから入力されることを指定します。

最後のステップは、各personオブジェクトがperson.htmlレイアウトファイルを使用することを指定していることを確認することです。 通常は、次のように個人ファイルのYAMLに挿入します。

 --- object-id: first-name: last-name: job: listing-priority: wikipedia-url: layout: person ---

ただし、オブジェクトファイルのデータには、コンテンツモデルに関連する属性のみが含まれるようにすることをお勧めします。 幸い、 _config.ymlファイルを変更してこれを処理できます。

 exclude: - README.md permalink: pretty collections: projects: output: true people: output: true defaults: - scope: type: projects values: layout: project - scope: type: people values: layout: person

これで、私のサイトは、プロジェクトコレクション内のすべてのオブジェクトがプロジェクトレイアウトテンプレートを使用する必要があり、peopleコレクション内のすべてのオブジェクトがpersonレイアウトを使用する必要があることを認識しています。 これにより、コンテンツオブジェクトをきれいに保つことができます。

リストページにオブジェクトを表示する

オブジェクトのページを出力するかどうかに関係なく、オブジェクトを一覧表示して、さまざまなパラメーターで並べ替えることができます。 すべてのプロジェクトをページに一覧表示する方法は次のとおりです。

 --- layout: default title: Projects --- <header class="intro"> <h1>{{ page.title }}</h1> </header> <div class="case-studies-body"> <ul class="listing"> {% assign projects = site.projects | sort: 'listing-priority' %} {% for project in projects %} <li> <h2><a href="{{ project.url }}">{{ project.title }}</a></h2> {{ project.content }} </li> {% endfor %} </ul> </div>

私たちが行ったことは、リストを中に入れるための<ul>を作成することです。 次に、 projectsというページに変数を作成し、それにすべてのプロジェクトオブジェクトを割り当て、それぞれに作成したlisting-priority変数で並べ替えました。 最後に、 projects変数内のすべてのプロジェクトについて、各ファイルの属性からのデータを含む<li>を出力します。 これにより、プロジェクトオブジェクトの高度に制御可能なリストと、それらの固有のページへのリンクが提供されます。

ホームページでは、すべてのプロジェクトを表示する代わりに、注目のプロジェクトのみを表示します。

 <ul class="listing"> {% assign projects = site.projects | where: "featured", "true" | sort: 'featured-priority' %} {% for project in projects %} <li> <h3>{{ project.title }}</h3> <a href="{{ project.url }}">Learn about {{ project.title }}</a> </li> {% endfor %} </ul>

features属性がtrueに設定されているプロジェクトオブジェクトはすべてこのページにレンダリングされ、 featuredプロジェクトに設定した特別な優先順位で並べ替えられます。

これらは、オブジェクトを出力および並べ替える方法の非常に単純な例ですが、コンテンツを整理するために作成できるさまざまな機能を示しています。

特定のオブジェクトへのリンク

構築する最後の機能は、特定のオブジェクトへのリンクです。 これは、作成者をブログ投稿などにリンクする場合に実行したいことです。 私たちの場合、一般的に関連付けられているプロジェクトに人をアタッチします。 覚えているかと思いますが、私たちのプロジェクトオブジェクトにはarchitect-id属性があり、私たちの人々はそれぞれobject-id属性を持っています。 これらの属性を使用して、適切な人物を特定のプロジェクトに関連付けることができます。

プロジェクトレイアウトテンプレートは次のとおりです。

 --- layout: default --- {% assign architect = site.people | where: "object-id", page.architect-id | first %} <header class="intro project-header"> <h1>{{ page.title }}</h1> <p>Architected by: <a href="{{ architect.url }}">{{ architect.first-name }} {{ architect.last-name }}</a></p> </header> <div class="project-body"> {{ page.content }} <a href="{{ page.wikipedia-url }}">Read more about {{ page.title }} on Wikipedia</a> </div>

4行目では、 architectという変数を作成し、プロジェクトのarchitect-id属性と一致するobject-idを持つオブジェクトをすべての人のオブジェクトで検索します。 1つの結果のみが返されるようにobject-idを割り当てる必要がありますが、1つの項目のリストではなく、1つの回答のみを取得して参照するようにするには、 | firstを設定する必要があります。 | firstに{% assign %} Liquidタグの最後に。 これは、コレクション内のオブジェクトが最初から一意のIDを持たないというJekyllの制限を回避します。 一意のIDを許可するデータと呼ばれる別の機能がありますが、ページを簡単に出力したり、オブジェクトを並べ替えたりすることはできません。 コレクションの制限を回避することは、必要な機能を取得するためのより簡単でクリーンな方法でした。

ページにそのプロジェクトのアーキテクトを表す一意のオブジェクトが含まれるようになったので、アーキテクトの名やWikipediaページへのURLなどを使用してその属性を呼び出すことができます。 出来上がり！ 一意のIDでオブジェクトに簡単にリンクできます。

まとめ

Jekyllのドキュメントをさらに詳しく掘り下げることで確立できる優れた機能がいくつかありますが、ここにあるのは、優れたコンテンツモデリングプロトタイプの基本です。さまざまなタイプのオブジェクトを定義する機能、それらのオブジェクトに関連付けられた属性、どこからでも特定のオブジェクトを呼び出すことができるID。 また、さまざまな場所でオブジェクトをテンプレート化および出力するための非常に柔軟なロジックを取得します。 何よりも、システム全体はシンプルで人間が読める形式であり、必要に応じて他の場所で使用できるようにプレーンHTMLを出力します。

コミュニケーションの目的で、プラットフォームに依存しないクリック可能なプロトタイプ（実際のWebサイト）ができました。これにより、多数の図を含むPDFよりもシステムをより適切に定義できます。 新しいことを学び、適応する必要があるときに、コンテンツモデルをその場で変更できます。 設計者と開発者をシステムに参加させて、使用したいマークアップとCSSを受け入れるため、パターンとフロントエンドアーキテクチャを確立できます。 GitHub GUI、またはProse.io、GitHub Pages、CloudCannon、Netlifyなどのビジュアルエディターの使用を可能にするホスティングプラットフォームを介してアクセスできるようにコンテンツエディターを設定することで、コンテンツエディターを組み込むこともできます。

そして、これはいずれも、プラットフォーム固有の作業方法を学習することに人を結び付けることはなく、代わりに、テクノロジーではなくユーザーに焦点を当てた概念レベルから作業することを可能にします。