OmniAICreator/Qiita-1.07M huggingface dataset:
僕のOSS-DB GOLD version 3.0 合格体験記

# はじめに
先日、OSS-DB GOLD Version3.0に合格しました。
スコア的にはかなりぎりぎりでしたが、1発合格ではあります。
OSS-DB SILVERについては腐るほど合格体験記だったりが出てきますが、GOLDについてはあまり記事がないので、自分のように迷える方の指針になればと思い、記事を上げさせていただきます。

# 筆者について
IT歴4年目です。（社会人歴はもうちょい長いんですが、IT従事者とは呼べないスーパーなんちゃって情シス部門員の時期があったのでIT歴はもう少し短いかなと）
アプリケーションエンジニアで、運用だったりの経験は特にないです。なので当然のごとくPostgreSQLを運用者としていじったことはないです。
PostgreSQLの経験は2年位。最長はOracle。

# 合格スコア
| セクション | 正解率 or スコア |
|:-----------|------------:|
| 運用管理 | 77% |
| 性能監視 | 66% |
| パフォーマンスチューニング | 100% |
| 障害対応 | 50％ |
| スコア | 73点 |
| （合格点) | 70点 |

かなりぎりぎりでした。。。
仕事にも関係するパフォーマンスチューニングでかなり取り戻したのが救いでした。
OSS-DB SILVERはping-tやっとけば誰でも受かるって感じでしたが、GOLDはそうではなかった。。。

# さきに結論
正直、OSS-DB SILVERのping-tのような「これやりゃ、OK」というものはないです。
極論、網羅するにはPostgreSQLの公式ドキュメントを見るしかない。。。

# 学習方法
## 学習期間
2023/2～2023/5の3.5カ月。（2023/5は中旬くらいまで勉強してました）
（頭がよくない＆効率的に受かるためだけの勉強とかができないタイプなのでちょっと学習期間は長いかも）

## 教材
### ［改訂3版］内部構造から学ぶPostgreSQL―設計・運用計画の鉄則
[［改訂3版］内部構造から学ぶPostgreSQL―設計・運用計画の鉄則](https://www.amazon.co.jp/%EF%BC%BB%E6%94%B9%E8%A8%823%E7%89%88%EF%BC%BD%E5%86%85%E9%83%A8%E6%A7%8B%E9%80%A0%E3%81%8B%E3%82%89%E5%AD%A6%E3%81%B6PostgreSQL%E2%80%95%E8%A8%AD%E8%A8%88%E3%83%BB%E9%81%8B%E7%94%A8%E8%A8%88%E7%94%BB%E3%81%AE%E9%89%84%E5%89%87-Software-Design-plus-%E4%B8%8A%E5%8E%9F/dp/4297132060/ref=sr_1_1_sspa?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=39QZW9B54Q58E&keywords=Postgresql&qid=1685926000&sprefix=postgresql%2Caps%2C238&sr=8-1-spons&psc=1&spLa=ZW5jcnlwdGVkUXVhbGlmaWVyPUEzVlY3QkE2Vk1aSE84JmVuY3J5cHRlZElkPUEwODU0MjU2UDRPSlgyQlJRVDZIJmVuY3J5cHRlZEFkSWQ9QTFXRFRYMFo0SFZRMjImd2lkZ2V0TmFtZT1zcF9hdGYmYWN0aW9uPWNsaWNrUmVkaXJlY3QmZG9Ob3RMb2dDbGljaz10cnVl)
これは3周くらい読みました。
PostgreSQLの公式ドキュメントを除けば、この本が一番OSS-DB GOLDの出題範囲を網羅してると思います。
この本はカリカリに読んでおきましょう。

<img width=250 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549748/4ddc109c-1466-e8fa-fdb1-694eb3ce87eb.png>

### LPI-Japan OSS-DB Gold 認定教材 PostgreSQL 高度技術者育成テキスト

[LPI-Japan OSS-DB Gold 認定教材 PostgreSQL 高度技術者育成テキスト](https://www.amazon.co.jp/LPI-Japan-OSS-DB-Gold-PostgreSQL-%E9%AB%98%E5%BA%A6%E6%8A%80%E8%A1%93%E8%80%85%E8%82%B2%E6%88%90%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88/dp/B00P4WD4QG)
認定教材と言われているものの、これはほぼ読まなかったです。
内容が古くあまり参考にならなそうと思ったので。
<img width=250 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549748/f66c5110-e0bb-3d21-e04e-abfcebe04fe3.png>

### OSS-DB Gold　攻略会
https://note.com/watary687/membership/join

こちらは有料の記事になります。
こちらもテキストと問題はそれぞれ3周くらいしました。
僕は最後の1カ月だけプレミアムプランでテキストと問題集をもりもり解いてました。
記事がかなり簡潔にまとまっているので、覚えはしやすいかなと。


### OSS-DB 公式サンプル問題集

https://oss-db.jp/measures/sample/v2

特にテストで同じ問題が出るわけではないんですが、試験の感じをつかむという上ではやっておいても特に損はないかなと。
これは2周くらいはやりました。

# 実際に試験を受けて
僕のスコアが物語っていますが、上記の教材やらで勉強しておけば、パフォーマンスチューニングはまあ抑えられます。
が、逆に障害対応のセクションを上記の教材だけで網羅するのはかなり難しいと思います。
上記の教材に障害対応のセクションが無いわけではないんですが、不足してます。
実際、上記のどの教材でも見なかったようなエラーメッセージに関する問題とかかなり出てきたので完全につんだと思いました。
何をすれば「障害対応」のセクションを抑えられるのか僕も教えてほしいです。

# OSS-DB GOLDの勉強を経て
教材の話はともかくとして、この試験自体はSILVERの内容からより突っ込んだとこまで勉強でき、（むしろSILVERをもっと突っ込んだ内容にした方がいいんじゃないかとはおもいつつ）かなり勉強になる資格勉強だったと思いました。
「なんでFILLFACTORは100にしてないんだ？」とか「この設定ファイルは何者でどう使われるんだ」とか「SQLのチューニングじゃなくて、PostgreSQLの設定値レベルのチューニングはどこをどういじったらいいの」とかアプリケーションのプログラマーから1段深堀したところを学べたのは非常によかったかなと。
Swiftで解くAtCoder（ABC304）

# 1.はじめに
この記事では、[AtCoder（ABC304）](https://atcoder.jp/contests/abc304)のA~C問題をACしたコードの公開, 解説を行います。
Swiftを使ってコンテストに参加する方の参考になれば幸いです。


# 2.事前準備
標準入力を読み込むためのメソッドです。
コードの先頭に貼り付けて、適宜使用します。
```swift
import Foundation

// 標準入力から整数を読み込む
func readInt() -> Int{
    return Int(readLine()!)!
}

// 標準入力から整数列を読み込む
func readInts() -> [Int]{
    return readLine()!.split(separator:  " ").map { Int(String($0))! }
}

// 標準入力から文字列を読み込む
func readString() -> String{
    return readLine()!
}

// 標準入力から文字列配列を読み込む
func readStrings() -> [String]{
    return readLine()!.split(separator:  " ").map { String($0) }
}
```

# 3.A - First Player
問題文や制約は[こちら](https://atcoder.jp/contests/abc304/tasks/abc304_a)からご確認ください。

入力をN, S[], A[]で受け取ります。
```swift
let N = readInt()
var S = [String]()
var A = [Int]()
for _ in 0..<N {
    let nextLine = readStrings()
    S.append(nextLine[0])
    A.append(Int(nextLine[1])!)
}
```
年齢が最も低い人の番号を特定します。
```swift
var minNum = 0
var minAge = A[0]
for i in 1..<N {
    if minAge > A[i] {
        minNum = i
        minAge = A[i]
    }
}
```
特定した番号を起点として名前を出力します。
```swift
for i in 0..<N {
    if i+minNum < N {
        print(S[i+minNum])
    } else {
        print(S[i+minNum-N])
    }
}
```

# 4.B - Subscribers
問題文や制約は[こちら](https://atcoder.jp/contests/abc304/tasks/abc304_b)からご確認ください。

入力をNで受け取ります。
```swift
var N = readInt()
```
Int型で割り算をすると、小数点以下が切り捨てられる性質を利用します。
例) 100でわった後、100をかけることで、10の位以下が切り捨てられる。
```swift
if N < 1_000 {
    
} else if N < 10_000 {
    N = N / 10 * 10
} else if N < 100_000 {
    N = N / 100 * 100
} else if N < 1_000_000 {
    N = N / 1_000 * 1_000
} else if N < 10_000_000 {
    N = N / 10_000 * 10_000
} else if N < 100_000_000 {
    N = N / 100_000 * 100_000
} else if N < 1_000_000_000 {
    N = N / 1_000_000 * 1_000_000
}
```
切り捨て処理を行った後、出力します。
```swift
print(N)
```

# 5.C - Virus
問題文や制約は[こちら](https://atcoder.jp/contests/abc304/tasks/abc304_c)からご確認ください。
[AtCoder Problems](https://kenkoooo.com/atcoder/#/table/)によるDifficultyは366になります。

入力をN, D, X[], Y[]で受け取ります。
```swift
let line1 = readInts()
let N = line1[0]
let D = line1[1]
var X = [Int]()
var Y = [Int]()
for _ in 0..<N {
    let nextLine = readInts()
    X.append(nextLine[0])
    Y.append(nextLine[1])
}
```
感染者の情報をhasVirus[]で管理します。
初期値は人1のみtrue, 他はfalseになります。 
```swift
var hasVirus = [Bool]()
for _ in 0..<N {
    hasVirus.append(false)
}
hasVirus[0] = true
```
再帰関数を使用して、最終的に誰に感染するか求めます。
入力として感染者の座標を渡します。
ユークリッド距離内に人がいる場合、
その人の感染情報hasVirusが正となり、
再帰関数を再度呼び出します。
```swift
func checkVirusSpread(x: Int, y: Int) {
    for i in 0..<N {
        if !hasVirus[i] {
            let xD = x-X[i]
            let yD = y-Y[i]
            if sqrt(Double(xD * xD + yD * yD)) <= Double(D) {
                hasVirus[i] = true
                checkVirusSpread(x: X[i], y: Y[i])
            }
        }
    }
}
checkVirusSpread(x: X[0], y: Y[0])
```
ウイルスに感染している人のみ出力します。
```swift
for i in 0..<N {
    print(hasVirus[i] ? "Yes" : "No")
}
```

# 6.さいごに
間違いや改善点等あれば、ご指摘いただけると幸いです。
何卒よろしくお願いいたします。
<チーム開発初心者必見＞githubのプライベートリポジトリをクローンする方法


個人開発はしたことがあるけど、実務開発はしたことがないという方も多いのではないでしょうか。自分は初めての実務でprivateリポジトリのクローンをてこずったので、共有したいと思います。

会社で勤務、インターンをするときに使うgithubリポジトリは基本的にpublicではなくprivateになっています。

publicリポジトリをクローンする方法に関する記事はたくさんあるので、調べてみてください。

https://tech-blog.rakus.co.jp/entry/20220624/git

<h2>privateリポジトリのクローンする方法（HTTPS)</h2>

今回はHTTPSを使ってクローンを行いたいと思います。

HTTPSを利用する場合はまず、Tokenを作成する必要があります。

<h4>①tokenの作成画面に行く。<h4>

Githubの”Settings > Developer settings”にて「Personal access tokens」の画面を開く

◆setting


![スクリーンショット 2023-06-05 125440.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3291381/fe32911d-67b6-aa44-2fa1-dc4325f7f523.png)

◆Developer settings

setting画面を下にスクロールしたら出てくるので、クリックしてください。

◆Personal access tokens

以下の画面に行けたら、「Generate new token 」のボタンを押して、作成してください。

![スクリーンショット 2023-06-05 130042.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3291381/69943761-fdd2-41b0-e643-67519f2782d3.png)

<h4>②tokenを作成する</h4>

以下の画像を参考に作成してください。作成し終わった、スクロールして「Generate token」ボタンを押してください。

![スクリーンショット 2023-06-05 130622.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3291381/96a59047-ebbc-1fed-e3ef-c06850d4e198.png)

・Note：好きな名前でいいです。（自分でわかるように）

・Expiration：特に決まりがなければ、30daysのままで大丈夫です。

・Select scopes:repoにチェックをいれてください。

<font color="red" style="bold"><strong>遷移後に出てくるtokenは次のステップで使用するので、必ずコピーを取っておいてください。</strong></font>


<h4>③リポジトリをクローンする</h4>

・クローンしたいprivateリポジトリで、URLを取得します。
（SSHではなく、HTTPSを選んでください。）

![スクリーンショット 2023-06-05 131600.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3291381/1f954e60-eec7-6ed1-5825-6668bb514a71.png)

・powershellを開いてください。そして、以下のように空のリポジトリを作成し、移動してください。（macの場合はターミナル）

![スクリーンショット 2023-06-05 132353.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3291381/63ffbf97-360e-2a8c-fc32-bfd27b452e16.png)
作成、移動にはLinuxコマンドを使用します。

mkdir:リポジトリを作成。
cd:リポジトリを移動。

・githubリポジトリをクローンする.

以下のようなコマンドを打ってください。
```
git clone 「先ほどコピーしたgithubリポジトリのURL」

例）git clone https://github.com/====/~~~

```

コマンドを打てばUserとパスワードが求められるのでUserはログインする際のアカウント名、パスワードはコピーしたtokenを入れるとクローンができます！


※ユーザー名は https://github.com/ の直後にあるものです。
Gremlinのチートシート



Gremlinはグラフデータベースを操作するためのプログラミング言語で、Apache TinkerPopの一部として開発されています。
以下に、Gremlinでよく使う基本的なコマンドとその説明をまとめました。

## ノードとエッジの操作

### ノードの追加
```groovy
g.addV('label').property('key', 'value')
```
ラベルとプロパティを指定して新しいノード（頂点）を追加します。

### ノードの検索
```groovy
g.V().hasLabel('label')
g.V(vertexId)
g.V().has('key', 'value')
```
それぞれ、指定したラベル、ID、プロパティを持つノードを検索します。

### プロパティの追加
```groovy
g.V(vertexId).property('key', 'value')
```
ノードに新しいプロパティを追加します。

### ノードの削除
```groovy
g.V(vertexId).drop()
```
指定したノードを削除します。

### エッジの追加
```groovy
g.V(sourceId).addE('label').to(g.V(targetId)).property('key', 'value')
```
エッジ（辺）を追加します。ソースノードとターゲットノード、ラベルとプロパティを指定できます。

## トラバーサル（探索）

### 隣接ノードの探索
```groovy
g.V(vertexId).out('label')
g.V(vertexId).in('label')
g.V(vertexId).both('label')
```
それぞれ、指定したラベルのエッジを通じて接続された隣接ノードを探索します。

### パスとサブグラフの表示
```groovy
g.V(vertexId).out('label').path()
g.V(vertexId).repeat(out()).times(2)
```
ノードから出ているエッジを通じて探索したパスを表示したり、指定したノードから2ステップ先までの隣接ノードを探索します。

## 複雑なクエリの例

### プロパティ値の取得
```groovy
g.V().has('key', 'value').out('label').values('anotherKey')
```
特定のプロパティを持つノードから出ているエッジをたどり、その隣接ノードの別のプロパティの値を取得します。

### 2つのノードの選択
```groovy
g.V().has('key', 'value').as('a').out('label').as('b').select('a', 'b')
```
特定のプロパティを持つノード（エイリアスa）から出ているエッジをたどって隣接ノード（エイリアスb）を見つけ、その2つのノードを一緒に選択します。

### 特定のプロパティを持つノードまでのパス表示
```groovy
g.V().has('key', 'value').until(has('anotherKey', 'anotherValue')).repeat(out()).path()
```
指定したプロパティを持つノードからエッジを辿り続け、別の指定したプロパティを持つノードが見つかったところで探索を終了し、そのパスを表示します。
Welcart(1系)の新規会員登録ページが表示できない

### はじめに
さまざまな事情などある場合で、Welcartをバージョンアップできない、Wordpressはバージョンアップして使うケースで、
新規会員登録ページが表示できないということがあるようで、対処方法を共有します。
要するにはWelcartを1系のまま使いたい時ですかね。


### コードの変更箇所
いろいろ調べてみると、どうやらGETパラメータの?page=XXXが使えなくなっているようでした。
変更箇所は以下のファイルで変更を余儀なくされるところを変更する事で対処できました。
プラグイン/usc-e-shop/classes/usceshop.class.php

function make_url()に記述されている、定数で以下の記述されている箇所をすべて
USCES_MEMBER_NUMBER
USCES_LOSTMEMBERPASSWORD_URL
USCES_LOGIN_URL
USCES_LOGOUT_URL


★変更前
&page=xxxx
↓変更後
&usces_page=xxx


20ヶ所ほどあるかと思います。

``` usceshop.class.php

function make_url(){
//テンプレートで使われているURL定数の定義を変更してやる
//例 &page=newmember →　&usces_page=newmember
if( ! defined('USCES_NEWMEMBER_URL') )
    define('USCES_NEWMEMBER_URL', $this->options['ssl_url'] . '/index.php?page_id=' . USCES_MEMBER_NUMBER . '&uscesid=' . $this->get_uscesid() . '&usces_page=newmember');


function regist_action(){
        // 上に元の記述があり・・・
        //以下を追記　getでusces_pageがあったら、それに沿った処理をさせる記述
        usces_register_action('page_login', 'get', 'usces_page', 'login', 'member_login_page');
        usces_register_action('page_logout', 'get', 'usces_page', 'logout', 'page_logout');
        usces_register_action('page_lostmemberpassword', 'get', 'usces_page', 'lostmemberpassword', 'page_lostmemberpassword');
        usces_register_action('page_newmember', 'get', 'usces_page', 'newmember', 'page_newmember');
        usces_register_action('page_search_item', 'get', 'usces_page', 'search_item', 'page_search_item');
｝
``` 
これだけの変更で、Welcartの新規会員登録ページが表示できないは解決。
新規会員登録ページ
パスワード変更ページ
ログアウトページ、これらが問題なく動作するようになりました。

アップデートできるなら、こんな事を調べる必要もないのですが、世の中にはいろんな事情があるので、
そんな時はやはり、あくまで自己責任でコードを見て対処する他ありませんね。


##### リンク
[新規会員登録ページが表示できない (本家コミニティ)]( https://www.welcart.com/community/forums/topic/%E6%96%B0%E8%A6%8F%E4%BC%9A%E5%93%A1%E7%99%BB%E9%8C%B2%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%8C%E8%A1%A8%E7%A4%BA%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84)
ラズパイのsyslogをWindowsで閲覧する

## この記事のゴール

ラズパイのsyslogをWindowsマシンで閲覧したい

> syslog（シスログ）は、ログメッセージをIPネットワーク上で転送するための標準規格である。

https://ja.wikipedia.org/wiki/Syslog

### 検証環境

- ラズパイがsyslogを送出する側
- Windowsマシンが、そのsyslogを表示する役割

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272511/99149d73-c613-9031-9ba8-3f6ee2f8211f.png)

#### syslogクライアント（ラズパイ）

- Raspberry Pi 3 Model B+
- IPアドレスは**192.168.10.81**
- 標準で入っている**rsyslog**を使う

#### syslogサーバ（Windowsマシン）

- Windows 11 Home
- IPアドレスは**192.168.10.101**
- フリーソフトの**Tftpd64**を使う

## syslogクライアント（ラズパイ）の設定

コンフィグファイルに１行だけ追加する

```bash:sudo vim /etc/rsyslog.conf
# 追記ここから
*.*;auth,authpriv,cron,mail,user.none      @192.168.10.101
# 追記ここまで
```

もともとログの種類ごとに出力先が書かれているので
その近くに追記すると、あとから見返したときに分かりやすい

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272511/deb11622-7529-ec30-b337-783b38d8fb91.png)

コンフィグファイルを保存したら、`systemctl restart rsyslog.service`でサービスを再起動して設定を反映させる

## syslogサーバ（Windowsマシン）の設定

[ココ](https://pjo2.github.io/tftpd64/)からTftpd64をダウンロードする
名前はTFTPだけど、syslogサーバの機能も備えている

:::note warn
フリーソフトなので何かあっても悪しからず・・・
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272511/4b9d7686-3f7f-00f5-f4ac-b2e178a20bfb.png)

とくにこだわりがなければ、クイックダウンロード
インストーラを「次へ」で進んでいけば、デスクトップにアイコンが生成される

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272511/80fc13bc-efa9-741e-0117-6ba883074b44.png)

### Tftpd64を起動する

アイコンをダブルクリックして、Tftpd64を起動する

右から２つめのタブが**Syslog server**の画面
ラズパイからsyslogが送信され、Windowsが受信できれば、ここにメッセージが表示される

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272511/9da69fa4-d198-cb41-41be-76b7b7028d90.png)

## syslog送受信テスト

実際にラズパイからメッセージを送り、Windowsのsyslogサーバでメッセージが見れるか確認する

**logger**コマンドを使う
`-p`では**ファシリティ名.プライオリティ**を指定する

local0は汎用的に使えるファシリティで、infoは一般的な情報にあてるプライオリティ

```bash
logger -p local0.info "Message from RaspberryPi"
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272511/de612bdd-24be-bc3a-6661-f1551d43256c.png)

### メッセージのプライオリティを変更してみる

`local0.warn`や`local0.err`などプライオリティを変更すると
syslogサーバー側の行頭の数字が変わる（134, 132, 131など）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272511/879068a2-8059-1a46-6534-870ce3890caa.png)

#### ほかのメッセージ例

rsyslogを再起動して認証を行うと、そのログも表示される

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272511/7359a088-e242-ba3f-6cf9-f415a4a6408a.png) 

## トラブルシューティング

Windows側にsyslogメッセージが表示されない場合
ファイアウォールで通信が許可されているか確認する

下記の場合、プライベートネットワークではTCPとUDPともに許可するが
パブリックネットワークに所属している場合はUDPのみ許可する設定になっている

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272511/986362d9-e56a-e23a-f032-f0f20dad467a.png)

## おわりに

ラズパイからsyslogを送り、Windowsでその内容を表示することができた

## 参考

https://www.angelcurio.com/raspberrypi/?Raspberry+Pi/syslog%E8%BB%A2%E9%80%81#ifbad042

https://qiita.com/11ohina017/items/087b1b7c4411c3b3195a


## 糸冬了！！
【ChatGPT無】アプリ開発したい、と言ったら助長すぎる


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

　今回は、
　　家計簿アプリを
　　　作りはじめる前の
　　　　やり取りです。

　目的は、
　　どんなプロンプトを与えたら、
　　　一番、
　　　　わかりやすい回答になるか？
　　です。

　　途中は、
　　　長くなるので、
　　　　省いていますよ。

　ではでは。
***
>**家計簿アプリを作るには、どうしたら？**

　と尋ねたら、
　　ズラズラと
　　　専門用語が並びます。

　誰を開発者だ
　　と思っての答えなのか、
　　　尋ねたところ、
　　　　プロの開発者らしい。

　そこで、
>**専業主婦にもわかりやすくお願いします。**

　と追記して、再送しました。

　結果、
　　専業主婦向け、
　　　とは思えない回答でした。
　　いや、専業主婦にはわからない、
　　　というわけではありませんよ。

　次に、
　　もう少しわかりやすくして
　　　欲しいので、
>**小学生にもわかりやすくお願いします。**

　と入れ替えて、再送。

　うん、
　　まぁ、小学生高学年ならば、
　　　大丈夫かなぁ。

　でも、
　　ちょっと助長すぎる。
>**手順をひと言ずつで教えてください。**

　と追記して、再送。
```Text:ChatGPT
家計簿アプリを作る手順を小学生にもわかりやすく説明します。

1. アプリの目的や機能を考える。
2. デザインやレイアウトを考える。
3. ペンや紙でアプリの画面のデザインを描く。
4. コンピュータやスマートフォンでアプリを作るためのプログラミングを学ぶ。
5. 適切なプログラミング言語を選ぶ（例えば、ScratchやPython）。
6. プログラミングの基礎を学びながら、アプリの画面や機能を作るためのコードを書く。
7. 入力項目（収入や支出）やデータの保存方法を考える。
8. データの計算やグラフ表示など、家計の管理に必要な機能を実装する。
9. プログラムのテストをして、動作やバグを確認する。
10. 家族や友達に試してもらってフィードバックをもらい、改良する。
11. アプリを公開するための手続きや方法を学ぶ（例えば、ウェブサイトやアプリストアへの登録）。
12. 家族や友達にアプリをシェアして、使ってもらう。

以上が家計簿アプリを作る一般的な手順です。
```
　うん、
　　これなら、
　　　難しく捉える必要もないね。


　とりあえず、
　　ここまでで
　　　使ったプロンプトを
　　　　まとめると
>**家計簿アプリを作るには、どうしたら？**
>**小学生にもわかりやすくお願いします。**
>**手順をひと言ずつで教えてください。**

　最後の
　　指示が
　　　一番でしょうかね。

***
　ちなみに、
　　「**ひと言で**」というのは、
　　　効きます。

　例えば、
　　ことわざなんかを
　　　聞いたら、
　　　　約200文字くらいで
　　　　　返ってきます。

　それを
　　「**ひと言で教えてください**」
　　とひと言付けると、
　　　内容にもよるとは
　　　　思いますが、
　　　　　40文字程度に
　　　　　　なりました。
PHPの配列への要素追加

# array_merge($array1, $array2)
 - 配列と配列をマージする処理
 - 配列の要素が単純に要素が結合するだけ

<details>

```
$array1 = array("val1","val2");
$array2 = array("val3","val4");
$ret = array_merge($array1, $array2);
var_dump($ret);
```

```
    array(4) {
      [0]=>
      string(4) "val1"
      [1]=>
      string(4) "val2"
      [2]=>
      string(4) "val3"
      [3]=>
      string(4) "val4"
    }
```
</details>

 - 連想配列でもキーは維持される
<details>

```
    $array1 = array('key1'=>"val1",'key2'=>"val2");
    $array2 = array('key3'=>"val3",'key4'=>"val4");
    $ret = array_merge($array1, $array2);
    var_dump($ret);
```

```
    array(4) {
      ["key1"]=>
      string(4) "val1"
      ["key2"]=>
      string(4) "val2"
      ["key3"]=>
      string(4) "val3"
      ["key4"]=>
      string(4) "val4"
    }
```
</details>

 - 両方とも連想配列で同じキーがあるとそのキーは右側の配列の要素の値になる
<details>

```
$array1 = array('key1'=>"val1",'key2'=>"val2");
$array2 = array('key2'=>"val3",'key4'=>"val4");
$ret = array_merge($array1, $array2);
var_dump($ret);
```

```
array(3) {
  ["key1"]=>
  string(4) "val1"
  ["key2"]=>
  string(4) "val3"
  ["key4"]=>
  string(4) "val4"
}
```
</details>

 - 連想配列のキーが数字だった場合に数字は0からの値に置き換えられる(キーがなかったものとして扱われる)

<details>

```
$array1 = array("val1","val2");
$array2 = array(2=>"val3",4=>"val4");
$ret = array_merge($array1, $array2);
var_dump($ret);
```

```
array(4) {
  [0]=>
  string(4) "val1"
  [1]=>
  string(4) "val2"
  [2]=>
  string(4) "val3"
  [3]=>
  string(4) "val4"
}
```
</details>

 - 連想配列のキーが数字だった場合に数字が配列通しで重複していても右側の配列の要素で上書きされることはない

<details>

```
$array1 = array(1=>"val1",2=>"val2");
$array2 = array(3=>"val3",4=>"val4");
$ret = array_merge($array1, $array2);
var_dump($ret);
```

```
array(4) {
  [0]=>
  string(4) "val1"
  [1]=>
  string(4) "val2"
  [2]=>
  string(4) "val3"
  [3]=>
  string(4) "val4"
}
```
</details>

# $array1 += $array2
 - 配列と配列をマージする処理(array1に「array1になくてarray2にしかない要素」のみ追加する事になる)
 - 両方とも通常の配列でも連想配列としてみたときに、同じキー要素は先にあった方の要素になる(左側の配列が優先される)

<details>

```
$array1 = array("val1","val2");
$array2 = array("val3","val4","val5","val6");
$array1 += $array2;
var_dump($array1);

array(4) {
  [0]=>
  string(4) "val1"
  [1]=>
  string(4) "val2"
  [2]=>
  string(4) "val5"
  [3]=>
  string(4) "val6"
}
```
</details>

 - 両方とも連想配列の時はキーは維持され、同じキーがあるとそのキーは左側の配列の要素の値になる(同じキーは値が上書きされない)

<details>

```
$a = array("a" => "apple", "b" => "banana");
$b = array("a" => "pear", "b" => "strawberry", "c" => "cherry");
$ret = $a + $b;
var_dump($ret);
```

```
array(3) {
  ["a"]=>
  string(5) "apple"
  ["b"]=>
  string(6) "banana"
  ["c"]=>
  string(6) "cherry"
}
```

 - 両方とも連想配列で数字のキーの時でも文字列の場合と処理は同じになる(同じキーは上書きされない、数字の変更はされない)

```
$array1 = array(0 => 'zero_a', 2 => 'two_a', 3 => 'three_a');
$array2 = array(1 => 'one_b', 3 => 'three_b', 4 => 'four_b');
$ret = array_merge($array1, $array2);
var_dump($ret);
```
```
array(6) {
  [0]=>
  string(6) "zero_a"
  [1]=>
  string(5) "two_a"
  [2]=>
  string(7) "three_a"
  [3]=>
  string(5) "one_b"
  [4]=>
  string(7) "three_b"
  [5]=>
  string(6) "four_b"
}
```
</details>
form送信時に値をコンソールに表示できない

vscodeのLive Serverを使い、ブラウザを立ち上げる。
フォーム内容を入力し、コンソールに値を表示させたかったが表示されない。(検証ツールにて)
htmlファイルは以下
```
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Todo</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="todo-app">
    <h1>Todoリスト</h1>
    <form id="post-form">
      <input type="text" id="todo-input" placeholder="新しいタスクを入力" />
      <button type="submit" id="add-button">タスクを追加する</button>
    </form>
    <ul id="todo-list">
      <!-- タスクはここに追加される。 -->
    </ul>
  </div>
  <script src="todo.js"></script>
</body>
</html>
```
## 値が取得されているかの確認
console.log()では表示されなかったのでalert()で表示させてみたら成功。
## 原因
フォーム送信時にページがリロードされていることでconsole画面に値が表示されなかった。
## 対策
event.preventDefault();を関数内に書くことでイベントのデフォルトの処理を防ぐ(今回はフォームの送信ボタンをクリックしたときに、ブラウザがフォームを送信してページをリロードするのがデフォルトの処理)
```
function addTodo(event) {
  event.preventDefault();
  //処理内容
}
```
【C++Buider】ミリ秒をTDateTimeに変換する方法

サンプリング周波数が500Hzの場合、2ミリ秒ごとにTChartにデータをplotしたい。

このときに、データの個数から累積秒数を算出して、それをもとにplotする時刻を算出したいのに、[EncodeTime](https://docwiki.embarcadero.com/Libraries/Alexandria/ja/System.SysUtils.EncodeTime)ではミリ秒の有効な値は0～999となっているため変換時にエラーになってしまう。

この方法でやると累積ミリ秒数を時、分、秒に計算して分割してからTDateTimeを作成しないといけなくてめんどくさい。

[参考：日付および時刻のサポート](https://docwiki.embarcadero.com/RADStudio/Alexandria/ja/%E6%97%A5%E4%BB%98%E3%81%8A%E3%82%88%E3%81%B3%E6%99%82%E5%88%BB%E3%81%AE%E3%82%B5%E3%83%9D%E3%83%BC%E3%83%88)

TDateTimeから累積ミリ秒を取り出すのには[MilliSecondOf](https://docwiki.embarcadero.com/Libraries/Alexandria/ja/System.DateUtils.MilliSecondOf)という便利な関数があるのにその逆は無いのかと探していたところ、[IncMilliSecond](https://docwiki.embarcadero.com/Libraries/Alexandria/ja/System.DateUtils.IncMilliSecond)を使えばできることが分かりました！

例えば、サンプリング周波数が500Hzで測定した場合、1データの間隔は1000/500=2msecなので、
n番目のデータの累積時間は　
```
1000/500*n [msec]
```
となるので、
測定開始からの経過時間は、
```
TDateTime logtime =  IncMilliSecond(TDateTime(0,0,0,0),1000/500*n);
```

で算出することができました。
よかったよかった。

こんな感じでChartに追加。
```
for(int n = 0 ; n < datalen ; n++){
  chart->Series[0]->AddXY(IncMilliSecond(TDateTime(0,0,0,0),1000/500*n),data[n]); 
}
```
相対時刻ではなく絶対時刻でChartに表示させたい場合は、TDateTime(0,0,0,0)のところを測定開始時刻に変えるだけでよい。
Azure リソースに簡単に名前を付ける

Azureリソースを作っては壊し、作っては壊す日々...
名前を付けるのに頭を使うのよくないなと思っていたらいいものを見つけました。
その名も **Azure Naming Tool**。
せっかくなのでちょっと触ってみました。
# Azure リソースの命名規則
ツールの話に進む前に、そもそも Azure リソースにはどのように名前を付けるべきなのでしょうか。
これは、Microsoft から Cloud Adoption Framework のドキュメンテーションの中でベストプラクティスとして紹介されています。
## 名前付け規則を定義する
![Azure リソース名のコンポーネント](https://learn.microsoft.com/ja-jp/azure/cloud-adoption-framework/_images/ready/resource-naming.png)
_Azure_ リソース名のコンポーネント ([名前付け規則を定義する](https://learn.microsoft.com/ja-jp/azure/cloud-adoption-framework/ready/azure-best-practices/resource-naming)より引用)
## Azure リソースの省略形の例
名前付け規則ではリソースタイプの省略形を使っていました。
これをいちいち考えるの大変だなと思っていましたが、例が用意されています。
[Azure リソースの省略形の例](https://learn.microsoft.com/ja-jp/azure/cloud-adoption-framework/ready/azure-best-practices/resource-abbreviations)
# ちょっと待って。でも大変じゃない？
規則のサンプルがあって、リソースタイプの省略形の例もある程度用意されていて、参照すれば誰でも名前を作れるようになっていますね。
でも、これ毎回付けるの大変だと思いませんか？私は大変だなと思いました（修業が足りないかもしれません）。
## Azure Naming Tool
そんな時は [Azure Naming Tool](https://github.com/microsoft/CloudAdoptionFramework/tree/master/ready/AzNamingTool) を使うと少し楽になる（かもしれません）。
このツールはドキュメントの中でも紹介されています（最近まで知らなかった...）が、Cloud Adoption Framework に含まれるようになったもので、事前に構成しておくことでブラウザを使って名前を生成できます。
これを組織で使うと名前付けを標準化できるし、個人的に見ても考える必要性がめちゃくちゃ減って助かります。
※名前生成時の画面イメージ<br>
![azure-naming-tool-image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3118632/443acbe9-2efc-0b1a-5a41-64bc64e3c408.png)
## セットアップ
GitHub にインストラクションが書いてあるので困る人は多くないかもしれません。
Azure Web Apps に展開する方法や、Docker コンテナで起動する方法、Azure Container Apps に展開する方法など手厚く説明されていますので、好みの方法を選択しましょう。
ここでは、Docker で起動する方法を選択したものとして、サンプルとなる compose.yml を置いておきます。
※コンテナイメージをドキュメントに従ってビルドしていることが前提になります。
```yml
services:
  azurenamingtool:
    container_name: azurenamingtool
    image: azurenamingtool:latest
    restart: always
    ports:
      - "8081:80"
    volumes:
      - type: volume
        source: azurenamingtoolvol
        target: /app/settings
volumes:
  azurenamingtoolvol:
```
## 使い方
- Admin パスワードを設定する
これをしないとプロジェクト名の追加などができない
![azure-naming-tool-set-admin-password.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3118632/2fe7039e-1710-889f-e294-626d2950a2b6.png)
- プロジェクト名/アプリ名/サービス名などを設定
ここで追加したものを後で使うので先に設定する必要がある
この項目だけでなく、他の項目にもカスタム値を追加できる
![azure-naming-tool-add-service.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3118632/6142487d-599b-24b7-5655-1a3d964cd44a.png)
- 必要なパラメータを選択して名前を生成
![azure-naming-tool-generate-name.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3118632/bfd9b52f-1514-af7a-f282-408053992c32.png)
- 生成された名前を確認して使う
![azure-naming-tool-check-name.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3118632/dcc074b3-2d2a-5172-3793-9b91b936fc3e.png)
## その他
Azure Naming Tool には API も用意されており、HTTPリクエストを投げられる環境と統合できます。
※個人的にはこれが書けるのならそもそも Azure Naming Tool はその人には必要なさそうだなと思いますが。。。
![azure-naming-tool-api-sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3118632/a526cd1d-aabc-c918-655b-847deeb2f63f.png)
# まとめ
Azure Container Apps に展開する方法をやってみたかったのですが、既存の環境があると色々と考えることが多かったため、今回はシンプルにローカルに Docker で展開しました。
その内再チャレンジしたいですね。

とりあえず、ローカルでツールとしては使えるようになったので、これからはリソースの命名に悩むことが減って快適に開発できるようになる（といいな）と思っています。
【CSS】バッチアイコンの表示（要素の重ね合わせ）

## やりたいこと
HTML要素を重ね合わせて、バッチ表示を行う
↓はイメージ
![batch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3468893/92b83274-20fd-71fe-0d95-21a7d7e4d6f0.png)

## サンプルコード
#### CSS
~~~css
.menuList {
	width			: 40%;
	padding			: 5px 0;
	/* aタグの下線/文字色 変更 */
	text-decoration	: none;
	color			: #000000;

	/* 子要素（縦軸：中央揃い、横軸：左寄せ */
	display			: flex;
	align-items		: center;
	justify-content	: flex-start;
}

/* アイコン/バッチ */
.menuList .menuIcon {
	position		: relative;
	padding			: 5px;
}
/* アイコン画像 */
.menuList .menuIcon .menuImg {
	width			: 70%;
	height			: auto;
	margin-right	: 20px;
	position		: relative;
}

/* バッチ */
.menuList .menuIcon .newBadge{
	display			: block;
	width			: 15px;
	height			: 15px;
	margin			: 0 18px 15px 0 !important;
	border-radius	: 50%;
	background		: red;
	z-index			: 10;

	/* バッチ内テキスト */
	font-size		: 7px;
	text-align		: center;
	color			: #000000;

	/* 表示位置 */
	top				: 5;
	right			: 10;
	position		: absolute;
}
~~~

#### HTML
~~~html
<a href="#" class="menuList">
	<div class="menuIcon">
		<img class="menuImg" src="./img/icon1.png">
		<div class="newBadge">1</div>
	</div>
	<span class="menuText">サイドメニュー</span>
</a>
~~~

## 解説
1. menuListクラス
サイドメニューで使う領域を確保
子要素の均等配置の設定（flex）
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3468893/b70c4bbd-0037-424f-c894-f1beb41254fb.png)
`ポイント：この設定で、サイドメニューの表示領域を設定/確定させる`

1. menuIcon／menuTextクラス
アイコン画像と文字を表示する領域を確保する
menuIconクラスはRelativeにする
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3468893/5a7721fd-b5cc-7802-b1b1-319d9bf2f7e6.png)

1. menuImg／newBadgeクラス
menuImg：親要素に対して、画像の表示サイズを設定する（親要素の70%の縮尺など）
newBadge：menuImgに重ねてバッチを表示。位置は親要素内の領域で設定（newBadgeクラスは、absoluteにする）
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3468893/be87d014-98bd-2267-cfd0-964c8902340c.png)
`ポイント：newBadgeクラスは、親要素内で座標を設定している(css抜粋)`
~~~css
/* バッチ */
.menuList .menuIcon .newBadge{
	/* ～ （中略）～ */

	/* 表示位置 */
	top				: 5;	/* 親要素からみたＹ軸の座標設定 */
	right			: 10;	/* 親要素からみたＸ軸 の座標設定 */
	position		: absolute;
}
~~~

## サンプルソース
[Githubを参照](https://github.com/miyaken3381/htmlCssSample/tree/main/01_badgeIcon)
トピックブランチとは

## トピックブランチ（Topic Branch）
:::note
ソフトウェア開発において、メインの開発ブランチ（通常はmasterブランチやmainブランチ）から分岐して作成されるブランチ
:::
→特定の機能追加、バグ修正、実験、修正など、個々の作業や課題に関連する変更を行うために使用

## トピックブランチを使用するメリット

- **作業の分離**
異なる作業や課題を分離するための独立した作業領域がある
開発者は、自分の担当するタスクを専用のブランチで行い、他の作業との干渉や競合を最小限に抑えれる

- **チームコラボレーション**
複数の開発者が同時に作業を進める際にも役立つ
各開発者は自分のブランチで作業を行い、変更を共有する前にメインブランチとのマージをする
→チーム全体の作業が調整され、衝突や競合を事前に解決できる

- **バージョン管理**
特定の機能や修正に対する変更を明確に識別できるため、バージョン管理がしやすい
各トピックブランチは、個別の作業単位として追跡され、必要に応じて特定のバージョンに戻ったり、マージしたりできる

## トピックブランチのワークフロー

１，メインブランチからトピックブランチを作成

２，トピックブランチで作業

３，作業が完了したら、メインブランチとのマージ

４，不要となったトピックブランチは削除
Python requestsモジュールにおけるSSLエラー改善方法

# トラブル内容
Pythonにおいて、RESTful APIサービスを利用してデータを取得しようとした際に、SSLError：CERTIFICATE_VERIFY_FAILED が発生した。

開発環境
OS：Windows 10
IDE：PyCharm

```python:main.py
import requests

# URLを指定する
url = "https://xxx.com/test"
# データを取得する
response = requests.get(url)

>> requests.exceptions.SSLError: 
>> HTTPSConnectionPool(host='xxx.com', port=443): Max retries exceeded with url: /test 
>> (Caused by SSLError(SSLCertVerificationError(1, '[SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: self signed certificate in certificate chain (_ssl.c:1129)')))
```

# 原因
:::note info
Pythonのrequestsモジュールは、HTTPS通信において、ルート証明書情報を参照する際に、Windowsの証明書マネージャ(certmgr.msc)を参照せず、certifiモジュールの cacert.pem ファイルを参照している。
:::
cacert.pem ファイルはルート証明書情報が記載されているが、今回のRESTful APIサービスに関するルート証明書情報は記載されていないため、SSL接続ができなかった。
インターネット上に公開されている情報を取得する際に、cacert.pem ファイルにルート証明書情報が記載されていない場合はSSL接続ができない可能性がある。

# 対策内容
ルート証明書情報を取得し、certifiモジュールに転記する

（１）windowsキー を挿下 → certmgr.msc と入力 → certmgr.msc を選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1989967/2db63fd6-27c8-8277-2afe-66dcfb8d8e4d.png)

（２）信頼されたルート証明機関 → 証明書 → 該当のルート証明書を右クリック → すべてタスク → エクスポート を選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1989967/87797f34-67f4-c18d-55bd-9f5ccf00bcb1.png)

（３）次へ → 使用する形式：Base 64 encoded X.509 (.CER) → 次へ → エクスポートするフォルダとファイル名を選択 → 完了 → OK でルート証明書情報をエクスポートする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1989967/9c148573-72d7-3734-1679-737a1022df1d.png) ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1989967/6b8edf40-f3fb-1c28-cb89-92481d0dafb0.png)


（４）certifiモジュールの cacert.pem ファイルが保存されているフォルダを開く
（例）
C:\ProgramData\Miniconda3\envs\test\Lib\site-packages\certifi

（５）cacert.pem → cacert.txt 等に拡張子を変更し、内容を変更できるようにする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1989967/72f6e9f4-1779-f7a5-37e9-4473808689aa.png) ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1989967/8244fa12-d579-883e-371d-49bf81f1400e.png)

（６）export_cer_file.cer(エクスポートしたルート証明書情報) → export_cer_file.txt 等に拡張子を変更し、内容を変更できるようにする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1989967/6b8edf40-f3fb-1c28-cb89-92481d0dafb0.png) ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1989967/c13026df-7f39-7d41-f4a5-814b235a1c9e.png)

（７）export_cer_file.txt に記載されている内容を、cacert.txt の末尾にコピー&ペーストする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1989967/54193b83-8482-6716-721d-3f2ef171ebac.png)


（８）cacert.pem → cacert.txt に拡張子を戻す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1989967/8244fa12-d579-883e-371d-49bf81f1400e.png) ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1989967/72f6e9f4-1779-f7a5-37e9-4473808689aa.png)

上記の手順でcacert.pem にルート証明書情報に転記することで、SSL接続に成功する
browserslistの設定を環境に応じて使い分けたり、参照する方法

browserslistについて調べたことをまとめる。

## browserslistの設定を環境に応じて使い分ける
browserslistは下記のように環境に応じて異なるブラウザクエリを指定することができる
`BROWSERSLIST_ENV`または`NODE_ENV`の変数に応じて環境をスイッチできる

```json
  "browserslist": {
    "production": [
      "> 1%",
      "not dead"
    ],
    "development": [
      "last 2 versions",
      "not dead"
    ]
  }
```

## browserslistの設定を参照する
下記のようなクエリを使用すれば別パッケージのBrowserslist設定を参照できる
```json
  "browserslist": [
    "extends browserslist-config"
  ]
```

### 共有用のbrowserslistパッケージ作成
共有用のbrowserslistパッケージを作成する場合は`browserslist-config-xxx/index.js`もしくは`browserslist-config/index.js`を作成して、exportする

```js
module.exports = [
  '> 1%',
  'not dead'
]
```

### 参考
https://github.com/browserslist/browserslist
一般化螺旋集合(GSS)のC#実装


　元ネタ
[多数の点を球面上に一様分布させる – blog.PanicBlanket.com](https://blog.panicblanket.com/archives/3778)

```C#
static (double colat, double lng, double x, double y, double z)[] GSS(int n)
{
    var dst = new (double, double, double, double, double)[n];
    dst[0] = (0, 0, 0, 0, 1);
    dst[dst.Length - 1] = (Math.PI, 0, 0, 0, -1);

    double lng = 0;
    for (int i = 1; i < n - 1; i++)
    {
        var hk = 1 - 2 * i / (double)(n - 1);
        lng = (lng + 3.6 / Math.Sqrt(n) / Math.Sqrt(1 - hk * hk)) % (Math.PI * 2);
        var colat = Math.Acos(hk);
        var x = Math.Sin(colat) * Math.Cos(lng);
        var y = Math.Sin(colat) * Math.Sin(lng);
        var z = Math.Cos(colat);

        dst[i] = (colat, lng, x, y, z);
    }

    return dst;
}
```

　極座標(colatおよびlng)と直交座標(x,y,z)をタプルで返している。
　個人的な好みによって、北天(Z+)から開始するように変更している。他の座標系に変更するときは始点と終点の定数も忘れずに変更すること。

***

　点数nと隣接する2点間の角度(度)は以下のような関係になる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264452/b4f374be-f09a-b230-1002-ada7e36e890b.png)

　ただしここではGSS(n)[n/2]とGSS(n)[n/2+1]の2点の座標xyzの内積を2点間の角度としている。

　横軸がn、縦軸が度で、例えば約4千点で10度間隔、約4万点で1度間隔になる。
　間隔からnを求める場合は大雑把に $n = (deg/211)^{-2}$ または $n = (rad/3.7)^{-2}$ で近似できる。
copilot-cli(ECS/Fargate)でRailsを運用するためのTips

ECS/Fargateをcopilot-cliを利用して構築・運用する方法について、[JAWS-UG Okayama 2023]([https://jaws-ug-okayama.doorkeeper.jp/events/153810)で発表したときの資料です。

## copilot-cliとは？
すでにQiitaに別の方が投稿されているのでこちらをご参考ください。
https://qiita.com/yoshii0110/items/8a74cc0fc540ae3f2389

## 資料の中身
* copilot-cliを使うことで何がうれしくなるのか
* copilot-cliの基本概念
* copilot-cliに任せる範囲はどのようにして決定するべきか
* Fargateを利用する上で注意すべき箇所
* バッチ処理（cron）を組む上で考慮すべき点
* メンテナンス時のリモート接続で考慮すべき点

などなどが資料に書いてあります。

## 資料
<script defer class="speakerdeck-embed" data-id="2663de77649e46bb8d99dc02e5b12961" data-ratio="1.77725118483412" src="//speakerdeck.com/assets/embed.js"></script>

## ついでに
[Copilot Primer Workshop](https://catalog.us-east-1.prod.workshops.aws/workshops/d03316be-3c29-49db-8dc3-eb196c1778c9/ja-JP)という資料もAWSさんが公開されているようです。
気軽にcopilot-cliを試してみたいという方は一度目を通してもらうとよさそうです。
サーバー上のDBからローカルにmysqldumpするコマンドのメモ

サーバーdb1上にMySQLデータベースがあるとする。
```.:~/.ssh/config
Host db1
  Hostname xxx.xxx.xxx.xxx
  User root
  Port 22
  IdentityFile ~/.ssh/id_rsa
```
このとき、ローカルにmysqldumpするコマンドは次のようになる。
```bash
ssh db1 "mysqldump -u[user_name] -p[password] --single-transaction [db_name] [tbl_name]" > dump.sql
```
- `--single-transaction`を付けると、ダンプ処理をトランザクションで囲むことにより、`LOCK TABLES`を行わない。
- テーブルは空白区切りで複数選択できる。
クラウドサービスとオンプレミスの違い

# はじめに
みなさんはクラウドサービスをご存じですか？最近はテレビCMなどでもよく目にする機会があり、言葉だけはなんとなく知っている方も多いと思います。実際、IT経験のない私はWeb上でなんか色々ができるんだろうな〜程度の認識しか持っていませんでした。しかし、近年提供されているITサービスはクラウドが主流となり、職種など関係なくクラウドサービスを利用する機会があります。
時代に取り残されないためにもクラウドサービスの特徴や種類などについて簡単にまとめてみました！

# クラウドサービスとは
まずクラウドサービスとはネットワーク経由でサーバやソフトウェアなどのITリソースを利用することができるサービスのことです。従来まではオンプレミスといって自身でのITリソース管理が主流でしたが、在宅勤務などのビジネススタイルの多様化や使い勝手の良さからクラウドを導入する企業が増えています。
　

# クラウドの特徴
クラウドはクラウドサービスを提供する事業者によって管理されています。そのため、オンプレミスと比べて異なる点が多くあるため特徴をまとめました。

## メリット
### 費用を抑えることができる
* オンプレミスの場合は自身で設備や環境を用意する必要があるため導入コストがかかりますが、クラウドの場合はネットワークを経由してサービスを利用するため、自身で設備を用意する必要がありません。
* 基本的には従量課金制なので利用した分だけの費用のみになります。
* 自身で保有していないためメンテナンスコストもかかりません。
### 情報共有が簡単
* 環境が用意できていれば、社外にある端末からでも利用可能です。
* 場所に制限されないため、多様な働き方に対応できます。
### 伸縮性
* サーバを増強したい、減らしたいなどの対応もスピーディーに行うことができます。例えば、サーバへの負荷が大きい時期にだけサーバを増やすなどフレキシブルな対応も可能です。
## デメリット
### カスタマイズ性
* クラウドは事業者によって提供されているため、提供されているサービスパターンの中から選択する必要があります。
### 他社が運用している
* メリットで他社が運用しているため、費用を抑えることやフレキシブルな対応が可能と記載しました。しかし、デメリットもございます。極端な話、提供事業者がクラウド事業から撤退すればサービスを利用することができません。
* また、仕様変更や料金の値上げなどが発生した場合、受け入れるか他のサービスに移行するしかありません。
# クラウドの提供形態
クラウドサービスはSaaS,PaaS,IaaSの3つの提供形態が存在します。それぞれ、クラウド事業者の担当領域によって分類されています。

## SaaS
SaaS（Software as a Service）とはソフトウェアやアプリケーションなどをネットワーク経由で利用できるモデルになります。メールや監視ソフトなどを自身のサーバの導入するのではなく、ネットワーク経由でサービスを提供している事業者から利用できます。
SaaSはほとんどのレイヤーをクラウド事業者が管理し、ユーザが管理する領域が少ないのも特徴です。
### SaaS一例
* Slack
* Zoom
* GoQSystem

## PaaS
PaaS（Platform as a Service）とはアプリケーションやデータベースなど、アプリケーション実行用のプラットフォーム機能をネットワーク経由で利用するモデルになります。アプリケーション開発に必要な環境は用意されており、ミドルウェアの運用管理が不要です。
### PaaS一例
* Azure
* Red Hat OpenShift

## IaaS
IaaS（Infrastructure as a Service）とはCPUやメモリ、ストレージなどのリソースをネットワーク経由で利用できるモデルになります。SaaSやPaaSに比べてユーザが管理する領域は多くなりますが、カスタマイズしやすく柔軟に構成をすることができます。
### IaaS一例
* Google Compute Engine(GCE)
* さくらクラウド
# まとめ
オンプレミスは自社内に情報システムを保有し、運用する形態。クラウドサービスは、情報システムを自社で保有せずに運用する形態を指します。
また、クラウドサービスを導入する際は自社の状況に適している形態の選択をすることで業務の効率化につながります。最善の選択をするためにもオンプレミスとクラウドサービスを理解しておく必要があります。

# 参考資料
https://www.topgate.co.jp/blog/google-service/9883#3%e3%81%a4%e3%81%ae%e6%8f%90%e4%be%9b%e5%bd%a2%e6%85%8b
ターミナルサーバを作ってみた

RT3050のNTP ST1が落ちるのでコンソールの状態を確認するためにUSB付のRT3050でターミナルサーバを作ってみました。

追加するプロファイルはtmux jerminalです。

FTDIなどのUSBモジュールを使うで以下をvendor.mkに追加します。

```
KERNCONF_MODULES_OVERRIDE+=usb/uchcom usb/uftdi usb/ucom
```

これでビルドしてイメージを焼きます。

焼き終ったら再起動して、FTDIのモジュールをUSBに接続します。

kldload uftdiしてカーネルモジュールをロードします。

TERM=xtermしてtmuxを起動します。

その中でjermを起動してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/e000daa3-7ee9-79d2-65af-88bfc11226ff.png)

これでセッションを切っても、コンソールが復元できます。

RT3050のUSB付カーネルは4M Flashで焼けますが、tmuxが大きいので8M Flashでないと入りません。

HUBを接続してFTDIモジュールをたくさんつなげばマルチポートにできます。
winSCP₊batch₊cron₊タスクスケジューラでWebサイトのバックアップを自動化する

どうもお世話になってます。
多数のWebサイトを管理している中でバックアップが面倒になってきたので、自動化しました。
当時参考にしたサイトとかは失念してしまったのですが、もし似た記述やパクリ等あればご指摘いただければ幸いです。

メモ書き程度で公開します。何かあれば追記するかも。

# batch
WinSCP.iniを利用してFTP接続してデータをダウンロードします。
丸ごとバックアップは時間がかかりすぎるので、synchronizeで差分を取得します。

```batch:backup.bat
//これらはよくわかっていないが、何やら必要そうなのでつけている
pushd %~dp0
setlocal
chcp 65001

rem サイト名の指定
set SiteID=管理用通し番号
set targetSite=サイトドメインとか

rem FTPサーバ情報の指定
set hostname=ホスト名
set ID=ユーザー名
set PASS=パスワード
set FTPDir=バックアップ対象ディレクトリ

rem 作業ディレクトリの指定
set driveName=保管領域親
set backupDir=保管ディレクトリ

rem 保存フォルダの指定（日付-サイト名）
set backupDirPath=%driveName%\%backupDir%
set logfile=%backupDirPath%\backuplog.log
rem ログファイルの削除・新規作成
del %backupDirPath%\sync_log.txt
set INPUT_LOG=%backupDirPath%\sync_log.txt

rem ### ログファイルに出力する各種メッセージを定義（開始、処理中、終了）
set Message_START=BackUp Start
set Message_END=BackUp Finish

rem ### 開始ログ出力
echo %date:/=-% %time:.=,%0 %Message_START% >> %logfile% 2>&1

echo off
set SESSION=ftp://%ID%:%PASS%@%hostname%
set SCRIPT=%backupDirPath%\scpdownload.txt
set BKTARGET=%backupDirPath%/
echo open %SESSION% > %SCRIPT%
echo cd %BKTARGET% >> %SCRIPT%
rem 除外ディレクトリ指定
echo option exclude "/不要/ディレクトリ/指定/;" >> %SCRIPT%
echo synchronize local -mirror %FTPTARGET% >> %SCRIPT% -delete
echo exit >> %SCRIPT%
cd ../../
cd "WinSCP"
winscp.com /ini=WinSCP格納ディレクトリ\WinSCP.ini /script=%SCRIPT% /log=%INPUT_LOG%

set RESULT=%ERRORLEVEL%
echo %date:/=-% %time:.=,%0 %Message_END% >> %logfile% 2>&1

endlocal
rem @echo このbatは処理を完了しました。確認してこのウインドウを閉じてください。
rem cmd /k
```
## この処理の問題点
・FTP接続が脆弱
本来であればパスワード等は直書きでなく別ファイルに記述して呼び出すのがよいと思われる。が、今回はこのファイルはローカルに置くのでよしとする。

# cron
DBのdumpをエクスポートするシェルスクリプトを作成し、ドキュメントルートより上の階層に保存する
これによって上記batchでFTPと一緒にDBのdumpファイルをダウンロードできる
※このファイルはbatchと違ってWebサーバーに設置するのでパスワードの直書きは避けた
```shell
#!/bin/bash
cd 保存領域へ移動
/usr/bin/mysqldump --defaults-extra-file=アカウント情報記述ファイル -Q --no-tablespaces -h ホスト名 DB名 > ダウンロードファイル名.sql 2> dump.error.txt
```
# タスクスケジューラ
このバックアップを定期的に実施する必要があった。
ローカルのbatchファイルを動かすので、今回はWindows標準のタスクスケジューラにて実行した。
【Shell】Macのターミナルでシェル（bash や zsh 等）を切り替える方法まとめ

## 概要
現在使用しているシェルの確認方法、選択できるシェルの一覧を確認する方法、シェルを切り替える方法についての備忘録

尚、ここで言う **「シェル」** はログイン時にデフォルトで起動する **「ログインシェル」** の事を指していますのでご留意ください。ログインシェルやインタラクティブシェルの違いについては以下の記事を参照

https://qiita.com/to3izo/items/b6a735793d55d65c5b10

## 現在のシェル設定確認
現在使用しているシェルの確認方法

```bash
# 確認コマンド
echo $SHELL

# 出力例（Zsh になっている場合）
/bin/zsh
```

## 変更可能なシェルの確認
選択できるシェルの一覧を確認する方法

```bash
# 確認コマンド
cat /etc/shells

# 出力例（以下のいずれかに変更可能）
/bin/bash
/bin/csh
/bin/dash
/bin/ksh
/bin/sh
/bin/tcsh
/bin/zsh
```

## シェルの切り替え方法
使用するシェルを切り替える方法

```bash
# シェルの切り替え実行
chsh -s /bin/zsh

# パスワードを聞かれるので、入力して完了
```

この後、ターミナルを再起動すればOK
Railsにfaviconを設定する方法

## 概要
以下参考記事を元にメモ程度にRailsのfaviconの設定方法をまとめたいと思います。

## 手順
1.assets/assets/images配下にfavicon.icoファイルを設置

```
assets/assets/images/favicon.ico
```

2.application.html.erbのheadタグに以下タグを挿入
```
<%= favicon_link_tag('favicon.ico') %>
```

```erb:app/views/layouts/application.html.erb
<html>
  <head>
<!--(省略) -->
<!--　ここから -->

    <%= favicon_link_tag('favicon.ico') %>

<!--　ここまで -->
<!--(省略) -->
  </head>
  <body>
    <header>
    </header>
    <%= yield %>
  </body>
</html>
```

**以上で導入完了です。**

## 参考
[favicon設定 Rails](https://qiita.com/ntkgcj/items/6643a07a43a36029dc9b)
Salesforce いつも忘れちゃうことをまとめとく vol.5 ～ 基礎知識（ユーザ、プロファイル、ライセンス、権限セット）

# はじめに
- Salesforce は便利ですが、一度設定しても「あれ？どう設定したっけ？」と、覚えていたのに忘れてしまう…　そんな内容をまとめておきましょう。
- まずは、Salesforce の基礎的な部分を押さえておきたいと思います。


# ユーザ と プロファイル と ライセンス
Salesforce の環境を取得すると、まず利用者のユーザを作りたくなりますが
まずは、「ライセンス」と「プロファイル」を考える必要があります。


「プロファイル」は「プロファイルを付与したユーザが何ができるか」を設定する場所です。

例えば、「システム管理者」であれば、ユーザを作れたり、カスタムプロファイルを作ったり、オブジェクトの設定ができるといった、組織の細かい設定までできます。


「ユーザライセンス」と「プロファイル」は密接な関係で、
「ユーザライセンス」の選択によって、選択できる「プロファイル」が変わってきます。

「ユーザライセンス」で「Salesforce」を指定すると「システム管理者」や「標準ユーザ」、それらのプロファイルをコピーしたプロファイル（カスタムプロファイル）を選択できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/25633a11-499d-7307-272a-d4cb1b6845d5.png)

「ユーザライセンス」で「Salsforce Platform」を指定すると「標準 Platform ユーザ」、それらのプロファイルをコピーしたプロファイル（カスタムプロファイル）を選択できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/63ed09f4-17a5-c9f2-32cd-10e187aa8943.png)

「ユーザライセンス」は、組織の種類に応じて、利用できる種類や数が異なります。
Developer 環境だと 「Salesforce」ライセンスは「2」、「Salesforce Platform」ライセンスは「3」です。


つまり、ユーザに「プロファイル」を設定しようとしても、設定できる数は「ユーザライセンスの残数分のみ」となります。

「システム管理者」を10人作りたいとしても、「Salesforce」ライセンスの残数分しか作れない、と言うことになります。

以下のだと「Salesforce」ライセンスは 0 なので、「システム管理者」ユーザは作れません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/488f2207-7eb9-24e7-378a-7afcb6ed721b.png)

それぞれの「ユーザライセンス」「プロファイル」の種類の意味については、Salesforceの記事を参照ください。

- ユーザライセンス
    - https://help.salesforce.com/s/articleView?id=sf.users_understanding_license_types.htm&type=5
- プロファイル
    - https://help.salesforce.com/s/articleView?id=sf.admin_userprofiles.htm&type=5




# 権限セット
「権限セット」も「プロファイル」と同じで「権限セットを付与したユーザが何ができるか」と言った役割を設定する場所です。

「プロファイル」は、複数のユーザに付与できる一方、「権限セット」は、単一のユーザに付与できます。

部署内のユーザに対する設定の場合は「プロファイル」
とある特定の役割を持つ単一のユーザに対して「権限セット」
で設定すると良いかもしれません。




# ご了承ください
- まだまだ勉強中の部分もあります。間違っている箇所もあるかもしれません。
- Salesforceは、この時点のバージョン(2023年06月頃) での内容になります。今後、仕様変更が変わることによって、内容の通りにならない可能性もあります。ご了承ください。
 - また、URLなども変更になっている可能性もあります。
Japan AWS Jr. Champion活動記録 Vol.1

## はじめに
2023 Japan AWS Jr. Championとしての初のイベント、Jr.Champions Kickoffが開催されました。今回はそちらについて書いていきます。これからも活動に関して、定期的にアウトプットしていきます！

## Japan AWS Jr. Champion Partner Programとは
> [「Japan AWS Jr. Champion Partner Program」](https://aws.amazon.com/jp/blogs/psa/2023-aws-jr-champions/)とは、AWS Partner Network (APN) 参加企業に所属し、現在社会人歴 1 ～ 3 年目で AWS を積極的に学び、アクションを起こし、周囲に影響を与えている APN 若手エンジニアを選出しコミュニティを形成する、日本独自の表彰プログラムです。本プログラムでは、AWS に関して実践してきた技術的な挑戦や、コミュニティのリードなど自ら起点となって周囲に影響を与えているか、アウトプットを通じて周囲へ貢献しているか、という観点が評価の対象になります。2023 Japan AWS Jr. Champions に選出された方は、一定の技術力があり、社内の AWS コミュニティをリードでき、今後は Japan AWS Top Engineers そして Japan AWS Ambassadors になることが期待される皆様です。

2023年は[82名が選出](https://aws.amazon.com/jp/blogs/psa/2023-japan-aws-jr-champions/)されており、これから1年間Japan AWS Jr. Championsとして活動していきます。

AWS Summit Tokyoの表彰時に撮影した集合写真
![img_7571_720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2851817/b6c165ed-6033-741d-c32c-2338b9be42fe.jpeg)


## 当日の流れ
場所：AWS 目黒オフィス（目黒セントラルスクエア）
オンラインとのハイブリッド開催だったのですが、初回は現地推奨ということもあり、全82名中70名以上が現地参加していました。

19:30~ Leader Yukkiさんによるプレゼン
20:15~21:30 懇親会 

## Yukkiさんプレゼン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2851817/364ec1f1-cb0c-9df2-e8af-90d311f5ce43.png)

#### 要旨
プレゼンの中で特に強調されていると感じたメッセージは以下になります。
- 目指すは[Japan AWS Ambassadors](https://aws.amazon.com/jp/blogs/psa/2023-japan-aws-ambassadors/)
- 会社から期待されている意識を持つ
 - 選ばれた人材という自覚を持つ
- 1期生としての意識を持つ
  - 自分たちでJr.Championsを作っていくというマインドで活動してほしい

マインドについてのプレゼンがあった後、今後のイベント予定発表が行われました。

**＜ 感想 ＞**
この1年頑張って活動しよう！と思えたアツいプレゼンでした。プレゼン系のイベントや、ゲームを交えたイベント、AmbassadorやAWSスペシャリスト（AWS社員）との交流会が、この1年で行われるということなので楽しみです！

## 懇親会
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2851817/b50da74e-943d-47ee-3803-11af742dde52.png)

プレゼンの後は、AWSのカフェテリアのようなところに移動して、Jr.ChampionsやAWS社員の方々との懇親会が開催されました。

**＜ 感想 ＞**
体感では、8.5：1.5くらいで男性の方がかなり多い印象を受けました。お話しした中では、4年目の社員の方（選出当時3年目）が一番多かったです。また、北海道の会社から福岡の会社まで、色んな地域からいらっしゃっていました。話しかけた中では、自社プロダクトでAWSを基盤に使っている人は少なかった印象で、SIerだったり、プロジェクトの中でAWSを使っているという形態の方が多く感じました。

また、仕事柄他社の人とお会いしないのと、コロナ禍での入社ということもあり、今回のイベントで人生初の名刺交換を行いました。名刺の中でAWSの資格のロゴを入れていたり、肩書としてJr.Championを入れていたりする方もいらっしゃって、頂いた名刺に色々な新鮮な発見がありました。

## 全体の感想

他社の若手エンジニアの方と話すイベントは初めてで、かつAWSのオフィスに行くのも初めてだったので、多くの発見と驚きがありました。直接会ってとても楽しく充実した時間を過ごせたので、これからの活動がさらに楽しみになりました。今もJr.ChmapionのSlackで、自主企画が立ち上がったり、社内企画への協力要請が出ていたりして、大いに盛り上がっています！この刺激的な環境で多くのことを学び、WHIに還元できるよう積極的に行動していきたいと思っています！

以上です。ありがとうございました。
総合開発環境(IDE)とは何か？初心者におすすめの4つのIDEを紹介

# 総合開発環境(IDE)とは
IDEとは、Integrated Development Environment（統合開発環境）の略で、ソフトウェア開発に必要な様々なツールを一つにまとめたものです。
例えば、コードを書くエディタやコンパイラ、デバッガ、テストツール、バージョン管理ソフトなどがIDEに含まれます。

## 総合開発環境(IDE)のメリット 
IDEを使うと、プログラミングをより快適に行うことができます。
IDEには以下のようなメリットがあります。

- 必要なツールを別々に用意しなくてもよい
- 同じ画面から統一的な操作法でツールを利用できる
- 入力補完や構文エラーの表示などコード記述に便利な機能がある
- GUIデザインやライブラリ管理など開発を支援する機能がある
- プラグインや拡張機構で対応言語や機能を増やせる

## IDEの種類と選び方
IDEには様々な種類があります。特定の言語や環境に特化したものや、汎用的に使えるものがあります。また、無料で使えるものや有料で使えるものがあります。IDEの選び方は以下のようなポイントに注意してみてください。

- 自分が使いたい言語や環境に対応しているか
- 自分が必要とする機能やサポートがあるか
- 自分が使いやすい操作性や見た目か
- 自分の予算や目的に合っているか
## 初心者におすすめのIDE
初心者におすすめのIDEをいくつか紹介します。それぞれ特徴や対応言語、価格などを比較してみてください。

### Visual Studio Code（VSCode）
マイクロソフト社が開発したオープンソースの汎用IDEです。Windows, Mac, Linuxで動作し、多くの言語やフレームワークに対応しています。軽量で高速な動作と豊富な拡張機能が魅力です。無料で利用できます。

### Eclipse
Eclipse（エクリプス）は、Eclipse Foundationが開発したオープンソースの汎用IDEです。Windows, Mac, Linuxで動作し、Javaを中心に多くの言語やフレームワークに対応しています。高度な機能やプラグインが多数あります。無料で利用できます。

### Xcode
Xcode（エックスコード）は、アップル社が開発したmacOS/iOS向けの専用IDEです5。Macで動作し、Swift, Objective-C, C, C++などの言語に対応しています。GUIデザインやシミュレータなど開発を効率化する機能があります。無料で利用できます。

### IntelliJ IDEA
IntelliJ IDEA（インテリジェイ アイディア）は、ジェットブレインズ社が開発したJava言語向けの専用IDEです。Windows, Mac, Linuxで動作し、Java, Kotlin, Scalaなどの言語に対応しています。コード解析やリファクタリングなど高品質な機能があります。無料のCommunity Editionと有料のUltimate Editionがあります。

## まとめ
IDEとは、ソフトウェア開発に必要な様々なツールを一つにまとめたものです。
IDEを使うと、プログラミングをより快適に行うことができます。IDEには様々な種類があり、自分の目的や好みに合わせて選ぶことができます。
初心者におすすめのIDEとして、Visual Studio Code, Eclipse, Xcode, IntelliJ IDEAなどがあります。ぜひ、自分に合ったIDEを見つけてみてください。
2023.5.26 プログラミングメモ ラジオボタンchange他

・画像がフェードアウトした後に「フェードアウトしました」って文字がアラートダイアログで表示されるようにして
動作
ホバーしたら画像をフェードアウト→フェードアウトした後に時間差でアラート表示（setTimeout使用）

・JS

'use strict';

$('img').hover(() => {
  $('img')
    .addClass('fade-out')
      const Alert = function(){
        alert('フェードアウトしました');
      };
      setTimeout(Alert, 500);
});

参考URL
https://qiita.com/chihiro/items/b105a901bbfd6c5b483c


●5/31
ラジオボタンを選択したら同じ位置にある画像に赤枠追加
選択が外れたら赤枠を削除


JSでの動作

シャドウの画像3つの配列を取得
const shadowImg = document.querySelectorAll('.shadowClass');

ラジオボタンの切り替えイベント
add.EventListener「change」
document.addEventListener("change", (e) => {

特定の配列番号を呼び出す場合変数の後に[番号]
例shadowClassの二番目と三番目を呼び出す場合
console.log("二番目と三番目" ,shadowImg[1], shadowImg[2]);

赤枠の切り替え、removeの二つの画像を一括指定したかったがうまく動作しなかった為
一つづつ指定
shadowImg[1].classList.remove('frame');
shadowImg[2].classList.remove('frame');
shadowImg[0].classList.add('frame')


jQでの動作

ラジオボタンの切り替えイベント
$( 'input[name="select"]:radio' ).change( function(e) {
該当するラジオボタンを指定して「.changeメソッド」を使用

赤枠の切り替えは
:not()メソッドを使用

case "left":
$('.shadowClass:not(:eq(0))').removeClass('frame');
        $('.shadowClass').eq(0).addClass('frame')
        break;
ラジオボタンの「left」が選択されたら
0番目の画像「以外」のframeクラスを削除
0番目の画像のframeクラスを追加する


・参考（ラジオボタンでのchangeイベント）
https://dev-k.hatenablog.com/entry/onchange-event-in-javascript-dev-k