白ヒゲさんののんびり blog

プログラミング初学者が書く。間違い探しブログです。勉強中はRuby on Railsです。

rails 投稿記事にタグをつける機能を実装する。

皆さん、こんにちは(*´∇`*)

 

Ruby on Railsで投稿記事にタグをつけることに悶絶していた白ヒゲさんです。

いや、もう一週間くらいかかりましたwww

 

実際問題としては、acts-as-taggable-on  を使用するのが一般的とのことでした....

 

ですが、私はformオブジェクトを利用して実装することにしました_:(´ཀ`」 ∠):

これが地獄の始まりでしたが、少し感覚が掴めました!!

 

では、忘れない様に解説していきましょう♪

 

今回使用するのは簡単に要約すると

1.ブログ投稿用  >> blogscontroller

2.タグ実装用     >> tagmodel

3.中間テーブル >> blogtagsmodel

4.全てを同時に登録するformオブジェクト

この4種類になります(*´∇`*)(細かい設計は省きますのでご了承くださいw)

 

もうmigrationファイルとmodelのvalidationなんかも割愛します!

tagに一意性を持たせて使い回すために最初は下図の様にしていました。

f:id:t_custom8:20201108010251p:plain

ですが、後でfirst_or_initializeで一意性を確保するので不要です。

 

1:肝心要のformオブジェクト(blog_tags)

f:id:t_custom8:20201108011152p:plain

 

attr_accessorで使用したいカラム名をセットします。

そしてsave内でblog,tag,blogtagのデータを一気に保存できる様に設定します。

 

※今回はタグがメインなのでタグに注目します。

f:id:t_custom8:20201108011723p:plain

f.text_fieldからタグをtag_idsとしてparamsで送信します。

tag_idsの中身をsplitメソッドを使用してバラバラにしていきます。

1.tag_list = tag_ids.split(",")

これでtag_ids内の文字列を『,』の箇所で区切って単語に分けて配列内に入れていきます。※splitすると配列内に分解した文字列が収納されます。

 

2.tag_list.each do |tag_name|

each文を使用してタグを生成していきます。

@tag = Tag.where(tag_name: tag_name).first_or_initializeで新規タグか既存タグかの判別をします。

判別をして既存タグなら既存のidを使用。新規ならidを生成します。

 

 

2:blogコントローラーでparamsとcreateアクションを

ここではformオブジェクトであるblogtagsからのデータをparamsで受け取る様に設定します。それ以外は特に通常と変えていません。

f:id:t_custom8:20201108010652p:plain

 

blogtags_paramsの内容です。

f:id:t_custom8:20201108010700p:plain

 

これで後は、出力するための設定は完了しましたd(^_^o)

下図の様なタグが生成できる様になりました♪

f:id:t_custom8:20201108012626p:plain

fromオブジェクト内でどうやってtag_idsを分解してちゃんとidをセットするか?

を考えるのにかなりの時間を費やしましたがかなり勉強になりました。

 

そして何より偉大だと感じたのがbinding.pryですね♪

どこまで正常に処理が行われているかがわかりやすかったのでかなり助かりました(*'▽'*)

ありがとう!binding.pry

 

オマケ(今後活躍予定??). tag-itを導入

タグ付けUIを提供するjQueryプラグイン(プラグインとは?アプリの機能を拡張するソフトウェア)

とりあえず、ホームページからダウンロードして下図の様な感じでセットします。

f:id:t_custom8:20201108004158p:plain

そしてjQuery用のgem 'jquery-ui-rails' を bundle install します。

 

続いて二箇所ファイルを書き換えます。

app/assets/javascripts/application.js

f:id:t_custom8:20201108004719p:plain

app/assets/stylesheets/application.css

f:id:t_custom8:20201108005020p:plain

このtag-itなんですが...恐らく今回の私の実装では機能していないと思われますww

参考程度と今後のバージョンアップの際の備忘録程度だと考えていただけると幸いです。

 

それでは、今回も最後までみてくれた方ありがとうございました♪

何かご意見があればよろしくお願いしますヽ(´▽`)/