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

STEP17:Ruby on Railsアプリケーションのトップ画面を作成しよう!#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には記法が2種類あるらしいです。
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にアクセスすると、下記のような、エラー画面になっていました。

スクリーンショット 2015-10-04 22.10.56


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

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

 

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

Ruby on Railsおすすめ書籍

Ruby on Railsの勉強で参考になった書籍です!

Ruby on Railsで質問したい!

Teratail(テラテイル)

WEBエンジニア専用のQ&Aサイトで、RubyやRailsも質問することができます。活発に質問と回答がされていますので、会員登録をして利用してみると良いと思います(^o^)。

エンジニアのためのQ&Aサイト【teratail】

Ruby on Railsが学べるオンラインスクール

好きな場所で好きな時間に受講できるオンラインスクール!最近は、Ruby on Railsも学ぶことができます!

TechAcademy(テックアカデミー)

オンラインでの週2回マンツーマンでのメンタリング、毎日15〜23時のチャット・レビューサポートで短期間で未経験からオリジナルサービスを開発できるようになる学習プログラム。オリジナルサービスをHerokuを使って公開するところまでを行います。

オンラインブートキャンプ Webアプリケーションコース