CIOを目指しつつの8makiのアレ

パラパラと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が珍しいですね。

8maki Web, survey, テクノロジー Data Visualization, Google, Google Chart Tools

以前、とある勉強会でお会いした、東大の「無駄学」で有名な西成先生から新書の献本をいただいたので、読んだ感想を書かせていただきます。

『シゴトの渋滞、解消します! 結果がついてくる絶対法則』

流体力学を学び渋滞学を研究されている西成先生ならでは、仕事のライフハック的なことを「流れ」で説明しようという感じの本でした。
章立ては以下。

1. 個人の渋滞、解消します！
2. 部内の渋滞、解消します！
3. 社内の渋滞、解消します！

正直申し上げると、2章までは普通のことを渋滞学という切り口で書いているだけで、あまり面白さを感じませんでした。
普段からライフハックやら啓蒙本やら読んでる人には物足りないかも。

ただ、3章は別です。

会社組織をどう円滑に運営していくか、というのが題目なのですが、西成先生個人のお話を中心に書かれています。

東大で順調に研究生活を送り、トップジャーナルに載ったにもかかわらず就職口もなく、ストレスで顔面マヒ、運よく滑り込んだ山形大でも予算が無くて発表が年2回くらいしかできない。そんな中、社会とつながる自分独自の研究領域を発見し、東大に戻った後、ケルン大学の一年研究留学する機会をもらい、そこで一生の研究仲間と出会った。

要約するとこんな感じなのですが、テレビに出たり本を出したり社会的な研究者のパラダイム転換を垣間見ることができる貴重なエピソードでした。
バリバリ研究一筋で研究室から出ない研究者のキャリアは読んだりするのですが、実際仕事が経営コンサルみたいな研究者の方の生き様はとても新鮮でした。

「複雑系」に対する全体視野アプローチ

3章の最後には組織の話というよりかは、「複雑系」の話が中心になっていました。
いや、組織も複雑系における個の集合という点で同じ。

そのときに取られる物理学ならではの通常のアプローチというのは・・・・「対象を単純な要素に還元して、モデル化してそのモデルを解くことによって、対象を理解する」という方向でしょう。
～
生き物については、部分の単なる総和は全体にはならないわけです。物理的にいえば、部分と部分が相互作用をしているから、全体は部分の総和にはならないのです。
だから、「相互作用をしていない要素」「要素と要素の相互関係がかなり弱くなるところ」まで全体をうまく分割できれば、そうした要素のみをあつかっても、全体を理解することができるのではないか？
～
要素単位を変更させながらも、全体の因果関係を理解するために挑戦してゆく。

単に部分に分割するのではなく、その因果関係に着目して全体の「流れ」を知る。
渋滞学ならではの観点ですね。

複雑系において全体から物事を見ることの大切はよく説かれますが、新しい西成先生なりのアプローチを提案されて妙に腑に落ちた気がしました。

8maki survey, 書評 渋滞学, 西成活裕

(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

8maki IT, proposal, survey, テクノロジー, デザイン Data Visualization, Flash, Information Presentation, Javascript

前回、モノをある切り口で捉え、それを適切な表現方法にあてはめて考えるアイディア出しスタイルと、モノの関連データに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) という流れはいい線いっている気がしますが、先は長そうですね。

8maki IT, proposal, survey, テクノロジー, デザイン Data Visualization, Dublin Core, RDF, Semantic Web

(Data Visualization is the same as how to organize ideas [en])

先日、元サイボウズでアメリカでLUNARRを立ち上げられた高須賀さんにお会いしました。そこで、最近研究している Data Visualization について発想が沸いたので書き残します。各データの種類（スキーマ）から自動で適切な Visualization 方法を選択して表現する、という研究です。

高須賀さんのお話

「アイディアをひねり出すとき、いきなりすごいアイディアを考えるよりも、切り口を見つけてそこから発展させた方がいい。アイディアと切り口のバランスが取れた位置が一番エネルギーがある。」ものすごく簡単にまとめるとこういうお話でした。

つまり、ものごとを構造化してとらえ、ツールを使って着想を得た方がアイディアを出しやすい、ということ。

例： 新しいレーザーを考える。レーザーは点であり直進する。点の反対は面で、直進の反対は曲がる。これらを2次元グラフにプロットし、各象限に何が当てはまるか頭をひねる。面・曲がるという象限、つまりどこにおいても光を反射させ、面に映し出すという切り口から、スクリーンの前に置かなくてもよいプロジェクターというアイディアが生まれた。

このとき、切り口からアイディアをひねるために用いたツールが、高須賀さん曰く2×2というもの。要は2軸ある2次元グラフで昔私もマトリックスとも呼んでいました。構造化してアイディアを得る・まとめる方法は以下の高須賀さんの記事が分かりやすいです。

» 事業を考える切り口 – Toru Takasuka の起業・経営ブログ

» 新しい concept のはじまり – Toru Takasuka の起業・経営ブログ

松岡正剛の編集学校で教える編集術

こういった発想の訓練、実は以前にも受けたことがありました。松岡正剛の編集学校で体験授業です。

割と戦略コンサルのケーススタディ訓練に似ているのですが、MECEに限らず、もっと自由に発想する、ということが目的で楽しかったのを覚えています。そこでいただいたパンフレットに、6個のツールが載っていました。

1. Combination (一種合成型)
2つのものを合成して新しいアイディアを生み出す。

2. Triple Jump (三間連結型)
ホップ・ステップ・ジャンプ型で発想を展開。大・中・小や過去・現在・未来などの切り口もあり。

3. Branching (二点分岐型)
一つのものを2つに展開。この例ではブランドを切り口に展開した。

4. Trinity (三位一体型)
三位一体型、3点セットで考える発想パターン。3Cなどが代表例かも。

5.1 All Around (二軸四方型1)
Branching型の枝が2つ増えて、四方へと分岐する発想法。

5.2 2×2 (二軸四方型2)
2軸を決めてそれぞれのマスに何が入るか考える。マトリックス型。

※英語は勝手に私が変換したものです。

Data Visualizationとの関係

さて、本題ですが、切り口をツールにあてはめアイディアを得るという発想法と、Data Visualization は、頭の中では同じ構造で処理しているのではないか？というのが今回のパラダイム・シフトでした。

どちらも「分かりやすく考える」「分かりやすく表現する」ということで、頭の使い方が非常によく似ているような気がします。Data Visualization というと Computer Science チックですが、何か考えを図にまとめるときのことを考えると分かりやすくて、まず扱う対象があって、それを一つの側面で切ったデータ群があり、それをどう Visualize するか？というのは、高須賀さんのおっしゃる構造的な思考と同じプロセスを踏むのではないでしょうか。

普通 Data Visualization を調べる場合、どういった Visualization があるのか、どうプログラミングで表現するのか、といったことに目が行きがちになります。オライリー本の”Visualizing Data“もアルゴリズム中心の本でした。

そこを、扱うデータから Visualization を発想するというパラダイムに変換することで、おもしろい表現ができるだけでなく、説得力のある Data Visualization 手法を考案できる気がしました。

参考までに、こちらの図↓は様々なチャートを目的別に一覧表示しています。チートシートとして使うと便利かも。

» Chart Suggestions – A Thought Starter

p.s.

オフィスにお邪魔した際、VentureBEATの勝屋さんもいらっしゃいました。Blogに写真を載せてさらにリンクまで張っていただきました。ありがとうございました！最強のコネクターと言われるだけのことあって、超人懐っこいでしたｗ

» 人のつながりは無限（∞）につながる – 勝屋久の日々是々

Ben Fry, 増井 俊之 (監訳), 加藤 慶彦 定価 : ￥ 3,780 発売日 : 2008/12/01 出版社/メーカー : オライリージャパン おすすめ度 : (6 reviews) 可視化の一つの手段としてProcessingの概要を知りたい人に 情報の可視化入門 目からウロコが。。。 日本人の本より読みやすい 既存のマッシュアップAPIを使うのとは違ったWeb情報の楽しみ方

8maki IT, proposal, エンジニア Data Visualization, 松岡正剛, 編集学校, 高須賀宣

先程、こんなニュース記事を見つけました。巷では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

8maki Web, survey, テクノロジー Faceted Search, HTML5, Microsoft, pivot, ブラウザ, 検索

会社のスクリプト言語がPythonに統一されて、今月からPythonをメインに使っているのですが、MySQLに接続する際なぜかものすごくメモリを食う時がありました。その備忘録。

最近技術ネタが続いていますがf^^;

結論から先に書くと、MySQLdbのfetchallの部分を下記のように書きなおすとメモリリークが起きなくなりました。

sql = "SQL文"
con= MySQLdb.connect(db = db, host = host, user = user, passwd = passwd)
cur = con.cursor()
cur.execute(sql, params)
result = cur.fetchall()

↓

sql = "SQL文"
con = MySQLdb.connect(db = db, host = host, user = user, passwd = passwd)
con.query(sql)
r = con.store_result() # use_result()も可
result = []
while(True):
　　row = r.fetch_row()
　　if not row: break
　　result.insert(0, row[0]) # 初めにデータを挿入してリストの再構成を防ぎ高速化！
con.close()

» ueBLOG | PythonをつかってMySQLの巨大な結果を返すselect文を処理する
主にこちらのブログを参考にしたのですが、cursorを使わず直接connectからクエリを投げるようにしています。
大きな違いは、一度にデータを取得するのではなく、1行ずつ取得するようにしている、ということだと思います。6～9行目で取得する行を一つ一つリストに格納しています。

なお、4行目でstore_result()を使っていますが、use_result()も可能で、use_result()を使うとデータをサーバに保持しそこから一行ずつ取得するようになるので、よりメモリの消費が抑えられる、気がしますf^^;
確認していないので何とも言えないのですが。

SQLAlchemyだとメモリリークしない、と聞いて試してみたのですが、ORマッピングで導入が面倒くさそうなうえに、生SQLを叩く際は結局MySQLdbを使うようで問題は解決しませんでした。
大量のデータをMySQLに保存しそこから全文検索（エンジンはSenna）でデータを引っ張る処理を行っていて、ある特定のSQLを書く必要があったので。

参考：
» MySQLdbのメモリー・リーク – スコトプリゴニエフスク通信
» [Python] MySQLdbのメモリリーク (それなりブログ)

8maki IT, proposal, エンジニア memory, MySQL, MySQLdb, python

今日はかなりマニアックなネタです。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

8maki survey, テクノロジー browser plugin, C++, Javascript, nixysa, NPAPI

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まで利用できるようです。

8maki Web, survey, テクノロジー HTML5, Javascript, Web Storage, YUI

前回、”あなたがウォッチすべき世界的テクノロジーベンチャー50”というエントリで、日本企業が入ってない！ことを嘆いていましたが、探せば色々出てくるものです。

知ってる限りまとめてみます。もし情報があればコメント欄で教えてください！

■ベンチャー

• Creative Commons
  Joi ItoさんがCEOに入っています。Itoさんの本業はVCで、数少ない世界レベルの日本人だと思います。

• 株式会社ガーラ
  ヘラクレスに上場しながらも海外売上比率が８０％（2009.03)と、うまく海外に進出できている数少ない日本製ITベンチャーです。オンラインゲームがメイン事業です。

■ベンチャーキャピタル

• DCM(Doll Capital Management)
  David茶尾さんが創業されたVCで、数千億レベルのファンドを運用していて、まさに世界的VCです。他にも伊佐山さんや本田さんという日本人の方もいらっしゃって、最近では日本支社も本格的に操業を開始したようです。
  （最近のDealでは、レコメンドエンジンのサイジニアに数億規模で投資しています。）

• Global Catalyst Parners
  三菱商事でアメリカ新規事業を経験された大澤さんが創立されたファンドです。JTPA等、シリコンバレーの日本人コミュニティを運営されていることからも、現地に行ったらまずお世話になる方かもしれません。

• Globespan Capital Partners
  ベースはアメリカのボストン・パロアルト（シリコンバレー）に置きながら、東京オフィスも構える世界的VCです。日本人では、栢森さん、前田さん、金河さんが主にアジアを中心に投資を行っているみたいです。

• Worldview Technology Partners
  アメリカにベースを置く、テクノロジーベンチャーへの投資に特化したVCです。国際投資チームに、田中さんと渡邉さんがいらっしゃいます。

• Infinitiy Venture Partners
  こちらは日本をベースにしながら、中国を始めとしたアジアを中心に投資を開始されるようです。グロービスで多くのファンド運営に携われた小林さんが創立し、モバイルの事業会社を成功させた小野さん、Adobeで投資戦略を練られていた田中さんというチーム体制です。

• TEL Venture Capital

8maki survey, 企業 ITベンチャー, VC, ベンチャー, ベンチャーキャピタル, 国際的