system spec

gemの導入 group :development, :test do gem 'byebug', platforms: %i[mri mingw x64_mingw] gem 'factory_bot_rails' gem 'rspec-rails', '~> 5.0.0' gem 'webdrivers' gem 'capybara' end rspecでcapybaraを使うために必要な機能を読み込む require 'capy…

Model Spec

概要 taskモデルのバリデーションに関するテストを作成する。 FactoryBotを使用しテストデータを作成する。 バリデーションエラーの発生と、エラーメッセージの内容を表示させる。 各バリデーションを削除した際、テストが失敗することを確認する。 FactoryB…

rspecセットアップ

概要 GitHubからサンプルアプリを fork, clone 後、ローカルでのrspec実行環境をセットアップする。 ローカルへのコピー GitHubからサンプルアプリをforkし、ターミナルからcloneする。 $ git clone URL 新たなブランチの作成 $ git checkout -b ブランチ名 …

Git,GitHub基礎

Gitとは ファイルのバージョン管理をするツールのこと。 バージョン管理とは、ソースコードなどのファイルの追加や変更履歴を管理することで、過去の変更を確認したり、特定の場所にファイルを戻したりできること。 バージョン管理を使えば、いつ、どこで、…

javascriptDOMの操作

DOMとは DOM( Document Object Model )はHTMLやXMLを取り扱うためのAPIのこと。 DOMを使えば、HTMLの探索やスタイルの変更・イベントの設定・HTML要素の取得の他に、振る舞いを変えたり、ユーザー操作時の処理を設定することができる。 htmlを用意する DOMを…

gem enum_helpを使用し、enum値のi18n化と権限のプルダウンを実装

前提 enumとransackは導入済み →enum →ransack 実装内容 enumで定義した値の翻訳 ユーザー一覧画面でのプルダウン検索 導入 gem 'enum_help' bundle install enumの設定 general・・・一般 admin・・・管理者 と定義する。 enum role: { general: 0, admin: …

メニューのアクティブ・非アクティブ化

管理画面において、以下のようにサイドバーで選択(クリック)した部分を青色(アクティブ)にさせる。 実装 ヘルパーにメソッドを定義する。 def active_if(path) path == controller_path ? 'active' : '' end controller_path?でcontroler名を取得する。 cont…

管理画面のCRUD作成

CRUD作成 以下のような、管理画面に掲示板とユーザーのCRUD(Create(生成)、Read(読み取り)、Update(更新)、Delete(削除))機能を作成する。 ルーティング namespace :admin do root to: 'dashboards#index' resources :users, only: %i[index show ed…

AdminLTEで管理画面の実装

AdminLTEを使用し、以下のような管理画面トップページと管理画面へのログイン機能を実装する。 AdminLTEとは Bootstrapをベースにした、管理画面等のCSSフレームワーク 今回はバージョン3を使用 AdminLTEのインストール $ yarn add admin-lte@^3.0 node_modu…

パスワードリセット機能のバグ修正

エラー内容 ①rspec実行時におけるエラー ②リンクからパスワードリセットページへ行き、新しいパスワードを入力して更新を押すが更新できない。 解決手順① Unable to find field "メールアドレス" that is not disabledから実際のhtmlのfieldとテストコードの…

sorceryのパスワードリセット機能を実装

概要 パスワードリセット申請画面にメールアドレスを入力し申請後、tokenを発行しデータベースへ保存させる 入力されたメールアドレスにパスワードリセットページヘのリンクを送信し、発行したtokenをURLへ組み込み、ユーザーを判別する。 ユーザーはリンク…

プロフィール編集画面

実装内容 プロフィール詳細ページ(/profile)と編集ページ(/profile/edit)を作成する プロフィール編集画面からアバター画像をアップロードできるようにし、プロフィール詳細画面、ヘッダーアイコン、コメントしたユーザーのアイコン画像が表示されるよう…

gem ransackを使用し検索機能の実装

実装内容 gem 'ransack'を使用し、掲示板一覧画面とブックマーク一覧画面に以下のようなフォームを設置する。 入力された文言が「掲示板のtitle,body」に含まれている掲示板のみを表示させる。 ブックマーク一覧のページで検索した場合は「ブックマークした…

gem kaminariを使用しページネーションを実装

ページネーション ページネーションとは検索結果や内容の多いページを分割して表示させ、見やすくすること 使用例↓ 実装内容 掲示板一覧画面とブックマーク一覧画面にページネーションを実装。 ページネーションにはkaminariを使用し、1ページあたり20件の掲…

コメント投稿、削除のAjax化

実装内容 コメントの投稿、削除処理をajax(remote :true)で行う。 削除ボタンのaタグにはjs-delete-comment-buttonclassを付与。 ルーティング commentsに削除を追加。 ~ resources :users resources :boards do resources :comments, only: %i[create dest…

ブックマークボタンのAjax化

Ajax ajax(Asynchronous Javascript and XML)とはjavascript,XML,DOMなどを組み合わせて非同期通信すること 同期通信では画面遷移に待ち時間があるが、非同期通信ではページの必要箇所だけ書き換えるので画面遷移がなく、スムーズな操作が行える。 実装内容 …

ブックマークの実装part2

part1からの続きです。 中間モデルを定義したので ルーティング→コントローラ→viewと実装していきます。 ルーティングの設定 BoardモデルとBookmarkモデルが紐付いてるので、ルーティングをネストする必要がある。 commentsとbookmarksコントローラはboards…

ブックマークの実装part1

実装内容 掲示板の☆ボタンを押すと、その掲示板をブックマーク/解除出来る機能を作成。 ブックマークすると★解除すると☆になるようにし、フラッシュメッセージも表示させる。 同じユーザが同じ掲示板を複数回ブックマークできないようにする。 ブックマーク…

バグ修正メモ

System Versions Ruby version 2.6.3 Rails version 5.2.3 以下のエラーを修正していく。 blog一覧ページにアクセスした場合 blogの一覧ページが表示されること ルーティングが間違っていた。 blogではblogsコントローラのindexアクションを呼び出せないので…

動的タイトル表示の実装

ヘルパーを使ってタイトルを動的に表示させる。 ここでいうタイトルとはブラウザのタブに表示される文字のこと↓ 実装内容 今回はヘルパーを使い、以下の各ページごとに動的にタイトルを表示させる。 content_forを使い、「ページごとのタイトル名 | タイトル…

掲示板にコメント機能を追加 part2

part1からの続きです。 掲示板の詳細画面を実装したので、そこにコメント機能を実装していく。 投稿詳細画面へコメントの入力フォーム、エリアを追加する。 Controllerへ追記。 boards_controllerにインスタンス変数@commentと@commentsを定義し、view側で呼…

掲示板にコメント機能を追加 part1

概要 掲示板詳細画面を追加し、その中でコメントをできるようにする。 掲示板一覧画面から掲示板のタイトル名を押すと掲示板詳細画面へ行けるようにする。 書き込んだコメントが一番上に表示されるようにコメントの並び順を指定 コメントした本人のみに削除…

掲示板に画像アップロード機能を実装

実装内容 掲示板作成画面から画像を投稿する。 gem CarrierWaveとMiniMagickを利用。 サムネイルというラベルを追加し、画像の選択をする。 画像を選択せずに投稿した場合、デフォルトの画像を表示。 アップロードできるファイルはjpg, jpeg, png, gifのみに…

ログイン中のユーザーで掲示板の新規作成をする

UserモデルとBoardモデルにアソシエーションを設定 Userと関連付いたboardを作成するので、has_manyをUserモデルに定義する。 class User < ApplicationRecord authenticates_with_sorcery! validates :password, length: { minimum: 3 }, if: -> { new_reco…

掲示板一覧の作成

モデルの作成 Boardモデルの作成しtitle,bodyカラムを追加する。 Boardモデルにuser_idを外部キーとして設定する。 紐づくモデル名+「_id」で外部キーと呼ぶ。 reference型を使いモデルと同時に作成。 $ rails g model board title:string body:text user:re…

Fakerを利用しダミーデータを作成

掲示板の一覧にダミーデータを投入する。 gem Fakerのインストール。 Fakerはdevelopmentとtest環境にインストールする。 group :development, :test do #... gem 'faker' #... end bundle installで完了。 データベース上にダミーデータを生成 今回はBoard…

Decoratorの導入

Decoratorについて Decoratorとはソフトウェアのデザインパターンのひとつであり、モデルとviewの間に追加する。 「モデル→Decorator→view」のようにviewを装飾するメソッドを追加するときはモデルではなく、デコレーターへ追加する。 Decoratorを導入すれば…

Bootstrapでflashメッセージを実装

概要 以下のflashメッセージをbootstrapで表示させる。 ログイン成功時・・・「ログインしました」 ログイン失敗時・・・「ログインに失敗しました」 ログアウト時・・・「ログアウトしました」 ユーザー登録時・・・「ユーザー登録が完了しました」 ユーザ…

i18nによる日本語化

i18nを使用しユーザー登録画面とログイン画面を日本語化する。 i18n国際化(Internationalization)はRailsにおいて、言語の翻訳機能があるgemである。 実行環境 Rails5.2.3 Ruby2.6.4 gem 'rails-i18n'をGemfileに記述し、bundleする。 # rails5系なら以下を…

gem sorceryを使用し、ユーザー登録、ログイン機能を実装

概要 sorceryとは、railsで作成されたアプリケーションに対し、ログイン機能を実装させるgemである。 認証用gemであるdeviseと比較すると、sorceryはある程度のコードは自分で書かなければいけなく、deviseよりコードを書く量が多いがその分カスタマイズ性が…