Mashup Awards4部門賞受賞作品紹介

1. 『駅の掲示板』
Mashup Awards 4「ワクワクプラン賞」受賞
∼この程度でも受賞できてしまう良い見本？(笑)∼
2008年11月1日Webさわり会議
@広島市まちづくり市民交流プラザ

2. 何故か受賞して
『駅の掲示板』 しまった。(^_^;)
Mashup Awards 4「ワクワクプラン賞」受賞
∼この程度でも受賞できてしまう良い見本？(笑)∼
2008年11月1日Webさわり会議
@広島市まちづくり市民交流プラザ

3. 本日のメニュー

4. 本日のメニュー
自己紹介
マッシュアップとは？
Mashup Awardsとは？
「駅の掲示板」紹介

6. 自己紹介

7. 自己紹介

8. 自己紹介
渡辺桂三(ハンドルネーム:keiso)
仕事はウェブページ制作(主にプログラミング)
最近の研究テーマ、趣味とも言う(笑)
Flashで3D(Shade用Papervision3Dエクスポータ)
電子工作(PICとAVRマイコン、Gainer)
アナログシンセサイザー等のコントロール用機器開発など
拡張現実(AR)とヒューマンインターフェース

10. マッシュアップとは？

11. Mashupとは、もとも
とは混ぜ合わせるとい
う様な意味。
音楽の用語だった。

12. Mashupとは、もとも
とは混ぜ合わせるとい
う様な意味。
音楽の用語だった。
マッシュアップ（Mashup）とは、
複数のWebサービスのAPIを組み合
わせ、あたかも一つのWebサービス
のようにする機能のこと。
出典：Wikipedia

13. Mashupとは、もとも
とは混ぜ合わせるとい
う様な意味。
音楽の用語だった。
マッシュアップ（Mashup）とは、
複数のWebサービスのAPIを組み合
わせ、あたかも一つのWebサービス
のようにする機能のこと。
例： 出典：Wikipedia
ホットペッパーから取得した飲食店
の位置情報をGoogle Maps APIを
利用した地図に表示する。

14. Mashupとは、もとも
とは混ぜ合わせるとい
例： う様な意味。
複数の検索サイトの検索結果情報を 音楽の用語だった。
一つのページに表示する。
マッシュアップ（Mashup）とは、
複数のWebサービスのAPIを組み合
わせ、あたかも一つのWebサービス
のようにする機能のこと。
例： 出典：Wikipedia
ホットペッパーから取得した飲食店
の位置情報をGoogle Maps APIを
利用した地図に表示する。

15. 例:『駅の掲示板』の場合
Webサービス Webサービス
XML 地図画像
マッシュアップ
サイト
XML XML
Webサービス Webサービス

16. 例:『駅の掲示板』の場合
駅や路線の情報、
カフェ情報 地図、QRコード
Webサービス Webサービス
XML 地図画像
マッシュアップ
サイト
XML XML
Webサービス Webサービス
コンビニ情報 住所から経度緯度

18. Mashup Awardsとは？

19. Mashup Awardsとは？

20. Mashup Awardsとは？
サン・マイクロシステムズ株式会社と株式会
社リクルートが共催するマッシュアップ作品
のコンテスト。
2006年より開催され、今回で４回目になる。
コンテスト対象APIは132、協力企業は44社
参加作品数は259(参加者数 747名)
優勝賞金100万円！！

22. コンテスト対象API

23. コンテスト対象API

24. 「駅の掲示板」で使用したWeb API QRコードは静止画で
用意すれば、Google
Chart APIは使う必要
がないが、マッシュ
アップの目的の為に使
用。
注：黄色い文字はコンテスト対象API

25. 「駅の掲示板」で使用したWeb API QRコードは静止画で
用意すれば、Google
Chart APIは使う必要
がないが、マッシュ
駅データ.jp アップの目的の為に使
用。
駅や路線の情報、カフェ情報
ReFITS Lab(逆ジオコーディングサービス)
経度緯度から住所を取得
Google Maps API / Google Chart API
地図の画像 / QRコード
ドコイク？Webサービス（β版）
コンビニ情報
Webサービス by Yahoo! JAPAN
住所から経度緯度を取得
注：黄色い文字はコンテスト対象API

26. 表彰式

27. 表彰式

29. 「駅の掲示板」とは？

30. 「駅の掲示板」概要

31. 「駅の掲示板」概要
GPS付きの携帯電話(au限定)で、現在地の地
図やコンビニ、カフェ、最寄り駅の情報を入
手する。
駅の伝言板にメッセージを書き込み、閲覧。
(書き込みも閲覧も、最寄り駅限定)
短期間(3、4日程度)で開発したので、グラ
フィックデザインの要素は無し。

32. 「駅の掲示板」開発環境

33. 「駅の掲示板」開発環境
PHP+MySQL
PHP XML Library(keithdevens.com)
Adobe Dreamweaver CS3
Adobe Dreamweaver Developer Toolbox
MX Includeのみ使用
表示確認は基本的にはFirefox 3(Mac)
最終確認は携帯電話(au INFOBAR 2)

35. 「駅の掲示板」デモ
http://m.kei3.com/ekibbs/
↑
パソコンなど対応端末以外でアクセスすると
QRコードが表示されます。

37. スクリーンキャプチャ
動画編

41. 終