aomushi510の日記

iPadで選択した文字列を翻訳するブックマークレットを作りました

昨日はSmiley Hackathon#10 : ATNDに行ってきました。
HackathonではFacebookアプリをつくっていたのですがそれはおいておいて、iPadで選択した文字列を翻訳できるブックマークレットを作ったのでそちらを紹介したいと思います。

作ったきっかけ

iPadでゴロゴロしながら英語のサイトを見たりしたいなーと思ってたのですが、
いざ読んでみると単語を調べる時にアプリを切り替えないといけないので、読むのがつらくなってきました。
iPadのSafariでは拡張機能がまだないそうなので、ブックマークレットを作ってみることにしました。

作り方

ブックマークレットの作成はHatena::Letを使い、
翻訳APIはMicrosoft Translatorを使いました。
(Google Translate APIはもうすぐDuplicateになるようです)

コード

/*
 * @title translate selected text
 * @description translate selected text
 * @include http://*
 * @license MIT License
 * @require jQuery
 * @private
 */

var appId = 'Bing APIのAppID';
var getText = function() {
    var range = window.getSelection().getRangeAt(0);
    if (range.toString()) {
        var str = range.toString();
        $.ajax({
            type: "GET",
            url: "http://api.microsofttranslator.com/V2/Ajax.svc/Translate",
            dataType: "jsonp",
            data: {
                appId: appId,
                text: str,
                from: "en",
                to: "ja"
            },
            jsonp: "oncomplete",
            success: function (data, dataType) {
                var fragment = document.createDocumentFragment();
                var span = fragment.appendChild(document.createElement('span'));
                span.style.cssText = "background-color:#FFCACA";
                span.appendChild(document.createTextNode(range.toString() + "[" + data + "]"));

                range.deleteContents();
                range.insertNode(fragment);
            }
        });
    }
}

document.addEventListener( 'mouseup', getText, false );
document.addEventListener( 'touchend', getText, false );

使い方

1. 読みたいページを開きます。
2. ブックマークレットを押します。
3. テキストを長押し(選択)すると翻訳したテキストが表示されます。

これでゴロゴロ英語ライフがたのしめます！

参考になったURL