OmniAICreator/Qiita-1.07M huggingface dataset:
Ubuntu 20.04/22.04対応：USキーボードで日本語入力を切り替える設定方法

WindowsでUS配列キーボードを使っていると、**CapsLockキー**で**日本語入力のオンオフ切り替え**に慣れてしまう。そこで、Ubuntuを使う歳でも同様の設定を行いたい。
何回やっても忘れてしまうので、ここにメモしてく


ここでは、

- `xremap` を使って`CapsLockキー`を`Henkan（変換）キー`へ割当て
- `Henkan（変換）キー` で日本語入力を切り替えるMozcの設定

を手順付きで紹介します。

---

## 1. `xremap` を使って`CapsLockキー`を`Henkan（変換）キー`へ割当て

### ステップ①： Cargoのインストール

```bash
sudo apt install cargo
```
インストール後、以下で確認：
```bash
cargo -V
```

### ステップ②： xremapのインストール

```bash
sudo cargo install xremap
```
実行ファイルは /root/.cargo/bin/ に配置されるため、フルパスで実行します。
インストール後、以下で確認：
```bash
sudo /root/.cargo/bin/xremap -V
```

### ステップ③： キーシンボルを調べる(Option)
```bash
xev
```
実行後シンボルを確認したいキーを押す

- CapsLock → キーコード：66
  66 - 8 = 58 

[evdevのscancodes一覧](https://github.com/xkbcommon/libxkbcommon/blob/master/test/evdev-scancodes.h) によると：

58 → CAPSLOCK

### ステップ④： 設定ファイルの作成（xremap.yml）

ホームディレクトリに以下の内容で xremap.yml を作成します：
```bash
touch ~/xremap.yml
```

xremap.yml の中身を以下の通り編集します：

```yaml
keymap:
  - name: Swap CapsLock and Zenkaku_Hankaku
    remap:
      CapsLock: Henkan
```

### ステップ⑤： xremapを起動

```bash
sudo /root/.cargo/bin/xremap xremap.yml
```
GUIで接続機器が読み込まれれば成功です。

※ターミナルを閉じてもxremapを持続させるにはnohupを使用します。
```bash
nohup sudo /root/.cargo/bin/xremap xremap.yml &
```

### ステップ⑥： 自動起動設定（.bashrcに登録）
```bash
echo "nohup sudo /root/.cargo/bin/xremap \$HOME/xremap.yml &" >> ~/.bashrc
```
.bashrcへの登録により、次回ログイン時から自動で有効になります。

## 2. `Henkan（変換）キー` で日本語入力を切り替えるMozcの設定

### ステップ①： Mozcの設定を開く
   `ツール → プロパティ → 一般タブ → キー設定の選択` を「編集」

### ステップ②： 「Mozcキー設定」画面で `編集 → エントリーを追加`

### ステップ③： 以下のように2つのエントリーを追加する：

| モード       | 入力キー | コマンド       |
|--------------|----------|----------------|
| 直接入力     | Henkan   | IME を有効化   |
| 入力文字なし | Henkan   | IME を無効化   |

---

上記設定で、`Henkan（変換）キー` で日本語入力を切り替えることができるようになります。
Next.jsでGemini APIを動かす最小限のセットアップ

# はじめに
個人開発しているアプリに生成AIを使いたかったのでGemini APIを動かしてみました。

# 早速やる
大まかな手順は以下になります
1.  API Keyの作成
1.  実装
    - Next.jsのセットアップ
    - API Keyの設定
    - API実装
    - UI実装
1.  動作確認


## 1. API Keyの作成
こちらのページから作成できます 

https://ai.google.dev/gemini-api/docs/api-key?hl=ja
## 2. 実装
### Next.jsのセットアップ
以下のコマンドを使ってNext.jsをインストールしてください。インストール時に色々質問されますが今回は動かすのが目的なので適当で大丈夫です。
```
npx create-next-app@latest
```
https://nextjs.org/docs/app/getting-started/installation

### API Keyの設定
ルートに.env.localファイルを作成して取得したAPI Keyを置きます。
```.env.local
GEMINI_API_KEY=取得したKey
```

### APIの実装
Next.jsのroute hundlersを使ってapiを作ります。app/api/gemini-api/route.tsを作成してください。ちなみに多くの記事では@google/generative-aiが使われていましたが、今回は最新の@google/genaiをインストールしました。(プレビュー版みたいですが)
```ts
import { GoogleGenAI } from "@google/genai";
import { NextResponse } from "next/server";

export async function POST(req: Request) {
    const { prompt_post } = await req.json();
    const ai = new GoogleGenAI({apiKey: process.env.GEMINI_API_KEY});

    const response = await ai.models.generateContent({
        model: "gemini-2.0-flash",
        contents: prompt_post,
      });
      
    return NextResponse.json({
        response: response.text,
    });
}
```
コードは以下のドキュメントを参考にしました

https://ai.google.dev/gemini-api/docs/migrate?hl=ja#generate-content

### UI実装
入力したプロンプトをAPIに渡してAIの回答を取得・表示しています。
```tsx
'use client';

import { useState } from 'react';

export default function GeminiTest() {
  const [prompt, setPrompt] = useState('');
  const [response, setResponse] = useState('');

  const handleClick = async () => {
    const res = await fetch('/api/gemini-api', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ prompt_post: prompt }),
    });
    const data = await res.json();
    setResponse(data.response);
  };

  return (
    <div>
      <input
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)}
        placeholder="プロンプトを入力"
      />
      <button onClick={handleClick}>送信</button>
      <p>{response}</p>
    </div>
  );
}

```

## 3. 動作確認

良さそうです😊

![スクリーンショット 2025-05-03 9.34.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3279945/cc5fd10c-b0d9-47a1-915d-2c96e0a5bea5.png)


# 終わりに
取り急ぎ動かしただけでまだモデルや料金について把握できてないので色々調べてみようと思います。

# 参考

https://ai.google.dev/gemini-api/docs?hl=ja
MacのJISキー配列でもUSキー配列と同じようなoptionキーの移動ができるようになりたい

# 概要
Macのキーボード配列で訳あってUSキー配列とJISキー配列の2台持ちしているのですが、キーボードの配列の違いはなんとか許容できるにしてもUSキー配列で使用しているoptionキーの挙動とJISキー配列でのoptionキーの挙動が違い、いつも苦しんでいます

何かしらの方法で解消できないかを調べてみた記事になります

# そもそもなぜこのようなことが起こるのか？
chatGPTが言うには以下のような違いがそれぞれのキーボード配列であるそうです

> USキー配列
→ 英語テキストを基本に作られているので、Option + バックスペースとかOption + 矢印で単語単位（word単位）できれいに区切って削除・移動できる。
（単語と単語の間に空白があって、記号もルール通りだから処理しやすい）
>
> JISキー配列
→ 日本語テキストでは単語の区切りが明確じゃない（空白を入れないし、助詞とかも続く）ので、macOS側が「たぶんこのへんかな」ってかなり緩く推測して動かしてる。

つまりJISキー配列でもUSキー配列のような設定にできればなんとかなりそうですね

# やってみる

キーボード設定をいじるには、以下の2種類の方法があるそうです

| 方法 | 難易度 | 特徴 |
| :---: | :---: | :---: |
| Karabiner-Elementsを使う | 低〜中 | 安全に、細かく自由に設定できる。おすすめ。 |
| IME設定ファイルをいじる | 高 | もっと深いレベルでカスタム可能。でもリスクあり。 |

今回はリスク取らずにやってみたいので`Karabiner-Elements`を使ってみます

1. Karabiner-Elementsのダウンロード
    [Karabiner-Elements公式ダウンロードページ](https://karabiner-elements.pqrs.org/)からdmgをダウンロードして、インストールします
    使用しているOSバージョンに合わせたものをダウンロードしましょう

1. アプリケーションの起動・設定
    インストールしたアプリケーションを起動すると以下のようなものが表示されると思います
    今回はJIS配列なのでJISを選択
    バックグラウンドで実行する権限が必要なので、「Agents」と「Daemons」を許可しておきましょう
    ![スクリーンショット 2025-04-26 18.37.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/701238/33d69366-6074-4350-9a25-09393b6dfc67.png)

    「karabiner_grabber」というものも許可が必要なので、そちらも許可しましょう
    「ドライブ拡張機能」にもKarabiner~~~というのがあるので、そちらも許可します

    全ての設定が満たされると以下のような画面になります
    ![スクリーンショット 2025-04-26 18.45.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/701238/54924f84-c61f-4721-bc75-599840b62b97.png)

1. 設定を変更してみる
    アプリ画面上から設定することも可能ですがjsonファイルで設定することも可能なので、そちらで進めていきます
    以下は「option + delete」の挙動を英語と同じ単語削除の挙動を強制すると
    
    ```json
    {
      "title": "Fix Option+Delete for Japanese Input",
      "rules": [
        {
          "description": "Make Option+Delete behave like word delete even when typing Japanese",
          "manipulators": [
            {
              "type": "basic",
              "from": {
                "key_code": "delete_or_backspace",
                "modifiers": {
                  "mandatory": ["option"]
                }
              },
              "to": [
                {
                  "key_code": "delete_or_backspace",
                  "modifiers": ["option"]
                }
              ],
              "conditions": [
                {
                  "type": "input_source_if",
                  "input_sources": [
                    {
                      "language": "ja"
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
    ```

そして再起動して試してみましょう

いかがでしたか？
残念ながら自分の環境ではoptionキーを押しながら移動しても挙動が変わらず、***やりたいことはできませんでした***

# おわりに
残念なことに本来やりたいことはできませんでしたが、Karabiner-Elementsというものに出会うことはできました

やはり世の中にはいろいろカスタマイズしたいと思う人がたくさんいるんだなと実感しました

ちなみにQiita上のエディタやVScodeでは日本語の「optionキー＋カーソル移動」が単語ごとに移動してくれませんでしたが、chatGPTの入力欄ではなぜか日本語でも単語ごとに区切って移動してくれました

もしかするとキーボード配列関係なしでQiitaのエディタとかが良くなかったのかもしれません
自動ID取得

```
#!/bin/bash

###===============================
### 1. 変数定義
###===============================

LIST_FILE="$1"
ORACLE_USER="sysmngra"
ORACLE_CMD="sqlplus -s / as sysdba"

###===============================
### 2. 関数定義
###===============================

# hh:mm:ss [user@host ~]# を表示
prompt() {
    local now
    now=$(date +%H:%M:%S)
    echo "${now} [$(whoami)@$(hostname) ~]#"
}

# Oracle SQL を su 経由で1つずつ実行（空行・コメント行スキップ）
run_oracle_sql() {
    while IFS= read -r line; do
        [[ -z "$line" || "$line" =~ ^# ]] && continue

        sql="${line%;}"

        for _ in {1..3}; do
            prompt
        done

        echo "$(prompt) echo \"${sql};\" | su - ${ORACLE_USER} -c \"${ORACLE_CMD}\""

        echo "
SET MARKUP CSV ON
${sql};
EXIT
" | su - "${ORACLE_USER}" -c "${ORACLE_CMD}"

    done < "${LIST_FILE}"
}

# RHELコマンドを1つずつ実行（空行・コメント行スキップ）
run_rhel_commands() {
    while IFS= read -r line; do
        [[ -z "$line" || "$line" =~ ^# ]] && continue

        for _ in {1..3}; do
            prompt
        done

        echo "$(prompt) ${line}"
        bash -c "${line}"
    done < "${LIST_FILE}"
}

###===============================
### 3. メイン処理
###===============================

main() {
    if [[ $# -ne 1 ]]; then
        echo "使い方: $0 <コマンドリストファイル（.lst）>"
        exit 1
    fi

    if [[ ! -f "$LIST_FILE" ]]; then
        echo "エラー: ファイルが存在しません → $LIST_FILE"
        exit 1
    fi

    local MODE=""
    case "$LIST_FILE" in
        *Oracle*|*oracle*)
            MODE="oracle"
            ;;
        *RHEL*|*rhel*)
            MODE="rhel"
            ;;
        *)
            echo "不明なモード: ファイル名に 'Oracle' または 'RHEL' を含めてください"
            exit 2
            ;;
    esac

    case "$MODE" in
        oracle)
            run_oracle_sql
            ;;
        rhel)
            run_rhel_commands
            ;;
    esac
}

main "$@"
```
統計検定2級 区間推定

## はじめに
今回は区間推定に関して学びます

## 🔍 区間推定ってなに？

区間推定とは、「母集団の値（平均や割合など）」を1つの数（点推定）ではなく、**ある範囲（区間）**として推定する方法です。

> 例：支持率は **54% ± 5%（95%信頼区間）**

これは、「真の支持率は49%〜59%の間にあると95%の信頼で言える」という意味です。

---

## 📊 よく使う区間推定（比率の場合）

例：100人に調査して、54人が「はい」と回答

- 標本比率：  
  54 ÷ 100 = **0.54**

- 標準誤差（SE）：  
  √(0.54 × 0.46 ÷ 100) ≒ **0.049**

- 信頼係数（95%）：  
  **1.96**

- 信頼区間：  
  0.54 ± 1.96 × 0.049 ≒ 0.54 ± 0.096

つまり、**0.444〜0.636** の間に真の比率があると考えられます。

---
:::note info
標準誤差は「たまたま選んだ標本が、どれくらい母集団の値とズレる可能性があるか」を数値で表したもの
:::


## ✅ ポイントまとめ

- 区間推定：範囲で「母集団の値」を推測する方法
- 信頼区間：その範囲に「真の値」が含まれる確率が高い
- 95%信頼区間なら「100回中95回はその範囲に入る」イメージ

---

## 問

```python:
import numpy as np
import matplotlib.pyplot as plt
import seaborn as sns
import math
from scipy.stats import norm

# フォント設定（日本語対応）
plt.rcParams['font.family'] = 'IPAexGothic'

# 例題：アンケート結果
# 120人中、72人が「はい」と回答したとする（＝60%）
n = 120
x = 72
p_hat = x / n  # 標本比率

# 標準誤差の計算
se = math.sqrt(p_hat * (1 - p_hat) / n)

# 95%信頼区間のz値
z = norm.ppf(0.975)  # ≒1.96

# 信頼区間の計算
lower = p_hat - z * se
upper = p_hat + z * se

# 結果出力
print("標本比率 (p̂):", round(p_hat, 3))
print("標準誤差 (SE):", round(se, 3))
print("95%信頼区間: ({:.3f}, {:.3f})".format(lower, upper))
```

```shell:
標本比率 (p̂): 0.6
標準誤差 (SE): 0.045
95%信頼区間: (0.512, 0.688)
```
vscode 1.99以降は古いLinuxに接続できない

## 2025年3月以降のVS codeがリリースされ、古いLinuxのバージョンが合わずに、そのままでは接続できない場合がある。

私の場合は、ラズパイOS（Raspberry Pi OS）バージョン10（コード名：Buster）を使っている。古いLinuxに該当するらしい。

### VS code のバージョンを調べる
VSCode を開く。メニュー 「ヘルプ」 → 「バージョン情報」 を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189936/f2e705c4-7672-43be-be91-a22730614476.png)


### バージョン1.99以降は古いラズパイOSに繋がらない。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189936/45fd634a-56c1-4630-b826-36965a22e9e6.png)

バージョン1.99以降でも古いLinuxにアクセスするにはSSH接続する対象のLinux側OSで、glibcの再構築など回避策はある。しかし古いLinuxのまま使いたいので、そんなときは仕方がないので 2025年2月のバージョン1.98 の VS code ［v 1.98］をインストールする。VS codeは自動で最新バージョンにアップデートしようとするので後述の更新を停止する設定も必要だ。

最新のVScode（v1.99以降）と古いLinuxで使えるVScode（v1.98.2）の２つのバージョンをひとつのWindows PCで使う方法がある。ポータブル版（Zipファイル）を２つの異なるディレクトリに解凍して Code.exe を実行する。

VScode（v1.98.2, Windows x64版）はここからZipファイルをダウンロードする
[https://update.code.visualstudio.com/1.98.2/win32-x64-archive/stable](https://update.code.visualstudio.com/1.98.2/win32-x64-archive/stable)

最新VScode（Windows x64版）のZipファイルはここからダウンロードする
[https://code.visualstudio.com/download#](https://code.visualstudio.com/download#)

例えばこんなディレクトリにそれぞれのZipファイルを解凍する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189936/55edd3e4-6428-4dde-9837-b39962fbbb8d.png)

解凍されたディレクトリの code.exe を実行する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189936/4ed7582c-257c-4199-bd79-94b5a197a924.png)


## バージョン1.98なら古いLinuxにもつながった

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189936/182a5443-0cb6-4a6f-be4c-cd898226a93e.png)

VS Codeが自動でアップグレードされないようにする。タイミング間違うとv1.99以降の最新バージョンになってしまうので、v1.98をインストール後すぐに設定した方がいい。

歯車⚙️アイコンの［設定］を選び、検索モードで update:mode で検索。［none］を選び、更新を無効化する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189936/b87682b8-2317-4fd7-9798-35989ba42ebb.png)

以上
統計検定2級 不偏推定量と一致推定量について学ぶ

## はじめに
統計検定2級の勉強をしていきます！今回は不偏推定量と一致推定量について学びます。

## 不偏推定量と一致推定量

### 不偏推定量（Unbiased Estimator）

標本をいくつか抽出して、繰り返し試行回数を重ねて平均を取ると、概ね正しいだろうという考え方。

- 推定量の期待値が母数と等しい推定量。
- 数式イメージ：`E[θ̂] = θ`
- 例：標本平均 `X̄` は母平均 `μ` の不偏推定量。

📌 平均的に「正しい」推定。

---

### 一致推定量（Consistent Estimator）

- 標本サイズが無限に大きくなると、推定量が母数に近づく推定量。
- 数式イメージ：`θ̂ₙ → θ`
- 例：標本平均 `X̄` は母平均 `μ` の一致推定量。

📌 データが増えると「正しくなる」推定。


|              | 不偏推定量           | 一致推定量             |
|--------------|----------------------|------------------------|
| 意味         | 平均して正しい        | データが増えると正しい  |
| 数式イメージ | `E[θ̂] = θ`          | `θ̂ₙ → θ`              |
| 使い分け     | 小さい標本で使いたい  | 大量データで信頼性高い |

:::note info
なんとなくイメージできますね。少ないサンプル数で100回試行し、その平均を取ったら大体全体の平均や分散に一致する。これが不偏推定量。
試行回数は1回だけど、めちゃくちゃ量のあるサンプル数でやったら全体の値と一致しそうだよねってことか。
:::


## 問題とコーディング
### 問題1：標本分散の不偏性を確認しよう

母集団が正規分布 N(10, 2^2) に従っているとする。
この母集団から1000回、サイズn=5の標本を抽出し、
	•	不偏分散（分母n-1）
	•	偏った分散（分母n）
を計算して、それぞれの平均を比較せよ。


```python:
import matplotlib.pyplot as plt
import seaborn as sns
import numpy as np

# フォント設定（日本語対応）
plt.rcParams['font.family'] = 'IPAexGothic'

# データ準備（母平均10, 母標準偏差2, n=5 の標本を1000回）
mu = 10
sigma = 2
n = 5
trials = 1000
np.random.seed(42)

biased_vars = []
unbiased_vars = []

for _ in range(trials):
    sample = np.random.normal(loc=mu, scale=sigma, size=n)
    biased_vars.append(np.var(sample, ddof=0))   # 分母n（偏った分散）
    unbiased_vars.append(np.var(sample, ddof=1)) # 分母n-1（不偏分散）

# ✅ 追加：平均と分散を表示
print("【偏った分散（nで割る）】")
print("平均:", np.mean(biased_vars))
print("分散:", np.var(biased_vars))

print("\n【不偏分散（n-1で割る）】")
print("平均:", np.mean(unbiased_vars))
print("分散:", np.var(unbiased_vars))
```


```shell:実行結果
【偏った分散（nで割る）】
平均: 3.175349423561768
分散: 4.884463578914159

【不偏分散（n-1で割る）】
平均: 3.9691867794522095
分散: 7.63197434205337
```

:::note alert
結局何でn-1で割るの？というのはちょっとよくわからない。
自由度の考え方が入ってくるようだが、一旦置いておくとしよう。とりあえず、
不偏分散はn-1で悪らしい
:::

## 問２
母平均 μ = 10, 標準偏差 σ = 2 の正規分布から、n = 5 の標本を1000回抽出し、標本平均の分布を見る。

・平均値（標本平均の平均）
・標本平均のばらつき（分散）
を求めて、母平均（10）に近づくかどうかを確認せよ。


```python:
import numpy as np
import matplotlib.pyplot as plt
import seaborn as sns

# フォント設定（日本語対応）
plt.rcParams['font.family'] = 'IPAexGothic'

# パラメータ
mu = 10
sigma = 2
n = 5
trials = 1000
np.random.seed(42)

# 標本平均を1000回計算
sample_means = []
for _ in range(trials):
    sample = np.random.normal(mu, sigma, n)
    sample_means.append(np.mean(sample))

# 結果の統計値
mean_of_means = np.mean(sample_means)
var_of_means = np.var(sample_means)

print("【標本平均】")
print("平均:", mean_of_means)
print("分散:", var_of_means)

# 可視化
plt.figure(figsize=(10, 5))
sns.histplot(sample_means, kde=True, color="green", label="標本平均の分布")
plt.axvline(mu, color="red", linestyle="--", label="母平均（10）")
plt.axvline(mean_of_means, color="blue", linestyle="-.", label=f"標本平均の平均（{mean_of_means:.3f}）")

plt.title("標本平均の分布と母平均との比較")
plt.xlabel("標本平均")
plt.ylabel("度数")
plt.legend()
plt.grid(True)
plt.show()
```
```shell:
【標本平均】
平均: 10.011203860175145
分散: 0.7957443957868626
```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/907dce78-6fb4-4c98-a264-dedae88262fa.png)
Pythonをアップデートしたら、ライブラリが無くなってしまったので引き継ぎしようとした話

## Pythonをアップデートした。
趣味でPythonで開発している私。

「そういえば、Pythonのアップデートってしていないな。やっぱり最新版のPythonにした方が「Pythonの最先端をいっているって感じがするよな」

Pythonの公式サイトからインストーラーをダウンロードしてバージョンアップした。私が使っているのが12で、最新は13だった。たぶん、13というのだからメジャーアップデートというやつだね。

バージョンアップ出来ているか確認する。

```
$ python3 --version
Python 3.13.3
```
最新のPythonを手に入れたぜ！
## pip3 listの結果が真っ白に…
インストールしたライブラリを「pip3 list」で取得した。

```
$ pip3 list
>>Package Version
------- -------
pip     25.0.1
```

あれ？ これまでインストールしたライブラリが出てこないぞ？ ここまでpyinstallerだとか、fletだとか、beautifulsoup4だとか色んなライブラリを「pip3 install」してきたのに…

恐らく、Python12とPython13とでライブラリが入っているフォルダ的な何かが違うっぽいのだ。アプリフォルダをみるとPython12とPython13があるし。

VSCodeで過去に開発したファイルを開くと、インストールしたライブラリを使うコードに波線が引かれていた。「そんなものは定義されていないよ！」というタイプの注意喚起をされている。

またゼロからインストールし直さなければいけないのか？ これまで一体いくつのライブラリをインストールしたのか覚えていない。これを全てやる必要があるということか？

## ChatGPTに相談だ！
調べても出てこなかったのでChatGPTに相談をしてみたところ、「旧環境のライブラリをリスト化し、新環境にインストールする」ということがいいらしい。

旧環境のライブラリのリストを取得するコマンドを打ってみた。しかし、エラーになってしまった。

```
$ python12 -m pip install -r requirements.txt
>>zsh: command not found: python12
```

「Python12」のところがよくないっぽい、ちゃんと細かいバージョンまで書かないといけないらしい。

ChatGPTが再提案してくれたコマンドを打って中身を確認する。

```
$ ls /usr/local/bin | grep python
>>python3
python3-config
python3-intel64
python3.12
python3.12-config
python3.12-intel64
python3.13
python3.13-config
python3.13-intel64
python3.13t
python3.13t-config
python3.13t-intel64
python3t
python3t-config
python3t-intel64
```

この結果から、「python12」ではなく「Python3.12」でとるのが正解っぽいことが分かる。

```
$ python3.12 -m pip freeze > requirements.txt
```

このコマンドでようやく取得できた。requirements.txtはカレントディレクトリに出力された。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205578/2072c17e-2e08-4df5-89ff-669ccc39d82a.png)

あとは、これをアップデートしたPython13に移すだけ。

```
$ python3.13 -m pip3 install -r requirements.txt
```

やってみたら、ライブラリのバージョンがPython13では対応していなかったり別の対応が必要だったりと、まぁまぁ面倒だった。1つでも不可だと、みんなズっこけるんですね。。。

これなら、最初から手動でインストールすればよかった。

1つ1つ対応するのは面倒になってきたので、結局、Python13を削除し、Python12に戻しましたとさ。ちゃんちゃん。
【学習】JavaScriptで簡単！Webカメラの映像をページに表示する方法

## はじめに

簡単なミニアプリ作成にあたり、Webカメラの実装にチャレンジしました。正直「すごく難しいんだろうな。。不安」でしたが、参考記事の力もあり無事にできました。
今回はそんな実装の流れを簡単にまとめたいと思います。
プラス、未経験エンジニアのわーちゃんが、「〇〇でもわかる！」を目指してコードの意味をかみ砕いてみました。

## メインで使用する技術・参考記事
**メディアキャプチャとストリーム API (メディアストリーム)**
というものを使用します。

https://developer.mozilla.org/ja/docs/Web/API/Media_Capture_and_Streams_API/Taking_still_photos

https://qiita.com/4245Ryomt/items/ab7869e2f0608741e7ff

https://reffect.co.jp/html/javascript-webcamera


### あくまで例

```.smile.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webカメラテスト</title>
</head>
<body>
    <h1>Webカメラの映像</h1>
    <video id="userVideo" autoplay></video>

    <script src="smilescript.js"></script>
</body>
</html>
```

```.smilescript.js
document.addEventListener("DOMContentLoaded", () => {
    startCamera();
});

// カメラを起動する関数
function startCamera() {
    const userVideo = document.getElementById("userVideo");

    // カメラの映像を取得
    navigator.mediaDevices.getUserMedia({ video: true, audio: false })
        .then((stream) => {
            userVideo.srcObject = stream; // 映像を video タグに表示
        })
        .catch((error) => {
            console.error("カメラの起動に失敗しました:", error);
        });
}
```

:one: `document.addEventListener("DOMContentLoaded", () => { ... })`
ページの読込が完了したら{}内のコードを実行

:two:カメラを起動する関数 `startCamera()`
カメラ映像を映す `<video>` タグ (`id="userVideo"`) を取得
 `video: true, audio: false`  では、
✅ `video: true` → 映像を取得
✅ `audio: false` → 音声は取得しない（不要ならオフにすることで、余計な権限を求めない）


:three: `navigator.mediaDevices.getUserMedia`
読取専用プロパティ。詳しくは下記サイト参照

https://developer.mozilla.org/ja/docs/Web/API/Navigator/mediaDevices



:four: `.then((stream) => { ... })` は、カメラの映像が取得できたときに実行する処理
`stream` は **カメラから送られてくる映像データ**
`userVideo.srcObject = stream;` → 取得した映像を `<video>` タグにセット    
※「カメラの映像データ (`stream`) を `<video>` に流し込む」というイメージ

:five:`catch()` は「失敗したときの処理」
カメラが使えない場合（例: 許可しなかった、カメラが接続されていない） に `catch()` の中の処理が実行
`error` には「なぜ失敗したのか？」というエラーメッセージが入る。


:six: `autoplay`について
`autoplay` は` <video> `タグ に指定する属性で、ページを開いたときや動画が読み込まれたときに、自動的に再生を開始する ためのもの。
ですが、以下サイトのメモには次のようなことが記載されているので使用の際には一度確認することをお勧めします。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/video

> 現行のブラウザーでは、音声（またはミュートされていない音声トラック付きの動画）が自動再生されないように設定されています。これは、自動的に音声が再生されるサイトはユーザーにとって不快な体験になり得るからです。正しい自動再生の使い方についての追加情報は autoplay ガイドを参照してください。



## さいごに
最近、実装に挑戦するとき「不安」な気持ちが先行してしまうことがよくあります。
でも、毎回不安を感じていると **「倒せる敵も倒せない！」（ゲーム感覚）** ことに気づきました。
攻略したその先には **「新しい技術」「さらなる強敵」** が待っている。
だからこそ、これからもいろんな技術に挑戦していきます！
この記事が少しでも参考になれば嬉しいです✨
【PostgreSQL】pgAdminとODBCドライバのインストール手順(Windows)

タイトルの通り、pgAdmin 4とODBCドライバのインストール手順です。 
ググればすぐ出てきそうなのに、意外とそのまま使える手順が見つからず、仕方がないので、自分で書きました。 

なんというか、わざわざ記事にするほどの手順でもないのですが、別記事で初心者向も使用する前提の手順書を作成しており、そこから参照させるためと、あとはまあ、メモも兼ねて。 

# 1. pgAdminのインストール
以下のページからWindows用のpgAdminの最新のインストーラーをダウンロードします。
本記事の記載時点(2025/05/02)では、v9.3が最新バージョンでした。

https://www.pgadmin.org/download/pgadmin-4-windows/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/944269/19f79b47-8e36-4520-8bd3-d1bff2d06d3f.png)

インストーラ(pgadmin4-X.X-x64.exe)をダウンロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/944269/6fc87fa7-fdd0-44d8-9a7f-c69b56e40cfc.png)

ダウンロードしたexeを実行します。 
Select Setup Install Mode画面が起動するので「Install for me only」をクリックします。 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/944269/24453000-a3b3-44c4-af72-40b9592fd397.png)

Welcome画面が起動するので「Next」をクリックします。 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/944269/8599bde3-cd12-4be6-ba5b-48c8e1762427.png)

License Agreement画面が起動するので、内容を確認したうえで、「I accept the agreement」を選択して「Next」をクリックします。 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/944269/8141abf7-eaa9-4d3b-8e15-7a778816dc72.png)


Select Destination Location画面が起動するので「Next」をクリックします。 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/944269/84a5faf0-4ca0-4ed0-83b3-ad54233940e8.png)

Select Start Menu Folder画面が起動するので「Next」をクリックします。 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/944269/9aaec305-b3a6-47d5-93d7-b7551b47e769.png)

Ready to Install画面が起動するので「Install」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/944269/4c5ee76d-2ea9-4b20-b8ee-63e97570f56b.png)


インストール処理が実行されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/944269/b5492554-ac6d-464c-9c0a-a39e1dc68cea.png)

Completing the pgAdmin 4 Setup画面が表示されるので「Finish」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/944269/a8abb000-0325-4d1d-81f8-7824803bf209.png)

# 2. ODBCドライバのインストール
以下のページから最新のドライバをダウンロードします。
本記事の記載時点(2025/05/01)では、17_00_0004が最新でした。 
なお、手順は通常版を前提に記載しますが、mimalloc版でも同様な気がします。 

https://www.postgresql.org/ftp/odbc/releases/

File Browserページ。最新のドライバをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/944269/309ab061-b6af-4218-95ef-a895ce160b51.png)

psqldobc-setup.exeをクリックし、ダウンロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/944269/cc68d885-8602-452f-9d12-14562a563f96.png)

ダウンロードしたexeをダブルクリックし、インストール画面を起動します。 
psqlodbc Setup画面が起動するので、ライセンス条件を確認し問題が無ければ「I agree to the license terms and conditions」にチェックを入れ「Install」をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/944269/aa95cc76-483d-4c3a-950d-b18620d212af.png)

Installation Successfully COmpletedが表示されるので「Close」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/944269/f2fba74a-a210-4d95-bf05-531cd0debd56.png)
オブジェクトの特定のプロパティ以外を全て取り出す方法

分割代入と残余引数を使えば、オブジェクトから「特定のプロパティ以外」を全て取り出すことができます。

```TypeScript
const profile = {
  id: 1,
  name: "hoge",
  age: 30,
  gender: "man",
  height: 165,
  weight: 55,
  bloodType: "O"
}

const {id, ...newProfile} = profile;
console.log(newProfile);
// {"name": "hoge", "age": 30, "gender": "man", "height": 165, "weight": 55, "bloodType": "O"} 
```

上の例では、オブジェクトprofileからidを分割代入で取り出し、それ以外のプロパティは残余引数を使ってnewProfileで取り出しています。

Reactでは、「propsの特定のプロパティ以外をそのまま別のコンポーネントに渡す」ときなんかに使えます。

以下の例では、HogeButtonコンポーネントにpropsでbuttonName、onClick、disabledを渡しています。

HogeButtonコンポーネントではbuttonNameを分割代入で取り出し、それ以外は残余引数でhogeButtonPropsとして取り出しています。

そして、Buttonコンポーネントに対してbuttonNameを渡し、それ以外はhogeButtonPropsをスプレッド構文で展開して渡しています。

```React
"use client"

import HogeButton from "@/components/HogeButton";

export default function Home() {
  return (
    <HogeButton
      buttonName="hoge"
      onClick={() => {
        alert("hoge");
      }}
      disabled={false}
    />
  );
}
```

```React
import { ButtonHTMLAttributes } from "react";
import Button from "./Button";

type HogeButton = {
  buttonName: string;
} & ButtonHTMLAttributes<HTMLButtonElement>;

const HogeButton = (props: HogeButton) => {
  const { buttonName, ...hogeButtonProps } = props;
  return <Button buttonName={buttonName} {...hogeButtonProps} />;
};

export default HogeButton;
```

```React
import { ButtonHTMLAttributes } from "react";

type Button = { buttonName: string } & ButtonHTMLAttributes<HTMLButtonElement>;

const Button = (props: Button) => {
  const { buttonName, ...buttonProps } = props;
  return <button {...buttonProps}>{buttonName}</button>;
};

export default Button;

```
React Hook Formのregisterをコンポーネントのpropsに渡す方法

Controllerを使用せずにコンポーネントに対してReact Hook Formのregisterを渡したいことがあったのでメモ。

```React
"use client";
import Text from "@/components/Text";
import { useForm } from "react-hook-form";

type SampleForm = {
  sampleText: string;
};

export default function Home() {
  const { register, handleSubmit, watch } = useForm<SampleForm>();

  const sampleText = watch("sampleText");
  console.log(sampleText);

  const onSubmit = (data: SampleForm) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Text label="サンプルインプット" register={register("sampleText")} />
      <button type="submit">Submit</button>
    </form>
  );
}
```

```React
import { InputHTMLAttributes } from "react";
import { UseFormRegisterReturn } from "react-hook-form";

type InputProps = InputHTMLAttributes<HTMLInputElement> & {
  label: string;
  register: UseFormRegisterReturn;
};

const Text = ({ label, register, ...otherProps }: InputProps) => {
  return (
    <div>
      <label>{label}</label>
      <input {...register} {...otherProps} />
    </div>
  );
};

export default Text;

```
CodeIQ:「デジタルタブー」問題

Kawazoe(@riverplus)さんのCodeIQの問題です。問題と解説がこちらにあります。
->http://paranoiactoadstool.blog.fc2.com/blog-entry-437.html
自然数を0,3,6,9を含まない数字で表すと10^7はどうあらわされるかという問題です。
「妙な（？）数列の一般項」と同じ問題です。
 テストケースは裏 RjpWikiさんに御世話になりましたがリンク切れてしまいました。
場所が変わっていたけれど見つかりました。（2025.5.3追加）
->https://sangaku0418.hatenablog.com/entry/2014/11/26/000903

6進数で作っておいて後で変換するのがが簡単です。
0がなくその代わりに6がありますので、例えば6進数の2000は1556と表されます。
そこで桁上がりの調節に毎桁ごとに1を~~て~~引いて割り剰余に1を足しました。
（表の横縦に1から始まる番号をつけるのと同じです）
そのあとリストの値と変換します。

```Julia
#julia ver 1.41,1.53,1.10.3

function solve(n,a)
    x,y,k = n,0,0
    ar=[1,2,4,5,7,8]
    while x > 0
        x,r = divrem(x-1,6)
        r = ar[r+1]
        y += r * 10^k
        k +=1
    end
    s = a == y ? "ok " : "no "
    println(s,y)
end

solve(30,58)
solve(10^7, 775178155)
solve(10^6,44244455)
solve(10^5, 1858755)
solve(10^4, 115155)
solve(10^3, 5455)
solve(10^2, 255)
solve(3333, 24244)
```

```Prolog
%SWI-Prolog ver 7.42,7.64,9.25
%:-initialization(start).   %ideone,Online Prolog Compiler
%start.

change(X,R):-L=[1,2,4,5,7,8],nth1(X,L,R).

lostx(_,_,_,0,R,R):-!.
lostx(B,L,N,X,Y,R):-
   X1 is X-1,divmod(X1,B,D,M),M1 is M+1,nth1(M1,L,M2),
   Y1 is Y+M2*10^N,N1 is N+1,lostx(B,L,N1,D,Y1,R).

solve(N,R):-L=[1,2,4,5,7,8],lostx(6,L,0,N,0,R).

start:-f(N,A),(solve(N,R)->(R==A->Str=" ok  ";Str=" no  ");
    write(fail)),write(" "),write(Str),writeln(N->R),fail.
start.

f(30,58).
f(10^7, 775178155).
f(10^6,44244455).
f(10^5, 1858755).
f(10^4, 115155).
f(10^3, 5455).
f(10^2, 255).
f(3333, 24244).
```
クレジットカード決済の仕組み

## 2種類のスキーム
クレジットカード決済には4パーティスキームと3パーティスキームがある。
### 関係する用語 

| 用語 | 英語 | 説明 |
|------|------|------|
| 利用者 |Cardholder | クレジットカードを利用する消費者 |
| 加盟店 |Merchant | クレジットカード決済を受け付ける店舗やサービス提供者 |
| イシュアー |Issuer | クレジットカードを発行する金融機関（銀行・カード会社） |
| アクワイアラー |Acquirer | 加盟店と契約をする加盟店契約会社 |
| ブランド会社 |Card Network | Visa、Mastercard、American Express など、決済ネットワークを提供する企業 |
| 決済ネットワーク |Payment Network | カード会社や金融機関を接続し、取引を処理する仕組み |
| インターチェンジフィー |Interchange Fee | アクワイアラーがイシュアーへ支払う取引手数料 |
| 加盟店手数料 |Merchant Discount Rate | 加盟店が決済処理の対価として支払う手数料 |
| ネットワーク手数料 |Network Fee | ブランド会社が決済ネットワークの提供に対して徴収する手数料 |
| 3パーティスキーム |Three-Party Scheme | カード会社がイシュアー兼アクワイアラーとして機能（例：American Express） |
| 4パーティスキーム |Four-Party Scheme | イシュアーとアクワイアラーが独立し、ブランド会社が決済ネットワークを提供（例：Visa、Mastercard） |

### 4パーティスキーム
- 利用者・加盟店・イシュアー（カード発行会社）・アクワイアラー（加盟店契約会社）の4つの主体が関与
- 国際ブランド（Visa、Mastercardなど）が決済ネットワークを提供
- イシュアーとアクワイアラーが別の会社  

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4077009/0383eea2-159f-4d1d-95ac-34397b3ca86f.png)

### 3パーティスキーム  
- カード会社がイシュアー（カード発行会社）とアクワイアラー（加盟店契約会社）を兼ねる
- カード会社が直接カードを発行し、加盟店契約も管理する
- イシュアーとアクワイアラー間の手数料（インターチェンジフィー）が発生しない
- ブランド会社がカード会社と密接な関係にある
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4077009/d6a4e3eb-c17c-4315-8634-fca411e2959a.png)
## 初投稿の感想
まとめるって思っていたより難しい・・。  
私の理解不足で誤りがあるかもしれませんので、優しく(笑)ご指摘いただけたらと思います
## 参考文献
- **書籍名**: 『決済サービスとキャッシュレス社会の本質』
- **著者**: 宮居 雅宣
- **出版社**: きんざい
- **URL**: [Amazonリンク](https://www.amazon.co.jp/%E6%B1%BA%E6%B8%88%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%81%A8%E3%82%AD%E3%83%A3%E3%83%83%E3%82%B7%E3%83%A5%E3%83%AC%E3%82%B9%E7%A4%BE%E4%BC%9A%E3%81%AE%E6%9C%AC%E8%B3%AA-%E5%AE%AE%E5%B1%85-%E9%9B%85%E5%AE%A3/dp/4322135528)
[Solved] 現在 Qiita で問題が発生しており見出しが正常に表示できなくなっています

## この記事の内容

2025/5/1 から、Qiita でリンクを含む見出しが正常に表示できなくなっています。

:::note info

2025/5/7 に 5/1 のリリースはキャンセルされ、表示崩れが起きない修正リリースが 5/15 に実行されました。 🎉

[問題を修正し、再度リリースしました。](https://qiita.com/release-notes/2025-05-01)

[本件につきまして、見出しの読み上げのアクセシビリティ改善を含め対応が完了したためご報告させていただきます 🙇](https://github.com/increments/qiita-discussions/discussions/984#discussioncomment-13057571)

:::

例えばこの記事の見出し「Qiita で記事を書いてみよう」は、リンク以外は同じですが、片方は表示が崩れています。

目次ではどちらも正常に表示されています。

![What happens in Qiita](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566576/19448b0e-1413-4a9f-a7e9-3577647ad3ad.png)

### [Qiita](https://qiita.com/) で記事を書いてみよう

上記見出しは以下のように書かれています。

```
### [Qiita](https://qiita.com/) で記事を書いてみよう
```

### Qiita で記事を書いてみよう

上記見出しは以下のように書かれています。

```
### Qiita で記事を書いてみよう
```
WSLでAppDataの消費量を調べる。

# WSLでWindowsのAppDataを調べてみた
Windows11でエクスプローラーを開いて自分のドキュメントフォルダを開き、端末で開くを選ぶとWSL環境下でドキュメントフォルダが見えると思いきや・・・
WSLのホームフォルダが開かれる・・・
ポンコツOSすぎ・・・
仕方がないので /mnt/c/Users/...でWindowsのユーザードキュメントフォルダを開く

# WSLではWindowsの不可視属性フォルダへのアクセスが簡単
WSLのbash環境下ではWindowsの不可視ファイルやフォルダは丸見えになる。
そこで、ユーザードキュメントフォルダに移動してどのくらいAppDataフォルダがディスク容量を食っているかを調べてみるために du コマンドを実行してみる。

# 結果に大笑い
cd AppData
でAppDataフォルダに移動
du .
を実行・・・

![G01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529369/41fabf62-3bc2-44bc-b5d2-68c463e8c67f.png)

え！無限ってか？
そんなに浪費しているのを隠したいのかと思ってしまった・・・
(WinForms) 超乱暴！Designer.csのイベントバインドコードを一掃する方法

## はじめに
本記事では、WinFormsの `Designer.cs` ファイルに自動生成されるコントロールのイベントバインドコードを一括で削除する**超乱暴な**方法を紹介します。  
※**危険ですので、必ず自己責任でご利用ください。**

## 手順
1. Visual Studioで対象の `.Designer.cs` ファイルを開く
1. 「検索と置換」ウィンドウを開く（Ctrl+H）
1. 「正規表現を使用（.*アイコン）」を有効にする
1. 検索文字列を「^.*\+=.*\r?\n?」に、置換文字列は「」(空欄)にする
1. **スコープを「現在のドキュメント」にする** 

## 補足
`+=` を含む行が削除されます。  
一般的に「+=」はイベントバインドに使われることが多いですが、他の用途にも使われる可能性があるので注意が必要です。誤って他の重要なコードを消さぬよう、実行前には十分な確認とバックアップを行ってください。

## おわりに
この方法はとても手荒で強引なので、実行は慎重に。  
**必ず事前に `Designer.cs` のバックアップを取ってから実行してください。**
個人的備忘録：Gitでmainを取得→新ブランチ作成→pushまでの一連の流れについて

## はじめに

Gitを使ったブランチ操作の基本的な手順について、今回の作業内容をもとに個人的な備忘録として整理します。

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

主に、mainブランチの取得と新しい作業ブランチの作成に関する流れを、自分への復習を兼ねてまとめています。

## 書こうと思ったきっかけ

受講しているITスクールのハッカソンの開発の一環で、チームでのGit運用において基本操作を忘れないように、また今後同じような作業をスムーズに進められるように、自分への復習を込めて備忘録としてまとめています。

## 内容

### mainブランチの取得と切り替え

まず、作業の起点としてmainブランチに切り替え、最新の状態を取得することが推奨されます。

```bash
git checkout main
git pull origin main
```

### ステージング中の変更がある場合の一時退避

もし作業途中でステージング中の変更がある場合は、一時的に退避することでブランチ切り替えがスムーズになります。

```bash
git stash
```

その後、ブランチ切り替えと最新の取得を行います。

```bash
git checkout main
git pull origin main
```

退避していた作業を戻す場合：

```bash
git stash pop
```

### 新しい作業ブランチの作成と反映

mainブランチから新しい作業ブランチを作成して、変更内容をコミット・プッシュします。

```bash
git checkout -b admin-ui-refactor

git add .
git commit -m "管理画面UIのナビゲーション削除と各リンク修正"
git push origin admin-ui-refactor
```

### ブランチ名の例

| ブランチ名                 | 意味             |
| --------------------- | -------------- |
| admin-ui-refactor     | 管理画面のUI整理      |
| feature/sidebar-links | サイドバーのリンク処理に特化 |
| fix/admin-navigation  | ナビゲーション周りの修正   |

## まとめ

Gitでのブランチ操作はチーム開発において基本かつ重要なスキルです。

:::note warn
***mainブランチの最新状態を取得した上で新しい作業ブランチを作成する手順をきちんと理解しておくことで、トラブルの防止につながります。***
:::

今後の作業時にも活かせるように、自分への復習としてこの内容を備忘録にまとめました...！
windows11で、sketchup6 その95

# 概要
windows11に、sketchup6を入れてみた。
rubyで、3Dを書く。
練習問題やってみた。

# 練習問題
webdialogで、rubyコンソールを書け。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/3cb91665-93ef-4717-a7d3-e82b116e6dfb.png)

# サンプルコード

```

def testweb1
	wd = UI::WebDialog.new("Ruby ", true, 'Console', 500, 200)
	wd.set_html <<-EOS
		<html>
		<head>
		</head>
		<body>
		<textarea id="out" cols=60 rows=5></textarea>
		<br>
		<input type="text" id="src" size="58" value="alert" ><a href="skp:run">run</a>
		</body>
		</html>
	EOS
	wd.add_action_callback('run') do |d, a|
		command = wd.get_element_value('src')
		puts command
		res = command + " => "
		begin
			result = eval(command)
			res += result.inspect.inspect
		rescue Exception => e
			res += e.message.inspect
			res += e.backtrace.inspect.inspect
		end
		wd.execute_script("document.getElementById('out').value ='#{res}';")
	end
	wd.show
end



```

以上。
個人的備忘録：CloudFront + S3構成でメンテナンスページを表示する方法を検討してみた

## はじめに

CloudFront経由でS3上の静的ファイルを配信し、バックエンドをECS Fargateで動かしている構成において、何らかの障害が発生した際にエンドユーザーへメンテナンスページ（Sorryページ）を表示したい場合の方法についてまとめます。

:::note warn
**※ 本記事は個人的に調べた内容をもとにまとめたものです。**
:::

実際の環境や仕様によっては動作しない場合や設定方法が異なる可能性もありますので、参考情報としてご覧ください。

## 書こうと思ったきっかけ

フロントエンドがCloudFront + S3、バックエンドがFargateという構成で運用中に、障害時にユーザー体験を損なわないための対策が必要だと感じ、メンテナンスページの表示方法を整理しておこうと思いました。

---

## 方法：CloudFrontのカスタムエラーページ機能を活用（※あくまで個人調べ）

### 1. S3にメンテナンスページをアップロード

* ファイル名：`maintenance.html`
* 可能であればCSSや画像も含めてデザインを整える

### 2. CloudFrontの設定を変更

* CloudFrontの「Error Pages」から「カスタムエラーレスポンス」を作成

  * HTTP Error Code：503
  * Response Page Path：`/maintenance.html`
  * HTTP Response Code：200

### 3. オプション：オリジングループでフェイルオーバー構成

* オリジンA：通常のS3 + バックエンド連携
* オリジンB：メンテナンスページ専用のS3バケット
* CloudFrontのオリジングループで、オリジンAがヘルスチェック失敗時にオリジンBへ切替

### 4. 切り替えタイミング

* 手動運用：通常index.htmlを`maintenance.html`へ一時差し替え
* 自動化運用：Lambda\@EdgeやCloudFront FunctionsでCookieやヘッダーを見て表示分岐

### 5. その他の注意点

* CloudFrontキャッシュの影響を避けるため、切り替え時にキャッシュ無効化（Invalidation）を行う

**参考文献**

https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/creating-custom-error-pages.html

https://blog.nijot.com/aws/maintenancewindow-with-cloudfront/

---

## まとめ

| 方法                      | 設置場所                  | 特徴             |
| ----------------------- | --------------------- | -------------- |
| CloudFront + カスタムエラーページ | S3に`maintenance.html` | 簡単・高可用・即時反映    |
| CloudFront オリジングループ     | S3にメンテナンス専用パス         | 自動切替可・柔軟性高い    |

まずはS3に`maintenance.html`を用意し、CloudFrontで503エラー時に差し替え表示させる方法が、コストや手間の面でもっとも現実的だと思います...！
(M5S3)Arduino-misakiUTF16で遊ぶ。1文字 M5StampS3


参考
----

https://github.com/Tamakichi/Arduino-misakiUTF16


結果
----

![Screenshot from 2025-05-03 06-48-15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/e7d90d58-c10e-41a6-9c44-0020f2018973.png)


プログラム
----


```c++


//misaki_test1_m5stamps3

#include <misakiUTF16.h>

void setup() {

  //シリアルの初期化
  Serial.begin(9600);
  Serial.println();
  //シリアルの待ちが0.5*9
  for (int i = 0; i < 9; i++) {
    delay(500);  //接続待ち
    Serial.print('.');
  }  //for
  Serial.println();


  unsigned char font[8];    // フォント格納バッファ
  getFontData(font, "あ");  // "あ"のフォントを取得

  // 取得フォントの確認
  for (int row = 0; row < 8; row++) {
    for (int col = 0; col < 8; col++) {

      //Serial.write((0x80 >> col) & font[row] ? '#' : ' ');
      if((0x80 >> col) & font[row]){
          Serial.print('#');
      }else{
          Serial.print(' ');
      }

    }//for col
    Serial.println();
  }//for row
}//setup

void loop() {
  delay(3); //dummy
}//loop


```
【ネットワーク】nslookupコマンド


# はじめに

※5/1 に投稿する内容でしたが、GitHub Actions の PAT 設定不具合により 5/2 にまとめて投稿しています。

こんにちは。アメリカに住みながら、独学でエンジニアを目指している Taira です。
現在インターネットクイズを定期的に自分に課しているのですが、その中で出てきた nslookup についてまとめようと思います

# nslookup コマンドとは？

ドメイン名から IP アドレスを調べたり，IP アドレスからドメイン名を調べたりする際に便利なツールが「nslookup」です。

## nslookup と DNS の違い

- **DNS**: インターネット上で「ドメイン名」と「IP アドレス」を結びつける仕組み
- **nslookup**: DNS サーバーに問い合わせをして、答えを表示するツール

つまり、**DNS が仕組み，nslookup がそれを利用する手段**です。

## 使い方

### 1. ドメイン名から IP アドレスを調べる

```bash
nslookup example.com
```

### 2. IP アドレスからドメイン名を調べる

```bash
nslookup 93.184.216.34
```

### 3. 特定の DNS サーバーを使って調べる

```bash
nslookup example.com 8.8.8.8
```

(Google Public DNS を使う例)

## 実際の出力例

```bash
nslookup google.com

サーバー:  one.one.one.one
Address:  1.1.1.1

権限のない回答:
名前:    google.com
Addresses:  2607:f8b0:400a:800::200e
            142.250.217.110

```

- 使用 DNS サーバーは 1.1.1.1（Cloudflare の高速 DNS）

- サーバー名も正しく取得（one.one.one.one）

- Google の正しい IPv4 アドレス（142.250.217.110）と IPv6 アドレスが返ってきた

## nslookup を使う場面

| 場面                       | 目的                                   |
| :------------------------- | :------------------------------------- |
| ネットワーク障害の課題分析 | DNS トラブルなのか別問題かを分析       |
| サーバー移行確認           | 新しい IP アドレスへ切り替わったか確認 |
| DNS キャッシュ確認         | DNS の更新が送れているかを確認         |
| MX レコードの調査          | メール送信先を調べる                   |
| 反対に IP から調べる時     | 不安な IP アドレスの調査               |

## まとめ

- **nslookup**は、DNS リゾルバと同じような動作を「手動」で行うツール
- ネットワークト問題の課題分析やサーバー切替確認に必須
- 正常時は使わないが、一旦問題が発生したら、最初に使うべきツール
【ネットワーク】tracerouteコマンド


# はじめに

※4/30 に投稿する内容でしたが、GitHub Actions の PAT 設定不具合により 5/2 にまとめて投稿しています。

こんにちは。アメリカに住みながら、独学でエンジニアを目指している Taira です。
現在インターネットクイズを定期的に自分に課しているのですが、その中で出てきた traceroute コマンドについて記事にまとめてみようと思います

# traceroute とは？

traceroute は、ネットワークの通信経路を調べるためのコマンドです。
自分のパソコンから目的地のサーバへデータを送る際に，途中で経由するルーターを一口づつ表示していきます。

例えば、こんなことがわかります。

- 途中で通るルーターの IP アドレスやホスト名
- そのルーターまでの応答時間
- どこで遅延が発生しているか

# traceroute の仕組み

traceroute は、**TTL (Time To Live)** というパケットの存在期限を利用して動いています。

1. TTL=1 でパケットを送信 → 最初のルーターで TTL が 0 になり、エラーが返る
2. TTL=2 で送信 → 2 番目のルーターで TTL が 0 になり、エラーが返る
3. TTL=3 で送信 → 3 番目のルーターで...

これを繰り返して、**76ee に目的地に到達するまでのルートを全て追跡する**というわけです。

# 使い方

## Windows

```bash
tracert ドメイン名またはIPアドレス
```

例：

```bash
tracert google.com
```

## Linux / Mac

```bash
traceroute ドメイン名またはIPアドレス
```

例：

```bash
traceroute google.com
```

▶ Windows では `tracert`、Linux/Mac では `traceroute`と名前が異なるので注意しましょう。

# 出力の見方

一般的に、下記のような情報が表示されます。

- 何個目のルーターか（1、2、3...）
- 3 回分の応答時間（ms）
- ルーターの IP アドレスやホスト名

【注意】

- `* * *`と表示される場合：そのルーターが応答を返していない場合
- 3 回分の計測をするのは、繰り返しや遅延をなるべく正確に採るため

# traceroute の利用場面

- サーバまでの通信経路を調査
- ネットワーク障害の特定
- 遅延が発生している場所を探す
- ネットワークの構成や経路の理解

# まとめ

traceroute は，パケットが目的地に到達するまでに通る道を視覚化するための強力なツールです。
「どこで止まっている？」「どこで遅い？」を見つけるときには、真っ先に使いたい技術です。
Loan Amount　フィールドの問題



# REQUIRED_FIELD_MISSING, Required fields are missing: [Loan_Amount__c]: [Loan_Amount__c] this is my error

:::note
I think the settings for the previous challenge remain. Please deactivate.

Go to Setup --> Object manager --> Choose (contact) --> Fields & Relationships --> Edit Loan Amount  and uncheck Required checkbox.
:::

+ [Step not yet complete in My Trailhead Playground 1 There was an unexpected error in your org which is preventing this assessment check from completing: System.DmlException: Insert failed. First exception on row 0; first error: REQUIRED_FIELD_MISSING, Requ](https://trailhead.salesforce.com/en/trailblazer-community/feed/0D54S00000HDAisSAH)

# ページレイアウトにないので表示されない

+ [I just completed the first challenge in "Unlock Business Success with Salesforce Data Platform" (successfully, got the points), but the "Loan Amount" field isn't showing on the Contact details page.](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX00000SVbkv)
テストの投稿

# はじめに

テスト的な公開です。

# 背景

どういう風に表示されるのか知りたい。
↓画像の挿入(たぶん、著作権的に大丈夫だとおもう)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3983789/716790d9-93dc-4086-a96c-7bafcba9858f.png)
AtCoder に登録したら解くべき精選過去問 10 問を Uiua で解いてみた

# はじめに

AtCoder言語アップデートテスト用コンテストがついに公開されましたね
https://atcoder.jp/contests/language-test-202505

大変嬉しい限りです。この記事では自分が提案した Uiua で AtCoderBeginnersSelection の問題を解いていきます。

# Uiua

[Uiua](https://www.uiua.org/) はスタックベースの配列指向言語です。配列指向といえば APL だと思いますが、まさにその影響下にあり、[BQN](https://mlochbaum.github.io/BQN/) に強くインスパイアされた言語です。

コードは下のような感じです。

```
+1 2
```

これで3が出力されます。ポーランド記法っぽいですが、右からかく逆ポーランド記法というふうに捉えた方が正確かもしれません。処理としては

- スタックに2を積む
- スタックに1を積む
- スタックの上2つを取り出し足した結果をスタックに積む

みたいな感じです。最後まで実行するとスタックに残っているものが全て出力されます。

次は配列指向っぽいコードも見てみましょう。

```
×2⇡4
```

これは `[0 2 4 6]` になります。`⇡4` は `[0 1 2 3]` という配列になり `×2` で全ての要素が倍になります。なんとなくイメージはつかめたでしょうか？

# 入出力

標準入力を受け取る関数は `&sc` です。これにより1行が文字列（Uiua では文字列は文字の1次元配列）としてスタックに積まれます。

文字列を数に変換するには `⋕` を使います。空白区切りの場合は `⊜⋕⊸≠@ ` を使うといいです。`⊜` の説明が面倒なので説明は省きます。

出力は `&p` を使います。スタックの一番上の要素を取り出し、出力します。
配列を空白区切りで出力するときは `&p/$"_ _"` を使います。

# AtCoderBeginnersSelection

## PracticeA - Welcome to AtCoder
[PracticeA - Welcome to AtCoder](https://atcoder.jp/contests/abs/tasks/practice_1)

```
&p&sc&p+/+⊜⋕⊸≠@ &sc⋕&sc
```

`/+` で配列の合計を計算できます。`/` は Modifier と呼ばれ、関数を受け取ります。Modifierが受け取る関数は構文解析をした時点で決まり、関数とくっついてひとつの関数のように振る舞います。

## ABC086A - Product
[ABC086A - Product](https://atcoder.jp/contests/abs/tasks/abc086_a)

```
&p⊏◿2/×⊜⋕⊸≠@ &sc{"Even""Odd"}
```

## ABC081A - Placing Marbles
[ABC081A - Placing Marbles](https://atcoder.jp/contests/abs/tasks/abc081_a)

```
/+≡⋕&sc
```

## ABC081B - Shift only
[ABC081B - Shift only](https://atcoder.jp/contests/abs/tasks/abc081_b)

```
◌⍥(⨬∘(⊓÷₂+₁)=0/+⊸◿2)∞⊜⋕⊸≠@ &sc◌&sc0
```

---
2025-05-05 追記
[ラクラムシ](https://qiita.com/Raclamusi)さんにより配列指向らしい解法を教えて頂きました

```
/↧⊗1⋯⊜⋕⊸≠@ &sc◌&sc
```

## ABC087B - Coins
[ABC087B - Coins](https://atcoder.jp/contests/abs/tasks/abc087_b)

```
⍥₃/+=⋕&sc⊞+⊞+∩₃°□°⊟₃⍚(×⇡)+1[⍥₃(⋕&sc)]50_100_500
```

## ABC083B - Some Sums
[ABC083B - Some Sums](https://atcoder.jp/contests/abs/tasks/abc083_b)

```
/+▽⤚(×∩≥⤚:≡(/+≡⋕°⋕))⇡+1°⊟₃⊜⋕⊸≠@ &sc
```

## ABC088B - Card Game for Two
[ABC088B - Card Game for Two](https://atcoder.jp/contests/abs/tasks/abc088_b)

```
⌵/-⊕/+◿2°⊏⍆⊜⋕⊸≠@ &sc◌&sc
```

`°⊏` の挙動は非自明だと思います。`⇡⊸⧻` と同様の振る舞いをします。

## ABC085B - Kagami Mochi
[ABC085B - Kagami Mochi](https://atcoder.jp/contests/abs/tasks/abc085_b)

```
⧻◴[⍥(⋕&sc)]⋕&sc
```

## ABC085C - Otoshidama
[ABC085C - Otoshidama](https://atcoder.jp/contests/abs/tasks/abc085_c)

```
⤚:°⊟⊜⋕⊸≠@ &sc⊸≡/+↯∞_2⊞⊟⇡9⇡2001
⊙(⊸≡(/+×10000_5000_1000)≡⊂˜-⊙(⊸≡/+▽≤))
&p/$"_ _"⊏⊙(˜⊂¯1_¯1_¯1)⊗1=
```

雑に書くとMLEになっちゃいました。メモリを使わないようにしようにも $2000 \times 2000$ のループ（配列操作なら問題ない）はかなり遅いので困りましたが、5000円札を9枚以上使う意味はないそうです。（[参考](https://atcoder.jp/contests/abs/editorial/5751)）

## ABC049C - 白昼夢
[ABC049C - 白昼夢](https://atcoder.jp/contests/abs/tasks/arc065_a)

```
&p⊏≍""⍥(⍣(°(˜⊂"dream")|°(˜⊂"erase")|°(˜⊂"dreamer")|°(˜⊂"eraser")|∘))∞&sc{"NO""YES"}
```

## ABC086C - Traveling
[ABC086C - Traveling](https://atcoder.jp/contests/abs/tasks/arc089_a)

```
&p⊏/××⊃≥(=∩◿₂)⧈(/+:°⊂⌵/-)2⊂[⍥(⊜⋕⊸≠@ &sc)]⋕&sc0_0_0{"No""Yes"}
```
Geminiでクラリネットを使う魔法少女を描いてみた。

# 概要

Geminiでクラリネットを使う魔法少女を描いてみました。

# 実装

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

```
光のクラリネットを使う魔法少女を描いてください。
```

![光のクラリネットを使う魔法少女_20250503.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192024/94b3c623-4e0f-46cb-bbaf-d61d76bae8a3.png)


```
闇のクラリネットを使う魔法少女を描いてください。
```

![闇のクラリネットを使う魔法少女_20250503.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192024/3d85ae20-3108-47f2-b5d4-064f3131db88.png)


```
聖なるクラリネットを使う魔法少女を描いてください。
```

![聖なるクラリネットを使う魔法少女_20250503.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192024/eed44dbc-ca51-489f-aafd-f5205449e12f.png)

# まとめ

闇の子と聖の子は可愛いかも。
何かの役に立てばと。
【初投稿】IT未経験からインフラ・クラウドエンジニアを目指す！　#1　

はじめまして
これからITエンジニアを目指すにあたって、Qiitaで情報共有や学習の進捗を記録していくことにしました。

現在はIT未経験で、今月から派遣社員としてヘルプデスク業務に配属される予定です。
最終的には インフラエンジニア → クラウドエンジニア → SRE（Site Reliability Engineer） というキャリアを目指しています。

目指す資格
今後、以下のような資格を取得していく予定です。

情報セキュリティマネジメント試験（SG）

OSS-DB Silver

応用情報技術者試験（AP）

ネットワークスペシャリスト（NW）

LPIC-1、LPIC-2

AWS認定 ソリューションアーキテクト – アソシエイト（SAA）

これらを一通り取得した後、クラウド環境の構築業務に携われるよう転職活動をしていきたいと考えています。

なぜこの順番・資格なのか？
色々と調べたり考えたりして、今の自分にとって必要そうなものを選びました。

セキュリティ分野はこれまで全く触れてこなかったため、まずは基礎的な「情報セキュリティマネジメント」から始めます。

データベースについては、専門職を目指していないためOracle系ではなく、OSS-DB Silverを選びました。

ネットワークについては、CCNAよりも国家資格のネットワークスペシャリストの方を優先する予定です（CCNAは費用が高く、継続受験が難しい印象があったため）。

LPICはインフラの基本ということで、まずは1と2を目標にしています。

クラウド系はまずAWSのSAAから挑戦していきたいと考えています。

最後に
まだITエンジニアを目指し始めて1か月ほどで、学ぶべきことは非常に多いと感じています。TerraformやIaC（Infrastructure as Code）にも興味はありますが、まずは基礎固めとして資格取得に集中します。

今月中に「情報セキュリティマネジメント試験」に合格するのが目標です！

これからも学習の記録や気づきを投稿していけたらと思います。どうぞよろしくお願いします。
Sound Event Detection を動かしたメモ

### 参考資料

1. [Introduction to Sound Event Detection](https://www.kaggle.com/code/hidehisaarai1213/introduction-to-sound-event-detection)
2. [Faster EfficientNet-B0 SED Model Inference](https://www.kaggle.com/code/leonshangguan/faster-eb0-sed-model-inference)
   ※ 1 の SED モデルのバックボーンを Timm モデルに置き換えたもの

## ポイントの整理

クリップ（入力音声全体）から、**フレームごとのイベント発生有無を「弱ラベル」だけで学習できる**のがポイント。

- 弱ラベル = クリップ単位のラベル（例：この 10 秒間に犬の鳴き声が含まれる）
- フレーム単位のラベルがなくても、**フレームごとのイベント予測**が可能

## 用語の整理

| 用語        | 説明                                                                             |
| ----------- | -------------------------------------------------------------------------------- |
| **clip**    | モデルに入力する音声データ全体（例：10 秒間の音）                                |
| **frame**   | clip の時間軸を細かく区切った単位（例：1 フレーム = 100ms）                      |
| **segment** | バックボーンで時間的にダウンサンプリングされた特徴量のスケール（frame より粗い） |

## モデルの動作メモ

### Attention Block（`AttBlock` クラス）

```python
# x: (n_samples, n_class, n_time)
norm_att = torch.softmax(torch.clamp(self.att(x), -10, 10), dim=-1)
cla = self.nonlinear_transform(self.cla(x))
x = torch.sum(norm_att * cla, dim=2)
```

- **1 行目**：各クラスごとに `softmax` を適用し、`segment` の中で重要な時間的部分に重みをつけている（＝ Attention）
- **2 行目**：各 `segment` ごとのクラスごとの予測スコアを計算
- **3 行目**：`norm_att`（重み）と `cla`（予測スコア）を要素ごとに掛け、時間方向に合計 → **clip 全体の予測値**を出力
  `cla` の情報を通すことで、Attention を通した segment ごとのクラス予測が反映される。ここがこの Block の核心部分か？。

### ロス計算

- `AttBlock` の出力（`x`）は **clip 全体のクラスごとの確率値**
- ラベルは clip 単位の弱ラベルなので、**`BCELoss`（シグモイド後の確率に対しての 2 値交差エントロピー）を使用**
- 出力は確率値なので、`BCEWithLogitsLoss`（ロジット入力前提）は使わない

## 実際に動作させたメモ

冒頭の参考資料の 2 つめ Timm モデルを使ったほうを写経して動作確認を行った。しかし、clip の両端 1，2セグメントの予測精度が低かった。
推論時には、両端のセグメントを除外し、中央部分のみの予測結果を使用するといった工夫が必要かもしれない。


### うまくいった推論の様子

適当に 64 クラスを選択して学習・推論をしてみた。以下はうまく予測できていた例。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3998563/03a5ae35-9d05-4860-8aba-583e93ffe561.png)

イベントの発生している segment を高く予測できている。


---

(とっていたメモを ChatGPT に投げて校正してもらった出力です)
[VRChat] アバターの顔のシェイダーを変えたが反映されないときに

## ⭐️困っていたこと

- 目の形をツリ目にしたかった
- ツリ目にはシーンの停止状態では成功している
- だがアップロードしたものには反映されていない

## ⭐️解決方法(キプフェルの場合)

![スクリーンショット 2025-05-03 4.31.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610706/628154ed-896c-458a-a03a-9854e155e25c.png)

- 本体を選択してFXをクリックする


![スクリーンショット 2025-05-03 4.32.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610706/66783c40-e263-491c-8b85-184f2e1e85ad.png)


- この画面が表示されるのでUser Editを選択する

![スクリーンショット 2025-05-03 4.33.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610706/13130920-2999-401c-bc09-b90a8e3eff58.png)

-DefaultFaceを選択する
motionの部分をnoneにする?

## ⭐️参考

https://daisuki-vrc.com/fix-blendshape#FX

https://docs.google.com/document/d/1K-iWGp-6S76_pdiwBxPzNjxe9jgoj3r4lJJNwq0kwds/edit?tab=t.0#heading=h.lbjv2t4aqesn

## ⭐️注意しなければならないこと

- キプフェルの説明書(customを使った)の表情改変のやり方とは多分違うような気がするので今回の方法で解決している
- FaceEmoを使ったやり方が多分あるのではないかと思うので導入したときに試してみたい
競プロ日記#25/05/02

# アルゴ式-[変わったサイコロ (4)](https://algo-method.com/tasks/798)
- 特になし


# アルゴ式-[宝くじの期待値](https://algo-method.com/tasks/799)
- 特になし

# アルゴ式-[宝くじの期待値](https://algo-method.com/tasks/799)
- 特になし

というかマークダウンバグってるね。。