ruby&rails入門講座-2
TRANSCRIPT
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
これだけだと動かない
コントローラにメソッドを追加する必要がある
def task @items = Todo.find(:all) end
taskアクションを行うためにtaskメソッドを定義し、リスト表示に使用する@itemsにTodosテーブルから全てのデータを取得し設定
きちんと表示されましたか？
なんだか味気ない
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札幌をどうぞ宜しくお願いします
ご参加ありがとうございました