OmniAICreator/Qiita-1.07M huggingface dataset:
Proxmoxで「Undelivered Mail Returned to Sender」メールが届く問題の解決

# 背景
Proxmoxで仮想マシンの定期バックアップを行う際に，成功メールは正しく届くのですが，その15分後ぐらいに「Undelivered Mail Returned to Sender」メールが届くという問題が発生しました．
メール本文を確認すると，バックアップの成功メールと同じ内容だったのですが，送信に失敗しましたと書かれていました．
成功メールは正しく来ているのに，なんでその後に送信失敗メールが来るんだ？と思ったので原因調査と対処を行いました．

# 原因
どうやらProxmoxは，バックアップ等のそれぞれのタスクで設定したメールアドレスとは別で，OS構築時に設定したメールアドレス宛てにメールを送信するようです．
Proxmoxは裏の処理でcronによるタスクの定期監視をしており，何かタスクが上がればメールをroot宛てに行うという処理をしています．
このroot宛てのメール送信ではProxmox VE上で設定したSMTPの情報を見てくれないため，メールサーバに到達できず失敗するという状況でした．

# 対処
応急処置になりますが，root宛てのメールを全て破棄するという方法をとりました．
__しかしこの方法だと，他のタスクやProxmoxに起きた問題とか？のroot宛てメールも全て廃棄されてしまうので注意して下さい！__
Proxmox VEのコンソール上で以下のコマンドを打ちます．
```
nano /etc/aliases
```
一番下の行に以下を追記して，「Ctrl + x」→ 「Enter」を押す
```
root: /dev/null
```
以下のコマンドを打つ
```
newaliases
```
以上で終わりです．送信失敗メールは届かなくなります．
Đăng Ký Nhận Thưởng Betvisa Siêu Hấp Dẫn Lên Tới 18.888.000

Đăng ký nhận thưởng miễn phí với cơ hội thu về khoản nhuận lên tới 18.888.000 cho tất cả khách hàng. Cụ thể sau khi tạo tài khoản thành công, xác minh danh tính và thông tin liên lạc đầy đủ sẽ được tặng 5 vé vòng quay miễn phí tại trang “quay và thắng...
Nguồn bài viết : https://thebetvisa.com/khuyen-mai-betvisa/
https://thebetvisa.com/huong-dan-betvisa/
https://thebetvisa.com/casino-betvisa/
https://thebetvisa.com/da-ga-betvisa/
https://thebetvisa.com/no-hu-betvisa/
https://thebetvisa.com/the-thao-betvisa/
https://thebetvisa.com/xo-so-betvisa/
https://thebetvisa.com/khuyen-mai-betvisa/
https://thebetvisa.com/tac-gia-le-tuan-khang/
Đối Tác : 
https://tibidy.io/
https://glasses4less.uk.com/
https://suncity-sg.com/
https://theking33.com/
https://69vn.work/
https://mm99.guru
Railsでファイル(画像)をレコードに保存する方法

最近、railsの勉強を始めました。
基本的なCRUD処理を公式のドキュメントで学び終えたあと、
レコードに写真を追加したいと思い、調べながらなんとかできたので備忘録を残します。

https://guides.rubyonrails.org/getting_started.html

## 概要
写真付きのブログを作ります。
画像の扱いは、下記を参考にしました。Active Strageを使用します。

https://guides.rubyonrails.org/active_storage_overview.html


## 準備
新しいrailsアプリを作成します
```
rails new blog
```

## モデル設計
タイトル、本文、写真のフィールドをもつモデルを作成します
今回、画像のフィールドを"image"としました。型はstringにします。
```
bin/rails generate model Blog title:string body:string image:string
```

## Active Strageの設定
Gemfileに下記を追記してください
```
gem "image_processing", ">= 1.2"
```
追加したら、下記を実行してimage_processingをインストールします。
```
bundle install
```

## モデルの編集
下記のように編集します。
has_one_attachedにimageを指定します
これでimageフィールドに写真が割り当てられるようなイメージです
```ruby:blog.rb
class Blog < ApplicationRecord
    has_one_attached :image do |attachable|
        attachable.variant :thumb, resize_to_limit: [100, 100]
    end
end
```

## コントローラ
最低限のみ実装しています
```ruby:blogs_controller.rb
class BlogsController < ApplicationController
   #一覧画面
  def index
    @blogs = Blog.all
  end

  #新規作成
  def new
    @blog = Blog.new
  end

   #新規作成処理
  def create
    @blog = Blog.new(blog_params)
    if @blog.save
      redirect_to @blog
    else
      render :new, status: :unprocessable_entity
    end
  end

  private
  def blog_params
    params.expect(blog: [ :title, :body, :image ])
  end

end
```


## ルート
```ruby:routes.rb
  get "/blogs", to: "blogs#index" #一覧
  get "/blogs/new", to: "blogs#new"#新規作成画面
  post "/blogs", to: "blogs#create"#新規作成処理
```

## ビュー
views>blogsにindex.html.erbとnew.html.erbを作成して
以下のように編集します

```erb:index.html.erb
<h1>写真付きブログ一覧</h1>


<div id="blogs">
  <% @blogs.each do |blog| %>
    <div>
        <%= blog.title %>
        <%= image_tag blog.image %>
    </div>
  <% end %>
</div>
```

ファイルアップロードの部分は、"form.file_field"を使ういます
```erb:new.html.erb
<h1>ブログ作成</h1>


<%= form_with model: @blog do |form| %>
  <div>
    <%# タイトル %>
    <%= form.label :title %>
    <%= form.text_field :title %>

    <%# 本文 %>
    <%= form.label :body %>
    <%= form.text_field :body %>

    <%# 写真 %>
    <%= form.file_field :image %>
  </div>

  <div>
    <%= form.submit %>
  </div>
<% end %>
```

これで、bin/rails serverでローカルサーバーを立ち上げ、
"127.0.0.1:3000/blogs/new"にアクセスして投稿します。
"127.0.0.1:3000/blogs"にアクセスすると、画像が表示されることが確認できると思います。
Windows向けOSS Markdownエディタ6選


Markdownでメモを取るのに最適なエディタを探していませんか？

この記事では、Windows環境で利用できる、おすすめのOSS Markdownエディタをご紹介します。

選定基準は以下の3点。

*   **Markdown編集に特化していること**：Markdownの編集に集中できるシンプルなものを重視。
*   **OSSであること**：ソースコードが公開されていると安心して利用できる。
*   **`.md`ファイルを直接開けること**：専用のフォルダ管理などがなく、すぐに編集できる手軽さを重視。

多機能なエディタも便利ですが、Markdownでのメモに特化することで、より快適に作業できるエディタを見つけることができました。

## WYSIWYGエディター：見たまま編集できる

まずは、見たまま編集できるWYSIWYGエディターからご紹介します。

### Markditor

シンプルで使いやすいWYSIWYGエディター。

https://github.com/greyovo/MarkditorApp

| エディタ名 | 編集タイプ | 対応OS | 数式レンダリング | ライセンス |
| -------- | -------- | ------- | -------- | -------- |
| Markditor   | WYSIWYG | Windows | 不明 | MIT |


### Zettlr

WYSIWYGエディタですが、完全なHTML表示はしない半レンダリング型のエディターです。
編集時の見た目の分かりやすさと、編集しやすさのバランスが取れている点が良いと感じました。

https://www.zettlr.com/

| エディタ名 | 編集タイプ | 対応OS | 数式レンダリング | ライセンス |
| -------- | -------- | ------- | -------- | -------- |
| Zettlr   | WYSIWYG(半レンダリング) | Windows, Linux, macOS | 対応 | GPLv3 |

### marktext

シンプルで使いやすいWYSIWYGエディタ。
開発が停滞しているのが残念です。

https://github.com/marktext/marktext

| エディタ名 | 編集タイプ | 対応OS | 数式レンダリング | ライセンス |
| -------- | -------- | ------- | -------- | -------- |
| marktext   | WYSIWYG | Windows, Linux, macOS | 対応 | MIT |


## プレビューウィンドウがあるタイプ

### Yank.Note

ミニマップが真ん中に表示される点がユニークで、アウトラインを把握しながら編集できます。

https://yank-note.com/

| エディタ名 | 編集タイプ | 対応OS | 数式レンダリング | ライセンス |
| -------- | -------- | ------- | -------- | -------- |
| Yank.Note   | プレビューウィンドウ | Windows, Linux, macOS| 対応 | AGPL-3.0 |



### Ghostwriter

Ubuntuでも安心して利用できます[^b]。

https://ghostwriter.kde.org/ja/

| エディタ名 | 編集タイプ | 対応OS | 数式レンダリング | ライセンス |
| -------- | -------- | ------- | -------- | -------- |
| Ghostwriter   | プレビューウィンドウ | Windows, Linux, macOS |  | GPLv3 |

[^b]: [第823回　軽量で期待どおりに動作するMarkdownエディター、ghostwriterを使用する | gihyo.jp](https://gihyo.jp/admin/serial/01/ubuntu-recipe/0823)

### VNote

Vimライクな操作が便利なmarkdownエディタ。

https://app.vnote.fun/en_us/

| エディタ名 | 編集タイプ | 対応OS | 数式レンダリング | ライセンス |
| -------- | -------- | ------- | -------- | -------- |
| VNote   | プレビューウィンドウ | Windows, Linux, macOS| 対応 | LGPL-3.0 |


## 参考にさせていただいた資料

https://qiita.com/tetutaro/items/8d6ef422da44ab148794

https://ja.linux-console.net/?p=19132

https://goworkship.com/magazine/markdown/
caddy basic auth

```shell
caddy hash-password --plaintext abc-def
# $2a$14$VmyNOwSm1pXPdbOmvjOzOeNkcdrrH/pmcJRSi86EJgM5hvjWa17LO
```

```conf
:3000 {
  # Basic Authentication
  basicauth {
    rpcuser $2a$14$VmyNOwSm1pXPdbOmvjOzOeNkcdrrH/pmcJRSi86EJgM5hvjWa17LO

    # anotheruser $2a$10$ANOTHER_USER_HASH
  }

  reverse_proxy localhost:5000

  log {
    output stdout
    format console
  }
}
```
非制御コンポーネントと制御コンポーネント、どれくらいパフォーマンス差がある？

# 制御コンポーネントとは

React-wayな方法で入力の管理やフォームの値管理を行う。

例）useState()を使ってフォームの値を管理

# 非制御コンポーネントとは

制御コンポーネントでは無いもの。

例）useRef()を使ってフォームの値を管理

# 予想

制御コンポーネント（以下CC）では、stateでフォームの値を管理しているため、値が変わるたびにコンポーネントが再レンダリングされる。

一方非制御コンポーネント（以下UC）では、refで値を管理しており、値が変更されたとしてもコンポーネントの再レンダリングは行われない。

そのため、１つのコンポーネントが大量のフォームを持っている場合、CCでは再レンダリングのコストが高くなるため、パフォーマンスが落ちる。

UCでは再レンダリングが行われないため、フォームの数が増えてもパフォーマンスが悪化することはない。

# 検証

検証のために以下のコードを使いました。公開しているので、ぜひお手元で試してみてください。

https://github.com/musenmai-08/compare-performance-of-components


```tsx:Controlled.tsx
import { useEffect, useRef, useState } from "react";

export const Controlled = () => {
	// レンダリング時間計測用
	const startTimeRef = useRef<number>(0);

	const [formData, setFormData] = useState(
		Array(50)
			.fill("")
			.map(() => ({ name: "" }))
	);
	const handleFormDataChange = (formData: { name: string }[]) => {
		startTimeRef.current = performance.now();
		setFormData(formData);
	};

	// フォームとして成立させるために書いた
	// パフォーマンス比較としては不要
	const handleChange = (
		index: number,
		e: React.ChangeEvent<HTMLInputElement>
	) => {
		const { name, value } = e.target;
		const updatedFormData = [...formData];
		updatedFormData[index] = { ...updatedFormData[index], [name]: value };
		handleFormDataChange(updatedFormData);
	};

	// フォームとして成立させるために書いた
	// パフォーマンス比較としては不要
	const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
		e.preventDefault();
		console.log(formData);
	};

	// レンダリングされた時に呼ばれる
	useEffect(() => {
		console.log("制御コンポーネントがレンダリングされました");
	});

	// レンダリング時間計測用
	useEffect(() => {
		if (startTimeRef.current) {
			console.log(
				`制御コンポーネントのレンダリング時間: ${
					(performance.now() - startTimeRef.current) / 1000
				}秒`
			);
		}
		startTimeRef.current = 0;
	});

	return (
		<form onSubmit={onSubmit}>
			{formData.map((data, index) => (
				<div key={index}>
					<input
						name="name"
						value={data.name}
						onChange={(e) => handleChange(index, e)}
					/>
				</div>
			))}
			<input type="submit" />
		</form>
	);
};
```


```tsx:UnControlled.tsx
import { useEffect, useRef } from "react";

export const UnControlled = () => {
	const formRef = useRef<HTMLFormElement>(null);

	// フォームとして成立させるために書いた
	// パフォーマンス比較としては不要
	const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
		e.preventDefault();
		const inputValue = (formRef.current?.elements[0] as HTMLInputElement).value;
		console.log(inputValue);
	};

	// レンダリングされた時に呼ばれる
	useEffect(() => {
		console.log("非制御コンポーネントがレンダリングされました");
	});

	return (
		<form ref={formRef} onSubmit={onSubmit}>
			{Array.from({ length: 50 }).map((_, index) => (
				<div key={index}>
					<input type="text" name="name" />
				</div>
			))}
			<input type="submit" />
		</form>
	);
};
```

こちらのコードで試してみたところ、CCではフォームの値を変更するたびに、0.01〜0.02秒かかっていることが確認できました。

一方UCでは、フォームの値を変更しても再レンダリングが起きていないことが確認できました。

# 結論

一定の条件下において、非制御コンポーネントの方がパフォーマンスが良くなるというのは事実であることが確認できました。ですが、１つのコンポーネントあたりのフォーム数が少ない場合、大きな違いはなくなりそうです。

結論、以下のように使い分けるのが良さそうだと感じました。

- 制御コンポーネントを使う
    - 入力されている内容に対して、リアルタイムにバリデーションなどの検証を行いたいとき
- 火制御コンポーネントを使う
    - １つのコンポーネントに多数のフォームが存在するとき


# 参考
 https://speakerdeck.com/recruitengineers/react-yan-xiu-2024?slide=144
とりあえず MCP Server を作ってみる

## なにこれ
* microsoftが公開してるチュートリアルのコードを動かす
* WSL上に 立てたUbuntu 上で uv 越しに起動した mcp server を Claude Desktop から利用ができた
* Claude Desktop から起動しているのでお金はかかっていない


## 流れ
1. Windows 上で WSL を導入
1. WSL 上で uv を導入
1. WSL 上のどこかに https://github.com/microsoft/mcp-for-beginners/blob/main/03-GettingStarted/01-first-server/solution/python/server.py を置く
1. Claude Desktop に WSL上のUVで server.py を動かす設定をする

## その1 Windows 上で WSLを導入
* https://learn.microsoft.com/ja-jp/windows/wsl/install
* https://www.tohoho-web.com/ex/wsl.html
* 今回は既定値のものではなく Ubuntu-24.04 を追加で入れてそれを使うことにする
```
C:\>wsl --list --online
インストールできる有効なディストリビューションの一覧を次に示します。
'wsl.exe --install <Distro>' を使用してインストールします。

NAME                            FRIENDLY NAME
...snip...
Ubuntu-24.04                    Ubuntu 24.04 LTS
...snip...
  
C:\>wsl --install -d Ubuntu-24.04

```

## その2 WSL上で uv を導入

https://docs.astral.sh/uv/getting-started/installation/
```
$ wsl -d Ubuntu-24.04 bash
$ cd
$ curl -LsSf https://astral.sh/uv/install.sh | sh
$ source $HOME/.local/bin/env
$ uv -V
uv 0.7.13
```

## その3 配置
```
$ cd 
$ mkdir -p work/mcp/1
$ cd work/mcp/1
$ wget https://raw.githubusercontent.com/microsoft/mcp-for-beginners/refs/heads/main/03-GettingStarted/01-first-server/solution/python/server.py
$ uv venv
$ source .venv/bin/activate
$ uv pip install "mcp[cli]"
```
* 今回このパスはこの通り
```
$ pwd
/home/XXXX/work/mcp/1
```

## その4 Claude Desktop に WSL上のUVで server.py を動かす設定をする
* Claude Desktop を起動
* 画面左上のメニュー -> ファイル -> 設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32855/c7d000cc-ddc1-4870-b5ef-1cd5d303221e.png)

* 開発者 -> 構成を編集
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32855/532c663b-e39b-4578-9e05-5fe2a4f3559d.png)

* claude_desktop_config.json が 生成されるので エディタで編集
* 大事なのは bash -c に 一通りのコマンドが渡されるというところ
* XXXX のところは適宜変更してください
```
{
    "mcpServers": {
        "calc": {
            "command": "wsl.exe",
            "args": [
                "-d",
                "Ubuntu-24.04",
                "bash",
                "-c",
                "/home/XXXX/.local/bin/uv run --directory /home/XXXX/work/mcp/1 mcp run server.py"
            ]
        }
    }
}
```

## 試す
* Claude Code を終了してから再度起動すると　以下のように calc が出てくる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32855/47145665-de25-41e6-ba01-4dbab2b3c4ff.png)
* 出てこない場合は設定がうまく行ってないので見直すこと

* 計算をするような質問をすると接続を確認してくるので許可
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32855/151711bc-d00e-4e13-94c2-780ffef359f7.png)
* ちゃんと計算できた
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32855/607378e5-32ce-4b2d-8f59-30bf63c057fa.png)
SSHってなに？

# SSHとは？

SSH（Secure Shell）は、ネットワーク上で安全にリモート操作やファイル転送を行うためのプロトコル（通信規約）です。主な特徴は「通信内容の暗号化」と「認証機能」で、第三者による盗聴や改ざんを防ぎます。

## なぜSSHが必要？

昔はTelnetなど暗号化されないプロトコルが使われていましたが、通信内容が丸見えで危険でした。SSHはこれを解決し、今やリモート接続の標準技術となっています。

## SSHの仕組み

### 1. 暗号化通信

SSHはすべての通信（パスワードやコマンド、ファイル転送など）を暗号化します。これにより、たとえ通信が盗み見られても内容を解読されません。

### 2. 認証方式

SSHには主に2つの認証方式があります。

- **パスワード認証**：サーバーにユーザー名とパスワードを入力してログインする方法。手軽ですが、パスワード漏洩リスクがあります。
- **公開鍵認証**：「公開鍵」と「秘密鍵」のペアを使った認証方式。公開鍵をサーバーに、秘密鍵を自分のPCに保存します。パスワードを入力しなくても安全にログインでき、セキュリティも高いです。

## SSHの便利な機能

- **ファイル転送**：`scp`や`rsync`コマンドで、安全にファイルを送受信できます
- **ポートフォワーディング／トンネル**：SSH経由で他の通信も安全に中継できます。VPNの代用や、社内ネットワークへの安全なアクセスに使われます

## SSHの注意点・ポイント

- 秘密鍵は絶対に他人に渡さない・公開しない
- パスワード認証はできるだけ無効化し、公開鍵認証を推奨
- サーバーのSSH設定（`/etc/ssh/sshd_config`）で不要なユーザーやポートを制限する

## まとめ

SSHは「安全にリモート操作やファイル転送を行うための技術」です。暗号化と認証でセキュリティを確保し、サーバー管理や開発現場で広く使われています。
VPNってなに？

# VPNとは？

VPNは「Virtual Private Network（バーチャル・プライベート・ネットワーク）」の略で、日本語では「仮想専用線」や「仮想専用通信網」と呼ばれます。簡単に言うと、インターネットなどの共用回線の中に"自分専用の安全な通路（トンネル）"を作り、離れた場所同士でも安全にデータをやり取りできる仕組みです。

## なぜVPNが必要なの？

- 公共Wi-Fiなどの不特定多数が利用するネットワークでは、通信内容が盗み見られるリスクがあります
- VPNを使うと、データが暗号化されるため、第三者による盗聴や改ざんから守られます
- 会社のネットワークに自宅や外出先から安全にアクセスしたいときにも活用されます

## VPNの仕組み

VPNの仕組みは主に以下の3つの技術で成り立っています。

- **トンネリング**：仮想的な専用回線（トンネル）を作る技術。インターネット上で他の通信と分離された安全な経路を確立します
- **カプセル化**：データを「カプセル」のように包み込んで送信し、外部から中身が見えないようにします
- **暗号化**：データを暗号化し、万が一データが漏れても第三者には内容が分からないようにします

この仕組みにより、たとえばカフェの無料Wi-Fiでも会社のネットワークに安全にアクセスできるようになります。

## VPNの種類

| 種類 | 利用回線 | セキュリティ | コスト | 通信速度 | 特徴 |
|------|----------|--------------|--------|----------|------|
| インターネットVPN | インターネット | 普通 | 安価 | 不安定 | 導入しやすい。個人や小規模向け |
| エントリーVPN | 閉域網＋インターネット | やや高い | やや安価 | 不安定 | インターネットVPNより高セキュリティ |
| IP-VPN | 閉域網 | 高い | 高額 | 安定 | 通信事業者の専用回線を利用 |
| 広域イーサネット | 閉域網 | 非常に高い | 高額 | 安定 | 大規模・高セキュリティ用途向け |

## VPNのメリット

- **セキュリティ向上**：データが暗号化されるため、盗聴や改ざんのリスクを大幅に減らせます
- **プライバシー保護**：実際のIPアドレスが隠され、匿名性が高まります
- **リモートアクセス**：会社や自宅のネットワークに安全に接続でき、リモートワークや出張時に便利です
- **地域制限の回避**：海外から日本のサービスにアクセスしたい場合などにも使えます

## VPNのデメリット・注意点

- **通信速度が遅くなることがある**：暗号化やトンネル処理のため、通常より通信速度が低下する場合があります
- **コストがかかる場合がある**：高度なVPNサービスや専用回線は導入・運用コストが高くなることも
- **情報漏えいリスクがゼロではない**：設定ミスや脆弱なVPNサービスを使うと、情報漏えいのリスクが残ることもあります
- **無料VPNは要注意**：無料サービスはセキュリティや速度に不安があるため、信頼できるサービス選びが大切です

## まとめ

VPNは「仮想の専用線」をインターネット上に作り、セキュリティやプライバシーを高めてくれる技術です。リモートワークや外出先での安全な通信、地域制限の回避など、さまざまな場面で活躍します。

一方で、通信速度やコスト、設定ミスによるリスクもあるので、用途や必要なセキュリティレベルに応じて最適なVPNを選びましょう。
MulmoCast ― “アイデア”から動画・音声・マンガまで一発生成する、AIネイティブOSSツール

# 🚀 MulmoCast  
AI × CLIで“発想”から**動画・音声・マンガ**まで一発！  
**1ファイルから全メディア生成できるOSSツール**

---

## 🌟 なにができるの？

**MulmoCast**は、  
“1つのスクリプト”から  
- **YouTube動画**
- **ポッドキャスト**
- **スライドPDF**
- **マンガ/デジタルコミック**
を**全自動で生成**できる、OSSコマンドラインツールです。

OSSならではの**自由なカスタマイズ性**と  
**AI（LLM, 画像生成, 音声合成, 翻訳）APIの柔軟な組み合わせ**で、  
「ひらめきを秒速でマルチメディア展開」できます。

---

## 💡 なぜMulmoCast？

- **YouTubeやX向け解説動画を量産したい**
- **台本→スライド→音声→マンガ…同じ内容で何度も作るのが面倒**
- **AI活用/自動化をCI/CDで回したい・OSS拡張したい**

そんな人のための、**「AI時代のメディア工場」**です。

---

## 🔑 特徴

**MulmoScript**  
   JSON形式の設計図ひとつで  
   - 動画/音声/画像/スライド/マンガ等へ展開  
   - 「再現性」「再利用性」可能！！


## 🚀 使い方（3ステップ）

### 1. インストール

```bash
npm install -g mulmocast
brew install ffmpeg
```

### 2. APIキー設定（.env）

```env
OPENAI_API_KEY="sk-..."
ELEVENLABS_API_KEY="..."
```

### 3. コンテンツ生成
```bash
# 台本スクリプト生成
mulmo tool scripting -i -t youtube_commentary -o ./outputs -s ai_news_vol1

# 音声＆画像生成
mulmo audio ./outputs/ai_news_vol1.json
mulmo images ./outputs/ai_news_vol1.json

# 動画やPDFも一発！
mulmo movie ./outputs/ai_news_vol1.json -c ja --style clean_corporate
mulmo pdf ./outputs/ai_news_vol1.json
```

🎬 ユースケース例
- YouTube動画/Shorts自動生成（台本→音声→画像→編集まで全自動）
- SNSマンガ/縦型コミック量産（画風指定もOK）
- AIラジオ/Podcast化
- スライド・技術資料・ビジュアライズ
- ナレーション・字幕の多言語化もワンコマンド

👥 コミュニティと開発状況
更新が盛んで開発進行中！！
Claude Codeで支払い設定をAPI（従量課金）からサブスクに切り替える

Claude Codeの評判が止まらないので乗り換えを本気で検討するべく、これまでAnthropicのLLMはAPIだけ有償使用していたのをついにサブスク契約に踏み切りましたが、Claude Code側の設定変更で少しつまづきました

わかればどうってことはなかったのですが、困っている誰か（1年後の自分など）のためにメモ

なお、逆に**サブスクからAPIへ切り替える場合**、あるいは**APIのキーを変更する場合**も基本の手順（2の手順まで）は同じようです

# 前提

 - Claude Codeインストール済み、使用実績あり
 - Claude CodeをこれまでAPI（Anthropic Console）で使っていた
 - ClaudeのProプラン以上契約済み

# 実行内容

## 1. Claude Codeを実行

```sh
$ claude
```

## 2. プロンプトに `/login`

![login.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210824/efefa357-bafd-468d-87bc-2c236a86679f.png)

補足： `/logout` というコマンドもありますが、無効化ではなく切り替えたいという場合は `/login` だけで後優先になるようです

## 3. アカウントの表示が出るので、「1. Claude account with subscription」を選択

![account setting view.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210824/0a9dafc5-9579-4623-824f-a9bee1b9dbca.png)

## 4. ブラウザでサブスクのアカウント認証画面が開く

あとは画面の指示通りに進行

-----

ポイントは2の `/login` ですね。インストール直後の起動ではいきなり3の表示が出たのかなと思います……多分（あるいは忘れている）


# 参考

[How can I change the API Key used by Claude Code? I see no way in the config](https://www.reddit.com/r/ClaudeAI/comments/1j550z5/how_can_i_change_the_api_key_used_by_claude_code/)
Raspberry Pi 5で YOLO11(v8.3.157)を動かす

* Raspberry Pi 5 8GB
* logicool C270N
* microSDXC 64GB
* Raspberry Pi OS(64-bit)（Release date：May 3th 2025）

## YOLO11のインストール
```
sudo rm /usr/lib/python3.11/EXTERNALLY-MANAGED
sudo pip3 install ultralytics==8.3.157

Successfully installed
 filelock-3.18.0
 fsspec-2025.5.1
 mpmath-1.3.0
 networkx-3.5
 opencv-python-4.11.0.86
 pandas-2.3.0
 py-cpuinfo-9.0.0
 pyyaml-6.0.2
 sympy-1.14.0
 torch-2.7.1
 torchvision-0.22.1
 typing-extensions-4.14.0
 tzdata-2025.2
 ultralytics-8.3.158
 ultralytics-thop-2.0.14
```

## onnxruntimeのインストール
```
sudo pip3 install onnxruntime
```
参考：
https://misoji-engineer.com/archives/raspberry-pi-onnx-yolox.html
https://docs.ultralytics.com/ja/integrations/onnx/

## ONNXフォーマットにエクスポート
```
yolo export model=best.pt format=onnx half=True dynamic=True device=cpu
```
best.pt：Google Colabでトレーニングしたモデル
half=True：モデルサイズの縮小
dynamic=True：ダイナミックな画像サイズに対応
device=cpu：デバイスをCPUに指定

## YOLO11の動作確認
```
yolo task=detect mode=predict model=best.onnx source=0 show=True imgsz=256
```

:::note info
Raspberry Pi 5：1 frame：20.6ms（48.5fps）
:::
[Linux] メール管理_MTA, MDA, MUA,sendmail, Postfix, exim

# メールシステムの3大構成要素

| コンポーネント | 正式名称                | 役割                                   | 
| :-----: | :------------------ | :----------------------------------- | 
| **MUA** | Mail User Agent     | ユーザーがメールを作成・閲覧するソフト（＝メーラー）       | 
| **MTA** | Mail Transfer Agent | メールを送信者から受信者のMTAへ転送する役割（SMTPを使用） | 
| **MDA** | Mail Delivery Agent | 受信したメールをユーザーのメールボックスに振り分ける（配送）| 


# MTAの代表例

| MTA名         | 特徴                                                     |
| ------------ | ------------------------------------------------------ |
| **sendmail** | 伝統的で歴史あるMTA。柔軟だが設定が非常に複雑。セキュリティ対応や保守が難しい               |
| **Postfix**  | sendmailの置き換えを目的に開発。セキュリティとパフォーマンスに優れ、構成も比較的簡単。現在の主流   |
| **exim**     | Debian系でよく採用される柔軟性の高いMTA。設定がスクリプト的で自由度が高い反面、やや複雑になりやすい |

# Ping-t
- [4776_sendmail, Postfix, exim](https://mondai.ping-t.com/question_subjects/32/question_sessions/34000185/progressing_questions/520498155)
- [4796_sendmail, Postfix, exim](https://mondai.ping-t.com/question_subjects/32/question_sessions/34000185/progressing_questions/520498153)
[Linux] プリンタ管理_CUPS, IPP, PPDファイル

 # CUPS（Common UNIX Printing System）

| 項目   | 内容                                                               |
| ---- | ---------------------------------------------------------------- |
| 正式名称 | Common UNIX Printing System                                      |
| 提供元  | Apple Inc.（2007年以降）                                              |
| 主な用途 | ローカルおよびネットワークプリンタへの印刷ジョブ（スプール・変換・送信 等）管理                                          |
| 特徴   | Webベースの管理UI（`http://localhost:631`）、ドライバレス印刷（IPP Everywhere対応）など |
| 対応OS | Linux, macOS（標準搭載）, BSD系OS など                                    |




# IPP（Internet Printing Protocol）

| 項目       | 内容                                                   |
| -------- | ---------------------------------------------------- |
| 正式名称     | Internet Printing Protocol                           |
| プロトコル    | HTTPベース（通常はポート631）                                   |
| 主な機能     | 印刷ジョブの送信・キャンセル・状態確認・プリンタ設定の取得など                      |
| CUPSとの関係 | CUPSの**通信プロトコル**<br>クライアント ↔ サーバ間の通信は基本的にすべてIPPを使用 |


# 📄 PPD（PostScript Printer Description）ファイル

| 項目       | 内容                                                   |
| -------- | ---------------------------------------------------- |
| 正式名称     | PostScript Printer Description                       |
| 拡張子      | `.ppd`                                               |
| 格納場所     | `/etc/cups/ppd/`                                     |
| 主な用途     | プリンタ固有の機能（解像度、給紙トレイ、両面印刷など）を定義する                     |
| CUPSとの関係 | PPDを読み取り、プリンタの設定やオプションを提供<br>→ 古い環境やドライバ必要なプリンタで特に重要 |


# 関係図（CUPS + IPP + PPD）

```
[ユーザーアプリケーション]
        ↓
      CUPS (印刷管理システム)
     ┌──────────────────────┐
     │ ・IPPサーバ/クライアント │←→ ネットワーク上のプリンタ
     │ ・PPDでプリンタ能力取得  │
     └──────────────────────┘
        ↓
 [プリンタドライバ or IPP対応プリンタ]
```

# Ping-t
- [4809_CUPS, PPD](https://mondai.ping-t.com/question_subjects/32/question_sessions/34000185/progressing_questions/520498152)
社会人が基本情報技術者試験「科目A試験免除制度」を使ってみた感想と注意点

[基本情報技術者試験の科目A試験免除制度(旧・午前免除制度)](https://www.ipa.go.jp/shiken/about/menjo-fe.html)を利用した経験談です

私はこの制度を使って基本情報技術者試験を受験しました  
実際に使って感じたことや費用面での注意点などをまとめました  

勉強法というより「この制度を使うべきかどうか」を判断する材料として読んでもらえたらと思います

---

## この制度 こんな人におすすめ

### おすすめする人
- 科目Aに自信がない
- AとBを別日で計画的に受験したい
- 一度に全範囲こなすのが厳しいと感じている

### あまりおすすめしない人
- 早く資格を取りたい
- 費用をなるべく抑えたい
- 応用情報も一緒に取りたい
- 講座を受ける時間や余裕がない
- 自分で試験日を決めたい

---

## 修了試験を受けた感想

結論としては**普通に受けるより楽**だとおもいます

難易度の印象はこんな感じです

```
ITパスポート ≤ 修了試験（科目A免除） ≤ 基本情報技術者試験（通常）
```

私は準備不足の部分もありましたがITパスポートで学んだ内容が役立ち合格できました

最初からAとBを分けて受けたいと考えていたので制度との相性は良かったです

---

## 制度を使うときのお金の話

この制度を使うにはIPAが認定した講座を受講し修了試験に合格する必要があります

気になる費用は以下の通りです

| 試験内容 | 費用 |
|----------|------|
| 基本情報技術者試験（通常） | 約7500円 |
| 修了試験（講座込み） | 約2万円〜（実施会社によって変動） |

高く感じるかもしれませんが科目Aが免除されることで得られる余裕を考えると悪くない選択だと思います

注意点として**科目Bだけ受ける場合でも7500円がかかります**

---

## 受講料は時期で変わることもある

私は4月に申し込んだときは2万円台前半でしたが6月に調べたら**万単位で値上がりしている講座もありました**

どうやら**受講料は時期や講座によって結構変わる**ようです

費用が気になる人は申込時期を見極めるのもありだと思います

---

## まとめ

- 科目AとBを分けて勉強できるのは大きなメリット
- 修了試験の難易度はそれほど高くない
- 講座費用はやや高めで7500円のB試験料も別途かかる
- 講座の費用は時期で変動する可能性がある

---

## 最後に

この制度は知っていれば活用できる選択肢のひとつです

自分の学習スタイルや予定に合わせて検討してみる価値はあると思います
dbdiagram.ioを試してみた

# 背景・目的
E-R図を簡単に作成できるツールとして「dbdiagram」があることを知り、実際に試してみました。

# まとめ
下記に特徴を整理します

|特徴|説明|
|:--|:--|
|概要|・無料<BR>・シンプルなツール<BR>・DSLコードを入力してEDRを描画する<BR>・一般的なDBMLを使用する|
|DBML|・DBMLは、データベースのスキーマ構造を定義するために使用されるオープンソースのマークアップ言語<BR>・DBMLも、dbdiagramのチームにより開発されている|


# 概要
下記を基に整理します。

https://docs.dbdiagram.io/

> dbdiagram.io is a free, simple tool to draw database diagrams (ERDs) by typing DSL code. dbdiagram uses the popular DBML (Database Markup Language).

- 無料
- シンプルなツール
- DSLコードを入力してEDRを描画する
- 一般的なDBMLを使用する

## DBML
> dbdiagram.io uses DBML as our syntax for defining database. DBML is open-sourced markup language used to define database schema structure. DBML is also developed by the team behind dbdiagram.

- DBMLは、データベースのスキーマ構造を定義するために使用されるオープンソースのマークアップ言語
- DBMLも、dbdiagramのチームにより開発されている



## Pricing
2025/6/22 現在、下記の4つのplanになっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/26a580c8-ff5d-4b5c-b90e-f515045e06cb.png)

[pricing](https://dbdiagram.io/pricing)から転載


# 実践

1. [dbdiagram](https://dbdiagram.io)にアクセスします
1. [Pricing](https://dbdiagram.io/pricing)に移動します
1. Get Started Free をクリックします
1. 下記のような画面が表示されました
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/f8c8522a-49e8-4c2c-8374-9023005fd7ee.png)

- Table XXXにより、テーブル定義を記載し、Ref によってリレーションを表現します

## テーブルの作成
1. 小売店の会員をイメージした`Customer`を作成してみます。下記をコーディングします
    ```sql
    Table Customer {
      id int [pk, increment]
      name varchar
      email varchar
      phone varchar
      membership_id varchar
      joined_at datetime
    }
    ```
1. 表示されました
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/9422a03f-40a2-4f9b-8a20-f8f69dace3f3.png" width=300 />

1. もう一件登録してみます。会員（会員以外もありえる）が購入した際のレシートエンティティを作成してみます
    ```sql
    Table POS_Receipt {
      id int [pk, increment]
      store_id int
      customer_id int
      receipt_datetime datetime
    }
    ```
1. 下記の表示されます
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/7e862b97-24e1-4274-8fe8-6ad9cd92fb08.png)

## リレーションの作成
上記の2つのエンティティにリレーションを作成します

1. 下記を登録します
    ```sql
    Ref: POS_Receipt.customer_id > Customer.id
    ```

1. 下記のように繋がりました
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/8ae5d3ec-54b0-45db-a030-915998665010.png)

1. 線の上にマウスをホバーすると、0..1:Nなどの数が表示されます
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/08f7dddf-6954-4da0-b2b9-aafb9d781d62.png)

# 考察
実際に dbdiagram.io を試してみて、軽くて、速く使えることが魅力でした。
今後、業務にも利用してみたいと思いました。


# 参考
https://dbdiagram.io/home

https://docs.dbdiagram.io/

https://dbml.dbdiagram.io/docs/
Celery のタスクのデバッグ

Celery のタスクは celery.contrib.rdb を使用することでリモートデバッグすることができる。


# Celery のプログラム例
## celery 起動
```python:celery_app.py
from celery import Celery

celery_app = Celery(__name__,
                    broker='amqp://localhost:5672//',
                    include=['tasks'] # tasks.py を指定
                    )
```

## task 処理
```python:tasks.py
import sys
import time
from celery import shared_task

@shared_task(
    bind=True
)
def task_add(self, num1, num2):
    print(f"{self}")
    time.sleep(1.0)
    ret = num1 + num2
    print(f"task_add: {num1} + {num2} = {ret}")
    return ret
```

## task 処理にブレークポイント設定
tasks.py のタスク処理部に celery.contrib.rdb の rdb.set_trace() を埋め込み、ブレークポイントを設定する。
```python:tasks.py
import sys
import time
from celery import shared_task
from celery.contrib import rdb # 追加

@shared_task(
    bind=True
)
def task_add(self, num1, num2):
    rdb.set_trace() # 追加
    print(f"{self}")
    time.sleep(1.0)
    ret = num1 + num2
    print(f"task_add: {num1} + {num2} = {ret}")
    return ret
```


# Celery コマンドの実行
```bash
celery -A celery_app worker -Q calc --pool=solo
```

キューにタスクを積むと以下のようなリモートデバッグ用のポート番号が出力される。
```
Remote Debugger:6899: Ready to connect: telnet 127.0.0.1 6899
```
※ポート番号は実行環境によって異なるかもしれない。


# リモートデバッグ
別ターミナルで以下を実行すると、リモートデバッグができるようになる。
```
telnet 127.0.0.1 6899
```

以下、デバッグ例。
※l でリストを表示、n で次の行へ、c で次のブレークポイントまで実行
```python:
> .../celery/rdb/tasks.py(17)task_add()
-> print(f"{self}")
(Pdb) l
 12     @shared_task(
 13         bind=True
 14     )
 15     def task_add(self, num1, num2):
 16         rdb.set_trace()
 17  ->     print(f"{self}")
 18         time.sleep(1.0)
 19         ret = num1 + num2
 20         print(f"task_add: {num1} + {num2} = {ret}")
 21         return ret
 22
(Pdb) n
<@task: tasks.task_add of celery_app at 0x7fe5ebbe2f30>
> .../celery/rdb/tasks.py(18)task_add()
-> time.sleep(1.0)
(Pdb) n
> .../celery/rdb/tasks.py(19)task_add()
-> ret = num1 + num2
(Pdb) n
> .../celery/rdb/tasks.py(20)task_add()
-> print(f"task_add: {num1} + {num2} = {ret}")
(Pdb) ret
5
(Pdb) n
task_add: 2 + 3 = 5
> .../celery/rdb/tasks.py(21)task_add()
-> return ret
(Pdb) c
Connection closed by foreign host.
```
ダイソーボイスライトを魔改造

熊のスマートライト。これを改造して少し大きなライトをコントロールします。
![IMG_20250622_152107.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/d8db5547-d422-43f0-9dbc-17b1f8503dd1.jpeg)
￥300です。


![IMG_20250622_152117.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/d4b09309-843d-45a0-b7d5-ded969edc9a3.jpeg)

取扱説明書。


![IMG_20250622_152139.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/bc7d32c8-4741-4630-b47e-b160fb2b4897.jpeg)

分解します。

![IMG_20250622_152322.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/a0ee6bc0-f832-4964-ada1-003a069764c2.jpeg)

こんな感じでした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/5553105e-fb0e-4157-9e26-542d50395f32.png)

R3を取り外し
![IMG_20250622_153431.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/e23850a4-1184-47c1-a957-7796aefc8015.jpeg)


LED2を取り外して

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/a2bd47d0-6e23-4403-8955-3e186f76b07d.png)


R2をこのように移動します。

![IMG_20250622_154618.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/dbdd36b7-1d61-4c51-aa64-7a6b4442d0e1.jpeg)





![IMG_20250622_154629.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/0f836d25-699c-4101-afb9-c66f792d04cb.jpeg)
![IMG_20250622_154637.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/0d0aa46b-bcf9-47e1-986e-366cc15e4947.jpeg)



![IMG_20250622_154637.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/54cdf957-7b11-4600-9f7d-c65c23de915c.jpeg)
配線。![IMG_20250622_154230.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/00e45f57-e781-4c73-8ffc-b24b3489be0b.jpeg)


![IMG_20250622_154021.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/a5207eda-05ae-4cce-9a91-c609b2daa463.jpeg)


コントロールするライトの裏蓋を取り外します

![IMG_20250622_144706.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/ad026b81-f235-43ba-88f7-2e7217d7dddf.jpeg)

中身。




![IMG_20250622_144745.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/f8594fdd-176e-4a09-b8c2-707852907bb2.jpeg)

切り欠きを作ります。

![IMG_20250622_152420.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/59f44e88-9403-4c52-bbfb-8940d8cbdb7e.jpeg)


このように配線し直して完成。


![IMG_20250622_154230.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/70d5f1ac-7024-4752-bdbd-3625c7f00d2a.jpeg)
ReactとVue、結局どっちが"賢い"の？仮想DOMの中身から考えてみた

# React / Vue の「仮想DOMの仕組み」と「設計思想の違い」をざっくり整理する

フロントエンドの文脈でよく出てくる「仮想DOM」という言葉。  
ReactもVueも使っているけど、「結局どう違うの？」と思うことはないでしょうか。

この記事では、**仮想DOM が生まれた背景と、React/Vue の考え方の違い**を整理してみました。


## DOM と 仮想DOM の関係

DOM は JavaScript の DOM APIで更新します。  
ただし、**画面への描画はすぐには行われず、ブラウザが次のフレーム（約16ms間隔）でまとめてバッチ処理されます**。


※ DOMってそもそも何？という方はこちらの記事も参考になるかもしれません → 

https://qiita.com/megumi_i/items/23ea2aa596faf057447c

```js
function changeColor(newColor) {
  const elem = document.getElementById("para");
  elem.style.color = newColor;
}
```
このように変更しても、すぐに画面が再描画されるわけではなく、内部的に「次のタイミングで処理しよう」とキューに積まれます。

### DOMの欠点
- 差分がなくてもとりあえず全部処理される
- 操作コストが高く、パフォーマンス面で不利

この欠点を補うために登場したのが **仮想DOM（Virtual DOM）** です。


## 仮想DOMとは？

仮想DOMは、**「画面の状態」をメモリ上に再現しておき、差分だけを本物のDOMに反映する仕組み**です。

たとえば、カウンタボタンを押したとき：

1. 変更前の仮想DOMを保存しておく  
2. 新しい仮想DOMを構築  
3. 前後の差分（diff）を比較し、必要な部分だけ本物のDOMに反映  

この仕組みにより、DOM 操作の負担を最小限に抑えられます。


## React の設計思想

- UI は「状態に対する関数」として設計する
- 状態変更（＝再描画）を明示的に制御する
- 一方向データフローにより副作用を減らす

```js
const [count, setCount] = useState(0);
```
`setCount()` の呼び出しによって、新しい仮想DOMが構築され、前の状態との差分がレンダリングされます。

React は「すべてを一度再実行して差分を取る」というスタンスで、
**「冪等で速ければ何度実行してもいい」** という思想に立っています。

## Vue の設計思想

- UI・ロジック・スタイルを1ファイルにまとめて管理しやすく
- `ref` や `reactive` によって状態の変化を追跡
- 依存関係を自動的に記録して、必要な箇所だけ再描画

```js
const count = ref(0);
```

Vueは状態の追跡を **Proxy によって自動的に行う** ため、仮想DOMを更新する対象を最初から絞ることができます。

「そもそも全部比較するのは無駄」という発想です。


## 仮想DOMの更新効率は？

| 比較項目           | React                           | Vue                               |
|--------------------|----------------------------------|------------------------------------|
| 差分抽出方法       | 全体を再構築 → 差分を比較       | 変更箇所を事前に検知して差分       |
| 自動追跡           | なし（useStateなど明示）        | あり（Proxyベース）                |
| 処理効率           | 実装が単純で予測可能             | 効率は高いが、仕組みが複雑になりやすい |

Vue の方が効率的に見えますが、その分ロジックは複雑になっています。
どちらが優れているかは一概に言えず、「実装のシンプルさ」「学習コスト」「拡張性」など、開発者体験全体を含めて選ぶべきポイントです。


## 状態を変えても画面が変わらない場合

ReactもVueも、「状態が変わった」とライブラリに伝えないと描画は更新されません。

- Reactで`useState`を使わなかった場合
- Vueで`ref`や`reactive`を使わなかった場合

内部の値は変わっても、画面は変わりません。  
**状態変更の通知が「仮想DOM更新」のトリガー**です。


## まとめ：React / Vue の設計思想比較

| 観点             | React                              | Vue                                       |
|------------------|------------------------------------|--------------------------------------------|
| UIの捉え方       | 状態に対する関数                   | UI・ロジック・スタイルの統合              |
| 状態管理         | 明示的（Hook）で制御               | 自動追跡（ref / reactive）                |
| 描画の定義       | JSXベースのロジック主導            | template中心の構造主導                    |
| 学習スタイル     | 自由に組み合わせる                 | 最初から整ったフレームワーク              |
| エコシステム     | 状態管理やルーティングは選定自由   | 公式エコシステムが豊富で統一感がある      |


## おわりに

仮想DOMはどちらのライブラリでも中心的な仕組みですが、**「何を重視しているか」によってその使い方や設計方針が異なります。**

- **状態とUIの関係を純粋に保ちたい → React**
- **わかりやすさや統一感を重視したい → Vue**

自分に合ったスタイルや、プロジェクトの要求に応じて選べると良いですね。
DynamoDBローカルでDocker Voulumeを使おうとしてちょっとハマった話

# はじめに
最近、チャットアプリの自宅運用の環境整備を粛々と進めています。

チャットアプリは、フロント（Next.js）、バックエンド（Spring-Boot）、DB（DynamoDBローカル）の構成。

当初、DynamoDBローカルは、以下公式のdocker-compose.yml を使って起動していました。

https://docs.aws.amazon.com/ja_jp/amazondynamodb/latest/developerguide/DynamoDBLocal.DownloadingAndRunning.html

上記だと、データが格納されるファイル「shared-local-instance.db」が、docker-compose.yaml直下の「docker\dynamodb」に作られる。

そうすると、GITコミット時、邪魔になりました。（※ ignoreすれば良いだけなんですけどね。）

そこで、Docker Voulume を使おう！って思い、以下のように書き換えて、ハマったことを残します。

# 書き換えた内容
Docker Voulumeを使うように変更
```
～ 中略 ～
    volumes:
      - dynamodb_data:/home/dynamodblocal/data
～ 中略 ～
volumes: 
  dynamodb_data:

```

# ハマったこと
Dockerを起動して、NoSQL Workbenchから接続しようとすると、エラーになる。

```
WARNING: [sqlite] cannot open DB[2]: com.almworks.sqlite4java.SQLiteException: [14] unable to open database file
```

なに、ファイルが開けない？だと？

# 調べてみたところ

以下のスタックトレースに辿り着く。

https://stackoverflow.com/questions/45850688/unable-to-open-local-dynamodb-database-file-after-power-outage

# 原因
起動したDynamoDBのコンテナ内に入り、idコマンドを実行してみると。ふむふむ、1000(dynamodblocal) か。

```
sh-5.2$ id
uid=1000(dynamodblocal) gid=1000(dynamodblocal) groups=1000(dynamodblocal)
```
99%一緒だと思いつつ、DynamoDBを起動しているユーザを見たいけど、psコマンドが無い。
Geminiに相談して、以下の手順で確認し、やはり、1000(dynamodblocal)。

```
sh-5.2$ ls /proc | grep -E '^[0-9]+$' ★ プロセス確認
1
60
71
72
sh-5.2$ cat /proc/1/cmdline ★ プロセスが実行しているコマンド
java-jarDynamoDBLocal.jar-sharedDb-dbPath./datash-5.2$ 
sh-5.2$ cat /proc/1/status ★ プロセスの詳細
Name:   java
Umask:  0022
～ 中略 ～
Uid:    1000    1000    1000    1000
Gid:    1000    1000    1000    1000
FDSize: 256
～ 中略 ～
sh-5.2$ 

```

で、「shared-local-instance.db」が格納されている「data」フォルダの権限を見てみると。
「root」。しかも「drwxr-xr-x」なので所有者以外は、書き込みができない。

```
sh-5.2$ ls -latr
total 9588
～ 中略 ～
drwxr-xr-x 2 root          root            12288 Dec 23 11:33 DynamoDBLocal_lib
-rw-r--r-- 1 root          root          9720377 Dec 23 11:33 DynamoDBLocal.jar
drwxr-xr-x 1 root          root             4096 Dec 23 11:59 ..
drwxr-xr-x 2 root          root             4096 Jun 22 00:29 data
drwx------ 1 dynamodblocal dynamodblocal    4096 Jun 22 01:28 .
-rw-r--r-- 1 dynamodblocal dynamodblocal      83 Jun 22 01:28 dynamodb-local-metadata.json
sh-5.2$  
```

# 原因のサマリ
Docker Volumeのディレクトリは、rootが所有で権限も所有者しか書き込めない。
ただ、DynamoDBローカルは、dynamodblocalユーザで起動しているので書き込み権限が無かったと。

# 一旦の対処法
起動ユーザをrootユーザに変えました。
よくないですが、自宅のローカルということで。
「user: root」で起動ユーザをrootに変更。

本来であれば「data」フォルダの所有者、権限を変更するのが良いと思いました。
（そのうち変えるかもです。）

```
  db:
    container_name: hc-dynamodb-db
    command: "-jar DynamoDBLocal.jar -sharedDb -dbPath ./data"
    image: "amazon/dynamodb-local:latest"
    ports:
      - "18000:8000"
    restart: always
    user: root ★ 追加
    volumes:
      - dynamodb_data:/home/dynamodblocal/data
    working_dir: /home/dynamodblocal
    networks:
      - home_network
```
SQSとLambda構成の時のLambdaが同時実行の制限で起動に失敗したときの検証

# 初めに
LambdaとSQSの構成の時に、Lambdaが同時実行の制限で実行不可の場合について検証します。

# 検証
■ SQSの設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/893794/81fdf544-0846-4aab-835f-8e1080c5a1ca.png)

■ デッドレターキューの設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/893794/7b0300fc-73ae-4e1b-acb8-bd7c54d4f491.png)

上記のSQSの設定にしております。これで、Lambdaの方の同時実行数の予約を0で実行してみます。
自分は当初パターン2の動作になるのではないのかなと思っていました。つまり、Lambdaが起動できない場合はSQSにメッセージが滞留してLambdaが起動できるまで再試行を繰り返すということです。

● パターン1
**メッセージ送信 ➡ Lambda起動 ➡ 失敗 ➡ 5分経過 ➡ Lambda再起動 ➡ 失敗 ➡ DLQ移動**

● パターン2
**メッセージ送信 ➡ Lambda起動 ➡ 失敗 ➡ 5分経過 ➡ Lambda再起動 ➡ 失敗 ➡ Lambda再始動 ➡ 失敗 ➡ ...**

# 検証結果
■ ApproximateAgeOfOldestMessageのメトリクス
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/893794/223e7d4c-217f-4124-bf97-5ea909c26e1b.png)
■ NumberOfMessagesReceivedのメトリクス
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/893794/3547424f-7dda-4f6b-be79-2c00e169ace5.png)


この検証を開始したのは、15:23(JST)です。UTCでは06:23となります。
ApproximateAgeOfOldestMessageは、横軸が時間で縦軸がメッセージがの存在していた秒数になっております。06:23~-06:33までが0秒以外となっております。このことから、06:33までメッセージが存在していました。
NumberOfMessagesReceivedは、06:23と06:28のタイミングで山になっています。このことから5分おきにReciveMessageアクションを呼び出していることがわかります。つまり、初回のReciveMessageで失敗した後、可視性タイムアウトの待機を経てもう一度呼び出されております。

※ ApproximateAgeOfOldestMessegeやNumberOfMessagesRecivedは参考の「Amazon SQS で利用可能な CloudWatchメトリクス」に記載されています

# 結果
今回の検証から、Lambda の同時実行数が 0 に制限されている（＝スロットリング状態）場合でも、SQS はメッセージを 可視性タイムアウト後に再配送し続けるということが分かりました。
これにより、最大受信回数（maxReceiveCount） を超えるとメッセージは DLQ に送られます。
したがって、本番環境では以下のような対応が重要になります：
* Lambda の処理時間短縮（タイムアウト・処理速度改善）
* 同時実行数制限の緩和（ReservedConcurrentExecutions）やクォータの増加申請
* maxReceiveCount や DLQ の設定見直し（再試行回数が適切か）

これらにより、スロットリングによるメッセージの損失や遅延を防ぐことができると思います。

# 参考

> Amazon SQS で利用可能な CloudWatchメトリクス
> https://docs.aws.amazon.com/ja_jp/AWSSimpleQueueService/latest/SQSDeveloperGuide/sqs-available-cloudwatch-metrics.html
WolframAlpha形式とMarkdown（LaTeX）と微分積分学




指示文：

次の関数を式として正確に書き起こしてください。また、その式をWolframAlpha形式とMarkdown（LaTeX）形式の両方で出力してください。さらに、この関数をどのように解析するか、その手順や計算方法についても調べたうえで、わかりやすく解説してください。

⸻

https://ja.wolframalpha.com/input?i=%E2%88%AB%281%2F%28x%28log+x%29%5E2%29%29dx

\[
V = \iiint_{x^2 + y^2 + z^2 \leq R^2} 1 \, dx\,dy\,dz
\]
格子点



Paizaの「格子点」の最大積を求める問題に挑戦！

初めは動けばいいやと無駄な計算が多かったけど、問題文の条件を利用して、無駄を削減できた！

<br>

# 問題概要

- x + y < 100
- x³ + y³ < 100000

この2つの条件を満たす組み合わせの中で、x × y の最大値を求めよ。

※ x + y < 100 の制限で調べる候補は約4,300通り。全ての組を調べても実行時間制限に間に合う。

<br>

https://paiza.jp/works/mondai/double_roop_problems/double_roop_problems__grid_point

<br><br>

# △OK例：
```js
let max = -Infinity;

for (let x = 1; x <= 98; x++){
    
    for (let y = 1; y <= 98; y++){
        
        if (x ** 3 + y ** 3 < 100000){
            const temp = x * y;
            
            if (temp > max){
                max = temp;
            }
        }
    }
    
}
```
でも、内側のループに無駄な計算が見られる…

<br><br>

# ✅ OK例
```js
let max = -Infinity;

for (let x = 1; x <= 98; x++){
    
    for (let y = 1; x + y < 100; y++){
        
        if (x ** 3 + y ** 3 < 100000){
            const temp = x * y;
            
            if (temp > max) max = temp;
        }
    }
}


console.log(max);console.log(max);
```

内側ループの条件に `x + y < 100` を入れて、明らかに条件を満たさない `y` を調べる無駄をカット！

結果は変わらないのに処理はずっとスリム✨

<br><br>

# 🗒️ 気づきメモ & まとめ

- 二重ループは外側・内側のループ条件で検索範囲を工夫できる
- 問題の条件をループの範囲に反映するだけで効率アップ！
- 最初は動けばOK。でも次は「どうやって早く？」を考えてみる


<br><br><br>[僕の失敗談(´;ω;｀)と解決法🐈](https://paizabeginner.wordpress.com/2025/06/22/paiza%e3%81%a7%e5%9f%ba%e6%9c%ac%e3%83%9e%e3%82%b9%e3%82%bf%e3%83%bc%ef%bc%9a%e6%a0%bc%e5%ad%90%e7%82%b9/)
プロデル、調査 その51

# 概要
プロデルが、CLRらしいので、調べて見た。
IronPythonプラグイン、やってみた。

# 参考にしたページ

https://produ.irelang.jp/downloads/plugins.html


# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/5393c4fd-463c-492b-801e-5605c27b0719.png)

# サンプルコード

```
「Produire.IronPython.dll」を利用する。

ニシキヘビに「「l = [1, 3, 5, 2, 5]
max(l)」」を食わせる。
それを報告する。




```

以上。
ABC411回答メモ

# 0.はじめに
　徐々にレートが上がってきている今日この頃。
　いつの間にか21時になっており、慌てて参加登録しつつ参戦。
　A~Cは楽に解けたものの、DはてこずりTLE連発。
　久々に何回も提出したりあがきましたが、結局時間切れ。
　解説をみて解いてもなかなかTLEが解けませんでしたが
　最終的には何とかなりました。
　レートは+4の740とまた微増でした。


# 1. A - Required Length
　Pの長さを求め、Lと比較し
　L以上ならYes、未満ならNoを出力して終了

　https://atcoder.jp/contests/abc411/submissions/66931468


# 2.B - Distance Table
　最近ややこしいことが多いB問題
　Dをもとに、駅の位置を表すリストLを作成
　リストLをもとに、駅１から駅２～駅N
　駅２から駅３～駅Nとそれぞれの位置の差を求めて
　リスト化して出力して終了

　https://atcoder.jp/contests/abc411/submissions/66937802


# 3.C - Black Intervals
　素直に実装すると時間切れになるので工夫。
　以下のパターン毎の条件により、ブロック数が変化するので
　変化に従いブロック数を増減させ、最終的に出力して終了。

　【考え方】
　　変更するマスとその両脇のマスの状態によりブロック数が増減する
　　変更マス　　　両脇のブロック　ブロック数
　　白→黒　　　　共に白　　　　　+1
　　白→黒　　　　共に黒　　　　　-1
　　白→黒　　　　白と黒　　　　　±0
　　黒→白　　　　共に白　　　　　-1
　　黒→白　　　　共に黒　　　　　+1
　　黒→白　　　　白と黒　　　　　±0

　https://atcoder.jp/contests/abc411/submissions/66946706


# 4.D - Conflict 2
　単純に実装したら時間切れになるだろうから、
　いろいろ工夫。
　　・追加文字列を辞書管理し、各サーバごとの文字列は辞書のキーである数値で保持
　　・サーバとPCの置き換えまで別表に追加文字列を保持して後で計算
　いずれも決定打にならず、時間内には解決しませんでした。

　コンテスト後、解説をみると後ろから逆算する方式があげられており
　試してみましたが、微妙にTLえ。
　追加文字列をリストで保持しつつ、joinで結合して
　前後を入れ替えるという方式でACとなりました。

　+＝による文字列結合が意外と負荷がかかると学びました。

　https://atcoder.jp/contests/abc411/submissions/66984981


以上
【Windows】PHPのSAPIとThreadSafeの選び方


今日の記事はすごくAIくさい！
久々に Windows に `PHP` を入れることがあったのだが、すっかり忘れていたので整理した。

https://windows.php.net/download/

## 結論

先に結論を置いておく。（あくまでも基本的には）

| Webサーバー | 使うPHP |
| :-- | :-- |
| CLI | CLI + NTS |
| IIS | FastCGI + NTS |
| Apache | module + ZTS |
| nginx | PHP-FPM + NTS |

今何を使ってるかの判定はこちらで。

```bash
$ asdf -v
asdf version v0.18.0 (revision 2114f1e)

$ php -v
PHP 8.4.8 (cli) (built: Jun 12 2025 20:46:14) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.4.8, Copyright (c) Zend Technologies

$ php -i | grep "Thread Safety"
Thread Safety => disabled
```

普通に入れると `cli` の `NTS` になるみたい。



## PHP の種類

実は PHP には大きく分けて3種類あるらしいよ。
`SAPI` は `Server API` っていう概念みたい。

### 【CLI】 コマンドラインで実行するもの

普通に PHP コマンドを実行するときのもの。


### 【モジュール】 直接 Web サーバーのモジュールとして実行するモード

PHP は、Webサーバーと一緒に使うことが多い。
その時、Webサーバーの内部に、モジュール、プラグイン形式で搭載して利用するもの。

Webサーバー内部で実行されるため、とても高速。
だがセッション数の制限やセキュリティ面の問題もあり、若干すたれてきている。

Apache でよく使われる。


### 【CGI】 CGI や FastCGI を利用して実行するモード

`CGI` は `Common Gateway Interface` の略。
Webサーバー内部の処理を別のプロセスに分離しようというもの。
こうすることで、Webサーバーとは別のユーザーでプログラムを実行できたりと、良い点が多い。

ただリクエストごとにPHPのプロセスを立ち上げて、とするとボトルネックになる。
そこでベースを常にメモリ上に展開して管理しようとしたのが `FastCGI`。
プロセスやリソースの管理をまとめてやってくれる。

PHP では `FPM` という `FastCGI Process Manager` が使われている。
nginx でよく使われる。



## PHP のビルド種別

PHPにはもう一個種類がある。
それが `NTS` と `ZTS` のスレッド対応の区別だ。

- NTS: Non Thread Safe
- ZTS: Zend Thread Safe

スレッドセーフとは、複数のスレッド（処理）が互いに独立していて、互いに影響を与えないという意味。
つまりあるリクエスト処理中に、ほかのリクエストにの処理をしても大丈夫ということ。

この二つは好きなほうを使ってよさそうで、そうではない。

例えば `Apache` サーバーの場合、リクエストの処理は Webサーバーと同じプロセスで処理されるため、スレッドセーフである必要がある。
一方CGIを利用する場合、リクエストごとにPHPを立ち上げるので、スレッドセーフの必要がないです。

つまり、利用する環境に合わせて選択する必要があります。

> そういえば Apache PHP が主流だったとき、新生の nginx に乗り換えようと思ったら PHP が動かなかった記憶が。。。
ホットリロード vs. ライブリロード：開発効率を高める2つのリロード機能の違いを徹底解説 🔄💡

:::note info | message
「ホットリロード」と「ライブリロード」は、どちらも開発中の効率を上げるための便利な機能ですが、その仕組みと影響範囲には明確な違いがあります。簡単に言うと、ホットリロードは「部分的な更新」を目指し、ライブリロードは「完全な再読み込み」を行う点が大きな違いです。
:::

### ホットリロード vs. ライブリロード：違いを徹底解説 🔍

| 特徴       | ホットリロード (Hot Reload)                               | ライブリロード (Live Reload)                                  |
| :--------- | :-------------------------------------------------------- | :------------------------------------------------------------ |
| **目的** | アプリケーションの状態を維持しながら、変更されたコードのみを更新する。 | コード変更時にアプリケーション全体を再読み込みする。            |
| **仕組み** | 変更されたモジュールを特定し、その部分だけをメモリ内で置き換える (HMRなど)。 | コードの変更を検知したら、ブラウザやアプリを完全に再起動/再読み込みする。 |
| **速度** | 非常に高速。部分的な更新のため、瞬時に変更が反映される。          | やや遅い。アプリ全体の初期化、バンドル、起動プロセスが伴う。      |
| **状態維持** | **状態が維持される** ことが多い。UIの状態（入力値、スクロール位置など）がリセットされない。 | **状態がリセットされる。** アプリが完全に再起動されるため、現在の状態は失われる。 |
| **適用範囲** | JavaScript/UIロジックの変更に最適。ネイティブコードの変更には不向き。 | JavaScript、CSS、HTML、ネイティブコードなど、あらゆる変更に対応。 |
| **代表例** | React Native (Fast Refresh), Webpack HMR, Vue.js (Vite, Vue CLI) | Webpack Dev Server, Gulp/Gruntのwatch機能, Electron開発など。ほとんどのフレームワークで標準機能として提供。 |
| **利点** | 開発のイテレーションが極めて速い。ストレスなくUIの変更を確認できる。 | あらゆる種類の変更を確実に反映できる。セットアップが比較的簡単。    |
| **欠点** | 根本的な変更（例: ルートコンポーネントの変更、ネイティブモジュールの追加）には対応できない場合がある。 | 状態がリセットされるため、特定の状態に到達するために再度操作が必要になることがある。 |

---

### それぞれの動作イメージ 🎬

#### 1. ホットリロード (Hot Reload) 🔥

ホットリロードは、コードを変更してもアプリケーション全体を再起動せず、変更された部分だけを「温かいまま」更新するイメージです。

例えば、チャットアプリケーションでメッセージを入力中に、別のファイルでボタンの色を変更したとします。

1.  あなたがボタンの色を赤から青にコードを変更して保存します。
2.  ホットリロードシステム（Metro BundlerのHMRなど）が変更を検知します。
3.  変更されたボタンのコンポーネントだけが、アプリケーションのメモリ内で新しいコードに置き換えられます。
4.  チャットの入力欄に打っていたメッセージは消えずにそのまま残ったまま、ボタンの色だけがすぐに青に変わります。

これは、まるで飛行機が飛んでいる最中に、エンジンの一部だけを交換するような高度な技術です。✈️

#### 2. ライブリロード (Live Reload) 🔄

ライブリロードは、コードを変更すると、アプリケーション（ブラウザやモバイルアプリ）全体を「冷たい状態から」完全に再読み込みするイメージです。

先ほどのチャットアプリケーションの例で、あなたがボタンの色を変更して保存したとします。

1.  あなたがボタンの色を赤から青にコードを変更して保存します。
2.  ライブリロードシステムが変更を検知します。
3.  アプリケーションが完全に閉じられ、最初から起動し直されます。
4.  その結果、チャットの入力欄に打っていたメッセージは消え、アプリが初期状態に戻ります。しかし、ボタンの色は確実に青になっています。

これは、車のタイヤを交換する際に、一度車全体を停止させるような感じです。🚗

---

### なぜ両方存在するのか？ 🧐

それぞれの機能にはメリット・デメリットがあり、開発のフェーズや目的によって使い分けられます。

* **ホットリロード (HMR/Fast Refresh)**: 主にUIやロジックの微調整、スタイルの変更など、迅速なフィードバックが欲しい場合に威力を発揮します。開発のイテレーション速度を最大化します。
* **ライブリロード**: ネイティブコードの変更（React Nativeの場合）、アプリケーションの起動フローの確認、またはホットリロードでうまく反映されない稀なケースなど、アプリケーションの「クリーンな」状態での動作確認が必要な場合に便利です。

React Nativeでは、通常 `react-native start` を実行するとFast Refresh (HMRベース) がデフォルトで有効になります。もしFast Refreshで変更が反映されない場合や、ネイティブコードの変更があった場合は、開発サーバーを再起動したり、Xcode/Android Studioからクリーンビルドを行うことでライブリロードに相当する完全なリロードを行います。

これでホットリロードとライブリロードの違いがクリアになったでしょうか？ 🤩
Laravelで検索機能を作成する

Laravelを使用してキーワード検索ページを作成した。

## 具体的な機能

入力されたキーワードによって検索を行う機能。
今回は本のタイトルと作者名で検索できるものを作成。

## テーブル構成

```sql
Table: books
Create Table: CREATE TABLE `books` (
  `id` bigint unsigned NOT NULL AUTO_INCREMENT,
  `title` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,//本のタイトル
  `author` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,//作者名
  〜
```

## コード

#### bladeファイル（検索フォーム）

```php
<form method="GET" action="{{ route('books.index') }}" class="mb-4">
    <input type="text" name="keyword" placeholder="書籍名・作者名を入力" 
    class="form-control mb-2">
    <button type="submit" class="btn btn-primary">検索</button>
</form>
```

actionによりフォームの送信先（検索結果を表示するページ先）を設定。
placeholderは検索ボックスに薄く表示される文字。

#### モデル

```php
public function scopeSearch($query, $keyword)
{
    if (!empty($keyword)) {
        $query->where('title', 'like', "%{$keyword}%")
              ->orWhere('author', 'like', "%{$keyword}%");
    }
    return $query;
}

```

スコープで作成しており、メソッドの名前を**scope + 大文字で始まる文字**でメソッド名をつけている。（このように書かなければLaravelはスコープだと認識してくれない）

スコープを使うことで、検索条件をモデル側に集約でき、コントローラーのコードを簡潔に保つことができる。

!empty($keyword)はキーワードが空ではないときに動くという意味。
titleやauthorはデータベースのカラム名のこと。
likeは部分一致検索。likeを外すと完全一致検索になる。

余談としてこの検索文をSQLに置き換えると

```sql
WHERE title LIKE '%キーワード%' OR author LIKE '%キーワード%'
```

となる。

#### コントローラー

```php
public function index(Request $request)
{
    $keyword = $request->input('keyword');
    $books = Book::search($keyword)->get();

    return view('books.index', [
        'books' => $books,
        'keyword' => $keyword
    ]);
}
```

$request->input('keyword');はフォームから送られてきたkeywordパラメータ（name属性に対応する値）のこと。
スコープをBook::searchで呼び出して使用している。
最終的にビューに返すことで、検索結果を表示できる。
Azure database for postgresql でCOPYコマンドの利用



Azure database for PostgreSQLは、サーバー管理者のスーパーユーザー権限を与えないマネージドPaaSデータベースサーバーです

psqlクライアントをインストールして、以下の感じで実行できます。
\COPY test_table FROM 'C:/testtable.csv' DELIMITERS ',' CSV QUOTE '''';


出典：https://techcommunity.microsoft.com/blog/adforpostgresql/using-copy-command-in-azure-database-for-postgresql/805801