<p>Newtに登録しているものの最近はmicroCMSばかり使っていたので、久々に使ってみることに。<br>このサイトの記事はmicroCMSを使っているので同じフィールド構成でNewtを使って実装した備忘録。<br>microCMSからNewtへ置き換えたときの違いやNewtのいいところ・うれしいことをまとめた。<br>※この記事はNewtの登録から初期設定などの説明は含まない<br>モデルとフィールドの構成は以下の通り（一部フィールド除く）<br>モデル＝microCMSでのコンテンツ（API）<br>フィールド＝microCMSのAPIスキーマ<br>&lt;記事&gt;<br>タイトル<br>スラッグ<br>カテゴリー<br>サムネイル画像<br>セクション<br>メタデータ<br>&lt;カテゴリ&gt;<br>タイトル<br>スラッグ<br>イメージカラー<br>Newtのフィールドでうれしいポイント<br>・フリープランでもフィールドの種類が豊富<br>テキスト、エディタ、画像などはもちろんのことマークダウン・ファイル・地図・埋め込みなどがある<br>Newtのメディアでうれしいポイント<br>・メディアに情報が設定できる<br>画像にタイトル・代替テキスト・説明・タグなどが設定できるのでalt用の専用のフィールドを作る必要がない<br>記事の編集画面から変更できたらうれしいな...<br>フィールドで設定できることが多い！<br>かゆいところに手が届く<br>ここが変わったらうれしい<br>フィールド設定した画面に必須項目になってるかどうかが見える化されるとうれしい<br>カスタムフィールドなど入力画面がポップアップなので、外クリックしたときに入力途中までしていたデータが消えるので位置から登録しないといけないのが辛い。<br>リッチテキストをただのプレーンテキストエリアで使うとき、全部無効にするためクリックするのが手間だから一括でOFFにする機能がるとうれしい<br>→間違えた！テキストが1行・複数行が選べるからこれがプレーンテキストとして使う　間違えがち<br>テーブルがない<br>嬉しい機能<br>カスタムフィールドの初期値が設定できる<br>アップロードした画像に対してタイトル・altが設定できる<br>フィールドの種類が多い<br>添付の種類が豊富（上限は50MB）<br>選択肢がラベルと値で設定できる。ただラベルは取得できないので、管理画面だけのもの。<br>型が用意されてる</p><ul><li>Content: コンテンツ共通のプロパティが定義されています</li><li>Image: 画像フィールドのプロパティが定義されています</li><li>File: ファイルフィールドのプロパティが定義されています</li></ul><p><br></p>

<p>Newtには登録していたものの、最近はmicroCMSばかり使っていました。そこで、久々に<a href="https://www.newt.so/" target="_blank" rel="noopener noreferrer nofollow">Newt</a>を使ってみることにしました。</p><p>このサイトの記事はmicroCMSを利用して作っています。この記事はmicroCMSと同じフィールド構成でNewtとAstroを使って実装した備忘録です。</p><p>また、microCMSからNewtへ置き換えた際の違いや、Newtの魅力・便利な点も合わせてまとめました。</p><p><span class="txt-small">※この記事では、Newtの登録や初期設定に関する説明は省略しています。</span></p>

<h2 id="h638b0e78b5">モデルとフィールド構成</h2><p>Newtでは、モデルとフィールドは以下のように構成しました（一部フィールドは除いています）。</p><ul><li><strong>モデル</strong>＝microCMSでいう「コンテンツ（API）」</li><li><strong>フィールド</strong>＝microCMSでいう「APIスキーマ（フィールド）」</li></ul><h3 id="h59904525d3">モデル：ブログ</h3><table><tbody><tr><th colspan="1" rowspan="1"><p>項目</p></th><th colspan="1" rowspan="1"><p>フィールドの種類</p></th></tr><tr><td colspan="1" rowspan="1"><p>タイトル</p></td><td colspan="1" rowspan="1"><p>テキスト（１行）</p></td></tr><tr><td colspan="1" rowspan="1"><p>スラッグ</p></td><td colspan="1" rowspan="1"><p>テキスト（１行）</p></td></tr><tr><td colspan="1" rowspan="1"><p>カテゴリー</p></td><td colspan="1" rowspan="1"><p>参照（複数値）</p></td></tr><tr><td colspan="1" rowspan="1"><p>サムネイル画像</p></td><td colspan="1" rowspan="1"><p>画像</p></td></tr><tr><td colspan="1" rowspan="1"><p>セクション</p></td><td colspan="1" rowspan="1"><p>マルチタイプ（複数値）</p></td></tr><tr><td colspan="1" rowspan="1"><p>メタデータ</p></td><td colspan="1" rowspan="1"><p>マルチタイプ</p></td></tr></tbody></table><h3 id="h8996246fe1">モデル：カテゴリ</h3><table><tbody><tr><th colspan="1" rowspan="1"><p>項目</p></th><th colspan="1" rowspan="1"><p>フィールドの種類</p></th></tr><tr><td colspan="1" rowspan="1"><p>タイトル</p></td><td colspan="1" rowspan="1"><p>テキスト（１行）</p></td></tr><tr><td colspan="1" rowspan="1"><p>スラッグ</p></td><td colspan="1" rowspan="1"><p>テキスト（１行）</p></td></tr><tr><td colspan="1" rowspan="1"><p>イメージカラー</p></td><td colspan="1" rowspan="1"><p>テキスト（１行）</p></td></tr></tbody></table><h2 id="h728eb3ccf2">Newtのフィールドのいいところ</h2><p>microCMSと似ている部分も多いNewtですが、異なるポイントもいくつかあります。ここではその違いに注目していきます。</p><h3 id="h59ae091fe2">単一と複数</h3><p>Newtでは、フィールドの種類に対して「単一」または「複数」を選択できる仕様になっています。<br>例えば、テキストフィールドの場合：</p><ul><li><strong>microCMSの場合</strong>：1行テキストとテキストエリアは別のフィールドとして用意されている。</li><li><strong>Newtの場合</strong>：テキストフィールドを選択した後に、「1行」または「複数行」を設定可能。</li></ul><p>この仕組みは画像や参照フィールドでも同様で、用途に応じて柔軟に選択できます。</p>

<h3 id="hb76587122e">メディア</h3><p>Newtでは、アップロードしたメディア自体に次のような情報を設定可能です。</p><ul><li><strong>タイトル</strong></li><li><strong>代替テキスト</strong></li><li><strong>説明</strong></li><li><strong>タグ</strong></li></ul><p>画像のalt用フィールドを別途作成する手間を省けます。さらに、画像フィールドに設定したメディアから、このmetadataを取得することもできます。</p><p>ただし、これらの情報は現在の仕様では<strong>メディア管理画面からしか編集できない</strong>ため、記事編集画面から直接編集できるとさらに便利だと感じました。</p>

<h3 id="h73f1d28c80">ファイル</h3><p>Newtではフリープランでもファイルのアップロードが可能です。</p>

<h3 id="h935070b9ac">選択フィールド</h3><ul><li><strong>Label</strong>（管理画面に表示される項目名）</li><li><strong>Value</strong>（戻り値として取得される値）</li></ul><p>LabelはAPIから取得することはできませんが、管理画面用に編集者がわかりやすい名前を設定できる点が便利です。</p>

<h3 id="h71c388d8f7">マルチタイプ</h3><p>Newtでは、microCMSでいう「繰り返しフィールド」が「マルチタイプ」として提供されています。</p><ul><li><strong>デフォルト値</strong>：初めからフィールドを表示させておくことが可能。</li><li><strong>表示タイプ</strong>：<ul><li>アコーディオン（デフォルトで閉じた状態、上下入れ替えがしやすい）</li><li>フラット（全て展開された状態、内容を一目で把握しやすい）</li></ul></li></ul><p>どちらを使うかは好みによりますが、それぞれ利点があるので用途に応じて選択するといいと思います。</p>

<h2 id="h36d3f57ef6">NewtのJavaScript SDK を使った記事表示</h2><p>Newtには <code>newt-client-js</code> というJavaScript SDKが提供されています。このSDKを利用して、記事データを取得し、ページに表示する方法を見ていきます。</p><pre><code>npm i newt-client-js</code></pre><h3 id="hc9a34d5296">型定義</h3><p>NewtのSDKでは、TypeScriptを活用できるよう、型が用意されています。これはmicroCMSのSDKで提供される型（例: <code>MicroCMSImage</code>, <code>MicroCMSContentId</code>, <code>MicroCMSDate</code>）に似ています。</p><blockquote><ul><li><strong>Content</strong>: コンテンツ共通のプロパティを定義した型。</li><li><strong>Image</strong>: 画像フィールドのプロパティを定義した型。</li><li><strong>File</strong>: ファイルフィールドのプロパティを定義した型。</li></ul><p><a href="https://www.newt.so/docs/js-sdk#TypeScript%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B%E5%A0%B4%E5%90%88" target="_new">Newt JavaScript SDK - TypeScriptでの利用方法</a></p></blockquote><h3 id="hc25b523cee">クライアントの作成とコンテンツ一覧の取得</h3><p>NewtのJavaScript SDKを使用してクライアントを作成し、コンテンツ一覧を取得する関数を実装しました。</p>

import { createClient } from 'newt-client-js'

export interface Blog extends Content {
  title: string
  slug: string
  category: Category[]
  thumb?: Image
  section?: (Richeditor|HtmlCode|Highlight|Gallery)[]
  metadata?: Metadata
}

export const newtClient = createClient({
  spaceUid: import.meta.env.NEWT_SPACE_UID,
  token: import.meta.env.NEWT_CDN_API_TOKEN,
  apiType: 'cdn',
})

export const blogList = async() => {
  const {items} = await newtClient.getContents<Blog>({
    appUid: 'YOUR_APP_UID ',  //コンテンツのApp UID
    modelUid: 'YOUR_MODEL_UID',  //コンテンツのモデルUID
  })
  return items
}

<h3 id="hfd99af07cb">Astroで記事詳細ページの作成</h3><p>記事一覧を取得し、slug フィールドを基に記事詳細ページのパスを生成する方法を紹介します。</p><h4 id="h6f187338d7">パス生成の仕組み</h4><p>以下のコードは、記事一覧を取得して各記事の slug を使って動的なパスを生成しています。<br><span class="txt-small">※実際のフィールド定義は簡略化しています。</span></p>

---
import Layout from "../../layouts/Layout.astro";
import { blogList } from "../../lib/newt";
import dayjs from "dayjs";
import "dayjs/locale/ja";

export const getStaticPaths = async () => {
  const posts = await blogList();
  const paths = posts.map((post) => {
    return {
      params: {
        path: `entry/${post.slug}`,
      },
      props: {
        post,
      },
    };
  });
  return paths;
};
const { post } = Astro.props;
const { title, category, section, _sys } = post;
const datetime = dayjs(_sys.createdAt).locale("ja").format("YYYY-MM-DD");
const publishDate = dayjs(_sys.createdAt).locale("ja").format("YYYY/MM/DD");
---

<Layout>
  <h1>{title}</h1>
  <time datetime={datetime}>{publishDate}</time>
  <ul>
    {category.map((cat) => <li>{cat.title}</li>)}
  </ul>
  {
    section &&
      section.map((sec) => {
        switch (sec.type) {
          case "richeditor":
            return <div set:html={sec.data.body} />;
          case "htmlCode":
            return <div set:html={sec.data.htmlCode} />;
          case "highlight":
            return (
              <div>
                <p>{sec.data.lang}</p>
                <p>{sec.data.filename}</p>
                <pre>
                  <code>{sec.data.body}</code>
                </pre>
              </div>
            );
          case "gallery":
            return (
              <div>
                {sec.data.images.map((img) => (
                  <img src={img.src} alt={img.altText} />
                ))}
              </div>
            );

          default:
            return null;
        }
      })
  }
</Layout>

<p>📝参考</p><ul><li><a href="https://www.newt.so/docs/tutorials/get-contents-in-astro" target="_blank" rel="noopener noreferrer nofollow">NewtとAstro v4を利用してブログを作成する</a></li><li><a href="https://www.newt.so/docs/js-sdk" target="_blank" rel="noopener noreferrer nofollow">SDK | ガイド: CDN API・Newt API | ヘッドレスCMS「Newt」</a></li></ul>