カテゴリー
Web開発者向け
Web開発者向けに関する記事を公開しています。
AI時代に直面しているエンジニアの構造変化
「スキルが消えたんじゃなくて、単価が下がった」——AI時代に実装の中間層が溶け、上下が残る構造変化。自分のポジションをどう診断するか。
Cloudflare Pages Functionsでメールが送信できない場合の対処法
Cloudflare Pagesの利用者に向けて、メール送信機能のセキュリティ対策が強化されました。これにより、SPF認証とDomain Lockdownの設定が必要となり、正確なTXTレコードの指定が求められるようになりました。これらの変更に対応するための具体的な手順をご説明します。
WordPressデータ（投稿記事や画像）をCSV形式で出力する
投稿記事や固定ページ、アイキャッチ画像やタグ、さらにはカスタム投稿タイプまで、WordPressデータをCSVで出力するには、WordPressプラグイン「Import All Pages, Post types, Products, Orders, and Users as XML & CSV」を使うのが便利です。
AstroでGoogleアドセンスの広告を表示する
AstroでGoogleアドセンスの広告を表示するには、元の広告コードのインラインで実行しているscriptタグにis:inlineを付けます。その他のコードはそのまま読み込んでOKです。
Nuxt3でGoogleアドセンス広告を表示する
Nuxt3で構築されたサイトにGoogleアドセンスの広告を表示する具体的な手順をご紹介します。プラグインは使いません。
Nuxt3で外部画像を静的生成する — NuxtImgとNuxtPictureの使い分け
Nuxt3で内部画像と外部画像を静的生成し、各デバイス毎に画像サイズを最適化するには、公式モジュールのNuxt Imageを使います。
Nuxt ContentでコンポーネントにクラスやIDを付ける
Nuxt Contentでスタイリングする際、直接要素にCSSを当てるのが簡単ですが、クラスやIDなど各種属性を付けることもできます。Tailwind CSSなどのUIライブラリを使う場合に便利な方法です。
さようならVuetify。ようこそTailwind CSS
Nuxt2の時から愛用していたVuetifyの使用をやめ、Tailwind CSSに乗り換えました。Nuxt2からNuxt3への移行と同じく、Vuetify2から3への移行も一筋縄ではいかなかったのですが、久しぶりにバージョンアップしてみたところ（v3.3.9）、またバグが発生して対応が必要だったため、ここら辺で見切りをつけることにしました。
Vercel, Netlify, Cloudflare Pages 課金するならどれ？
2023年版では「1ドル安いNetlify」が結論でしたが、NetlifyはPro月20ドルのクレジット制になり、Cloudflareは課金の入口がWorkers Paid（月5ドル〜）に変わりました。2026年の現行料金で考え直しています。
Next/ImageはCloudflare Pagesの無料プランで使えない
Next.jsには、画像をキャッシュして各デバイスサイズに最適化して配信するNext/Imageコンポーネントがあり、通常は面倒な画像最適化を簡単に実現できますが、Cloudflare Pagesの無料プランでは使えません。
Cloudflare Pages Functionsの制限サイズエラー
Next.js製のサイトをCloudflare Pagesにデプロイする際、Functionsのスクリプトサイズが大きすぎる旨のエラーが発生してデプロイに失敗しました。
Vercel, Netlify, Cloudflare Pages 無料で使うならどれ？
JAMstackのWebサイトなどをホスティングする際、主な選択肢になるのがVercel, Netlify, Cloudflare Pagesの3つかと思います。どれも無料で利用できるため、まずは体験してみるのが1番ですが、無料で使う場合Cloudflare Pagesが最強です。
WhisperとNext.js(Edge Runtime)で文字起こし
OpenAIのサービスの1つであるWhisperのAPIを使い、Next.jsのアプリケーションで文字起こしをする実践的な手順をご紹介します。
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通りで解説します。