ruby on rails入門 ~nitrous.io を用いた開発環境構築~€¦ · ruby on rails入門...
TRANSCRIPT
![Page 1: Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~€¦ · Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~ 2 1.nitrous.ioとは? 2.nitrous.ioの使用準備](https://reader030.vdocuments.net/reader030/viewer/2022041109/5f0d27f97e708231d438f373/html5/thumbnails/1.jpg)
Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~
![Page 2: Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~€¦ · Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~ 2 1.nitrous.ioとは? 2.nitrous.ioの使用準備](https://reader030.vdocuments.net/reader030/viewer/2022041109/5f0d27f97e708231d438f373/html5/thumbnails/2.jpg)
2
1. nitrous.ioとは? 2. nitrous.ioの使用準備 3. Ruby on Rails で webアプリを作成する
もくじ
![Page 3: Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~€¦ · Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~ 2 1.nitrous.ioとは? 2.nitrous.ioの使用準備](https://reader030.vdocuments.net/reader030/viewer/2022041109/5f0d27f97e708231d438f373/html5/thumbnails/3.jpg)
nitrous.ioとは?
![Page 4: Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~€¦ · Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~ 2 1.nitrous.ioとは? 2.nitrous.ioの使用準備](https://reader030.vdocuments.net/reader030/viewer/2022041109/5f0d27f97e708231d438f373/html5/thumbnails/4.jpg)
4
WebIDEを統合したPaaS
•WebブラウザだけでWeb開発から公開まで出来てしまう •無料で使える •RubyやPHP、Go等様々な言語に対応 ※ 無料の場合、使用していないとサーバーが止まる ※ 上記情報は 2015/02/23 現在
nitrous.ioとは?
![Page 5: Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~€¦ · Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~ 2 1.nitrous.ioとは? 2.nitrous.ioの使用準備](https://reader030.vdocuments.net/reader030/viewer/2022041109/5f0d27f97e708231d438f373/html5/thumbnails/5.jpg)
5
エディタ
コンソール (Linuxサーバーへの操作画面)
![Page 6: Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~€¦ · Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~ 2 1.nitrous.ioとは? 2.nitrous.ioの使用準備](https://reader030.vdocuments.net/reader030/viewer/2022041109/5f0d27f97e708231d438f373/html5/thumbnails/6.jpg)
nitrous.ioの使用準備
![Page 7: Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~€¦ · Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~ 2 1.nitrous.ioとは? 2.nitrous.ioの使用準備](https://reader030.vdocuments.net/reader030/viewer/2022041109/5f0d27f97e708231d438f373/html5/thumbnails/7.jpg)
7
http://nitrous.io でアカウント登録
アカウント登録
![Page 8: Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~€¦ · Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~ 2 1.nitrous.ioとは? 2.nitrous.ioの使用準備](https://reader030.vdocuments.net/reader030/viewer/2022041109/5f0d27f97e708231d438f373/html5/thumbnails/8.jpg)
8
メール認証後 http://nitrous.io へ再アクセス
クリック
![Page 9: Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~€¦ · Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~ 2 1.nitrous.ioとは? 2.nitrous.ioの使用準備](https://reader030.vdocuments.net/reader030/viewer/2022041109/5f0d27f97e708231d438f373/html5/thumbnails/9.jpg)
9
Ruby on Rails のBox(開発環境)を作る
Ruby on Rails をクリック
Create Box をクリック
![Page 10: Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~€¦ · Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~ 2 1.nitrous.ioとは? 2.nitrous.ioの使用準備](https://reader030.vdocuments.net/reader030/viewer/2022041109/5f0d27f97e708231d438f373/html5/thumbnails/10.jpg)
10
Ruby on Rails のBox(開発環境)を作る
Next をクリック
![Page 11: Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~€¦ · Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~ 2 1.nitrous.ioとは? 2.nitrous.ioの使用準備](https://reader030.vdocuments.net/reader030/viewer/2022041109/5f0d27f97e708231d438f373/html5/thumbnails/11.jpg)
11
Ruby on Rails のBox(開発環境)を作る
スクロールで最下部へ
Okay, Take Me to my Box! をクリック
![Page 12: Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~€¦ · Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~ 2 1.nitrous.ioとは? 2.nitrous.ioの使用準備](https://reader030.vdocuments.net/reader030/viewer/2022041109/5f0d27f97e708231d438f373/html5/thumbnails/12.jpg)
12
Ruby on Rails のBox(開発環境)が出来た
IDE (統合開発環境) の画面が表示される
![Page 13: Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~€¦ · Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~ 2 1.nitrous.ioとは? 2.nitrous.ioの使用準備](https://reader030.vdocuments.net/reader030/viewer/2022041109/5f0d27f97e708231d438f373/html5/thumbnails/13.jpg)
13
IDEを再度開く場合 (http://nitrous.io より)
クリック
![Page 14: Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~€¦ · Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~ 2 1.nitrous.ioとは? 2.nitrous.ioの使用準備](https://reader030.vdocuments.net/reader030/viewer/2022041109/5f0d27f97e708231d438f373/html5/thumbnails/14.jpg)
14
IDEを再度開く場合 (http://nitrous.io より)
クリック
![Page 15: Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~€¦ · Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~ 2 1.nitrous.ioとは? 2.nitrous.ioの使用準備](https://reader030.vdocuments.net/reader030/viewer/2022041109/5f0d27f97e708231d438f373/html5/thumbnails/15.jpg)
15
IDEを再度開く場合 (http://nitrous.io より)
赤灯(停止中)の場合 Start をクリック
![Page 16: Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~€¦ · Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~ 2 1.nitrous.ioとは? 2.nitrous.ioの使用準備](https://reader030.vdocuments.net/reader030/viewer/2022041109/5f0d27f97e708231d438f373/html5/thumbnails/16.jpg)
16
IDEを再度開く場合 (http://nitrous.io より)
IDEをクリック
![Page 17: Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~€¦ · Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~ 2 1.nitrous.ioとは? 2.nitrous.ioの使用準備](https://reader030.vdocuments.net/reader030/viewer/2022041109/5f0d27f97e708231d438f373/html5/thumbnails/17.jpg)
Ruby on Rails で webアプリを作成する
![Page 18: Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~€¦ · Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~ 2 1.nitrous.ioとは? 2.nitrous.ioの使用準備](https://reader030.vdocuments.net/reader030/viewer/2022041109/5f0d27f97e708231d438f373/html5/thumbnails/18.jpg)
18
実践を通じて…
1. nitrous.io の使い方がわかるようになる 2. Ruby on Rails を使うと簡単に機能作成ができることを体験してみる
簡単な投稿機能を作ろう
![Page 19: Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~€¦ · Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~ 2 1.nitrous.ioとは? 2.nitrous.ioの使用準備](https://reader030.vdocuments.net/reader030/viewer/2022041109/5f0d27f97e708231d438f373/html5/thumbnails/19.jpg)
先ずはIDEの画面を表示
コンソールにコマンドを打って作業していく
![Page 20: Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~€¦ · Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~ 2 1.nitrous.ioとは? 2.nitrous.ioの使用準備](https://reader030.vdocuments.net/reader030/viewer/2022041109/5f0d27f97e708231d438f373/html5/thumbnails/20.jpg)
① rubyのバージョンを確認してみるruby -v
② Railsのバージョンを確認してみるrails -v
![Page 21: Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~€¦ · Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~ 2 1.nitrous.ioとは? 2.nitrous.ioの使用準備](https://reader030.vdocuments.net/reader030/viewer/2022041109/5f0d27f97e708231d438f373/html5/thumbnails/21.jpg)
③ 『my_app』という名前でアプリ作成rails new my_app
④ 作成した『my_app』ディレクトリに移動cd my_app
⑤ サーバーを起動rails server
![Page 22: Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~€¦ · Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~ 2 1.nitrous.ioとは? 2.nitrous.ioの使用準備](https://reader030.vdocuments.net/reader030/viewer/2022041109/5f0d27f97e708231d438f373/html5/thumbnails/22.jpg)
Preview > Port 3000 をクリックして ブラウザで確認
ブラウザで確認する
![Page 23: Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~€¦ · Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~ 2 1.nitrous.ioとは? 2.nitrous.ioの使用準備](https://reader030.vdocuments.net/reader030/viewer/2022041109/5f0d27f97e708231d438f373/html5/thumbnails/23.jpg)
Railsのアプリができている事が確認出来る
![Page 24: Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~€¦ · Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~ 2 1.nitrous.ioとは? 2.nitrous.ioの使用準備](https://reader030.vdocuments.net/reader030/viewer/2022041109/5f0d27f97e708231d438f373/html5/thumbnails/24.jpg)
キーボード 『Cntrol + C』を押して サーバーを停止する
サーバーの停止方法
![Page 25: Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~€¦ · Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~ 2 1.nitrous.ioとは? 2.nitrous.ioの使用準備](https://reader030.vdocuments.net/reader030/viewer/2022041109/5f0d27f97e708231d438f373/html5/thumbnails/25.jpg)
⑥ 投稿機能を自動生成する ※改行なし↓rails generate scaffold entry name:string body:text
⑦ 投稿機能のデータベースを作成するrake db:migrate
⑧ サーバーを起動rails server
![Page 26: Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~€¦ · Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~ 2 1.nitrous.ioとは? 2.nitrous.ioの使用準備](https://reader030.vdocuments.net/reader030/viewer/2022041109/5f0d27f97e708231d438f373/html5/thumbnails/26.jpg)
Preview > Port 3000 をクリックして ブラウザで確認
ブラウザで確認する
![Page 27: Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~€¦ · Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~ 2 1.nitrous.ioとは? 2.nitrous.ioの使用準備](https://reader030.vdocuments.net/reader030/viewer/2022041109/5f0d27f97e708231d438f373/html5/thumbnails/27.jpg)
http://貴方の環境のURL/entries
Listing entries ができている事を確認できる
![Page 28: Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~€¦ · Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~ 2 1.nitrous.ioとは? 2.nitrous.ioの使用準備](https://reader030.vdocuments.net/reader030/viewer/2022041109/5f0d27f97e708231d438f373/html5/thumbnails/28.jpg)
28
開発環境の構築は難しいけれど、 nitrous.io など PaaSサービス等を使うと簡単に出来ます。
まとめ
![Page 29: Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~€¦ · Ruby on Rails入門 ~nitrous.io を用いた開発環境構築~ 2 1.nitrous.ioとは? 2.nitrous.ioの使用準備](https://reader030.vdocuments.net/reader030/viewer/2022041109/5f0d27f97e708231d438f373/html5/thumbnails/29.jpg)
https://schoo.jp/course/137Ruby on Rails 入門 ~ミニブログの制作~(全5回)
Ruby on Railsのオススメ授業