Month: January 2021

unit(単体)テストとは？

unitテストとは、プログラムを構成する比較的小さな単位が個々の機能を正しく果しているかを検証するテスト
プログラム全体として正しく動作しているかを検証するのは結合テスト

### unitテストの種類
– ホワイトボックステスト
テスト対象関数のメソッドの内部構造に着目
– ブラックボックステスト
　入出力に着目する

### 具体的なやり方
– 書いたコードの全てが実行されるように書く
– 入出力の閾値を考えてテストする

なるほど、主要機能はホワイトボックスとブラックボックス両方やらないと駄目だな。

PSD・AIからHTMLへの書き出し

コーディングに必要なこと

– 画像のスライス（書き出し方法）
– 要素の幅・高さを取得する
– 要素間の余白を取得する
– フォント情報の取得

デザインデータから情報を取得してコーディングする。
言うが易しって感じもするが。。

[Photoshop] ヘックスコード

ヘックコードという
#000000
Red,Green,Blue
2桁ずつ16進数で使っている。
Fが一番大きい
00FF00は100%のグリーン

カラーホイール

ベースカラーを決めてから、
モノクロマティック、トライアド、捕色、分割補色、二重分割補色、正方形、コンパウンド、シェード、カスタムなど色の関係性で選べる。
-> 統一感のある配色を選択できる。

Photoshopからも使える
ウィンドウ->エクステンション->カラー

色の変え方
編集->塗りつぶし->描画色

シェイプの場合は、レイヤーパネルからダブルクリック
文字レイヤーの場合もレイヤーパネル

[Laravel8.x] エラーメッセージをモーダルで表示させたい

エラーメッセージをtextでも良いが、どちらかと言うとモーダルで表示させたい。

まず単純なフォームを作ります。

<body>
	@if(Session::has('flashmessage'))
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      {{ session('flashmessage') }}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
	@endif
	<form action="/admin/test/form/confirm" method="post">
		@csrf
	<p>
	名前：<input type="text" name="name" size="40">
	</p>
	<input type="submit" value="送信">
	</form>

<script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
    // モーダルウィンドウ
    $(window).on('load',function(){
        $('#exampleModal').modal('show');
    });
</script>

controller

    public function testFormConfirm(Request $request){
        if($request->has('name') & $request->name !== NULL){
            session()->flash('flashmessage',$request->name. 'さん、登録完了');
        } else {
            session()->flash('flashmessage','エラー: 名前を入力してください');
        }

        return redirect('/admin/test/form');
    }

エラーのメッセージではなく、session flashで送るのか。なるほどね。

### 1冊やっておいても損はない本

[Photoshop] スウォッチ

Webデザインでは、RGBではなくWEBスウォッチを使うことが多いとの事。
HEXコードで登録する

レイヤーはWebデザインで一番良く使う機能。
シェイプツールの編集にパスを良く使用する。

なるほど、ちょっと色々考えることが多くなってきたな。

PSDファイルからHTMLにする流れ

PSD -> HTMLにする為の具体的な作業内容
ここが超絶重要なポイント、丁寧に深く理解する必要がある。

1. スケッチ(どのようなWebサイトを作っていくか)
2. ワイヤーフレーム(何ピクセルで作るかなど)
3. デザイン(色のパレットを決める、配色・配置)
4. 切り出し・書き出し・引き継ぎ
L ロゴ、メニューなどを切り出す作業をスライスという
L 各要素を適切なファイルサイズで書き出す
L 書き出したファイルを整理整頓する

なるほど、デザインしたものをスライスして書き出してる訳ね。
バナー作成の場合は基本的にデザインだけだが、Webページのデザインの場合はスライス・書き出しの作業があるから全然違うな。
OK、工程をちゃんと理解した。レイヤーをどう使ってるかなどは理解する必要があるな。

ピクセルディメンションと解像度

– ピクセルディメンションとは、縦横のピクセルサイズの事
– 解像度はdpi(dot per inch)で表す
– 一インチの中に幾つのドットを表示できるのかを表している

デバイスのインチ、画像サイズが同じでも、解像度が異なると、表示内容が異なる。

なるほど、デバイスの解像度を考えながら作っていくのね。

[Photoshop] グラデーションのかけ方

まず、新規のドキュメントを作成します。

グラデーションツールを選択する。

ドラッグするだけで、黒から白へのグラデーションが作られる。

円形のグラデーションも作成可

色も変えられる。

文字へのグラデーション

グラデーションオーバーレイ

色をつける

グラデーションかけるだけでプロっぽく見えますね。不思議や。

[CSS] 画像の上に文字を乗せる方法

ボタン画像の上に文字を乗せて表示したい。
-> 画像の上に文字を乗せる方法を理解する。

<div class="sample">
			<img src="img/sky.jpg">
			<p>SUNSET</p>
		</div>

position: relativeとする。

<style>
    	.sample {
    		position: relative;
    	}
    	.sample p {
    		position: absolute;
    		color: red;
    		top: 5px;
    		left: 5px;
    	}
    </style>

<div class="container">
		<div class="sample">
			<img src="img/sky.jpg">
			<p>SUNSET</p>
		</div><br>
		<div class="sample">
			<img src="img/sky.jpg">
			<p>SUNSET2</p>
		</div>
	</div>

画像の上に文字が乗りました。

なるほど、理解した。背景画像とは別に、こういうことができるんやな。