Blog

複数のCMS、API、およびそれらのデータコントラクトを使用する場合、常に困難になります。データソースやフロントエンドフレームワークなどのJamstackコンポーネントの一部を統合する方法があった場合はどうなりますか？

ソフトウェアプロジェクトやウェブサイトに適切なテクノロジーを選択することは、多くの困難をもたらします。 1つの特定のスタックでの作業に慣れると、すべてのスタックに優先順位を付ける傾向があります。私の経験では、プロジェクトが習慣から特定のプラットフォームを使用して構築されたことはかなり一般的です。さらに、開発チームが最終的に別のプラットフォームに切り替えると、プロジェクトを書き直す必要があります。基本的には、作業を破棄して最初からやり直すためです。

プロジェクトが元のプラットフォーム上に構築されて出荷されるという、もう1つの極端な例もあります。その結果、イノベーションが不足しているという理由だけで、古いプラットフォームとテクノロジーの上に構築された新しいグリーンフィールドプロジェクトがあります（光沢のある新しいSwiftを使用する代わりにObjective-Cをいじる若いウィンクウィンク）。

これは、Web開発とJavaScriptの世界でさらに明白です。新しいフレームワークが出現し、ほぼ毎日静かに非推奨になっています。新しい技術を検討するのは時間の無駄であるだけでなく、追いつくことも不可能に思えるかもしれません。静的サイトジェネレーターとJamstackエコシステム全体で違いはありません。利用可能なすべてのCMSと可能な静的サイトジェネレーターの組み合わせをマスターすることは、絶望的なイニシアチブのように思えます。

さまざまなコンテンツ管理システム、データソース、静的サイトジェネレーターをすべて単純化して統合する方法が必要ですよね？

データの正規化により、すべてがレゴのピースに簡素化されます

私が子供の頃、PlayStationやNetflixはありませんでした。私の最も好きな時間の過ごし方は、積み木で遊ぶことでした。時が経つにつれ、さまざまな素材や形のさまざまなメーカーによって作られたさまざまなキットを集めてきました。

何年も後に私がJamstackコンポーネントで同じ問題を解決すると誰が思っただろうか？今だけ、それを相互運用性、互換性、異なる契約、またはベンダーロックインと呼んでいます。

これらの用語はすべて、ソフトウェア開発だけでなく、非常に広く普及している概念です。さまざまなコンテンツ管理システム（さまざまなAPI、SDK、およびクライアントを使用）のデータコントラクトをさまざまな静的サイトジェネレーターと統合して接続する方法があれば、すばらしいと思いませんか？さまざまなデータソースとフロントエンドフレームワークのすべての組み合わせで詳細に飛び込むことを期待しない方法はありますか？それがSourcebitが目指していることです。これらすべてのコンポーネントを互換性のあるレゴピースに変えて、遊んでみましょう。

Sourcebitとは何ですか？

Sourcebitは、オープンソースのMITライセンスプラットフォームであり、データの正規化、変換、およびさまざまなコンテンツ管理システムとターゲットの静的サイトジェネレーターおよびフロントエンドフレームワークの接続を提供します。これがないと、APIまたはSDKを使用してCMSからコンテンツをフェッチし、このデータをターゲットプラットフォームの特定のコントラクトに処理する必要があります。

Contentful、Kontent、さらにはWordpressなど、使用できるCMSはたくさんあります。これらすべてのCMSには、異なる出力、API、およびSDKがあります。 Hugo、Jekyll、Next.jsなど、広く使用されている人気のある静的サイトジェネレーターも多数あります。これらはそれぞれ、JavaScript、Go、またはRubyなどの特定のプラットフォームを使用した構築プロセスを利用します。これらはそれぞれ、Markdown、Frontmatter、JSON、YAML、またはHTMLなどの異なる形式のデータでも機能する可能性があります。 Sourcebitとそのプラグインエコシステムがこれをすべて行うので、プロジェクトの開発に集中できます。

Sourcebitはどのように機能しますか？

Sourcebitは、source 、 transform 、 targetの3種類のプラグインで動作します。彼らはそれぞれ、データの取得、変換、および正規化を担当します。

ソースプラグインは、データソース（通常はCMS）からデータを取得して正規化する役割を果たします。変換プラグインは、特定のデータ変換を処理します。たとえば、リモートアセットとメディアファイルをローカルに永続化します。そして最後に、ターゲットプラグインはこれらすべての正規化されたデータを取得し、選択したターゲットフレームワークまたは静的サイトジェネレーターに必要な形式に変換します。コンセプトはオープンで拡張可能です。すぐに使用できるプラグインを使用する以外に、独自のプラグインを開発できます。 Sourcebitのメンバーは、プラグインの概念全体をwikiで非常に明確に説明しています。

スムーズな構成

新しいプラットフォーム、サービス、またはフレームワークを評価するたびに、単純な概念実証を得るためだけにサービスを適切に構成するのは地獄のような努力です。驚いたことに、Sourcebitの構成は楽しい経験です。個人的には、これはSourcebitの私の最も好きな部分です。 Sourcebitは、すべてのハードワークを実行するこのきちんとしたインタラクティブウィザードを提供します。

はい。すべての識別子、プラグイン、データ変換を手動で指定して、構成ファイル全体を自分で作成することもできます。しかし、なぜあなたはそれをするのですか？

全体のアイデアはいいですね...しかし、それは実際にどのように機能しますか？

Sourcebitが実際にどのように機能するかを示すために、代わりにマークダウンファイルにハードコードされた静的コンテンツをヘッドレスCMSに移行してみましょう。この例では、 Kentico Kontentを使用しましたが、サポートされているSourcebitのソースプラグインのいずれかを使用できます。

デモンストレーションのために、サイト全体を最初から構築することもできましたが、この記事はJekyll、Hugo、またはNext.jsの詳細に関するものではないため、https： //jamstackthemes.devから既存のブログテンプレートを選択しました（確かに、インスピレーションを与えるテンプレートの非常に優れたソースです！）。このページはJekyllで作成されています。そうは言っても、同じ原則がHugoまたはNext.jsのターゲットプラグインとサイトにも当てはまります。

次のレシピの実行中の出力はここにあります。このタスクのレシピは本当に簡単です。

1. プロジェクトをフォークし、コンテンツをCMSに移行します。
2. CMSからコンテンツを取得して正規化するようにSourcebitを構成します。
3. コンテンツを取得し、プロジェクトをローカルで実行します。
4. サイトを構成してNetlifyにデプロイします。
5. CMSでコンテンツが変更されたときに、再構築サイトを構成します。

注：プロジェクトをローカルで実行するには、Node.js、npm、およびJekyllをインストールする必要があります。コードまたはチュートリアルのどこかで行き詰まった場合は、GitHubで完成したサンプルリポジトリを確認できます。

1.プロジェクトをフォークし、コンテンツをCMSに移行します

• GitHubでプロジェクトをフォークします。
• フォークされたリポジトリをgit clone https://github.com//tale.git 。
• コードを詳しく調べると、サイトのコンテンツが_pagesおよび_postディレクトリにあることがわかります。このコンテンツをKenticoKontentにコピーする必要があります。
• 「プロジェクト」セクションに移動し、Kontentで新しいプロジェクトを作成します。

• [コンテンツモデル]セクションに移動し、ページコンテンツタイプを作成します。

• タイトル、作成者、パーマリンク、およびレイアウトのテキスト要素を追加します。このJekyllWebサイトはコンテンツにマークダウン形式を使用しているため、コンテンツ名にマークダウンカスタム要素も追加します。私はすでにマークダウンカスタム要素を準備しました—私のhttps://sourcebit-tale-article-markdown-element.netlify.app/使用できます— https://sourcebit-tale-article-markdown-element.netlify.app/または、元のリポジトリをフォークしてNetlifyにデプロイします。 （カスタム要素について詳しくは、こちらをご覧ください。）

• タイトル、作成者、レイアウトのテキスト要素を使用して投稿コンテンツタイプを作成します。コンテンツについては、マークダウンカスタム要素が再度必要になります。マークダウンエディタのURLを使用してカスタム要素を作成します。

• [コンテンツとアセット]セクションで、ページと投稿を作成します。静的ファイル（_pagesおよび_postsディレクトリから）からコンテンツをコピーしてKontentに貼り付けるだけです。

2.CMSからコンテンツを取得して正規化するようにSourcebitを構成します

• コンテンツはSourcebitおよびKontentSourceプラグインによってフェッチされるため、ハードコードされた静的コンテンツはもう必要ありません。プロジェクトの_pagesおよび_postsディレクトリを削除します。また、それらを.gitignoreファイルに追加する必要があります。
• Sourcebitを構成しましょう。 Webサイトプロジェクトのルートで、 npx create-sourcebitコマンドを実行して、インタラクティブなコマンドライン構成を開始します。矢印キーでアイテム間を移動し、スペースバーでオプションを選択し、Enterキーで確認します。
• @kentico/sourcebit-source-kontent (by Kentico): A Kontent source plugin for Sourcebitして確認します。
• この例では、アセットを変換する必要がないため、 Enterキーを使用してこの手順をスキップしてください。
• sourcebit-target-jekyllを選択sourcebit-target-jekyll (by Stackbit): A Sourcebit plugin for Jekyll target pluginを選択して確認します。
• KontentのプロジェクトprojectIdを入力し、確認します。プロジェクトIDは、プロジェクトの[プロジェクト設定] -> [ APIキー]セクションにあります。
  

• default言語を入力して確認します。
• 画面に応じてモデル/コンテンツタイプを設定します。

インタラクティブウィザードを終了した後、sourcebit.jsという名前の新しく作成されたファイルに注意してください。これは、コンテンツをフェッチ、変換、シリアル化、および使用する方法を定義するSourcebitの構成ファイルです。 CMSでプロジェクトまたはデータの構造を変更したら、インタラクティブウィザードをもう一度実行して新しい構成を生成するか、このファイルを編集するだけです。 Sourcebit構成全体は、SmoothConfigurationセクションで提供される.gifにも含まれています。

3.コンテンツを取得し、プロジェクトをローカルで実行します

• sourcebit fetchコマンドを実行します。これで、SourcebitはCMSからすべてのデータをフェッチし、生成されたSourcebit.js構成に従って定義済みのディレクトリに保存します。
• jekyllserveコマンドjekyll serveてサイトをローカルで実行できます。現在、サイトはKontentからのデータを使用しています。

4.サイトを構成してNetlifyサーバーにデプロイします

このステップでは、Netlifyビルドを構成します。

• package.jsonのscriptsセクションにデプロイスクリプトを追加します。
  'deploy':'npminstall&&sourcebitfetch&&bundleinstall&&bundleexecjekyllbuild' 。これにより、必要なすべての依存関係がインストールされ、すべてのデータがフェッチおよび正規化され、Jekyllサイトが構築されます。
• Rubyのバージョンで.ruby-version名のファイルを作成します。私の場合、 2.6.2です。
• Webサーバーのルートでサイトを実行したいので、 baseurlからbaseurlを削除します。
• すべての変更をプッシュします。
• Netlifyにログインし、既存のGitHubリポジトリを使用してGitから新しいサイトを作成します。

• Netlifyのユーザーインターフェイスで、デプロイするmasterブランチを選択し、ビルドコマンドとしてnpm run deploy _site/と入力し、サイトをデプロイします。ビルドが成功すると、サイトがデプロイされ、Netlifyで公開されます。

5. CMSでコンテンツが変更されたときに、再構築サイトを構成します

これで、ハードコーディングされていないがCMSから動的にフェッチされたコンテンツを使用してサイトが展開されました。ただし、コンテンツがCMSで更新された場合、変更は展開されたサイトにまだ反映されていません。これを実現するには、CMSでコンテンツが変更されたら、新しいNetlifyビルドをトリガーする必要があります。

• Netlifyインタフェースでは、ビルドのフック部分には、サイトの設定に移動し、[追加のビルドフックをクリックしてください。フックに名前を付けます（例： Kontent.aiコンテンツの更新） 、生成されたURLを保存してコピーします。
• プロジェクトのapp.kontent.aiに移動して[設定] -> [ Webhook ]に移動し、新しいWebhookを作成します。コピー済みのWebhookURLアドレスをURLアドレスフィールドに貼り付け、Webhookに名前を付けます（例： Netlifyビルドトリガー） 。変更を保存します。

• ここでCMSのコンテンツを変更すると、アイテムを公開した後、Webhookがトリガーされ、更新されたコンテンツでサイトが再構築されます。

次は何ですか？

Sourcebitと利用可能なプラグインを使用すると、カスタムのフェッチと正規化ロジックがなくても、多数のデータソースをターゲットプラットフォームに簡単に接続できます。これにより、さまざまなフロントエンドフレームワークおよび静的サイトジェネレーター用のWebサイトの開発がより簡単かつ安価になります。

Sourcebitは人々がJamstackサイトを開発する方法を変えることができると私は信じています。さらに、ベンダーの観点からは、Sourcebitは、各ターゲットプラットフォームにエコシステムを実装するための優れた代替手段となる可能性があります。

これは、1つのソースと1つのターゲットプラグインを使用したSourcebit機能の浅い例にすぎません。 HugoまたはNext.jsターゲットプラットフォーム、未公開の変更の監視とプレビュー、多言語サイト、さらにはアセットの変換など、探索することがもっとあります。もう1つのまったく新しいレベルの課題は、独自のカスタムプラグインを作成することです。私のものを見て、 Twitterであなたの考えを教えてください。

ボーナス

あなたがジキルの男ではなく、Next.jsと組み合わせてSourcebitに関するコンテンツを見たい場合は、同僚の@OndraBusによるこの素晴らしいビデオを強くお勧めします。