OmniAICreator/Qiita-1.07M huggingface dataset:
VSCodeでC++を実行しようとするとcoutでSegmentation Faultが出る

## 前提
VSCodeでC++を実行するための環境構築はこのページをもとにおこなった。
[Get Started with C++ and MinGW-w64 in Visual Studio Code](https://code.visualstudio.com/docs/cpp/config-mingw#_troubleshooting)

## 🤔発生した問題
以下のコードを実行しようとすると、`cout`の行でsegmentation faultが出る。
```cpp
#include <iostream>
#include <vector>
#include <string>

using namespace std;

int main()
{
	vector<string> msg{"Hello", "C++", "World", "from", "VS Code", "and the C++ extension!"};

	for (const string &word : msg)
	{
		cout << word << " ";
	}
	cout << endl;
}
```
調べたところ、
実行時にロードされるライブラリが想定外のパスからロードされているのが原因だとわかった。
debug consoleのログによると以下のパスからロードされているが、
```
Loaded 'C:\Program Files\Git\mingw64\bin\libstdc++-6.dll'. Symbols loaded.
```
[stack overflow](https://stackoverflow.com/questions/76631846/c-segmentation-fault-on-hello-world-cin-and-cout)によると正しくはこう。
```
Loaded 'C:\msys64\mingw64\bin\libstdc++-6.dll'. Symbols loaded.
```
おそらく、libstdc++-6.dllを想定外のパスからロードしていることで、
名前は同じだがバージョン違いのDLLを読み込んでしまい
不具合が出ている。

このような意図しないパスでDLLが呼ばれる現象は[DLL地獄](https://en.wikipedia.org/wiki/DLL_Hell)と呼ばれる典型的な現象らしい。

## 💡解決策1
人によっては、Git側のディレクトリ名を一度変更してコンパイル、
そのあとディレクトリ名を戻せば以降は問題なく動いたという報告もあった。
```
`C:\Programs\Git\mingw64`
↓
`C:\Programs\Git\mingw64ABC`（この時点で一度コンパイル）
↓
`C:\Programs\Git\mingw64`
```
[visual studio code - Simple hello world segfaults in VSCode Run C/C++ file - Stack Overflow](https://stackoverflow.com/questions/76972637/simple-hello-world-segfaults-in-vscode-run-c-c-file)
しかし、自分の環境だとこの方法では解決しなかった。

## 💡解決策2
コンパイル時に生成される`.vscode/tasks.json`に以下の記述を追記することで解決した。
```json
"args": [
	...略...
	"-static-libstdc++"
],
```
### なぜこれで解決するのか
推測だが、
libstdc++6.dllの「動的ライブラリ」ではなく「静的ライブラリ」を使うことで
DLLの問題を回避しているのだと思われる。

## その他
今回のcoutでsegmentation faultが出る現象は`-static-libstdc++`の追加だけで解消されたが、
libgcc_s_seh-1.dllも同様にGitディレクトリからロードされていた。
そちらで問題が起きた場合、同じように`"-static-libgcc"`と追加することで解決するかもしれない。

## 参考
[[MinGW] libstdc++-6.dllが見つからないため… | Tech控え帳 (chihayafuru.jp)](https://www.chihayafuru.jp/tech/index.php/archives/2980)
[要点まとめ]ネットワークはなぜつながるのか

## 第1章
### P42 ~  P45
○ リクエスト・レスポンス
リクエスト・メッセージに書くURIは1つだけと決まっているため、ファイルは　１度に1つずつしか読み出せない。例えば、1つの文章に画像が3つ張り込んであったら、文章ファイルを読み出すリクエストと画像ファイルを読み出すリクエストで、合計4回、リクエスト・メッセージをwebサーバーに送ることになる。Webサーバーは4回のリクエストが1つのページのものなのか、それとも全く別のものなのか、全く気にかけない。単純に1つのリクエストに対して、　1つのレスポンスを返却するだけ。

### P82 ~ P83
○ IPアドレス・ポート番号
IPアドレスは電話番号と同じようなものと説明されることもあるが、実際には、電話と同じではない。IPアドレスはネットワーク上に存在する個々のコンピュータを識別するために、それぞれに異なる値を割り当てたもの。ということは、IPアドレスで特定できることは、ネットワーク上のどのコンピュータかというところまで。接続動作は、相手側のソケットに対して行うものなので、ソケットを特定しなければいけないが、IPアドレスではソケットまで特定することはできない。電話をかけた時「~~さんをお願いしたいのですが」と言って、話す相手を呼び出すような仕掛けが必要。その仕掛けがポート番号。IPアドレスとポート番号を指定することで、どのコンピュータのどのソケットと接続するのかがはっきりする。
要素が重なる時に、どちらかを目立たせないといけないのはなぜか？

## なぜ知りたいと思ったか？
ナビゲーションメニューにリンク機能を付ける時に、&lt;ul&gt;タグの中に&lt;li&gt;タグを指定したけど、「どちらかの要素を目立たせること」を意識していなかった。
Webアプリの見た目を通じて、「どちらかの要素を目立たせることの重要さ」を知りたかった。


## どちらかの要素を目立たせる必要性が分かる例題

①画像の上にテキストを載せる
[before]
![スクリーンショット 2023-10-28 16.55.27.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3568357/915e9d62-0068-1a95-90f5-e46d016bc34d.jpeg)

**画像にテキストを重ねると、どちらの内容を強調したいかが分からない**

そこで画像を透明にすると、

[after]
![スクリーンショット 2023-10-28 16.59.11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3568357/6942aa51-d984-8245-e928-afc0f00886f9.jpeg)

**画像のインパクトを抑えることができ、テキストの内容が伝わりやすくなる！！**


②リンク機能を持つことを伝える
[before]
![スクリーンショット 2023-10-28 17.36.09.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3568357/7539ed83-bce6-b24b-8aee-c0a268ccd04e.jpeg)

**メニュー項目がナビゲーションメニューで隠れてしまい、メニューとリンクの区別がつかなくなる**

そこでメニュー項目に、「カーソルを当てた時に文字色を変化する機能(マウスオーバーアクション)」を付けると、

[after]
![スクリーンショット 2023-10-28 17.41.34.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3568357/ec16411f-cfd1-6425-1502-e25d62397ab7.jpeg)

**メニューの文字列がリンク機能だと、直感的に分かりやすくなる！！**


## 調べてみて分かったこと
**親要素に子要素を指定して入れ子構造にすると、どちらの要素も目立ってしまい、どんな機能かがユーザーに伝わりづらくなる**
→どちらかの要素に透明化にしてインパクトを抑えたり、マウスオーバーアクションなどの機能を活用して、ユーザーが直感的に「こんな機能だな」とイメージさせたい
【PowerShell】外部プログラムを実行する方法

# はじめに

職場で見たPowerShellのスクリプトで、外部プログラム（.exeや.ps1など）を実行する方法が幾つかあることを知ったので、今回はそれを記事としてまとめてみました。

# プログラムを実行する方法

### パスが通っている場合

* パスが通っている場合は、以下のようにプログラム名を直接入力するだけで実行できます。
  * コマンドプロンプトでお馴染みの書き方です。
  * 拡張子が無くても実行できますが、何となく拡張子も入力した方がしっくりする気がします。（※個人の感想です）

```powershell:パスが通っている場合
> calc
```

### パスが通っていない場合

* パスが通っていない場合は、絶対パスもしくは相対パスでプログラムを実行します。
  * これもコマンドプロンプトでお馴染みの書き方です。
  * ここまでは当たり前レベルの話となりますが...

```powershell:パスが通っていない場合
> C:\test\hoge.ps1
```

### パス中に空白が存在する場合：「&」の利用

* パス中に空白が存在する場合、`コマンドレット、関数、スクリプト ファイル、または操作可能なプログラムの名前として認識されません`というエラーメッセージが出てしまいます。

```powershell:パス中に空白が存在する場合に生じるエラー
PS C:\Users\NKOJIMA> C:\Program Files (x86)\sakura\sakura.exe
x86 : 用語 'x86' は、コマンドレット、関数、スクリプト ファイル、または操作可能なプログラムの名前として認識されません。
名前が正しく記述されていることを確認し、パスが含まれている場合はそのパスが正しいことを確認してから、再試行してください
。
発生場所 行:1 文字:19
+ C:\Program Files (x86)\sakura\sakura.exe
+                   ~~~
    + CategoryInfo          : ObjectNotFound: (x86:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException
```

* パス中に空白が存在する場合は、以下のようにパスの前に`&`を入れることで空白があってもプログラムを実行できるようになります。
  * この書き方はPowerShellに慣れていない人には分かりづらいかもしれません。

```powershell:パス中に空白が存在する場合
PS C:\Users\NKOJIMA> & "C:\Program Files (x86)\sakura\sakura.exe"
```

### パス中に空白が存在する場合：Start-Processの利用

* 以下のように`Start-Process`コマンドレットを利用することでも、「パス中に空白が存在する場合の問題」を回避した上で外部プログラムを実行できます。
  * `パスの前に`&`を入れるよりも、Start-Process`を使った方が分かりやすい書き方だと感じました。

```powershell:Start-Processコマンドレットの利用
PS C:\Users\NKOJIMA> Start-Process "C:\Program Files (x86)\sakura\sakura.exe"
```

# 参考URL

* [Start-Process - Microsoft Learn](https://learn.microsoft.com/ja-jp/powershell/module/microsoft.powershell.management/start-process?view=powershell-7.3)
docker で GUI アプリをブラウザ上に追い出す方法（Xpra）

# 例

```bash: ターミナル
$ xpra start --bind-tcp=0.0.0.0:9876 --start='xhost +local:root'
$ docker run --rm -e DISPLAY=:1 -v /tmp/.X11-unix:/tmp/.X11-unix:ro gns3/xeyes
```

# はじめに

サーバに ssh などで接続して、作業することがあるが、GUI アプリををブラウザに追い出して実行することができると便利ではないだろうか？今回は Xpra 上に Docker をつないで追い出してみよう。コンテナごとにセッションを立てると区別しやすい。ただしこの方法はあまりセキュリティ上よろしい方法ではない。

# Xpra のインストール

ubuntu では以下の方法でインストールできる。

```bash
$ sudo apt install xpra -y
```

最新版は以下から入手できる。

https://xpra.org/dists/stable/main/binary-amd64/

Xpra 自体はtmux のようにセッションを保存するものだ。接続が切れても計算などを続けることができる。

<!--
```
sudo apt install python3-uinput python3-avahi -y
sudo chmod 777 /dev/uinput
--mdns=no --notifications=no --webcam=no
```
-->

# Docker のインストール

以下のシェルスクリプトを実行する。

```bash: docker_install.sh
#!/bin/bash

# Add Docker's official GPG key:
sudo apt-get update
sudo apt-get install ca-certificates curl gnupg -y
sudo install -m 0755 -d /etc/apt/keyrings
curl -fsSL https://download.docker.com/linux/ubuntu/gpg \
  | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
sudo chmod a+r /etc/apt/keyrings/docker.gpg

# Add the repository to Apt sources:
echo \
  "deb [arch="$(dpkg --print-architecture)" \
  signed-by=/etc/apt/keyrings/docker.gpg] \
  https://download.docker.com/linux/ubuntu \
  "$(. /etc/os-release && echo "$VERSION_CODENAME")" stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt-get update

sudo apt-get install docker-ce docker-ce-cli containerd.io \
  docker-buildx-plugin docker-compose-plugin -y

# To run whitout sudo
sudo gpasswd -a $(whoami) docker
```

インストールできたら再起動する。

Xpra をブラウザ上で使うには下のようにする。

```bash
$ xpra start --bind-tcp=0.0.0.0:9876 --start='xhost +local:root'
Entering daemon mode; any further errors will be reported to:
  /run/user/1000/xpra/S41111.log
Actual display used: :1
Actual log file name is now: /run/user/1000/xpra/:1.log
```

`--bind-tcp` はポート番号を指定する。`0.0.0.0` はすべてコンピュータからアクセスを受けいるれという意味だ。 `9876` の部分に使ってよいポート番号を指定する。`--html` オプションはブラウザ上で実行できるかを決める。`--start` オプションは実行するコマンドを決める。ディスプレイは `:1` が使われていることがわかる。

では、ブラウザで `http://<ip>:9876` に接続してみよう。接続状態を見るには下のようにする。

ディスプレイが `:1` だとわかるのでこれをつないで、接続してみよう。`gns3/xeyes` は xeyes の Image だ。

```bash
$ docker run --rm -e DISPLAY=:1 -v /tmp/.X11-unix:/tmp/.X11-unix:ro gns3/xeyes &
```

![スクリーンショット (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986389/86d9b593-0ad7-bc27-9ad7-762d71df9470.png)

Docker で作業が終わったら、Xpra も消しておこう。ディスプレイは `:1` だったので、

```
$ xpra stop :1
```

# 便利なオプション

複数のブラウザで同じディスプレイを開ける。

```
--sharing=yes
```

ユーザ名と環境変数 `XPRA_PASSWORD` に指定したパスワードで認証する。

```
--tcp-auth=env
```

# 参考

http://transit.iut2.upmf-grenoble.fr/cgi-bin/man/man2html?xpra+1

https://docs.docker.com/engine/install/ubuntu/
ffmpeg.wasmを使ってブラウザ上でBlobデータのmimeTypeを変換する

## はじめに
2023年10月現在、WebKitの`MediaRecorder`は`webm`フォーマットの録画、録音に対応していません。
また逆にChromeやFirefoxなどは、WebKitがサポートしている`mp4`フォーマットに対応していません。
つまり全てのデバイスで同じフォーマットのデータで保存を行いたい場合、何かしらの変換処理を加える必要があります。

この記事では、`ffmpeg.wasm`を使って、MediaRecorderの録音結果などを想定したBlobデータの変換方法を紹介します。

## ffmpeg.wasmについて
`ffmpeg`とは、ファイルのフォーマットを変換させるためのツールです。

https://www.ffmpeg.org/

コマンドベースで簡単に特定のフォーマットに変換をさせることができます。
`ffmpeg.wasm`はこれをWebassembly化し、ブラウザ上でデータの変換を可能にしたライブラリです。

https://github.com/ffmpegwasm/ffmpeg.wasm

## MediaRecorderについて
`MediaRecorder`とは、ブラウザ上で録画や録音を行うためのAPIです。

https://developer.mozilla.org/ja/docs/Web/API/MediaRecorder

`MediaRecorder`を用いることで、ブラウザ上で録画、録音を行うことが可能です。

## ffmpeg.wasmを用いてファイルフォーマットを`audio/webm`に統一する
`ffmpeg.wasm`を用いて、ファイルフォーマットを`audio/webm`に統一してみます。
qiita
`ffmpeg.wasm`のセットアップ方法については以下をご覧ください。

https://ffmpegwasm.netlify.app/docs/getting-started/installation

```typescript
import { FFmpeg } from "@ffmpeg/ffmpeg";
import { fetchFile, toBlobURL } from "@ffmpeg/util";

const transcodeToWebm = async (blob: Blob) => {
  const ffmpeg = new FFmpeg();
  const baseURL = "https://unpkg.com/@ffmpeg/core@0.12.4/dist/umd";
  await ffmpeg.load({
    coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
    wasmURL: await toBlobURL(
      `${baseURL}/ffmpeg-core.wasm`,
      "application/wasm",
    ),
  });

  const inputFileName = `input.${blob.type.split('/')[1]}`;
  const outputFileName = "output.webm";

  const file = new File([blob], inputFileName, {
    type: blob.type,
    lastModified: Date.now(),
  });

  await ffmpeg.writeFile(inputFileName, await fetchFile(file));
  await ffmpeg.exec(["-i", inputFileName, outputFileName]);
  const output = await ffmpeg.readFile(outputFileName);

  if (typeof output === "string") throw new Error("Output is not a blob");

  return new Blob([output.buffer], { type: "audio/webm" });
};
```

`transcodeToWebm`内で`FFmpeg`のセットアップも行っていますが、処理が重ためなので分けてしまっても問題ありません。
Reactなどの場合は`useRef`を使う方法が公式でも紹介されています。

https://ffmpegwasm.netlify.app/docs/getting-started/usage


`MediaRecorder`を用いて録画、録音などをしている場合は、`onstop`イベント内で今回紹介したような処理を挟んであげることで、どのデバイスでも同じmimeTypeのBlobデータを生成することができます。
NLB経由のDocumentDBへローカルから接続するプログラム

NLB経由のAmazon DocumentDBにプログラムから接続する際の備忘録。
元々の参考記事は👇

https://dev.classmethod.jp/articles/docdb-via-nlb/

## 結果
`directConnection=true`

```diff_javascript
const { MongoClient } = require('mongodb');

const client = new MongoClient(
  'mongodb://<userName>:<PassWord>@<NLBのドメイン名>:27017',
  {
    tlsCAFile: '****.pem',
    tls: true,
    tlsAllowInvalidCertificates: true,
    tlsAllowInvalidHostnames: true,
    retryWrites: false,
+   directConnection: true,
  }
);
```

ヒント

https://repost.aws/ja/knowledge-center/documentdb-ec2-bastion-host-ssh

> SSH トンネルに MongoDB Compass を使用する場合は、ダイレクト接続をアクティブにしてレプリカ セット接続をオフにします。詳細については、MongoDB Web サイトの「直接接続をオンにする」を参照してください。

参考

https://www.mongodb.com/docs/drivers/go/current/fundamentals/connection/
AWS Glue ジョブで paramiko を使って ssh 接続する　

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

本投稿では、AWS Glue ジョブで Python を使って ssh 接続する方法を紹介します。ssh 接続には paramiko を使用します。

## はじめに

Glue ジョブから外部のサービスなどに処理を投げるときに REST API を呼ぶこともあると思いますが、今回、他の EC2 で処理をさせたいケースがあり、ssh 接続でコマンドをキックする必要性が生じました。
そこで、本投稿では、paramiko を使って AWS Glue の Python シェルから ssh 接続してコマンドを実行する方法を紹介します。

## Glue での paramiko の利用の設定

Glue の実行環境には paramiko が既定でセットアップされているわけではないため、独自に追加してあげる必要があります。AWS ドキュメントによると簡単に指定できそうです。

> --additional-python-modules パラメータでコンマ区切りの Python モジュールのリストを指定することで、新しいモジュールを追加したり、既存のモジュールのバージョンを変更したりできます

https://docs.aws.amazon.com/ja_jp/glue/latest/dg/aws-glue-programming-python-libraries.html

そこで以下のように指定することで、paramiko が使用できるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480312/bf79a553-e643-81b0-50cb-8e4788115ae1.png)

## サンプルコード

では、さっそく適当な EC2 に接続できることを確認してみましょう。
例えば以下のようなコードを実行します。

```python
# ----------------------------------------------------------
IP_ADDRESS = 'xx.xx.xx.xx'
USERNAME = 'xxxxxxx'
PASSWORD = 'xxxxxxx'

CMD = 'uname -a'
# ----------------------------------------------------------

import paramiko

client = paramiko.SSHClient()
client.set_missing_host_key_policy(paramiko.WarningPolicy())

client.connect(IP_ADDRESS, username=USERNAME, password=PASSWORD)

stdin, stdout, stderr = client.exec_command(CMD)

for line in stdout:
    print(line)

client.close()
del client, stdin, stdout, stderr
```

例えば Cloudwatch logs に出力できるようにしておくと `uname -a` の結果が Cloudwatch logs へ出力されることが確認できます(キャプチャの一番下の行)。

```bash
Linux ip-172-31-35-80.ap-northeast-1.compute.internal 6.1.56-82.125.amzn2023.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Oct 10 17:03:53 UTC 2023 x86_64 x86_64 x86_64 GNU/Linux
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480312/c8d123de-58ff-b3e2-3a58-ccf09ecd532d.png)

※CloudWatch Logs には paramiko のインストールの情報も出力されてました。

なお本来は、上記のように接続先、ユーザー名、パスワードなどの情報をハードコードするのは適切ではありません。ここでは ssh 接続できることを確認することが目的のため、そのあたりは気にしないことにします。
また、EC2 に接続する際にはおそらく同じ VPC で稼働させるのが一般的だと思います。今回はそこもいったん無視し、グローバル IP で接続して実験しています。

※いずれ VPC 内で処理するのも試してみたいところではあります

## おわりに

AWS Glue ジョブの Python シェルで paramiko を使って ssh 接続する手順を紹介しました。REST API を利用できない場合でも、サーバーに ssh 接続は可能、というケースはゼロではないと思います。同様に scp も行えますので、scp で送って、ssh で処理して、scp で取得する、みたいな使い方もできるのではないでしょうか。

ぜひご活用ください！
ElastiCacheのキャッシュ戦略

# キャッシュ戦略
「キャッシュを維持管理するサービス（ElastiCache側）」が
どのタイミングで「データベース本体（RDS）」へアクセスしデータをキャッシュを取るか？
どのタイミングで取ったキャッシュを削除するか？
...の戦略

## 遅延読み込み
・必要なときにのみキャッシュにデータを読み込むキャッシュ戦略
　→ユーザーがこのデータをリクエストしてはじめてデータを取りに行って、それからElastiCache側でキャッシュを保存

・キャッシュヒット：データがキャッシュに存在して期限切れでない
　→データを返す。
・キャッシュミス：データがキャッシュに存在していないか、存在したが期限切れ
　→nullを返す。そのあと、ElastiCacheはRDSに対してデータをリクエストし、取得したら新しいデータでキャッシュを更新。

 ・ユーザーは古いデータを取得するかも。。。
 　→「書き込みスルー+TTL」で解決できる

## 書き込みスルー
・データがデータベースに書き込まれると常にデータを追加するか、キャッシュのデータを更新
　→RDSに更新があるとき、すぐElastiCacheを更新

・ElastiCache側でほとんどのデータは読み込まれないかもなので、リソース浪費。。。
　→有効期限 (TTL) を設定して、時間になったら削除することで、無駄なスペースを最小限に抑える

# 参考サイト
https://docs.aws.amazon.com/ja_jp/AmazonElastiCache/latest/mem-ug/Strategies.html

https://www.sunnycloud.jp/column/20210816-01/
LaravelでBladeのフロント実装の一部にReactを使う

Laravelを利用するとき、簡易な実装であればフロントはBladeでいこうという場合がありますが、一部のコンポーネントだけをどうしてもReactで実装しなければならないという場合の実装例をご紹介します。

# 0. 前提
```
curl -s "https://laravel.build/example-app?with=mysql&devcontainer" | bash
```
でLaravel環境を構築した直後とします。

# 1. Reactのインストール
```
npm install -D react react-dom @vitejs/plugin-react
```

# 2. vite.config.jsの修正
```diff_javascript:vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
+ import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js',],
            refresh: true,
        }),
+       react(),
    ],
});
```

# 3. Rectコンポーネントの実装
`resource/js`直下に`components`というディレクトリを切り、Reactコンポーネントの配置場所とします。
```react:resources/js/components/TestComponent.jsx
import { createRoot } from 'react-dom/client';

const TestComponent = (props) => {
    return <div>Hello {props.name}</div>
}

export default TestComponent

// 以下のコードでBladeにReactコンポーネントを差し込んでいる
const elems = document.querySelectorAll('[react=test-component]')
if (elems) {
    Array.from(elems)
        .filter(elem => elem.childNodes.length == 0)
        .forEach(elem => {
            const dataset = elem.dataset;
            const root = createRoot(elem);
            root.render(
                <TestComponent {...dataset} />
            )
        })
}
```
こちらのjsxをBladeに読み込ませることで、`react="test-component"`属性を与えた要素に`TestComponent`を適用することができます。

# 4. Reactコンポーネントの適用
```diff_php
+       @viteReactRefresh
        @vite(['resources/css/app.css', 'resources/js/app.js'])
```
app.jsをBladeで読み込んでいる1行上に`@viteReactRefresh`を追加します。

```diff_javascript:resource/js/app.js
import './bootstrap';

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

+ import './components/TestComponent';
```
app.jsにTesComponentを追加します（ここは工夫のしようがありそうです）。

そしてTestComponentを追加したいBladeに
```html
<div react="test-component" data-name="Laravel"></div>
```
を差し込むと、
```
Hello Laravel
```
と表示されると思います。

# （5. Tailwind CSSを利用する場合）
Bladeで簡易に実装する場合、Laravel Breezeを利用する場合があるかと思います。そうすると自動的にTailwind CSSがインストールされます。
Reactコンポーネント側に記述したクラス名をTailwind CSSに認識させるには、
```diff_javascript:tailwind.config.js
import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
+       './resources/js/components/**/*.jsx',
    ],
    ...
```
こちらの追記が必要です。
天気予報アプリをReactで作ってみた

## はじめに

アプリ開発とは無縁のエンジニアがOpenWeatherMapを使って天気予報を見れるWebアプリを作ってみた。
cssは海外のエンジニアの方を少し参考にさせてもらいました。

![スクリーンショット (7).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584377/6864c21c-cdbd-7c44-1991-e5e7dd256fa5.png)

★機能紹介(ざっくり)★
- 検索は基本ローマ字(理由は後程説明します。)
- ログインすれば星をクリックできる。するとお気に入りリストに追加できる。
- もう一度押すとお気に入りリストから削除される。
- 一画面で現在の天気、気温、湿度、風速、3時間単位での天気、直近5日間の天気を確認できる。
- 天気、時間によって背景画像が変わる。


## 開発環境紹介

言語
JavaScript(React) ※初心者にはきつかった
CSS

サーバーサイド
Node.js

DB
Firebase (google)

API
OpenWeatherMap

## 開発に至ったきっかけと目的

話すと長くなりますが、少しお付き合いください。

きっかけは実家の飲食店のホームページ作りでした。

父「店のホームページ作って」

私「~~正直めんどくさいけど~~頑張ってみる。」

当時は駆け出しの組み込み系エンジニアでそもそもホームページってどうやって作るねん？
からスタート。
YouTubeをみてるとWordPressで簡単にホームページを作ろう！のような趣旨の動画を発見。
さっそく作ってみたが、うーん。。。なんか微妙。
(WordPressを非難しているわけではなく全く使いこなせていなかった)

これがweb開発に興味をもちはじめるきっかけになりました。

ホームページを作りたいというよりかは父のお願いをそっちのけでアプリを作りたい
と思ってしまったので父には申し訳なかったがさっそく開発をしてみた。

何故、天気予報アプリなのかというと、天気とかで背景画像が変わる天気予報アプリがあったら
面白そう＆勉強になりそう。という安直な理由でした。

まとめると、、、
きっかけは父にホームページを作ってと言われた。→web開発に興味を持ち始めた。

天気予報アプリを開発する過程でweb開発について(どんな言語でどんな技術があるか)を
勉強できると思った。

## 工夫した点

#### とりあえず使用者が見えやすいように重要な情報は大きく目立つようにした。

例えば、正直なところ天気予報見るときは天気と気温、最低気温と最高気温くらいで、
他はあまりみないので(私だけ？)、そこが一番目に入るように工夫した。
天気(晴れと曇りとか)は小さいけど背景画像でわかるからそこまで重要ではないと判断。


#### 天気、時間帯で背景画像を変える

天気や時間帯の組み合わせで背景画像が変わるようにした。
天気が直感的で分かりやすいし、色々勉強になりそうだから。

組み合わせでいうと

晴れの場合の
朝
昼
夕方
夜

曇りの場合
朝～夕方(同一の画像)
夜

雨の場合
　・
　・
　・
というように結構な組み合わせがあるので、新鮮味があるかもしれないです。
夕方の晴れだとこんな感じ
![スクリーンショット (10).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584377/806b2467-5e7f-4102-be08-d8e033c0338e.png)



#### お気に入りリスト機能の追加

いちいち自分の地域を検索するのは面倒なので、お気に入りリストに追加したものは
ワンクリックで検索できるようにした。


#### ログイン機能の追加

お気に入りリスト機能において、ユーザーによってお気に入りリストを分ける必要があったため、
googleアカウントにでログイン機能を追加した。

## なぜローマ字で検索なのか

OpenWeatherMapは海外のAPIで一応、日本語でのリクエストも可能です。
※idの後に&lang=jaを足すと日本語で返してくれます。

ここで、問題になるのが、やはり日本語での検索では正確性に欠けるところです。
ある地域では日本語で検索できても、ある地域ではできなかったりと、、、
色々調べましたが不可能みたいで、諦めました。
この開発ではAPI, DB, React, etc...　と、
インプットすることがとにかく多く、ここに時間と労力をかけるべきではないと考えました。
私の唯一の心残りです。。。



## 苦労した点

#### 非同期処理の使い方

APIで情報取得してから色々と関数にデータを渡しているのだが、useEffectをうまく
使いこなせず、データを渡す前に関数の処理がはじまってしまったりと、めちゃくちゃになった。

#### 親から子へのpropsの受け渡し

今では常識として考えられるがpropsを受け取るときに{props}
この形で受け取ることができておらずかなり沼にハマった。

#### css全然使いこなせない

まず、cssにどんなものがあるかすらわからない状態なのでChatGPT先生にはとてもお世話になった。
今でもなかなか使いこなせない。特にレスポンシブ対応には苦労します。

#### 背景画像の条件下での変更

基本的にurl('パス名')で書いてきたが、url()の中に関数を入れる場合、一度importして画像をオブジェクトとして
url(オブジェクト名)にしないと実装できず、沢山の時間を費やした。~~妥協しなかった自分を褒めたい。~~
url(関数())を使う場合は画像をimportして使用することを忘れないでいたい。![スクリーンショット (8).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584377/c764b0a3-7d97-bc1d-e517-5d0be7bb160c.png)

returnの後に記載されているのが画像をimportした際のオブジェクト名です。

![スクリーンショット (9).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584377/e485ae11-19f4-2131-6bbb-7f7e8e2fb468.png)

## 最後に作ってみた感想と今後の課題

正直たくさん苦労はありましたが最後まで楽しく開発を行えたと思います。
特にweb開発は成果が目に見えやすく、期待通りの挙動をしてくれた時は本当に
嬉しかったです。
ただ、反省することはたくさんあります。例えば
- コンポーネントごとに管理できていない
- Next.jsを使えばよかった
- DBもAWSを使用すればよかった

と挙げればきりがありませんが、これからは技術の選定などもしっかり行いたいです。
最後までお読みいただきありがとうございます。
もしよろしければコメントなどしていただくと嬉しく思います。
時間があれば https://weather-b71d6.web.app/
使ってみてください。
NavMeshAgentを使ってキャラクターを自動的に動かす(Unity)

# はじめに
NavMeshAgentを用いてキャラクターを自動的に動かす方法をまとめていきます。

NavMeshAgentに関して知らないよという方は調べると様々な記事が出てくるのでそれを参考にしていただければと思います。

簡単に説明すると、目的地まで自動的に移動させるもので途中にオブジェクトなどが存在する場合はそれをAIで避けて目的地まで向かいます。

# やり方

1. PackageManagerから【AI Navigation】をインポートします
![スクリーンショット 2023-10-28 165642.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471631/8b1a0079-cccc-b37e-83c3-d3314bdcb954.png)


1. するとWindowsタブからAIが選択できるようになるのでそこから【Navigation】を選択します
1. 同様に【Navigation(Obsolete)】も選択します
![スクリーンショット 2023-10-28 165716.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471631/9b98608f-f613-8a57-2d40-7693b5226e4b.png)

1. すると新しくタブが表示されるので適当に配置してください（自分はインスペクタータブと同じところに配置しています）。
1. Navigation(Obsolete)タブに【Bake】ボタンがあるのでクリックします。すると画面内に水色のものが広がります。これがキャラクターが歩ける範囲になります。
![スクリーンショット 2023-10-28 170003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471631/3c9512c8-1ac5-c4f1-72f2-8891f3d4ba3f.png)

1. 次に自動で動かしたいキャラクター（敵など）に【NavMeshAgent】コンポーネントをアタッチします
![スクリーンショット 2023-10-28 173249.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471631/1f67403e-c39e-16af-21f1-1a0a98d2c45f.png)


1. 次に適当に名前を付けたスクリプトをアタッチして、スクリプトを編集します
1. スクリプトの中身を以下のようになります（最低限）
```php
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.AI;

public class EnemyController : Monobehaviour
{
    [SerializeField]
    private NavMeshAgent _navMeshAgent;

    //追いかける対象
    [SerializeField]
    private Transform _player;

    void Update()
    {
        _navMeshAgent.SetDestination(_player.position);
    }
}
```
9.インスペクターから_navMeshAgent（自身）と_player（追いかける対象）を割り当てる
![スクリーンショット 2023-10-28 174139.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471631/6a8682ac-4a7c-e5ba-c3c7-e46464a68071.png)

これでゲームを開始するとプレイヤーのほうに向かって自動で動くようになります

# おわりに
現状常に追いかけてきますが、ゲームによって対象との距離が近くなったら追いかけてくるという風に設定したほうがよかったりするかもしれませんね。
サイバーエージェント Game Client College の設計編に参加してきました！

# はじめに
<!-- 発端や概要を記載 -->

今回CA Game Client Collegeの設計編に参加してきたので体験談を書いていきます。

# 目次
<!-- タイトルとアンカー名を編集 -->
1. [CA Game Client College とは？](#ca-game-client-college-とは)
1. [インターン内容(設計編)](#インターン内容設計編)
1. [インターンで意識したこと](#インターンで意識したこと)
1. [インターンを通じて変わったこと](#インターンを通じて変わったこと)
1. [感想](#感想)
<!-- 各チャプター -->
<a id="#chapter1"></a>

# CA Game Client College とは？
以下Collegeと略します。

CollegeはInGame編、設計編に分かれています。
- InGame編ではインゲーム制作の技術や考え
- 設計編ではゲームの設計技術 

を毎週3時間のオンライン講義形式で学ぶことができます。

基本的な情報はインターンHPを見てください。
[Game Client College～設計編～supported by リスキリングセンター](https://www.cyberagent.co.jp/careers/students/event/detail/id=29133)
※年度によって内容が異なっていると思います。

今回私が受けてきたのは設計編であるため、以降は設計編で学んだ内容について詳しく書いていきます。

<a id="#Chapter2"></a>

# インターン内容(設計編)

インターン前半は講義中心、後半はディスカッションや実習がメインに行われました。

### 講義
設計編の講義内容は基本的な設計知識とUnityC#における、デザイン原則、デザインパターン、ライブラリ活用がメインになります。
各要素におけるキーワードを上げていくと、

| キーワード       | 内容                                                                     | 
| ---------------- | ------------------------------------------------------------------------ | 
| 基本的な設計知識 | コンポーネント(モジュール)間の凝縮度や結合度について等                   | 
| デザイン原則     | SOLID原則、デメテルの法則等                                              | 
| デザインパターン | Singletonパターン 、Observerパターン 、 Factoryパターン 、 MVPパターン等 | 
| ライブラリ       | UniTask , UniRx , DoTween等                                              | 

ゲーム設計について学ぶ上で必要なことを講義+演習という形で学びました。

### グループディスカッション
インターン後半ではアウトプット活動として、グループディスカッションの時間が多く取られました。

普段は異なる事を学んでいる学生同士だからこそ、様々な視点で話し合い、新しい発見と設計への理解を深められる機会になりました。



### 実習課題
最後に、インターンの目標としてMVPパターンを利用したゲーム制作課題提出があります。

MVPパターンは先ほど挙げたようなゲーム設計における知恵の集合体の様な設計技術になります。このゲーム制作では今まで学んだ技術を全て活用でき、非常に手応えを感じ学びに繋がりました。

また、Gitを通じてゲーム制作過程の共有を行うことで、メンターさんにレビュー頂けました。自身の設計やコーディングを把握してレビューして頂くことはとても大変なことなので、非常に贅沢で貴重な体験を積むことができました。

Collegeに参加する際には、是非Gitを利用できるようにしておきましょう。


<a id="#Chapter3"></a>

# インターンで意識したこと

### アウトプットの機会を増やす
サークル活動で行っているチーム制作物の設計レベルを上げるために、設計技術について学んだことを共有しながら、どのように現在のゲーム制作に活用していくのかを考えていきました。

### 情報共有を小まめに行う
最終課題の早期提出とプルリクエストを小まめに送ることで、メンターさんと細かくやり取りができました。
自分のインプットアウトプットが適切か、コーディングに冗長な処理がないか、現場での開発の話など様々なレビューを頂くことができました。

### 挑戦する
最終課題では、Monobehaviourへの依存を減らすためにVContainerを利用し、デザイン原則を順守することでクリーンなアーキテクチャを考えてゲームを作ることを目指しました。

<a id="#Chapter4"></a>

# インターンを通じて変わったこと

#### ゲーム設計への考えが深まった
- MVPパターンのような設計技術を利用すればゲームが楽に作れるようになる
- 設計について学べばゲームエンジニアとして安泰になる

といった勘違いを私もしていた。

- 高レベルの設計をしても、短期的に良い結果は得られない上、コーディングの量も難易度も増加する。
    - そもそも設計はプロジェクトの開発、保守、運用にかかるコストを最適化するためのものであるため。開発規模に沿った設計を考える必要がある。

- 最適な設計は場面によって異なり、進化していくものである。
    - 学び続けなければ、置いて行かれてしまう。


#### 人に見られてもよい、自分本位ではないコーディングを意識するようになった。
- 設計について学んでいくうえで、チーム制作を行うための思考や思想について考えることが多くなった。


- 作成したコード全てをレビューしてもらう経験をしたことで、冗長なコードが無いか、自分の意図するコード設計が成されているか等、コーディングに対して、よりシビアに考えられるようになった。

<a id="#reference"></a>
# 感想

最終課題提出前には、もくもく会があり、実際にサイバーエージェント本社に行き、丸一日社員(メンター)さんの横で実習課題に取り組むことができるイベントもありました。

専門学生としてお金を払ってゲーム技術を学ぶ身だと、Collegeは非常に贅沢に色々な経験、学びを得られるインターンだと感じました。

この3か月で設計への理解がかなり深まり、ゲーム制作にも活かせつつあるので、学んだことをアウトプットする機会を増やしていきたいです。

以上で体験記を終わります。
VSCode Serverがなくなって本体に統合されていた

先日、VPS上にVSCode Serverをインストールしようとしたところ動かなくなっており、詳細を調べているうちにこのスレッドにたどり着きました。

https://github.com/microsoft/vscode-remote-release/issues/7274

ここをみると、どうもVSCode Serverの機能はRemote Extensionに統合されたので、もはや提供されなくなったようです。（setup.shでダウンロード可能なバイナリが無くなっている）

# じゃあどうすればいいのか？

サーバ上でVSCodeを動かして、ブラウザでエディタを立ち上げたい、iPadで開発したいという皆さんは、引き続きVSCode本体で簡単に実現することができます。

```bash
$ code tunnel
```

サーバ上に普通のVSCodeをインストールして、code tunnelと打ち込むだけで、github.devのドメインでトンネルがホストされてブラウザ上でもローカルのVSCodeとも接続可能な状態になります。

## daemon化して常時起動したい

それも簡単です。こいつを打ち込むだけで常時起動してくれます。

```bash
$ code tunnel service install
```

# トンネルじゃなくて直アクセスしたい

個人的にはトンネルは結構ラグがあってあまり快適ではなかったので、個人的には直接つなぎたいわけです。その機能は当初なかったのですが、serve-webというコマンドが少し前のビルドで生えています。

https://github.com/microsoft/vscode/issues/168492

```bash
$ code serve-web
```

これで8000番ポートで起動するので、Cloudflare TunnelやTailscaleなどでつなげば快適に開発ができるようになりました。

なお、実際のコマンドとしてはいくつかの引数をつけて運用しています。--accept-server-license-termsに関しては、お試しで一度起動すればいいのでつけない場合もあります。
```bash
/usr/bin/code serve-web --without-connection-token --accept-server-license-terms
```

rootで起動するような環境は以下のオプションも必要です
```bash
/usr/bin/code --no-sandbox --user-data-dir=/etc/vscode serve-web --without-connection-token
```

※いずれにしても、インターネットからアクセスできないネットワークセキュリティが万全な環境で利用するようにしましょう。

## serve-webも常時起動のdaemon化する

serviceコマンドが見当たらなかったので、自前で書きます。ほかにもオプションはありますが、最低限のみ記入するとこんな感じです。

```bash
$ sudo vim /etc/systemd/system/vscode-server.service
---

[Unit]
Description = VSCode Server Service

[Service]
ExecStart = /usr/bin/code serve-web --without-connection-token
Restart = always # 常に再起動
User = kusuke # root以外で実行する場合ユーザ名をセット、rootの場合この行を消す

[Install]
WantedBy = multi-user.target

---
$ sudo systemctl start vscode-server
$ sudo systemctl enable vscode-server
```



参考：以前書いた記事

https://qiita.com/ku_suke/items/62f1ba1d21667438f2dc
「ウェブ・セキュリティ基礎試験」に合格しました

少し前に「**ウェブ・セキュリティ基礎試験**」に合格しました。
その経験も踏まえて試験の内容や勉強方法、合格までにやったことなどをまとめてみました。
これから受験を考えている人に参考になれば幸いです。

## どういう試験？
「ウェブ・セキュリティに関する基礎的な知見を問う試験」とのことです。
合格率も6割ほどなので、難易度はそこまで高くありません。

https://www.phpexam.jp/tokumarubasic

## 参考書
[体系的に学ぶ安全なWebアプリケーションの作り方 第2版]("https://www.amazon.co.jp/%E4%BD%93%E7%B3%BB%E7%9A%84%E3%81%AB%E5%AD%A6%E3%81%B6-%E5%AE%89%E5%85%A8%E3%81%AAWeb%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9-%E7%AC%AC2%E7%89%88-%E8%84%86%E5%BC%B1%E6%80%A7%E3%81%8C%E7%94%9F%E3%81%BE%E3%82%8C%E3%82%8B%E5%8E%9F%E7%90%86%E3%81%A8%E5%AF%BE%E7%AD%96%E3%81%AE%E5%AE%9F%E8%B7%B5-%E5%BE%B3%E4%B8%B8/dp/4797393165")

## どこで受けられる？
全国の[テスティングセンター]("https://cbt.odyssey-com.co.jp/tokumaru/index.html")で受けられます。


## 出題形式は？
すべての4択式の問題です。

## 勉強時間はどれくらいかかった？
1日1時間、3週間ほどで計21時間ほどだったと思います。

## 勉強法は？
- 参考書を一通り読む
- エクセルに自分なりに内容をかみ砕いてまとめる
- 分からない箇所や理解できない箇所はネットで調べる
- まとめた内容を試験日まで読みこむ

2章は実習環境のセットアップは個人的にはスキップしてもOKだと思います。
自分は構築しましたが、あまり使いませんでした。。
必要だと感じたら構築するでも良いと思います！

## 過去問は？
残念ながら過去問はありません。。
なのでChatGPTに問題を生成してもらって、理解度チェックしておりました 笑
※精度のほどは分かりませんので注意

少しだけ[模擬試験問題]("https://www.slideshare.net/ockeghem/tokumaru-basic")がありますが、問題数も少ないので**試験前の総仕上げ**的に使うことをおすすめします。


## 受験してみた感想
- 試験時間は割とタイトで、1問あたり1,2分でサクサク進める必要あり
- 「正しいものを選べ」「誤っているものを選べ」があるので注意
- いやらしい聞き方の問題も多数あり、消去法で選択しなければいけないものも
- 実際のプログラミングコードが出てくる問題はあまりなかった

基礎試験とはいえ、しっかりと理解しているか？を問われるような問題も多く、ただ丸暗記すればOKというわけにもいかない印象でした。
メインとなる出題範囲の4章はとくに念入りに勉強した方が良いと思います。

以上、少しでも受験の役に立てれば幸いです！
【個人開発】WEBオーダーアプリのデータベース設計をやってみる

モバイルオーダーのアプリのデータベース設計を考える際、最も基本的な機能として「商品の管理」、「ユーザーの管理」、「注文の管理」が考えられます。以下はそれを基にしたシンプルなデータベース設計です。

1. **商品テーブル (products)**
   - product_id: 主キー。ユニークな商品ID。
   - product_name: 商品名。
   - price: 商品の価格。

2. **ユーザーテーブル (users)**
   - user_id: 主キー。ユニークなユーザーID。
   - username: ユーザー名。
   - password: パスワード (ハッシュ化されていることが望ましい)。
   - email: ユーザーのメールアドレス。

3. **注文テーブル (orders)**
   - order_id: 主キー。ユニークな注文ID。
   - user_id: 外部キー。どのユーザーが注文したかを示す。
   - total_amount: 注文の合計金額。
   - order_date: 注文日。

4. **注文詳細テーブル (order_details)**
   - detail_id: 主キー。ユニークな注文詳細ID。
   - order_id: 外部キー。どの注文に関連するかを示す。
   - product_id: 外部キー。どの商品を注文したかを示す。
   - quantity: 注文した商品の数。
   - sub_total: 商品の小計 (price x quantity)。

こうすることで、ユーザーは商品を選び、それに対して数量を指定して注文を行うことができます。注文が完了すると、`orders` テーブルに注文の概要が、`order_details` テーブルには注文の詳細情報が格納されます。

実際の運用においては、セキュリティ対策や拡張性を考慮した設計変更が必要となることもありますので、上記はあくまで基本的な例としての提案です。

## 完成したER図

![ダウンロード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294049/25f991fd-248d-3d4b-5325-95132a61ce49.png)

ER図のコード
```
from eralchemy import render_er
from IPython.display import Image

# ER図の定義
er_code = """
[products]
product_id
product_name
price

[users]
user_id
username
password
email

[orders]
order_id
user_id
total_amount
order_date

[order_details]
detail_id
order_id
product_id
quantity
sub_total

users 1--* orders
users 1--* order_details
products 1--* order_details
orders 1--* order_details
"""

# ER図の定義を一時ファイルに書き出し
with open('er_definition.er', 'w') as f:
    f.write(er_code)

# ER図をファイルに出力
output_file = "er_diagram.png"
render_er('er_definition.er', output_file)

# 画像の表示
Image(filename=output_file)

```

## 要件定義で考慮したこと

上記のデータベース設計の要件定義で考慮したことは以下の通りです：

1. **基本的な機能の確立**:
   - ユーザーの商品選択、数量指定、注文といった最も基本的なオーダーの流れをカバーできる設計としています。

2. **データの独立性**:
   - 商品、ユーザー、注文、注文詳細の情報はそれぞれ独立したテーブルに格納することで、データの管理と更新が効率的に行えるようにしています。

3. **データの関連性の明確化**:
   - 各テーブル間の関連性を外部キーを使用して明確に表現しました。これにより、例えばどのユーザーがどの商品を何個注文したかといった情報を正確に追跡できます。

4. **ユーザーセキュリティ**:
   - ユーザーのパスワードはハッシュ化することが望ましいと指摘しており、これによりユーザーデータのセキュリティを高めることを意識しています。

5. **注文の詳細性**:
   - `order_details`テーブルを導入することで、1つの注文に対して複数の商品を関連付けることができます。これにより、注文の詳細な情報を正確に捉えることができます。

6. **データの正確性と完全性**:
   - 小計を`sub_total`として`order_details`テーブルに持たせることで、注文ごとの商品の価格と数量を乗算した正確な価格情報を持つことができます。

7. **将来的な拡張性**:
   - 上記の設計は基本的なものとしていますが、商品のカテゴリ、プロモーション、ユーザーの住所情報や注文のステータスなど、追加の情報や機能が必要になった場合にも容易にテーブルやカラムを追加できる構造にしています。

要件定義の段階での考慮点は、アプリケーションの主要な機能とデータの関連性、セキュリティ、拡張性など、データベース設計の基盤となる部分をしっかりと構築することでした。
FBXファイルのテクスチャを直す（Unity）

# はじめに
私はよくMixamoというウェブアプリ上で簡単に3Dキャラクターアニメーションを作成することができるツールでFBXファイルを取得するのですが、そのファイルをUnityにインポートするとテクスチャがおかしくなります。ただ、UnityChanのようにピンクになるのではなく鼠色みたいな感じになって別の対策が必要になります。
今回はいろいろ触っていたらテクスチャが正しく適応されたのでその方法をまとめようと思います

# やり方

1. FBXファイルをインポートする
1. FBXファイルをクリックするとインスペクターが、画像のようになる
![スクリーンショット 2023-10-28 162915.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471631/e7746336-f6ee-e427-5134-3a48a66478ff.png)

1. [Materials]の【Material Creation Mode】を"Standarad(Legacy)"に、【Location】を"Use External Materials(Legacy)"に変更します
1. 右下の【Apply】ボタンをクリック
画像のようになれば大丈夫です。
![スクリーンショット 2023-10-28 162930.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471631/a4faf7f5-9c88-aafe-a552-4c33a89a0c60.png)

# まとめ
こういうテクスチャ関連はよくおかしくなるうえに、直し方をわかっていないと時間がすごく無駄になるのでちゃんとやり方を理解しましょう
ESP32-C3-WROOM-02+SSD1306でM5Stack-Avatarを表示

秋月で売ってるSSD1306はM5 GLASS2で使われているSSD1309と互換性があるらしい
```cpp main.cpp
#include <M5UnitGLASS2.h>
#include <M5Unified.h>
#include <Avatar.h>

m5avatar::Avatar avatar;

void setup(){
	auto cfg=M5.config();
	cfg.unit_glass2.pin_sda=9;
	cfg.unit_glass2.pin_scl=8;
    M5.begin(cfg);
	M5.setPrimaryDisplayType({m5::board_t::board_M5UnitGLASS2});

	avatar.setScale(.3);
	avatar.setPosition(-88,-96);
	avatar.init();
}
void loop(){}
```
setPositionの数値は
`(M5Stack-Avaterの表示領域([320,240])-ディスプレイサイズ([128,64]))/2`
引数は(top,left)なのでY座標が先
setScaleはキャンバス中心を基点に拡縮するので好みの値でOK


何故かAPP_CPU_NUMが宣言されていないと怒られたのでAvater.cpp先頭に追記
ESP32C3がシングルコアだから?
```cpp:M5stack-Avatar Avater.cpp
#ifndef APP_CPU_NUM
  #define APP_CPU_NUM 0
#endif
```

https://twitter.com/McbeEringi/status/1718141040316891291
Python実行終了時に音で知らせたい！（Jupyter-Beeperの使い方）

# はじめに

Pythonで重い処理を実行して、実行が終わったら通知音が鳴るようにしたい時があると思います。

その方法を松尾研のLLM講座のSlackで知ったので、メモも兼ねてこの記事を作成しました。

# 方法

Jupyter-Beeperというライブラリを使います。

1. インストール
    
    ```sh
    pip install Jupyter-Beeper
   ```
    <br>
2. 実行

    ```python
    import jupyter_beeper
    
    b = jupyter_beeper.Beeper()
    # (重い処理)
    b.beep(frequency=100, secs=1, blocking=True) # ここでブザー音が鳴る
    ```

    frequencyで音の周波数を, secsで音の長さを秒数で指定します。
Windowsのbatでbatファイル自身が置かれているフォルダーパスを取得

# やり方

```bat
rem このbatファイルが置かれているフォルダーパスを表示
echo %~dp0

rem 実行結果確認のためにいったん止める
pause
```

例えばbatが下記の場所にあった場合…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/eb7d9572-1316-e03d-072c-e4660d6d79f9.png)

実行結果は下記。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/bc11d2dd-60f7-e961-f510-ea985bcaea1e.png)

**末尾に\が付きます。**

# %~dp0は一体何なのか

まず ```%0``` や ```%~0``` の意味は下記を見て下さい。

https://qiita.com/waokitsune/items/ff1260d186065f1e5601

それを踏まえた上で ```%~d0``` のように ```d``` を付けると、はbatファイルの **ドライブ名だけ** を抜き出してくれます。

前述のサンプルをこうすると…

```bat
rem このbatファイルが置かれているドライブ名を表示
echo %~d0

rem 実行結果確認のためにいったん止める
pause
```

結果はこう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/b443de64-44d6-e189-ee9d-3d64f8c58cae.png)

今度は ```p``` を付けると、batファイルの **フォルダー名だけ** を抜き出してくれます。

前述のサンプルをこうすると…

```bat
rem このbatファイルが置かれているフォルダー名を表示
echo %~p0

rem 実行結果確認のためにいったん止める
pause
```
結果はこう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/df0a520b-cb0f-c0fc-8662-1cdc3cafdc5a.png)

1. ```%~0``` は **ダブルクオテーションを除去したbatファイル自身のファイルパス** が取得できる。
1. そこに ```dp``` のオプションを付け、 ```%~dp0``` とすることで、 **batファイル自身が置かれているフォルダーパス** を取得できる。

# 参考サイトさん

https://qiita.com/waokitsune/items/ff1260d186065f1e5601

https://jj-blues.com/cms/wantto-getmypath/

# バージョン

Microsoft Windows [Version 10.0.19045.3636]
今さらinotifyの話

inotifyが今使われているか分からないのですが、「今さら」の係り言葉は「CentOS 6」だったりします。

大変古いですが、バックエンドの奥の方に存在しているので、セキュリティリスクは低めだろうというのと、とにかくファイル数が多くて引っ越すのも大変、という理由で今のところ移し替えの予定はありません。

## 前提

- CentOS 6.6
- サーバのメモリは4GB
- ファイル数は `find` とかで数えようと思っても1時間以上固まってしまうので不明。推定としては100万〜1000万くらい

## 導入

古いと導入にも障害があったりします。

```
echo "sslverify=false" >> /etc/yum.conf
wget http://vault.centos.org/centos/6/extras/x86_64/Packages/epel-release-6-8.noarch.rpm
rpm -Uvh epel-release-6-8.noarch.rpm
sudo sed -i "s/mirrorlist=https/mirrorlist=http/" /etc/yum.repos.d/epel.repo
yum --enablerepo=epel -y install inotify-tools
```

- rpmでepelを導入しようとすると古すぎて404になるので、vaultをwgetする
- SSL証明書で引っかかるのでSSL証明書確認をしない
- httpsじゃなくてhttpにアクセスする

## 設定

設定ファイルは下記を参考にさせていただきました。

[inotifyでファイルの追加・変更・削除を監視する](https://www.server-world.info/query?os=CentOS_6&p=inotify)

## パラメータ

`/proc/sys/fs/inotify/max_user_watches` というパラメータの値は 「8192」がデフォルト値なのですが、そのまま inotify を起動すると、 `/var/log/messages` に

```
Failed to watch /some_dir/; upper limit on inotify watches reached!
Please increase the amount of inotify watches allowed per user via (改行なし)
`/proc/sys/fs/inotify/max_user_watches'.
```

というエラーが出てプロセスが落ちます。

一方で、この値を大きくすると inotifywait 起動時にメモリ使用量がグーンと大きくなってしまうため、あまり一気に上げるのも危険です。
正直、勘所が分からないので倍々にしていったのですが、いつの間にか1桁間違ってしまった（つまり約20倍にした）上、1000万以上で設定していた → それでも落ちた ので、2000万にしたら最後まで行った感じです。（1000万以上の値で落ちたので、ファイル数は1000万以上2000万以下なのかもしれません）

## 起動後

起動後、対象ディレクトリのファイル情報の収集が始まるようです。
今回はファイル数がおそらく1000万〜2000万で、2時間弱かかりました。（スペック次第と思われる）
この情報収集の間は、ロードアベレージが純粋に1上がります。
また、この情報収集の間に対象ディレクトリにファイルをアップしても、ログファイルには記録されません。
この間にファイルを上げるのに影響があるかも、と思ったのですが、特に影響はありませんでした。
inotifywait プロセスのメモリ消費量は、情報収集中は時間経過とおそらく正比例に増えていきます。最終的には、VIRT 148MB、RSS 143MBの消費量となりました。今回は4GBあったので余裕がありましたが、1GBとかだと場合によっては厳しいかもしれません。

## auditd はダメでした。

inotifyを試す前に auditd （ `-w /some_dir/ -p wa -k file_change` ）を試していたのですが、バージョンによって「指定ファイルまたは指定ディレクトリのみ」が対象になるものと、「指定ディレクトリ **以下**」 が対象になるバージョンがあるようで、CentOS6に入っている auditd では、今回は指定ディレクトリ **のみ** だったため、使うことができませんした。
Linuxのシェルスクリプトでファイルに使う条件式をまとめてみた。

# はじめに
Linuxの勉強をしていて、ファイルに関する条件式についていろいろと調べたのでその備忘録を。
**主な使い方**
* ファイルが存在するか
* ファイルが実行可能か
* ファイルが読み取り可能か
を評価してシェルスクリプトを実行したいときに使います。

# 回答
ファイルに関する主な条件式とその意味について、そして名前の由来についてお答えします。

シェルスクリプトにおけるファイルの条件式は、主に以下のものがあります¹²³:

- `-e ファイル名`: ファイルが存在する場合に真を返します。
- `-f ファイル名`: ファイルが存在し、通常のファイルである場合に真を返します。
- `-d ディレクトリ名`: ディレクトリが存在し、通常のディレクトリである場合に真を返します。
- `-r ファイル名`: ファイルが存在し、読み取り可能である場合に真を返します。
- `-w ファイル名`: ファイルが存在し、書き込み可能である場合に真を返します。
- `-x ファイル名`: ファイルが存在し、実行可能である場合に真を返します。

これらの条件式は、if文やwhile文などの制御構文で使用されます。例えば、以下のようなコードでファイルが存在するかどうかを判定することができます:

```bash
if [ -e /path/to/file ]; then
    echo "ファイルが存在します"
else
    echo "ファイルが存在しません"
fi
```

シェルスクリプトという名前は、コマンドラインインターフェース（CLI）の「シェル」という機能と、それを記述するための「スクリプト」というプログラム言語から来ています⁴。

実行例としては、以下のようなコードでファイルが存在するかどうかを判定することができます:

```bash
#!/bin/bash

if [ -e /path/to/file ]; then
    echo "ファイルが存在します"
else
    echo "ファイルが存在しません"
fi
```

**参考文献**
(1) もうシェルスクリプトでIFの書き方を迷わないための逆引き .... https://qiita.com/tomoyk/items/aaa6bf2ddf9b884cb50d.
(2) 【シェルスクリプト】ファイルが存在するかで処理を場合分け .... https://sugublog.org/shell-script-file-exist/.
(3) シェルスクリプトのif文の基本構文と条件分岐オプションの書き .... https://libproc.com/shellscript-ifelse-options/.
(4) シェルスクリプトの入門編7：if文について | Shiro's secret base. https://shiro-secret-base.com/%e3%82%b7%e3%82%a7%e3%83%ab%e3%82%b9%e3%82%af%e3%83%aa%e3%83%97%e3%83%88%e3%81%ae%e5%85%a5%e9%96%80%e7%b7%a8%ef%bc%97%ef%bc%9aif%e6%96%87%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/.

# おわりに
最後まで読んでいただきありがとうございます。
またお会い出来たら幸いです。
Pythonで累積和〜愚直解から最適解まで〜

下記の例題は累積和の基礎となるAtcoderの問題です。
今回はこの例題をもとに、累積和を求める愚直解から最適解までのステップを確認していきます。

https://atcoder.jp/contests/tessoku-book/tasks/math_and_algorithm_ai

## 愚直解

### 各質問に対して、毎回LからRの来場者数の和を直接計算する

この方法ではQ回の質問に対して、毎回L日からR日までのの和を求める計算をします。
その場合、計算量は最大O(N * Q)になります。
N, Qともに取りうる最大値は10 ^ 5なので実行時間制限2秒を超えてしまいます。

### 累積和を事前に求める（直接計算）

１つ目の方法は同じ日数間の合計来場者数を求める場合でも、再度計算する必要がありました。
そのため計算量が大きくなることが欠点でした。

今回は事前にそれぞれの日数の合計来場者数を求めることとします。その場合、同じ日数間の合計来場者数はO(N)からO(1)に削減できます。

例えば、A = [11, 46, 47, 77, 80]のリストがある場合、この累積和を計算してみます。

- S1 = 11
- S2 = 11 + 46 = 57
- S3 = 11 + 46 + 47  = 104
- S4 = 11 + 46 + 47 + 77 = 181
- S5 = 11 + 46 + 47 + 77 + 80 = 261

この配列の大きさであれば手計算でも可能ですが、配列の大きさがNの場合、S1を求めるのに1個の数の足し算、S2を求めるのに2個の数の足し算、SNを求めるのにN個の数の足し算をする必要があります。合計計算回数は N * (N - 1) / 2回になり、Nが大きい場合に実行時間に間に合いません。
そのため次の最適解である累積和の計算方法を取ることにします。

## 最適解

### 累積和を事前に求める（一つ前に求めた累積和を使って次の累積和を求める）

以下の方法を取ることで、計算量O(N)で累積和を求めることが可能になります。

- S0 = 0とする
- i = 1, 2, 3, …., Nとした場合、Si = Si-1 + Aiを計算して累積和Siを求める

A = [11, 46, 47, 77, 80]のリストがある場合、この累積和を計算してみます。

- S1 = S0 + A1 = 11
- S2 = S1 + A2 = 57
- S3 = S2 + A3  = 104
- S4 = S3 + A4 = 181
- S5 = S4 + A5 = 261

例題では累積和を使ってQ回の質問に答えるので計算量はO(Q + N)で計算できます。
ここで例題の注意点として、L日からR日間の累計来場者数を計算する場合、
`（Rの累計来場者数）- （L-1日目の累計来場者数）`を計算する必要があります。
この問題ではL日目の来場者数も含める必要があるため、L-1としています。

最適解による回答

```python
N, Q = map(int, input().split())
A = list(map(int, input().split()))
L = [None] * Q
R = [None] * Q
for q in range(Q):
    L[q], R[q] = map(int, input().split())

# 累積和の計算
S = [None] * (N + 1)
S[0] = 0
for i in range(N):
    S[i + 1] = S[i] + A[i]

for q in range(Q):
    print(S[R[q]] - S[L[q] - 1])
```

Pythonの場合、一次元の累積和は**`itertools.accumulate`**のライブラリを使うことで以下のように簡単に計算することができます。
```python
from itertools import accumulate

N, Q = map(int, input().split())
A = list(map(int, input().split()))
L = [None] * Q
R = [None] * Q
for q in range(Q):
    L[q], R[q] = map(int, input().split())

# 累積和の計算
S = list(accumulate([0] + A))

for q in range(Q):
    print(S[R[q]] - S[L[q] - 1])
```
複数カメラのクロマキー像から立体を得るジオメトリノード

Blender関連の技術交流会である　Blender Conference 2023が行われています

その中のVFXのメイキングのセッションで
VideoGrammetryと呼称する　周囲に並べたカメラ画像のクロマキーから簡易的な立体を生成する手法が紹介されていました
https://youtu.be/nncP63o2EFU?t=1511

フォトグラメトリほど詳細な立体はできないために自分では使わないものの
面白いのでジオメトリノードで再現して　レンダリング画像でテストしてみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151493/ef7fd4b1-bd19-de6c-c382-3ee42f3a50aa.png)
3Dビューの左から元のメッシュ　カメラ一つ分の投影メッシュ　複数カメラの共通部分をブーリアンしたものです

## ノードの例
現在の業務環境がBlender3.3のため　Blender3.3の日本語表示の環境の解説になります
全体の構成はこんな感じです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151493/5987e388-8903-9d07-7194-a4320172b161.png)
画像の特定色以外の部分を平面状のメッシュにする(ColorClipPlane)と
平面メッシュをカメラ基準に押し出す(ExtractFromCamera)に分けてあり
複数のカメラ位置から生成したものをブーリアンに入力しています

撮影したカメラの数だけ入力を増やしていけばいいことになります

## ColorClipPlane
画像に合わせた平面メッシュの生成です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151493/a11140de-9e42-a469-729e-375e89427b1e.png)

内容は極めてシンプルに
・グリッドを生成
・画像の頂点位置の色を取得
・指定色部分の頂点を消して出力
です
残す部分を一旦微妙に移動させて三角化処理を挟むことで
エッジ部分を階段状でなく　階段部分を滑らかにつなぐようなメッシュができるようにしています
また　後の計算のために　Z=1の座標に平面位置があるようにして出力しています

## ExtractFromCamera
こちらも機能としては単純で
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151493/50aa0f79-a0e8-95f1-a51e-84ca18e154b3.png)
メッシュ押し出しのノードで押し出しメッシュを作成して
押し出しの手前側奥側を別々に錘状の座標で移動をさせています

ClipStartが　押し出しでのカメラから近い側の距離　ClipEndが遠い側の距離です

ジオメトリノードの「押し出し」は他の押し出し等とは異なり
側面と押し出し先部分のメッシュはできるものの、底にあたる部分の元のメッシュは残らない挙動になるので
マージ等の操作が増えています
最終的にトランスフォームでカメラ基準の座標になるので移動操作を加えています


このまま使うということは少ないかもしれませんが
何かの参考になれば幸いです。
アップロードされたファイルをdockerに保存する

業務で初めて行ったので備忘録
誤字、他にいいやり方あれば指摘お願いします

### 前提
Routes、Controllerは作成済み、Serviceから書きます

## 1.storageに保存する
requestからファイルを取得する場合はfile()を使用する
file()メソッドの引数にinput要素のname属性を指定することでオブジェクトを得られる
ファイル名を取得したい場合は`getClientOriginalName();`など便利なメソッドがいくつかあります
[参考サイトはこちら](https://qiita.com/nogizaka46/items/01b836f3d123f72a034d)



```
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
use Illuminate\Support\Facades\File;


class TestService 
{
    public function create(Request $request)
    {
        $indexHtml = $request->file('index_html');
        $mainImage = $request->file('main_image');
        $mainImageName = $mainImage->getClientOriginalName();
    }
```
ファイルをstorageに保存してくれる`store()`や`storeAs()`メソッドを使用する

#### store()
`store('ディレクトリ名','保存ファイル);`で指定が可能
`store('')`とディレクトリ名を空にすると`storage/app`に保存される
→`store('test')`にするとstore/app/testにファイルが保存される

`$取得したファイル->store('ディレクトリ名')でも可能`

#### storeAs()
'storeAs('ディレクトリ名','保存ファイル',ファイル名')`でも指定が可能
ファイル名をつけたい時にstoreAsで保存すればいいそうです

`$取得したファイル->storeAs('ディレクトリ名','ファイル名')`でも可能

```
public function create(Request $request)
    {
        $indexHtml = $request->file('index_html');
        $mainImage = $request->file('main_image');
        $mainImageName = $mainImage->getClientOriginalName();

        if(isset($indexHtml)) {
            $indexHtml->storeAs('test','index.html');
        }
        if(isset($mainImage)) {
            $mainImage->storeAs('test',$mainImageName);
        }
    }
```

## 2.dockerコンテナにコピーする
コピーは`File::copyDirectory('対象ディレクトリ','移動先)`を使用する
storage_pathは`/var/www/.../storage`になる

[Illuminate\Support\Facades\File](https://laravel.com/api/10.x/Illuminate/Support/Facades/File.html)
今回はvolumeにコピーします

```
$baseDirectory = storage_path('app/test');
$moveDirectory = '/mnt/ボリューム名/test';

File::copyDirectory($baseDirectory,$moveDirectory);

//今回はstorage/app/testの方はコピーが完了すれば不要なので削除します
Storage::deleteDirectory('test');

```

#### (補足）権限がないとエラーが出る
`"copy(/mnt/www_data_store/index.html): Failed to open stream: Permission denied",`とエラーが出るのでこの場合はコンテナの権限を変更する

ローカル環境ではなくコンテナに入って実行する
```
$ docker exec -it コンテナ名 bash
$ cd mnt
$ ls la
>>drwxr-xr-x ....  ボリューム名     //現在の権限、これではコピーできないので変更する
$ chmod -R 777 /mnt/ボリューム名/
```

毎回`docker exec -it コンテナ名 bash`を実行しなくても
vscodeの「Remote Explorer」という拡張機能を使うと便利


## 追記
storageに一度保存せずそのままdockerに保存出来る方法を知ったので記録しておきます

アップロードされた画像に関しては今回は「main_image」にリネームして拡張子はアップロードされた画像に合わせて保存するようにしています。
例）.pngでアップロードされた場合→「main_image.png」
.jpgでアップロードされた場合→「main_image.jpg」
```
use Illuminate\Support\Facades\File;


$moveDirectory = '/mnt/ボリューム名/test/';

if (!file_exists($moveDirectory)) {
    File::makeDirectory($moveDirectory);
}

if (isset($_FILES['input_html'])) {
    File::move($_FILES['input_html']['tmp_name'],$moveDirectory.'index.html');
} 
if (isset($_FILES['main_image'])) {
    $extension = pathinfo($_FILES['main_image']['name'], PATHINFO_EXTENSION);
    File::move($_FILES['main_image']['tmp_name'],$targetDirectory.'main_image.'.$extension);
}

```
WindowsPCの自動起動

## やりたいこと
### 【営業時間外はPCの電源を切りたい】

+ 毎朝8時にPC自動起動
+ 自作Pythonプログラム自動起動
+ 毎日23時に電源オフ

## 課題
### 【自動シャットダウンはできるが、自動起動ができない】

+ 自動シャットダウンはタスクスケジューラやPythonプログラムから実行できる。
+ しかし、シャットダウンしてしまうと、翌朝の起動ができない。
+ BIOSにタイマー起動（Wake On LAN）のないPCの場合、どうしようもないのかとあきらめかけた。

## 解決策
### 【Windowsの休止を活用する】

**◆発見　休止状態でもタスクスケジューラは動作する◆**
+ タスクスケジューラで休止から復帰し、その後、タスクスケジューラで再起動させる。
+ こうすれば、毎日自動シャットダウン・自動起動を繰り返すことと同等のことが可能。

## 具体的な方法

+ 休止状態に入る、次のようなバッチファイルを作成
```sleep.bat
@echo off
cd C:\tool\PSTools\
psshutdown.exe -d -t 10

echo "10s後にスリープします"
```
<details><summary>psshutdown.exeについて</summary>

こちらから導入しました。
https://learn.microsoft.com/ja-jp/sysinternals/downloads/psshutdown
こちらのようなコマンドでは、復帰できませんでした。
~~~
C:\>shutdown -s -t 0
~~~
</details>

+ sleep.batを実行すると、「このアプリが PC に変更を加えることを許可しますか？」というユーザーアカウント制御のポップアップが表示されれるため、自動的には実行できない。そのため、タスクスケジューラの機能を利用する。

+ タスクスケジューラにsleep.batを「スリープ実行」という名前で登録
![スリープ実行-タスクスケジューラ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/640796/7fa998b4-25ac-d1ea-c43b-c9b169de4570.jpeg)
**「最上位の特権で実行する」にチェックを入れる**

+ 以下のバッチファイルを作成（バッチファイルから登録したタスクを実行させる）
```sleep_task.bat
@echo off
schtasks /run /tn スリープ実行
```

+ sleep_task.batを実行すると、ユーザーアカウント制御のポップアップを回避できる。

+ sleep_task.batを自作Pythonプログラム内から、毎日23:00に実行させるようにした。


## タスクスケジューラで休止状態から復帰させる方法

+ タスクスケジューラに「毎日8:00に実行する」というトリガーで再起動コマンドを登録し、「タスクを実行するためにスリープを解除する」にチェックを入れる。

```
shutdown -r -t 0
```

![スリープ解除のタスク.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/640796/a85bdd2c-56b9-d34b-8657-01cdc2bf2e54.jpeg)

+ スリープ解除タイマーの許可をする。

コントロール パネル→すべてのコントロール パネル項目→電源オプション→プラン設定の編集で「詳細な電源設定の変更」をクリックして開くダイアログ画面で、「スリープ→スリープ解除タイマの許可」で「バッテリ駆動」「電源に接続」ともに「有効」に変更します。

![プラン設定の変更.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/640796/a23fb5f8-235b-a12c-6bdd-de3128a17197.jpeg)
![スリープタイマーの許可.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/640796/53f36823-98b4-e622-7f89-74f89cee4f16.jpeg)

+ これにより、毎朝8:00に休止状態から自動復帰、そのまま再起動するようになる。

## 自作Pythonプログラムをタスクスケジューラまたはスタートアップ機能を使って、PC起動時に自動実行させる。

## 以上の設定で完成
+ 毎朝8時にPC自動起動
+ 自作Pythonプログラム自動起動
+ 毎日23時に電源オフ
が実現できた。
[windows11]Ubuntuインストール時に0.0%でスタック

Ubutnuをインストール時にWindowsStoreのインスト－ルが始まらずコマンドプロンプトでwsl --install -d Ubuntu を実行しても0.0%から進行しなかった。
似たような事案を検索してもなかなか見つけることができなかったところ
https://github.com/microsoft/WSL/issues/9390
こちらを試したところUbuntuのインストールに成功したため書き記しておきます。
管理者権限でpowershellに
wsl --update --web-download
↓実行
wsl --install --web-download
↓実行

とインストールが完了しユーザー名とパスワード入力後Ubuntuが起動しました。
Salesforceでフローを作成しよう「Winter'24 改」～特定の値のレコードを削除させない方法

こんにちは
本橋孝昭です

今回はフローを作成し「特定値のレコードを削除させない方法」について解説します

今回の内容は動画でも解説しています

https://youtu.be/UjWRZU5HRcc?si=aZR8Ww7hsObzKtHm

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


今回は例として
・商談のフェーズが「Closed Won」の商談を削除することを防ぐ

という設定を行います


なお、前回私は同じような記事を作成しましたが、これはフローの他にもカスタム項目や入力規則を作成しなくてはいけなく、なおかつエラーメッセージが分かりにくい方法でしたが、今回Winter'24(2023年10月15日～)から新機能が登場し前回よりも設定が楽になりエラーメッセージも分かりやすくなりました

https://qiita.com/Takaa/items/aadfb55a3b19b96ed2f5

この設定をするために以下のステップが必要です

・ステップ1　商談削除時に起動するフロー作成


それでは早速見ていきましょう

# ステップ1　削除時起動のフロー作成
削除時に起動するフローを作成します

概要はこちら

![フロー1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/4e729b63-5277-b3b6-f99b-52640641fd44.png)

開始条件は上記のように
商談のフェーズが「Closed Won」の商談を削除する　となります


カスタムエラーメッセージはこちらとなります

![フロー２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/4d9a4e0b-86fe-58b9-0b94-3995e8a7b44b.png)
エラーメッセージは今回「受注済みの削除レコード削除は不可です」と仮に設定します

それでは実際商談フェーズが「Closed Won」の商談レコードを削除しましょう

そうすると下記画像のようにエラーメッセージが表示されエラーを防ぐことが可能です

![削除レコード０１.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/838aaffd-db2d-d1be-60ef-aa7abde98a5c.png)


## 参考
新機能カスタムエラーメッセージの詳細は下記ヘルプをご確認ください
この機能はユーザのアイディアをSalesforceが組みとり実現した機能のようです
他にも新機能が続々登場し、使いやすいSalesforceの設定ができればいいですね。

https://help.salesforce.com/s/articleView?id=release-notes.rn_automate_flow_builder_create_custom_error_messages_in_record_triggered_flows.htm&release=246&type=5