Shimane2010

Ruby on RailsによるWebアプリケーション開発

島根大学2010-12-10

大場寧子株式会社万葉

大場光一郎伊藤忠テクノソリューションズ株式会社

2011年1月5日水曜日

自己紹介

•大場寧子(nay3)•株式会社万葉•大場光一郎(koichiroo)•伊藤忠テクノソリューション株式会社


RoR逆引きクイックリファレンス毎日コミュニケーションズ

お手元に一冊！


今日の課題

おみくじアプリケーションの開発


おみくじfortunes

アクセスするたびにおみくじが選ばれて表示されるWebアプリケーション


Webアプリケーション•Firefox、IEなど、ブラウザから使えるソフトウェア

•Mixi•Twitter•楽天市場, Amazon•GMail など


こんな画面イメージようこそ！

あなたのおみくじは...

大吉ラッキーカラー：青ラッキーな方角：南


今日学ぶこと1.Rubyでオリジナルのクラスを作る

•設計•プログラミング2.Railsを使ったWebアプリケーション開発を体験


二人一組で作業してください（奇数なら一人で）


ペアプログラミングといいます


主になる役目を交代しながら相談しながら進めてください


作業上の注意•: と ; の違いに注意！•全角スペースがRubyプラグラムに紛れ込まないように

•別のプロジェクトと一緒にならないように（今日はlucky）


置いていかれたら遠慮なく挙手


1.おみくじのためのクラス作る


設計


要件１

•おみくじは次の内容の組み合わせ•大吉 / 吉 / 中吉 / 小吉 / 凶•ラッキーカラー（赤、青、黄、緑）•ラッキーな方角（東、西、南、北）


要件2irbで次のように実行すると、内容の入ったおみくじの結果が「おみくじオブジェクト」として取得できるようにします。

require 'omikuji'omikuji = Omikuji.new


つまりomikuji.rbを作ります

（Shift_JISで）2011年1月5日水曜日

要件3おみくじはいつも同じではいけません。凶はほかよりも出にくいようにしてください。あとの確率は、好きなようにしてください。


要件4「おみくじオブジェクト」からは次のようにして内容を参照できるようにします。omikuji.name # => '大吉'omikuji.lacky_color # => '青'omikuji.lacky_direction # => '南'


ヒント•乱数を得るには rand を使います。たとえば rand(4) は 0 ～ 3 のどれかを返します。

•クラス.newしたときには、initializeメソッドが呼ばれます。


演習タイムhttp://doc.ruby-lang.org/ja/1.8.7/doc/

できたペアは教えてくださいソースコードを見せてデモしてください

自由に機能を付け足してもOKです


解説：initialize

class Omikuji def initialize # ここにプログラムを書きます endend


解説：内容のセットclass Omikuji

def initialize @name = ['大吉', '吉', '中吉', '小吉', '凶'][rand(9)/2] @lacky_color = ['赤', '青', '黄', '緑'][rand(4)] @lacky_direction = ['東', '西', '南', '北'][rand(4)] end

end


解説：ゲッタの用意class Omikuji attr_reader :name, :lacky_color, :lacky_direction def initialize # ... endend


別の解法class Omikuji def name ['大吉', '吉', '中吉', '小吉', '凶'][rand(9)/2] end ....end


irbで試してみよう

> require 'omikuji'> omikuji = Omikuji.new> omikuji.name> omikuji.lacky_color> omikuji.lacky_direction> omikuji2 = Omikuji.new


2. Ruby on Rails


Rails とは？

Webアプリケーションを効率よく作るためのMVCフレームワーク


MVC


M ... ModelV ... ViewC ... Controller


Model

Controller

View

リクエスト

利用

利用選択

レスポンス2011年1月5日水曜日

モデル層について•通常、モデル層の永続化にはデータベースを使います

•今日は使いません•Omikujiが簡略化したモデルの役割を果たします


Omikuji

Controller

View

リクエスト

利用

利用選択


学ぶこと(1)•Railsアプリのひな形を作成する•ディレクトリ構成を見る•DB関連のライブラリ参照をOFF•コントローラとViewを generator を使って作成する


学ぶこと(2)•レイアウトについて学ぶ•HTMLを書く•コントローラで、おみくじオブジェクトを用意する

•ビューで、おみくじの内容を出力する•Railsアプリを開発環境で動かす


luckyプロジェクトの作成

> rails lucky


ディレクトリ構成•app•controllers•models•views•config•lib


データベースを使わない設定

# config.frameworks -= [ :active_record, :active_resource, :action_mailer ]

config/environment.rb以下の行のコメントを外す

config.frameworks -= [ :active_record, :active_resource, :action_mailer ]


アクセスしよう

•ブラウザで以下のURLを手打ちする• http://localhost:3000/•welcome aboard が出たら成功

> ruby script/server


http://localhost:3000

http://localhost:3000

Webサーバ

Webサーバー（WEBRick）

Rails

Lucky

リクエストレスポンス

script/server は Webサーバを起動


終了はCtrl + C


ControllerとViewを作る


Model

Controller

View

リクエスト

利用

利用選択


コントローラとアクション

•コントローラA•アクションA-1•アクションA-2•コントローラB•アクションB-1


実体class ○○○Controller < ...

def △△△ .... endend

コントローラはクラス

アクションはメソッド


URLを考える

http://localhost:3000/today

「今日の運勢」だからtodayにしましょう


URLマッピング

•URLとコントローラをマッピングすることができます

•今回はRails2のデフォルト（かっこわるい）を使います


マッピングhttp://localhost:3000/today/index

コントローラ名アクション名

TodayControllerindex

/indexを省略してもindexアクションにマッピング2011年1月5日水曜日

http://localhost:3000/today/index










全体像

Omikuji

TodayController

index.html.erb

利用

利用

index

indexアクション用のビュー


ひな形を作成する

> ruby script/generate controller today index

コントローラ名アクション名

&ビュー名


生成結果 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


生成されたファイルを見る

•app/controllers•app/views/today


コントローラを見る

app/controllers/today_controller.rb


ビューを見る

app/views/today/index.html.erb


<%= %>と

<% %>


アクセスしてみよう





コントローラからビューへ

データを渡す実験2011年1月5日水曜日

app/controllers/today_controller.rbclass TodayController < ApplicationController def index @message = 'hello' endend


app/views/today/index.html.erb

<h1>Today#index</h1><p>Find me in app/views/today/index.html.erb</p><p><%= @message %></p>


確認してみようhttp://localhost:3000/today




このようにインスタンス変数をビューに渡せます


ブラウザでページのソースを見てみよう


HTMLとしてちゃんとしてない


レイアウト


いろいろな画面で共通につかえるテンプレート


app/views/layouts


レイアウトを作る

•layoutsディレクトリに「application.html.erb」を作成


application.html.erb<html> <head> <title><%= @title || 'lucky' %></title> </head> <body> <%= yield %> </body> </html>

終わったらアクセスして、ブラウザのウィンドウに「lucky」と出ることやソースを確認


<html> <head> <title><%= @title || 'lucky' %></title> </head> <body> <%= yield %> </body> </html>

解説

ここに index.html.erb の内容が入る2011年1月5日水曜日

コントローラの名前に従って

自動的にレイアウトが使われます


演習の準備•さっきつくったファイルを lib/omikuji.rb となるように移動

•omikuji.rb をUTF-8に変換する•lib下のファイルは、自分でrequireしなくてもRails内で使えます


演習http://railsapi.com/doc/rails-v2.3.8/


/todayようこそ！

あなたのおみくじは...

大吉ラッキーカラー：青ラッキーな方角：南


注意

•ビューにロジックを書くのは良くないとされているので、コントローラで @omikuji を用意しましょう


htmlのヒント•段落は <p> </p> で囲みます•中央寄せするにはCSSを使います

•字を大きくするにもCSSを使います<div style="text_align:center;">これ真ん中に</div>例）

<span style="font-size:40px;">Large!</span>例）


応用問題•画面に今日の日付を表示してみる•タイトルを変更する（@title）•ボタンまたはリンクを押したら結果が出るように変える

今日の運勢は？

index

check小吉!!

result


まとめ•「おみくじ」を表すクラスを考えて作った - モデリング

•Railsアプリケーションを体験•コントローラ、モデル、ビューの役割分担の雰囲気を味わう


次のステップ•データベースを使う（sqlite3、mysqlなど）

•scaffold を作ってみる•Rails Guidesを読むhttp://guides.rubyonrails.org/


http://guides.rubyonrails.org

http://guides.rubyonrails.org

RoR逆引きクイックリファレンス毎日コミュニケーションズ

お手元に一冊！


Enjoyprogramming!


Shimane2010

Technology

Transcript of Shimane2010