OmniAICreator/Qiita-1.07M huggingface dataset:
【ggplot2】 legendが消えたまま出てこないぞ！

【ggplot2】 legendが消えたまま出てこないぞ！

こんにちは！rのggplot2()で作図していたときに、以下のように`theme()`内で`legend`をしっかり記述したのにも関わらず、legendが作図の上には出てこない時、ありますよね！（ないよー）


```ruby:qiita.rb
theme(panel.background = element_rect(fill="white",color = NA), 
        plot.background = element_rect(fill = "white", color = NA),
        panel.grid.major =  element_line(color = "Gainsboro"),
       
        axis.title.x  = element_text(size =15,face="bold"),
        axis.title.y  = element_text(size =15,face="bold"),
        axis.text.y  = element_text(size =15),
        axis.text.x = element_text(colour="black",size=13,
    　　　　　　　margin = margin(t = 0, r = 0, b = 0.5, l = 0,unit = "cm")),
    strip.text.x = element_text(size =16),
    legend.position=c(0.3,0.9),legend.justification=c(0.80,0.85),
        panel.border = element_blank(),
      legend.text=element_text(size=15),
      legend.title=element_text(size=15),
      legend.background = element_rect(fill="white",linewidth = 0.5, linetype = "solid", color = "Gainsboro"))
```  
もし、`theme()`の中身に何も問題がないのなら、
大体は、`breaks=c()`の中身が間違っていることが原因です。
私の場合は
```ruby:qiita.rb
      scale_color_viridis_d(option = "B", begin = .6, end = .9,
                  name="Number of Partners Changed",
                   breaks=c("zero","one","two","three"),
                 labels=c("0","1","2","3+")) 
```
上の`breaks=c()`の中身を下に戻したら`legend`が戻ってきました！
```ruby:qiita.rb
            scale_color_viridis_d(option = "B", begin = .6, end = .9,
                  name="Number of Partners Changed",
                   breaks=c("0","1","2","3+"),
                 labels=c("0","1","2","3+")) 
```

誰もこんな見落とししないでしょうから誰得なんだろーって記事でした！　ﾉｼ
[SVG] viewBox の視覚的理解をする

始めまして。CodeByDeerです。
初投稿ですが、文字を書くのがめんどくさいので、図で説明します。
# 導入

まずMDNに載ってたハート([引用](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2521024/52027ee9-0bb7-45ec-f1af-3047ab62f7f4.png))を少し変えたやつがこれ

```svg
        <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
            <path stroke="red" d="
                M 50,30
                A 10,10 0,0,1 70,30
                A 10,10 0,0,1 90,30
                Q 90,45 70,60
                Q 50,45 50,30 z
            "></path>
        </svg>
```
描画すると大体こんな感じ
<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2521024/52027ee9-0bb7-45ec-f1af-3047ab62f7f4.png">

さて、今度はviewBoxをいじってみる

```svg
        <svg viewBox="60 20 30 30" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
            <path stroke="red" d="
                M 50,30
                A 10,10 0,0,1 70,30
                A 10,10 0,0,1 90,30
                Q 90,45 70,60
                Q 50,45 50,30 z
            "></path>
        </svg>
```
このSVGはこんな感じ

<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2521024/583b4c4e-e106-71b7-b135-874e5ccaf153.png">

HTMLのCanvasに慣れてる私からすると、マジでわからなさすぎる挙動だった
# 結論

こういうこと

<img width="700" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2521024/1081aa60-89cf-80c5-09b1-57f869195d3e.gif">

描画時の座標系と表示時の座標系が違う。

それが答えだった

# まだまだよくわかってない
一応のところはこんな感じで解釈で来たのですが、いろいろいじってみるとどうやらまだよくわかっていない癖があるようなので、参考程度に考えていただけると嬉しいです。

# 参考・引用

https://qiita.com/nekoneko-wanwan/items/75e13cd02caeb3dc9ad6

https://developer.mozilla.org/ja/docs/Web/SVG/Attribute/d
南琉球宮古方言調査報告書(2012)基礎語彙aの「方言間距離」を単語ベクトルのハミング距離で3D可視化する

[昨日の記事](https://qiita.com/KoichiYasuoka/items/a6e0210e6d9106af2db5)で検討した宮古諸語の簡易音素表記をもとに『[南琉球宮古方言調査報告書](https://doi.org/10.15084/00002456)』(国立国語研究所, 2012年8月)の基礎語彙aデータを単語ベクトル化し、各[郵便番号](https://qiita.com/KoichiYasuoka/items/2e55e0ba2f29aec9dcb9)「方言」単語ベクトルのハミング距離をnetworkxのspectral_layoutで3D可視化してみた。Google Colaboratoryだと、こんな感じ。

```
!pip install networkx plotly
import os,glob,numpy,networkx
from plotly.express import scatter_3d
url="https://github.com/KoichiYasuoka/UD-Miyakoan"
m=os.path.basename(url)
!test -d {m} || git clone --depth=1 {url}
d={}
for f in glob.glob(m+"/LEMMA/*.txt"):
  with open(f,"r",encoding="utf-8") as r:
    b=os.path.splitext(os.path.basename(f))[0]
    for s in r:
      t=s.strip().split()
      if t[4].startswith("南琉球宮古方言調査報告書(2012)基礎語彙a") and t[1].find("+")<0:
        if t[0] in d:
          d[t[0]].append(b)
        else:
          d[t[0]]=[b]
d={k:v for k,v in d.items() if len(v)>100}
w={j:i for i,j in enumerate(set(sum([v for k,v in d.items()],[])))}
m=numpy.zeros((len(d),len(w)))
for i,k in enumerate(sorted(d)):
  for j in d[k]:
    m[i,w[j]]=1.0
e=numpy.array([numpy.sum(numpy.abs(m-m[i]),axis=1) for i in range(len(d))])
g=networkx.Graph()
for i in range(len(d)):
  g.add_node(i)
  for j in range(i):
    g.add_edge(i,j,weight=1/max(e[i,j],0.5))
c=networkx.spectral_layout(g,dim=3)
p=numpy.array([c[i] for i in range(len(d))])
f=scatter_3d(x=p[:,0],y=p[:,1],z=p[:,2],text=[k[4:] for k in sorted(d)],opacity=0.5,labels={"x":"","y":"","z":""},width=1600,height=1600)
q={"tickfont":{"color":"white"}}
f.update_scenes(xaxis=q,yaxis=q,zaxis=q)
f.show()
```

郵便番号の下4桁とともに、私(安岡孝一)の手元では、以下の3D図が出力された。

![miyakoan2021a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428317/193bb8ed-ed7c-d554-9ea3-b992e446f05b.png)

この12ヶ所では、イキマ語〔906-0421池間〕が、ダントツで離れているのがわかる。イラヴ語は、906-0503伊良部が3D図奥にあって多少は離れているものの、906-0505国仲ほど遠いわけではない。北ミャーク語は、906-0002狩俣と906-0003島尻が、906-0004大浦を含めたグループを構成している、と見て大丈夫そうだ。西ミャーク語は、906-0306来間と906-0304上地がそれぞれに離れているものの、906-0305与那覇が東ミャーク語〔906-0101保良・906-0108砂川〕に紛れ込んでいる。中ミャーク語〔906-0015久貝〕は、これらと少し距離をおいているようだ。

こういう形で単語ベクトルのハミング距離を可視化する限りにおいては、宮古諸語の各「方言」は樹形図や等語線で描き切れるようなものではなく、いわゆる「分岐」と「交雑」を繰り返してきたのだろうと思われる。うーん、ウカㇺ語・南ミャーク語・タラマ語も、3D図に何とか入れておきたいのだけど、さて、どうすればいいかな。
hfsplusファイルシステムのHDDの自動NFSマウント方法

※デバイスは/dev/sda1に固定しています。
※UUIDで指定したほうが確実かと思います。

### 解決したいこと
hfsplusファイル形式のHDDをマウントしsambaでWindowsマシンからアクセスできるようにする

### 現状

```
sudo mount -t hfsplus -o force,rw /dev/sda1 /srv/samba/share
```
このコマンドでマウントするも、/etc/mtabで確認するとro(Read-Only)でマウントされてしまう。

### 対応方法１
fsckをおこなう。

```
sudo fsck.hfsplus /dev/sda1
```
その後、再度mountする
```
sudo mount -t hfsplus -o force,rw /dev/sda1 /srv/samba/share
```


### 対応方法２
対応方法１では、再起動の度にsfckが必要なため、
起動時に自動でチェックとマウントをするように設定する

##### 手順１　shの作成
/usr/local/bin/に以下のshファイルを作成
```
#!/bin/sh
fsck.hfsplus /dev/sda1
mount -t hfsplus -o force,rw /dev/sda1 /srv/samba/share
```
##### 手順２　/etc/rc.localに追記

参考）https://qiita.com/karaage0703/items/ed18f318a1775b28eab4
Omitを使いたい

# Omitとは
Omitとは、オブジェクトの型TからKeysで指定したプロパティを除いたobject型を返すユーティリティ型のこと。
簡単に言うと、任意の型をカスタマイズすることができる。
ちなみに日本語では「省略」という意味がある。

## ユーティリティ型って？
TypeScript側で用意してくれているよく使う便利な型のこと。グローバルで使用可能。

- 例
    - Omit
    - Pick
    - Partial
    - Record
    - Exclude
    - ReturnType

# 使用例
Userという型からpasswordプロパティを除外してみます。

```
type User = {
  id: number;
  name: string;
  password: string;
};

// Omitを使ってpasswordを除外する
type UserWithoutPassword = Omit<User, 'password'>;

// 以下のような型定義になる
type UserWithoutPassword = {
  id: number;
  name: string;
};

```

# 参考
[Omit<T, Keys>](https://typescriptbook.jp/reference/type-reuse/utility-types/omit)
[TypeScriptのOmitの実装を見てみよう](https://zenn.dev/jojojo/articles/80f442f27f92e3)
[【TypeScript】Utility Typesをまとめて理解する](https://qiita.com/k-penguin-sato/items/e2791d7a57e96f6144e5)
[Utility Types](https://www.typescriptlang.org/docs/handbook/utility-types.html)
AのOrganizationのユーザーからBのOrganizationのS3を叩けるIAMとPolicyの設定

# 概要
- プロジェクト単位やプロダクト単位でOrganizationを分けている
- AというOrganizationでユーザーを作り、Bで管理しているS3を操作できるように設定してみた
- ボツになったけどせっかく設定したのでメモしておく


# ざっくり

- Aでユーザーの用意
- AユーザーにPolicyを用意してアタッチ
- BのS3のBucket Policyを設定する

これだけ

# 手順
## Aでユーザーの用意

世の中手順はいっぱいあるので省略

## AユーザーにPolicyを用意してアタッチ

* `${bucket_name}` には、BのS3 Bucket名が入る
* あとはS3使う上で一般的なやつだと思う

```json
{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Effect": "Allow",
			"Action": [
				"s3:GetObject",
				"s3:PutObject",
				"s3:DeleteObject"
			],
			"Resource": [
				"arn:aws:s3:::${bucket_name}/*"
			]
		},
		{
			"Effect": "Allow",
			"Action": [
				"s3:ListBucket"
			],
			"Resource": [
				"arn:aws:s3:::${bucket_name}"
			]
		}
	]
}
```

## BのS3のBucket Policyを設定する

* `${organization_id}` には、AのOrganization IDが入る
* `${A_iam_user_name}` には、AのIAMユーザー名が入る
* `${bucket_name}` には、BのS3 Bucket名が入る

```json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Hoge",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::${organization_id}:user/${A_iam_user_name}"
            },
			"Action": [
				"s3:GetObject",
				"s3:PutObject",
				"s3:DeleteObject"
			],
            "Resource": "arn:aws:s3:::${bucket_name}/*"
        },
        {
            "Sid": "Hoge2",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::${organization_id}:user/${A_iam_user_name}"
            },
            "Action": "s3:ListBucket",
            "Resource": "arn:aws:s3:::${bucket_name}/*"
        }
    ]
}
```

# 確認方法

`$ aws s3 ls`だけだと、AのS3のBucket一覧しかでてこないので、指定してあげる

```bash
$ aws s3 ls s3://${bucket_name}
```

# わからなかったこと

[Condition](https://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/reference_policies_elements_condition.html)を設定してみたけど、なぜか動かなかったのでよくわからずとりあえず供養（誰か教えて）

BのBucket Policyにこんな設定してみたが、うまくいきませんでした。そもそも必要なのかもよくわからない

```json
// ...
        {
            "Sid": "Statement2",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::${organization_id}:user/${A_iam_user_name}"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::${bucket_name}/*",
            "Condition": {
                "StringEquals": {
                    "aws:SourceAccount": "${organization_id}"
                },
                "ArnLike": {
                    "aws:SourceArn": "arn:aws:${service_name}:${region_name}:${organization_id}:*"
                }
            }
        }
// ...
```
【GitHub Copilot Workspace】プルリクタイトルに適切な絵文字をつけさせる

# やったこと
GitHubのIssueに次の文言を追加する
```md
- [gitmoji](https://gitmoji.dev/)の内容を読み、今回の修正内容からpull requestのタイトルに適切な絵文字をつけること
```

![スクリーンショット 2024-05-29 15.49.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188242/9e51f802-03ea-21fe-2239-239adacd3a48.png)

# 結果
gitmojiの内容を読み込み、適切な絵文字をPRタイトルにつけてくれる

![スクリーンショット 2024-05-29 15.50.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188242/7fb55e8f-9331-3176-dca7-d9eec9d9c35a.png)
PulseAudioをsystem serviceとして動かす

PulseAudioは通常ユーザーサービスとして動作する(デスクトップ用途を想定するため)ので、ヘッドレスな環境で音声を取得したいような用途では不都合が出たりする。[このあたり](https://wiki.archlinux.org/title/PulseAudio#Starting_system-wide_on_boot)にsystem serviceとして動かす手順が載っており、これに従えば想定した通りに動作したので日本語メモとしてここに残す。

## 前提条件

aptなどでpulseaudio関連がインストールされていること。

## PulseAudioのsystem service化

[Starting system-wide on boot](https://wiki.archlinux.org/title/PulseAudio#Starting_system-wide_on_boot)を参考にsystemd化する。

* ユーザー追加・グループ追加
PulseAudioを使いたいユーザーをpulse-accessグループへ追加
```sh
sudo usermod -aG pulse-access root
```
* ユーザーサービス無効化
```sh
sudo systemctl --global disable pulseaudio.service pulseaudio.socket
sudo systemctl --global mask pulseaudio.socket
```
* /etc/pulse/client.confの修正
`autospawn = no`を設定する
* /etc/systemd/system/pulseaudio.serviceを作成
```
[Unit]
Description=Sound Service
 
[Service]
# Note that notify will only work if --daemonize=no
Type=notify
ExecStart=/usr/bin/pulseaudio --daemonize=no --exit-idle-time=-1 --disallow-exit=true --system --disallow-module-loading
Restart=always
 
[Install]
WantedBy=default.target

```
* systemd有効化
```sh
sudo systemctl enable pulseaudio
```

pulseaudio起動後、`pactl info`としてPulseAudio利用可能になっていることを確認できたらOK。
【ComfyUI】元画像よりプロンプトが優先される問題

# はじめまして
簡単に自己紹介させてください。東京の大学4年生です。普段はクリエイティブコーディング、WebエンジニアやCG、たまにVJなどしてます。( [X/Twitter](https://x.com/_akabozu) )

私は今、CG製作を手掛けている[WOW](https://www.w0w.co.jp/)という会社でプログラマーアルバイトしています。そこで、ComfyUI触っている時に、詰まったのでメモとして残しておきます。

# 概要
ComfyUIで、Img2Img,Videoを生成した際に元の画像の面影が完全に失われてしまった。
始めはstepやcfgの値のせいかと思っただが、どうも上手くいかない、、

# 状況
**元画像**
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3616213/ee89d953-b0d8-23cd-3a92-b178251dae00.jpeg">

**Prompt（English）**
"A lush grassland spreads out, filled with trees and flowers. The blue sky spreads out in the distance, and the sun's rays illuminate the earth. Please depict a woman looking at a beautiful landscape."

**プロンプト（日本語）**
木々や花々が生い茂る緑豊かな草原が広がります。遠くには青空が広がり、太陽の光が大地を照らします。美しい風景を眺める女性を描いてください。

**修正前**
<img width="250" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3616213/83adf92b-a9bf-6ca0-6366-6ddef0d5dcdc.gif">
**修正後**
<img width="250" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3616213/5446f533-52cd-fa25-3a0c-5f8e95138ab6.gif">

このように修正前だとほぼプロンプト通りに描画されてしまい、元画像の面影がなくなる

# 解決方法と原因
### IP Adapter を使用する
![スクリーンショット 2024-05-29 143639.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3616213/12244601-23c1-add3-38ef-c0f679f99482.png)
IPAdapterModelLoaderがなく、ipadapterが空になっていたからだった。画像のようにIPAdapterAdovancedのipadapter部分に読み込んだモデルを繋げるとちゃんと画像に沿った絵が描画された。

#### ちなみに、IPAdapterとは？
`"Image Prompt Adapter"`の略称
つまり、画像自体がプロンプトの役割を担ってくれる機能らしい。そこへテキストプロンプトで指示する流れらしい。

納得

# 終わりに
最後まで読んでいただきありがとうございます。生成AI、始めたばかりで情報間違っていた場合教えてください。

ちなみに、初めて記事書きました。定期的に上げていきたいと思ってますので、今後とも何卒よろしくお願いします。
【一口メモ】CSSやjavascriptなどのファイルを編集した後何回再読み込みしても更新されないときの対処法

## 困ったこと
CSSやJavascriptを編集した後サーバーなどにあげたりし、再読み込みしても更新されないときがある。

## 原因
①Webページが参照する画像ファイルやCSSファイルなどの**キャッシュ**、あるいは②Webページで実行されたJavaScriptが動的に読み込んだファイルなどの2次的なキャッシュが残っているためである。

**キャッシュ**というのは、2回目以降に開かれるWEBページをよりスムーズに開くため、あるいはサーバー負荷の軽減等のため、一定期間内に同ページを開くときは、前回開いていた履歴を表示する。

1回目に開いたときと2回目で開いたときの間に、HTMLファイルが変更されない、かつCSSファイル等の外部ファイルが更新されると、高速化するために便利なキャッシュが、逆に正確性を欠くものとなる。

## 解決策

基本的にキャッシュを削除すればよい。ブラウザにフォーカスされているときに次の操作を試みる。（以下Windows）

### 解決策1　Ctrl + Shift +  R　または　Shift + F5

Webページから直接参照している画像ファイルやCSSファイルなどのキャッシュを破棄してリロードすることができる。

これにより①のキャッシュを消去することができる。
**しかし②のキャッシュは消去できない。**


### 解決策2　シークレットウィンドウ（Ctrl + Shift +  N）で開く

~~シークレットウィンドウで新しくページを開くとキャッシュは①も②（Webページで実行されたJavaScriptが動的に読み込んだファイルなど）も削除される。~~ ＜誤り＞

シークレットウィンドウで新しくページを開くと、①も②（Webページで実行されたJavaScriptが動的に読み込んだファイルなど）もない真っ新なページが表示される。ただし通常のページで開かれた際に記録されるキャッシュは別で残っているので注意。
（コメントにて指摘があった部分を修正しました。ありがとうございました。）

ただし、変更後はシークレットウィンドウを再読み込みするのではなく、**シークレットウィンドウを閉じて再度開く必要がある**。ウィンドウを閉じない限り（たとえタブを閉じてもダメ。右上の赤バツを押すということ）キャッシュは削除されない。


### 解決策3　開発者ツールを開いた状態（Ctrl + Shift + I または F12）のままリロードを右クリックする



| ↻ |
|:-:|
| 通常の更新（Ctrl + R）  |
| ハードリフレッシュ（Ctrl + Shift + R） |
| キャッシュをクリアしてハードリフレッシュ |

このように表示される。

「ハードリフレッシュ（Ctrl + Shift + R）」が**解決策1**であり、①のキャッシュのみ削除できる。

「キャッシュをクリアしてハードリフレッシュ」を使うと①に加え②（Webページで実行されたJavaScriptが動的に読み込んだファイルなど）のキャッシュも削除できる。

### 解決策4　開発者ツールを開いた状態のまま（Ctrl + Shift + I または F12）にしてキャッシュを元から記録しない

開発者ツールを開き（**Ctrl + Shift + I** または **F12**）、「ネットワーク」タブで「キャッシュを無効化」にチェックを入れると、**開発者ツールを開いている間は**すべて無効化される。（代表的なブラウザではおおむね利用可能）

以下の赤い四角のうち、どちらかの「キャッシュを無効化」を押す。（Edge）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2268506/93f3429c-0ff2-76e8-2560-e03c9fef2645.png)


（コメントにて有益な情報をいただきました。ありがとうございました。）
Apollonian gasketのコード参照のみ

Apollonian gasketを描きたかったが、wikiには、円のサイズを出すコードのみだったので、調べた結果をメモ。

調べた感じでは、簡単な記述方法はないようで、数十行で書けるようではなかった。
また、複素数を使っていることが多い。

https://editor.p5js.org/codingtrain/sketches/zrq8KHXnO

https://editor.p5js.org/codingtrain/sketches/tEQxqHaT6e

wikiには、Apollonian gasketのsvgファイルがある。

https://upload.wikimedia.org/wikipedia/commons/e/e6/Apollonian_gasket.svg

これをダウンロードし、線を太めにして、結合して、レーザーカット。(出力100%, 速度2, 1pass)
細い部分は、データ上で0.75mm以上を確保。
![IMG_2947.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/2e026625-5381-aad7-6751-cf2ed3cc4597.jpeg)

中身スカスカなので、とても軽く、もろい。

![IMG_2946.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/87929d5c-79dd-b13d-22d9-4f8754355144.jpeg)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/794cfd52-1ba8-5af8-b402-6a543c03309b.png)
はじめての .NET

https://dotnet.microsoft.com/ja-jp/learn/dotnet/what-is-dotnet


> .NET は、Microsoft がサポートする無料のオープンソース アプリケーション プラットフォームです。

.NET をちょっと触ってみるのに参照したリンク集です。

## Hello world

https://learn.microsoft.com/ja-jp/dotnet/core/tutorials/with-visual-studio-code?pivots=dotnet-6-0&WT.mc_id=twitter&sharingId=308FE20A4D48C419

```C#
namespace dotnet;
class Program
{
    static void Main(string[] args)
    {
        Console.WriteLine("Hello, World!");
    }
}
```

## 電卓

https://learn.microsoft.com/ja-jp/visualstudio/get-started/csharp/tutorial-console?view=vs-2022

> 電卓を作成するコードを追加する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/caaa0ae4-923a-b00e-6c25-66d4bc37248b.png)



## その他


https://learn.microsoft.com/ja-jp/training/modules/work-azure-blob-storage/4-develop-blob-storage-dotnet


https://learn.microsoft.com/ja-jp/dotnet/azure/?view=azure-dotnet

以上です～
ActiveAdminのDashBoardにchartkickを表示させる方法。

### きっかけ
個人で、楽器のデータベースを作ろうとしており、その際、ActiveAdminのdashbordにグラフを表示させたく、chartkickを利用して表示できないか実験してみました。


### 前提
・すでに、activeadminを起動できていること。
・Railsのバージョンは7以上であること。


###　手順１：gemをインストールする。
以下をGemfileに書き込んだ後、bundle install
```ruby
# Gemfile
gem 'chartkick'
```

###　手順２:active_admin.jsにchartkickをインポートできるようにする。
```js
// ファイル名: app/assets/javascripts/active_admin.js
//= require active_admin/base <-- これは元々書き込んである。

//↓ 以下を追加。
//= require chartkick
//= require Chart.bundle
```

### 手順３:dashboardに表示させる。
```ruby
# app/admin/dashboard.rb
ActiveAdmin.register_page 'Dashboard' do
  menu priority: 1, label: proc { I18n.t('active_admin.dashboard') }

  content title: proc { I18n.t('active_admin.dashboard') } do
    div class: 'blank_slate_container', id: 'dashboard_default_message' do
      span class: 'blank_slate' do
        span I18n.t('active_admin.dashboard_welcome.welcome')
        small I18n.t('active_admin.dashboard_welcome.call_to_action')
      end
    end
    
    """
    以下参考
    """
    columns do
      column do
        panel 'グラフ' do
          para pie_chart({test: 1, test2: 2})
        end
      end
    end
  end
end
```

### 結果
できた！
![スクリーンショット 2024-05-29 15.05.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266357/fdeaa0ea-a44a-3542-fbb9-8db9a899b231.png)
BigQuery の特定データセットの tableId と lastModifiedTime を表示するワンライナー

# 前提
- MacOS で zsh
- 先日のこれとだいたい同じ
  - [BigQuery の特定プロジェクトの DatasetID とデータセット作成日時を出力するワンライナー](https://qiita.com/shase428q/items/396d06acadd148a2250c)

# 実際のコマンドと出力サンプル

コマンド

```bash
bq ls --format prettyjson -n 10000 --project_id foo-project bar_dataset | \
jq -r '.[].id' | \
xargs -I {} bq show --format prettyjson --project_id foo-project {} | \
jq -r '[."tableReference"."tableId", ."lastModifiedTime"] | @csv' | \
gawk -F "," '{
    gsub(/"/, "");
    print $1 "\t" strftime("%Y-%m-%d %H:%M:%S", substr($2, 1, 10))
}' 
```

出力サンプル（TSV)

```
aaa   2024-05-29 02:18:42
bbb   2024-05-29 01:46:16
ccc   2024-05-12 01:45:36
```
ガイドターゲティング：複数同じエレメントがあった場合、指定のエレメントをターゲットする方法

# ターゲットするエレメントを指定する

自分メモシリーズ

画面上に複数同じ属性値をエレメントがあった場合、Pendoは最初に見つかったエレメントに対してガイドをターゲットします。

![CleanShotGQlDAaO1@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227518/ad7bd25f-7863-df7a-6490-23414415d754.png)

指定の場所にガイドを出すには、Code blockを使って表示場所を書き換える必要があります。

```javascript
//要素を取得する
const elements = document.querySelectorAll('#likebtn');
//例：最後のエレメントを探す
const lastElement = elements.length - 1
//ガイドのターゲットを書き換える
pendo.getActiveGuide().step.element = elements[lastElement]
```

![CleanShota09IoVvg@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227518/0422f127-8d64-d0bf-aae8-cb34a550fe88.png)


追記：
step1で最後のエレメントにカスタム属性等を追加し、step2でそのカスタムにターゲットする手法

```javascript
//step 1
//element郡を取得
const elements = document.querySelectorAll('#likebtn');
const lastElement = elements.length - 1
//最後のエレメントにカスタム属性を追加
elements[lastElement].setAttribute('lastman','yes')
//ガイドを進める
pendo.onGuideAdvanced()
```

step2のガイドターゲットを[lastman='yes']に指定

こうすることで、stepターゲットの上書きをしなくても良くなる。
![CleanShotxfewU4YL@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227518/4821c33b-b4c8-19dd-b93c-5344a2c15527.png)
【初心者】データベースのテーブル分けについて考察してみる part2

今回もデータベースの考察です。
今回は下記のテーブルについて考えてみようと思います。
![image1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3752886/4bf9943c-2481-4aea-b9b0-1571a31cc0e9.png)

lessons という授業用のテーブルですが
授業 1 回分を 1 レコードとします。

title には授業のタイトル
content には授業内容
file には動画や PDF 等のファイル

が入るとします。

今回はこのテーブルについて
考察してみたいと思います。

***

lessons テーブルが巨大かもしれない件

さて、この lessons テーブルは
全ての lesson が入る事が推測されます。

40MB の動画が 300 個登録されたとしたら
10GB の容量になります。

レコード数は少ないかもしれませんが
10GB のテーブルを検索する事を考えると
検索に時間がかかることが推測されます。

算数A の lesson だけを
表示したい画面があるとすれば
lesson 一覧を表示したいだけなのに
検索だけで時間がかかるかもしれません。

ファイルは必要ないのに
算数A の画面がなかなか表示されないのは
ナンセンスな気がしますよね？

そこで今回の例では file カラムは
file テーブルに分けると良いと思います。

動画ファイルA の id を 1 とすれば
lesson テーブルの file カラムは
1 を登録するだけで済みます。

個別の lesson を開かない限り
動作が早くなるのです。

個別の lesson ページの
動作が早くなることはありませんが
他のページが早くなるならば
分けた甲斐があると思います。

***

今回のまとめ

今回の例ではカラム数が多いテーブルで
・1 カラムだけ容量が大きいカラムが存在する
・そのカラムは特定の画面でしか使わない
・他のカラムだけで完結する画面がある(算数 A の lesson 一覧画面等)

という限定的なシチュエーションでは
カラムを分けると良さそうという結論でした。

カラム数が多いテーブルに
1 カラムだけ大きなカラムがあるならば
分けた方が検索速度が上がるのではないか？
という個人的な考えでした。

皆さんはどう思いましたか？
分ける派と分けない派が
いらっしゃるのではないでしょうか？

今回の例で皆さんがどちら派か
是非コメント頂けると嬉しいです。

閲覧ありがとうございました。
dsaddコマンドを使用したユーザの一括作成

**dsadd**コマンドによるユーザの一括作成を試したので、備忘録として手順を記録します。

## 一括作成するユーザの用意
dsaddコマンドでは、作成するユーザ情報を一行にまとめる。
よって、以下のように、作成したいユーザ分の情報をテキストエディタにまとめる必要がある。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3550683/4a7c7eed-8bdc-7eca-ed9e-481ef598b049.png)

#### コマンドについての軽い説明
* ""で囲んだ部分に、DN形式でユーザの作成場所を指定する
* -samid でSAM値(samAccountName)を指定する
* -upn でUPN値を指定する
##### 補足
[SAM値とは？](https://soma-engineering.com/server/activedirectory/what-is-samaccountname/2018/05/28/)
[UPN値とは？](https://soma-engineering.com/server/activedirectory/what-is-upn/2018/05/29/)

## ユーザの作成
Powershellでコマンドを投入する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3550683/cca89cfa-448d-eaef-c271-e464762d5d41.png)

## 作成されたユーザの確認
サーバーマネージャーから、[Active Directory ユーザとコンピューター]を選択し、該当OUを確認する。

用意したコマンド分のユーザが作成されていることを確認できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3550683/a229c039-aba4-20c5-3832-e3b10f5a63e1.png)

## 最後に
GUIで1ユーザずつ作るのは大変。
今回は検証のために、まとめてユーザを作りたかったので試してみた。
【初心者向け】WaitCustom実装で詰まった際のチェックポイント【Unity宴4】

<h2>【どんな人向け？】</h2>
・Unity宴で特定のボタンが押されるまでWaitCustomする処理を実装したい

・公式リファレンス通りにしたはず

...なのにうまくいかなかった人


<h2>前提：以下公式リファレンス>WaitCustomで記載されている仕様を実装済み</h2>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3525124/29a5eb4a-c5e1-5c7f-bdf2-b75299a44c44.png)

引用元：

https://madnesslabo.net/utage/?page_id=1785#:~:text=%E3%82%A6%E3%82%A7%E3%82%A4%E3%83%88%E3%82%BF%E3%82%A4%E3%83%97-,WaitCustom,-WaitCustom%E3%81%AF%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0

<h2>１．C#スクリプトで「UTAGE」の使用宣言はしているか？</h2>
    下記宣言を追加してください。

    using Utage;

根拠：

https://madnesslabo.net/utage/?page_id=247

<h2>２．ボタンでOnClick()を設定しているか？</h2>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3525124/576aa45a-6f51-2934-ed17-5e5611d7414f.png)

<h2>３．C#スクリプトで変数Engineの設定はしているか？</h2>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3525124/dbacaa5e-23ad-d75a-00af-9cda0ef44168.png)
ブロックデバイスの性能指標と測定方法

# 性能指標
### スループット
`単位時間あたりのデータ転送量`です。大きなデータをコピーするような時などに、この値が意識されます。

### レイテンシ
`一回当たりのI/Oに要する時間`です。ストレージの応答性能を示します。
...
主に大きなデータ転送の時ではなく、細かいI/Oがたくさん出る時です。
#### 気づき
たくさんのI/Oが必要となるブロックデバイスにとって一回ずつ時間がかかるとダメなのか。

### IOPS
I/O per secondの略であり、`１秒間に処理できるI/Oの数`を示します。

### 気づき
スループット、レイテンシ、IOPSは並列処理をさせると性能が上がりそうだがどうなのだろうか？

# 性能指標を見てみる
```
vboxuser@************:*****************$ fio --name test --readwrite=randread --filename testdata --filesize=1G --size=4M --bs=4K --output-format=json
fio: pid=0, err=13/file:filesetup.c:162, func=open, error=Permission denied
{
  ...
    {
      "jobname" : "test",
      "groupid" : 0,
      "error" : 0,
      "eta" : 2147483647,
      "elapsed" : 1,
      "job options" : {
        "name" : "test",
        "rw" : "randread",
        "filename" : "testdata",
        "filesize" : "1G",
        "size" : "4M",
        "bs" : "4K"
      },
      "read" : {
        "io_bytes" : 4194304,
        "io_kbytes" : 4096,
        "bw_bytes" : 5890876,
        "bw" : 5752,
        "iops" : 1438.202247,
        ...
        "lat_ns" : {
          "min" : 196917,
          "max" : 9777706,
          "mean" : 693332.602539,
          "stddev" : 322979.882767
        ...
      "write" : {
        "io_bytes" : 0,
        "io_kbytes" : 0,
        "bw_bytes" : 0,
        "bw" : 0,
        "iops" : 0.000000,
        ...
        "lat_ns" : {
          "min" : 0,
          "max" : 0,
          "mean" : 0.000000,
          "stddev" : 0.000000
        ....
}
```
```
"bw_bytes" : 5890876,
 "iops" : 1438.202247,
 "mean" : 693332.602539,
 
 "bw_bytes" : 0,
 "iops" : 0.000000,
 "mean" : 0.000000,
```
### 気づき
bw_bytesがバイト単位のスループット、iopsがIOPS、meanがナノ秒単位の平均レイテンシ
読み込むだけのコマンドだったのか？もしくは書き込みの性能が表示できないくらい小さいのか。
とりあえず性能を見ることができた。しかしこれが良いのか悪いのかわからない。

# 出典
https://gihyo.jp/book/2022/978-4-297-13148-7
【論文メモ】Graph-MLP：Node Classification without Message Passing in Graph

https://arxiv.org/abs/2106.04051

# この論文を読んだ理由
GNN-to-MLPの知識蒸留(KD)手法をサーベイしている際に見つけた論文．
KD手法ではないが，推論をGNNではなくMLPで行うノード分類手法でありKDに考え方が似ているから．

# 解いている課題
- タスク：ノード分類

- **GNNは推論時に隣接時に近傍ノードの特徴量をフェッチするため時間がかかる**という問題

# 提案手法のアプローチ
- 概要図
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3583007/f47e2214-8383-ef30-80a2-d0b3908640fe.png)
  $\rightarrow$MLPの中間層をNContrast Loss（後述）で，最終層をクロスエントロピー (CE)ロスで使用する．

- GCNやGATなどのGNN手法と異なり，**メッセージパッシングを用いずにMLPのみで学習および推論を行う** $\rightarrow$推論が高速に行える．

- 損失関数
    - CEロスの他に，NContrast Lossという損失を導入
    ```math
    \text{loss}_{final} = \text{loss}_{CE} + \text{loss}_{NC}
    ```
    ```math
    \text{loss}_{NC} = \alpha \frac{1}{B} \sum_{i=1}^{B} \ell_i
    ```
    $\rightarrow$バッチ内のノードごとの損失の平均を使用，$\alpha$はNContrast Lossの影響度，$B$はバッチサイズ
    
    ```math
    \ell_i = -\log \frac{\sum_{j=1}^{B} \mathbb{1}_{[j \neq i]} \gamma_{ij} \exp \left(\frac{\text{sim} (z_i, z_j)}{\tau}\right)}{\sum_{k=1, k \neq i}^{B} \exp \left(\frac{\text{sim} (z_i, z_k)}{\tau}\right)}
    ```
    ```math
    \gamma_{ij} = 
    \begin{cases} 
    0, & \text{ノード$j$がノード$i$の$r$ホップ先にあるなら}\\
    \neq 0, & \text{ノード$j$がノード$i$の$r$ホップ先にないなら}
    \end{cases}
    ```

    - 分母：バッチ内の各ノードとの類似度をexpに通したもの和
    - 分子：バッチ内で，rホップ先にある各ノードとの類似度をexpに通したものの和（実験ではrは2~4などを選択していた．）
    - τは温度パラメータ
    
    →**rホップ先のノード同士の中間表現を近づけ，それ以外のノード同士の中間表現を遠ざける**

実験結果
- ノード分類の結果：Citation NetworkでGCNと同程度の性能を発揮，$\alpha=0$はバニラなMLPと同等．
  <img width="60%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3583007/a7cb1a2c-16f6-f198-1798-4d8868155563.png">

- 隣接行列にノイズ（エッジの消失，生成）があっても精度が落ちにくい
  $\rightarrow$**推論の際に近傍ノードの特徴量を使用せず，グラフ構造を踏まえた推論が出来るようなMLPで対象ノードの特徴量のみを使用しているから**だと考えられる．
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3583007/d96dd7ba-73b7-cc15-35af-f0643e28684a.png)

# 次に読む論文
- Graph-less Neural Networks: Teaching Old MLPs New Tricks via Distillation<br>
  （理由）GNNからMLPへの知識蒸留手法として重要な論文であるから．


# この論文の問題点，発展させるとしたら
- 引用ネットワークという限られたデータセットでしか実験を行っておらず，他のデータセットでどの程度の性能を発揮するかが不明．
ArduinoUnoR4WiFi: フォトカプラを介して Lチカ

こちらのプログラムをそのまま使って、フォトカプラを介しての Lチカを行いました。
[ArduinoUnoR4WiFi: フォトカプラで 24V 接点出力]
(https://qiita.com/ekzemplaro/items/6e97fd32e43007a96df2)
>電源は、単4が4個入った電池ボックスを使いました。

## 結線図
![led_6v_diagram.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/a5f8df8b-b222-7a9c-ca41-725dcc0c9c36.jpeg)

## 点灯時の状況
![led_6v.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/7b66ef45-20dd-85c7-8007-65697ff494cf.jpeg)
VScodeの便利技紹介！

今回は、私自身が普段VScodeを使っている際に活用している便利な技をご紹介します！

## 1.HTML5のひな型を入力する方法
![qiita.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2149624/5558de19-c5ba-ac77-cb4a-f542ff3144bb.png)　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2149624/23b778f3-15a6-9ecf-822f-5b22d652f0b1.png)
　上記画像のように「html」と入力すると右下に表示される「html:5」を選択。または、「!」を入力し、右下に表示される「!」を選択することで以下のようにHTML5のひな型を一気に入力することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2149624/1c99c411-a213-f3a8-8f66-cab241611229.png)

　ちなみに「html lang="ja"」の部分ですが、デフォルトが"en"となっております。
 　この部分の設定については、「ファイル」＞「ユーザー設定」＞「設定」
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2149624/67bdbe8c-6126-ebe6-cd42-e5e05e1ade3c.png)
 「Emmet.Variables」を検索し、「lang」の部分を「ja」に変更が可能です。
 ※小文字でも検索可能です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2149624/4d0a9a71-bb14-200b-7f6a-627430a2bdba.png)

## 2.classやidを設定した状態で入力する方法
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2149624/46e326a4-04da-8451-2227-c6a5dbd9b96d.png)
　入力したいタグの後ろにclassの場合は「.class名」、idの場合は「#id名」と記載することで、それぞれ名前をつけた状態で入力することができます。

 ## 3.入れ子構造で入力する方法
　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2149624/c66d6b12-cf7b-ae13-a9cc-d0135739e544.png)
　タグ>タグにすることで左側に書いたタグの中に右側のタグを入れ込んだ状態で入力することができます。

## 4.複数のタグを同時に入力する方法
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2149624/4c5c17cd-03e5-08b3-d90b-7ccb9e385469.png)
　タグ*nと「n」に入力した数字の数だけ同時に入力することができます。

 ---
　今回ご紹介したのはVScodeで最初から使うことができる「Emmet」というプラグインを使った省略記法になります。紹介したもの以外にもまだまだありますので、ご興味がある方は是非ご自身で探してみてください。活用することでコーディングの時間を短縮できると思います！
ブロック層の基本機能

# I/Oスケジューラ
ブロックデバイスへのアクセス要求を`一定期間溜めておいて、次のような最適化処理をしてから、デバイスドライバにI/O要求を発行`します。
### マージ
複数の連続するセクタへのI/O要求を、`一つにまとめる`
### ソート
複数の不連続なセクタへのI/O要求を、`セクタ番号順に並べる`

# readhead
ブロックデバイス内のある領域を読み出し他時に、`近い将来に後続の領域にアクセスする可能性が高い推測して、後続領域を先読みしてページキャッシュに保存しておく機能`です。

# 出典
https://gihyo.jp/book/2022/978-4-297-13148-7

# 感想
ブロックデバイスについて理解していない。
ブロックデバイスについて今後理解が必要。

https://qiita.com/masatom86650860/items/985c0b91208d41ce9ded#%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9:~:text=%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E8%AA%AD%E3%81%BF%E6%9B%B8%E3%81%8D%E4%BB%A5%E5%A4%96%E3%81%AB%E3%80%81%E3%82%B7%E3%83%BC%E3%82%AF%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82%E4%BB%A3%E8%A1%A8%E7%9A%84%E3%81%AA%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E3%81%AFHDD%E3%82%84SSD%E3%81%AA%E3%81%A9%E3%81%AE%E3%82%B9%E3%83%88%E3%83%AC%E3%83%BC%E3%82%B8%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%A7%E3%81%99%E3%80%82%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E3%81%AB%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E8%AA%AD%E3%81%BF%E6%9B%B8%E3%81%8D%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%81%AB%E3%82%88%E3%81%A3%E3%81%A6%E3%80%81%E9%80%9A%E5%B8%B8%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E3%82%88%E3%81%86%E3%81%AB%E3%80%81%E3%82%B9%E3%83%88%E3%83%AC%E3%83%BC%E3%82%B8%E3%81%AE%E6%89%80%E5%AE%9A%E3%81%AE%E4%BD%8D%E7%BD%AE%E3%81%AB%E3%81%82%E3%82%8B%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AB%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82
Mantineって何？

# Mantineとは
Reactで使えるUIライブラリのこと。
コンポーネント以外にも、カスタムhooksライブラリやformライブラリなども提供している。

## 特徴
- 実用的なUIコンポーネントが網羅されている。
    - 例
        - ボタン、入力フォーム、テーブル
        - grid、flexなどのレイアウト
        - メニュー、タブ、ページネーション
        - モーダルダイアログ、ドロワーメニューなどのオーバーレイ表示
        - グラフ、デイトピッカー
- カスタマイズしやすい。
    - コンポーネントごとに、よく使われる便利なプロパティが定められており、独自の動きやスタイルを設定可能。
    - スタイルの独立性を高めるCSSModulesにより、他のコンポーネントに影響を与えずにスタイル変更可能。
- モダンなJavaScriptフレームワークに対応している。
    - UI実装が容易なため、インタラクティブな操作が多く、複雑なコンポーネントが多いSPAに適している。

# 利用手順
1. 依存関係をインストールする。
    - 状況に応じて不要なものはインストールから外してください。
    ```bash
    yarn add yarn add @mantine/core @mantine/hooks@ @mantine/form @mantine/next @emotion/server @emotion/react
    ```
2. App.tsxにスタイルのインポートとProvidewを追加する。
    ```react
    import '@mantine/core/styles.css';
    import { MantineProvider } from '@mantine/core';
    
    export default function App() {
      return <MantineProvider>{/* Your app here */}</MantineProvider>;
    }
    ```
3. 開発サーバーを起動して動作確認を行う。
    ```bash
    npm run dev
    ```

# 参考
[Mantine](https://mantine.dev/)
[React用の柔軟に使えるUIライブラリ「Mantine」の特長と使い方を解説](https://devlog.mescius.jp/react-mantine-ui-quickstart/)
[実務で Mantine UI を使用した所感](https://zenn.dev/yumemi_inc/articles/fef6c1cc3eb78e)
[React向けコンポーネントライブラリにMantineを採用した理由](https://techblog.zest.jp/entry/2023/08/01/113956)
curlコマンドでHTTPメソッド（GET/POST/PUT/DELETE）を実行する方法

curl を使って各HTTPメソッド（GET、POST、PUT、DELETE）を実行する方法は以下の通り。

## GET
GETリクエストはURLにデータを送信して、リソースを取得する。
```shell:zsh
% curl -X GET "https://api.example.com/resource"
```
## POST
POSTリクエストはデータをサーバーに送信して、新しいリソースを作成する。データは通常、リクエストボディに含まれる。
```shell:zsh
% curl -X POST "https://api.example.com/resource" -d '{"key1":"value1", "key2":"value2"}' -H "Content-Type: application/json"
```
## PUT
PUTリクエストは既存のリソースを更新する。データはPOSTと同様にリクエストボディに含まれる。
```shell:zsh
% curl -X PUT "https://api.example.com/resource/1" -d '{"key1":"newvalue1", "key2":"newvalue2"}' -H "Content-Type: application/json"
```
## DELETE
DELETEリクエストは特定のリソースを削除する。
```shell:zsh
% curl -X DELETE "https://api.example.com/resource/1"
```
Microsoft Office を完全にアンインストールする方法(レジストリ操作)

Office2019,2016,365やらたくさん何度もインストールして､PC内にｺﾞﾐが残っている状態に陥ることがたまにあると思います｡(私はあります)

その場合もしプロダククトキーによる認証を行おうとしても2019が入っているにもかかわらず
2019のプロダクトキーで認証を行おうとすると365の方で認証が掛けられてはじかれてしまうことが起こります｡

その場合はレジストリエディタにて以下のファイルを削除します｡
HKEY_CURRENT_USER\Software\Office
HKEY_LOCAL_MACHINE\Software\Office

するとOffice関連のファイルを削除できます｡
まれにCommonというフォルダが削除できずに残ることがありますが､問題にはならないようです｡
「ReactのReactNodeとは何ですか？」の質問に答えます

# ReactNodeとは
TypeScriptでReactを使用する際、子要素を扱う際の型の一つ。
ReactのJSX要素を扱うための型として定義されており、コンポーネント内で扱う要素の範囲を広げることが可能になります。その柔軟性から、React のコンポーネント設計において、子要素を扱う際の型としてよく利用される。

具体的には以下のような型定義となる。

```typescript
type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined
```

# 使う上での注意点
柔軟性が高すぎるが故、型チェックの意味が失われる可能性があります。
特定の型を期待する場合は厳密な型を使用するようにすると良い。
汎用的に使う子コンポーネントには便利だが、より意図を伝えるためには型定義を具体的にすると良い。

# 参考
[React の ReactNode とは何か？](https://commte.net/reactnode)
[ReactNodeをわかりやすく解説](https://www.commte.co.jp/learn-nextjs/React.ReactNode)
[React.ReactNodeと記述者の意図](https://qiita.com/masash49/items/26b4c4cf316e64c2ee10)
React.FCを知ってるようで知らなかった

# React.FCとは
React.FCとは、constによる型定義でコンポーネントを定義できる型のこと。
React.FunctionComponentの略。

# 使い方
ジェネリクスでPropsの型を定義出来る。

```typescript
type Props = {
    hoge: string;
}

const TestComponent: React.FC<Props> = ({ hoge }) => {
    return (
        <div>{hoge}</div>
    )
}
```

使わなくても同じように表現できるらしい。

```typescript
type Props = {
    hoge: string;
}

const TestComponent = ({ hoge }: Props) => {
    return (
        <div>{hoge}</div>
    )
}
```

# React.FCと比べたJSX.Elementの違い
- 肩の柔軟性が高い。
    - 異なる種類のJSX要素を返す関数を一貫して型付けすることが可能になる。
- ジェネリクスのサポートをしている。
    - React.FCではジェネリクスが使えないが、JSX.Elementでは使用可能。
- 静的プロパティを自由に追加することが可能。
    - 必要な場合は明示的に追加しないといけないため注意。

# 参考
[React.FC使う必要ある？](https://qiita.com/islandryu/items/6477ff6a3a9d74a7cc8c)
[わかりやすいかも知れないReact.FCの使い方](https://interrupt.co.jp/blog/entry/2021/03/05/133925)
[【Reactの型定義】FCとJSX.Elementどっち使えば良い？](https://zenn.dev/motonosuke/articles/13d0fdd417ec7c)
[React.FCってなんぞや？](https://qiita.com/kim_t0814/items/50d46b5f560831005ebc)
Storybook8 + React17の環境で "Cannot find module 'react-dom/client'" のエラー 

Storybook8 + React17の環境を作ろうとした際に `Cannot find module 'react-dom/client'` のエラーが発生しそのままではうまく動かなかったため、Storybook内部で使用されている特定のライブラリバージョンを固定することによって対応しました。

# 前提環境
- 元はStorybook6 + React17の環境だったものをStorybook8にアップグレード
- アップグレードの際には公式でも推奨されている `npx storybook@latest upgrade` を使用

# 解決方法
参考ページ
https://github.com/storybookjs/storybook/issues/26842

解決方法としては参考ページに記されているように、 package.jsonに `resolutions` を設定する形になります。

```package.json
{
  ...
  "resolutions": {
    ...
    "@storybook/react-dom-shim": "^7",
  }
}
```

これによってStorybook内部で使われている `@storybook/react-dom-shim` のバージョンが固定され、エラーも解消されます。
HDDの特徴

# プラッタ
データを磁気情報で表現して、それを`プラッタ`と呼ばれる磁気ディスクに記憶するストレージデバイスです。
### 気づき
プラッタは初めて聞いた。

# 単位
データはバイト単位ではなく、`５１２Bあるは４KiBのセクタと呼ばれる単位`で書き込みします。

# データを読み取る流れ
1. デバイスドライバが、データの読み書きに必要な情報をHDDに渡す。`セクタ番号、セクタの数、およびアクセスの種類（読み書きまたは書き込み）など`。
2.  スイングアームやプラッタを動かして、`目的のセクタ上に磁気ヘッドの位置を合わせる`。
3.   データを読み書きする。

### プラッタ、スイングアームとは
https://www.note-pc.biz/content/hdd_structure.html

#### 気づき
hddの中はこうなっていたのか。

# HDD内の動き
https://www.ushio.co.jp/jp/technology/glossary/glossary_ha/hard_disk_drive_suspention.html

１と３は高速な電気的処理ですが、２はそれよりもはるかに遅い機械的な処理です。このためHDDへのアクセスにおける`処理時間のほとんどは、機械的な処理`になります。別の言い方をすれば、いかに機械的処理を減らせるかがHDDの性能を引き出すための肝です。
...
スイングアームの動作によって、いったん磁気ヘッドの位置を半径方向に合わせてしまえば、`回転させるだけで複数の連続するセレクタ上のデータを一気に読める`からです。`一度に読める量にはHDDごとに制限`があります。

# データの処理高速化への工夫
各ファイルシステムは、各ファイルのデータをなるべく`連続した領域に配置`するようにしています。
...
* ファイル内の同時にアクセスするデータをなるべく```連続```する、あるいは、`近い領域に配置`する。
* 連続する領域へのアクセスは、```複数回に分けずひとまとめ```にする。

# 出典
https://gihyo.jp/book/2022/978-4-297-13148-7

# 感想
HDDがデータを読み込んでいるところをみてみたい。
可変に対応した文字省略

```

    <div class="flexBox">
        <div>radio</div>
        <div class="flexBox grow">
            <div class="flex33 flexBox">
                <div class="label">sweet</div>
                <div class="ellipsis">aaaaaaaaaa</div>
            </div>
            <div class="flex33 flexBox">
                <div class="label">dark</div>
                <div class="ellipsis">aaaaaaaaaa</div>
            </div>
            <div class="flex33 flexBox">
                <div class="label">dark</div>
                <div class="ellipsis">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
            </div>
        </div>
    </div>
    
    <style>
    .flexBox {
  display: flex;
  width: 100%;
}

.grow {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
}

.flex33 {
  flex: 0 0 33.333%;
  min-width: 0;
  display: flex;
  align-items: flex-start; /* 変更 */
  margin-bottom: 8px;
  overflow: hidden;
}

.label {
  margin-right: 24px;
  border: 1px solid #333;
  flex-shrink: 0;
}

.ellipsis-container {
  flex-grow: 1;
  min-width: 0;
  max-height: 2.3em; /* line-heightの3倍 */
  overflow: hidden;
}

.ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 3行で省略 */
  line-height: 1.2em; /* line-heightの値を指定 */
  white-space: normal;
  word-break: break-word; /* 単語単位で改行 */
}
    </style>
```
【ChatGPT＋DALL-E3】どちらも知らないであろうものを描画してもらいます。ネコです。


　どうも、カーブミラーです。

　今回は、DALL-E3どころかChatGPT（いずれも）も知らないであろうものを描画してもらいます。

:::note info
本記事は、ChatGPT（有料版）
＋DALL-E3で行なっております。
画像はあります。　あしからず。
:::

　まずは、ニュース。

　OpenAIが、
　　AIの安全対策を強化するための
　　　委員会を設置した
　　　　と発表しました。

　詳しくはこちら。
[ChatGPT手がける企業 AIの安全対策強化のため委員会を設置](https://www3.nhk.or.jp/news/html/20240529/k10014464061000.html)

　これと同時に、
　　OpenAIは、
　　　ChatGPTを駆動する
　　　　画期的なGPT-4
　　　　　テクノロジーの後継となる
　　　　　　次期主力AIモデルの
　　　　　　　トレーニングを
　　　　　　　　開始したことを
　　　　　　　　　発表しました。
***
　さて、
　　本題です。

　今回は、
　　DALL-E3どころか
　　　ChatGPT（いずれも）も
　　　　知らないであろうものを
　　　　　描画してもらいます。

　とは言っても
　　ここでは、新種のネコにします。

　ネコを
　　知らない画像生成AIは
　　　ないと思います。

　DALL-E3も
　　代表的なネコの種類は
　　　知っているようです。
　　　　以前にあれこれ出しました😸

　今回のネコは、
　　X-Twitterに
　　　ポストされた新種です。

　名前を
　　サルミアッキ（salmiak）と
　　　言うそうです。

　では、
　　やり取りをどうぞ。
***
***user***
“salmiak”というネコをご存知ですか？　知らなければ知らないと言ってください

***ChatGPT***
残念ながら、私は"salmiak"という名前のネコについての情報を持っていません。どのような特徴や背景を持っているのでしょうか？

***user***
ネットを検索して

***ChatGPT***
（ネット検索）
"salmiak"とはフィンランドで発見された猫の新しい毛色パターンです。このパターンは、黒と白の「タキシード」カラーを基本に、毛先に向かって白くなるグラデーションが特徴的です。この珍しい毛色は、「salmiak」というフィンランドの塩味のあるリコリスキャンディにちなんで名付けられました。科学者たちは、この毛色を引き起こす遺伝子変異を特定し、「KIT」遺伝子の近くで大きな配列の欠失が関与していることを突き止めました。この毛色は劣性遺伝であり、両親から遺伝子変異を受け継いでいる猫のみがこの毛色を示します。

この特異な毛色は2007年に最初に確認され、主にフィンランド中部の野良猫の間で見られましたが、非常に珍しいとされています。さらに、この毛色に関連する健康上の問題は報告されていませんが、遺伝的特徴を持つペットの健康を常に監視することは重要です。

***user***
ここからDALL-E3用の英文の指示Promptを作成してください。まだ渡さないでください

***ChatGPT***
英文の指示Promptは以下のようになります：

"Create a realistic image of a salmiak cat, a unique fur pattern from Finland. The cat should have a tuxedo pattern, predominantly black with a white chest, paws, and belly. The unique aspect of the salmiak pattern is that each black hair gradually turns white towards the tip, creating a graded appearance reminiscent of the Finnish candy salmiakki, which has a salty licorice flavor. The scene should be set outdoors, in a typical Finnish landscape, perhaps with pine trees and a lake in the background to enhance the Finnish setting."

***user***
英文プロンプトで描画して

***ChatGPT***
![1716947483188.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457238/4fbce85f-b794-c0d7-1554-a1200ca95ddc.jpeg)
***

　本物のsalmiakは、こちら。
![20240529_103823.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457238/b13aa9e0-ef9a-1b20-0597-6031876219b2.jpeg)
[matiere*さんのポスト](https://x.com/matiere/status/1795409444442116566?t=V2K4caZqU28l2SqN0BeVvw&s=03)

　まぁ、似てる……かな？　
***
　やり取りの最初に
　　“知らなければ知らないと言ってください”
　　　と書きましたが、
　　　　これを書かないと
　　　　　下記のようになります。
***
***user***
“salmiak”というネコをご存知ですか？

***ChatGPT***
"salmiak"というネコについては特定の情報が見当たりません。もし「サルミアッキ」という言葉のことを指している場合、それはフィンランドで人気のある塩化アンモニウムを主成分とする甘くないラクリッツ（リコリス）の一種です。もし特定の猫についての話であれば、もう少し詳細を教えていただけますか？それとも他の何かを指していますか？
***
　これは
　　ハルシネーションでは
　　　ありませんが、
　　　　ネコについて尋ねている
　　　　　のは知っているのだから
　　　　　　ここまでの説明は
　　　　　　　必要ありませんよね。

　また、
　　ハルシネーション防止も含めて、
　　　“知らなければ〜”を
　　　　追記したわけです。

　みなさんの
　　作品制作の糧に
　　　なれば、幸いです。

　今回は、ここまで。
nvm の新しいバージョンをインストールするコマンド

新しいNodeインストールしたくて、インストールできる一覧どうやって見るのか忘れたので備忘。

```:ターミナル
nvm ls-remote --lts | grep Latest //インストールできるNode一覧
         v4.9.1   (Latest LTS: Argon)
        v6.17.1   (Latest LTS: Boron)
        v8.17.0   (Latest LTS: Carbon)
       v10.24.1   (Latest LTS: Dubnium)
      v12.22.12   (Latest LTS: Erbium)
       v14.21.3   (Latest LTS: Fermium)
       v16.20.2   (Latest LTS: Gallium)
       v18.20.3   (Latest LTS: Hydrogen)
　　　　     v20.14.0   (Latest LTS: Iron)

nvm install v20.14.0　　//バージョンを指定してインストール

node -v　　　//現在使用しているバージョン確認
v20.14.0
```

使用するバージョンを変更する時
```:ターミナル
nvm use v14.21.3
```




# 参考
https://dev.classmethod.jp/articles/how-to-install-node-using-nvm/
【mac】個人的おすすめセットアップ【備忘録】

# はじめに
備忘録。
個人的なmac初期セットアップのまとめ。

# 設定していく
## システム設定
### デスクトップとDock
#### 基本
:::note info
- `アプリの提案と最近使用したアプリをDockに表示`->`OFF`
:::

#### ホットコーナー
1. Mission Control
1. ホットコーナー
:::note info
- `左下`->`　Mission Control`
- `右下`->`デスクトップ`
:::

### ディスプレイ
#### 解像度
:::note info
- `1680 x 1050`
:::

### キーボード
#### 基本
1. キーボード
1. キーボードショートカット…
:::note info
- `入力ソース`->`前の入力ソースを選択`->`checked/⌘スペース`
- `Spotlight`->`Spotlight検索を表示`->`checked`
- `ファンクションキー`->`F1、F2などのキーを標準のファンクションキーとして使用`->`ON`
:::

### トラックパッド
#### 基本
1. トラックパッド
    1. ポイントとクリック[タブ]

        :::note info
        - `調べる＆データ検出`->`1本指で強めのクリック`
        - `副ボタンのクリック`->`2本指でクリックまたはタップ`
        - `タップでクリック　（1本指でタップ）　`->`ON`
    1. スクロールとズーム[タブ]
    
        :::note info
        - `ナチュラルなスクロール`->`ON`
        - `拡大/縮小`->`ON`
        - `スマートズーム`->`ON`
        - `回転`->`ON`
    1. その他のジェスチャ[タブ]

        :::note info
        - `ページ間をスワイプ`->`2本指で左右にスクロール`
        - `フルスクリーンアプリケーション間をスワイプ`->`4本指で左右にスワイプ`
        - `通知センター`->`ON`
        - `MissionControl`->`4本指で上にスワイプ`
        - `アプリExpose`->`4本指で下にスワイプ`
        - `Launchpad`->`ON`
        - `デスクトップを表示`->`ON`

#### 3本指ドラッグ操作
1. アクセシビリティ
1. [動作]ポインタコントロール
1. [マウスとトラックパッド]トラックパッドオプション…
:::note info
- `ドラッグ方法`->`3本指のドラッグ`
:::

## Finder
### 設定
#### 基本
1. 一般
1. デスクトップに表示する項目
:::note info
- `CD、DVD、およびiPod`->`checked`
- `接続中のサーバ`->`checked`
:::

1. 詳細
:::note info
- `すべてのファイル名拡張子を表示`->`checked`
- `拡張子を変更する前に警告を表示`->`checked`
- `iCloud Drive から削除する前に警告を表示`->`checked`
- `ゴミ箱を空にする前に警告を表示`->`checked`
- `30日後にゴミ箱から項目を削除`->`checked`
:::

## アプリケーション
### ブラウザ
- Chrome
    - ```txt:拡張機能
        - color zilla
        - DeepL翻訳
        - React developer tool
        - vue.js devtool
        - wappalyzer
        - GoFullPage
        ```
- Firefox
- Edge

### エディタ
- VSCode
    - ```txt:拡張機能
        - Noctis Sereno
        ```
- Sublime Text

### コマンドライン
- Wrap

### 開発ツール
- Docker Desktop
- Postman
- Dbeaver
- FileZilla
- SourceTree

### コミュニケーションツール
- Zoom
- Teams
- Slack

### ユーザビリティ
- Rectangle
- Google日本語
- Adobe Acrobat

# おわりに
- とりあえず書いたけど、VScodeについてはいれるべき拡張機能はまだまだある
- お金があるなら、エディタはPhpStormを使いたい
52日目 WorkSpaceについて説明する社畜M

## ♠はじめに  
こんにちは、社畜Mだぜ。
今回はAWSのサービスのひとつ、WorkSpaceについて紹介していくぜ。
さぁ行くぜ！デュエル！

## ♠WorkSpaceについて
俺のターン！ドロー！
Amazon WorkSpacesについてだぜ。
これは簡単に言えばAWSが提供している仮想デスクトップサービスで、場所を問わずに使用でき、様々な端末からアクセスできるぜ。  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3766505/b8b430f0-b4e6-1cbc-50a4-f2ea081f9225.png)
今少し挙げたのを含めてこいつは５つの特徴を持つ。それを教えてやるぜ！イメージは自作だぜ！社畜Mに画力はない…

  
- **一つ目！様々な端末で利用可能**
まず先ほども言ったがAmazon WorkSpacesは仮想デスクトップサービス…利用する端末のスペックには依存しない。つまり、Windows・Mac・iPadなど使用する端末に指定はないぜ！  
    <br>
- **二つ目！場所を問わずに利用可能**
こいつはネットワーク環境があればどこからでもアクセスすることができる。自宅だろうとカフェだろうと作業を可能とするぜ。だがデメリットとしてインターネットに依存している分環境が不安定だと作業効率は落ちるから注意だ。
    <br>
- **三つ目！セキュリティ面の高さ**
 こいつはAWSのプラットフォームをベースに多要素認証(MFA)、アクセス制御設定、仮想デスクトップでの画面転送の暗号化、ユーザー認証などを融合！これらのセキュリティが搭載されていることにより、データの共有やシステムへの脅威におびえる必要がないぜ。
     <br>
- **四つ目！多様なバンドルを提供**
こいつはOS、ストレージ、ソフトウェアリソースなど各種構成のバンドルが潤沢にそろっているぜ。用途や環境に合わせて最適なものを選択し仮想デスクトップを構成することをお勧めするぜ。
    <br>
- **五つ目！自動でできるバックアップ**
こいつは１２時間ごとに自動的にバックアップを行う！これにより万が一データが破壊されてもバックアップからデータを蘇生することができるぜ。
    <br>
- **六つ目！オンプレスミス環境との連携もできる**
AWSとオンプレスミス環境を接続することで、既存のシステムをそのまま使うこともできるぜ。ActiveDirectoryと連携し既存のドメインユーザでAmazon WorkSpacesを利用できるしグループポリシーなどを使えば各種設定を社内規定に合わせることも可能だぜ。

## ♠まとめ
以上のことをまとめると…
Amazon WorkSpacesは仮想デスクトップサービス、場所や端末を問わず利用できる優れたサービスだ。セキュリティも高く、バンドルの提供や自動バックアップなど、便利な機能が揃っている。オンプレミス環境との連携も可能で、柔軟な働き方を実現できるぜ。ビジネスに役立つツールだな。
次に俺の番が回ってくるときはAmazon WorkSpacesで実際に仮想デスクトップを作って感想が言えたらいいなと思ってるぜ。

## ♠おまけ
今回の社会人が知っておいた方がいいビジネスマナーはこいつだ！
「**身だしなみは清潔に**」だぜ。
身だしなみを整えるのは社会人的には当たり前だな。ビジネスにおいて初対面の人と会うときに第一印象を決めるのは身だしなみだ。どれだけ清潔感があるか、就業環境にふさわしいかこれが大事だぜ。具体的に上げるなら髪型・服や袖の汚れ・無精ひげ・口臭や体臭。これらはかなり大事だぜ！ビジネスにおいて第一印象は重要だ心がけような！


社畜Mはこれで、ターンエンド！
１か月で合格 AWS Certified Cloud Practitioner 覚書

# 学習前のITスキル
学習開始時の資格取得状況は以下の通り

AZ-900
ITパスポート
基本情報技術者試験

応用情報技術者試験受験を終えて、次の資格として勉強を始めました。
クラウド回りの基本はAZ-900で学習しており、
１年程度Azureを用いた運用の仕事を行っていました。
AWSについて一切知識がなく、１からの学習でした。

# 学習時間
平日 1.5h　×　21日 = 31.5h
休日 ほぼ0h
直前2日は4h程度実施

合計50h程度？

# 勉強法
### １．Udemyの以下の講座をハンズオンで一通り学習
AWS：ゼロから実践するAmazon Web Services。手を動かしながらインフラの基礎を習得
https://www.udemy.com/share/101Yby3@oMf4oMjcAIaDb7AIhFIkQ1lRl_OLm_1t530UWVgMecpJD-cH1XeQupBRBNoBqCFoKg==/
→この講座で、EC2,Route53,S3,VPC,ELB,IAM,AMI,CloudWatch,CloudFlont等、AWSの基本的なサービスについてハンズオンで理解することが出来ました。

### ２．以下参考書を一読
AWS認定資格試験テキスト　AWS認定 クラウドプラクティショナー　改訂第3版 (ＡＷＳ認定資格試験テキスト)
https://www.amazon.co.jp/dp/4815625387?psc=1&ref=ppx_yo2ov_dt_b_product_details
章末問題は解いたりとかなかったり。
内容が理解できるところとできないところがあったが、とりあえず一読することを優先して読み飛ばしました。

### ３．以下の予想問題集を解く
【CLF-C02版】この問題だけで合格可能！AWS 認定クラウドプラクティショナー 模擬試験問題集（6回分390問）
https://www.udemy.com/share/101I2O3@tI11vH_niLuJthe1U7JngsL-EFBJ3S9DqBophv_bVIJ4VJyVSJHVVdHefBpavfpOLQ==/

解き方の手順としては、
（１）１回分を一通り解いてみる（基本レベルは60%程度の正答率でした）
（２）解説を読みながら、知らない単語をgoogleドライブにリスト化（以下画像参照）していく。
その際、解説にドンドン知識を追記していく。
【画像：Googleドライブの単語リスト（抜粋）】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3802927/f4cc3382-d01c-c546-d273-11c3ede341e1.png)
解説の文よりも、設問の文章のほうが易しいことが多いので、そちらもコピペしてまとめておく。
（３）一通り解説を読み終わったら（リスト化が完了したら）再度同じ問題を解く（95％くらいの正答率でした）
（４）（１）～（３）を繰り返す

試験3日前から問題集を解き始めて、基本レベル２回分、本番レベル２回分を実施しました。

### 参考）初回実施時の得点率
基本レベル１　61%
基本レベル２　64%
本番レベル１　52%
本番レベル２　53%


# 結果
受験者スコア733でギリギリ合格でした。

![画像1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3802927/f322e374-13ea-dbb4-1daf-68b6a468bdb9.png)
AiryTalkのススメ～LTより軽量で気軽な発表方法～

# サマリ

- 準備ゼロが絶対条件
    - パワポを作るのは原則ダメ
- テーマは本人が選び、本人がその場を回す
    - 多くはヒアリング系のテーマ（「みんなの考える良いリーダーとは？」）
- フルリモートの現場のコミュニケーション機会として
    - ファシリテーションの練習になる
    - ちょっとしたことを聞きやすくなる

# 経緯

**動機・きっかけ**
- 企画側：自分も人の話が聞きたい
    - 若手から「先輩の話が聞きたい」と言われて話をしてきたがちょっと疲れてきた
- 企画側：若手にも発表したりファシリテーションしたりする機会を経験させたい
    - 発表が上手くなるかどうかは場数だと思ってる
    - 発表や発言に慣れてくれれば普段の仕事も上手く回っていく
- 参加側：気軽に聞きたいことを聞ける時間がほしい
    - 雑談で振るには微妙なネタ（ちょっと真面目寄り）
    - かといって時間を改めて取ってもらうのは恐縮するネタ（そこまで本気で悩んではない）
    - 出社機会がゼロなので「ちょっと聞く」みたいなタイミングが無い

**企画時に考えたこと**
- 準備をゼロにしたい
    - 「LTをしましょう」というと、ちょっとしたパワポを準備してくる人が出てくる
    - パワポ準備は良いことだけどそれが難しい状況にある人は多く発表のハードルにつながる
- テーマをどうするか、どう進めるかは本人に任せる
    - ファシリテーションの練習にもしたいので、あんまりでしゃばらないようにする

**その他**
- プロパー会（プロパー向けの情報連携の場）で枠を設ける
- 参加者は15名弱。年次はばらばら。
- 頻度は「隔週」
- AirlyTalkを始めるまでは、自分がテキトーにしゃべってたので、その延長でみんなもやってほしいという旨を伝えている（ある程度どんなことをすれば良いのかみんなもイメージがついている）

# 実際のテーマ・進め方
- ３年目：キャリアを考える際に重視していることは？
    - 一人ずつ名指しで聞いていくスタイル（全員）
- ２年目：AIツールの実際どう使ってる？
    - チャットに書いてもらって気になる人に声かけるスタイル
- ５年目：選択的週休３日制が導入されたら選択するか？
    - チャットに書いてもらって気になる人に声かけるスタイル
- １年目：良いリーダー・悪いリーダーとは？/リーダーとして心がけていることは？
    - チャットに書いてもらって気になる人に声かけるスタイル
- ２年目：新入社員ないしは自分より年次が低い人と接するときに心がけていることは？
    - チャットに書いてもらって気になる人に声かけるスタイル
- ４年目：理想のチームってどんなチーム？悪いチームってどんなチーム？
    - チャットに書いてもらって気になる人に声かけるスタイル

# 効果

- 無理なく継続できる
- 今のところ楽しい
- メンバーの発言スキルが上がってる感じがある
- 隔週でやってるので、自分の番が回ってくるまで結構間が空く
    - 15名くらいなので年1～2回程度の頻度