Webアプリのスマホ対応（Parllet の場合　残高表－１１）：sakashushuの取りあえずブログ：So-netブログ

	ブログをはじめるログイン

Webアプリのスマホ対応（Parllet.. ｜Webアプリのスマホ対応（Parllet.. ブログトップ

Webアプリのスマホ対応（Parllet の場合　残高表－１１）　[公開アプリ] [編集]

※ 注意！　このエントリは ブログラミング（ブログを書きながらプログラミング）です。筆者がポストした時には気づいていない誤り等が後から発覚する恐れがあります。（過去の事例：2014年 1/4 の誤りに 1/9 に気づいて訂正、等 ^^; ）

こんばんは。

昨日は休暇で、昼食後に横になったら夕方まで爆睡してしまい、気づかない内に蓄積した疲労を感じてブログ更新をスッパリ諦めてしまった @sakashushu です。

（皆様も、見えない疲れにお気をつけくださいm(_ _)m ）

Parllet（個人で作成・公開しているアルファ版のWeb家計簿）の、 5/20 にポストしたスマホ対応案の ブログラミング（ブログを書きながらプログラミング）ですね、今日も。（一日空いちゃいましたけども）

回数は１１回目でございます。

スポンサードリンク

■ ざっくり環境

OS：Windows 7 Home Premium
Play Flamework：1.2.4
ブラウザ：IE 11.0
Github公開リポジトリのCommitバージョン（スタート時点）： https://github.com/sakashushu/Parllet/tree/ec253846da6d33644a9d911d91991b098a64f328

■ 現状

前回はページの最低幅を 320px に設定して、

それよりも幅を縮めた時にもページ内の要素が段落ちしないようにしました。

PC 上での改修はある程度落ち着いた気がしていて、続けて動作確認をしていたんですが、まだ問題がありました。

PC サイズで開いていて、残高０を隠す にチェックを入れた時に、

消えるはずの 真ん中部分 のセルが消えなくなりました。

いつものように体当たりでブログラミング（ブログを書きながらプログラミング）していきます。

■ 体当たり開始

5/20 にポストしたスマホ対応案に沿った対応の前は、ちゃんと 真ん中部分 も消えていました。

ということは今回の対応の中に原因が隠れているということです。

なので、対応前のコミットに戻して動かしたものとF12開発者ツールで見比べたり、いろいろやってみました。

その結果一つ、分かったことがあります。

5/28 に設定した display: table-row; を外すと、

真ん中部分 も消えるのです。

この要素は height: 1px;（罫線分）になっており、子要素は height: 0px; です。

高さを無くすことで画面上から見えなくなるのを有効利用していたつもりでしたが、display: table-row; の場合は上手くいかない。

これは 5/28 に width: 0; で失敗したのと同様と捉えて良いですね？多分。

裏を取ろうと検索しても見つからなかったので確信は持てていませんが、そう解釈した方が良さそうです。

そうなってくると、やはり画面上から見えなくするためには display: none; を使うようにしないと。（今後も基本的にそうしよう。）

となるんですが、残高０を隠す にチェックを入れた時の動きは jQuery で実現しています。

jQuery 内で jQuery('***').css('display', 'none'); を使いたいところですが、私の今の作りの場合は問題があるんです。

これはちょっと画像とかで経緯を書くのは長くなりすぎるんで省きまして、ざっくり書きます。

今回の対応以降、レスポンシブな動きは、スタイルシート内で

/* スマホのスタイル */

スマホサイズで以下の時のスタイルを記述

/* タブレットのスタイル */
@media all and (min-width: 480px) {

スマホサイズより大きい時のスタイルを記述

}

の手法で実現しています。

この記述で、ブラウザの幅を拡大縮小していて 480px の境目を超えたタイミングで動的に見た目が切り替わります。

しかし、その状態でさらに jQuery内で CSS を指定してしまうと、そちらの方が優先されてしまうようです。

例を上げると、ページを開いて何もせずに幅を変えている分にはレスポンシブな動きが出来ていますが、残高０を隠す のチェックを入れた後にスマホサイズにしても 真ん中部分 の金額が表示されないままになったりするのです。

そういったことを回避するために今回は、jQuery の addClass を使うことにしました。

元々 Parllet/public/stylesheets/main.css 内に記載のある

.invisible {
display: none;
}

を使います。

Parllet/app/views/DailyAccount/balanceTable.html に以下の部分を追記（太字の部分）

/* divBtStkdRealEach の表示処理 */
function dspDivBtStkdRealEach() {

    （中略）

    for (i=0; i < intLwdaRealSize; i++) {

        （中略）

        if (!((jQuery('.remBkemZero').hasClass('invisible') && aryLwdar[i].lngAmount===0) ||
                (jQuery('.remBkemInv').hasClass('invisible2') && aryLwdar[i].bolInvFlg))) {
            aryIntHt[i] += intMinHt;    //真ん中部分の最低高さ(＝左右端部分のセルの高さ)をここで足す
            jQuery("#divBtStkdRealEach_"+i+" > div").css('border-bottom', '1px solid #aaa').removeClass('invisible');
            jQuery("#divBtStkdRealEach_"+i+" > div:nth-child(2)").css('border-left', '1px solid #aaa');
        } else {
            jQuery("#divBtStkdRealEach_"+i+" > div").css('border-bottom', '0').addClass('invisible');
            jQuery("#divBtStkdRealEach_"+i+" > div:nth-child(2)").css('border-left', '0');
        }

        （中略）

    }

    （中略）

}

/* divBtStkdPrltEach の表示処理 */
function dspDivBtStkdPrltEach() {

    （中略）

    for (i=0; i < intLwdaPrltSize; i++) {

        （中略）

        if (!(jQuery('.remPrltZero').hasClass('invisible') && aryLwdap[i].lngAmount===0)) {
            aryIntHt[i] += intMinHt;    //真ん中部分の最低高さ(＝左右端部分のセルの高さ)をここで足す
            jQuery("#divBtStkdPrltEach_"+i+" > div").css('border-bottom', '1px solid #aaa').removeClass('invisible');
            jQuery("#divBtStkdPrltEach_"+i+" > div:nth-child(2)").css('border-left', '1px solid #aaa');
        } else {
            jQuery("#divBtStkdPrltEach_"+i+" > div").css('border-bottom', '0').addClass('invisible');
            jQuery("#divBtStkdPrltEach_"+i+" > div:nth-child(2)").css('border-left', '0');
        }

        （中略）

    }

    （中略）

}

残高表をリロード！

ありあり。上手くいきません。

F12開発者ツールで見てみると、

#divBtStkdPrlt .child div div { } での display: table-cell; の方が優先されてるようです。

より絞り込んで指定されたスタイルの方が優先されるって、どっかで見たことあるかも。

裏を取るよりやってみた方が早いので 体当たり いきます！

Parllet/public/stylesheets/main.css に以下の部分を追記（太字の部分）

/* 共通のスタイル */

（中略）

#divBtStkdReal > .child > div, #divBtStkdPrlt > .child > div {
    width: 100%;
    display: table-row;
}
#divBtStkdReal > .child > div > div.invisible, #divBtStkdPrlt > .child > div > div.invisible {
    display: none;
}

リロード！