OmniAICreator/Qiita-1.07M huggingface dataset:
【Docker＋Laravel】テスト用のダミーファイルの生成の際に出たエラーたち

###状況
Dockerの環境でLaravelアプリのテストの際、ダミーの画像ファイルを作ろうと思い、公式リファレンスにもある`file()`を利用しました。

公式リファレンス（ファイルアップロードのテスト）
https://readouble.com/laravel/5.8/ja/http-tests.html?header=%25E3%2583%2595%25E3%2582%25A1%25E3%2582%25A4%25E3%2583%25AB%25E3%2582%25A2%25E3%2583%2583%25E3%2583%2597%25E3%2583%25AD%25E3%2583%25BC%25E3%2583%2589%25E3%2581%25AE%25E3%2583%2586%25E3%2582%25B9%25E3%2583%2588

```php
$file = UploadedFile::fake()->image('avatar.jpg');
```

テストしてみるとこんなエラーが...

```
Tests\Feature\InformationControllerTest::testStore
Call to undefined function Illuminate\Http\Testing\imagecreatetruecolor()
```

最初はクラスをuseしてないのかな？とかLaravelアプリ側の問題だと思いましたが、どうやらこの`file()`メソッドが定義されるIlluminate\Http\UploadedFileクラスを使うには、PHP GDというPHPのライブラリが必要なようです。
###PHP GDのインストール
DockerfileにPHP GDのインストールを追加してみます。

```Dockerfile
RUN apt-get update && apt-get install -y \
    zlib1g-dev \
    libzip-dev \
    mariadb-client \
  && docker-php-ext-install zip pdo_mysql gd 
```
上のように書き換え、再構築してみると、次はこんなエラーが

```
configure: error: png.h not found
```
調べると`docker-php-ext-install gd`をするだけでは足りず、
libfreetype6-dev 
libjpeg62-turbo-dev
libpng-dev 
依存関係のある三つのパッケージを事前に apt-get install する必要があるみたいです。


Dockerfileを修正します。
`docker-php-ext-install gd`の実行前に三つのパッケージの`apt-get install`を書きます。

```dockerfile
RUN apt-get update && apt-get install -y \
    zlib1g-dev \
    libzip-dev \
    mariadb-client \
    libfreetype6-dev \
    libjpeg62-turbo-dev \
    libpng-dev \
  && docker-php-ext-install zip pdo_mysql gd 
```
再度buildしてみると正常に構築できました。

本当にインストールできているか確認してみます。

```
gd

GD Support => enabled
GD Version => bundled (2.1.0 compatible)
GIF Read Support => enabled
GIF Create Support => enabled
PNG Support => enabled
libPNG Version => 1.6.36
WBMP Support => enabled
XBM Support => enabled
```
ちゃんとインストールできたようですね。
[Twilio]APIで電話を掛ける際のリクエストにTwiMLが設定可能に！

先日、TwilioのChangeLogを見ていたらこんなアップデートが！

# 会話を開始する際にTwiMLを指定できるようになりました！
本文
[Pass TwiML with Call Initiation Requests](https://www.twilio.com/changelog/pass-twiml-call-initiation-requests)

# どういうことかというと。
## 従来
今までは通知などでTwilioを利用して、ユーザーに発信し自動音声を流すには、以下のようにTwiMLを指定するのにURLを指定する必要がありました。

```
curl -X POST https://api.twilio.com/2010-04-01/Accounts/ACXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/Calls.json \
--data-urlencode "Url=http://demo.twilio.com/docs/voice.xml" \
--data-urlencode "To=+81xxxxxxxxxx" \
--data-urlencode "From=+8150xxxxxxxx" \
-u ACXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX:your_auth_token
```

なので、TwiMLを返却するためのサーバーを用意する必要があり、ちょっと試してみたいけどそのためにサーバー用意するのはめんどくさいなというエンジニアが多くいました。
そんなユーザーの導入ハードルを下げるためにTwiML BinsやFunctionsを利用した方法が数多く紹介されていました。

しかし、今後はちょっと試したり、サーバー準備するまでもないなというときは、そのままTwiMLが指定できるようになりました！

## 今回のアップデート
今回のアップデートにより以下のようにリクエストにTwiMLを指定できるようになりました！

```
curl -X POST https://api.twilio.com/2010-04-01/Accounts/ACXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/Calls.json \
--data-urlencode "Twiml=<Response><Say language='ja-JP'>おめでとうございます！</Say></Response>" \
--data-urlencode "To=+81xxxxxxxxxx" \
--data-urlencode "From=+8150xxxxxxxx" \
-u ACXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX:your_auth_token
```

これで、今までのようにTwiMLを返すだけのサーバーは不要になりました。

# まとめ
今まで、TwiMLを準備する方法がいまいちわかりずらく手をつけられてなかったエンジニアさんや試すのにサーバーを準備しなきゃいけなくて試せてなかったエンジニアさんはこれを機会にぜひ試してみてください！
macOS のアプリケーションのダークモードを強制的に無効にする方法

```
defaults write [App] NSRequiresAquaSystemAppearance -bool yes
```

を入力してアプリケーションを再起動する。  
逆に有効にしたい場合は

```
defaults write [App] NSRequiresAquaSystemAppearance -bool no
```

## 例

Chrome のダークモードを無効にしたい場合

```
defaults write com.google.Chrome NSRequiresAquaSystemAppearance -bool yes
```
【初心者向け】スマホでPCの画面を見る方法【iPhone/Android】

#パソコン画面をiPhone/Androidに表示する最適な方法

iPhone/Androidの画面をパソコンにミラーリングして表示させる方法を知っている人が多いようですが、
**パソコンをスマホにミラーリングする方法**を知る人は多くではありません。

では、この記事はパソコン画面をiPhone/Androidに表示する最適な方法について、ご紹介します。

##事前準備
iPhone/Androidスマホ(この記事ではiPhoneを例として説明します。)
Windows PC(Windows7/8/8.1/10)
画面ミラーリングアプリ(この記事では[LetsView](https://letsview.com/jp/) という無料のアプリを例として操作します。[ApowerMirror](https://www.apowersoft.jp/phone-mirror)というミラーリングアプリもおすすめです。)
##操作手順
1.スマホとパソコンを同じWi-Fiネットワークに接続しておきます。
2.スマホとパソコンに[LetsView](https://letsview.com/jp/) をダウンロードして、起動します。(両方ともインストールしてください。)
[LetsViewダウンロード](https://download.aoscdn.com/down.php?softid=letsview) 
3.iPhone側で検出されたデバイスのリストが見えます。
![letsview画面ミラーリング.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/417797/e3398d8f-37ae-c6eb-8c77-47f7f6952e11.png)
※デバイスが検出されていない場合、「再検出」をタップします。
4.お使いのパソコンを選択します。
![デバイス検出.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/417797/fca122ac-7c27-4538-8f50-0cf507dbfbe7.png)
5.「PC画面ミラーリング」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/417797/3569b0ae-0a0c-cb9b-a3dc-d99c83f379bb.png)
6.パソコン側から「許可」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/417797/2a070d0f-cb8e-c086-c757-bcc5c10e73cd.png)

上記の手順に従うだけで、パソコンの画面をiPhoneにミラーリングして表示させることができます。
Windowsの機能をコマンドで有効化(XPSビューア)

#はじめに
Windows10 1803からWindowsの機能が無効化されてしまった。

インターネット上のWindows Updateを向いている場合は、手動で有効化を行えるからいいが、会社によってはWSUS(Windows Server Update Service)を使用しているところもある。

WSUSを使用していると手動での有効化を行えない。

ここでは、WSUSを向いていても有効化ができる方法についてまとめました。
*<font color="Red">＊注意　ビルドが上がるたびに削除されるのでFUの度に実施をする必要がある</font>*

#事前準備

今回は、DISM(展開イメージのサービスと管理のコマンドラインツール)コマンドを使用します。

準備するものは、以下の通りになります。

<b>1.テキストエディタ</b>
最終的にはbat化するので使用します。
拡張子が変更できるものであれば、何でもいいです。

<b>2.CABファイル</b>
Windowsの機能を有効化するのに必要なファイルが入っています。
取得方法としては、Windows Updateのカタログ又は、ボリューム ライセンス　サービス センターからダウンロードを行います。

##1 XPSビューア インストール
早速XPSビューアのインストールを始めます！
今回は場所を指定せずに行えるようにしました。
まず、テキストエディタを開き以下のコマンドを入力します。

<b>1.コマンド</b>

```
cd %~p0
dism /online /add-package /packagepath:"Microsoft-Windows-Xps-Xps-Viewer-Opt-Package~31bf3856ad364e35~amd64~~.cab"
Pause
```

名前を付けて保存後にbatファイルにするために拡張子の変更を行います。

*拡張子変更*
txt→bat

<b>2.フォルダに格納</b>
1で作成したbatファイルと事前準備で取得した.XPSビューアのcabファイルをコマンドで指定したフォルダに格納します。


<b>3.実行</b>
batファイルをダブルクリックするとインストールが開始されます。
＊実行しているのが一般ユーザーの場合は管理者権限のユーザーを求められるます！


##2 .まとめ

・.NET3.5よりは場所依存しないものだったのでどこの場所でも実行できるようにした。
・この内容で伝わるかがものすごく不安
・検証中は大変だったけど応用ができるものだからやってよかったかな
[Unity] .gitignoreを使用して、いらないファイルを除外する

#1. 手順

1. Source Treeを開く。
2. 設定タブを開き、詳細をクリック。
3. リポジトリ固有の無視リストの編集をクリック。
4. 下のコードをコピーし、貼り付ける。


#2. コード
```
[Ll]ibrary/
[Tt]emp/
[Oo]bj/
[Bb]uild/
[Bb]uilds/

# Visual Studio cache directory
.vs/

# Autogenerated VS/MD/Consulo solution and project files
ExportedObj/
.consulo/
*.csproj
*.csproj.user
*.unityproj
*.sln
*.suo
*.tmp
*.user
*.userprefs
*.pidb
*.booproj
*.svd
*.pdb

# Unity3D generated meta files
*.pidb.meta
*.pdb.meta

# Unity3D Generated File On Crash Reports
sysinfo.txt

*~
.DS_Store
*[! -~]*

*.apk

```

#3. 参考資料
https://qiita.com/inabe49/items/16ee3d9d1ce68daa9fff
【iOS】AppStoreアプリ申請 Reject(リジェクト)例

アプリ申請をしてみたら以下のようなリジェクトがあったので、共有ついでに、対処方法ご存知の方いましたら、おまちしています。

ちなみに今回が初めての申請で、、とはいえとてもしょうもないアプリをテスト的に配布してみようかなと思ったので、コンテンツ不足とかは予測していましたが、、、

## リジェクト内容

```
Hello,

We are unable to continue this app’s review because your Apple Developer Program account is currently under investigation for not following the App Store Review Guidelines’ Developer Code of Conduct.

Common practices that may lead to an investigation include, but are not limited to:

- Inaccurately describing an app or service
- Misleading app content
- Engaging in inauthentic ratings and reviews manipulation
- Providing misleading customer support responses
- Providing misleading responses in Resolution Center
- Engaging in misleading purchasing or bait-and-switch schemes
- Engaging in other dishonest or fraudulent activity within or outside of the app

During our investigation, we will not review any apps you submit. Please do not create a new developer account or make any app transfers while waiting for the investigation to be completed. Once we have completed our investigation, we will notify you via Resolution Center. Due to the nature of the investigation you will be ineligible to receive an expedited review until the investigation is completed.

We do not require any additional information from you at this time, nor do we have any additional details to share. We appreciate your continued patience during our investigation.

Best regards,

App Store Review
```

ちなみにGoogle翻訳

```
こんにちは、

Apple Developer Programアカウントは現在、App Storeレビューガイドラインの開発者の行動規範に違反しているため、調査中であるため、このアプリのレビューを続行できません。

調査につながる可能性のある一般的な慣行には以下が含まれますが、これらに限定されません。

-アプリやサービスを不正確に説明している
-誤解を招くアプリコンテンツ
-信頼できない評価とレビュー操作に従事する
-誤解を招く顧客サポート応答を提供する
-解決センターで誤解を招く応答を提供する
-誤解を招く購入や餌とスイッチのスキームに従事
-アプリ内外での不正行為や不正行為

調査中、送信されたアプリは確認されません。調査が完了するまで、新しいデベロッパーアカウントを作成したり、アプリを転送したりしないでください。調査が完了すると、解決センターを通じて通知されます。調査の性質上、調査が完了するまで、迅速な審査を受けることはできません。

現時点では、お客様からの追加情報は必要ありません。また、共有する追加情報もありません。調査中、引き続きご理解いただきますようお願いいたします。

宜しくお願いします、

App Storeレビュー
```

## 参考までに

[App Store Review Guidelines](https://developer.apple.com/jp/app-store/review/guidelines/)

## 結果
10日後くらいに無事受理されました。
Visual Studio Online の始め方 ~環境構築時代の終焉~

# GitHub
https://github.com/RZ-git/vso-test-environment

Visual Studio Online始め方メモ

    1.Visual Studio Onlineって？
        クラウド版IDEで、ネット環境さえあれば使えるVisual Studio Codeみたいなもの。

    2. 始め方
        公式サイトに飛ぶ
        https://visualstudio.microsoft.com/ja/services/visual-studio-online/
        [開始する] => [Create environment]
        環境名、連携するGitリポジトリのURLを入力
        マシンタイプを選択
        Createするとビルドが開始されるから1分くらい待つ
        後は拡張機能入れたりする。
        ※ファイル作ったりすると。足りない拡張機能に関するポップアップが右下に出るから迷うことはない
        ここまで5分程度

    3.料金体系
        接続している間は課金される
[料金体系](https://azure.microsoft.com/ja-jp/pricing/details/visual-studio-online/)

    4.使ってみて
        環境構築迄のスピードが速い。速すぎる。
        予め開発に必要な環境が整ってる。アップデートとかはしてくれるかは不明。
        Gitは連携もしてるし当然インストールされてる。
Remote - WSL で Temporary failure in name resolution となる。


## 症状

WSL 2 上のディストリビューションから VS Code を起動しようとすると、VS Code Server のアップデートに失敗してエラーになる。

```
$ code .
Updating VS Code Server to version 0ba0ca52957102ca3527cf479571617f0de6ed50
Removing previous installation...
Installing VS Code Server for x64 (0ba0ca52957102ca3527cf479571617f0de6ed50)
Downloading: 100%
Failed
--2020-03-25 16:48:18--  https://update.code.visualstudio.com/commit:0ba0ca52957102ca3527cf479571617f0de6ed50/server-linux-x64/stable
Resolving update.code.visualstudio.com (update.code.visualstudio.com)... failed: Temporary failure in name resolution.
wget: unable to resolve host address ‘update.code.visualstudio.com’
ERROR: Failed to download https://update.code.visualstudio.com/commit:0ba0ca52957102ca3527cf479571617f0de6ed50/server-linux-x64/stable to /home/sho/.vscode-server/bin/0ba0ca52957102ca3527cf479571617f0de6ed50-1585122478.tar.gz
$
```

## 対策

Windows 10 から VS Code のウィンドウを再度開くと問題なく、VS Code Server のアップロードが走ります。**コマンドパレット** から以下の様に打ち込んで、ウィンドウを開きます。

```
>Remote-WSL: New Window
```

## 原因

不明です。エラー文から DNS 周りかなと思ったのですが、対象ドメインに対して dig コマンドも問題なく通りました。

```
wget: unable to resolve host address ‘update.code.visualstudio.com’
```

<!--
読んだもの。役には立たなかった。

* [[WSL 2] No network connectivity after upgrade to 18945 #4342 - microsoft
/WSL](https://github.com/microsoft/WSL/issues/4342)
* [DNS server inside wsl2 is not working for windows #4592 - microsoft
/WSL](https://github.com/microsoft/WSL/issues/4592)

  -->
Microsoft TeamsのWebhookによる通知 

# 概要
Microsoft TeamsのWebhookを利用した通知を使ってみる。
ここでは、シェルスクリプトからcurlを使ってメッセージを送信する方法をまとめる。

# 事前準備
TeamsでWebフックの設定を行う。

1. 設定したいチームのチャネルのメニューから、"コネクタ"を選択する。
![01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79886/9a830672-f02b-097d-133f-8fb916cfa9fb.jpeg)

2. コネクタ設定のウィンドウが表示される。
左メニューの"カテゴリ"から"すべて"を選択　→　"incoming Webhook"の"構成"ボタンを押下する。
![02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79886/ddcdacbd-668c-6183-a80e-441268685756.jpeg)

3. 構成のウィンドウが表示される。
名前を適宜入力し、"作成"ボタンを押下する。
（画像の例では"nitification"という名前のWebフックを作成している。）
![03.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79886/8dd8b4d2-f52b-bbe9-857a-c2e2e0baaa41.jpeg)

4. "作成"ボタンを押下後、WebフックのURLが発行されるので、これをコピーしておく。
最後に"完了"ボタンを押下する。
![04.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79886/23d61072-a4ea-24bb-a2d0-ae3da839c91b.jpeg)

# シェルスクリプトを作成する
以下に実装のサンプルコードを示す。

~~~
#!/bin/bash

# プロキシ環境下で実行する場合は適宜設定
export https_proxy=http://aaa.bbb.ccc:nnnn

# WebフックURL（※事前準備で発行したURLを設定する）
WEBHOOK_URL='https://outlook.office.com/webhook/～'

# curlコマンド実行
curl -H "Content-Type: application/json" -d "{\"text\": \"メッセージ\"}" $WEBHOOK_URL
~~~

# 実行結果
Webフックを設定したチャネルにメッセージが投稿される。
投稿ユーザは、コネクタ設定時に入力したWebフックの名前／アイコンになる。
![05.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79886/0706e927-d7cb-2708-beaa-323a76c42771.jpeg)

# メッセージを装飾する
Markdown形式でメッセージを装飾して送信することもできる。

| 効果 | Markdown書式 |
| ---- | ---- |
|斜体|\*Italic\*|
|太字|\*\*Bold\*\*|
|太字斜体|\*\*\*Bold Italic\*\*\*|
|取り消し線|\~\~Strike-through\~\~|
|リンク|\[Microsoft\]\(https\://www\.microsoft\.com\)|
|見出し(\<h1\> から \<h6\>)|# Heading から ###### Heading|
|箇条書き|* List item|
|箇条書き|- List item|

【参考】https://docs.microsoft.com/ja-jp/outlook/actionable-messages/message-card-reference

# コマンド例
~~~
# curlコマンド実行
curl -H "Content-Type: application/json" -d "{\"title\": \"Webhook通知\", \"text\": \"メッセージ\"}" $WEBHOOK_URL
~~~

# 実行結果
![06.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79886/b682bbf6-6b20-66db-987c-5acc3d2e4baa.jpeg)
Windowsの機能をコマンドで有効化(NET3.5)

#はじめに
Windows10 1803からWindowsの機能が無効化されてしまった。

インターネット上のWindows Updateを向いている場合は、手動で有効化を行えるからいいが、会社によってはWSUS(Windows Server Update Service)を使用しているところもある。

WSUSを使用していると手動での有効化を行えない。

ここでは、WSUSを向いていても有効化ができる方法についてまとめました。
*<font color="Red">＊注意　ビルドが上がるたびに削除されるのでFUの度に実施をする必要がある</font>*

#事前準備

今回は、DISM(展開イメージのサービスと管理のコマンドラインツール)コマンドを使用します。

準備するものは、以下の通りになります。

<b>1.テキストエディタ</b>
最終的にはbat化するので使用します。
拡張子が変更できるものであれば、何でもいいです。

<b>2.CABファイル</b>
Windowsの機能を有効化するのに必要なファイルが入っています。
取得方法としては、Windows Updateのカタログ又は、ボリューム ライセンス　サービス センターからダウンロードを行います。

##1 .NET3.5インストール

早速.NET3.5からインストールを始めます！
まず、テキストエディタを開き以下のコマンドを入力します。

<b>1.コマンド</b>

```
Dism.exe /online /enable-feature /featurename:NetFX3 /All /Source:C:\TRDATA /LimitAccess
Pause
```

名前を付けて保存後にbatファイルにするために拡張子の変更を行います。

*拡張子変更*
txt→bat

<b>2.フォルダに格納</b>
1で作成したbatファイルと事前準備で取得した.NET3.5のcabファイル(NetFX3)をコマンドで指定したフォルダに格納します。

*例*
C:\TRDATAフォルダに格納
ない場合は作成を行います。
＊一般権限ユーザーだとCドライブ配下にフォルダを作成できないので作成する時は管理者権限のユーザーが必要になります。

<b>3.実行</b>
batファイルをダブルクリックするとインストールが開始されます。
＊実行しているのが一般ユーザーの場合は管理者権限のユーザーを求められるます！


##2 .まとめ

・手順書以外で自分の言葉で記事を書くのはすごく大変。
・WSUSを使っていてもWinodwsの機能を有効化することには成功したが、一般ユーザーのみでは実施することができないのでどの環境でも使えるようにさらに改造しないといけないことが分かった。
kubernetesのPodの再起動方法 

今回はkubernetesにおける、Podの再起動方法についてです。
 
deploymentを更新したときは自動的にPodが生まれ変わりますが、
configmapやsecretのみを更新した場合に、「あれーPod情報が古いままだよ〜」
なんてことが慣れないうちは起こりがちです。

deleteコマンドでPodを１個づつ削除してもあげても良いのですが、
１個や１個ならまだしも、50000個くらいあった場合はとても大変なわけなのです。

そんなわけでconfigmapやsecretやらのみの更新の場合には、下記のコマンドを使うのが良いかなと思った次第でございます。
`kubectl rollout restart deploy [対象のdeployment名]`

```
$ kubectl rollout restart deploy tomato
deployment.extensions/tomato restarted

$ kubectl get po
tomato-5867754db-nthxw                  1/1     Running       0          13s
tomato-696dd46f79-bcxh9                 1/1     Terminating   0          5d23h
```

新しいPodがRunningになると、古いPodがTerminatingになり、
ダウンタイムなしで再起動してくれます。

対象となるdeployment名の一覧については、下記のコマンドで事前に確認しておきましょう。
`kubectl get deploy`

ではまた🙋‍♂️

## さいごに
ZEROBILLBANKでは一緒に働く仲間を募集中です。
なんとかjsとか、ブロックチェーンとか、kubernetesとかでいろんなAPIを作るお仕事。
今のところエンジニアは5人くらい。スタートアップだけど、結構ホワイトで働きやすいです。

[ZEROBILLBANK JAPAN Inc.](https://zerobillbank.com)
[WIP] 自分用: (軽量)形式手法のメモ

# (軽量)形式手法の補足

ここからは(軽量)形式手法に関する補足なので、それ自体を知っている方 or 関心が出なかった方は読まなくていいです。

## 形式手法とは

形式手法とはソフトウェアの品質保証のための、数学的・記号論理的手法の総体
記号的であるため計算機実装が可能

### 形式手法の例

* 形式検証 verification
* 自動生成 synthesis
* 形式仕様記述 specification

[参照元](https://www.nii.ac.jp/openhouse/assets/pdf/NII-OH2019-hasuo_20190531.pdf)

## TL;TD;

ここでは型システムをプログラムに関する推論のためのツールだとみなしている。

> 軽量(light weight)形式手法
実際の開発に携わる人々の中には、形式手法コミュニティが仕様記述と設計の完全な形式化を強調しすぎていると感じている。彼らは対象となるシステム自体の複雑性だけでなく使用する言語の表現能力が完全かどうかが形式化を困難にしていると主張する。代替案として様々な軽量（ライトウェイト）な形式手法が提案されてきた。それらは部分的な仕様記述と応用に注力したものである。このようなライトウェイトな形式手法の例として、型システム、uppaal Alloy オブジェクトモデリング記法、Z言語によるユースケース駆動型開発、CSK VDM ツールセットがある。

1. 型システムは軽量形式手法の1例である。
1. 型システムを使った開発は、形式手法の水準1だとみなしている
    2. wikiの形式手法の水準１に書かれている「形式手法を使って開発と検証」の例に「詳細化と属性の証明」がある。つまり、コードを書いて、コンパイルを通す事と同義。
1. [Coq](https://coq.inria.fr/)で[証明駆動開発](https://www.iij-ii.co.jp/activities/programming-coq/coqt8.html)して、Extractionする開発手法が水準2だと思っている

[形式手法](https://ja.wikipedia.org/wiki/%E5%BD%A2%E5%BC%8F%E6%89%8B%E6%B3%95)を調べたら、非形式主義的という言葉が出てきた。

> 水準0
形式仕様記述を行い、プログラム自体を非形式主義的に行う。「軽い形式手法」と呼ぶ。費用対効果が早く得ることができる選択である。

そもそも[形式主義](https://ja.wikipedia.org/wiki/%E5%BD%A2%E5%BC%8F%E6%89%8B%E6%B3%95)とはなんだろうか？ :thinking: 

> 一般に事物の内容よりも形式を重んずる立場。ものごとの形式を重んじてそれにこだわり、内容を軽視もしくは無視する立場。また、その考え。
* 数学用語としての形式主義 - 形式主義 (数学)

なるほど、数学用語なんですね。
つまり、水準0は、プログラム自体は「内容よりも形式を重んずる立場**ではない**」が、形式仕様記述は行う。この組み合わせは費用対効果が高いらしい。

ここでまた1つ知らない用語が出てきた。
[形式仕様記述](https://ja.wikipedia.org/wiki/%E5%BD%A2%E5%BC%8F%E4%BB%95%E6%A7%98%E8%A8%98%E8%BF%B0)とはなんだろう？

> 形式仕様記述（けいしきしようきじゅつ、英: formal specification）とは形式手法のひとつで、何らのシステムなどについて、その性質などの仕様を形式的に記述する手法や、そういった手法による仕様の記述である。

「その性質などの仕様を形式的に記述する」 => プログラミングにおいては、データの型(形式)に関してそこまで書かないが、アルゴリズム等は記述する必用のある、スクリプト言語とかが合致しそうですね。

> 形式的な仕様を与えることにより、対象システムが仕様に照らして正しいかどうかを形式的に判定することが可能となる(形式的検証)。また、仕様策定の工程で仕様の不整合を検出することが可能となり、実装工程のような開発の後半での仕様不備発覚、それに伴う手戻り(多大なコストを要する場合が多い)を防ぐという利点がある。他の使われ方として、仕様から設計、設計から実装へと段階的に検証可能なステップを踏んで詳細化し、開発工程で不具合を作りこむのを防ぐ。

「形式的な仕様を与えることにより、対象システムが仕様に照らして正しいかどうかを形式的に判定することが可能となる」 => つまり、型を書くことにより、型システムでの検査が可能になり、型システムの仕様に照らして正しいかどうかを形式的に判定することが可能となる。
ラズパイ3B+にopencvとtifffileを入れられたときにやったこと

つらかったので、情報共有。みんなも何か解決したら記事書いてね。


自分は以下のことを試してダメでした。
- 自分でコンパイル
- aptだと安定
- Pythonなんだからaptじゃなくてpip3
- Pythonのバージョンを変える(3.6はRaspbian非対応）
- piwheelsのレポジトリを追加（既にあるやんけ）

## 0. 動機
こいつを使いたい。
https://github.com/Kheirlb/purethermal1-uvc-capture

## 1. Raspbianを新しくした。
これのおかげで全てうまく行った。
バージョン10であるBusterに変更。
StretchとかJessieとかを知らないレベルだったからここまでたどり着くのにも苦労した。
入れ替え方はhttps://jyn.jp/raspbian-setup/ を参考にしました。

## 2. opencvのインストール
アップグレードしたからか、すんなり行った。

```
sudo apt install python3-opencv
```


## 3. tifffileのインストール
tifffileを入れようとしたけど、なんかうまく行かなかった。
エラーの文を読むとimagecodecsをうまく入れられなかったみたい。
なので、https://pypi.org/project/imagecodecs/ を参考にしてインストール。
本当は１行目に`libjpeg-turbo8-dev`ってのもあったんだけど、エラーでたんで省いてやってみた。

```
sudo apt-get install build-essential python3-dev cython3 python3-setuptools python3-pip python3-wheel python3-numpy python3-pytest python3-blosc python3-brotli python3-snappy python3-lz4 libz-dev libblosc-dev liblzma-dev liblz4-dev libzstd-dev libpng-dev libwebp-dev libbz2-dev libopenjp2-7-dev libjxr-dev liblcms2-dev libcharls-dev libaec-dev libbrotli-dev libsnappy-dev libzopfli-dev libgif-dev libtiff-dev
pip3 install tifffile
```
２行目はいらないかもしれない。

## 4.うまく動作しました！
`libjpeg-turbo8-dev`を省いたからうまくいくか不安だったのですが、無事にうまくいきました。
２次元の温度の情報もばっちり撮れました。

これで次の段階に進めます。

## 5. アプリのインストール（追記）
https://github.com/Kheirlb/purethermal1-uvc-capture

```
sudo git clone --depth 1 https://github.com/Kheirlb/purethermal1-uvc-capture
sudo chmod 775 build_pi_thermal_app.sh
sudo ./build_pi_thermal_app.sh
```

カメラとして使うには
ui_software/Parabilis_ThermalにあるRecordIR_v18.3.pyをダブルクリック→実行を選択すればOK。

コンソールで該当のディレクトリに移動した後、
sudo python3 RecordIR_v18.3.py
を使うとログも吐いてくれる。

## 6. しばらくして問題発生（追記）
一時期アプリがうまく動かない時があった。
LeptonとPureThermal2の接続がうまくいっていなかったのが原因だったみたい。
Leptonをカチッと押し込んで解決。

症状としては、なんにもエラーが出ないんだけど温度情報が出てこない感じ。
`sudo python3 RecordIR_v18.3.py`をやってみるとなんか型番とか取れてなかい感じのログがコンソール画面に出力された。
カメラ自体も不思議で、FFCが自動実行されていなかった。（普通は定期的にFFCが実行される）
MacOS Catalina: 環境設定パネルを読み込めませんでした

# 環境設定パネルを読み込めませんでした

アプリケーションインストール時に, `環境設定パネルを読み込めませんでした`のエラーが発生し、
インストールできない場合の解決方法をご紹介致します

## 解決方法
デモでは [MouseZoom](https://mousezoom.en.softonic.com/mac)を使います

1. アプリケーションをダウンロードする
2. インストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607057/d6e53a9a-1808-617f-6e93-32fcdccba8ba.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607057/1ba182b5-b8d1-d096-c0e5-a3cd6e940e4c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607057/fc8d8206-49ef-593a-a9ad-a3ea7acabe36.png)

3. ターミナルを開く
以下のコマンドを実行
```
sudo xattr -d -r com.apple.quarantine ~/Library/PreferencePanes/CursorSense.prefPane/                               ```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607057/aa7a83e5-f5a2-ca44-813b-a2f6ce352d29.png)


4. システム環境設定を再起動
-> 一旦閉じないと更新されないため、必ず再起動してください


### 参考記事
https://manytricks.com/blog/?p=4986
==演算子とeqalsメソッドの違い

どーも、ふぎとです。

今回はちょっとした備忘録。
##==演算子とequalsメソッドとはどう違うのか？
結論を言うと、


「**==演算子は同一性を判定し、
equalsメソッドは同一性及び同値性を判定する**」

という違いがあるそう。

#「同一性の判定」とは
「同じインスタンスであるか否か」ということ。

#「同値性の判定」とは
「インスタンスに格納されている値が同じであ
るか否か」ということ。


例を以下に示します。
##サンプルプログラム

~~~ruby:
public class Example{
    public static void main(String[] args){
        String s1 = "012";
        String s2 = new StringBuilder("012").toString();

        if(s1 == s2){
            System.out.println("true");
        }else{
            System.out.println("false");
        }

        if(s1.equals(s2)){
            System.out.println("true");
        }else{
            System.out.println("false");
        }
    }
}
~~~

　"s1 == s2"は、「**s1とs2は同一のインスタンスであるかどうか**」が
判定されます。上のプログラムにおいて、s1とs2はそれぞれ独立した
インスタンスとして作成されています。したがって同じインスタンス
とは言えないので、**false**が返ってきます。ちなみに、以下のように
書き換えるとs1==s2はtrueとなります。

~~~ruby:
String s1 = "012";
String s2 = s1;
~~~
　一方、equalsメソッドは、最初にメソッド内で==演算子による同一
性の判定を行った後、同値性の判定を行います。ここで、**s1とs2には
同じ"012"という文字列リテラルが格納されている**ので、s1.equals(s2)
は**真**となります。

##まとめ
・==演算子は**同一性**を判定する
・equalsメソッドは**同一性及び同値性**を判定する
・同一性の判定とは「**同じインスタンスかどうか**」
・同値性の判定とは「**インスタンスに格納されて
　いる値が同じかどうか**」
VSCodeおすすめ拡張機能

新しい環境にインストールするときとかに使うために備忘録。
他のところでも結構おすすめされてる感があるものもは下の方に配置しました。

# 見た目いじる系
好きなテーマはMonokai。

名前|説明
---|---
[Background Phi Colors](https://marketplace.visualstudio.com/items?itemName=wraith13.background-phi-colors)|すんごいおすすめ。とにかく試しに入れてみてほしい。単語を選択時のハイライトを行単位でやってくれる。[Qiitaにドキュメントがあります](https://qiita.com/wraith13/items/5da436536d6a98bd8924)。
[Background](https://marketplace.visualstudio.com/items?itemName=shalldie.background)|背景に画像を表示できる。変更もできる。[設定方法が書いてあるありがたい記事](https://qiita.com/Azoson/items/9e06099ea738cf450c73)
[Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)|TODOとか@paramに色を付けてくれます。
[FileSize](https://marketplace.visualstudio.com/items?itemName=mkxml.vscode-filesize)|左下にファイルサイズ表示してくれる。地味に好き。
[Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)|JavaScriptとTypeScriptだけですが、動作速度を調整したいときに便利そう。[Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer) |対応するカッコごとに色を付けてくれます。
[Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)|名前の通りのアイコンセット。
[Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)|対応するカッコを同じ色で色付してくれます。
[Output Colorizer](https://marketplace.visualstudio.com/items?itemName=IBM.output-colorizer)|コンソール部分に着色。
[Rainbow CSV](https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv)|カラムごとに色分けしてくれます。


# メモ系(Markdown)
MarkDownは差分も取れるので便利ですよね。

名前|説明
----|----
[VSNotes](https://marketplace.visualstudio.com/items?itemName=patricklee.vsnotes)|メモ専用のマークが左側に出てきます。[設定方法が書いてあるありがたい記事](https://qiita.com/yama_ebi/items/bcdf94757495cdb2dc80)
[Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)|太字とかのショートカットはもちろん、Alt + Shift + Fのテーブルフォーマットとか便利。[使い方が書いてあるありがたい記事](https://qiita.com/sola-msr/items/cfe448db958da3d08863)


# その他の機能追加系
名前|説明
----|----
[Draw.io integration](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio)|クラス図とか書くときに便利なdraw.ioの機能を統合してくれます。拡張子はdio。
[Partial Diff](https://marketplace.visualstudio.com/items?itemName=ryu1kn.partial-diff)|クリップボードの内容とのDiffが取れる。
[Prettier](https://github.com/prettier/prettier-vscode)|コードをきれいにしてくれる
[Regex Previewer](https://marketplace.visualstudio.com/items?itemName=chrmarti.regex)|正規表現関連。JavaScript, TypeScript, PHP, Haxeのみ。[こういうの](https://blog.codecamp.jp/php_regular_expression)も便利。
[Visual Studio IntelliCode](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode)|予測変換的なやつ。[困ったときに使えそうな記事](https://qiita.com/kusanoiskuzuno/items/fc6a32ef32dd9500f746)
[Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)|予測変換のパス版。
[Live Share](https://visualstudio.microsoft.com/ja/services/live-share/)|複数人でシェアできる！最近はリモートワークも流行ってますし、使えそうですね。[色々書いてあるありがたい記事](https://qiita.com/taichi0514/items/95aca7428376a7b41f90)
[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)|ローカルサーバーを立ててくれる。[色々書いてあるありがたい記事](https://qiita.com/kn339264/items/e6f6a69f70a96e61fc11)
bundle installでmysql2のエラーが出たときに見る解決法


bundle installエラーが出た際、解決まで結構時間がかかってしまったので、まとめて置こうと思います。

#エラー内容

```terminal:実行コマンド
bundle install
//エラー
An error occurred while installing mysql2 (0.5.3), and Bundler cannot continue.
Make sure that `gem install mysql2 -v '0.5.3' --source 'https://rubygems.org/'` succeeds before bundling.
```

```terminal:実行コマンド
bundle install
//エラー
Could not find gem 'sass-rails (>= 6)' in any of the gem sources listed in your Gemfile.
Run `bundle install` to install missing gems.

```

#原因
見てみるとどうやらlsslが見つけられないのが原因らしい。
エラーの内容の中にこのエラーがある人はこの記事の方法が役に立つかもしれません。
lsslが見つからないということらしい。

```terminal:エラー原因
ld: library not found for -lssl
```
####そもそもldってなに？
ldとは、GNUリンカーと呼ばれるコマンドで、コンパイルされたオブジェクトファイルから実行可能ファイル( またはライブラリ)を作成することができるものです。

####続いて-lsslってなに？
mysql2 gemインストール時にldコマンドに与えられたオプションの一つで、libssl.dylibをライブラリ検索範囲から探してねって言うことらしいです。

#解決
以下のコマンドを実行

```terminal:実行コマンド
bundle config --local build.mysql2 "--with-ldflags=-L/usr/local/opt/openssl/lib"
```

###実行コマンドの意味
実行コマンドが意味不明だったため、後で見てもわかるようにまとめておきます。

- bundle config
設定システムを編集します。

- --local build.mysql2 
ローカルでmysql2をビルドした際に以下の通りビルドしてください。

- --with-ldflags=-L/usr/local/opt/openssl/lib
ビルドする際は以下を参照してください。
参照先は-L/usr/local/opt/openssl/libです。



###「今後ローカルでmysql2をインストールする場合は/usr/local/opt/openssl/libの場所を参照してくださいね」
って感じですかね。

#参考記事
ありがとうございました！

[【Rails】MySQL2がbundle installできない時の対応方法](https://qiita.com/fukuda_fu/items/463a39406ce713396403)
[mysql2 gemインストール時のトラブルシュート](https://qiita.com/HrsUed/items/ca2e0aee6a2402571cf6)
[Ruby STUDIO](http://ruby.studio-kingdom.com/bundler/)
gitlab-ciでDoxygenを動かす

# 目的

本記事では、gitlab-ciを用いて、gitlabにPushされたタイミングでDoxygenによるAPIドキュメントを出力する手順を紹介する。
なお、Doxyfileを生成する過程とDoxyfile、Doxygenについての説明は割愛する。

# 手順

では、サンプルコードを使って、Doxygenを動かしドキュメントを生成していく。
今回のサンプルプロジェクトは以下のようなディレクトリ配置となっている。
Doxyfileはあらかじめ用意しておく。

```
.
├── .gitlab-ci.yml #CIのジョブスクリプト
└── sample
    ├── Doxyfile #用意したDoxyfile
    └── sample.py #ドキュメント生成対象のサンプルソースコード
```
今回は`sample.py`についてのドキュメントを出力する。
CIで実行されるジョブスクリプトである`.gitlab-ci.yml`は以下の通り。

```yaml:.gitlab-ci.yml
image: hrektts/doxygen:latest

stages:
  - gen_document

Doxygen:
  stage: gen_document
  script:
    - cd sample
    - doxygen Doxyfile
  artifacts:
    name: "doxygen"
    expire_in: 1 week
    paths:
      - sample/html
```
使用したDocker Imageは[こちら](https://hub.docker.com/r/hrektts/doxygen/)。
これにより、HTML形式のドキュメントをgitlabからダウンロードすることができる。
以下の画像のアイコンからダウンロードしたいArtifactsを選択すればよい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267287/5ab3c4b8-3d13-61ab-7f0b-15813662020f.png)
JavaScript で音声を順に再生する方法

## 音声が複数個あっても順に再生したい！！！
非同期処理って難しいですね…
テキストを音声化して再生するといった動作を実装したのですがそこでハマったことをメモとして書き出していきます。

## 概要
1. 音楽ファイルを用意する
2. 音楽ファイルを DataURI Scheme 形式（base64） にエンコードする
3. await を使って順に再生するように実装する

## 1. 音楽ファイルを用意する
適当な音楽ファイルを用意して読み込みます。
[File API](https://developer.mozilla.org/ja/docs/Web/API/File) とか使えば読み込めるかと思います。
今回はサーバーにテキストを送ると音声データが返ってくる仕様だったので読み込む動作は割愛します。

## 2. 音楽ファイルを DataURI Scheme 形式（base64） にエンコードする
ローカルから読み込む場合は、File API の `URL.createObjectURL()` 使えばエンコードできると思います。
今回は送られてきた音声データを base64 にエンコードして返してくれるように自作 API を実装しました。

## 3. await を使って順に再生するように実装する
ここでループ回して await 使って音声再生… で終わると思っていたのですが、音声がすべて同時に再生されてしまい、うまくいきませんでした。
そこで Promise オブジェクトを作成し、音声の再生終了後までループが止まるように実装したところ、うまく動かすことができました。

``` js
for (const d of data) {
    const targetSoundBase64 = d.base64;

    // 音声の再生が終わるまでループを回さないように止めておく
    await new Promise((resolve) => {
        const sound = new Audio("data:audio/wav;base64," + targetSoundBase64);
        sound.play();
        sound.addEventListener('ended', async () => {
            // 音声終了後にいきなり次の音声が再生されてると違和感がすごいのでちょっとスリープかける
            await sleep(100);
            resolve();
        }, {once: true});
    });
}
```

最初は音声の秒数を取得してその曲が終わるタイミングで次の曲が再生されるように setTimeout を使おうかと考えていたのですが、こっちのほうがいい感じのコードになるかなと思われます。

## まとめ
テキストチャットの音声化のような複数の音声データを順に再生するような状況になった場合、このように実装すればいいのではないでしょうか。

非同期処理、わかるようでわからず難しいなーと感じました。
もっと勉強頑張ります😇
Webデザイナーの仕事内容や働き方について

※本稿は弊社ホームページに記載のものを転載しています。
<img width="752" alt="図1b.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/600643/9a11f2be-c1fe-07b3-86c2-0b7b58441d87.png">

Webデザイナーは、クリエイティブな職種として近年注目を集めています。そんなWebデザイナーの仕事内容は広く言うとWebサイトの制作に携わることです。

通常Webサイトを制作するにはチームで行うことが一般的です。制作に関わる職種は、Webサイトの仕様を決めるWebディレクター、サイトを構築するコーダー、文章を作成するライターなどさまざまです。

その中でWebデザイナーは、デザインソフトを駆使してWebサイトの見た目の部分を作ります。制作チームの一端を担うWebデザイナーですが、最近では在宅やインハウス等、働き方も多様化してきています。

Webデザイナーはパソコンとインターネット環境があれば仕事ができる性質上、ある程度のスキルがあれば場所を選ばずに働けることも人気の理由の一つです。

##Webデザイナーの仕事内容
Webデザイナーの主な仕事内容はPhotoshopやillustratorなどのデザインソフトを使って、Webサイトの全体像やボタンなどの見た目の部分を作ることです。会社によってWebディレクターやコーダーと兼務している場合もあり、どこまでが業務範囲かという明確な決まりはありません。WebデザイナーからWebディレクターになり、管理業務のみ行う人もいれば、企画からサイト作成まで全てを一人で行う人もいます。そこで一般的にコーダーを兼務している場合のWebデザイナーの仕事内容をそれぞれの項目ごとに確認していきましょう。

###Webサイトの要件整理
まずはじめに、Webサイトを作りたいクライアントの目的をヒアリングし要件を整理します。クライアントの目的やターゲットによってWebサイトの仕様やデザインが変わるため、しっかりとヒアリングを行う必要があります。サイトの目的、要件をコンセプトに落とし込みます。サイトコンセプトを企画書にまとめ、クライアントの合意を得ます。

###Webサイトの構成とレイアウト（ワイヤーフレーム）
コンセプトが決まったら、Webサイトの設計図となるワイヤーフレームを作ります。ワイヤーフレームとは骨組みという意味です。このときにサイト内のページ数、コンテンツの位置や数、大きさなどを決めます。構成とレイアウトはサイトの使いやすさや、集客にも影響する重要な作業です。

###Webサイトのデザインを作る
Photoshopやillustratorを使って、Webサイトの実際の見た目を作っていきます。このときにサイト全体のカラーや、ボタンのデザインなどを決めていきます。まずデザインカンプを作ります。デザインカンプとは、サイト制作に取り掛かる前のデザイン案のことです。デザインカンプでOKが出れば、実際にサイト制作に取り掛かります。デザイン作成はミリ単位の調節が求められる繊細な作業です。

###Webサイトのコーディング
Webサイトの見た目ができたらコーディングを行います。Webサイトは見た目を作るだけではインターネット上に表示されません。コーディングによってインターネット上に認識させることでWebサイトを観覧できるようになります。コーディングにはHTMLとCSSを使います。HTMLはマークアップ言語と呼ばれ、文字情報を表示するために使います。CSSはサイト内の色や画像、見た目を定義します。Webサイトに動きや、システムを組み込むにはJavaScriptなどのプログラミング言語が必要です。

##Webデザイナーの働き方
![図2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/600643/5df3fd8c-7cfb-cbd0-95c0-3ac875e896ae.png)

Webデザイナーといっても、様々な働き方があります。働き方にはインハウス、制作会社、SES会社、フリーランスなどがあり、雇用形態や仕事内容なども変わってきます。

###インハウス
企業に所属し、自社のWebサイトやサービスを担当するWebデザイナーです。業務の幅が広く、パンフレット作成などいろいろな経験ができることが魅力です。企業によっては、Web担当者が他におらず、全てをやらなければいけない場合があります。デザインの幅は少ないので、いろいろなデザインを担当したい人には向きません。

###制作会社
クライアントから依頼を受けてWebサイトを制作します。新規サイト制作や、既存サイトのリニューアルなどを担当します。新規のWebサイト制作の場合、クライアントや案件ごとにデザインをゼロから考えることも多く、デザインセンスが求められます。クライアントの都合で納期が決まるため、仕事に追われることもありますが、様々なデザインを経験したい人には向いています。

###SES会社
SES（システムエンジニアリングサービス）会社は、自社で契約しているエンジニアを、外部の会社に客先常駐として派遣する会社のことで、最近ではWebデザイナーにも波及しています。常駐先は一般企業や制作会社などで、大手で働ける機会もあります。未経験でも採用されやすいことがメリットです。業務内容が単純作業になりがちで、スキルアップが難しいというデメリットもあります。

個人で独立して仕事を請負うWebデザイナーです。仕事の請負先は、企業や個人など多岐にわたります。フリーランスは自分で仕事を獲得する営業力が必要ですが、最近では営業代行サービスなども増えてきています。フリーランスは自分の裁量で仕事量などを決められることが魅力です。反面、トラブル対応などすべて自分でやらなければならないため、ある程度の実力と対応力が求められます。

##Webデザイナーのしごと内容まとめ
![図3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/600643/11beff1c-2214-2941-002c-a3b2f9abbe57.png)

今回はWebデザイナーの仕事内容や働き方について紹介しました。Webデザイナーは単にデザインするだけでなく、Webサイト制作のさまざまな業務に携わる仕事だということがわかっていただけたと思います。Webサイト制作は技術の移り変わりが早く、デザインのトレンドも変化します。Webデザイナーとして成長意欲があり、向上心をもって取り組める人が向ている職業といえるでしょう。
nginx + StackdriverでAPIの平均レスポンスタイム(ms)をグラフ化したい

nginxのログのrequest_timeやupstream_response_timeは
43msの場合は0.043のような形式でログに吐き出されてしまい、Stackdriverlogで
カスタムログベースの指標を作成する際にうまく表示できていませんでした。

致し方なくヒートマップ表示に甘んじていたのですが、これが解決できたので備忘録で記載しておきます。

# nginxのログフォーマットを変更

```nginx:default.conf
log_format stackdriver escape=json '{"severity":"INFO",'
        '"timestamp":"$time_iso8601",'
        '"httpRequest":{'
          '"requestMethod":"$request_method",'
          '"requestUrl":"$request_uri",'
          '"requestSize":$request_length,'
          '"status":$status,'
          '"responseSize":$bytes_sent,'
          '"userAgent":"$http_user_agent",'
          '"remoteIp":"$remote_addr",'
          '"serverIp":"$server_addr",'
          '"referer":"$http_referer",'
          '"latency":"${request_time}s",'
          '"request_body": "$request_body",'
          '"protocol":"$server_protocol"'
        '},'
        '"uri": "$request_uri",'
        '"status":$status,'
        '"queryString":"$query_string",'
        '"userId":"$sent_http_x_user_id",'
        '"upstreamResponseTime":"${upstream_response_time}s",'
        '"pod":"$hostname",'
        '"host":"$http_host"}';

~skip
        access_log /var/log/nginx/access.log stackdriver;
```

ここでキモになるのが

```
"${upstream_response_time}s"
```
この記載方法でログ指標の分布をうまく使えるようになります（sは秒の単位として扱われます）他の情報は自分の欲しい情報をうまく取りましょう

これでNginxのログがこんな形で返却されます

```log
{"severity":"INFO","timestamp":"2020-03-25T06:25:58+00:00","httpRequest":{"requestMethod":"GET","requestUrl":"/","requestSize":87,"status":200,"responseSize":208,"userAgent":"GoogleHC/1.0","remoteIp":"**.**.**","serverIp":"**.**,**","referer":"","latency":"0.014s","request_body": "","protocol":"HTTP/1.1"},"path": "/","status":200,"userId":"***","upstreamResponseTime":"0.013s","pod":"****","host":"**.**.**.**"}
```

"latency":"0.014s"のようにうまく取れていればおkです

# ログベースの指標の作成

まずは対象のNginxログを確認しましょう
![200325-0001-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42874/958cf5a4-0167-1e47-9f27-e5900472eb2f.png)

ちゃんとStackdriverLogがmsだと認識できていますね、完璧です。
それではこのログでログベースの指標の作成をします

![200325-0002-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42874/1be46729-57e7-614e-7278-8a9d8bb9ae59.png)

分布を作成したいので単位を「s」として、Distributionタイプに変更、分布の対象フィールド名を「httpRequest.latency」とします。

自分は各API単位の平均レスポンスをグラフ表示させたかったのでpathという名前でラベルを作成しています。対象フィールドはhttpRequest.requestUrlです。

ラベルを作成しておくと、Stackdriverでグラフ表示する際にフィルタリングやグループ化を行えます。必要に応じて作成しましょう

# グラフを作成

あとはMetrix Exporterで作成した指標をグラフ化するだけです。
完成するとこんな感じで見れるようになります
下のグラフはAPIをグループ化して各API単位で平均レスポンスタイムを表示しているグラフです

![200325-0003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42874/bd583c47-baca-016b-5f6e-1aa6968166b8.png)

# まとめ
このグラフが欲しくて欲しくてたまらなかったのですが前述のログフォーマットのせいで作れずに苦心していました、やっと欲しい情報を手に入れることができました！同じ問題を抱えてる方の一助になれば幸いです。

ご意見マサカリ等ありましたらお気軽にどうぞ

# 謝辞
参考にさせていただきました！ありがとうございます
https://839.hateblo.jp/entry/2019/12/20/090000
使っているAtomのパッケージ

個人的な備忘録です。

割と色々なマシンで作業している上に、それぞれの環境でマシンのリプレースなどあるので、いちいち開発・分析環境を整えるのが大変。

いい加減使っているパッケージをまとめておこう。

- atom-ide-ui
    - Rust の開発環境のために導入した。どちらかと言うと Python の Linter のために使っている。
- git-blame
    - コードのどの行を誰がいつ編集したかを見ることができるパッケージ。ごく稀に使う。
- git-history
    - ファイルの変更履歴を見ることができる。何かの依存で入った。
- git-log
    - コミットログを見るために導入した。ごくたまに見る。
- git-plus
    - 諸々の Git 操作をするために導入した。とはいえ細かい Git 作業はターミナルで行なっている...
- git-time-machine
    - ファイルの変更履歴をグラフィカル・インタラクティブに見るために導入した。ごくたまに使う。
- ide-rust
    - Rust の開発環境。ごく稀に使う。
- linter-docker
- linter-flake8
    - Python のコードチェッカー。とても便利。
- linter-rust
- pigments
    - 何かの依存で入った。
- project-plus
    - 同じウィンドウで複数のディレクトリ (プロジェクト) に移動するため。とても便利。
- remote-ftp
    - サーバーにSFTPでファイル同期することができる。とても便利。

割と不要なものが多い気もする。リンターやプロジェクト周りは必須な気がする。

あれも便利・これも便利とか入れていると、重くなりそうでできるだけ少なくしたいが、利便性も高めたい。

ターミナルを離れて、Atom や VSCode で完結できるようになれるといいな (特に Git)。

dotfiles は[こちら](https://github.com/ieiriyuki/dotfiles)。
MacのキーボードをUS配列にする

# US配列にする

普段からUS配列を使っているが，MacBook ProでMojaveをアップデートしたらJIS配列になったので再びUS配列にしようとした．しかし，
`システム環境設定 > キーボード > "キーボード"タブ > キーボードの種類を変更`
が**存在しなかった**．そのため別のアプローチを取ることにした．

ターミナルに以下のコマンドを入力する．

```
$ sudo rm -f /Library/Preferences/com.apple.keyboardtype.plist
```

再起動すると，キーボードが認識できないと言われるので，指示に従って進める．
途中，キーボードの種類を指定できるので**ANSI**を選択する．

この後はUS配列で使うことができる． `キーボードの種類を変更`も出現する．
StackDriver loggingでログを追加する方法

#はじめに
StackDriver loggingでログを追加してみたいと思います。
マニュアルはこちらです。
https://cloud.google.com/logging/docs/agent/configuration

#前提
debian-9-drawfork-v20191004でGCE起動して試してました。

#Fluentd設定
Stackdriver loggingは、Fluentedを使用しています。そのため、ログを追加するためにFluentedの設定をします。今回は試しにscriptコマンドで出力したコンソールログをStackdriver loggingに転送したいと思います。
設定ファイルは、「/etc/google-fluentd/config.d」配下に作成します。

```
$ vi /etc/google-fluentd/config.d/script.conf 
<source>
  @type tail
  #フォーマット未設定
  format none

  #転送するファイルパス
  path /home/matsushi/console.log
  pos_file /var/lib/google-fluentd/pos/script.pos
  read_from_head true
  #TagとしてScriptを指定
  tag script
</source>
```

fluentdを再起動して設定を読み込みます

```
sudo service google-fluentd restart
```

スクリプトコマンドを実行し、ログを出力します。

```
$ script /home/matsushi/console.log 
Script started, file is /home/matsushi/console.log
$ ls
console.log  typescript
$ hostname
instance-1
$ exit
Script done, file is /home/matsushi/console.log
```

Google Cloud ConsoleのStackderiver loggingの画面でログが出力されていること確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78184/fe573ed3-e68a-2b13-341e-b5c2e0ef28ef.png)

#投稿内容は私個人の意見であり、所属企業・部門見解を代表するものではありません。
DOSプロンプト上で実行するコマンドの、処理時間を計測したい

# TL;DR

* DOSプロンプト上で実行するコマンドの処理時間を計測したい
* PowerShellの`Measure-Command`を使うのがお手軽


# `Measure-Command`

ここでの手法は、DOSプロンプト上でPowerShellを一時的に起動して`Measure-Command`を使用するやり方です。

[Measure-Command](https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.utility/measure-command?view=powershell-7)

以下のような感じで使います。

```shell
>powershell -C Measure-Command {計測したいコマンド}
```

例。

```shell
>powershell -C Measure-Command {echo Hello}
Days              : 0
Hours             : 0
Minutes           : 0
Seconds           : 0
Milliseconds      : 9
Ticks             : 96164
TotalDays         : 1.11300925925926E-07
TotalHours        : 2.67122222222222E-06
TotalMinutes      : 0.000160273333333333
TotalSeconds      : 0.0096164
TotalMilliseconds : 9.6164


>powershell -C Measure-Command {timeout 5}
Days              : 0
Hours             : 0
Minutes           : 0
Seconds           : 4
Milliseconds      : 479
Ticks             : 44796443
TotalDays         : 5.18477349537037E-05
TotalHours        : 0.00124434563888889
TotalMinutes      : 0.0746607383333333
TotalSeconds      : 4.4796443
TotalMilliseconds : 4479.6443
```

`Measure-Command`を`()`で囲むことで、特定のフィールドのみを取得することもできます。

```shell
>powershell -C (Measure-Command {timeout 5}).Seconds
4                      
```

覚えておきましょう。
Windows Terminal Startup Command (起動時に任意のコマンドを実行する)

`Windows Terminal` で PC　の起動時に任意のスクリプトやコマンドを実行する方法をまとめました。

# Required 
- Windows Terminal version v0.9.433.0 or later

# 方法

1. windows key + R を押す
2. shell:startup と入力し、OKを押す 
3. 開いたエクスプローラでコマンドプロンプトのショートカットを作成 。
自分の環境では下の場所でした。
` 
C:\Users\xxxxx\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup
`
4. 右クリックしてプロパティを開き、ターゲットに下のように入力する。 

```
C:\Windows\System32\cmd.exe /K wt -d [path to startup directory] wsl [command] & exit
```
ここまでで任意のコマンドは実行できるはずです。しかし、処理が終了した瞬間`windows terminal`が閉じてしまう。そこで、
6. windows terminal を開き、設定のプロフィールの中に`"closeOnExit": "never"`を追記する。

#　参考
 [github microsoft/terminal issues 4864](https://github.com/microsoft/terminal/issues/4864)
画像のアスペクト比を維持しながら縮小させるmixin（だけどmixinじゃなくても大丈夫だった）

タグで囲った画像（もしくは背景画像）を、ブラウザの幅縮めてもうまい具合に縮小させてくれるアレです。

```sass:scss
@mixin img_ratio($property, $width, $height) {
	#{$property}: percentage($height / $width);
}
```

# 使い方
いつもみたいに`@include`でよみこんで使いましょう

たとえば、300x200の画像のアスペクト比をpadding-topに出したい場合は

```sass:scss
@include img_ratio(padding-top, 300, 200);
```

になります。

コンパイル後は

```css:css
padding-top: 66.66667%;
```

こうなりました。

# 少しだけ解説
`+ %`とか`#{%}`とかつけといたらいけるだろう、と思ってたらできませんでした。😂
ので、いろいろと調べてみたわけなんですけども・・・

`percentage`をつけると、単位のない数値をパーセントに変換してくれます。
公式サイトでは以下のページに解説がありました。

[sass:math](https://sass-lang.com/documentation/modules/math#other-functions)

個人的によくつかうのでmixin化しました。
ここまちがってるぜ！的な指摘あればぜひぜひ・・・😂

# もっと簡単だった
あとからご指摘いただいて、以下のようにすればmixin使わなくてもできるやん、ってなりました😆

```sass:scss
padding-top: percentage(200 / 300);
```
でも私、すぐ忘れてしまうので・・・（考え方とか、手順とか、なぜそうなるのかの部分）
念の為、記事はそのまま残しておくのです・・・😂
GitHub Actionsのバッジをリンク付きでREADMEに追加する

GitHub Actionsがリリースされしばらくし、結構使われているレポジトリが増えてきています。
さらに、 `README` にバッジを置いておくとそれだけで見栄えがよくなるのでオススメです。

<img width="593" alt="スクリーンショット 2020-03-25 14.58.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15319/75ab33ca-225b-9398-3ce9-62ecf021bf14.png">

バッジをどこで取得できるかというと、対象のアクションに飛んで (`https://github.com/<user>/<repo>/actions?<workflow>`) `Create status badge` をクリックし `Copy...` ボタンを押すだけです。便利ですね。

<img width="364" alt="スクリーンショット 2020-03-25 13.13.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15319/7285e64f-477f-ea87-6b5c-e05d69eab03d.png">

しかしながら、デフォルトでコピーしただけだとちょっと不便なところがあります。下に2つバッジがありますが、違いがわかりますでしょうか？
上がCopyしただけのバッジです。

![test](https://github.com/akameco/extract-react-intl-messages/workflows/test/badge.svg)
[![test](https://github.com/akameco/extract-react-intl-messages/workflows/test/badge.svg)](https://github.com/akameco/extract-react-intl-messages/actions?query=workflow%3Atest)

クリックすると明白ですが、上は対象のアクションへのリンクになっていません。そのため、`[<ここにコピーしたバッジ>](対象のアクションへのリンク)` のように書いてリンクにしてあげる必要があります。

毎回これをするのは面倒なので、簡単なユーザースクリプトを用意しました。

UserScriptを実行する拡張が入っていれば、以下のリンクを開いて、`Row`を押すだけでインストールできます。

https://gist.github.com/akameco/e69b8759c5fb173301eddc0da14c3462

中身としてこれだけです。

```js
// ==UserScript==
// @name         add badge for action link
// @namespace    https://github.com/akameco
// @version      0.1
// @description  add badge for action link
// @author       akameco (https://github.com/akameco)
// @match        https://github.com/*/*/actions*
// @grant        none
// ==/UserScript==

const el = document.querySelector('#badge-markdown')
el.textContent = `[${el.textContent}](${location.href})`
```


<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="ja" dir="ltr">GitHub Actionsのバッジ簡単に設定できて便利なんだけど、そのままコピペするとsvgへのリンクになって不便なので対象のアクションへのリンクにする雑なユーザースクリプト用意した<a href="https://t.co/z53uo70JLs">https://t.co/z53uo70JLs</a> <a href="https://t.co/xLamjw0qPl">pic.twitter.com/xLamjw0qPl</a></p>&mdash; あかめ@無職.js (@akameco) <a href="https://twitter.com/akameco/status/1242697865413021696?ref_src=twsrc%5Etfw">March 25, 2020</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
forEach だと await が効かない

## はじめに
以前制作したアプリケーションの実装中にハマってしまった解決策のメモです。
いつか使うだろうと言うことで書いておきます。

## 結論
`for of` を使って実装しましょう

``` js
const texts = [...];
for (const text of texts) {
    const fetchData = await fetch(...);
    fetchDataArray.push(fetchData);
}
```

## データを取得して直列的に待ちながら処理をしようとしたら…

いつもの感覚で forEach を使って実装したらうまく動きませんでした…

``` js
const texts = [...];
texts.forEach((e) => {
    const fetchData = await fetch(...);
    fetchDataArray.push(fetchData);
});
```

どうやら forEach は Promise を無視して動作するようです。
なので for of を使ってループしてあげる必要があるみたいですね。

``` js
const texts = [...];
for (const text of texts) {
    const fetchData = await fetch(...);
    fetchDataArray.push(fetchData);
}
```

このように書けば問題なく動作すると思われます。

## 余談
実は、Promise.all の使い方をよく理解できてません。今回みたいな使い方でも同じ動作できるように実装できるのかなあ？
今後改めて勉強したいと思います 😢
undefined method current_sign_in_atエラーが発生したのでやってみたこと。

<img width="858" alt="81e2c966f2f461cd1f1a7f38d7e3cbcf.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594063/425ea926-a32f-b676-468a-0cee19a580eb.png">



ログインを実行すると、このようなエラーが発生。

エラー内容からuserモデル内のカラムに<strong>current_sign_in_at</strong>がないのが原因のようだ。

というわけで、一度マイグレーションファイルを<strong>rails db:rollback</strong>

マイグレーションファイル内のcurrent_sign_in_atのコメントアウトを外し、<strong>raiis db:migrate</strong>


再度ログイン！

<img width="1438" alt="7ad51131bff9e3581e461e7688f9013b.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594063/7bdc6649-c327-f4f4-07c7-107fcc0f14e5.png">

今度はこんなエラーが発生。

<strong>last_sign_in_at</strong>がカラムないにないらしい。　どうせなら一度で言って欲しいものだが、、、、

同様の作業を行い、<strong>raiis db:migrate</strong>

再度ログインすると、今度はこんなエラーが、、、
<img width="1440" alt="30640de253e84c6e42cdd50cd89ba542.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594063/812df806-9ad5-6af6-482a-2d9bc28b494e.png">

今度は<strong>current_sign_in_ip</strong>が足りていないということか、、、

いっそのことTrackableのコメントアウトを全て外してしまえ！


      ## Trackable
      t.integer  :sign_in_count, default: 0, null: false
      t.datetime :current_sign_in_at
      t.datetime :last_sign_in_at
      t.string   :current_sign_in_ip
      t.string   :last_sign_in_ip

再度、<strong>raiis db:migrate</strong>をし、ログイン！


無事にログインできましたとさ

原因はよくわかりません。ただエラー解決できたのは一つの自信になったかな。
python selenium chromedriver beautifulsoup

#### サンプルコード1 (シンプルに表示をするだけ)

```python

import time
from selenium import webdriver
import chromedriver_binary

driver = webdriver.Chrome()

driver.get('https://xxx')
time.sleep(2)    # 2秒のウェイト

driver.close()
driver.quit()

```

#### サンプルコード2(headlessモード：表示をしない & beautifulsoupでパース)

```python

from bs4 import BeautifulSoup

import time
from selenium import webdriver
import chromedriver_binary
from selenium.webdriver.chrome.options import Options

option = Options()
option.add_argument('--headless')
driver = webdriver.Chrome(options=option)

driver.get('https://xxx')
time.sleep(2)    # 2秒のウェイト

# パースする場合
soup = BeautifulSoup(driver.page_source,'html.parser')


driver.close()
driver.quit()

```
その他のハードウェア

現在勉強している基本情報技術者試験についてまとめたものです。
自分のアウトプット用なので見やすさなどは期待しないでください。

# 入力装置
代表的なのは文字や数字を入力するキーボードで、他にも下記のような種類がある。

ポインティングデバイス

|||
|:-:|:--|
|マウス|マウス自体を動かすことで、その移動情報を入力して画面内の位置を指し示す装置。|
|トラックパッド|パッド上で指を動かすことで、その移動情報を入力して画面内の位置を指し示す装置。|
|タッチパネル|画面を直接触れることで、画面内の位置を指し示す装置。|
|タブレット|パネル上で専用のペン等を動かすことにより、位置情報を入力する装置。|
|ジョイスティック|スティックを前後左右に傾けることで位置情報を入力する装置。|

読み取り装置とバーコード

|||
|:-:|:--|
|イメージスキャナ|絵や写真を画像データとして読み取る装置。|
|OCR|印字された文字もしくは手書き文字などを解析して、文字データとして読み取る装置。|
|OMR|マークシートの塗りつぶし位置を読み取る装置。|
|キャプチャカード|ビデオデッキなどの映像機器から、映像をディジタルデータとして取り込む装置。|
|ディジタルカメラ|フィルムの代わりに**CCD（電荷結合素子）**などを使って、画像をディジタルデータとして記録する装置。|
|バーコードリーダ|バーコードを読み取るための装置。<br>JANコードとQRコードの2種類がある。|

# 出力装置
出力を画面に表示するためのディスプレイには下記のような種類がある。

|||
|:-:|:--|
|CRTディスプレイ|ブラウン管を使ったディスプレイ。|
|液晶ディスプレイ|電圧によって液晶を制御し、バックライトもしくは外部からの光を取り込むことで表示する仕組みのディスプレイ。|
|有機ELディスプレイ|有機化合物に電圧を加えることで発光する仕組みを利用したディスプレイ。|
|プラズマディスプレイ|プラズマ放電による発光を利用するディスプレイ。|

**解像度**
ディスプレイがどれだけ細かく区切って表示するかの、きめ細かさのこと。
1ドットごとに**光の3原色**である赤(R)緑(G)青(B)の光を掛け合わせて色が作られている。

**VRAM（ビデオRAM）**
コンピューターが画面に表示させる内容を保持する専用のメモリ。


出力を紙で印刷するプリンタには下記のような種類がある。

|||
|:-:|:--|
|ドットインパクトプリンタ|印字ヘッドに多数のピンが内蔵されていて、このピンでインクリボンを打ち付けることによって印字するプリンタ。|
|インクジェットプリンタ|印字ヘッドのノズルから用紙に直接インクを吹き付けて印刷するプリンタ。|
|レーザープリンタ|レーザー光線を照射することで感光体上に1ページ分の印刷イメージを作成し、そこに付着したトナーを紙に転写することで印刷するプリンタ。|

**dpi(dot per inch)**
印字品質を図るための指標で、1インチ当たりのドット数を示す。

**cps(character per second)**
1秒間に何文字印刷できるかを表す指標で、主にドットインパクトプリンタの性能を表すときに用いる。

**ppm(page per minute)**
1分間に何ページ印刷できるかを表す指標で、主にレーザープリンタの性能を表すときに用いる。

**入出力インターフェイス**
コンピューターと様々な周辺機器をつなぐために定められている規格。

**パラレルインターフェイス**
パラレルは並列という意味で、複数の信号を同時に送受信する。
規格としては**IDE(Integrated Drive Electronics)**や**SCSI(Small Computer System Interface)**などがある。

IDEは内蔵用ハードディスクを接続するための規格として使われたインターフェイス。
当初は最大2台までのハードディスクを接続できるという規格だったが、後に**EIDE**として拡張され最大4台まで接続することができた。

SCSIは様々な周辺機器の接続に使われたインターフェイス。
**デイジーチェーン**という数珠つなぎに機器を接続していく方法をとり、終端には**ターミネータ（終端抵抗）**が必要。

**シリアルインターフェイス**
シリアルは直列という意味で、信号を1つずつ連続して送受信する。
規格として特に代表的なのは、**USB**と**IEEE1394**で、どちらも電源を入れたまま機器を抜き差しできる**ホットプラグ**と、周辺機器をつなぐと自動的に設定が開始される**プラグ・アンド・プレイ**に対応している。

**IrDA(Infrared Data Association)**
赤外線を使って無線通信を行う規格で、携帯電話やノートパソコンによく使われる。

**Bluetooth**
2.4GHzの電波を使って無線通信を行う規格で、キーボードやマウスなど様々な周辺機器をワイヤレス接続することができる。
yarn devをしても動作しない（セキュリティソフト問題）

vue.jsのCLIの操作に慣れるため、Qiitaに投稿されている諸先輩方の記事を参考にアプリケーションを生成、
動作させようとしましたが、「yarn dev」コマンドを入力してもブラウザに表示されませんでした。
結論から申し上げますと、PCに導入しているセキュリティーソフト「ESET」の設定において、有効にしているHTTPプロトコルに問題がありました。

まずはESETのアプリを立ち上げ、左のサイドメニューから、
　設定ボタン　＞　「Webアクセス保護」の設定ボタン　をクリックし、HTTPプロトコルで使用するポート欄に記載のアドレス

80,8080,3128 

から先頭の「80,」を削除し、ウィンドウを閉じると変更を保存するか聞かれるので保存をクリック。
以上で、問題が解決しました。
非同期処理の概要が一発でわかる記事

## はじめに
先日、面接で非同期処理について説明してほしいと言われたので、説明したところ「とてもうまく説明できていると思います」と褒められて嬉しかったので書き残しておきます。

自分自身、先週やっと非同期について附に落ちたのでわからない人の立場から説明していけると思います。

## 非同期処理の定義
>非同期処理は、あるタスクが実行をしている際に、他のタスクが別の処理を実行できる方式である。 同期処理では、あるタスクが実行している間、他のタスクの処理は中断される方式である。 - 非同期処理を入れ、多重にコンテキストを用意することにより処理速度の向上を目指す設計が行われる。
参考: http://ossforum.jp/node/753

これで理解できてしまった人はこれ以降読む必要ないです:wink:

##  同期処理
プログラムというのは基本的に上から順に処理が進んでいきます。

しかし、もしデータベースとのやりとりなど重い処理が途中で行われる場合、その処理が終わるまで次の処理を実行できません。

簡単に表すとこのようになります。

```
処理
↓
重い処理(めっちゃ時間かかる)
↓
重い処理(まためっちゃ時間かかる)
↓
完了
```

例えば、アカウント作成後にDBに登録されているユーザー全員の名前やemailを表示するようなホームページに遷移する処理を実装するとします。

```
名前とemailを入力
↓
DBにその値を登録
↓
DBに登録されているユーザー全員の情報を取得
↓
ホームページに遷移して、その値を表示する
```
DBとの通信には時間がかかるので、
1. `DBにその値を登録`
2. `DBに登録されているユーザー全員の情報を取得`

この二つの処理をそれぞれ待つ場合、それぞれの処理にかかる時間の合計分待たなければならなくなります。
## 非同期処理
ではこれを非同期で行うとどうなるのか。

```
名前とemailを入力
↓
DBにその値を登録

↓（登録が終わるのを待たずに次の処理へ）

DBに登録されているユーザー全員の情報を取得

↓(全ての処理が終わったら)

ホームページに遷移して、その値を表示する
```

登録処理が終わるのを待たずにこちらの処理`DBに登録されているユーザー全員の情報を取得`に移るので、無駄な時間をかけずに処理を進められます。

ここで冒頭の定義に戻ってみましょう。

>非同期処理は、あるタスクが実行をしている際に、他のタスクが別の処理を実行できる方式である。 同期処理では、あるタスクが実行している間、他のタスクの処理は中断される方式である。 - 非同期処理を入れ、多重にコンテキストを用意することにより処理速度の向上を目指す設計が行われる。

全体を読んだ今では理解できるのではないでしょうか？

## 最後に
( )内でpromiseやasync, awaitなどの処理が行われているので、これを読んだ後にそれらについての記事を読めば理解度も増すのではないかと思います。