KDP(電子出版)のメモ 急急如律令

Amazon Kindleダイレクト・パブリッシングでの電子出版や電子書籍の作成販売について、文章やイラストの作成や編集方法について書いています。

gatsby starter blogをMDからではなくJSONから記事を生成する

gatsby starter blogはcontent、blogにあるマークダウンファイルから記事が作られている。それをJSONに置き換えて記事ができるかと試してみた。

 JSONにタイトルや日付、説明などの情報を書き込んでからgatsbyに渡してブログ形式でサイトを生成させよう。gatsby starter blogのいいところはRSSフィードや、検索エンジンの最適化だったり、PWAの作成、サイトの軽量化などを簡単にできるので、gatsby starter blogに合う形に情報を渡す。

 初めは、Alljsonにslugを追加すればいいのかなと思ったが、データを読み込んでみるとすべてのファイルが一緒くたにされて、ファイルごとに抽出ができなかった。調べたら方法があるのかもしれないがAllfieにextension: {eq: "json"}で拡張子でfilterをかけて絞り込んだ。

github.com

export  const query = graphql`
query MyQuery($slug: String!)  {
  file(extension: {eq: "json"},fields: {slug: { eq: $slug } }) {
    childrenJson {
      Asin
      Booktype
      Category
      Contributor
      ImageURL
      Points
      Price
      Publisher
      Title
      URL
      Saletitle
      Date(formatString: "YYYY年MM月DD日")
    }
  }
      site {
      siteMetadata {
        title
      }
    }
}`

 やってみた問題点は、一記事の表示データ量が多いのでlighthouseで確認すると評価が下がった。なので、ページネーションで分割したほうがよさそうだ。そこで、fetchでjsonを読み込んでページネーションで表示を管理してみる。

dev.classmethod.jp

gatsby-plugin-json-outputがサイトのjsonを分割してくれるようだ。 qiita.com

react-paginateを使えばいいんじゃないか

React-Paginateを用いたページネーションの導入手順 qiita.com

 以前はマークダウンファイルをMDXに置き換えて記事を作り、jsonファイルからデータを読み込み、合わせてページを生成する方法をとった。 kyukyunyorituryo.github.io