ExcelみたいなフィルターをJavaScriptで。QAフィルターを作成しました！

開発者ブログ 2020年11月30日

2021年8月16日追記。Ver.2.0.0.0より、使い心地はそのままにQAフィルターのデザインが新しく使いやすくなっています。たとえば「どのLPがよく読まれていのか？」をすぐに判断できます。ぜひ活用ください。

QA Heatmap Analytics Ver.1.0.1.0よりQA Table Generatorを使ったQAフィルターが使えるようになりました。
表示されているデータの絞り込みがより直感的にできるようになっています。
詳しくはこちらの動画をご覧ください。

※字幕をONにすると説明が表示されます

解決したかった課題

一般的なアクセス解析ツールで表示データを絞り込む時には、下記のような課題がありました。

昇順降順ってどっちだっけ？
フィルタの存在に気づかない
複数条件で絞り込む方法が直感的ではない。どこにあるかわからない

優れているExcelのフィルタ

このようなデータ絞り込み機能の課題を解決している最も優秀なツールはExcelだと思っています。
Excelのフィルタ機能は直感的で、一度人から教われば誰でも使いこなすことができます。

私はExcelの構築に関わったJoel Spolskyをとても尊敬しており、Excel自体も尊敬しているので、ぜひこの慣習にならいたいと思いました。

とはいえ、Excelのフィルターにもいくつかの弱点があります。

フィルタ機能の存在を知らないと使えない
あまりに高機能で、少しわかりづらくなってきている
複数条件で絞り込んだ時に、どの条件で絞り込んだか迷子になりやすい

これら全ての課題を解決するために生み出されたのがQAフィルターです。

QAフィルターの主な特徴

知らない人でも直感的に触れる
必要十分な作業だけ残したフィルタ
全てのフィルタを同時にオープン・クローズできる
ウェブ上の操作に特化している（JSONやJavaScriptのデータ配列から動的にTableを生成する）

現在の仕様

現在の仕様では、クライアント環境に依存するデータ処理の負荷を下げるため、QA Filterに表示されている領域のみがフィルターの対象になります。例えば、3万件のデータがあるとして、1万件が初期表示されている場合、フィルターの対象はその1万件のみとなります。

今後この仕様は改訂になる可能性があります。

使ってみたい方へ

ぜひQA Heatmap Analyticsプラグインを導入ください。

プラグインの新規追加で「QA Heatmap」と検索するとみつかります。
導入するとすぐに表示される「ダッシュボード」のリアルタイムビューにてQAフィルターを活用することができます。

QA Analytics

QAフィルターは100%GPLなので、どなたでも使えます。

我々はこのQAフィルターをQA Heatmap Analyticsの統一の操作として活用していきたいと思っています。しかしQAフィルター自体は、汎用的なJavaScriptライブラリとして開発していきます。（その方が我々も使いやすいので）

まだまだ汎用的ではなく突貫的に対応している箇所もありますので、しばらくはQA専用で開発していきますが、現時点でもGPLが適用されていますので、どなたでも利用は可能ですし、自由に改変もできます。※GPL適用が必須です。

cssも現在はソースの中に記載しているので、「table.js」だけで利用できます。
ソースはWordPress公式サイトのこちらにあります。

https://plugins.svn.wordpress.org/qa-heatmap-analytics/trunk/js/

なおライセンスはGPL2.0ですので、それに従う必要があります。
GPLについて詳しく知りたい方はこちらの記事をご覧ください。

【クオッカでもわかる】ワードプレスのGPLライセンス。有料テーマ、自作プラグイン販売時の考え方

ただ今のところQAフィルターはQA Heatmap Analytics向けに最適化していきますし、Font Awesomeを利用しているのでそのクレジットも必要です。ですから、しばらくして汎用化したら、そのタイミングでGitHubで公開し、ライセンス関連も整理したらMITライセンスによるオープンソース化も検討しています。

もしバグなど見つけた方は、教えて頂けると助かります。（修正コードがある方は教えてもらえるともっと助かりますw）