https://codedchords.dev • This is a web feed, also known as an Atom feed. Subscribe by copying the URL from the address bar into your newsreader. Visit About Feeds to learn more and get started. It's free. Visit website Recent posts Updated on $DATE date Web A personal blog Zola2025-04-07T00:00:00+00:00https://codedchords.dev/tags/web/atom.xml 2025-04-07T00:00:00+00:00 2025-04-07T00:00:00+00:00 Toshiyuki Yoshida https://codedchords.dev/blog/2025/04/open-graph-protocol/ <h2 id="Open_Graph_Protocolとは">Open Graph Protocolとは</h2> <p>Open Graph Protocol(OGPとも呼ばれます)は、Webページの内容をSNSなどで共有する際に、正確な情報を 表示するための仕組みです。 2010年にFacebookが開発し、現在は多くのWebサイトで採用されています。</p> <p>OGPでは、HTMLのhead内にmeta要素を配置し、「og:」というプレフィックスを持つプ ロパティを使用して、ページの様々な情報を定義します。 主な要素としては、ページのタイトル、ページの説明、サムネイル画像のURL、 正規URLなどがあります。</p> <p>これらの情報を適切に設定することで、FacebookやTwitter、LINEなどのSNSでリンクがシェアされた際に、 単なるURLではなく、タイトル、説明文、画像を含む魅力的なプレビューカードが表示されます。</p> <h2 id="このブログの対応">このブログの対応</h2> <p>記事ページのメタ情報を管理している<code>lib/metadata.ts</code>を修正してOGPに対応するヘッダを 追加するロジックを入れました。</p> <pre class="giallo z-code"><code data-lang="javascript"><span class="giallo-l"><span class="z-keyword z-storage z-type">export function</span><span class="z-entity z-name z-function"> generateArticleMetadata</span><span class="z-punctuation">(</span></span> <span class="giallo-l"><span class="z-variable z-parameter"> article</span><span class="z-keyword z-operator">:</span><span class="z-entity z-name z-type"> Article</span><span class="z-keyword z-operator"> &amp;</span><span class="z-punctuation"> {</span><span class="z-variable z-object z-property"> path</span><span class="z-keyword z-operator">?:</span><span class="z-support z-type z-primitive"> string</span><span class="z-punctuation"> },</span></span> <span class="giallo-l"><span class="z-punctuation">)</span><span class="z-keyword z-operator">:</span><span class="z-entity z-name z-type"> Metadata</span><span class="z-punctuation"> {</span></span> <span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> // pathがある場合はURLを生成</span></span> <span class="giallo-l"><span class="z-storage z-type"> const</span><span class="z-variable z-other z-constant z-js"> url</span><span class="z-keyword z-operator"> =</span><span class="z-source"> article</span><span class="z-punctuation z-accessor">.</span><span class="z-variable z-other z-property z-js">path</span></span> <span class="giallo-l"><span class="z-keyword z-operator"> ?</span><span class="z-entity z-name z-function"> generateArticleUrl</span><span class="z-source">(article</span><span class="z-punctuation z-accessor">.</span><span class="z-variable z-other z-property z-js">date</span><span class="z-punctuation">,</span><span class="z-source"> article</span><span class="z-punctuation z-accessor">.</span><span class="z-variable z-other z-property z-js z-source">path)</span></span> <span class="giallo-l"><span class="z-keyword z-operator"> :</span><span class="z-constant z-language z-undefined z-js"> undefined</span><span class="z-punctuation">;</span></span> <span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> // OGP画像のURL</span></span> <span class="giallo-l"><span class="z-storage z-type"> const</span><span class="z-variable z-other z-constant z-js"> ogImageUrl</span><span class="z-keyword z-operator"> =</span><span class="z-entity z-name z-function"> generateOgImageUrl</span><span class="z-source">()</span><span class="z-punctuation">;</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-keyword"> return</span><span class="z-punctuation"> {</span></span> <span class="giallo-l"><span class="z-source"> title</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-source"> article</span><span class="z-punctuation z-accessor">.</span><span class="z-variable z-other z-property z-js">title</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-source"> description</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-source"> article</span><span class="z-punctuation z-accessor">.</span><span class="z-variable z-other z-property z-js">description</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-source"> authors</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-source"> [</span><span class="z-punctuation">{</span><span class="z-source"> name</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-source"> article</span><span class="z-punctuation z-accessor">.</span><span class="z-variable z-other z-property z-js">author</span><span class="z-keyword z-operator"> ||</span><span class="z-source"> siteConfig</span><span class="z-punctuation z-accessor">.</span><span class="z-variable z-other z-property z-js">author</span><span class="z-punctuation"> }</span><span class="z-source">]</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> // OGP設定</span></span> <span class="giallo-l"><span class="z-source"> openGraph</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-punctuation"> {</span></span> <span class="giallo-l"><span class="z-source"> siteName</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-source"> siteConfig</span><span class="z-punctuation z-accessor">.</span><span class="z-variable z-other z-property z-js">sitename</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-source"> title</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-source"> article</span><span class="z-punctuation z-accessor">.</span><span class="z-variable z-other z-property z-js">title</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-source"> description</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-source"> article</span><span class="z-punctuation z-accessor">.</span><span class="z-variable z-other z-property z-js">description</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-source"> type</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-punctuation z-definition z-string z-string"> &quot;article&quot;</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-keyword z-operator"> ...</span><span class="z-source z-variable z-other z-readwrite">(url</span><span class="z-keyword z-operator"> &amp;&amp;</span><span class="z-punctuation"> {</span><span class="z-variable z-other z-readwrite"> url</span><span class="z-punctuation"> }</span><span class="z-source">)</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-source"> images</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-source"> [</span></span> <span class="giallo-l"><span class="z-punctuation"> {</span></span> <span class="giallo-l"><span class="z-source"> url</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-variable z-other z-readwrite"> ogImageUrl</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-source"> width</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-constant z-numeric"> 1200</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-source"> height</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-constant z-numeric"> 630</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-source"> alt</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-source"> siteConfig</span><span class="z-punctuation z-accessor">.</span><span class="z-variable z-other z-property z-js">sitename</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-punctuation"> },</span></span> <span class="giallo-l"><span class="z-source"> ]</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-punctuation"> },</span></span> <span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> // 他にも必要なメタデータがあれば追加可能</span></span> <span class="giallo-l"><span class="z-punctuation"> };</span></span> <span class="giallo-l"><span class="z-punctuation">}</span></span></code></pre> <p>Next.jsがOGPのヘッダを生成する<code>openGraph</code>関数を提供しているので呼び出してい るだけです。記事自体のフルパスが必要ですが、面倒なので記事内でパスを渡すよう にしました。</p> <p>また、MDXファイル内の<code>Image</code>で参照している画像のフルパスはこの処理では得られ ないので、仕方なく固定の画像を指定しています。</p> <h2 id="まとめ">まとめ</h2> <p>自身はたまにBlueskeyにリンクを投稿するくらいなので、それほど必要性は高くあり ませんが、実装自体は簡単なので対応しているの越したことはありませんね。</p>

このブログは適当に実装したので、Open Graph Protocolに対応してしていませんでした。今更ですが、Open Graph Protorol対応しSNSでリンクを投稿した時に記事情報が表示できるようにしてみました。

2025-03-25T00:00:00+00:00 2025-03-25T00:00:00+00:00 Toshiyuki Yoshida https://codedchords.dev/blog/2025/03/creating-sitemap/ <p>ウェブサイトを検索エンジンに正しくインデックスしてもらうためには、<code>sitemap.xml</code>と<code>robots.txt</code>の適切な実装が不可欠です。 このブログではNext.jsのApp Routerを使用して、これらのファイルを動的に生成するよう実装しました。</p> <p>この記事では、その実装方法とSEOの観点からの注意点を説明します。</p> <h2 id="1._sitemap.xml_実装を実装する">1. sitemap.xml 実装を実装する</h2> <h3 id="1.1._sitemap.xmlとは">1.1. sitemap.xmlとは</h3> <p><code>sitemap.xml</code>は、ウェブサイト内の各ページのURLや更新頻度、優先度などの情報をまとめたXMLファイルです。 これにより、検索エンジンのクローラーがサイト構造を理解しやすくなり、効率的なインデックス作成が可能になります。</p> <p>主な要素は以下の通りです。</p> <ul> <li><code>&lt;loc&gt;</code> - ページのURL</li> <li><code>&lt;lastmod&gt;</code> - 最終更新日</li> <li><code>&lt;changefreq&gt;</code> - 更新頻度</li> <li><code>&lt;priority&gt;</code> - 重要度</li> </ul> <h3 id="1.2._sitemap.xml_の実装例">1.2. sitemap.xml の実装例</h3> <p>Next.jsのApp Routerでは、ルートハンドラーを使用して動的にsitemap.xmlを生成できます。 以下はこのブログでの実装例です。</p> <pre class="giallo z-code"><code data-lang="typescript"><span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment">// src/app/sitemap.xml/route.ts</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-keyword z-storage z-modifier z-storage z-type">export async function</span><span class="z-entity z-name z-function"> GET</span><span class="z-punctuation">() {</span></span> <span class="giallo-l"><span class="z-storage z-type"> const</span><span class="z-variable z-other z-constant z-ts"> siteUrl</span><span class="z-keyword z-operator"> =</span><span class="z-source"> process</span><span class="z-punctuation z-accessor">.</span><span class="z-source">env</span><span class="z-punctuation z-accessor">.</span><span class="z-variable z-other z-constant">NEXT_PUBLIC_SITE_URL</span><span class="z-punctuation">;</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-keyword"> if</span><span class="z-source"> (</span><span class="z-keyword z-operator">!</span><span class="z-variable z-other z-readwrite z-source">siteUrl)</span><span class="z-punctuation"> {</span></span> <span class="giallo-l"><span class="z-keyword"> throw</span><span class="z-entity z-name z-function"> Error</span><span class="z-source">(</span><span class="z-punctuation z-definition z-string z-string">&quot;Missing NEXT_PUBLIC_SITE_URL environment variable&quot;</span><span class="z-source">)</span><span class="z-punctuation">;</span></span> <span class="giallo-l"><span class="z-punctuation"> }</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> // 記事のIDを取得する関数</span></span> <span class="giallo-l"><span class="z-storage z-type"> function</span><span class="z-entity z-name z-function"> getArticleIds</span><span class="z-punctuation">() {</span></span> <span class="giallo-l"><span class="z-storage z-type"> const</span><span class="z-variable z-other z-constant z-ts"> articlesDir</span><span class="z-keyword z-operator"> =</span><span class="z-source"> path</span><span class="z-punctuation z-accessor">.</span><span class="z-entity z-name z-function">join</span><span class="z-source">(process</span><span class="z-punctuation z-accessor">.</span><span class="z-entity z-name z-function">cwd</span><span class="z-source">()</span><span class="z-punctuation">,</span><span class="z-punctuation z-definition z-string z-string"> &quot;src/app/articles&quot;</span><span class="z-source">)</span><span class="z-punctuation">;</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-storage z-type"> function</span><span class="z-entity z-name z-function"> scanDir</span><span class="z-punctuation">(</span><span class="z-variable z-parameter">dir</span><span class="z-keyword z-operator">:</span><span class="z-support z-type z-primitive"> string</span><span class="z-punctuation">,</span><span class="z-variable z-parameter"> baseDir</span><span class="z-keyword z-operator"> =</span><span class="z-punctuation z-definition z-string"> &quot;&quot;</span><span class="z-punctuation">) {</span></span> <span class="giallo-l"><span class="z-storage z-type"> let</span><span class="z-variable z-other z-readwrite"> results</span><span class="z-keyword z-operator">:</span><span class="z-support z-type z-primitive"> string</span><span class="z-meta z-type">[]</span><span class="z-keyword z-operator"> =</span><span class="z-source"> []</span><span class="z-punctuation">;</span></span> <span class="giallo-l"><span class="z-storage z-type"> const</span><span class="z-variable z-other z-constant z-ts"> entries</span><span class="z-keyword z-operator"> =</span><span class="z-source"> fs</span><span class="z-punctuation z-accessor">.</span><span class="z-entity z-name z-function">readdirSync</span><span class="z-source z-variable z-other z-readwrite">(dir</span><span class="z-punctuation">, {</span><span class="z-source"> withFileTypes</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-constant z-language z-boolean"> true</span><span class="z-punctuation"> }</span><span class="z-source">)</span><span class="z-punctuation">;</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-keyword"> for</span><span class="z-source"> (</span><span class="z-storage z-type">const</span><span class="z-variable z-other z-constant z-ts"> entry</span><span class="z-keyword z-operator z-expression z-of z-ts"> of</span><span class="z-variable z-other z-readwrite z-source"> entries)</span><span class="z-punctuation"> {</span></span> <span class="giallo-l"><span class="z-storage z-type"> const</span><span class="z-variable z-other z-constant z-ts"> fullPath</span><span class="z-keyword z-operator"> =</span><span class="z-source"> path</span><span class="z-punctuation z-accessor">.</span><span class="z-entity z-name z-function">join</span><span class="z-source z-variable z-other z-readwrite">(dir</span><span class="z-punctuation">,</span><span class="z-source"> entry</span><span class="z-punctuation z-accessor">.</span><span class="z-variable z-other z-property z-ts z-source">name)</span><span class="z-punctuation">;</span></span> <span class="giallo-l"><span class="z-storage z-type"> const</span><span class="z-variable z-other z-constant z-ts"> relativePath</span><span class="z-keyword z-operator"> =</span><span class="z-source"> path</span><span class="z-punctuation z-accessor">.</span><span class="z-entity z-name z-function">join</span><span class="z-source z-variable z-other z-readwrite">(baseDir</span><span class="z-punctuation">,</span><span class="z-source"> entry</span><span class="z-punctuation z-accessor">.</span><span class="z-variable z-other z-property z-ts z-source">name)</span><span class="z-punctuation">;</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-keyword"> if</span><span class="z-source"> (entry</span><span class="z-punctuation z-accessor">.</span><span class="z-entity z-name z-function">isDirectory</span><span class="z-source">())</span><span class="z-punctuation"> {</span></span> <span class="giallo-l"><span class="z-variable z-other z-readwrite"> results</span><span class="z-keyword z-operator"> =</span><span class="z-source"> [</span><span class="z-keyword z-operator">...</span><span class="z-variable z-other z-readwrite">results</span><span class="z-punctuation">,</span><span class="z-keyword z-operator"> ...</span><span class="z-entity z-name z-function">scanDir</span><span class="z-source z-variable z-other z-readwrite">(fullPath</span><span class="z-punctuation">,</span><span class="z-variable z-other z-readwrite z-source"> relativePath)]</span><span class="z-punctuation">;</span></span> <span class="giallo-l"><span class="z-punctuation"> }</span><span class="z-keyword"> else if</span><span class="z-source"> (entry</span><span class="z-punctuation z-accessor">.</span><span class="z-variable z-other z-property z-ts">name</span><span class="z-keyword z-operator"> ===</span><span class="z-punctuation z-definition z-string z-string"> &quot;page.mdx&quot;</span><span class="z-source">)</span><span class="z-punctuation"> {</span></span> <span class="giallo-l"><span class="z-source"> results</span><span class="z-punctuation z-accessor">.</span><span class="z-entity z-name z-function">push</span><span class="z-source z-variable z-other z-readwrite">(baseDir)</span><span class="z-punctuation">;</span></span> <span class="giallo-l"><span class="z-punctuation"> }</span></span> <span class="giallo-l"><span class="z-punctuation"> }</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-keyword"> return</span><span class="z-variable z-other z-readwrite"> results</span><span class="z-punctuation">;</span></span> <span class="giallo-l"><span class="z-punctuation"> }</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-keyword"> return</span><span class="z-entity z-name z-function"> scanDir</span><span class="z-source z-variable z-other z-readwrite">(articlesDir)</span><span class="z-punctuation">;</span></span> <span class="giallo-l"><span class="z-punctuation"> }</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-storage z-type"> const</span><span class="z-variable z-other z-constant z-ts"> articleIds</span><span class="z-keyword z-operator"> =</span><span class="z-entity z-name z-function"> getArticleIds</span><span class="z-source">()</span><span class="z-punctuation">;</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> // 最新の記事の日付を取得する関数</span></span> <span class="giallo-l"><span class="z-storage z-type"> function</span><span class="z-entity z-name z-function"> getLatestArticleDate</span><span class="z-punctuation">() {</span></span> <span class="giallo-l"><span class="z-storage z-type"> let</span><span class="z-variable z-other z-readwrite"> latestDate</span><span class="z-keyword z-operator"> =</span><span class="z-keyword z-operator z-new"> new</span><span class="z-entity z-name z-function"> Date</span><span class="z-source">(</span><span class="z-constant z-numeric">0</span><span class="z-source">)</span><span class="z-punctuation">;</span><span class="z-punctuation z-definition z-comment z-comment"> // 1970-01-01</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-keyword"> for</span><span class="z-source"> (</span><span class="z-storage z-type">const</span><span class="z-variable z-other z-constant z-ts"> id</span><span class="z-keyword z-operator z-expression z-of z-ts"> of</span><span class="z-variable z-other z-readwrite z-source"> articleIds)</span><span class="z-punctuation"> {</span></span> <span class="giallo-l"><span class="z-keyword"> try</span><span class="z-punctuation"> {</span></span> <span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> // ファイルから直接コンテンツを読み込む</span></span> <span class="giallo-l"><span class="z-storage z-type"> const</span><span class="z-variable z-other z-constant z-ts"> mdxPath</span><span class="z-keyword z-operator"> =</span><span class="z-source"> path</span><span class="z-punctuation z-accessor">.</span><span class="z-entity z-name z-function">join</span><span class="z-source">(</span></span> <span class="giallo-l"><span class="z-source"> process</span><span class="z-punctuation z-accessor">.</span><span class="z-entity z-name z-function">cwd</span><span class="z-source">()</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-punctuation z-definition z-string z-string"> &quot;src/app/articles&quot;</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-variable z-other z-readwrite"> id</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-punctuation z-definition z-string z-string"> &quot;page.mdx&quot;</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-source"> )</span><span class="z-punctuation">;</span></span> <span class="giallo-l"><span class="z-storage z-type"> const</span><span class="z-variable z-other z-constant z-ts"> mdxContent</span><span class="z-keyword z-operator"> =</span><span class="z-source"> fs</span><span class="z-punctuation z-accessor">.</span><span class="z-entity z-name z-function">readFileSync</span><span class="z-source z-variable z-other z-readwrite">(mdxPath</span><span class="z-punctuation">,</span><span class="z-punctuation z-definition z-string z-string"> &quot;utf-8&quot;</span><span class="z-source">)</span><span class="z-punctuation">;</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> // 日付を抽出</span></span> <span class="giallo-l"><span class="z-storage z-type"> const</span><span class="z-variable z-other z-constant z-ts"> dateMatch</span><span class="z-keyword z-operator"> =</span><span class="z-source"> mdxContent</span><span class="z-punctuation z-accessor">.</span><span class="z-entity z-name z-function">match</span><span class="z-source">(</span><span class="z-punctuation z-definition z-string z-begin">/</span><span class="z-string z-regexp z-ts">date:</span><span class="z-constant z-other z-character-class z-regexp">\s</span><span class="z-keyword z-operator z-quantifier z-regexp">*</span><span class="z-punctuation z-definition z-character-class z-regexp">[</span><span class="z-string z-regexp z-ts">&quot;&#39;</span><span class="z-punctuation z-definition z-character-class z-regexp">]</span><span class="z-punctuation z-definition z-group z-regexp">(</span><span class="z-constant z-other z-character-class z-regexp">.</span><span class="z-keyword z-operator z-quantifier z-regexp">+?</span><span class="z-punctuation z-definition z-group z-regexp">)</span><span class="z-punctuation z-definition z-character-class z-regexp">[</span><span class="z-string z-regexp z-ts">&quot;&#39;</span><span class="z-punctuation z-definition z-character-class z-regexp">]</span><span class="z-punctuation z-definition z-string z-end">/</span><span class="z-source">)</span><span class="z-punctuation">;</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-keyword"> if</span><span class="z-source z-variable z-other z-readwrite"> (dateMatch)</span><span class="z-punctuation"> {</span></span> <span class="giallo-l"><span class="z-storage z-type"> const</span><span class="z-variable z-other z-constant z-ts"> extractedDate</span><span class="z-keyword z-operator"> =</span><span class="z-keyword z-operator z-new"> new</span><span class="z-entity z-name z-function"> Date</span><span class="z-source z-variable z-other z-readwrite">(dateMatch[</span><span class="z-constant z-numeric">1</span><span class="z-source">])</span><span class="z-punctuation">;</span></span> <span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> // 有効な日付かつ最新の場合は更新</span></span> <span class="giallo-l"><span class="z-keyword"> if</span><span class="z-source"> (</span><span class="z-keyword z-operator">!</span><span class="z-entity z-name z-function">isNaN</span><span class="z-source">(extractedDate</span><span class="z-punctuation z-accessor">.</span><span class="z-entity z-name z-function">getTime</span><span class="z-source">())</span><span class="z-keyword z-operator"> &amp;&amp;</span><span class="z-variable z-other z-readwrite"> extractedDate</span><span class="z-keyword z-operator"> &gt;</span><span class="z-variable z-other z-readwrite z-source"> latestDate)</span><span class="z-punctuation"> {</span></span> <span class="giallo-l"><span class="z-variable z-other z-readwrite"> latestDate</span><span class="z-keyword z-operator"> =</span><span class="z-variable z-other z-readwrite"> extractedDate</span><span class="z-punctuation">;</span></span> <span class="giallo-l"><span class="z-punctuation"> }</span></span> <span class="giallo-l"><span class="z-punctuation"> }</span></span> <span class="giallo-l"><span class="z-punctuation"> }</span><span class="z-keyword"> catch</span><span class="z-source z-variable z-other z-readwrite"> (error)</span><span class="z-punctuation"> {</span></span> <span class="giallo-l"><span class="z-source"> console</span><span class="z-punctuation z-accessor">.</span><span class="z-entity z-name z-function">error</span><span class="z-source">(</span></span> <span class="giallo-l"><span class="z-punctuation z-definition z-string z-string"> `Error processing article </span><span class="z-punctuation">${</span><span class="z-variable z-other z-readwrite">id</span><span class="z-punctuation">}</span><span class="z-string z-punctuation z-definition z-string"> for date extraction:`</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-variable z-other z-readwrite"> error</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-source"> )</span><span class="z-punctuation">;</span></span> <span class="giallo-l"><span class="z-punctuation"> }</span></span> <span class="giallo-l"><span class="z-punctuation"> }</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> // ISO形式の日付を返す（例: 2025-03-25）</span></span> <span class="giallo-l"><span class="z-keyword"> return</span><span class="z-source"> latestDate</span><span class="z-punctuation z-accessor">.</span><span class="z-entity z-name z-function">toISOString</span><span class="z-source">()</span><span class="z-punctuation z-accessor">.</span><span class="z-entity z-name z-function">split</span><span class="z-source">(</span><span class="z-punctuation z-definition z-string z-string">&quot;T&quot;</span><span class="z-source">)[</span><span class="z-constant z-numeric">0</span><span class="z-source">]</span><span class="z-punctuation">;</span></span> <span class="giallo-l"><span class="z-punctuation"> }</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> // 最新記事の日付を取得</span></span> <span class="giallo-l"><span class="z-storage z-type"> const</span><span class="z-variable z-other z-constant z-ts"> latestArticleDate</span><span class="z-keyword z-operator"> =</span><span class="z-entity z-name z-function"> getLatestArticleDate</span><span class="z-source">()</span><span class="z-punctuation">;</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> // 静的ページのURL、changefreq、priority 設定</span></span> <span class="giallo-l"><span class="z-storage z-type"> const</span><span class="z-variable z-other z-constant z-ts"> staticPages</span><span class="z-keyword z-operator"> =</span><span class="z-source"> [</span></span> <span class="giallo-l"><span class="z-punctuation"> {</span></span> <span class="giallo-l"><span class="z-source"> url</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-punctuation z-definition z-string"> &quot;&quot;</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-source"> changefreq</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-punctuation z-definition z-string z-string"> &quot;daily&quot;</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-source"> priority</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-punctuation z-definition z-string z-string"> &quot;1.0&quot;</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-source"> lastmod</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-variable z-other z-readwrite"> latestArticleDate</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-punctuation"> },</span><span class="z-punctuation z-definition z-comment z-comment"> // ホームページ</span></span> <span class="giallo-l"><span class="z-punctuation"> {</span><span class="z-source"> url</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-punctuation z-definition z-string z-string"> &quot;/about&quot;</span><span class="z-punctuation">,</span><span class="z-source"> changefreq</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-punctuation z-definition z-string z-string"> &quot;monthly&quot;</span><span class="z-punctuation">,</span><span class="z-source"> priority</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-punctuation z-definition z-string z-string"> &quot;0.5&quot;</span><span class="z-punctuation"> },</span></span> <span class="giallo-l"><span class="z-punctuation"> {</span></span> <span class="giallo-l"><span class="z-source"> url</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-punctuation z-definition z-string z-string"> &quot;/articles&quot;</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-source"> changefreq</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-punctuation z-definition z-string z-string"> &quot;daily&quot;</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-source"> priority</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-punctuation z-definition z-string z-string"> &quot;0.9&quot;</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-source"> lastmod</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-variable z-other z-readwrite"> latestArticleDate</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-punctuation"> },</span><span class="z-punctuation z-definition z-comment z-comment"> // 記事一覧ページには最新記事の日付</span></span> <span class="giallo-l"><span class="z-punctuation"> {</span><span class="z-source"> url</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-punctuation z-definition z-string z-string"> &quot;/whisper&quot;</span><span class="z-punctuation">,</span><span class="z-source"> changefreq</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-punctuation z-definition z-string z-string"> &quot;daily&quot;</span><span class="z-punctuation">,</span><span class="z-source"> priority</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-punctuation z-definition z-string z-string"> &quot;0.4&quot;</span><span class="z-punctuation"> },</span></span> <span class="giallo-l"><span class="z-punctuation"> {</span><span class="z-source"> url</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-punctuation z-definition z-string z-string"> &quot;/uses&quot;</span><span class="z-punctuation">,</span><span class="z-source"> changefreq</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-punctuation z-definition z-string z-string"> &quot;monthly&quot;</span><span class="z-punctuation">,</span><span class="z-source"> priority</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-punctuation z-definition z-string z-string"> &quot;0.7&quot;</span><span class="z-punctuation"> },</span></span> <span class="giallo-l"><span class="z-punctuation"> {</span><span class="z-source"> url</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-punctuation z-definition z-string z-string"> &quot;/music&quot;</span><span class="z-punctuation">,</span><span class="z-source"> changefreq</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-punctuation z-definition z-string z-string"> &quot;monthly&quot;</span><span class="z-punctuation">,</span><span class="z-source"> priority</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-punctuation z-definition z-string z-string"> &quot;0.5&quot;</span><span class="z-punctuation"> },</span></span> <span class="giallo-l"><span class="z-source"> ]</span><span class="z-punctuation">;</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> // サイトマップXMLの作成</span></span> <span class="giallo-l"><span class="z-storage z-type"> let</span><span class="z-variable z-other z-readwrite"> sitemap</span><span class="z-keyword z-operator"> =</span><span class="z-punctuation z-definition z-string z-string"> `&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;</span></span> <span class="giallo-l"><span class="z-string">&lt;urlset xmlns=&quot;http://www.sitemaps.org/schemas/sitemap/0.9&quot;&gt;</span></span> <span class="giallo-l"><span class="z-punctuation z-definition z-string">`</span><span class="z-punctuation">;</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> // 静的ページをサイトマップに追加</span></span> <span class="giallo-l"><span class="z-keyword"> for</span><span class="z-source"> (</span><span class="z-storage z-type">const</span><span class="z-variable z-other z-constant z-ts"> page</span><span class="z-keyword z-operator z-expression z-of z-ts"> of</span><span class="z-variable z-other z-readwrite z-source"> staticPages)</span><span class="z-punctuation"> {</span></span> <span class="giallo-l"><span class="z-variable z-other z-readwrite"> sitemap</span><span class="z-keyword z-operator"> +=</span><span class="z-punctuation z-definition z-string z-string"> ` &lt;url&gt;</span></span> <span class="giallo-l"><span class="z-string"> &lt;loc&gt;</span><span class="z-punctuation">${</span><span class="z-variable z-other z-readwrite">siteUrl</span><span class="z-punctuation">}${</span><span class="z-variable">page</span><span class="z-punctuation z-accessor">.</span><span class="z-variable z-other z-property z-ts">url</span><span class="z-punctuation">}</span><span class="z-string">&lt;/loc&gt;</span></span> <span class="giallo-l"><span class="z-punctuation"> ${</span><span class="z-variable">page</span><span class="z-punctuation z-accessor">.</span><span class="z-variable z-other z-property z-ts">lastmod</span><span class="z-keyword z-operator"> ?</span><span class="z-punctuation z-definition z-string z-string"> `&lt;lastmod&gt;</span><span class="z-punctuation">${</span><span class="z-variable">page</span><span class="z-punctuation z-accessor">.</span><span class="z-variable z-other z-property z-ts">lastmod</span><span class="z-punctuation">}</span><span class="z-string z-punctuation z-definition z-string">&lt;/lastmod&gt;`</span><span class="z-keyword z-operator"> :</span><span class="z-punctuation z-definition z-string"> &quot;&quot;</span><span class="z-punctuation">}</span></span> <span class="giallo-l"><span class="z-string"> &lt;changefreq&gt;</span><span class="z-punctuation">${</span><span class="z-variable">page</span><span class="z-punctuation z-accessor">.</span><span class="z-variable z-other z-property z-ts">changefreq</span><span class="z-punctuation">}</span><span class="z-string">&lt;/changefreq&gt;</span></span> <span class="giallo-l"><span class="z-string"> &lt;priority&gt;</span><span class="z-punctuation">${</span><span class="z-variable">page</span><span class="z-punctuation z-accessor">.</span><span class="z-variable z-other z-property z-ts">priority</span><span class="z-punctuation">}</span><span class="z-string">&lt;/priority&gt;</span></span> <span class="giallo-l"><span class="z-string"> &lt;/url&gt;</span></span> <span class="giallo-l"><span class="z-punctuation z-definition z-string">`</span><span class="z-punctuation">;</span></span> <span class="giallo-l"><span class="z-punctuation"> }</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> // 記事ページをサイトマップに追加</span></span> <span class="giallo-l"><span class="z-keyword"> for</span><span class="z-source"> (</span><span class="z-storage z-type">const</span><span class="z-variable z-other z-constant z-ts"> id</span><span class="z-keyword z-operator z-expression z-of z-ts"> of</span><span class="z-variable z-other z-readwrite z-source"> articleIds)</span><span class="z-punctuation"> {</span></span> <span class="giallo-l"><span class="z-keyword"> try</span><span class="z-punctuation"> {</span></span> <span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> // ファイルから直接コンテンツを読み込む</span></span> <span class="giallo-l"><span class="z-storage z-type"> const</span><span class="z-variable z-other z-constant z-ts"> mdxPath</span><span class="z-keyword z-operator"> =</span><span class="z-source"> path</span><span class="z-punctuation z-accessor">.</span><span class="z-entity z-name z-function">join</span><span class="z-source">(</span></span> <span class="giallo-l"><span class="z-source"> process</span><span class="z-punctuation z-accessor">.</span><span class="z-entity z-name z-function">cwd</span><span class="z-source">()</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-punctuation z-definition z-string z-string"> &quot;src/app/articles&quot;</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-variable z-other z-readwrite"> id</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-punctuation z-definition z-string z-string"> &quot;page.mdx&quot;</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-source"> )</span><span class="z-punctuation">;</span></span> <span class="giallo-l"><span class="z-storage z-type"> const</span><span class="z-variable z-other z-constant z-ts"> mdxContent</span><span class="z-keyword z-operator"> =</span><span class="z-source"> fs</span><span class="z-punctuation z-accessor">.</span><span class="z-entity z-name z-function">readFileSync</span><span class="z-source z-variable z-other z-readwrite">(mdxPath</span><span class="z-punctuation">,</span><span class="z-punctuation z-definition z-string z-string"> &quot;utf-8&quot;</span><span class="z-source">)</span><span class="z-punctuation">;</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> // 日付を抽出</span></span> <span class="giallo-l"><span class="z-storage z-type"> const</span><span class="z-variable z-other z-constant z-ts"> dateMatch</span><span class="z-keyword z-operator"> =</span><span class="z-source"> mdxContent</span><span class="z-punctuation z-accessor">.</span><span class="z-entity z-name z-function">match</span><span class="z-source">(</span><span class="z-punctuation z-definition z-string z-begin">/</span><span class="z-string z-regexp z-ts">date:</span><span class="z-constant z-other z-character-class z-regexp">\s</span><span class="z-keyword z-operator z-quantifier z-regexp">*</span><span class="z-punctuation z-definition z-character-class z-regexp">[</span><span class="z-string z-regexp z-ts">&quot;&#39;</span><span class="z-punctuation z-definition z-character-class z-regexp">]</span><span class="z-punctuation z-definition z-group z-regexp">(</span><span class="z-constant z-other z-character-class z-regexp">.</span><span class="z-keyword z-operator z-quantifier z-regexp">+?</span><span class="z-punctuation z-definition z-group z-regexp">)</span><span class="z-punctuation z-definition z-character-class z-regexp">[</span><span class="z-string z-regexp z-ts">&quot;&#39;</span><span class="z-punctuation z-definition z-character-class z-regexp">]</span><span class="z-punctuation z-definition z-string z-end">/</span><span class="z-source">)</span><span class="z-punctuation">;</span></span> <span class="giallo-l"><span class="z-storage z-type"> let</span><span class="z-variable z-other z-readwrite"> date</span><span class="z-keyword z-operator"> =</span><span class="z-keyword z-operator z-new"> new</span><span class="z-entity z-name z-function"> Date</span><span class="z-source">()</span><span class="z-punctuation z-accessor">.</span><span class="z-entity z-name z-function">toISOString</span><span class="z-source">()</span><span class="z-punctuation z-accessor">.</span><span class="z-entity z-name z-function">split</span><span class="z-source">(</span><span class="z-punctuation z-definition z-string z-string">&quot;T&quot;</span><span class="z-source">)[</span><span class="z-constant z-numeric">0</span><span class="z-source">]</span><span class="z-punctuation">;</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-keyword"> if</span><span class="z-source z-variable z-other z-readwrite"> (dateMatch)</span><span class="z-punctuation"> {</span></span> <span class="giallo-l"><span class="z-storage z-type"> const</span><span class="z-variable z-other z-constant z-ts"> extractedDate</span><span class="z-keyword z-operator"> =</span><span class="z-keyword z-operator z-new"> new</span><span class="z-entity z-name z-function"> Date</span><span class="z-source z-variable z-other z-readwrite">(dateMatch[</span><span class="z-constant z-numeric">1</span><span class="z-source">])</span><span class="z-punctuation">;</span></span> <span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> // 有効な日付の場合のみ使用</span></span> <span class="giallo-l"><span class="z-keyword"> if</span><span class="z-source"> (</span><span class="z-keyword z-operator">!</span><span class="z-entity z-name z-function">isNaN</span><span class="z-source">(extractedDate</span><span class="z-punctuation z-accessor">.</span><span class="z-entity z-name z-function">getTime</span><span class="z-source">()))</span><span class="z-punctuation"> {</span></span> <span class="giallo-l"><span class="z-variable z-other z-readwrite"> date</span><span class="z-keyword z-operator"> =</span><span class="z-source"> extractedDate</span><span class="z-punctuation z-accessor">.</span><span class="z-entity z-name z-function">toISOString</span><span class="z-source">()</span><span class="z-punctuation z-accessor">.</span><span class="z-entity z-name z-function">split</span><span class="z-source">(</span><span class="z-punctuation z-definition z-string z-string">&quot;T&quot;</span><span class="z-source">)[</span><span class="z-constant z-numeric">0</span><span class="z-source">]</span><span class="z-punctuation">;</span></span> <span class="giallo-l"><span class="z-punctuation"> }</span></span> <span class="giallo-l"><span class="z-punctuation"> }</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-storage z-type"> const</span><span class="z-variable z-other z-constant z-ts"> articleUrl</span><span class="z-keyword z-operator"> =</span><span class="z-punctuation z-definition z-string"> `</span><span class="z-punctuation">${</span><span class="z-variable z-other z-readwrite">siteUrl</span><span class="z-punctuation">}</span><span class="z-string">/articles/</span><span class="z-punctuation">${</span><span class="z-variable z-other z-readwrite">id</span><span class="z-punctuation">}</span><span class="z-punctuation z-definition z-string">`</span><span class="z-punctuation">;</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-variable z-other z-readwrite"> sitemap</span><span class="z-keyword z-operator"> +=</span><span class="z-punctuation z-definition z-string z-string"> ` &lt;url&gt;</span></span> <span class="giallo-l"><span class="z-string"> &lt;loc&gt;</span><span class="z-punctuation">${</span><span class="z-variable z-other z-readwrite">articleUrl</span><span class="z-punctuation">}</span><span class="z-string">&lt;/loc&gt;</span></span> <span class="giallo-l"><span class="z-string"> &lt;lastmod&gt;</span><span class="z-punctuation">${</span><span class="z-variable z-other z-readwrite">date</span><span class="z-punctuation">}</span><span class="z-string">&lt;/lastmod&gt;</span></span> <span class="giallo-l"><span class="z-string"> &lt;changefreq&gt;monthly&lt;/changefreq&gt;</span></span> <span class="giallo-l"><span class="z-string"> &lt;priority&gt;1.0&lt;/priority&gt;</span></span> <span class="giallo-l"><span class="z-string"> &lt;/url&gt;</span></span> <span class="giallo-l"><span class="z-punctuation z-definition z-string">`</span><span class="z-punctuation">;</span></span> <span class="giallo-l"><span class="z-punctuation"> }</span><span class="z-keyword"> catch</span><span class="z-source z-variable z-other z-readwrite"> (error)</span><span class="z-punctuation"> {</span></span> <span class="giallo-l"><span class="z-source"> console</span><span class="z-punctuation z-accessor">.</span><span class="z-entity z-name z-function">error</span><span class="z-source">(</span><span class="z-punctuation z-definition z-string z-string">`Error processing article </span><span class="z-punctuation">${</span><span class="z-variable z-other z-readwrite">id</span><span class="z-punctuation">}</span><span class="z-string z-punctuation z-definition z-string"> for sitemap:`</span><span class="z-punctuation">,</span><span class="z-variable z-other z-readwrite z-source"> error)</span><span class="z-punctuation">;</span></span> <span class="giallo-l"><span class="z-punctuation"> }</span></span> <span class="giallo-l"><span class="z-punctuation"> }</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> // サイトマップを閉じる</span></span> <span class="giallo-l"><span class="z-variable z-other z-readwrite"> sitemap</span><span class="z-keyword z-operator"> +=</span><span class="z-punctuation z-definition z-string z-string"> `&lt;/urlset&gt;`</span><span class="z-punctuation">;</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-keyword"> return</span><span class="z-keyword z-operator z-new"> new</span><span class="z-entity z-name z-function"> Response</span><span class="z-source z-variable z-other z-readwrite">(sitemap</span><span class="z-punctuation">, {</span></span> <span class="giallo-l"><span class="z-source"> status</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-constant z-numeric"> 200</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-source"> headers</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-punctuation"> {</span></span> <span class="giallo-l"><span class="z-punctuation z-definition z-string z-string"> &quot;content-type&quot;</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-punctuation z-definition z-string z-string"> &quot;application/xml&quot;</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-punctuation z-definition z-string z-string"> &quot;cache-control&quot;</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-punctuation z-definition z-string z-string"> &quot;s-maxage=86400&quot;</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-punctuation"> },</span></span> <span class="giallo-l"><span class="z-punctuation"> }</span><span class="z-source">)</span><span class="z-punctuation">;</span></span> <span class="giallo-l"><span class="z-punctuation">}</span></span></code></pre> <p>この実装では以下のポイントに注目しています。</p> <ol> <li><strong>記事の動的探索</strong>: <code>getArticleIds()</code>関数を使用して、articlesディレクトリ内のすべてのMDXファイルを再帰的に探索</li> <li><strong>最新記事日付の検出</strong>: <code>getLatestArticleDate()</code>関数で、全記事から最新の記事日付を取得</li> <li><strong>記事以外の設定</strong>: 記事以外はパスが固定なので予め配列にパスと更新頻度を設定</li> <li><strong>更新頻度と重要度の最適化</strong>: 各ページタイプに適した<code>changefreq</code>と<code>priority</code>の値を設定 <ul> <li>個別記事ページ: <code>changefreq:monthly</code> と <code>priority: 1.0</code>で固定</li> <li>その他のページ: 配列でページの特性に応じて設定</li> </ul> </li> <li><strong>ホームと記事一覧に最新日付を適用</strong>: トップページと記事一覧ページには最新記事の日付を<code>lastmod</code>として使用し、これらのページが最新コンテンツを反映していることを検索エンジンに伝える</li> <li><strong>柔軟な構造</strong>: <code>page.lastmod</code>が存在する場合のみ<code>&lt;lastmod&gt;</code>タグを出力する条件付きレンダリング</li> <li><strong>キャッシュ設定</strong>: <code>cache-control</code>ヘッダーで24時間のキャッシュを設定</li> </ol> <h3 id="1.3._changefreq_の適切な設定">1.3. changefreq の適切な設定</h3> <p><code>changefreq</code>値は検索エンジンへのヒントであり、実際のクロール頻度を保証するものではありません。 一般的な設定の目安。</p> <ul> <li><code>always</code>: 常に変化するページ（リアルタイムデータ表示など）</li> <li><code>hourly</code>: 1時間単位で更新（ニュースページなど）</li> <li><code>daily</code>: 毎日更新（ブログトップ、記事一覧など）</li> <li><code>weekly</code>: 週単位で更新（プロジェクトページなど）</li> <li><code>monthly</code>: 月単位で更新（Aboutページなど）</li> <li><code>yearly</code>: 年単位で更新（利用規約など）</li> <li><code>never</code>: 更新されないページ（アーカイブなど）</li> </ul> <p>ページの実際の更新パターンに合わせた設定が望ましいですが、最終的なクロール頻度は検索エンジンのアルゴリズムが決定します。</p> <h3 id="1.4._lastmod_の意義と適切な設定">1.4. lastmod の意義と適切な設定</h3> <p><code>lastmod</code>はページの最終更新日を示し、以下の点で重要です。</p> <ul> <li><strong>クローラーの効率化</strong>: 検索エンジンは最近変更されたページを優先的に再クロールできる</li> <li><strong>インデックス更新の促進</strong>: 新しいコンテンツや変更を素早くインデックスに反映</li> <li><strong>鮮度シグナル</strong>: コンテンツの最新性を伝えるシグナルとなる可能性がある</li> </ul> <p>今回の実装では以下のアプローチを取っています。</p> <ol> <li><strong>個別記事</strong>: 記事のfrontmatterから日付を抽出して使用</li> <li><strong>ホームページと記事一覧</strong>: すべての記事から最新の日付を取得し反映（最新のコンテンツへのリンクを含むため）</li> <li><strong>その他のページ</strong>: 明示的に指定しない（検索エンジンが自動判断）</li> </ol> <p>この方法により、各ページが適切な最終更新日を持ち、検索エンジンが最新のコンテンツを効率的に処理できるようになります。</p> <h2 id="2._robots.txt_を実装する">2. robots.txt を実装する</h2> <p><code>robots.txt</code>はクローラーに対するルールを記述したファイルで、同様にルートハンドラーで実装できます。</p> <pre class="giallo z-code"><code data-lang="typescript"><span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment">// src/app/robots.txt/route.ts</span></span> <span class="giallo-l"><span class="z-keyword z-storage z-modifier z-storage z-type">export async function</span><span class="z-entity z-name z-function"> GET</span><span class="z-punctuation">() {</span></span> <span class="giallo-l"><span class="z-storage z-type"> const</span><span class="z-variable z-other z-constant z-ts"> siteUrl</span><span class="z-keyword z-operator"> =</span><span class="z-source"> process</span><span class="z-punctuation z-accessor">.</span><span class="z-source">env</span><span class="z-punctuation z-accessor">.</span><span class="z-variable z-other z-constant">NEXT_PUBLIC_SITE_URL</span><span class="z-punctuation">;</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-keyword"> if</span><span class="z-source"> (</span><span class="z-keyword z-operator">!</span><span class="z-variable z-other z-readwrite z-source">siteUrl)</span><span class="z-punctuation"> {</span></span> <span class="giallo-l"><span class="z-keyword"> throw</span><span class="z-entity z-name z-function"> Error</span><span class="z-source">(</span><span class="z-punctuation z-definition z-string z-string">&quot;Missing NEXT_PUBLIC_SITE_URL environment variable&quot;</span><span class="z-source">)</span><span class="z-punctuation">;</span></span> <span class="giallo-l"><span class="z-punctuation"> }</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-storage z-type"> const</span><span class="z-variable z-other z-constant z-ts"> robotsTxt</span><span class="z-keyword z-operator"> =</span><span class="z-punctuation z-definition z-string z-string"> `# https://www.robotstxt.org/robotstxt.html</span></span> <span class="giallo-l"><span class="z-string">User-agent: *</span></span> <span class="giallo-l"><span class="z-string">Allow: /</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-string"># Sitemaps</span></span> <span class="giallo-l"><span class="z-string">Sitemap: </span><span class="z-punctuation">${</span><span class="z-variable z-other z-readwrite">siteUrl</span><span class="z-punctuation">}</span><span class="z-string">/sitemap.xml</span></span> <span class="giallo-l"><span class="z-punctuation z-definition z-string">`</span><span class="z-punctuation">;</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-keyword"> return</span><span class="z-keyword z-operator z-new"> new</span><span class="z-entity z-name z-function"> Response</span><span class="z-source z-variable z-other z-readwrite">(robotsTxt</span><span class="z-punctuation">, {</span></span> <span class="giallo-l"><span class="z-source"> status</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-constant z-numeric"> 200</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-source"> headers</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-punctuation"> {</span></span> <span class="giallo-l"><span class="z-punctuation z-definition z-string z-string"> &quot;content-type&quot;</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-punctuation z-definition z-string z-string"> &quot;text/plain&quot;</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-punctuation z-definition z-string z-string"> &quot;cache-control&quot;</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-punctuation z-definition z-string z-string"> &quot;s-maxage=86400&quot;</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-punctuation"> },</span></span> <span class="giallo-l"><span class="z-punctuation"> }</span><span class="z-source">)</span><span class="z-punctuation">;</span></span> <span class="giallo-l"><span class="z-punctuation">}</span></span></code></pre> <p>この実装ではすべてのロボットにサイト全体へのアクセスを許可し、sitemap.xmlの場所を明示しています。</p> <h3 id="2.1._robots.txt実装上の注意点">2.1. robots.txt実装上の注意点</h3> <ol> <li><strong>環境変数の設定</strong>: <code>NEXT_PUBLIC_SITE_URL</code>を必ず設定する</li> <li><strong>キャッシュの検討</strong>: 頻繁に記事を追加する場合は、キャッシュ期間を短くする(個人のブログサイトなので現在の24時間で十分)</li> <li><strong>エラーハンドリング</strong>: 記事読み込みエラーが全体に影響しないようtry-catchで処理</li> <li><strong>検証</strong>: <a rel="external" href="https://search.google.com/search-console">Google Search Console</a>でサイトマップを登録し、エラーがないか確認する</li> </ol> <h2 id="3._まとめ">3. まとめ</h2> <p>適切な<code>sitemap.xml</code>と<code>robots.txt</code>の実装はSEOの基本です。Next.jsのApp Routerを使うと、これらのファイルを動的に生成できるため、コンテンツの増加に合わせて自動的に更新されるサイトマップを維持できます。</p> <p>更新頻度や優先度の設定は、サイトのコンテンツ特性を考慮して決定しましょう。最終的には検索エンジンのアルゴリズムが実際のクロール頻度を決定しますが、適切なヒントを提供することで、より効率的なインデックス作成を促進できます。</p>

うっかり実装を忘れていたsitemap.xmlとrobots.txtをNext.jsのApp Routerを使用して実装しました。合わせて、検索エンジン最適化のためのベストプラクティスもまとめています。

2025-03-24T00:00:00+00:00 2025-03-24T00:00:00+00:00 Toshiyuki Yoshida https://codedchords.dev/blog/2025/03/contentful/ <h2 id="Contentfulとは">Contentfulとは</h2> <p><a rel="external" href="https://www.contentful.com/">Contentful</a>は、ヘッドレスCMSのひとつで、コンテンツ管理とAPI配信に特化したサー ビスです。ウェブサイトやアプリ向けのコンテンツを一元管理し、RESTful APIや GraphQL APIを通じて、あらゆるデバイスやプラットフォームに配信できます。</p> <p>構造化されたコンテンツモデルを定義でき、マークダウンやリッチテキストエディタを備 え、多言語対応も可能です。開発者はフロントエンドを自由に構築でき、コンテンツ 編集者は直感的なインターフェースでコンテンツを管理できます。</p> <h2 id="「つぶやき」機能を作ってみる">「つぶやき」機能を作ってみる</h2> <p>ブログにContentfulを使って「つぶやき」機能をつけてみましょう。</p> <p>「つぶやき」コンテンツ自体はContentfulで管理します。 今回つぶやき投稿についてはContentfulのデフォルトのエディタを使用し、 特にコンテンツ作成用のアプリを作成しないことにします。</p> <p>このブログの「つぶやき機能」ではContentfulからRESTful APIを使って読み出し、 時系列で表示するものとします。Paginationも入れましょう。</p> <p>以下が実現イメージです。</p> <h2 id="ContentfulでのContent_Modelの定義">ContentfulでのContent Modelの定義</h2> <p>ContentfulではまずSpaceを作ることになりますが、今回は無料枠を利用する予定な ので、デフォルトのSpace <code>Blank</code>を使います。</p> <p>次に<strong>Content Model</strong>を作成します。今回は <code>whisper</code>と名付けました。 シンプルに以下のようにしました。idは現時点では不要ですが、将来編集アプリを作 る時に備えて一応用意しました。</p> <!-- textlint-disable --> <img src="https:&#x2F;&#x2F;codedchords.dev&#x2F;blog&#x2F;2025&#x2F;03&#x2F;contentful&#x2F;content-model.webp?h=792dde0896adc5c8ff31" alt="Content Model" width="981" height="292" loading="lazy" /><!-- textlint-enable --> <table><thead><tr><th>Name</th><th>Field ID</th><th>Attribute</th><th>Unique</th></tr></thead><tbody> <tr><td>id</td><td>id</td><td>Decimal</td><td>Y</td></tr> <tr><td>whisper_time</td><td>whisperTime</td><td>Date &amp; time</td><td>N</td></tr> <tr><td>whisper</td><td>whisper</td><td>Short text</td><td></td></tr> <tr><td>location</td><td>location</td><td>Location</td><td></td></tr> </tbody></table> <h2 id="Contentfulからのつぶやきの読み出し">Contentfulからのつぶやきの読み出し</h2> <p>Contentfulからのコンテンツの読み出しには、ContentfulのSDKを使用しています。</p> <p>基本的な読み出しは以下のようなコードになります。</p> <pre class="giallo z-code"><code data-lang="typescript"><span class="giallo-l"><span class="z-storage z-type">const</span><span class="z-variable z-other z-constant z-ts"> contentful</span><span class="z-keyword z-operator"> =</span><span class="z-entity z-name z-function"> require</span><span class="z-source">(</span><span class="z-punctuation z-definition z-string z-string">&quot;contentful&quot;</span><span class="z-source">)</span><span class="z-punctuation">;</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-storage z-type">const</span><span class="z-variable z-other z-constant z-ts"> client</span><span class="z-keyword z-operator"> =</span><span class="z-source"> contentful</span><span class="z-punctuation z-accessor">.</span><span class="z-entity z-name z-function">createClient</span><span class="z-source">(</span><span class="z-punctuation">{</span></span> <span class="giallo-l"><span class="z-source"> space</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-punctuation z-definition z-string z-string"> &quot;@@@@@@@&quot;</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-source"> environment</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-punctuation z-definition z-string z-string"> &quot;master&quot;</span><span class="z-punctuation">,</span><span class="z-punctuation z-definition z-comment z-comment"> // defaults to &#39;master&#39; if not set</span></span> <span class="giallo-l"><span class="z-source"> accessToken</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-punctuation z-definition z-string z-string"> &quot;@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@&quot;</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-punctuation">}</span><span class="z-source">)</span><span class="z-punctuation">;</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-variable z-other z-readwrite">client</span></span> <span class="giallo-l"><span class="z-punctuation z-accessor"> .</span><span class="z-entity z-name z-function">getEntry</span><span class="z-source">(</span><span class="z-punctuation z-definition z-string z-string">&quot;@@@@@@@@@@@@@@@@@@@@@@@@&quot;</span><span class="z-source">)</span></span> <span class="giallo-l"><span class="z-punctuation z-accessor"> .</span><span class="z-entity z-name z-function">then</span><span class="z-source">(</span><span class="z-punctuation">(</span><span class="z-variable z-parameter">entry</span><span class="z-punctuation">)</span><span class="z-storage z-type z-function z-arrow z-ts"> =&gt;</span><span class="z-source"> console</span><span class="z-punctuation z-accessor">.</span><span class="z-entity z-name z-function">log</span><span class="z-source z-variable z-other z-readwrite">(entry))</span></span> <span class="giallo-l"><span class="z-punctuation z-accessor"> .</span><span class="z-entity z-name z-function">catch</span><span class="z-source">(console</span><span class="z-punctuation z-accessor">.</span><span class="z-variable z-other z-property z-ts z-source">error)</span><span class="z-punctuation">;</span></span></code></pre> <p>実際には <code>space</code>, <code>environment</code>,<code>accessToken</code>などは、Amplifyのビルド設定で <code>.env</code>に書き込んで 環境変数から読み出しています。</p> <p>Paginationについては、まず10個を上限で読み出し改ページの際にレコードの開始位置を変更して実現しています。 当初はISR <sup class="footnote-reference" id="fr-2-1"><a href="#fn-2">1</a></sup> で実装しましたが、Contentfulとうまく連携できずWebhookでの実装も試しました。 しかし、いずれも思ったように動作しなかったりサーバーの負荷も高いため、 クライアントコンポーネントとしてクライアント側でカーソルを管理しページ制御を 実装しました。</p> <h2 id="Whisper実現イメージ">Whisper実現イメージ</h2> <p>このブログに「<strong>Whisper</strong>」というメニューを配置し、つぶやきを表示するように しました。以下のようなイメージです。</p> <p>Locationは緯度・軽度が記録されているので、緯度経度の表示とともに Open Street Mapへのリンクも埋め込みました。</p> <figure> <img src="whisper.webp" alt="Whisper実現イメージ" /> <figcaption>Whisper 実現イメージ</figcaption> </figure> <h2 id="まとめ">まとめ</h2> <p>今回は非常に簡単な実装でしたが、Paginationの部分でAmplifyとの互換性の問題で 苦労しました。Contentfulを使うとコンテンツ管理はContentfulに任せてしまえる ヘッドレスCMSのメリットは体感できました。</p> <p>次のようなメリットがあります。</p> <ol> <li><strong>フロントエンドの自由度</strong>：表示を司るフロントエンドとコンテンツ管理が分離されているため、任意の技術スタックでフロントエンドを構築可能</li> <li><strong>オムニチャネル対応</strong>：一度作成したコンテンツをウェブ、モバイル、IoTなど複数のプラットフォームに配信可能</li> <li><strong>開発の効率化</strong>：フロントエンドとバックエンドの開発を並行して進められる</li> <li><strong>パフォーマンス向上</strong>：静的サイト生成やCDN配信との相性が良く、高速なサイト表示が可能</li> <li><strong>スケーラビリティ</strong>：トラフィック増加にも柔軟に対応できる</li> <li><strong>セキュリティ強化</strong>：管理画面とフロントエンドが分離されているため攻撃対象が減少</li> <li><strong>将来性</strong>：新しいデバイスやプラットフォームにもフロントエンドだけ独立し ているため柔軟に対応できる</li> </ol> <p>今回作成したWhisper機能は大した意味がありませんが、 将来的につぶやき投稿機能も別途作ろうかなと思います。</p> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn-2"> <p>Incremental Static Regenerationの略。増分静的再生成とも言われ、静的生 成（SSG）の拡張機能。事前にビルド済みの静的ページを提供しながら、revalidateパラメータにより再検証間隔を設定し バックグラウンドで定期的に再生成する機能。 <a href="#fr-2-1">↩</a></p> </li> </ol> </section>

このブログでは直接App Router配下に記事を書いていますが、ヘッドレスCMSを使うことも検討して諦めました。今回、ライトにつぶやき程度であればできそうかなとContentfulを使って実装してみました。

2025-03-17T00:00:00+00:00 2025-03-17T00:00:00+00:00 Toshiyuki Yoshida https://codedchords.dev/blog/2025/03/nextjs-tailwindui-blog/ <h2 id="Micro.blogから移行">Micro.blogから移行</h2> <p>"<a rel="external" href="https://book.micro.blog/">Indie Microblogging</a>"というコンセプトに共感し、 X.comのようなプラットフォームに依存せず 長文の記事だけでなくマイクロブログも可能なMicro.blog を昨年から利用していました。 気軽なつぶやきと長文記事を同じプラットフォームで書けて、 Micro.blogのコミュニティーで海外のユーザーとのコミュニケーションも楽しくはありました。</p> <p>しかし、半年くらい使ってみると次のような点で不満を持ちました。</p> <ul> <li>長文記事とつぶやきが混在するので、読みづらい。そのためテーマをカスタマイズ して両者を分離したくなるが、よく考えると本末転倒でないかと思い始めた。Micro.blog自体も 長文を意識したSummery欄を追加したりLongformにフォーカスしたテーマが人気だったり、 コンセプトがブレてきていると感じてしまった。</li> <li>やはり、Compose画面が長文には向いておらず、エディタで編集して切り貼りすることが多 く非効率。海外ユーザーはMarsEditを使っているユーザーが多いようだが、 リッチテキストを好きになれない。</li> <li>Micro.blogは独自の機能とプラグインとして提供されているテーマ、バックエンドでHugo で構成されており、それぞれの依存からカスタマイズ時の制約が大きく独自のノウハ ウが必要となる。</li> </ul> <h2 id="モダンな技術スタックでブログ">モダンな技術スタックでブログ</h2> <p>先日に遊びでNext.js + Tailwind CSSでPortfolioサイトを作りましたが、 CMSのような制約がなく、コードで部品を書いていける体験が 楽しかったのでブログも同じような技術スタックで構成することにしました。</p> <p>Next.jsベースでのブログのStarter Kitのようなものはいくつか存在しますが、 興味から有償のTailwind Plusを購入したので、Tailwind Plusが提供する個人向け Blogの"Spotlight"という<strong>Template</strong>をベースにカスタマイズしました。</p> <!-- textlint-disable --> <img src="https:&#x2F;&#x2F;codedchords.dev&#x2F;blog&#x2F;2025&#x2F;03&#x2F;nextjs-tailwindui-blog&#x2F;spotlight.webp?h=b31a6334b27994b8c48d" alt="Tailwind Plus: Spotlight template" width="1535" height="232" loading="lazy" /><!-- textlint-enable --> <p>Tailwind PlusのTemplateは、完全に動作するReactベースのアプリケーションコード で、Javascript版とTypeScript版が提供されており、Tailwind CSSを利用したUI要素 だけでなく状態管理やルーティング、APIとの連携など本番環境ですぐに使用でき る機能を全て含んでいます。next-themesを利用したダークモード対応やPrismJSを 使ったSyntax Highlight、レスポンシブ対応、画像最適化やコンポーネントのプリ ロードなどは最初から組み込まれています。開発者はこれらのテンプレートを導入す るだけで、最小限のカスタマイズで完全な機能を持つReactアプリケーションを短時 間で構築できると謳われています。</p> <p>しかし、実際にブログで運用にはそこそこカスタマイズが必要でした。</p> <p>主なカスタマイズポイントとしては以下のような点です。</p> <ul> <li><strong>UI/UXの改善</strong>：個人用のブログに合わせヘッダー、フッターのカスタマイズ</li> <li><strong>記事管理システム</strong>：App Routerの構造を活かしたシンプルなMDXベースの記事管理</li> <li><strong>記事一覧フィルター</strong>: 日付でのフィルター機能を追加(デフォルトではページ 制御されていないため)</li> <li><strong>コメントシステム</strong>：Giscusを使用したGitHubベースのコメント機能</li> </ul> <p>通常であれば、gray-matterやremarkなどを入れてヘッドレスCMSなどからMarkdown記事を取り込み 動的ルーティングで記事を生成するのが美しいのでしょうが、 「そのままMDXで書けばいいか」と割り切ってApp Routerの下に記事を書いていくスタイルにしました。 記事の執筆とサイトのコーディングの区別がつかない今のスタイルは不便もありますが、 気に入っています。HMR<sup class="footnote-reference" id="fr-1-1"><a href="#fn-1">1</a></sup>機能で特に工夫もせずに更新した記事がテスト環境でリアルタイムに 反映されブラウザで確認できる点も気に入っています。</p> <p>まだ記事の移行も終わっていませんし、元のテンプレートからそのまま未修正のもの もありますが、ぼちぼちと修正していこうと思います。</p> <p>Deploy先は、AWSの<strong>Amazon Amplify</strong>としました。ゆくゆくメールフォームなども作っ ていきたいと思います。</p> <h2 id="カスタムコンポーネントの活用">カスタムコンポーネントの活用</h2> <p>Next.jsとTailwind UIの大きな魅力の1つは、カスタムコンポーネントを簡単に作成 して再利用できる点です。従来のCMSであればプラグインやテンプレートの変更とな り気軽にできませんが、今のスタイルであればTypescriptでコードを書けばすぐに利 用できます。コードなのでClaude CodeなどのAI支援も活用できます。</p> <p>例えば、ブログ記事の中でレストランやショップの情報を 綺麗に表示するためのコンポーネントを作成しました。</p> <pre class="giallo z-code"><code data-lang="tsx"><span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment">// src/components/ShopInfo.tsx</span></span> <span class="giallo-l"><span class="z-storage z-type">interface</span><span class="z-entity z-name z-type"> ShopInfoProps</span><span class="z-punctuation"> {</span></span> <span class="giallo-l"><span class="z-variable z-object z-property"> name</span><span class="z-keyword z-operator">:</span><span class="z-support z-type z-primitive"> string</span><span class="z-punctuation">;</span></span> <span class="giallo-l"><span class="z-variable z-object z-property"> address</span><span class="z-keyword z-operator">:</span><span class="z-support z-type z-primitive"> string</span><span class="z-punctuation">;</span></span> <span class="giallo-l"><span class="z-variable z-object z-property"> osmAddress</span><span class="z-keyword z-operator">:</span><span class="z-support z-type z-primitive"> string</span><span class="z-punctuation">;</span></span> <span class="giallo-l"><span class="z-variable z-object z-property"> phone</span><span class="z-keyword z-operator">:</span><span class="z-support z-type z-primitive"> string</span><span class="z-punctuation">;</span></span> <span class="giallo-l"><span class="z-variable z-object z-property"> closedDays</span><span class="z-keyword z-operator">:</span><span class="z-support z-type z-primitive"> string</span><span class="z-punctuation">;</span></span> <span class="giallo-l"><span class="z-variable z-object z-property"> website</span><span class="z-keyword z-operator">?:</span><span class="z-support z-type z-primitive"> string</span><span class="z-punctuation">;</span></span> <span class="giallo-l"><span class="z-punctuation">}</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span class="z-keyword z-storage z-type">export function</span><span class="z-entity z-name z-function"> ShopInfo</span><span class="z-punctuation">({</span></span> <span class="giallo-l"><span class="z-variable z-parameter"> name</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-variable z-parameter"> address</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-variable z-parameter"> osmAddress</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-variable z-parameter"> phone</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-variable z-parameter"> closedDays</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-variable z-parameter"> website</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-punctuation">}</span><span class="z-keyword z-operator">:</span><span class="z-entity z-name z-type"> ShopInfoProps</span><span class="z-punctuation">) {</span></span> <span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> // コンポーネントの実装...</span></span> <span class="giallo-l"><span class="z-punctuation">}</span></span></code></pre> <p>このコンポーネントを使用すると、以下のように店舗情報を簡単に表示できます。</p> <table><thead><tr><th>項目</th><th>内容</th></tr></thead><tbody> <tr><td>店名</td><td>スターバックスコーヒー 学園都市キャンパススクェア店</td></tr> <tr><td>住所</td><td>兵庫県 神戸市西区 学園西町1-4 キャンパススクェア</td></tr> <tr><td>地図</td><td><a rel="external" href="https://www.openstreetmap.org/?mlat=34.683006&amp;mlon=135.057619#map=17/34.683006/135.057619">OpenStreetMap</a></td></tr> <tr><td>電話</td><td>078-798-7613</td></tr> <tr><td>定休日</td><td>不定休</td></tr> <tr><td>ウェブサイト</td><td><a rel="external" href="https://store.starbucks.co.jp/detail-1718/">https://store.starbucks.co.jp/detail-1718/</a></td></tr> </tbody></table> <p>レストランやカフェだけでなく、様々な店舗情報を表示できます。</p> <p>このようなコンポーネントは、情報を構造化して表示するだけでなく、スタイリングの一貫性を保ち、コードの再利用性を高めるメリットがあります。MDXの中でReactコンポーネントをシームレスに使用できるのは、このブログシステムの大きな魅力の1つです。</p> <h2 id="まとめ">まとめ</h2> <p>Micro.blogからNext.js × Tailwind Plus × Amazon Apmplify(AWS)へのブログ移行は、 モダンなWeb技術スタックを活用するという点で非常に満足のいく選択でした。</p> <p>新しいプラットフォームでは、以下のようなメリットを実感しています。</p> <ul> <li><strong>開発の柔軟性</strong>: フロントエンドとしてReactベースのNext.jsを使うことで、好きなようにカスタマイズできる自由度を得られた</li> <li><strong>執筆体験の向上</strong>: MDXを使うことで、マークダウンの手軽さとReactコンポーネントの柔軟性を両立できる</li> <li><strong>パフォーマンス</strong>: 静的生成とエッジでのレンダリングにより、高速なページ読み込みを実現できた</li> <li><strong>学習機会</strong>: 実際のプロジェクトを通じて最新のWebフロントエンド技術を深く学べる点も大きな魅力</li> </ul> <p>もちろん、まだ改善点もあります。コンテンツの移行や検索機能の実装、SEO対策など、今後も少しずつアップデートしていく予定です。自分のペースで改良していける点が、自前のプラットフォームの最大の魅力だと感じています。</p> <p>Next.jsとTailwind Plusの組み合わせは、Webアプリケーション構築だけでなく 個人ブログの構築においても非常に強力なツールセットになっていると実感しています。 興味がある方はぜひ試してみることをおすすめします。</p> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn-1"> <p>HMR (Hot Module Replacement)アプリケーション実行中にコードが変更された 時、ページ全体をリロードせずに変更されたモジュールのみを動的に置き換える 技術。Webpackなどのバンドラーがファイル変更を監視し、ウェブソケット接続を通じて変更部分だけをブラウザに送信するため、アプリケーションの状態を保持したまま即座に変更が反映される。 <a href="#fr-1-1">↩</a></p> </li> </ol> </section>

Micro.blogを利用したブログを運用していましたが、Next.js + Tailwind Plus(旧Tailwind UI)を使ってエンジニアから見て柔軟なブログを再構築してみました。

2025-03-08T00:00:00+00:00 2025-03-08T00:00:00+00:00 Toshiyuki Yoshida https://codedchords.dev/blog/2025/03/portfolio-site-for-engieer/ <p>今更ながら年初からWebデザインを教わるというシーンがありました。 しかし、毎朝タイピング練習で始まり、 「BRタグは非奨励」などとW3Cの仕様を知らないレベルの講師が レベルの低い授業をやっていました。 100年かけてもWebデザインに行きつきそうにない。吐き気がしました。 割り切って我慢できるレベルを超えていました。</p> <p>辞めましたが、 まぁ折角なのでWEBデザイナーが作るらしい「ポートフォリオ」なるものを、 3日ほど使ってこれまで深くやってこなかった技術スタックを作ってみました。</p> <h2 id="はじめに">はじめに</h2> <p>ポートフォリオサイトは自分のスキルや実績を効果的にアピールするための重要な ツールらしいです。</p> <p>Illustratorでデザインカンプ描いて、HTML/CSSでせっせとコーディング なんてサイト作っても一体誰が見るんでしょう。 「あぁ、いいデザインだね」とか褒められると 本気で思っているバカがいるのでしょうか？ 美的デザインだけで勝負するなんて、よほどの審美眼とセンスがないと無駄です。</p> <p>この記事では、そんな90年代風なWebサイトでなく、 Node.js上でモダンなWebフレームワークであるNext.js/ReactとCSSフレームワークのTailwindCSS、 そしてUIコンポーネントを提供するdaisyUIを組み合わせて ポートフォリオサイトを構築したのでそれを記録しています。</p> <p>そして、結局このブログサイトも同じような技術スタック使って 再構築してしまいました。</p> <h2 id="使用する技術スタック">使用する技術スタック</h2> <p>言語は型安全なTypeScriptを使用し、node/Reactベースで以下のようなフレームワークを使っています。</p> <ul> <li><strong>Next.js</strong>: Reactベースのフルスタックフレームワーク</li> <li><strong>TailwindCSS</strong>: ユーティリティファーストのCSSフレームワーク</li> <li><strong>daisyUI</strong>: TailwindCSSのプラグインであるUIコンポーネントライブラリ</li> <li><strong>React Three Fiber</strong>: 3DグラフィックスをReactで簡単に使うためのライブラリ</li> <li><strong>Font Awesome</strong>: グラフィカルなアイコン文字を使うためのライブラリ</li> <li><strong>Framer Motion</strong>: Framer Motionは、Reactアプリケーションにアニメーションを実装するためのライブラリ</li> <li><strong>AWS SDK</strong>: 問い合わせフォームからAWSのAmanzon SESを使ってメールを送信するため</li> </ul> <h2 id="プロジェクトセットアップ">プロジェクトセットアップ</h2> <ol> <li>プロジェクトを作成</li> </ol> <pre class="giallo z-code"><code data-lang="shellscript"><span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"># Next.jsプロジェクトの作成（TypeScript対応）</span></span> <span class="giallo-l"><span class="z-entity z-name z-function">npx</span><span class="z-string"> create-next-app@latest my-portfolio --typescript</span></span> <span class="giallo-l"><span class="z-entity z-name z-function">√</span><span class="z-string"> Would you like to use ESLint? ... Yes</span></span> <span class="giallo-l"><span class="z-entity z-name z-function">√</span><span class="z-string"> Would you like to use Tailwind CSS? ... Yes</span></span> <span class="giallo-l"><span class="z-entity z-name z-function">√</span><span class="z-string"> Would you like to use</span><span class="z-punctuation z-definition z-evaluation z-backticks z-shell"> `</span><span class="z-entity z-name z-function">src/</span><span class="z-punctuation z-definition z-evaluation z-backticks z-shell">`</span><span class="z-entity z-name z-function"> directory?</span><span class="z-string"> ... Yes（好みに応じて）</span></span> <span class="giallo-l"><span class="z-entity z-name z-function">√</span><span class="z-string"> Would you like to use App Router? ... Yes</span></span> <span class="giallo-l"><span class="z-entity z-name z-function">√</span><span class="z-string"> Would you like to customize the default import alias</span><span class="z-source"> (@/*)</span><span class="z-keyword z-operator">?</span><span class="z-source"> ... Yes</span></span> <span class="giallo-l"><span class="z-entity z-name z-function">√</span><span class="z-string"> What import alias would you like configured? ... @/</span><span class="z-variable">*</span></span> <span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"># 作成したプロジェクトディレクトリに移動</span></span> <span class="giallo-l"><span class="z-support z-function z-builtin">cd</span><span class="z-string"> my-portfolio</span></span> <span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"># daisyUIのインストール</span></span> <span class="giallo-l"><span class="z-entity z-name z-function">npm</span><span class="z-string"> install daisyui</span></span></code></pre> <ol start="2"> <li>tailwind.config.jsの設定</li> </ol> <p>プロジェクトルートにある<code>tailwind.config.js</code>ファイルを開き、daisyUIをプラグインとして追加します。</p> <p>ライトとダーク両方のテーマをサポートするようにします。設定によりシステムのダーク／ライトモードの設定に応じて切り替わります。</p> <pre class="giallo z-code"><code data-lang="javascript"><span class="giallo-l"><span class="z-punctuation z-definition z-comment">/**</span><span class="z-punctuation"> @</span><span class="z-storage z-type">type</span><span class="z-punctuation"> {</span><span class="z-entity z-name z-type">import(&#39;tailwindcss&#39;).Config</span><span class="z-punctuation">}</span><span class="z-punctuation z-definition z-comment"> */</span></span> <span class="giallo-l"><span class="z-support z-type z-object z-module z-js">module</span><span class="z-punctuation z-accessor">.</span><span class="z-support z-type z-object z-module z-js">exports</span><span class="z-keyword z-operator"> =</span><span class="z-punctuation"> {</span></span> <span class="giallo-l"><span class="z-source"> content</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-source"> [</span></span> <span class="giallo-l"><span class="z-punctuation z-definition z-string z-string"> &quot;./src/pages/**/*.{js,ts,jsx,tsx,mdx}&quot;</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-punctuation z-definition z-string z-string"> &quot;./src/components/**/*.{js,ts,jsx,tsx,mdx}&quot;</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-punctuation z-definition z-string z-string"> &quot;./src/app/**/*.{js,ts,jsx,tsx,mdx}&quot;</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-source"> ]</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-source"> theme</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-punctuation"> {</span></span> <span class="giallo-l"><span class="z-source"> extend</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-punctuation"> {</span></span> <span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> // 必要に応じてテーマの拡張を追加</span></span> <span class="giallo-l"><span class="z-punctuation"> },</span></span> <span class="giallo-l"><span class="z-punctuation"> },</span></span> <span class="giallo-l"><span class="z-source"> plugins</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-source"> [</span><span class="z-entity z-name z-function">require</span><span class="z-source">(</span><span class="z-punctuation z-definition z-string z-string">&quot;daisyui&quot;</span><span class="z-source">)]</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-source"> daisyui</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-punctuation"> {</span></span> <span class="giallo-l"><span class="z-source"> themes</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-source"> [</span><span class="z-punctuation z-definition z-string z-string">&quot;light&quot;</span><span class="z-punctuation">,</span><span class="z-punctuation z-definition z-string z-string"> &quot;dark&quot;</span><span class="z-source">]</span><span class="z-punctuation">,</span><span class="z-punctuation z-definition z-comment z-comment"> // 使用するテーマを設定</span></span> <span class="giallo-l"><span class="z-punctuation"> },</span></span> <span class="giallo-l"><span class="z-punctuation">};</span></span></code></pre> <ol start="3"> <li>他のライブラリをインストール</li> </ol> <pre class="giallo z-code"><code data-lang="shellscript"><span class="giallo-l"><span class="z-entity z-name z-function">npm</span><span class="z-string"> install three @react-three/fiber @react-three/drei</span></span> <span class="giallo-l"><span class="z-entity z-name z-function">npm</span><span class="z-string"> install framer-motion</span></span> <span class="giallo-l"><span class="z-entity z-name z-function">npm</span><span class="z-string"> install @fortawesome/fontawesome-svg-core</span><span class="z-constant z-character z-escape"> \</span></span> <span class="giallo-l"><span class="z-string"> @fortawesome/free-solid-svg-icons</span><span class="z-constant z-character z-escape"> \</span></span> <span class="giallo-l"><span class="z-string"> @fortawesome/free-regular-svg-icons</span><span class="z-constant z-character z-escape"> \</span></span> <span class="giallo-l"><span class="z-string"> @fortawesome/free-brands-svg-icons</span><span class="z-constant z-character z-escape"> \</span></span> <span class="giallo-l"><span class="z-string"> @fortawesome/react-fontawesome</span></span> <span class="giallo-l"><span class="z-entity z-name z-function">npm</span><span class="z-string"> install aws-amplify @aws-sdk/client-ses @aws-sdk/client-sts</span></span></code></pre> <ol start="4"> <li>turbooackの有効化</li> </ol> <p>Next.jsの開発サーバーを高速化するために、package.jsonのscriptsセクションを編集してturbopackを有効にします。</p> <pre class="giallo z-code"><code data-lang="json"><span class="giallo-l"><span class="z-punctuation z-definition z-string z-string">&quot;scripts&quot;</span><span class="z-source">: </span><span class="z-punctuation">{</span></span> <span class="giallo-l"><span class="z-punctuation"> &quot;</span><span class="z-support z-type z-property-name z-json">dev</span><span class="z-punctuation">&quot;:</span><span class="z-punctuation z-definition z-string z-string"> &quot;next dev --turbopack&quot;</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-punctuation"> &quot;</span><span class="z-support z-type z-property-name z-json">build</span><span class="z-punctuation">&quot;:</span><span class="z-punctuation z-definition z-string z-string"> &quot;next build&quot;</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-punctuation"> &quot;</span><span class="z-support z-type z-property-name z-json">start</span><span class="z-punctuation">&quot;:</span><span class="z-punctuation z-definition z-string z-string"> &quot;next start&quot;</span><span class="z-punctuation">,</span></span> <span class="giallo-l"><span class="z-punctuation"> &quot;</span><span class="z-support z-type z-property-name z-json">lint</span><span class="z-punctuation">&quot;:</span><span class="z-punctuation z-definition z-string z-string"> &quot;next lint&quot;</span></span> <span class="giallo-l"><span class="z-punctuation">}</span></span></code></pre><h2 id="プロジェクトの構造">プロジェクトの構造</h2> <p>Next.jsのAppRouterを使用した基本的なプロジェクト構造を整えると、次のようなフォルダ構成になるはずです。</p> <pre class="giallo z-code"><code data-lang="plain"><span class="giallo-l"><span>my-portfolio/</span></span> <span class="giallo-l"><span>├── src/</span></span> <span class="giallo-l"><span>│ ├── app/</span></span> <span class="giallo-l"><span>│ │ ├── about/</span></span> <span class="giallo-l"><span>│ │ │ └── page.tsx （自己紹介ページ）</span></span> <span class="giallo-l"><span>│ │ ├── api/</span></span> <span class="giallo-l"><span>│ │ │ └── contact</span></span> <span class="giallo-l"><span>│ │ │ └── route.ts （メール送信）</span></span> <span class="giallo-l"><span>│ │ ├── contact/</span></span> <span class="giallo-l"><span>│ │ │ └── page.tsx （お問い合わせページ）</span></span> <span class="giallo-l"><span>│ │ ├── globals.css （グローバルスタイル）</span></span> <span class="giallo-l"><span>│ │ ├── layout.tsx （ルートレイアウト）</span></span> <span class="giallo-l"><span>│ │ ├── page.tsx （トップページ）</span></span> <span class="giallo-l"><span>│ │ └── works/</span></span> <span class="giallo-l"><span>│ │ └── page.tsx （作品紹介ページ）</span></span> <span class="giallo-l"><span>│ └── components/ （共通コンポーネント）</span></span> <span class="giallo-l"><span>├── public/ （静的ファイル）</span></span> <span class="giallo-l"><span>├── next.config.js</span></span> <span class="giallo-l"><span>├── package.json</span></span> <span class="giallo-l"><span>├── tailwind.config.js</span></span> <span class="giallo-l"><span>└── tsconfig.json</span></span></code></pre><h2 id="AWS_Amplify_へのデプロイ">AWS Amplify へのデプロイ</h2> <p>今回はNext.jsアプリケーションのホスティング先としてVercelではなく、AWS Amplifyを選択しました。Amplifyを選んだ理由と、デプロイプロセスについて共有します。</p> <p>Amplifyを選んだ理由は、次の通りです。</p> <ul> <li><strong>AWSエコシステムとの統合</strong>: Amazon SESなど他のAWSサービスとの連携がシーム レスで、同じAWSコンソールから管理できる</li> <li><strong>既存のAWS知識の活用</strong>: Amplify自体は今回初見だが一応前職なので管理コンソールなどは慣れており、 Vercelを新たに学ぶ手間が不要だった。</li> <li><strong>料金体系</strong>: 今回の内容であれば無料枠で十分</li> </ul> <p>デプロイ手順をざっくり並べると次の通りです。</p> <ol> <li>AWS管理コンソールからAmplifyサービスにアクセス</li> <li>「新しいアプリを作成」→「GitHubからホスティング」を選択</li> <li>リポジトリと使用するブランチを選択（今回は<code>main</code>ブランチ）</li> <li>ビルド設定を確認（Next.jsの場合は自動的に検出される）。認証情報などは面 倒なので以下のようにビルドステップに組み込んだ。</li> </ol> <pre class="giallo z-code"><code data-lang="yaml"><span class="giallo-l"><span class="z-entity z-name z-tag z-yaml">version</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-constant z-numeric"> 1</span></span> <span class="giallo-l"><span class="z-entity z-name z-tag z-yaml">frontend</span><span class="z-punctuation z-separator z-key-value">:</span></span> <span class="giallo-l"><span class="z-entity z-name z-tag z-yaml"> phases</span><span class="z-punctuation z-separator z-key-value">:</span></span> <span class="giallo-l"><span class="z-entity z-name z-tag z-yaml"> preBuild</span><span class="z-punctuation z-separator z-key-value">:</span></span> <span class="giallo-l"><span class="z-entity z-name z-tag z-yaml"> commands</span><span class="z-punctuation z-separator z-key-value">:</span></span> <span class="giallo-l"><span class="z-punctuation"> -</span><span class="z-string"> npm ci</span></span> <span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> # 認証情報の書き込み</span></span> <span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> # クライアント再度で必要な環境変数</span></span> <span class="giallo-l"><span class="z-punctuation"> -</span><span class="z-string"> echo &quot;NEXT_PUBLIC_XXXX_API_URL=https://api.example.com&quot; &gt;&gt;.env</span></span> <span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> # サーバーサイド限定の環境変数</span></span> <span class="giallo-l"><span class="z-punctuation"> -</span><span class="z-string"> echo &quot;AWS_XXXXX_ACCESS_KEY_ID=&quot;hogehogetaratara&quot; &gt;&gt; .env</span></span> <span class="giallo-l"><span class="z-entity z-name z-tag z-yaml"> build</span><span class="z-punctuation z-separator z-key-value">:</span></span> <span class="giallo-l"><span class="z-entity z-name z-tag z-yaml"> commands</span><span class="z-punctuation z-separator z-key-value">:</span></span> <span class="giallo-l"><span class="z-punctuation"> -</span><span class="z-string"> npm run build</span></span> <span class="giallo-l"><span class="z-entity z-name z-tag z-yaml"> artifacts</span><span class="z-punctuation z-separator z-key-value">:</span></span> <span class="giallo-l"><span class="z-entity z-name z-tag z-yaml"> baseDirectory</span><span class="z-punctuation z-separator z-key-value">:</span><span class="z-string"> .next</span></span> <span class="giallo-l"><span class="z-entity z-name z-tag z-yaml"> files</span><span class="z-punctuation z-separator z-key-value">:</span></span> <span class="giallo-l"><span class="z-punctuation"> -</span><span class="z-punctuation z-definition z-string z-string"> &quot;**/*&quot;</span></span> <span class="giallo-l"><span class="z-entity z-name z-tag z-yaml"> cache</span><span class="z-punctuation z-separator z-key-value">:</span></span> <span class="giallo-l"><span class="z-entity z-name z-tag z-yaml"> paths</span><span class="z-punctuation z-separator z-key-value">:</span></span> <span class="giallo-l"><span class="z-punctuation"> -</span><span class="z-string"> node_modules/**/*</span></span></code></pre><h2 id="コンポーネント、その他について">コンポーネント、その他について</h2> <ul> <li>ヘッダー・コンポーネントについてはdaisyUIのNavbarを使わず、レスポンシブ対応、メニューの開閉に対応している。Navbarを使わない理由はないと思われるが、今回は実装検証のため自身で対応してみた。</li> <li>Works(作品)コンポーネントについては、トップページと作品ページで共用するため、作品情報をコンポーネントに内包させ引数で表示する作品の数を制御している。</li> <li>一方でニュースのリストを作成するNewsコンポーネントは、現時点ではTopページしか使っていないが他のページでも使いまわせると考え、ニュース自体はコンポーネントに引数で渡すようにしている。</li> <li>グラフィカルな要素があまりないので3Dの立方体をトップページに置いている。3DCubeコンポーネントはモデリングする手間が面倒で、立方体をくるくる回しているだけである。</li> <li>問い合わせフォームは、自身で検証したかったのでAmazon SESを使って実際にフォームをメールで飛ばすところまで作り込んでいる。必要な宛先アドレスや認証情報は、ビルド時に設定して環境変数で受け渡している。認証情報はシークレット情報経由などの方が良いと思われるが、どうもうまくいかなかったので妥協した。</li> </ul> <p>具体的なソースは、<a rel="external" href="https://github.com/yostos/yostos-portfolio">GitHubで公開</a>しています。なお、ポートフォリオサイト自体は運用コスト等の都合で既に公開を終了しました。</p> <h2 id="まとめ">まとめ</h2> <p>今回初めてまともにNext.jsを使いました。</p> <ul> <li>今回はインターラクティブな要素もあったのでSEO的には良くないと思われるが、SSR/SSGを使わず全てクライアントコンポーネントとした。</li> <li>ファイルベースのルーティングは直感的で分かりやすいと感じた。</li> <li>APIルートでバックエンドの開発も同じプロジェクトでできるので、開発を分離することなくスムーズで行うことが出来そうである。フルスタックの開発者である前提ではあるが。</li> <li>今回はVercelでなく、GitHubと連携させてAWSのAmplifyにデプロイした。思いの外スムーズにデプロイできた。</li> <li>CMSのようにテンプレートベースでなく、コードベースで部品の再利用、共通化ができるので、プログラマーがサイトを作るには非常にCMS特有のテンプレートのお手前を覚える必要がないので生産性がよい感じである。</li> </ul> <p>楽しいお遊びでした。</p>

あまり経験してこなかった技術スタックでポートフォリオサイトを作ってみました