JS 日英で言語変換する [mr]

どうもmrです。

自分は業務でもずーっとUnity(C#)を使用しているのですが、
2番目くらいで使えるJavaScriptの記事を書こうと思います。
使えるといっても、ちゃんとしたサービスを立ち上げたこともなく、
構文が少しわかるくらいですが……。

この記事でできること

・HTML/CSSで制作したホームページで日英を変換するシステムを導入できる

この記事でできないこと

・日本語の文を英語に自動翻訳すること

なので今回は自力で英訳したり、和訳したりする必要があります。

始めに

このページにある translate.jsをダウンロードorコピペして使用します。

制作しているディレクトリの好きなところに置いてください。

translate.min.jsというファイルもありますが、これはminifyといって、
実装内容はそのままで、文字数を減らしてファイルサイズを減らしているものなので、
translate.jsとは同じものになります。
なので、お好みで使ってください。

使い方

一番大事なJSファイルの読み込み。

src=”../translate.js”の部分はダウンロードしたファイルの置いた位置によって変わります。

まず、HTMLの好きなところに変換用のボタンを設置します。

こんな感じで。
CSSや実行しているブラウザによって違いはあるとは思いますが、

こんな感じのが出てくると思います。

そして翻訳したい部分について。

こんな感じになります。

重要なことは3つあります。

  1. クラスにlangを付ける
  2. data-en属性に英語表記時の英文を記入する
  3. data-jp属性に日本語表記時の英文を記入する

ほとんどのタグに対応できるようにしています。
このページが対応例です。

最後に

Webページを作っていた時に、
Googleの自動翻訳は制度がイマイチだし、
何より画像とかは切り替えられないことが原因で制作しました。

もともとはWebページの一部として、作ってたんですが、
上手く切り離せば、再利用ができるシステムだったので、
流用しやすいようにGitHubに公開しています。

勉強中のソースコードですし、そもそも内容は少ないので、
微妙かもしれませんが、よければリポジトリの方にスターください…!

お願い

気になる点や、いや、これ違うやろ。ってところがありましたら、
気軽にコメントください。
至急、修正いたします。