Google APIの概要

この記事では、Googleが提供するAPIの概要を説明したいと思います。 すべてのapiを検討するのではなく、それらの使用に関する詳細な手順を説明しますが、最も有用と思われるものについてのみ説明し、コメント付きのコードの例を提供します(例はapiのドキュメントから取得します)。



以下について説明します。





AJAX Libraries API


このAPIを使用すると、現在人気のあるJavaScriptライブラリ(jQuery、Prototype、MooTools、Dojo、Ext Coreなど)をWebアプリケーションに接続できます。 また、AJAX Libraries APIは、apiに必要なライブラリをロードします。これについては、以下で説明します。

AJAX Libraries APIの使用例:



// api

<script src= "http://www.google.com/jsapi" ></script>

<script>

// . jquery 1.3.2

google.load( "jquery" , "1.3.2" );

// Callback-

google.setOnLoadCallback( function () {

alert($.browser.version);

});

</script>




* This source code was highlighted with Source Code Highlighter .









// api

<script src= "http://www.google.com/jsapi" ></script>

<script>

// . jquery 1.3.2

google.load( "jquery" , "1.3.2" );

// Callback-

google.setOnLoadCallback( function () {

alert($.browser.version);

});

</script>




* This source code was highlighted with Source Code Highlighter .









// api

<script src= "http://www.google.com/jsapi" ></script>

<script>

// . jquery 1.3.2

google.load( "jquery" , "1.3.2" );

// Callback-

google.setOnLoadCallback( function () {

alert($.browser.version);

});

</script>




* This source code was highlighted with Source Code Highlighter .












APIドキュメントはこちら



AJAX言語API


言語のAJAX APIを使用すると、javaScriptのみを使用して、テキストを翻訳したり、テキストを記述する言語を決定したりできます。



<html>

<head>

<script type= "text/javascript" src= "http://www.google.com/jsapi" >

</script>

<script type= "text/javascript" >

// language

google.load( "language" , "1" );



google.setOnLoadCallback( function () {

var text = document .getElementById( "text" ).innerHTML;

//

google.language.detect(text, function (result) {

if (!result.error && result.language) {

// ,

google.language.translate(text, result.language, "ru" ,

function (result) {

var translated = document .getElementById( "translation" );

if (result.translation) {

translated.innerHTML = result.translation;

}

});

}

});

});



</script>

</head>

<body>

<div id= "text" >Hello world</div>

<div id= "translation" ></div>

</body>

</html>




* This source code was highlighted with Source Code Highlighter .









<html>

<head>

<script type= "text/javascript" src= "http://www.google.com/jsapi" >

</script>

<script type= "text/javascript" >

// language

google.load( "language" , "1" );



google.setOnLoadCallback( function () {

var text = document .getElementById( "text" ).innerHTML;

//

google.language.detect(text, function (result) {

if (!result.error && result.language) {

// ,

google.language.translate(text, result.language, "ru" ,

function (result) {

var translated = document .getElementById( "translation" );

if (result.translation) {

translated.innerHTML = result.translation;

}

});

}

});

});



</script>

</head>

<body>

<div id= "text" >Hello world</div>

<div id= "translation" ></div>

</body>

</html>




* This source code was highlighted with Source Code Highlighter .









<html>

<head>

<script type= "text/javascript" src= "http://www.google.com/jsapi" >

</script>

<script type= "text/javascript" >

// language

google.load( "language" , "1" );



google.setOnLoadCallback( function () {

var text = document .getElementById( "text" ).innerHTML;

//

google.language.detect(text, function (result) {

if (!result.error && result.language) {

// ,

google.language.translate(text, result.language, "ru" ,

function (result) {

var translated = document .getElementById( "translation" );

if (result.translation) {

translated.innerHTML = result.translation;

}

});

}

});

});



</script>

</head>

<body>

<div id= "text" >Hello world</div>

<div id= "translation" ></div>

</body>

</html>




* This source code was highlighted with Source Code Highlighter .














APIドキュメントはこちら



コード遊び場


JavaScriptを実行できるアプリケーション。 しかし、Code Playgroundの魅力はこれではありません(個人的には)。 多くの便利な例をここに示します。 たとえば、ここからYouTube APIの使用方法を学びました(また、YouTubeからプレーヤーのスキンを作成する方法の質問に答えました)。



他のすべてのGoogleライブラリについては、 こちらをご覧ください。



All Articles