OmniAICreator/Qiita-1.07M huggingface dataset:
5daysインターンに参加してみた感想

<!-- 5daysインターンに参加してみた感想 -->

## はじめに

2025年3月に、とある企業で5日間のインターンシップに参加しました。3年次の夏休みにもインターンに応募したのですが複数日のものには落ちてしまい、1dayのものにしか参加できなかったので、自分としては初の複数日インターンでした。

## インターンの概要

5日間を通し、3人1チームでWebアプリケーションを作成するというものでした。フレームワークはReact+Viteで、Gitで開発管理を行うといった形式でした。

朝10時から夕方17時半までの勤務で、1時間昼休憩がありました。

給料が出るものではなかったのですが、交通費や昼食代は支給されるとのことでした。

## 開発したもの

React+ViteでWebアプリケーションを作成しました。

機能は以下の通りです。

- 入力欄にデータを入力することができる
- 入力したデータからチラシがリアルタイムでプレビューされる
- 作成が完了したチラシは、ダウンロードボタンを押すことでPDF形式でダウンロードできる
- 使い方の説明をするウィンドウをいつでも表示することができる

## 各日の流れ

### 1日目

まずは企業の説明を受けたり、社内を案内していただいたり、チームやメンターの方々と自己紹介をしあったりしました。

支給されたPC(Mac Book Pro)のセットアップを行いました。

具体的に行ったことは以下の通り。

- GitHubやGoogle、Slackなどへのログイン
- VSCodeのインストールと初期設定
- Gitの設定(HTTPSとかSSH)
- プロジェクトのクローン
- 用いるフレームワーク(Node.js)のインストール

また、作るものの設計をしたり、機能の実装計画や役割分担をしました。

それが済んだら、実際にコードを書き始めました。

### 2日目

実装を進めました。

分からないところはメンターの方々へ質問したりしました。

### 3日目

基本的に2日目と同じく、実装を進めました。

また、昼休憩が「シャッフルランチ」というものでした。これは役員やエンジニア、人事の人など役職関係なく4人グループを作り、それぞれで好きな場所へ行き食事をして、親睦を深めるというもので、毎週行われているそうです。

業務に含まれるらしく、社員の人も会社に食費を出してもらっていました。

### 4日目

実装を進めました。

また、昼休憩の後にメンターの方々に現在のコードを確認してもらい、口頭でフィードバックをもらうという機会がありました。

自分の担当した所は特に問題はなかったものの、不必要なインポートや命名規則を破っている部分などを指摘されました。

他の人の担当場所は結構修正されていましたが、その話も聞いていて勉強になりました。

また、最終日の発表に向けた話も聞きました。

### 5日目

プログラムの仕上げを行ってある程度形にし、発表資料を作成して、リハーサルを行いました。

その後、社員の方々の前で発表を行いました。

発表の際は何人もの方々から質問などのフィードバックをいただき、成果物と発表内容を高く評価していただくことができました。

## 感想

まず、片道1時間半かけて会社に通うのは大変でした。会社の人曰く1時間半なら一人暮らしを視野に入れるレベルだそうです。乗換も地味に多かったです。

10時開始とはいえ行き帰りが通勤・退勤ラッシュに重なっていて、社会人の大変さを感じました。

また、5日間でチーム開発を行うという経験が自分にとって非常に有意義な経験になりました。Gitを用いてバージョン管理を行ったり、コードのレビューを受けたり、他の人のコードを読んだり、次に何をするのかをある程度の間隔で話し合って決めたり、ということができました。こういった経験は今後就職した後などにも生かせるんじゃないかなと思います。

社内の雰囲気も非常に良好で福利厚生も手厚く、とても過ごしやすかったです。自分が将来社会人として働くときのイメージも付きました。

貴重な経験をさせていただきありがとうございまｓ。
OpenStudioのチュートリアルを試してみる　その20

# 1. はじめに
先日[OpenStudioのチュートリアルを試してみる　その19](https://qiita.com/bebebefu/items/fd6560d979990891057c)の記事にて、以下のリンクの動画シリーズで紹介されているOpenStudioを用いたfire station（消防署）のモデル作成・シミュレーションの21番目の動画についての手順を追っていきました。今回はこの動画シリーズの22番目の動画の手順を追っていきたいと思います。

https://www.youtube.com/playlist?list=PLRW2KXkdSVUdY2iQ6yjohNT5E5ElLVIhU

# 2. 実施環境
CPU: CORE i5 8th Gen
メモリ: 8GB
OS: Windows 11 22H2

# 3. 手順
本記事で内容・手順を追った動画（上記動画シリーズの22番目の動画）

https://www.youtube.com/watch?v=AKhr7CcnQ28&list=PLRW2KXkdSVUdY2iQ6yjohNT5E5ElLVIhU&index=23

## 3.1 Thermal Zone TZ-102のExhaust fanの調整
動画では以下の図の赤枠部分の"Thermal Zone"をクリックして、TZ-102をところを確認したときにZone Equipmentのとこに"EF-01"があるのですが、私の環境にはなかったので、以下の図のように黄枠で囲んだEF-01を青枠で囲んだ"Zone Equipmen"tのところにドラッグアンドドロップして設定しました。

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581920/6055cc55-50a0-40c7-b77f-427f7c255ade.png)

そしてシミュレーションを実行し、以下の図の"reports"のところを"EnergyPlus Results"に変えて、"Outdoor Air Summary"（以下の図の赤枠部分）の項目をクリックして確認します。

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581920/31755643-8d7d-4f24-9626-f253ea34fb96.png)

結果は良好であるとのことが動画の中では述べられ、以下の図の"Spaec Type"（赤枠部分）から90.1-2010 - FireStation - Decon（青枠部分）を選択し、緑枠で囲んだ"Space Infilration Design Flow Rate"で読み込まれている"FireStation Decon Infiltration"の"Desgin Flow Rate Calculation Method"を"Flow/Space"に修正します（黄枠部分）。

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581920/ad8d649d-ebeb-4943-bc8d-59bb4e6fd481.png)

また👆の画面では"Design Flow rate"を152にします。

次に以下の図の赤枠で囲んだ"Schedules"の設定変更について動画の中で紹介されますが、私の環境では以下のように朝と夜の時間帯の値を下げることが反映されていました。

![スクリーンショット 2025-03-02 180340.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581920/5fc7c351-a70d-4890-9f7c-f5cd7b28f6de.png)

そしてシミュレーションを再度実行します。シミュレーション完了後、前回の記事で紹介した"Dview"から"Site Outdoor Temperature"と"TZ-102のZone Air Temperature"の日変動を比較すると以下のようになりました。これは動画での結果とほぼ同じでした。

![スクリーンショット 2025-03-02 181050.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581920/14559131-7687-4479-a3e0-39c05b79bad4.png)

# 4. まとめ
若干の違いはありましたが、とりあえずここまでも特にエラーなく進めることができました。
次回は動画シリーズの23番目：https://www.youtube.com/watch?v=oQPHRyHsdEs&list=PLRW2KXkdSVUdY2iQ6yjohNT5E5ElLVIhU&index=23 を実施していきたいと思います。
Cognito ユーザープールクライアント（User Pool Client）とは？（メモ）

**Cognito ユーザープールクライアント** は、**Cognito ユーザープールとアプリケーション（Web、モバイル、バックエンド）を接続するための設定** です。

> **ユーザープールクライアント（User Pool Client）＝ ユーザープールを利用するアプリケーションの「アクセス設定」**  
> これを作成することで、アプリが Cognito に対して認証やトークンの取得を実行できるようになります。

---

## **1. ユーザープールクライアントの役割**
**Cognito ユーザープールクライアントは、アプリケーションが Cognito にアクセスするための「入口」** です。  
具体的には、以下のようなことを設定できます。

✅ **アプリケーションがどの認証フローを使うか**
✅ **アクセストークン・リフレッシュトークンの有効期限**
✅ **クライアントシークレットの有無**
✅ **認証フロー（パスワード認証、OAuth、SRP など）**
✅ **Cognito のホスト型 UI（ログイン画面）の利用可否**

---

## **2. ユーザープールクライアントが必要な理由**
Cognito には「ユーザープール」があり、ユーザーの情報を管理できますが、そのままではアプリケーションからアクセスできません。

💡 **ユーザープールクライアントを作成することで、アプリケーションが Cognito に認証リクエストを送信できるようになる！**

例えば、以下のような用途で使われます。

| **用途**                         | **必要な設定** |
|----------------------------------|--------------|
| Webアプリ（SPA、React、Vue）      | `GenerateSecret: false`（シークレットなし）|
| モバイルアプリ（iOS / Android）  | `ExplicitAuthFlows: ALLOW_USER_SRP_AUTH` |
| サーバーサイドアプリ（バックエンド API） | `GenerateSecret: true`（クライアントシークレットあり）|

---

## **3. CloudFormation でユーザープールクライアントを作成**
CloudFormation を使って **ユーザープールクライアント** を作成する場合、`AWS::Cognito::UserPoolClient` を定義します。

```yaml
Resources:
  CognitoUserPoolClient:
    Type: AWS::Cognito::UserPoolClient
    Properties:
      ClientName: MyWebAppClient
      UserPoolId: !Ref CognitoUserPool
      GenerateSecret: false
      ExplicitAuthFlows:
        - ALLOW_USER_SRP_AUTH
        - ALLOW_REFRESH_TOKEN_AUTH
```

---

## **4. ユーザープールクライアントの主な設定**
| **設定項目**             | **説明** |
|-------------------------|--------------------------------------|
| `ClientName`           | クライアントの名前（例: WebAppClient）|
| `UserPoolId`          | どのユーザープールに関連付けるか |
| `GenerateSecret`      | **true:** クライアントシークレットあり（サーバー向け）<br>**false:** シークレットなし（フロントエンド向け）|
| `ExplicitAuthFlows`   | 許可する認証フロー（パスワード認証、SRP など）|
| `RefreshTokenValidity` | リフレッシュトークンの有効期限（日数単位）|

---

## **5. どの認証フローを使うべきか？**
**ユーザープールクライアントの設定は、利用するアプリの種類に応じて変わります。**

| **アプリの種類** | **推奨設定** |
|--------------|--------------------------------|
| Webアプリ（SPA / JavaScript）| `GenerateSecret: false`（シークレットなし） |
| モバイルアプリ（iOS / Android） | `ExplicitAuthFlows: ALLOW_USER_SRP_AUTH` |
| バックエンド（API サーバー）| `GenerateSecret: true`（シークレットあり） |

---

## **6. 実際の認証フロー**
1. **フロントエンドアプリ**（React, Vue, Angular など）
   - Cognito ホスト UI でユーザーがログイン
   - **IDトークン（JWT）** を取得し、API Gateway に送信
   - API Gateway が Cognito でトークンを検証
   - 認証成功ならバックエンドの Lambda を呼び出し

2. **モバイルアプリ**（iOS / Android）
   - `ALLOW_USER_SRP_AUTH` を使ってログイン
   - Cognito からトークンを取得し、アプリ内で保持
   - API Gateway にトークンを送信して認証

3. **バックエンド（サーバー側）**
   - `GenerateSecret: true` にして、クライアントシークレットを使用
   - OAuth2 のクライアント認証でアクセストークンを取得
   - 他のマイクロサービスと連携して認証を処理

---

## **7. まとめ**
🔹 **Cognito ユーザープールクライアント** は、Cognito ユーザープールとアプリをつなぐ重要な設定。  
🔹 **アプリの種類に応じて、認証フローを適切に設定することが重要！**  
🔹 **CloudFormation では `AWS::Cognito::UserPoolClient` を使って定義できる。**

🎯 **適切な設定を行い、Cognito を活用した認証基盤を構築しましょう！** 🚀
SageMaker Canvas vs. 伝統的AIトレーニング手法―どちらがあなたの現場に適しているか？

### はじめに

AIのトレーニングといえば、プログラミングやデータの前処理、モデルのチューニングなど、多くの専門的な作業が必要です。しかし、最近ではAWSの **SageMaker Canvas** のような **ノーコードAI開発ツール** が登場し、AIモデルの構築がより簡単になっています。

この記事では、SageMaker Canvas と従来のAIトレーニング手法を比較し、それぞれの **メリット・デメリット** を整理しながら、どのようなケースでどちらを選ぶべきかを考えてみます。

---

## **1. SageMaker Canvasとは？**

SageMaker Canvasは、**AWSが提供するノーコードAI開発ツール** で、PythonやTensorFlowといったプログラミングなしで機械学習モデルを作成できます。

- **特徴**：
  - **ノーコード**：GUI（グラフィカル・ユーザー・インターフェース）で操作可能。
  - **AWSのインフラ活用**：クラウド上でデータ処理＆モデル学習を実行。
  - **データの可視化**：データの傾向を自動で分析し、視覚的に確認可能。
  - **モデル評価機能**：学習済みモデルの精度を直感的に理解できる。

たとえば、企業が売上予測を行いたい場合、SageMaker Canvasに **過去の売上データ** をアップロードし、予測したい変数を選択するだけで、短時間でモデルを構築できます。

---

## **2. 従来のAIトレーニング手法とは？**

従来のAIモデル開発は、主に **プログラミングベース** で行われます。たとえば、Pythonとライブラリ（TensorFlow, PyTorch, Scikit-learnなど）を使い、データ処理・モデル設計・チューニングを手動で行うのが一般的です。

- **特徴**：
  - **カスタマイズ性が高い**：データ前処理やアルゴリズムの調整が自由にできる。
  - **オープンソースの活用**：既存の研究成果や最先端の手法を取り入れやすい。
  - **計算リソースの管理が必要**：ローカルマシンやクラウド上で環境構築が必要。

たとえば、ECサイトのレコメンドシステムを作成する場合、従来の方法では **データの収集→前処理→モデル選定→ハイパーパラメータ調整→評価** という一連の作業をプログラミングで実装する必要があります。

---

## **3. SageMaker Canvas vs. 従来の手法：どちらを選ぶべきか？**

| **項目**         | **SageMaker Canvas** | **従来の手法** |
|----------------|--------------------|--------------|
| **プログラミングスキル** | 不要 | 必要 |
| **導入のしやすさ** | 簡単（GUI操作） | 環境構築が必要 |
| **モデルのカスタマイズ** | 限定的 | 柔軟なカスタマイズ可能 |
| **計算リソースの管理** | AWSにお任せ | ユーザー側で管理 |
| **精度のチューニング** | 自動最適化 | 手動で細かく調整可能 |
| **適した用途** | 予測モデル作成・データ分析 | 高度なAI研究・特化したモデル |

### **ケース別の選択基準**

**SageMaker Canvasが向いている場合**
- AI開発の初心者や、データサイエンスの専門チームがいない企業。
- 売上予測、需要予測、異常検知など **比較的シンプルな予測問題**。
- AIを業務に導入したいが、まずは小規模なPoC（概念実証）から試したい場合。

**従来の手法が向いている場合**
- **カスタマイズ性が求められるプロジェクト**（例：音声認識、画像認識など高度なAIモデル）。
- **大規模なデータ処理** や **リアルタイム推論** が必要なシステム。
- 研究開発やAIのパフォーマンスを最大化したい場合。

🔹 **例1：マーケティング部門の売上予測**
→ **SageMaker Canvas** を使用すれば、Excelの延長感覚でAIを活用可能。

🔹 **例2：医療画像診断のAI開発**
→ **従来の手法（Python + TensorFlowなど）** を用い、高度な画像処理技術を導入する方が望ましい。

🔹 **例3：工場の異常検知システム**
→ まずは **SageMaker Canvas** でプロトタイプを作成し、精度向上が必要なら従来の手法に移行するのもアリ。

---

## **4. まとめ**

SageMaker Canvasは **「手軽にAIを試したい人向け」**、従来の手法は **「本格的にAIを開発したい人向け」** というのが大まかな使い分けです。

どちらを選ぶかは、 **プロジェクトの規模・求めるカスタマイズ性・AI開発の経験** などによって変わります。まずはSageMaker Canvasを試してみて、必要に応じて従来の手法を組み合わせるのも良いでしょう。

**皆さんはどちらの方法を選びますか？**
本記事の内容はあくまで私の個人的な意見です。もし **「この視点も面白いよ！」** という意見があれば、ぜひコメントで教えてください！一緒に議論して、より良い活用方法を探りましょう！
CL Debloat – Windows 11を最適化する強力なツール

CL Debloatは、Windows 11の不要なアプリや広告を削除し、システムパフォーマンスを向上させるためのツールです。PCの動作が遅くなったり、不要なアプリがメモリを占有したりしていませんか？CL Debloatを使えば、簡単な操作でPCの不要な要素を排除し、より快適な環境を実現できます。https://cldebloat.com/


CL Debloatの主な機能
不要なソフトウェアの削除：プリインストールされた不要なアプリを一括削除。
広告の無効化：Windows 11の煩わしい広告をブロックし、クリーンな環境を維持。
システムパフォーマンスの向上：バックグラウンドプロセスを削減し、リソースを解放。
プライバシーの強化：不要なデータ収集やトラッキングを防止し、安全な環境を確保。
なぜCL Debloatが必要なのか？
Windows 11には多くの不要な機能やアプリがデフォルトで搭載されています。これらはシステムリソースを消費し、PCの動作を遅くする原因になります。特に、ゲーマーやクリエイターにとって、快適な作業環境を維持することは重要です。CL Debloatを使えば、最小限の負担で最大限のパフォーマンスを引き出せます。

簡単な操作で最適化
CL Debloatの使い方は非常にシンプルです。数回のクリックで、不要なアプリや広告を削除し、最適なシステム環境を構築できます。複雑な設定や専門的な知識は不要で、初心者でも簡単に利用できます。

まとめ
CL Debloatは、Windows 11を軽量化し、より快適なPC環境を提供するためのツールです。不要なアプリを削除し、広告を無効化することで、システムの負荷を軽減し、より高速なパフォーマンスを実現できます。PCの動作が重いと感じたら、ぜひCL Debloatを試してみてください！
日本語プログラミング言語Mindで「たらい回し関数（竹内関数）」と等価な関数

## 「たらい回し関数（竹内関数）」と等価な関数
リカーシブコールを使わずに「たらい回し関数（竹内関数）」と等価な働きをする関数を日本語プログラミング言語Mind8 で実装し実行しました。
次回は、[２つの関数が「等価」であることを証明](https://qiita.com/ITvision/items/44f27bbfe95b307513f8)します。
```
tarai3.src
たらい回しと等価な関数とは
      ｘは  変数
      ｙは  変数
      ｚは  変数
      ｘと  ｙと  ｚに  入れ　   　　
      ｘが  ｙ  以下  
          ならば  ｙを  返し
　　　　　さもなければ
                  yが　ｚ　以下
　　　　　　　　　　　ならば　 ｚを 返し
　　　　　　　　　　　さもなければ
　　　　　　　　　　　　　　　 ｘを 返す
　　　　　　　　　　　つぎに
　　　　　　つぎに。

呼び出し回数は　変数。
たらい回しとは
      ｘは  変数
      ｙは  変数
      ｚは  変数
      ｘと  ｙと  ｚに  入れ
　　　呼び出し回数を　一つ増加し   　　
      ｘが  ｙ  以下  
            ならば  ｙを  返し
　　　　　　さもなければ
                  ［ｘ － １］と  ｙと  ｚを  たらい回し
　　　　　　　　　　［ｙ － １］と  ｚと  ｘを  たらい回し
　　　　　　　　　　［ｚ － １］と  ｘと  ｙを  たらい回し
　　　　　　　　　　たらい回しし  返す
　　　　　　つぎに。

メインは 
　　　ixは　変数
　　　iyは　変数
      izは　変数
		起動引数個数が　3と　等しい
　　　　　　ならば
  　　　　　　　呼び出し回数を　クリアし
  		　　　　起動引数(1)を 数値変換し　捨て　ixに　入れる
	 	　　　　起動引数(2)を 数値変換し　捨て　iyに　入れる
 		　　　　起動引数(3)を 数値変換し　捨て　izに　入れる

　             「たらい回しと等価な関数を開始します。」と　表示し　
　　　　　　　　ixと　iyと　izの　たらい回しと等価な関数を　数値表示し　「です。」と　表示し 改行する

　　　　「竹内先生のたらい回し関数開始します。」と　表示し
        ixと　iyと　izを　たらい回し  数値表示し　「です。」と　表示し　
		呼び出し回数を　数値表示し　「回呼び出し」と　表示し　改行する		
            さもなければ
　　　　　　　　　「起動引数個数は３個です。」と　表示し　改行する
　　　　　　つぎに。
```
## 実行結果
```
c:\mind8\pmind\lesson>tarai3 10 5 0
たらい回しと等価な関数を開始します。10です。
竹内先生のたらい回し関数開始します。10です。343073回呼び出し

c:\mind8\pmind\lesson>tarai3 12 6 0
たらい回しと等価な関数を開始します。12です。
竹内先生のたらい回し関数開始します。12です。12604861回呼び出し

c:\mind8\pmind\lesson>tarai3 14 7 0
たらい回しと等価な関数を開始します。14です。
竹内先生のたらい回し関数開始します。14です。588802013回呼び出し
```
【Bash】対話型シェルで "!!!!!!!" をechoしない

# TL;DR
```bash
$ # 対話型シェルで
$ echo "もうやだ……"
もうやだ……
$ echo "やだーー!!!!!!"
echo "やだーーecho "もうやだ……"echo "もうやだ……"echo "もうやだ……""
やだーーecho もうやだ……echo もうやだ……echo もうやだ……
```
ちょっと面白くなるのでやめるべきである。

# 本文
Bashでは文字列を`""`で括ると特殊文字が展開される。
```bash
$ # 一番わかりやすいのは変数
$ hoge="ほげ"
$ fuga="ふが"
$ echo "$hoge$fugaぴよ"
ほげふがぴよ
```

通常この仕様を知っていてもあまり意識せず`""`で括ることが多いと思う。特殊文字は展開してくれた方が嬉しい場合が多いからだ。

が、`!`に関連する特殊文字については**対話型シェルのみで有効になる**という性質から、意識したことが無かった。
[bashのman (日本語)](https://ja.manpages.org/bash)によると、イベント指示子 (Event Designator)というものらしい。使いそうなものとしては以下の通り。

| 構文 | 説明 | 例 |
|:-:|:-|:-|
| `!!` | 直前のコマンドを再実行  | `echo "やだー!!"` |
|  `!n` | n個目のコマンドライン  |  `echo "やだー!!!1"` |
|  `!-n` | n個前のコマンドライン  |  `echo "やだー!-1"` |
|  `!string` | 直近の string で始まるコマンドライン  |  `echo "やだー!cat なんか飼いたくない!!"` |

## 怖い点
冗談めかして書いているが、参照先でサブシェル(`$(コマンド)` とか `while`とか)を呼びだしていたりすると**そのサブシェルが実行される**という挙動をする。
このサブシェルで副作用のある操作をしていたら、「`echo`をしただけなのにパソコンが壊れた!!!!」も起こりかねない。
```bash
$ cd /home/myName/myWork
$ # 以下のコマンドがたまたまシェル起動から11番目だったとする
$ $(sudo rm -rf ./*)  # なぜわざわざサブシェルとかは置いておいて
$
...
$ cd /
$ # 忘れたころに!+数字をecho
$ echo "もうやだ!11"
echo "もうやだ$(sudo rm -rf ./*)"  # ←これはBashが出力する行。
もうやだ
$ # ↑この行でシステムが破壊される
```

気をつけようね。
【第１０回 野村総合研究所 平井周さん】2024 Japan AWS Jr. Champions インタビュー企画

初めまして！2024 Japan AWS Jr. Championsのふくちーぬと申します！
AWS Japanが6月に開催したAWS Summit Japanにて、2024 Japan AWS Jr. Championsが発表されました。Jr.Championsは、AWSを積極的に学び、アクションを起こし、周囲に影響を与えている若手エンジニア向けの表彰プログラムとなっております。Jr.Championsについて多くの方に知ってもらいたいため、表彰された方々にインタビューをしていきます。

第１０回目は、株式会社野村総合研究所の平井周さんです！
![IMG_8283.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925293/4e735fa7-d039-454f-87c8-a48fa3893aaf.jpeg)


https://aws.amazon.com/jp/blogs/psa/2024-japan-aws-jr-champions/
# 質問１：これまでの経歴、現在の業務、AWSを知った経緯を教えてください。
2021年入社の社会人4年目として、クラウドテクノロジーに特化した部署でキャリアを積んでいます。主にパブリッククラウドサービスを活用したセキュリティソリューションの開発とクラウド導入支援に従事しています。AWSとの出会いは、クラウド部署への配属がきっかけです。業務を通じて様々なクラウドプロバイダーに触れる中で、AWSの幅広いサービス群と革新性に魅力を感じました。
# 質問２：Jr.Championsを目指した理由、選出につながったと考える活動があれば教えてください。
部署内に多くのTop EngineersやAmbassadorsが在籍する環境と、特に憧れの存在であるAmbassadorの早川愛さんの影響が大きいです。先輩のような深い専門知識と情熱を持つエンジニアになりたいという思いが原動力となっています。

選出に繋がった活動は3つあります。特に3つ目の活動において、社内のR&D施策に自ら応募し、パブリッククラウドサービスを用いた衛星データの分析に関して技術検証と事業化推進をしました。積極性と独自性が評価されたと考えています。
- 案件活動
- 社内外での発信活動
- 社内R&D施策活動

# 質問３：Jr.Championsとして現在どのような活動をしていますか。
技術イベントでの講演や技術記事執筆、共著での技術書籍出版に取り組んでいます！また社内では若手エンジニア向けに勉強会を主導し、クラウド技術の普及と人材育成に貢献しています。
# 質問４：Jr.Championsに選出されてよかったことはありますか。
AWSから公式に評価されたことで、顧客からの信頼獲得に繋がりました。また、普段の業務では経営層の方との関わりが多い中、同年代のエンジニアとの貴重な交流機会を得られたことも大きいです。
# 質問５：Jr.Championsの活動で大変だったことはありますか。
特に大変さはないものの、技術面・企画面の両方で「相応しい活動をせねば！」と良い意味でのプレッシャーを感じています。
# 質問６：今後の夢や目標はありますか。
今後はPaaSやSaaSサービスへの理解を深めつつ、AWSを軸としながら他クラウドとの比較を専門的に語れるマルチクラウドのエキスパートになることです！
# 質問７：Jr.Championsを目指す若手に向けてメッセージをお願いします。
業務だけでなく様々な角度からAWSに触れることが大切です。またコミュニティでの交流や外部登壇を通じて「知る・知られる」関係を広げてみてください。
# 質問８：平井さんが投稿・登壇した一押しのアウトプットがあれば教えてください。
「AWS認定ソリューションアーキテクト-プロフェッショナル 第2版 ~試験特性から導き出した演習問題と詳細解説~」の書籍を執筆しました。

https://www.amazon.co.jp/AWS%E8%AA%8D%E5%AE%9A%E3%82%BD%E3%83%AA%E3%83%A5%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%88%EF%BC%8D%E3%83%97%E3%83%AD%E3%83%95%E3%82%A7%E3%83%83%E3%82%B7%E3%83%A7%E3%83%8A%E3%83%AB-%E7%AC%AC2%E7%89%88-%EF%BD%9E%E8%A9%A6%E9%A8%93%E7%89%B9%E6%80%A7%E3%81%8B%E3%82%89%E5%B0%8E%E3%81%8D%E5%87%BA%E3%81%97%E3%81%9F%E6%BC%94%E7%BF%92%E5%95%8F%E9%A1%8C%E3%81%A8%E8%A9%B3%E7%B4%B0%E8%A7%A3%E8%AA%AC%EF%BD%9E-%E5%B9%B3%E5%B1%B1-%E6%AF%85/dp/4865943978/ref=pd_aw_vtp_h_pd_aw_vtp_h_m_sccl_1/355-9730898-6363348?pd_rd_w=4Y7Qc&content-id=amzn1.sym.cd38da9e-a502-409d-8938-0ac107d0fddd&pf_rd_p=cd38da9e-a502-409d-8938-0ac107d0fddd&pf_rd_r=DERG3SBTSPTSPZ1YV1TK&pd_rd_wg=PJVRa&pd_rd_r=c1c2b009-6e2f-48d3-b879-80b5e3dd82d0&pd_rd_i=4865943978&psc=1

私は、CCoEの立場からコスト最適化・予算管理の章を担当しています。また模擬問題を作成する立場になって、良質なシナリオ作りの難しさを実感しましたが、良い本に仕上がったと思っています。是非読んでいただけると嬉しいです！

## 好きなAWSサービスはなんですか。
Amazon Inspectorです！CCoEの立場から日々セキュリティガバナンスの重要性を感じているため、今後もアップデートを注視していこうと思っています！
# 最後に
平井さんへのインタビューを通じて、案件活動だけではなく書籍執筆等、幅広い活躍をされている姿に大変感銘を受けました！私自身書籍を購入させていただきましたが、資格取得目的だけではなく、実践的なアプローチと組織への導入方法を解説しており非常に勉強になりました！平井さんの単独執筆も期待しています！（笑）

次回のインタビューもお楽しみに！
![平井さん集合写真.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3925293/d6349625-16cb-459a-801c-79ba47f5ca09.png)
Tailwind CSS の基本と `className` が長くなるときの対処法

# Tailwind CSS の基本と `className` が長くなるときの対処法

## 🎨 Tailwind CSS でよく使う基本クラス
Tailwind CSS はユーティリティファーストの CSS フレームワークで、以下のようなクラスを基本的に使用します。

### **1. レイアウト関連**
- **Flexbox & Grid**
  ```css
  flex, flex-row, flex-col, justify-center, items-center
  grid, grid-cols-3, gap-4
  ```
- **幅と高さ**
  ```css
  w-1/2, h-64, max-w-screen-lg, min-h-screen
  ```
- **余白 (Margin & Padding)**
  ```css
  m-4, mx-auto, p-2, py-6
  ```

### **2. 色と背景**
- **テキストカラー**
  ```css
  text-gray-700, text-blue-500, text-white
  ```
- **背景色**
  ```css
  bg-gray-100, bg-blue-600, bg-gradient-to-r
  ```
- **ボーダーとシャドウ**
  ```css
  border, border-gray-300, shadow-lg, rounded-lg
  ```

### **3. トランジションとホバー**
- **アニメーション効果**
  ```css
  transition, duration-300, ease-in-out
  ```
- **ホバー時のエフェクト**
  ```css
  hover:bg-blue-700, hover:shadow-xl
  ```

## 📝 `className` が長くなるときの対処法
Tailwind は便利ですが、クラスが増えると `className` が長くなり、可読性が低下します。そこで、整理する方法を紹介します。

### **✅ 1. `clsx` や `classnames` を使う**（推奨）
**インストール**
```sh
npm install clsx
# または
npm install classnames
```

**使用例（`clsx`）**
```tsx
import clsx from "clsx";

const buttonClass = clsx(
  "px-4 py-2 rounded-lg transition duration-300",
  "bg-blue-500 text-white hover:bg-blue-700",
  "disabled:bg-gray-400"
);

<button className={buttonClass}>Click Me</button>;
```

**`classnames` を使う場合**
```tsx
import classNames from "classnames";

const buttonClass = classNames(
  "px-4 py-2 rounded-lg transition duration-300",
  "bg-blue-500 text-white hover:bg-blue-700",
  { "disabled:bg-gray-400": true }
);

<button className={buttonClass}>Click Me</button>;
```

### **✅ 2. Tailwind の `@apply` を使う**
**CSS ファイルに定義**
```css
/* styles/globals.css */
.btn-primary {
  @apply px-4 py-2 bg-blue-500 text-white rounded-lg transition duration-300 hover:bg-blue-700;
}
```

**コンポーネントで使用**
```tsx
<button className="btn-primary">Click Me</button>
```

### **✅ 3. `const` にクラスを格納**
```tsx
const buttonStyles =
  "px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-700 transition duration-300";

<button className={buttonStyles}>Click Me</button>;
```

### **✅ 4. `variants` パターン（ユーティリティ関数）**
```tsx
const buttonClass = (type: "primary" | "secondary") =>
  clsx(
    "px-4 py-2 rounded-lg transition duration-300",
    type === "primary"
      ? "bg-blue-500 text-white hover:bg-blue-700"
      : "bg-gray-300 text-black hover:bg-gray-400"
  );

<button className={buttonClass("primary")}>Primary</button>;
<button className={buttonClass("secondary")}>Secondary</button>;
```

##  まとめ
| 方法 | 使いやすさ | メリット |
|------|--------|---------|
| `clsx` / `classnames` | ⭐⭐⭐ | 条件付きクラス適用、可読性向上 |
| `@apply` | ⭐⭐⭐ | スタイルの再利用 |
| `const` に格納 | ⭐⭐ | シンプルで管理しやすい |
| `variants` 関数 | ⭐⭐⭐ | 柔軟にカスタマイズ可能 |

**おすすめの方法**
- 条件付きクラス → **`clsx` or `classnames`**
- 再利用を考える → **`@apply`**
- シンプルに整理 → **`const` に格納**
- 柔軟にカスタマイズ → **関数 (`variants` パターン)**

Tailwind を活かしつつ、可読性を上げる方法を選んで使おう！🚀
【C++】ABC396 C.Buy Balls 解説

# はじめに
こんにちは！競技プログラミングをやっている学生のmikan0131です！
今回は久しぶりにAtCoderの解説をしていこうと思います！

# 問題文

https://atcoder.jp/contests/abc396/tasks/abc396_c

要するに、一番価値が高くなるように黒・白のボールを選べ、でも黒の数$\ge$白の数だよってことみたいです。
それでは、解いていきましょう。

# 解説
とりあえず、必要な値を入力しましょう。
```cpp
#include <bits/stdc++.h>
using namespace std;

int N, M;
int B[200009], W[200009];

int main() {
    cin >> N >> M;
    for (int i = 1; i <= N; i++) cin >> B[i];
    for (int j = 1; j <= M; j++) cin >> W[i];
    return 0;
}
```
ひとまず、ここまでで入力は終了です。
では、ここからどうしましょうか？

まず、当たり前の話ですが、価値の値が負のボールを選ぶと、価値の総和は下がりますし、正のボールを選ぶと、価値の総和は上がります。なので、できれば価値の値が正のボールを全部選びたい！
しかし、ここで問題になるのは、問題の条件である「(黒のボールの個数)$\ge$(白のボールの個数)」というところです。
もし、正の価値のボールをすべて選んでも、その時に選んだ黒のボールの数が白のボールの数より多かったら条件は成り立たなくなってしまいます。
それなら、どうすればいいのでしょうか？さすがに全部試すのも間に合わないし…
そこで、思いついたのが黒、白どちらのボールの価値もソートしてから、二つ同時に大きい順から試すという方法です。
どういうことかというと、配列$B$・$W$をソートかつリバースし、大きい順に並べます。
そして、大きいほうから順に黒と白の価値を同時にみていって、下の図のような条件で価値を決める方法です。
どちらも正の価値の時は当然それらのボールの価値の和答えにを足す。
黒が負の価値の時は、白の正の価値を足すために黒のボールも追いつく必要がありますが、それで価値がマイナスになると本末転倒なので、黒と白の価値の和が正の時だけ答えに足す。
白が負の価値の時は、黒だけ足せば問題ないので、黒の価値を足す。
さらに、どちらも負の時は当然どちらも足さない。
![スクリーンショット 2025-03-21 203105.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757120/906f56cc-ab7f-4fa8-ac23-63c11faab057.png)
このようにしてみていけば、$O(N)$で答えを求めることができます。
# 解答
```cpp
#include <bits/stdc++.h>
using namespace std;
typedef long long ll;//値がint型におさまらない（おさまるわけない）ので、long long型にする

ll N, M;
ll B[200009], W[200009];

int main() {
    //入力
    cin >> N >> M;
    for (ll i = 1; i <= N; i++) cin >> B[i];
    for (ll i = 1; i <= M; i++) cin >> W[i];
    //B, Wをソート
    sort(B + 1, B + N + 1);
    sort(W + 1, W + M + 1);
    reverse(B + 1, B + N + 1);
    reverse(W + 1, W + M + 1);
    ll ans = 0;
    //解説のように条件分岐をしながら見ていく（途中breakがあるのは余計な計算を省くためで、正直なくてもいい）
    for (ll i = 1; i <= N; i++) {
        if (B[i] >= 0 && W[i] >= 0) {
            ans += B[i] + W[i];
        }
        else if (B[i] >= 0 && W[i] < 0) {
            ans += B[i];
        }
        else if (B[i] < 0 && W[i] >= 0) {
            if (B[i] + W[i] >= 0) {
                ans += B[i] + W[i];
            }
            else {
                break;
            }
        }
        else {
            break;
        }
    }
    cout << ans << endl;
    return 0;
}
```
# おわりに
読んでくれた方、ありがとうございました！
解説、わかりにくかったらごめんなさい
この解説で分かってくれた人はこの解説をupsolvingに役立ててくれたらうれしいです！
ありがとうございました！
Quasar.js の main.js がない時

# グローバルに登録
なにかのライブラリの機能をグローバルに登録したい場合、Vue.jsの場合は
`main.js` に `app.use()` で追加するのが普通ですが、

Quasar.js のプロジェクトには main.js が存在しない（時がある）。

# どこに？
どこに書いてあるのかと言えば、
boot ディレクトリに書いてあります。
Quasar は boot ディレクトリの記述から、
main.js を作るようです。

# 例えば、boot に書くとラクになる例
大量の `app.use()` をいろんな条件で出す時に、

main.js が役割とか別になく、
とりあえず全部突っ込む場所になってる時には有効です。

これくらいになると import がぐちゃぐちゃになるので、

```main.js
app.use(router)
app.use(pinia)
app.use(i18n)
app.use(axios)
app.use(auth)
app.use(charts)
app.use(toast)
app.use(logger)
app.use(env)
app.use(socket)
app.use(vuetify)
app.use(formKit)
app.use(queryClient)
app.use(featureFlags)
app.use(errorHandler)
```

↓ boot/xxx.js を作れば

```boot/i18n.js
import { boot } from 'quasar/wrappers'
import { createI18n } from 'vue-i18n'

const i18n = createI18n({ /* ... */ })

export default boot(({ app }) => {
  app.use(i18n)
})

export { i18n }
```

いろんな記述を、役割ごとに個別に書くことができます。
AIにコードを書かせる時プロンプトから
自動的に Vue.js だと判断して回答をくれることが多いですが、

`main.js` に `app.use()` しましょう。
という回答がでて、困るときがあるので、

`vue.js` ではなく、`Quasar.js` を使っていますと
明記した方が、正しい回答が帰りやすいかもしれません。

# Jest と組み合わせが大変
なので boot に分割しておくと、メンテナンス性が上がるんですが、
Quasar.js でテストコードを書く時、boot と Jest との組み合わせは
相性があまり良くないです。Jest が boot を読み込んでくれないです。

# そういう場合どうするか
というと、boot を使わずに書き直して、`plugins` などに別のファイルに保存しておきます。
Jest の設定の `test/setup.js` でテスト用のグローバルに登録します。

``` test/setup.js
import { i18n } from '@/plugins/i18n'
config.global.plugins = [i18n]
```

Quasar.js と Jest の相性が全然わるくて困る時は
まず boot をリファクタリングして下さい。ということです。
Driveはもう古い？AIナレッジ管理で業務効率を80%向上させる方法


こんにちは、Hanakoです。技術チームの管理を5年間経験してきました。
AIが急速に進化する中で、「どうすればAIを活用してチームをよりスマートで効率的にできるか？」を考えています。今日は、私が実際に感じた課題と、AIナレッジ管理を活用した解決策をシェアしたいと思います。

## **Driveに埋もれた資料、すぐに見つかりますか？**

あなたのチームでは、こんなお悩みありませんか？

✅ **「あの資料どこ？」の** **社内問い合わせがとまらない**
✅ **古いバージョンを使ってしまい、情報がズレる**
✅ **フォルダが増えすぎて、検索してもなかなか見つからない**

私は以前、チームのドキュメント管理をGoogle Driveで運用していました。でも、気がつけばフォルダが乱立し、「どこに何があるのか分からない問題」が発生。結果、情報探しに時間がかかり、業務効率が低下していました。

そこで、AIナレッジ管理を導入し、状況が大きく変わったのです。以下、**私たちが活用している[「ONES Wiki + ONES Copilot」](https://ones.com/lp2/products/wiki-ai?utm_campaign=9607474-JP%20%E7%AB%99%E5%A4%96%20SEO&utm_source=qiita_hanako&utm_medium=qa0321)の解決策を例に**、実際に起こった4つの課題とその解決方法をご紹介します。

## **課題①：新入社員のオンボーディングに時間がかかる**

### **🚨 Before：質問の連続でmentorの時間が奪われる**

新入社員が入るたびに、「このプロジェクトの運用ルールは？」「このツールの設定方法は？」と質問攻め。
会社の規則や技術ドキュメントを読むだけで数日かかり、結局分からないことはmentorに頼るしかない。
でも、mentorも忙しく、全ての質問にすぐ答えられるわけではない…。

### **✅ After：AIナレッジ管理で解決！**

AIナレッジ管理を導入すると、**日々の業務で蓄積されたナレッジをAIが整理し、新入社員が自然言語で質問すれば即座に答えを提示**。
例えば、「コードレビューの基準は？」と聞けば、**AIがチームの最新の情報を瞬時に提供**できます。

💡 **実際の効果**
✅ 新入社員のオンボーディング期間を**半分以下に短縮！**
✅ 何度もmentorに質問する必要がなくなり、独立して業務を進められる
✅ mentorの時間を奪わず、本来の業務に集中できる

## **課題②：Driveがカオス化！必要な情報がすぐに見つからない**

### **🚨 Before：資料の中で迷子になる**

新入社員だけでなく、既存メンバーでも「○○の資料、どこ？」と探し回ることが日常茶飯事。
フォルダが複雑すぎて検索しても出てこないし、Slackで聞いても「ちょっと待って」と言われる。
結果、30分かけてようやく資料を発掘する始末…。

### **✅ After：AIナレッジ管理で解決！**

AIなら、ファイル名だけでなく、**ドキュメントの中身を理解して検索**できる。
例えば、「製品Xの調査結果はどこにありますか？」と聞けば、**AIが関連資料を瞬時にピックアップ**し、最新バージョンを提案してくれる。

💡 **実際の効果**
✅ 検索時間が30分 → **1分に短縮！**
✅ どの資料が最新か、AIが判断してくれる
✅ Slackでの「どこ？」のやり取りが激減

![img](https://our.ones.pro/wiki/api/wiki/editor/RDjYMhKq/73u1eTFj/resources/mO00A_wRv-o4MmN9WBSgAsWajUDafgpdGYBOOP6jn0U.png?token=W.fHRPWnwJ5lvc5k2d4GXNXl8L9-zFiRTWhKucw2peGHJMJH82w8IY7pdW9XXz-Mg)


## **課題③：過去のナレッジが活かされず、同じミスを繰り返す**

### **🚨 Before：知見が散逸し、ゼロから調査し直し**

1年前に対応した不具合と同じ問題が発生。
しかし、**当時の対応方法を知っているメンバーは異動済み**。
Driveの膨大な資料を手動で探し回るが、結局見つからず、またゼロから調査をやり直すことに…。

### **✅ After：AIナレッジ管理で解決！**

過去の議事録や技術ドキュメントを**AIが自動で整理し、知識グラフを構築**。
新しい不具合が発生したとき、「このエラー、過去にどう対応した？」と聞けば、**類似事例とその解決策を瞬時に提示**してくれる。

💡 **実際の効果**
✅ 同じ調査を繰り返す無駄を削減（作業時間 50% 短縮）
✅ 異動・退職しても、知見がチーム内に残る
✅ ナレッジが蓄積されることで、チーム全体のレベルアップ

## **課題④：顧客の要望分析に時間がかかる**

### **🚨 Before：プロジェクト資料が膨大で、過去の顧客要望を探すのが大変**

長期プロジェクトになると、顧客ごとの仕様書やミーティングメモが増えすぎて、
「このクライアント、以前どんな要望を出していたっけ？」を探すだけで数時間かかることも。
しかも、**バージョン管理ミスで、古い仕様をもとに対応してしまうリスクも…！**

### **✅ After：AIナレッジ管理で解決！**

AIに「○○社の過去の要望と主要な課題は？」と聞けば、**膨大な資料の中から、重要なポイントを瞬時に抽出＆要約**。
さらに、「次に提案すべき改善点は？」と質問すれば、AIが過去の事例から最適なアクションプランまで提示。

💡 **実際の効果**
✅ クライアントの要望分析時間を80%短縮
✅ 過去の要望と現在のニーズを正確に把握し、提案の精度向上
✅ バージョン管理ミスを防ぎ、クライアント対応の品質を向上



![img](https://our.ones.pro/wiki/api/wiki/editor/RDjYMhKq/73u1eTFj/resources/ddgFlFCjLeYye2jwrVYG3h34PZ_9mf4Nuc5eTpz4ZsQ.png?token=W.fHRPWnwJ5lvc5k2d4GXNXl8L9-zFiRTWhKucw2peGHJMJH82w8IY7pdW9XXz-Mg)

## **AIナレッジ管理の導入で、Driveの限界を超えよう！**

私はこの変革を経験し、今では「もうDriveだけには戻れない」と感じています。
AIを活用することで、**ドキュメントを単なるデータの集まりではなく、チームの成長を加速させるナレッジ資産にできる**のです。

📢 **あなたのチームでは、どんなドキュメント管理の課題がありますか？**
ぜひ、コメントであなたの経験をシェアしてください！ 🚀
Cloudflare でプロキシ化した際に一部ユーザーがリダイレクトし続ける不具合対応

# :warning:完全に自分用メモ書きです。
詳しく調べられていないので間違っている個所や指摘があればお願いします。

個人開発サービスに Cloudflare を導入してサーバーへのリクエストをプロキシしてもらうことにした。
Cloudflare 導入後に一部ユーザーからリダイレクトしてしまって接続できない報告が
> Load cannot follow more than 20 redirections

原因は Cloudflare の SSL/TLS モードを Flexible にしていたためだった。
Flexible だと CLoudlfare からサーバーへ HTTPS ではなく HTTP リクエストが送られる。

サーバー側の Nginx で HTTP リクエストを HTTPS にリダイレクトするようにしていた。リダイレクトされたリクエストは Cloudflare に届き、再度 HTTP リクエストとしてサーバーに送られ、無限ループ。

解消方法は、Cloudflare の SSL/TLS モードを Full 以上にするか、サーバーの HTTP ＝＞ HTTPS リダイレクトを無効にするか。

[公式Doc](https://developers.cloudflare.com/ssl/troubleshooting/too-many-redirects/#encryption-mode-misconfigurations)


なぜ一部ユーザーだけだったのかは不明。Cloudflare 導入時に DNS キャッシュがなんたらでプロキシ化しても24時間以内は古い DNS 使うかも、みたいなことが書いてあった気がするので、リクエストできていた人は更新が反映されていなかったのかも。（ふわふわ）
DockerでTypeScript環境を構築する際に遭遇したエラーと対処法

# DockerでTypeScript環境を構築する際に遭遇したエラーと対処法

こんにちは！今回はDockerでTypeScript環境を構築しようとした際に発生したエラーと、その解決方法について備忘録として残しておきます。

## 発生したエラー
Docker環境でNext.jsをセットアップしようとしたところ、以下のエラーに遭遇しました。

```bash
An error occurred in next/font.

Error: Cannot find module '@tailwindcss/oxide-linux-x64-gnu'
Require stack:
- /app/node_modules/@tailwindcss/oxide/index.js
- /app/node_modules/@tailwindcss/postcss/dist/index.js
...
```

見た感じ、`@tailwindcss/oxide-linux-x64-gnu` が見つからないとのこと。最初は「依存関係の問題かな？」と思いましたが、いろいろ調べて試行錯誤した結果、原因がわかりました。

## エラーの原因

このエラーの原因は大きく分けて2つ。

1. **Dockerのボリューム設定**によって `node_modules` が適切に管理されていない。
2. `optionalDependencies` に必要なモジュールが含まれておらず、自動インストールされない。

特に、Docker環境では `node_modules` の扱いがローカルと異なるため、思わぬトラブルに繋がりやすいですね。

## 解決方法

### 1. Dockerのボリューム設定を見直す

`docker-compose.yml` や `Dockerfile` で `node_modules` をボリュームとして指定している場合、これが問題になっている可能性があります。ボリューム設定を削除すると解決する場合があります。

#### 修正前（問題のある設定）
```yaml
docker-compose.yml
volumes:
  - .:/app
  - /app/node_modules  # これを削除！
```

この `/app/node_modules` のボリューム指定を削除すると、エラーが解消されることが多いです。

### 2. `package.json` に `optionalDependencies` を追加

`package.json` に以下を追加することで、`@tailwindcss/oxide-linux-x64-gnu` や `lightningcss-linux-x64-gnu` が自動的にインストールされるようになります。

#### 修正後（`package.json` の追記）
```json
"optionalDependencies": {
  "@tailwindcss/oxide-linux-x64-gnu": "^4",
  "lightningcss-linux-x64-gnu": "^1"
}
```

これで問題なく動作するはず！

## まとめ
DockerでNext.js環境を構築するときに `@tailwindcss/oxide-linux-x64-gnu` のエラーに遭遇したら、以下の点を確認。

✅ `volumes` に `/app/node_modules` を指定していないか？（削除する）  
✅ `package.json` の `optionalDependencies` に `@tailwindcss/oxide-linux-x64-gnu` と `lightningcss-linux-x64-gnu` を追加したか？  

今回のエラーでハマった方の参考になれば幸いです！
GPT-4o vs GPT-4.5を徹底比較！どちらが本当に使えるのか？

生成AIの技術は急速に進化し続けており、その中でもOpenAIのGPTシリーズは特に注目を集めています。

最近発表されたGPT-4oと、それに続くGPT-4.5は、多くのユーザーにとってどちらを選ぶべきか迷う存在です。

GPT-4oは「omni（万能）」を意味し、マルチモーダル対応の強化が特徴ですが、GPT-4.5はさらに高度な言語処理能力を備えているとされています。

本記事では、GPT-4oとGPT-4.5の違いを詳しく比較し、それぞれの強みや弱み、どのような用途に適しているのかを解説します。

AIを活用する際に、どちらが最適な選択肢となるのかを判断するための参考にしてください。

無料版のAIチャットを使用したい方は、下記のサイトを参考にしてください。


https://ai.tencho-ex.com/


# 1. GPT-4oとは？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4028918/f034ce39-f72b-4d2e-ad6e-d2e922234e7a.png)
GPT-4oは、GPT-4の改良版としてリリースされた最新モデルです。「o」は「omni（万能）」を意味し、特にマルチモーダル対応の強化が特徴です。

## GPT-4oの主な特徴

### 1.マルチモーダル対応

テキストだけでなく、画像、音声、動画データを統合的に処理可能。

画像解析や音声認識の精度が向上。

### 2.高速な応答速度

従来のモデルと比較して、より素早く応答。

チャットボットやリアルタイム翻訳での利用に最適。

### 3.コストパフォーマンスの向上

GPT-4と同等以上の性能を持ちながら、運用コストが低減。

より多くのユーザーが手軽に利用可能。

### 4.リアルタイム処理に強い

音声や動画と組み合わせた対話AIとしての性能が向上。

## GPT-4oの弱み

最新技術のため、まだ最適化が進行中の部分もある。

GPT-4.5と比較すると、特定の専門分野では推論精度がやや劣る可能性。

# 2. GPT-4.5とは？


GPT-4.5は、GPT-4oよりもさらに高度な言語処理能力を持つとされる次世代モデルです。特に、推論能力や長文生成の精度が向上しています。

## GPT-4.5の主な特徴

### 1.高度なテキスト生成能力

長文の一貫性が向上し、論理的な文章をよりスムーズに作成可能。

クリエイティブな文章（小説・脚本など）の生成にも適している。

### 2.推論能力の向上

複雑な質問や専門的な内容にも対応可能。

科学、医学、法律などの分野での精度が向上。

### 3.知識量の増加

GPT-4oよりも新しいデータを学習し、より正確な情報を提供。

### 4.エラー率の低減

誤解や誤った情報の出力を減らし、より信頼性の高い回答を生成。

## GPT-4.5の弱み

GPT-4oに比べて、リアルタイム処理やマルチモーダル対応の速度がやや劣る。

計算コストが高く、導入コストも上がる可能性がある。

# 3. GPT-4o vs GPT-4.5：徹底比較
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4028918/d958d1b8-ca32-4e91-acd8-7864c8bc1f80.png)
## 結論：

リアルタイム処理やマルチモーダルが重要ならGPT-4oが最適。

より高精度なテキスト生成や推論を求めるならGPT-4.5が有利。

# 4. どちらを選ぶべきか？

✅ GPT-4oを選ぶべき人

AIアシスタントやチャットボットを開発したい人。

画像・音声認識を活用したプロジェクトを考えている人。

低コストで高性能なAIを利用したい人。

✅ GPT-4.5を選ぶべき人

高度な文章生成（小説・論文など）を必要とする人。

専門的な分野の情報を正確に扱いたい人。

長期的に精度の高いAIを活用したい企業や研究者。

# 5. まとめ

1.GPT-4oとGPT-4.5は、それぞれ異なる強みを持つAIモデルです。

2.GPT-4oはリアルタイム処理やマルチモーダル対応に強く、応答速度が速い。

3.GPT-4.5は高度なテキスト生成や推論能力に優れ、知識量が多い。

利用シーンに応じて最適なモデルを選び、AIの力を最大限活用しましょう！

https://ai.tencho-ex.com/
【Ruby】attr_readerとattr_writerの違いがわからなくなる...

まず、結論から。

| 宣言 | 読み取り | 書き込み |
| --- | --- | --- |
| attr_reader | できる | できない |
| attr_writer | できない | できる |
| attr_accessor | できる | できる |

# 具体例

## attr_reader

```rb
class Person
  attr_reader :name

  def initialize(name)
    @name = name
  end
end

person = Person.new("Taro")
puts person.name     # => "Taro"
person.name = "Jiro" # => エラー！（書き込みできない）
```

## attr_writer

```rb
class Person
  attr_writer :name

  def initialize(name)
    @name = name
  end
end

person = Person.new("Taro")
puts person.name     # => エラー！（読み取りできない）
person.name = "Jiro" # => OK！
```

# まとめ

Railsで使うなら`attr_accessor`になっちゃうから、あまり使わないよね。

い
Next.js App routerでの ルーティングとコンポーネントを別々に管理

Next.jsのApp Routerを使用して、ルーティングとコンポーネントを分離して管理する方法について。

まずページを設計し、そのページに必要なコンポーネントを作成します。
次に、作成したコンポーネントをindex.tsファイルにまとめます。
そして、route1/page.tsxなどのページコンポーネントから、index.tsファイルを介して必要なコンポーネントをまとめてimportします。

# なぜこのようなことをするのか？

v0などでコンポーネントを作る

Clineなどで1機能ごとにコードを生成してもらう。

GitHub Copilot Agent mode でコンポーネントやフェッチ、ビジネスロジックのコードを生成してもらう。

などAIに指示を与えやすくする方法だと考えています。



# フォルダ構造

Next.js App routerを使用します。
route1のページは ComponentA B Cでつくられています。

```
src/
├── app/
│   ├── page.tsx             # ルートページ
│   ├── route1/
│   │   ├── page.tsx         # ルート1のページ
│   └── route2/
│       └── page.tsx         # ルート2のページ
├── components/
│   ├── common/            # 共通コンポーネント
│   │   ├── Button/
│   │   │   ├── Button.tsx
│   │   │   └── Button.test.tsx
│   │   └── Input/
│   │       ├── Input.tsx
│   │       └── Input.test.tsx
│   ├── route1/               # route1ページ用のコンポーネント群
│   │   ├── ComponentA/       # コンポーネントA
│   │   │   ├── ComponentA.tsx
│   │   │   ├── ComponentA.logic.ts
│   │   │   ├── ComponentA.fetch.ts
│   │   │   └── ComponentA.test.ts
│   │   ├── ComponentB/       # コンポーネントB
│   │   │   ├── ComponentB.tsx
│   │   │   ├── ComponentB.logic.ts
│   │   │   ├── ComponentB.fetch.ts
│   │   │   └── ComponentB.test.ts
│   │   ├── ComponentC/       # コンポーネントC
│   │   │   ├── ComponentC.tsx
│   │   │   ├── ComponentC.logic.ts
│   │   │   ├── ComponentC.fetch.ts
│   │   │   └── ComponentC.test.ts
│   │   └── index.ts

```


## コンポーネントをまとめる

route1ページ用のコンポーネントをまとめます。

```index.ts
import  ComponentA from "src/components/route1/ComponentA"
import  ComponentB from "src/components/route1/ComponentB"
import  ComponentC from "src/components/route1/ComponentC"

export { ComponentA, ComponentB, ComponentC }

```

👆exportは名前付きexportを使用します。

src/app/route1/page.tsx

```page.tsx
import * as route1 from '@/components/route1'; // パスエイリアスを使用

export default function Route1Page() {
  return (
    <div>
      <route1.ComponentA />
      <route1.ComponentB />
      <route1.ComponentC />
    </div>
  );
}

```

コンポーネントをindex.tsxからまとめてimportします。

# コロケーション

ComponentA.logic.ts, ComponentA.fetch.tsのように、コンポーネントに関連するロジックやデータフェッチをコンポーネントと同じディレクトリに配置することをコロケーションと言います。

```
ComponentA.tsx
ComponentA.logic.ts
ComponentA.fetch.ts
ComponentA.test.ts

```

ComponentA.tsxは、ComponentA.logic.ts, ComponentA.fetch.tsをimportして使用します。

ComponentA.test.tsは、ComponentA.tsx, ComponentA.logic.ts, ComponentA.fetch.tsのテストを行います。



# データフェッチの場所

Next.jsの公式ドキュメントでは、データフェッチはサーバーコンポーネント（page.tsx や layout.tsx）で行うことを推奨しています。これにより、クライアントサイドでのデータフェッチによるパフォーマンス低下を防ぎ、SEOにも有利になります。

データフェッチをサーバーコンポーネントで行い、propsとしてコンポーネントに渡すことで、コンポーネントの再利用性とテストの容易性を高めることができます。

コンポーネント内でServer actionを使いデータフェッチを行うことでシンプルなコードになります。

# 参考

Next.jsのディレクトリ構成のベストプラクティスを知っていますか？ - YouTube
https://www.youtube.com/watch?v=ekUQ043k2TQ

14:30 頃～
ウォーターフォール、アジャイル開発、スクラムについて

### アジャイル開発について

まずCI/CDの必要性をまとめる前にアジャイル開発について言及します。
近年のソフトウェア開発はスピード感特に重要であるなと感じております。AIなどの目まぐるしい変化の中でより、プロダクト開発の高速化がより一層求めらると感じます。

### 開発手法の特徴

| 特徴/手法          | ウォーターフォール開発   | アジャイル開発         | スクラム開発           |
|-------------------|---------------------|--------------------|--------------------|
| アプローチ          | 順序型（直線型）           | イテレーション型       | イテレーション型    |
| 計画                 | 詳細な初期計画が必要       | 柔軟で適応的な計画  | 柔軟で適応的な計画 |
| フェーズ              | 要件定義→設計→実装→テスト→運用 | 短いサイクルでの反復   | スプリントでの反復  |
| フィードバックのタイミング | 後半                    | 頻繁に小さな変更ごと  | 頻繁に小さな変更ごと |
| リスク管理           | 後半にリスクが集中         | 継続的なリスク管理     | 継続的なリスク管理  |
| 変更の反映           | 難しい                    | 簡単に反映可能       | 簡単に反映可能      |
| ドキュメント重視      | 高い                      | 中程度                | 中程度             |

#### ウォーターフォールについて

ウォータフォールはプロジェクト間の各フェーズに進捗管理や依存関係の管理が容易であるメリットもあるが、仕様変更による修正が非常にリスクであると言えます
また長期にわたる開発で採用されることが多いと思うので、メンバーの移り変わりが激しいです
それゆえに仕様に関するドキュメントを作成したり手間がかかります。逆にここをサボってしまうと明確な文章が存在しない事となり、後ほど何でこの機能が作られたのかとか、新しいメンバーがドメイン知識を確認することができず開発をすることになりバグが生まれる原因となるパターンも存在すると考えます。なおバージョン管理を怠ったたりして古い文章を参照してしまったりした場合も怖いです

#### アジャイル開発について

アジャイル開発は通常2~3週間程度の短いスプリントで作業を完了させる反復型の手法です
アジャイル開発のメリットとして、想定外の変化やバグに対して柔軟かつ素早く対応できることが一番のメリットかなと思ってます
ただ完全にアジャイル開発がいいとも言えずリモートチームの場合、意思疎通に時間がかかったりスケジュール管理の難しさ、プロダクトの方向性のずれ、コストが増大になること危険性などもあります
使用調整への柔軟な対応ができるゆえ、度重なる使用調整により全体のスケジュールが遅れたり、予定していたリリース日に間に合わない等々、、、


#### スクラム開発について

アジャイル開発には様々な手法（スクラム,エクストリーム・プログラミング（XP）, ユーザー機能駆動開発（FDD））がありますがその一つとしてスクラム開発も取り上げます
スクラムはスクラムマスター、プロダクトオーナー、開発者などの役割を持ったメンバーでチームを組みます

- スクラムマスター
  - チームの仕事の進捗管理
  - メンバーの困りごとを確認し作業の障害となる原因を特定排除を行う
  - チームを健全な状態に保つ
- プロダクトオーナー
  - プロダクトの責任者として役割を持つ
  - プロダクトバックログの優先順位管理（開発すべき機能、要件のリスト）
  - ステークホルダーとの連携調整
  - メンバーから上がってきたプロダクトに関する問題に責任を持って設定を下す役割も持つ
- 開発者
  - 開発に関する幅広い業務を担当

スプリントは一連の作業を行う固定機関であり、通常1〜4週間程度。各スプリントごとに何を達成するかが決められます。この`何を達成するか`を計画することをスプリントプランニング（スプリント系買う）というそうです
いざスプリントが始まったらデイリースクラムでそれぞれのメンバーの進捗や課題を確認するミーティングが開かれます。スクラムのコミュニケーションを改善し、課題の特定、改善が目的です
スプリントが終盤に近づいてきたら、スプリントレビューとスプリントレトロプロスペクティブ（振り返り）を行います。スプリントレビューは、スプリント期間終盤に行う工程で、実装した機能に対するレビューのことです。スプリントレトロプロスペクティブとは、スプリントの振り返りミーティングのことで、スプリントレビューと同様にスプリント最終日に開催されることが多いです。スプリントのよかった点や・課題点を洗い出し、その要因と改善策などをスクラム内で話し合って次回のスプリントに活かすのが目的です。

### CI/CDの必要な理由

#### 高速なリリースサイクル

アジャイルやスクラムの開発手法では、頻繁なリリースと迅速な対応が求められます。CI/CDを導入することで、コードのビルド、テスト、デプロイを自動化し、リリースサイクルを短縮することができます。

#### 高品質なソフトウェア

すべての変更に対して継続的にテストを実行することで、バグの早期発見と修正が可能となり、最終的に高品質なソフトウェアが提供されます。

#### 柔軟な対応力

ウォーターフォール開発が詳細な初期計画に依存しているのに対し、アジャイルやスクラムでは計画の柔軟性が求められます。CI/CDを導入することで、小さな変更をすぐに取り込んでデプロイすることができ、迅速な対応が可能となります。

#### リスク管理の向上

継続的にテストを実行することで、リスクを早期に発見して対応することができます。これにより、プロジェクトの進行中に発生する潜在的なリスクを低減し、プロジェクトの安定性を高めることができます。

### 必要な理由のまとめ

CI/CDは、アジャイルやスクラムのような近代的な開発手法において、高速かつ高品質なリリースの実現、リスクの低減、柔軟な対応を可能にできると感じました。


[引用]
そもそもなぜCI/CDが必要なのか？
- https://manabiba.sink-capital.com/?p=889

開発手法について
- https://asana.com/ja/resources/waterfall-agile-kanban-scrum
クラウドストレージとは何か？クラウドデータのバックアップ方法は？

> 本記事は[こちらのブログ](https://www.alibabacloud.com/blog/what-is-cloud-storage-and-how-to-backup-cloud-data_602065?spm=a2c65.11461433.0.0.4ee35355MSxyUr)を参考にしています。
> 翻訳にはアリババクラウドの[ModelStudio](https://www.alibabacloud.com/en/product/modelstudio)([Qwen](https://www.alibabacloud.com/en/solutions/generative-ai/qwen))を使用しております。

# クラウドストレージとは？

クラウドストレージとは、インターネット上に仮想的なハードドライブを持つようなものです。ファイルを自分のコンピュータや外部ドライブに保存する代わりに、Google、Dropbox、Amazonなどの企業が管理するリモートサーバーに保存します。これらのサーバーはインターネット接続があればどこからでもアクセスでき、ファイルの共有や共同作業が簡単になり、デバイスの容量を解放することができます。さらに、使用した分だけ料金を支払うため、柔軟でコスト効率が高いです。

## クラウドストレージの種類

**パブリッククラウドストレージ:** これは最も一般的なタイプで、Google Drive、Dropbox、Microsoft OneDriveなどの企業によって提供されています。データは共有サーバーに保存されるため、安価で使いやすいです。

**プライベートクラウドストレージ:** これは、より多くのコントロールとセキュリティが必要な企業や個人向けの専用ストレージソリューションです。まるで自分だけのクラウドを持っているようなものです。

**ハイブリッドクラウドストレージ:** パブリッククラウドとプライベートクラウドの混合型です。機密データをプライベートクラウドに、重要度の低いデータをパブリッククラウドに保存することで、両方の利点を得ることができます。

## クラウドデータをバックアップする方法

クラウドストレージは信頼性が高いですが、完全ではありません。誤って削除したり、ハッキングされたり、サービスが停止したりすることにより、データが失われることがあります。そのため、クラウドデータをバックアップすることが重要です。以下にその方法を示します。

### 1. 手動バックアップ

- **ローカルにダウンロードして保存:** 時々、重要なファイルをクラウドからダウンロードし、コンピュータ、外付けハードドライブ、またはUSBメモリに保存します。シンプルですが、定期的に実行することを覚えておく必要があります。
  
- **エクスポートツールを使用:** Google Takeoutのような一部のクラウドサービスでは、すべてのデータを一度にエクスポートできます。これはデータを移行したりバックアップを取ったりする際に便利です。

### 2. 自動化されたバックアップツール

- **サードパーティのバックアップサービス:** Backblaze、Carbonite、Kernel Cloud Backup、Acronisなどのツールは、クラウドデータを自動的にバックアップできます。これらには暗号化やバージョン履歴などの機能が含まれており、古いバージョンのファイルを復元することができます。

- **クラウド間バックアップ:** CloudAllyやSpanningなどのサービスは、あるクラウドサービス（例: Google Drive）から別のクラウドサービス（例: Dropbox）にデータをバックアップできます。これにより、さらなる保護層が追加されます。

### 3. データを同期する

- **複数のクラウド間で同期:** MultCloudやrcloneなどのツールを使用すると、異なるクラウドサービス間でデータを同期できます。一つのサービスが停止しても、他の場所にデータが安全に保存されています。

- **ローカルデバイスへの同期:** SyncthingやResilio Syncなどのアプリを使用すると、コンピュータやその他のデバイス上にクラウドデータのローカルコピーを保持できます。

### 4. バージョン管理とスナップショットを使用する

- **バージョン管理を有効にする:** Google DriveやAWS S3などの一部のクラウドサービスでは、ファイルの複数バージョンが保存されます。誤って上書きや削除を行った場合、以前のバージョンに戻すことができます。

- **スナップショット:** 一部のプロバイダでは、特定の時点でのデータのスナップショットを作成できます。これは後で復元できるデータの「写真」のようなものです。

### 5. データを暗号化する

- **アップロード前に暗号化:** VeraCryptやCryptomatorなどのツールを使用して、ファイルをクラウドにアップロードする前に暗号化します。これにより、特に機密データに対して追加のセキュリティ層が追加されます。

- **エンドツーエンド暗号化を確認:** クラウドプロバイダが転送中および保存中のデータを保護するためにエンドツーエンド暗号化を使用していることを確認してください。

## クラウドデータのバックアップに関するベストプラクティス

- **定期的にバックアップ:** 一度だけバックアップして忘れるのではなく、スケジュール（週ごと、月ごとなど）を設定し、バックアップが最新であることを確認してください。

- **複数のコピーを保管:** 複数のクラウドサービスやローカルストレージなど、異なる場所にバックアップを保存します。これにより、一つのバックアップが失敗しても、他にバックアップがある状態になります。

- **バックアップをテスト:** 定期的にファイルを復元して、バックアップが正常に動作しているか確認します。バックアップが壊れていることに気付くのは最悪です。

- **整理しておく:** バックアップに明確なラベルを付け、何がどこに保存されているかを把握しておきます。緊急時には必要なものを簡単に見つけられるようにします。

- **監視と更新:** ストレージのニーズが増加したり変化したりするにつれて、バックアップ戦略を更新します。

## なぜクラウドデータをバックアップするのか？

クラウドストレージは信頼性を目的に設計されていますが、リスクから完全には免れません。人為的なミス、サイバー攻撃、またはクラウドプロバイダが閉鎖することにより、データが失われる可能性があります。クラウドデータをバックアップすることで、追加の保護層を加えることができます。これは安全ネットのようなもので、必要になることはないことを願いますが、何か問題が発生した場合にはそれが存在していてよかったと思えるでしょう。

要するに、クラウドストレージは素晴らしいツールですが、適切なバックアップ計画の代わりにはなりません。これらの手順とベストプラクティスに従うことで、何が起こってもデータが安全でアクセス可能であることを保証できます。

**免責事項:** ここに記載された意見は参考用であり、必ずしもアリババクラウドの公式見解を表すものではありません。
AIとクラウド: 持続可能なビジネスの新時代

> 本記事は[こちらのブログ](https://www.alibabacloud.com/blog/ai-and-cloud-the-new-era-of-sustainable-business_602067?spm=a2c65.11461433.0.0.4ee35355MSxyUr)を参考にしています。
> 翻訳にはアリババクラウドの[ModelStudio](https://www.alibabacloud.com/en/product/modelstudio)([Qwen](https://www.alibabacloud.com/en/solutions/generative-ai/qwen))を使用しております。

# 「環境は私たち全員が出会う場所であり、共通の関心事です。それは私たち全員が共有する唯一のことです。」 - レディ・バード・ジョンソン

したがって、持続可能性は選択の問題ではなく、必要不可欠なものとなっています。これは現代経済におけるビジネス成功の重要な推進力であり、戦略的差別化要因でもあります。ご存知の通り、天然資源はますます希少になりつつあり、政府、投資家、そして企業は環境、社会、ガバナンス（ESG）のパフォーマンス向上を目指しています。厳格な政府および企業の規制により、環境は最優先事項となり、持続可能な慣行に関心を持つ企業にとって商業上の必要性ともなっています。地球規模でカーボン排出削減への注目が集まっており、個人から巨大な多国籍企業まで、すべての人々に貢献が求められています。進化する市場のニーズに対応し満たすために、持続可能な方法を採用し実行することがあなたのビジネスにとって重要です。世界中で、政府や産業界がネットゼロ達成に向けて一歩踏み出しています。しかし、良い意図を現実のものとし、測定可能な行動に変えるためには、現状を理解し、設定された目標を達成するために何が必要かを把握する能力が求められます。

Click2Cloudでは、AIとAlibaba Cloud for Sustainabilityによって支えられた業界をリードする持続可能性ソリューションスイートを提供しています。持続可能性をすべてのビジネスの中核に据えるため、私たちはクライアントが透明性を高め、資産の実際の社会的、環境的、経済的影響を定量化し、規制報告要件を満たすことを支援します。Alibaba Cloud for Sustainabilityソリューションは、人工知能、データインテリジェンス、IoTをエネルギー部門や産業全体での実証済みの専門知識と組み合わせることで、より優れたパフォーマンス監視、分析、リアルタイムメンテナンスを可能にします。私たちは、詳細な持続可能性戦略の計画、エネルギー消費と環境影響の監視および管理、そしてその戦略の統合を支援します。Click2Cloudでは、企業が持続可能性の課題に対処できるよう力を与えることに取り組んでいます。AI駆動型の持続可能性サービスを通じて、企業がより回復力を持ち、適応力を高め、より良い明日のために持続可能な選択をする手助けをします。これには、Alibaba Cloudの選択肢が含まれており、これが私たちがビジネスに持続可能性を組み込む方法の鍵となっています。

## なぜAlibaba Cloud for Sustainabilityなのか？
[Alibaba Cloud for Sustainability](https://www.alibabacloud.com/solutions/sustainability) は、デジタルソリューションを通じてゼロへの旅路を明らかにし、このグリーン変革を自動化して成功に導くことに完璧に成功しています。従来、排出量の追跡と報告は非常に面倒で、より煩雑なアプローチを要求していましたが、まさにAlibaba Cloud for Sustainabilityがそれを変えました。この拡張可能なソリューションは、自動化されたデータ接続とAI駆動型の実行可能な洞察を通じて、組織が環境影響を記録、報告、削減することを支援します。また、企業向けの持続可能性ソリューション、AIによるESGレポート作成、排出量管理ツール、カーボン目標の追跡、エネルギー使用の最適化を提供します。

### 主な利点：
- 気候変動に対抗し、天然資源を保護する。
- 包容的で再生可能かつ繁栄する社会を育む。
- 持続可能性投資におけるリスクの測定、監視、軽減を行う。
- カーボンフットプリントの追跡、エネルギー使用の最適化、持続可能な運営を推進する。

## 環境影響を減らすためのより賢い気候行動を取る
ESGデータアカウントの可視性を向上させ、持続可能性イニシアチブを加速し、持続可能性の成長のために他の機会が明らかになるようにします。環境影響データをより高い精度と明確な可視性で接続、分析、操作します。そして完全なESGデータ基盤を構築し、レポートを簡素化し、意味のある変化を推進します。

## AI駆動型の持続可能性ソリューションは消費者と市場に影響を与える
- エネルギー消費者にとってより良い価格設定
- 再生可能エネルギーの採用と生産の増加
- 報告のためのメータリング精度の向上
- リスクの低減と意思決定の強化

Alibaba CloudのAI駆動型持続可能性ソリューションを利用して、より持続可能な未来を推進しましょう。

**免責事項：** ここで述べられている見解は参考用であり、必ずしもAlibaba Cloudの公式見解を表しているわけではありません。
wslでelixir その170

# 概要
wsl(wsl2じゃない)で、elixirやってみた。
練習問題やってみた。

# 練習問題
Livebookの、kino.jsで、黒板を動作させよ。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/ac9f3f62-4c07-4351-9c16-bff4b7fadbb2.png)

# サンプルコード

```
defmodule KinoHTML.Drawline do
  use Kino.JS
	def new(toolbox) do
		Kino.JS.new(__MODULE__, toolbox)
	end
	asset "main.js" do
		"""
		export async function init(ctx, toolbox) {
      ctx.root.innerHTML = `
            <canvas id="canvas" style="height: 400px; width: 400px;"></canvas>
			`;
    let canvas = document.getElementById("canvas");
    let ctx2 = canvas.getContext("2d");
    let clickFlg = 0;
    canvas.width = 400
    canvas.height = 400
    function setBgColor() {
      ctx2.fillRect(0, 0, 400, 400);
    }    
    setBgColor();
    function draw(x, y) {
      ctx2.lineWidth = 10;
      ctx2.strokeStyle = 'rgba(255, 255, 255, 1)';
      if (clickFlg == "1") 
      {
        clickFlg = "2";
        ctx2.beginPath();
        ctx2.lineCap = "round";
        ctx2.moveTo(x, y);
      } 
      else 
      {
        ctx2.lineTo(x, y);
      }
      ctx2.stroke();
    };
    canvas.addEventListener("mousedown",() => {
      clickFlg = 1;
    })
    canvas.addEventListener("mouseup", () => {
      clickFlg = 0;
    })
    canvas.addEventListener("mousemove", (e) => {
      if (!clickFlg) 
        return false;
      var t = e.currentTarget.getBoundingClientRect();
    	var x = e.offsetX - t.left;
    	var y = e.offsetY - t.top;
      draw(x, y);
    });    
  }
    """
  end
end

KinoHTML.Drawline.new(0)

```

以上。
安定的なマッチを作る、GSアルゴリズム

# はじめに
人的リソースの配置をどのようにするか、という問題は様々な企業がよく発生する問題です。例えば、新入社員や転職者を新たに雇い入れた際
* どの拠点に何人配置するのか
* どの新人にはだれを教育担当にあてるのか
* どの新人にはどの業務を任せるのか

等々、いわゆるマッチングは頻繁に発生します。
こうした問題は安定結婚問題と呼ばれます。
安定結婚問題、マッチした双方にとって利のある組み合わせで、かつ全体のバランスが取れている状況を作ることができれば理想的です。逆に言うと、その状況が作れない場合、離職、ハラスメント、リソース不足などの企業にとって良くない事象の火種になりかねません。
本記事では、この安定結婚問題を解く手法の一つであるGSアルゴリズムをご紹介いたします。

# GSアルゴリズムによる安定結婚問題の解法
部署A、部署B、部署Cがあり、各部門に一名ずつ新入社員Aさん、Bさん、Cさんを配置する、というシチュエーションだとします。
## 手順1 アンケート
各部署、各新入社員にそれぞれアンケートを取ります。部署へは「新入社員の中から誰を優先的に欲しいか」、逆に侵入社員へは「どの部署に優先して入りたいか」を問います。
アンケート結果を集計すると、以下のようになりました。

||第一希望|第二希望|第三希望| 
|----|----|----|----|
|部署A|Xさん|Yさん|Zさん|
|部署B|Xさん|Zさん|Yさん|
|部署C|Zさん|Xさん|Yさん|
||||
|Xさん|部署C|部署B|部署A|
|Yさん|部署B|部署C|部署A|
|Zさん|部署B|部署A|部署C|

## 手順2 マッチング
マッチングをしていきます。今回は部署の方からオファーをかけていくやり方をしてみます。

1. まず部署Aが第一希望の人材Xさんにオファーを出します。
オファーされた側の人材は、「すでにマッチングしている相手がない場合は、オファーを断ることはできない」、というルールになっています。
Xさんは部署Aのオファーを受けて入れてX-Aのマッチングが一時的に成立します。

1. 次に部署Bが同じく第一希望のXさんにオファーを出します。
この際、Xさんはすでに部署Aとのマッチングが成立していますが、もしオファーをかけられた対象が、自分にとってより望む部署であれば、既存マッチを解消して、再度マッチングすることができます。
今回の例ではXさんは、部署Aより部署Bに行きたがっていますから、X-Aのマッチが解消され、X-Bの一時マッチが成立します。

1. 次に部署CがZさんにオファーを出します。これはそのままマッチ成立です。

1. さて先ほどXさんを失ってしまった部署Aは改めて第二希望のYさんにオファーを出します。Yさんはフリーなので、これもそのままマッチが成立しますね。

#### 結果
* A-Y
* B-X
* C-Z

のマッチングが成立しました。
これがGSアルゴリズムの計算方法になります。

# GSアルゴリズムの面白ポイント
## 駆け落ちが発生しない
このアルゴリズムによって作られたマッチングでは駆け落ちが生じません。
駆け落ちとは、今回の例でいうと、「とある部署はよりほしい新入社員がいて、その新入社員も今の部署よりその部署に入りたがっている」という状況が生じない、ということになります。
例えば部署Aは本来Yさんより、Xさんの方が欲しかったわけですが、Xさんは第一希望の部署に入ってますから、部署Aに行くやる気はわかない、という状況になっており、この状況がすべての部署、全ての新入社員について発生している状況になっています。

## 一見するとこれがベスト、しかし？
今回は手順2で部署の方からオファーをかけていく方式で計算しました。（日本では踏襲的に部署側が選定している会社の方が多いではないでしょうか。）一方もし、新入社員側がオファーを出す、というルールになった場合、結果はどうなるでしょうか。

1. Xさんが部署Cにオファーを出し、C-Xのマッチ成立
1. Yさんが部署Bにオファーを出し、B-Yのマッチ成立
1. Zさんが部署Bにオファーを出す。B-Yのマッチが解消され、B-Zのマッチが成立
1. Yさんが部署Cにオファーを出すも、NG
1. Yさんが部署Aにオファーを出し、A-Yのマッチが成立
#### 結果
||マッチ1|マッチ2|マッチ3| 
|----|----|----|----|
|部署からオファーした場合|A-Y|B-X|C-Z|
|新入社員からオファーした場合|A-Y|B-Z|C-X|

結果成立した組み合わせが変わりました。この結果についても先に述べた「駆け落ちが生じない」状況は生じており、全体最適の観点からいえば、どちらも同じだけの成果を残した選び方をできているといえそうです。

ではこの二つの違いはどう解釈できるのか、結論から言ってしまうと、実は **「希望が通った割合」** が部署と侵入社員で異なるのです。数えてみると以下のようになっていることが分かります。
||部署からオファー|新入社員からオファー|
|----|----|----|
|第一希望の通った部署数|2つ||
|第二希望の通った部署数|1つ|3つ|
|第三希望の通った部署数|||
||||
|第一希望の通った新入社員数||2人|
|第二希望の通った新入社員数|1人||
|第三希望の通った新入社員数|2人|1人|

表の左右を比較すると **「オファーを出した側がより希望を通した結果になっている」** ということが分かります。
お互いの希望の内容によっては、いずれからオファーを出しても、同じ結果に落ち着くこともあります。一方でこのような駆け落ちができないマッチング結果が複数ありうるような希望だった場合、GSアルゴリズムでは必ずオファーを出した側が希望をより通した結果に落ち着きます。

# おわりに
複数の選択肢がある中で互いが互いを選びあう場面は、人生の中のかなり大きな比重を占めるようなイベントで発生島ています。就職先、結婚相手など、もちろんこうした場面で必ずGSアルゴリズムによって決定がなされているわけではありませんが、人間の頭の中でこれと似たような調整が行われているのは間違いありません。
GSアルゴリズムは、選ばれる側ではなく、選ぶ側に居続けることが、自分の希望を通していく上で、重要であることを示唆しているようです。

株式会社LOKIARでは、こうした数理最適化の手法を用いて、業務の効率化を実現するための意思決定をサポートする物流コンサルティング、システム開発業務を承っております。ぜひお気軽にお問合せくださいませ。[物流について相談する](https://www.lokiar.com/contact)

また、弊社では開発にご助力いただける方を募集しています。
まずはカジュアルに情報交換させて頂ければと思いますので、
ぜひ[こちら](https://www.lokiar.com/recruite/entry)からお問い合わせください。
WPF DataGridのheader Foreground を変更するには

ありがちな解説だと

```xml
    <Style TargetType="DataGridColumnHeader">
        <Setter Property="Foreground" Value="Red" />
    </Style>
```

などとするように書いてあるが、単純にバインドした DataGrid ではこれでは変更できない。

ChatGPT による解説

>通常、DataGrid.ColumnHeaderStyle で Foreground を設定すれば DataGridColumnHeader に適用されますが、ヘッダーのコンテンツ (Content) が string の場合、ContentPresenter によって描画されるため、Foreground が適用されません。
そのため、TextBlock を明示的に Header に入れる必要があります。

したがってheader構造を直接指定する必要がある。

```xml
            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding Name}">
                    <DataGridTextColumn.Header>
                        <TextBlock Text="Name" Foreground="White"></TextBlock>
                    </DataGridTextColumn.Header>
                </DataGridTextColumn>
            </DataGrid.Columns>
```