これでよくない? レスポンシブテーブルの話

レスポンシブテーブルという言葉をご存知でしょうか。テーブル(表組み)に対してレスポンシブデザインを適用する手法のことです。既存のものとは少し違った手法を考案したので記事を書きました。

レスポンシブテーブルは一般的に難易度の高いものとされています。沢山の人がいろいろな方法を考案していますが、どんな表組みにも使える汎用的なレスポンシブテーブルの枠組みはまだ登場していません。第一、表組に入る内容はほんとうに様々なので、汎用化という考え方に限界があることは明白なのです。

いくつかの実装パターンは「レスポンシブWebデザインでテーブルを使う時の小技」という人気記事で紹介されています。この記事で紹介されているものの多くは、CSSのdisplayプロパティの値を上書きすることで表組みからリスト形式に組み替えたり、行と列を逆転してスクロールさせて見られるようにしたりといった、ある種、大道芸を見せられている的な印象があります。簡単にいえば実用に耐えないというか……。表組のデータ形式がごく限られてしまうという点も気になります。

ほかにも、かなり力の入った実装としては「Responsive tables」(とその紹介記事)というものがあるようです。こちらはカラムにあらかじめ優先度をつけておくと、画面サイズに応じてカラムの表示・非表示を切り替えてくれます。非表示になっているカラムは、チェックボックスで再選択することでまた表示されるようになります。「すげえな、よくやるな」ってかんじです。汎用的に使えるライブラリというよりは、データ行列を閲覧するという目的にマッチするような気がします。

このように既存の手法でも満足できるものはなかったのですが、とはいえ今回わたしが考案した仕組みもまったく大したものではありません。全く使えないケースも多々あると思います。せっかく思いついてので、とりあえず世に問うてみるかというノリで公開してみるものであります。


成果物

ブツはこちらです。レスポンシブテーブル サンプル

概要

ソースコードを見ていただければ、それが今回の成果物の全てです。やっていることは、画面幅に応じてテーブルをtransformプロパティで小さくしているだけです。スマホでは文字が読めないほど小さくなりますが、ピンチアウトして拡大すればいいじゃんという発想です。適用したいテーブルを<div class=”responsive-table”>で囲うだけで適用もでき、楽ちんです。

制約事項など

ピンチアウトの拡大を禁止しているサイトには向きません。ピンチアウトできたとしても、拡大率には限界があるため大きすぎる表組みには使えません。画面幅の狭い非タッチデバイス(ブラウザでウィンドウを縮めた時など)は考慮していないですが、なにかしら工夫はできると思います。


このような単純なことなのに(わたしの観測範囲では)誰もやっていないというのはおかしいです。なにか私が致命的な視点を欠いているのかもしれません。確認しているブラウザもごく一部なので、全然動かないブラウザがあるのかもしれません。考える前にとりあえず公開してみた次第です。ツッコミをぜひ頂きたいです。

そこそこ、どんなデータ形式の表組みにも使えるし、上で紹介したJSライブラリのように分厚い実装ではないので、「とりあえずこれで」的に採用できるものかなあと思いましたが、いかがでしょう。