マッシュアップ
複数のWebサービスが提供する機能や情報を、Web APIなどを通じて組み合わせ、1つの新しいサービスやコンテンツを作ること。
イマシルちゃんの解説
お店の案内ページに、地図が表示されているのを見たことがあるよね。
あの地図は、お店が自分で作ったものじゃなくて、地図サービスの会社が提供している機能を借りて、表示しているんだ。
こんなふうに、「よそのサービスの機能」と「自分の情報」を組み合わせて、新しい便利なページを作るのが、マッシュアップなんだよ！
音楽で、2つの曲を混ぜて新しい曲にする「マッシュアップ」が名前の由来なんだ。
より深い解説
定義
マッシュアップ（mashup）は、複数の提供元のWebサービスやデータを、それぞれが公開しているAPIを使って取得し、組み合わせることで、新しい価値を持つWebアプリケーションやコンテンツを作る手法である。
例
| 組み合わせるもの | 作られるもの |
|---|---|
| 自社の店舗情報 ＋ 地図サービスのAPI | 店舗案内のページに、他のサイトが提供する地図検索機能で得た地図を表示する |
| 不動産の物件情報 ＋ 地図 ＋ 周辺施設の情報 | 物件の周りの学校やスーパーを地図上に表示する |
| 天気予報のAPI ＋ 交通情報のAPI | 天候による遅延の予測を表示する |
| 商品検索のAPI ＋ 口コミのAPI | 価格と評判を一覧で比べる |
実現する技術
| 技術 | 役割 |
|---|---|
| Web API（REST APIなど） | 外部のサービスの機能やデータを、プログラムから呼び出す |
| JSON、XML | APIでやり取りするデータの形式 |
| JavaScript（Ajax） | ブラウザ上で、APIからデータを取得し、ページに組み込む |
| サーバ側での組み合わせ | サーバのプログラムが、複数のAPIを呼び出して結果をまとめる |
長所と注意点
| 長所 | 注意点 |
|---|---|
| 一から作らずに、高度な機能を短期間で利用できる | 提供元のAPIの仕様変更や停止の影響を受ける |
| 複数の情報を組み合わせて、新しい価値を作れる | 利用規約（利用回数の制限、表示の条件、商用利用の可否）を守る必要がある |
| 外部から取得したデータを表示するため、内容の信頼性やセキュリティ（不正なスクリプトの混入など）に注意が必要 |
似た例との区別
| 例 | 当てはまる技術 |
|---|---|
| Webブラウザにプラグインを組み込み、動画やアニメーションを表示する | プラグイン |
| 地図上のカーソル移動に合わせて、ページを切り替えずに表示を更新する | Ajax |
| 検索結果に、ほかのWebページへのリンクを表示する | ハイパーリンク |
| 自分のWebページの上に、ほかのサイトが提供する機能を利用して得た情報を表示する | （これがマッシュアップ） |
リンクを表示するだけでは、ほかのサービスの機能やデータを自分のページに組み込んでいないため、マッシュアップとはいえない。