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

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

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

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

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

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

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

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

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

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

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

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

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

（1）HTMLとCSS

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

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

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

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

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

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

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

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

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