このページの本文へ

約200本のサンプルコードで遊べる「AJAX APIs Playground」

Google APIがブラウザーで試し放題!

2009年02月09日 08時00分更新

小橋川誠己/企画報道編集部

  • この記事をはてなブックマークに追加
本文印刷

 Google Maps、Earth、Search……と、ものすごい数のAPIを公開しているグーグル。それらをマッシュアップして新しいサービスを作ったり、Webページに埋め込んで呼び出したりといった作業をするときに、それぞれのドキュメントやサンプルをいちいち調べるのは面倒だ。そこで活用したいのが、グーグル謹製の「AJAX APIs Playground」だ。

 AJAX APIs Playgroundは、ブラウザー上でGoogle AJAX APIのサンプルコードを試せるサービス。単にコードを見るだけではなく、その場で編集してすぐに実行結果をプレビューできるスグレモノだ。

Google AJAX API Playground
グーグル謹製の便利ツール「AJAX APIs Playground」の画面。ちなみにこのレイアウトもドラッグ&ドロップでサイズや配置を自由に変更できる

 使い方は簡単だ。まず、「Pick」と書かれている左カラムから使いたいAPIを選択する。ツリー状に分類されているリストから選べるほか、検索窓にキーワードを入れても探せる。APIを選択すると、今度は右カラムの「Edit」にJavaScriptのサンプルコードが表示される。このとき、Editの中は編集可能な状態になっているので、パラメーターを適宜変更してみてもいい。「サンプルコードを見てもイマイチ使い方がよく分からない」なんてときには、ヘッダー部分にある「docs」というリンクをクリックすればドキュメントを確認できる。

Google AJAX API Playground
「Pick」から使いたいAPIを選択する。ツリーを辿って選んでもいいし、キーワード検索も可能。インクリメンタルサーチが使えるサンプルコードが表示される「Edit」カラム。そのまま自由に書き換えられる

 実行結果は、中央下カラムの「Output」に表示される。Editの中を書き換えたときは、Outputの左側にある「Run」をクリックするとプレビューも更新される。もちろん、Outputの中は通常のブラウザー表示と同じく、自由に操作できる。

Google AJAX API Playground
「Output」で実行結果をすぐに見られる。「Run」をクリックすると更新。右上のボタンを押すと別ウィンドウを開いて表示する

 編集が終わったら、Editの右上にある「Code Menu」から「View Full Source」を選べばHTML部分を含むすべてのソースコードを参照できる。また、同じメニューから「Save」を選ぶと、手を加えたコードをAJAX APIs Playground上に保存しておくことも可能だ(Googleアカウントが必要)。一見シンプルなツールに見えて機能も充実しており、使い勝手はいい。

Google AJAX API Playground
AJAX APIs Playgroundのさまざまな機能。カスタムコードを保存したり、エクスポートもできる

 現在、AJAX APIs Playgroundに用意されているのは、Visualization、Search、Language、Blogger、Libraries、Maps、Earth、Feeds、Calendarの9つのAPIと200本近くのサンプルコード。Webアプリケーション開発者のリファレンスとしてはもちろん、WebサイトにGoogleのサービスを取り込みたいデザイナー向けのサンプルギャラリーとして、あるいはプログラムを勉強している人の学習教材としても魅力的だ。数が膨大なので、週末にでもたっぷり遊んでみては?

■関連サイト

Web Professionalトップへ

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く