開発初心者の開発日記~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
}