Parllet（個人作成Web家計簿アプリ）の残高表改修－１：sakashushuの取りあえずブログ：So-netブログ

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

so-net ブログでのサイドバーに G.. ｜Parllet（個人作成Web家計簿アプ.. ブログトップ

Parllet（個人作成Web家計簿アプリ）の残高表改修－１　[公開アプリ] [編集]

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

sakashushu です。

Parllet（個人で作成・公開しているアルファ版のWeb家計簿）の、4/28 にポストした改修案。

１．真ん中部分の全体の高さは最初から固定にせず、常に左右端部分の高さの約２倍とする。

については、ある程度簡単に行けそうな気がしないでもないので、ちょっとブログラミング（ブログを書きながらプログラミング）を始めてみようかと思います。

スポンサードリンク

■ ざっくり環境

OS：Windows 7 Home Premium
Play Flamework：1.2.4
ブラウザ：IE 11.0
Github公開リポジトリのCommitバージョン（スタート時点）：こちら

■ 現状

以下、4/28 にポストした改修案から。

現在、残高表の見た目はこんなです。（画像１）

（中略）

画像１での真ん中で接している部分は、内訳それぞれの残高の比率にほぼ合わせて高さを変えています。

そして、画像１のように内訳の数が少ない時は真ん中部分の高さの合計は400px固定にしています。

（中略）

この400pxという高さの合計は最初は固定ですが、内訳が増えて左右端部分の全体の高さの方が大きくなると、今度はその高さとぴったり一致するようになります。（画像２）

via: Parllet（個人作成Web家計簿アプリ）の残高表改修案

現時点で、画像１のユーザー（ユーザー１）と画像２のユーザー（ユーザー２）の左右端部分・真ん中部分それぞれの高さを確認しておきます。

ユーザー１

左端部分（実残高）の高さ： 54
右端部分（Parllet残高）の高さ： 81
真ん中部分の高さ： 400

ユーザー２

左端部分（実残高）の高さ： 405
右端部分（Parllet残高）の高さ： 135
真ん中部分の高さ： 435

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

■ 体当たり開始

Parllet/app/views/DailyAccount/balanceTable.html の以下の辺りで真ん中部分の高さを設定しています。

javascriptの小数点計算の誤差（バグ）を回避するために数値は100倍（最終的には100で割ってます）。

左右端部分の高さが小さい時に400px固定にする為に使っている変数は intDivBtStkdHtInit です。

4/28 の改修案の改修案の、

１．真ん中部分の全体の高さは最初から固定にせず、常に左右端部分の高さの約２倍とする。

に沿って改修します。

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;
    （中略）
}

再度、画像１のユーザー（ユーザー１）と画像２のユーザー（ユーザー２）の左右端部分・真ん中部分それぞれの高さを確認します。

ユーザー１