Rails初心者レッスン lesson3 3edition
Upcoming SlideShare
Loading in...5
×
 

Rails初心者レッスン lesson3 3edition

on

  • 1,355 views

 

Statistics

Views

Total Views
1,355
Views on SlideShare
1,354
Embed Views
1

Actions

Likes
0
Downloads
8
Comments
0

1 Embed 1

http://sc.dotbranch.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Rails初心者レッスン lesson3 3edition Rails初心者レッスン lesson3 3edition Presentation Transcript

  • 第3版Rails3.2 Rails3 初心者レッスン by Minami.rb L esso n 3
  • このレッスンでやること一覧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) <yieldエリア> ex. index.html.erb + workshop.css.scss
  • 見た目をきれいに (デザインの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 ・・・ endgemのインストール $ bundle installtwitter 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は、これで終わりです。 お疲れさまでした。