管理者機能の作成 今回は、Gemのdeviseを使用して複数権限の管理者権限の作成を実施していく。（Member（会員）とAdmin（管理者）） 前提条件 作業環境 エディエタ：AWS ブラウザ：Google Chrome Ruby : 3.1.2 Rails : 6.1.7.4 deviseはインストール済み 作…

Railsチュートリアルを進めていく、学習の記録として残しておく。（無料の過去版テキストを使用しています。Rails 5.1対応 ※記事では、rails7で実装しています。） ※回答は、2023年8月29日現在のものです。 演習問題 リスト 1.12のhelloアクションを書き換え…

Railsチュートリアルを進めていく、学習の記録として残しておく。（無料の過去版テキストを使用しています。Rails 5.1対応 ※記事では、rails7で実装しています。） ※回答は、2023年8月29日現在のものです。 前提として、railsチュートリアルのここまでの内容…

Railsチュートリアルを進めていく、学習の記録として残しておく。（無料の過去版テキストを使用しています。Rails 5.1対応 ※記事では、rails7で実装しています。） ※回答は、2023年8月28日現在のものです。 演習問題 Ruby on Railsで使うRuby gemはどのWebサ…

ページネーションのレイアウト変更 前回に引き続き、kaminariで導入したページネーションのレイアウトを変更していく。 前回の記事 URL ページネーションの実装(gemの「kaminari」実装) - takifugu’s blog 前提条件 Bootstrap導入済み(yarnにて導入) 参考URL…

ページネーションの実装 今回も以前作成したBooker2のアプリケーションに実装していく。 ページネーションとは ページネーションとは、一つの長い文章を複数のページに分割し表示することです。 ページネーション機能の実装には、gemの「kaminari」を使い実…

ゲストログイン機能の実装 今回は以前作成したアプリケーションにゲストログイン機能を実装していく。 使用するアプリケーション 参考URL 作成するアプリケーションについて - takifugu’s blog 前提条件 GemのDeviseを使用（導入済み） 仕様 トップページに…

非同期通信の実装 今回はコメント機能に非同期通信を実装していく。 下記関連記事 コメント機能の実装 URL：コメント機能の実装 - takifugu’s blog いいね機能に非同期通信の実装 URL：非同期通信の実装（いいね機能） - takifugu’s blog 実装の手順 ajax処…

非同期通信の実装 非同期通信とは 送信者のデータ送信タイミングと受信者のデータ受信タイミングを合わせずに通信を行う通信方式を指します。 実際の例としては、Twitterのいいね機能など、いいねを押した際に画面の遷移なく押した瞬間にいいねが反映されて…

検索機能の実装 今回も以前に作成したBookers2のアプリケーションに検索機能を実装していく。 今回はGemを使用しない方法で実装していく。 実装する機能 コントローラ searchesコントローラの作成 searchアクション追加（用途：検索を行う） ビュー ログイン…

フォロー・フォロワー機能の実装 以前作成したBookers2というアプリケーションにフォロー・フォロワー機能を実装していく。 実装する機能 コントローラ relationshipsコントローラの作成 createアクションを追加 （用途：フォローを作成） destroyアクション…

いいね機能の実装 今回も以前に作成したBookers2のアプリケーションにいいね機能を実装していく。 表示内容 投稿した本にいいねする機能を追加。 いいねは、一つの本に対して一人一回まで、もう一度押すといいねが消える。 本の一覧機能と本の詳細画面に表示…

コメント機能の実装 今回は、以前に作成したBookers2というアプリケーションにコメント機能を実装していく。 使用するアプリケーションについて参考URL 作成するアプリケーションについて - takifugu’s blog コメント機能の作成 コメント機能を実装していく…

他人のユーザー編集画面、本の編集画面に遷移できないようにする 現状の作成したアプリケーションでは、他のユーザー編集画面、他のユーザーが投稿した本の編集画面に遷移することができてしまいます。 そのため、ログインユーザー以外が編集画面に遷移した…

フラッシュメッセージとは フラッシュメッセージとは、主に投稿した後に一時的に表示されるメッセージのことです。 例えば、ログインした時に、ログインしました。等の表示がされることを指しています。 フラッシュメッセージの実装 今回実装するメッセージ…

バリデーションと権限の実装、エラーメッセージの表示 バリデーションとは バリデーションとは、データベースにデータを保存する前に保存する内容を検証する機能です。 例えば「名前やメールアドレス、パスワード」のデータ保存の時に、入力必須項目に何も入…

レイアウトの作成 Bootstrapの導入が完了しているので、Bootstrapを使用し、レイアウトを整えていきます。 Bootstarpの詳しい解説はしないので、変更コードを記述していきます。 ヘッダーの部分テンプレートレイアウト app/views/layouts/_header.html.erb <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container"> <a class="navbar-brand" href="/"></a></div></nav>…

Bootstrapとは Bootstrapは、Twitter社が開発したCSSの「フレームワーク」です。 Bootstrapにはよく使うスタイルがあらかじめ定義されているので、整ったデザインのページを効率的に作成することができます。 詳細に知りたい方はホームページを確認ください…

部分テンプレートとは アプリ作成時に、複数のビューで共通して表示させたい部分が存在する時、（今回でいえば、サイドバー部分等） その部分を共通のビューファイルとして作成したものが部分テンプレートである。 部分テンプレートを作成する際は、ファイル…

ユーザー情報編集機能の実装 今回はユーザー情報の編集機能を実装していく。最終的な表示が下記のようになる。（今回はレイアウト調整しないため、不恰好な表示となる。） 作業の流れとしては下記の手順で行う。 コントローラのアクションを記述 ルーティン…

ユーザー一覧画面の作成 今回はユーザーの一覧画面を作成していく。 作業の流れとしては下記の手順にて行う。 コントローラの作成 ルーティングの確認 ビューの作成 動作確認 コントローラの作成 ユーザーの一覧画面はusersコントローラのindexアクションに…

ユーザー詳細画面の作成 今回は下記のようなユーザー詳細画面を作成していく。 必要な情報としては、サイドバー（左側）にユーザー情報の作成、前回作成した本の投稿機能を作成、 メインに現在表示しているユーザーの投稿した本を一覧で表示する。 サイドバ…

投稿された本の詳細画面を作成 投稿された本の詳細画面を作成していく。作成するビューはbooks/show.html.erbになる。 コントローラの作成 まずはbooksコントローラのshowアクションを定義していく。 app/controllers/books_controller.rb def show @book = …

本の投稿機能作成 本の投稿機能を作成していく。レイアウトは最後に調整するため、不恰好である。 本の投稿機能は、サイドバーに表示させるため、多くのページに表示することになるが、 ひとまず、booksのindex画面に作成していく。 下記が実装予定の投稿機…

ログアウト機能の作成 前回、ログイン機能を作成したので、今回はログアウト機能を作成していく。 ログアウト機能自体は、deviseの導入とともに実装されているため、ログアウト用のリンクを設定していきます。 動的ヘッダーの作成 ログアウトリンクの設定に…

新規登録画面、ログイン画面の作成 新規登録画面・ログイン画面は、deviseの導入により作成されている。 しかし、今回作成するアプリケーションでは、デフォルトにないnameを登録時、ログイン時に使用する。 それぞれ下記のように設定を変更する。 新規登録…

トップページの作成 トップ画面の作成を行っていく。 トップ画面は、homesコントローラのtopアクションに対応するtop.html.erbにて作成していく。 トップ画面のルーティングを行い、root_pathの設定を行う。aboutのルーティングも設定する。 config/routes.r…

必要なコントローラ、ビューの洗い出し 今回作成するアプリケーションでは、下記のコントローラが必要となる。 ・Usersコントローラ ・Booksコントローラ ・Homesコントローラ それぞれに必要なビューを確認する。 ・Usersコントローラ User一覧画面(index) …

テーブルを設計する 今回作成するアプリケーションに必要なテーブルの設計をする。 今回必要なテーブルとしては、 ユーザーの情報を登録するUsersテーブル。 本の情報を登録するBooksテーブルの２つのテーブルが必要となる。 まずはUsersテーブルについて設…

ActiveStorageについて Amazon S3、Google Cloud Storage、Microsoft Azure Storageなどのクラウドストレージサービスへのファイルのアップロードや、ファイルをActive Recordオブジェクトにアタッチする機能を提供します。Active Storageは、アプリケーショ…