OmniAICreator/Qiita-1.07M huggingface dataset:
JavaでJSONの文字列を書く場合

### java 12以前

```java
public class Main {
    public static void main(String[] args) {
        String json = "{\n" +
                      "    \"name\": \"Alice\",\n" +
                      "    \"age\": 25,\n" +
                      "    \"city\": \"Tokyo\"\n" +
                      "}";
        System.out.println(json);
    }
}
```

### Java 13以降

```java
public class Main {
    public static void main(String[] args) {
        String json = """
            {
                "name": "Alice",
                "age": 25,
                "city": "Tokyo"
            }
            """;

        System.out.println(json);
    }
}
```
総合カリキュラム：美術・建築・構造力学・AI融合



---

## 第1章：建築と美術の導入
- 建築とは何か？ 美術との関係
- 建築と宗教・文化・技術のつながり
- 様式と時代（構造・装飾・機能）

---

## 第2章：古代〜中世の建築と美術
- 古代エジプト・メソポタミアの神殿と都市
- ギリシャ建築（オーダー）と彫刻
- ローマ建築（アーチ・ドーム・インフラ）
- ビザンティン・イスラーム美術（モザイク・アラベスク）
- ロマネスクとゴシック（大聖堂と垂直性）

---

## 第3章：ルネサンスとバロックの建築と美術
- ルネサンス：比例・幾何・パースペクティブ
- 人文主義と芸術（レオナルド・ミケランジェロ）
- バロック：空間演出と構造の動き
- ロココ：軽やかな装飾美

---

## 第4章：近代建築と多様な美術
- 産業革命と建築素材の変化（鉄・ガラス）
- アール・ヌーヴォーと装飾芸術
- モダニズム（ル・コルビュジエ、バウハウス）
- 印象派〜シュルレアリスムまでの美術史

---

## 第5章：現代建築と現代アート
- ポストモダン建築の思想と演出
- ミニマリズム・脱構築主義・環境建築


---

## 第6章：建築設計技法と構造力学

### 6.1 建築設計の基本技法
- 平面図・立面図・断面図の描き方と読み方
- スケッチ・パース・3Dモデリング（BIM）


### 6.2 構造力学の基本法則
- 静力学の三原則（力のつり合い）
- 応力・ひずみとフックの法則
- ヤング率と材料変形

### 6.3 構造部材の力学
- 梁：曲げとせん断
- 柱：圧縮と座屈
- トラスとアーチ：部材の力の流れ
- ラーメン構造の変形・剛性

### 6.4 振動と動的荷重
- 固有振動数・共振と減衰
- 風・地震荷重の影響
- 時刻歴応答の考え方（概要）

### 6.5 構造形式と力の流れ
- 吊構造・ドーム・シェル構造
- 張力と圧力の設計
- 地盤・杭・基礎構造

### 6.6 構造解析手法
- 静定構造と不静定構造
- マトリクス法・部材法
- フレーム解析とFEM入門

### 6.7 地震に強い構造
- 耐震／制震／免震の違い
- 日本建築の地震対応技術

### 6.8 名建築と構造美
- パルテノン神殿：重力と比例
- サグラダ・ファミリア：吊構造
- ハギア・ソフィア：ドームと支持構造

---

## 第7章：建築とAI・機械学習の融合

### 7.1 機械学習の基礎
- 教師あり学習（回帰・分類）
- 教師なし学習（クラスタリング、PCA）
- 強化学習の概要と建築への応用

### 7.2 建築データ解析と特徴量
- 特徴量：面積・建築年・日照・気温・密度など
- モデル：決定木、ランダムフォレスト、LightGBM
- 地価予測・建築用途分類

### 7.3 画像処理とコンピュータビジョン
- 建物画像の分類・識別（CNN、ResNet）
- 図面からの情報抽出（OCR、物体検出）
- 空間認識とセグメンテーション（U-Netなど）
React Native Paperで困ったところ ①List.Accordionをカスタムしたい

### やりたき事
- 三角形を押下した時は開閉
- それ以外の部分を押下した時は別画面に遷移


### 元々のコード
```tsx
import { List } from "react-native-paper";
export const Accordion = () => {
    return (
        <List.Accordion
            title="Summary"
        >
            <List.Item title="Detail 1" />
            <List.Item title="Detail 2" />
        </List.Accordion>
    );
}
```

### 修正方針
List.Accordionを使わない。開閉アイコンだけを使うことにする。

### 修正後コード
```tsx
import { List } from "react-native-paper";
import { TouchableWithoutFeedback } from "react-native";
export const Accordion = () => {
    const [expanded, setExpanded] = useState(false);
    const handlePress = () =>{/* タイトルクリック時のアクション */}
    return (
        // Summary
         <View style={{ flexDirection: "row", alignItems: "center" }}>
          <TouchableWithoutFeedback onPress={handlePress}>
              <Text>Summary</Text>
          </TouchableWithoutFeedback>

          // 開閉アイコン
          <TouchableWithoutFeedback onPress={() => setExpanded(!expanded)}>
            <View>
              <List.Icon icon={expanded ? "chevron-up" : "chevron-down"} />
            </View>
          </TouchableWithoutFeedback>
        </View>

        // Details
        {expanded && (
            <List.Item title="Detail 1" />
            <List.Item title="Detail 2" />
        )}
    );
}

```


### メモ
- タッチ時に視覚的な変化をつけたいなら`TouchableWithourFeedback`じゃないのを使う

### その他
僕がもっとReactに詳しければ、最高なんですが
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3567980/603a2a8a-6fbe-4ff4-8230-ee2c6c31e41c.png)
音響・音作り・回路・プログラミング 総合カリキュラム



---

###  第1章：音と音波の基礎
1.1 音とは何か？
- 音の正体（空気の振動）と分類（純音／複合音）

1.2 音波の基本性質
- 音の伝搬、音速の定義と計算
- 音響インピーダンスと密度の関係

1.3 音圧と音の強さ
- 音圧（Pa）と音の強さ（W/m^2）
- デシベル（dB）の意味と計算
- スペクトルレベル、オクターブバンドレベル

---

###  第2章：人間の耳と音の知覚
2.1 音の大きさの感じ方
- Weber–Fechnerの法則、等ラウドネス曲線
- ラウドネスと両耳ラウドネス

2.2 音が重なるとどうなる？
- 同時マスキング、継時マスキング
- 臨界帯域と知覚的バランス

2.3 音の高さと音程の感じ方
- ピッチ感覚と音律の理解
- メル尺度、弁別閾、ミッシングファンダメンタル

2.4 音色の知覚
- 音色の物理要素（アタック・倍音・エンベロープ）

---

###  第3章：シンセサイザーの基礎と音源方式
3.1 楽器と信号の違い
- アナログ楽器／デジタル楽器の構造

3.2 音源方式の分類
- 減算合成（Subtractive）
- 加算合成（Additive）
- FM合成（Frequency Modulation）
- PD音源、ウェーブシェーピング
- PCM音源、モデリング音源、グラニュラー合成

3.3 音の制御要素
- オシレーター（VCO）
- フィルター（VCF）、アンプ（VCA）
- EG（ADSR）、LFO

---

###  第4章：エフェクターの使い方としくみ（12項目）
4.1 音色補正系
- イコライザー（EQ）とフィルター

4.2 ダイナミクス制御系
- コンプレッサー、リミッター
- ゲート、エクスパンダー

4.3 時間系エフェクト
- ディレイ（エコー）、リバーブ（残響）

4.4 モジュレーション系
- コーラス、フランジャー、フェイザー

4.5 歪み・音質変化系
- ディストーション、オーバードライブ、ローファイ

4.6 空間・解析系
- ステレオイメージャー、ディザ、アナライザー

---

### 第5章：エフェクター＆アンプの電子回路
5.1 電子回路の基礎
- 電気単位（V, A, Ohm, F）と記号
- 抵抗、コンデンサ、トランジスタ、ダイオード

5.2 回路構成の理解
- 増幅回路（反転／非反転）
- バッファ、EQ、クリッピング、ボリューム調整

5.3 電源・制御部
- 単電源／両電源、バイアス回路、LEDインジケータ

5.4 実例による分解
- 歪みエフェクターの7分割回路解説
- チューブアンプの段階解説（入力～出力部）

---

###  第6章：サウンドプログラミング
6.1 音の基本生成
- サンプリング、標本化、量子化
- WAVE形式と音声出力

6.2 波形生成
- サイン波、矩形波、三角波、ノコギリ波
- ノイズ（ホワイト、ピンク）生成

6.3 合成法
- 加算合成、減算合成、FM合成
- ボコーダ、エンベロープ制御（ADSR）

6.4 周波数解析と処理
- DFT / FFTの実装と可視化
- スペクトル／スペクトログラム
- フィルター処理（FIR, IIR, DFT）

6.5 リアルタイム処理
- 録音、再生、ループバック
- ボイスチェンジャー、ピッチシフト

---

###  第7章：音響信号処理・変換アルゴリズム
7.1 フーリエ変換の理解と応用
- 離散フーリエ変換、FFT

7.2 窓関数と畳み込み
- 窓関数（矩形、ハニング、ハミング、ブラックマン）
- 畳み込み積分とオーバーラップ加算法

7.3 サンプリング周波数の変換
- ダウンサンプリング、アップサンプリング
- サンプリング変換アルゴリズム

---
セキュリティパッチは当てないとだめなのか

エンジニアとして普段業務を行っている方は「**パッチ**」という単語を耳にすると思います。

普段の生活の中ではなかなか登場しない単語なのでイメージが付きづらかったのですが
簡単に言うと「**OSやソフトウェアのセキュリティを高めるアップデート用のファイル**」のことを指します。

どんなサービスやソフトウェアでも完璧なものはなく、
リリース当初は問題がなくても、時間経過とともに脆弱性が発見されることがあります。
そのまま放置していると悪意を持った人から脆弱性をついた攻撃を受けてしまうかもしれません。
※素人の僕には細かいことはわかりませんが、そのようなことが出来る人が世の中にはいるみたいです

そのような事態を防ぐために定期的に「**セキュリティパッチ**」を当ててあげる必要があります。

元々コンピュータが誕生したときはスタンドアロンで使用しており、
ネットワーク経由でコンピューターを使用していませんでした。
業務に必要な機能を備えたコンピューターを必要な人が必要な時に使用していました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1885188/c9411a5f-c5ac-4851-b3bb-594a30e58c80.png)

技術の進歩によりスタンドアロンの利用から複数のコンピューターをネットワークで接続して使用するコンピューターネットワークが普及して、個々のコンピューターに格納されている情報を複数のコンピューターで共有したり、遠くのコンピューターへ瞬時に情報を送ったりできるようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1885188/47a0611e-b59d-4a04-aa00-af3959a68581.png)

コンピューターネットワークが広まり、接続範囲から会社内から会社間、インターネット経由で別の企業のサービスにも接続できるようになったりと、利用可能なことが増えた反面、インターネット経由で不特定多数の人から攻撃を受ける可能性も出てきました。
※元々コンピューターネットワークは性善説に基づいた運用がされていましたが、インターネットの普及により、その運用では発生するリスクに対処することができなくなっていきました

そのためセキュリティパッチを適用し、セキュリティリスクを低減させることがコンピュータを使用するうえで必要になります。

エンジニアになりたての時は、運用保守の費用を払ってエンジニアにパッチ適用前後で導入しているソフトウェアやOSが問題なく動くか等を検証させて、定期的にパッチを適用するのってコスパ悪くないか、セキュリティパッチって当てないとだめなのか、と思っていましたが、
万が一脆弱性をついて内部のコンピューターが攻撃され、情報漏洩や業務停止などの事態が起きれば企業の信用や利益の損失は運用コストよりも遥かに大きいものになると予想されます。
そのような攻撃のリスクがあるうちは**セキュリティパッチの適用は必須**と言えるのかと思います。
逆に悪意を持った人間が世の中からいなくなり、脆弱性をついた攻撃のリスクについて対処の必要がなくなればセキュリティパッチは当てる必要のないものと言えるのかもしれません。

参考：マスタリングTCP/IP入門編　第6版
https://www.ohmsha.co.jp/book/9784274224478/
【Excel】Unicodeを表示する関数

# やること
[【Excel】VBAで環境依存文字で項番を割り振る方法 #ExcelVBA - Qiita](https://qiita.com/shioume/items/805d24520b5463b85297)を見て、㊿まで表示出来なかったっけ？と思い、Unicodeを表示する関数を作成する。


# 作成した関数
```vb
Function GetUnicodeChar(Cell As Range) As String
    Dim ch As String
    Dim code As Long
    ch = Cell.Value
    If Len(ch) > 0 Then
        code = AscW(ch)
        GetUnicodeChar = "U+" & Hex(code)
    Else
        GetUnicodeChar = ""
    End If
End Function
```
![20250324 002500.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3838258/8ea6dd89-7651-4b6a-9021-51de7da0eb66.jpeg)


# 関連記事
[Unicodeの丸数字（①とか）でやられた件 #JavaScript - Qiita](https://qiita.com/taqm/items/144d707caedd69070970)
>３６にまた見えない壁があったのか...
>ここでようやくGoogle先生にご相談　
>Wikipadiaにまさに[丸数字のページ](https://ja.wikipedia.org/wiki/%E4%B8%B8%E6%95%B0%E5%AD%97)が！！！

わざわざ関数作る必要なかった:weary:
aws cdk bootstrapでEnvironment aws://xxxxxxxx/ap-northeast-1 failed bootstrapping: _AuthenticationError: Need to perform AWS calls for account xxxxxxxx, but the current credentials are for 000000000000

# AWS CDK Bootstrap で AuthenticationError が発生する場合の対処法

## **問題**

aws CLI用のIAMユーザーを作成しており、そのユーザーのアクセスキーを正しく設定したはずなのに`cdk bootstrap` を実行した際に、以下のエラーが発生することがある。

```sh
❌  Environment aws://xxxxxxxx/ap-northeast-1 failed bootstrapping: _AuthenticationError: Need to perform AWS calls for account xxxxxxxx, but the current credentials are for 000000000000
```

このエラーは、設定されている AWS 認証情報が正しいアカウントのものではない場合に発生する。

## **解決策**

### **1. AWS アクセスキーの再作成**
誤った認証情報が使用されている可能性があるため、新しいアクセスキーを作成する。

### **2. AWS CLI の認証情報を更新**
新しいアクセスキーを使用して `aws configure` を実行し、AWS CLI の認証情報を更新する。

```sh
aws configure
```

以下の情報を入力する。

```
AWS Access Key ID [None]: 新しいアクセスキーID
AWS Secret Access Key [None]: 新しいシークレットアクセスキー
Default region name [None]: ap-northeast-1
Default output format [None]: json
```

### **3. 設定の確認**
正しく認証情報が設定されているか確認するために、次のコマンドを実行する。

```sh
aws sts get-caller-identity
```

正しい `Account` ID が表示されていることを確認する。

```
{
    "UserId": "XXXXXXXXXXXXXXX",
    "Account": "xxxxxxxxxxxx",
    "Arn": "arn:aws:iam::xxxxxxxxxxxx:user/your-user"
}
```

### **4. CDK Bootstrap の再実行**
認証情報が正しく設定されたら、改めて `cdk bootstrap` を実行する。

```sh
cdk bootstrap
```

問題が解決し、正常にブートストラップが完了するはず。

## **まとめ**
1. **AWS アクセスキーを再作成**
2. **`aws configure` を使って新しい認証情報を設定**
3. **`aws sts get-caller-identity` で認証情報を確認**
4. **`cdk bootstrap` を再実行**


ローカル用に動かしていたLocalStackが原因？もしくはcdklocalが悪さをしていたかもしれない。
カメラとCMOSセンサー技術カリキュラム



### 🔹 第1章：フィルムカメラの基礎と構造

- フィルムカメラとは？デジタルカメラとの違い
- フィルムの種類と特徴  
  - カラーネガフィルム（一般用途・プリント向き）  
  - リバーサルフィルム（ポジ・スライド・発色鮮やか）  
  - モノクロフィルム（コントラスト・粒状性の味）
- ISO感度と粒状性（高感度＝粒子大／低感度＝滑らか）

---

### 🔹 第2章：フィルム撮影の操作と工程

- シャッター速度と露出制御
- 絞り（F値）と光量・被写界深度の関係
- フィルムの装填と巻き上げ・巻き戻し
- 現像とスキャンの流れ（C-41 / E-6 / 自家現像）

---

### 🔹 第3章：レンズの基礎と描写表現

- 単焦点 vs ズームレンズの違い
- 標準 / 広角 / 望遠 / マクロレンズの特徴
- 焦点距離と画角の関係（35mm換算）
- 開放F値（F1.4 / F2.8など）とボケの量
- 被写界深度とボケ味の関係
- オールドレンズの描写特性（フレア、収差、やわらかさ）

---

### 🔹 第4章：CMOSイメージセンサーの基礎

- イメージセンサーとは？カメラの「目」
- 光→電気信号への変換プロセス
- CMOSセンサーとCCDセンサーの違い  
  - CMOS：高速・低電力・広く普及  
  - CCD：高画質・読み出しが遅い（現在はレア）
- センサー構造：ピクセルアレイ・フォトダイオード
- アナログ信号処理・AD変換・ノイズ除去

---

### 🔹 第5章：センサーサイズと画質

- センサーサイズ一覧：フルサイズ、APS-C、1インチなど
- サイズが画質に与える影響（ダイナミックレンジ・ノイズ）
- 被写界深度とボケの深さとの関係性

---

### 🔹 第6章：CMOSイメージセンサーの高度技術

####  Exmorテクノロジー（SONY）

- Exmorとは？高速読み出しと低ノイズ処理の両立
- Exmor R（裏面照射型CMOS）  
  - フォトダイオードが表面に → 受光効率向上
- Exmor RS（積層型CMOS）  
  - ピクセル層と回路層を垂直統合 → 高速化・スマート処理

####  背面照射型CMOSセンサー（BSI）

- 光路のロスが少ない → 暗所性能が高い
- スマホ・高感度カメラに多数採用

####  積層型CMOSセンサーの利点

- 高速連写、4K/8K動画記録、像面位相差AFの実現
- AIチップやメモリ回路との統合も可能に

---
Conductor フリーランス稼働管理Webアプリ

# [Conductor](https://conductor-rho.vercel.app/)
フリーランスの稼働管理アプリ『Conductor』です。
フロントエンドのみ実装したプロトタイプ的なものをデプロイしています。（ログイン機能とユーザー側のホーム画面のみバックエンドの実装をしております。）
(デプロイしたものの、そこまで大したものではないですし、登録店舗数が少なくて実用性がないという状態ですが...)
こちらが[Githubリポジトリ](https://github.com/Kai-T-KiA/conductor)になります。
まだ、プロトタイプの段階ではあるのですが、客観的な意見やアドバイスが欲しいと思い、この記事で発信することにしました。（「こういう機能があったらいいな」、「このデザインはこうした方がいい」など様々な意見をお待ちしています！）

企画書的なものもあるので、後日リンク貼ります！

以降の記述はリポジトリのREADMEと同じ記載内容です。


## ロゴ
![conductor-logo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3813748/89643c6e-c899-4c8c-9d8a-c4fd5511cd6e.png)



## アプリの概要・作成背景・開発コンセプト

フリーランスの稼働状況を管理するWebアプリ。

## 使用言語・OS・フレームワーク・開発ツール・API

### フロントエンド
- Next.js 14(App router)
- TypeScript
- TailwindCSS

### バックエンド
- Ruby on Rails7（APIモードでの使用）
- Supabase
- Redis

## デプロイ環境
フロントエンドはVercel、バックエンドはRailway。

## 実装したい機能

- 稼働状況管理
- タスク管理
- 報酬管理
- パフォーマンス分析

## テストアカウント

アプリURL　[https://conductor-rho.vercel.app/]

ユーザー

メールアドレス　test@example.com

パスワード　password

管理者

メールアドレス　yamada@example.com

パスワード　password

## 動作確認上の注意

現在、デプロイしているものは、ログイン機能とユーザーのホーム画面のみバックエンドの実装をしています。

そのため、ユーザーのホーム画面以外は、表示されている数値やデータはフロントエンド側で仮置きしたデータを表示しているものになります。（ユーザーのホーム画面については、SupabaseのDBからデータを取得し表示しています。）

ユーザー側のホーム画面を除く画面、管理者の画面につきましては順次バックエンドの実装を行っていますので、「こういう感じで作ろうとしているんだな。」くらいの温度感で見ていただけるとありがたいです。

それと、動作パフォーマンスまでは手が回ってないので、ページのロードなど少し時間がかかるところがあります。
画像生成AIの仕組みとは？Stable Diffusion入門

# 画像生成AIの仕組みとは？Stable Diffusion入門

## はじめに
近年、AIによる画像生成が注目を集めています。特に「Stable Diffusion」はオープンソースでありながら高品質な画像生成ができることで、多くのクリエイターや開発者に支持されています。本記事では、Stable Diffusionの基本的な仕組みや登場の背景、どのように画像を生成しているのかを、初心者にもわかりやすく解説します。

---

## なぜ画像生成AIが注目されているのか？

画像生成AIとは、テキストや他の画像を入力として、新しい画像を自動的に生成する技術です。以下のような理由で注目されています：

- **クリエイティブ作業の効率化**：イラストやコンセプトアートの自動生成
- **個人でも使える**：Stable Diffusionなどは無料で利用可能
- **プロンプトによる制御**：テキストだけでイメージを指示できる

---

## 画像生成AIの種類と進化

画像生成AIの技術には様々なものがあります。簡単に主な流れを見てみましょう。

### GAN（敵対的生成ネットワーク）
- 2014年に登場
- ノイズからリアルな画像を生成
- 学習が不安定でコントロールが難しい

### VAE（変分オートエンコーダ）
- 潜在変数空間で滑らかな画像生成が可能
- 精度はやや劣る

### Diffusion Models（拡散モデル）※現在の主流！
- ノイズを徐々に取り除くことで高精度な画像を生成
- 安定して高解像度な出力が得られる

---

## Stable Diffusionとは？

Stable Diffusionは、Stability AIとCompVisなどの研究グループによって開発された**拡散モデル**の一種で、以下の特徴があります。

- **テキストから画像を生成できる**
- **オープンソースで誰でも使える**
- **ローカル環境で動作する（プライバシー面でも安心）**
- **学習済みモデルを活用し、すぐに高品質な画像が作れる**

---

## Stable Diffusionの仕組みをざっくり解説

Stable Diffusionでは、ノイズを加えたり除去したりする工程を繰り返しながら画像を生成していきます。以下のような流れです。

### ① 学習フェーズ（事前学習）

1. 画像とテキストのペア（例：「a cat sitting on the sofa」）を用意  
2. ノイズを加えていく（拡散過程）  
3. それを逆算するようにノイズを除去して元の画像を復元（生成過程）  

→ この学習によって、「ノイズをどう除去すれば意味ある画像になるか」を学習します。

### ② 生成フェーズ

1. 完全にノイズの画像（真っ白）からスタート  
2. テキスト（プロンプト）を条件として与える  
3. 何段階にもわけて、少しずつノイズを取り除いていく  
4. 最終的にテキストに合った画像が生成される！

この「ノイズ→意味のある画像」の変換が、Stable Diffusionの肝となる部分です。

---

## プロンプトって何？

Stable Diffusionでは「プロンプト（prompt）」と呼ばれるテキストで画像生成を指示します。

例：
- `a futuristic cityscape at night, neon lights, high resolution`
- `an oil painting of a cat wearing a spacesuit, trending on artstation`

プロンプトの工夫次第で、絵の雰囲気や細部まで調整することが可能です。

---

## 実際に使うには？

Stable Diffusionを使うにはいくつかの方法があります。

### 1. Webサービスを使う

- [Hugging Face](https://huggingface.co)
- [DreamStudio](https://dreamstudio.ai/)
- [Mage.space](https://www.mage.space/)

### 2. ローカル環境で動かす

- GitHubからモデルをダウンロード  
- PythonとCUDA対応GPUが必要  
- Web UI（AUTOMATIC1111）で操作も簡単に！

### 3. Google Colabで無料実行

- GPU環境を気軽に使える  
- 数行のコードで試せる（初心者におすすめ）

---

## 注意点と倫理的配慮

画像生成AIには便利な一方で、以下のような注意も必要です。

- **著作権問題**：学習データに著作物が含まれている場合もある  
- **フェイク画像の悪用**：偽の情報として使われるリスク  
- **差別的・不快な出力**：プロンプトに応じて好ましくない画像も生成される可能性

→ 開発者・ユーザーともにリテラシーが求められます。

---

## まとめ：Stable DiffusionでAI画像生成をもっと身近に

Stable Diffusionは、無料で高性能な画像生成ができる拡散モデルであり、今後のAIコンテンツ生成の基盤とも言える存在です。仕組みを知れば、より精密なプロンプト設計や、応用的な使い方（例：アニメーション生成、スタイル変換）にもつながります。
【初心者向け】勾配降下法とは何か？Pythonだけで徹底解析＆数学的に解説！

# 【初心者向け】勾配降下法とは何か？Pythonで徹底解析＆数学的に解説！

## ✅ 本記事の目的

この記事では、以下のことを学びます：

- 勾配降下法（Gradient Descent）の仕組みと数式の意味  
- Pythonだけで勾配降下法を実装・可視化  
- 「なぜ最適解に近づけるのか？」を数学的に理解  
- 実際の学習プロセスを数式＋コードで“腹落ち”させる  

---

## 1. 勾配降下法とは？

### ● 一言でいうと？

関数の**最小値を見つけるための反復アルゴリズム**です。  
「傾きを見て、谷の方へちょっとずつ進む」やつです。

---

## 2. 数式で理解する勾配降下法

### ● 問題設定：

関数 $f(x)$ の最小値を求めたい。  
ここでは簡単な例として：

$$
f(x) = (x - 3)^2
$$

この関数のグラフは、**$x=3$の位置に谷がある放物線**です。

---

### ● 更新式（基本形）：

$$
x_{t+1} = x_t - \eta \cdot f'(x_t)
$$

- $x_t$：現在の位置  
- $\eta$：学習率（Learning rate）  
- $f'(x_t)$：接線の傾き（導関数）  

---

## 3. Pythonで勾配降下法を実装しよう！

### ステップ①：目的関数とその導関数の定義

```python
def f(x):
    return (x - 3)**2

def df(x):
    return 2 * (x - 3)
```

### ステップ②：アルゴリズムの実装
```python
def gradient_descent(start_x, learning_rate, steps):
    x = start_x
    history = [x]
    for _ in range(steps):
        grad = df(x)
        x = x - learning_rate * grad
        history.append(x)
    return history
```

### ステップ③：試してみる
```python
history = gradient_descent(start_x=0.0, learning_rate=0.1, steps=25)
for i, x in enumerate(history):
    print(f"Step {i:02d}: x = {x:.6f}, f(x) = {f(x):.6f}")
```

## 4. 数学的に見てみよう（Taylor展開の視点）

勾配降下法の本質は「関数を局所的に直線で近似する」ことにあります。

1変数関数 $f(x)$ を1次のTaylor展開で近似すると：

$$
f(x + \Delta x) \approx f(x) + f'(x)\Delta x
$$

ここで、関数を小さくするには $\Delta x$ を**負の傾き方向**に取りたい：

$$
\Delta x = -\eta f'(x)
$$

→ これが勾配降下法の更新式の由来です。

---

## 5. 学習率（η）の影響をPythonで比較

```python
import numpy as np
import matplotlib.pyplot as plt

def run_and_plot(lr_list, steps=20):
    x_vals = np.linspace(-1, 7, 100)
    y_vals = f(x_vals)

    plt.figure(figsize=(12, 3))
    for i, lr in enumerate(lr_list):
        hist = gradient_descent(0.0, lr, steps)
        fx_hist = [f(x) for x in hist]
        plt.subplot(1, len(lr_list), i+1)
        plt.plot(x_vals, y_vals, label="f(x)")
        plt.scatter(hist, fx_hist, c='red')
        plt.title(f"Learning rate = {lr}")
        plt.xlabel("x")
        plt.ylabel("f(x)")
        plt.grid(True)
    plt.tight_layout()
    plt.show()

run_and_plot([0.01, 0.1, 0.5])
```

### 結果から分かること：

- **小さい学習率** → 安定するが、収束が遅い  
- **大きい学習率** → 飛び跳ねたり、収束しなかったりする  

---

## 6. 収束の数式的条件とは？

勾配降下法が収束するには、学習率 $\eta$ が適切な範囲にある必要があります。

例：1次関数 $f(x) = ax^2$ の場合、理論的には：

$$
0 < \eta < \frac{1}{L}
$$

ここで $L$ は関数の2階微分（曲率）＝Lipschitz定数。

---

## 7. おわりに：勾配降下法まとめ

| 項目             | 解説 |
|------------------|------|
| 何に使う？         | 損失関数の最小化（機械学習モデルの学習） |
| 基本原理         | 微分（傾き）を見て、下り坂方向に更新 |
| 数式             | $x_{t+1} = x_t - \eta f'(x_t)$ |
| 重要パラメータ     | 学習率（大きすぎると発散、小さすぎると遅い） |
Databricks GenieとClaude を組み合わせたAgentシステムの構築


## 概要

DatabricksがAnthoropicとパートナーシップを結びClaudeをDatabricks内から利用できるようになりました。

https://www.databricks.com/jp/blog/anthropic-claude-37-sonnet-now-natively-available-databricks

そしてGenie APIがリリースされたことにより、Agentの一つとして利用できるようになりました。DatabricksではAgent Frameworkというのが用意されており、Databricks上のサービスを簡単に組み合わせて利用できるサービスがあります。これらを組み合わせることで、シンプルかつパワフルなAgentシステムが簡単に構築できるようになります。

ユーザーが利用するインターフェースには、Lakehouse Appを使って作成することも可能ですが、一番シンプルなのはPlaygroundを利用することです。Databricks上のPlayground上でAgentモデルを切り替えることで様々なAgentシステムをすぐに利用可能になります。

## システム利用イメージ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2206424/552c8777-471f-419b-8016-e62820dbfe9f.png)


[こちらで動画をご覧ください](https://github.com/maroon-spec/Multiagent_Genie_Demo/blob/main/multiagent-genie-demo.gif)

## システム概要

Mosaic AI Agent Framework と LangGraph を使用してマルチエージェントシステムを構築しております。ここで、Genie はエージェントの 1 つとなります。またSupervisortとしてDatabricks内で利用可能なAnthropicのClaudeを採用しております。 

その他にも、ユーザーインターフェースとしてPlaygroundを利用したり、Agentモデルを管理するためのUnity Catalog, 動作するためのModel Servingなど様々な機能を利用しております。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2206424/65778687-a5e7-48cd-b66d-a3ac93c7244d.png)

#### 利用しているるDatabricks機能
- **Genie** : 自然言語でインタラクティブにデータへ問い合わせができるサービス。ただしクエリー結果を返すまでにとどまります。
- **Claude 3.7** : Databricks内でCluade Modelを利用出来ます。当初はPay-per-tokenベースの利用となります。
- **Model Serving**: 今回のAgent Modelを動かすクラスターになります。Scale-to-zero設定により、利用しない際はDownさせておくことが可能です。
- **Unity Catalog**: モデルを管理しておくリポジトリー機能を提供します。ACL設定により安全にユーザーに解放できます。
- **MLflow Tracing**: Agent Systemの中身をトレースしてくれます。デバックや開発時に重宝します。
- **Mosiac Agent Framework**: Databricks内の様々なサービスを組み合わせて管理してくれます。
- **AI Gateway**: Agentとやりとりした履歴を記録する推論テーブルを提供します。
- **Playground**: 今回はユーザーインターフェースとして利用します。

## 構築・利用方法

もっと詳しく知りたい方、もしくは同じような環境を構築したい方はこちらをご覧ください。サンプルノートブックを提供しており簡単に構築が可能です。
まずは以下のReadmeをご覧頂き、前提条件やTODO設定をご確認ください。

https://github.com/maroon-spec/Multiagent_Genie_Demo/tree/main



## 参考

https://docs.databricks.com/aws/ja/generative-ai/agent-framework/multi-agent-genie
小規模アプリでAtomic Designを採用したら管理が大変すぎてやめた話

こんばんは、KoenigWolfです。  
今回は **「Atomic Designって理論は素晴らしいけど、小規模アプリには向かないかも…？」** という話を、shadcn/uiを導入していた自分の実体験を交えてゆるっと共有したいと思います。

---

## 🎨 「とりあえずAtomic Designで」から始まった

小さな個人開発プロジェクトを始めたとき、コンポーネント設計のベストプラクティスを調べると、必ず出てくるのが**Atomic Design**。

> 原子(Atom)、分子(Molecule)、有機体(Organism)、テンプレート(Template)、ページ(Page)に分けて整理する、あれです。

「なるほど、理にかなってるし、整理もされてて良さそう。  
今後の拡張も考えて、最初からしっかり設計しておこう！」

そう思ったのが、すべての始まりでした。

---

## 🧱 Atomが増える。どこまでがAtom？

最初は楽しかったんです。  
`Button` を `atoms` に入れて、`Input` も `atoms` に入れて、ちょっと複雑になってきた `FormField` は `molecules` にして…。

でも、数日経つとある疑問が頭をもたげます。

> このコンポーネント、Atom？Molecule？  
> `CardHeader`って`Organism`？それとも`Molecule`？

粒度の定義が曖昧になってくるんです。  
チーム開発ならガイドラインを定めればいいかもしれませんが、これは**小規模アプリ**。**開発者は自分ひとり**。

それでも毎回「これはAtomか？Moleculeか？」と悩みながらディレクトリを分けていく。  
気づけば、**ディレクトリ構造のために思考コストを割いている自分**がいました。

---

## 😵‍💫 shadcn/ui導入でディレクトリ迷子が加速

そんな中、**shadcn/ui**を導入しました。  
理由はシンプルで「見た目が綺麗で、カスタマイズもしやすいし、手間が省けるから」。

ただここで新たな混乱が生まれます。

> shadcn/uiのコンポーネント、どこに置く？  
> `Button.tsx`はshadcn由来なのか自作なのか？  
> atomsに置くのか？それとも別フォルダにする？

### 結果、こんな地獄に

```plaintext
src/
├── components/
│   ├── atoms/
│   │   └── Button.tsx ← shadcn？
│   ├── ui/
│   │   └── button.tsx ← これshadcn/uiの元ファイル
│   └── molecules/
│       └── CustomForm.tsx
```

もう、**何が何やら**。

「同じ名前のButtonが複数ある」  
「shadcn/uiの原型はuiにあるけど、ラップしたものはatoms？」  
「でもそのatoms/Buttonも他からimportされてて、変更できない…」  

完全に**コンポーネント迷子**になってしまいました。

---

## 📦 機能単位＋shadcn/uiでシンプルに割り切るようになった

悩みに悩んだ末、Atomic Designはやめて、 **機能ベース（Contextual/Feature-Based）** に整理しました。
shadcn/ui のコンポーネントは`components/ui/`に隔離して、shadcn依存であることが明確になるように統一。

```plaintext
src/
├── components/
│   └── ui/           ← shadcn/ui由来のコンポーネントはここに集約
│       ├── button.tsx
│       └── input.tsx
├── features/
│   └── user/
│       ├── components/
│       │   └── UserCard.tsx
│       ├── hooks/
│       └── utils/
```

### この構成の良かった点
- shadcn/uiの改修やアップデート管理が楽になった
- 「どの機能の何に関係するか」が一目でわかる
- 粒度で悩まない。悩みは「どこに置くか」だけ
- **開発に集中できるようになった**

---

## Atomic Designは道具であって、目的じゃない

Atomic Designが悪いわけではありません。  
むしろ、大規模なデザインシステムには非常に有効だと思います。

ただし、 **小規模アプリでの導入には注意が必要** です。

- 一人開発だと設計に悩む時間が増える  
- shadcn/uiのようなUIライブラリとの相性が悪い  
- 保守よりも分類にエネルギーを割いてしまう  

特に個人開発においては、 **「ルールを守るために疲弊する構成」より、「開発が楽しくなる構成」** の方が、よっぽど価値があると痛感しました。

---

## ✍️ 最後に

この記事が、
- 「Atomic Design、使ってみたいけど実際どうなんだろう？」
- 「shadcn/uiってどこに置けばいいか迷う…」
- 「結局、何が正解なんだ？」

と悩んでいる方の参考になれば嬉しいです。

何度でも言いますが、**設計はプロダクトの性質と開発者の性格によって最適解が変わる**。  
だから、「自分にとっての最適解を探る過程」こそが大事なんだと思います。

---  

🧵 ご意見や体験談があれば、ぜひコメントで教えてください！  
この記事が役に立ったら、いいね・ストックもらえると励みになります 🙌
【Let's Encrypt】SSL証明書を自動更新する

**この記事は以下のような方を対象としています。**
・CronやCrontabが何たるかについて知らない人
・Let's Encryptを用いて初めてSSL証明書を取得しwebサイトを公開したが、有効期限が切れてしまい途方に暮れている人

## はじめに
普段私の運営するとあるサイトのSSL証明書をLet's Encryptで取得しているのですが、**更新があまりにも面倒くさい！！**
今回はLinux標準搭載のCronを用いて更新の自動化を行うことを考えます。

## 設定
まずは現在の証明書の状態を確認しましょう。
ブラウザで確認することもできますが、今回はサーバー上で確認します。
以下、**コマンドの実行には管理者権限が必要です**。
```:入力
certbot certificates    
```
```:出力
$ sudo certbot certificates
Saving debug log to /var/log/letsencrypt/letsencrypt.log

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Found the following certs:
  Certificate Name: example.net
    Serial Number: XXXXXXXX
    Key Type: ...
    Domains: example.net
    Expiry Date: 2025-01-01 00:00:00+00:00 (INVALID: EXPIRED)
    Certificate Path: ...
    Private Key Path: ...
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
```
どうやら2025年1月1日で期限切れになっているようです。
手動で更新するには、同じくターミナル上で
```:入力
certbot renew 
```
```:出力
$ sudo certbot renew
Saving debug log to /var/log/letsencrypt/letsencrypt.log

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Processing /etc/letsencrypt/renewal/example.net.conf
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Renewing an existing certificate for example.net

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Congratulations, all renewals succeeded: 
  /etc/letsencrypt/live/example.net/fullchain.pem (success)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
```
これでcertbotを用いてSSL証明書を更新することができました。
ただ有効期限の3か月が近づくたびにこれを手動で行うのはとても面倒ですよね。
万が一更新を忘れて期限切れのままになってしまったら、ユーザーは二度と戻ってこないかもしれません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4033443/a77e18f3-b6e5-436f-862c-dd9b7631b8da.png)
↑トラウマ。
そこでUNIX標準のCronを用いてこの作業を自動化することを考えます。


## Cron
Cronは、多くのUNIX環境で標準搭載されているタスクスケジューラです。
分単位で指定した動作を常駐的に行わせることができるので、今回の証明書更新のように定期的に単純な処理を行わせるのに適しています。
設定ファイルを開くには、以下のコマンドを使用します。
```
crontab -e    
```
cronの設定ファイルはユーザー毎なので、管理者権限のあるユーザーで設定を行ってください。(※証明書の更新に管理者権限が必要なため)
一般ユーザーでsudo権限を用いて行っても良いですが、その場合はvisudoでrequire ttyが設定されていないことを確認してください。(対話モードを必要にしているとスクリプト上でsudoコマンドが使えません)

開いた画面で、以下のように記述します。
```
0 4 1 * * certbot renew
```
記法についてですが、
[分] [時] [日] [月] [曜日] [コマンド]
のように記述します。*は任意値を表します。
よって先ほどのコマンドは、
「**毎月1日4時0分にcertbot renewを実行**」ということになります。
適宜時間の部分はトラフィックの少ない時間帯に変えていただいて大丈夫ですが、Let'sEncryptの仕様上
・期限が30日以上残っている状態で更新できない
・更新にレート制限がある
等の問題から毎月更新くらいのペースが最適かと思います。

最後に、
```
systemctl start cron
systemctl enable cron    #常駐化
```
で設定完了です！最初の1回だけ正常に更新できているか確認することをお勧めします。
【Fish】viキーバインディングを使用する方法

## viキーバインディングの有効化

Fishでviキーバインディンを使用可能にするには、`~/.config/fish/config.fish`に以下の記述を追記します。

```shell:~/.config/fish/config.fish 
set -g fish_key_bindings fish_vi_key_bindings
```

https://fishshell.com/docs/current/cmds/fish_vi_key_bindings.html

## 入力モードによってカーソルを変更する

`~/.config/fish/config.fish`に以下を追記することで入力モードによってカーソルが変更されるようになります。

```config.fish
set -g fish_cursor_default block

set -g fish_cursor_insert line

set -g fish_cursor_replace_one underscore
set -g fish_cursor_replace underscore

set -g fish_cursor_external line

set -g fish_cursor_visual block

set -g fish_vi_force_cursor true

```

![画面収録 2025-01-07 23.59.03.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/422d54c6-7114-352e-9cec-268f7ace607f.gif)

https://fishshell.com/docs/current/interactive.html#autosuggestions

## ヤンクしたテキストをクリップボードに保存する

`~/.config/fish/config.fish`に以下のように記述するとviモードでヤンクしたテキストがクリップボードに保存されるようになります。

```shell:config.fish
bind yy fish_clipboard_copy
bind Y fish_clipboard_copy
bind p fish_clipboard_paste
```

https://github.com/fish-shell/fish-shell/issues/4028#issuecomment-1791599167

https://fishshell.com/docs/current/cmds/fish_clipboard_copy.html
VirtualBoxの仮想メディアマネージャーでディスクサイズ拡張

# デバイスに空き領域がありません
ある事情でUbuntu24.04上でbuildrootを使ってLinuxカーネルをビルド中のところ、以下のようなエラーが出てビルドがエラー停止した。
![no_space.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4036950/80f6d4bc-da20-424b-b2c5-3bc016130ab6.png)
しまった。ディスクの空き容量を意識していなかった（仮想マシンインストール時にも）。で、仮想メディアマネージャーでサイズを拡張できるという情報を仕入れた。一旦、仮想マシンを電源オフ。メディアマネージャーでサイズを確認すると、25GBしか確保されていなかった。よって、以下の画面で100GBへ拡張する。
![after_expand.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4036950/20f38286-35cc-4d44-9564-a811a575ab9c.png)
と、仮想マシンを起動するとUbuntuデスクトップのログイン画面が出る前にフリーズ。再び、電源オフして、再起動するとgdm.serviceが起動できないとのエラー。
![gdm_fail.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4036950/625020fa-fe94-4779-9eb5-3ae1205ca15a.png)
このエラーについてもググると、ディスクの空き容量不足が原因だった、という記事を見かけた。その方は、不要なファイルを消しまくって容量を確保したら、解決できた、とのこと。確かに、自分もビルド中に生成された大量のオブジェクトにより空き容量が不足していた。それがUbuntu（GNOME）の起動にも影響したらしい。
従って、UbuntuのGUI起動は無理なので、CUIモードで起動できるという情報を知る。Ubuntu「起動」の開始直後に「Ctrl + Alt + F2」キーを押下。
![ubuntu_cui.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4036950/f036df0a-dd41-4df2-a02c-e6884bf63504.png)
GNOMEでログインしていたときと同じようにログイン。「df -h」コマンドでディスク容量を確認。確かに使用率100％だ。
![df_h.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4036950/e4fdc4f2-99a4-4edb-aaa0-a89284a28326.png)
メディアマネージャーでサイズを100GBに変更したが、まだUbuntuには認識されていないようだ。とりあえず不要なファイルを消しまくって、数％の空き容量確保してUbuntuをリブート。すると以下の表示でフリーズ。
![freeze.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4036950/8762cbd6-b5b9-400c-9f34-40b140fd9627.png)
これまたググると、GNOMEが表示できないならgdm3（Gnome Display Manager）をインストールするといいと言う情報を見つける。
```
$ sudo apt-get install gdm2
$ sudo systemctl reboot
```
何とかGUIでログインし、デスクトップが表示できるようになった。

# Ubuntu Desktopでディスク容量を拡張
GUIでログインすると早速、ディスク使用量アナライザーが「空き容量が少なくなりました」と表示してくれる。lsblkコマンドで容量を確認すると、sdaは100GBを表示しているではないか。が、sda2は23.9GBなので残りが未割当領域になっているということ。
![lsblk_before_expnad.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4036950/4776ff22-7582-4e94-b9cc-c47f8d9632bc.png)
fdiskコマンドでsda2領域を拡張する。一旦、"d"コマンドでsda2を削除（ちょっと不安）。

![del_part.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4036950/6abf3c8d-05b5-44fa-b517-eb258bce331d.png)
"n"コマンドでsda2へパーティションを作成。
![expand_part.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4036950/e0adc8e9-2641-4f90-8c65-1dd992b9dffc.png)
"w"コマンドで変更内容を書き込む。
![write_setting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4036950/09ddf832-cef6-4e18-939f-7bf1f76baeda.png)
最後は、resize2fsでsda2のファイルシステムサイズを変更する。「df -h」の表示でsda2のサイズが98GBになったことが分かる。
![df_h_after_expand.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4036950/2e21620a-253a-4ba4-afa2-39329521fe9e.png)

# これでビルドが継続できる状態に復旧
以上、仮想マシンのディスク容量を増やす手順の備忘録でした。
例外はキャッチするな

オフショアに出した成果物を確認していたら例外の間違った使い方をしていたため大きく修正したことがあります。
PHP + laravel ですが、他の言語/フレームワークでも原則は同じです。

# 間違った例外の使い方の例
こんなコードでした。

## 例1
例外をキャッチし、ログに出力し、処理結果をboolで返しています。
```php
try {
    何か例外が発生するかもしれない処理();
    return true;
    
} catch (\Exception $e) {
    Log::error($e->getMessage());
    return false;
}
```

エラーメッセージはログに出力されます。
しかしスタックトレースが出力されません。
メッセージによりエラーが発生していることは分かりますが、発生したファイルや行番号が分からず原因を特定するのに時間がかかります。


## 例2
コントローラーのコード例です。
```php
try {
    何か例外が発生するかもしれない処理();
    
} catch (\Exception $e) {
    return response($e->getMessage(), 500);
}
```

laravel を含む大抵のフレームワークでは、キャッチされなかった例外はフレームワークの例外処理機構がキャッチし、ログ出力、適したコードでレスポンスを返す、等をよろしくやってくれます。自力でやる必要はありません。


# そもそも原則として例外はキャッチしない

例1のように例外に含まれる情報を握りつぶしたり、例2のようにフレームワークが提供している機能と重複してしまったり矛盾した処理を行ってしまいます。
原則として**例外はキャッチしてはいけません**。

# 例外をキャッチするべき場合

原則として例外はキャッチしてはいけません。
ただし以下のような場合は別です。目的がある時のみキャッチしましょう。

## 後処理が必要な場合
例えばトランザクションロールバックなど、例外発生時に後処理が必要な場合。
こういった場合は例外をキャッチするのが有効です。ただしキャッチした例外は再スローしましょう。

```php
DB::beginTransaction();

try {
    何か例外が発生するかもしれない処理();
    DB::commit();
    
} catch (\Throwable $e) {
    DB::rollback();  // 必要な後処理
    throw $e;    // 再スローしましょう
}
```
## エラーが発生しても処理を続けたい場合
例えば独立した処理対象が複数あり、どれか一つが失敗した時でも後続の処理は続行させたい場合。
ただし続行させるとしても何らかのメッセージはログに出力しましょう。

```php
foreach ($items as $item) {
    try {
        何か例外が発生するかもしれない処理();
        
    } catch (\Throwable $e) {
        Log::warn("エラーが発生しました。処理は続行します。");
    }
}
```

## エラーの関連情報を付与したい場合
例えば処理中の要素のIDをエラーメッセージに含めたい、などエラー情報に何らかを付与したい場合。
付与したい情報を含め再スローしましょう。

```php
try {
    何か例外が発生するかもしれない処理();
    
} catch (\Throwable $e);
    throw new \Exception("エラーが発生しました。処理id:{$execution_id}", 0, $e);
}
```
学生ロボコンで使う基板を発注しました [JLCPCB]

こんにちは。NHK学生ロボコンまで残り2か月ちょっとになりましたね。
自分は東京農工大学ロボット研究会R.U.Rの回路屋として活動しております。

今回は基板製作会社であるJLCPCB様にご支援をいただき基板を作成したのでその紹介をしていけたらなと思います。

東京農工大学ロボット研究会R.U.RではJLCPCB様に基板製作費用の一部をご支援頂いております。
この場を借りてお礼申し上げます。

## JLCPCBの紹介

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3061626/ad2a98d1-b3a8-4a46-8b25-217e99b9b319.png)

https://jlcpcb.com/jp/

JLCPCBは中国に本社を置く企業で、世界中で180以上もの国や地域との取引実績を持っており、年間のPCB製造数は600万枚を超える企業です。個人で基板発注を行うことができる数少ない会社の一つであり、WEBで見積もりが完結することや、国内の企業に比べて非常に安価な価格で基板を作ることができる点が特徴です。

いつもお世話になっております。ありがとうございます。

## 作った基板
(写真見づらくてごめんなさい...)
![IMG_20250322_205808.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3061626/72379e3a-1e46-4c98-a7c8-0b791d85b693.jpeg)

実装した基板
![IMG_20250322_210516.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3061626/fad5daec-ebbd-457d-96d8-1dca222ab811.jpeg)

表面のほとんどのチップ部品を実装してもらいましたが、かなり綺麗に仕上がっていると思います。
今まで何回かPCBAで基板を発注していますが、実装不良などは一度も起こっていないです。

## 今年のR.U.Rの基板
せっかくなので今年のR.U.Rの回路を少しだけ紹介してみます。

今までのR.U.Rの基板は100mm × 100mmサイズの大きい基板が多く、実際にロボットに組み付ける際の負担となっていました。
去年の東海地区交流ロボコンでは、100mm × 100mmサイズの基板を10枚近く乗せる羽目になってしまい、かなり大変でした...
![IMG_20240822_035641 (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3061626/2b742156-264c-4a5d-a69b-a6ec7a2d038f.jpeg)
(とうろぼ機体。電装スペースがかなり狭い。)

そこで今年は、今までの基板をなるべく小さく、電装しやすくすることを目標に基板開発を行いました。
今年あたらしく作った基板を並べてみるとこんな感じです。
![IMG_20250323_180218.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3061626/c9a562ad-9ea9-46b5-a640-56f9e7176887.jpeg)

このように基板の小型化および基板サイズを統一することで電装しやすくなりました。
(機械屋さんにも基板乗せるスペースをつくってもらいやすくなりました。)

また、東工大さんの[分解できる基板タワースペーサ](https://maquinista.rogiken.org/2022/02/25/%E5%88%86%E8%A7%A3%E3%81%A7%E3%81%8D%E3%82%8B%E5%9F%BA%E6%9D%BF%E3%82%BF%E3%83%AF%E3%83%BC%E7%94%A8%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B5%E3%81%AE%E9%96%8B%E7%99%BA/)を真似して作ってみました。

![IMG_20250323_231132.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3061626/00f75d9f-caee-4d04-a367-3313bc45decd.jpeg)


全ての基板のサイズを統一し、このスペーサを取り付けた状態で管理することで、ロボットの基板トラブルがあった際の交換が容易になりました。

## さいごに
今年の回路屋は自分含めて5人もいるので、かなりの枚数の基板を新規開発することができました。素晴らしいね。

改めてになりますが、今回の基板はJLCPCB様に発注させていただきました。いつもありがとうございます。

学生ロボコン優勝したいなー
[Git] subtreeを用いて履歴付きで外部リポジトリを取り込む


## In a nutshell
Git の `subtree` を用いる事で，外部リポジトリを**履歴ごと**指定ディレクトリに取り込むことができ，モノレポ化に適している．
しかも `submodule` より扱いやすく，取り込み後に外部リポジトリを削除しても問題ない


## はじめに
今まで，個人で使用しているリポジトリは，プロジェクトと1対1で対応させていた．しかし，リモートリポジトリが多くなった為，一元管理したいと考えて，モノレポ化する事とした．各プロジェクトでのコミットメッセージや履歴を適切に，新規リポジトリに引き継ぐ為に調べた事の1つが `subtree` である．これについて，学びの記録として以下に纏めた．


## 予想される読み手
 - Git について初学者であり，学びたい
 - 今後も Git を利用していく予定がある
 - 今後，モノレポとポリレポを使い分けるかもしれない


## 事前知識

### リポジトリとは
Git における「リポジトリ（repository）」とは，ソースコードやそれに関連するファイルの履歴を保存・管理する場所．開発の進捗（コミット履歴）を記録し，変更の追跡や過去の状態への復元を可能とする．ローカルに作成できるものと，GitHub などのサービス上にあるリモートリポジトリがある．


### モノレポとポリレポについて
 - モノレポ（monorepo）：複数のプロジェクトやパッケージを，1つのリポジトリで一元管理する方式．
管理が一貫しやすく，変更の追跡や依存関係の確認がしやすいメリットがある．

 - ポリレポ（polyrepo）：各プロジェクトを個別のリポジトリで管理する方式．
分離性が高く，それぞれのプロジェクトが独立しているため，チームや責務ごとに管理しやすい特徴がある．




## 目的
- 外部リポジトリの **履歴も含めて** 取り込む（履歴の保持が重要）
- 自分のリポジトリ（メイン）に取り込んで **モノレポ化** したい
- 取り込んだ後は，外部リポジトリは **不要になる（削除OK）**
- 外部リポジトリの内容は，サブディレクトリとして取り込みたい（例：`external_repo/`）


##  最適な方法：`git subtree` 
`git subtree` は，外部リポジトリの履歴を保持したまま，自分のプロジェクトの一部として統合できる Git のコマンド．したがって，外部リポジトリを指定したサブディレクトリに取り込み，履歴も保持できる．しかも `submodule` と違い，独立して管理でき，**取り込んだ後は削除してOK**．


### なぜ `git subtree` なのか
外部リポジトリの履歴（コミットログなど）を保持できる．
コミットログは `.git`フォルダに保存されており，リポジトリと1対1で対応している．よって，単にデータをコピーしても，履歴は引き継げない．


## 手順（例：`external_repo` という名前のサブディレクトリに取り込む）

```bash
# 1. 自分のモノレポのリポジトリに移動
cd your-main-repo

# 2. 外部リポジトリをリモートとして追加（名前は何でもよい）
git remote add external_repo https://github.com/ユーザー名/外部リポジトリ.git
# ※リモート名は一意である必要がある為，external_repo，を複数作成しないように


# 3. 外部リポジトリのデータを取得（fetch）
git fetch external_repo

# 4. 外部リポジトリの履歴を指定ディレクトリに subtree としてマージ
git subtree add --prefix=external_repo external_repo/main --squash
# ↑ブランチ名が main でない場合は変更する

# --squash を外せば履歴を詳細に残す（全履歴保持）
# --squash を使えば1つのコミットとしてまとめる（軽量化）
# -> 外部履歴が煩雑な場合や，最初だけ取り込みたい場合に有効

```


## 取り込み後にやること（外部リポジトリ削除）

```bash
# もう外部リポジトリはいらない場合
git remote remove external_repo
```


## 補足

### `subtree` のメリット

- `submodule` と違い，clone したときに追加設定が不要
- 履歴が保持される（--squash を使わなければフルログ）
- 将来，`subtree pull` や `push` で同期も可能（今回は削除予定なので不要）


必要なら，`git subtree split` により，モノレポの一部を新たなリポジトリとして切り出すことができる．例えば，再びポリレポに戻したい場合などに活用できる．


### 他の方法について : `subtree pull`, `pull`
将来的に外部リポジトリと連携を続けたい場合は，`git subtree pull` や `push` を使って同期を行うこともできる．


## Summary
- モノレポ化のために `git subtree` を使うと，履歴を保持したまま外部リポジトリを統合できる．
- `--prefix` でサブディレクトリを指定し，外部の内容を整理して取り込める．
- `--squash` オプションで履歴を1つのコミットにまとめることも可能．
- 取り込み後は外部リポジトリの削除や管理の簡略化が可能．
- 将来的に分離したければ `subtree split` により再分離も可能．



## References

- [Git公式ドキュメント  7.11 Git Tools - Submodules](https://git-scm.com/book/en/v2/Git-Tools-Submodules#_subtree_merge)

- [Atlassian Git Tutorials - Git subtree: the alternative to Git submodule](https://www.atlassian.com/git/tutorials/git-subtree)
Z-shellのAUTO_RESUME機能をfish-shellで実現する

# TL;DR

Z-shellのAUTO_RESUME機能をfish-shellで実現するプラグインを作ったので、その宣伝記事です。

# Z-shellのAUTO_RESUME機能について

私は以前Z-shellとNeovimを使って開発をしていました。

Neovimをターミナル上で起動して、コマンドを実行したいときはCtrl-Zを押してコマンドプロンプトに戻って、またNeovimに戻ってコーディングするみたいなことをやっていましたが、その際にZ-shellのAUTO_RESUME機能というのが便利です。

AUTO_RESUME機能というのはZ-shellのドキュメントに以下のように書かれていますが、簡単に言うと、コマンドを入力した際にすでに同じジョブが存在している場合、新しく実行する代わりに既存のジョブを再開する、というものです（Z-shellの設定ファイルに`setopt auto_resume`と書くことによって有効化できます）。

https://zsh.sourceforge.io/Doc/Release/Options.html#index-AUTORESUME
> Treat single word simple commands without redirection as candidates for resumption of an existing job.

このAUTO_RESUME機能がない場合、Ctrl-ZでNeovimをバックグラウンドジョブにしたあと、`fg`コマンドで再開することになりますが、新規実行するか再開するかなんて一々意識していないので、間違えて`fg`コマンドを打ってしまったりNeovimのジョブを2つ起動してしまったりすることがあって不便です。

そのようなことを意識せずに、同じコマンドで既存のジョブを使い回すことができるようになるのがAUTO_RESUME機能です。これが結構便利なので、自分はNeovimのターミナルやTmuxでの複数ペインなどをあまり使わなくなりました。

# fish-shellでAUTO_RESUME機能を実現する

ある時fish-shellに興味が湧いて移行してみることにして、概ね機能としては満足したのですが、このAUTO_RESUME機能だけ代替となるようなものが見つからなかったので、自分で作ることにしました。

https://github.com/iwataka/autoresume.fish

インストールする以外ユーザが意識することは一切ないので、もし興味がある方は試してみていただけると幸いです。

# NeovimのターミナルやTmux等との違いについて

NeovimのターミナルやTmux等を使えばこんなことをしなくても良いと思う方も結構いるんじゃないかと思います。
ただ、個人的にはNeovimのターミナルはコマンドの実行速度が遅い時があったり、Neovimを閉じたらプロセスが消えてしまうなどの制約もあってちょっと使いづらいイメージを持っています。また、両方とも若干タイピング数が多くなるので、今はCtrl-Z + AUTO_RESUME機能をよく使っています。
AWS Certified Cloud Practitioner(CLF)を2週間で取得しました。勉強法とか

# Certified Cloud Practitioner を取得しました！

資格勉強を始めて 2 週間と少しで AWS Certified Cloud Practitioner（CLF）を取得しました。この記事では、その勉強方法についてまとめます。

## 自己紹介

- **職業**：メーカー 1 年目（4 月から 2 年目）
- **仕事**：空調の海外向けクラウドシステム開発
- **クラウド経験**：関係会社が作成した Lambda の test ボタンを数回押した程度
- **勉強前のレベル**：ほぼ素人。一応、以下の本は読みました

📖 **参考書籍**

[AWSの基本・仕組み・重要用語が全部わかる教科書 (見るだけ図解)](https://amzn.asia/d/5k3V5mV)

---

## 合格通知

![合格通知](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4004637/b2145ea1-7e3f-4838-a258-b90060b64e21.png)

スコアは **731 / 1000** で合格しました。（~~かなりギリギリでしたが、合格は合格ということで…~~）

原因は、「請求・料金・サポート」分野の勉強をあまりしていなかったため、
そこで点数が伸ばせなかった事だと感じています。

---

## 勉強方法

ネットの情報を調べると「数週間の勉強で合格できる」という意見が多かったため、まず試験を申し込みました。

> 目標に期限を設定しないと、失敗したことに気づけない。

という考えを聞いたことがあるので、先に「逃げ道を塞ぐ」形で受験日を決めました。

### 使用した教材

🎥 **YouTube**

[AWS認定クラウドプラクティショナー（CLF-C01）対策トレーニング Cloud Practitioner](https://youtu.be/ELVAXUVFZaM?si=7En2GhHy3wXSWAjq)

📚 **Udemy**

[【世界で 2 万人が受講】演習テスト: AWS 認定 クラウドプラクティショナー](https://www.udemy.com/share/104BQU3@OBwVoAOorqJhdOIeSXGfM8uaUwA6dfl7rgg4E4KzSg2IjNwYuARnEFkSex2Gi_JzRQ==/)

 **ただし、これらの教材が最適というわけではありません。**

- YouTube の動画は CLF-C01（投稿日時点では CLF-C03 まで更新）と古め。
- Udemy は、たまたまセール中だったので購入。

とはいえ、**アウトプットのための教材にはお金をかけた方が良い** と実感しました。
YouTube はあくまでインプット、Udemy はアウトプットをしながら解説を読むことで、効率よく学習できました。

---

## 学習スケジュール

- **平日**：仕事後に 3 時間程度
- **休日**：6 時間程度

### 1日目～2日目：YouTube 動画視聴

以下の 2 点を意識して学習しました。

- わからない単語が出たら動画を止めて調べる
- ノートをとる（汚くても OK）

動画は 3 時間程度でしたが、実際には **7.5 時間** ほどかかりました。

### 3日目～6日目：Udemy 練習問題 1 周目

- わからない単語は **問題を解いた後** に調べる
- 間違えた問題、少しでも怪しい問題は **解説を読む**
- 知らないサービス概念が出てきたら **解説を読む**

📊 **正答率：約 30%**

![1周目のスコア](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4004637/f630a6d0-2bf8-4adc-a17a-ff0b78014b40.png)

### 7日目～11日目：Udemy 練習問題 2 周目

1 周目と同じ方法で進めました。

📊 **正答率：約 50%**

![2周目のスコア](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4004637/b13dea12-1e9b-4b62-8b6a-b5906e5b0026.png)

### 12日目～16日目：Udemy 練習問題 3 周目

この頃になると、未学習のサービスがほぼなくなり、学習時間も短縮。

📊 **正答率：約 60～70%**

---

## 試験当日

正直なところ、Udemy の練習問題で 7 割に届いていない ので、本来なら試験日を延期するべきでした。

しかし、翌週に社内のAIコンテストにて全社向けのピッチプレゼン を控えており、
自己紹介スライドに 資格の合格証を載せたかったため、強行突破。

また、Udemy の口コミでも「難しすぎる」という意見が見られたので、
本番試験はこれより簡単だろうと考え、受験を決意しました。

---

## 受験を終えて

試験終了後、すぐに合否がわかります。

無事に合格したので、その日のうちに
AWS Certified Solutions Architect - Associate（SAA)を1 か月後に申し込みました。
CLF の点数がギリギリなので、今後は SAA に向けて必死に勉強します！
GPT4.5に色々な猫のイラストを描いてもらった

今回はChatGPTで、プロンプトを変えつつ色々な猫のイラストを描いて遊んでみました。
シンプルなプロンプトから初めて、少しずつプロンプトを詳細化していきます。

## シンプルに
```
猫のイラストを描いてください
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479797/dee4df29-02f7-4c77-bf8a-9a3c44b5dcd7.png)
ここから少しずつプロンプトを詳細化していきます。

## ロールを指定してみる
```
あなたはプロのイラストレーターです
猫のイラストを描いてください
```

```
プロのイラストレーターとして、より具体的にご希望をお伺いしたく存じます。

猫の品種や毛色の指定はございますか？

リアルなタッチ、かわいらしいデフォルメ、あるいは抽象的なスタイルなど、ご希望のイラストのタッチを教えてください。

使用目的（絵本、ウェブサイト、ポスター等）がございましたらお知らせください。

背景やシーンなど、特に描いてほしい要素があればぜひお伝えください。

ご希望をお聞かせいただければ、よりご満足いただけるイラストをお描きいたします。
```
いきなりイラストを作成せず、具体的な条件を確認してくれるようになりました。

## 猫のイメージを具体化してみる
```
あなたはプロのイラストレーターです
猫のイラストを描いてください

## 猫について
- 白黒のハチワレ
- 短毛種
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479797/fd0e8ed7-0ac4-4784-b8ac-6976b4101aae.png)
最初と比べるとリアリティが増しましたね
背景がさみしいので、次は背景も描いてもらいます。

## 背景を指定してみる
```
あなたはプロのイラストレーターです
猫のイラストを描いてください

## 猫について
- 白黒のハチワレ
- 短毛種

## 背景について
- 家の中
- キャットタワー
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479797/67605e50-10e7-4901-b812-b187c08f2574.png)
で、でかい。。


## 画風を指定してみる
```
あなたはプロのイラストレーターです
猫のイラストを描いてください

## 猫について
- 白黒のハチワレ
- 短毛種

## 背景について
- 家の中
- キャットタワー

## 画風
- 水彩画風
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479797/d7236cc8-199f-48df-b95c-ef3dcd2abe86.png)
柔らかな雰囲気になりましたね。
ｔ雰囲気を明示的に指定してどうなるか試してみます。

## 雰囲気を指定してみる
```
あなたはプロのイラストレーターです
猫のイラストを描いてください

## 猫について
- 白黒のハチワレ
- 短毛種

## 背景について
- 家の中
- キャットタワー

## 画風
- 水彩画風

## 雰囲気
- 日常
- 穏やか
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479797/0335f0be-ac4e-4178-8a8b-e668f51d7d50.png)

なぜか急にリアリティが増しました。

試しに同じプロンプトでもう一度イラストを生成してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479797/50a4ccc6-e92c-467f-99b5-9e5c12a58893.png)
全然違うイラストになりました。
観点別に条件は記載しているものの、記載がざっくりしすぎていて生成される画像に統一感がなくなっていますね。

## 条件を詳細化してみる。
条件を詳細化し何度かイラストを出力してみます。
```
あなたはプロのイラストレーターです
猫のイラストを描いてください

## 猫について
- 白黒のハチワレ 
- 短毛種   
- 3歳 メス
- 体重 5kg
- 落ち着いていて眠そうな雰囲気
 
## 背景について 
- リビング
- 窓際においてあるキャットタワー 
- 外は晴天、部屋の中に日が差し込んでいる

## 画風
- やわらかな水彩画風 

## 雰囲気
- 日常生活の一コマ
- 猫や背景から穏やかな雰囲気が分かるように
```
### 1枚目
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479797/9ba0f3a0-7fb0-45b1-bbd5-2eff1ece4212.png)

### 2枚目
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479797/9b4549fe-4fc4-41cc-803c-ee65e6f7b17d.png)

### 3枚目
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479797/bb7d135e-2a8b-4657-ac0b-80ce9ab14447.png)

似たようなイラストが生成されるようになってきました。

## おわりに
GPT4.5の使用制限に引っ掛かりそうなため、一旦ここまでにしておきます。
部屋の中の壁紙や床、また構図やカメラアングルなどを指定すれば、もう少し安定して画像を生成できそうです。
0からエンジニアになるまでの記録【Day3】

:::note info
この記事は未経験からフルタイムで仕事をしながら2025年12月までにエンジニアとして転職することを目標に学習している筆者の記録です。初心者として理解しやすい言葉でまとめるように意識して書いています。同じような状況の方がもしいらっしゃれば、一緒に頑張りましょう🔥エンジニア転職まで残り283日！
:::

## 3/22・23に学んだこと👩‍💻
現在プログラミングブートキャンプに参加し、laravelでインスタのクローンアプリを作成中。
土日は授業が無いため、ブートキャンプの復習を行う。
英語での授業で内容を全て理解しきれていないので、「Laravelの教科書」という書籍を購入し、分からない部分を確認していく。
     
***
### MVCモデルの処理の流れについて

ex)ユーザーが　https://ドメイン/profile にアクセスした場合

1\. ルーター
どこで処理を行うかを割り振る

2\. コントローラ、モデル
ルーターから処理を受け取り、モデルを介してログインユーザーの情報を取得

3\. コントローラ
表示するビューを指定

4\.ユーザーの画面にページが表示される

***
### ディレクトリ構造

Laravelはフォルダやファイルが多いため、授業中に必要なファイルを探すのに時間がかかってしまう。
vscodeでファイルを検索できる機能もあるが、主要なファイルのディレクトリ構造は把握しておく必要があると感じた。


1\. Controllers
Http/Controllers
コントローラファイルが入る場所。

2\.Models
モデルファイルが入る場所。

3\. resources
resources/views
ビューファイルが入る場所。

4\. route
web.phpにルート設定用のファイルを入れる。

***
### 教本の新規プロジェクトに取り掛かる
* 「laravelの教科書」の中で紹介されているコードを打ち込んでいくために、新規プロジェクト作成
* ユーザー認証パッケージはLaravel/ui使用

<dl>
  <dt>Laravel/uiインストール後エラーが出る</dt>
  <dd>Vite manifest not found at: /Users/atsuko/Desktop/test-project/test-project/public/build/manifest.json</dd>
</dl>
→Vite が作ったファイル（manifest.json）が見つからない、という意味。

<dl>
  <dt>Viteとは？</dt>
  <dd>Vite（ヴィート）は、Laravel の CSS や JavaScript などを素早く処理してくれるツール。
Vite を使うと、Web ページの見た目を作る CSS や、動きをつける JavaScript を、最適な形に変換してくれる。</dd>
</dl>

<dt>manifest.jsonとは？</dt>
  <dd>Vite は 「ビルド」（ファイルを最適化する作業）をすると、いろいろなファイルを作成する。
その中に manifest.json というファイルのリストがある。</dd>
</dl>

<dt>対処法</dt>
  <dd>エラーの原因は、多くの場合「Vite のビルドをしていない」こと。
まず、ターミナル（コマンドを入力する画面）で プロジェクトのフォルダに移動し、以下のコマンドを入力する。</dd>
</dl>

　　`npm run build`　これで解決した！






## 理解が足りない部分、復習事項📖
- [ ] エラーを読めるようにすること
- [ ] 過去の授業の振り返り
- [ ] Laravelの教科書を読む
- [ ] ブラインドタッチの練習
Rails + MySQL 開発環境を素早く構築できるDockerテンプレート

# Rails + MySQL 開発環境を爆速で構築できる Docker テンプレート

Rails をちょっと試したい、MySQL と組み合わせたい、でもローカル環境は汚したくない…  
そんなときに気軽に使える、Docker ベースのテンプレートを作りました。

👉 リポジトリ：https://github.com/tgw-3a/rails8-mysql8-docker-template

---

## 📦 これはなに？

- Rails 8 + MySQL 8 の構成
- `docker compose up` するだけで開発環境が立ち上がる
- テスト実行も GitHub Actions で確認済み
- 新しくアプリを作りたいときのベースとして便利

---

## 🛠 セットアップ手順

詳しくは [README](https://github.com/tgw-3a/rails8-mysql8-docker-template#readme) を確認してください！

---

## ✅ できること

- `http://localhost:3000` でアプリにアクセス
- 必要に応じて `rails new` でプロジェクトを作り直すのもOK

---

## 👨‍💻 こんな人におすすめ

- とりあえず Rails + MySQL で試したい
- ローカル環境を汚したくない
- 本番を意識した構成で始めたい
- CI も含めてテンプレで揃えたい

---

ちょっと触ってみたいときのスタートラインとして、ぜひ使ってみてください！

至らないところがあれば、コメントなどお気軽に。
お待ちしております。
Step Functionsの実行状況をDatadogで可視化してみた

# 背景・目的
以前、カスタムメトリクスやStep Functionsのログを確認してみました。
今回は、Step Functionsの実行状況をDatadogのダッシュボードで可視化したいと思います。

https://qiita.com/zumax/items/989ed9f48f69791a1c03

https://qiita.com/zumax/items/1496328df459ea1fec26


# 実践
1. Datadogにサインインします
1. ナビゲーションペインで、「Dashboards」をクリックします
1. 「New Dashboard」をクリックします
1. ダッシュボード名を指定し、New Dashboardをクリックします


## Query Value

1. 「Add Widgets」をクリックします
1. 「Query Value」を選択します
1. 下記を指定し、「Save」をクリックします
    - sum:aws.states.executions_succeeded as count
    - タイトル
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/11a84e8d-ab2b-4c6e-a679-da5d3fec4a7c.png)

## Timeseries
1. 「Add Widgets」をクリックします
1. 「Timeseries」を選択します
1. 下記を指定し、「Save」をクリックします
    - aws.states.executions_started sum by statemachinearn as count
    - aws.states.executions_succeeded sum by statemachinearn as count
    - aws.states.executions_failed sum by statemachinearn as count
    - display: Areas
    - タイトル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/5390bffd-aac5-45d0-add1-f8f11d6fadff.png)

## Table
1. 「Add Widgets」をクリックします
1. 「Table」を選択します
1. 下記を指定し、「Save」をクリックします
    - aws.states.executions_started sum by statemachinearn as count
    - aws.states.executions_succeeded sum by statemachinearn as count
    - aws.states.executions_failed sum by statemachinearn as count
    - タイトル
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/a3225a55-f4d9-4baa-a7f6-6ec5aaff3a15.png)

## ダッシュボード
1. できました
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/33f7d52f-db06-4e27-b97e-2a755dd47f91.png)


# 考察
今回は、Step FunctionsのCloudWatchメトリクスを使って、Datadogでダッシュボードを作成してみました。
次回は、複数のStep Functionsを組み合わせて進捗管理をどう可視化できるか、試してみたいと思います。

# 参考

https://qiita.com/zumax/items/989ed9f48f69791a1c03

https://qiita.com/zumax/items/1496328df459ea1fec26

https://docs.datadoghq.com/ja/integrations/amazon_step_functions/

https://docs.datadoghq.com/ja/integrations/guide/aws-manual-setup/?tab=roledelegation
【Docker】 401 Unauthorized エラー：failed to fetch oauth token の対処法

## 事象
`docker-compose.yml` などを作成し、`docker compose up` でDockerを立ち上げようとしたが、以下のエラーが発生した。

```bash
failed to solve: failed to resolve source metadata for docker.io/docker/dockerfile:1: failed to authorize: failed to fetch oauth token: unexpected status from GET request to https://auth.docker.io/token?scope=repository%3Adocker%2Fdockerfile%3Apull&service=registry.docker.io: 401 Unauthorized
```

## 原因
Docker Hubへの認証に失敗しており、OAuthトークンの取得ができなかったことが原因だった。

## 試したこと
### 1. Docker Desktopの再インストール
久しぶりにDockerを起動しようとしたところ、Docker Desktop自体が立ち上がらなかったため、再インストールを行った。

公式サイトから最新版をダウンロードする。
https://www.docker.com/ja-jp/products/docker-desktop/

### 2. Docker Desktopの起動を確認する
GUIかCLIで起動を確認する。

#### GUIでの確認
Docker Desktopアプリを起動する。`Docker Desktop running`であればDockerが立ち上がっている。
#### CLIでの確認
以下のコマンドでも起動と状態を確認できる。
```bash
# 起動
open -a Docker

# 状態確認
docker info
```

### 3. `docker login`を実行
ターミナルで`docker login`を実行すると以下の文言が表示される。
```bash
Authenticating with existing credentials...
Stored credentials invalid or expired

USING WEB-BASED LOGIN
To sign in with credentials on the command line, use 'docker login -u <username>'

Your one-time device confirmation code is: ◯◯◯◯-◯◯◯◯
Press ENTER to open your browser or submit your device code here: https://login.docker.com/activate

Waiting for authentication in the browser…
```

指示に従い、`docker login -u <username>`を実行、またはエンターキーを押してWebサイトで認証を行ったが、以下のエラーが発生してログインできず。（パスワードの入力も求められなかった...）
```bash
Error response from daemon: Get "https://registry-1.docker.io/v2/": unauthorized: incorrect username or password
```

## 解決策
### 1. [Docker Hub](https://www.docker.com/ja-jp/products/docker-hub/)へのログイン確認
まずは改めてDockerへの正しい認証情報を持っているか確認する。
- **ユーザー名とパスワードが正しいか**

私の場合はユーザー名・パスワードともに正しい情報を把握していたので、[Docker Hub](https://www.docker.com/ja-jp/products/docker-hub/)にログインできた。

また、2段階認証が有効になっていると`docker login`時の認証方法が変わるっぽい？（パスワードではなく、Personal Access Tokenを使用する必要あり...？）
今回は**2段階認証を無効**にして試す。

---

### 2. Dockerの認証情報をクリアしてから再度ログインする
まずはログアウトと古い認証情報をクリアする。
その後、Dockerに登録しているユーザー名でログインする。
```bash
# ログアウト
docker logout

# 古い認証情報をクリア
rm ~/.docker/config.json

# ログイン
docker login -u <username>
```

すると、前とは異なりパスワードを聞かれるようになったので、Dockerに登録しているパスワードを入力。
```bash
docker login -u <username>

i Info → A Personal Access Token (PAT) can be used instead.
          To create a PAT, visit https://app.docker.com/settings
          
          
Password:
```

正しい入力であれば、ログインが成功する。
```bash
Login Succeeded
```
ログイン成功後に`docker compose up`を実行すると成功した。

## まとめ
試したことの3.でかなり時間を使ってしまいました...
多分ですが以下を試したことがエラーの解決に繋がったと思います。
- Dockerを再インストールして立ち上がることを確認したこと
- `docker logout`と`rm ~/.docker/config.json`を実行したこと

Dockerは雰囲気で使ってしまっていましたが、認証周りの仕組みを理解する重要性を再認識しました...。
特にエラー発生時の対応が行き当たりばったりになっていたので反省です。