Railsアプリケーションのトップ画面を作成しよう！

今回は、ついに、Railsアプリケーションのトップ画面を作成していきたいと思います。
まだ、モデル（Model）は必要ないので、作り方は、Railsのgenerateコマンドを利用して、コントローラー（Controller）とビュー（View）の生成、ルーティングの設定を行います。

これから以降は、開発環境で作業を行います。

【目次】

1.Railsのコントローラー（Controller）を生成

今回は、アプリケーションのトップ画面のコントローラーを生成したいので、topという名前のコントローラーを作成します。
ちなみに、名前の命名は、任意です。

$ rails generate controller top

generateで生成されたファイル群はこんな感じ。

      create  app/controllers/top_controller.rb
      invoke  slim
      create    app/views/top
      invoke  rspec
      create    spec/controllers/top_controller_spec.rb
      invoke  helper
      create    app/helpers/top_helper.rb
      invoke    rspec
      create      spec/helpers/top_helper_spec.rb
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/top.coffee
      invoke    scss
      create      app/assets/stylesheets/top.scss

ここで？となりました。
Gemfileには、「sass-rails」と指定していたので、てっきりスタイルシートは、sassの拡張子で出力されると思っていたのですが、上記を見ると、「top.scss」とかになってる。。。
さっと調べてみると、Sassには記法が２種類あるらしいです。
SCSSの正式名称は、「Sassy CSS」。今の一般的な、Sassはの記法はSCSSとのこと。
なぜなら、従来のCSSと同じ書き方をするのが特徴で、CSS3の他にも古いIEのFilterやハック、ベンダー特有の構文もCSSの書き方も従来通りなので、初心者にもやさしく読みやすい記法ということでした。
そして、その採用したい記法と、同じ拡張子をファイルにつけるのが慣例になっているそうです。

ここは、なるほど・・・と思って、ひとまずそのままにしたいと思います。
次は、ルーティングの設定を行います。
config/routes.rbを開いて修正します。

$ vi config/routes.rb

デフォルトで、記述例がコメント付きで記述されていますが、削除してもよし、残しておいて参考にしても良しです。
ここでは、http://pgnyumon.comにアクセスされたら、先ほど作成したtopコントローラーを表示したいので、下記を追記します。

root top#index

Railsのルーティングの設定を確認するコマンドはこちらです。

$ rake routes

今は、top#indexの設定しかしていないので、下記の出力になります。

Prefix Verb URI Pattern Controller#Action
  root GET  /           top#index

続いて、topコントローラーを修正します。

vi app/controllers/top_controller.rb

ひとまず、indexのメソッドの枠だけ用意してみます。

class TopController < ApplicationController
  def index
  end
end

続いて、ビュー（View）を作成します。
ビューは、generateコマンドは用意されていないので、手動で作成します。

vi app/views/top/index.slim

今回は、「Welcom program Beginners!!」と文言を追加してみました。
では、サーバを起動して、作成した画面が表示されるか確認してみましょう。

$ bundle exec rails s

ブラウザから、http://localhost:3000に、アクセスすると、「Welcom program Beginners!!」が表示されました。
真っ白な画面に、そっけない表示ですが、ひとまず完了です＾＾

あとは、前回に、Railsのデフォルトアプリケーションで本番にデプロイしていた為、http://pgnyumon.comにアクセスすると、下記のような、エラー画面になっていました。

そのままになっているので、今までの実装をGitHubにpushして、本番にリリースして、解消されるまでを試したいと思います。
でも、本番にリリースして、ブラウザからアクセスしてもエラー画面は同じ・・・
Pumaの再起動をして初めて、「Welcom program Beginners!!」の文言が表示されました。
はて・・・？
そこで、あぁ、、、そうか！Capistranoで、Pumaを再起動するタスクを含めていいなかったことに気がつきました。。

なので、今回はこれまで！！
次回に、Capistrano3にタスクを追加する実装をしたいと思います。

前回の記事は、「Nginx + Pumaで、Railsアプリケーションを表示しよう！」