View
839
Download
2
Category
Preview:
Citation preview
Rails3 初心者レッスンby Minami.rb
Lesson 3
第3版Rails3.2
このレッスンでやること一覧1. Railsで何をする？どうしてRails?2. 作ってみよう事始め3. プロジェクトとテーブル4. Railsの役割分担5. Railsのディレクトリ構成6. scaffold(デフォルト)でのURL7. リレーションを考える8. 日本語対応9. 見た目をキレイに10.プラグインを使う11.ちょっとRubyに働いてもらう12.herokuに公開しよう
Lesson2の復習
使ったコマンド $ rake routes $ rails generate model library
リレーションの設定
リンクの貼り方
日本語対応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: “店名”
※インデントに注意！
見た目をきれいに(デザインの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)
ex. index.html.erb + workshop.css.scss
<yieldエリア>
見た目をきれいに(デザインの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がサポートしている機能は、変更しておくと後がラク
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
twitter bootstrapの手順Gemfileを編集
group :assets do ・・・ gem 'twitter-bootstrap-rails' ・・・ end
gemのインストール $ bundle install
twitter bootstrap用 cssやjsのインストール $ rails generate bootstrap:install
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>
トップメニューまわり
twitter bootstrapを使うapp/views/layouts/application.html.erbの編集（2/2）
<div class="container"> <%= yield %> </div> </body>
これで一旦ブラウザにアクセスしてみようあとは、本家サイトにボタンやレイアウトの例が載っているので、自分好みのデザインに♪
メニュー下差し込みまわり
考えてみようi18nで日本語化しよう全体のデザインイメージを決めようtwitter bootstrapでデザインをカスタマイズしよう各ページのデザインや画面遷移が思い通りか、確認しよう
おまけ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
おまけサイト入り口のwelcomeページを作成する場合
(controller+viewだけ作る) $ rails generate controller コントローラ名 メソッド名 e.g. rails generate controller welcome index
public/index.html を削除
config/routes.rbを設定 root:to => “welcome#index”
Lesson3は、これで終わりです。お疲れさまでした。
Recommended