0. はじめに
こんにちは。toramaruJPです(｀・ω・´)
今回はオリアプに実装したタグ機能について書いていこうと思います。
BootstrapTagsInputを使用した実装になりますが、他にもありますので、下記のURL等見てみて下さいませ！！
＜参考URL＞
-
https://ruby-rails.hatenadiary.com/entry/20150225/1424858414
-
http://notsobad-jp.tumblr.com/post/80673191669/railsでいい感じのタグ管理するならacts-as-taggableとjquery-tags-inp
1. 実装概要
(1) タグ機能を実装する為の準備をしよう！
(2) タグ機能を実装しよう！
2. 実装詳細
(1) タグ機能を実装する為の準備をしよう！
(a) アプリを立ち上げよう！
開発で使用するバージョンは以下の通りです。
Rails v5.1.6
ruby v2.3.1
下記コマンドで現在のバージョンを確認できます。
$ ruby -v
$ rails -v
rails newコマンドを使用してアプリの立ち上げを行います。
$ rails _5.1.6_ new tagSample -d postgresql
tagSampleディレクトリに移動します。
$ cd tagSample
config/database.ymlファイルを編集します。
default: &default
adapter: postgresql
encoding: unicode
pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
template: template1
データベースを作成します。
$ rails db:create
下記のコマンド実行後、"http://localhost:3000/"
にアクセスをして、サーバーが立ち上がるか確認しましょう。
$ rails s
簡易なBlog機能を作成します。
$ rails g scaffold Post title:string context:text
$ rails db:migrate
(b) acts-as-taggable-onをインストールしよう！
acts-as-taggable-onというgemをインストールします。
gem 'acts-as-taggable-on'
$ bundle install
acts-as-taggable-onを使用する際に必要なテーブルを作成します。
$ rails acts_as_taggable_on_engine:install:migrations
$ rails db:migrate
(c) BootstrapTagsInputを使用する際に必要なファイルをコピーしよう！
下記のサイトの"Download"から、下記ファイルを下記ディレクトリへコピーしましょう。
https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/
- bootstrap-tagsinput.css(app/assets/stylesheets)
- bootstrap-tagsinput.min.js(app/assets/javascripts)
- bootstrap-tagsinput.min.js.map(app/assets/javascripts)
下記ファイルに下記記述を追加しましょう。
//= require bootstrap-tagsinput.min
※ //= require_tree .がある場合は、その上に記述しましょう。
*= require bootstrap-tagsinput
※ *= require_tree .がある場合は、その上に記述しましょう。
(d) Bootstrapをインストールしよう！！
前提として、Bootstrapをインストールする必要があるので、下記などを参考にしてBootstrapをインストールしましょう。
＜参考URL＞
(2) タグ機能を実装しよう！
acts-as-taggable-onを使用しよう！
タグリストが一つ必要な場合には、下記ファイルに下記の記述を追加します。
acts_as_taggable_on :labels # post.label_list が追加される
acts_as_taggable # acts_as_taggable_on :tags のエイリアス
# つまり、post.tag_list が追加される
タグリストが複数(今回は二つ)必要な場合には、下記ファイルに下記の記述を追加します。
acts_as_taggable_on :skills, :interests
PostsコントローラーのStrongParametersでこれらのパラメーターを受け取れるようにします。
def post_params
params.require(:post).permit(:title, :context, :skill_list, :interest_list)
end
画面からそれぞれのタグリストをテキストフィールドでカンマ区切りで入力できるようにします。
省略
<div class="field">
<%= f.label :title, "タイトル" %><br>
<%= f.text_field :title %>
</div>
<div class="field">
<%= f.label :skill_list, "スキル・特技" %><br>
<%= text_field_tag 'post[skill_list]', @post.skill_list.join(','), "data-role" => "tagsinput" %>
</div>
<div class="field">
<%= f.label :interest_list, "興味・関心" %><br>
<%= text_field_tag 'post[interest_list]', @post.interest_list.join(','), "data-role" => "tagsinput" %>
</div>
<div class="field">
<%= f.label :context, "内容" %><br>
<%= f.text_field :context %>
</div>
<div class="actions">
<%= f.submit %>
</div>
省略
入力したタグを画面に表示できるようにします。
<p id="notice"><%= notice %></p>
<h1>Posts</h1>
<table>
<thead>
<tr>
<th>Title</th>
<th>Context</th>
<th colspan="3"></th>
</tr>
</thead>
<tbody>
<% @posts.each do |post| %>
<tr>
<td><%= post.title %></td>
<td><%= render 'posts/tag_list', tag_list: post.skill_list %></td>
<td><%= render 'posts/tag_list', tag_list: post.interest_list %></td>
<td><%= post.context %></td>
<td><%= link_to 'Show', post %></td>
<td><%= link_to 'Edit', edit_post_path(post) %></td>
<td><%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>
<% end %>
</tbody>
</table>
<br>
<%= link_to 'New Post', new_post_path %>
<% tag_list.each do |tag| %>
<span class="label label-primary"><%= tag %></span>
<% end %>
※ bootstrap4をインストールしている場合には、上記ファイルの"label label-primary"部分を"badge badge-primary"に変更する必要がある。
※ さらに、bootstrap4をインストールしている場合には、下記ファイルの該当部分をreturn "badge badge-primary"に変更する必要がある。
省略
return "label label-primary"
省略
3. 最後に
これで２記事目になりますが、ちゃんと書こうとすると時間取られますねこれ(｀・ω・´)
定期的に出すために限定共有記事とかを使って、日常的にストックを貯めるようにしていきたいです！！
分量も少ない記事も作りたいと思います！！
以上になります！ 何か改善点等ありましたら、指摘して頂くと嬉しいです(´꒳`)