OmniAICreator/Qiita-1.07M huggingface dataset:
猿でもわかるAIビジネス活用シリーズ 🐵📊 AI導入で失敗しないためのステップバイステップガイド




## 「AI導入で失敗しないためのステップバイステップガイド」〜現場エンジニアのための実践的アプローチ〜

## 1. はじめに：なぜAI導入は“失敗”しやすいのか？

最近、企業のあらゆる部門で「AIを導入しよう！」という動きが加速しています。
しかし、現実には「PoC止まり」「導入したけど使われない」「精度が業務に耐えない」など、**AI導入の失敗事例が後を絶ちません**。

その理由の多くは、技術力やツール不足ではなく、**導入プロセスや現場の巻き込み不足**にあります。
本記事では、エンジニア視点で「失敗しないAI導入のステップ」と、現場で使えるTipsを**実装コード付き**でお届けします。

---

## 2. AI導入の全体像を掴む：技術だけじゃない“設計力”がカギ

AI導入は、ざっくり以下のようなステップで進みます：

1. **課題の特定と定義**
2. **データ収集と前処理**
3. **モデル選定と開発**
4. **PoC（試験導入）**
5. **本番環境への組み込み**
6. **継続的な改善・運用**

各ステップで「つまずきポイント」が存在します。
以下、実践的な例とともに詳しく解説していきます。

---

## 3. ステップバイステップ実装例：レコメンドAIのPoC構築

今回は、ECサイト向けに「ユーザーに商品をレコメンドするAI」を簡単にPoCとして構築してみましょう。
Python + scikit-learn + Streamlitを使ってミニマルな例を作成します。

### 🔹 ステップ1：課題の明確化

例：
「新規ユーザーにどの商品を薦めれば、CVR（購入率）が上がるか？」

### 🔹 ステップ2：データ準備

```python
import pandas as pd

# 商品情報とユーザー行動の簡易データ
df = pd.read_csv("user_purchase_log.csv")
print(df.head())
```

### 🔹 ステップ3：特徴量エンジニアリング & 学習

```python
from sklearn.model_selection import train_test_split
from sklearn.ensemble import RandomForestClassifier

# 特徴量とラベルに分ける
X = df[['age', 'gender', 'browsing_time', 'item_category']]
y = df['purchased']

# one-hot encoding & 分割
X = pd.get_dummies(X)
X_train, X_test, y_train, y_test = train_test_split(X, y)

# モデル学習
model = RandomForestClassifier()
model.fit(X_train, y_train)
```

### 🔹 ステップ4：簡易UIでレコメンドを確認

```python
import streamlit as st

st.title("商品レコメンドAI")
age = st.slider("年齢", 18, 70, 30)
gender = st.selectbox("性別", ["male", "female"])
category = st.selectbox("カテゴリ", ["cosmetics", "books", "fashion"])

# 入力データを推論
input_df = pd.DataFrame([[age, gender, category]], columns=['age', 'gender', 'item_category'])
input_df = pd.get_dummies(input_df)
input_df = input_df.reindex(columns=X.columns, fill_value=0)
pred = model.predict(input_df)

st.write("🔮 購入する可能性:", "あり" if pred[0] == 1 else "なし")
```

📌 **補足：** ここではあえて複雑なDeep Learningは避け、PoCレベルのAIとしてLightなものを構築しています。

---

## 4. よくある落とし穴とTips

| 課題         | 原因                | 解決のヒント                    |
| ---------- | ----------------- | ------------------------- |
| 精度が出ない     | ゴミデータ or ターゲットが曖昧 | 業務と一緒に「正しい問い」を定義する        |
| 現場が使ってくれない | UXや操作性を考慮していない    | StreamlitなどでUIを事前に確認させる   |
| PoC止まりで終わる | 継続的改善の仕組みがない      | MLOps体制を小さくても作る（mlflowなど） |

---

## 5. 応用編：MLOpsによる本番導入と継続運用

PoCの成功はスタートにすぎません。次は「使われ続けるAI」を作る段階です。
本番導入では以下が重要になります：

* CI/CDでモデル更新を自動化（GitHub Actions + Docker）
* モデル精度の継続的モニタリング（mlflow + Grafana）
* フィードバックループの設計（ユーザー行動ログ → 再学習）

> 💡 **参考構成図：**

```plaintext
[User] → [Streamlit UI] → [API Server (FastAPI)] → [Model Inference]
                            ↓
                   [MLflow Logging & Monitor]
```

---

## 6. まとめ：AI導入は「地道な設計」と「現場巻き込み」が9割

**AI = 魔法の箱ではありません。**
小さく作って、試して、学んで、改善していくプロセス自体が重要です。

### ✅ 本記事のまとめ

* **ステップバイステップでPoCを構築**することで全体像が掴める
* **コードだけでなく、業務側との連携が成否を分ける**
* **MLOpsの視点で「運用され続けるAI」へ昇華する**ことが鍵

今すぐ、社内の課題を1つ選んでPoCを作ってみませんか？
「動くもの」があれば、次の会議はもっと建設的になります！

---

## 📎 付録・資料

* [Streamlit公式サイト](https://streamlit.io/)
* [MLflowドキュメント](https://mlflow.org/)
* [scikit-learnチュートリアル](https://scikit-learn.org/stable/tutorial/index.html)
【これ見れば絶対分かる】詳細度ってなんぞや

## この投稿を見てわかること
+ CSSの詳細度について
+ 詳細度の計算方法について

## 詳細度とは
:::note info
**詳細度とは**
CSSでは**どのルールを優先的に適用するのかブラウザー上が使用するアルゴリズム**があり、それを詳細度という。
:::

つまり・・・
「装飾ごちゃごちゃでわからんやろ、被ったらどれ優先するか決めとかんといかんなあ」
「勝手に決められたら敵わんし、ほんならこっちで優先決めとくでー」
って感じでブラウザに設定されているルールですね :eyes: （個人的意見です）

## そもそものお話ですが・・・
CSS（Cascading Style Sheets）は**基本として後ろから宣言されるルールによってそのスタイルを継承・上書き**していきます。

CSSのCであるカスケーディングとは「**CSSのスタイルを適用する順序**」を指します。
※cascade:小滝

カスケーディングに関しては奥が深すぎて素人にはまだ理解が難しかったので、参考サイトをおいておきます。。。

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_cascade/Cascade

### 「後ろから宣言されるルールが優先」とは
```
<p>文字は何色？</p>

p {
   color:#black;
}
p {
   color:red;
}
p {
   color:blue;
}
```
<font color="blue">文字は何色？</font>

Pに対して文字色を指定するルールが3つ並んでいるという状況において、優先されるのは一番下に記述されたものになります。（今回の場合は青色）

しかし、通常のCSSではクラスセレクタやIDセレクタなど色々なスタイルの指定方法が存在します。それらが入ってきた時に、どの要素が優先されるのかを示しているのが、「**詳細度**」です。

## 詳細度の計算方法
前述の通り、CSSではいろいろなスタイルの指定の仕方があります。

:::note info
**CSSでのスタイルの指定の仕方**
+ IDセレクタ　#example
+ classセレクタ　.example
+ 要素セレクタ　h1,pなど
:::
これらにはそれぞれ**重み**が定められており、**セレクタの重みの合計で優先度が決定**されます。

《**各セレクタごとと重みの指定**（図解）》
![quiita用イラスト作成 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/04fac4dd-c7dd-4e3f-8cc1-cf67c011239e.png)

この図に記載のある通り、重みは3つの数字（0-0-0）で表されます。
この数字は「左」「中央」「右」に分解でき、

①<INS>左の数字が多い方が詳細度が高い</INS>
②<INS>同じ枠同士では数字が大きい方が詳細度が高い</INS>

というルールがあります。

上記の図から
IDセレクタ　→　1-0-0
classセレクタ　→ 0-1-0
要素セレクタ　→ 0-0-1
として計算していくため、必然的に

:::note warn
ID > Class > 要素（h1,p etc） 
:::

という力関係ができています。

![quiita用イラスト作成 (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/4f068805-185c-480e-b86e-5238142f452f.png)

## 実践で覚える
### 1.IDセレクタ vs それ以外ならIDが圧勝
```
#newSection {
  color: black; /* 1-0-0 */
}
.headerClass .mainClass  [id="newSection"] {
  color: red; /* 0-3-0 クラスセレクタ(0-1-0)×2 属性セレクタ(0-1-0)×1 */
}
```
→上に記載してあるスタイルが優先されます

### 2.要素セレクタ vs クラスセレクタならクラスセレクタの勝利
```
:root input {
  color: black; /* 0-1-1 :はクラスセレクタ、inputは要素セレクタ */
}
html body main input {
  color: red; /* 0-0-4 全て要素セレクタ　*/
}
```
→上に記載してあるスタイルが優先されます

### 3.どちらにもIDセレクタがある場合、他のセレクタの合計で勝負
```
#newSection {
  color: black; /* 1-0-0 */
}
#newContent [id="newSection"] {
  color: red; /* 1-1-0 */
}
```
→どちらにもIDセレクタがありますが、下にはクラスセレクタもあるので**下に記載してあるスタイルが優先**されます
### 4.計算した結果同点であれば、下に記述しているものが勝利
```
input.myClass {
  color: black; /* 0-1-1 */
}
:root input {
  color: red; /* 0-1-1 */
}
```
→どちらも同じ点数なので、**下に記載してあるスタイルが優先**されます


## まとめ・感想
:::note info
「①header ul li a{}などと要素を並べて記載していく」より、「②クラスセレクタで指定」の方がHTMLに修正が入ってもCSSの修正が必要になる確率は減り、かつ詳細度も高いから良い:ok_hand_tone1: 
:::
:::note info
```!important```はこれらの概念より上にある「**強制的な**」もの
使う＝CSSの崩壊が生じ始めている。。。！？
:::
:::note info
idタグは1つしか指定できない＝**強力**
**安易につけない**！（セクションへの移動などで活用されることが多い）
:::

　詳細度の計算の仕方を理解するのって難しいですよね。そもそもド素人エンジニアのため「詳細度とは？」というレベルだったので、同じ初心者の方が理解しやすいように頑張って噛み砕いて書いてみました。参考になると嬉しいです！（こっちの方がわかりやすい、違っている箇所などがあったらぜひ教えてください :cry: ）

## 参考にしたサイト

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_cascade/Specificity
react-big-calendarを学ぶ(Step2:リサイズイベント)

## はじめに
今回はリサイズイベントを学んでいこうと思います！
[前回](https://qiita.com/koji0705/items/c8d319ede3a386a73172)までの記事の続きになります

## 成果物

![react-big-calendar2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/bf8e799b-52ec-4cb0-b6eb-8b54e6b01204.gif)



## ソースコード

```tsx:src/App.tsx
import { useState } from "react";
import { Calendar, dateFnsLocalizer } from "react-big-calendar";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
import withDragAndDrop from "react-big-calendar/lib/addons/dragAndDrop";
import { format, parse, startOfWeek, getDay } from "date-fns";
import { ja } from "date-fns/locale";

import "react-big-calendar/lib/css/react-big-calendar.css";
import "react-big-calendar/lib/addons/dragAndDrop/styles.css";

// DnD対応カレンダーに拡張
const DragAndDropCalendar = withDragAndDrop(Calendar);

// date-fns ローカライザー設定
const locales = {
	ja: ja,
};

const localizer = dateFnsLocalizer({
	format,
	parse,
	startOfWeek,
	getDay,
	locales,
	locale: "ja",
});

type EventType = {
	id: number;
	title: string;
	start: Date;
	end: Date;
};

const initialEvents: EventType[] = [
	{
		id: 0,
		title: "会議A",
		start: new Date(),
		end: new Date(new Date().getTime() + 60 * 60 * 1000), // +1時間
	},
];

type EventDropArgs = {
	event: EventType;
	start: Date;
	end: Date;
};

export default function App() {
	const [events, setEvents] = useState<EventType[]>(initialEvents);
	const [showDialog, setShowDialog] = useState(false);
	const [resizedEvent, setResizedEvent] = useState<EventType | null>(null);

	const onEventDrop = ({ event, start, end }: EventDropArgs) => {
		const updated = events.map((e) =>
			e.id === event.id ? { ...e, start, end } : e,
		);
		setEvents(updated);
	};

	const handleResizeWithDialog = ({ event, start, end }: EventDropArgs) => {
		const updated = events.map((e) =>
			e.id === event.id ? { ...e, start, end } : e,
		);
		setEvents(updated);
		setResizedEvent({ ...event, start, end });
		setShowDialog(true);
	};

	return (
		<DndProvider backend={HTML5Backend}>
			<div style={{ height: "100vh", padding: 20 }}>
				<DragAndDropCalendar
					localizer={localizer}
					events={events}
					startAccessor="start"
					endAccessor="end"
					onEventDrop={onEventDrop}
					resizable
					onEventResize={handleResizeWithDialog}
					style={{ height: "100%" }}
				/>
				{showDialog && resizedEvent && (
					<div
						style={{
							position: "absolute",
							top: "30%",
							left: "30%",
							padding: 20,
							background: "white",
							border: "1px solid #ccc",
							boxShadow: "0 2px 10px rgba(0,0,0,0.3)",
							zIndex: 1000,
						}}
					>
						<p>「{resizedEvent.title}」の時間を変更しました。</p>
						<button type="button" onClick={() => setShowDialog(false)}>
							閉じる
						</button>
					</div>
				)}
			</div>
		</DndProvider>
	);
}

```
【React】React router URLパラメータ


# はじめに

こんにちは。アメリカ在住で、独学でエンジニアを目指している Taira です。
現在、Udemy の講座「React に入門した人のためのもっと React が楽しくなるステップアップコース完全版」で React の学習を進めています。

この講座の内容は非常にわかりやすいのですが、紹介されている React および React Router のバージョンがやや古く、現在主流となっている react-router-dom バージョン 7 とは操作方法が大きく異なります。

そこで本記事では、講座内で紹介されている内容をもとに、2025 年 5 月 10 日時点での react-router-dom の最新バージョン (7.5.3) に対応した URL パラメータの記載方法や操作方法について解説します。

## 開発環境

- React 19.1.0
- Vite 6.3.5
- react-router-dom 7.5.3

## 始める前に

最初に react-router-dom をインストールしましょう:

```bash
npm install react-router-dom
```

インストール後、`package.json` の `dependencies` に `react-router-dom@7.5.3` が含まれていることを確認してください。

## パスパラメータ

React router の URL パラメータを説明する前に、パスパラメータについて説明しようと思います。
パスパラメータとは、URL の一部を変数のように扱える仕組みのことです。
例えば：

```
/users/:id
```

上記の `:id` はパスパラメータであり、URL が `/users/5` のときは `id = "5"` という値を取り出すことができます。

---

## 1. ルーティングの設定

React Router では、ルート定義に `:パラメータ名` を含めることでパスパラメータを定義できます。

```tsx
import { Routes, Route } from 'react-router-dom';
import UserDetail from './UserDetail';

<Routes>
  <Route path="/users/:id" element={<UserDetail />} />
</Routes>;
```

この設定により、`/users/1` や `/users/42` のような URL が `/users/:id` にマッチします。

---

## 2. useParams で取得

パスパラメータの値は、React Router の `useParams` フックを使って取得できます。

```jsx:UserDetail.jsx
import { useParams } from 'react-router-dom';

const UserDetail = ()=>{
  const { id } =useParams();
  return(
    <div>ユーザーID: {id}</div>
  )
}


```

この例では、`/users/3` にアクセスすると「ユーザー ID: 3」と表示されます。

---

## 3. ネストされたルーティングでの使用

ネストされたルートでも同様に `useParams()` で取得可能です。

```tsx
<Routes>
  <Route path="/users" element={<UsersLayout />}>
    <Route path=":id" element={<UserDetail />} />
  </Route>
</Routes>
```

`/users/10` にアクセスすると、`UserDetail` コンポーネントで `id` が取得できます。

---

## まとめ

| 項目       | 方法                               |
| ---------- | ---------------------------------- |
| 定義方法   | `<Route path="/users/:id" />`      |
| 取得方法   | `const { id } = useParams()`       |
| ネスト対応 | ネストされたルートでも同様に使える |

# 参考文献

https://www.udemy.com/share/104d6k3@42e714cVu4rgVDHDJf-ktUgk7fTCTCZNgNYDjNAfj2ycTQZlC2z-9pgXx7KV8hvxwQ==/
業務でよく使うGitコマンド10選とその使いどころ🔰初心者向け🔰

## はじめに

Gitに関する資料やリファレンスは多いものの、「実際の現場でよく使うコマンドって結局どれ？」という疑問を持つ方も多いと思います。

この記事では、私が普段の業務でよく使っているGitコマンドを厳選してご紹介します。  
**基本的な使い方と「どんなときに使うのか」をセットで解説**するので、Git初心者や学び直したい方の参考になれば幸いです。

---

## 1. `git status`：現在の状態を確認

```bash
git status
````

* **使いどころ**：変更されたファイル、add済みのファイル、現在のブランチの状態を確認したいとき

---

## 2. `git log --oneline --graph`：履歴を簡潔に表示

```bash
git log --oneline --graph
```

* **使いどころ**：履歴をツリー状に視覚的に把握したいとき
---

## 3. `git checkout -b ブランチ名`：新しいブランチを作成して移動

```bash
git checkout -b feature/new-ui
```

* **使いどころ**：新しい作業用ブランチを作成するとき
* **注意点**：現在のブランチの状態がそのまま引き継がれるため、事前にコミットしておくのが安全

---

## 4. `git stash`：作業中の変更を一時退避

```bash
git stash
```

* **使いどころ**：急に他のブランチに切り替えたいけど、コミットはまだしたくないとき
* **補足**：`-u`を付けると、新規作成ファイル（未追跡ファイル）も退避できる
* **関連コマンド**：

  * `git stash list`：退避中のリストを確認
  * `git stash apply stash名`：退避した変更を戻す（stash名を省略すると直近の退避分が適用される）

---

## 5. `git reset --soft HEAD~1`：直前のコミットをやり直す（履歴を消さずに）

```bash
git reset --soft HEAD~1
```

* **使いどころ**：直前のコミットメッセージを修正したいとき。コミットをやり直したいとき
* **注意点**：push 済みのコミットに対しては使わないのが安全


## 6. `git diff`：差分の確認

```bash
git diff
````

* **使いどころ**：どこを変更したか、コミット前に確認したいとき
* **バリエーション**：

  * `git diff --cached`：`add` 済みのファイルの差分を確認
  * `git diff ブランチA..ブランチB`：ブランチ間の差分比較
  * `git diff --name-only`：ファイル名だけ表示
  * `git diff -- 対象のファイルパス`：特定ファイルの差分を確認（`--`とファイルパスの間に半角スペースが必要）

---

## 7. `git revert`：間違ったコミットの取り消し（安全なやつ）

```bash
git revert <コミットハッシュ>
```

* **使いどころ**：すでにpush済みのコミットを「打ち消したい」とき
* **ポイント**：`reset`と異なり履歴を壊さず、**打ち消しのコミットを新たに作成する**ため安全

---

## 8. `git cherry-pick`：他のブランチの特定のコミットだけ取り込み

```bash
git cherry-pick <コミットハッシュ>
```

* **使いどころ**：メインブランチに一部の修正だけ先に取り込みたいとき
* **注意点**：コンフリクトが起きやすいため、事前に差分の確認をしておくと安心

---

## 9. `git branch -d`：使い終わったブランチを削除

```bash
git branch -d feature/old-ui
```

* **使いどころ**：マージ済みで不要になったローカルブランチの掃除
* **オプション**：

  * `-D`：未マージでも強制削除（慎重に！）

---




## 10. `git clean -fd`：Git管理外の不要ファイルをまとめて削除

```bash
git clean -fd
```

* **使いどころ**：`git status` に「Untracked files」が大量に表示されていて邪魔なとき
* **利点**：作業ディレクトリがスッキリし、ビルドファイルや一時ファイルの削除が楽になる
* **注意点**：**Git に管理されていないファイルを完全に削除**するため、重要なファイルを消さないように注意。まずは `-n` オプションで確認するのが推奨
* **オプション**：

  * `-n`：削除前に対象ファイルだけを表示（安全）
  * `-f`：削除を強制（required）
  * `-d`：ディレクトリも対象に含める


---


## まとめ

実務では「どのコマンドを、どんな場面で使うか」がわかると、Git操作がぐっと楽になります。

もし他にも「このコマンド便利だよ」というものがあれば、ぜひコメントで教えてください！

---

## 🍭おまけ：筆者のGit便利設定

```bash
# よく使うエイリアス
git config --global alias.st status
# git st で git status が可能
git config --global alias.co checkout
# git co で git checkout が可能
git config --global alias.br branch
# git br で git branch が可能
```
PythonでGUIアプリを簡単に作成：エンジニア向けPySimpleGUI入門ガイド

<h2>導入：GUIアプリ開発に挑戦したいエンジニアへ</h2>
<p>
PythonでGUIアプリを作成したいと考えているエンジニアの皆さん、どのライブラリを選択すべきか迷っていませんか？<strong>PySimpleGUI</strong>は、シンプルな構文でGUIアプリを開発できるライブラリとして注目されています。本記事では、PySimpleGUIの特徴や使い方、注意点などを解説し、GUIアプリ開発の第一歩をサポートします。
</p>

<h3>PySimpleGUIとは：シンプルな構文でGUIを構築</h3>
<p>
<strong>PySimpleGUI</strong>は、Pythonの標準GUIライブラリであるTkinterをラップしたライブラリで、より簡潔なコードでGUIアプリを作成できます。主な特徴は以下の通りです：
</p>
<ul>
  <li><strong>直感的な構文</strong>：GUIのレイアウトをPythonのリストで表現し、コードの可読性が高い。</li>
  <li><strong>豊富なウィジェット</strong>：ボタン、テキスト、スライダーなど、多様なGUI部品を提供。</li>
  <li><strong>クロスプラットフォーム対応</strong>：Windows、Mac、Linuxで動作。</li>
  <li><strong>学習コストの低さ</strong>：初心者でも短時間でGUIアプリを作成可能。</li>
</ul>
<p>
これらの特徴により、PySimpleGUIはPythonでGUIアプリを開発したいエンジニアにとって有力な選択肢となります。
</p>

<h3>よくある課題とエラー：開発時の注意点</h3>
<p>
PySimpleGUIを使用する際に遭遇しやすい課題やエラーには以下のようなものがあります：
</p>
<ul>
  <li><strong>イベントループの誤用</strong>：<code>window.read()</code>を適切に使用しないと、GUIが応答しなくなることがあります。</li>
  <li><strong>ウィジェットのキー重複</strong>：同じキーを複数のウィジェットに設定すると、値の取得時に混乱が生じます。</li>
  <li><strong>テーマの非対応</strong>：指定したテーマが存在しない場合、デフォルトのテーマにフォールバックされます。</li>
  <li><strong>ファイルパスの扱い</strong>：ファイル選択ダイアログで取得したパスを正しく処理しないと、ファイル操作でエラーが発生します。</li>
</ul>
<p>
<span style="color:red;">これらの課題を回避するためには、公式ドキュメントやサンプルコードを参考にし、適切な実装を心がけることが重要です。</span>
</p>

<h3>解決策とコード例：基本的なGUIアプリの作成</h3>
<p>
以下は、PySimpleGUIを使用して簡単なGUIアプリを作成するコード例です：
</p>
<pre><code>
import PySimpleGUI as sg

# ウィンドウのテーマを設定
sg.theme('DarkBlue')

# レイアウトの定義
layout = [
    [sg.Text('お名前を入力してください：'), sg.InputText(key='-NAME-')],
    [sg.Button('送信'), sg.Button('キャンセル')]
]

# ウィンドウの作成
window = sg.Window('サンプルGUIアプリ', layout)

# イベントループ
while True:
    event, values = window.read()
    if event == sg.WIN_CLOSED or event == 'キャンセル':
        break
    elif event == '送信':
        sg.popup(f"こんにちは、{values['-NAME-']}さん！")

# ウィンドウの終了
window.close()
</code></pre>
<p>
このコードでは、ユーザーから名前を入力してもらい、送信ボタンをクリックすると挨拶のポップアップが表示されます。<strong>sg.theme()</strong>でテーマを設定し、<strong>layout</strong>でウィジェットの配置を定義しています。
</p>

<h3>ベストプラクティスと運用上の注意点</h3>
<p>
PySimpleGUIを効果的に活用するためのベストプラクティスと注意点は以下の通りです：
</p>
<ul>
  <li><strong>キーの一意性</strong>：各ウィジェットにはユニークなキーを設定し、値の取得や更新を明確にします。</li>
  <li><strong>イベントの適切な処理</strong>：<code>window.read()</code>の結果を正しく処理し、ユーザーの操作に応じた動作を実装します。</li>
  <li><strong>レイアウトの整理</strong>：複雑なレイアウトは、<code>sg.Column</code>や<code>sg.Frame</code>を活用して整理し、可読性を高めます。</li>
  <li><strong>エラーハンドリング</strong>：ファイル操作やユーザー入力に対して、適切なエラーハンドリングを実装し、アプリの安定性を確保します。</li>
</ul>
<p>
これらのポイントを意識することで、より堅牢で使いやすいGUIアプリを開発できます。
</p>

<h3>まとめと今後の展望</h3>
<p>
本記事では、PythonでGUIアプリを作成する際におすすめのライブラリである<strong>PySimpleGUI</strong>について解説しました。シンプルな構文と豊富なウィジェットにより、初心者から上級者まで幅広いエンジニアにとって有用なツールです。
</p>
<p>
ぜひ、PySimpleGUIを使ってGUIアプリ開発に挑戦してみてください。
</p>
猿でもわかるAIの倫理・リスクシリーズ 🐵⚠️ 国際連携によるAI倫理基準作り



## 国際連携によるAI倫理基準作りとは？

### 1. はじめに：なぜ国際的なAI倫理基準が必要なのか？

近年、AI技術の進化とともに、その倫理的リスクが注目されています。特に、AIが国境を越えて活用される現代では、各国がバラバラに倫理基準を定めると技術格差や人権侵害のリスクが増加します。こうした中、「国際連携によるAI倫理基準の策定」が求められています。

本記事では、実際の国際的な取り組みと、それを踏まえた開発・運用現場での実装方法について、エンジニア視点で解説します。

---

### 2. 技術と背景：AI倫理の国際的な枠組みとは

#### ✅ 主要な国際ガイドライン

以下のような国際的な枠組みが存在します：

* **OECD（経済協力開発機構）AI原則**：透明性、公平性、安全性、人間中心性などを推奨。
* **EU AI法案（AI Act）**：リスクに応じたAI規制（高リスク用途には厳格な制約）。
* **UNESCO AI倫理勧告**：倫理、ジェンダー平等、持続可能性を強調。

#### ✅ 共通するポイント

* 人権尊重
* 差別の防止（特にアルゴリズムバイアス）
* 説明可能性と透明性
* 責任の所在

---

### 3. 実装例：社内AIシステムにおける倫理チェックの導入

例えば、社内で推薦アルゴリズムを開発・提供しているとします。このとき、AI倫理基準をどのように技術として実装すべきでしょうか？以下に簡単なPythonベースの例を示します。

#### 🧪 使用ライブラリ例：Fairlearn

```python
from fairlearn.metrics import demographic_parity_difference
from sklearn.metrics import accuracy_score

# テストデータ
y_pred = model.predict(X_test)

# 性別ごとの差を計測
dpd = demographic_parity_difference(y_test, y_pred, sensitive_features=X_test['gender'])
print(f"Demographic Parity Difference: {dpd:.3f}")
```

#### ✅ チェックポイント

* **0.1以上の差**がある場合、バイアスの可能性がある
* 定期的な再学習やデータクレンジングでバイアスを軽減

---

### 4. 実務で役立つTips & よくある落とし穴

#### 💡 実務Tips

* 開発初期段階から"倫理チェック項目"を要件定義に含める
* 内部レビュー体制を設ける（特にPO・PM・法務連携）
* 国際基準に準拠したモデルカード（Model Card）の作成

#### ❌ よくある落とし穴

* 学習データの偏りを放置しがち（特にWebスクレイピング由来データ）
* バイアス軽減が精度を落とすと勘違い（実際には調整可能）
* 倫理評価を"後付け"にして炎上リスク増大

---

### 5. 応用編：グローバル展開における運用設計

国際展開を視野に入れる場合、倫理基準の差異を吸収する仕組みが重要です。

#### 🌐 実装イメージ（擬似コード）

```python
# 各国ルールに対応したモデル選択
if country == 'EU':
    model = HighTransparencyModel()
elif country == 'JP':
    model = BalancedFairnessModel()
else:
    model = DefaultModel()
```

#### 📦 DevOps的観点

* CI/CDパイプラインに倫理検査ステップを追加（例：GitHub ActionsでFairlearnチェック）
* モデルリリースノートに倫理検査結果を添付

---

### 6. 結論：AI倫理の未来と技術者の責任

国際連携によるAI倫理基準作りは、単なる"お題目"ではなく、実務に直結する重要な要素です。技術者として求められるのは：

* 倫理的リスクを技術で管理・緩和する力
* 国際的なルールと整合性のある設計力
* チームや社会に"倫理的な視点"を伝播するリーダーシップ

これからのAI開発は、単なる精度勝負から“人に優しいAI”の実装勝負へと変化していきます。ぜひ、あなたの現場にもこの視点を取り入れてみてください。

---

### 📝 用語解説

| 用語                 | 説明                          |
| ------------------ | --------------------------- |
| Fairlearn          | Python製のバイアス検知・緩和ライブラリ      |
| Demographic Parity | 属性（例：性別）ごとに予測分布が公平である状態     |
| Model Card         | AIモデルの仕様・制約・倫理評価などをまとめた文書   |
| AI Act             | EUによるAI法案、リスクベースアプローチに基づく規制 |
| UNESCO AI勧告        | 国連によるAIに関する倫理勧告             |
個人開発で（お金をかけずに）お金を稼ぐためのポイント

こちらのエントリは [個人開発で月20万円を目指すための考え方 #初心者 - Qiita](https://qiita.com/sakes9/items/d8a94271f994ab3c26d1) に触発されて書かれたものです。なお筆者は個人で作ったサービスを無事収益化できており、法人化しています。

# AIのせいでみんなサービスやアプリを作るので

これからの時代、AIでどんどんサービスやアプリを開発できるようになるので、作ったサービスやアプリでお金をもらうこと、しかも多くのエンジニアが憧れる「ストック収入」（労働の対価ではなく毎月チャリンチャリンするやつ）は難易度があがるでしょう。ライバルが爆増するわけですからね。

あなたが思いついたアイデアを、別の人がAIに入力してさっと作っちゃうかも。広告宣伝費をかけてあとからぬかしちゃうかも。そんな時代になってしまいました。

# 個人開発者だからできる戦い方

じゃあどうすればいいか。個人開発者はできるだけお金をかけたくありません。売り上げが上がらないうちから広告費に毎月10万円も払いたくありません（これができる人は開発者じゃなくビジネスオーナーを名乗っていい気がします。）一方で、コードを生み出す自分の人件費は原材料が衣食住くらいですので非常に安く維持することができますね。これらの特徴を生かしましょう。

## 1. 広告しなくても能動的に「検索される」場所を選ぼう

これを僕はプラットフォーム戦略と呼んでいます。首記の記事でもAppStoreにアプリをリリースしていましたが、AppStoreは世界中のみんながアプリを探しに検索する場所ですので、そこで筋トレアプリで20位くらいにはいれば一定のダウンロード数を「無料で」手に入れることができます。Google Playも同じですね。

ほかにもプラットフォームはいろいろありますが、ネイティブアプリじゃなくてもWebでも「プラグイン」という市場があります。Wordpressで○○ができるプラグイン、Shopifyで○○ができるプラグイン。これらは、WordpressユーザーやShopifyユーザーが常にニーズを持って探しに来ますので、広告宣伝しなくてもそこに掲載申請するだけで一定のユーザーを獲得できます。エンタープライズだとSalesforce対応やAtlassian製品のプラグインも強いですね。

## 2. 低コストで生き延びれることを生かして3年運営してみよう

もう一つの個人開発の強みは、続けるコストが安いことです。企業だと10人のチームを維持するのに年間1億円以上コストがかかります。ということは売り上げで1億円以上儲からないと撤退してしまうわけです。個人開発者なら、生活コストを切り詰めたり、そもそも本業の隙間時間でやれば維持費はかなり抑えることができます。

Paul Grahamもこういってます（知らんけど）

https://x.com/pg_quote/status/1642341773434556418

集客コストをなぜかけるかというと「短い期間で」知名度を獲得したりしたいからです。コストをかけなくても、SNSでフォロワーを増やしたり、関連する課題をつぶやいているユーザにこういうサービスどうですか？と紹介する程度の活動を3年続けるだけで「あなたのサービスを見かけたことがある」ユーザ数は自然増加していきます。

ブログを書いたり、プレスリリースを安いサービスで3か月に一度新機能のお知らせを打つとかでもいいですね。決して3年間アップデートもせずほったらかせという意味ではありません。月に1回、2月に1回でもいいのでユーザーの声を聴き、マニュアルを整備したり使い勝手を上げていけば大丈夫です。毎月数百万以上の支出がある企業にはできない戦い方です。

私が運営するサービスも、広告費は年間数万円以下なんですが、4年たったいまでは毎日数十人の無料サインアップがあり、企業利用も勝手に紹介が紹介を呼んで使っていただいています。特にツールなんかは「利用者数がいる」「あの人あの企業も使ってる」みたいなのが利用する動機になったりしますからね。

# となると、1年間もうからなくても苦じゃないものを選ぼう

- AIのせいで作るハードルが下がり「知ってもらう」「使ってもらう」「お金を払ってもらう」ハードルは反比例して上がっていく
- 作るほうはプロでも、これらのマーケティング活動は素人な場合がほとんど
- 集客コストが低いプラットフォームに身を置き、長期間低コスト運営がおすすめ

というまとめなのですが、ここで一つ問題があるとすると「3年間も心が持たない」という問題です。なので、いくつかサービスを作って反応がよかったものだけ続けたり、自分がユーザーとしてうれしくなるものを作ったりして、儲からなくてもせめてユーザーから反応があれば続けられる、ようなものを題材に選ぶといいでしょう。

# おまけ：年100万円を分解してみよう

おまけですが、個人的に広告モデルはモバイルアプリ以外厳しいんじゃないかと思います。年間100万円を売り上げよう、と思ったときに買い切りでもサブスクでもいいのですが、

- 100万円 × 1人（1社）に払ってもらう...は労働収入なので除外
- 10万円買い切りを月に1人（1社）or 月額9万円を1人(社)
- 1万円を100人 or 月額9000円を10人
- 1000円買い切りを1000人 or 月900円を100人
- 100円買い切りを1万人 or 月90円を1000人
- 10円のリワード広告を10万回
- 1円のクリック広告を100万回

みたいな構成があるわけです。「知ってもらう」「使ってもらう」のハードルが上がる時代においては、意外と1万円買い切りを100人か、1000円買い切りを1000人、くらいが個人にとって一番ハードルが低い可能性はありますね。

それではみなさん、よき個人開発ライフを！
yfinanceの代用？pandas_datareaderで株価取得

# 概要

[自分の過去記事](https://qiita.com/AzukiImo/items/ec69b6afa81345c47cfc)を参考に日経225データを取得しようとyfinanceを利用！

```python
import yfinance as yf
data = yf.download("^N225", start="2025-01-01", end="2025-05-10")
```

ここで、エラー:scream:
```python
Failed to get ticker '^N225' reason: Expecting value: line 1 column 1 (char 0)
[*********************100%%**********************]  1 of 1 completed
1 Failed download:
['^N225']: YFTzMissingError('$%ticker%: possibly delisted; No timezone found')
Empty DataFrame
Columns: [Open, High, Low, Close, Adj Close, Volume]
Index: []
```
yfinanceのバージョンも最新にアップデートした！気を取り直して、トヨタの株式で再度``yf.download("7203.T", start="2025-01-01", end="2025-05-10")``。しかし！再びエラー:scream::scream::scream:


## 別の方法でダウンロード　pandas_datareader
pandas_datareaderで対応してみたいと思います。

:::note
利用するライブラリ
pip install pandas-datareader
:::
最新バージョン更新日が古いような気がするのですが、動作!!

~~~python: 日経225取得
import pandas_datareader.data as pdr

ticker_symbole = "^NKX" # 日経225
start = "2025-01-01"
end   = "2025-05-10"
data = pdr.DataReader(ticker_symbole, "stooq", start=start, end=end)

print(data)
#                Open      High       Low     Close      Volume
# Date                                                          
# 2025-05-09  37332.57  37557.41  37219.03  37503.33  2013502800
# 2025-05-08  36863.38  36977.35  36606.71  36928.63  1372579300
# 2025-05-07  36903.66  36942.38  36731.39  36779.66  1562989800
# 2025-05-02  36636.55  36976.51  36606.58  36830.69  1410466200
# 2025-05-01  36197.04  36544.15  36040.05  36452.30  1315774200
~~~

# 1. yfinanceが動作しない
ライブラリのyfinanceの調子が良くないみたい。時々起こる現象で **多くの場合、最新版にすることで動作する** ようになります。今回の2025年5月の段階ではうまく動作していないっぽい[^0]。

# 2. pandas_datareaderとは

pandas_datareaderは、様々なデータベースから経済っぽいデータを取得できるライブラリのようです。使い方や利用できるデータベースの説明などは[公式のドキュメント](https://pandas-datareader.readthedocs.io/en/latest/)を参考にしてください。

:::note
代表的なもの５つ抜粋
* Tiingo
* World Bank
* OECD
* Stooq：今回はこれを使う
* Yahoo Finance：やっぱりNGだった
:::

https://pandas-datareader.readthedocs.io/en/latest/


# 3. サンプル
使い方の基本は、株式の銘柄コード、取得開始日、取得終了日を設定すればOKとなります。注意点は、データソースに**stooq**を指定する部分となります。データソースによって銘柄コードの書き方が異なってきます。

**stooq**での銘柄コードの書き方は、**番号＋.JP**となります。番号のあとに「.JP」です[^1]。

~~~python: stooq仕様
import pandas_datareader.data as pdr

ticker_symbole = "7203.JP"  # トヨタの銘柄コード.JP 
start = "2025-01-01"
end   = "2025-05-10"
data = pdr.DataReader(ticker_symbole, "stooq", start=start, end=end)
~~~

[stooq](https://stooq.com/)のサイトから銘柄を検索して、銘柄コードを調べることができます。下図はトヨタの株価となります。画像の赤い枠で囲まれた部分が銘柄コードに記述するべき値です。



　　　　　　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3725285/40b496d4-3836-44d4-a95d-f51cbc09d6a4.jpeg" width=70%>

日経225のようなインデックスについての銘柄コード（ティッカーシンボル）は[stooqのインデックス一覧](https://stooq.com/t/?i=510)から確認できます。

### サンプル
| 指標名 | シンボル |
|-------|---------:|
|日経225| ^NKX |
|S&P 500| ^SPX|
|ダウ平均株価|^DJI|

# 4.  stooqからCSVファイルをダウンロード
取得する銘柄が少ない場合は、[stooq](https://stooq.com/)のサイトからCSVファイルとして直接ダウンロードするのが簡単かと思います。上図にある緑色の枠で囲まれた **Histrical data** の部分をクリックすることでダウンロードページに移動します。為替レートはプログラムではなぜかエラーになるし、webページからのダウンロードが楽でした:sweat_smile:

# 注
[^0]: 主観的ではありますがyfinanceでは詳しい情報が取得できた気がしました。
[^1]: yfinanceだと番号.Tのように取引所を表すシンボルを追加するタイプでした。
Ngrokの使い方・実際に私が使っている事例を紹介


こんにちは。
日々の開発やデモ環境の構築において、**Ngrok**には本当にお世話になっています。  
特にTwilioのWebhookやWebSocketベースのデモ、Tokenサーバなどを社内外で共有する際、Ngrokがなければ始まらないというレベルです。

今回は、**私自身がどのようにNgrokを使っているか**に加えて、  
**有償版のメリット**、そしてどんな人におすすめできるかをまとめてみたいと思います。

---

##  Ngrokとは？

Ngrokは、ローカルで起動しているサーバーを、**インターネット上からアクセス可能にするツール**です。  
HTTPSトンネルを通して、ローカル開発環境を即座に外部公開できるのが最大の特長です。

たとえば：
- `localhost:3000` で動いているアプリを  
- `https://your-subdomain.ngrok.io` といったURLで外部からアクセスできるように

開発中のAPIやWebhookのテストに非常に便利なサービスです。

---

##  Ngrokが解決してくれる課題

開発や検証をしていると、こういった課題に直面することがありませんか？

- Webhookを受け取りたいけど、ローカル環境にパブリックなURLがない
- 社内外のメンバーに、今開発中のデモを見せたい
- クラウドにデプロイする前に、エンドツーエンドで接続確認したい

Ngrokがあれば、**ローカルのポートをそのままインターネットに公開**できるため、  
これらの課題を一発で解決できます。

---

## 技術的な仕組み（ざっくり）

Ngrokはクライアントツール（CLI）をローカルで起動し、Ngrokのサーバーとトンネルを張ります。

```bash
ngrok http 3000
```

このように起動すると、Ngrokのグローバルサーバーとセキュアなトンネルが確立され、  
ローカルのポート（この場合3000番）が外部URLでアクセス可能になります。

---

## 基本的な使い方

[ngrokのサイト](https://ngrok.com/)からアカウントの作成を実施します。
アカウント作成が完了するとインストール手順が表示されます。
画面に表示される手順を下記に記載しておきます。
### 1. インストール

```bash
brew install ngrok
```

### 2. 認証トークンの登録

トークンは、導入手順のコマンドの中に記載されています。

```bash
ngrok config add-authtoken <YOUR_AUTH_TOKEN>
```

### 3. HTTPトンネルの起動

```bash
ngrok http 3000
```

起動すると、以下のようなURLが払い出されます：

```
https://random-subdomain.ngrok.io → http://localhost:3000
```

このURLをWebhook送信元や外部の人に共有するだけで、ローカル環境が即座に使えるようになります。

---

## 有償版が本当に便利！

無料版でも十分使えますが、私が最も重宝しているのは**有償版の固定サブドメイン機能**です。

```bash
ngrok http 3000 -subdomain=twiliotest
```

こうしておくことで、Twilioや他の外部サービスのWebhook URLを**毎回変えずに済む**ようになります。

さらに：

- Basic認証の追加
- 複数プロセスの管理（トンネル設定をYAMLで記述）
- セッション管理やログ閲覧

といった機能も有償版ならではです。

---

## 🧪 私の活用シーン

Twilioのプリセールスエンジニアとして、私は以下のような場面で活用しています：

- TwilioのWebhook（SMS受信や通話の開始など）を受け取るためのエンドポイントとして
- お客様に手軽にデモを触ってもらうために
- WebSocketサーバへの連携として
- TokenサーバやTwiMLサーバとして
- AIと連携したリアルタイム音声処理（ConversationRelay）

これらをクラウド環境に上げなくても、**すぐに共有できて即座にフィードバックがもらえる**のは、Ngrokならではです。

---

## ✨ まとめ・今後の展望

Ngrokは、**ローカルと外部世界をつなぐ「魔法のトンネル」**とも言える存在です。  
とにかく手軽で便利、そして応用範囲が広い。
Twilioとの相性も抜群で、Webhookや音声通話、リアルタイム処理との組み合わせにおいては必須とも言えます。
すでに5年間利用を続けていますが、これからも利用し続けると思いますし、非常にニッチですが大切なツールです。
CloudflareのせいでSSLが取れない時の対処法

# はじめに
こんにちは！高校生でプログラミング勉強中のCureSabaです。

今回value-domainのcoreserverにてcloudflareが邪魔をして証明書が取れないと言うことがあったのでメモとして残しておきます

# 対処法
結論から言いますと`SSL/TLS encryption`を`Flexible`にすることで直りました
![IMG_0262.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/690099/957074cf-9141-4157-b728-24e96e8f8185.jpeg)


# 原因の考察
初期で`encryption mode`が`Automatic mode`であったことが問題だと思います。

私の環境では、一度証明書を取得した後、自動的にモードが Full (strict) に切り替わりました。
その後、ドメインのAレコードを書き換えたため、証明書の更新ができないダウンタイムが発生し、その間にcoreserverに保存されていた有効期限が切れました。そして、Aレコードを coreserver に戻したところ、strict モードが原因でcertbotの接続が拒否され、認証ができなかったと考えています。


# 終わりに
もし、この記事が役に立ったと思ったら、ぜひコメントやシェアをお願いします。また、質問や改善点などがあれば気軽にコメントしてください！

それでは、良いプログラミングライフを！
「y_hat」の意味と使い方：機械学習・統計モデリングにおける命名の基礎

# 「y_hat」の意味と使い方：機械学習・統計モデリングにおける命名の基礎

Pythonなどのコードを読んでいると、`y_hat` や `theta_hat` といった変数名を目にすることがあります。この「_hat」という接尾辞には、単なる命名の癖以上の意味が込められています。

本記事では、統計・機械学習における「_hat」の由来とその使い方について、数学的背景から解説します。

![yhat.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208980/35f9829f-e229-4eb8-9f93-05ef706aeb4a.png)


## 1. 数学における「hat（ハット）」の意味

もともと「hat（帽子）」という言葉は、数学や統計学において「推定値」や「予測値」を示す**記号（ˆ）**として使われてきました。

特に**統計学の推定理論（Estimation Theory）**では、真の母数や関数に対して、それをデータから推定した値を示すために**ハット記号**が用いられます。

たとえば、真のパラメータ $\theta$ に対する推定値は、次のように表現されます。


$\hat{\theta}$

このように、変数の上に**ハット記号（^）をつけることで、「これは推定された値である」ということを明示**しています。



## 2. プログラミングにおける `_hat` の役割

プログラミング言語では変数名に上付き記号を使うことができないため、**ハット記号の代用として `_hat` を変数名に付ける**習慣があります。

この記法によって、コード上でも「これは推定値・予測値である」という意味を伝えることができます。

### 実際のコード例

```python
y_true = [1, 0, 1, 1]        # 実際の観測値（正解ラベル）
y_hat = [0.8, 0.2, 0.9, 0.7]  # モデルの出力（確率などの推定値）

# 予測ラベル（閾値0.5で二値化）として扱う場合は y_pred を使うことも
y_pred = [1 if y > 0.5 else 0 for y in y_hat]
```

このように、`y_hat` はモデルが出力した「**連続的な推定値**」を意味し、`y_pred` はその値を元にした「最終的な**予測ラベル**」であることが多いです。





## 3.類似する接尾辞との比較

機械学習や統計モデリングでは、他にもさまざまな接尾辞が用いられます。以下に代表的なものを示します。

| 接尾辞  | 意味                 | 例                                     |
| ------- | -------------------- | -------------------------------------- |
| `_hat`  | 推定値・予測値       | `y_hat`（確率などのモデル出力）  $\hat{y}$      |
| `_true` | 真の値・観測された値 | `y_true`（教師データ、実測値）         |
| `_pred` | 最終的な予測ラベル   | `y_pred`（閾値処理された分類結果など） |
| `_est`  | 推定値（estimate）   | `theta_est`（推定されたパラメータ）    |

`_hat` と `_pred` は文脈によって似た意味で使われることもありますが、**`_hat` はより数学的な背景に基づいた推定値**を指すのが一般的です。





## 4. 実務での意義：可読性と保守性の向上

このような命名規則を守ることで、チームでの開発やレビューが格段にスムーズになります。特に以下のような場面で効果を発揮します。

- **コードの意図が一目でわかる**：`y_hat` とあれば「これは予測された値だ」と即座に理解できる。
- **バグの予防につながる**：`y_true` と `y_pred` を取り違えるようなミスを避けやすくなる。
- **ドキュメントや数式との対応がとれる**：数式の $\hat{y}$ とコードの `y_hat` が対応していると、読み替えが容易。



## 5. まとめ

- `y_hat` のような「_hat」付きの変数名は、**統計学でのハット記号（^）に由来**し、推定値・予測値を意味します。
- プログラム中では、**ハット記号の代わりに `_hat` を使うのが慣習**です。
- 他にも `_true`, `_pred`, `_est` などの接尾辞があり、文脈に応じて適切に使い分けることが重要です。
- こうした命名のルールは、**実務においてコードの可読性や保守性を高める**効果もあります。
javaチートシート

## Javaの基本ルール一覧（WSL/Ubuntu共通）

正直気の進まないjavaですが、どうしても触らければいけない状況になってしまったので最低限のルールを備忘録として残しました

#### ① ファイル名とクラス名は一致させる
	public class Hello → ファイル名は Hello.java
	一致していないと コンパイルは通るが実行時にエラーになる

#### ② メインクラスには main メソッドが必要
	public static void main(String[] args) {
	    // エントリーポイント
	}
	Javaアプリの実行はここから始まる
	main がないと java Hello しても "Main method not found" エラー

### ③コンパイル （javac で .java → .class に）
	javac Hello.java
	生成される Hello.class は JVM用のバイトコード
	.java はソースコード、.class は中間コード

#### ④ 実行時は .class の拡張子を つけない
	java Hello   # ← OK
	java Hello.class  # ← ❌ エラー

#### ⑤ クラスパス（パッケージ）に注意する
	複数のクラスファイルやパッケージに分ける場合、
	コンパイル時に -d オプションで出力先を指定
	実行時に -cp（classpath）を指定

	javac -d . MyApp.java
	java mypackage.MyApp

#### ⑥ コメントや構文のルールも厳格
	セミコロン ; の付け忘れ → コンパイルエラー
	大文字小文字が区別される → Main と main は別物
	予約語は使えない（class, int, public など）


## 実行までの流れまとめ（ルール付き）

# ファイル名とクラス名は一致
vi Hello.java

# 中身
public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello, world!");
    }
}

# コンパイル
javac Hello.java   # → Hello.class ができる

# 実行（拡張子なし）
java Hello
CloudFrontの基本

## はじめに
こんにちは、愛知でWEBエンジニアをしているkokuboと申します。

今回はCloudFrontについて基本の部分や自分の知らなかったこと、他にどんなCDNがあるのかを簡単にまとめてみました。

## CloudFrontとは
![スクリーンショット 2025-05-14 11.17.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1033765/de19583c-4b65-4487-a34c-9b03122098e2.png)

- AWSが提供するCDN
- 世界中のエッジロケーションからユーザーに近い位置で配信
  - 世界中にCloudFrontのサーバーがあり近くのサーバーでキャッシュするイメージ 
- 動的・静的・ストリーミング配信に対応
- HTTP/HTTPS両方に対応。SSL証明書はACMで無料発行
- キャッシュによる高速化 + オリジン負荷分散

## CloudFrontのキャッシュの流れ
下記の図のようにキャッシュがCloudFrontにある場合はCloudFrontからユーザーにレスポンスを行います。
その結果、急激なEC2へのアクセス増加時にもサーバーダウンのリスクを抑えることができます。
![スクリーンショット 2025-05-14 10.34.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1033765/42b32dd4-96a3-4236-a16d-fa476f110c97.png)

## CloudFrontの主な要素
- ディストリビューション
  - CloudFrontの設定単位
- オリジン
  - どこに配信をするか（S3,ALB,EC2,外部サイトなど）
- ビヘイビア
  - パスごとのルール設定（オリジン、TTL、Header制御など）
- オリジングループ
  - 複数オリジンのフェイルオーバー構成
- キャッシュポリシー
  - TTLやCookie/Headerなどのキャッシュ制御定義
- レスポンスヘッダーポリシー
  - セキュリティーヘッダーなどの追加設定

## CloudFrontの料金（東京リージョン）
 ↓東京リージョンは他のリージョンに比べ割高なようです
![スクリーンショット 2025-05-14 10.53.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1033765/1d72d95a-d62c-44d8-b18c-7f66491875c7.png)

- CloudFrontで発生する料金は以下の2項目
  - データ転送量
  - リクエスト数
- 料金計算の具体例
  - 月間17万PVあるワードプレスのサイトに実装した場合
    - データ転送料金
      - 17万PV × 2.5MB = 425GB/月
      - 425GB × $0.114 = 約$48.45/月
    - リクエスト料金
      - 17万PV × 25リクエスト = 425万リクエスト/月
      - 4,250,000リクエスト ÷ 1,000 × $0.009 = 約$38.25/月
    - 合計料金
      - 月に約$86.7かかる

## 他のCDNとの比較
- CloudFront
  - 従量課金
  - 世界中に700以上のエッジロケーション、柔軟なキャッシュ設定
  - すでにAWSを使用している、中規模〜大規模サイトに使用
- CloudFlare
  - 階層型プラン
  - 無料プランで試しやすい、DDosも標準で搭載（L3~L7）
  - 転送量がかからない、小〜中規模のサイトに使用、とにかく安い
- Akamai
  - 1年契約、一般的に最も高価
  - 厳しいセキュリティーやパフォーマンスを最優先したい場合に使用、トヨタ自動車などのでかい会社で古くから使用されている
  - 大規模なサイトに最適

## まとめ
業務で使用しているCDNには改善の余地が多くあると感じ、今後少しづつ実装をしていきたいと思います
- 意外と料金がかかっている
  - それぞれのCloudFrontの設定を確認し、他のCDNを使用した場合と比較してみる
  - CloudFrontからCloudFlareに変更して料金を抑えた記事がいくつかあった
- WAFだけではなくCloudFrontの設定でセキュリティーを高めることができそう
  - ビヘイビアの設定を再度確認する
- より効率的なキャッシュの設定を行う
- S3を使用してアクセスログの分析をできるようにする
FinOpsフレームワーク解説 〜第３回〜 行動規範（Principals）

## 目次：
今日のテーマはFinOps構成要素の一つめの「行動規範(Principal)」についてです。
![スクリーンショット 2025-05-14 11.07.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3895754/70605aed-e9d8-4806-a353-b2176966e315.png)


FinOpsにおける順守するべき行動規範を構成する下記要素について説明していきます。
　1. チーム間のコラボレーション
　2. ビジネス価値主導の意思決定
　3. 所有権と説明責任
　4. アクセス可能で正確なデータ
　5. 中央集権的なFinOpsチーム
　6. 変動コストモデルの活用


## 今日の一枚まとめ：
![スクリーンショット 2025-05-14 10.49.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3895754/779d7b60-b3f5-40bb-93e6-05f490afd448.png)


## 内容：
FinOpsの原則（Principles）詳細解説
各原則について、定義・背景・具体例・注意点の4つの観点から体系的に解説します。
（この観点は特にフレームワークに基づく分解ではありません、個人的に理解に助かりそうだな、という区分けで色々書いてみたものです）

#### 1. チーム間のコラボレーション
* 定義
　部門横断的な協働体制を構築し、クラウドコスト管理を共同責任として取り組む姿勢。
* 背景
　クラウド利用では、エンジニアの技術判断と財務部門の予算管理が衝突しやすいため。例えばエンジニアが性能優先でリソースを過剰確保すると、財務部門の予算管理と対立します。
* 具体例
	•	クラウド利用申請フローに「技術審査」と「財務審査」の両ステップを導入
	•	月次レポートを財務部門が作成し、エンジニアチームと共同で分析会議を実施
* 注意点
	•	部門間の専門用語の違いを解消するための用語集作成が必要
	•	共同責任体制が「責任のなすりつけ合い」にならないようKPIを明確化

#### 2. ビジネス価値主導の意思決定
* 定義
　クラウド投資の判断基準を技術的利便性からビジネス成果（ROI）に転換すること。
* 背景
　クラウド支出の大きな部分がビジネス成果に直結しない「ダークコスト」だと言われることがあり、投資対効果の明確化が急務。
　参考記事：https://japan.zdnet.com/article/35177489/
 　　　　　　https://prtimes.jp/main/html/rd/p/000000006.000096580.html

* 具体例
	•	新規サービス導入時に「期待収益増加額 vs 月間クラウドコスト増加額」をシミュレーション
	•	A/Bテストでコストパフォーマンスを比較（例：$500/月増で売上+5% vs $300削減で売上±0%）
* 注意点
	•	短期的なコスト削減が長期的な技術的負債を生まないようバランスが必要
	•	ROI計算の際は間接的な効果（顧客満足度向上など）も定量化する工夫を

### 3. 所有権と説明責任
* 定義
　「誰が使うリソースは誰が管理する」という責任体制の構築。
* 背景
　クラウドリソースに適切なオーナータグが付与されていない現状（AWS調査）があり、コスト配分の不透明さが課題。
 　参考記事：https://aws.amazon.com/jp/blogs/aws-cloud-financial-management/gs-create-and-enforce-your-tagging-strategy-for-more-granular-cost-visibility/
* 具体例
	•	タグ付けポリシーを標準化（例：「部署-プロジェクト-環境」の3層構造）
	•	部門別ダッシュボードでリアルタイムコスト可視化（CloudHealth等のツール活用）
* 注意点
	•	タグ付けルールの強制実施にはクラウドネイティブなポリシー管理ツール（AWS Config等）が有効
	•	オーナー不在リソースへの対処フローを事前に定義

#### 4. アクセス可能で正確なデータ
* 定義
　関係者がリアルタイムに正確なコストデータへアクセスできる環境整備。
* 背景
　従来の月次レポートでは対応が遅すぎ、クラウドの従量課金特性に対応できない課題。
* 具体例
	•	コスト異常値を検知するとSlack/Teamsへ自動通知（AWS Budgets連携）
	•	マルチクラウド対応BIツール（Tableau/Power BI）で統合レポート作成
* 注意点
	•	データ精度確保のため、タグ付け率98%以上を目標に設定（例）
	•	機密情報を含むコストデータのアクセス権限管理を厳格化
	
#### 5. 中央集権的なFinOpsチーム
* 定義
　全社的なガバナンスを担う専門チームの設置。
* 背景
　部門ごとにバラバラな管理手法では、規模の経済や標準化のメリットを活かせないため。
* 具体例
	•	クラウド契約の一括交渉でSavings Plansを30%割引獲得
	•	全社共通のクラウド利用ポリシー策定（例：「開発環境は平日8-20時のみ起動」）
* 注意点
	•	中央チームが「上から目線」にならないよう、現場との対話チャネルを確保
	•	クラウドプロバイダー中立性を保つためマルチクラウド専門家を配置

#### 6. 変動コストモデルの活用
* 定義
　クラウドの従量課金特性を最大限活用する運用手法。
* 背景
　オンプレミス時代の固定費思考から脱却し、真のクラウドネイティブなコスト管理が必要。
* 具体例
	•	バッチ処理にスポットインスタンスを採用しコスト70%削減
	•	サーバーレスアーキテクチャ（Lambda）でアイドル時間のコストをゼロ化
* 注意点
	•	急激な価格変動リスクに対応するため、スポットインスタンス利用上限を設定
	•	クリティカルなワークロードにはリザーブドインスタンスを併用


## まとめ
これらの原則を実践する際は、ツール選定だけでなく「組織文化の変革」が最大の鍵となります。
日本企業においては特にこの組織レベルの変革は非常に重たいタスクになってくるかと思います。実際に私もさまざまなお客様と会話する中で、組織間の隔たりや派閥(!)、また横断組織の難しさを感じるシーンが多々あります。。

ペルソナやそれ以降に出てくる要素をしっかり理解した上で、キーパーソンを抑えることが大事だなと改めて感じています。
したがって、次項では、これらの原則を具体化する主要ペルソナとその役割について解説します。
Herokuでpromote先にビルドパックを事前インストールしておく必要がある

Herokuで開発環境からステージング／本番にpromoteする構成の場合、
ビルドパックがpromote先にインストールされていないとpromote後にアプリが正常に動かない

以下、Nodeアプリの例
```
heroku ps:scale web=0 -a ＜アプリ名＞ 
heroku git:clone -a ＜アプリ名＞ 
cd ＜アプリ名＞
echo {} > package.json
git add package.json
git commit -m "add empty package.json for run buildpack"
git push heroku master
```

その後promoteしたら
```
heroku ps:scale web=1 -a ＜アプリ名＞
```
【Reactアプリ100本ノック】11 Quizz

## はじめに
ゆかっしゅです。
2021年に事務職からデザイナー/コーダーにジョブチェンジをし、現在はフロントエンドエンジニアにスキルアップするべく、モダンフロントエンドを学習しています。

ReactやTypeScriptの基礎学習は終了したのに、なかなか0から自分だけでアプリを作れないので手を動かすべく「Reactアプリ100本ノック」 に挑戦してみようと思います。

https://qiita.com/Sicut_study/items/cbf1a15fa31727a74514

## Reactアプリ100本ノックルール
- 主要なライブラリやフレームワークはReactである必要がありますが、その他のツールやライブラリ（例: Redux, Next.js, Styled Componentsなど）を組み合わせて使用することは自由
- TypeScriptを利用する
- 要件をみたせばデザインなどは自由

## 10. Navigation
![スクリーンショット 2025-05-14 105944.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4068307/b047c3d1-cee7-4d36-9b95-b2b8680660b5.png)

## 問題
早押しクイズアプリ

## 目的
早押しクイズなので時間制限が必要になります。
カウンターで行ったカウントダウンを応用して実用的なアプリをつくります

## 達成条件
- クイズ問題が表示されている
- 10秒のカウントダウンがある
- 解答フォームがある
- 解答ボタンがある
- 解答ボタンを押したら答えが正解か不正解かを表示
- 解答ボタンを押したら解答時間と答えを表示
- 解答の表記ゆれ(例えばAが答えなら「えー」「a」も正解とする)

## 実際に解いてみた
### 利用技術
React(19.0.0)
TypeScript(5.0)
Next.js(15.3.1)
Tailwindcss(4.0)
jotai(2.12.3)
framer-motion(12.10.4)
Vercel

解答時間　1時間半

プログレスバーのところはreaxt-motionを使いました。
便利～～～

### リンク
https://react-app-100.vercel.app/


## おわりに
次回からのお題が提供されていないので、Chat GPTにお題を作ってもらおうと思います。
【備忘録】シングルトンパターンについて

## 初めに
アプリで、クラスのインスタンスが何個も作られてしまう。
そのような設計やコーディングをしていませんか？

私もその様な書き方をしていたのですが、
今回のシングルトンパターンを知り、『他のアプリなどがなぜ重くならないのか』、『なぜ設定を維持できているのか』を少し理解したかもしれません。

今回は、そのシングルトンパターンについてのメモです。

## シングルトンパターンとはなにか
シングルトンパターンは、特定のクラスのインスタンスがアプリケーション全体で、ただ一つだけ生成されることを保証するためのデザインパターンです。
* **利用例**
	**1. サーバーとの通信を行うクラス**： 複数のインスタンスが作成され、複数の接続やセッションを管理することになってしまうと効率が悪くなり、リソースの浪費となります。
    シングルトンパターンを使うことで、一つのインスタンスだけを使用しサーバーとのやり取りを一元管理できます。
    
	**2. 設定を管理するクラス**： アプリケーション内の各部分が同じ設定情報を必要とするとき、複数のインスタンスを作る代わりに、一つのインスタンスを共有することで一貫性を保つことができます。
    例えば、ゲームの音量設定やコントローラ設定なども、シングルトンパターンにより、一度設定した情報をアプリ内のどこからでも再利用できます。

* **シングルトンパターンのメリット**
 ・一貫性の確保：全体で同じインスタンスを利用するため、設定や状態の一貫性が保たれます。
 ・リソースの節約：複数のインスタンスを生成しないため、メモリやリソースの浪費を防ぎます。
 ・グローバルアクセス：アプリケーションのどこからでもインスタンスにアクセスできます。
	
シングルトンパターンを使用することで、一度作成したインスタンスを再利用することが可能となります。

## 実際のコード
例として、サーバとのやり取りを担うServerConnectクラスを用意します。

```ServerConnect.cs 
    public class ServerConnect
    {
        private static ServerConnect _instance;

        /// <summary>
        /// インスタンス
        /// </summary>
        public static ServerConnect Instance => _instance ?? (_instance = new ServerConnect());

        /// <summary>
        /// プライベートコンストラクタ
        /// </summary>
        private ServerConnect()
        {
          //サーバ接続に必要な設定など
        }

        /// <summary>
        /// 処理１
        /// </summary>        
        public void ServerSession()
        {
          //接続処理
        }
    }
```
重要なポイントとして、
コンストラクタがprivateメソッドになっています。
これにより、外部からのインスタンスを防ぎ、複数作成させない様にします。

次に、
``` C#
 public static ServerConnect Instance => _instance ?? (_instance = new ServerConnect());
```
こちらで、初めてインスタンスしたときにコンストラクタで生成し、1度でも存在する場合新たに生成しない様になります。

メイン処理で使用する場合は以下の様になります。
``` Main.cs
    class Main
    {
        public void UploadDate()
        {
            ServerConnect serverConnect = ServerConnect.Instance;

            serverConnect.ServerSession();
        }
    }
```
ServerConnect.Instanceで、既存のServerConnectを呼び出し、ServerSessionメソッドを使用しています。
これにより、アプリ内で同じServerConnectを使うことができました。

## 最後に
今回シングルトンパターンについてのメモでした。
シングルトンパターンを使うことでアプリ内で同じインスタンスを利用するため、設定や状態の一貫性が保つことができます。
クラスを作る際に、コンストラクタはプライベートメソッドで外部から作られない様にすると尚、一貫性が出ます。
JiraとConfluenceの違いと使い分け方をわかりやすく解説！


# JiraとConfluenceの違いと使い分け方をわかりやすく解説！

業務で「**Jira**」と「**Confluence**」を使っているけど、
Jiraのスクショ
![jira.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125746/8f36afe2-d8a4-4aca-a827-3ba71f534be7.png)
Confluenceのスクショ
![スクリーンショット 2025-05-14 10.59.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125746/72def807-1515-421b-b177-b90522f0f4fa.png)


* 何が違うの？
* どっちに何を書けばいいの？
  と迷う方も多いのではないでしょうか？
  
まず知っておきたいのは、
JiraもConfluenceも、アトラシアン（Atlassian）というオーストラリア発のIT企業が提供する製品だということ。

プロジェクト管理とナレッジ共有、それぞれに特化したツールとして、多くの開発現場や企業で使われています。

この記事では、JiraとConfluenceの違いや使い方、
そして**実際の使い分け方の具体例**を交えて、
誰でもすぐに理解できるように解説します！

---

## ■ JiraとConfluenceのざっくり比較

| 項目     | Jira                | Confluence          |
| ------ | ------------------- | ------------------- |
| 主な用途   | タスク管理・プロジェクト管理      | ドキュメント管理・ナレッジ共有     |
| 対象     | 開発チーム・プロジェクトチーム     | 全社的な情報共有・文書管理       |
| 形式     | チケットベース（課題カード）      | ページベース（Wikiのような文書）  |
| 使われ方の例 | バグ管理、スプリント管理、進捗追跡など | 仕様書、議事録、社内マニュアルなど   |
| 時間軸の特徴 | 「今」と「これから」の進行中タスク   | 「過去」と「将来に残したい情報」の記録 |

---

## ■ Jiraとは？──タスクを「動かす」ツール

### 🔹 できること：

* タスクやバグのチケットを登録
* ステータス（未着手、進行中、完了）を管理
* ガントチャートやスクラムボードで進捗確認
* 担当者や期限を明確化

### 🔹 使うシーン：

* プロジェクトのスプリント計画
* バグ報告と修正対応の管理
* タスクの優先順位付けと進行状況の共有

---

## ■ Confluenceとは？──情報を「残す」ツール

### 🔹 できること：

* 社内Wikiのように文書をページで作成・管理
* ページ同士のリンクや階層構造で整理
* テンプレートで議事録や仕様書も簡単作成
* コメントや編集履歴でチームコラボレーション

### 🔹 使うシーン：

* ミーティング議事録の記録
* 要件定義や技術設計のドキュメント化
* 新人向けの業務マニュアル作成

---

## ■ どう使い分ければいいの？

| 内容                 | 使うべきツール        |
| ------------------ | -------------- |
| タスクを誰がやるか、いつまでか    | **Jira**       |
| なぜこのタスクをやるのかの背景説明  | **Confluence** |
| 会議の議事録             | **Confluence** |
| バグの報告と修正状況の確認      | **Jira**       |
| プロジェクトの計画（スプリントなど） | **Jira**       |
| 要件定義書や設計書の共有       | **Confluence** |

---

## ■ 実際の連携例

JiraとConfluenceは連携させることで、より効果的に使えます。

例えば：

* **Confluenceに書いた要件定義ページに、Jiraチケットを貼る**
  　→ ドキュメントと実行タスクがリンクされ、迷わない！
* **JiraのエピックからConfluenceの仕様書ページを参照**
  　→ 背景や詳細をすぐ確認できる！

---

## ■ まとめ

| 覚え方のコツ                       |
| ---------------------------- |
| 「**Jiraは動かす、Confluenceは残す**」 |

* **Jira** → タスク管理、実行、追跡
* **Confluence** → 情報共有、記録、説明

それぞれの特徴を活かして、「行動」と「情報」をうまく分けて使うのがポイントです。

---

## よくある質問（FAQ）

**Q. Confluenceにタスクを書いてはダメ？**
→ 書いてもOKですが、進行・管理はJiraでやる方が効率的です。

**Q. Jiraだけ使えばいいのでは？**
→ タスクは回せますが、情報の背景・経緯・ナレッジが残りません。Confluenceと組み合わせると理解と再利用が進みます。
ChatGPTとDevToolsで3ヶ月放置されたモーダルバグを1日で直した話



#  発生していた問題

* JavaScript単体のSPA（Single Page Application）
* モチーフ選択後、モーダル（ポップアップUI）が表示される仕様
* 本来：モチーフをクリックした時だけモーダルが開く
* 実際：ページ遷移後、**何もしていないのに勝手に開く**



#  バグの調査手順（＋ChatGPTの使い方）

### ① DevToolsで「何が起きたか」を追う

```js
modal.classList.remove('hidden');
```

この1行が、なぜか**画面遷移時に呼び出されていた**。

* `openModal()` 関数が `DOMContentLoaded` 時にも呼ばれている？
* もしくは**イベントバインドの重複**か？




### ② ChatGPTに相談

私が聞いたプロンプト：

> 「画面遷移時にJSのモーダルが勝手に開いてしまいます。openModal()が勝手に動いているようですが、該当のクリックイベントしか呼んでいません。可能性を洗い出してもらえますか？」

返ってきた回答：

* `addEventListener` が**重複して呼ばれている**
* 同じボタンに**複数回イベントがバインド**されていないか？
* シングルページアプリでは**DOMの再生成に伴うイベント消失／二重登録**が起こりやすい




### ③ 原因の特定

```js
function bindModalEvents() {
  document.querySelectorAll('.button').forEach(btn => {
    btn.addEventListener('click', openModal);
  });
}
```

この関数が**ページ遷移のたびに呼ばれ、イベントが重複バインド**されていました。
その結果、**旧ページの状態が生き残っていた**。



# 🔧 解決策

###  対策①：イベントバインド前に remove する

```js
function bindModalEvents() {
  document.querySelectorAll('.button').forEach(btn => {
    btn.removeEventListener('click', openModal); // 既存のバインドを解除
    btn.addEventListener('click', openModal);
  });
}
```

###  対策②：`once: true` オプションの活用（用途次第）

```js
btn.addEventListener('click', openModal, { once: true });
```







もしご興味あれば、調査時のコメント付きコードや再現手順をまとめたレポジトリを近日中に公開予定です。
windowsでiverilog その165

# 概要　
windowsでiverilogやってみた。
cpu見つけたので、やってみた。
アセンブラ書いてみた。
テストベンチ、書いてみた。

# 参考にしたページ

https://qiita.com/yoshiki9636/items/62557960699dd92d3008

# サンプルコード

```
module test;
	reg clk,
		rst;
	wire out_pin;
	Simple8bitCPU u(.clk(clk), .rst(rst), .out_pin(out_pin));
	initial
	begin
		clk = 0;
		rst = 0;
		#1
			rst = 1;
		#1
			rst = 0;
		#150
			$finish;
	end
	always
		#1
			clk = ~clk;
	initial
	begin
		$display("out");
		$monitor(" %d ", out_pin);
	end
endmodule

```

# 実行結果

```
vvp a.out
out
 x
 0
 1
 0
 1
s8.v:215: $finish called at 152 (1s)

```

以上。
MacBook Pro(M4)のローカル環境でAI動画を生成してみる

## はじめに
ローカル動画生成AIの革命児とも呼ばれている「FramePack」をMacbookで使用しました。
簡単にインストールできるので気になった方はぜひ参考にしてみてください。

## FramePackとは
FramePackは、従来の動画生成モデルが抱えていたメモリ使用量の増加や品質劣化といった課題を解決し、一般的なノートPCでも高品質な動画生成を可能にする革新的なツールです。

### :airplane:特徴
<b>次フレーム予測モデル</b>
FramePackは、次のフレーム（またはフレームセクション）を予測するニューラルネットワーク構造を採用しており、動画を逐次的に生成します

<b>固定長のコンテキスト圧縮</b>
入力フレームのコンテキストを圧縮し、トランスフォーマーのコンテキスト長を一定に保つことで、動画の長さに関係なく一定の計算負荷で処理が可能

<b>大幅なメモリ効率の向上</b>
6GBのVRAMでも安定して動作可能(以前は少なくても12GBは必要になることが多かった)

<b>オープンソースでの提供</b>
FramePackはオープンソースとして提供されており、GitHubリポジトリから入手可能

### 環境
14-inch MacBook Pro
Chip: Apple M4 Pro
Memory: 48GB
OS: 15.1

## インストール
公式のReadmeに沿って作業します
https://github.com/lllyasviel/FramePack

1, macOSに対応したリポジトリをクローン
```
git clone https://github.com/brandon929/FramePack.git
cd FramePack
```
2, Pythonの3系をbrewでインストール
```
brew install python@3.10
```

3,dependenciesのインストール
```python
pip3.10 install --pre torch torchvision torchaudio --extra-index-url https://download.pytorch.org/whl/nightly/cpu
pip3.10 install -r requirements.txt
```

4, 起動(初回実行はモデルのダウンロード等行われるため少し待ちます)
```python
python3.10 demo_gradio.py
```

「http://0.0.0.0:7860/」 でアクセスし、下記画面が表示されたら準備完了

![Screenshot 2025-05-13 at 18.40.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666483/8558f2dc-3a0d-47cf-bc43-d336e3985aaf.png)


## 使ってみる
使い方としては、画面左上のImageのビューに画像を読み込ませ、promptに文章を入力します。
今回はポテトを食べている女性の画像を使用し、プロンプトは以下を設定
> A woman continuously eating French fries

![Screenshot 2025-05-13 at 19.13.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666483/5cdfcadf-75d3-4704-8580-93b3dddf0e0b.png)


まずはデフォルトの設定でテスト。

Pythonで使用しているCPU使用率は約30%、メモリは約38GBを常駐している状態

![Screenshot 2025-05-13 at 18.47.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666483/cc734d3d-24f8-4946-9730-fec83bbc1998.png)

ステータスはターミナルとサイト上にプログレスバーが表示されます
![Screenshot 2025-05-13 at 18.44.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666483/123f0c66-2c2b-47cd-97f5-55c8960c8423.png)

<br>

:::note warn
途中でメモリー不足の警告がMacOS側で発生しPCが完全にフリーズしたため、必要のないアプリケーションを閉じ、再度実行
:::

2度目の実行では20分ほどで以下動画が生成されました。

![250513_221017_044_222_28.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666483/1c2a5cc6-5b5f-45a3-ba81-161452a20ae7.gif)

## 感想
- メモリ48GBのMacBook Proでも、初回実行時にメモリ不足でフリーズするほどの高負荷がかかりました。実行前に必要のないアプリケーションは閉じたほうが良さそう

- Mac環境でAI動画生成を手軽に試せる点は非常に魅力的。GradioベースのGUIで画像の読み込みやプロンプトの入力も直感的に行えるのも使いやすくて良い

- AIによる動画生成はクラウドが主流ですが、今後、モデルの軽量化や最適化が進めば、より多くのユーザーが手軽に利用できるようになると思いました
Kintoneの時刻計算をjsで再現

もろもろの事情で計算式使えない時用
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29063/e0ecc9ff-c85b-4330-a453-be5a520c9fc7.png)
こういうのをjsで再現したい
```javascript
    const time1 = new Date("2025-01-01 00:00");
    const time2 = new Date("2025-01-01 03:30");//このへんはうまく
    let timeDiff = time2.getTime() - time1.getTime();

    let hour = timeDiff / (1000 * 60 * 60);
    let minute = (hour - Math.floor(hour)) * 60;

     let diff = Math.floor(hour) + "時間" + Math.floor(minute) + "分";
```
「データ解析のための数理統計入門」解答メモ 第4章 問1-問7

以下第4章問1-問7回答メモ

![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3959389/d263f1cc-9dec-4e09-9d3d-75f854e5eac1.jpeg)
![2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3959389/2b117eba-5191-49be-a6c6-1919b233521f.jpeg)
![3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3959389/c94e8fbc-104d-4606-905e-ba3ea99dc1ee.jpeg)
![4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3959389/6f014f10-ebff-429d-9397-c0db5db054ca.jpeg)
![5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3959389/53c6a664-c7d5-4ff7-8cbb-46dafab4f20c.jpeg)
![6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3959389/d6e0c614-ec56-4abf-90e8-82b9fb877f9f.jpeg)
![7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3959389/703d8920-cc52-494c-82ed-31ec2c0b9e8f.jpeg)
![8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3959389/9bbe2474-e587-424d-b036-bd0f7c14d11d.jpeg)
![9.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3959389/b75da3be-0339-4849-bee0-fb3ff515aa8b.jpeg)
![10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3959389/bb71be98-b245-4041-ae9a-00a6d775fd3e.jpeg)