Javascript ライブラリー

HTML5.JPオリジナルのJavaScriptライブラリを公開していきます。ご自由にライブラリをダウンロードして貴サイトにてご活用ください。

<meter> polyfill (jQuery プラグイン)

横長のグレーのバーの中に、緑色のバーが重なり、ゲージを表しています。

<meter> polyfill は、HTML5 で新たに導入された meter 要素をサポートしていないブラウザーでも meter 要素がレンダリングされるようにする jQuery プラグインです。Chrome や Opera など、すでに meter 要素をサポートしているブラウザーには何も作用しません。このプラグインは、Internet Explorer 6, 7, 8, 9 でも動作します。

html5detector (Google Chrome Extentions)

Google Chrome のアドレスバーに、緑色の丸いアイコンが表示されています。アイコンの中には、白色で 5 と表示されています。

html5detector は、表示されているページが HTML5 でマークアップされていれば、アドレスバーの中にアイコンを表示する Google Chrome Extentions です。

カラーピッカー.js

Windows で色を選択するときに表示されるパレットと同じような画面が表示されています。さまざまな色がグラデーションで描かれたパレットがあり、その右には選択した色の濃さを選ぶためのバーがあります。

カラーピッカー.js は、色を選択するためのカラーパレットを表示するライトウェイトなJavaScriptライブラリーです。JavaScriptコードを用意することなしに、カラーピッカーを表示することができます。

このライブラリーは単独で動作するため、他のJavaScriptフレームワーク等を読み込む必要もありません。色を入力するテキストボックスと、必要に応じてボタンを用意するだけで、カラーピッカーをページに導入することができます。

プログレスバー.js

グレーの背景に、進捗を表す領域がブルーで描かれています。現在の進捗は50%を示しています。進捗を表したブルーの領域はグラデーションがかかってきれいに見えます。

プログレスバー.js は、プログレスバーを表示するライトウェイトなJavaScriptライブラリーです。JavaScriptからメソッドを実行することで、パーセンテージの変更などを制御することができます。また、静的に表示させるだけであれば、JavaScriptコードなしに、class属性に値を追加するだけで、プログレスバーを表示することができます。このライブラリーは単独で動作するため、他のJavaScriptフレームワーク等を読み込む必要もありません。

border-radius.js

黄色の四角形に茶色の枠線があります。その下にもう一つの四角形がありますが、色は同じです。しかし、四角形の4つの角が丸くなっています。

border-radius.js は、class属性に値を追加するだけで、ブロックボックス要素の角を丸くするライトウェイトなJavaScriptライブラリーです。

CSSでborderとmarginを指定し、class属性に "html5jp-border-radius" を追加するだけで、角が丸くなります。JavaScriptのコードは一切必要ありません。また、このライブラリーは単独で動作するため、他のJavaScriptフレームワーク等を読み込む必要もありません。

デコレーションテーブル.js

いくつかの都道府県の面積や人口を示す表があります。この表では1行おき、その背景色が変えられており、とても見やすくなっています。各行の左側にはチェックボックスがあります。ひとつの都道府県だけチェックが入っており、その行は、その他の行と比べて、背景が濃くなって、選択されたことが見やすくなっています。

デコレーションテーブル.jsは、class属性に値を追加するだけで、テーブルの通常行の背景色をストライプ状にし、各行をクリッカブルにするライトウェイトなライブラリーです。

getElementsByClassNameメソッド

このライブラリーは、HTML5で規定されている getElementsByClassName メソッドを組み込みます。このライブラリーを script 要素でロードするだけで、あたかもブラウザに getElementsByClassName メソッドが組み込まれていたかのように振舞います。

棒グラフ（垂直）

垂直棒グラフが描かれています。横軸は曜日を、縦軸は商品の注文数を表しています。商品はA～Eまで5つあり、グラフの各垂直棒は、それぞれの商品の注文数が色を分けて積み上げられています。グラフの右側には、凡例が描かれています。

JavaScriptから棒グラフ（垂直）をcanvas要素に描画します。パラメータを指定することで、項目、色、凡例表示などお好みの棒グラフ（垂直）を柔軟に描画できます。

レーダーチャート

2つの商品の特性を表すレーダーチャートが描かれています。評価軸は8つあり、このレーダーチャートは八角形になっています。背景色は薄いグレーで、商品Aはピンクで、商品Bはブルーで、それらの特性が描かれています。それぞれは半透明になっているため、それぞれは重なっているものの、はっきりと、各評価軸の評価を判別することができます。

JavaScriptからレーダーチャートをcanvas要素に描画します。パラメータを指定することで、項目、色、凡例表示などお好みのレーダーチャートを柔軟に描画できます。

折線グラフ

商品Aと商品Bの曜日ごとの注文数を表した折れ線グラフが描かれています。横軸は日～金までの曜日を表し、縦軸は注文数を表しています。グラフの右には凡例があります。

JavaScriptから折線グラフをcanvas要素に描画します。パラメータを指定することで、項目、色、凡例表示などお好みの折線グラフを柔軟に描画できます。

円グラフ

円グラフが描かれています。各項目を表す領域の上に、割合と実数が表示されています。このグラフの右には凡例があります。

JavaScriptから円グラフをcanvas要素に描画します。パラメータを指定することで、項目、色、凡例表示などお好みの円グラフを柔軟に描画できます。