【Rails】スマホとPCとタブレットで画像表示を変える【DIVE INTO CODE】

更新日:

「DIVE INTO CODE」学習記録 19日目

こんにちは。

19日目。レスポンシブデザインのメディアクエリを試す。

学習内容

【アーキテクチャパターン】

  • アーキテクチャパターンとは
  • POSAについて
  • MVCアーキテクチャの考え方
  • MVC1、MVC2、Push型、Pull型

【コールバック】

  • コールバックとは
  • トランザクションとは
  • コールバックの実装方法(プライベートメソッドでの定義、ブロック形式での定義)
  • コールバッククラスの作成

【複雑なバリデーション】

  • バリデーションをトリガとするメソッド(create、save、update)
  • バリデーションをスキップするメソッド
  • saveメソッドのバリデーションスキップ(save(validate: false))
  • バリデーション検証メソッド(valid?,invalid?)
  • 発生したエラーへのアクセス方法
  • 共通のよく使うバリデーションオプション(:message、:on)
  • 独自バリデーションクラスの設定(ActiveModel::Validatorを継承)

 

感想

今回、rails応用シリーズ突入しました。

ただ、午前中は前回作ったインスタクローンのTOP画像のレスポンシブデザインに挑戦してました。

 

前回までのだとPC画面では綺麗に表示されていたのですが、

スマホやタブレット画面だと画像がうまく表示されず、修正を試みました。

 

「Chromeの検証ツールを使うと修正しやすいよ」

 

というDICメンターさんのアドバイスのもと、

検証ツールでのcssレスポンシブ化に挑戦。

 

今まで「ブラウザはChrome推奨」というお言葉を、めんどくささから無視し続け、

ずっとSafariで「要素の詳細を確認」を使っていました。

 

これでも詳細確認できるしいいや、なんでSafariの検証ツールなんだろ。

って調べもせず、ずっと思ってました。

 

もっと早くから使っておけばよかったです。

Chrome検証ツールめっちゃデザイン修正するのに便利です。

 

まず、「スマホではこう表示されてますよ。」っていうのが簡単に確認できます。

今まではいちいち自分のiPhoneでherokuにあげたURLを開いて確認してました。バカです。

しかも検証ツールだったらiPhoneだけじゃなくGalaxyとかiPadも確認できるし。

 

もう一つはブラウザ上でcssをつけたり消したりできること。

これもめちゃくちゃ便利じゃん。

 

みんなこうやってcss修正してるんだなって。

今更ながら思いました。

 

やり方を学んだところで、TOP画像の修正。

 

今回はメディアクエリとやらを試そう。

このサイトを参考にしました。

 

画像のレスポンシブ化。画面サイズに合わせて読み込む画像を変える方法
※2018/12/23 リンク切れのためリンク削除しました。

 

とりあえず同じようにcss追加したら、うまいこといきました。

 

そもそも自分の場合、background-imageでTOP画挿入していたんですけど、

なんとなくつけてたbackground-attachment: fixed;って言うのが

スマホ表示で画像が綺麗に表示されない原因でした。

 

こういう「何が原因で思うような配置になってないか」も、検証ツール使えばすぐ判明します。

 

とりあえず練習も兼ねてスマホとタブレットとPCでそれぞれ表示を変えてみました。

 

background-attachment: fixed;はPC画面だといい感じのなるので、

大きい画面の時のみ反映させるようにcssで定義できました。

 

P. Y. M.

 

なんかいい感じ。

でも、どことなく普段見ているECサイトと比べると違和感があります。

 

理由はわかってます。

 

 

画面に動きが一切ないから。

 

 

やっぱり違和感のない表示にするには、

JavaScriptと次やるAjaxとやらでHTMLをガンガン動かしていきたい。

 

そしたら最低限必要なフロント面構築の技術はつくんじゃないかなと。

少し燃え尽きていたんですが、画面動かせるようになること考えると、モチベーションが上がります。

 

とは言っても、中身作る技術も大事ですもんね。

偏らないようにします。

 

 

午後はrails応用を少しかじりました。

 

アーキテクチャパターン、コールバック、トランザクション、バリデーション。

 

色々なカタカナについて、それがどう言う意味を持っているか、どう言う概念なのか。

一個一個確認していく作業。

 

「コールバックとは、レコードに何らかの処理をするタイミングで実行されるメソッド。

保存処理とコールバックは1つのトランザクションとして実行される。」

 

こんだけの文章ですがカタカナ色々出てきます。

レコード、、、わかる。

タイミング、、、さすがにわかる。

メソッド、、、わかる。

トランザクション、、、わからない。

 

で、トランザクションを調べる。

しらみ潰しでわからない言葉を処理していく。

 

こういうところまじでめんどくさいですが、

言葉の意味と概念わかってないと、すぐテキストに置いていかれます。

 

ただ全てを処理してから次に進むってやってくとものすごい時間かかります。

と言うより時間かけてもわからないときは意味わからないです。情報系の概念。

 

結局調べるのもほどほどにして次進めていくことがほとんど。

 

今回でいうと、応用編の勉強進めていく中で立ち止まった概念に、

「シンボル」

というものがありました。コールバックのテキストです。

 

「コールバックしたいメソッド名を、シンボルで指定して呼び出す。」

 

model内にprivateメソッドとしてコールバックを定義した場合に、それを呼び出す方法として、

コールバックメソッドを「シンボル」で指定しろ、って言う話みたいだ。

 

 

シンボルがそもそもわからん。

 

 

過去を遡ってみると、最初のruby入門のときに出てきてた概念でした。

確かにシンボルシンボル出てくるけど、わかんねーな。

 

最初勉強したときは意味理解できなくて、

とりあえず曖昧なままスルーした気がします。

 

改めてruby入門のシンボルについてを読み返す。

 

「このサイト見てください、わかりやすいんで。」

 

ってオススメされてるサイトがありました。

テキストにURLが貼ってあったので、それを読むことに。

 

Rubyの文字列とシンボルの違いをキッチリ説明できる人になりたい

実際に見たのがこれなんですけど、

 

あーこれ前見た記憶あるわ。

これ見てもわかんなかったんだよな。

 

って思い出して、

でも改めて読み返してみると、今回はすんなり頭に入りました。

だからシンボルで指定するのか、って腑におちました。

 

そういうもんなんですね。

わかってない概念があると、その概念を含んだ説明がまるで理解できない。

 

最初にこの記事を見たときに、自分はどの概念が理解できてなくて、

何を考えてたのかは覚えてないですし、

逆にその分かってなかった概念を、いつ理解したのかもわからないです。

 

ただただ手を動かし、わからないところをわかろうと調べ続けることで、

自然とわかるようになってたみたいです。

 

自分から情報を求めたときに、その情報は自分の身につく。

って言うのはやっぱり間違いないです。

 

とにかくこれをうまく利用して勉強することで、

最大効率で学習が進められるのかなって。

 

意識高い自己啓発みたいになってきてしまったので、終わりにします。

以上ありがとうございました。

-DIVE INTO CODE
-, , , , ,

Copyright© s u p ? , 2019 All Rights Reserved.