レスポンシブ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）・Android 4.1.1（freebit mobile PandA）
Github公開リポジトリ のCommitバージョン（スタート時点）：こちら

 

■ 現状

2/7 に現時点のParllet（パレット）（GithubのこのCommitバージョン ）の収支明細を元に、スナップショットを兼ねてサンプル収支明細１ を作りました。

 

サンプル収支明細１

ここがスタート地点です。

前回（2/20） までに、タブレットサイズ（768px）以下になった時の機能として以下を実装しました。

• １行目のヘッダーは ロゴ と 会員メニュー のみ残し、２行目に 大分類　＞　小分類 の形のパンくずリストで表示。
• 大分類（明細表）・小分類（収支明細）をクリック時にスライドメニューが開く。
• コンテンツ部分はParllet（パレット） ログインページでの手法（ここら辺）で分かりやすい要素から順々に設定。
• 表全体のレスポンシブ化は諦めて、表の部分だけは横スクロールする方向性に。
• 表の部分のスクロールの PC での動きはチェック済みで、Android もチェック中
  

今回も、いつものように体当たりで学びながら進めていきます。
（1/11 に提示した新手法の方で実施するので、以前のようにサンプルページを元にして編集はしません。あくまで元になるのはGithubのこのCommitバージョン です。）

 

■ 体当たり開始

沿っていくのは2/6の案 です。

前回（2/20） はAndroid 2.3.3（HTC Desire HD 001HT）のプリインストール標準ブラウザでのみ起こる現象（バグ？）にぶち当たり、調査をしただけでした。

今回こそはAndroid でフッターが固定になった時の表の部分のスクロールの動きをチェックしていきたいと思います。

 

単純に縦スクロールしてみます。

・・・・・。

もう、 「・・・・・。」を書くのに慣れました ^^;

表の部分（赤丸点線の辺り）をタップして縦にスクロールしようとしても、全くスクロールされません。

 

前回 までに確認していた通り、横にはスクロールします。

 

いろんなところを触って試してみると、左端の部分をタップしてスクロールすると、

縦スクロールされました！

 

これは、・・・。

今のところ勘ですけど、Android 2.3 でスクロールしないバグへの対応の副作用では・・。

ちなみにその部分のソースは以下。

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) {
            （中略）
        } else {
            （中略）
            // 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}
（後略）

 

そもそもは code14 さんの androidでoverflow:scrollがきかないのをjavascript（jQuery）で解決する のソースをコピーさせて頂いたものを元にしています。

私の直感的な理解では、指定した要素の親要素に対してのスクロールを縦横共に強制的に制御しているものです。

 

そして Parllet（パレット） の明細表の作りはこれまでにも触れたように結構変則的です。

横スクロールに関しては #dl_tblFrame の内側の要素が動くイメージですが、

縦スクロールは ウィンドウの内側でhtml 全体が動くイメージ。

 

これは明細表のヘッダーの固定に加えて明細表のフッターの一部を固定した上で全体のフッター（最下部）は固定しないためにそうしています。

動きだけを書くと意味不明に感じると思いますが、以下のような意図があります。

• 明細表のヘッダーは項目名と同時に絞込み条件なので固定して常に可視化。
• 明細表のフッターはスクロールバーとページ遷移用リンクがあるので固定して常に可視化。
• 全体のフッターは今は簡素だが、今後内容を充実させて高さが出ても問題ないように固定しない。
  

 

話が逸れましたが、そういう動きにしていることで、表の部分をタップしても縦スクロールしないんだと思います。

#dl_tblFrame の部分に触れてスクロールしようとしても、直接の親要素に対する縦スクロールの余白は無いため動かない。

表の外の部分は html 全体のスクロールになるため正しくスクロールされると・・・。

 

この仮説を裏付けるため、Android 2.3 でスクロールしないバグへの対応 のある今の状態と、その部分を削除した状態の２種類について、Android 2.3.3 と Android 4.1.1 のそれぞれの縦と横のスクロール可否を試しました。（※あくまで、特殊な作りであるParllet（パレット） での動きです！）

Android バージョン	Android 2.3 でスクロールしないバグへの対応	縦スクロール	横スクロール
2.3.3	有り	×	○
	無し	○	×
4.1.1	有り	×	○
	無し	○	○

 

多分仮説は間違ってはいないですね。

Android 2.3 でスクロールしないバグへの対応 が有ると、 Android 4.1.1（freebit mobile PandA）の方でも縦スクロールが効かなくなります。

 

こうなってくると、Android 2.3 でスクロールしないバグへの対応は、今の Parllet（パレット） にそのまま使うことができません。

Android 2.3 の横スクロールを救うためだけに他の全バージョンのスマホの縦スクロールを犠牲に出来ないですから。

そして前回 程ではないにしても、ピンポイント対応もすぐには難しいので・・・。

一旦 Android 2.3 に泣いてもらう形で Android 2.3 でスクロールしないバグへの対応 は外しておきます。

（ピンポイント対応は一応、今後のタスクとして保管します。 ）

 

というところで今回はここまでです。

次回も縦スクロールの動きの確認を続ける予定です。

※ 毎度の念のための断りですが、今回編集した内容は現時点（2014/2/21）では公開しているParllet（パレット） の方には反映しておりません。

次回に続きます！

 

2/22 追記

続きを書きました。

 

---

 

いつも最後まで読んでいただいてありがとうございますm(__)m

何度も見に来ていただけることが、間違いなく私の原動力となっています(^_^)

またお越しくださいませませ！

 

タグ：Parllet 公開アプリ レスポンシブWebデザイン 体当たり ブログラミング jQuery