レスポンシブWebデザイン導入（Parllet の場合 明細表（収支明細）－１０） [公開アプリ]
※ 注意！ このエントリは ブログラミング（ブログを書きながらプログラミング）です。筆者がポストした時には気づいていない誤り等が後から発覚する恐れがあります。（過去の事例：2014年 1/4
の誤りに 1/9 に気づいて訂正、等 ^^; ）
sakashushu です。
2/8 からParllet（個人で作成・公開しているアルファ版のWeb家計簿） のレスポンシブWebデザイン導入シリーズは明細表篇のブログラミング（ブログを書きながらプログラミング）に入っています。
スポンサードリンク
■ ざっくり環境
OS：Windows 7 Home Premium
Play Flamework：1.2.4
ブラウザ：IE 11.0
スマホ：Android 2.3.3（HTC Desire HD 001HT）
Github公開リポジトリ
■ 現状
2/7 に現時点のParllet（パレット）（GithubのこのCommitバージョン ）の収支明細を元に、スナップショットを兼ねてサンプル収支明細１ を作りました。
ここがスタート地点です。
前回（2/17） までに、タブレットサイズ（768px）以下になった時の機能として以下を実装しました。
- １行目のヘッダーは ロゴ と 会員メニュー のみ残し、２行目に 大分類 ＞ 小分類 の形のパンくずリストで表示。
- 大分類（明細表）・小分類（収支明細）をクリック時にスライドメニューが開く。
- コンテンツ部分はParllet（パレット） ログインページでの手法（ここら辺）で分かりやすい要素から順々に設定。
- 表全体のレスポンシブ化は諦めて、表の部分だけは横スクロールする方向性に。
- 表の部分のスクロールの PC での動きはチェック済みで、Android もチェック中
今回も、いつものように体当たりで学びながら進めていきます。
（1/11 に提示した新手法の方で実施するので、以前のようにサンプルページを元にして編集はしません。あくまで元になるのはGithubのこのCommitバージョン です。）
■ 体当たり開始
沿っていくのは2/6の案 です。
前回（2/17） に表の部分のスクロールの Android での動きのチェックに入ろうとして、それ以前の明細行の位置を調整。
その後横スクロールしないことが発覚。
今回はその対応からです。
前回 書いた通り、一応原因の予想はついています。
ヘッダーは position: fixed; で固定しているため明細行とは別ブロックで、本来それぞれが横スクロールする要素です。
でもそれではヘッダーと明細行の項目名がずれてしまう。
そこで最初は、ヘッダーの方の横スクロールバーを隠した上で jQuery で明細行の横スクロールと合わせました。
それだけでも良かったのですが、縦にも行数が増えた時に一番下まで縦スクロールしないと横スクロールバーを操作できない。
それにも対応ということで、縦スクロールバーが出る場合のみフッターをWindow下部に固定、明細行の横スクロールバーは隠してフッターに横スクロールバーを表示、jQuery でヘッダー・明細行の横スクロールをそれに合わせるようにしたのです。
しかしご承知の通りスマホではスクロールバーは表示されず、スクロールする要素そのものをタップしてスクロールします。
今回はスクロールバーの高さを判定して、jQuery の動きを変えることにします。
取りあえず高さがどうなっているかをチェック。
Parllet/app/views/DetailList/dl_header.html 内に追記（太字の部分）
（前略）
<script type="text/javascript">
<!--
jQuery(function() {
alert(jQuery('#dl_tblFrameFt').height());
（後略）
0 になっているんですね。
ではそれを使って判定します。（上記の alert(jQuery('#dl_tblFrameFt').height()); はチェックの為だけだったので消します。）
この時ヘッダーと明細行のどちらを横スクロールしても、両方がスクロールするようにします。
Parllet/app/views/DetailList/dl_header.html 内に追記（太字の部分）
（前略）
<script type="text/javascript">
<!--
jQuery(function() {
（中略）
/* 起動時のCSS設定 */
#{if request.actionMethod=='dl_balance'}
/* 枠固定の左右の動き */
if (jQuery('#dl_tblFrameFt').height()!==0) {
jQuery('#dl_tblFrameFt').scroll(function() {
jQuery('#dl_tblFrame').scrollLeft(jQuery(this).scrollLeft());
jQuery('#dl_tblFrameHd').scrollLeft(jQuery(this).scrollLeft());
});
} else {
jQuery('#dl_tblFrameHd').css('overflow-x', 'scroll');
jQuery('#dl_tblFrame').css('overflow-x', 'scroll');
jQuery('#dl_tblFrameHd').scroll(function() {
jQuery('#dl_tblFrame').scrollLeft(jQuery(this).scrollLeft());
});
jQuery('#dl_tblFrame').scroll(function() {
jQuery('#dl_tblFrameHd').scrollLeft(jQuery(this).scrollLeft());
});
}
#{/if}
（後略）
しかし、Android 2.3.3（HTC Desire HD 001HT）では横スクロールしません。
Android 4.1.1（freebit mobile PandA）の方はこの時点で横スクロールしました。
これはあれです。
今まで何度か触れた、Android 2.3 でスクロールしない問題 ですね。（最初に対応した回が レスポンシブWebデザイン導入計画（Parllet の場合 その８（スライドメニュー Animated Border Menus 篇－５）） で、その後も何度か触れたり修正したり流用したりしています。ソースの大元は code14 さんの androidでoverflow:scrollがきかないのをjavascript（jQuery）で解決する です。）
今までと同じように対応します。
Parllet/app/views/DetailList/dl_header.html 内に追記（太字の部分）
（前略）
<script type="text/javascript">
<!--
jQuery(function() {
（中略）
/* 起動時のCSS設定 */
#{if request.actionMethod=='dl_balance'}
/* 枠固定の左右の動き */
if (jQuery('#dl_tblFrameFt').height()!==0) {
jQuery('#dl_tblFrameFt').scroll(function() {
jQuery('#dl_tblFrame').scrollLeft(jQuery(this).scrollLeft());
jQuery('#dl_tblFrameHd').scrollLeft(jQuery(this).scrollLeft());
});
} else {
jQuery('#dl_tblFrameHd').css('overflow-x', 'scroll');
jQuery('#dl_tblFrame').css('overflow-x', 'scroll');
jQuery('#dl_tblFrameHd').scroll(function() {
jQuery('#dl_tblFrame').scrollLeft(jQuery(this).scrollLeft());
});
jQuery('#dl_tblFrame').scroll(function() {
jQuery('#dl_tblFrameHd').scrollLeft(jQuery(this).scrollLeft());
});
// Android 2.3 でスクロールしないバグへの対応
if (navigator.userAgent.indexOf('Android') > 0) {
var touchStartPositionX,
touchStartPositionY,
touchMovePositionX,
touchMovePositionY,
moveFarX,
moveFarY,
startScrollX,
startScrollY,
moveScrollX,
moveScrollY;
jQuery(document).on('touchstart', '#dl_tblFrameHd, #dl_tblFrame', function(e) {
var touch = e.originalEvent.touches[0];
touchStartPositionX = touch.pageX;
touchStartPositionY = touch.pageY;
//タッチ前スクロールをとる
startScrollX = jQuery(this).scrollLeft();
startScrollY = jQuery(this).scrollTop();
});
jQuery(document).on('touchmove', '#dl_tblFrameHd, #dl_tblFrame', function(e) {
var touch = e.originalEvent.touches[0];
e.preventDefault();
//現在の座標を取得
touchMovePositionX = touch.pageX;
touchMovePositionY = touch.pageY;
//差をとる
moveFarX = touchStartPositionX - touchMovePositionX;
moveFarY = touchStartPositionY - touchMovePositionY;
//スクロールを動かす
moveScrollX = startScrollX +moveFarX;
moveScrollY = startScrollY +moveFarY;
jQuery(this).scrollLeft(moveScrollX);
jQuery(this).scrollTop(moveScrollY);
});
}
}
#{/if}
（後略）
リロードして横スクロールしてみます！
はい、スクロールするようになりました。
今回はここまでとして、次回はフッターが固定になった時の動きの確認をしていきたいと思います。
※ 毎度の念のための断りですが、今回編集した内容は現時点（2014/2/19）では公開しているParllet（パレット） の方には反映しておりません。
次回に続きます！
2/20 追記
続きを書きました。
いつも最後まで読んでいただいてありがとうございますm(__)m
何度も見に来ていただけることが、間違いなく私の原動力となっています(^_^)
またお越しくださいませませ！
コメント 0