chab
chab は Web SQL Database を使って HTML の <table> タグを SQL ライクにセレクトする JavaScript ライブラリです。
特徴
- <table> タグをそのままデータベースのテーブルとして利用できる
- ドメインをまたがった <table> のセレクトも可能
- HTML5 の API Cross-document messaging と Web SQL Database を使用
chab は以下のようなニーズに答えます。そのようなニーズが存在するかは置いといて。
- <table> タグを結合して閲覧したい
- <table> タグ内をSQLで絞り込みたい
- Excel のように使える簡易データベースがほしい
仕組み
chab の仕組みを以下の図で説明します。
- example.net/select.html のフォーム項目にSQLを入力し、実行ボタンを押す。実行ボタンをトリガーに chab の select メソッドが入力された SQL を取得して処理を開始する。
- SQL の FROM 句に指定された URL(example.com/artist.html と example.org/album.html) に Cross-document messaging でメッセージ(取得する対象のテーブル名)を送信する。メッセージ受信時のイベントは送信先 URL の HTML にリンクされている table.js で行う。
- example.com/artist.html と example.org/album.html にリンクされている table.js は指定されたテーブル名を受け取り、メッセージ (JSON文字列に変換されたテーブルの内容) を返す。メッセージを受け取った chab は JSON から CREATE 文、INSERT 文を生成して、元のテーブル構造のまま Web SQL Database に登録する。
- 1.で入力された SQL で Web SQL Database からデータをセレクトして example.net/select.html 上に用意しておいた結果出力用の要素にセレクト結果を展開する。
動作環境
Web SQL Database と Cross-document messaging に対応したウェブブラウザが必要です。以下のブラウザで動作確認しました。
- Google Chrome 53.0 dev (64-bit)
- Mobile Safari (iOS 9.3.2)
- Safari 9.1.1 (11601.6.17)
デモ
chab を設置済みのページと、サンプルとして3つのテーブルを用意しました。