はじめに
タイトルの通り、簡易版instagramのアプリを作っていきます。
下記の工程に分けて記事を執筆していきますので、順を追って読んでいただけたらなと思います。
①アプリ作成〜ログイン機能の実装 ←イマココ
②写真投稿機能の実装
③ユーザーページの実装
④フォロー機能の実装
⑤投稿削除機能の実装
まずはアプリケーションを作成
ターミナルを開いて下記コマンドを打ち込みます。
データベースはmysqlを使用していきますので、
オプションで「 -d mysql 」としています。
rails new instaclone -d mysql
作成できたらエディターを立ち上げて、「 datebase.yml 」を編集します。
encodingをutf8に修正します。
default: &default
adapter: mysql2
encoding: utf8 # ←修正箇所
pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
username: root
password:
socket: /tmp/mysql.sock
修正できたらターミナルに戻り、instacloneのディレクトリに移動してから
rails db:createを実行します。
instaclone % rails db:create
下準備が整いましたので、次からログイン機能の実装を行います。
deviseの導入
deviseとは...
Railsで作成したアプリケーションに、
簡単に認証機能を実装することができるgemのひとつです。
ログイン、サインアップなどのログイン機能が作成出来ます。
Gemfileに下記のgemを追加します。（最下部）
その後、ターミナルでbundle installを行います。
gem 'devise'
instaclone % bundle install
gemの追加が完了したら、deviseの設定ファイルを作成します。
instaclone % rails g devise:install
続いて、Userモデルを作成します。
instaclone % rails g devise User
マイグレーションファイルも作成されるので
rails db:migrateを実行します。
instaclone % rails db:migrate
これでログイン機能はできたので、確認用にホーム画面を作ります。
ターミナルで下記コマンドを実行し、ホーム画面用のコントローラを作成します。
instaclone % rails g controller homes
作成できたら、homes_controllerにindexメソッドを追加し、
routes.rbにルートの設定を記述します。
class HomesController < ApplicationController
def index
end
end
Rails.application.routes.draw do
root 'homes#index' # ←ここ
devise_for :users
end
先ほどコントーローラを作成した時に、一緒にviewファイルも作成されています。
場所はapp/views/homesです。
こちらに、ホーム画面用のviewファイルを作成し、表示用の文字を記述します。
<h3>home</h3>
ターミナルでrails sを実行し、ローカルサーバーを立ち上げ、
http://localhost:3000/ で確認します。
homeと表示できていれば成功です。
before_actionでログイン画面に誘導
ここまでの状態では、誰もがホーム画面にアクセスできてしまいますので、
コントローラにbefore_actionを追記します。
これで、ログイン（もしくは登録）していないユーザーは、自動的にログイン画面に飛ばされます。
class HomesController < ApplicationController
before_action :authenticate_user! #←ここ
def index
end
end
これで画面を更新すると下記のような画面に遷移するはずです。
この画面で、EmailとPasswordを入力してSign upをクリックすると、
先ほどhomeと表示された画面に遷移することができます。
これでほぼほぼ完成ですが、最後にログアウトするボタンを作成する必要があります。
ログアウトの実装
link_toメソッドを使って、ホーム画面からログアウトできるリンクを作成します。
<h3>home</h3>
<div>
<%= link_to 'logout', destroy_user_session_path, method: :delete %>
</div>
destroy_user_session_pathは、ターミナルのrails routesで確認できます。
devise/sessions#destroy（sign_out）のPrefixが
destroy_user_sessionになっているのが確認できると思います。
Prefixの後に_pathをつけて記述します。
続いて、methodをdeleteとして完成です。
このようになっていたら成功です。
logoutをクリックすると、ログイン画面に遷移しますので、これで完成です。
以上です。お疲れ様でした。
次へ → ②写真投稿機能の実装