EN
ホーム 記事一覧 ブック DH週間トピックス 検索 このサイトについて
English
ホーム » Tags

Next.js

Next.js Reactフレームワーク

DTS Viewer の改善 ― 複数 Citation Tree 対応・階層ナビゲーション・XML ブラウザ表示

DTS Viewer の改善 ― 複数 Citation Tree 対応・階層ナビゲーション・XML ブラウザ表示

はじめに 前回の記事で、校異源氏物語テキストDB用 DTS API を 1.0 仕様に対応させ、和歌（短歌）の Citation Tree を追加しました。 本記事では、そのAPIを利用するビューアアプリ「DTS Viewer」側で行った改善について紹介します。 主な改善点は以下の3つです。 複数 Citation Tree への対応 ― tree パラメータの正しい受け渡し ナビゲーション結果の階層表示 ― カード形式からテーブル形式への変更 XML のブラウザ内表示 ― mediaType パラメータの活用 1. 複数 Citation Tree への対応 問題 DTS 1.0 では、1つのリソースに複数の Citation Tree を定義できます。校異源氏物語では「ページ/行」と「和歌」の2つのツリーを持っています。 しかし、ビューアのナビゲーションリンクが tree パラメータを付与していなかったため、和歌ツリーのリンクをクリックしてもデフォルト（ページ/行）のナビゲーションが表示される問題がありました。 対応 Citation Tree の identifier を追跡し、ナビゲーション URL に &tree=${identifier} を付与するようにしました。 const getNavigationUrl = (navigation: string, url: string, level: number, tree?: string) => { navigation = decodeURIComponent(navigation); navigation = removeVars(navigation) + `&down=${level}`; if (tree) { navigation += `&tree=${tree}`; } const combined = getDomain(url) + navigation; return encodeURIComponent(combined); }; ツリー構造の視覚化 各 Citation Tree をツリー形式で表示し、description ラベルで区別できるようにしました。 リソース詳細ページ。「ページ・行による引用構造」と「和歌（短歌）による引用構造」が視覚的に分かれて表示されている。 ...

2026年3月8日 · 3 分 · Nakamura
歴史資料をAIで検索できるRAGアプリを作った技術スタック

歴史資料をAIで検索できるRAGアプリを作った技術スタック

はじめに ある研究プロジェクトの成果報告書（全10巻）を対象に、自然言語で質問すると関連資料を検索し、出典付きで回答してくれる RAG（Retrieval-Augmented Generation）アプリケーションを開発しました。 本記事では、このアプリの技術スタックと設計上の判断について紹介します。 アーキテクチャ全体像 ユーザー ↓ 質問 Next.js (App Router) ↓ API Route クエリ補完 (LLM) ↓ 補完された検索クエリ Embedding生成 (text-embedding-3-small) ↓ ベクトル Pinecone (ベクトル検索, topK=8) ↓ 関連チャンク LLM (Claude Sonnet) ← システムプロンプト + コンテキスト ↓ SSEストリーミング ユーザーに回答表示 フロントエンド Next.js 16 + React 19 + TypeScript App Router を採用し、ページ構成はシンプルに3ページです。 パス 内容 / ランディングページ（質問例へのリンク付き） /chat チャットUI /about サイト概要 チャットページでは useSearchParams を使い、ランディングページの質問例をクリックすると /chat?q=... でそのまま質問が送信される仕組みにしています。 Tailwind CSS v4 スタイリングには Tailwind CSS v4 を使用。v4 では @import "tailwindcss" だけで設定が完了するため、tailwind.config.js が不要になりました。 ...

2026年3月7日 · 3 分 · Nakamura
Annotoriousの描画モードがproduction buildでだけ壊れる

Annotoriousの描画モードがproduction buildでだけ壊れる

はじめに ある日、Vercelにデプロイした IIIF アノテーションエディタで、アノテーションが一切付与できなくなっていることに気づきました。ローカルの開発サーバーでは正常に動作するのに、本番環境でだけ描画モードに入れない。コンソールエラーも出ない。UIのボタンは正しく切り替わるのに、画像上でドラッグしても何も起きない——。 原因は、package.json のキャレット指定（^）による Annotorious の自動アップグレードと、v3.7.13 での状態管理ライブラリ移行が webpack の production build で引き起こす不具合でした。 この記事では、調査過程から根本原因の特定、そして得られた教訓までをまとめます。 環境 フレームワーク : Next.js 15 (App Router) 画像ビューア : OpenSeadragon 5 アノテーション : Annotorious v3 (@annotorious/react + @annotorious/openseadragon) バンドラ : webpack（Next.js 内蔵） デプロイ先 : Vercel 症状 本番環境（Vercel）で以下の症状が発生しました。 矩形・ポリゴンの描画ツールボタンをクリックすると、UIの状態は正しく切り替わる （React の state 更新は正常） しかし Annotorious が描画モードに入らない ——カーソルが crosshair に変わらず auto のまま 画像上でクリック＆ドラッグしてもアノテーションが作成されない コンソールにエラーは一切表示されない Annotorious のアノテーションレイヤー要素（a9s-gl-canvas）自体は DOM 上に正しく描画されている ローカルの next dev では完全に正常動作するため、再現が困難な状況でした。 調査過程 1. Playwright による自動テスト まず Playwright を使って、デプロイ済みサイトに対する自動テストを実施しました。 ...

2026年2月25日 · 更新: 2026年2月25日 · 3 分 · Nakamura
Next.js 15 で発生する `localStorage.getItem is not a function` エラーの原因と対処法

Next.js 15 で発生する `localStorage.getItem is not a function` エラーの原因と対処法

Node.js 25 + Next.js 15 で発生する localStorage.getItem is not a function エラーの原因と対処法 はじめに Next.js 15 のプロジェクトで npm run dev を実行したところ、以下のエラーが発生して開発サーバーが正常に動作しなくなりました。 ⨯ [TypeError: localStorage.getItem is not a function] { digest: '2892703879' } [TypeError: localStorage.getItem is not a function] ⨯ [TypeError: localStorage.getItem is not a function] { page: '/ja' } (node:2405) Warning: `--localstorage-file` was provided without a valid path コード上で localStorage を直接呼び出している箇所はなく、原因の特定に時間がかかりました。本記事では、このエラーの根本原因と対処法を解説します。 環境 Node.js : v25.2.1 Next.js : 15.3.8 next-intl : 4.3.5 OS : macOS (Darwin 25.2.0) エラーの根本原因 このエラーは Node.js 25 で導入された Web Storage API と Next.js 15 の組み合わせで発生します。 ...

2026年2月8日 · 更新: 2026年2月8日 · 3 分 · Nakamura
JavaScriptの演算子優先順位の罠 - Vercelビルドエラーの原因を探る

JavaScriptの演算子優先順位の罠 - Vercelビルドエラーの原因を探る

はじめに Next.jsアプリケーションをVercelにデプロイしようとしたところ、ローカルでは成功するのにVercelでは失敗するという問題に遭遇しました。エラーメッセージは曖昧で、原因の特定に苦労しました。 この記事では、問題の発見から解決までの過程を共有し、JavaScriptの演算子優先順位について学んだことをまとめます。 問題の症状 エラーメッセージ Error occurred prerendering page "/en/smells/22-03" [Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details.] 特徴的な現象 ローカルビルドは成功 するが、Vercelでは失敗 毎回異なるページ でエラーが発生（22-03、24-03、25-04など） エラーの詳細が本番ビルドでは隠される 原因の発見 複数のファイルを調査する中で、以下のコードパターンを発見しました： const origin = process.env.NEXT_PUBLIC_SITE_URL || '' + process.env.NEXT_PUBLIC_BASE_PATH || ''; 一見問題なさそうに見えますが、ここに演算子優先順位の罠 が潜んでいました。 演算子優先順位とは JavaScriptでは、演算子には優先順位があります。数学で「掛け算は足し算より先に計算する」のと同じです。 優先順位の例 // 数学と同じ 2 + 3 * 4 // → 2 + 12 → 14（3 * 4 が先） // 文字列連結 (+) と論理和 (||) の場合 // + の優先順位: 13 // || の優先順位: 5 // → + が先に評価される！ 問題のコードを分解 const origin = process.env.NEXT_PUBLIC_SITE_URL || '' + process.env.NEXT_PUBLIC_BASE_PATH || ''; このコードは以下のように解釈されます： ...

2026年1月28日 · 更新: 2026年1月28日 · 2 分 · Nakamura
Sketchfab APIでGLBファイルをダウンロード・表示するWebアプリを作る

Sketchfab APIでGLBファイルをダウンロード・表示するWebアプリを作る

Sketchfab APIを使って3DモデルをGLBファイルとしてダウンロードし、ブラウザ上でThree.jsで表示するWebアプリを作成しました。本記事では、セキュリティを考慮したアーキテクチャ設計から実装まで解説します。 やりたかったこと Sketchfab上の3DモデルをGLB形式でダウンロードしたい ダウンロードしたGLBをブラウザ上で3D表示したい APIトークンを安全に管理したい 技術スタック Next.js 16（App Router） React Three Fiber / @react-three/drei TypeScript 最初に試したこと：クライアントサイドのみで実装 最初はシンプルにHTML + JavaScriptだけで実装しようとしました。 // Sketchfab APIからダウンロードURLを取得 const response = await fetch( `https://api.sketchfab.com/v3/models/${modelUid}/download`, { headers: { 'Authorization': `Token ${apiToken}` } } ); const data = await response.json(); console.log(data.glb.url); // 署名付きS3 URL これ自体は動作しましたが、2つの問題がありました。 問題1: APIトークンの露出 クライアントサイドでAPIトークンを使用すると、ブラウザの開発者ツールから簡単に確認できてしまいます。APIトークンが漏洩すると、他人があなたのアカウントでAPIを利用できてしまうため、これは避けるべきです。 問題2: CORSエラー（場合による） ブラウザのセキュリティ制限により、異なるオリジンへのリクエストが制限されることがあります。今回のケースでは、Sketchfab APIへのリクエスト自体はCORSが許可されていましたが、環境によっては問題になる可能性があります。 解決策：サーバーサイドAPIを経由する設計 Next.jsのAPI Routesを使って、サーバーサイドでSketchfab APIと通信する設計にしました。 ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │ │ │ │ │ │ │ Client │────▶│ Next.js API │────▶│ Sketchfab API │ │ (Browser) │ │ (Server) │ │ │ │ │◀────│ │◀────│ │ └─────────────────┘ └─────────────────┘ └─────────────────┘ │ │ ┌─────────────────┐ │ │ │ └──────────▶│ S3 (GLB) │ │ 署名付きURL │ └─────────────────┘ ポイント：署名付きURLの活用 Sketchfab APIは、GLBファイルの実体ではなく「署名付きS3 URL」を返します。 ...

2026年1月28日 · 更新: 2026年1月28日 · 2 分 · Nakamura
Next Auth (Auth.js v5) の本番環境で AUTH_URL が必須な理由

Next Auth (Auth.js v5) の本番環境で AUTH_URL が必須な理由

概要 Next Auth (Auth.js v5) を使用したアプリケーションを Docker コンテナや本番環境にデプロイする際、AUTH_URL 環境変数を設定しないと GitHub OAuth 認証で以下のエラーが発生します： Be careful! The redirect_uri is not associated with this application. 開発環境 vs 本番環境 開発環境（npm run dev） 開発環境では Next.js が自動的にホスト情報を検出するため、AUTH_URL の設定は不要 です。 # これだけで動作する npm run dev 本番環境（Docker / npm run build && npm start） 本番環境では Next Auth がホスト情報を自動検出できないため、AUTH_URL の設定が必須 です。 # .env.local または環境変数に追加 AUTH_URL=http://localhost:3000 # または https://your-domain.com AUTH_TRUST_HOST=true Docker での設定例 docker run の場合 docker run -d --name myapp -p 3000:3000 \ --env-file .env.local \ -e AUTH_TRUST_HOST=true \ myapp:latest docker-compose.yml の場合 services: app: image: myapp:latest ports: - "3000:3000" environment: - AUTH_URL=https://your-domain.com - AUTH_TRUST_HOST=true env_file: - .env.local 必要な環境変数一覧 変数名 開発環境 本番環境 説明 AUTH_SECRET 必須 必須 セッション暗号化キー AUTH_GITHUB_ID 必須 必須 GitHub OAuth Client ID AUTH_GITHUB_SECRET 必須 必須 GitHub OAuth Client Secret AUTH_URL 不要 必須 アプリケーションのベースURL AUTH_TRUST_HOST 不要 必須 ホストを信頼する設定 .env.local の例 # NextAuth.js Configuration AUTH_SECRET=your-secret-key-here # GitHub OAuth App Credentials AUTH_GITHUB_ID=your-client-id AUTH_GITHUB_SECRET=your-client-secret # Production only (Docker / deployed environments) AUTH_URL=http://localhost:3000 なぜこの問題が起きるのか 開発環境 : Next.js の開発サーバーがリクエストヘッダーから正確なホスト情報を取得できる 本番環境 : Docker コンテナ内では 0.0.0.0:3000 として起動するため、外部からアクセスする際の実際のURLがわからない OAuth の仕組み : GitHub は登録された redirect_uri と完全一致するURLにのみリダイレクトを許可する トラブルシューティング エラー: “redirect_uri is not associated with this application” 原因 : AUTH_URL が未設定、または GitHub OAuth App の Callback URL と一致しない ...

2026年1月27日 · 更新: 2026年1月27日 · 2 分 · Nakamura
@elastic/react-search-ui を React 19 + Next.js 15.5 で使う方法

@elastic/react-search-ui を React 19 + Next.js 15.5 で使う方法

はじめに React 19 と Next.js 15 を使用しているプロジェクトで @elastic/react-search-ui を使おうとすると、以下のような依存関係エラーに遭遇することがあります。 npm error ERESOLVE could not resolve npm error peer react@">= 16.8.0 < 19" from @elastic/react-search-ui@1.23.1 この記事では、この問題の原因と解決方法を詳しく解説します。 問題の原因 @elastic/react-search-ui@1.23.1 の peer dependency が react@">= 16.8.0 < 19" となっており、React 19 をサポートしていませんでした。 解決策 1. パッケージのアップグレード 2025年5月に PR #1162 がマージされ、React 19 がサポートされました。バージョン 1.24.2 以降を使用します。 // package.json { "dependencies": { - "@elastic/react-search-ui": "^1.23.1", - "@elastic/react-search-ui-views": "^1.23.1", - "@elastic/search-ui": "^1.23.1", + "@elastic/react-search-ui": "^1.24.2", + "@elastic/react-search-ui-views": "^1.24.2", + "@elastic/search-ui": "^1.24.2", - "next": "15.3.8", + "next": "15.5.9", } } 2. 型定義の変更への対応 1.24.2 では WithSearch コンポーネントの型定義が変更されました。SearchContextState の filters が Filter[] | undefined になっています。 ...

2026年1月19日 · 更新: 2026年1月19日 · 2 分 · Nakamura
Next.js + next-auth で GakuNin RDM と OAuth2 連携する

Next.js + next-auth で GakuNin RDM と OAuth2 連携する

はじめに 研究データ管理基盤「GakuNin RDM」と Next.js アプリケーションを OAuth2 で連携する方法を解説します。GakuNin RDM は OSF（Open Science Framework）互換の API を提供しているため、OSF の OAuth2 フローを参考に実装できます。 本記事では、next-auth を使用した実装方法と、アクセストークンの自動リフレッシュ というハマりポイントについて詳しく説明します。 GakuNin RDM とは GakuNin RDM（Research Data Management）は、国立情報学研究所（NII）が提供する研究データ管理サービスです。 URL : https://rdm.nii.ac.jp/ API : OSF 互換 REST API（https://api.rdm.nii.ac.jp/v2/） 認証 : OAuth2（https://accounts.rdm.nii.ac.jp/） 研究者が研究データを安全に保存・共有・公開できるプラットフォームで、学認（GakuNin）認証との連携により、日本の大学・研究機関のユーザーが利用できます。 事前準備 1. OAuth アプリケーションの登録 GakuNin RDM の設定画面から OAuth アプリケーションを登録します。 https://rdm.nii.ac.jp/settings/applications/ にアクセス 「Developer application を登録する」をクリック 以下を設定： Application name : アプリ名 Application homepage URL : http://localhost:3000（開発時） Application description : 説明 Authorization callback URL : http://localhost:3000/api/auth/callback/gakunin 登録後、Client ID と Client Secret が発行されます。 ...

2026年1月6日 · 更新: 2026年1月6日 · 4 分 · Nakamura
Next.js + next-intl での言語切り替え実装ガイド

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
NDL古典籍OCR-lite Next.js版の開発

NDL古典籍OCR-lite Next.js版の開発

概要 @yuta1984 さんが「WebAssemblyを使用したNDL古典籍OCR-liteのWeb移植版」を開発されました。 https://github.com/yuta1984/ndlkotenocr-lite-web 今回は、上記のリポジトリを参考にさせていただき、Next.js版を作成しました。 https://nkol.vercel.app/ja/ 加えて、以下の点を追加しています。 IIIFマニフェストファイルの入力フォーム TEI/XMLファイルのダウンロード機能 出力フォーマットに関するODDファイルの作成 使い方 サンプルとして、九州大学附属図書館の源氏物語を利用させていただきます。 https://catalog.lib.kyushu-u.ac.jp/image/manifest/1/820/411193.json マニフェストファイルを入力し、「読み込む」ボタンを押すと、以下のように、画像の一覧が表示されます。 なお、内部的には、@iiif/parserを利用し、v2とv3、どちらのマニフェストファイルにも対応するようにしています。 その後、処理の実行ボタンを押すと、画像ごとにOCR結果のテキストが表示されます。 実行完了後、画面下部に結果のダウンロードボタンが表示されます。 ODDファイルの作成 TEI/XMLでのエクスポートにあたり、どのようなタグや形式が想定されているのか、という質問をいただくことがありました。 そこで、このフォーマットの共有にあたり、ODD（One Document Does it all）ファイルを作成しました。 このODDファイルの作成については、以下の記事も参考にしてください。 さらに、TEIGarageのAPIを利用し、RNGファイルやHTMLファイルを作成しています。この変換については、以下の記事を参考にしてください。 不完全な部分もありますが、このような方法を採ることで、TEIのエコシステムを活用しながら、スキーマを公開・共有することができそうです。 これまでに作成したツールと今後開発予定のツール これまでの開発 NDL古典籍OCR-liteについては、これまでにいくつかのツールを開発してきました。 まず、Gradio Appを作成しました。こちらは公式に提供されている「デスクトップアプリケーション」で代替可能なものでしたが、スマホやタブレットで撮影した画像に対してOCRをかけるといった用途では有用性があると考えられます。 次に、以下の記事で紹介したように、同じくGradioを用いたウェブアプリですが、IIIFマニフェストファイルを入力とし、TEI/XMLファイルを出力とするアプリを作成しました。IIIFとTEIを接続している点で有用性はありましたが、Hugging Faceの無料枠でアプリを公開しているため、多くの人が同時に使用できる環境ではないという課題がありました。 これらの課題に対して、@yuta1984 さんが作成されたウェブ版を参考に、IIIFとTEIの接続機能を維持しながら、ユーザの端末側でOCR処理を実行する環境を今回構築しました。これにより、複数人が同時に処理を実行できるようになりました。 今後の展望 人手でOCRをかける際には、公式のデスクトップアプリケーションを使用するか、@yuta1984 さんのウェブアプリ、あるいは今回開発したNext.js版のウェブアプリを使用することで、多くのニーズに対応できると考えています。 今後の取り組みとして、API等を介して大量の画像に対して一括でOCR処理を行う場合には、複数のサーバで並列にOCR処理を実行することで効率化を図ることができます。例えば、2000枚を超える画像から構成されるIIIFマニフェストファイルを対象とする際には、並列でOCR処理を行うことが、順次実行するよりも効果的です。 このような処理を実現するため、以下の記事で紹介しているように、Azure Container Appsを使用したスケーラブルなOCR処理システムの構築を進めています。 まだ不完全な点や考慮すべき点は多いものの、サーバレスな環境でOCRを提供することで、大規模な画像に対するOCR処理の実現を目指しています。 まとめ NDL古典籍OCR-liteの活用にあたり、参考になりましたら幸いです。

2025年9月1日 · 更新: 2025年9月1日 · 1 分 · Nakamura
画像コレクション管理ツール 技術アーキテクチャ解説

画像コレクション管理ツール 技術アーキテクチャ解説

概要 以下の記事で、IIIFの機能を簡単に試すことを目的とした「画像コレクション管理」ツールについて紹介しました。 https://zenn.dev/nakamura196/articles/7d6bb4cdc414c4 今回は、このツールの裏側で使われている技術について紹介します。 はじめに 画像コレクション管理ツールは、画像コレクションを国際標準規格であるIIIF（International Image Interoperability Framework）形式で管理・公開するためのWebアプリケーションです。本記事では、このツールの技術的な実装について、特にIIIF仕様の実装と地理空間情報の扱いに焦点を当てて解説します。 技術スタック フロントエンド : Next.js 14 (App Router), React, TypeScript バックエンド : Next.js API Routes データストレージ : AWS S3互換オブジェクトストレージ（Cloudflare R2） 認証 : NextAuth.js 地図表示 : Leaflet, MapLibre GL JS IIIF ビューア : Mirador 3, OpenSeadragon IIIF実装の詳細 1. IIIF Presentation API v2/v3の両方をサポート 本ツールは、IIIF Presentation APIのバージョン2とバージョン3の両方に対応しています。これにより、様々なIIIFビューアとの互換性を確保しています。 v2とv3の主な違い // IIIF v2の構造 { "@context": "http://iiif.io/api/presentation/2/context.json", "@id": "https://example.com/manifest", "@type": "sc:Manifest", "label": "タイトル", "sequences": [{ "@type": "sc:Sequence", "canvases": [...] }] } // IIIF v3の構造 { "@context": "http://iiif.io/api/presentation/3/context.json", "id": "https://example.com/manifest", "type": "Manifest", "label": { "ja": ["タイトル"] }, "items": [...] // canvasの配列 } 2. マルチ言語対応 v3では、ラベルや説明文を言語別に管理できます： ...

2025年8月24日 · 更新: 2025年8月24日 · 3 分 · Nakamura
IIIF 3D Viewerを試作しました。

IIIF 3D Viewerを試作しました。

! 本記事はAIが作成しました。 はじめに デジタルヒューマニティーズの分野において、文化財や歴史的資料の3Dデジタル化が急速に進んでいます。しかし、3Dモデルを単に閲覧するだけでなく、学術的な分析や教育に活用するためには、適切なツールが必要です。本記事では、IIIF（International Image Interoperability Framework）規格に準拠した3Dモデルビューア「IIIF 3D Viewer」について紹介します。 IIIF 3D Viewerとは IIIF 3D Viewerは、IIIF Manifestフォーマットに基づいて3Dモデルを表示し、アノテーション機能を提供するウェブアプリケーションです。 主な特徴 標準規格への準拠 IIIF Presentation API 3.0に準拠 既存のIIIFエコシステムとの親和性 インタラクティブな3D表示 GLB/GLTFフォーマットのサポート マウスやタッチ操作による直感的な操作 WebGLを活用した高速レンダリング アノテーション機能 3Dモデル上の任意の点にアノテーションを追加 3DSelectorタイプによる空間座標の記録 学術的な注釈や解説の付与が可能 多言語対応 日本語・英語のインターフェース 国際的な研究プロジェクトでの利用を想定 静的サイト生成 Next.jsの静的エクスポート機能を活用 GitHub PagesやNetlifyなどで簡単にホスティング可能 技術的な実装 アーキテクチャ 本アプリケーションは、以下の技術スタックで構築されています： フロントエンドフレームワーク : Next.js 15（App Router） 3Dレンダリング : React Three Fiber + Three.js 国際化 : next-intl スタイリング : Tailwind CSS 型安全性 : TypeScript IIIF Manifestの構造 3Dモデルを含むIIIF Manifestの例： { "@context": "http://iiif.io/api/presentation/3/context.json", "id": "https://example.com/manifest.json", "type": "Manifest", "label": { "ja": ["石淵家地球儀"] }, "items": [ { "id": "https://example.com/canvas/1", "type": "Canvas", "items": [ { "id": "https://example.com/annotationpage/1", "type": "AnnotationPage", "items": [ { "id": "https://example.com/annotation/1", "type": "Annotation", "motivation": "painting", "body": { "id": "https://example.com/model.glb", "type": "Model", "format": "model/gltf-binary" }, "target": "https://example.com/canvas/1" } ] } ] } ] } アノテーションの実装 3D空間におけるアノテーションは、以下のような構造で表現されます： ...

2025年7月29日 · 更新: 2025年7月29日 · 1 分 · Nakamura
Next.js 15対応 多言語・ダークモード対応SSGテンプレート

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
Next.js 15 で output: 'export' 使用時の sitemap.ts 実装方法

Next.js 15 で output: 'export' 使用時の sitemap.ts 実装方法

この記事は人間が実装を確認したのち、AIが記事を執筆しました。 背景 Next.js 15で静的サイト生成（output: 'export'）を使用する際、sitemap.tsの実装でエラーが発生する場合があります。 Error: export const dynamic = "force-static"/export const revalidate not configured on route "/sitemap.xml" with "output: export". 解決方法 この問題は、sitemap.tsに以下の2つのエクスポートを追加することで解決できます： // src/app/sitemap.ts import { MetadataRoute } from 'next'; export const dynamic = 'force-static'; export const revalidate = false; export default function sitemap(): MetadataRoute.Sitemap { // sitemap生成ロジック } 実装例 import { MetadataRoute } from 'next'; import { routing } from '@/i18n/routing'; export const dynamic = 'force-static'; export const revalidate = false; export default function sitemap(): MetadataRoute.Sitemap { const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'; const staticPages = [ '', // Home page '/about', '/example', ]; const sitemapEntries: MetadataRoute.Sitemap = routing.locales.flatMap((locale) => staticPages.map((page) => ({ url: `${baseUrl}/${locale}${page}`, lastModified: new Date(), changeFrequency: page === '' ? 'daily' : 'weekly' as const, priority: page === '' ? 1 : 0.8, })) ); return sitemapEntries; } 動作確認 この実装により、npm run build実行時に/out/sitemap.xmlが正常に生成されます。 注意点 dynamic = 'force-static'のみでは不十分で、revalidate = falseも必要です 環境変数やインポートしたモジュールの使用も可能です ビルド時に静的に解決される値であれば、動的な値も使用できます 代替案 もし上記の方法で解決しない場合は、以下の代替案があります： ...

2025年7月26日 · 更新: 2025年7月26日 · 1 分 · Nakamura
Next.js × Search UI × Fuse.js 検索アプリケーション

Next.js × Search UI × Fuse.js 検索アプリケーション

概要 Next.js、Elastic Search UI、Fuse.jsを組み合わせた検索アプリケーションの技術構成と実装について説明します。 作成したサイトは以下です。 https://nsf-psi.vercel.app/ja/ GitHubリポジトリは以下です。 https://github.com/nakamura196/nsf サンプルデータとして、「東京帝國大學本部構内及農學部建物鳥瞰圖（東京大学農学生命科学研究科・農学部）」を使用します。 https://da.dl.itc.u-tokyo.ac.jp/portal/assets/187cc82d-11e6-9912-9dd4-b4cca9b10970 以下はAIが作成しました。 アプリケーション概要 このアプリケーションは、東京大学の建物画像データを対象とした検索システムです。IIIF（International Image Interoperability Framework）プロトコルに対応した建物画像を検索し、地理情報（緯度・経度）やメタデータを表示します。 主な特徴 多言語対応 next-intlによる日本語・英語の多言語対応機能を実装しています。 検索機能 簡易検索 : キーワードによる直感的な検索 詳細検索 : 複数条件を組み合わせた精密な検索（AND/OR条件） ファセット検索 : subject（学部）などカテゴリー別の絞り込み機能 ソート機能 : スコア、タイトル、属性値での並び替え 曖昧検索 : Fuse.jsによる入力ミスに寛容な検索（閾値0.3） UI/UX Tailwind CSSによる洗練されたデザイン ダークモード対応 レスポンシブデザインでモバイルフレンドリー React IconsによるアイコンUI カスタム検索コネクタ Elastic Search UIとFuse.jsを組み合わせたカスタムコネクタを実装し、フロントエンドのみで全文検索機能を実現しています。 地理情報対応 各建物データには緯度・経度情報が含まれています。 技術スタック フロントエンド Next.js 15 (App Router) React 19 TypeScript Tailwind CSS 4.0 検索システム Elastic Search UI（検索インターフェース） Fuse.js（全文検索エンジン） カスタムAPIConnector（独自実装） 国際化 next-intl その他 ...

2025年7月25日 · 更新: 2025年7月25日 · 1 分 · Nakamura
IIIF認証API 2.0の動作確認

IIIF認証API 2.0の動作確認

概要 以下のIIIF認証API 2.0の動作確認を行う機会がありましたので、備忘録です。 https://iiif.io/api/auth/2.0/ 以下のようなデモサイトを作成しました。 https://iiif-auth-nextjs.vercel.app/ja リポジトリは以下です。 https://github.com/nakamura196/iiif-auth-nextjs 以下、AIによる説明です。なお、Miradorではうまく動作させることができなかったため、今後の課題です。 概要 本記事では、IIIF Authentication API 2.0 の認証フローを、実際のHTTPリクエスト/レスポンスのレベルで詳細に解説します。各ステップでどのようなリクエストが送信され、どのようなレスポンスが返されるのかを追跡していきます。 アーキテクチャ概要 ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ Client │────▶│ IIIF Server │────▶│Auth Service │ │ (Browser) │◀────│ │◀────│ │ └─────────────┘ └─────────────┘ └─────────────┘ 認証フローの詳細 Step 1: 初回の画像情報リクエスト（未認証） リクエスト: GET /api/iiif/image/sample/info.json HTTP/1.1 Host: localhost:3001 Accept: application/json 処理フロー（サーバー側）: // app/api/iiif/image/[id]/info.json/route.ts export async function GET(request: NextRequest) { // 1. Authorizationヘッダーを確認 const authHeader = request.headers.get('authorization'); let token = authHeader?.replace('Bearer ', ''); // 2. クエリパラメータもチェック（フォールバック） if (!token) { token = request.nextUrl.searchParams.get('token') || ''; } // 3. トークンの検証 const isValid = token ? await verifyToken(token) : null; // 4. 未認証の場合は401を返す if (!isValid) { return NextResponse.json({ error: 'Authentication required', service: [{ "@context": "http://iiif.io/api/auth/2/context.json", "id": `${request.nextUrl.origin}/api/iiif/probe`, "type": "AuthProbeService2" }] }, { status: 401 }); } } レスポンス: ...

2025年7月25日 · 更新: 2025年7月25日 · 5 分 · Nakamura
「れきちず x Next.js」にルートの登録機能を追加しました。

「れきちず x Next.js」にルートの登録機能を追加しました。

概要 「れきちず x Next.js」はれきちずとNext.jsで作成されたウェブアプリケーションです。 このウェブアプリケーションに、ルートの登録機能を追加しましたので、紹介します。 機能紹介 トップページにアクセスし、「マイルートを管理」ボタンをクリックします。 以下のように、ログインが求められますので、画面右上の「ログイン」ボタンからログインします。 ログイン後、以下のような一覧画面が表示されます。 「ルートをインポート」ボタンを押すと以下のダイアログが表示されます。 「サンプルデータをダウンロード」ボタンを押すと、以下のようなGeoJSON形式のサンプルデータがダウンロードされます。 { "type": "FeatureCollection", "name": "東京観光サンプルルート", "description": "東京駅から皇居への観光ルートのサンプルです", "features": [ { "type": "Feature", "id": "tokyo-station", "properties": { "text": "東京駅", "where": "東京都千代田区丸の内一丁目にある、東日本旅客鉄道・東海旅客鉄道・東京地下鉄の駅", "type": "point" }, "geometry": { "type": "Point", "coordinates": [ 139.7673068, 35.6809591 ] } }, { "type": "Feature", "id": "imperial-palace", "properties": { "text": "皇居", "where": "日本の天皇及び皇族の居所", "type": "point" }, "geometry": { "type": "Point", "coordinates": [ 139.7528, 35.6852 ] } } ] } このファイルをアップロードすると、以下のような編集画面が表示されます。 編集ボタン（鉛筆マーク）から、タイトルや説明文の編集、および個々のマーカーの編集が可能です。 以下のエクスポートボタンを押すと、 geojson.ioでの表示画面に遷移します。 エクスポートの他、ローカル環境にダウンロードすることも可能です。 補足 現在は技術検証を目的として単純な機能の提供のみになっていますが、今後、いろいろな機能拡張を進めたいと思います。 まとめ れきちずやGeoJSONの応用にあたり、参考になりましたら幸いです。

2025年7月23日 · 更新: 2025年7月23日 · 1 分 · Nakamura
ブロックチェーンとPinata IPFSを使用したデジタル文化財管理システムの試作

ブロックチェーンとPinata IPFSを使用したデジタル文化財管理システムの試作

お知らせ: 2025-06-14 開発の経過は以下にまとめています。 https://zenn.dev/nakamura196/books/41693d2d017082 概要 ブロックチェーンの学習にあたり、デジタル文化財の管理システムのプロトタイプを作成しました。ブロックチェーンの学習が目的のため、不足している機能などが多いですが、今後追加・改修を加えていく予定です。 https://digital-heritage-five.vercel.app/ 使用技術 EthereumのSepoliaネットワークを使用しています。ブロックチェーンの学習およびプロトタイプの開発が目的であるため、テストネットワークを使用します。 分散ファイルストレージIPFSのホスティングサービスとして、Pinataを使用しています。 https://pinata.cloud/ 準備 後述する本サイトの使用にあたり、MetaMaskのウォレットの作成や、ETHのSepoliaテストネットの作成などが必要です。また登録にあたっては、ガス代の支払いに必要なSepoliaETHが一定数必要です。 これらの方法については、別の記事で紹介したいと思いますが、インターネット上の記事を参考にしてください。 使い方 以下のURLにアクセスします。 https://digital-heritage-five.vercel.app/ MetaMaskがインストール済みの場合、以下のように表示されます。 「ウォレットを接続」ボタンを押すと、以下の画面が表示されます。 接続後、以下のような画面が表示されます。 サンプルとして、いらすとやさんの画像を利用させていただきます。 https://www.irasutoya.com/2020/12/blog-post_279.html 名前や説明、画像URLを入力して、登録ボタンを押します。 以下の画面が表示されます。確認ボタンを押します。 以下のようにデータが登録されます。 Transactionの確認 Etherscanを使って、取引の内容を確認することができます。 https://sepolia.etherscan.io/tx/0x1234567890abcdef…（例） Input Dataに入力されている文字列は、「スマートコントラクトの関数呼び出しのエンコードされたデータ」とのことです。以下の関数でデコードしてみます。 const ethers = require('ethers'); // デコードするインプットデータ const inputData = '0xb2f262e4...（実際の登録データの例）'; // インプットデータをデコード function decodeInput(input) { try { // 関数シグネチャを取得 const functionSignature = input.slice(0, 10); console.log('Function Signature:', functionSignature); // パラメータデータを取得（最初の4バイトを除く） const paramsData = '0x' + input.slice(10); // デコーダーを作成 const decoder = new ethers.AbiCoder(); // パラメータの型を定義 const types = ['string', 'string', 'string']; // データをデコード const decoded = decoder.decode(types, paramsData); // 結果を表示 console.log('\nDecoded Parameters:'); console.log('Name:', decoded[0]); console.log('Description:', decoded[1]); console.log('Image URL:', decoded[2]); } catch (error) { console.error('デコードエラー:', error); } } // デコードを実行 decodeInput(inputData); 結果、以下のように確認することができました。 ...

2025年6月12日 · 更新: 2025年6月12日 · 1 分 · Nakamura
その２：NDL古典籍OCR-Liteを用いたアノテーション付きIIIFマニフェストファイルとTEI/XMLファイルの作成

その２：NDL古典籍OCR-Liteを用いたアノテーション付きIIIFマニフェストファイルとTEI/XMLファイルの作成

概要 以下の記事で、NDL古典籍OCR-Liteを用いたアノテーション付きIIIFマニフェストファイルとTEI/XMLファイルの作成について紹介しました。 上記について、説明が不十分な点が多かったため、改めて使い方を紹介いたします。 補足 今回の記事執筆に合わせて、以下の改修を加えました。 プロセス1: IIIFマニフェストファイルの作成 IIIF Presentation API v3に対応しました。 プロセス2: TEI/XMLファイルの作成 プロセス1との接続を考慮して、文字列を入力とするフォームを追加 使い方 プロセス1: IIIFマニフェストファイルの作成 以下にアクセスします。 https://nakamura196-ndlkotenocr-lite-iiif.hf.space/ 今回は、IIIF Presentation API v3でマニフェストファイルが公開されている「東北大学総合知デジタルアーカイブ」を対象とします。以下の「源氏物語湖月抄 本居宣長自筆付箋及書入」を対象とします。 https://touda.tohoku.ac.jp/portal/item/10010030012489 IIIFマニフェストファイルのURLは以下です。 https://touda.tohoku.ac.jp/collection/iiif/0/metadata/10010030012489/manifest.json 以下のように入力します。注意点として、「Image Width」を-1に設定してください。これにより、最大ピクセルの画像をダウンロードするようになります。（デフォルト値である1200ピクセルではエラーとなります。） 結果、OCRテキストをアノテーションとして持つIIIFマニフェストファイルのJSON文字列が画面右側に表示されます。以下の赤字で示すコピーボタンを押して、文字列をコピーしておきます。 プロセス2: TEI/XMLファイルの作成 以下にアクセスします。 https://iiif-tei-monorepo-web.vercel.app/ コピーしたJSON文字列を「Paste Manifest JSON」というフォームに貼り付け、Convert to TEI XMLボタンを押します。 結果、TEIに変換され、XMLファイルをダウンロードできます。 Oxygen XML EditorのAuthorモードで表示した例が以下です。 まとめ 使いにくい点も多いかと思いますが、OCRとIIIF・TEIの応用にあたり、参考になりましたら幸いです。

2025年6月6日 · 更新: 2025年6月6日 · 1 分 · Nakamura