React Native SDK の導入 – WOVN.io HelpCenter

概要

このページでは、WOVN.app for React Native SDK をアプリケーションに組み込むための手順について記載します。

エンドユーザのデータ送信管理
WovnContainer Component による囲い込み
Screen Component による囲い込み
初期化処理、破棄処理
言語切り替えをおこなう
WOVN プロジェクトの設定値を取得する
WOVN プロジェクトの言語情報を取得する
現在の言語を取得する
WovnIgnore Component で翻訳しない範囲を指定する
WovnWait Component で元言語をチラつかせない範囲を指定する
差替コンポーネントの利用
特殊なケースにおける翻訳
React Hooks を用いた翻訳
React Hooks を用いた翻訳を設定する際の注意点
明示的に対訳情報を取得する
デバッグログで wovn-ignore の動作確認をする
デバッグログでレポートの動作確認をする
キャリア回線下でアプリ上の文言を WOVN に送信する

エンドユーザのデータ送信管理

詳細は、「Data Safety について」「Data Safety 対応の実装方法」を参照してください。

WovnContainer Component による囲い込み

WOVN で翻訳対象にしたいコンポーネントの外側に WovnContainer を設置してください。このタグの内側が WOVN によって翻訳対象となります。

import { WovnContainer } from '@wovnio/react-native-sdk-core'

export default function App() {
    return (
        <WovnContainer>
            <YourApplicationRoot />
        </WovnContainer>
    )
 }

Screen Component による囲い込み

WOVN.app には、スクリーンと呼ばれる画面の管理単位があり、アプリケーションコードでは画面ごとに Screen Component を組み込むことを推奨しています。しかし、React Native SDK では、iOS の ViewController、Android の Activity に該当するようなページ構成の概念がないため、明示的に定義する必要があります。

Screen Component はネストして定義することができます。

import { Screen } from '@wovnio/react-native-sdk-core'

export default function SomeScreen() {
    return (
        {/* name へスクリーン名を記述します */}
        <Screen name="your_screen_name_A">
            {/* ここにあるコンポーネントは your_screen_name_A の翻訳情報が使⽤されます */}
            <Screen name="your_screen_name_B">
                {/* ここにあるコンポーネントは your_screen_name_B の翻訳情報が使⽤されます */}
            </Screen>
            {/* ここにあるコンポーネントは your_screen_name_A の翻訳情報が使⽤されます */}
        </Screen>
    )
}

スクリーンの管理単位について
Screen はアプリケーションで1つ定義にするか、画面ごとに定義するか、更にコンポーネントごとに定義するかは、アプリケーション開発者の設計で自由に定義できます。
ただし、大規模なアプリケーションでは 1 つの Screen にすべての翻訳データを格納することになり、WOVN 管理画面での翻訳管理が複雑になるため、画面ごとや、コンポーネントごとの定義を推奨しています。

Screen Component と対訳情報取得のタイミングについて
Screen Component がマウントされると、SDK 内部 API によって翻訳情報を取得します。ただし、一度取得した情報は再利用されることがあるため、メモリ上にデータが残っている限り再マウント時に再度ネットワーク通信は行われません。ログアウト( disposeAsync ) またはアプリケーションの再起動によってこの情報は破棄され、再度ネットワーク通信が発生します。
明示的に再取得を行う場合は、後述の loadTranslation をご利用ください。

初期化処理、破棄処理

async initWovnAsync(token: string): Promise<void>

WOVNでは、プロジェクトとアプリケーションを紐付けるために初期化処理が必要です。
この初期化処理には、あらかじめ WOVN 管理画面で発行したプロジェクトトークン(token) を用います。

マルチテナントのサービスを提供していて、テナントごとに利用する WOVN プロジェクトが異なる場合、アプリケーションが実装しているログイン認証後にアカウントに紐付いたプロジェクトトークンを用いてこの関数を実行します。

import { initWovnAsync } from '@wovnio/react-native-sdk-core'.

await initWovnAsync('YOUR_TOKEN')

プロジェクトトークンを切り替えて initWovnAsync 利用するときの注意
initWovnAsyncの実行後、必ず disposeWovnAsync を実行してから、新しいプロジェクトトークンをセットした initWovnAsyncの再実行をしてください。翻訳するべきデータが、古いトークンを持つプロジェクトに紐付いてしまう可能性があります。

async disposeWovnAsync(): Promise<void>

現在アプリケーションが保持している WOVN に関するすべてのデータを破棄します。

import { disposeWovnAsync } from '@wovnio/react-native-sdk-core'.

await disposeWovnAsync()

言語切り替えをおこなう

言語切り替えには 2 種類方法があります。どちらかを UI ハンドラで呼び出してください。

changeLangCode 引数に応じて言語を切り替える
changeToSystemLang 端末が利用している言語設定にあわせて言語を切り替える

import {
    changeLangCode,
    changeToSystemLang,
} from '@wovnio/react-native-sdk-core'

// 英語に切替え
changeLangCode('en')

// ⽇本語に切替え
changeLangCode('ja')

// 端末のデフォルト⾔語に変更
changeToSystemLang()

changeLangCode(lang: string): void

lang の情報に⾔語を切り替えます。対訳情報がすでに取得されている場合、⾃動的にコンポーネントが持つテキスト情報を置換します。changeLangCode(string) を使用することにより、 en-US en-GB など Region Code に応じた言語の切り替えにも対応できるようになります。

lang に用いるコードについては、言語地域コードの一覧を参照してください。

changeToSystemLang(): void

翻訳に用いる言語を、OS で設定されている言語を対象に WOVN のプロジェクトで設定されている言語と一致する言語に切り替えます。

対訳情報がフェッチされている場合、自動的にコンポーネントの表示は切り替わります。

(1) OS で言語が 1 つだけ設定されている場合

OS で設定されている言語が WOVN のプロジェクトで設定されている言語と一致する場合に言語を切り替えます。

(2) OS で複数の言語が設定されている場合

OS で設定されている全ての言語を対象に、WOVN のプロジェクトで設定されている言語で一致するものがあるかを検索します。その上で、一致したものの中からOS で設定された言語で最も優先順位の高い言語に切り替えます。

import {
    changeToSystemLang,
    getCurrentLangCode
} from '@wovnio/react-native-sdk-core'

// OS で設定された言語: [ th, pt, en-US ]
// Wovn のプロジェクトで設定された言語: [ en-US, zh-CHT ]
changToSystemLang()
console.log(getCurrentLangCode()) // => en-US

(3) 同じ言語で、 Region Code が異なる場合

OS で設定された言語のうち優先順位の高いものから、 Region Code を含めた言語( en-US zh-Hant )で検索・言語切り替えを行います。

Region Codeを含めた言語で一致するものがない場合には、 Region Code を除いた言語( en , zh )で検索を行い、一致した言語に切り替えます。

import {
    changeToSystemLang,
    getCurrentLangCode
} from '@wovnio/react-native-sdk-core'

// OS で設定された言語: [ en-IN ]
// Wovn のプロジェクトで設定された言語: [ ja, en-US ]
changToSystemLang()
console.log(getCurrentLangCode()) // => en-US

(4) OS に設定されている言語一覧と Wovn のプロジェクトで設定された言語で一致するものがない場合

WOVN のプロジェクトごとに設定されているデフォルト言語に切り替わります。

WOVN のプロジェクトでデフォルト言語の設定がなされていない場合は言語は切り替わらずに現在の状態が維持されます。

import {
    changeToSystemLang,
    getCurrentLangCode
} from '@wovnio/react-native-sdk-core'

// OS で設定された言語: [ ru(ロシア), ky(キルギス) ]
// Wovn のプロジェクトで設定された言語: [ en-GB, en-US ]
// Wovn のプロジェクトで設定されたデフォルト言語: ja
changToSystemLang()
console.log(getCurrentLangCode()) // => ja

WOVN プロジェクトの設定値を取得する

getWovnStatus() を用いることで、下記３点の情報を得ることができます。

wovnApp: WOVN.app の設定値を取得します。Disable の場合 SDK は機能しません。
offlineMode: オフラインモードの設定値を取得します。
cacheExpired: キャッシュの期限日を取得します。

WOVN プロジェクトの言語情報を取得する

getProjectLanguages で利用している WOVN プロジェクトに設定されている元言語と利用可能言語の一覧を取得できます。

import { getProjectLanguages } from '@wovnio/react-native-sdk-core'

// 元言語: 日本語、 利用可能言語: 英語・簡体中国語・繁体中国語
const projectLanguages = getProjectLanguages()
console.log(projectLanguages) // {"sourceLang": "ja", "supportedLangs": ["ja", "en", "zh-CHS", "zh-CHT"]}

getProjectLanguages()

initWovnAsync() で初期化したプロジェクトトークンに紐付いている WOVN プロジェクトの言語情報を取得します。元言語の言語コードと、翻訳している言語の一覧を取得します。スクリーンにおける言語の公開状態にかかわらず、プロジェクトで利用できる言語の一覧を取得する点にご留意ください。

現在の翻訳言語を取得する

getCurrentLangCode で現在適用されている言語を取得します。

import {
    changeLangCode,
    getCurrentLangCode,
} from '@wovnio/react-native-sdk-core'

changeLangCode('en')
console.log(getCurrentLangCode()) // => 'en'

getCurrentLangCode(): string

WOVN SDK によって設定した現在の言語を取得します

WovnIgnore Component で翻訳しない範囲を指定する

Screen Component の中で翻訳したくないコンポーネント群がある場合は WovnIgnore Component を設定します。

このコンポーネントは、主に下記のケースで用います。

個人情報、機密情報のようなセンシティブな情報ががアプリケーション上に表示されるため、WOVN に送信したくない
機械翻訳文字数を節約するため、商品型番や、日付などを翻訳させないようにしたい

import { Screen, WovnIgnore } from '@wovnio/react-native-sdk-core'
import { Text } from '@wovnio/support-react-native'

export default function PartialIgnorePage() {
    return (
        <Screen name="your_screen_name">
            {/* この箇所にあるコンポーネントは翻訳されます */}
            <Text>こんにちは</Text>

            <WovnIgnore>
                {/* この箇所にあるコンポーネントは翻訳されません */}
                <Text>こんばんは</Text>
            </WovnIgnore>

            {/* この箇所にあるコンポーネントは翻訳されます */}
        </Screen>
    )
}

WovnWait Component で元言語をチラつかせない範囲を指定する

Screen の配下で、翻訳切り替え時に元言語を表示させたくないコンポーネント群がある場合は WovnWait Component を利用してください。

デフォルトで最大 5 秒間、指定した翻訳が取得されるまで空文字が表示されるようになり元言語が表示されなくなります。

props.indicator を指定することにより、翻訳情報の取得中に任意の Loading Indicator を表示させることが可能です。

また props.waitingMS を設定することにより、任意の秒数に wovn-wait の有効時間を変更することが可能です。

import { Screen, WovnIgnore } from '@wovnio/react-native-sdk-core'
import { Text } from '@wovnio/support-react-native'
import { ActivityIndicator } from "react-native";

export const WaitDefaultScreen = () => {
  return (
    <Screen name="your_screen_name">
      {/* この箇所にあるコンポーネントは翻訳情報の取得まで元言語が表示されます */}
      <Text>こんにちは</Text>
      <WovnWait>
        {/* この箇所にあるコンポーネントは翻訳取得まで最大5秒間、空文字が表示されます */}
        <Text>こんばんは</Text>
      </WovnWait>
      {/* この箇所にあるコンポーネントは翻訳情報の取得まで元言語が表示されます */}
    </Screen>
  )
}

export const WaitIndicatorScreen = () => {
  return (
    <Screen name="your_screen_name">
      {/* この箇所にあるコンポーネントは翻訳情報の取得まで元言語が表示されます */}
      <Text>こんにちは</Text>
      <WovnWait indicator={<ActivityIndicator />} waitingMS={10000}>
        {/* この箇所にあるコンポーネントは翻訳取得まで最大10秒間、 ActiveIndicator が表示されます */}
        <Text>こんばんは</Text>
      </WovnWait>
      {/* この箇所にあるコンポーネントは翻訳情報の取得まで元言語が表示されます */}
    </Screen>
  )
}

差替コンポーネントの利用

React Native の翻訳操作をおこなうUIコンポーネントを Support Libraryで提供しています。これらを元コンポーネントから差し替えることから、以降では差替コンポーネントと呼びます。言語と取得している対訳情報を検知して、自動的に翻訳されるようになります。

また、差替コンポーネントは既存コンポーネントを拡張しているので、Props のインターフェースは既存コンポーネントと同じ仕様です。

// NG: ReactNative Text の差替前、この状態では翻訳されません
import { Text } as ReactNative from 'react-native'

<Text>こんにちは</Text>

// OK: ReactNative Text を差し替えることで翻訳対象となります
import { Text } from '@wovnio/support-react-native'

<Text>こんにちは</Text>

コンポネントは基本的に Expo の Managed/Bare Workflow の両方、また iOS/Android の両対応のものがほとんどですが、一部例外があります。（差し替え前のコンポーネントに依存しています）

参考リンク

対応しているコンポーネントについてはサポートしている差替コンポーネント一覧を参照してください。

特殊なケースにおける翻訳

下記のような特殊なケースに対して、翻訳する⽅法を記載します。

Support Library で対応していないコンポーネントを翻訳したい場合
⼀部の Props だけ翻訳したい場合

WovnTextTranslatable

このコンポーネントの children 以下にテキストを翻訳する関数 callback を渡し、翻訳可能にするコンポーネントです
これらのタグは他のコンポーネントと同様、 WovnIgnore タグの内側にある場合は、翻訳されません
Props に isIgnoreReporting (= true) を指定することで明示的にレポートを実行させずに翻訳することが可能です
wovn-wait を有効にする場合は、 Props に { isEnableWovnWait: true } を指定してください
- Props を { isEnableWovnWait: true, isIgnoreReporting: true } と指定することで、 wovn-wait を有効にしつつ、明示的にレポート機能をオフにすることができます

// テキスト翻訳
import { WovnTextTranslatable } from '@wovnio/react-native-sdk-core'

return (
    <WovnTextTranslatable>
        {t => (
            <SomeComponent title={t('タイトルテキスト')}>
                {t('本文テキスト')}
            </SomeComponent>
        )}
    </WovnTextTranslatable>
)

// wovn-wait を有効にする場合
import { WovnTextTranslatable, WovnWait } from '@wovnio/react-native-sdk-core'

return (
  <WovnWait>
    <WovnTextTranslatable>
      {t => (
        <SomeComponent title={t('タイトルテキスト')}>
          {t('本文テキスト', { isEnabledWovnWait: true})}
        </SomeComponent>
      )}
    </WovnTextTranslatable>
  </WovnWait>
)

WovnImageTranslatable

このコンポーネントの children 以下に画像 URL を翻訳する関数 callback を渡し、翻訳可能にするコンポーネントです
これらのタグは他のコンポーネントと同様、 WovnIgnore タグの内側にある場合は、翻訳されません
Props に isIgnoreReporting (= true) を指定することで明示的にレポートを実行させずに翻訳することが可能です
wovn-wait を有効にする場合には、 Props に { isEnabledWovnWait: true }　を指定してください。
- Props を { isEnabledWovnWait: true, isIgnoreReporting: true }　と指定することで wovn-wait を有効にしつつ明示的にレポート機能をオフにすることができます。

// 画像翻訳
import { WovnImageTranslatable } from '@wovnio/react-native-sdk-core'

return (
    <WovnImageTranslatable>
        {t => (
            <SomeImageComponent uri={t('https://image.com/image.jpg')} />
        )}
    </WovnImageTranslatable>
)

// wovn-wait を有効にする場合
import { WovnImageTranslatable } from '@wovnio/react-native-sdk-core'

return (
  <WovnWait>
    <WovnImageTranslatable>
      {t => (
        <SomeImageComponent uri={t('https://image.com/image.jpg', { isEnabledWovnWait: true})} />
      )}
    </WovnImageTranslatable>
  </WovnWait>
)

React Hooks を用いた翻訳

Functional Component では、よりシンプルに使える Custom Hooks を提供しています。Class Component では WovnTextTranslatable や WovnImageTranslatable を利用してください。

useTranslateText(src: string, isIgnoreReporting: boolean = false): string

翻訳元テキスト（ src ）を渡し、翻訳されたテキストを返す関数です
この Hooks の呼び出しが、 WovnIgnore タグの内側にある場合は、翻訳されません
第二引数の isIgnoreReporting を true にすると、明示的にレポートを実行させずに翻訳することが可能です

// テキスト翻訳
import { useTranslateText } from '@wovnio/react-native-sdk-core'

return (
    <Animated.Text>
        {useTranslateText('アニメーションテキスト')}
    </Animated.Text>
)

useTranslateImage(src: string, isIgnoreReporting: boolean = false): string

翻訳元画像 URL（ src ）を渡し、翻訳された画像 URL を返す関数です
この Hooks の呼び出しが、 WovnIgnore タグの内側にある場合は、翻訳されません
第二引数の isIgnoreReporting を true にすると、明示的にレポートを実行させずに翻訳することが可能です

// 画像翻訳
import { useTranslateImage } from '@wovnio/react-native-sdk-core'

return (
    <SomeImageComponent uri={useTranslateImage('https://image.com/image.jpg')} />
)

useTranslateItem(src: string, isIgnoreReporting: boolean = false): string

-翻訳元テキスト（src）を渡し、翻訳されたテキストを返す関数です。
- Component の Props に値を string 型で渡して翻訳を行う場合には、useTranslateText ではなく、こちらを使用してください。
この Hooks の呼び出しが、 WovnIgnore タグの内側にある場合は、翻訳されません
この Hooks の呼び出しが、 WovnWait タグの内側にある場合は、翻訳の取得までデフォルトで最大5秒間元言語は表示されません
第二引数の isIgnoreReporting を true にすると、後述のレポートは行われなくなります
- 翻訳は行われます

注意
使用方法については、下記 React Hooks を用いた翻訳を設定する際の注意点をかならず参照してください

// テキスト翻訳
import { useTranslateText } from '@wovnio/react-native-sdk-core'

return (
  <Picker>
    <Picker.Item label={useTranslateItem('出席')} value="key0" />
    <Picker.Item label={useTranslateItem('欠席')} value="key1" />
  </Picker>
)

React Hooks を用いた翻訳を設定する際の注意点

wovn-ignore を有効にする場合

wovn-ignore の仕様上、WOVN の機能を使用しないものについては、WovnIgnore Component とは異なる階層で使用する必要があります。

WOVN の機能を無効にしたいものについては、以下の方法で対応する必要があります。

wovn-ignore を有効にする方法

Custom Hooks を使用せず通常のライブラリで提供されるまま利用する
Custom Hooks を使用するものをラップしたコンポーネントを作成する
WovnTextTranslatable / WovnImageTranslatable を使用する

サンプルコード

import { Screen, WovnIgnore } from '@wovnio/react-native-sdk-core'
import { Text } from '@wovnio/support-react-native'

const HooksComponent = () => {
  return (
    <>
      <Animated.Text>
        {useTranslateText('アニメーションテキスト')}
      </Animated.Text>
      <Picker>
        <Picker.Item label={useTranslateItem('出席')} value="key0" />
        <Picker.Item label={useTranslateItem('欠席')} value="key1" />
      </Picker>
    </>
  )
}

export const WaitWithHooksScreen = () => {
  return (
    <Screen name="your_screen_name">
      <WovnIgnore>
        {/* このコンポーネントの内部にある Custom Hooks 使用部分は翻訳されません */}
        <HooksComponent />

        {/* この箇所にあるコンポーネントは翻訳が行われます */}
        <Animated.Text>
          {useTranslateText('アニメーションテキスト')}
        </Animated.Text>
      </WovnIgnore>
    </Screen>
  )
}

wovn-wait を有効にする場合

wovn-wait の仕様上、 Custom Hooks を利用した翻訳で wovn-wait を有効にする場合には、 WovnWait Component とは異なる階層で使用する必要があります。

WovnWait Component と同階層で wovn-wait 機能を有効にしたい場合には、WovnTextTranslatable WovnImageTranslatable を用いる必要があります。

wovn-wait を有効にする方法

Custom Hooks を使用するものをラップしたコンポーネントを作成する
WovnTextTranslatable / WovnImageTranslatable を使用する

また、コンポーネントの props で指定する値で wovn-wait を有効にしたい場合には、 `useTranslateItem` を使用してください。

サンプルコード

import { Screen, WovnWait } from '@wovnio/react-native-sdk-core'
import { Text } from '@wovnio/support-react-native'

const HooksComponent = () => {
  return (
    <>
      <Animated.Text>
        {useTranslateText('アニメーションテキスト')}
      </Animated.Text>
      <Picker>
        <Picker.Item label={useTranslateItem('出席')} value="key0" />
        <Picker.Item label={useTranslateItem('欠席')} value="key1" />
      </Picker>
    </>
  )
}

export const WaitWithHooksScreen = () => {
  return (
    <Screen name="your_screen_name">
      <WovnWait>
        {/* この箇所にあるコンポーネントは翻訳取得まで最大5秒間、空文字が表示されます */}
        <HooksComponent />

        {/* この箇所にあるコンポーネントは翻訳情報の取得まで元言語が表示されます */}
        <Animated.Text>
          {useTranslateText('アニメーションテキスト')}
        </Animated.Text>
      </WovnWait>
      {/* この箇所にあるコンポーネントは翻訳情報の取得まで元言語が表示されます */}
    </Screen>
  )
}

明示的に対訳情報を取得する

Screen Component を用いた場合、アプリケーション開発者が意識せずとも自動的に対訳情報を取得します。

ただし、アプリケーションの実装によっては明示的に対訳情報を取得したいケースがあります。この場合は、 loadTranslation を実行することで実現可能です。

import { loadTranslation } from '@wovnio/react-native-sdk-core'.

// 移動先スクリーンの翻訳テキストを先読みしてから画面遷移する例
await loadTranslation('NEXT_SCREEN_NAME')
navigation.navigate('NEXT_SCREEN_NAME_PAGE')

async loadTranslation(screen: string): Promise<void>

指定したスクリーン名の対訳情報を取得します。非同期処理になっています。

デバッグログで wovn-ignore の動作確認をする

デバッグログを有効にすることで、WOVN へ送信したレポートデータを出力できます。

wovn-ignore の動作は WOVN の管理画面に送信されていないことをもって確認ができますが、ignore 対象のテキストが WOVN のサーバーへ送信されずアプリ内に留まっているかどうかについて、担保は取ることは難しいです。

デバッグログを用いることで、下記を確認することができます。

wovn-ignore の設定が SDK によって正しく処理されたこと
wovn-ignore 対象の文字列が WOVN サーバーに送信されないこと

ログ出力の設定をする

WOVN.app SDK を導入した状態で、 initWovnAsync の第二引数に { enabledDebugLog: true } を設定してください。

本番環境では、ログ出力を行わないことをおすすめします。

```js

await initWovnAsync(ProjectToken, { enabledDebugLog: true })

```

ignore の動作確認

翻訳が実施されるタイミングで以下のログが流れます。翻訳対象の文字列が WOVN サーバに送信される対象から外れ、翻訳されないことを意味します。

Screen 単位で wovn-ignore を有効化している場合

アプリを起動し、wovn-ignore を設定している画面を開いてください。

該当スクリーンを開き翻訳が実行されるタイミングで wovn-ignore の設定コードが有効になっていることを示すログが出力されます。

Screen より上位階層で wovn-ignore を有効化している場合にはこのログのみが出力され、文言ごとのログは出力されません。

```sh

WOVN: ignored: ScreenName:[ScreenName]

```

Screen 内部で wovn-ignore を有効化している場合

アプリを起動し、wovn-ignore を設定している画面を開くと、以下のログが wovn-ignore が有効になっている文言の数だけ出力されます。WOVN.app SDK が wovn-ignore の設定を認識していることを意味するログです。

```sh
WOVN: ignored ScreenName: [screen] Text: [Text]

```

デバッグログでレポートの動作確認をする

デバッグログを有効にすることで、WOVN へ送信したレポートデータを出力できます。

注意
レポートログは、WOVN.app SDK から WOVNサーバーへ翻訳対象の文字列を送信したことを示します。ただし、途中経路のネットワーク障害といった理由により、かならずしも WOVN管理画面に文字列が登録されることを保証するものではありません。あくまで原因の切り分けに使用されるログであることをご理解ください。

ログ出力の設定をする

WOVN.app SDK を導入した状態で、 initWovnAsync の第二引数に { enabledDebugLog: true } を設定してください。

本番環境では、ログ出力を行わないことをおすすめします。

```js

await initWovnAsync(ProjectToken, { enabledDebugLog: true })

```

レポーティングの対象の文字列及び動作確認をする

アプリを起動し、対象画面を開いてください。

数分経過すると、以下のログが翻訳対象の文字列の数と同じ分、出力されます。

```sh

WOVN: reported: ScreenName: {スクリーン名} Text: {翻訳対象の文字列}

```

本ログの内容を確認することで、該当の文字列が WOVN.app SDK に読み込まれ、 WOVN サーバーへ送信されることが分かるようになります。

キャリア回線下でアプリ上の文言を WOVN に送信する

Cellular Network Mode に申し込みをすることで、通常は Wifi 接続下においてアプリ上の文言を WOVN に送信しますが、この機能を有効にすることでキャリア回線下でも送信可能になります。

このセクションの記事

概要

目次

エンドユーザのデータ送信管理

WovnContainer Component による囲い込み

Screen Component による囲い込み

初期化処理、破棄処理

async initWovnAsync(token: string): Promise<void>

async disposeWovnAsync(): Promise<void>

言語切り替えをおこなう

changeLangCode(lang: string): void

changeToSystemLang(): void

WOVN プロジェクトの設定値を取得する

WOVN プロジェクトの言語情報を取得する

getProjectLanguages()

現在の翻訳言語を取得する

getCurrentLangCode(): string

WovnIgnore Component で翻訳しない範囲を指定する

WovnWait Component で元言語をチラつかせない範囲を指定する

差替コンポーネントの利用

参考リンク

特殊なケースにおける翻訳

WovnTextTranslatable

WovnImageTranslatable

React Hooks を用いた翻訳

useTranslateText(src: string, isIgnoreReporting: boolean = false): string

useTranslateImage(src: string, isIgnoreReporting: boolean = false): string

useTranslateItem(src: string, isIgnoreReporting: boolean = false): string

React Hooks を用いた翻訳を設定する際の注意点

wovn-ignore を有効にする場合

wovn-ignore を有効にする方法

wovn-wait を有効にする場合

wovn-wait を有効にする方法

明示的に対訳情報を取得する

async loadTranslation(screen: string): Promise<void>

デバッグログで wovn-ignore の動作確認をする

ログ出力の設定をする

ignore の動作確認

Screen 単位で wovn-ignore を有効化している場合

Screen 内部で wovn-ignore を有効化している場合

デバッグログでレポートの動作確認をする

ログ出力の設定をする

レポーティングの対象の文字列及び動作確認をする

キャリア回線下でアプリ上の文言を WOVN に送信する

関連記事