Ruby on Rails チュートリアル 実例を使ってサンプルプログラムを作成したみた

参考文献:Ruby on Rails Tutorial 日本語訳

確認環境:

cloud9

Rails version: 5.1.3
Ruby version: 2.4.0 (x86_64-linux)

 

Ruby on Rails Tutorial 日本語訳 を参考に、サンプルプログラムを作成したみました。

無料で、これほどギュっとエッセンスがつまった内容はすばらしいです。

すごくわかりやすくて、さくさく作れます。

まさに、「プログラマが書いてて楽しくなるプログラミング言語」というのも納得です。

 

Herokuにサンプルプログラム を公開しました。こちらから動作確認できます。

Git Hubにソースコード を公開しました。

 

 

cloud9でRuby on Railsを動かす

クラウドIDE(統合開発環境)cloud9でRuby on Railsを動かす方法をメモしておきます。

参考文献:Ruby on Rails Tutorial 日本語訳

確認環境:

cloud9

Rails version: 5.1.3
Ruby version: 2.4.0 (x86_64-linux)

 

Railsをインストールする

Railsのインストールにはgemコマンドを使います。
(このコマンドは、RubyGemsパッケージマネージャが提供してます。)

インストールには以下のコマンドを実行します。

 

$ gem install rails -v 5.1.2

-vオプションでバージョンを指定できます。

 

「workspace」フォルダを作る

$ cd
$ mkdir workspace
$ cd workspace

 

rails newを実行する

$ rails _5.1.2_ new hello_app

→ 大量のファイルとディレクトリが作成される。

 

アプリケーションに必要なgemをインストールする

\hello_app\Gemfileを以下の通りに編集する。

 

gem 'rails', '5.1.2'
gem 'sqlite3', '1.3.13'
gem 'puma', '3.9.1'
gem 'sass-rails', '5.0.6'
gem 'uglifier', '3.2.0'
gem 'coffee-rails', '4.2.2'
gem 'jquery-rails', '4.3.1'
gem 'turbolinks', '5.0.1'
gem 'jbuilder', '2.6.4'

group :development, :test do
gem 'byebug', '9.0.6', platform: :mri
end

group :development do
gem 'web-console', '3.5.1'
gem 'listen', '3.0.8'
gem 'spring', '2.0.2'
gem 'spring-watcher-listen', '2.0.1'
end

# Windows環境ではtzinfo-dataというgemを含める必要があります
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

 

gemfileを上記のように編集したら、以下のコマンドを実行します。

$ cd hello_app/
$ bundle install

 

rails serverを実行する。

$ rails server -b $IP -p $PORT

 

.rbファイルを編集する。

\hello_app\app\controllers\aplication_contoroller.rbを以下の通りに編集する。

class ApplicationController < ActionController::Base
protect_from_forgery with: :exception

def hello
render html: "hello, world!"
end

end

 

\hello_app\config\route.rbを以下の通りに編集する。

Rails.application.routes.draw do
root 'application#hello'
end

 

Railsアプリケーションを表示する

cloud9を使用している場合は、

右上の「Share」の箇所をクリック>Link to shareのApplicationの箇所をクリック>Openをクリック

 

Ruby on Rails チュートリアル 実例を使ってRailsを学ぼう

Ruby on Railsを手っ取り早く学びたい人におすすめのサイト

Michael Hartl (マイケル・ハートル)さん著
Ruby on Rails Tutorial の日本語訳です。
オンライン版は無料で公開しています。
Ruby on Rails Tutorial 日本語訳

 

Ruby on Railsを手っ取り早く動かしてみたい人におすすめクラウドIDE(統合開発環境)

・cloud9

 

Herokuでpostgresqlを使う方法

 

Ruby on Railsは、デフォルトで使うデータベースがSQLiteなのですが、

これをHerokuで推奨しているデータベースのpostgresqlに変更する方法をメモしておきます。

 

確認環境:

Max OS X El Capitan 10.11.2

Xcode 7.3

Command Line Tools for Xcode 7.3

Homebrew 0.9.9

Ruby 2.3.1

 

以下のコマンドで自分のPCにRuby on Railsのアプリを作成します。

今回は、アプリの名前を test としておきます。

-d postgresql オプションでデータベースにpostgresql(ポストグレエスキューエル)を指定します。

$ rails new test -d postgresql

 

以下のコマンドで、作成したアプリの場所に移動します。

$ cd test

 

scaffoldコマンドで、雛形を作成します。

今回は、name:string hp:integerという2つのフィールドを指定します。

$ rails g scaffold status name:string hp:integer

ここで一旦プレコンパイルしておきます。

(不要かもしれません?)

$ rake assets:precompile

 

ここまで済んだら、作成した「test」アプリをGitHubに登録します。

そして、Herokuで新しいアプリと新しいパイプラインを作成し、

GitHubと連携して、作成した「test」アプリを取り込みます。

 

このあたりの方法は、以下の記事を参考にしてください。

 

 

 

Herokuのダッシュボードから新しく作成したアプリの画面を開き、

Resourcesタブを開きます。

Add-one の虫眼鏡の箇所に postgres と入力すると、Heroku Postgresが現れますので、

それを選択してください。

プランは無料で使える Hobby Devを選んでください。


Tip_07_01_002a

 

ここまで完了したら、画面上のメニューボタンを押して、Databases画面へ移動します。


Tip_07_01_002b

 

作成したデータベース一覧の中から、先ほど作成したデータベース名をクリックしてください。


Tip_07_01_002c

 

Overviewタブの Connection Settings 画面を確認してください。


Tip_07_01_002d

 

ここの値を自分のローカルPCで作成した Ruby on Rails の

/config/database.ymlファイルに設定します。

production:

database: Heroku PostgresのDatabaseの値

port: 5432

username: Heroku PostgresのUserの値

password: Heroku PostgresのPasswordの値-l

host: Heroku PostgresのHostの値

 

development:

production と同じ。

 

/config/database.ymlファイルの設定が完了したら、

以下のコマンドでマイグレートします。

$ rake db:migrate

 

ここまで完了したら、Ruby on Railsのアプリの変更内容を

GitHubにコミットし、リモートリポジトリにプッシュします。

こうすると、Herokuにこの変更が反映されます。

 

そして、Herokuのダッシュボード画面から、作成したアプリの画面を表示し、

画面右上の Open app ボタンを押します。

するとブラウザが起動します。

起動したURLの末尾に /statses を追加して表示してやります。


Tip_07_01_002e

 

scaffoldで作成した、こんな画面が表示されます。


Tip_07_01_002f

 

New Statusのリンクをクリックして新しいレコード追加してやれば、

追加したレコードがちゃんと、画面に表示されます。

 

HerokuにWebアプリを公開する方法

 

Ruby on RailsでWebアプリを作ってみました。

せっかくなので、これを公開できるサーバーがないか探してみたところ

Heroku(ヘロク)がフリーで使えて、いい感じだったので、そちらにアップデートしてみました。

手順を整理して、メモしておきます。

 

大まかな手順:

Step1:ローカルにRuby on Rails環境を作成

Step2:GitHubにアプリ登録

Step3:Herokuの環境設定

 

Step1:ローカルにRuby on Rails環境を作成:

MacでRuby on Railsを動かすためには、環境構築するのが、結構ひと苦労ですが、めげずにいきましょう。

 

以下のサイトに、Ruby on Railsの環境構築の手順がきれいにまとまって紹介されています。

まずは、この通り自分のPCの環境を構築していきます。

 

Rubyの現時点での最新バージョンは2.3.1なので、インストールの際、そこだけ変更してください。

参考までに、私が、Ruby on Railsの環境構築した時点での環境は以下の通りです。

確認環境:

Max OS X El Capitan 10.11.2

Xcode 7.3

Command Line Tools for Xcode 7.3

Homebrew 0.9.9

Ruby 2.3.1

 

Step2:GitHubにアプリ登録:

GitHubとは、アプリのソースコード管理サービスです。

HerokuはGitHubとの連携機能を備えています。

この機能使うために、先にGitHubの設定を行っておきましょう。

 

以下のGitHubのサイトにアクセスして、Sigh upをします。

Sigh up時に、プランを聞かれますので、無料で使えるFreeプランを選択してください。

Sigh upが完了したら、Sign in してください。

 

Sign inをしたら、新規にリポジトリを作成します。

画面右上の「+」ボタンを押して、New reposiory を選択します。


Tip_07_01_001a

 

Repository nameに「railssample」と入力します。

Descriptionはこのリポジトリの説明を入力します。空欄でも構いません。

入力が完了したら Create repositoryボタンを押してください。


Tip_07_01_001b

 

次に、新規作成したリポジトリにアプリを登録します。

ここでは、私が作ったサンプルアプリを使います。

以下のURLにアクセスして、Clone or downloadボタンを押してください。

Download ZIP ボタンを押して、ローカルにサンプルアプリを取り込んでください。

 

ここからは、ターミナルで操作していきます。

macでターミナルを起動し、先ほど取り込んだサンプルアプリを解凍した場所に移動します。

そして、以下のコマンドを入力してください。

$ git init

$ git add .

$ git commit -m "first commit"

$ git remote add origin https://github.com/(Githubのユーザー名)/(Githubのリポジトリ名 今回は、「railssample.git」)

 

上記のコマンド後、Githubのリポジトリにアプリが登録されていることを確認します。


Tip_07_01_001c

 

Step3:Herokuの環境設定:

次はHeroku側の環境構築です。

以下のサイトにアクセスして、Sign upをします。

名前とE-mailを入力し、

Pick your primary development language で Ruby を選びます。


Tip_07_01_001d

 

Sign upが完了したら、Sign inします。

画面右上の Newボタンを押して Create new appを選択します。


Tip_07_01_001e

 

App Nameに適当な名前を入力します。

この名前は、Heroku上でユニークである必要があります。

なので、自分のユーザー名+アプリ名とするのがいいでしょう。

あと注意としては、先頭に数字はダメで、大文字は使えません。全体の長さは30文字を超えるとダメです。

入力が完了したら、Create Appボタンを押してください。


Tip_07_01_001f

 

次はパイプラインを作成します。

先ほど作成したNew Appの名前で Deployタブあることを確認し、

New Pipelineボタンを押します。

Pipline Nameに適当な名前を入力し、Create Piplineボタンを押します。

Tip_07_01_001g

 

Deployment method で GitHub を選択します。

Connect to GitHub の Search for a repository to connect toで

GitHubに登録したユーザー名が表示されていることを確認し、Searchボタンを押します。

先ほど作成したリポジトリ railssampleを選択してください。


Tip_07_01_001h

 

ここまで設定すると、Deployment method の GitHub の箇所に Connected と表示され、

Connect to GitHub の Search for a repository to connect toに、

先ほど選択したリポジトリ railssampleが表示されていることを確認してください。

後は、Enable Automatic Deploysボタンを押してください。


Tip_07_01_001i

 

パイプラインの作成が完了しました。

パイプラインの設定画面を表示して、以下のように

PRODUCTION に Herokuで新規作成したアプリ名が表示されていることと、

指定したGitHubのリポジトリが表示されていることを確認し、

Connect to GitHubボタンを押してください。


Tip_07_01_001j

 

再度、Connect to GitHub の Search for a repository to connect toで

GitHubに登録したユーザー名が表示されていることを確認し、Searchボタンを押します。

先ほど作成したリポジトリ railssampleを選択してください。


Tip_07_01_001k

 

ここまで完了したら、画面上のメニューボタンを押して、Dashboard画面へ移動します。


Tip_07_01_001l

 

Dashboard画面から、先ほど作成したパイプラインを選択してください。


Tip_07_01_001m

 

パイプライン画面のPRODUCTIONの箇所に表示されているアプリの名前をクリックします。


Tip_07_01_001n

 

画面右上の Open appボタンを押します。するとブラウザが開きます。


Tip_07_01_001o

 

以下のように The page you were looking for doesn't exist. と表示されますが、

私が作成したサンプルアプリがそのように作っているからです。

起動時のURLの末尾に以下を追加してみてください。

/hello/index


Tip_07_01_001p

 

Hello World !!! と表示されます。


Tip_07_01_001q

 

以上です。

Open appの直後に、The page you were looking for doesn't exist. が表示されるのが気持ちわるい場合は、

publicフォルダに適当なindex.htmlファイルを置いておけば、起動時にそのページが表示されます。