[JS] 翻訳アプリ

タグ :

これまでの基礎知識を結集して簡易アプリを作成するシリーズです。
今回は翻訳アプリを作成してみます。英訳はテキトーです。

アプリ概要

翻訳アプリといっても、自力で英訳が必要です。
予めテキストファイルに日本語とその日本語を英訳したものを保存しておき、クリック動作にて切り替えているだけです。

以下のような仕様とします。

言語のテキストをクリックして動作
 - a タグではなく、span タグのテキストクリックで動作させる
 - a タグだと URL パラメータを付加するのがカッコ悪いので。。。
テキストファイルに日本語と英語を保存
 - 以下のデータ形式で保存しておく
 - 「日本語,Japanese(改行)英語,English(改行)…」
テキストファイルデータとの一致するテキストを変換
 - 一致するまでループで探す(一致テキストが無かったら変換されない)
 - 「ページ内テキストのループ」と「テキストファイルデータのループ」を用いる

必要となる処理は以下になります。

  • クリックイベント
  • テキストファイル読み込み
  • データ配列化
  • 文字列分割
  • テキスト一致判定
  • ページテキストの取得
  • ページテキストの変更

作成したサンプル

処理の流れとコードは以下になります。

[ 動作フロー ]
js_translation_flow
[ コード ]
$(function() {
	$(".lang span").click(function() {
		var tID = -1
		if( $(this).attr("class") == "jpn" ) {
			tID = 1;
			$(this).css({"color":"red","cursor":"text"});
			$(this).next().css({"color":"gray","cursor":"pointer"});
			$(this).next().removeClass("selected");
		} else if( $(this).attr("class") == "eng" ) {
			tID = 0;
			$(this).prev().css({"color":"gray","cursor":"pointer"});
			$(this).prev().removeClass("selected");
			$(this).css({"color":"red","cursor":"text"});
		}
		$(this).addClass("selected");
		if(tID >= 0) {
			$.ajax({
				url: "text.txt",
				type: "get",
				success: function(data) {
					var str,txtObj;
					var texts = data.split(/[\n\r]/g);
					$.each(texts, function() {
						str = this.split(",");
						$(".text p").each(function() {
							if($(this).text() == str[tID]) {
								$(this).text(str[tID^1]);
							}
						});
					});
				}
			});
		}
	});
});
<h4>翻訳アプリ</h4>
<div class="lang">
	<span class="jpn selected" style="color:red;cursor:text;">日本語</span>
	<span class="eng" style="color:gray;cursor:pointer">English</span>
</div>
<div class="text">
	<p>このテキストを翻訳します。</p>
	<p>おはよう。こんにちは。さよなら。</p>
	<p>今日はいいお天気ですね。</p>
</div>
このテキストを翻訳します。,This text is translated.
おはよう。こんにちは。さよなら。,Good morning. Hello. Bye.
今日はいいお天気ですね。,It's sunny.
詳しい説明は後述します。
ヘッダの「日本語」をクリックするとテキストが日本語に切り替わり、「English」をクリックするとテキストが英語に切り替わります。クリック出来るのは現在表示中の言語以外になります。このくらいのテキストの量なら、一瞬で切り換えられます。

コード解説

jQuery、HTML のコードの説明をします。

[ jQuery の説明 ]
[ 2行目 クリックイベント ]
$(".lang span").click(function() {

言語テキスト部の span 要素をクリックすることで動作します。

[ 3行目〜15行目 言語判定&実行許可&スタイル変更 ]
var tID = -1;

実行許可判定は変数「tID」で行います。初期値に -1 を代入しておき、次の実行許可判定にて 0 以上の値に変更されていれば翻訳処理を実行するようにしています。

if( $(this).attr("class") == "jpn" ) {
	tID = 1;

クリックした span 要素のクラス名が「jpn」であれば、日本語テキストへ切り替える処理を行うように設定します。変数「tID」を 1 に設定することで日本語へ変換する処理を実行するようにしています。

$(this).css({"color":"red","cursor":"text"});
$(this).next().css({"color":"gray","cursor":"pointer"});
$(this).next().removeClass("selected");

言語テキスト部のスタイルを変更します。
クリックした言語テキストは文字色を赤、マウスオーバー時のカーソルを text に変更します。もう片方の言語テキストは文字色をグレー、マウスオーバー時のカーソルを pointer に変更します。
さらに、もう片方の言語テキストのクラス名から「selected」を削除します。

$(this).addClass("selected");

クリックした言語テキストのクラス名に「selected」を追加します。
クラスを追加することで、言語判定の条件分岐にて両方とも false となり、翻訳処理が実行されないようにしています。つまり、同じ言語を2回クリックしても2回目以降はシカトするということです。これにより無駄な処理を省いています。

[ 16行目 実行許可判定 ]
if(tID >= 0) {

変数「tID」の値により以下の翻訳処理を実行するか否かを判定します。前の処理にて変数「tID」には -1 か 0 か 1 が代入されているので、-1 であった場合には翻訳処理は実行されません。

[ 17行目〜20行目 テキストファイル読み込み ]
$.ajax({
	url: "text.txt",
	type: "get",
	success: function(data) {

Ajax を用いてテキストファイルのデータを取得します。この処理に関しては過去記事「テキストファイルの操作」を参照してください。

[ 22行目 データ配列化 ]
var texts = data.split(/[\n\r]/g);

ファイル読み込みにて取得したデータを配列「texts」に格納します。配列へ格納するときに改行コードで区切って格納します。一つの配列要素には「日本語,Japanese」という様な日本語と英語の文字列が格納されます。

[ 23行目 データループ ]
$.each(texts, function() {

配列化したデータを一つずつ参照するループを実行します。

[ 24行目 データ分割 ]
str = this.split(",");

改行毎に区別したデータをさらにカンマ区切りで分割します。分割されたデータを配列「str」に格納します。配列「str」の 0 番目の要素には日本語が、1 番目の要素には英語が格納されます。

[ 25行目〜29行目 テキスト変更 ]
$(".text p").each(function() {

ページ内のテキスト部のループを実行します。

if($(this).text() == str[tID]) {

ページ内のテキストとデータが一致しているかの判定を行います。実行許可判定で使用した変数「tID」の値により、配列「str」の要素番号を指定します。

$(this).text(str[tID^1]);

テキストを変更します。
配列「str」の要素番号に変数「tID」の逆の数値を指定したデータがテキストになります。逆の数値を指定させるために論理式「^(XOR)」を使用します。変数「tID」が 0 の場合には 1 となり、1 の場合には 0 となります。(論理式「~(反転)」を使おうとしたのですが、何故かうまくいきませんでした。。。)

[ HTML の説明 ]
[ 2行目〜5行目 言語テキスト部 ]

クリックすると翻訳処理が実行されます。
初期状態は日本語が選択された状態です。クリックされる度にスタイルが可変されます。

[ 6行目〜10行目 翻訳テキスト部 ]

翻訳処理ではここのテキストを変更します。各 p 要素が変更対象テキストになります。

まとめ

この翻訳アプリは、グローバル的なサイトを作成するときには便利です。CakePHP などでは Locale 機能としてサイト閲覧時に自動で翻訳してくれるものもありますが、日本のパソコンで閲覧した場合には日本語になります。

日本在住の日本語が分からない外国人の方は、ページにアクセスしても日本語しか表示されないので困っているはずです。そんなときに English に翻訳されるサイトがあれば助かるのではないでしょうか。
と、翻訳としてはそれぐらいしか使い道は無いかもしれません。しかも、自力で英訳を用意する必要もあるため、ちょいと不便かもしれません。

ですが、このテキストファイルから読み込んで変換するというアプリは他にも使えそうです。テキストファイルや読み込み後の文字列分割処理などをもっとスマートに改善すれば色々な場面で使用できると思います。

Share

  • このエントリーをはてなブックマークに追加

Comment

コメントを残す

*がついている欄は必須項目です。

  • Twitter
  • Facebook
  • Google Plus
  • RSS Feed