Tech fun rails_workshop

RUBY ON RAILS WORKSHOP!

@equal_001

SELF-INTRODUCTION

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

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

• ＬＯＣＡＬ学生部に所属してます

• 趣味は Web アプリケーションやＡｎｄｒｏｉｄアプリでゲーム作成したり、ハッカーの真似事したり、ビブリオバトルしたり…

• 好きな言語は C++,Ruby （ときどき Java ）

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

@equal_001

http://students.local.or.jp/

CONTENTS

• What’s Rails?

• Creating the application!

• Put your application online

• Finally

LET'S START!

WHAT’S RAILS?

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アーキテクチャ図

Controller

view Model

Browser

DB

①リクエスト送信

②データ入出力③Viewの呼び出し

④画面生成の　　レスポンス

WHAT’S 　 RAILS?

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

例）　 students というテーブルから ID が 1009173 のレコードを検索する

SQL 　 SELECT * FROM students WHERE id = 1009173;

Ruby on Rails 　 Student.find(1009173)

可読性が高まる

ミスの軽減、発見しやすさ

仕様変更もそんなに嫌

じゃなくなる

EXAMPLE

• ＣＯＯＫＰＡＤ• Ｔｗｉｔｔｅｒ• GitHub

• 食べログ

Break time…

CREATING THE APPLICATION!

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

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


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

• タイトル• 内容• 画像アップロード機能

　花見

My Idea

　大学生になったので、イメチェンして大学デビ…　　　

編集 / 削除

　入学式

　はなみをしてすとれす解消する方法を…

編集 / 削除

こんなイメージ！


• Rails Girls Guides

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

CREATING THE APPLICATION

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

ファイルの階層が見れる

コードが自動的に色分けされて見や

すい


• Rails new [アプリケーション名 ]

• 新しいアプリケーションを作成するコマンド• アプリケーションとして成立させるための必要

最低の基盤を rails が自動生成してくれる


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

rails server

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

http://localhost:3000/


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


• contentの scaffoldをする

• アプリケーションの基本的な機能の一覧 (index)

詳細 (show)

新規作成 (new/create)

編集 (edit/update)

削除 (destroy)

を行うために必要なコントローラ、モデル、ビューをまとめて生成

rails generate scaffold content title:string description:text

image:string


rails generate scaffold content title:string description:text

image:string

title string

description text

image string

contents

Intex,show,new,edit,destroy view

Model

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


• 未実行のマイグレーションファイルをデータベースに適用する

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

rake db:migrate

rails s


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

ルする

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

gem ‘sqlite3’

gem ‘carrierwave’

Gemfile

bundle


• 写真アップロード機能を追加する• 今のままだと、写真のファイルの path が表示されるので、

ちゃんと画像が表示されるようにする

<%= @idea.picture %>’

app/views/ideas/show.html.erb

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

%>Idea テーブルの picture の中身が nilまたは空のオブジェクトでは無い場合、 image_tag メソッドで画像を表示させる

image_tag( 画像ファイル path), オプション ) で HTML で画像を表示することができる


• 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')

コメントを読むと、ちゃんとやり方が書いてあるよ！

http://localhost:3000/

PUT YOUR APPLICATIONONLINE

Welcome!

PUT YOURAPPLICATIONONLINE

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

　　　　　　　　　　　　• Web 開発から Web アプリケーションの公開までサポートし

てくれるプラットフォーム• Webサーバや Git リポジトリ等の必要最低限の機能を無料で提供

• カスタム制なので、運用に必要な分の機能を付けたり外したりすることができる

• 規模の小さいアプリだったら、サーバを無料から使えるよ！今回は、比較的手軽にデプロイできる Herokuを使っていくよ！

FINALLY

FINALLY

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

• オススメの書籍• Rails によるアジャイル Web アプリケーション開発第 4版

• Head First Rails ―頭とからだで覚える Rails の基本

http://qwik.jp/okinawarb/3.html



http://railscasts.com/

Documents

Tech fun rails_workshop