画像を投稿できるようにする

[ryohakjae114]

• [x] タスクばらし、調査 17:50~

  • [x] 投稿作成から画像を投稿して、データに保存できる ~ 18:15

  • [x] active_storageをreadme読む

  • [x] pictureとphotoの違いについて

    • 「picture(ピクチャー)」：「写真」「絵画」「画像」など幅広い意味を持つ単語 「photo(フォト)」：「写真」を意味する単語
    • どんな写真になるのか分からないから、pictureで良さそう

  • [x] 投稿一覧画面で画像のサムネイルを表示する 11:05~

  • https://railsguides.jp/active_storage_overview.html#%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AB%E6%B7%BB%E4%BB%98%E3%81%99%E3%82%8B 11:05~11:10

  • オリジナルの画像よりもファイルサイズの小さいものが表示されるように

  • 画像が存在するのか、どうかをチェックする方法 ~ 11:20

    .attached?

  • [x] 投稿詳細画面で画像を表示する 10:45~

  • [x] 調査 ~ 11:16

    • [x] resize_to_limitの数値をいじってサイズを確認する
    • [x] variantの名前どうつけるのか
    • [x] どうページによって、サイズを出しわけするか

  • [x] テスト作成 11:32~

  • [x] 調査、タスクばらし

    • [x] テストしたいこと洗い出し ~ 11:35
    • [x] 写真を投稿できること
    • [x] 写真を一覧で300, 300のサイズで表示できること
    • [x] 写真を詳細で500, 500表示できること
    • [x] 調査 11:50~14:30
    • [x] 写真を投稿する方法調べる
      • [x] テスト用の写真をダウンロードして配置 ~ 12:10
      • https://woshidan.hatenadiary.jp/entry/2021/01/03/195432
      • spec/fixtures/files にファイルを置く

        attach_file "ラベル", fixture_file_upload('spec/fixtures/files/ファイル名')

    • [x] 写真が表示されていることの確認方法を調べる 13:40~13:50
      • [x] expect(page).to have_selector("img[src*='test.jpg']")
    • [x] 写真のサイズを確認する方法を調べる ~ 14:20
      • [x] fastimageを使ってサイズを調べる
      • [x] 'fastimage'をインストールする 14:10

        size = FastImage.size('app/assets/images/sample.jpg')
        require 'fastimage'
        expect(size[0]).to eq 600 # widthが600pxであることを期待
        expect(size[1]).to eq 400 # heightが400pxであることを期待

    • [x] テスト内でpostと写真を紐づける方法を調べる ~ 14:30
      • [x] https://railsguides.jp/active_storage_overview.html#file-io-objects%E3%82%92%E3%82%A2%E3%82%BF%E3%83%83%E3%83%81%E3%81%99%E3%82%8B

        picture.attach(io: File.open(fixture_file_upload('spec/fixtures/files/ファイル名')), filename: 'ファイル名.拡張子')

  • [x] 写真以外は添付できないように

  • [x] n+1問題解決

  • [x] 写真以外を添付させないように、ブラウザがでも制限をかける

[ryohakjae114]

投稿作成から画像を投稿して、データに保存できる

タスクばらし

• [ ] 投稿作成から画像を投稿して、データに保存できる 25m

  • [ ] 事前準備 10m

  • [ ] ソフトのインストール

    • [ ] active_storageをインストール

    • [ ] サードパーティソフトウェアのインストール

      • [ ] brew install vips
      • [ ] brew install ffmpeg
      • [ ] brew install poppler

    • [ ] gem "image_processing"をインストール

  • [ ] セットアップ 5m

    • [ ] $ bin/rails active_storage:install
    • [ ] $ bin/rails db:migrate

  • [ ] 写真をPostに添付する 10m

    • [ ] Post.rbに下記を記述

      has_one_attached :picture

    • [ ] 投稿作成画面に写真を挿入するフィールドを設置
    • [ ] post_controllerでpictureパラメータを許可する

• [x] 投稿作成から画像を投稿して、データに保存できる 25m 10:25 ~ 10:58
  • [x] 事前準備 10m
  • [x] ソフトのインストール ~ 10:33
    • [x] サードパーティソフトウェアのインストール
    • [x] brew install vips
    • [x] brew install ffmpeg
    • [x] brew install poppler
    • [x] gem "image_processing"をインストール
  • [x] セットアップ 5m　~ 10:35
    • [x] $ bin/rails active_storage:install
    • [x] $ bin/rails db:migrate
  • [x] 写真をPostに添付する 10m
    • [x] Post.rbに下記を記述

      has_one_attached :picture

    • [x] 投稿作成画面に写真を挿入するフィールドを設置
    • [x] post_controllerでpictureパラメータを許可する
    • [x] トップページに画像を表示して確認する

[ryohakjae114]

投稿一覧画面で画像のサムネイルを表示する

タスクばらし 10m

• [ ] サムネイルバリアントを作成する

  has_one_attached :avatar do |attachable|
  attachable.variant :thumb, resize_to_limit: [100, 100] # サイズはしながら調整
  end

• [ ] 一覧画面でもし画像があれば、画像を表示する

  - if post.picure.attached?
    = image_tag post.picture.variant(:thumb)

• [x] サムネイルバリアントを作成する 13:53~

  has_one_attached :avatar do |attachable|
    attachable.variant :thumb, resize_to_limit: [100, 100] # サイズはしながら調整
  end

• [x] 一覧画面でもし画像があれば、画像を表示する ~ 13:57

  - if post.picure.attached?
    = image_tag post.picture.variant(:thumb)

• [x] デザイン調整 15:55~ [2024-07-11-10:07]
  • [x] mt-auto効かない ~16:25
  • [x] flex要素にして解決
• [x] n+1問題解決 10:35~10:40
  • [x] postsをループするときに、.includes([:picture_attachment])を追加

[ryohakjae114]

投稿詳細画面で画像を表示する

タスクばらし 15m

• [ ] 500✖️500のサイズで表示するvarintを作成(eyecatch)

  • [ ] 投稿詳細画面だった場合、_post.html.hamlで、定義したvariantを表示

    • [ ] _post.html内でpicture_type変数を定義

      picture_type ||= :thum

• [ ] show.html内でpicture_type: :eyecatchを渡す
• [ ] 画像以外添付させないようにファイルの拡張子に制限をかける

• [x] 500✖️500のサイズで表示するvarintを作成(eyecatch)
• [x] 投稿詳細画面だった場合、_post.html.hamlで、定義したvariantを表示
  • [x] _post.html内でpicture_type変数を定義

    picture_type ||= :thum

  • [x] show.html内でpicture_type: :eyecatchを渡す

[ryohakjae114]

テスト作成

タスクばらし

• [ ] 写真を投稿できること(posts_specの'投稿できること'の中で) 20m

  • [ ] 写真を投稿する 10m
  • [ ] テスト用の写真をプロジェクトに置く
  • [ ] 写真を投稿

    attach_file "ラベル", fixture_file_upload('spec/fixtures/files/ファイル名')

  • [ ] 一覧画面で300pxの正方形サイズで表示されてること 10m

    expect(page).to have_selector("img[src*='test.jpg']")

  • [ ] fastimageをプロジェクトにインストール

    
    require 'fastimage'

  size = FastImage.size('app/assets/images/sample.jpg') expect(size[0]).to eq 300 # widthが600pxであることを期待 expect(size[1]).to eq 300 # heightが400pxであることを期待

• [ ] 写真を詳細で500, 500表示できること(posts_specの'投稿詳細ページで500pxの正方形で表示されること') 10m
  • [ ] 写真を添付した投稿をfactorybotで作成

    post.picture.attach(io: File.open(fixture_file_upload('spec/fixtures/files/ファイル名')), filename: 'ファイル名.拡張子')

  • [ ] 投稿詳細ページに行き、写真が500pxの正方形で表示されていることを確認

• [x] 写真を投稿できること(posts_specの'投稿できること'の中で) 20m 14:42~

  • [x] 写真を投稿する 10m ~ 14:51
  • [x] テスト用の写真をプロジェクトに置く

  • [x] 写真を投稿 ~ 15:10

    attach_file "ラベル", fixture_file('ファイル名')

    - [ ] 一覧画面で300pxの正方形サイズで表示されてること 10m

    expect(page).to have_selector("img[src*='test.jpg']")

    • [x] fastimageをプロジェクトにインストール ~ 15:15
    • [ ] 画面のimageのurlを相対パスで取得する ~16:10

      ActiveStorage::Blob.service.send(:path_for, Post.last.picture.blob.key

    • [ ] サイズが合っているかどうか確認

      
      require 'fastimage'

    size = FastImage.size('app/assets/images/sample.jpg') expect(size[0]).to eq 300 # widthが600pxであることを期待 expect(size[1]).to eq 300 # heightが400pxであることを期待

• [x] 表示サイズを確認しようとしてたところを戻す 10m
• [x] imageタグの属性を確認して、画像のvariantの指定が正しいかチェックする 15m
  • [x] imageタグのpicture_type属性に、picture_type変数の値を指定 5m
  • [x] 一覧と詳細のテストで、画像のpicture_type属性の値をチェックする 10m

[ryohakjae114]

https://github.com/ryohakjae114/miniblog/pull/60

[ryohakjae114]

写真以外は添付できないように

• [x] 調査、タスクばらし 11:00~
  • [x] ドキュメント読む ~ 11:05
  • [x] tajiのgithub
  • [x] heartin読む ~ 11:10
    • carrierwaveだった
  • [x] 記事を探す ~ 11:15
    • [x] formで制限する方法もあったけど、curlで送られた時の対応ができなくなる
    • https://til.toshimaru.net/2021-07-26
  • [x] ファイルの拡張子の取得方法　~ 11:20
    • [x] Post.last.picture.content_type
  • [x] タスクばらし ~ 11:27
  • [x] タスクばらし
• [x] post.rbでpicture_typeメソッドを作成し、バリデーションする 10m

  def allowed_picture_content_type
    unelss picture.content_type.in?(%('image/heic image/jpeg image/png'))
      error.add(~)
    end
  end

実装

• [x] タスクばらし
  • [x] post.rbでpicture_typeメソッドを作成し、バリデーションする 10m 11:30~11:40

    def allowed_picture_content_type
    unelss picture.content_type.in?(%('image/heic image/jpeg image/png'))
    error.add(~)
    end
    end

  • [x] 写真がなかったときはvalidationをチェックする ~ 11:50