第1回　マッシュアップしたほうがいい人、しないほうがいい人

そもそもあなたは何をつくりたいのか

この連載は、プログラム言語、特にウェブアプリケーションを開発するために必要なHTMLとサーバサイド言語を学んだばかりのビギナーを対象にしていきます。

それでは、そもそもあなたは、どうしてマッシュアップしようと思ったのでしょうか。

転職するためのスキルとして？
はやりだから？
趣味？

この連載を読んでいるあなたは、ウェブアプリケーションといっても、既存のもののコピーではなく、これまでにない新しいものを開発したいと思っているのではないでしょうか。

そこでまずことわっておかなければならないのは、マッシュアップの手法について、コアな部分のライブラリが各所から提供されているために、お手軽さだけが強調されていますが、それゆえに、誰もがマッシュアップできるわけではないという点です。

マッシュアップするために、必要なのは、
「⁠何かをつくりたい」
ではなく、
「⁠これをつくりたい」
という動機と熱情です。

技術やスキルが前提になるのではありません。はっきりとしたつくりたいアイデアが二の次となってしまっているのならば、多くのユーザが陥っているように、同じ材料をマッシュアップして結局同じものを作ることになります。

何もアイデアがないのであれば、とりあえずいまは、マッシュアップならどのようにショートカットできるのかを知ることから始めればよいと思います。やがて、できないことなんて何もないということがわかってくるはずです。

しかし、なんでもかんでもがお手軽にいくわけではありません。材料のすべてが、あらかじめ揃っているわけではありません。必要なものが欠けている場合には、自分でその材料をAPI化する方法を模索して、自分のために用意しなければなりません。

この4回の連載では、そのあたりのバランス感覚をお伝えすることに配慮して進めていきます。

低コスト・ハイスピードな開発
知識は最低限でよし。最も重要なのはアイデア

まずは、下記の４つのエッセンスを見てください。マッシュアップのハードルはとても低いものです。

（1）HTMLとCSS

ウェブサイトを構築するうえで、HTMLとCSSをわかっているということは大事です。しかしながら、あなたはデザイナーではありません。いうなれば、マッシュアッパーです。

あなたが挑戦するのは、斬新なインターフェースの開発ではなく、ウェブアプリケーションの開発です。デザインを構築するためにHTMLとCSSを使うのではありません。デザインは、いまあなたが形にしようとしているアイデアにとって使いやすいものをどこかから拾ってくればよいのです。

さらにいうと、たとえば、時間軸に特徴のあるアイデアならばスライダーバーを用意したいとか、リスト形態のアイデアならばドラッグ・アンド・ドロップを採用したいという要望が生まれると思います。いちから自分でこれらのプログラムを書くのは骨が折れますが、ほとんどの場合、これらのインターフェースのプログラム部分は、次のセクションでご紹介しますが、あらかじめライブラリの形でオープンに提供されています。そしてそのようなライブラリはほんとうに人気があり、世界中で使われています。

そのなかから、あなたの気に入るデザインやインターフェースを採用しているウェブアプリケーションを探しましょう。そして、そのサイトのHTMLソースを開き、該当する箇所を参考にすればよいのです。

そこで、他のサイトを参考にする際に便利なツールがあります。それは、FirefoxのFirebugです。

ウェブアプリケーションの動作やデザインはブラウザごとに異なる場合があるため、そのチェックのためにも必要ですが、FirebugはFirefoxのブラウザ画面に表示されている内容であればどんなものでも、リアルタイムに参照することができます。

これにより、特定の部分のインターフェースがどのようなHTMLとCSSによって構築されているのかを、直感的に見ることができるので、デバッグの作業もはかどることでしょう。

デザインのためにHTMLとCSSを勉強するのではありません。

マッシュアップをつくることにとって、HTMLとCSSは、JavaScriptを使って、ページを更新して内容をすべて書き換えるのではなく、リアルタイムに、ページを部分的に書き換えるために、必要なのです。

（2）JavaScriptライブラリ

JavaScriptライブラリの詳しい使用方法は連載第4回で取り扱いますが、マッシュアップでウェブアプリケーションをつくるときに、JavaScriptが必要だろうというのはなんとなくおわかりでしょうが、小難しく考えていないでしょうか？

JavaScriptですることは、この2つです。

レイアウトをリアルタイムに変化させる
データをリアルタイムに読み込んで、表示する

上記以外のことは、おまけに過ぎません。

そして、上記の実現が主な役割となったいまどきのJavaScriptで大事なのは、次のふたつだけです。

ウェブページの特定の場所を見つけ、書き換える関数

$() //getElementById()の短縮形

Ajaxでデータを送受信する関数の基本形

new Ajax.Request(url, {
  method: "get or post",
  parameters: "parameter="+send_string,
  onSuccess:function(httpObj){
    $("result").innerHTML = httpObj.responseText;
  }
});

JavaScriptライブラリというのは、ユーザのプログラミングの手間を極小にする目的で集められた機能のパッケージのことで、具体的には下記で示す、testというidのボックス要素の中身（⁠「⁠あいうえお」というテキスト）を取得する際に、どう書くことができるかを見てください。

<div id="test">あいうえお</div>

ボックス要素の中身を取得

従来：

var string = document.getElementById("test");

ライブラリを使うと：
```
var string = $("test");
```

ボックス要素の中身を書き換え

従来：

document.getElementById("test").innerHTML = "かきくけこ";

ライブラリを使うと：

$("test").innerHTML = "かきくけこ";

これに加えて、要素の中身を取得したり書き換えたりできるだけではありません。

下記のようにすることで、CSSもリアルタイムも簡単に書き換えることができます。

<div id="test" style="font-size:11px;">あいうえお</div>

ライブラリを使うと

$("test").style.fontSize = "20px";

このように、コードをシンプルにすることができるだけではありません。

ビギナーでも気軽にデータを送受信できるようになります。ライブラリを使わない場合、「⁠データを送信する」ということをまたひとつ学習する必要があるのですが、その作業を肩代わりできます。

下記は、

（1）test.phpという自分のサーバのファイルに、
（2）GETメソッドで、
（3）hiraganaというパラメータに「あいうえお」というデータをリクエストします。
（4）その結果、データが返信されるので（httpObj⁠）⁠、
（5）受け取ったデータをテキストとして扱い（httpObj.responseText⁠）⁠、
（6）<div id="test"></div>の中身に入れる、

new Ajax.Request("test.php", {                  //(1)
  method: "get",                                //(2)
  parameters: "hiragana=あいうえお",               //(3)
  onSuccess:function(httpObj){                  //(4)
    $("test").innerHTML = httpObj.responseText; //(5),(6)
  }
});

という作業をしています。

上記（1）（⁠2）（⁠3）は、結局のところ、下記のURLを開いているのです。

http://www.hoge.com/test.php?hiragana=ひらがな

はじめは取っつきにくいかもしれませんが、なぜ、などとは考えず、このサンプルをコピー・アンド・ペーストして適宜変更するだけでうまく動作します。

JavaScriptライブラリの選択肢はたくさんありますが、ここでは話をシンプルにするために、次回以降のこの連載においても、下記のライブラリを扱うものとします。

JavaScriptライブラリ

（3）API

APIとは、マッシュアップする材料のことで、APIが要求する情報をユーザが送信することで、APIからデータを返信してもらうという使い方をします。

このやりとりは前セクションでご説明したように、JavaScriptライブラリでおこないます。

ほとんどの場合は、下記の通り、GETメソッドで直接URLに埋め込んでリクエストする形になります。

new Ajax.Request("test.php", {
  method: "get",
  parameters: "hiragana=あいうえお",
  onSuccess:function(httpObj){
    $("test").innerHTML = httpObj.responseText;
  }
});

（4）データベース

データベースのセクションを設けましたが、必須ではありません。ウェブアプリケーションに会員システムやデータを保存する機能が必要になったときに、MySQLなどを検討すればいいと思います。

マッシュアップは用途に依存する

マッシュアップを継続的につくっていくには、いうまでもなくアイデアを柔軟に着想できるかが最も大切な点ですが、それ以前に、マッシュアップは用途にとても依存します。

たとえば、あなたが不動産業にたずさわっており、自社物件の地理的は位置をお客さんに紹介するためにGoogle Mapのつかいかたを知りたい、という場合はマッシュアップはあまり役に立たないでしょう。

何をつくりたいのかによるのです。

あなたがこれから作ろうとしているのは、ツールとコンテンツのどちらでしょうか。

端的にいうと、新聞記事と地図をマッシュアップして防犯マップをつくるというアイデアがあった場合に、あなたは新聞記事を書く側にまわりたいのか、それとも不特定多数のユーザーがひとめで事件・事故が起きた場所を把握できるようなツールを提供したいのか、どちらでしょうか。

マッシュアップは、その性質上、出所の違うさまざまなデータを、共通の基準で組み合わせます。

あらかじめAPIとして提供されるデータにしろ、ユーザーのコメントをゼロから蓄積するにしろ、マッシュアップするのであれば、あなたはいっさいコンテンツを作成してはいけません。

マッシュアップとは、新しいツールを作成することなのです。

次回以降の3回で、マッシュアップを低コスト・ハイスピードに新サービスをリリースしていく方法を考えていきます。