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

備考

それぞれ半日ほどしか活動していなかったので、7/19と7/20を合わせた成果です。

内容

  • Webを支える技術でのインプット
    • 110分程度
    • 9.9途中(146ページ)からまで第10章の終わり(173ページ)
    • 第11章から第13章は飛ばします
  • HTML/CSSの基本でのインプット
    • 10分程度
    • 61ページから64ページまで

Webを支える技術のメモ

第9章:HTTPヘッダ

9.9 キャッシュ

  • 条件付きGET
    • 条件付きGETとは?
      • クライアントがExpiresやCache-Controlヘッダを元にキャッシュが利用できないと判断した時に使う
      • サーバ側のリソースがキャッシュから変更されているかを調べるためにリクエストのヘッダにビンとを埋め込む
  • If-Modified-Since
  • If-None-Match
  • If-Modified-SinceとIf-None-Matchの使い分け
    • 正確性を考慮すると、If-None-Matchを優先するべき
    • If-None-Matchが実装されていない場合は、If-Modified-Sinceを使用する
  • Etagの計算方法
    • 更新日時やファイルサイズから計算を行う
    • リソース内容をハッシュするのが実装上では簡単であるが、計算時間を考えると現実的ではない
    • (詳しい内容は後々調べたい)

9.10 持続的接続

  • 従来は?
    • HTTP 1.0では、レスポンスを返すたびにTCPによるコネクションを切っていた
    • コネクション確立は時間がかかる操作であり、リンクの多いWebページで動作が多くなるという問題点
  • 現在では?
    • HTTP 1.0ではKeep-Aliveヘッダにより持続的接続を実現し、HTTP 1.1ではデフォルトの動作となった
    • また、持続的接続により、クライアントはレスポンスを待たずに同じサーバへのリクエストを送れるようになった(パイプライン化)

9.11 そのほかのHTTPヘッダ

  • Content-Disposition
    • ファイル名を指定するヘッダ
    • 例:Content-Disposition: attachment; filename="rest.txt"
  • Slug
    • (今回は扱わない?)

9.12 HTTPヘッダを活用するために

第10章:HTML

注意点

  • まず、コードをサラッと見た時に見たことのない仕様であることが気になったので調べた
  • 調べると、XHTMLの開発は終了しておりHTML5が現行のバージョンである模様
  • 以降では、XHTMLの詳しい仕様などについては触れずにサラッと流すことにする
  • また、少しだけHTMLは知っている

10.1 HTMLとは何か?

  • HTMLとは?
  • 構造化文書のためのマークアップ言語
    • SGML:元々あったマークアップ言語、仕様が複雑
    • 初期のHTML:SGMLをベースに開発
    • XMLSGMLの仕様を簡単にして開発
    • HTML5
      • (この本では仕様策定中)
      • すでに一般に用いられているので、別で勉強しなければならない部分もありそう

10.2 メディアタイプ

  • HTMLのメディアタイプには2通りある
    • text/htmlSGMLベースのHTML
    • application/xhtml+xmlXMLベースのHTML

10.3 拡張子

  • .html.htm.htmlの方が一般的

10.4 XMLの基礎知識

  • XML木構造
    • (確かに、HTMLでも木構造が採用されている)
  • 要素
    • 「開始タグ+内容+終了タグ」により構成される
    • 要素を入れ子にすることで木構造が形成される
    • 空要素
      • 内容を持たない要素のこと
        • <br></br><br/>とすることで省略
        • 現行のHTML5では<br>とスラッシュまで省略可能
        • (この辺りの仕様は後々調べる)
  • 属性
    • 属性名="属性値"という形式で指定することが可能
  • 実体参照文字参照
    • XMLの文書構造を記述するための特別な文字は実体参照という機構により表現
      • 現行のHTML5でも採用されている模様
      • 例:<&lt;
    • またUnicodeの番号で文字を指定すること(文字参照)も可能
      • こちらについても現行のHTML5でも採用されている模様
      • 例:©︎&"169;
    • Markdownエスケープが必要な文字を調べるときと同様、使いたい時に調べれば良さそう
  • コメントアウト
    • <!-- コメント内容 -->としてできる
  • XML宣言
    • HTML5ではいらないっぽい
  • 名前空間
    • 本を見る限りはXMLに固有っぽいけど、わからん
    • 取りあえす飛ばす

10.5 HTMLの構成要素

  • 例がXHTMLなので飛ばし飛ばしやる
  • HTMLの基本的なところを試す前に俯瞰視できる点は良い
  • ヘッダ
    • title:文書のタイトル
    • link:他のリソースへのリンク
    • script:Javascriptなどのクライアントサイドプログラム
    • meta:その他のメタデータ
  • ボディ
    • ブロックレベル要素
      • 文章の段落や見出しなどのある程度大きな塊のことを表現する
      • (どれが標準機能でHTML5にあるのかは知らん)
      • (見たことのあるやつを中心に抜き出した)
      • h1,h2,h3…:見出し
      • dl,ul,ol:リスト
      • div:ブロックレベル要素のグループ化
      • p:段落
      • table:表
      • form:フォーム
    • インライン要素
      • ブロックレベル要素の中に入る要素
      • なんか色々あるっぽいけど、必要な時に調べれば良さそう
  • 共通の属性
    • id属性
      • 文書内で一意なID
      • URIフラグメントで指定したり、CSSでスタイルを指定したりする時に使う
    • class属性
      • その要素が属するクラス
      • その要素が持つ意味を指定し、メタデータとしての役割がある

10.6 リンク

  • <a>要素
    • HTMLで他のページへとリンクするためのアンカータグ
    • <a>要素の内容のことをアンカーテキストとも呼ぶ
  • <link>要素
    • HTMLのヘッダでWebページ同士の関係性を示すために用いる
    • rel属性がリンクの意味を示す(後述)
  • オブジェクトの埋め込み
    • <img>要素:画像を埋め込む際に用いる
    • <object>要素:画像以外の要素を埋め込む際に用いる
    • これについてはまた後々学ぶ
  • フォーム
    • HTMLのフォームではリンク先のURIに対してGETとPOSTを発行することが可能
    • フォームの基本構造
      • <form>要素とその中のフォームコントロール要素からなる
      • <form>要素
        • action属性:ターゲットURIを指定
        • method属性:GETまたはPOSTを指定
        • 指定したメソッドで指定したターゲットURIにフォームを利用した結果を送る
      • フォームコントロール要素
        • テキスト入力<input type="text">ラジオボタン<input type="radio">やセレクトボックス<select>など
        • それぞれのフォームコントロール要素はid属性を持つ
    • フォームによるGET
      • ターゲットURIとフォームへの入力からリンク先のURIを生成する
      • キーワード検索などの際に利用
      • (0.1)<form>要素の属性の指定
          • action属性:http://example.jp/search
          • method属性:GET
      • (0.2)フォームコントロール要素の属性と要素の指定
          • id属性:q
          • フォームコントロール要素の要素:test
      • (1)URIを生成
          • http://example.jp/search?q=testというURIを生成
      • サーバ側で用意したフォームを元にURIを生成している
        • クライアントはそのURIの示すリソースを得たい
    • フォームによるPOST
      • ターゲットURIにフォームへの入力を送信する
      • リソース作成などの際に利用

10.7 リンク関係

  • 前提
    • 人間の場合:アンカーテキストを読むことでリンクの意味を理解できる
    • プログラムの場合:リンクの意味を機械的に判断する機構がHTML側で用意されている
  • rel属性
    • <a>要素と<link>要素はrel属性を持てる
    • rel属性の値を「リンク関係」と呼ぶ
      • リンク元とリンク先のリソースがどのような関係にあるのか
    • 例:外部のCSSにリンクする場合
      • <head>内で、<link rel="stylesheet" href="http://example.jp/base.css/">とする
  • microformats
    • (応用にあたりそうなので、飛ばす)

10.8 ハイパーメディアフォーマットとしてのHTML

  • HTTP×URI×ハイパーメディア→Web
  • 「リンクを辿ることでアプリケーションの状態が遷移すること」を強く意識するべき

第11章:microformats、第12章:Atom、第13章:Atom Publishing Protocol

  • (あまりの馴染みのない技術であることと、現段階では優先順位が低そうなので飛ばします)

HTML/CSSのメモ

Chapter2

2-6 文章を表示しよう

2-7 画像を挿入しよう

  • 画像を表示するタグ
    • 属性の指定
      • src属性:画像の位置を示す
      • alt属性:Webブラウザで読み込めなかった時に画像の代わりに表示するテキスト
    • ファイルパスの指定