外部コンテンツを含む静的 Web サイトを構築しましょう。
この投稿では、GatsbyJS を使用して任意のデータ ソースからデータを静的にレンダリングする方法を説明します。

ギャツビーJS

React が好きで、標準に準拠した高パフォーマンスの Web が必要な場合は、GatsbyJS を検討してください。

それは何をするのですか?

React コードを静的 HTML ファイルのコレクションにコンパイルします。

なぜ気にする必要があるのですか？

1. 最大のパフォーマンス - ユーザーが Web を閲覧するときに、クライアント側またはサーバー側でコードが実行されることはありません!
2. 最速の画像 - ユーザーのデバイスに適切な解像度で画像をプログレッシブに読み込みます。
3. SEO - 静的 HTML は Google (ロボット) に優しいです。遅いウェブサイトは Google 検索によってペナルティを受けます!
4. React - 生産的なフロントエンド開発。
5. Typescript - ユーザーが目にする前にエラーをキャッチします (オプションですが、強くお勧めします)!
6. コンテンツ - すぐに使える多くのコンテンツ ソースに接続して使用することも、独自のコンテンツ ソースを追加することもできます!

ギャツビー JS コンテンツ

GatsbyJS はコンテンツをノードのツリーとして表します。ノードは画像やテキストのブロックにすることができます。
たとえば、ブログ投稿はテキストと画像のノードのコレクションです。

gatsby-node.js ファイルでノードを手動で作成できます。しかし、もっと簡単な方法があります。

プラグイン

ノードはプラグインによって作成されます。どのプラグインが必要かは、選択した CMS によって異なります。
最も簡単なオプションは、ファイルをノードに変換するファイルシステム プラグインです。
自分に合ったプラグインを見つけるには、ここをご覧ください

プラグインが見つかりません

既存のプラグインでカバーされていないデータ ソースがある場合は、独自のプラグインを構築しましょう。

プロセスは非常に単純で、複雑な部分は画像のみです。

ノードのロード中

gatsby プロジェクトのルート フォルダーに gatsby-node.ts (または js) ファイルを作成します。

開始するには、このコードを追加してください。 sourceNodes メソッドは、gatsby プロジェクトのビルド時に自動的に呼び出されます。

import { GatsbyNode } from "gatsby"
import { createRemoteFileNode } from "gatsby-source-filesystem"

export const sourceNodes: GatsbyNode["sourceNodes"] = async ({
    actions: { createNode },
    createNodeId,
    createContentDigest,
    store,
    cache,
}) => {
}

それでは、データを取得しましょう。ここでは https://inuko.net アプリ プラットフォームを使用しますが、プロセスはどのソースでも同様です。

interface IPost {
    id: string;
    title: string;
    content: string;
    image_id: string;
}
const fetchPosts = async () => {
    const postQuery = {
        entity: {
            name: "cms_content",
            allattrs: true,
            links: [{
                name: "cms_site", from: "siteid", to: "id", alias: "cs",
                filter: { conditions: [{ attribute: "name", operator: "eq", value: "NAME_OF_MY_WEB" }] }
            }]
        }
    };
    const posts = await fetchJson("/api/fetch", postQuery) as IPost[];
    return posts;
}

そして、必要な画像も取得しましょう。

interface IImage {
    id: string;
    name: string; // sunset.jpg
    image_url: string; // https://sample.com/54565735235464322
}
const fetchImages = async () {
    const imageQuery = {
        entity: {
            name: "cms_image",
            allattrs: true,
            links: [{
                name: "cms_site", from: "siteid", to: "id", alias: "cs",
                filter: { conditions: [{ attribute: "name", operator: "eq", value: "NAME_OF_MY_WEB" }] }
            }]
        }
    };
    const images = await fetchJson("/api/fetch", imageQuery) as IImage[];
    return images;
}

(ブログ) 投稿のリストと画像 (リンク) のリストができました。
この例では、各投稿にテキスト コンテンツと 1 つの画像の ID が含まれる単純な構造があります。

次のステップは、サーバーから取得したデータを gatsby が使用できるデータに変換することです。
gatsby のデータは *node*s で表されるので、サーバー データをノードに変換する方法を見てみましょう。

export const sourceNodes: GatsbyNode["sourceNodes"] = async ({
    actions: { createNode },
    createNodeId,
    createContentDigest,
    store,
    cache,
}) => {

    const posts = await fetchPosts();
    const images = await fetchImages();
    // create an object for image by id lookup
    const imageDict = images.reduce((d, c) => (d[c.id] = c, d), {} as { [name: string]: IImage });

    for (const post of posts) {
        // create a node from post
        const postNodeId = createNodeId(`XPost-${post.id}`)

        if (post.image_id && imageDict[post.image_id]) {
            const image = imageDict[post.image_id];
            const name = image.name;
            const url = image.image_url;
            const fileNode = await createRemoteFileNode({
                url: url,
                //store,
                cache,
                createNode,
                createNodeId,
                // !!! important !!!
                // If your image url does not have a valid image extension, this will tell the system what type of image we are adding
                ext: name.substring(name.lastIndexOf(".")),
            });

            post.mediaFile___NODE = fileNode.id

            post.internalId = post.id; // copy our internal post. id is replaced by gatsbyjs

            const nodeMeta = {
                id: postNodeId,
                parent: null,
                children: [],
                internal: {
                    type: `XPosts`,
                    mediaType: `text/json`,
                    content: JSON.stringify(post),
                    contentDigest: createContentDigest(post),
                },
            }
            createNode(Object.assign({}, post, nodeMeta))
        }
    }
}

すべての投稿を反復処理し、それぞれに対応するノードを作成します。
投稿に画像 post.image_id がある場合は、remoteFileNode ノードも作成し、
それをポストノード
に追加します post.mediaFile___NODE = fileNode.id

重要 注: gatsby はファイル ノードからイメージ ノードを自動的に作成しますが、それがイメージであることを検出する方法が必要です。
URL にファイル拡張子が含まれている場合、またはサーバーが画像コンテンツ タイプで応答する場合は、準備完了です。
そうでない場合は、ファイル ノードに明示的な拡張子 (png、jpg) を設定して、イメージ ノードの作成をトリガーできます。
拡張子: name.substring(name.lastIndexOf("."))

画像ノード

おそらく、なぜ画像をノードとしてロードするという苦労をするのか不思議に思っているかもしれません。画像の URL を直接使用することもできます。
たとえば、画像が認証されたサービスの背後にある場合もあります。
しかし本当の理由は、gatsby が提供する素晴らしい画像プラグインを使いたいからです。
画像は、Web を閲覧するあらゆるデバイスに最適な形式とサイズに自動的に変換されます。
これは、画像の読み込みが速くなり、見た目も良くなることを意味します (Google によるスコアが向上します)。

ページ内のノードの消費

作成したノードを使用する準備ができました。
これを行うにはさまざまな方法があります。この例では、いくつかの投稿を features ページにレンダリングします。

まず、関心のあるデータ ノードをロードする必要があります。useStaticQuery を使用します。
次に、読み込まれたすべての投稿をレンダリングする SectionGrid という再利用可能なコンポーネントにデータを渡します。

const FeaturePage = (props:{}) => {
    const data = useStaticQuery(graphql`
        query featuresQueryEn {
            allXPosts(
                filter: {language: {eq: "en"}, pageid: {label: {eq: "features"}}}
                sort: {position: ASC}
                ) {
              edges {
                node {
                  id
                  content
                  title
                  mediaFile {
                    childImageSharp {
                      gatsbyImageData
                    }
                  }
                }
              }
            }
          }
    `);

    return Features} />
}

レンダリング時間!

import { Link } from "gatsby";
import { GatsbyImage } from "gatsby-plugin-image";
import React from "react";

export const SectionGrid = (props: {data: any, title: string}) => {
    const edges = props.data.allXPosts.edges as any[];

    return 

        

            {props.title}
        
        {edges.map(edge => {
            const node = edge.node;
            return 

                

                    
                

                    
{node.title}
                    
{node.content}
                
            
        })}
    
}

このコンポーネントは、クエリから取得したすべてのノードを反復処理します。そして、2 つの div をレンダリングします。1 つは投稿画像用、もう 1 つはテキスト コンテンツ用です。

それはラップです

見栄えが良くパフォーマンスに優れた Web サイトの構築がかつてないほど簡単になりました。
Gatsbyjs (およびそのプラグイン) のようなツールは、面倒な作業のほとんどを行ってくれます。
したがって、私たちはコンテンツとデザインに 100% の時間を費やすことができます。

この投稿を参考にして、ワークフローをさらに自動化できることを願っています。
製品カタログ、知識ベース、その他の貴重なコンテンツを Web サイトに導入できるようになりました。
コピペなしで完全に自動化された画像処理を使用します。

ハッキングを楽しんでください!