世界最高のショートリンク プラットフォームをローカライズしました

Tolgee で遊ぶ一環として、老舗のオープンソース企業である dub.co を他の言語に翻訳してみました。 1 時間かかりましたが、結果は驚くべきものでした!

---

このチュートリアルでは、高速かつ自律的な翻訳管理のために設計されたプラットフォームである Tolgee を使用して、Next.js アプリケーションでローカリゼーションを行う簡単かつ効率的なアプローチを説明します。

Tolgee と Dub.co を統合する方法も学習します。Dub.co は、ユーザーが好みの言語でアプリケーションにアクセスして操作できるようにする人気のリンク管理プラットフォームです。

前提条件

このチュートリアルを完全に理解するには、React または Next.js の基本を理解している必要があります。

次の設定も必要です:

• Tolgee プロジェクト - 少なくとも 2 つの言語翻訳がある既存のプロジェクト。
• Tolgee CLI - コマンド ラインを使用してコンピュータから Tolgee プラットフォームと対話できるようにします。
• Docker - Dub.co の実行に必要です。これは、コンテナ化を使用してアプリケーションの作成、デプロイ、実行を容易にするオープンソース プラットフォームです。
• Docker Compose - マルチコンテナ Docker アプリケーションを定義および実行するためのソフトウェア アプリケーションです。
• Python (バージョン 3.8 以降): Dub.co のパッケージの一部を構成するために必要です。

---

トールジーとは何ですか？

Tolgee は、コードを変更せずにアプリケーションを任意の言語に翻訳できる、開発者にとって使いやすいローカリゼーション プラットフォームです。 Web アプリケーション用に設計されていますが、モバイル アプリケーションやデスクトップ アプリケーションもサポートしています。

Tolgee を使用すると、ソース コード内のキーを探したり、ローカリゼーション ファイルを編集したり、翻訳者が手動でデータをエクスポートしたりする必要がありません。 Tolgee は、コンテキスト内翻訳、すでに翻訳された文字列を追跡するための翻訳メモリ、機械翻訳や自動翻訳などを提供します。

スターのご協力をお願いいたします。 ?

このような記事をもっと作成するのに役立ちますか?

Tolgee リポジトリにスターを付ける ⭐

---

ローカル コンピューターに Dub.co をセットアップする方法

Dub.co は、マーケティング チームがリンクに強力な分析を追加したり、短いリンクを作成したり、リンクの QR コードを生成したりできるようにするオープンソースのリンク管理プラットフォームです。 Steven Tey (元 Vercel) によって作成されました。

次の手順に従って、コンピューターに Dub.co をセットアップします。

以下のコード スニペットを実行して、Dub.co GitHub リポジトリのクローンを作成します。

git clone https://github.com/dubinc/dub.git

dub フォルダーに移動し、プロジェクトの依存関係をインストールします。

git clone https://github.com/dubinc/dub.git

apps/web フォルダー内で、.env.example ファイルの名前を .env に変更します。

新しい Tinybird アカウントを作成し、管理者認証トークンを.env ファイルにコピーします。

pnpm install

packages/tinybird ディレクトリに移動し、次のコマンドを使用して Tinybird CLI をインストールします。

TINYBIRD_API_KEY=<your_admin_auth_token>

Tinybird CLI を使用して認証するように求められたら、ターミナルで次のコマンドを実行し、管理者認証トークンを入力します。

pip3 install tinybird-cli

以下のコード スニペットを実行して、Tinybird データソースとエンドポイントを公開します。

tb auth

Upstash データベースを作成し、次の認証情報を REST API セクションから .env ファイルにコピーします。

tb push

[QStash] タブに移動し、次の認証情報を .env ファイルにコピーします。

UPSTASH_REDIS_REST_URL=<your_rest_url>
UPSTASH_REDIS_REST_TOKEN=<your_rest_token>

次に、apps/web ディレクトリ内で次のコマンドを実行して Docker Compose スタックを開始します。

QSTASH_TOKEN=
QSTASH_CURRENT_SIGNING_KEY=
QSTASH_NEXT_SIGNING_KEY=

次のコマンドを使用して、Prisma クライアントを生成し、そのデータベース テーブルを作成します。

docker-compose up

Dub.co は複数の認証方法をサポートしています。 GitHub アプリを作成し、以下の URL をコールバック URL としてコピーします。

npx prisma generate
npx prisma db push

最後に、開発サーバーを起動します:

http://localhost:8888/api/auth/callback/github

ブラウザで http://localhost:8888 に移動してウェブ アプリケーションにアクセスし、ワークスペースを作成して開始します。問題が発生した場合は、詳細なサポートについて完全なインストール ガイドを参照してください。

---

Next.js アプリケーションで Tolgee を構成する方法

このセクションでは、Tolgee を Next.js アプリケーションに追加し、複数の言語をサポートするように構成して、ユーザーが好みの言語でアプリにアクセスできるようにする方法を学習します。

Next.js アプリケーションでローカリゼーションを実装するには、Tolgee React SDK をインストールする必要があります。

pnpm dev

次に、Tolgee プラットフォーム アカウントを作成し、ダッシュボードにサインインします。

[プロジェクト] ボタンをクリックし、プロジェクトに使用する言語を選択して、新しいプロジェクトを追加します。このアプリケーションでは、英語 (基本言語として)、中国語、ヒンディー語、スペイン語、アラビア語の 5 つの言語を使用します。

ダッシュボードの右上隅にあるプロフィール アイコンをクリックし、[プロジェクト API キー] を選択して Tolgee プロジェクトの API キーを作成します。

.env.development.local を作成し、API キーをファイルにコピーします:

git clone https://github.com/dubinc/dub.git

サイドバー メニューから [翻訳] を選択し、新しい翻訳をプロジェクトに追加します。

翻訳キーを作成し、翻訳する必要があるコンテンツまたは文字列を追加し、説明を入力して保存できます。

Tolgee にはデフォルトでさまざまな機械翻訳オプションが用意されており、コンテンツをプロジェクト内で利用可能な言語に簡単に翻訳できます。

おめでとうございます!アプリケーション内の翻訳用に Tolgee プラットフォームを正常にセットアップしました。次に、アプリケーションで直接翻訳を簡単に生成できるように、Dub.co プロジェクト内で Tolgee を構成しましょう。

Dub.co でローカリゼーションを設定する方法

このセクションでは、Dub.co プロジェクト内でクライアントとサーバーの対話をサポートするように Tolgee を構成する手順を説明します。

まず、Tolgee CLI パッケージをインストールします。

pnpm install

次のコード スニペットを実行して、プロジェクト API キーを使用して Tolgee プラットフォームにサインインします。

TINYBIRD_API_KEY=<your_admin_auth_token>

次に、apps/web ディレクトリ内に i18n フォルダーを作成します。このフォルダーには、Tolgee プラットフォーム プロジェクトで利用可能なさまざまな言語の翻訳を含む JSON ファイルが保存されます。

pip3 install tinybird-cli

apps/web ディレクトリ内で、以下のコード スニペットを実行して、Tolgee プロジェクトで作成された言語翻訳を取得します。

tb auth

上記のコード スニペットは、Tolgee プラットフォーム内で作成されたさまざまな言語翻訳を i18n フォルダーに自動的に取り込みます。

tb push

apps/web ディレクトリ内に Tolgee 構成を含む tolgee フォルダーを作成します。

git clone https://github.com/dubinc/dub.git

shared.ts ファイルを tolgee ディレクトリに追加し、次のコード スニペットをそのファイルにコピーします。

pnpm install

上記のコード スニペットは、デフォルト言語とフォールバック言語を使用して Tolgee を構成し、アプリケーション内でローカリゼーションを有効にします。

次に、tolgee ディレクトリに client.tsx ファイルを作成し、以下のコード スニペットをそのファイルにコピーします。

TINYBIRD_API_KEY=<your_admin_auth_token>

client.tsx ファイルは、クライアント コンポーネントを変換する目的を果たし、サーバーでレンダリングされたコンポーネントのインコンテキスト機能も有効にします。上記のコード スニペットは、Dub.co アプリケーション全体をラップする TolgeeNextProvider コンポーネントを定義し、言語の変更と翻訳を管理するために必要な構成を提供します。

tolgee フォルダーにカスタム locale.ts ファイルを作成し、次のコード スニペットをそこにコピーします。

pip3 install tinybird-cli

最後に、tolgee フォルダーに server.tsx ファイルを作成し、次のコード スニペットをそのファイルにコピーします。

tb auth

アプリケーションは、単一のレンダリングでコンポーネント間で Tolgee インスタンスを共有するために React サーバー キャッシュを利用します。これにより、アプリはサーバー コンポーネント内のどこでも Tolgee インスタンスを使用できるようになります。

おめでとうございます! Tolgee の構成が完了し、アプリケーション内のさまざまなコンテンツに翻訳を追加できるようになりました。

---

Tolgee を使用してアプリケーションのコンテンツを翻訳する方法

ここでは、Web アプリケーション内のコンテンツを翻訳する方法と、Tolgee がどのようにアプリ内翻訳を簡単に可能にするかを説明します。

始めるには、tolgee/client.tsx で定義されている TolgeeNextProvider コンポーネントで Dub.co アプリケーション全体をラップする必要があります。 apps/web/app フォルダーに移動し、app.dub.co/(dashboard) ディレクトリに移動して、layout.tsx ファイルを更新します。以下に示すように:

tb push

上記のコード スニペットは、Tolgee プロバイダーを使用してダッシュボード ルートをラップし、アプリケーション全体で言語の切り替えとローカリゼーションを可能にします。

Tolgee には、アプリケーション内のテキストの選択と翻訳に役立つ 2 つのフック、useTolgee と useTranslate が用意されています。

• useTolgee フックは Tolgee インスタンスを返し、テキストの翻訳時に再レンダリングをトリガーするさまざまなイベントをサブスクライブできます。
• useTranslate フックには、実際の翻訳をアプリ内で直接レンダリングする翻訳関数 (t 関数) が含まれています。

次のコード スニペットを追加して、app.dub.co/(dashboard)/[slug] ディレクトリ内の page.tsx ファイルを更新します。

「クライアントを使用する」;
import { PageContent } から "@/ui/layout/page-content";
WorkspaceLinksClient を「./page-client」からインポートします。
//??トールジーの設置
import { useTolgee, useTranslate } from "@tolgee/react";
import { setUserLocale } from "tolgee/locale";


デフォルト関数のエクスポート WorkspaceLinks() {
  const { t } = useTranslate();
  const tolgee = useTolgee(["pendingLanguage"]);
  const language = tolgee.getPendingLanguage();

  戻る （
    <PageContent title="リンク">
    {/**-- 優先言語を選択するための HTML 入力 --*/}
      <div className="flex w-full flex-col px-10">
        <p>言語を選択</p>
        <選択
          デフォルト値={言語}
          className="rounded-sm"
          名前=「ロケール」
         >



<p>上記のコード スニペットは、ユーザーが異なる言語を選択して切り替えることを可能にする HTML <strong><select> タグを表示します。 <strong>{t("hello")}</strong> 要素は、Tolgee の翻訳関数を使用して、選択した言語に基づいて「hello」キーの値をレンダリングします。

<p><img src="https://img.php.cn/upload/article/000/000/000/173093241088271.jpg" alt="I have localized the best short-linking platform in the world"></p>

<p>最後に、アプリケーション全体の残りのコンテンツを更新して言語の変更をサポートし、ユーザーが選択した言語ですべてのコンポーネントを表示できるようにすることができます。</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173093241165470.jpg" alt="I have localized the best short-linking platform in the world"></p>

<p>Tolgee はインコンテキスト翻訳機能も提供しており、テキストをクリックして Alt キーまたは Option キーを押し続けるだけで、開発でも運用でもアプリケーション内で文字列を直接翻訳できます。</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173093241362494.jpg" alt="I have localized the best short-linking platform in the world"></p>

<p>おめでとうございます!このチュートリアルのプロジェクトは正常に完了しました。</p>

<p>このチュートリアルのソース コードはここから入手できます:</p>

<p>https://github.com/JanCizmar/dub-with-tolgee</p>


<hr>

<h2>
  
  
  結論
</h2>

<p>これまで、Tolgee を使用してソフトウェア アプリケーションにローカリゼーションを追加し、複数の言語のサポートを実装し、現実世界のプロジェクト内で言語をシームレスに切り替える方法を学習しました。</p>

<p>Tolgee は、開発者を中心とした高速なローカリゼーション プラットフォームで、コンテンツにコンテキストを提供し、数秒で翻訳を生成できます。また、Vue、Angular、Svelte などの複数の JavaScript フレームワークもサポートし、柔軟性を高めるために Figma や REST API などのツールと統合します。</p>

<p>ユーザー向けにパーソナライズされたエクスペリエンスを作成したい場合、Tolgee は優れた選択肢です。 GitHub リポジトリに自由に投稿してスターを付けたり、Slack コミュニティに参加して他の人とつながり、チームと交流したりできます。</p><p>読んでいただきありがとうございます!</p>


          

            
        

以上が世界最高のショートリンク プラットフォームをローカライズしましたの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。