Rork アプリの多言語対応ガイド — i18n設定とGoogle翻訳APIでグローバル展開する方法

Gemini ライブ翻訳のテレビ放送対応など、AI翻訳技術への期待がますます高まっています。同じように、Rork アプリをグローバルマーケットに展開するなら、多言語対応（i18n、国際化）は必須の要件です。

Rork での i18n（国際化）基本設定

多言語対応の第一歩は、アプリケーション内での言語管理基盤を整備することです。React Native/Expo プロジェクトでは、react-i18next がデファクトスタンダードになっています。

react-i18next の導入と設定

npm install i18next react-i18next expo-localization

アプリの起動時に、システムの言語設定を自動検出して、対応する言語ファイルをロードします。

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import * as Localization from 'expo-localization';
import ja from './locales/ja.json';
import en from './locales/en.json';
 
const getLanguage = () => {
  const locale = Localization.getLocales()[0];
  const lang = locale?.languageCode || 'en';
  return lang === 'ja' ? 'ja' : 'en';
};
 
i18n
  .use(initReactI18next)
  .init({
    resources: { ja: { translation: ja }, en: { translation: en } },
    lng: getLanguage(),
    fallbackLng: 'en',
    interpolation: { escapeValue: false },
  });
 
export default i18n;

言語ファイルの構造（ja.json / en.json）

{
  "welcome": "ようこそ",
  "appTitle": "Rork アプリ",
  "features": {
    "search": "検索機能",
    "filter": "フィルタリング"
  },
  "button": {
    "submit": "送信",
    "cancel": "キャンセル"
  }
}

English (en.json):

{
  "welcome": "Welcome",
  "appTitle": "Rork App",
  "features": {
    "search": "Search Feature",
    "filter": "Filtering"
  },
  "button": {
    "submit": "Submit",
    "cancel": "Cancel"
  }
}

コンポーネント内での使用方法：

import { useTranslation } from 'react-i18next';
 
export const HomeScreen = () => {
  const { t, i18n } = useTranslation();
 
  return (
    <View>
      <Text>{t('welcome')}</Text>
      <Button
        title={t('button.submit')}
        onPress={() => console.log(i18n.language)}
      />
    </View>
  );
};

ロケール自動検出とフォールバック設定

Expo の expo-localization は、システム設定から自動的にロケール情報を取得します。万が一対応言語が存在しない場合は、fallbackLng で指定した言語にフォールバックするため、アプリケーションの安定性が保証されます。

const supportedLanguages = ['ja', 'en'];
const deviceLanguage = Localization.getLocales()[0]?.languageCode || 'en';
const appLanguage = supportedLanguages.includes(deviceLanguage)
  ? deviceLanguage
  : 'en';
 
i18n.changeLanguage(appLanguage);

Google Cloud Translation API v3 の基本と組み込み

ユーザーが入力するテキスト（レビューやチャットメッセージなど）をリアルタイムで翻訳したい場合は、Google Cloud Translation API v3 の利用が効果的です。

API セットアップ手順

Google Cloud コンソールで新規プロジェクトを作成
Translation API を有効化
サービスアカウントキーを JSON 形式でダウンロード
バックエンド（Node.js 等）に秘密鍵を安全に保管

Rork アプリからの呼び出し実装例

クライアント側では秘密鍵を保持せず、バックエンド API 経由で翻訳をリクエストします。

バックエンド（Node.js + Express）:

const translate = require('@google-cloud/translate').v3;
const projectId = 'YOUR_PROJECT_ID';
const translationClient = new translate.TranslationServiceClient();
 
app.post('/api/translate', async (req, res) => {
  const { text, targetLanguage } = req.body;
 
  try {
    const request = {
      parent: translationClient.locationPath(projectId, 'global'),
      contents: [text],
      targetLanguageCode: targetLanguage,
      sourceLanguageCode: 'ja',
    };
 
    const [response] = await translationClient.translateText(request);
    const translatedText = response.translations[0].translatedText;
    res.json({ result: translatedText });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

React Native クライアント:

const translateText = async (text, targetLang) => {
  try {
    const response = await fetch('https://your-backend.com/api/translate', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        text: text,
        targetLanguage: targetLang,
      }),
    });
 
    const data = await response.json();
    return data.result;
  } catch (error) {
    console.error('Translation failed:', error);
    return null;
  }
};

動的翻訳のキャッシュ戦略（AsyncStorage 活用）

何度も翻訳されるテキストに対して毎回 API を呼ぶのは非効率です。AsyncStorage を使ったキャッシュ機構を導入しましょう。

import AsyncStorage from '@react-native-async-storage/async-storage';
 
const getCachedTranslation = async (key, targetLang) => {
  const cacheKey = `translation_${key}_${targetLang}`;
  return await AsyncStorage.getItem(cacheKey);
};
 
const cacheTranslation = async (key, targetLang, translation) => {
  const cacheKey = `translation_${key}_${targetLang}`;
  await AsyncStorage.setItem(cacheKey, translation);
};
 
const translateWithCache = async (text, targetLang) => {
  const cached = await getCachedTranslation(text, targetLang);
  if (cached) return cached;
 
  const translated = await translateText(text, targetLang);
  if (translated) {
    await cacheTranslation(text, targetLang, translated);
  }
  return translated;
};

Gemini API を使ったアプリ内翻訳の可能性

Google Gemini API は、単なる翻訳機能だけでなく、文脈に応じた自然な言い換えやローカライゼーション対応を提供します。たとえば、ユーザーが入力したテキストを自動で方言に対応させるなど、より高度な多言語対応が可能になります。

const generateLocalizationWithGemini = async (text, targetCulture) => {
  const prompt = `以下のテキストを${targetCulture}の文化に合わせてローカライズしてください。\nテキスト: "${text}"`;
 
  // Gemini API への呼び出し（詳細は省略）
  // バックエンド経由で実行
};

App Store / Google Play のメタデータ多言語設定

アプリ本体の多言語対応が完了したら、App Store Connect および Google Play Console でも、メタデータ（アプリ名、説明文、キーワード）を多言語で設定する必要があります。

App Store Connect: 各言語版の「アプリ名」「副説明」「キーワード」「サポート URL」を設定
Google Play Console: 「短い説明」「詳しい説明」「タイトル」「キーワード」を各言語で入力

地域ごとに SEO 戦略も異なるため、機械翻訳ではなく、ネイティブスピーカーによるレビューを推奨します。

全体を振り返って

Rork アプリをグローバルマーケットに展開するには、単にテキストを翻訳するだけでなく、適切な i18n フレームワークの選定、Google 翻訳 API の統合、キャッシング戦略の実装、App Store/Google Play のメタデータ多言語化という、複数のレイヤーでの対応が不可欠です。

本記事で紹介した実装パターンを参考に、まずは 2 言語から開始し、ユーザーのフィードバックを基に段階的に対応言語を増やしていくことをお勧めします。世界中のユーザーに向けたアプリ開発には、こうした細部への注意が成功の鍵となります。

参考資料として、「Rork 多言語対応ハンドブック」（仮）という書籍を活用することで、実装知識をより体系的に習得できるでしょう。