Google
SSブログ

Webアプリのスマホ対応(Parllet の場合 残高表-13) [公開アプリ]

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

01_img.jpg

こんばんは。

@sakashushu です。

Parllet(個人で作成・公開しているアルファ版のWeb家計簿) の、 5/20 にポストしたスマホ対応案ブログラミング(ブログを書きながらプログラミング)はまだ終わりません。

13回目を開始しまーす。

 

スポンサードリンク

 

 

■ ざっくり環境

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

 

 

■ 現状

前回残高0を隠す にチェックを入れた時の、

05_edit1_balance_table_01.jpg

ズレを無くす対応を行いしました。

 

で、今回は他のブラウザ(取りあえず PC 上のみ)での見た目も確認してみたところ、。

02_current_balance_table_01.jpg

Safari でズレが出ておりました・・。

 

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

 

 

■ 体当たり開始

IE と Safari それぞれのデバッグツールで 現金 のセルの高さを見てみました。

IEの方は 278px で、

03_current_balance_table_02.jpg

 

一応ブレークしてセット元の値を見てみると 279px。

04_current_balance_table_03.jpg

罫線分の 1pxを含めると妥当です。

 

Safari の方は 279px・・。

05_current_balance_table_04.jpg

 

一応こちらもセット元の値を見て、やっぱり 279px。

06_current_balance_table_05.jpg

この 1px 分のズレが重なった感じがしますね。

 

で、ソースを見た私の推測は、この要素の子要素(table-cell に該当)によって 1pxの罫線分だけ押し出されてるんじゃないかと。

私は、 前回 編集した行のすぐ下の行で、この子要素にも同じ高さをセットしているんです。

 

まずはそこを外してみます。

Parllet/app/views/DailyAccount/balanceTable.html を以下のように編集(太字の部分)

/* divBtStkdRealEach の表示処理 */
function dspDivBtStkdRealEach() {
    
    (中略)
    
    for (i=0; i < intLwdaRealSize; i++) {
        
        (中略)
        
        jQuery("#divBtStkdRealEach_"+i).css('height', aryIntHt[i]+'px');
        //jQuery("#divBtStkdRealEach_"+i).children('div').height(aryIntHt[i]);
    }
    
    (中略)
    
}

/* divBtStkdPrltEach の表示処理 */
function dspDivBtStkdPrltEach() {
    
    (中略)
    
    for (i=0; i < intLwdaPrltSize; i++) {
        
        (中略)
        
        jQuery("#divBtStkdPrltEach_"+i).css('height', aryIntHt[i]+'px');
        //jQuery("#divBtStkdPrltEach_"+i).children('div').height(aryIntHt[i]);
    }
    
    (中略)
    
}

(分かりにくいかもしれませんが、子要素に高さをセットしている部分をコメントアウトしました。)

 

残高表をリロード!

07_edit1_balance_table_01.jpg

今度は逆の方向性にズレましたね。

(画像は省略しますが IE でも同様のズレになりました。ブラウザ間で挙動が一致しているのは望ましいw)

 

で、ソースを眺めていて気づきました。

私はこれまでの一連の改修の中で、 真ん中部分 をクリックできるようにしました。

そのために、残高0 でも最低限の高さを持たせるようにしました。

最初に 真ん中部分 の高さの合計を決め、各セルの最低限の高さを決め、高さの合計から予め最低高さ×セル数を引いています。(これは、引いた後の高さを金額の比率で按分するためです。)

その部分のコードが今は

intDivBtStkdHtReal = intDivBtStkdHt-intLwdaRealSizeDsp*(1+intMinHt);
intDivBtStkdHtPrlt = intDivBtStkdHt-intLwdaPrltSizeDsp*(1+intMinHt);

となっているんですが、これは box-sizing: border-box; を導入後は矛盾が出ますね。

"1+" は、罫線分を想定してましたから。)

 

ということで修正します!

/* divBtStkdRealEach , divBtStkdPrltEach の表示処理 */
function dspBtStkd() {
    
    (中略)
    
    // セルの(ボーダーの高さ+最低高さ(=左右端部分のセルの高さ))×セル数を予め引いておく
    intMinHt = jQuery('.bt_tbl_each li div').height();    // 真ん中部分の最低高さ(=左右端部分のセルの高さ)
//    intDivBtStkdHtReal = intDivBtStkdHt-intLwdaRealSizeDsp*(1+intMinHt);
//    intDivBtStkdHtPrlt = intDivBtStkdHt-intLwdaPrltSizeDsp*(1+intMinHt);
    intDivBtStkdHtReal = intDivBtStkdHt-intLwdaRealSizeDsp*(intMinHt);
    intDivBtStkdHtPrlt = intDivBtStkdHt-intLwdaPrltSizeDsp*(intMinHt);
    
    dspDivBtStkdRealEach();
    dspDivBtStkdPrltEach();
}

 

リロード!

08_edit2_balance_table_01.jpg

はい、一致しました~。

(また画像は省略しますが、IEでも一致しましたw)

 

 

ということで、今回は以上です!

お疲れ様でした!

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

 

 

 

■ ナカナカ上手くならないけど好きな・・・

"公認 競技用けん玉" です。

09_kendama.jpg

去年の9月の次男の誕生日に、義母に買ってもらいました。(あ、長男の分もあります。)

私も小さい頃にけん玉を持ってて、たまに練習してましたがあまり上手くなりませんでした。

今も思いついた時にちょっとやる程度なので、ナカナカ上手くなりません。

(練習量もそうですが、センスの方にもかなり原因があるかも・・・)

 

 


 

TEL:
08034662740

メール:
sakashushu@gmail.com

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

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

 

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

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

 


nice!(0)  コメント(0)  トラックバック(0) 
共通テーマ:パソコン・インターネット

nice! 0

コメント 0

コメントを書く

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

トラックバック 0

トラックバックの受付は締め切りました

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