Trelloを超単純なCMSとして使用します

時々、私たちのサイトはコンテンツ管理を少し振りかける必要があります。常にではありません。あまりありません。しかし、少し。 CMS市場は、手頃な価格の親しみやすい製品で繁栄しているため、私たちは選択肢がありません。ありがたいことに、それは企業にGa-jillionty1ドル（正確なコストではありません：私は最も近いbazillionに丸められている）を、すべての歌、すべての積分、全人材、全人材、大規模、大規模な認証™CMSプラットフォームのために強制していた世界とは非常に異なる世界です。

ただし、新しいCMSを把握するのではなく、サイト上のコンテンツを更新している人がすでによく知っている非常にシンプルなツールを使用するのは良いことです。

私はアイデアやタスクを管理するためのTrelloが大好きです。そして、それはAPIを持っています。 Webサイトのコンテンツソースとして使用してみませんか？つまり、グーグルシートでそれを行うことができるとしたら、他のことを試してみるのを止めることは何ですか？

こんにちは、トレロ

これが探索する簡単なサイトです。このTrelloボードからコンテンツを取得し、そのコンテンツはセクションに表示されます。各セクションには、Trelloボードのカードのタイトルと説明フィールドが入力されています。

TrelloはMarkdownを使用しています。これはここで便利です。 Trelloカードでコンテンツを編集している人は誰でも、基本的なテキストのフォーマットを適用し、同じマークダウンフローをサイトに入れることができ、ビルドプロセスによってHTMLに変換されます。

ビルディングブロック

私は、さまざまなフィードやソースからコンテンツを引き出し、テンプレートと一緒にマッシュしてWebサイトのHTMLを生成するこのモデルの大ファンです。コンテンツの管理からプレゼンテーションを隔離します（「デカップされた」という用語は、人気のある最新のCMS製品に由来する場所です）。そして、CSS-Tricksで学んだすべてのウィジーのトリックとテクニックを使用して、私たちが望む方法でウェブサイトを自由に作成できることを意味します。

ビルド時にコンテンツを引き込むため、サイトが人気になり、大量のトラフィックをもたらす場合、使用量のクォータやデータソースのパフォーマンスについて心配する必要はありません。そして、なぜそうしないのでしょうか？どれだけきれいにしたか見てください！

遊びたい！

大丈夫。このサイトのコードのコピーを手に入れて、心のコンテンツにいじくり回すことができます。このバージョンには、独自のTrelloボードを作成し、ビルドのコンテンツのソースとして使用する方法に関する情報が含まれています。

• GitHubのサイトコードリポジトリの例
• デモサイト
• 数回クリックして独自のコピーをクローンして展開します

自分ですぐに飛び込むのではなく、これが最初にどのように機能するかを歩きたい場合は、読んでください。

APIの発見

Trelloには、十分に文書化されたAPIと開発者リソースのセットがあります。また、APIを認証および対話するタスクを簡素化する便利なノードモジュールもあります。ただし、Trelloボードを探索しているときにURLをいじくりすることでAPIを探索することもできます。

たとえば、上記のTrelloボードのURLは次のとおりです。

 https://trello.com/b/zzc0uswz/hellotrello

そのURLに.JSONを追加すると、TrelloはJSONとして表されるコンテンツを表示します。見てください。

この手法を使用して、Trello全体の基礎となるデータを検査できます。特に1つのカードのURLは次のとおりです。

 https://trello.com/c/yvxlsezy/4-sections-from-Cards

この小さなトリックを使用してURLに.jsonを追加すると、そのカードを説明するデータが表示されます。

私たちは興味深いものを見つけます - ボード、リスト、カードのためのユニークなID。カードのコンテンツと多くのメタデータを見ることができます。

私はこれをするのが大好きです！すべての素敵なデータを見てください！どのように使用しますか？

ボードの使用方法を決定します

この例では、管理可能なコンテンツの1ページしかないサイトがあると仮定します。ボードのリストまたは列は、そのページのセクションを制御するのに最適です。編集者は、タイトルとコンテンツを提供し、必要な注文にドラッグすることができます。

APIを介してアクセスできるように、リストのIDが必要です。幸いなことに、私たちはすでにそれを発見する方法を見てきました - 問題のリストにあるカードのデータを見てみましょう。それぞれにIDBoardプロパティがあります。ビンゴ！

サイトの生成

計画は、Trelloからデータを取得し、それをいくつかのテンプレートに適用してサイトに入力することです。ほとんどの静的サイトジェネレーター（SSG）がジョブを行います。それが彼らが得意なことです。私はそれが理解する最も単純な概念を持っていると思うので、私は110を使用します。さらに、データを取得し、Nunjucks（人気のあるテンプレート言語）でクリーンなHTMLを生成するのに非常に効率的です。

Trelloと呼ばれるJavaScriptオブジェクトに見つかった各アイテムのセクション要素を出力するテンプレートの式を使用できるようにしたい：

 
{trello％のカードの％}
<section>
  <h2 id="card-name"> {{card.name}} </h2>
  <div>
    {％Markdown％}
      {{ -  card.desc |安全 }}
    {％EndmarkDown％}
  </div>
</section>
{％endfor％}

ビルドのデータを取得します

このようなJamstackサイトで人気のある手法は、Gulp、Grunt、または[ここに最新の新しいビルドスクリプトのHotnessを挿入]を使用してビルドを実行し、さまざまなAPIとフィードからデータを取得し、SSGの適切な形式でデータを隠してから、SSGを実行してHTMLを生成します。これはかなりうまく機能します。

Eleventyは、データファイルでJavaScriptの実行をサポートすることにより、ここで物事を簡素化します。言い換えれば、JSONまたはYAMLとして保存されているデータのみを活用するのではなく、JavaScriptによって返されるものはすべて使用でき、110のビルドが実行されたときにAPIに直接リクエストを行うための扉を開きます。最初にデータを取得するためにオフにするための個別のビルドステップは必要ありません。 110が私たちのためにそれをします。

それを使用して、テンプレート内のTrelloオブジェクトのデータを取得しましょう。

Trelloノードクライアントを使用してAPIをクエリすることもできますが、ボードのJSONに必要なすべてのデータがすぐにあります。すべて！ 1つのリクエストで！一度にフェッチすることができます！

 // trello.js
module.exports =（）=> {
  const trello_json_url = 'https：//trello.com/b/zzc0uswz/hellotrello.json';

  //ノードフェッチを使用して、このボードに関するJSONデータを取得します
  const fetch = require（ 'node-fetch'）;
  return fetch（trello_json_url）
    .then（res => res.json（））
    .then（json => console.log（json））;
};

ただし、そのボードのすべてのデータを表示したくありません。他のリストのカード、閉じられて削除されたカードなどが含まれています。ただし、JavaScriptのフィルターメソッドのおかげで、関心のあるもののみを含めるようにカードをフィルタリングできます。

 // trello.js
module.exports =（）=> {
   const trello_json_url = 'https：//trello.com/b/zzc0uswz/hellotrello.json'
   const trello_list_id = '5e98325d6d6bd120fb7395f'、
 
   //ノードフェッチを使用して、このボードに関するJSONデータを取得します
   const fetch = require（ 'node-fetch'）;
   return fetch（trello_json_url）
   .then（res => res.json（））
   .then（json => {
 
     //私たちが望むリストにあるカードに焦点を合わせるだけです
     //閉じたステータスはありません
     let contentcards = json.cards.filter（card => {
       return card.idlist == trello_list_id &&！card.closed;
     }）;
 
     コンテンツを返します。
 }）;
};

それはそれをします！これをEleventy's Data Directoryのtrello.jsというファイルに保存すると、このデータがTrelloというオブジェクトのテンプレートで使用できるようになります。

done-zo！ ？

しかし、私たちはより良くすることができます。また、添付の画像を処理し、レビューのためにコンテンツをステージングする方法を追加してください。

画像添付ファイル

Trelloのカードにファイルを添付することは可能です。画像を添付すると、データに記載されている資産のソースURLを使用して、カードにすぐに表示されます。私たちはそれを利用することができます！

カードに画像添付ファイルがある場合は、ソースURLを取得し、ビルド時にテンプレートがページに挿入するものに画像タグとして追加します。つまり、JSON（card.desc）の説明プロパティのマークダウンに画像のマークダウンを追加することを意味します。

その後、それを他のすべてと一緒に私たちのためにそれをHTMLに変えることができます。このコードは、JSONでカードを探し、データを必要な形状にマッサージします。

 // trello.js

//カードに添付ファイルがある場合は、画像として追加します 
//説明マークダウン
contentcards.foreach（card => {
  if（card.attachments.length）{
    card.desc = card.desc` \ n！[$ {card.name}]（$ {card.attachments [0] .url} '$ {card.name}'） `;
  }
}）;

これで、コンテンツでも画像を移動できます。ハンディ！

ステージングコンテンツ

Trelloを使用してサイトのコンテンツを管理する方法にもう1つ繁栄しましょう。

コンテンツを世界に起動する前に、コンテンツをプレビューしたい方法はいくつかあります。 Trello Boardには、ステージング用のリストが1つ、生産コンテンツ用のリストが1つあります。しかし、それは、すでに公開されているものと一緒に新しいコンテンツがどのように生きるかを視覚化することを難しくするでしょう。

より良いアイデアは、Trelloのラベルを使用して、どのカードがライブで公開されているか、そして段階的なバージョンのサイトにのみ含める必要があることを示すことです。これにより、素晴らしいワークフローが得られます。適切な場所に新しいカードを追加することで、さらにコンテンツを追加できます。 「ステージ」でラベルを付け、制作ブランチに表示されるカードから除外します。

JavaScriptオブジェクトのもう少しフィルタリングが必要です。

 // trello.js

//「ライブ」またはwithでラベル付けされたカードのみを含めます
//私たちがいるブランチの名前
contentcards = contentcards.filter（card => {
  return card.labels.filter（label =>（
    label.name.tolowercase（）== 'live' ||
    label.name.tolowercase（）== branch
   ））。長さ;
 }）;

「Live」というラベルの付いたコンテンツが、ビルド、ステージングのすべてのバージョンに表示されたいと考えています。さらに、「Branch」と呼ばれる変数に一致するラベルのあるカードを含めるようになります。

どうして？あれは何でしょう？

これは私たちがcraftyになる場所です！ Netlifyでこのサイトをホストすることを選択しました（免責事項：私はそこで働いています）。これは、NetlifyのCI/CD環境からビルドを実行できることを意味します。これは、GITリポジトリに変更をプッシュするたびにサイトを再配置し、このサイトに本当に便利な他のいくつかのものにアクセスできます。

1つはブランチデプロイです。サイトの新しい環境が必要な場合は、Gitリポジトリに新しいブランチを作成して作成できます。ビルドはそのコンテキストで実行され、サイトはブランチ名を含むサブドメインで公開されます。このような。

見てみると、オレンジ色の「ステージ」ラベルがあるものを含め、リストからすべてのカードが表示されます。このラベルがビルドコンテキストのブランチ名と一致したため、このビルドに含めました。ブランチは、ビルドが実行されたブランチを含む環境変数でした。

 label.name.tolowercase（）== branch

理論的には、私たちは好きなだけ多くのブランチとラベルを作成し、あらゆる種類のステージングとテスト環境を持つことができました。 「ステージ」から「ライブ」まで何かを宣伝する準備はできていますか？ラベルを交換すると、行ってもいいです！

しかし、それはどのように更新されますか？

NetlifyのようなCI/CDでサイトビルドを実行することから得られる2番目の特典は、いつでも好きなときにビルドをトリガーすることができるということです。 Netlifyを使用すると、ビルドフックを作成できます。これらは、HTTP投稿を送信するときに新しい展開を開始するWebhookです。

TrelloがWebhooksもサポートしている場合は、これらのサービスを一緒に縫い合わせて、Trelloボードが変更されるたびにサイトを自動的に更新できます。そして、何を推測します…彼らはします！フーラ！

Netlifyビルドフックを作成するには、サイトの管理パネルにアクセスする必要があります。 （このデモサイトを、試してみたい場合は、数回クリックして新しいNetlifyサイトにブートストラップできます。）

ここで、新しいビルドフックURLで武装して、コンテンツが変更されたときにそれを呼び出す新しいTrello Webhookを登録する必要があります。 TrelloでWebhookを作成する方法は、TrelloのAPIを介して行われます。

このサイトのリポジトリには、Trello APIを呼び出してWebhookを作成するためのわずかなユーティリティが含まれています。ただし、Trello開発者のトークンとキーが必要です。ありがたいことに、Trello Developer Portalにアクセスし、「クライアントの承認」の下で指示に従うことで、それらを無料で作成するのは簡単です。

手に入れましたか？素晴らしい！プロジェクトの.envファイルにそれらを保存すると、このコマンドを実行してtrello webhookをセットアップできます。

 npm run hook -url https://api.netlify.com/build_hooks/xxxxx

そして、それで、私たちは簡単なサイトでコンテンツを管理するための素敵な小さなフローを作成しました。フロントエンドを必要な方法で作成し、Trelloボードでコンテンツの更新を行うことができます。これにより、変更が行われるたびにサイトを自動的に更新できます。

本当にこれを使用できますか？

これは単純な例です。それは設計によるものです。デカップリングの概念と、外部サービスのAPIを使用してサイトのコンテンツを駆動するという概念を実証したかったのです。

これは、より複雑なプロジェクトのために、フル機能の分離CMSを置き換えるものではありません。しかし、原則はより複雑なサイトに完全に適用できます。

ただし、このモデルは、独立したショップ、バー、レストランなどの企業に見られるウェブサイトの種類にぴったりのものになる可能性があります。レストランのホームページを管理するためのリストが1つあり、メニュー項目を管理するための1つのリストがあるTrelloボードを想像してください。レストランのスタッフが管理するのに非常に親しみやすく、メニューの新しいPDFを変更するたびにアップロードするよりもはるかに優れています。

例を探り、自分のボードとコンテンツを試してみる準備ができましたか？これを試してみてください：

• 上から例をクローンして展開し、変更を開始します。
• netlify netlifyブランチビルドでできることの詳細については
• Trello開発者のリソースをさらに掘り下げます。
  

以上がTrelloを超単純なCMSとして使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。