Webアプリのスマホ対応（Parllet の場合 残高表－９） [公開アプリ]
※ 注意！ このエントリは ブログラミング（ブログを書きながらプログラミング）です。筆者がポストした時には気づいていない誤り等が後から発覚する恐れがあります。（過去の事例：2014年 1/4
の誤りに 1/9 に気づいて訂正、等 ^^; ）
こんばんは。
高校生の頃に宮崎県小林市の出の山(いでのやま)公園で見れたホタルの群れをもう一回見たい、
@sakashushu
です。
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/7fc132c261d014458190317f0037ac67e0b1935a
■ 現状
前回
は、理由は分かっていませんが display: table; を外したことで、大きくなっていたヘッダーセルの高さが元に戻りました。
今回は 実際の残高 の表の 明細行 の方の、下罫線が消えてしまった問題への対処を行います。
いつものように体当たりでブログラミング（ブログを書きながらプログラミング）していきます。
■ 体当たり開始
今の作りで、下罫線は
Parllet/app/views/DailyAccount/balanceTable.html
の中で jQuery で設定しています。（太字の部分）
/* 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).css('border-bottom', '1px solid #aaa');
} else {
jQuery("#divBtStkdRealEach_"+i).css('border-bottom', '0');
}
（中略）
}
（中略）
}
この要素の階層のさらに下に、項目名称 と今回新たに表示させている 金額 の要素があります。
今回は下罫線も表示しなければなりませんが、項目名称 と 金額 の間にも縦の罫線があった方がいいような気もしています。
また、下罫線が見えなくなったのは、display: table; ＞ display: table-row; ＞ display: table-cell; と記載したことで、最下層の table-cell が最前面に見えているようにも取れます。
縦の罫線を表示させるついでに、table-cell の要素の方に下罫線も引くように変えてみます。
/* 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');
jQuery("#divBtStkdRealEach_"+i+" > div:nth-child(2)").css('border-left', '1px solid #aaa');
} else {
jQuery("#divBtStkdRealEach_"+i+" > div").css('border-bottom', '0');
jQuery("#divBtStkdRealEach_"+i+" > div:nth-child(2)").css('border-left', '0');
}
（中略）
}
（中略）
}
スマホサイズで開いていた残高表をリロード！
お♪
私にしては珍しく、スッとうまく行きましたね。
一応スマホサイズより大きい幅の方も変化が無いか確認。
大丈夫ですね。
それでは～、
5/27
から実残高の方だけに絞ってやってきた改修も含めて、Parllet残高の方にも適用します。
Parllet/app/views/DailyAccount/balanceTable.html
に以下のように追記（太字の部分）
/* 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');
jQuery("#divBtStkdPrltEach_"+i+" > div:nth-child(2)").css('border-left', '1px solid #aaa');
} else {
jQuery("#divBtStkdPrltEach_"+i+" > div").css('border-bottom', '0');
jQuery("#divBtStkdPrltEach_"+i+" > div:nth-child(2)").css('border-left', '0');
}
（中略）
}
（中略）
}
<div id="divBtStkdPrlt">
<div class="title child menu_cell">
${REMAINDER_TYPE_PARLLET}
</div>
<div class="child">
%{vCnt=0}%
#{list items:lWDA_P, as:'lwdap'}
%{vMenuCell = lwdap.sItem==REMAINDER_TYPE_NOT_PARLLET ? '' : ' menu_cell'}%
<div id="divBtStkdPrltEach_${vCnt}" class="${vMenuCell}" data-idx="${vCnt}">
<div>
${lwdap.sItem}
</div>
<div>
${lwdap.lstWdtd[0].lAmount.format('###,###')}
</div>
</div>
%{vCnt++}%
#{/list}
</div>
</div> <!-- divBtStkdPrlt -->
Parllet/public/stylesheets/main.css
に以下のように追記（太字の部分）
/* 共通のスタイル */
（中略）
#divBtStkdReal > .child:nth-child(2), #divBtStkdPrlt > .child:nth-child(2) {
width: 100%;
display: table;
}
#divBtStkdReal > .child > div, #divBtStkdPrlt > .child > div {
width: 100%;
display: table-row;
}
/* スマホのスタイル */
#divBtStkdReal > .child > div > div:first-child, #divBtStkdPrlt > .child > div > div:first-child {
width: 60%;
}
#divBtStkdReal > .child > div > div:nth-child(2), #divBtStkdPrlt > .child > div > div:nth-child(2) {
width: 40%;
}
/* タブレットのスタイル */
@media all and (min-width: 480px) {
（中略）
#divBtStkdReal > .child > div > div:first-child, #divBtStkdPrlt > .child > div > div:first-child {
width: 116px;
}
#divBtStkdReal > .child > div > div:nth-child(2), #divBtStkdPrlt > .child > div > div:nth-child(2) {
display: none;
}
}
リロード！
あ、忘れてました。
金額はやっぱり右寄せにしときたいですね。
Parllet/public/stylesheets/main.css
に再度追記（太字の部分）
/* スマホのスタイル */
（中略）
#divBtStkdReal > .child > div > div:nth-child(2), #divBtStkdPrlt > .child > div > div:nth-child(2) {
width: 40%;
text-align: right;
padding-right: 4px;
}
リロード！
はい、いい感じになりました。
ここでも一応、スマホサイズより幅を拡げた時に変わってないか確認。
問題ないです！
といったところで、今回は以上です！
お疲れ様でした！
■ 一生ものの鼻毛カッター
"ゾーリンゲン ニュー鼻毛カッター" です。
いつから ニュー なのかは定かではないですw
私が購入したのは、
2012年の1月ですね。
それまでは家電量販店で売ってる、980円ぐらいの電動の鼻毛カッターを使ってたんですが、鼻毛引っ張られて痛いし、すぐダメになるし。
「もっといいのないかな～」ってんで、ネットで探して見つけたのが、このゾーリンゲンの鼻毛カッター。
手動でゆっくり回してるのに、ちゃんと切れます。
それに、電動のよりも切り洩れが少ない！
私はこれ使い始めてから鼻毛知らず。
確実に一生ものだと分かる逸品です！
TEL：
08034662740
メール：
sakashushu@gmail.com
ツイッター：
https://twitter.com/sakashushu
フェイスブック：
https://www.facebook.com/sakashushu
ご連絡・フォロー・友達申請 等、いつでもお気軽にどうぞ！
またお越しくださいませませ！
コメント 0