フラッシュメッセージを「torstr」にして日本語化していきます。 記述追加 Gemfile （65行目） # toastr gem 'toastr-rails', '~> 1.0' # 日本語化 gem 'rails-i18n' Gemfile source 'https://rubygems.org' git_source(:github) do |repo_name| repo_name =…

サイト ja.gravatar.com アバター登録は以下の手順でできます。 mrradiology.hatenablog.jp 記述追加 GemFile（63行目） gem 'gravtastic' GemFile source 'https://rubygems.org' git_source(:github) do |repo_name| repo_name = "#{repo_name}/#{repo_nam…

ユーザーモデルに氏名等の項目を追加します。 コマンド rails g migration AddColumsToUser full_name コマンド rails db:migrate Posticoでテーブル確認 full_nameフィールドの確認 ユーザモデルにバリデーションを追加します。 記述追加 app\models\user.r…

メールとパスワードでの認証を作成します。 記述追加 GemFile(60行目) gem 'devise', '~>4.2' GemFile source 'https://rubygems.org' git_source(:github) do |repo_name| repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/") "https:…

Bulmaを使用できるようにします。 bulma.io 「GemFile」に以下の記述を追加します。 記述追加 GemFile（56行目） gem 'bulma-rails', '~> 0.7.4' gem 'bulma-extensions-rails', '~> 1.0.30' GemFile source 'https://rubygems.org' git_source(:github) do …

「Visual Studio Code」を開き、「ターミナル」の「新しいターミナル」を選択してターミナルを開きます。 新しいターミナル 下に起動したターミナルでデスクトップに移動します。 cd desktop デスクトップに移動 デスクトップに「MacRails」ディレクトリを作…

タスク２で行なった変更をGitにコミットします。 ソース管理を選択します。 ソース管理 「＋」をクリックして全ての変更をステージします。 全ての変更をステージ コミットネームを入力します。 コミットネームを入力 チェックマークをクリックしてコミット…

「Font Awesome」のアイコンを使えるようにします。 fontawesome.com 「app\views\layouts\application.html.erb」ファイルに以下の記述を追加します。 記述追加 app\views\layouts\application.html.erb(13行目) <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"> app\views\layouts\application.html.erb </link>

サイト fonts.google.com 上記のサイトで選んだフォントをサイトに適用することができます。 今回は「Kosugi Maru」というフォントを適用してみます。 https://fonts.google.com/specimen/Kosugi+Maru?subset=japanese 「select this style」をクリックしま…

ユーザコントローラーを作成します。 コマンド rails g controller Users dashboard 作成したユーザコントローラの内容を更新します。 記述更新 app\controllers\users_controller.rb class UsersController < ApplicationController before_action :authent…

Gmailを使ってメールの送信をできるようにします。 以下の手順でGmailのセキュリティを２段階認証プロセスに変更し、アプリパスワードを生成してください。 mrradiology.hatenablog.jp １．記述の変更 config\environments\development.rb(35行目) 「false」…

まずはFACEBOOK for Developmentでアカウントを作成しなければなりません。 developers.facebook.com アカウント、アプリの作成は以下の手順でお願いします。 mrradiology.hatenablog.jp GemFileに以下の記述を追加します。 記述追加 GemFile(67行目) gem 'o…

notyのデザインについては以下を参照して下さい。 ned.im notyはyarnを使ってインストールします。 コマンド yarn add noty 「app\javascript\packs\application.js」に以下の記述を追加します。 記述追加 app\javascript\packs\application.js(11行目) wind…

ユーザーモデルに氏名等の項目を追加します。 コマンド rails g migration AddColumsToUser full_name from about:text language status:boolean 「db\migrate\20200707032605_add_colums_to_user.rb」ファイルの記述を以下のように更新します。 記述更新 db…

メールとパスワードでの認証を作成します。 記述追加 GemFile(60行目) gem 'devise' GemFile source 'https://rubygems.org' git_source(:github) { |repo| "https://github.com/#{repo}.git" } ruby '2.6.3' # Bundle edge Rails instead: gem 'rails', git…

ナビゲーションバーを使えるようにBulmaの設定をします。 bulma.io GemFileに以下の記述を追加します。 記述追加 GemFile(56行目) gem 'bulma-rails', '~> 0.7.4' gem 'bulma-extensions-rails', '~> 1.0.30' GemFile source 'https://rubygems.org' git_sou…

「Visual Studio Code」を開き、「ターミナル」の「新しいターミナル」を選択してターミナルを開きます。 新しいターミナル 下に起動したターミナルでデスクトップに移動します。 cd desktop デスクトップに移動 デスクトップに「MacRails」ディレクトリを作…

タスク２で行なった変更をGitにコミットします。 ソース管理を選択します。 ソース管理 「＋」をクリックして全ての変更をステージします。 全ての変更をステージ コミットネームを入力します。 コミットネームを入力 チェックマークをクリックしてコミット…

サイト fonts.google.com 上記のサイトで選んだフォントをサイトに適用することができます。 今回は「Kosugi」というフォントを適用してみます。 https://fonts.google.com/specimen/Kosugi?subset=japanese 「select this style」をクリックします。select …

Gmailを使ってメールの送信をできるようにします。 以下の手順でGmailのセキュリティを２段階認証プロセスに変更し、アプリパスワードを生成してください。 mrradiology.hatenablog.jp １．記述の変更 config\environments\development.rb(30行目) 「false」…

記述追加 Gemfile （65行目） gem 'toastr-rails', '~> 1.0' gem 'rails-i18n' Gemfile source 'https://rubygems.org' git_source(:github) do |repo_name| repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/") "https://github.com/#…

サイト ja.gravatar.com アバター登録は以下の手順でできます。 mrradiology.hatenablog.jp 記述追加 GemFile（62行目） gem 'gravtastic' GemFile source 'https://rubygems.org' git_source(:github) do |repo_name| repo_name = "#{repo_name}/#{repo_nam…

コマンド （ユーザテーブルに氏名fullnameフィールド追加） rails g migration AddFullnameToUser fullname:string コマンド マイグレーションの適用 rails db:migrate Posticoでユーザテーブル確認 fullnameフィールドの確認 app\models\user.rb 記述追加（…

サイト getbootstrap.com 「app\views\layouts\application.html.erb」ファイルを以下のように編集します。 １．記述追加 app\views\layouts\application.html.erb(13行目) <%= render 'shared/navbar' %> ２．記述追加 app\views\layouts\application.html.…

bootstrapの導入 Gemfile 記述追加(55行目) # bootstrap gem 'bootstrap-sass', '~> 3.4.1' # デバイス gem 'devise', '~>4.2' Gemfile source 'https://rubygems.org' git_source(:github) do |repo_name| repo_name = "#{repo_name}/#{repo_name}" unless …

「Visual Studio Code」を開き、「ターミナル」の「新しいターミナル」を選択してターミナルを開きます。 新しいターミナル 下に起動したターミナルでデスクトップに移動します。 cd desktop デスクトップに移動 デスクトップに「MacRails」ディレクトリを作…

タスク２で行なった変更をGitにコミットします。 ソース管理を選択します。ソース管理 「＋」をクリックして全ての変更をステージします。全ての変更をステージ コミットネームを入力します。コミットネームを入力 チェックマークをクリックしてコミットしま…

ユーザープロフィールページを作成します。 「app\controllers\users_controller.rb」ファイルに以下のメソッドを追加します。 記述追加 app\controllers\users_controller.rb(8行目) def show @user = User.find(params[:id]) end app\controllers\users_co…

herokuにアプリケーションをデプロイすると画像をローカルに保存することができません。 それに対応するため、アップロードした画像を全てアマゾンS3に保存するよう設定します。 アマゾンS3のキーの取得方法は以下の手順でお願いします。 mrradiology.hatena…

アバター画像をアップロードできるようにします。 コマンド rails active_storage:install コマンド マイグレーションの適用 rails db:migrate 「app\models\user.rb」ファイルに記述を追加します。 １．3行目に以下の記述を追加します。 has_one_attached :…