国際化 (i18n)

ContentfulでPublishボタンが押せない原因と解決方法 — ロケール設定の落とし穴

はじめに Contentfulで多言語サイトを構築中、運用担当者から「新規ページを作成してもPublishボタンがアクティブにならない」という報告を受けました。既存ページの更新は問題なくできるのに、新規作成だけができないという状況です。本記事では、原因の特定プロセスと解決方法を紹介します。環境 Contentful（ヘッドレスCMS）ロケール: 日本語（ja、デフォルト）+ 英語（en） Next.js + Contentful Delivery API でフロントエンドを構築症状新規にPageエントリーを作成し、必要な情報をすべて入力しても Publishボタンがグレーアウトしてクリックできない既存ページの更新（タイトルや本文の変更）は問題なくPublishできる Draft保存は正常に動作する原因の切り分け 1. コンテンツタイプのバリデーションを確認まず、pageコンテンツタイプのフィールド定義を確認しました。 title: Symbol, required: true, localized: true slug: Symbol, required: true, localized: false body: RichText, required: false, localized: true bodyMarkdown: Text, required: false, localized: true titleとslugが必須ですが、どちらも入力済み。slugのバリデーション（^[a-z0-9]+(?:-[a-z0-9]+)*$）にも違反していませんでした。 2. ユーザー権限を確認 Management APIでスペースメンバーシップを確認しました。 curl -s -H "Authorization: Bearer $TOKEN" \ "https://api.contentful.com/spaces/$SPACE_ID/space_memberships" 報告者はAdmin権限を持っており、権限の問題ではありませんでした。 3. APIから直接Publishを試行 — 原因特定 UIでは原因がわからなかったため、Management APIから直接Publishを試みました。これが決め手になりました。 curl -s -X PUT \ -H "Authorization: Bearer $TOKEN" \ -H "X-Contentful-Version: 13" \ "https://api.contentful.com/spaces/$SPACE_ID/environments/master/entries/$ENTRY_ID/published" レスポンス: ...

2026年3月17日 · 2 分 · Nakamura

ethers.jsのエラーメッセージを多言語化する「ethers-i18n」を作った

はじめに ethers.jsを使ったdApp開発で、こんな経験はありませんか？ Error: insufficient funds for intrinsic transaction cost エラーの意味は分かるけれど、このメッセージをそのままエンドユーザーに見せるわけにはいきません。特に日本語圏のユーザー向けサービスでは、エラーメッセージの日本語化は避けて通れない課題です。そこで、ethers.jsのエラーメッセージを多言語化するライブラリ ethers-i18n を作りました。 https://github.com/nakamura196/ethers-i18n ethers-i18nとは ethers-i18nは、ethers.js v6のエラーコードに対応した翻訳メッセージを提供するi18nプラグインです。主な特徴: シンプルなAPI — setLocale("ja") と t("ERROR_CODE") だけで使える非破壊的 — 既存のethers.jsコードに影響を与えない型安全 — TypeScriptの型定義を完備 4言語対応 — 英語・日本語・韓国語・中国語をサポート軽量 — 依存関係はethers.jsのみ（peerDependency）インストール npm install @nakamura196/ethers-i18n ethers.js v6がpeerDependencyとして必要です。基本的な使い方ロケールの設定と翻訳 import { setLocale, t, getLocale, getSupportedLocales } from "@nakamura196/ethers-i18n"; // サポートされているロケール一覧 console.log(getSupportedLocales()); // ["en", "ja", "ko", "zh"] // 日本語に設定 setLocale("ja"); console.log(getLocale()); // "ja" // エラーコードを翻訳 console.log(t("INVALID_ARGUMENT")); // "無効な引数です" console.log(t("INSUFFICIENT_FUNDS")); // "トランザクションに必要な残高が不足しています" console.log(t("NETWORK_ERROR")); // "ネットワークエラーが発生しました" エラーオブジェクトの翻訳 ethers.jsが投げるエラーオブジェクトをそのまま翻訳できます。 ...

2026年3月3日 · 2 分 · Nakamura

RAWGraphs 2.0 の日本語化

はじめにデータ可視化ツール RAWGraphs を日本語化し、公開しました。 https://rawgraphs-ja.vercel.app/ RAWGraphsは、複雑なデータを美しいビジュアライゼーションに変換できるオープンソースのWebアプリケーションです。コーディング不要で、CSVやJSONデータをドラッグ＆ドロップするだけで、様々なチャートを作成できます。 RAWGraphsとは RAWGraphsは、イタリアのDensityDesign Research Labが開発したデータ可視化ツールです。 https://www.rawgraphs.io/ 主な特徴：コーディング不要 : ブラウザ上でデータをペーストするだけ多様なチャート : Alluvial Diagram、Treemap、Voronoi Tessellationなど30種類以上 SVGエクスポート : 作成したチャートをSVGやPNG形式でダウンロード可能プライバシー保護 : データはサーバーに送信されず、ブラウザ内で処理使用ライブラリ { "i18next": "^21.10.0", "react-i18next": "^11.18.6" } ! 最新版のi18nextではなく、互換性のある旧バージョンを使用しています。RAWGraphsのビルド環境（react-scripts 4.x）がオプショナルチェーニング（?.）構文を完全にサポートしていないためです。実装手順 1. i18nの初期化 src/i18n.js を作成し、多言語対応の基盤を構築しました。 import i18n from 'i18next' import { initReactI18next } from 'react-i18next' import translationEN from './locales/en/translation.json' import translationJA from './locales/ja/translation.json' const resources = { en: { translation: translationEN }, ja: { translation: translationJA } } const savedLanguage = localStorage.getItem('i18nextLng') || 'ja' i18n .use(initReactI18next) .init({ resources, lng: savedLanguage, fallbackLng: 'en', interpolation: { escapeValue: false } }) i18n.on('languageChanged', (lng) => { localStorage.setItem('i18nextLng', lng) }) export default i18n 2. 翻訳ファイルの構造 src/locales/ ├── en/ │ └── translation.json └── ja/ └── translation.json 翻訳ファイルは、セクションごとに整理しました： ...

2025年12月3日 · 更新: 2025年12月3日 · 2 分 · Nakamura

Next.js + next-intl での言語切り替え実装ガイド

Next.js App Router と next-intl を使用した多言語対応アプリケーションで、リロードなしの言語切り替えを実装する方法をまとめます。環境 Next.js 16 (App Router) next-intl TypeScript 設定概要 localePrefix: ‘as-needed’ とは next-intl の localePrefix: 'as-needed' 設定を使用すると、デフォルト言語ではURLにプレフィックスが付かず、その他の言語のみプレフィックスが付きます。例（デフォルト言語が日本語の場合）: 日本語: /, /gallery, /viewer 英語: /en, /en/gallery, /en/viewer 実装手順 1. Middleware設定（重要） next-intl は middleware を使用してロケールのルーティングを処理します。静的ファイルが middleware によってリダイレクトされないよう、matcher の設定が重要です。 // middleware.ts import createMiddleware from 'next-intl/middleware' import { routing } from './src/i18n/routing' export default createMiddleware(routing) export const config = { // Skip middleware for static files and API routes matcher: ['/((?!api|_next|.*\\..*).*)'] } 注意 : .*\\..* は「ドットを含むパス」を除外します。これにより /og-image.png などの静的ファイルがmiddlewareをスキップし、正常にアクセスできるようになります。 2. ルーティング設定 // src/i18n/routing.ts import { defineRouting } from 'next-intl/routing' export const routing = defineRouting({ locales: ['ja', 'en'], defaultLocale: 'ja', localePrefix: 'as-needed' }) 3. ナビゲーションヘルパーの作成 next-intl が提供する createNavigation を使用して、ロケール対応のナビゲーションヘルパーを作成します。 ...

2025年11月30日 · 更新: 2025年11月30日 · 2 分 · Nakamura

Next.js 15対応多言語・ダークモード対応SSGテンプレート

この記事は人間が実装を確認し、AIが記事を作成しました。概要このテンプレートは、Next.js 15を使用した静的サイト生成（SSG）に対応し、多言語対応とダークモードを標準装備したWebアプリケーション開発の出発点です。TypeScript、Tailwind CSS、next-intl、next-themesを組み合わせています。 https://nextjs-i18n-themes-ssg-template.vercel.app/ja/ 主な機能 1. 静的サイト生成（SSG） output: 'export'によるフルスタティックエクスポート高速なページロードとSEO最適化ホスティングコストの削減 2. 国際化対応（i18n） next-intlによる完全な多言語サポート日本語・英語対応（簡単に言語追加可能） URLベースの言語切り替え（/ja/about、/en/about）型安全な翻訳キー 3. ダークモード next-themesによるシステム連動ダークモードユーザーの好みを自動検出スムーズなテーマ切り替えアニメーション LocalStorageによる設定の永続化 4. 開発者体験の向上 TypeScriptによる型安全性 Tailwind CSSによる効率的なスタイリング ESLintによるコード品質管理統一されたコンポーネント構造技術スタック { "dependencies": { "next": "^15.4.4", "react": "^19.1.0", "next-intl": "^4.3.4", "next-themes": "^0.4.6", "tailwindcss": "^4.1.11", "@tailwindcss/typography": "^0.5.16" } } プロジェクト構造 src/ ├── app/ │ ├── [locale]/ │ │ ├── layout.tsx # ルートレイアウト │ │ ├── page.tsx # ホームページ │ │ ├── about/ # Aboutページ │ │ └── example/ # サンプルページ │ ├── icon.svg # ファビコン │ └── sitemap.ts # サイトマップ生成 ├── components/ │ ├── layout/ # レイアウトコンポーネント │ │ ├── Header.tsx │ │ ├── Footer.tsx │ │ ├── PageLayout.tsx │ │ ├── ToggleTheme.tsx │ │ └── ToggleLanguage.tsx │ └── page/ # ページ固有コンポーネント ├── i18n/ │ └── routing.ts # i18n設定 └── messages/ # 翻訳ファイル ├── en.json └── ja.json 特徴的な実装 1. sitemap.ts の静的エクスポート対応 export const dynamic = 'force-static'; export const revalidate = false; export default function sitemap(): MetadataRoute.Sitemap { // 実装 } 2. 統一されたページレイアウト <PageLayout breadcrumbItems={breadcrumbItems} title={t('title')} description={t('description')} > <YourContent /> </PageLayout> 3. 環境変数による設定 # .env.example NEXT_PUBLIC_SITE_URL=http://localhost:3000 NEXT_PUBLIC_BASE_PATH= 使い方インストール git clone [repository-url] cd nextjs-i18n-themes-ssg-template npm install 開発 npm run dev ビルド npm run build カスタマイズポイント言語追加 : src/i18n/routing.tsとmessages/ディレクトリページ追加 : src/app/[locale]/配下に新規ディレクトリテーマカスタマイズ : tailwind.config.jsとグローバルCSS メタデータ : 各ページのgenerateMetadata関数ベストプラクティスコンポーネント命名 : PascalCaseを使用翻訳キー : ネストした構造で整理型安全性 : TypeScriptの型を最大限活用パフォーマンス : 静的生成を活用したキャッシュ戦略まとめ国際化対応とダークモード機能を標準装備し、SEOに最適化された静的サイトを素早く構築できるよう目指しています。開発者の生産性を向上させながら、エンドユーザーに優れた体験を提供していきたいと思います。 ...

2025年7月26日 · 更新: 2025年7月26日 · 2 分 · Nakamura

Nuxt i18nのブラウザ言語検出を無効化する方法

概要（ChatGPTによる作成） Nuxt i18nモジュールでは、ユーザーのブラウザ言語を検出して、適切な言語のページにリダイレクトする機能があります。しかし、特定の状況ではこの機能を無効化したい場合もあります。この記事では、detectBrowserLanguage: falseを使用してブラウザ言語検出を完全に無効化する方法について解説します。 https://v8.i18n.nuxtjs.org/guide/browser-language-detection 設定方法ブラウザの言語検出機能を無効にするには、nuxt.config.jsファイルでdetectBrowserLanguageオプションをfalseに設定します。 export default defineNuxtConfig({ // その他の設定 i18n: { // 言語検出を無効化 detectBrowserLanguage: false }, // その他の設定 }) これが役立つケース特定のURLで直接アクセスさせたい場合 : 特定のコンテンツをユーザーが直接訪れることを意図している場合、リダイレクトが邪魔になることがあります。クロールの最適化 : 検索エンジンのクローラーが特定の言語ページに直接アクセスできるようにしたい場合。一貫性のあるユーザーエクスペリエンス : 例えば、リンクされた言語のページ同士を行き来するユーザーに対して、予想外のリダイレクトを避けたい場合。まとめ detectBrowserLanguage: falseを利用することで、ユーザー体験やSEO最適化のために、リダイレクトに頼らずにサイトのアクセスを制御できます。適切な状況でこの設定を利用することで、サイトのユーザビリティを向上させることができます。ブラウザの言語設定に影響されずに、指定した言語ページをユーザーに見てもらいたいときに、この設定を試してみてください。

2025年4月10日 · 更新: 2025年4月10日 · 1 分 · Nakamura

Next.jsで多言語対応の静的サイトを構築する

はじめにこの記事は、GPT-4oによって生成された内容です。Next.jsを使用して多言語対応の静的サイトを構築する方法について説明します。特に、メイン言語にはURLプレフィックスを付けず、その他の言語にはプレフィックスを付ける設定に焦点を当てます。GitHub Pagesを使用してデプロイする設定も含まれています。プロジェクトのセットアップまず、Next.jsのプロジェクトを作成します。create-next-appを使用してプロジェクトを初期化します。 npx create-next-app@latest next-intl-ssg 必要なパッケージのインストール多言語対応のために、next-intlをインストールします。 npm install next-intl プロジェクト構成プロジェクトのディレクトリ構成は以下の通りです。 src/app/[locale]/about/page.tsx src/app/about/page.tsx src/lib/i18n.ts src/components/I18nProvider.tsx src/i18n/ja.json src/i18n/en.json 多言語対応の実装 next-intlを使用して、言語ごとのメッセージを管理します。src/lib/i18n.tsでメッセージを取得する関数を定義しています。 export async function getMessages(locale: string) { return (await import(`@/i18n/${locale}.json`)).default; } I18nProviderコンポーネントを使用して、各ページでメッセージを提供します。 import { ReactNode } from 'react'; import { NextIntlClientProvider } from 'next-intl'; export default function I18nProvider({ children, locale, messages }: { children: ReactNode; locale: string; messages: Record<string, Record<string, string>>; }) { return ( <NextIntlClientProvider locale={locale} messages={messages}> {children} </NextIntlClientProvider> ); } SSGの設定 generateStaticParams関数を使用して、静的ページを生成する際のパラメータを設定します。メイン言語（日本語）にはプレフィックスを付けず、その他の言語にはプレフィックスを付けます。 // src/app/[locale]/about/page.tsx export function generateStaticParams() { return locales.filter(locale => locale !== 'ja').map(locale => ({ locale })); } GitHub Pagesへのデプロイ GitHub Actionsを使用して、GitHub Pagesにデプロイします。.github/workflows/deploy.ymlでデプロイの設定を行います。 name: Deploy to GitHub Pages on: push: branches: [main] workflow_dispatch: permissions: contents: read pages: write id-token: write concurrency: group: "pages" cancel-in-progress: false jobs: build: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v4 - name: Setup Node uses: actions/setup-node@v4 with: node-version: "20" cache: "npm" - name: Install dependencies run: npm ci - name: Build run: npm run build - name: Upload artifact uses: actions/upload-pages-artifact@v3 with: path: ./out deploy: environment: github-pages runs-on: ubuntu-latest needs: build steps: - name: Deploy to GitHub Pages id: deployment uses: actions/deploy-pages@v4 リンク GitHubリポジトリ: next-intl-ssg GitHub Pages: next-intl-ssg まとめこのブログでは、Next.jsを使用して多言語対応の静的サイトを構築し、メイン言語にはプレフィックスを付けず、その他の言語にはプレフィックスを付ける方法を紹介しました。next-intlを活用することで、簡単に多言語対応が可能になります。ぜひ試してみてください。 ...

2025年2月28日 · 更新: 2025年2月28日 · 1 分 · Nakamura