【Javascript】Bing翻訳ウィジェットが終了している模様なので代替案を考えてみた | Wood-Roots:blog

2019
07/17

Bing翻訳ウィジェットが終了している模様なので代替案を考えてみた

2019年の年末年始ごろだったと思いますが、Googleウェブサイト翻訳ツールの新規提供が終了しました。

代替として有力だったBing翻訳ウィジェットも長いことメンテナンス中で、もう終了と判断してもいいような状況です。

ブラウザの翻訳機能があるとはいえ、サイトの機能として実装を求められるケースもあると思います。
そこで代替案を考えてみました。

ADs

Google翻訳に飛ばす

Google翻訳はURLを入力することでそのページを指定言語に翻訳することができます。

当サイトを英語に翻訳した例（Google翻訳）

URLは以下のように単純なものですので、単なるリンクとして別ウインドウで開けば以前のウィジェットと似たような挙動にできそうです。

https://translate.google.com/translate?hl=ja&sl=ja&tl=en&u=http%3A%2F%2Fwood-roots.com

hl: サイトのインターフェイスの言語
sl: 翻訳前の言語
tl: 翻訳後の言語
u: 翻訳したいページのURL

HTML

selectで言語を選択したら別ウインドウで翻訳されたページが開く、という動きで作ってみます。
まずはselectで各言語へのリンクを作ります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<select name="hl" onchange="transferGoogle(this);">
<option value="" selected>Google翻訳</option>
<option value="ar">アラビア語</option>
<option value="bn">バングラ語</option>
<option value="bs-Latn">ボスニア語 (ラテン)</option>
<option value="bg">ブルガリア語</option>
<option value="ca">カタロニア語</option>
<option value="zh-CHS">簡体字中国語</option>
<option value="zh-CHT">繁体字中国語</option>
<option value="yue">広東語 (繁体字)</option>
<option value="hr">クロアチア語</option>
<option value="cs">チェコ語</option>
<option value="da">デンマーク語</option>
<option value="nl">オランダ語</option>
<option value="en">英語</option>
<option value="et">エストニア語</option>
<option value="fj">フィジー語</option>
<option value="fil">フィリピン語</option>
<option value="fi">フィンランド語</option>
<option value="fr">フランス語</option>
<option value="de">ドイツ語</option>
<option value="el">ギリシャ語</option>
<option value="ht">ハイチ語</option>
<option value="he">ヘブライ語</option>
<option value="hi">ヒンディー語</option>
<option value="mww">白モン語</option>
<option value="hu">ハンガリー語</option>
<option value="is">アイスランド語</option>
<option value="id">インドネシア語</option>
<option value="it">イタリア語</option>
<option value="ja">日本語</option>
<option value="sw">スワヒリ語</option>
<option value="tlh">クリンゴン</option>
<option value="tlh-Qaak">クリンゴン (pIqaD)</option>
<option value="ko">韓国語</option>
<option value="lv">ラトビア語</option>
<option value="lt">リトアニア語</option>
<option value="mg">マダガスカル語</option>
<option value="ms">マレー語</option>
<option value="mt">マルタ語</option>
<option value="yua">ユカテコ語</option>
<option value="no">ノルウェー語</option>
<option value="otq">ケレタロ州オトミ語</option>
<option value="fa">ペルシャ語</option>
<option value="pl">ポーランド語</option>
<option value="pt">ポルトガル語</option>
<option value="ro">ルーマニア語</option>
<option value="ru">ロシア語</option>
<option value="sm">サモア語</option>
<option value="sr-Cyrl">セルビア語 (キリル)</option>
<option value="sr-Latn">セルビア語 (ラテン)</option>
<option value="sk">スロバキア語</option>
<option value="sl">スロベニア語</option>
<option value="es">スペイン語</option>
<option value="sv">スウェーデン語</option>
<option value="ty">タヒチ語</option>
<option value="ta">タミール語</option>
<option value="te">テルグ語</option>
<option value="th">タイ語</option>
<option value="to">トンガ語</option>
<option value="tr">トルコ語</option>
<option value="uk">ウクライナ語</option>
<option value="ur">ウルドゥ語</option>
<option value="vi">ベトナム語</option>
<option value="cy">ウェールズ語</option>
</select>

Javascript

次にtransferGoogle()関数を定義します。
ドロップダウンで何かを選んだらwindow.openで翻訳ページのURLを開くだけの簡単な処理です。

1
2
3
4
5
6
function transferGoogle(target){
if(target.options[target.selectedIndex].value){
var url = 'https://translate.google.com/translate?hl=ja&sl=ja&u=' + location.href + '&tl=' + target.options[target.selectedIndex].value;
window.open(url);
}
}

Bing翻訳に飛ばす

まったく同じ要領でBing翻訳へ飛ばすこともできます。

当サイトを英語に翻訳した例（Bing翻訳）

細かく見ていくと得意なジャンルや優劣が出てくるのかもしれませんが、私が見る限りではGoogle・Bingどちらも同等の結果です。

https://www.translatetheweb.com/?from=ja&to=en&dl=ja&a=https%3A%2F%2Fwood-roots.com%2F

パラメーターも名称が違うだけでほとんど一緒です。

from: 翻訳前の言語
to: 翻訳後の言語
dl: インターフェイスの言語
a: 翻訳するページのURL

HTMLとJavascript

HTMLは同じ（関数名は異なります）

1
2
3
4
5
6
7
<select name="hl" onchange="transferBing(this);">
<option value="" selected>Bing翻訳</option>
<option value="ar">アラビア語</option>
<option value="bn">バングラ語</option>
<option value="bs-Latn">ボスニア語 (ラテン)</option>
<!-- 中略 -->
</select>

JavascriptもURLとパラメータが違うことに気をつければまったく同じです。

1
2
3
4
5
6
function transferBing(target){
if(target.options[target.selectedIndex].value){
var url = 'https://www.translatetheweb.com/?from=ja&dl=ja&to=' + target.options[target.selectedIndex].value + '&a=' + location.href;
window.open(url);
}
}

selectよりも一般的なドロップダウンにしたほうが見栄えのカスタマイズができてよりよいかもしれません。

おまけ

言語フラグと言語名を配列にしました。
HTML以外で生成する場合に使えると思いますので、コピペでご利用ください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
var arr = {
"ar":アラビア語,
"bn":バングラ語,
"bs-Latn":ボスニア語 (ラテン),
"bg":ブルガリア語,
"ca":カタロニア語,
"zh-CHS":簡体字中国語,
"zh-CHT":繁体字中国語,
"yue":広東語 (繁体字),
"hr":クロアチア語,
"cs":チェコ語,
"da":デンマーク語,
"nl":オランダ語,
"en":英語,
"et":エストニア語,
"fj":フィジー語,
"fil":フィリピン語,
"fi":フィンランド語,
"fr":フランス語,
"de":ドイツ語,
"el":ギリシャ語,
"ht":ハイチ語,
"he":ヘブライ語,
"hi":ヒンディー語,
"mww":白モン語,
"hu":ハンガリー語,
"is":アイスランド語,
"id":インドネシア語,
"it":イタリア語,
"ja":日本語,
"sw":スワヒリ語,
"tlh":クリンゴン,
"tlh-Qaak":クリンゴン (pIqaD),
"ko":韓国語,
"lv":ラトビア語,
"lt":リトアニア語,
"mg":マダガスカル語,
"ms":マレー語,
"mt":マルタ語,
"yua":ユカテコ語,
"no":ノルウェー語,
"otq":ケレタロ州オトミ語,
"fa":ペルシャ語,
"pl":ポーランド語,
"pt":ポルトガル語,
"ro":ルーマニア語,
"ru":ロシア語,
"sm":サモア語,
"sr-Cyrl":セルビア語 (キリル),
"sr-Latn":セルビア語 (ラテン),
"sk":スロバキア語,
"sl":スロベニア語,
"es":スペイン語,
"sv":スウェーデン語,
"ty":タヒチ語,
"ta":タミール語,
"te":テルグ語,
"th":タイ語,
"to":トンガ語,
"tr":トルコ語,
"uk":ウクライナ語,
"ur":ウルドゥ語,
"vi":ベトナム語,
"cy":ウェールズ語
}

ADs

Related Articles関連記事

Post Comments

メールアドレスが公開されることはありません。

Comments

2019年の年末年始っていつ

Category

Archive

Search

Social