第3版Rails3.2     Rails3 初心者レッスン           by Minami.rb                          L esso n 3
このレッスンでやること一覧1. Railsで何をする?どうしてRails?2. 作ってみよう事始め3. プロジェクトとテーブル4. Railsの役割分担5. Railsのディレクトリ構成6. scaffold(デフォルト)でのURL7. リレーシ...
Lesson2の復習使ったコマンド$ rake routes$ rails generate model libraryリレーションの設定リンクの貼り方
日本語対応  i18n で日本語化 例)_form.html.erbのlabel、各種エラーメッセージ など(1) 日本語の元ネタを config/locales/ja.yml としてコピー  https://github.com/svenfuc...
見た目をきれいに              (デザインのfix)デザインの反映されるしくみhtmlの場所                         => app/views/scss(css)の場所                    =...
見た目をきれいに              (デザインのfix)(1) 全体のデザインをapplication.html.erb, application.cssに配置      application.html.erbをベースにする。     ...
twitter bootstrapを使う  twitter bootstrap 本家  http://twitter.github.com/bootstrap/  Railsで利用する場合の解説  http://railscasts.com/e...
twitter bootstrapの手順Gemfileを編集 group :assets do   ・・・   gem twitter-bootstrap-rails   ・・・ endgemのインストール $ bundle installtwi...
twitter bootstrapを使うapp/views/layouts/application.html.erbの編集(1/2)<body>  <div class="navbar navbar-fixed-top">    <div cla...
twitter bootstrapを使うapp/views/layouts/application.html.erbの編集(2/2)  <div class="container">    <%= yield %>               ...
考えてみようi18nで日本語化しよう全体のデザインイメージを決めようtwitter bootstrapでデザインをカスタマイズしよう各ページのデザインや画面遷移が思い通りか、確認しよう
おまけ  newやeditページから直接indexページへ移る方法例)publishers#new -> create から publishers#indexへapp/controllers/publishers_controller.rb d...
おまけ サイト入り口のwelcomeページを作成する場合 (controller+viewだけ作る)   $ rails generate controller コントローラ名 メソッド名   e.g. rails generate contr...
Lesson3は、これで終わりです。     お疲れさまでした。
Upcoming SlideShare
Loading in …5
×

Rails初心者レッスン lesson3 3edition

1,050 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,050
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Rails初心者レッスン lesson3 3edition

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

×