二足のわらじ

〜プログラミングとSEOの勉強をはじめたミーハー26歳のメモ帳〜

【学習67日】chat-spaceのサイト画面の制作⑥【応用29日】

 

 

 

◾︎進捗

見た目は全く変わっていないけれども

一区切りついた🙌

 

昨日まではHTML・CSSで

アプリとは全く別で作っていたけれど

HTMLをHamlに

CSSをSCSSに

変換してアプリに搭載できた！！

 

f:id:vamnasocana:20191030225605p:plain


 

紆余曲折ありながらも無事実装！

明日はアイコン挿入・微調整をして

プルリクエストを送ります。

 

 

◾︎エラー①　頭のインデント

Indenting at the beginning of the document is illegal.

 頭のインデントがおかしいですよ

f:id:vamnasocana:20191030214344p:plain

 

→書き始めに無駄なインデントがあったことが問題。

　超左上詰に変更するとエラー解消！

　書き始めは、左上詰を徹底する。

 

■参考記事：https://teratail.com/questions/138805

 

■ショートカットキーメモ

tab　　　　　　　右方向へのインデント

shift　＋　tab　　左方向へのインデント

 

 

◾︎エラー②　csp_meta_tag

= csp_meta_tag　ってドユコト？ いらなくない？

f:id:vamnasocana:20191030214546p:plain

 

今回は一旦削除することでエラー自体は解消。

 

csp_meta_tag　は、Rails5.2で導入されたメソッドで、

Content Security Policy(CSP)に関するタグを埋め込むために使用する。

 

コンテンツセキュリティポリシー (CSP) は、クロスサイトスクリプティング (XSS) やデータインジェクション攻撃などのような、特定の種類の攻撃を検知し、影響を軽減するために追加できるセキュリティレイヤー。

 

■参考記事：https://developer.mozilla.org/ja/docs/Web/HTTP/CSP

 

 

 

 

◾︎エラー③　変数が定義されていません

f:id:vamnasocana:20191030215041p:plain

変数がうまく行っていないよう

・変数の名前をケアレスミス？

・変数の名前の定義方法が違う？

・変数名で大文字使ったらだめ？

散々試してもエラー…定義されてるじゃないか？！

 

と半狂乱気味になったところ、なんと原因はimportの順番にあったことがわかる

 

app/assets/stylesheets/application.scss

@import "./reset";
@import "font-awesome";
@import "side";
@import "chat";
@import "variable";

これを

@import "./reset";
@import "variable";
@import "font-awesome";
@import "side";
@import "chat";

 こう

変数のvariableを早めにimportすることで解消！

 

 

◾︎エラー④　高さが0

どうしても親要素の高さが０になる

なぜだ？？！！リセットCSSを入れているから必要ないと思っていたのに…

html{
  height:100%;
}
body{
  height:100%;
}

 

SCSSの頭に無理やり上記を入れると高さが復活！よくよく見るとリセットには、height100％の記述がなかった。

 

〜〜〜

今回は復習のため・理解度を確認するために

HTML・CSSで作成した後に、アプリに実装した。

HTML・CSSで作成した際には、

以下をCSSの頭に記載していたため

高さを保っていた。


body{
  height:100%;

  margin:0;
  padding:0;

}

 

 

しかし、今回アプリに記載していたリセットCSS（YUI 3）

のbodyについての記載には、  heighの記載がなかったことが原因

 

Yahoo! (YUI 3) Reset CSS より一部抜粋

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
    margin:0;
    padding:0;
}

 

 

 

【学習65日】chat-spaceのサイト画面の制作④【応用27日】

chat-spaceの画面ができた！！！！やっと！！！亀のごとし！！！

でも できたので良しとする！！！

f:id:vamnasocana:20191028224302p:plain

 

・久々に触るとHTMLやCSSで忘れている部分が多いなと反省…

　定期的に好きなサイトを模写？しながら慣れていこう！

 

・親要素のCSSで「display:flex」に定義するだけで

　その直下の要素が並列になる。

　このユーザー名と日付が変わる部分で利用。

f:id:vamnasocana:20191028224819p:plain

参考記事：https://mamewaza.com/support/blog/howto-use-flex.html

 

・margin auto はあっても

　padding auto はない。

 

・親要素にposition: relative;

　子要素にposition: absolute;

 

参考記事：https://uxmilk.jp/63409

 

 

・cursor: pointer;　でポインター

 

・<LABEL>タグはフォームの構成部品（一行テキストボックス・チェックボックス・ラジオボタン等）と、 その項目名（ラベル）を明確に関連付けるための要素です。 これによりチェックボックスやラジオボタンでは、 関連付けられたテキスト部分をクリックしてもチェックを付けることができるようになります。

 

参考記事：http://www.htmq.com/html/label.shtml

 

・HTMLをマークアップ する時には

　完成したサイトの挙動を意識して作る。

　「ヘッダーフッダーは固定すべきだから

　　ヘッダーフッダーでまとめて作成する」

　というような先入観は捨てる。

　実際に仕事で扱うようであれば

　必ず上司に確認をしてから作業を始める

 

（例）今回のチャットスペースでは、

　最初は、画面左側には何も表示されず

　チャットルームをクリックすると

　チャットの内容が画面左に展開されるため

　上下ではなく、左右で分けて考える。

【学習63日】chat-spaceのサイト画面の制作③【応用25日】

 

■今日の進捗

・header部分の完成！

f:id:vamnasocana:20191026193835p:plain

 

 

■反省

・作り直す羽目になった部分あり

・調べる作業に時間をかけすぎる

 

・padding,marginと要素がごっちゃになる

・要素の大きさ（width:、height:）の指示がないのにpaddingの指示があるのが

　どうしても飲み込めず色々調べていると時間ばかりがすぎてしまった…

　→今どの部分を作成していて、

　　どのようなことにつまづいたのか、

　　解決するためにどのような単語で検索したのか、

　　解決までにどのぐらい時間をかけているのか

　　必ず把握しながら作業を進める！！！

　　（新しいことを知る楽しさや、”わかった納得！”という感情を

　　　優先していると時間がいくらあっても足りない）

　　

・paddingと要素の大きさが合わさって仕様書と違う長さになる

　→まず書き出して、各要素の構成や余白や要素の大きさを

　　整理してからでなければ作り直しの危険性あり！！！要反省！！！

 

・position: absolute;とposition: relative;

・padding,margin

 

・時間をかけすぎたことは要反省だが

　調べた結果理解が深まり、header部分を正しく作成できたので

　今日のところは良しとする！！（よくなくても良しとする！！）

 

【学習62日】chat-spaceのサイト画面の制作②【応用24日】

 

 

■めちゃくちゃ便利！！！

■グーグル拡張機能　ColorPick Eyedropper

https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg

 

Googleクローム上のコンテンツに

スポイトをマウスオーバーすると

そのコンテンツのRBG値がわかる！！

 

■色検索 - 原色大辞典

https://www.colordic.org/search

 

色の名前とカラーコードが一目でわかるWEB色見本
色検索 - 原色大辞典
サイト内の色を検索

 

このサイトを眺めているだけでも楽しい！！

 

■めちゃめちゃ勉強になる！！！

https://webliker.info/50549/

 

結局paddingとmarginどっち使えばいいの？？！

という疑問を丁寧に丁寧に紹介してくれるサイト

感動した！！

 

 

■今日の進捗

過去のカリキュラム等を見ながらそれっぽくはなってきた？気がする！（と言っておこう！）

 

f:id:vamnasocana:20191025224832p:plain

 

■振り返り・反省

・右下のSENDボタンを仕様書通りに設定できたことはよかった

→paddingとmargin　が分かり始めてきた！（遅い）

 

・ただ、右上に来るべきEditボタンが左側にきている…

　headerを親要素にもつブロックのはずなんだけれども何故　　

　→position: relative;　と　position: absolute;　が

　　本当に理解できていないまま進めているからだと思うので

　　帰りの電車の中で復習し、見直す！

【学習60日】chat-spaceのサイト画面の制作①【応用22日】

ついにchat-spaceのビュー画面を作り始めた！！

〜まずは事前準備から〜

 

 

■そういえばそうだったメモ

①

rails g controller コントローラ名

🔛

rails destroy controller コントローラ名

 

 

 

 

■rails g controllerで不要なファイルを作らせないためには？

 

_test,_helper,_coffeeなど今はいらない

→config フォルダにあるapprication.rbに追記をしてから

　rails g controllerを実行する。

　（config フォルダはアプリの基本機能等についての記述を行うところ）

 

config/apprication.rb　に追記

module PairsLike
  class Application < Rails::Application
    # ここから下を追加
    config.generators do |g|
      g.javascripts false
      g.helper false
      g.test_framework false
    end
  end
end

rails g　コマンドで何かを生み出すときに上記を実行する　というニュアンス

【参考】

https://qiita.com/tanakayo/items/5de57f4b89d1ef9c70ba

 

 

 

■事前準備_大体の流れ

①コントローラーを作る

rails g controller コントローラ名

rails g controller messages

 

②アクションを設定する

コントローラファイルにdefで設定

def index 
end

 

③routesを設定する

root to: 'コントローラ名#アクション名'

Rails.application.routes.draw do
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
  root to: 'messages#index'
 
end

 

 

■事前準備_application.cssとapplication.scss

デフォルトでstyle sheetのcssが作られているが

sassを用いて記述していくので

application.cssをapplication.scssへ変える

（中身を決して、名前を変える）

 

■事前準備_ブラウザのCSSの影響を消すために

 

①assets/stylesheetsディレクトリの中に

　パーシャルを作成　_reset.scss

　中身は、リセットファイルYUI 3 等をコピペしよう

 

②リセットcssをインポート

@import "./reset";

 

■事前準備_頻出の装飾はまとめておく　

 

文字の色や背景色など頻出するものは

パーシャル（_variable.scss）にまとめておく

 

 

■事前準備_アイコンを使いたい！＝　Font Awesome 

Font Awesome は外部ライブラリの1つなので

Gem.fileに記載してbundle install

 

①Gem.file追記

gem "font-awesome-rails"

 

 ②ターミナルにて

bundle install

 

③app/assets/stylesheets/application.scss に追記

@import "font-awesome";

 

 

 

 

 

【学習58日】SassとHamlの実践【応用20日】

 

 

 

f:id:vamnasocana:20191022125813p:plain

 

 

f:id:vamnasocana:20191022125821p:plain

 

 

①コントローラー（posts）の

　アクション（index）の結果

　返す画面（HTML）をHamlで書こう！

 

index.html.haml
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
 
.header
  .header__logo
    SNS
.contents
  .contents__message
    follow me!
  =link_to "https://www.facebook.com/", class: "contents__btn" do
    = fa_icon 'facebook'
    Facebook
  =link_to "https://twitter.com/", class: "contents__btn" do
    = fa_icon 'twitter'
    Twitter
  =link_to "https://www.instagram.com/", class: "contents__btn" do
    = fa_icon 'instagram'
    Instagram

 

 

■link_to のメモ！

https://api.rubyonrails.org/v5.0/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to

 

◇link_to の基本

link_to（ リンクを貼る文字列 , リンク先のURL , オプション ）

 

◇link_to こんな書き方もできるよ

link_to ( リンク先のURL , オプション) do

  リンクを貼る文字列

end

 

link_to(body, url, html_options = {})
  # url is a String; you can use URL helpers like
  # posts_path

link_to(body, url_options = {}, html_options = {})
  # url_options, except :method, is passed to url_for

link_to(options = {}, html_options = {}) do
  # name
end

link_to(url, html_options = {}) do
  # name
end

 

 

 ②CSSの親玉（Sassで記載されている）

各パーシャルを呼び出して、HTMLへ反映させる

application.scss

1

2

3

@import "reset";

@import "font-awesome";

@import "posts";

 

 ③コントローラー（posts）の

　アクション（index）の

　結果を返す画面（HTML）で

　使われるパーシャル

（Sassのまとまり_分割管理しているもの）

 

_posts.scss
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
 
.header {
  height: 90px;
  border-bottom:20px solid #ffa500;
  background-color: #ff8c00;
  color: #ffffff;
  &__logo {
    text-align: center;
    font-size: 36px;
    line-height: 90px;
  }
}
 
.contents {
  height: calc(100vh - 90px - 20px);
  width:900px;
  margin: 0 auto;
  background-color: #fffacd;
  &__message{
    padding: 40px;
    color:#ffa500;
    font-size:30px;
    text-align: center;
  }
  &__btn{
    display: block;
    height: 80px;
    width :360px;
    margin:0 auto 50px;
    border-radius: 10px;
    font-size:20px;
    color:#fff;
    text-decoration: none;
    text-align: center;
    line-height: 80px;
    &--icon{
      padding-right:20px;
    }
    &--facebook{
      background-color: #4169e1;
    }
    &--twitter{
      background-color: #00bfff;
    }
    &--instagram{
      background-color: #fc76bf;
    }
  }
}

 

【学習57日】Hamlを自分のために勉強しよう！【応用19日】

Haml とは

Haml（ハムル） とは？

・HTML abstraction markup language　の略
　（abstraction＝抽象化）
・HTMLよりも簡単に書けるビューテンプレートエンジン
・より少ない労力でHTMLを書ける
・CSSにおけるSassのようなもの
・Gemをインストールして使用する



導入方法は？

①rails アプリの中のGem.fileに以下を記入
gem 'haml-rails'
②タームナルで bundle install

RailsアプリにおいてerbからHamlに変換する方法は？

タームナルで以下のコマンドを入力
rails haml:erb2haml
・実行するとapp / viewsフォルダー内のファイルの拡張子が.hamlに切り替わる



基本の記述方法

Haml :: Tutorial

このサイトを和訳しながらまとめる

■erb
<strong> <%= item.title %> </strong>

■Haml
%strong = item.title

■タグ表記

erb ：<タグ名></タグ名>で囲う
Haml：％タグ名　　　　　　　　



■RubyコードをHTMLに出力

erb ：<%= %>で囲う
Haml：＝の右側に表記（囲う必要なし）
　 （＝で結ぶとRubyの文字列と認識される）




属性の追加

■erb
<strong class="code" id="message">Hello, World!</strong>

■Haml
%strong{:class => "code", :id => "message"} Hello, World!



■属性の表記場所

erb ：<タグ名●●●●●●●></タグ名>
Haml：％タグ名｛●●●●●●●｝
（ハッシュの形式で記入　:class => "code"） 　　　




class属性・id属性は省略できる！

■Haml（省略前）
%strong{:class => "code", :id => "message"} Hello, World!

■Haml（省略後）
％strong.code＃message Hello、World！



■classとidはよく使われるので省略

:class =>　　→　.
:id =>　　→　#




divタグは丸々省略できる！

■HTML
<div class='content'>Hello, World!</div>

■Haml（省略前）（本当はこんな記述はない）
%div{:class => "content"} Hello, World!

■Haml（省略後）
.content Hello, World!



■divタグは丸々省略 divタグは非常に一般的であるため、
タグ定義を省略し、
デフォルトで％divにすることができます。





属性もRubyの中から引っ張る場合

■erb
<div class='item' id='item<%= item.id %>'>
  <%= item.body %>
</div>

■Haml
.item{:id => "item#{item.id}"}= item.body

■メモ
・idをRubyの中から引っ張ってくる
（idがその都度変わる）場合は、
　＃id名で省略せずに書く
・#{item.id}　で囲む
（＝で結ぶとRubyの文字列と認識される）

haml に HTML5 のカスタムデータ属性(data-*) を定義する方法 - Qiita





ネスト構造はタブ（スペース）で

■erb
<div id='content'>
  <div class='left column'>
    <h2>Welcome to our site!</h2>
    <p><%= print_information %></p>
  </div>
  <div class="right column">
    <%= render :partial => "sidebar" %>
  </div>
</div>


■Haml
#content
  .left.column
    %h2 Welcome to our site!
    %p= print_information
  .right.column
    = render :partial => "sidebar"


HTMLと違って<>で囲わないので
ネスト構造には気をつける





最後に一言

英語で記載された説明サイトがポップで笑う
This stuff is fun!
Doesn’t that just make you smile?