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

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

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

【目次】

一覧画面

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

Before.

↓

After.


具体的に何したの？

①項目の数を絞る

• 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.


↓

After.
(あ、、、キャプチャが編集画面になってる^^;)


具体的に何したの？

①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エディタで文字列置換を３回実行。
３つ目の置換は余計な</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.


↓

After.


具体的に何したの？

①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>

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

:%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の実装とかやりたいんだけど、やる気が出るといいなー(・∀・)

(｡･ω･)ﾉｼ