今回はRuby on RailsのでMVCの部分をやろうと思います。
最終的にはECサイトを作成したいと思います。
環境
| OS/ミドルウェア | バージョン |
|---|---|
| CentOS | 7.2.1511 |
| ruby | 2.4.2p198 |
| Rails | 5.1.4 |
コントローラの作成
それではまずコントローラを作成します。「(Railsアプリケーションのルート)」ディレクトリに移動し、以下のようにコマンドを実行して下さい。
[コントローラ]
|
1 |
rails generate controller コントローラ名 |
私の場合は「shoppings」コントローラを作成します。
※名前は複数形にします。
コチラを参考→コントローラの作成と命名規則(命名規約)
[実行結果]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
Running via Spring preloader in process 22602 create app/controllers/shoppings_controller.rb invoke erb create app/views/shoppings invoke test_unit create test/controllers/shoppings_controller_test.rb invoke helper create app/helpers/shoppings_helper.rb invoke test_unit invoke assets invoke coffee create app/assets/javascripts/shoppings.coffee invoke scss create app/assets/stylesheets/shoppings.scss |
上記のようにいくつかのファイルが自動的に作成されます。
この中の「app/controllers/shoppings_controller.rb」がコントローラ本体に関する記述がされたファイルです。
[ファイルの確認]
|
1 |
$ ls -al |
[実行結果]
|
1 2 3 4 5 6 |
total 20 drwxrwxr-x 3 ユーザ名 ユーザ名 4096 Dec 13 17:28 . drwxrwxr-x 10 ユーザ名 ユーザ名 4096 Dec 12 15:09 .. -rw-rw-r-- 1 ユーザ名 ユーザ名 97 Dec 12 15:09 application_controller.rb drwxrwxr-x 2 ユーザ名 ユーザ名 4096 Dec 12 15:09 concerns -rw-rw-r-- 1 ユーザ名 ユーザ名 228 Dec 13 18:44 shoppings_controller.rb |
それでは作成された「shoppings_controller.rb」ファイルの中身を見てみます。
[ファイルの中身]
|
1 2 |
class ShoppingsController < ApplicationController end |
このようにコントローラを作成すると「ApplicationController」クラスを継承し、名前が「コントローラ名＋Controller」のクラスが定義されます(クラス名の先頭は大文字となります)。
アクションの作成
コントローラは作成されましたのでアクションを作成していきます。Railsアプリケーションではコントローラはクラスとして定義されましたが、アクションはコントローラクラスの中のメソッドとして定義されます。例えば「index」というアクションを作成するということは「index」というメソッドを定義することです。
それでは「index」アクションと「commodity」アクションを作成してみます。
[ファイルの中身]
|
1 2 3 4 5 6 7 8 9 10 11 |
class ShoppingsController < ApplicationController def index render plain: 'ホーム画面処理記載' end def commodity render plain: '商品を購入する処理' end end |
アクションを表すメソッドはpublicのメソッドとして定義して下さい(Rubyの場合、特に指定していない場合はpublicとなります)。今回作成したアクションはテスト用のため、アクションが呼び出されるとビューなどを使わずに直接利用者へテキストを返すように作成してあります。
renderで:plainオプションを使用すると、平文テキストをマークアップせずにブラウザに送信することができます。
※ メソッドの中に記述してある「render plain: ‘ホーム画面処理記載’」の部分が利用者へテキストを返す部分となります。
ルーティングの設定
最後にルーティングの設定を行います。これは利用者側からどのように呼び出されたときにどのアクションを実行するのかを定義するものです。設定はアプリケーションを作成すると自動的に作成される「(Railsアプリケーションのルート)/config/routes.rb」ファイルに対して行ないます。
[ファイルの確認]
|
1 |
$ ls -al |
[実行結果]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
total 56 drwxrwxr-x 5 uchida uchida 4096 Dec 12 15:09 . drwxrwxr-x 13 uchida uchida 4096 Dec 12 15:48 .. -rw-rw-r-- 1 uchida uchida 597 Dec 12 15:09 application.rb -rw-rw-r-- 1 uchida uchida 128 Dec 12 15:09 boot.rb -rw-rw-r-- 1 uchida uchida 157 Dec 12 15:09 cable.yml -rw-rw-r-- 1 uchida uchida 594 Dec 12 15:09 database.yml -rw-rw-r-- 1 uchida uchida 128 Dec 12 15:09 environment.rb drwxrwxr-x 2 uchida uchida 4096 Dec 12 15:09 environments drwxrwxr-x 2 uchida uchida 4096 Dec 12 15:28 initializers drwxrwxr-x 2 uchida uchida 4096 Dec 12 15:09 locales -rw-rw-r-- 1 uchida uchida 2306 Dec 12 15:09 puma.rb -rw-rw-r-- 1 uchida uchida 211 Dec 13 18:33 routes.rb -rw-rw-r-- 1 uchida uchida 1277 Dec 12 15:28 secrets.yml -rw-rw-r-- 1 uchida uchida 111 Dec 12 15:09 spring.rb |
[ファイルの中身]
|
1 2 3 |
Rails.application.routes.draw do # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html end |
利用者がブラウザから「http://☓☓☓.☓☓.☓☓☓.☓☓:3000/」を開いた時に「shoppings」コントローラの「index」アクションが呼び出され、「http://☓☓☓.☓☓.☓☓☓.☓☓:3000/commodity」を開いた時に「commodity」アクションが呼び出されるようにルーティングを定義します。
[ファイルの中身]
|
1 2 3 4 5 |
Rails.application.routes.draw do # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html get '/' => 'shoppings#index' get 'commodity' => 'shoppings#commodity' end |
動作確認
それではRailsアプリケーションを起動してここまでの動作を確認してみます。ターミナルを起動し、起動させたいアプリケーションのルートディレクトリに移動して下さい。そして下記のコマンドを実行して下さい。
[Railsサーバ起動]
|
1 |
$ rails server -b 0.0.0.0 |
ブラウザから次のURLへアクセスして下さい。
[index]
|
1 |
http://☓☓☓.☓☓.☓☓☓.☓☓:3000/ |
今度は次のURLへアクセスして下さい。
[commodity]
|
1 |
http://☓☓☓.☓☓.☓☓☓.☓☓:3000/commodity |
このようにRailsアプリケーションを起動した後で、利用者からブラウザ経由でリクエストを送信し、それによってアクションを実行し結果を利用者へ返すことが出来ました。
テンプレートの作成
コントローラを作成した時にアクションを同時に作成しなかった場合は手動でテンプレートを作成する必要があります。
テンプレートを作成する場所は決まっています。今回は「shoppings」コントローラで作成したアクションに対するテンプレートですので、「app/views/shoppings/」ディレクトリに作成します。
[ファイルの作成]
|
1 |
$ touch index.html.erb |
テンプレートファイル名は「(アクション名).html.erb」とします。今回は「index」アクションと「commodity」アクションのうち、「index」アクションに対するテンプレートを作成します。ファイル名は「index.html.erb」となります。
[ファイルの中身]
|
1 2 3 4 |
<h1>Hello</h1> <p> こんにちは。お元気ですか。 </p> |
テンプレートファイルに記述された内容は利用者に返されブラウザ上で表示されます。
アクションからのテンプレートの呼び出し
通常利用者へ結果を返すのは全ての処理が終わってからとなりますので、indexメソッドの最後に次のように記述してビューを呼び出します。(今回は事前の処理が無いので呼び出しだけとなっています)。
[ファイルの中身]
|
1 2 3 4 5 6 7 |
class ShoppingsController < ApplicationController def index render 'shoppings/index' end end |
このように記述した場合はテンプレートとして「app/views/shoppings/index.html.erb」ファイルが呼び出されます。ただし、呼び出すビューが「app/views/コントローラ名/アクション名.html.erb」で作成されたファイルの場合は render メソッドを省略できます。その為、単に次のように記述することができます。
[ファイルの中身]
|
1 2 3 4 5 6 |
class ShoppingsController < ApplicationController def index end end |
この場合、アクションが呼び出されるとメソッド内の処理が順に行われた後で、最後にアクションに対応するテンプレートが呼び出されます。
では「app/controllers/shoppings_controller.rb」ファイルの中身を上記のように書き換えました。
動作確認
それではRailsアプリケーションを起動してここまでの動作を確認してみます。ターミナルを起動し、起動させたいアプリケーションのルートディレクトリに移動して下さい。そして下記のコマンドを実行して下さい。
[Railsサーバ起動]
|
1 |
$ rails server -b 0.0.0.0 |
ブラウザから次のURLへアクセスして下さい。
[index]
|
1 |
http://☓☓☓.☓☓.☓☓☓.☓☓:3000/ |
このようにテンプレートを利用して作成したHTML文書を利用者へ返しブラウザ上に表示させることができました。
補足：共通レイアウトの適用
実行結果を、ブラウザの［ソースの表示］から確認してみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <title>OnlineShop</title> <meta name="csrf-param" content="authenticity_token" /> <meta name="csrf-token" content="MmK5z7UEJxJWcdnJDS3UpRcezHZxWkul75g/HClgHjQtHK4dyYo7ZYWNfboA3wLGXEJykglT1A/BicImp66KbA==" /> <link rel="stylesheet" media="all" href="/assets/shoppings.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/application.self-f0d704deea029cf000697e2c0181ec173a1b474645466ed843eb5ee7bb215794.css?body=1" data-turbolinks-track="reload" /> <script src="/assets/rails-ujs.self-817d9a8cb641f7125060cb18fefada3f35339170767c4e003105f92d4c204e39.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/turbolinks.self-1d1fddf91adc38ac2045c51f0a3e05ca97d07d24d15a4dcbf705009106489e69.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/action_cable.self-69fddfcddf4fdef9828648f9330d6ce108b93b82b0b8d3affffc59a114853451.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/cable.self-8484513823f404ed0c0f039f75243bfdede7af7919dda65f2e66391252443ce9.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/shoppings.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/application.self-eba3cb53a585a0960ade5a8cb94253892706bb20e3f12097a13463b1f12a4528.js?body=1" data-turbolinks-track="reload"></script> </head> <body> <h1>Hello</h1> <p> こんにちは。お元気ですか。 </p> </body> </html> |
テンプレートファイル（index.html.erb）で定義したものよりも随分多くのコンテンツが出力されていることが確認できます
これら自動で付与されているコンテンツは、実は/app/views/layouts/application.html.erbで定義されているものです。
application.html.erb
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <title>OnlineShop</title> <%= csrf_meta_tags %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> </head> <body> <%= yield %> </body> </html> |
Railsではデフォルトで、application.html.erbの「< % = yield % >」に個別のテンプレートを埋め込んだ上で、最終的な出力を生成します。application.html.erbのことをレイアウトテンプレート、あるいは単にレイアウトと呼びます。
Ruby on Rails5でコントローラーからテンプレートの表示
Ruby on Rails5でモデルの作成とデータベースの利用
Ruby on Rails5でBootstrap4デザインにする
Ruby on Rails5で検索フォームと一体型になった検索ボタン作成方法
Ruby on Rails5でFontAwesomeを導入する方法(アイコンが使用可能)
Ruby on Rails5でBootstrap4のナビゲーションバーを使用する方法
Ruby on Rails5でBootstrap4のナビゲーションバーに画像(ロゴ)を設置
Ruby on Rails5でBootstrap4を使用しながらCSSを使用する
Ruby on Rails5でBootstrap4のドロップメニューをホバー表示する方法
Ruby on Rails5でBootstrap4のドロップメニューログインアイコンを作成
Ruby on Rails5でBootstrap4のドロップメニューでカートアイコンを作成
Ruby on Rails5でBootstrap4のドロップメニューで注文履歴を作成
