Ruby on Rails 取り敢えずGemを使ってみる

第一にメモ代わりに書いております。
それから、プログラミングの一歩で挫折しない人が増えれば楽しいという気持ちで
できるだけ自分なり噛み砕いてに仕組みを書いてみました。
書いている私も至らない点が多いと思いますので、誤記がありましたらご指摘いただけると幸いです。

- <h1>**そもそもGemとは**

コマンドを用いて既存に作られている便利な機能を利用すること

非常に分かりにくい例えをするなら、カレールウです。
スパイスやら諸々から揃えるよりカレールウを使う方が、遥かに早く失敗無しで美味しいカレーができますね。

ちなみに沢山のメーカーからカレールウが発売されるようにgemも沢山の開発者が出してます。
詳しくは[こちら](https://rubygems.org/gems)を見ていただければと思います。


では早速、カレールウ(Gem)を使って何か作っていきます。
___
#####**gemを使ってログイン画面を作成**
___
1.Gemfileを編集
`~/user/railsプロジェクト名(任意)/vendor/Gemfile`
![スクリーンショット 2018-06-18 18.48.05.png](https://qiita-image-store.s3.amazonaws.com/0/197693/e05131b4-2f74-2ea7-ee8d-049f4e4d2033.png)

```ruby:Gemfile
gem 'devise'
gem 'omniauth-twitter'
```
___
2.gemをインストールする
ターミナルで`cd プロジェクト名`まで移動し

`bundle install`
![スクリーンショット 2018-06-18 18.58.58.png](https://qiita-image-store.s3.amazonaws.com/0/197693/850a9f63-acc0-823d-b1b1-f82815fe9e38.png)
ずらずらインストールさている過程です。
![スクリーンショット 2018-06-18 23.50.08.png](https://qiita-image-store.s3.amazonaws.com/0/197693/33be3a8a-ecd8-da8d-d8ed-5e11df343789.png)

このように表示されていれば成功です。
___
3.'devise'が入ったか確認

`~/アプリケーション名/vendor/Gemfile.lock`
![スクリーンショット 2018-06-18 23.55.14.png](https://qiita-image-store.s3.amazonaws.com/0/197693/df2db1b5-5708-39f7-a122-ce9c9f1acf96.png)

インストールされたgemが一覧で表示されてます。

___
4.サーバーの再起動
サーバー用に立ち上げているターミナルを終了
`rails s`で再起動

サーバー起動時にgemが読み込まれる仕組みのようです。

___
5.
`rails g devise:install`
![スクリーンショット 2018-06-20 22.14.36.png](https://qiita-image-store.s3.amazonaws.com/0/197693/73a80329-416c-4bef-2062-f973946a3658.png)

以下の英文が表示されます。
![スクリーンショット 2018-06-20 22.21.27.png](https://qiita-image-store.s3.amazonaws.com/0/197693/fab97da3-69c6-c33e-d81b-37e88eaecc8d.png)
1~4まで英文通りに従っていきましょう。

(1)`config/environments/development.rb`の中に`config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }`を追加しろと言ってますね。
![スクリーンショット 2018-06-20 22.44.53.png](https://qiita-image-store.s3.amazonaws.com/0/197693/299dd3a7-ab30-51f7-45a0-5bdb3c183c61.png)

(2)ページの作成
`rails g controller Pages(任意の名前) index(任意のcontroller名) show(任意のview名)`
![スクリーンショット 2018-06-20 22.50.12.png](https://qiita-image-store.s3.amazonaws.com/0/197693/fcae46f0-eed1-44e4-b791-8b7da99f88a4.png)
書き換えます。
controllerとviewをもう少しだけ深く知りたい方はネットで調べるのが一番ですが、[あたしが大まかに説明した記事](https://qiita.com/rutko/items/d411e84efb0bb0917c54)も見ていただければ幸いです。

(3)通知を作成
ログイン時に出すアラートを作成します。
`app/views/layouts/application.html.erb`
<body></body>タグの中に以下を入力します。
![スクリーンショット 2018-06-20 23.15.23.png](https://qiita-image-store.s3.amazonaws.com/0/197693/c69f7c38-bc0a-1577-489e-be8bef2529a4.png)

(4)deviseファイルのviewを作成
deviseの導入時に追加されたviewのデザインを変更するにはコマンド入力が必要になります。
`rails g devise:views`
![スクリーンショット 2018-06-20 23.45.23.png](https://qiita-image-store.s3.amazonaws.com/0/197693/be886a90-b675-349e-4b9f-80e6ec20c56c.png)
ログイン認証画面に必要なhtmlファイルたちのデザイン変更準備が整いました。


___
6.ログイン認証用のファイルを作成
`rails g devise user(任意のファイル名)`
![スクリーンショット 2018-06-19 23.21.00.png](https://qiita-image-store.s3.amazonaws.com/0/197693/1f932ba4-88d8-5d69-0647-bb27a8ef53bd.png)
ログイン認証に必要なmigrateファイルが作成されました。
___
7.モデルを元にデータベースの作成
`rake db:migrate`**+ Enter**
![スクリーンショット 2018-06-24 23.01.06.png](https://qiita-image-store.s3.amazonaws.com/0/197693/0861c012-e7c9-abf5-84ed-18d7c0aa0343.png)
migrateコマンドはデータベースに更新をかけているイメージです。
分かりにくい例えをするなら、ものを書いたあとに押す完了ボタンです。

___
8.メニュー項目を作成
`app/layouts/application.html.erb`
![スクリーンショット 2018-06-24 23.44.57.png](https://qiita-image-store.s3.amazonaws.com/0/197693/430dde3a-51fc-f82e-6c6b-e5d1360992a0.png)
___

(1)トップページを編集
![スクリーンショット 2018-06-24 23.51.13.png](https://qiita-image-store.s3.amazonaws.com/0/197693/fbcc46e4-61de-cd98-68a2-154d72878ecd.png)


`localhost:3000/main`
![スクリーンショット 2018-06-25 23.41.42.png](https://qiita-image-store.s3.amazonaws.com/0/197693/df4c17d0-9164-b378-1ad2-2a221267eaf4.png)
こんな感じに表示されます
____
(2)ユーザーページを編集
![スクリーンショット 2018-06-24 23.51.22.png](https://qiita-image-store.s3.amazonaws.com/0/197693/7a7aab53-15d6-3368-9e41-03d80f55b873.png)


`localhost:3000/user`
![スクリーンショット 2018-06-25 23.45.22.png](https://qiita-image-store.s3.amazonaws.com/0/197693/731bbb11-3b28-325c-c5d0-1adb810ff71e.png)
こんな感じです。

勝手にサインアップ画面が生成されてますね
![スクリーンショット 2018-06-25 23.56.01.png](https://qiita-image-store.s3.amazonaws.com/0/197693/b8eb9f16-6ec7-fd1d-56c3-294cb8c56559.png)

こちらはログイン画面です
![スクリーンショット 2018-06-25 23.56.09.png](https://qiita-image-store.s3.amazonaws.com/0/197693/0deb30a3-a405-f21d-9120-62f26c97cd32.png)


あとはサインアップ/ログイン後のページを設定する必要があります。

疲れたので、今日はここまでにします。
次回はもう少し詳しくかけるよう頑張ります。


____
*おまけ*

インストールしたGemを確認する場合
`gem list`**+ Enter**
![スクリーンショット 2018-06-18 18.08.37.png](https://qiita-image-store.s3.amazonaws.com/0/197693/9df6cf68-fed4-2acb-974a-51600f471150.png)
沢山のgemがずらずら並んでる様子です。

インストールしたgemの場所を確認する場合
`gem environment`**+ Enter**
![スクリーンショット 2018-06-18 18.28.28.png](https://qiita-image-store.s3.amazonaws.com/0/197693/a1f1376e-9542-ba50-4aec-6daaf843c279.png)
`- GEM PATHS:` をご確認いただければと思います。