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

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

Keyboard operation

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

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

Google API数のカウント

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

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

デモ:
出展: http://wordpress.chanezon.com/?p=60

6月9日現在=60 API

android gdata blogger feedburner gmail accounts adsense adsenseforaudio adwords ajax ajaxfeeds ajaxlanguage ajaxsearch analytics appengine apps base books calendar chart checkout csearch codesearch customsearch contacts coupons gdgadgets desktop documents earth friendconnect gadgets gears health kml mapplets maps flashmaps gme newsfeeds notebook opensocial orkut safebrowsing enterprise searchhistoryfeeds sitemaps sketchup socialgraph spreadsheets staticmaps talk themes toolbar transitfeed visualization webtoolkit picasa picasaweb youtube

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

ワンクリック翻訳機能

  • Arabic
  • Bulgarian
  • Simplified Chinese
  • Traditional Chinese
  • Croatian
  • Czech
  • Danish
  • Dutch
  • English
  • Finnish
  • French
  • German
  • Greek
  • Hindi
  • Italian
  • Japanese
  • Korean
  • Norwegian
  • Polish
  • Portuguese
  • Romanian
  • Russian
  • Spanish
  • Swedish
  • サンプル: はじめまして。
    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 );
    

    本日のアジェンダ

    その前に…

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

    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

    川﨑有亮

    CPAN Author

    JSAN Author

    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ファミリー

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

    YouTube-style Embeddable Maps

    2007年8月公開

    埋め込み地図の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レベル

    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