OmniAICreator/Qiita-1.07M huggingface dataset:
Windows10 HomeでDockerを導入する(WSL2+Docker)

## はじめに
- Windows10 HomeでDockerを導入したのでその手順をまとめます
- Windows10 HomeでWSL2を利用してdocker-composeできるようにすることを目的としています


## 実行環境
- Windows10 Home 64bit
- Build Version: 19587.1000
    - Windows Insider Programにより通常のビルドより新しいものとなっている
- WSL (Windows Subsystem for Linux) ：2
    - LinuxOS：Ubuntu18.04

## WSLを有効にする
1. アプリと機能　＞　プログラムと機能　＞　Windowsの機能の有効化または無効化
2. Windows Sybsystems for Linuxにチェックを入れる
![linux.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394381/a81d8216-7941-7807-07bd-7c33c0a4a015.png)
3. Windowsを再起動

## WSL2を利用するためにWindows Updateを行う
- 結構時間がかかる
- OSビルドのバージョンをあげるにはWindows Insider Programで設定を行う必要がある
    - 設定　＞　更新とセキュリティ　＞　Windows Insider Program
- Microsoftのアカウントが必要だったり色々ある

## Microsoft StoreでUbuntu18.04をインストール
- Microsoft StoreでUbuntuと検索すると、複数のUbuntuが表示されるので、Ubuntu18.04 TLSを選択してインストール
- インストール完了後はUbuntu側でユーザ名とパスワードの登録をする

## インストールしたLinux OSを確認する
```
wsl -l -v
```

- VERSIONが1になっていることを確認する

## WSL2へ切り替え
```
wsl --set-version Ubuntu-18.04 2
```

- 数分かかる
- セットアップ後に再起動

## Ubuntu18.04のターミナルを開く
- WSL用にWindowsのディレクトリが自動的にマウントされる
- 例：`/mnt/c/Users/ユーザー名/`

## aptパッケージの更新
```
sudo apt update
sudo apt upgrade -y
```

## 依存パッケージのインストール
```
sudo apt install -y apt-transport-https ca-certificates gnupg-agent software-properties-common curl
```


## GPG keyの追加
```
sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
```


## 安定版repositoryを追加
```
sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
```


## もう一度aptパッケージ更新
```
sudo apt update
```


## Docker CEをインストール
```
sudo sudo apt install docker-ce docker-ce-cli containerd.io docker-compose -y
```


## docker-compose インストール
``` 
sudo curl -L https://github.com/docker/compose/releases/download/1.24.1/docker-compose-`uname -s` - `uname -m` -o /usr/bin/docker-compose
```

## Docker起動
```
sudo service docker start
```


## 権限の取得
```
sudo cgroupfs-mount
sudo usermod -aG docker $USER
sudo service docker start
sudo gpasswd -a $USER docker
```
フリーランス エンジニア

私はこれから、フリーランスエンジニアがとして、力を振るっていくことになりました。

そのための準備として、まず、「フリーエンジニアで成功するためにやるべき54のこと」という本を買いました。

フリーランスとして生きていくための本は、世に数あれど、エンジニアに絞って書いてある本書は、とても貴重だと思います。

この本の中には、「スキルアップ以外の大切なこと」が書いてあります。もちろん、エンジニアとしてのスキルアップも重要です。

この本を通じて私は、『セルフ ブランディング』の重要性を認識しました。
その人の、人となりが分かっている状態と、そうでない状態では、歴然の差が生まれるのは当然だと思います。

そのことに気付かせてくれた、とても大切な本です。

https://www.amazon.co.jp/%E3%83%95%E3%83%AA%E3%83%BC%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A7%E6%88%90%E5%8A%9F%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AB%E3%82%84%E3%82%8B%E3%81%B9%E3%81%8D54%E3%81%AE%E3%81%93%E3%81%A8-%E6%96%8E%E8%97%A4-%E5%92%8C%E6%98%8E/dp/4798059455/ref=asc_df_4798059455/?tag=jpgo-22&linkCode=df0&hvadid=426152749640&hvpos=&hvnetw=g&hvrand=1212678510335662120&hvpone=&hvptwo=&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=1009332&hvtargid=pla-889719388027&psc=1&th=1&psc=1

![516CgRnnd+L._SX336_BO1,204,203,200_.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2173896/304b95b2-1a92-24f8-36d1-852a8e5383f8.jpeg)
Javascriptのコールバック関数について

Javascriptのコールバック関数に関して、アウトプットのため本記事を投稿します。

Javascriptにおけるコールバック関数とは「将来のある時点で実行される関数」のことを指します。

### 簡易的な例

下記に例を記載します。

```js
function a(callback) {
  callback();
}

function b() {
  console.log("コールバック関数として呼び出されました");
}

a(b);

//実行結果 
コールバック関数として呼び出されました
```

処理の流れを記載します。
①　aという関数を宣言します。(仮引数の名称は何でも大丈夫です)
②　bという関数を宣言します。
③　②で宣言したbという関数を実引数として、①で宣言したaという関数を呼び出します。
④　aの処理が実行され、bという関数が実行されます。
⑤　bの処理が実行され、文字列が出力されます。

関数aの仮引数には、実引数である関数bが入るので、callback() と b()は同じ命令に変換されます。
このように、コールバック関数では、引数に関数を渡して任意のタイミングで呼び出すことができます。

### 複雑な例
次に、前章のコードよりも複雑になったコールバック関数を解説します。

```js
function a(callbackB) {
  console.log("関数aが呼び出されました");
  callbackB();
}

function b(callbackC) {
  console.log("コールバック関数bが呼び出されました");
  callbackC();
}
function c(callback) {
  console.log("コールバック関数cが呼び出されました");
  callback();
}

a(function() {
  b(function() {
    c(function() {
      console.log("全ての処理が終了しました");
    });  
  });
});

// 実行結果
関数aが呼び出されました
コールバック関数bが呼び出されました
コールバック関数cが呼び出されました
全ての処理が終了しました
```
処理の流れを記載します。
①　関数a,b,cを宣言します。
②　関数aを実行します。
③　関数aの仮引数「callbackB」に関数aの呼び出し元の実引数が渡されます。
関数aの呼び出し元の実引数は下記コードです。

```js
function() {
  b(function() {
    c(function() {
      console.log("全ての処理が終了しました");
    });  
  });
})
```

関数bの実引数があるため分かりづらくなっていますが、関数bの呼び出し元の実引数は使用しないので、実質的な仮引数は下記のように、関数bを呼び出す無名関数になります。

```js
function() {
  b();
})
```

④　「console.log("関数aが呼び出されました")」が実行されます。
⑤　③で渡された引数(callbackB)を実行します。
　　先ほど説明した通り、実引数は無名関数であるため、関数bを実行する処理になります。
⑥　関数bの仮引数「callbackC」に、関数bの実引数(関数cを呼び出す無名関数)が渡されます。
⑦　関数bが実行され、「console.log("コールバック関数bが呼び出されました")」が実行されます。
⑧　⑥で渡された引数(callbackC)を実行します。
⑨　関数cの仮引数「callback」に、関数bの実引数(無名関数)が渡されます。　
実引数(無名関数)は以下です。

```js
function() {
      console.log("全ての処理が終了しました")
}
```

⑩　関数cが実行され、「console.log("コールバック関数cが呼び出されました")」が実行されます。
⑪　⑨で渡された引数を実行します。
⑫　「console.log("全ての処理が終了しました")」が実行されます。

上記の様に、関数a,b,cを順番に実行することができます。
また、関数の呼び出し元は下記の様にアロー関数でも実行することができます。

```js
a(() =>{
  b(() =>{
    c(() =>{
      console.log("全ての処理が終了しました");
    });  
  });
});
```

アロー関数の方が、記述がシンプルになり可読性が上がります。

### setTimeoutメソッドを使用した例
setTimeoutメソッドを使用した際のコールバック関数の処理に関して記述します

```js
function a(callback) {
  setTimeout(callback, 3000);
};

function b() {
  console.log("コールバック関数として呼び出されました");
};

a(b);
console.log("関数呼び出し後");

// 実行結果
関数呼び出し後
コールバック関数として呼び出されました
```

setTimeoutは[ノンブロッキングメソッド][ブロ]であるため、関数bが呼び出されるより先に、「console.log("関数呼び出し後")」が実行されます。

[ブロ]:https://qiita.com/shintaro_secual/items/7f5bec8febd271b4045d

コールバック関数はあくまでも関数を順番に実行しするために使用するため、ブロッキングをして同期処理を実現いるわけではないことが分かります。
【Unity】索敵範囲外を暗くする表現の実装

自作ゲームに索敵要素を取り入れてキャラクターの視界外を暗くしたい、そんなときの実装の一例を書いてみます。
![stage01.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/905530/360c0f32-cd4f-029f-19ab-a3219dec03e5.gif)


環境
---
Unity 2020.3.20f1
Universal RP 10.6.0


手法
---
影を描画する手法のひとつであるステンシルシャドウボリュームを応用してみます。

ステンシルシャドウボリュームとは、影を落とすオブジェクトをライト方向から見たときの輪郭となる頂点を引き延ばし、その引き延ばされてできた領域内を影として描画する手法です。
ステンシルバッファを利用するためこの名前がついています。
<img width="300" alt="ShadowVolume.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/905530/1115b5b9-c782-9c03-401b-b027b66da582.png">
[こちらのサイト](https://news.mynavi.jp/article/graphics-22/)に概念がわかりやすくまとめられています。

トゥーン調のキャラクターの顔に落ちる髪の影を（ライトによってできる影だと形を制御しにくいため）ステンシルシャドウボリュームの応用で理想的な形に出す、というような使われ方もします。


実装
---
実装といってもコードはほぼ書かずに実現できます。

純粋なステンシルシャドウボリュームではなく任意の範囲を影にしたいため、その範囲を覆うメッシュをまず用意します。
わかりやすいようCubeのメッシュで見ていきます。
CubeオブジェクトのLayerは新しく追加したものに変更します。ここでは追加Layer名をCoverとしています。
<img width="500" alt="cube1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/905530/474af478-9ec1-7aa4-0e76-8f742eb64020.png">

影を描画するべきCubeの内側の範囲は、表面と裏面の差分で求まります。
<img width="500" alt="Animation_.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/905530/d217cd3c-83f5-227b-321a-046e02457330.gif">
差分を描画するために、ForwardRendererDataファイル（デフォルト名はUniversalRenderPipelineAsset_Renderer.asset）をインスペクタから編集します。

1. Coverオブジェクトは通常描画しないので、FilteringプルダウンのCoverのチェックをはずす
2. Coverオブジェクトの裏面部分のステンシル値を+1するRendererFeatureを追加
3. Coverオブジェクトの表面部分のステンシル値を-1するRendererFeatureを追加
4. ステンシル値が0未満の部分を描画するRendererFeatureを追加

追加した各RendererFeatureの設定は以下のようになります。
![renderer_feature.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/905530/018ce841-8da3-c8aa-8f8c-bb8d2489106a.png)

裏面/表面の指定は RendererFeatureでオーバーライドするマテリアルのシェーダでやっています。
裏面のみを通すシェーダコードは以下です。表面のみを通すには"Cull Front"を"Cull Back"と書き換えるだけです。

```hlsl:CullFront.shader
Shader "Custom/CullFront"
{
    SubShader
    {
        Tags { "RenderType" = "Opaque" }

        Pass
        {
            ZWrite Off
            Cull Front
            Blend Zero One
        }
    }
}
```

3つめのRendererFeatureでステンシルが負の値の部分を描画して完成です。
<img width="500" alt="cube3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/905530/0c3f2f41-fc96-92d8-4409-eb55e3ce849d.png">
もちろん表現はオーバーライドするマテリアルのシェーダ次第でなんとでも。
<img width="500" alt="cube4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/905530/2099ce54-6a53-609f-0a24-c8156626e35f.png">


メッシュ生成
---
<img width="500" alt="mesh.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/905530/04d824a4-7228-eee3-11a8-b55c3c87b67f.png">
動的にメッシュ生成する場合、UnityのMeshクラスには三角形化した配列で渡します。
”三角形分割 耳刈り取り法” とかで調べると実装法がいろいろ出てきます:ear_tone2:
![Animation_2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/905530/2354a8e6-3f73-90e3-17c8-ed5d00d7c9c8.gif)

---
ちなみに、ディファードレンダリングであればワールド座標を格納したGBufferと暗くしたい範囲を書き出したテクスチャを使って.. というアプローチもでき、複雑なメッシュを生成するより楽かもしれません。
UnivarsalRPはいまのところ（ver 10.6.0）ディファード非対応なので、やるならレンダーパイプラインに手を加えたりが必要です。
4.5 (標準) 二次元確率変数の変数変換1 正規分布の和 (畳み込み，積率母関数)

## 方針

```math
X\sim\mathcal{N}(\mu_1,\sigma_1^2),\ Y\sim\mathcal{N}(\mu_2,\sigma_2^2),\ X,Y:iid
```

である時，これらの確率変数の和の分布を代表的な2種類の方法で解く．和の分布が有名分布に従う場合は，答案から分かる通り積率母関数から求めるほうが楽である．

## 答案

まずは畳み込みによって求める．

```math
\begin{cases}
Z=X+Y\\
W=Y
\end{cases}\Leftrightarrow
\begin{cases}
X=Z-W\\
Y=W
\end{cases}
```

なる一対一変換を考える．

```math
\left|\frac{\partial(X,Y)}{\partial(Z,W)}\right|=\left|\begin{pmatrix}1 & 0\\ -1 & 1\end{pmatrix}\right|=1
```

より，

```math
\begin{align}
f_{Z,W}(z,w)&= f_{X,Y}(z-w,z)\times 1\\
&= \frac{1}{\sqrt{2\pi\sigma_1^2}}\exp\{-\frac{(z-w-\mu_1)^2}{2\sigma_1^2}\}\frac{1}{\sqrt{2\pi\sigma_2^2}}\exp\{-\frac{(w-\mu_1)^2}{2\sigma_2^2}\}\\
&= \frac{1}{2\pi\sigma_1\sigma_2}\exp\left[-\frac{1}{2}\{\frac{(z-w-\mu_1)^2}{\sigma_1^2}+\frac{(w-\mu_2)^2}{\sigma_2^2}\}\right]\tag{1}
\end{align}
```

ゆえ，

```math
f_Z(z)=\int f_{Z,W}(z,w)dw\tag{2}
```

を解けば良い．

(2)式の指数部分の中身をwで平方完成して，

```math
\begin{align}
\frac{(z-w-\mu_1)^2}{\sigma_1^2}+\frac{(w-\mu_2)^2}{\sigma_2^2}\}
&= \frac{w^2+2(\mu_1-z)w+(z-\mu_1)^2}{\sigma_1^2}+\frac{w^2-2\mu_2w+\mu_2^2}{\sigma_2^2}\\
&= (\frac{1}{\sigma_1^2}+\frac{1}{\sigma_2^2})w^2+2(\frac{\mu_1-z}{\sigma_1^2}-\frac{\mu_2}{\sigma_2^2})w+\frac{(z-\mu_1)^2}{\sigma_1^2}+\frac{\mu_2^2}{\sigma_2^2}\\
&= \frac{\sigma_1^2+\sigma_2^2}{\sigma_1^2\sigma_2^2}w^2+2\frac{\sigma_2^2(\mu_1-z)-\sigma_1^2\mu_2}{\sigma_1^2\sigma_2^2}w+\frac{(z-\mu_1)^2}{\sigma_1^2}+\frac{\mu_2^2}{\sigma_2^2}\\
&= \frac{\sigma_1^2+\sigma_2^2}{\sigma_1^2\sigma_2^2}\{w^2+2\frac{\sigma_2^2(\mu_1-z)-\sigma_1^2\mu_2}{\sigma_1^2+\sigma_2^2}w\}+\frac{(z-\mu_1)^2}{\sigma_1^2}+\frac{\mu_2^2}{\sigma_2^2}\\
&= \frac{\sigma_1^2+\sigma_2^2}{\sigma_1^2\sigma_2^2}\left(w+\frac{\sigma_2^2(\mu_1-z)-\sigma_1^2\mu_2}{\sigma_1^2+\sigma_2^2}\right)^2+\frac{(z-\mu_1-\mu_2)^2}{\sigma_1^2+\sigma_2^2}
\end{align}
```

なので，

```math
\begin{align}
f_{Z,W}(z,w)&\propto \exp\{-\frac{\sigma_1^2+\sigma_2^2}{2\sigma_1^2\sigma_2^2}(w-\frac{\sigma_2^2(z-\mu_1)+\sigma_1^2\mu_2}{\sigma_1^2+\sigma_2^2})\}\\
&\ \ \ \ \times\exp\{-\frac{(z-\mu_1-\mu_2)^2}{2(\sigma_1^2+\sigma_2^2)}\}
\end{align}
```

以上より，

```math
(1)\propto\exp\{-\frac{(z-\mu_1-\mu_2)^2}{2(\sigma_1^2+\sigma_2^2)}\}
```

なので，

```math
Z=X+Y\sim\mathcal{N}(\mu_1+\mu_2,\sigma_1^2+\sigma_2^2)
```

次に，積率母関数によって求める．

```math
\begin{align}
M_{X+Y}(t)&= m_X(t)M_Y(t)\\
&= \exp(\mu_1t+\frac{\sigma_1^2t^2}{2})\exp(\mu_2t+\frac{\sigma_2^2t^2}{2})\\
&= \exp\{(\mu_1+\mu_2)t+\frac{\sigma_1^2+\sigma_2^2)t^2}{2}\}\\
\therefore X+Y&\sim \mathcal{N}(\mu_1+\mu_2,\sigma_1^2+\sigma_2^2)
\end{align}
```

## 参考文献

- 『[現代数理統計学の基礎](https://www.kyoritsu-pub.co.jp/bookdetail/9784320111660)』(久保川達也　著)
C++用語の定義：テンプレート関数と関数テンプレートの違い

C++について調べると、同じような概念に対して微妙に用語が異なったりする事がある。
今日出くわしたのは関数テンプレートとテンプレート関数だ。

夜ねれなくなるのでちゃんと調べてまとめましたよ。

### さっそくまとめ

* 関数テンプレート：関数を生成するテンプレート
* テンプレート関数：関数テンプレートからインスタンス化された（生成された）関数

ただし、区別する必要がなければ関数テンプレートと呼ぼう。
テンプレート関数という用語は曖昧なので使用せず、関数テンプレートインスタンスと呼ぼう。

### くわしく


ビャーネ・ストロヴストルップ氏の鈍器書（プログラミング言語C++）には、こう書かれている。

> 用語としてのクラステンプレート(class template)とテンプレートクラス(template class)のセマンティクスを区別する人もいるが、私は区別しない。区別するには微妙すぎるからだ。したがって2つの用語は交換可能と考えることにしよう。同様に、関数テンプレートとテンプレートクラスも交換可能と考えることにしよう。

つまり**どっちもほとんど同じと考えて良い**ということだね。
ビャーネくんさんがいうなら間違いないであろう。

**ただし、違いは理解しておく必要がある。**

[すたふろ](https://stackoverflow.com/questions/1117755/what-is-the-difference-between-function-template-and-template-function)にはこう書いてある。

> 関数テンプレートはテンプレートだ。テンプレート関数は時々同じ意味に使用され、たまに「インスタンス化された関数」を意味している。この曖昧さに対して、前者対しては関数テンプレート、後者に対しては、関数テンプレートインスタンス、もしくは関数テンプレートのインスタンスと呼ぶのが良いだろう。気をつけないといけないのは、関数テンプレートは関数ではないということだ。また、同じことがクラステンプレートとテンプレートクラスに対しても言うことができる。

明快ですありがとう。

日本語としてもあとに来る語が主と考えられるので、そのままの説明。
キツネザルは猿だし、イタチキツネザルも猿だ。

ただ単に、`テンプレート`か`関数`かの違いとなる。

そして、特に理由がない限り**関数テンプレートでOK**ということがわかった。
また、**テンプレート関数という用語は曖昧なので使用しないほうが良い**ということもわかった。

あらためて自分が見てきたサイトを見直すと、
明確に使い分けているところは見たところ無く、関数テンプレートと同じ意味でテンプレート関数と読んでいるサイトがいくつかある。
中には有名なサイトもある。
正しく使い分けているのであればいいのだが、そうでない場合があり私のような初心者は本当に困惑する。
`テンプレート関数`に出くわしたらそのサイトは読み手のことはあまり考えていないかもしれない。

こういう問題が他にもあった気がするが忘れた。すぐにメモるべしだよね。

---
【SwiftUI】インジケーター

##ソースコード
Viewのレイアウトは[参考文献](https://qiita.com/u5_03/items/6dd54c4e7f89c68886fb)より引用。

```swift
import SwiftUI

// trueならばViewを表示、falseならばEmptyView()
extension View {
    @ViewBuilder func isHidden(_ hidden: Bool) -> some View {
        if hidden {
            EmptyView()
        } else {
            self
        }
    }
}

struct LoadingIndicatorView: View {
    let isLoading: Bool
    @State private var isAnimating = false
    private let animation = Animation.linear(duration: 1).repeatForever(autoreverses: false)
    
    init(_ isLoading:Bool){
        self.isLoading = isLoading
    }
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                // ①Loading中に画面をタップできないようにするためのほぼ透明なLayer
                Color(.black)
                    .opacity(0.01)
                    .frame(width: geometry.size.width, height: geometry.size.height)
                    .edgesIgnoringSafeArea(.all)
                    .disabled(self.isLoading)
                Circle()
                    .trim(from: 0, to: 0.6)
                    .stroke(AngularGradient(gradient: Gradient(colors: [.gray, .white]), center: .center),
                            style: StrokeStyle(
                                lineWidth: 8,
                                lineCap: .round,
                                dash: [0.1, 16],
                                dashPhase: 8))
                    .frame(width: 48, height: 48)
                    .rotationEffect(.degrees(self.isAnimating ? 360 : 0))
                    .onAppear() {
                        withAnimation(Animation.linear(duration: 1).repeatForever(autoreverses: false)) {
                            self.isAnimating = true
                        }
                    }
                    .onDisappear() {
                        self.isAnimating = false
                    }
            }
            .isHidden(!self.isLoading)
        }
    }
}

struct LoadingIndicatorView_Previews: PreviewProvider {
    static var previews: some View {
        LoadingIndicatorView(true)
    }
}
```

##補足
View表示の切り替えは`extension`で拡張したViewプロパティを使用。(標準Viewプロパティ`.hidden()`は引数を持たないため表示・非表示の切り替えが煩わしい)
最適化を考慮し、`self.hidden()`の代わりに`EmptyView()`を返している。

## 参考文献

この記事は以下の情報を参考にして執筆しました。

- [SwfitUIで通信中にIndicatorを表示できるようにする。](https://qiita.com/u5_03/items/6dd54c4e7f89c68886fb)
macOSでopenFrameworksのPGのtemplateをカスタムしたいときのTIPS

Xcodeの xcodeproj 内の proj.pbxproj がXML形式のplistからjson風のplistに変わって随分経ちますが未だにmacOSのProjectGeneratorはXMLとしてテンプレートを見て修正加えてますよね.

なので最近のXcodeで修正した scripts/templates/osx にオレオレテンプレートを入れるとPGが動かなくなっちゃったりしますね. 悲しい.

まあ, json風とは言っても全然jsonじゃないのでこれ自前でパースするのは辛いよねという話で.

で, そういうことなので https://qiita.com/2bbb/items/37154e0aee4b3d76b83b この記事とかでも手動でXMLを修正するように書いてたのだけど, 最近解決策が分かったのでご報告.

```bash
plutil -convert xml1 GreatProject.xcodeproj/project.pbxproj
```

というコマンドで昔ながらの温かみのあるpbxprojに変換してくれて頑固な職人肌のPGも納得してくれます. まあ素敵. マーヴェラス.
FastAPI で作成した Web API にて、リクエストボディのデータを DataFrame に直接入れる

# はじめに

機械学習で作成したモデルを実用化するには、システムが必要になる。もっともシンプルなシステム実装としては、学習済みモデルが API リクエストに対して推論結果をレスポンスで返す簡単な Web API が考えられる。具体的には、推論対象の CSV データをもたせた POST リクエストに対して推論結果を返すような Web API を想定している。機械学習モデルは大半が Python で構築されているため、API も Python ベースで作成することが望ましいと考え、FastAPI を用いた Web API を段階を踏んで作成していく。
まずはじめに[シンプルな Web API を FastAPI で作成](https://qiita.com/honda28/items/4c6a4b7235ce43c7131e)では、FastAPI に触れ簡単な Web API を作成した。続いて、推論器へのデータ入力部分を構築していく。推論時には DataFrame 形式でデータを扱いたいが、学習時のように保存されている CSV データを読み込む方法を想定すると、入力データを一度保存する必要が出てくるため、ストリームデータに対して準リアルタイムに推論を行うには時間がかかり効率が悪い。私が最終的に作成したい Web API は、ストリームデータに対して準リアルタイムに推論をするようなものを見据えているため、本記事では、POST リクエストで取得したデータを保存することなく直接 DataFrame に入れることを試みた。[Request Files - FastAPI](https://fastapi.tiangolo.com/tutorial/request-files/) を参考にした。

実行環境は以下。

- Python 3.7.12
- fastapi 0.70.0

# ファイルを受け取る Web API の作成

[Request Files - FastAPI](https://fastapi.tiangolo.com/tutorial/request-files/) を参考に、ファイルを受け取るところまでを作成して確認する。
まず `pip install python-multipart` でファイルを受け取るために必要なパッケージをインストールし、参考記事のコード例（以下掲載）を作成し、`$ uvicorn main:app --reload` で実行する。

```python:main.py
from fastapi import FastAPI, File, UploadFile

app = FastAPI()

@app.post("/files/")
async def create_file(file: bytes = File(...)):
    return {"file_size": len(file)}

@app.post("/uploadfile/")
async def create_upload_file(file: UploadFile = File(...)):
    return {"filename": file.filename}
```

ここでは、受け取ったファイルに対してそれぞれ bytes, UploadFile の2つの型が使われている。参考記事には、UploadFile が bytes に対して以下のような優位性があるとのこと。（詳細は参考記事を参照されたい。）

- 容量の大きなファイルに適している
- 非同期インターフェイスを持っている

推論対象のデータは容量が大きいことが想定されるため、UploadFile という型を用いるのが適切だと考える。

# 受け取ったデータを直接 DataFrame に入力する Web API を作成

ファイルの受け取りまでは上記で確認できたため、続いてそのファイルデータの処理を検討する。以下では、受け取ったファイルを DataFrame で読み込んでサイズを返すような API を作成している。

```python:main.py
from fastapi import FastAPI, File, UploadFile
from io import StringIO

app = FastAPI()

@app.post("/uploadfile/read")
async def dataframe_file(file: UploadFile = File(...)):
    _csvdata = StringIO(str(file.file.read(), 'utf-8'))
    csvdata = pd.read_csv(_csvdata)
    return {"DataFrame": csvdata.shape}
```

[pandas.read_csv ドキュメント](https://pandas.pydata.org/pandas-docs/stable/reference/api/pandas.read_csv.html)によると、`pd.read_csv()` は file-like object も読み込むことができることがわかる。

> **filepath_or_buffer : str, path object or file-like object**
Any valid string path is acceptable. The string could be a URL. Valid URL schemes include http, ftp, s3, gs, and file. For file URLs, a host is expected. A local file could be: file://localhost/path/to/table.csv.

> If you want to pass in a path object, pandas accepts any os.PathLike.

> By file-like object, we refer to objects with a read() method, such as a file handle (e.g. via builtin open function) or StringIO.

また [Request Files - FastAPI](https://fastapi.tiangolo.com/tutorial/request-files/) によると、UploadFile オブジェクトには file-like な `file` アトリビュートがあるので、これに対して `_csvdata = StringIO(str(file.file.read(), 'utf-8'))` のように処理することで、`pd.read_csv()` で読み込むことができるようになる。

# おわりに

POST リクエストで入力された CSV データをファイルとして保存することなく、DataFrame に直接入力し扱うことができる Web API を作成した。今後、実際に入力したデータで準リアルタイムに推論を行い、結果を返すような Web API の作成を試していきたい。
[PHP]指定月の月末日を取得

パラメーターで受け取った値（年と月）を元に、その年月の月末日を取得する。

```php
#受け取ったパラメーター
$p_y=2021;
$p_m=9

#後のdate関数で'Y-m-t'フォーマット指定のため
$p_m=str_pad($p_m,2,0,STR_PAD_LEFT);

$last_date = date("Y-m-t", strtotime("$p_y-$p_m-01"));
# $last_date => '2021-09-30'
```
openFrameworksのaddonのexample書くときのTIPS

oFのaddonって基本的に

```
ofxGreatAddon/
  src/
    ...
  libs/
    ...
  example/
    src/
      ...
    addons.make
  ...
```

こんな感じになってると思うのだけど, local_addonsとしてaddonを持ちたいとき, さくっとexampleをPGに通すとaddonが無いってことになりがち.

なので, addons.makeには

```
../../ofxGreatAddon
```

と記述するとグローバルのaddonsでもlocal_addonsでもどこでも平和にPGが通せるよね.

ということで.
VBAのDictionaryオブジェクトの使い方

# はじめに
VBAの辞書を使うときに毎回調べているなと感じることが多いので記事にまとめておこうかなと思いました。

# Dictionaryオブジェクトの使い方
## コード

```vb
Option Explicit

Sub test()
    ' 生成
    Dim test_dict As Object
    Set test_dict = CreateObject("Scripting.Dictionary")

    ' 追加
    test_dict.Add "test", "test"
    test_dict.Add "test2", "test2"
    test_dict.Add "test3", "test3"

    ' 参照
    Debug.Print "###参照###"
    Debug.Print test_dict("test")

    ' 更新
    Debug.Print "###更新###"
    test_dict("test") = "test_update"
    Debug.Print test_dict("test")

    ' For Eachでの使い方
    Debug.Print "###ループ###"
    Dim var As Variant
    For Each var In test_dict
        Debug.Print "キーの参照:" & var
        Debug.Print "値の参照:" & test_dict.Item(var)
    
    Next var

End Sub

```
## イミディエイトウィンドウの表示
```
###参照###
test
###更新###
test_update
###ループ###
キーの参照:test
値の参照:test_update
キーの参照:test2
値の参照:test2
キーの参照:test3
値の参照:test3

```


# 終わりに
簡単ではありますが、調べることは結構あったりするので簡単な使用方法をまとめてます。
今後はこの記事を参考に書いていければよいなと思います。
Windows10 Home + WSL2環境にLinuxbrewをインストールする方法

## はじめに
- Windows10 Home + WSL2環境にLinuxbrewをインストールする方法をまとめました

## 実行環境
- Windows10 Home 64bit
- Build Version: 19624.1000
    - Windows Insider Programにより通常のビルドより新しいものとなっている
- WSL (Windows Subsystem for Linux) ：2
    - LinuxOS：Ubuntu18.04

## インストールするもの
### Linuxbrew
1. 事前にインストールするもの

```
$ sudo apt install build-essential curl file git
```

1. Linuxbrewのインストール

```
$ sudo apt install build-essential curl file git
```
- 記述されたとおりに進める 

1. パスを通す

```
$ echo 'eval $(/home/linuxbrew/.linuxbrew/bin/brew shellenv)' >>~/.profile
$ eval $(/home/linuxbrew/.linuxbrew/bin/brew shellenv)
```

1. gccのインストール

```
$ brew install gcc
```
- 依存関係のあるものもDLされる
    - `patchelf`、`zlib`、`gmp`、`mpfr`、`libmpc`、`isl@0.18`など

- ここでエラーが出た

```
Error: patchelf must be installed: brew install patchelf
Warning: Bottle installation failed: building from source.
Error: The following formula
    patchelf
cannot be installed as binary package and must be built from source.
Install Clang or run `brew install gcc`.
```

- `gcc`をインストールするために`patchelf`が必要だからインストール
しようとしてるけど`Clang` or `gcc`が必要 → `gcc` や `Clang` が入ってないので `patchelf` のソースがビルドできない

    - 対応
        - clangのインストール

```
$ sudo apt update
$ sudo apt install clang
```

1. brewが正常に動作するか確認

```
$ brew doctor
```

1. 完了

```
Your system is ready to brew.
```


## おまけ
- `patchelf`
        - `PatchELF`のこと
- `ELF`
    - Executable and Linkable Format の略
    - Linux や Unix で使われるファイルの実行形式の事(`.bin`とか`.exe`みたいなもの)

- `gcc`
    - GNU Compiler Collection の略
    - 色々な言語に対応したコンパイラ(JavaやGoも読める)
    - GNUの読みは`ぐぬー`らしい
Python、Flaskであっという間に画面表示！

##内容
今回はPythonのWebアプリケーションフレームワークのFlaskを使って画面を表示させるよーっていうところまで書きます！簡単な内容となっていますがよろしくお願いいたします！
※本記事ではソースコードのみの記載とさせていただき、環境の構築(Python、Flaskのインストールなど)に関しましては割愛させていただきます。

##環境
・Python 3.9.6
・Flask 1.1.2

##helloを表示
どこにでもあるhelloを表示させるです。

```python:hello.py
from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello():
    return "Hello World!"

if __name__ =="__main__":
    app.run()
```
###実行
サーバーを起動させる

```terminal:ターミナル
python hello.py
```
下記URLにアクセスしてみます。
http://localhost:5000/
すると、、、
![スクリーンショット 2021-10-11 23.49.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603568/2323f963-ac7e-ed28-738b-5fee8a18f0f2.png)
このように表示されます。
こちらはhtmlも使用せずに画面に「hello」とだけ表示させるものです。
続いては呼び出された際にhtmlを返します。
##htmlを返す
今回はシンプルに記載ができるJinja2というテンプレートエンジンを使用します。
htmlを返すだけではつまらないので入力フォームから2つの数字を受け取って掛け算させたいと思います！

templatesというフォルダを作って、そこにhtmlを置きます。htmlは3つ用意します。
まず共有のテンプレート

```html:layout.html
<!doctype html>
<html>
<head>
<title>{{ title }}</title>
</head>
<body>
{% block content %}
<!-- ここにメインコンテンツを書く -->
{% endblock %}
</body>
</html>
```
続いて入力フォーム
※↑で作ったlayout.htmlのbodyに埋め込まれます。

```html:input.html
{% extends "layout.html" %}
{% block content %}
<form action="/calc" method="post">
    <input type="text" name="a"> ×
    <input type="text" name="b">
    <input type="submit" value="計算">
</form>
{% endblock %}
```

最後に掛け算を表示させるhtml

```html:input.html
{% extends "layout.html" %}
{% block content %}
<h1>答えは... {{ anser }} </h1>
{% endblock %}
```
、、、サボりました

実際に上で作成したhtmlを表示させるコードを書きます！

```python:flask_project.py
# htmlとの値の受け渡しのため、render_templateとrequestを追加でインポート
from flask import Flask, render_template, request

app = Flask(__name__)

@app.route("/")
def hello():
    # demo.htmlを呼び出す
    return render_template('input.html', title = 'flask test')

# フォームの値を受け取って結果を表示
@app.route("/calc", methods=["post"])
def calc():
    # 受け取った値を掛け算する
    a = int(request.form.get("a"))
    b = int(request.form.get("b"))
    r = a * b
    return render_template('output.html', anser = r)

# サーバーを起動
if __name__ == "__main__":
    app.run(debug=True, port=5000)
```
サーバーを起動させる

```terminal:ターミナル
python flask_project.py
```
再度、下記URLにアクセスしてみます。
http://localhost:5000/
すると、、、
![スクリーンショット 2021-10-14 1.37.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603568/426db651-d5ba-29ae-5534-78f2f6cc89df.png)
表示されました！
続いて適当な数字を入力して、、、
![スクリーンショット 2021-10-14 1.37.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603568/a4a228d5-371a-d032-2840-a6f31649e020.png)
計算ボタンをクリックすると、、、
![スクリーンショット 2021-10-14 1.38.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603568/bc14dcfc-2073-7d26-82be-bba26039187c.png)
計算結果が表示されました！！！
引き続き学習していきたいと思います。
ご指摘等ありましたら、コメントの方よろしくお願いいたします！

参考資料
https://qiita.com/zaburo/items/5091041a5afb2a7dffc8
https://qiita.com/kotayanagi/items/01e9a617571e2b9526bc
https://www.twilio.com/blog/how-to-run-a-flask-application-jp
https://www.python.ambitious-engineer.com/archives/760
https://tanuhack.com/jinja2-cheetsheet/
エクセルを使用してMySQLのテーブル用に連番を作成する方法

### 経緯
事情があって、既存レコードから取得したSQLを、数カラムだけ連番にしたりする必要があったところエクセルを使うと早いと先輩から聞いたのでそのやり方です。果たして、エクセルを使うのがいいかどうかは置いておいて、手打ちではない点でミスがないし、簡単だったので、数行で紹介できればと思います。

### 方法
1. Mysqlからテーブル内のデータを表形式でコピーします
  - HeidiSQLであれば、 ①DBを開き目的のテーブルを選択した後に「データ」を選択  ②「ツール」から「グリッド行のエクスポート」を選択  ③「クリックボードへコピー」と、出力形式に「Excel CSV」にチェックを入れたあとにOKを押下すると、テーブルデータを表形式で簡単にコピーできます。

2. コピーした表形式のテーブルデータをエクセルのシートに貼り付けます

3. 貼り付けたら、下記のように挿入するSQL編集用のカラムを作ります。
4. さらにSQLでUPDATE文を書きます。先頭はエクセルなので、`=` にし、文字列はエスケープ、文字列の結合は `&`で行います。
5. 今回の例でいえば、B列で連番のIDにしたいため、 `+` にした状態のカーソルで下までドラッグし、連番にします。さらに作成したUPDATE文も同様にドラッグします。
（ここでのWHERE文などの条件は、用途にあったものを各自置き換えて考えて下さい）

```
="UPDATE `テーブルの名前` SET `id`="&B2&" WHERE `order` = "&L2&";"
```
 
6. 出来上がりは下記のような形です。これでいえば編集したA列全体をコピーし、手持ちのSQLクライアントの「クエリ」編集画面にコピーして実行します。（くれぐれもバックアップは忘れないように）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565397/d302278b-9273-0fe2-db66-4b8db6753385.png)
Visual Studio 2022 for Mac の Public Preview 2 がリリースされました

![img](https://visualstudio.microsoft.com/wp-content/uploads/2021/07/VSM2022-DebugWebApp.png)
#Visual Studio 2022 for Mac Preview 2 提供開始！
みなさんごきげんよう。ちょうど 10/13 日に、正式に Visual Studio 2022 のリリースが 11/8 にあること、また同日ローンチイベントが米国で開催されることが発表しました。

https://qiita.com/uikou/items/c96bbd477898a466a191

ただ、VS for Mac についてはややゆっくり目に進んでいるので、どうなってるかなと気になっていらっしゃる方もいたかと思います。安心してください。順調に開発は進んでおります。昨日、Preview 2 がリリースされました。

VS2022 for Mac のインストーラはこちらから入手いただけます。
**もちろん、VS2019 for Mac と同じ環境に併用してインストールできるようになっております！**

https://aka.ms/installer/preview

# 
以下のブログによると、Public Preview 2 のリリースのポイントは以下の 2 つです。

https://devblogs.microsoft.com/visualstudio/visual-studio-2022-for-mac-preview-2-is-now-available/

#1. .NET 6 RC2 サポート (現時点では Intel ベースのみ。M1 は後日対応予定）
VS2002 RC2 では、Intel ベースの Mac むけの.NET 6 RC2 のサポートが含まれています。(※) 今のところ、.NET 6 RC1 が既定インストールされているのため、[手動で .NET 6 RC2 を .NET 6 のサイトからダウンロードし、インストールする](https://dotnet.microsoft.com/download/dotnet/6.0)必要があります。

> (※) 原文は "For now, .NET 6 RC1 is still installed by default and you need to manually install .NET 6 RC2.

https://dotnet.microsoft.com/download/dotnet/6.0

なお、現時点で M1（ARM64）アーキテクチャ上の Visual Studio for Mac で .NET 6 RC2 はサポートされていません (今後対応予定)。

#2. macOS ネイティブ UI への移行作業がさらに進みました（テスト結果ウインドウなど）
今回の Visual Studio 2022 for Mac の目玉は、UI が完全に Native macOS UI に移行したことです。（以下参考）

https://qiita.com/uikou/items/ae0a54d18b0557f8477e

Preview 2 では、さらに内容をブラッシュアップ。既存の「テスト結果」ウィンドウと UI のいくつか細かい部分の移行をしました。
これら変更点や Fix されたバグの内容は以下のリリースノートにまとめられています。

https://docs.microsoft.com/en-us/visualstudio/releases/2022/mac-release-notes-preview

# フィードバック先
開発チームでは、引き続き皆さんのフィードバックをお待ちしております。
VS 上の `Help` > `Report a Problem or Help` > `Provide a Suggestion` からお寄せいただくか、以下サイトからフィードバックや、提案などを実施可能です。

https://aka.ms/vsmac-suggestion

https://docs.microsoft.com/visualstudio/mac/report-a-problem

https://developercommunity.visualstudio.com/search?space=41&stateGroup=active

それではみなさん、是非 VS for Mac の PR2 を使ってみてくださいませ！
Launch イベントもお楽しみに（デモが満載になる予定です）。
associatedtype swift


謎のワードだったassociatedtypeを調べてみた。
--

　```associatedtype```キーワードでプロトコルの連想型を定義することができる。
通常であればプロトコルを宣言した際に引数や戻り値の型を指定する必要があると思うが、associatedTypeを指定するとデリゲートした際に
型を指定することができる。
連想型を使用指定していけば、より抽象的なプロトコルを定義できる。

書き方

```swift
protocol プロトコル  {
　associatedType 連想型名
　var プロパティ名:連想型
　func メソッド名(引数：連想型名)
　func メソッド名（）→連想型名
}
```

連想型の実際の型は、プロトコルにdelegateする型ごとに指定できる。
準拠側

```swift
1 typeliasで指定
 typelias 連想型名 = Int
2 実装から自動的に決めることもできる
 var プロパティ名 :Int
 func メソッド名(引数:Int)
　func メソッド名()→Int {return 3}
3.型を定義せずに再度ネストする形で要求を満たすことも可能である
 struct 連想型名（）
 var プロパティ名 :連想型名
　func （引数:連想型名）{}
func  ()→連想型名{}
```

　型の制約　
連想型とはいえ準拠しなくてはならないプロトコル、継承していて欲しいスーパークラスがある場合は下記のように指定する
指定したプロトコルに準拠、もしくはスーパークラスを継承していない場合はコンパイルエラーになってしまう。

 ```swift
　associatedType 連想型名 :プロトコルやスーパークラス
```
PHP8でJITの設定方法

# はじめに
PHP8からJITというプログラムを高速に実行させる機能が導入されたようです。
その導入方法を残して起きます。

#方法
php.iniファイルに以下を追記

```php.ini
zend_extension = opcache
opcache.enable = 1
opcache.enable_cli = 1
opcache.jit = tracing
opcache.jit_buffer_size = 128M
```

ターミナルでphp -i | grep opcacheを実行し以下のようになっていたらOK

```
opcache.jit => tracing => tracing
opcache.jit_bisect_limit => 0 => 0
opcache.jit_blacklist_root_trace => 16 => 16
opcache.jit_blacklist_side_trace => 8 => 8
opcache.jit_buffer_size => 128M => 128M
opcache.jit_debug => 0 => 0
opcache.jit_hot_func => 127 => 127
opcache.jit_hot_loop => 64 => 64
opcache.jit_hot_return => 8 => 8
opcache.jit_hot_side_exit => 8 => 8
opcache.jit_max_exit_counters => 8192 => 8192
opcache.jit_max_loop_unrolls => 8 => 8
opcache.jit_max_polymorphic_calls => 2 => 2
opcache.jit_max_recursive_calls => 2 => 2
opcache.jit_max_recursive_returns => 2 => 2
opcache.jit_max_root_traces => 1024 => 1024
opcache.jit_max_side_traces => 128 => 128
opcache.jit_prof_threshold => 0.005 => 0.005
```

DBのIOがあまり関係ないけど処理が遅い部分で試してみてください。
その速さに驚愕することでしょう(それほど速くならないこともありますが)。

もしDocker環境などでphp.iniをマウントしているようであれば一度docker downしてからお試しください
ちなみに、Xdebugは使えなくなるとどこかの記事に書いてあった気がします。。

# 最後に
ここまで来たかPHP...
【SpringBoot】NamedParameterJdbcTemplateで実行されるSQL文をログ出力する

## 備考(※読み飛ばし推奨)

- 業務で役立ったので備忘録として残すことにした。
- [log4jdbc](https://github.com/arthurblake/log4jdbc)で実装すべきだが、Gradle(Maven)を書き換えるのが面倒な人向け。
- NamedParameterではないJdbcTemplate使用時は`String.replaceFirst`で`?`を置換すればいけそうな気がするが、パラメータの順番担保はどうなるのか未確認。[log4jdbc](https://github.com/arthurblake/log4jdbc)を使うべき。

## サンプルコード

```Java
package sample.repository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Repository;
import org.springframework.jdbc.core.namedparam.MapSqlParameterSource;
import org.springframework.jdbc.core.namedparam.NamedParameterJdbcTemplate;
import org.springframework.jdbc.core.namedparam.SqlParameterSource;
import org.springframework.beans.factory.annotation.Autowired;
import java.util.Map;

@Repository
public class SampleRepositoryImpl implements SampleRepository {

    @Autowired
    NamedParameterJdbcTemplate namedParameterJdbcTemplate;

    @Override
    public void update(String sql, MapSqlParameterSource params) 
    {
        // SQL実行直前にログに吐き出す。
        sqlPrint(sql,params);
        namedParameterJdbcTemplate.update(sql, params);
    }

    /**
     * SQL文を標準出力する
     * @param sql SQLクエリ文字列
     * @param params パラメータ
     */
    private void sqlPrint(String sql, MapSqlParameterSource params)
    {
        Map<String, Object> param = params.getValues();
        for(String key : param.keySet())
        {
            result = result.replaceAll(":" + key, "'" + param.get(key).toString() + "'");
        }
        System.out.println(result);
    }
}
```
v-modelとpropsとstore(vuex)

※ ぱっと見でわかるように説明と文法の省略をしています。

**前提知識**

```vuejs
<input v-model="title" />
```

は ⇩ の `糖衣構文` (シンタックスシュガー = 簡単な書き方)

```vuejs
<input
  :value="title"
  @input="title = $event.target.value"
/>
```

---


# 親子間の `v-model` パターン

**親コンポーネント**

```vuejs
// Parent
<child-component
   v-model="title"
  />

data() {
  return {
    title: "",
  };
},
```



## `ノーマル` なやり方

* 親コンポーネントは `v-model` 
* 子コンポーネントは `v-bind` と `v-on`

```vuejs
// Child

<input
    :value="title"
    @input="$emit('input', $event.target.value)"
  >

props: {
    title: {
      type: String,
    },
  },
```

## `computed` 使ったやり方

* 親コンポーネントは `v-model`
* 子コンポーネントは `computed` の `get` と `set`
    * `get` は値を取得
    * `set` は値の変更を検知してイベント発火

```vuejs
// Child
<input
    v-model="inputedValue"
	/>

props: {
    title: {
      type: String,
    },
  },
computed: {
    inputedValue: {
      get() {
        return this.title;
      },
      set(newValue) {
        this.$emit("input", newValue);
      },
    },
  },
```

## store(vuex)絡み

**store.js**

```vuejs
state: {
  title: '',
},
mutations: {
  updateTitle(state, title) {
    state.title = title;
  },
},
```

**親コンポーネント**

```vuejs
<child-component
    :title="title"    
    @update-title="updateTitle($event)"
  />

computed: {
    title() {
      return this.$store.state.title;
    },
  },
methods: {
    updateTitle(value) {
       this.$store.commit('updateTitle', value);
    },
  },
```
---

### 参考

https://jp.vuejs.org/v2/guide/components.html#%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%A7-v-model-%E3%82%92%E4%BD%BF%E3%81%86

https://qiita.com/toshifumiimanishi/items/07c8e96eb6f8e50c5e27
【ReactとNext.jsの学習方法】fwywd（フュード）採用一次試験をcssも危うい初心者が学習した流れ



fwywd（フュード）の採用試験に挑戦したいけど、書いてある内容が呪文にしか見えない。
React・Next.js・tailwindcss・Vercel？？
JavaScriptも全くわからない初心者が学習した流れをまとめました。
プログラミング初心者の方や同じ思いをしている人の助けになると嬉しいです。



# 対象
- 試験内容を把握したい
- ReactやNext.jsなどがよくわからない
- 何から学習したらよいかわからない

# 試験内容の記事

https://fwywd.com/news/recruitment

https://fwywd.com/news/recruitment-1st

https://fwywd.com/blog/website-checklist

#用語説明


![用語説明.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1338748/6c756919-8201-b857-3f89-69cf0da59485.png)


もっと噛み砕いて...

- React：HTMLの見た目を作れる。HTMLに変数を渡せるため表示を変えられる。
- Next.js：サーバとして動かすことができる。（Reactはサーバ機能はない）
- Vercel：Next.jsアプリケーションを簡単にデプロイできるサービス。
    - デプロイ：アプリケーションをサーバー上に展開・配置して利用できるようにすること。
- Tailwind CSS：CSSを記述せずに、便利で汎用的なクラスを組み合わせてレイアウトを作る。


"React"と"Next.js"の違いをもっと詳しく知りたい方は以下の記事をご覧下さい。私が参考にしたサイトです。
参考：[Next.jsとReactの違い](https://tech-parrot.com/programming/next-js-react-js-tigai/#Reactjs)


# 各技術の学習方法・参考資料
１次試験前半提出までに学習した主な内容です。

###JavaScript

参考サイト等を一読しましたが、JavaScriptを学習していない私には難しかったです。
ですが、Reactのチュートリアル等に沿って行っていけば実装できたため、なんとかなったため飛ばしても良いかもしれません。

【参考】
- [ES2015(ES6) 入門 - Qiita](https://qiita.com/soarflat/items/b251caf9cb59b72beb9b)

### React

1. [チュートリアル](https://ja.reactjs.org/tutorial/tutorial.html#setup-option-2-local-development-environment)を最初に行ってみたのですが、途中からついていけなくなったため、[一段階ずつ学べるガイド](https://ja.reactjs.org/docs/hello-world.html)を参考にしました。
サイトから直接、オンラインエディタを使用できるので取り掛かり易いです。
2. ある程度、ポートフォリオを作成後、[react-scroll導入](https://fwywd.com/tech/install-react-scroll)を参考にして、スムーズなスクロールを実装しました。

【参考】
- [一段階ずつ学べるガイド](https://ja.reactjs.org/docs/hello-world.html)
- [Reactチュートリアル](https://ja.reactjs.org/tutorial/tutorial.html#setup-option-2-local-development-environment)
- [react-scroll導入](https://fwywd.com/tech/install-react-scroll)

### Next.jsとVercel

1. [こちらのサイト](https://nextjs.org/learn/basics/create-nextjs-app)通りに進めることで、Next.jsのアプリを作成しVercelにデプロイする流れを学べます。
2. 流れを学習後、Next.js＋Tailwind CSSのプロジェクト作成方法は[こちら](https://fwywd.com/tech/next-tailwind)の記事を参考にしました。
3. next/imageによる画像の最適化は[こちら](https://zenn.dev/akahori/articles/e2d8816df758f8b7833f)の記事も参考にしました。

【参考】
- [Create a Next.js App](https://nextjs.org/learn/basics/create-nextjs-app)
- [next/imageによる画像最適化を試してみた](https://zenn.dev/akahori/articles/e2d8816df758f8b7833f)
- [Next.js (JavaScript/TypeScript) に Tailwind CSS を導入する方法](https://fwywd.com/tech/next-tailwind)


### Tailwind CSS

1. 実際に作成したプロジェクトに記述しながら学習しました。調べ方は、オープンソースのテンプレートがたくさんある[Tailwind Component](https://tailwindcomponents.com/)から、自分が実装したいレイアウトに近いものを探し、書かれたコードをみて[tailwindcssの公式サイト](https://tailwindcss.com/)で一つずつ調べていきました。
![全画面_2021_10_15_8_58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1338748/c494ef8d-5d5e-58dc-689b-9b20d16f6d3e.png)

【参考】
- [Tailwind Component](https://tailwindcomponents.com/)
- [tailwindcssの公式サイト](https://tailwindcss.com/)

# おわり

実際にはわからない用語や内容が多くて他のサイトも色々見ましたが、自分が実際に作るためにわかりやすく、必要だと思ったものを載せています。

次回は、実際に実装する際に困った部分をピックアップして書いていきます。
少しでも、挑戦してみようとしている人の役に立てたら嬉しいです！
UnityのHololens2でもっと遠くのオブジェクトをつかめるようになりたい

## Hololens2で遠くのオブジェクトが掴めない

そもそもHololensでは指の先からちょっと線が出てて、それに触れているオブジェクトはつかめたりできる

![](https://camo.qiitausercontent.com/69d9bbf8e367c9d42fd8216717a5f8d4d205ceb6/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3135313538392f30623931366364392d356162642d616230652d623931342d3331313937303637616334302e706e67)

Unity上のエディタでも、エミュレータでも、実機でも、だいたい5.5mくらいまではつかめるがそれ以上離れちゃうとつかめない

## 参考サイト

* https://qiita.com/jyouryuusui/items/1d69342b6aaf9553f1bb
* https://microsoft.github.io/MixedRealityToolkit-Unity/Documentation/Input/Pointers.html
* https://bluebirdofoz.hatenablog.com/entry/2020/02/07/095226

Unity初心者の自分では、ここらへん見てすぐに見つけられなかったので残しておきます。

## 設定場所

![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1326419/00b96d3d-2ea6-10ca-44fd-9bc62450408d.png)

シーンに追加されている「MixesRealityToolkit」を選択
ここらへんは他の設定でも使うのでわかるっちゃわかった

![名称未設定のデザイン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1326419/0316133e-bc6e-e109-4754-66b260e3f011.png)

それぞれcloneしまくって編集できるようにする

![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1326419/69d28529-a2fd-d173-397e-8edff68cd8c7.png)

「DefaultControllerPointer」をこれもコピーしておいてから、ダブルクリックし編集します

![名称未設定のデザイン (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1326419/395dd7d5-32aa-1b41-8d6b-89b99d6efe01.png)

「Pointer Extent」あたりの数字を増やせばできた
デフォルト値は5.5だったので、やはり手からの距離が5.5mが範囲だったようですね
Laravelのアプリケーションの理解①（ライフサイクル）

本記事ではLaravelのアプリケーションを理解し、より良い設計・アーキテクチャを構築できるように学習したことを簡潔にまとめています。

#目次
1.<font color="LimeGreen">Laravelのアーキテクチャ</font>
2.アプリケーションのアーキテクチャ
3.HTTPリクエストとレスポンス
4.データベース
5.認証と許可
6.イベントとキューによる処理の分離
7.コンソールアプリケーション
8.テスト
9.エラーハンドリングとログの活用
10.テスト駆動開発の実践

#１．Laravelのアーキテクチャ

##1-1.ライフサイクル
laravelアプリケーションのHTTPリクエストからHTTPレスポンス返却までの流れを以下に示す。

***
**HTTPリクエスト
→①エントリーポイント(public/index.php)
→②HTTPカーネル(app/Http/Kernel.php)
→③ルータ(Illuminate\Routing\Router\routers/web.php)
→④各ミドルウェア→⑤５コントローラ、クロージャ
→⑥各ミドルウェア→⑦ルータ→⑧HTTPカーネル→⑨エントリーポイント
→HTTPレスポンス** 
***
###①エントリーポイント
pulic/index.phpが該当し、アプリケーションの起点となる。

```php
//①オートローダの読み込み
define('LARAVEL_START', microtime(true));
require __DIR__.'/../vendor/autoload.php';

//②フレームワークの起動
$app = require_once __DIR__.'/../bootstrap/app.php';

//③アプリケーション実行およびHTTPレスポンスの送信
$kernel = $app->make(Kernel::class);
$response = tap($kernel->handle(
  $request = Request::capture()
))->send();

//④ 終了処理
$kernel->terminate($request, $response);
```
***<コード解説＞***
①オートローダの読み込み。これによりフレームワーク内のクラスをrequireしなくても利用できる

②bootstrap/app.phpにフレームワークをセットするコードが含まれており、実行結果として、Illuminate\Foundation\Application（サービスコンテナの中核）のインスタンスを返す。

③生成されたサービスコンテナを利用し、HTTPカーネルを生成してhandle()を実行してアプリケーションを実行している。Illuminate\Http\Request::capture()でHTTPリクエストからRequestを生成している。


###②HTTPカーネル
App\Http\Kernelクラスはミドルウェア設定を、Illuminate\Foundation\Http\Kernelクラスにはアプリケーションのセットアップの処理が記載。

```php
// HTTPカーネルのhandleメソッド(Illuminate\Foundation\Http\Kernel)
public function handle($request)
{
  try {
       $request->enableHttpMethodParameterOverride();
       //①ルータの実行
       $response = $this->sendRequestThroughRouter($request);
  } catch (Throwable $e) {
       $this->reportException($e);
       $response = $this->renderException($request, $e);
  }

  //②イベント発火
  $this->app['event']->dispatch(
       new Events\RequestHandled($request, $response)
  );
  return $response;
}
```
***<コード解説＞***
①sendRequestThrouchRouterの引数でRequestを受け取り、ルータにRequestを渡して実行する。

②Events\RequestHandledイベントが発火されるため、これに対するリスナーを設定すればこの時点で呼び出される。
（dispatchはジョブをキューに登録するメソッド）

###③ルータ
定義されたルートの中からRequestにマッチするルートを探して、ルートに定義されたコントローラやアクション、クロージャを実行する。

###④ミドルウェア
ミドルウェアでは、ルートで指定された処理の前後に任意の処理を実行できる。
具体的には、RequestやResponseに含まれる値の変更や暗号化（復号）やセッション実行、認証処理など。

下記にCookieの暗号化や複合を行うIlluminate\Coocke\Middleware\EncryptCookieクラスのhandleメソッドを示す。

```php
<?php 
namespace Illuminate\Cookie\Middleware;

class EncryptCookies
{
  public function handle($request, Closure $next)
  {
     //①descryptメソッドで暗号化されたCookieを復号してRequestを取得
     //②次のミドルウェアを実行して、Responseを取得
     //③encryptメソッドでResponseを暗号化して返す
     return $this->encrypt($next($this->decrypt($request)));
   }
}
```
***<コード解説＞***
引数のClosure $nextには次に実行するミドルウェアが、なければコントローラが入る。

###⑤コントローラ
HTTPリクエストに対応する処理を実行する。処理が完了すれば、Responseを生成して戻り値として返す。
Three.jsでグリーンバック動画をテクスチャにする

Three.jsでテクスチャに動画を貼り付けて再生することはできるが、
透過情報を持った動画を再生する方法は中々見つからなかったので、
今回はテクスチャをキーイングして動画を透過させる

#準備
何でもよいので、GB動画を用意してください。
![ezgif-2-53d490eb6667.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2174244/73869296-2dac-1f73-22a7-550806d5db5f.gif)

#オブジェクトとテクスチャを作成
Three.jsの基礎は知っている前提で、要所だけ記述します。

```
const geometry = new THREE.PlaneBufferGeometry(1.6, .9);
```
比率が動画と合っているならサイズは何でも可

<br>

```
const video = document.createElement('video') //動画ファイルをhtmlへ埋め込む
video.src = './texture.mp4'
video.setAttribute('playsinline', '')
video.style.display = 'none'
video.muted = 'true'
video.play()
const videotexture = new THREE.VideoTexture(video) //テクスチャへ貼り付け
```
読み込んだ動画をテスクチャローダーで指定します。

#マテリアルを作成
シェダーマテリアルを作成します
vertexShaderとfragmentShaderは特に考えずに定義してください。

```
const material = new THREE.ShaderMaterial({
    transparent: true,
    uniforms: {
        map: { value: videotexture },
        keyColor: { value: [0.0, 1.0, 0.0] },
        similarity: { value: 0.7 },
        smoothness: { value: 0 },
    },
    vertexShader: vertexShader(),
    fragmentShader: fragmentShader(),
})

function vertexShader() {
    return `
        varying vec2 vUv;
        void main( void ) {     
            vUv = uv;
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
        }
    `
  }
  
  function fragmentShader() {
    return `
        uniform vec3 keyColor;
        uniform float similarity;
        uniform float smoothness;
        varying vec2 vUv;
        uniform sampler2D map;
        void main() {
            vec4 videoColor = texture2D(map, vUv);
            float Y1 = 0.299 * keyColor.r + 0.587 * keyColor.g + 0.114 * keyColor.b;
            float Cr1 = keyColor.r - Y1;
            float Cb1 = keyColor.b - Y1;
            
            float Y2 = 0.299 * videoColor.r + 0.587 * videoColor.g + 0.114 * videoColor.b;
            float Cr2 = videoColor.r - Y2; 
            float Cb2 = videoColor.b - Y2; 
            
            float blend = smoothstep(similarity, similarity + smoothness, distance(vec2(Cr2, Cb2), vec2(Cr1, Cb1)));
            gl_FragColor = vec4(videoColor.rgb, videoColor.a * blend); 
        }
    `
  }

// Mesh
const sphere = new THREE.Mesh(geometry,material)
scene.add(sphere)
```

#結果
![Animation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2174244/4be57d86-4ee5-71ce-552f-576ba6bb91fb.gif)
表示できました
<br>
境界線のジャギが少し気になるので、描写精度を優先するならあまり使い物にはならないかなー
Webmなら透過動画が使用できるけど、iOSでは動作しないので...
いい方法がありましたら教えてください
Apple M1 で ARM 版 Windows10 を日本語化メモ

# Windows Insider Preview の最新アップデートをインストールする方法

1. Windows10 を起動

2. スタート から [Settings > Update & Security > Windows Insider Program] を選択

3. 右ペインもしくは、中央ペイン下部に「Windows Insider account」という項目が存在し、メールアドレスが表示されている場合、「unlink」 を選択

    > 「Windows Insider account」が存在しない場合は次へ

4. [Install the latest Windows Insider Preview updates ](https://kb.parallels.com/125526) を開く　

5. 「Alternative solution」章の手順 4 の「archive」を選択し、OfflineInsiderEnroll をダウンロード

6. ダウンロードしたファイルを展開

7. 展開されたフォルダを開く

8. 「OfflineInsiderEnroll.bat」を右クリックし、「Run as Administrator」を選択

9. 表示されたコマンドプロンプトの画面で、「F」を入力し、「Enter」キーを押す

10. 　再度「Enter」キーを押して、画面を閉じる

11. スタート から [Settings > Update & Security > Windows Update > check for update]を選択

    > 更新が始まらない場合、Resume updates が表示されていたら選択

12. 更新プログラムのダウンロード後、インストールが開始される

13. 再起動

14. スタート から [Settings >Time＆language > Language > 日本語] を追加

# 参考

https://kb.parallels.com/125526
プログラミング言語のバージョンを気にしよう

## プログラミング言語のバージョン

みなさんは自分が書いているプログラミング言語のバージョンを意識していますか?

書いているときは気にしなくてもいいですが、プロジェクトの最初に何のバージョンを使うかをきめなきゃいけないですよね。

その時に新しいフレームワークや開発環境が出ているにもかかわらず、古いフレームワークや、古い開発環境を使用する関係で、最新ではないバージョンの言語を使用することになってしまいます。

それがどれだけ悲しいことかという話です。

プログラミング言語は日々進化し、より書きやすく見やすくなっています。

３つの言語`C#` `C++` `Swift`を使ってバージョンによる書きやすさを見ていきます。

## 例1 C# null判定

`value`がnullだったら新しいインスタンスを作成するという処理をしています。
以下はすべて同じ処理です。

```c#
// C# 6.0以前
if (newValue != null) {
    value = newValue;
}
```

```c#
// C# 7.0
if (!(newValue is null)) {
    value = newValue;
}
```

```c#
// C# 9.0
if (newValue is not null) {
    value = newValue;
}
```

`is null`のいいところは、`==`では`struct`などの`Null非許容型`も無駄に判定できました。
しかし`is null`で`struct`をnull判定しようとするとちゃんとエラーが出るようになります。

`is not null`のいいところは`is null`では否定のために`!`などを使用しないといけませんでしたが、これが必要なくなります。

https://tech.dely.jp/entry/2020/12/16/124547

## 例2 C++ 初期化を伴う範囲for文(foreach)
```c++
// C++ 11より前
for (int i = 0; i < vectors.size(); i++) {
    bar(vectors[i], i);
}
```

```c++
// C++ 11
std::size_t i = 0;
for (int x : vectors) {
    bar(x, i);
    ++i;
}
```

```c++
// C++ 20
for (std::size_t i = 0; int x : vectors) {
  bar(x, i);
  ++i;
}
```

`c++11`のいいところは、配列の要素をとってくる際に、Indexを気にしなくていいことです。
`c++20`のいいところは、Index(i)をfor文のスコープ内で宣言できるので、for文が終われば、(i)は破棄され、再度変数名(i)を使って、別のインスタンスを作成することが可能です。

https://cpprefjp.github.io/lang/cpp20/range-based_for_statements_with_initializer.html

## 例3 Swift 非同期処理

非同期で天気データを取得して、非同期で平均を計算して、非同期で平均を送信して非同期で送信結果をprintしています。

```swift
// Swift 5.5より前
func processWeather() {
    fetchWeatherHistory { records in
        calculateAverageTemperature(for: records) { average in
            upload(result: average) { response in
                print("Server response: \(response)")
            }
        }
    }
}
```

```swift
// Swift 5.5
func processWeather() async {
    let records = await fetchWeatherHistory()
    let average = await calculateAverageTemperature(for: records)
    let response = await upload(result: average)
    print("Server response: \(response)")
}
```

`swift 5.5`では`async/await`が導入され非同期処理時のコードの`ネスト地獄`をなくすことができるようになりました。

https://www.hackingwithswift.com/articles/233/whats-new-in-swift-5-5

### (おまけ)最新のバージョンを追うには

こういった最新の機能を使うにはまず知らなければいけないのですが、これは結構大変です。
なので１つ好きな言語を作り、それを追いましょう。１つわかっていれば、この機能はあの言語にはないのかな？という考えで別言語でも最新の機能を使えることが多いです。

自分は`Swift`が好きで、`Swift`を好きな人は熱量が大きく、Twitterなどで最新の機能や、できることを紹介している人が多い印象なので、そういった人たちから勉強したりしています。

Swiftは今や、`Mac` `Linux` `Windows`どれでも使用できるので、おすすめです!
Docker - PostgreSQLでpsqlコマンドを実行する方法

```cmd
docker exec -it container_name (or container id) psql -U POSTGRES_USER -W POSTGRES_DB
```

このコマンドを用いればDocker環境を通してPostgreSQLに接続できます。

`docker exec -it` : 現在起動しているコンテナに対して実行できるコマンド `-it`オプションはかんたんに説明するとインタラクティブにコマンドを操作できますよというオプションを表します。

詳しくは[docker公式](https://matsuand.github.io/docs.docker.jp.onthefly/engine/reference/commandline/container_exec/)を参考にしてください。

`container_name`：コンテナの名前 （あるいはコンテナのID）
`psql -U POSTGRES_USER -W POSTGRES_DB`：現在起動しているコンテナを実行するためのコマンド
`U`：データベースのユーザー名の指定
`W`：データベースにアクセスするためにパスワードの入力が必須であることを知らせる。詳しくは[postgreの公式](https://www.postgresql.org/docs/13/app-psql.html)

# 参考文献
[Docker - How can run the psql command in the postgres container?](https://stackoverflow.com/questions/37099564/docker-how-can-run-the-psql-command-in-the-postgres-container)
Salesforce 備忘録

# 概要
Salesforce の軽微な設定などをまとめた備忘メモ。

# 標準オブジェクト一覧
|名称|API参照名|
|:-|:-|
|取引先|Account|
|取引先責任者|Contact|
|リード|Lead|
|ケース|Case|
|キャンペーン|Campaign|
|活動予定|OpenActivity|
|商談|Opportunity|
|商談商品|OpportunityLineItem|
|納入商品|Asset|
|契約|Contract|
|注文|Order|
|ソリューション|Solution|
|商品|Product<font color="red">2</font>|
|価格表|Pricebook<font color="red">2</font>|
|アイデア|Idea|
|投票|Vote|
|納入商品|Asset|
|ユーザ|User|
|ToDo|Task|
|行動|Event|

# リレーション関連（主従関係、参照関係）
### 概要
* 親子関係の構築に使用（一対多の関係を構築できる）
* 主従関係、参照関係の2種類があり、それぞれ以下のような特徴がある
    * 主従関係：強いリレーション（積み上げ集計の利用、子レコードの一元管理が可能な一方、階層レベルや連動設定に制限事項が多い）
    * 参照関係：弱いリレーション（動作設定が柔軟で、階層に制限等が無いが、積み上げ集計が利用できない）
* リレーションを構築するには、子レコード上で定義する（子レコード項目に親レコードを紐づける項目を用意する）
* レコードIDによるリンクが行われる（参照先（親）のレコードIDがセットされる）
* 親→子は「関連リスト」で関連するレコードの一覧が表示できる
* 子→親は「ルックアップ項目」として、親レコードの項目値が表示できる（ルックアップ：吹き出しで親レコードの内容がポップアップ表示される機能）

### 主従関係、参照関係の比較
||主従関係|参照関係|
|:-|:-|:-|
|オブジェクトに作成可能な数|2個まで|40個まで|
|複数層の構築|3レベル（親－子－孫－ひ孫）まで|制限なし|
|親レコードの指定|必須固定（親が無いと子は作成不可）|必須指定可（親が無くても子を作成可）|
|ページレイアウトからの削除可否|削除不可（常に必須項目のため）|必須でなければ削除可|
|親レコードを削除した時の動作|自動的に子レコードも削除される|オプション選択可（※後述）|
|アクセスセキュリティモデル|親オブジェクトの設定に従う|子オブジェクトで独自に設定|
|子レコードの所有者の指定|指定不可（親レコードに従う）|指定可|
|積み上げ集計項目の作成|親オブジェクトに作成可|できない
|ルックアップ検索条件|指定可|指定可|
|クロスオブジェクト数式|子オブジェクトに作成可|子オブジェクトに作成可|

##### 参照関係での親レコード削除時の動作（オプション）
以下の３つから選択できる

* 親レコードの項目をクリアする（親不在のレコードになる）
* 親レコードの削除を不可にする（エラーメッセージが表示される）
* 子レコードも削除する（カスケード削除：有効化するにはSFDCサポートに依頼する必要がある）

※主従関係では子レコードは自動的に削除される（強制のため連動動作の選択は不可）

### 子リレーション名の命名について
「子オブジェクトの複数形」で命名することが一般的。
標準項目でも「子オブジェクトの複数形」で命名されている(Contacts、Assets、Casesなど)。
参考：[Salesforce 子リレーション名の命名について](https://qiita.com/TaaaZyyy/items/0fa99584039e3f4ea82c)