前回から１週間放置してしまいました。。。
結局scaffoldで一からさくっと作り直して、ひととおりの機能は実装済みというところで終わってました。
今回はちょっと見た目のほうに手を入れたいと思います。
大した内容じゃないのに記事にすると無駄に長くなってしまう^^;
【目次】
まずは一覧画面。
出力する項目の数を絞って、見た目をちょっと整えました。
Before.
↓
After.
具体的に何したの？
①項目の数を絞る
views/books/index.html.erbからいらないものを消しただけなので、ソースは割愛。
②見た目を整える
(views/books/index.html.erb)
(assets/stylesheets/books.scss)
次は入力画面。
新規作成画面と編集画面が共通で_form.html.erbを見ているので、まとめて修正します。
Before.
↓
After.
(あ、、、キャプチャが編集画面になってる^^;)
具体的に何したの？
①HTMLを整形
(views/books/_form.html.erb) ※scaffoldで作成されたソース
これをとりあえず<table>で組み直します。
vimエディタで文字列置換を３回実行。
３つ目の置換は余計な</div>まで置換しちゃうので要注意w
(views/books/_form.html.erb) ※文字列置換して<table>を前後に追加したソース
②日本語化
(config/application.rb)
(config/locales/ja.yml)
③見た目を整える
(assets/stylesheets/books.scss)
最後は参照画面です。
Before.
↓
After.
具体的に何したの？
①HTMLを整形
自動生成されたソースはこんな感じなのだけど。。。
(views/books/show.html.erb)
すごく扱いにくいので、項目部分をひとまず全部消して入力画面のソースをコピペ。
(views/books/_form.html.erb)
このソースに対して文字列置換を２回実行。
で、こんな感じになりました。
(views/books/show.html.erb)
③見た目を整える
horizonListTableクラスはすでに実装済みなので特にやることはありません。
見た目は今後ガラッと変わる可能性が大なので、とりあえず（仮）。
地味にja.ymlを使った日本語化の部分が僕としては勉強になりましたw
次はなにしようかな？
楽天APIの実装とかやりたいんだけど、やる気が出るといいなー(・∀・)
(｡･ω･)ﾉｼ
コメント