HOW TO INSTALL ANCESTRY

1. ancestry

2. アジェンダ
・ancestryとは
・ancestryの導入方法
・ancestryの実装方法 + 解説
・ancestryの簡略図

3. ancestryとは
ancestryとは、親子構造(ディレクトリ構造)を
簡単に作成することができるgemです。
今回では下の画像のように
カテゴリー検索をancestryで実装していきます。
→ →

4. → →
親 子 孫
ancestryの簡略図
NULL 1 1/2
関係性
カラム

5. ancestryの導入方法
①Gemfileに「gem ancestry 」を記載し、「bundle install」
②データベースにancestryカラムを追加
③モデルに「has_ancestry」を追記
ancestryの導入方法は、大まかには以下のようになります。

6. ancestryの実装方法
ancestryを利用したプルダウンカテゴリーを実装していきます。
・「$ rails new ancestry -d mysql」
・「$ rails db:create」
・「$ rails db:migrate」
・Gemfileに以下を記載後、「bundle install」

7. ・「$ rails haml:replace_erbs」でHamlに変換
・「$ rails g controller searches」でコントローラー作成
・ routes.rbに以下を追記
・「$ rails g model maincategory」でモデルを作成
・ application.jsを以下のように編集

8. ・「$ rails g migration add_ancestry_to_maincategory
ancestry:string:index」でancestryカラムを追加
・「rails db:migrate」
・ 作成したマイグレーションファイルに「t.string :name」を追記

9. ・ seeds.rbに以下のデータを貼り付け、「$ rails db:seed」を実行
https://techtechmedia.com/seeds-ancestry/
・ モデルに「has_ancestry」を追記
・「searches/new.html.haml」を以下のように編集

10. ・「category.js」を作成し、以下のように編集

13. ・「views/searches/new.json.jbuilder」を作成し、
以下のように編集

14. ・「searches_controller.rb」を以下のように編集

15. 解説 (カテゴリーが表示されるまでの流れ)
トップページを表示
① まずは「routes.rb」の「root searches#new 」が発火
②

16. ↓ 検証ツールで確認すると、以下のようになっている
③ トップページ表示
④ カテゴリーを選択
paramsのキーを指定しているが、
送信ボタンがないためparamsは送られない

17. カテゴリー選択で発火する記述
value属性を取得
コントローラー(ルーティング経由で)
にキーを送る(例、 parent"=>"2")
⑤ カテゴリー選択を引き金にJSが発火

18. ⑥ キーがコントローラーに送られ、JSON形式でレスポンスを返す

19. ⑦ jbuilderでjson形式に変換される

20. ⑧ doneで処理結果をビューに返す
下のプルダウンを表示する
↓ このように表示する

21. ⑨さらにプルダウンが選択された時は、以下のJSが発火する
さらに下のプルダウンを表示する
↑ このように表示する

22. 参考
f.collection_selectの書き方