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/b1babc98eef61b57cfabf2990ce0da81ec5a3ae4
■ 現状
前回
スマホサイズでリロードした残高表は以下の状態で、
さらにその状態から PCサイズに拡げると、
こんな感じでした。
これらは、真ん中部分 や SVG部分（#divBtSvgReal, #divBtSvgPrlt）の描画処理で、左右端部分（#divBtTblRealFlm, #divBtTblPrltFlm）のセルの位置や高さを元にしているせいだと思います。
いつものように体当たりでブログラミング（ブログを書きながらプログラミング）していきます。
■ 体当たり開始
左右端部分（#divBtTblRealFlm, #divBtTblPrltFlm）のセルの位置や高さを元にしていることから、私が次に思いつくのは width: 0; にしてしまうことです。
幅の方は他から参照されてないですからね。（たぶん・・。）
元々、width は CSS に直接記述しているので、今回もまずは main.css を編集してみます。
Parllet/public/stylesheets/main.css
に以下のように追記・編集（太字の部分）
/* スマホのスタイル */
（中略）
#divBtSvgReal, #divBtSvgPrlt {
display: none;
}
#divBtTblRealFlm, #divBtTblPrltFlm {
width: 0;
}
/* タブレットのスタイル */
@media all and (min-width: 480px) {
（中略）
#divBtSvgReal, #divBtSvgPrlt {
display: block;
}
#divBtTblRealFlm, #divBtTblPrltFlm {
width: 292px;
}
}
スマホサイズで開いていた残高表をリロードします。
む・・。左端部分（#divBtTblRealFlm） が消えてなくて後ろに見えてますね。
ただ、真ん中部分 の表示は正しくなりました！
display: none; と違って、width: 0; は画面上からは見えなくなるけど高さは保持されてるってことですね。
これは好都合です！
ちなみに右端までスクロールしたところ、SVG部分（#divBtSvgReal, #divBtSvgPrlt） や 右端部分（#divBtTblPrltFlm） は見えていません。
スマホサイズより拡げると表示はPCサイズと同様に戻るところも問題ないですね。
それでは、後ろに見えている 左端部分（#divBtTblRealFlm） の、子要素も同様の CSS 編集をしてみます。
Parllet/public/stylesheets/main.css
に以下のように追記・編集（太字の部分）
/* スマホのスタイル */
（中略）
#divBtSvgReal, #divBtSvgPrlt {
display: none;
}
#divBtTblRealFlm, #divBtTblPrltFlm, .bt_cate_large, .bt_ary_day, .bt_cate_small {
width: 0;
}
/* タブレットのスタイル */
@media all and (min-width: 480px) {
（中略）
#divBtSvgReal, #divBtSvgPrlt {
display: block;
}
#divBtTblRealFlm, #divBtTblPrltFlm {
width: 292px;
}
.bt_cate_large {
width: 190px;
}
.bt_ary_day {
width: 99px;
}
.bt_cate_small {
width: 170px;
}
}
スマホサイズで開いていた残高表をリロード。
さっきはこの時点で後ろに見えていた 左端部分（#divBtTblRealFlm） も消えました！
右端までスクロールしても見えているものはなくて、
スマホサイズより拡げて表示が戻るところも一応再度確認しました。
見た目上はですね。見た目上は、とにかく見えなくはなりました。
あとは、日付入力部分や合計行をレスポンシブ化したときにスクロールバーが消えるかどうか。
見えないだけで、変な位置に陣取ってたりすると、「何も見えないのにスクロールバーは出たまま」とかになるんじゃないかとも思ってますが、その辺も体当たりで試してみるのみです。
ただそれは次回以降で、今回はここまでとします！
お疲れ様でした！
※ 毎度の念のための断りですが、今回編集した内容は現時点（2014/5/23）では公開しているParllet（パレット） の方には反映しておりません。
■ sakashushu のブクログから
"Joel on Software"
一昨日の "Eric Sink on the Business of Software 革新的ソフトウェア企業の作り方" と同様に、この本を買うきっかけになったのも、小野和俊さんのブログエントリ：
「小さなソフトウェアベンダー」という選択肢
で、さらに "Eric ・・・" の中でも Joel について書かれてましたし１ヵ月後の2009年10月に購入していました。
Eric が影響を受けているだけあって、全般的に面白い！。
この本も、私が
Parllet（パレット） を作り始めるきっかけに一役買ったと言えると思います。
まあ、プログラマの方だったら既に読まれてる確率大ですよね（汗）。
今更ながらのご紹介ということでm(_ _)m
TEL：
08034662740
メール：
sakashushu@gmail.com
ツイッター：
https://twitter.com/sakashushu
フェイスブック：
https://www.facebook.com/sakashushu
ご連絡・フォロー・友達申請 等、いつでもお気軽にどうぞ！
またお越しくださいませませ！
コメント 0