Google AJAX Language API を使って翻訳ツール制作

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

前回の Web Editor に続き、翻訳ツールを作ってみました。

View Sample

Google AJAX Language API Sample
http://tm-labo.com/laboratory/finding/google-api-translation-sample/
Translate Tool
http://tm-labo.com/laboratory/finding/google-api-translation-sample2/

About

タイトルにあるように、Google AJAX Language APIを使って制作しました。
APIはGoogleのを使って、インターフェースはYahooを参考にするという
怒られそうな作りになってますw

今はただ翻訳するだけですが、
単語分割してそれぞれ翻訳するツールを制作中です。
近日中に公開するのでよかったらそちらのほうも使ってみてください。

今後は、文を単語分割して問題を自動で作る
英語タイピングゲームなんてのも作っていこうと考えています。

Source

Google AJAX Language API Sample の Source を一応乗せておきます。
コメントで細かく説明しているのでよかったら参考に♪♪

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>TM Labo: Google API - Translation Sample</title>
        <style>
            /* 等幅にしておく */
            * {
                 font-family: monospace;
            }
        </style>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            
            // dom取得の省略関数
            var $id = function(id){
                return document.getElementById(id);
            }
            
            // イベント追加
            var addEvent = function(element, type, fn) {
                element.addEventListener(type, fn);
                return element;
            }
            
            // google api を load
            google.load("language", '1');
            
            // google api の load が終了したら呼ばれる関数だと思われる
            google.setOnLoadCallback(function(){
                
                // 1度翻訳しておく
                translate();
                
                // ボタンに翻訳関数を登録
                addEvent(document.fm, "submit", translate);
            });
            
            // 翻訳処理(このサンプルの肝)
            var translate = function(){
                // 入力した英文を取得
                var text = $id("source-field").value;
                
                // 翻訳
                google.language.translate(text, "en", "ja", function(result){
                    // 翻訳結果を結果フィールドに代入
                    $id("result-field").value = result.translation;
                });
                
                // フォーカスをsource-fieldへ
                $id("source-field").focus();
                
                return false;
            }
            
        </script>
    </head>
    
    <body>
        <h1>Google API - Translation Sample</h1>
        
        <!-- Enterでも反応するようにformで囲ってます -->
        <form method="get" action="#" name="fm" onsubmit="return false;">
            <label>Source : <input type="text" id="source-field" value="Translation Sample" /></label>
            <input type="submit" id="trans-button" value="Translate" /><br />
            <label>Result : <input type="text" id="result-field" value="" /></label>
        </form>
        
        <hr />
        <a href="http://tm-labo.com/">Home</a>
    </body>
</html>
    

プログラマやってると1日中英語サイトとにらめっこなんてことが
しょっちゅうあります。

最近も仕事で物理エンジンを使う機会があったのですが、
情報が英語サイトにしかなく、頭がおかしくなりそうでした。

プログラマにとって英語は重要!!
情報量もですが、自分はプログラムの変数名を決める際に英語の
重要性を感じたりもします(しょっちゅう変数名何にしようか迷う。共感してくれる人多いのでは?w)

今まで中学レベルの英語力でなんとかやってきたのですが、
いちいち単語を調べたり、たまに解釈が違っていたりと、非常に効率の悪い。

このままでは、私の座右の銘である「Time is money」の精神に反する。

英語を勉強しよう!!どうやって?本??いやプログラマらしい勉強でいこう!じゃツールだな。じゃひとまず英語を勉強するためのツールを作ろう!!

といった流れで作ってみました。

思い立ったらすぐ作れる。
いやぁ、プログラミングって本当にいいもんですね~

TRACK BACK URL

POST COMMENT

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

COMMENT