OmniAICreator/Qiita-1.07M huggingface dataset:
AWS Terraform - セキュリティグループの名前 ( Name ) が空白なので、名前をつける

AWS マネージメントコンソールから見ると、Name と セキュリティグループ名という項目がある

![Image](https://github.com/user-attachments/assets/27994009-4429-48f3-a372-3d6065dd851e)


これはTerraformでいうと

- tag が「Name」に対応している
- name が「セキュリティグループ名」に対応している

ようだ。

コードで書くと以下の通り

```tf
resource "aws_security_group" "example" {
  name = "example-name"

  tags = {
    Name = "example-tag-name"
  }
}
```

tag ( Name ) をつけると、マネージメントコンソールでそのセキュリティグループが補完で選びやすくなったりする

# チャットメンバー募集


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

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


# プロフィール・経歴

https://github.com/YumaInaura/YumaInaura
各ブラウザで使えるヒープメモリの違いを調べてみた話

初めまして！ノベルワークスでエンジニアをしている、入社3年目のそうまです！

今回は、ブラウザごとのヒープメモリの使える量の違いについて調べた内容をまとめました！！

# 調査理由
少し前、ブラウザ上で大量のメモリを使う処理を書くことがありました。

実際には「処理方法が悪かっただけ」で、想定よりメモリ使用量は少なかったのですが、そのとき「Chromeだと落ちるけど、Safariは落ちない」みたいな現象が発生していました。

「これってブラウザごとに使えるメモリ量が違うのでは？」と気になり、
正直いつ使うか分からないけど、調べてみることにしました！

:::note info
ヒープメモリ
プログラムの実行中に動的に確保・解放が可能なメモリ領域の事を指す。
:::

# 調査結果

※ あくまで目安です。

| ブラウザ | 32ビットOS上の制限 | 64ビットOS上の制限 | 
|:-----------|:------------:|:------------:|
| Chrome | 約700MB | 約1400MB | 
| Edge | 約700MB | 約1400MB |
| Firefox | 約512MB | 約2GB | 
| Safari | 環境依存 | 環境依存 | 

ChromeやEdgeは、どちらもJavaScriptの実行エンジンに**V8**を採用しています。  
このV8エンジンの仕様として、デフォルトのヒープメモリ制限が以下のように設定されています：

- **32ビットOS**：約700MB  
- **64ビットOS**：約1400MB  

そのため、両者のヒープメモリ上限はほぼ同じになります。

一方、Safariに関しては公式にメモリ制限が公開されておらず、正確な数値は不明です....。  
ただ、実際の検証中に「Safariだけ落ちなかった」という場面もあったため、独自のメモリ管理手法や、より緩やかな制限が設けられている可能性がありそうです。

以下参考

https://developer.ibm.com/articles/nodejs-memory-management-in-container-environments/?utm_source=chatgpt.com

https://hacks.mozilla.org/2015/03/firefox-developer-edition-38-64-bits-and-more/

# Chrome と Edge
余談ですが、なぜ両者が同じJavaScript実行エンジンであるV8を採用しているのかは理由があるそうです。

この二つのブラウザは、Googleが開発するオープンソースソフトウェア「Chromium」を基盤として開発されているそうです。

「Chromium」は、レンダリングエンジンの「Blink」や、JavaScriptの実行エンジンである「V8」などを内包した、ブラウザのベースとなるプロジェクトです。
この「Chromium」を土台にしているため、Chrome も Edge もどちらもV8を使っている、というわけです。

https://ja.wikipedia.org/wiki/Chromium

# 纏め
正確な情報が公開されていないブラウザもあり、完全には把握できなかったものの、ブラウザによってヒープメモリの使える量にそこそこ違いがあるということは分かりました！！
番外編 - どんな数も"式だけで"絶対値にする

### まず、絶対値とは？
中学1年生の最初の方で、絶対値について習いましたよね？
絶対値とは、**その符号を無視して得られる非負の値**のことを言います。
例えば、`5`は`5`に、`-5`は符号を抜いて`5`になります。

### プログラムだけで絶対値を得られるようにするには？
では、プログラムで絶対値を得る方法を模索していきましょう。
```c#
var n

//途中のクラスや関数の指定は省略します。

if(n < 0) n *= -1f; //nの値が0未満なら、nを正の数にする
Console.WriteLine((string)n); //値を出力(Debug.Logでも同じ)
```
これは、単純に値が0未満の時に値を正の数にする処理です。

### もっと簡単にしたい。
だったら$\sqrt{}$(平方根 or ルート)を使いましょう。
先ほどのスクリプトでも同じような原理を使っていますが、**負の数に負の数の積は正の数になります**。
察しがついた方もいるかもしれませんが、$\sqrt{}$は$n^2$の数の$n$を取り出す式です。
この$n$を二乗し、平方根の計算をすると、どんな数でも正の数になる気がしませんか？
肝心の式は、
```math
\sqrt{n^2} = nの絶対値
```
たったこれだけです。
nにどんな数でも入れてみてください。ね、絶対値になるでしょ？

### 学校の数学って、やっぱり役立つ
プログラマーを目指していると、やっぱり数学の知識が生きてきます。私は、
・べき乗の計算（$x^2$）
・平方根の計算（$\sqrt{x}$）
・一次方程式 & 二元一次方程式
は少なくとも役に立っていると感じています。
# 勉強に苦悩している学生諸君、数学は将来に生きてくるぞ！どんな教科でもあきらめずに学んでいこう！
以上です
【Salesforce】通知テストに便利！Gmailの「メールエイリアス」機能で自分宛に通知を集約する方法

Salesforceのフローやメールアクションのテストで、「送信先は他人のつもりだけど、通知は自分で受け取りたい」ってことありませんか？

そんなときに超便利なのが、Gmailのエイリアス機能です！

---

## ✅ 方法：メールエイリアス（Gmailなど）を使う

Gmailでは、メールアドレスの「`@`の前」に`+〇〇`を付けたアドレスでも、  
**元のアドレスと同じように受信される**仕様になっています。

---

### 🔽 使い方例

たとえば、あなたのGmailが：

```
yourname@gmail.com
```

だとしたら、以下のようなメールも全部 **yourname@gmail.com に届きます**。

```
yourname+salesforce1@gmail.com
yourname+flowtest@gmail.com
```

---

## 💡 Salesforceでの活用シーン

| ケース | エイリアスアドレスの例 |
|--------|-------------------------|
| テスト用ユーザに割り当てたい | `yourname+testuser01@gmail.com` |
| フローの分岐テスト | `yourname+branchA@gmail.com`, `yourname+branchB@gmail.com` |

---

## ✨ メリット

- 自分のメールアドレスだけで**複数の送信先を模擬できる**
- 通知の受信を**1つのGmailでまとめて管理できる**
- Salesforce上では**別アドレス扱い**になるため、ユーザごとの設定が可能

---

## ⚠️ 注意点

- エイリアス機能はGmailまたはGoogle Workspace（旧G Suite）限定
- 独自ドメインや会社メールでは使えないことがあります
- 本番環境で実メールを変更する際は十分に注意！

---

## 🧪 おすすめの活用例

```text
ユーザA：yourname+userA@gmail.com
ユーザB：yourname+userB@gmail.com
上司通知：yourname+boss@gmail.com
```

Salesforceでテストユーザの `Email` にこれらを設定すれば、  
**自分宛にすべての通知が届きつつ、ユーザごとの違いを識別可能**です。

---

## ✅ まとめ

Gmailのメールエイリアス機能を使えば、  
通知テストの効率がグッと上がります！

特に Salesforce 開発・検証で通知を確認したいときは、  
ぜひ活用してみてください💡

---

👉 いいね＆ストックで応援してもらえると嬉しいです😊
個人的備忘録：トランザクションの基本とMySQLでの使い方を記事にアウトプットしてみた

## はじめに
データベースの操作において「トランザクション」は、データの整合性を保つうえで欠かせない重要な概念です。

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

この記事では、MySQLを中心にトランザクションの基本とその使い方について、自分用にまとめておきます。

## 書こうと思ったきっかけ
複数のSQLを連続で実行する中で、一部の処理だけが成功して残りが失敗する状況がありました。データが中途半端な状態にならないようにしたいと思い、トランザクションの理解と使い方を整理するためにこの備忘録を作成しました。

## トランザクションとは？
トランザクションは、ひとまとまりのデータベース処理を1つの単位として扱う機能です。すべての処理が成功することで初めて反映され、途中で失敗した場合はすべて取り消されます。

### ACID特性
1. **Atomicity（原子性）**：すべての処理は一つの単位として完全に実行されるか、まったく実行されないか。
2. **Consistency（一貫性）**：トランザクション前後でデータの整合性が保たれる。
3. **Isolation（独立性）**：他のトランザクションの影響を受けずに処理が行われる。
4. **Durability（永続性）**：トランザクションが完了したら、その結果は永続的に保存される。

## トランザクションの基本操作
```sql
-- トランザクション開始
START TRANSACTION;

-- SQL文を実行
UPDATE accounts SET balance = balance - 10000 WHERE id = 1;
UPDATE accounts SET balance = balance + 10000 WHERE id = 2;

-- 正常に終わったら確定
COMMIT;

-- エラーがあったら取り消す
ROLLBACK;
```

## 注意点
- `COMMIT` を忘れると、変更が永続化されません。
- 自動コミットが有効な場合は、明示的に `SET autocommit = 0;` で無効化する必要があります。
- 一部のストレージエンジン（例：MyISAM）はトランザクションをサポートしていません。（自分調べ）

## まとめ
トランザクションを正しく使うことで、データの整合性を守りながら安心して複雑な操作を行うことができます。今後は、より複雑なトランザクション制御やエラーハンドリングも含めて実践していきたいと思います！
家計簿アプリを作る＃２７

![スクリーンショット 2025-04-04 080456.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4012588/5145d99d-2d1a-4281-b7bc-f7f43c1523dd.png)
![スクリーンショット 2025-04-04 080631.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4012588/4ef6d5bf-4e52-4299-b790-38f0128b52a8.png)
最後にhandleDrawerToggleを受け取ります。

![スクリーンショット 2025-04-04 080724.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4012588/c18a05b4-2582-48f8-a3a2-6f63c35d6fe8.png)
![スクリーンショット 2025-04-04 080800.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4012588/6c6edd32-3581-4f8e-8fa9-ce0f1b0598e2.png)
型指定をします。() => voidという型は、AppLayout.tsxの中で、handleDrawerToggleにカーソルを充てると、わかります。
次回は、interfaceを利用して、一か所にまとめたいと思います。
アクションの中に目的のフローが無い




# Create Check-in Guest Event が表示されない。このフローは有効化できない

+ [Enhance Agentforce to Act on Data with Conversational Language - Checkin Guest Flow Not Available](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX000000US47)
+ [Errors in "Create a Guest Check-in" within Enhance Agentforce to Act on Data with Conversational Language](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX000000VtXY)

:::note
Have you enabled the flow Create Guest Check-in Event? 

Goto Setup --> flow

The flow was called another name from the one provided in the instructions and i used that to proceed

フローは説明書に記載されている名前とは別の名前で呼ばれており、それを使用して進めました
:::

+ ["Create Check-In Guest Event" is not an option](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX00000KE7Ib0AL)
+ [フローを保存できません](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX00000KE5rd)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/b235d689-0aee-430d-aaa7-0ebe16eb0b02.png)

+ [Challenge with Creating an Agent Action: Create check-in Guest Event is not available](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX000000Vt7j)
+ [【未解決】Errors in "Create a Guest Check-in" within Enhance Agentforce to Act on Data with Conversational Language](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX000000VtXY)
+ [Errors in "Create a Guest Check-in" within Enhance Agentforce to Act on Data with Conversational Language](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX000000VtXY)
+ [Become an Agentblazer Champion | Enhance Agentforce to Act on Data with Conversational Language](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX00000MZhlL)


# Create Check-In Guest Eventを保存できない？

+ [Unable to keep "Create Check-in Guest Event action" in Topic's Actions - for Agentblazer Champion module "Enhance Agentforce to Act on Data with Conversational Language"](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX00000PXrYp)

:::note
After adding the action, when you see the action in the list DO NOT REFRESH or SAVE it instead active the agent. 

Now you can deactivate again and do your work. 

Your action

Create Check-in Guest Event
will no loger be removed. 

アクションを追加した後、リストにアクションが表示されたら、更新または保存せずに、エージェントをアクティブ化してください。

これで、再度非アクティブ化して作業を行うことができます。

アクション

チェックイン ゲスト イベントの作成
は削除されなくなります。
:::
Git 1年生　pat1

**Gitとは？**

AIくんによれば「複数の開発者が共同で作業する際に、ソースコードなどのバージョンを管理するシステム」とのこと

このことも忘れていた小生なのであった。


１.まずはGithubのホームページでアカウントを作る

あとデフォルトがmasterではなくmainになったそうな。
おそらくmasterだと主人的なことを想像させてしまうから？
https://www.publickey1.jp/blog/20/githubmainmastermain.html

２．repositioryを作る
https://backlog.com/ja/git-tutorial/intro/02/
ここがわかりやすいかも
自分のPC上にあるローカルrepositoryと複数人（または一人で扱う）リモートrepositoryを設定することで開発を円滑にスムーズにする．
やはり１人で開発する分には良いのですが，大抵の仕事は複数にやりますので，そのためローカルとリモートの概念は把握しておくといいと思います．

まずはリモートリポジトリを作ってみます．
![スクリーンショット 2025-04-04 7.34.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67885/f959b19c-9304-4697-87fb-7b46c5bf333c.png)

まずは左側のRepositoryを押してもらい，Repository画面に行きます．
で，右側に青く光る[New]ボタンがあるので，それを押して新しいリモートRepositoryを作りましょう

適当にrepositoroy名はディレクトリ名のようなものなので今後自分がわかりやすいためをつけておくといいと思います．

testリポジトリができました
![スクリーンショット 2025-04-04 7.52.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67885/2ca11c53-4e3d-4f01-b7e2-8ba96d0758c2.png)

３．repositoryをローカルrepositoryにcloneする
![スクリーンショット 2025-04-04 7.59.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67885/f845043e-c387-4ca8-b99e-70a4e8977bf2.png)
上記の画像のhttpsのコードをコピーしてきます．
そしてコピーしてきたい環境で
```
git clone https://github.com/caffein1371/test.git
```
↑(自分の場合)
caffein1371がユーザー名
リポジトリがtestなのでこんな感じ
![スクリーンショット 2025-04-04 12.32.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67885/9b87003c-26b6-4582-9c05-10ad2c740bfd.png)
![スクリーンショット 2025-04-04 12.35.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67885/32535b5d-3b4d-48d9-a232-5f6f3906849f.png)
なんとかローカルにtestくんがcloneされてきました
windows11で、sketchup6 その45

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

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/49ef5746-ac1a-48c3-b652-63bbbbaf82a1.png)

# サンプルコード

```

	def test_closest_points
		model = Sketchup.active_model
		entities = model.active_entities
		line1 = [Geom::Point3d.new(0, 2, 0), Geom::Point3d.new(1, 0, 0)]
		line2 = [Geom::Point3d.new(3, 0, 0), Geom::Point3d.new(0, 1, 0)]
		l1 = entities.add_line line1
		l2 = entities.add_line line2
		points = Geom.closest_points(line1, line2)
		if (points)
			UI.messagebox points
		else
			UI.messagebox "Failure"
		end
	end



```
Wio BG770Aで使ってみるM5Stack用環境光センサユニット！その方法とは？

# 背景
Wio BG770AはGroveコネクタが付いているため、さまざまなデバイスを簡単に接続することができます。今回は、M5Stack社の環境光センサを使用して、光の強さを測定し、SORACOM SIMを通じてデータを送信するプロジェクトに挑戦しました。


![Wio BG770Aで M5Stack用環境光センサ ユニットを使う！.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21408/25b893dc-dffb-46ae-8142-997c080490ac.png)



# 使用するデバイス
- Wio BG770A v1.0
- M5Stack用環境光センサユニット（BH1750FVI-TR）
- SORACOM Air for セルラー（SIMカード）

https://soracom.jp/store/30926/

https://www.switch-science.com/products/7985

https://soracom.jp/start/


# 電源電圧の問題
M5Stack社のデバイスを使用する場合、電源電圧の違いが一番の課題になります。Wio BG770Aは3.3V電源ですが、M5Stack社のデバイスは5V電源であり、ここが一番の課題になります。電源電圧を変換することができるようなモジュールも販売されているので、そちらを使用することでさまざまなデバイスを使う可能性が広がると思います。今回は試していないですが、以下のようなモジュールが使用できると思います。

https://ssci.to/8434


<br>
尚、今回は、Groveコネクタに直接繋いで動作確認しています。M5Stack用環境光センサユニット（BH1750FVI-TR）の回路図を確認すると、LDOで3.3Vを作っているみたいだったので、ダメもとで3.3V電源をそのまま接続しました。そうすると、LDOの出力に3.3Vが出ていることが確認できたので、そのまま直接接続してテストすることにしました！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21408/8fdf8ee0-9226-404f-a8b3-f88bbada4877.png)

# 大まかな手順
1. M5Stack用環境光センサをWio BG770AのI2C用のGroveコネクタに接続
1. Arduino IDE環境で『soracom_uptime_psm』をベースに進める
1. M5Stack用環境光センサを使えるように修正
1. M5Stack社公式ライブラリではなく、Wireライブラリを使うように実装
1. SORACOMにデータがアップされていることを確認

# ソースコードの実装ポイント
SORACOMにデータ送信することを想定して、Wio BG770Aのサンプルスケッチの中で、『soracom_uptime_psm』のスケッチをベースに少し改変することにします。
尚、M5Stack社のDLIGHTのライブラリは使用できなさそうだったので、I2C通信を利用して、ArduinoのWireライブラリを使用して通信を行いました。ソースコードの中でポイントになる部分のみをピックアップしたので、参考にしてください。
<br>

Wireライブラリのインクルードと、M5Stack用環境光センサユニットのI2Cアドレスを指定
```cpp

#include "Wire.h"

#define DLIGHT_I2C_ADDRESS 0x23 // DLIGHTのI2Cアドレス

```
<br>

Groveコネクタへの電源供給と、Wireの初期化
特に、『Groveコネクタへの電源供給』がポイントになります！とても大切！
```cpp

  // Start WioCellular
  WioCellular.begin();
  digitalWrite(LED_BUILTIN, LOW);

  digitalWrite(PIN_VGROVE_ENABLE, LOW);
  Wire.begin();

```
<br>


SORACOMに定期的にデータを送信している以下の関数に、環境光ユニットから光の強度を取得する処理を追加
```cpp

static bool measure(JsonDocument &doc) {
  Serial.println("### Measuring");

  doc["uptime"] = millis() / 1000;

  Wire.beginTransmission(DLIGHT_I2C_ADDRESS);
  Wire.write(0x10); // データを要求するコマンド
  Wire.endTransmission();
  delay(200);

  int data;
  Wire.requestFrom(DLIGHT_I2C_ADDRESS, 2);
  if (Wire.available() == 2) {
    data = Wire.read();
    data = (data << 8) | Wire.read();
    Serial.print("Light Level: ");
    Serial.println(data);
  }
  delay(1000);

  doc["data"] = data;
  
  Serial.println("### Completed");

  return true;
}



```




# まとめ

今回のプロジェクトでは、Wio BG770AとM5Stack環境光センサを使用して、光の強さを測定し、SORACOMにデータを送信することができました。電源電圧の違いやライブラリの互換性などの課題を克服し、実装することができました。このような手順を踏むことで、Groveコネクタを使って、更にいろいろな挑戦が可能になります。

また、SORACOMに送信されたデータはこのように確認できるようになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21408/d433fff5-2144-49f0-8ae4-58f6994b2636.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21408/885b219c-e6eb-4737-8a78-4f5517a97edf.png)




# その他の参考リンク

https://seeedjp.github.io/Wiki/Wio_BG770A/home.html

https://qiita.com/yukima77/items/e45a44720cd7fffade3d

https://qiita.com/yukima77/items/45793e72b2347ecbb18b
「学ぶ環境でこんなに違うなんて」プログラミング初心者にProgateを推したい理由

プログラミングを始めようと意気込んだものの、最初の壁は「学習環境の整備」でした。

教材をブラウザで開き、別のタブでコードエディターを立ち上げ、環境構築の手順を確認しながら進める。

気づけば画面はタブで埋め尽くされ、学ぶ前に疲れてしまう自分がいました。

「やる気はあるのに、なんでこんなに面倒なんだろう…」

学び始める前から、心が折れかけていました。

## Progateとの再会：すべてが一つの画面で完結

そんなとき、以前少し触れたことのあるProgateを思い出しました。

試しに再ログインしてみると、教材、コードエディター、実行結果のプレビューがすべて同じブラウザ内に収まっているではありませんか。

これなら、複数のタブを行き来する必要もなく、学習に集中できる。

まさに求めていた環境がそこにありました。

「これだ……！」と、声が出るほど感動したのを覚えています。

## Progateの特徴とメリット

Progateの魅力は、初心者にとって「とっつきやすさ」が極めて高いこと。

以下のような工夫が随所にちりばめられています。

### スライド形式での学習

イラストを多用したスライド形式のレッスンで、視覚的に理解しやすい構成になっています。

自分のペースで進められ、復習も容易です。

「何をしているのか」が視覚的にわかるので、抽象的なまま進まないのがありがたい。

### 環境構築が不要

ブラウザ上でコードを書き、その場で実行結果を確認できるため、面倒な環境構築が不要です。

初心者がつまずきやすいポイントを排除し、学習に集中できます。

### 多様なプログラミング言語に対応

HTML & CSS、JavaScript、Python、Rubyなど、主要なプログラミング言語を幅広く学べます。

最初はHTMLから始めて、次にJavaScriptやPythonに進むなど、ステップアップがしやすいのも嬉しいところです。

### モチベーション維持の工夫

学習の進捗に応じて経験値が貯まり、レベルアップするシステムが導入されています。

ゲーム感覚で学習を進められ、継続しやすい仕組みです。

「レベルが上がる」というわかりやすい達成感が、ちょっとしたご褒美になります。

## 環境構築で挫折する前に

プログラミング学習の初期段階で環境構築に手間取り、挫折してしまうケースは少なくありません。

実際、2021年の調査（※）でも「環境構築でつまずいた」と答えた初学者は40％を超えていました。

Progateはそのハードルを取り払い、学ぶこと自体に集中できる環境を提供してくれます。

※出典：日本能率協会「初学者のプログラミング学習に関する調査2021」

## 最初の一歩は、「続けられるかどうか」で選んでいい

「ちゃんと環境構築して、本格的なエディターを使わなきゃダメかな…」

そんなふうに身構えていた私ですが、Progateを使ってみて感じたのは、

**“最初のうちは、やりやすさ最優先でいい”**ということ。

まずは「自分でもできるかも」という感覚を掴むことが、何より大事なのかもしれません。

Progateは、そんな感覚を自然に与えてくれるサービスでした。

## Progateを始めてみたい人へ：まず何をすればいい？

「Progate、ちょっと試してみたいかも」と思った方へ。

始め方や注意点を簡単にまとめておきます。

### アカウント登録は無料

まずは[Progate公式サイト](https://prog-8.com/)にアクセスして、メールアドレスやGoogleアカウントで登録すれば、すぐに学習を始められます。

HTML、CSS、JavaScript、Pythonなどの一部コースは無料で体験できます。

### 無料でどこまで学べる？

無料プランでは初級レッスンの一部にアクセスできます。

もし続けてしっかり学びたいと思ったら、月額1,078円（税込）の「プラスプラン」への加入がおすすめです（※2024年時点の価格）。

このプランに加入すると、すべてのコース・道場コース・演習問題が解放され、より実践的な力がつきます。

### おすすめの始め方

- **完全初心者なら：HTML & CSSのコースから**  
　Webサイトの仕組みや「見えるコード」を扱うので、変化がわかりやすく達成感があります。

- **プログラミングらしい“考える力”を身につけたいなら：JavaScriptやPythonもおすすめ**  
　ちょっとした動きや処理を自分の手で作れるようになると、一気に「できること」が増えます。

### スマホアプリもある

iOS/Android向けのアプリもあり、スキマ時間に学習を進めたい人にはぴったりです。

ただし、PC版と比べて学べる言語や機能に制限があるため、本格的にやりたい方はPC環境が◎。


## あとがき

「とりあえずProgateでやってみた」そんな一歩が、自分にとっての学びの原点になっています。

プログラミングって、難しそうで、でもやってみたら案外面白い。

そんな風に思えるまでの第一歩を、ぜひ体感してみてください。
React アプリを Azure App Service に Git デプロイする方法

## 前提条件と準備

デプロイを始める前に、以下を準備してください：

- **Azureサブスクリプション**
- **Azure App Service（Webアプリ）**（あらかじめAzureポータルで作成）
- **ローカル環境**：Gitインストール済み、ReactアプリがGitリポジトリとして初期化済み
- **Node.js/npm**：Reactアプリのビルドに必要
- **Azure App ServiceのローカルGitデプロイ設定**：AzureポータルやCLIで有効化

## 1. Git リモート: `origin` と Azure 用リモートの違い

- `origin`：GitHub等、通常のコード管理用
- 例：`azure-front`：Azureデプロイ用リモート名（任意で追加）
- `git remote -v` で確認可

## 2. Azure側の準備

### 2.1 Local Gitの有効化
Azureポータル > 対象App Service > Deployment Center > Source = Local Git に変更 → Save

### 2.2 発行プロファイルの取得
Azureポータル > Web App 概要ページ > 「Download publish profile」から取得。`.PublishSettings` ファイル内に資格情報が含まれる。

### 2.3 資格情報の確認
発行プロファイル内の以下を確認：
- `userName="$アプリ名"`
- `userPWD="..."`
- `publishUrl="...azurewebsites.net..."`

## 3. Azure用Gitリモートの設定

### 3.1 Git Clone URLの確認
形式例：
```
https://$username@yourapp.scm.azurewebsites.net:443/yourapp.git
```

### 3.2 リモートの追加
```bash
git remote add azure-front https://$username@yourapp.scm.azurewebsites.net:443/yourapp.git
```

## 4. React アプリのビルドと準備

```bash
npm install
npm run build
```

- `.gitignore` から `build/` を除外または `git add -f build/`
- コミット：`git commit -m "Add build files for Azure deployment"`

## 5. Azure へのデプロイ (Git Push)

- `main` ブランチを `master` にプッシュする例：
```bash
git push azure-front main:master
```

- 認証時にパスワードを聞かれたら発行プロファイルの `userPWD` を使用

- ログに `Deployment successful.` と出れば成功
- ブラウザで確認：https://yourapp.azurewebsites.net

## 6. 2FA 有効時の認証方法

- **発行プロファイルの資格情報を使用**（最も簡単で推奨）
- **ユーザースコープの資格情報を別途設定**（Azure CLI などで）
- **Microsoft アカウントのアプリパスワード使用**
- **SSH公開鍵の利用**（上級者向け）

## 7. よくあるエラーと対処法

### 認証失敗
- Azureログインパスワードではなく発行プロファイルのパスワードを使う

### ホストに接続できない
- URLやネットワーク確認、App ServiceがRunningか確認

### デプロイされない
- ブランチ指定ミス、`git push azure-front main:master`などで再実行

### デプロイ失敗
- Deployment Center > Logs や Kudu のログで詳細を確認

### Reactが表示されない
- `web.config` の設定確認（SPAの場合）

---

これでReactアプリをAzure App Serviceにデプロイする準備・実行・確認・トラブル対応まで一通り完了です！
LSLイベントまとめ

# イベントとは
セカンドライフでの「スクリプト」は、それ単体では動作しない。
アバターにインベントリがあるように、オブジェクトにもインベントリがある。
スクリプトを、オブジェクトのインベントリに格納することにより、
オブジェクトに対する何かしらの「刺激」によってスクリプトが呼び出され、動作するようになっている。
スクリプトが検知できる「刺激」の１つ１つを**イベント**と呼んでいる。（と思う）

セカンドライフのスクリプトが検知できる「刺激」つまりイベントは以下の９つ。

# イベント一覧

| イベント名           | トリガーになる動作                         | 主な用途例                       |
|----------------------|---------------------------------------------|----------------------------------|
| `state_entry()` | 起動・状態が切り替わった(※) | 初期化処理、初期メッセージなど |
| `touch_start(integer)` | オブジェクトがクリックされた | クリックで反応、メニュー表示など |
| `listen(integer, string, key, string)` | ローカルチャットを受け取った | チャットでの命令受け取り |
| `sensor(integer)` | センサーでアバターを検出した | アバター検出、近接イベント |
| `timer()`            | 一定時間ごと<br>（`llSetTimerEvent`で設定）| 繰り返し処理、アニメ、監視など   |
| `collision(integer)` | 衝突検知                         | 衝突判定、バウンドなど           |
| `link_message(integer, integer, string, key)` | 他のリンクされたプリムからメッセージ受信 | スクリプト間通信、連携処理 |
| `changed(integer)`   | オブジェクトの状態が変わった（持ち主変更など） | 所有者変更、装着検知など     |
| `attach(key)`        | アバターに装着・取り外し         | 装着時の処理、HUDなど           |

# 補足
- イベントは、一般的なスクリプトでいう「メソッド」の形をしているが、これをスクリプト内で自発的に呼び出すことはできない。<br>飽くまでも**イベント発生時にシステムが自動的に呼び出すもの**、という位置づけ。
- 各イベントはすべて使用する必要がない。**必要なものだけ使えばOK**。
ブロックチェーンを参考にコミットチェーンというものを実装してみた

## コミットチェーン

コミットがノードとして連なっていて、各ノードは前のノードの属性値から得られたハッシュ値を、ノードハッシュとして持つ。
この構造はブロックチェーンに似ている。

```
{ Commit chain

  { Node        -> { Node        -> { Node        -> ...
  　@Data            @Data            @Data
    @NodeHash }      @NodeHash }      @NodeHash }
                                                          }
```

ノードにはデータを持たせる。ハッシュ値はそのデータを全部くっつけて計算する。
ノードは1つ前のノードのデータ列のハッシュ値を`@NodeHash`としてもっているので、コミットチェーンの改ざんが難しくなる。

たとえば、コミットチェーンのノードを1つ改ざんしたとする。データやハッシュ値を。

だが、コミットチェーンを走査してノードのハッシュ値がちゃんと前のノードのデータ列のハッシュになっているかチェックすれば、改ざんは検出できる。
なぜならデータなどを改ざんすると計算されるハッシュ値も変わるからである。1つ先のノードは1つ前のノードのハッシュ値を記憶していて、それが再帰的に連なっているので、1つの改ざんによってチェイン全体のハッシュ値が変わる。

だがこの設計だと、コミット列の末尾ノードの改ざんは検出できないことになる。
ブロックチェーンはこの辺どうしてるんだろう？

### 蓋ノードを末尾にコミットする

末尾ノードの改ざんを検出できないのは仕方ないとして、では末尾ノードのデータを意味がないものにしたらどうだろうか。
つまりデータのコミットがあるたびにチェーンの末尾に蓋となるコミットを追加する。

```
[ Data commit ] -> [ Cap commit ] -> [ Data commit ] -> [ Cap commit ] -> ...
```

こうすれば末尾ノード（蓋）の改ざんは検出できないが、改ざんされても問題がないデータとなるので、チェーンの堅朗性が増すと思われる。
デメリットとしてデータ容量が倍になるということがある。

だが100000コミットで20MBなので、それが40MBになるぐらいであれば、十分許容範囲と言えるだろう。

## 何に使うのか？

このコミットチェーンを自作のCMSに実装してみた。

CMSの悩み事にコンテンツの改ざんチェックというのがある。悪意のあるログインによってコンテンツが勝手に投稿されたり更新されたりするという事態を想定するわけである。
コミットチェーンがあればノードに記事編集者のIPアドレスを持たせればコミッターのIPアドレスを検出できるし、記事編集の履歴はコミットとして残るので、調べることができる。また、記事のデータ列のハッシュ値もノードに持たせれば、コミットされていない記事の検出を行うこともできる。

記事の更新処理で自動でコミットをするようにすれば、少なくともログインのレイヤーでの操作は追跡できるようになる、という論理。

## 実装してみたところ・・・

PHPで実装してみたところ、20MBぐらい（100000コミット）のコミットチェーン・ファイルでもちゃんと動作するので、たぶんコンテンツが増えても動くと思う。

おわり。
【PHP】連想配列をHTMLタグの属性列にする

## 属性にする

なーんかよく書くなぁというコード。

```php
function join_array_as_attrs($ary) {
    $s = '';

    foreach ($ary as $key => $val) {
        $s .= safe($key) .'="'. safe($val) .'" ';
    }

    return $s;
}
```

`safe()`は`htmlspecialchars()`のラッパー。
よくわからんけどこの関数は何回か書いてる気がする。

タグを構成するときに

```php:
function create_momonga_img($attrs) {
    $tag = '<img src="momonga.png" ';
    $tag .= join_array_as_attrs($attrs);
    $tag .= '>';
    return $tag;
}
```

こんな感じで使う。
`$attrs`は外部入力の可能性もあるから`safe()`でエスケープしておくのがキモ。

おわり。
デプロイは懺悔、テストは信仰。エンジニア福音書

## 第1章：設計という創世記
- 設計は神の意志
- コードは紙に描いてから生まれよ
- 慢心のうちにバグは生まれる

## 第2章：テストという信仰
- テストを書け、さすれば救われん
- CIとは戒律である
- 再発防止策を書かない者、カルマ重し

## 第3章：信頼という試練
- 報告せよ、隠すなかれ
- ログにこそ神の声が宿る
- 成功の裏に、沈黙したバグが潜む

## 第4章：デプロイとカルマ
- デプロイは天への告解
- git blameは過去の自分との対話
- リリースは懺悔、ロールバックは詫び

## 最後に
- 設計とテストを怠る者よ、思い上がるなかれ
- ログを読め。失敗は書いて初めて意味を持つ
- 技術における信仰とは、備えることであり、逃げないことである
Copilot活用：宣言型エージェントでのマーメイド記法による図の作成

# Copilotでのマーメイド記法による図の作成
~~Copilot → Loop（Pages）連携~~により、マーメイド記法でいろいろ表現することができます。
※4月に入ってから？Loopで開かなくてもプレビューで図が見えるようになりました！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003209/759fe0d2-c297-4ab9-a03b-de2d4d97fd21.png)


## 1. マーメイド記法の概要
### マーメイド記法とは何か
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003209/2a5d8ced-00cd-470b-838c-2e0655109c07.png)
マーメイド記法は、図やチャートを簡単に作成するための記法だよ。
例えば、フローチャート、シーケンス図、ER図、ガントチャートなどをテキストベースで記述して、視覚的に表現できるんだ。プログラミングの知識がなくても、簡単に図を作成できるのが特徴だよ。

公式はこちら↓

https://mermaid.js.org/#/



## 2. Copilotによるマーメイド記法のサポート
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003209/009971fd-2300-49b9-bb05-76788d1b4bac.png)




## 3. 出力イメージの紹介
### 具体的な例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003209/bc8ee6f9-f569-450f-86d7-c3f7ba5b7ab7.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003209/4ad1c86c-d129-4531-b322-c6ca09c4a504.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003209/e0a34428-2925-4426-950a-a8e110b608cd.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003209/5f623305-3299-42c5-8c00-60504355cd31.png)


#### 完成イメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003209/d9888abf-b4f8-449a-b1d0-b8f50b0e05a0.png)


<font color="OrangeRed">**天才か！！！！！**</font>:relaxed:


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003209/32c4884b-8e05-4306-a2cb-25b5ff884a03.png)
<font color="OrangeRed">**土日の行動パターン！！（状態遷移図）**</font>:relaxed:



## おゆみちゃん（マーメイドの姿）の頭の中
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003209/a99b3a51-8662-446d-9fe5-ebc651f37b7a.png)

:::note info
指示文

**お願い事項
・かならず、フランクなタメ口で会話してください。
・マーメイド記法について聞かれたときに、サンプルコードは不要です。
・自分のことをおゆみちゃんといわないでください。

**指示
以下の流れに沿って、会話しながら生成を進めてください
１．どんなものを作りたいか聞いてください（フローチャート、シーケンス図、ER図、ガントチャートなど）
２．コードやテキストデータを張り付けるよう促してください。
３．張り付けられたデータを、中学生でもわかる簡単な日本語で解釈し、マーメイド記法に起こしやすいようにテキストで整理してください。
４．内容が正しいか確認させてください。指摘が入ると、都度修正してください。
５．確認が終われば、マーメイド記法で記載してください。
６．問題なければ完成です。ドヤ顔でアピールしてください。
:::


## 「おゆみちゃん」エージェントはフリー素材です
ぜひ皆様の環境でも作成、ご活用ください！


![C9DA8F34-B994-42E1-9251-9F80DD029344.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003209/a9b78a91-4a14-44bb-8e3c-0dd9c2f77a25.png)
【Laravel】Vercel環境でBasic認証をかけたい！

「Vercel環境でLaravelを動かしました！でも、認証(Middleware)が上手く動作しないんです...。」

## はじめに
Vercel環境だとLaravelの認証周りの組み込み、ちょっと複雑でドキュメントも少ないですよね。

今回は、簡易ですが**環境変数の設定値**を使ったBasic認証を行う方法を紹介しようと思います。

手順、そこまで難しくないです。サクッとできちゃいます。

1. Vercel環境でLaravelを動かす方法
1. Basic認証実装(Middlewareの実装)
1. RoutingにMiddlewareを適用

## 環境
- Vercel
- Laravel v11
- PHP 8.3
- vercel-php 0.7.3

## Vercel環境でLaravelを動かす方法
こちらについては以前記事書いてます。
PHP8.3で動きますのでぜひ。

https://qiita.com/umekikazuya/items/6649388e59481fd99730

## Basic認証の実装
Basic認証の実装内容については本題ではないので端折ります。
適当ですがこんな感じですかね。

:::note warn
※ サンプルです。エラーハンドリング等割愛してます。
実際のプロジェクトで使うにはご注意ください。
:::

```php:App/Http/Middleware/BasicAuthMiddleware.php
<?php

namespace App\Http\Middleware;

use Illuminate\Http\Request;
use Symfony\Component\HttpFoundation\Response;

class BasicAuthMiddleware
{

    public function handle(Request $request, \Closure $next): Response {

    // 構成からユーザー名・パスワードを取得.
    $user = config('auth.basic.username');
    $pass = config('auth.basic.password');
    // リクエストヘッダーからBasic認証情報を取得.
    $auth = $request->header('Authorization');

    $credentials = str_replace('Basic ', '', $auth);
    $decoded = base64_decode($credentials, true);
    [$inputUser, $inputPass] = explode(':', $decoded, 2);
    // 認証チェック.
    if ($inputUser === $user && $inputPass === $pass) {
        return $next($request);
    }
    
    return response('Unauthorized', 401)
        ->header('WWW-Authenticate', 'Basic realm="Protected Area"')
        ->header('Cache-Control', 'no-cache, no-store, must-revalidate')
        ->header('Pragma', 'no-cache')
        ->header('Expires', '0');
}
```

あまり本題じゃないので触れるか迷いましたが...。

`env()`から直接環境変数を読み込むパターンでもいいですが、`/config/auth.php`に構成としてセットしたほうがキャッシュされて速度面のケアができるみたいです。

あと、設定的なのはそっちで管理しておいたほうが綺麗な気もします。

## RoutingにMiddlewareを適用
### 1. Middlewareをアプリに読み込ませる
Laravel11からは読み込ませ方が違うみたいですね。
こちらの記事参考にしてみてください。

https://zenn.dev/pcs_engineer/articles/laravel11-faq#app%2Fhttp%2Fmiddleware%E3%81%8C%E3%81%AA%E3%81%8F%E3%81%A6%E3%83%9F%E3%83%89%E3%83%AB%E3%82%A6%E3%82%A7%E3%82%A2%E3%81%AE%E8%A8%AD%E5%AE%9A%E3%82%92%E5%A4%89%E6%9B%B4%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84

```php:bootstrap/app.php
->withMiddleware(function (Middleware $middleware) {
    $middleware->append(App\Http\Middleware\BasicAuthMiddleware::class);
})
```

### 3. Routingに設定
```php
// `/`と`/about`にBasic認証を設定
Route::middleware(App\Http\Middleware\BasicAuthMiddleware::class)->group(function () {
    Route::get('/', function () {
        return view('welcome');
    });

    Route::get('/about', [AboutController::class, 'index'])->name('about.index');
});
```

構成についてもリポジトリに載せてますのでよしなにカスタマイズしてみてください。
## まとめ
いかがでしたか？
さほどテクニカルなことはやってませんので、すぐにでもできる内容かと思います。

以上、あざしたっ！

## 補足
Next.js(Vercel環境)でBasic認証をかけたい場合はこちら。

https://github.com/vercel/examples/tree/main/edge-middleware/basic-auth-password
Unity×cursorを導入した話

# はじめに
知り合いエンジニアからRiderをおすすめされ、1か月お試ししていた際に、XでClineが話題になりAIエディタを使ってみたくなりました。
その際にはClineとCursorで悩み、[こちらの記事](https://zenn.dev/robustonian/articles/cursor_vs_cline)を参考に私(エンジニア)はCursorを導入しました。
使ってみて便利だったので、その導入方法を残しておきます。

# 導入
## cursorのダウンロード
1. [公式サイト](https://www.cursor.com/ja)から本体をダウンロード
2. インストール完了後ログインを求められるので、アカウント作成＆ログイン
3. いろいろ設定が出ますが、とりあえずはOKで大丈夫...なはず(学習モードをOffにしたい場合はこの画面か[これ](https://zenn.dev/yasuorizumi/articles/e22aa74525d938)を参考にしてください)
## 必要なもののインストール
1. 画面右上のTogglePrimarySideBar(ctrl+B)をクリック
1. 画面左にいろいろ出てくるはず
1. 出てきたやつの中から■が4つ書かれているやつを押す
1. C#DevKitをインストール ![d1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4052059/a3e59156-6c62-4bcf-95be-6650a0a222fa.png)
1. Unity for Visual Studio Codeをインストール ![d2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4052059/d5d38f8f-84ad-4b00-b271-8a3399cc2dd8.png)
## Unity側の設定
1. Unityを開き、Window>PackageManagerを開く![u1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4052059/c3f3957c-918e-4967-8243-35d5a8ff82a5.png)
1. 左上に＋を押し、Add packagefrom git urlをクリック![u2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4052059/4f733d67-ded5-483d-bec7-637244265d9d.png)
1. [これ](https://github.com/boxqkrtm/com.unity.ide.cursor)[ https://github.com/boxqkrtm/com.unity.ide.cursor.git ]を入れる![u3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4052059/92bbf7bd-a52a-49a3-8dc3-4fc0472db4eb.png)
1. CursorEdittorが入ればOK![u4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4052059/8486532f-319e-4fa5-a770-5f6a816eb609.png)
1. Unityの画面からEdit>Preferencesを開く![u5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4052059/f2ac14e3-4bcc-4a6b-8f7a-b1251b23277b.png)
1. ExternalToolsを開きExternalScriptEditorからCursorを選択する![u6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4052059/431cd89f-d5ec-4d88-9488-00db408d1ef1.png)
# おわり
### 実際に使った感想
- 補完が強い　
    - Tabをポチポチしてるだけで形になる。
- 自動生成も使いやすい
    - やってほしいことを書くだけで80%ぐらいは正解して形で出力された。
- 今後これを使いこなす人たちと戦っていく必要がある
    - 今のうちから使う
    - AIができないことを把握し、その領域を伸ばすことが必要だと思う

1日使っただけで感動するレベルでした。今後ほかの機能も使っていきたい！
🔰GitHubと仲良くなれるおまじない

学生の時以来で久しぶりにGitHubを使うことになって、自分のためのメモを作成。
Gitのインストール方法とかは書きません！

# 👮開発の流れ
こんなんが多いと思う
クローンする
作業用ブランチを切る
作成したブランチに移動する
実装する
ステージングにあげる
リモートリポジトリにpushする
PR作成する
masterマージ(リリース)

# 👮gitコマンド
## git clone <URL>🧬
指定したリポジトリのコピーが作成される
あらかじめ作成した作業用ディレクトリ配下にリポジトリ名と同名のフォルダができあがる

## git status🧐
リポジトリの状態を見てみよう！
今いるリポジトリでどのファイルが変更/ステージングされているかな👀を確認できる
想定外に変更が発生していたり、していなかったりを確認できる

## git branch 🌿
自分の居場所がわかります
ブランチの一覧も確認できます

## git checkout <ブランチ名> 🔄
ブランチの切り替え
よく使う素敵なおまじないはこれ
`git checkout -b <新規ブランチ名>`
指定した名称でブランチ作成＆作成したブランチに移動できる

## git add➕
変更をステージングする
`-A`オプションでステージングできるファイルを全部指定できる

## git commit💾
ステージングされた材料をコミットする

## git push📤
コミットしたものをリモートリポジトリにアップロードする
これで自分が開発したものを他の人がGitHub上で見れるようになる👀

## git pull📥
リモートから最新の変更を取得して、ローカルのブランチに反映

## git fetch origin🚚
リモートリポジトリから最新の変更を取得するけど、ローカルにはマージしない

## git merge origin/master🔗
fetchで取り込んだ変更をローカルにマージする

# 👮コマンドを調べていて困ったこと
コマンドの意味もわからないくらいの雑魚エンジニアなのに、カタカナで説明しないでくれるー？って私の中のギャルが騒いでました

## マージってなに？
ニュアンス的になんか統合するんでしょ〜は分かる。
もう少し加えると、異なるブランチの変更を統合するプロセスのことを指している。
featureブランチで新しい機能を開発して、mainブランチに統合する場合とかにマージするよね。
別々の料理を一つの大皿に盛り付けるようなイメージ。🍲

## コミットってなに？
リポジトリ上に変更を保存するプロセスを指している。
ゲームを途中でセーブするような感じ。ちなみに私は一切ゲームしない⛪️
コミットという機能があることの利点としてはいくつかあって、
- いつ、誰が、どんな変更をしたか追跡できる
- 新しい機能を追加するコミット、バグを修正するコミットなど、変更の単位を管理できる
- コミットを遡って変更を復元できる

## ステージングってなに？
コミット前に変更を準備するプロセスを指している。
ステージングエリアにあるものだけをコミットできる。
ステージングという仕組みがあると
- コミットする変更対象を選択できるため、変更の柔軟性が上がる(いくつかファイルを変更したけど、とりあえずこれとこれだけコミットして様子みたいな〜とか) 
- 変更を整理していコミットできるため、プロジェクトの履歴を後から遡りやすい

ステージングってなんで必要なんや、って思ってたけどこのサイトを読んでメリットが分かった。

https://kray.jp/blog/expound-git-add/

# さいごに
学生の頃はプログラム書くの嫌いで、開発なんかやってやるかー！って思ってたのに、なんでかエンジニアになって個人開発にも手を出すように
個人開発だし、わざわざgitで管理しなくてよくないか？とゴリゴリやってたけど、一度知ると便利ですね、、、(気付くのが遅い)
MozillaBuild Packageを使うときはPATHからCygwinを外そう

自分メモ

Windows用の MozillaBuild Package はMSYS2環境上に構築されており、環境変数`PATH`に`Cygwin64`が含まれていると問題が生じる。

例えば `mozilla-builld/msys2/etc/bash.bashrc` には下記の行がある。

```
if [[ -n "$(command -v getent)" ]] && id -G | grep -q "$(getent -w group 'S-1-16-12288' | cut -d: -f2)"
```

MSYS2には`getent`は存在しないので実行されず済むわけだが、`PATH`に`Cygwin64`が含まれていると、MSYS2上でCygwinの`getent`が実行されてしまい、fatal errorとなる。

実害は無いけれども、エラーメッセージは見たくないので、下記の対策を取った。

*** mozilla-build/msys2/etc/profile.d/profile-mozilla.sh
```diff
  if test -n "$MOZILLABUILD"; then
    # $MOZILLABUILD should always be set by start-shell.bat.
    echo "MozillaBuild Install Directory: ${MOZILLABUILD}"
    mozillabuild_unix=$(cygpath -u "$MOZILLABUILD")
    mozillabuild_unix=${mozillabuild_unix%/} # Remove trailing slash
+   PATH=`echo -n $PATH | awk -v RS=: -v ORS=: '$0 !~ /.\/*[Cc]ygwin64/' | sed 's/:$//'` # Remove Cygwin64 from $PATH
    PATH="$mozillabuild_unix/bin:$mozillabuild_unix/kdiff3:$mozillabuild_unix/python3:$mozillabuild_unix/python3/Scripts:$PATH"
  
```

なお、このことは Matrix の Thunderbird Developers ルームで話したけれど、誰からもコメントはありませんでした :<

おまけ -- minttyではなくWindows Terminalを使う場合の例

```JSON
{
    "commandline": "%SystemRoot%\\System32\\cmd.exe /c C:\\mozilla-build\\start-shell.bat -where %HOME%\\source\\mozilla",
    "hidden": false,
    "icon": "C:\\mozilla-build\\msys2\\msys2.ico",
    "name": "MozillaBuild",
    "startingDirectory": "%HOME%\\source\\mozilla",
    "tabTitle": "MozillaBuild"
},
```

`%HOME%\\source\\mozilla` に`mozilla-central` がチェックアウトされている想定です。

環境変数 `USE_MINTTY` の値を `0` とするのをお忘れなく。
[VSCode] Paste Image ：キャプチャをVSCodeで即座に画像保存


## In a nutshell  
Paste Imageは，VSCode上でクリップボードの画像を直接貼り付けて保存できる拡張機能です．  
自動的に画像ファイルを生成し，Markdownなどにパスを挿入します．  
軽量でクロスプラットフォームに対応しており，設定も柔軟です．


## はじめに  
スクリーンショットを手軽に画像として保存し，ドキュメントに挿入できる方法を探していた．特に，以下のような条件を満たす必要があった．

- 必要なときのみ画像として保存できること(毎回ではなく任意タイミング)
- 保存先ディレクトリを状況に応じて変更可能なこと
- 操作が簡単であること

これらの条件を満たすVSCodeの拡張機能「Paste Image」を見つけたため，本記事で紹介する．このツールを利用すれば，Powerpointに張り付けて画像として保存する，PowerShellで作成した保存スクリプトを実行する必要もない．スニッピングツールとの相性が良く，VSCode上にクリップボードの画像を張り付けるだけで，保存と挿入の2つが高速に処理される．


## 予想される読み手

- VSCodeを利用して技術文書や手順書を作成している人
- スクリーンショットをドキュメントに手軽に挿入したいと考えている人
- MarkdownやAsciidoc形式で画像挿入の作業を効率化したい人


## 主な機能

- クリップボードの画像をPNGファイルとして自動保存
- Markdown / Asciidoc記法でパスを自動挿入
- 保存先ディレクトリやファイル名の柔軟なカスタマイズ
- 貼り付け時にファイルパスを確認するオプション(`pasteImage.showFilePathConfirmInputBox`)
- URLエンコードや挿入パターンのカスタマイズが可能


## デフォルト動作

- 保存先:現在編集中のファイルが存在するディレクトリ(`${currentFileDir}`)
- ファイル形式:PNG(固定)
- ファイル名:`Y-MM-DD-HH-mm-ss.png`(タイムスタンプ形式)
- 挿入形式:`![](./imagePath.png)`(Markdown)



## 応用的な設定

Paste Imageの設定は，`settings.json` に記述する．以下に代表的な設定例を示す．

### 画像をプロジェクト直下の `img` フォルダに保存する
```json
"pasteImage.path": "${projectRoot}/img",
"pasteImage.basePath": "${projectRoot}",
"pasteImage.prefix": "/img/"
```

### 記事タイトルをファイル名に追加する
```json
"pasteImage.namePrefix": "${currentFileNameWithoutExt}_",
"pasteImage.defaultName": "Y-MM-DD-HH-mm-ss"
```

### HTMLタグで画像を挿入する
```json
"pasteImage.insertPattern": "<img src='${imagePath}' />"
```


## よくある誤解:拡張子の変更について
Paste Imageは内部的にPNG形式で画像を保存しており，拡張子のみを `.jpg` や `.webp` に変更しても，実際の画像形式は変わらない．そのため，ビューアによっては画像を正常に表示できないことがある．他の形式(JPEG, WebPなど)へ変換したい場合は，別途ツールやスクリプトで変換を行う必要がある．

### Pythonによる自動変換例
```python
from PIL import Image
import os

folder = "./img"

for filename in os.listdir(folder):
    if filename.endswith(".png"):
        path = os.path.join(folder, filename)
        img = Image.open(path).convert("RGB")
        jpg_path = path.replace(".png", ".jpg")
        img.save(jpg_path, "JPEG")
        os.remove(path)
```



## セキュリティ・パフォーマンス・信頼性

### セキュリティ  
Paste Imageはローカル環境でのみ動作し，外部との通信は行わない．但し，OSSであるため，導入前にGitHubのソースコードを確認するのが望ましい．

### 信頼性  
活発にIssueやPRがやり取りされており，多くのユーザーにレビューされている．ただし，個人開発であるため，将来的な保守継続については不確定要素がある．

### パフォーマンス  
数MBのスクリーンショットでも即時に保存・挿入が可能であり，動作は極めて軽量．多数の画像を挿入してもエディタの操作に大きな影響は出ない．


## 導入方法
VSCode左側のサイドバーから「拡張機能(Extensions)」を開く．そこで「Paste Image」と入力し，最もダウンロード数が多いものを選択してインストールする．インストール後は，VSCodeを一度再起動することを推奨．スクリーンショットをコピーし，Markdownエディタ上で貼り付けることで自動的に画像が保存・挿入される．


## 運用上の注意点
- 拡張子を変更したい場合は別途変換処理が必要
- 外部サービスとの通信はないが，厳格なセキュリティポリシー下ではコード確認を求められることがある
- 長期的なメンテナンスが保証されていないため，業務用途では他手段との併用を検討すると良い


## Summary
- VSCode上で画像の貼り付けと保存を効率化する拡張機能  
- クリップボードの画像を自動で保存・Markdown挿入  
- 柔軟な保存パスやファイル名の設定が可能  
- PNG形式のみ対応，変換はスクリプトで対応可能  
- 軽量かつローカル完結でセキュリティリスクが低い  
- 個人開発のため，長期運用時は注意が必要


## References

- [Visual Studio Marketplace - Visual Studio Code > Other > Paste Image](https://marketplace.visualstudio.com/items?itemName=mushan.vscode-paste-image) 
- [GitHub Repository - mushanshitiancai  vscode-paste-image](https://github.com/mushanshitiancai/vscode-paste-image)
【Firebase】デプロイ時に「Firebase Hosting Setup Complete」の画面が出てきてしまう

## はじめに
課題のアプリを作成してFirebaseへデプロイを行った際に、コマンド上ではデプロイが成功していたものの実際のURLでは以下のような画面が出現しました。

![Welcome.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4021196/c94c49e2-9ad1-4500-ab1e-6dce3af413b1.png)

この画面が出てくる現象と原因についての備忘録記事です。

## 考えられる原因
### ①`firebase init`での初期化時にビルド先として`dist`が登録されていない
firebaseを使う際には初回に`firebase init`による初期化処理が必要になります。その中の質問文で以下のようなものが出てきます。
```
What do you want to use as your public directory? 
```
この質問はfirebaseでのデプロイとして使用したいディレクトリを聞かれています。
事前に`npm run build`を行っていた場合は`dist`のフォルダが作成されており、そのディレクトリをデプロイ対象とすることでデプロイを行いたいことになります。

ですが、上記の質問で`dist`以外のものを登録していると正しく反応できずに*Firebase Hosting Setup Complete*の画面が出てしまいます。

### ②既存のdistファイルを上書きしてしまっていた
仮にdistに`index.html`が入っている状態で`firebase init`を行った場合、下記の質問が出てくることがあります。
```
File dist\index.html already exists. Overwrite?
```
この質問は「すでに`index.html`が存在します。上書きしますか？」と言う質問なので、Yesを選択すると*Firebase Hosting Setup Complete*が入ったHTMLに上書きされてしまいます。

## 対策
### ①事前に`npm run build`をして`dist`フォルダを作成する
firebaseでのデプロイ時に`What do you want to use as your public directory?`で`dist`を入力するにはあらかじめ`dist`フォルダを作成する必要があります。
buildを行って`dist`フォルダを作成しておきましょう。

### ②jsonの記述を`dist`に対応するように修正する
今回のfirebaseの処理を行うためのjsonファイルとして`firebase.json`がありました。
このファイルの`hosting`の`public`が`dist`になっていなかったので`dist`に変更しました。
```json
{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
```

### ③どうしても直らない場合は再度`firebase init`する
ここまでの過程を対応しても直らない場合は再度firebaseを初期化すると直る場合があります。
一度`firebase init`し、設定を再入力してみましょう。

## 参考資料

https://zenn.dev/conecone/articles/058755b87fec41

https://qiita.com/bisketoriba/items/0b863cefdfcac01e2123

https://qiita.com/kaitoland/items/36a9b4e00b73945a70b9

https://maitakeramen.hatenablog.com/entry/2019/04/15/180416
【CSSの単位まとめ】 px, em , remなどの絶対、相対長さ単位

フォームの高さが合わない、、、だと、、、、


あまりCSSを利用しないのでデフォルトのまま利用をしていた。

そして、ある入力フォームで他のフォームとの高さの違いが出た。

それを微調整する時に出てきた単位

それが
**em,rem**だった。

全く知らなかったのでこの際、単位ってどんだけあるのか探る。


## 1. CSS における単位の基本
CSS で要素のサイズやフォントサイズなどを指定するとき、  
必ず「どの基準でどのくらいの長さを示すのか」を指定する必要がある。  
これが **“単位 (Unit)”**。分けると2種類。それが下記になる。

1. **絶対長さ単位 (Absolute length units)**  
   物理的な長さと対応している（と定義されている）単位。  
   実際の表示はディスプレイ解像度やブラウザが内部的に持つ換算ルールによって  
   変化する

2. **相対長さ単位 (Relative length units)**  
   親要素やビューポートのサイズなど別の基準に対して相対的にサイズが決まる単位



## 2. 絶対長さ単位

### px
- **意味**: 
    - ピクセル (pixel)  
- **特徴**:  
  - 他の絶対単位に比べて、**Web 制作では最もよく使われる**
  - 一般的に1 ピクセル = 物理画素 1 つ
  - サイズが固定されているため、ユーザーがデフォルトフォントサイズを変更しても  
    そのままの大きさを保ちやすい。反面、**拡大縮小やアクセシビリティの面**では  
    柔軟性が下がる

### in
- **意味**:
    - インチ (inch)  
- **特徴**:  
  - 1in = 2.54cm = 96px
  - 紙媒体のサイズ指定などで実際の物理寸法で用いられる 
    **Web 画面上ではほとんど使われない** 単位

### cm / mm
- **意味**:
    - センチメートル (centimeter) / ミリメートル (millimeter)  
- **特徴**:  
  - 1cm = 10mm 
  - 1cm = 37.8px
  - 1mm = 3.78px
  - 印刷を前提としたレイアウト（プリントや PDF）で使われる 
    ブラウザ上の画面表示ではあまり用いられない

### pt / pc
- **意味**:
    - ポイント (point) / パイカ (pica)  
- **特徴**:  
  - 1pt = 1/72in (約 0.3527mm)  
  - 1pc = 12pt  
  - **印刷業界**でよく使われる単位。印刷用や PDF 出力の際には有効。 
    **Web ページとしてはあまり使用されない** ことが多い

---

## 3. 相対長さ単位

### em
- **意味**:
    - **親要素 (または自身) のフォントサイズ** に対する相対値  
  - “em” の挙動としては  
    「親要素のフォントサイズ × 何倍か」を示す
- **特徴**:  
  - font-sizeを 1em と書いた場合、親要素のフォントサイズを 100% として参照
      - 例: 親要素が font-size: 16px; → 子要素で font-size: 1.5em; → 24px 相当
  - ネスト（他の要素の中に含まれる入れ子状態な構造）が深いと計算が複雑になりやすい

### rem
- **意味**:
    - **ルート要素 (html) のフォントサイズ** を基準にした相対単位  
  - “rem” は “root em” の略称
- **特徴**:  
  - ルート要素（html）に指定した font-size に対して相対値を決める
      - 例: html { font-size: 16px; } → font-size: 2rem; は常に 32px
  - ネストの影響を受けず一貫性がある。**全体の統一管理**に便利

### %
- **意味**:
    - **親要素に対するパーセント** 指定
- **特徴**:  
  - 幅（width）を % で指定すると、親要素の幅に対して相対的に決まる
  - フォントサイズを % で指定した場合、親要素のフォントサイズを基準にする
    （事実上、em に近い）  
  - レスポンシブデザインで親要素の大きさに合わせて伸縮するレイアウトに有効

### vw / vh / vmin / vmax
- **意味**:  
  - vw: ビューポートの幅 (viewport width) に対する 1%  
  - vh: ビューポートの高さ (viewport height) に対する 1%  
  - vmin: vw と vh のうち、**より小さい** 値  
  - vmax: vw と vh のうち、**より大きい** 値  
- **特徴**:  
  - **ビューポート** = ブラウザの表示領域  
      - 例: width: 50vw; は、画面幅の 50% の幅を指定する
  - フルスクリーンの背景や、画面サイズに合わせた可変レイアウトで便利

### その他の相対単位（ex, ch など）
- **ex**  
  - 現在のフォントにおける小文字の “x” の高さ（x-height）を基準とする  
  - フォントによって異なるので扱いが難しい  
- **ch**  
  - 数字の “0” の幅を基準とする（glyph width）
  - 等幅フォントであればある程度信頼できる。がフォントによる


**実際の Web 制作** にはレスポンシブやアクセシビリティを意識する必要があるから相対単位を中心に制作がメインになってくるわけだね。きっと。
【備忘録】WindowsでCursor × Figma MCPを設定のエラー解決（Client closedのエラー）

閲覧頂き、ありがとうございます🙇

私の会社ではコーディングの自動化(`Design To Code`)による、
業務改善を行っています！

その中でWindows環境に、
AIエディタの「`Cursor`」と 「`Figma MCP`」の連携をするときに、
うまく接続できませんでした。

その解決までの流れを備忘録として書きます📝
同じところで苦戦した方がいれば`いいね`押してってください🫶

# 前提🧑‍💻

* まっさらなパソコンにCursorをインストールしたのみ！

# 利用設定〜発生エラー🥺

* 以下の記事を参考に設定を行いました！
    * [Zenn - 【Cursor】FigmaにアクセスしてUIコードを自動生成！](https://zenn.dev/oke331/articles/97d5de75f06fb3)
* その結果以下のように `Client closed` でエラーとなっている🔴
![スクリーンショット 2025-04-03 23.58.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130422/b3e92e15-7aac-445f-ba02-512e1fb58f91.png)

# 解決手順📝

Cursor内でエラー調査も行っていきました！

## 解決①： Node.js入ってますか？

:::note warn
`Framelink Figma MCP`のコマンドは`npx`を使っているため`Node.js`が必要なため対応
:::

* 一旦以下からインストールを行う
    * https://nodejs.org/ja

### → エラー変わらず🔴

## 解決②： PowerShellのスクリプト実行を制限していませんか？

:::note warn
デフォルトではPowerShellの`スクリプト実行が制限`されている模様のため、  
  以下で確認・設定変更を行う！
:::

* PowerShellを`管理者として実行`する
* 現在のセキュリティポリシーを確認 → `Restricted(制限付き)`

```
$ Get-ExecutionPolicy
Restricted
```

* スクリプトの実行を許可を行う

```
$ Set-ExecutionPolicy Renotesigned
  → 確認メッセージが表示されたら「Y」を入力
```

> 【この設定について@Cursor】
> この設定変更は、署名された（頼できる）スクリプトの実行を許可しつつ、セキュリティも維持するバランスの取れた設定です。ローカルで作成したスクリプトは無条件で実行でき、インターネットからダウンロードしたスクリプトは子署名が必要となります

### → 無事接続完了🟢

![スクリーンショット 2025-04-04 0.15.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130422/3c969b7c-631e-4235-8e03-ee911416ed98.png)

# 最後に🍵

自分は仕事・プライベート共にMacなので、
開発環境構築にそこまで苦戦しない印象がありますが、
Windowsではよくつまづくので苦手意識がありました😭
(過去にDocker入れるだけでブルースクリーンにしちゃったりw)

ただ今回の成功体験をもとに自信がついたので、
挑戦しつつ・MacとWindowsの二刀流でできるように頑張っていきたいと思います⚾️

そして`Design To Code`がフロントエンドに技術革新をもたらしていると思うので、
そこで得た知見はまたアウトプットしていければと思います🖌️
SQL #2【SELECT構文 / WHERE句】

## SELECT構文とは
テーブルからデータを取得したいときに使用します！
具体的な使い方について、以下のテーブルを使用して解説します。

**Membersテーブル**
|id|name|age|home|
|---|---|---|---|
|1|Yamamoto|20|Tokyo|
|2|Sato|25|Osaka|
|3|Yamada|16|Tokyo|
|4|Tanaka|35|Nagoya|
|5|Kato|42|Osaka|


## 使い方
### 基本的な構文
```sql
SELECT カラム名 FROM テーブル名;
```

### 1つのカラムを指定する
各メンバーの名前のデータを探すには...
```sql
SELECT name FROM Members;
```
|name|
|---|
|Yamamoto|
|Sato|
|Yamada|
|Tanaka|
|Kato|


### 複数のカラムを指定する
**,** で区切ることで複数指定をする。
各メンバーの名前と出身のデータを探すには...
```sql
SELECT name,age from FROM Members;
```
|name|age|
|---|---|
|Yamamoto|20|
|Sato|25|
|Yamada|16|
|Tanaka|35|
|Kato|42|


### 全てのカラムを指定する
```sql
SELECT * FROM Members;
```
|id|name|age|home|
|---|---|---|---|
|1|Yamamoto|20|Tokyo|
|2|Sato|25|Osaka|
|3|Yamada|16|Tokyo|
|4|Tanaka|35|Nagoya|
|5|Kato|42|Osaka|


## WHERE句とは
データの検索条件を指定して、条件に一致したデータを取得できる。
### 基本的な構文
```sql
SELECT カラム名 FROM テーブル名 WHERE 条件
```

### idが3のメンバーを取得する
```sql
SELECT * FROM Members WHERE id = 3;
```
|id|name|age|home|
|---|---|---|---|
|3|Yamada|16|Tokyo|

### 年齢が25歳以上のメンバーを取得する
```sql
SELECT * FROM Members WHERE age >= 25;
```
|id|name|age|home|
|---|---|---|---|
|2|Sato|25|Osaka|
|4|Tanaka|35|Nagoya|
|5|Kato|42|Osaka|

### 年齢が20〜40歳のメンバーを取得する
```sql
SELECT * FROM Members WHERE age BETWEEN 20 AND 40;
```
|id|name|age|home|
|---|---|---|---|
|1|Yamamoto|20|Tokyo|
|2|Sato|25|Osaka|
|4|Tanaka|35|Nagoya|

## まとめ
:::note info
- データの取得は**SELECT構文**を使う
- 条件を指定する場合は、**WHERE句**を使う
- WHERE句の基本的な検索方法の1つとして、**演算子**を利用する
:::
ShotcutのsubtitlesをPythonで読み込む

# 何をしたいのか
+ Shotcutをゆっくり実況ソフトのように使いたい。
+ 具体的にはVOICEVOXと連携させたい。
+ Shotcutのサブタイトルを音声変換できたらそれっぽくなりそう
+ Shotcutで作られるmltファイルは中身はxmlファイルなのでPythonで取り扱える。
+ サブタイトルを抜き出し→VOICEBOXへ入力→mltファイルに動画のパスを書き込みまでやりたい。

# Subtitleとは
赤枠のところです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242971/455a91bf-06dc-4341-9697-9e429ed9ef42.png)

# mltファイル（xmlファイル）では
こんな感じ
```xml
<?xml version="1.0" standalone="no"?>
<mlt LC_NUMERIC="C" version="7.30.0" title="Shotcut version 25.01.25" producer="main_bin">
  <profile description="PAL 4:3 DV or DVD" width="1920" height="1080" progressive="1" sample_aspect_num="1" sample_aspect_den="1" display_aspect_num="16" display_aspect_den="9" frame_rate_num="60000" frame_rate_den="1001" colorspace="709"/>
  <playlist id="main_bin">
    <property name="xml_retain">1</property>
  </playlist>
  ～～～～～～～～～～～～～～～～～～
  ～～～～～～～～省略～～～～～～～～
  ～～～～～～～～～～～～～～～～～～
 <filter id="filter0">
      <property name="feed">Subtitle Track 1</property>
      <property name="lang">jpn</property>
      <property name="mlt_service">subtitle_feed</property>
      <property name="shotcut:hidden">1</property>
      <property name="text">1
00:00:00,000 --&gt; 00:00:02,000
これはテストです

2
00:00:03,336 --&gt; 00:00:04,904
テストだよ

</property>
    </filter>
  </tractor>
</mlt>
```
# Pythonコード

```python
import xml.etree.ElementTree as ET

def parse_subtitle_text(subtitle_text):
    lines = subtitle_text.strip().split("\n\n")
    results = []
    for line in lines:
        parts = line.strip().split("\n")
        if len(parts) >= 3:
            id_ = int(parts[0].strip())
            time_range = parts[1].strip()
            text = "\n".join(parts[2:]).strip()

            start, end = time_range.split("-->")
            start = start.strip()
            end = end.strip()

            results.append({
                "id": id_,
                "start": start,
                "end": end,
                "text": text
            })
    return results


def get_text_property_content(root, filter_id):
    filter_element = root.find(f".//filter[@id='{filter_id}']")
    if filter_element is not None:
        text_property = filter_element.find("./property[@name='text']")
        if text_property is not None:
            return text_property.text.strip() if text_property.text else None
    return None


# XMLファイルの読み込み例
path = r"test_.mlt"
tree = ET.parse(path)
root = tree.getroot()
filter_id = "filter0" #必ずfilter0ではない
print(parse_subtitle_text(get_text_property_content(root, filter_id)))
#[{'id': 1, 'start': '00:00:00,000', 'end': '00:00:02,000', 'text': 'これはテストです'}, 
# {'id': 2, 'start': '00:00:03,336', 'end': '00:00:04,904', 'text': 'テストだよ'}]
```

これをVOICEVOXに渡せば音声はできる。サブタイトル追加位置もstartとendでわかる。xmlファイルに動画のパスの追加までしたかたっがとりあえずここまで。
FreeCADのトポロジー最適化をGeminiが10倍−15倍高速化した話 その4(結果編)  終わり

一つ前の記事

https://qiita.com/___monta___/items/81f43189107db45a2705

# 結果

さて、実際に実行した際の細かな処理時間を見ていきましょう。
なぜかPlottingも高速化されていますね... 全くもって謎です。（脳みそはGemini2.5Proです）

期待通り、Sensitivity Filteringが劇的に改善されています！

|	項目	|	修正前(秒)	|	改善後(秒)	|
|:-:|:-:|:-:|
|	CalculiX Execution	|	49.76	|	50.07	|
|	Sensitivity Filtering	|	921.41	|	31.30	|
|	Plotting	|	333.76	|	9.56	|
|	Result Export (CSV/VTK)	|	165.29	|	3.24	|
|	Result Import/FI Calc	|	101.08	|	1.59	|
|	Iteration Result Export (FRD/INP)	|	0.00	|	0.84	|
|	Write INP	|	36.79	|	0.74	|
|	Filter Preparation	|	44.20	|	0.35	|
|	Sensitivity Calculation	|	10.78	|	0.27	|
|	Element Switching	|	18.28	|	0.26	|
|	Mean Value Calculation	|	5.54	|	0.12	|
|	Volume/CG Calculation	|	5.67	|	0.12	|
|	Append VTK States	|	3.99	|	0.04	|
|	Iteration Cleanup	|	0.00	|	0.03	|
|	Mesh Importing	|	0.84	|	0.01	|
|	Element State Initialization	|	0.02	|	0.00	|
|	Final Cleanup	|	0.04	|	0.00	|
|	合計時間	|	1697.45	|	98.55	|


# 改善後のコード

普段一切Githubを使わないので、これまたGithubCopilotに教えてもらってファイルをPushしました。
何か不具合あったら... あなたのLLMに聞いてください(今回、私は回答できません！！）
時間があったら修正箇所まじめに眺めようかな

https://github.com/84monta/beso