開発初心者の開発日記~22日目~

備考

下記は7/17の内容です。

内容

  • Webを支える技術でのインプット
    • 110分程度
    • 9.3(127ページ)から9.9途中(145ページ)まで
  • HTML/CSSの基本でのインプット
    • 40分程度
    • 28ページから60ページまで

Webを支える技術のメモ

第9章:HTTPヘッダ

9.3 日時

  • 値に日時を持つヘッダ
    • Dateの場合:Date: Tue, 06 Jul 2010 03:21:05 GMT
    • サマータイムなどの複雑な場合を避けるためにGMTのみをHTTPでは採用
    • 例:Date(メッセージの生成日時)、レスポンスのExpires(リソースの最終更新日時)、など

9.4 MIMEメディアタイプ

  • MIME(Multipurpose Internet Mail Extensions)メディアタイプとは?
    • メッセージでやり取りするリソースの表現の種類を指定する
    • 電子メールから借りてきた仕様で、HTTPではそこにいくつか追加している
    • MIMEメディアタイプは以降ではメディアタイプと略記
  • Content-Type - メディアタイプを指定する
    • 例:Content-Type: application/xhtml+xml; charset=utf-8
      • application/xhtml+xml:メディアタイプ
        • /から左をタイプ、/から右をサブタイプ、と呼ぶ
        • タイプは増やせずサブタイプは増やせる
        • +xmlは接尾辞でXMLのメディアタイプには必ずつく
    • タイプの例
      • text(人間が読んで理解できるテキスト)、image,audio,video(画像,音声,映像,データ)、application(その他のデータ)、など
    • サブタイプの例(そのほかにも様々)
      • text/plain:プレーンテキスト
      • text/csvCSV形式のテキスト
      • text/html:HTML文書
      • image/jpegJPEG画像
      • application/xhtml+xmlXHTML文書
      • application/atom+xmlAtom文書
      • application/javascriptJavaScript
      • application/msword:Word文書
  • charsetパラメータ - 文字エンコーディングの指定
    • メディアタイプはcharsetパラメータを持つことができる
    • charsetパラメータは省略可能だが、textタイプの場合は注意
    • textタイプの場合はデフォルトがISO 8859-1なので、日本語の文字化けを引き起こす可能性
    • また、XMLのように文書本体で文字エンコーディングを宣言できる場合もcharsetパラメータが優先されるので、注意が必要。
    • 問題の解決策
      • (1)textタイプではcharsetパラメータを省略しない
      • (2)XML文書の場合はapplication/xmlなどを使う

9.5 言語タグ

  • Content-Languageヘッダ
    • リソースの自然言語を指定するヘッダ
    • 例:Content-Language: ja-JP
      • 左側:ISO639の定義する言語コード
        • ISO639;言語の略号を規定した国際規格
        • 例:「ja」、「en」
      • 右側:ISO3166の定義する地域コード
        • ISO3166:国や地域の略号を規定した国際規格
        • 例:「JP」、「US」、「GB」

9.6 コンテントネゴシエーション

  • コンテントネゴシエーションとは?
  • Accept
    • クライアントが処理できるメディアタイプをサーバに伝える場合
    • 例:Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
      • qパラメータ(qvalue)
        • そのメディアタイプの優先順位を表す
        • 小数点以下三桁以内の0~1までの数値で、数値の大きい方を優先する
        • ここでは、text/htmlapplication/xhtml+xmlがデフォルトの1、application/xmlが0.9、それ以外の全てのメディアタイプ(*/*)が0.8、となる。
    • ただし、クライアントのAcceptヘッダで指定したメディアタイプにサーバが対応していない場合、406 not foundが返る
  • Accept-Charset
  • Accept-Language
    • クライアントが処理できる言語をサーバに伝える場合
    • 例:Accept-Language: ja,en-us;q=0.7,en;q=0.3
      • 日本語が1、アメリカ英語が0.7、地域を指定しない英語が0.3、の優先度

9.7 Content-Lengthとチャンク転送

  • Content-Length
    • メッセージのボディの長さを指定するヘッダで長さをバイトで表現する
      • ボディを持っている場合は基本的に指定するがこの本では省略
    • 例:Content-Length: 5536
  • チャンク転送
    • 動的に画像を生成する場合などでは、ファイルサイズの決定までレスポンスが返せないと応答性能の劣化につながる
    • Trandfer-Encodingヘッダ
      • 例:Trandfer-Encoding: chunked
      • chunkedを指定することで、少しずつ転送することが可能になる
    • 例:https://qiita.com/DaikiSuyama/private/679201fd8d4131d06aa0

9.8 認証

  • 前提
  • Basic認証
    • ユーザ名とパスワードによる認証方式
    • ユーザ名とパスワードをAuthorizationヘッダに入れてリクエストごと送信する
    • 例:Authorization: Basic dXNlcjpwYXNzd29yZA
      • 認証方式(Basic)に続けて、ユーザ名とパスワードを:で連結しBase64エンコードした文字列
      • 上記ではuser:passwordエンコードしている
      • ただし、このエンコーディングは簡単にデコード可能であり、パスワードやユーザ名が平文としてネット上で流れることになる
      • つまり、Basic認証を使う際は、SSLTLSを使ってHTTPS通信することで、通信路上で暗号化する日梅雨がある
  • HTTPSとは?
    • HTTPとSSL/TLSを組み合わせた通信の総称
    • 特徴
      • 共通鍵暗号に基づく暗号化
      • 公開鍵証明書に基づき認証機能
      • ハッシュ用共通鍵に基づく改ざん検知機能
  • Digest認証
    • (今回は少ししか触れない)
    • Basic認証よりも安全性の高い認証方式
    • 最初に認証情報なしでリクエストを送信し、受け取った401 UnauthorizedのレスポンスのWWW-Authenticateヘッダの値を元に再度認証を行う
    • この時、nonceと呼ばれるリクエストごとに変化する文字列を用いることでそのリクエストの有効期間を短くし、ハッシュ値を用いることで平文でパスワードやユーザ名を流すことを避ける
    • 利点
      • パスワードを盗まれる可能性がない
      • パスワードそのものをサーバに預けなくても良い
    • 欠点
      • メッセージは平文でネットワーク上を流れる
        • HTTPSを利用すると良い
      • サーバからのnoceが必要なので、リクエストの度に401 Unauthorizedのレスポンスを受けとる必要がある
  • WSSE認証
    • (今回は少ししか触れない)
    • HTTP/1.1の標準外の認証方式(WS-Security Extension)
    • Digest認証と同様の認証方式
  • OpenIDとOAuth
    • ここまでの認証での課題
      • Webサービスごとでアカウントの作成とログインが必要(1)
      • Webサービス間でプライベートな情報(写真など)の共有が不可能(2)
    • OpenID:(1)を解決
      • あるサービスAのアカウントを利用してサービスBにログインすることが可能
      • AをIdentity Provider(IdP)、BをService Provider(SP)と呼ぶ
      • これにより、シングルサインオンを実現
    • OAuth:(2)を解決
      • あるサービスAの情報をサービスBへと委譲することができる
      • AをService Provider(SP)、BをConsumerと呼ぶ
      • SPからConsumerへの委譲をユーザが許可することでデータのやり取りが可能に

9.9 キャッシュ

  • 前提
    • サーバから取得したリソースをローカルストレージに蓄積して再利用する手法のこと
    • ローカルストレージにキャッシュしたデータのこともキャッシュと呼ぶ
    • そのキャッシュが有効な間、クライアントが再度そのリソースにアクセスするときに再利用する
  • キャッシュ用ヘッダ
    • あるリソースがキャッシュ可能であるかはリクエスト時のサーバからのレスポンスのヘッダから確認できる
    • Pragma
      • 例:Pragma: no-cache
      • no-cacheのみを指定できる
      • この時、リソースをキャッシュしてはならないことを示す
    • Expires
      • 例:Expires: Thu, 11 May 2010 16:00:00 GMT
      • キャッシュの有効期限を示すヘッダ
      • この有効期限内でない場合は再度のサーバへのアクセスが必要
      • 最長で1年後の日時を入れることを仕様では推奨
    • Cache-Control
      • 複雑な指定が可能なヘッダで前述のヘッダの機能は代用可能
      • 例:Pragma: no-cacheCache-Control: no-cache
      • また、相対時間で有効期限を設定することも可能
        • 例:Cache-Control: max-age: 86400
          • 秒数指定なので、上記は24時間
      • 他にも指定できるが、ここでは割愛

HTML/CSSの基本のメモ

Chapter 1

1-6 ブラウザの種類

  • (Web)ブラウザ:サーバからのWebページの情報を快適に閲覧するためのソフトウェア
  • 例:Google ChromeSafariFirefox、など
  • ブラウザごとに表示が異なるので、標準のブラウザを決めておくと良い

1-7 制作の流れ

  • 企画の策定
    • 目標の設定
      • メインゴールとそれを目指すためのサブゴール
    • ターゲットユーザの決定
      • 具体的であるほどデザインの方向性が固まりやすい
  • サイトマップの作成
    • ページのグループ分け
      • 重要度や抽象度を元に階層構造で書き出す
      • 階層は深くしすぎない
    • ページの優先順位
      • 優先度の高いページはナビゲーションメニューにて配置するなど工夫する
  • ワイヤフレームを作る
    • 全ページのレイアウトの骨組み(ワイヤフレーム)を考える
    • コンテンツの優先順位
      • ページ内のコンテンツの優先順位をつける
      • 優先順位を元にレイアウトを考える
      • ページを開いた時に見える範囲(ファーストビュー)が特に重要
    • 視線の動きを考慮に入れる
      • ユーザの視線は上から下で左から右
      • 優先順位の高いコンテンツは、上部、左側にできるだけ配置する
    • モバイルサイトでも作成しておく
  • デザインする
    • Webページに表示されるものと変わらないデザイン(デザインカンプ)を作る
    • 思いつかない場合はギャラリーサイトを見ると良い
  • コーディングする
    • HTML、CSS、画像ファイル、をそれぞれ用意する
  • Web上に公開する
    • サーバの準備
    • ドメインの取得
    • ファイルのアップロード

1-8 制作を始める前に

  • テキストエディタをインストールする
    • 普段使いのVSCodeを使う予定
  • ブラウザをインストールする
    • 普段使いのChromeを使う予定
  • グラフィックツールを確認する
    • 無料が良いので、Adobe XD

Chapter 2

2-1 HTMLとは

  • Hyper Text Markup Language
  • 文章を特定のタグで囲んで書くことで意味づけを行う

2-2 HTMLファイルを作ろう

  • 例:https://github.com/daikisuyama/HTML_CSS_training/blob/master/51.html
  • ブラウザから上記のパスを打ち込むことで開ける
  • ファイル名のルール
    • 拡張子をつける
    • 日本語は使えない
    • 使えない記号がある(\,:,,,",<,|,*,など)
    • 空白は使えない
    • 小文字に統一する
    • 初めのページにはindex.htmlにして保存するのが基本
      • http://example.com/index.htmlの場合はhttp://example.com/としても同じページが開かれる

2-3 HTMLファイルの骨組み

  • <!doctype html>とは
    • どのバージョンでどの仕様のHTMLであるかを示す
  • <html>~</html>とは
    • HTMLの文書であることを示す
  • <head>~>/head>とは
    • ページのタイトルや説明文などのメタ情報を示す
  • <meta charset="UTF-8>"とは
  • <title>~</title>とは
    • ページのタイトルを示す
    • ブラウザのタブやブクマした時のタイトルとして表示されるもの
  • <meta name="description" content="~">とは
    • ページについての説明文を書く
    • 検索エンジンでページタイトルとともに表示される部分
  • <body>~</body>とは
    • HTMLの本体となる部分
    • この部分がブラウザ上で表示される

2-4 HTMLの基本の書き方

  • HTMLの基本文法とタグ
    • <〇〇>:開始タグ
    • </〇〇>:終了タグ
    • 場合によっては終了タグのないものもある
    • タグは負荷情報として属性を持つものもある
  • タグを書くときのルール
    • 半角英数字で書く
    • 小文字に統一する

2-5 見出しをつけよう