リクルートWebサービスを活かしたバリューコマース対応サイトを作ろう

2009/10/09 リクルート　アフィリエイトパートナー様向け　APIセミナー 発表資料

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

舩見高貴生

2009年10月9日金曜日

目次

1.自己紹介2.Webサービスで実現できること3.各Webサービスの概要紹介4.Webサービス連携の方法5.サンプルソース解説6.Q&A

2009年10月9日金曜日

自己紹介

2009年10月9日金曜日

自己紹介

•舩見高貴生 (フナミタカオ)

•メディアテクノロジーラボ(MTL)所属• MTLはリクルートのR&D部門

•リクルートWebサービス担当• 設計、実装、運用全部やっています。• 言語：Perl,Ruby,JavaScript,PHP

2009年10月9日金曜日

自己紹介

• ブログ書いています• http://mtl.recruit.co.jp/

• E-Taxがすごい件

• auシンプル一括の仕組み

• サンプルコードとかも

2009年10月9日金曜日

自己紹介

• 最近はiPhoneアプリも作っています。

2009年10月9日金曜日

自己紹介

• バリューコマース歴　３年• 全然、実績ないです.... これを機会に、がんばります

2009年10月9日金曜日

Webサービスで実現できること

2009年10月9日金曜日

Webサービスの仕組み

各サイトのデータベース

WebHTML

データ

ユーザー

Web

リクルート

アフィリエイトサイト

HTML

データ

データ

2009年10月9日金曜日

Webサービスの仕組み

• リクルートのデーターベースからデータを取得• 最新のデータをXML、JSON 、JSONPで

• オリジナルのデータとともにHTMLを動的生成• 同じデータから異なったコンテンツ

2009年10月9日金曜日

Webサービスで実現できること

•アフィリサイトでつかうと...

• 自動更新ができる• マイリンクを自動生成＆自動更新

• コンテンツマッチ• リンク先がユーザーにとって自然

• コンテンツリッチ• 複数のWebサービスを組み合わせて、便利＆リッチに

• 本格的な総合検索サイトにもできる

2009年10月9日金曜日

Webサービスで実現できること

• 自動更新ができる• マイリンクの生成が自動！

• 生成ツールで生成してから、HTMLへのコピペは大変

• リンク切れがなくなる

• マイリンクのCSVは不定期の更新が必要

とても使いやすくなったけど...

2009年10月9日金曜日

Webサービスで実現できること

• コンテンツマッチ• ユーザーに親切

• コンテンツとマッチしたリンクを表出でき、ユーザーは嬉しい。リピーターが増えるかもしれない。

• Webサービスなら、いくつもの検索軸でデータを絞り込める

• 生成ツールで生成してから、HTMLへのコピペは大変

とても使いやすくなったけど...

2009年10月9日金曜日

Webサービスで実現できること

• コンテンツリッチ• 複数のWebサービスと組み合わせることが可能。

• 特集をくんでみる

• 博多

• エコカー

• ビジネスクラス

• 本格的な総合検索サイトにもできる

+

+

旅先で

新しい場所で...

エコカー特集...

ビジネスクラス特集...

2009年10月9日金曜日

活用のポイント

•本体サイトを見て構成を理解する•リファレンスを読む• リクエスト

• 絞り込み条件はなにか？

• どんなマスタが用意されているか？　

• レスポンス• どんなページが作れるか？

• 本体サイトの一覧、詳細ページと比べてみる

2009年10月9日金曜日

活用のポイント

•APIを呼び出してXMLを表示する。• リクエストの組み合わせを試す。

• コンテンツとしての可能性

• ソート順

• フリーワード

• UIライブラリで試すのもおすすめ。

• どんなサイトを作れるのかをイメージする

2009年10月9日金曜日

UIライブラリで試す

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

2009年10月9日金曜日

API呼び出し例

•リクエスト• http://webservice.recruit.co.jp/

hotpepper/gourmet/v1/?key=sample&large_area=Z011

• ホットペッパーグルメサーチAPIを• hotpepper/gourmet/v1

• 大エリアコード = Z011（東京）で検索• large_area=Z011

2009年10月9日金曜日

API呼び出し例

•レスポンスxmlとサイトを比較してみよう

2009年10月9日金曜日

まとめ

•Webサービスでできること• 自動更新• コンテンツマッチ• コンテンツリッチ

•活用のポイント• どんな使い方ができるかイメージする• ソート順、フリーワード

2009年10月9日金曜日

各Webサービスの概要紹介

2009年10月9日金曜日

リクルートWebサービス一覧　17種

> スーモ

> ドコイク？

> フロム・エー　ナビ

> じゃらん

> カーセンサー・ラボ

今回個別にご紹介するWebサービス

2009年10月9日金曜日

エイビーロード航空券Webサービス

•2009/9/29公開一番新しい

•海外航空券検索API

• 代表的なリクエスト• 出発日、価格、訪問都市、航空会社、出発地

• シートクラス、直行便、マイル加算

• ソート順：新着順、価格順

2009年10月9日金曜日

エイビーロードWebサービス

•海外旅行検索API

• 海外ツアーの検索• 代表的なリクエスト

• 価格、出発日、期間、国、フリーワード

•キーワード都市集計API

• 例えば「癒し」というフリーワードが含まれるツアーが多い都市ランキング

• コンテンツとしても使える

2009年10月9日金曜日

エイビーロードWebサービス

•事例:海外湯oogle

• CGI経由、総合旅行サイト

海外湯oogle　http://www.kaigai-yoogle.jp/

2009年10月9日金曜日

エイビーロードWebサービス

•アイデア：写真は.. 地図は...

2009年10月9日金曜日

カーセンサーWebサービス

•中古車検索API

• 代表的なリクエスト• 車種、ブランド、価格、緯度経度、フリーワード

• 登録年式、走行距離、本革シート

• ソート順：ブランド、価格、年式、走行距離

•カタログ検索API

• 過去に発売された車の詳細スペック情報• 写真URLもレスポンス

• コンテンツとして使える

2009年10月9日金曜日

カーセンサーWebサービス

• CGI+Ajax• CGI:ブランド+タイプ

• SEOを効かせつつ

• Ajax:詳細検索

• 詳細も検索可能

• UIライブラリ利用

• オークションAPIと組み合わせ

UIライブラリ

2009年10月9日金曜日

カーセンサーWebサービス

•アイデア：ブログパーツ

インパネから車種を当てるブログパーツ。カーセンサーへリンク。このリンクをVC経由にしてみてはどうか？

http://mtl.recruit.co.jp/blog/2008/01/inpaneq.html

2009年10月9日金曜日

ホットペッパーWebサービス

•グルメサーチAPI

• 代表的なリクエスト• エリア、緯度経度、ジャンル、料理、予算、フリーワード

• ソート順：おすすめ、近い順

• 最近の拡張

• 特集：例　２０００円以下飲み放題

• 営業時間：終電が終わっても開いてるお店の検索もできる

•店名検索API

• 店名検索に特化。詳細情報がない。

2009年10月9日金曜日

ホットペッパーWebサービス

•事例:グルメ湯oogle

• CGI経由

• ジャンルバナーを独自に用意

• ぐるなびAPIも利用

グルメ湯oogle　http://www.gourmet-yoogle.jp/

2009年10月9日金曜日

ホットペッパーWebサービス

•アイデア：特集の活用

•アイデア：営業時間検索の活用• ２次会検索

2009年10月9日金曜日

ホットペッパーWebサービス

ソースも公開中　http://hotpepper.tatamilab.jp/simple/

2009年10月9日金曜日

じゃらんWebサービス

• 宿表示API

• エリア、緯度経度、詳細なこだわり（例：部屋でインターネットOK）で絞り込み

• ソート順：クチコミ評点が高い順、参考料金順

• 空室検索API

• プランごとに、日付、予算、緯度経度で絞り込み

• 一つの宿に複数のプランがある場合もプランごとにレスポンス

• 温泉検索API

• エリア、泉質で絞り込み

• 温泉地の概要解説もレスポンス。コンテンツになる

2009年10月9日金曜日

じゃらんWebサービス

•バリューコマースのツールとの違い• じゃらんnet　アフィリエイト+

• コンテンツバナー

• ポイントはHTMLの生成をプログラム化（ 自動化 ）できるかどうか• コンテンツバナーを自動生成するという手もあるが...

2009年10月9日金曜日

じゃらんWebサービス

•事例:クチコミ温泉宿• CGI経由

• クチコミでソート、コンテンツになっている。

• クチコミページ、予約ページへのリンクあり

クチコミ温泉宿　http://onsennavi.jp/50134/

2009年10月9日金曜日

じゃらんWebサービス

http://jalan.tatamilab.jp/simple/

・シンプル宿検索

・地図帳JランキングをコンテンツにKMLでGoogleMap連携http://jalan.tatamilab.jp/jmap/#top

ソースコードも公開中

2009年10月9日金曜日

スーモWebサービス

•Smach!Webサービスの上位版• Smatch!版

• マンションのみ

• スーモ版• マンション＋一戸建て+土地＋賃貸

• 相場検索可能

• 都道府県単位、市区郡単位

• クチコミなし

2009年10月9日金曜日

スーモWebサービス

•事例:30min

• CGI経由

• 街の話題にマッチ• バナーからWebサービス対応への変更で効果up

• 限定公開API

30min　http://30min.jp/mansion/main

2009年10月9日金曜日

Webサービス連携の方法

2009年10月9日金曜日

Webサービス連携の方法

各サイトのデータベース

WebHTML

データ

ユーザー

Web

リクルート

アフィリエイトサイト

HTML

データ

データ

この方法

2009年10月9日金曜日

必要なスキル

•HTML

•CSS

•JavaScript

•Perl、PHP、Ruby、Java

•XML

•JSON、JSONP

2009年10月9日金曜日

AJax vs CGI

• サイト構築には、２つの方法• CGI

• Webサーバー経由でWebサービスを呼び出す

• HTMLの生成はWebサーバーで

• スクリプト言語でプログラミング

• バッチ生成可能

• SEOが効く

• Ajax

• Ajax経由でWebサービスを呼び出す

• HTMLをJavaScriptによって、操作

• SEOが効かない

2009年10月9日金曜日

CGI

ユーザー

Web

アフィリエイトサイト

1.URL呼び出し

3.レスポンス

リクルート

2.リクエスト

XML、JSON

REST／ URL呼び出し

5.HTML

4.CGIがHTML生成sid,pid付与

2009年10月9日金曜日

Ajax

ユーザー

Web

アフィリエイトサイト

1.URL呼び出し4.レスポンス

リクルート 3.リクエスト

JSONP

REST／ URL呼び出し

2.HTML+Javascript

5.JavaScriptでHTML書き換えsid,pid付与

2009年10月9日金曜日

リクルートWebサービスツール

• 変換ツールはマイリンクの生成はできるが、tsvの変換や、HTMLへのコピペが必要になる

• 検索条件は詳細• 自動更新ができない

2009年10月9日金曜日

APIキーの取得

• リクルートWebサービス• 一部をのぞき、リクリートWebサービスの新規登録画面から、登録

• じゃらん• じゃらんWebサービスで取得

• スーモ• 非公開APIのため、スーモアフィリ担当まで、ご連絡ください。

2009年10月9日金曜日

APIキーの取得

https://webservice.recruit.co.jp/register/index.html

2009年10月9日金曜日

LINKの作成

•WebサービスがレスポンスするURLをバリューコマースのリンクに変換

http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2579400&pid=878329781&vc_url=http%3A%2F%2Fwww.hotpepper.jp%2FstrJ000000000%2F%3Fvos

%3Dnhppalsa000016

http://www.hotpepper.jp/strJ000000000/?vos=nhppalsa000016

RWS

VC

2009年10月9日金曜日

マイリンク用HTMLの取得

• バリューコマース管理画面にて、各オファーごとに「自由テキスト」マイリンクのコードを取得

2009年10月9日金曜日

pid、sid、imgタグ<a href="http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2145982&pid=874834842" target="_blank" ><img src="http://ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2145982&pid=874834842" height="1" width="1" border="0">自由テキスト</a>

このリンクをWebサービスがレスポンスするURLから自動生成できるようにする

pidとsidがカウントに必要imgはインプレッション計測用に必須

2009年10月9日金曜日

LINKの作成

•PID、SID、IMGを加えて完成

<a href="http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2579400&pid=878329781&vc_url=http%3A%2F%2Fwww.hotpepper.jp%2FstrJ000000000%2F%3Fvos%3Dnhppalsa000016" target="_blank"><img Src="http://ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2579400&pid=878329781" height="1" width="1" Border="0">甘太郎 池袋明治通り店</a>

2009年10月9日金曜日

文字コード

•UTF-8が便利

•WebサービスのレスポンスはUTF-8

2009年10月9日金曜日

まとめ

•CGI VS Ajax

•Webサービスにリクエスト

•レスポンスからHTMLを生成• リンクのpid、sidをオファーにあわせて取得したものに

2009年10月9日金曜日

サンプルソース解説

2009年10月9日金曜日

Ajaxサンプル

• UIライブラリーで連携• http://webservice.recruit.co.jp/docs/vc/

• http://mtl.recruit.co.jp/sandbox/rui/

2009年10月9日金曜日

Ajaxのポイント

• URLエンコーディンングはencodeURIComponentを使う

• インプレッション計測用のタグを忘れずに• UIライブラリーを使うとお手軽

• http://mtl.recruit.co.jp/sandbox/rui/

• サーバーなしでも開発可能

2009年10月9日金曜日

CGIサンプル

• Perlで連携するサンプル• http://webservice.recruit.co.jp/docs/vc/sampleperl.txt

• http://webservice.recruit.co.jp/docs/vc/sampleperl.cgi

use URI::Escape;#URLエンコーディングのライブラリuri_escapeでエンコード

2009年10月9日金曜日

CGIサンプル

• Rubyのサンプル• エイビーロードWebサービスをRubyで試す

• http://mtl.recruit.co.jp/blog/2007/08/webruby.html

2009年10月9日金曜日

CGIサンプル

• PHPのサンプル• カーセンサーnetカンタンAPIキット

• http://www.carsensor.net/webservice/library/

2009年10月9日金曜日

高速化のTips

•キャッシュ• キャッシュは２４時間ごとにクリアすれば

OK

• できるだけ、キャッシュをお願いいたします。

• Perl: Cache::FileCache

• Ruby:http://developer.yahoo.com/ruby/ruby-cache.html#disk

• PHP:http://developer.yahoo.com/php/#code

• Javascript :http://www.monsur.com/projects/jscache/

2009年10月9日金曜日

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

2009年10月9日金曜日

2009年10月9日金曜日

バリューコマース賞

賞金　¥50,000 -メッセージ：バリューコマースとして初参加になるマッシュアップアワードですが、リクルートのAPIを活用しより魅力的にリクルートのサービスをご紹介していただけますと幸いです。APIを活用すれば、アフィリエイト報酬も得ることも可能ですので、沢山の御応募をお待ちいたしております！

2009年10月9日金曜日

Q&A

2009年10月9日金曜日

どうもありがとうございました

2009年10月9日金曜日