マッシュアップアプリケーションとGoogle API

2008.06.10
Google Developer Day 2008 Japan
Yusuke Kawasaki【川﨑有亮】
株式会社リクルート
メディアテクノロジーラボ

Keyboard operation

[→] next
[←] prev
[↑] index

このプレゼンテーションは、amachang作の『S6』を利用しています。

『Google API』の総数をご存知ですか？

Google API数のカウント

1. http://code.google.com/more/
にアクセスする。
2. ブラウザのアドレス欄に↓を入力し、
Enter キーを押す

javascript:{alert(CODESITE_productDictionary.products.keys.length)}

今日のトークは、マッシュアップとGoogle APIの話題なので、このプレゼンテーションツールも、Google APIとマッシュアップさせています。

ワンクリック翻訳機能

サンプル：はじめまして。
Powered by Google AJAX Language API

ただし、難しい日本語については、完全には翻訳できません。:-)

Google AJAX Language API

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

function trans ( ev ) {
    var elem = ev.target;
    var func = function( result ) {
        if ( result.error ) return;
        elem.lang = dst;
        var text = result.translation;
        var span = document.createElement( 'span' );
        span.innerHTML = text;
        elem.appendChild( span );
    };
    google.language.translate(elem.innerHTML,'ja','en',func);
}

s6.attach( e, 'click', trans );

本日のアジェンダ

Google Language API（自動翻訳）
Webサービスとマッシュアップ（概論）
Google Maps API（地図）
Google Chart API（グラフ）
AJAX Libraries API（jQuery等）
新しいAPI（リアルデバイス）

その前に…

少しだけ自己紹介させて下さい。

Yusuke Kawasaki

川﨑　有亮

株式会社リクルート

http://recruit.co.jp/

メディアテクノロジーラボ

http://mtl.recruit.co.jp/

コマーシャライザー

http://cmizer.com/
http://mtl.recruit.co.jp/blog/2008/06/mtlcm_1.html

川﨑有亮

JavaScript♥
Perl♥
Xiaolongbao♥
http://www.kawa.net/

CPAN Author

JSAN Author

XML.ObjTree
Animation.Cube
Animation.Raster

Animation.Cubeデモ

http://www.kawa.net/works/js/animation/cube.html (2006/04/12)

API公開の広がりと
マッシュアップ

マッシュアップとは

（音楽）2つ以上の曲から片方はボーカルトラック、もう片方はオケトラックを取り出してそれらをもともとあった曲のようにミックスし重ねて一つにした音楽の手法
↓
（プログラミング）複数のWebサービスのAPIを組み合わせ、あたかも一つのWebサービスのようにする
（出典：Wikipedia）

programmableweb.com

登録API総数 775（2008年6月9日現在）
（1ヶ月あたり約 24 API が新たに登場）

リクルートWebサービス

リクルートの14媒体(事業)のAPIを公開中
http://webservice.recruit.co.jp/

Mashup Award 4th

参加登録＆作品応募受付開始しました！
最優秀賞：賞金100万円（10月結果発表） http://mashupaward.jp/

参加・協力企業38社 (100API+)

Google Maps API

マッシュアップ開発サンプル

Google Maps API＋Hotpepper Webサービス
（制作時間：2時間くらい）

Google Maps API

<script type="text/javascript" src="//www.google.com/jsapi?key=****"></script>
<script type="text/javascript">
    var map;
    google.load("maps", "2.x");
    function gmap_init (){
        map = new google.maps.Map2(document.getElementById("map_canvas"));
        map.addControl(new google.maps.LargeMapControl());
        map.addControl(new google.maps.MapTypeControl());
        map.setCenter(new google.maps.LatLng(35.68, 139.76), 15);
    }
    google.setOnLoadCallback(gmap_init);
</script>
<div id="map_canvas" style="width: 800; height: 400px"></div>

http://code.google.com/apis/maps/

リクルートWebサービスUI Library

リクルートの各Webサービス(うち9種)をJavaScriptから手軽に利用可能。(XML処理の記述が不要)
BSDライセンスで公開。（2008年3月）

リクルートWebサービスUI Library

<script type="text/javascript" src="rui/recruit/docs/js/jquery-1.2.3.js"></script>
<script type="text/javascript" src="rui/recruit/docs/js/jquery.form.js"></script>
<script type="text/javascript" src="rui/recruit.ui.js"></script>
<script type="text/javascript" src="rui/hotpepper.ui.js"></script>
<script type="text/javascript">
    function hpp_init (){
        Recruit.UI.key = '********';
        new HotPepper.UI.Places.Pulldown();
        new HotPepper.UI.Genre.Pulldown();
        $('#hpp_sample').submit(function (){
            jsonp_request();
            return false;
        });
    }
    $(hpp_init);
</script>
<form id="hpp_sample" action="#">
エリア：<select id="hpp-large-service-area-sel"></select>
<select id="hpp-service-area-sel"></select>
<select id="hpp-middle-area-sel"></select>
<select id="hpp-small-area-sel"></select><br>
ジャンル：<select id="hpp-genre-sel"></select>
<input type="submit" value="検索" />
</form>

マッシュアップ部分のコード

function jsonp_request (){
    var url = 'http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?'
        + 'key=' + Recruit.UI.key + '&format=jsonp&callback=?'
        + '&' + $( '#hpp_sample' ).formSerialize();
    var callback = function ( json ){
        var res = json.results;
        if( res.error ) return false;
        map.clearOverlays();
        var list = res.shop;
        for (var i = 0; i < list.length; i++) {
            var shop = list[i];
            var latlng = new google.maps.LatLng( shop.lat, shop.lng );
            if ( i == 0 ) map.panTo( latlng );
            var opts = {title: shop.name};
            var marker = new google.maps.Marker(latlng, opts);
            map.addOverlay(marker);
            google.maps.Event.addListener(marker, "click", function() {
                window.open( shop.urls.pc, '_blank' );
            });
        }
    };
    $.getJSON( url, callback );
}

AJAX API Loader統合

<script src="http://maps.google.com/maps?file=api&v=2&key=****" type="text/javascript"></script>
<script type="text/javascript">
    function initialize() {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
    }
</script>

↓

<script src="http://www.google.com/jsapi?key=****"></script type="text/javascript">
<script type="text/javascript">
    google.load("maps", "2");
    function initialize() {
        var map = new google.maps.Map2(document.getElementById("map"));
        map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);
    }
</script>

Google Mapsファミリー

JavaScript: Google Maps API
IFRAME: YouTube-style Embeddable Maps
GIF/PNG/JPEG: Google Static Maps API
Flash: Google Maps API for Flash

様々なバリエーションのAPIが提供され、地図の利用がより手軽に、対象となる開発者・利用者・プラットフォームも拡大。

YouTube-style Embeddable Maps

埋め込み地図のHTMLコード

<iframe width="320" height="240" frameborder="0" scrolling=
"no" marginheight="0" marginwidth="0" src="http://maps.goog
le.co.jp/maps?f=q&hl=ja&geocode=&q=%E6%9D%B1%E4%BA%AC%E9%A7
%85&ie=UTF8&s=AARTsJpB2eM-6D8nJEQSYzDU4UHkYlUwPA&ll=35.6805
16,139.766951&spn=0.008366,0.013733&z=15&output=embed"></if
rame><br />
<small><a href="http://maps.google.co.jp/maps?f=q&hl=ja&geo
code=&q=%E6%9D%B1%E4%BA%AC%E9%A7%85&ie=UTF8&ll=35.680516,13
9.766951&spn=0.008366,0.013733&z=15&source=embed" style="co
lor:#0000FF;text-align:left">大きな地図で見る</a></small>

IFRAMEなので、プログラミングの知識がなくても手軽にブログ等にGoogle Mapsを貼り付けられる。

Google Static Maps API

スクロール地図でない静止地図用のAPI
http://gmaps-samples.googlecode.com/svn/trunk/simplewizard/makestaticmap.html
利用制限：1日・1閲覧者あたり1,000ユニーク地図画像出力
（APIキーごとの制限でなくて、閲覧者ごとの制限）

Static MapのHTMLコード

<img src="http://maps.google.com/staticmap?center=35.6810
99,139.767084&markers=35.681099,139.767084,red&zoom=15&si
ze=500x400&key=****">

画像フォーマット GIF、PNG、JPEG 形式に対応。
携帯電話でも Google Maps が利用可能に。
（携帯電話用の地図色調も用意されている）
ウィザード画面で手軽に URL を生成可能。

GIF・JPEG・PNGフォーマット対応

maptype=上段：roadmap、下段：mobile

マッシュアップの裾野の広がり

複雑なAPI通信処理の開発の必要性は薄れ、ウィジェット・ガジェット・埋め込みタイプなど多様な選択肢から、手軽にマッシュアップを利用できる環境が整ってきた。

Google Chart API

折れ線・棒・円グラフなどの基本的なグラフから、散布図・レーダーチャート、さらには白地図機能（世界＋米国）までも利用可能！
http://code.google.com/apis/chart/

AJAX Libraries API

<script src="//www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
    google.load("jquery", "1");
</script>

人気の JavaScript ライブラリを Google が配信。
ブラウザ側キャッシュにも有効。
対象：jQuery prototype script.aculo.us MooTools dojo
http://code.google.com/apis/ajaxlibs/

インターネット・プラットフォームの3レベル

Level 1 - Access API
Level 2 - Plug-In API
Level 3 - Runtime Environment (online platforms)

http://blog.pmarca.com/2007/09/the-three-kinds.html
Marc Andreessen (2007/09/16)

新しいAPI
リアルデバイスWebサービス

Gainer

digital/analog x I/O x 4

Gainer over HTTP

http://kawa.at.webry.info/200802/article_2.html

Wiimote over HTTP

http://kawa.at.webry.info/200804/article_2.html

WoHレスポンスXML

<?xml version="1.0" encoding="UTF-8"?>
<response>
    <method>getStatus</method>
    <status>200</status>
    <data>
        <wiimote index="1">
            <xPos>0.113402</xPos>
            <yPos>-0.414141</yPos>
            <zPos>0.883495</zPos>
            <pitch>-0.426999</pitch>
            <roll>0.113647</roll>
            <a>1</a>
            <b>0</b>
            <down>0</down>
            <home>0</home>
            <left>0</left>
            <minus>0</minus>
            <nunchuk>
                <xPos>0.0</xPos>
                <yPos>0.0</yPos>
                <zPos>0.0</zPos>
                <pitch>0.0</pitch>
                <roll>0.0</roll>
                <c>0</c>
                <z>0</z>
                <xVec>0.0</xVec>
                <yVec>0.0</yVec>
            </nunchuk>
            <one>0</one>
            <plus>0</plus>
            <right>0</right>
            <two>0</two>
            <up>0</up>
        </wiimote>
    </data>
</response>

最大7台同時接続可能

[CONTROL PANEL] [DEMO]

5～7台目の識別方法

リアルデバイスへの妄想

PCのインターフェースは、キーボード(1D)から、マウス(2D)へと発展してきた。
新しいデバイスの接続で、3D・4Dとさらに進化していく未来…。
リアルデバイスがWebサービスとしてインターネット経由で繋がる未来…。

まとめ

APIの利用は手軽になり、開発者の裾野も広がった。

マッシュアップのためのアプリ開発から、サイトを活かすマッシュアップへ。

ご応募お待ちしております

Mashup Award 4th 参加登録受付中。
http://mashupaward.jp/
※Google API も対象です!

ありがとうございました

Yusuke Kawasaki【川﨑有亮】
株式会社リクルート
メディアテクノロジーラボ
u-suke [at] kawa.net

マッシュアップアプリケーションとGoogle API

Keyboard operation

『Google API』の総数をご存知ですか？

Google API数のカウント

6月9日現在＝60 API

ワンクリック翻訳機能

Google AJAX Language API

本日のアジェンダ

その前に…

Yusuke Kawasaki

川﨑 有亮

株式会社リクルート

メディア テクノロジー ラボ

コマーシャライザー

川﨑有亮

CPAN Author

JSAN Author

Animation.Cubeデモ

API公開の広がりとマッシュアップ

マッシュアップとは

programmableweb.com

リクルートWebサービス

Mashup Award 4th

参加・協力企業38社 (100API+)

Google Maps API

マッシュアップ開発サンプル

Google Maps API

リクルートWebサービスUI Library

リクルートWebサービスUI Library

マッシュアップ部分のコード

AJAX API Loader統合

Google Mapsファミリー

YouTube-style Embeddable Maps

埋め込み地図のHTMLコード

Google Static Maps API

Static MapのHTMLコード

GIF・JPEG・PNGフォーマット対応

マッシュアップの裾野の広がり

Google Chart API

AJAX Libraries API

インターネット・プラットフォームの3レベル

新しいAPIリアルデバイスWebサービス

Gainer

Gainer over HTTP

Wiimote over HTTP

WoHレスポンスXML

最大7台同時接続可能

5～7台目の識別方法

リアルデバイスへの妄想

まとめ

ご応募お待ちしております

ありがとうございました

川﨑　有亮

メディアテクノロジーラボ

API公開の広がりと
マッシュアップ

新しいAPI
リアルデバイスWebサービス