2-1

スタート画面(仮)を作成する

2章ではスタート画面を作成します。

本パートの目標物

本パートでは下記の画像のようにデザインは特にしていない仮のスタート画面を表示させるところまで実装します。

目標物を作成するまでの流れ

スタート画面のルーティングを設定する
Gamesコントローラーを作成する
コントローラーにアクションを追加する
スタート画面のビューを作成する
rootルーティングを設定する

では実際に進めていきましょう。

1. スタート画面のルーティングを設定する

まずスタート画面のルーティングの設定を行います。

ルーティングは受け取ったURLを認識し、適切なコントローラー内のアクションを動かすように設定します。

今回はgamesコントローラーのnewアクションのルーティングをスタート画面のルーティングとして設定します。

config/routes.rbに以下のコードを追加してください。


Copied!
config
└── routes.rb

config/routes.rb
1234
    
Copied!
Rails.application.routes.draw do
  # ここにgamesコントローラーのnewアクションのルーティングを追加する
  get 'games/new'
end

追加したルーティングを確認する

rails routesというコマンドを実行することで設定しているルーティングを全て表示できます。実際に下記のコマンドを入力してください。


Copied!
rails routes

ルーティング情報が複数出てきますが、下記ルーティングが今回設定したルーティングの情報になります。


Copied!
games_new GET  /games/new(.:format)  games#new

2. Gamesコントローラーを作成する

次にスタート画面で使うコントローラーを作成します。
コントローラーの名称は先程設定したルーティングでgamesと指定したので、gamesコントローラーを作成します。

コントローラーはrails g controller コントローラー名というコマンドで作成出来ます。以下のコマンドを実行してください。


Copied!
rails g controller games

上記のコマンドを実行するとターミナルに下記のような実行結果が表示されます。


Copied!
rails g controller games
Running via Spring preloader in process 4454
      create  app/controllers/games_controller.rb
      invoke  erb
      create    app/views/games
      invoke  test_unit
      create    test/controllers/games_controller_test.rb
      invoke  helper
      create    app/helpers/games_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    scss
      create      app/assets/stylesheets/games.scss

3. コントローラーにアクションを追加する

次に作成したコントローラーにアクションを追加します。

まず先ほど追加したルーティングを確認してみましょう。
先ほどのrails routeの結果を参照してください。


Copied!
games_new GET  /games/new(.:format)  games#new

今回の場合はgames#new、つまりgamesコントローラーのnewアクションを処理するように指定しています。
なのでgamesコントローラーにnewアクションを作成していきましょう。

app/controllers/games_controller.rbに以下のコードを追加してください。


Copied!
app
└── controllers
    └── games_controller.rb

app/controllers/games_controller.rb
12345678
        
Copied!
class GamesController < ApplicationController

  # ==========ここから追加する==========
  def new
  end
  # ==========ここまで追加する==========

end

今回は仮のスタート画面を表示させるだけで、データベースからデータを取ってくる処理はありませんのでnewアクションの中には何も書きません。

4. スタート画面のビューを作成する

最後にビューを追加します。
アプリケーションのapp/viewsディレクトリに、コントローラーごとにディレクトリをつくり、ビューのテンプレートファイルを置きます。

今回はgamesコントローラーなのでgamesディレクトリにアクション名.html.erbという名前でファイルを作成します。
※ rails g controller gamesコマンドでコントローラーを作成した際、app/views/gamesディレクトリは一緒に作られてます。

app/views/games/ディレクトリ内にnew.html.erbを追加してください。追加したらnew.html.erbに以下のコードを追加してください。


Copied!
app
└── views
    └── games
        └── new.html.erb

app/views/games/new.html.erb
1234567
       
Copied!
<div id="main">
  <div>
    <div>
      あなたが思った漫画を当ててみせましょう！<br/> 
    </div>
  </div>
</div>

では、実際に仮のスタート画面を表示されるか確認します。
http://localhost:3000/games/new にアクセスしてみましょう。
下記の画像のように表示されていればうまく動作しています。
(サーバーを立ち上げていない場合はターミナル上でbundle exec rails sを実行してサーバーを立ち上げてください。)

画面の左上にxxmsというツールチップが表示される場合(下記画面だと13.6msと表示されている部分)

このチップはrack-mini-profilerと呼ばれる、パフォーマンス計測するためのものです。
URLの末尾に?pp=disabledを付与することで非表示にできます。

5. rootルーティングを設定する

仮のスタート画面を「http://localhost:3000 」にアクセスしたら表示できるようにルーティングの設定を行います。

rootメソッドを使用することで、Railsがルート/とすべき場所を指定できます。

参考）rootを使用する

config/routes.rbを以下のように編集してください。


Copied!
config
└── routes.rb

config/routes.rb
1234
 -+ 
Copied!
Rails.application.routes.draw do
   get 'games/new'
   root 'games#new'
end

編集できたら http://localhost:3000 にアクセスして下記の画像のように表示されていればうまく動作しています。

以上で今回のパートは終了です。

お疲れ様でした。

間違いや改善の指摘

質問ポリシー①

教材の内容に関する質問を投稿しましょう

Ruby on RailsでAkinator風の人物特定エンジンの開発を通して、実践的な絞り込みを学ぼう！

0章 : はじめに

1章 : 新規Railsアプリケーションを作成する

2章 : スタート画面を作成する

3章 : ゲーム開始〜質問回答画面を作成する

4章 : 絞り込みアルゴリズムを作成する。その1

5章 : 絞り込みアルゴリズムを作成する。その2

6章 : 絞り込みアルゴリズムを作成する。その3

7章 : 質問データを追加してゲームを完成させる

8章 : あとがき。ゲームの成長性と課題について