プチゆる週末PJT

外資系企業で働きながら、プログラミング学習者の「作ってみた」を応援するサイト「Eggineer」の開発・運営を行なっています

acts-as-taggable-onとselect2-railsを用いたタグ付けの実装

自分は、 このブログを読んでタグ付けの方法を知りました。

www.rokurofire.info

gemを使えば簡単にできる???

との事で頑張ってみました。

下記は参考資料を貼り付けただけのポエムです。

f:id:YO37377306:20180326182347j:plain

Photo by Rosmarie Voegtli | Flickr

acts-as-taggable-on

下記参照。

github.com

ruby-rails.hatenadiary.com

公式ドキュメントと詳しい日本語説明を見ながら実装。

詰まったところと言えば、下記の記事に書いてあるように

stackoverflow.com

@title = ActsAsTaggableOn::Tag.find(params[:id]).name

こんな感じで、Tagに関して、ActsAsTaggableOnと関係あるよーって明示しなければいけない点ですかね。

 

ただ、タグ付ってこのままだと、カンマ区切りじゃないといけなくて、これ結構だるいなと。

かな入力している時に、毎度英数に切り替えなきゃいけないし。

という事で、select2というgemを入れる事にしました。

ただ、この二つを組み合わせましたという投稿でいい感じのものがなく手こずりました。

select2-rails

これ使いました。

select2.org

github.com

ただ、自分なりにやってみたんですけどできなくて、最終的にselectのところを

<select class="js-example-basic-multiple form-control" name="post[tag_list]" multiple="multiple">

みたいな感じで

name="post[tag_list]"をname="post[tag_list]"にしたらうまくいったっていう。。。

[]これは何なんだ。。。

できたと思ったら、新規投稿画面、/posts/newに飛ぶと表示がうまくいっていなくて、更新するとうまく表示されるけど、 更新しないとうまくいきませんでした。

turbolinks、これページ移動とか早くしてくれるみたいなんですけど、度々JavaScriptと衝突してエラー出るらしいので、切りました。

これで解決。

Eggineerにユーザー登録して新規投稿画面を開くことで完成品を見ることができますので、興味ある方は是非。

ここまでの問題点

投稿を編集しようとすると、一度選んだタグが消えてしまうようなので、修正予定です。

投稿編集時ににタグが消えてしまうエラーを修正(2018/3/14)

どうやって直そうかなーと思っていたのですが、

データベースからJavaScriptに配列を持ってきて、select2で受け取らせるのがいいかなという事を考えました。

ただ、データベースからJavaScriptには直接データを移動させられないので、

nowdeveloping.blogspot.jp

これを真似して、配列をJavaScriptに移動。

alert()を使って、JavaScriptに配列が移動していることを確認。

ただ、ここから自分、

select2.github.io

に書いてあるTagging Supportを使って配列で取ってきたタグを初期値として表示すればいいじゃんと思っていたのですが、これタグのoptionに匹敵するものを作成するだけで、初期値を設定するものでは無いようでした。

(完全に勘違い。)

ということで、ググっていて度々見かけたvalというものに当たりを付けて、調査。

select2.org

Selecting options
To programmatically select an option/item for a Select2 control, use the jQuery .val() method: 

これっぽい。

という事で、実装したら編集時でもタグ消えないですね。

タグ周りはひと段落?