OmniAICreator/Qiita-1.07M huggingface dataset:
令和７年秋期　応用技術に向けて(令和７年春期不合格日記)

## はじめに
初めてIPA資格を受ましたが、見事に午前で足切りされてしまいました。

そこで他の受験生の勉強法などを参考に、１０月に向けて勉強を始めようと思います。
令和７年春期の勉強進捗はいかにあります。
[①進捗記事](https://qiita.com/gravellander/items/1ba2f111c43728b6bf16)
[②進捗記事](https://qiita.com/gravellander/items/3c5e7abb56de0e90dc32)
[③進捗記事](https://qiita.com/gravellander/items/84e592e2c223835d3f64)

## 勉強方法
●過去問を直近１０年分じゃなく、全ての年を行う
　→令和７年春期では、平成２０年頃の過去問が出てたので、全てやろと思います。

●最近トレンドの【情報セキュリティ】【AIの分野】を重点的に勉強する。

●応用技術者試験のシラバスの変更点を確認し、勉強する。

●苦手分野(計算、アルゴリズム、DB)の克服

## あとがき
１０月までまだ半年あるので、少しずつ
勉強を進めて　確実に定着できるように

がんばるます
自分は、憧れていたエンジニア像に近づけているのだろうか？

## はじめに
エンジニアという職業に、あなたはどんな理想を描いていましたか？

「技術で世の中を変えたい」「誰かの役に立つプロダクトをつくりたい」
そうした思いを胸に、エンジニアを目指した人も多いと思います。

ですが、日常の業務に没頭するうちに、ふとこんな問いが頭をよぎることはないでしょうか。

「自分は、憧れていたエンジニア像に近づけているのだろうか？」

エンジニアとしてのキャリアを考えていくうちに、あの頃の憧れやなりたかったエンジニア像を見失ってはいないでしょうか？
型にはまらず、自分の理想を目指すことも選択の一つでありそれこそ応援すべきだと思います。

「どこにでもいるような実装者」ではなく、「自分らしい強みを活かして、価値をつくるエンジニア」になれているだろうか？

今回はその選択として、プロダクトや事業に深く関わりたいという理想を一例に紹介しながら記述します。
ただ実装するだけでなく、プロダクトの本質に向き合い、価値をつくる側に立つ――そんな動き方を目指したい人にも届けたい内容です。


## 目的を見失わないエンジニアになる

現場で求められる技術力は当然大切ですが、最終的にユーザーに届くのは“動くコード”ではなく“価値ある体験”です。

プロダクト志向のエンジニアとは、単なるタスク処理者ではなく、目的から逆算して行動できる人。たとえ仕様が固まっていなくても、問いを立て、仮説を持ち、プロダクトの成功に向けて主体的に動ける存在です。

### 実装は手段であって目的ではない

はじめは「早くタスクを処理できた」「技術的に綺麗に書けた」「パフォーマンスを最適化できた」ことに満足してしまいがちですが、それがユーザーの課題解決や価値提供にどうつながっているのかを見失わないことが重要です。

自分が担当したこのタスクはユーザーにとって、事業にとって何のための機能なのか。ただ汚いコードが嫌だからではなく、品質向上のため・ユーザー体験を失ってしまうバグを減らすためである。というような思考が本質を見抜くためには必要であると考えます。

## 領域を超えることを恐れない

プロダクト志向で動くためには、**自分の専門外**にも踏み込む姿勢が求められます。

- デザイナーと一緒にユーザー体験を考える
- PMと一緒にKPIを見ながら優先度を見直す
- ユーザーインタビューに参加する

このあたりはすでにエンジニアの領域として携わることも多くなっているようにも感じますが、このようにいい意味での**領域侵犯**をすることで、視野が広がり、アウトプットの質も上がります。
開発エンジニアさん、から一緒に事業を支えるメンバーとしてできることや学ぶことも幅広くなるのではないでしょうか。

### 「越境」は成長の源

一見すると遠回りに見える活動も、プロダクト全体の文脈を知ることにつながり、実装の判断や提案に深みが出てきます。
<br>
「仕様が決まってから動く」から「仕様を一緒につくる」へ
「デザインをもらってから組む」から「体験設計から一緒に考える」へ
<br>

そうした一歩が、ただの**作業者**から**価値をつくる人**への進化を後押しします。

## エンジニアとしての自分をアップデートし続ける
エンジニアのキャリアは、技術の習得だけではなく、自分自身の捉え方を更新し続ける旅でもあります。

最初は技術力や社会人経験を磨くためにも「仕様通りに実装すること」が仕事だったかもしれません。けれど、経験を重ねる中で、次第に「本当に必要なものは何か」「どうすればもっと良くなるか」と、視野が広がっていきます。

これは、エンジニアという“役割”を、自分なりに再定義していく過程でもあります。

「自分はどこまで関わっていいのか」ではなく、
「自分が関わることで、何がもっとよくなるか」を考える。

こうした問いを持つことで、エンジニアという枠を超えて、より大きな影響力を持つ存在へと成長していけるはずです。

## それができる環境を大切にする

もちろん、そうした動き方ができるかどうかは、事業やチーム、会社の文化にも左右されます。

- 職能の垣根を越えて会話できる雰囲気があるか
- 意見を歓迎し、試す余白があるか
- ユーザーの声やプロダクトの方向性を共有できる機会があるか

もし今そうした環境にいるなら、それはとても貴重なことです。その機会を活かして、自分の枠をどんどん広げていきましょう。
挑戦ができる環境であれば、新しくあなたが文化をつくっていくことも素晴らしいと思います。自分の理想のエンジニアになるための環境作りや選択も大切です。

少し視点を変えてみると、サービス事業ではない環境でエンジニアとして動いていく、なんて挑戦も面白いかもしれません。

ブランディング事業でエンジニアリングがしたくてゼロイチプロダクトを創っているエンジニアもいますからね・・・！

## おわりに

あなたがエンジニアになりたいと思ったとき、どんな未来を思い描いていたでしょうか？

誰かの役に立つプロダクトをつくりたい。
技術で社会にインパクトを与えたい。
そんな思いが、今もどこかに残っているはずです。

けれど、気づけばそんな想いも見失ってしまっていないか？
そんな違和感に向き合うことが、次のステップへの第一歩です。

### 「型にはまらない」という選択肢
プロダクトの目的に立ち返り、職域を越えて関わる。
それは、「ただの実装者」から「価値をつくるエンジニア」へ進化する道。

技術力だけでなく、視点と姿勢で差がつく時代だからこそ、
視野を広げ、自分の役割を定義し直すことで、キャリアもプロダクトも大きく変わります。これを機に
自分の**憧れるエンジニア像**を、今いちどアップデートしてみてはいかがでしょうか。どのように動いていくべきかを考えるその一歩になれば幸いです。

## 【4/27開催】生成AI演芸会 by GIFTech
モノ創り、ゼロイチ体験、生成AI技術が好きなエンジニアとデザイナーが集まったハッカソン「GIFTech2025春」の成果発表＆プロダクト体験会が2025年4月27日(日)に開催決定‼️
エンターテイナーと共創して開発されたプロダクトを体験しませんか？
また、開発チームメンバーと直接話して自分の理想像を見直すきっかけにしてみてもいかがでしょうか？

#### 以下のフォームから事前参加登録できます！（※先着順・定員あり）

https://forms.gle/bsRaWGy2oeUtNQGN6


![PRESS-Thumnail_04.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3991729/2120fc76-b902-44c4-a690-d9465ef5a51e.png)

#### 詳細

https://qiita.com/GIFCat/items/40cacc0da0c8606ab20b
セルフホスト版 Meilisearchの気になったところ2選

こんにちは。

Meilisearchは軽量・高速な検索エンジンです。
Rustで書かれているのも個人的にツボポイントです。
https://www.meilisearch.com/

今回はセルフホスト版のmeilisearchを使ってみて、バージョン1.13時点で気になった点についてまとめていこうと思います。

Vector検索やハイブリッド検索を用いない、素のmeilisearchを対象としている点にご留意ください。

もし、記載内容に間違いがあればご指摘いただけると嬉しいです。

# 日本語との相性

## まずは検索の概要について
Meilisearchでの検索は、はじめにクエリを分割&結合して幾つかの候補を作成します。

公式の例がわかりやすいので参考にさせていただきます。
https://www.meilisearch.com/docs/learn/engine/concat

### 結合の例
結合は検索クエリ内に複数の単語が入っている場合に行われる処理です。
`The news paper`という検索クエリが渡された場合、以下のような組み合わせの結合クエリが作成されます。
- `Thenews paper`
- `the newspaper`
- `Thenewspaper`

このように最大3単語を結合しています。

### 分割の例
次に分割ですが、検索クエリをスペースで区切った時のそれぞれの単語を小さい単位に分割していきます。
`newspaper`という単語であれば、`news`と`paper`に分けられます。

このような処理はクエリにマッチするデータを限りなく拾うための処置だと考えられます。

次に、prefix searchと呼ばれる手法で検索を用いてマッチする文章を取得します。

公式の例がわかりやすいので参考にさせていただきます。
https://www.meilisearch.com/docs/learn/engine/prefix

### prefix searchの例
データセット内に以下の単語が格納されているとする。
`film` `cinema` `movies` `show` `harry` `potter` `shine` `musical`

検索クエリが`s`の場合のレスポンスは
- `show`
- `shine`

の二つで`movies`や`musical`は含まれない
検索クエリが`sho`だと`show`が得られる。

この例から分かるように指定された単語で始まるものを探すのがprefix searchになります。

## 何が問題なのか？
主に分割のところで日本語のクエリを分割するときに小さく分割しすぎる傾向にあると思います。
特にひらがなやカタカナはそんな印象を受けます。
例えば、`マイナンバー`を`マ` `イ` `ナ` `ン` `バ` `ー`と分けたりです。

この状態でprefix searchをすると、ほとんど関連のない文書が取得されることになるわけです。

## 考えられる改善点
新規の単語を辞書に登録するとか、形態素解析側を調整できるようになったりすると調整できるのかなと考えてます。

# 複数インデックスの取り扱い

meilisearchではmulti searchやfederated searchなど複数インデックスに対応した検索方法が存在します。まずはその違いについてざっくりイメージをつけてもらい、話に入っていきます。
https://www.meilisearch.com/docs/learn/multi_search/performing_federated_search

## multi searchとfederated search
multi searchは並列実行による単体インデックスの検索、federated searchは複数インデックスの横断検索という違いがあります。

イメージとしては、
`index1`, `index2`があった時に、multi searchでは結果1, 結果2が返ってきて、federated searchでは結果1&2が返ってくるという感じです。

## 何が問題なのか？
### federated searchを行った時に、検索結果全体にsortを反映できない。

以前記事を書いたようにランキングロジックを変更することで、新着順や価格順といったソートを聞かせることができます。
https://qiita.com/tamaloon/items/abcd699a9846124f840c

しかし、これは単体のインデックスに限られていると思われます。

そのため、なんらかの理由により複数インデックスで情報を管理し、検索の時に横断検索をした結果をソートしたいとなると、
それぞれのインデックス内ではソートされているもののそれをただ結合しただけという状態になります。

これはfederated searchのmergeアルゴリズムの問題なのかなーと考えてます。
https://www.meilisearch.com/docs/learn/multi_search/performing_federated_search

### 各インデックスに検索の設定が紐づいている
若干話はそれますが、各インデックスに設定が紐づいてるのもやりづらいですね。
置き換えタイプのインデックス更新をやっていると更新のたびに設定の更新が必要です。
ここは差分更新やったら解消するのかもしれないですが。

この辺りを見ていると単体インデックス特化なのかなとも思います。

# まとめ
Meilisearchは導入もしやすく、良い検索エンジンだと思います。
一方で、私が書いたようなちょっとはまりにくいポイントなんかもあったりします。
ただ、日本語の問題に関してはVector検索を導入することで改善できる可能性があるなと考えています。
その辺りの検証ができていないのと私の調査不足の可能性も大いにありますので、ぜひご意見等々募集してます。

ありがとうございました。

# 仲間を募集中
株式会社ホープでは、福岡で働くエンジニアを募集中です。
ぜひ、求人を見てみてください！
▼ Wantedly求人
https://www.wantedly.com/projects/1684027
▼ コーポレートサイト
https://www.zaigenkakuho.com/recruit/
「自治体を通じて人々に新たな価値を提供し、会社及び従業員の成長を追求する」
この理念の実現に向けて、今後も自治体の課題解決に取り組んでいきます。
ご応募お待ちしております！
【簡単Kubernetes】【kubectl】kubectl コマンドの違いまとめ：get deployments 編

Kubernetes クラスタの状態確認に欠かせない `kubectl` コマンドの中でも、Deployment の確認によく使う `kubectl get deployments` 系コマンドについて整理しました。

---

## 🔹 `kubectl get deployments`

- **説明**：
  現在のコンテキストで設定されている namespace の Deployment リソースを取得します。
  
- **使用例**：
  ```bash
  kubectl get deployments
  ```
  
- **備考**：
  Namespace を指定していない場合、デフォルトでは `default` namespace の情報が表示されます。

---

## 🔹 `kubectl get deployments -A`

- **説明**：
  すべての namespace の Deployment を一括で取得します。`-A` は `--all-namespaces` の省略形です。

- **使用例**：
  ```bash
  kubectl get deployments -A
  ```

- **備考**：
  各 Deployment の namespace が一覧表示され、システム全体の把握に便利です。

---

## 🔹 `kubectl get deployments --all-namespaces`

- **説明**：
  `-A` と同じ意味で、すべての namespace に存在する Deployment を確認できます。

- **使用例**：
  ```bash
  kubectl get deployments --all-namespaces
  ```

- **備考**：
  `-A` の代わりに明示的に `--all-namespaces` を使いたい場合に有効です。

---

## 🔹 `kubectl get deployments -n <namespace>`

- **説明**：
  特定の namespace に属する Deployment のみを確認します。

- **使用例**：
  ```bash
  kubectl get deployments -n kube-system
  ```

- **備考**：
  システム系 Pod（例：kube-proxy, coredns など）は `kube-system` namespace に存在することが多いです。

---

## 📌 補足：namespace とは？

Kubernetes の namespace は、複数のユーザーやチームがクラスタを共有する際にリソースを分離するための論理的な区切りです。namespace を活用することで、開発・検証・本番環境などを同一クラスタ内で安全に分けて運用できます。

---

## ✅ まとめ

| コマンド | 説明 |
|---------|------|
| `kubectl get deployments` | 現在の namespace の Deployment 一覧 |
| `kubectl get deployments -A` / `--all-namespaces` | 全 namespace の Deployment を表示 |
| `kubectl get deployments -n <namespace>` | 指定 namespace のみ表示 |

---

📘 クラスタ管理やトラブルシュートの際には、namespace ごとの確認を行うことで、状況の特定がスムーズになります。
【CSS】Flexbox完全理解！実務でよく使うレイアウトパターンと書き方まとめ【備忘録】

# はじめに

HTML/CSSでレイアウトを組むうえで、今や必須とも言えるのが **Flexbox（フレックスボックス）**。  
本記事では、Flexboxの基本プロパティと、**実務でよく使われるレイアウトパターン**を備忘録としてまとめておきます。

---

# ①Flexboxとは？

CSSの `display: flex` を使って、**要素を横並び・縦並び・中央揃え・スペース調整**など、柔軟にレイアウトできる仕組みです。

---

# ②基本の書き方

```css
.container {
  display: flex;
}
```
これだけで、.container の中の要素（子要素）は **横並び**になります！

# ③よく使うプロパティまとめ（親要素）
![IMG_7803.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2246240/76ee6523-7813-47f3-99ab-f380682a97a4.jpeg)

# ④よく使うプロパティまとめ（子要素）
![IMG_7804.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2246240/57f16240-d411-40e1-b711-19ef0a6c4ab1.jpeg)

# ⑤実務でよく使うレイアウトパターン

**パターン1: 横並びで中央揃え**
```css
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
```
**使いどころ**： ナビゲーション、ボタン、画像＋テキストのセンター表示など

**パターン2：左右に2つを分ける（space-between）**
```css
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
```
**使いどころ**： ヘッダーのロゴとメニュー、価格表のラベルと値 など

**パターン3：縦並び（column）で上下中央揃え**
```css
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
```
**使いどころ**： ログイン画面、フォーム中心揃え など

**パターン4：折り返し可能なアイテム一覧（レスポンシブ対応）**
```css
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.item {
  width: 48%;
}
```
**使いどころ**： 商品一覧、画像ギャラリー、カード型UIなど

**パターン5：要素が余白を埋めるように伸びる（flex: 1）**

```css
.container {
  display: flex;
}
.item {
  flex: 1;
}
```
**使いどころ**： 均等なカラム割り、ボタンを等間隔で並べたいとき

# ⑥よくあるトラブルと対処法
![IMG_7805.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2246240/ea2c07ac-b077-41e7-bf26-e31b6271946d.jpeg)

# ⑦まとめ
- Flexboxは、**現代のWebレイアウトの基本技術**

- 覚えるべきは**親要素（container）のプロパティ**が中心

- よく使うパターンを「手癖レベル」で覚えておくと、実務で超便利！
WSLのシステムディスクの容量を増やす with ChatGPT先生

#### WSLのシステムディスクの容量を増やす　with ChatGPT先生

ComfyUIのFramePackをインストールしようとして、HunyuanVideoのモデルをmodelsにコピー中、容量不足になったので、ubuntuのシステムディスクの容量を増やさなければならなくなった。ChatGPT 4o先生に教えてもらいながら、やってみたら、なんとかできたので、備忘録として記す。

WindowsのシステムディスクはM.2で、４Tと十分大きかったで、油断していたのだが、WSLインストールで、1Tしか確保されていなかったようである。

１．windowsのエクスプローラーでext4 のキーワードで、ubuntuのシステムディスクを探し、

ChatGPTに、その結果を教えると、

```
(私）ext4　は、　"C:\Users\ユーザー名\AppData\Local\wsl\{7f2c529c-06e2-4a68-b2e3-30fa221f7fa8}\ext4.vhdx"　にあります

（ChatGPT 4o）完璧です！🎯
ついに ext4.vhdx の実体パスが確認できましたね：

✅ あなたのWSL2の仮想ディスクのパス：

C:\Users\ユーザー名\AppData\Local\wsl\{7f2c529c-06e2-4a68-b2e3-30fa221f7fa8}\ext4.vhdx
これは 「新しいWSLの標準インストール形式」（WSL ストア版など）で使われるパスです。
つまり、従来の Packages\ディストリ名\LocalState\ ではなく、
Windows 11や新しい WSL で導入された「%LOCALAPPDATA%\wsl\GUID」形式です。

```
 上の要領で、アウトプットをコピペして、ChatGPT 4oの指示を仰ぎながら進めていく

現在のディスクサイズ確認（PowerShellから）

Get-Item "C:\Users\ユーザー名\AppData\Local\wsl\{7f2c529c-06e2-4a68-b2e3-30fa221f7fa8}\ext4.vhdx" | Select-Object Name, Length


#### ディスク容量を拡張する手順
✅ 1. WSLを完全に停止し、poweshellから、
```
wsl --shutdown
```

✅ 2. Resize-VHD でサイズを拡張（例：2TB）
```
⚠️ Windows 10/11 Pro, Enterprise, Education エディションが必要です
（Home Editionの場合は別ルートを案内）

Resize-VHD -Path "C:\Users\ユーザー名\AppData\Local\wsl\{7f2c529c-06e2-4a68-b2e3-30fa221f7fa8}\ext4.vhdx" -SizeBytes 2TB
```
ここで、当方のシステムで、Hyper-Vがインストールされていなかったので、PowerShellから

```
Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Hyper-V -All
```
でHyper-Vをインストール後、上のResize-VHDを再度実行
ただし、下の sudo resize2fs /dev/sdc　の /dev/sdc
はlsblkコマンドで、自分の環境でのルートのデバイスをチェック

![スクリーンショット 2025-04-21 083353.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430586/39c07fbd-9800-4270-9f0c-89419d73020b.png)


![スクリーンショット 2025-04-21 082332.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430586/d0e70862-352e-4b50-b324-bb3d1ec9e251.png)
シーン遷移のフェードとUIフェードのルール画像変更　初心者向け


Unity6.0 (6000.0.47f1)


https://tsubakit1.hateblo.jp/entry/2015/11/04/015355#%E6%96%B0%E3%81%97%E3%81%84Fade-Camera

このサイトのフェードを参考にして作成しています

シーンをまたいだフェードについて
シングルトンでFadeとまったく同じクラスSceneFadeを作成して破棄されないようにする
（別にシングルトンじゃなくてもいいかも）
SceneFadeのStartにコード追加
```
DontDestroyOnLoad(this.gameObject);
```
↑破棄されなくなるやつ

シングルトン参考

https://www.youtube.com/watch?v=0LC5BgwPKOc&ab_channel=AMAGAMI%2F%E3%82%A2%E3%83%9E%E3%82%AC%E3%83%9F%E3%83%8A%E3%82%B2%E3%83%BC%E3%83%A0%E3%82%B9

後はFadeCanvaのPrefabをコピーしてFadeクラスをFadeSceneクラスに入れ替えてフェードしたら行けると思います


オブジェクトの重複などが発生したときなどに参考にしたサイト


https://kan-kikuchi.hatenablog.com/entry/ManagerSceneAutoLoader




・UIフェード
参考サイトでもう出来ているのですが
ルール画像の変更に悩んだので

Fade/Materials/UI-Mask.shaderファイルの最初の部分を入れ替え

[PerRendererData] _MaskTex("Mask Texture", 2D) = "white" {}
↓
_MaskTex("Mask Texture", 2D) = "white" {}

これでマテリアルのテクスチャを入れ替えられるようになります
普段シェーダーをいじらなかったり
シェーダーグラフなどが追加されてるので時間がかかったのでメモ
正しいHTMLタグで作る！かんたんなブログ風Webページを作成して学んだこと

# 正しいHTMLタグで作る！かんたんなブログ風Webページを作成して学んだこと

弊社で毎月開催されている社内講習会の課題として、「正しいタグの使い方を意識したHTML・CSSコーディング」に取り組みました。
今回はその課題で制作した、かんたんなブログ風のWebページをベースに意識したポイントや学んだことをまとめてみます。

## 課題の概要
- **テーマ**：「正しいHTMLタグを使う」
- **目的**：意味的に正しいマークアップを意識し、保守性・アクセシビリティの高いWebページを作る練習
- **制作物**：写真ブログ風の1ページ構成サイト

## 今回作成したもの
PC
![works_pc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669311/0b6630e6-70c9-4e8e-a585-906110a93a34.png)

SP
![works_sp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669311/40771757-bc92-4516-897f-d251cbe1da6a.png)
Designed by [Freepik](https://jp.freepik.com/)

## 意識した「正しいタグの使い方」
### 1.`header`/`nav`/`footer`を使った構造的なレイアウト

全体の構造を意味に沿って以下のように整理しました。

```html
<header>ページのナビゲーションやロゴなど
<nav>ページ内リンク（SELF INTRODUCTION・BLOG）
<main>ページの主な内容
<footer>著作権情報など
```
これにより、スクリーンリーダーや検索エンジンにもわかりやすい構造になります。

### 2. `section`と`article`の使い分け
ブログ記事部分には以下のようにタグを使い分けました。

- section：セクションのまとまり（自己紹介エリアやブログ全体）
- article：ひとつひとつのブログ投稿（独立性のある内容）

```html
<section class="blog-wrapper">
  <article>
    <h3>朝焼けの魔法</h3>
    ...
  </article>
</section>
```

記事単位の独立性を保つため、**article**の中には**h3**、**time**、**p**、**ul**などの要素を使っています。

### 3. `time`要素で日付の意味を明示
ブログ記事の日付は装飾ではなく、意味のある情報として**time**タグでマークアップしました。

```html
<time datetime="2024-04-06">2025.04.06</time>
```

このように書くことで、機械にも「これは日付だよ」と伝えることができます。

## 最後に
見た目が同じでも、HTMLタグの意味や構造を意識するかどうかで大きな差が出ると実感しました。

特に**section**と**article**の違いなど、普段あまり意識していなかったタグを調べながら使うことで理解が深まりました。

タグを正しく使うことで、SEOやアクセシビリティにも強くなるので、初心者こそ意識したいポイントだと思います。

今後もこういった「見た目」だけでなく「意味を意識したマークアップ」でサイト制作に取り組んでいきます。
一人で開発・創作している人へ：静かなコミュニティを作ってみました

## はじめに

個人で何かを開発したり、創作したり、発信したりしていると、  
「相談できる相手がいない」「進捗を報告する相手もいない」  
そんな孤独や不安を感じることはありませんか？

私自身、長らく一人でソフトウェア開発やサービス運営をしてきましたが、  
「ただ話を聞いてくれる誰か」や「軽く雑談できる場所」があれば、  
もっと楽に続けられたかもしれないと思うことが増えてきました。

そこで今回、「一人活動者向けの小さなコミュニティ」をDiscordで立ち上げました。

---

## コミュニティの概要

- **名前**：一人活動者の休憩所（仮）
- **形式**：Discordサーバー
- **対象**：
    - 一人で開発している人
    - 一人で創作している人
    - 一人で発信や配信をしている人
- **目的**：  
    - 気軽に進捗を呟いたり  
    - 雑談したり  
    - 「今日も何もできなかった…」を共有したり

誰かと競う場所ではなく、「一人でやってることを誰かと少しだけ共有できる場所」を目指しています。

---

## 参加方法

以下のページから参加できます：

**→ [https://anvelk.jp/Project/](https://anvelk.jp/Project/)**

※現在はプレ公開中です。CAMPFIREの支援者向け本公開は後日予定しています。  
※参加には同意事項（IP記録など）があります。詳細はリンク先でご確認ください。

---

## 最後に

技術系・創作系を問わず、個人での活動は本当に尊いものだと思います。  
誰かと比べる必要はありません。  
このコミュニティが、そんな一人ひとりの「少しだけの支え」になれたら幸いです。

質問や感想なども大歓迎です。どうぞよろしくお願いします。
個人的備忘録：Dev Containerって聞いたことある？ 初めて聞いたので、自分なりに調べてみた

## はじめに
本記事では、Visual Studio Code（VS Code）の拡張機能「Dev Containers」を使って構築する開発環境である「Dev Container」について解説します。

:::note info
**個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。**
:::

Dockerを活用した開発環境の一つであり、環境構築の煩わしさを軽減し、どこでも同じ開発環境を再現できる点が特徴です。

## 書こうと思ったきっかけ
受講しているITスクールのハッカソン交流会にて、初めて「Dev Container」という単語を耳にしました。聞き慣れない用語だったため、自分でも改めて調べてみようと思ったのが、今回この記事を書こうと思ったきっかけになります。

## Dev Containerとは
Dev Containerは、VS CodeとDockerを使って構築する開発環境です。

**参考文献**

https://blog.kinto-technologies.com/posts/2022-12-10-VSCodeDevContainer/

https://zenn.dev/tom_tan/articles/9af1818fcde7d2

Windows、Mac、Linuxといった主要なOS上で動作し、以下のような特徴があります。

- VS CodeでDev Containerを起動すると、Dockerコンテナがフル機能の開発環境として利用可能になります。
- ホストマシンからソースコードをマウントしつつ、VS Codeの拡張機能やライブラリはコンテナ内にインストールされます。
- これにより、ホスト環境にインストールされている他のライブラリやツールとの競合を気にせずに開発が行えます。

## 利用シーンの一例
たとえば、プロジェクトAではNode.jsのバージョン14を、プロジェクトBではバージョン18を使いたい場合、ホストマシンで開発しているとバージョン管理ツール（nなど）での切り替えが必要になります。
しかし、Dev Containerを使用することで、プロジェクトごとに完全に独立した開発環境を用意できるため、こうした煩雑な作業を避けることが可能です。

## まとめ
現時点ではまだDev Containerを実際に使ったことはありませんが、今回の調査を通じて仕組みや利便性について理解が深まりました。

:::note warn
***今後、プロジェクトや学習の中で開発環境構築の必要が生じた際には、実際にDev Containerを試してみたいと考えています。***
:::

特に、チーム開発や異なる言語・フレームワークを扱うプロジェクトで活用することで、その効果を実感できる場面が増えるのではないかと感じています...！
MT5で1行デバックしてみた

MT5：FXのチャートが見られるツール
デバック理由：銘柄(タブ)が17ほどあり、RSIのレベルを17回追加するのが面倒でした。

(a)左下の「お気に入り」でRSIを左クリック、設定というボタンを押下。
![スクリーンショット 2025-04-20 12.53.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1058366/01ba1ba6-cab3-43cf-8e82-00af21bc5bbf.png)

(b)「indivator_level」という変数を1つコピペして2つにすることで、(a)中央の「30」「70」のレベルがデフォルトで表示されました。
![スクリーンショット 2025-04-20 12.02.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1058366/3571d732-d624-42b0-bfd2-dea109150cae.png)
生成AIの衝撃を「人類の情報摂取インターフェース」から読み解く


```
情報の摂り方は「話す」から再び「話す」へ
```

昨今、生成AIに進化・インパクトが凄まじいですね。

AIのアルゴリズムを理解しようとすると非常に複雑になりますが、「**情報をどう受け取るか＝インターフェース**」という視点に立つと、その変化や影響力の大きさが分かりやすく整理できます。

## 情報摂取インターフェースの変遷

これまで私たち人類は長い歴史の中で、情報を摂取する方法を進化させてきました。

1. 口伝え──声と耳だけで世界は回っていた
2. 紙──言葉が時代と空間を越えるようになった
3. コマンドライン（テキストUI）──画面に呪文を打ち込むことで計算機にアクセス
4. GUI──クリックだけでコンピュータとの協働が実現
5. タッチUI──指先で直感的な操作
6. 自然言語UI──再び「話す」へ、ただし世界の知識を保有


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76983/02c18df2-d7c0-407d-a5a3-c7c1bab7a40f.png)


大昔、人間は情報を口伝えで共有していました。話すこと、聞くことが唯一の情報伝達手段でした。

やがて文字の発明に伴い、情報伝達のインターフェースは「紙」へと変化しました。書籍、手紙、新聞が情報共有の中心となり、情報が蓄積可能かつ広範に伝播するようになりました。

その後、コマンドライン（コンピュータ）が登場します。情報摂取のスピードと範囲は飛躍的に向上しましたが、操作自体はまだ複雑でした。しかしこれらの計算能力のアクセスにより、テレビやインターネットという新たな広がりをもたらしました。

次に現れたのが「GUI（グラフィカルユーザーインターフェース）」です。複雑な操作を視覚的に分かりやすく整理し、ユーザーはアイコンやウィンドウをクリックするだけで情報hアクセスできるようになりました。

その後、「タッチスクリーン」の登場により、インターフェースはさらに直感的になりました。マウスやキーボードといった外部機器を使う必要がなくなり、スマートフォンの普及により情報摂取はいつでもどこでも可能になりました。

そして現在、情報摂取のインターフェースは再び「自然言語」に戻ってきています。しかし興味深いことに、この自然言語インターフェースはかつての口伝えとは本質的に異なります。その背景にある知識や情報量は、地球規模の知識データベースへと拡張しています。

## 自然言語インターフェースの影響

自然言語とは、そもそも人間が最も直感的に使えるインターフェースです。この本来的に適したインターフェースを通じて、膨大かつ高度に体系化されたナレッジにアクセスできるようになった現代では、すべてのアプリケーションが大きなアップデートを迫られています。

一般に、新しいテクノロジーは取り扱いが難しいと普及しない、と言われています。しかし、誰にとっても使いやすくなった瞬間に一気に普及する、とも言われています。

過去にスマホが登場したとき、GUIからタッチスクリーンにインターフェースが移行した際、写真の拡大・縮小やスクロールなどの操作が飛躍的に簡単かつ直感的になりました。これにより、アプリケーションの使いやすさやユーザー体験は劇的に向上しました。

これと同様に、自然言語インターフェースの普及により、今後の変化が予測されます。
例えば、複雑なソフトウェアの操作も、「この写真を加工して、SNSに投稿して」というシンプルな指示を伝えるだけで完結するようになります。これによりデジタルリテラシーの壁は一層低くなり、誰もがより簡単に技術を活用できる世界が訪れるでしょう。

## **人にとって最適解な自然言語インターフェース**

人間の情報摂取のあり方は、ついに最も自然なインターフェースである自然言語に再び戻ってきました。一周まわって本来、人間に最も適した形式に戻った点は非常に興味深い点です。
ただしその背後には、かつてとは比べ物にならないほどの巨大な知識体系が存在しています。

これは、人類史上初めて **「**話す → 瞬時に地球規模の知見へアクセス → 再び話す**」** というサイクルが日常化することを意味します。つまり、次々と質問できる人、が膨大の知識にアクセスし、新たな価値創出を実現してく世界に変わったことを意味します。
社内マニュアルの運用を改善する「チャットボット」について

社内マニュアル運用に課題を感じている方に向けて、チャットボット活用の選択肢を提案します。

「情報が整理されていない」「更新に手間がかかる」「問い合わせ対応に追われる」──そんな悩み、実はチャットボットでかなり改善できるかもしれません。

具体的には、以下のような効果が期待できます。

・従業員の負担軽減と業務効率化
・業務の属人化防止
・24時間対応による業務の柔軟性向上

実際にチャットボットを導入して、マニュアル運用の自動化や問い合わせ対応の効率化に成功した事例もあります。
ただし、運用コストやセキュリティリスクも無視できないため、導入には計画と設計が欠かせません。

ポイントとなる技術的観点は以下の通りです。

・マニュアル現状分析（更新頻度・検索性・FAQ分析）
・チャットボットの対応範囲設計と情報モデリング
・テスト運用における回答精度と検索性のチューニング
・継続的なフィードバックループ設計（ログ分析→FAQ改善）
・セキュリティ対策（認証、データ暗号化、権限管理）

特にFAQ整備と検索精度向上の部分は、情報設計（IA）と自然言語処理（NLP）知識があると、大きな効果が期待できます。
また、ツール選定段階では、API連携の可否、カスタマイズ性、管理画面の使いやすさなど、エンジニア目線での見極めも重要です。

詳細な導入手順や成功事例については、以下にも記載しています。
https://aipha.co.jp/column/chatbot-manual/
n8nと生成AIで何ができるのか？核融合発電の海外ニュースを日本語で受け取る（投資調査用）

n8nを使うとわりとプログラミング少なめで（かなり書いてる気がするけど）定期的に生成AIを呼び出す仕組みが作れます。

今回は英語の核融合発電に関するニュースを毎日日本語でメールを送ってくれるものを作ってみました。ニュースタイトルや概要をChatGPTで日本語化し、今日のニュース全体の概要と投資アドバイスなどもChatGPTで付け足しています。

こんなメールが毎日やってきます。

![2025-04-18_14h29_08.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33704/aa4cb8b0-4958-48f4-97b4-87bf14616279.jpeg)

n8n のフローはこのようになります。わりと複雑ですね。

![2025-04-18_13h56_17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33704/6624970b-1304-4fc3-81ae-7247b90423a3.png)

n8n での処理の最小単位はノードと呼ばれていますが、それぞれの処理の流れはこうなってます。左上の Schedule Trigger から始まって真ん中右の Gmail で終わってます。

1. 毎朝６時に実行する
1. 英語版 Google News から核融合発電に関するニュースのRSSを取得
1. ２日前より古いニュースを削除する
1. pubDate を unixtime に変換する
1. unixtime でニュースを新しい順で並び替える
1. 記事数を20に制限する
1. ニュースごとの処理をループ処理する
1. 英語のニュースタイトルを ChatGPT を使って日本語に翻訳する
1. 英語のニュース概要を ChatGPT を使って日本語に翻訳する
1. 翻訳をニュースのデータに結合する
1. ニュースをHTML化する
1. 今日のニュース全体の要約を ChatGPT で作成する
1. ニュース記事の内容と全体の要約から投資アドバイスを ChatGPT で作成する
1. HTMLメールを送信！

興味ある情報を毎日教えてくれるAIエージェントはこのような流れで作れます。
Kubernetes(K8S)の用語集

# はじめに
kubenates(K8S)を現場で使い始めたので、新しく学んでいる最中です。
理解していったことなどは、都度更新していきます。


# 公式ドキュメント

https://kubernetes.io/ja/docs/home/?utm_source=chatgpt.com

https://www.idcf.jp/words/kubernetes.html?utm_source=chatgpt.com

# 基本用語
### pod
***コンテナの最小単位で、1つ以上のコンテナをまとめて実行する単位のこと***です。

### Node
実際にコンテナが動いている仮想 or 物理マシン

### Cluster
複数のノードをまとめたもの。K8s全体の構成単位。


### container
アプリケーションの実行単位。Dockerなどで作られる。

# 管理系
### Deployment
Podのデプロイとスケーリングを自動で管理してくれる仕組み

### cronjob
一時的な処理を1回（Job）または定期実行（CronJob）するためのもの

### ReplicaSet
同じPodを何個動かすかを管理する役割。Deploymentにより生成される

### StatefulSet
永続データが必要な状態を持つPodを管理。例：DB系。

### DaemonSet
各Nodeに1つずつPodを配置するのに使う。例：ログ収集系。

# 設定、制御
### Namespace
複数のプロジェクトや環境を分けて管理するための空間です。

# 通信
### Service
Podに安定してアクセスするための入り口（IP・ポート）などを提供

### Ingress
外部からのHTTP/HTTPS通信をルーティングする仕組み。

### Endpoint
ServiceとPodの紐付けに使われる実体的な情報。


# 制御 & モニタリング
### kubectl
CLIツールで、Kubernetesにコマンドを送るとき使います。

### ConfigMap	
アプリの設定ファイルなどをPodに注入する仕組み。

### Secret	
パスワードやAPIキーなどの機密情報を安全に渡すためのリソース。

### Volume
データをコンテナの外で永続化する仕組み。

## port-foward
***k8sでローカルPCからpodに直接アクセスするための仕組み***です。

skaffold devなどで使うと以下のコマンドを入力します。
```
skaffold dev --port-forward
```

## helm
***k8sのパッケージマネージャー的な存在***です。
***YAMLファイルをテンプレート化して、再利用したり、バージョン管理***ができます。

```
my-chart/
├── Chart.yaml        # チャートのメタ情報
├── values.yaml       # デフォルト値
└── templates/        # テンプレート化された YAML ファイル群
```
⚫︎***Chartはアプリの設計図・テンプレート（YAML + 値ファイル）みたい***なものです。
テンプレートの中で {{ .Values.image.repository }} のように値を差し込みます。

### podSpecPatch
***Podの仕様（PodSpec）に対して一部変更（patch）を加えるための設定***で、
***YAMLの一部を書き換えたり追加***したりします。


# 参考資料

ChatGPT参照

https://cstoku.dev/posts/2018/k8sdojo-03/
【初心者】ZscalerにおけるPACファイル概要

## はじめに

こんにちは。
業務でPACファイルの設定に触れる機会がありました。
備忘も兼ねてZscalerとPACファイルの概要について噛み砕いて下記に残します。

## 経緯

ある日、業務の中でこんな依頼をされました。
「ZscalerのPACファイルについて設定変更をお願いします。URLとプロキシは下記です。」

業務でZscalerというものを使ってURLフィルタリング設定などを行っており、
その類の依頼が来たのだと最初は思いました。
ただPACファイルについて調べるとどうも違う様子。
ミスすると業務影響も大きいと言われ、正直かなり焦りました。


## PACファイルとは？

PACファイル（Proxy Auto-Config）は
「どの通信をプロキシ経由にするか」を自動で判断するための設定ファイルです。
アクセス先のURLやIPアドレスに応じて、
①プロキシを使う②直接通信する（DIRECT）③別のプロキシを使う
などを細かく制御できます。

例としては
・社内サーバーにアクセスする → 直接つなぐ（DIRECT）
・社外サイトにアクセスする → プロキシ経由（PROXY）
といった具合です。


## Zscalerとは？

Zscalerとは、クラウド型のセキュリティプラットフォームです。
簡単に言えば従来のVPNやファイアウォール、セキュリティソフトのような機能を、
クラウドでより安全かつ効率的に提供するサービスです。
グローバル企業や、リモートワークが常態化した企業に採用されているようです。
色々と機能はありますが経緯に記載の通り、
筆者はこちらのサービスを利用してフィルタリング設定などを実施してます。


## ZscalerにおけるPACファイル

ZscalerはユーザーのWeb通信を中継・フィルタリングしてくれます。
機能の一つとして、通信先に応じて特定のドメインはZscaler経由、その他はDIRECT、など
どのノードを通るかについてルールを設定できるのです。
このとき設定に使われるのがPACファイルとなります。
なおPACファイルの中身はJavaScriptで書く必要があります。


## PAC構文と意味 [(参考)](https://help.zscaler.com/ja/zia/writing-pac-file)

記事に書ける範囲で、PACファイルの中身を確認すると下記のような記載がありました。

~~~
if (shExpMatch(host, "*.???.com")) {
        return "??????";
    }
~~~
冒頭の依頼に話を戻すと、どうやらここの設定を変更すれば依頼に対応できるらしい。
JavaScriptの知見もないので頭を抱えましたが、調べると下記のような意味となります。

　・shExpMatch(host, "*.???.com")
　　*付きURLと一致。hostが???.comのサブドメインならreturnに従います。
　　shExpMatchの他にも、
  　　dnsDomainIs(ドメインと一致)、dnsResolve(名前解決結果と一致)等があります。

　・return "??????"
　　??????の接続方法を指定します。"DIRECT"や"PROXY ホスト名:ポート番号"等が入ります

上記を踏まえて、指定されたプロキシの構文に"*.???.com"を置き換えた一行を追加して
無事依頼の方は対応完了となりました。



## 終わりに

ZscalerにおけるPAC設定について簡単にまとめましたがいかがでしたでしょうか
深堀りした解説は現場の先輩や公式サイトを頼っていただくとして、
とっかかりのイメージ作りに貢献できたなら幸いです。
「次の授業はAIにお任せ！」そんな日が来るってマジ！？

# 🎨生成AI、先生になる！？教育現場におけるジェネレーティブAIのリアル活用術

> "AI先生、今日の宿題は？"

## 1. はじめに：教室にやってきたAI先生

ChatGPTやClaudeなどの生成AI（Generative AI）が爆発的に普及する中で、教育分野への応用が静かに、しかし確実に広がっています。先生の業務を補助するだけでなく、生徒の学習体験そのものを変革する可能性を秘めています。

この記事では、実際に生成AIを教育現場に導入する際のユースケース、コード実装、現場でのTipsを通して、「エンジニア目線」でその価値と可能性を掘り下げていきます。

## 2. 技術概要：生成AIの基本と教育応用の可能性

### 生成AIとは？
生成AIは、入力に対して自然なテキスト、画像、コードなどを“生成”するAI技術です。教育分野では以下のような応用が進んでいます：

- 自動課題生成（例：数学問題、英語の文法練習）
- 生徒へのフィードバック生成
- 個別チュータリング（AI家庭教師）
- 教材の要約と翻訳

![図1：教育現場での生成AIの位置づけ](https://example.com/image1.png)

## 3. 実装例：Pythonで「自動課題生成ボット」を作る

以下は、OpenAI APIを活用して「数学の課題を自動生成する」簡単なスクリプトです。

```python
import openai

openai.api_key = "your_api_key"

def generate_math_problem(level="中学1年"):
    prompt = f"{level}向けの数学の練習問題を3つ作成してください。各問題の下に簡単な解説もつけてください。"

    response = openai.ChatCompletion.create(
        model="gpt-4",
        messages=[
            {"role": "user", "content": prompt}
        ]
    )
    return response["choices"][0]["message"]["content"]

print(generate_math_problem())
```

### 出力例
```
1. 問題：x + 5 = 12 のとき、xの値を求めなさい。
   解説：両辺から5を引くと、x = 7。

2. 問題：長方形の縦が3cm、横が5cmのとき、面積を求めなさい。
   解説：面積 = 縦 × 横 = 15 cm²。
```

## 4. 現場で役立つTipsと注意点

### ✅Tips
- **プロンプト工夫**：対象学年や学習指導要領を明記することで、精度がアップ。
- **ログ保存**：出力結果をすべて保存し、教師側でレビュー可能な仕組みにする。
- **日常活用**：毎日の朝学習や放課後学習に取り入れやすい。

### ❌よくある失敗
- **出力の事実誤認**：AIの誤答は定期的にチェックが必要
- **生徒の過信**：AIが全て正しいと誤認しないように、使い方のガイダンスが必要

![図2：導入前にチェックすべきポイント](https://example.com/image2.png)

## 5. 応用編：SlackボットとしてAI課題配信システムを構築

生成AIを単体ツールとして使うだけでなく、SlackやTeamsなどと連携させて、課題配信＆提出フローを自動化することも可能です。

```python
from slack_sdk import WebClient
from slack_sdk.errors import SlackApiError

def send_to_slack(channel, message):
    client = WebClient(token="your_slack_token")
    try:
        client.chat_postMessage(channel=channel, text=message)
    except SlackApiError as e:
        print(f"Error: {e.response['error']}")

# 課題生成 + Slack配信
problem = generate_math_problem("高校1年")
send_to_slack("#education", problem)
```

![図3：Slack課題ボットのイメージ](https://example.com/image3.png)

## 6. まとめ：生成AIと教師の未来

生成AIは教育現場における「アシスタント」として極めて有用であり、うまく活用することで教師の負担を減らし、生徒には個別最適化された学習体験を提供できます。

### 🔍メリット
- スケーラブルな教材生成
- 即時フィードバック
- 異なる学習スタイルへの対応

### ⚠️課題
- 教師のリテラシー育成
- AI出力の検証
- プライバシー／倫理的配慮

今後は、生成AIを活用した**パーソナライズド教育**の時代が本格化していくでしょう。エンジニアとして、こうした変化をサポートする仕組みを創り出す立場にある私たちの役割も大きくなっています。
生成AIが創ったのに怒られるのはオレ？




## 1. はじめに：AIに絵を描かせたら著作権侵害？！

最近、社内の新人くんがSlackにこんな画像を投下しました。

>「Midjourneyでプロダクトのイメージビジュアルを作ってみました〜！」  
>（めちゃくちゃカッコいい！）  
>……けど、これって使って大丈夫なんだっけ？

生成AI（ジェネレーティブAI）がどんどんクリエイティブな領域に進出している中で、「これ、法的にセーフなんだっけ？」と感じたことがある人、多いんじゃないでしょうか？

今回の記事では、ソフトウェアエンジニアとして、**生成AIと著作権**についてのモヤモヤを「実装 × 実務 × 法的観点」から一緒に整理してみましょう。

---

## 2. 生成AIと著作権：ざっくり全体像

まずは前提知識から。

### 🧠 生成AIって何？
画像、音声、コード、テキストなどを**“ゼロから”**（実際には学習済みモデルから）作り出すAI。代表的なもの：
- **画像系**：Midjourney, DALL·E 3, Stable Diffusion
- **言語系**：ChatGPT, Claude, Gemini
- **音声系**：ElevenLabs, Voicemod

### ⚖️ 著作権との関係って？
ここが重要ポイント！

| 観点 | ポイント |
|------|---------|
| **学習データ** | 著作物を学習に使うこと自体が違法かどうか（→国によって見解が違う） |
| **生成物** | 生成された画像やテキストに著作権があるのか？誰にあるのか？ |
| **使用者の責任** | 法的責任はAI開発者か？ユーザーか？ |

実はまだ世界中で法整備が追いついていません。ですが、開発・実務の場では“グレーゾーン”を踏まえたうえで、どう動くかを考える必要があります。

---

## 3. ハンズオン：生成画像を法的に安全に使うワークフロー

実務的には「なるべくリスクを避けながらAIを活用したい」という人が大半でしょう。そこで、以下のような**技術的・法的リスク回避のワークフロー**を紹介します。

### ✅ Step 1: ライセンスに配慮された学習モデルを選ぶ

```bash
# Hugging Faceで学習データにライセンス制限をかけたモデルを検索
huggingface-cli search --filter license=cc-by-4.0
```

Stable Diffusionの中にも、**LAIONライセンス制限付きのサブセットモデル**などがあります。

### ✅ Step 2: Metaデータにオリジン情報を埋め込む

画像生成後、下記のように著作情報をJSONで記録しておきましょう（社内ツール用など）。

```python
from PIL import Image
import json

img = Image.open("generated.png")
metadata = {
  "prompt": "a futuristic cityscape in Studio Ghibli style",
  "model": "Stable Diffusion 2.1",
  "date": "2025-04-20",
  "user": "engineer@example.com"
}
img.info["Description"] = json.dumps(metadata)
img.save("with_metadata.png")
```

### ✅ Step 3: 公開前にチェックリストを通す

- [x] プロンプトに著名人の名前を使っていないか
- [x] トレース疑惑がある画像に似ていないか
- [x] 商用利用ライセンスOKのモデルかどうか

---

## 4. 実務TIPS：エンジニアが気をつけたいポイント

### 💡 “Creative Commons” = フリー素材とは限らない
よくある誤解です。「CC BY-SA」などは**派生物にも同じライセンスを適用する義務**があります。

### 💡 商用利用OKと書いてあってもプロンプトに依存するケースあり
例えば、「米ディズニー風」「任天堂スタイル」などのプロンプトは、モデルがOKでも**生成物がNGになる可能性**があります（商標、意匠権の観点から）。

### 💡 ファインチューニング時もデータライセンス要注意
企業内部でLoRAなどを使ってファインチューニングする際も、学習に使う画像のライセンスを精査しましょう。

---

## 5. 応用：社内システムに取り入れる場合の工夫

### 🚦 組織内ポリシー + 技術によるガードレールを作ろう

たとえば：

- **プロンプトフィルター**（商標名のブラックリスト）
- **生成ログの自動保存**
- **AI生成物のレビュー支援ツール**（画像類似度検出など）

これらを組み込むことで、**法務チームと開発チームの橋渡し**がスムーズになります。

---

## 6. おわりに：技術者としてどう向き合うか？

生成AIは、私たちエンジニアにとって**新しい創造性のブースター**です。一方で、使い方を間違えればリスクにもなり得ます。

| 利点 | 留意点 |
|------|---------|
| 高速なプロトタイピング | 学習データの出所不明リスク |
| 多様なアイデア創出 | 著作権・商標の潜在的侵害 |
| 個人の創造力補完 | 所属組織としての法的責任が問われる場合も |

生成AIの時代、私たち技術者こそが**「つくる責任」を意識しながら技術を活かす役割**を担っています。

「面白いけどちょっと怖い」──その感覚を持つことが、きっと一番大切です。
PCsetup3

# PCsetup03

## はじめに

ここで紹介しているのはどう設定するか個人で別れてくる設定です。  
こんな派閥もいるんだなぐらいで見ていただくと幸いです。:)

### キーマップ/ショートカットキーの変更

#### capslockキー

capslockキー使ってますか？  
私は使っています。ctrlとしてですが  
キーマップ変更ツールを使いcapslockをctrlに変更するととても快適にショートカットを打つことができます。  
試してみてはいかが？  

#### HJKLで十字キー

カーソルを一行ずらしたいとき一文字隣に行きたいときどうしますか？  
マウスを持ち直しますか？それともキーボードの十字キー？  
どちらもホームポジションから手を動かしてしまいますねぇ  
そんなあなたに```ctrl```と```HJKL```で十字キーになるようショートカットキーを設定するのはどうでしょうか？  
ホームポジションから手を動かさなくて住む生活最高ですよ  
PowerToysで実現出来ますので設定のスクショ置いときますね:)  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/795607/75517f39-697c-4a9d-b062-4906cef3435d.png)
  
### サクッと整った文書をMD記法

メモを取るときどのようにしますか？  
テキストファイル？word？  
テキストファイルはイマイチ機能不足感がありますし、wordでメモを取るのは少々重すぎる感じがしますねぇ  
そんなあなたにMD記法というものがあります。  
多くの人が記事を出し紹介しているので、自分に合った紹介記事を見つけ触ってみてください。  
簡単なルールだけでも知っておくだけで、手軽に整った文書を錬成出来るので文書を作るのが楽しくなります。  

---
関連記事

https://qiita.com/kurappy/items/e1e225897ebb99fa711b  

https://qiita.com/kurappy/items/4dd3433270304ad1daca
「このAI…できるッ！」〜Webエンジニアが生成AIに仕事を奪われる前に読む記事〜

# ✨生成AIが変革するクリエイティブ産業 - Web開発者のための実践ガイド

### #GenerativeAI #WebDev #AI実践

---

## ・・・ 1. 開始に: 「デザインもコードもAIが作れる時代」

この数年で、生成AI (ジェネレーティブAI) はクリエイターの傾向を大きく変えました。Figmaのプラグイン、GitHub Copilot、RunwayやStable Diffusionなどは、その最新代表です。

私たちは何を「創造」して、何を「管理」するのか。その違いが文脈を切り開くキーとなります。

---

## ・・・ 2. 概要: 生成AIとは何か？

生成AIは、学習したデータを元に、文章、画像、音声、コードなどを自動生成する技術です。

### 代表的なモデル:
- GPT (文章)
- Stable Diffusion / Midjourney (画像)
- MusicLM / Suno (音楽)
- GitHub Copilot / Cody (コード)

### 特徴:
- プロンプトでの生成
- 文脈の理解
- 人間の相談プロセスとの連携

---

## ・・・ 3. 実践: Web開発 x 生成AI

### 📁 例: Next.js + OpenAI API で作る "AIブログ記事アシスタント"

#### 1. OpenAI APIの登録
```bash
npm install openai
```

#### 2. サーバーサイドの実装 (pages/api/generate.ts)
```ts
import { OpenAI } from 'openai';
const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

export default async function handler(req, res) {
  const prompt = req.body.prompt;
  const completion = await openai.chat.completions.create({
    messages: [{ role: "user", content: prompt }],
    model: "gpt-4"
  });
  res.json({ result: completion.choices[0].message.content });
}
```

#### 3. フロントの実装 (pages/index.tsx)
```tsx
const handleGenerate = async () => {
  const res = await fetch("/api/generate", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ prompt: "記事タイトル: 生成AIの未来" })
  });
  const data = await res.json();
  setOutput(data.result);
};
```

---

## ・・・ 4. 実践ノウハウ: コツ & ハマるポイント

### 「これやりがち」:
- 本問がぶれるプロンプト文
- 作成に時間がかかり遅い
- 統一性のないUI/UX

### 実務コツ:
- プロンプトは"why" から書く
- promptに検討例を含める
- 用意するデータは"clean"

---

## ・・・ 5. 広がる展開: 生成AI は UI/UX をもコードも変える

- デザインプロトタイピング (例: Galileo AI)
- 自動ユーザーテスト (例: Testim + ChatGPT)
- コード自動書き + CI/CD調整
- エンジニアxPM 間のアイデア切り込み

---

## ・・・ 6. 結論: 「創造とは何かを再検討する時代」

生成AIは、人の創造力を拡張する上で強力なツールですが、上手に使うには「相談」と「構造化」の技術が必要です。

推奨する実践:
- プロンプトライティング・テスト高度化
- UI/UXの生成と修正をAIに任せる
- 作業のログを残して次に活かす

自分の「作った」という意識を抽象化し、「作成の路線をデザインする」意識へ移行する。

---

今後のシリーズでは、生成AI x UI/UXデザインツール、AIプランニングへと進んでいく予定です。
少しでも「やってみたい」と思って頂けたら幸いです。
PCsetup02

# PCsetup02

## はじめに

ここで紹介するのは、ある程度パソコンを使ったことがある方向けの設定でございます。:)

## 設定編

### マルチタスク

1. Windowsキーを押して```マルチタスク```と入力する
2. ```マルチタスクの設定```を開く
3. 自分好みに設定する

#### マルチタスク俺的カスタム

##### ウィンドウのスナップ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/795607/a1820ac1-af7e-40a1-a66b-ee3a9dedd868.png)

##### スナップまたはalt+tabを押したときにアプリのタブを表示する

- スナップまたはalt+tabを押したときにアプリのタブを表示する > タブを表示しない  
![image-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/795607/437ba1ae-be9a-4685-98c7-1e0c3302aa68.png)

##### デスクトップ

![image-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/795607/0d58e9a9-f7e5-43f6-8630-ceddc022b035.png)


##### タイトルバーウィンドウのシェイク

![image-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/795607/99e36c28-7d01-4631-808b-68373b7896f1.png)

### タッチパッド

基本デフォルトで良し  
```ジェスチャの詳細な構成```を変更するとQOL爆上がりやで  

#### ジェスチャの詳細な構成俺的カスタム

##### 3本指ジェスチャの構成

撮影時win10  
![3point.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/795607/2b33669b-1e3d-485c-afd4-09f4d24b6f9a.png)

##### 4本指ジェスチャの構成  

撮影時win10  
![4point.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/795607/828b5763-0708-4438-a061-686493d5cfae.png)

## 入れとくと便利なソフト編

### PowerToys  

やれることが多いため別で資料を作ります。  
とりあえず入れておけばいざという時とても役に立つ:)  
[今すぐダウンロード!!](https://learn.microsoft.com/ja-jp/windows/powertoys/)

### vscode  

とりあえず入れておけば何でもできるテキストエディタ  
この資料もこいつを使って書かれています:)  
[今すぐダウンロード!!](https://code.visualstudio.com/download)

### VLC

動画/音声、各種形式のコーデックに対応していてとりあえず入れておけば大抵のメディアを再生できる。  
入れておくといざという時に安心:)  
[今すぐダウンロード!!](https://www.videolan.org/vlc/index.ja.html)  

### 7zip

圧縮/展開ができる  
チェックサムの計算とかもできて便利:)  
[今すぐダウンロード!!](https://7-zip.opensource.jp/)

## 知ってると便利なショートカットキー

### かな入力状態から一発で半角へ

かな入力をしている状態でここだけ半角入力したいけどIMEをいちいち切り替えるのはめんどくさいって時ありますよね？  
それ```ctrl+T```で解決できます。  
百聞は一見に如かず試してみてください:)  
ちなみに

- ```U```で全角ひらがなへ切り替え
- ```I```で全角カタカナへ切り替え
- ```O```で半角カタカナへ切り替え
- ```P```で全角英数へ切り替え

になります。  
ファンクションキーを押すよりも近いのでおすすめ:)

### 一発で名前を変更(リネーム)  

```F2```を押すと大抵名前を変更できます。  
ファイル/フォルダはもちろんエクセルのセルだって  

### 離席する時はまずはこれ

```Windowsキー+L```  
離籍する際にはパソコンにロックをかけましょう:)  
今のうちから癖をつけリテラシーを育むのです。

### ウィンドウを即座に切り替え

```alt+tab```で開いているウィンドウを切り替えることができます。  
追加でshiftを入れ```alt+shift+tab```にすると逆順に切り替えることができます。  
パソコンの世界ではshiftを入力することでショートカットキーの機能を逆転させることができます。そう反転術キーです。:)

### webページのリロードに

この世界にはキャッシュというものがあります。そのせいで不具合出ることもしばしば...  
そんな時にこのキーを  
```ctrl+shift+R```  
このショートカットではキャッシュを破棄してロードしなおすことができます。  
私はタッチパッドの3点タップに割り当て常用してます。:)

### 流れるようなタブ切り替え  

```ctrl+tab```でwebページのタブ切り替えをすることができます。  
もちろん左手で押すのも良いですがせっかくなら、タッチパッドのジェスチャに割り当ててみてはいかがでしょうか？  
3点スワイプ左右に```ctrl+tab```と```ctrl+shift+tab```を割り当てて見てください。  
そこには非日常なネットサーフィンが待っています。  

### 要らないタブは即座に破棄

見ていない使わないwebページをブラウザのタブにおきっぱにしてはいませんか？  
```ctrl+W```で表示しているタブを削除することができます。  
タッチパッドの4点タップに私は割り当てています。  
スピーディーなネットサーフィンを体験してみませんか？

---
関連記事

https://qiita.com/kurappy/items/e1e225897ebb99fa711b    

https://qiita.com/kurappy/items/162383e76771aa041d46
生成AIが仕事してくれるから、私たちはコーヒーでも飲もう☕️【LP爆速生成術】


## 【開節】
デザインコンテンツやWebアプリの開発をする上で、テキストや画像、コードなど、多様なコンテンツの生成は必要不可欠です。しかし、それらをすべて手動で用意するのは非常に時間がかかるし、スケーラビリティも難しいという問題があります。

そこで本篇では、生成AI(ジェネレーティブAI)を用いたコンテンツ制作の実践使用例を紹介します。

## 【技術概要】
生成AIは、文章や画像、音声、動画、コードなどを生成できるAI技術の群を指します。特に今回は「文章生成」と「画像生成」にフォーカスします。

現在の主要な技術スタック:
- **LLM (Large Language Model)**: GPT-4, Claude, PaLM, Llama etc.
- **画像生成モデル**: Stable Diffusion, Midjourney, DALL•E 3
- **Fine-tuning / LoRA / Prompt engineering**: ユースケースに合わせたカスタマイズ

## 【実践使用例】

今回は「新製品のプロモーションサイト」を作りたいというシーンについて、文章生成 + 画像生成でランディングページを一括生成してみます。

### Step 1: 文章の生成 (OpenAI GPT-4 API)
```python
import openai

openai.api_key = "YOUR_API_KEY"

response = openai.ChatCompletion.create(
  model="gpt-4",
  messages=[
    {"role": "system", "content": "You are a professional marketing copywriter."},
    {"role": "user", "content": "新製品の描述文を作成して。商品は『まるごと果実グラノーラ』。」}
  ]
)

print(response['choices'][0]['message']['content'])
```

### Step 2: 画像の生成 (Stable Diffusion API)
```python
import requests

url = "https://api.stability.ai/v2beta/stable-image/generate"
headers = {"Authorization": "Bearer YOUR_API_KEY"}
data = {
  "prompt": "realistic photo of fresh fruit granola in a wooden bowl, soft morning light",
  "output_format": "png"
}
response = requests.post(url, headers=headers, json=data)

with open("granola.png", "wb") as f:
    f.write(response.content)
```

## 【実務Tips & よくある失敗】
- **Promptの細かさが起主力**: "good photo of granola" だと簡素すぎて、結果が不完全
- **LLMに問うときはrole/systemの使い方が重要**
- **ライセンス周り**: API使用時のレート制限、コストに注意
- **画像格式はPNGで美しく見せる、けどサイズ大きめ**

## 【広がる应用】
- CMS(コンテンツ管理システム)への統合
- スライド作成と動画シーケンスへの展開
- 大量のEC商品説明を大量生成 → タイトル、SEO対策

## 【結論】
生成AIは、デザインやコンテンツ制作に新たなパラダイムを提供します。まだまだ認識線や詳細までは足りない部分もありますが、開発者のセンスを行かせる「本当のブラックボックス」になりつつあります。
Adobeアンインストール時、エラー「Adobe Creative Cloud が見つからないか、破損しています」が出てきて手こずった

## Adobe Creative Cloudのエラーとその対応

会社のWindowsで、以下のようなエラーが表示された。


```
問題の解決に必要な Adobe Creative Cloud が見つからないか、破損しています。修復して問題を解決できる場合があります。引き続き問題が発生する場合は、http://www.adobe.com/go/adobecreativecloudapp_jp から新しいコピーをダウンロードしてインストールしてください。
```

下記に公式の的確なヘルプページがあったので、これを参考にすれば解決すると思った。

[エラー「Adobe Creative Cloud が見つからないか、破損しています」の修正(Adobe公式)](https://helpx.adobe.com/jp/creative-cloud/kb/creative-cloud-missing-damaged.html "エラー「Adobe Creative Cloud が見つからないか、破損しています」の修正(Adobe公式)")
その中の
`Creative Cloud デスクトップアプリのインストール中にエラーメッセージが表示されました。なぜですか？`
という項目を参考に対応を試みたが、エラー解消できず。

いろいろ調べてみたが同じ悩みを抱えている人は多いものの、決定的な解決方法は見つからなかった。


## 試したこと

1.上記ページの`エラーの修正方法`のページを参考にして取り組んだ。
特に`解決策3:Adobe Creative Cloud Cleaner Toolを実行する`は重点的に試した。

2.それでも直らなかったのでAdobe関連ファイルを徹底的に削除し、再インストールをした。
- コントロールパネルからのアンインストール
- \Program Files (x86)\Common Files\Adobe フォルダの削除

しかし、これでも直らない、謎。

---

### 考察:原因はPC本体の可能性?

そもそもPC自体に不具合があるのではないかと考えた。
実は数日前から**AMDチップを搭載したPCのみ**で「設定アプリを開くとホーム画面に戻ってしまう(クラッシュする)」という別の問題が発生していた。
そこでその解決方法である、ドライバーの更新を行なった。
[プロセッサ/グラフィックスのドライバーとサポート(AMD公式)](https://www.amd.com/ja/support/download/drivers.html "プロセッサ/グラフィックスのドライバーとサポート(AMD公式)")

その結果ーー
<br>

なんとAdobeのインストールエラーが解消！


## 結論

今回は、Windows本体側の不具合が原因だった。
公式のヘルプを試しても解決しない場合は、PCのハードウェアやOS自体に問題がないかも確認してみるといいかもしれないです。
PCの根本理解

# CPUって何？どういう仕組みなの？
PCの頭脳…なんて説明は腐るほど見たので割愛。
これがCPUです。正方形の部品ですね。これが単体で売っていたりします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2919278/8d2a1b56-f909-4be4-aee0-5ec4521c1c7a.png)
そしてこれを、マザーボードと呼ばれる板にはめ込みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2919278/7d294190-3de9-4c55-815d-3a5a9328f897.png)
ここまでは知っている方が多いはず。
ではCPUの構造についてです。
この裏っ側にあるポツポツは針のようになっているものもあります。
それぞれLGAとPGAと呼ばれます。そしてLGAのポツポツはランド、PGAはピンと呼びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2919278/2b1baa07-44db-4f78-8fbf-ab0664654eaf.png)
そしてCPUのランドとマザーボードは完全に対応している必要があります。
なぜならマザーボードは既に配線が組まれており、CPUの内部構造も、各ランドがどの装置の処理をするか既に決まっている状態だからです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2919278/9021fe4b-31cf-4cb0-9be6-eb91db155ced.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2919278/e6ab98dd-25dc-4b4e-8411-bd8de1943136.png)

※配線は完全に適当です。正確な配線と位置関係はIntelのLand Mapをご覧ください。（これでCPU全体の1/4）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2919278/ec0ff4d7-1883-46d1-9a34-af78cf0c7dd1.png)
https://www.intel.com/content/www/us/en/content-details/332687/6th-generation-intel-core-processor-family-datasheet-volume-1.html
このソケットの規格が一致していないとCPUは動かないどころか、マザーボードに設置すら出来ないということなんですね。
そして、マザーボードの配線は基本的にはCPUと各部品は直で配線されています。
つまり（対応するランドは正確ではありませんが）配線の仕組みだけ見れば上記図のような形であり、余計な寄り道はしていないはずです。
なので、よく見るこの図も、かなり正確だったということですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2919278/60ecb2f8-a7e4-42bd-a03f-a0b0d7dd153d.png)
[ABC402] ABC 402(Atcoder Beginner Contest)のA~D(A,B,C,D)問題をPythonで解説(復習)

# [ABC402] ABC 402(Atcoder Beginner Contest)のA~D(A,B,C,D)問題をPythonで解説(復習)

# A問題
- `str` として受け取る。
- 答え `ans` を空文字列として用意しておく。
- `for` 文の中で、`.isupper()` メソッドを使って、大文字のみを `ans` に追記する。
```A.py
"""
<方針>
- `str` として受け取る。
- 答え `ans` を空文字列として用意しておく。
- `for` 文の中で、`.isupper()` メソッドを使って、大文字のみを `ans` に追記する。
"""
# 入力
S = input()

# 最初は空文字列
ans = ""

# 文字を取り出す。
for s in S:
  # 大文字であれば、
  if(s.isupper()):
    # 答えに追記する。
    ans += s

# 出力
print(ans)
```

# B問題
- シミュレーションをする。
- 行列を管理する上で、`deque` を用いる。
```B.py
"""
<方針>
- シミュレーションをする。
- 行列を管理する上で、`deque` を用いる。
"""
# ライブラリ
from collections import deque

# 行列
q = deque()

# シミュレーション
for _ in range(int(input())):
  match list(map(int, input().split())):
    case [1, X]:
      # 行列に並ぶ
      q.append(X)
    case [2]:
      # 先頭を出力
      print(q.popleft())
```

# C問題
## 方針
- `M` も `N` も大きいので、`O(MN)` は無理なので、毎回料理を見る余裕は当然ない。
- それぞれの料理がいつから `D` 食べれるようになるかを予め調べれば良い。
## 前提
- `C`問題あたりで，`TLE`になる人は，制約条件を見る癖をつけよう．
- `A`と`B`問題では，基本的に制約条件を見ずにやっても解ける．
- しかし，`C`問題以降では，制約条件を見ないと必ず`TLE`すると思っても良い．
- 詳しい話は私の[352回の記事](https://qiita.com/mattsunkun/items/837444254f03e6105922) の`C`問題の解説に記したので，是非参照してほしい．
```C.py
"""
<方針>
- `M` も `N` も大きいので、`O(MN)` は無理なので、毎回料理を見る余裕は当然ない。
- それぞれの料理がいつから `D` 食べれるようになるかを予め調べれば良い。
"""
# 入力
N, M = map(int, input().split())
AA = []
for _ in range(M):
  K, *A = map(int, input().split())
  A = [a-1 for a in A]
  AA.append(A)
B = list(map(int, input().split()))
B = [b-1 for b in B]

# B の index と value を入れ替える。
indB = [None]*N
for i, b in enumerate(B):
  indB[b] = i

# 初めて料理を食べれるようになる日
D = [0]*N

# 料理を順番に調べる
for A in AA:
  # 食材を克服する日
  invA = [None]*len(A)
  for i, a in enumerate(A):
    invA[i] = indB[a]
  # 最後の食材を克服する日が初めてその料理を食べれるようになる日
  D[max(invA)] += 1

# 答え。食べれるものは累積和的に増えて行く。
ans = 0
for d in D:
  ans += d
  print(ans)
```

# D問題
- 全ての直線が互いに平行でなければ、できる交点の数は `M*(M-1)//2` となる。
- 互いに平行な直線が `X` 本ある時、 `X*(X-1)//2` 個交点の数は減る。
- 互いに平行かどうかは `(A+B)%N` でわかる（たぶん）。
```D.py
"""
<方針>
- 全ての直線が互いに平行でなければ、できる交点の数は `M*(M-1)//2` となる。
- 互いに平行な直線が `X` 本ある時、 `X*(X-1)//2` 個交点の数は減る。
- 互いに平行かどうかは `(A+B)%N` でわかる（たぶん）。
"""
N, M = map(int, input().split())

# 平行なものを管理
parallels = [0]*N
for _ in range(M):
  A, B = map(int, input().split())
  parallels[(A+B)%N] += 1

# 平行が無いと仮定
ans = M*(M-1)//2

# 平行な数だけ減らす。
for X in parallels:
  ans -= X*(X-1)//2

print(ans)
```

# 補足
### 関係するリンク(参考文献など)
- [今回のコンテスト](https://atcoder.jp/contests/abc402)
### 筆者について
- [Atcoderアカウント](https://atcoder.jp/users/mattsunkun)
- *今回も不参加のため，成績なし．*
- [解説で示したA問題の提出](https://atcoder.jp/contests/abc402/submissions/65068326)
- [解説で示したB問題の提出](https://atcoder.jp/contests/abc402/submissions/65068402)
- [解説で示したC問題の提出](https://atcoder.jp/contests/abc402/submissions/65068712)
- [解説で示したD問題の提出](https://atcoder.jp/contests/abc402/submissions/65068888)
### その他
- **間違いを含んでいる可能性があります．**
- 方針と言いつつ，方針ではない感想などを書いている可能性があります．
- A問題から解説がだんだん省略されます．
- コードに書かれている解説の文言と，その上に書いてある解説の文言を変えている場合があります．
### 最後に一言
- 煌く時は一瞬で、グッドラック昨日までの僕よ。
Geminiでスマホを使う魔法少女を描いてみた。

# 概要

Geminiでスマホを使う魔法少女を描いてみました。

# 実装

プロンプトと実行結果は以下の通りです。

```
炎のスマホを使う魔法少女を描いてみてください。
```

![炎のスマホを使う魔法少女_20250421.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192024/3b5e4ac3-3d82-4994-8640-9c9f6aa6c409.png)


```
氷のスマホを使う魔法少女を描いてみてください。
```

![氷のスマホを使う魔法少女_20250421.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192024/be9283e6-2fd1-4b69-9127-94f219617768.png)


```
電撃のスマホを使う魔法少女を描いてみてください。
```

![電撃のスマホを使う魔法少女_20250421.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192024/16d48adf-c029-43e2-9e26-814481b5bb63.png)

# まとめ

氷の子が可愛いかも。
何かの役に立てばと。
DDD（ドメイン駆動設計）について振り返る

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1812041/c15c2045-9218-469f-abe1-1695aa60e5a7.png)

こんにちは！  
この前、ドメイン駆動設計の本を読んだので、内容を振り返ってみようと思います。

## ドメイン駆動設計とは

ドメイン駆動設計（DDD）は、ビジネスの中身やルールをしっかり理解して、それをそのままコードにする考え方です。

「この仕事ってどういう流れ？」「どんなルールがあるの？」といった業務の仕組み（ドメイン）をちゃんと捉えて、プログラムにも反映させます。

## 値オブジェクトとエンティティの違い

DDDにおいて、モデルを構成する基本要素の1つが「値オブジェクト」と「エンティティ」です。  
この2つはよく似ているようで、使い分けが非常に重要です。

### 値オブジェクト（Value Object）

一言でいうと、「中身がすべて同じなら、どれも同じとみなせるもの」です。

#### 例：

- 100円玉が2枚あったら、どちらも同じ「100円」として扱えます。
- 「東京都新宿区」という住所が2つあっても、それは同じ場所を指します。

名前やIDで区別する必要はなく、「ただの情報」として扱います。

### エンティティ（Entity）

一言でいうと、「見た目や内容が似ていても、1つ1つが別物として区別されるもの」です。

#### 例：

- 同じ名前の人が2人いても、それぞれ別人として扱います。
- 同じ商品を2回注文しても、それぞれの注文は別の扱いになります。

内容が同じでも、「それがどれか」を識別する必要があります。識別のためにIDなどを持ちます。

### 比較表

| 種類         | 値オブジェクト                         | エンティティ                      |
|--------------|----------------------------------------|-----------------------------------|
| 識別方法     | 値がすべて同じなら同一とみなす         | 一意のIDなどで識別               |
| 特徴         | 不変（immutable）                      | 状態が変わることがある           |
| 例           | 金額（Money）、住所、メールアドレス     | ユーザー、注文、商品（IDあり）   |


## サービス（Service）

サービスは、ドメインの中で重要な処理のうち、エンティティや値オブジェクトに属さないようなロジックを担当します。

### どういう役割？

エンティティや値オブジェクトには、それぞれ責任があります。  
でも、中には「どのクラスにも当てはまらない処理」が出てくることがあります。

たとえば：

- 注文に対して割引金額を計算する処理
- 商品の在庫が十分にあるかチェックする処理

こういったロジックを無理にエンティティに入れるよりも、**専用のクラス（サービス）に分けて整理したほうがスッキリします。

## リポジトリ（Repository）

リポジトリは、エンティティを保存・取得するための「窓口」です。  
アプリケーションとデータベースのやり取りを仲介する役割を持ちます。

### どういう役割？

たとえば、注文（Order）をデータベースから取得したり、保存したりするとき。  
これをアプリケーション内で直接SQLで書いてしまうと、ドメインロジックと混在してごちゃごちゃになってしまいます。

そこで、データの出し入れはすべてリポジトリにまかせることで、コードをスッキリ保ちます。


## おわりに

DDDの用語や概念は最初少し取っつきにくいですが、業務の流れやルールをしっかりコードに落とし込めるので、大規模開発やチーム開発で特に力を発揮します。

これからも少しずつ理解を深めていこうと思います！
今度実践編ということで何か作ってみます～
第５回 AI駆動開発でPdMがv0を導入してハマった話（失敗談編）

## はじめに
先日また社内Slackに「こんに知財！」と投稿したら、ついにリアクションが2つつきました...
って言いたかったんですが、そもそもそんなことをやる度胸がありませんでした。

こんにちは。Cotobox CPOの長島です。
今回は気を取り直して、要件定義を視覚化するために導入した生成AIツール「v0」についてお話します。ただし、今回は私の直面した「失敗談」が中心です。

## なぜv0を選んだのか？

2023年だったと思います。
確認のためググると...わからん。見つからん。v0とかよくよく考えると割と一般用語ですよね（エンジニアリング的に、です。）
で、こういうときは軽くDeep Research。便利、便利。

やはり2023年の9月でした。
その頃はめちゃめちゃ優秀なエンジニアに囲まれて仕事をしており、「助けてド＄えもん！」とふわっと要件を言うだけで、３日と経たず（含 週末）動くUIが実装されてしまう非常に恵まれた環境におりました。

そんな状況だったので、v0が出てきたときは、正直なんかおもしろいものが出てきたなーくらいにしか思いませんでした。
Figmaで大概のことは表現できてはいましたし。

そうはいっても新しいことを追うのは大事大事と、Waiting listには速攻登録しました。
（が、けっこう早かったと思うんですが実際に使えたのは１ヶ月待ちでした）

同じく登録してくれていたエンジニアに動きを早速見せてもらい、まぁ、こんなことできるのもあるんだな、くらいでした、正直最初は。

---
さて、Figmaで大概ことはできていたとは言いましたが、どちらかというとAdobe XD派だった期間が長かった私は、それほどFigmaが得意だったわけではなく。
なんかこう、もっとスマートに編集したいよな、という欲求はありました。

単純に「当時画期的だったから」というミーハーな理由もありますが、Figmaの操作ではデザイナーに負ける状況、他にも限界を感じていたので、「AIが簡単に視覚化してくれるなら最高だ」と飛びついたわけです。


--- 
## 最初の失敗：プロンプトが難しい

v0を使い始めたとき、まずぶつかった壁はプロンプトの難しさでした。

最初に私が試したプロンプトはこんな感じです。
...

と思ったのですが最初のプロンプトはもう消してしまっていました。

最初の頃に試行錯誤していたプロンプトはありましたが、ChatGPT他ほど自然には処理できず、少々クセがありました。

慣れてきた頃にぶち当たったのは、修正の難しさでした。
全体のトンマナを直したかったのですが、なぜか一部しか変わらない。

都度修正箇所を直していくと、気がつくと他のところが崩れる...
いたちごっこでした。

- 具体的には、一部のフォームが異様に長い。
- 連続したパーツが連動しない
- なんか色、変

という散々な状態でした。

思わず「v0よ、これは何の試練だ」と呟きました。
（プロンプトエンジニアリングやってると、なんか独り言、増えますよね）


## 次の失敗: AIにmermaid形式を読ませてみたけれど

その後、「もっと構造的に伝えれば良いのでは？」と思い、mermaid記法でプロンプトを食わせてみました。
結果はというと、これがまた絶妙にダメでした。

v0はmermaidの「論理構造」を画面構成に変換するのが苦手なのか、「メールアドレス入力」や「パスワード入力」が画面に配置されず、「ログイン画面」という文字がなぜかボタンになって表示されてしまいました。

（最近のv0はそんなことはありません。ログイン画面、というだけで必要な要素をセットで用意してくれるくらいの進化しています。）

ただ、全部をmermaidでやるのはやっぱりまだダメですね。

ちなみに、今回の主旨とは離れますが、要件をChatGPTにMermaidで出させるのは非常に相性がいいです。
ただ、Mermaidの書き方って、自由度があるせいか（私が独学だからなのかもですが）形式はあっていても、思った形にはなかなか出してくれませんね。

---
「もしかして『ログイン画面』で商標出願しても拒絶されるのと同じくらい、mermaidでUIを作るのは無理がある？」などと、また月並みな知財絡みのネタが頭をよぎりました。

結局、v0で作った最初のモックはほぼ全面的に作り直し。AIに頼りすぎて痛い目を見たという苦い経験です。

## 失敗から得た大事な気づき

今回の失敗を通してわかったことは、

- 「画期的」と評判でも、自分で試して課題を掴まないと役に立たない

- プロンプト設計が甘いと、AIは本当に「それっぽいだけ」のものを出してくる

- 最終的な品質を担保するのは人間（PdMや開発者）である

という基本的ながら忘れがちな事実でした。

### 「画期的」という言葉の曖昧さ

ところで「画期的」という言葉は商標登録できません。理由は「識別力がない」からだそうです。

AIツールに飛びついた自分も、結局は「画期的」という曖昧な言葉に踊らされていただけなのかもしれませんね。

## 本当に使えるプロンプトとv0活用事例

今回は失敗談ばかりでしたが、次回は「v0で本当にうまくいったプロンプトの工夫と実践事例」を具体的にお届けします。

失敗を乗り越えて得たノウハウをぜひお楽しみに。

それではまた
【AWS試験】この用語きたらこのサービス！

# 一問一答
| 用語             | 一言で言うと                        |
|------------------|-------------------------------------|
| データベースAPI   | → AppSync                          |
| 重複サブネット   | → VPCエンドポイント                          |
| オンプレデータ（SMB）をシームレスにS3へ  | → **ファイル**ゲートウェイ           |
| オンプレデータ（iSCSI）をシームレスにS3へ | → **ストレージ**ゲートウェイ        |
| プライベートサブネット + IPv6 + 外へ出られる出口専用ゲート | → Egress-Only インターネットゲートウェイ |