yujiroのプログラミング

勉強内容をアウトプットし、サボらないようにする為のブログ

<DAY118>アソシエーションのデーター取得について

●学習日数 118日

●学習時間(本日)11時間
●累計学習時間 596.5時間

●一日あたりの平均学習時間 5.05時間

問題となったケース

  • 外部キーを元に子データーの要素を取得する場合

結論。eachの中にeachをかける必要がある。

テーブルの概要

  • 親 itemsテーブル
  • 子 item_imagesテーブル

imageカラムを持つ。

1アイテムに何枚かの写真がひもづく事から1対多の関係である。

定義したコード

itemsコントローラーにて以下のように定義する

@ items = Item.all 

表示したいviewに以下のように表示してみた
haml

= @items.each do |item|
  item.item_images.image

このように定義するとnoメソッドエラーとなる。

流れの整理

重要なのは、どのような形でデーターが格納されているのかを整理する事

確認その1

モデル通じてデータを取得した場合。
こんな形でデーターが入っています。

[
    #<Item id: 1, name: "あ", created_at: "2019-06-10 08:21:50", updated_at: "2019-06-10 08:21:50"
  ,#<Item id: 2, name: "い", created_at: "2019-06-10 08:21:50", updated_at: "2019-06-10 08:21:50",
]

確認その2

アソシエーションを用いて、データーを取得した場合はどうか?
eachにて配列データーを1づつ取り出して、表示する.

具体的には、item.item_images.imageとする場合
配列から取り出しているのに、配列になっている!

 [#<ItemImage:0x00007fefe401b068 ←これが、配列で取り出された情報(なぜか配列に格納)

#これ以下がアソシエーションで取得した情報
  id: 1,
  image: "https://notissary.net/media/2018/10/genbaneko-e1540364459576.jpg",
  item_id: 21,
  created_at: Mon, 17 Jun 2019 08:35:55 UTC +00:00,
  updated_at: Mon, 17 Jun 2019 08:35:55 UTC +00:00>]

確認その3

配列を解除してため、もう一度eachをかけてあげる。
他にもやり方がありそうだが、今はこの形しか思いついていない。
この形で子要素のデータが取得できた。

@items.each do |item|
  item.item_images.each do |image|
  image.image
  end
end

<DAY115-116>学習忘備録

●学習日数 115日

●学習時間(本日)7時間
●累計学習時間 578.5時間

●一日あたりの平均学習時間 4.92時間



共同作業内容

新規登録画面のマークアップ

3ページ分



DAY116

完全オフでパソコン触らず

<DAY114>hamlとsassの基礎文法を学び直す

学習状況

●学習日数 114日

●学習時間(本日)10時間
●累計学習時間 561.5時間

●一日あたりの平均学習時間 4.92時間

サーバーサイドのsessionを用いたログイン機能実装について、

必要なモデルの追加など、詰まってしまったから、先にフロントを作る事にした。

hamlにて画像を押すと、リンクする形をとりたい

このようにすれば対応する。

%div 出品
= link_to new_item_path  do
  .material-icons.camera-icon photo_camera

並列要素にscssを当てる場合

並列箇所は一度閉じる。

.content{
  color: red;
  &__item{
    color: bule;
  }
  &__theme{
    color: aqua;
  }
}.content{
  color: red;
  &__item{
    color: bule;
  }
  &__theme{
    color: aqua;
  }
}

hamlの記号について

htmlからhamlに変換ソフトに頼っていたから、理解が曖昧だった。

%header <header></header>

.content <div class="content"></div>

<DAY113>Google reCPATCHAの実装 rails gem

学習状況

●学習日数 113日

●学習時間(本日)7.5時間 ●累計学習時間 551.5時間

●一日あたりの平均学習時間 4.85時間

googleサイトからAPIのKEYを取得

参考文献を参照 登録してサイトキーとシークレットキーが発行される

「ppppppppppCAPTCHA」が登録されました。
このサイトキーは、ユーザーに表示するサイトの HTML コードで使用します。
6LdA¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥

このシークレット キーは、サイトと reCAPTCHA 間の通信で使用します。
6LdAY6g##################################

gemの導入

gem "recaptcha"

.envファイルを作成

場所はルートディレクトリ以下です。(ディレクトリの最上位) こちらに環境変数として取得したKEYを保存します。

RECAPTCHA_SITE_KEY = ' 6LdAY6gUiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii '
RECAPTCHA_SECRET_KEY = ' 6LdAY6gUppppppppppp'

'config/initializers/recaptcha.rb'にファイルを作成 以下を書き込む

Recaptcha.configure do |config|
  config.site_key  = ENV['RECAPTCHA_SITE_KEY']
  config.secret_key = ENV['RECAPTCHA_SECRET_KEY']
end

表示させたいviewに表示

<%= recaptcha_tags %>


参考文献
[https://liapoc.com/recaptcha.html:title]

<DAY112>学習忘備録 devise新規登録時のエラーについて

学習状況

●学習日数 112日

●学習時間(本日)10時間
●累計学習時間 544.0時間

●一日あたりの平均学習時間 4.85時間

新規登録後、ルートエラーになる。

似たような事例は数あった。

teratail.com


現状の観測範囲で、とりあえずしっくりきたのが
routeを足す事。


f:id:yujiro0320:20190612123757p:plain


routeエラーなので、ルートを正しくすると解消する。