ブログ

LunariaJSローカライズダッシュボード：翻訳進捗を一目で把握

LunariaJSローカライズダッシュボードの機能と使い方を詳しく紹介。ダッシュボードで翻訳状態を追跡し、古い翻訳を特定し、欠落しているコンテンツを発見する方法を学び、ローカライズ管理の効率を向上させます。

LibDoc Team 2026年3月6日 LunariaJS 連載 52 分で読める
#LunariaJS #Dashboard #ダッシュボード #ローカライズ

LunariaJSローカライズダッシュボード：翻訳進捗を一目で把握

これまでの記事で、LunariaJSのインストール、設定、実行方法を学びました。今日は、LunariaJSの最も強力な機能「ローカライズダッシュボード」について詳しく解説し、多言語プロジェクトを効率的に管理する方法を学びましょう。

💡 公式ドキュメント：LunariaJS 日本語ドキュメント - ダッシュボード

ダッシュボード概要

ローカライズダッシュボードとは？

ローカライズダッシュボードは、プロジェクトの翻訳状態を可視化するインターフェースです。メンテナーが最も気にするいくつかの質問に答えます：

  • 全体の進捗はどう？ 各言語の翻訳完了率は？
  • どのファイルに注目が必要？ どの翻訳が古い？どれがまだ欠けている？
  • 翻訳品質はどう？ 翻訳はソースドキュメントと同期している？

なぜダッシュボードが必要？

従来のローカライズ管理では、翻訳状態の追跡に通常以下が必要：

  • スプレッドシートを手動でメンテナンス
  • ファイルに各種TODOコメントを追加
  • 貢献者が自分で進捗を報告することに依存

これらの方法には明らかな問題があります：情報が分散、更新が遅い、メンテナンスが困難。

LunariaJSダッシュボードは自動化でこれらの問題を解決：

  • 自動更新：ビルド時に翻訳状態を自動分析
  • 一元表示：すべての言語、すべてのファイルの状態を一目で確認
  • リアルタイム同期：Gitリポジトリの状態と完全に同期

ダッシュボードインターフェースの解説

メインインターフェースのレイアウト

ダッシュボードにアクセスすると、明確なインターフェースが表示されます：

┌─────────────────────────────────────────────────────────────┐
│  🌙 My Project - Localization Status                        │
├─────────────────────────────────────────────────────────────┤
│  [言語セレクター]  [状態フィルター]                           │
├─────────────────────────────────────────────────────────────┤
│  全体進捗                                                    │
│  ┌─────────────────────────────────────────────────────────┐│
│  │  🇺🇸 English (source) ████████████████████ 100%         ││
│  │  🇨🇳 中文              ██████████████░░░░░░  85%         ││
│  │  🇯🇵 日本語            ████████████░░░░░░░░░░ 70%         ││
│  │  🇰🇷 한국어            ████████░░░░░░░░░░░░░░ 55%         ││
│  └─────────────────────────────────────────────────────────┘│
├─────────────────────────────────────────────────────────────┤
│  ファイルリスト                                              │
│  ┌─────────────────────────────────────────────────────────┐│
│  │  📄 index.md                    🟢 🟢 🟢 🟢             ││
│  │  📄 getting-started.md          🟢 🟢 🟡 🟢             ││
│  │  📄 configuration.md            🟢 🟢 🟢 🔴             ││
│  │  📄 api/overview.md             🟢 🔴 🔴 🔴             ││
│  └─────────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────────┘

エリアの説明

1. トップナビゲーションバー

  • プロジェクトタイトル
  • 言語切り替え（多言語インターフェースをサポートする場合）
  • テーマ切り替え（ライト/ダークモード）

2. 言語セレクター

特定の言語で表示内容をフィルタリング：

[すべての言語 ▼]  [English]  [中文]  [日本語]  [한국어]

3. 状態フィルター

翻訳状態でファイルをフィルタリング：

[すべての状態 ▼]  [✅ 完了]  [⚠️ 古い]  [❌ 欠落]

4. 全体進捗エリア

各言語の全体翻訳完了率を表示：

要素説明
言語フラグ/アイコン言語識別
言語名言語の完全名
プログレスバー完了率を可視化
パーセンテージ具体的な完了率

5. ファイルリストエリア

追跡されているすべてのファイルとその翻訳状態をリスト表示。

翻訳状態の詳細解説

LunariaJSは3つの状態で各翻訳ファイルの状態を識別します。

🟢 Done（完了）

意味：翻訳が完了し、ソースファイルと同期している。

判定条件：

  • 翻訳ファイルが存在する
  • 翻訳ファイルの最終更新時刻 ≥ ソースファイルの最終更新時刻

例：

📄 getting-started.md
├── ソース: en/getting-started.md (2026-02-28に更新)
├── 翻訳: zh-cn/getting-started.md (2026-02-27に更新) ✅
└── 状態: 🟢 完了

アクション推奨：操作不要、翻訳は最新です。

🟡 Outdated（古い）

意味：翻訳は存在するが、ソースファイルが更新されており、翻訳の同期が必要。

判定条件：

  • 翻訳ファイルが存在する
  • 翻訳ファイルの最終更新時刻 < ソースファイルの最終更新時刻

例：

📄 configuration.md
├── ソース: en/configuration.md (2026-02-28に更新)
├── 翻訳: ja/configuration.md (2026-02-20に更新) ⚠️
└── 状態: 🟡 古い（8日遅れ）

アクション推奨：

  1. ソースファイルの最新変更を確認
  2. 翻訳ファイルを更新
  3. 更新された翻訳をコミット

🔴 Missing（欠落）

意味：翻訳ファイルが存在しない。

判定条件：

  • 翻訳ファイルが予期されるパスに存在しない

例：

📄 api/overview.md
├── ソース: en/api/overview.md (存在)
├── 翻訳: ko/api/overview.md (存在しない) ❌
└── 状態: 🔴 欠落

アクション推奨：

  1. 翻訳ファイルを作成
  2. ソースファイルの内容を翻訳
  3. 新しい翻訳をコミット

ファイル状態の追跡

単一ファイルの状態確認

ファイル名をクリックして詳細情報を確認：

┌─────────────────────────────────────────────────────────────┐
│  📄 getting-started.md                                      │
├─────────────────────────────────────────────────────────────┤
│  ソースファイルパス: docs/en/getting-started.md              │
│  最終更新: 2026-02-28 14:30 (commit: abc1234)               │
│  ファイルサイズ: 4.2 KB                                      │
├─────────────────────────────────────────────────────────────┤
│  翻訳状態                                                    │
│  ┌─────────────────────────────────────────────────────────┐│
│  │  🇺🇸 English (source)  ✅ ソースファイル                ││
│  │  🇨🇳 中文              ✅ 完了 (2026-02-28)             ││
│  │  🇯🇵 日本語            ⚠️ 古い 8日 (2026-02-20)         ││
│  │  🇰🇷 한국어            ❌ 欠落                          ││
│  └─────────────────────────────────────────────────────────┘│
├─────────────────────────────────────────────────────────────┤
│  [ソースを見る]  [翻訳を編集]                                │
└─────────────────────────────────────────────────────────────┘

バッチ状態分析

ダッシュボードはバッチ分析ビューを提供し、問題領域を素早く特定：

言語別分析：

言語状態サマリー
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
言語      完了    古い    欠落    合計
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
中文      38      3       1       42
日本語    30      8       4       42
한국어    25      10      7       42
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

ディレクトリ別分析：

ディレクトリ状態サマリー
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ディレクトリ         完了率   古い    欠落
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
docs/             85%       5       2
docs/api/         60%       8       4
docs/guide/       90%       2       1
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Gitコミットとの連携

ダッシュボードはGit履歴と深く統合されており、各状態は具体的なコミットに関連付けられています：

📄 configuration.md

変更履歴:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📌 2026-02-28 abc1234 "Update configuration docs"
   修正者: @username
   変更: +15 -3 lines

📌 2026-02-20 def5678 "Add new config options"
   修正者: @another-user
   変更: +8 lines
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

このファイルは2026-02-28に更新、翻訳は8日遅れ。

フィルタリングと検索機能

言語でフィルタリング

特定の言語を選択すると、その言語に関連する翻訳状態のみ表示：

// フィルタリングロジック
filterByLanguage('zh-cn')  // 中国語の翻訳状態のみ表示

使用シナリオ：

  • 中国語翻訳担当者が中国語の翻訳進捗のみを確認したい
  • 特定言語の欠落翻訳を素早く特定

状態でフィルタリング

処理が必要なファイルを素早くフィルタリング：

フィルターオプション表示内容使用シナリオ
すべての状態すべてのファイル全体状況を確認
完了のみ🟢 緑色状態成果を祝い、完了項目を確認
古いのみ🟡 黄色状態最もよく使う - 更新が必要な翻訳を特定
欠落のみ🔴 赤色状態完全に翻訳されていないファイルを特定

ファイルパスで検索

ファイルパスのあいまい検索をサポート：

検索: [api___________]

結果:
📄 api/overview.md
📄 api/authentication.md
📄 api/endpoints/users.md
📄 api/endpoints/posts.md

フィルターの組み合わせ

複数のフィルター条件を組み合わせ可能：

言語: [中国語 ▼]  状態: [古い ▼]  検索: [guide]

結果:
📄 guide/installation.md      🟡 古い 3日
📄 guide/configuration.md     🟡 古い 8日

ダッシュボードのカスタマイズ

カスタムテーマ

CSS変数でダッシュボードの外観をカスタマイズ：

/* lunaria-theme.css */
:root {
  --lunaria-color-primary: #6366f1;
  --lunaria-color-success: #22c55e;
  --lunaria-color-warning: #eab308;
  --lunaria-color-danger: #ef4444;

  --lunaria-bg-primary: #ffffff;
  --lunaria-bg-secondary: #f8fafc;
  --lunaria-text-primary: #1e293b;
  --lunaria-text-secondary: #64748b;
}

.dark {
  --lunaria-bg-primary: #0f172a;
  --lunaria-bg-secondary: #1e293b;
  --lunaria-text-primary: #f8fafc;
  --lunaria-text-secondary: #94a3b8;
}

設定のカスタマイズ

lunaria.config.jsonでダッシュボードをカスタマイズ：

{
  "dashboard": {
    "outputDir": "public/i18n-status",
    "title": "My Project Localization Status",
    "description": "Track the translation progress of our documentation",
    "uiLanguage": "ja",
    "customCss": "./lunaria-theme.css",
    "favicon": "./public/favicon.ico"
  }
}

既存サイトへの統合

ダッシュボードを既存のドキュメントサイトに埋め込み：

方法1：サブパスとして

// astro.config.mjs
export default defineConfig({
  integrations: [
    starlight({
      title: 'My Docs',
      // ダッシュボードは /i18n-status パスに
    }),
  ],
});

方法2：ナビゲーションリンク

// ドキュメントサイトのナビゲーションにリンクを追加
{
  label: '翻訳状態',
  link: '/i18n-status/',
  icon: 'translate',
}

カスタムバッジの追加

ダッシュボードにカスタムバッジ表示を追加：

{
  "dashboard": {
    "badges": [
      {
        "label": "中国語翻訳",
        "status": "85%",
        "color": "green"
      },
      {
        "label": "日本語翻訳",
        "status": "70%",
        "color": "yellow"
      }
    ]
  }
}

実用テクニック

1. ダッシュボードを定期的に確認

以下のタイミングでダッシュボードを確認することを推奨：

  • 毎週のチームミーティング前
  • 新しいバージョンをリリースする前
  • ソースドキュメントを追加した後
  • 翻訳貢献者がPRを提出した後

2. ダッシュボードでタスクを割り当て

ダッシュボードのスクリーンショットまたはリンクを翻訳チームと共有：

## 今週の翻訳タスク

[LunariaJSダッシュボード](/i18n-status/)を確認してください

優先度：
1. 🟡 古い翻訳（8ファイル）
2. 🔴 欠落している翻訳（4ファイル）

目標：今週中にすべての古い翻訳の更新を完了。

3. 進捗目標を設定

ダッシュボードのタイトルに目標を表示：

{
  "dashboard": {
    "title": "翻訳進捗 (目標: 3月末までに90%達成)"
  }
}

4. ダッシュボードデータの活用

ダッシュボードが生成したJSONデータは他の用途にも使用可能：

// data/status.json
{
  "summary": {
    "total": 42,
    "zh-cn": { "done": 38, "outdated": 3, "missing": 1 },
    "ja": { "done": 30, "outdated": 8, "missing": 4 }
  }
}

このデータを使用して：

  • 自動レポートを生成
  • READMEにバッジを表示
  • CI/CDの条件をトリガー

ダッシュボードのベストプラクティス

1. ダッシュボードを最新に保つ

// package.json
{
  "scripts": {
    "build": "astro build && lunaria build",
    "dev": "concurrently \"astro dev\" \"lunaria build --watch\""
  }
}

2. チームでアクセスを共有

  • ダッシュボードを公開URLにデプロイ
  • 貢献ガイドにダッシュボードリンクを追加
  • 定期的にコミュニティチャンネルで進捗を共有

3. 品質目標を設定

指標目標チェック頻度
全体完了率≥ 90%毎週
古い翻訳≤ 5ファイル各PR
欠落翻訳0リリース前

4. ダッシュボードとIssueの統合

GitHub Issueでダッシュボードを参照：

## 翻訳タスク

getting-started.mdを中国語に翻訳してください。

参照：[ダッシュボード状態](/i18n-status/#getting-started.md)

まとめ

LunariaJSローカライズダッシュボードのコア価値：

機能価値
可視化進捗翻訳完了率を一目で理解
状態追跡古い翻訳と欠落翻訳を自動的に特定
Git統合翻訳状態とコード履歴が同期
フィルタリングと検索処理が必要なファイルを素早く特定
カスタマイズ可能プロジェクトブランドとワークフローに適応

重要なポイント：

  • 3つの状態：🟢 完了、🟡 古い、🔴 欠落
  • フィルター機能で素早く問題を特定
  • 定期的にダッシュボードを確認して翻訳を同期
  • チームとダッシュボードを共有してコラボレーション効率を向上

次のステップ

次の記事では、LunariaJSとGitの深い統合について詳しく解説し、以下を学びます：

  • Gitでローカライズ変更を追跡
  • 古い翻訳検出の原理を理解
  • 効率的なチームコラボレーションワークフローを設計
  • ブランチ戦略での翻訳問題を解決

お楽しみに！

💡 おすすめ読書：