Header
2018-03-10
2019-08-23

Ruby on Rails5で簡易ブログを作成する1 | VIew Controller ルートを作成する

Createblog1

Railsでシンタックスハイライトに対応したブログを作成します。

作成する環境

Railsバージョン5.2.3

Rubyバージョン2.5.0

DB:SQL LITE

なおRubyやRailsのインスール方法は割愛しますので、ご自身で対応してください。

本記事はあくまでRailsでアプリケーションを作成する事を記載します

今回対応する内容

blogのcontrollerとルート、Indexページの作成となります

1:ホームディレクトリで下記コマンドを実行

rails _5.2.3_ new article

      create
      create  README.md
      create  Rakefile
      create  .ruby-version
      create  config.ru
      create  .gitignore
      create  Gemfile

上記コマンドでPC上でblogフォルダを作成し、その中にrailsのアプリケーションがインストールされています。

2:articleディレクトリへ移動

cd article

3:rails を起動してみる

articleディレクトリでサーバーを起動します

 rails s

4:ブラウザのURLへlocalhost:3000へアクセス

5:下記画面が表示されると正しく動作しているので次のページへ

topページ

※稀に”Could not find a JavaScript runtime”とJavaScriptランタイムエラーというのが発生します。

その場合blog内のgemfileへgem 'therubyracer'を記載しコマンドラインでbundle installし再度サーバーを立ち上げる必要があります。詳細はRuby on RailsでCould not find a JavaScript runtimeが発生した時の対応方法を御覧ください

6:下記コマンドを入力し、blogのcontrollerとviewを作成

rails g controller blogs

Running via Spring preloader in process 5378
      create  app/controllers/blogs_controller.rb
      invoke  erb
      create    app/views/blogs
      invoke  test_unit
      create    test/controllers/blogs_controller_test.rb
      invoke  helper
      create    app/helpers/blogs_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/blogs.coffee
      invoke    scss
      create      app/assets/stylesheets/blogs.scss

blogのcontrollerとviewフォルダやcssが生成されます。

7:blogs_controllerへindexのアクションを追加します。 

後々解説するので、indexのアクション名は変更しないようお願いします

編集ファイルpath: article/controllers/blogs_controller.rb

class BlogsController < ApplicationController

  def index

  end

end

8:routeを変更する

routeファイルに root ‘blogs#index’を追加 

編集ファイルpath:article/config/routes.rb

Rails.application.routes.draw do

  root 'blogs#index'

end

routes.rbファイルの2行目のroot ‘blog#index’はlocalhost:3000でアクセスした際にblog_controllerのindexアクションを呼び出すという 設定になります。

9:viewを作成する

viewsフォルダ内にblogというフォルダがあるので、app/views/blog配下にindex.html.erbというファイルを作成し index.html.erb内へhelloと記載してください。

※ページ名はindex.html.erbから変更しないようお願いします。 index.html

サーバーを再起動してlocalhost:3000へアクセスすると hello が表示されます

index_hello.png 

10: Ruby on RailsのControllerとviewの関係

次はblogフォルダ内のindex.htmlをtest.html.erbに変更して localhost:3000へアクセスしてみましょう

UnKnownFormatでエラーになります

topページ

railsはcontrollerのアクションとviewのページ名称が合致していなければ UnKnownFormatエラーになります。

つまり今回BlogsControllerでindexアクションを設定したので、 indexアクションで呼び出されるページはindex.html.erbである必要があります。

今回test.html.erbとしたのでエラーになりました。

blog_controllerのindexアクションで呼び出すページを renderでページ名を明示してあげれば、エラーが解決されます。

編集ファイルpath: article/controllers/blogs_controller.rb

class BlogsController < ApplicationController

  def index
    render 'test'
  end

end

上記を確認した後は、article/view/blog/test.html.erbをarticle/view/blog/index.html.erbへ変更してください

11:routesファイルへ resources :blogsを追記します。

routesファイルへresources :controller名を記載すると

対象ControllerのIndex、New、Create、Edit、Update、Delete アクションを指定出来るルートを自動作成します。

操作する対象ファイルのpath:article/config/routes.rb

Rails.application.routes.draw do

  root 'blogs#index'

  resources :blogs

end

コマンドで生成ルートを確認

rake routes

下記がコマンドラインで表示される

   blogs GET    /blogs(.:format)          blogs#index
          POST   /blogs(.:format)          blogs#create
 new_blog GET    /blogs/new(.:format)      blogs#new
edit_blog GET    /blogs/:id/edit(.:format) blogs#edit
     blog GET    /blogs/:id(.:format)      blogs#show
          PATCH  /blogs/:id(.:format)      blogs#update
          PUT    /blogs/:id(.:format)      blogs#update
          DELETE /blogs/:id(.:format)      blogs#destroy

12:newアクションとページを作成します

ここで問題です blogs_controllerへnewアクションを追加する時にはどう書けばいいでしょうか?

newページを追加するにはどのviewへ追加し拡張子は何にすればよいでしょうか?

回答は次の記事Ruby on Rails4で簡易ブログを作成する2| editとcreateのアクションとページを作成するへ記載していますが、一旦考えた上で作成してみて下さい

その他関連記事

チャットボット Hubot(ヒューボット)とSlackを連携してみる

Ruby on Railsとtwitterの投稿機能を連携する

ラズパイ(Raspberry Pi) 3 Model b+でカメラを操作する

Ruby on RailsでRedisを利用してランキング機能を実装する

Ruby on Railsでredcarpetを利用し、シンタックスハイライトに対応したブログ機能を実装する

Ruby on Railsで外部APIを利用して、簡単なアプリケーションを作成する

あなたにお勧めの記事
前の記事
次の記事