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

備忘録のような何か

何か += 備忘録( 日々のこと, 妄想, IT, DIY, 畑仕事 );

【開発日誌/Ruby】まずは外見から

IT プログラミング Ruby

前回から1週間放置してしまいました。。。
結局scaffoldで一からさくっと作り直して、ひととおりの機能は実装済みというところで終わってました。

今回はちょっと見た目のほうに手を入れたいと思います。
大した内容じゃないのに記事にすると無駄に長くなってしまう^^;

【目次】


一覧画面

まずは一覧画面。
出力する項目の数を絞って、見た目をちょっと整えました。

Before.
f:id:m_uta:20160130155357p:plain:w500


After.
f:id:m_uta:20160207191453p:plain:w500

具体的に何したの?

①項目の数を絞る

  • Bookモデルにある項目が全部並んでたので、必要そうなもの以外は削除。
  • 操作内容(右端)に"show / edit / delete"とあったのを"編集 / 削除"にして、"show"は「タイトル」のリンクから飛ぶように変更。

views/books/index.html.erbからいらないものを消しただけなので、ソースは割愛。

②見た目を整える

  • CSS(SCSS)を適用する。

(views/books/index.html.erb)

<!-- <table>タグにclass属性を追加 -->
<table class="verticalListTable">


(assets/stylesheets/books.scss)

.verticalListTable {
  border-collapse: collapse;
  line-height: 1.5px;
  border: 1px solid #ccc;

  th {
    padding: 10px;
    font-weight: bold;
    border: 1px solid #ccc;
    border-bottom: 2px solid #c00;
    background: #dcdcd1;
  }

  td {
    padding: 10px;
    vertical-align: top;
    border: 1px solid #ccc;
  }
}


入力画面(新規/編集)

次は入力画面。
新規作成画面と編集画面が共通で_form.html.erbを見ているので、まとめて修正します。

Before.
f:id:m_uta:20160207194159p:plain:w500



After.
(あ、、、キャプチャが編集画面になってる^^;)
f:id:m_uta:20160207194203p:plain:w500

具体的に何したの?

①HTMLを整形

  • scaffoldで作成されたHTMLを整形する。

(views/books/_form.html.erb) ※scaffoldで作成されたソース

<div class="field">
  <%= f.label :title %><br>
  <%= f.text_field :title %>
</div>
<div class="field">
  <%= f.label :titleKana %><br>
  <%= f.text_field :titleKana %>
</div>
<div class="field">
  <%= f.label :subTitle %><br>
  <%= f.text_field :subTitle %>
</div>


これをとりあえず<table>で組み直します。

vimエディタで文字列置換を3回実行。
3つ目の置換は余計な</div>まで置換しちゃうので要注意w

:%s/<div class="filed">/<tr><th>/g
:%s;<br>;</th><td>;g
:%s;</div>;</td></tr>;g


(views/books/_form.html.erb) ※文字列置換して<table>を前後に追加したソース

<table class="horizonListTable">
  <tr><td>
      <%= f.label :title %></td><td>
      <%= f.text_field :title %>
  </td></tr>
  <tr><td>
      <%= f.label :titleKana %></td><td>
      <%= f.text_field :titleKana %>
  </td></tr>
  <tr><td>
      <%= f.label :subTitle %></td><td>
      <%= f.text_field :subTitle %>
  </td></tr>
</table>


②日本語化

  • config/application.rbにlocaleの定義を追加
  • config/locales/ja.ymlファイルを追加

(config/application.rb)

config.i18n.default_locale = :ja


(config/locales/ja.yml)

ja:
  activerecord:
    attributes:
      book:
        title:              'タイトル'
        titleKana:          'タイトル(かな)'
        subTitle:           'サブタイトル'
        subTitleKana:       'サブタイトル(かな)'
        seriesName:         'シリーズ名'
        seriesNameKana:     'シリーズ名(かな)'
        author:             '著者'
        authorKana:         '著者(かな)'


③見た目を整える

  • CSS(SCSS)を適用する。

(assets/stylesheets/books.scss)

.horizonListTable {
  border-collapse: collapse;
  line-height: 1.5px;
  border: 1px solid #ccc;

  label {
    line-height: 25px;
  }

  th {
    text-align: left;
    padding-left: 5px;
    font-weight: bold;
    border: 1px solid #ccc;
    border-right: 2px solid #c00;
    background: #dcdcd1;
  }

  td {
    padding-left: 5px;
    border: 1px solid #ccc;
  }
}


参照画面

最後は参照画面です。

Before.
f:id:m_uta:20160207200742p:plain:w500



After.
f:id:m_uta:20160207200744p:plain:w500

具体的に何したの?

①HTMLを整形

  • scaffoldで作成されたHTMLを整形する。

自動生成されたソースはこんな感じなのだけど。。。
(views/books/show.html.erb)

<p>
  <strong>Title:</strong>
  <%= @book.title %>
</p>

<p>
  <strong>Titlekana:</strong>
  <%= @book.titleKana %>
</p>


すごく扱いにくいので、項目部分をひとまず全部消して入力画面のソースをコピペ。

(views/books/_form.html.erb)

<table class="horizonListTable">
  <tr><th>
      <%= f.label :title %></th><td>
      <%= f.text_field :title %>
  </td></tr>
  <tr><th>
      <%= f.label :titleKana %></th><td>
      <%= f.text_field :titleKana %>
  </td></tr>
</table>


このソースに対して文字列置換を2回実行。

:%s/f.label/label :book,/g
:%s/f.text_field :/@book./g


で、こんな感じになりました。

(views/books/show.html.erb)

<table class="horizonListTable">
  <tr><th>
      <%= label :book, :title %></th><td>
      <%= @book.title %>
  </td></tr>
  <tr><th>
      <%= label :book, :titleKana %></th><td>
      <%= @book.titleKana %>
  </td></tr>
</table>


③見た目を整える

  • CSS(SCSS)を適用する。

horizonListTableクラスはすでに実装済みなので特にやることはありません。


見た目は今後ガラッと変わる可能性が大なので、とりあえず(仮)。
地味にja.ymlを使った日本語化の部分が僕としては勉強になりましたw

次はなにしようかな?
楽天APIの実装とかやりたいんだけど、やる気が出るといいなー(・∀・)

(。・ω・)ノシ

広告を非表示にする