Home > javascript

javascript Archive

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  • Comments (Close): -
  • TrackBack (Close): -

Google AJAX Language APIを読みこむブックマークレット

Karafuto Blog - Google AJAX Language APIで翻訳する User JavaScriptではRESTful形式を使ったが、今回は Google AJAX Language APIを読みこみ、作成されたオブジェクトのメソッドを使う。RESTful形式よりは少し面倒だが、やれることは多い。

Google AJAX Language APIを読みこみ、使う手順

  1. Google AJAX API スクリプトを読みこむ。
    http://www.google.com/jsapi?callback=(関数名)
  2. 1で指定したコールバック関数で、googleオブジェクトの loadメソッドを使い、Google AJAX Language APIを読みこむ。
    google.load('language', '1', {'callback': (関数)});
  3. 2のコールバック関数で、languageオブジェクト(google.language)のメソッドを実行する。例えば、translateメソッドで文章を翻訳する。
    google.language.translate('こんにちは', 'ja', 'en', function (result){ alert(result.translation);});

Google AJAX Language APIで使える言語を列挙するブックマークレット

Google AJAX Language APIで使える言語を列挙するブックマークレット

ブックマークレットを実行すると、Google AJAX Language APIで使える言語を警告ダイアログに表示する。言語名の後の括弧に入っているのは、Google AJAX Language APIで言語を指定する時に使うパラメータ。

Google AJAX Language APIで使える言語を列挙するブックマークレット

ブックマークレットの内容

javascript:(function() {
  // Google AJAX Language APIの読みこみ
  loadLanguage = function() {
    google.load('language', '1', {
      'callback': enumerateLanguage
    });
  };
  // 言語を列挙
  enumerateLanguage = function() {
    var list = '';
    var num = 0;
    for (var i in google.language.Languages) {
      if (i != 'UNKNOWN') {
        num++;
        list += i + ' (' + google.language.Languages[i] + '), ';
      }
    }
    list = list.substring(0, list.length - 2) + '\n\n' + num;
    alert(list);
  };

  // Google AJAX APIの読みこみ
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'http://www.google.com/jsapi?callback=loadLanguage';
  document.body.appendChild(script);
})();

google.language.Languagesは、Google AJAX Language APIで扱うことができる言語の名前と言語のパラメータをプロパティと値にしたオブジェクト。

選択した文字列の言語を判定するブックマークレット

選択した文字列の言語を判定するブックマークレット

文字列を選択して、ブックマークレットを実行すると、Google AJAX Language APIが特定した言語と信頼度を警告ダイアログに表示する。

選択した文字列の言語を判定するブックマークレット

ブックマークレットの内容

javascript:(function() {
  // Google AJAX Language APIの読みこみ
  loadLanguage = function() {
    google.load('language', '1', {
      'callback': googleDetect
    });
  };
  // 言語を判定
  googleDetect = function() {
    google.language.detect(text, function(result) {
      if (result.language){
        for (var i in google.language.Languages) {
          var lang = result.language;
          if (result.language == google.language.Languages[i]) {
            lang = i;
            break;
          }
        }
        var percent = result.confidence < 0.01 ? result.confidence * 100 : Math.round(result.confidence * 100);
        alert('テキストの言語は、' + lang + 'です。\n判定の信頼度は、' + percent + '%です。');
      } else {
        alert('テキストの言語を判定できませんでした。');
      }
    })
  };

  var text = window.getSelection ? window.getSelection().toString() : document.selection.createRange().text;
  if (! text){
    alert('文字列を選択してください');
    return;
  }
  if (text.length > 200){
    text = text.substring(0, 200);
  }
  // Google AJAX APIの読みこみ
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://www.google.com/jsapi?callback=loadLanguage';
    document.body.appendChild(script);
})();

google.language.detectは、文字列の言語を判定するメソッド。コールバック関数の引数に結果の入ったオブジェクトを返す。

google.language.detect(文字列, 関数)

返すオブジェクト
{
    status: {
        code: (ステータスコード)
    }
    language: (特定した言語)
    isReliable: (判定が信頼できるか表す真偽値、信頼できるなら true)
    confidence: (判定の信頼度を 0~1.0の数字で表す)
}
    

参考にしたページ

splitメソッド

Stringオブジェクトの splitメソッドは区切り文字で分割された配列を返す。文字列に区切り文字が含まれないか、区切り文字が省略された時、文字列全体の要素が一つの配列が返される。

split(区切り文字, 配列の最大要素数)

var text = '1-2-3-4-5-6-7';
var ary = text.split('-');
alert(ary);    // 1,2,3,4,5,6,7

返される配列に区切り文字は含まれない。しかし、文字列の先頭あるいは最後に区切り文字がある場合は、空の要素として配列に含まれる。

var text = '-1-2-3-4-5-6-7';
var ary = text.split('-');
alert(ary);    // ,1,2,3,4,5,6,7

区切り文字が空文字列の時は、文字列が一文字ごとに分割された配列が返る。

var text = 'JavaScript';
var ary = text.split('');
alert(ary);    // J,a,v,a,S,c,r,i,p,t

区切り文字には正規表現も指定できる。正規表現にキャプチャする「()」が使われていると、配列に含まれる。「()」を使いたいが配列に加えたくない時は、「?:」でキャプチャしないようにすればいい。

var text = '1-2-3-4-5-6-7';
var ary = text.split(/(-)/);
alert(ary);    // 1,-,2,-,3,-,4,-,5,-,6,-,7

var ary = text.split(/(?:-)/);
alert(ary);    // 1,2,3,4,5,6,7

関数の引数の数

JavaScriptでは、関数に渡された引数(実引数)と関数に設定された引数の数(仮引数)が合わなくてもエラーにならない。

省略された(渡されなかった)引数の値は、undefinedになる。ただし、関数に渡す引数の前にある引数を省略することはできない。

function f(a, b, c){
    alert(a + ' ' + b + ' ' + c);
}

f('first', 'second');    // first second undefined

関数に渡された関数に設定されていない引数は argumentsオブジェクトによって参照することができる。

arguments[番号]

関数に渡された引数の数
arguments.length
関数に設定された引数の数
arguments.callee.length
function f(a, b, c){
    var text = 'arguments.length=' + arguments.length + '\narguments.callee.length=' + arguments.callee.length + '\n';
    text += Array.prototype.slice.call(arguments).join(' ');
    alert(text);
}

f('first', 'second', 'third', 'fourth', 'fifth');

// arguments.length=5
// arguments.callee.length=3
// first second third fourth fifth

window.openで開いたウィンドウに要素を作成する

ブックマークレットを作っている時、window.openで開いたウィンドウに要素を作成することに引っかかったので、メモ。

javascript:(function (){
    var win = window.open();
    var h1 = document.createElement('h1');
    var text = document.createTextNode('Test - window.open');
    h1.appendChild(text);
    win.document.body.appendChild(h1);
})();

新しいウィンドウを開いて、h1要素を表示するブックマークレット

Operaなら、上のブックマークレットを実行すれば、新しいウィンドウを開いて、そのウィンドウに h1要素を表示する。しかし、Firefoxだと、新しいウィンドウは開くが何も表示されない。DOM Inspectorを見ると h1要素は存在しているようなのだが…。

javascript:(function (){
    var win = window.open();
    win.document.open();
    win.document.close();
    var h1 = document.createElement('h1');
    var text = document.createTextNode('Test - window.open');
    h1.appendChild(text);
    win.document.body.appendChild(h1);
})();

document.openを使ったブックマークレット

上のブックマークレットのように document.openで一度文書を開いておけば、FireFoxでも h1要素が表示される。

ウェブページにある画像と背景画像を表示するブックマークレット (4)

Firefoxでは、Karafuto Blog: ウェブページにある画像と背景画像を表示するブックマークレット (3)を実行できなかったから、Firefoxでも動かせるようにしてみた。(IEでは動かない。)

ブックマークレットの内容はほとんどそのままだが、ウェブページにある画像と背景画像を表示するブックマークレット (3)では新しいウィンドウを開いていたのを、今回は同じウィンドウに画像を表示するようにした。

  • 表示する画像は、img要素の画像と CSSで指定された背景画像。
  • 画像をクリックした時、ページ上に画像をポップアップ表示。
  • ページの上でマウスホイールを回すか,を押せば、ポップアップした画像を換える。ホイールを向こう側に回すか(左)を押すと前の画像に、手前に回すか(右)を押すと後の画像に換える。
  • ページのどこかをクリックするかESCを押せば、ポップアップした画像を消す。

ウェブページにある画像と背景画像を表示するブックマークレット4

Home > javascript

おまかせリンク(R)
全記事表示リンク
Search
Meta
Feeds

Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。