Step1.モデルを作成しよう
今回作成するミニブログではデータベースに三つのテーブルを作成します。
・システム設定のデータ
・投稿記事のデータ
・ジャンルのデータ
これら三つのテーブルをうまく使っていくのでそれぞれのモデルを作成します。
Step1-A.システム設定データのモデルを作成しよう
ブログの設定情報を管理するテーブル用のモデルから作成します。ここでは以下のような項目を管理します。
・ブログのタイトル
・サブタイトル
・スタイル名(使用するスタイルシートの名前→これを変更すればデザインを変えられる)
ターミナル上で、以下のコマンドを打ちます。Railsのアプリも作っておきましょう。//以降はターミナル上に打ち込まないでください。
$ cd desktop //desktop上でminiblogを作っていきましょう
desktop ~ $ rails new miniblog
desktop ~ $ cd miniblog
miniblog ~ $ rails generate model blogconfig title:text subtitle:text stylename:text //設定データのモデルを作成
モデル名は「Blogconfig」にしました。項目は「title」「subtitle」「stylename」でいずれもtextにしています。
Step1-B.ジャンルデータのモデルを作成しよう
続いてジャンルのデータを管理するテーブルのモデルを作成します。モデル名は「Bloggenre」とします。
・ジャンル名
・説明
ターミナル上で、以下のコマンドを打ちます。
$ rails generate model bloggenre name:text memo:text
Step1-C.投稿データのモデルを作成しよう
最後にブログの投稿記事を管理するテーブルのモデルを用意しましょう。
・タイトル
・リード(内容を簡単にまとめた文章)
・コンテンツ
・ジャンル(Bloggenre)のID
ターミナル上で、以下のコマンドを打ちます。ジャンルのID(bloggenre_id)のところはアソシエーションを使っています。モデル名は「Blogpost」とします。
$ rails generate model blogpost title:text read:text content:text bloggenre_id:integer
bloggenre_idが、関連付けられているbloggenreのID番号を保管するための項目です。IDは通常、番号(数字)なのでintegerにしています。
Step1-D.マイグレーションの実行
ターミナル上で、以下のコマンドを打ちます。
$ rails db:migrate
モデルが一通りできたらマイグレーションを行いましょう。これで作成した三つのモデルのテーブルがデータベース側に準備されます。これでモデルの利用は可能です！
Step1-E.シードの追記
もう一つモデル関係でやるべきことがあります。それはblogconfigのデータ作成です。blogconfigはブログの設定情報を記録しておくものです。シードとしてデータを追加しておき、コントローラーにはデータの追加作成は用意しないことにします。
テキストエディタでAtomを利用している方は、まずAtomを開きましょう。ターミナル上で「$ atom .」と入力すると該当フォルダをAtomで開くことも可能です。
以下のように文を追加してみてください。
Blogconfig.create(id:1, title:'my blog', subtitle:'サンプルで作ったブログです。', stylename:'gray')
ファイルを保存したらターミナルを開いて以下のコマンドを打ち込んでください。これで必要なデータがテーブル上に追加されます。
$ rails db:seed
ターミナル上では特に変化がないように思えるかもしれませんがそれでOKです。
Step1-F.モデルクラスを記述していこう！
モデル関係のファイルは一通り準備完了です。あとはコードを書いていきましょう。以下のようにファイルを編集してみてください。
class Blogconfig < ApplicationRecord
validates :title, :stylename, presence: {message:'は、必須項目です。'}
end
class Bloggenre < ApplicationRecord
has_many :blogpost
validates :name, presence: {message:'は、必須項目です。'}
end
class Blogpost < ApplicationRecord
belongs_to :bloggenre
validates :title, :content, presence: {message:'は、必須項目です。'}
end
バリデーションを用意していますが必ずしも必要ではありません。アソシエーションがとても重要です。
一応簡単に説明しておきます。「従データ側から関連付けられている主データを取り出す」場合は「belongs_to」というアソシエーションを使います。これは従データのモデルクラス内(今回なら、blogpost.rbのBlogpost内に)に用意します。
今回なら、「Bloggenre」が主データなのでBloggenreのモデルクラス内に「has_many」というアソシエーションを書いています。
Step2.コントローラーの作成
続いてコントローラーの作成をしていきましょう。
今回は３つのモデルに対応したコントローラーを作っていく必要があります。
Step2-A.blogconfigsコントローラーの作成
まずは設定データの管理を行うblogconfigsコントローラーからです。ここではindexとeditアクションを作成しておきます。新規作成と削除は不要です。ターミナル上で以下のコマンドを打ち込んでください。モデル名は「blogconfig」と単数形でしたがコントローラーは「blogconfigs」と複数形ぽくなることに注意してください。
$ rails generate controller blogconfigs index edit
Step2-B.bloggenresコントローラーの作成
続いて、bloggenresコントローラーです。index,add,editアクションを用意しておきましょう。showやdeleteなどはここでは作成しません。ターミナル上で以下のコマンドを打ち込んでください。
$ rails generate controller bloggenres index add edit
Step2-C.blogpostsコントローラーの作成
最後にblogpostsコントローラーの作成です。これは一通りのアクションが必要になります。ターミナル上で以下のコマンドを打ち込んでください。
$ rails generate controller blogposts index add edit delete
次に、先ほど作成したコントローラーのクラスをそれぞれ作成していきましょう。これらを全て書いてからまとめてテンプレを作成していくことにしましょう。
Step2-D.BlogconfigsControllerクラスの作成
以下のように編集しましょう。
class BlogconfigsController < ApplicationController
layout 'blogconfigs'
def index
@blogconfig = Blogconfig.find 1
end
def edit
@blogconfig = Blogconfig.find 1
if request.patch? then
@blogconfig.update blogconfig_params
redirect_to '/blogconfigs'
end
end
private
def blogconfig_params
params.require(:blogconfig).permit(:title, :subtitle, :stylename)
end
end
blogconfigモデルはデータがID = １の１つだけしかないという変わったデータベースです。だからデータの一覧などは不要です。
indexではID=1のデータを検索して中身を表示します。
editではID=1のデータを@blogconfigに代入しておき、patchで送信されたらblogconfig_paramsを元に@blogconfigをアップデートします。表示と更新だけしか必要ないのです。
Step2-E.BloggenresControllerクラスの作成
以下のように編集しましょう。
class BloggenresController < ApplicationController
layout 'bloggenres'
def index
@data = Bloggenre.all
end
def add
@bloggenre = Bloggenre.new
if request.post? then
@bloggenre = Bloggenre.create bloggenre_params
redirect_to '/bloggenres'
end
end
def edit
@bloggenre = Bloggenre.find params[:id]
if request.patch? then
@bloggenre.update bloggenre_params
redirect_to '/bloggenres'
end
end
private
def bloggenre_params
params.require(:bloggenre).permit(:name, :memo)
end
end
Step2-F.BlogpostsControllerクラスの作成
以下のように編集しましょう。ブログの投稿記事を管理するためのものになります。今回はshowはカットしています。
class BlogpostsController < ApplicationController
layout 'blogposts'
def index
@data = Blogpost.all.order('created_at desc')
end
def add
@blogpost = Blogpost.new
@genres = Bloggenre.all
if request.post? then
@blogpost = Blogpost.create blogposts_params
redirect_to '/blogposts'
end
end
def edit
@blogpost = Blogpost.find params[:id]
@genres = Bloggenre.all
if request.patch? then
@blogpost.update blogposts_params
redirect_to '/blogposts'
end
end
def delete
@blogpost = Blogpost.find(params[:id])
if request.post? then
@blogpost.destroy
redirect_to '/blogposts'
end
end
private
def blogposts_params
params.require(:blogpost).permit(:title, :read, :content, :bloggenre_id)
end
end
Step3.レイアウトの作成
Step3ーＡ.全体のテンプレートの作成
全体のテンプレートを用意します。3つのコントローラーそれぞれにテンプレを用意します。
「layouts」フォルダにそれぞれの名前のファイルを作成して以下のように編集してください。
<!DOCTYPE html>
<html>
<head>
<title>Miniblog</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'blogconfigs', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'blogconfigs', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Miniblog</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'bloggenres', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'bloggenres', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Miniblog</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'blogposts', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'blogposts', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
基本的に３つともほぼ同じですが、「stylesheet_link_tag」と「javascript_include_tag」に指定されている値が異なります。これらが各レイアウトごとに個別のスタイルシートとスクリプトファイルを使うようにしてあります。全部同じで構わないならどれか１つだけ作成して各コントローラーのlayoutsの値をそのレイアウト名に統一しておきましょう。
Step3ーB.blogconfigsのテンプレートの作成
各コントローラーに用意したアクションのテンプレートを作成します。まずは、blogconfigsフォルダにあるファイルから以下のように編集してください。
<h1>Blogconfigs#index</h1>
<p>※各ブログの設定内容</p>
<table>
<tr><th>Title</th>
<td><%= @blogconfig.title %></td></tr>
<tr><th>Subtitle</th>
<td><%= @blogconfig.subtitle %></td></tr>
<tr><th>Stylename</th>
<td><%= @blogconfig.stylename %></td></tr>
</tr>
</table>
<p><a href="/blogconfigs/edit">編集画面>></a></p>
<h1>Blogconfigs#index</h1>
<p>※ブログ設定の編集</p>
<% if @blogconfig.errors.any? %>
<ul>
<% @blogconfig.errors.full_message.each do |err| %>
<li><%= err %></li>
<% end %>
</ul>
<% end %>
<table>
<%= form_for(@blogconfig, url:{controller:'blogconfigs', action:'edit'}) do |form| %>
<tr><th>Title</th>
<td><%= form.text_field :title %></td></tr>
<tr><th>Subtitle</th>
<td><%= form.text_field :subtitle %></td></tr>
<tr><th>Stylename</th>
<td><%= form.text_field :stylename %></td></tr>
</tr>
<tr><th></th>
<td><%= form.submit '送信' %></td></tr>
<% end %>
</table>
Step3ーC.bloggenresのテンプレートの作成
同じように作っていきます。
<h1>Bloggenres#index</h1>
<p>※ジャンル・データの一覧</p>
<table>
<tr>
<th>ID</th>
<th>name</th>
<th>memo</th>
<th></th>
</tr>
<% @data.each do |obj| %>
<tr>
<td><%= obj.id %></td>
<td><%= obj.name %></td>
<td><%= obj.memo %></td>
<td><a href="/bloggenres/<%= obj.id %>">Edit</a></td>
</tr>
<% end %>
</table>
<p><a href="/bloggenres/add">新規作成>></a></p>
<h1>Bloggenres#add</h1>
<p>※ジャンル・データの作成</p>
<% if @bloggenre.errors.any? %>
<ul>
<% @bloggenre.errors.full_message.each do |err| %>
<li><%= err %></li>
<% end %>
</ul>
<% end %>
<table>
<%= form_for(@bloggenre, url:{controller:'bloggenres', action:'add'}) do |form| %>
<tr><th>name</th>
<td><%= form.text_field :name %></td></tr>
<tr><th>memo</th>
<td><%= form.text_field :memo %></td></tr>
<tr><th></th>
<td><%= form.submit "送信" %></td></tr>
<% end %>
</table>
<h1>Bloggenres#edit</h1>
<p>※「<%= @bloggenre.name %>」ジャンルの編集</p>
<% if @bloggenre.errors.any? %>
<ul>
<% @bloggenre.errors.full_message.each do |err| %>
<li><%= err %></li>
<% end %>
</ul>
<% end %>
<table>
<%= form_for(@bloggenre, url:{controller:'bloggenres', action:'edit'}) do |form| %>
<tr><th>Title</th>
<td><%= form.text_field :name %></td></tr>
<tr><th>Subtitle</th>
<td><%= form.text_field :memo %></td></tr>
<tr><th></th>
<td><%= form.submit "送信" %></td></tr>
<% end %>
</table>
Step3ーD.BlogpostsControllerクラスのテンプレートの作成
残るは、Blogposts内にあるテンプレートですね。
<h1>Blogposts#index</h1>
<p>※投稿記事の一覧</p>
<table>
<tr>
<th>Id</th>
<th>title</th>
<th>read</th>
<th>genre</th>
<th colspan="2"></th>
</tr>
<% @data.each do |obj| %>
<tr>
<td><%= obj.id %></td>
<td><%= obj.title %></td>
<td><%= obj.read %></td>
<td><%= obj.bloggenre.name %></td>
<td><a href="/blogposts/<%= obj.id %>">Edit</a></td>
<td><a href="/blogposts/delete/<%= obj.id %>">Delete</a></td>
</tr>
<% end %>
</table>
<p><a href="/blogposts/add">新規作成>></a></p>
<h1>Blogposts#add</h1>
<p>※ジャンル・データの作成</p>
<% if @blogpost.errors.any? %>
<ul>
<% @blogpost.errors.full_message.each do |err| %>
<li><%= err %></li>
<% end %>
</ul>
<% end %>
<table>
<%= form_for(@blogpost, url:{controller:'blogposts', action:'add'}) do |form| %>
<tr><th>Title</th>
<td><%= form.text_field :title %></td></tr>
<tr><th>Read</th>
<td><%= form.text_field :read %></td></tr>
<tr><th>Content</th>
<td><%= form.text_area :content, {cols:40, rows:10} %></td></tr>
<tr><th>Genre ID</th>
<td><%= form.text_field :bloggenre_id %></td></tr>
<tr><th></th>
<td><%= form.submit "送信" %></td></tr>
<% end %>
</table>
<hr>
<p></p>
<table>
<tr>
<th>Id</th><th>Genre</th>
</tr>
<% @genres.each do |obj| %>
<tr>
<td><%= obj.id %></td>
<td><%= obj.name %></td>
</tr>
<% end %>
</table>
「hr」とは「horizontal rule（水平方向の罫線）」の略で、水平の横線を引くためのタグです。
<h1>Blogposts#edit</h1>
<p>※「<%= @blogpost.title %>」の編集</p>
<% if @blogpost.errors.any? %>
<ul>
<% @blogpost.errors.full_messages.each do |err| %>
<li><%= err %></li>
<% end %>
</ul>
<% end %>
<table>
<%= form_for(@blogpost, url:{controller:'blogposts', action:'edit'}) do |form| %>
<tr><th>name</th>
<td><%= form.text_field :title %></td></tr>
<tr><th>memo</th>
<td><%= form.text_field :read %></td></tr>
<tr><th>message</th>
<td><%= form.text_area :content, {cols:40, rows:10} %></td></tr>
<tr><th>Genre ID</th>
<td><%= form.text_field :bloggenre_id %></td></tr>
<tr><th></th>
<td><%= form.submit "送信" %></td></tr>
<% end %>
</table>
<hr>
<p></p>
<table>
<tr>
<th>Id</th><th>Genre</th>
</tr>
<% @genres.each do |obj| %>
<tr>
<td><%= obj.id %></td>
<td><%= obj.name %></td>
</tr>
<% end %>
</table>
<h1>Blogposts#delete</h1>
<p>※投稿記事の一覧</p>
<table>
<tr>
<th>Id</th>
<td><%= @blogpost.id %></td>
</tr>
<tr>
<th>title</th>
<td><%= @blogpost.title %></td>
</tr>
<tr>
<th>read</th>
<td><%= @blogpost.read %></td>
</tr>
<tr>
<th>content</th>
<td><%= @blogpost.content %></td>
</tr>
</table>
<%= form_tag controller: "blogposts", action: "delete" do %>
<%= hidden_field_tag "id", {value: @blogpost.id} %>
<%= submit_tag "送信" %>
<% end %>
hidden_field_tagというもので作成された非表示フィールドがありますね。ここにID番号を保管しておき、送信先のdeleteでそのIDのデータを削除するようにしています。
Step4.Blogsを作っていこう！
Step４ーA.ブログのコントローラーの作成
これでそれぞれのモデルとそのコントローラーが完成しました。ただ、これまでのものは「ブログの裏側で使うもの」でした。投稿者が利用するためのツールの部分で、実際のブログはこうして作成されたデータをもとに表示されるものになります。これは新たなコントローラーとして用意しておく必要があります。
$ rails generate controller blogs index genre show
ブログのページは「blogs」というコントローラーを用意します。アクションとして全体を表示するindex、ジャンルごとの表示をするgenre、選択した記事のコンテンツを表示するshowを用意しておきましょう。
Step４ーB.BlogsControllerクラスの作成
class BlogsController < ApplicationController
layout 'blogs'
def index
page_size = 5
@page_num = 0
if params[:page] != nil then
@page_num = params[:page].to_i
end
@data = Blogpost.all.order('created_at desc')
.offset(page_size * @page_num)
.limit(page_size)
@blogconfig = Blogconfig.find 1
end
def genre
page_size = 5
@page_num = 0
if params[:page] != nil then
@page_num = params[:page].to_i
end
@genre = Bloggenre.find params[:id]
@data = Blogpost.where('bloggenre_id = ?',params[:id])
.order('created_at desc')
.offset(page_size * @page_num)
.limit(page_size)
@blogconfig = Blogconfig.find 1
end
def show
@blogpost = Blogpost.find params[:id]
@blogconfig = Blogconfig.find 1
end
end
indexアクションはブログのトップページになります。ここでは投稿したデータを日付の新しいものから順に表示するようにしています。
offsetとlimitというメソッドを使い、page_size * @page_numの位置からpage_sizeの数だけデータを取り出しています。これは一定数ごとにページ分けをして表示するためのテクニックです。ページ分けをして表示する場合、画面に表示するデータは「現在のページ数＊１ページあたりのページ数」番目から「１ページあたりのページ数」個だけを取り出すことになります。
genreアクションでは指定されたID番号のジャンルのデータだけを表示します。
@data = Blogpost.where('bloggenre_id = ?',params[:id])
.order('created_at desc')
.offset(page_size * @page_num)
.limit(page_size)
検索の条件に、where('bloggenre_id = ?',params[:id])と指定してあります。これで、bloggenre_idの値が送られたidと同じものだけを検索可能です。
Step４ーB.blogsのテンプレートの作成
では、テンプレートを作っていきましょう。
<% @data.each do |obj| %>
<h3 class="top_title"><a href="/blogs/show/<%= obj.id %>">
<%= obj.title %></a></h3>
<p class="top_read"><%= obj.read %><span class="top_created">
(<%= obj.created_at %>)</span></p>
<hr>
<% end %>
<div class="navigate">
<% if @page_num > 0 then %>
<a href="/blogs/<%= @page_num -1 %>"> ＜＜前のページへ</a>
<% end %>
<span> </span>
<a href="/blogs/<%= @page_num +1 %>"> 次のページへ＞＞</a>
</div>
<h2><%= @genre.name %></h2>
<% @data.each do |obj| %>
<h3 class="top_title"><a href="/blogs/show/<%= obj.id %>">
<%= obj.title %></a></h3>
<p class="top_read"><%= obj.read %><span class="top_created">
(<%= obj.created_at %>)</span></p>
<hr>
<% end %>
<div class="navigate">
<% if @page_num > 0 then %>
<a href="/blogs/genre/<%= @genre.id.to_s + '/' + (@page_num - 1).to_s %>"> ＜＜前のページへ</a>
<% end %>
<span> </span>
<a href="/blogs/genre/<%= @genre.id.to_s + '/' + (@page_num + 1).to_s %>"> 次のページへ＞＞</a>
</div>
<h3 class="show_title"><%= @blogpost.title %></h3>
<p class="show_read"><%= @blogpost.read + '[' + @blogpost.bloggenre.name + ']' %></p>
<% contents = @blogpost.content.split "\n" %>
<div class="show_content">
<% contents.each.do |paragraph| %>
<p><%= paragraph %></p>
<% end %>
</div>
<p class="show_created">(<%= @blogpost.created_at %>)</p>
Step４ーC.blogs.html.erbのテンプレートの作成
次に、ページ全体のレイアウト用のテンプレートを作成する必要があります。以下のように新しいファイルをlayoutsフォルダの中に作成して下さい。
<!DOCTYPE html>
<html>
<head>
<title>miniblog</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'blogs', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag @blogconfig.stylename,'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'blogs', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<header id = "header">
<h1><a href="/blogs"><%= @blogconfig.title %></a></h1>
<h2><%= @blogconfig.subtitle %></h2>
</header>
<hr>
<div id="side">
<% Bloggenre.all.each do |genre| %>
<p><a href="/blogs/genre/<%= genre.id %>">
<%= genre.name %></a></p>
<% end %>
</div>
<main id="main">
<%= yield %>
</main>
</body>
</html>
Step5.その他整理！
Step５-A.スタイルシートの作成
これで一通りのファイルができました。次にスタイルシートを作っておきましょう。
このブログでは、 Blogconfigのstylenameでスタイル名を指定するとそれが読み込まれるようになっています。assetsフォルダ内のstylesheestフォルダの中に、サンプルとして「gray.scss」という名前でファイルを作成してください！
body{
color: darkgray;
font-size: 14pt;
margin: 10px 20px;
}
#header{}
#main{
width: 75%;
float: left;
}
#side{
width: 20%;
float: right;
}
h1{
color: darkgray;
font-size: 28pt;
margin: 30px 0px 70px 0px;
}
h2{
color: darkgray;
font-size: 14pt;
margin: 50px 0px;
}
hr{
display: block;
height: 2px;
background-color: #eee;
border: 0;
margin: 50px 0px 0px 0px;
}
a{
color: darkgray;
text-decoration: none;
}
a:hover{
color: darkgray;
text-decoration: underline;
}
.top_title{
color: darkgray;
font-size: 18pt;
margin: 25px 0px;
}
.top_read{
color: darkgray;
font-size: 12pt;
margin: 0px 0px 25px 50px;
}
.top_created{
font-size: 9pt;
}
.show_title{
color: darkgray;
font-size: 18pt;
margin: 25px 0px;
}
.show_read{
color: darkgray;
font-size: 12pt;
margin: 50px 20px;
}
.show_content{
color: darkgray;
font-size: 12pt;
margin: 20px;
}
.show_created{
text-align: right;
font-size: 10pt;
}
.navigate{
text-align: center;
font-size: 10pt;
margin: 50px;
}
Step５-B.assets.rbの追記
スタイルシートはファイルを用意しておくだけではstylesheet_link_tagで読み込めないです。config内の「initializers」フォルダ内にある「」に設定を追加しておきましょう。
Rails.application.config.assets.precompile += %w( gray.scss)
Rails.application.config.assets.precompile += %w( blogconfigs.scss)
Rails.application.config.assets.precompile += %w( blogconfigs.js)
Rails.application.config.assets.precompile += %w( bloggenres.scss)
Rails.application.config.assets.precompile += %w( bloggenres.js)
Rails.application.config.assets.precompile += %w( blogposts.scss)
Rails.application.config.assets.precompile += %w( blogposts.js)
Rails.application.config.assets.precompile += %w( blogs.scss)
Rails.application.config.assets.precompile += %w( blogs.js)
Step６.ルーティングの設定
Rails.application.routes.draw do
get 'blogs/index'
get 'blogs', to: 'blogs#index'
get 'blogs/:page', to:'blogs#index'
get 'blogs/genre'
get 'blogs/genre/:id', to: 'blogs#genre'
get 'blogs/genre/:id/:page', to: 'blogs#genre'
get 'blogs/show'
get 'blogs/show/:id', to: 'blogs#show'
get 'blogposts/index'
get 'blogposts', to: 'blogposts#index'
get 'blogposts/delete'
get 'blogposts/delete/:id', to: 'blogposts#delete'
post 'blogposts/delete', to: 'blogposts#delete'
post 'blogposts/delete/:id', to: 'blogposts#delete'
get 'blogposts/add'
post 'blogposts/add'
get 'blogposts/edit'
get 'blogposts/:id', to: 'blogposts#edit'
patch 'blogposts/:id', to: 'blogposts#edit'
get 'bloggenres/index'
get 'bloggenres', to:'bloggenres#index'
get 'bloggenres/add'
post 'bloggenres/add'
get 'bloggenres/edit'
get 'bloggenres/:id', to: 'bloggenres#edit'
patch 'bloggenres/:id', to: 'bloggenres#edit'
get 'blogconfigs/index'
get 'blogconfigs', to: 'blogconfigs#index'
get 'blogconfigs/edit'
patch 'blogconfigs/edit'
# For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end
これで完成すると思います。こんな感じで表示されます。ジャンルの新規作成も投稿の新規作成、編集なども可能です。見た目が地味なので、改良してみるのも良いと思います。
参考文献
「Ruby on rails5」超入門