Webアプリのスマホ対応（Parllet の場合　残高表－１４）：sakashushuの取りあえずブログ：So-netブログ

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

Webアプリのスマホ対応（Parllet.. ｜Webアプリのスマホ対応（Parllet.. ブログトップ

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
スマホ：iphone4
Github公開リポジトリのCommitバージョン（スタート時点）： https://github.com/sakashushu/Parllet/tree/5723a3f6f53317aa360d411c9631352bffe82acb

■ 現状

前回は Safari で出ていた 真ん中部分 の

ズレを修正しました。

今回は iPhone4 での見た目も確認してみたところ、

・・・。

段落ち～！

しかもこれはかなり恥ずかしい！

なんでかって、

段落ちしないサイズに戻すと、320px でした。
（中略）
信じてもらえない気はしますが、ホントだからしょうがない。
320px ってのがピッタリ一致していたことに、自分が一番ビックリしてます。
（まあ単なる偶然ですし、参考ページとは指定の仕方等は違いますが・・。）

via: Webアプリのスマホ対応（Parllet の場合　残高表－１０）

なんて、書いちまってたからです・・・orz

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

■ 体当たり開始

いつもザックリとした対応の私ですが、今回もです。

主に CSS の編集で、iPhone4 で段落ちのみを回避します。

正直言うと、日付入力の部分の作ったのはかなり初期の頃で、html の作りから変えたいんですが、一旦スピード重視での対応をします。

そうする理由は、ちょっと前に見た以下のページの影響です。

とにかくまず「完成」させろ!!
どこまで丁寧に仕事してるんだ？
そんな細部まで完璧にやれといったか？
手触り？
高速、軽量化？
神は細部に宿る？
馬鹿野郎!!

1章だけ100点で、残り9章が0点だったら納品できねーんだよ!!
だいたいそんなスピードじゃ、誰よりも先にお前が飽きるだろ!!!
そんなやる気も感性も鈍った状態で完成にたどりつけるか!!

via: その完璧主義を叩きなおしてやる! - teruyastarはかく語りき

まあ、 Parllet（パレット）は一旦出来上がったものではあるし、アルファ版とはいえ公開もしているから微妙だけど、このエントリ単発としては乗っかっておきます。

（次のエントリで掘り下げるかもしれませんがw）

という訳で、まずは html 内で半角スペースを直書きしている箇所を消してみます。

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

<div id="btBasisDate">
    <a id="idPreMonth" class="aBtn fontJura" tabindex="0"><<span>&{'views.dailyaccount.movetype.month.pre'}</span></a>
    <span id="daPaddingYearMonth">
        <select id="idYear">
        </select>
        &{'year'}
        <select id="idMonth">
        </select>
        &{'month'}
        
        <span>
        ${sBasisDate.substring(8,10)}
        </span>
        
        &{'views.common.day'}
        <div class="inlineVerticalMiddle">
            <input type="text" class="datepickerJump invisible dpClImg"
                value="${sBasisDate}" />
        </div>
    </span>

    <a id="idNextMonth" class="aBtn fontJura" tabindex="0">><span>&{'views.dailyaccount.movetype.month.next'}</span></a>
</div>