Ruby&Rails入門講座-2

Ruby勉強会@札幌 特別編

Ruby&Rails入門講座

#2Ruby札幌

http://jp.rubyist.net/?RubySapporo

アジェンダ-はじめに(5分)-自己紹介(35分)- irbを使ったRuby実習(20分)-休憩(5分)- Rails実習(110分)-おわりに (5分)

自己紹介Self-Introduction

irbを使ったRuby実習Practice ruby by using irb

文字列

s=”I love ruby”s.upcases.downcases << “, hello!”value = 123puts “value is #{value}”

日付

p t = Time.nowt.yeart.sect.to_st.to_a

日付

p d = Date.todaydd.to_s(d-7).to_s(d+30).to_s

配列

a = [30,100,50,80,79,40,95]p a.sortp a.reject{ |x| x < 90}p a << 80p a << 50

配列

p a.uniqa.shift p aa.popp a

ハッシュ

h = {“apple” => 150, “banana” => 300, “lemon” => 300}h[‘apple’]h.key?(‘orange’)

ハッシュ

h.store(‘orange’, 200)p hh.reject!{ |key, value| key == “banana”}h.to_a

その他

o = Object.newo.methods.sortDir::pwdDir::mkdir(Dir::pwd << “/lesson”)Dir::chdir(“lesson”)

その他Dir::entries(Dir::pwd)Dir[“*”]Dir[“**”]Dir[“**/*.rb”]foo = File.open(“foo.txt”, ‘w’)foo.puts afoo.close

休憩break time

RailsチュートリアルPractice rails

ここからはmasuidriveさんの資料で

ここからはオリジナル

このToDoに足りないもの

それっぽいToDoリスト画面を作ってみる

ToDoリスト用のビューとしてapp/views/todo/task.rhtml

を新規作成

リスト表示させてみる

<h1>やることリスト</h1> <ul class=”list”> <% @items.each do |item| %> <li> <%=h item.description %> </li> <% end %> </ul>

app/views/todo/task.rhtml

http://localhost:3000/todo/task/

これだけだと動かない

コントローラにメソッドを追加する必要がある

def task @items = Todo.find(:all) end

taskアクションを行うためにtaskメソッドを定義し、リスト表示に使用する@itemsにTodosテーブルから全てのデータを取得し設定

http://localhost:3000/todo/task/

きちんと表示されましたか？

なんだか味気ない

ToDoアプリなので完了チェックがしたい

done（ダーンと読みます）

> ruby script/generate migration add_done_to_todos

マイグレーションファイルの生成 db/migrate/

00X_add_done_to_todos.rb

class AddDoneToTodos < ActiveRecord::Migration def self.up add_column :todos, :done, :boolean, :default => false end

def self.down remove_column :todos, :done endend

db/migrate/00X_add_done_to_todos.rb

> rake db:migrate

> ruby script/server↓

http://localhost:3000/todo/

ToDoリスト画面からdoneの状態を見れるようにする

app/views/todo/task.rhtml

<h1>やることリスト</h1> <ul class=”list”> <% @items.each do |item| %> <li> <%= check_box_tag("check", 0, item.done) %> <%=h item.description %> </li> <% end %> </ul>

ToDoリスト画面から編集も出来るようにしてみる

app/views/todo/task.rhtml

<h1>やることリスト</h1> <ul class=”list”> <% @items.each do |item| %> <li> <%= check_box_tag("check", 0, item.done %> <%=h item.description %> <%= link_to("編集", :action => "edit", :id => item.id) %> </li> <% end %> </ul>

ToDoリスト画面から削除も出来るようにしてみる

app/views/todo/task.rhtml <h1>やることリスト</h1> <ul class=”list”> <% @items.each do |item| %> <li> <%= check_box_tag("check", 0, item.done %> <%=h item.description %> <%= link_to("編集", :action => "edit", :id => item.id) %> <%= link_to("削除", {:action => "destroy", :id => item.id}, :confirm => "ホントウに？", :method :post) %> </li> <% end %> </ul>

それぞれのアクションの戻り先をToDoリスト画面にする

redirect_to :action => 'show'↓

redirect_to :action => 'task'

app/controllers/todo_controller.rbupdateメソッド内

<%= link_to 'Back', :action => 'list' %>↓

<%= link_to 'Back', :action => 'task' %>

app/views/todo/edit.rhtml

ここまで来たらToDoリスト画面から登録もしたい

app/views/todo/task.rhtml <h1>やることリスト</h1> <ul class=”list”> <% @items.each do |item| %> <li> <%= check_box_tag("check", 0, item.done %> <%=h item.description %> <%= link_to("編集", :action => "edit", :id => item.id) %> <%= link_to("削除", {:action => "destroy", :id => item.id}, :confirm => "ホントウに？", :method :post) %> </li> <% end %></ul>

<%= form_tag(:action => "create") do %> <%= text_field 'todo', 'description' %> <%= submit_tag "登録" %><%= end %>

完了のチェックボックスも同期させたい

app/views/todo/task.rhtml <h1>やることリスト</h1> <ul class=”list”> <% @items.each do |item| %> <li> <%= check_box_tag("check", 0, item.done, :onclick => "document.location.href='/todo/toggle_check/#{item.id}'") %> <%=h item.description %> <%= link_to("編集", :action => "edit", :id => item.id) %> <%= link_to("削除", {:action => "destroy", :id => item.id}, :confirm => "ホントウに？", :method :post) %> </li> <% end %></ul>

def toggle_check Todo.find(params[:id]).toggle!(:done) redirect_to :action => 'task' end

app/controllers/todo_controller.rb

だいぶToDoアプリらしくなった

けどまだ見た目が味気ない

CSSを変えてみる

CSSの置き場 public/stylesheets/

イメージの置き場 public/images/

CSSを読み込むようにする app/views/layout/todo.rhtml

<head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /><title>Todo: <%= controller.action_name %></title><%= stylesheet_link_tag 'scaffold' %><%= stylesheet_link_tag 'simplicity_two_point_oh' %></head>

app/views/layout/todo.rhtml

CSSの内容にあわせてビューをいじる

app/views/layout/todo.rhtml<div id="window"> <div id="container"> <div class="navigation"> <ul> <li class="active"><span>ToDo</span></li> </ul> </div> <div class="main"> <div class="outer-prettification"> <div class="inner-prettification"> <%= yield %> <div class="footer"> <p><a href="#">example.com</a></p> </div> </div> </div> </div> </div></div>

<div class="header"> <h1 class="title"><a href="#">やることリスト</a></h1></div><div class="contents"> <p style="color: green"><%= flash[:notice] %></p> <ul class="list"> ... </ul> <div class="contact"> <%= form_tag (:action => "create") do %> ... <%= end %> </div></div>

app/views/todo/task.rhtml

app/views/todo/edit.rhtml<div class="header"> <h1 class="title"><a href="#">やること編集</a></h1></div><div class="contents"> <p style="color: green"><%= flash[:notice] %></p> <div class="contact"> <% form_tag :action => 'update', :id => @todo do %> ... <% end %> <%= link_to 'Show', :action => 'show', :id => @todo %> | <%= link_to 'Back', :action => 'task' %> </div></div>

とりあえずToDo完成

次にやるとしたら？

script.aculo.usを使ってインライン編集とか

AAAを使ってユーザ別のToDo管理とか

acts_as_taggableを使ってタグ付けしてみるとか

せっかくタブがあるのでカテゴリ別にしてみるとか

いろいろチャレンジしてみましょう

Q&A

予告

開発集会@札幌 第１回✓ 時：2007年10月20日（土）,21日（日）✓ 場所：北海道情報大学札幌サテライト✓ 参加費：無料 ✓ 内容：✓ 開発や勉強に集中できる場の提供✓ 好きなときにきて、好きなときに帰っておk✓ Ruby本も各種取り揃えておくので是非

RubySapporoNight vol.3✓ 時：2007年10月31日（水）✓ 場所：アップルストア札幌✓ 参加費：無料 ✓ 内容：✓ 鋭意企画中✓ RailsとかRuby-Growlとか✓ お友達をつれて是非

Ruby勉強会@札幌 第６回

✓ 時：2007年??月??日（?）✓ 場所：北海道情報大学札幌サテライト✓ 参加費：無料 ✓ 内容：✓ ??✓ ??✓ ??

Ruby札幌をどうぞ宜しくお願いします

ご参加ありがとうございました