超初心者が、Railsを勉強しながらSNSを作る記録

#目標
・CMSはRuby on Railsで行う
・DBは、SQLiteか、postgresqlどちらかを使う（決めてない）
・各アカウントで、CRUD（生成,読み取り,更新,削除）のできるSNSを作りたい
・ログイン周りはgemのDeviseでつくる
・新規登録・ログインは様々なページからポップアップで行いたい
・アカウントに権限を持たせたい

#Ruby環境構築　

>参照
https://prog-8.com/docs/ruby-env

#Railsセットアップ 

>参照
https://qiita.com/yu-yan/items/6e693caf23054c6ba9a1

webpackerがエラーを吐く場合がある。
まだ賛否の多いgemなので、一旦アンインストールする

`- gem 'webpacker'`

>参照
https://inside.pixiv.blog/subal/4615

#トップページを作る 

#各ページを作る 
ページの制作手順は２パターンある

①controllerが無い場合
ターミナルにて
```$ rails g controller home top```
これにより自動的に
- home_controller.rb（生成）
- home/top.html.erb（生成）
- routes.rb（追記）
が行われる

②controllerがある場合
・ home_controller.rbに追記 

```ruby:controller/home_controller.rb
    # コントローラーごとの読み込み
      def top
      end
```
・ routes.rbに追記

```ruby:routes.rb
      get '/' => "home#top"
```

・ Viewsにファイルを追加
-Views
--home
---top.html.erb（追加）


```ruby:views/home/top.html.erb
    # コントローラーごとの読み込み
    <% self_css_path = "/assets/"+controller.controller_name  %>
    <%= stylesheet_link_tag self_css_path, :media => "all" %>
```

#各ページに個別のSCSSを割り当てる
Railsでは、全ページにaapplication.scssが読み込まれてしまうので各ページに個別（専用）のSCSSを割り当てたいと思う。

>基本的な知識
https://keruuweb.com/rails-%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8Bcss%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B/

まずは、`reset.scss,common.scss,mixin.scss`など全ページに適応するscssファイルを`asset/common`ディレクトリをつくり、その中に入れ込む。

その際、application.scssは入れ込まず、 
` *= require_tree . `を追記する

```ruby:assets/stylesheet/assets.rb
/*
 ## 中略 ##
 *
 *= require_tree .
 *= require_self
 */
```
これで、application.scssより下層にあるファイルはすべて読み込まれるようになった。
（一見コメントアウトされてるように見えるけれどもちゃんと機能している。）


次に、common内のscssをプリコンパイル（scss→css）をするための設定をする
assets.rbに下記コードを書き込む。

```ruby:config/initializers/assets.rb
Rails.application.config.assets.precompile += %w( common/* )
```

次に条件分岐でページを判断し、SCSSを出力する。

①コントローラー毎に条件文

```ruby:views/layout/application.html.erb
<% if controller.controller_name == "page" %>
 コントローラーで、pageアクションをつかったとき
<% else %>
 それ以外
<% end %>
```

②URLから条件分岐

```ruby:views/layout/application.html.erb
<% if request.path == "/" %>
トップページの時
<% elsif request.path == "show/id" %>
showページの処理
<% else %>
それ以外の時の処理
<% end %>
```


>メモ・不明点
-scssの名前をindex.scssにするとエラーが出て、top.scssになった


#ログイン・ログアウト機能を作る
deviceで通常のログイン機能は実装できたがデフォルトの
`user/sign_up/`と`user/sign_in/`のページからではなく、色んなページからポップアップでログインできるようにしたかったので、下記URLを参考に実装した。

`ApplicationHelper`に記載してある通りにコードを追記するとエラーは消えた。
> 下記参照
https://qiita.com/cigalecigales/items/f4274088f20832252374
https://qiita.com/NYC-Blue/items/d104431b90e717e62051

#ログインできているかの確認方法(2日目)
次にログインが出来ているのかの確認を行った。
下記コードで`home/top`（トップページ）にログインが成功しているかどうかの確認ができるようになった。

```ruby:views/home/top.html.erb

  <% if user_signed_in? %>
     <p>ログイン成功</p>
    <%# current_userでアカウント情報の取得、.emailでメールアドレスの出力 %>
     <p><%= current_user.email %></p>
    <%# ログアウト %>
     <p><%= link_to "ログアウト", destroy_user_session_path, method: :delete %></p>

  <% else %>
    <p>未ログイン</p>
  <% end %>

```

> deviseで使える便利なヘルパーメソッド
https://qiita.com/tobita0000/items/866de191635e6d74e392

#別ページでの確認

別ページで確認したい。
railsのリンクは下記の通り

```ruby:
- link_to(文字列, パス [, オプション, HTMLオプション])
- <%= link_to [パス] do %> 〜 <% end %>
```

>リンク参考
https://blog.yuhiisk.com/archive/2018/05/02/rails-link-to-in-tags.html

別ページでもログイン情報をキープできていた。
ログアウトも成功した。