Post on 05-Dec-2014
description
transcript
Ruby on RailsによるWebアプリケーション開発
島根大学2010-12-10
大場寧子株式会社万葉
大場光一郎伊藤忠テクノソリューションズ株式会社
2011年1月5日水曜日
自己紹介
•大場寧子(nay3)•株式会社万葉•大場光一郎(koichiroo)•伊藤忠テクノソリューション株式会社
2011年1月5日水曜日
RoR逆引きクイックリファレンス毎日コミュニケーションズ
お手元に一冊!
2011年1月5日水曜日
今日の課題
おみくじアプリケーションの開発
2011年1月5日水曜日
おみくじfortunes
アクセスするたびにおみくじが選ばれて表示されるWebアプリケーション
2011年1月5日水曜日
Webアプリケーション•Firefox、IEなど、ブラウザから使えるソフトウェア
•Mixi•Twitter•楽天市場, Amazon•GMail など
2011年1月5日水曜日
こんな画面イメージようこそ!
あなたのおみくじは...
大吉ラッキーカラー:青ラッキーな方角:南
2011年1月5日水曜日
今日学ぶこと1.Rubyでオリジナルのクラスを作る
•設計•プログラミング2.Railsを使ったWebアプリケーション開発を体験
2011年1月5日水曜日
二人一組で作業してください(奇数なら一人で)
2011年1月5日水曜日
ペアプログラミングといいます
2011年1月5日水曜日
主になる役目を交代しながら相談しながら進めてください
2011年1月5日水曜日
作業上の注意•: と ; の違いに注意!•全角スペースがRubyプラグラムに紛れ込まないように
•別のプロジェクトと一緒にならないように(今日はlucky)
2011年1月5日水曜日
置いていかれたら遠慮なく挙手
2011年1月5日水曜日
1.おみくじのためのクラス作る
2011年1月5日水曜日
設計
2011年1月5日水曜日
要件1
•おみくじは次の内容の組み合わせ•大吉 / 吉 / 中吉 / 小吉 / 凶•ラッキーカラー(赤、青、黄、緑)•ラッキーな方角(東、西、南、北)
2011年1月5日水曜日
要件2irbで次のように実行すると、内容の入ったおみくじの結果が「おみくじオブジェクト」として取得できるようにします。
require 'omikuji'omikuji = Omikuji.new
2011年1月5日水曜日
つまりomikuji.rbを作ります
(Shift_JISで)2011年1月5日水曜日
要件3おみくじはいつも同じではいけません。凶はほかよりも出にくいようにしてください。あとの確率は、好きなようにしてください。
2011年1月5日水曜日
要件4「おみくじオブジェクト」からは次のようにして内容を参照できるようにします。omikuji.name # => '大吉'omikuji.lacky_color # => '青'omikuji.lacky_direction # => '南'
2011年1月5日水曜日
ヒント•乱数を得るには rand を使います。たとえば rand(4) は 0 ~ 3 のどれかを返します。
•クラス.newしたときには、initializeメソッドが呼ばれます。
2011年1月5日水曜日
演習タイムhttp://doc.ruby-lang.org/ja/1.8.7/doc/
できたペアは教えてくださいソースコードを見せてデモしてください
自由に機能を付け足してもOKです
2011年1月5日水曜日
解説:initialize
class Omikuji def initialize # ここにプログラムを書きます endend
2011年1月5日水曜日
解説:内容のセットclass Omikuji
def initialize @name = ['大吉', '吉', '中吉', '小吉', '凶'][rand(9)/2] @lacky_color = ['赤', '青', '黄', '緑'][rand(4)] @lacky_direction = ['東', '西', '南', '北'][rand(4)] end
end
2011年1月5日水曜日
解説:ゲッタの用意class Omikuji attr_reader :name, :lacky_color, :lacky_direction def initialize # ... endend
2011年1月5日水曜日
別の解法class Omikuji def name ['大吉', '吉', '中吉', '小吉', '凶'][rand(9)/2] end ....end
2011年1月5日水曜日
irbで試してみよう
> require 'omikuji'> omikuji = Omikuji.new> omikuji.name> omikuji.lacky_color> omikuji.lacky_direction> omikuji2 = Omikuji.new
2011年1月5日水曜日
2. Ruby on Rails
2011年1月5日水曜日
Rails とは?
Webアプリケーションを効率よく作るためのMVCフレームワーク
2011年1月5日水曜日
MVC
2011年1月5日水曜日
M ... ModelV ... ViewC ... Controller
2011年1月5日水曜日
Model
Controller
View
リクエスト
利用
利用選択
レスポンス2011年1月5日水曜日
モデル層について•通常、モデル層の永続化にはデータベースを使います
•今日は使いません•Omikujiが簡略化したモデルの役割を果たします
2011年1月5日水曜日
Omikuji
Controller
View
リクエスト
利用
利用選択
レスポンス2011年1月5日水曜日
学ぶこと(1)•Railsアプリのひな形を作成する•ディレクトリ構成を見る•DB関連のライブラリ参照をOFF•コントローラとViewを generator を使って作成する
2011年1月5日水曜日
学ぶこと(2)•レイアウトについて学ぶ•HTMLを書く•コントローラで、おみくじオブジェクトを用意する
•ビューで、おみくじの内容を出力する•Railsアプリを開発環境で動かす
2011年1月5日水曜日
luckyプロジェクトの作成
> rails lucky
2011年1月5日水曜日
ディレクトリ構成•app•controllers•models•views•config•lib
2011年1月5日水曜日
データベースを使わない設定
# config.frameworks -= [ :active_record, :active_resource, :action_mailer ]
config/environment.rb以下の行のコメントを外す
config.frameworks -= [ :active_record, :active_resource, :action_mailer ]
2011年1月5日水曜日
アクセスしよう
•ブラウザで以下のURLを手打ちする• http://localhost:3000/•welcome aboard が出たら成功
> ruby script/server
2011年1月5日水曜日
Webサーバ
Webサーバー(WEBRick)
Rails
Lucky
リクエストレスポンス
script/server は Webサーバを起動
2011年1月5日水曜日
終了はCtrl + C
2011年1月5日水曜日
ControllerとViewを作る
2011年1月5日水曜日
Model
Controller
View
リクエスト
利用
利用選択
レスポンス2011年1月5日水曜日
コントローラとアクション
•コントローラA•アクションA-1•アクションA-2•コントローラB•アクションB-1
2011年1月5日水曜日
実体class ○○○Controller < ...
def △△△ .... endend
コントローラはクラス
アクションはメソッド
2011年1月5日水曜日
URLを考える
http://localhost:3000/today
「今日の運勢」だからtodayにしましょう
2011年1月5日水曜日
URLマッピング
•URLとコントローラをマッピングすることができます
•今回はRails2のデフォルト(かっこわるい)を使います
2011年1月5日水曜日
マッピングhttp://localhost:3000/today/index
コントローラ名 アクション名
TodayControllerindex
/indexを省略してもindexアクションにマッピング2011年1月5日水曜日
全体像
Omikuji
TodayController
index.html.erb
利用
利用
index
indexアクション用のビュー
2011年1月5日水曜日
ひな形を作成する
> ruby script/generate controller today index
コントローラ名アクション名
&ビュー名
2011年1月5日水曜日
生成結果 exists app/controllers/ exists app/helpers/ create app/views/today exists test/functional/ create test/unit/helpers/ create app/controllers/today_controller.rb create test/functional/today_controller_test.rb create app/helpers/today_helper.rb create test/unit/helpers/today_helper_test.rb create app/views/today/index.html.erb
2011年1月5日水曜日
生成されたファイルを見る
•app/controllers•app/views/today
2011年1月5日水曜日
コントローラを見る
app/controllers/today_controller.rb
2011年1月5日水曜日
ビューを見る
app/views/today/index.html.erb
2011年1月5日水曜日
<%= %>と
<% %>
2011年1月5日水曜日
アクセスしてみよう
http://localhost:3000/today
2011年1月5日水曜日
コントローラからビューへ
データを渡す実験2011年1月5日水曜日
app/controllers/today_controller.rbclass TodayController < ApplicationController def index @message = 'hello' endend
2011年1月5日水曜日
app/views/today/index.html.erb
<h1>Today#index</h1><p>Find me in app/views/today/index.html.erb</p><p><%= @message %></p>
2011年1月5日水曜日
確認してみようhttp://localhost:3000/today
2011年1月5日水曜日
このようにインスタンス変数をビューに渡せます
2011年1月5日水曜日
ブラウザでページのソースを見てみよう
2011年1月5日水曜日
HTMLとしてちゃんとしてない
2011年1月5日水曜日
レイアウト
2011年1月5日水曜日
いろいろな画面で共通につかえるテンプレート
2011年1月5日水曜日
app/views/layouts
2011年1月5日水曜日
レイアウトを作る
•layoutsディレクトリに 「application.html.erb」を作成
2011年1月5日水曜日
application.html.erb<html> <head> <title><%= @title || 'lucky' %></title> </head> <body> <%= yield %> </body> </html>
終わったらアクセスして、ブラウザのウィンドウに「lucky」と出ることやソースを確認
2011年1月5日水曜日
<html> <head> <title><%= @title || 'lucky' %></title> </head> <body> <%= yield %> </body> </html>
解説
ここに index.html.erb の内容が入る2011年1月5日水曜日
コントローラの名前に従って
自動的にレイアウトが使われます
2011年1月5日水曜日
演習の準備•さっきつくったファイルを lib/omikuji.rb となるように移動
•omikuji.rb をUTF-8に変換する•lib下のファイルは、自分でrequireしなくてもRails内で使えます
2011年1月5日水曜日
演習http://railsapi.com/doc/rails-v2.3.8/
2011年1月5日水曜日
/todayようこそ!
あなたのおみくじは...
大吉ラッキーカラー:青ラッキーな方角:南
2011年1月5日水曜日
注意
•ビューにロジックを書くのは良くないとされているので、コントローラで @omikuji を用意しましょう
2011年1月5日水曜日
htmlのヒント•段落は <p> </p> で囲みます•中央寄せするにはCSSを使います
•字を大きくするにもCSSを使います<div style="text_align:center;">これ真ん中に</div>例)
<span style="font-size:40px;">Large!</span>例)
2011年1月5日水曜日
応用問題•画面に今日の日付を表示してみる•タイトルを変更する(@title)•ボタンまたはリンクを押したら結果が出るように変える
今日の運勢は?
index
check小吉!!
result
2011年1月5日水曜日
まとめ•「おみくじ」を表すクラスを考えて作った - モデリング
•Railsアプリケーションを体験•コントローラ、モデル、ビューの役割分担の雰囲気を味わう
2011年1月5日水曜日
次のステップ•データベースを使う(sqlite3、mysqlなど)
•scaffold を作ってみる•Rails Guidesを読むhttp://guides.rubyonrails.org/
2011年1月5日水曜日
RoR逆引きクイックリファレンス毎日コミュニケーションズ
お手元に一冊!
2011年1月5日水曜日
Enjoyprogramming!
2011年1月5日水曜日