いくつかの新しいJavaScriptライブラリがGitHubから飛び出しており、私たちは有望なものをいくつかを見ることにした。
QuaggaJS: 完全にJavaScriptで書かれたバーコードスキャナ
QuaggaJSは完全にJavaScriptで書かれたバーコードスキャナであり、リアルタイムローカライゼーションとEANとCODE128のような様々なタイプのバーコードの復号化をサポートする。
様々なバーコードライブラリが存在するが、これはゼロから書かれており、人気のあるzxingライブラリの移植ではない。 QuaggaJSには、画像内のバーコードのようなパターンを見つけることが可能なバーコードスキャナ、回転を含めた境界ボックスの推測といった機能が実装されている。
QuaggaJSを最大限に活用したい場合は、最新バージョンのFirefox, Safari, Chrome, Operaに実装されているgetUserMedia APIをサポートする必要がある。
このライブラリは以下のAPIを公開している:
Quagga.init(config, callback)
このメソッドは、指定された構成と読み込み処理が完了したときに呼ばれるコールバック関数を初期化する。初期化処理は、リアルタイム検出が構成されている場合のカメラアクセスも要求する。
Quagga.start()
ライブラリが初期化されると、start()メソッドがビデオストリームを開始し、画像の位置とデコードを開始する。
Quagga.stop()
デコーダーが実行されている場合で、stop()を呼び出すと、デコーダーは画像を処理しなくなる。
Quagga.onDetected(callback)
バーコードパターンが配置され、デコードが成功したときに呼び出されるコールバック関数を登録する。コールバック関数は、第一引数としてデコードされたデータを呼び出す。
Quagga.decodeSingle(config, callback)
上で説明した呼び出しとは対称的に、このメソッドはgetUserMediaに依存せず、代わりに単一の画像上で動作する。コールバックは、onDetectedと同じく、第一引数にデコードされたデータを含む。
QuaggaJSサンプルリポジトリには、多くの例とユースケースが含まれている。
Lining.js: CSS WebフォントのJavaScriptプラグイン
Lining.jsは要素内の各行を操作するためのライブラリである。Lining.jsを使うためには、単純に要素にdata-lining属性を追加すれば、CSSを使ってスタイルすることができる。
CSSはすでに、要素の最初の行にスタイルを適用するための::first-lineセレクターを持っている。しかし、::nth-line(), ::nth-last-line(), ::last-lineのようなセレクターはない。Lining.jsは、以下の例のようにテキストの行を完全に指定できる:
html
<div class="poem" data-lining>Some text...</div>
<style>
.poem .line[first] { /* `.poem::first-line`*/ }
.poem .line[last] { /* `.poem::last-line` */ }
.poem .line[index="5"] { /* `.poem::nth-line(5)` */ }
.poem .line:nth-of-type(-n+2) { /* `.poem::nth-line(-n+2)` */ }
.poem .line:nth-last-of-type(2n) { /* `.poem:::nth-last-line(2n)` */ }
</style>
<script src="YOUR_PATH/lining.min.js"></script>
現在Lining.jsは、Chrome, Firefox, Safari, Operaのようなメジャーブラウザーのみでサポートされている。Internet Explorerはサポートされない。
InteractJS: JavaScript ドラッグ＆ドロップ、リサイズ、マルチタッチジェルチャー
InteractJSはモダンブラウザ(とIE8+)に、ドラッグ＆ドロップ、リサイズ、慣性とスナップ付きでマルチタッチジェルチャーを追加するJavaScriptモジュールである。
ライブラリの主な目標は、jQuery UIに追加された機能を置き換えることである。その結果、InteractJSを使ったWebアプリは、スマートフォンやタブレット上でより使いやすくなる。 InteractJSは軽量で、SVGと連携し、マルチタッチ入力を処理し、アプリケーションから要素のレンダリングとスタイリングのタスクを解放する。
公式のInteractJS webサイトは、ドラッグ、スナップ、リサイズ、マルチタッチ回転の例とユースケースを提供する。
TreeJS: フック可能なツリーの構築と操作
Tree.jsは、フック可能なツリーの構築と操作するためのライブラリである。これは、ディレクトリ構造の検索と横断するのに便利なプラグインである。
Webアプリケーションの管理セクションで、ファイルシステムを参照することを想像して欲しい。Tree.jsを使うと、以下のようにファイルシステムを表現することができる:
javascript
var myTree = Tree.tree({
children: [
{
name: 'dupuis',
children: [
{
name: 'prunelle',
children: [
{
name: 'lebrac',
job: 'designer'
},
{
name: 'lagaffe',
firstname: 'gaston',
job: 'sleeper'
},
]
}
]
}
]
});
ノードを見つけるためには、任意の有効なディレクトリ構造をパラメータとして渡すことで、このツリーを検索することができる
javascript
var lebrac = myTree.find('/dupuis/prunelle/lebrac');
lebrac.data() // { name: 'lebrac', job: 'designer' }
lebrac.attr('job'); // designer
lebrac.path(); // /dupuis/prunelle/lebrac
GitHub上のTree.jsリポジトリは、フックとプロミスを使って追加のユースケースを提供する。