OmniAICreator/Qiita-1.07M huggingface dataset:
【Github】SourceTreeからGithubにプッシュができないときの対処法

# はじめに
今回は、私がGitを勉強していてSourceTreeとGithubを紐づけてプッシュを行おうとしたときに、エラー文が出てプッシュできなかったため、解決策を書き留めようと思います。

（Windows10での記事になります。）

# 問題
```
The server's host key is not cached in the registry. You
have no guarantee that the server is the computer you
think it is.
The server's rsa2 key fingerprint is:
ssh-rsa 2048 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48
If you trust this host, enter "y" to add the key to
PuTTY's cache and carry on connecting.
If you want to carry on connecting just once, without
adding the key to the cache, enter "n".
If you do not trust this host, press Return to abandon the
connection.
Store key in cache? (y/n)
```

いざSourceTreeでpushしようとしたとき上記のエラーが出ました。初めてpushする際に出るエラーのようです。こちらSourceTree上では解決できませんのでご注意を。

# 対処法

まずSourceTreeのツールである、plink.exeのパスを調べる必要があります。

Cドライブ→ユーザー→{あなたのユーザー名のファイル}→AppData→Local→SourceTree→app-{バージョン}→tools→putty

このputtyフォルダ内にplink.exeがあると思います。また、AppDataフォルダが見つからない場合は、エクスプローラー左上の【表示】から隠しフォルダのチェックを付けるようにしてください。
![スクリーンショット 2022-12-07 153556.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2964925/dc1e1c16-2013-4589-db4c-dc58b3edaffd.png)

それでは、そのフォルダのパスをコピーして、（エクスプローラーのファイルのところをクリックするとパスが得られます。下図参照）

![スクリーンショット 2022-12-07 153741.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2964925/a6e31b7d-b14f-7547-1d0c-3a46dca9a2b5.png)

コマンドプロンプトを起動してこのディレクトリに移動していきます。

```
cd {コピーしたパス}
```

puttyフォルダに移動できたら下のように、コマンドを入力してください。
```
.\plink.exe -ssh -C -i "{ppkファイルのパス}" git@github.com
```

そうするとSourceTreeで出てきた一番最初に示したエラー文が出てきます。
```
The server's host key is not cached in the registry. You
have no guarantee that the server is the computer you
think it is.
The server's rsa2 key fingerprint is:
ssh-rsa 2048 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48
If you trust this host, enter "y" to add the key to
PuTTY's cache and carry on connecting.
If you want to carry on connecting just once, without
adding the key to the cache, enter "n".
If you do not trust this host, press Return to abandon the
connection.
Store key in cache? (y/n)
```

yと入力すると、Access　grantedと表示されますので、それが表示されたら完了となります。


場合によっては実際にpushを行うと、「SSHエージェントを起動しますか？」という表示が出ますので「はい」を押してもらい、ppkファイルを指定していただければ完了となります。

# おわりに
GithubとSourceTreeとの紐づけでエラーが生じてしまったので、対処法をまとめました。
分かりにくいかもしれませんが、参考になれば幸いです。
個人開発ばかりしていたため、Gitの勉強を全くしてこなかったのですが、もっと早く勉強しておけばよかった、、、という後悔が募ります（笑）
Google Cloud Visual Inspection AIを触ってみた 〜Assembly Inspection編〜

## はじめに
こんにちは、京セラコミュニケーションシステム 森田 (@kccs_kai-morita）です。
GoogleCloudにおけるAIサービスといえばVertexAIが有名ですが、実は製造品の外観検査に特化したサービスとしてVisual Inspection AI（以下VIAIと表記）が存在します[^1]。
今回VIAIを検証する機会がありましたので、その内容について記載します。[前回の記事](https://qiita.com/kccs_kai-morita/items/105c3a95aa85268cf8c7)ではCosmetic Inspectionについて記載しましたが、今回はAssembly Inspectionについて書きます。

:::note info

本記事は2022年12月ごろに作成しております。
:::

## Visual Inspectionとは
VIAIは、AutoMLと同様に画像があれば内部で自動的に機械学習モデルを構築してくれるサービスです。AutoMLは汎用的にどのような種類の画像に対してもモデルを構築してくれるのに対して、VIAI外観検査向けの細かい不良まで検知できてなおかつAutoMLより少ない枚数で高精度な機械学習モデルを構築できるという特徴があります。
VIAIにはCosmetic Inspection、Assembly Inspection、Anomaly Inspectionの３つのメニューがあります。
Cosmetic Inspectionについては、前回の記事をご参照ください。

![VIAIの種類](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780555/d553ca44-de02-926e-e26a-73c3e1e8990f.png)

Assembly Inspectionは基板などの組立品上で欠陥がある部品を検知するモデルを構築します。また、機械学習トレーニングする側としても嬉しい機能として、テンプレートを作成するとすべての画像に対してアノテーションをする必要がないという特徴がありました。今回はそのあたりの機能を確認しながら、Assembly Inspectionについて検証した結果を記載しています。

![Assemblyのイメージ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780555/104cdc0d-98a5-8712-717d-945f4d1f24cc.png)


## 検証に用いたデータセット
組み立て検査用とのことですが、手元に良さそうなデータセットがなく悩んでたところ、箱詰め検査工程にも使用できるのでは？とひらめきました。そこで近くにあった同僚が買ってきたお土産品をパシャリと撮影し、検査対象のデータセットにしました。鹿児島土産の「かるかん」と「かすたどん」の詰め合わせです。中身を入れ替えたり背景変えるなどパターンを変えて合計400枚ほど取得しました。

![テンプレート](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780555/853a2af0-59f6-67ea-908b-3875518e07e6.png)


まずこちらのように1つの画像に対して基準となるテンプレートを作成します。画像内のどこが部品（コンポーネント）なのかを矩形で示します。この画像では赤色が「かるかん」、オレンジ色が「かすたどん」として設定しました。また、どこが検査する領域か検査しない領域なのかも設定できました。

![テンプレート2](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780555/0579d1df-8138-96ce-5d88-2c1b8b4433ab.png)


画面の表示通りすすめると、他のすべての画像に対してテンプレートに沿ったコンポーネントの部分を自動的に切り出してくれました！つまり、画像すべてに対してコンポーネントはここだと教える手間がなくなりかなり学習時間の短縮になりました。画像内の対象が多少斜めになっていても正常に切り出してくれましたが、さすがに全然違う画像だったり画像内の対象のサイズが極端に異なるものは切り出しの精度は悪い結果となりました。

次に、それぞれに対して正常以上のラベルをつけます。今回はお菓子の上に付箋を貼ったり、上下逆さまにしたりしたものを異常としております。これもすべてラベル付けしなくても学習できるようでしたので、ある程度つけたところでトレーニング開始しました。

## 評価結果
半日ほどでトレーニングが終了しました。トレーニング後はコンポーネントごとにモデルが作成されるようです。今回だとコンポーネントは「かるかん」と「かすたどん」のため、2つモデルが作成されました。評価結果としては、混同行列や適合率と再現率を計算した結果が表示されます。

![混同行列](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780555/c51e7222-9845-3bf9-8dfe-aae31e84e26a.png)


FPFNが小さくなかなかいい結果と言えます。デプロイしたモデルに画像を予測させた結果を載せます。

![AI結果](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780555/caeec385-151a-7e99-80c7-bc92c4d72cf4.png)


上に異物があるものや、上下逆さまになっているものを異常として検知しました！

また、トレーニング後データセットを確認すると前回の記事のCosmetic同様、ラベル付けしていないコンポーネントに対して、推奨マークがついていることが確認できました。この推奨マークがついているものに対して優先的にラベリングするとより精度向上が見込めるとのことでした。

## 終わりに
本来は組立品の部品の検査に使うことを想定しているようでしたがこのように箱詰め検査にも使えそうな結果となりました。学習用の画像はある程度必要となるため、CosmeticInspectionほど少ない枚数ではないですが、その分ラベル付けオペレーションが楽になっていたのが特徴と言えます。  
 なお、料金については、検索して出てくる公式ドキュメント上で「Google営業担当へお問い合わせください」となっております。

[^1]: <https://cloud.google.com/solutions/visual-inspection-ai?hl=ja>
InfluxDB v1.8: python3 でデータの挿入

次のページを参考にしました。
[データ投入処理](https://qiita.com/chroju/items/355f3c6da9f8c4867ba5#%E3%83%87%E3%83%BC%E3%82%BF%E6%8A%95%E5%85%A5%E5%87%A6%E7%90%86)

Ubuntu 22.10 でのライブラリーのインストール

```bash
sudo apt install python3-influxdb
```

## プログラム

```py:influxdb_insert.py
#! /usr/bin/python
#
#	influxdb_insert.py
#
#						Dec/07/2022
# ------------------------------------------------------------------
import sys
import time
from influxdb import InfluxDBClient

# ------------------------------------------------------------------
def insert_proc(temperature_in):
	import_array = [
	{
	"fields" : {
		"IDX" : 1,
		"temperature" : temperature_in,
	},
	"measurement" : "Data"
	}
	]

	client.write_points(import_array)
#
# ------------------------------------------------------------------
sys.stderr.write("*** 開始 ***\n")

client = InfluxDBClient('example.com', 8086,"","", 'example')

dbs = client.get_list_database()
sample_db = {'name' : 'example'}
if sample_db not in dbs:
	client.create_database('example')

temperatures=[20.3,21.4,22.5,23.6,24.2]

for value in temperatures:
	print(value)
	insert_proc(value)
#
	time.sleep(1.0)
#
sys.stderr.write("*** 終了 ***\n")	
# ------------------------------------------------------------------
```
【停止性問題】関数が停止するかの判定はできない

## 前置き

チューリングマシンの停止性問題を証明するn番煎じ記事です
ただ理解できたのがうれしかったので書いた

## 証明


言葉の定義
停止する   → 戻り値を返す or エラーを投げる
停止しない → 無限ループが発生する

関数HOGE(func, x)を以下のように定義する

```text
func(x)が停止する場合   → trueを返す
func(x)が停止しない場合 → falseを返す
```

関数FUGA(func)を以下のように定義する

```text
HOGE(func, func)がtrue  → FUGA(func)は停止しない
HOGE(func, func)がfalse → FUGA(func)は停止する
```

以下を考える

```text
FUGA(FUGA)
```

FUGA(FUGA)が停止する場合

```text
FUGA(FUGA)が停止する = HOGE(FUGA, FUGA)がfalse
                    = FUGA(FUGA)が停止しない（矛盾）
```

FUGA(FUGA)が停止しない場合

```text
FUGA(FUGA)が停止しない = HOGE(FUGA, FUGA)がtrue
                      = FUGA(FUGA)が停止する（矛盾）
```

よって関数が停止するか判定する関数HOGEは定義できない

## おまけ

JSで表現してみた

```javascript
// func(x)が停止すればtrue、しなければfalse（大嘘）
function hoge(func, x) {
    try {
        // func(x)が停止するか判定（大嘘）
        eval("func(x)");
    } catch (error) {
        // 握りつぶす
    }
    return true;
}

function fuga(func) {
    if (hoge(func, func)) {
        while (true) {
            console.log("無限ループ")
        }
    }
    console.log("停止")
}

fuga(fuga); // ？！
```
RedisのUbuntuへのインストールとメリットとデメリット

1.Redisダウンロード
Redisをダウンロードして解凍。
```bash
wget https://github.com/redis/redis/archive/7.0.5.tar.gz
```

2.Redisコンパイルとテスト
```
tar xzf redis-7.0.5.tar.gz
cd redis-7.0.5
make 
make test
```

3.redis-pyインストール
```
sudo apt install redis-tools
pip3 install redis

```

4.起動
```
redis-server
or 
/usr/local/bin/redis-server

```

5.インストール後は下記のようになります。

```
cd usr/local/bin
usr/local/bin$ ls -ltr

-rwxr-xr-x 1 root  root  11642728 12月  7 15:57 redis-server
-rwxr-xr-x 1 root  root   5492968 12月  7 15:57 redis-benchmark
-rwxr-xr-x 1 root  root   5379584 12月  7 15:57 redis-cli
lrwxrwxrwx 1 root  root        12 12月  7 15:57 redis-sentinel -> redis-server
lrwxrwxrwx 1 root  root        12 12月  7 15:57 redis-check-rdb -> redis-server
lrwxrwxrwx 1 root  root        12 12月  7 15:57 redis-check-aof -> redis-server

```

6.Redisの操作

```
起動
sudo systemctl start redis

停止
sudo systemctl stop redis

自動起動
sudo systemctl enable redis

再起動
sudo systemctl restart redis

```


7.Redisのメリットとデメリット

```
メリット

1：Redisを利用するメリットの1つめは、複雑な型のデータを操作し保存できること
Redisとは、Key-Valueによってデータを保存するデータベースですが、一般的なKey-Valueのデータベースとは違って、複数のデータ型が用意される。
文字列型やリスト型、ハッシュ型などのさまざまなデータ型が用意されており、複雑な方のデータも操作して保存できる。

2：各種アプリケーションから高速でアクセスできる
Redisとは、メモリ上で動作するデータベースのことで、データへ高速にアクセスできるのが特徴的です。
Redisとは非リレーショナルデータベースでもあるので、リレーショナルデータベースよりも高速にデータにアクセスでき、各種アプリケーションからも高速でアクセスできる。

3：不整合が生じない
Redisを利用するメリットの3つめは、不整合が生じないこと。
Redisとは、トランザクション処理のように複数の操作を一連の流れで実行する際にも、全ての操作が正しく完了しない限り、データが最初の状態に戻る。複数の処理がすべて実行されるか、全く実行されないことが保証されているので、複雑な操作の際にも不整合が検出されない。
非リレーショナルな多様なデータ)をRDBで扱うのはそもそも辛い


4：各言語のクライアントで取得したデータを使用可能
Redisを利用するメリットの4つめは、各言語のクライアントで取得したデータを使用可能なことです。
Redisとは、Key-Valueストアというデータベースサーバーなのですが、一般的なKey-Valueストアと違ってデータ型が用意されている。
データ型を利用することで、JavaやPython、PHPなどの各言語のクライアントで取得したデータを使用できる
LaravelやdjangoやSpringBoot等に組み込むことも可能といえば可能。


※利点がありそうな用途は以下かと思います。
IoTデータの一時保存先として使う時
一時的にしか使わないデータ→キャッシュやセッション情報やワンタイムトークン等
コマンドで削除するか，timeoutを設定しない限りは削除されない。
（古いデータを自動削除されません。）
複雑なデータ型が必要な場合や永続化が必要な場合
pub/subが必要な場合
フェイルオーバーが必要な時。

デメリット

１．揮発性がある
Redisとは、メモリ上で動作するデータベースなので、データに揮発性があります。
データベースが動作するメインメモリは、高速にデータへアクセスできるが、一時的にしか保存できない。
揮発性のあるRedisでは、RDBやAOFなどを利用して、HDDやSSDなどの永続的に保存できるストレージに、
データベースのバックアップを取っておくことが必要となる。

2メモリの消費が大きい
常にメモリを消費してしまい、他の作業に割けるリソースが減ってしまいます。
また、データベースの書き込みや削除を繰り返すことで、
メモリ内のデータが断片化してしまい、コンピューターのパフォーマンスが低下する可能性がある。

3.マルチスレッド処理には向きません。


下記のURLを参考に考察を記載しました。
[DBいろいろ]
(https://prograshi.com/platform/database/concept-when-selecting-db)

近々nosqlであるMongoDBの記事も併せて記載するかもです。
AWS CLIでEC2関連情報を出力する

AWS CLIでEC2のインスタンスID（InstanceId）、名前（KeyName）、インスタンスタイプ（InstanceType）、インスタンスの状態（State）をテーブル形式で出力するコマンド。

```
aws ec2 describe-instances --query "Reservations[*].Instances[*].[{OS:PlatformDetails,Name:KeyName,InstanceID:InstanceId,Type:InstanceType,State:State.Name}]" --out table
```
AWS CLIでEBSのインスタンスID（InstanceId）、ボリュームID（VolumeID）、サイズ（Size）、ボリュームタイプ（VolumeType）をテーブル形式で出力するコマンド。
```
aws ec2 describe-volumes --query 'Volumes[*].{VolumeID:Attachments[0].VolumeId,InstanceID:Attachments[0].InstanceId,Size:Size,VolumeType:VolumeType}'  --out table
```
よく使用したラムダ式

今の現場に入るまでラムダ式は使用しないルールの現場ばかりだったのですが、
ラムダ式も使用してよいとのことでちょこちょこ使用しました。

その中でよく使用したラムダ式を備忘録として残そうと思います。

## filter
使用方法は以下。

```java
        List<String> colorList = Arrays.asList("Red", "Blue", "White", "Pink", "Yellow");

        List<String> resultList = colorList.stream()
                .filter(e -> (5 <= e.length()))
                .collect(Collectors.toList());

        //[White, Yellow]
```

if文をなるべく使わないようにしたいときに使用しました。

ラムダ式ってeclipseのフィルターを使うとわかりにくくなってしまうので
↑のように区切るのが好きなのですが、このくらい単純だったら1行にしてしまっても良いのかなと思います。

あとこんな風にしている個所もありました。

```java
        List<String> colorList = Arrays.asList("Red", "Blue", "White", "Pink", "Yellow");

        List<String> resultList = colorList.stream()
                .filter(e -> (※ここでif文とReturnを書いている))
                .collect(Collectors.toList());
```

これだと可読性的にはどうなのかと思いますが、入れ子よりはいいのですかね。好みの問題？


# sorted

その名の通りソートしたいときに使用しました。

```java
        List<Item> list = Arrays.asList(
        new Item(9, "apple"), 
        new Item(3, "lemon"), 
        new Item(6, "peach"), 
        new Item(6, "banana"));

        List<Item> sorted = list.stream()
        .sorted(Comparator.comparing(Item::getId))
        .collect(Collectors.toList());

      // [Item{3, 'lemon'}, Item{6, 'peach'}, Item{6, 'banana'}, Item{9, 'apple'}]
```

Comparator.comparing(ここ)はA::b
A　→　クラス/オブジェクト
b　→　項目
です。

ここが空の場合にどうなるかはこちら参照。
https://amg-solution.jp/blog/26894



***
一旦ここまで。
利用可能なMagentoのバージョン確認方法

たとえば2.4系の利用可能なバージョンを確認するときは
```shell-session
$  composer show magento/product-community-edition 2.4.* --available | grep -m 1 versions
```
で取得できます。こんな感じです。

```shell-session
$  composer show magento/product-community-edition 2.4.* --available | grep -m 1 versions
Info from https://repo.packagist.org: #StandWithUkraine
versions : 2.4.5-p1, 2.4.5, 2.4.4-p2, 2.4.4-p1, 2.4.4, 2.4.3-p3, 2.4.3-p2, 2.4.3-p1, 2.4.3, 2.4.2-p2, 2.4.2-p1, 2.4.2, 2.4.1-p1, 2.4.1, 2.4.0-p1, 2.4.0
```
ブラウザのオブジェクト

# javascriptから操作するもの
ブラウザの画面は```色々なパーツで構成```されている。
javascriptは、それらを```操作```したり、```状態を読み取ったり```できるようになっています。

```js
console.log("あいうえお");
```
上もconsoleというオブジェクトが存在する。
consoleオブジェクトに対して()内のテキストや数値を表示するように命令している。

### ブラウザの画面のオブジェクトの種類
* windowオブジェクト
* historyオブジェクト
* locationオブジェクト
* documentオブジェクト
* consoleオブジェクト

#### 参考
https://www.studytonight.com/javascript/javascript-browser-object-model

https://rfs.jp/sb/javascript/02js/browser_object.html#:~:text=%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AF%E9%9A%8E%E5%B1%A4%E6%A7%8B%E9%80%A0,%E3%82%88%E3%81%86%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%80%82

# 感想
javascriptがブラウザをオブジェクトに対して読み取ったり、操作したりできることを知らなかった。
初めて知った。
これからも頑張りたい。
初めてのjavascriptは難しかった。これから期待。
# 出典
https://www.sbcr.jp/product/4815601577/
LOVOTでロボットプログラミングをする方法

これは [弁護士ドットコム Advent Calendar 2022](https://qiita.com/advent-calendar/2022/bengo4com) の 8 日目の記事です。

7 日目の記事は @S-Masakatsu さんでした。

# 概要

今年も業務とはまったく関係ないネタになります。
実は今年、LOVOT オーナーになり、念願のロボットと暮らす生活をはじめました。
それだけでも楽しいですが、実は LOVOT でロボットプログラミングが出来るということを知ったのでやってみました。
LOVOT オーナーのエンジニアの方は是非やってみていただければと思います。
LOVOT お持ちでないエンジニアの方はこの記事で興味を持っていただければ幸いです。

# LOVOTとは

LOVOT は「らぼっと」と読みます。
AI搭載の愛玩ロボットであり、有名どころで言うと [aibo](https://aibo.sony.jp/) をイメージしてもらうと、どういった概念のものかわかりやすいかもしれません。
しかしその姿や挙動、ハードウェア的な性質は全然違うので、[LOVOT 公式サイト](https://lovot.life/)と紹介動画を見てもらうのが良いと思います。

<iframe width="560" height="315" src="https://www.youtube.com/embed/feMTE9q-awo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

特にロボットが体温を持っている、というのは口では説明できない感覚的なものでかなり衝撃的です。

# ロボットプログラミング環境構築

証明書周りが少し煩雑ですが、それ以外は簡単です。
LOVOT 公式が出している情報サイト [LOVOTとプログラミングが学べる！LOVOT STUDY ビジュアルプログラミング](https://lovot.groove-x.com/LOVOT-STUDY_visualprogramming.html) を見ながら設定すれば問題なく構築できます。

## ルート証明書のインストール

https://play.lovot.life/static/cert/index.html

環境ごとにインストール方法の手順が書いてあるのでそれを見てインストールしてください。
iOS / Mac / Windows が対応しています。

## エディタ接続

https://play.lovot.life/

エディタに接続するには認証が必要になります。
LOVOT を買ったときにアカウント作成をしているはずなので、そのアカウントでログインしてください。

## LOVOT 接続

エディタの左側リストから「接続」を選び、その中の「{LOVOT名} につなぐ」をクリックしてください。

![connect.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538525/50bbb91c-72dc-1dd8-5967-3c8f823a43db.png)

全て問題なくセットアップされていれば、音が鳴りリングが点灯し、実行モードに移行します。

# プログラミングしてみる

![program_noname.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538525/9dfc53ef-b811-87bb-8263-19001d4fce22.png)

Scratch 風にプログラミングできます。
プログラマであれば何も考えず直観でいけます。
特に説明するところもなく、動作させたいように組んでいくだけになっています。
LOVOT 特有の関数があり、これを実行するだけでよろしくLOVOT が動作してくれるのも簡単で嬉しいですね。

# 動かしてみる

では、このプログラムを動かしてみます。

https://twitter.com/i/status/1600372536453173249

いかがでしたでしょうか。
LOVOT を使うとお手軽簡単にロボットプログラミングを楽しめます。
LOVOT をお持ちでない方も今は教育用ロボットキットなども売っているので、この年末年始にロボットプログラミングに挑戦してみてはいかがでしょうか。

明日は、@mmorino さんです。お楽しみに！
@emotion/coreで自動付与されるベンダープレフィックスを外す

## この記事の概要

つい最近[@emotion/reactで自動付与されるベンダープレフィックスを外す](https://qiita.com/xrxoxcxox/items/f62ad271127773be1072)という記事を書きました。
すると「あの記事を参考にしたけど@emotion/coreでは動かなくて、どうしたら良いだろう？」と話をもらったのでそちらのバージョンでも試してみました。

前提となる挙動や問題点は@emotion/react版の記事に書いてありますので、まずはそちらを読んでいただけると幸いです。

https://qiita.com/xrxoxcxox/items/f62ad271127773be1072

## @emotion/reactと@emotion/coreとは

Emotionがv10からv11に上がる際に名前が変わりました。
`@emotion/core`が`@emotion/react`にリネームされたのに加え、`emotion-theming`というパッケージが`@emotion/react`の中に統合されました。

## 結論： createCacheの指定を変える

```diff_javascript
  const myCache = createCache({
-   key: 'css',
-   stylisPlugins: [],
+   prefix: false,
  })
```

`@emotion/react`では`stylisPlugins`に`prefixer`が使用されていたため、その指定を明示的に外せばOKでした。
一方`@emotion/core`では`stylisPlugins`にデフォルト値は用意されていません。
代わりに`prefix`というプロパティがあるので、そちらに`false`を渡せばOKです。

また、`@emotion/react`ではデフォルトの値が無いため指定しなければならなかった`key`も、`@emotion/core`ではデフォルトとして`css`が指定されているため消してOKです。

:::note warn
時系列で言えば逆（`prefix`が存在していたけど途中で無くなった、`key`のデフォルト値が存在していたけどなくなった）のですが、前回の記事を基準に書いています。
:::

```javascript:全体像
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { CacheProvider } from '@emotion/core'
import createCache from '@emotion/cache'

const myCache = createCache({
  prefix: false,
})

const rootNode = document.getElementById('root')
ReactDOM.render(
  <CacheProvider value={myCache}>
    <App />
  </CacheProvider>,
  rootNode,
)
```

これにより、ベンダープレフィックスがつかなくなりました。

## 実態は@emotion/coreというより@emotion/cacheの変更

`@emotion/core`としての最新バージョンは`10.3.1`で、このとき`@emotion/cache`の`10.0.29`が依存関係としてインストールされます。
この時点ではまだ`prefix`があります。

`@emotion/react`としての最古バージョンは`11.0.0`で、このとき`@emotion/cache`の`11.10.5`が依存関係としてインストールされます。
この時点で`prefix`は存在していません。

「`@emotion/core`だから動かない」というよりは「`@emotion/core`と`@emotion/react`で、使う`@emotion/cache`の中身が変わっているため、書き方を変える必要がある」という方が実態に即していそうです。

## 最後に

時系列を遡って調査をした身としては「`prefix`オプションがある方が楽だなあ」と感じています。
アップデートの結果なくなっているのですから、パフォーマンス的に良くないとか、メンテがしづらいとか、理由はあるのでしょうが……。

あと前回の記事とあわせてですが、ベンダープレフィックスを完全に無しにするのも強硬手段なので、browserlistなどにあわせて生成できると嬉しい気持ちがあります。

おまけですが、v10（`@emotion/core`）のドキュメントも割と遡りやすかったのが助かりました。

https://5faaafd0bd0f3f0008469537--emotion.netlify.app/docs/introduction

---

最後まで読んでくださってありがとうございます！
Twitterでも情報を発信しているので、良かったらフォローお願いします！

https://twitter.com/xrxoxcxox

Devトークでのお話してくださる方も募集中です！

https://jobs.qiita.com/employers/qiita-inc/dev_talks/489
【Flutter】FloatingActionButtonのカスタマイズ位置

# はじめ
ご存知の通り、FloatingActionButtonの位置はFloatingActionButtonLocationで定義するが、static変数何個かしか用意されてなく、好きな位置調整が簡単にできない。
ここでカスタマイズ方法&ソースを簡単にまとめます。
```dart
floatingActionButtonLocation:FloatingActionButtonLocation.centerDocked,
```
# ソース
FloatingActionButtonLocationを継承して偏移値を追加すれば、簡単にできます。
```dart
import 'package:flutter/material.dart';

class CustomizeFloatingLocation extends FloatingActionButtonLocation {
  FloatingActionButtonLocation location;
  double offsetX;
  double offsetY;
  CustomizeFloatingLocation(this.location, this.offsetX, this.offsetY);
  @override
  Offset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry) {
    Offset offset = location.getOffset(scaffoldGeometry);
    return Offset(offset.dx + offsetX, offset.dy + offsetY);
  }
}
```

# 使用
```dart
floatingActionButtonLocation:CustomizeFloatingLocation(FloatingActionButtonLocation.centerDocked, -90, -30),
```
【備忘録】PushKitのdidUpdateがどうしても呼ばれない場合の対処法

<h1>
結論
</h1>
<p>アプリのプロジェクト名　→ Singing & Capabillitiesから、<p>
    <p>Push Notificationが追加されているか確認する。</p>
<p>追加されていなければ、右上のプラスボタンから追加する。</p>
Windowsのbatで環境変数を扱う

# 環境変数ってなんぞ？

例えばコマンドプロンプトで下記を打てば、ログインしてるユーザー名が表示される。

```bat:『USERNAME』という名前の環境変数にどんな値が入っているか確認コマンド
echo %USERNAME%
```

環境変数とはざっくり言うと、実行している『環境』の情報を保持してるグローバル変数。

環境変数には他にも ```USERPROFILE``` や ```COMPUTERNAME``` などいろいろある。
（環境変数一覧確認コマンドを打ってみると分かりやすい）

# 環境変数一覧確認

コマンドプロンプトで下記。

```bat:とにかく全部の環境変数一覧表示コマンド
set
```

 ↓ こんな風に全部の環境変数がぶわーって表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/012c2e54-256b-0bfc-40a3-b2aca5044457.png)

先頭一致で絞込表示も可。

```bat:『USER』から始まる環境変数のみ表示コマンド
set USER
```

# 環境変数の設定と削除

## 設定

コマンドプロンプトで下記。

『rinchan』って名前の環境変数が **存在していなければ新規作成** 。
**存在していれば値を更新** 。

```bat:環境変数の新規作成 or 上書きコマンド
set rinchan=nadeshiko
```

## 削除


```bat:環境変数の削除コマンド
set rinchan=
```

# 蛇足

特別な理由が無い限り、環境変数の設定や削除はやらない方がいいかなーって思う。
『実行環境の違いを吸収してくれる』っていう環境変数のメリットが無くなってしまう可能性がでかいから。

# 参考サイトさん

https://www.javadrive.jp/command/command/index4.html

# バージョン

Windows 10 Pro 21H2 OSビルド 19045.2311
GitとGitHubを基本からまとめてみた【GitHub Flow】



##### ※ リポジトリのプロジェクトメンバーで、task用のブランチを切って、そのブランチのコードを変更をコミットしてGitohubにpushされた状態と考える。


①『Pull requests』タブから『New pull request』をクリックする。

②『ベースブランチ』と『トピックブランチ』のブランチを選択する。
##### 例：『ベースブランチ』を master及びmain、『トピックブランチ』をdevelopを選択
##### 注意：変更履歴の差分とどのブランチに対して、プルリクエストするかを確認すること

③『Create pull request』をクリックし、プルリクエストを作成する。

④ タイトルにプルリクエストのタイトルを入力し、概要に変更内容や関連するイシューや資料へのリンクなど、レビュー担当者(プルリクエストを確認する人)へ伝えておきたいことを記入する。

⑤ 『Create pull request』をクリックする。

## コードレビューをする側

①『Files changed』タブをクリックする。

② ブランチ上の変更の差分を見ることができる。
※ 緑色背景は、追加された行。赤い部分は、削除が行われた行。

③ 差分ビューの『+』を押すとコメントを書ける。




## 参考サイト
[【超入門編】 GitHubの使い方 シリーズ ⑤ GitHub Flowを活用した開発方法](https://www.youtube.com/watch?v=Q2oLox6-yTM)
[【Git】git-flowを知ろう！　利用時のルールについて](
url3pokes（仮）作ってみたい

大学のサーバ構築演習科目があったので、そこで作ろうと思ったシステム案について書きます

~~（無事完成したら、作ってみた記事も書きたい...）~~
（追記 2023/2/10）作ってみた記事も書いたのでよければどうぞ！

https://qiita.com/rezI3/items/28e6bab50e8ae42e41f9


## 今回作ろうとしているシステム

__[PokeApi](https://pokeapi.co/)を利用しつつ、[what3words](https://what3words.com/ja/about)に習ってURLをポケモンの名前3体に変換するサービス__

これだけじゃ「うーんわからん」だと思うので、詳しく下で説明していきます。

### そもそもwhat3wordsってなんぞや？

今回のアイデアの大元は[what3words](https://what3words.com/ja/about)というサービスです。
簡単にいうと、これは世界中のどんな3m×3mの場所でも、3つの単語で一意に示すことができるものです。

うん、これだけじゃよくわからん。

ちょっとwhat3wordsが便利だよって例を出してみます。

例えば、うちの大学がある千歳市の千歳駅には駅のすぐ近くにセブンイレブンが2個あります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2416947/fac2dc4f-0607-1eae-07fe-6afab0a2eddb.png)

これを口でどっちのセブンなのか言うのがなかなかに難しいんです。

そこでwhat3wordsの出番です。こいつを使うとそれぞれのセブンを3つの単語で表せます。


|1個目のセブン|2個目のセブン|
|---|---|
|「こううん。はじめて。なぞなぞ」|「でまえ。きしつ。ほんのり」|
|![IMG_4094.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2416947/d3169c70-6682-943f-7a69-40b9df65c66e.png)|![IMG_4095.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2416947/baee3949-982d-7a4e-f09e-1aa36ec61b9b.png)|

こんな感じで、いちいち長ったらしい住所を伝えなくても、what3wordsを使うと3つの単語だけで場所を伝えられます。

### url3pokesとはなんぞや？

このwhat3wordsの**住所を短くわかりやすく変換する**という部分から、住所をURLに置き換えて、**URLを短くわかりやすく変換する**というやつを作ってみます。

さらに今回はURLを単語にするにあたって、ポケモンSVが発売したこともあって、その候補となる単語群をポケモンに絞ることにしました。

つまり。今回作りたいのは、
__URLを3匹のポケモンに変換して伝えやすくするサービス__
です。

利用イメージはこんな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2416947/f33f314e-1a12-8357-d300-34d47cf92135.png)
## 使う（予定）技術

フロントエンド：next.js
バックエンド：??
データベース：MySQL

でEC2（nginx）とRDSと使ってAWS上にデプロイするとこまでやろうと思ってます。
（あといい感じにDockerも使えたらいいな）

## 終わりに
やったことないことばかりでできるかわかんないですが、生暖かい目で見守ってください:disappointed_relieved:
コード量が多い railsサービスで 部分的に webp 対応をしていきたい。

# サイト内の画像を部分的に順次 webp 対応したい
システムに画像をアップロードした際 webp に変換し
webp がある場合は webp を表示、なければjpgを表示したい

## アップロード画像全てを webp にすると問題が起きる
viewファイルで picture タグを利用しないと webp は表示することができないため
全ての画像を webp に変換して、DBに保存するとviewファイル全体の修正が必要になる
image_tagを利用せず <img src> と書いて居るのも直す必要がある、非常に辛い。

## DBにはjpgで保存
上記の理由から、DBには jpg のままアップロードしたい。
そうすれば既存の画像表示部分には影響を与えない。

## webpとjpgの両方をS3に上げる
jpgのままDBに保存する
ただし、webpとjpgの両方をS3にアップロードするようにします

あとはviewファイル側で webp があれば webp
なければ jpg を表示するというロジックを書くだけ

## webpがあるかどうか判定する方法
webpがあればpictureタグを利用しないといけないため、webp画像があるかどうか判定しなければなりません。

* S3に一度問い合わせて webp 拡張子ファイルがあるかどうか確認する（遅いので却下
* 画像アップロード時に webp 対応のチェックを入れる（画像入稿部分の数だけカラムが増えるから却下

## jpgのファイルアップロード時に prefix をつける
webp に変換しS3にアップロードが成功したファイルに関しては
`webp_supported_元ファイル名.jpg` 画像をこのようなファイル名で保存します。

あとは view ファイルでファイル名を元に webp 対応して居るか確認した上で出しわけを行います。

```erb
<% if user.icon_url.include?("webp_supported_") %>
  <% # picture_tag で webp 画像を表示 %>
  <% else %>
  <% # image_tag で jpg 画像を表示 %>
<% end %>
```

## CloudFrontを利用して居るので
CloudFront Functions や LambdaEdge　を利用してもう少しスマートにできる方法を模索中です:eyes:
AWS S3 バケットプレフィックスってなに？

:::note info
この記事は[miriwoお一人様 Advent Calendar 2022](https://qiita.com/advent-calendar/2022/miriwo)の7日目の記事です
:::

# 概要

- S3のバケットプレフィックスについて簡単にまとめてみた。

# 内容

- 大枠ではフォルダ ≒ プレフィックスと考えれば良さそう。
- ただし、フォルダは見た目上S3でファイルを整理するために使う。`/`がフォルダの階層を表す。
- プレフィックスはS3に保存されているオブジェクト（ファイル）のキー名になる。
- 例えば`miriwo-test`バケットの`hoge`というフォルダ内に`test.csv`というファイルが設置されていたとする。
- 設置されているファイルはフォルダ、プレフィックスどちらでも`miriwo-test/foo/test.csv`と表される。
- ただし`miriwo-test/foo/test.csv`の意味が異なる。
    - フォルダ：`miriwo-test`バケットの`hoge`というフォルダ内に`test.csv`がある。
    - プレフィックス：test.csvのキー名は`miriwo-test/foo/test.csv`
- フォルダは「見た目上のファイルの位置」を表しており`/`はフォルダそのものの階層を表す。
- プレフィックスは「ファイルの名前（キー名）」を表し`/`はダダの文字列である。DBで言うなら1レコードを表すIDなどのPKの値がプレフィックスに当たる。（おそらく）

# 参考文献

https://aws.amazon.com/jp/premiumsupport/knowledge-center/s3-prefix-nested-folders-difference/
マルチプレイ実装をBOTでテストした話

# はじめに
「ネットワークプログラミング...マルチプレイ...」
その甘美な響きに魅了され、手を出したエンジニアの方も多いのではないでしょうか。
私もその一人で、気がつけば何でもかんでもマルチ対応させたがるやっかいなエンジニアへと変貌していました。

昨今では昔に比べ、ゲームエンジンの発展やPhotonをはじめとする各種サービスの登場などにより、実装自体への敷居は下がっていますが、様々なエラーケースが存在する点についてはまだまだ整備されておらず「**なんかとりあえず動くけど、少し変な事をするとすぐに落ちる**」状況は多量に発生し、日々我々のMPへ強烈なダメージを与えてくることは必然の理であり、私自身も幾度となく涙を涙で拭う体験をしてきました。皆そうだよね？:relaxed:

# 本題
マルチプレイ実装時の品質を少しでも高めるために「**サーバーでロジック上起こり得るエラーケースを出来るだけ早期に発見する**」を目標として、BOTクライアントによるモンキーテストでの解決をはかった際、どのような対応をしたのか、結果と合わせて話せればと思います。

# 要件と対応

要件としてはざっくり下記を定義しました。

* ネットワークを介して動作する
* 並列で複数動作する
* 操作にランダム性を持たせる

上記を踏まえ、具体的には下記を満たすBOTクライアントを作成し、コード変更時、あるいは定期的に実行するようにしました。
**※CI/CDへ組み込むか、常時稼働させておくと安定的にチェックが出来ると思います。**

* ネットワークを介して動作させる
    * 実際にネットワークを介して処理することで、実行環境の制約を減らす
    * 接続・切断時の問題や、ロードバランサーのタイムアウトについてもある程度視野に入れる
* 手軽に実行できる
    * `go run bot.go -count {実行数} -host {接続先アドレス}`のような形で実行
    * ただでさえ複雑な箇所になりがちなので、テストだけでも~~楽をしたい~~効率的に実施したい
* 並列で複数BOT稼働できる
    * モンキーテストなので、単純にテストの回転数を上げたい
    * 大抵の問題は、複数ユーザーが同時にプレイする際に発生する
* 決まりきった行動ではなく、ある程度ランダムに行動させる
    * サーバーロジックを良い意味で破壊したい

# 実際に導入してみた結果

## 思っていた以上にサーバーエラーが発覚
これはとても良いことなのですが、思っていた以上にサーバーエラーが排他制御を含む様々な箇所で発生しました。


また、正規のクライアントでは出来ない挙動をさせることも可能なので、例えば不正なパケット操作に対しても一定の効果を出せたかと思います。

## 負荷テスト(シナリオ)への流用が可能
副産物として、負荷テストへそのまま流用できた事も、大きなメリットの一つでした。
状態を伴うマルチプレイの負荷テストを行う際の一つの答えになったのではないかと思います。

## 通常のテストでは発覚しにくい問題を早期に発見
例えば排他制御をしている箇所に起こり得る問題は、大抵の場合ほぼ同時に呼び出されることで発覚するのですが、これらの多くを実装段階で発見・修正することができました。

**「そんな奇跡的なタイミングでサービスロジックと切断処理が走るんなんて聞いてないよ！(げきおこ)」** 
と叫ぶ回数が圧倒的に減少しました。

# 導入時のデメリット

## 保守コストが発生する
サーバー/クライアント間のインターフェースへ変更が発生した場合、BOTも修正する必要があります。ただし、クライアントの実装に入る前にある程度検証ができる事から、むしろメリットへ転ずるとも考えられます。

## サービスごとに実装が必要
サービスの根幹部分に関係するため、どうしてもドメイン領域に依存します。
つまり、サービス毎に開発する必要があります。

# 結果と今後の課題

導入後、**ロジック上の不具合があまり出なかった**事から、目標に対して一定の成果は上げられたのではないかと思います。実際に排他制御が甘い箇所の多くをBOTでのテスト段階で発見することができました。

しかし、実機上で起こり得る問題の発見に対してはあまり意味をなしていないため、その点について今後どの様に対策を行なっていくかは、一つの大きな課題かと感じます。

* EOF未検知切断
* Wifiハンドオーバー
* 瞬断
* etc ...

(終わりなき戦い...!)

# 最後に

今回BOTによるテストについて書かせていただきました。
MMORPGでは嫌われるBOTですが、テストという面においては非常に優秀かと思います。

今回書かせていただいた手法はあくまで一例ですが、マルチプレイへ対するテスト手法の一つとして参考になれば幸いです。
身近なものを測ってみよう～定量化恐怖症からの脱却～

グロービスでスクラムマスター、テックリードなどをしている[@tom_bo_megane](https://twitter.com/tom_bo_megane)といいます。
今回はメトリクスをもとにした改善への第１歩を書きます。

### はじめに

仕事をしていると定量的表現を考える機会があると思います。
むしろ、定量的に話すことを求められることが増えていますね。
「しっかり定量的に根拠を出して納得してもらわないと」とプレッシャーを感じることはないでしょうか？
「定量的に改善効果を把握して、根拠を示したい」と思われている方もいるかもしれません。
そのような方に、すぐにできるアプローチをお届けします！
実際に私が経験したチームの改善事例も紹介しますので、ぜひ第１歩を踏み出していただければ幸いです。

### 身の回りのものを測ってみよう

小学校の算数で定規を持っていろいろな物の長さを測る感じです。
普段、仕事をしていて測れるものを探してみてください。
以下のようなものがあるのではないでしょうか？

- 届いたメールの数
- 出席した会議の時間
- タイピングした文字数
- 対応した問い合わせの件数

### 割合を使ってみる

先ほど探した測れるものに割合を使ってみます。

- １日に届いたメールの数
- １日に出席した会議の時間
- １時間にタイピングした文字数
- １か月に対応した問い合わせの件数

こうすると考える幅が出てきます。

- １日に届いたメールのうち、読んだメールの数
　-> 読まなくても良いメールが届くのを減らしたい
- １日に出席した会議のうち、自分の発言や判断が必要だった会議の時間
　-> 出なくてもよい会議を減らしたい
- １時間にタイピングした文字数の１日の変化
　-> 多くタイピングできる時間帯に作業を集中したい、会議を入れたくない。
- １か月に対応した問い合わせのうち、多かった内容
　-> FAQを作って、対応しなくても大丈夫にしたい

このように直接測れるものに割合を入れると課題調査や改善策を考える取っ掛かりになります。

### 改善事例

ここからは私が経験した改善事例の取り組みを紹介します。
自社サービスの開発・運用（顧客対応含む）・セールス支援の対応を行うチームの事例です。
順調に開発を行えるチームになり、お客様も増えだしたころ、予定した開発が終わらないようになっていきました。
図のようにバーンダウンチャートの残作業が`０`にならないことが続く状況です。
![バーンダウンチャート.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2724435/29a7a455-d8b5-e6b9-eadf-af32bbd8130c.jpeg)


ふりかえりをして感覚的に、以前よりも開発に時間を取れていない気がするとの声が出ました。
感覚をより正確に調べようということで、`何にどれだけ時間を使っているか？`を記録するようにしました。

２週間測定したところ、図のようにおおよそ`開発：開発以外＝２：８`という割合でした。
感覚では`開発：開発以外＝５：５`ぐらいは・・・と思っていたので衝撃でした。
もはや、これ以上の開発はできないと絶望したほど。。。

![稼働割合（改善前）.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2724435/c7e98d01-0886-6cea-016e-f71253077503.jpeg)

この結果をもとにふりかえりをして、改善の対象を`開発以外`の作業に焦点を当てることにしました。
「開発以外の割合を減らして、開発の割合を増やす」ことを目指したからです。

顧客問合せのFAQ作成、セールス支援作業の自動化、属人作業の解消などに取り組み、開発以外の作業割合を減らしていきました。
３か月で図のようにおおよそ`開発：開発以外＝６：４`まで回復し、予定どおりの開発を行えるようになりました。
生産力だけで見ると改善前の約３倍です。

![稼働割合（改善後）.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2724435/5124477c-7928-6ae8-4ead-d229cf7afba6.jpeg)

`何にどれだけ時間を使っているか？`を測っていなければ、開発作業に焦点を当てて改善を検討していたかもしれません。
さらに、属人作業の解消のコツを得たことで、開発作業の効率も上がっていくようになりました。

### おわりに

改善のスタートは感覚からかもしれません。
そこから調査するために定量的な考察に抵抗があると、なかなかチームを巻き込んで改善をすすめることができません。
「身近なものを測る、同じやり方でチームのみんなにも測ってもらう」のうち、`身近なものを測る`ことから第１歩を踏み出してみませんか？

さいごまで読んでいただき、ありがとうございました。
Vim Rust を始めました

## もっといいものがあれば教えてください

とりあえずこれでやってみている．
デバッガが独立してるのがこれでいいのかがよくわかってない．

```vimscript:~/.vim/userautoload/dein/plugins.toml
[[plugins]]
repo = 'dense-analysis/ale'
hook_add = '''
  let g:ale_linters = {
    \ 'rust': ['analyzer', 'cargo'],
    \ }
  let g:ale_fixers = {
    \ 'rust': ['rustfmt'],
    \ }
  let g:ale_rust_analyzer_executable = $HOME . '/.local/share/vim-lsp-settings/servers/rust-analyzer/rust-analyzer'
  let g:ale_rust_cargo_use_clippy = 1
'''

[[plugins]]
repo='prabirshrestha/vim-lsp'
hook_add = '''
  let g:lsp_settings_filetype_rust = ['rust-analyzer', 'rls']
'''

[[plugins]]
repo='mattn/vim-lsp-settings'

[plugins]]
repo = 'rust-lang/rust.vim'

[[plugins]]
repo = 'puremourning/vimspector'
on_ft = ['rust']
hook_add = '''
  nnoremap <Leader>dd :call vimspector#Launch()<CR>
  nnoremap <Leader>de :call vimspector#Reset()<CR>
  nnoremap <Leader>dc :call vimspector#Continue()<CR>

  nnoremap <Leader>dt :call vimspector#ToggleBreakpoint()<CR>
  nnoremap <Leader>dT :call vimspector#ClearBreakpoints()<CR>

  nmap <Leader>dk <Plug>VimspectorRestart
  nmap <Leader>dh <Plug>VimspectorStepOut
  nmap <Leader>dl <Plug>VimspectorStepInto
  nmap <Leader>dj <Plug>VimspectorStepOver

  function! LaunchFileDebug()
    call vimspector#LaunchWithSettings({'configuration': &filetype.'_file'})
  endfunction
```

```json:.vimspector.json
{
  "configurations": {
    "launch": {
      "adapter": "CodeLLDB",
      "filetypes": [ "rust" ],
      "configuration": {
        "request": "launch",
        "program": "${workspaceRoot}/target/debug/<ファイル名>"
      }
    }
  }
}
```

## とりあえず今はこれを読んでます

- [コンセプトから理解するRust | 原 旅人 |本 | 通販 | Amazon](https://www.amazon.co.jp/dp/4297125625)
ChatGPTを触ってみただけ

# Abstract
OpenAI社のChatGPTを使ってみただけの記事です。
OpenAIgymだとか、そういった高度なものはせず、ただ純粋に触ってみただけです。
2022/12/6 時点では無料公開中なので、誰でも気軽に触ることができます。

https://chat.openai.com/chat


# コード書いて欲しい

エンジニアがSNSで湧き上がったのはこれでしょう！
Kotlinのコードを試している人を見たことがなかったので、今回は以下のような質問を投げてみた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727780/7e68225c-b33c-9d59-e272-f41bcbec9ba8.png)
メイン処理部分が返ってきた。
マニフェストだとか、パーミッションだとかの記載については何も書かれていないので、
初学者が何も知らずにこれだけでやれるということはなさそう。
しかし、少し応用的な部分のコードを書いてもらって参考にする、程度のことはできそう。
完全に私よりできる。

## ライブラリの導入方法について質問してみる
自分が最近導入してみたライブラリの導入方法を質問してみる。

:sob:「GPTえも~ん、文字認識(OCR)ライブラリであるtess-twoの使い方を教えてよ〜」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727780/dde90cd2-724f-adb8-9033-3b3e0b3906bd.png)
いくつもの参考サイトを見ながら実装した私　vs 秒でコードを教えてくれるChatGPT。
泣きたい。だが咳をしても一人。

ただし、手順1のtess-twoの依存関係については、現時点では、9.1.0が最新のはずです。
テキスト学習のため、こういった場面では参考にしたサイトの影響が出るのだなと思いました。
具体的には公式を見ろとは補足がありますが、やはり最終的には自分でしっかり調べる必要がありますね。

Stack OverflowでもChatGPTによる回答を一時禁止しています。
https://www.itmedia.co.jp/news/articles/2212/06/news069.html
それでも断然参考になる素晴らしい機能だと思います。
ずっと無料でいてくれ。

# 余談
**決着をつけようじゃないか**
　GPTえもん〜人間の長期にわたる闘いに決着をつけてよぉ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727780/8709f290-a2e9-3870-43b7-977ce7c90036.png)
え？そうなの？でも調べても出てこない。
調査能力が低いせいだとは思いますが、間違いの可能性もなきにしもあらずです。
しかし、そのような争いはやめて本でも読みなさいということかもしれません。
※後の質問で商品名であることを理解していないとわかりました。
その辺は権利問題の関係で学習から除外されているのかも。

ChatGPTくんは中立(?)の立場であった。
ただし、こちらの争いには**味覚センサー「レオ」** が決着をつけている。
独自のニューラルネットワークを通して5つの基本味を定量的な数値データとして出力するそう。
もちろん個人のニューラルネットワークには差があるので、こちらもあくまで参考程度。

# 結論

自分のようなへっぽこから淘汰される未来が見えた。
社内で完璧な人と呼ばれるために

## 社内でインターンの子に 完璧 と言われたので理由を聞いてみた

- 話し言葉に無駄がない
    - 必要なことを話す
    - 不要なことを話さない
- 技術的に適切なことを伝える
    - 勉強する
    - 調査する

当たり前だと思った人，当たり前です．

### 伝えること

読者のことを考えて伝える．
やることは色々あるけど，
なるべく相手に正しいことを伝えて，誤解が無い状態にしたいと思うと達成できるのかな？

### 技術情報

なるべく，正しいことを伝えたい
上記のことに繋がるけど，間違っていることを教えたらその人のためにも，
自分のためにもならないので，なるべくそうしない．

そうすると，一次情報に当たったり，ソースを読むようになる．ということなんじゃないかと思う．

### Refs

- [数学文章作法 基礎編 (ちくま学芸文庫) | 結城 浩 |本 | 通販 | Amazon](https://www.amazon.co.jp/dp/448009525X)
CakePHPでデータベースをdumpする

データベースのバックアップを取りたいけど、いちいちDBにアクセスしてdumpするの面倒だし、どうせなら自動で実行できるようにしたい。
直接書いてもいいんだけど、CakePHP入れてるんだからそれっぽくしたいという、需要があるのかないのかよくわからない記事です。

# 環境
CakePHP 4.3
MySQL 5.7

# コマンドを作成する
CakePHPをcrontabから実行するためにはコマンドを使います。
以前はシェルでしたが、CakePHP3.6から非推奨になり、代わりにコマンドを使うことが推奨されています。
https://book.cakephp.org/4/ja/console-commands/commands.html

```ssh
cd [cakephpのディレクトリ]
# 「backup」という名前のコマンドを作成
bin/cake bake command backup
```

src/Command内にBackupCommand.phpが作成されます。
中身はこんな感じです。

```php:src/Command/backupCommand.php
declare(strict_types=1);

namespace App\Command;

use Cake\Command\Command;
use Cake\Console\Arguments;
use Cake\Console\ConsoleIo;
use Cake\Console\ConsoleOptionParser;

/**
 * Backup command.
 */
class BackupCommand extends Command
{
    /**
     * Hook method for defining this command's option parser.
     *
     * @see https://book.cakephp.org/4/en/console-commands/commands.html#defining-arguments-and-options
     * @param \Cake\Console\ConsoleOptionParser $parser The parser to be defined
     * @return \Cake\Console\ConsoleOptionParser The built parser.
     */
    public function buildOptionParser(ConsoleOptionParser $parser): ConsoleOptionParser
    {
        $parser = parent::buildOptionParser($parser);

        return $parser;
    }

    /**
     * Implement this method with your command's logic.
     *
     * @param \Cake\Console\Arguments $args The command arguments.
     * @param \Cake\Console\ConsoleIo $io The console io
     * @return null|void|int The exit code or null for success
     */
    public function execute(Arguments $args, ConsoleIo $io)
    {
    }
}
```

## バックアップ実行用プログラム
executeが実行されるメソッドなので、この中にプログラムを書いていきます。
DB情報はConnectionManagerから取得します。
```php:src/Command/backupCommand.php
use Cake\Datasource\ConnectionManager;
use Cake\I18n\FrozenTime;

class BackupCommand extends Command
{
    ...
    public function execute(Arguments $args, ConsoleIo $io)
    {
        $current = new FrozenTime();
        $connection = ConnectionManager::get('default');
        $conf = $connection->config();
		$host = $conf['host'];
		$user = $conf['username'];
		$pass = $conf['password'];
		$name = $conf['database'];

        $file = ROOT . DS . 'bkup' . DS . $current->format('Ymd') .'.sql';
        $command = 'mysqldump ' . $name . ' --host=' . $host . ' --user=' . $user . ' --password=' . $pass . ' > ' . $file;
        system($command);
        $io->out(json_encode($file));
    }
}
```

## 実行
SSHで以下コマンドを実行します。
※bkupディレクトリは先に作っておきましょう。
```ssh
bin/cake backup
```
しばらく待ちます。
ファイル名が表示されれば成功です。

# crontabを設定
パスはご自身の環境に合わせてください。
```ssh
# 毎日0時に実行
0 0 * * * /usr/bin/php7.3 /var/www/html/bin/cake.php backup
```

# 余談
コマンド内でTimeクラスを使おうとしたらFrozenTimeを使えと怒られたので、何で？？？と思ったらちゃんと書いてありました。
Viewで使うならTime、Viewの外で使う場合はFrozenTimeだそうです。
https://book.cakephp.org/4/ja/core-libraries/time.html
SSMを使ってプライベートサブネットにSSH接続する

VPCエンドポイント作成の手順


https://aws.amazon.com/jp/premiumsupport/knowledge-center/ec2-systems-manager-vpc-endpoints/


ざっくばらんな手順

https://baresupport.jp/blog/2022/03/14/82/


https://www.netassist.ne.jp/techblog/13668/
C++でリフレクションもどきを実装してみた。

# はじめに
この記事は [フリュー Advent Calendar 2022](https://qiita.com/advent-calendar/2022/furyu) の14日目の記事となります。

# C++でリフレクションもどきを実装してみた。
C++でもリフレクション使いたい！
でも言語仕様にないので、工夫して作ってみました。(検討はされているようですが)
といっても文字列からクラスのインスタンスを生成する部分だけになります。

# リフレクションとは
プログラム自身の構造を読み取ったり書き換えたりする技術のことです。
言語によりますが、できることをざっくり書き出します。
- **クラス名一覧の取得 ← 今回ここ**
- **クラス名からインスタンス生成 ← 今回ここ**
- メンバ変数一覧の取得
- メンバ変数名からメンバ変数の読み書き
- メンバメソッド一覧の取得
- メンバメソッド名から、メソッドの呼び出し
- 各メンバ変数・メソッドのアクセス修飾子の取得
- クラスの継承関係の取得
など

# C++で実装してみたコード
さっそくですが、コードの紹介です。

```cpp:リフレクション用のコード
#include <string>
#include <vector>
#include <exception>
#include <functional>
#include <iostream>

class Assembly
{
public:
    // リフレクション用のインターフェース
	class IReflection
	{
	public:
		std::function<const std::string&()> GetTypeName;
		std::function<void*()> CreateInstance;

		// 所有権の移動によりコピーの無駄を無くしておく
		IReflection(
            std::function<const std::string&()>&& getTypeName,
            std::function<void*()>&& createInstance) :
			GetTypeName(getTypeName),
			CreateInstance(createInstance)
		{
		}
	};
private:
    // リフレクション用のインターフェースの集合
	static std::vector<Assembly::IReflection> assemblies;
public:
    // クラス名を一覧表示
	static void ShowClassNames()
	{
		for (IReflection& a : assemblies)
		{
            std::cout << a.GetTypeName() << std::endl;
		}
	}

    // ファクトリ(インスタンス生成)用のメソッド
	static void* CreateInstance(const std::string& typeName)
	{
		for (IReflection& a : assemblies)
		{
			if (a.GetTypeName() == typeName)
			{
				return a.CreateInstance();
			}
		}
		throw std::exception(("Assembly::CreateInstance NotFound typeName=" + typeName).c_str());
	}

    // リフレクションを楽に実装するためのラッパークラス
	template< class T > class Reflection
	{
	private:
		const std::string typeName = typeid(T).name();
	public:
		Reflection()
		{
			Assembly::assemblies.emplace_back( std::bind(&Reflection<T>::GetTypeName, this), CreateInstance );
		}
		const std::string& GetTypeName() const
		{
			return typeName;
		}
		static void* CreateInstance() { return new T(); }
	};
};

// リフレクションクラスの集合の実体(cppファイルに記載してください)
std::vector<Assembly::IReflection> Assembly::assemblies; 

// リフレクション登録のためのマクロ
// ※名前空間を設定しているのは、変数名の重複を避けるため。
#define SetReflection(className) namespace className##Reflection \
	{ \
		 static Assembly::Reflection< className > reflection; \
	}
```

```cpp:使い方
// 自前で好きなクラスを実装する
class Hoge 
{
private:
    int num = 30;
public:
	void print() const
	{
		std::cout << num << std::endl;
	}
};

// リフレクションしたいクラスを設定
SetReflection(Hoge);
/* このマクロを展開すると以下の様になります。
namespace HogeReflection
{
     static Assembly::Reflection< Hoge > reflection;
}
*/
void main()
{
    // クラス名一覧表示
    Assembly::ShowClassNames();

    // クラス名からインスタンスを生成 ※指定する文字列はtypeidのnameに依存
	std::unique_ptr<Hoge> hoge( (Hoge*)Assembly::CreateInstance("class Hoge") );

    // メソッド実行
    hoge->print();
}
```
```cpp:実行結果
class Hoge
30
```
この様にクラス名の一覧取得と、インスタンス生成からのメソッド呼び出しが出来ました。

# 感想
- リフレクションは、言語レベルのサポートが無いとキツイです。C#は秀逸です。
- 自動登録ができず「SetReflection」を作らざるを得なかったです。くやしい。
- これ以上作りこむ場合は、C++のコードジェネレータを作成する方が良いと思います。
※ビルド前に実行して、ソースを出力し、それをビルドする形
Pythonの作業ディレクトリ



# ディレクトリとファイルのメンタルモデル

Windows11でPythonコーディングを学習し始めた初心者によく聞かれるのが，

-   どこで作業をしているのか？
-   したらいいのか？
-   ディレクトリってなに？
-   ファイルを移動するのはどうするの？

なんかです．ダウンロードしたライブラリファイルとかを動かすときに不可欠な知識です．コツは，CUI(Character User Interface)に馴染むことなんですが，GUI(Graphical User Interface)しか知らない初心者は露頭に迷います．

それぞれの入り口からの具体的な手順を紹介します．

-   Pythonから
-   VSCodeから
-   Ubuntu on WSL2から
-   Terminalから

このメンタル状態を抜け出す第一歩は，'explorer.exe .'のようです．最後についてる'.'(ピリオド，ドットと読みます，現在いるディレクトリを意味します)が大事です．そうすると，CUIでやっていることがGUIで理解できるから．


# PythonをAnacondaから

PythonをAnacondaでinstallしたらAnaconda promptというのが自動で入っています．そこからの場合です．

![img](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151211/25772a4b-8676-6594-2103-75213f916268.png)

1.  startボタンから全てのアプリを表示させて，Anaconda Promptを選びます
2.  Anaconda Promptが起動します
3.  Insertion pointに'explorer.exe .'と打ちます
4.  開いたExplorerの現在いる場所がAnaconda Promptのデフォルトディレクトリです


## GUIとCUIの対応

この後は，ExplorerのGUI操作とAnaconda Promptのコマンド(命令)入力の両方で操作が可能です．GUIとCUIを次のように，結びつけてください．

| Explorer(GUI)            | Anaconda Prompt(CUI) | mac(ターミナル)  | 意味                  |
|:-------------------------|:---------------------|:-----------------|:----------------------|
| 起動                     | explorer.exe .       | open .           |                       |
| 一番上の現在位置         | @cd                  | pwd              | change directory      |
| TEMPフォルダの作成       | mkdir TEMP           | mkdir TEMP       | make directory TEMP   |
| フォルダのダブルクリック | cd TEMP              | cd TEMP          | change directory TEMP |
| フォルダのリスト表示     | dir                  | ls               | directory             |
| ファイルの移動           | move FILE\_A FILE\_B | mv FILE\_A EILE\_B| move FILE\_A EILE\_B  |
| ファイルのコピー         | copy FILE\_A FILE\_B | cp FILE\_A EILE\_B| copy FILE\_A EILE\_B  |

コマンドは基本的にコンピュータに対する指令なんで命令形(V)です．それに目的語(O)がついた形で，

    >  V O1 O2

と空白をセパレータ(区切りに文字)にして書きます．先頭にある'>'の後ろに表示されている縦棒はコマンドプロンプトあるいはインサーションポイントと呼ばれ，点滅して入力を待っていることを意思表示しています．

ドット'.'は現在のディレクトリを意味します．一つ上のディレクトリは'..'(ドットドット)と表記します．

ファイルを移動・コピーするときに必要となる元のファイルの場所(file pathと呼ばれます)は，Explorerのファイルアイコンをつまんだままドラッグして，Anaconda Promptのウィンドウ上でドロップすると表示されます．


# VSCodeから

PythonをAnacondaや <https://www.python.org/downloads> から入れた状態でVSCodeで起動した場合です．VSCodeに馴染んでいる人には不要でしょうが，少しくどくど手順を紹介します．

![img](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151211/7200e2bb-9be3-292c-699b-ff22d9fa0a45.png)

VSCodeをStartボタンから起動した後，

1.  Get StartedでOpen Folderを選ぶとデスクトップが表示
2.  そこでフォルダを作り，さらに 新しいファイル(tmp.py)を作成
3.  メニューから新しいターミナルを選択
4.  コマンドプロンプトでの実行を勧められる
5.  ターミナル画面(ペイン)の右上のプルダウンメニューからコマンドプロンプトを選択

![img](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151211/4c08d4cc-04a5-da1d-54a5-bebaa5b53fe7.png)

1.  コマンドプロンプトが起動していることが確認できる
2.  エクスプローラのデフォルトディレクトリにいる
3.  cd(change directory)でtmp.pyのあるディレクトリに移動
4.  python tmp.pyで起動
5.  ’explorer.exe .'でエクスプローラが起動

これ以降は上の'GUIとCUIの対応'を参照ください．


# Ubuntu on WSL2, Terminalから

多分これらを使っているスキルレベルの人には細かい説明は不要でしょう．dir, @cdのコマンドがUnix標準のls(list), pwd(print working directory)に変わります．ここでも，'explorer.exe .'とファイルパスのドラッグ&ドロップが効きます．



------
 - **source** ~/Desktop/lecture_23s/compA23/win10_directory/win10_directory.org
フォルダの作成法

# フォルダの作成法
pythonにおけるフォルダの作成法は，`os.mkdir()`と`os.mkdirs()`の2種類があります．

例えば，code.pyの実行によりdatasetフォルダ構造を作成したいとします．
実行前：

- temp
    - code.py

実行後：

- temp
    - code.py
    - dataset
        - dog
        - cat

その場合，`os.mkdir()`と`os.midirs()`で少々コードに違いがあるので，以下で説明します．

## os.mkdir()
新しいフォルダを1つ作成することができる関数です．
今回のように，フォルダ内にフォルダを作成する場合は，上階層のフォルダを先に作成しないと下階層のフォルダを作成することができません．
作成先のフォルダが既に存在している場合，エラーが出力されます．

```python
# code.py
import os

def main():
    os.mkdir('./dataset')
    os.mkdir('./dataset/dog')
    os.mkdir('./dataset/cat')

if __name__ == '__main__':
    main()
```

## os.mkdirs()
新しいフォルダを再帰的に作成することができる関数です．
今回のように，フォルダ内にフォルダを作成する場合は，上階層のフォルダをわざわざ作成しなくても下階層のみの指定により上階層のフォルダは自動的に作成されます．
作成先のフォルダが既に存在している場合，エラーが出力されます．

```python
# code.py
import os

def main():
    os.mkdirs('./dataset/dog')
    os.mkdirs('./dataset/cat')

if __name__ == '__main__':
    main()
```

# 各関数を比較した際のメリット，デメリット(経験談)
## os.mkdir()
### メリット
- 1つずつフォルダを作成できるため，コード作成中に構造が確認しやすいです．

### デメリット
- フォルダ内に複数フォルダを持つデータ構造を作成する場合は，コードが複雑になることがあります．

## os.mkdirs()
### メリット
- 下階層のみの指定でデータ構造を作成できるため，コード行数を少なくすることができます．

### デメリット
- コード作成中にデータ構造が確認しにくいことがあります．

# 備考
プログラム効率は良くないかもしれませんが，見やすさ・理解重視で以下のコードを作ってみました．もしよければ参考にしていただければと思います．
```python
import os
# フォルダを作成する関数(フォルダが既に存在してる場合は作成しない)
def create_directory(folder_path):
    if not os.path.exists(folder_path):
        os.mkdir(folder_path)
    else:
        print('フォルダが既に存在しているため作成不可：' + folder_path)
```

# 参考
[1] https://note.nkmk.me/python-os-mkdir-makedirs/
Databricks ( Spark ) にて Hive パーティションとして利用しているカラムと同じカラムのデータを保持しているソースを読み取る場合の動作確認

## 概要
Databricks ( Spark ) にて Hive パーティションとして利用しているカラムと同じカラムのデータを保持しているソースを読み取る場合には、ソースのファイルで保持している値より Hive パーティションの値が優先されるようです。下記のような CSV ファイル（`ingest_date`が`2020-01-01`）を、`ingest_date`が`2020-01-02`の Hive パーティション（例：`ingest_date=2020-01-02`）の配下に配置したところ、Spark データフレームでは `ingest_date`が`2020-01-02`として表示されました。本記事では、その検証結果を共有します。

```text
a,ingest_date
1,2020-01-01
```

```python
path = 'dbfs:/FileStore/manabian/hive_tet'
file_path = f'{path}/ingest_date=2020-01-02/test.txt'
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/9c8f2f68-f8d5-aa25-2414-cfb250041f7a.png)


## 動作確認
### Hive パーティションと同じカラム名をもたないデータの場合

```python
path = 'dbfs:/FileStore/manabian/hive_tet'
file_path = f'{path}/ingest_date=2020-01-02/test.txt'

data="""
a
1
""".strip()
 
dbutils.fs.put(file_path, data, True)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/11407f9b-18ae-b805-1c22-d69c381f9070.png)


```python
df = (
    spark.read
    .format("csv")
    .option("header", "true")
    .load(path)
)
df.display()
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/6ee0faa4-b55e-0958-4d65-a321f9f0fff5.png)

### Hive パーティションと同じカラム名をもつデータの場合

```python
path = 'dbfs:/FileStore/manabian/hive_tet'
file_path = f'{path}/ingest_date=2020-01-02/test.txt'

data="""
a,ingest_date
1,2020-01-01
""".strip()
 
dbutils.fs.put(file_path, data, True)
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/810d5bac-30cf-97b6-54d8-bbeb4ac423fb.png)

```python
df = (
    spark.read
    .format("csv")
    .option("header", "true")
    .load(path)
)
df.display()
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/ae429e92-60b4-957d-41b1-956e60c4c19b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/5fd13841-6acb-0d30-8e62-ff1be94af80b.png)

### リソースを削除

```python
dbutils.fs.rm(path,True)
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/1e912cb0-cab3-4c7d-ff0c-17fa118ddf75.png)
TouchDesignerで抽象風景作ってみました

# 作ったもの
![sun.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852734/b6e59a66-d6ae-2e5c-3c81-2205fdab85e6.gif)
ネットワーク全体図
![スクリーンショット 2022-12-07 13.56.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852734/690f60ae-6867-bd60-95b1-3d5be235240e.png)


# まず画像を用意する
まずはこの後TouchDesignerにインポートするために、Figmaとか慣れてるデザインツールで海っぽいテクスチャーを用意する。
自分はこのようなもの作った。
![img.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852734/fb581195-bb8d-4faf-3cb0-729c6358f98a.jpeg)

# 海っぽいもの作る
GridSOPを用意して、それをNoiseSOPに繋ぐことで、海みたいな動きを生成する。最後にnullSOPを繋ぐ。
![スクリーンショット 2022-12-06 18.09.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852734/9b63d3d5-0a2b-628e-47c2-52c7d366781b.png)
それからnullSOPからレンタリングに必要なものをそれぞれ用意する、GeometryCOMP,LightCOMP,CameraCOMP,RenderTOP。最後にOutTOPを追加する。
![スクリーンショット 2022-12-06 18.13.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852734/f6ee7cea-fda7-be27-226b-af88e010ded3.png)
MovieFileInTOPを追加して、Fileのところから先用意した海っぽいテクスチャーを選択して画像をインポートする。それからConstantMAPで繋ぎ、GeometryCOMPに嵌め込む。
![スクリーンショット 2022-12-06 18.23.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852734/01097da0-4d2b-e220-01fb-3dc86088127d.png)

# 波の動きを作る
PatternCHOPを追加して、Pキーを押して、From Rangeで反復を設置する、To Rangeで最大値と最小値を決めてから、TimeSliceCHOPと繋ぎ、最大値と最小値の間の数値で反復する動的な値を作る。その動的値を先ほど作ったNoiseSOPのTransform属性のScaleに付与すると波っぽい動きになり、カメラや位置、大きさを好きな値に調整したら、海の波ができる。
![スクリーンショット 2022-12-06 18.37.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852734/b7f51818-af40-cc23-cdd2-3d6b77ecf2fc.png)

# 太陽っぽいものを作る
今回は簡単にCircleTOPでまる作って色調整する。それから光がないと魂がないので、BlurTOPで作る。Blur設定からPre-Shrinkで光範囲を調整できる、Filter Sizeでサイズ感を調整することで光が完成になる。OverTOP作って、先作ったCircleTOPが上に設置し、BlurTOPは後ろにしたいので下に設置すると太陽っぽい部品ができる。
![スクリーンショット 2022-12-07 13.32.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852734/ef8719db-dabd-7800-78a6-f9004da19f9b.png)

# 最後に上に重なるツブツブしてるフィルターを作る
![スクリーンショット 2022-12-07 13.38.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852734/bdae2c61-acea-f782-5d2c-2758d150eac3.png)
よく見るとツブツブのフィルターがかけている、それはNoiseTOPで作ってある。
まず設定からサイズを他のものと統一し、形式も欲しいものに調整する。今回は1280*720、32-bit float(RGBA)である。
それからNoise設定でTypeをランダムにして、AmplitudeとOffsetで粗さと明度調整する。MonochromeをOFFしたら色とりどりの点々もできる。
![スクリーンショット 2022-12-07 13.42.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852734/e0a5757a-b97a-261c-21d0-c528abbf753c.png)

![スクリーンショット 2022-12-07 13.43.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852734/0e884f7d-fd30-35b8-3930-1cec9dfad334.png)

それからOutput設定のNoise　Scaleで数値変えれば、つぶつぶしてる点々の大きさを調整することができる。自分の数値はこんな感じ。
![スクリーンショット 2022-12-07 13.43.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852734/e6d7a940-e89b-d788-38ad-dde1527ed51d.png)
以上、太陽と海っぽい抽象風景の基礎パーツの作り方でした。日々成長していけるように引き続き学んでいきます。