WebVTT字幕

Lingo.dev CLIによるWebVTT字幕ファイルのAI翻訳

WebVTT字幕とは?

WebVTT(Web Video Text Tracks)字幕は、HTML5ビデオでタイムド・テキスト・トラックを表示するためのフォーマットです。スタイリング、配置、メタデータをサポートしており、SRTよりも機能が豊富です。

例:

WEBVTT

NOTE
Product demonstration video with captions

1
00:00:01.000 --> 00:00:03.500
Welcome to our software tutorial

subtitle-2
00:00:04.000 --> 00:00:07.200
Let's explore the main features

3
00:00:08.500 --> 00:00:12.000 align:middle line:90%
Here's how to create your first project

Lingo.dev CLIとは?

Lingo.dev CLIは、AIを使用してアプリやコンテンツを翻訳するための無料のオープンソースCLIです。従来の翻訳管理ソフトウェアを置き換えながら、既存のパイプラインと統合できるように設計されています。

詳細については、概要を参照してください。

このガイドについて

このガイドでは、Lingo.dev CLIを使用してWebVTT字幕ファイルを翻訳する方法を説明します。

以下の方法を学習します:

  • ゼロからプロジェクトを作成する
  • 翻訳パイプラインを設定する
  • AIで翻訳を生成する

前提条件

Lingo.dev CLIを使用するには、Node.js v18以降がインストールされていることを確認してください:

❯ node -v
v22.17.0

ステップ 1. プロジェクトをセットアップする

プロジェクトのディレクトリに、i18n.jsonファイルを作成します:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

このファイルは、翻訳する言語やファイルシステム上のローカライズ可能なコンテンツの場所など、翻訳パイプラインの動作を定義します。

使用可能なプロパティの詳細については、i18n.jsonを参照してください。

ステップ 2. ソースロケールを設定する

_ソースロケール_は、コンテンツが記述された元の言語と地域です。ソースロケールを設定するには、i18n.jsonファイルのlocale.sourceプロパティを設定します:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

ソースロケールは、BCP 47言語タグとして指定する必要があります。

Lingo.dev CLIがサポートするロケールコードの完全なリストについては、サポートされているロケールコードを参照してください。

ステップ3. ターゲットロケールの設定

_ターゲットロケール_は、コンテンツを翻訳したい言語と地域です。ターゲットロケールを設定するには、i18n.jsonファイルのlocale.targetsプロパティを設定します:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

ステップ4. ソースコンテンツの作成

まだ作成していない場合は、翻訳するコンテンツを含む1つ以上のWebVTT字幕ファイルを作成します。これらのファイルは、パスのどこかにソースロケールを含む場所に配置する必要があります(例:en/のようなディレクトリ名、またはmessages.en.vttのようなファイル名の一部として)。

ステップ5. バケットの作成

  1. i18n.jsonファイルで、bucketsオブジェクトに"vtt"オブジェクトを追加します:

    {
      "$schema": "https://lingo.dev/schema/i18n.json",
      "version": "1.10",
      "locale": {
        "source": "en",
        "targets": ["es"]
      },
      "buckets": {
        "vtt": {}
      }
    }
    
  2. "vtt"オブジェクトで、1つ以上のincludeパターンの配列を定義します:

    {
      "$schema": "https://lingo.dev/schema/i18n.json",
      "version": "1.10",
      "locale": {
        "source": "en",
        "targets": ["es"]
      },
      "buckets": {
        "vtt": {
          "include": ["./[locale]/example.vtt"]
        }
      }
    }
    

    これらのパターンは、翻訳するファイルを定義します。

    パターン自体は:

    • 設定されたロケールのプレースホルダーとして[locale]を含む必要があります
    • ファイルパスを指定できます(例:"[locale]/video.vtt")
    • ワイルドカードプレースホルダーとしてアスタリスクを使用できます(例:"[locale]/*.vtt")

    再帰的なglobパターン(例:**/*.vtt)はサポートされていません。

ステップ6. LLMの設定

Lingo.dev CLIは、大規模言語モデル(LLM)を使用してAIでコンテンツを翻訳します。これらのモデルのいずれかを使用するには、サポートされているプロバイダーからAPIキーが必要です。

できるだけ早く使い始めるために、Lingo.dev Engineの使用をお勧めします。これは、毎月10,000トークンの無料利用を提供する当社独自のホスト型プラットフォームです:

  1. Lingo.devアカウントにサインアップします。

  2. 次のコマンドを実行します:

    npx lingo.dev@latest login
    

    デフォルトのブラウザが開き、認証を求められます。

  3. プロンプトに従って操作します。

ステップ7. 翻訳を生成する

i18n.jsonファイルが含まれるディレクトリで、次のコマンドを実行します:

npx lingo.dev@latest run

このコマンドは:

  1. i18n.jsonファイルを読み込みます。
  2. 翻訳が必要なファイルを検索します。
  3. ファイルから翻訳可能なコンテンツを抽出します。
  4. 設定されたLLMを使用して抽出されたコンテンツを翻訳します。
  5. 翻訳されたコンテンツをファイルシステムに書き込みます。

翻訳が初めて生成されると、i18n.lockファイルが作成されます。このファイルは、どのコンテンツが翻訳されたかを追跡し、後続の実行で不要な再翻訳を防ぎます。

en/example.vtt

WEBVTT

NOTE
Product demonstration video with captions

1
00:00:01.000 --> 00:00:03.500
Welcome to our software tutorial

subtitle-2
00:00:04.000 --> 00:00:07.200
Let's explore the main features

3
00:00:08.500 --> 00:00:12.000 align:middle line:90%
Here's how to create your first project

00:00:13.000 --> 00:00:16.500
Click the New Project button
to get started

final-cue
00:00:17.000 --> 00:00:20.000 position:25% align:start
That completes our basic tutorial

es/example.vtt

WEBVTT

NOTE
Video de demostración de producto con subtítulos

1
00:00:01.000 --> 00:00:03.500
Bienvenido a nuestro tutorial de software

subtitle-2
00:00:04.000 --> 00:00:07.200
Exploremos las características principales

3
00:00:08.500 --> 00:00:12.000 align:middle line:90%
Aquí está cómo crear tu primer proyecto

00:00:13.000 --> 00:00:16.500
Haz clic en el botón Nuevo Proyecto
para comenzar

final-cue
00:00:17.000 --> 00:00:20.000 position:25% align:start
Eso completa nuestro tutorial básico

i18n.json

{
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "vtt": {
      "include": ["./[locale]/example.vtt"]
    }
  },
  "$schema": "https://lingo.dev/schema/i18n.json"
}

i18n.lock

version: 1
checksums:
  ab6437a18c50af6612bb75499361d64a:
    0#1-3.5#1: 5df3c06b74cfc8558e85ff75a30a9162
    1#4-7.2#subtitle-2: 0de65f1d2616b6959aa79ac5beb6e84c
    2#8.5-12#3: 3351244c032529a099f1191477d9e488
    3#13-16.5#: b9341abc965d5178a96d9bc4e8e2c59a
    4#17-20#final-cue: 0b67e089cd3f39b8520d7a2be9f34362