RailsのActive Storageを使って画像アップロード機能の実装
今回は、あるアプリケーションを作成しその中に画像アップロード機能を実装する 流れのアウトプット。
Active Storage
ファイルアップロード機能を簡単に実装できるGemである。
ImageMagick
コマンドラインから画像に処理を加えることができる。
注意 これはGemではなくソフトウェア。
MiniMagick
ImageMagickをrailsで扱えるようにしてくれるGem
ImageProcessing
MiniMagickで提供できない画像サイズを調整する機能
<実装手順>
1 brew install imagemagick
をターミナルで実行する。
2 Gemをインストール
gem 'mini_magick'
と
gem 'image_processing'
をGemファイルに追記した後にターミナルで
bundle install
を実施する。
3 ローカルサーバーの再起動
rails s
4 ActiveStorageのインストール
rails active_storage:install
と
rails db:migrate
をターミナルで行う
5 テーブルに画像ファイルを紐付けする。
app/models/紐付けるテーブルのrubyファイル
にhas_one_attached :ファイル名
と記述
has_one_attachedメソッド
各メソッドとファイルを1対1で紐付けるメソッド
6 コントローラにて画像の保存を許可する
対応しているコントローラにストロングパラメータを定義する
今回はparam
7 画像を表示できるようにする
アップロードしたいHTMLに<%= image_tag モデル名.画像ファイル, class: クラス名 if モデル名.ファイル名.attached? %>を追記
赤文字の部分により画像を表示し、青文字の部分により画像が存在している時のみこのimageタグが読み込まれるように設定する。
image_tag
img要素を生成するrailsのヘルパーメソッド
image_tag(source, option={})
sourceの部分には画像のある場所を記述
optionにはclass名やalt属性を記述
attachedメソッド
レコードにファイルが添付されているかどうかtrueかfalseで返すメソッド
8 画像サイズの調整
<%= image_tag モデル名.画像ファイル.variant(resize: '幅×高さ'), class: クラス名 if モデル名.ファイル名.attached? %>
と追記する。
variantメソッド
ActiveStorageで使用可能。ファイルの表示サイズを指定できる。
モデル.ファイル名.variant(resize: '幅x高さ')
※今回、チャットアプリの実装のため
9 画像かテキストだけのメッセージ送信
画像の有無によって、バリデーションを行うか条件分岐させる。
validatesのunlessオプションを使いメソッド名を指定することでメソッドの返り値がfalseならばバリデーションによる検証を行う。
self.image.attached?という記述によって、画像があればtrue、なければfalseを返す仕組み。
レスポンシブwebデザイン
今日はレスポンシブwebデザインについて
レスポンシブwebデザイン スマホやタブレットpcのように画面幅が違うときに 見た目が変わるように設定する。
Webフォント インターネット上にデータがありサイトを表示する時に それを読み込んで使用するフォント *Googleが提供しているGooglefontsというものもある
設定方法は
@media (maxwidth/min-width 〇〇px){}
というメディアクエリというものを使う。
例えば、、、
max-width 500px 500px以上の時の設定 min-width 500px 500px以下の時の設定とする この時どちらも500pxがメディアクエリにより規定されるスタイル適用の分岐点であるため 500pxがブレイクポイントというらしい。
hashimotosan.hatenablog.jp このサイトに2019年のブレイクポイントが詳しくPDFでまとまっていた。
ユーザー管理機能作成 エラー
今はChat-appというSlackに似たようなものを 実装しています。
本日のエラーコード method_missing': undefined method 'devise' for User (call 'User.connection' to establish a connection):Class (NoMethodError)
deviseでユーザー管理機能を作成の際におきました。
ログインフォームの作成には
1. gemの導入 Gemfileにdeviseを記載 (bundle installをターミナルで行いインストール作業を行った)
2.rails g devise:installを行う
3.モデルの作成 ここではrails g model 〇〇ではなくrails g devise 〇〇を行う (modelの方を使用するとdeviseで管理できなくなる。 ルーティングも自動的に設定してくれる)
4.テーブルの作成 (email,passwordは初期で設定されている。 マイグレーションファイルに必要事項を書き込み rails db:migrateを実行)
5.新規登録とログインのためのリンク設定 (rails routesをみながらパスを設定する。)
6.新規登録とログインのためのビューファイル作成 (rails g devise:viewsを使用)
7.ログインしている時とそうでない時の表示を異なるように設定 (今回はauthenticate_user!メソッドを使用(コントローラーに記述))
8.devise_parameter_sanitizerメソッドを使いストロングパラメーターの設定をコントローラにする (devise_parameter_sanitizerはdeviseでユーザー登録をする場合に使用でき、 「特定のカラムを許容する」メソッド。)
という感じで作っていくのですが
2番のrails g devise installを忘れていた為に 今回のエラー文が出た。
改善方法 ・マイグレーションのロールバック ・マイグレーションファイルの削除 ・モデルの削除 ・ルーティング の記述を消す
参考 qiita.com
でも、なぜかできなくてエラーが出るので 追加でマイグレーションのリセットをした。
そしてまた最初から実行すると成功した。
初めての投稿
今回初めてはてなブログを書きます
エンジニアの卵です。。
今、テックキャンプにて勉強しています。 そちらで学んだこと、資格試験、読んだ本の感想などを書いていきたいなと思っています。
僕は、現在22歳で10月21日には23歳になります 18歳で日本工学院八王子専門学校入学後 友達とやっていた居酒屋のバイトに就職する為に3年生で中退 そのあと地元に戻り飲食店の正社員をしていましたが コロナウイルスの影響により金銭的に厳しくなってきたので転職を考え始め
テックキャンプに入学しました
今3週間目に入っています。