Tweet

第28回　マッシュアップ元年が終わり、2008年はどうなる？

　そのほかの見どころ

　Ajaxとそれに関連する話題を紹介します。

■ Webブラウザ上で動くJavaScriptの統合開発環境

• TIDE, Tiny IDE for JavaScript

　これはすごいですね。Webブラウザ上でJavaScriptのコードを書き、ステップ実行できます。打ち込んだコードが即座に実行できますから、ビギナーの学習にも便利でしょう。

　実は、私もこれと似たコンセプトのプログラムを試作したことがありますが、完成度は比較になりません。よくこれだけのプログラムを書いたものだと思います。実用性も高そうです。

TIDEの使用例

■ JavaScriptコードを読みやすくするためにWeb上で整形！

• Beautify Javascript

　JavaScriptは、ソースコードがそのまま実行環境に送られます。では、簡単にソースが読めるのかというと、そうではありません。

　多くの場合、通信量を減らしたりコンパイルの時間を減らすために、プログラムとしての機能性を損なわない範囲でよりコンパクトにしてあることが多いからです。その際に除去される情報は、おおむね読みやすさのための空白や、長いシンボル名です。そのようにして作成されたソースコードを読むのは、かなりの面倒です。

Beautify Javascriptのサンプル使用例（整形前）

　もちろん、「解析されたくない」という意図で使われる場合は面倒であることは正しい結末です。しかし、自分で開発しているプログラムでトラブルがあれば、コンパクトに圧縮されたソースを読まねばなりません。こういうときに、少しでもソースコードを読みやすく整形してくれるサービスがあると便利です。

Beautify Javascriptのサンプル使用例（整形後）

■ クロスドメインで「AJAX」が実現できる!?

• AJAX Cross Domain

AJAX Cross Domainのページ

　ここでいう「AJAX」とは、クライアントとサーバの通信手段を意味します。通常XMLHttpRequestオブジェクトは別ドメインとの通信ができない制約が課せられているわけですが、それを打破して通信を可能にするライブラリです。

　このような通信は、マッシュアップ時代にはどうしても必要とされるものなので、何らかの方策を考える必要があります。このライブラリはすぐに使用できる1つの方策といえます。

■ 米国の飛行機の遅延状況が分かるマッシュアップ

• Flight Wait

　日本のサービスではないので実用度はあまり高くないかもしれません。しかし、全米の航空機の遅延状況が、地図上にラインの色として見えるのは非常に面白いサービスです。

Flight Waitのページ

　自分が乗る予定の便について、遅れの状況を調べることはよくあるかもしれません。しかし、複数の便の状況を全体的に眺めると、いろいろな状況が手に取るように見えます。

■ 嘆くよりも創意と工夫で乗り超えよう

• jole.fi「Slice animation in plain JavaScript」

　通常、JavaScriptだけでは3Dアニメーションを作ることは著しく困難です。しかし、JavaScriptの持つ機能をうまく活用することで、3Dアニメーションのような画面効果を作ることはできます。任意の3Dオブジェクトを任意に動かすことは不可能でも、創意と工夫でできることもあるわけです。　

jole.fi「Slice animation in plain JavaScript」のページ

　こういう工夫の重要性は何回でも繰り返して述べたいと思います。素晴らしいXXXX技術がWebブラウザに標準搭載されれば……と嘆くことは誤りです。なぜなら、XXXX技術が標準搭載されても、すぐにバージョンアップしない既存ユーザーたちはその技術に対応しないからです。

　それよりも、いまユーザーが持っているWebブラウザで何ができるかを考える方が建設的です。嘆くよりも、手を動かそう。

■＠IT関連記事

プログラマならWeb APIという巨人の力を使っちゃえ！ 連載：5分でネットがわかるシリーズ（10）　アイデアとテクニックがあれば個人でも強力なWebサービスを生み出せる。Web APIの魅力とその仕組みを5分で説明します 「Master of IP Network」フォーラム 2007/3/13

jQueryを使ってTwitterをおいしくマッシュアップ パターンとライブラリで作るAjaxおいしいレシピ（1）　jQueryを使ってTwitterのコメントをかんたんに表示するサンプルを見ながら、AjaxデザインパターンやMVCについて解説 「リッチクライアント ＆ 帳票」フ ォーラム 2007/8/29

prototype.jsでYouTubeをインクリメンタルサーチ パターンとライブラリで作るAjaxおいしいレシピ（2）　YouTubeの新しいWeb APIとprototype.jsの新機能を使い、入力項目にリアルタイムで動画検索するサンプルを紹介 「リッチクライアント ＆ 帳票」フ ォーラム 2007/10/4

マッシュアップの落とし穴。誰がために結び付けるのか ものになるモノ、ならないモノ（21）　WEB 2.0ブームとともに多くの人気サービスを生み出した「マッシュアップ」。そんな構築手法に警鐘を鳴らす出来事があった 「Master of IP Network」フォーラム 2007/12/25

マッシュアップしたいけどPHPでDOMはイヤ！ Viper 2で学ぶXMLデータベース最新事情（2）　お天気情報やグルメマップなどWebサービスをマッシュアップするには、DOM＋XPathよりXQueryの方が断然便利だ 「Database Expert」フォーラム 2007/11/22

ぐるなびがAPIを公開、その背景にあるのは？ 飲食店情報を外部から活用できるAPIをぐるなびが公開した。同社がAPIを公開した理由はどこにあるのだろうか。その背景をぐるなびに聞いた 自分戦略研究所 > スキル創造研究室 2007/6/19

いまさら聞けない、“Ajax”とは何なのか？ いまさら聞けないリッチクライアント技術（3）　Googleマップで有名になり、もはやWebの定番といっても過言ではないAjax。その生い立ちや仕組み、構成技術について解説 「リッチクライアント ＆ 帳票」フ ォーラム 2007/8/23

いまさら聞けないJavaScript入門 いまさら聞けないリッチクライアント技術（2）　Ajax技術が注目され大復活を遂げたJavaScript。しかし、復活するまでには数々の悲劇が…… さらに実例や使い方なども解説 「リッチクライアント ＆ 帳票」フ ォーラム 2007/7/17

どこまでできる？ 無料ツールでWebサイト作成

　無料のWebサイト作成は業務レベルでどの程度使えるのか？ 本連載では、さまざまな無料ツールを使用したサイト開発を掘り下げていく

• 第1回 AptanaでWebページ作成はここまでできる！
• 第2回 AptanaでAjax・AIR・iPhone用ページの開発を行う
• 第3回 低スペックPCでも使える！ Webブラウザでサイト作成
• 第4回 JavaScript開発ツールの本命！ FirebugとAptana
• 第5回 Webデザインをオンライン上で作成して共有するCSSEZ
• 第6回 テキストエディタでWebサイト構築をガンバル人へ
• 第7回 HTMLを知らない人でもWebサイトが作れるCMSとは？

最終更新 2008/4/7

1-2

INDEX
第28回 マッシュアップ元年が終わり、2008年はどうなる？
	Page1 2007年は「マッシュアップ元年」だった コンテストを踏み台にチャンスをつかめ！ かゆいところに手が届くグラフAPI
	Page2＜そのほかのみどころ＞　 Webブラウザ上で動くJavaScriptの統合開発環境 JavaScriptコードを読みやすくするためにWeb上で整形！ クロスドメインで「AJAX」が実現できる!? 米国の飛行機の遅延状況が分かるマッシュアップ 嘆くよりも創意と工夫で乗り超えよう

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード