OMEGA (@equal_001), profile picture
Uploaded byOMEGA (@equal_001)
PPTX, PDF1,736 views

Tech fun rails_workshop

2013/02/04にTechFUNでやったRails勉強会の資料です

Embed presentation

Download to read offline
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
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アーキテクチャ図 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!
ところで皆さん、 ちゃんと環境設定でき ましたか？ できてない方は挙手！（・ω・） ノ
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
PUT YOUR APPLICATION ONLINE • Herokuをつかって自分のアプリケーションを公開し よう！ • Web開発からWebアプリケーションの公開までサポートして くれるプラットフォーム • WebサーバやGitリポジトリ等の必要最低限の機能を無料で提 供 • カスタム制なので、運用に必要な分の機能を付けたり外した りすることができる • 今回は、比較的手軽にデプロイできるHerokuを使っていくよ！ 規模の小さいアプリだったら、サーバを無料から使えるよ！
FINALLY
FINALLY • Railsを学ぶのにオススメするWebサイト • Ruby/Rails Study Guide • RAILSCASTS • オススメの書籍 • RailsによるアジャイルWebアプリケーション開発 第4版 • Head First Rails ―頭とからだで覚えるRailsの基本

More Related Content

PPT
AWS free tier maximization
byKenkichi Okazaki
 
PDF
Inspector CLI (JAWS-UG 京王線支部 #4 LT)
byKenkichi Okazaki
 
PDF
Underscore.jsの中のソースコードにみた John Resigさんと Jeremy Ashkenasさんの接点について
byMakoto Hayase
 
PDF
20120702勉強会 webアプリ作ってみた
byShugo Numano
 
PDF
軽量ASP.NETフレームワークNancy
byNarami Kiyokura
 
PDF
軽量フレームワークNancy
byNarami Kiyokura
 
PDF
自分用プラグインのススメ
byHidetaka Okamoto
 
PPTX
ちょっと真面目にPython&Django・基礎編
byOMEGA (@equal_001)
 
AWS free tier maximization
byKenkichi Okazaki
 
Inspector CLI (JAWS-UG 京王線支部 #4 LT)
byKenkichi Okazaki
 
Underscore.jsの中のソースコードにみた John Resigさんと Jeremy Ashkenasさんの接点について
byMakoto Hayase
 
20120702勉強会 webアプリ作ってみた
byShugo Numano
 
軽量ASP.NETフレームワークNancy
byNarami Kiyokura
 
軽量フレームワークNancy
byNarami Kiyokura
 
自分用プラグインのススメ
byHidetaka Okamoto
 
ちょっと真面目にPython&Django・基礎編
byOMEGA (@equal_001)
 

Similar to Tech fun rails_workshop

PDF
Rails初心者レッスン lesson1 3rd edition
byGoh Matsumoto
 
PDF
はじめての Rails アプリ開発
byn-fukidome
 
PPTX
フレームワーク品評会 Ruby on Rails #crossjp
byShiro Fukuda
 
KEY
Rails基礎講座 part.2
byJun Yokoyama
 
PDF
The Essence of Using Ruby on Rails in Corporations
byKoichiro Ohba
 
PPTX
UnicastWS vol.2
byUnicast Inc.
 
PDF
Rails Controller Fundamentals
byTakashi SAKAGUCHI
 
PDF
Ruby on Rails Tutorial
byKen Iiboshi
 
PDF
【入門】3時間でアプリ公開！ゼロからのプログラミングRails講座
byDIVE INTO CODE Corp.
 
PDF
Rubyで作るtwitter風webアプリケーション
byNaoto Hori
 
PDF
Rails初心者レッスン lesson2 3edition
bySatomi Tsujita
 
PDF
超高速アプリ開発法
byKeiichi SASAKI
 
PDF
nomlab_okayamaruby_slide
bynomlab
 
PDF
Next-L Enju 開発WS #03 Ruby on Railsの使い方
byKosuke Tanabe
 
PDF
Rails3.1rc4を試してみた
byTakahiro Hidaka
 
PDF
Getting Started with Ruby on Rails4 + Twitter Bootstrap3
byYukimitsu Izawa
 
PDF
Ruby on Rails Overview
byKoki Shimizu
 
PDF
Railsの基礎
byJunya Ishihara
 
PPTX
【勉強会】 はじめてのRuby on Rails 4入門
byYuta Nakamura
 
PDF
Hyper → Highspeed → Development
byaktsk
 
Rails初心者レッスン lesson1 3rd edition
byGoh Matsumoto
 
はじめての Rails アプリ開発
byn-fukidome
 
フレームワーク品評会 Ruby on Rails #crossjp
byShiro Fukuda
 
Rails基礎講座 part.2
byJun Yokoyama
 
The Essence of Using Ruby on Rails in Corporations
byKoichiro Ohba
 
UnicastWS vol.2
byUnicast Inc.
 
Rails Controller Fundamentals
byTakashi SAKAGUCHI
 
Ruby on Rails Tutorial
byKen Iiboshi
 
【入門】3時間でアプリ公開！ゼロからのプログラミングRails講座
byDIVE INTO CODE Corp.
 
Rubyで作るtwitter風webアプリケーション
byNaoto Hori
 
Rails初心者レッスン lesson2 3edition
bySatomi Tsujita
 
超高速アプリ開発法
byKeiichi SASAKI
 
nomlab_okayamaruby_slide
bynomlab
 
Next-L Enju 開発WS #03 Ruby on Railsの使い方
byKosuke Tanabe
 
Rails3.1rc4を試してみた
byTakahiro Hidaka
 
Getting Started with Ruby on Rails4 + Twitter Bootstrap3
byYukimitsu Izawa
 
Ruby on Rails Overview
byKoki Shimizu
 
Railsの基礎
byJunya Ishihara
 
【勉強会】 はじめてのRuby on Rails 4入門
byYuta Nakamura
 
Hyper → Highspeed → Development
byaktsk
 

Tech fun rails_workshop

  • 1.
  • 2.
    SELF-INTRODUCTION • 杉谷 弥月（すぎや みつき） • 去年の冬頃からTechFUNに入りました @equal_001 • ＬＯＣＡＬ学生部に所属してます • 趣味はWebアプリケーションやＡｎｄｒｏｉｄアプリでゲー ム作成したり、ハッカーの真似事したり、ビブリオバトルし たり… • 好きな言語はC++,Ruby（ときどきJava） • 「一人開発さびしいよー、学内の人と一緒に開発したい！」
  • 3.
    CONTENTS • What’s Rails? •Creating the application! • Put your application online • Finally
  • 4.
  • 5.
  • 6.
    WHAT’S RAILS? • Rubyon Rails • プログラミング言語Rubyで構築されたWEBアプリケー ションフレームワーク • つまり、Webアプリケーションを効率的に開発するための ライブラリとツールの集まり
  • 7.
    WHAT’S RAILS? • 設計哲学 • 「同じことを繰り返さない」 • 定義の重複は避け、作業は一回で済ませよう • 「設定より規約」 • Railsの設計規約に従って開発をすることで、設 定を軽減できるよ
  • 8.
    WHAT’S RAILS? • 特徴その１：MVCアーキテクチャ • アプリケーションをModel View Controller」の３つの 部分に分割して設計・実装 • Model： データベース管理役、アプリケーションの状態保 持 • View： ユーザインターフェースの生成、表示のための ロジック • Controller： アプリケーション内のブレイン、外部イベントか らの処理 をModelとViewへ適切に渡す
  • 9.
    WHAT’S RAILS? • RailsのMVCアーキテクチャ図 Browser ①リクエスト送信 Controller ②データ入出力 ④画面生成の レスポンス ③Viewの呼び出し view Model DB
  • 10.
    WHAT’S RAILS? • 特徴その２：直観的なデータベース操作 • SQL言語で操作しなくて済む • Rubyのように直観的にコードを書ける 例） studentsというテーブルからIDが1009173のレコードを検 可読性が 索する 高まる SQL ミスの軽減、 SELECT * FROM students WHERE id = 1009173; 発見しやすさ Ruby on Rails Student.find(1009173) 仕様変更も そんなに嫌 じゃなくなる
  • 11.
  • 13.
  • 14.
    ところで皆さん、 ちゃんと環境設定でき ましたか？ できてない方は挙手！（・ω・） ノ
  • 15.
    CREATING THE APPLICATION! • RailsGirls Guidesにあるチュートリアルに 沿って、アイディアボートっぽいものをつ くってみよう こんなイメージ！ My Idea • タイトル 花見 • 内容 はなみをしてすとれす解 消する方法を… • 画像アップロード機能 編集/削除 入学式 大学生になったので、 イメチェンして大学デビ … 編集/削除
  • 16.
    CREATING THE APPLICATION! • RailsGirls Guides http://railsgirls-jp.github.com/app/
  • 17.
    CREATING THE APPLICATION • オススメのエディタ（他にも良いものが沢山ある よ！） • Sublime 画面分割できる コードが自動的に 色分けされて見や ファイルの階層 すい が見れる
  • 18.
    CREATING THE APPLICATION • Railsnew [アプリケーション名] • 新しいアプリケーションを作成するコマンド • アプリケーションとして成立させるための必要 最低の基盤をrailsが自動生成してくれる
  • 19.
    CREATING THE APPLICATION • 開発用のWebサーバを起動してみよう railsserver ・デフォルトでポート3000を使っている ・http://localhost:3000 というURLを入力 す ればアプリケーションにアクセスできる
  • 20.
    CREATING THE APPLICATION • 初期画面 • これがでてくればアプリは正常に動いている
  • 21.
    CREATING THE APPLICATION • contentのscaffoldをする rails generate scaffold content title:string description:text image:string • アプリケーションの基本的な機能の 一覧(index) 詳細(show) 新規作成(new/create) 編集(edit/update) 削除(destroy) を行うために必要なコントローラ、モデル、ビューをまとめ て生成
  • 22.
    CREATING THEAPPLICATION rails generate scaffold content title:string description:text image:string contents title string Model description text image string Intex,show,new,edit,destroy view このコマンドだけで、これだけのファイルが自動生成される！
  • 23.
    CREATING THE APPLICATION • 未実行のマイグレーションファイルをデー タベースに適用する rake db:migrate rails s • 「さっきscaffoldして作ったcontentsテーブルを、データ ベースに適用する」というコマンド
  • 24.
    CREATING THE APPLICATION • 写真アップロード機能を追加する • Gemfileに使用するライブラリを記述する • アップロード機能を追加するためのライブラリをインストー Gemfileルする gem ‘sqlite3’ gem ‘carrierwave’ • Terminalでbundleコマンドを入力し、’carrierwave’ライブラ リをインストールする bundle
  • 25.
    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メソッドで画像を表示 させる
  • 26.
    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') ちゃんとやり方が書い てあるよ！ • 今は指定先が１つだけど、複数ある場合は 上に書いた順に優先順位が決まるよ！
  • 27.
  • 28.
    PUT YOUR APPLICATION ONLINE • Herokuをつかって自分のアプリケーションを公開し よう！ • Web開発からWebアプリケーションの公開までサポートして くれるプラットフォーム • WebサーバやGitリポジトリ等の必要最低限の機能を無料で提 供 • カスタム制なので、運用に必要な分の機能を付けたり外した りすることができる • 今回は、比較的手軽にデプロイできるHerokuを使っていくよ！ 規模の小さいアプリだったら、サーバを無料から使えるよ！
  • 29.
  • 30.
    FINALLY • Railsを学ぶのにオススメするWebサイト •Ruby/Rails Study Guide • RAILSCASTS • オススメの書籍 • RailsによるアジャイルWebアプリケーション開発 第4版 • Head First Rails ―頭とからだで覚えるRailsの基本