OmniAICreator/Qiita-1.07M huggingface dataset:
Raspberry pi pico WでRNDIS-Wifiアダプタ

## はじめに
　Linuxの起動する小さなボード（以降、Linuxボード）の多くが、USBOTG機能を使って、RNDISのイーサーネットアダプタとしてふるまう機能があります。
　よく知られているのが、Raspberry pi zeroシリーズ等をヘッドレスで使う例です。
　USBケーブルでの接続は開発時には便利なのですが、開発機から離して利用する場合は、有線LANやWifiのネットワークに接続したくなります。
　RNDISのイーサネットアダプタとして振舞うUSBコネクタに、Raspberry pi pico wを接続すると、Wifiにブリッジしてくれる機能がGithubで紹介されていたので、実際に使用してみました。
　本稿の内容は、2024年4月27日に実施された「LILO&東海道らぐオフラインミーティング 2024-04-27」の発表内容を含みます。

https://lilo.connpass.com/event/316818/
 
## PicoPiFi
　PicoPiFiは2023年8月にGithubで公開されたプロジェクトです。2024年12月現在、Ver. 3.2.0のPicoPiFi.uf2が公開されています。

https://github.com/sidd-kishan/PicoPiFi

　通常、Raspberry pi picoのUSB関連の開発には、TinyUSBが使用されるのですが、PicoPiFiではCerryUSBが利用されています。

https://github.com/CherryUSB

　Pico wと対象となるマシンとの間では、12 MbpsのRNDIS接続がされており、Pico wは54 Mbpsで2.4 GHzのアクセスポイントにつながります。

## PicoPiFiの使い方
　githubの「README.md」に図解入りで説明されているので、その説明の日本語版としてみていただければと思います。ここで、pico wはRaspberry pi pico wを、母艦は、pico wを接続して環境設定を行うマシンを意味します。
１．Releasesから「PicoPiFi.uf2」と「index.html」を母艦にダウンロードする
２．Raspberry pi pico wの「BOOTSEL」ボタンを押しながら、pico wに接続されているUSBケーブルを母艦につなぐ
３．Pico wは母艦にUSBドライブとして認識されるので、そこに、ダウンロードした「PicoPiFi.uf2」を保存する
４．ダウンロードした「index.html」をブラウザで開くと設定画面が表示される
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693019/930f7cc9-0597-ece1-5f89-008405a5b1b9.png)
５．「Connect to the first CDC Port」をクリックすると、母艦がwindowsマシンの場合、以下の図のように、シリアルポートの設定画面が表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693019/e2b5936e-2831-e3ab-5860-8e273ce3bce3.png)
６．「PicoPiFi Control Panel」をクリックし、「接続」ボタンをクリックする。上記は、設定済みなので、「接続」ボタンの表示が薄い
７．Pico wが検出したwifiルーターが表示されるので、接続したいルーターの「Connect」ボタンをクリックする
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693019/57aa9da9-03ae-a790-ac9a-05635c6ef235.png)
８．ルーターのパスワードを入力する
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693019/65683e64-6075-c6d7-3ef8-30130699b4c6.png)
## Linuxボードとの接続
　LinuxボードにはUSB-OTGホストケーブルを接続します。今回は、百均のUSB-CオスをUSB-Aメスに変換するコネクタを使用しています。
　Pico wのマイクロUSBのメスとLinuxボードのUSB-Aのメスは、電源供給用のUSB-Aオス端子のついたY字のUSBケーブルを使用します。これは、USB-AとマイクロUSBケーブルで接続すると、別途、電源用のケーブルをLinuxボードに接続する必要があるからです。
　以下に、Pico wとLinuxボードのMilk-v Duoとの接続例を示します。図下の黄色のついた端子をUSB電源に接続します。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693019/af71bbc2-f8b4-d9fa-a102-de5a84c52374.png)
　Milk-v Duoの場合、固定IPアドレスで使用していますので、ルーターのネットワークに接続可能なIPアドレスを固定IPアドレスとします。
## おわりに
　USBケーブルで母艦につなぐと、RNDISアダプタとして振舞うLinuxボードをRaspberry pi pico wと電源供給用ケーブルのついたY字USBケーブル、USB-OTGケーブルを使って、Wifiに接続することができました。
FreePSXBootに標準搭載のunirom8

## はじめに
　公開されているFreePSXBootのメモリーカードイメージには、unirom8とよばれるツールが搭載されています。
　unirom8は、ディスクの起動、PARなどのカートのファームウェアの入れ替え、リージョンの変更、メモリカードの操作やデバッガーを搭載しています。
　本稿では、「unirom8 Home」を参考に、初代プレステで自作プログラムを起動する環境について、調べました。

https://unirom.github.io/

## メモリカードの操作
　FreePSXBootと併用すると、メモリカードのフォーマットが可能です。また、マルチカードの場合、カードイメージの切り替えをすることが可能です。
## ボタン操作
　unirom8が起動しているときに、特定のボタンを押すと以下の操作が可能です。
・R1ボタンを押すと、カート内のプログラムを起動可能
・□ボタンを押すたびに、シリアルポートの転送速度を切り替えることが可能
・L1ボタンと□ボタンを同時に押すと、デバッグモードに移行可能
## コンピュータとの間のシリアル接続関連
　初代プレステのシリアルポートを介して、コンピュータとシリアル通信が可能です。unirom8では、Windowsで動作するNOTPSXSerial、略して、nopsを使用して、シリアル通信を行います。LinuxとMacではmonoを使うと、nopsを起動することが可能です。
・コンピュータ側から、exeファイルを初代プレステに転送して起動可能
・様々なバイナリファイルを転送可能
・カート内のROMにROMファイルを書き込むことが可能
・メモリーカードへのファイルの書き込みが可能
・メモリーカードの内容をダンプ可能
・RAMの内容をダンプ可能
・RAMの状態の監視
・RAMのPokeが可能
・ブレークポイントでの読み書きが可能
・特定のアドレスを呼び出しや移動が可能
・カーネルのデバッグモードへの入退が可能。
## HEXエディタ
HEXエディタを利用可能です。
・L1 / R1：1ページ次あるいは前に移動
・L1 / R1 + Triangle：少し早く前後に移動
・L1 / R1 + Square：さらに早く前後に移動
・R2：RAM、EEPROM、BIOS等の1サイクル
・X：　バイトごとの編集
・L2：あるアドレスに手動で移動（ヒント：R2を使って、最初に保存してから移動）
・Start / Sel：カーソルのある所からコードを実行
・Circle：エディタ終了
　NOPSを使って、デバッグします。
## おわりに
　unirom8の機能は、github.ioに掲載のもの以外にもあるようです。そのような機能は、検索エンジンで直接、psxdev内の検索から、探す必要があります。

https://www.psxdev.net/
Rを学びたい Step15 2項分布

## はじめに
Rを学びたいStep15です。2項分布について学んでいきます！

## 2項分布とは？？
2項分布は、次のような「成功」か「失敗」の2択がある試行を何回も繰り返したときに、「成功」が何回起きるかを考える数学的な方法です。

```math
P(X = k) = nCk \cdot p^k \cdot (1-p)^{n-k}
```

```math
\begin{align*}
    &\bullet \ P(X = k): \text{試行 } n \text{ 回中、ちょうど } k \text{ 回成功する確率} \\
    &\bullet \ nCk = \frac{n!}{k!(n-k)!}: n \text{ 回の試行から } k \text{ 回成功する組み合わせの数} \\
    &\bullet \ p: \text{1回の試行で成功する確率} \\
    &\bullet \ 1-p: \text{1回の試行で失敗する確率} \\
    &\bullet \ k: \text{成功回数 } (0 \leq k \leq n) \\
    &\bullet \ n: \text{試行回数}
\end{align*}
```

## 問題の実践

10回コインを投げたとき、表がちょうど3回出る確率を求めなさい。
コインは公平で、表が出る確率  p  は  0.5  です。

```math
P(X = 3) = 10C3 (0.5)^3 (1-0.5)^7 = \frac{10!}{3! \cdot (10-3)!} \cdot 0.5^3 \cdot 0.5^7

```
```math
P(X = 3) = 120 \cdot 0.5^{10} = 120 \cdot 0.0009765625 = 0.117
```

```math
　{答え： } P(X = 3) = 11.7\%
```

## Rで実践
```R:
# コインの問題のパラメータ
n <- 10       # 試行回数
p <- 0.5      # 表が出る確率
k <- 3        # 成功回数

# 確率を計算
result <- dbinom(k, size = n, prob = p)

# 結果をパーセンテージ形式で表示
cat("P(X =", k, ") =", result * 100, "%\n")
```

```shell:
P(X = 3 ) = 11.71875 %
```

:::note info
まぁ、ただのコンビネーションの問題ですね！😊
:::
小売業における数理最適化事例

# はじめに
[TRIAL＆RetailAI Advent Calendar 2024](https://qiita.com/advent-calendar/2024/retail-ai) の 2日目の記事です。

昨日は [@rockmetoou](https://qiita.com/rockmetoou) さんの『[Safely sync database cluster to a standalone database for local usage](https://qiita.com/rockmetoou/items/3c8d2dee50623bde0675)』という記事でした。

運用上の負担軽減いい感じですね🙌

本日は、**『小売業における数理最適化事例』** です 
小売業での応用事例のイメージが少しでも伝わればと思っております🙇

# 数理最適化とは？
数理最適化は、最適な資源配分を行う数学的手法です
- 限られた資源を効率的に使い、最大の効果を引き出します
- 企業経営や交通、エネルギー管理などで活用されています
- 線形計画法や整数計画法などの具体的な手法があります

<img src="https://orsj.org/wp-content/uploads/2021/02/EmqZkzUUcAANeXx.jpg" width="600">  

図引用：[ORを探せ！](https://orsj.org/?page_id=3362)

# 達成したいイメージ

**『 ある数量の、ある商品を、特定の期間で、店舗ごとの規模感や、季節性(需要)などを加味して店舗別に配分したい 』**

_モチベーション_ ⇨ 多くの必要としている方にできるだけ行き渡るようにしたい💪

# お題
**『 合計「1,000個」のある商品「〇〇〇」を「5期間」に「5店舗」で、いい感じに配分する 』**

## 設定
- ある商品：架空の１商品(「〇〇〇」)
- 合計数量：1,000個
- 特定の期間：5期間
- 店舗数：5店舗
    - large：1店舗
    - middle：3店舗(middle1，middle2，middle3)
    - small：1店舗
- 規模感
    - large：middleの2倍の需要
    - small：middleの0.5倍の需要
- 季節性(需要)：以下の図にある３パターン
    - 各店舗は、以下のパターンで売れていくとする
        - pt1：large，middle1，small
        - pt2：middle2
        - pt3：middle3
                
![figure1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618314/b0c1fac0-cd96-32f2-1616-bc79c4bcd559.png)

## 条件：期間ごとの最大需要数
今回、各フォーマットごとの各期間における需要数の上限値は以下のものとする
- middle
    - 期間1,2,3,4,5 ＝　[100, 50, 50, 50, 20]
        - 期間1の最大需要数：100個、期間2の最大需要数：50個、...
- large：middleの2倍の需要
    - 期間1,2,3,4,5 ＝　[200, 100, 100, 100, 40]
- small：middleの0.5倍の需要
    - 期間1,2,3,4,5 ＝　[50, 25, 25, 25, 10]

## アプローチ：凸二次計画問題
凸二次計画問題は、目的関数が二次関数で制約条件が線形の最適化問題です
- 目的は、与えられた制約の中でこの二次関数の値を最小化または最大化することです
- この問題は、ポートフォリオ最適化や機械学習など多くの分野で応用されます
- 効率的なアルゴリズムが存在し、数理的に解きやすい特徴があります

# 最適化結果
以下の3つの条件を元に最適化します
- 需要(パターン)
- 各期間の最大需要数(例：middle⇨[100, 50, 50, 50, 20])
- 全体の数量(= 1,000個)

最適化結果
- それぞれのフォーマットで各期間の最大需要数を超えることがないです
- パターンと同じイメージの配分になっています
- 5店舗、5期間の合計が1,000個になっています

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618314/ecd2fcfb-edef-ad43-319e-9859997bfca4.png" alt="ローカル画像" width="500">

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618314/01fcd63f-b079-9593-2a9b-b71733bdca1e.png" width="800">


最適化結果の個人的な解釈
- largeがmiddle1,middle2の約2倍、smallの約4倍の配分になっていて、いい感じです
- middle3が全体で129個であり、まだ配分出来そうなので合計数量はもう少し多くても良さそうです
    - わかりやすく1,000個にしてみました⇨この条件なら1,100個でも良さそうです

# まとめ
実務では、様々な制約に悪戦苦闘しながら日々頑張っています💪

明日は、[@yang_zaiqi](https://qiita.com/yang_zaiqi)さんの「俺のAndroid™ スマートフォンで大規模言語AIモデルを動かせるの？」という記事です。お楽しみに！<br><br>

RetailAIとTRIALではエンジニアを募集しています。
興味がある方はご連絡ください！

https://www.recruit-retail-ai.jp/

https://hrmos.co/pages/trialgp/jobs?category=2020003768196907008


# 参考文献
- しっかり学ぶ数理最適化

https://www.kspub.co.jp/book/detail/5212707.html

- Pythonではじめる数理最適化（第2版）

https://www.ohmsha.co.jp/book/9784274231759/
GitHubのIssues・Projectsを活用し、個人開発のアップデートモチベを高める！

# はじめに
個人開発のアプリをリリースすると、ありがたいことにエンジニアの方々やユーザーの方々から多くのアドバイスをいただきました！
一度にすべてのアップデートはできないけれど、優先順位を決めてタスクを行うことにしました。その際に利用したGitHubのIssues・Projectsを活用方法を紹介します。

# Issuesを立てる
**Issues > New issue**からissue(タスク)を作成します。
右の**Labels**や**Projects**や**Milestone**を設定できます。

![daaa14c454ec0ec58e87d27493397510.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3090887/b74a37dc-6617-48e9-f256-c62e03c766e9.png)

下記のようにアップデートしたい内容についてのissueをすべて追加します。
![f8bdbb5089a063437a6bbc32213b35bb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3090887/957ab9ee-08d4-27c1-9dfd-568655fb32c6.png)

# Projectsを作成
**Projects > New  Projects**からProjects(計画)を作成します。
![dfa90514c638cc7d0d2c3eb87584c2ea.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3090887/d588acaf-96e4-3773-1af4-c498b3185e54.png)
Table、Board、Roadmapから作成したいProjectsをせんたうすることができます。今回は視覚的にわかりやすい下記のようなBoardを選択しました。
次にProjects nameをつけます。(例として今回は`@hinakkograshi's ポジコレver1.8.0`を作成します。)
![60b330efc3b05ec9093991167969e8c8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3090887/5d29f917-b410-0446-33d6-1fa33bf69e62.png)

# アップデートの計画を立てる
下記のようにIssueのProjectsにアップデートを実施したいバージョンを選択(例として今回は`@hinakkograshi's ポジコレver1.8.0`を作成します。)
![daaa14c454ec0ec58e87d27493397510.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3090887/f02b3b3c-563e-9db4-540d-ad53ce69bdd9.png)

Projects側でIssueが表示でき、進捗管理が立てやすくなります！
![8b41cbbcdd5c974bdcb18a8392d77b7e (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3090887/ac7c0f3c-43e8-3bbf-3552-e848a55e149e.png)
Lightningアプリケーションの強調表示ラベルについて



強調表示パネルは（動的フォームの設定をしない場合）ページレイアウトの「Salesforce モバイルおよび Lightning Experience のアクション」のボタンとコンパクトレイアウトの項目が表示されます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/8cc3237c-c901-5794-fbb4-4c58225205cd.png)

右上にある「編集」ボタンや「新規取引先責任者」についてはページレイアウトの「Salesforce モバイルおよび Lightning Experience のアクション」のアクションが表示されます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/0c674b94-d0c3-3084-9a76-3ef20591605e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/24d46b07-799c-4692-729d-a96bd23ee907.png)

強調表示パネルの左部分の項目はコンパクトレイアウトの項目の最初の 7 項目が表示されます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/d7e0e442-df5a-c2cd-0e6c-adb5da96d0a0.png)


なお、以前は強調表示パネルに表示される項目の数は最初の 5 個のみでした

詳細はこちらのヘルプをご確認ください。

>レコードページの参照関係項目にマウスポインタを置くと、強調表示パネルに、コンパクトレイアウトから最初の 7 項目が表示されます。以前は、強調表示パネルに表示される項目の数は最初の 5 個のみでした。

https://help.salesforce.com/s/articleView?id=release-notes.rn_lex_highlights_panel.htm&release=228&type=5


なお、動的アクションを有効にした場合、右上のボタンはページレイアウトの「Salesforce モバイルおよび Lightning Experience のアクション」のボタンとは異なりLightningアプリケーションの強調表示パネルの表示がされます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/2087556a-b219-d4ee-a221-1d255502f1d2.png)
CPI/Integration Suite 便利機能 Simulation Mode

## はじめに
この記事は [SAP Advent Calendar 2024](https://adventar.org/calendars/10423) の12月2日分の記事として執筆しています。

今回はSAP BTP Integraion Suiteの開発で便利なSumilation Modeについて紹介します。
Integraion Suiteって何？という方はこちらを参照ください。SAPが提供するローコードインターフェース製品です。SAP ERPとの連携はSAPからサポートされている為、比較的簡単です。（プロトコルやデータ形式によっては苦労する）
https://www.sap.com/japan/products/technology-platform/integration-suite.html
## TL;DR
・Simulation Modeを使うことでデプロイせずに結果を得る事ができる為、開発が捗ります。
## 前提
今回は以下のようなIntegration Flowを作成しました。処理そのものに特に意味はありません。
処理としては、
①S4HANA Public CloudのPurchaseOrder APIのJsonデータを取得
②JsonについているContextを削除
③JsonをXMLに変換
④XMLデータを伝票単位に分割
⑤PurchaseOrderの番号により分岐する
になっております。
![スクリーンショット (187).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704439/d1c13264-db9d-1f0f-b81f-2500bfaf0c63.png)
ただ、これをランタイムにデプロイしてタイマー起動やAPIツールで結果を見るというのは面倒です。
## Simulation Modeがあるよ
Simulation Modeを使えばデプロイせずとも結果を取得することが可能です。画面の右上に再生ボタンのようなものがありこれを使います。
![スクリーンショット (190).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704439/720655e2-5103-0aa2-8f71-7b9847e7ee47.png)
使い方は、処理を開始したい場所にカーソルを合わせSimulation Start Pointを選択。処理を終了地点にカーソルを合わせSimulation End Pointを選択する。
![Videotogif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704439/0f305954-03a9-7516-a5c5-794e26c4fb3b.gif)
上記のような操作をすることでデプロイせずとも開発物の変更の結果を得る事が出来ます。
・上の分岐結果　伝票番号が4500003529のペイロードが１つ来ている
![スクリーンショット (191).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704439/3179adc0-e935-89a0-ee41-6801893d6139.png)
・下の分岐結果　伝票番号が4500003529以外のペイロードが２つ来ている
![スクリーンショット (1921111).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704439/6ab891ad-7c57-bf56-829e-8a21ad34e3b8.png)
## 結論
Simulation Modeを使うことでデプロイせずとも結果を得る事が出来ます。便利なのでおすすめです。
## その他
https://help.sap.com/docs/cloud-integration/sap-cloud-integration/general-and-iterating-splitter-examples
https://api.sap.com/api/CE_PURCHASEORDER_0001/overview
Git _VSCodeの設定

# VSCodeをエディタに設定
Macの場合:
1. VS Codeを開く。
2. メニューバーから View > Command Palette を選択。
3. 「Shell Command: Install 'code' command in PATH」を検索して選択。
4. git commit --allow-empty コマンドでエディタが開けばOK
【Ruby】ファイル操作のライブラリ

# はじめに
こんにちは！アメリカの大学で語学を学びながら、独学でソフトウェアエンジニアを目指している者です。
こんにちは！今回は、Rubyでファイル操作を行う際に便利な標準ライブラリ、`Find`、`Tempfile`、`FileUtils`について詳しく紹介します。

# `Find` ライブラリ
Find はディレクトリを再帰的に巡回して、条件に合うファイルを見つけるためのライブラリです。大規模なディレクトリ内のファイル検索に便利です。
```ruby
require 'find'

Find.find('/path/to/directory') do |path|
  puts path if path =~ /example\.txt$/  # example.txtを見つけた場合に出力
end
```

### Find.fileの応用例
以下のファイルは特定のディレクトリを無視しながら一覧を出力するコードになります
```ruby
require "find"

IGNORES = [/^\./, /^\.svn$/, /^\.git$/]  # 無視するパターンを定義

def listdir(top)
  Find.find(top) do |path|
    if File.directory?(path)
      dir, base = File.split(path)  # ディレクトリ名とベース名を分割
      IGNORES.each do |re|
        if re =~ base  # 無視リストに一致する場合
          Find.prune  # 再帰的な検索を中断
          next
        end
      end
      puts path  # 無視されなかったディレクトリを出力
    end
  end
end

listdir(ARGV[0])  # コマンドライン引数で指定されたディレクトリを検索
```
以下はコードの解説です。
* `Find.find(top)`
このメソッドは、指定したディレクトリ（`top`）を再帰的に探索し、発見したすべてのファイル・ディレクトリのパスをブロック引数の `path` に渡します。
たとえば、`top` に `/home/user` を指定すると、`/home/user` 以下のすべてのファイルやフォルダのフルパスが順に `path` に入ります。
* `File.split(path)`
`path` をディレクトリ部分と末尾の名前（ベース名）に分割します。たとえば、`/home/user/.git` を渡した場合、`/home/user` と `.git` に分かれます。

* `IGNORES.each` と `Find.prune`
無視したいパターン（隠しファイルや `.svn`、`.git` など）に一致するかを確認し、一致した場合は `Find.prune` によりそのディレクトリの探索をスキップします。

* `puts path`
無視されなかったファイルやフォルダのパスを出力します。

# `Tempfile` ライブラリ
Tempfile はプログラムの実行中に必要な一時ファイルを簡単に作成・管理できるライブラリです。
プログラム終了時に自動で削除されるため、後処理を気にする必要がありません。
```ruby
require 'tempfile'

Tempfile.open('example') do |tempfile|
  tempfile.puts "一時データの書き込み"
  puts tempfile.path  # 一時ファイルのパスを確認
end
```
### `Tempfile`の応用例
以下は画像データを一時的に保存する例です。
```ruby
Tempfile.open(['image', '.png']) do |tempfile|
  tempfile.write(image_data)  # 画像データの一時保存
  puts "Temporary file: #{tempfile.path}"
end
```

### 利用場面
* 一時的なファイル保存：画像やPDFなどの中間データを処理する際。
* データ加工やテスト：テストコードでの一時ファイル操作にも便利です。

# `FileUtils` ライブラリ
`FileUtils` はファイルやディレクトリのコピー、移動、削除などを行うための便利なメソッドを提供するライブラリです。
シェルコマンドを使わずに同様の操作をRuby内で完結できます。
```ruby
require 'fileutils'

FileUtils.cp('source.txt', 'destination.txt')
```

### `FileUtils`の応用例
バックアップを取るコードの例を示します。
```ruby
FileUtils.cp_r('/source/directory', '/backup/directory')
puts "バックアップ完了！"
```
### 利用場面
* バックアップ処理：データの定期バックアップに使用。
* インストールスクリプト：アプリのセットアップ時にフォルダや設定ファイルを自動作成。
* ディレクトリ整備：複数のフォルダを一度に作成したり、不要なファイルを削除する場合。
# まとめ
* `Find`：ディレクトリを再帰的に巡回してファイルを検索。
* `Tempfile`：一時ファイルの作成と自動削除をサポート。
* `FileUtils`：ファイルやディレクトリの操作を簡単に。
これらのライブラリを組み合わせれば、複雑なファイル操作も効率的に行えます。
Xcode: A build only device cannot be used to run this target.

下記のエラーが発生した場合、Target Device が選択されていないことが原因です。

No supported iOS devices are available. Connect a device to run your application or choose a simulated device as the destination.

![スクリーンショット 2024-12-01 10.34.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514807/0c0f1b73-b933-7b3a-df10-be1c67559ffe.png)

xcode のウィンドウの一番上で「Any iOS Device (arm64)」 になっているものを、「iPhone 15 Pro Max」等に選択し直すことで実行できるようになります。

![スクリーンショット 2024-12-01 10.40.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514807/964388fd-b289-e6b3-85b9-51a4384904c3.png)

![スクリーンショット 2024-12-01 10.42.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514807/2cc50b50-7e84-741f-915b-4e429cdd6e55.png)
AtCoder ABC 382 C - Kaiten Sushi 

公式の解説などに「二分探索」があり、もしかしてまた偽ACをやってしまったのか・・？ と不安になって再整理したので、せっかくだから晒しておきます。

## コンテスト中に考えたこと

* 人数(N)と寿司(M)が 2 x 10^5 なので総当たりしたら間に合わないよねぇ
* 寿司はどの順で流しても誰に食べられるのかの結果は変わらないから、好きな順で判定しても大丈夫
* ということは、寿司をおいしい順に並べて、最初の客が食うものを記録して次の評価から除外、残りを次の客が食べるか、を順に判定していけば、線形に何回か回るだけでいけるか
* 「プラットフォーム」みたいだな。（思考のノイズ）

![640.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3798407/df68f977-9241-677a-0472-1ac21df4aec3.jpeg)

## 結果

```cpp:Main.cpp
#include <bits/stdc++.h>
using ll = long long;
using namespace std;

struct Sushi {
	ll number;	// 皿番号
	ll star;	// おいしさ
	ll eater = -1;	// 食べた人

	// priority_queue に「おいしさ」順に並べてもらうための演算
	bool operator<( const Sushi & other ) const
	{
		return star < other.star;
	}

	bool operator>( const Sushi & other ) const
	{
		return star > other.star;
	}
};


int main( void )
{
	// 入力
	ll N, M;
	cin >> N >> M;

	vector<ll> vecA(N+1);
	for( ll i = 1; i <= N; ++i)
	{
		cin >> vecA[i];
	}

	// 寿司がおいしい順に並んでいるキューを作成
	priority_queue<Sushi> pq;
	for( ll i = 1; i <= M; ++i)
	{
		ll _star;
		cin >> _star;
		Sushi tmp = { i, _star, -1 };
		pq.push( tmp );
	}

	// 結果格納用
	vector<Sushi> vecResult;
	// 上流に並んでいる客が食べてしまう皿を順に選別していく
	for( ll i = 1; i <= N; ++i)
	{
		while( ! pq.empty() )
		{
			Sushi _sushi = pq.top();
			if( vecA[i] <= _sushi.star )
			{
				// 食べる客を更新して結果に追加
				_sushi.eater = i;
				vecResult.push_back( _sushi);
				// キューからは消す
				pq.pop();
			}
			else
			{
				break;
			}
		}
	}
	// 誰も食べなかった皿も追加
	while( ! pq.empty())
	{
		Sushi _sushi = pq.top();
		vecResult.push_back( _sushi);
		pq.pop();
	}

	// 結果を皿番号順に並べなおして出力
	sort( vecResult.begin(), vecResult.end(), [](const Sushi & a, const Sushi & b){ return a.number < b.number;} );
	for( auto itr = vecResult.begin(); itr != vecResult.end(); ++itr)
	{
		cout << itr->eater << endl;
	}

	return 0;
}
```
Agile Japan 2024 参加してきました！ （感想）

# 開催日：2024/11/21～22　　開催地：東京＆オンライン

https://2024.agilejapan.jp/

::: note warn
上記のイベントに参加してきたので感想をつらつらと書いていこうかと思います！
1日目は仕事の都合であまり視聴できず、2日目は現地参加だったものの、後方のブースエリアで話してた時間が多く、講演全部聞けてないです。後日録画公開されたら、ちゃんと見返したいと思います。というわけで、当記事はレポートというより、かいつまんで所感を述べるだけのポエムです。悪しからず。(^^;)
:::

## テーマ

今年のAgile Japanのテーマは「People-Centric Agile」。生成AI関連の発表が多かったのですが、だからこそその対比で人間中心の原則が改めて感じられる内容でした。僕自身、スクラムマスターをしていて、常々「プロダクト」ではなく「人」を扱っている、という感覚があり、そういった点でも腑に落ちる瞬間が多かったです。

## １日目

### 【基調講演】 生成AI時代における人間の情熱とプロダクト志向

この講演の一番のパワーワードは「情熱駆動開発」。人間にしか持ちえない原初の欲求「情熱」。「情熱とは本質に向き合うこと」という定義も、かなり納得感がありました。一方で、「情熱」だけで突き進むと、何かを見失い失敗するという警句もあり、そのために生成AIを使って一般論から諭してもらう（＝ブレーキ役になってもらう）という提案も。人間とAIの特性を活かした役割分担として妥当だと感じました。

### 人間中心のマネジメントへの変革：スクラムが拓く組織の未来

こちらもなかなか衝撃的な内容でした。資料の中にスクラムの考案者ジェフ博士が別イベントで語ったAIの話が出てきます。「Scrumによる⼈とAIの統合：すべてのマネージャー、コーチは、今後成功のためにAIをチームに統合していく必要がある」とのことで、スクラムチームのDEVメンバーの半数以上がAIみたいな世界の話です。さらにそれが進むと、スクラムマスターもAIに置き換わり、最終的にPOだけが人間となるだろう、と。
いやいや、スクラムマスターはさすがにAIにはならないでしょ、と最初思ったのですが、DEVが全員AIメンバーに置き換わったとしたら、スクラムマスターもAIが務めた方が上手く回るかも、と思い直し、戦々恐々となりました。少なくとも僕はAIスクラムマスター以上にAIデベロッパーの気持ちを分かってあげられる自信がないです(笑)

### 大学生セッション

はこだて未来大学の学生さんをはじめとする３組の事例発表があり、こちらも興味深い内容でした。アジャイル開発と言いつつも、大学のテーマ学習の枠内で活動するため制約も多く、どうしても変則的なスクラムにならざるを得ないのですが、そんな中でも肌感覚でアジャイルの本質的なコンセプトをきちんと掴んでいるのが、素晴らしいなと感じました。ネイティブアジャイラーの瑞々しい感性は本当に羨ましく、将来には期待しかないです！

## ２日目

### 組織にアジャイルな「芯」をつくろう

レッドジャーニー市谷さんの講演。市谷さんが長年追い続けてきたテーマ、日本型組織の「芯」とは？ 失われた芯に代わってどうやって新たな「芯」を宿すのか？ という問いに対する最終回答の一端がついに明かされました！ 所感としてはずっと見続けてきた壮大なドラマシリーズの最終シーズン第一話を観た、という感じで早くこの続きが観たいと思わずにはいられませんでした。
前半の「現業最適化組織」から「価値創出型組織」への転身を阻む４つの壁とか、共感しかなく、「これ、まさにウチの会社の話じゃん」と思った方も多いのではないかと。
そして、その具体的な解決策として示される「中間的生成的な場をつくる」というアプローチ。具体例の一つとしてPdMO（プロダクトマネジメントオフィス）という形態が紹介されます。ぱっと見、絵だけを見ると似たような主旨のチームはこれまでもあったのでは、と早合点してしまいそうですが、重要なのはその先で出てくる「制御の反転」というコンセプト。そのチームが個別の各チームを統制するのではなく、要請に基づく支援を提供するという点。あくまでも自己組織化した個別チームが主体。
実際にこの「中間的生成的な場」を組織に実装しようと思うと、考えなければいけないことは多そうですが、そのあたりも講演内容で軽く触れられており、起こりそうな問題とその対策が示されます。
正直、まだ完全に理解が追い付いてはいないのですが、この先の展開を期待せずにはいられない内容でした。


### 組織をアジャイルにしていくのにプロジェクトファシリテーションが必要ないわけがない

同じくレッドジャーニー森實さんと松本屋の松潤さんの対談形式の講演。感想を一言で述べるなら「温故知新」。「アジャイル」という言葉がまだ世に広まっていない時代から、[オブジェクト倶楽部](https://objectclub.jp/)（のちにオブラブに改名）として活動し、アジャイルの礎を築いた諸先輩方には改めて敬意と感謝の意を表明したいと思いました。
「どんな手触りですか？」という質問は人間の感覚を引き出す良い問いかけだと思ったので、僕もどこかで使ってみたい。
ちなみにChatGPTに「アジャイル開発の手触り」を聞いてみたら「まるで粘土をこねて形を作るような感触」と返ってきました。


### その他

AgileStudioさんのブースで念願の『AGILE PRACTICE MAP（小冊子版）』をゲットしました♪　小冊子といっても150ページ以上あります。いや、まぁ内容自体は[Web版](https://www.agile-studio.jp/agile-practice-map)で知ってはいたのですが、やっぱり形としても欲しいじゃないですか。昨年はオンライン参加だったため入手できず、プラクティスコレクターの名折れと凹んでいたのですが、ようやく手にすることができました。書籍としてきちんとレイアウト構成もされているので読みやすいです。ブースでもとても親切に対応していただき嬉しかったです。

ITpreneursさんのブースでいただいた「[アジャイルのスパイスが効いた自律したチームを作るチキンカレー（中辛）](https://www.itpreneurs.co.jp/data-and-knowledge/20241121agilejapan/)」も美味しかったです♪（後日、自宅にて完食）

その他、各ブースでノベルティグッズをいただいたりして、帰りはリュックがパンパンでした（嬉）

なにより昨年、飯テロに泣いた今半のすき焼き弁当、今年はしっかり現地で食して参りました！　一年越しに食べる味は最高でした！　スタッフの皆様、ありがとうございました！

学びになったり、繋がりができたり、グッズをゲットしたり、色々なものが得られるAgile Japan。また来年も参加したいと思いました！
はじめてブラウザ拡張機能を作るときの流れ（Firefox）

# 概要

この記事は[初心者のブラウザ拡張機能 Advent Calendar 2024](https://qiita.com/advent-calendar/2024/browser-extension)の1日目の記事です。

Firefoxを使ってブラウザ拡張機能を作るときの流れを説明します。

今回はサンプルとしてQiitaの拡張機能を作ることにして、記事内のタグの背景色を変更してみます。

![tag color change](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302006/ae8b9be4-db80-6e24-8392-94b44d477571.png)


# 大まかな流れ

1. `manifest.json`を作る
1. メインの処理を書いたJavascriptを作る
1. アイコンを作る
1. 公開する

# 1. manifest.jsonを作る

`manifest.json`とはブラウザ拡張機能の仕様書のようなもので、バージョンや詳細な説明、使用するJavascriptファイル、ブラウザの権限などを設定します。

最小限のファイルを作ります。

```json:manifest.json
{
    "manifest_version": 3,
    "name": "init-extention",
    "version": "0.1",
  
    "description": "これは初めてのブラウザ拡張機能です。Qiitaの記事内のタグの背景色を変えます。",
  
    "icons": {
      "48": "icons/icon-48.png"
    },
  
    "content_scripts": [
      {
        "matches": ["*://qiita.com/*"],
        "js": ["main.js"]
      }
    ]
}
```

| 項目 | 説明 | 注意点 |
| ---- | ---- | ---- |
| manifest_version | マニフェストファイルのバージョンです。2か3を選びます。 | Firefoxは2でも3でも現在動くのですが、Google Chromeは3のみのようです。なので3にしておいたほうがよさそうです |
| name | 拡張機能の名称 | |
| version | 拡張機能のバージョン | 正式に公開する際はこのバージョンを上げていくのでバージョン管理を考えてつけたほうがよいです |
| content_scripts | 拡張機能に登録するJavascriptで、主にページ内の要素に対する変更を行います。`matches`でスクリプトを実行する対象のドメインを指定し、`js`でファイルを指定します。 | ブラウザのメニューなどページ要素以外は`background`スクリプトに記述します |




# 2. メインの処理を書いたJavascriptを作る

処理はタグを表示しているHTMLの要素を取り出し、背景色を変えるだけです。
ここでは簡単に背景色を赤色に変えます。

```javascript:main.js
const tags = document.querySelectorAll("a.style-mp1hhj"); 
tags.forEach(tag => {
    tag.style.backgroundColor = "red";
});
```

`document.querySelectorAll`は指定したセレクタに一致する要素をリスト（NodeList）で返します。
[Document: querySelectorAll() メソッド](https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll)

これはループ処理ですべての要素にアクセスできるので、`forEach`で一つづつ取り出し`style.backgroundColor`に好きな色を指定します。ここでは`"red"`を使いました。



# 3. アイコンを作る

アイコンはなくても問題ないですが、拡張機能を表すものにしておくとわかりやすいです。
基本は48ピクセル✕48ピクセルです。

今回はこれを使いました。こちらを使っていただいても大丈夫です。

![icon-48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302006/38dd84dc-f9d2-32f8-5711-0df0b7141e9a.png)

# 4. 公開する

FirefoxのURLバーに`about:debugging#/runtime/this-firefox`を入力して検索します。

すると`デバッガー画面`に遷移します。`一時的なアドオンを読み込む`を押して

![デバッガー画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302006/098755eb-fd60-97fc-69e2-f767fd807cc0.png)

エクスプローラーより今回作成したファイルのうち`manifest.json`を選びます。
すると登録されます。

![拡張機能登録画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302006/320c7d93-6ab6-fd95-c719-1a178b80e3ec.png)

これはあくまで一時的な公開で完全にローカルでの利用です。再起動などで無効になってしまいます。開発中はここで動作をチェックするとよいでしょう。

:::note info
正式な公開方法はアドベントカレンダーの別記事で扱います
:::

この状態でQiitaの画面に接続すると、タグの色が変わって見えます。

![tag color change](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302006/886fea50-90b7-a389-c057-1169800f85d8.png)

タグ名ごとに色を変える、タグ名の前にアイコンをいれるなども工夫次第でできそうです。

# 参考

[初めての拡張機能](https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension)
甥っ子の鉄道写真の記録を残したいがためにアプリを開発した話mini

## はじめに
昔、というほどでもありませんが、フィルムカメラだったり、インスタントカメラが主流の時は撮影可能枚数を気にしながらの撮影だったため、撮影タイミングをかなり気にしていた記憶があります。

ですが、携帯、スマートフォンの登場以降はその撮影枚数など気にせず好きなタイミングで好きなだけ写真を撮ることが可能となりました。そして整理されずにたまっていく写真。

そのような中、甥っ子が撮影した鉄道写真に夢中になっている姿を見て、写真を効率的に整理し、思い出を形に残す方法について考えるようになりました。そして、自分自身で専用のアプリを開発するに至りました。完成度については、プロの皆さんにはあしもとにも及びませんが温かい目で読んでいただけるとありがたいです。


## 私について
キャリアチェンジを目指す中で、これからの時代に必要なスキルとしてプログラミングに興味を持ちました。特に、自分でアイデアを形にできるところに魅力を感じ、2024年3月から本格的に、プログラミングスクールに入学し学び始めました。

## なぜ作ったのか
プログラミングスクールでの学習の一環として、自分の身近な課題を解決するアプリの作成に挑戦しました。甥っ子の鉄道写真をきっかけに、プログラミングのスキルを活かして、写真の整理や共有が簡単になるアプリを作ってみることにしました。

## どんなアプリなのか
機能一覧と一部機能が下記になります。
### 🚆 機能一覧
- ユーザー登録機能/ログイン機能/Googleログイン機能
- パスワードリセット機能
- マイページ
    - ユーザー情報編集
    - アカウント削除
- 投稿機能
    - 駅名、路線名、都道府県、コメント、撮影場所、画像
- 投稿一覧
    - 詳細（編集、削除）
    - お気に入り追加ボタン（電車アイコン）
    - 検索機能（都道府県、路線名、駅名、フリーワード）
- ユーザー自身の投稿一覧
- お気に入り投稿一覧
- バッジページ
- SNSシェア機能（X：旧Twitter）


###  🚆 機能紹介
| 新規登録  |
| :-------------: |
| [![Image from Gyazo](https://i.gyazo.com/41a774cb3ef2ac6f0c01015f601c51ae.png)](https://gyazo.com/41a774cb3ef2ac6f0c01015f601c51ae)  |
| 名前、メールアドレス、パスワード、パスワード確認から新規登録が可能。 |

| 新規投稿  |
| :-------------: |
| [![Image from Gyazo](https://i.gyazo.com/c6c3ce75c4000c0f8c435db94e562dd9.png)](https://gyazo.com/c6c3ce75c4000c0f8c435db94e562dd9)  |
| 駅名と路線名はID番号から簡単に一致させることができます。全て必須項目です。 |

| 投稿一覧  |
| :-------------: |
| [![Image from Gyazo](https://i.gyazo.com/cc4e8657b264515bc24dc63e37f1ca4f.png)](https://gyazo.com/cc4e8657b264515bc24dc63e37f1ca4f)  |
| 投稿一覧からお気に入り登録や投稿詳細を見ることが可能。上部には様々な方法で検索できるようにしています。（お気に入り一覧。ユーザー自身の投稿一覧も同様） |

| 投稿詳細  |
| :-------------: |
| [![Image from Gyazo](https://i.gyazo.com/4e76bd148b3308819294875397e87bee.png)](https://gyazo.com/4e76bd148b3308819294875397e87bee)  |
| 投稿詳細から編集、削除が可能。 |

| マイバッジ  |
| :-------------: |
| <a href="https://gyazo.com/4d2fe6556c5209ed50ffe5a2b93d9771"><img src="https://i.gyazo.com/4d2fe6556c5209ed50ffe5a2b93d9771.png" alt="Image from Gyazo" width="788"/></a>  |
| 投稿数に応じたバッジ機能。何枚でバッジが現れるかはお楽しみ。 |


## 作ってみて思ったこと
### デザイン難しい
みやすいデザイン、使いやすいボタンの配置や入力フォームを考えることは非常に難しいと感じました。特にデザインサイトのようなものからすでに完成されたものは利用できますが、そのままではうまく反映されず、コードをちゃんと理解することの重要性を感じました。

### エラー解決の難しさと学び
開発中、予想もしないエラーやバグに直面するたびに、解決のためのリサーチに多くの時間を費やしました。特に、Google認証や502エラー問題に悩まされました。そのたびに公式ドキュメントやコミュニティを活用し、少しずつ理解を深めました。エラー解決を通じて、問題解決力や検索スキルの重要性を改めて実感しました。

###  機能の取捨選択の難しさ
開発を始めた当初は、「あれもこれも入れたい」と多機能なアプリを目指していました。しかし、時間やスキルの制約もあり、すべてのアイデアを実現するのは難しいと感じました。そのため、まずは写真の整理と共有という基本機能に集中し、シンプルなアプリとして完成させることを目指しました。この経験を通じて、優先順位をつけることの大切さを学びました。

## おわりに
今回のアプリ制作を通じて、学んだ知識を形にする楽しさを実感しました。最初は何も分からなかった私がここまでのものを作れるようになったのは、大きな自信になりました。他の受講生の皆さんの作品を見て、アイデアの豊かさや技術力に刺激を受けると同時に、自分ももっと成長したいという気持ちが高まりました。

これからはさらにスキルを磨き、多くの人に価値を届けられるアプリを作りたいと思います。そして、プログラミングを通じて得た楽しさや喜びを他の人にも伝えられる存在になりたいです。

最後に、家族やスクールの講師、受講生仲間の皆さんに心から感謝します。皆さんがいたからこそ、ここまで頑張ることができました。これからも感謝の気持ちを忘れずに、一歩ずつ成長していきます！

👇より詳しい内容は下記記事になります。

https://qiita.com/wa-chan222/items/30e0e160d43347dc6725
Enumクラス用のSerializerを用意する

# はじめに
今回はRepositoryなどでデータの受け口として使うEnumに対してのSerializerを紹介していきます
### 本文
まず、受け口のデータクラスにあるEnumを肩として持っている変数に下記を追加します
```kotlin
@Serializable(with = Hoge::class)
@SerialName("hoge")
    val orderStatus: @Contextual Hoge?,
```
次に変換用クラスを実装していきます
```kotlin
class HogeSerializer : KSerializer<Hoge> {

    override val descriptor: SerialDescriptor
        get() = PrimitiveSerialDescriptor("hoge", PrimitiveKind.STRING)

    override fun deserialize(decoder: Decoder): Hoge {
        // fromCodeは該当Enumクラスにcompanion objectとして探し出すための関数を実装しておく
        return Hoge.fromCode(decoder.decodeString())
    }

    override fun serialize(encoder: Encoder, value: Hoge) {
        encoder.encodeString(value.code)
    }
}
```
これで完成です
上記はリモートから受けるものがStringの場合ですが`encodeInt`等にすれば他のプリミティブ型でも変換することができます
### 最後に
KSerializerを使えばリモートからのデータを自分たちのアプリで使いやすいように変換することができるので備忘録として残してみました
以前はDate型に変換するための記事も書いていますので、よければ見てみてください
最新rails8でreact & typescript & tailwindcssを一緒に使う方法！

# はじめに
rails8でreact & typescript & tailwindcssを使って動作検証をしたい時はないでしょうか？
私はございましてセットアップを行いましたので備忘録を残しておきます！

# 環境

```
❯ ruby -v                                                  
ruby 3.3.6 

❯ rails -v                                                 
Rails 8.0.0

```

# railsのセットアップ
以下のように実行することで、tailwindを最初から使用でき、reactを後から簡単に導入できる形でrailsをnewできます
```
rails new react-rails --javascript esbuild --css tailwind
```

テストで軽くtailwindが使えているか見ます
```
 bundle exec rails g controller tests index
```

```app/views/tests/index.html.erb
<h1 class="text-orange-700">Tests#index</h1>
<p>Find me in app/views/tests/index.html.erb</p>
```

サーバーを立ち上げます
```
./bin/dev
```

`http://127.0.0.1:3000/tests/index`にアクセスすると以下のように表示できました
 ![スクリーンショット 2024-12-01 9.25.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492674/d360f990-3d7b-0829-2c5a-65d5c988f662.png)

# reactのセットアップ

以下のコマンドでreactのライブラリ関連をインストールします
```
yarn add react react-dom

yarn add -D @types/react @types/react-dom
```

以下のようなファイルを追加します
```app/javascript/Test.tsx
import React from 'react';
import { createRoot } from 'react-dom/client';

const container = document.getElementById('root');

const root = createRoot(container);

document.addEventListener('DOMContentLoaded', () => {
  root.render(
    <>
      <h1 className="text-blue-600">呼ばれたよ</h1>
    </>
  );
});
```

先ほどのindex.html.erbを以下のように修正します
```app/views/tests/index.html.erb
<h1 class="text-orange-700">Tests#index</h1>
<p>Find me in app/views/tests/index.html.erb</p>

<%= javascript_include_tag "Test", defer: true %>

<div id="root"></div>
```
tailwind.config.jsの設定を変更します
```tailwind.config.js
     // './app/javascript/**/*.js'
     './app/javascript/**/*.*' //こう変更する
```

サーバーを立ち上げます
```
./bin/dev
```

`http://127.0.0.1:3000/tests/index`にアクセスすると以下のように表示できました
![スクリーンショット 2024-12-01 10.36.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492674/ec393648-eae9-6b10-8b54-056367d53397.png)

# 最後に
弊社CBcloudではエンジニアの募集を行なっております！
https://recruit.cb-cloud.com/

railsもいっぱい書けますので、rubyやrailsが大好きな仲間を募集してます！
v0.devからnpx shadcn add コマンドコマンドでインストールしようとした発生したエラーと対処法

先日、v0.devで生成したコンポーネントをnpxコマンドでインストールしようとした際に予期せぬエラーに遭遇しましたので、その解決までのプロセスを共有したいと思います。同じような問題で困っている方の参考になれば幸いです。

---

## ❌ エラーが発生

### 発生したエラー1例
```bash
Error: Cannot find module '@/components/ui/button'
```

### エラーの状況
- URLから直接コンポーネントをプロジェクトに追加しようとした。
- コンポーネントを事前にインストールしないまま利用した。
  ```bash
  npx shadcn@latest add "https://v0.dev/chat/b/[コンポーネントID]?token=[トークン]"
  ```

### エラーの原因を調査した結果

調査の結果、以下の2つの主要な原因が特定されました：

1. **コンポーネントの未インストール問題**
   - `shadcn/ui`コンポーネントが事前にインストールされていない
   - プロジェクト内にソースコードが存在せず、インポートパスが解決できない状態だった

2. **導入プロセスの不備**
   - `v0.dev`から生成されたコードをそのまま使用していた
   - 必要なセットアップ手順が未実行だった
   - 依存関係の管理が適切に行われていない

---

## 💡 なぜコンポーネントの事前インストールが必要なのか

コンポーネントの事前インストールの必要性について、詳しく調査してみました。その結果、以下のことがわかりました。

### コンポーネントの事前インストールが必要な理由

1. **コードジェネレーターとしての特徴**
   - `shadcn/ui`は通常のライブラリと異なり、コードを自動生成する仕組みを採用
   - 各コンポーネントには独自の依存関係とスタイルが含まれており、プロジェクトに適合させる必要がある

2. **高いカスタマイズ性**
   - コンポーネントをインストールすると、ソースコードが直接プロジェクトに追加され、自由に編集できる
   - プロジェクトの要件に合わせて修正できるため、通常のnpmパッケージより柔軟な対応が可能である

3. **ビルドプロセスとの統合**
   - コンポーネントにはTailwind CSSに依存したスタイルが組み込まれている
   - インストール時にTailwindの設定が自動追加され、ビルドプロセスに適切に統合される

### コンポーネントの事前インストールによる具体的なメリット
1. **パフォーマンスの最適化**
   - 必要なコンポーネントだけを選んでインストールできるので、無駄がありません
   - 使っていないコードは自動的に削除されるため、ファイルサイズが小さくなります
   - その結果、ページの読み込みが速くなり、ユーザー体験が向上します

2. **コードベースの管理性向上**
   - コンポーネントのバージョンを簡単に管理できます
   - チームで開発する際に、誰がいつどのように変更したかが分かります
   - エラーが起きたときに、原因を特定しやすくなります
   - コードレビューがしやすくなり、品質管理が容易になります
---

## 🎯 具体的な対策

エラーを解決するための具体的な対策について、AIアシスタントと詳細な分析と議論を重ねた結果をまとめました。


### 🔄 基本フロー

#### 1️⃣ v0.devでのコンポーネント設計とエクスポート
- v0.devにアクセスし、プロンプトを使ってコンポーネントを設計（例：「ヘッダーコンポーネントを作成して」）
- 生成されたコンポーネントの右上にある「Download」ボタンをクリックしてZIPファイルをエクスポート
- ダウンロードしたZIPファイルを任意のディレクトリで解凍
- 解凍したフォルダ内のapp/page.tsxファイルを開いてコードを確認

#### 2️⃣ AIによるコード解析
- page.tsxのコードをAIアシスタントに共有し下記を依頼
   - コンポーネントを自動検出
   - 必要な依存関係を特定
   - インストールコマンドを提案

#### 3️⃣ コンポーネントのインストール
- npx shadcn-ui@latest addコマンドを使用して必要なコンポーネントをインストール（例：npx shadcn-ui@latest add button）
- インストールされたコンポーネントが@/components/ui/ディレクトリに配置されていることを確認
  - コンポーネントが正しいディレクトリに配置されていないと、インポートパスが機能せず、ビルドエラーの原因となる
- tailwind.config.jsにアニメーションや色の設定が追加されていることを確認
  - これらの設定が不足していると、コンポーネントのスタイルやアニメーションが正しく機能しない
- components.jsonの設定が正しく更新されていることを確認
  - このファイルはshadcn/uiの設定を管理しており、不正な設定はコンポーネントの動作に影響を与える

#### 4️⃣ v0.devからコンポーネントをインストール
- v0.devで生成したコンポーネントのURLを使用して、以下のようなコマンドを実行：
  ```bash
  npx shadcn@latest add "https://v0.dev/chat/b/[コンポーネントID]?token=[トークン]"
  ```
  - コマンド実行後、コンポーネントが自動的にプロジェクトに追加されます

#### 5️⃣ テストと検証
- Next.jsの開発サーバーを起動（npm run dev）
- ブラウザで該当ページにアクセスしてコンポーネントの表示を確認
- コンソールでTypeScriptエラーやビルドエラーがないか確認
- エラーが発生した場合は、エラーメッセージをAIに共有して解決策を得る

---

## 📝 まとめ

1. **事前準備の重要性**
   - コンポーネントのインストールは必ず公式の手順に従う
   - 依存関係の確認を忘れずに行う

2. **トラブルシューティングのポイント**
   - エラーメッセージを注意深く確認
   - 必要なコンポーネントを適切にインストール
   - パスの設定を正確に行う

3. **ベストプラクティス**
   - コンポーネントは段階的に追加
   - 各ステップでの動作確認を忘れずに
   - エラーログは詳細に記録

---

## 📞 参考

### 公式ドキュメント
- [shadcn-ui ドキュメント](https://ui.shadcn.com/)
- [v0.dev ドキュメント](https://v0.dev/docs)
- [Next.js ドキュメント](https://nextjs.org/docs)
IDAで実行ファイルを書き換えてみる

# はじめに
ソフトウェア解析ツールである IDA を用いて，実行ファイルのアセンブリ命令を書き換えてみます．
簡単なプログラムについて命令の書き換えを行い，プログラムの振る舞いを変えることを目標とします．

# 実行環境
- IDA Freeware 7.7
- MinGW W64 builds 5.0.0
- Windows 11 23H2

# 解析対象プログラム
チュートリアルとして以下のプログラムを使用します．
- 「abc」が入力されたら「Hello!」を出力する
- 「abc」以外が入力されたら「wrong」を出力する

```c:main.c
#include <stdio.h>
#include <string.h>

int main(void) {
    char password[30];

    printf("Password: ");
    scanf("%s", password);

    if (strcmp(password, "abc") == 0) {
        printf("Hello!\n");
    } else {
        printf("wrong\n");
    }

    return 0;
}
```

MinGWにバンドルされている gcc を用いて，PE形式の実行ファイルにコンパイルします．

```shell
$ gcc main.c -o main.exe
```


# IDAで解析
### 実行ファイルの読み込み
IDA Freewareを起動し，コンパイルしたプログラムをIDAで読み込むと次のウィンドウが表示されます．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234753/ee4b8619-3e68-25e9-f892-5849f37a4bd4.png)

ここでは実行ファイルがPE形式なので，`Portable executable for AMD64` が選択されていることを確認して，OKを押します．

マッピングが終了すると，次の画面が表示されます．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234753/bc4c27fd-fd3e-45ec-b309-f54fbb1cb0a7.png)

ここでは `main` 関数をターゲットとしたいため，画面左側の `Function name` から `main` を選びます．
Graph View を確認すると，最上部のブロックから「Hello!」が出力されるブロックと，「wrong」が出力されるブロックに枝分かれされていることがわかります．
枝分かれする直前の命令を見ると，`jnz     short loc_140001552` が実行されており，これはステータスフラグ上のゼロフラグが0のとき，`loc_140001552`（「wrong」が出力されるブロックの先頭アドレス）にジャンプすることを意味します．
入力された値によらずジャンプをさせないため，この命令をnopに書き換えることを考えます．

### 命令の書き換え
書き換える命令をクリックし，命令が黄色くハイライトされていることを確認します．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234753/f060fa59-4375-49b5-3083-5b92376a3c40.png)

`Edit → Patch program → Change word...` を実行します．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234753/5475abe3-9e38-a19f-aea7-e522dc27d0c5.png)

命令の16進データがリトルエンディアンで表示されるので，これをnop（0x90)に書き換えます．
元の命令が4バイトの大きさであることから，ここでは0x9090（2つ分のnop）に設定します．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234753/0cf1fd11-2bc9-cf1c-adcf-b822b73ceedb.png)

書き換えが完了すると，次のグラフに変化します．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234753/05252192-bc7d-39e8-878d-f36852857251.png)

グラフから入力値に関わらず必ず「Hello!」に到達することが確認できます．
また，「wrong」が出力されるブロックには到達不能になります．

最後に `Edit → Patch program → Apply patches to input file...` を実行し，書き換えた命令を元の実行ファイルに反映します．

# 書き換えたプログラムを実行
前のセクションで書き換えた実行ファイルを実際に実行してみます．

```shell
$ main.exe
Password: a
Hello!

$ main.exe
Password: abc
Hello!

$ main.exe
Password: password
Hello!
```

入力した値に関係なく，「Hello!」が出力されています．

### おわりに
この記事では，ごく簡単なプログラムについて実行ファイルの書き換えを行いました．
今回はIDAを用いて静的解析を行いましたが，実際に動作を確認しながら解析を行いたい場合には，IDAに付属しているデバッガを利用することで動的解析も可能です．
また，今回のような入力によって顕著に分岐するプログラムでは，angr などのシンボリック実行ツールも適しています．
シンボリック実行についても後々記事を書こうと思っていますので，良ければ見ていただけると嬉しいです．
未経験からのキャリアチェンジしてみて

# QAエンジニアへのキャリアチェンジ：医療機器メーカーからITの世界へ

## Who Am I ?

**エンジニアはインプットも大事だけど、それ以上にアウトプットが大事だよ！**

こんなことを*先輩エンジニアの皆さん*から言われ続け、まったく実践できていなかったので手を挙げさせていただきました。
**QAエンジニアの大塚と申します。** 

技術的なことに関しては、まだまだ書けないので「現場に出て感じたこと」など未経験から転職してからエンジニアとしてキャリアチェンジしてみて感じたこと、これまでの経験などについて書きたいと思います。

エントリー生や入社を考えている方、エンジニアを目指したいと頭の片隅に考えている方の何かしらの参考になれば幸いです。

**【前職って何してた？】**
- 新卒〜2023年3月：医療機器メーカーで修理保守担当 
- 2023年4月〜：RPに転職し、QAエンジニアにキャリアチェンジ
- 2024年8月〜：生成AI関連の開発部門に配属

配属されて数ヶ月、あっという間に過ぎ去って年末が近づいている状況です。今年は本当にいろいろな変化のあった1年間でした。
実はちょうど厄年で、「厄年だからねぇ〜しょうがないよな、、、」と自分に言い聞かせて乗り切った1年間でした。

## そもそもキャリアチェンジに関して

医療業界からIT業界へのキャリアチェンジを決断した理由として、医療業界は厳格な上下関係や長時間労働、「医者は神様」といった風潮が業界柄どうしても残ってしまっている状況でした。対照的に、IT業界は常に進化し、フラットな組織構造や柔軟な働き方にとても魅力的に感じていました。

特にIT業界の魅力は、その将来性にあります。AIやIoTなどの先端技術が日々進化し、社会のあらゆる分野でITの重要性が増しています。また、実力主義の文化があり、年齢や性別に関係なく、スキルと努力次第でキャリアアップの機会が豊富にあります。

さらに、IT業界は社会課題の解決に直接貢献できる点も魅力的でした。医療業界での経験を活かしつつ、より広範囲な社会貢献ができる可能性に心惹かれました。これらの要因を総合的に考慮し、自己成長と社会貢献の両立を目指してIT業界、特に前職で感じた品質の重要性をQAエンジニアとして活かしたいと思いキャリアチェンジを決意しました。

## QAエンジニアの研修

研修では、JSTQBの資格レベルの内容を中心に学びました。具体的には、ソフトウェアテストの基本概念、テストプロセス、テスト技法（同値分割法、境界値分析など）、テスト管理、ツールによるテスト支援などを学習しました。また、実践的なテストケース作成の書き方なども訓練しました。

### 3ヶ月間の研修とその後

学生の頃から前職まで医療業界にいた自分としては、PC操作はOffice関連操作と医療機器のバージョン変更ぐらいで「Java？GitHub？？」という状態からのスタートでした。
短い研修期間でPC操作からJavaの基礎、Git操作、テスト設計まで幅広く網羅的に学ぶことができました。ただついて行くのに必死な日々でしたが、幸い自分の同期は人数も多く協力しながら行うことができました。
その後も自分の興味あるツールや分野を探求し、初現場先もGit操作は当たり前、スクラムでバシバシやっているので研修で学んだことが非常に活かせていると日々感じています。

## 初現場での数ヶ月間

### 現場の人たちと顔合わせ

自分の現場がフルリモートのため、初日に歓迎会を開かれた初日だけしか顔合わせる機会がなく、チームメンバー全員の顔と名前を一致させるのに苦戦しました。

### アサイン2ヶ月目の受け入れ

現場の数ヶ月ごとの大規模バージョンアップを経験して、自分の未熟さを痛感しました。まだサービスの仕様を把握し切れていない状況下での受け入れにとても苦戦しました。新機能の受け入れからテストケースに落とし込む作業で、実際にどんな挙動の変化が起きて内部でどのような動きになっているのかイメージが付かず作業遅延してしまっていました。特に、インフラやバックエンドの知識が自分の中で不足していたため、API、バッチ処理、インフラ関連の追加機能の把握に苦戦しました。

### フルリモートの苦戦

フルリモート環境での仕事は、多くの利点がある一方で、独自の課題も存在します。

1. **タスク管理と時間管理**：オフィスでの勤務と異なり、仕事とプライベートの境界が曖昧になりがちです。この課題に対しては、ポモドーロテクニックを活用したり、明確な就業時間を設定したりすることで対処しました。

2. **コミュニケーション**：対面でのやり取りがないため、ニュアンスの伝達や即時のフィードバックが難しく感じられました。この問題を解決するために、定期的なビデオ会議やチャットツールの積極的な活用、細かな進捗報告などを心がけました。

3. **モチベーションの維持**：家庭環境での作業は、時に集中力の低下や孤独感をもたらすことがあります。これに対しては、自己管理能力を高めると同時に、オンラインでの週一開催のバーチャルコーヒーブレイクなどを通じて、チームとのつながりを維持する努力をしました。

4. **スキルアップの機会**：オフィスでの偶発的な学びの機会が減少するため、オンライン勉強会への参加や、社内のナレッジ共有システムの積極的な活用など、自発的な学習の機会を作り出すよう心がけました。

5. **健康管理**：長時間のデスクワークによる身体的な問題を防ぐため、定期的な運動や適切な休憩時間の確保などに取り組みました。エンジニアになってボルダリングを始めて絶賛どハマり中です（笑）

これらの課題に直面しながらも、フルリモートワークの利点を最大限に活かすべく、日々試行錯誤を重ねています。この経験は、自己管理能力とコミュニケーション能力の向上につながり、結果としてより効率的で充実した仕事環境の構築に役立っています。

## キャリアチェンジして感じたこと

エンジニアとしての日々は、「問題解決の連続」です。バグの原因を特定したり、効率的なテスト方法を考案したりする過程は、まるでパズルを解くような面白さがあります。
同時に、技術の進化に追いつくプレッシャーも感じますが、それも含めてこの仕事の魅力だと感じています。

## 最後に

エンジニアとしての1年を振り返ると、挑戦と成長の連続でした。時に困難に直面しましたが、それらを乗り越えるたびに自信がついていきました。技術の世界は常に変化し続けていますが、その中で自分自身も進化し続けられることに喜びを感じています。

初めての記事投稿で最後の締め方がわからないですが、最後までお読みいただきありがとうございました。
技術的なこと、専門用語もない、今年一年で感じたことをツラツラ書いただけになってしまいましたが、また来年からエンジニアとして更に飛躍できるよう日々の努力を積み重ねていければと思っています。
次は技術的な投稿もできるようにしていければと思っています。
ありがとうございました！
未完の大器 日本語プログラミング言語「なでしこ」Version2でHelloworld!

# はじめに
未完の大器 日本語プログラミング言語「なでしこ」Version2でHelloworld!してみます。昨年実行時間検証用に記述した「なでしこ」v1のコードは　「[ERROR] インデントレベルが間違っています。」と怒られてしまったので、とりあえず一番シンプルコードで実行してみました。

# 前提条件
Windows11 Pro 22H2 22621.4169
VSCode(Visual Studo Code)　1.95.1
nadesiko2 2014/04/22リリース版(β版)
C# 12 ※直接関係ないかもしれませんが入っているので
dotnet-sdk-8.0.206-win-x64 ※直接関係ないかもしれませんが入っているので monoは入れてないです。

# 日本語プログラミング言語「なでしこ」Version2とは

いろいろな情報を総合すると.NETCore統合前のmono版.NETのCLR中間コードにコンパイルするバージョンのようです。実装言語は2014年ごろのC#

https://nadesi.com/dev/wiki/index.php?%E3%81%AA%E3%81%A7%E3%81%97%E3%81%932.0

現時点では開発中断しているバージョンです。開発リポジトリ上の最終マージは2018年11月ごろ。今回実行しているバージョンは上記サイトに掲示されている 2014/04/22リリース版(β版)です。

# プロジェクトフォルダ構成
```cmd:
C:\nadesiko2\vscode>tree /F
C:.
│  callfunc.nako
│  count.nako
│  count3.nako
│  helloworld.nako
│  helloworld3.nako
│
└─bin
    │  cnako-sh.bat
    │  cnako.sh
    │  cnako2.exe
    │  edit.nako
    │  Libnako.dll
    │  NakoPlugin.dll
    │  ReadMe.txt
    │
    └─plug-ins
            fastJSON.dll
            HtmlAgilityPack.dll
            Interop.ADODB.dll
            Libnako.dll
            ...略
```

# 実行

無事に実行成功しました。まだよくわかっていないので、試行錯誤中です。cnako-sh.batのとおりにフォルダ構成していませんので、直接コマンド実行しています。

![nadesiko21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3118036/7e4180e2-c44a-2995-9b31-92c361280815.png)

「[ERROR] インデントレベルが間違っています。」と怒られたのはこちらの記事にあるコードなのですが、冒頭の実行モード指定文とかが対応していないような気もしてきましたので、機会があれば検証してみます。

https://qiita.com/mylifewithviolin/items/74b55ba0104889f7a93f

# おわりに
いかがでしたでしょうか？なにかの参考になれば幸いです。
3分でできる！OpenAPIモックサーバーの作り方


開発初期の段階で、バックエンドのAPIがまだ準備できていないことはよくありますよね。
そんなとき、モックサーバーがあればAPIの挙動を擬似的に体験でき、
開発スピードを大きく向上させることができます！
今回は、`openapi.yaml` を使ってたった3分でモックサーバーを立てる方法を紹介します。  

---

### **なぜモックサーバーが必要？**
- **フロントエンド開発の先行が可能**：バックエンドが完成する前でも動作確認ができる。  
- **仕様の擦り合わせに便利**：APIのレスポンスを実際に見ながら議論が進む。  
- **テストに役立つ**：想定通りのレスポンスが得られるかを自動化しやすい。  

さっそく始めましょう！  

---

### **ステップ1: OpenAPI仕様書を準備**  

まず、APIの定義を書いた `openapi.yaml` を用意します。以下は簡単なサンプルです：  

```yaml
openapi: 3.0.0
info:
  title: Quick Mock API
  version: 1.0.0
paths:
  /greet:
    get:
      summary: Returns a greeting
      responses:
        '200':
          description: Greeting message
          content:
            application/json:
              schema:
                type: object
                properties:
                  message:
                    type: string
                    example: "Hello, Quick Mock!"
```  

- **ポイント**  
  - レスポンスの内容を `example` に記載することで、具体的なデータを指定可能です！

この例では、`GET /greet` にアクセスすると `"Hello, Quick Mock!"` というレスポンスを返します。  

---

### **ステップ2: Prismをインストール**  

次に、モックサーバー構築用のツール **Prism** をインストールします。以下のコマンドを実行してください：  

```bash
npm install -g @stoplight/prism-cli
```  

- **補足**  
  - Node.jsが必要なので、まだの方はインストールしてください!

---

### **ステップ3: モックサーバーを起動**  

準備が整ったら、次のコマンドでモックサーバーを起動します：  

```bash
prism mock openapi.yaml
```  

うまくいけば、以下のようなメッセージが表示されます：  

```
[INFO]  Mocking HTTP server running at http://localhost:4010
```  

これで、モックサーバーがローカル環境で起動しました！  

---

### **ステップ4: 動作確認**  

下記のコマンドでアクセスしてみてください！
```bash
curl http://localhost:4010/greet
```  

以下のようなレスポンスが返ってくれば成功です！  

```json
{
  "message": "Hello, Quick Mock!"
}
```  

---

### **わずか3分でモックサーバー完成！**  

これでモックサーバーの立ち上げは完了です。バックエンドの実装を待たずに、APIの挙動を再現できる環境が整いました。  
やったね！

---

### **まとめ**  

モックサーバーを使えば、  
- 開発スピードが向上  
- API設計の問題点を早期発見  
- チーム間のコミュニケーションが円滑化  

Prismを使えば、これらがわずか3分で実現できます！ぜひプロジェクトに取り入れてみてください。
【Laravel11】LaravelでBasic認証を使う方法

:::note info
[Laravel Advent Calendar 2024](https://qiita.com/advent-calendar/2024/laravel) の2日目です :muscle:
:::

こんにちは :smiley: tatata-keshiです :bangbang:

今回はLaravelでBasic認証の実装をする方法を紹介します。

## 1. ミドルウェアの作成

まず、Basic認証を処理するミドルウェアを作成します。ターミナルで以下のコマンドを実行してください。

```bash
php artisan make:middleware BasicAuthMiddleware
```

`app/Http/Middleware` ディレクトリに `BasicAuthMiddleware.php` が作成されます。

## 2. ミドルウェアの実装
以下のようにミドルウェアを実装していきます。

```PHP:BasicAuthMiddleware.php
<?php

namespace App\Http\Middleware;

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

class BasicAuthMiddleware
{
    /**
     * Handle an incoming request.
     *
     * @param  \Closure(\Illuminate\Http\Request): (\Symfony\Component\HttpFoundation\Response)  $next
     */
    public function handle(Request $request, Closure $next): Response
    {
        $user = env('BASIC_AUTH_USER');
        $pass = env('BASIC_AUTH_PASS');
        if ($request->getUser() !== $user || $request->getPassword() !== $pass) {
            $headers = ['WWW-Authenticate' => 'Basic'];
            return response('Invalid credentials.', 401, $headers);
        }
        return $next($request);
    }
}
```

## 3. 環境変数の設定
Basic認証のuserとpasswordを環境変数に追加しておきます。

```
BASIC_AUTH_USER={ユーザーネーム}
BASIC_AUTH_PASS={パスワード}
```

## 4. ミドルウェアの登録
このミドルウェアはアプリケーションがHTTPリクエストを受信するたびに実行させたいので、`boostrap/app.php`のグローバルミドルウェアスタックにミドルウェアを追加します。

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

これにより、LaravelアプリケーションでBasic認証を利用することができます :thumbsup: 

## 参考文献
- [11.x ミドルウェア Laravel](https://readouble.com/laravel/11.x/ja/middleware.html)
- [Laravelで簡易的にBasic認証 #PHP - Qiita](https://qiita.com/nozaki-sankosc/items/dc666433d7b92137a48e)
VirtualBOX/VMWare/KVMのネットワーク

 VirtualBOX、VMWare、KVMのネットワークの構成図と仕様
# 1.Router(ルータ)
 HostOSがルータとなり、ネットワークを構成
VirtualBOX:ホストオンリアダプター
KVM:Open
VMWare:ホストオンリ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3849360/adf4c3d1-89f3-58d0-452f-99e555b9eb8c.png)
VMwareの場合、インターフェース名は、VMnet1

# 2.NAT
　HostOSがNATとなり、外部ネットワークを構成
VirtualBOX:NATネットワーク
KVM:NAT
VMWare:NAT
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3849360/c6ba24b3-e3ac-e98e-564e-e6384910a270.png)
VMwareの場合、インターフェース名は、VMnet8

# 3.Bridge(ブリッジ)
　GuestOSが、外部のネットワークの直接接続可能
VirtualBOX:ブリッジアダプター
KVM:Bridge to LAN
VMWare:ブリッジ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3849360/d6e8d528-dc6e-22f6-0fd7-7205bb72d523.png)

# 4.独立ネットワーク
　独立したGuestOSのみのネットワークを構築
VirtualBOX:内部ネットワーク
KVM:None(isolated network)
VMWare:カスタム
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3849360/c04c914f-dd37-eef9-93db-ea3daece45a2.png)

# 5.NAT(VirtualBOXのみ)
　各GuestOSが、HostOSに接続
VirtualBOX:NAT
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3849360/00f3ce38-4ee3-53f7-864b-2781c2f57227.png)
・VirtualBOXのディフォルト
・GuestOSがHostOSのIPを共有。外部への接続可能。外部から内部への接続不可。
・GuestOS通しの通信が出来ない。
deepfaceをpipでインストールしたときにKilledになる【e2-micro メモリ1GB】

e2-microで実行したときにメモリが1Gで足りなかったのが原因でした。スワップ作ったらいけました。
```bash
# スワップがないことを確認
free -h
# スワップ4GB作成
sudo fallocate -l 4G /swapfile
# 権限設定
sudo chmod 600 /swapfile
# スワップ有効化
sudo mkswap /swapfile
sudo swapon /swapfile
# 再起動したときに有効か
echo '/swapfile none swap sw 0 0' | sudo tee -a /etc/fstab
# スワップがあることを確認
free -h
```







**スワップが作れないときは、下記を使ってね**

`--no-cache-dir`をつけよう

```bash
pip --no-cache-dir install deepface --break-system-packages
```

https://a1026302.hatenablog.com/entry/2021/01/12/150748

ps. google compute engineにインストールする場合、10分ほどかかります
【合格】統計検定2級受検記

3年目のエンジニアが統計検定2級を受検し、ギリッギリ合格したのでその受検の様子を記載してみたいと思う。

## 背景
以下2つの考えがあり、受検をすることを決めた。

1. データサイエンティストのキャリアを考えるうえで、統計の勉強をし、かつ履歴書に書けるレベルの資格を取得した方が良いだろうと考える
1. 土日に何かしら勉強しないと暇

## 前提知識（私の経歴）

4年生大学の商学部を卒業。在学中に統計学は確かに履修し、どちらかというと得意なほうだったと記憶する。しかし、短期記憶の私からはそこで得た知識はいつの間にか消え去っていた。しかし、完全な初学者よりは前提知識がある気もするのであまり余計なことは言わないでおく。

## 勉強期間

2024年3月～2024年11月の金土日。総勉強時間は約150時間ぐらいだろうと思う。

## 勉強の仕方

端的にいうと勉強法はいたってシンプル。**同じ1つの問題集を延々と繰り返しやり続け、わからないところがあったらネットで調べる**。**調べた内容をノートに書いて覚えていく**。それだけである。
下記の問題集のわからない部分をほぼ理解できる状態になれば、合格できると思う。

ただし、注意。
後段でも述べるが問題集は**CBT対応**のものをやることをおすすめする。
なぜなら、CBT形式以前と以後では若干出題形式が変わっている。私は受検日に試験を受けていて、初めてそれに気づいたので結構ビビらされた。（ちゃんと前もって調べなさい）

下記に問題集とよく調べものに使ったサイトをご紹介する。

1. 問題集
    - 私が解いた問題集（CBT未対応）：[日本統計学会公式認定　統計検定　2級　公式問題集［2018〜2021年］](https://books.jitsumu.co.jp/book/b590884.html)

    - 私が解いていない問題集（CBT対応）：[日本統計学会公式認定　統計検定　2級　公式問題集［CBT対応版］](https://books.jitsumu.co.jp/book/b614221.html)

1. サイト
    - [統計学の時間 | 統計WEB](https://bellcurve.jp/statistics/course/?srsltid=AfmBOop2qP1pV4d-pQ2seZJSD4-BpJM_d9lHpOx49Mpin8JaXIZA5U-V)

## 受検日までの流れ

1. 受検予定日1~2週間前に、試験会場となるテストセンターやパソコン教室に直接申し込む
1. 受検日前日は有給を取り、一日中勉強

## 受検当日
私は地元のテストセンターで受検。テストセンターあるあるなのかもしれないが、結構人の出入りが激しくうるさかったりするので神経質な人は大きいテストセンターにいくとそこまで気にならないかも。

先述した通りだが、CBT形式以前と以後では若干出題形式が変わっていることに気づいていなかったので結構ビビったが、一応全問回答を記載し試験終了。

## 結果
結果は**66点**!
合格点は60点なのでギリッギリ。とはいっても、合格は合格なので小さめに胸を張っておく。

## これから受検しようと考えている方へ
他の皆さんの合格記を読んでいると、色んなe-learningやUdemyなどを受けられているようです。そういったものを活用されても良いと思います。
私は今までの勉強歴から、結局問題集しか自分の役に立たないという自覚があるのでこのような形式をとっていますが、必ずしも信用しすぎないように注意して頂きたい。

しかし、どんな勉強法を取っていても最も大事なのは、**「基礎」**。基礎さえわかっていれば、土壇場でも応用することは可能なので、小さい「わからない」を受検日当日まで潰し続けて頂きたいと思います。