OmniAICreator/Qiita-1.07M huggingface dataset:
Homebrewを使ったNodeの環境構築

# Nodeとは？
Node.jsとは、サーバーサイドでJavascriptを実行するための環境です。
Node.jsを使うと、こんなことができます！
- APIの開発
- CLIツールの開発
- バックエンド処理の開発（botなど）

Web上で動くJavascriptとは違ってめちゃくちゃいろんなことができます！
そんなNode.jsを今回はHomebrewを使ってインストールしていきます。

:::note warn
今回はHomebrewを使用してNodeをインストールしていきますので、`macOS`または`LinuxベースのOS（Ubuntuなど）`の環境を使用している方が対象です。
:::

# 環境構築
Nodeのインストールは
1. Homebrewからnodebrewをインストール
1. nodebrewからバージョンを指定してNodeをインストール
1. 指定したバージョンのNodeを適用

の順番に進めていきます。

## Homebrewとは？
Homebrewとは、`macOS`と`Linux (Ubuntuなど)`で使えるパッケージ管理ツールです。
もしHomebrewのインストールが済んでいなければ[こちら](https://qiita.com/minoru_kinugasa/items/0d2704d2b1703849fe27)を参考にインストールを進めてください！

:::note info
Homebrewがインストールしてあるかどうかは
```bash
brew --version
# Homebrew 4.4.16
```
で確認できます。
インストールされていればバージョンが表示されます！
:::

## Nodebrewとは？
Nodebrewとは、さまざまなバージョンがあるNodeの**バージョン管理ツール**です。
例えば最新のNodeを使用したい時や、特定のプロジェクトで使用する1つ前のバージョンを切り替える際などにとっても便利なツールです！

指定したバージョンのNodeのインストールもnodebrewを使用して行なっていきます。

## Nodebrewのインストール
<div></div>

### コマンド
以下のコマンドを実行してnodebrewのインストールをします。
```bash
brew install nodebrew
```
---

### 環境変数の設定
以下のコマンドを実行して、現在使用しているシェルを確認します。
```bash
echo $SHELL
```

出力結果に応じて、環境変数ファイルを編集します。

|出力結果|環境変数ファイル|
|------|-----------------------|
|`/bin/bash`|`~/.bashrc`|
|`/bin/zsh`|`~/.zshrc`|
|`/bin/fish`|`~/.config/fish/config.fish`|

適切なファイルに以下のパスを追加します。
パスを追加することで、nodebrewのコマンドを使用できるようになります。

```bash
# Bashの場合
## nodebrewのコマンドを使用できるように定義
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bashrc
## 定義を書き込んだファイルを適用
source ~/.bashrc

# Zshの場合
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zshrc
source ~/.zshrc

# Fishの場合
echo 'set -gx PATH $HOME/.nodebrew/current/bin $PATH' >> ~/.config/fish/config.fish
source ~/.config/fish/config.fish
```

---

### 動作確認
```bash
nodebrew help
```
このコマンドを実行してﾄﾞﾄﾞﾄﾞﾄﾞっと英語の説明が出てきたら
nodebrewのインストールとセットアップは完了です！

## Nodeのインストール
次にnodebrewからnodeをインストールします！
この時、バージョンを指定してインストールする方法と最新のバージョンをインストールする方法の2つありますのでそれぞれ説明していきます。

### 最新バージョンのインストール
```bash
nodebrew install-binary latest
```
このコマンドを実行します！
以上です！

---

### バージョンを指定してインストール
まず、存在しているバージョンのリストを確認します。
```bash
nodebrew ls-all
```
実行するとインストール可能なバージョンが全て表示されるので、希望するバージョンをみつけてください。


インストールは以下のコマンドで行います。
```bash
nodebrew install-binary v18.0.0
```
今回では`v18.0.0`の部分を希望するバージョンに変えて実行してください！

---

### インストールされているバージョンを確認
以下のコマンドを実行することで、インストールされているバージョンと
現在適用されているバージョンが表示されます。
```bash
nodebrew list
# v18.0.0

# current: none
```

---

### インストールされているバージョンを適用
以下のコマンドを実行することで、指定したバージョンのnodeが使用可能になります。
```bash
nodebrew use v18.0.0
# use v18.0.0
```

---

### Nodeのバージョンを確認
nodebrew（バージョン管理ツール）からではなく、
nodeからバージョンを確認してみます。
```bash
node -v
# v18.0.0
```
バージョンが表示されたらnodeのインストールと適用が完了です！

:::note info
もしバージョンが表示されない場合は以下のことを確認、実行してみてください。
- ターミナルの再起動
- パスを通す際の環境変数設定ファイルは合っているか
- 正しいバージョンをインストールしているか
:::
ドイツの物理学者オズワルドとA判・B判の起源

王子製紙のWWWページ「[紙の豆知識](http://www.ojipaper.co.jp/p_m/p02/p02_01.html)」には、1998年から2005年にかけて、以下の記述が存在していた(WayBackMachine [1998](https://web.archive.org/web/19981207050049/www.ojipaper.co.jp/p_m/p02/p02_01.html#6)-[2005](https://web.archive.org/web/20051218195958/www.ojipaper.co.jp/etc/p_m/p02/p02_01.html#6))。

>**1:√2の理由**
>
>紙の幅（短い辺）、長さ（長い辺）の比率はA判、B判とも常に1:√2であることに気付いていましたか？
>これは19世紀末のドイツの物理学者オズワルドによって提案された「ルート長方形」と呼ばれる形です。
>このように幅と長さを1：√2にしておけば、A判、B判いずれの紙も、長辺で半分に折りさらに半分に折ることを何回繰り返しても、相似形のまま面積が半分になっていくのでまったく紙に無駄がでないのです。
>
>＜「おもしろい紙のはなし」（日刊工業新聞社）より＞

しかし、小宮英俊『おもしろい紙のはなし』(日刊工業新聞社, 1990年11月)には「ドイツの物理学者オズワルド」なる人物は登場しない。どうやら、この人物は、王子製紙のオリジナル・キャラクターらしい。ならば、せめてフルネームを知りたいところだが、それすらわからない。

この「ドイツの物理学者オズワルド」をマに受けてしまった人々は少なくなかったらしく、たとえば古庄恵実『紙の中にひそむ数学』(教育科学／数学教育, 41巻5号(2000年5月), pp.44-47)は、以下のように書いている。

>紙の寸法にはA判とB判がある。A判はドイツ工業規格である。B判は江戸時代の公用紙，美濃紙に由来する日本独自の規格である。A判，B判いずれの紙も長さの比が1:√2の長方形であり，この長方形のことを「ルート長方形」という。何回長い辺で半分に折っても，辺の長さの比は一定で，相似形のまま面積は半分になっていくので紙に無駄がでない。この形を紙の規格にすることを，19世紀末ドイツの物理学者，オズワルドが提案した。

あるいは、アンク『パソコンの仕組みの絵本』(翔泳社, 2010年9月)は、以下のように書いている(p.142)。

>A表記のほうはA版といい、19世紀末のドイツの物理学者オズワルドによって提案された、ドイツの工業規格を採用したものです。現在では国際規格になっています。対してB判は、江戸時代の美濃紙の規格をもとに作成した、日本独自の規格です。

牧野高吉『英語対訳でわかるニッポンと日本人の不思議』(辰巳出版, 2020年2月)は、以下のように書いている(p.82)。

>Size A was originally the size which a German physicist, Oswald, proposed in the 19th century, and the size of one square meter is called A0, and the half size of this is called A1, and then the half size of A1 is A2, and so on.

東京都目黒区は『デジタル時代の本づくりを考える』(めぐろう, [第15号](https://www.city.meguro.tokyo.jp/houkago/kosodatekyouiku/seishounen/megurou_no15.html)(2023年3月), pp.16-17)で、以下のように書いている。

>A判は、19世紀末ドイツの物理学者オズワルドによって提案された規格で、面積が1平方メートルの「ルート長方形」をA0としました。

もちろん、[一昨日の記事](https://qiita.com/KoichiYasuoka/items/d850309a01e62c648529)にも示した通り、ドイツ工業規格DIN 476「Papierformate」(1922年8月18日制定)のA判を提案したのは、Walter Porstmannである(cf.《[Normung in den Graphischen Gewerben](https://archive.org/details/kljb-16c/page/126)》 Klimschs Jahrbuch, Bd.16 (1921/1922), S.126-132)。また、日本標準規格第92号「紙ノ仕上寸法」(1929年12月4日決定)のB判を提案したのは、矢野道也である(cf. 郡山幸男: [最近わが印刷界の進境と技術](https://dl.ndl.go.jp/pid/1264405/1/18), 昭和5年版出版年鑑 (東京書籍商組合, 1930年8月), pp.17-20)。いずれも「ドイツの物理学者オズワルド」ではない。さて、どうしたものやら。
プログラミング言語戦線に異常あり！FORTRANとVBの復活

プログラミング言語の人気度ランキングのTIOBEを調べていたところ、不思議なことが起こっていた。Pythonがうなぎ上りなのは周知の事実だが、なぜかFORTRANとVisual Basicがじりじりと人気を獲得しているのだ。FORTRANやVisual Basicは過去のものだと思っていたのに、何か変なことが起こっていると直感し、ChatGPTに聞いてみた。

### 高機能コンピュータの需要のためFORTRANが人気に
SDGsの影響もあるかもしれないが、宇宙開発、気象シミュレーション、流体力学、材料工学の大量の計算が必要となっている。
私自身以前、東京大学で計算材料学の研究プロジェクトがあり関わっていたので、そこではFORTRANを使っている人をよく見かけた。計算材料学とはコンピュータで分子のシミュレーションを行って、新しい材料を作っていこうというものだ。研究者たちは、FORTRAN派とC言語派の２派に分かれていた。計算量が必要なため当時は京などのスパコンを使ったり、GPUを使って大量計算を行おうとする研究者が何人もいた（懐かしー）。
FORTRANも昔とは違ってオブジェクト指向など現代風なプログラミング手法を取り入れ、アップデートされたため数理処理に強い面が見直されて人気が出てきているらしい。

![TIOBE_FORTRAN.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3734194/00067486-3831-6010-38d7-fde3bf3c2444.png)

### コロナ禍でリモートワークが増え、業務効率化のためVB利用者が増えた
数のVisual Basicの変遷を見てもらうと、2020年3月ごろに急激な上昇がある。コロナ禍の安定共に下がったものの、徐々に上昇しているのがわかる。
コロナ禍でリモートワークが増えた会社員が家での業務を効率化するためにVisual Basicを使い始めたのきっかけである。コロナ禍が安定してきてもVisual Basicの利用に気づいた会社員がその後も使い続けた結果、徐々に人気が増えているようだ。

![TIOBE_Visual_Basic.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3734194/1581b864-5a5b-66b8-ffe4-a203ed8964f5.png)

### メジャーな流れに惑わされない
PythonやC系（C, C#, C++）などのメジャーなプログラミング言語の変遷の裏で実は、見えない大きな流れが見ることができる。別にFORTRANやVisual Basicをやり始める必要ないが、何が世の中で求められてきているのかを把握することは必要であろう。
PHPで「PHPのプログラムを記述する」の動作を確認してみた。

# 概要

PHPで「PHPのプログラムを記述する」の動作を確認してみました。
以下のページを参考にしました。

https://www.javadrive.jp/php/ini/index1.html

# 環境整備

PHPがインストールされていなかったので、以下のコマンドでPHPをインストールしました。

```
$ sudo apt install php
```

# 実装

以下のファイルを作成しました。

```test.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>PHPテスト</title>
</head>
<body>

<?php
print 'Hello Word';
?>

</body>
</html>
```

以下のコマンドを実行しました。

```
$ php test.html 
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>PHPテスト</title>
</head>
<body>

Hello Word
</body>
</html>
```

# まとめ

何かの役に立てばと。
Go言語(プログラミング)入門メモ⑳

## pipelineによる並行処理
並行処理のプログラムの作り方は様々あるが、その中にpipelineというものがある。複数のチャネルを用意して順番に値を渡していくような並行処理をpipelineという。

## pipelineを使って並行処理を実施する。
main関数からゴルーチンを一つ立ち上げる。最初に立ち上げたゴルーチンが処理をする。処理した結果をチャネルに渡して、次のゴルーチンで処理をする。これを繰り返して最終結果をmain関数に渡す。
イメージ図
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579705/2ee8e199-d6d4-9b15-4aff-adfbb43e6cf2.png)

上記の流れを踏まえて実際にコードを書いてみる。main関数でfirst,second,thirdという名前の3つのチャネルを作成する。

~~~
func main() {
    first := make(chan int)
    second := make(chan int)
    third := make(chan int)

~~~

最初のゴルーチンとして実行するproducer関数は、チャネルのfirstを引数とする。producer関数では、forループでiを0から10まで値を増やして、iの値をfirstのチャネルに渡す。
渡し終わったら「defer close(first)」でチャネルを閉じる
~~~
func prducer (first chan int) {
    defer close(first)
    for i := 0; i < 10; i++ {
        first <- i
    }
}
~~~
2つ目のゴルーチンとして、値に2を掛ける処理を行うmulti2関数を書く。引数にはfirstとsecondのチャネルを渡す。firstのチャネルからrangeで値をとってきて、2を掛けてからsecondのチャンネルに渡す。先ほど同様にdeferでチャネルをクローズする。
~~~
func multi2(first chan int, second chan int) {
    defer close(second)
    for i := range first {
        second <- i *2
    }
}
~~~
3つ目のゴルーチンは、値に4を掛ける処理のmulti4関数。引数にはsecondのチャネルとthirdのチャネルを渡す。secondのチャネルからrangeで値をとってきて、4を掛けてからthirdのチャンネルに渡す。先ほど同様にdeferでチャネルをクローズする。
~~~
func third(second chan int, third chan int) {
    defer close(third)
    for i <- second {
        third <- i * 4
    }
}
~~~
main関数で3つの関数をゴルーチンとして実行する。最後にthirdのチャネルをmain関数で受信するのでfor文とrangeで出力する。
全体のコードとしては以下。

~~~
func prducer (first chan int) {
    defer close(first)
    for i := 0; i < 10; i++ {
        first <- i
    }
}

func multi2(first chan int, second chan int) {
    defer close(second)
    for i := range first {
        second <- i *2
    }
}

func third(second chan int, third chan int) {
    defer close(third)
    for i <- second {
        third <- i * 4
    }
}

func main() {
    first := make(chan int)
    second := make(chan int)
    third := make(chan int)

    go prducer(first)
    go multi2(first, second)
    go multi4(second, third)
    for result := range third {
        fmt.Printl(result)
    }
}

以下のように出力される
0
8
16
24
32
40
48
56
64
72
~~~
実行するとproducer関数で送信された0から9なでの値にmulti2関数で2を掛けて、multi4関数で4を掛けた値が表示される。

## 学習に使用した教材
・『入門】Golang基礎入門 + 各種ライブラリ + 簡単なTodoWebアプリケーション開発(Go言語)』M.A EduTech
https://www.udemy.com/course/golang-webgosql/?utm_medium=udemyads&utm_source=bene-msa&utm_campaign=responsive&utm_content=top-1&utm_term=general&msclkid=81e2f24a32cc185d275d953d60760226&couponCode=NEWYEARCAREERJP

・『シリコンバレー一流プログラマーが教える Goプロフェッショナル大全』酒井 潤 (著)
https://www.amazon.co.jp/%E3%82%B7%E3%83%AA%E3%82%B3%E3%83%B3%E3%83%90%E3%83%AC%E3%83%BC%E4%B8%80%E6%B5%81%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E%E3%83%BC%E3%81%8C%E6%95%99%E3%81%88%E3%82%8B-Go%E3%83%97%E3%83%AD%E3%83%95%E3%82%A7%E3%83%83%E3%82%B7%E3%83%A7%E3%83%8A%E3%83%AB%E5%A4%A7%E5%85%A8-%E9%85%92%E4%BA%95-%E6%BD%A4/dp/4046070897
プリンシプルオブプログラミング 

# 第１章
https://qiita.com/Kudo_panda/items/0fa39bd387434818f20a

# 第２章
## 2.1～2.4

https://qiita.com/Kudo_panda/items/4c96cf665765fad9b882

## 2.5 SLAP

https://qiita.com/Kudo_panda/items/a2e7d384efd829f7e507

## 2.6 OCP

https://qiita.com/Kudo_panda/items/38bb54519475beacb9c1

## 2.7 名前重要

https://qiita.com/Kudo_panda/items/caeb6f1c3cbe8e0567c3

# 第３章
## 3.5～3.7

https://qiita.com/Kudo_panda/items/ced5bfedd50f9b4b2906

## 3.8～3.10
VSCodeでEmacsキーバインド且つWindowsのCtrl+x,c,v

# はじめに

VSCodeで開発をしています。元々Unix Emacs/Muleで仕事をしていましたが、長年Windowsの会社に転職し、手がWindowsに慣れてしまいました。但し、最近VSCodeを利用していると、所々Emacsのキーバインドが欲しく、また所々には、Windowsのキーバンドが欲しくなります。

多くの方は、ターミナルのキーバインドはカスタマイズされていいますが、VSCodeのエディター部分はどのようにカスタマイズされているのでしょうか？

色々試してみて、よい拡張や設定ブログ等に当たりましたので、今回は導入の忘備録となります。

## Emacsのキーバインド

Emacsのキーバインド拡張は様々出ています。次のブログの評価が役に立ちます。

https://zenn.dev/hidenori3/articles/92158332e348ae

やはり、Awesome Emacs Keymapでしょうね。VSCodeからインストールしてください。

https://marketplace.visualstudio.com/items?itemName=tuttieee.emacs-mcx

簡単にVCodeから拡張をインストールするだけで、Emacsのキーバインドが利用できました。

M - >, M - <などのMのキー割り当てについてですが、ESCではなくAltを割り当てられています。

こちらに、ESCキーを利用する設定がありますので、実行してみてください。改良されたのでしょうね。頭が下がります。

https://blog.goo.ne.jp/dak-ikd/e/4db7766775366100c6d16a91f1d0cd09

以下が設定となります。User\Settings.jsonを開き、以下を追加してみてください。

"emacs-mcx.useMetaPrefixEscape": true

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283070/7fac6150-c62e-6165-d4a7-72018a3a3b50.png)

ESCが利用出来ています。


## Windows Ctrl+x,c,v

色々試しましたが、以下の設定が一番簡単で、メンテがしやすそうでした。

https://note.com/anspsky/n/ndc47d1f09148

追加のインストールとして、次をインストールします。

Copy Word in Cursor

次に、コマンドパレットからkeybindings.jsonを開き、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283070/bfb85f52-9dfb-1be4-189d-52224ba205e9.png)

上記のあんすぺさんのブログにある設定を追加してみてください。よく出来ていると思います。

簡単でした。

# 終わりに

もう一つ欲を言うと、Ctrl+sも実は怪しいもので、WindowsのGUIだと、保存と理解しているので、Ctrl+x sの世界に戻れない自分がもどかしいです。

Happy Hacking!!!
[エラー解決] ReactのWebアプリケーションで白紙ページが表示されたまま

# 概要
ほぼタイトルのままですが、
Reactでとあるアプリケーションを開発していたのですが、何らかのタイミングで白紙ページのまま各画面が白紙ページのままとなってしまいました
そのエラーを解決した際の記録を残しておきます

# 環境
- React 18.3.1
- TypeScript 5.6.2
- vite 6.0.5

# 現象
開発時のコードで、``` npm run dev ``` でWebアプリケーションを起動
ブラウザでページを表示しようとしても、白紙ページのまま

ブラウザのコンソールにはエラー原因と思われるものは表示されていませんでした

# 原因
main.tsxの読込コードを誤って削除してしまっていた
main.tsxが読み込まれなければ、当然、root にレンダリングされる事が無いから白紙ページのままでした。
Appのコードがそもそも読み込まれていなければ、エラーそのものも出力されることも無いと言うオチでした。

## 修正前
``` index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Media Control</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
```

## 修正後
``` index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Media Control</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script> <!-- ←ここを間違えて削除してしまっていた -->
  </body>
</html>

```

# まとめ
- 小まめにGitコミットを残して、動く状態を残しておけば良かったと思いました
日本語を扱うDBはSQL_ASCIIに要注意！

# 遭遇した問題
PostgreSQLを使って従業員のデータを管理するテーブルを作成しようと以下のSQLを実行しました

```crate.sql
CREATE TABLE employee (
  id SERIAL PRIMARY KEY,
  family_name VARCHAR(20) NOT NULL,
  first_name VARCHAR(20) NOT NULL,
  name_kana VARCHAR(20) NOT NULL,
);
```

```insert.sql
INSERT INTO
  employee (
    id,
    family_name,
    first_name,
    name_kana,
  )
VALUES
  (
    1,
    '佐藤',
    '一子',
    'サトウ イチコ',
  ) ON CONFLICT (id) DO NOTHING;
```


しかし、あるエラーにより処理に失敗している…
> ERROR: value too long for type character varying(20)

このエラーを見た私は

VARCHAR(20)の最大文字数エラーか😏

エラーが出ているのは文字数的に'サトウ　イチコ'だろうな
VARCHAR(50)ぐらいにするか、データ型をTEXTすれば治るだろう…

とたいした調査をせずにそう決めつけて解決しようとしてました
（日本語文字数すら数えず直そうとしてました。よくないですね）

# ちょっと待った！
この問題を上司に報告したところ、

「PostgreのVACHAR(n)はバイト数ではなく単純に文字数でカウントされるはずなのでいけるはずだけど？🤔」

とアドバイスをいただきました

## PostgreSQLのVARCHAR(n)
ということでPostgreSQLの最大文字数カウントのルールを調査しました
> SQL では、`character varying(n)`と`character(n)`という2 つの主要な文字型が定義されています。`n`は正の整数です。これらの型は両方とも、最大`n`文字数 (バイト数ではありません) の文字列を格納できます。

https://www.postgresql.org/docs/current/datatype-character.html

たしかにバイト数ではなく文字数でカウントされるらしい

ちなみに`character varying(n)`は`varcahr(n)`の別名とのこと。

# じゃあなぜエラーになっていたのか？
結論から言うと、DBのエンコードがSQL_ASCIIに設定されていたことが原因でした😅

SQL_ASCIIに設定している場合は、文字エンコードが無視されて日本語データもバイト数で扱うようです

> 設定がSQL_ASCIIの場合は、符号化は実行されません。よって、この設定は特定の符号化を使用している場合には、その符号化を無視するようになってしまいます。

https://www.postgresql.jp/docs/9.4/multibyte.html

バイト数でカウントされるなら、

全角文字（サトウイチコ）: 6文字 × 3バイト = 18バイト
全角スペース: 1文字 × 3バイト = 3バイト
合計: 21バイト

でエラーになるのは頷けますね

# 対応策
エンコードをUTF-8に変更すれば解決OK

日本語文字列に対応しているエンコードを設定することで、最大数のカウントをバイトから文字数にすることができます

ちなみに一度作成したDBのエンコード設定は変えられないそうです…
新しくDBを作り直してSQLを実行したら無事通りました😮‍💨
Excelでセル先頭のシングルクォーテーションを一括削除

# やりたいこと
Excelで「'000123」と入力されたセルからシングルクオーテーションを削除し、文字列「000123」に変換したい。

# 試したこと
以下の方法を試したが、シングルクォーテーションを削除できなかった。

```vba
range("A1").value = range("A1").value
range("A1").value = range("A1").value2
range("A1").value = range("A1").text
Replace(range("A1").value, Chr(39), "")
Replace(range("A1").value2, Chr(39), "")
Replace(range("A1").text, Chr(39), "")
```

数値（「123」）には変換できるものの、その後Format関数で「000123」に戻そうとすると、再びシングルクォーテーションが復活してしまう。

### PrefixCharacterプロパティについて
PrefixCharacterプロパティを使用すると、シングルクォーテーションの有無を取得できるが、読み取り専用のため変更はできなかった。
[PrefixCharacterプロパティ](https://learn.microsoft.com/ja-jp/office/vba/api/excel.range.prefixcharacter)

# 解決策
セルの書式をクリアすると、シングルクォーテーションが削除され、見た目どおりの「000123」の文字列として扱うことができる。（拍子抜け:rolling_eyes:）
書式クリア後に数値⇔文字列の操作をしてもシングルクオーテーションが復活することもなかった。
```
range("A1").ClearFormats
```
Spring BootアプリをAWS EC2とRDSにデプロイする手順

# はじめに
Spring Bootでアプリを作成したので、せっかくならAWSにデプロイしてみようと思い、実際に試してみました。

## AWS構成
今回は試験的にAWS環境へデプロイするため、以下のようなシンプルな構成で環境を構築しました。
![Reptalicious構成図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/600926/cdbdb7f1-86b4-efaa-4a43-bc50e6464ecb.png)


## 前提条件
本記事では、すでにEC2インスタンスとRDSインスタンスが作成済みであることを前提とします。
私の場合、以下の環境を用意しました。
・EC2：Amazon Linux 2023
・RDS：MySQL 8.0

## 手順
### EC2にSSH接続
まずは、EC2に接続します。

### 必要なツールをインストール
今回はGitHubからプロジェクトをEC2にcloneするため、Gitをインストールします。
```
sudo dnf install -y git
```
DBとしてMySQLを使用するため、MySQLをインストールします。
```
sudo dnf -y install https://dev.mysql.com/get/mysql84-community-release-el9-1.noarch.rpm
sudo dnf -y install mysql mysql-community-client
```
Java21でアプリを作成したので、Java21をインストールします。
```
sudo dnf install -y java-21-amazon-corretto
```
Spring Bootプロジェクトをビルド・実行するために、Mavenをインストールします。
```
sudo dnf install -y maven
```

### MySQLへの接続を確認
```
mysql -h RDSのエンドポイント -u username -p
```
passwordの入力を求められるので、設定したpasswordを入力します。    
以下の画面のように接続が成功することを確認します。  
![MySQL接続成功.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/600926/8cddc72b-c079-e11c-43e4-94630198b741.png)


### GitHubからプロジェクトをclone
```
git clone https://github.com/USERNAME/REPOSITORY.git
```

### application.propatiesを編集
application.propatiesを開いてdatabase情報を編集します。
```application.propaties
spring.datasource.url=jdbc:mysql://[RDSのエンドポイント]:3306/[DB名]?useSSL=false&allowPublicKeyRetrieval=true
spring.datasource.username=[RDSのusername]
spring.datasource.password=[RDSのpassword]
```

### SpringBootを起動
```
mvn spring-boot:run
```
<details><summary> BUILD FAILURE</summary>

### 私が最初にSpringBootを起動させたとき、次のエラーが発生しました。
```
[ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.13.0:compile (default-compile) on project [プロジェクト名]: Fatal error compiling: error: release version 21 not supported -> [Help 1]
```
Mavenの `maven-compiler-plugin` がJava21をに対応していなかったため、`JAVA_HOME` の設定を見直します。
```
echo 'export JAVA_HOME=$(dirname $(dirname $(readlink -f $(which java))))' >> ~/.bashrc
source ~/.bashrc
```
その後、再び `mvn spring-boot:run` でSpringBootを起動させます。

</details>

### アクセス確認
`http://EC2のIP:8080` にアクセスして、画面が表示されることを確認します。

# まとめ
今回、無事にSpring BootアプリをAWS環境にデプロイすることができました。
しかし、Security Groupのポート設定忘れなど、基本的なミスもいくつかあり、環境構築の重要性を改めて実感しました。
今回はシンプルな構成でしたが、今後はELBの追加やマルチAZ構成など、より実践的な構成を学びながら取り入れていきたいと思います。
シェルスクリプトの条件分岐と繰り返し

# はじめに
条件分岐について調べたので、これに繰り返しを加えたものを作りたいと思いました。

# 条件分岐と繰り返しの組み合わせ

今回は1から20までを繰り返します。
17までは残留、18以下は降格という出力をする内容になります。

記載すると以下のようになります。

```
#!/bin/bash
for i in {1..20}
do 
	if [ "$i" -le 17 ]; then
		echo "残留"
		continue
	elif [ "$i" -ge 18 ]; then
		echo "降格"
		continue
	fi
done
```

出力結果は以下の通りです。

```
残留
残留
残留
残留
残留
残留
残留
残留
残留
残留
残留
残留
残留
残留
残留
残留
残留
降格
降格
降格
```

残留が17、降格が3つ出力されています。
誤解されないように文章を書く技術

# この記事の目的
誤解をされやすい表現を理解する

# 目次
[否定表現](#否定表現)
[可能表現](#可能表現)
[比喩](#比喩)
[強調](#強調)
[範囲・起点](#範囲起点)
[数値](#数値)
[その他注意が必要な表現](#その他注意が必要な表現)
[参考文献](#参考文献)

# 否定表現
### ▼否定表現の多用は、読み手を不安にさせてしまうので注意
#### 読み手の行動を促すときは肯定文を使用する
>:x:　節電対策のため、退勤時はオフィスの空調を付けたままにしないでください
>:o:　節電対策のため、退勤時はオフィスの空調を消してください
#### ただし、注意、制限、禁止事項は否定表現OK
>:o:　他人のプライバシーを侵害しないでください
### ▼「～しないと、～しない（できない）」といった２重否定は注意
#### 否定表現は、１文１つにする
>:x:　正しく書かないと、読み手に伝わりません
>:o:　正しく書くと、読み手に伝わります
>:o:　誤って書くと、読み手に伝わりません
### ▼全体否定なのか部分否定なのか区別する
#### どれもできないかったのか、できないものがあったのかを明確にする
>:x:　試験の問題は、全部できなかった
>:o:　試験の問題は、全部ができなかった
>:o:　試験の問題は、全部できたわけではなかった

# 可能表現
### ▼「れる」、「られる」は使用しない
#### 一般動詞（「見る」、「読む」など）は「～ことができる」を使用する
>:x:　１階では、新しいPCが見られます
>:o:　１階では、新しいPCを見ることができます
>:x:　最新の投稿を読めます
>:o:　最新の投稿を読むことができます
#### 動作名詞（サ変名詞）には、「～できる」を使用する
>:x:　外部ディスプレイを利用することができます
>:o:　外部ディスプレイを利用できます
>:x:　システム画面で設定もできます
>:o:　システム画面でも設定できます

※サ変名詞とは
名詞に「する」を付けて動詞として使うことができる名詞のこと

# 比喩
### ▼重さや大きさ、温度などの感覚を伝えるために比喩を使用する
#### 読み手によって差が生じる表現は避ける
>:x:　この冷房システムは、大きなスタジアムも対応しています
>:o:　この冷房システムは、東京ドームの広さも対応しています

# 強調
### ▼ボタン名、機能名などを括弧で囲む
#### 画面上の要素の名称の場合、操作対象が明確になる
>:x:　変更を保存するをクリックする
>:o:　［変更を保存する］をクリックする

※強調と引用と区別するために、「」ではなく［］や《》を使う。

# 範囲・起点
### ▼範囲を示す表現は誤解されやすい
#### 「～を含む」にする
>:x:　部長ら１２名
>:x:　部長をはじめとする１２名
>:o:　部長を含む１２名
### 「〇〇未満」は〇〇（数値）は含まないため誤解を生む
>:x:　２０人未満
>:o:　１９人以下

# 数値
### ▼できるだけ数値を使って具体的にする
>:x:　しばらくお待ちください
>:o:　約５分間、そのままお待ちください

# その他注意が必要な表現
### ▼並列表現
#### 「～たり、～たり」を対応させる
>:x:　保存したり、更新してください
>:o:　保存したり、更新したりしてください
#### 「～と、～とを」で記述する
>:x:　変更前と、変更後を比較する
>:o:　変更前と、変更後とを比較する
### ▼同じ表現
#### 同じ意味の言葉と繰り返さない
>:x:　あらかじめ予定していたタスクをこなす
>:o:　あらかじめ準備していたタスクをこなす
### ▼文語調
#### 古い印象をあたえるため、文章口語体を使用する
>:x:　機能性のみを重視する
>:o:　機能性だけを重視する
>:x:　いかなる場合も近づかないでください
>:o:　どのような場合も近づかないでください
### ▼条件表現
#### 大前提条件には「場合」を、小前提条件には「とき」を使用する
>:x:　PCに異常があるとき、５年以上使用年数が経過している場合は、無料で交換ができます
>:o:　PCに異常がある場合、５年以上使用年数が経過しているときは、無料で交換ができます


# 参考文献
[日本語スタイルガイド（第3版）](https://jtca.org/learn-tc/publication/guide_jsg/)
【Unity】InterleavedGradientNoiseでディザ抜きを作ってみた

# はじめに
アークナイツ・エンドフィールドのベータテストが始まり、グラフィック面でどのような技術が使われているのか話題になっています。

その中でもこちら

https://x.com/nagakagachi/status/1880827027684811232

自分の知らないディザ抜きがされており、気になったので調べてみました。

Interleaved gradient noiseというノイズらしいです。

# ソースコード
記事中のコードはこちらです。

https://github.com/ayaha401/Study-InterleavedGradientNoise

# 一般的なディザ抜き
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/608797/48ca221a-e970-4f8b-8398-d94646b686c3.png)
```C#
// ディザ抜きに必要な4x4の閾値
// https://docs.unity3d.com/ja/Packages/com.unity.shadergraph@10.0/manual/Dither-Node.html
static const float DITHER_THRESHOLDS[16] =
{
    1.0 / 17.0,  9.0 / 17.0,  3.0 / 17.0, 11.0 / 17.0,
    13.0 / 17.0,  5.0 / 17.0, 15.0 / 17.0,  7.0 / 17.0,
    4.0 / 17.0, 12.0 / 17.0,  2.0 / 17.0, 10.0 / 17.0,
    16.0 / 17.0,  8.0 / 17.0, 14.0 / 17.0,  6.0 / 17.0
};

// https://docs.unity3d.com/ja/Packages/com.unity.shadergraph@10.0/manual/Dither-Node.html
// value : Ditherの強度
// screenPosition : screenPosition
float dither(float value, float2 screenPosition)
{
    float2 uv = screenPosition.xy * _ScreenParams.xy;
    uint index = (uint(uv.x) % 4) * 4 + uint(uv.y) % 4;
    return value - DITHER_THRESHOLDS[index];
}
```
BayerMatrixと呼ばれるディザのパターンを用意しそれをディザの強度として取得して網掛けを作成する方法です。
ディザのパターンはテクスチャで用意したり、上記のように配列で用意したりします。

様々なゲームでカメラと3Dモデルが干渉してモデルの内部が見えてしまうのを防いだり、ドット絵では色数が少ないがグラデーションをさせるのに使用されることが多いです。

https://pin.it/a4pJMOn9l

こんな感じのグラデーションです。

# InterleavedGradientNoise
参考は以下のリンクです。

https://blog.demofox.org/2022/01/01/interleaved-gradient-noise-a-different-kind-of-low-discrepancy-sequence/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/608797/884aef38-0e7c-1d11-631d-f899b545d669.png)

```C#
// https://www.iryoku.com/next-generation-post-processing-in-call-of-duty-advanced-warfare/
// value : uv
float interleavedGradientNoise(float2 value)
{
    float f = 0.06711056 * value.x + 0.00583715 * value.y;
    return frac(52.9829189 * frac(f));
}
```

このメソッドを使用するだけでBayerMatrixとは違う模様でディザ抜きができます。

## このディザ抜きにメリットはあるのか？
InterleavedGradientNoiseはTAAで使用するために最適化されたノイズ生成方法らしく、ディザ抜きに関してはメリットはそんなにないと思います。

でもBayerMatrixのディザ抜きに比べて独特な模様は出にくいとは思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/608797/9e6eaf1a-ceb0-108d-84f1-0b365b93adb5.png)
(https://bartwronski.com/2016/10/30/dithering-part-three-real-world-2d-quantization-dithering/ より)
BayerMatrixを使用するとこのようなハッチング模様が段階的に出てしまいますが

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/608797/472786b1-aa75-0b22-1ea1-9abfbe218331.png)
(https://bartwronski.com/2016/10/30/dithering-part-three-real-world-2d-quantization-dithering/ より)
InterleavedGradientNoiseなら段階的な模様が出ません。

そのためディザ抜きで段階的に模様が出るのを控えめにすることができるというメリットはあるかもしれないです。
しかし、ディザ抜き＝BayerMatrixを使用する、この模様！という認識がゲームやってる側にある気がするので変えることが絶対的なメリットにつながるとは思えないです。
**DeepSeek-V3 AIがクリエイターや開発者にどのように役立つのか**

テクノロジーの世界では、クリエイターや開発者が効率的に作業を進めるためのツールを常に探しています。そこで登場するのが、**DeepSeek-V3**です。この先進的なAIアシスタントは、開発者やコンテンツクリエイター、テクノロジー愛好家にとって非常に貴重なリソースとなっています。以下に、DeepSeek-V3がどのようにあなたの作業をスマートかつ迅速にするかを紹介します。

![photo-1539683255143-73a6b838b106.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3999431/64abb376-a22e-450a-dad0-d1169cb7a037.jpeg)



### [**1. コードのアシストとデバッグ**]()
DeepSeek-V3の最も強力な機能の1つは、コーディングのサポートです。バグに悩まされている場合、コードの最適化が必要な場合、新しいフレームワークを探している場合でも、以下のことができます：
- **コードスニペット**: Python、JavaScript、Javaなどの言語でコード例を迅速に生成。
- **デバッグの支援**: コードのエラーを特定し、修正方法を提案。
- **アルゴリズムの説明**: 複雑なアルゴリズムをわかりやすく解説。

**例**:  
*Pythonスクリプトで行き詰まっていますか？「Pythonで二分探索を実装する方法は？」と尋ねれば、明確で動作する例を提供します。*



### [**2. 学習とスキル開発**](https://github.com/Akshayadeveloper)
新しい技術を学びたい開発者にとって、DeepSeek-V3は個人教師のような存在です。以下のことができます：
- プログラミングの概念を簡単な言葉で説明。
- 新しい言語やフレームワークを学ぶためのリソースやチュートリアルを提供。
- ドキュメントや技術記事の理解を支援。

**例**:  
*「Reactフックの仕組みを説明して」と尋ねれば、例とベストプラクティスを交えて解説します。*


### **3. 開発者向けコンテンツ作成**
テックブロガーやYouTuber、コンテンツクリエイターにとって、DeepSeek-V3はアイデアの生成や記事の草案、技術ドキュメントの作成に役立ちます。以下のことができます：
- トレンドの技術トピックに関するブログ記事やチュートリアルを執筆。
- コンテンツのアウトラインを生成。
- 複雑なトピックを簡潔に説明。

**例**:  
*「2024年のトップ5機械学習ライブラリ」に関するブログ記事が必要ですか？詳細なアウトラインや記事全体を執筆できます。*


### **4. プロジェクトの計画とブレインストーミング**
新しいプロジェクトを始める際、DeepSeek-V3はアイデアのブレインストーミングやワークフローの計画、使用するツールや技術の提案を支援します。以下のことができます：
- あなたの興味に基づいてプロジェクトのアイデアを提供。
- Web開発、モバイルアプリ、データサイエンスプロジェクトに適した技術スタックを提案。
- プロジェクトのロードマップを作成。

**例**:  
*「リアルタイムチャットアプリを構築するための良い技術スタックは？」と尋ねれば、フレームワーク、データベース、ライブラリを提案します。*


### **5. 繰り返し作業の自動化**
開発者は、ボイラープレートコードの記述やデータのフォーマットなど、繰り返し作業に時間を費やすことがよくあります。DeepSeek-V3は以下のことでこれらの作業を自動化します：
- プロジェクトのボイラープレートコードを生成。
- JSON、XMLなどのデータ構造をフォーマット。
- 自動化スクリプト（ファイルのリネーム、データスクレイピングなど）を記述。

**例**:  
*ディレクトリ内のファイルをリネームするスクリプトが必要ですか？要件を説明すれば、PythonやBashのスクリプトを提供します。*


### **6. 技術トレンドの最新情報**
テクノロジーの世界は急速に進化しており、最新情報を追い続けるのは大変です。DeepSeek-V3は以下のことができます：
- AI、Web開発、クラウドコンピューティングなどの最新トレンドを要約。
- フレームワークや言語の新機能を解説。
- 新興技術に関する洞察を提供。

**例**:  
*「Python 3.12の新機能は？」と尋ねれば、最新機能の簡潔な要約を提供します。*


### **7. コラボレーションとコミュニケーション**
チームで作業している場合、DeepSeek-V3は以下のことで効果的なコミュニケーションを支援します：
- 明確で簡潔なメールやメッセージの草案を作成。
- 会議の議題やプロジェクトレポートを生成。
- 技術的な専門用語を非技術的な関係者向けに平易な言葉に翻訳。

**例**:  
*複雑なAPIをチームに説明する必要がありますか？概念を簡潔に説明するプレゼンテーションやドキュメントの草案を作成します。*


### **DeepSeek-V3が選ばれる理由**
多くのAIツールが存在する中、DeepSeek-V3が選ばれる理由は以下の通りです：
- **正確性**: 信頼性の高い、よく調査された情報を提供。
- **多機能性**: コーディングからコンテンツ作成まで、幅広いタスクをサポート。
- **ユーザーフレンドリーな設計**: 明確で簡潔な応答を提供し、あなたのニーズに合わせたサポートを実現。


### **まとめ**
DeepSeek-V3は単なるAIアシスタントではありません。クリエイターや開発者の作業を変革する強力なツールです。コードのデバッグ、新しいスキルの習得、次の大きなプロジェクトの計画など、あらゆるステップでサポートします。ぜひ使ってみて、あなたのワークフローがどのように速く、スマートに、効率的になるかを実感してください。
USキーボードのMacからリモートデスクトップ接続時、Ctrl+SpaceでIMEを切り替える

## 初投稿
おっきーと申します。
ずっと記事を拝見してばかりで、アウトプットは初めてです。
宜しくお願い致します。

## はじめに
私は昔からUS配列のキーボードを使用しており[^1]、どのOSでもIMEの切り替えはCtrl+Spaceでやっています。
MacからWindows( Ctrl+SpaceでのIME切り替えは設定済み )へRDP接続した時にどうやっても上手くいかず、ずっとストレス全開でした。
殆ど諦めていたのですが、運良く@mtkbooooさんの[記事](https://qiita.com/mtkboooo/items/309838ab3d63f80000c7)を見つけました。
ただKarabinerのバージョンが違うからか、そのままでは動きませんでした。
記事を参考に色々と試し、私なりに動くように出来たので書いてみようと思います。

### 試した環境
#### RDPクライアント
- Mac OS Sequoia 15.1.1
- Karabiner-Elements 15.3.0
#### RDPホスト
- Windows 11 Pro
- Windows 10 Pro

## Karabiner-Elementsの設定
[Karabiner-Elements](https://karabiner-elements.pqrs.org)は有名なので、インストールや基本的な使い方は他所におまかせします(手抜き)。

1. メニューバーのKarabinerアイコン → Settings...をクリック
1. Complex Modifications → Add your own ruleをクリック
1. サンプルのjsonが表示されると思いますが、全て消去して下記のjsonに書き換えます
1. saveをクリックして完了!

```json:for_RDP.json
{
    "description": "Ctrl+Space -> Option+` (RDP用)",
    "manipulators": [
        {
            "conditions": [
                {
                    "bundle_identifiers": [
                        "^com\\.microsoft\\.rdc\\.osx",
                        "^com\\.microsoft\\.rdc\\.macos",
                        "^com\\.2X\\.Client\\.Mac"
                    ],
                    "type": "frontmost_application_if"
                }
            ],
            "from": {
                "key_code": "spacebar",
                "modifiers": {
                    "mandatory": ["left_control"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "grave_accent_and_tilde",
                    "modifiers": ["left_option"]
                }
            ],
            "type": "basic"
        }
    ]
}
```

## おしまい
これはRDP接続時、Ctrl+Spaceを押すとOption+`に変換しているんですが、本当は全/半キーにしたかった。
それは出来ずじまいでした🤣


[^1]:初めて買ったMac、PowerBookG3(1999)にビールをこぼしてしまい、キーボードが焦げた。そしてたまたま見つけた交換用キーボードがUS配列でした🍺
東京のあるショップオリジナルの物で( 店の名前はもう思い出せない )、このキーボードはタッチも良く、CtrlがAの左側だし大変お気に入りでした。
PowerBookG3(1999)には持病があり、2~3年でCPUの2次キャッシュが焼けた。修理費が無く、もたもたしていたら、Appleの修理も早々に終わってしまった。
そういえば、G4Cubeの修理って最後どうなったんだろう。
【GCP】いつも通りGCPにテストアップしようとしたらできなかった

## 直面した問題  
GCPの新規プロジェクトを職場の上長に作成してもらい、dockerでテストアップしようとした際に以下のエラーが発生しました。

```
denied: Permission "artifactregistry.repositories.uploadArtifacts" denied on resource "projects/hogehoge" (or it may not exist)
```

エラーを和訳してみると、**指定したプロジェクトが実際には存在しないか、権限が不足している**場合に発生するみたいです

プロジェクトは何度も確認しましたが存在はしてる。なので権限周りで設定変わってしまったかな？とGCPの「IAMと管理」をいじってみましたが解決できず半日溶かしてしまいました...


## エラーの原因  

今回のケースでは、**GCPに作成してもらったプロジェクト名が、以前に作成したものと同じだった**ことが問題でした。  
GCPでは **プロジェクト名はユニークである必要はありませんが、プロジェクトIDは一意** です。  
そのため、プロジェクト名ではなく **プロジェクトID** を明示的に指定する必要があります。



## 解決策  
### 1. 現在のプロジェクトIDを確認する  
GCPのプロジェクトを選択するプルダウンが左上にあるのでクリック
↓
プロジェクト名の右にプロジェクトIDが載っているのでそれをコピー

### 2. 正しいプロジェクトIDを指定する  
次に、GCPのプロジェクトIDを明示的に指定して、Artifact Registryへのアップロードを試します。自分はmakefileを使用してテストアップをしているのでGCPのプロジェクト名のところにIDを指定します

```makefile
export GCP_PROJECT ?= projectID
export APP_NAME ?= hogehoge-hp

stage/docker/build:
	docker build --rm -f Dockerfile --platform=linux/amd64 -t asia-northeast1-docker.pkg.dev/${GCP_PROJECT}/${APP_NAME}/stage:latest . --build-arg is_auth=true --build-arg env=stage

stage/docker/push:
	docker push asia-northeast1-docker.pkg.dev/${GCP_PROJECT}/${APP_NAME}/stage:latest
    
```

## 補足
自分は今回のプロジェクトではDBにfirebaseを使用したのですが
firebaseのプロジェクト名を作成するときも同じです
GCPのプロジェクトIDを指定してあげないと連携が取れません

そもそも自分はいつもfirebaseのプロジェクト名を手入力でしていたのですが
プロジェクト名を決めるところの左下に
```
すでに Google Cloud プロジェクトがある場合
Google Cloud プロジェクトに Firebase を追加
```
といったリンクがあるのでそこから選択してあげればなんの問題もありませんでした
こちらでも半日溶かしてしまいました...

自分はそもそもGCPとfirebaseはそれぞれ独立していて全く別のものだと勘違いしていたのですが、実際は**密接に繋がっている表裏一体**のものでした

今までそんな認識の齟齬があったのにGCPとfirebaseの連携が取れていたのは
自分がなんとなくGCPのプロジェクト名を同じ名前つけていたからでした

今回プロジェクトIDを指定してあげないといけなかったので気付けました
そこの認識も正せたので良かったです。

## まとめ  
- GCPのプロジェクト名は重複可能だが、プロジェクトIDは一意だから注意
- 一応必要なIAM権限が付与されているかも確認してみる

同様の状況で陥ってるかたの参考になれば幸いです
【安全確保支援士】まじIPsecって何者なん？

## 初めに
よく支援士の問題にも出るIPsec。
まじIPsecって何者なんってことでまとめます。
参考サイト→[【図解】初心者に分かりやすいIPsecの仕組みとシーケンス～パケットフォーマット,DPD(keepalive)について～](https://milestone-of-se.nesuke.com/nw-basic/ipsec/ipsec-summary/)
## IPsecとは
一言でいえば、改ざんを防ぎ暗号化するものです
はい。
これで終わりならいいんです。ここから難しくなります。
## 2種類のプロトコルと2種類のモード
まず、2種類のプロトコルがあります。AHとESPです。

### AHとESP
AHはデータの認証を行うですプロトコル。
ESPは、データの認証と暗号化を行うプロトコルです。

まずAHなんですが、データの認証のみを行うものです。
これは暗号化が禁止されている国で使われています。
ですから、使用範囲が特定的でほとんど使われてないため、説明は省略します。
データの認証を行うものという程度の認識でいいと思われます。
詳しく知りたい人は調べてください。

次にESPなんですが、ここは詳しく見ていきましょう。
これは認証と暗号化を行うものです。よって改ざんと盗聴を防げます。
暗号化の方法として**DESや3DESやAES**があります。

DESは、56ビット鍵で暗号化をする方法
DES３は、DESを3回使用する方法
AESは、共通かぎ暗号方式の一種です。128・192・256bitの長さの中から鍵長を選んで利用する方法です。現在の主流です。
AESの仕組みを少し詳しく説明しますね。
AESはビットごとにラウンドを繰り返す回数が決まってきます。

128ビット鍵 → 10ラウンド
192ビット鍵 → 12ラウンド
256ビット鍵 → 14ラウンド

ラウンドっていのは画像の通りです。
![POP (15).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3890669/bcb775ca-fb8b-d77f-71e7-c04e1045323c.png)
いい説明思いつかなかったのでここは、ChatGPTを参考に作ってます。うちのGPTは、ギャルになるようにしてるので、カクテルミックスとかわけわからんこと言ってますが、まぁイメージ伝わってください。

これらの方法で暗号化します。

次に2つのモードを紹介します。

### トランスポートモードとトンネルモード
まず、トランスポートモードなんですがこれはエンドポイント同士で通信を行う方法です。
仕事範囲が、SSL/TLSと競合しかつ、SSL/TLSのほうが利便性が上回っているので使われません。なので説明も省略します。

トンネルモードなんですが、これはVPNで使われるモードです。NW機器同士の通信とかそういうのを担当します。
IPsecといえば、これが主流ですね。
![POP (18).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3890669/6a0978a5-4767-9cdc-4f9f-d789a812c56c.png)


そうすると、ESPのトンネルモードが一般的なIPsecの示しているものということになります。
まぁ確かに、VPNで使って、改ざんを防いだり暗号化したりっていう一般のIPsecの解釈に近いですね。

## 実際の通信の流れ
ここが、今回の最難関になりそうです。
まぁやりましょう。

まず、IPsecの通信の始まりは**IKE**からです。IKEはIPsec通信の準備のためのプロトコルです。
次のような動きをします。
（IKEにはフェーズが2つあります。）

IKEフェーズ１
まず相手を認証するところから始まります。
事前共有鍵や照明書で相手が信頼できるかチェックします。
そして、Diffie-Hellman鍵交換を使って共通鍵を安全に交換します。
これで互いに共通鍵を持つことになります。
そのうえでIKE SAが作られます。これは、通信やセキュリティに関しての契約みたいなもので、
今後の通信は、こうやっていくよって決めたものです。
↓
IKEフェーズ２
フェーズ2では実際にデータを送るための準備をします。
ここでの目的は、IPsec SAを作成することです。SAってのは、さっきと意味は同じです。
IPsec SAを作成するために、IKE SAをもとに、暗号アルゴリズムや認証アルゴリズムを決定します
これらが決定することで、IPsec SA（こういう方法で通信やセキュリティを実現しますよっていう契約書的なもの）が作成されます。そしてそれは、SADっていう、保存場所に保存されます。
で、それをもとに実際に通信します。
↓
通信時は、ESPを選択しているのならESPで送信します。
受信側は、相手のSADに保存された鍵を使って復号します。
↓
通信終了時はSAを削除して終了します。

※この時にSPDというものがIPsecの通信が必要か判断し必要ならIKEが始まります。

今までのをイラスト化するとこうです
![POP (19).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3890669/c5d98ab8-0c7f-5690-93e1-e1d3dd510abe.png)

以上です
2.5GbE内蔵のミニPCへNutanix CE 2.0をインストール

Prism CentralにあるKubernetes Managementを触りたくなったが
1クリックデプロイがCE2.1にないため、CE2.0で再度インストールを行った。
CE2.0とCE2.1でのインストール時の差異を記述しておく。

記事によってはCE2.0だとカーネルモジュールに2.5GbEのドライバがなく失敗するとのことだったが、
今回使用した「phoenix-ce2.0-fraser-6.5.2-stable-fnd-5.3.4-x86_64.iso」だと
インストール自体は問題なくできました。






## 前回記事

https://qiita.com/magica825/items/9f70c971a50066a38c5d







## 差異１．CE2.0インストール後に2.5GbEのNICを認識しない
購入したミニPC(GMKtec M5 Plus)のNICはRealtek8125。
CE2.0はデフォルトだとRealtekのドライバを読み込まないらしい。
```
[root@NTNX-b91975f3-A ~]# ip a
1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000
    link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00
    inet 127.0.0.1/8 scope host lo
       valid_lft forever preferred_lft forever
[root@NTNX-b91975f3-A ~]#
```



(54分50秒付近)

https://www.youtube.com/watch?v=KdWW_80rddI







動画で参照しているページ

https://portal.nutanix.com/page/documents/details?targetId=Nutanix-Community-Edition-Getting-Started-v2_0:top-installing-ce-t.html


AHVにrootユーザでログインし、コマンドを実行
```
'img名は自身の環境で読み替えてください
[root@NTNX　~]# dracut -f --add-drivers realtek /boot/initramfs-5.10.139-2.el7.nutanix.20220304.342.x86_64.img

'初回起動失敗フラグを削除
[root@NTNX　~]# rm /root/.firstboot_fail

'初回起動フラグを有効化
[root@NTNX　~]# touch /root/.firstboot

'再起動
[root@NTNX　~]# reboot
```




## 差異２．PrismElement ログインページへのアクセス
Webページで「詳細」を押しても
「～～～ にアクセスする（安全ではありません）」が表示されない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/741824/c60c106e-4c6b-6404-b77b-2413211121d2.png)





























このページをアクティブにした状態で「thisisunsafe」と入力するとログインページが表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/741824/8eea38f7-54a0-b18d-05b3-980e40004e9f.png)
arm mac (m1 mac)でubuntu-arm64 memo

# 仮想環境のinstall

### VMWARE FUSION

結論から書いておくと、host-guest OS間のcopy&pasteができなかったので、使いにくいので、私は削除してしまいましたので、おすすめしません。(open-vmtoolsはinstallしたが。また、VMWARE FUSIONのGUIからのVMTOOLSのinstallはグレーアウトされていて利用できなかった)

しかし、OpenGLなどは利用できるようなので、そういう用途を期待している場合には、これが選択肢になるでしょう。

https://blogs.vmware.com/workstation/2024/05/vmware-workstation-pro-now-available-free-for-personal-use.html

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100425/accb03b6-197a-4582-5418-1b8dce20793b.png)

をクリックして、broadcomのサイトに行き、broadcom accountを作成し、
もう一度上のリンクから、入って、downloadする。

ダウンロードするときに、住所も入れないと、ダウンロードできないので注意。

VMWare Workstationは、LinuxとWindows版しかないので、macの場合はdownloadできない。


### Virtual Box

https://www.virtualbox.org/
から、mac/armとVirtualBox extensionをdownloadしておく。

Ubuntuのinstall時に「auto install」ではなく、手動のinstallを選択して、ubuntu serverのisoから起動すると良いです。

CPU core:4, RAM:8192MBで十分ですが、注意点として、3D hardware accelerationを有効化しないこと。有効化すると、クラッシュして、起動できませんでした。

# 共通

https://ubuntu.com/download/server/arm

から、ubuntu server for armをダウンロード

CUIでのinstallになる。
最後、キーボードで、リターンを押して、rebootをする、というのをやらないと、install終了できないので注意。

ubuntu 24.04は起動時に固まるので

```
sudo systemctl disable --now systemd-networkd-wait-online.service
```
で、無効化しておく。

```
sudo apt-get update; sudo apt-get install ubuntu-desktop -y
```

で、GUI環境を入れる。

logical volumeの容量が少ないので、100%にfitさせる

```
sudo vgs
sudo lvs
```

```
sudo lvextend -l +100%FREE /dev/ubuntu-vg/ubuntu-lv
sudo resize2fs /dev/ubuntu-vg/ubuntu-lv
```


### VirtualBox編

```
sudo apt -y install gcc make bzip2 linux-headers-$(uname -r) build-essential
```
VirtualBoxのGUIから、Devices/Insert guest addion CDを選択し、

```
cd /media/xxxx/VBox_GAs_7.1.6/
sudo ./VBoxLinuxAdditions-arm64.run
```

で実行する。

```
sudo shutdown -h now
```

仮想マシンをシャットダウンする

VirtualBoxの設定で、clipboardを「双方向」に設定する。

これで、相互にcopy&pasteできます。


# ほか

```
sudo apt-get install ubuntu-mate-desktop
```

で、mate desktop入れられるが、なぜか、install languageで、日本語の追加が完了しても、「日本語」がグレーアウトのままなので、あきらめた。。。
(VMWare上では行けたのだが、なにがダメなのかは不明)
viewでクラスメソッド使えるじゃん・・・！

## Overview
緊急で動画回してますw
今日たまたま開発していて気づいた大発見でしたので、共有です。
タイトルの通りなのですが、、、

## Context
これまではなんとなく、クラスメソッドはControllerに書いちゃっていました。
（いや、modelにかけよっていう感じですが）

なぜか、これまでviewでクラスメソッドを使うっていう発想がなかったのですが、今回間違えて書いてしまったら動いちゃった感じです。

でも、viewにロジックを書くのは絶対良くないと思います。
とはいえ、何かしら用途はあるはずなので、特定の条件下では便利そうな気づきでした

## Get Started!!
### これまで
```rb
# UserController
def index
  @users = User.all
end
```
```erb
<%= @users.each do |user| %>
.
.
```

### 直接viewにかける
### これまで
```erb
<%= User.all.each do |user| %>
.
.
```
イベントリスナーとイベントタイプの基礎

# はじめに
この記事は、Reactを学ぶ中で得た知識や感じたことを記録したメモをまとめたものです。エンジニア初学者として学習する中で気づいたポイントや躓いた部分を整理し、後から振り返った際に役立てるとともに、Reactを学び始めた方々にも少しでも参考になる内容になれば幸いです。

## イベントリスナーとは
**イベントリスナー**とは、画面上で発生するイベントを監視し、特定の処理（イベントハンドラー）を登録する仕組み。  
たとえば、ボタンをクリックしたり、入力欄の値を変更したりする操作がイベントとして発生し、それを処理する際に利用される。

### **イベントの例**
- **クリックイベント**: ボタンをクリックする。
- **入力イベント**: 入力欄に文字を入力する。
- **マウスイベント**: マウスが要素に乗ったり離れたりする。

## Reactでのイベントリスナーの書き方
ReactではHTMLと異なり、イベント名をキャメルケース（例: `onClick`）で記述する。以下はボタンをクリックしたときにアラートを表示する処理を登録している。
```jsx
const Example = () => {
  const clickHandler = () => {
    alert("ボタンがクリックされました");
  };

  return (
    <>
      <button onClick={clickHandler}>クリックしてね</button>
    </>
  );
};

export default Example;
```

### `clickHandler()` と `clickHandler`の違い
**1. `clickHandler()`**
* 関数を即時実行し、その結果を`onClick`に渡す。このため、ボタンが表示された瞬間（レンダリング時）に `clickHandler()` が実行され、`alert("ボタンがクリックされました")` が即座に表示される。
* ボタンをクリックしても何も起こらない。（すでに関数は実行済みのため）
* `clickHandler()` のように「関数の呼び出し」を記述するのは、意図的にレンダリング時に実行したい処理を行う場合に使う（通常のイベントハンドラーでは使用しない）

**2. `clickHandler`**
* 関数そのものを`onClick`に渡し、ボタンをクリックした時に関数が実行される。結果として、ボタンをクリックしたタイミングで `alert("ボタンがクリックされました")` が表示される。

```jsx
const Example = () => {
  const clickHandler = () => {
    alert("ボタンがクリックされました");
  };

  return (
    <>
      {/* 即時実行: ボタンが表示された時点で関数が実行される */}
      <button onClick={clickHandler()}>クリックしてね</button>
      {/* イベント時実行: ボタンをクリックした際に関数が実行される */}
      <button onClick={clickHandler}>クリックしてね</button>
    </>
  );
};

export default Example;
```
#### **動作の違い（まとめ）**
| **記述**           | **実行タイミング**             | **用途**                           |
|--------------------|--------------------------------|------------------------------------|
| `onClick={clickHandler()}` | レンダリング時に即実行            | ボタン表示時に処理を実行したい場合に使用 |
| `onClick={clickHandler}`   | ボタンクリック時に実行           | 通常のクリックイベントで使用        |


## よく使われるイベントタイプ一覧
以下は、Reactでよく使われるイベントタイプの一覧：

* `onClick`: ボタンやリンクなどのクリックイベント
* `onChange`: 入力値の変更イベント（フォーム要素で使用）
* `onBlur`: フォーカスが外れたときのイベント
* `onFocus`: フォーカスが当たったときのイベント
* `onSubmit`: フォーム送信時のイベント
* `onKeyDown`: キーが押されたときのイベント
* `onMouseEnter`: マウスが要素に乗ったときのイベント
* `onMouseLeave`: マウスが要素から離れたときのイベント


## まとめ
* Reactでは、イベントリスナーをキャメルケースで記述し、特定のイベントタイプを監視して処理を実行する。
* `clickHandler()` と `clickHandler` の違いを理解し、適切な方法で関数を渡すことが重要。
* イベントリスナーとイベントタイプを正しく使いこなすことで、動的なUIを効率的に構築できる。
WinUI3でImageを扱いたい！

:::note info
WinUI3のImageについて学んだ事をアウトプットしていきたいと思います。

何か追加情報があれば都度記事を更新していこうと思います。
:::

## 基本
`Source`プロパティに画像のパスをべた書きする方法です。
表示したい画像が固定されている場合はこちらを使います。

```xml
<Image Source="画像パス" />
```

## BitmapImageでの動的切り替え
`Source`プロパティに`BitmapImage(イメージソースファイル)`を設定することで動的に画像を切り替えることが可能です。

ここではボタンを押下した際に指定の画像を表示する実装を例にします。

まずは画像を管理するViewModelクラスを作成します。
```cs:ImageViewModel.cs
class ImageViewModel : INotifyPropertyChanged
{
    private string _imagePath = string.Empty;
    public string ImagePath
    {
        get
        {
            return _imagePath;
        }
        set
        {
            _imagePath = value;

            Uri uri = new(ImagePath);
            _imageSource.UriSource = uri;

            OnPropertyChanged();
        }
    }

    private BitmapImage _imageSource = new();
    public BitmapImage ImageSource
    {
        get
        {
            return _imageSource;
        }
    }

    public event PropertyChangedEventHandler? PropertyChanged = delegate { };
    protected void OnPropertyChanged([CallerMemberName] string? propertyName = null) =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
```

`ImagePath`で渡されたパスを元に`BitmapImage`のソースを設定します。

次にこの`ViewModel`を`MainWindow.xaml.cs`に登録します。
```cs:MainWindow.xaml.cs
public sealed partial class MainWindow : Window
{
    private ImageViewModel ImageViewModel { get; set; }

    public MainWindow()
    {
        this.InitializeComponent();

        // ウィンドウのサイズを変更します。
        // SizeInt32(Width, Height)
        SizeInt32 size = new(1100, 600);
        AppWindow.Resize(size);

        ImageViewModel = new();
    }

    // BitmapImageでSourceを設定します。
    private void Button_Click(object sender, RoutedEventArgs e)
    {
        ImageViewModel.ImagePath = "画像パス";
    }
}
```

最後にxamlの設定をします。
```xml:MainWindow.xaml
<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="ImageTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ImageTest"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="ImageTest">

    <Grid Margin="10">
        <Image Source="{x:Bind ImageViewModel.ImageSource, Mode=OneWay}" />
        <Button Content="Click" 
                Click="Button_Click"
                HorizontalAlignment="Center" />
    </Grid>
</Window>
```

## stringでの動的切り替え
`Image`の`Source`では`string型`のパスを使っても動的切り替えが可能です。
基本的な実装方法は`BitmapImage`を使用した時と同様です。

`BitmapImage`と異なるところはパスの初期値として空文字は使用できないことです。
`BitmapImage`のパスを表現する`ImagePath`は`string.Empty`でしたが`string型`の方式ではこの状態だと起動時に落ちてしまいます。

ですので何らかのパスを設定しておく必要があります。
ただし、存在しない画像パスでも動作はしますので、適当に初期値を設定しておけば良さそうです。

## おわりに

そこまで労力は変わりませんが、若干`string型`による実装の方がコード量も減ってスマートな感じがしますね。

ただどこかのタイミングで`BitmapImage`でないといけない場面がでてくるかもしれませんので、両方とも抑えておきたいですね。
Git 勉強会1

# Git Lesson1

## 全体目標

Git を活用して開発ができるようになることを目指します。

## 方針

基本的に CLI（コマンドラインインターフェース）を使用します。CLI の操作に慣れれば、GUI での操作も容易になるという考え方です。

## 今回の学習内容

- `git init`（リポジトリの作成）
- `git config`（ユーザー設定）
- `git status`（ファイルの状態確認）
- `git add`（変更をステージング）
- `git commit`（変更を記録）
  - コミットの単位
  - コミットメッセージの作成と修正
- `git log`（コミット履歴の確認）
- `git reset`（変更を取り消す）
  - 指定方法
- `git reflog`（履歴の確認と復旧）

---

## コマンド集

### `git init`（リポジトリの作成）

```sh
git init
```
指定したディレクトリを Git によって管理できるようにします。

---

### `git config`（ユーザー設定）

```sh
git config --global user.name "saito"
git config --global user.email "saito@example.com"
```
コミット時に誰がコードを書いたかを識別するために使用されます。

---

### `git status`（ファイルの状態確認）

```sh
git status
```
ファイルの状態（未追跡、変更済み、ステージング済み）を確認します。

---

### `git add`（変更をステージング）

```sh
git add ファイル名
```
変更をステージングエリアに追加します。すべての変更を追加するには：

```sh
git add .
```

---

### `git commit`（変更を記録）

```sh
git commit -m "コミットメッセージ"
```
コミットメッセージは簡潔で分かりやすくしましょう。

#### コミットメッセージの修正

```sh
git commit --amend -m "修正後のメッセージ"
```

---

### `git log`（コミット履歴の確認）

```sh
git log --oneline --graph --all
```
簡潔な履歴を確認するには `--oneline` を使用します。

---

### `git reset`（変更を取り消す）

```sh
git reset --hard HEAD
```
最新のコミットに戻します。

```sh
git reset --hard HEAD@{5}
```
5つ前のコミットに戻します。

---

### `git reflog`（履歴の確認と復旧）

```sh
git reflog
```
過去の操作履歴を確認し、特定の時点に戻ることができます。

```sh
git reset --hard HEAD@{3}
```
`HEAD@{3}` の時点に戻します。

---
ファイル名にタイムスタンプをつけるフロー

## 活用シーン
同名のファイルが上書きされてしまわないように予防したり、単純に一目でいつのファイルか分かるようにしたかったり等。

<strong>"ファイル名.jpg"</strong>が<strong>"ファイル名_250201031713.jpg"</strong>になる。

## 早速フロー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670355/2ea504cf-bec1-6064-f3eb-5696b660bc69.png)


Composeの数式
``` 
last(split(triggerBody()?['file']?['name'],'.'))
```

Compose1の数式 1/2
```
substring(triggerBody()?['file']?['name'],0,sub(length(triggerBody()?['file']?['name']),length(outputs('Compose'))))
```
Compose1の数式 2/2
```
formatDateTime(body('Current_time'),'yyMMddhhmmss')
```

ご指摘いただいたおいしみさんありがとうございます！

https://x.com/ksgiksg/status/1885687593184182508
Wordpress参考まとめ（リンクなど）

## Wordpressについてのメモ
久しぶりにWordpressサイトを作る必要があり、情報をまとめました。

## リファレンス集
・Wordpressサポート
https://ja.wordpress.org/support/

・Developer Resources
https://developer.wordpress.org/

・Wordpress Codex 日本語版(旧）
https://ja.wordpress.org/2021/09/06/codex-to-helphub/

・PHPマニュアル
https://www.php.net/manual/ja/index.php

## オリジナルテンプレートについて

### 最低限のファイル構成
- index.php
- style.css
```php
/*
Theme Name: テーマの名前を入れる
*/
```
- functions.php ※ 準必須

### あるといいファイル
screenshot.png
page.php
single.php
archive.php
search.php
404.php
header.php
footer.php
sidebar.php
home.php
front-page.php

（トップページについて）
WordPressのトップページのテンプレートとして使用されるファイルは
・front-page.php
・home.php
・index.php
優先順位は上から順に、
front-page.php　>　home.php　>　index.php

### ファイル構成
https://developer.wordpress.org/themes/basics/template-hierarchy/

## よく使うテンプレートタグチートシート
https://more-field.co.jp/web/wordpress-cheatsheet/
https://qiita.com/yoshio_dj/items/7734450bd0617541d7a0

##よく使うエスケープ処理
```php
<h1><?php echo esc_html( get_the_title() ); ?></h1>
<input name="address" value="<?php echo esc_attr( $_POST['address'] ); ?>">
```

### おすすめプラグイン
- 表示中のテンプレートが表示できる
https://ja.wordpress.org/plugins/show-current-template/
- 記事複製用プラグイン
https://ja.wordpress.org/plugins/duplicate-post/
- カスタム投稿・分類を作るプラグイン
https://ja.wordpress.org/plugins/custom-post-type-ui/
- 有名どころのカスタムフィールド、カスタム投稿、タクソノミープラグイン(繰り返しフィールドは有料版のみ）
https://ja.wordpress.org/plugins/advanced-custom-fields/
- 投稿のエディタコードを見やすくする
https://co.wordpress.org/plugins/html-editor-syntax-highlighter/
- カスタムブロックを作るプラグイン
https://ja.wordpress.org/plugins/lazy-blocks/

### 便利ツール
Visual studio codeに入れましょう
https://marketplace.visualstudio.com/items?itemName=tungvn.wordpress-snippet

### おすすめページ
フック、アクションフック、フィルターフックなど
https://ascii.jp/elem/000/000/270/270115/
https://liginc.co.jp/web/wp/customize/92030
https://www.flapism.jp/wordpress/57/
UE5 簡単なターン制御を実装する

# 概要

作業ログの続き。

簡単なターン制御を実装する。

- プレイヤーと敵が交互にタイル上を移動する
- 敵は１体だけで、ランダムなタイルに移動する

![cm40_4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18334/cdce1083-f05b-9e93-219f-10ed11c21a8e.gif)

前回

https://qiita.com/tukanpo/items/e4cd511786a44512f772

今回の内容のプロジェクト一式
（ユニット同士の重なり防止も対応しているのでちょっと変えている）

https://github.com/tukanpo/CM40/tree/v8

## 環境

UE 5.5.1

# 列挙型 E_GamePhase 追加

コンテンツブラウザで列挙型 **E_GamePhase** を作成する。

項目は下記の２つ。

- PlayerTurn
- EnemyTurn

![2025-01-30_23h51_56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18334/04a1be46-8876-b642-ac3d-1bccc469d6d7.png)

![2025-01-30_23h52_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18334/f19c570e-be15-21d9-d172-5d1ed7c141f0.png)

# BP_PlayerController

敵のターンで入力操作されないように、単純にフラグで制御しておく。
このフラグはターン制御時に切り替える。

![2025-02-01_12h08_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18334/af714dde-3b6f-d1ec-0df1-f6b9f6749f5f.png)

# GM_TestGame (GameMode)

変数追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18334/418099b2-a453-8c1c-5eec-2492dacbb764.png)

## 初期化

BeginPlay で Player と Enemy をスポーンさせているので、それぞれ参照を格納しておく。

最後に GamePhase を初期値 PlayerTurn に設定し、後述の ChangeTurn 関数を呼びだす。

![2025-02-01_11h53_34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18334/abae9fbb-d412-020a-e2df-7b13b3533fdd.png)


## EndTurn 関数

ターン終了時の GamePhase 切り替え処理と、新しいターンの処理を行う。
※ PlayerUnit と EnemyUnit 変数は BP_TestGame でのスポーン時にセットしておく。

![2025-02-01_11h17_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18334/f21f8b26-8737-6736-1885-9d72ba6f9990.png)

## ChangeTurn 関数

現在指定されているターンの処理を実装する。
（関数名がちょっと悪いかもしれない）

具体的にはプレイヤーなら入力操作 OK にして移動するまで待機、敵なら入力操作 OFF にしてランダムなタイルへ自動で移動させる。

前半

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18334/231e630b-4f87-7426-2288-e91da7db83c1.png)

後半

敵のランダム移動処理。

赤枠の GetAdjucentTiles は BP_GameBoard に次で実装する。
**敵の前後左右タイル配列からランダムに１つ選び、プレイヤーの移動と同じく MoveToTile を呼ぶ**という流れ。


![2025-02-01_11h19_33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18334/b531fa90-d26c-baed-badf-7a0da88daf26.png)

**GetAdjucentTiles** は BP_GameBoard の処理なので次で実装する。

# BP_GameBoard

敵の移動先タイルを配列に格納する関数を BP_GameBoard に実装する。

## GetAdjucentTiles 関数

単純に現在グリッド座標に前後左右４パターンのオフセットを足した座標のタイルを取得し、それぞれ ResultTiles に格納している。ランダムな隣接タイル候補。

![2025-02-01_11h37_45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18334/6444c1eb-6556-6c11-59a4-83b1c5b7e5f3.png)

これを４回しているだけ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18334/16c50dab-9d7b-5894-dea3-21638743220b.png)

## Add Tile to Result TIles 関数

指定タイルのオフセット位置にあるタイルを配列に格納するが、タイルが無い座標は無視するようにしている。

関数名含めやっつけ感があるが、GetAdjucentTiles 内で使用する共通処理をまとめただけ。こういうのってマクロでも良いのかもしれない。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18334/1c27803a-05fc-4d85-20eb-e39d52530635.png)

## 移動終了時にターン終了を呼ぶ

BP_PlayerUnit と BP_EnemyUnit のベースクラスである BP_Unit の MoveToTile 関数 (単純なタイル間移動) の最後で、BP_TestGame の TurnEnd 関数を呼んで完了。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18334/eef14dc7-8852-bc8e-a39f-cc3141bc51bf.png)

おわり