はじめてのマッシュアップ

マッシュアップとは

出典：ウィキペディア　「マッシュアップ (Webプログラミング)とは」

ウィッキペディア　「マッシュアップ (Webプログラミング)とは」

・マッシュアップ（Mashup）とは、複数のWebサービスのAPIを組み合わせ、あたかも一つのWebサービスのようにする機能のこと。音楽用語のマッシュアップ(複数の音源を組み合わせるという意味)を、音源をWebサービスに置き換えてITの世界でも使用するようになった。既存のWebサービスを組み合わせて、短期間で、ITの深い知識がなくても、アプリケーション開発ができることから、新しい開発技法として注目されている。事例としては、Google MapなどAPIが公開されているWebサービスを、CRMなどの企業アプリケーションと組み合わせた例などがIT情報誌などで報告されている。また、大規模災害時など緊急を要するソーシャル・プログラミングでの活用事例として、ハリケーン・カトリーナの被害者救済サイトの構築がある。 Javaは、従来のさまざまな言語の良い部分を引き継ぎ、欠点を克服するよう設計された。次のような特徴をもつ。

Javaではプラットフォームに依存しないアプリケーションソフトウェアの開発と配備を行うことができる。
Javaで開発されたソフトウェアは堅牢な実行環境 (仮想マシン) であるJava仮想マシンのもとで動作する。
オブジェクト指向プログラミングの考え方に基づいて設計された言語であり、ソフトウェアの開発と保守の複雑さ　　　を低減し、開発効率と保守性を高める。
Smalltalk や Objective-C と同様な簡潔なオブジェクトモデルを採用している。
構文は C および C++ から多くを引き継いでいる。

参考Ｗｅｂサイト

Ｗｅｂ　ＡＰＩ　とは　（日経ＩＴプロ　Networkキーワード）

・APIは「application programming interface」の略です。

・Web APIとは、Webサイトなどの開発を効率的に行うための技術で、高機能なコンテンツを、より短期間・低コストで開発できるという利点があります。Web APIでは、APIを公開する側と利用する側で命令やデータをやりとりする技術として、「SOAP」や「REST」と呼ばれる技術が使われています。これらは、HTTPなどのプロトコルを使って、XML形式のデータをやりとりするためのしくみです。こうしたインターネットの標準的な技術を使うために開発や利用に特定の環境を要求しないという柔軟性がWeb APIの特徴の一つです。

Google Maps APIとは　（日経ＩＴプロ　マッシュアップ・ラボ）

・WebサービスAPIやマッシュアップ技術の最新動向と、マッシュアップ・サイト構築の要素となる各社のAPIの具体的な使い方についてサンプル・コードを交えて紹介しています。

参考図書

「はじめてのマッシュアップ　かんたんＡ to Ｚ」　本田　正純　著　Ｃ＆Ｒ研究所
Ｗｅｂ　ＡＰＩ　実践リファレンスブック　加藤　貴之ほか著　毎日コミュニケーションズ

準備

・飲食店のグルナビ検索サイトを作ります。

Ｇｏｏｏｌｅの利用申請をする

・Ｇｏｏｇｌｅマップのサイトにアクセスし、使用するＵＲＬを入力し、利用条件に同意して、ＡＰＩキーを取得します。

Ｇｏｏｇｌｅマップ利用申請サイト

ぐるなびＷｅｂサービスの利用申請をする

・「ぐるなびＷｅｂサービス」にアクセスし、利用規約に同意後、ユーザー登録を行うと、確認メールがきます。
確認メールにある最終確認ＵＲＬをクリックするとＡＰＩキーがメールで送られてきます。
「飲食店のぐるばび検索」で表示する地図の中心となる住所を「Ｇｏｏｇｌｅマップ」検索に入力します。

ぐるなびＷｅｂサービス申請サイト

中心部の緯度・経度を取得する

今回制作するサイト「飲食店のぐるなび検索」で表示する地図の中心となる住所を「Ｇｏｏｇｌｅマップ」検索に入力します。

Ｇｏｏｇｌｅマップ

・Ｇｏｏｇｌｅマップでアクセスした祭に表示される地図の中心を確認し、必要ならば位置を修正します。
Ｇｏｏｇｌｅマップ右上の「このページのリンク」をクリックして表示される、「HTMLを貼り付けてサイトに地図を埋め込みます」にあるデータから、緯度・経度をメモします。

・「HTMLを貼り付けてサイトに地図を埋め込みます」データ（例）

・上記の場合、35.672847,139.70103が緯度・経度（世界測地系）となります。

飲食店のグルナビ検索サイトを作る

・飲食店のグルナビ検索サイトを作ります。

サンプルプログラムを利用する

・「マッシュアップかんたんＡ　to　Ｚ」で紹介されている、「Ｃ＆Ｒ研究所のサイト」からサンプルプログラムをダウンロードします。

サンプルプログラムを修正する

①index.htmlのＧｏｏｇｌｅＡＰＩキーを変更します。

②ＪＳフォルダにある「main.js」の緯度経度を変更します。
サンプルプログラムの地図中心地の緯度・経度は日本の測地系で入力するようになっていますので、上記、下記の変換式を使って、世界測地系から日本測地系に緯度・経度を変換します。
lng = ln + la * 0.000046047 + ln * 0.000083049 - 0.010041;
lat = la + la * 0.00010696 - ln * 0.000017467 - 0.0046020

③同じく、地図の大きさ（拡大率）を変更します。

・サンプル：　map.setCenter(new GLatLng(35.6829, 139.7653), 5); 変更後：　　map.setCenter(new GLatLng(35.664688,139.694338), 15);　"15"が拡大率 ④同じく、グルナビＡＰＩキーを変更します。

Gpso.info 開発ブログ

・経度、緯度の表し方には、「日本測地系」と「世界測地系」があります。
同じ地点でも、この違いにより世界測地系の方が南東におよそ450ｍずれた地点を表すことになります。

【参考】東京都庁の経度、緯度
日本測地系・・経度：139.69487、緯度：35.68627
世界測地系・・経度：139.69167、緯度：35.68949

上記サイトに変換式がでています。

動作を確認する

以下の動作を確認します。

地図の中心を確認します。
知りたい場所をクリックすると、近傍１キロ以内のお店を「ぐるなび」で検索して、場所がマークで表示されます。
マークをクリックすると、「ぐるなび」に登録されているお店の情報が表示されます。
「お店の画像」をクリックすると、写真が表示されます。
写真をクリックすると写真が消えます。

トップに戻る