OmniAICreator/Qiita-1.07M huggingface dataset:
Power Automate で Forms の結果を Teams に送信

今回 Power Automate を利用して、Forms の結果を取得するための簡単にフローを作成いたしました。

(1)「新しい応答が送信されるとき」と「応答の詳細を取得する」のフォーム ID に 作成した Forms の URL に入っている ID 以降をコピペします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4023855/20464518-7b7f-4e45-b6a9-3be6786c1fda.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4023855/f0dd82a5-17c8-4282-aa52-a6555139a766.png)

(2)作成の中に、Forms の回答が保存される Excel の URL を以下の形で入れることによってハイパーリンクで送信を行えるようにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4023855/87792817-bddb-4b69-abe3-9bc5687a73c5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4023855/8556607e-f4f5-44f6-a134-8835af4b65a7.png)

(3)最後に送信したい投稿場所や作成した Forms の回答のうち何を Teams に入れるかを決めて記載し
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4023855/b19f639a-460e-4792-8f79-a65a97f87585.png)
掴もうぜ！システムの全体像

## はじめに

💭「気づいたらAPI書いてるけど、これ誰が呼んでんの？」  
💭「React側で何やってんの？」  
💭「DB？あるの？どこに？」  

という気持ちになりがちの**途中からプロジェクトに参加した人**へ書きました。
「何がどこにあるか分からない」という方向けに、3層システムの構造と役割、そしてチェックポイントを整理しました。

---

## 🔍 3層構成をわかるようにするには？

よくあるWebアプリケーションは、以下の登場人物とその間を繋ぐ通信を追うことで全体像が見えてくるような気がします

1. **クライアント**（ユーザー）：アプリを操作する起点
2. **フロントエンド**：UIを表示し、APIと通信する
3. **Webサーバ（バックエンド）**：処理を行い、DBと連携する
4. **データベース**：アプリのデータを保存・取得する

---

## ✅ リクエストの流れとチェックポイント（全体構成を掴むために）

| 階層（通信ステップ） | 役割 | 全体把握のためのチェックポイント |
|----------------------|------|------------------------------|
| クライアント（ユーザー） | アプリを操作する起点 | - どんな操作が起点になる？（例：検索、投稿）<br>- どの端末・ブラウザが対象か？<br>- 操作がどのイベントとしてフロントに伝わるか？ |
| クライアント → フロントエンド | UIを取得するリクエスト（HTML, JSなど） | - どこでホストされてる？（CDN, Nginx, S3 etc）<br>- HTTPSでの配信か？<br>- HTML/CSS/JSなどの構成はどうなってる？ |
| フロントエンド | ユーザー操作をAPIに橋渡し／UI描画 | - どの技術スタック？（React, Vueなど）<br>- SPA or SSR？<br>- 状態管理の仕組みは？<br>- どのAPIと通信してる？ |
| フロントエンド → Webサーバ（API） | API呼び出し（fetch, axiosなど） | - リクエスト形式（REST/GraphQL）<br>- どのタイミングでどのAPIを叩いている？<br>- エンドポイントの構成と役割の関係性 |
| Webサーバ（API） | ロジック処理／DBとの連携 | - 使用フレームワーク（Express, Spring Bootなど）<br>- 各エンドポイントの役割<br>- バックエンドが何を処理し、何を返すのか？ |
| Webサーバ（API） → データベース | データの取得・保存リクエスト | - どのテーブル or コレクションにアクセスしてる？<br>- ORM使ってる？生SQL？<br>- どんな条件で検索・更新してる？ |
| データベース | 永続的なデータの保存 | - データ構造（テーブル設計やスキーマ）<br>- どのデータがいつ更新／参照されるか？<br>- 外部と連携する部分はあるか？ |

---

## 🛠️ 実際にやるべきこと（例）

- APIを触るとき：「このエンドポイント、フロントからどう呼ばれてる？」  
- DBを読むとき：「どのテーブルがどんなロジックから使われてる？」  
- 状態管理を見るとき：「UIのどの操作が、どのAPIにつながってる？」

---

## ✨ まとめ

頑張ろう。
OpenSCAD×LLMをやってみる


## 意外といけそう（後日追記予定）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498912/98cc06c5-5a19-452e-87d8-9d27e685c775.png)



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498912/4339c965-3531-4c51-ab77-8f1667d6b175.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498912/e21beb8b-82e9-4c7e-9a54-8c18b77732de.png)




## 参考
https://qiita.com/iwtn/items/b984519ad24ac3c7d7d5

https://openscad.org/
pre-commitでコード整形と静的解析を自動化

# はじめに

開発を進める上で、コードの品質を保ちながら作業効率を向上させるために、コードの整形や静的解析の自動化は非常に有用です。今回は、[pre-commit](https://pre-commit.com/)を利用して、Pythonプロジェクトにおけるコード整形ツールや静的解析ツール（**black**、**isort**、**flake8**）を導入する方法について解説します。

pre-commitは、Gitのコミット時に自動的に各種チェックや整形処理を実行できる仕組みです。これにより、コードスタイルを一定に保ち、不要な差分が混入することを防ぐことが可能となります。

# pre-commitとは？

pre-commitは、Gitリポジトリにフックを設定して、コミット前に自動的にコードのフォーマットやチェックを行うツールです。  
- **コード整形**: blackを用いてPEP8に準拠した自動整形を実行  
- **インポート整理**: isortでインポート文を自動的にソート  
- **静的解析**: flake8でコードの文法やスタイル、潜在的なバグを検出

これにより、開発者は手動での整形作業やチェックの手間を省くことができ、一貫したコード品質を維持できます。

# 使用するツール

今回の記事では以下のツールをpre-commitのフックとして導入します。

- **black**  
  Pythonコードのフォーマッタ。自動で整形してくれるため、スタイルの議論をなくすことができます。
  
- **isort**  
  インポート文の順序を自動的に整理し、読みやすさと一貫性を実現します。  
  ※blackとの連携を考慮して、引数に `--profile black` を指定します。

- **flake8**  
  静的解析ツールです。pep8、pyflakesなどを内部で利用し、コードの問題点を洗い出します。  
  ※blackとの相性を合わせるために、`flake8-black` の追加依存関係を指定しています。

# pre-commit設定ファイルの内容

以下は、設定ファイル（例：`.pre-commit-config.yaml`）の一例です。

```yaml
# 実行コマンド
# pre-commit run --all-files

repos:
  - repo: https://github.com/psf/black
    rev: 23.3.0
    hooks:
      - id: black
        language_version: python3

  - repo: https://github.com/pre-commit/mirrors-isort
    rev: v5.10.1
    hooks:
      - id: isort
        args: ['--profile', 'black']

  - repo: https://github.com/pycqa/flake8
    rev: 5.0.4
    hooks:
      - id: flake8
        additional_dependencies: ['flake8-black']
```

# pre-commitの導入と使用方法

## pre-commitのインストール

まず、プロジェクトのルートディレクトリに移動し、以下のコマンドを実行してpre-commitをインストールします。

```bash
pip install pre-commit
```

## Gitフックのインストール
次に、以下のコマンドを実行してGitフックをインストールします。
```bash
pre-commit install
```
これにより、以後のコミット時に自動でpre-commitが実行されるようになります。

## 全ファイルに対する手動実行
初回導入時や既存コード全体に対して整形やチェックを実行する場合は、以下のコマンドを利用します。
```bash
pre-commit run --all-files
```
「GitHub」に初めてpushしてみた！つまづいたポイントと解決法

## はじめに
こんにちは。プログラミング初心者のSoraです。今回はGitHubにコードをアップ(push)してみましたので、
・手順
・つまずいたポイント
・解決法
をまとめてみました！

## やったこと
・GitHubでリポジトリを作成
・ターミナルgit initから一連の流れを実行
・無事、GitHubにコードが表示された！

## 使用環境
・Mac mini（M4）
・VSCode
・Git

## 手順
```bash:bash
git init
git add.
git comit -m"first commit"
git remote add origin https://github.com/ユーザー名/リポジトリ名.git
git push -u origin main
```

## つまづいたポイントと解決法
### ①fatal: remote origin already exists. と出た
→すでに”remmote add”していたので、"git remote remove origin"で一度削除してやり直しました。

### ②push時に「パスワードを入力」と言われた
→GitHubでは普通のパスワードは使えない！「トークン」を使いました。

## 学んだこと
・Gitの仕組みが少し理解できた
・push前に"commit"を忘れると怒られる💦

## 次、学びたいこと
・「トークン」について

## 終わりに
初めてのpushで不安でしたがなんとなくイメージできたので、繰り返し取り組んで慣れていきたい。
誤認やアドバイスなどありましたらコメントくださいませ。

https://github.com/soragraming/portfolio-app
Slack MCP Serverでプライベートチャンネルも読み込めるようにする

# 概要

https://github.com/modelcontextprotocol/servers/tree/main/src/slack

Slack APIに対応したMCPサーバーが公開されており、これはパブリックチャンネルの概要やメッセージ履歴にClaudeのデスクトップアプリなどのMCPクライアントからアクセスすることができるものになります。しかし、既存のままだとプライベートチャンネルの読み込みに対応していません。
この記事では、プライベートチャンネルの読み込みにも対応する方法について書いてあります。
※MCPについての詳細な説明は省略します

:::note warn
警告
プライベートチャンネルの情報を読み込ませることになるため、ワークスペースの管理者などに確認を取ってから導入することをおすすめします。
:::

# Slackアプリケーションの作成
まずは下記を参考にSlackアプリケーションを作成します。

https://github.com/modelcontextprotocol/servers/tree/main/src/slack#setup

今回必要な権限は以下のとおりで、プライベートチャンネルに関係するgroupsの権限も追加してあげます。
`channels:history`、`channels:read`、`chat:write`、`reactions:write`、`users:read`、`groups:history`、`groups:read`


# MCPサーバーの事前準備
MCPサーバーに直接変更を加えるため、下記リポジトリをダウンロードしておいてください。
https://github.com/modelcontextprotocol/servers

### プライベートチャンネルも読み込めるように修正
Slack APIに投げるパラメータが現状だと `"public_channel"` のみなので、ローカル環境で `"private_channel"` も追記してあげます。
https://github.com/modelcontextprotocol/servers/blob/fc5e6f4b68ec8fded6a6873098b6790b0294cf43/src/slack/index.ts#L225
```diff_typescript
- types: "public_channel",
+ types: "public_channel,private_channel",
```

### Dockerでイメージ作成
プロジェクトのルートで下記コマンドを実行してDockerイメージをビルドします。
```
$ docker build -t mcp/slack -f src/slack/Dockerfile .
```

# MCPクライアントでの設定（Claudeデスクトップアプリ）

https://github.com/modelcontextprotocol/servers/tree/main/src/slack#docker

上記を参考にして`claude_desktop_config.json`に設定を追加してあげます。

```json
{
  "mcpServers": {
    "slack": {
      "command": "docker",
      "args": [
        "run",
        "-i",
        "--rm",
        "-e",
        "SLACK_BOT_TOKEN",
        "-e",
        "SLACK_TEAM_ID",
        "mcp/slack"
      ],
      "env": {
        "SLACK_BOT_TOKEN": "xoxb-your-bot-token",
        "SLACK_TEAM_ID": "T01234567"
      }
    }
  }
}
```

# 実際に使ってみる
プライベートチャンネルにSlackアプリを招待したあとに、プロンプトで「{プライベートチャンネル名}の概要を要約してください」とでも聞いてみると無事アクセスできることが確認できるかと思います。
VPN接続を介してAWSへ接続ができなかった原因

## 現象
VPN接続でオンプレの端末からAWS環境へ接続ができない

## やったこと
・AWS側のセキュリティグループを確認
・オンプレ側に静的ルートを指定する

## 解決策
VPN接続業者にルーターのデフォルトゲートウェイを聞いてオンプレ側にその値を設定する→接続できた
PythonのJupiter notebookでの出力

【PythonとJupiter notebook】


▼グラフに数値を出力する
```
import numpy as np

np.random.seed(シード値)
y = np.random.randint(整数値の下限, 整数値の上限, 整数の個数)
print(y)

#例
import numpy as np

np.random.seed

y = np.random.randint(1,100,10) #10は10個の整数の値が並ぶ
print(y)


#yの値をグラフで描画する
import numpy as np

np.random.seed

x = np.arange(10) #0~9までの１０個の数値でできた配列を代入する
y = np.random.randint(1,100,10) #10は10個の整数の値が並ぶ
print(x)
print(y)

#出力結果
[0 1 2 3 4 5 6 7 8 9]
[96 38 81 59 88 19 14 13 71 90]
```

▼上記の出力結果をグラフで描画する
```
import matplotlib.pyplot as plt

plt.plot(x,y)
plt.show()
[<matplotlib.lines.Line2D at 0x7f922af5f668>]

```

▽二次元配列を一次元配列にする
```
import numpy as np

array_2d = np.array([[1,2,3], [4,5,6]])
array_1d = array_2d.ravel()

print(array_1d.shape)
print(array_1d)
```

▽scikit learnで学習と予測
```
import cv2
import numpy as np
from matplotlib import pyplot as plt
import pandas as pd

targets_data = pd.read_csv['y_classified.csv'] #csvを読み込む
print(targets_data['Kirishima'])

#出力結果
0     1
1     0
2     1
3     0
4     1
     ..
95    1
96    0
97    1
98    1
99    1
Name: Kirishima, Length: 100, dtype: int64

長さ１００のデータが読み込めていることがわかる
```


▽特徴ベクトルとして画像そのままのピクセル値を利用してみる
```
images = []
for in range(100):#images関数にグレースケールを読み込む

for i in range(100):
    file = ('images/%03d.png' % (i))
    img = cv2.imread(file,cv2.IMREAD_GRAYSCALE)
    images.append(img)
```


▽次に読み込んだ画像のピクセル値を１次元配列にしてimagesデータに保存していく

```
images_data = np.empty((100,len(images[0].ravel())),int)
for i in range(100):
images_data[i] = np.array([images[i].ravel()])

#imagesデータのシェイプを表示してみる
print(images_data.shape)

(100, 163125)#画像の特徴ベクトルとして長さ１６万の配列が１００こ保存された
```


【感想】
なるほど、わからん…。

学習させる際はうまく分類させることができるかのテストも必要。
【シリーズすごいぞiQ-F】「いわゆる構造化プログラミング」への道　4回目の記事～FBの分類とデータ構造について

## つづきを始める前に
[「いわゆる構造化プログラミング」への道　3回目の記事](https://qiita.com/fujiteruo/items/9d99f706af3b231d8d4d)
からのつづきになります。

前回はデータの構造化としてリンクリフレッシュデバイスを構造体によってマッピングする手法を紹介しました。

この呼び方自体合っているのかというのは他に出典が無いので微妙なのですが、イメージを掴んでいただけたら幸いです。

今回はファンクションブロック（FB）の大まかな分類と、FBへの入出力データの構造を簡単に考察して、前回の手法がどう結びつくのかといった話を展開します。

説明というよりはこうやったらこうなったという結果論的な話にはなります。

## FBを規模によって分類する
FBの規模感について共通理解が無いと話が通じないと思うので、ここではFBを規模によって3つに分けます。
### 1. ミニマルFB
汎用ファンクションブロックのように入出力が片手で足りる程度の単機能FBをここではミニマルFBと名付けます

### 2. モジュールFB
ミニマルFBを複数個含むFBをモジュールFBと名付けます
警報付きのサーモスタットとかそんなイメージになります

### 3. コントローラFB
下記の特徴を持つFBをコントローラFBと名付けます
+ 多数の設定値を入力する
    + 構造体で引き渡す
+ 他のコントローラFBとの連携を取る
+ 外部のI/Oを制御する
+ 多数の状態値を返す
    + 構造体で引き渡す
+ 基本的には内部にミニマルFBやモジュールFBを持ちます

コントローラFBは制御プログラムを機器毎や工程毎にまとめ、情報を外部I/O側とHMI（GOT）やフィールドネットワーク側に切り分ける役割を持ったファンクションブロックといえるでしょう。

## コントローラFBのデータ構造について
フィールドネットワークのローカル局側にコントローラFBを配置することを考えます。

そのとき、コントローラFBに入出力するデータについて下記の3種類に分けて取り扱うと整理が簡単になりました。

### 1. 下位データ
+ 主に外部I/OをコントローラFBに接続する
    + 汎用性を考えると外部I/Oはグローバルラベルに割り付ける

### 2. 同位データ
+ フィールドネットワークのローカル局内で発生した情報をコントローラFBへ入力する
+ コントローラFBからの信号はローカルプログラム内であれば公開ラベルなども使用して行う
+ コントローラFB同士のインターロックを行う信号やローカル通信で取得したデータを入力する
+ コントローラFB内で保持したい長時間タイマーなどをIN-OUT型でデバイスと結びつける

### 3. 上位データ
+ フィールドネットワークやHMI（GOT）の表示データ
+ フィールドネットワークから流れてきたデータをコントローラFBへ構造体で入力する
+ コントローラFBからのアンサーを上位ネットワークへ構造体で返送する
    + 同位データ、下位データのうち、上位返送するものをここに乗せて返送する

要するに、コントローラFBはフィールドネットワークやHMI（GOT）との入出力を行ために専用のデータ列を用意するという部分が重要になります。

これだけ書くとコントローラFB内でデータを分類して取り扱うメリットが分かりにくいですが、例えばこのようなデータ処理をしなかったらどうなるか。
そうすると、下位データにあたる外部I/Oの状態をフィールドネットワークに返そうと思うとコントローラFBの外でリンクデバイスへの転送処理を行うプログラムが必要になり、プログラムもリンクデバイスのデータ構造も複雑になってきます。

## データ構造を図示する
前回と今回の記事で扱ったデータ構造を図示すると下図のように示せます。
注）マスター局部のマスター局内で扱う部分はリンクリフレッシュには乗らないのですが、実際のプログラムではリンクリフレッシュ部とセットでデバイス範囲をマッピングしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3765338/c8c78d67-251e-4933-94c7-71af2b42d0b3.png)

+ HMI(GOT)部について
    + FXでのプログラムだとこの部分ではデバイスを扱う事になると思います
    + この部分で扱うデバイスは構造体型ラベルに割付られているのでPLC内ではラベルで取り扱うことができます
+ マスター局部について
    + マスターの中にもフィールドネットワーク全体を取り持つマスター制御部とマスター局でのローカルI/O制御が存在する場合が多いと思われます
    + 通信全体の構造体データからローカル制御用の構造体データへ転送を行う事により、ローカルI/O制御部は他のローカル局と同じプログラムを使用できるようになります   
+ ローカル局部について
    + 通信全体の構造体データからローカル制御用の構造体データへ転送を行う事により、遠方-手元の切替に対応したり、他局とプログラムの共通化が行えるようになります
+ ローカル局間のデータ転送について
    + マスター範囲構造体型グローバルラベル間で行う事になります

ファンクションブロックを規模毎に分類し、コントローラFBという概念を導入することによりデータとプログラムを構造化することが可能になりました。
そしてリンクリフレッシュデバイスを構造体でマッピングしている事により、HMI(GOT）でのデータの割付も比較的整ったデータ列で行う事ができました。

## おわりに
デバイスプログラムでもXやYを一旦補助リレーで受ける等の規則を設けてプログラミングをすることもあったのですが、現場で改修を行うと段々とその辺がグチャグチャになったという経験が何度かありました。
同様の経験をお持ちの方もいらっしゃるのではないでしょうか。
その点、構造体型ラベルを用いたプログラミングはその辺りが崩れにくいというメリットを大いに感じました。

いわゆる構造化プログラミングへの道として雑多に書いてきましたが、要点を書き出すと下記になります。
+ まずは部品化
+ データの構造化
+ コントローラFBという概念の導入と構造化したデータの結びつけ

あまり上手く書けたとは思いませんが、プログラムを構造化するならデータも構造化する必要があるんじゃない？
ということを書かせていただきました。
そして、データを構造化するから構造体という訳では無いですが、こういった用途に構造体型ラベルが非常に強力な武器になることが伝わればと思います。

ちなみに今回の手法は4階建て冷凍倉庫で各階ごと分散制御、事務所にてHMI(GOT）で集中管理というシステムを構築するのに用いました。

あと1回、オマケとしてテクニカルな面やトラブルシュートを記事にしたいと考えています。

## 過去記事一覧
+ [過去記事一覧](https://qiita.com/fujiteruo/items/af2459d320e8109963db)
blenderを始めよう0日目　～お前がblenderになるんだよ！～　　（書きかけ記事）

※一旦Qiitaを間借りしていますが、いずれ自分のブログにこの記事は引っ越す予定です。
ブログができたらtwitterで告知しますので、twitterフォローお願いします。

https://x.com/vrc_machida0312

blenderをDLしよう！！！！！！！！！！！！！！！

blenderのバージョンとしては『blender4.2』をDLします
理由は前の記事↓で書いた通りです！
https://qiita.com/machida0312/items/259dc4f88eeb3c1096f9

blender4.2のURLはこちら
https://www.blender.org/download/lts/4-2/

こちらにあるスクショの赤丸部分をみてください。↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638409/82df2e8a-d321-4c47-b195-c3b12fbfa7dd.png)


のページの下部の
「Versions」の下の「Download」のところに５列DLリンクがあるので、
ここの５列の中から、自分のPC（Macかwindowsか、等）を選んでDLしてください。
例えば私の場合は、私の持ってるPCがWindowsなので、「Windows – Installer」になります。

え？「大体macOSかWindowsのどっちかなのに、一番下にある「Windows-Portable(.zip)」はDL必要あんの？？」
だって？？
ありますねえ！ありますあります！

例えばこういう時に「Windows-Portable(.zip)」をDLする必要があるよ。↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638409/f6d84616-79c8-49b1-9b8a-cf936fc72b90.png)

１，さて、まずは↑の4.2のリンクを開きましょう。
https://www.blender.org/download/lts/4-2/
をクリック。そうしたら、
こういう画面↓になるハズです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638409/97cd5721-82e7-450c-b8a6-ec7846ff6e2d.png)


このページになったら、ダウンロードは開始されています。（特に通知等はありませんが、このページのまま待っててください）
【スクショ
https://www.blender.org/thanks/

待っていたら通知がこんな感じで出ます
【スクショ

ちなみにBlenderは一切PCの中に保存せず、ポータブル化できるぞ！
PCのCドライブがもうﾊﾟﾝﾊﾟﾝだぜ！とか
「Blender・・？やりたいけど・・DLしたら重そう・・」って人は↓をみてくれよな！！
https://x.com/vrc_machida0312/status/1912480387475161419

つまり「BlenderでPCが重くなる」っていう症状は、↑を知ってたら無いってことやな！

「Blender・・？やりたいけどDLしたら重そう・・」っていう言い訳も一切通用しなくなったぞ！
じゃあ、やろうか（マジキチスマイル）




DLの仕方


DLした後にやること

これだけは忘れずに
「戻る」回数をたくさんしてももどれｒ

深度のチェック入れ（入れないとズームができなくなる）

https://ble-uni-techmemo.com/how_to_zoom/
memo


```
@echo off
setlocal

:: コピー元とコピー先のディレクトリを設定
set SOURCE=C:\TestSource
set DEST=C:\TestBackup

:: コピー先フォルダがなければ作成
if not exist "%DEST%" (
    echo Creating destination folder...
    mkdir "%DEST%"
)

:: 特定のものをコピー（例：sample.txt）
echo Copying specific files...
ropy "%SOURCE%" "%DEST%" sample.txt 

echo cpy complete.
pause


```
Playwright MCP を使ってモンキーテストを実行してみる

# 初めに
以下の記事を拝見し、Playwright MCPに大きな可能性を感じました。
私も試してみたいと思い、自作したWebアプリに対しモンキーテストを行ってみました。

https://qiita.com/ore88ore/items/106c851e56631045fe25

# 環境
* `Claude for Desktop（Windows）`
* `@playwright/mcp : 0.1.0`

# テスト対象のアプリ
特にひねりの無いシンプルなTODOアプリです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430841/d6db68b8-f08c-423c-878e-fe80c2e80f39.png)

# Playwright MCPの環境構築

まずは Playwright MCP をインストールします。
```powershell
> npm install -g @playwright/mcp
```

続いて、Claudeの設定ファイルに以下のように記述すれば問題ありません。
記述後はClaudeを開きなおしてください。
```json: claude_desktop_config.json
{
    "mcpServers": {
      "playwright": {
        "command": "npx",
        "args": [
          "@playwright/mcp@latest"
        ]
      }
    }
}
```

Claudeの設定が以下のように合っていればOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430841/6d726773-1a2f-4751-a0f1-f98681106854.png)

# モンキーテスト試してみる
それでは実際にモンキーテストを実行してみましょう。

## 入力
こちらのプロンプトを入力しました。
不具合の発見だけでなく、UI/UXの観点からも何か気になることがないか聞いてみます。

```入力プロンプト
こんにちは！
作成したTODOアプリのモンキーテストをお願いします！

# 環境
http://localhost:5173/

# 要望
* バグかな？と感じたところは教えてください！
* UI/UX観点で指摘があれば教えてください！
* その他改善提案などもお願いします！
* テスト後、どんな試験を行ったのかをまとめて教えてください！
* 結果は表形式でいただきたいです！

以上になります！
よろしくお願いいたします！
```

## 実行中
実行時にブラウザが立ち上がり、自動でテストをしてくれます。
こちらは実行時の様子です。いろんな入力値のパターンを試してくれていますね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430841/7d015fe3-995c-4aca-a408-fa56acd4b23d.png)



## 結果
こちらが最終的な結果です。
実施したテストに対する結果を出力してくれました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430841/cc21b240-f522-4e6b-b5fb-56e562cc4762.png)

バグや改善提案についても詳しく記載されています。

```md
# バグの報告

## 空のタスク追加が可能
- 入力欄が空の状態でも登録ボタンをクリックするとタスクが追加されてしまう  
- スペースのみの入力も空のタスクとして追加される  
**改善案**：空の入力や空白文字のみの入力の場合はタスク追加を無効にする  

---

# UI/UX観点での指摘

## インタラクション性の向上
- Enterキーでのタスク追加機能がない  
**改善案**：テキスト入力中にEnterキーを押した場合も登録ボタンと同様の動作をするようにする  

## データの永続化がない
- ページをリロードするとタスクデータが消える  
**改善案**：`localStorage`等を使用してタスクデータを保存する  

## 視覚的なフィードバックが少ない
- タスク追加・削除時に視覚的なフィードバックがない  
**改善案**：アニメーションなどを用いて操作に対するフィードバックを追加する  

## UIデザインの改善余地
- 最小限のデザインで機能は果たしているが、視覚的な魅力に欠ける  
**改善案**：カラースキームの導入、より美しいフォントやボタンデザインの適用  

---

# その他改善提案

## 機能追加の提案
- タスクの完了/未完了を切り替える機能  
- タスクの編集機能  
- タスクの優先度設定機能  
- タスクのカテゴリ分け機能  
- タスクの並べ替え（ドラッグ＆ドロップ）機能  

## UIの強化
- タスクの数を表示するカウンター  
- 全タスクを一括で削除するボタン  
- ダークモード/ライトモードの切り替え  

## アクセシビリティ改善
- キーボードナビゲーションの完全サポート  
- スクリーンリーダー対応の改善  
- 色のコントラスト比の最適化  

---

以上がTODOアプリのモンキーテスト結果です。  
基本的な機能は動作していますが、いくつかのバグと改善点が見つかりました。  
**特に空のタスク追加が可能な点は修正が必要です。**

```

実行時間は4分ほどでした。
この時間でここまで見てくれるのはありがたいですね！

# 終わりに
短時間でやってくれる上に、改善提案まで出してくれるのは非常にありがたいですね。
とりあえず作ってみて、テストさせて、改善しての流れをスムーズに行えるので非常に体験が良いです。

今回は簡素なアプリケーションを対象にしてますが、実際のプロダクトでどこまでやってくれるのかは気になりますね。その辺は検証が必要そうです。

ここまでご覧いただきありがとうございました！
インフォームドコンセントのシステムをリリースしました

こんにちは。

テックリードのTerukiです。

4月1日から矯正のインフォームドコンセントをより分かりやすくユーザーさんが見られるようなシステムをリリースしました。

今までのシステムにはいろいろな課題があったので、それらを解決した新システムをご紹介。

例のごとくフルスクラッチでの開発です。

# モチベーション
古い同意書のシステムは海外のSaaSを活用したもののため、同意書として最適なUIを提供するには不十分なものでした。

同意書の内容もSaaSと社内で二重管理になっていて、変更対応も一苦労でした。

同意した内容は登録されたメールアドレスに送付される仕組みでしたが、デジタル署名がついたPDFを送ったりはできないため法定な文書としては弱いものでした。

他にも細かい部分はありますが、ユーザーにとっても自分たちにとっても分かりやすい親切なシステムを作りたかったのでした。


# 画面

とりあえず最初の画面でも見てみます。

左：旧システム　右：新システム

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192685/d7b32649-03f0-48eb-871b-5ae8b5650743.png" width="350" />

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192685/f8177ab5-84ae-4375-aa14-92a74d837357.png" width="350" />

新システムはOh my teethのトンマナに合わせたデザインになっています。

「はじめる」をタップすると最重要項目が表示されてチェックをしていく流れです。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192685/f754013d-8dbc-41db-9a8a-d0452559da50.png" width="350" />

一番最後に署名を入れて完了です。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192685/9822df59-3ed7-4322-8dc1-2f71627feb5b.png" width="350" />

この署名はこの後に発行されるPDFに埋め込まれます。


# PDF
同意した内容はPDFで見られるようにしてあります。
表紙に同意時刻や署名、2ページ目以降に同意書の本文が入っています。


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192685/61a173bd-2778-4305-8bed-425202163428.png" width="350" />

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192685/4929a562-d716-46f8-9d18-f42ea18a1b31.png" width="350" />

デジタル署名が付与されているので、Acrobatなどで確認できます。

![{73FAE036-4DD0-43C8-87CE-9ED5AB0D1D27}.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192685/6c14a9e3-05c8-4282-b072-266bb845443c.png)

PDFへのデジタル署名の付与の話はそれだけで記事が一つ書けそうなので後日書こうかなと思っています。


# 実装

いつも通りバックエンドはASP.NET Core、フロントエンドはReactとTailwind CSSで作られています。

同意書本文をhtmlとして管理したくなかったので、データベースにはMarkdownとして保存してあります。

そのMarkdownを同意書とPDF生成で個別にレンダリングしているような設計にしてみました。

Markdownをバージョン管理しておけば文書の変更履歴も容易に可能になっています。

PDFの作成は以前記事にしたChromeDriverを使った方法で行っています。

https://qiita.com/omt_teruki/items/48c486c521bfa969776a

Webフォントを使えばフォントが豆腐になってしまう問題も起きないのでこれが一番楽です。

---

実装を始めてから2ヶ月程度でリリースすることができました。

いろいろな文脈で使えるシステムなので今後横展開していきたいと思っています。

今後もユーザー体験を上げるべくどんどんシステム開発していこうと思っています。


# Oh my teethについて
[Oh my teeth](https://www.oh-my-teeth.com/?tags=qiita)では未来の歯科体験を創るために日々活動しています。

Techチームではより良いユーザー体験を提供するべく、Webフロントエンドからバックエンド、スマホアプリに機械学習モデルなど、さまざまなプロダクトを開発しています。

一緒に未来の歯科体験を創りませんか？興味がある方は是非こちらを確認してください。

https://oh.careers/

カジュアル面談も可能なので気軽に応募してみてください！

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192685/0138b492-e02b-852e-61fa-fc065b53d285.png" width="450" />
IT未経験者が達人プログラマーを読んで(第一章の途中まで)

# はじめに
アウトプットの一環として、達人プログラマーの感想を記させて頂きます！　
※ 筆者は技術書を読むのも考えをまとめるのも初めてのため、読みにくい箇所が多々あると思われます。気分をご不快にしてしまった際には大変申し訳ございません。

# 学んだこと
>Tip3 あなたには現状を打破する力がある。

私自身、無意識のうちに諦め現状を打破出来なかったことがあり、この言葉にハッとしました。

> あなたが(我々同様)過ちや判断ミスを犯した場合、そのことを正直に認め、あり得る選択肢の提案を試みてください。

将来、仕事上で判断ミスを犯した際に過ちを認める事は、私は出来ると思います。ただ、認めた後に選択肢の提案を行うのが達人なんだと認識しました。

> 大きな声をあげる前に中途半端な言い訳をなくしてください。

プロとして求められるのは、言い訳ではなく結果なんだと再確認しました。

# 終わり
ここまで、読んでくださった心優しい皆様ありがとうございます！
(自分がこの皆様の立場ならつまんなすぎて、意識が朦朧とします！心優しい皆さん読んでくださり本当にありがとうございます！)
クライアントのネットワーク接続の際のDHCPサーバーとのやり取り

## DHCP Offer の仕組みとその通信の実態について

この記事では、ネットワークにおける DHCP通信の流れと仕組みについて解説します。

## DHCPとは何か？

私たちが普段使っているスマートフォンやPCがWi-Fiに接続できるのは、背後で「ネットワーク設定」が自動で行われているからです。その設定を行ってくれるのが **DHCP（Dynamic Host Configuration Protocol）** という仕組みです。

たとえば、スマートフォンを家庭のWi-Fiに接続する場面を考えてみましょう。このとき、スマートフォンは自分専用のIPアドレスを持っていない状態です。そのままではネットワーク通信ができません。DHCPは、そんなスマートフォンに対して、IPアドレスやデフォルトゲートウェイ、DNSサーバなどの情報を自動で割り当ててくれる役割を果たします。

言い換えれば、DHCPは「新しくネットワークに接続された機器が、ネットワークの一員として正しく機能できるようにする」ための最初のやりとりを担う重要なプロトコルです。

## DHCPの通信の基本的な流れ

IPアドレスを保持していないクライアントは、ネットワークに接続されると **DHCP Discover（ブロードキャスト）** を送信します。それに対して、ネットワーク内に存在するDHCPサーバ（通常はルーターなど）が **DHCP Offer** を返します。

この Offer に対して、クライアントは **DHCP Request** を送り、最終的に DHCPサーバは **DHCP ACK** を送ることで、設定が確定します。

この4段階のやりとりをまとめると、以下のようになります：

|送信元|パケット|内容|宛先|
|-|-|-|-|
|クライアント|DHCP Discover|IP欲しいですー|IP: 255.255.255.255 / MAC: FF:FF:FF:FF:FF:FF
|DHCPサーバ|DHCP Offer|このIPどう？|IP: 255.255.255.255 / MAC: クライアントのMAC
|クライアント|DHCP Request|そのIPもらいます！|IP: 255.255.255.255 / MAC: FF:FF:FF:FF:FF:FF
|DHCPサーバ|DHCP ACK|OK、使っていいよ！|クライアントの新IP（今後の通信用）

## 各通信の役割について詳しく見ていく

### 1. DHCP Discover

IPアドレスを持たないクライアントが、LAN内にいるDHCPサーバに向けて「誰かIPアドレスをください」とブロードキャストを送信します。クライアントは自分のIPアドレスがないため、送信元IPには「0.0.0.0」を、宛先IPには「255.255.255.255（ブロードキャスト）」を使用します。

このパケットは、同じLAN内のすべてのデバイスに届きますが、実際に応答するのはDHCPサーバだけです。MACアドレスはNICに固有のものであり、サーバはそれを基に応答先を判断します。

### 2. DHCP Offer

DHCPサーバは、Discoverを受信すると「このIPアドレスを使ってみては？」という提案（Offer）を返します。これはまだ確定したIPアドレスではなく、あくまで仮の提示です。

このパケットは宛先IPにブロードキャスト（255.255.255.255）が使われますが、宛先MACアドレスにはDiscoverで受け取ったクライアントのMACが指定されます。これにより、IPレベルではブロードキャストでも、イーサネットレベルではユニキャストとなるため、クライアントにのみ届く仕組みになっています。Offerの中には、**提案されたIPアドレス、サブネットマスク、デフォルトゲートウェイ、DHCPサーバ識別子、DNSサーバの情報**などが含まれています。

**補足**
***IPアドレス（Assigned IP Address）***
DHCPサーバがクライアントに対して提供するIPアドレスです。これはまだ仮のIPであり、クライアントがRequestでそのIPを選択した場合、正式に割り当てられます。このIPアドレスは、ネットワーク内で他のデバイスと重複しないようにDHCPサーバによって管理されています。

***デフォルトゲートウェイ（Default Gateway）***
クライアントが同じネットワーク内で通信できない相手、例えばインターネットの外部にアクセスするために使用するルーターのIPアドレスです。デフォルトゲートウェイは、ネットワーク内の外部通信の出発点として機能します。

***DHCPサーバ識別子（DHCP Server Identifier）***
DHCPサーバのIPアドレスであり、クライアントがどのDHCPサーバからOfferを受け取ったかを識別するために使用されます。複数のDHCPサーバが存在する場合、クライアントがどのサーバの提案を選択したかを識別するために重要です。この識別子は、Requestメッセージでサーバに対して「このサーバのOfferを選んだ」という意思を伝えるために使われます。

### 3. DHCP Request

クライアントが、Offerで提案されたIPアドレスを実際に使いたいという意思を示すのがRequestです。この段階では、複数のDHCPサーバが存在する可能性があるため、Requestパケットには「どのサーバからのOfferを受け入れるか」をDHCPサーバ識別子として明示されます（通常は"Server Identifier"として指定）。

このパケットは再びIPアドレスとしてはブロードキャスト（255.255.255.255）を指定して送信されます。ただし、イーサネット（MAC）レベルでもブロードキャスト（FF:FF:FF:FF:FF:FF）になるため、LAN内のすべてのDHCPサーバに届きます。これにより、他のサーバは「このクライアントは別のサーバのOfferを選んだ」と判断し、自分が提案したIPアドレスの割り当てをキャンセルします。

### 4. DHCP ACK

DHCPサーバはRequestを受け取ると、その内容を確認し、クライアントが要求してきたIPアドレスを正式に割り当てたことを知らせるACK（Acknowledgement）を送ります。このACKには、IPアドレスの有効期間（リース期間）や、ネットワーク設定が改めて含まれています。

このパケットは、すでに提案されたIPが一時的に有効になっているため、宛先IPとしてそのアドレスを使用してユニキャストで送られることもあります。これにより、クライアントは正式にネットワークに参加し、他の通信（インターネットアクセスなど）が可能になります。

このようにして、クライアントはDHCPを通じて自動的にIPアドレスなどの情報を取得し、インターネットを含むネットワークへのアクセスが可能になります。
3分でマスター：RustでFFmpegをエレガントに使う方法



## **はじめに**

音声や動画の処理は一見難しそうですが、開発の現場では動画の形式変換、編集、透かしの追加、音声の抽出など、さまざまなニーズに直面します。  

FFmpegは業界標準として、ほぼ万能なツールであり、VLC、YouTube、OBSなどの人気ソフトウェアがその恩恵を受けています。しかし、FFmpegには開発者を悩ませる点もあります：

1. 学習のハードルが高く、**多重化/逆多重化、コーデック、ピクセルフォーマット、サンプリングレート**などの概念を理解する必要があります。
2. **C言語**で実装されており、直接呼び出す際にはメモリ管理の落とし穴に陥りやすく、**メモリリーク、不正アクセス、プログラムのクラッシュ**などの問題を引き起こす可能性があります。
3. コードが低レベルで、メンテナンスが難しく、ちょっとしたミスでデバッグの悪夢に陥ることがあります。

Rustは**メモリ安全性と高いパフォーマンス**で知られていますが、RustでFFmpegをシンプルかつ安全に、かつ私たちの習慣に合った方法で使えるでしょうか？

## **ez-ffmpeg：RustプログラマがFFmpegをエレガントに使えるように**

[`ez-ffmpeg`](https://github.com/YeautyYE/ez-ffmpeg) は、まるで普通のRustコードを書くように、**チェーン呼び出し**でFFmpegのタスクを作成し、実行できるようにします。  

FFIを使ってFFmpegの低レベルのCコードを呼び出し、**メモリを自動管理**してくれるので、C言語にありがちなメモリ安全性の問題を心配する必要はありません。

## **クイックスタート：Rustで形式変換**

動画（または音声、画像）の形式を変換する必要があるとします。`ez-ffmpeg` を使えば、数行のコードで実現できます：

### **1. FFmpegのインストール**

環境にFFmpegがまだインストールされていない場合は、以下の方法でインストールできます：

#### macOS：

```bash
brew install ffmpeg
```

#### Windows：

```bash
vcpkg install ffmpeg
# 初めてvcpkgをインストールする場合は、環境変数 VCPKG_ROOT を設定する必要があります
```

### **2. Rustの依存関係を追加**

`Cargo.toml` に `ez-ffmpeg` を追加します：

```toml
[dependencies]
ez-ffmpeg = "*"
```

### **3. コードの実行**

```rust
use ez_ffmpeg::FfmpegContext;

fn main() -> Result<(), Box<dyn std::error::Error>> {
    // 1. FFmpegコンテキストの構築
    let context = FfmpegContext::builder()
        .input("input.mp4")   // 入力ファイル
        .output("output.mov") // 出力ファイル
        .build()?;

    // 2. タスクの開始と完了待ち
    context.start()?.wait()?;
    Ok(())
}
```

これだけです！**入力と出力**に注目するだけで、`ez-ffmpeg` が形式変換を完了します。

## **形式変換だけじゃない**

`ez-ffmpeg` は **動画の編集、音声/動画の抽出、フィルターの追加、RTMPプッシュストリーミング、GPUアクセラレーション** などの機能も簡単に実現できます。  

公式のサンプルを参照してください：[examples](https://github.com/YeautyYE/ez-ffmpeg/tree/master/examples)

## **まとめ**

FFmpegのコマンドライン方式と比較して、`ez-ffmpeg` はRust開発者が**シームレスに** FFmpegコマンドをコードに変換できるようにし、**C言語を学ぶ必要はありません**。  

さらに、**カスタムフィルターや入出力** をサポートし、Rustで直接実装できるため、C言語の拡張の複雑さから解放され、FFmpegのコンパイルの苦痛も避けられます。  

🔗 **オープンソースプロジェクト**：[ez-ffmpeg](https://github.com/YeautyYE/ez-ffmpeg)
ローディングをモックでテストする方法【非同期処理】【Promise】

Reactで非同期処理をテストする中で、「ローディング中の表示が出るか」を確認をするためにモック関数（仮の処理）を使いました。
Supabase のような実際の通信は行なわず、代わりに非同期処理やPromiseを使用する手順をまとめました。


## 開発環境

- React（ViteまたはCreate React App）
- TypeScript
- Jest（React Testing Library）
- Supabase


## テスト内容
- データ取得中に"読み込み中..."という表示があることをテストする


## Promiseとは何か

Promise オブジェクトは非同期処理の完了（もしくは失敗）の結果およびその結果の値を表します。
JavaScriptでは時間がかかる処理（例：API呼び出し）はすぐに終わりません。
そのため「あとで結果が返ってくるよ」という約束をするのがPromiseです。


```ts
const promise = new Promise((resolve) => {
  setTimeout(() => {
    resolve("データが取れた！");
  }, 1000); // 1秒後に結果を返す
});
```

Promise の状態には3つあります
- pending（保留中）
- fulfilled（成功）
- rejected（失敗）
`resolve(...)` を呼ぶと fulfilled 状態になります。


## setTimeoutで擬似的に遅延させる

テストでは Supabase のような実際の通信は行いません。
代わりにモック関数（仮の処理）を使います。

ローディング表示をテストするには、意図的にPromiseを少し遅延させることで"読み込み中..."が表示される瞬間を観測します。

```ts
mockFetchRecord.mockImplementationOnce(() => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ data: [], error: null });
    }, 100); // 100ms 待ってから返す
  });
});
```

このとき、`mockImplementationOnce` を使うことで「このテストのときだけ動作を変える」という一時的なモックが可能になります。

### mockImplementationOnce とは
Jest で定義されたモック関数に対して「次の1回だけこの実装で動かして」と命令できるメソッドです。
これにより、テストごとに異なる動作を定義することができ、特定の状態を意図的に再現できます。


## 遅延させた上でテストで"読み込み中"を探す

```ts
test("ローディング画面をみることができる", async () => {
  render(<App />);

  // データ取得中の文言が一瞬でも表示されることを確認
  expect(screen.getByText("読み込み中...")).toBeInTheDocument();

  // 念のためデータ取得完了も待つ
  await waitFor(() => screen.getByTestId("table"));
});
```

### なぜこうしないといけないのか

デフォルトのモック（mockResolvedValue(...)）は即座に値を返してしまうため、ローディング表示の"瞬間"を通り過ぎてしまいます。

意図的にPromiseの完了を少し遅らせることで、"読み込み中..."という表示が画面に現れている状態をテストできます。
一時的に行われるので、各テスト内で毎回 `mockImplementationOnce` を呼び出す必要があ離ます。


## 参考リンク


https://jestjs.io/ja/docs/mock-function-api#mockfnmockimplementationoncefn

https://developer.mozilla.org/en-US/docs/Web/API/Window/setTimeout

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise
LogicAppsのtriggerのcallbackURLを取得するBicepをかいたメモ

# 概要
日本語の記事があまりなかったので。
listCallbackURLを使うと取得できる。

# ソース

```bicep
// 割愛
var workflowSchema = 'https://schema.management.azure.com/providers/Microsoft.Logic/schemas/2016-06-01/workflowdefinition.json#'

resource logicApp 'Microsoft.Logic/workflows@2019-05-01' = {
  name: logicAppName
  // 割愛
      triggers: {
        recurrence: {
  // 割愛
}

resource actionGroup 'Microsoft.Insights/actionGroups@2024-10-01-preview' = {
  location: 'global'
  properties: {
    logicAppReceivers: [
      {
        resourceId: logicApp.id
        callbackUrl: listCallbackURL(resourceId(subscription().subscriptionId, resourceGroup().name, 'Microsoft.Logic/workflows/triggers', logicAppName, 'recurrence'), '2019-05-01').value
// 割愛
```




# 参考
[bicep-tutorial](https://learn.microsoft.com/ja-jp/azure/defender-for-cloud/quickstart-automation-alert?tabs=CLI#bicep-tutorial)
[Microsoft.Insights actionGroups](https://learn.microsoft.com/ja-jp/azure/templates/microsoft.insights/actiongroups?pivots=deployment-language-bicep)
[Microsoft learn](https://learn.microsoft.com/ja-jp/azure/templates/microsoft.logic/workflows?pivots=deployment-language-bicep)
[Bicep のリソース関数 - Azure Resource Manager](https://learn.microsoft.com/ja-jp/azure/azure-resource-manager/bicep/bicep-functions-resource)
[Workflow Triggers - List Callback Url](https://learn.microsoft.com/ja-jp/rest/api/logic/workflow-triggers/list-callback-url?view=rest-logic-2016-06-01&tabs=HTTP)


[Azure Logic Apps を Bicep でデプロイしてみた](https://qiita.com/mnrst/items/b86f11a87a147fa93408)
Linux : touchコマンド

今回は「touchコマンド」について紹介します。

## touchコマンドとは
touchコマンドは、ファイルを新規作成したり、ファイルの編集日を変更したりする処理に対応しています。


## ファイルの新規作成
新規ファイルを作成するコマンドは、以下のようになります。
```bash
touch 新規ファイル名
```

> 出力例
> ```bash
> $ ls -a
> .  ..  hoge.txt  test
> $ touch sample.txt
> $ ls -a
> .  ..  hoge.txt  sample.txt  test #sample.txtが新たに作成された
> ```


## ファイル編集日の変更
この処理では、オプションを使用します。

|オプション|処理内容|
|:---:|:---:|
|-d|ファイルの編集日を指定変更|
|-r|他ファイルの編集日と合わせる|

※他にもオプションはあるみたいです...


### dオプション

- 指定したファイルの編集日を指定した日時に変更する

```bash
touch -d 変更後の日付 ファイル名
```

> 出力例
> 今回は、日付を「2025年4月9日21:05」から「2025年3月9日10:00」に変更した
> ```bash
> $ ls -l
> 合計 8
> -rw-rw-r-- 1 yamato yamato   18  4月  9 21:05 hoge.txt #変更前
> drwxrwxr-x 2 yamato yamato 4096  3月 25 21:07 test
> $ touch -d "2025-3-9 10:00" hoge.txt
> $ ls -l
> 合計 8
> -rw-rw-r-- 1 yamato yamato   18  3月  9 10:00 hoge.txt #変更後
> drwxrwxr-x 2 yamato yamato 4096  3月 25 21:07 test
> ```


### rオプション

- 指定したファイルの編集日を他ファイルの編集日と合わせる

```bash
touch -r 変更後の編集日をもつファイル 編集日を変えたいファイル
```

> 出力例
> sample.txtの編集日をhoge.txtの編集日に変更する
> ```bash
> $ ls -l
> 合計 8
> -rw-rw-r-- 1 yamato yamato   18  3月  9 10:00 hoge.txt
> -rw-rw-r-- 1 yamato yamato    0  4月  9 21:37 sample.txt # 変更前
> drwxrwxr-x 2 yamato yamato 4096  3月 25 21:07 test
> $ touch -r hoge.txt sample.txt
> $ ls -l
> 合計 8
> -rw-rw-r-- 1 yamato yamato   18  3月  9 10:00 hoge.txt 
> -rw-rw-r-- 1 yamato yamato    0  3月  9 10:00 sample.txt # hoge.txtと同じ編集日に変化した
> drwxrwxr-x 2 yamato yamato 4096  3月 25 21:07 test
> ```


## 終わりに
少しでも参考になれば幸いです。
間違い等あれば、コメントにて指摘していただけたら幸いです。
自己紹介

はじめまして。
じゅに（[@Jyu210_engineer](https://x.com/Jyu210_engineer)）といいます。

エンジニア歴は20年ほどで、ずっととある業界に特化したソフトを作ってきました。

しかし、会社で技術工場に前向きな方も少なく、自分もその流れにしっかりとはまってしまい、ほとんど新しいスキルのキャッチアップ、学習といったことをしてきませんでした。

会社で作るソフトもWebではなく、めちゃくちゃニッチな言語などを使用していたので、その会社でしか通用しない人の道を歩み続けてましたね。

一応会社では業界特化とはいえ、要件定義〜運用・保守、マネジメントまで行っていたことで、折衝能力やマネジメント能力などは身についているのかなと。

あと肝心なアルゴリズムを考える力なんかはあると思っています。

とはいえ、今までスキルのキャッチアップや学習を行ってきてなかったことは後悔しかありません。

しかし、後悔してても始まらないので、転職したことを機にWebをはじめ、新しいスキルのキャッチアップをしていこうと思っています。

そのキャッチアップした内容や調査して学んだことをなどをアウトプットしていこうかと考えているので、よろしくお願いします。

## スキルセット 2025年4月時点
とりあえず、この自己紹介を書いている2025年4月時点でのスキルセットを書いておきます。

### フェーズ
- 要件定義：15年
- 基本設計：15年
- 詳細設計：20年
- 実装：20年
- 単体テスト：15年
- 結合テスト：15年
- 導入：20年
- 運用、保守：20年

### OS・開発環境
- Windows：20年

### プログラミング言語
- C++：4年
- Visual Studio；4年
- Java：6年
- ニッチな言語：10年

### DB
- Oracle：2年
- PostgreSQL：7年
- SQLServer：1年
- ニッチなDB：10年
Javaの「インクリメント/デクリメント演算子」についてざっくりまとめてみた[Java初心者]

## はじめに
こんにちは。
プログラミング初心者Wakinozaと申します。
Java勉強中に調べたことを記事にまとめています。

十分気をつけて執筆していますが、なにぶん初心者が書いた記事なので、理解が浅い点などあるかと思います。
記事を参考にされる方は、初心者の記事であることを念頭において、お読みいただけると幸いです。
間違い等あれば、指摘いただけると助かります。


## 対象読者
- Javaを勉強中の方。
- Java SE Bronze試験を勉強中の方。
- Javaのインクリメント/デクリメント演算子をざっくり理解したい方。

## 目次
1\. インクリメント/デクリメント演算子
2\. 後置記法と前置記法

## 本文
### 1\. インクリメント/デクリメント演算子
変数に1だけ足したり引いたりしたい場合に使うのが、インクリメント/デクリメント演算子です。
「++」がインクリメント演算子で、変数に1を加算します。
「--」がデクリメント演算子で、変数に1を減算します。
以下のコードをご覧ください。

```Java
int a = 100;
int b = 100;
a++;
b--;
System.out.println(a); //結果：101
System.out.println(b); //結果：99
```

「a++」は「a = a + 1」もしくは「a += 1」と同じ挙動を、「b--」は「b = b - 1」もしくは「b -= 1」と同じ挙動をしています。

プログラミングの途中で、変数に1加算したり減算したりする場面はよくあります。
そんな時、インクメント/デクリメント演算子を使うと、コードが簡潔になり、可読性が向上します。

### 2\. 後置記法と前置記法
インクリメント/デクリメント演算子は、変数の前に書くことも、変数の後ろに書くこともできます。++iのように変数の前に書く記法を前置記法、i++のように変数の後に書く記法を後置記法と呼びます。
インクリメント/デクリメント演算子単独で用いる場合は、前置記法も後置記法も挙動に違いはありません。

しかし、他の演算子と一緒に用いた場合、前置記法と後置記法では挙動が異なるので注意が必要です。

以下のコードをご覧ください。

```Java
int a = 100;
int b = 100;
int c = ++a;  //前置記法
int d = b++;  //後置記法
System.out.println(c); //結果：101
System.out.println(d); //結果：100
```

同じ数字に同じインクリメント演算子を用いただけなのに、変数cとdの結果が違ってしまっています。
どうしてこのような違いが生まれるのでしょうか。

前置記法も後置記法も、変数に1を加算するという挙動は同じです。両者の違いは、他の演算子に値を渡すタイミングと、1を加算するタイミングの順番です。

上の変数cとdの処理を分解してみましょう。

前置記法「int c = ++a」の場合
1\. インクリメント演算子が変数aに1を加算
2\. 代入演算子が変数aの値をcに代入
3\. インクリメント演算子で加算後の値が変数cに代入されるため、結果は101となります。

後置記法「int d = b++」の場合
1\. 代入演算子が変数bの値をdに代入
2\. インクリメント演算子が変数bに1を加算
3\. インクリメント演算子の加算が変数dに反映されないため、結果は100となります。

他の演算子と一緒に用いると、前置記法も後置記法かによって加算のタイミングが異なることがわかります。
デクリメント演算子も、同様です。
思わぬ不具合の原因にもなるので、インクリメント/デクリメント演算子は単独で用いた方が良いでしょう。

## まとめ
- インクリメント演算子「++」は1を加算するときに、デクリメント演算子「--」は1を減算するときのに用います
- 演算子を変数の前に書くこと(前置記法)も、後に書くこと(後置記法)もできる。単独で用いる場合は、どちらに書いても同じ挙動です
- 他の演算子と一緒に用いると、前置記法と後置記法では挙動が異なるので注意が必要です

---------------

記事は以上です。
最後までお読みいただき、ありがとうございました。

##  参考文献
この記事は以下の情報を参考にして執筆しました。

- [徹底攻略 Java SE Bronze 問題集]
- [スッキリわかるJava入門 第４版]
- [4.1 演算子（算術演算子、代入演算子、比較演算子、論理演算子、ビット演算子など）～Java Basic編](最終更新 2024-07-28)(https://qiita.com/KenyaSaitoh/items/151d068cef70aa2f8ac5) (参照 2025-04-09)
ブックマークレットでテキストの貼り付けを行う方法



# TL; DR

- `prompt()` を使う

# 背景

自動化のためブックマークレットでクリップボードからDOMの特定要素へ貼り付けを行うツールを作成していましたが、`navigator.clipboard.readText()` が想定通りに動作しませんでした。

clipboard APIは `document` にフォーカスが当たっているときにしか実行されません。そのため、ブックマークレットをクリックした瞬間にはフォーカスが当たっておらずエラーが発生してしまいます。

以下の記事で詳しく解説されています。

https://blog.hog.as/entry/2021/09/30/021450

https://qiita.com/kuroan/items/0d1e0d7dd0abfe57ce9a

コピー (`navigator.clipboard.writeText()`) の場合上記記事のように `setTimeout()` で非同期実行することでエラーを回避できますが、 `readText()` の場合はこちらも動作しませんでした。

# 解決方法

やりたいこと的にclipboard APIにこだわる必要はなかったので、原始的ですが `prompt()` で入力画面を表示、そこにユーザー入力を入れてもらうことで対処しました。

https://developer.mozilla.org/ja/docs/Web/API/Window/prompt

```javascript:入力をconsole.logへ表示
javascript:console.log(prompt("user input: "))
```

![prompt.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239887/68bba5f0-ec00-4168-8626-245420727f30.png)

![output.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239887/7f36cbc3-9cd6-407e-bd0d-e965a94e4f2f.png)
【個人開発mini】Vimに憧れたプログラミング学習者が迷路ゲームを開発してみた

## はじめに

はじめまして。
2024年3月よりプログラミングスクールRUNTEQに入学した、わーちゃんと申します。
スクールを2024年12月に卒業した今、個人開発したミニサービスの中で一つ記事にまとめていなかったものがありましたので、当時の事を振り返るいい機会として、まとめてみたいと思います。


**▶サービスURL：[Vim maze game](https://grizzly-vivid-midnight.glitch.me)**

**▶Github：[リポジトリ](https://github.com/canopus222/Vimgame)**

![vim maze game](https://cdn.glitch.global/a5c8f63d-dd98-45b0-9842-a98ea81964b4/vimgame.png?v=1733621299512)


## ⌨️サービス概要と開発した理由🎮
### 概要
- Vimのh,j,k,lの操作を使いこなすためだけのミニゲーム
- 一部レベル開発中です！


### 開発理由
- スクールのイベントでVimというものを知る
- かなり訓練？すれば、マウス操作なしでコーディングできるようになる➡単純にかっこいい。素敵。と思う
- 卒業生の中でVim操作を利用した迷路サービスの存在を知る
- どうやって動いているのか気になる。私も作成してみたいと思う
- ゲームアプリを作ってみたいと思っていた

このような経緯から今回のサービスを開発するに至りました。



## ⌨️機能一覧🎮
1. **迷路の描画**
    - `mazeData` 配列をもとに、Reactコンポーネントを使って迷路を表示
    - `Cell` コンポーネントで各マスの種類（壁、通路、スタート、ゴールなど）を判定
2. **プレイヤーの移動**
    - `useState` で `playerPos`（プレイヤーの位置）を管理
    - キーボードの `h`, `j`, `k`, `l` を押すと、プレイヤーが移動
3. **視界制限**
    - プレイヤーの周囲1マスのみが見える
4. **障害物の判定**
    - `1`（壁）と`2`（木）は通過できない
5. **ゴール判定**
    - `G` に到達するとメッセージを表示



## ⌨️使用技術🎮

| **カテゴリ** | **技術** | **説明** |
| --- | --- | --- |
| **開発環境** | Glitch | Webアプリを開発・ホスティングできるオンラインプラットフォーム |
| **コード管理** | GitHub | ソースコードのバージョン管理に使用 |
| **フロントエンド** | HTML | ベースのページ構造（index.html など） |
|  | CSS | Webページのデザインを担当 |
|  | JSON | データ管理や設定情報の保存 |
|  | React | フロントエンドのライブラリ（コンポーネントベース） |
|  | JSX | Reactで使われるHTMLのような構文 |
| **インフラ** | Glitch Hosting | Glitch上でアプリをホスト |


## ⌨️頑張った点、こだわった点🎮
- 迷路がプレイヤー周りの一部だけにしかわからないようにした
- ゴール到達時にメッセージの表示
- 次のステージに進む為にはゴールしないといけない
- 矢印ではなく、指定したキーで移動を可能に


## ⌨️最後に🎮
Reactを使用してミニサービスを作ってみました。
JavascriptとHTMLのファイルを一緒になって記述できるのはすごいな、と思いました。JSXの特徴。
下記リンク👇Reactの記事こんなにあるとは知らなかったので、興味あるものはみて、何かに取り入れてみようかと思います！
（Vimは難しいな・）

https://qiita.com/tags/react

https://www.webstaff.jp/guide/trend/webit/react/
[備忘録] テキスト埋め込み入門：自然言語処理の基礎とベクトル表現の考え方

## 1. テキスト処理の課題と埋め込みの重要性

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/9a3fb45d-1f23-425d-b48a-494ccee1bdcd.png)

### なぜコンピュータはテキストを理解できないのか？
コンピュータは数値しか理解できません。私たちが日常的に使う「猫」「犬」といった言葉は、そのままではコンピュータが処理できません。このギャップを埋めるために、テキストを「数値ベクトル」に変換する必要があります。これを「テキスト埋め込み」と呼びます。

### テキスト埋め込みで何ができるの？
テキストを数値ベクトルに変換すると、以下のことが可能になります：
* 機械学習モデルの入力として使える
* 単語や文章の「意味的な近さ」を計算できる
* 大量のテキストを効率的に表現できる

簡単に言えば、人間の言葉をコンピュータが理解できる形に翻訳するための技術です。

## 2. 単語の数値化と One-hot エンコーディングの限界

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/9806af06-15c6-4b77-aad3-ac489d167d77.png)

### 単語を数値に変える最も単純な方法
単語を数値に変える最も簡単な方法は、各単語に番号を振ることです。例えば：
* "猫" → 1
* "犬" → 2
* "家" → 3

しかし、この方法では問題があります。コンピュータは数値の大小関係に意味を見出してしまうため、「犬」が「猫」の2倍の意味を持つと誤解します。例えば、'犬'に2、'猫'に1という番号を振ると、数値の大小で意味に優劣があると誤解される恐れがありますが、これは単なる便宜上の番号付けにすぎません。

### One-hot エンコーディング
この問題を解決する一つの方法が「One-hot エンコーディング」です。これは、語彙数と同じ長さのベクトルを用意し、該当する単語の位置だけ1、他はすべて0にする方法です。

例えば、語彙が["猫", "犬", "家"]の場合：
* "猫" → [1, 0, 0]
* "犬" → [0, 1, 0]
* "家" → [0, 0, 1]

これなら数値の大小関係に意味はなくなります。しかし、新たな問題が生じます：

### One-hot エンコーディングの限界
1. **次元の爆発**：語彙が増えるとベクトルの長さも増加します。日本語の語彙は数万〜数十万あるため、非常に長いベクトルになります。
2. **意味の関係を表現できない**：「猫」と「犬」は動物という共通点がありますが、One-hotベクトルではその関係性を表現できません。すべての単語が等距離に配置されます。
3. **未知語に対応できない**：事前に知らない単語が出てきた場合、表現できません。

## 3. 分散表現（Distributed Representation）の基本

![distributed-representation-svg.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/4e10a19c-1244-456e-a665-4b6355f298eb.png)

### 分散表現とは何か？
分散表現は、単語の意味を数百次元程度の密なベクトルで表現する方法です。このベクトルの各次元は明確な意味を持ちませんが、単語の意味的特徴を複数の次元に「分散」して表します。

重要なのは、**意味的に似ている単語は似たベクトルになる**という性質です。

### 分散表現はどう学習するのか？
「似た文脈に現れる単語は似た意味を持つ」という言語学的仮説に基づき、大量のテキストから統計的に学習します。代表的な手法は「Word2Vec」です：

1. 大量のテキストを用意する
2. 「ある単語の周りにどんな単語が出現するか」のパターンを学習
3. この関係性を元に各単語の最適なベクトル表現を求める

例えば、「犬は〇〇を食べる」「猫は〇〇を食べる」のように似た文脈に現れる単語は、似たベクトルになります。

### 分散表現のメリット
1. **コンパクト**：語彙数に関わらず、ベクトルの次元数は固定（通常100〜300次元程度）
2. **意味関係の表現**：意味的に近い単語は、ベクトル空間でも近くに配置されます
   * 「犬」と「猫」のベクトルは近くなる
   * 「銀行」と「金融」のベクトルは近くなる
3. **ベクトル演算で関係性を表現**：有名な例として
   * 「王様 - 男性 + 女性 ≈ 女王」
   * つまり、ベクトル演算で意味的な関係を表現できます
4. **未知語への対応**：部分単語レベルの情報を活用することで、学習時に見たことのない単語にも対応できる手法もあります

### 分散表現の発展
単語レベルの埋め込みから、文や段落レベルの埋め込みへと発展してきました：
* **Word2Vec/GloVe/fastText**：単語レベルの埋め込み
* **Doc2Vec**：文書レベルの埋め込み
* **BERT/GPT**など：文脈を考慮した高度な埋め込み

## まとめ：テキスト埋め込みの本質

![text-embedding-essence-improved.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/f1e3cef3-0b43-4fb9-b189-3df389c95d84.png)

テキスト埋め込みの本質は、「人間の言葉の意味や関係性を、コンピュータが理解できる数値ベクトルで表現する」ことです。
* **One-hot表現**：単純だが、意味の関係を表現できない
* **分散表現**：意味の関係を低次元の密なベクトルで効率的に表現

良い埋め込みほど、似た意味の単語が似たベクトルとなり、自然言語処理タスクの性能向上につながります。テキスト埋め込みは、自然言語処理の基盤となる重要な技術なのです。


## 免責事項
本記事の作成にあたり、文章や図解の生成にClaude Sonnetを活用しました。最終的な編集と確認は筆者が行っています。
【Bruno】プロジェクトの.env.localファイルの値を環境変数として使用する方法

## `.env`ファイルを使用する方法
Brunoで`.env`ファイルを使用するにはBrunoコレクションのフォルダのルートに`.env`ファイルを作成する必要がある。

```text
project
├── bruno-collection
│   ├── environments
│   │   └── Local.bru
│   ├── api-folder
│   ├── .env
│   └── bruno.json
└── .env.local
```

https://docs.usebruno.com/secrets-management/dotenv-file#dotenv-file-for-secret-management

## `.env.local`の値を使用可能にする
Brunoでプロジェクトの`.env.local`内の値を使用できるようにするにはシンボリックリンクを使用する。

```shell
cd bruno-collection
ln -s ../.env.local .env
cd -
```

上記を実行するとフォルダ構造は以下のようになる。

```text
project
├── bruno-collection
│   ├── environments
│   │   └── Local.bru
│   ├── api-folder
│   ├── .env -> ../.env.local
│   └── bruno.json
└── .env.local
```

## Brunoで値を参照する
以上の手順を行うと` process.env.<secret-name> `で`.env.local`内の値を参照できるようになる。

![screen-shot-174.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/c599dc4e-7c8c-4e53-b933-d961f4ce450a.png)

https://docs.usebruno.com/secrets-management/dotenv-file#creating-and-using-the-env-file
初心者がRails Tutorial 第１章を終えて　

## rails tutorial 第１章を終えて

### 環境構築でつまづいた
本書の中では、初心者が環境構築でつまづくという理由から、GithubCodeSpacesでもう出来上がったものを使うのを推奨していたが、 **自分の慣れ親しんだVScodeでやりたい！ローカルでやりたい！という生意気な考え** があったので自力で環境構築をしてみたのだが、案の定しっかりつまづいた。

rubyのインストールでつまづいて、railsのインストールでずっとエラーが…

ChatGPTに聞きまくってある程度は進んだが、上手くいかず…
結局、あるQiitaの記事で本書に書いてあるバージョンではなく一つ上のものをインストールをする、ということを見て、試してみたらできた。

**ここまでで2h。**

### 初めてのGit/Github

以前から存在は知っていたし、いつかやるのだろうなとは思っていたけれどその機会が来た。存在意義や使い方の理解はとても面白かった。

ただ、ここでもエラーが…

１章の最初で作ったリポジトリで、codespacesで起動！までしていたので、その後ローカルで環境構築して、いじって、pushとなっていたので、コンフリクト？がいっぱい起きてしまった。

結局、新しいリポジトリを作って、そっちにpushすることで解決。


**デプロイまで終わって何とか第１章終了。　合計4.5hだった。**

### 反省・感想

・初めて触るrailsだったがこの資料はとても丁寧で、当分の間、自分のバイブルとなる予感。

・やっとGitに触れることができた、嬉しい。

・ChatGPTは、「教科書はこうと言っているのだけど、これってどういうこと？」と聞くと分かりやすく教えてくれるし、「こういうことなんだね」と返すことで自分の理解が合っているのかまで確認できて、学習スピードが上がって有能。

・けれど、エラーの対処に対しては、「本当にそのファイルいじっていいの？」「そのコマンド大丈夫？」と、自分の知識がないばかりに、AIが言っている事が正しいのかはもちろん、試してみても問題ないのかすら分からない、とても怖い。

・特にコードはまだ書いていないが、今のところ楽しい。１日１章ペースでも１４日かかる…１日１章もできるか怪しいし…でも、インターンでこんな自分を雇ってくれる会社に迷惑はかけたくないし、失望されたくもないのでとりあえずやり続けてみる。
むしろ、怠け者の自分にはこのくらいの緊張感、危機感がある方が、タスクに向かえるので環境としては最高。

#### 記録 ####

第１章　4.5h
Raspberry PiにDocker+Sambaでファイルサーバー構築

# 概要

Raspberry Pi上にSambaのDockerイメージを使用してファイルサーバーを構築した際のメモです。

# 環境

- 本体：Raspberry Pi 4 Model B
- OS：Debian 11.11

# 構築

## ドライブのマウント設定

今回は外付けHDDをしようしたので、以下を参考に自動マウント設定を行いました。

https://qiita.com/akeyi2018/items/493ebed0dbf9d008d7ed

## Dockerコンテナの作成

docker-compose.ymlを作成します。Dockerイメージには[dperson/samba](https://hub.docker.com/r/dperson/samba)を使用しました。

```
version: '3.4'

services:
  samba:
    image: dperson/samba
    container_name: samba
    environment:
      - TZ=Asia/Tokyo
      - USERID=1000
      - GROUPID=1000
    networks:
      - default
    ports:
      - "139:139/tcp"
      - "445:445/tcp"
    read_only: true
    tmpfs:
      - /tmp
    restart: always
    stdin_open: true
    tty: true
    volumes:
      - /mnt/nas:/nas:z
    command: '-s "nas;/nas;yes;no;no;USERNAME" -u "USERNAME;PASSWORD" -p'

networks:
  default:
```

### 主な設定項目の解説

`volumes`にてホスト側のドライブ(`/mnt/nas`)をコンテナ内にマウントします。

```
volumes:
  - /mnt/nas:/nas:z
```

`command`にてユーザや権限の設定を行います。
下記の場合、`-s`オプションではセミコロン区切りで左から順にサーバ名(任意)、ストレージとして使用する領域のファイルパス、読み書きの可否、読み取り専用、ゲストアクセスの可否、アクセスを許可するユーザ名を設定しています。その他の設定は[GitHub](https://github.com/dperson/samba)のREADMEに記載があります。

`-u`オプションで使用するユーザ名とパスワードを設定します。

`-p`オプションは権限の設定上必要になるようです。

```
command: '-s "nas;/nas;yes;no;no;USERNAME" -u "USERNAME;PASSWORD" -p'
```

# 起動と接続

`docker compose up`で起動後、以下の手順で接続を行います。

## Windows11の場合

1. エクスプローラーの「ネットワークドライブの割り当て」を選択

   ![スクリーンショット (25).PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817080/0f14642c-b818-4973-9cd3-c1ccc1839dcd.png)

1. ドライブ文字と`\\Raspberry PiのIPアドレス\サーバ名`の形式でサーバを指定し「完了」を押す

   ![スクリーンショット 2025-04-08 203930.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817080/9f81fad2-003b-48ac-a522-b6a5d3dd5c7a.png)

1. うまく行けばファイルサーバ上のデータが閲覧できる

# 課題

今回使用したDockerイメージは更新が止まっているようなので、[servercontainers/samba](https://hub.docker.com/r/servercontainers/samba)のような別のイメージに移行するか、自作のイメージを用いるのが良さそうです。
AWSで踏み台サーバーを作成してみた

初めまして！！！標準体重 65kg 目指して増量中のそうまです！！

今回は「踏み台サーバー」ってよく聞くけど、作成する目的や実装方法がよくわからなかったので、実際に手を動かしてみて、理解できたことをメモとして残しておこうと思います！

## 踏み台サーバーの目的

以下のようなケースの時に、踏み台サーバーの必要性が出てきます！！

1. 外部公開したくない社内WebやDBへ繋ぐ必要がある時
2. VPC内のリソースに外部から安全にアクセスしたい時
3. 監査ログ（監視）をとりたい時
    a. 踏み台サーバーで操作証跡を記録する

## 今回の作成した構成

- 踏み台サーバー : EC2
- 社内用webサーバー : EC2

![頭整理-aws.drawio (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1100170/7943cad0-3229-4922-a13c-524bc53453c5.png)

## 設定手順

### 社内用webサーバーの設定

1. インスタンス作成時に 「パブリックIP割り当て：オフ」 を選択し、プライベートサーバーとして構築
1. セキュリティグループで SSHの通信を許可
    - 送信元：社内用VPCのCIDR範囲
    - ターゲット：local（VPC内からのアクセスを許可）
1. インターネットゲートウェイと関連付けされていないルートテーブル をアタッチ

:::note info 
この構成により、Webサーバーは 同一VPC内からのSSH通信のみが許可された状態 になります！！
:::

### 踏み台サーバーの設定
1. インターネットゲートウェイと関連付けされたルートテーブル を適用
1. セキュリティグループで SSH通信を許可

:::note info 
踏み台経由で社内Webサーバーへのアクセスが可能な構成にします！
:::

### VPCの設定
1. パブリックサブネット（踏み台用）と プライベートサブネット（社内Webサーバー用）を作成して分離構成に

### NAT Gateway の設定

プライベートサーバーからインターネットへの通信（アウトバウンド）を許可するために NAT Gateway を利用します！

1. Elastic IP を発行し、NAT Gateway に割り当て
1. 社内Webサーバーが属する VPC 内のパブリックサブネットに配置
1. 社内Webサーバーが属する サブネットのルートテーブルに NAT Gateway を紐づけ

:::note info 
プライベートサーバーからインターネットへの通信（アウトバウンド）を許可するために NAT Gateway を利用します！
:::

## セキュリティグループではダメなのか？

僕は当初セキュリティグループで インバウンド / アウトバウンド を制御していれば良いのでは？と考えていました。

しかし、VPC・ルートテーブル・NAT Gatewayなどの構成を組み合わせることで、「通信経路そのものを物理的に遮断・制限する」強力なセキュリティ設計が可能になります。

- セキュリティグループは「通していい通信を制御」
- VPCやルートテーブルは「そもそも通信が通る経路を持たせるかどうか」

## 纏め

今回は、AWS上で踏み台サーバー（Bastion Host）を経由して、
プライベートなWebサーバーへ安全にアクセスする構成を作成しました！

パブリック・プライベートサブネットの使い分け、ルートテーブルやNAT Gatewayの設定など、これまでふわっとしていたVPCまわりの設計を 実際に手を動かしながら理解できたのが大きな収穫でした！！
【イベントレポート】なんでもCopilot#24「裏コパ/アップデートとかなんコパエゴサとか」#なんでもCopilot

いつも記事を読んでいただきありがとうございます！
モブエンジニア（[@mob-engineer](https://qiita.com/mob_engineer))です！

今回は2025.04.09（水）に開催した**なんでもCopilot#24「裏コパ/アップデートとかなんコパエゴサとか」**に参加しましたのでアウトプットとしてイベントレポートを執筆しました。

初見の方でもサクッと読めるように平易な表現で執筆しておりますので、お気軽に読んでいただければ幸いです。

#### イベントページ

https://nandemo.connpass.com/event/351022/

:::note info
誤字脱字、わかりづらい表現に関しては極力なくすように心がけていますが、リアルタイムで執筆しているため誤字脱字があるかもしれません。
:::

# 目次
- アプデとか気になるニュースとかなんコパエゴサ！
- まとめ

## アプデとか気になるニュースとかなんコパエゴサ！
- 進め方
    - リリースノート・MSブログ・メッセージセンターを見ていく
- リリースノート
    - Copilot Studioでのサポート強化
    - Copilotチャットでカスタムエージェントが利用可能
        - （個人的意見）やっぱりエージェント系はアップデートされていますね
    - Excelテキストの読み上げ機能
        - （個人的意見）カイル君がよみいつも記事を読んでいただきありがとうございます！
モブエンジニア（[@mob-engineer](https://qiita.com/mob_engineer))です！

今回は2025.04.09（水）に開催した**なんでもCopilot#24「裏コパ/アップデートとかなんコパエゴサとか」**に参加しましたのでアウトプットとしてイベントレポートを執筆しました。

初見の方でもサクッと読めるように平易な表現で執筆しておりますので、お気軽に読んでいただければ幸いです。

#### イベントページ

https://nandemo.connpass.com/event/351022/

:::note info
誤字脱字、わかりづらい表現に関しては極力なくすように心がけていますが、リアルタイムで執筆しているため誤字脱字があるかもしれません。
:::

# 目次
- アプデとか気になるニュースとかなんコパエゴサ！
- クロージング
- まとめ

## アプデとか気になるニュースとかなんコパエゴサ！
- 進め方
    - リリースノート・MSブログ・メッセージセンターを見ていく
- リリースノート
    - Copilot Studioでのサポート強化
    - Copilotチャットでカスタムエージェントが利用可能
        - （個人的意見）やっぱりエージェント系はアップデートされていますね
    - Excelテキストの読み上げ機能
        - （個人的意見）カイル君が読み上げてくれるのかしら🐈
    - Copilotチャットで画像が読み取れるようになった
        - （個人的意見）画像読み取りができるとAIに食わせやすいんですよね
    - 既存のCopilotページを読み込んで複数ページを作成
    - PowerPointのプレゼンテーションを翻訳できる
    - Wordで音声を通じたブレインストーミングができる
        - （個人的考察）議事録をいい感じで作成できるんですね
- MSブログ
    - Copilot PCの使い方記事
        - （個人的考察）Copilot PC興味あるんですが手が出せていない...
    - Security Copilot周りの情報
        - アカウントセンターからの情報を集約して紹介してくれる
        - （個人的意見）ひとり情シスが喜ぶサービスですね
    - Microsoft Vivaの紹介
        - これからMicrosoftを利用する方がどうやって実装していくか紹介
        - 従業員数の情報を入れることで費用対効果をビジュアル化したグラフを生成してくれる機能も
        - （個人的意見）ざっくりでも費用対効果が可視化されるのはうれしいですね～
    - 履歴書・求人情報をいい感じでCopilotが取得してくれる
        - （個人的意見）AIエージェント化したらアプリ化もできそうですね！
- 管理センター
    - AI管理者ロールでCopilotを管理できるようになった
        - （個人的意見）AI権限管理は考えるところが多くあるんですよね
    - ファイルをもとにForms（下書き）を作成してくれる機能
        - （個人的意見）PDF化した様式をFormsにするのが楽になりますね！
    - Microsoft 365デスクトップ・モバイルアプリでCopilot複数アカウント可能
        - 複数アカウントでCopilotを同時利用できるがデータはローカル端末に依存する
- Microsoft 365 Copilotの研究者とリサーチャー
    - ChatGPTでいうところのDeep Researchのようなもの
    - 解説
        - 新しい推論エージェントの登場
            - （個人的意見）確かに推論エージェントの登場は大きいですね
        - アナリストを利用することでExcelデータからインサイトを得られる
        - リサーチャーを利用すればRFPの素案を作ってくれる
            - （個人的意見）外部データベースから情報を取得できるのか
    - リサーチャー機能を利用すればXの情報をもとにエゴサーチもできる

## まとめ

個人的にCopilotで何が行えるのかをキャッチアップしているようでキャッチアップできていなかったので、本イベントを通じてCopilotで何ができるのかキャッチアップできました！
また、リサーチャー機能については業務での利用可能性もあるなぁと思いましたので、個人的に深堀してみたいと思います！！
（やはりデモがあるとうれしいですね）

最後まで、記事をお読みいただきありがとうございます！