OmniAICreator/Qiita-1.07M huggingface dataset:
Promise使った非同期処理入門

## JavaScriptの非同期処理
前提としてJavaScriptはシングルスレッドなので、並行処理（2つの処理を同時作業）はできないです。
ですが、XHR(サーバーと通信を行う処理)等で処理をサーバーに移譲し
「JavaScript以外に処理を任せた場合」、並行して処理を行う事が可能です。
※JavaScriptのみで非同期風に処理を行う方法もあります。

今回紹介する、Promiseは並行処理していたプロセスの完了後に行いたい処理が出てきた場合に活躍するオブジェクトです。

料理でいうと、カレーを作る場合、ルーの作成と、ご飯を炊く作業は同時並行で進める事ができます。
ただ最終的に、炊きあがったご飯に、ルーをかけてカレーを提供する際には、ルーもご飯も出来上がってる必要がありますよね!

ただ、作る人や環境によってルーを作るスピードやお米の炊き時間が違うように、
サーバーのスペックや状態によってプロセスの完了タイミングは違ってきます。
この完了のタイミング確実に待ってから、次の処理を行いたいときに大活躍なのが、Promise先生です!

## STEP1 Promiseオブジェクトの生成
Promiseをnew演算子で呼び出し、Promiseオブジェクトを作成する事で使用する事ができます。
Promiseオブジェクトは非同期の作業を開始して、完了した際に resolve 関数 (成功した場合)
もしくは reject 関数 (エラーが発生した場合) のいずれか一方を呼び出します。
下記コードは例です。

``` js
const url = "https://dummynourldayozukki/gets/"

const promise = new Promise(function(resolve, reject) {
  // ここに非同期処理を書く(^o^)
  const request = new XHTMLRequest();
  request.open('GET', url, true);

  request.onload = () => {
    // 成功した場合
    resolve('成功');
  };

  request.onerror = () => {
    // 失敗した場合
    reject(new Error('エラー'));
    return;
  }
});
```

## STEP2 thenメソッドを使う
thenメソッドは、Promiseオブジェクトの中の非同期処理がエラーなく「完了」した際に呼ばれます。
resolveメソッドが呼ばれたときです。

Promiseオブジェクトのthenメソッドが呼ばれます。
下記の例のresponseには、resolveで設定した値が呼ばれます。

```js
const url = "https://dummynourldayozukki/gets/"

const promise = new Promise(function(resolve, reject) {
  // ここに非同期処理を書く(^o^)
  const request = new XHTMLRequest();
  request.open('GET', url, true);

  request.onload = () => {
    // 成功した場合
    resolve('成功');
  };

  request.onerror = () => {
    // 失敗した場合
    reject(new Error('エラー'));
    return;
  }
});

// ↓↓↓↓↓↓↓↓追記↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

promise.then(function (response) {
  console.log(response); // '成功'
});
```

## STEP3 catchメソッドを使う
処理にエラーが発生した場合に、catchメソッドが呼ばれます。
正しく取得できなかった時はこちらに処理を書きます。

```js
const url = "https://dummynourldayozukki/gets/"

const promise = new Promise(function(resolve, reject) {
  // ここに非同期処理を書く(^o^)
  const request = new XHTMLRequest();
  request.open('GET', url, true);

  request.onload = () => {
    // 成功した場合
    resolve('成功');
  };

  request.onerror = () => {
    // 失敗した場合
    reject(new Error('エラー'));
    return;
  }

  // ↓↓↓↓↓↓↓↓追記↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

  promise
  .then(function (response) {
    console.log(response); // '成功'
  })
  .catch(function (err) {
    console.log(err.message); // エラー'
  });
});
```

## 最後に
今回は、Promiseの基礎的な使い方を説明しました。
Promiseを使うと非同期処理の呼び出しと、
その後の処理がthenやcatchによって境界ができコードが分かりやすくなります。

今回紹介できませんでしたが、
Promise.allや、Promise.raceを使うことで複数の非同期処理の成功タイミングで、処理を行う記述もできます。

では、良いJavaScriptライフを!!
D言語でREPLを作った話

# どういうことか
ちょっと諸事情によりREPL(Read-Evalulate-Print Loop)の機能が欲しくなって自作していました。
https://github.com/Sobaya007/repl.d
普通に[本家](https://github.com/dlang-community/drepl)にもあるんですが、いくつか不満点があったのと、オレオレ実装を貫き通したいという気持ちから作ってしまいました。
とりあえずできたのはこんなかんじ↓
![repl2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105364/082f8689-737c-b63f-96a9-e15b225f0b02.gif)
残念ながら本家の上位互換とはいかなかったのですが、

 - 他のライブラリを[DUB](https://code.dlang.org/)から持ってこれる
 - これ自体がライブラリとしても活用できる(というかそのために作った)

という点で本家と差別化できています。本家のほうがエラーハンドリングがちゃんとしていたり色がついててカッコ良かったりするのですが、そこら辺はおいおいやっていこうと思っています。

# 実装
1. 入力されたテキストを[libdparse](https://github.com/dlang-community/libdparse)でパースして種別判定
2. 種別ごとに加工を施して一時ファイルに保存
3. コンパイルしてDLL(共有ライブラリ)に変換
4. 読み込んで即時実行

という恐ろしく単純な構造となっています。
変数や関数の宣言などは[Variant](https://dlang.org/phobos/std_variant.html)型という"なんでも型"の配列として持っておき、いいかんじに渡したりすることで実現しています。
毎回コンパイルしちゃっているのでちょっと遅いのが玉に瑕ですが、仕方ない。

# 今後の展望
 - エラーハンドリングを真面目にやる
 - Windows対応(鬼門)
 - LDC対応(鬼門)

あたりをぼちぼちやっていきたいと思います。
バグ報告・要望等ありましたらお気軽に[Issue](https://github.com/Sobaya007/repl.d/issues)なり[PR](https://github.com/Sobaya007/repl.d/pulls)なり投げてください。
それからここまで見てくれた方限定で、なんと**このレポジトリにスターをつけることができます!!!**
目立つように3つ貼っておきます。
https://github.com/Sobaya007/repl.d
https://github.com/Sobaya007/repl.d
https://github.com/Sobaya007/repl.d
スターをつけてくださると、もれなく私が喜びます。ぜひ皆様の清き御一票を！
Heroku で今すぐ Auth0を無料で使う

今年もかしゆかの誕生日が、やってきたぞー!!(n‘∀‘)η ﾔｧｰｯﾎｫｰ 31歳の誕生日、何故か祝日じゃないですが、私は有給休暇です。おめでとう!! これからゆかちゃんの誕生日パーティーです!!

さて、これは[Auth0 Advent Calendar 2019](https://qiita.com/advent-calendar/2019/auth0) 23日目です、何度も忘れないようにいいますが、かしゆかの、誕生日!! です!!

# Auth0 を今すぐ、無料で使い始める

すでに[某フレクトメンバー](http://cloud.flect.co.jp/entry/2019/12/18/000000)に「しょっさんと被ったかもしれない」と書かれる程度には、Heroku もある程度の普及を見せていると見て、まちがいないでしょう!!1 Salesforce/Heroku 以外の Advent Calendar でパートナーさんと関わるとは思いもしませんでしたが、そのことはすっかり忘れて

**今すぐ、Auth0 を使ったアプリを作りたい!! 無料で!!**

と思うことはみなさまにも多々あるでしょう。試したい。分かります。

ご教示します。

## Heroku アカウントを取得する

おめでたいことに、もう日本語で全て公式に書いてある。

[Heroku を使って無料でアプリを開発](https://jp.heroku.com/free)

制約が色々あってめんどくさそうと思うことなかれ、実際に使ってみると別に困ったりはしません。だって、試すだけだもん。問題は、まったくない。

## クレカ登録する

もうしわけない。あなたにとって、不安になるかもしれない。だが大丈夫だ、信用してくれ。これからやる作業はすべて「無料」でできる。まちがいない。ただ、クレカは登録してくれ。それが、`Auth0` を無料で使うための術なのだ。

Heroku へログインした後、右上に自分のアイコンがあります。それをクリックして "Account Setting" としてほしい。すぐにクレカ登録できるとこがあるので、そこへ入れてほしい。

そんなに信用できないなら、私のアカウント情報を見てほしい。ご覧の通り、12月も終わろうというのに `Current Usage` は見事に "$0.00" だ。安心してほしい。

<img width="986" alt="Screen Shot 2019-12-23 at 18.19.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37263/2f91af46-9290-7a6b-ed0f-dfe1bc11fcf2.png">

## Heroku アプリを作る

Heroku アプリとは、実際に動かすアプリケーションの構成する「箱」のことを示します。この箱の中にソースコードや、アドオンやらを突っ込んでごった煮にして、アプリケーションを動かします。

GitHub と連携しておくと、さらに開発が進みます。ので、[heroku 初級編 - GitHub から deploy してみよう -](https://qiita.com/sho7650/items/ebd87c5dc2c4c7abb8f0) をどうぞ。Heroku アプリの作り方も載ってます。

## Auth0 アドオンを追加する

さぁあとは、Heroku のアドオンを追加するだけ。ここで気をつけるのは「無料のプラン」を選択すること。デフォルトが無料なので、余計なことをしなければ問題ない。

Heroku Dashboard で該当のアプリから「Resources」タブを選択してみよう。「Add-ons」というところで、アドオンが追加できます。ここでおもむろに `Auth0` と入力してみましょう。

<img width="961" alt="Screen Shot 2019-12-23 at 18.25.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37263/e897cc3f-60e0-f2cc-df43-dd179474bd60.png">

ほら、なんか見知ったアイコンでてきましたね、これです、これをクリックします! はやく!! は　や　く　!!

次にプランの選択ダイアログが出てきますね。ここです!! ここをまちがえると課金されます!!! が、時間課金なので、うっかり入れてしまったら、とっとと削除しましょう、軽症ですみます。いいですか 「Free - Free」を選択するのです。

<img width="477" alt="Screen Shot 2019-12-23 at 18.26.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37263/d176a31e-6c27-dd63-67bd-82e66a8b4e0d.png">

おわり。

えっ。

はい。終わり。

## アドオンの使い方

どうですか、もう使える状況になりました。どうですか？

使い方は２つあります。`Auth0`の設定やユーザー管理を行いたい場合は、先程の「Resources」画面で見える `Auth0` をクリックすると SSO されて `Auth0`の設定画面が開きます。

こんな感じ
<img width="1310" alt="Screen Shot 2019-12-23 at 18.29.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37263/03447cd3-f5ed-d3a7-e51b-2eb72eaf84a7.png">

もう一つ。アプリから使うときは、クレデンシャルやURLとかをカンタンに利用する方法があります。

Heroku Dashboard から「Settings」タブをクリックして "Reveal Config Vars" をクリックします。

すると、4つの環境変数が表示されます(すでに削除済みなので、これらの値は利用できません)。アプリケーションで `CALLBACK URL` や `CLIENT ID` `SECRET` など利用する場合は、ここを参考にします。

<img width="1242" alt="Screen Shot 2019-12-23 at 18.31.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37263/3a1d53c4-767a-dc65-6680-ba503ad57bbb.png">

# まとめ

どうです？すごく簡単にすぐに Heroku で `Auth0` を使えるようになったのではないでしょうか？

色々と無料の状況で試していただきながら、新しいアプリケーションを世に出していただきたいなと。そして、繁盛したら、Heroku へ課金してください。よろしくお願い申し上げます☆（ゝω・）vｷｬﾋﾟ
LambdaをVPC内に作ってちょっとだけハッピーになった話

# 前提
- LambdaについてはServerlessFrameworkを使用
- IP制限の掛かったサービスにWebhook的にLambdaから通知を送りたかった
  - SESのバウンス通知
  - 動画変換完了後の通知など(うちの会社ではよくあるパターン)

# 課題
- これまではどうしていたかというと
  - IP制限の掛かっていないCloudFrontディストリビューションを作成
  - 上記のディストリビューションに対してドメインを振る(`webhook.xx.com`等)
  - アプリケーション側の該当のパス以下(`/webhooks/hoge`等)にベーシック認証を設定
  - Lambdaから上記のパスに通知

## ペイン(辛み)
- (ベーシック認証は掛けるものの)野ざらしになったWebhookディストリビューションを作ることになること
- ドメインも別途発行する必要があること
  - クライアントによっては発行まで色々やり取り発生するし時間かかるしめんどくさい
  - 同時にSSLの設定等も増えるのでとにかくめんどくさい

# 解決策
- 今回下記の流れで面倒くささが解消されました
  - LambdaをVPC内に作っちゃう
  - Lambdaを配置したPrivateサブネットに繋がったNATゲートウェイのIPをWAFに追加する
  - LambdaからメインのCloudFrontのURLを叩けるように書き換える

## ゲイン(ハッピーになったこと)
- IP制限を掛けている範囲内でアプリケーションが完結したこと
- クライアントにドメインの追加申請をするという申し訳ない事態を防げたこと
- VPC内にLambdaを作成するという新たな知見を得ることができたこと
- 他にも同様の構成で悩んでいた人たちのちょっとした悩みを解消できたこと

# 解決策(解説)
## LambdaをVPC内に作っちゃう
ServerlessFrameworkを使うとめちゃ簡単にできちゃいます。下記の通り`serverless.yml`の`provider`に設置するサブネットとセキュリティグループを設定するだけ。

```yml
# serverless.yml
provider:
  name: aws
  runtime: ruby2.5
  region: ap-northeast-1
  stage: ${opt:stage, 'development'}
# 以下を追加
  vpc:
    securityGroupIds:
      - sg-xxxxxx
    subnetIds:
      - subnet-yyyyyy
      - subnet-zzzzzz
```

ちなみに私の場合は、複数の環境にまたいで管理をしているので実際はこんな感じで設定しています。

```yml
# serverless.yml
provider:
  name: aws
  runtime: ruby2.5
  region: ap-northeast-1
  stage: ${opt:stage, 'development'}
  vpc: ${self:custom.vpc.${self:provider.stage}}

custom:
  vpc: ${file(./vpc.yml)}
```

```yml
# vpc.yml
development:
  securityGroupIds:
    - sg-xxxxxx
  subnetIds:
    - subnet-yyyyyy
    - subnet-zzzzzz

staging:
  securityGroupIds:
    - sg-aaaaaa
  subnetIds:
    - subnet-bbbbbb
    - subnet-cccccc

production:
  securityGroupIds:
    - sg-dddddd
  subnetIds:
    - subnet-eeeeee
    - subnet-ffffff
```

## 微妙なハマリポイント
ちなみに一見、下記のようにVPC内でLambdaを実行するためのポリシーを設定しないとだめなように思いますが、むしろ下記を設定するとエラーが発生します。

```yml
# serverless.yml
provider:
  name: aws
  runtime: ruby2.5
  region: ap-northeast-1
  stage: ${opt:stage, 'development'}
  vpc:
    securityGroupIds:
      - sg-xxxxxx
    subnetIds:
      - subnet-yyyyyy
      - subnet-zzzzzz
# 下記を追加すると動かない
  iamManagedPolicies:
      - arn:aws:iam::aws:policy/service-role/AWSLambdaVPCAccessExecutionRole
```

```sh
  Serverless Error ---------------------------------------

  An error occurred: IamRoleLambdaExecution - Property ManagedPolicyArns contains duplicate values..

  Get Support --------------------------------------------
```

どうやら`serverless.yml`に`vpc`の設定を行ったことでServerlessFramework自身がよしなに`AWSLambdaVPCAccessExecutionRole`相当のポリシーを実行ロールに付与してくれるようで（実際に追加されてました）、「それと同じポリシーは追加できないよー」的な感じで怒っているようです。よしな力高いのは良いけど分かりづらいｗ

ということで、これによりLambdaをVPC内に作成することができました。あとはプロジェクトによって方針はまちまちだと思うので、うまい具合にやってもらえたらと思います。

以上、LambdaをVPC内に作ってハッピーになった話、でした。
Reactで削除したliタグをsetStateで消そうとしたら苦労した件

# やろうとしたこと
配列peopleに入ってる人たちをliで表示して、
削除ボタン押したら、フロントから消し去る
（ちなみに、サーバサイドはGraphQL。今回は特に関係ないので割愛)

peopleは、こんな感じで定義してあるよ。
`const [people, setPeople] = useState<string[]>([]);`

```jsx
return (
  <>
    <ul>
     {people.map(person => (
           <li onClick={handleDelete}>{person}</li>
        )
     )}
    </ul>
  </>
);
```
かなり簡略化して書きました。まあ多少はね？
mapでpersonをリストで表示させる。
で、personをクリックするとhandleDeleteが呼ばれてその中でサーバサイドのデータが削除され
フロントからも消えるはず、**はずだった**w

peopleという配列はコンポーネントが描画されるときに
GraphQLのフックが起動して取得した配列を
setPeople(pickUpPeople)みたいな感じで突っ込んでいるのですが・・・
**このフックは最初に描画した時、１度しか呼ばれない**。

つまり、サーバサイドではデータは消えているけど
フロント側は何も変化がないということになる。
（もちろん、F5で更新すれば消えている）

#失敗例
>「せや、デリートボタン押したときに
>配列にフィルターかけてsetPeopleしなおせばええんや！」

具体的には、
`setPeople(pickedUpPeople.filter(person => person !== デリートしたpersonのid))`
要するに、**peopleにデリートしたidに合致しないやつだけピックアップしてセットする。**
という意味。

###結果
>「テストデータが２つ・・・１つを削除・・・を消えた！！」
>「よし、もう一つも削除・・・！？・・・さっき消したやつ戻ってきた・・・」
>「連打してみよ・・・交互に消したはずのデータがひょこひょこ出てくるンゴ^q^」

なぜかというと、
フックで取ってきた**pickedUpPeople配列からはデータが消えているわけではない**ので
クリックされたやつ以外が表示されてしまう・・・
つまり、別なのを削除するとそれは消えるけど、前のやつがリバイブする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148318/a4bb8b55-a0d8-d424-455e-f583d84d38b7.png)

#成功例
delete押されたidをステートで管理して、そこに足していけばええんや！
なので、さっきのコードをこんな感じにする。
＊ ...deletedListは配列の中身をバラして並べる、という意味です

```jsx
const[deletedList, setDeletedList] = useState<string[]>([])
setPeople(
  pickedUpPeople.filter(
    person =>
      ![デリートしたpersonのID, ...deletedList].includes(person.id),
  ),
);
setDeletedList([デリートしたpersonのID, ...deletedList]);
```
こうすれば、一回消したidがどんどんListに追加されていくので
フックで取得した全体と消し去ったListのXORを取ることで
消されていない奴らだけ表示できた！

もっとお利口な方法があるんだろうけど、
元のコードを崩さずにやろうとしたらこうなりました（小並感）

#まとめ
・Reactでliを扱う時は、filterをうまく使う
・弾くべきデータをリストとして、別のステートに保持しておくと便利
交差エントロピー誤差をわかりやすく説明してみる

_※コメントで説明の一部に誤りを指摘頂いたので記事を修正しました（2020/3/30）_

教師あり機械学習では必須の損失関数。
教師あり機械学習の場合、学習するというのは損失関数の値を小さくする事とほぼ同義になります。

損失関数について詳しく知りたい方は、[最適化から見たディープラーニングの考え方](https://orsj.org/wp-content/corsj/or60-4/or60_4_191.pdf)という論文をご覧下さい。
損失関数に限らず、損失関数の最適化手法や活性化関数などについてもわかりやすく説明されています。

そして、損失関数には幾つもの種類がありますが、交差エントロピー誤差は有名な損失関数の一つです。
本記事では、交差エントロピー誤差をわかりやすく説明してみます。
なお、英語では交差エントロピー誤差のことを`Cross-entropy Loss`と言います。`Cross-entropy Error`と表記している記事もありますが、英語の文献では`Cross-entropy Loss`と呼んでいる記事の方が多いです[^1]。

# 式
交差エントロピー誤差を式で表現すると次のようになります。なお、この$log$は自然対数（底が$e$）です。

``` math
H(p, q) = -\sum_{x} p(x) log(q(x))
```

$p$は真の確率分布、$q$は推定した確率分布です。
$p$と$q$の確率分布が似ていると交差エントロピー誤差は小さくなり、似ていないと交差エントロピー誤差は大きくなります。
ただ、式だけだといまいちイメージが付きませんよね…。

# 例
式だけだとわかりにくいので、わかりやすいように例をあげます。
今、写真に映っている果物が、

- バナナ
- りんご
- みかん

のどれかを予測するとします。

写真に映っている果物がバナナの場合、真の確率分布$p$は`(1, 0, 0)`となります。
そして、推定した確率分布$q$が`(0.8, 0.1, 0.1)`だったとします。
この場合、交差エントロピー誤差は次のようになります。

``` math
\begin{align}
H(p, q)& = -(1*log0.8 + 0*log0.1 + 0*log0.1) \\
& = -(log0.8) \\
& = -(-0.09) \\
& = 0.09
\end{align}
```

一方、推定した確率分布$q(x)$が`(0.3, 0.4, 0.3)`だったとします。
この場合、交差エントロピー誤差は次のようになります。

``` math
\begin{align}
H(p, q)& = -(1*log0.3 + 0*log0.4 + 0*log0.3) \\
& = -(log0.3) \\
& = -(-0.52) \\
& = 0.52
\end{align}
```

交差エントロピー誤差は後者よりも前者の方が小さくなっており、真の確率分布$p$に近いのは前者の確率分布$q$であることが分かります。
直感とも一致するので、交差エントロピー誤差が損失関数として適していることが分かります。

# 2乗和誤差との違い
2乗和誤差を式で表現すると次のようになります。
交差エントロピー誤差と異なり、シンプルで直感的にも分かりやすい式となります。

``` math
L = -\frac{1}{2}\sum_{x=1}^{N} (p(x) - q(x))^2
```

計算式が異なるので両者は違う誤差関数ですが、どちらの誤差関数を使えば良いのでしょうか？
結論としては、交差エントロピー誤差の方が使われることが多いです。

理由は、交差エントロピー誤差は確率的勾配降下法との相性が良いからです。
確率的勾配降下法という手法は、大雑把に言えば、微分から傾きを求めて損失関数が小さくなる方向に進んでいくことで最適化を図る手法です。
その際に、

- 自然対数$log(x)$を微分すると$1/x$
- $e^x$を微分しても積分しても$e^x$

という性質が計算式が複雑になるのを防ぎます。
損失関数の最適化手法としては確率的勾配降下法が使われることが多く、そのため交差エントロピー誤差が使われる場面も多くなります。

[^1]: 「"Cross-entropy loss"」のGoogleの検索結果は約187,000件に対し、「"Cross-entropy error"」のGoogleの検索結果は約28,800件（2019年12月23日時点）
[^2]: 出力値の合計が1になる関数。ディープラーニングなどのニューラルネットワークの出力層の活性化関数として使われることが多い。
12月１６日勉強計画



##目標##

1.基礎理論
2.アルゴリズムとプログラミング
3.コンピュータ構成要素
4.システム構成要素
5.ソフトウェア
6.ハードウェア
の過去問道場をやりこむ。
結果
この6つに関しては、ほとんどは完璧であったが記号問題そして、専門用語で意味を間違えて捉えていた。

なし
振り返り
なぜ間違えたかをおさらい。
どのようにしてそして、この問題を解けなかったわけをしっかりと自分の中で理解する。
Keep
過去問をやり続ける。
Try
更に過去問を繰り返す
Problem
間違えた原因をしっかりととらえる。
VSCodeで保存時にnpmプロジェクトを作らなくてもprettierでコードフォーマットする

## 動機
HTMLとCSSの練習をしようと思って模写コーディングを始めたのですが、タグを追加したり消したりするたびにインデントがずれて、「手動でなんてやってられない。そうだ、prettierを保存時に実行するようにしよう。」と思いました。

しかし、模写コーティングなので毎回npmプロジェクト作るのは嫌なので、プロジェクトを作らなくても、保存時にフォーマットできるようにしたいと思います。

## 使ったもの
- npm
- prettier 
- Run on Save (VSCode拡張)

## 手順
### 1. prettier を入れる
`npm install -g prettier` を実行してprettierをグローバルに入れます。
### 2. Run on Save を入れる
Run on  Save はファイルの保存時にコマンドを実行できるVSCode拡張です。
https://marketplace.visualstudio.com/items?itemName=emeraldwalk.RunOnSave
### 3. settings.json に設定を追加
コマンドパレットから settings.json を開き、HTMLとCSSを保存時にprettierを走らせる設定を追加します。

```

// RUN ON SAVE extension setting
"emeraldwalk.runonsave": {
  "commands": [
    {
      // HTMLのコードでprettierを保存時に実行
      "match": ".html$",
      "cmd": "prettier --write ${fileBasename}"
    },
    {
      // CSSのコードでprettierを保存時に実行
      "match": ".css$",
      "cmd": "prettier --write ${fileBasename}"
    }
  ]
}
```

これで保存時にprettierが実行されると思います。
neo4jをdocker-composeで使いたい

# はじめに

[いなたつアドカレ](https://qiita.com/advent-calendar/2019/allinatatsu)の二十三日目の記事です。

brewでmacにneo4j入れたけどうまくいかなかったのでDockerでやったやつのメモ


# docker-compose

```docker-compose.yml
version: '3'
services:
    neo4j:
        image: neo4j
        ports:
            - 7474:7474
            - 7687:7687
        volumes: 
            - ./neo4j/data:/data
            - ./neo4j/logs:/logs
            - ./neo4j/conf:/conf

```

imageはneo4jのですね。そのまんまです

ぽーとは7474,7687を通します。

7474はwebインターフェースで7687はプログラムから制御する際に使用するようです。

これで

```
$ docker-compose up -d
```

実行して

`localhost:7474`にアクセスすることで、webインターフェースにアクセスできます。

![スクリーンショット 2019-12-23 15.23.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269859/cb0c533a-c90a-3281-baf8-3fae19fcb1c3.png)


やったね！！

# 参考

- https://qiita.com/rubytomato@github/items/65205dc39eb825e4327d
- https://qiita.com/awk256/items/305fd52c881d8df69de1
なろう傍点を簡単に入力するスクリプト

## なろう傍点記法の入力はめんどい
めんどい

小説家になろうの（リッチエディタで入力される）傍点は、一文字ごとに「・」を青空文庫記法のルビで付与したものだからだ。
HTML+CSSにはちゃんとtext-emphasisプロパティがあるというのに、カクヨムはそれに置換される独自記法を用意してくれているというのに、なろうでは未だにルビしか使えない。

ころす

## TextExpander（未完成）
TextExpander 5.1.5前提

仕方がないので、フィルインでフレーズを入力し、それに傍点を付与した上で出力するスクリプトを書いてみる。

### コード
```shell
#!/bin/bash
echo '%filltext%' | sed -e 's/./｜&《・》/g' | xargs echo -n
```

はいかんたん。

なにが問題かというと、フィルイン時の表示がおかしい。

![img](https://i.imgur.com/fJEDK6c.png)

なんでかソースコード表示されるんですな。

なんとかしたい。

## Typinator
TextExpanderから乗り換えたので。
シェルスクリプトの文字コードがデフォルトでUTF-8になっていないようで、文字化けして焦った。ちゃんと文字コード指定してやれば問題なし。UIがおかしくなったりもせず快適。

```
{{filltext=?傍点部}}{/Shell
export LANG=ja_JP.UTF-8
echo ${filltext} | sed -e 's/./｜&《・》/g' | xargs echo -n
}
```

## AutoHotKey
こっちはGUIもきれいだし、正規表現置換関数が用意されてるのでもっと簡単だった。

### コード
```AutoHotKey
::od::
    PasteString(RegExReplace(InputBox("なろう傍点テキスト"),".","｜$0《・》"))
    return

; テキストをペーストする関数
PasteString(String)
{
    OnClipboardChange("ClipChanged",0)
    Backup := ClipboardAll
    Clipboard := String
    Sleep, 100 ; 削除が間に合わないので
    Send, ^v ; sendplayがwin10の大半のアプリで機能せず
    Sleep, 200 ; 元のクリップボードをペーストしてしまうことがある
    Clipboard := Backup
    OnClipboardChange("ClipChanged",1)
}

; 入力フィールドを表示して入力内容を返り値とする関数
InputBox(Prompt,DefaultText="テキストを入力",vW=600)
{
    Gui, Margin, 0, 0
    Gui, Color, , d0d0d0
    ; vW = 600

    Gui, Font, Q5 s10 W550, Meiryo UI ; UIフォントの指定
    Gui, Add, Text, w%vW% -Wrap, %Prompt%
    ; テキストを中央寄せする場合は幅の指定も必要（そうでないとテキスト幅＝コントロール幅になるので）

    Gui, Font, Q5 s11 W550, Cica ; editフォントの指定
    static InputText
    Gui, Add, Edit, X0 Y+3 w%vW% vInputText -Multi, %DefaultText% ; %InputText%

    Gui, Font, Q5 s10 W550, Meiryo UI ; ボタンフォントの指定
    vX := vW - 120
    vX2 := vX - 125
    Gui, Add, Button, Y+3 w120 x%vX% Default, OK
    ; Gui, Add, Button, w120 x+5 GCancel, Esc(&C)

    Gui, Show, Center AutoSize, %A_ScriptName%
    WinWaitClose, %A_scriptname% ahk_class AutoHotkeyGUI, %Prompt%
    return, InputText

    ButtonOK:
        Gui, Submit
        ; Clipboard := InputText
    GuiClose:
    GuiEscape:
        Gui, Destroy
    Return
}
```
Javascriptレシピ⑥

Javascriptの簡単なメモです。
アプリ制作に応用できる基本レシピですので、参考にされたい方はどうぞ。

###アロー関数

```js

const wanko = function(a){
    return r+r;
};

//アロー関数を使うと

const wanko = r => {
    return r+r;
};

//関数が一行の時は

const wanko = r => r+r;

```

###プログレスバー

```js

<progress id='progress' value='0' max='100'>0%</progress>
<inoput type='button' id='button' onClick='func1()' value='スタート'>

let val;
let intervaiID;

function func1() {
    val= 0;
    document.getElementById(button).disabled = true;
    intervalID = setInterval('update()', 50);
}

function update(){
    val += 1;
    document.getElementById('progress').value = val; 
    document.getElementById('progress').innerText = val + '%';

    if(val = 100){
        clearInterval(intervalID);
        document.getElementBiId('button').disabled =false;
    }
}

```

###日時比較

Dateオブジェクトを使用します。
new Date()でインスタンス化して、インスタンスをもとに計算していきます。


```js

let startTime = new Date();
let endTime = new Date();
let elapsedtTime = endTime.getTime() - startTime.getTime();

let mins = elapsedTime / (1000 * 60);
let secs = elapsedTime / 1000;
Math.floor(mins);
Math.floor(sexs);

```

###無名関数と即時関数

```js

//普通の関数
function sum(a,b){
    const result = a+b;
    return result;
}
const answer = sum(1,2);
console.log(answer);

//無名関数
const sum = (a,b) =>{
    const result = a+b;
    return result;
}
const answer = sum(1,2);

```

無名関数は関数を変数に入れることが出来ます。
変数に関数を格納できるというのが無名関数のメリットですね。

即時関数とは定義するとすぐに実行される関数です。

```js

const sum = ((a,b) => {
    const result = a+b;
    return result;
})(1,2);
comsole.log(sum);

```

プログラムがスッキリしています。


###DOM操作

Windowオブジェクトはブラウザが持つ情報をすべて持っています。
DocumentオブジェクトはアクセスしているWebサイトそのものでHTMLなどを保持しています。

DOMとはDocument Objrct Modelで、Documentオブジェクトを通じて個々の要素を取得操作することが出来ます。


WindowオブジェクトはHTMLをdocumentオブジェクトに変換する時にツリー構造という構造で保持します。

DOMの動作はdocumentオブジェクトのgetElementByIdメソッドを使います。

```js



const p = document.createElement('p');
const text = document.createTextNode('要素３');
document.body.appendChild(p).appendChild(text);
```

JSはブラウザ上で動作しているのでブラウザ上で組み立てられて表示されるHTMLの変更ができます。


###Arrayオブジェクト

```js

const family = new Array('pome','toypoo','siba');

//長さ
console.log(family.length);

//sliceでは０番目と２番めの一つ前の１番目が指定されます。
console.log(family.slice(0,2));

//reverseでは配列の要素の順番をひっくり返せます。
console.log(family.reverse());

//pushでは配列の末尾に新しい要素を追加し、追加後の要素数を取得できます。
console.log(family.push('a','b'));

//5

//popでは末尾の要素を削除します。
const last = family.pop();

//unshiftでは先頭に要素を追加します。
const start = family.unshift('a');

//indexOfは要素のインデックスを取得します
const wan = family.indexOf('pome');

//spliceはインデックスの位置を指定して要素を削除します。
const remove = family.splice(pos,1);

//任意の箇所を削除する
delete family[1];

//多次元配列
const familybig = family[1]; 
```


###Mathオブジェクト

```js
//円周率
console.log(Math.PI);

//√計算
comnsole.log(Math.sqrt(64));

//最大値取得
Console.log(Math.max(1,2,3,4,5));

//四捨五入した値を取得
console.log(Math.round(3434.434343));

Mathオブジェクトはstaticなオブジェクトのためnewしなくても使えます。
```
12月２３日勉強計画

##目標##
6.ハードウェア
7.ヒューマンインタフェース
8.マルチメディア
9.データベース
過去問をやりこみます。
この中で間違えた問題をチェックし繰り返します。そして、間違えた問題の専門用語を中心に繰り返し繰り返しやり続けます。

##結果##
なし
##振り返り##
なし
Try

Keep

Problem
【xampp】ApacheもMySQLも起動できないとき

## XAMPPをまだ使っています。

Dockerコンテナ管理(kubernetesでの管理が目標)を勉強中の私はまだまだPHPの環境を
**XAMPP**でやっています。

そこでよく出くわすエラーをまとめました。

- 環境：Windows10
- [使用したXAMPP V7.2.5の直リンク](https://www.afterdawn.com/software/network/servers/xampp_for_windows_portable.cfm)

## ApacheもMySQLも起動できない

XAMPPのControl PanelでApacheもMySQLも起動できないときがあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280363/653969bd-c9b6-9d1f-8394-538bfb9259e5.png)

そんな時は
【xamppのルートディレクトリ】\setup_xampp.bat
を実行するとxampp-control.iniが作られて問題を解決することができます。

## MySQLで接続エラーが発生する。

以下のPHPファイルを
【xamppのルートディレクトリ】\htdocs
配下に置いて接続をテストしてみてください

``` connection_test.php
<?php
$link = mysqli_connect('localhost', 'username', 'password');
if (!$link) {
die('Could not connect: ' . mysqli_error());
}
echo 'Connected successfully';
mysqli_close($link);
?>
```


##更新履歴
- 2019/12/23 新規作成
[PHP]foreachで配列の中の要素をまとめてキャストする

# たとえば…

こういう配列があったとしましょう。

```php5
<?php
$results = array();
$results[] = array("success_count"=>"0", "failure_count"=>"1");
$results[] = array("success_count"=>"1", "failure_count"=>"0");
```

```
array(2) {
  [0]=>
  array(2) {
    ["success_count"]=>
    string(1) "0"
    ["failure_count"]=>
    string(1) "1"
  }
  [1]=>
  array(2) {
    ["success_count"]=>
    string(1) "1"
    ["failure_count"]=>
    string(1) "0"
  }
}
```

# 全ての要素をintにしたい…！

クエリを叩いたりなんかして、全部の結果がint型も含めて全部Stringは困る…って場面があると思います。
例えば、この`success_count`が1件以上あったら、みたいな**数値としての比較をしたい時**にどうすれば良いか。

# やってみた

[array_map](https://www.php.net/manual/ja/function.array-map.php#102130)を使うやり方もあるのですが、今回は`foreach`を使ってやってみました。

```php5
<?php
$results = array();
$results[] = array("success_count"=>"0", "failure_count"=>"1");
$results[] = array("success_count"=>"1", "failure_count"=>"0");

foreach($results as &$result){
    $result["success_count"] = (int)$result["success_count"];
    $result["failure_count"] = (int)$result["failure_count"];
}
unset($result);
```

出力

```
array(2) {
  [0]=>
  array(2) {
    ["success_count"]=>
    int(0)
    ["failure_count"]=>
    int(1)
  }
  [1]=>
  array(2) {
    ["success_count"]=>
    int(1)
    ["failure_count"]=>
    int(0)
  }
}
```

# ちょこっとポイント

foreachで回す時に、リファレンスを渡すことでforeachを抜けた後もキャストした値は捨てられずに配列に格納されます。

```php5
foreach($results as &$result){
```

ここで注意しなければならないのが、foreachを抜けた後に`unset()`を使って参照を解除してあげなければならないことです。

```php5
foreach($results as &$result){
    $result["success_count"] = (int)$result["success_count"];
    $result["failure_count"] = (int)$result["failure_count"];
}
unset($result); //ここで$resultの参照を解除
```

参照が解除されないままだと、最後の要素の値がどこか意図しないタイミングで書き換えられてしまう可能性があります。
[PHPの公式マニュアル](https://www.php.net/manual/ja/control-structures.foreach.php)に詳細が載っていますので、こちらもぜひ一読ください。

```php5
foreach($results as &$result){
    $result["success_count"] = (int)$result["success_count"];
    $result["failure_count"] = (int)$result["failure_count"];
}
//unset($result);
$result["success_count"] = 10000; //参照を保ったまま最後の要素の値を書き換え
```

出力

```
array(2) {
  [0]=>
  array(2) {
    ["success_count"]=>
    int(0)
    ["failure_count"]=>
    int(1)
  }
  [1]=>
  &array(2) {
    ["success_count"]=>
    int(10000)
    ["failure_count"]=>
    int(0)
  }
}
```
[Ruby] より細かくMetricsを取得したい [Heroku]

2016年に[[Ruby] かしゆかの誕生日!](https://qiita.com/sho7650/items/b5d3ba1a6a053b4a4375)という潔すぎる Advent Calendar を書いてから 3年。またこの地に降り立ちました、しょっさんです。もちろん、本日もかしゆかの誕生日です、おめでとうございます!!!

今日は[Ruby Advent Calendar 2019](https://qiita.com/advent-calendar/2019/ruby)の 23日目、今年もかしゆかの誕生日です!! 昨日は[fursich](https://qiita.com/fursich)さんのネタ待ち、明日は[ooooooo_q](https://qiita.com/ooooooo_q)さんです!!

# [Heroku Ruby Language Metrics](https://devcenter.heroku.com/articles/language-runtime-metrics-ruby)(Public Beta) がでたぞ!

public beta なので、大きな声で推奨はできませんが、NewRelic や Scoutを入れるほどでも、標準よりももう少し詳しく Heroku がアプリの Metrics とってくれないかな...。

**とれるようになりそうです**

それが、この [Ruby Language Metrics](https://devcenter.heroku.com/articles/language-runtime-metrics-ruby)(Public Beta) です。設定すればよいだけではないのと、動いたり動かなかったりなのは「β」だからということで、事情を知りうまく行かなかったときは、heroku-metrics-feedback@salesforce.com へフィードバックを入れていただけると捗ると思います、どうぞよろしく。(英語でね)

## 何ができるようになったの？

次の３つの項目が、追加で取れるようになりました。

- [Puma Pool Usage](https://devcenter.heroku.com/articles/language-runtime-metrics-ruby#puma-pool-usage) … Puma のキューイング状況が見られます。80%超え始めたら Dyno 追加しようかなみたいな。
- [Free Memory Slots](https://devcenter.heroku.com/articles/language-runtime-metrics-ruby#free-memory-slots) … 単位時間あたりのメモリスロットの状況を可視化します。
- [Heap Objects Count](https://devcenter.heroku.com/articles/language-runtime-metrics-ruby#heap-objects-count) … 割当と開放されたヒープ状況を可視化します。メモリちゃんと開放されてる？

## どうやって使うの？

制約条件として

- Puma >= 3.12.0
- 純粋な Ruby (JRubyは [JVM Runtime Metrics](https://devcenter.heroku.com/articles/language-runtime-metrics-jvm#using-with-jruby))

使い方は Rails なら次のでいけます。

1. Metric を Enableする
2. 'heroku/metrics' buildpack を「頭に」追加する
3. "barnes" Gem をインスコ

### 1. Metric を Enableする

Heroku Dashboard から、Heroku アプリの Metricsへ行って、「歯車」から "Enhanced Language Metrics" to　”Ruby Language metrics" を ON にしてあげます。

![1535572120-node-metrics.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37263/aaf40b29-d152-ba41-bc59-4787b7407580.gif)

コマンドなら。

```bash
$ heroku labs:enable "runtime-heroku-metrics" -a "my-app-name"
$ heroku labs:enable "ruby-language-metrics" -a "my-app-name"
```

### 2. 'heroku/metrics' buildpack を「頭に」追加する

同じく Dashboard の `Settings` から、"Add buildpack" で 「*heroku/metrics*」を追加します。一番目になるように、順序を入れ替えてあげます。

![1509042807-Screen-Shot-2017-10-26-at-11.32.05-AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37263/9f23bf09-a3f1-f19b-8c76-2db4ac415609.png)

コマンドなら。

```bash
$ heroku buildpacks:add -i 1 heroku/metrics
```

### 3. "barnes" Gem をインスコ

`Gemfile` に `barnes` を追加して、`bundle install`して、**再deploy**しましょう。

```ruby
gem "barnes"
```

※ Railsじゃないとき

例えば puma.rb とかに次のものが必要です。

```ruby
require 'barnes'

before_fork do
  # worker specific setup

  Barnes.start # Must have enabled worker mode for this to block to be called
end
```

※ workerない場合は動かないので、最低限一つのworkerが必要みたいだけど。
[swift]SearchBarやTextField にてUIMenuControllerを非表示にする

### どんなもの？

<img width="278" alt="スクリーンショット 2019-12-23 17.48.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500554/d14f23bc-a0cb-a835-ee5f-045eb3debcbf.png">

長押しすると出てくるやつです。
そもそもこのバー自体出したくなかったので対応しました。


### ソース

```swift
    // UIMenuController を非表示にする
    override func canPerformAction(_ action: Selector, withSender sender: Any?) -> Bool {
        OperationQueue.main.addOperation({
            UIMenuController.shared.setMenuVisible(false, animated: false)
        })
        return super.canPerformAction(action, withSender: sender)
    }
```
【ReactBootstrap×TypeScript】ReactBootstrapをTypeScript版のReactに導入する

#やりたいこと
CSSフレームワークのBootstrapをReactのプロジェクトで使いたかったが、
あーしてもこーしても上手く使えなかったので調べたところReactBootstrapなるものがあるらしい。
今回はReactBootstrapを導入するところまでまとめる。

#色々インストールする

①create-react-appでTS版のインストール
こっちのサイト参考⇒https://create-react-app.dev/docs/adding-typescript/

```
npx create-react-app my-app --template typescript
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
```

正直、公式そのままである。


②
次にBootstrapもインストールしておく。
こっちのサイト参考⇒https://create-react-app.dev/docs/adding-bootstrap/#using-a-custom-theme

TS版もインストールすることを忘れないように。

```
npm install --save bootstrap @types/bootstrap
npm install --save node-sass @types/node-sass
```

③
で、ReactBootstrapをいよいよインストールする
こっちのサイト参考⇒https://react-bootstrap.github.io/getting-started/introduction/

```
npm install react-bootstrap @types/react-bootstrap
```

#ボタンを配置して、導入できたか確かめる
①
index.tsxにBootstrapのcssをインポートさせておく。

```tsx:src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.min.css';    //←ここにとりあえず追加

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
```

②
App.tsxにボタンを配置してみる

```tsx:src/App.tsx
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Button } from 'react-bootstrap';    //ここにボタンコンポーネント追加

const App: React.FC = () => {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        {/*↓↓↓↓↓ここにとりあえずボタン置いてみる*/}
        <Button variant="primary">青いボタン</Button>
      </header>
    </div>
  );
}

export default App;
```

#実際に動かしてみる
```
npm run start
```
これで、ポート3000にアクセスして、青いボタンが表示されていれば、ReactBootstrapの導入は完了です。

自分もようやくBootstrapで作ったポートフォリオサイトのモックを移植できる･･････。
Googleスプレッドシートで簡単なTODOリストを作り、リマインドをメールする

簡単なTODOリストのシートを作る。

![task.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311544/71a1c127-6431-b4d8-6dd9-2d3ab582bde6.png)

シート「TODOリスト」の完了セルを上からなぞっていき、「未完了」で「期日が過ぎている」ものをピックアップし、表にしてメールを送る。

```Javascript:remind.gs
//スプレッドシートの未消化タスクをメールする
function remind() {
  
  var date = new Date();
　var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = spreadsheet.getSheetByName('TODOリスト');
  var data = sheet.getDataRange().getValues();
  var header = new Array();
  var table = new Array();
  var footer = new Array();
  var taskNum = 0;
  
  header.push("<head>");
  header.push('<style type="text/css">td{padding:3px;border:1px #555555 solid;border-collapse:collapse;font-size:13px}</style>');
  header.push("</head>");
  header.push("<body>");
  table.push("<table>");
  table.push("<tr><td>期限</td><td>タスク</td><td>担当者</td><td>備考</td></tr>");
  
  for(var i = 0; i < data.length; i++){
    
    //完了しているかタスクが空欄の場合はスキップ
    if(data[i][2] == true || data[i][4].length == 0){
      continue;
    }
    data[i][3] = new Date(data[i][3]);
    //タスクが未完了で日付が過ぎている場合
    if(data[i][3] < date){
      taskNum++;
      table.push("<tr><td>" + Utilities.formatDate(data[i][3], "JST","M/d") + "</td><td>" + data[i][4] + "</td><td>" + data[i][5] + "</td><td>" + data[i][6] + "</td></tr>");
    }
  }
  
  table.push("</table>");
  footer.push("</body>");

  header.push(taskNum + "件の未消化タスクがあります。");
  
  MailApp.sendEmail(
    ["hogehoge@gmail.com"],
    "期限切れ未消化TODOリスト",
    'HTMLメール用',
    {
      htmlBody:header.join("\n") + table.join("\n") + footer.join("\n")
    }
  )
  
}
```
上記を日次のトリガーとして実行するように設定しておわり。
リマインドされるものの、未完了のタスクが積まれていくだけになりあまり効果はなかった。
bootstrap4のnavbarの固定

cssのpositionプロパティにstickyを指定する
[Navbar - Bootstrap](https://getbootstrap.jp/docs/4.3/components/navbar/#placement)

### headerを追加する

```html
...(略)...
<body>
<header>
<nav>
...(略)...
</nav>
</header>
<main>
...(略)...
</main>
</body>
...(略)...
```

### headerのスクロール抑止

```html
...(略)...
<body>
<header class="sticky-top">
<nav>
...(略)...
</nav>
</header>
<main>
...(略)...
</main>
</body>
...(略)...
```

### footerの追加
footert用のスタイルシートを用意する。
画面上部にNavbarがある場合とない場合でスタイルが異なる。
[Bootstrap4 Sample](https://getbootstrap.jp/docs/4.3/examples/)の[Sticky footer](https://getbootstrap.jp/docs/4.3/examples/sticky-footer/)と[Sticky footer navbar](https://getbootstrap.jp/docs/4.3/examples/sticky-footer-navbar/)

当環境では4.3のSticky footer navbarではうまくいかなかったので3.4のサンプルを使用する。
[Sticky footer navbar](https://getbootstrap.com/docs/3.4/examples/sticky-footer-navbar/)

### CSSの変更

```css:sticky-footer-navbar.css
/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px; /* Margin bottom by footer height */
}
.footer {
  position: absolute;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px; /* Set the fixed height of the footer here */
  background-color: #f5f5f5;
}


/* Custom page CSS
 * Not required for template or sticky footer method.
 * -------------------------------------------------- */

body > .container {
  padding: 60px 15px 0;
}
.container .text-muted {
  margin: 20px 0;
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

code {
  font-size: 80%;
}
```

```html
...(略)...
<body>
<header class="sticky-top">
<nav>
...(略)...
</nav>
</header>
<main>
...(略)...
</main>
<footer class="footer">
<div class="container">
...(略)...
</div>
</footer>
</body>
...(略)...
```

.footerのpositionプロパティがabsoluteであれば常に下部に張り付くがスクロール次第で見えなくなる。
positionプロパティをfixedにするとスクロールしても常に下部に表示する
CentOS7でeno0→eth0にしたり、入れ替える

途中までは割と解説があるんだけど、込み入った部分までの説明が全然ない

◆CentOS7からはNICの自動採番方式が変更になった

https://qiita.com/fetaro/items/b61282130fa638de4528

◆新しい命名規則を無効化する

```
/etc/default/grub
GRUB_CMDLINE_LINUXに、"net.ifnames=0 biosdevname=0"を追加。
grub2-mkconfig -o /boot/grub2/grub.cfg
```

これで eno0 → eth0 になる

ここまででいい人は適当にぐぐれば出てくる記事で解決、あんまり困らない

◆入れ替える

色々な事情で、eth0 ←→ eth1 としたい場合がある

雑にぐぐると「ifcfgを入れ替えればいいんじゃ」って記事がたくさんでてくる

　人人人人人人
＜入れ替わらない＞
　ＶＶＶＶＶＶＶ

https://qiita.com/saxxos/items/1281b8fc578149e6e307

こんなんも見たがよーわからん、うまくいかんかった

私の触ってるCentOS7、nic名に「eth*」と付けた場合無視される仕様からどうしても抜け出せない

仕方ないので nic0, nic1 などとしてみたら、普通に名前が変更できる
Ruby on Rails 初歩の初歩

#備忘録
こんにちは！HLDの井出です。（https://t.co/FiYK5Qty3J?amp=1）
今回は、Railsについての備忘録を残していきます。
インストールからscaffoldまでです。
##環境
- Windows10
- viniciusfs/centos7
- rails 5.1.3

##準備
Rubyのインストール
参考：https://github.com/rbenv/rbenv
流れは、まず管理ツールのrbenvをインストール。
※rbenvをインストールしたらruby-buildをクローンすることをお忘れなく！
`$git clone https://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build`

↓
インストールできるバージョンの確認
   `$ rbenv install --list`
欲しいバージョンをインストールしたら、
`$ rbenv rehash`
`$ rbenv grobal バージョン`
そして、
`$ ruby version`
で、バージョンが表示されたらOK!!

###railsのインストール
`$ gem install rails -v x.x.x`　(Xは欲しいバージョン）

**その前に**
下拵えで、nodejsとsqlite3をインストールしておきます。しておかないまま、railsのインストールを進めるとjavascriptが分らんけど？って怒られます。。。
##起動！！
インストールができたら、任意のディレクトリで、
`rails new app`
そうすると、勝手にいろいろと作ってくれる。
####アドレス確認
`$ ip a`
でアドレスを確認して、ブラウザに表示してみます。
```3: eth1: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc pfifo_fast state UP qlen 1000
    link/ether 08:00:27:c1:f7:7a brd ff:ff:ff:ff:ff:ff
    inet 192.168.33.10/24 brd 192.168.33.255 scope global eth1
       valid_lft forever preferred_lft forever
    inet6 fe80::a00:27ff:fec1:f77a/64 scope link
       valid_lft forever preferred_lft forever
```
192.168.33.10なので、
`$ rails server -b 192.168.33.10 -d`
として、サーバー立ち上げます。
Runと出たらOK!!
アドレスをコピペしてブラウザに表示させてみます。

##scaffoldで簡単なアプリを作ってみる
無事に、鯖が立ち上がったら、sccaffoldで簡単なアプリを作ってみます。
`rails g scaffold Memo title:string body:text`
とすると、メモアプリをサクッとrailsが用意してくれます。
できたら、
`$ rails db:migrate`
とします。
ブラウザで`192.168.33.10/memos`として表示されたらOK!!
####殺してみる
`$ ps aux | grep puma`
でプロセス番号がわかります。
vagrant のあとに表示されている数字です。
` $ kill -9　プロセス番号`
とすると、今立ち上げていたアプリを終わらせることができます。
##後記
サクッとでしたが、railsのインストールからアプリの立ち上げまでの流れを見てみました。
あとは、コントローラーとか色々作り込んでみてください。
参考になれば嬉しいです。
PowerShell で ArrayShuffle

# PowerShell で ArrayShuffle

PowerShell で ArrayShuffle をしたくなったので調べた.

一つ目は Get-Random のドキュメントで Randomize an entire collection と Microsoft が説明しているくらいなので正攻法. -Count に指定した数だけ、重複しないように配列から乱択してくれる.

```powershell
PS> 1..10 | Get-Random -Count ([int]::MaxValue)
1
4
7
2
8
6
10
5
3
9
```

二つ目はちょいハック. ドキュメントを見てもどこに書いてあるのか分からないのだが、スクリプトブロックを渡すと、そのブロックで出力した値を使って並び替えてくれるようで、そこでランダム値を出力すればシャッフルになる.

```powershell
PS> 1..10 | Sort-Object { Get-Random }
10
2
6
8
7
1
3
5
4
9
```
Splunk Dashboards Appを7.3にもいれてみた


conf19で地味に発表されていた「Splunk Dashboards Apps」。

出た直後の0.1.0を、同じく出た直後のVer8.0.0に入れて試したレポートを以前書きましたが、いつのまにか0.2.0がリリースされていて、しかも7.3も動作対象に含まれていました(0.1.0もそうだったのかも)。

**Splunk Dashboards App(Beta)**
https://splunkbase.splunk.com/app/4710/ 

Splunk標準の味気ないダッシュボードがいやな方は、ぜひこいつを使ってみてください。

バージョンアップされたとはいえまだベータ扱いですが、ITSIのグラステーブルと同様なダッシュボードを作れるのはわくわくします(センスは置いといて)。

ちょっとかっちょいい画面作りたいなーってことはぜひ試してみてください。
ポモドーロできるメモアプリ作ってみたが反省録

#ログをメモに残しつつポモドーロがしたい
ポモドーロテクニックとは25分の集中と5分の短時間休憩もしくは15分の長時間休憩を繰り返し、
仕事を集中的に行う時間管理術です。
自分はいつも使っているわけではないですが、
集中できない時にメリハリをつけるために使っています。

FirefoxのTomato Clockというポモドーロアドオンがあるので、
自分はそれをタイマー代わりに使っていました。

非常に使いやすいのですがブラウザ上で稼働しているので、
後で何をしたかを振り返るためにポモロードのサイクル結果を
具体的に行動ログを残す場合は
別口でメモ帖等に書かねばなりませんでした。

丁度昔、tkinterの練習用にその日の行動ログを残しつつテキスト編集してくれるアプリを作ったので、
それを改造してポモロード用のタイマー機能を追加することにしました。

要はポモロードのタイマーがついたメモ帖です。

#完成(?)物
![ketchup.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535544/02748bbf-c5ea-35fe-30bd-3b2219605658.png)

配布用Exe版
https://github.com/rabbitbeef/KetchupEXE

ソース
https://github.com/rabbitbeef/ketchup


設計や細かな仕様はともかく
とりあえず自分の使う分には満足いくものができました。
画像のログは実験用ですが、
tomatoや休憩をしていた時間は
[11:0][tomato]
[11:25][tomato:End]
や
[10:55][ShortBreak]
[11:0][ShortBreak:End]
という感じで開始と終了の時刻を残してくれます。
また何をしたか等のログを直接メモに書き込むことができます。

#反省
上でも書きましたが設計が雑です。
特にViewが分離していないです。
下![tkinter.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535544/ae3445d1-f938-58f5-2a74-fa306691b399.png)
全部のクラスがtkinternに依存しています。
もともとtkinterで作った物を拡張して作る気でおり、
そのまま何も考えずに拡張してしまったのが原因です。
もし後でtkinterではなくKivy等の他のguiライブラリを用いたくなった場合、
改修箇所が多くなりです。
（それでも元のソースもそんなに長くないですが。)

もし自分が現状から変更するならですが、以下の図のような構成にします。
![noizon.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535544/0f5e7efe-b0a4-532c-e4fa-12c72f62e54d.png)
interfaceが増えましたが、
どうしてもtkinterが必要な、表示や書き込みに関係する部分はinterfaceを継承して作り、
それらはTkinterのパーツを使用します。

これならば、Tkinter以外のguiライブラリに変更する際にも、
前の設計に比べて影響や改修を少なくすることができそうです。
タイマー以外の機能を拡張も改修しやすく作ることができます。

#機能を拡張するなら
ソースの方にはちょっと跡を残していますが、
タイマーやスタンプの設定をconfigで自由に変更可能にするとか
他のポモドーロ系アプリにも多いログから行動を集計する機能を作成するなど
あったら利便性高いかなという機能はありますが、
現状はメインの機能が取り合えず稼働して満足なので、
気が向いたら改修するかもしれません。

#最後に
実は作成物を公開して上げるのは初めてなので、
もし使って頂けたなら、使用感やこういうのあると便利など、
レビューがあると嬉しいです。

駄文の反省ですが、
ここまで読んでいただきありがとうございます。
SQL Server に接続できないときに確認すること

## 概要

Visual Studio Code (Windows 10 Pro x64) から SQL Server 2017 に接続する時にハマったので調べたことをメモ。

## 確認項目

下記のサイトの回答がよくまとまっていてわかりやすかった。

[Timeout error while attempting to consume the pre-login handshake - SQL Server Forums](https://social.msdn.microsoft.com/Forums/sqlserver/en-US/3bbcd9a3-f90b-4ef2-8244-f06ee8d9cfa3/timeout-error-while-attempting-to-consume-the-prelogin-handshake?forum=sqldataaccess)

1. SQL Server データベースエンジンが実行中でない。
2. SQL Server Browser サービスが実行中でない。
3. SQL Server ネットワーク構成の TCP/IP プロトコルが無効になっている。
4. サーバー名が間違っている。
5. ネットワークに問題がある。
6. データベースエンジンのインスタンスの TCP/IP ポートがファイアーウォールでブロックされている。
7. クライアントとサーバーが同じネットワークプロトコルを使用していない。

## 今回の原因

ファイアーウォールだった。
クライアントはプライベートネットワークになっていたが、サーバー側はパブリックネットワークになっていた。
sklearn.metrics.f1_scoreのaverageオプションについて

## f1 scoreとは
$$ f1 = \frac{2 \times Recall \times Precision}{Recall + Precision} = \frac{1}{\frac{1}{Recall} \times \frac{1}{Precison}} = \frac{2 \times TP}{2 \times TP + FP + FN}$$
で示されるRecall(再現率、感度)とPrecision(適合度、精度)の兼ね合いの指標である。
調和平均であるのでどちらかが極端に低い場合にはスコアが低くなる。

## 多クラス分類
簡略化のため、3クラス分類とする（4クラス以上でも同じ考えで行ける）

|              |   |    | 予想クラス |    |
|:------------:|:-:|:--:|:----------:|:--:|
|              |   |  a |      b     |  c |
|              | a | 10 |      3     |  5 |
| 正解のクラス | b |  4 |     20     |  3 |
|              | c |  4 |      3     | 15 |

こんな感じの混同行列があったとき、TP、FP、FNを以下のように定義する。


| クラス | TP | FP | FN |
|:------:|:--:|:--:|:--:|
|    a   | 10 |  8 |  8 |
|    b   | 20 |  6 |  7 |
|    c   | 15 |  8 |  7 |

FPは縦、FNは横の対角要素以外の和である。

## sklearn.metrics.f1_score
[https://scikit-learn.org/stable/modules/generated/sklearn.metrics.f1_score.html]()をみるとオプションに`"binary"`,`"micro"`,`"macro"`,`"weighted"`,`"samples"`が存在する。(recall_score, precision_scoreも同様)
`"binary"`は2値分類で用いるものである。
その他について以下に記す。

### `"micro"`
1. 全体でTP,FP,FNを計算する。

    | TP | FP | FN |
    |:--:|:--:|:--:|
    | 45 | 22 | 22 |
2. 求めたTP,FP.FNで計算する
    $$f1 = \frac{2 \times TP}{2 \times TP + FP + FN} = \frac{90}{90+22+22} = 0.67164179104\dots$$

### `"macro"`
1. 個々のクラスでRecallとPrecisionを算出する

    | クラス | Recall | Precision |
    |:------:|:------:|:---------:| 
    |    a   |   $\frac{10}{18}$   |   $\frac{10}{18}$       |
    |    b   |   $\frac{20}{27}$  |     $\frac{20}{26}$     |
    |    c   |   $\frac{15}{22}$   |     $\frac{15}{23}$     |
2. 平均のRecallとPrecisionを算出する

    | Recall | Precision |
    |:------:|:---------:|
    |   $\frac{1}{3}\sum{Recall}$   |     $\frac{1}{3}\sum{Precision}$     |
3. 求めた平均でf1を計算する

    $$ \frac{1}{\frac{1}{\frac{1}{3}\sum{Recall}} \times \frac{1}{\frac{1}{3}\sum{Precision}}} $$
(計算は面倒なので省略)

### `"weighted"`

1. 各クラスのデータ数を個々のRecall, Precisionに乗算する

    | クラス | Recall | Precision |
    |:------:|:------:|:---------:| 
    |    a   |   $\frac{10}{18} \times 18$  |   $\frac{10}{18}\times 18$       |
    |    b   |   $\frac{20}{27}\times 18$  |     $\frac{20}{26}\times 18$     |
    |    c   |   $\frac{15}{22}\times 18$   |     $\frac{15}{23}\times 18$     |
2. Recall,Precisionの総和をデータ総数で割る

    | Recall | Precision |
    |:------:|:---------:|
    |   $\frac{1}{67}\sum{Recall}$   |     $\frac{1}{67}\sum{Precision}$     |
3. 求めた平均でf1を計算する

    $$ \frac{1}{\frac{1}{\frac{1}{67}\sum{Recall}} \times \frac{1}{\frac{1}{67}\sum{Precision}}} $$
(計算は面倒なので省略)

### `"samples"`
よくわかってないので分かり次第加筆予定
ゲーム製作の感想

通っている専門学校でチームでのunityを使ったゲーム制作があり、自分の至らぬ点も見つかったので一人反省会です
私の担当はゲームシーンが切り替わるときのエフェクト作成が主でした

フェードインとフェードアウトのプログラムはTAMA-LABさんのスクリプトを参考にしました
→[Unityでフェードイン／フェードアウトを実現する方法(TAMA-LABさん)](https://tama-lab.net/2017/07/unity%E3%81%A7%E3%83%95%E3%82%A7%E3%83%BC%E3%83%89%E3%82%A4%E3%83%B3%EF%BC%8F%E3%83%95%E3%82%A7%E3%83%BC%E3%83%89%E3%82%A2%E3%82%A6%E3%83%88%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%99%E3%82%8B%E6%96%B9/)
[](↑テキストにURL埋め込み)




今回の反省点は、この親切でわかりやすいプログラムを自分で理解して扱うまでに一週間かけてしまったことです
理由を考えてみるとフラグを使い慣れておらず使い方を思い出せなかったことや、何がわからないかを整頓できなかったことから、日ごろからプログラムを学ぼうとする意欲が足りなかったことが原因だと考えつきました
これをもとに、どんなゲームを作るか考えることだけでなく、今まで考えたゲームを片っ端から作ることでもっとプログラムに親しもうと思いました
あとゆにてぃがおもったとりにうごいてくれたときはすごくたのしかったしうれしかったです。
unityのParticle Systemを使って魔法っぽいエフェクトを作る

#制作理由
学校でグループ制作中に戦闘時に攻撃する際にエフェクトがあったほうが戦闘時に単調にならず、またプレイヤーを楽しませる要素の一つになると考えたので制作しました。
###使用バージョン
この記事はUnity 2018.3.9f1で制作したものです
バージョンが異なる場合、正しく動作しない可能性がございます
##Particle Systemを作成する
**製作途中のゲームのものをそのまま使用しているため実際には必要のないものが混じっています**

まずはHierarchy内で右クリックをしてEffects > Particle Systemで作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555721/62f0ec5e-2e7d-01eb-4f01-3153480e08f2.png)

今回は攻撃魔法用の爆発エフェクトを例に作成していきます。
##パーティクルのカスタマイズ

作成した段階では白い球のようなものが上の方向に拡散しながら上がっていくだけなので、まずは爆発っぽくなるように中心から外側に広がっていくように設定します。
InspectorからShapeを選択し、ConeからSphereに変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555721/aa89bdbd-f97c-29ab-ba4b-4385eea75c83.png)

これだけだとまだ爆発っぽくないのでもっと爆発に近いエフェクトになるようにしていきましょう。
まずはEmissionを下のように設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555721/cb4745d5-c3a1-7268-e240-b367a17ba769.png)
これで一度に出現するParticleの数が増加しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555721/9d360209-7a51-aa7e-776c-81a32815319a.png)
続けてLimit Velocity over LifetimeとSize over Lifetimeを次のように設定してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555721/ffbf7b19-a224-6ed2-f87f-447f27388681.png)
これで爆発のようなエフェクトにはなりますが少しParticleが残る時間が長いのでもう少し短くしましょう。
DurationとStart Lifetimeの値を次のように設定してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555721/81b6a190-8149-6bc4-d3a3-f31813cb83f0.png)
最後にRendererのMaterialからお好みのMaterialを選択すれば完成です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555721/51cd58e8-5308-a49e-b96c-a75d66f583be.png)
↑こんな感じになります

今回はStandard AssetsのParticleFireballを使用しましたが、ほかに自分が気に入ったものがあればそちらをお使いください。
##最後に
今回が初めての投稿になります。こうしたほうがもっと見やすくなる、こっちのほうがもっと爆発っぽいエフェクトになるなどのアドバイスがありましたら是非教えていただきたいです。よろしくお願いいたします。
もうGitHub Flow一択でよいのではないだろうか

# 背景
開発現場によっていろんなgitの運用フロー(git-flow、GitLab flow、GitFeatureFlow、オレオレフロー)が使われててしんどい。
いろんなブランチ名の運用ルールなどがあってしんどい。

もう開発者に開発と直接関係のない余計なルールを強いるのはヤメナイカ？

もう、Github Flow一択でよいのではないか、Githubの仕組み的にこういう運用を想定しているのではと思い、ここに具体的な運用方法を記す。
というか、私が知らないだけでもしかしたらこれが一般的なのかもしれない。

Github Flowについては下記のURLを参照
https://gist.github.com/Gab-km/3705015

# Github Flowのメリット
## とにかくシンプル
余計なブランチ命名ルールなどが存在せず、存在するのは変更内容を記載した自由書式のブランチ（fix-xxxなど）とmasterブランチのみ。

## 知名度が高い
エンジニアであれば、大体誰でも知ってる。

# Github Flowの問題点
チームや社内で開発するにあたって、テストやQAを要するため、即リリースが難しいケースがあるため、単純にGithub Flowを適用できない。
=> デプロイ可能とリリース可能は同一ではないと解釈。

# 具体的な運用方法
以下のように運用しています。

## 通常運用
1. 修正したい内容でmasterからブランチを作成(fix-xxxなど)
2. masterブランチへのPRを出し、ソースレビューを行う。
3. masterに取り込まれたら、ステージング環境で動作確認を行う。
4. masterブランチに新しいタグとしてバージョンナンバー(vx.x.x)をつけ、push
5. [リリースを作成](https://help.github.com/ja/github/administering-a-repository/creating-releases)し、本番環境へデプロイ 

## 緊急対応
1. 本番リリース済みのタグから修正ブランチを作成。
2. masterブランチへのPRを出し、ソースレビューを行う。
3. masterに取り込まれたら、ステージング環境で動作確認を行う。
4. 修正ブランチに新しいタグをつけ、push
5. リリースを作成し、本番環境へデプロイ 

# 上記の運用のなにがいいのか
- 常にmasterが最新かつデプロイ可能な状態で維持される
- 不必要にプロテクションブランチを作らなくて済む
- 新しいブランチ運用ルールを学ばなくて済む(どこのブランチにマージするかなど悩まなくてよくなる。マージ先はmaster一択)
- いちいちブランチ名を書くごとにチケット番号を調べたり悩まなくて済む
- リリース単位で変更内容をまとめて記載しておける
強化学習42　Colaboratory+CartPole+tensorflow 見せてもらおうかtensorflowの新兵器とやらを

中学生から大学生までのAI初学者を対象にしています。
強化学習２８を行っていることが前提です。

tensorflowの強化学習版は
tensorflow/agentsです。
githubは[こちら](https://github.com/tensorflow/agents)

この中にチュートリアルがあるので、そちらをやります。
CartPole をDQNでやるのが、チュートリアル１にありました。
colaboratoryのノートブックを開くからgithub経由で開きます。
![tensorflow.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190782/c3f127cd-f2ec-0d05-adaf-a63d158bf6a0.png)

そのまま実行すれば、すくすく進みます。
数分で終わります。

2日後に追記です。
chainerは、define by runです。この流れをくんで、pytorchもdefine　by　run。
tensorflowはver1.0がdefine and run、 ver 2.0がdefine　by　run。
このあたりの説明は、ググってください。
初心者に優しいのは、define by runです。
define　and　runは、めげました。強化学習には向いていない。ゲームごとの特徴を、いちいち細かく設定しなければならなくなります。
tensorflowで強化学習するならば、ver2.0以降ということになります。
ところが、googleは頑張っていますが、ver1.0と2.0が絶壁のように違うみたいで、ソースコードを読んでもひどいことになります。
tensorflowの可読性は悪いようなので、2日でめげました。chokozainer的に何もできない。
なので、tensorflowは大きな理由がなければ、2021年以降に再勉強しようかと思っています。

そもそも、tensorflowをやろうとしたのは、tensorflow.jsの存在があるからです。
同様のものはONNX.jsでできそうなので、そちらを使ってみようかと思います。
VMware Workstation で仮想マシンが起動できない

##現象

VMware Workstation pro 15で仮想マシンを起動できなくなりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552541/7a74dd09-b564-c48a-8054-958347399c8b.png)


##関連するKBなど

[資格情報ガードまたはデバイス ガードが有効になっている Windows 10 ホストで VMware Workstation の仮想マシンをパワーオンすると、BSOD が表示されて失敗する (2146361)](https://kb.vmware.com/s/article/2146361)


[Manage Windows Defender Credential Guard](https://docs.microsoft.com/en-us/windows/security/identity-protection/credential-guard/credential-guard-manage)


##対処法

社用PCなどの制限のある環境では上記のポリシーの変更などできないと思いますが、
こちらはHyper-V の機能をOFFにすることで起動できました。

私はDocker for Windows を立ち上げるためにHyper-Vを起動していました。

##実行コマンド


Hyper-V 機能 OFF（要再起動）
`bcdedit /set hypervisorlaunchtype off`

Hyper-V 機能 ON
`bcdedit /set hypervisorlaunchtype auto`
CSS擬似クラスnth-of-typeが予想以上に使える件

# nth-of-typeとは
擬似クラスnyh-of-typeは、同じ階層にある同じ要素で指定した順番の要素をセレクトすることができる擬似クラスです。
nth-of-type(odd)で奇数番目の要素、nth-of-type(even)で偶数番目の要素、nth-of-type(3n)で3の倍数の要素、など様々な順番でのセレクトが可能です。

```CSS
class-name:nth-of-type(odd) {
}

class-name:nth-of-type(even) {
}

class-name:nth-of-type(3n) {
}

```

これが可能なことで、デザインにもすごい幅が生まれます。
例えば、奇数番目のbackground-colorはblackで、偶数番目のbackground-colorはwhiteとすることで、簡単にシマウマ模様が作れたりなどデザイン性は無限にありそうです。

ぜひ擬似クラスを使用したことのない方は、使用してみてはいかがでしょう。