先週末、東京工業大学でMake Tokyo Meeting 07という、電子工作の祭典が行われていました。
もともとハード分野にも興味があって、前々から行きたかったのですが、Muji Noteの岩井さんが行かれるとTwitterで発見し、急遽合流することに。
会場でも終始、案内してもらいながら解説もしてもらったり、ものすごく参考＆＆楽しかったです！

ずっとWeb業界にいると知らない電子工作の世界を垣間見たので、驚きポイントをまとめます。

オープンソースハードウェアのArduino、5人で12億円の売上

イタリアから端を発したオープンソースハードウェアのArduino(アルドゥイーノ)ですが、そのコミッターの一人がMakeで講演されてました。
なんとほぼほぼ5人のチームで、40万台も販売されたとのことです。
だいたい1ユニット3000円とすると12億円の売上に。
すごい。。
実際、Makeの出店者の半数以上はArduinoを使ったものっぽかったです。
» Arduino Official

なお、Wikipediaによると、開発環境はProcessingベースで、開発言語はC/C++に風の言語を使用しているとのこと。

Arduinoなどのパーツを扱うショップが伸びているらしい

Makeでも多くの人が、展示と同時にマイコン、開発キットの販売を行っていました。
ある意味でソフトウェアのオープンソース配布に近いか。
その中でもアグレッシブな面白いパーツを取り扱う大手のショップSwitch Scienceが注目とのこと。
たしかに本当に多くの種類のパーツがある。。
Arduinoだけで175種類売ってますね。
» Switch Science

ちなみにロボット工学で一番先端をいっているらしい、千葉工大の人たちもマイコンを売ってました。
このスペックで安い！みたいな話をしてくれたのに、事前知識がなくてすごさがわからなかったf^^;
» Furo 千葉工業大学 未来ロボット技術研究センター

見た目に重要な箱の外注を、1,000円くらいからできちゃう

いわゆる外側というか、マイコンを格納する箱の部分を作るのが大変そう、というイメージがあったのですが、かなり安価に柔軟なものが作れると知って目からウロコ。
その造形方法も3種類あるとのこと。

・レーザー加工
アクリル板や木材などの平面材をレーザー加工して、部品を組み合わせて箱にする手法（上記写真）。
emerge+なら家の表札くらいの大きさなら300 1,000円くらいからやってくれるとのこと。
しかもイラレで加工データを作って納入するというお手軽さ。
[追記]ご指摘いただき最低価格の部分を修正しました。
» emerge+

・3Dプリンタ
0.1mm単位の細かい粒子を吹きつけて造形する手法。
Inter Cultureならデータをアップロードすると自動で見積もってくれて、最短7日で納品してくれる模様。
お値段は容積に比例しますが、4500円〜というプライシング。
» Inter Culture

・金型
とはいえ量産するには、上記二つの方法だと限界がありそう。
そんなときには金型を作って量産する方が安上がりとのこと。
金型作成は今protolabsがあついらしい。自動見積付き。
» protolabs

マネタイズできているプロジェクトはまだまだ少ない

Arduinoの登場でハードウェアプロジェクトが増えてきているように思えますが、まだまだマネタイズ出来てるプロジェクトは少ないようです。
そんな中、最近注目のハードウェアスタートアップをご紹介。

・sassor

コンセントにつなぐとその消費電力を見える化してくれるデバイス。
スマートグリッド。

・Cerevo

最近はUstream配信のためのデバイスにも力をいれているCerevo。
デジカメの会社です。

・ガラポンTV

テレビにつないで1ヶ月分の番組を録画し、携帯やiPadからワンセグ視聴できるHDレコーダー。
最近は、テレビの規格が同じのブラジル展開も狙ってる模様。

　
これを機会に来年のMakeに展示できるような新しい何かをあなたも作ってみては？

パラパラとData Visualization系のライブラリを見てたら、いつの間にかGoogle Visualization APIとGoogle Chart APIが統合してGoogle Chart Toolsなる一つのAPIに統合されていました。

その中でも、QRコードや数式、動的なアイコン生成など、画像を生成するモノはThe Chart API、
Motion ChartやインタラクティブなグラフなどJavascriptやFlashを使うモノはThe Visualization API、
という棲み分けがなされているようです。

Dynamic Icons (Image API)

Image APIでは、Dynamic Iconsなる機能が追加されていました。

こんな感じの画像をこういうソースで呼び出すことができるようです。

chst=d_bubble_icon_text_big
chld=
snack|
bb|
$2.99+!|
FFBB00|
000000

Visualization Gadget | Data Source (Visualization API)

主にVisualization APIについてですが、Visualization GadgetとしてGoogle Doc等で使えたり、Visualization用にデータを配信するData Source Toolも同時に配布されています。
ちょっと色々な機能を包含していて全体像が把握しきれなかったので、図にまとめました。

Data Sourceに関して、ちょっと何なのか良く分からなかったのですが、どうやら、ほぼほぼGoogle Server Side Data Source Java Libraryのことを指しているようです。Java LibraryではTomcatを用いてデータを公開している模様。（Javaに限らずPythonやPHP版などもありますが）

これはWebサービス運営者など、データを持つユーザーが、サーバー側でVisualization用にデータを配信するライブラリみたいです。SQLを用いてローカルのDBにアクセスしたり、データをJSON形式やCSV形式や他に様々なスタイルのデータ型に変換して出力したり、Visualization用データを生成する様々なツールが提供されています。

また、Google DocsのSpread Sheetからデータを取得できるのも特徴的ですね。Data Sourceに関してはこのムービーが詳しいです。

Visualizationに着目すると、Motion Chartや、A Magic Table、Annotated Time Lineが珍しいですね。

(8 free Data Visualization frameworks not only for charts [en])

相変わらずData Visualization関係で調査・開発を行っているのですが、その中でJavascriptのライブラリ・フレームワークを探す時間も多いです。

» 20 Fresh JavaScript Data Visualization Libraries

上記記事のようにまとめ記事が結構あって助かるのですが、ほとんどがCharts（グラフ）のライブラリなんですよね。Chartsも線グラフか、棒グラフか、円グラフか、、、みたいにライブラリ化される主要なグラフは8種類くらいしかなく、面白くない。
適切なデータに対して適切なVisualを関連付けるわけですから、もっと多くのVisualが考えられてもいいはず！

そこでChartsに限らない、もっと根本的にData Visualizationを扱っている有名どころのフレームワークをリストアップしてみました。

SIMILE Widgets Exhibit

MITのメディアラボがリリースしているFaceted Search用フレームワークです。HTMLを拡張したテンプレート言語を用いて、簡単にFaceted Searchと、検索結果のリッチなVisualizeを可能にしています。現在、リスト、テーブル、地図、Timeline、TimeplotといったVisualに対応しています。タブなどでVisualを切り替えられるので、ユーザーの目的にマッチした検索機能を提供することができます。

SIMILE Widgetsでは、他にもTimelineや、Timeplot、Runway(Coverflow)などのVisualもAPIとして個別に提供しています。

» SIMILE Widgets Exhibit – US President Search DEMO

ProtoVis

ProtoVisはStanfordのVisualizationフレームワークです。これは巷のライブラリと違い、グラフや地図、といった単位を1つの単位として扱わず、線や面、点といったもっと細かい部品単位でVisualを作成しています。どちらかというとProcessing.jsに近いかも。たくさんのDEMOが載っているので、それらを参考にかなり自由度の高いVisualを作成することができます。

» ProtoVis DEMO

Prefuse Flare (Flash)

Prefuse FlareもData Visualizationのフレームワークとして有名です。Prefuseは、Javaのフレームワークでしたが、今回Flashに対応しました。こちらも豊富なVisualを用意しており、SIMILE同様データ構造をしっかり設計しているので柔軟性が高く、Visualの切り替えや様々なVisualを拡張することができるようになっています。

また、Flashならでわの気持ちのいいインタラクションも高評価です。

» Flare DEMO

Style Chart

こちらは、javascriptでVisualのリクエストを投げるとサーバー側で画像を生成し、それを表示するというフレームワークです。Galleryを見る限りかなり豊富なVisualを扱えるようです。画像だからってアニメーションやアクションが行えないわけではなく、そこにもちゃんと対応しています。扱っているライブラリが少ない、レーダーチャート（スパイダーチャート）も用意している点がいいです。

» Style Chart Editor(DEMO)
» Style Chart Gallery

CanViz

有名なVisualizationフレームワークであるGraphvizのJavascript版です。主にグラフ構造のデータを描画するのに適しています。ただ、DEMOを見る限り、アニメーションやイベントの設定ができないようで、本当にVisualizeのためだけのフレームワークのようです。

» CanViz DEMO

Axiis (Flex)

こちらはAdobe FlexのVisualizationフレームワークです。インタラクティブなアクションがかなりリッチに作りこまれています。下記のBrowser Statisticsは一部で話題になりましたね。かなり自由度の高いフレームワークのようです。

» Axiis – Browser Statistics DEMO

Infovis

こちらもグラフ構造のデータ描画ライブラリとして有名です。フレームワークではないので個別のVisualを利用する形になります。グラフ構造しか扱えないのですが、この手のライブラリとしては珍しく、Weighted Graph（ノード間のパスに重みが付いている）/Directed Graph（パスに方向がある）、の描画にも対応しています。現時点で5種類のグラフ系、ツリー系のVisualがありますが、どれもよくできています。

» Infovis DEMO

RGraph

番外ですが、HTML5用のグラフ生成ライブラリも登場しています。HTML5なのでまだまだ本格導入は難しいかもしれませんが、相当クオリティ高く仕上がっており、今後が楽しみなライブラリです。

» RGraph DEMO

前回、モノをある切り口で捉え、それを適切な表現方法にあてはめて考えるアイディア出しスタイルと、モノの関連データにVisualizationをあてはめるというData Visualizationのスタイルは、脳の構造・プロセスが同じで、分かりやすいのではないか、という記事を書きました。

» アイディアの発想法とData Visualizationは同じ構造なのではないか？

そこで今回は、上記事で言及している”モノとその関連データ”とは何なのか、深く掘り下げてみたいと思います。

関連データとはプロパティである

「データから自動でVisualizationを行う」という取り組みの中で、どのようにデータを扱えばよいかという問いにぶちあたり、最近RDFおよびRDF Schema、Dublin Coreあたりを調べています。

RDF とは、主語・述語(プロパティ)・目的語(値)という3要素を用いてデータの関係性を表現するWeb上の枠組みのことです。例えば、「New Yorkの略語はNYである。」という例文は下記のようなXMLで表現されます。

<rdf:RDF
 xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
 xmlns:dcterms="http://purl.org/dc/terms/alternative">
  <rdf:Description rdf:about="urn:states:New%20York">
    <dcterms:alternative>NY</dcterms:alternative>
  </rdf:Description>
</rdf:RDF>

この例で、主語・述語・目的語はこのような意味になります。↓
主語： New York というモノが存在し、
目的語： NY という関連データがあり、
述語： 略語 という主語と関連データの関連性を意味している。

これだけだとちょっと分かりにくいかもしれませんが、表は、基本的に主語・述語・目的語の構造に落とすことができます。下記は宇多田ヒカルのWikipedia Infoboxの例です。「宇多田ヒカルの出生名は宇多田光である」ということを表しています。

この構造は、前回の記事で示した、モノ⇔関連データ⇔Visualizationの構造に合致しています。

ここの述語、要はプロパティの部分とVisualizationをうまくひもづけるルールを定義できたら、「扱うデータからVisualizationを発想する」ことができるのではないでしょうか。さらに言えば、ルールさえしっかりしていれば、データとプロパティさえ定義すると自動でユーザーが求めるVisualizationを生成することができるようになります。

規格化されたプロパティの定義

ただ、適切なプロパティと適切なVisualizationをひもづけるには、プロパティの規格化が必要です。色々な人が、バラバラのプロパティ名を用いたり、統一化されていないカテゴリをプロパティとして付与したりすると、自動化が非常に困難になります。

そこでRDFでは、Dublin Coreというメタデータ記述語彙集を用いることが推奨されています。Dublin Coreには、TitleやCreatorといった15の基本要素と呼ばれるプロパティ候補があり、これらを用いることで、情報に共通化されたメタデータ、プロパティを付与することができるようになります。

さらにこれを細分化したDCMI Metadata Termsというものも存在します。DCMI Metadata Termsでは、50個以上のプロパティが定義されています。 先程の「略語」という述語（プロパティ）は、DCMI Metadata Termsのdcterms:alternativeというプロパティに置き換えることができます。

考察

このようにWeb上でデータを構造化する動きは、Semantic Webという流れの一つです。Semantic Webとは、コンピュータが理解できるように、Web上の情報に意味を付与しよう、というプロジェクトです。Data Visualizationで扱うデータをSemantic Webに合わせて構造化する方法は、現状は、割と有効だと思われます。

ただ、Semantic Webは分かりにくい上に考え方が古いので、中々浸透していません。Data Visualizationを主軸に考える場合、もっと別なデータの構造化・規格化手法を考える余地は大いにあるとは思います。

参考

こちらに、Semantic Webの概念図が載っています。コンテンツにメタデータの付与→メタデータの語彙規格化→語彙の意味把握(Ontology)→論理式を用いて結論を導く(Rules,Logic Framework)→結論の証明(Proof) という流れはいい線いっている気がしますが、先は長そうですね。

先程、こんなニュース記事を見つけました。巷ではChromeOSのリリースで賑わっていますが、Microsoftも隠れてこんなものをリリースしていたようです。

» マイクロソフトによるウェブ閲覧の新しい実験「Pivot」

「ウェブをばらばらのページの集まりとしてではなく、“くもの巣ようなウェブ”として閲覧する方法だ」というコンセプトのようですが、下記のムービーを見る限り、この3つ↓の部分が特徴的な、半ブラウザ・半検索エンジンみたいなアプリケーションという印象です。

• 検索itemをグループ化（Collections）して、属性で絞り込んだり、ソートできたりするファセット検索
• ローカル・Webの境なく、透過的に検索itemを扱える（File、Webページ、画像、、、）
• リッチなVisualization

» Learn More about Pivot | Microsoft Pivot

個人的に2:30くらいの部分で出てくる”Wikipdeia Collections”がツボりました。便利かどうかは使ってみないとわからないですが、こうやってWebを整理して閲覧する方向性は面白いと思います。

そこでグループ化が肝となってくるようですが、Pivotではそれを”Collections”と評していて、3つのタイプに分けてitemグループを扱っているようです。数学の集合に近いイメージ。

• Simple Collections
• Linked Collections
• Dynamic Collections

まあ、Windows Vista以上、.NET Framework 3.5、IE8がないと動かない点は、なんというか”Microsoft”っぽいですが。。。

ただ、HTML5も本格的に流行り出していますし、今後もブラウザとWebアプリケーションの境が曖昧なコンセプトが出てきそうで、中々おもしろい領域だと思います。ちなみに、近々2つのHTML5関連のイベントに参加予定です。

» HTML5 Tech Talk on November 2009

» HTML5 のご紹介@Opera

今日はかなりマニアックなネタです。FirefoxやGoogle Chromeのエクステンションを開発する際に、Native Codeにアクセスする必要がある人用のエントリですｗ
※エクステンションとプラグインという言葉は明示的に分けます。前者はFirefox-AddonやChrome-extensionといった拡張機能、後者はFlash Player PluginやAcrobat Reader Plugin等のNative Codeとして実行されるPluginを指します。

エクステンションからNative Codeを扱う場合、javascriptを用いてNPAPI経由でプラグイン(C++クラス)にアクセスする方法があります。NPAPIはMozillaがメインで進めている、ブラウザがプラグインを実行する際に使うAPIです。

ただ、レファレンスを見ていただけるとわかるのですが、とても面倒くさそうｗ C++の時点でWeb系Developerには障壁が高いのに、Windowの制御やGUI表現等数多くのAPIを抑えないといけないのが非常に厄介。

そこで登場したのが、nixysa。これは純粋なC++コードからNPAPIに準拠するコード、ブラウザから利用するプラグインを生成してくれる便利なGeneratorです。これを用いればNPAPIコードの部分を無視してプラグインの開発が行えます。

説明よりもソースをお見せした方が早いです。helloworld.ccのような純粋なC++コードからプラグインを生成し、helloworld.html内のjavascriptから呼べるようになります。

helloworld.h

#include <string>

class HelloWorld {
public:
HelloWorld() {}
std::string GetHw();
};
#endif  // HELLOWORLD_H

helloworld.cc

#include <string>
#include "helloworld.h"

std::string HelloWorld::GetHw() {
std::string hw;
hw = "Hellow World";
return hw;
}

#ifndef HELLOWORLD_H
#define HELLOWORLD_H

↑「Hello World」を返すGetHwメソッドを持つHelloWorldクラスです。

helloworld.html

<html>
<head>
<script type="text/javascript">

function init() {
  var plugin = document.getElementById("plugin");
  var hw = plugin.HelloWorld();
  if (!hw) {
    alert("no plugin");
  }

  alert(hw.getHw());
}
</script>
</head>

<body onload="init()">
<object type="application/HelloWorld" id="plugin" width="0" height="0"> </object>
</body>
</html>

↑C++で書かれたHelloWorldクラスのgetHwメソッドの返り値をalertしています。<object>タグでHelloWorldプラグインの利用を明示しています。

本来ならNPAPIを使ったかなり長めのC++コードを書かないといけないのですが、こんな単純なC++コードだけでプラグインが開発できちゃうなんて、すばらしい！NPAPIのレファレンスをうんうん眺めなくても作れるというのが気楽。

なお、nixysaでプラグインを生成する際、PythonとSConsというMakeのようなコンパイラが必要です。SConsをapt-getでインストールする際、Python2.6だとエラーが出たので、Python2.5に戻すとインストールできました。実行環境はVMware Player上のUbuntu8.0.4です。sconsを指定のフォルダで実行するとlibhelloworld.soが生成され、これをブラウザのプラグインフォルダに追加するとプラグインとして使えるようになります。Windowsだとhelloworld.dllができるのかな？

sudo apt-get install scons
cd [PROJECT_HOME]/examples/helloworld
scons

プラグインを生成する際には、上記のC++コードに加え、SConsのMakefileにあたるSConstructファイルとC++クラスのIDLを用意する必要があります。そこが面倒くさいのですが、nixysaのパッケージに入っているサンプルプロジェクトの該当ファイルからパクればなんとかなりますｗ

今はSubversionで公開されているので、試してみたい方は下記のレポジトリから。

svn checkout http://nixysa.googlecode.com/svn/trunk/ nixysa-read-only

とは言え、まだまだ開発途上のプロジェクトなので、色々とバグがあったり、ドキュメントがほとんど無かったりしますので、ご注意を。

参考：
» Google Chrome/Firefoxプラグイン開発ツールNixysa登場
» NPAPI Plugins // Google Chrome Extensions: Developer Documentation

Ajax JavaScriptフレームワークのYUI (Yahoo! User Interface Library) が、最新版の2.8.0でHTML5ライクなクライアントストレージに対応していました。

YUI 2.8.0における注目の新機能は次のとおり。

• HTML5スタイルのローカルセッションストレージを提供するクライアントストレージメタコンポーネントStorage Utility (Matt Sinder氏提供)の導入。HTML5ストレージ、Google Gears、Flash共有オブジェクトをサポート
• さまざまな用途に適用できるプログレスバーコンポーネント ProgressBar (Daniel Barreiro氏提供)の導入
• 接続マネージャにおけるクロスドメインサポートの実現
• イベントデリゲーションサポートの実現
• カルーセルウィジェットにギャラリーモードを追加
• チャートにおける複数軸表示のサポート

» Yahoo! UI最新版登場、クライアントストレージ | エンタープライズ | マイコミジャーナル

細かく見ると色々と便利な機能がついていますが、個人的にクライアントストレージが時代に沿っているというか、HTML5が注目されだしている昨今、非常にタイムリーで目を引きました。

とその前に、ざっとHTML5のおさらい（といっても理解が不十分だったのでこれを機に調べたのですがf^^;）。

HTML5 まとめ

HTML5の注目点は、新しいマークアップ（タグの整理）と新しいAPIの対応です。

■ 新しいマークアップ

• 検索インデックスされやすいように構造化

  より構造的な文を生成できるように<nav>や、<section>といったタグが追加されました。

• マルチメディア対応

  <audio>や<movie>といったマルチメディアタグにより、javascriptやFlashを使わなくても音声・動画の再生ができるようになりました。

• Flashのような自由な2D表現

  <canvas>タグで簡単にJava Appletのような豊かな2D表現ができるようになりました。

■ 新しいAPI

• ドラッグ＆ドロップ
• 戻るボタン
• O3D

  ブラウザのプラグインとして提供されているO3Dをjavascriptから制御できるようになります。例えばGoogle Earthがこれを使ってブラウザ上で3D表現を可能にしていまいす。

• Geolocation

  1，2カ月程前に話題になりましたが、Firefox3.5でGoogle Mapを開くと現在地を表示できます。これはGeolocation APIを使っていて、javascriptから位置情報にアクセスできるからこそできる機能です。モバイルのブラウザのエンジンとして標準化しだしているWebkitでも実装が進んでいて、モバイル分野でかなり使われそうなAPIです。

• Web Storage

  javascriptでクライアントにデータを保存することができるAPIです。このときデータベースのようにSQLを用いてデータを保存することもできるようです。こちらにサンプルコードが記載されています。

• Web Workers

  バックグラウンドでjavascriptを動かせるようになります。いわばjavascriptスレッドです。繊細なUI処理に影響させることなく、重い処理を裏で行うことができるようになります。

• Web Sockets

  サーバサイドプロセスと双方向に通信することを可能にするAPIです。

HTML5のより詳しい記述はこちらへ↓
» グーグルが賭けるHTML 5の未来 － ＠IT
» HTML 5 ― HTML 4 からの変更点 W3C 草案 (Working Draft)

YUI2.8.0 Storage Utility

さて、今回のYUI2.8.0のStorage Utilityですが、HTML5のWeb Storage (FireFox 3, Safari 4, IE 8以上必要) に対応しているだけでなく、HTML5未対応のブラウザのためにGoogle GearsやSWFファイル(Flash Player 9.0.115以上必要)を使って本機能を実装しています。もちろんセッションでの保存にも対応しています。

YUIのサンプルで動いているのを確認しました。ウィンドウを閉じても文章が保存されていて感動。
» Simple Storage Example — Saving In-Progress Text Entry

コードもstorageEngineオブジェクトを用意してゲッター/セッターで入れるだけというシンプルさ。色々な場面で使う機会が出てきそうです。

var storageEngine = YAHOO.util.StorageManager.get(
  YAHOO.util.StorageEngineGears.ENGINE_NAME,
  YAHOO.util.StorageManager.LOCATION_LOCAL,
  {
    order: [
      YAHOO.util.StorageEngineGears,
      YAHOO.util.StorageEngineSWF,
      YAHOO.util.StorageEngineHTML5
    ],
  force: false
}
);
～中略～
storageEngine.getItem("simple-storage-textentry");
storageEngine.setItem("simple-storage-textentry", YAHOO.util.Dom.get("textentry").value);

なお、容量としてHTML5は5～10MB、Google GearsはSQLiteを使用していて最大2GB、SWFは100KBまで利用できるようです。

ちょっと新しい感じの2次元グラフを発見したので紹介します。

» What World MPs Really Make

ようは、「各国の政治家がどれだけ給料をもらっていて、どれだけ良い政治をしているか？」というグラフです。

評価軸として、以下の2軸を使っているのですが、その表現方法が面白い。

• 一人当たりGDPに対する政治家の年収の倍率（2倍、4倍等）
• 国の競争力の指標 - DCI(The Democracy Index）やHDI(UN’s Human Developing Index）等

年収は中心から離れれば離れるほど割高で（同心円）、国の競争力は右側の黄色いラインから反時計回りに離れれば離れるほど低い、と表現しています。

今はG20、つまり先進主要国だけ黄色くラベルづけしています。↓
日本はその中でも、競争力はそれなりで、政治家の給料はだいぶ割高と言うことができます。（一人当たりGDPの6.12倍）

一見してどういう軸なのか、説明を見ないとわからないグラフですが、普通の縦横の2次元グラフで表現してしまうと、政治家の給与と国の競争力の「相関関係」が目立ってしまいます。

この指標では、相関関係よりも（実際、相関関係は無いようですし）、国同士の比較の方が重要で、 「比較的割安で競争力の高い国はCanadaやAustraliaだ。ではどんな政治システムなのか？」といった気づきが得られやすいグラフだと感じました。

» How Much Are Politicians Around the World Paid, and How Effective Are They?

昨今、新しいインターフェースを採用したアプリケーションが多く出てきている印象があります。先日Blogでも紹介したGAPMINDERですが、こういった統計データをグラフ化して公開するサービスは、最近になって注目を集めている気がします。

データが溢れてしまって、次はそれを「いかにわかりやすくまとめて表示するか」に焦点が向うのは自然かもしれませんね。そこで今回は、どういったアプローチがあって、具体的にどんなアプリケーションとして実装されているのか、調べてみました。

【目次】

• ２D（プロバイダーがデータを提供）
  • 莫大なDBからデータを提供するアプリケーション
  • 関係性の視覚化
• ２D（ユーザーが自分のデータを表示）
  • Web上の描画支援
  • 脳内の視覚化
• 3D

■2D（2次元）

大きく分けて２Dと３Dの方向性があって、２Dはいかに2次元ブラウザ上でうまくデータを表示するか、というアプローチになるでしょう。２Dはさらに、コンテンツプロバイダー側のデータをグラフ化して提供するアプリケーションと、ユーザーのデータをWeb上でわかりやすく表現するアプリケーションの二つに分類できます。

■２D（プロバイダーがデータを提供）

○莫大なDBからデータを提供するアプリケーション

Wolfram Alpha（画像↓1枚目）と最近開発が発表されたGoogle Squared（to Techcrunch）は（画像↓2枚目）有名ですよね。前者は１０TBもの統計データを、検索キーワード（SQLのようなクエリ？）に応じて図を示してくれるアプリケーションで、5月にリリース予定です。あの数学アプリケーションMathematicaの作者Wolframのプロダクトとしても有名です。

一方、Google Squaredの方ですが、下記の画像を見るとわかるように、Web上の検索結果をグリッド上に表示して、それぞれの結果を比較できる、というインターフェースになっています。莫大なWebデータを保有するGoogleならではのサービスですね。Google Analyticsがアクセス解析の会社を一掃したのように、巷のバーティカルサーチエンジンを恐怖に陥れるのでしょうか。

また、先日紹介したGAPMINDERも統計データの表示なので、こちらのアプローチに入ります。

→検索エンジン系
扱うデータが膨大なため、検索エンジンの様相を呈していくのではないでしょうか？となると、データの表示は主に今までなされてきたようなグラフ化に落ち着きそうです。それよりも、検索クエリの構文とか、検索方法といったユーザーインターフェースに改善の余地が出てきそうです。

○関係性の視覚化

また、検索エンジン系のアプリケーションでは対象としていない、データ同士の関係性を示そうとする試みもあります。一番わかりやすいのはmixigraphではないでしょうか？ノードとノードがあってその間をつなぐ線があるという図は、実生活ではよく目にしますが、なかなかWeb上では目にしません。

ただ、関係性の抽出という意味では、一つ有名な領域があります。

→レコメンドエンジン系
レコメンドエンジンです。主なレコメンドエンジンは、商品同士の関連を計算して、類似商品を表示します。サイジニアのデクワス（画像↓）というレコメンドエンジンでは、ユーザーの指向から類似コミュニティを見つけて、そのコミュニティを利用して関連商品を出しているようです

。

結局mixigraphも、共通の知人や関連性の高い友人を見つるのに使うのが主な目的だと思うので、ある種レコメンドエンジンと言えますね。多くのレコメンドエンジンもmixigraphのような、ビジュアル的アプローチができる気がします。

■２D（ユーザーが自分のデータを表示）

○Web上の描画支援

Google Visualization APIは、ユーザーのデータをWeb上に表示する際に便利なAPIです。仕組みは簡単で、データを投げるとグラフの画像が返ってきます。また、Google Analyticsやなかのひと、といったアクセス解析ソフトも、ユーザーのデータをわかりやすく表示するアプリケーションと言えばこちらの分類ですね。

→API系
今後も自分のデータを簡単に、かつ分かりやすく示したいというニーズは増えてきそうですし、こういった描画支援系のサービスはAPIやASP/Saasといった方向で出てくるのではないでしょうか。

○脳内の視覚化

Mindmapに代表されるような、脳を整理するアプリケーション群です。これはこれで別エントリでまとめたいほど多くのアプリケーションがありますが、基本はツリー構造のアプリケーションですよね。個人的にはFrieve Editor（画像↓）というのがオススメです。普通のMindmapではツリー構造しか表現できませんが、こちらは多対多の関係を表現できます。

→認知系
Webに限らず、多くの形が考えられそうな領域です。スライドをインタラクティブに作れるツールとか、ワークフローに特化したアプリケーションとか、それこそ無限に考えられます。けれども、人間の脳をいかに効率的に表現するか、という領域に収まる気がするので、認知系とまとめてみました。

■3D（3次元）

上記のグラフ化と一線を画すのが、３Dの方向です。２Dの、「人間が紙の上にまとめる」という考え方が、３Dでは「人間がその中で行動する」という考え方になり、よりインタラクティブなアプリケーションが出ています。

iFree3D（to Techcrunch）（画像↑）は立方体空間の中で、Webブラウジングするアプリケーションで、サイトや画像といったアイテムを、より直観的にいじれるように３Dを活用しています。ま

た、FoxTab（画像↓）というFirefox Addonも、今開いているサイトを、３Dで表示してくれます。

→ブラウザ系
これらのアプリケーションに共通しているのが、ブラウザあるいはブラウザ支援ツールということです。より実世界に近い形でWebを動き回れたらいいんじゃないか、というのは自然なアプローチはな気がします。AR（拡張現実）も注目を集めていますし、IE vs Firefox vs その他Webブラウザ、という構図が大きく変わりそうな気配がします。

————– まとめ —————

こうみると、本当に分野横断的に色々なアプローチ、アプリケーションがありますね。とはいえ、今回まとめたものだけでも、一通りのトレンドを網羅しているように思えます。つまり、新しいイノベーティブなアプリケーションには、イノベーティブなインターフェースも必須になりつつある、ということなのではないでしょうか。

【参考】
こちらのブログ↓では、扱うデータによってでData Vizualizationの視覚化アプローチを7個にまとめています。

» Data Visualization: Modern Approaches | Graphics | Smashing Magazine

• Mindmaps
• Displaying News
• Displaying Data
• Displaying connections
• Displaying Web-sites
• Articles &  Resources
• Tools and Services

　先ほどAmazon Web Servicesから新しいサービスがBetaリリースされていましたね。

　その名も「Amazon Elastic MapReduce」
 

MapReduceというのは、Googleの検索技術を支える分散処理アーキテクチャで、ようは「処理を細かいタスクに分けて、めちゃくちゃたくさんのPCに独立して処理させることで、スパコン並の能力を発揮させられる構造」という感じでしょう。
Amazon Elastic MapReduceのDemoはこちらから見れます。 
（Demoでは、ある文章の単語出現数を計算しています。） 

MapReduceを実装しているフレームワークで一番有名なのが、オープンソースのHadoopです。
商用化など、Tech界隈で話題のフレームワークなのですが、そもそも大規模分散処理用のインフラ技術なので人目につきにくく、ビジネス界隈では見慣れない名前ですよね。

言ってしまえば、「大規模分散処理が身近に！」ということなのですが、ビジネス的にどれくらい身近になるのか未知。
そこで、ちょっと計算してみました。（ものすごい大雑把な計算ですf^^;）

———— 計算 ———–

仮に、セットアップ・維持が３人日、処理が１台のサーバーで7日かかるシステムがあったとします。

するとそれにかかるコストは、だいたいこんな感じでしょうか。

　　（セットアップおよび維持中）の人件費＋10日分のサーバー費用(AmazonEC2.small：1台とS3：1台）
　　＝3人日×4万円（人月80万円）＋（月8000円÷30×11日＋1000円）
　　≒12.7万円 

それが、このAmazon Elastic MapReduceを使うと、だいたいセットアップ・維持に1人日、サーバーを４台使って２日くらいになると思います。すると、

　　１人日×４万円＋８０００円÷30×2日×4台+1000円+MapReduce使用料：1000円くらい？
　　≒4.５万円

コストがおよそ1/3くらいになりますね。
もちろん前者の例ではAmazon EC2を使って、サーバー代をかなり浮かせているため、実質は２０万円以上かかると思います。

———— 計算 ———–

小規模な処理だとコスト削減はこれくらいですが、サーバーを数百代、数千台使う処理だと雲泥の差に なるでしょう。

かつ、これだけ簡単に使えるようになると、多くの業者がこのサービスを使ったソリューションを提供することが考えられます。
昔なら１００万円以上したECサイトの開設が、今や１０万円以下で作れるようになり、販売のビジネスチャンスが大きく広がった、くらいのインパクトにはなりえそうですね。

もちろん重要なのは、この高性能演算システムを安価に使えて何をするか、なのですが。
今は下記くらいしか用法が思いつきません。。。

• 大規模なクローリングとインデックス化が必要な検索エンジン
• 機械学習によるレコメンドエンジン
• データマイニング
• ログファイルの解析
• 科学的なシミュレーション
• 生物学的な実験

まだまだ検索・レコメンドエンジンやアカデミックな領域を出ない分野ではありますが、逆にいえばものすごいチャンスでもあるので、何か面白いプロダクト・サービスを作る会社が出てくるのに期待ですね。

もちろん弊社でもバリバリ狙っていきますがｗ

なお、MapReduceの技術的説明は、id:nayoyaさんのブログが詳しいです。

※追記　Techcrunchでも紹介されていました。