More Related Content
Similar to Rails初心者レッスン lesson3 3edition
Similar to Rails初心者レッスン lesson3 3edition (20)
More from Satomi Tsujita (20)
Rails初心者レッスン lesson3 3edition
- 4. 日本語対応
i18n で日本語化
例)_form.html.erbのlabel、各種エラーメッセージ など
(1) 日本語の元ネタを config/locales/ja.yml としてコピー
https://github.com/svenfuchs/rails-i18n/tree/master/rails/locale
(2) config/application.rb に ja を設定
# config.i18n.load_path・・・
config.i18n.default_locale = :ja
(3) config/locales/ja.yml に日本語を追加
例) activerecord:
attributes:
restaurant: ※インデントに注意！
name: 店名
- 5. 見た目をきれいに
(デザインのfix)
デザインの反映されるしくみ
htmlの場所 => app/views/
scss(css)の場所 => app/assets/stylesheets/
coffeescript(javascript)の場所 => app/assets/javascripts/
imageファイルの場所 => app/assets/images
application.html.erb + (application.css, scaffold.css)
<yieldエリア>
ex. index.html.erb + workshop.css.scss
- 6. 見た目をきれいに
(デザインのfix)
(1) 全体のデザインをapplication.html.erb, application.cssに配置
application.html.erbをベースにする。
必要なものを誤って消してないか細かくブラウザでチェック
(2) imageファイル（gif, png, jpg）の呼び方
ファイルを app/assets/images/ の下に保存
*.html.erb の置きたいところに以下のように追加
例）<%= image_tag('line1.gif') %>
(3) <a></a>(aタグ)は、<% %>(erbタグ)でlink_toに書き換え
※Railsがサポートしている機能は、変更しておくと後がラク
- 7. twitter bootstrapを使う
twitter bootstrap 本家
http://twitter.github.com/bootstrap/
Railsで利用する場合の解説
http://railscasts.com/episodes/328-twitter-bootstrap-basics
gem twitter-bootstrap-rails 本家
https://github.com/seyhunak/twitter-bootstrap-rails
- 8. twitter bootstrapの手順
Gemfileを編集
group :assets do
・・・
gem 'twitter-bootstrap-rails'
・・・
end
gemのインストール
$ bundle install
twitter bootstrap用 cssやjsのインストール
$ rails generate bootstrap:install
- 9. twitter bootstrapを使う
app/views/layouts/application.html.erbの編集（1/2）
<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>
まわり
- 12. おまけ
newやeditページから直接indexページへ移る方法
例）publishers#new -> create から publishers#indexへ
app/controllers/publishers_controller.rb
def create
@publisher = Publisher.new(params[:publisher])
respond_to do ¦format¦
if @publisher.save
format.html { redirect_to publishers_path }
format.json { render json: @publisher, status: :created, ・・・
・・・
end
