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

内容

  • Webを支える技術でのインプット
    • 30分程度
    • 275ページから282ページ
  • HTML/CSSの基本でのインプット
    • 70分程度
    • 104ページから129ページ
  • Progate(JavaScriptコース)でのインプット

Webを支える技術のメモ

第16章:書き込み可能なWebサービスの設計

16.3 バッチ処理

  • 前提
    • 大量のリソースの作成や更新を行う場合、サーバへの接続回数の問題でパフォーマンスが落ちる
    • この場合はリソースの処理を一括で扱えるようにWebサービスを工夫する必要がある
  • バッチ処理のリクエス
    • JSONなどの形式で一括でリクエストを行う
  • バッチ処理のレスポンス
    • バッチ処理中にエラーが起きると、単純な実装では一部の処理のみが成功した状態となる
    • 対応方法
      • (1)トランザクション化:次節
      • (2)それぞれのリソースの処理の可否をクライアントに伝える
        • (2.1)WebDAVにおける207 Multi-Status<D:multistatus>要素を用いる
        • (2.2)200 OKと独自のフォーマットを組み合わせる
          • WebDAV仕様に結びついた前者とは別に自身で定義したフォーマットで返すことも可能

16.4 トランザクション

  • 前提
    • ただの更新であれば先ほどのような対応でも問題ない
    • 更新が複数のリソースで同時に成功または失敗する必要がある場合は難しい
      • 例;銀行口座で5万円振り込む場合→振込先と振り込み元のいずれも更新が必要
      • これを保証するのがトランザクション
  • トランザクションリソース
    • トランザクション情報を保存するリソース
    • リソースの状態を保持するので、アプリケーション状態を持っているわけではない→ステートレス性を保つ
    • 更新や削除などを行いたいリソースの状態を複数保持できるので、一つずつ操作を行うことが可能
  • トランザクションリソース以外の解決方法

HTML/CSSの基本でのメモ

Chapter3

3-6 Webフォントを使おう

  • Webフォントとは?
    • デザインの製作者が必ず表示させたいフォントは画像で表示してきた
    • 現在は"Webフォント"と呼ばれる技術が用いられる
    • Webサーバ上にあるフォントファイルを用いて表示を行う
  • Webフォントを使おう
    • Google Fonts:無料のWebフォントサービス
    • (1)Google Fontsで選びたいフォントをselectする
    • (2)画面右側に出てくるEmbed<link><head>内に記述する
    • (3)フォントを適用させたい要素への記述をCSS内で行う(Embedのものをコピペ)
    • 例:HTMLファイルCSSファイル

3-7 色をつけよう

  • 色の指定方法
    • カラーコードで指定:16進数(例:#ffffffで白色を指定)
    • RGB値で指定:rgb(赤の数値,緑の数値,青の数値)(例:rgb(255,255,255)で白色を指定)
    • 色を調べる方法:カラーピッカーを利用する
    • 色の名前での指定:redblueなど、わかりやすいが色のバリエーションが少ない
  • colorプロパティ
    • 文字に色をつけるためのプロパティ
    • 値:カラーコードorRGB値or色名
      • 3桁の短いカラーコードを使うこともある
      • RGB値に透明度を加えたRGBA値を使うこともある
  • background-colorプロパティ
    • 背景に色をつけるためのプロパティ
    • 値:colorプロパティと同じ
  • 例:HTMLファイルCSSファイル
  • 上手に配色しよう
    • 色相と明度と彩度の三つからなる
      • 色相:色の違い(赤、青、など)
      • 明度:色の明るさの度合い
      • 彩度:色の鮮やかさの度合い
    • 色の持つ印象(色と温度)
      • 暖色(赤系)、寒色(青系)、中性色(緑系や紫系など)、無彩色(白系や黒系など)
    • 色のイメージ
      • それぞれの色はイメージを持っている(赤なら"情熱"など)
    • 色のトーン
      • 明度と彩度を組み合わせた概念
      • 色から受ける印象が変わる
      • 本にトーンの一覧あり
    • 色の組み合わせを考える(色の比率)
      • ベースカラー:70%程度、背景色などで用いるシンプルな色
      • メインカラー:25%程度、全体的な雰囲気を印象づける大事な色
      • アクセントカラー:5%程度、メリハリをつけるための色
  • 各色をメインで使った参考サイト
    • 実際に作成する際に参考にする

3-8 背景を彩ろう

  • background-imageプロパティ
    • 背景に画像を設置するプロパティ
    • 値:url(画像ファイル)or none(画像ファイルを使用しない)
    • 例:HTMLファイルCSSファイル
  • background-repeatプロパティ
  • background-sizeプロパティ
    • 背景画像の大きさを指示するプロパティ
    • 値:(単位付きの)数値 or キーワード(cover,contain)
      • cover
        • 画像の縦横比を保持したまま表示領域を埋め尽くすように背景画像を表示
        • 表示領域より画像が大きい場合は画像が見切れる
      • contain
        • 画像の縦横比を保持したまま画像が全て表示されるように背景画像を表示
        • 表示領域の方が画像より大きい場合は余白ができる
    • 例:HTMLファイルCSSファイル
  • background-positionプロパティ
    • 背景画像の表示する開始位置を指定するプロパティ
    • 値:(単位付きの)数値 or キーワード(横方向と縦方向を指定)
      • キーワード
        • 横方向:left,center,right
        • 縦方向:top,center,bottom
      • 数字:左上の位置
    • 例:HTMLファイルCSSファイル
  • backgroundプロパティ
    • 背景に関連するプロパティをまとめて指定するプロパティ
    • 指定していないものは初期値になる
    • 注意点:background-sizeの値はbackground-positionの直後に/で区切る必要がある!
    • 詳しくはこちら
    • 例:HTMLファイルCSSファイル
  • 写真素材をダウンロードできるサイト(無料)
    • ぱくたそ、StockSnap.io、Pixabay、など

Progate(JavaScriptコース)でのメモ

JavaScript 1

  • ES2015(ES6):JavaScriptの新しい仕様
  • 標準出力
    • console.log()
  • 文字列は'or"で囲む
  • 文の最後は;をつける
  • コメントアウト//
  • 数値と計算
    • 一般的
    • /は整数同士でも小数になる(Pythonと同じ、動的型付けだと基本はそう?)
      • パッと調べた感じはPython//みたいなのはなさそう
  • 文字列の連結
    • +で可能
  • 変数宣言
    • letが必要
    • let 変数名=値;
  • 変数の更新
    • 変数名=値で可能
  • 変数の値の更新の省略
    • +=など、一般的
  • 定数
    • const 変数名=値
    • Goと同じだね
  • テンプレートリテラル
    • Pythonのf文字列と同じ
    • `で囲み、${変数}として変数や定数を埋め込む
  • 条件分岐
    • if(条件式1){処理1}else if(条件式2){処理2}else{処理3}
    • 一般的、C++PHPなどもそう
  • 比較演算子
    • 等価演算子と不等価演算子
    • 厳密な場合は===!==
      • データ型と値が等しい場合
      • 一般的な方
    • 厳密でない場合は==!=
      • 値が等しい場合
        • 数値の8と文字列の"8"は値が同じ
    • (ここはもう少し深く)
  • かつ(&&)とまたは(||
    • 一般的
  • switch文
    • 下記が例
    • それぞれのcaseでbreakしない場合はその下も順に処理を行う(一般的)
    • 分岐の多いif文の代用が可能(常識)
switch(変数){
    case 値1:
        処理1
    case 値2:
        処理2
    …
    default:
        処理n
}

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

内容

  • Webを支える技術でのインプット
    • 35分程度
    • 241ページから274ページ
    • 一部、本記事には記載していない
  • HTML/CSSの基本でのインプット
    • 80分程度
    • 88ページから103ページ

Webを支える技術のメモ

第15章:読み取り専用のWebサービス

15.1 リソース設計とは何か

  • リソース設計とは?
    • WebサービスやWebAPIの外部設計
    • どのようにリソースを分割し、URIで名前をつけ、相互にリンクを持たせるか
  • リソース設計で大事なこと
    • WebサービスとWebAPIを分けて考えない
    • Web上にあるリソースという点では変わらない技術なので
    • (以降では、"Webサービス"はWebAPIを内包する)

15.2 リソース指向アーキテクチャのアプローチ

  • リソース設計には一般的な設計手法が存在しない
  • 「RESTful Webサービス」により推奨される設計アプローチはある
    • (1)Webサービスで提供するデータを特定する
    • (2)データをリソースに分ける
    • (3)リソースにURIにより名前をつける
    • (4)クライアントに提供するリソースの表現(形式)を設計する
    • (5)リンクやフォームを利用してリソース同士を結びつける
    • (6)ユーザの標準的な利用方法を検討する
    • (7)エラーについて検討する

15.3~15.11

  • (本節は具体例なので割愛する)
  • (内容の理解はしたので、忘れた場合は本を再度読む)
  • (Qiitaの記事なども参考になるかもしれない)

第16章:書き込み可能なWebサービスの設計

16.1 書き込み可能なWebサービスの難しさ

  • 例:ブログ、SNS、など
  • 考えることが多い
    • 例:複数のユーザが同時に書き込みを行った時、同時に複数のリソースを更新する時、など

16.2~16.5

  • (本節は具体例なので割愛する)
  • (内容の理解はしたので、忘れた場合は本を再度読む)
  • (Qiitaの記事なども参考になるかもしれない)

HTML/CSSの基本のメモ

Chapter 3

3-1 CSSとは

3-2 CSSを適用させる方法

(1)CSSファイルを読み込んで適用させる

  • <head>内の<link>タグによりCSSファイルを指定
  • rel属性にstylesheet、href属性にCSSファイルをそれぞれ指定する
  • 特徴:複数のhtmlファイルで共有することができる(推奨)
  • 例:HTMLファイルCSSファイル

(2)HTMLファイルの<style>タグで指定する

  • HTMLファイル内の<head>タグ内に<style>タグで囲んで指定する
  • 特徴:特定のページのデザインを変えることができる
  • 例:HTMLファイル

(3)HTMLタグの中のstyle属性で指定する

  • HTMLタグの中にstyle属性を指定する
  • 特徴:一部分のデザインのみを変えることができる、メンテナンスが難しい
  • 例:HTMLファイル

3-3 CSSファイルを作ろう、3-4 CSSの基本の書き方を身につけよう

  • CSSセレクター、プロパティ、値という三つの部分に分かれる
  • セレクタ
    • どの部分を装飾するかを指定
    • 例:タグの名前、クラス、ID、など
  • プロパティ
    • セレクターで指定した部分の"何"を変えるのかを書く
    • 例:文字色、文字サイズ、背景色、など
    • プロパティをどのように変えるのかを指定する
    • 例:文字色であれば赤色や青色など
  • ルール
    • 半角英数字
    • 小文字で統一
    • 複数のセレクタに指定する場合は,区切り
    • 複数の装飾を指定する場合は;区切り
    • 単位を"必ず"指定する(絶対値のpxや相対値の%,rem
    • 要素の中の要素に指定することも可能
  • 例:HTMLファイルCSSファイル

3-5 文字や文章を装飾しよう

  • font-sizeプロパティ
    • 文字の大きさを指定するプロパティ
    • 値:数値(単位付き)orキーワード(small,large,など)
    • 例:HTMLファイルCSSファイル
    • 適切な文字サイズ
      • 文章主体のサイトであれば、14~18px程度
      • 文字サイズのバリエーションを増やしすぎない
  • font-familyプロパティ
    • フォントの種類を指定するプロパティ
    • 指定したフォントがない場合はブラウザのデフォルトのフォント
    • CSSの設定では複数のフォントをカンマで指定(先に指定されたものから適用)
    • 値:フォント名orキーワード(sans-serif,monospace,など)
    • 例:HTMLファイルCSSファイル
  • フォントの種類
    • 明朝体:筆で書いたような文字、長い文章に適切
    • ゴシック体:装飾がほとんどない文字、見出しなどの短い文に適切
    • 装飾系フォント:魅せるために作成された文字、使用するなら短い文
    • フォントは統一する、1~3種類まで
  • font-weightプロパティ
    • フォントの太さを指定するプロパティ
    • 太さのバリエーションが用意されていないフォントには適用されない
    • 値:キーワード(normal、bold、など、一般的)or 数値(1~1000)
    • 例:HTMLファイルCSSファイル
    • <h1>~<h6>bold
  • font-heightプロパティ
    • 行の高さを指定するプロパティ
    • 行の高さが文字サイズより小さい場合は行が重なるので注意が必要
    • 値:normal or 数値(単位なし、フォントサイズとの比率)or 数値(単位あり、文字サイズの指定の時と同様)
    • 行間をどれほど空けるかはfont-sizeに依存するので、単位なし数値で指定するべき
    • 例;HTMLファイルCSSファイル
  • text-alignプロパティ
    • テキストを揃える位置を指定する
    • 値:left,right,center,justify(両端揃え)
    • 例:HTMLファイルCSSファイル
    • 短文は中央揃えで長文は両端揃えにすることで見やすくなる

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

備考

7/22の分です。

7/23は体調を崩し、7/24,25はやる気が消えていました。

具体的な予定を自分の中で立てたので、今日(7/26)から再び意欲的に取り組んでいきたいと思います。

内容

  • Webを支える技術でのインプット
    • 35分程度
    • 231ページから240ページ
    • 一部は飛ばした

Webを支える技術のメモ

第14章:JSON

JSONについてはまとめ直して後日Qiitaで公開予定です) (その際に、自身のVSCodesettings.jsonも公開予定です)

14.1 JSONとは?

  • JSONJavaScript Object Notationの略
  • 特徴:JavaScriptの記法で簡潔に記述することができる
  • 利点1:WebサービスではブラウザでJavaScriptを実行できるので相性が良い
  • 利点2:データ表現の冗長性が低い

14.2 メディアタイプ

  • 「application/json
  • 使用上、UTF-8UTF-16UTF-32のいずれかでエンコードすることになっている
  • 特別な理由がなければUTF-8を使うのが無難なので、Content-TypeヘッダはContent-Type: application/json; charset=utf-8とする

14.3 拡張子

  • 「.json」を用いる

14.4 データ型

  • 組み込みで用意されているデータ型
    • オブジェクト
    • 配列
    • 文字列
    • 数値
    • 真偽値
    • null
  • オブジェクト
    • 名前と値の集合のこと
    • 名前と値の組のことを「メンバ」と呼ぶ
    • メンバの名前は必ず文字列
    • メンバの値はなんでもOK
    • オブジェクトは{}で囲まれ、名前と値の組は:で区切る
    • 例:
  • 配列
    • 0個以上の値を保持できる
    • 配列は[]で囲む
    • 文字列の配列:["foo", "bar", "baz"]
    • オブジェクトの配列:[{"foo": "bar"},{"hoge": "fuga"}]
    • 配列の配列:[[10, 10], [20, 20]]
    • 空配列:[]
    • 複数種のデータ型を含む配列:[{"foo": "bar"}, "baz", 100, true, null]
  • 文字列
    • ""で囲む
    • 単純な文字列:"あいう"
    • コントロール文字を含む文字列:"foo\\bar\n"
  • 数値
    • 整数:10
    • 負の整数:-100
    • 小数:30.1
    • 指数:1.0e-10
  • 真偽値
    • truefalse
  • null
    • 値がないことを示す
    • null
  • 日時
    • 日時を組み込み型に持たない
    • 開発者側での規定が必要
    • (1)UNIX時間を利用する場合
      • UNIX時間(1970年1月1日0時0分0秒からの経過秒数)を数値として表す
      • 例:123456789
      • 問題:タイムゾーンが扱えない
    • (2)JavaScriptのDateクラスのtoString関数を利用する場合
      • 問題:処理系によって出力が異なる
    • (3)標準的なフォーマットを利用する場合
      • 例:ISO8601フォーマットにより、"2021-07-02T05:43:35+09:00"と表す
      • 一番良い方法
  • リンク
    • ハイパーメディアフォーマットで必須の存在
    • 単純にURIを文字列として持つのが簡単
    • また、相対URIではなく絶対URIにしておくべき

14.5 JSONPによるクロスドメイン通信

(今回は飛ばす)

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

  • JavaScriptをベースにしたシンプルなデータフォーマット
  • 各種プログラミング言語がライブラリを用意している
  • XMLと比べて冗長性が低いので、データ表現のフォーマットとして利用される
  • リソースを表現するフォーマットとしてはハイパーメディアの側面を持つことも重要

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

内容

  • Webを支える技術でのインプット
    • なし
  • HTML/CSSの基本でのインプット
    • 90分程度
    • 65ページから86ページ
  • PortfolioサイトのHTML化

HTML/CSSの基本のメモ

Chapter 2

2-8 リンクを貼ろう

2-9 リストを表示しよう

2-10 表を作ろう

  • 複数のタグを組み合わせて使う
    • <table>:表を示す、表全体を囲む
    • <tr>:表の一行を囲む(table row)
    • <th>:表の見出しとなるセルを作る(table header)
    • <td>:表のデータとなるセルを作る(table data)
    • <table>のなかに<tr>を並べ、その中に<th><td>を並べる
  • 例:https://github.com/daikisuyama/HTML_CSS_training/blob/master/69.html

2-11 フォームを作ろう

  • 複数のパーツを使う
    • <form>タグ
      • フォームを作成するためのタグ
      • action属性:データの送信先のページ(ターゲットURI)を指定
      • method属性:データの転送方法を指定、GETまたはPOST
      • name属性:フォームの名前を指定
    • フォーム内で使うパーツ(フォームコントロール要素)
      • <input>タグを使用する場合が多い
        • type属性をそれぞれ持つ
      • その他の例
        • <select>タグや<textarea>タグなどもある
      • 一行入力
        • 用途:一行の入力を行う
        • 使用するタグ:<input>タグ
        • type属性:textemailなどを入力に合わせて指定する
        • placeholder属性:予め文字を表示させることが可能
      • ラジオボタン
        • 用途:複数の選択肢から1つの選択肢を選ぶ
        • 使用するタグ:<input>タグ
        • type属性:radio
        • name属性:ラジオボタンの名前
        • value属性:送信される選択肢の値
        • checked属性:最初から選択されている状態にするときに指定
      • チェックボックス
        • 用途:複数の選択肢から複数の選択肢を選ぶ
        • 使用するタグ:<input>タグ
        • type属性:checkbox
        • name属性:チェックボックスの名前
        • value属性:送信される選択肢の値
        • checked属性:最初から選択されている状態にするときに指定
      • 送信ボタン
        • 用途:フォームに入力した内容を送信する
        • 使用するタグ:<input>タグ
        • type属性:submit
        • name属性:ボタンの名前
        • value属性:ボタンに表示するテキスト
        • ボタンを押すとターゲットURIに飛ぶ
      • 画像を用いたボタン
        • 用途、使用するタグ、type属性:同上
        • name属性:ボタンの名前
        • src属性:ボタンに使用したい画像へのファイルパス
        • alt:画像を説明するテキスト
      • セレクトボックス
        • 使用するタグ:<select>タグと<option>タグ
        • 用途
          • セレクトボックスをクリックすると選択肢が表示される
          • 選択肢が沢山ある場合に便利
        • <select>タグの属性
          • name属性:セレクトボックスの名前
          • multiple属性:複数の項目の選択を可能にする
        • <option>タグの属性
          • value:送信される選択肢の値
          • selected
            • 最初から選択されている状態にする時に指定
            • デフォルトでは最初の要素
      • 複数行のテキスト入力欄
        • 用途:複数行のテキスト入力を行う
        • 使用するタグ:<textarea>
        • name属性:欄の名前
        • placeholder属性:予め文字を表示させることが可能
        • タグで囲まれた部分が初期値となる
        • 初期値が空の場合にplaceholderが有効(たぶん)
  • 例:https://github.com/daikisuyama/HTML_CSS_training/blob/master/73.html

2-12 より使いやすいフォームにしよう

2-13 ブロック要素でグループ分けをしよう

  • グループ分けとは?
    • ブロック要素(前後に改行が入る)ごとに分ける
    • 分けた要素それぞれにCSSを適用していく
  • <header>タグ
    • ページの上部に相当するヘッダーを囲む
  • <nav>タグ
    • メインのナビゲーションメニューを囲む
  • <article>タグ
    • ページの(独立して)記事となる部分を囲む
    • ニュースサイトやブログの記事の部分に相当する
  • <section>タグ
    • 意味のある(テーマのある)グループを囲む
  • <main>タグ
    • ページの核となるコンテンツ全体を囲む
  • <aside>タグ
    • サイドバーなどの補足情報の部分を囲む
  • <footer>タグ
    • ページ下部のフッター部分を囲む
    • SNSリンクやコピーライトについて書かれていることが多い
  • <div>タグ
    • 特に意味を持たない部分を囲む
    • 用途に当てはまらない場合やデザインのために用いることが多い

開発初心者の開発日記~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ブラウザで読み込めなかった時に画像の代わりに表示するテキスト
    • ファイルパスの指定

開発初心者の開発日記~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 見出しをつけよう

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

内容

  • Qiitaでの記事作成
    • 80分程度
  • Webを支える技術でのインプット
    • 30分程度
    • 8.5(121ページ)から9.2(126ページ)まで
  • HTML/CSSの基本でのインプット
    • 20分程度
    • 27ページまで

Webを支える技術のメモ

第8章:ステータスコード

8.5 ステータスコードとエラー処理

  • 前提
  • プロトコルに従ったフォーマットでエラーを返す
    • 例:AtomPubを利用したWebAPI→エラーメッセージはAtomで返す
      • この場合、クライアントもAtomを解釈可能
  • Acceptヘッダに応じたフォーマットでエラーを返す
    • クライアントがリクエストメッセージでAcceptヘッダを送信している場合はそれに合わせて動的に返す
      • Accept: application/xhtml+xml;q=0.9,text/plain;q=0.3
      • Accept: application/xhtml+atom;q=0.9,text/plain;q=0.5
      • 前者ではHTML形式、後者ではAtom形式で返す

8.6 ステータスコードの誤用

8.7 ステータスコードを意識して設計する

第9章:HTTPヘッダ

9.1 HTTPヘッダの重要性

  • メッセージのボディに対する付加的な情報(メタデータ)を表現する
  • クライアントやサーバはヘッダを見てメッセージに対する挙動を決定する
  • 認証(リソースへのアクセス権を決定)やキャッシュ(サーバとの通信回数を減らす)はヘッダをメソッドやステータスコードと組み合わせることで実現する

9.2 HTTPヘッダの生い立ち

  • HTTPヘッダはHTTP0.9では存在しない
  • HTTPヘッダは電子メールのメッセージ仕様のヘッダを借りる形で追加される
  • HTTPでも電子メールでも文字の種類に制限がある(歴史的経緯からくる制限)
  • 電子メールは単一方向性であるが、HTTPはリクエストとレスポンスの双方向性を持つ
    • HTTPには電子メールにない様々なヘッダが追加されている
  • 以降は重要なヘッダのみ扱う

HTML/CSSの基本のメモ

Chapter 1

1-1 良いWebデザイン

  • デザインの目的は相手に伝えること
    • 伝えるための手段で美しく装飾することではない
  • 使いやすことが重要
  • より良い生活を提供すること
    • 良いデザインは人々の行動にも良い影響を与える

1-2 様々な種類のWebサイト

1-3 ユーザビリティとは

  • 使いやすさを考える
  • 見やすいデザインにする
    • 色使い、強調、レイアウト、など
    • 配色だけでも視認性がだいぶ変わる
  • 読みやすい文章にする
    • 結論を先に書く、専門用語を使わない、簡潔にまとめる、など
  • 使いやすい操作性にする
    • 予測可能にする:その後の挙動をユーザが想像できるようなデザインに
    • 動作を速くする:ファイルサイズの小さいものを使うなど
    • 一目見てわかるようにする

1-4 Webサイトの仕組み

(知ってるので適当に)

  • インターネット:世界のコンピュータと情報をやりとりできる仕組み
  • Web:インターネットの仕組みを元にWebサイトの情報の発信や閲覧を行うことのできる仕組み
    • インターネットの機能(メールやファイル転送を含む)のうちの一つ
  • Webページの仕組み:クライアントサーバ型(クライアントからのリクエストにサーバがレスポンス)
  • URL:閲覧したい情報の位置情報

1-5 デバイスの種類