狠狠撸

狠狠撸Share a Scribd company logo
RUBY ON
RAILS
WORKSHOP!
   @equal_001
SELF-INTRODUCTION

? 杉谷    弥月(すぎや    みつき)


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

  ?   LOCAL学生部に所属してます
  ?   趣味はWebアプリケーションやAndroidアプリでゲー
      ム作成したり、ハッカーの真似事したり、ビブリオバトルし
      たり…
  ?   好きな言語は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?

? 特徴その1:MVCアーキテクチャ
 ? アプリケーションをModel View Controller」の3つの
   部分に分割して設計?実装

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

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

Browser
          ①リクエスト送信




                     Controller

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


          view                    Model     DB
WHAT’S RAILS?

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


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



? COOKPAD
? Twitter
? GitHub
? 食べログ
Tech fun rails_workshop
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')           ちゃんとやり方が書い
                                         てあるよ!
  ? 今は指定先が1つだけど、複数ある場合は
     上に書いた順に優先順位が決まるよ!
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

Similar to Tech fun rails_workshop (20)

「新しい」を生み出すための奥别产アプリ开発とその周辺
「新しい」を生み出すための奥别产アプリ开発とその周辺「新しい」を生み出すための奥别产アプリ开発とその周辺
「新しい」を生み出すための奥别产アプリ开発とその周辺
Yusuke Wada
?
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインWebフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
?
搁耻产测て?作る迟飞颈迟迟别谤风飞别产アフ?リケーション
搁耻产测て?作る迟飞颈迟迟别谤风飞别产アフ?リケーション搁耻产测て?作る迟飞颈迟迟别谤风飞别产アフ?リケーション
搁耻产测て?作る迟飞颈迟迟别谤风飞别产アフ?リケーション
Naoto Hori
?
The seminar of asp.net at 201908 sakurug
The seminar of asp.net at 201908 sakurugThe seminar of asp.net at 201908 sakurug
The seminar of asp.net at 201908 sakurug
SAKURUG co.
?
ASP.NET Core 概要(2017年3月時点)
ASP.NET Core 概要(2017年3月時点)ASP.NET Core 概要(2017年3月時点)
ASP.NET Core 概要(2017年3月時点)
Atsushi Yokohama (BEACHSIDE)
?
Getting Started with Ruby on Rails4 + Twitter Bootstrap3
Getting Started with Ruby on Rails4 + Twitter Bootstrap3Getting Started with Ruby on Rails4 + Twitter Bootstrap3
Getting Started with Ruby on Rails4 + Twitter Bootstrap3
Yukimitsu Izawa
?
Ember コミュニティとわたし
Ember コミュニティとわたしEmber コミュニティとわたし
Ember コミュニティとわたし
Ryunosuke SATO
?
笔测迟丑辞苍による奥别产スクレイピング入门
笔测迟丑辞苍による奥别产スクレイピング入门笔测迟丑辞苍による奥别产スクレイピング入门
笔测迟丑辞苍による奥别产スクレイピング入门
Hironori Sekine
?
Xcode4 project template (slide)
Xcode4 project template (slide)Xcode4 project template (slide)
Xcode4 project template (slide)
Wataru Kimura
?
Realm platform2019
Realm platform2019Realm platform2019
Realm platform2019
昌桓 李
?
はし?めての Rails アフ?リ開発
はし?めての Rails アフ?リ開発はし?めての Rails アフ?リ開発
はし?めての Rails アフ?リ開発
n-fukidome
?
About rails 3
About rails 3About rails 3
About rails 3
issei126
?
Salesforce Lightning をやってみてあれこれ
Salesforce Lightning をやってみてあれこれSalesforce Lightning をやってみてあれこれ
Salesforce Lightning をやってみてあれこれ
寛 吉田
?
超高速アプリ开発法
超高速アプリ开発法超高速アプリ开発法
超高速アプリ开発法
Keiichi SASAKI
?
はじめての Azure 開発
はじめての Azure 開発はじめての Azure 開発
はじめての Azure 開発
Yoshitaka Seo
?
The Essence of Using Ruby on Rails in Corporations
The Essence of Using Ruby on Rails in CorporationsThe Essence of Using Ruby on Rails in Corporations
The Essence of Using Ruby on Rails in Corporations
Koichiro Ohba
?
笔贬笔开発者のための狈辞厂蚕尝入门
笔贬笔开発者のための狈辞厂蚕尝入门笔贬笔开発者のための狈辞厂蚕尝入门
笔贬笔开発者のための狈辞厂蚕尝入门
じゅん なかざ
?
Rails初心者レッスン lesson1 3rd edition
Rails初心者レッスン lesson1 3rd editionRails初心者レッスン lesson1 3rd edition
Rails初心者レッスン lesson1 3rd edition
Goh Matsumoto
?
「新しい」を生み出すための奥别产アプリ开発とその周辺
「新しい」を生み出すための奥别产アプリ开発とその周辺「新しい」を生み出すための奥别产アプリ开発とその周辺
「新しい」を生み出すための奥别产アプリ开発とその周辺
Yusuke Wada
?
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインWebフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
?
搁耻产测て?作る迟飞颈迟迟别谤风飞别产アフ?リケーション
搁耻产测て?作る迟飞颈迟迟别谤风飞别产アフ?リケーション搁耻产测て?作る迟飞颈迟迟别谤风飞别产アフ?リケーション
搁耻产测て?作る迟飞颈迟迟别谤风飞别产アフ?リケーション
Naoto Hori
?
The seminar of asp.net at 201908 sakurug
The seminar of asp.net at 201908 sakurugThe seminar of asp.net at 201908 sakurug
The seminar of asp.net at 201908 sakurug
SAKURUG co.
?
Getting Started with Ruby on Rails4 + Twitter Bootstrap3
Getting Started with Ruby on Rails4 + Twitter Bootstrap3Getting Started with Ruby on Rails4 + Twitter Bootstrap3
Getting Started with Ruby on Rails4 + Twitter Bootstrap3
Yukimitsu Izawa
?
Ember コミュニティとわたし
Ember コミュニティとわたしEmber コミュニティとわたし
Ember コミュニティとわたし
Ryunosuke SATO
?
笔测迟丑辞苍による奥别产スクレイピング入门
笔测迟丑辞苍による奥别产スクレイピング入门笔测迟丑辞苍による奥别产スクレイピング入门
笔测迟丑辞苍による奥别产スクレイピング入门
Hironori Sekine
?
Xcode4 project template (slide)
Xcode4 project template (slide)Xcode4 project template (slide)
Xcode4 project template (slide)
Wataru Kimura
?
Realm platform2019
Realm platform2019Realm platform2019
Realm platform2019
昌桓 李
?
はし?めての Rails アフ?リ開発
はし?めての Rails アフ?リ開発はし?めての Rails アフ?リ開発
はし?めての Rails アフ?リ開発
n-fukidome
?
About rails 3
About rails 3About rails 3
About rails 3
issei126
?
Salesforce Lightning をやってみてあれこれ
Salesforce Lightning をやってみてあれこれSalesforce Lightning をやってみてあれこれ
Salesforce Lightning をやってみてあれこれ
寛 吉田
?
超高速アプリ开発法
超高速アプリ开発法超高速アプリ开発法
超高速アプリ开発法
Keiichi SASAKI
?
はじめての Azure 開発
はじめての Azure 開発はじめての Azure 開発
はじめての Azure 開発
Yoshitaka Seo
?
The Essence of Using Ruby on Rails in Corporations
The Essence of Using Ruby on Rails in CorporationsThe Essence of Using Ruby on Rails in Corporations
The Essence of Using Ruby on Rails in Corporations
Koichiro Ohba
?
笔贬笔开発者のための狈辞厂蚕尝入门
笔贬笔开発者のための狈辞厂蚕尝入门笔贬笔开発者のための狈辞厂蚕尝入门
笔贬笔开発者のための狈辞厂蚕尝入门
じゅん なかざ
?
Rails初心者レッスン lesson1 3rd edition
Rails初心者レッスン lesson1 3rd editionRails初心者レッスン lesson1 3rd edition
Rails初心者レッスン lesson1 3rd edition
Goh Matsumoto
?

Tech fun rails_workshop

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