BEM/HTML/CSSまわり

BEMの基本概念とルール

この記事が抜群に分かりやすい https://app.codegrid.net/entry/bem-basic-1

＜HTML編＞

■WebはBlockの集まり alt

■Block：Webを構成するパーツ。Block自体は完全に独立して存在している。 ■Element:Blockが持っている部品。そのElementが属するBlock内でのみ意味を成す。 →検索フォームBlockなら、「入力フィールド」と「ボタン」の2つの部品で構成されている ■Modifier:見た目や動きが少しだけ違うものを作りたい場合に使う。 alt

＜HTML（書き方）＞

■BlockとElementとの区切り→「Block__Element」 ■Block（あるいはElement）とModifierとの区切りと、Modifierのkeyとvalueの区切り→「Block_key_value」 ■BlockやElement名を、2つ以上の単語で表す場合の単語と単語との区切り→「単語-単語」 ■BlockまたはElementとModifierの区切りはハイフン2個（--）

<div class="icons">
  <div class="icons__icon">
    <div class="icons__icon--trash">

＜CSS編（書き方）＞

■ 「.Block名（class名）」 ■ 「＆」はBlock/Element/Modifierのつなぎ目。下のコードのように横一列に並べると分かりやすい。

HTML上 .icons__icon--trash CSS上 .icons&__icon&--trash

.icons {
  height: 60px;
  width: 150px;
  position: absolute;
  top: 0;
  right: 0;

  &__icon {
    height: 60px;
    width: 50px;
    float: left;
    font-size: 20px;
    line-height: 60px;
    text-align: center;

    &--trash {
      color: #444;
    }
    &--cog {
      color: #444;
    }
    &--plus {
      color: #fff;
    }
  }
}

HTML

■formの作り方（例）

alt

フォームを入れる箱を作ってあげて（div class = "posts"） そこにformを入れて作っていく。

    <div class="posts">
      <form>
        <input type="text" class="posts__text-field">
        <button type="submit" class="posts__submit">POST</button>
      </form>
    </div>
.posts {
  height: 60px;
  width: 100%;
  padding: 10px;
  background-color: #666;

  &__text-field {
    height: 40px;
    font-size: 16px;
    padding: 5px;
    width: calc(100% - 100px);
    float: left;
  }

  &__submit {
    height: 40px;
    width: 60px;
    float: left;
    margin-left: 10px;
    font-size: 16px;
  }

CSS

box-sizing →ボックスサイズの算出方法を指定 http://www.htmq.com/css3/box-sizing.shtml

overflow: scroll →内容が収まらなければ、スクロールを表示 http://www.htmq.com/css/overflow.shtml

display →要素の表示形式を決めるもの https://saruwakakun.com/html-css/basic/display

Railsのdeviseで簡単セキュリティ

情報セキュリティの３要素

機密性：アクセスを認められたものだけが、その情報にアクセスできる状態を確保すること

完全性：情報が破壊・改ざん・消去されていない状態を確保すること

可用性：必要なときはいつでもその情報にアクセスできる状態を確保すること

image.png

https://blog-ja.chatwork.com/2018/04/it.html

情報セキュリティが維持できず、何らかの損失が発生する可能性を「リスク」 リスクを現実化させる要因を「脅威」 脅威に対する弱みを「脆弱性」と言う。 image.png

http://www.intellilink.co.jp/security/services/consulting/07.html

システムへの攻撃手法

パスワードクラッキング

IDとパスワードによる認証を行う会員制Webサイトからユーザーのパスワードを抜き出そうとする攻撃

辞書攻撃 →パスワードによく使われる単語をまとめたファイル（辞書）を用意しておいて、それを使ってログインを次々に試してパスワードを当てていく攻撃

ブルートフォース攻撃 →パスワードに使われる文字の全組み合わせをしらみつぶしに試していく方法

パスワードクラッキングを防ぐ方法

①アカウントロック https://qiita.com/inodev/items/eeb26ea9408d4627bf0a

まず、deviseのマイグレーションファイルを調整する

## Lockable
t.integer  :failed_attempts, default: 0, null: false # Only if lock strategy is :failed_attempts
# t.string   :unlock_token # Only if unlock strategy is :email or :both
t.datetime :locked_at

# add_index :users, :unlock_token,         unique: true

User（該当モデル）にdeviseの:lockableを追加。

class User < ActiveRecord::Base
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :trackable, :validatable,
         :lockable
end

deviseの設定ファイルにロック内容を設定する。

config.lock_strategy = :failed_attempts # 一定回数ログインミスでロック
config.unlock_strategy = :time          # ロック解除条件は時間経過のみ
config.maximum_attempts = 10            # 10回連続ミスでロック
config.unlock_in = 1.hour               # 1時間ロック継続
config.last_attempt_warning = false    # あと1回ミスしてロックされる時に警告を出さない

②パスワードの強度を上げる

validate :password_complexity
def password_complexity
  return if password.blank? || password =~ /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,70}$/
  errors.add :password, "パスワードの強度が不足しています。パスワードの長さは8〜70文字とし、大文字と小文字と数字と特殊文字をそれぞれ1文字以上含める必要があります。"
end

#

Dos攻撃

短時間にサーバーが処理しきれないような大量のアクセスを行うことで、サービス停止に陥らせる攻撃

SYN Flood攻撃 →TCPのやりとりにおけるSYNパケットだけを大量に送りつけて、サーバーを接続待ち状態にさせることで、別のユーザーからの新たな接続を確立できなくする攻撃

image.png

http://www.itmedia.co.jp/help/howto/security/j08/02.html

F5 →繰り返しアクセスし続けることで、リクエストへの反応ができないレベルまで、Webサーバーへの負荷を高める攻撃

セッションハイジャック

ログインしてから利用するようなWebシステムの場合、CookieやセッションIDを使って、アクセスしてきたユーザーがログイン済みかどうかを判断している。何らかの手段で第三者がCookieの中身やセッションIDをを取得されると容易に個人情報が取得されてしまう。これがセッションハイジャック。

Cookieの仕組み（https://www.slideshare.net/BurpSuiteJapanUserGr/burpsuitejapanhttp） ↓↓

image.png

セッションハイジャックを防ぐ方法

より安全な方法で、この問題を解決する方法は、セッションの有効期限をサーバー側に保存すること。 https://techracho.bpsinc.jp/hachi8833/2018_10_23/62858

ユーザー認証にdeviseを利用している場合 deviseに組み込まれている「Timeoutableモジュール」を有効にする。このモジュールは、ユーザーセッションが期限切れかどうかの検証を行う。これを利用するには、アプリでユーザーを表すモデルの中でこのモジュールを次のように有効にする必要があります

class User < ActiveRecord::Base
  devise :timeoutable
end

次にdeviseイニシャライザのtimeout_inオプションに必要な値（デフォルトは30分）を設定

# ==> Configuration for :timeoutable
# The time you want to timeout the user session without activity. 
# After this time the user will be asked for credentials again. 
# Default is 30 minutes.
config.timeout_in = 30.minutes

Rubyの基礎（「クラスの継承」の観点からオブジェクト指向を考えてみた）

Rubyって？

まつもとゆきひろ氏（通称Matz）によって開発されたオブジェクト指向スクリプト言語。 2004年にはRubyを使ったWebアプリケーションフレームワークのRuby on Railsが登場して一気に世界に普及

オブジェクト指向って？

オブジェクト指向とは、オブジェクト同士の相互作用として、システムの振る舞いをとらえる考え方 （Wikipedia）

オブジェクト指向プログラミング（Object Oriented Programming: OOP）とは、プログラムを手順ではなくて、モノの作成と操作として見る考え方だ。 https://eng-entrance.com/what-oop

明確な定義は決まってないっぽい。、まだプログラミング学習始めて1ヶ月で理解が浅すぎるが、クラスの継承の観点から自分なりに「全てのデータはObjectクラスのオブジェクト・インスタンスだから」と解釈した。

以下、頭の中を整理してみた。

クラスとメソッド

クラス

クラスは自身で定義した設計図に基づいて生成されたデータ（オブジェクト）を内部に持っており、そのデータを利用するための独自の使用方法（メソッド）を持つことができる。つまり、データの設計図の役割とその使用方法を整理できる便利ツール。クラスは設計図に基づいたデータ（オブジェクト）を作成することができる。全てのデータ（オブジェクト）は何かしらのクラスの設計図に基づいて作られたものなので、必ず何かしらのクラスに属している。

オブジェクト（インスタンス、レシーバ）

クラスに定義された設計図に基づいて作られたデータをオブジェクト（インスタンス、レシーバ）と呼ぶ。同じ設計図（クラス）から作られたデータは同じ属性（データ項目、オブジェクトが持つ情報の種類）やメソッド（使用方法）を持つ。データ内容自体はクラス外で付与するので、作られたデータによってそれぞれ異なるデータ内容を持っている。 呼び方が複数あるが、「インスタンス」はクラスの視点から見た用語で、「レシーバー」はメソッドの視点から見た用語。 「インスタンス」と呼ぶ場合は，（たとえあらわに書いてなくても）必ず何らかのクラスが想定されていて、「○○のインスタンス」として使われる。また、「レシーバー」と呼ぶ場合は必ず何らかのメソッドが想定されていて、そのメソッドが呼び出される対象のオブジェクトを指している。

「オブジェクト」「インスタンス」「レシーバー」はそれぞれ「物（ブツ）」「クラスから生成された具現物」「メソッドの受け手」のようなイメージ

class Review

end
review = Review.new（引数） # Reviewクラスのオブジェクト・インスタンスを生成

image.png

メソッド（使用方法）

使用方法、処理をひとまとめにして名前を付けて、何回も再利用できるようにしたもの。

メソッド（使用方法）の定義

■クラスメソッド：クラス自身（self）が持っているメソッド。

class クラス名
  def self.メソッド名
    # 処理
  end
end

# メソッドの呼び出し
クラス名.メソッド名(引数)

■インスタンスメソッド：クラスから生成されたインスタンスが使用できるメソッド。インスタンスごとの個別の情報（属性値）を使った処理に使用。 例えば「レビューの内容を表示する」メソッドは、各レビューのインスタンスの個別の情報（（属性値）を使用するので、インスタンスメソッドとして定義。

class クラス名
  def メソッド名
    # 処理
  end
end

# メソッドの呼び出し
インスタンス.メソッド名(引数)

変数

■クラス変数（＠＠変数名）：クラス全体で使用できる変数。クラス内であればどこでも使えるのでクラスメソッド、インスタンスメソッドの両方で使うことが出来る。クラスを通して、値が共通の情報に使用。

■インスタンス変数（＠変数名）：共通の属性としてインスタンスに定義できる変数。値は、個々のインスタンスによって別々に設定できる。例えばタイトルや感想は、各レビューごとに内容が異なる。つまり、インスタンスごとに値が異なる情報。よってインスタンス変数を使用

class クラス名
  def write_review
    puts "タイトルを入力してください"
    @title = gets.chomp
    puts "ジャンルを入力してください"
    @genre = gets.chomp
    puts "感想を入力してください"
    @impression = gets.chomp
  end
end

クラスの継承

あるクラスに定義されたメソッドを、別のクラスで利用出来るようにすることを継承と言う。

クラスの継承には、親クラスと子クラスの関係があり、元となるクラスを親クラス（スーパークラス）、親クラスのメソッドを引き継ぎ新しく作成するクラスを子クラス（サブクラス）と呼ぶ。

継承方法
class 子クラス名 < 親クラス名

継承するかどうかのポイントは性質や概念が共通しているか、「is-aの関係」が成立するかどうか 言い換えると「サブクラスはスーパークラスの一種である」、もっと具体的に言うと、「犬は動物の一種である」という関係がスーパークラスとサブクラスの間に成立しているかどうかが継承の判断基準になる。

基本的にRubyの継承は単一継承で、継承できるスーパークラスは1つだけ。 クラスはRubyに標準装備されているものがある。例えば文字列はStringクラス、数値はNumericクラス、配列はArrayクラス、ハッシュはHashクラスである。これらは標準装備されているので、クラスを定義せずとも、オブジェクトやそれに付随したメソッドを使用することができる。

image.png

これら標準装備のクラス（ライブラリ）の継承関係を見ると、トップに君臨しているのがBasicObjectクラス。 これはRuby1.9から導入されたクラスでそれまでは、Objectクラスがトップに君臨していた。図を見ると、一目瞭然だが、Stringクラス、Numericクラス、Arrayクラス、Hashクラスは全てObjectクラスをスーパークラスとして継承したサブクラスである。この図を言い換えると、Rubyにおける全てのデータはObjectクラスのオブジェクト・インスタンスと言える。

だから、Rubyはオブジェクト指向の言語って言うのかな？　と勝手に考えてました。

Webって何なんだろう？

そもそもWebってなに？

Web

日本語で「クモの巣」を意味し、それがWorld Wide（ワールド・ワイド）に広がった、つまり「情報（リンク）と情報（リンク）がまるでクモの巣のように網目状に張り巡らされた世界」

Webとインターネットの違い

インターネットはコンピュータ同士を繋いで提供される情報通信技術の総称で、Webだけでなく電子メールやIP電話・ファイル共有等に利用されるP2Pなど様々なシステムの土台となる仕組み。Webはあくまでインターネットという技術を利用して実現できるシステムの一つ。

Webページ

Webを構成する最小単位となる情報のまとまりのことで、リンク（情報）をたどることなくwebブラウザを使ってスクロールのみで閲覧（表示）できる部分を意味する。 また、個々のウェブページには所在を示すURL（Webアドレス）が存在し、必ず一つのページに対して一つのURLが割り当てられている。

Webの設計思想

REST

RESTはWebのアーキテクチャスタイル。Railsで言うMVCのようなイメージ。

RESTを構成している６つのアーキテクチャスタイル

アーキテクチャスタイル 　　　　　　　　 　　　　　　　内容　　　　　　　　　　　　　　　　　　　　
クライアント/サーバ クライアントがサーバにリクエストを送り、サーバがそれに対してレスポンスをする 　　　　　
ステートレスサーバ サーバ側でアプリケーション状態を持たない。クライアントが一度出した処理を記憶してない
キャッシュ クライアントとサーバの通信回数と量を減らす。クライアントが取得したリソースを使い回し
統一インターフェイス インターフェイスを固定する。（例：HTTPメソッドは８つで統一する）
階層化システム システムを階層に分離する
コードオンデマンド プログラムをクライアントにダウンロードして実行する（例：JavaScriptはインストール不要）

Webを支える3つの技術

①URI

リソース（Web上に存在する名前を持ったありとあらゆる情報）の名前。 URL（データの所在・住所）＋URN（データの名前）の総称

ウェブページの住所（IPアドレス）を、「http://」のあとに予め決められたルールに則って入力された文字列と対応させることで、人間が覚えやすい形式に変換している

【URIの一例】 http://blog.example.jp/entries/1 ↓↓ ■URIスキーム：http ■ホスト名：blog.example.jp ■パス：/entries/1

【絶対パスと相対パス】 絶対パス　http://blog.example.jp/foo/bar 相対パス　/foo/bar

②HTTP

ハイパーテキストの転送用プロトコル。ハイパーテキストだけでなく、動画・音声・PDF等、コンピュータで扱えるデータであれば何でも転送できる。TCP/IPをベースにしている（https://thinkit.co.jp/story/2015/04/30/5800 HTTPでは、クライアントが出したリクエストをサーバで処理してレスポンスを返す。リクエストをサーバに伝える方法がHTTPメソッド（詳細：https://qiita.com/Ryutaro/items/a9e8d18467fe3e04068e

alt

HTTPに関連したエラーが起きたときに役立つかもしれないので、HTTPステータスコードについても簡単に乗せておきます。（詳細：http://www5.plala.or.jp/vaio0630/mail/st_code.htm alt

【HTTPとHTTPSの違い】

HTTP（http://から始まるもの）:セキュリティが脆弱 HTTPS（https://から始まるもの）:通信内容が暗号化されるので、セキュリティ・安全性が高い

参照：https://japan.norton.com/what-is-https-8564

③HTML

HyperText Markup Languageの略称。マークアップ言語でタグで文書の構造を表現するコンピュータ言語。 HTMLはURI等の情報を表現する文書フォーマットで、HTTP（プロトコル・メソッド）を使って、それらの情報を取得したり、発注したりしている。Webページでいう見た目を形作っている。

■タグ：文字（テキスト）に役割を与えてあげる印のようなもの。タグで文や画像等をはさんで記述する。 初心者向けHTML入門：書き方の基本とタグの使い方 (https://saruwakakun.com/html-css/basic/html)

alt alt

HTMLの構成要素

alt

■ヘッダ：様々な設定や（メタ）情報を書く https://webplatform.github.io/docs/guides/the_html_head/ja

■ボディ：文書の内容を書く

HTML4までにあった「ブロックレベル要素とインライン要素」の概念はHTML5では廃止され、 代わりに「カテゴリ」 と 「コンテンツ・モデル/コンテンツカテゴリー」 の概念がHTML5から導入された。 コンテンツ・モデルとは、各要素に内包できる要素の定義。要素の中に入れられる要素は何？というルール。 HTML4 では、インライン要素の中にはブロック要素は入れられないというルールがあったが、 HTML5 ではインライン要素・ブロック要素はなくなったので、コンテンツ・モデル/コンテンツカテゴリーを意識してマークアップ（コーディング）する必要がある。（https://developer.mozilla.org/ja/docs/Web/HTML/Content_categories

ブロックレベル要素とインライン要素の概念

CSSで「display:」として、よく出てくるので、この概念についても理解しておいたほうが良い。 displayプロパティについて：https://saruwakakun.com/html-css/basic/display せっかくなので、、、、 CSSで中央寄せする9つの方法（縦・横にセンタリング）：https://saruwakakun.com/html-css/basic/centering alt http://websurvive.net/html-manual/html-body/ alt https://xov.jp/e/820/

ワイヤーフレームとコンテンツのレイアウト

alt

HTML/CSSの制作については、上記の概念を頭に入れた上で、0から作るのも良いが、大枠の構成を考えてくれているサンプルコードもあるので、活用する方が結果的に早いと思う。使えるものはどんどん使っていいと思う。

http://information-bibouroku.hatenablog.com/entry/2018/02/07/102402 https://qiita.com/Y_ASAMOTO/items/90afe7d24467020c17f0 https://web-camp.io/magazine/archives/4774 https://techacademy.jp/magazine/1487

参考文献：Webを支える技術　HTTP、URI、HTML、そしてREST