以前、NextJSといったJavaScriptフレームワークを使ってWEBアプリを作っていたときの話。
メインは日本人だが、外国人も使えるアプリにする必要があった。
- Google翻訳APIを使う
- Google以外の自動翻訳してくれるサービスを利用する
- 各国に対応したページを量産する
- 指定した文言であって欲しい
色々と実装方法はあるが、どれもマッチしない。
3は論外、4が重要！
適当な直訳ではダメ、言い回しも業界に合わせる必要があった。
さて、どうするか…
無いものは作っちゃえ！（← 好きです。この言葉）
ということで、用意するのはJSONファイルと簡単なスクリプト。
今回は、NextJS を使った実装方法を紹介します。
Next.JS ついては → https://nextjs.org/
環境の準備ですが、事前にNode.jsが動作する環境が必要です。
次にNextJS環境。
こちら最新バージョンではデフォルトでTypeScriptが使えて So Cool!
公式ドキュメントに従い、簡単に環境作っちゃいましょう。
> npx create-next-app
TypeScriptを有効にするには、ルートにtsconfig.jsonが必要だったり、別途モジュールが必要だったり。
ちょっとだけゴニョゴニョして環境出来上がり。
> npm run dev
とかすると http://localhost:3000 で確認できます。
ウォッチ状態なので、このままコーディングすると自動的に反映され、リアルタイムで動作を確認できます。
では早速、表示するページを用意しましょう。
pagesディレクトリに既に index.js を書き換えちゃいます。
export default () => (
<div>
<Head>
<title>Translate</title>
</Head>
<p>ここの</p>
<p>文字列が</p>
<p>翻訳されます</p>
<p>ただし、辞書に無いものはそのまま表示されます</p>
</div>
)
言語を変えるためのボタンを用意します。
今回は「日本語」「英語」「中国語」への変換を行うこととします。
同時に、クリックした際のイベントハンドラも用意しましょう。
ボタンをクリックすると、LanguageUtil.setLanguage(...) が呼ばれる仕組みです。
<form>
<button value='ja' onClick={changeLanguage}>日本語</button>
<button value='en' onClick={changeLanguage}>英語</button>
<button value='zh' onClick={changeLanguage}>中国語（簡体）</button>
</form>
const changeLanguage = event => {
event.preventDefault()
const language = event.currentTarget.value
setLanguage(language)
}
その LanguageUtil.setLanguage(...) の実体。
URLのクエリ―パラメータに、langとして、押されたボタンのvalue値をセットしています。
export const setLanguage = (language: string): void => {
const { pathname, search } = window.location
const query = parse(search.replace('?', ''))
query['lang'] = language
Router.replace({ pathname, query }).then()
}
次に、翻訳の中心的な存在となるJSONファイルを用意しましょう。
翻訳したい文字列をキーにして、各国コード用の文言を用意します。
↓適当な翻訳です。
{
"ここの": {
"en": "This",
"zh": "这个"
},
"文字列が": {
"en": "string is",
"zh": "字符串是"
},
"翻訳されます": {
"en": "translated",
"zh": "已翻译"
}
}
キーの値（文言）と、国コードを渡すと、その国コードに対応した文言が返るメソッドを用意します。
その際、国コードはクエリ―ストリングから取得するようにします。
NextJSはサーバ上でも動作するため、Windowオブジェクトが有るか事前にチェックする必要があったりします。
export const getLanguage = (): string => {
if (!hasWindow()) return 'ja'
const { search } = window.location
const query = parse(search.replace('?', ''))
return _.get(query, 'lang', 'ja') as string
}
export const translate = (word: string): string => {
const lang = getLanguage()
return _.get(_translates, `${word}.${lang}`, word)
}
最後にページを修正します。
翻訳したい文字列を translate(...) で囲うだけです。
export default () => (
<div>
<Head>
<title>Translate</title>
</Head>
<form>
<button value='ja' onClick={changeLanguage}>日本語</button>
<button value='en' onClick={changeLanguage}>英語</button>
<button value='zh' onClick={changeLanguage}>中国語（簡体）</button>
</form>
<p>{translate('ここの')}</p>
<p>{translate('文字列が')}</p>
<p>{translate('翻訳されます')}</p>
<p>{translate('ただし、辞書に無いものはそのまま表示されます')}</p>
</div>
)
それぞれの言語ボタンをクリックすると、URLのパラメータが変わり
指定の言語に切り替わることが確認できると思います。
長文やページデザインも変更するような場合は、今回紹介した内容では対応できませんが、
簡単な翻訳機能であれば、外部の翻訳サービスを一切使わずに実装できちゃいました。
本記事で使ったソースは、GitHubで公開しています。
https://github.com/wild-lycaon/poc-nextjs-translate
では、またどこかで。