先週末、東京工業大学で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に展示できるような新しい何かをあなたも作ってみては？

最近、金融メディアの開発を行っていて、BloombergやWallstreet Journal、日経などのWebビジネスメディアを研究しています。
そんな中、ペーパープロトタイピングの練習に、BloombergのWebを模写していたら、中々気づかない様々な細かい試みが垣間見えてきました。
コンテンツの充実から新しいビジネスモデルの構築まで、日本のメディアでは中々見られないチャレンジをまとめてみました。
ちなみに、媒体資料によると、月間UUは1400万人。(日経は総訪問者数:1566万人/月）

• あと読みできるQueueという機能
• 各コンテンツ毎にスポンサーを募る
• 読者からのFeedbackを積極的に受け入れる
• ニュースを見ている人に直接求人
• 簡単なテキスト広告も直接出稿
• 関連動画を自動で表示

あと読みできるQueueという機能

Topページを見ると、全ての記事タイトルの右側に＋というアイコンがついています。
これ、押すと■アイコンに変わります。
＋アイコンを押された記事は、あと読みリストに追加されて、右側のBボタンから開くパネルからチェックすることができるようになっています。

Instapaper や Read it later といったあと読みアプリはありますが、メディア側がこういう機能を実装するのは斬新。

各コンテンツ毎にスポンサーを募る

昨今、メディアはいかにPVを増やしていかに広告収入を増やすか？ということに躍起になっていると聞きますが、BloombergはWebメディアの新しいビジネスモデルを提案しています。
それは為替コーナーや起業家向けカテゴリ等、各コンテンツ毎にスポンサーを募るというモデル。
たしかに、確実にそのコンテンツに興味がある人に訴求できるという意味では効率的なのかも。
これらのコンテンツの詳細ページに飛ぶと、これらのスポンサーのディスプレイ広告が出てきたりします。

読者からのFeedbackを積極的に受け入れる

Topページの下部に、[+] という表記があります。
それをクリックすると、こんなポップアップが出てきて、詳細にFeedbackを送ることができます。
このポップアップ、OpinionLab という会社が提供している模様。
ユーザーを見ているっていうのも好印象ですが、積極的に外部のプロダクトを取り入れてみるっていう姿勢がいいな〜

ニュースを見ている人に直接求人

メディアと求人は昔から相性が良いようで、よくブログでも求人欄を見たりしますが、BloombergではIndeedの求人プラットフォームツールを利用しているようです。
これ、その場で求人情報を検索できるだけでなく、求人を出すこともできます。
30日で$250ということで、かなり割安。
Bloombergを読んでいるかなりコアなリーダーにアプローチできる効率的な求人方法かも。
現在、25000件もの求人がPostされてます。これはすごい。

簡単なテキスト広告も直接出稿

求人だけでなく、テキスト広告もその場で出稿できるようです。
industrybrain という会社を使っている模様。

関連動画を自動で表示

最近、日本のメディアでもPVアップのために「関連ニュース」を出すエンジンを利用していたりしますが、関連動画の自動生成ははじめて。
たしかに関連ニュースってテキストだけで中々クリックされにくいイメージがあったのですが、動画であればよりクリックされやすそう。
Taboolaという会社がそのエンジンを提供しているようです。

以上、Bloombergの様々な試みを紹介してきましたが、これからメディアも大変革を迎える時代。

既存のビジネスモデルの脱却から、コンテンツの充実など課題は多そう。
そんな中、チャレンジをし続けるBloombergはどういったイノベーションを出してくるのか、今後が楽しみなメディア企業です。

※もちろん、本業のBloomberg端末事業がうまくいっているという点も、他のメディアと一線を画している気がします。

最近、「小さなチーム、大きな仕事―37シグナルズ成功の法則」という本で話題の、37signalsのブログで、Web系ハイテク企業の従業員一人当たりの売上高ランキングを出していました。

» Ranking tech companies by revenue per employee – (37signals)

The Calacanis/DHH discussion touched on the idea that web companies should pay more attention to unique visitors per employee. The theory: That ratio forces you to get away from talking sheer size/traffic and instead focus on efficiency.

この記事で、Web企業はもっと従業員一人当たりのユニークユーザー数に注意を払うべきだ、という提案がされています。
はじめはAlexaのランキング順位で比較していたみたいですが、AmazonとGoogleのトラフィックはそもそも中身が異なるということで、年間売上を比較していました。

よく自分の給料の4倍は稼げ、と言われたりしますが、Craigslistは神としても、一人当たり1億円くらい稼いでいるGoogleやAmazon、Facebookは非常に効率のよい体質なのが分かります。

では、日本企業はどうなのか？

日本企業は事業効率が悪いという印象があったのですが、実際のところどうなのか、同じ指標を用いて調べてみました。

日本のWeb企業の従業員一人当たり売上高ランキング

（売上高や従業員数はYahoo!ファイナンスから抜粋）

時価総額が100億円を超えるWeb系企業の、従業員一人当たりの売上高ランキングをグラフ化しました。
（理想的には営業利益で比較すべきですが、上記米国企業と比較するために売上高でランキングをしています。）

示唆

・グリー、DeNA当たりは、最近のびっくり決算から見ても当然のように思えたが、意外にヤフーが健闘、一休が少ない従業員ながら大手に引けを取らない売上を上げる良い企業体質っぽい。

・たまにGoogleが「一人当たり1億稼いでる！」というのをニュースやブログで目にするが、日本企業と比較してもそこまで非現実的な数値ではない。
（Googleのすごいところは、従業員が19,835人もいる、ということかもしれません。）

・向こうのYahoo!やebayと比較しても、圧倒的に日本企業が劣っているというわけではない。
もちろん業界の平均を比較してみないと結論は出ませんが、向こうのメジャーな企業と比較してもトントンな企業も多いというわけです。

・とは言え、Craigslistのような一人3億円稼ぐようなバケモノ企業は、今のところ日本には無い。
上場していない企業もあると思いますが、さすがに数十億稼いでいて従業員数が１桁、っていうのはあまり見たことがありません。
※ngi groupが従業員を８人としていることもあり、数値上そのような構造になっていましたが、売り上げの多くが投資から来ていそうな点と、一気に従業員を減らした点から例外だと思われます。

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

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

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

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

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

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

ただ、3章は別です。

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

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

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

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

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

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

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

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

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

posted with amazlet at 10.02.14

西成 活裕
朝日新聞出版

Amazon.co.jp で詳細を見る

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