rails初心者レッスン lesson3 2edition
TRANSCRIPT
![Page 1: Rails初心者レッスン lesson3 2edition](https://reader034.vdocuments.site/reader034/viewer/2022052505/5565f86dd8b42a2a4d8b4839/html5/thumbnails/1.jpg)
Rails3 初心者レッスンby Minami.rb
第2版Rails3.1
Lesson 3
![Page 2: Rails初心者レッスン lesson3 2edition](https://reader034.vdocuments.site/reader034/viewer/2022052505/5565f86dd8b42a2a4d8b4839/html5/thumbnails/2.jpg)
このレッスンでやること一覧1. Railsで何をする?どうしてRails?2. 作ってみよう事始め3. プロジェクトとテーブル4. Railsの役割分担5. Railsのディレクトリ構成6. scaffold(デフォルト)でのURL7. リレーションを考える8. 日本語対応9. 見た目をキレイに10.プラグインを使う11.ちょっとRubyに働いてもらう12.herokuに公開しよう
![Page 3: Rails初心者レッスン lesson3 2edition](https://reader034.vdocuments.site/reader034/viewer/2022052505/5565f86dd8b42a2a4d8b4839/html5/thumbnails/3.jpg)
Lesson2の復習
使ったコマンド $ rake routes $ rails generate model neighbor
venue_id:integer restaurant_id:integerリンクの貼り方
link_to
リレーションの設定
![Page 4: Rails初心者レッスン lesson3 2edition](https://reader034.vdocuments.site/reader034/viewer/2022052505/5565f86dd8b42a2a4d8b4839/html5/thumbnails/4.jpg)
日本語対応i18n で日本語化
例)_form.html.erbのlabel指定されたところ、各種エラーメッセージ
(1) 日本語の元ネタをconfig/locales/ja.ymlとしてコピー http://github.com/svenfuchs/rails-i18n/raw/master/rails/locale/ja.yml(2) config/application.rb に ja を設定 # config.i18n.load_path・・・ config.i18n.load_path.default_locale = :ja(3) config/locales/ja.yml に日本語を追加 例) activerecord: attributes: restaurant: name: “店名”
“インデントに注意!”
![Page 5: Rails初心者レッスン lesson3 2edition](https://reader034.vdocuments.site/reader034/viewer/2022052505/5565f86dd8b42a2a4d8b4839/html5/thumbnails/5.jpg)
Top画面の設定
public/index.html を削除
config/routes.rbを設定 root:to => “workshop#index”
![Page 6: Rails初心者レッスン lesson3 2edition](https://reader034.vdocuments.site/reader034/viewer/2022052505/5565f86dd8b42a2a4d8b4839/html5/thumbnails/6.jpg)
見た目をきれいに(デザインの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エリア>
![Page 7: Rails初心者レッスン lesson3 2edition](https://reader034.vdocuments.site/reader034/viewer/2022052505/5565f86dd8b42a2a4d8b4839/html5/thumbnails/7.jpg)
見た目をきれいに(デザインのfix)
(1) 全体のデザインをapplication.html.erb, application.cssに配置 application.html.erbをベースにする。 必要なものを誤って消してないか細かくブラウザでチェック
(2) imageファイル(gif, png, jpg)の呼び方 ファイルを app/assets/images/ の下に保存 *.html.erb の置きたいところに以下のように追加
例)<%= image_tag('line1.gif') %>
![Page 8: Rails初心者レッスン lesson3 2edition](https://reader034.vdocuments.site/reader034/viewer/2022052505/5565f86dd8b42a2a4d8b4839/html5/thumbnails/8.jpg)
考えてみようi18nで日本語化しよう全体のデザインイメージを決めようapplication.html.erbにデザインをfixしようトップ/サイドにメニューボタンを配置してみよう各ページのデザインが思い通りか確認しよう画面遷移をもう一度見直してみよう
![Page 9: Rails初心者レッスン lesson3 2edition](https://reader034.vdocuments.site/reader034/viewer/2022052505/5565f86dd8b42a2a4d8b4839/html5/thumbnails/9.jpg)
おまけnewやeditページから直接indexページへ移る方法
例)restaurants#new -> createからrestaurants#indexへapp/controller/restaurants_controller.rb def create @restaurant = Restaurant.new(params[:restaurant]) respond_to do |format| if @restaurant.save format.html { redirect_to restaurants_path } format.json { render json: @restaurant, status: :created, location: @restaurant } ・・・ end
![Page 10: Rails初心者レッスン lesson3 2edition](https://reader034.vdocuments.site/reader034/viewer/2022052505/5565f86dd8b42a2a4d8b4839/html5/thumbnails/10.jpg)
おまけまっさらなwelcomeページを作成する場合
(controller+viewだけ作る) $ rails generate controller コントローラ名 メソッド名 e.g. rails generate controller welcome index
public/index.html を削除
config/routes.rbを設定 root:to => “welcome#index”
![Page 11: Rails初心者レッスン lesson3 2edition](https://reader034.vdocuments.site/reader034/viewer/2022052505/5565f86dd8b42a2a4d8b4839/html5/thumbnails/11.jpg)
Lesson3は、これで終わりです。お疲れさまでした。