ユーザープロフィール

ゲストさん

業務システム開発に役立つ。テーブルによる一覧表示を高機能化するライブラリ×13選

業務システム開発に役立つ。テーブルによる一覧表示を高機能化するライブラリ×13選

業務システムにおいて最も良く使われているソフトウェアの一つが表計算ソフトウェアではないかと思われます。もはや職人という域に達している人たちもいて、ありとあらゆる文書をExcelで作り上げてしまったりします。 そんな中、業務システムにおいてもデータを一覧表で表示することが多々あります。その結果として担当者のニーズは一覧データを並べ替えたり、検索やフィルタリングをしたいといったものになります。とは言えそうした機能の実装はとても工数がかかるので、開発陣の頭を悩ませることでしょう。 そこで今回はHTMLベースの一覧表を高機能にするソフトウェアを紹介します。

Super Tables - HTMLテーブルの縦横を固定にしてデータを見やすく

画像

Super Tablesを使うとテーブルの縦方向ヘッダを固定にしてスクロールしても常に表示されます。さらに横方向のヘッダも固定になり、一番左側のカラムが常に表示されます。テーブルのユニークになるIDを常に表示したりすると便利でしょう。使い方はテーブルのIDを指定するだけなので簡単です。特にHTML側で特殊な形式を設定する必要はありません。さらに複数ヘッダ、複数カラム固定に対応しています。スキンに対応し、サイトの色遣いに合わせて自由に変更できます。

Flexigrid - HTML上のテーブル操作の決定版

Flexigridは既存のテーブルに対して利用できるライブラリで、普通のテーブルをカラムの並べ替えや表示/非表示、幅の変更など優れたUIをもったテーブルに変更してくれます。対応ブラウザはIE6/IE7、Firefox 2、Opera 9.x、Safari 3.0においてテストされており、Firefox3でも動作するなど幅広く対応しています。JSONでのデータ受け渡しにも対応し、サーバとのデータのやり取りに利用することでAjaxのようにデータを表示することができます。データの追加や削除、フィルタリング的な検索機能、ページ遷移など様々な機能を盛り込むことができます。

Table Sorter - 絶対お勧め!JavaScriptでテーブルソート

Table SorterはJavaScriptのみで実現するソートライブラリです。この手のライブラリはこれまでいくつかありますが、iframeを使ったり、表示に特定の手法が必要だったりと、そのままでは使いづらいものが多いです。Table Sorterはそれらの完成版ともいえるかも知れません。読み込むのはJavaScriptファイル一つだけ、さらに普通のテーブルタグに対して、ヘッダ部分はtheadタグとthタグで作るだけでいいのです。データ部分は全体をtbodyタグで囲んで、tdタグで記述するだけです。これだけでヘッダをクリックするとソートができる処理が完成します。

Sigma Grid - もうこれで十分。HTML上でテーブルを表示するなら

Sigma Gridはテーブルの表示とソート、データ編集などを可能にする超豪華ライブラリです。Sigma Gridはデータの表示に際してJSONでデータを渡す必要があります。そのため既存のシステムにそのまま組み込むのは難しいかも知れません。しかし、その変更してもありあまるメリットを享受できるのは間違いありません。まずカラムごとにソートができます。これは小数点や桁数をきちんと解釈した上でソートされます。セル内のデータを編集することはもちろん、ライブでバリデーションも行われます。編集されたカラムは色分けされて表示されます。

jQuery quicksearch plug-in - テーブルのデータをインクリメンタルに検索する

画像

jQuery quicksearch plug-inを使うと、テキストボックスの入力内容にマッチするテーブル行だけをインクリメンタルに絞り込むことができます。カラムの場所は無関係なので、この列の値がこの場合、といった具合に絞り込むことはできません。あくまでも簡易的な検索になります。マッチしなかったデータは非表示にすることも、グレーアウトさせることも可能です。また検索をAjaxで行い、結果を反映させることもできます。簡易的な検索はもちろん、全文検索的にこだわったものまで利用できる便利なライブラリです。

sorttable - 既存のテーブルをソート可能に

sorttableの使い方は簡単です。テーブルのクラス名に「sortable」を指定すれば良いだけです。そうするとヘッダカラムをクリックしてtbody内がソートされるようになります。クラス名を指定するだけという手軽さが便利です。JavaScriptのソートの場合、難点なのが文字種の区別になるのですが、sorttableの場合は心配いりません。数字は桁数を考えた上でソートされますし、日付もきちんと年を頭にソートされるようになります。さらにtfootに対応しており、フッタとして指定したフィールド(集計結果など)はそのまま最下部に保持してくれます。

grrid.js - Webベースの表計算ライクなグリッドライブラリ

画像

grrid.jsを使うとまるで表計算ソフトウェアのようなグリッドが表示されます。各セルは自由に文字を入力できます。移動はエンターキー、タブキー、矢印キーを使って可能です。タブキーで右、エンターキーは下にフォーカスが移動します。なお、動作にはprototype.jsが用いられています。grrid.jsは表計算ソフトウェアではないので、計算処理などはできないので注意してください。また、列の幅を変更することもできません。あくまでも表計算風に表示を行い、データをメンテナンスできるというソフトウェアです。

Gelsheet - 実用性が高いWebベースの表計算ソフトウェア

画像

GelsheetはオープンソースのグループウェアであるFeng Officeの1プロジェクトです。WP CalcというWordPressプラグインとしても動作します。そして単独でも動作するのがGelsheetになります。矢印キーによるフォーカスの移動、入力、他のセルの参照した計算などこなせるようになっています。さらに計算式も組み込まれており、セルの文字装飾もできるようになっています。できないことはグラフの作成になるでしょう。データはPDFやExcel、ODSフォーマットで出力できます。

TOMUSS - 複数人で同時に編集するWebベースの表計算アプリ

画像

TOMUSSはThe Online Multi User Simple Spreadsheetの略で、表計算について複数人での同時編集が可能なWebアプリケーションになっています。システムはPythonで作られており、Webサーバも内包するのですぐに利用できます。編集可否をフィールド単位で設定でき、数値のみや指定した文字群のみといったフォーマット指定もサポートします。編集した瞬間にセルにアイコンが表示され、サーバ側でコミットするとアイコンの色が変わります。もちろん他のユーザにもリアルタイムで変更が反映されます。

ZK Spreadsheet - Excelファイルを操作できるAjax表計算アプリケーション

ZK SpreadsheetはまるでExcelのような操作性をもったWebアプリケーションで、簡易的な計算まで行うことができます。一部機能については日本語化もされています。最大の特徴はExcelのファイルをそのまま読み込ませることができる点でしょう。Webからのパスを指定して開けば、グラフ等のオブジェクトを除けば簡易的な文字装飾等もきちんと再現されます。ライブラリとしての提供なので、自分たちのWebアプリケーションに組み込んだりして利用することもできます。さらにJavaScriptならではのインタラクティブ性を追加したり、イベントを関知したりすることもできます。

jQuery-KingTable - 業務システムに使えそうなテーブルライブラリ

画像

jQuery-KingTableはページネーション、検索、並び替えができます。カラーテーマにも対応しているので簡単にカラーリングの変更ができます。検索にマッチすると該当部分がハイライト表示されます。さらに表示するカラムを絞り込んだり、テーブル表示ではなくカード表示といった形式もサポートされています。

Handsontable - WebでExcel並のテーブル機能を実現

画像

Handsontableでは表計算ソフトウェアでは実装されているような多数の機能を実現しています。データの保存処理については別途実装がいりますが、表示はHandsontableにお任せです。業務システムのデータ表示に使ってみてはいかがでしょう。

Sensei Grid - キーボード移動/インライン編集を可能にするテーブルライブラリ

画像

Sensei Gridが提供するのはリッチなフォーカス移動、そしてその場での編集機能になります。これもまた使いどころの多そうな便利なライブラリです。この時、矢印キーでのセル移動はもちろんのこと、タブキーでの横移動、Ctrl + Enterでの下への移動が行えます。まさにExcel的な操作性です。

まとめ

一覧表を出力する場合、テーブルタグを使って表現するのが簡単なのですが、スクロールするとヘッダーが見えなくなってしまったりしてとても使い勝手が悪くなりがちです。ヘッダーを10行ごとに差し込む方法もありますが、システムが複雑になる割には見栄えも良くありません。やはり今回紹介したようなライブラリを使っていくべきではないでしょうか。 ユーザビリティという観点で考えても、こうしたライブラリを使うとユーザの満足度は非常に向上します。基幹系システムで使うとユーザの生産性もとてもあがるはずです。

PR_infeed

PR_Relative

オウンドメディア運営会社の皆様へ

s

ページトップ