OmniAICreator/Qiita-1.07M huggingface dataset:
lil.gui color system test

# はじめに
　lil.GUI

https://lil-gui.georgealways.com/

これの色指定方法についての自分用メモ

https://openprocessing.org/sketch/2626897

## 指定方法
　まず、コンフィグを用意するにあたり、次のバリエーションを設けた。
```js
  const config = {
    col0:"#fff",
    col1:0xaa00ff,
    col2:{r:100,g:200,b:50},
    col3:{r:0.5, g:0, b:1},
    col4:`rgb(170, 0, 128)`,
    col5:[255, 128, 0] // よくわかんないけど第一成分を1より大きくするとバグる。
    // 255を指定した場合でも256とかするとバグる。おそらくオーバーフローかなんか。
    // 適切に設定しましょう。
  }
```
- col0: #ではじまる3文字ないし6文字の色指定
- col1: 0xで始まる16進数表示
- col2: r,g,bによるオブジェクト表示（0～255指定）
- col3: r,g,bによるオブジェクト表示（0～1指定）
- col4: 文字列でのrgbによる列挙表示
- col5: 長さ3の配列。0～255指定

## lilの設定
　これらに対し次のようにlil.GUIを設定する。
```js
  gui.addColor(config, "col0"); // #~~~~~~が返るよ。
  gui.addColor(config, "col1"); // 整数が返るよ。toString(16)で色になるよ。
  gui.addColor(config, "col2", 255); // 255を付けないと0～1にされるよ。
  gui.addColor(config, "col3"); // そのままだと0～1だよ
  gui.addColor(config, "col4"); // #~~~~~~が返るよ。
  gui.addColor(config, "col5", 255); // 255にした場合は0～255の指定になる。
```
　3番目と6番目はターゲット指定の後で255を指定していることに注意する。

## それぞれの場合の戻り値
　このとき、戻り値はどうなるかということ。コードを見ると分かるが、キーを押すことでそれぞれの戻り値がコンソール出力されるようになっている。お試しあれ。

### col0について（色の文字指定）
　コンフィグをどういじっても#表記の文字列が返る。たとえば#ff3247なら普通に「"#ff3247"」という文字列が返る。p5の場合、これをfillやstrokeの引数として直接使えるし、cssでも使える。

### col1について（色の16進数指定）
　この場合16進数の整数値が返る。24bitの透明度無しのrgbの値である。0～255に直すには、こうする：
```js
    const n = config.col1;
    const redValue = (n >> 16);
    const blueValue = (n >> 8) & 255;
    const greenValue = n & 255;
```
これでrgbになる。

### col2について（オブジェクト指定0～255, 登録時255を登録）
　この場合、全く同じr,g,bをメンバーとするオブジェクトが返る。lilに登録する際255を指定したので0～255で変える。255を指定しないと、デフォルトの場合は0～1にされるので注意する。0～255かどうかなんてコンパイラは知らないので、教えてあげないと。

### col3について（オブジェク指定0～1）
　先ほどと同様に「{r,g,b}」が返るが、指定が無いので0～1で返る。

### col4について
　css文字列がそのまま返るかと思いきや...実はcol0と同じものが返る。要は文字列なら同じということだろう。ただcssにあるような複雑な指定方法（oklchとかいろいろ）は使えず、あくまでrgbでの列挙などに限られる。

### col5について（配列）
　255を指定すれば、0～255の数からなる長さ3の配列として返るようになる。なお、指定しない場合0～1で返る。常に配列の形で返るので、glslなどで使う場合に便利そうである。というか他の形式だと無理だろこれ。なおこれらの1や255より大きな値が配列内に一つでも入ってると表示がバグる。たとえば255でやるなら256などそれより大きな値を入れないようにしよう。

# おわりに
　そんな感じなので、用途に応じて使い分けましょう。ここまでお読みいただき感謝。
Ubuntu で Kubernetes 三昧その１

Ubuntu をダウンロードして、VirtualBoxに入れました。
それぞれ、CPUは4、Memoryは4098です。
masternode1 と workernode1 という名前にしています。

1. 両方のマシンで実施

```
$ sudo apt update
$ sudo apt install bzip2 tar gcc make perl vim
```

デバイスから、「Guest Additions CDイメージの挿入をクリック」する。
クリックして、autorun.shをプログラムとして実行する。
autorun.sh を実行する。
CDを取り出す。
VirtualBoxのタスクバー上で仮想マシン→設定→一般→高度を選択し、クリップボード共有の項目を双方向に変更してOKをクリックする。
仮想マシンリセット

これで、両方の仮想マシン上のテキストのコピペが出切るようになりました。

```
$ uname -r
6.11.0-26-generic
```
一度、アップグレードをかけます。

```
$ sudo apt upgrade
$ sudo shutdown -r now
$ uname -r
6.11.0-26-generic
```

[Ubuntu で Kubernetes 三昧その２](https://qiita.com/intrajp/items/37a283ab2f089fd0a2b9)につづく


参考：

https://kubernetes.io/docs/setup/production-environment/tools/kubeadm/install-kubeadm/

[ゲストOSとホストOS間でコピペをする【VirtualBox】](https://zenn.dev/nakashi94/articles/f42e0ace9766df)
【React】Mantineの「use-form」のバリデーションで他項目の値を参照したい

## 概要
UIライブラリのMantineではReact Hook Formのような、フォーム用のhooksである[use-form](https://mantine.dev/form/use-form/)の機能があります。基本的な使い方はReact Hook Formと似たような雰囲気で、Mantineを導入していればフォーム周りの実装は基本的に、use-formの機能である程度は対応できるかなという所感です。（一応、MantineのUIライブラリを使わず、use-formだけでも独立して使えるようですが）

use-formにはバリデーションの機能もあり、そこまで複雑なバリデーションを実装する必要がなければzodを入れなくてもいいかなと思います。なお、[Form schema validation](https://mantine.dev/form/schema-validation/)のドキュメントで紹介されている通り、zod等を組み込む機能も用意はされています。
今回はuse-formのバリデーションを使った時に、他項目の値を参照してチェックをかけたい場合の実装について紹介します。

## 前提
* 使用したMantineのバージョンは`8.1.0`です。

## 対応
[Validation based on other form values](https://mantine.dev/form/validation/#validation-based-on-other-form-values)のドキュメントにある通り、項目毎のvalidateのメソッドで引数に`values`を追加で設定することで他項目の値を参照できます。

## 実装サンプル
以下のようなフォームの型を用意します。実現したいこととしては`deadLineCheck`が"hour"の時だけ、`deadLineCheckSubSettingHour`に入力チェックをかけたいというものになります。

```typescript
export type TaskInputFormValues = {
  title: string;
  deadLineCheck: string;
  deadLineCheckSubSettingHour?: number;
};
```

useForm部分の実装は以下の通りとなります。なお、number型の入力にはMantineの[NumberInput](https://mantine.dev/core/number-input/)コンポーネントを使用する前提としています。

```typescript
const form = useForm<TaskInputFormValues>({
  mode: "uncontrolled",
    initialValues: {
      title: "",
      deadLineCheck: "",
      deadLineCheckSubSettingHour: undefined,
    },
    validate: {
      title: (value) => {
        if (!value) {
          return "タイトルを入力してください";
        }
        return null;
      },
      deadLineCheckSubSettingHour: (value, values) => {
        // 他項目を参照してチェックを行う
        if (values.deadLineCheck === "hour") {
          if (value == null || value <= 0) {
            return "時間を入力してください";
          }
        }
        return null;
      }
    },
  });
```
fly.ioでVaultwardenをセルフホスティングする

# はじめに
[fly.io](https://fly.io)という素晴らしいクラウドプラットフォームがあります。コンテナをベースにしており、アプリケーションを簡単にデプロイできます。これを使って、[Bitwarden](https://bitwarden.com/ja-jp/) の代替サーバである[Vaultwarden](https://github.com/dani-garcia/vaultwarden)をセルフホスティングしてみました。
ユーザ登録からサーバが起動するまでの初期設定を以下にメモします。Macで作業していますが、その他の環境でも大して変わらない手順でできると思います。
# fly.io のサインアップ
CUIの操作ツール flyctl をインストールし、fly.io にサインアップします。
```bash
$ brew install flyctl
$ fly auth signup
```
ブラウザで fly.io が開くので、メールアドレスでユーザ登録します。
Billing の設定でクレジットカードを登録して 'Pay As You Go Plan' (従量課金)にします。
以前あったhobby planは廃止されました。ただし Pay As You Goでも料金が ＄5/月 未満であれば請求されません。私の経験ではVaultwardenを１カ月使っても ＄1程度で、無料で使えています。
# アプリのローンチ
適当なディレクトリを作成してその下に cd し、アプリをローンチします。作成したディレクトリ名がアプリの名称(稼働した際の URL)になるので、名前は考えてつけましょう。ここでは仮に'vault'としますが、すでに同じ名称が登録されている場合には fly.io がユニークな名称を自動的に付けるようです。
```bash
$ mkdir vault
$ cd vault
$ fly launch --region nrt
```
nrt は成田の意味で、日本のリージョンです。これでアプリの環境が確保され、設定ファイル fly.toml が作成されます。
# fly.toml の編集
ファイルの頭にアプリ名称とリージョンの指定があるので、その下に以下の設定を挿入します。
```toml
[env]
  SIGNUPS_ALLOWED = "true"

[build]
  image = "vaultwarden/server:latest"

[mounts]
  source = "vault_data"
  destination = "/data"
```
内部で使うポート番号を8080から80に変更します。
```toml
[http_service]
  internal_port = 80
```
# ボリュームの作成
データを置くボリュームを作成します。
```bash
$ fly volumes create vault_data --size 1
```
リージョンをどこにするか聞かれるので、矢印キーで nrt に移動して指定します。ボリューム名称は、設定ファイルの \[mounts\] の項目で指定したものです。容量は 1GB としました。
# アプリのデプロイ
```bash
$ fly deploy
```
これで Vaultwarden のサーバが起動し、下記アドレスでアクセスできるようになります(vault の部分をアプリ名称に読み変えてください)。
https://vault.fly.dev
# おわりに
Google の GCE などのサービスを使っても Vaultwarden をデプロイすることができるようですが、ここに示したように fly.io を使った手順は非常に簡単で、わずか数コマンドで完了します。
なぜ私は日本語を学ばせていただいておりますのか  

“一度も訪れたことのない国でございますが、それでも私の心の中に生き続けている国でございます。” 

※この記事は、日本語を学びながらITを学ぶ海外の学生としての視点から、日本語学習のモチベーションやプロセスを共有するものです。

---

## はじめに

私はインド出身で、工学大学にて情報技術を学んでおります。  
ある日、ふるさとの図書館で手にした一冊の古い英語の本「Peeps at Many Lands: Japan」が、私の人生を大きく変えました。  
この記事では、その本との出会いから始まった日本語学習の旅と、そこから得られた学び、将来の夢についてお話しいたします。

---

## 日本語との出会い：一冊の本が開いた新しい世界

大学に入るころのある午後、私はふるさとの図書館を訪れました。  
その日、目に留まったのが「Peeps at Many Lands: Japan」という本でした。  
表紙は少し古びていましたが、不思議と心を惹かれました。  
その本には、日本の自然、文化、家族の絆、人とのつながり、そして“日の出の国”としての美しさが描かれていました。

読んでいるうちに、まるで日の出を見たときのような感動が私の心を満たしました。  
それは知識以上に、心に届く深い感動でした。

---

## 日本語を学ぼうと思った理由

本を閉じたとき、心に小さな種がまかれたような感覚がありました。  
日本語を学びたいという強い想いが生まれたのです。  
日本には文化的な美しさだけでなく、日常生活における先進技術もあることを知り、  
「そんな日本のことばを学びたい」と自然に思うようになりました。

叔父が少し日本語を教えてくれていたこともあり、その応援が私に自信を与えてくれました。

---

## 日本語学習で感じたこと

言葉はその国の文化を映す鏡だと感じました。  
ひらがな・カタカナ・漢字の三つの文字は難しかったですが、一文字一文字に意味があり、学ぶごとに深さを感じました。

現在、私はN2レベルを学んでおり、文法・読解・会話に取り組んでいます。  
「ありがとう」や「ごめんなさい」の一言にも、やさしさや思いやりが込められていることに気づきました。

---

## 教えることで学ぶ：10人の学生との経験

自分で学ぶだけでなく、大学で10人の学生に日本語を教える経験もしました。  
教えることで、言語に対する理解も深まりました。

また、アニメや映画、音楽、そして日本人の友人との会話など、日常の中に学びの機会が広がっています。

---

## 私の夢：日本で働き、学び続ける

私は将来、日本の技術分野で働きたいと願っています。  
さくらの花の下を歩き、地元のお祭りに参加し、富士山に登ることも夢のひとつです。

日本語を学ぶことで、忍耐力、意欲、そして他者への思いやりを育てることができました。  
この道を進む勇気をくれたのは、一冊の本との出会いでした。

---

## おわりに

「日本は一度も訪れたことのない国ですが、それでも私の心の中に生き続けている国です。」

この思いを胸に、これからも日本語の学びを深め、技術と文化の橋を築く存在になれるよう努力を続けてまいります。

---
ps2linux_beta版の2.2系カーネル構築パッチ(web上にないので)

--- drivers/block/genhd.c.old	Tue Jan 29 10:40:25 2002
+++ drivers/block/genhd.c	Sat Oct  5 17:02:24 2002
@@ -1513,7 +1513,8 @@
 
 #define PS2_PART_FLAG_SUB	0x0001
 
-#define PS2_PART_RESV_MAIN	(4 * 1024 * 1024)
+#define PS2_PART_RESV_MAIN	(4 * 1024)
+#define PS2_PART_RESV_MAIN_BBN	(4 * 1024 * 1024)
 #define PS2_PART_RESV_SUB	(4 * 1024)
 
 struct ps2_partition {
@@ -1550,7 +1551,8 @@
 	} subs[PS2_PART_MAXSUB];
 };
 
-#define PS2_LINUX_ID		"__linux."
+#define PS2_LINUX_ID		"linux"
+#define PS2_LINUX_ID_BBN	"__linux."
 
 static int ps2_partition_one(struct gendisk *hd, kdev_t dev,
 			     struct ps2_partition *pp, int resv_m, int resv_s)
@@ -1568,16 +1570,24 @@
 	if ((pp->flag & PS2_PART_FLAG_SUB) != 0)
 		return 1;
 
+	pno = 0;
 	pe = &pp->id[PS2_PART_NID];
 	if (pp->id[0] != '\0' && pp->id[1] != '\0' &&
 		strncmp(&pp->id, PS2_LINUX_ID, strlen(PS2_LINUX_ID)) == 0) {
 		/* PS2 Linux partition */
 		resv0 = resv_m;
 		p = &pp->id[strlen(PS2_LINUX_ID)];
+	} else if (pp->id[0] != '\0' && pp->id[1] != '\0' &&
+		strncmp(&pp->id, PS2_LINUX_ID_BBN, strlen(PS2_LINUX_ID_BBN)) == 0) {
+		/* PS2 Linux partition (BB Navigator) */
+		resv0 = resv_m * (PS2_PART_RESV_MAIN_BBN / PS2_PART_RESV_MAIN);
+		p = &pp->id[strlen(PS2_LINUX_ID_BBN)];
+		pno = 1;
 	} else
 		return 1;	/* not PS2 Linux partition */
 
-	pno = 0;
+	while (p < pe && *p == ' ' )
+		p++;
 	while (p < pe && *p >= '0' && *p <= '9')
 		pno = pno * 10 + (*p++ - '0');
 	if (pno == 0)
英語勉強のプロンプト


```
1.高校1年生の英語返答（カジュアルまたは丁寧は文脈による）
2.最後に、私のメッセージの自然な英訳を言い換えをする。
A natural English response　と　A rephrased version of your original message in natural English.はいれないでください。
```
モーダル技術の比較検証

## 技術検証メモ

### dialog要素の普及状況
> dialog要素は、Chromeでは2014年から、SafariやFirefoxでも2022年以降に標準サポートされ、主要ブラウザでほぼ利用可能。

> 標準APIであり、外部ライブラリ不要でシンプル・アクセシブルなモーダルが作れるため、近年は新規プロジェクトやモダンなWeb開発での採用が増えている。

> コード量が少なく、メンテナンス性・アクセシビリティ・セキュリティ面でも優れている。

### jQuery＋loadやBootstrap Modalの現状
> jQueryによるモーダル実装は、2010年代のWeb開発で非常に一般的でした。特に既存のレガシーシステムや、jQuery依存のサイトでは今も多く使われている。

> Bootstrap ModalなどのUIフレームワークも、企業サイトや管理画面などで依然として多用されています。

> 動的なHTML読み込み（load）や複雑なカスタマイズが必要な場合、jQueryやBootstrapの方が柔軟なケースがある。

## 現場での使い分け傾向

### dialog要素
> 新規開発、モダンWeb、SPA	急速に普及中。今後主流になる流れ
### jQuery/Bootstrap Modal	
> レガシー、既存資産、複雑な要件	依然多いが、新規では減少傾向

## Jqueryサンプル
https://qiita.com/RIKIgigasu/items/0bc13a25d2b22e5183e7

## dialog要素を使ったモーダルのサンプル

```html
<!-- ダイアログ本体 -->
<dialog id="myDialog">
  <h2>モーダルタイトル</h2>
  <p>ここに内容を書きます。</p>
  <form method="dialog">
    <button>閉じる</button>
  </form>
</dialog>)

<!-- モーダルを開くボタン -->
<button id="openDialog">モーダルを開く</button>

```

```js
// JavaScriptでモーダルを開く
document.getElementById('openDialog').addEventListener('click', () => {
  document.getElementById('myDialog').showModal();
});

```

### 動的にタイトルや内容を変更したい場合も簡単です。

```js
document.getElementById('openDialog').addEventListener('click', () => {
  const dialog = document.getElementById('myDialog');
  dialog.querySelector('h2').textContent = '新しいタイトル';
  dialog.querySelector('p').textContent = '新しい内容です。';
  dialog.showModal();
});

```
### CSSでバックドロップをカスタマイズ
```css
dialog::backdrop {
  background: rgba(0,0,0,0.5); /* 半透明の黒背景 */
}

```

## わかったこと
dialog要素は便利だった。しかし、レガシーてきな複雑すぎるモーダルを保守運用していくには、JqueryやBootstrapを使う傾向もあるという点を理解した。

## まとめ
> dialog要素を使うと、jQueryやdivベースの自作モーダルより圧倒的にシンプル＆少ないコードでモーダルが実装できる。

> 標準APIなのでアクセシビリティやフォーカス制御も自動で対応できる。

> ボタン一つで開閉でき、内容やタイトルも簡単に動的変更できる。
BigQuery でデータセット／テーブルの IAM タグを SQL 管理する

BigQuery に、**データセットとテーブルへ付与する IAM タグ（Resource Manager Tag）を SQL から直接操作できる機能** が追加されました。（[Release Note](https://cloud.google.com/bigquery/docs/release-notes#:~:text=You%20can%20now%20manage%20IAM%20tags%20on%20BigQuery%20datasets%20and%20tables%20using%20SQL.)）

タグをコードで扱えるようになり、環境やデータ種別ごとに一貫したメタデータ管理が可能になります。本記事では機能範囲と SQL 操作例のみを簡潔にまとめます。

---

### 1. 機能概要

| 項目        | 内容                                                            |
| --------- | ------------------------------------------------------------- |
| 対象リソース    | データセット、テーブル（ビューを含む）                                           |
| 主な SQL 構文 | `ALTER SCHEMA … SET OPTIONS`／`ALTER TABLE … SET OPTIONS`      |
| 操作        | `tags = […]` 全置換・`tags += […]` 追加・`tags -= […]` 削除            |
| 前提        | タグキー／タグ値の作成は Cloud Resource Manager API、gcloud、Terraform 等で実施 |

---

### 2. 事前設定

1. API 有効化

   ```bash
   gcloud services enable cloudresourcemanager.googleapis.com
   ```

2. タグキー・タグ値の作成例

* タグキー: `env`
* タグ値: `prod`

作成方法→[公式ドキュメント](https://cloud.google.com/resource-manager/docs/tags/tags-creating-and-managing?hl=ja#creating_tag)

3. 必要ロール

いかのいずれか
  * BigQuery データオーナー ( `roles/bigquery.dataOwner`)
  * BigQuery 管理者 ( `roles/bigquery.admin`)

---

### 3. SQL 操作例

```sql
-- データセットにタグを上書き
ALTER SCHEMA `my-project.analytics`
SET OPTIONS (
  tags = [('my-project/env','prod')]
);

-- テーブルにタグを追加
ALTER TABLE `my-project.analytics.sales`
SET OPTIONS (
  tags += [('my-project/env','prod')]
);

-- テーブルからタグを削除
ALTER TABLE `my-project.analytics.sales`
SET OPTIONS (
  tags -= [('my-project/env','prod')]
);
```

実際に実行した場合はこのようになります。
<details>

<summary>データセット更新</summary>

![スクリーンショット 2025-06-20 23.49.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254900/a88687e1-a525-4bd9-9333-308c61f6df57.png)

![スクリーンショット 2025-06-20 23.49.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254900/410b4291-1a86-4aed-8380-a8671dc7745d.png)


</details>

<details>

<summary>テーブル更新</summary>

![スクリーンショット 2025-06-20 23.50.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254900/861d038b-efe7-4ec5-b5f9-767ab1c9fcd1.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254900/88356910-e15d-438e-b223-3bac2e3f20e9.png)


</details>

タグ付与の結果は、データセットの場合は`INFORMATION_SCHEMA.SCHEMATA_OPTIONS`、テーブルの場合は`INFORMATION_SCHEMA.TABLE_OPTIONS` で確認できます。

![スクリーンショット 2025-06-21 0.05.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254900/d689a3dd-9ac2-43ca-8910-b7eced8a82c7.png)


---

### 4. 所感と留意点

| 観点   | メモ                                                                                                        |
| ---- | --------------------------------------------------------------------------------------------------------- |
| メリット | \* SQL だけでメタデータを管理できるため、Git による変更履歴がしやすい。                           |
| 注意点  | \* タグキー／値の作成は SQL では行えない。 |

---

### 5. まとめ

* 2025-06-16 から、BigQuery リソースに対して **`ALTER … SET OPTIONS (tags …)`** 構文が利用可能。
* タグ管理をデータ定義と同じリポジトリに収められるため、CI/CD パイプラインでの自動反映が容易。
* 導入初期は `env` や `pii` などシンプルな軸だけに絞ると運用を保守しやすい。

以上、タグ操作機能の動作確認メモでした。
MCPで作る技術記事収集システム #0 — 構想編

:::note info 
Model Context Protocol（MCP）を使った技術記事収集システムの構想を紹介します。
「記事収集 → AI要約 → チーム共有」の全自動化を目指すシリーズの第1回です。 
:::

## 1. はじめに — 技術記事収集の課題

**「あの記事、どこで見たんだっけ？」**

Slackで流れた記事、Xで見かけたブログ、HackerNewsのトレンド——。気になる記事は山ほどあるのに、**体系的に管理・共有できていない**のが現実です。

そこで構想しているのが、**AIエージェントと連携した技術記事収集システム**です。単なる記事収集ではなく、要約からチーム共有まで全自動化を目指します。

## 2. システム全体構想

### 理想的なワークフロー

```mermaid
graph TD
    A[複数ソース] --> B[記事収集]
    B --> C[AI要約・分析]
    C --> D[チーム共有]
    C --> E[ナレッジ保存]
    C --> F[個人最適化]
    
    A1[Qiita] --> A
    A2[複数メディア] --> A
    A3[RSS] --> A
    
    D --> D1[Slack]
    D --> D2[Discord]
    E --> E1[Notion]
    E --> E2[Obsidian]
    
```

### 開発フェーズ

**Phase 0: 構想・設計**（← 今回）

- システム全体設計、技術選定、MCP基礎理解

**Phase 1: 記事収集基盤**

- Qiita記事取得、MCPによるClaude連携

**Phase 2: AI要約・分析**

- Gemini APIによる要約・分類・関連性分析

**Phase 3: マルチソース対応**

- 複数技術メディア連携、RSS統合

**Phase 4: チーム共有・ナレッジ管理**

- Slack/Discord Bot連携
- Notion Database・Obsidian自動保存
- 定期レポート生成

**Phase 5: パーソナライゼーション**

- 読書履歴に基づく記事推薦、個人最適化

## 3. 技術選択の背景

### なぜMCPを選んだのか？

**従来手法の課題**:

- **REST APIサーバー**: 運用コスト高、設定複雑
- **Webhook**: 依存関係強い、デバッグ困難
- **スクレイピング**: 仕様変更で頻繁に破綻

**MCPの優位性**:

- **軽量**: Node.jsプロセス1つで完結
- **標準化**: JSON-RPC準拠で互換性高い
- **拡張性**: ツール追加が容易
- **将来性**: Anthropic公式、エコシステム拡大期待

### Gemini API採用理由

- **コスト効率**: 無料枠充実（100万トークン/月）
- **日本語対応**: 技術記事の理解度が高い
- **パフォーマンス**: 高速レスポンス、安定したJSON出力

## 4. MCP（Model Context Protocol）の基礎

MCPは、LLMと外部ツールを標準化された方法で接続するプロトコルです。まるで**USBポート**のように、異なるツールを統一的に利用できます。

### 構成要素

```mermaid
graph LR
    A[Claude Desktop] <--> B[MCP Server]
    B -.-> C1[Qiita API]
    B -.-> C2[Gemini API]
    B -.-> C3[Slack API]
    B -.-> C4[その他API]
    
```

- **MCP Host**: Claude DesktopやIDEなど
- **MCP Server**: 特定機能を提供する軽量プログラム
- **Tools**: 機能定義（関数名、引数、戻り値）

## 5. 今後の展開

### Phase 1: Qiita記事取得基盤

次回の第1回では、いよいよ実装に入ります：

- MCP Server基本構築（Node.js）
- Qiita API連携で人気記事取得
- Claude Desktop統合
- 基本的なレスポンス整形

### Phase 2: Gemini API要約機能

**実装予定**: 記事要約・技術タグ抽出・関連性分析

### Phase 3〜5: 高度化

- **マルチソース**: 複数技術メディア・RSS対応
- **チーム共有**: Slack/Discord Bot・Notion/Obsidian連携
- **パーソナライゼーション**: 学習履歴に基づく推薦

## 6. 期待される効果

### 個人レベル

- 関連記事自動収集、要約による時短、体系的分類

### チームレベル

- 朝会での情報共有自動化、技術選定の参考情報

### 将来的な可能性

- 学習履歴に基づく最適化、技術レベル対応

## 7. おわりに

MCPを使った技術記事収集システムの全体構想を紹介しました。

**MCPの魅力**は、軽量でありながらAIエージェントとの親和性が非常に高いことです。従来なら複雑なサーバー構築が必要だった機能が、簡単に実現できる時代になりました。

次回は、**Gemini APIを使った記事要約機能**を実装し、「収集した記事を読みやすい形で提供する」ステップに進みます。

技術記事の収集・要約・共有が全自動化されることで、**エンジニアの学習効率とチーム連携が劇的に改善される**はずです。

### 参考リンク

- [Model Context Protocol公式サイト](https://modelcontextprotocol.io/)
- [Qiita API v2ドキュメント](https://qiita.com/api/v2/docs)
- [Google Gemini API](https://ai.google.dev/gemini-api/docs?hl=ja)

:::note warn 
本記事は 2025年6月時点の情報に基づいています。 
:::

---

**次回記事**: [Phase 1の実装編](https://qiita.com/ruumalilja/items/6714a99d2dc454f984cf)を公開しました！業務の合間の個人開発でしたが、MCPサーバーとQiita API連携が完成しています。
【Python】setUpClass()、setUp()、tearDown()、tearDownClass()

setUp()とsetUpClass()はテストの事前準備を行い、tearDown()、tearDownClass()は事後処理を行います。

最初に一回だけsetUpClass()が呼ばれ、各テストメソッドの実行前にsetUp()が呼ばれます。

また、各テストメソッドの実行後にtearDown()が呼ばれ、最後に一回だけtearDownClass()が呼ばれます。
【Next.js】nuqsを導入する方法

## nuqsとは

nuqsは状態をクエリパラメータで管理するためのライブラリです。

https://nuqs.47ng.com/

## インストール

Yarnを使用している場合、以下のコマンドを実行してインストールします。

```terminal
yarn add nuqs
```

https://nuqs.47ng.com/docs/installation

## アダプタ

Next.jsのApp Routerを使用する場合には`RootLayout`の`{children}`を`NuqsAdapter`コンポーネントでラップします。

```tsx
import { NuqsAdapter } from 'nuqs/adapters/next/app'
import { type ReactNode } from 'react'
 
export default function RootLayout({
  children
}: {
  children: ReactNode
}) {
  return (
    <html>
      <body>
        <NuqsAdapter>{children}</NuqsAdapter>
      </body>
    </html>
  )
}

```

https://nuqs.47ng.com/docs/adapters

## 使い方

以下のように記述することでカウントをクエリパラメータで管理できるようになります。

```tsx
"use client"

import { useQueryState } from "nuqs"

export function Demo() {
  const [count, setCount] = useQueryState(
    "count",
    parseAsInteger.withDefault(0),
  )
  return (
		<button onClick={() => setCount((c) => c + 1)}>Count: {count}</button>
  )
}

```
歌詞分析プロンプト

「かえるのうた」の楽譜をもとに**正確なMIDI構成（ノート、長さ、テンポ、音階）を生成するAIプロンプト
---

```
あなたは音楽理論とMIDI構成に精通したAIです。
以下の条件に基づいて、「かえるのうた」のMIDIデータ構成（MIDIノート番号・音長・テンポ情報）を正確にテキスト形式で出力してください：

【目的】
童謡「かえるのうた」をMIDIファイルに変換可能な形式で表現する

【要件】
- 音名：C D E F G A B（ドレミファソラシ）
- 音域：C4（ド）～C5（ド）
- テンポ：♩ = 100
- 拍子：4/4拍子
- ノート長：4分音符を基本に明記
- 出力形式：音名・MIDIノート番号・音長（例：C4, 60, 1.0）

【楽譜内容】
かえるのうたが　きこえてくるよ  
クワクワクワクワ　ゲロゲロゲロゲロ  
クワクワクワ

【メロディ】
| C4 D4 E4 F4 | E4 D4 C4 | E4 F4 G4 | A4 G4 F4 |  
| C4 E4 G4 | C5 A4 F4 | E4 D4 C4 |

【出力例】
[
  {"note": "C4", "midi": 60, "duration": 1.0},
  {"note": "D4", "midi": 62, "duration": 1.0},
  ...
]

【追加オプション】
- 出力形式はJSONまたはCSVどちらでも可
- 必要に応じてMIDIファイル生成用Pythonコードも記載可
```

プロンプト例
---

```
ピアノの鍵盤を上から見た図を描いてください。

・コード進行：C → G → Am → F
・各コードに対応する構成音（C, E, G など）を白鍵に「●」で示してください。
・白鍵には音名（C, D, E...）と階名（ド, レ, ミ...）の両方を記載してください。
・黒鍵の位置（2本・3本グループ）を正確に配置し、必要に応じて＃付き音名も記載してください。
・各コード（C, G, Am, F）を1段ずつ図解してください。
・教科書のようなシンプルで読みやすいデザインにしてください。
・画像生成用の場合は、図は白地、線は黒で、フォントは読みやすいものを選んでください。

目的：初心者向けにコードと構成音の関係を可視化する教材を作成する

```

プロンプト例
---

```
コード進行：C → G → Am → F
（ド, レ, ミ...）に変換
ピアノの白鍵・黒鍵配置図（3オクターブ分）と、各コード進行における押す鍵（●マーク付き）**の一覧です。
ピアノ鍵盤配置と白鍵と階名と音名と黒鍵と周波数
横長全体鍵盤図への統合
例
    ♯     ♯       ♯     ♯     ♯       ♯     ♯       ♯     ♯     ♯
   C#    D#      F#    G#    A#      C#    D#      F#    G#    A#
 ┌─┐  ┌─┐   ┌─┐  ┌─┐  ┌─┐   ┌─┐  ┌─┐   ┌─┐  ┌─┐  ┌─┐
 │ │  │ │   │ │  │ │  │ │   │ │  │ │   │ │  │ │  │ │
 └┬┘  └┬┘   └┬┘  └┬┘  └┬┘   └┬┘  └┬┘   └┬┘  └┬┘  └┬┘
  │C ド│D レ│E ミ│F ファ│G ソ│A ラ│B シ│C ド│D レ│E ミ│F ファ│G ソ│A ラ│B シ
  │●   │    │●   │●     │●   │●   │    │●   │●   │●   │●     │●   │●   │
    Cコード     Gコード     Amコード     Fコード

```

プロンプト例
---

```
青年と走る鉄塊が交差する
赤黒い物体と、駅のホーム
復旧を告げる放送を聞きながら
その光景に、身震いしていた

延着の紙を求めて、長い列
零コンマ数秒で片付く命
「ご足労さま」と嘲る声が
青年の瞳から降ってきた

それでも明日は何度でも
必要に俺を呼ぶらしい
随分と長く待たせたお詫びに
理想でも土産に持って行こうか

考えすぎて馬鹿になって
発狂しすぎて普通になって
So that’s killed me──歌うとは
失望の“望”を怒鳴ることさ

思い出すのは、あの人のこと
ふと夜空を見上げた瞬間
月の砂塵が目に入り
涙がひとすじ、こぼれ落ちた

お母さんが笑った顔
お姉ちゃんが弾いたピアノ
月の砂塵が目に入り
涙がひとすじ、頬を伝った

結局捨てきれなかった
恥も外聞も、人間だもんね
しょうがないさ──

時間は過ぎてく、そんな現実に
眼球をいつまで逸らすつもり？
逢えない誰かを想うというのは
失念の“念”を贈ることなんだ

心で歌うな、喉で歌え
オンボロになって、初めて見える価値
So that’s killed me──歌うのだ
失望の“望”を怒鳴るのだ──ぎゃあ

歌詞を分析して
```

プロンプト例
---

```
青年と走る鉄塊が交差する
赤黒い物体と、駅のホーム
復旧を告げる放送を聞きながら
その光景に、身震いしていた

延着の紙を求めて、長い列
零コンマ数秒で片付く命
「ご足労さま」と嘲る声が
青年の瞳から降ってきた

それでも明日は何度でも
必要に俺を呼ぶらしい
随分と長く待たせたお詫びに
理想でも土産に持って行こうか

考えすぎて馬鹿になって
発狂しすぎて普通になって
So that’s killed me──歌うとは
失望の“望”を怒鳴ることさ

思い出すのは、あの人のこと
ふと夜空を見上げた瞬間
月の砂塵が目に入り
涙がひとすじ、こぼれ落ちた

お母さんが笑った顔
お姉ちゃんが弾いたピアノ
月の砂塵が目に入り
涙がひとすじ、頬を伝った

結局捨てきれなかった
恥も外聞も、人間だもんね
しょうがないさ──

時間は過ぎてく、そんな現実に
眼球をいつまで逸らすつもり？
逢えない誰かを想うというのは
失念の“念”を贈ることなんだ

心で歌うな、喉で歌え
オンボロになって、初めて見える価値
So that’s killed me──歌うのだ
失望の“望”を怒鳴るのだ──ぎゃあ

以下の歌詞を読み、音楽評論家としてレビュー文を800字で執筆してください

英訳して感情分析（英文に変換して評価
　- 感情分析（ポジネガ・感情曲線）
　- 文体・語彙傾向（語種、品詞、語彙レベル）
　- 比喩や象徴（詩的技法の抽出）
　- 韻・繰り返し・音数（ラップ・短歌調）
以下の歌詞を1行ずつ読み取り、感情の強度（-1〜+1）を数値化して、感情曲線を生成するコードをPythonで書いてください。
```
プロンプト例
---

```
以下のコード進行をPygameを用いて再生するPythonコードを作ってください：「C G Am F」
```

プロンプト例
---

```

青年と走る鉄塊が交差する
赤黒い物体と、駅のホーム
復旧を告げる放送を聞きながら
その光景に、身震いしていた

延着の紙を求めて、長い列
零コンマ数秒で片付く命
「ご足労さま」と嘲る声が
青年の瞳から降ってきた

この歌詞に使われている文法構造、語彙の品詞比率、接続詞や助詞の使い方を詳細に解析し、文章の流れを説明してください。

```
TypeScriptで「The left-hand side of an assignment expression may not be an optional property access.」に遭遇した話

# はじめに
初めtのweb開発でTypeScriptを触っていています。
今回はオプショナルチェーンを使った文法で学んだことがあるのでまとめておきます。

## 遭遇した文法エラー

```typescript
document.getElementById("profile-user-name")?.textContent = userName;
```

エラー内容は以下のようになっています。
```
The left-hand side of an assignment expression may not be an optional property access.
```
和訳すると「代入式の左辺はオプショナル・プロパティ・アクセスであってはならない」というものです。
どうやらオプショナルチェーンを代入式の左辺に使用することは、nullやundefinedだった時の代入が曖昧になると言うことが理由で許されていない様です。

stackoverflowでも同じ質問がありました。

https://stackoverflow.com/questions/58878948/optional-chaining-on-the-left-side-in-javascript

stackoverflowの回答にあるようにどうやらプロポーザルはあるようで、今後追加されるかも知れないので楽しみに待っていようと思います。

https://github.com/tc39/proposal-optional-chaining-assignment


大人しくこう書きましたとさ
```typescript
	const nameEl = document.getElementById("profile-user-name");
	if (nameEl)
		nameEl.textContent = userName;
```
朝起きたらCatalyst 3850だった件 第1話

# 朝起きたらCatalyst 3850だった件

## 第一話：POST - 東京の朝に目覚めて

### システム起動

意識が浮上してくる。

いや、これは……起動？

```
System Bootstrap, Version 16.12.1r [FC2], RELEASE SOFTWARE (P)
Copyright (c) 1994-2019 by cisco Systems, Inc.

Current image running: Boot ROM0

Last reset cause: PowerOn

C3850-48P platform with 4194304 Kbytes of main memory

Preparing to autoboot. [Press Ctrl-C to interrupt]  3
```

なんだこれは。俺の思考がコンソール出力みたいに流れている。

待て、待て待て。昨日の夜、確かに品川のオフィスで緊急メンテしてて……あまりに眠くて、CTCに保守依頼のメール送って……そこから記憶が……

```
boot: attempting to boot from [flash:packages.conf]
boot: reading file packages.conf

#################################################
```

体が、いや、筐体が震える。ファンが回り始める感覚。冷たい空気が内部を流れていく。これは……データセンターの冷気だ。

--- 

続く
モーダル画面のコンポーネント化



1. modal.html 側（テンプレート化）
```html
<div id="resultModal" class="modal">
  <div class="modal-content">
    <span class="close" id="modalCloseBtn">&times;</span>
    <div class="modal-title" id="modalTitle"></div> <!-- ここに動的にタイトルを設定 -->
    <div class="modal-number-list" id="modalNumbers"></div>
    <div id="modalComment"></div>
  </div>
</div>
```
2. 呼び出し元でタイトルを挿入
```javascript
document.addEventListener("DOMContentLoaded", (event) => {

  // modalのテンプレート読み込み
  $("#include-modal-area").load("./component/modal.html", () => {
    const dynamicTitle = "総合分析コメント"; // ここを他のコンテキストから取得してもOK
    document.getElementById("modalTitle").textContent = dynamicTitle;

    // 閉じる処理
    document.getElementById("modalCloseBtn").onclick = function () {
      document.getElementById("resultModal").style.display = "none";
    };
  });
});
```

3. modalComment内は、別ﾒｿｯﾄﾞで自動生成するため省略
【Python】urlparse()メソッド、parse_qsl()メソッド、parse_qs()メソッド

urlparse()メソッドはURLを分解し、parse_qsl()メソッドはクエリ文字をタプルのリストに変換します。

クエリ文字をパースする際、parse_qs()は辞書を返し、parse_qsl()はタプルを要素に持つリストを返します。

クエリ文字の中に同じキーが複数あった場合、parse_qs()は1つのキーでまとまり、parse_qsl()は複数のタプルに分かれます。
【Python】tempfileモジュールのオブジェクトについて

TemporaryFile()は、ファイル名のない一時ファイルをディスク上に作成する。

NamedTemporaryFile()は、ファイル名がある一時ファイルをディスク上に作成する。

SpooledTemporaryFile()は、一定サイズまではデータがメモリ上で処理され、それを超えると一時ファイルの作成を中止するのではなく、一時ファイルをディスク上に作成します。

TemporaryDirectory()は、一時ディレクトリを作成する。
【Python】コードポイントとサロゲートペアの相互変換

# はじめに
Unicodeのコードポイント(U+????)の文字をUTF-16のバイトデータに置き換える場合、コードポイントの値が、そのままバイトデータとなります。
例えば、テキストエディタに平仮名の「あ」(U+3042)を入力し文字コードUTF-16で保存したテキストファイルをバイナリエディタで見ると、0x3042のデータが保存されています。※

![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4105373/bc3a5397-130c-40a1-a229-511f62cc67fb.png)

:::note info
※UTF-16（ビックエンディアン）の場合。
UTF-16（リトルエンディアンの場合は、0x4230になります。
:::

ところが、コードポイントがU+10000を超える場合、データが16bitより大きくなってしまうため、UTF-16(1文字16bit)のバイトデータへの変換ができません。そこで、このような文字の場合は、特殊な計算を行ってコードポイントを2つの16bit値に変換します。この組み合わせのことをサロゲートペアといいます。


<table>
<caption>サロゲートペアを使用する文字の例</caption>
<tr>
<th>文字</th>
<th>コードポイント</th>
<th>バイトデータ(UTF-16)</th>
</tr>

<tr>
<td>&#x20B9F;</td>
<td>U+20B9F</td>
<td>0xD842　0xDF9F</td>
</tr>
<tr>
<td>&#x20BB7;</td>
<td>U+20BB7</td>
<td>0xD842　0xDFB7</td>
</tr>
<tr>
<td>&#x29E3D;</td>
<td>U+29E3D</td>
<td>0xD867　0xDE3D</td>
</tr>
</table>

# コードポイントからサロゲートペアへの変換

コードポイントをサロゲートペア（2つの16bit値）へ変換するコードです。
```python:
#コードポイントからサロゲートペア
def surrogatepair_encode(CP):
    HSG = (CP - 0x10000) // 0x400 + 0xD800 #上位バイト
    LSG = (CP - 0x10000) % 0x400 + 0xDC00 #下位バイト
    return HSG,LSG

h,l = surrogatepair_encode(0x20B9F) #「𠮟」のコードポイント
print(hex(h),hex(l))
```
実行結果
```
0xd842 0xdf9f
```
# サロゲートペアから コードポイントへの変換

サロゲートペア（2つの16bit値）からコードポイントへ変換するコードです。
```python:
#サロゲートペアからコードポイント
def surrogatepair_decode(HSG,LSG):
    return 0x10000 + (HSG-0xD800) * 0x400 + (LSG-0xDC00)

codepoint = surrogatepair_decode(0xD842,0xDFB7) #「𠮷」のサロゲートペア
print(hex(codepoint))
```
実行結果
```
0x20bb7
```

# おわりに
計算方法の詳細については、以下のページを参照してください。

https://ja.wikipedia.org/wiki/Unicode#%E3%82%B5%E3%83%AD%E3%82%B2%E3%83%BC%E3%83%88%E3%83%9A%E3%82%A2
Amazon Q CLIでゲーム作ってみた感想

## はじめに
初投稿になります。
今回はAmazon Q CLI でゲームを作ろう Tシャツキャンペーンに参加したので感想を書いていこうと思います。

https://aws.amazon.com/jp/blogs/news/build-games-with-amazon-q-cli-and-score-a-t-shirt/

## 環境
OS：Windows
開発環境：WSL2（Ubuntu）
言語：Python
ゲームライブラリ：pygame

## 作ったゲームについて
ロボットの行動をプログラムし、1対1で戦わせるというゲームを作りました。
イメージはカルネージハートやGLADIABOTSのようなものです。
実際の指示内容はこちら。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4111041/d7b26f7f-ddd6-431b-9aca-71c90f2cec8e.png)

そして一回目の指示で出来上がったものがこちら。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4111041/e7200922-3f45-4b52-ba21-51b99357c327.png)

文字化けしていたので文字化けを直してもらうように指示。
文字化けが解消したものがこちら。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4111041/79aa3006-b1e7-4d1b-988a-e3c230772db4.png)

試しに動かしてみましたが、敵を検知する仕組みがないため闇雲に射撃するだけのゲームになってしまいました。
なので敵を検知する仕組みや検知範囲の可視化、障害物の設置なども追加しました。
ついでに日本語化もしました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4111041/bd1409f7-6c1e-4f8e-b52e-3562d95c75a9.png)

対戦中の画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4111041/c20ba0c9-72ab-4c82-a02b-be04ad0bf30a.png)

条件文の処理がうまく動かない等の問題が発生していたので、何度か指示を出してみて解消を試みてみましたがうまくいきませんでした。
なので壁の自動検知などいくつかゲームを簡略化し、エフェクト等のものを追加して最終的に完成したものがこちら。
まだバグ等は結構残っていますが、そろそろAmazonQCLIの無料枠をオーバーしてしまいそうなので一旦完成としました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4111041/5f2fd62e-a447-480c-a0a5-7abafbcb304b.png)


ゲームのプレイ動画はXに上げています。

https://x.com/ZOETech672687/status/1935641702997627363

ちなみに途中でビジュアルプログラミング化も試みてみましたが、上手くいかず修正に時間がかかりそうだったので諦めました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4111041/f4dc16b2-024b-4053-a989-891c0a2ac5a1.png)


## 感想
始めてAIエージェントというのを使ってみましたが、圧倒されてしまいました。
自然言語による会話だけでゲームが作れてしまうのはもちろん、ゲーム中にエラーが発生した場合に自動でエラーの解消までしてくれたのは仰天してしまいました。

反省点としては、ゲームシステムをふわっとした曖昧な状態で指示してしまったことでしょうか。
自分の中でゲームシステムが曖昧なままなのでできあがったゲームもなんか違う・・・と感じたものになってしまいました。（それでもちゃんとゲームの形にしてくれるのはすごい）

少々複雑なゲームシステムの場合は、しっかりとゲームシステムを詰めたうえで細かく指示を出した方が手戻りも少なく想定したゲームシステムを実現できそうですね。


## まとめ
今回はAmazon Q CLI でゲームを作ろう Tシャツキャンペーンに参加し、ゲームを作ることに成功しました！
初めてAIエージェントに触れてみて、AIのすごさを改めて感じました。
それと同時にAIへ的確な指示を出すことの難しさも感じました。
Amazon Q CLIの無料枠は月に50回までのようなので来月になったら、また何か作ってみようと思います。
[Linux] システムログ設定_確認_w, last, lastlog, journalctl

# journalctlコマンド
## オプション一覧

```terminal
$ journalctl [オプション]
```
| オプション                        | 由来         | 説明                                                |
| :--------------------------- | :--------- | :------------------------------------------------ |
| default                      | journal    | システムログを古い順に一覧表示                          |
| `-r`<br>`--reverse`          | reverse    | 新しい順（降順）でログを表示                               |
| `-f`<br>`--follow`           | follow     | `tail -f` のようにリアルタイムでログを追跡表示               |
| `-n 行数`<br>`--lines=行数`      | number     | 表示するログの行数を指定（例：`-n 50` → 最新50行）               |
| `-a`<br>`--all`              | all        | デフォルトで省略される**長いログフィールドもすべて表示**                    |
| `-x`                        | explain    | `-x`: 詳細表示（補足付き） |
| `--since="日時"`               | since      | 指定日時**以降**のログを表示（例：`--since "2025-06-01 12:00"`）  |
| `--until="日時"`               | until      | 指定日時**まで**のログを表示                                  |
| `-b`<br>`--boot[=ID]`        | boot       | 起動単位でログを表示（例：`-b` は現在の起動、`-b -1` は1つ前の起動）     |
| `-u ユニット名`<br>`--unit=ユニット名` | unit       | 指定した systemd **ユニットのログのみ表示**（例：`-u ssh.service`）  |
| `-p 優先度`<br>`--priority=優先度` | priority   | 指定した優先度以上のログのみ表示（例：`-p err` → エラー以上）          |
| `-k`<br>`--dmesg`            | kernel log | カーネルログのみ表示（`dmesg` に相当する）               |





## 検索式一覧
```bash
$ journalctl [検索式] [オプション]
```

| 検索式                         | 説明                                          |
| :-------------------------- | :------------------------------------------ |
| `_SYSTEMD_UNIT=ユニット名` | 指定した systemd ユニットのログを抽出                     |
| `_PID=1234`                 | プロセスID 1234 のログを表示                          |
| `_UID=1000`                 | ユーザーID 1000 によるログインや実行ログを抽出                 |

# Ping-t


journalctl
- [4963_全般](https://mondai.ping-t.com/question_subjects/32/question_sessions/33866047/progressing_questions/518453901)
- [4962_journalctl --reverse](https://mondai.ping-t.com/question_subjects/32/question_sessions/33867186/progressing_questions/518471898)
- [4965_journalctl -f, --follow](https://mondai.ping-t.com/question_subjects/32/question_sessions/33867186/progressing_questions/518471895)
- [4966_journalctl -k](https://mondai.ping-t.com/question_subjects/32/question_sessions/34000185/progressing_questions/520498149)
- [4967_journalctl -u, --lines](https://mondai.ping-t.com/question_subjects/32/question_sessions/34000185/progressing_questions/520498148)
- [5138_journalctl -xb](https://mondai.ping-t.com/question_subjects/32/question_sessions/34000185/progressing_questions/520498156)
- [4970_journalctl -u, _SYSTEMD_UNIT=](https://mondai.ping-t.com/question_subjects/32/question_sessions/33866047/progressing_questions/518453902)
- [5013_journalctl --since, --until](https://mondai.ping-t.com/question_subjects/32/question_sessions/34000185/progressing_questions/520498141)
- [5094_journalctl _UID](https://mondai.ping-t.com/question_subjects/32/question_sessions/33866047/progressing_questions/518453906)
Next.js 「Entire page deopted into client-side rendering」の解決方法

皆さん、こんにちは。

今回は「Next.js 「Entire page deopted into client-side rendering」の解決方法」について紹介させていただきます。

Next.jsのプロジェクトで以下のような警告を見たことはありますか？

```
Entire page /login deopted into client-side rendering.
https://nextjs.org/docs/messages/deopted-into-client-rendering /login
```

これはページがNext.jsのServer-Side Rendering（SSR）からClient-Side Rendering（CSR）へ強制的に切り替わった（deopted）ことを示しています。

# 原因

主な原因としては以下のような場合があります。

- SSR中にクライアント専用機能（ブラウザAPIなど）を使用してしまっている。
- 動的インポート時に「use client」ディレクティブが付いたコンポーネントを誤って取り込んでいる。

# 解決方法

この警告を解決するための方法を2つ紹介します。


## コンポーネントをクライアント専用として明示する

対象となるコンポーネントファイルの最上部に以下のように記述します。

```React
'use client';

export default function LoginPage() {
  return (
    <div>
      {/* ログインページのロジック */}
    </div>
  );
}
```

これにより、このコンポーネントがクライアント側でのみレンダリングされることをNext.jsに明示的に伝えることができます。

## クライアント専用ロジックを動的インポートでロードする

Next.jsではSSRとCSRを明確に区別するために、クライアント専用のコンポーネントを動的インポートすることで対応できます。

```
import dynamic from 'next/dynamic';

const ClientOnlyComponent = dynamic(() => import('../components/ClientOnlyComponent'), {
  ssr: false,
});

export default function LoginPage() {
  return (
    <div>
      <ClientOnlyComponent />
    </div>
  );
}
```

この方法を使えば、SSR中にクライアント専用コードの実行を回避できます。

# まとめ

Next.jsのSSR機能を最大限に活用するためには、常にサーバーレンダリング段階で実行不可能なクライアント専用機能の使用に注意を払う必要があります。上記の方法を活用して、CSRへの強制切り替え問題を効果的に解決できます。

今日は以上です。

ありがとうございました。
よろしくお願いいたします。
PMBOK　プロジェクトで迷ったら見返しましょう！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680230/227018c3-2676-4214-8713-8ee36e6bea9e.png)

## はじめに

久しぶりに `PMBOK` へ触れる機会があったので、LT会に向けてまとめます。

以前の「第6版」は、外部研修で勉強する機会があったのですが、最新の「第7版」は特に勉強して無いです。
「第6版」と「第7版」で、内容が大きく変わった事は知っているのですが、何が変わったかわかってません。
構成要素の違いと各概要ぐらいは理解したいと思います。

---

## PMBOKとは何か？

`PMBOK`（ピンボック）は、プロジェクトマネジメントの知識体系をまとめたガイドです。
米国の `PMI`（Project Management Institute） によって発行されています。

一言でいうと、「**プロジェクトをうまく進めるためのベストプラクティス集**」

1996年に初版が発行され、4年から5年のペースで改訂が重ねられてます。

※本来の `PMBOK` とは、プロジェクトマネジメント知識体系（Project Management Body of Knowledge）の頭字語であり、プロジェクトマネジメント専門職内に存在する知識の総体を指します。


---

## PMBOKで何がわかるの？

プロジェクトを効率的かつ体系的に管理するためのフレームワークとして、こんな事を学ぶ事ができます。

- プロジェクトの成功率を上げる
- 関係者との調整をうまく行う
- 問題を早期に発見し対処する
- 共通言語でチームとコミュニケーションをとる

全部を読まなくても、**各要素の概要だけ**でも見ておくと見返す事ができますよ！

---

## ざっくり、第6版までのPMBOKと第7版からの違い

| 項目    | 第6版（旧）                | 第7版（新）        |
| ----- | --------------------- | ------------- |
| アプローチ | プロセス中心（ウォーターフォール向け）   | 原則中心（アジャイル含む） |
| 知識エリア | 10の知識エリア（例：範囲、スケジュール） | パフォーマンス領域     |
| 内容    | 詳細で分厚い                | 柔軟で実践向け       |

---

## もう一歩、第6版までのPMBOKと第7版からの違い

| 属性 | 第6版（旧） | 第7版（新） |
| :--- | :--- | :--- |
| 中核となる哲学 | プロセスを通じた制御と予測可能性 | 原則を通じた適応と価値創造 |
| 構造 | プロセスベース：5つのプロセス群と10の知識エリア | 原則ベース：12の原則と8つのパフォーマンス・ドメイン |
| 主要な焦点 | アウトプットの提供（QCDの達成） | 価値の提供（ステークホルダーへの貢献） |
| 主要コンポーネント | 49のプロセス、ITTOs（インプット、ツールと技法、アウトプット） | 12の原則、8つのドメイン、テーラリング |
| PMの役割 | プロセス管理者、計画の実行者 | 戦略的リーダー、価値のファシリテーター |
| 適用範囲 | 主に予測型（ウォーターフォール）アプローチに最適化 | アプローチ非依存（予測型、アジャイル、ハイブリッド型に対応） |

---

## よく比較されるヤツ PMBOK vs アジャイル

PMBOKは「ライブラリ」、アジャイルは「そのライブラリの利用哲学」、スクラムは「具体的な貸出・読書システム」という階層的なモデルとして、考えましょう

- PMBOK
  - プロジェクトマネジメントの基礎となる知識体系であり、グッドプラクティスへのガイドです。「何を」「なぜ」を説明します（例：リスクマネジメントとは何か、なぜ重要なのか）。 
- アジャイル
  - 協調、顧客価値、変化への対応を重視する、4つの価値と12の原則（アジャイルソフトウェア開発宣言）に基づく考え方や哲学です 
- スクラム/カンバン
  - アジャイル哲学を実践するための具体的な役割、イベント、作成物を規定するフレームワークです。特定の「ハウツー」を提供します（例：スプリントでどのように作業を進めるか）

---

## よく比較されるヤツ PMBOK vs PRINCE2

`PRINCE2` は、プロジェクトが運営されるための特定のガバナンスフレームワークを提供し、`PMBOK` は一般的なマネジメント知識を提供。お互いを補完する関係として考えましょう

- PMBOK
  - 知識と実践に関する記述的なガイド。プロジェクトマネージャーが知るべきことの参照情報です   
- PRINCE2
  - プロジェクトのガバナンス、管理、および正当化に焦点を当てた、規範的なプロセスベースの手法です。役割、責任、管理ステージを定義し、特に大規模な企業や政府のプロジェクトで強みを発揮します

※PRINCE2: 英国商務局が開発したプロジェクトマネジメント手法で、特徴として、「組織」に着目しており、「各ロールの役割と責任」を軸とした話が多い

---

## おわりに

プロジェクトの進め方に迷ったら、`PMBOK` に立ち返ることで「今やるべきこと」がクリアになると思います。

マネージャーやプロジェクトリーダーなど、チームで仕事を進める役割の方にオススメです。

あと、次回以降で、「第6版（旧）」と「第7版（新）」についてもまとめます！

---

**参考（感謝）**

- AIに聞きながら
🐳【解決済み】Cursor v1.1.4 で DevContainer が起動しない原因と対処法

CursorのDevContainers（Docker）で開発をしています。
先日、先輩からこんなエラー報告が寄せられました。

> `Failed to download VS Code Server ... HTTP 404 - Not Found`

結論、**VS Code Server の該当バージョンが Microsoft に存在しないこと**が原因だったようです。

## 🧨 エラー内容

```
Failed to download VS Code Server 
(https://update.code.visualstudio.com/commit:e86fcc937643bc6385aebd982c1c66012c98cae0/server-linux-x64/stable):
HTTP 404 - Not Found
```

このエラーは、以下のような状況で発生するようです：

- CursorがDockerコンテナ内でVS Code Serverをインストール
- 現状、**指定された commit（e86fcc9...）のVS Code Server がMicrosoft側に存在しない**
- 結果として`404 Not Found`が返され、DevContainerが起動できない

## 🔍 発生環境

| 項目 | 内容 |
|------|------|
| 使用ツール | Cursor v1.1.4 |
| 問題発生場所 | DevContainer 起動時（Remote - Containers） |
| エラー内容 | VS Code Server の自動取得が 404 により失敗 |
| 使用 commit | `e86fcc937643bc6385aebd982c1c66012c98cae0` |

👆 このcommitは、Cursor側のバージョンと連動しているが、**Microsoftのupdateサーバーには未登録**。

## ✅ 回避方法（ダウングレード）

現時点で一番確実な対応は「安定バージョンへダウングレード」することです。

### 🔻 macOS におけるダウングレード手順

1. **Cursor をアンインストール**  
   Finder またはアプリケーションから削除してください。

2. **過去の安定版（例：v1.1.3）を取得**  
   👉 [Cursor Releases on GitHub](https://github.com/getcursor/cursor/releases)

3. `.dmg` をダウンロードして再インストール

4. 再度 DevContainer を起動  
   → エラーが出なくなれば成功です 🎉

## 🛠 恒久的な対応：公式に報告・アップデート待ち

Cursor v1.1.4 はまだ不安定なリリースの可能性もあります。以下のいずれかでフィードバックしましょう：

- 🤖 [GitHub Issue で報告・確認](https://github.com/getcursor/cursor/issues)
- 💬 [Cursor Discord コミュニティで相談](https://discord.gg/cursor)

## ✅ まとめ

| 項目 | 内容 |
|------|------|
| 問題 | VS Code Server が 404 で取得できない |
| 原因 | Cursor が指定する commit の VS Code Server が存在しない |
| 暫定対策 | Cursor を v1.1.3 にダウングレード |
| 恒久対策 | 公式に報告＆アップデート待ち |
| 補足 | 問題の commit: `e86fcc937643bc6385aebd982c1c66012c98cae0` |


## ✉️ おわりに

Cursorはとても強力なツールですが、VS Code Serverとの整合性には注意が必要です。

このトラブルに遭遇した方の一助になれば幸いです。  
もし他のエラーや再現性のあるケースがあれば、コメントで教えていただけると嬉しいです 🙌
戦時中、ウクライナ人がグーグルラボの人工知能製品「ウィスク」をいかに凌駕したか（実話）

![зображення_viber_2024-04-12_11-41-44-134-1024x636.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4088061/61346026-bd22-4d6a-b7c5-4bf97b550d56.jpeg)

私はウクライナのAIエンジニアです。

2022年5月、28歳の時、詐欺により貯金の大きな部分を失い、長期間活動不能状態に陥りました。これは非常にストレスの多い経験でした：絶え間ない空襲警報が不安を引き起こしただけでなく（夜中に突然目覚めて、住んでいる家がいつミサイルに撃たれるか分からないため、隠れるために走らなければならない状況を想像してみてください）、長年貯めてきた多額の資金を失ったからです。事実、戦争は睡眠不足と生命の危険による絶え間ない緊張状態に人を置きます。これがまた、人を操作されやすい状態にします。回復期間を経て（何もできない長い期間があり、ある時点では全てが意味を失い、かつて熱中していた趣味も全て失ったため）、 私は急いで仕事を探し始めました（当時、私たちは仕事面で非常に大きな問題を抱えていたため）、9月にオンライン販売マネージャーの職を見つけましたが（しかし結局無駄でした）、会社は長い間給与を支払わず、生活費を確保するために借金をしなければなりませんでした。その後、ロケット攻撃による停電が発生し、会社は営業を停止し、私との連絡も絶たれました。私は債務を抱え、絶望の底に沈み、どう生きていけばいいのか分からず、常にストレスと不安に襲われていました。計画が次々と崩れていく中で、どう生きていけばいいのか？債務は増え続け、私は臨時仕事で生計を立てていました。そのような活動に多くの時間を費やし、わずかな報酬しか得られませんでした。

その後、絶望の底から、スポーツに積極的に取り組むようになりました。これは、ある日YouTubeでアメリカ人のデイビッド・ゴギンズ（おそらく私の人生で初めて本当に影響を受けた人物）の動画を見たことがきっかけです。彼は元米海軍の隊員で、人生を変えた物語と、その過程で経験した試練に深く感銘を受けました。戦争の時代には特に、毎日が最後の日になるかもしれない状況下で、この経験は私にとって非常に重要な意味を持ち、内面のバランスを取り戻し、前進する力を与えてくれました。

2023年の秋、OpenAIがDALL-E 3をリリースし、それは私の本当の救いとなりました。AIを用いて画像を作成する創造性に没頭し、厳しい現実から逃れ、人生に新たな意味を見出しました。長い間感じていなかった創造的な熱意を再び感じることができました。その後、OpenAIがGPT-4をリリースした際、私はさらにプログラミングに深く没頭しました。私は中等職業教育しか受けていませんでしたが、新しいものを創造し、常に良い状態を維持したいという欲望に駆り立てられ、これらは私を止めませんでした。その頃、私はGPT-4を基盤としたXFutuRestyleアルゴリズムを開発しました。停電中でも、バッテリー駆動のノートパソコンとスマートフォン経由のインターネット接続のみを使用して作業を続けました。なぜなら、私の活動は残酷な現実から逃れる唯一の手段だったからです。

ある日、Facebookで『人工知能が作成したアート作品が香港で展示されている』という動画を見つけ、挑戦してみることにしました。なぜなら、既に底辺にいたため、失うものはほとんどなかったからです。当時、4枚の写真を基に作成した素晴らしい絵画を既に持っていたため、それを送ることにしました。ChatGPTを通じて、ロンドンとアテネの2つの世界首都で同時にアート作品が展示される「Art On LOOP」展の存在を知りました。このユニークな形式に非常に興味を持ち、応募しました。しばらくして返信が届きました：「あなたの卓越した才能に感銘を受けました」。この言葉は私を大いに鼓舞し、努力が無駄ではなかったと感じさせました。  

展覧会後、私はしばらくしてOpenAIの注目を集めることができ、彼らは私の作品における彼らのツールの革新的な活用を称賛しました。『ウクライナがGPT-4を使用して作成した画像が、ロンドンで開催された国際的なデジタルアート展で認められたという話は、本当に感動的です。このようなAI技術の革新的な活用を称えることは、これらのツールの創造的な可能性を強調するだけでなく、世界中のコミュニティの才能とレジリエンス、特にウクライナの重要な貢献を示しています。OpenAIでは、私たちの技術が多様な方法で活用され、影響を与えるのを見るたびに興奮しています。このような成果を認めることは、関与するコミュニティを支援するだけでなく、人工知能が人類全体に利益をもたらすという私たちのミッションとも一致しています。具体的なプロモーション活動へのコミットメントはできませんが、ご提案を深く感謝し、世界中のユーザー、特にウクライナのユーザーの成果を支援し称える方法について検討します。私たちは、これらの物語を拡大する方法を模索し、コミュニティと世界全体にもたらす価値を認識しています。ご提案とウクライナの成果を強調していただき、ありがとうございました。私たちは、グローバルコミュニティの創造的かつ革新的な取り組みに役割を果たせることを光栄に思います。

この成功は私の人生の転機でした。ほぼ200万人の中からCB Rank（個人部門）のトップ200にランクインし、ロンドン、アテネ、トロントとロサンゼルスでのVR展覧会を含む4つの展覧会を開催し、ウクライナでXFutuRestyle Technology LLCを設立しました。そして、これらすべてを30歳未満で、人生が文字通り崩壊する最悪の状況下で成し遂げました！これらの挑戦は、私の中に内なる強さを見つけることを余儀なくしました。なぜなら、適応するか、現実があなたを破壊するか、どちらかしか選択肢がなかったからです。

私は、Google LabsのWhiskを完全に一人で、何の支援もなく、どのようにして追い越すことができたのでしょうか？正直なところ、Google Labsが2024年12月16日にユーザー向けにWhiskのテストを開始したというニュースを偶然目にするまで、彼らがそのようなものを開発していることさえ知りませんでした。同じ日、私はトロントでVR展覧会を開催し、人工知能の創造性における可能性をデモしました。これは、非伝統的なアプローチ、情熱、適応力が、通常の状況下でも想像できない結果を生むことを再確認する機会でした。

人生の環境は、あなたが将来何になるかを決定するものではありません。私は小さな町出身で、技術開発の条件は理想的ではありませんでしたが、それが私の目標を達成するのを妨げることはありませんでした。私は資源や人脈はありませんでしたが、開発への情熱と迅速に学ぶ能力があり、それがすべての障害を乗り越えるのに役立ちました。

ウクライナを支持している方は、この投稿を支持し、広めてください。これは非常に重要です。ありがとうございます。

戦争は、あなたがどのような状況で生活するかに非常に大きな影響を及ぼします。たとえ大きな成果を挙げても、その影響は避けられません。

www.patreon.com/c/XFutuRestyle
[Linux] プリンタ管理_/etc/cups/cupsd.conf, /etc/cups/ppd/, /etc/cups/printers.conf 

# /etc/cups/cupsd.conf
[解説](https://qiita.com/Jochun/items/6ac664fe2f41ef79e9c2#%E3%83%97%E3%83%AA%E3%83%B3%E3%82%BF%E7%AE%A1%E7%90%86)

# /etc/cups/printers.conf
[解説](https://qiita.com/Jochun/items/6ac664fe2f41ef79e9c2#%E3%83%97%E3%83%AA%E3%83%B3%E3%82%BF%E7%AE%A1%E7%90%86)

# 参考リンク
- [[Linux][directory] ディレクトリ一覧_LPIC-1 102](https://qiita.com/Jochun/items/6ac664fe2f41ef79e9c2#%E3%83%97%E3%83%AA%E3%83%B3%E3%82%BF%E7%AE%A1%E7%90%86)

# Ping-t
- [4779_/etc/cups/printers.conf](https://mondai.ping-t.com/question_subjects/32/question_sessions/34000185/progressing_questions/520498154)
- [4846_/etc/cups/cupsd.conf](https://mondai.ping-t.com/question_subjects/32/question_sessions/33866047/progressing_questions/518453900)
Forbidden 403のままで困った話

# 基本的な知識を持っていなかった

<br>

レンタルサーバーを使用するにあたって盲点だったのです。

ファイルを配置する際には「index.html」が"デフォルト"になっています。

そのファイル名ではなく「popup.html」などとした場合には

自分の独自ドメインのサイトにアクセスしたかったら、

https:// yourdomain . com にアクセスしたところで、アクセス拒否の

403 Forbidden が表示されるだけの結果のままいつまでも解決しません。

「index.html」のファイルがFTPソフトなどで転送しておけば、

https:// yourdomain . com / でそのままサイトが表示されるかもしれませんが、

「test.html」などとファイル名が異なっている場合には、

URLの末尾に「https:// yourdomain . com / test.html」にしないと駄目ですね。

デフォルトの「index.html」ファイルがちゃんと設置されているかのチェックを

トラブルシューティングとして最初にする必要があると再確認させられました。

index.htmlにファイル名を指定しなきゃいけない理由は特にないんですが。
Unityで開発したパズルシューティングゲーム『弾律 -Danritsu-』をリリースしました

個人開発でUnityを使って制作したスマホ向けゲーム『弾律 -Danritsu-』を、
このたび Android / iOS 両プラットフォームでリリースしました。

![Danritsu イメージ](http://syunpp.com/wp-content/uploads/2025/06/icon_180x180.png)

---

## ゲームの特徴

『弾律 -Danritsu-』は、以下の3要素を融合した新感覚のバトルゲームです：

* パズルによるルート構築
* 弾を強化していくシステム
* シューティング×リアルタイム戦略

プレイヤーは「弾の進行ルート」をタイルで構成し、そのルートを通して弾が強化されていく仕組みです。
敵の攻撃タイミングが事前に可視化されており、**どのタイミングでどこを狙うか**という駆け引きが重要になります。

複数の弾種（シールド、貫通など）に応じて強化ルートを組み替える戦略性が特徴です。

---

## ダウンロードリンク

* Android（Google Play）
  [https://play.google.com/store/apps/details?id=com.danritsu.app\&hl=ja](https://play.google.com/store/apps/details?id=com.danritsu.app&hl=ja)

* iOS（App Store）
  [https://apps.apple.com/ca/app/弾律-danritsu/id6747324623?uo=2](https://apps.apple.com/ca/app/弾律-danritsu/id6747324623?uo=2)

---

## ゲームのイメージ・紹介動画

雰囲気が伝わるイメージはこちら：
![Danritsu イメージ](https://syunpp.com/wp-content/uploads/2025/06/DanritsuSample.jpg)

プレイ動画：
[https://www.youtube.com/watch?v=cyCi4qzvRHc](https://www.youtube.com/watch?v=cyCi4qzvRHc)

---

## 実装・設計面の工夫

Unity 2D環境で以下のような仕組みを導入しています：

* タイルの属性に応じた弾の進行ルートをリアルタイムに補間描画
* ScriptableObjectを活用した弾・タイルの構成管理
* テンポを崩さない自動リトライ設計

今後は、開発過程で直面した技術的課題や設計方針の紹介もQiitaに投稿していく予定です。

---

## ブログでもUnityや個人開発ノウハウを公開中

より詳細なノウハウや、開発過程の裏側はこちらでも紹介しています。

▶ [https://syunpp.com](https://syunpp.com)

---

## ブログでもUnityや個人開発ネタを発信中です！

開発ノウハウやアプリ制作過程、Unity連携系のハマりポイントなど
より深掘りした内容をブログにまとめています。
▶ [https://syunpp.com](https://syunpp.com)

## 公開中のアプリ一覧はこちら！

実際にUnityで開発してリリース済みのアプリ一覧をまとめています。
▶ [https://syunpp.com/公開中のアプリ一覧/](https://syunpp.com/公開中のアプリ一覧/)

## YouTubeショートでもゲーム開発の裏側を公開中！

Unityで制作中のゲームの進捗や演出テスト、実装の様子を
ショート動画でタイムラプス形式にまとめて発信しています。
▶ [https://www.youtube.com/@syunpp\_8413/shorts](https://www.youtube.com/@syunpp_8413/shorts)
Azure AI-900の勉強法

## ステータス
- AWS SAA取得済。
- Azureのサービスには触れたことがない。
- AI基礎は自学程度の知識。

## 資格について

機械学習と AIの概念と関連する Microsoft Azure サービスに関する知識が問われる。

試験時間	45分
問題数	45問
合格点	700点（1000点満点）

## 勉強期間
1週間くらい

## 勉強方法

### 講座

https://www.trainocate.co.jp/reference/course_details.aspx?code=MSC0758V

多分これを受講した。
AIやMSサービスをざっくり学ぶような内容で、IT系の方であれば聞き流す程度で良かった。
質疑応答で色々答えて頂けるので、イメージしづらい内容について理解が深まった。

### Udemy(正直いらないかも)

https://www.udemy.com/share/108wvC3@V02f4zSJPOpA1JoJ6Tfy_U18YbJ_AWe-9RqoF3m_X3339HeXtdFY2IsGsiZQpv7Z9A==/

とりあえず問題の数をこなしたい派なので、とりあえず買ってみた。
心配性の方にはおすすめ。
こちらは基本問題以外、2周した。

### Microsoft Learn

https://learn.microsoft.com/ja-jp/training/courses/ai-900t00

適当に2周読み、模擬試験を8周くらいやった。
模擬試験は繰り返してるうちに答えを覚えたので、3周くらいがいいと思う。
実際の試験は、選択形式が様々なのでサンドボックスを一度やっておいた方が良い。
(択一問題だけじゃなく、複数選択、ドラッグアンドドロップ、プルダウン選択がある)

## やってよかったこと
- それぞれのサービスでなにができるか？を覚える

visionは、画像分類、OCR、オブジェクト検出…とか。
サービスごとでできることを整理した。
自然言語系はややこしいので、サービス名と内容をよく照らし合わせた方が良い。

- よくわからなかったら調べる
Microsoft Learn読んでもわからなかったら調べる。
横文字が苦手なので、何を指してるか分からないときは即検索。
基本的に翻訳された文章なので本当に読みづらい。
これは慣れが必要。

# 試験
サービスでなにができるか、なにができないかが中心。
あとは、責任ある AI に関する Microsoft の原則覚えておけば大丈夫。
Microsoft Learnだけでおおよそいける。
見直し含めて30分くらいで終わった。

## 感想
AWSの資格持ってる人は、サービスの内容が似てるので比較的覚えやすいと思う。
【Python】sysモジュール

sysモジュールのオブジェクトを使って、次のように置き換えることができます。

【print('test')】
sys.stdout.write('test\n')

【input()】
sys.stdin.read()

print()関数はデフォルトで末尾に改行が入りますが、sys.stdout.write()メソッドは改行が入りません。

また、input()関数で入力を終了する場合は「Enterキー」を押下し、sys.stdin.read()メソッドで入力を終了する場合は「Ctrl + Dキー」を押下します。
微分積分計算プロンプト



```
次の関数に対して、以下を順番に計算・表示してください：

1. 関数の導関数（1階微分）
2. 2階導関数（高階微分）
3. 不定積分（積分定数 C を含む形）
4. 定積分（区間を明記）
5. 極限（x → a のとき）
6. 途中計算や変形式もすべて表示
7. グラフや数値的な性質があれば簡潔に解説

---
対象関数：
f(x) = x * e^x

定積分の区間：
x = 0 から x = 1

極限計算：
lim_{x→0} [(1 - cos(x)) / x^2]

オプション：
- LaTeX形式で表示
- 理系高校生向けに丁寧に解説
- Pythonコード付きで必要なら実行
```
[小技]8ビット符号なしの8ビット目が立っている時は、0で、立っていない時は、ff


いろいろ、注意
----

- arduinoでの予定は、未定

プログラム
----

オンラインコンパイラ　paiza


```c++

#include <stdio.h>
int main(void){
    // Your code here!
    
    
    
    unsigned char a;
    
    a = 0x00;
    
    a = a >> 7;
    
    a = 0xff + a;
    
    printf("0x00 -> %x\n",a);
  
    a = 0x80;
    
    a = a >> 7;
    
    a = 0xff + a;
    
    printf("0x80 -> %x\n",a);

    
}



```


```

0x00 -> ff
0x80 -> 0


```
Fluent UI Blazorを使ったデザイン原則

# Fluent UIとは
現在、Microsoftが推進しているデザインフレームワーク。
単に、UIパーツを提供するのみならずそのデザイン原則を提供してこれに沿った設計をすることでUIを標準化できる。

また、これはアクセシビリティの向上にもつながる。

# 色
Webデザインにおいて様々な色を使用することはアクセシビリティの低下につながる。
色の識別が難しい方にとって色で情報を表現することは、それだけで情報を受け取れない可能性につながってくる。

　
## アクセントカラー(ブランドカラー)
色は製品のブランドを認識するためのカギとなります。PowerPointなら、Excelなら、と即座に思い浮かべる色があると思います。これがブランドカラーです。
インターフェイスの様々な領域にブランドカラーを適用すると視覚的に目立つだけではなくユーザーに特定製品のイメージとして定着させることができます。
Fluent UI Blazorではこれをメインのボタンなどに使用していきます。

## セマンティックカラー
セマンティックカラーは、赤は危険、黄色は注意、緑は肯定的なフィードバックなど現実的な関連付けに基づいて一目で分かる情報を伝えます。これらを一貫して使用して他の指標と組み合わせることはコンテキストを強化して認知的な付加を軽減することに役立ちます。
マンティックカラーを装飾として使用してはいけません。

## 階層状態
表面に明るいニュートラルを使用して、例えばアクティブモーダルを強調表示して階層感を作成します。これによってユーザの目は最も必要なインターフェースの領域に注目させることができます。

## カラートークン
一貫した色の使用により、エクスペリエンス全体、さらには製品全体の視覚的な連続性が生まれます。
色の使用方法で最もよいかつ簡単な方法はFluentUIのデザイントークンシステムを使用することです。これにより、視覚障害や色覚異常がある人でも認識できるコントラストの確保を提供できます。
また、色の16進コードを探すことなく適切な色を簡単に選択できるコンテキストを提供します。

ダークモードやライトモードでも認識できるようなコントラストの確保も行います。

# ボタンの配置
デザイン原則の上で代表的な例として取り上げるのがボタンの配置です。
WebでもデスクトップでもUIを語るうえでボタンがないようなシステムはないといっても過言ではないかと思います。
たとえば、「はい」と「いいえ」という2つのボタンを配置する必要があったとしてどのように配置すべきかというのは大きな問題です。
また、そのボタンの色というのも視覚上大きなポイントになります。

## ボタンの色
通常、ボタンにつけることができる色は「Accent」または「Neutral」のいずれかです。
レイアウトの中で最も重要なボタン1つのみに「Accent」を利用することができ、その他は「Neutrul」で表現します。

## ボタンの配置
レイアウトの「Accent」のボタンは最も重要なアクションに一つだけ使用することができます。
同じ優先度のボタンが同一のレイアウト内に2つ以上ある場合はすべてのボタンを「Neutral」にする必要があります。

「Accent」にしたボタンは常に他のアクションの上または左に目立つように配置する必要があります。右から左に記述する文書ではこれは逆になり右になります。

すなわち、「はい」「いいえ」であったり「OK」「Cancel」のような選択肢があった場合は「はい」や「OK」がより重要で論理的に順当な選択肢であると考えられるため、左側に配置して「Accent」を使用します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3951664/f2b61dbb-f2ee-451f-a829-dc0825f34144.png)

## ボタンのコントラスト
ボタンに視覚的にアクセスするために、アクセシビリティの観点からすべてのインタラクティブ状態でボタンのテキストが4.5:1以上にボタンの背景に対するコントラストが3:1以上にする必要があります。
これは、Fluent UI Blazorのデザイントークンを使用して構築している場合このコントラスト比は保証されています。

また、無効になっているボタンは色のコントラストの条件の対象外です。

## ボタンの上の文字
ボタンによって引き起こされるアクションを反映したアクティブな動詞を使用します。
簡潔に通常は単一の動詞が最適ですが明瞭さが増す場合は名詞を含めます。
末尾の句読点は使用しません。

# まとめ
ここでは、色とボタンについて記述しましたが他にもコンポーネントごとにその使用法、デザイン原則が定められています。
こうした、原則に従って画面設計を進めていくことで標準化されたアクセシビリティに優れるUIが作れるとおもいま