読者です 読者をやめる 読者になる 読者になる

三流プログラマの雑記

プログラム、ゲーム、株、その他雑記など書いてます。

パチンコ収支表の更新とBootstrap

さてはて、最後の更新から暫くたってしまったパチンコ収支表。

一ヶ月前のソースを見ると、頭を抱えたくなる汚ソース|||orz|||

ということで、リファクタリング
リファクタした後Rspecを書こうとして、、、やはり力尽きたorz
次こそはRspecを書くべ

パチンコ・パチスロ収支表


しかし、収支表を作ったのに、行く頻度が減ってしまい、、、
現状は、あまり役には立っていないという(汗

さて、そろそろ本題、デザインが苦手なので基本的にはBootstrapを使用し、
レスポンシブルなWEBページの作成をするようにしていました。

が、、、しかし!
「navbar」を設定し、bodyのstyle='padding-top:70px;'なんてベタに書いていたがゆえに、
サイズによってはnavが2段になって表示がグシャる|||orz|||
ということで、少しだけ対応する方法を以下に記述する。

編集前

  <body style='padding-top:70px;'>
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="/">パチンコ収支表</a>
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <% if user_signed_in? %>
            <li>
              <%= link_to '遊戯店情報登録', new_stores_path %>
            </li>
            <li>
              <%= link_to '遊戯店情報更新', stores_path %>
            </li>
            <li>
              <%= link_to '遊戯結果登録', new_balance_sheets_path %>
            </li>
            <li></li>
            <% end %>
          </ul>
          #・・・(省略)
          <% end %>
        </div>
      </div>
    </nav>

編集後

  <body>
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="/">パチンコ収支表</a>
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <% if user_signed_in? %>
            <li>
              <%= link_to '遊戯店情報登録', new_stores_path %>
            </li>
            <li>
              <%= link_to '遊戯店情報更新', stores_path %>
            </li>
            <li>
              <%= link_to '遊戯結果登録', new_balance_sheets_path %>
            </li>
            <li></li>
            <% end %>
          </ul>
          #・・・(省略)
          <% end %>
        </div>
      </div>
    </nav>
@media (max-width: 225px) {
  body {
    padding-top: 120px;
  }
}

@media (min-width: 225px) and (max-width: 767px) {
  body {
    padding-top: 70px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  body {
    padding-top: 120px;
  }
}

@media (min-width: 992px) {
  body {
    padding-top: 70px;
  }
}

上記例では「min-width」、「max-width」は以下の画像のように2段になる所のサイズをmax-widthに指定するとよいかと思います。
その場合、上記のようにしておくと、ブラウザのwidthによってbodyのpaddingを切り替えてくれます。

二段になった場合
f:id:morio_1101:20150218221619p:plain

スマホ想定のページの場合
f:id:morio_1101:20150218221623p:plain

通常のページの場合
f:id:morio_1101:20150218221626p:plain

と、それぞれのページでbodyのpadding-topが自動的に切り替わる。
もう少しスマートな方法で記述したいなぁ、、、と思ったけれど、とりあえずはこれで回避!

さてはて、今後のTODOをば、、、

・過去のパチンコ収支の詳細確認(現状月単位でまとめているため)
・UI、UX関係の勉強使いやすいサイトに、、、
・グラフを用いた収支や比率の算出(JS勉強のため無理やりいれるぜ!)
・エラー文言の出力方法を再検討(エラー出力がわかりにくいので、、、デザイン調整)
・携帯対応(優先度低、、、)