最近レスポンシブデザインという言葉が流行っています。あまり深く考えたことはありませんが、個人的にはこんなところがいいなーと思ってます。
- ワンソースで済む
- 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で補うといいよというお話です。もっといい解決方法をご存知の方はコメントなど下さい。