Google
SSブログ
Parllet（個人作成Web家計簿アプ.. ｜私の「Emacs 小指」回避法 その２（.. ブログトップ

Parllet（個人作成Web家計簿アプリ）の残高表改修－９（CSS height の小数点）　[公開アプリ]

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

01_img.jpg

こんばんは。

挿絵にシレっと おととい届いたマジンガー を載せちゃってる @sakashushu です。

Parllet（個人で作成・公開しているアルファ版のWeb家計簿）の、4/28 にポストした改修案 に沿ってのブログラミング（ブログを書きながらプログラミング）は、 前回 に作業完了させようと気合を入れて進めてはいたたんですが、スマホでの動作確認をしたところ問題がありました・・orz

ということで今回はその対応を行います。

 

スポンサードリンク

 

 

■ ざっくり環境

OS：Windows 7 Home Premium
Play Flamework：1.2.4
スマホ：Android 4.1.1（freebit mobile PandA）
Github公開リポジトリのCommitバージョン（スタート時点）： こちら

 

 

■ スマホでの問題点

真ん中部分の見た目の問題です。

02_current_sp_01.jpg

左の実残高の全体の高さが、右のParllet残高に比べて微妙に小さくなっています。

些細なこととお感じになる方もいらっしゃるかもしれませんが、Parllet残高はあくまでも仮想的にの残高を振り分けたもので、残高の合計は常に実残高とピッタリ一致しているのです。

その意味で、真ん中部分の全体の高さは左右でピッタリと一致していないといけないんです。

 

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

 

 

■ 体当たり開始

上記の画像で、実残高の方が全体の高さが小さくなっていましたが、セルの数は実残高の方が多いです。

最初はそこに不思議な感覚を持ちましたが、よく考えてみると逆に分かりやすい。

数が増えるほどに小さくなるということは、値が切り捨てられている数が多いということ。

 

これは、完全に思い当たる節があります。

Parllet（パレット） の動作確認で主に使っているブラウザは IE 11.0 です。

ご存知の通り私はいつも体当たりで作業をしています。

IE 11.0 上での表示を見ながら真ん中部分の各セルの按分の動きを作り、セルの高さは小数点第２位まで有効にできると判断した記憶があります。

これがもし、Android のブラウザでは切り捨てられているとしたらどうでしょう？

セルの数が多いほど、全体の高さは小さくなるはずです。

 

一応ちょっとだけ、裏を取ろうとしてみます。

「css height 小数点」で検索！

JavaScriptやPHPなどでmarginやpaddingなどが書き出されることがよくあるが、小数点の処理（切り上げ、切り下げ、四捨五入）などをしていないとブラウザごとに見た目の違いが出てしまうため気をつけたい。

via: ブラウザによりCSSの小数点の切り上げ方が異なる | iwb.jp

はい！

もぉ～、タイトルだけで充分です。

みんなそうだと思いますが、クロスブラウザ対応はホントに面倒です～。

今回のことで言えば、データに小数点を持たせなければ間違いないですよね？

その方向で体当たり、いきます！

 

今まではセルの高さに小数点第２位まで持たせていましたが、javascript では小数点の計算に誤差が出るので計算の前に100倍し、計算後に100で割っていました。

小数点を持たせなければ、その必要も無いので、100倍する部分と100で割る部分を削除し、計算の際に小数点を四捨五入します。

実際には単純に編集しますが、ここでは編集内容が分かりやすいように、編集前の処理をコメントアウトしたものを載せます。

Parllet/app/views/DailyAccount/balanceTable.html 内での編集（太字の部分）

/* divBtStkdRealEach , divBtStkdPrltEach の表示処理 */
function dspBtStkd() {
    var jqHt,
        jqHtReal = jQuery('#divBtTblRealFlm .bt_tbl_each').height()-jQuery('#divBtTblRealFlm .bt_tbl_each li:first-child').height(),
        jqHtPrlt = jQuery('#divBtTblPrltFlm .bt_tbl_each').height()-jQuery('#divBtTblPrltFlm .bt_tbl_each li:first-child').height();
    jqHt = jqHtReal > jqHtPrlt ? jqHtReal : jqHtPrlt;
    
//    intDivBtStkdHt = jqHt*2*100;
    intDivBtStkdHt = jqHt*2;
    
    （中略）
    
    // セルの(ボーダーの高さ＋最低高さ(＝左右端部分のセルの高さ))×セル数を予め引いておく
    intMinHt = jQuery('.bt_tbl_each li div').height();    // 真ん中部分の最低高さ(＝左右端部分のセルの高さ)
//    intDivBtStkdHtReal = intDivBtStkdHt-intLwdaRealSizeDsp*(1+intMinHt)*100;
//    intDivBtStkdHtPrlt = intDivBtStkdHt-intLwdaPrltSizeDsp*(1+intMinHt)*100;
    intDivBtStkdHtReal = intDivBtStkdHt-intLwdaRealSizeDsp*(1+intMinHt);
    intDivBtStkdHtPrlt = intDivBtStkdHt-intLwdaPrltSizeDsp*(1+intMinHt);
    
    dspDivBtStkdRealEach();
    dspDivBtStkdPrltEach();
}

/* divBtStkdRealEach の表示処理 */
function dspDivBtStkdRealEach() {
    
    （中略）
    
    for (i=0; i < intLwdaRealSize; i++) {
//        var intHt = intDivBtStkdRealSumAmnt===0 ? intDivBtStkdHtReal / intLwdaRealSizeDsp
//                : Math.abs(aryLwdar[i].lngAmount) / intDivBtStkdRealSumAmnt*intDivBtStkdHtReal,
//                strHt = intHt.toFixed(0);
//        intHt = parseInt(strHt);
        var intHt = Math.round(intDivBtStkdRealSumAmnt===0 ? intDivBtStkdHtReal / intLwdaRealSizeDsp
                : Math.abs(aryLwdar[i].lngAmount) / intDivBtStkdRealSumAmnt*intDivBtStkdHtReal);
        
        （中略）
        
        if (!((jQuery('.remBkemZero').hasClass('invisible') && aryLwdar[i].lngAmount===0) ||
                (jQuery('.remBkemInv').hasClass('invisible2') && aryLwdar[i].bolInvFlg))) {
//            aryIntHt[i] += intMinHt*100;
            aryIntHt[i] += intMinHt;    //真ん中部分の最低高さ(＝左右端部分のセルの高さ)をここで足す
            jQuery("#divBtStkdRealEach_"+i).css('border-bottom', '1px solid #aaa');
        } else {
            jQuery("#divBtStkdRealEach_"+i).css('border-bottom', '0');
        }
        
        （中略）
        
//        jQuery("#divBtStkdRealEach_"+i).height(aryIntHt[i] / 100);
//        jQuery("#divBtStkdRealEach_"+i).children('div').height(aryIntHt[i] / 100);
        jQuery("#divBtStkdRealEach_"+i).height(aryIntHt[i]);
        jQuery("#divBtStkdRealEach_"+i).children('div').height(aryIntHt[i]);
    }
    
    
    // 誤差を最大幅のセルに寄せる
    if (anyHtExistFlg) {
        aryIntHt[intMaxHtIdx] += intDivBtStkdHtReal-intSumHt;
//        jQuery("#divBtStkdRealEach_"+intMaxHtIdx).height(aryIntHt[intMaxHtIdx] / 100);
//        jQuery("#divBtStkdRealEach_"+intMaxHtIdx).children('div').height(aryIntHt[intMaxHtIdx] / 100);
        jQuery("#divBtStkdRealEach_"+intMaxHtIdx).height(aryIntHt[intMaxHtIdx]);
        jQuery("#divBtStkdRealEach_"+intMaxHtIdx).children('div').height(aryIntHt[intMaxHtIdx]);
    }
}

/* divBtStkdPrltEach の表示処理 */
function dspDivBtStkdPrltEach() {
    
    （中略）
    
    for (i=0; i < intLwdaPrltSize; i++) {
//        var intHt = intDivBtStkdPrltSumAmnt===0 ? intDivBtStkdHtPrlt / intLwdaPrltSizeDsp
//                : Math.abs(aryLwdap[i].lngAmount) / intDivBtStkdPrltSumAmnt*intDivBtStkdHtPrlt,
//            strHt = intHt.toFixed(0);
//        intHt = parseInt(strHt);
        var intHt = Math.round(intDivBtStkdPrltSumAmnt===0 ? intDivBtStkdHtPrlt / intLwdaPrltSizeDsp
                : Math.abs(aryLwdap[i].lngAmount) / intDivBtStkdPrltSumAmnt*intDivBtStkdHtPrlt);
        
        （中略）
        
        if (!(jQuery('.remPrltZero').hasClass('invisible') && aryLwdap[i].lngAmount===0)) {
//            aryIntHt[i] += intMinHt*100;
            aryIntHt[i] += intMinHt;    //真ん中部分の最低高さ(＝左右端部分のセルの高さ)をここで足す
            jQuery("#divBtStkdPrltEach_"+i).css('border-bottom', '1px solid #aaa');
        } else {
            jQuery("#divBtStkdPrltEach_"+i).css('border-bottom', '0');
        }
        
        （中略）
        
//        jQuery("#divBtStkdPrltEach_"+i).height(aryIntHt[i] / 100);
//        jQuery("#divBtStkdPrltEach_"+i).children('div').height(aryIntHt[i] / 100);
        jQuery("#divBtStkdPrltEach_"+i).height(aryIntHt[i]);
        jQuery("#divBtStkdPrltEach_"+i).children('div').height(aryIntHt[i]);
    }
    
    // 誤差を最大幅のセルに寄せる
    if (anyHtExistFlg) {
        aryIntHt[intMaxHtIdx] += intDivBtStkdHtPrlt-intSumHt;
//        jQuery("#divBtStkdPrltEach_"+intMaxHtIdx).height(aryIntHt[intMaxHtIdx] / 100);
//        jQuery("#divBtStkdPrltEach_"+intMaxHtIdx).children('div').height(aryIntHt[intMaxHtIdx] / 100);
        jQuery("#divBtStkdPrltEach_"+intMaxHtIdx).height(aryIntHt[intMaxHtIdx]);
        jQuery("#divBtStkdPrltEach_"+intMaxHtIdx).children('div').height(aryIntHt[intMaxHtIdx]);
    }
}

 

リロードします！

03_edit1_sp_01.jpg

真ん中部分の左右の全体の高さは一致しましたので、やはりズレの原因は小数点の切り捨てですね。

今回も、キャプチャ画像は省略しますが PC 上の IE・Firefox・Chrome・Safari と、Android・iPhone でも確認しました。

 

はい、といったところで今回は以上です！

お疲れ様でした！

※ いつもならここで、

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

と書いていたんですが、今回は反映しております！！

Github公開リポジトリのCommitバージョンはこちら→ https://github.com/sakashushu/Parllet/tree/089297122ea25696d6883dd6e821f3229d9a0704 です。

Parllet（パレット） を使ったことが無い方も、これを機会に是非お試しくださいませm(_ _)m

 

 

TEL：
08034662740

メール：
sakashushu@gmail.com

ツイッター：
https://twitter.com/sakashushu

フェイスブック：
https://www.facebook.com/sakashushu

 

ご連絡・フォロー・友達申請 等、いつでもお気軽にどうぞ！

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

 


タグ：公開アプリ Parllet 体当たり ブログラミング CSS jQuery
2014-05-13 19:40  nice!(0)  コメント(0)  トラックバック(3) 
共通テーマ：パソコン・インターネット

nice! 0

コメント 0

コメントを書く

お名前：
URL：
コメント：
画像認証：
下の画像に表示されている文字を入力してください。

トラックバック 3

トラックバックの受付は締め切りました
Parllet（個人作成Web家計簿アプ.. ｜私の「Emacs 小指」回避法 その２（.. ブログトップ

スポンサードリンク




私の本棚


この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。