table

Hi, I detected your main language is not Japanese. I have an english version of about me, so please try it!

この投稿は4年半前の記事です。 情報が古くなっている可能性があるので、その点ご了承ください。
2012 年 9 月 18 日 1,778日前)
2,049文字 (読了時間5分)

SPONSORED LINK

最近レスポンシブデザインという言葉が流行っています。あまり深く考えたことはありませんが、個人的にはこんなところがいいなーと思ってます。

  • ワンソースで済む
  • Googleが推奨してる

駄目だなーと思うところはこんなです。

  • PHPのように動的なサイトの場合、非表示の要素でも演算対象になる
  • 古いAndroidブラウザが怖い

まあ、Webプログラミングの場合は携帯サイトを作っていたわけで、スマートフォンだからどうこうということでもないかなと思います。

ちなみにこのサイトは一応スマートフォンとPCで表示が変わりますが、CSSのメディアクエリはほとんど使ってなくて、bodyタグにデバイス種別のクラスをつけることで対処してます。Nginxのプロキシキャッシュはデバイスで分けてます。

さて、レスポンシブデザインでも疑似レスポンシブデザインでもいいのですが、どうしても解決できない問題が一つあります。それは、tableタグ。動的なサイトの場合、大抵テーブルのようなものがあります。このサイトでいえば、購入履歴ですね。

テーブルの項目が多い場合あるよね
テーブルの項目が多い場合あるよね

項目が少なければいいのですが、項目が多いと変な折り返しが発生してしまいます。このサイトではPCもそうなってますが……

横幅が狭過ぎてテーブルが変
横幅が狭過ぎてテーブルが変

では、どうするのが正解なのか。というわけで、jQuery Mobileを見てみます。すると、テーブルというか、リストというか、iOSのようなテーブルビューっぽいものしか見つかりません。

テーブルというか、リストだね
テーブルというか、リストだね

Appleの出してるiOS ヒューマンインターフェースガイドラインなんかにも、「複雑な構造を持つデータはテーブルビューで見せろや」と書いてあるのですが、そんな感じのドリルダウン式の見せ方になっています。iOSのメールとかと同じですね。

こういうのをCSSだけで出来たらいいんじゃないかと思ったのですが、どうも無理そうです。

暫定:ダイアログボックスを出す

暫定的な結論としては「主要ではない要素(th以外)を非表示にし、trタップでダイアログボックスを出す」です。

/*scss利用*/
#book-shelf .lwp-table{
	tbody tr td:nth-child(2),
	tbody tr td:nth-child(3),
	tbody tr td:nth-child(4){
		display: none;
	}
}
var bookShelf = $('#book-shelf .lwp-table');
if($('body').hasClass('smartphone') && bookShelf.length > 0){
	var modalBox = $('<div class="entry"></div>');
	modalBox.dialog({
		autoOpen: false,
		title: '決済情報詳細',
		modal: true,
		position: ['center', 'center'],
		width: 300,
		maxHeight: window.innerHeight - 56,
		resizable: false
	});
	bookShelf.find('tbody tr').click(function(e){
		var html = '<table><tbody>';
		for(i = 0, l =$(this).find('td').length; i < l; i++){
			html += '<tr><th>' + $(this).parents('table').find('thead th:eq(' + i + ')').text() + '</th><td>'+
				$(this).find('td:eq(' + i + ')').html() + '</td></tr>';
		}
		html += '</tbody></table>';
		modalBox.html(html);
		modalBox.dialog('open');
	});
}

iOSのスライドするビューをパクればいいのですが、探すのがめんどくさかったのでjQuery UIのダイアログボックスをそのまま使いました。管理バーが崩れてるのはご愛嬌。

ダイアログボックスを表示する
ダイアログボックスを表示する

というわけで、CSSのみの調整で挫折したらJSで補うといいよというお話です。もっといい解決方法をご存知の方はコメントなど下さい。

 

SPONSORED LINK

この記事について

この記事はが2012 年 9 月 18 日にデザインの記事として公開しました。

フォローしてください

ここで会ったのもなにかの縁。
高橋文樹.comの最新情報を見逃さないためにもフォローをお願いします。
めったに送らないメルマガもあります。

  • 海里 川﨑

    なんか今更コメントする上に、思い付きレベルでアレなんですけど…。
    各行の th だけ min-width で一定幅確保して、それを position:absolute; で位置を固定し、あとの項目は横にスクロールさせる…的な UI じゃダメなんですかね?
    野球のパ・リーグが好きで、公式 iPhone アプリでよく成績とか確認するんですけど、そのランキングがそんな表示なので思った次第です。

    あと、ドリルダウン式の UI だと前後の項目との比較が一覧できなくてイマイチなんじゃ…とも思って書き始めたのですが、よくよく考えると、ちゃんとユーザーの視点をズラさないようにスライドさせれば問題なさそうですね ;-P
    役に立たないコメントで申し訳ないのですが…

    • Excelとかだとよくそうやってますね。Wikpediaはテーブルをスクロールさせる形式になっているので、それでもいいかなーと思います。一口にテーブルといっても、比較を目的としてものの場合はそっちの方がいいかもしれませんね。

  • Pingback: table要素をレスポンシブにしたい! | ウェブサイト制作のコツ!wordpress備忘録と、ホームページ作成()