ブログ
Web 制作・システム開発に関する記事を公開しています。
Whisperの文字起こしで表記ゆれをなくす簡単な方法
音声をテキストに変換するWhisperは、音声データをAPIにそのまま投げるだけで精度の高い文字起こしが簡単にできるのですが、プロンプトも一緒に投げると、表記揺れも簡単に解消できます。
Nuxt2から3へ移行した感想。なぜ人々はNuxtを選ぶのか
数年前にNuxt2で構築した当サイトをNuxt3で再構築しました。便利ツールのはずのNuxt Bridgeがまったく使い物にならず1から始めることになり、安定版リリースは延期に延期を重ね、「なぜ私はNuxt3を使わなければいけないのか？」と自問自答しながらのフルリニューアルでしたが、色々と経験できたのでアウトプットしたいと思います。
Nuxt3の動的ルーティングで404エラーを表示する
Nuxt3では、存在しないページにアクセスされた時に自動的に404ページを表示してくれますが、動的ルーティング（例：/pages/[postId].vue）の場合は、存在しないページがあったとしても404エラーになりません。
Nuxt3で404ページをカスタマイズする
Nuxt3で404エラーのページをカスタマイズするには、app.vueと同じ階層（ルートフォルダ）にerror.vueを作成します。エラーメッセージはuseError()関数で取得できるため、それを元に思い通りのページを作ることができます。
CMSの画像を静的サイト（SSG）で表示する3つの方法
CMSを利用して静的サイト（SSG）を構築する際、意外と悩むポイントが画像の表示方法です。CMS側に画像用のリソースを提供していることもありますが、帯域制限ありでアクセスが多いと画像が表示されなくなったり、画像配信元とパス（URL）が違うことで都合が悪いこともあったりします。
外部リソースの画像を静的生成する（静的サイト用）
静的サイト（SSG）から直接画像を配信するには、staticやpublicのフォルダに画像を入れるだけでOKですが、CMSからコンテンツを取得して動的にページを生成する場合、外部リソースからの配信になってしまうため、外部リソースを元に静的生成するニーズがあります。
Cloudflare Pagesでお問い合わせフォーム（自動返信あり）を作る
この記事で紹介していたMailChannels無料連携は2024年8月に終了しました。2026年現在のCloudflareでの問い合わせフォームの作り方を、Slack通知・Email Service・メールAPI（自動返信）・MailChannels継続の4通りで解説します。
Astroで理想のサイトマップを自作する
@astrojs/sitemapの「3桁数字のURLが除外されるバグ」は修正済みです。2026年現在、サイトマップを自作する実質的な理由はSSR（オンデマンドレンダリング）対応。このブログでも使っている、リクエスト時に生成するエンドポイントの作り方を解説します。
Astroで静的サイトを構築してみて
2023年にAstroで初めて静的サイトを作ったときのレビューに、3年後の答え合わせを追記しました。ClientRouterの登場、SSR対応。このブログ自体をAstroに移行した今も「静的サイトならAstro一択」は変わりません。
Nuxt3で画像の静的生成機能を自前で実装する（Static Images）
Nuxt3には画像変換モジュールとしてNuxt/Imageがありますが、長らく静的画像の生成機能がサポートされていないため、自前で実装してみました。
Cloudflare PagesでNuxt3サイトのホスティングに失敗する
おそらく一時的なエラーかと思いますが、執筆時点、Cloudflare PagesでBuild output directory（出力先のフォルダ）の値にdistを指定してNuxt3の静的ビルド（SSG）をすると失敗します。
Nuxt3でサイトマップを生成する
Nuxt3でサイトマップが生成できるモジュール、Simple-Sitemapが公開されました。難しい設定不要で、動的ルーティング含め、ちゃんとしたsitemap.xmlが.output/publicフォルダ内に生成されます。
Nuxt3のApolloモジュールでBasic認証を使うには
Nuxt ApolloでBasic認証を使うにはPluginsフォルダ内にauth.tsファイルを作り、以下のコードを記述します。
Nuxt3で静的サイトを正常にプレビューするには
Nuxt3で静的サイトを構築し、いざ確認！と、nuxi prevewコマンドを叩くと、開発時（nuxi devコマンド実行時）には問題のなかったサイトが、何故か正常に表示されない現象に悩まされていました。
Next.jsのnext exportで生成された動的ページをLaravelで表示する
Next.jsのnext exportコマンドは通常、getStaticPropsとgetStaticPathsの返り値を設定し、静的ページ（例：slug.html）を生成しますが、この際、返り値を空にして、クライアントサイドの値で内容が変化するような静的ページ（例：[slug].html）を生成することもできます。
Headless CMSとしてのWordPress
Headless CMSとしてのWordPressの強みは2026年も有効です。一方で私はこのブログをWordPressからAstroベースの構成に移行しました。ヘッドレス化する・しない・WordPressから出る、それぞれの判断軸を実体験から整理します。
Cloudflare Pagesの無料プランを商用目的で使えるのか
Cloudflare Pagesの無料プランは商用利用できます。2023年の規約改定（旧2.8条の廃止）で条件はより明確になりました。2026年時点の無料プランの制限、PagesとWorkersの関係も合わせて整理しています。
Gatsby.jsで動的にページを生成する
React製フレームワークのGatsby.jsで動的にページを生成する方法は、gatsby-node.jsファイルを使う方法と、src/pagesディレクトリ内のファイル名で設定する方法の2種類あります。バージョン2以降の主流は後者の方法で、ほとんどの場合でgatsby-node.jsファイルを扱う必要はありません。
WPGraphQLを認証ユーザーのみ使えるようにする
WordPressでWPGraphQLを使う場合、デフォルトでは誰でもアクセスおよびクエリの実行が可能ですが、WPGraphQL JWT Authenticationのプラグインを同時にインストールすることで、未承認のユーザーにはエラーが返却され、承認済みのユーザーのみデータ取得できるようになります。
WordPressサイトで外部からのアクセスを拒否するには
WordPressを完全にHeadLess CMSとして使いたい場合など、管理者やログインユーザーなどの一部のユーザーにだけアクセスを許可し、それ以外のユーザーからのアクセスを拒否するニーズがあるかと思います。デフォルトでは、REST API含め、誰でも自由にコンテンツを閲覧できるからです。