AWSのS3で画像を配信

内容 画像の保存にAWSのS3を使用する 基礎知識 S3 →安価で耐久性の高いAWSのクラウドストレージサービス →静的コンテンツの配信やバッチ連携用のファイル置き場、ログ等の出力先、静的ウェブホスティング等で利用する git-secrets →AWSが公開しているツール…

AWS通信

内容 今回は通信について基礎知識のみまとめる 基礎知識 プロトコル →コンピュータ同士がネットワークを利用して通信するために決められた約束事 →メーカーやOSが違うコンピュータ同士が通信するためには同じ仕様でやり取りする必要がある、同じプロトコルを…

AWSで無料のSSL証明書を取得

内容 AWSで無料のSSL証明書を取得する SSL証明書の取得 AWSサービスの中から、Certificate Managerを選択 証明書のプロビジョニングの「今すぐ始める」をクリック パブリック証明書のリクエストを選んで「証明書のリクエスト」をクリック webサイトで利用予…

AWSにDockerの環境を構築

内容 AWSのEC2にDockerの環境を構築する 手順1 EC2インスタンスにssh接続 まずキーを他人に不正利用されないように、自分で読み込みだけ可能な設定にしてから接続 自分には読み込みだけじゃなく全権限を与えたい場合は下記の数字を700にする(キーはむしろ変…

Dockerを用いたローカル環境にWebサーバー(nginx)を設置

内容 前回既存のRailsアプリにDockerを導入したが、Webサーバーも設置することにしたのでまとめる 現状 appコンテナ Ruby 2.6.5 Rails 6.0.4 dbコンテナ MySQL 5.6.51 ここにwebコンテナ(nginx)を設置する(ちなみにappサーバーはpumaを設置) 手順1 必要…

docker-composeによる各種ファイルの変更時

内容 docker-composeによるコンテナ構成後、各種ファイルを変更した時の反映方法についてまとめる 以下のファイルが対象 docker-compose.yaml Dockerfile ソースコード等 docker-compose.ymlの変更時 イメージ:再構築の必要なし コンテナ:再構築の必要あり…

既存のRailsアプリにDockerを導入

内容 すでにRailsアプリを作成している段階でDockerも導入したいと考えたので、アプリ作成後からDockerを導入する方法についてまとめる バージョン Ruby 2.6.5 Rails 6.0.4 MySQL 5.6.51 基礎知識 Dockerfileとは →Docker imageの設計図で、DockerfileからDo…

DBサーバーを構築(AWS、RDS)

内容 AWSでDBサーバーを構築する 基礎知識 RDS →フルマネージドなリレーショナルデータベースのサービス(AWSが運用管理までしてくれる) →オンプレミス(自分でDBサーバーを構築)やOn EC2(EC2上にMySQLをインストールしDBサーバーとして運用)よりも、構…

ドメインを登録(AWS、Route53)

内容 AWSでドメインを登録する 基礎知識 ドメイン →インターネット上に存在するコンピューターやネットワークを識別するための名前(インターネット上の住所) →IPアドレスは数字の列なので非常に覚えにくい、そこでドメイン名を用いてWebサイトにアクセスで…

Webサーバーを構築(AWS、EC2)

内容 EC2でWebサーバーを構築する 基礎知識 EC2(Elastic Compute Cloud) →AWSクラウド上の仮想サーバー →インスタンスとはEC2から立てられたサーバーのこと AMI(Amazon Machine Image) →インスタンス起動に必要な情報が入ったOSのイメージ、サーバーのテ…

ネットワークを構築(AWS)

内容 AWSのネットワークについて 基礎知識 リージョン →AWSの各サービスが提供されている地域のこと 基本アメリカが最先端のサービスを提供するが、日本にいるなら東京を選択するのが良い) アベイラビリティゾーン →独立したデータセンターのこと VPC(Virt…

画像複数投稿機能(swiperの導入)

内容 画像複数投稿機能の実装 画像複数投稿機能 画像単一投稿から複数枚投稿に編集する 1. アソシエーションを変更 has_many_attachedメソッドを用いることで、投稿と画像の間に1対多の関係を設定 app/model/post.rb class Post < ApplicationRecord has_man…

住所検索(ransack)

内容 投稿を住所で絞り込めるように実装する 住所検索機能 1. ransackで関連するモデルのカラムを検索する フォームタグの要素名に、関連するモデル名関連するモデルのカラム名を指定する postモデルに紐づくaddressモデルのカラム名(postal_code)を検索条件…

Formオブジェクトのテストコード

内容 Formオブジェクトパターンのテストコードを実装する テストコード 1. テストのファイルを作成 ターミナル % rails g rspec:model post_address 2. FactoryBotを生成 3. テストコードを記述 4. テストコードを実行 ターミナル % bundle exec rspec spec/…

住所自動入力機能(jpostalとjp_prefectureの導入)

内容 住所登録/検索機能を実装する 住所登録機能 投稿時に住所(都道府県、市区町村)も一緒に登録できるようにする postsテーブルにaddressesテーブルを紐付けるため、Formオブジェクトパターンを使用して投稿時に複数のテーブルに保存できるようにする ち…

railsの日本語化

内容 投稿一覧ページとは別に、トップページを実装する rails日本語化 1. エラーメッセージを日本語化 時刻を日本に合わせたため、ついでにエラーメッセージも日本語化する(application.rbのみ編集済み) 日本語に対応するgemを導入 Gemfile gem 'rails-i18…

コメント機能

内容 投稿詳細ページでコメント機能を実装する コメント機能 1. モデルを作成 Commentモデルを作成し、マイグレーションファイルを編集する ターミナル % rails g model comment db/migrate/20XXXXXXXXXXXX_create_comments.rb t.text :comment t.references…

ページネーション機能(kaminariの導入)

内容 コメント機能の前に、一覧ページでページネーション機能を実装する ページネーション機能 1. kaminariの導入 railsでページネーションを実装するにはkaminariというgemが便利 gemfile gem 'kaminari' ターミナル % bundle install % rails s 2. ビュー…

ソート機能(ransack)

内容 投稿の並び順を変えたいので、ransackを用いてソート機能を実装する ソート機能 1. counter_cultureの導入 投稿をいいねの多い順に並べ替えたいため、postsテーブルにlikes_countというカラムを作りたい Railsにはcounter_cacheという機能がデフォルト…

投稿検索機能(ransackの導入)

内容 コメント機能の前に、投稿検索機能を実装する 投稿検索機能 1. ransackを導入 ransackというgemを用いて検索機能を簡単に実装する gemfile gem 'ransack' ターミナル % bundle install % rails s 2. 検索機能のMVC設定 collectionとmemberを用いて、ル…

いいね機能

内容 いいね機能を投稿一覧表示と詳細表示ページにつける いいね機能 Ajaxを用いて非同期通信でいいね機能を実装する 1. モデルの作成 Likeモデルを作成し、マイグレーションファイルを編集 ターミナル % rails g model like likes.rb t.references :user, n…

投稿削除機能および投稿詳細機能

内容 投稿削除機能および投稿詳細機能の実装を行う 投稿削除機能 1. MVCの設定 ルーティングとビューを編集 コントローラーは以下の通り、削除できたらユーザートップページに遷移するように設定 posts_controller.rb def destroy @post = Post.find(params[…

投稿編集機能

内容 投稿編集機能の実装 投稿編集機能 1. MVCの設定 ルーティングを設定し、ビューは新規投稿のものを使い回し 投稿が編集できたらユーザーのマイページに遷移するようコントローラーを編集する posts_controller.rb def edit @post = Post.find(params[:id…

マイページ実装

内容 マイページを実装し、個人の投稿一覧表示およびユーザー情報編集ができるようにする 個人の投稿一覧表示機能 1. MVCの設定 Userモデルはすでに新規登録機能で実装済みのため、今回はusersコントローラーのみ作成 ターミナル % rails g controller users…

画像投稿機能(ActiveStorageの導入)

内容 画像投稿も実装するため、再度新規投稿機能の見直しから 新規投稿機能の見直し 1. Googleマップを埋め込む 新規投稿の上部にGoogleマップの埋め込み機能を使用して、マップを表示 GoogleMapsAPIの導入も考えているが、余裕があれば追加実装で行う 新規…

ブランチの退避方法(git、github)

内容 構成を変えるため、再度要件定義やDB設計を行う。 現在作業しているブランチを退避 1. 変更を退避 投稿一覧表示機能のブランチで作業中であったが、作業が中途半端でコミットしたくないため、stashを使用し退避させる 退避させた後は、ブランチを切り替…

新規投稿機能および投稿一覧表示機能

内容 新規投稿機能、投稿一覧表示機能の実装を行う。 新規投稿機能の実装の続きから 2. ビュー、CSSの作成 ビューファイルを作成し、編集 ルーティングを設定 postsコントローラーでnewアクション、createアクションの中身を定義 ※その際、params.require.pe…

ユーザー管理機能(Deviseの導入)

内容 Deviseを使用したユーザー管理機能および新規投稿機能の実装を行う。 ユーザー管理機能の実装 1. Deviseを導入 Gemfile # 1番下に記述 gem 'devise' ターミナル % bundle install % rails s 2. Userモデルを作成し、マイグレーションファイルを編集 タ…

アプリ作成の事前準備・DB設計

内容 本日よりオリジナルアプリ作成に入るので、今後の備忘録として実装手順、詰まったところ等をまとめる。 本日の実装 1. 新規アプリケーション作成 ターミナル % cd ~/作成したいディレクトリ名 # railsのバージョンと、-dオプションでMySQLの使用を明示 …

企画・要件定義

内容 アプリ作成のための準備事項を、備忘録としてまとめる。 事前準備内容 1. アプリ案をメモ 思いついたアプリ案をメモアプリにすべて書き込んだ。 難しそうなものからしょーもないものまで、とにかく思いついたらメモ。 今後もこれ作ってみたいな、と思っ…