表示位置をいい感じに調整してくれるネットワークグラフ·Springy MOONGIFT
Springyはネットワークグラフにおいてノード同士の表示を自動的に調整してくれるライブラリです。 オブジェクト同士の関連性からトレンドを見いだすのに使われるネットワーク図。そんなネットワーク図の表示において多数のオブジェクトが重なってしまう…といった時にはSpringyを使ってみましょう。 デモです。関連性が適切に見えます。この位置まで自動で調整されるのがSpringyの特徴です。 向きが変わったとしても大丈夫。 こんな感じに交わっていたとしても… 最終的にちゃんと調整されます。 Springyはこのレイアウトを決定するアルゴリズムを備えています。パラメータを自分で調整することもできますが、かなり高いレベルで表示が調整されるので殆どデフォルトのままで問題ないのではないでしょうか。 SpringyはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 MOO
レガシーなWebブラウザにもgetUserMediaを·getUserMedia.js MOONGIFT
getUserMedia.jsはFlashを使うことでレガシーなWebブラウザでもgetUserMediaライクなWebカムアクセスを実現するJavaScriptライブラリです。 HTML5の新しいAPIの一つにWebカムアクセスがあります。そんなWebカムアクセスをレガシなーWebブラウザを含めて使えるようにしてくれるのがgetUserMedia.jsです。 最初です。カメラへのアクセスが求められます。 まずはWebカムの映像を画像として保存します。 さらに顔を認識して鼻眼鏡をつけるアクションです。 getUserMedia.jsではWebRTCに対応している場合はHTML5のgetUserMediaを使い、それ以外の場合はFlashベースのWebカムアクセスを使います。結果は同じように扱えるので、安心してWebカムアクセスできるようになるでしょう。 getUserMedia.jsはJa
可読性、ユーザビリティを向上させるテキストハイライトライブラリ·Fokus MOONGIFT
Fokusは選択した文字の周囲だけをハイライト表示させるJavaScriptライブラリです。 ユーザビリティを高めるアイディアの一つとして、ユーザが行ったアクションに対してその場で応えるというのがあります。今回はそのためのライブラリFokusを紹介します。選択した文字周辺だけをハイライトするJavaScriptライブラリです。 最初の表示です。 適当に文字を選ぶとその部分だけがハイライトされます。 選択する文字を変えれば当然ハイライトも移動します。 複数の段落にまたがればハイライトも大きくなります。 目立つのでコピーしやすくなりそうです。 Fokusはニュースや論文、ブログ記事など長文が多いサイトにおいて用いると読みたい部分だけに集中できて便利かも知れません。フォーカスが変わった時のアニメーションもスムーズでストレスなく読み進められそうです。 FokusはJavaScript製、MIT L
オブジェクト同士の関連性から価値を見いだそう·VivaGraphJS MOONGIFT
VivaGraphJSはオブジェクト同士の関連性をビジュアル化するJavaScriptライブラリです。 最近はソーシャルサービスが流行です。そこで求められるのはユーザまたはオブジェクト間の繋がりになります。それをビジュアル化するのに使えるライブラリがVivaGraphJSです。 Amazonの関連書籍をたどっていくグラフです。 書籍をクリックすると詳細が表示されます。 YouTube版。ノードをクリックするとその場で動画の再生ができます。 Facebookの友達情報の可視化です。 表示方式も様々にあります。大量の情報だとレンダリングが重たいのが難点ですが、インパクトがあります。 より表示したい情報に合わせたアクションを選んでみてください。 こんな密集するパターンも。 VivaGraphJSの使い方はシンプルで、ノードとなるオブジェクトを追加していった後、ノード間のつながりをリンクとして追加
滑らかに自然なページ送りができるJavaScriptライブラリ·turn.js MOONGIFT
turn.jsはタブレットやスマートフォンで使えるWeb向けのページ送りライブラリです。 turn.jsはリアルなページ送りができるWebベースのソフトウェアです。ハードウェアアクセラレーションを使い、滑らかに動きます。 四隅にマウスを持っていくと小さくカールします。ここをドラッグして引っ張ります。 ページをめくります。何となく海外のページの薄い雑誌をめくっているような感じです。 それ以外にもページの端にマウスを持っていくと矢印が出ますので、これをクリックしてもページめくりされます。 右から左の他、逆に左から右へもめくれます。 デモ動画です。 この手のライブラリは幾つかありますが、turn.jsは水平にページがカールするだけではなく、実際の雑誌のように斜めにカールしてページ送りできるのが特徴と言えます。ただ、その雰囲気がTime誌のような作りでちょっとペラペラな感じになってしまうのが残念で
表現力の高さに驚き。HTML5/Canvasグラフライブラリ·Flotr2 MOONGIFT
Flotr2はHTML5/Canvasを使ったグラフ描画ライブラリです。 これまでグラフと言えばFlashや画像出力が多かったですが、HTML5が使われるようになったことでぐっと表現力の高いグラフをWeb標準の技術で実装できるようになっています。その表現力を知るのにお勧めしたいのがFlotr2です。 たくさんのサンプルが用意されています。一気に紹介します。 線グラフです。 途中で途切れた曲線のグラフも描けます。 棒グラフです。 マウスオーバーで値を表示できます。 積み上げグラフです。 円グラフです。 レーダーチャート。 範囲グラフ。 ローソクチャートです。 滑らかな曲線のグラフです。 マウスオーバーでグリッドが表示されます。 マウスズームのデモです。 マウスで一部の範囲を指定できます。 折れ線グラフです。 マイナスの値にも対応。 クリックでリアルタイムにグラフを描きます。 画像ダウンロード
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
IDEA * IDEA
Engadget | Technology News & Reviews
閲覧サイトで何が使われているのかが一目でわかる拡張機能「Chrome Sniffer」NOT SUPPORTED