CIOを目指しつつの8makiのアレ » Javascript http://blog.8maki.jp 俺と周りの変態リタラシーを埋める Sat, 28 Jan 2012 04:05:04 +0000 http://wordpress.org/?v=2.8.4 ja hourly 1 グラフだけじゃない、Data Visualizationフレームワーク集 http://blog.8maki.jp/2010/01/javascript-data-visualization-library-not-only-for-charts.html http://blog.8maki.jp/2010/01/javascript-data-visualization-library-not-only-for-charts.html#comments Mon, 18 Jan 2010 23:56:01 +0000 8maki http://blog.8maki.jp/?p=585

(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

dv-js-library-simile

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

dv-js-library-protovis

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

» ProtoVis DEMO

Prefuse Flare (Flash)

dv-js-library-prefuse

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

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

» Flare DEMO

Style Chart

dv-js-library-style-charts

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

» Style Chart Editor(DEMO)
» Style Chart Gallery

CanViz

dv-js-library-canviz

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

» CanViz DEMO

Axiis (Flex)

dv-js-library-axiis

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

» Axiis – Browser Statistics DEMO

Infovis

dv-js-library-infovis

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

» Infovis DEMO

RGraph

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

» RGraph DEMO

]]> http://blog.8maki.jp/2010/01/javascript-data-visualization-library-not-only-for-charts.html/feed 0 FirefoxやChromeのPlugin開発に便利なnixysa http://blog.8maki.jp/2009/10/nixysa-npapi-gluecode-genereator.html http://blog.8maki.jp/2009/10/nixysa-npapi-gluecode-genereator.html#comments Thu, 08 Oct 2009 16:42:49 +0000 8maki http://blog.8maki.jp/?p=523

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

]]> http://blog.8maki.jp/2009/10/nixysa-npapi-gluecode-genereator.html/feed 0 AjaxフレームワークのYUI2.8.0がHTML5ライクなクライアントストレージに対応 http://blog.8maki.jp/2009/09/yui2-8-0_html5_like_localstorage.html http://blog.8maki.jp/2009/09/yui2-8-0_html5_like_localstorage.html#comments Thu, 24 Sep 2009 00:21:51 +0000 8maki http://blog.8maki.jp/?p=487

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

]]> http://blog.8maki.jp/2009/09/yui2-8-0_html5_like_localstorage.html/feed 0 最新ブラウザに見る昨今のJavascript事情 http://blog.8maki.jp/2009/02/newbrowser_and_javascript.html http://blog.8maki.jp/2009/02/newbrowser_and_javascript.html#comments Tue, 17 Feb 2009 03:38:20 +0000 8maki http://blog.8maki.jp/?p=307

先日、会社で勉強会を行いました。 私がモデレーターを仰せつかったので、最近ひたすら実装に使っているJavascriptについて調査。

下記の動画を元に、各ブラウザの新バージョンの比較と、昨今のJavascrip事情についてシェアしました。

前半では、各ブラウザの新バージョンについて比較しています。簡単に表にまとめてみます。↓

  リリース 新機能
Firefox 3.1 2009年春
  • パフォーマンスの向上
  • ビデオ/オーディオタグの追加
  • プライベートモードの追加
Safari 4 OS X 10.6 に合わせて
  • パフォーマンスの向上
  • デスクトップアプリケーションとしての機能向上
  • ACID3にパス
  • Revampled dev tools の追加
Internet Explorer 8 2009年初旬
  • バックグラウンドでの処理
  • Web Clips機能の追加
  • タブごとにプロセスが動作
Opera 10 2009年予定
  • ACID3にパス
  • ビデオ/オーディオタグの追加
Google Chrome 2008年11月に1.0リリース
  • プライベートモード（シークレットモード）
  • タブごとにプロセスが動作

注目すべきは、IE8 もタブごとのプロセス動作になる、ということでしょうか。 加えてFF3.1 とOpeara10で、ビデオ/オーディオタグがサポートされます。そうするとFlashで動画を見る必要もなくなるかもしれませんね。

Firefox 3.1では、オープンソースのオーディオコーデック「Ogg Vorbis」およびビデオコーデック「Ogg Theora」に対するネイティブサポートが追加される見通しだ。また、新版ではこのほかに「HTML5」がサポートされるもようで、これによりFirefox 3.1では音声および動画のhtmlタグが機能するようになる。

» 「Firefox 3.1」ベータ版リリースは8月19日を目標に–「HTML5」をサポート:ニュース – CNET Japan

 注目の速さに関しては、以下のようなグラフで説明されていました。ちなみに3種類のツールで出した結果のひとつです。（見にくいですが、Chrome b1 > Safari 4.0 > Firefox 3.1 > Firefox 3.0.1 > Safari 3.1.2 > Opeara 9.5.2 > IE 8b2 > IE 7 となっています）

browser_speed

また、動画の後半では、新しく導入されるJavascriptの新機能（新関数）の紹介がされています。

  特徴 対応ブラウザ
postMessage 別のiframeに対してメッセージを送れる。 全ブラウザ
Cross-Domain XHR クロスドメインでも扱えるXMLHttpRequest FF3.1/IE8
Class Name getElementByClassNameによるエレメントの取得 Safari3.1/FF3.0/Opera9.6
Selector API document.querySelectorAll(”div p”)のようにエレメント取得を簡易化 IE8/Safari4/FF3/Opera10
Traversal API エレメント間の移動の簡易化（.nextElementSiblingなど） 全ブラウザ
HTML5 Dragging HTML5のドラッグ＆ドロップイベントをサポート FF3.1
Bounding getBoundingClinetRectメソッドにより、エレメントの絶対位置を取得 IE
Javascript Threads Javascriptのスレッド化  

特筆すべきはやはりJavascriptのスレッド化ですが、うちの社長いわく、「Javascriptをスレッド化したらDOMの処理とかめんどくさそうだよね」とのこと。ロックでもかけたりするのでしょうか。本動画の例でも、３D画像の描画を使っていて、DOMの扱いは触れられていませんでした。（もしかしたら口頭でしゃべってたかも）

とはいえ、Javascriptも日々進化しており、本格的にJavascriptを中心としたブラウザの開発が進んでいることが実感される動画でした。

ちなみに、スピーカーのJohn ResigさんはｊQueryの作者としても有名みたいです。Mozilla でJavascriptのエバンジェリストとして働かれているようで、Javascriptのプロですね。

]]> http://blog.8maki.jp/2009/02/newbrowser_and_javascript.html/feed 708