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

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

Keyboard operation

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

このプレゼンテーションは『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サービスのマッシュアップ

本日のアジェンダ

• Web APIとマッシュアップ（序論）
• 自己紹介
• 世界のWebサービス
• Google API
• マッシュアップ・アワード
• リアルデバイスWebサービス

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

自己紹介

Yusuke Kawasaki

川﨑　有亮

株式会社リクルート

http://recruit.co.jp/

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

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

コマーシャライザー

http://cmizer.com/

川﨑有亮

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

CPAN Author

• XML::TreePP
• XML::FeedPP
• Class::Accessor::Children
• Lingua::JA::Romanize::Japanese
• Lingua::KO::Romanize::Hangul
• Lingua::ZH::Romanize::Pinyin
• WebService::Recruit::Dokoiku
• WebService::Recruit::Jalan

JSAN Author

• XML.ObjTree
• Animation.Cube
• Animation.Raster

Animation.Cubeデモ

(2006/04/12公開)　※WCAN/200609でもご紹介
http://www.kawa.net/works/js/animation/cube.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);

世界の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)}

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

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)

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

登録マッシュアップサイト数 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/

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

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

実は、このプレゼンテーションツールも、Google APIとマッシュアップさせています。

ワンクリック翻訳機能

サンプル： はじめまして。
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

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でできること(例)

• ローカルPCから、センサーの値の読み取り
• ローカルPCから、リモコンのボタン操作

↓

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

• インターネット経由で、センサーの値の読み取り
• インターネット経由で、リモコンのボタン操作

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

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対応サービス開発

• iPhone SDK (XCode) で専用サイト・アプリを構築する。
• HTML/JavaScriptで専用ページを作成する。ライブラリも使える。⇒iui.js
• PC用HTMLそのままで、iPhone用のCSSを書いて見やすくする。⇒参考
• RSS配信だけ対応し、iPhone用ページは外部サービス(mofuse)を利用する⇒例

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

ありがとうございました

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