プロダクトアップデート//7 読了時間

デベロッパーエクスペリエンス深掘り:Better i18nのプラットフォームUXがローカライゼーションを高速かつ直感的にする方法

Eray Gündoğmuş
共有

ローカライゼーションプラットフォームは、ぎこちないインターフェース、遅いエディター、委員会が設計したかのようなワークフローで知られています。私たちはBetter i18nを異なる哲学で構築しました:すべてのインタラクションは意図的で、高速で、開発者の時間を尊重するものであるべきです。

この記事では、Better i18nを他と異なるものにするプラットフォームUX機能を紹介します — 機能リストとしてではなく、実際の日常ワークフローがどのように見えるかを実践的にツアーします。

コマンドパレット:キーボードファーストのナビゲーションハブ

プラットフォームのどこからでも Cmd+K(Windows/Linuxでは Ctrl+K)を押してください。検索オーバーレイが即座に表示され、プロジェクト、名前空間、キー、設定、アクションなど、すべてをインデックスします。

数文字入力すると、結果がリアルタイムで絞り込まれます。結果を選択すれば、すぐにそこに移動できます。パンくずリストのクリックも、サイドバーのナビゲーションも、ページリロードも必要ありません。VS CodeやRaycastで作業している開発者にとって、このインタラクションモデルは即座に馴染みのあるものに感じられます。

コマンドパレットはナビゲーションだけではありません。アクションも提供します — 新しいキーの作成、言語の切り替え、公開のトリガー、プロジェクト設定を開くなど。プラットフォームで行いたいことすべてへのユニバーサルエントリポイントと考えてください。

これがi18nワークフローにとって重要な理由: ローカライゼーションプロジェクトには、数十の名前空間と何千ものキーがあることが多いです。マウス主体のナビゲーションはスケールしません。コマンドパレットは、複雑なマルチ名前空間プロジェクトを管理する場合でも、フロー状態を維持します。

オンボーディング:ゼロから最初の翻訳まで数分で

第一印象は重要です。新しいチームメンバーがプロジェクトに参加したとき — またはBetter i18nを初めて設定するとき — オンボーディングウィザードがすべてのステップをガイドします:

  1. リポジトリを接続する — GitHub、GitLab、またはBitbucketのリポジトリをリンクする
  2. プロジェクトを設定する — ソース言語を設定し、ターゲット言語を追加し、名前空間を定義する
  3. SDKをインストールする — Next.js、React + TanStack Router、Expo、またはFlutter向けのフレームワーク固有の手順
  4. 最初の翻訳をプッシュする — プラットフォームからコードへのラウンドトリップを確認する

各ステップは次に進む前に検証します。SDKの設定に問題がある場合、ウィザードはそれを即座に検出し、10分後に本番環境で発見することなく済みます。

ウィザードはフレームワークも自動的に検出します。Next.jsを使用している場合は、Next.js固有のセットアップ手順、ミドルウェア設定、ルーティング例が提供されます。ExpoユーザーにはExpo固有のガイダンスが表示されます。汎用的なドキュメントページはなく、すべてがカスタマイズされています。

翻訳エディター:パフォーマンスとシンプルさの融合

チームは翻訳エディターで最も多くの時間を費やすため、ここに最も多くのエンジニアリング努力を投資しました。

大規模なキーセットのための仮想スクロール

ほとんどの翻訳エディターはすべての行をDOMにレンダリングします。200キーであれば問題ありません。2,000キーになると遅くなります。5,000キー以上になると使用不能になります。

Better i18nは仮想化レンダリングを使用します — 任意の時点でDOMに存在するのは、ビューポートに表示されている行(および小さなバッファ)のみです。結果:10,000キーをスクロールするのは、50キーをスクロールするのとまったく同じ感覚です。メモリ使用量は一定に保たれます。フレームレートは高く保たれます。ブラウザがヒーターになることはありません。

これは単なる便利な機能ではありません。スケールでの実際のプロジェクトは、日常的に5,000〜20,000キーを持ちます。エディターがそれを適切に処理できない場合、ツールではなくボトルネックになります。

自動同期によるインライン編集

任意の翻訳セルをクリックして入力を開始します。編集モード、モーダル、「保存」ボタンはありません。クリックして、入力して、進むだけです。

裏では、Zustandを使ったストアが変更を追跡し、3.5秒のデバウンスでサーバーに同期します。3.5秒入力を止めると、変更は自動的に保存されます。ツールバーの微妙な同期インジケーターが現在の状態を示します — 編集中、同期中、または保存済み。

この自動同期パターンは、ユーザーエラーの一カテゴリ全体を排除します。保存を忘れて作業が失われることはありません。タブを一晩開いたままにすることで古いデータになることもありません。エディターは常に最新の状態を反映します。

名前空間のグループ化とフィルタリング

大規模なプロジェクトでは、翻訳を名前空間に整理します — commonauthdashboardemails などです。エディターはこれらを折りたたみ可能なグループとしてレンダリングします。作業中の名前空間を展開し、他はすべて折りたたみます。

これを言語と翻訳ステータス(翻訳済み、未翻訳、要レビュー)によるフィルタリングと組み合わせることで、重要な作業に正確に絞り込むことができます。auth 名前空間のすべての未翻訳ドイツ語キーを確認したいですか?2回のフィルタークリックで到達できます。

検索はキー名と翻訳値の両方で機能します。誰かが「Click here」と書いたキーを探していますか?値を検索し、キーを見つけ、修正します。

アクティビティログ:すべてのアクションの完全な監査証跡

アクティビティログは、プロジェクトで起こるすべてのことを追跡します — キーの作成、翻訳の更新、公開、設定の変更、メンバーの追加など。各エントリは、誰がアクションを実行したか、いつ発生したか、どのリソースが影響を受けたかを記録します。

これはコンプライアンスのためだけではありません。アクティビティログは実用的なデバッグツールです。本番環境で翻訳が間違って見える場合、それを引き起こした正確な変更を追跡できます — 誰がキーを更新したか、いつ、以前の値は何だったか。

複数の言語で翻訳者を管理するチームリーダーにとって、アクティビティログはマイクロマネジメントなしに翻訳速度とチームアクティビティへの可視性を提供します。

グローバルAIドロワー:どこでもコンテキスト対応のアシスタンス

どのページからでもAIチャットパネルを開きます。現在のプロジェクト、表示中のページ、最近のアクションに関するコンテキストを維持します。以下を依頼できます:

  • すべてのターゲット言語にわたる新しいキーの翻訳を生成する
  • 一貫性と正確性のために既存の翻訳をレビューする
  • より良い翻訳可能性のためにソーステキストへの改善を提案する
  • 同期や設定で何かがうまくいかない場合にエラーを説明する

AIドロワーは設定可能なLLMプロバイダーによって動作します。LLMプロバイダー管理インターフェースを通じて、OpenAI、Anthropic、Google、またはその他のサポートされているプロバイダーを接続できます。モデルの設定、フォールバックの優先度を定義し、トークン使用量を監視します — すべて単一の設定パネルから。

この柔軟性により、単一のAIベンダーに縛られることはありません。一括翻訳にはGPT-4oを使用し、細かいレビューにはClaudeを使用するか、チームと予算に合った組み合わせを設定してください。

デベロッパーツールモーダル:内部の可視性

開発モードでデベロッパーツールモーダルを切り替えて確認できます:

  • APIコールのタイミング — CDNキャッシュヒットを含む各リクエストにかかる時間
  • 同期ステータス — Zustandストアの現在の状態と保留中の変更
  • キャッシュ診断 — TTLキャッシュのヒット率と無効化イベント
  • 設定の概要 — アクティブなプロジェクト設定、SDKバージョン、接続状態

これは、プラットフォームの動作を理解し、パフォーマンスを最適化し、統合の問題をデバッグしたいエンジニア向けに構築されています。毎日使用する機能ではありませんが、必要なときにプラットフォームに組み込まれていることで、何時間もの推測作業を省けます。

PostHog Analyticsインテグレーション

Better i18nはプラットフォーム全体にPostHogイベントトラッキングを統合しています。これにより、チームがツールを実際にどのように使用しているかについての定量的なインサイトが得られます — どの機能が最も価値をもたらすか、ユーザーがどこで摩擦を感じるか、翻訳速度が時間とともにどう推移するか。

すべての分析データは自分のPostHogインスタンスに流れるため、データプライバシーと保持ポリシーに対する完全な制御を維持できます。

これらの選択の背後にある哲学

ここで説明されたすべての機能は、単一のデザイン原則に従っています:意図とアクションの間の摩擦を減らす。コマンドパレットはナビゲーションのオーバーヘッドを排除します。インライン編集はモーダルのオーバーヘッドを排除します。自動同期は保存のオーバーヘッドを排除します。AIドロワーはコンテキスト切り替えのオーバーヘッドを排除します。

ローカライゼーションはすでに十分複雑です — 複数の言語、文化的なニュアンス、技術的な制約、チームの調整。プラットフォームは複雑さを吸収すべきであり、追加すべきではありません。

i18nデベロッパーツールを評価している場合、または現在の翻訳管理プラットフォームからの切り替えを検討している場合は、Better i18nを試して、これらのワークフローを直接体験することをお勧めします。デベロッパーエクスペリエンスは後から追加された機能ではありません — それはすべてが構築される基盤です。

Comments

Loading comments...