マッシュアップを用いた観光情報...

マッシュアップを用いた観光情報

Webサービスの開発

平成25年度OISA技術研究会

マッシュアップ部会

株式会社富士通九州株式会社富士通九州株式会社富士通九州株式会社富士通九州システムズシステムズシステムズシステムズ　　　　末綱末綱末綱末綱　　　　英之英之英之英之

前津前津前津前津　　　　勇輔勇輔勇輔勇輔

九州東芝九州東芝九州東芝九州東芝エンジニアリングエンジニアリングエンジニアリングエンジニアリング(株株株株) 奈須奈須奈須奈須　　　　哲哉哲哉哲哉哲哉

河野河野河野河野　　　　友彦友彦友彦友彦

大分大学大学院工学研究科大分大学大学院工学研究科大分大学大学院工学研究科大分大学大学院工学研究科中上中上中上中上　　　　裕基裕基裕基裕基

中脇中脇中脇中脇　　　　隼人隼人隼人隼人

佐藤佐藤佐藤佐藤　　　　直人直人直人直人

真鍋真鍋真鍋真鍋　　　　頌司頌司頌司頌司

平成平成平成平成25年年年年12月月月月4日日日日

目次

• マッシュアップマッシュアップマッシュアップマッシュアップとはとはとはとは

• 部会部会部会部会のののの目的目的目的目的

• 開発開発開発開発にあたってにあたってにあたってにあたって

• システムシステムシステムシステム構成構成構成構成

• 観光情報観光情報観光情報観光情報Webサービスデモサービスデモサービスデモサービスデモ

• 開発開発開発開発をををを終終終終えてのえてのえてのえての振返振返振返振返りりりり

1

マッシュアップとは

複数のAPIを組み合わせてひとつのWebサービスを開発する手法

サービスサービスサービスサービスA

サービスサービスサービスサービスB

Web　　　　API

サービスサービスサービスサービスCマッシュアップマッシュアップマッシュアップマッシュアップ

マッシュアップマッシュアップマッシュアップマッシュアップ

例：Google API　　じゃらんAPI など

他社他社他社他社がががが公開公開公開公開するするするするAPIをををを活用活用活用活用してしてしてして

新新新新たなたなたなたなサービスサービスサービスサービスをををを実現実現実現実現

⇒スピーディースピーディースピーディースピーディーなななな開発開発開発開発！！！！

2


Google,Amazonなどによりなどによりなどによりなどにより、、、、WebAPIがががが普及普及普及普及

2002 2004 2007 2013

-Google、、、、Amazonからからからから　　　　WebAPI提供開始提供開始提供開始提供開始

-Web2.0開始開始開始開始をををを境境境境にににに、、、、　　　　マッシュアップマッシュアップマッシュアップマッシュアップがががが普及普及普及普及

-楽天楽天楽天楽天がががが、、、、WebAPI提供開始提供開始提供開始提供開始

　（　（　（　（国内国内国内国内））））

-様様様様々々々々ななななサービスサービスサービスサービスでででで

　　　　マッシュアップマッシュアップマッシュアップマッシュアップがががが利用利用利用利用されるされるされるされる

• マッシュアップマッシュアップマッシュアップマッシュアップのののの変遷変遷変遷変遷

3


• 世界中で使用されている主なWebAPI(Top 10)順位順位順位順位名称名称名称名称機能機能機能機能カテゴリカテゴリカテゴリカテゴリ利用利用利用利用しているしているしているしているサイトサイトサイトサイト数数数数

1 Google Maps 地図表示地図表示地図表示地図表示 Mapping 25212 Twitter つぶやきつぶやきつぶやきつぶやき SNS 7893 YouTube 動画共有動画共有動画共有動画共有 Video 6764 Flickr 画像共有画像共有画像共有画像共有 Photos 6245 Amazon eCommerce ネットショッピングネットショッピングネットショッピングネットショッピング Shopping 4236 Facebook SNS Social 4097 Twilio 通話通話通話通話、、、、SMS Telephony 3548 Last.fm 楽曲情報取得楽曲情報取得楽曲情報取得楽曲情報取得 Music 2369 eBay オークションオークションオークションオークション Search 223

10 Google Search 検索検索検索検索サービスサービスサービスサービス Search 187

出典出典出典出典:http://www.programmableweb.com/ ※※※※ 2013/10/21時点時点時点時点

現在公開現在公開現在公開現在公開されているされているされているされているWebAPIのののの数数数数　　　　　　　　・・・・・・・・・・・・　　　　10168件件件件マッシュアップマッシュアップマッシュアップマッシュアップをををを利用利用利用利用したしたしたしたWebサイトサイトサイトサイト　　　　・・・・・・・・・・・・　　　　 7233件件件件

4


• 国内でのマッシュアップ利用状況

マッシュアップマッシュアップマッシュアップマッシュアップ利用率利用率利用率利用率

AmazonAmazonAmazonAmazon

AssociatesAssociatesAssociatesAssociates

WebWebWebWeb

ServiceServiceServiceService

23%23%23%23%

YahooYahooYahooYahoo!!!!検索検索検索検索

15%15%15%15%

Twitter APITwitter APITwitter APITwitter API

22%22%22%22%

楽天市場楽天市場楽天市場楽天市場

21%21%21%21%

GoogleGoogleGoogleGoogle

Maps APIMaps APIMaps APIMaps API

19%19%19%19%

国内国内国内国内でででで登録登録登録登録されているされているされているされているWebAPIのののの数数数数　　　　　　　　・・・・・・・・・・・・　　　　227件件件件マッシュアップマッシュアップマッシュアップマッシュアップをををを利用利用利用利用したしたしたしたWebサイトサイトサイトサイト　　　　・・・・・・・・・・・・　　　　243件件件件

出典出典出典出典:http://http://http://http://waflwaflwaflwafl.net//.net//.net//.net// ※※※※ 2013/10/21時点時点時点時点

5

登録登録登録登録カテゴリカテゴリカテゴリカテゴリ率率率率

生活情報生活情報生活情報生活情報

15%15%15%15%

ショッピングショッピングショッピングショッピング

32%32%32%32%

地図地図地図地図

15%15%15%15%

テクノロジーテクノロジーテクノロジーテクノロジー

18%18%18%18% サイトサイトサイトサイト情報情報情報情報

20%20%20%20%

出典出典出典出典:http://http://http://http://waflwaflwaflwafl.net//.net//.net//.net// ※※※※ 2013/10/21時点時点時点時点


6

• 国内でのマッシュアップ登録カテゴリ率

• マッシュアップのメリット／デメリット

メリットメリットメリットメリットデメリットデメリットデメリットデメリット

・・・・低低低低コストコストコストコストでのでのでのでの開発開発開発開発

・・・・開発期間短縮開発期間短縮開発期間短縮開発期間短縮

・・・・短命短命短命短命ななななプログラムプログラムプログラムプログラムにににに

　　　　なりがちななりがちななりがちななりがちな傾向傾向傾向傾向

・・・・WebAPI側側側側ののののサービスサービスサービスサービス変更変更変更変更

　　　　　　　　　　　　

　　　　停止停止停止停止によるによるによるによる影響大影響大影響大影響大

過去停止過去停止過去停止過去停止になったになったになったになったサービスサービスサービスサービス

Google reader 2013年年年年7月月月月1日日日日終了終了終了終了Yahoo!検索用検索用検索用検索用API 2013年年年年8月月月月14日日日日終了終了終了終了

永久的永久的永久的永久的ににににサービスサービスサービスサービスがががが継続継続継続継続されるとはされるとはされるとはされるとは

限限限限らないらないらないらない

過去停止過去停止過去停止過去停止になったになったになったになったサービスサービスサービスサービス

Google reader 2013年年年年7月月月月1日日日日終了終了終了終了Yahoo!検索用検索用検索用検索用API 2013年年年年8月月月月14日日日日終了終了終了終了

永久的永久的永久的永久的ににににサービスサービスサービスサービスがががが継続継続継続継続されるとはされるとはされるとはされるとは

限限限限らないらないらないらない


7

部会の目的

～SNSの台頭に伴うWebAPIの増加～�ビッグデータから目的の要素を抜き出す処理が必要＝高負荷の可能性

�新たに登場するAPIにも柔軟に対応できる可変性が必要

�従来から問題視されている短命なプログラムになりがちな傾向に注意しなければならない

上記の点を満たしたWebアプリケーションの開発8

開発にあたって

• 開発の流れ

開発

開発

開発

開発テーマ

テーマ

テーマ

テーマのののの策定

策定

策定

策定

機能仕様

機能仕様

機能仕様

機能仕様のののの決定

決定

決定

決定

データ

データ

データ

データ設計

設計

設計

設計

WebAPI

のののの選定

選定

選定

選定

開発作業

開発作業

開発作業

開発作業（（（（機能分担

機能分担

機能分担

機能分担））））

テスト

テスト

テスト

テスト

9

Google Map上上上上にににに、、、、観光観光観光観光にににに関連関連関連関連するするするする複数複数複数複数のののの情報情報情報情報をををを表示表示表示表示


• 開発開発開発開発テーマテーマテーマテーマのののの策定策定策定策定

観光観光観光観光するするするする際際際際にににに便利便利便利便利なななな

旅行情報旅行情報旅行情報旅行情報サービスサービスサービスサービス

観光観光観光観光するするするする際際際際にににに便利便利便利便利なななな

旅行情報旅行情報旅行情報旅行情報サービスサービスサービスサービス

観光観光観光観光にににに関関関関するするするする情報情報情報情報をををを一一一一つのつのつのつのページページページページにににに集約集約集約集約

集約集約集約集約

可視化可視化可視化可視化

10

• 完成イメージ収集情報収集情報収集情報収集情報をををを表示表示表示表示すすすす

るるるるGoogle map収集情報収集情報収集情報収集情報をををを表示表示表示表示すすすす

るるるるGoogle map

情報用入力情報用入力情報用入力情報用入力フォームフォームフォームフォーム情報用入力情報用入力情報用入力情報用入力フォームフォームフォームフォーム


11

主催者

サーバ

素材

サーバ

素材

サーバ

素材

サーバ

素材

サーバ

主催者

サーバ

ゲスト

リソース

ゲスト

リソース

ホスト

コンテンツ

ホスト

コンテンツ

集約地点

集約地点

ブラウザブラウザブラウザブラウザブラウザブラウザブラウザブラウザ

WEBサービスサービスサービスサービスのののの提供方法提供方法提供方法提供方法はははは2種類種類種類種類にににに大別大別大別大別されるされるされるされる

クライアントサイドクライアントサイドクライアントサイドクライアントサイドサーバサイドサーバサイドサーバサイドサーバサイド

・・・・クライアントクライアントクライアントクライアント側側側側でででで処理処理処理処理

・・・・クライアントクライアントクライアントクライアントのののの性能性能性能性能にににに依存依存依存依存

・・・・Ex.) JavaScriptJavaApplet

・・・・クライアントクライアントクライアントクライアント側側側側でででで処理処理処理処理


・・・・Ex.) JavaScriptJavaApplet

システム構成

12

主催者

サーバ

素材

サーバ

素材

サーバ

素材

サーバ

素材

サーバ

主催者

サーバ

ゲスト

リソース

ゲスト

リソースホスト

コンテンツ

ホスト

コンテンツ

集約地点

集約地点



・・・・サーバサーバサーバサーバ側側側側でででで処理処理処理処理


　　　　しないしないしないしない

・・・・Ex.) JavaServletPHP

・・・・サーバサーバサーバサーバ側側側側でででで処理処理処理処理


　　　　しないしないしないしない

・・・・Ex.) JavaServletPHP


システム構成

13

主催者

サーバ

素材

サーバ

素材

サーバ

素材

サーバ

ゲスト

リソース

ゲスト

リソースホスト

コンテンツ

集約地点

集約地点



今回今回今回今回はははは

サーバサイドマッシュアップサーバサイドマッシュアップサーバサイドマッシュアップサーバサイドマッシュアップ

でのでのでのでの開発開発開発開発

素材

サーバ

主催者

サーバ

ホスト

コンテンツ


システム構成

14

• 機能仕様機能仕様機能仕様機能仕様のののの決定決定決定決定

口口口口コミコミコミコミ情報情報情報情報

グルメグルメグルメグルメ

宿泊施設宿泊施設宿泊施設宿泊施設

温泉施設温泉施設温泉施設温泉施設

天気天気天気天気

???

順次順次順次順次サービスサービスサービスサービスをををを

追加追加追加追加していくしていくしていくしていく

???

システム構成

15

• 実現実現実現実現したいしたいしたいしたいサービスサービスサービスサービスからからからからWebAPIをををを選定選定選定選定＆＆＆＆データデータデータデータ設計設計設計設計

温泉施設温泉施設温泉施設温泉施設

グルメグルメグルメグルメ

口口口口コミコミコミコミ情報情報情報情報

宿泊施設宿泊施設宿泊施設宿泊施設

天気天気天気天気

タグ情報

・座標

・天気

・URL・画像

・口コミ

　etc　　・

　　・

JSON化化化化

WebAPIAPI選定選定選定選定

システム構成

16

データデータデータデータ

• 開発作業

素材素材素材素材サーバサーバサーバサーバ

C


ブラウザブラウザブラウザブラウザ

リクエストリクエストリクエストリクエスト

レスポンスレスポンスレスポンスレスポンス




情報情報情報情報

収集部収集部収集部収集部①①①①


収集部収集部収集部収集部②②②②

Webサービスサービスサービスサービス

プログラムプログラムプログラムプログラム


並列動作

並列動作

並列動作

並列動作



Ajaxプログラムプログラムプログラムプログラム

主催者主催者主催者主催者サーバサーバサーバサーバ

WebAPI使用使用使用使用

クライアントクライアントクライアントクライアントへのへのへのへのレスポンスレスポンスレスポンスレスポンスはははは

JSONによりによりによりにより共通化共通化共通化共通化

クライアントクライアントクライアントクライアントへのへのへのへのレスポンスレスポンスレスポンスレスポンスはははは

JSONによりによりによりにより共通化共通化共通化共通化

プログラムプログラムプログラムプログラム構成構成構成構成

各各各各WebAPIごとにごとにごとにごとにモジュールモジュールモジュールモジュールをををを

分割分割分割分割しししし並列処理並列処理並列処理並列処理

各各各各WebAPIごとにごとにごとにごとにモジュールモジュールモジュールモジュールをををを

分割分割分割分割しししし並列処理並列処理並列処理並列処理

webAPI個個個個々々々々のののの形式形式形式形式ののののレスポンスデータレスポンスデータレスポンスデータレスポンスデータwebAPI個個個個々々々々のののの形式形式形式形式ののののレスポンスデータレスポンスデータレスポンスデータレスポンスデータ


B


A

システム構成

17

• 開発作業

ブラウザブラウザブラウザブラウザ

Webサービスサービスサービスサービス

プログラムプログラムプログラムプログラム


並列動作

並列動作

並列動作

並列動作



Ajaxプログラムプログラムプログラムプログラム

担当担当担当担当A

担当担当担当担当B

担当担当担当担当C

主催者主催者主催者主催者サーバサーバサーバサーバ

開発担当開発担当開発担当開発担当のののの割割割割りりりり振振振振りりりり



C







WebAPI使用使用使用使用


B


A情報情報情報情報

収集部収集部収集部収集部①①①①


収集部収集部収集部収集部②②②②

システム構成

18

• 開発時に工夫した点

ビッグデータビッグデータビッグデータビッグデータをををを扱扱扱扱うことによるうことによるうことによるうことによる負荷増加負荷増加負荷増加負荷増加をををを考慮考慮考慮考慮

サーバサイドサーバサイドサーバサイドサーバサイドででででデータデータデータデータ処理処理処理処理をををを行行行行うううう機構機構機構機構をををを採用採用採用採用

APIのののの欠点欠点欠点欠点をををを軽減軽減軽減軽減

オブジェクトオブジェクトオブジェクトオブジェクト指向指向指向指向にににに基基基基づいたづいたづいたづいた設計設計設計設計によりによりによりにより

再利用性再利用性再利用性再利用性、、、、保守性保守性保守性保守性のののの高高高高いいいいプログラムプログラムプログラムプログラムのののの実装実装実装実装

システム構成

19

観光情報Webサービスデモ

• 機能紹介ユーザユーザユーザユーザ入力情報入力情報入力情報入力情報からからからから『『『『宿泊施設宿泊施設宿泊施設宿泊施設』』』』、、、、『『『『温泉温泉温泉温泉』』』』

のののの情報情報情報情報をををを収集収集収集収集するするするするシステムシステムシステムシステム

• ユーザユーザユーザユーザがががが入力入力入力入力フォームフォームフォームフォームにににに入力入力入力入力したしたしたした情報情報情報情報をををを収集収集収集収集するするするする

• 収集収集収集収集したしたしたした情報情報情報情報ををををピンドロップピンドロップピンドロップピンドロップででででgoogle map上上上上にににに表示表示表示表示するするするする

• ピンピンピンピン上上上上ににににマウスカーソルマウスカーソルマウスカーソルマウスカーソルをををを持持持持っていくとっていくとっていくとっていくと、、、、吹吹吹吹きききき出出出出しでしでしでしで詳詳詳詳

細情報細情報細情報細情報をををを表示表示表示表示

20

観光情報Webサービスデモ

• デモ動画

動画動画動画動画動画動画動画動画

21

開発を終えての振返り

• 開発を通しての反省点

�制約制約制約制約のあるのあるのあるのあるAPIサービスサービスサービスサービスもももも多多多多いためいためいためいため，，，，当初想定当初想定当初想定当初想定しししし

ていたほどていたほどていたほどていたほど多多多多くのくのくのくのAPIをををを扱扱扱扱うことはできなかったうことはできなかったうことはできなかったうことはできなかった

�ビッグデータビッグデータビッグデータビッグデータのののの集計集計集計集計にににに伴伴伴伴うううう負荷負荷負荷負荷ののののテストテストテストテストをををを行行行行えなえなえなえな

かったかったかったかった

�APIによってによってによってによって扱扱扱扱ううううデータデータデータデータののののフォーマットフォーマットフォーマットフォーマットのののの違違違違いをいをいをいを想想想想

定定定定できなかったできなかったできなかったできなかった

22

• マッシュアップのメリット／デメリット

メリットメリットメリットメリットデメリットデメリットデメリットデメリット

・・・・低低低低コストコストコストコストでのでのでのでの開発開発開発開発

・・・・開発期間短縮開発期間短縮開発期間短縮開発期間短縮

・・・・短命短命短命短命ななななプログラムプログラムプログラムプログラムにににに

　　　　なりがちななりがちななりがちななりがちな傾向傾向傾向傾向

・・・・WebAPI側側側側ののののサービスサービスサービスサービス変更変更変更変更

　　　　停止停止停止停止によるによるによるによる影響大影響大影響大影響大


・・・・機能追加機能追加機能追加機能追加・・・・削除削除削除削除がががが容易容易容易容易

・・・・SNSなどのなどのなどのなどのビッグデータビッグデータビッグデータビッグデータをををを

　　　　容易容易容易容易にににに扱扱扱扱えるえるえるえる・・・・サービスサービスサービスサービス毎毎毎毎にににに制約制約制約制約がががが存在存在存在存在

23


• 今後今後今後今後のののの展望展望展望展望

SNSのののの普及普及普及普及にににに伴伴伴伴ってってってって、、、、新新新新しいしいしいしい

APIがががが増加増加増加増加

個人個人個人個人のののの意見意見意見意見をををを多多多多くくくく拾拾拾拾うようなうようなうようなうような

サービスサービスサービスサービスのののの展開展開展開展開

24

ご清聴ありがとうございました

26

マッシュアップを用いた観光情報...

Documents