Tech fun rails_workshop

RUBY ON
RAILS
WORKSHOP!
@equal_001

SELF-INTRODUCTION

• 杉谷弥月（すぎやみつき）

• 去年の冬頃からTechFUNに入りました @equal_001

• ＬＯＣＡＬ学生部に所属してます
• 趣味はWebアプリケーションやＡｎｄｒｏｉｄアプリでゲー
ム作成したり、ハッカーの真似事したり、ビブリオバトルし
たり…
• 好きな言語はC++,Ruby（ときどきJava）

• 「一人開発さびしいよー、学内の人と一緒に開発したい！」

CONTENTS

• What’s Rails?

• Creating the application!

• Put your application online

• Finally

WHAT’S RAILS?

• Ruby on Rails
• プログラミング言語Rubyで構築されたWEBアプリケー
ションフレームワーク
• つまり、Webアプリケーションを効率的に開発するための
ライブラリとツールの集まり

WHAT’S RAILS?

• 設計哲学
• 「同じことを繰り返さない」
• 定義の重複は避け、作業は一回で済ませよう

• 「設定より規約」
• Railsの設計規約に従って開発をすることで、設
定を軽減できるよ

WHAT’S RAILS?

• 特徴その１：MVCアーキテクチャ
• アプリケーションをModel View Controller」の３つの
部分に分割して設計・実装

• Model：データベース管理役、アプリケーションの状態保
持
• View：ユーザインターフェースの生成、表示のための
ロジック
• Controller：アプリケーション内のブレイン、外部イベントか
らの処理
をModelとViewへ適切に渡す

WHAT’S RAILS?

• RailsのMVCアーキテクチャ図

Browser
①リクエスト送信

Controller

②データ入出力
④画面生成の
レスポンス ③Viewの呼び出し

view Model DB

WHAT’S RAILS?

• 特徴その２：直観的なデータベース操作
• SQL言語で操作しなくて済む
• Rubyのように直観的にコードを書ける

例） studentsというテーブルからIDが1009173のレコードを検
可読性が
索する高まる
SQL
ミスの軽減、
SELECT * FROM students WHERE id = 1009173;
発見しやすさ
Ruby on Rails
Student.find(1009173) 仕様変更も
そんなに嫌
じゃなくなる

EXAMPLE

• ＣＯＯＫＰＡＤ
• Ｔｗｉｔｔｅｒ
• GitHub
• 食べログ

ところで皆さん、
ちゃんと環境設定でき
ましたか？

できてない方は挙手！（・ω・）
ノ

CREATING
THE APPLICATION!

• Rails Girls Guidesにあるチュートリアルに
沿って、アイディアボートっぽいものをつ
くってみよう
こんなイメージ！

My Idea
• タイトル
花見
• 内容はなみをしてすとれす解
消する方法を…
• 画像アップロード機能編集/削除

入学式
大学生になったので、
イメチェンして大学デビ
… 編集/削除

CREATING
THE APPLICATION!
• Rails Girls Guides

http://railsgirls-jp.github.com/app/

CREATING
THE APPLICATION

• オススメのエディタ（他にも良いものが沢山ある
よ！）
• Sublime 画面分割できる

コードが自動的に
色分けされて見や
ファイルの階層
すい
が見れる

CREATING
THE APPLICATION

• Rails new [アプリケーション名]
• 新しいアプリケーションを作成するコマンド
• アプリケーションとして成立させるための必要
最低の基盤をrailsが自動生成してくれる

CREATING
THE APPLICATION

• 開発用のWebサーバを起動してみよう
rails server

・デフォルトでポート3000を使っている
・http://localhost:3000 というURLを入力
す
ればアプリケーションにアクセスできる

CREATING
THE APPLICATION
• 初期画面
• これがでてくればアプリは正常に動いている

CREATING
THE APPLICATION
• contentのscaffoldをする

rails generate scaffold content title:string description:text
image:string

• アプリケーションの基本的な機能の
一覧(index)
詳細(show)
新規作成(new/create)
編集(edit/update)
削除(destroy)
を行うために必要なコントローラ、モデル、ビューをまとめ
て生成

CREATING
THE APPLICATION

rails generate scaffold content title:string description:text
image:string

contents
title string
Model
description text
image string
Intex,show,new,edit,destroy view

このコマンドだけで、これだけのファイルが自動生成される！

CREATING
THE APPLICATION
• 未実行のマイグレーションファイルをデー
タベースに適用する
rake db:migrate
rails s

• 「さっきscaffoldして作ったcontentsテーブルを、データ
ベースに適用する」というコマンド

CREATING
THE APPLICATION
• 写真アップロード機能を追加する
• Gemfileに使用するライブラリを記述する
• アップロード機能を追加するためのライブラリをインストー
Gemfileルする

gem ‘sqlite3’
gem ‘carrierwave’

• Terminalでbundleコマンドを入力し、’carrierwave’ライブラ
リをインストールする
bundle

CREATING
THE APPLICATION
• 写真アップロード機能を追加する
• 今のままだと、写真のファイルのpathが表示されるので、
ちゃんと画像が表示されるようにする
app/views/ideas/show.html.erb

<%= @idea.picture %>’

<%= image_tag(@idea.picture_url, :width => 600) if @idea.picture.present? %>

image_tag(画像ファイルpath), オプショ Ideaテーブルのpictureの中身がnilま
ン)でHTMLで画像を表示することができたは空のオブジェクトでは無い場
る合、image_tagメソッドで画像を表示
させる

CREATING
THE APPLICATION
• routes を調整する
• デフォルトページ（http://localhost:3000）が
のままなので、ideasにリダイレクトするように設定しましょう
• 下準備として、の元である
public/index.htmlを消す

• config/routes.rbでリダイレクト先を指定する
# You can have the root of your site routed with
"root"
# just remember to delete public/index.html.
# root :to => 'welcome#index' コメントを読むと、
root :to => redirect('/ideas') ちゃんとやり方が書い
てあるよ！
• 今は指定先が１つだけど、複数ある場合は
上に書いた順に優先順位が決まるよ！

PUT YOUR
APPLICATION
ONLINE
• Herokuをつかって自分のアプリケーションを公開し
よう！

• Web開発からWebアプリケーションの公開までサポートして
くれるプラットフォーム
• WebサーバやGitリポジトリ等の必要最低限の機能を無料で提
供
• カスタム制なので、運用に必要な分の機能を付けたり外した
りすることができる
• 今回は、比較的手軽にデプロイできるHerokuを使っていくよ！
規模の小さいアプリだったら、サーバを無料から使えるよ！

FINALLY
• Railsを学ぶのにオススメするWebサイト
• Ruby/Rails Study Guide
• RAILSCASTS

• オススメの書籍
• RailsによるアジャイルWebアプリケーション開発第4版
• Head First Rails ―頭とからだで覚えるRailsの基本

Tech fun rails_workshop

Recommended

Recommended

More Related Content

Similar to Tech fun rails_workshop

Similar to Tech fun rails_workshop (20)

Tech fun rails_workshop