【jquery】追加するテキストを翻訳する方法

Question

jqueryで要素を.prepend()などするとき、その中にテキストがあるとします。
これを翻訳するとき、何かよい方法はありませんか？

わたしはいま下記のように.prepend()しています。

var guide = getLanguage()['guide'];
$('p').prepend(guide);

// <p>この項目は必須です</p> となる

上のgetLanguage()ですが、下記の感じです。下記のような翻訳専用の関数を作って、上のように.prepend()しているのですが、これって普通の方法ですか？

function getLanguage(){
	let textarea,
		guide;

	if( getBrowserLanguage()=='ja' ){
		textarea = "住所を入力してください";
		guide    = "この項目は必須です"
	}
	else{
		textarea = "Enter your address";
		guide    = "This field is required"		
	}
	return {
		'textarea': textarea,
		'guide': guide
	};			
}

自分で考えた方法で、これでいいのかなって不安に思いました。

たとえばPHPでは翻訳専用のファイルを作っておくなどの方法があるように、もっとよい方法や普通の方法があったら教えて頂ければと思いました。

よろしくお願い致します。

Answer 1

別にそうやってもいいですけどいつか限界が来ます。それに加えて、半端ない量を書かなくてはいけません。それでもよければどうぞ...
もしも、楽して正しく（？）翻訳したいのであれば、Google大先生のAPIを使ってください。
Google大先生のAPIは他の回答者がURLを貼っていらっしゃるのでそちらを参照にすれば良いかと

Answer 2

    textarea = "住所を入力してください";

    guide    = "この項目は必須です"

と
textarea = "Enter your address";
guide = "This field is required"

htmlとjsのみでの言語対応はやった事無いので、普通かどうかについての回答は出来ませんが、
自分ならこれらの各言語の文章を切り出してjsonファイルにまとめてサーバーに置いといて読み込んで使いますね。（直接js内に吐き出してもいいけど）
まとめ方はページ(url)ごとにjsonを分けるとか似たようなページごとにjsonを分けるとか色々あるでしょうが、そこはその時々の作りに合わせて設計ですね。

サンプルjson

{"jp":{"textarea":"jpjpjpjpjp","guide":"guideguide"},"en":{"textarea":"Enter your address","guide":"This field is required"}}

とか

{"textarea":{"jp":"jpjpjpjp","en":"enenenenen"},"guide":{"jp":"jpguide","en":"enguide"}}

Comments

[marimon]

jsonにまとめておくのはよさそうですね。どうもありがとうございます。

Answer 3

私なら、そもそも自分で翻訳定義はしないですが　笑
（どっかこっかの翻訳サイトがAPI提供してると思うので、それ使います）

自分で翻訳情報を定義するとしたら、下記の感じでしょうか。

const translationList = {};
const jp = [
  ['林檎', 'りんご', 'リンゴ'],
  ['住所'],
  ['名前', 'なまえ']
];
const en = ['apple', 'address', 'name'];

jp.forEach((val, index)=>{
  val.forEach((valIn)=>{
    translationList[valIn] = en[index];
  });
});

console.log(translationList['リンゴ']); // 出力：apple

ですが、上記って、あくまで単語なんで（しかもなまらてきとうに書いてます）、文章を翻訳するってんなら、英語に堪能であることと、
英語の文法をしっかり出力できるロジックか、
AIに学習させるとかしないと、正確なものはでないと思います。
そんなん自分でやってられんので、外部のAPIを使うわけです。

Comments

[miyabi_pudding]

ちなみに、私の回答のやり方だと、単語増えると、バカスカ メモリ食うので、まったくお勧めできません。
100語くらいなら、なんとでもなりますが、1万語とかだと、とんでもないことになります。
やっぱり、翻訳サイトとかのAPIを利用されることをお勧めします。
（それでも100%正確なものは出ないと思いますが）

[marimon]

自分でやるとしたらそちらの書き方でも良さそうに思いましたが、やはりAPIがおすすめですか。なまらありがとうございます。APIですと「すでに表示されているテキストを翻訳する」ような翻訳かと思ったのですが、「翻訳されたテキストが挿入される」ような場合でも使えるでしょうか？GoogleのAPIを読むと、「翻訳ボタン」をクリックしたときにすでに表示されているテキストを翻訳するという機能に思えたので。

[miyabi_pudding]

手で作るととんでもない時間と労力必要になりますからね・・・。
API使う方が絶対いいと思いますよ。
http://unokun.hatenablog.jp/entry/2015/08/08/103841
こちら（だいぶ記事古いですが・・・）をご覧いただければわかるとおり、ポスト送信した際にJSONで返してもらうって方法は必ずあるはずなので、Google Translation APIのサイト内をくまなく探してみてはいかがでしょうか。
また、Google Translation APIでなくても、他にもちょいちょい、APIを提供しているものも存在するようです。
https://developer.ntt.com/ja/blog/668e33c7-f1b1-4910-978e-d6cd55c976a0

[marimon]

ありがとうございます。今GoogleAPI挑戦しようとしたら、有効化のために課金が必要らしく断念しましたｗ他のをちょいちょい見てみます。

[miyabi_pudding]

まぁ、正直なところ、高いですよね・・・　汗
その分、高性能・多機能なうえ保証もされてるでしょうけどね。
時間と気力があり、ロジック組んでいく自信がおありなら、
自分で作ってもいいかとは思いますけどねw
ただし、とにかく時間は間違いなく膨大にかかりますね。
どうか頑張ってください。

[marimon]

今回はちょこちょこっとやっていきます。ありがとうございます(◍•ᗜ•́)✧

Answer 4

普通ではないです。
普通はGoogle Translation APIを使用します。
https://cloud.google.com/translate/?hl=ja

これって普通の方法ですか？

Comments

[yasutomi]

低評価を押されている方はGoogle Translation APIを使用するよりも
良い方法をご存知だと思われますので、ぜひコメント投稿で教えていただきたいです。

まさかとは思いますが、ただのGoogle翻訳と勘違いして
低評価を押したわけではありませんよね？

[miyabi_pudding]

ぶっちゃけ、API使うのが一番ですよね。
自分で定義するのは、練習にはいいかもしれないですが　汗
単語の検索、あいまい検索など、
英文の文法までしっかり算出するロジックとかかなり練習になりそうです。

[marimon]

ありがとうございます。そちらは「翻訳ボタン」をクリックしたら翻訳されるようなものでしょうか？
たとえばホバーしたときにHTMLとテキストがJSから呼び出される場合、そのテキストを翻訳するというわけにはいきませんよね？

[miyabi_pudding]

横槍失礼します。
yasutomiさんが掲示していただいているURLのページを上から下まで一通りご覧ください。
ページ冒頭のボックスはあくまで"デモ"ですので、
おそらくですが、APIの使い方、JSの組み方によっては、ホバーでも全然いけると思います。
APIとはなんなのか？はご存知でしょうか？？

[marimon]

miyabi_takatsukさんありがとうございます。じっくり読んでみます。YouTubeのAPIだけ使ったことがある程度です。