LoginSignup
3
3

More than 5 years have passed since last update.

【第8回もくもく.rb】Ruby on Railsアプリケーション作成部分

Last updated at Posted at 2015-08-06

こちらのドキュメントではdocer+vagrantで用意した環境上で簡単なRuby on Railsのアプリケーション作成を行ってもらいます

 今回やること

①【アプリケーションの作成】
②【アプリケーションの起動】
③【コントローラーの作成】
④【ルーティングの設定】
⑤【ビューの作成】

今回使う予定のLinuxコマンド一覧

cd (ファイルの内容を表示する)
ls (ファイル・ディレクトリ情報を表示する)
mkdir (ディレクトリを作成する)
pwd (カレント・ディレクトリの表示)
rm (ファイルやディレクトリを削除する)
vi (テキストファイルを編集する)
cat(ファイルの内容を表示する)

※既にアプリケーションを作成していたら「①アプリケーションの作成」の部分は飛ばしてもらっても構わないです。

①【アプリケーションの作成】

・「rails new」コマンドで"myapp"フォルダを作成し、Railsアプリケーション作成に必要なフォルダやファイルを一式を自動的にコピーします。
※root@f33bd045d887:/sample# の「#」以降が入力するコマンドになります。

command(mac・Windows)
root@f33bd045d887:/sample# rails new myapp

・Railsアプリケーションが作成できたら、myappフォルダに移動して(コマンド「cd myapp」)BundlerでGemパッケージを追加してください。コマンドは「bundle install」です。

command(mac・Windows)
root@f33bd045d887:/sample# cd myapp

↓フォルダ移動

command(mac・Windows)
root@f33bd045d887:/sample/myapp#

・bundle install を行う

command(mac・Windows)
root@f33bd045d887:/sample/myapp# bundle install

Bundlerについて

②【アプリケーションの起動】

・「rails new」で作成したmyappフォルダに移動してから「rails s -b 0.0.0.0」コマンドを実行すると、WEBrickというRubyに付属しているウェブサーバーがパソコン内で起動します。「rails server -b 0.0.0.0」と入力しても同じです。
サーバー起動したら

http://172.17.8.101/

のリンクを開いてみてください。下記の画像が表示されたら成功です。
※今回に関しては「rails server -b 0.0.0.0」と入力します。

(WEBrickのサーバー起動の画像)
alt

command(mac・Windows)
rails server -b 0.0.0.0

③【コントローラーの作成】

・ターミナル画面に戻り、「rails g(generate)」コマンドを実行しましょう。「rails g(generate) controller コントローラー名 アクション名」でコントローラーとアクションを作成することができます。
今回のmyappではTopControllerとindexアクションを作成します。
※「rails g(generate)」は「rails generate」とコマンド入力しても大丈夫です。

command(mac・Windows)
root@f33bd045d887:/sample/myapp# rails g controller top index

※間違えてコントローラーを作成してしまった場合

「rails g controller top inedx」と入力した場合

command(mac・Windows)
root@f33bd045d887:/sample/myapp# rails destroy controller top inedx

②コントローラーを作成すると、下記のようにファイルが追加されます。

app/controllers/top_controller.rb
class TopController < ApplicationController
  def index
  end
end

これは、TopControllerというクラスを記述をしたものです。TopControllerクラスはApplicationControllerクラスを継承しています。
このように、Railsではコントローラーを1つのRubyのクラスで表します。
TopControllerクラスの中には、indexメソッドができています。このindexメソッドがトップページを表示するときに呼ばれる「アクション」になります。

④【ルーティングの設定】

コントローラーとアクションを作っただけでは、Railsアプリケーションのページにはなりません。
URLのパスとコントローラーを結びつけるルーティングを設定する必要があります。
configフォルダの下のroutes.rbを開き、「Rails.application.routes.draw do」と「end」の間の記述中で、「get 'top/index'」となっている部分を、次のように記述する必要があります。

app/config/routes.rb
Rails.application.routes.draw do
  root 'top#index'
end

使用するエディタについて

・今回はviエディタでアプリケーションの一部ファイルを編集してもらいます。
viエディタに関して
viエディタを使用するには特定のコマンドを入力する必要があります。

・以下の手順に従ってファイル編集を行います

command(mac・Windows)
root@f33bd045d887:/sample/myapp# vi config/routes.rb

・viコマンドで config/routes.rbファイルを開くと下記のように表示されます。
スクリーンショット 2015-08-08 0.44.23.png

・この画面が表示されたら「i」を入力してください。そうすると編集モードに切り替わります。ターミナルに下記の様な表示がされたら編集モードです。

スクリーンショット 2015-08-08 0.44.35.png

・主に使うカーソルキー・コマンドは「h(←)」「j(↓)」「k(↑)」「l(→)」「esc」「:wq(保存して終了)」ですが、viエディタの使い方で詳細も確認してみてください。

app/config/routes.rb
Rails.application.routes.draw do
  get 'top/index'
end

app/config/routes.rb
Rails.application.routes.draw do
  root 'top#index'
end

に変更できたら「esc」を押して「:wq(保存して終了)」のコマンドを入力したらenterを押して保存を完了してください。

・ファイル変更が完了しているのかの確認は「cat(ファイルの内容を表示する)」コマンドでできます。

command(mac・Windows)
root@f33bd045d887:/sample/myapp# cat config/routes.rb

ルーティングを設定することで、トップページに対応するコントローラーとアクションがTopControllerのindexアクションになります。
「rails server -b 0.0.0.0」コマンドでサーバーを起動してみてください。そしてブラウザで

http://172.17.8.101/
 
を開いてください。
TopControllerのindexアクションのページが表示されるはずです。
スクリーンショット 2015-08-06 21.03.25.png

⑤【ビューの作成】

indexアクションに対応するビューのテンプレートを編集してみましょう。

viエディタでファイル.index.html.erbを開いて編集します。

拡張子が.erbのファイルは、Railsのビューのためのテンプレートファイルです。
ファイル名は、「アクション名(ここではindex).html.erb」となります。

このファイルは好きなように編集してみましょう。

・docker上で用意したviエディタでは日本語入力に対応していないので、ターミナルに下記の記述を挿入する必要があります。
先ほどのようにviの編集モードにしてたいので、下記のコマンドを挿入してください。

command(mac・Windows)
root@f33bd045d887:/sample/myapp# vi ~/.vimrc

(「i」を押し、編集モードにします。そしたら下の2行を.vimrc内に挿入して「esc」を押して「:wq(保存して終了)」で完了です)

set encoding=utf-8
set fileencodings=utf-8

・日本語入力対応させることができたら、次はindex.html.erbの編集を行います。
先ほどのように下記コマンドを入力して、テキスト内に入ってください。「i」を押し、編集モードにします。そしたら下のデフォルトの英語を好きな文字にして、「esc」を押して「:wq(保存して終了)」enterで完了です。

command(mac・Windows)
root@f33bd045d887:/sample/myapp# vi app/views/top/index.html.erb

(例)

app/views/top/index.html.erb
<h1>現在Ruby on Railsでアプリケーション作成中</h1>
<p>Hello World!!</p>

(例)
スクリーンショット 2015-08-06 21.24.45.png

以上でサンプルアプリケーションの作成は終わりです。

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3