OmniAICreator/Qiita-1.07M huggingface dataset:
スクラム開発について

# スクラム開発について

スクラム開発は、アジャイル開発手法の一つで、ソフトウェア開発において柔軟で効率的に進めるためのフレームワークです。スクラムでは、チームが協力して短期間の反復的な作業を行い、製品の改善と進化を図ります。

## 主な特徴

1. **短い反復作業**: スクラムは通常、**スプリント**と呼ばれる短期間（通常2〜4週間）の反復作業で進行します。各スプリントの終わりには、実際に動作する製品が提供されます。

2. **自己組織化チーム**: チームメンバーは自らの役割を柔軟に決定し、作業の進行に責任を持ちます。上司から指示を受けるのではなく、チーム全体で課題を解決します。

3. **定期的な振り返り**: スクラムでは、作業が進行する中で定期的に進捗を確認し、改善点を見つけるための振り返り（**レトロスペクティブ**）が行われます。

## スクラムの役割

1. **プロダクトオーナー (Product Owner)**:
   - プロダクトのビジョンを持ち、優先順位を決める役割。
   - ユーザーや利害関係者のニーズを反映し、製品バックログ（作業リスト）を管理します。

2. **スクラムマスター (Scrum Master)**:
   - スクラムプロセスの進行をサポートし、障害を取り除く役割。
   - チームがスクラムの原則を守るように支援します。

3. **開発チーム (Development Team)**:
   - 実際に製品を開発するメンバー。技術的な課題を解決し、スプリントの目標を達成します。

## スクラムのプロセス

1. **スプリント計画 (Sprint Planning)**:
   - 各スプリントの初めに行われる計画会議。チームがスプリント中に達成すべき目標を設定し、作業項目を決定します。

2. **デイリースクラム (Daily Scrum)**:
   - 毎日行われる短い会議（通常15分）。進捗を確認し、問題点や障害を共有します。

3. **スプリントレビュー (Sprint Review)**:
   - スプリント終了時に、成果物を関係者に披露し、フィードバックを受け取ります。

4. **スプリントレトロスペクティブ (Sprint Retrospective)**:
   - スプリント終了後、チームが自分たちの作業方法を振り返り、改善策を見つけて次のスプリントに活かします。

## スクラムの利点

- **迅速なフィードバック**: スプリントごとに製品が進化するため、早期にユーザーからのフィードバックを得ることができます。
- **柔軟性**: 顧客のニーズや市場の変化に対応しやすく、変更に対する適応力が高いです。
- **チームの協力強化**: 自己組織化チームとして、メンバー同士が協力しやすくなります。
- **品質の向上**: 継続的に振り返りを行い、改善策を導入するため、開発プロセスと製品の品質が向上します。
- **短期間での価値提供**: スプリントごとに動作する製品を提供するため、迅速に価値をユーザーに届けることができます。

## スクラムのデメリット

- **スプリントのプレッシャー**: 短期間で成果を出さなければならないため、チームにプレッシャーがかかることがあります。
- **経験豊富なチームが必要**: スクラムのフレームワークを適切に運用するためには、経験豊富なメンバーやスクラムマスターが必要です。初心者の場合、スクラムの原則やプロセスを守ることが難しくなることがあります。
- **長期的なプロジェクトにおける管理の難しさ**: スクラムは反復的な開発には適していますが、非常に長期的なプロジェクトや、広範囲にわたる調整が必要な場合には管理が難しくなることがあります。
- **適切なフィードバックがない場合の進行遅延**: ユーザーや利害関係者からのフィードバックが遅れると、次のスプリントでの改善が遅れ、全体の進行が遅くなることがあります。

## まとめ
スクラムは、チームの自己組織化と効率的な開発を重視し、反復的な進行を通じて製品を継続的に改善スクラムは、チームの自己組織化と効率的な開発を重視するフレームワークで、反復的な進行を通じて製品を継続的に改善します。開発の進捗を短期間で確認し、柔軟に変更に対応できる点が特徴です。しかし、チームの経験やプロジェクトの特性によっては、プレッシャーや管理の難しさが生じることもあります。

スクラムのミーティングが多いことは、進捗確認や問題解決のスピードアップ、チーム間のコミュニケーション強化といった多くの利点をもたらします。しかし、会議が無駄に増えると、時間の浪費や疲れが生じ、逆に生産性が落ちることもあります。そのため、ミーティングの進行や目的をしっかり管理し、必要な情報を効率的に共有することがスクラム成功の鍵となります。
複素平面と漸化式について

# はじめに
大学入試の数学において、ある点がある円周上にあるかどうかを判断するためには、大きく分けて2種類の方法がある。一つは、円の方程式に代入して計算する方法である。この方法は、ひらめきは少ないが、膨大な計算量が要求されてしまう。一方で、円周角の定理の逆を示すという幾何的な方法もある。この方法はひらめきを要求しかつ盲点となりやすいが、その分計算量を膨大に減らすことができるといったメリットもある。そこで今回は複素平面上において、ある漸化式を用いて点の座標を作成し、その点がある円の周上にあることを示す。具体的には、2001年度の東大の問題を扱う。

![複素数の逆数.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686019/6cf12115-701d-44f0-9eb9-8ccb356dbc20.png)

このように、円周上をランダムに散らばるのではなく、ある点に収束していくような分布になる。

# 問題

以下のサイトの14番を参考にした。

https://mikiotaniguchi.com/main/c/kc_035fukusosuu_heimen_zukeimondai_main.htm

## 導入

複素平面上の点$a_1,a_2,\cdot \cdot \cdot, a_n$を考える。

$a_1=1,a_2=i$とした数列$a_{n+2}=a_{n+1}+a_n$を考える。

$b_n=\frac{a_{n+1}}{a_n}$とおくと、すべての点$b_n$はなんと同一円周上にあるという。それを示す。

# 前準備

$b_1=1,b_2=1-i,b_3=\frac{3+i}{2}$となり、$b_1,b_2,b_3$からなる三角形は直角2等辺三角形となる。したがって、円周角の定理の逆より、$b_1 b_2$を直径とする円周上に$b_n$が存在することを示せばよい。（これが第一の関門である）

# 証明

上記を代数的な方法で解こうとするとかなり計算力と根気を必要するだろうと直感的に気が付けるかが大事である。それくらいの演習量と経験値を確保したい。

したがって、$b_1,b_2,b_n$から生成される三角形$\Delta B_1B_2B_3$が直角三角形であることを示す。

すなわち、


```math
\frac{b_n-b_1}{b_n-b_2}=ki
```

(ただし$k$は実数とする)を示す。

この式を変形すると、

```math
b_n=\frac{-k+(-k+1)i}{1-ki}
```

となるので、もし$b_{n+1}$もこのような形で表すことができれば、帰納的に$b_n$は円周上にあるということが証明される。

$a_1=1,a_2=i$とした数列$a_{n+2}=a_{n+1}+a_n$より$a_n\ne 0$　なので、両辺を$a_n$で除すると、


```math
b_{n+1}=1+\frac{1}{b_n}
```

となるので、

``` math
b_n=\frac{-k+(-k+1)i}{1-ki}
```


　を代入して同じ形になるように意識して整理すると、

 ``` math
b_{n+1}=\frac{-k+(-k'+1)i}{1-k'i} 
```

ただし、

``` math
k'=-(1-\frac{1}{k})
```

となる。$k$は実数であることから$k'$が実数であることは自明である。したがって、題意は示された。

# プログラム

```python en.py 
import numpy as np
import matplotlib.pyplot as plt
import japanize_matplotlib
import math

a1=1
a2=1j
 
n=1000
a_ary=[a1,a2]

for i in range(1,n):
   a_ary.append(a_ary[-1]+a_ary[-2])

m=len(a_ary)
b_ary=[]
for k in range(m):
    if k < m-2:
        b_ary.append(a_ary[k+1]/a_ary[k])
        #print(a_ary[k+1]/a_ary[k])

b_ary=np.array(b_ary,dtype=complex)
# 点（数列）をプロットするための配列を作成
# b_aryの実部と虚部を分ける
x_ary=b_ary.real
y_ary=b_ary.imag

# 円の描写
theta=np.linspace(0,2*math.pi,100)
r=5**0.5/2
x=r*np.cos(theta)+0.5
y=r*np.sin(theta)

plt.plot(x,y,label='円周')
plt.scatter(x_ary,y_ary)
plt.xlabel('実部')
plt.ylabel('虚部')
plt.title('複素数の逆数')
plt.grid()  
plt.axis('equal')
plt.savefig('複素数の逆数.png')
plt.show()
```
これを実行すると以下のようになる。

![複素数の逆数.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686019/6cf12115-701d-44f0-9eb9-8ccb356dbc20.png)

このように、ブロットされる点はランダムに円周上を散らばるのではなく、ある点に収束するかのように偏った分布をすることが分かる。

# まとめ

今回は、複素平面と数列の証明問題を扱った。具体的には、円周角の定理の逆（今回のように直径と直角を扱う場合が多い）を用いてある点が円周上にあることを示した。また、後半では、それをプログラミングを用いて図示することを試みた。

# 参考文献

この問題は、フィナボッチ数列や黄金比と関係性があるらしい。なので、より詳しく背景知識を知りたい方は、以下のサイトの記事を参考にされたい。

https://mine-kikaku.co.jp/index.php/2021/06/08/tokyo-univ-2001-4/
【依存性注入（DI）】@Injectの役割

## 依存性注入とは
@Injectの役割を知る前にまず、依存性注入について理解する必要があります。
`依存性注入（DI）`とは、あるクラスが他のクラスに依存している場合、その依存関係（例えば他のクラスやオブジェクト）を自分で作らずに、外部から渡してもらう仕組みです。こうすることで、クラス同士が独立して管理され、テストや変更がしやすくなります。

## @Injectの役割
@Inject は、依存性注入を行うためのアノテーションです。つまり、@Inject が付いている場所に必要なオブジェクト（例えば IMongoAccess）を自動的に渡してくれる仕組みを使うことができます。

### 具体例で説明

```kotlin
class LogRecentCallDAO @Inject private constructor(mongo: IMongoAccess)
```

このコードの意味を分解して説明します。

**1. LogRecentCallDAO クラス**
- LogRecentCallDAO というクラスがあります。これが、ある機能（例えば最近の通話履歴のログ）を処理するクラスだとしましょう。
    
**2. @Inject アノテーション**
- @Inject は「このクラスを作るときに、必要なものを外から自動的に渡してください」という指示です。これがついていると、クラスを作るときに依存しているオブジェクト（ここでは IMongoAccess）を外部から自動的に注入してくれます。


**3. private constructor(mongo: IMongoAccess)**
- LogRecentCallDAO のコンストラクタ（クラスを作るときに呼ばれる関数）で mongo: IMongoAccess を受け取ります。つまり、このクラスは IMongoAccess を使うことが前提となっています。

## どうして @Inject を使うのか？
- **簡単に依存関係を管理できる**：LogRecentCallDAO を使うときに、自分で IMongoAccess を作ったり管理したりする必要がありません。DIフレームワークが自動的にその依存関係を解決してくれます。
- **テストがしやすくなる**：もし、テストをする場合、IMongoAccess をテスト用に差し替えることができるので、実際のMongoDBに接続することなく、動作確認ができます。
- **コードがきれいになる**：クラス内で他のクラスを自分で作成するコードが減り、シンプルで管理しやすいコードになります。

## まとめ
@Inject は「このクラスが依存しているオブジェクトを自動的に外から渡してくれる」という意味です。これによって、コードが簡単に管理でき、テストや変更も楽になります。
zshのEsc-pを直感的な挙動に変更する

zshのEmacsモード(```bindkey -e```)で```Esc-p```を入力すると、最初のワードをキーにしてコマンド履歴を検索します。この時、第二ワード以降は無視されます。

例えば、

```
1. git commit -a
2. vi file.txt
3. git diff
```

とコマンドを実行したあとに、```git c```まで入力して```Esc-p```を押すと、3が選ばれます。元tcshユーザーとしては1にマッチしてほしいし、この挙動の方が自然だと思う。

```Esc-p```に割り当てられているup-line-or-searchをzshcontribに含まれているup-line-or-beginning-searchに変更することでこの問題を解決できます。

```Esc-n```に対しても同様の修正を適用します。

```
autoload -U up-line-or-beginning-search
zle -N up-line-or-beginning-search
bindkey "^[p" up-line-or-beginning-search
autoload -U down-line-or-beginning-search
zle -N down-line-or-beginning-search
bindkey "^[n" down-line-or-beginning-search
```

zshはなんでこんな不可解な挙動がデフォルトなんだ。
FastAPI: Nginx で動かす

POST の引数を取る FastAPI を Nginx で動かす方法です。

メインプログラムは、次の通りとします。

/usr/local/fastapi/mail_post.py

## 完成形

次のスクリプトが正常に動くようにします。

```bash
http POST http://127.0.0.1/mail/ to='user01@example.com
```

## uvicorn を Systemd で動かす

設定ファイル

```text:/etc/systemd/system/uvicorn.service
[Unit]
Description=The uvicorn process
Before=nginx.service
After=network.target remote-fs.target nss-lookup.target

[Service]
User=www-data
Group=www-data
WorkingDirectory=/usr/local/fastapi

ExecStart=/usr/bin/uvicorn mail_post:app --reload
ExecReload = /bin/kill -s HUP $MAINPID
ExecStop = /bin/kill -s TERM $MAINPID

[Install]
WantedBy=multi-user.target
```

起動

```bash
sudo systemctl start uvicorn
```

動作確認

```bash
http POST http://127.0.0.1:8000/mail/ to='user01@example.com
```

## Nginx の設定

リバースプロキシーの設定

```text:/etc/nginx/sites-available/default

server {
（省略）

location /mail {
    proxy_pass http://127.0.0.1:8000/mail; # /mail → /mail

        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
}

（省略）
｝
```

設定の確認

```bash
sudo nginx -t
```

Nginx の再起動

```bash
sudo systemctl restart nginx
```

動作確認

```bash
http POST http://127.0.0.1/mail/ to='user01@example.com
```
GithubActionsでのみJestが「error TS2307 Cannot find module '@chakra-ui/react/button' or its corresponding type declarations.」で失敗する


## はじめに

Jest で実施している React のフロントエンドテストがローカルではすべてパスするのに Github Actions だと失敗する現象に遭遇しました。

エラーをもとに設定などを変更してもうまくいかなかったのですが、修正することができたので記事にします。

失敗しているときのメッセージは下記の通りです。

```shell
FAIL src/components/pages/Login.test.tsx
  ● Test suite failed to run

    src/components/atoms/PrimaryButton.tsx:1:24 - error TS2307: Cannot find module '@chakra-ui/react/button' or its corresponding type declarations.

    1 import { Button } from "@chakra-ui/react/button";
                             ~~~~~~~~~~~~~~~~~~~~~~~~~
```

## 環境

- windows11
- React v18
- Chakra UI V3
- ASP.Net Core

## 原因

`Chakra UI`をでは V ３から使用する際にコンポーネントを定義されたスニペットとして追加する事ができます。ソースコードで参照している先がスニペットではなく`Chakra UI`の物を参照していました。

ローカルに存在するスニペットを参照するように修正したところ Github Actions 上で正常に動くようになりました。

```diff_JSX:PrimaryButton.tsx
import { FC } from "react";
-import { Button } from "@chakra-ui/react/button";
+import { Button } from "../ui/button";

type Props = {
  label: string;
  onClick: () => void;
};

export const PrimaryButton: FC<Props> = (props) => {
  const { label, onClick } = props;

  return (
    <Button
      bg={"teal"}
      size="md"
      onClick={onClick}>
      {label}
    </Button>
  );
};
```

## おわりに

ボタンをコンポーネントとして分割していたため修正箇所が１か所で済んだため、再利用性が重要であることを再確認しました。
Salesforce VSCode でソースのデプロイ・取得が遅い場合の対処法

# 概要

筆者が VSCode で Salesforce 開発をしているときに、ソースのデプロイ・取得が異様に遅くなる（毎回5分ほどかかる）事象に遭遇した（しかも、ソースファイルへの書き込みは早い段階で完了しているにもかかわらず）。
この記事では、その原因と対処法について記載する。

# 原因

この問題は GitHub の Issue [#4865](https://github.com/forcedotcom/salesforcedx-vscode/issues/4865) で報告されており、ソース追跡が有効な Sandbox でソースのデプロイ・取得を行った際のソース追跡の処理に時間がかかっているようだった。

# 対処法

VSCode 設定の `Salesforcedx-vscode-core › Experimental: Enable Source Tracking For Deploy And Retrieve` を無効にすることで、ソース追跡が行われなくなり回避できた。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950738/c60899ee-01d2-4699-a848-230cfc238fb5.png)

上記の Issue にも回避策が記載されていた。

> Update on this! We've introduced a new temporary setting as we continue to work on source tracking improvements with v58.0.1 to Enable Source Tracking. We have set this to be automatically enabled by default, as we recommend working with source tracking if you find it helpful, but we don't want this feature to continue interrupting your workflow. If you find you're still facing issues, try turning that setting to off, restarting VS Code, and check if that helps your deployment performance. You may need to clear out source tracking for a project (and beware of [#4873](https://github.com/forcedotcom/salesforcedx-vscode/issues/4873)), or start a new project to get back to a clean slate.
> 
> We'll continue to keep this one open for another release or two, so let us know if you continue to experience issues as well. Thanks all!
> 
> [日本語訳]
> これに関する更新情報です。v58.0.1 でソース トラッキングの改善に取り組み続ける中で、ソース トラッキングを有効にする新しい一時設定を導入しました。ソース トラッキングが役立つと思われる場合は使用することをお勧めしますが、この機能が引き続きワークフローを中断することは望ましくないため、デフォルトで自動的に有効になるように設定しました。それでも問題が解決しない場合は、その設定をオフにして VS Code を再起動し、デプロイメントのパフォーマンスが改善されるかどうかを確認してください。プロジェクトのソース トラッキングをクリアするか ([#4873](https://github.com/forcedotcom/salesforcedx-vscode/issues/4873)に注意してください)、新しいプロジェクトを開始して白紙の状態に戻す必要がある場合があります。
> 
> この問題は次のリリースか 2 リリースまで引き続き公開されますので、引き続き問題が発生する場合はお知らせください。 皆さん、ありがとうございます!

# 参考文献
- [Deploy Source to org command takes several minutes to complete · Issue #4865 · forcedotcom/salesforcedx-vscode](https://github.com/forcedotcom/salesforcedx-vscode/issues/4865)
React Vite TypeScript　【TypeScript編】はじめてのTypeScript

## React ＋　Vite ＋　TypeScriptで開発したい
自分はどの技術も触ったことがない。
まずはTypeScriptから勉強するぞ

javascriptやってたし多分いける

## TypeScriptの！の使い方
 まず環境構築を済ませて、生成されたファイルに目を通した
 
```typescript:main.tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)


```

```createRoot()```の引数として記述されている```typescript:getElementById('root')```
その後ろに```！```が付いている...

こんな記述は見たことがなかった。
コード内にある```！```は条件式などに使う演算子くらい```if(!flag)```しか見たことなかったのでどういう意図が全く分からなかった


## 結論
この```！```は**非null アサーション**というらしい。
値がnullやundefindではないと保証するために使うらしい

```typescript
createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)
```
つまり```root```というidの要素が見つからなくても処理を続ける

**というわけではなく**
```null``` や ```undefinde```を返す可能性があるけど
開発者が返す可能性はないと保証するために使うらしい。

なにがどう便利なのか想像がつかないが知識として持っておきます
pacman keyringの再初期化と再設定

archlinuxで、`sudo pacman -S something`をやると、
"エラー: GPGME エラー: データがありません"と出る時、以下の処置を施します。

```
sudo rm -rf /etc/pacman.d/gnupg
sudo rm -R /var/lib/pacman/sync
sudo pacman-key --init
sudo pacman-key --populate archlinux
sudo pacman-key --refresh-keys
sudo pacman -Syyu
```

これで行けると思います。
PS/2からI2C変換

昔のパソコンで使われていたPS/2キーボードをI2Cに変換してみようと思いました。

I2C対応のキーボードはスイッチサイエンスさんに製品がありましたが、売り切れのようです。

マイコンはplatformioで開発できるMSP430でやろうと思います。

PS/2は5VですがI2Cは3.3Vです。たまたま部品箱にあったMT3608モジュールを使って3.3Vから5Vに昇圧します。

これでMSP430にPS/2の信号をつなげばいけると思ったらMSP430はなんと5Vトレラントでありません。

ネットで調べるとMOSFETを使ったレベル変換回路がありますが、MOSFETの手持ちがありません。

また部品箱を見たら、I2Cのレベル変換のFXMA2102がありました。これはI2C専用ではなく汎用のレベル変換でアプリケーションとしてI2Cがあるようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/9067875f-3652-48d5-b481-7f59a284330f.png)

とりあえずこれを使ってみることにします。ところがオシロで信号を見ると発振して正常に動かない事があります。

どうもこのFXMA2102は動作範囲が狭くて、オシロをつなぐと正常に動かなくなるようです。

PS/2のコードこれを使いました。githubで探してみて、このコードがあったのでMSP430でやろうと思いました。

https://github.com/Picatout/ps2-kdb-on-msp430g2553

前のフランス語のファイルの記事はこのソースの事です。

とりあえすこれとI2C Slaveのコードをがっちゃんごして、キーコードが拾えるようになりました。

![写真（2025-04-05 17.44）.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/235cf268-a973-4395-83bc-749573cb8ad6.jpeg)

![写真（2025-04-05 17.45）.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/3c03f3b4-4dfc-4583-b72c-4da1832a7be2.jpeg)

デバッグのためP1.0にLEDを付けました。

ちゃんと使えるようになったら、[ソースは公開](https://qiita.com/yamori813/items/d6b8251a411f68e35f13)します。
SwiftのProtocolで@objcとTyped throwsを併用するとコンパイラーがクラッシュする

## はじめに

Swiftでプロトコルを定義し、Objective-Cからも利用可能にするために `@objc` 属性を付けることがあります。その際、プロトコルメソッドで特定の型のエラーをスローする Typed throws を使おうとすると、**Swiftコンパイラ自体がクラッシュ**してビルドが失敗することがあります。

### 発生バージョン
XCode 16.2
Swift version 6.0.3 (5.10 モード)

## コンパイラ自体がクラッシュする条件

以下のように、`@objc` 属性が付いたプロトコル `HogeProtocol` を定義し、そのメソッド `HogeFunc` で特定の `FugaError` 型のみをスローするように `throws(FugaError)` と指定したとします。

```swift
import Foundation

// エラー型を定義
enum FugaError: Error {
    case someError
}

// @objc属性付きのプロトコルを定義
@objc
protocol HogeProtocol {
    // Typed throwsを宣言
    func HogeFunc() throws(FugaError) // <- ここが問題
}

// プロトコルに準拠したクラス
final class Hoge: HogeProtocol {
    func HogeFunc() throws(FugaError) {
        // 何らかの処理
        throw FugaError.someError
    }
}
```

このコードをコンパイルしようとすると、以下のような問題が発生します。


**Swiftコンパイラ (swift-frontend) が内部でエラーを起こしてクラッシュ**し、ビルドが失敗します。

```
Command EmitSwiftModule failed with a nonzero exit code
```

詳細なログを見ると、以下のようなスタックトレースが出力されていました。

```
Please submit a bug report (https://swift.org/contributing/#reporting-bugs) and include the crash backtrace.
Stack dump:
0.	Program arguments: /Applications/Xcode-16.2.0.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/swift-frontend ... (略) ...
1.	Apple Swift version 6.0.3 (...)
2.	Compiling with effective version 5.10
3.	While generating Clang header 
4.	While printing forward declarations needed by members of 'HogeProtocol' (...)
5.	While printing for member 'HogeFunc()' (...) 
6.	While walking its interface type, currently at 'FugaError' (...) 
7.	While printing NULL type! 
... (以下スタックトレース) ...
```



### おそらくの原因

根本的な原因は `@objc` プロトコル内で Typed throws を使用していることにあります。

Objective-Cの NSError* には、Swiftの `throws(SpecificError)` のような「特定の型のエラーのみをスローする」という概念がありません。Objective-Cから見ると、メソッドがエラーをスローするかどうかは分かりますが、そのエラーの具体的な型まではコンパイル時には分かりません。

そのため、`@objc` で公開されるプロトコルのメソッド定義で Typed throws を使うと、Objective-Cとの互換性が取れず、Objective-Cヘッダー生成の段階でコンパイラがクラッシュするようです。

### 解決策

この問題を解決するには、`@objc` プロトコルのメソッド定義では、型を指定せずに `throws` だけを使用します。

```swift
import Foundation

enum FugaError: Error {
    case someError
}

@objc
protocol HogeProtocol {
    // 型を指定せず、単に throws と記述する
    func HogeFunc() throws
}

final class Hoge: HogeProtocol {
    // 実装クラス側では、throws(FugaError) と型を指定しても良いし、
    // 単に throws としても良い。
    func HogeFunc() throws(FugaError){ 
        print("HogeFunc called")
        throw FugaError.someError
    }
}
```

**ポイント：**

* **プロトコル定義:** `@objc` プロトコル内では `throws` のみを使用します
* **クラス実装:** プロトコルに準拠するクラス側では、メソッドの実装で `throws(SpecificError)` と型を指定しても問題ありません

### まとめ

Swiftで `@objc` 属性を付けたプロトコルを定義する際には Typed throws の使用はできません。
Objective-Cとの連携が必要な場面でエラーハンドリングを含むプロトコルを設計する際には注意してください
IaaS, PaaS, SaaSとは

# IaaS, PaaS, SaaSの説明

IaaS、PaaS、SaaSは、クラウドコンピューティングにおけるサービスモデルの種類です。それぞれの違いを以下に簡単に説明します。

## 1. IaaS（Infrastructure as a Service）
- **提供されるもの**: 仮想マシン、ネットワーク、ストレージなどのインフラ（ハードウェアや基盤）。
- **利用者の役割**: サーバーやストレージなどを提供されるので、自分で必要なソフトウェアやアプリケーションをインストールして管理します。
- **例**: Amazon Web Services (AWS)、Google Cloud Platform (GCP)、Microsoft Azure

### イメージ
ビルを建てるための土地や建材を借りるようなもの。自分で設計し、内装や家具を選んで配置します。

---

## 2. PaaS（Platform as a Service）
- **提供されるもの**: アプリケーション開発や実行に必要なプラットフォーム（開発ツールやデータベースなど）。
- **利用者の役割**: アプリケーションを開発してデプロイすることができます。インフラの管理はクラウド側が行ってくれます。
- **例**: Google App Engine、Microsoft Azure App Services

### イメージ
アパートの部屋を借りるようなもので、部屋（プラットフォーム）は整っているので、あなたは家具（アプリケーション）を配置するだけです。

---

## 3. SaaS（Software as a Service）
- **提供されるもの**: ソフトウェアアプリケーションそのもの（オンラインで使えるアプリケーション）。
- **利用者の役割**: ソフトウェアを使用するだけで、インフラや管理は全てサービス提供者が行います。ユーザーはただ利用するだけです。
- **例**: Gmail、Google Docs、Dropbox、Salesforce

### イメージ
あなたがカフェでコーヒーを注文するようなもので、すでに完成されたものを楽しむだけです。

---

## まとめ
- **IaaS**: インフラ（サーバー、ストレージ）を借りて、アプリやソフトを自分で管理。
- **PaaS**: アプリ開発用のプラットフォームを借りて、アプリを開発・実行。
- **SaaS**: 完成されたアプリケーションをインターネット経由で利用。

どれを選ぶかは、どれだけ自由に管理したいか、どれだけ自分で手を加えたいかによって異なります。
GoでLocalStackのS3にファイルをアップロードしてみた

## はじめに
この記事では、Go言語を使って LocalStack 上の S3 に HTML ファイルをアップロードする方法を解説します。
[前回の記事](https://qiita.com/dainago/items/09e6d7e61a2d16a9a4e3) の続きとして、S3 バケットの作成が完了している状態からスタートします。

## 前提条件
- go コマンドが使用できる環境であること
- [こちら](https://qiita.com/dainago/items/09e6d7e61a2d16a9a4e3)の手順に従って、S3バケットの作成まで完了していること

## go.mod の作成
`compose.yml` があるディレクトリで、以下のコマンドを実行して Go モジュールを初期化します。

```bash
$ go mod init {{今いるディレクトリ名}}
```

## 依存関係のインストール
S3にファイルをアップロードするために必要なパッケージをインストールします。
```bash
$ go get github.com/aws/aws-sdk-go-v2/aws 
$ go get github.com/aws/aws-sdk-go-v2/config
$ go get github.com/aws/aws-sdk-go-v2/service/s3
$ go get github.com/aws/aws-sdk-go-v2/credentials
```

## Goコード（main.go）の作成
`main.go` を作成し、LocalStackのS3バケットにHTMLファイルをアップロードする処理を記述します。

```main.go
package main

import (
	"context"
	"log"
	"os"

	"github.com/aws/aws-sdk-go-v2/aws"
	"github.com/aws/aws-sdk-go-v2/config"
	"github.com/aws/aws-sdk-go-v2/credentials"
	"github.com/aws/aws-sdk-go-v2/service/s3"
)

func main() {
	awsEndpoint := "http://localhost:4566" // LocalStackのエンドポイント
	awsRegion := "us-east-1" // LocalStackのデフォルトリージョン

	// デフォルトの AccessKey、SecretKey は "test"
	creds := credentials.NewStaticCredentialsProvider("test", "test", "")
	// AWSの設定を読み込む
	awsCfg, err := config.LoadDefaultConfig(context.TODO(),
		config.WithRegion(awsRegion),
		config.WithCredentialsProvider(creds),
	)
	if err != nil {
		log.Fatalf("Cannot load the AWS configs: %s", err)
	}

	// S3クライアント作成
	client := s3.NewFromConfig(awsCfg, func(o *s3.Options) {
		o.UsePathStyle = true
		o.BaseEndpoint = aws.String(awsEndpoint)
	})

	bucketName := "sample-bucket"
	s3Key := "sample.html"
	// HTMLファイル読み込み
	html, err := os.Open("./sample.html")
	if err != nil {
		log.Fatal(err.Error())
	}
	defer html.Close()

	// S3にアップロード
	_, err = client.PutObject(context.TODO(), &s3.PutObjectInput{
		Bucket:      aws.String(bucketName),
		Key:         aws.String(s3Key),
		Body:        html,
		ContentType: aws.String("text/html"),
	})
	if err != nil {
		log.Fatal(err.Error())
	}
	log.Println("Success!")
}
```

## sample.html の作成
アップロードするHTMLファイルを作成します。
以下の内容で `sample.html` を作成してください（HTMLの中身はお好きにしてもらって大丈夫です）。

```sample.html
<html>
<head>
    <meta charset="UTF-8">
    <title>静的ホスティング</title>
</head>
<body>
    <h1>Hello LocalStack</h1>
</body>
</html>
```

## Goコードの実行
以下のコマンドで `main.go` を実行して `sample.html` をS3バケットにアップロードします。

```bash
$ go run main.go
2025/04/05 16:37:55 Success!
```
成功すると、コンソールに `Success!` と表示され、S3(`sample-bucket`)にファイルがアップロードされます。

## アクセス確認
最後に、ブラウザで以下のURLにアクセスして、『Hello LocalStack』 と表示されていれば成功です。

http://localhost:4566/sample-bucket/sample.html

![スクリーンショット 2025-04-05 17.25.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3639213/76b4c65b-de99-4fc1-b5b2-92b0c0c9a766.png)


## まとめ
以上の手順で、Go 言語を使って LocalStack の S3 に HTML ファイルをアップロードすることができました。
LocalStack はローカル環境でのAWSサービスの使用を簡単に実現できるので、学習に便利そうですね。
Next.js 15 + GitHub PagesでCSSが反映されない問題を解決した話（App Router対応・Tailwind・TypeScript）

## はじめに

この記事では、Next.js 15（App Router使用）で作成したプロジェクトをGitHub Pagesにデプロイする過程で遭遇した、「CSSが効かない問題」とその解決方法について詳しくまとめます。

特に、静的サイトエクスポート (`output: "export"`) を使うときに **`.nojekyll` ファイルが必要** なことに気づかずハマった経験をシェアします。

---

## 前提

- **Next.js 15**
- **App Router**（`pages`ディレクトリではなく`app`ディレクトリ使用）
- **Tailwind CSS** + **TypeScript**構成
- **GitHub Pagesでホスト**
- **Docker + DevContainer環境で開発**


## プロジェクト作成と設定

### 1. Next.js プロジェクト作成

```bash
npx create-next-app@latest my-app --typescript --tailwind --eslint --src-dir --app
```

### 2. `next.config.ts` を編集

```typescript
/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export",
  images: { unoptimized: true },
  distDir: "../docs", // ビルド出力をdocsにする（GitHub Pages対応）
};

export default nextConfig;
```


### 3. Makefile にビルドコマンドを用意

```Makefile
build:
	docker compose ${DOCKER_COMPOSE_FILE_PATH} ${PROJECT_FLAG} exec ${USER_FLAG} workspace bash -c 'cd ${WORKDIR}/src && npm run build'
	echo > ../docs/.nojekyll
```

ここで **超重要ポイント** ✨

### 🔥 `.nojekyll` を必ず作成する！

GitHub Pages はデフォルトで Jekyll という静的サイトジェネレーターが動きます。

- `_next/` というディレクトリがあると、Jekyllが勝手に除外しようとします。
- これにより **CSSやJSが読み込めないバグ** が発生します！！

**→ ビルド後に必ず `.nojekyll` ファイルを設置することで解決します。**


## 実際のディレクトリ構成

```
my-app/
  docs/ ← ここにビルド成果物が出力される
    _next/
    index.html
    favicon.ico
    など
  src/
  docker-compose.yml
  .devcontainer/
  Makefile
  .env
  ...
```


## GitHub側の設定

### 1. GitHubリポジトリ作成

リポジトリ名は **`hellomyzn.github.io`** のようにしておくとパス設定が楽です。

### 2. Pages設定

GitHub Pagesの設定で、
- **Branch:** `master`（または`main`）
- **Folder:** `/docs`
を選択してください。


## 注意ポイントまとめ

| 項目 | 説明 |
|:---|:---|
| distDir | `../docs` にする（docsフォルダへビルド成果物を出す） |
| .nojekyll | 必ず作成！`_next/`を守るため |


## おわりに

最初、なぜCSSが効かないのか全く分からずすごくハマりました。

最終的に、
- `.nojekyll`
の設定ミスが原因だったことがわかり、無事表示されました！

同じように悩んでいる人の助けになれば嬉しいです！


---

この記事が参考になったら「いいね」やコメントもらえると励みになります☺️
Cursor初心者、神速で旅行プランを作ってみる

旅行の計画は情報収集や整理が大変です。
GeminiやChatGPTとのチャットやCanvas機能も良いけれど、まとまらない...
Deep Researchは逐一待たされるのが辛い...
というお悩みを持つ私のような方、朗報です。
巷で噂のAIを活用したテキストエディタツール「Cursor」を使えば、
インタラクティブにゼロからの旅行プラン作成が驚くほど簡単に行えたので手順を共有します。

Cursorダウンロード～旅行プランをまとめるまでの基本的な手順を書いてます。

### ■1. Cursorのダウンロードとインストール(3分)
#### ■1.1 公式サイトへアクセス！
https://cursor.sh/

#### ■1.2 ダウンロード
ウェブサイト中央付近にあるダウンロードボタンをクリックします。
お使いのOS（Windows, macOS, Linux）に合わせて適切なバージョンが
自動的に表示されるはずですが、念のため確認してください。

#### ■1.3 インストール
ダウンロードした実行ファイルを起動して、
画面の指示に従ってインストールを進めます。
基本的には「次へ」や「同意する」といったボタンをクリックするだけですが
最後の方に出てくる、「Help Improve Cursor」と「Privacy Mode」の選択肢は、
データが学習されたくない勢の皆さんは後者を選びましょう。
(後でも、右上の歯車->Privacy Modeのenabled化で設定できます。)

### ■2.Cursor起動～プラン保存先作成(2分)
#### ■2.1 Cursorの起動
インストールが完了したら、Cursorを起動します。

#### ■2.2 新規ワークスペースの作成
Cursorの画面左上にある「File」メニューをクリックし、「Open Folder」を選択します。

#### ■2.3 フォルダの選択または作成
ファイルエクスプローラー（Finderなど）が開くので、旅行プランを保存したい
場所を選びます。新しいフォルダを作成したい場合は、「新しいフォルダー」
などのボタンをクリックしてフォルダ名（例:2025_北海道旅行プラン) を入力し、
そのフォルダを選択して「Open」をクリックします。

これで、旅行プランを管理する場所ができました！

### ■3. 旅行プラン作成(5分～)
#### ■3.1 Cursorに指示を出す
　プロンプトを入力します。例は、
　「沖縄旅行を計画したいです。日程はmm/dd～mm/ddで工程と費用の計画を.mdファイルにまとめてください。参加者は男性/女性x名、予算はxx万円、代表的な観光地をめぐりたいです。」
　※.mdファイル(Markdownファイル)というのは.txtのようなテキストファイルの種類です。
 　私は読みやすさからコレを指定しましたが、他のファイル形式でもokです

#### ■3.2 ファイルの保存
画面中央に生成されたファイルの内容が表示され、
下の方にReject File(ファイルの作成を受け入れない) / Accept File(ファイルの作成を受け入れる)
のボタンが表示されるので、Accept Fileの方を押下する

これで、旅行プランを記述するためのMarkdownファイルが作成されました。

#### ■3.3. 旅行プランをブラッシュアップする
Cursorに追加指示を出すことで旅行プランをどんどんカスタムしていきます。

1ファイルだと見づらさもありますし、複数ファイルで管理しても大丈夫です。
そんな時もCursorにxxの部分は別ファイル「yy.md」に切り出してーと依頼すればやってくれます。
全ファイルを編集して、と言えば一気に編集してくれます。
ワガママも、文句なしに24時間聞いてくれます。
例えば以下のようなプロンプトを与えて、自分でもプランを編集しつつCursorにまとめてもらうと良いです。
「[観光地]の入場料を調べて」
「[レストランの名前] の予約方法を教えて」
「[出発地] から [目的地] までの最適な交通手段は？」
プロンプトでプランを編集したら、また下に表示される
Review next file(変更点確認)からのAccept(保存)だけお忘れなく。

#### ■注意点
①Cursorは無料プランだと月に50回しかリクエストできません。
　1回の旅行をプランニングするぐらいなら十分かと。
  もし使い切った場合は、他のAI(ChatGPTなど)にここまでで作成したmdファイルを
  喰わせて、続きの作成をすると良いです。
②Cursorも裏でAI使ってるだけなのでファクトチェックはしましょう。
　チェックポイント
・今もその店/場所は存在するのか、値段や営業時間は想定通りか、予約要否
・交通手段は正しいのか、本当に道はあるのか、など。
　Google Mapsもナビさせると、信号のないデカい柵付き中央分離帯ありの道路を
  徒歩で横切るというトンデモ指示出してくるので、そういうレベル感で要チェック
 
#### ～オマケ:より充実した旅行プランにする～
#### ・Cursorに概算費用表を作成してもらう
旅行中に発生する費用をまとめてもらうと楽です。

| 項目        | 金額   | 備考       |
|-------------|--------|------------|
| 交通費      | ¥45,000 | 往復の新幹線 |
| 宿泊費      | ¥10,000 | 1泊あたり   |
| 食費        | ¥8,000 |            |
| 入場料      | ¥3,000 |            |
| お土産代    | ¥2,000 |            |
| **合計** | **¥68,000** |            |

#### ・時間が空いた時に行くべき場所リストをまとめておいてもらう
予定が早く終わったり、急に時間が空いたりした場合に備えて、いくつか候補の場所をリストアップしておくと安心です。

時間が空いた時に行くべき場所リスト
- [美術館の名前]
- [公園の名前]
- [カフェの名前]
- [地域の商店街の名前]

### まとめ
Cursorを使った旅行プランの立て方をサックリ解説してみました。
CursorのAIアシスタント機能を活用することで、
「アタシ達は気ままに文句だけ言うからパパ取りまとめよろしく」
「社員旅行の幹事よろしくー俺xx食べたい私yy行きたい」
と言われても15分ほどでサックリ資料ができます。
(mdファイルからPDFにしたいときはCtrl+Shift+X ->「Markdown PDF」拡張をInstallすれば、
 先ほどのmdファイルに戻って右クリックでPDFに印刷できます)
ストレス社会を皆で頑張って生き抜いていきましょう！

補足:
この記事は2025年4月5日時点の情報に基づいて作成されています。
Cursorの機能やインターフェースはアップデートにより変更される可能性がありますので悪しからず。
TypeScriptでenumにメソッドを生やしたい。

## はじめに

TypeScriptにおいて、特定の定数群を定義するためにオブジェクトリテラルを使うことが一般的であるが、実践的な開発を進める中でその限界が明らかになるケースがある。特に、複雑なロジックや拡張性を求められる場面では、オブジェクトリテラルの柔軟性や型安全性に課題が浮き彫りになる。本記事では、オブジェクトリテラルにメソッドを付与したいというニーズに対してクラスベースの型定義で対応した実践的な事例を紹介する。

### オブジェクトリテラルを使う際の課題

TypeScriptのオブジェクトリテラルはシンプルで便利である反面、ロジックを追加する際には不便である。オブジェクトリテラルは静的な値のみを持つため、メソッドや複雑な振る舞いを直接追加できない。また、型安全性に関しても制限があり、関連ロジックを別途ユーティリティ関数として実装する必要があるため、コードの凝集性が低下しやすい。

### クラスベースで型定義するアプローチ

これらの課題を解決するために、定数としてクラスインスタンスを定義する方法が有効である。この手法を用いることで、オブジェクトリテラルの制約を克服し、より柔軟で高度なロジックを実現できる。

クラスベースの型定義では、定数をクラスの静的インスタンスとして定義し、コンストラクタをprivateに設定することで外部からの不要なインスタンス生成を防止できる。結果として、各定数がシングルトン的に振る舞うため、型安全性を保ちながらメソッドを直接持たせることが可能となる。

### クラスベースの利点

クラスベースのアプローチの最大の利点は、型安全性とロジックの凝集性が向上する点である。クラスインスタンスが自身の型を明示的に示し、誤った割り当てを防ぐことができる。また、メソッドやプロパティをインスタンス内に直接定義できるため、関連するロジックが自然にカプセル化され、保守性も大幅に向上する。

### 実践的な使用例（じゃんけんゲーム）

具体的な例として、じゃんけんゲームの手を表す`HandType`クラスを示す。

```typescript
export class HandType {
    private constructor(private readonly value: string) {}

    static readonly Gu = new HandType("グー");
    static readonly Choki = new HandType("チョキ");
    static readonly Pa = new HandType("パー");

    static values(): HandType[] {
        return [HandType.Gu, HandType.Choki, HandType.Pa];
    }

    static fromText(text: string): HandType | null {
        return HandType.values().find(hand => hand.value === text) || null;
    }

    toText(): string {
        return this.value;
    }

    isStrongerThan(other: HandType): boolean {
        return (
            (this === HandType.Gu && other === HandType.Choki) ||
            (this === HandType.Choki && other === HandType.Pa) ||
            (this === HandType.Pa && other === HandType.Gu)
        );
    }
}
```

### パフォーマンス面での考察

クラスベースのアプローチはオブジェクトリテラルよりも若干のメモリ使用量増加が考えられるが、定数のインスタンス数が限られている場合、実用上の影響は微々たるものである。また、メソッド呼び出しなどの動作についても現代のJavaScriptエンジンの最適化が効くため、パフォーマンスへの影響は実質的に問題ない。

### 注意すべきデメリット

一方で、クラスベースのアプローチではコードが冗長化する可能性がある。オブジェクトリテラルに比べてクラスやメソッドの定義が必要になるため、コード量が増加し、導入時にチーム内で一定の学習コストが生じる可能性がある。

### ServerからClientコンポーネントへの値渡し

ReactやNext.jsなどのフレームワークにおいては、ServerコンポーネントからClientコンポーネントへクラスインスタンスを直接渡すことは推奨されない。これはクラスインスタンスがJSONでシリアライズできないためである。そのため、サーバーからクライアントへ値を渡す際にはプリミティブ型やJSONなどシリアライズ可能な形式で渡し、クライアント側で再度インスタンス化する設計が望ましい。

### オブジェクトリテラルとクラスベースの使い分け指標

プロジェクトの要求に応じて以下のように使い分けられる。

- 単純な定数定義が必要 → **オブジェクトリテラル**
- 複雑なロジックや拡張性が求められる → **クラスベース**
- 保守性や型安全性を重視 → **クラスベース**
- コードの簡潔さや導入コストを重視 → **オブジェクトリテラル**
Python環境構築メモ

# Python環境構築メモ

## pyenv

```bash
# イントールできるバージョンの確認
pyenv install --list

# インストール(ここでは3.13.2を指定)
pyenv install 3.13.2

# インストールされたバージョンの確認
pyenv versions

# バージョンの指定
# システム全体
pyenv global <version>
# 特定のディレクトリ
pyenv local <version>

```

## venv

```bash
# 仮想環境作成
python -m venv .venv

# 仮想環境活性化
source .venv/bin/activate

# 仮想環境化確認
which python

# 仮想環境非活性化
deactivate
```

## pip

```bash
# pip 準備
python -m pip install --upgrade pip
python -m pip --version

# パッケージインストール
python -m pip install requests

# バージョン指定
python -m pip install 'requests==2.18.4'

# バージョン範囲指定
python -m pip install 'requests>=2.0.0,<3.0.0'

# パッケージ更新
python -m pip install --upgrade requests

# requirements.txt使用
python -m pip install -r requirements.txt

# requirements.txtに出力
python -m pip freeze > requirements.txt
```
Reactが関数コンポーネントを採用する理由とFlutterのクラスコンポーネントとの比較


### はじめに

筆者はモバイル開発にはFlutter、Web開発にはReactを利用している。両者の違いを考える際に特に気になるのが、Reactがクラスコンポーネントから関数コンポーネントへ移行した理由である。本記事では、その背景に迫りながら、Flutterのクラスコンポーネント（Widget）との比較を通じて、それぞれの特徴やメリット・デメリットを整理する。

---

### なぜReactはクラスではなく関数コンポーネントを選んだのか？

#### クラスコンポーネントから関数コンポーネントへの移行

Reactではもともと、状態やライフサイクル管理のためにクラスコンポーネントが主流だった。しかし、React 16.8で導入されたHooksの登場により、状態や副作用を簡単に扱えるようになったことで、関数コンポーネントが主流となった。その理由は以下の点に集約される。

- **シンプルで直感的なコード**: 関数コンポーネントは余分な記述が少なく、コードの可読性とメンテナンス性が向上する。
- **再利用性の向上**: カスタムHooksによってロジックを簡単に再利用でき、コードの重複を防げる。
- **クラス特有の難しさの排除**: 「this」キーワードの混乱や複雑なライフサイクルメソッドを覚える必要がなくなった。

#### Webフロントエンドでオブジェクト指向は使えないのか？

Webフロントエンドでもオブジェクト指向プログラミング（OOP）は使える。実際、JavaScriptやTypeScriptはオブジェクト指向の特徴を十分に備えている。ただし、Webフロントエンド開発では、DOM操作やUIの状態管理などが頻繁に行われ、関数型プログラミングの特性（状態管理の明確化や副作用の制御）がコードのシンプルさや保守性向上に大きく寄与することから、Reactのように関数コンポーネントが主流となった経緯がある。

#### React Hooksを用いた状態管理の実例

```tsx
import React, { useState, useEffect } from 'react';

const Timer: React.FC = () => {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const timerId = setInterval(() => setTime((t) => t + 1), 1000);
    return () => clearInterval(timerId);
  }, []);

  return <div>経過時間: {time}</div>;
};

export default Timer;
```

---

### 一方、Flutterがクラスコンポーネントを維持する理由

Flutterでは、UIを構築するためにOOPをベースにしたクラスコンポーネントを採用している。これはDartの言語特性とFlutterのアーキテクチャに深く結びついている。

- **オブジェクト指向の活用**: ウィジェットの再利用性と拡張性が高く、状態をクラス内部で明示的に管理できる。
- **ライフサイクルメソッドの明確化**: 状態管理やリソース解放などが直感的に管理できる。
- **型安全性と明示的な設計**: Dartの特性を活かして、厳密で明確なコードが記述できる。

#### Flutterクラスコンポーネントの実例

```dart
import 'package:flutter/material.dart';

class CounterWidget extends StatefulWidget {
  final int initialValue;
  const CounterWidget({Key? key, this.initialValue = 0}) : super(key: key);

  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  late int _count;

  @override
  void initState() {
    super.initState();
    _count = widget.initialValue;
  }

  void _increment() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $_count'),
        ElevatedButton(onPressed: _increment, child: Text('+1')),
      ],
    );
  }
}
```

---

### React HooksとFlutter Providerの比較

#### React Hooks

- **メリット**: シンプルで直感的、再利用性が高い。
- **デメリット**: 慣れないと複雑な状態管理で混乱する場合がある。

#### Flutter Provider

- **メリット**: 明示的でクラスベースのため、構造化が容易。
- **デメリット**: 状態が肥大化すると管理が煩雑になることがある。

---

### どちらを選ぶべきか？

#### React + HooksがWebフロントエンドに適している理由

- DOM操作やレンダリング最適化が容易であり、パフォーマンス調整が柔軟に行える。
- 関数型アプローチによりコードの軽量化やメンテナンス性が向上し、SPAやSSRなど多様なWebアプリケーション開発に適している。

#### Flutter + クラスコンポーネントがクロスプラットフォーム開発に適している理由

- Dartのコンパイル性能とOOPによる構造的明確さが、異なるプラットフォーム間での互換性を保ちやすくする。
- ウィジェットベースの明示的な設計により、複数環境間でのUIの一貫性や保守性が担保される。

---

### まとめ

Reactが関数コンポーネントを採用した理由は、シンプルさと再利用性、コードの直感的な理解を向上させることにある。一方、Flutterがクラスベースの設計を維持しているのは、OOPの明示的かつ構造化された設計思想に基づいているからである。プロジェクトの性質や開発チームのスキルセットを考慮して適切な技術を選択することで、開発効率や保守性が大きく向上する。
VS CodeでPythonコードの各部分を区切って、それぞれを部分的に実行するには

前回記載した「VS CodeでPythonを使う」記事から追加で、コードの各部分を区切って、それぞれを部分的に実行する方法を記載します。

# 前回

前回記載の内容まで完了しているものとします。

https://qiita.com/dl_from_scratch/items/4110d2e8fca1c7e299cf

# Pythonコードの各部分を区切って部分的に実行するには

VS Codeの拡張機能から「jupyter」で検索して
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606924/527c2ec3-4f8d-4534-b5b2-a289261af170.png)

「Jupyter」という拡張機能をインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606924/804c29a4-82fc-455d-b3b7-59b05e4c8ab9.png)

コードに「# %%」を追加しておくと、「# %%」の間がセクションになって、
```test.py
# %%
def main():
    A()

def A():
    def AA():
        print("!")
    AA()

class B(Exception): 
    def C(self):
        print("!")

if __name__ == "__main__":
    main()

# %%
print("???")

# %%
A()
```

コードの上で、Shift+Enterキーを押すと、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606924/920bfdba-0c7c-4d57-aaa8-28c5f0e8f09d.png)

初回時に、下記の追加インストールのダイアログが表示されるので、「Install」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606924/6249c806-e6e5-4668-8990-c7a024ee32eb.png)

VS Codeの右下に進捗が表示され、しばらく待つ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606924/b05b92b5-1c99-4dea-a0c5-f7d2eb956979.png)

すると、右側に「Interactive-1」のウィンドウが出来て、コードが実行され、
「???」が表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606924/6e15db31-c03a-44c9-ac38-d67e4afb596f.png)

任意のコードの上で、Shift+Enterキーを押して、各部分を実行可能
例: 長いコードのまとまりも、実行可能
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606924/3353c040-8eb7-4bde-86d8-ef02674cfe55.png)

## 右下の空欄にコードを書いて実行

右下の空欄にコードを書いて、Enterキーを押して、実行も可能
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606924/d9f0d039-98d6-450b-aba9-2444bedd2c05.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606924/33426882-0205-4450-ae71-c0e01861dacc.png)

## 実行結果を.ipynbに保存

「Save」ボタンで、.ipynbに保存可能
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606924/18303c8b-633b-4c6d-ae8a-6755fbe702ec.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606924/479f08d6-4755-4952-8cf4-57f107301fa3.png)

.ipynbファイルは、VS Codeで開いて見ることが出来る。

「...」ボタンから「Export」を選択すると、色々な形式でも保存可能
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606924/eff867a0-e647-4bd2-b6cd-13c2ff41c593.png)

# 参照

https://qiita.com/suudon0014/items/dbf0237d90922275af1c

# 生成AIに聞く

ChatGPTでも聞いてみた結果

https://chatgpt.com/share/67f0ea1c-af14-8004-a164-b6446cba8c0d
Google自動翻訳による「日本語→日本語」の不自然な翻訳を防ぐ方法

## はじめに

Google Chromeなどのブラウザで、言語の判別がうまくいかないと、「このページは外国語」と誤認され、日本語ページに対してもう一度日本語で翻訳される、という不思議なことが起きます。

このときに自動翻訳が有効になっていると、日本語が不自然に置き換えられるという不具合が発生することがあります。

## 解決策

web側でGoogle自動翻訳を強制的にオフにするには下記を1行加えるだけで大丈夫です。

```application.html.erbなどのレイアウトファイル
<meta name="google" content="notranslate">
```

UIの日本語を意図せず変換されることを確実に防ぎたい場合はおすすめです。
iOSアプリ開発者がVSCodeでCline使ってみた

ヘビーXcodeユーザーだったのですが、あまりにSwift Assistが出ないので、VSCode+Clineを試してみることにしました。

# 準備
1. VSCodeをインストール
2. VSCodeからXcodeのプロジェクトをビルドできる拡張「SweetPad」をインストール
3. Clineの拡張機能をインストール
4. Claudeを契約して、5$分のAPI利用を購入し、APIキーを取得
5. VSCodeにAPIキーを入力
6. .clinerulesを編集

@mizchi さんのルールをベースに
https://zenn.dev/mizchi/articles/all-in-on-cline

@hicka04 さんのVIPERのアーキテクチャ定義を使ってみました。AIにそのまま与えられるぐらいきっちり書かれた良い記事でした。ありがとうございます🙏
https://qiita.com/hicka04/items/09534b5daffec33b2bec#router

https://gist.github.com/yosshi4486/a4b79333754bfbe9fed7266aaa3910a0

# プロンプト

```
これはQiita iOS Clientという、Qiita(https://qiita.com/api/v2/docs)という技術情報シェアサービスの情報をiOSアプリ上で表示するアプリです。すでに私が「Qiita-Client」というXcodeのプロジェクトを追加しました。このプロジェクトで、上記のQiita APIを使って下記の画面を実装してください。
- 記事一覧表示画面(UICollectionViewで実装)
- 記事詳細表示画面(一覧からタップで遷移)
ブランチはfeatureを使ってください。作業がひと段落するたびにコミットしてください。
```

# 結果
(ちょっと手直しはしたものの)かなりできてるやん！！ゼロから重い腰を上げてここまで実装する労力を考えると、多少定義済みの実装を2度行なったり、ビルドが通らない実装をしてしまったり、詳細をHTMLで表示してしまっているところはあれど、十分な速度と生産性だということがわかりました。ドメインオブジェクトなど、コアモジュールだけしっかり設計して、それ以外の部分をAIコーディングに頼るっていうのも効果がありそうです。

## 一覧画面
![Simulator Screenshot - iPhone 16 Pro - 2025-04-05 at 16.59.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114709/e07a83b2-9789-455e-a96c-36528ff95bf4.png)

## 詳細画面
![Simulator Screenshot - iPhone 16 Pro - 2025-04-05 at 17.00.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114709/bcf5a861-2350-4d62-a2d7-da02a664fb9b.png)

# かかったコスト
`1.4$`

# かかった時間
`6分` (人間なら綺麗なコードで30~1時間ぐらいかかると思います)
windows11で、sketchup6 その51

# 概要
windows11に、sketchup6を入れてみた。
rubyで、3Dを書く。
カメラをアニメーションするプラグイン、見つけたので、やってみた。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/e6efc013-66bb-49e5-bb53-fe7ce4eff41f.png)


# サンプルコード

```


require 'sketchup.rb'


class ViewSpinner
	def initialize
		model = Sketchup.active_model
		view = model.active_view
		camera = view.camera
		@target = model.bounds.center
		@up = Geom::Vector3d.new(0, 0, 1)
		@distance = camera.eye.distance @target
		@zmin = @target.z
		@zmax = @zmin + @distance
		@dz = @distance / 300
		@z = @zmin
		@angle = 0
		@frame = 0;
		@startTime = Time.now
		Sketchup::set_status_text($exStrings.GetString("FPS"), 1)
	end
	def nextFrame(view)
		@frame = @frame + 1
		totalTime = Time.now - @startTime
		fps = 1
		if (totalTime > 0.001)
			fps = @frame / totalTime
		end
		fps = fps.to_i
		Sketchup::set_status_text(fps, 2)
		a = @angle * Math::PI / 180.0
		x = @target.x + (@distance * Math::sin(a))
		y = @target.y + (@distance * Math::cos(a))
		eye = Geom::Point3d.new(x, y, @z)
		view.camera.set(eye, @target, @up)
		@angle = (@angle + 1) % 360
		view.show_frame
		@z += @dz
		if (@z > @zmax)
			@z = @zmax
			@dz = -@dz
		elsif (@z < @zmin)
			@z = @zmin
			@dz = -@dz
		end
		return true
	end
	def stop
		Sketchup::set_status_text("", 1)
		Sketchup::set_status_text("", 2)
	end
end 

def spinview
	Sketchup.active_model.active_view.animation = ViewSpinner.new
end

if (not file_loaded?("animation.rb"))
	add_separator_to_menu("Camera")
	animation_menu = UI.menu("Camera").add_submenu("Animations")
	animation_menu.add_item("Spin View") {
		spinview
	}
	animation_menu.add_item("Stop Spinning") {
		Sketchup.active_model.active_view.animation = nil
	}
end

file_loaded("animation.rb")





```

以上。
sharapoint ショートカットの追加

https://note.com/ictlink/n/nef78062973c7
```
手順① ブラウザからSharePointにアクセスする。
「OneDriveへのショートカットの追加」をクリック
手順② 組織のOneDriveにアクセスしてショートカットが作成されているか確認する。
このショートカットをデスクトップや、ほかの場所に移すと、とんでもない量のコピー処理が開始されてしまう。
手順③ 組織のOneDrive内に作成されたショートカットのフルパスを取得する。
手順④ デスクトップに手順③で作成したショートカットへのショートカットを作成する。
その後、デスクトップ画面で「右クリック」→「ショートカット」→「手順③で取得したフルパスをコピペ」します。
```


```
すぐにできるCドライブの空き容量を増やす方法9つ
デスクトップに表示されているファイルを削除する
不要になったアプリをアンインストールする
使用しているブラウザの一時ファイルを削除
OSの復元ポイントを削除する
ページファイルを小さくする
Cドライブをデフラグしてファイルの断片化を解消する
オンラインストレージにファイルを移動する
ファイルやドライブを圧縮する
外付けHDDやSSDを準備してファイルを移動する

```

https://www.4900.co.jp/smarticle/25137/
【PHP】ルビ振りAPIを使ってみた

# 初めに
Excelにて漢字にふりがなをつけようとしたが、CSVをインポートしたデータやWEBページからコピペしたテキストには自動でふりがなが付かないことがわかった。そのため、代替手段として[Yahoo!デベロッパーネットワーク](https://developer.yahoo.co.jp/)の[ルビ振りAPI ](https://developer.yahoo.co.jp/webapi/jlp/furigana/v2/furigana.html)を使用することにした。

>[リファレンス](https://developer.yahoo.co.jp/webapi/jlp/furigana/v2/furigana.html)より引用
>漢字かな交じり文に、ひらがなとローマ字のふりがな（ルビ）を付けます。

## 環境
- Windows11
- PHP 8.0.12

## パラメータ
* id(必須項目) => 任意の値
* jsonrpc(必須項目) => 2.0
* params/q(必須項目) =>  解析対象テキスト
* params/grade =>小学校の学年を指定できる

本コードではparamsにてパラメータをセットしてください。
※事前に[利用登録](https://developer.yahoo.co.jp/start/)を行い、Client IDを取得すること。
※GETメソッドでは取得できないため、POSTメソッドを使用する必要がある

# コード
```PHP:hiragana_api.php
<?php

$appid = "your Client ID"; // <-- ここにあなたのClient ID（アプリケーションID）を設定してください。
$url = "https://jlp.yahooapis.jp/FuriganaService/V2/furigana";

function post($query, $appid, $url)
{
	$headers = [
		"Content-Type: application/json",
		"User-Agent: Yahoo AppID: $appid"
	];

	$param_dic = [
		"id" => "1234-1",
		"jsonrpc" => "2.0",
		"method" => "jlp.furiganaservice.furigana",
		"params" => [
			"q" => $query,
			"grade" => 1
		]
	];

	$params = json_encode($param_dic);

	$options = [
		'http' => [
			'header'  => implode("\r\n", $headers),
			'method'  => 'POST',
			'content' => $params
		]
	];

	$context  = stream_context_create($options);
	$result = file_get_contents($url, false, $context);

	if ($result === FALSE) {
		return "Error occurred";
	}

	return $result;
}

$response = post("漢字かな交じり文にふりがなを振ること。", $appid, $url);
echo $response;


```

# レスポンス例
```JSON:response.json
{
	"id": "1234-1",
	"jsonrpc": "2.0",
	"result": {
		"word": [{
			"furigana": "かんじ",
			"roman": "kanzi",
			"surface": "漢字"
		}, {
			"furigana": "かなまじり",
			"roman": "kanamaziri",
			"subword": [{
				"furigana": "かな",
				"roman": "kana",
				"surface": "かな"
			}, {
				"furigana": "ま",
				"roman": "ma",
				"surface": "交"
			}, {
				"furigana": "じり",
				"roman": "ziri",
				"surface": "じり"
			}],
			"surface": "かな交じり"
		}, {
			"furigana": "ぶん",
			"roman": "bun",
			"surface": "文"
		}, {
			"surface": "に"
		}, {
			"surface": "ふりがな"
		}, {
			"surface": "を"
		}, {
			"furigana": "ふる",
			"roman": "huru",
			"subword": [{
				"furigana": "ふ",
				"roman": "hu",
				"surface": "振"
			}, {
				"furigana": "る",
				"roman": "ru",
				"surface": "る"
			}],
			"surface": "振る"
		}, {
			"surface": "こと"
		}, {
			"surface": "。"
		}]
	}
}
```

# 終わりに
このAPIを使用することで、自動でふりがなをつけることができた。手動でするよりもはるかに工数が減らせるので、非常に有用なAPIだと思う。


使用にあたっては[Yahoo!デベロッパーネットワーク ガイドライン](https://developer.yahoo.co.jp/guideline/)の範囲内、非商用目的でお使いください。商用利用の場合は[お問い合わせ](https://support.yahoo-net.jp/PccDeveloper/s/article/H000011080)ください。
またAPI等の詳細は[公式リファレンス](https://labs.goo.ne.jp/api/jp/hiragana-translation/)を読んでお使いください。

## 各種条件
* 利用回数->Client IDに対し、1分で300回
* クレジット表示が必要

### クレジット
[Web Services by Yahoo! JAPAN](https://developer.yahoo.co.jp/sitemap/)

# 参考サイト
https://developer.yahoo.co.jp/webapi/jlp/furigana/v2/furigana.html

https://developer.yahoo.co.jp/webapi/jlp/sample/sample10.html

https://github.com/yahoojapan/textwebapi-cookbook?tab=readme-ov-file
感情を整えて、仕事をラクにする──私のEQ習慣

## はじめに に入る前に

業務の中で感情に左右されないよう意識してきた結果、自然とEQ（感情知性）を意識するようになりました。  
この記事では、私が日々実践しているEQを高めるための工夫を3つ紹介します。

また、本記事の内容は、長期的なマネジメントというよりも、  
**SESや業務委託などで関わるメンバーにも気持ちよくパフォーマンスを発揮してもらうために、  
私が日々意識しているEQ的な習慣や配慮**を紹介するものです。



## 目次

1. [はじめに：EQ（感情知性）とは？](#はじめにeq感情知性とは)
2. [EQがもたらす仕事への影響](#eqがもたらす仕事への影響)
3. [実践 1：Slackの表現を統一する](#実践-1slackの表現を統一する)
4. [実践 2：否定的な発言を控える](#実践-2否定的な発言を控える)
5. [実践 3：朝5時に筋トレして気持ちを整える](#実践-3朝5時に筋トレして気持ちを整える)
6. [まとめ：EQは習慣で身につく](#まとめeqは習慣で身につく)


## はじめに：EQ（感情知性）とは？

**💡 EQ（Emotional Intelligence Quotient）** とは、  
*「感情を認識し、適切に扱う力」* を指します。

近年、エンジニアリングの現場でも  
**技術力だけでなく、EQの高さが信頼関係やチーム連携に直結する**  
という認識が広がっています。

EQは、生まれ持った才能ではなく  
**習慣や意識の積み重ねによって育てていけるもの**です。

本記事では、私自身が日々の業務で実践している  
「EQを高めるための小さな工夫」を紹介していきます。



## EQがもたらす仕事への影響

🤝 EQを意識することで、日々の仕事の中でも以下のような効果が得られます。

- **感情の安定は、周囲に安心感を与える**  
  → 常に落ち着いた対応ができる人には、自然と相談しやすい雰囲気が生まれます。

- **一貫した対応が、信頼関係を築く**  
  → 機嫌や状況に左右されない言動が、周囲からの信頼につながります。

- **質問や相談のしやすさが、ミスや手戻りの防止につながる**  
  → 小さな疑問をその場で解消できることで、後々のトラブルを未然に防ぐことができます。

- **自分の状態を整えることで、チーム全体のパフォーマンスが上がる**  
  → チームは “空気” に左右されます。まず自分が整っていることが、周囲の安定にもつながります。


## 実践 1：Slackの表現を統一する

💬 私はSlackでのやりとりにおいて、**常に「承知いたしました。」と返すようにしています。**

気分が良いときに「了解です！」、疲れているときに「了解。」といった変化をつけるのではなく、  
**あえて一貫した表現を使い続ける**ことで、次のような効果があります。

- **感情のブレを見せず、安定した印象を与えられる**  
  → 相手が「今日は機嫌が悪そう…？」と気を遣わずに済みます。

- **相手に余計な気遣いをさせない配慮になる**  
  → 文面から感情を読み取ろうとする無駄な負荷を与えず、円滑なやり取りが可能になります。

Slackなどのテキストは、声色や表情が見えないからこそ、**言葉の選び方にEQが現れる**と感じています。

## 実践 2：否定的な発言を控える

⚠️ 私は日頃から、**たとえ雑談の中でも否定的な発言をなるべくしないように**意識しています。

たとえメンバーに直接関係のない話題であっても、  
ネガティブな発言が周囲に与える影響は思った以上に大きいと感じています。

- **否定的な発言は、チームの雰囲気を悪化させる**  
  → 雰囲気がギスギスすると、ちょっとした相談もしづらくなります。

- **質問や相談のハードルが上がり、情報共有が滞る**  
  → 結果的に、実装中の疑問が放置され、後になってバグとして発覚することも。

- **ミスや手戻りの温床になるリスクもある**

- **常に安心して話しかけられる空気づくりが大切**

EQの観点からも、**「相手の気持ちを想像し、自分の言動をコントロールする」** という意識は、  
小さな場面ほど重要だと実感しています。


## 実践 3：朝5時に筋トレして気持ちを整える

☀️ 私は毎朝5時に起きて、軽い筋トレを行っています。  
この習慣は単なる健康のためではなく、**感情を整える手段として取り入れています。**

- **就業前の不安やモヤモヤをリセットできる**  
  → 仕事に取りかかる前に気持ちをリセットできることで、1日のスタートが軽くなります。

- **気分を整えて、仕事に集中しやすくなる**

- **感情に流されず、自分で自分を整える習慣になる**

EQの観点では、こうした **「自分の状態を整える自己管理」** が非常に重要です。  
特に忙しい日やプレッシャーのある日こそ、こうした習慣が支えになります。

EQは特別なスキルではなく、**こうした日々の自己管理の積み重ねで少しずつ高まっていく**と感じています。



## まとめ：EQは習慣で身につく

✅ EQ（感情知性）は、**特別な才能やスキルではなく、意識と行動の積み重ねで高められる**ものです。

- **感情を整えることが、信頼・連携・成果につながる**
- **毎日の小さな工夫が、チーム全体の安定に波及する**

Slackの表現、発言のしかた、生活習慣といった身近な部分からでも、  
**EQを意識することで仕事がラクになり、チームの雰囲気も良くなる**と私は実感しています。

最後まで読んでいただき、ありがとうございました。
AWS Migration Hub と AWS Application Discovery Service の違い

# 結論
- AWS Migration Hubは、AWSへの移行プロジェクトを一元管理するダッシュボード
- AWS Application Discovery Serviceは、オンプレミス環境のサーバ情報を収集するツール
- Migration Hubは移行全体の管理が得意
- Application Discovery Serviceは、CPU使用率やネットワークトラフィックのデータ収集が得意
- Athenaでポート確認できるのは、Application Discovery ServiceがS3にエクスポートしたデータ
- Migration Hub自体にはポート確認機能がない


# 全体イメージ
![タイトルなし.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2746730/1b15b58a-2708-4e14-830a-90d4d5bd10d2.png)


https://pages.awscloud.com/rs/112-TZM-766/images/20220518_18th_ISV_DiveDeepSeminar_MigrationHub.pdf
オンプレのAIチャットWebアプリ構築の時に気づいたこと

# 背景

- GPU付きのパソコンでUbuntuをインストールしてopen-webuiを構築してみた

https://github.com/open-webui/open-webui

- GPUもあるので、オープンソース最強（かも）と言われるgemma3:27bもollamaを通じて使ってみた

# 理由

- セキュリティ・コスト・レイテンシーの関係で、クラウドではなくローカルで構築することを選択した
    - ただし、パソコンは1台だけなので、冗長化は持たない（オンプレの欠点）
　
- ほとんどのユーザーはエンジニアではないので、APIの提供より、GUIがあるWebアプリの方が使いやすい

# 気づいたこと

## 環境構築

- Ubuntuはやはり楽、ドライバーのインストール全く詰まったことがない
　
- Dockerの構築は、公式のDocに従って、sudoでインストールして、その後にユーザーをグループに追加するのはベストプラクティスらしい
　
- ollamaとopen-webuiもDockerにした方が良い
    - OS環境がグチャグチャにならない
　
- ollamaのエンドポイント（ポート11434）を直接ユーザーに開放したくない場合は、ポートのアクセス制御が必要

## open-webuiのセットアップ
　
- ollamaからOpenAIとの連携は少し難しくて、ただしたまに強いモデルも使いたい時がある、その場合はopen-webuiの方で直接OpenAI連携できるのはありがたい
　
- open-webuiだけではなくて最近のAIアプリもユーザー・グループ・権限管理の機能が完璧しすぎて企業での導入も非常に楽

## 使用感

- ローカルでgemma3:27bだけど、それでもo1, Claude 3.7 Sonnetと格段的な性能差があるので、AIがそこまで詳しくないユーザーへの期待コントロールが必要、ただしローカルだと本当に相当早い
　
- Pythonスクリプトで書いたツールを外部との連携ができるけど、複雑なユースケースだとツールには向いていない、例えばBigQueryのテーブルをクエリしたくて、テーブル一覧を取得・カラムとスキーマを取得・クエリの3ステップが必要、このようなユースケースを見ると、エージェントとMCPは圧倒的に便利
【Next.js】アプリ作成とshadcnの初期インストール





## 初期アプリインストールコマンド

```bash
$ npx create-next-app@<バージョン> <アプリ名>
$ npx create-next-app@14 notion_to_qiita_prod
```

Next.jsのバージョン14で最新のものをインストールします。

TypeScriptやTailwind CSSを使用するかなどが聞かれるので、
yesしていく

```bash
Ok to proceed? (y) y

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
:
:
:
Success! Created <アプリ名>
↑が表示されれば正常終了

```



## shadcnの初期インストール

shadcnをインストールしていい感じのUIを簡単に利用できるようにします。

↓ shadcnドキュメント参照

https://ui.shadcn.com/docs/installation/next

```bash
$ npx shadcn@latest init
✔ Preflight checks.
✔ Verifying framework. Found Next.js.
✔ Validating Tailwind CSS.
✔ Validating import alias.
✔ Which style would you like to use? › New York (Recommended)
✔ Which color would you like to use as the base color? › Neutral
✔ Writing components.json.
✔ Checking registry.
✔ Updating tailwind.config.ts
✔ Updating src/app/globals.css
✔ Installing dependencies.
ℹ Updated 1 file:
  - src/lib/utils.ts

Success! Project initialization completed.
You may now add components.

```



## shadcnのコンポーネントをインストール

先ほどのshadcnドキュメントから以下のように必要コンポーネントをインストール

```bash
$ npx shadcn@latest add button badge card select separator 
✔ Checking registry.
✔ Installing dependencies.
✔ The file button.tsx already exists. Would you like to overwrite? … yes
✔ Created 4 files:
  - src/components/ui/badge.tsx
  - src/components/ui/card.tsx
  - src/components/ui/select.tsx
  - src/components/ui/separator.tsx
ℹ Updated 1 file:
  - src/components/ui/button.tsx

```

必要なtsxファイルがsrc/components/ui/配下に作成されます。

利用するためには

```javascript
import { Badge } from "@/components/ui/badge";
```

上記のようにimportすると使用できます。
【ChatGPT＋4o Image Generation】の仕組みについて、ChatGPTとのやり取りでいくつかわかりました。


　どうも、カーブミラーです。

　今回は、4o Image Generationの仕組みについて、ChatGPTとのやり取りでいくつかわかりました。

:::note info
本記事は、ChatGPT（Plus版）
で行なっております。
画像はあります。　あしからず。
:::
　ChatGPT等の動作状況を知らせる
　　OpenAIのステータスページ。
　　　[OpenAIステータス](https://status.openai.com/)
***
　こちらも載せますね。
　　[ChatGPTが使えない？ログインできない・反応しない原因やエラー時の対処法を解説](https://aismiley.co.jp/ai_news/chatgpt-error-resolution-explanation/)
***
　では、【本題】です。

　今回は、
　　4o Image Generationの
　　　仕組みについて、
　　　　ChatGPTとのやり取りで
　　　　　いくつかわかりました。
　　　　　　その報告になります。


と書いたのですが、
あとから内容に不備がありましたので、
書き直しました。

下記記事を参照してください。
[【ChatGPT＋4o Image Generation】の仕組みについての全訂正です。](https://qiita.com/kabumira/items/05b9c209894ca334f0be)