Shimane2010

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日水曜日

要件１

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

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日水曜日