ここではボタンを押すと投稿フォームが出てくる仕様にしてみます！

このボタンを押すと、、

こんなフォームが出てくる！デザインシンプルにしすぎたかもしれません笑

あまりフロント部分に時間をかけすぎるのも何なので、このフォーム形式は投稿のshow,index画面でも応用していこうかなと思います！

というわけでトップ画面と、それぞれ共通する部分のフロントを実装してみたのでご覧ください。テーマはわかりやすくシンプルに、かつオシャレにです笑

動画が載せられないのでわかりづらいですが、文字の背景には田舎や自然を連想させる画像を表示させていて、スクロールすると文字の部分の背景が移り変わります！

スクロールしてみた動画はツイッターの方に載せてます！

https://twitter.com/TomTimTamTumTem

デザインの際にイメージしたのは、上部がサイバーエージェントのホームページで、下部はエアビーのホームページです。

これからもいろいろ付け加えていこうと思ってます！

このトーク機能を実装するにあたって厄介だったのは、トーク機能にまたユーザーと投稿をむすびつけなくてはならないという点です。

その前に、まずは以下のようにルーティングでpostにネストしてビューを作成する。

ここでは検索機能のためにsearchもネストしてある。

そして次にモデルにアソシエーションを記述。

user_id はspeaker_idとして使用。

これであとはビューにsimple_fomでデータを送る仕組みを記述し、show画面でコメントを表示させるよう実装した。一通りアプリを作り終えたらjsで非同期通信を実装する予定です。

少し駆け足で、検索機能も追加しました！

こちらは特に難しいことはなく、以下のようにコントローラーとビューに記述して実装しました。ビューのlocal: trueによって同画面での検索結果表示が容易にできるようになっています。

あとは投稿削除時の関連カラム削除の記述や日本語翻訳のgemを使ってファイルを生成するなど微調整をして、とりあえずサーバーサイドは完了です！

次からはフロントを実装して見栄えを良くしていきます。

このアプリでは応募後にユーザー同士がチャットできる場を設けようと考えていて、

投稿と応募者を結びつける中間テーブルを作ってないと別テーブルのレコードの呼び出しが後々できない、、というわけでしっかりやり直します！

まずpostとuserをつなぐ中間テーブルを作成し、カラムにはpost_id,user_idを入れます。そしてPostsUser,User,Postモデルに必要なアソシエーションを記入して行きます。

Post

User

PostsUser

コメントアウトが多いのは試行錯誤の証です。笑

アソシエーションを記述するにあたって特に考えたのは、Userモデルです。このアプリではユーザーは投稿と応募というアクションを起こすことができるので、投稿をする際にユーザーと投稿を結びつけるidと、応募をする際にユーザーと投稿を結びつけるidが必要になるわけです。そこで前者をcontributor_idとしてpostsテーブルのカラムに追加し、後者をapplicant_idとして中間テーブルに追加することにしました。その際、同じユーザーモデルで外部キーを分散させるために、class_nameという手法を使いました。accepts_nested_attributes_forはデータの更新、削除などをまとめて行ってくれるものですが、記述はまだ曖昧なので後で修正します。そしてここまで終えたらあとはコントローラーで処理します。

投稿がそのままグループのような役割を果たすような仕組みにするため、ストロングパラメーターに配列の形で応募者のidを空の状態で入れておきます。さらに応募ボタンを押した際にuppdate_applyアクションが働くようにし、そこで先ほど説明した応募者idにログインユーザーのidを入れてやることで中間テーブル内のpost_idも連動してデータが入り、いつでもレコードの取り出しが可能となりました。

というわけで今度こそようやく募集と応募機能ができました。これからは今までよりも少しスムーズに進むと思われるので気持ち楽にやっていこうと思います！

前回応募機能をつけようとして、応募した先の投稿にapplicant_idを結びつける作業の途中でエラーが出ました。正直ここはものすごく悩みました、、、

結果わかったことは、動いているアクションが思っていたのと違う、ということです。応募ボタンは、下のようにpostsコントローラーのshowアクションで表示させていましたが、この応募ボタンを押した際にshowアクションではなくupdateアクションだったということ。

冷静に考えればshowのmethodはあくまでGETなのだから当然ではあるのですが、、

とにかくbyebugというデバック方法で気づくことができました。ちなみにapplicant_idはrailsのupdateメソッドを使って既存のnilのカラムにデータを入れてやる形で紐づけるのですが、updateアクションは投稿編集の際に動かしたいので、別アクション、ルーティングを作りupdateメソッドをそれぞれのアクションで働かせることにします。ということで新たにupdate_applyアクションを作り、下のように記述しました。

ついでに投稿者とログイン中ユーザーが同一の場合applicant_idは入らないようにしておきました。

こうして無事、応募機能を完成させることができました！

投稿機能、応募機能をまとめると、current_user.idをストロングパラメーターでcontributor_idとしてマージすることで投稿作成時に募集側ユーザーが紐付き、ストロングパラメーターでapplicant_idを許可し、かつviewのformで表示させずにデータを送らないことでnilをカラムに入れ、updateメソッドでそのカラムに応募時のcurrent_user.idを入れてやることで応募側ユーザーが投稿に紐づくという仕組みです。

最後に編集、応募に関して不正を働けない仕組みを少し足しておきました。

次は応募後の動きの仕組みを作っていこうかなと思います！！

以下一覧画面

以下詳細画面

cssないのでひどく殺風景ですが、こんな感じですね！

次は応募の機能をつけていきます→思ったより複雑で苦戦、、

募集者と応募者が存在するということでuserをcontributor_idとapplicant_idにわけて、postsテーブルに追加しました。今まで存在していたuser_idを、募集者を意味するcontributor_idに変更したわけです。

ここから僕がやりたいことは、ログイン中のユーザーと新規投稿の紐付け（既にuser_idで絡めていたものをcontributor_idに変えるだけ）と、他人の投稿に対して応募した際にpostsテーブル（投稿）のapplicant_id（応募ID）とログイン中のユーザーのcurrent_user.idを紐付けるという作業。

このようにして、下のposts_paramsを使ってcreateアクションで空のapplicant_idを送ってやり、showアクションの応募ボタンを押したタイミングで空のapplicant_idカラムにcurrent_user.idを入れてやることで紐付けをする！

⬇︎

そして応募ボタンを押すと、、

エラーが。笑

しかしデータベースを見るとapplicant_idにはちゃんと値が入っている、、

そうそう上手くいかないものです！次回このエラーを解決します

とりあえず簡単な仕組みの部分から作っていきます！

ホーム画面、投稿画面、投稿一覧画面、詳細画面、編集画面を作り、実際に投稿をしてそれを一覧に表示させ、編集を行うところまでザッと実装してみる。

次にユーザー登録機能を作るためにdeviseを導入したのですが、なぜかマイグレーションエラー。ridgepoleを使っているためmigration関係ないのでは？と思ったのですが、ridgepoleを使うが故にdevise導入時、少し変更が必要だったみたいです！

deviseのモデル導入と同時にmigrationファイルが生成されるのですが、その内容のcreate_table以下の部分をそっくりそのままridgepoleで使うschemaファイルに写してやらなければなりません。そりゃそうですよね。笑　

その後不要になったマイグレーションファイルを削除して、サーバー再起動して、無事導入完了！

というわけでこれからサインアップ、サインインなど登録機能を追加して、ユーザー情報と投稿をむすびつけていこうと思います！

早速rails sでサーバー起動させようとしたら、エラー。

 Please run rails webpacker:install Error: No such file or directory @ rb_sysopen - /Users/tky/projects/match_hike/config/webpacker.yml (RuntimeError)

webpacker?聞いたこともないですね。言われた通りインストールしましょう。

rails webpacker:install　すると、エラー。

Yarn not installed. Please download and install Yarn 

インストールしましょう。

brew install yarn

というわけで再度rails webpacker:installして成功！

無事、rails s でサーバー起動することができました。

というわけでrouting,view,controllerに少し記載して、ようやく白紙のページが表示されるに至りました。ここからガンガンコードを書いていこうと思います！！

An error occurred while installing mysql2 (0.5.2), and Bundler cannot continue.

これに関しては下の順に実行して.bundle/configにBUNDLE_BUILD__MYSQL2: "--with-ldflags=-L/usr/local/opt/openssl/lib"を生成してあげれば解決です！

$ bundle config --local build.mysql2 "--with-cppflags=-I/usr/local/opt/openssl/include"

$ bundle config --local build.mysql2 "--with-ldflags=-L/usr/local/opt/openssl/lib"

これで無事bundle installできました！

というわけでデータベース作成していきましょう。gemファイルにridgepoleを追加してbundle installする。→schemaファイルにテーブルとカラムの詳細を記入→

rails db:createでデータベースの基盤を作成する→

bundle exec ridgepole -c config/database.yml -E development --apply -f db/Schemafileを実行してschemaファイルの記入内容を反映させる。

とりあえずデータベース作成は成功しました。これからコントローラーやモデル、ルーティング等整えていきます！

オプションをつけてアプリケーションをrailsのバージョン6.0.2.1で作成。

ここでこんなエラー。笑

`find_spec_for_exe': can't find gem railties (= 6.0.2.1) with executable rails (Gem::GemNotFoundException)

調べるとこのバージョンのrailsをインストールしていないとのことなので

gem install rails -v 6.0.2.1

実行後、無事アプリ作成できる。

今回はmigrationファイルの大量生産を防ぐためにridgepoleというgemを使い、rails db:migrateの代わりとなるrails db:applyを実行。ここでエラー。笑

Library not loaded: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib

記事にあったbrew update && brew upgrade実行しても変わらず。どうやら以前インストールしたopensslが問題ぽい、、

一度rbenv uninstall 2.5.1（rubyのversion）して　rbenv install 2.5.1することでopensslが再構築されるとのことなので実行→成功

では改めてrails db:applyを実行。しかしエラー。

The `rails' command exists in these Ruby versions:

  2.5.3

bundle installしてみると、似たようなエラー。

The `bundle' command exists in these Ruby versions:

  2.5.3

どうやらGemfile.lockとのバージョンの違いが原因らしいが、ここで大きくつまづいたのだが、Gemfile.lockのbundlerのバージョンを確認するときはbundlerではなく必ずBUNDLED WITH をみること！

そしてgem install bundler -v 2.0.2を実行し、無事bundle install成功、と思いきや今度は

An error occurred while installing mysql2 (0.5.2)

mysqlが問題らしい、、ここはまた別問題なので次に紹介する。

まだコードを書けてないが、ここを山場と思い頑張ろう。笑