React Native SDK v4 インストールガイド

このガイドでは、WOVN React Native SDK v4をアプリケーションにインストールして統合するための手順を段階的に説明します。

互換性について

このガイドではExpoのサンプルプロジェクトを使用していますが、同じインストール手順は、Expoを使用しない標準のReact Nativeプロジェクトにも適用されます。

SDKの統合

ステップ1: SDKパッケージのダウンロード

SDKアクセスが必要

SDKダウンロードリンクを受け取るには、カスタマーサポートチームにお問い合わせください。リンクを受け取ったら、SDKパッケージをダウンロードしてプロジェクトディレクトリに展開してください。

ステップ2: SDKパッケージのインストール

SDKパッケージをダウンロードした後、ステップ1のファイルパスを参照してnpmまたはyarnを使用してインストールします。

npm install @wovnio/react-native@file:<path-to-the-file.tgz>
# または
yarn add @wovnio/react-native@file:<path-to-the-file.tgz>

例:

yarn add @wovnio/react-native@file:dist/wovn-react-native-latest.tgz

ステップ3: WOVN SDKの初期化

Wovn.initWovnメソッドは、SDKを初期化する非同期関数です。このメソッドには、Wovn APIトークンとオプションの設定オブジェクトの2つの引数が必要です。

注意: 他のWovn SDKメソッドを呼び出す前に、このメソッドを呼び出してください。awaitの使用を推奨します。Wovn.initWovnメソッドの詳細をご確認ください。

import * as Wovn from '@wovnio/react-native';

await Wovn.initWovn('YOUR_TOKEN', {
  enabledDebugLog: true,
  logLevel: 0,
});

実装例

以下の例は、ExpoアプリケーションのWOVN SDKをindex.jsファイルで初期化する方法を示しています。このパターンをプロジェクト構造に合わせて調整できます。

完全な例を表示

index.js
import React, { useState, useEffect } from 'react';
import 'expo-router/entry';
import { registerRootComponent } from 'expo';
import { ExpoRoot } from 'expo-router';
import * as Wovn from '@wovnio/react-native';
import { Text, ActivityIndicator, View, StyleSheet } from 'react-native';

async function initializeApp() {
  try {
    await Wovn.initWovn('YOUR_TOKEN', {
      enabledDebugLog: true,
      logLevel: 0,
    });
  } catch (error) {
    console.error('Initialization failed:', error);
  }
}

function App() {
  const [isInitialized, setIsInitialized] = useState(false);

  useEffect(() => {
    async function init() {
      await initializeApp();
      setIsInitialized(true);
    }
    init();
  }, []);

  if (!isInitialized) {
    return (
      <View style={styles.centeredView}>
        <ActivityIndicator size="large" color="#0000ff" />
        <Text>LOADING...</Text>
      </View>
    );
  }

  return <ExpoRoot context={require.context('./app')} />;
}

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

registerRootComponent(App);

ステップ4: 言語切り替え(オプション)

Wovnは、アプリの言語を管理するためのいくつかのメソッドを提供しています。

言語を変更する: Wovn.changeLangを使用します。
システム言語に変更する: Wovn.changeToSystemLangを使用します。
現在の言語を取得する: Wovn.getCurrentLangを使用します。
利用可能な言語のリストを取得する: Wovn.getLanguagesListを使用します。

Wovn.changeToSystemLang()を使用してWovnに言語設定を管理させることをお勧めします。詳細については、Wovn APIsをご参照ください。

例

import * as Wovn from '@wovnio/react-native';

// Wovnを初期化
await Wovn.initWovn('YOUR_TOKEN', {
  enabledDebugLog: true,
  logLevel: 0,
});

// システム言語に変更
Wovn.changeToSystemLang();

ステップ5: 統合の確認

アプリを実行する: iOSシミュレーター/デバイスまたはAndroidエミュレーター/デバイスでアプリケーションをビルドして実行します。
コンソールログを確認する: ログで初期化が成功したことを確認します。

統合が成功すると、次のようなログが表示されます:

INFO  WOVN: DEBUG: Configs: setProjectData: isClientVerified: false, isRunningInDevelopmentMode: false, isAllowedToReport: false, Configs[token: <YOUR_TOKEN>]
      {
  "enableTranslationPreviewMode": false,
  "shouldUseSavedTranslation": false,
  "isRunningInDevelopmentMode": false,
  "projectSettings": {
    "appLocalization": true,
    "cacheExpire": 24,
    "appReportEnabled": true,
    "dynamicValues": true,
    "dynamicLoading": true,
    "errorReportEnabled": true,
    "offlineCacheExpire": 720,
    "offlineMode": false,
    "pageRefreshInterval": 5,
    "reportInterval": 5,
    "reportLotRatio": 1,
    "secondaryLanguage": "zh-CHS",
    "userAnalytics": true,
    "cellularNetworkMode": true,
    "limitedConnection": true,
    "networkTimeout": 5000,
    "skipNormalizeReportedValues": false,
    "screenGroupingByRelationship": true,
    "dataSafetyEnabled": true,
    "appOperatorMode": true,
    "limitReportToOnlyOperator": true,
    "operatorReportInterval": 30,
    "reportPageProfileImage": true,
    "reportAccessLevel": "dev",
    "includeGlossariesInTranslationData": false
  },
  "languageSetting": "LanguageSetting[currentLang: vi; languageList: [\"ja\",\"en-US\",\"en-GB\",\"zh-CHT\",\"zh-CHS\",\"vi\",\"it\",\"nl\"]; secondaryLang: zh-CHS; sourceLang: ja; systemLocale: vi_VN]",
  "jobExecutor": "JobsExecutor[jobs: ]",
  "isReporting": false,
  "reportingInterval": 5,
  "cachedSettings": {
    "token": "<YOUR_TOKEN>",
    "enabledDebugLog": true,
    "auth": "",
    "env": "prod",
    "logLevel": 0,
    "clientID": "d8fada53-1f37-4987-93ee-d50b4e3edf01"
  }
}

統合完了

これらのログは、WOVN SDKが正常にインストールおよび初期化されたことを確認します。迅速なレポートとインスタント翻訳更新を有効にするには、次のセクションに進んで開発モードを有効化してください。

開発モードの有効化

開発モードのメリット

開発モードを有効にすると、アプリは次のことができるようになります:

新しく検出されたテキストを自動的にレポートする
翻訳の更新をより速く受信する
開発とテストのための追加機能にアクセスする

開発モードを有効化するには、WOVNダッシュボードでデバイスのクライアントIDを登録する必要があります。

ステップ1: クライアントIDの取得

クライアントIDは、SDKが初期化されるときに自動的に生成されます。前の確認ステップのコンソールログで確認できます。

開発モードでアプリを実行します。
コンソール出力で、clientIDでフィルタリングします。

次のような行を探します:

"clientID": "d8fada53-1f37-4987-93ee-d50b4e3edf01"

ステップ2: クライアントIDの登録

WOVNダッシュボードを開きます。
プロジェクトに移動します。
設定 → アプリ → セキュリティに移動します。
デバイスを追加をクリックして、クライアントIDを入力します。

クライアントIDを登録

ステップ3: 開発モードの有効化を確認

クライアントIDを登録した後:

変更がサーバーに反映されるまで2〜3分待ちます。
アプリケーションを再実行します。
isRunningInDevelopmentModeでコンソールログをフィルタリングします。
次のように表示されるはずです:
```
isRunningInDevelopmentMode: true
```

ステップ4: レポートされたテキストの確認

開発モードが有効になると、アプリは新しく検出されたテキストをWOVNダッシュボードに自動的にレポートします。この機能を確認するには:

アプリ内を移動して、さまざまなテキスト要素を表示します。
WOVNダッシュボードを開き、新しくレポートされたテキストを確認します。
レポートされたテキストは、プロジェクトのテキスト管理セクションに表示されます。

レポートされたテキストを確認

処理時間

サーバーがレポートされたテキストを処理してダッシュボードに表示するまでに2〜3分かかる場合があります。

React Nativeのレポート

React Nativeアプリケーションは、iOSまたはAndroidデバイスでテストしているかどうかにかかわらず、WOVNダッシュボードのiOSアプリタブの下にテキストをレポートします。

重要な注意事項

クライアントID管理

クライアントIDのリセット: アプリを削除して再インストールするたび、または新しいデバイスにインストールするたびに、クライアントIDが変更されます。ダッシュボードに新しいクライアントIDを登録する必要があります。
ログレベル: 設定のログレベルが適切に設定されていることを確認して、開発モードのステータスやクライアントIDを含むすべてのログ情報が表示されるようにしてください。
有効化の遅延: ダッシュボードでのクライアントID登録の変更がアプリに反映されるまでに2〜3分かかる場合があります。

SDKの統合​

ステップ1: SDKパッケージのダウンロード​

ステップ2: SDKパッケージのインストール​

ステップ3: WOVN SDKの初期化​

ステップ4: 言語切り替え(オプション)​

例​

ステップ5: 統合の確認​

開発モードの有効化​

ステップ1: クライアントIDの取得​

ステップ2: クライアントIDの登録​

ステップ3: 開発モードの有効化を確認​

ステップ4: レポートされたテキストの確認​

重要な注意事項​