Minami.rb

Lesson3

Lesson2の復習

使ったコマンド

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

編集したファイル

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

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

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

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

I18nの設定

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

ja.yml

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

application.rb

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

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

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

デザインのfix

ソースの置き場所が決まっています。

  *  html                     => app/views/
  *  scss(css)                => app/assets/stylesheets/
  *  coffeescript(javascript) => app/assets/stylesheets/
  *  image                    => app/assets/images

表示の統括をしているのはapp/views/layouts/application.html.erbです。

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

Rails Folders

手順として、

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


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

freeCSStemplates.org
openwebdesign
css creme
PSDFAN

などなど

twitter bootstrapを使う

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

Railsで使う場合は、専用のgemが必要です。 ここではtwitter-bootstrap-railsを使う方法を解説します。

group :assets do
#省略
  gem 'twitter-bootstrap-rails' #追記
  gem 'therubyracer' #追記
  gem 'less-rails' #追記
end
$ bundle install
$ rails generate bootstrap:install

application.html.erb

<body>
  #ここから
  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
        <% link_to "Book shelf", books_path, class: "brand" %>
        <div class="nav-collapse">
          <ul class="nav">
            <li><%= link_to "Publisher", publishers_path %></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  #ここまで追記

  #省略

  <div class="container"> #追記(yieldをdivで囲む)
    <%= yield %>
  </div> #追記
</body>

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

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

おまけ

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

例：animes#new -> create から animes#indexへ

app/controllers/animes_controller.rb

def create
  @anime = Anime.new(params[:anime])

    respond_to do |format|
      if @anime.save
        format.html { redirect_to animes_path } #編集
        format.json { render json: @anime, status: :created, location: @anime }
      #省略
    end
  end


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

$ rails generate controller welcome index

routes.rb

root:to => "welcome#index"

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

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

produced by Minami.rb