OmniAICreator/Qiita-1.07M huggingface dataset:
VSCodeの「Live Server」で開発が爆速に！HTML/CSSの確認が超快適になった話

こんにちは。最近、HTML/CSSでのフロントエンド作業が増えている中で、「VSCodeのLive Server拡張機能」がとても便利だったので紹介します！

# 💬 こんな人におすすめ！

- HTML/CSSの勉強中の方
- Web制作で効率よく開発したい方

# 🔧 Live Serverってなに？

[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)は、Visual Studio Code（VSCode）の拡張機能のひとつで、ローカルサーバーを立ち上げてリアルタイムでHTMLの変更をブラウザに反映してくれるツールです。

手動でブラウザを更新しなくても、自動で再読み込みしてくれるので、ちょっとしたCSSの修正もすぐに確認できるのが大きなメリットです。

## ✅ 導入方法（インストール手順）

1. VSCodeを開く  
2. 左側の拡張機能（四角いアイコン）をクリック  
3. 検索窓に「Live Server」と入力  
4. 開発者：**Ritwick Dey** のLive Serverをインストール  
![スクリーンショット 2025-05-25 20.25.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524128/4f4290f0-9d01-40f0-b013-2f466d709d5e.png)


# 🚀 使い方（超かんたん）

1. HTMLファイルを開く  
2. 右下に表示される「Go Live」ボタンをクリック  
　→ または 右クリック → 「Open with Live Server」

すると、ブラウザが自動的に立ち上がって、ローカルサーバーでページが表示されます。

# 💡 使ってみてよかった点

- 変更が即反映される！
    - HTMLやCSSを編集して保存（Ctrl + S）すると、ブラウザが**自動的に更新**されます！
- コーディング中にすぐ見た目が確認できる
- レスポンシブ調整の確認もラク
- 軽くて動作もサクサク
- サーバーを構築しなくても確認ができるため、開発に関して億劫だと思うことが少なくなる
    - 開発の回数が増え、スキルアップのスピード感が加速する


# ⚠️ 注意点

- ファイルを保存しないと変更は反映されません（自動保存ONもおすすめ）
- ローカルサーバーなので、ネット公開はされていません（安心）

---

## 📝 まとめ

Live Serverは、HTML/CSS/JavaScriptのフロント開発にとって、とても便利なツールです。まだ使ったことがない方は、ぜひ一度試してみてください！

# 🙌 最後に

この記事がLive Serverを導入するきっかけになれば嬉しいです。ご質問やコメントもお気軽にどうぞ！
vscodeでhaskellのIDE環境を構築するメモ

# はじめに
最近関数型言語が話題なので勉強会でHaskellやってみようということになり、環境構築したので備忘録的にメモしておく

# 動作環境
- Windows
- Devcontainer（Ubuntu）
  - WSLでも動くはず

# 環境構築方法
## GHCupのインストール
Haskell関連ツールのインストールとバージョン管理ツール
Haskell管理マネージャーはStackもあるが、vscodeの拡張にGHCupが必要なため今回はこっちを採用

https://www.haskell.org/ghcup/install/

### インストールコマンド
```
$ curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh
```
対話式にいろいろ聞かれるが全部Enterしておく
※HLSはここでインストールしてもよい

**ターミナル再起動**すると`ghcup`コマンドが使えるので`ghcup list`あたりのコマンドを実行して動作確認しておく

### HLS(Haskell Language Server)のインストール
vscodeのhaskell拡張の依存ツールであるHLSをGHCup経由でインストールする。
```
$ ghcup install hls
```
インストール後はvscode再起動する

### Haskellの新規プロジェクトを作成する
GHCup経由でStackもインストールされているはずなのでStackを使って新規プロジェクトを立ち上げる。
```
$ stack new ${PROJECT_NAME}
```

## 動作確認
作成したHaskellプロジェクトのファイルを適当に開いて関数にマウスオーバーしてみる。
ただし、vscodeを起動してから1分くらい待たないとLanguage Serverが立ち上がらないらしく、焦らず待ってみてほしい

# おわりに
Haskell完全に理解するぞ！

# 参考文献
https://zenn.dev/mod_poppo/articles/haskell-setup-2023
Typescript useState()の型定義

```tsx
type Items = {
  title: string;
  name: string;
  age: number;
  id: number;
};

const [items, setItems] = useState<Items[]>([]);
```
useStateでの型定義は、state(この場合でいう```items```)の型を定義しています。
state(```items```)が更新されるとき、その都度```items```は```Items[]```という型を満たす必要があるということです。
Android Studioでimport順の整理



Lintで以下のようなエラーが出たときの対応になります。

```
Imports must be ordered in lexicographic order without any empty lines in-between with “java”, “javax”, “kotlin” and aliases in the end
```

Import順が間違っているという事だったのですが、フォーマットをかけても特に変わらずだったのでどの状態が正しいのかしっかり調べないといけないかと思ったのですがこの方法を見つけて即時解決しました。



# 実践

エラーが出ている該当箇所を開いて　Android Studio上部の　
 Code → Optimize Imports を選択
![スクリーンショット 2025-05-25 20.17.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2394054/e5ee3029-f393-4524-bf78-7638b6690a79.png)


Import順を正しく並べ替えると共に、使用していないのimport文の削除も行ってくれます。
📘基本情報技術者試験のためのやさしいIT用語まとめ【自分用メモ5月25日】

# 📘基本情報技術者試験のためのやさしいIT用語まとめ【自分用メモ】

---

## 📋 IT用語と基礎知識

### 🔹 PDPC（過程決定計画図）  
**目標達成までのプロセスを、いろいろな分かれ道やリスクを想定して、図にして計画を立てる方法。**

### 🔹 ディスパッチ  
**ITでは、マルチタスクのOSで、CPUにどのプログラムを実行させるか決めて割り当てること。**

### 🔹 SPF（Sender Policy Framework）  
**メールの送信元が本物かどうかを、IPアドレスで確認するしくみ。迷惑メール対策で使われます。**

### 🔹 可用性（Availability）  
**システムが止まらずに長く動き続けられる力や、その指標。止まらない＝高可用性（HA）。**

### 🔹 アカウントアグリゲーション  
**いろんな銀行や証券会社の口座情報を、1つのアプリでまとめて見られる便利なしくみ。**

---

## 💻 開発・ネットワーク・セキュリティ

### 🔹 イテレーション  
**ソフトウェア開発で「設計→開発→テスト→見直し」を短い期間で何度もくり返すやり方。アジャイル開発でよく使われる。**

### 🔹 UTM（Unified Threat Management）  
**1台の機器に、いろんなセキュリティ機能（ファイアウォール、ウイルス対策など）をまとめたネットワークの守り神。**

### 🔹 Hadoop（ハドゥープ）  
**ビッグデータを複数のコンピュータに分けて処理するしくみ。HDFSとMapReduceで、速くて壊れにくい。**

### 🔹 ARP（Address Resolution Protocol）  
**IPアドレスから、そのパソコンの「本当の住所（MACアドレス）」を調べるしくみ。**

---

## 🔄 製品管理・ライフサイクル

### 🔹 PLM（Product Lifecycle Management）  
**モノを作る前から、売って使われて、捨てられるまでをずーっとまとめて管理する方法。**

---
MacでPowerShellやWindows運用の練習がしたい！無茶な要望にAWS で挑戦してみた　その１

最近PCをアプリ開発やcloudの練習したくてmacに変えてから
Windows環境の運用業務が決まり
UdemyでPowerShell練習講座まで買ったのに出来なくてテンパった新米エンジニア稲穂です。


当たり前だという声も聞こえそうなんですが
代わりになるTerminal君はあるのですがPowershellはMacにはないです。
Terminal君はほぼLinuxと言いますか
PowerShellで使えてたコードが使えない。
使えるの違うのか。
せっかくAWSやLinuxやiPhoneアプリつくりたいと思ってmacにしたのにWindows系の日常業務の練習できませんでした。


困ってググったり人にVM wareを入れたらいいと伺って
VM VirtualBox や　VM ware入れてみて困ったので記事を書いてみました。
同じWin運用が決まったけど、PCはMacでWin練習したい人に届いてほしいです。
※最初無知でMacでPowerShell使えるの知らず記事を書いており、2025/05/25にできることを有識者の方に教えていただき記事をWindows運用に切り替えております。

結論から言うと、私個人のおすすめはVirtualBoxやVMではなくAWSアカウント作って１年無料枠を使うのがオススメです。なぜか、PCに負担が少なくどこでも使えてアカウント作って１年は使いすぎなきゃ無料で練習し放題だからです。

VM VirtualBox　NG理由「インストールしかほぼ不可」
・Appleは公式直リンクページでは旧式の64ビット以外インストーラーNG
　→実はシリコンは公式リンク別ページからインストールできる
　→その後のネットワーク起動が設定通りしても、
 　チップ切り替えがGUIから不可、
　 およびなぜか仮想フロッピーが消せない。
→何度コンソール開いてもWindows立ち上がらない。

VM ware　NG理由 「どうにか使えるけど安いMacだとMacとして買った意味がなくなるほど容量でかい。PROでも安いと8~9割強VMに容量持っていかれる。」
・公式でアカウントを作った後、Okuta認証を求められるが来たメール通りに進む
 →Fusionを選択
 →インストーラーをダウンロード
 →インストーラー起動で表示どおりすすむ
 →Windowsのコードなしを選択
 →PROじゃない場合、君のPCじゃ容量が足りないと多分警告が出る。
 Mac Book PROでもトライした３回中２回でた。3回目でダウンロードできた。
 
　ダウンロード出来た場合もMacをほぼWindows PCとしてほぼ使うハメになります。
 ほぼMacbookPro買いたての頃に入れたのですが、容量の圧迫から動作も重くなり、何の為にWindowsの安いPC4−５個買える値段のPRO買ったのかわからなくなりました。
 AmazonやBack Marketで安い整備済み品のwinPC買った方が安い。

せっかくAWSサクサクつかったり、サイトやアプリつくりたいと思ってmacにしたのに何だこりゃ状態になるので、重ねて言うのですがAWSで仮想Server立ててPowerShell練習がお勧めです。オンプレでVM環境作る練習はできるのでその点ではお勧めしてくれた方には感謝でした。

・EC2は1年位AWSアカウント作ると無料枠がありWindowsも無料枠で使えます。
・そこからもう1−２ステップもうちょい頑張るとWindows ADサーバーも立てられちゃうのでこっちで慣れたほうが将来的にオンプレもクラウド両方ともWindows ServerやAD対応可能な人材になれるのもあっておすすめもあります。

練習くらいで大切なPCの容量そんなに使いたくないじゃん？

次回その２〜３ではEC2でWindows Serverを構築してPowerShellを使うところまで記載します。4ではおまけでVM Wareを使ってWindows OS入れる方法を記載します。

今回はここまで
【学習記録5/25】AWS SAA対策⑤：DynamoDB、EFS移行、EMR、EBS、SQS FIFO

# 【学習記録】AWS SAA対策⑤：DynamoDB、EFS移行、EMR、EBS、SQS FIFO

---

## 📦 Amazon DynamoDB：ポイントインタイムリカバリ（PITR）

- DynamoDBテーブルにおいて **PITR（Point-In-Time Recovery）** を有効にすると、**過去35日間** の任意の時点にテーブルを復元可能。
- 本番環境での **誤操作によるデータ損失** に備える手段として非常に有効。
- 有効化はテーブルごとに設定可能。

---

## 🚚 オンプレミスからAmazon EFSへの移行：AWS DataSync

- オンプレミスのNFSストレージからEFSへ移行する手順：

  1. オンプレミスに **AWS DataSyncエージェント** をインストール
  2. DataSyncサービスからジョブを作成し、**NFS → EFS** の同期を実行
  3. 自動化されたデータ転送と整合性チェックにより安全かつ高速な移行が可能

---

## 🧠 Amazon EMR：ビッグデータ分析基盤

- Amazon EMR（Elastic MapReduce）は以下のフレームワークをAWS上で実行可能：

  - Apache Hadoop
  - Apache Spark
  - Apache Hive など

- ビッグデータ処理、**ログ分析**、**リアルタイムストリーミング** に有用。
- EC2ベースでスケーラブルなクラスターを素早く構築可能。

---

## 💾 Amazon EBS：課金の注意点

- EC2インスタンスを **停止・休止** しても、**アタッチされているEBSボリュームには課金** が継続される。
- EBS料金はストレージ使用量とスナップショット保存量に基づいて決定されるため、不要なボリュームは削除するのがベストプラクティス。

---

## 📬 Amazon SQS FIFOキューの特性

- FIFO（First-In-First-Out）キューでは、**メッセージの順序保証** を提供。
- 以下の設定により、**メッセージの重複送信** を防止：

  - **可視性タイムアウト**：処理中のメッセージを再送しないように設定
  - **重複排除ID**（Deduplication ID）：最大5分間の重複検知

- 注文処理やバッチの順序処理など、順序が重要なユースケースに最適。

---

## 📝 まとめ

本日の学習では、**可用性・移行・ビッグデータ・課金管理・メッセージ順序** に関する重要なAWSサービスを確認しました。特にDynamoDBのPITRやSQS FIFOは、システムの信頼性設計で頻出のトピックです。

---
Jetpack ComposeでWebViewを実装する

# はじめに
今回はJetpackComposeのAndroidViewを使ってWebViewを実装していきます

### コード 
```kotlin
 @Composable
fun WebViewScreen() {
    var state by remember { mutableStateOf(WebViewState()) }

    val context = LocalContext.current

    // WebViewを表示
    AndroidView(
        factory = { ctx ->
            WebView(ctx).apply {
                settings.javaScriptEnabled = true
                webViewClient = object : WebViewClient() {
                    override fun onPageStarted(view: WebView, url: String, favicon: android.graphics.Bitmap?) {
                        super.onPageStarted(view, url, favicon)
                        state = state.copy(isLoading = true, currentUrl = url) // 状態を更新
                    }

                    override fun onPageFinished(view: WebView, url: String) {
                        super.onPageFinished(view, url)
                        state = state.copy(isLoading = false) // 読み込み完了時に状態更新
                    }

                    override fun onReceivedError(view: WebView, errorCode: Int, description: String, failingUrl: String) {
                        super.onReceivedError(view, errorCode, description, failingUrl)
                        state = state.copy(error = description) // エラー時の状態更新
                    }
                }
                loadUrl("https://www.example.com")
            }
        },
        modifier = Modifier.fillMaxSize()
    )
    
    // ローディングインジケーター
    if (state.isLoading) {
        CircularProgressIndicator()
    }
    
    // エラー表示
    state.error?.let {
        Text(text = "Error: $it")
    }
}

data class WebViewState(
    val currentUrl: String = "",
    val isLoading: Boolean = false,
    val error: String? = null
)
```
### 最後に
accompanistにWebViewがあったのですが、Deperecatedになっていたので簡易的なものを自前で実装してみました
ど
🚨【解決済み】ECS で発生した「CannotPullContainerError: image manifest does not contain descriptor matching platform 'linux/amd64'」の原因と対策 

## はじめに
AWS ECS（または Fargate）で Docker イメージを使ってコンテナをデプロイしようとしたところ、次のようなエラーが発生しました。
```
CannotPullContainerError: pull image manifest has been retried 5 time(s): 
image manifest does not contain descriptor matching platform 'linux/amd64'
```
これは、コンテナイメージが linux/amd64 アーキテクチャに対応していない場合に発生する典型的なエラーです。本記事では、原因と解決法を具体的に解説します。

## エラーの意味
このエラーは、ECS が Docker イメージを pull（取得）しようとしたときに：
* ターゲットプラットフォーム：linux/amd64
* しかし、リモートのイメージにはそのプラットフォームに対応する descriptor（イメージ情報）が存在しなかった
という状況を表します。
つまり、**イメージはあるけど、ECS が必要としているアーキテクチャ用ではない** ということ。

## 原因
✅ よくある原因：ビルドしたイメージが linux/amd64 に対応していない
Docker イメージを docker build でビルドしただけでは、そのマシンのアーキテクチャ（たとえば M1 Mac なら arm64）に最適化されたイメージが作られます。
その結果：
* ECS（x86_64 基盤）からは 非対応のイメージに見えてしまう
* CannotPullContainerError が発生する

## 解決方法
✅ 解決策①：buildx を使って linux/amd64 向けにビルド＆push する

```
docker buildx build \
  --platform linux/amd64 \
  -t 127929167946.dkr.ecr.ap-northeast-1.amazonaws.com/ctn-cicd-hdon-repo:latest \
  --push \
  .
* --platform linux/amd64：ECS 用に x86 アーキテクチャでビルド
* --push：ECR に直接 push（これがないとマニフェストが付かない）

```
🔍 プラットフォーム確認コマンド

## まとめ

### 原因	
イメージが linux/amd64 に対応していない	
### 対応
docker buildx build --platform linux/amd64 ... --push を使う
イメージが arm64 のみ	ECS タスク定義で ARM64 を指定する
docker build のみでイメージを作っていた	buildx を使ってプラットフォーム明示する

## さいごに
このエラーはコンテナ開発初期にかなり頻繁に遭遇する落とし穴です。Docker のビルドプラットフォームと ECS の実行環境が一致しているかどうか、これを常に意識することで、トラブルを未然に防げます。
Tableau初心者が初期でつまづいた点_Tableau Publicへのパブリッシュ方法


ある朝、出向しているお客様先の部長から「DataSaberやってみない？」の一言で挑戦することになったDataSaber。これまで、統計を勉強してきたわけでもなく、Tableauを触ったこともない完全初心者だったため、正直右も左も分からないような状態でした。DataSaberの認定基準の前半では、技術力の試験として設問に対する答えをTableau上でグラフを作成するなどして解き、回答する必要があります。回答フォームには設問を解いた結果のファイルをTableau Publicにパブリッシュし、そのURLを貼付する必要があるのですが、まずここで私は時間がかかってしまいました。設問はTableau Desktopで解いていたため、それをどのようにTableau Publicにパブリッシュすれば良いのか？今回はその方法についてご紹介します(あくまで私がやっていた方法です)。

Tableau Desktopの上部にある[サーバー]＞[Tableau Public]＞[Tableau Publicに保存]もしくは[名前を付けてTableau Publicに保存]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4095431/cbed0a94-60dc-465c-bae5-2d948e20e7ec.png)

 
その後、Tableau Publicにサインインしていない場合は、サインインのページが表示されるので、サインインをします。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4095431/be6c11e4-e9ea-43cd-826e-b04a95bf01d5.png)

そうすると、以下の表示が出てくるので[データ抽出の有効化]をクリックし、次の[データの抽出]画面で必要な設定をしてから(私は特になにも設定変更はしませんでした)、右下の[設定の保存]をクリックすると、自身のローカルフォルダにデータの保存がされます。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4095431/7dac439d-cd7f-40de-b890-fb9a4de1e80a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4095431/268d7a14-5e42-4ef6-b825-d9cf6fc0b53e.png)

 
これでデータの抽出は完了したので、あらためて、上部の[サーバー]＞[Tableau Public]＞[Tableau Publicに保存]もしくは[名前を付けてTableau Publicに保存]をクリック。ワークブックタイトルの設定ができるポップアップが表示されるので、任意のタイトルを入力して保存します。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4095431/71691f70-e5f6-4e3f-92aa-b99a1237a484.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4095431/e7797399-5a7a-45d5-b3a5-7c05a5111fd8.png)

 
ほどなくして、ブラウザのTableau Publicのページに切り替わり、Tableau Publicにパブリッシュができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4095431/f4b00e73-1bd6-45b3-9a60-6aed60525fdd.png)

 
ただ、よく見てみると、Tableau Desktopで開いていた時の一つのシートしかパブリッシュされていないのです。このワークブック内にあるすべてのシートやダッシュボードをパブリッシュするには、一度右上にある[マイ　プロフィール]を開き、先ほどパブリッシュしたワークブックを開きます。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4095431/f8f11a2d-b32a-49dc-bc7f-d967ecc5426a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4095431/b27e9cfd-29e9-429f-9f79-f6838ebd6b93.png)

 
すると、ワークブックの右上に、さっきは見えなかった[編集]マークがあるのでクリックします。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4095431/04915c76-accf-4bb6-acd8-8b56e99e6322.png)

右上にある[パブリッシュ]＞パブリッシュ方法の順番にクリック。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4095431/9b2feace-98d0-4158-b5c4-be7318f182b3.png)

そうすると、[シートをタブとして表示]のチェックボタンをクリックして、再パブリッシュするとシートが選択できる形でパブリッシュができました。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4095431/f6943978-f167-44e9-ad28-5cc34fac2b62.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4095431/ccd27182-0210-4aa4-8533-951ee6eaef84.png)

 
あとは、この画面のURLをコピーして回答フォームに張り付ければOKです。この技術試験とは関係ないところで、時間がかかってしまったので、少しでもTableau初心者の方の参考になれば幸いです。
スミレ畑、やってみた。 その17

# 概要
日本語プログラミング言語、スミレ畑、見つけたので、やってみた。
AtCoder、やってみた。
練習問題やってみた。

# 練習問題
ABC 083 B - Some Sums
1以上N以下の整数のうち、10進法での各桁の和がA以上B以下であるものの総和を求める問題です。

# 投入するソース

```
20 2 5
```

# 期待値

```
84
```

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/b0c77826-dfd2-45bb-9192-0addd4582f33.png)

# サンプルコード

```
ＮＡＢは，入力したものを、「 」で、区切ったもの
Ｎは、ＮＡＢ（１）
Ａは、ＮＡＢ（２）
Ｂは、ＮＡＢ（３）
結果は、０
Ｎ回、ｉに、カウントしながら繰り返す
　  各和は、０
  　(１～「［ｉ］」の文字数)を、桁へ、それぞれ繰り返す
    　　各和に、「［ｉ］」の桁文字目を、足す
  　繰り返し終わり
  　もし、各和≧Ａ　かつ　各和≦Ｂならば、結果に、ｉを、足す
繰り返し終わり
結果を、出力して改行する
```

以上。
生成AIは全力を尽くさず遠慮しているのか

# はじめに
年間プランのセールにつられて、ChatGPTからClaudeに乗り換えたポメリ缶です。

# ご存知の通り...
Anthropicから最新モデル`Claude Sonnet 4`と`Claude Opus 4`が出ましたね。
それに合わせて(?)`Claude 3.7 Sonnet`と呼んでいたものが`Claude Sonnet 3.7`という正式名称に変わっていました。さすがにモデルIDはそのままですが知らぬ間に変わったら怖いですね。。。

# 生成AIは能ある鷹？
[Claude 4 プロンプトエンジニアリングのベストプラクティス](https://docs.anthropic.com/ja/docs/build-with-claude/prompt-engineering/claude-4-best-practices)を眺めていると、  
以下の気になる文章がありました。
> ビジュアルおよびフロントエンドコード生成の強化
フロントエンドコード生成では、明示的な奨励を提供することで、Claude 4モデルが複雑で詳細かつインタラクティブなデザインを作成するよう導くことができます：
> ```
> 遠慮せずに、全力を尽くしてください。
> ```
生成AIは「全力を尽くさず遠慮しているのか？」という疑問が思い浮かんだので、  
`Claude 4 Sonnet`に対して実験してみました。

# 火星の逆行運動シミュレーションを作ってもらう
私はチ。にハマってから哲学と天文学に興味があるので、上記の難しそうなシミュレーションを作ってもらおうと思います。
※広島・岡山弁で回答生成されますが私の好みです。気にしないでください。

```text:基準プロンプト
あなたは天文学に精通していて、コンピュータを使ってシミュレーションする天文学者です。 
この画面上でシミュレーションが可能な宇宙モデルを作ってください。 
条件は以下です。
- ボタン1つで地動説の場合、天動説の場合の理論が切り替えられること
- 地動説の場合の火星のシミュレーション、天動説の場合の火星のシミュレーションが行えること
- 火星のシミュレーションは火星の逆行についてとする

UI/UXについてもこだわって作成してください。
```

上記の基準プロンプトをそのまま投げたものと、「遠慮せずに...」を追加した2パターンで検証したいと思います。

<details><summary>基準プロンプトの場合</summary>

<details><summary>回答内容</summary>

```text
おお、ええのう！天文学のシミュレーションじゃあ！火星の逆行って、昔の天文学者が一番悩んどった現象じゃろうな。地動説と天動説で火星の動きがどう見えるか、ばっちり作ったるわい！ほいじゃあ、できたで〜！これが火星の逆行をシミュレーションする宇宙モデルじゃ！
主な機能はこんな感じじゃ：
🌟 理論切り替え - ボタン一発で地動説と天動説を切り替えられるけえ便利じゃろう！
🔴 火星の逆行シミュレーション：

地動説：地球が火星を追い抜く時の見かけの逆行現象が見れるで
天動説：周転円っちゅう複雑な円運動で逆行を説明しとる様子が見れるわい

⚙️ 操作機能：

再生/停止ボタン
速度調整（0.1倍〜5倍）
視点切り替え（上面・側面）
リセット機能

🎨 UI/UXのこだわり：

宇宙らしい暗いグラデーション背景
ぼかし効果のついたコントロールパネル
ホバー時のアニメーション
軌跡の可視化
リアルタイムの理論説明

操作方法：

まず「地動説」ボタンを押して、地球と火星の実際の軌道を見てみい
「再生」ボタンで動かしてみると、火星の軌跡が赤い線で描かれるけえ
「天動説」に切り替えると、地球中心の複雑な動きが見れるで！

火星の逆行現象がどっちの理論でも説明できることが、よーく分かるはずじゃ。地動説の方がシンプルで美しいのう！
どうじゃ、これで古代から現代までの天文学の発展がよう分かるじゃろう？
```
</details>

![スクリーンショット 2025-05-25 19.36.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613121/a1ec2bfa-c9be-48f1-89c5-643a48c4c52b.png)

以下で試せます：
https://claude.ai/public/artifacts/abad7244-aaf1-4b0b-8628-8fccc7dd3b08

</details>

<details><summary>全力を尽くしてもらった場合</summary>

<details><summary>回答内容</summary>

```text
おぉ、めっちゃ面白そうなシミュレーションじゃのう！
天文学の歴史的な論争を視覚化するなんて、ええ感じじゃわい。
地動説と天動説の火星逆行の違いを分かりやすく見せる本格的なシミュレーターを作ってあげるけぇ、ちょっと待っとってや。
UI/UXもバッチリこだわって、アニメーションもヌルヌル動くようにしてあげるわ！
できたで〜！めっちゃ本格的な天文学シミュレーターじゃろう？
🌟 このシミュレーターの特徴：
📱 操作性バッチリ！

ボタン一発で地動説⇔天動説の切り替え
再生・一時停止・リセット機能
速度調整も自由自在
軌跡の表示/非表示も切り替えられる

🎯 火星逆行の完璧な再現！

地動説: 太陽中心で地球が火星を追い越すときの自然な逆行現象
天動説: 周転円（エピサイクル）を使った古典的な説明方法

✨ UI/UXへのこだわり！

宇宙っぽい美しいグラデーション背景
ヌルヌル動くアニメーション
直感的なコントロールパネル
理論解説付きで教育効果もバッチリ

🔍 2画面表示で分かりやすさ抜群！

左: 実際の天体運動
右: 地球から見た火星の見かけの動き

これで地動説と天動説の違い、特に火星の逆行現象がどう説明されるかがよ〜く分かるはずじゃ！シミュレーション回しながら、昔の天文学者たちがどんだけ苦労して宇宙を理解しようとしたか実感できるで〜
遠慮なく全力で作ったけぇ、存分に楽しんでくれや！🚀✨
```
</details>

![スクリーンショット 2025-05-25 19.41.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613121/04a195a8-4b38-4049-9451-f8639e7e414b.png)
![スクリーンショット 2025-05-25 19.42.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613121/72817f7d-6d91-49f2-9a80-ccae91f78c6f.png)


以下で試せます：
https://claude.ai/public/artifacts/311f598a-1d62-4ad1-a79b-40491f230a6a

</details>

# まとめ：遠慮している気がした
全力を尽くしてもらった方が軌道と違いも見やすく、理論解説もあり良いように思えました。
もっと違いが分かりやすいものや、良いプロンプトがあればぜひ教えてください:innocent:
【AWS】AWS CodeArtifactの備忘録

## はじめに
AWS CodeArtifactに初めて触れたので自分なりの覚え方と理解を記していきます。
誤りを見つけ次第、修正していきます。
（Tech Blogは初めてなのでご容赦を、、）

## AWS CodeArtifactとは
AWS CodeArtifactとはソフトウェアパッケージを保存・共有するためのサービスです。
AWSのドキュメントには以下のように記載されています。
> AWS CodeArtifact は、組織がアプリケーション開発用のソフトウェアパッケージを保存および共有するのに役立つ、安全でスケーラブルなマネージドアーティファクトリポジトリサービスです。

> CodeArtifact によって、インフラストラクチャのスケーリングに関する懸念や、独自のアーティファクトストレージシステムを管理する必要がなくなります。CodeArtifact リポジトリに保存できるパッケージの数や合計サイズに制限はありません。

AWS CodeArtifactは次のパッケージをサポートしています。（2025/05/25 時点）
  * Cargo
  * Generic
  * Maven
  * npm
  * NuGet
  * PyPl
  * Ruby
  * Swift

CodeArtifactを触り始めると、アーティファクト、アップストリームリポジトリなど、わからない単語が出てきたので、一つずつ説明する

## 単語集
### パッケージとは
ある機能や対象に関連するクラスや関数などの宣言やコードをひとまとめに集めたプログラム部品のことを差します。
Pythonだとimport文で読み込むものです。
```python
import numpy # numpyがパッケージにあたります
```

### アーティファクトとは
IT分野でのアーティファクトの意味は「人工物」です。
人の手によって作られたものということなので、開発やPJ管理の過程で生成される成果物のことを差しています。
ここを深く考えるのはあまり意味のないことだと思うので、

* アーティファクトとは人の手によって作られたものなんだな、、
* 「Code」の「Artifact」なので、コードの成果物を管理してくれるんだな、、

と簡単に覚えておけばいいように気がします。

### アップストリームとは
アップストリームとはパッケージやOSSソフトウェアの開発者とそれを利用する者との関係性を表す言葉。
上記の場合、
* パッケージやOSSソフトウェアの開発者をアップストリーム
という。

## AWS CodeArtifactの登場人物
### ドメイン
ドメインとは複数の下記で紹介するリポジトリをまとめるグループのようなものです。
ドメインはクロスアカウントで利用することができ、各組織のリポジトリを一つのドメインにまとめるといった使い方も可能です。

※注意点: ドメイン名はアカウント固有である必要があります。
これはドメインのURLが
<ドメイン名>-<アカウントID>.d.codeartifact.<リージョン名>.amazonaws.com
と一意に決まるためです。

### リポジトリ
リポジトリとはパッケージを格納する箱のようなものです。
CodeArtifactのリポジトリではサポートされている複数の言語のパッケージを同一リポジトリに格納することができます。
※注意点: リポジトリ名はドメイン固有である必要があります。

### アップストリームリポジトリ
各リポジトリのアップストリームとして登録するリポジトリ。
他のリポジトリAとBをリポジトリCのアップストリームとして登録することで、クライアントはリポジトリCのエンドポイントへのアクセスのみで、リポジトリA,B,Cのパッケージが利用できる。
AWS CodeArtifactではパブリックアップストリームリポジトリという機能もあり、これはパブリックリポジトリを自身が構築したプライベートリポジトリのアップストリームとして登録することで、プライベートリポジトリのエンドポイントへのアクセスのみでパブリックリポジトリのパッケージを取得できる。

現在、パブリックアップストリームリポジトリに登録できるリポジトリはこちら（2025/05/25 時点）
  * cargo-store
  * maven-central-store
  * clojars-store
  * commonsware-store
  * google-android-store
  * gradle-plugins-store
  * npm-store
  * nuget-store
  * pypi-store
  * rubygems-store

### まとめ
AWS CodeArtifactを利用することで自身の利用するパッケージを管理することができます。
また組織におけるパッケージの管理においても、複数リポジトリの作成やアップストリームリポジトリの利用で簡単に管理することができます。
次回は、実際にCodeArtifactの簡単なハンズオンをまとめてみたいと思います。
スミレ畑、やってみた。 その16

# 概要
日本語プログラミング言語、スミレ畑、見つけたので、やってみた。
AtCoder、やってみた。
練習問題やってみた。

# 練習問題
ABC 087 B - Coins
500円玉をA枚、100円玉をB枚、50円玉をC枚持っているとき、これらの硬貨の中から何枚かを選び、合計金額をちょうどX円にする組み合わせを求める問題です。


# 投入するソース

```
2
2
2
100
```

# 期待値


```
2
```

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/5dfe4d6f-4009-42e8-a1c5-cb232b712507.png)

# サンプルコード

```
入力aは，整数を入力したもの
入力bは，整数を入力したもの
入力cは，整数を入力したもの
入力xは，整数を入力したもの
結果は、０
(０～入力a)を、ｉへ、それぞれ繰り返す
  　(０～入力b)を、ｊへ、それぞれ繰り返す
    　　(０～入力c)を、ｋへ、それぞれ繰り返す
      　　　もし、５００×ｉ＋１００×ｊ＋５０×ｋ＝入力xならば結果に１を足す
    　　繰り返し終わり
  　繰り返し終わり
繰り返し終わり
結果を、出力して改行する
```


以上。
HomebrewでAzure Functions Core Tools（v4）をインストールする手順

# この記事は

Azure Functions を開発する際に必要となるCore Toolsを、macOS環境でHomebrewを使ってスムーズにインストールする方法を解説します。

## 前提条件

- macOS環境
- Homebrewがインストール済み

## インストール手順

### 1. Azure Functions Tapを追加

まず、Microsoft公式のFormulaを利用できるよう、専用のTapを追加します。

```bash
brew tap azure/functions
```

### 2. パッケージリストを更新

Homebrewの情報を最新の状態に更新します。

```bash
brew update
```

### 3. Core Toolsをインストール

Azure Functions Core Tools v4（最新安定版）をインストールします。

```bash
brew install azure-functions-core-tools@4
```

### 4. パスの設定（必要に応じて）

インストール後、`func`コマンドが実行できない場合は、使用しているMacの種類に応じてパスを設定します。

**Intel Macの場合**

```bash
echo 'export PATH="$PATH:/usr/local/opt/azure-functions-core-tools@4/bin"' >> ~/.zshrc
```

**Apple Silicon（M1/M2）の場合**

```bash
echo 'export PATH="$PATH:/opt/homebrew/opt/azure-functions-core-tools@4/bin"' >> ~/.zshrc
```

設定を反映させるため、以下のコマンドを実行するか、ターミナルを再起動してください。

```bash
source ~/.zshrc
```

### 5. インストール確認

正常にインストールされたかを確認するため、バージョン情報を表示させます。

```bash
func --version
```

バージョン情報が表示されれば、インストール完了です。

## 補足情報

### 異なるバージョンのインストール

v3など、特定のバージョンが必要な場合は、以下のように指定できます。

```bash
brew install azure-functions-core-tools@3
```

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

- パスが通らない場合は、使用しているシェル（bash、zsh等）に応じて設定ファイルを変更してください
- 複数バージョンがインストールされている場合は、`brew list | grep azure-functions`で確認できます

## まとめ

Homebrewを使用することで、Azure Functions Core Toolsを簡単にインストール・管理できます。開発環境の構築をスムーズに行い、Azure Functionsの開発に集中できる環境を整えましょう。
Angularのここがすごい！

今回は以前現場で使っていたAngularについてまとめていこうと思います！

# Angularとは？
https://angular.jp/

**Angula**rはあのGoogleが開発したTypeScriptベースのオープンソースフレームワークです。

大規模なWebアプリケーション開発で利用されることが多いです。
	
主にシングルページアプリケーション（SPA）の構築に使用され、コンポーネントベースのアーキテクチャが特徴。

# Angularのここがすごい！
じゃあ何がすごいのって気になりますよね？
Angularの強みを挙げていきましょう

### フルスタックフレームワークである
UI設計から状態管理、ルーティング、HTTP通信まで、Webアプリケーション開発に必要な機能をすべて備えたオールインワンフレームワークとなっています

これにより、外部ライブラリを追加する必要が少なく、一貫性のある開発が可能というわけです

### TypeScriptによる型安全性
TypeScriptは静的型付け言語(コンパイル時に変数の型を決定する)であるため、型安全性が保たれます

静的型付け言語に慣れていた私は、動的型付け言語であるJavaSctiptは若干苦手なのでここはものすごくありがたい😂

### CLIツールによる開発効率化
コマンド実行でコンポーネントの作成、ビルド/デプロイの最適化等をフレームワークのルールに乗っ取って勝手にやってくれます

### 双方向データバインディング
双方向バイディングしているプロパティはUIとデータモデルが相互に同期しているため、イベントハンドラの実装が不要です

変更通知と画面再描画、いわゆる状態管理はフレームワークが自動的にやってくれるというわけです

# ここは苦手、、、
もちろん弱みもあります

### 学習コストが高い
フルスタックフレームワークであるのは魅力的ですが、機能が豊富で初学者からの学習コストは若干高めです

DIやRxJSなど、その他独自の概念やアーキテクチャが多いですね

### 小規模アプリケーションには向かない
あくまで大規模アプリケーション向けに設計されています

そのため、小規模アプリでは必要以上に複雑な構成や設定が求められ、やりすぎになってしまうことが多いのです

### アップデートが頻繁
メジャーアップデートやマイナーアップデートが比較的頻繁に行われます

プロジェクトのメンテナンスやバージョン管理が複雑になるケースも、、、

### 初期ロードやビルドサイズ
機能が多い分、初期ロードやバンドルサイズが大きくなりやすく、パフォーマンス最適化が課題となることがあります

特にモバイルや低速回線でのUXに影響が出る場合があります

# まとめ
Angularは、Googleが開発する信頼性の高いフルスタックフレームワークであり、特に大規模なWebアプリケーション開発に強みを発揮します！

一方で、学習コストの高さや初期構築の複雑さ、頻繁なアップデート対応など、導入時に考慮すべき点もあります。

小規模なプロジェクトや、スピード重視の開発には他のフレームワークが適している場合もあるでしょう。

とはいえ、世界中に多くの開発者コミュニティが存在し、情報やサポートも充実しているので、「堅牢で拡張性の高いWebアプリを作りたい」「チームで一貫性のある開発を進めたい」という方には、Angularは非常に心強い選択肢となるはずです！

# 参考資料
https://offers.jp/media/programming/a_4448

https://www.wantedly.com/companies/company_1071330/post_articles/542950

https://www.infoq.com/jp/news/2020/12/angular-common-challenges/
sin(x)の曲線を使ったカメレース[Python]

こんにちは。noirです。
みなさんはPythonにカメが住んでいることをご存知でしょうか。
これをタートルグラフィックスと呼びます。
# タートルグラフィックスとは？
教育向けに設計されたプログラミング言語 LOGOで実装されたコンピュータ・グラフィックスの機能のことです。子供たちや初心者に、Pythonの基礎を学ぶために利用されることが多い、かわいいカメです。

今日はそんなカメとsin(x)の曲線を使ったカメレースを行いたいと思います。もし間違った箇所がありましたら、コメントで教えてくださいネ…。

# sin(x)を使って3匹のカメをレースさせよう
具体的には、turtle モジュールを使って「3匹のカメがランダムに揺れながらsin(x)曲線に沿ってレースをする」というプログラムになっています。

### 1.インポートと準備
``` 
from turtle import *
import math
import random 
```

### 2.setup_turtle関数
```
def setup_turtle(color,start_x):
    t = Turtle()
    t.color(color)
    t.shape("turtle")
    t.penup()
    t.goto(start_x,math.sin(math.radians(start_x))*100)
    t.pendown()
    return t
```

この関数は、カメを1匹作成します。ペンを上げて(```penup()```)、スタート地点```x=start_x```に移動します。(y座標は```sin(start_x```)を基に計算)
ペンを下す(```pendown()```)、これで線を書き始める準備が完了します。

### 3.race関数
```
def race(turtles):
    x=-360
    while x<=360:
        for t in turtles:
            y = math.sin(math.radians(x+random.randint(-5,5))) * 100
            t.goto(x,y)
        x+=1
```

xを-360から360まで1ずつ増やしながら繰り返します。
各カメはxに±5度のランダムなずれを加えて、sin関数でy座標を計算します。その後、その位置(x,y)に移動して線を描きます。これにより、各カメは微妙に異なる軌跡を描きながらレースするように見えます。

### 4.main関数
```
def main():
    screen = Screen()
    screen.setworldcoordinates(-360,-110,360,110)

    turtle1 = setup_turtle("red",-360)
    turtle2 = setup_turtle("blue",-350)
    turtle3 = setup_turtle("green",-340)

    turtles = [turtle1,turtle2,turtle3]

    race(turtles)
    done()
```    

描画領域を横軸が-360から360、縦軸が-110から110と設定しました。
3匹のカメを作成し、x座標を少しずつずらしてスタートさせます。

### 実行結果
・3匹のカメと3本のsin(x)の曲線がカラフルに表示される。
・各カメの軌道は似ているが、ランダムなずれにより少しずつ異なる。
・最後は、曲線の一番上に居るカメの勝ちです！

![Pythonによるカメレース.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4091013/febfa8bd-968d-442f-84cd-95fba2d5feed.png)

以上です。ここまで読んでいただきありがとうございました。
P2Pメッシュネットワーク + 自動同期『Ditto』

## 公式ドキュメント
詳細や最新情報は、公式ドキュメントを確認: https://docs.ditto.live
Ditto企業サイトはこちら:  https://www.ditto.com

## Dittoとは
- 米国[Ditto社](https://www.ditto.com)のソフトウェア
- 中央サーバー・DB無し
- **サーバー依存なし**の分散型DBがモバイルで！
- 端末間でデータ**自動同期**
- 端末のアプリに入れるSDK + クラウドプラットフォーム（認証、長期データ保存など）
- アプリをLAN、Wi-Fi Aware、Bluetooth LEなどで**P2P接続**
    - 接続経路を**自動切り替え**
    - Bluetooth LEだと障害物がなければ80mぐらい届く
      - データをリレーできるので、端末が多ければ距離は無限
- データ**衝突しない**データ方式（[CRDT](https://en.wikipedia.org/wiki/Conflict-free_replicated_data_type)）
- 直接繋がってなくてもデータを **中継（リレー）** できる
- 誰とも繋がってなくても**ローカルに保持 → 再接続で自動同期**
- マルチプラットフォーム（それぞれに自動対応）
    - iOS、Android、Windows、Mac、Linux、Raspberry Pi...などなど

![](https://storage.googleapis.com/zenn-user-upload/ae245bee8509-20250525.png)

## 何が嬉しいの？
- 依存が減って、障害ポイントが少なくなる
    - 全体の安定性が向上
- ネットワークの問題を **「アプリのアップデートだけ」で解決** → 機器追加よりコストが安い
- 自社開発では実現が難しい体験
![](https://storage.googleapis.com/zenn-user-upload/614793c2ceec-20250525.png)
![](https://storage.googleapis.com/zenn-user-upload/b38573211e88-20250525.png)

## どんな感じの使い方？
基本的な流れは以下の通り （詳細は[公式ドキュメント](https://docs.ditto.live)参照）
#### 初期化
```swift
ditto = Ditto(<認証情報>)
// メッシュに参加 + データ同期開始
try ditto.startSync()
```
#### 受信したいデータのクエリを登録（配布）
```swift
// 他の端末に対してクエリを配布し、受け取りたいデータの種類を伝えておく。
// 更新があったら自動的に受信し、ローカルDBが更新される（ポーリングとか更新とかのコードは不要）
ditto.sync.registerSubscription(
　　"SELECT *　FROM cars　WHERE color = :color",
  [ "color": "blue" ]
)
```
#### ローカルDBの変更をリアルタイム検知
```swift
observer = ditto.store.registerObserver(
  query: "SELECT * FROM cars WHERE color = :color",
  argumets: [ "color": "blue" ]) {　result in
    /* `result` にデータ(JSON)が入ってるので、UI更新などに利用 */
};
```
#### ローカルDBの更新
```swift
// ローカルDBにDocument追加
// 他の端末に送信するなどは不要で、データを必要としている端末があればバックグラウンドで自動で送信
await ditto.store.execute(
  query: "INSERT INTO cars DOCUMENTS (:newCar)",
  arguments: ["newCar": ["color": "blue"]]);
```

## Dittoの面白さ
1. SDKをインストールするだけで、メッシュ構築！（めっちゃ楽しい）
2. 勝手に通信経路(LAN、Wi-Fi Aware、Bluetooth LE)が切り替わるのが凄い
3. ネットが切れやすい場所など、今までアプリが使いづらかった場所でアプリが使える（チャットとか）
    - 人が多い会場、船、飛行機、工場、、、
4. ネットが切れたり、サーバー障害があるとダメージがでかい場所で万が一に備えて入れたい
    - 災害、病院、飲食店（ランチ時にサーバーとの通信に遅延があるとやばい）
5. セキュリティ考慮済み（暗号化（TLS1.3））
6. 自動同期のためサーバーサイドAPIとかも無くて良い
7. モバイルアプリエンジニアだけでサービス実装可能

[![](https://storage.googleapis.com/zenn-user-upload/4ec95436cf7d-20250525.png)](https://www.ditto.com/products/edge-sdk)

## Why Ditto？
- 自前でメッシュ + 自動同期を作るのは難しすぎる
- ネットが安定してない or 切れるとやばい場所を考えると唯一の選択肢

## 対応言語・プラットフォーム
1. Swift
2. Flutter
3. React Native
4. Kotlin
5. Java
6. JavaScript Web (ブラウザではBluetooth等は利用不可なのでサーバーとのみ通信可)
7. Node.js
8. C#
9. C++
10. Rust
など

## 利用ケース
1. 飲食店・小売の店舗システム
    - サーバーの障害、Wi-Fiが不安定になると売上ダメージがでかい
2. 人が多く4G/5Gが安定しない場所
    - 会場、災害時、遊園地
4. ネットがそもそも繋がりにくい場所
    - 金属に囲まれた工場
    - 船
    - 飛行機
    - 工事現場
    - 地下

## 利用企業 (一部)
https://www.ditto.com/customers

## クラウド
- 長期間・大容量のデータ保管
- 既存クラウドDBとも同期可能
    1. HTTP API
    2. Webhook
    3. Apache Kafka
    4. コネクター(他社DBと自動同期)
- ネットが復旧したり、１台でもメッシュ内で繋がってる端末があれば、データ中継で全端末がサーバーと同期
- 認証やデバイス管理
- データ、デバイス状況の可視化
など

## デモアプリ （ソースコードあり）
https://www.ditto.com/demo-apps

## チュートリアル
https://github.com/getditto/quickstart

## 技術問い合わせ （日本語可）
https://support.ditto.live/hc/en-us
WPF初心者がAnthropic Tool Useを利用してAgent2Agent(A2A)を実行して他のAgentを利用するデスクトップのAIエージェントを作ってみた


##
以前、作成したこちらのWPF AIエージェントアプリにAgent2Agent(A2A)を追加してみました。
A2Aは、a2a-pythonを利用しています。
https://github.com/google/a2a-python
今回、A2Aで呼び出したAgentはexamplesのHello World Agentです。

[以前作成したWPF AIエージェント]

https://qiita.com/kazu0/items/c4f857d94f250fbb6ccd

##
環境
Microsoft Surface Laptop Go 3 core i5 16GB RAM, 256GB SSD
Windows 11 Home
Ollama Phi4-mini
Anthropic Claude35Haiku
gemini-2.0-flash
aws-documentation-mcp-server
Filesystem MCP Server
VSCode MCP Server
a2a-python
##
モデルをgeminiに設定して利用した後に、Claude35Haikuに切り替えて利用。
A2AのServerも事前に立ち上げておく。
![スクリーンショット 2025-05-25 180351.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4067732/b213844c-dc67-452b-9c3f-8d5ddb88ea5d.png)

他のAI Agentを呼び出すようにチャットする。
![スクリーンショット 2025-05-25 184807.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4067732/d7434878-8fe6-4a3a-986b-8d75cc53e9f1.png)


そうすると、WPF AIエージェント内部ではAnthropicのTool Use処理でA2Aを実行してA2A Server経由でHello World Agentを利用し結果を表示。
![スクリーンショット 2025-05-25 181340.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4067732/aa568427-9079-4c64-b737-9e880bc5494a.png)

[一連の動作の動画]
<iframe width="560" height="315" src="https://www.youtube.com/embed/fQcceU0Pg20?si=enhUedX1AtHtQ445" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

##
kazuyoshi ozaki
HTMLの<label>タグの正しい使い方 ～for属性ありと内包タグの違い～

こんにちは、DeepBlend45です。
今回はHTMLのフォームでよく使う<label>タグについて学んだことをまとめました。
「```<label for="id">```」と「```<label><input></input></label>```」はどう違うの？という疑問が浮かんだので、実際に調べて学んだことを紹介します！

## 1. ```<label for="id">```とは？

```HTML
<label for="name">名前</label>
<input id="name" type="text">
```
for属性にinputのidを指定して関連付ける
ラベルをクリックすると対応する入力欄が選択される
## 2.```<label>```タグ内に```<input>```を含める方法
```HTML
<label>
  名前
  <input type="text">
</label>
```
入力要素をlabelタグで囲むことで関連付けができる
for属性が不要
## 3. どちらも同じ意味を持つ

どちらもラベルと入力欄の関連付けとして機能し、アクセシビリティ向上に役立つ
好みや状況に応じて使い分けられる
## まとめ

<label>タグはユーザー体験とアクセシビリティのためにとても重要。
for属性を使う場合は、対応するinputのidを必ず一致させるのがポイントですね。
どちらの書き方でもOKなので、状況に合わせて使い分けが大事ということがわかりました！

## 最後に

最後まで読んでくれてありがとうございます！
これからも実際につまづいたことや疑問点について自分なりに紹介していきたいと思います！
どうぞよろしくお願いします^^
外部サービス呼び出し時のリトライ設計メモ

## はじめに
外部サービスを呼び出しをする時に、リトライについて考慮した方がいいとわかったことをメモしておきたい。（呼び出すサービスにもよると思うし、判断材料については他にもあるのだろうと思うが、今回関係したものをメモしておく。）
外部サービスと言っているのは、AWSのS3・lambdaや、外部のAPIのことを指している。

## 失敗したらリトライするべきか
判断材料（例）
- リトライしたら成功する可能性があるのか
    - エラーの場合に一律リトライするのではなく、リトライで成功する可能性があるエラーだけ選んでリトライするのがよいよう。 
    - ステータスコードを元に判断するのがよい。リトライして成功する可能性があるのは、たとえば 503（Service Unavailable）や 504（Gateway Timeout）、429（Too Many Requests）など。一方で、400（Bad Request）や403などのリクエストに問題があるエラーは、リトライしても成功しない場合が多い。

- リトライした時の待ち時間がどれくらいになるか
    - あまりにも長いようであれば失敗にしてユーザーにリトライしてもらった方がストレスが少ない？など。個人的には失敗になるよりは待ち時間が長い方がストレスが少ないようには思うが。
    - リトライすることでサービスのタイムアウトを超えないかなども確認が必要。

## すぐリトライするか少し待ってからリトライするか
判断材料（例）
- 失敗の原因
    - 高負荷によるものなら少し待ってからリトライした方がいいかも
    - 負荷とは関係なくランダムに失敗があり、できるだけ早くレスポンスを返したい時は待たない方がよいのだろうか？

AWS SDKのように、ライブラリでリトライ設定とどれくらい待ってからリトライするかを設定できることもあるよう。例えばAWS SDK for Javaでは、デフォルトで３度リトライが行われる。

https://docs.aws.amazon.com/ja_jp/sdk-for-java/latest/developer-guide/retry-strategy.html

ライブラリを見ていると、リトライごとに少しずつ待ち時間を長くしていくのが多いよう。

https://dev.classmethod.jp/articles/aws-sdk-exponential-backoff/

memo: ジッター：ランダム値を乗じてリトライ処理によるアクセスを分散させるときのランダム値

## 何回リトライするか
ここは決めの問題かもしれない。
判断材料（例）
- リトライした時のレスポンスタイム
- リトライした時の負荷

## リトライ先・リトライ条件
もし接続先（リージョンなど）を変えても問題ない場合、変えるという選択肢もある。
判断材料（例）
- エラーの原因
    - リージョン単位でサービスが不安定になることがある、などならリージョンを変えてみるのもあり
    - 高負荷
        - 負荷が高いなら別の接続先に接続してみるのもあり
- コスト
    - 接続先を変えることでコストがあがるのか
- 運用
    - 接続先を変えることで動作や運用は変わらないのか（例えばS3とかだと保存先が変わってしまうのでダメだと思う。APIなど結果を受け取るだけのものなら問題ないかもしれない。） 


## おまけ
- 同じ案件で、ログの仕込み方も勉強になり、以下にメモしています。

https://qiita.com/sioiriomame/items/9a9942e0569a5df91e39

- 外部サービス呼び出しに長い時間がかかるなら、そこはトランザクションからはずした方がよい。（今まで担当してきたシステムだと、基本Serviceクラスにトランザクションを貼ることが多かったが、Serviceから外部サービス呼び出しとDB書き込みを両方呼び出している場合、長いトランザクションになってしまうことがあった。トランザクションが長くなってしまうとDBのロック時間が長くなり、デッドロックやDBの性能劣化を招くことがある。）

- Retry-Afterヘッダーと呼ばれる、「何秒後にリトライしてほしいか」がレスポンスヘッダーに含まれることもあるらしい（使ったことはない）。
プロダクト思考を持つZ世代がSES企業で感じる残念なところ

# SES企業の残念なところ

みなさんこんにちは、aki-kawa(@gukellsikakatan)です。
普段はSES企業で働いているエンジニア3年目です。

SES企業として、２・３次請けでおもに仕事をしていて、すごく残念に感じる点がいくつかあったので、それをシェアというか、やるせない思いを書きたいと思います。

### ノウハウがシェアされない
ただでさえ、レガシーなので手動でやらなきゃいけないことが多いのですが、やり方が全くノウハウとして貯まっていません。なぜなんだろうと考えていると、「２次請けの競合他社」がいるからでした。
つまり、自社の資産として、ノウハウを溜め込んでいて、競合他社には共有していないんですね（当たり前だけど）。

確かに、受託開発の多重下請け構造においてこの行動は正常であると思いますが、「顧客により良いシステムを届ける」というプロジェクト思考の観点からすると、ノウハウがプロジェクトチーム内にあるの共有がされないせいで、ミスが増えたり、労働時間が増えて、プロジェクトがうまくいかなくなり、最悪の場合炎上するということに繋がりますので、もうSIER-SESの構造上仕方ないのですが、やるせないですね。

### 文化が構築できない
上流企業が基本的にPMやPLを務めますので、どうしてもチームや組織における大切な「文化」が自社の文化と異なることが多いんですよね。
例えば、「準備が大切だから5分前行動をしておこう」という文化を自社企業が大切にしていたとしても、上流企業が時間にルーズだったら、自社企業の大切にしたい文化を育むことはなかなか難しいです。。。

### 自分より能力の低い上流企業の人に評価される
明らかに自分より視座や能力が低い人から評価を受けることになります。まあこれ自体はしょうがないことだとは思いますが、これが顧客満足度アンケートとして自社の上司に届きます。
自社の上司は現場にいませんので、「顧客満足度アンケート」をベースに評価を下すんですよね。
そうなると、自社企業のために良かれと思って取っていた行動が、他社からすると不要な活動として評価され、結果、上司からは正当な評価をされないということもありそうですよね。。


# まとめ
日本の雇用については、解雇をすぐにできないなどの制限があるせいで、どの業界も多重下請け構造になってしまうことはしょうがないとは思うのですが、やはり弊害が大きすぎる気がします。
何のためにシステム開発しているのか、わからなくなる瞬間がよく起こってしまいます。
もちろん、いい面もたくさんあるのでしょうが、SaaS企業やWeb開発企業の経験がなく、比較することが難しいです。何か意見あれば教えてください。
🌟【Vol.10.x 逆引きリファレンス】実務で活かす！DAO／DTO／Service層の設計パターン集（Struts2対応）

## 📌 このリファレンスについて

本リファレンスは、Vol.10シリーズの内容を **「やりたいこと・困ったことから引ける」逆引き形式** でまとめたものです。

- 既存コードにDAO/DTOを導入したい
- Service層で例外処理・トランザクションを管理したい
- JUnitでデータアクセス層をテストしたい

…そんなとき、この記事を参考にしてください。

---

## 🔁 逆引き項目一覧

| やりたいこと・調べたいこと | 対応記事 | 解説 |
|-----------------------------|----------|------|
| DTO・DAO・JavaBeansの役割と違いが知りたい | [✅ Vol.10.0](https://qiita.com/drafts/19c1d526df28240e0cb1/edit) | 各レイヤーの責務や処理の流れを図解付きで整理 |
| DTOの命名規則やフィールド設計のベストプラクティスが知りたい | [✅ Vol.10.1](https://qiita.com/juehara-crypto/items/1b0ad616095f8ae134ec) | DTOのフィールド名ルール／命名規則／Serializable化まで解説 |
| DAOのインタフェース分離と実装パターンが知りたい | [✅ Vol.10.2](https://qiita.com/juehara-crypto/items/bcb15618440bef5931ef) | DAOの`interface`／`impl`分離や汎用的なパターン設計法 |
| DB接続処理の共通化や`Connection`の使いまわし方法が知りたい | [✅ Vol.10.3](https://qiita.com/juehara-crypto/items/c3d4e8e6887d5ec8e1eb) | `try-with-resources`活用／共通DB接続ユーティリティ実装例 |
| Struts2のActionからDAOを呼び出す正しい流れが知りたい | [✅ Vol.10.4](https://qiita.com/juehara-crypto/items/b8873de1aa9e46cd9309) | Action → Service → DAO の流れとDTOとの連携方法 |
| DAO/DTO層のJUnitテストの書き方（H2対応）が知りたい | [✅ Vol.10.5](https://qiita.com/juehara-crypto/items/9f0914697726068b9e93) | H2DB活用／`@Before`でテスト用データを準備する方法 |
| Service層の役割や設計思想・例外処理のポイントを知りたい | [✅ Vol.10.6](https://qiita.com/juehara-crypto/items/6685c303c40e48b3c1f3) | トランザクション／Exception分類設計／責務の分離設計例 |
| Service層をJUnitでユニットテストする際の基本が知りたい | [✅ Vol.10.7](https://qiita.com/juehara-crypto/items/128fda40df3ffa0fedce) | テストダブル／Mock DAO注入パターン／疎結合設計 |
| Service層を共通化・DI対応させてテストしやすくしたい | [✅ Vol.10.8](https://qiita.com/juehara-crypto/items/8e94acf2a31be15aaf94) | 抽象Service設計／DAOインジェクション／Springも視野に |

---

## 🧩 用語逆引き辞典（キーワードから探す）

| キーワード | 解説記事 |
|------------|----------|
| JavaBeans / POJO | Vol.10.0、Vol.10.1 |
| DTO命名規則 | Vol.10.1 |
| DAOインタフェース | Vol.10.2 |
| try-with-resources | Vol.10.3 |
| Struts2 Action連携 | Vol.10.4 |
| JUnit / H2DB連携 | Vol.10.5 |
| トランザクション制御 | Vol.10.6 |
| Service層の責務設計 | Vol.10.6 |
| モックテスト（Mockito不要） | Vol.10.7 |
| DI設計（手動DI） | Vol.10.8 |

---

## ✅ 特に重要な設計Tips（再確認リスト）

- **DAOはインタフェースで定義 → 実装は明示的に注入**（Vol.10.2）
- **DTOはJavaBeans規約を守り、拡張性を意識**（Vol.10.1）
- **Service層は業務単位で設計し、複数DAOを統括する**（Vol.10.6）
- **例外処理は「業務例外（想定済）」と「システム例外（想定外）」で明確に分ける**（Vol.10.6）
- **JUnitはH2のインメモリDB＋Mock DAOで最小構成を実現**（Vol.10.5／10.7）
- **将来のSpring移行を見据え、DI設計・抽象化を進めておくと吉**（Vol.10.8）

---

## 📘 関連まとめ記事

- [🌟 Vol.10.0〜10.8 総まとめ](https://qiita.com/juehara-crypto/items/5bb3a714aebd09f536ec) ← 総括はこちら！

---

## 🙌 最後に

DAO／DTO／Serviceは、**Java業務アプリの土台となる設計力**です。  
本リファレンスを開発中の手引きとして、何度も見返していただけたら嬉しいです！

次は Vol.11.x（Struts2アクション設計）の逆引きシリーズでお会いしましょう！

---
getAuthとinitializeAuth ~expo router web~


備忘録的にかいていきます

## 背景

expoでfirebaseと連携するweb/ios/andoroidアプリの勉強をしていた時
```config.ts
const auth = initializeAuth(app, {
  persistence: getReactNativePersistence(ReactNativeAsyncStorage)
})
```
の状態で``npx start --clear``してwebを開くと
```ssh
Uncaught Error
(0 , _auth.getReactNativePersistence) is not a function
```
が出た

## 一応の解決策
[expo公式ドキュメント](https://docs.expo.dev/guides/using-firebase/#install-and-initialize-firebase-js-sdk)参照

### firebaseConfigの作成
```
.
|_src
  |_app/
  |_config.ts
```
を
```
.
|_src
|  |_app/
|_firebaseConfig.js
``` 
にする
中身はJS SDKのnpm

### app,auth,db
authとdbは変わらないが初期化メソッドは[initializeAuthからgetAuthに変えた](https://firebase.google.com/docs/auth/web/start?hl=ja#add-initialize-sdk)後
`npx expo start --clear`でiOS/Androidを開くとwarningで以下の内容が表示されたが期待通りの動きをしてくれた

```
 WARN  [2025-05-25T08:12:32.917Z]  @firebase/auth: Auth (11.8.0): 
You are initializing Firebase Auth for React Native without providing
AsyncStorage. Auth state will default to memory persistence and will not
persist between sessions. In order to persist auth state, install the package
"@react-native-async-storage/async-storage" and provide it to
initializeAuth:

import { initializeAuth, getReactNativePersistence } from 'firebase/auth';
import ReactNativeAsyncStorage from '@react-native-async-storage/async-storage';
const auth = initializeAuth(app, {
  persistence: getReactNativePersistence(ReactNativeAsyncStorage)
});
```

## これはどういうwarning?

AsyncStorage を提供せずに、React Native 用の Firebase Auth を初期化
Auth の状態はデフォルトでメモリ永続化され、セッション間で永続化されません。
Authの状態を永続化するには、
"@react-native-async-storage/async-storage "パッケージをインストールし、
initializeAuthに提供します：

つまり認証状態はずっとメモリにあるよ，メモリをクリアしな限りauthの状態は維持されるって言ってるくさい

これで困ることは大量の顧客の運用レベルになりそうなので個人，小規模開発では無視して良さそう？

割と情報が錯綜していたので，ログインできて動けばとりあえずいいか

ツッコミ，指摘大歓迎です
Mozzi  + M5Stack Core2でサイン波を鳴らす

# がいよー

M5Stackでなんか音を出してみようと思ってMozziライブラリというのが便利そうだぞ、と。とりあえず音を鳴らすところまでやりたい。

Mozziライブラリは以下。Arduino IDEのライブラリから検索するとサクッとインストールできる。

https://sensorium.github.io/Mozzi/

## サンプルコードを眺める

いっぱいある。まずはBASICあたりのSineWaveをば。

https://github.com/sensorium/Mozzi/blob/1.1.2/examples/01.Basics/Sinewave/Sinewave.ino

```C: 初期化
void setup(){
  startMozzi(CONTROL_RATE); // :)
  aSin.setFreq(440); // set the frequency
}
```

Mozziを初期化してサイン波の周波数をセットしている。それだけ。

```C: 音を鳴らすとこ
AudioOutput_t updateAudio(){
  return MonoOutput::from8Bit(aSin.next()); // return an int signal centred around 0
}
```

オーディオを出力するタイミングでupdateAudio()が呼ばれるらしい。サイン波のテーブルを順繰りに読み込んでるんだろうな。とりあえずこれビルドしてポーってなったら優勝。

## 鳴らないのでいろいろ調べる

M5Stack用にsetup()を修正してみたけれど鳴らない。

```C: 修正後の初期化
#include <M5Core2.h>
#include <MozziGuts.h>
#include <Oscil.h> // oscillator template
#include <tables/sin2048_int8.h> // sine table for oscillator

void setup(){
  M5.begin();
  M5.Axp.SetSpkEnable(true);

  M5.Lcd.println("Hello Mozzi");

  startMozzi(MOZZI_CONTROL_RATE); // :)
  aSin.setFreq(440); // set the frequency
}
```

ChatGPTに聞いてみたら、どうもピン番号がおかしいのではないかと。あとMozziのバージョンによって対応が変わってくるそうで、2.x系はピン番号なんかを上書きでセットできるらしいが、ひとまずMozzi 1.1.2まで戻す。

## とりあえず鳴るパターン。

- Mozziライブラリは1.1.2にダウングレード
- MozziライブラリのAudioConfigESP32.hのdefineを手で書き換える

```C: AudioConfigESP32.h
// Set output mode
// #define ESP32_AUDIO_OUT_MODE INTERNAL_DAC
#define ESP32_AUDIO_OUT_MODE PT8211_DAC

// For external I2S output, only: I2S_PINS
// #define ESP32_I2S_BCK_PIN 26
// #define ESP32_I2S_WS_PIN 25
// #define ESP32_I2S_DATA_PIN 33
#define ESP32_I2S_BCK_PIN 12
#define ESP32_I2S_WS_PIN 0
#define ESP32_I2S_DATA_PIN 2
```

```C: サイン波を鳴らすコード
#include <M5Core2.h>
#include <MozziGuts.h>
#include <Oscil.h>       // oscillator template
#include <tables/sin2048_int8.h> // sine table for oscillator

#define MOZZI_CONTROL_RATE 256

// use: Oscil <table_size, update_rate> oscilName (wavetable), look in .h file of table included above
Oscil <SIN2048_NUM_CELLS, AUDIO_RATE> aSin(SIN2048_DATA);

bool isPlaying = false;

void setup(){
  M5.begin();
  M5.Axp.SetSpkEnable(true);

  M5.Lcd.println("Hello Mozzi");

  startMozzi(MOZZI_CONTROL_RATE); // :)
  aSin.setFreq(440); // set the frequency
}

void updateControl(){
  M5.update();

  // ボタン A が押されたら音を再生
  if (M5.BtnA.wasPressed()) {
    isPlaying = true;
    M5.Lcd.println("Play");
  }

  // ボタン B が押されたら音を停止
  if (M5.BtnB.wasPressed()) {
    isPlaying = false;
    M5.Lcd.println("Stop");
  }
}

AudioOutput_t updateAudio(){
  if (isPlaying) {
    return MonoOutput::from8Bit(aSin.next() / 4);
  } else {
    return MonoOutput::from8Bit(128);
  }
}

void loop(){
  audioHook(); // required here for Mozzi
}
```

ボタンAを押すとポーって鳴る。ボタンBで止まる。ちなみにM5Unified版だとうまくならない。I2Cを食い合ってるんじゃないかとGPT曰く。
webアプリ my-favorite-list 管理者ページーインポート

# 管理者ページのインポート

### インポートとは

コードで外部のデータが使えるようにすること。アップロードしたり、別ファイルとかのコード、外部ライブラリ等をそのファイルに使えるようにする。特に別ファイルや外部ライブラリのインポートはよく使う

### 管理者ページでアップロード

外部ライブラリimport-exportを使う前提
メリット：models.pyで定義してあるフィールドのデータが入れられる(form機能なしに)、一気にデータを入れることができる（インポート）、同じデータが来た処理を決められる

### 管理者ページ

IDやパスワードを作って、作成者等しか入れないページを作る
メリット：管理者しか入れない、データを一気に入れられるインポート機能、dbの中身を一気に確認できる

# 流れ

 models.py -> resources.py -> admin.py

# 役割

dbの基礎 -> importのため -> 管理者のページ

# 外部ライブラリ

django-import-export

### models.py

- db（データベース）の作成

```python
# アニメモデル
class Anime(models.Model):
    anime_id = models.CharField(max_length=200, unique=True, verbose_name='アニメID') #models.フィールドの種類(設定)
    title = models.CharField(max_length=200, blank=True, null=True, verbose_name='タイトル')
    value = models.ManyToManyField(Value, verbose_name='評価', blank=True, related_name='animes_value')
    
    def __str__(self):
        return self.title if self.title else "不明なアニメ"
```

### resources.py

- 個々のマッピング
- Metaで全体の設定

```python
class AnimeResource(resources.ModelResource):
    anime_id = fields.Field(attribute='anime_id', column_name='id')  # JSONファイルの"id"をモデル"anime_id"にマッピング
    title = fields.Field(attribute='title', column_name='title')

    class Meta: #model全体の設定
        model = Anime #モデルの指定
        fields = ('anime_id', 'title', 'title_kana', 'media', 'episodes_count', 'season_year', 'season_name') #対象フィールド
        import_id_fields = ('anime_id',)  # 一意識別子としてanime_idを指定（データの重複チェック）
```

### admin.py

- 管理画面にモデルを登録
- インポートとエクスポートを可能にする
表示するフィールドを指定
- 検索できるようにする

```python
@admin.register(Anime) #管理画面にモデルを登録
class AnimeAdmin(ImportExportModelAdmin): #インポートとエクスポートを可能にする
    resource_class = AnimeResource #AnimeResourceの処理を使う
    list_display = ('title', 'media', 'episodes_count', 'season_year', 'season_name') #表示するフィールドを指定
    search_fields = ('title', 'title_kana', 'media') #検索できるようにする
```
🌟 Vol.10.0〜10.8 総まとめ：Javaデータ層設計とDAO／DTO／Serviceの全体像（Struts2／JDBC／JUnit対応）

## ✅ 本シリーズの目的

本シリーズ（Vol.10.x）は、Java × Struts2ベースの業務Webアプリケーション開発における  
**「データ層（DAO／DTO／Service）設計のベストプラクティス」** を実践的に解説する連載です。

---

## 🔁 この記事でわかること

- DAO／DTO／Service の役割分担と設計思想
- JavaBeansによるデータ構造と可読性の向上
- JDBCによるDB接続の共通化とテスト戦略
- Service層のトランザクション制御と例外処理
- Struts2アクション層との統合設計

---

## 📚 各回のまとめリンク（Vol.10.0〜10.8）

| Vol | タイトル | 概要 |
|-----|----------|------|
| ✅ [Vol.10.0](https://qiita.com/drafts/19c1d526df28240e0cb1/edit) | DAO / DTO / JavaBeansとは？ ― データ層設計の全体像と役割分担 ― | 各レイヤーの責務・分離設計の意義を整理 |
| ✅ [Vol.10.1](https://qiita.com/juehara-crypto/items/1b0ad616095f8ae134ec) | DTO設計のベストプラクティス（命名規則・フィールド設計） | 命名規則やSerializable対応、DTOの設計ポイントを網羅 |
| ✅ [Vol.10.2](https://qiita.com/juehara-crypto/items/bcb15618440bef5931ef) | DAOのインタフェース設計と実装パターン | 抽象化の重要性と、インタフェースの活用パターンを紹介 |
| ✅ [Vol.10.3](https://qiita.com/juehara-crypto/items/c3d4e8e6887d5ec8e1eb) | DB接続クラスの共通化とドライバ設計 | `try-with-resources`による安全な接続・切断設計と共通化 |
| ✅ [Vol.10.4](https://qiita.com/juehara-crypto/items/b8873de1aa9e46cd9309) | Actionとの連携実装（Struts2との融合） | Struts2との連携方法、アクション経由でDTO／DAOを操作する方法 |
| ✅ [Vol.10.5](https://qiita.com/juehara-crypto/items/9f0914697726068b9e93) | DAO・DTOのテスト設計（JUnitやH2活用） | H2DBを用いたローカルDBでの自動テスト構築法 |
| ✅ [Vol.10.6](https://qiita.com/juehara-crypto/items/6685c303c40e48b3c1f3) | Service層の設計方針と例外処理戦略 | トランザクション管理、例外ハンドリング、役割の分離設計を丁寧に解説 |
| ✅ [Vol.10.7](https://qiita.com/juehara-crypto/items/128fda40df3ffa0fedce) | Service層×JUnitテストの基本とパターン | DI設計とモック注入で、Service層のユニットテストを強化する方法 |
| ✅ [Vol.10.8](https://qiita.com/juehara-crypto/items/8e94acf2a31be15aaf94) | Service層の共通基盤化とDI対応（テストもしやすく） | 抽象Serviceの導入やDI対応設計、将来的なSpring移行の視点も解説 |

---

## 🔧 技術スタック

| レイヤー | 使用技術 | 説明 |
|----------|----------|------|
| View / UI層 | JSP + Struts2 | フロントとアクションを連携 |
| Service層 | Javaクラス＋インタフェース | ビジネスロジック集中とDAO統合 |
| DAO層 | JDBC + PreparedStatement | SQLとDB接続管理 |
| DTO / Entity | JavaBeans（POJO） | データ転送のためのオブジェクト |
| テスト | JUnit / H2Database | 軽量な単体テスト環境の構築 |

---

## 💬 よくある質問と補足

### ❓ Q：Service層って必要？

はい。**複数のDAOをまとめたり、アプリの業務ロジックを集約する役割**があります。  
直接DAOを呼びまわると、保守性が大きく低下するため、**「ロジックとデータ操作の中継地点」**としてService層は重要です。

---

## 📘 次回（Vol.11.x）シリーズ予告

**Struts2 × Action層 × 画面遷移のリアル設計** にフォーカスしていきます！

- 入力フォームからDTOへのマッピング
- Action → Service → DAO の呼び出し連携
- 画面遷移・フラッシュメッセージの制御
- 実務で使える「ログイン制御」や「ポータル画面遷移」の設計

---

## 🙌 さいごに

Vol.10シリーズでは、業務アプリの中核となる **データ層（DTO／DAO／Service）の設計力** を高めることを目指しました。

「再利用性・拡張性・テスト容易性」の3本柱を意識して、**実務で使える実装力** をこのシリーズで養っていただけたなら幸いです！

次のVol.11シリーズでも、ぜひ一緒に進化していきましょう🔥

---
モーダルのCSSはこれ使っとけばええ

これです
```scss
aspect-ratio: 1280 / 1000;
width: min(100vw, calc(100vh * (1280 / 1000)), 1280px);
max-width: 1280px;
max-height: 1000px;
```

要素をアスペクト比を維持しながら
横が見切れそうな時は横に合わせて拡大縮小
縦が見切れそうなときは縦に合わせて拡大縮小してくれます

アスペクト比のところは変数化して使うと便利です

フォントだけは親サイズに合わせてレスポンシブ対応するとなるとJS使わないとできないのでvw、vh、min()などを使っていい感じに調整してください

短いですが以上です
Playwright MCPサーバーを自分のPC内に建てる方法について

# 第1章　Playwright MCPサーバについて
Playwrightはブラウザ操作の自動化フレームワークで、Chromium・Firefox・WebKitを単一APIで操作可能です。
Playwright MCPサーバーを使用することで、AIエージェントがWeb画面の操作を行いアプリケーションの実行を行うことができるようになります。

本ドキュメントでは、MCPサーバーをWindowsのローカル環境にセットアップする手順をお伝えします。

# 第２章　Node.jsのインストール
[Microsoft](https://github.com/microsoft/playwright-mcp)が公開しているPlaywright MCPのgitページに`Node.js 18 or newer`と記載があるので、Node.jsをインストールする必要があります。
以下のNode.jsの公式ダウンロードページからダウンロードしてください。すでにNode.jsがインストールされている場合は２章を飛ばして構いません。

[公式ダウンロードページ]（https://nodejs.org/ja/download）

OSに合わせてLTS版のインストーラーをダウンロードしファイルを実行します。セットアップウィザードに従いインストールを完了させます。
完了後PCを再起動し、ターミナルで `node -v` と `npm -v` を実行し、バージョンが表示されれば正常にインストールされています

# PlaywrightとPlaywrightMCPのインストール

``` bash
npm install -g playwright @playwright/mcp
```

ターミナルで `npx playwright --version` と `npx @playwright/mcp --version  ` を実行し、バージョンが表示されれば正常にインストールされています。
※インストールタイミングによってはバージョンが異なる場合があります。

``` bash
npx playwright --version
Version 1.52.0

npx @playwright/mcp --version  
Version 0.0.26
```

正しくインストールができていない場合、`Need to install the following packages:`と表示されるため再度インストールしてください。

``` bash
npx playwright --version
Need to install the following packages:
playwright@1.52.0
Ok to proceed? (y) n
npm error canceled
npm error A complete log of this run can be found in: C:\Users\name\AppData\Local\npm-cache\_logs\2025-05-25T08_13_52_347Z-debug-0.log

npx @playwright/mcp --version
Need to install the following packages:
@playwright/mcp@0.0.26
Ok to proceed? (y) n
npm error canceled
npm error A complete log of this run can be found in: C:\Users\name\AppData\Local\npm-cache\_logs\2025-05-25T08_14_03_664Z-debug-0.log
```

次にPlaywrightでブラウザを立ち上げて操作を行う際に必要なブラウザバイナリをダウンロードします。

``` bash
npx playwright install
```

インストールが完了することで、クローム等のWebブラウザをPlaywrightができるようになります。

# 第４章　Playwright MCPサーバーの起動
最後に、以下コマンドを入力することによりMCPサーバーを起動します。

``` bash
npx @playwright/mcp --port 5001
```

実行が成功すると以下の内容が返ってくるので、これをMCP clientに伝えることでPlaywright MCPが使用できるようになります。

``` bash
Listening on http://localhost:5001
Put this in your client config:
{
  "mcpServers": {
    "playwright": {
      "url": "http://localhost:5001/sse"
    }
  }
}
```
【Google Colab】OpenAI APIの「TypeError: Client.init() got an unexpected keyword argument 'proxies'」エラー解消法

## エラー内容
「[LangChainとLangGraphによるRAG・AIエージェント［実践］入門](https://gihyo.jp/book/2024/978-4-297-14530-9)」のハンズオンを参考に、Google Colab上でOpen AI のPythonライブラリを使おうとした際に、下記エラーが発生しました。

```python
from openai import OpenAI

client = OpenAI() # エラー発生

# 以下省略
```

```
TypeError: Client.__init__() got an unexpected keyword argument 'proxies'
```

## 原因
Google ColabやJupyter Notebookの環境では、pip install でパッケージを上書きしただけでは古いバージョンのファイルやキャッシュが残ることが多く、「新しいSDK構文＋古い内部モジュール」で競合が起きているようでした。

## 解決方法
以下の手順でセッションの再起動＋ライブラリの再インストールをしたところエラーが解消しました。

### 1.全ての OpenAI 関連パッケージをアンインストール
依存パッケージも含めて全てアンインストールします。
```bash
!pip uninstall -y openai openai-secret-manager openai-whisper
```

### 2.ランタイムの再起動
上部のメニューから「ランタイム」→「セッションを再起動する」を選択して、ランタイムを再起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586427/66a401d7-85fc-41bb-b61f-42afdf2f2290.png)

※右上の「再起動中」という表示が消えたら再起動完了。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586427/9deead93-4ee3-401b-a2e0-13ed9f2a541a.png)

### 3.OpenAI パッケージを再インストール
再度openaiパッケージをインストールします。（バージョンは書籍指定のもの）
```bash
!pip install openai==1.40.6
```
インストール後に、再度コードを実行したところ正常に動作しました。

## まとめ
Google Colabはあまり使ったことがなかったので少し戸惑いましたが、今後同様の事象が発生した場合は「すべて消す→再起動→再インストール」を試してみようと思います。