JavaScriptで簡単マッシュアップ講座

2008.07.12
WCAN 2008 SUMMER
Yusuke Kawasaki【川﨑有亮】
株式会社リクルート
メディアテクノロジーラボ

Keyboard operation

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

今日はAPIの話をします。

API とは…
Application Program Interface
プログラムとプログラムの間の通信インターフェース仕様のこと。 機能を呼び出す方法、関数のセットなど。

APIの例(PCローカル)

Win32 API - WindowsのAPI
CoCoa - Mac OS XのAPI
PC BIOS - PCの低レベルAPI
DOM - XML/HTML文書用のAPI

Web API

インターネット経由で利用するAPI。HTTP/HTTPS で通信。
サーバ側:Web サーバ
クライアント側:ブラウザに限らず任意のアプリケーション
狭義の『Web サービス』。

要は、
ブラウザを使って人間がウェブ上で普通にできるような操作を、プログラムからも手軽に利用可能にした。
⇒ 自動処理により、従来にないサービスも実現可能。

マッシュアップとは

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

『マッシュアップ』のサンプル

Google Maps API+Hotpepper Webサービスのマッシュアップ

本日のアジェンダ

最近のトピックスを盛りだくさんでお伝えします。

自己紹介

Yusuke Kawasaki

川﨑 有亮

株式会社リクルート

http://recruit.co.jp/

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

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

コマーシャライザー

http://cmizer.com/

川﨑有亮

CPAN Author

JSAN Author

Animation.Cubeデモ


(2006/04/12公開) ※WCAN/200609でもご紹介
http://www.kawa.net/works/js/animation/cube.html

Animation.Raster

(2006/04/07公開) ※これもWCAN/200609でご紹介
http://www.kawa.net/works/js/animation/raster.html

新しいのもあります。

JavaScript+Canvasを使った3Dエンジン(まだ開発中)
[DEMO 1] [DEMO 2] [DEMO 3]
http://www.kawa.net/works/js/wire3d/v2/wiimote3d.html
2008/03/17

JUI カンファレンス

2008年5月19日(月)に開催しました。

jQuery UI - explode

$("#foo").hide("explode",{pieces: 25},1000,func);

§2
世界の Web API
Web サービス

世界のWeb API総数

programmableweb.com

7月12日現在の登録=810 API

毎月、平均して約 24 API が新たに登録されている

では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

7月12日現在=63 API

android gdata blogger feedburner gadgets 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 finance friendconnect gears health kml mapplets maps flashmaps gme newsfeeds notebook opensocial orkut protocolbuffers safebrowsing enterprise searchhistoryfeeds sitemaps sketchup socialgraph spreadsheets staticmaps talk themes toolbar transitfeed visualization webtoolkit picasa picasaweb webmastertools youtube

Google API
トピックス

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

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)

§3
マッシュアップ

マッシュアップサイトも増えてます

登録マッシュアップサイト数 3196(7月12日現在)
毎月 80以上のサービスが新たに登録されている。

これも広義のマッシュアップ

ブログにブログパーツを貼るのも、HTML ベースの API に基づいた広義のマッシュアップ利用事例です。

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

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

マッシュアップ・アワード

第1回は、リクルートの4APIで開催
(2006年6月5日~7月31日)

リクルートWebサービス

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

Mashup Award 4th

最優秀賞:賞金100万円(10月結果発表) http://mashupaward.jp/

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

参加登録は今スグ!

http://mashupaward.jp/

プログラマの方はもちろん、
デザイナの方、プログラムはまだこれからの方の登録も大歓迎!

Mashup Caravan開催中

東京  7月12日(土) ←裏番組
名古屋 7月14日(月) ←週明け
大阪  7月17日(木)
京都  7月18日(金)
札幌  7月22日(火)
福岡  7月28日(月)

マッシュアップの作り方

「マッシュアップ」は、実際はそう大仰なものではありません。

実は、このプレゼンテーションツールも、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

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

    また、難しくない文章でも誤訳となる場合もあります。 (例:iPhone
    しかし今は△でも、Web サービス提供者側(Google)の改良により、いつの間にか改善されていくのが 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 Maps API+Hotpepper Webサービスのマッシュアップ

    Google Maps API

    Hotpepper Webサービス

    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 );
    }
    

    リアルデバイスWebサービス
    Gainer

    Gainer

    USB接続(シリアルポート・エミュレーション)の汎用I/Oモジュール
    http://gainer.cc/

    digital/analog x I/O x 4

    Gainer over HTTP

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

    Device::Gainer Usage

    use Device::Gainer;
    my $opt = { host => '192.168.1.xx' };
    my $gainer = Device::Gainer->new( %$opt );
    $gainer->on_pressed(sub { print "PRESSED\n"; });
    $gainer->on_released(sub { print "RELEASED\n"; });
    $gainer->turn_on_led();
    $gainer->turn_off_led();

    http://svn.coderepos.org/share/lang/perl/Device-Gainer/

    Gainerでできること(例)

    Gainer over HTTPでできること(例)

    リモートからリアルデバイスを扱うことができる

    リアルデバイスWebサービス
    Wiiリモコン

    Wiiリモコン(Wiimote)

    Bluetoothデバイス(2.4GHz無線)

    http://www.wiili.org/index.php/Wiimote

    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サービスとしてインターネット経由で繋がる未来…。

    最後にもう1つ
    iPhone

    祝・iPhone 3G 発売!

    iPhone対応サービス開発

    CSSでiPhone対応

    <!--[if !IE]>-->
    <link media="only screen and (max-device-width: 480px)"
    href="iPhone.css" type="text/css" rel="stylesheet" />
    <!--<![endif]-->

    『only screen and (max-device-width: 480px)』でiPhoneを含む横幅480ピクセル以下のブラウザを指定する。 (media="handheld"ではない)
    『<!--[if !IE]>-->』でIEを除外。

    iPhoneは非handheld機

    "iPhone ignores print and handheld media queries because these types do not supply high-end web content."

    Safari Web Content Guide for iPhone
    http://developer.apple.com/documentation/AppleApplications/Reference/SafariWebContent/OptimizingforSafarioniPhone/chapter_3_section_2.html

    ブログ→RSS→mofuse

    http://www.mofuse.com/

    ブログなどの RSS フィードから、iPhone 用ページを生成してくれる。
    元々は海外の携帯デバイス用コンテンツ生成サービス。
    3分でできる。(無料)

    http://kawanet.mofuse.mobi/iphone/ (例)

    Hot Pepper for iPod touch


    本邦初公開! kurukuru ai

    http://ai.kuru2.st/

    ありがとうございました


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