OmniAICreator/Qiita-1.07M huggingface dataset:
URLからQRコードを生成する

#手順
これをコピペ

```swift
extension String {

    func generateQR() -> UIImage? {
        guard let data = self.data(using: .utf8) else { return nil }
        guard let qr = CIFilter(name: "CIQRCodeGenerator", parameters: ["inputMessage": data, "inputCorrectionLevel": "M"]) else { return nil }
        let sizeTransform = CGAffineTransform(scaleX: 10, y: 10)
        guard let qrImage = qr.outputImage?.transformed(by: sizeTransform) else { return nil }
        return UIImage(ciImage: qrImage)
    }
}
```

したらこう使う

```swift

imageView.image = "https://github.com/son".generateQR()
```

<img width="373" alt="Screen Shot 2019-11-06 at 0.03.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216743/f74dd706-abdb-fa0d-bb3f-dd35d693f4c8.png">

やったね！
年末まで毎日webサイトを作り続ける大学生 〜18日目 Ap●le 公式サイトのFooterを真似して作ってみる〜

##はじめに

こんにちは！
年末まで毎日webサイトを作っている者です。
以前、Ap●leの公式サイトのファーストビューを真似して作ったんですが、今回はFooterを真似して作ってみました。
前は見た目だけでしたが今回は機能の方に焦点を当てました。
扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は18日目。(2019/11/5)
よろしくお願いします。

##サイトURL
- https://sin2cos21.github.io/day18.html


##やったこと
Ap●leのFooterを真似して作ってみました。
公式サイトの方はこれです（ぼかしています）↓
![スクリーンショット 2019-11-05 23.40.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/516248/ea9f4acd-6299-3aee-404e-3dbcd1960719.png)

画面サイズが小さければ縦に並んで、クリックすれば展開するような仕様です。
では、真似したやつを見てみましょう！↓
![test.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/516248/568cce52-f439-0389-f760-7da8b682a228.gif)

まずhtmlですが、表示したいものをリストで並べていきます。

```html
    <div class="footer_wrapper">
        <div class="footer_direction_column">
            <h3 class="panel">製品と情報と購入</h3>
            <ul class="closed">
                <li>Mec</li>
                <li>Mec</li>
                <li>Mec</li>
                <li>Mec</li>
                <li>Mec</li>
                <li>Mec</li>
                <li>Mec</li>
                <li>Mec</li>
                <li>Mec</li>
                <li>Mec</li>
                <li>Mec</li>
            </ul>
        </div>

        <div class="footer_direction_column">
            <h3 class="panel">サービス</h3>
            <ul class="closed">
                <li>Epple</li>
                <li>Epple</li>
                <li>Epple</li>
                <li>Epple</li>
            </ul>
            <h3 class="panel">アカウント</h3>
            <ul class="closed">
                <li>Upple</li>
                <li>Upple</li>
                <li>Upple</li>
            </ul>
        </div>
...
<!--以下続く-->
```

サイズが小さくなるとリスト部分の表示が消えてh3部分のみ残ります。その実装は、mediaクエリを使って一定以下のサイズになったらdisplayをnoneにしているだけです。(closedクラスで実装）

```css
@media screen and (max-width:767px) {
    .closed {
        display: none;
    }
...
```

最後に、画面サイズが小さい時にパネルをクリックするとリストの文字列が出たり消えたりする実装ですが、そこはJavaScriptで実装しています。

```javascript

window.onload = function () {

    let test = document.getElementsByClassName('panel');

    console.log(test);

    function h3Click(event) {
        console.log(event.target);
    }

    for (var i = 0; i < test.length; i++) {
        console.log(test[i]);
        test[i].addEventListener('click', function (e) {
            console.log(1);
            var nowNode = e.target;
            var nextNode = nowNode.nextElementSibling;
            if (nextNode.className == 'closed') {
                nextNode.classList.remove('closed');
                console.log(2);
            } else {
                nextNode.classList.add('closed');
                console.log(3);
            }

        })
    }
}
```

イベントリスナーでクリックされたら関数を実行します。
関数にはeventが引数に渡されていて、nextElementSiblingでクリックされた次の要素、つまり出たり消えたりするリストを特定しています。
クラスにclosedがあったら外し、なかったらつけることで、クリックするとあたかも出たり消えたりするように見えます。ようはdisplay: none;を付けたり外したりしてるだけですね。

##感想
途中、getElementsByClassNameでとった要素がうまく反映されなくてかなり時間を食いました。結局、window.onloadをソースコードの頭につけることで解決したんですが、実行順序とか、DOMの状態を意識しないとこれからも同じことが起こるなぁと反省しました。

最後までお読みいただきありがとうございます。明日も投稿しますのでよろしくお願い致します。
commit failed exit code 1 receivedの解決法

ミナミ([@minami_nakasato](https://twitter.com/MinamiNakasato))です。

今日お目にかかったエラーはこちら。

<img width="473" alt="スクリーンショット 2019-11-05 23.04.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242355/da87d7f1-542a-15d5-34d9-0953cc97a591.png">

## エラーが出るまで
* ターミナルでコマンド<font color="red">「rails new 任意」</font>を実行し、新規アプリ作成。
* ターミナルでコマンド<font color="red">「git init」</font>を実行し、ローカルリポジトリを作成。
* ヨソのリポジトリを<font color="red">「git clone」</font>し、<font color="red">「View」</font>フォルダの中に配置。
* アプリ[GitHub Desktop](https://desktop.github.com/)を使い、リモートリポジトリにプッシュしようとしたらエラーが発生。<font color="blue">**「commit failed exit code 1 received」**</font>の表示が出てしまった。

##エラーの原因
> 1 <font color="red">「git init」</font>時に作成された<font color="blue">「.git」</font>

> 2 <font color="red">「git clone」</font>で配置したディレクトリ内の<font color="blue">「.git」</font>

上記の二つが重複したため発生した。

##解決法
>1 ディレクトリの中で<font color="red">**「⌘ + shift + .」**</font>を押し、隠しファイルを表示させる。

>2 「git clone」して配置した「View」ディレクトリ内の「.git」を削除。

>3.再度プッシュしたら成功

同じエラー出た方、うまく解決しますように！

======================================
ミナミ([@minami_nakasato](https://twitter.com/MinamiNakasato))です。都内のベンチャー企業でwebデザイン／プログラミング／動画撮影や編集などをやっています。
端末のパイプ先に特定の出力だけ渡す方法

# 経緯

CLIツールを作っていたときに、コマンドの標準出力のうち、
パイプ先のコマンドに渡したい出力と渡したくない出力があるケースがでてきました。

以下のようなツールです。

![mycmd1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69665/759fcfff-1df2-7afa-4891-21f179725d7f.gif)

何らかの処理を行い、プログレスバー風のアニメーションをプロンプトに表示し、
処理結果のファイル名を最後に出力するコマンドです。

コードは以下のような感じです。
Nimでの実装です。

```nim
import os, strutils, strformat

for i in 1..60:
  # カーソルを1行上に移動し、行を削除するANSIエスケープシーケンス
  echo "\x1b[1A\x1b[K\x1b[1A"

  # 進捗の分数
  let prog = &"[ {i:>2}/60 ]"
  # 処理済みのバー
  let leftBar = "\x1b[44m" & " ".repeat(i).join() & "\x1b[m"
  # 空白のバー
  let rightBar = " ".repeat(60 - i).join()
  echo &"{prog} [ {leftBar}{rightBar} ]"
  sleep 25

# 処理結果を格納したファイルパス
echo "/var/tmp/result.txt"
```

渡したくないのはアニメーションをしているプログレスバーの部分です。
最後のファイル名だけパイプ先に渡して、catなりvimなりで開きたかったんです。

これをそのままlessするとどうなるか？
以下のようになります。

![2019-11-05-231752_939x507_scrot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69665/cb34ea82-0594-9184-b848-dcb5f771de02.png)

こうなります。悲惨です。
プログレスバーの出力と、カーソル移動、カーソル行の削除のANSIエスケープシーケンスまでlessが補足しています。

これを回避する方法を調べて、解決したことを書きます。

# 類似ツールの調査

必要な出力と不要な出力を分けてパイプ先に渡しているツールとして[peco](https://github.com/peco/peco)が思い浮かびました。
なので、pecoのソースを調べることにしました。

pecoのソースを読んだ所、pecoのUI部分は[termbox](https://github.com/nsf/termbox-go)が全部引き受けていることがわかりました。
termboxで軽くUIを作ってlessしてみたところ、termboxのUI出力はパイプ先に渡さないことがわかりました。
termboxのソースを読んだところ、以下の部分がその理由でした。

https://github.com/nsf/termbox-go/blob/master/api.go#L27-L42

`/dev/tty` を開いています。
`tty` について全然把握していなかったので、ttyについて調べました。
以下のQiitaの記事がとてもわかりやすかったです。

[Qiita - ttyとかptsとかについて確認してみる](https://qiita.com/toshihirock/items/22de12f99b5c40365369)

# 実装

前述の実装を参考に以下のように修正しました。

```diff
--- mycmd.nim	2019-11-05 21:16:47.623075601 +0900
+++ mycmd2.nim	2019-11-05 21:20:30.929732374 +0900
@@ -1,5 +1,15 @@
 import os, strutils, strformat
 
+var
+  tty = open("/dev/tty", fmReadWrite)
+  oldStdin = stdin
+  oldStdout = stdout
+  oldStderr = stderr
+
+stdin = tty
+stdout = tty
+stderr = tty
+
 for i in 1..60:
   echo "\x1b[1A\x1b[K\x1b[1A"
 
@@ -9,4 +19,9 @@
   echo &"{prog} [ {leftBar}{rightBar} ]"
   sleep 25
 
+tty.close()
+stdin = oldStdin
+stdout = oldStdout
+stderr = oldStderr
+
 echo "/var/tmp/result.txt"
```

`tty` で仮想端末を開き、`stdin`,`stdout`,`stderr`を上書きします。
echoは上書きされた`stdout`のほうに出力します。
一連の処理が終わったら`tty`を閉じてしまい、上書き前の`stdin`,`stdout`,`stderr`で元に戻します。

このように変更を加えたプログラム`mycmd2`を実行してみます。
結果がわかりやすいように`nl`を使います。

![mycmd2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69665/d4cedfcf-2e48-3759-2101-0246b7d2d5bb.gif)

最後の出力結果のみ、パイプ先のnlが処理するようにできました。
これで特定の出力だけパイプ先に渡せそうです。

# 実装例

まだ作りかけなのですが、今回得た知見を利用して
Nimでディレクトリツリーを表示するコマンドを作ってます。

https://github.com/jiro4989/dirsel

選択したファイルを最後に出力するので、あとはパイプ先でよしなに使ってくれ、というツールにしようかと。

![dirsel.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69665/072f7841-fb72-1fe4-2ad0-a56947384abf.gif)

以上です。
RICOH Theta V買ったときやった初期設定

# 概要
- 環境: Theta V, iPhone XR: iOS13, Windows10
- [ここ](https://support.theta360.com/ja/story/v/settings/)に公式の簡単セットアップがありますがところどころ詰まったので補足.
-  公式のマニュアルは[こちら](https://support.theta360.com/ja/manual/v/index.html).

# 準備の準備
1. Theta V本体をフル充電する

# PCと接続してやること
2. PCにパソコン用アプリケーションを入れる. [公式ページ](https://support.theta360.com/ja/download/)からOSに合ったパソコン用アプリケーションをインストール. 
3. Theta Vのファームウェアアップデート. PCにTheta VをUSBケーブル(充電用ではなく情報の転送ができるものを使う)でつないで, PC用アプリを起動. メニューのファイル > ファームウェアアップデートからTheta Vのファームウェアアップデートを行う.
 
# スマホと接続してやること
Theta Vとスマートフォンや他の機器の接続方法は3種類あります. 
1. (APモード) Theta Vをwifiアクセスポイントとして, スマホや他の機器をそのアクセスポイントに接続
2. Theta VとスマホをBluetoothで接続する
3. (CLモード) Theta Vとスマホやその他の機器を, 同一のwifiアクセスポイントに接続する
それぞれの接続のセットアップをしていきます

## APモードで接続 (Theta Vをwifiアクセスポイントにする)
4. スマホ向けのアプリをインストールする. [公式ページ](https://support.theta360.com/ja/download/)からダウンロード. iOSならAppStoreでRICOH THETAで検索.
7. スマートフォンアプリを起動して, 撮影をタップして接続待ち画面に入る. 
8. 次にTheta Vを起動して無線LAN接続待ち状態に入るのを待つ. Theta Vは起動すると自動的にwifiアイコンが青に点滅する無線LAN接続待ちモードに入るが, 自動で点灯しない場合は, 側面上から2つめのwifiボタンを短く押すと, wifiが起動する. 
9. スマホ上の新しいカメラの登録を押す. 画面の指示に従ってシリアルNoを入れると接続が完了. スマホはTheta Vのwifiに接続した状態になっていて, スマホ経由でカメラ内の画像の確認や画像のスマホへのインポート, 遠隔でのシャッター操作, 本体の設定などができるようになる.
10. 設定 > Wi-Fiパスワード変更から, Theta VのWifiのパスワードを変更できる. 電源がついた状態でwifiボタンを長押しすると電源が消え, パスワードが初期化されるので, うっかりあやまったパスワードを設定した場合はこれで対処

## Bluetoothで接続
11. スマートフォンのBluetoothをONにした状態で, スマホアプリ上の, 設定 > カメラBluetooth設定から, カメラBluetoothをオンにするを押す.
12. 接続状態がBluetooth+WiFiになれば接続ができています. Bluetoothのみで接続している場合シャッターは遠隔で切れますが画像の転送はできません

## CLモードで接続 (Theta Vとスマホを同一のwifiアクセスポイントに接続)
14. Theta VにスマホがAPモードで接続された状態のまま, アプリの, 設定 > 無線LANクライアントモード > (a)アクセスポイント設定から, 接続したい(たとえば自宅の)wifiアクセスポイントのSSIDとパスワードを入力して完了する. 
15. するとTheta Vのwifiマークが青ではなく緑色に点滅し, しばらくすると緑色に点灯します. 点滅時がwifiアクセスポイントと接続処理中で, 点灯時が接続完了です.
16. スマートフォンとTheta Vの接続はいったん切れてしまいますが, 同じwifiアクセスポイントに接続すればTheta Vアプリに繋ぐことができます. アプリの接続画面で下の無線ランクライアントモードで接続を選択. このとき打ち込むパスワードはデフォルトでは本体下部のシリアルの最初のアルファベット2文字を除いた残りの数字で, 変更する場合は設定 > 無線LANクライアントモード > (b)認証設定から変更できます.
<div align="center">
<img width="200" alt="図1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261215/1af1b6bd-61e7-7793-9930-d9ba9c32df94.png">
</div>

## 接続方法の切り替え
APモードとCLモードは本体右側面のwifiボタンを短く押すと切り替わります. off->CL->AP->off. CLモードでアプリと接続しているときは, CLモードの設定は変更できません. 


# まとめ
ほかにもやるべき初期設定があればぜひコメントください
蟻本　2-4　ヒープ実装の復習

プログラミングコンテストチャレンジブック（通称”蟻本”）より、色んな項目を詳しく見ていこうと思います。
プログラミングを始めて間もないので、解説は素人です。
2-4「データを工夫して記憶する”データ構造”」
◆ヒープ
…ヒープとは二分木の一種です。
子の数字が親の数字よりも必ず大きいという性質をもちます。
↓実装です。

```C++:qiita.c++
//heap[MAX_N]は配列。szはヒープの要素数。
int heap[MAX_N], sz=0;

//void pushはヒープに要素を入れる。
void push(int x){
//自分のノードの番号
  int i=sz++;
  
  while(i>0){
//親のノードの番号
    int p=(i-1)/2;
//子の数が親の数以上になっていればヒープの条件を満たすので抜ける。
    if(heap[p] <=x) break;
//そうでなければ子のノードに親の数字を代入する。
    heap[i]=heap[p];
//親のノードに移動する。
    i=p;
  }
//親のノードにxを代入する。
  heap[i]=x;
}

//int popはヒープから要素を取り出す。
int pop(){
//retにヒープの根の数字を代入。
  int ret=heap[0];
//xにヒープの最後尾の数を代入。
  int x=heap[--sz];
  int i=0;
  while(i*2+1<sz){
    int a=i*2+1,b=i*2+2;
//bが最後尾でないとき、heap[a]とheap[b]の小さい方に着目する。
    if(b<sz && heap[b]<heap[a]) a=b;
//heap[a],heap[b]の小さい方がx以上のとき、ヒープの条件を満たすので抜ける。
    if(heap[a] >= x) break;
//そうでなければ、i番目にa番目の数字を入れる。
    heap[i]=heap[a];
//小さい方の子に移動。
    i=a;
  }
//ヒープの条件を満たしていれば抜ける。
  heap[i]=x;
//根のノードの数字を返す。
  return ret;
}
```
Anacondaの仮想環境の削除で手間取った話

#まず初めに
anacondaで仮想環境を作成した際に不要になったので、仮想環境を削除しようとした時に、思いもよらないところでエラーが出た。
以下のようなもの。

```
PackagesNotFoundError: The following packages are missing from the target environment:
```
なにも考えずに、いつも通りに`conda uninstall (環境名)`のような形でコマンドを打ったが、うまくいかなかった。
その後、色々と調べたが、意外とハマっている人も多かった気がするのでメモがてらに書いておく。

#仮想環境の削除
削除できずに困っているなら、まずは`/Users/ユーザーの名前/anaconda3(各自のバージョン)/envs/ここにある仮想環境のディレクトリ`を削除することが必要！

削除したいディレクトリがどこに位置しているのかわからない場合は以下のコマンドを打ってみる。

```
$ conda info --env
```
自分の今いる環境には＊がついている。
ここで削除したいディレクトリを確認できれば、以下のコマンドを打ち込んで削除。

```
$ rm -rf /Users/ユーザーの名前/anaconda3(各自のバージョン)/envs/自分の消したいディレクトリ
```
このコマンドの実行後に削除されているかの確認。

```
$ conda info --env
```
なくなっていれば、ちゃんと消えている。
yum update でLinuxカーネルのバージョンとリリースバージョンのアップデートを除外する

yum update でLinuxカーネルのバージョンとリリースバージョンのアップデートを除外する為の設定メモ

yumコマンドのオプションを追加にても、アップデートされないようにすることはできますが、
意図しないアップデートを防ぐためにも、「/etc/yum.conf」を編集したいと思います。

##現在のバージョン確認

Redhat のバージョンを確認するには以下のコマンドを実行します。

```
$ cat /etc/redhat-release
```

カーネルのバージョンを確認するには以下のどちらかのコマンドを実行します。

```
$ cat /proc/version
$ uname -r
```

[Redhatカーネルバージョン値](https://access.redhat.com/ja/articles/16476)



##/etc/yum.confの編集

```
# vi /etc/yum.conf

---以下を追記---
exclude=kernel*　exclude=redhat-release*
```

viとしていますが、好みのエディタを使用してください。

##注意事項
redhat-release*のみの記載で、依存関係上アップデートされないようですが、一般的には両方記載するようです。
exclude=kernel*のみの記載の場合、Redhatのバージョンだけが上がってしまうため、注意願います。
ssh接続先のdockerコンテナにVSCodeのRemote Developmentで繋ぐ

# はじめに
Remote Developmentの登場によって、サーバやdockerコンテナにVSCodeで簡単に繋ぐことができるようになりました。
しかし、「サーバ上のdockerコンテナ」という二段階のリモート処理を実現する手段が見当たらなかったので、記事にしました。

# サーバやdockerコンテナにVSCodeで繋ぐ
まずは基本であるサーバ or dockerコンテナにVSCodeで繋ぐ一段階のリモート処理について説明します。

### サーバにVSCodeで繋ぐ
まずは~/.ssh/configを作ります。
例えば、こんな感じ。

```
Host aws
  Hostname 12.345.67.890
  User ubuntu
  IdentityFile ~/.ssh/hoge.pem
```

あとは、以下のページのようにRemote Developmentで繋ぐことができます。
https://dev.classmethod.jp/etc/vs-code-remote-development-ec2/

### dockerコンテナにVSCodeで繋ぐ
dockerコンテナが作成された状態でRemote Developmentボタンをクリックすると、以下のようにコンテナ一覧が表示されるので、繋ぎたいコンテナを右クリック→"Connect to Container"でコンテナに接続できます。
![Screenshot from 2019-11-05 22-46-47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281858/0085316a-c337-8a69-cf67-33062a50aa03.png)

### dockerコンテナにssh接続
本記事では多段sshを利用してサーバ上のdockerコンテナに接続します。
なので、dockerコンテナにssh接続できるようにします。

まず、以下の記事を参考にDockerfileを作り、docker buildします。
https://qiita.com/YumaInaura/items/1d5c18a9e55484ccad89

その後、以下のようなコマンドでコンテナを走らせます。

```
docker run -d -p 10000:22 image_name
```
10000のところは任意のポート番号で、自由に変更可能です。
image_nameはdocker imageの名前です。

そして、以下のようなコマンドでssh接続します。

```
ssh root@127.0.0.1 -p 10000
```

rootの部分はDockerfileに書いたユーザ名、10000の部分はdocker run時に書いたポート番号で置き換えます。

以上の方法でdockerコンテナにssh接続できますが、この方法だとPATHが通っていない状態でdockerコンテナの中に入ってしまうので、以下のissueを参考に、/etc/profileにPATHをexportするようDockerfileに記述しておきます。
https://github.com/NVIDIA/nvidia-docker/issues/36

# 多段sshでサーバ上のdockerコンテナにVSCodeで繋ぐ
あとは以上の方法を組み合わせるだけです。
まず、~/.ssh/configに以下のように記述します。

```
Host aws
  Hostname 12.345.67.890
  User ubuntu
  IdentityFile ~/.ssh/hoge.pem

Host aws_docker
  Hostname 127.0.0.1
  User root
  Port 10000
  ProxyCommand ssh -W %h:%p aws
```

サーバー上でコンテナを走らせた上でVSCodeを見るとaws_dockerが見えるので、上記と同様に接続します。

# おわりに
本記事では多段sshを利用して、サーバ上のdockerコンテナにVSCodeで繋ぐ方法を解説しました。
「もっと簡単な方法あるよ」という方は是非教えてください！
FlutterでTextFieldにフォーカスが当たっているかどうか判定する

検索などを実装するときに、キーボードにフォーカスが当たった瞬間別の画面を出すみたいな実装をする場合はがあるかと思います。

例えばこんな感じ

<img width="300" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139360/66b7eddd-791e-21ac-f27f-d6cb4accf10d.gif">

このときの実装方法について説明します。


## FocusNodeを使う


FucusNodeにリスナーをセットし、TextFieldに設定するだけです。

```dart

class Search extends StatefulWidget {
  @override
  _SearchState createState() => _SearchState();
}

class _SearchState extends State<Search> {
  FocusNode _focus = new FocusNode();
  bool _isFocus = false;

  @override
  void initState() {
    _bloc = SearchBloc();
    super.initState();
    _focus.addListener(_onFocusChange);
  }

  void _onFocusChange() {
    debugPrint("Focus: " + _focus.hasFocus.toString());
    setState(() {
      _isFocus = _focus.hasFocus;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "Search",
          style: TextStyle(
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
      body: CustomScrollView(
        slivers: <Widget>[
          SliverToBoxAdapter(
            child: Row(
              children: <Widget>[
                Expanded(
                  child: Container(
                    width: MediaQuery.of(context).size.width,
                    height: 40,
                    margin: const EdgeInsets.all(10),
                    child: TextField(
                      focusNode: _focus, ← 設定する
                      decoration: InputDecoration(
                        hintText: "User name",
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(30),
                          borderSide: BorderSide(),
                        ),
                      ),
                    ),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.send),
                  onPressed: () {},
                )
              ],
            ),
          ),
          _isFocus
              ? // フォーカスがあたってるときのWidget
              : // フォーカスがあたってないときのWidget,
        ],
      ),
    );
  }

  Widget _newUserList() {
     return Container(
        child: // フォーカスがあたってないときのWidget
     )
  }


```

以上です。
枠の上に文字を乗せるやり方

# 始めに
枠のあるデザインで以下のような枠線を一部消して文字を置くような実装をしたいときのやり方を記事にしました。

<p class="codepen" data-height="365" data-theme-id="0" data-default-tab="css,result" data-user="wintyo" data-slug-hash="NWKdpMO" style="height: 365px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="枠の上に文字を乗せる">
  <span>See the Pen <a href="https://codepen.io/wintyo/pen/NWKdpMO">
  枠の上に文字を乗せる</a> by wintyo (<a href="https://codepen.io/wintyo">@wintyo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# 実装方法
やり方は単純で、以下のようなことをしているだけです。

+ **1px分の白線を上に被せて消しているように見せる**
+ ラベルを所定の位置に移動する

この2つのことをそれぞれの要素で行ってもいいですが、ラベル要素から絶対パスで線を引いておくと消す長さを考えなくてもよくなります。

```html:html
<div class="area">
  <div class="area__label">ラベル</div>
  <div class="area__content">コンテンツ</div>
</div>
```

```scss:scss
.area {
  position: relative;
  width: 300px;
  height: 100px;
  border: solid 1px #f00;
  border-radius: 5px;
  background-color: #fee;
  
  &__label {
    position: absolute;
    top: 0;
    left: 20px;
    font-weight: 600;
    padding: 0 10px;  // paddingを左右にいれて消す線の長さを延ばす
    transform: translateY(-50%);
    
    &::before {
      position: absolute;
      z-index: -1;  // 何もしないと線が上に来ていたので-1して後ろに回り込ませる
      left: 0;
      bottom: 50%;  // top: 50%だと1pxずれていたのでbottomから計算する
      width: 100%;  // 親要素の幅を参照するため必ず文字分は消せる
      height: 1px;
      background-color: #fff;
      content: '';
    }
  }
  
  &__content {
    padding: 20px;
  }
}
```

# 終わりに
初めてこういったデザインを見るとどうやって実装するのか悩みそうですが、意外と背景色を上に被せて消すというやり方はあります（フキダシとか）。このような実装は知っていると便利なので誰かの役に立てたなら幸いです。
【Rails】grape-swagger-railsでドキュメント作成

grape-swagger-railsというGemを使って、APIのドキュメントを作成します。
なお、grape Gemを使ってAPIを作っている前提。

## Swaggerインストール

Gemfileに下記を追加 

```ruby:Gemfile
gem 'grape-swagger' # Grapeで定義したAPIをSwagger形式でドキュメント化する
gem 'grape-swagger-entity' # レスポンスモデルをSwaggerで見られる形式にするときに使う
gem 'grape-swagger-rails' # Rails用のSwaggerUI
gem 'grape-swagger-representable' # ResponseをEntityで定義した形式でドキュメントに表示するときに使う
```

`bundle install` 実行

```bash:
$ bundle install
```

## Route追記

```ruby:config/routes.rb
Rails.application.routes.draw do
  mount GrapeSwaggerRails::Engine => '/swagger' # 追記
end
```

## 設定ファイル作成

config/initializers/swagger.rbを作成

```ruby:config/initializers/swagger.rb
GrapeSwaggerRails.options.app_name = "SampleApi" # タイトル
GrapeSwaggerRails.options.app_url = 'http://localhost:3000'
GrapeSwaggerRails.options.url = '/api/v1/swagger_doc'
```

## add_swagger_documentation追記

 `root.rb` にadd_swagger_documentationメソッドを追記する。

```ruby:api/v1/root.rb
class V1::Root < Grape::API
...
  add_swagger_documentation() # 追記
...
end
```

これで [localhost:8080](http://localhost:3000/swagger) にアクセスすると、Swaggerドキュメントが表示される。

## Responseを表示させる

SwaggerドキュメントにはResponseが表示されていないので、表示されるようにAPIを編集する。
 `desc`の後に使用しているEntityを追記。

```ruby:users.rb
    desc 'returns all users', success: V1::Entities::UsersEntity
    get '/' do
      users = User.all
      present users, with: V1::Entities::UsersEntity
    end
```

これで `V1:Entities::UsersEntity` に記述されているResponseがドキュメントに表示される。
inotifywaitによるディレクトリの監視とスクリプト実行

そのうち必要になりそうなのでメモ。
こちらを自分用に寄せたもの。
[Linuxでファイルの変更を検知して、スクリプトを自動実行する(inotifywaitコマンド)](https://qiita.com/sgyt/items/4dd6cb750d8aa2948dc0)

### つくりたいもの
rootとなるディレクトリの配下に複数のディレクトリ(以下、子ディレクトリ)がある。
子ディレクトリの中に特定のファイルが生成されたとき、その子ディレクトリ内の別のファイルの内容を書き換える。

#### 満たすべき機能
* rootディレクトリ名は引数で指定
* 生成を検知するファイル名・書き換え対象のファイル名は固定
* 子ディレクトリは、外部から生成・削除
    * ディレクトリ名は任意
* スクリプト実行後もディレクトリの監視を継続

#### 使用する物
* inotify-tools( https://github.com/rvoicilas/inotify-tools/wiki#info )の`inotifywait`コマンド
* あとはbash

#### つくりかた
`inotifywait`の標準出力からイベントの詳細を配列で受け取る。

```sh
./dir1/ CREATE aa.txt
```
あとは受け取った配列の中身から更新対象のファイルパスを作成し、更新を実行。
今回はsedを使って文字列を置換する(とりあえず "HELLO" -> "GOODBYE")。

#### つくったもの(サンプル)
```sh
#!/bin/bash

DIR=$1
CREATED_FILENAME='createdfile'
MODIFIED_FILENAME='modifiedfile'

inotifywait -m -r ${DIR} -e CREATE,DELETE | while read line
  do
    declare -a params=( ${line} )
    event=${params[1]}
    dir=${params[0]}
    file=${params[2]}

    case ${event} in

      'CREATE')
        if [ "`echo ${file} | grep ${CREATED_FILENAME}`" ]; then
          echo "FILE CREATED"
          echo ${file}
          sed -i -e "s/HELLO/GOODBYE/" ${dir}${MODIFIED_FILENAME}
        fi;;

      *)
        ;;
    esac
  done
```

#### 注意点
特定のファイルしか生成されない想定なので、CREATEDイベントを検知するだけで十分かと考えていた。しかし、sedのiオプションで生成される一時ファイル(sedhogeみたいなやつ)も検知してしまうので、ファイル名を指定する必要があった。

#### 今後
systemdで動かしたい。
rubyで別ファイルの変数を読み込むときに気を付けること

最近Rubyを勉強しなおしています。
別のファイルを読み込むときに少しハマったので解決方法を記していこうと思います。
# 別ファイルの読み込み方
rubyでファイルを読み込むときは

```
require_relative "ファイル名"
```
とします。

## 変数のスコープについて気を付けること
ただし、ファイルをまたいだローカル変数は使うことができません。
例えば、

```main.rb
ary = (1..10).to_a
```
と変数を定義して別ファイルで使うとき

```second.rb
require_relative "./main.rb"

puts ary
```
としても呼び出すことができません。

main.rbでは代わりにグローバル変数で定義します。

```main.rb
#グローバル変数を定義
$ary = (1..10).to_a
```

こうすると

```second.rb
puts $ary
```

としてmain.rbで定義した変数を使うことができます。

ただし、むやみにグローバル変数を使うのは保守上よくないと思うのでファイルを上手に分割しないといけないのかなと思います。

おそらくですが次のように書いたほうがいいのではないのでしょうか？

```main.rb
def ary
  a = (1..10).to_a
  return a
end
```

としてから

```second.rb
require_ralative "main.rb"

puts ary
```

このように変数ではなくメソッド定義にして変数を返すようにしておけば、あたかも変数をファイルをまたいで使えるようになるのかなと思います。
phpbrew で EC-CUBE の開発環境を構築する

EC-CUBE を Mac で開発をする際に、いちばんおすすめの方法です。
Docker を使うとか、 MAMP や XAMPP を使うとかいろいろあると思いますが、、

- 頻繁に PHP のバージョンを切り替えたり、
- EC-CUBE のバージョンごとにいくつも環境を作ったり、

する必要があるので、最終的にこれに落ちついてます。
*受託開発などで、案件ごとに PHP バージョンが異なったりする場合は phpenv の方が使いやすいかもしれません。*

## 下準備

```shell
brew install libpng bzip2 icu4c openssl readline jpeg composer freetype libxml2 pcre texinfo mcrypt xz gettext mhash zlib libzip libcurl libiconv
```

## インストール

https://github.com/phpbrew/phpbrew/blob/master/README.ja.md#phpbrewのインストール

## EC-CUBE 向けの環境構築

*PHP バージョンはお好きなものを*

### 基本のものをインストール

```shell
phpbrew install -j $(sysctl -n hw.activecpu) 7.3 +default +dbs +fpm +opcache +openssl="$(brew --prefix openssl@1.1)" +bz2="$(brew --prefix bzip2)" +zlib="$(brew --prefix zlib)"
```

### Extension でインストールしないとエラーになるものをインストール

```shell
phpbrew ext install intl
phpbrew ext install opcache # 古いバージョンは zendopcache とする必要がある
phpbrew ext install apcu
phpbrew ext install gd -- --with-jpeg-dir=/usr/local/opt/jpeg --with-png-dir=/usr/local/opt/libpng --with-freetype-dir=/usr/local/opt/freetype --with-zlib-dir=/usr/local/opt/zlib --enable-gd-native-ttf --enable-gd-jis-conv
phpbrew ext install iconv -- --with-iconv=/usr/local/opt/libiconv
```

## 使用方法

```shell
PHP7.3.10 を使用する
phpbrew use 7.3.10

## あとは通常通りビルトインウェブサーバーで開発

# 4系
bin/console server:run

# 2系, 3系
php -S 0.0.0.0:8000 -t html
```

## php.ini の変更

```shell
## 環境変数 EDITOR のエディタで編集可能
phpbrew config
```
What's "JavaScript" ?

よく使い方を忘れるので、必要な時にサッと読み返せるように超完結にまとめておきます。

>勉強中の関連記事まとめ
>[自分用の勉強記事をまとめた目次　~擬似知識体系~](https://qiita.com/oekaki-hoho-ron/items/3194f560efc461ec03b0)

#JavaScriptとは

###簡単な歴史メモ

いろいろあってprototype.jsによってライブラリを使うクロスプラットフォーム言語としてシェアを獲得しました。

###インタプリタ言語

C言語などのコンパイル型言語のようにソースコードを一旦コンパイルして実行可能な形式に変換する必要のない言語。つまりブラウザなどの実行環境で直接ソースコードを動かすことができるということ。

###CやJavaに似た構文

根本的な書き方は異なるが、if文やwhile文といった一般的な構文が使えるため習得しやすい。

###動的型言語

よくわからん。変数や関数の返り値に型指定がないとか。

###プロトタイプベースのオブジェクト指向

よくわからん。クラスベースではないということ。

###リテラル表記の表現力

ソースコードの表記方法が良いということ。

###関数型プログラミング

functionなどの関数をオブジェクトとして捉えられるため複雑な処理を一括して呼び出すことができる。

###JavaScriptの基礎部分

- 変数
- 定数
- 関数の宣言と呼び出し
- プロパティは名前と値のペア
- プロパティ値に関数を指定できる
- プロトタイプチェーン
- プロパティアクセスとドット演算子とブラケット演算子
- メソッドとはオブジェクトのプロパティ値に関数を持たせたもの
- newで宣言するのはコンストラクタ呼び出しの関数オブジェクト（実質クラスと同義）
- クラスとインスタンス
- オブジェクトと型
- 配列

###JavaScriptの応用部分

- クライアントサイドjs
- ライブラリ
- WEBアプリとは
- Socket
- WEB API
- サーバーサイドjs
- Node.js



#言語仕様

###文字列

テキストを値として扱う型。`""`で囲むことで文字列型となる。

```.js
var t = "テキスト";
```

足し算でテキスト連結できる。ブラウザ画面に状況に合わせて見出しやメッセージを表示させるのに使う。

```.js
var t1 = "テキスト";
var t2 = "123";
var t3 = t1 + t2;
dcuument.write(t3);

＞ テキスト123
```

比較演算子で五十音順のソートなどができる。おそらくブーリアン演算結果によってどう処理するかというプログラムに使う。

```.js
var a = "あ";
var b = "い";
document.write(a < b);

＞ true    // aの方がNoが小さいから

document.write(a > b);

＞ false
```

文字列クラス名はString。`length`プロパティで文字数を取得する。

```.js
document.write(t3.length);

＞ 7
```

###文の種類

- 制御分
 - if else文
 - switch case文
- 繰り返し文
 - while文
 - do while文
 - for文
 - for in文
 - for each in
 - break文
 - continue文
 - return文
- その他
 - throw文
 - with文


###演算子の種類

- 算術演算子
- 文字列連結演算子
- 同値演算子
- 比較演算子
- in演算子
- instanceof演算子
- 論理演算子
- ビット演算子
- 代入演算子
- 算術代入演算子
- 条件演算子（3項演算子）
- typeof演算子
- new演算子
- delete演算子
- void演算子
- カンマ演算子（,）
- ブラケット演算子（[]）
- 関数呼び出し演算子


###参照

変数もプロパティも名前を付けて管理する。元は同じ概念。

###グローバル変数とローカル変数

スコープの違い。関数の中で宣言したらローカル。

グローバル変数はグローバルオブジェクトのプロパティ。

このあたり、変数とプロパティの考え方が重要になる。あるオブジェクトに与えられた値のことをプロパティと呼ぶ。あるスコープの中で宣言されたものを変数と呼ぶ。

オブジェクトとはプロパティの集合体。プロパティとは名前と値のペア。よくやるオブジェクトの定義はデータと操作（手続き）を一体化させたもの。

###new式・コンストラクタ（クラス）呼び出し・インスタンス生成

###メソッド

JavaScriptにメソッドは存在しない。便宜上、オブジェクトのプロパティに関数をセットしたものをメソッドと読んでいる。

実際には、this参照によって呼び出された関数の中でオブジェクトのプロパティにアクセスしたものをメソッドと呼ぶ。

this参照は読み込み専用の変数。

###プロトタイプ継承

プロトタイプチェーンという機能で他のオブジェクトのプロパティを引き継ぐ。








#コールバック関数

コールバック関数とは、別の関数に呼び出してもらうための関数。つまり、ある関数に渡す値としてコールバック関数を渡すということ。高階関数に渡すための関数。自分で直接実行するのではなく、相手に実行してもらうもの。

###

最も分かりやすい例として`setTimeout()`がよく挙げられる。

```js
setTimeout(処理内容, 実行タイミング);
```

このとき、第一引数の処理内容として関数を渡した場合、下のようなコードになる。

```js
setTimeout(function() {
    console.log('Hello World');
}, 3000);
```

このコードだと`setTimeout`によって3秒後に`function`が実行されることになる。これがコールバック関数というらしいが、これがノンブロッキング処理というのはどう解釈すればいいか。

ノンブロッキング処理とは、後続する処理をブロックしないように書かれたもの。上の例では、

###値として渡すか、処理するか

関数を値として扱うときは`()`をつけず関数名のみを変数に渡す。この場合、関数は処理が実行されることなく関数のコードのみが渡される。`()`をつけることは実行することを意味する。

そして関数を渡した変数の`()`に引数を渡すことで中身の関数、すなわちコールバック関数に引数を渡すことができる。

```js
function f(a, b) {
    return a + b; 
}

var ff = f;    // f(a, b)の()はつけない

console.log(ff(1, 2));

> 3
```

>参考文献
>[JavaScriptの「コールバック関数」とは一体なんなのか](https://sbfl.net/blog/2019/02/08/javascript-callback-func/)
What's "SQL" ?

よく使い方を忘れるので、必要な時にサッと読み返せるように超完結にまとめておきます。

>勉強中の関連記事まとめ
>[自分用の勉強記事をまとめた目次　~擬似知識体系~](https://qiita.com/oekaki-hoho-ron/items/3194f560efc461ec03b0)

#SQLとは

Structured Query Languageの略で、直訳すると「問い合わせのための構造化言語」となる。データベースに対して情報を効率よく伝えるための言語。
linux で 4GB 以上の zipファイルを解凍する方法

#### 追記

```
jar xvf hogehoge.zip
```

安心感を得るために ``v`` を付けて解凍の進捗を可視化してますけど, 邪魔なら ``V`` を消して``jar xf hoge.zip``にすればいいです.

の方を使うと7zで偶に遭遇するエラーも回避できそうです. 知らんけど

[How to unzip files bigger than 4GB?](https://serverfault.com/a/434537)

---

unzip コマンドは簡単で楽ちんですが, 4GBを超えると

```
rchive:  hogehoge.zip
warning [hogehoge.zip]:  5987253855 extra bytes at beginning or within zipfile
  (attempting to process anyway)
error [hogehoge.zip]:  start of central directory not found;
  zipfile corrupt.
  (please check that you have transferred or created the zipfile in the
  appropriate BINARY mode and that you have compiled UnZip properly)
```

と言われます.

なので別の方法で解凍しなきゃいけないわけですが, 調べると tar コマンドを使えだの jar でjavaでなんか解凍しろだの言っててよくわからん.

で, 一番簡単な方法を見つけたのでそれを紹介します.

一言で言うと **7z を使え** です.

## インストール

```
$ sudo apt update
$ sudo apt-get install p7zip-full p7zip-rar
```

## 解凍

```
$ 7z x hogehoge.zip
```
 この方法なら大きいzipファイルも解凍出来ます.

他にもいろいろオプションで指定出来るっぽいので気になる人は各自で調べてみてください.
#DCCツール＆アセット開発まとめ

DCCツールとアセット関連のまとめ。



<!--
https://qiita.com/sator_imaging/items/fd1d13649b5574c1c832
-->



- [DCCツール](#dccツール)
    - [Substance Painter](#substance-painter)
    - [Maya](#maya)
- [ゲームエンジン](#ゲームエンジン)
    - [Unity](#unity)
    - [UE4](#ue4)
- [その他](#その他)
    - [Visual Studio Code](#visual-studio-code)





## DCCツール


- [リニアワークフローとカラースペース覚書](https://qiita.com/sator_imaging/items/6a1f7b37cf3fce443995)

    - 従来は 【 色 】 の情報を使用してレンダリング・コンポジットを行っていたが、【 色 】 ではなく 【 光 】 の量をテクスチャ・レイヤーとして出力し、レンダリング・コンポジットが終わった後に 【 光 】 を 【 色 】 に変換しよう、というワークフローのこと。




### Substance Painter


- [【Substance】 ノーマルマップでとがった角を丸く見せるツール](https://qiita.com/sator_imaging/items/b6626f6e1c810c5db98d)

    - <a href="https://www.youtube.com/watch?v=HKmvOWjw-6A">【YouTube】Faked Rounded Corners on Normal Map: Substance Painter Generator<br /><img src="https://i.ytimg.com/vi/HKmvOWjw-6A/mqdefault.jpg" /></a><br />



- [Substance Painter のレジストリ（TDRどうこう）をダブルクリックで解決するヤツ](https://qiita.com/sator_imaging/items/0ae7f83fa16d333ea1df)






### Maya

- [【MEL】 キーフレームが無いアトリビュートにキーを打つ MEL スクリプト](https://qiita.com/sator_imaging/items/74c2e173693853db1f7d)


- [Maya Bifrost 似非ウェットマップ](https://qiita.com/sator_imaging/items/37084aa8e433094e3795)


    - <a href="https://www.youtube.com/watch?v=7cI5qJce0ag">【YouTube】Maya Bifrost // Wet Map R&D<br /><img src="https://i.ytimg.com/vi/7cI5qJce0ag/mqdefault.jpg" /></a><br />




## ゲームエンジン


### Unity

- [Unity の Terrain を FBX でエクスポート](https://qiita.com/sator_imaging/items/9f0d73b089c21101a8e7)


- [Unity でタッチジェスチャーの認識](https://qiita.com/sator_imaging/items/3de288b670ac4428ab85)

    - <a href="https://www.youtube.com/watch?v=I5CWLGUljsk">【YouTube】Touch Gesture Recognition for Unity<br /><img src="https://i.ytimg.com/vi/I5CWLGUljsk/mqdefault.jpg" /></a><br />



- [【Unity】 キャラクターのポーズ編集用エディター拡張](https://qiita.com/sator_imaging/items/9355378607157da67286)

    - <a href="https://www.youtube.com/watch?v=-SawrAFcilc">【YouTube】Unity ポーズエディター チュートリアル<br /><img src="https://i.ytimg.com/vi/-SawrAFcilc/mqdefault.jpg" /></a><br />




### UE4




## その他


### Visual Studio Code

- [VS Code 用の MEL スクリプト拡張](https://qiita.com/sator_imaging/items/fe51a29a4bfdbe5e955c)
C#でバイナリファイルのSHA-256を計算する（実質4行）

.NETやっぱり便利

# たったこれだけ

```csharp:sha256test.cs

using System;
using System.IO;
using System.Linq;
using System.Security.Cryptography;

class Program
{
    [STAThread]
    static void Main(string[] args)
    {
        if (args.Length == 0) { return; }

        byte[] byteValue = File.ReadAllBytes(args[0]);
        SHA256 crypto = new SHA256CryptoServiceProvider();
        byte[] hashValue = crypto.ComputeHash(byteValue);
        Console.WriteLine( String.Join("", hashValue.Select(x=>x.ToString("x2")).ToArray()) );
    }
}
```

# 動確

下記のzipに対してSHA256一致確認済み。
https://www.ruby-lang.org/ja/news/2019/10/02/ruby-2-4-9-released/

```

>sha256test ruby-2.4.9.zip
4ad1c32554319661f2872bb978ff2cd520bc4593681a6476b4c5e7f330172d8b
```
Ruby で Python の for-else っぽいことをやってみる

## きっかけ

[Effective Python メモ　項目12　forとwhileループの後のelseブロックは使うのを避ける](https://qiita.com/mori151311/items/55324d9c685153f929a8) を読んで、逆に Ruby だとどう書くのかが気になった。

## やること

```python
a = 4
b = 9
for i in range(2, min(a, b) + 1):
    print('Testing', i)
    if a % i == 0 and b % i == 0:
        print('Not coprime')
        break
    else:
        print('Coprime')
```

`else` 節が実行されるのは、ループが中断されることなく終了した場合です。確かに、直感的な動作ではありません。
これをを Ruby で頑張ります。

## 検討

`else` 節を無視すると、Ruby の場合、

```ruby
a = 4
b = 9
(2..[a, b].min).each do |i|
  puts "Testing: #{i}"
  if (a % i).zero? && (b % i).zero?
    puts "Not coprime"
    break
  end
end
```

となります。`each` は `self` を返すので、`break` することなく繰り返しが終了すると、`2..[a, b]` すなわち、真の値が返り、`break` すると、`nil` すなわち、偽の値が返ります。

そこで、`and` でつなげば上手くいきそうです。

## 結論

```ruby
a = 4
b = 9
(2..[a, b].min).each do |i|
  puts "Testing: #{i}"
  if (a % i).zero? && (b % i).zero?
    puts "Not coprime"
    break
  end
end and puts "Coprime"
```

一応、上手くいきました。でも、美しくありませんねぇ。

なお、`&&` を使うには `puts("Coprime")` とするか `(puts "Coprime")` として、`puts` と `"Coprime"` の結び付きを強くする必要があります。

## おまけ

Ruby ぽく `puts` を外に出す方法も考えてみました。

#### その１

```ruby
a = 4
b = 9
puts (2..[a, b].min).each_with_object("Coprime") { |i|
  puts "Testing: #{i}"
  if (a % i).zero? && (b % i).zero?
    break "Not coprime"
  end
}
```

#### その２

```ruby
a = 4
b = 9
puts "Coprime".tap {
  (2..[a, b].min).each do |i|
    puts "Testing: #{i}"
    if (a % i).zero? && (b % i).zero?
      break "Not coprime"
    end
  end
}
```

どれも分かりづらいです。

『Effective Python』にもあるように、やはり `for-else` 的なことはやらずに、メソッドに切り出すのが一番のようです。

```ruby
def coprime?(a, b)
  (2..[a, b].min).each do |i|
    return false if (a % i).zero? && (b % i).zero?
  end
  true
end

puts coprime?(4, 9) ? "Coprime" : "Not coprime"
```
初心者によるプログラミング学習ログ 146日目

# 100日チャレンジの146日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

146日目は、

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>146日目<br><br>メンターさんのjavascript課題クリア<br>次の課題、adobeXDを利用してコーディング<br><br>XDは使ったことないのでググるもの寝落ち<a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> <a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#早起きチャレンジ</a><a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a> <a href="https://twitter.com/hashtag/adobexd?src=hash&amp;ref_src=twsrc%5Etfw">#adobexd</a></p>&mdash; ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) <a href="https://twitter.com/yudapinokio/status/1190015577936367618?ref_src=twsrc%5Etfw">October 31, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Ubuntuの古いカーネルがディスクを圧迫するときの対処法

# ディスクを圧迫している状態

```shell
$ sudo du -h -d 1 /usr/src/
13M     /usr/src/linux-headers-4.4.0-1050-aws
13M     /usr/src/linux-headers-4.4.0-1052-aws
...
3.7G    /usr/src/
```

おうふ。

# 古いカーネルイメージを一発できれいにする

```shell
$ sudo apt autoremove -f
Reading package lists... Done
Building dependency tree
Reading state information... Done
Correcting dependencies... Done
The following additional packages will be installed:
  linux-aws-headers-4.4.0-1094
The following packages will be REMOVED:
  linux-aws-headers-4.4.0-1050 linux-aws-headers-4.4.0-1052
  linux-aws-headers-4.4.0-1054 linux-aws-headers-4.4.0-1055
  ...
done
```
Visual Studio 2019がうるさい


```C
#include <stdio.h>

int main(){

	FILE *fp1=NULL, *fp2=NULL;

	// ファイルを開く
	if (fopen_s(&fp1, "readfile.txt", "r") != 0) {
		printf("Read File not open\n");
		return -1;
	}
	// データの読み込み(省略

	// 書き込み用ファイルを開く
	if (fopen_s(&fp2, "writefile.txt", "w") != 0) {
		printf("Write File not open\n");
		return -1;
	}
	// 書き込み処理

	fclose(fp1);
	fclose(fp2);

	return 0;
}
```


```
警告	C6387	'fp1' は '0' である可能性があります: この動作は、関数 'fscanf_s' の指定に従っていません。
警告	C6387	'fp2' は '0' である可能性があります: この動作は、関数 'fprintf' の指定に従っていません。
```

こんなんでも文句言われるんだ。
とりあえず修正してワーニングエラー出ない様にした。

```C
#include <stdio.h>

int main(){

	FILE *fp1=NULL, *fp2=NULL;

	// ファイルを開く
	if (fopen_s(&fp1, "readfile.txt", "r") != 0) {
		printf("Read File not open\n");
		return -1;
	}else{
		// データの読み込み(省略

		fclose(fp1);
	}

	// 書き込み用ファイルを開く
	if (fopen_s(&fp2, "writefile.txt", "w") != 0) {
		printf("Write File not open\n");
		return -1;
	}else{
		// データの書き込み(省略

		fclose(fp2);
	}
	return 0;
}
```

修正前の処理で0で通る可能性ってあるか？
p[-d] と *(p-d) が同じとは限らない(C言語)

# トラブルの内容

先日仕事でこんな感じのコードを書いた。

```c:c99
// clang -std=c11 -Wall sample.c
#include <stdint.h>
#include <stdio.h>

int main() {
  uint32_t delta = 1;
  int a[10] = {11, 22, 33, 44, 55, 66, 77, 88, 99, 111};
  int *p = a + 5;
  printf("p[delta]=%d, p[-delta]=%d\n", p[delta], p[-delta]);
  return 0;
}
```

`p` は `a[5]` つまり `66` を指している。
`p[delta]` は `p[1]` なので `77` 。 
`p[-delta]` は `p[-1]` なので `55` 。 
になると思っていた。

手元の mac で実行するとこうなる。

```text
Segmentation fault: 11
```

あらあら。

# 解説

C 言語の配列演算子 `a[b]` は、 `*(a+(b))` のシンタックスシュガーなので
`p[-delta]` は、 `*(p + (-delta))` 
と同じ。

そして `-delta` は `0-delta` と同じ意味だ。

`0-delta` だが、左辺は `int` 。右辺は `uint32_t` 。 `sizeof(int)` はここでは 4。つまり `int` は 32bit である。

引き算なので、通常の二項変換が施される。
この場合「符号なし型(右辺)」と「それと同じランクの符号付き型(左辺)」という組み合わせなので両辺が右辺の符号なし型に変換される。

つまり、 `0-delta` は、 `0U-delta` になる。

符号なし型同士の減算の結果は符号なし型になる。この場合、`delta` は `1` なので `0U-delta` は、`4294967295` になる。

したがって、 `*(p + -delta)` は `*(p + 4294967295)` になる。
この処理系はポインタが 64bit なので、`p + 4294967295` は `p - 1` とはぜんぜん違う遥か彼方のメモリを指している。

逆参照することで、セグフォする。

# 修正方法

以下のようにすると、当初の意図通りに動く：

```c:c99
// clang -std=c11 -Wall sample.c
#include <stdint.h>
#include <stdio.h>

int main() {
  uint32_t delta = 1;
  int a[10] = {11, 22, 33, 44, 55, 66, 77, 88, 99, 111};
  int *p = a + 5;
  printf("*(p+delta)=%d, *(p-delta)=%d\n", *(p+delta), *(p-delta));
  return 0;
}
```

注目すべきは `*(p-delta)` の部分だ。

`p-delta` は、ポインタと符号なし整数の減算である。
ポインタから符号なし整数を減じる場合、ちゃんとその値の分だけポインタが戻る。
したがって、 `p-delta` は `p-1` であり、 `*(p-delta)` は `p` のひとつ前のアドレスを逆参照する。

# ちなみに

トラブルになった例は `delta` が `uint32_t` だった。

## uint16_t の場合

`delta` が `uint16_t` であるなら。

通常の二項変換の内容は:
「符号なし型(右辺)」と「それよりランクが高い符号付き型(左辺)」という組み合わせなので両辺が左辺の符号付き型に変換される。

つまり、 `0-delta` は、 `0-(int)delta` になり、トラブルにならない。

## uint64_t の場合

`delta` が `uint64_t` であるなら。

通常の二項変換の内容は:
「符号なし型(右辺)」と「それよりランクが低い符号付き型(左辺)」という組み合わせなので両辺が右辺の符号なし型に変換される。

つまり、 `0-delta` は、 `0ULL-delta` になる。`delta` は `1ULL` なので、都合、`0-delta` の値は `18446744073709551615ULL` = `0xffffffffffffffffULL` になる。

`p+0xffffffffffffffffULL` はオーバーフローなので未定義動作になるが、多くの処理系ではこの値は `p-1` と同じになる。
というわけで、 `uint64_t` の場合、未定義動作ではあるものの、落ちるコードは意図通りに動くことが多いと思う。

# まとめ

最初に挙げたセグフォになる例を `gcc-9` と `clang` でコンパイルしてみたが、 `-Wall` をつけても警告が出なかった。

このトラブルが発現するためには

* `p[-x]` という記法を使うこと
* `x` が `int` と同じサイズの符号なし型であること
* `int` の長さがポインタの長さより短いこと

あたりが全て揃わなければならないはずなので、とりあえず `p[-x]` という記法を避けて `*(p-x)` と書くのが良いと思う。
windows10でRustを使う方法・準備（2019/11/05現在）

# Rustのインストール
windows10でRustを実行するために必要な手順をまとめます。
## Rustを実行するために必要なもの
 - rustup
 - c++コンパイラ
 - テキストエディター（解説なし）

## rustupのインストール
### rustupダウンロード
https://www.rust-lang.org/tools/install
サイトの真ん中`RUST-INIT.EXE`をクリックでダウンロード。`rustup-init.exe`がダウンロードされます。（`RUST-INIT.EXE`ボタンがなんとなく認識しづらいので注意）

### `rustup-init.exe` の実行
 `rustup-init.exe` を実行します。私の場合はwindowsのセキュリティに実行を阻止されたので、その場合は注意画面の「実行」を押します。

実行できるとコマンドプロンプトが開きます。コマンドプロンプト上に文字がでないときはエンター1回押しましょう。

その後`yと入力してエンター`。Default設定をダウンロードするために`1と入力してエンター`。インストール完了に1分くらい待ちます。

rustがインストールされました。正しくインストールされている場合はコマンドプロンプト上で`rustc --version` `cargo --version`が有効になっています。

## C++コンパイラのインストール
### C++コンパイラのダウンロードサイト
https://visualstudio.microsoft.com/ja/downloads/
サイト下にある`Visual Studio 2019のツール`にある`Build Tools for Visual Studio 2019`をダウンロード。`vs_buildtools__1252431341.1571638593.exe`のような形式でダウンロードされます。

### `exeファイル`の実行
先ほどダウンロードした`vs_buildtools__1252431341.1571638593.exe`を実行します。`Visual Studio Installer`が表示されるので「続行」。`Visual C++ Build Tools`にチェックを入れ、右に表示されるチェック項目3つ（以下のもの）にチェックをつけ「インストール」。

 - V142 ビルドツールの C++/CLI サポート
 - V142 ビルドツールの C++ モジュール
 - Windows 10 SDK 

インストール後再起動でrustファイルのコンパイルが可能になります。

## rustファイル(.rs)のコンパイル方法
コマンドプロンプトで`rustc main.rs`と記述するとコンパイル出来ます。同じディレクトリ内に実行ファイルが出来るので`main`と打てばと実行されます。

### `linker 'link.exe' not found` エラーが表示された場合
C++のコンパイラがインストール出来ていません。再起動していないか、インストールがうまくいってないのだと思います。頑張ってください。

### rustのコンパイルの実行例
`main.rs`を作成。中身を下のように記述します。実行に成功すると`Hello World!`と表示されます。

~~~rust
fn main(){
 println!("Hello World!");
}
~~~

main.rsのあるディレクトリに移動し、コマンドプロンプトで`rustc main.rs`を入力エンター。同ディレクトリ内に`main.exe`が作成されたら成功です。

同ディレクトリ内で`main`を入力エンターでコマンドプロンプト上に`Hello World!`が表示されます。

## 参考サイト
https://qiita.com/euledge/items/ce3e24a2b8020441cd85
https://www.kunihikokaneko.com/tools/win/buildtool.html

## 参考用画像
![rustupインストール.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520872/d3905430-d2b0-fdbd-08e8-76db16aa7e8a.png)
![Build_Toolsの場所.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520872/b03fdf2c-56a8-88c5-3189-66ff2c64fd38.png)
Ruby on Rails チュートリアル 第10章　10.4.3 ユーザー削除のテスト

#10.4.3 ユーザー削除のテスト
10.4.3以前の部分で作成したユーザーを削除する機能のテストを実装していく。
まず。テストで使用可能なユーザーのデータを書き込む test/fixtures/users.yml ファイルにおいて以下のように、サンプルユーザーの一人に管理者属性を付加する。こうすることでテストにおいても管理者権限を持つユーザーが削除を行えるようにする。

```ruby:test/fixtures/users.yml

michael:
  name: Michael Example
  email: michael@example.com
  password_digest: <%= User.digest('password') %>
  admin: true
```

次に、ユーザー削除に関するテストをUsersコントローラーのアクション単位で実装するため、テストファイルにおいてdeleteリクエストを発行しdestroyアクションを動作させる。

```ruby:test/controllers/users_controller_test.rb

require 'test_helper'

class UsersControllerTest < ActionDispatch::IntegrationTest

  def setup
    @user       = users(:michael)
    @other_user = users(:archer)
  end
  .
  .
  .
  test "should redirect destroy when not logged in" do
    assert_no_difference 'User.count' do
      delete user_path(@user)
    end
    assert_redirected_to login_url
  end

  test "should redirect destroy when logged in as a non-admin" do
    log_in_as(@other_user)
    assert_no_difference 'User.count' do
      delete user_path(@user)
    end
    assert_redirected_to root_url
  end
end
```
このファイルのテストでは、assert_no_differenceメソッドを使って、当該ブロックの処理の前後でユーザー数が変化しないことを確認している。
【翻訳】deviseで論理削除を実装する方法

deviseで論理削除を実装する必要があり、deviseのWikiはあるけど日本語の記事が見当たらなかったので当該記事を翻訳することにしました。

参考：[How to: Soft delete a user when user deletes account](https://github.com/plataformatec/devise/wiki/How-to:-Soft-delete-a-user-when-user-deletes-account)

# 物理削除と論理削除の違い
普通にDBからデータを削除することを物理削除と言います。一方で、DBにフラグとなるフィールドを作成し、削除時に削除フラグを立てることにより仮想的に削除時に見えなくする処理のこと。
deviseのデフォルトの退会機能は物理削除だが、例えば退会後もユーザー情報を保持したい場合は論理削除を実装する必要があります。（というか、多分そういう場合がほとんどではないかな）

以下、訳文。
# ユーザーアカウントを削除するがユーザー情報は保持する（論理削除）
ユーザーがアカウントの削除を選択すると、すべてのデータが工夫によって破壊されます。
ユーザーデータは保持する一方で、ユーザーを非アクティブにし、ログインできないようにすることが求められる場合があります。
以下はユーザーを論理削除する方法です。

1. datetime型の`deleted_at`カラムを追加
2. routingの`users/registrations#destroy`をオーバーライド
3. registrations controllerの`users/registrations#destroy`をオーバーライド
4. 論理削除でユーザーモデルを更新し。認証でユーザーがアクティブかどうかを確認する
5. delete時のカスタムメッセージを追加

## 1. `Users`モデルに`deleted_at`を追加
下記をターミナルで実行

```
rails g migration AddDeletedAtColumnToUsers deleted_at:datetime
rake db:migrate
```

## 2. `config/routes.rb`で削除時のroutingをオーバーライド
```ruby

# devise_for :usersの部分を下記のように修正
devise_for :users, :controllers => { :registrations => 'users/registrations' }
```

## 3. registrations controllerの`users/registrations#destroy`をオーバーライド
まだ作成していなければ、`app/controllers/users/registrations_controller.rb`を作成する。
ここでDevise registrations controllerを継承し、destroyをオーバーライドする。

```ruby
# app/controllers/users/registrations_controller.rb
class Users::RegistrationsController < Devise::RegistrationsController
  # DELETE /resource
  def destroy
    resource.soft_delete
    Devise.sign_out_all_scopes ? sign_out : sign_out(resource_name)
    set_flash_message :notice, :destroyed
    yield resource if block_given?
    respond_with_navigational(resource){ redirect_to after_sign_out_path_for(resource_name) }
  end
end
```

## 4. 論理削除でユーザーモデルを更新し。認証でユーザーがアクティブかどうかを確認する
```ruby
  # app/models/user.rb  

  # 物理削除の代わりにユーザーの`deleted_at`をタイムスタンプで更新
  def soft_delete  
    update_attribute(:deleted_at, Time.current)  
  end
  
  # ユーザーのアカウントが有効であることを確認 
  def active_for_authentication?  
    super && !deleted_at  
  end  
  
  # 削除したユーザーにカスタムメッセージを追加します  
  def inactive_message   
    !deleted_at ? super : :deleted_account  
  end 
```

## 5. 削除されたアカウントでログインしようとしたときのカスタムエラーメッセージを設定
```ruby
# config/locales/*your-filename-here*.yml

en:  
  devise:  
    failure:  
      deleted_account: "You've deleted your account. Thanks!" 

ja:
  devise:  
    failure:  
      deleted_account: "このアカウントは既に削除されています。" 
```

# 終わりに
以上で終了です。結構簡単に実装できますね。
でも論理削除だけだと、「削除したアカウントがまた同じメールアドレスで登録しようとするときはどうするの？」となってしまうので、その方法が無いか調べましたが見つかりませんでした。
多分同じようにコントローラーを継承してオーバーライドしていくんでしょうが、`confirmation`などもあると厄介ですね。
もしご存知の方が居れば良い方法を教えて頂けるとありがたいです。
自分用

###javascript

```html:
<script>
document.write('');
</script>
```
//オブジェクト.メソッド(パラメーター);//
//スクリプトの対象.命令(メソッドを調整する為の値);//

```javascript:
document.write('10+3');
```
//シングルクォーテーションで囲むと文字列。//

```javascript:
document.write(10+3);
```
//''が無い場合は、演算、変数として扱う。//

###文字列連結
```javascript:
document.write('10＋3の結果は'+(10+3)+'です');
```
//()をつけないと文字列になるので注意。//

###変数

```html:
<script>
  const answer = 10 + 3;
  document.write('10+3の結果は' + answer + 'です)
</script>
```
//answerという変数に、10+3の計算結果を代入する。変数も数字なので''に入れることはできない。//
//複雑な計算の場合、動作速度の向上や管理がしやすくなる。//
//変数名には、1文字目はアルファベット、アンダースコア、ドル記号が使える。//
//2文字目以降は、それに加えて数字も使える。//
//大文字、小文字は区別される。//

###変数の上書き

```html:
<script>
 const answer = 10 + 3;
 document.write('10+3の結果は' + answer + 'です');
            
 answer = 10 - 3;
 document.write('<br>10-3=' + answer);

 answer = answer + 10;
 document.write('<br>' + answer);
</script>
```
//上の計算から処理される。//

###計算の省略形
```javascript:
answer += 3;
answer -= 3;
answer *= 3;
answer /= 3;
answer ++;(answer = answer + 1)
answer --;(answer = answer - 1)
```

###instance(実体化)
```html:
<script>
　　const today = new Date();
document.write('<p>今日は' + today.getDate() + '日です</p>');
</script>
```
//Date();オブジェクトに、newをつける事によってtoday
にinstance化(実体化)する。//
//オブジェクトはinstance化しないと使えない。//

###今日の日付

```html:
<script>
   const today = new Date();
   const todayhtml = today.getFullYear() + '/' + (today.getMonth() + 1) + '/' + today.getDate();

   document.write('<p class="date">' + todayhtml + '</p>');
</script>
```
//getMonthは、１月を０としてるので、ひとつ少ない数値になるため、+1とする。//

```html:
 <script>
    document.getElementById('timer').innerHTML = '00:00:01';
 </script>
```
//scriptタグは、headタグの最後、またはbodyタグの最後、もしくは別のファイルに書く。//
//innerhtmlはプロパティ。00：00：01をinnerhtmlに代入//

###if構文
```javascript
//secondsが10未満の時だけseconds = '0' + secondsを実行する。//
if (seconds < 10) {
        seconds = '0' + seconds;
        }
```

###比較演算子
```
A>B 　　AがBより大きい
A>=B　　AがB以上
A===A　AとBが等しい
A<=B　　AがB以下
A<B　　AがBより小さい
A!==B　AとBが等しくない　　　　　　　
```

###アロー関数 () => {
```javascript
//無名関数の省略形。functionが要らない。//
 document.getElementById("start_stop").addEventListener
('click', () => {
  const start = new Date();
        });
```

###for構文
```javascript
//for構文は、繰り返し回数を指定し、その回数になるまで同じ処理を何度も行う構文//
for (i=0 i<...[0].length;i++) ｛
処理
｝
```
###三項演算子
```javascript
var age = 30;
var appearance = age <= 50 ? ' is middle aged ' : ' is senior ';
console.log(appearance);
```
###switch文
```javascript
var age = 30;
var firstName = 'your';

switch (age) {
  case 20:
    cosole.log(firstName + ' is boy ');
    break;
  case 30:
    console.log(firstName + ' is middle aged ');
    break;
  default:
console.log(firstName + ' is senior ');
}
```
Windows.Mac対応「いち早くコードを書くには」 

###※この記事の対象の方
・「プログラミング初心者」
・「実際の現場で経験を積む前の方」を想定しています。

#はじめに

「プログラミング初学者がいち早くコードを書くためには」
といった視点から書かれた記事になっています。

#「Cloud9（AWS）」がおすすめ

初めはCloud9（AWS）を利用することをお勧めします。

Cloud9（AWS）とは何か？

また、その理由について書いていきます。

##アマゾン ウェブ サービス（AWS）とは？

![aws.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490422/6bb89d97-5efd-0833-bf25-a5f18113addd.jpeg)


AWSとは**Amazon Web Services**の略称で、

Amazon 社内のビジネス課題を解決するために生まれた IT インフラストラクチャのノウハウをもとに
企業を対象にしてIT インフラストラクチャサービス(※1)のこと。

まあ、いろいろ難しいことが書かれていますが、つまりはAWSが自分の代わりに環境構築してくれるといったイメージ。


AWS☞https://aws.amazon.com/jp/about-aws/

　　　(※1)基盤となる設備また、要素を提供すること


##１．Cloud9（AWS）の手軽さ

初学者にとって大変な環境構築。それをAWSで解決することができます。

プログラミング学習初学者の約9割が挫折するといわれている中、

**継続してプログラミングを習得するためには「テンポよく学習する」ことが重要です。**

ローカル開発を整えるためには個人で仮想マシンを立ち上げるなど、初学者にとっては多くの時間、労力が必要であり、コードを書くまでの敷居の高さがプログラミング学習の挫折の一要因になっているんだと思いました。

以上の理由から、導入してすぐ実際にコードが書くことができ、**AWSひとつで作れる手軽さ**は、初学者にとって最も大事なモチベーション維持に繋がると考えられます。

##2.費用が掛からない(1年間の期限付き)



AWSには無料枠が存在します。その中の一つが「cloud9」です。AWSにサインインアップした日から12ヶ月無料で利用することができます。

また、**Cloud9での環境を作った日からではない**ので無料期間を過ぎてしまわないよう注意が必要です。

AWS無料枠☟
https://aws.amazon.com/jp/free/?all-free-tier.sort-by=item.additionalFields.SortRank&all-free-tier.sort-order=asc

AWSの料金形態について詳しく書かれている記事☟
https://qiita.com/teradonburi/items/a382a17e1e0245b7d831

#AWSを学習できるサイト



・ドットインストール
https://dotinstall.com/lessons/basic_c9_v2

・Paizaラーニング
https://paiza.jp/works/aws/primer

1本3分ほどの動画でのレッスンとなっているため、自分のペースで進めることができると思います。

##まとめ

・プログラミングを習得するためには継続して学習することが重要。

・Cloud9（AWS）を利用するのがお勧め。

なぜ？➡ローカル開発に比べて容易にでき、学びたい言語の学習へとテンポよく進めることができるため。
WSL2 (Ubuntu) を長時間放置すると Input/output error が発生する

## 事象
WSL2 に Ubuntu を入れて運用しているのですが、長時間放置したあとに再びコードの編集をしてから、ファイルを保存するとたまに以下のようなエラーが出ます。
シャットダウンしないでスリープ状態にしてから朝再度触ると高確率で発生します。

```shell

'/mnt/c/Program Files (x86)/Intel/iCLS Client/hg' access: Input/output error
```

## 理由
[ls: cannot access '/mnt/c': Input/output error #4377](https://github.com/microsoft/WSL/issues/4377)
> That error occurs if the hidden `wslhost.exe` process is died/killed. Just use `wsl.exe --shutdown` and restart it.


雑訳: `wslhost.exe` のプロセスが停止、または強制終了された場合に発生することがあるよ。 `wsl.exe --shutdown` したらいいよ。


## 対処
Windows Terminal(preview) とか VSCode とかだとなにもできない状態なので、管理者権限 PowerShell を起動して `wsl.exe --shutdown` します。
その後 VSCode のリモート接続も Windows Terminal なども再起動することで直ります。