Minami.rb

Lesson3

Lesson2の復習

使ったコマンド

$ rake routes
$ rails generate model テーブル名 カラム:データ型
$ rake db:migrate
$ rails generate controller コントローラー名s #コントローラー名は複数形で書くこと！

編集したファイル

これらのファイルの関係性、覚えてますか？ Rails内の役割分担

今日は見た目（デザイン）を整えるお話

webアプリである以上、やっぱり見た目は大事ですね。
どこかの企業ホームページなどはともかく、個人サイトや社内アプリで使うぐらいなら著作権フリーのデザインがいろいろあるので、どんどん活用しましょう。

また、ここではLesson3でデザインを取り上げましたが、適応させるタイミングはもっと早くてもいいと思います。
見た目がきれいなところにいろいろ実装していくほうが完成イメージが湧きやすいし、実装していてもテンションがあがると思います。

I18nの設定

Railsでのデフォルトの表示言語は英語です。
ちょっとぐらい英語でも、、、と思わなくはないのですが、せっかく使えるエラーメッセージも全部英語になってしまいますので、そこは日本語にしておきましょう。

application.rb

# config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s]
  config.i18n.default_locale = :ja #:enを:jaに変更

ここまでで、ja.yml にあるエラーメッセージなどが日本語化されます。ついでに、フィールド（カラム）も日本語になるように編集しましょう。

ja.yml

activerecord:
    errors:
      template:
  # 省略
    attributes:
      anime:
        name: 名前

これでviews/animes/_form.html.erb等でページを表示してみましょう。

フィールド（カラム）のタイトルが日本語になればOKです。

残念ながら、index.html.erb や show.html.erb などでthタグに直接書かれているフィールド名は、ひとつずつ手動で変更しないと変わりません・・・。

デザインのfix

Asset Pipeline?

Railsには、Asset Pipelineという賢い機能があります。Asset Pipelineは、assetsフォルダの下に置かれたjavascript系やcss系のコードをコンパクトに圧縮して、ブロジェクト毎に１つのファイルとして読み取れるようにしてくれます。このおかげで、アプリのページを読み込むとき、サーバーとjsやcssファイルのやり取りが少なくて済み、その分、レスポンスが速くなるというものです。


それぞれのソースは、置く場所が決まっています。また、scssはcssへ、coffeescriptはjacascriptへコンパイルしてくれるという優れものです。ちなみに、lessやhamlも使えますが、別途専用のgemをインストールして設定してください。

  *  html, erb                => app/views/
  *  scss, css                => */assets/stylesheets/
  *  coffeescript, javascript => */assets/javascripts/
  *  image                    => */assets/images/

デザインを決める css や javascript などのファイルは、基本的には app/aseets の下ですが、Rails4系になって置き場所が増えました。

  * app/assets    => このプロジェクト（アプリ）専用の個々のファイル
  * lib/assets    => このプロジェクト（アプリ）のライブラリとして使うファイル
  * vendor/assets => 外部からもらってきたファイル


ヘッダー、フッター、サイドメニューなどを指定するのは app/views/layouts/application.html.erb です。

application.html.erb に記述されている<%= yield %>部分に、各viewのhtmlが入ることになります。

Rails Folders

全体のデザインを application.html.erb + application.css に配置して、必要なものを誤って消してないか、こまめにブラウザでチェックしましょう。

imageファイルは、gif,png,jpgがOKです。

例：imageファイルの呼び方

<%= image_tag('line.png') %>

Railsがサポートしているerbの機能は、置き換えておくと後々便利です。

例：<a> </a>は、<% %>（erbタグ）でlink_toに置き換え


著作権のゆるいフリーデザインがおいてあるサイト

freeCSStemplates.org
openwebdesign
css creme
PSDFAN

などなど

twitter bootstrapを使う

シンプルでいいなら、ちまたで流行のtwitter bootsttrapならhtmlのclassを指定するだけでよく、早くて使い勝手もいいと思います。

Railsで使う場合は、専用のgemをインストールすると便利です。 ここではtwitter-bootstrap-railsをインストールして、cssでtwitter bootstrapを使う方法を解説します。

gem 'twitter-bootstrap-rails'
$ bundle install
$ rails generate bootstrap:install static

このコマンドで、もともとあるapplication.html.erbのファイルを勝手に編集してくれるので、conflictを聞かれたら y を入力します。

$ rails g bootstrap:layout application fluid
    conflict  app/views/layouts/application.html.erb
Overwrite /Users/satomicchy/railsapp/lesson_demo/app/views/layouts/application.html.erb? (enter "h" for help) [Ynaqdh] y
       force  app/views/layouts/application.html.erb

これでブラウザで確認してみましょう。

あとは、本家サイトのレイアウト例やボタンを見ながら、いろいろ試してみてください。

vendor/ や lib/ にファイルを置いたらpathを追加

app/assets 以下にファイルを追加したときは、何もしなくてもRails側で読み取ってくれますが、vendorやlibにファイルを置いたときは、pathを設定してあげないと読み取ってくれないので注意してください。

例：vendor/assets/stylesheets/fullcalendar.css を追加した場合

app/assets/stylesheets/application.css

*
 *= require fullcalendar #require_selfより上に追記
 *= require_self
 *= require_tree .
 */

例：vendor/assets/javascripts/fullcalendar.min.js を追加した場合

app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require fullcalendar.min #turbolinksより上に追記
//= require turbolinks
//= require_tree .

おまけ

newやeditページから直接indexページへ移す方法

例：animes#new -> animes#create -> animes#show を animes#new -> animes#create -> animes#indexへ

app/controllers/animes_controller.rb

def create
    @anime = Anime.new(anime_params)

    respond_to do |format|
      if @anime.save
        format.html { redirect_to animes_path } #編集
        format.json { render action: 'show', status: :created, location: @anime }
      else
        format.html { render action: 'new' }
        format.json { render json: @anime.errors, status: :unprocessable_entity }
      end
    end
  end


サイト入り口のwelcomeページを作成する方法（controllerとviewだけ追加する方法）

$ rails generate controller welcome index

routes.rb

root 'welcome#index'

この場合も、もれなく app/assets/ のレイアウトが適応されます。もし、welcomeページでそれらのレイアウトを無視したい場合は、以下を追加します。

app/controllers/welcome_controller.rb

class WelcomeController < ApplicationController
  def index
    render layout: false #追記
  end
end

Lesson3はここまでです。おつかれさまでした

This work is licensed under a Creative Commons Attribution-Share Alike 3.0 License

produced by Minami.rb