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

 

■ 現状

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

 

サンプル収支明細１

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

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

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

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

 

■ 体当たり開始

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

前回（2/15） の最後に表全体のレスポンシブ化を諦めて表の部分だけ横スクロールする方向性にしようと決めました。

今回は表の部分だけ横スクロールする状態のチェックをしていきます。

前々回（2/14） の最後の状態に戻します。

 

これが、表の部分だけが横スクロールする状態のはずです。

スマホサイズぐらいまで縮めてみます。

これは特に問題ないですね。

 

横スクロールの確認と言いながら、実は気になっているのは縦スクロールの方で。

というのは、実は表の部分だけでもヘッダー・明細行・フッターに分けていて、ヘッダーとフッターは縦スクロールしないようにしているからです。

日付の範囲を広げて明細行の行数を増やしてみます。

・・・・。

案の定ですね～。

分かりづらいかもしれませんが、ヘッダー部分の幅が右側いっぱいまで拡がっちゃいました。

 

行数が少ない時と何が違うかと言うと、#dlFooter が position: fixed; になっていることです。

これは jQuery で実装していて、行数が増えて縦スクロールバーが出る状態の時でもフッター（#dlFooter）が見える状態にするためです。（そうしないと、一番下まで行かないと横スクロールバーの操作が出来ないから。）

#dlFooter は、今回のレスポンシブ化で2/13 に width:100%; としています。

これは包含要素の #main の幅一杯にするイメージでそうしています。

私の体感的な理解ですが、position: fixed; にすると位置がブラウザ基準になるので、width の基準もブラウザ幅になるのかと。（裏を取ろうと検索しましたが見つけられませんでした。突っ込み大歓迎です！）

ブラウザ幅を基準にして width を決めるとなると、 #main と同様に 95% としなければです。

jQuery で position: fixed; に切り替えているのと同じタイミングで width も切り替えます。

Parllet/app/views/DetailList/dl_header.html 内の

/* dlFooterのCSS設定切替関数 */ に追記（太字の部分）

function setCssFooter() {
    var dlFtr = jQuery('#dlFooter'),
        dlMn = jQuery('#dlMain'),
        ctnHt  = jQuery('#container').height(),
        winInHt = jQuery(window).innerHeight(),
        winSrTp = jQuery(window).scrollTop(),
        ftrHt = jQuery('#footer').height(),
        winSrBtm = ctnHt - winSrTp - winInHt;
    if (winInHt < ctnHt) {
        dlFtr.css('position', 'fixed').css('width', '95%');
    #{if request.actionMethod!='dl_balance'}
        dlMn.css('padding-bottom', '192px');
    #{/if}
    #{else}
        dlMn.css('padding-bottom', '41px');
    #{/else}
        dlFtr.css('bottom', '0');
        if (winSrBtm < ftrHt) {
            dlFtr.css('bottom', ftrHt - winSrBtm + 'px');
        }
    } else {
        dlFtr.css('position', '').css('width', '100%');
        dlFtr.css('bottom', '');
        dlMn.css('padding-bottom', '');
    }
}

 

setCssFooter() はウィンドウリサイズ時にも呼んでいるので、縦幅のリサイズでスクロールが切り替わるぐらいの行数になるように日付の範囲を再度変えて見てみます。

 

このぐらいの高さでスクロールバーが出ていて、

 

高さを引き伸ばしてスクロールバーが消えても、

#dlFooter は同じ幅のままです。 

 

今回はここまでで、次回は表の部分のスクロールの Android での動きを愛機でチェックしていきたいと思います。

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

次回に続きます！

 

2/17 追記

続きを書きました。

 

---

 

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

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

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

 

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