すべての開発者がアプリをローカライズする必要がある理由-jsチュートリアル-php.cn

すべての開発者がアプリをローカライズする必要がある理由

DDD

リリース： 2024-09-13 06:20:32

オリジナル

700 人が閲覧しました

数年前、私は Facebook の初期開発者の 1 人の講演に行きました。

Facebook が初期に導入したすべての成長機能のうち、すべての予測を上回ったのは 1 つだけです...

その機能は ローカリゼーションでした。

その話以来、私は常にアプリをできるだけ早くローカライズすることを優先しており、それが大きな成果をもたらしました。

しかし、多くの開発者が依然としてローカリゼーションをあまりにも長い間無視することを選択していることに気づきました。

(おそらく、コストがかかりすぎる、または複雑すぎると考えているためです)

この投稿では、ローカリゼーションが重要な理由と、可能な限り最も効率的な方法でローカリゼーションを実装する方法について説明します。

ローカリゼーションを考慮する必要がある理由

ほとんどの開発者は、ローカライズがなぜ良いアイデアなのかを直感的に理解していると思いますが、主な理由をいくつか取り上げてみましょう。

1) グローバルリーチ = より大きなユーザーベース

Why Every Developer Should Localize Their App

英語を話すインターネットユーザーは 25% のみです。そのため、複数の言語をサポートすることで残りの 75% を活用し、競争の少ない地域での成長の機会が広がります。

2) ユーザーエクスペリエンスの向上

アプリがユーザーの言語にネイティブであると感じられれば、ユーザーは留まる可能性が高くなります。ローカリゼーションは、パーソナライズされたエクスペリエンスを作成することで、アクセシビリティとエンゲージメントを高めます。

3) 高いコンバージョン率

消費者の 72% は母国語での購入を好みます。ローカライズされたアプリはコンバージョンが向上し、アプリ内購入、サブスクリプション、ユーザーエンゲージメントの増加につながります。

4) 国際市場向けの優れた SEO

ローカライズされたコンテンツにより、グローバル検索結果でのアプリの可視性が向上し、ユーザーがさまざまな言語で検索したときにアプリのランクが高くなります。

ローカリゼーションのベストプラクティス

さて、ローカライゼーションの利点についてはご理解いただいたと仮定して、次は頭痛の種を避ける方法について話しましょう:

1) 柔軟なテキストストレージを使用して事前に計画を立てる

ユーザーに表示されるすべてのテキストを最初から .json などの外部ファイルに保存すると、コアコードに触れることなく、後で簡単に抽出して翻訳できます。

2) ロケール依存の書式設定を自動化する

さまざまな国で正しく表示されるように、日付、時刻、通貨などの地域固有の形式に合わせてアプリが自動的に調整されていることを確認してください。

3) ハンドルテキスト展開

UI がレイアウトを壊さずに長い翻訳に対応できることを確認してください。これにより、短いテキストをより多くのスペースを必要とする言語に翻訳する際のオーバーフローの問題を防ぐことができます。

4) AI を活用した自動化を使用する

LLM を使用して翻訳プロセスを自動化すると、特に頻繁に更新されるアプリの場合、時間を大幅に節約できます。

私は人間による翻訳ベンダーと仕事をしていましたが、非常に高価で遅かったです。言うまでもなく、LLM はこの点で 本当に 優れています。 (結局のところ、これが LLM の本来の使用例でした)。

ローカリゼーションを実装する最も簡単な方法

わかりました、これは恥知らずなプラグですが...過去にローカリゼーションで抱えていたすべての問題を解決するローカリゼーション製品を立ち上げました。

この製品はブレンドと呼ばれます。

開発者がたった 4 つのステップでアプリ全体をローカライズできるようにする方法を次に示します:

(このフローは React 用ですが、サイトには他のフローもリストされています)

1) Blendin CLI と React SDK をインストールします

npm install -g @blendin/cli
npm install @blendin/sdk-react

ログイン後にコピー

2) アプリケーションを BlendinProvider でラップします

import { BlendinProvider } from '@blendin/sdk-react';
import blendinConfig from './blendin.json';

export const App = () => {
  return (
    <BlendinProvider config={blendinConfig}>
              <HomeScreen />
          </BlendinProvider>
  )
}

ログイン後にコピー

3) t フックを使用して、翻訳したいテキストにタグを付けます

import { useTranslation } from '@blendin/sdk-react';

export const HomeScreen = () => {
  const { t } = useTranslation();

  return (
    <div>
              <p>{t('This text will be automatically translated by Blendin')}</p>
           </div>
  )
}

ログイン後にコピー

4) blendin translation を実行して翻訳ファイルを生成します