OmniAICreator/Qiita-1.07M huggingface dataset:
Ryzen内蔵GPUとArchLinuxで動画をハードウェアエンコードする

# 概要
単にやったらできたよ、というだけ…

# 現状
VAAPIのffmpegでIntelのQSVを使っています。
同じことをM75q-1のRyzen 5 PRO 3400GEでもやりたい!

# 調査
[ArchWikiのハードウェアビデオアクセラレーション](https://wiki.archlinux.jp/index.php/%E3%83%8F%E3%83%BC%E3%83%89%E3%82%A6%E3%82%A7%E3%82%A2%E3%83%93%E3%83%87%E3%82%AA%E3%82%A2%E3%82%AF%E3%82%BB%E3%83%A9%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3)から。
AMD系は、`libva-mesa-driver`を使えば、VAAPIが使えるっぽい書き振り。
Raven RidgeだとHEVCも使えそう。

# インストール

他にも入れたかもですが…

```shell-session
pacman -Syu libva-mesa-driver libva-utils ffmpeg
```

# 実行
```shell-session
$ vainfo
error: can't connect to X server!
vainfo: VA-API version: 1.9 (libva 2.9.1)
vainfo: Driver version: Mesa Gallium driver 20.2.0 for AMD RAVEN (DRM 3.39.0, 5.9.1-zen2-1-zen, LLVM 10.0.1)
vainfo: Supported profile and entrypoints
      VAProfileMPEG2Simple            :	VAEntrypointVLD
      VAProfileMPEG2Main              :	VAEntrypointVLD
      VAProfileVC1Simple              :	VAEntrypointVLD
      VAProfileVC1Main                :	VAEntrypointVLD
      VAProfileVC1Advanced            :	VAEntrypointVLD
      VAProfileH264ConstrainedBaseline:	VAEntrypointVLD
      VAProfileH264ConstrainedBaseline:	VAEntrypointEncSlice
      VAProfileH264Main               :	VAEntrypointVLD
      VAProfileH264Main               :	VAEntrypointEncSlice
      VAProfileH264High               :	VAEntrypointVLD
      VAProfileH264High               :	VAEntrypointEncSlice
      VAProfileHEVCMain               :	VAEntrypointVLD
      VAProfileHEVCMain               :	VAEntrypointEncSlice
      VAProfileHEVCMain10             :	VAEntrypointVLD
      VAProfileJPEGBaseline           :	VAEntrypointVLD
      VAProfileVP9Profile0            :	VAEntrypointVLD
      VAProfileVP9Profile2            :	VAEntrypointVLD
      VAProfileNone                   :	VAEntrypointVideoProc

```

いいかんじ。動きそう。

[このへん](https://trac.ffmpeg.org/wiki/Hardware/VAAPI)を見ながら…

```
ffmpeg -vaapi_device /dev/dri/renderD128 -i hoge -vf "format=nv12|vaapi,hwupload,deinterlace_vaapi=rate=field:auto=1,scale_vaapi=w=640:h=360" -c:v h264_vaapi -qp 28 -acodec copy hoge.mp4
```

エンコードが始まった。
`qp`他、各種パラメーターは適当です。

# おまけ
- [こちら](https://qiita.com/air-gh/items/c60e1bcf0ff449db46db)の`opencl-amd`と共存する模様
- `deinterlace_vaapi`入れると結構遅くなる? (詳細未調査)
- 全然関係ないけど、ffmpegには`-movflags +faststart`というのがあるんですね
TeX記法 数学I

### 概要
数学Iで使用する公式のTex記法を下記に示す。

### TeX記法 数学I

**展開**
`(ax + b)(cx + d) = acx^2 + (ad + bc)x + bd`

```math
(ax + b)(cx + d) = acx^2 + (ad + bc)x + bd
```

**３次式の展開**
`(a + b)^3 = a^3 + 3a^2b + 3ab^2 + b^3`
`(a - b)^3 = a^3 - 3a^2b + 3ab^2 - b^3`

```math
(a + b)^3 = a^3 + 3a^2b + 3ab^2 + b^3 \\
(a - b)^3 = a^3 - 3a^2b + 3ab^2 - b^3
```

**３次式因数分解**
`a^3 + b^3 = (a + b)(a^2 - ab + b^2)`
`a^3 - b^3 = (a - b)(a^2 + ab + b^2)`

```math
a^3 + b^3 = (a + b)(a^2 - ab + b^2) \\
a^3 - b^3 = (a - b)(a^2 + ab + b^2)
```

**有理化**
`\frac{b}{\sqrt{a}} = \frac{b\sqrt{a}}{a}`

```math
\frac{b}{\sqrt{a}} = \frac{b\sqrt{a}}{a}
```

**二重根号**
`\sqrt{a + b \pm 2\sqrt{ab}} = \sqrt{a} \pm \sqrt{b}`

```math
\sqrt{a + b \pm 2\sqrt{ab}} = \sqrt{a} \pm \sqrt{b}
```

**解の公式**
`x = \frac{-b \pm\sqrt{b^2 - 4ac}}{2a}`

```math
x = \frac{-b \pm\sqrt{b^2 - 4ac}}{2a}
```

**判別式**
`ax^2 + bx + c = 0`の判別式`D = b^2 - 4ac`

```math
ax^2 + bx + c = 0 \\
D = b^2 - 4ac \\
D > 0 の時異なる２つの実数解 \\
D = 0 の時重解 \\
D < 0 の時実数解なし
```

**三角比の相互関係**
`\sin^2\theta + \cos^2\theta = 1`
`\tan\theta = \frac{\sin\theta}{\cos\theta}`
`1 + \tan^2\theta = \frac{1}{\cos^2\theta}`

```math
\sin^2\theta + \cos^2\theta = 1 \\
\tan\theta = \frac{\sin\theta}{\cos\theta} \\
1 + \tan^2\theta = \frac{1}{\cos^2\theta}
```

**正弦定理**
`\frac{a}{\sin A} = \frac{b}{\sin B} = \frac{c}{\sin C}  = 2R`

```math
\frac{a}{\sin A} = \frac{b}{\sin B} = \frac{c}{\sin C}  = 2R
```

**余弦定理**
`a^2 = b^2 + c^2 - 2bc\cos A`

```math
a^2 = b^2 + c^2 - 2bc\cos A
```

**三角形の面積**
`S = \frac{1}{2} ab\sin C`

```math
S = \frac{1}{2} ab\sin C
```

**ヘロンの公式**
`S = \sqrt{s(s - a)(s - b)(s - c)}`

```math
S = \sqrt{s(s - a)(s - b)(s - c)}
```

**内接円の半径と面積**
`S = \frac{1}{2}(a + b + c)r`

```math
S = \frac{1}{2}(a + b + c)r
```

**平均値**
`\overline{x} = \frac{x_1 + x_2 + \cdots + x_n}{n}`

```math
\overline{x} = \frac{x_1 + x_2 + \cdots + x_n}{n}
```

**分散**
`s^2 = \frac{1}{n}\{(x_1 - \overline{x})^2 + (x_2 - \overline{x})^2 \cdots + (x_n - \overline{x})^2\}`

```math
s^2 = \frac{1}{n}\{(x_1 - \overline{x})^2 + (x_2 - \overline{x})^2 \cdots + (x_n - \overline{x})^2\}
```

**標準偏差**
`s = \sqrt{{分散}} = \sqrt{\frac{1}{n}\{(x_1 - \overline{x})^2 + (x_2 - \overline{x})^2 \cdots + (x_n - \overline{x})^2}\}`

```math
s = \sqrt{{分散}} = \sqrt{\frac{1}{n}\{(x_1 - \overline{x})^2 + (x_2 - \overline{x})^2 \cdots + (x_n - \overline{x})^2}\}
```

**共分散**
`s_{xy} = \frac{1}{n}\{(x_1 - \overline{x})(y_1 - \overline{y}) + (x_2 - \overline{x})(y_2 - \overline{y}) \cdots + (x_n - \overline{x})(y_n - \overline{y})\}`

```math
s_{xy} = \frac{1}{n}\{(x_1 - \overline{x})(y_1 - \overline{y}) + (x_2 - \overline{x})(y_2 - \overline{y}) \cdots + (x_n - \overline{x})(y_n - \overline{y})\}
```
ControllerとViewの関連性

#ControllerとViewの関連性
##ブラウザに返却されるビューを生成するためのファイルは、app/viewsディレクトリの中に作成する。具体的には、このディレクトリにコントローラー名と同じディレクトリを作成し、その配下にビューファイルを設置する。これにより、コントローラーとビューファイルを関連付けることができ、その関連付けされたビューファイルと「レイアウト」や「部分テンプレート」が組み合わさってブラウザへ表示されるという仕組み
![ccbf8eabf3c997adf4fc0c803b03adee.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/725167/a4190e36-fdc8-48c4-528d-8e5848127b20.png)
##コントローラーで取得した@tweetsは、Ruby on Railsの裏側で定義される複数のメソッドを経て読み替えられ、Action Viewへ渡される。そして再度ビューファイルのインスタンス変数としてセットされ、初めて使用できるという仕組み
![dd01d250aba4f2082707dcdf4082246e.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/725167/92c98ccc-2c2b-c8f3-9fef-e1af09af4175.png)
##「インスタンス変数を定義すればそのままビューファイルで使用できる仕組み」を実現している処理を理解するためには、Ruby on Railsを構築するソースコードを読む必要がある
Docker入門 for Mac(インストール)

#Download
[公式ページ](https://www.docker.com/)にアクセスします
「Get Started」ボタンを押下します
![Docker-top.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522102/730213f8-2e37-c52e-57a0-97b14b1ad7b1.png)
Docker Desktopの「Download for Mac」によりダウンロードします
![Docker-Download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522102/0412babc-9d91-b424-9516-a140e4671536.png)
#インストール
ダウンロードしたDocker.dmgをダブルクリックし、インストールします
アプリケーションに「Docker」が追加されたことを確認します
「Docker」をダブルクリックします
「OK」ボタンを押下すると認証画面が出ますので、パスワードを入力します
![Docker-Password.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522102/678d3ccc-1fa4-26da-4f15-7956af75e04e.png)
これでインストール完了です

チュートリアルへ進む画面が出ます
今回は、そのまま「Start」を押下して進んでも良いのですが、
スルーして画面を閉じます
![Docker-start.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522102/6d53aeba-441b-2929-03c3-afae617bf4d1.png)

#動作確認 & Hello from Docker!
アプリケーションのユーティリティにあるターミナルを起動します
そして、下記のコマンドを実行します

```
docker run hello-world
```
![Docker-hello-world.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522102/7713cdaf-8b0a-1853-5056-ade14b97e792.png)
「Hello from Docker!」と表示されれば、インストールが成功し、動作確認OKとなります
因みに、初回の「docker run コンテナイメージ」実行時には、
コンテナイメージがローカルに存在しないので、
「docker hub」と言うdockerのコンテナイメージを共有し利用できるサイトから
ダウンロードし実行します
※今回は「Hello-workd」のコンテナイメージ

#docker hubに登録する
今後Dockerを利用するのであれば登録します
[docker hub](https://hub.docker.com/)![Docker-register.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522102/7f08c8c8-061c-cacb-32d5-ee43440990d0.png)
登録したらメールがきますので、確認してください

ひとまずここまでで、最低限Dockerを利用できる状態になりました
Dockerについての記事も早めに投稿したいと思います
Laravel:検索機能をつける方法

#【概要】


<b>[1.結論](#1結論)</b>

<b>[2.どのようにコーディングするか](#2どのようにコーディングするか)</b>

<b>[3.開発環境](#3開発環境)</b>





#1.結論

```php
$変数 = モデルクラス :: where(カラム名 , $request->request)->all or find or first();
```
をつける!
<br>

#2.どのようにコーディングするか

```php:app/Http/Controllers/PersonController.php
    public function search (Request $request)
    {
        $item = User::where('name',$request->input)->first(); #---❶
        $param = ['input' => $request->input, 'item' => $item]; #---❷
        return view('user.find', $param); #---❸
    }
```
<br>

❶：Userテーブルで、whereを使用し、nameカラムを指定しています。Requestは、クライアントから送られてくる情報を含んでおり$request->inputでファイル以外のデータを受け取っています。firstは条件に引っかかった最初だけを拾っています。
❷：paramの中にinput, itemを入れて連想配列にしています。
❸：user/findはgetした時にsearchはpostで処理しています。getの際に、paramの情報も入っています。

上記で記載したものをコントローラーに処理させたいので、ルーティングします。

```php:routes/web.php
Route::get('user/find' , 'App\Http\Controllers\PersonController@find' );
Route::post('user/find' , 'App\Http\Controllers\PersonController@search' );

```

＊部分検索についてはしっかり学習してから、また投稿します。

#3.開発環境
PHP 7.4.10
Laravel 8.9
Apache 2.4.41
Mysql 5.6.47
Sequl Pro 1.1.2
<br>
[SQL] データベースを削除する手順

データベースを間違えて作ってしまうこともあるので、忘備録として記録します。
今回はMySQLを使用していきます。

# MySQLに接続
- `-u root`オプションを使っていますが、この「ルート」はMySQLで元々用意されているユーザーです。

```:ターミナル
% mysql -u root
```

こんな感じで表示されればログイン完了です。

```:ターミナル
cd: too many arguments
kusakashiori@mba ~ % mysql -u root
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 300
Server version: 5.6.47 Homebrew

Copyright (c) 2000, 2020, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.
```

# データベースを表示
- データベースの一覧を表示して削除するデータベース名を確認しましょう。

```:ターミナル
mysql> SHOW DATABASES;
```
テーブルが表示されました。
今回はこちらの「test」を削除していきます。

```:ターミナル
+------------------------+
| Database               |
+------------------------+
| 省略                    |
| test　　                |
| 省略                    |
+------------------------+
```
# データベースを削除

```:ターミナル
mysql> DROP DATABASE test;
```

`SHOW DATABASES;`コマンドで確認すると削除されていることがわかります。
[PMMP]Vector3ってなにさ + ちょっとつかってみる[覚書]

# はじめに
この記事はMinecraft BedRock Editionのサーバーソフト、PocketMine-MP(以下pmmp)について記述されたものです。ご了承ください。

また、著者はpmmpについて全くの初学者であり、調べながらちょこちょこ書いた覚え書きのため、すべての情報が正しいとは限りません。あらかじめ把握頂いたうえで読んでいただくことをお勧めいたします(内容の修正があればお気軽にコメント頂けると幸いです)

さらに詳しい説明は[専用のdiscordサーバー](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwiYvNvZoNfsAhWCFIgKHYczCEQQFjAAegQIBxAC&url=https%3A%2F%2Fforum.mcbe.jp%2Fthreads%2F949%2F&usg=AOvVaw3jNYQ8Qoow8kS3q74AoWUc)の質問フォームにて質問すると確実かなと思います🐥

# 前提知識
* Minecraftについての基本的な知識
* pmmpのプラグイン制作についての最低限の知識(読み込むだけのプラグインをつくれればOKです)

# Vector3とは
マインクラフトの`x, y, z`からなる**座標**を表すクラスです。(ソースコードは[ココ]
(https://github.com/pmmp/Math/blob/stable/src/Vector3.php))
このクラスでは、座標を示す3つの変数`$x, $y, $z`の定義と、それに足したり引いたりして加工する関数が用意されてるみたいです。

ただ、例えば「特定のプレイヤーを指定した座標にワープさせる関数」のようなものはない様子。
`/tp` のようなコマンドを実装するためにはどうすればいいのでしょうか？

## Entityをテレポートさせてみる
実際にプレイヤーやEntityをテレポートさせるためのコードを考えてみることにします。

pmmpで実装されている`/tp`コマンドの実装を見てみるとなにかわかるかも。(ソースコードは[ココ](https://github.com/pmmp/PocketMine-MP/blob/stable/src/pocketmine/command/defaults/TeleportCommand.php#L97))

```TeleportCommand.php
// Player $subject;
$subject->teleport($targetPlayer->getLocation());
```
どうやらこの一文がテレポートを実行しているみたい。
`$subject->teleport()`の実装部分も見てみましょう(ソースコードは[ココ](https://github.com/pmmp/PocketMine-MP/blob/340881d590b124969f80aec057d3e26fb123ed53/src/pocketmine/Player.php#L3924))

```Player.php
	public function teleport(Vector3 $pos, float $yaw = null, float $pitch = null) : bool {
		...
}
```
引数にVector3型を用いていますね。
(ちなみにEntity.phpでも同じ実装がなされていることから、他Entityに対しても有効です)

以上のことから、`/tp`のようにエンティティを瞬間移動させるためには、
> Player型 or Entity型の変数(ここでは\$entityとする)を用意
↓
指定したい座標を代入したVector3型の変数(ここでは\$positionとする)を用意
↓
`$entity->teleport($position);`

でオッケーです。

# ちょっとつかってみよう
これをつかっていくつか軽い実装をしてみます。
(コマンド登録や例外処理などの方法はここでは省略しています)

### プレイヤーを指定の座標に飛ばすコマンド
`/warp [player] [x] [y] [z]`で指定座標にテレポートできるような、`/tp`と同じようなコマンドを作ってみます。

#### ライブラリの読み込み
使うライブラリを読み込んでいきます。 [^1]

 ```warp.php
use pocketmine\math\Vector3;
use pocketmine\Player;
```

#### 実装
```warp.php
# テレポート先の座標を定義(Vector3型)
$targetPosition = new Vector3($x, $y, $z);

$player->teleport($targetPosition);
```
これだけです。結構単純。

#### 結果
https://youtu.be/ysOivioXyNw
指定した座標にプレイヤー（この場合は自分）がテレポートされているのが確認できました。




[^1]: 実は、Vector3とPlayerのあるpocketmineディレクトリはそれぞれ違う場所にあるものです。前者は**名前空間(namespace)**というシステムによってpocketmineディレクトリから参照できるようになっていますが、実際には`pmmp\Math\src`にソースコードが置いてあります。(最初はどこに書いてあるかわからず混乱しました)
VSCodeでUniRxが参照エラーになる件について

# 現象
UnityでUniRxを使って開発していたら
突然VSCodeでUniRxのusingでエラーが発生した・・😭
![before.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130234/12ba7265-92db-a89b-77c1-03929f51e5b8.jpeg)


# なぜなのか
結論から言うと
VSCode拡張のバージョンアップが原因らしい。

# 修正手順

サイドメニューから拡張機能を開き、C#を選択。
バージョンを確認するとv1.23.4だった。
![extension_csharp.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130234/1b308112-e59f-a0f5-c546-17a4ccf28d53.jpeg)

このバージョンをv1.23.2まで落とす。
拡張機能のC#の設定アイコンをクリックし、「install Another Version...」を選択。

バージョン選択の窓が表示されるため、「1.23.2」を選択してインストール。
後はVSCodeを再起動する。



**おしまい！！**
![after.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130234/e223fc30-7840-0205-af42-1e11b6cfda1a.jpeg)
networkxにおける条件に合う頂点の削除

#課題
プログラム内で定義したグラフから条件に合う頂点を削除しよう！
###今回の条件
- networkxを利用する
- グラフはプログラム内で定義する
- 辺が一つしかない不安定な状況をなくす


#最初に考えたプログラム
```python
import networkx as nx
import matplotlib.pyplot as plt
G=nx.Graph()
G.add_nodes_from([1,2,3,4,5,6,7,8,9,10])
G.add_edges_from([(1,2),(2,4),(3,2),(4,5),(6,10),(7,6),(8,6),(9,8),(10,8),(1,9),(8,1)])

#n=G.number_of_nodes()
#[次数が0の頂点]もしくは[次数が1の頂点とその頂点に接続する辺]を削除する
for v in G:
    #print(G.degree(v))
    #print("v=",v)
    G_deg=G.degree(v)
    if G_deg==0 or G_deg==1:
        G.remove_node(v)
        #print("G_deg=",G_deg)


#グラフの出力
nx.draw_networkx(G)
plt.show()
```
よしできたと思い実行してみました。
###エラー
```
Traceback (most recent call last):
  File "remove.py", line 10, in <module>
    for v in G:
RuntimeError: dictionary changed size during iteration
```
一筋縄ではいかず。。。
原因を探るためネットで調べてみました。
###原因1
まずエラーの意味は,**「iterate しているオブジェクトを変更することはできない」というエラー**だそうです。
つまり、`for v in G:`でループを回しながらの削除はできないということなのでしょうか。
#改良1
`for v in G`内で削除ができないのなら、条件にあう頂点をリストアップしてから`for v in G`の外で一気に削除してしまおうと考えました。
###改良1のプログラム
```Python
import networkx as nx
import matplotlib.pyplot as plt
G=nx.Graph()
G.add_nodes_from([1,2,3,4,5,6,7,8,9,10])
G.add_edges_from([(1,2),(2,4),(3,2),(4,5),(6,10),(7,6),(8,6),(9,8),(10,8),(1,9),(8,1)])

node_be=G.number_of_nodes() #削除前の頂点数
edge_be=G.number_of_edges() #削除前の辺数

#[次数が0の頂点]もしくは[次数が1の頂点とその頂点に接続する辺]を削除する
G_rem=[]
#条件に合う頂点をリストアップする
for v in G:
    G_deg=G.degree(v)
    #print("G_deg[",v,"]=",G_deg)
    if G_deg<=1:
       #print("v=",v)
       G_rem.append(v)

#条件に合う頂点を削除する
G.remove_nodes_from(G_rem)

node_af=G.number_of_nodes() #削除後の頂点数
edge_af=G.number_of_edges() #削除後の辺数

#グラフの出力
nx.draw_networkx(G)
plt.show()
```
これで実行してみました。
####実行したグラフ
![wronggraph.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642188/df15b152-116c-487b-3286-add7ee5bf944.png)
\\\次数が1の頂点が残っている///
###原因2
`for v in G:`で一回見ただけで`v`はどんどん大きくなって次数が1になってもスルーしてしまっているみたいです。つまり、一回やって終わりではだめで何回も見返さなくてはならないのです！

#改良2
`for v in G:`を何回も繰り返すために2重ループをしてみることにしました。
頂点数分だけ何回も`for`を回してみます。
###改良したプログラム
```Python
import networkx as nx
import matplotlib.pyplot as plt
G=nx.Graph()
G.add_nodes_from([1,2,3,4,5,6,7,8,9,10])
G.add_edges_from([(1,2),(2,4),(3,2),(4,5),(6,10),(7,6),(8,6),(9,8),(10,8),(1,9),(8,1)])

node_be=G.number_of_nodes() #削除前の頂点数
edge_be=G.number_of_edges() #削除前の辺数

#[次数が0の頂点]もしくは[次数が1の頂点とその頂点に接続する辺]を削除する
G_rem=[]
#条件に合う頂点をリストアップする
for i in range(node_be):
    for v in G:
        G_deg=G.degree(v)
        #print("G_deg[",v,"]=",G_deg)
        if G_deg<=1:
            #print("v=",v)
            G_rem.append(v)
    #条件に合う頂点を削除する
    G.remove_nodes_from(G_rem)

node_af=G.number_of_nodes() #削除後の頂点数
edge_af=G.number_of_edges() #削除後の辺数

#グラフの出力
nx.draw_networkx(G)
plt.savefig("output.png")
plt.show()
```
####実行したグラフ
![output.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642188/969aae91-3c72-4cca-1b6b-d34349879805.png)
次数1の頂点はなくなりました！
#最後に
いろいろ段階を踏まなくては簡単に頂点が削除できないことがわかりました。
最後までありがとうございました。
【自分用メモ】Acquia Dev Desktopでdrupalをインストールする際の日本語翻訳ファイルの配置先について

こちらを参考にさせて頂きました。
[Acquia Dev DesktopをWindowsで使ったときによくある ...](https://www.acquia.com/jp/blog/how-to-handle-some-common-problems-when-using-acquia-dev-desktop-on-windows)

#実際の画面
![WS001109.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80258/cfba8315-1c59-90db-ad42-20880713ff4a.jpeg)
上記画面で[Save and continue]のボタンを押すとエラーになります。

![WS001124.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80258/792163e8-97f5-bd06-e169-7f73188b82d9.jpeg)

#翻訳ファイルをダウンロード
Drupal日本語翻訳サイト[Japanese team - Localize Drupal](https://localize.drupal.org/translate/languages/ja)から翻訳ファイルをダウンロードします。

バージョンに合わせてDownloadリンクをクリックします。
![WS001133.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80258/6d91144a-3378-9c9d-3c18-1f8dff45c354.jpeg)

今回は9.1.0-alpha1をダウンロードしました。
![WS001134.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80258/c1d24a39-c19e-0bdc-f0e3-18670dce5f8c.jpeg)

![WS001113.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80258/03ed98f1-f195-9809-455e-bb8e4ee0dafd.jpeg)


#翻訳ファイルの配置先
本題のダウンロードした日本語翻訳ファイルのインストールする場所ですが、まずAcquia Dev Desktopを起動します。

Acquia Dev Desktopが起動したら、Local Codeのリンクをクリックします。
![WS001135.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80258/cebe0374-19c8-be9a-2419-b979a8f0b771.jpeg)

今回は「drupal-cafe-site-9」という名前でサイトを作成していますので、対象のフォルダが開かれます。
![WS001128.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80258/453743b2-d6a2-f159-8662-f1647f6416e4.jpeg)
sitesフォルダを開きます。

drupal-cafe-site-9.ddのショートカットをダブルクリックして対象の場所を開きます。
![WS001129.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80258/05ec3e41-ec9c-ceb4-f1d4-8a9cd30b7796.jpeg)

filesのフォルダを開きます。
![WS001130.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80258/8712ef3f-e58f-4708-d272-945276ca0f40.jpeg)

するとtranslationsフォルダが現れます。この中に翻訳ファイルを格納します。
![WS001131.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80258/3d608435-942d-a637-33c4-de353db61711.jpeg)

#完了
![WS001132.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80258/b3622d71-8e78-feb7-7d34-e721d9ae3de1.jpeg)

ブラウザの戻るボタンから進めると、インストールオプションの選択画面に進めることができます。
![WS001126.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80258/2b162bf8-85ae-0967-63c5-ee8f240d0cd0.jpeg)

#もしこの画面になったら
![WS001127.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80258/97947d7b-923a-19c9-065e-2c46af0b580f.jpeg)
もしこのような画面になった場合は、DBが壊れているらしく、新しくサイトを作り直した方がいいようです。
[こちらのサイト](https://www.drupal.org/forum/support/installing-drupal/2017-07-25/error-during-installing-drupal-835)がヒットしましたが、解決策に挙げられていた「max_execution_time=1800000」をphp.iniに設定しても、私の環境では改善されませんでした。
【超自分用】Laravelのページネーションのまとめ【随時更新予定】

#導入
以下のコマンド導入可能

```
php artisan vendor:publish --tag=laravel-pagination
```

resources/views/vendor/pagination/の中にいろいろテンプレファイルができればおっけー

#実装例

Contoroller側

```xxxContoroller.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Book;

class BookListController extends Controller
{
    public function index()
    {
        $books = Book::join('users', 'books.create_user', '=', 'users.id')
            ->select('books.*', 'users.id', 'users.name')
            ->orderByRaw('books.created_at DESC')
            ->paginate(10);

        return view('bookList', ['books' => $books]);
    }
}

```
いろいろjoinとかしてますが、一旦無視してください。
`>paginate(10);`で1ページに表示する数を設定

view側

```
				@if (count($books) > 0)
				<table class="table table-striped task-table">
					<thead>
						<th>書籍タイトル</th>
						<th>投稿者</th>
						<th>投稿日</th>
					</thead>
					<tbody>
						@foreach ($books as $book)
						<tr>
							<td class="table-text">
								<div>{{ $book->title }}</div>
							</td>
							<td class="table-text">
								<div>{{ $book->name }}</div>
							</td>
							<td class="table-text">
								<div>{{ $book->created_at }}</div>
							</td>
						</tr>
						@endforeach
					</tbody>
				</table>
				{{ $books->links('vendor.pagination.bootstrap-4') }}
				@endif
```

いろいろごちゃごちゃ書いてますが無視してください
`{{ $books->links('vendor.pagination.bootstrap-4') }}`でブートストラップのデザインが適用可能
導入した際のファイルが実際のスタイルを記述している
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541882/2e0eb4e3-42e5-c26f-2e2c-113988e8c5ac.png)

他にもいろんなテンプレがあるので試してみてください
もちろん自分で書き換えることも可能


#まとめ
めっちゃ便利。忘れたくない
【初心者備忘録】Gitコマンドを使用して リモートリポジトリからファイルを削除する 


gitを使用し始めたが何もわからず四苦八苦...
とりあえず学んだことを備忘録としてまとめておく。


##参考サイト
https://www.findxfine.com/programming/995557962.html


##方法
内容としてはそれほど難しいことではなかった。
まず、ローカルのファイルを``rm``にて削除する。

```
git rm [削除したいファイル名]
```

これで、ローカルからファイルが削除されているはず。


次に、削除したという変更内容を``commit``する。

```
git commit -m "delete"
```
　
最後に``push``することでリモート側に変更内容が反映される。

```
git push origin master
```

　
これで、リモート、ローカル共にファイルの削除が完了。
実際にやってみると難しくはないが、理解しないと必要なものまで消してしまう恐れがある。
もっと勉強する必要があると感じた今日この頃である...
JavaScript　スタイルシートの操作

前回の　[ノードを追加・置換・削除](https://qiita.com/TaHiroki/items/540f6296d94248e429b8)
においての、おまけの続き

##スタイルシートの操作
###インラインスタイルにアクセス　styleプロパティ
HTMLのStyle属性にアクセスする方法。最も簡単にできるが、構造と装飾を分離するために、使いどころは考えなければいけない。

```javascript
 elem.style.prop = value
```
elem:要素オブジェクト　prop:スタイルプロパティ　value:設定値
例

```javascript
elem.addEventListener('mouseover',function(){
  this.style.backgroundColor = 'Red';
},false);
```

これは、\<div style="background-color:red;">にしたと言うこと。

※スタイルプロパティはCSSと同じ書き方ではなく、「-」を取り除き、２文字目を大文字にする。（キャメルケース）
background-color　　→　　backgroundColor

主なスタイルプロパティ（多すぎるため少数の例）

| プロパティ| 概要|
|:--|:--|
| border| 枠線全体|
| borderColor| 枠線全体の色|
| backgroundColor| 背景色|
| textAlign| 行揃え|
などなど

###外部スタイルシートを適用する　classNameプロパティ
外部スタイルシートに定義されたスタイルにアクセスするにはclassNameプロパティを使う。

```javascript
 elem.className = clazz
```
elem:要素オブジェクト　clazz:スタイルクラス

例

```css
.highlight {
  background-color: red;
}
```

```javascript
elem.addEventListener('mouseover',function(){
  this.className = 'highlight';
},false);
```
cssで定義された.highlightをJSファイルで読み込んで、スタイルを変更している。

これにて　ー完ー
Windows Docker：WSLファイルでDisk圧迫された件

#はじめに
Widnows10でDockerビルドを何回もやるとDiskは１００％になってしまう現象がありました。

WSLのext4.vhdxファイルは１００GB以上占めていることはわかりました。

#状況
WSLでDisk圧迫
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346425/0bbb1ffe-6f18-572e-582a-a331fbb425a6.png)

問題はWSL 2 based engineだとDisk解放されないようです。

#解消方法
##WSL 2 based engineを外す（Hyper-v backendを使う）
いまのところ、いったん下記のWSLを外して「Apply&Restart」をクリックして再起動

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346425/4550bc37-9974-6144-b321-c3b88d5a35de.png)


##ext4.vhdxを消す
`wsl --shutdown`

`wsl --list --verbose`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346425/063c04f3-887c-d129-4976-c00ba6458e21.png)

削除：

`wsl --unregister docker-desktop-data`

`wsl --unregister docker-desktop`


#Docker DesktopのCleanする機能を使う
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346425/5364de04-ee28-7103-a82c-a03103dc0e06.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346425/59aa44fa-6ee2-7096-b1c8-0956ab7bfd34.png)



以上
AWS ルートユーザARNの扱いがよくわからなかったので整理する

# はじめに
AWSのIAMポリシーをいじっていていたときに、「ルートユーザのARN」が示すものがよくわからなくなってしまったので、整理して残しておきたいと思います。

# 結論
ルートユーザのARNは、使用するポリシーやポリシー内のどこで使用されるかによって扱いが異なります。

#### 通常は・・・
アカウント内のIAMエンティティを示します。IAMユーザ、IAMロールですね。

#### 例外として・・・
AWS Organizationsにて、SCPで利用される場合、アカウントのルートユーザ自体を示します。

# ルートユーザのARN

ルートユーザのARNは以下のように表されます。

```
arn:aws:iam::123456789012:root
```

## ルートユーザのARNの使用例

#### Principalの指定に使用する

例えば、IAMロールにスイッチロールする場合、IAMロールの信頼ポリシーでは、以下のようにスイッチ元のAWSアカウントを"Principal"に指定するかと思います。

```
{
  "Version": "2012-10-17",
  "Statement": [
      {
          "Effect": "Allow",
          "Principal": { "AWS": "arn:aws:iam::123456789012:root" },
          "Action": "sts:AssumeRole"
      }
  ]
}
```

この場合は、アカウントID 123456789012のアカウント内のIAMユーザは、上記信頼ポリシーが設定されたIAMロールにスイッチロールすることができます。
PrincipalにルートユーザのARNが指定されており、ここでARNが示すものは「アカウントID 123456789012のアカウント内のIAMユーザ、ロール」です。

余談ですが、ルートユーザはスイッチロールができません。
[コンソールでのロールの切り替えに関する主要事項](https://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/id_roles_use_switch-role-console.html#id_roles_iam_user-switch-role-console-things-to-know)
> AWS アカウントのルートユーザー としてサインインすると、ロールを切り替えることはできません。IAM ユーザーとしてサインインしているときに、ロールを切り替えることができます。

あと、
ロールからロールへのスイッチは「[ロールの連鎖](https://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/id_roles_terms-and-concepts.html#iam-term-role-chaining)（Role chaining）」と言うそうです。かっこいい。

IAMロールの信頼ポリシーで使用する以外にも、Principalの指定で使用されるケースとしてはS3バケットへのアクセス許可などがあります。
[追加条件付きでの複数のアカウントへのアクセス許可の付与](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/example-bucket-policies.html#example-bucket-policies-use-case-1)

#### AWS Organizations SCPに使用する
Organizationsを利用している場合、SCPを利用することでルートユーザによる操作も制限することができます。
以下の例の場合、SCPとしてポリシーが適用されたアカウントのルートユーザはEC2に関する操作ができなくなります。

```
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "RestrictEC2ForRoot",
      "Effect": "Deny",
      "Action": [
        "ec2:*"
      ],
      "Resource": [
        "*"
      ],
      "Condition": {
        "StringLike": {
          "aws:PrincipalArn": [
            "arn:aws:iam::*:root"
          ]
        }
      }
    }
  ]
}
```

ConditionにてルートユーザのARNが指定されていますが、ここでARNが示すものは「アカウントのルートユーザのみ」です。


このように、ルートユーザのARNは使用されるされるポリシーによって扱いが異なっています。

# なぜ異なるのか（想像）

あくまで想像ですが・・・
AWS Organizationsが登場するまでは、ルートユーザは制限なく何でもできるユーザであり、逆に制限をかけるという発想がなく、IAMエンティティをまとめて表現するためにルートのARNが利用されていたのではないでしょうか。
（Organizationsが登場したとき、僕はまだ社会人1年目でAWSの存在すら知らなかったです...）
ところが、Organizationsの登場によりルートユーザにも制限をかけたいシーンが出てきたために、SCPでは例外的にルートユーザを示すようになっているのではないかと思います。

# まとめ
ルートユーザのARNは使用されるにポリシーによって扱いが異なる、と言うお話でした！

初めてこのような記事を書くので、読みづらい部分が多いかと思いますが、どなたかのお役に立てれば幸いです。
dockerを使って、少しずつ環境構築をしてみた

#はじめに
　新しいアプリケーションを作成するために、まだ使ったことのない技術を使おうと思い、環境構築において、dockerを用いることにした。

###dockerとは
　仮想環境を構築するためのツール。

###dockerを使うメリット
- チーム開発では同じ開発環境を簡単に再現できる。
- コマンドだけで、毎回同じ環境を再現できる。　　などなど


###イメージ
　DockerHubがらコマンドを用いてダウンロードすることで

###コンテナ
　仮想環境そのもの。

###流れ

1. アプリケーションのディレクトリを作成
2. Dockerfileを作成
2. Gemfileを作成
3. Gemfile.lockを作成
4. docker-compose.ymlを作成
5. ターミナルでdockerコマンドを実行
【Python】アヤメの分類器を作ってみた【機械学習】

こちらの講座を参考にしながらアヤメの分類器を作ってみたので備忘録です。
[[初心者必見！Pythonでニューラルネット・深層学習を完全攻略](https://www.udemy.com/course/python-dl/learn/lecture/8769414#overview)]
#環境
Mac OS Catalina 10.15.7
Spyder 4.1.4 
Anaconda 3
Python 3.7.9
Keras 2.3.1 

#やったこと
作成したコードです。

```python:iris.py
from sklearn.datasets import load_iris#アヤメのデータを取得 
iris = load_iris() 
from sklearn.model_selection import train_test_split as split #データセットを分けるツール 
X_train,X_test,y_train,y_test = split(iris.data, iris.target, train_size = 0.8) #データセット のうち80%を学習用、20%を実験用に分ける 
import keras 

#ニューラルネットの作成 
 #Dense:ニューラルネット定義クラス 
 #Activateion:活性化関数クラス 
from keras.layers import Dense, Activation 
model = keras.models.Sequential()#モデルを作る入れ物を作成 
model.add(Dense(units =32,input_dim = 4 )) #中間層32個、入力層4個 
model.add(Activation('relu'))#活性化関数Relu 
model.add(Dense(units = 3))#出力層:3個 
model.add(Activation('softmax'))#活性化関数softmax 

#コンパイル 
model.compile( 
loss = 'sparse_categorical_crossentropy', optimizer = 'sgd', metrics = ['accuracy']) 

#学習の実行 
model.fit(X_train,y_train,epochs = 100)#100回繰り返し学習 

#評価の実行 
 #テストデータの正答率をチェックする 
score = model.evaluate(X_test,y_test,batch_size = 1)#scoreにはloss(損失) ,accuracy(精度)のベクトルが入る 
#参考：https://aidiary.hatenablog.com/category/Keras?page=1478696865 
accuracy = score[1] 
print('精度 ="',str(accuracy))#printで数値と文字列を組み合わせるには、数値をstr()で文 字列にする 
#参考：https://www.javadrive.jp/python/string/index9.html 

 #1個のデータだけチェックする 
import numpy as np 
x = np.array([[5.1,3.5,1.4,0.2]])#X_trainと同じ形式の配列を作成 
r = model.predict(x)#確率のベクトル 
print('ラベルごとの確率=',r) 
print('一番確率の高いラベル=',r.argmax())#argmax()はベクトルの中で一番大きいラベルを返す 

#データを出力する 
json_string = model.to_json() 
#モデルをインポートしたい場合 
#from keras.models import model_fromjson #model = model_from_json/json_string) 
#学習パラメータの保存 
#先にh5pyをインストールしておく 
model.save_weights('param.hdf5') 
#読み込むとき 
#model.load_weight('param.hdf5')  

```

実行結果

```
精度 =" 0.9666666388511658
ラベルごとの確率= [[0.9405338  0.05598015 0.00348606]]
一番確率の高いラベル= 0
```
PaaSとIaaSの違い。

#【PaaSとIaaSの違い。】

PaaSとIaaSの違いをまとめました。

##PaaS

ある物の元であり、土台。
アプリケーションの開発や実行に共通して使う。

主にOS、ハードウェアが基盤
→仮想化ソフト、DB、グループウェアなどのミドルウェア

####・ミドルウェア

コンピュータの基本的な制御を行うオペレーションシステム（OS）
アプリケーションとOSの間に入って、いろんな作業の雑用を行う仲介役。

主なミドルウェアは、DBサーバやWebサーバやアプリケーションサーバがある。


##IaaS

共通基盤、公共基盤。（一般社会のインフラは、水道やガスや電気が挙げられる。）
サーバ（サービスを提供するもの）複数人が共有するもの。
ソフトウェアを稼働させるためのハードウェアや設備。

広い意味で使われる
→ネットワーク基盤や仮想化基盤などシステム上の機器全体で共通する基盤
M5StickCでFreeRTOSをビルド

# FreeRTOSのコード取得〜ビルド
基本的な流れはこれ
https://docs.aws.amazon.com/freertos/latest/userguide/getting_started_espressif.html
cmake, esp-idf(v3), toolchain、USB-UARTドライバ、Boto3などを入れます。手順どおりなので割愛。ESP−IDFv4に対応していないので注意。

freertosのコードは、Masterブランチを取るのではなく、最新のメジャーリリースである202007.00のコードを取得します。Submoduleも必要なので、 `--recurse-submodules` も必須。 cmakeでビルドします。一旦ビルドできることを確認したいので、コードの変更無しでビルドします。


```sh
mkdir amazon-freertos-202007-ble
cd amazon-freertos-202007-ble/
git clone --depth 1 --branch 202007.00 https://github.com/aws/amazon-freertos.git --recurse-submodules
cd amazon-freertos/
cmake -DVENDOR=espressif -DBOARD=esp32_wrover_kit -DCOMPILER=xtensa-esp32 -S . -B your-build-directory
cmake --build your-build-directory/
```

# AWS IoT設定
機種ごとに設定が必要になる項目をまとめて、SetupAWS.pyで設定してくれます。
IoTポリシーや鍵情報も含まれます。軽く試すのには便利です。

```json:configure.json
{
    "afr_source_dir":"../..",
    "thing_name":"m5stickc-test",
    "wifi_ssid":"WirelessNetworkC",
    "wifi_password":"foo",
    "wifi_security":"eWiFiSecurityWPA2"
}
```

上記のように書き換えて、スクリプトを叩きます

```sh

cd tools/aws_config_quick_start/
python SetupAWS.py setup
...
Updated aws_clientcredential.h
Updated aws_clientcredential_keys.h
Completed update operation!

cd ../..

cmake --build your-build-directory/
./vendors/espressif/esp-idf/tools/idf.py flash -B your-build-directory/
```
うまくいけばこれだけで、クラウド側のデバイス設定や証明書の登録も行われます。
実際どういう設定がなされるかは、スクリプトの中身を解読するか、以下のワークショップをやるといいかもです。
https://aws-iot-core-for-beginners.workshop.aws/
【Python】Tensorflow2.0がPython3.8に対応していなかったのでPythonをダウングレードした話

#環境
Mac OS Catalina 10.15.7
Spyder 4.1.4 
Anaconda 3
Python 3.8.3

#やったこと
TerminalでTensorflowをインストールしようとすると、下記のようなエラーが出ました。(2020/10/28現在)

```
(省略）
UnsatisfiableError: The following specifications were found
to be incompatible with the existing python installation in your environment:

Specifications:

  - tensorflow -> python[version='2.7.*|3.7.*|3.6.*|3.5.*']

Your python: python=3.8

If python is on the left-most side of the chain, that's the version you've asked for.
When python appears to the right, that indicates that the thing on the left is somehow
not available for the python version you are constrained to. Note that conda will not
change your python version to a different minor version unless you explicitly specify
that.
（省略）
```
TensorflowのサポートしているPythonのバージョンは3.7までだけど、あなたのは3.8ですよ。と教えてくれています。

というわけでこちらの記事を参考にさせていただきながら、Python3.7の仮想環境を作りました。
[[環境構築 Python](
https://koji.noshita.net/page/compbio/env/envpython/)]

Anaconda NavigaterのEnviromentsにあるCreateボタンを押し、
　Name：python37
　Package:python3.7
で作成完了。
▶︎ボタンを押してTerminalを起動し、condaを更新

```
# condaの更新
conda update --all
conda update -n base conda
```
そしてtensorflowをインストール

```
conda install tensorflow
```
ちなみに、condaとpipを混同するのはあまり素敵じゃないようです。
[[condaとpip：混ぜるな危険](http://onoz000.hatenablog.com/entry/2018/02/11/142347)]

Spyderを起動して下記を入力して実行。無事importできました。

```
import tensorflow
```
pandas.read_excelで読み込んだ24時以降の時間は隣接するセルによってデータ型が変わる？

- 環境
    - macOS Catalina バージョン10.15.7
    - Microsoft Excel for Mac バージョン16.42
    - Python 3.8.5
    - pandas 1.1.3

ふと気がついていろいろ実験してみた。
上下左右(斜め除く)で隣接するセルが
「24時以降がある」場合は`*pandas.Timestamp*`
「24時以降がない」場合は`datetime.datetime`
になる。とも思ったがそうでもないらしい。どういう決まりなんだろう？

- ()の外は表示される値
- ()の中は入力されている値
- 書式は全て[ユーザー定義]の`[h]:mm`

# パターン１

|列|Excel<br/>A|Excel<br/>B|>|読込後の型<br/>A|読込後の型<br/>B|
|:-:|:-:|:-:|:-:|:-:|:-:|
|1|10:00<br/>(10:00:00)|26:00<br/>(1900/1/1 2:00:00)|>|datetime.time|*pandas.Timestamp*|
|2|24:10<br/>(1900/1/1 0:10:00)|26:00<br/>(1900/1/1 2:00:00)|>|*pandas.Timestamp*|*pandas.Timestamp*|
|3|24:40<br/>(1900/1/1 0:40:00)|26:00<br/>(1900/1/1 2:00:00)|>|*pandas.Timestamp*|*pandas.Timestamp*|

# パターン2
|列|Excel<br/>A|Excel<br/>B|>|読込後の型<br/>A|読込後の型<br/>B|
|:-:|:-:|:-:|:-:|:-:|:-:|
|1|10:00<br/>(10:00:00)|26:00<br/>(1900/1/1 2:00:00)|>|datetime.time|*pandas.Timestamp*|
|2|10:00<br/>(10:00:00)|26:00<br/>(1900/1/1 2:00:00)|>|datetime.time|*pandas.Timestamp*|
|3|24:40<br/>(1900/1/1 0:40:00)|26:00<br/>(1900/1/1 2:00:00)|>|*pandas.Timestamp*|*pandas.Timestamp*|

# パターン3
|列|Excel<br/>A|Excel<br/>B|>|読込後の型<br/>A|読込後の型<br/>B|
|:-:|:-:|:-:|:-:|:-:|:-:|
|1|10:00<br/>(10:00:00)|26:00<br/>(1900/1/1 2:00:00)|>|datetime.time|*pandas.Timestamp*|
|2|10:00<br/>(10:00:00)|26:00<br/>(1900/1/1 2:00:00)|>|datetime.time|*pandas.Timestamp*|
|3|10:00<br/>(10:00:00)|26:00<br/>(1900/1/1 2:00:00)|>|datetime.time|*pandas.Timestamp*|

# パターン4
|列|Excel<br/>A|Excel<br/>B|>|読込後の型<br/>A|読込後の型<br/>B|
|:-:|:-:|:-:|:-:|:-:|:-:|
|1|10:00<br/>(10:00:00)|18:00<br/>(18:00:00)|>|datetime.time|datetime.time|
|2|10:00<br/>(10:00:00)|26:00<br/>(1900/1/1 2:00:00)|>|datetime.time|**datetime.datetime**|
|3|10:00<br/>(10:00:00)|26:00<br/>(1900/1/1 2:00:00)|>|datetime.time|**datetime.datetime**|

# パターン5
|列|Excel<br/>A|Excel<br/>B|>|読込後の型<br/>A|読込後の型<br/>B|
|:-:|:-:|:-:|:-:|:-:|:-:|
|1|10:00<br/>(10:00:00)|26:00<br/>(1900/1/1 2:00:00)|>|datetime.time|**datetime.datetime**|
|2|10:00<br/>(10:00:00)|23:00<br/>(23:00:00)|>|datetime.time|datetime.time|
|3|10:00<br/>(10:00:00)|26:00<br/>(1900/1/1 2:00:00)|>|datetime.time|**datetime.datetime**|

# パターン6
|列|Excel<br/>A|Excel<br/>B|>|読込後の型<br/>A|読込後の型<br/>B|
|:-:|:-:|:-:|:-:|:-:|:-:|
|1|10:00<br/>(10:00:00)|18:00<br/>(18:00:00)|>|datetime.time|datetime.time|
|2|10:00<br/>(10:00:00)|26:00<br/>(1900/1/1 2:00:00)|>|datetime.time|**datetime.datetime**|
|3|24:40<br/>(1900/1/1 0:40:00)|26:00<br/>(1900/1/1 2:00:00)|>|*pandas.Timestamp*|*pandas.Timestamp*|

# パターン7
|列|Excel<br/>A|Excel<br/>B|>|読込後の型<br/>A|読込後の型<br/>B|
|:-:|:-:|:-:|:-:|:-:|:-:|
|1|10:00<br/>(10:00:00)|23:00<br/>(23:00:00)|>|datetime.time|datetime.time|
|2|25:00<br/>(1900/1/1 1:00:00)|26:00<br/>(1900/1/1 2:00:00)|>|*pandas.Timestamp*|*pandas.Timestamp*|
|3|26:00<br/>(1900/1/1 2:00:00)|23:00<br/>(23:00:00)|>|**datetime.datetime**|datetime.time|
【Ruby On Rails】FactoryBotを用いてRSpecでモデル単体テストを行うと外部キーが入力されていないことでエラーになる

初投稿
備忘録です。
#エラー背景
RSpecでテストを実行する際に、FactoryBot内に記述すべき外部キーについて未入力であった。

```ruby
FactoryBot.define do
  factory :order_form do
    zipcode       {'123-4567'}
    prefecture_id {1}
    city          {'亜嗚呼市あああ区'}
    address       {'亜嗚呼1-1-1'}
    phone_number  {'09012345678'}
  end
end
```



#エラー内容

```terminal
OrderForm
  商品購入
    商品購入がうまくいく時
      全項目が存在すれば購入できる (FAILED - 1)

Failures:

  1) OrderForm 商品購入 商品購入がうまくいく時 全項目が存在すれば購入できる
     Failure/Error: expect(@order_form).to be_valid
       expected #<OrderForm:0x00007fe44961c1e8 @zipcode="123-4567", @prefecture_id=1, @city="亜嗚呼市あああ区", @address="亜嗚呼1-1-1", @phone_number="09012345678", @validation_context=nil, @errors=#<ActiveModel::Errors:0x00007fe448aeeaa0 @base=#<OrderForm:0x00007fe44961c1e8 ...>, @messages={:user_id=>["can't be blank"], :item_id=>["can't be blank"]}, @details={:user_id=>[{:error=>:blank}], :item_id=>[{:error=>:blank}]}>> to be valid, but got errors: User can't be blank, Item can't be blank
     # ./spec/models/order_form_spec.rb:10:in `block (4 levels) in <top (required)>'

Finished in 0.17606 seconds (files took 1.9 seconds to load)
1 example, 1 failure

Failed examples:

rspec ./spec/models/order_form_spec.rb:9 # OrderForm 商品購入 商品購入がうまくいく時 全項目が存在すれば購入できる

```
注目すべき点はこちらです。

```terminal
@errors=#<ActiveModel::Errors:0x00007fe448aeeaa0 @base=#<OrderForm:0x00007fe44961c1e8 ...>, @messages={:user_id=>["can't be blank"], :item_id=>["can't be blank"]}, @details={:user_id=>[{:error=>:blank}], :item_id=>[{:error=>:blank}]}>> to be valid, but got errors: User can't be blank, Item can't be blank
```

外部キーとしていたuser_id、item_idが空欄になっているということを教えてくれました。

#エラー修正
エラー内容より、FactoryBot内の記述を修正すれば良いことがわかりました。
あとは指示された通りuser_idとitem_idをFactoryBotに追加してあげれば大丈夫です。

```ruby
    user_id { FactoryBot.create(:user).id }
    item_id { FactoryBot.create(:item).id }
```

#修正後のターミナル
```terminal
OrderForm
  商品購入
    商品購入がうまくいく時
      全項目が存在すれば購入できる

Finished in 0.3807 seconds (files took 3.22 seconds to load)
1 example, 0 failures
```
成功です。
複数のgitアカウントの切り替え

一つのPCで業務用、副業用、個人用など使い分けが発生するとき用のメモ。

# globalの確認
メインで使うアカウントはgitの初期設定時にglobalで設定されているはず

``` 
$ cat ~/.gitconfig

[user]
    name = hoge
    email = hoge@example.com

$ git config --global user.name
hoge
$ git config --global user.email
hoge@example.com
```

# globalを修正したいとき

```
$ git config --global user.name "huga"
$ git config --global user.email "huga@example.com"
$ cat ~/.gitconfig

[user]
    name = huga
    email = huga@example.com
```

# 特定のリポジトリでアカウント切り替えが必要なとき

```
$ git config --local user.name
hoge
$ git config --local user.email
hoge@example.com
$ git config --local user.name "huga"
$ git config --local user.email "huga@example.com"
$ git config --local user.name
huga
$ git config --local user.email
huga@example.com
$ cat ./.git/config

[user]
    name = huga
    email = huga@example.com
```

pushする前に`git log`でどのアカウントでcommitされているか確認できる

```
$ git log
Author: huga <huga@example.com>
```

# リポジトリにアクセスする際の手順
実際にリポジトリにアクセスする際にはホストの向き先の設定をしないと以下のようなエラーが発生した

```
ERROR: Repository not found.
fatal: Could not read from remote repository.
Please make sure you have the correct access rights
and the repository exists.
```

configに以下のように追記

``` ~/.ssh/config
Host github.com-hoge
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_hoge_rsa

Host github.com-huga
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_huga_rsa
```

gitリポジトリのoriginのURLを確認する
デフォルトでは`git@github.com:[Account name]/[Repository name].git`の形式になっている

```
$ git remote -v
origin  git@github.com:huga/example-app.git (fetch)
origin  git@github.com:huga/example-app.git (push)
```

gitリポジトリの向き先URLをconfigに追記したホスト名に変更する

```
$ git remote set-url origin git@github.com-huga:huga/example-app.git
```
【React×TS】ジェネリックなコンポーネントの型定義をしようとしたら高カインド型にぶつかった


# ジェネリックなコンポーネントの型注釈

ジェネリックじゃないコンポーネントなら、こんなふうに、const宣言に型を書くだけで、引数と戻り値の型まで推論してくれる。しかもchildrenまで推論してくれているので宣言しなければいけない箇所が減る。

```tsx
const Comp: React.FC<{value: string}> = ({value, children}) => {
    return <div></div>
}
```

しかし、コンポーネントにジェネリクスを付けた途端にそのような宣言は出来なくなる。
型変数`T`を宣言したあとでしか`T`を使うことが出来ないからだ。
引数と戻り値にわざわざ型注釈を付けて、覚えるまではReactの型定義を見て正しい型名を探さないといけない。美しくないし。

```tsx
interface Props<T extends string>{ // Props<"apple" | "banana">というふうに使える
    values: Record<T, string>,     // 例: { apple: "りんご", banana: "バナナ" }
    initial: T
}
const Comp = <T extends string>(prop: PropsWithChildren<Props<T>>): ReactElement => {
    return <div></div>
}

const App = () => <Comp values={{apple: "Apple"}} initial="apple" />
```

# 高カインド型の導入
そこで、活用できるのが**Higher Kinded Type（高カインド型）**である。`React.FC<型>`としていたところを、`GenericFC<カインド>`にすることで、型引数を受け取れるようにできるはずだ。やはりScalaをやっておいてよかった。
[TypeScriptで高カインド型(Higher kinded types)--Qiita](https://qiita.com/kgtkr/items/281b634987220d1d1ed5)
を参考にして実装してみたが…

```ts:generic-fc.d.ts
interface HKT<T> {} // globalで宣言する

export type GenericFC<K extends keyof HKT<any>> = <T>(
     ...args: Parameters<React.FC<HKT<T>[K]>>
) => ReturnType<React.FC<HKT<T>[K]>>;
```
```tsx:comp.tsx
import { GenericFC } from "./generic-fc"

declare module "./generic-fc" {
    interface HKT<T> {
        props: Props<T> // ここで"props"カインドを定義
    }
}

interface Props<T extends string>{
    values: Record<T, string>,
    initial: T
}

const Comp: GenericFC<"props"> = (props) => { //ここでカインドを使っている
    return <div></div>
}

const App = <Comp values={{apple: "Apple"}} initial="apple" />

```

（シンタックスハイライトがおかしくなるので２つに切りました。）
`Record<T, string>`型の`T`はオブジェクトのキーなので`string | number | symbol`型でないとダメで、今回は`T extends string`としているが…
![型エラー](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234029/f72db1ae-38be-1642-299a-b5f8696bae5c.jpeg)
`HKT<T extends string>`としないと、このように型の制約を満たさなくなってしまうが、もしそうしてしまうと、他で定義するすべての同様のジェネリクスに影響してしまう。

どうにかしてこの個別のProp型だけに型制約を付けるかと考えるたすえ、このようにすると成功した。


```ts:generic-fc.d.ts
interface HKT<T> {}

type GenericFC<K extends keyof HKT<any>> = <T>(
    ...args: Parameters<React.FC<HKT<T>[K]>>
) => ReturnType<React.FC<HKT<T>[K]>>;
```
```tsx:comp.tsx
import { GenericFC } from "./generic-fc"

declare module "./generic-fc" {
    interface HKT<T> {
        props: T extends string ? Props<T> : never
    }
}

interface Props<T extends string>{
    values: Record<T, string>,
    initial: T
}

const Comp: GenericFC<"props"> = (props) => {
    return <div></div>
}

const App = <Comp values={{apple: "Apple"}} initial="apple" />

const ShouldFail = Comp<number>({}) //これがちゃんとエラーになる
```

`T extends string ? Props<T> : never`のところは **Conditional Types**になっていて、`T extends string`のときのみ`HKT<T>["prop"]`から`Prop<T>`得られるが、そうでないときには`never`型となり、意図どおりの型エラーが起きてくれる。

めでたしめでたし。
【Rails】[戻る]ボタンを押すとJSのコードが画面に表示されて画面遷移が正常にされない場合の対処法

#### 環境
*rails 6.0.3*

## 説明
`ajax`化した画面を表示後に、別画面へ遷移し、その後ブラウザの`戻る`ボタンで画面を戻ると、
生の`jsコード`が画面に表示される問題について。

ブラウザのキャッシュが残っていることが原因だったので、解決方法をメモとして下記に記載します。

```ruby:該当のcontroller
#---------*** 前略 ***---------

  before_action :set_cache_headers

  #-------*** 中略 ***--------

  private

  def set_cache_headers
    response.headers["Cache-Control"] = "no-store"
  end

#---------*** 後略 ***---------
```

該当の`controller`に上記を追加することで解決しました。
自分の場合、`no-store`のみの指定で解決しましたが、これが正しいのかどうかが確かで無いので誤っていたらコメントをお願いします。

## 参考記事

- http://www.366service.com/jp/qa/62a4c37c103393a604e0e5915c4dc72b
- https://qastack.jp/programming/711418/how-to-prevent-browser-page-caching-in-rails
- https://qiita.com/sausagedog/items/d96f48f34f93f922954c
OSI基本参照モデル

#【OSI基本参照モデル】

プロトコルを改変した際に、どの機能に差し替えればいいか簡単にわかるように階層に分かれている。
第1層から第7層まで全てを組み合わせることで、コンピュータ同士のコミュニケーションが成立。

##上位層

####第７層　アプリケーション層

具体的にどんなサービスを提供するか。

####第６層　プレゼンテーション層

データをどんな形式にするか。

####第５層　セッション層

通信の開始から終了までをどう管理するか。

##下位層

####第４層　トランスポート層

通信の信頼性をどう確保するか。

####第３層　ネットワーク層

ネットワークとネットワークをどう確保するか。

####第２層　データリンク層

同一ネットワーク内でどう通信するか。

####第１層　物理層

物理的にどう繋ぐか。
Ruby / RailsでWEBアプリを作成する -- ⑴要件定義、基本設計、詳細設計

#今回の目的
色々とアウトプットすることにも慣れてきたので、
頭の整理のためにも、QiitaでWebアプリ開発の一から書いていこうかなと思います。
初めて投稿しますので、お手柔らかにお願いします。

今回はRuby on  Rails / Rubyを使用した開発を想定して、説明を進めていきたいと思います。
この記事を通して作成するアプリのイメージは、**ログインありの投稿型アプリ**を想定してます。

それでは、アプリ開発する際に、はじめに行う
「要件定義、基本設計、詳細設計」の説明をしていきたいと思います。


#今回使うツール
draw.io: https://app.diagrams.net/
> 「draw.io」とは、フローチャートやオフィスのレイアウト図、ネットワーク図を作成できる無料の作図ツールです。 
> GoogleChromeのようなブラウザ上で操作ができ、作成した図はGoogleドライブやGithubと連携させて保存が可能です。 
> 顧客向けの資料や、プレゼンテーションに用いる際には図は欠かせない存在です。

参考：*[draw.ioの使い方を解説〜無料の高機能作図ツールを使って資料の質をあげよう！](https://ferret-plus.com/8408#:~:text=%E3%80%8Cdraw.io%E3%80%8D%E3%81%A8%E3%81%AF%E3%80%81%E3%83%95%E3%83%AD%E3%83%BC%E3%83%81%E3%83%A3%E3%83%BC%E3%83%88%E3%82%84%E3%82%AA%E3%83%95%E3%82%A3%E3%82%B9%E3%81%AE,%E6%AC%A0%E3%81%8B%E3%81%9B%E3%81%AA%E3%81%84%E5%AD%98%E5%9C%A8%E3%81%A7%E3%81%99%E3%80%82)* 


#要件定義
要件とは、「こんなものがあったらいいな」という要望を考えることです（ざっくり）。
そこで、「こんなものあったらいいな」を文章でまとめます。
主に、下記の項目を書いてあればいいのかな、と思います。

+ 概要：どんなアプリなのか
+ 背景：どうしてこれを作成しようとしたのか
+ ターゲットユーザ：利用者はどんな層を想定しているのか
+ 用語の定義：例）”vibes”は「いいね」です。
+ 実装機能：下記の画像参照

実際に、こんな感じでまとめます。
![スクリーンショット 2020-10-28 22.14.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664818/ea932b22-b14c-3942-faf9-415270664c5b.png)


#基本設計
基本設計では、要件定義で文章にしたものを図や表などを用いて視覚的にイメージするものです（ざっくり）。
下記のようなものを基本設計では作成していきます。

+ UI Flow：画面遷移をどのようにするか図にする。
+ ワイヤーフレーム：画面ごとの配置（レイアウトやボタンの位置など）はどうするのか図にする。
+ ER図：データベースでそれぞれのデータの詳細や繋がりを図にする。
+ テーブル定義書：それぞれのデータの詳細（カラムの型など）を表にする。

作成するのは、UI　Flowから順にやっていくと、ざっとしたイメージから細かなイメージまで考えることができるので、いいのかなと思います。

先ほどの、「使用するツール」にでてきました、[draw.io](https://app.diagrams.net/)を使用して、UI Flow、ワイヤーフレーム、ER図を作成します。
他にも、基本設計をするためのツールは色々あるので、自分の使いやすいもので設計してください。

下記画像は、draw.ioで新規作成をし、フレームワークで選択した初期画面です。
ここから自分のイメージする画面へカスタマイズしていきます。
日本語設定もできるので、比較的使いやすいとおもいます。

![スクリーンショット 2020-10-28 21.51.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664818/68460852-1bf5-d2d2-e3e2-e979a7fd4920.png)

#詳細設計
詳細設計とは、今まで作成した基本設計を元に、このページのURLは何にするか・・、など表で作成します。
Ruby on Railsを例にするなら、下記のようなことを記載すればいいのかなと思います。

+ パッケージを使用する際はどんなパッケージか（例）Gem:用途 / devise：ログイン機能など）
+ httpメゾット
+ URL
+ controller
+ action
+ その画面の目的

こちらは、Googleのスプレットシートなどを使うといいと思います。

こちらが全て終了しましたら、次に実装に入っていきます。
今後投稿する記事は、下記を想定しています。
1.  Ruby / RailsでWEBアプリを作成する -- ⑵Githubとの接続
2.  Ruby / RailsでWEBアプリを作成する -- ⑶modelとcontrollerの作成①
3.  Ruby / RailsでWEBアプリを作成する -- ⑷viewの作成
4.  Ruby / RailsでWEBアプリを作成する -- ⑸modelとcontrollerの作成②
aws-cli2系で発生した[Errno 2] No such file or directory: 'less': 'less'が意味不明だった


# 環境
CircleCI2
aws-cli 2.0.30

# ハマるまでの経緯
いろいろあってCircleCIのバージョン2を使ってデプロイスクリプトを書かなければならなくなりました。

今まではバージョン2.1で[orbs](https://circleci.com/docs/ja/2.0/orb-intro/)というとっても便利なものを使っていたので、aws-cliのバージョンやaws-cliのコマンドそのものについて意識していませんでした。

で、awsコマンドで以下を実行しようとしたら、

```
aws ecs register-task-definition --family ${ENV_PREFIX}-app --cli-input-json file://app-task.json --region ap-northeast-1

[Errno 2] No such file or directory: 'less': 'less'

Exited with code exit status 255
CircleCI received exit code 255
```

No such file??? 思わずlessでファイル検索してgrepもしましたが何も引っかからず。
lessってあのlessか？と思って、

```
sudo apt-get install less
```
して同じコマンド叩くと、

```
{
タスク定義の中身
}
:
```

え、lessしてるwwwwwwww

いや草はやしとる場合やないやんけ。


# 原因と解決方法

まず解決方法から。
dockerのイメージ指定してるところで環境変数を設定してあげる。

```
docker:
      - image: circleci/python:2.7-jessie
        environment:
          AWS_PAGER: "" // 何も指定しないことが大事
```

原因はaws-cli2系の仕様で、1系の時は実行結果を出力しないのがデフォルトだったのが、**2系になって実行結果が出力されるのがデフォルトになっていた**ため。

ただ、エラー文言が No such file or directory: 'less': 'less'なので、CLI2系に詳しくないと結構ハマるんじゃないかなと思います。 だって本来ならcommand not found出るのが正解じゃない？？？？

orbsに甘えてたら1日はまったよ、という久しぶり投稿でした。

# 参考

公式
[AWS_PAGER](https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/cli-usage-pagination.html)

参考リンク
[AWS CLI v2 の実行結果を less, more で表示したくない場合](https://qiita.com/noid11/items/b3cd8e598cb53432474b)
【ruby on rails】app名を変更する方法

#環境
Ruby 2.7.1
Rails 6.0.3.4
#流れ
1.gemを入れる
2.DBを削除
3.app名を変更
4.DB作成

# 手順
##1.gemを入れる
Gemfileに以下を追記

```
gem 'rename'
```
bundleする

```
$ bundle
```
##2.DBを削除

```
$ rails db:drop
```

##3.app名を変更
```
$ rails g rename:into {{新しいapp名}}
```

作成したapp名のフォルダへ移動

```
$ cd ../{{新しいapp名}}
```
##4.DB作成
DBを作成して

```
$ rails db:create
```
マイグレーションする

```
$ rails db:migrate
```
FRDM-K64Fの修復（bootloader update)

# はじめに

勉強用にFRDM-K64Fを買って触り始めたのですが、あらかじめ搭載されているはずのデモ（以下Web画像）が動きませんでした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679422/bb109f05-a907-f364-bfb3-8b935a329312.png)

開発環境MCUXporesso IDEを用意してHello Worldを試そうとしても、[Arm Mbed Compiler](https://os.mbed.com/ide/)で作ったバイナリを試そうとしても、動きません（何がどうエラーになったのかは忘れてしまいました…）。

調べてみると、FRDM-K64FのようなMbed対応ボードで古いブートローダが搭載されたものをWindows 8やWindows 10に接続すると、ROMのアプリケーション領域が破損して動かなくなるらしい（ROMはROMではない？）。

こちらのページを見つけられなかったらお手上げでした。本稿は、ここに書かれていることを参考にFRDM-K64Fを修復した記録です。
[FRDM-K64Fで困った話](https://yondakana.blogspot.com/2018/05/frdm-k64fopensdav2mbedfw.html)

【今回の環境】

- [FRDM-K64F](https://www.nxp.com/design/development-boards/freedom-development-boards/mcu-boards/freedom-development-platform-for-kinetis-k64-k63-and-k24-mcus:FRDM-K64F)
- Windows 10 → Ubuntu 20

途中までWindowsで進めたのですが上手くいかず、途中からUbuntuに切り替えました。

# bootloader update

問題の内容や対処方法は以下のページ（MbedのBlog）に書かれています。かなり大事な問題のように思うのですが、購入時には教えてくれないものなのですね…
[DAPLink bootloader update](https://os.mbed.com/blog/entry/DAPLink-bootloader-update/)

まずページ中のこのフローチャートに沿って進めていきます。

![image.png](https://os.mbed.com/media/uploads/sam_grove/flowchart_3.png)

ボードのリセットボタンを押しながらPCにUSB接続すると、BOOTLOADERという名前でマウントされました。

![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679422/c807dece-16e3-5fdc-5e92-3847ac02c997.png)

フロチャートを見ると、この場合はStep1から実行してUpdateせよとあります。

Step 1. Download updated DAPLink bootloader image
FRDM-K64F用のDAPLink bootloader imageをダウンロードします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679422/f3e5dc90-6af5-60a4-996c-4950d5213c80.png)

Step2 Disable storage services (only for Windows)
PC側のStorage Service (StorSvc)を停止します。
ところが、停止しても無効化しても、すぐ起動状態に戻ってしまい、その先のステップを進めても上手くいきませんでした。
なので、Windowsでの実施は諦めてStep3からUbuntuで進めました。

Step 3: Update the bootloader
Step1でダウンロードしたBootloader imageを、BOOTLOADERドライブにコピーします。

```
cp 0244_k20dx_bootloader_update_0x5000.bin /media/???/BOOTLOADER && SYNC
```

書込みが終わると再起動されて、MAINTENANCEという名前でマウントされました。

Step 4: Re-enable storage services (only for Windows)
Windows用手順なのでスキップ。

Step 5: Install an interface firmware application
手順に沿って[DAPLink interface firmware](https://os.mbed.com/blog/entry/DAPLink-bootloader-update/)のページからFirmwareをダウンロード。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679422/afb12f6a-ce0c-1591-ca48-2bd323179b11.png)

これをMAINTENANCEドライブにコピーします。

```
cp 0253_k20dx_frdmk64f_0x5000.bin /media/???/MAINTENANCE && SYNC
```

書込みが終わると再起動されて、DAPLINKという名前でマウントされました。
Windows PCに接続してもDAPLINKドライブとして見えるようになりました。

![キャプチャ3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679422/65cf63ab-825d-2291-c4f2-bcee84bfe44f.png)

# テスト
[Arm Mbed Compiler](https://os.mbed.com/ide/)で、`RGP_LED_7_Colors`というサンプルをビルドして動かしてみました（コンパイルしてダウンロードされた`RGB_LED_7_Colors.K64F.bin`をDAPLINKドライブにコピー）。
左上のRGB 3色のLEDが、順番に7色に光ります。

![IMG_20201028_215904.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679422/fe76c446-e126-0784-9da8-d20ec86a392d.jpeg)

これでようやく使えるようになりました。