OmniAICreator/Qiita-1.07M huggingface dataset:
[備忘録] エレコム TK-FBM120KBK の設定手順動画リンクまとめ（ペアリングなど)

![balanced-diagram.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/f5566504-a110-4198-bc47-1918bf11e788.png)


## はじめに
- エレコムのBluetoothキーボード **TK-FBM120KBK** をChromebookとペアリングしようとしたが、手順がわからず迷った。
- 買うときにはパッケージの盾や説明を見て体練したが、しばらく空いたため手順を忘れて迷った。
- 調べたところ、エレコム公式サイトに各OS向けの**ペアリング手順動画**が用意されていることに気づいた。
- また、公式マニュアルも用意されている。
- 自分用の備忘録としてまとめる。

<iframe width="560" height="315" src="https://www.youtube.com/embed/ZijXdBTBqyw?si=4db0S5CBDvD4Jndl" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

## 公式動画リンクについて
- 2025年4月時点の情報。
- 各種設定手順をYouTube動画で案内している。
- ペアリング手順に迷ったら、公式動画を見るのがおすすめ。
- 特に、一度買ってペアリングした後に時間が空いてしまうと手順を忘れてしまうことがあるため、このような動画があると大変助かる。

### 公式サイトリンク
- [エレコム公式（各種設定方法のご案内）ページ](https://www.elecom.co.jp/support/manual_web/movie/peripheral/common/bt_pairing/?_gl=1*1oo1dnc*_gcl_au*MTMxNjkzMzM5OC4xNzQ0NjMxNDc1*_ga*MTI0NjY2MTM2OS4xNzQ0NjMxNDc1*_ga_0F81RERH28*MTc0NDYzMTQ3NS4xLjEuMTc0NDYzMjkzNC4yNy4wLjA.&_ga=2.229655324.1807432660.1744631475-1246661369.1744631475)
- [公式マニュアル (PDF)](https://www.elecom.co.jp/support/manual/peripheral/full-keyboard/tk-fbm120kbk/tk-fbm120kbk_v03.pdf)

### 案内されている各種設定手順
- Windows OS ペアリング方法
- macOS ペアリング方法
- iOS/iPadOS ペアリング方法
- Chrome OS ペアリング方法
- Android OS ペアリング方法
- マルチペアリングの方法

※特に「Chrome OS ペアリング方法」動画を見れば、Chromebookとの接続手順もわかる。

## まとめ
- 公式サイトにリンクがまとめられているので、迷ったらすぐ参照するのがよい。
- 今後もペアリングで迷ったらこの記事を見返す予定。

## 免責事項
本記事の作成にあたり、文章や図解の生成にClaude Sonnetを活用しました。最終的な編集と確認は筆者が行っています。
Next.jsとは

## Next.js
　Reactの機能を拡張したフレームワーク。
サーバーサイドレンダリング(SSR)と静的サイト生成(SSG)という技術を使って、ウェブサイトの表示速度を高速化したり、検索エンジン最適化(SEO)を強化したり出来る。
AI × 個人開発：2ヶ月で「Draw.io＋Cacoo/200」をReactで作った話

初めまして。Qitta初投稿です。

2ヶ月で「Draw.ioとCacooを足して200で割ったアプリ」をReactで作った話です。ポエムはNoteに（ChatGPTがあることないこと）書いたので良ければ。

https://note.com/gznnk/n/nd7eb22aa6b94

# きっかけ
小さなSIerにいるんですが、いつまで経っても仕事でAI使う機会が出てず（大丈夫かSI業界）、ChatGPT-4oみて流石にマズいなと思い、個人開発で試したというところです。

Clineが良さそうですが、まずはスタンダードにGithubCopilot + ChatGPTでどれだけ効率変わるか、実際触って試してました。

あと、図形エディタのような高頻度なレンダリングにReactが耐えれるか試したかったのもあります。

# できたもの
何かできるって段階にはまだ至ってないんですが、それらしく動くようになっています。それがこちら。

https://feature-2-month--sage-griffin-df9b88.netlify.app/

機能は大体こんな感じです。

* 四角形・円・線の作成
* 図形の移動・回転・拡大縮小・反転
* 図形内へのテキスト入力、文字サイズ・色・アライメントの変更
* 図形の塗りつぶし・枠線のスタイル変更
* 線分の頂点の追加・移動（※削除作るの忘れてた）
* グループ化およびグループ単位での変形
* 図形同士の接続（※時々千切れる不具合あり）
* Undo/Redo機能（※未完成・不安定）
* AIによる図形の自動作成（※実験的・非公開）

作っているうちにAI使う前のスピード感忘れてきましたが（今後見積ミスりそう...）、少なくとも効率が2〜3倍になったと思います。もっとかも。

ちなみにライブラリは基本Reactのみです。移動・変形・回転・反転等々全部自分で書いてます（この辺はAIもあんまりやってくれなかった）。
現状のdependencies。classnamesは使ってないけどいつの間にか居ました記憶がない。

```json
"dependencies": {
    "@emotion/react": "^11.14.0",
    "@emotion/styled": "^11.14.0",
    "classnames": "^2.5.1",
    "openai": "^4.91.1",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
},
```

# Reactは高頻度描画に耐えられたのか？
答えはYes/Noのどちらでもありました。DOMの直接操作はせずに済んだのですが、メモ化をしても「dependencies array」の評価が地味に重く、以下のように「dependencies array」は空配列にして、参照をuseRefでバイパスしないと耐えられませんでした。

```ts
// Create references bypass to avoid function creation in every render.
const refBusVal = {
    id,
    items,
    startOwnerId,
    endOwnerId,
    autoRouting,
    onDiagramChange,
    canvasStateProvider,
};
const refBus = useRef(refBusVal);
refBus.current = refBusVal;

...

/**
 * Handle Path component change event.
 */
const handlePathChange = useCallback((e: DiagramChangeEvent) => {
    // Bypass references to avoid function creation in every render.
    const { onDiagramChange } = refBus.current;
		
    onDiagramChange?.({
    	...e,
    	endDiagram: {
    		...e.endDiagram,
    		autoRouting: false,
		},
	});
}, []);
```

アンチパターンではあると思いますが意外と可読性は下がらなかったので、高頻度な描画にはこの参照をパイパスするやり方が思います。ちなみにDOMを直接操作するのは複雑化しすぎてナシでした。

# 今後
直近は図形エディタとしての機能を作っていきますが、将来的には図形を書く感覚でAIエージェントだったりワークフローを組めるようにしたいなと、今のとこは思ってます。Difyでいいじゃんって話ですが、AI技術の進化は予測困難だと思うので、少なくとも必要であろうUIの基盤は自分で持っておきたいなと思っています。
読むと生成AIを今よりちょっと便利に使えるようになる話

# ChatGPTやGeminiを使いこなす！プロンプト6つの使い方

AIとの対話で「うまく答えてくれないな…」と思ったことはありませんか？

実は、**ちょっとした頼み方の工夫＝プロンプトの使い方**を変えるだけで、AIからの応答が劇的に良くなることがあります。

本記事では、**ChatGPTやGeminiなどのAIを活用する上で覚えておくと便利なプロンプトテクニック**を紹介します！

---

## 💡 プロンプトとは？

AIに指示を出すときに使う「命令文」のことを **プロンプト（Prompt）** と呼びます。

例えば、「今日の天気を教えて」というのも立派なプロンプト。

この**プロンプトの書き方次第で、AIの応答内容は大きく変わります。**

---

##  簡単かつ便利なプロンプトテクニックたち

---

###  Zero-shot Prompting

**事前の例を与えずに、一発でタスクを依頼する方法です。**

例：  
``次の文章を要約してください``

AIは「要約する」というタスクを自ら推測して実行します。  
 単純な作業や、明確に伝えられる指示に向いています。

---

###  Few-shot Prompting

**いくつかの「例」をAIに見せてから、続きをやってもらう方法です。**

例：  
- りんご → 果物  
- にんじん → 野菜  
- サーモン → ？

 AIは「魚」と出力するはずです。

「この形式で答えてね」とお手本を見せることで、**AIがパターンを学習しやすくなります。**

---

###  Roleplay Prompting

**AIに役割（キャラや専門職）を与える方法です。**

例：  
``あなたはプロの編集者です。以下の文章を添削してください。``

 専門的な視点やキャラ視点での回答が欲しいときに便利！

---

###  Format-constrained Prompting

**出力の「形式」や「構造」を指定する方法です。**

例：  
``以下のフォーマットで回答してください：  
タイトル：〇〇  
要約：△△  
感想：□□``

 表、JSON、Markdown形式など**決まった型**が必要なときに重宝します。

---

###  Instructional Prompting

**「どうしてほしいか」を丁寧に具体的に伝える方法です。**

例：  
``以下の文章を、分かりやすくなるように言い換えてください。小学生にも理解できるように書いてください。``

 丁寧に書けば書くほど、**精度の高い回答**が得られるのが特徴です。

---

###  Step-by-step Prompting

**AIに「順を追って考えて」と指示する方法です。**

例：  
``ステップバイステップで考えてください``

通常、AIは式を一気に解こうとしてミスすることがありますが、  
順序立てて考えさせることで**正確な回答が得られる**ようになります。

---

##  まとめ：プロンプト6つの使い分け

- **Zero-shot：** 一発指示。スピード重視のときに。
- **Few-shot：** 例を見せて、パターンを学ばせたいときに。
- **Roleplay：** 役割を与えて、専門家やキャラ視点の応答を得たいときに。
- **Format-constrained：** 出力形式を指定したいときに（Markdown・JSONなど）。
- **Instructional：** 丁寧に具体的に指示したいとき。精度を上げたいときに。
- **Step-by-step：** 順序立てて考えさせたいとき。ミスを減らしたいときに。

---

##  おわりに

AIとのやり取りは、ちょっとした「頼み方の工夫」で結果が大きく変わります。

プロンプトの書き方を意識するだけで、「こんなことまでできるの!?」と驚く場面が増えていくはずです。

ぜひ、今回紹介したプロンプトテクニックを試してみてください！

---
WSL/Ubuntu再インストール

# はじめに
WSL/Ubuntu環境を稀によくクリアするので備忘録。

# Ubuntu再インストール
コマンドプロンプトを起動し、以下のコマンドを使用する。
`wsl --help`
`wsl --list`
`wsl --unregister Ubuntu`
`wsl --install -d Ubuntu`

```
C:\Projects\WSL>wsl --list
Linux 用 Windows サブシステム ディストリビューション:
Ubuntu (既定)

C:\Projects\WSL>wsl --unregister Ubuntu
登録解除。
この操作を正しく終了しました。

C:\Projects\WSL>wsl --install -d Ubuntu
ダウンロード中: Ubuntu
インストール中: Ubuntu
ディストリビューションが正常にインストールされました。'wsl.exe -d Ubuntu' を使用して起動できます
```

# WSL/Ubuntu起動
コマンドプロンプトから以下のコマンドで初期設定を行う。
`wsl`

```
C:\Projects\WSL>wsl
Provisioning the new WSL instance Ubuntu
This might take a while...
Create a default Unix user account: xxx
New password:
Retype new password:
passwd: password updated successfully
To run a command as administrator (user "root"), use "sudo <command>".
See "man sudo_root" for details.

Welcome to Ubuntu 24.04.2 LTS (GNU/Linux 5.15.167.4-microsoft-standard-WSL2 x86_64)
```

また、以下のコマンドでアップデートしておく。
`sudo apt update`
`sudo apt upgrade`
`apt list --upgradable`

以下のようなコマンドでパッケージをインストールする。
`sudo apt install gcc`

また、以下のコマンドでWSLのアップデートを確認する。
`wsl --update`

```
C:\Projects\WSL>wsl --update
更新プログラムを確認しています。
Linux 用 Windows サブシステムの最新バージョンは既にインストールされています。
```
Bootstrapとは

## Bootstrap
　Web制作に必要なフォームやボタンがあらかじめ用意されており、多数あるテンプレートを活用して、CSSの知識が無くても簡単にデザインの整ったWebサイトを作成できるツール。
レスポンシブWebデザインにも対応。
端末に合わせて最適化させることが出来る。
LINE Bot MCP Serverを使ってみた

本日 LINE Bot MCP Server が公開されたようなので早速使ってみました。

https://x.com/lycorptech_jp/status/1911664112452731360

https://github.com/line/line-bot-mcp-server

使い方は[README](https://github.com/line/line-bot-mcp-server/blob/main/README.ja.md)にある通りです。

```bash
# READMEはtypoで git@github.com/line/... となっているので注意
git clone git@github.com:line/line-bot-mcp-server.git

cd line-bot-mcp-server && npm install && npm run build

```

チャンネルアクセストークンと受信者のユーザーIDは LINE Developers の Messaging API チャネルから取得できます。
(受信者を自分にする場合はチャネル基本設定の "あなたのユーザーID" にユーザーIDが記載されているのでこれをつかえます)

僕は VSCode の GitHub Copilot から使用するので、VSCodeの settings.json に下記を追加します。

```json
    "mcp": {

        "inputs": [],
        "servers": {
            "line-bot": {
                "command": "node",
                "args": [
                  "/path/to/line-bot-mcp-server/dist/index.js"
                ],
                "env": {
                  "CHANNEL_ACCESS_TOKEN" : "...チャネルアクセストークン...",
                  "DESTINATION_USER_ID" : "...ユーザーID..."
                }
            }
        }
    },
```

![ss2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3943206/0a5b0ec0-474d-4755-bcad-759a443767f0.png)




現状で、下記の機能があるようです。
 - flexメッセージの送信
 - テキストメッセージの送信
 - プロフィール情報の取得

が、僕の環境では flex メッセージの送信機能をONにしていると `Failed to validate tool 590_push_flex_message: TypeError: Cannot use 'in' operator to search for 'type' in true` というエラーがでて使えなかったのでOFFにしました。

便利な使い方がまだちょっと思いつきませんが、未対応の機能も順次追加予定とのことなので今後も注目していきたいです。
Azure マネージドIDとサービスプリンシパル　整理

## 始めに
az-305の勉強の備忘録としてマネージドIDとサービスプリンシパルについてまとめた。

## マネージドID
Azure内リソースでのみ使用できるサービスプリンシパルのこと。
簡単に言うとアプリやリソースがAzure内のリソースにアクセスするための**身分証**
詳細な仕組みについてはこちらを参照
https://learn.microsoft.com/ja-jp/entra/identity/managed-identities-azure-resources/how-managed-identities-work-vm
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2733779/cd9afbfb-eabb-4021-ae8d-ae04fca32c59.png)
## システム割り当てマネージドIDとユーザー割り当てマネージドIDの違い

- **システム割り当てマネージドID**：Azureリソースの一部として自動作成され、リソースのライフサイクルと連動して管理される（一体化）。1リソースに1つのみ。
- **ユーザー割り当てマネージドID**：複数のAzureリソースにまたがって再利用可能で、独立して管理される。

マネージドIDを割り当てたAzureリソース（＝アクセス元）に対して、対象リソース（＝アクセス先）への適切なRBACロールを付与することで、安全なアクセスが実現される。


## サービスプリンシパルとは
アプリケーション用のIDのこと。これを使用することにより、Azureリソースにセキュアにアクセスすることができる。
迷路判定！実は文字列はインデックスでアクセス可能！２次元配列使わない！

迷路のマスが `#` か `.` か見るだけの問題で、僕がまさかの 迷路に迷った件について話す!

## <br>🧩 問題内容（超ざっくり）
`H`×`W`マスの迷路があり、`r`行`c`列のマスが「`#`（壁）」かどうか判定せよ！

<br>入力例：
```
3 4 1 2　　// H,W,r,c
..#.
#.##
....
```

このとき、1行目の2文字目は `.` なので答えは No！
<br>

https://paiza.jp/works/mondai/data_structure/data_structure__string_boss

## <br>🔥 始めのコード（NG）
```js
const rl = require('readline').createInterface({input:process.stdin});
const lines = [];

rl.on('line',(input)=>{
    lines.push(input);
});

rl.on('close',()=>{
    const[H,W,r,c] = lines[0].split(' ').map(Number);
    const maze = lines.slice(1).map(a => a.split(' ')); // ❌

    if(maze[r][c] === "#"){  //❌
        console.log("Yes");
    } else {
        console.log("No");
    }
});
```

🙅‍♂️ NGポイント
- `split(' ')` の誤用: 迷路の行を分割しようとしたけど、スペースがないので、すべて1要素の配列に。
- インデックスのズレ: `r` と `c` は 1始まり なのに、そのまま使っていたため、ズレが生じた。


## <br>✅ 修正コード（OK）
```js
const rl = require('readline').createInterface({ input: process.stdin });
const lines = [];

rl.on('line', (input) => {
    lines.push(input);
});

rl.on('close', () => {
    const [H, W, r, c] = lines[0].split(' ').map(Number);
    const maze = lines.slice(1); // 文字列の配列でOK

    if (maze[r - 1][c - 1] === "#") {  // インデックス修正
        console.log("Yes");
    } else {
        console.log("No");
    }
});
```

### 🧠 解説
- 文字列へのアクセス: JavaScriptでは文字列も配列のようにインデックスでアクセスできる。そのため、`maze[r-1][c-1]` と書くだけで、指定した行・列のマスにアクセス可能。



### 💡 迷路の2次元配列化

もし迷路を完全な2次元配列として使いたい場合は、次のようにすることもできる。
```js
const maze = lines.slice(1).map(line => line.split(''));
```
<br>
この方法では、各行が配列になるが、今回の問題では読み取りだけなので、最初のように文字列のままで使うのがベターかも。


## <br>🏁 まとめ
✅文字列へのアクセスはインデックスでできるから、`split('')` は不要！

✅1 始まり → 0 始まり のインデックス補正を忘れずに。



<br><br>[僕の失敗談(´;ω;｀)🚀](https://paizabeginner.wordpress.com/2025/04/14/paiza%e3%81%a7%e5%9f%ba%e6%9c%ac%e3%83%9e%e3%82%b9%e3%82%bf%e3%83%bc%ef%bc%9apaiza%e3%81%a7%e5%9f%ba%e6%9c%ac%e3%83%9e%e3%82%b9%e3%82%bf%e3%83%bc-%e8%bf%b7%e8%b7%af%e3%81%ae%e5%a3%81%e5%88%a4/)
Google Deep Researchの使い方

Googleの「Deep Research」は、最新のAIモデル「Gemini」を活用した高度なリサーチ支援機能です。

単に質問の回答ではなく、調査を依頼すると、まず調査計画を作成して、計画に沿って調査を実施するので、「調査報告書」レベルの文書を作成できます。

**MicrosoftのDeep Researchは有料版で使用できますが、Google のDeep Researchは無料でも、月に数回(２～５回)使用できます！(2025/4時点)**

**(使い方)**
例として「マイクロソフトのERP事業」に関して調査を依頼してみます。
調査計画として、「過去５年の売上高の推移」「強味、弱み」を追加します。

**(手順)**
GoogleアカウントでGeminiにログインします
https://gemini.google.com/

左上のGeminiメニューからDeep Researchを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4043034/8ff2e28b-f576-4ed8-8818-69e209b2a00d.png)

「マイクロソフトのERP事業に関して調査してください」と入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4043034/73682d9c-c2b7-4376-941b-a0f2521e8095.png)

調査の方針が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4043034/08a31023-a62e-4f82-aaf3-312a1e2e69cb.png)

調査計画として、「過去５年の売上高の推移」「強味、弱み」を追加します。
(計画を編集)ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4043034/6ad8d468-4a32-4438-9207-33deed4b8f34.png)

「過去５年の売上高の推移」「強味、弱み」を調査計画に追加してください。を入力。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4043034/89e78d93-dbe7-423d-a69c-d3848278f6e1.png)

「過去５年の売上高の推移」「強味、弱み」が調査計画に追加されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4043034/1d213d60-ff26-4e48-9387-fe7584e39eb7.png)

（リサーチを開始）ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4043034/2ce61ae3-4ada-4d3b-8dd0-c0ff6c1e0cdf.png)

調査が始まり、調査状況が表示されます。
調査が完了するまで、ブラウザを閉じずに待ってください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4043034/3eb0af4d-38f2-459b-b6f8-5ae7470c27f4.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4043034/1551a7fb-11fe-4605-95e9-17e9aef54839.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4043034/a805e1ff-3a9b-4288-af97-b85892ea6512.png)

**調査が完了して、結果が右のエリアに表示されます。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4043034/ff317649-0a67-4424-b24e-ed32c75ff70c.png)

(Googleドキュメントにエクスポート)をクリックすると、Googleドキュメントとして保存してくれて、WORDファイルなどに出力できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4043034/eca1e303-1ff1-4012-af7f-062d33b0255e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4043034/aee1103d-344d-48d3-8586-75df16cbd6ed.png)

全部で２１ページの調査報告書が作成され、追加で依頼した調査内容も含まれていました。また、引用文献は全て記載されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4043034/0807ea58-226d-4c46-8a42-455c9a19d29a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4043034/271db2c6-8161-4c8f-ab74-a54bec6f0c51.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4043034/9e7a0e47-5755-4140-892d-a66cfbac23c8.png)


**人力で調査すると数日から数週間かかる調査が数分で可能になります。**
**調査結果を読むと感動するレベルなので、是非一度試してみて頂きたいですね！**
【第8回】Azureで社内システム再現（オンプレ編）｜SQL Serverインストールからテーブル作成まで

## 概要

「Azureで社内システム再現（オンプレ編）」では、  
Azure の IaaS サービスを使って簡単な社内システムを再現します。

機能としては、社員番号を入力して検索ボタンを押すと、  
対応する名前を表示するだけのシンプルなものです。

※詳しい全体構成については、[【第0回】Azureで社内システム再現（オンプレ編）｜構成図と動作の流れ](https://qiita.com/saba_infra/items/a5e58ded68973e4551ee) で紹介しています。

---

## システム構成（今回の対象範囲）

![azure_onpre_joutai＿連携１.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4037248/2235dc6f-8ca2-49f1-8178-caf4d43f9931.png)

上図の赤枠で囲った部分が、今回の記事で扱う範囲です。

このステップでは、ADから取得した社員情報を格納するためのSQL Server環境を構築します。

具体的には、以下の作業を行います：

- SQL Server 2022 Developer エディション（日本語版）をインストール
- SSMS（SQL Server Management Studio）のインストール
- データベースの作成
- 社員情報を格納するテーブルの作成

---

## SQL Serverのインストール
今回は、SQL Server 2022 Developer エディション（日本語版） を使用しました。

Azureには、SQL Serverがあらかじめインストールされた仮想マシンも提供されていますが、
言語が英語で操作がわかりづらかったため、今回は公式サイトから日本語版をダウンロードしてインストールしました。

ダウンロードはこちら：
https://www.microsoft.com/ja-jp/sql-server/sql-server-downloads#windows


![スクリーンショット 2025-03-27 18.30.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4037248/d3fe3a48-5af9-4216-b705-4be7430f34e8.png)

## SSMS（SQL Server Management Studio）のインストール
SQL ServerをGUIで操作するために、Microsoft公式ツールである SSMS を使用します。
こちらも日本語版を選択するため、以下のページからダウンロードしました。

ダウンロードページ：
https://learn.microsoft.com/ja-jp/ssms/download-sql-server-management-studio-ssms#available-languages


![スクリーンショット 2025-03-27 18.31.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4037248/f9f51821-d696-4f83-967c-784328876bdb.png)

---
## SSMSでの接続とデータベース・テーブル作成

### 1. SSMSにログイン（Windows認証）

SQL Serverのインストールが完了したら、**SSMS（SQL Server Management Studio）**を起動し、SQL Serverに接続します。  
今回は、**Windows認証**で `DB-VM1` に接続しました。

![スクリーンショット 2025-03-27 18.44.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4037248/865d1d12-9ca4-497e-8bc6-e538ec4172cb.png)

---

### 2. データベースを作成する

オブジェクトエクスプローラーの「データベース」を右クリックし、「新しいデータベース」を選択します。  
今回は、**ADから抽出した社員情報を格納する用途**として、`EmployeeDB` という名前で作成しました。
![スクリーンショット 2025-03-27 21.42.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4037248/478c57ec-4d10-4970-ab06-8945c20f563b.png)


---

### 3. テーブルを作成する

テーブルは、**以下のクエリで作成**しました。

```sql
USE EmployeeDB;

CREATE TABLE employee_data (
    employee_id varchar(50),
    name nvarchar(50)
);
```
![スクリーンショット 2025-04-08 12.40.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4037248/7c32166f-2c2b-43eb-a9f6-e18b4253632d.png)


employee_id カラムは社員番号を格納します。英数字のみの想定のため、varchar(50) としています。

name カラムには日本語の名前が含まれるため、文字化けを防ぐために nvarchar(50) を使用しました。

---
複数の Nature RemoのセンサーデータをGoogle Spread Sheetにまとめてみる

# あらまし
Nature Remo 3 を買ったので下記記事を参考にGoogle Spread Sheetに情報蓄積できるようにした。

https://qiita.com/tobi50/items/6bbf6f53fe975f26f445

が、下記2点を直したかったので更新した。

- 複数のデバイスの情報を一度のリクエストで蓄積したい
- Nature Remo mini 等の温度センサーしかないデバイスも使いたい

# リポジトリ
https://github.com/Yasuwoh/nature-remo-to-spreadsheet

# 使い方
基本的にはtobi50さんの記事通り。
一箇所だけ
~~~
// First, Exec this script to create new device sheet. Check new device sheet, and Set your device id.
var REMO_TARGET_DEVICE_IDS = [
  'YourDeviceId1',
  'YourDeviceId2',
]
~~~
のところにはデイバスIDのリストを入れてください。

# 謝辞
tobi50さん、素晴らしいスクリプトをありがとうございます。
[初心者-備忘録]Ubuntsuでファイアウォールを設定したい

# 環境
- Windows 11
- Ubuntu 22.04 LTS

# 状況
- セキュリティの設定を変更するために、ファイアウォールの設定を変更しようとした
    - ①ポートを開放
    - ②ファイアウォールを再読み込みして変更を適用する
    - の手順を実施しようとした
- 自分はUbuntsuで操作しようとしたが、手順書はRedhat系のコマンドし書かれていなかったため、操作に躓いた

手順書に書かれていたものは以下のコマンド
```
sudo firewall-cmd --add-port=[ポート番号]/tcp --permanent
sudo firewall-cmd --reload
```

# 対応策
ubuntsuではファイアウォールを設定するには``ufw``を使うらしい！
(firewall-cmdはubuntsuにはないコマンド)

## ufwのの有効化
まずはアクティブかどうかを確認する
```
sudo ufw status
```
非アクティブと返ってきたら、以下のコマンドで有効化する
```
sudo ufw enable
```
※``ufw``は``firewall-cmd``と異なり、デフォルトで非アクティブらしい

## ポートを開放する
以下のコマンドを入力
```

sudo ufw allow [ポート番号]/tcp

```
## 設定の確認
もう一度statusを確認
```
sudo ufw status
```
これで問題なければ完了！


# 参考
https://qiita.com/htshozawa/items/e24729a4ab332cb40313
SSMS(SQL Server Management Studio)で、すべてのデータを編集可能とする方法

## 内容
[1. はじめに](#はじめに) 

[2.編集件数をすべて表示する方法](#編集件数をすべて表示する方法)

[3.まとめ](#まとめ)

# はじめに
SSMS（SQL Server Management Studio）とは
Microsoft の製品であるSQL Serverを扱うためのソフトです。
これを利用することで、SQL Serverに対して、SQLを実行することができます。
ですが、通常の設定状態では、200件までしかテーブルの項目を編集することはできません（テーブルの選択は1000件、編集は、200件まで）。
インストール方法などは、他の方々が既にアップロードされているため、取り上げません。

# 編集件数をすべて表示する方法
SSMSの「ツール」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3537494/b5d4328f-273c-4920-8d2f-7e92d96f88c2.png)

「オプション」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3537494/48001bae-0b04-4198-93ad-032dbff3e235.png)

開いたオプションの「SQLオブジェクトエクスプローラー」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3537494/85abedd0-4bb4-4388-bcf1-53f5574b8110.png)

コマンドをクリックしてください。

テーブルおよびビューのオプション
上位<n>行の編集コマンドの値を変更をしてください。(0:すべて)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3537494/773b5608-5a7c-4744-bb30-c84a4ce937cb.png)

こうすると、テーブルを右クリックした際に、
編集のできるデータの表示件数をすべてとすることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3537494/860f12d2-68ad-4810-bf65-ae081cbd5424.png)


# まとめ
手順は、
1.SSMSを立ち上げる。
2.ツールをクリック
3.オプションをクリック
4.SQL Serverオブジェクトエクスプローラーを展開
5.コマンドをクリック
6.テーブルおよびビューのオプション
7.上位<n>行の編集コマンドの値を変更(0:すべて)
となります。
Salesforceレポートの数式項目～オブジェクト間の値の差分を確認する方法

本橋孝昭です。

今回jはレポートの数式を使用してオブジェクトでリレーションがあるオブジェクトのレコードが同じ値の場合はTRUEやFALSEを表示させる数式項目を作成します。

今回は例として「商談オブジェクトの商談名」と「その商談に紐づく取引先」　が同じであればTRUE　異なればFALSEにする数式を作成します

数式はこのようになります

IF(OPPORTUNITY_NAME=ACCOUNT_NAME, "TRUE", "FALSE")

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/f1bf3c39-f0c6-49fe-b6dc-8341261b03d2.png)


行レベルの数式をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/78491a60-11ba-4cc1-a595-546945681e9c.png)

出力種別を「テキスト」にして以下数式を入力
IF(OPPORTUNITY_NAME=ACCOUNT_NAME, "TRUE", "FALSE")


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/4fdd6ab6-2e4b-4bcf-8e90-e35c9c8b9a38.png)


レポートを保存

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/a5a9d428-a609-4370-abaf-d3eacf8f234f.png)

このように設定すれば取引先名と商談名の差異によりTRUE　FALSEの表示が可能です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/79b563b6-4d32-4022-9637-2c5341285f99.png)
【Git】一度gitignoreしたファイルを後からgit管理に入れる

逆のやりかたは佃煮にするほど出てくるのに、何故かこっちが全然見当たらなくて困ったので備忘録です。

なにせ[公式ドキュメント](https://git-scm.com/docs/gitignore)にすら全く書かれてない。


# 一度gitignoreしたファイルを後からgit管理に入れる

ここではDocumentRootにある、既に無視されている`hoge.txt`を追加することにします。

```gitignore:gitignore
hoge.txt
```

とりあえず`.gitignore`から`hoge.txt`を削除します。

しかし、これだけでは何故かgit管理下に入ってくれません。

ということで以下のコマンドを打ちましょう。

```cmd
git add -f hoge.txt
```

`-f`は除外設定を無視して強制的にgit管理下に追加するオプションです。

これで`hoge.txt`がgit管理に入りました。

最後にcommitして終了です。
めでたし。


たぶんもっと適切な方法があると思うんだけどよくわかりません。
Azure DevOps の Pipeline のDocker でPostgres+Neon Proxyのローカルサーバを動かしたメモ

# 概要
[前回](https://qiita.com/hibohiboo/items/6ec2b418ea41c672d96a)はAzure DevOpsのパイプライン上で起動したDockerのPostgresqlにそのままバックエンドからアクセスした。
今回は、Neon Proxyを経由してのアクセスを行う。

[この時点のソースコード](https://github.com/hibohiboo/odyssage/blob/754243ac79a2368cd32fb5500385dd6eeab0b326/packages/bdd-e2e-test/azure-pipeline.yml)

# 追加したパイプライン定義

```yaml:packages/bdd-e2e-test/azure-pipeline.yml

      - script: |
          echo "127.0.0.1 db.localtest.me" | sudo tee -a /etc/hosts
        displayName: "Add db.localtest.me to /etc/hosts"

      - script: |
          echo "Waiting for PostgreSQL..."
          for i in {1..20}; do
            if PGPASSWORD=postgres psql -h db.localtest.me -U postgres -d main -c "SELECT 1" &>/dev/null; then
              echo "PostgreSQL is ready"
              break
            fi
            sleep 2
          done
        displayName: 'Wait for PostgreSQL server to start'

      # Neon Proxyはserviceとして起動すると postgresの起動を待たないので、docker runで起動する
      - script: |
          echo "Starting Neon Proxy..."
          # Docker内からホストのPostgreSQLに接続するための設定
          # --add-host=host.docker.internal:host-gateway は Linuxで host.docker.internal を使うためのオプション
          docker run -d --name neon-proxy \
            -e PG_CONNECTION_STRING=postgres://postgres:postgres@host.docker.internal:5432/main \
            -p 4444:4444 \
            --add-host=host.docker.internal:host-gateway \
            ghcr.io/timowilhelm/local-neon-http-proxy:main
        displayName: 'Start Neon Proxy'
        
```

Neon Proxyはpostgresの起動後に立ち上げないとエラーになるが、serviceで定義するとpostgresと同時に起動してしまう。
DevOpsでは docker-compose での `depends_on`が利用できないので、タスクとしてNeon Proxy のDockerを起動する。
このとき、serviceの外で定義するとネットワークが別になるため、service名で通信ができない。

そのため、ホストのアドレス`host.docker.internal`とポートを利用している。

# 参考
[Docker Engine（Linux）でコンテナからホスト側のサービスにアクセスする（host.docker.internal）](https://kazuhira-r.hatenablog.com/entry/2022/05/21/152825)
[サービスコンテナ](https://learn.microsoft.com/ja-jp/azure/devops/pipelines/process/service-containers?view=azure-devops)
[Local Development with Neon](https://neon.tech/guides/local-development-with-neon)
[Neon(Postgres)のDockerをローカルで稼働させ、Drizzleを使ったマイグレーションとCloudflare Workersのローカル実行からの接続を行ったメモ]()
個人的備忘録：IT学習におけるデファクトスタンダードについて記事にしてみた

## はじめに

これは、私自身がIT学習を進める中で気づいたことや実際に使ってよかったと感じたものを整理した備忘録です。

IT学習における「デファクトスタンダード（de facto standard）」とは、明文化されたルールや公式な規格ではないものの、業界内で多くの人々に使用されており、事実上の標準とされているツールや技術、学習手法のことを指します。

## なぜデファクトスタンダードが重要なのか？
IT分野では技術の移り変わりが激しいため、すべてを追いかけることは困難です。その中で、一定の信頼性と実績があるものが自然と「これを使っておけば間違いない」とされ、現場や学習の現場でも優先的に扱われます。

**参考文献**

https://www.kaonavi.jp/dictionary/de_facto_standard/

これは私自身も学習する中で感じたことで、特に初心者のうちは選択肢が多すぎて迷うことが多かったため、まずは信頼できるスタンダードに倣うことでスムーズに取り組めました。

## 例：ツール・技術面でのデファクトスタンダード
- **プログラミング言語**：Python、JavaScript
- **フレームワーク**：React（フロントエンド）、Django / Flask（バックエンド）
- **バージョン管理**：Git（＋GitHub）
- **開発環境**：VS Code
- **コンテナ技術**：Docker

これらは実際に私が手を動かして使ってみて、学びやすく、情報も多く見つけやすかったと感じたものです。

## 例：学習手法や情報収集のデファクトスタンダード
- **ドキュメント**：公式ドキュメント、Qiita、Zenn
- **オンライン学習**：Udemy、Progate、ドットインストール、ITスクール
- **演習・問題演習**：AtCoder、LeetCode、Paiza
- **コミュニティ参加**：Twitter（X）、Discord、teratail

特にQiitaやZennの記事には、先人の知見がまとまっていてとても参考になりました。

## デファクトスタンダードの捉え方
デファクトスタンダードはあくまで「現時点で多くの人が使っているもの」にすぎません。

https://biz.moneyforward.com/erp/basic/3348/

時代や技術の進化により変わっていくものでもあるため、「なぜそれが使われているのか」という背景も学びながら、自分に合った学習スタイルやツール選定をすることが重要です。

## まとめ
IT学習においては、まずはデファクトスタンダードを活用することで効率よく学習を進めることができます。

:::note warn
***そこから、自分に合った技術やツールを見つけて深掘りしていくことが、成長への近道です。***
:::

この備忘録が、将来の自分にとっても学びの整理に役立つことを願って記録しています！
Arduino × AWSサーバーレスで作るIoT温度モニタリングシステム（仮）【第4回】

# Bluetooth通信でセンサーデータをAndroidに送信するよ

## はじめに

[前回](https://qiita.com/takataka5845/items/3aff19c560c1457829a5)は、DHT22温湿度センサーモジュールを使って、ArduinoからMacに温湿度データを送信するシリアル通信テストを行いました。

今回は、**通信方式をシリアル（USB）からBluetoothに切り替え**、  
Android端末と接続してセンサーデータをワイヤレスで受信するところまで進めました！

z
---

## やったこと

- HC-06 BluetoothモジュールをArduinoに接続
- スイッチONでLED点灯、Bluetooth経由でデータ送信
- スイッチOFFでLED消灯、送信停止
- Android端末側で「Bluetooth Terminal」アプリを使ってデータを確認

---

## 回路構成

これまでの構成に加えて、**HC-06 Bluetoothモジュール**を追加しています👇
![Bluetooth回路構成図](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21269/bd9c7d10-a5e5-41dd-84e2-cf792a3d6159.jpeg)

---

## 動作の様子（動画）

スイッチをONにすると、LEDが点灯し、DHT22で取得した温湿度データがBluetooth経由でAndroid端末に送信されます。  
スイッチをOFFにすると、LEDが消灯し、送信が停止します。

🎥 動画はこちら：
<iframe width="560" height="315" src="https://www.youtube.com/embed/sy_SSXVAcO4" frameborder="0" allowfullscreen></iframe>

👉 [YouTubeで直接見る場合はこちら](https://youtu.be/sy_SSXVAcO4)

---

## 自作Androidアプリとの連携テスト（補足）

今回は自作Androidアプリを使って実際にBluetooth通信は行っていませんが、  
**その前段階として作成した自作AndroidアプリのUIモック**で、次のような動作確認をしていました：

- 「Bluetooth接続」ボタン → テキストが定期表示
- 「POST」ボタン → ログ出力
- 「切断」ボタン → 表示停止

📽️ UIプロトタイプの様子はこちら（第3回の動画）：
<iframe width="560" height="315" src="https://www.youtube.com/embed/wqu12TP3V34" frameborder="0" allowfullscreen></iframe>

👉 [YouTubeで直接見る場合はこちら](https://youtu.be/wqu12TP3V34)

この時点では **見た目だけ** の動作でしたが、**UIの流れや使用感を確認するには十分な手応えがありました！**

---

## 次のステップ

次回は、**自作Androidアプリで実際にBluetooth接続し、センサーデータを受信する処理を実装**します！

- Bluetooth機器スキャン
- 選択・接続処理
- データの受信とUIへの表示

いよいよ、アプリとハードが繋がる瞬間です…！

---

## おわりに

Bluetoothによる無線化ができたことで、プロジェクトは次のステージへ進みます。  
「データを送る」「アプリで受け取る」─ このあとのクラウド連携を見据えて、  
ひとつずつ着実に動かせるようになってきました！

---

## シリーズ記事一覧

- 【第1回】[AWSでクラウド側の受け口を作ってみる](https://qiita.com/takataka5845/items/b7d129a738b7365cc602)
- 【第2回】[光センサーでArduinoからMacにシリアル通信](https://qiita.com/takataka5845/items/ea7999588c7c9957acd7) 
- 【第3回】[DHT22で温湿度を取得してシリアル送信](https://qiita.com/takataka5845/items/3aff19c560c1457829a5) 
- 【第4回】[Bluetooth通信でセンサーデータをAndroidに送信](https://qiita.com/takataka5845/items/53f2d29991f7b1023949) （このページ）
- 【第5回】[自作アプリでBluetooth接続＆温湿度データ受信](https://qiita.com/takataka5845/items/dc4753bc410dd0daa0d4)
- 【第6回】[クラウド連携でDynamoDBへのPOST＆完結編](https://qiita.com/takataka5845/items/28ba83ef0087b16525b6)

> ※今後の更新もお楽しみに！

---

つづく…（[第5回へ](https://qiita.com/takataka5845/items/dc4753bc410dd0daa0d4)）📡🌡️📲
discord.pyでランニングコストゼロのBOTを作ってみた サーバー設定編

# 前回のあらすじ
https://qiita.com/ak-2302/items/8d36a3fc7bdedbc792ce

discord.pyを用いてbot本体のコードを作成した。

# この記事でやること
実際に作成したプログラムをサーバーにデプロイする。

# Koyebサーバーにアップロードする
今回はKoyebのサーバーにプログラムをアップロードして運用します。

## Dockerの作成
サーバーにどんなライブラリでどのファイルを実行するかを教えてあげる必要があります。そこで、プロジェクトをDockerコンテナとして作成し、dockerfileにいろいろ書いて教えてあげましょう。
### dockerfile
```dockerfile
FROM python:3.13.2

# Set the working directory
WORKDIR /app
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt
```
requireents.txtにはpythonのライブラリのバージョン情報を書き込みます。
以下のコマンドを実行して生成してください。
```shell
pip freeze > requirements.txt
```
### ディレクトリ構造
appフォルダにmain.pyを配置し、その他はroot
## これでできたはずだが…？
現段階でもKoyebにアップロードを済ませれば動くと思うのですが、botの感知するdiscordサーバーにしばらく動きがなくなってしまったときにsleepしてしまいます。
### health checkをする
定期的にbotに対して刺激を与えることで寝ないように起こしてあげます。
### health_check_server.py
```python
from flask import Flask
from rich import console
app = Flask(__name__)

@app.route("/")
def health_check():
    return "OK", 200

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=8000)
```
## ここで問題が
Koyebの無料枠で実行できるのは一つのファイルのみ。
しかし、本体とヘルスチェックを同時に動かさなければ。
### run_all.sh
```shell
# 両方をバックグラウンドで起動しつつ監視

python healthcheck_server.py &
python app/main.py

# discord_bot.py を終了させたらコンテナも終了
```
両方を実行するシェルスクリプトをKoyebの実行対象のファイルにしたら解決しました。

# 書き忘れ
Koyebの設定について書き忘れていました。
* 環境変数の登録(discord bot, github access)
* ポート番号をhealth checkのプログラムと一致させる

これでできるはずです。

# 完成！！
下の画像のようにhealtyになっていたら成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778018/04b8eac9-a5e7-4059-a95a-bf5e5237cbeb.png)

# おまけ
本記事の内容に加えて、チャットで設定を変更する機能を追加しました。
通話通知を出さないように非通知チャンネルを設定してみました。
やってみてね
Astro.jsとbarba.jsが開く新たな可能性

Astroは高速に動作するだけでなく、alpine.js等のVanilla Javascriptもそのまま動くので、Reactのコンポーネントを使用するよりも軽いUIコンポーネントの使用も可能です。今回はそのAstroがウェブデザインの世界と親和性が高い理由について分析します。

## Barba.jsの存在
Barba.jsはVanilla JavaScriptで書かれたライブラリで、Ajaxでページの一部のみを他のHTMLで書き換える等の用途で使用することが出来て、ReactのようなSPAをHTMLとの組み合わせで実現します。なぜこのライブラリが優れているかというと、ページ遷移処理時にいくつものカスタムフックがあり、GSAPのようなダイナミックなアニメーションを実現するライブラリと組み合わせることで、デザイナー目線から見ると面白い、新鮮なページ遷移アニメーションが作れるからです。

実際にbarba.jsとGSAPを組み合わせてるサイトの実例です
https://theshift.tokyo/en/

ウェブデザイナーの憧れ、AWWWARDSで何度も受賞歴があるデザイン会社が製作しています。他のサイトも面白いアニメーションが見られるので是非ご覧下さい。
https://www.awwwards.com/GardenEight/

本日はこの会社のテクニックを盗むべくして、サイトのソースを研究していました。AWWWARDS等の海外のデザイン評価サイトではアニメーションや画像を大量に読み込むサイトを高く評価するけれど、この会社のサイトは画像を多く読みこむわりにわりと軽いことに気づいたからです。

結果的にこの会社の画像読み込みはintercectionObserverを上手く使った独自実装でした。しかし、圧縮しているjavaScriptをprettierでフォーマットしてみると3万行とか書いてある。凄い技術力のデザイナーがいるのだと驚かされました。

## WordPressをバックエンドに使うべきか
この会社の作るサイトのバックエンドはWordPressが使われてることが多いようです。なぜWordPressなのでしょう、最も軽いヘッドレスCMSは沢山あります。そしてAstroの存在があります。Astroはマークダウンを直接レンダリング出来るので、クライアントのページを更新したいという要望に、マークダウンの書き替え方を伝えるだけで済みます。わざわざバックエンドにCMSを導入するコストがある会社ならば良いですが、例えばニュース部分だけど更新したいという中小企業の要望にはこの方法のほうがコストが低いです。

## AstroとBarba.jsの相性の良さ
Astroは全ページをレンダリングします。クライアントで実行するコンポーネントが減れば減るほどSEO的に有利です。そこでBarba.jsやGSAPのアニメーションを組み合わせても、レンダリングは済んでいるデータを読み込んでアニメーションさせるだけなのでBarba.jsというかSPAの欠点のSEO対応が簡単に出来るわけです。Astroはステートレスなフレームワークですが、ウェブアプリケーションを作るような用途でない限りサイト全体のステート管理ライブラリというものは必要ありません。クライアントで動作するJavaScriptを最初にロードさせるようにして、Vanilla JavaScriptでstateを管理すれば良いだけです。

## Astroは今後2年ぐらいで中小案件で多用されるようになるのではないか
多くのサイトにとって重要なのはPVです。PVを稼ぐためにいかにデザインを工夫するかという従属的な役割ですから、サイトが重くなるようなアニメーションは求められていません。しかし、現在、多くのサイトでアニメーションが多用されるようになった背景には、実際のところ動くサイトのほうがユーザーにとって気持ちよくて使いやすい、つまりUXが向上するからでしょう。ところがCSS Animationはそのニードを満たすほどには進化していないので、GSAPかFramerMotionが多く用いられる傾向にあります。そしてこれまでHTMLとCSSでサイトを作ってきた人が取り入れやすいのはVanilla JavaScriptで書かれたGSAPのほうです。そしてフロントエンドフレームワークはUIのコンポーネントの普及と再利用性の点から今後更に需要がますでしょう。最もHTMLとCSSとJavaScriptの組み合わせから移行しやすいのがAstroです。そう、Next.js程の機能が求められるのは大規模な案件だけで、Astroで十分だと多くのクライアントは考えるようになるというのが私の予測です。

私はもっとAstroの可能性、ユーザー認証やECサイトなど、出来ることを学習してみたいです。テンプレートがいっぱい既にあるけれど。
AtCoder ABC401 振り返り(緑コーダーがPythonでABC問題)

## [AtCoder Beginner Contest 401 - AtCoder](https://atcoder.jp/contests/abc401) 振り返り

ABCの3問解答で、レーティングはまたも下がってしまい、ギリギリ緑色に留まれました。あと-2になったら茶色になります。
今回の反省点は、C問題の意味がわからず、入力例3の答えが出なくて時間がかかってしまった。といった感じです。
D問題は丁寧に場合分けすれば解けたようですけど、これもちょっと難しかったですね...。DPとかで解けたのだろうか。

## [A - Status Code](https://atcoder.jp/contests/abc401/tasks/abc401_a)

文字列の先頭の文字が "2" かどうかで判定します。今回は最初の1文字だけを見ればいいので、入力値は整数に変換したりせず、文字列のままにしました。

``` python
S = input()
print("Success" if S[0] == "2" else "Failure")
```

## [B - Unauthorized](https://atcoder.jp/contests/abc401/tasks/abc401_b)

ログイン状態を変数 ```login``` に記録するようにします。
あとは、```S == "private"``` かつ ```login == False``` のときの回数を数えればokです。

``` python
N = int(input())

login = False
count = 0
for i in range(N):
    S = input()
    if S == "login":
        login = True
    elif S == "logout":
        login = False
    elif S == "private" and login == False:
        count += 1
print(count)
```

## [C - K-bonacci](https://atcoder.jp/contests/abc401/tasks/abc401_c)

問題の条件の数式がよくわからず。入力例1がフィボナッチ数列だったため、「単純にフィボナッチ数列を求めるってこと？」みたいな感じで、問題を誤解していた。

問題タイトルが K-bonacci とある通り、K この数を足し合わせた数列にしなければならない。

```
たとえば K = 3 なら
A = [1, 1, 1, 3, 5, 9, 17 ....] となる。
自分の直前の K 個分の数を足す。
```

意味がわかってしまえば簡単で、両面キューを使って K 個分の数をキューに保存するようにすれば良い。キュー内の値の合計は que_total に入れておき、右側に追加したとき・左側から削除したときに、それぞれ足したり引いたりした。


``` python
N, K = map(int, input().split())

que = deque()
que_total = 0
for i in range(N + 1):
    if i < K:
        # 1 をキューに追加
        que.append(1)
        que_total += 1
    else:
        # 次の数はキュー内の数の合計値
        que.append(que_total)
        que_total += que_total

        # 左側の数をキューから削除
        deleted = que.popleft()
        que_total -= deleted
        que_total %= mod

print(que[-1] % mod)
```
Supabaseからリレーションしたデータを取得してみた（React + TypeScript）。

# はじめに
前回の記事でSupabaseのテーブル同士のリレーションを設定しました。
今回はReact + TypeScriptでデータを読み込むところまでの記録です。

### リレーションの設定方法

https://qiita.com/ccc-chi/items/c561d41170e9bacd74d4

## リレーションの種類（ざっくり解説）
まずリレーションの記事で１対１や１対多についてざっくり解説

### 1対多（One-to-many）

https://supabase.com/docs/guides/database/joins-and-nesting?queryGroups=language&language=js&queryGroups=output-format&output-format=table#one-to-many-joins

- **1つの親**に対して、**複数の子**が紐づく
- 例：`projects` と `tasks`
  → 1つのプロジェクトに複数のタスクがある

```text
Project A ─┬─ Task 1
           ├─ Task 2
           └─ Task 3
```

### 1対1（One-to-One）

- **1つの親**に対して、**子も1つだけ**
- 例：`users` と `user_profiles`
  → 1人のユーザーに1つのプロフィールがある

```text
User A ── Profile A
User B ── Profile B
```

:::note info
データとしては**配列で返ってくる可能性が高い**
扱う時は**配列の1番目として使う** のが良さそう
:::


## やりたいこと

Todoアプリのような構成で、以下のようなリレーションを作成しました

- `projects` テーブル（プロジェクト）
- `tasks` テーブル（タスク）
- 1つの project に複数の task が紐づく（1対多）


# データを取得（React + TypeScript）

Supabaseからデータを読み込んで、コンソールに表示するサンプル

### 1対多のリレーション

```tsx
export const getProject = async (): Promise<Projects[] | null> => {
  const { data, error } = await supabase
    .from("projects")
    .select("id,name,tasks(id,title,is_done)");
    
  if (error) {
    console.error("Error:", error.message);
    return null;
  }
  return data;
};
```

### レスポンス例
```
[
  {
    "id": "1",
    "name": "Project A",
    "tasks": [
      {
        "id": "a1",
        "title": "Task 1",
        "is_done": false
      },
      {
        "id": "a2",
        "title": "Task 2",
        "is_done": true
      }
    ]
  },
  {
    "id": "2",
    "name": "Project B",
    "tasks": [
      {
        "id": "b1",
        "title": "Task 3",
        "is_done": false
      }
    ]
  }
]
```

# クラスの型定義
`Tasks` と`Project` を分けて作成し、
**Projectsの中** に`public tasks: Tasks[] = []` として設定できる


```ts
export class Tasks {
  constructor(
    public id: number,
    public title: string,
    public is_done: boolean
  ) {}
}

export class Projects {
  constructor(
    public id: number,
    public name: string,
    public tasks: Tasks[] = []
  ) {}
}
```

## まとめと感想
Supabaseでリレーションを追加しておくことで、データ取得のコードを1つにまとめることができかなりスッキリしました。

他にもINNER JOIN や LEFT JOIN といったものがあるみたいなので、もっと学んで挑戦してみようと思いました！

### 参考記事

https://qiita.com/kitao6/items/7de2e73c3fff82a43da8

# JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼

https://projisou.jp
Supabase でリレーションを設定してみた

# はじめに
supabaseのリレーションを設定するために調べたのでそのまとめです。
SQL初心者の自分が、Supabaseでテーブル同士のリレーション（外部キー）を設定し、React + TypeScriptでデータを読み込みます。

GUIも使えるので簡単に設定できました！

# やりたいこと

Todoアプリのような構成で、以下のようなリレーションを作る

- `projects` テーブル（プロジェクト）
- `tasks` テーブル（タスク）
- 1つの project に複数の task が紐づく（1対多）

## テーブル設計とSQL

リレーション方法を調べるとSQLでの作成方法の記載がありました

https://supabase.com/docs/guides/database/joins-and-nesting

### SQLって？
SQLは、データベースに命令を出すための言葉。
テーブル作成やデータ取得の命令文。

# SQL Editor を使う
supabaseの SQL Editor を使ってテーブルを操作することができる
- Supabaseプロジェクトに入る
- 左のメニューで「SQL Editor」クリック
- コードを書いて「Run」で実行

```sql
create table projects (
  id uuid primary key,
  name text
);

create table tasks (
  id uuid primary key,
  project_id uuid references projects(id),
  title text,
  is_done boolean
);
```

### すでにあるテーブルにリレーションを追加する
あとから外部キーを追加したい場合は `ALTER TABLE` を使う。
```sql
alter table tasks
add constraint fk_project
foreign key (project_id)
references projects(id);
```
これで `tasks.project_id` が `projects.id` を参照するようになる。`fk_project` は制約名で、任意の名前にできる。

### 外部キー制約を削除する

追加した外部キー制約を削除したいときは `drop constraint` を使う。

```sql
alter table tasks
drop constraint fk_project;
```
これで `tasks` テーブルから `fk_project` という外部キー制約が削除される。

# Supabase GUIで追加する

### すでにあるテーブルにリレーションを追加する
手順：
１. Supabaseの管理画面にアクセス
２. `tasks` テーブルの `Edit Table` を選択
３. **Add foreign key relationship** をクリック

![JISOU-PersonalDevApp-Supabase-04-07-2025_06_00_PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3927903/ffcdc03d-57ae-4a80-854b-ab08396f8401.png)

４. 以下のように設定：
   - Select a schema： **public**
   - Select a table to reference to ：**projects**
   - public.tasks：**project_id**
   - public.projects：**id**

![JISOU-PersonalDevApp-Supabase-04-07-2025_06_04_PM (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3927903/691775bd-0ced-496b-a0b5-0bc770c94987.png)

５. 「Save」で保存して完了！

### 外部キー制約を削除する方法（GUI）
手順：
１. Supabaseの管理画面にアクセス
２. `tasks` テーブルの `Edit Table` を選択
３. **foreign keys** の `remove` をクリック
４. リレーションの先頭に **REMOVE** が表示されたら、保存して完了

![スクリーンショット 2025-04-07 18.25.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3927903/b92ab64a-e836-4889-a556-a7039d844c1a.png)


## まとめと感想
- supabaseのGUIからリレーションの追加が簡単にできました！
- SQLもコードがあれば貼り付けるだけなのでGUI操作よりずっと便利
- SQLにどんどん慣れていくと良さそう

### データ取得方法はこちら

https://qiita.com/ccc-chi/items/1f7673079cb5f53d2f34

# JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼

https://projisou.jp
個人的備忘録：RAIDとは？基本的な概念と代表的な構成について、簡単にまとめてみた

## はじめに
RAID（Redundant Array of Independent Disks）は、複数のハードディスクを組み合わせて1つの論理的なストレージとして扱う技術です。

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

信頼性の向上や速度の改善、大容量化を目的として、サーバーやNAS（Network Attached Storage）など幅広く利用されています。

## RAIDの主な目的
- **耐障害性の向上**：ディスクの一部が壊れてもデータを失わないようにする
- **パフォーマンス向上**：複数ディスクで読み書きを分散して高速化
- **大容量化**：複数のディスクをまとめて大きな1台として扱う

**参考文献**

https://www.elecom.co.jp/pickup/column/storage_column/00003/

https://www.pc-koubou.jp/magazine/11623?srsltid=AfmBOorprS49Nay6Hw1mMb81xe9iBWuTBzEpNnOvPAc8n0brEJD9zmWN

## 代表的なRAIDレベル

### RAID 0（ストライピング）
- 特徴：データを複数ディスクに分散して書き込む
- メリット：高速
- デメリット：1台でも故障すると全データが失われる

**参考文献**

https://e-words.jp/w/RAID_0.html

### RAID 1（ミラーリング）
- 特徴：同じデータを複数ディスクに書き込む
- メリット：高い冗長性（1台壊れてもOK）
- デメリット：容量効率が低い（実効容量は半分）

**参考文献**

https://www.iodata.jp/column/nas/050/index.htm#:~:text=RAID%201%E3%81%AF%E3%83%9F%E3%83%A9%E3%83%BC%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%A8,%E4%B8%80%E6%96%B9%E3%81%AB%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82

### RAID 5（ストライピング＋パリティ）
- 特徴：データとパリティ情報を分散して格納
- メリット：速度と冗長性のバランスが良い
- デメリット：最低3台必要。復旧に時間がかかる

**参考文献**

https://atmarkit.itmedia.co.jp/fwin2k/tutor/raiddic/raiddic_03.html

### RAID 6（RAID 5＋ダブルパリティ）
- 特徴：2つのパリティ情報を持つ
- メリット：2台まで同時に故障してもデータ保持可能
- デメリット：最低4台必要、書き込み性能はやや低下

**参考文献**

https://www.fujitsu.com/jp/products/computing/storage/eternus/glossary/raid/09.html

### RAID 10（RAID 1+0）
- 特徴：ミラーリングとストライピングの組み合わせ
- メリット：高性能かつ高い耐障害性
- デメリット：ディスクの使用効率は50%

**参考文献**

https://e-words.jp/w/RAID_10.html#:~:text=RAID%2010%EF%BC%88RAID%201%2B0,(RAID%200)%E3%81%99%E3%82%8B%E6%96%B9%E5%BC%8F%E3%80%82

## ソフトウェアRAIDとハードウェアRAID
- **ソフトウェアRAID**：OSがRAID処理を行う。低コスト
- **ハードウェアRAID**：専用コントローラで処理。高性能だが高価

## まとめ
RAIDは、システムの可用性や性能を高めるために欠かせない技術の一つです。用途や予算、パフォーマンス要件に応じて最適なRAIDレベルを選ぶことが重要です。

個人の備忘録として、RAIDの基本を整理しておきました！
Cognitoの認証処理を用いたシステムの実装について part1

こんにちは。SES企業に勤めている北海道在住のエンジニアです。
参画している現場でCognito(コグニート)を使用する事になったので、勉強の一環として
LraverでCognitoの認証処理を用いたシステムの実装を始めてみました。

# Cognitoとは？
AWSが提供しているAmazon Cognitoの事。モバイルアプリやWebアプリケーションの認証や承認、ユーザー管理・データ同期などができるサービスです。

### ログイン処理でCognitoを用いる主なメリット
##### 1.セキュリティの強化
ユーザーの認証情報はDBではなくてCognito側で管理されます。

##### 2.スケーラビリティ
ユーザー数が増えた場合、DBの場合は容量を増やす対応しなくてはなりませんが
Cognitoの場合は自動でスケールされます。

#### 3.多様な認証手段
一般のログイン画面同様にIDとパスワードを入力して認証や、Facebook、Google、Amazon、Appleなど、外部のソーシャルと連携して認証もできます。

#### 4.ログイン画面の作成が簡単
　Amazon Cognitoには、認証画面（ログイン画面やサインアップ画面）を標準で提供するUI（hosted ui）があり、これをそのまま使えば、HTMLやCSSを手動で作成する必要がありません。
***

### Cognitoを利用する為に覚えた方がいい用語
##### 1.ユーザープール
AWS内の認証を行うサービスです。Cognitoで認証した（サインアップした）ユーザーが登録される箱みたいなイメージでOKです。

##### 2.アプリケーションクライアント 
Cognitoと連携して認証機能を利用するシステムやアプリケーションのこと。今回の勉強では
Laravelのシステムがアプリケーションクライアントになります。

##### 3.クライアントID
アプリケーションクライアントに割り振られるIDで、システムとCognitoの連携に使用します。

##### 4.クライアントシークレット
アプリケーションクライアントに割り振られるパスワードのことです。

##### 5.トークン関係
ユーザーがCognitoでログインした後に、Cognito から3つのトークンが返ってきます。
```言語:トークンの種類
- 5-1.アクセストークン
　ユーザーがアプリケーションに対して認可されたリソースにアクセスする際に使用されます。
 
- 5-2.IDトークン
　ユーザーを識別し、認証されたユーザーの属性情報を提供するトークンです。

- 5.3 リフレッシュトークン
　アクセス・IDトークンの有効期限が切れた際にリフレッシュトークンを使用して再生成できます。
```
##### 6.JWT(ジョット：JSON Web Token)
JSON形式で認証情報を安全に送信する為に使用される標準規格で、アクセストークンとIDトークンはJWT形式でCognitoから返されます。
JWTは下記の3つのパートで構成されています。
```言語:JWTの構成
-1.ヘッダー
JWTの「基本情報」が入ってます。

-2.ペイロード
　認証したユーザーが誰か、どんな権限があるかなどが入ってます。

-3.署名
　JWTが改ざんされていないかをチェックするためのハッシュが入っています。
 ```
 
##### 7.リダイレクトURI(コールバックURL)
Cognitoで認証された後に、ユーザーがリダイレクトされる先のURLのことです
(Cognitoで認証後、システム側でどの画面からスタートするか指定できます)

##### 8.認可コード（Authorization Code)
Cognitoの認証が完了した後に連携したシステム側に返される一時的なコードです。アクセストークンを取得する際に使用されます。リダイレクトURLに認可コードが含まれています。

***
以上が僕が考えたCognitoを利用する為に覚えた方がいい用語になります。

次回(PART2)では実際にLaravelとCognitoのログイン画面をどうやって連携すればいいかを説明していきたいと思います。
Markdownでmathjaxのインラインが使えない時の対処法

<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-mml-chtml.min.js">
</script>
<script type="text/x-mathjax-config">
 MathJax.Hub.Config({
 tex2jax: {
 inlineMath: [['$', '$']],
 displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
 }
 });
</script>

# VScodeでのmarkdown記法
まず、前提としてmarkdownで数式を出力するにはこういうのを使わなければいけない。その上でMarkdown PDFでエクスポートする。
```
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-mml-chtml.min.js">
</script>
<script type="text/x-mathjax-config">
 MathJax.Hub.Config({
 tex2jax: {
 inlineMath: [['$', '$']],
 displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
 }
 });
</script>
```
まあここまではいいでしょう。しかし例えば以下のような構文を使うと数式として認識されなくなる（僕はそうだった）
```
$ \hat a $
```

いや意味が分からん。あらゆるサイトからそのままコピペしただけなのに数式として使えないなんておかしいじゃないか！しかし上記のスクリプトではなく以下のような構文を用いるとうまくいった

```
<script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_CHTML"></script>
<script type="text/x-mathjax-config">
 MathJax.Hub.Config({
 tex2jax: {
 inlineMath: [["$","$"], ["\\(","\\)"]],
 displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
 }
 });
</script>
```
displayと似たような感じにすればうまくいった。これで無理なら他の記事を見るべきだ。私では無理だ
Arduino × AWSサーバーレスで作るIoT温度モニタリングシステム（仮）【第3回】

# DHT22で温湿度を取得してシリアル送信だぁ！

## はじめに

[前回](https://qiita.com/takataka5845/items/ea7999588c7c9957acd7)は、光センサーとタクトスイッチを使って、ArduinoからMacにシリアル通信でデータを送信する仕組みを試してみました。

今回は、**いよいよ本命センサーである「DHT22温湿度センサーモジュール」** を使って、温度と湿度のデータ送信に挑戦しました！

:::note info
この記事は「Arduino × AWSサーバーレスで作るIoT温度モニタリングシステム」シリーズの一部です。シリーズの全体リンクは記事の末尾にまとめてあります！
:::

---

## やったこと

- センサーを光センサーから **DHT22** に変更
- スイッチで送信ON/OFFを制御
- LEDで動作状態を視覚的に確認
- Arduinoからシリアル通信で温湿度をMacに送信

---

## 回路の構成

接続構成は光センサー時とほぼ同じですが、センサーがDHT22に変わっています👇
![回路構成図（DHT22版）](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21269/1daf21dc-c059-49be-92df-5c87348c6535.jpeg)

---

## 動作の様子（動画）

スイッチをONにするとLEDが点灯し、DHT22から取得した温度・湿度データがシリアル通信で送信されます。  
スイッチをOFFにするとLEDが消え、データの送信も止まります。

🎥 動画はこちら：
<iframe width="560" height="315" src="https://www.youtube.com/embed/Z2D-INUFv2E" frameborder="0" allowfullscreen></iframe>

👉 [YouTubeで直接見る場合はこちら](https://youtu.be/Z2D-INUFv2E)

---

## 次のステップ

次回はいよいよ、**このシリアル通信をBluetooth通信に変更**し、  
Android端末で受信できるようにしていきます！

---

## おわりに

「センサーで取得したデータをスイッチで制御しながら送信する」  
という基本構造は完成しました！

いよいよ、通信手段を変えながら、**本番構成（Arduino → Android → AWS）** に近づいていきます。

---

## シリーズ記事一覧

- 【第1回】[AWSでクラウド側の受け口を作ってみる](https://qiita.com/takataka5845/items/b7d129a738b7365cc602)
- 【第2回】[光センサーでArduinoからMacにシリアル通信](https://qiita.com/takataka5845/items/ea7999588c7c9957acd7) 
- 【第3回】[DHT22で温湿度を取得してシリアル送信](https://qiita.com/takataka5845/items/3aff19c560c1457829a5)  （このページ）
- 【第4回】[Bluetooth通信でセンサーデータをAndroidに送信](https://qiita.com/takataka5845/items/53f2d29991f7b1023949) 
- 【第5回】[自作アプリでBluetooth接続＆温湿度データ受信](https://qiita.com/takataka5845/items/dc4753bc410dd0daa0d4)
- 【第6回】[クラウド連携でDynamoDBへのPOST＆完結編](https://qiita.com/takataka5845/items/28ba83ef0087b16525b6)

> ※今後の更新もお楽しみに！

---

つづく…（[第4回](https://qiita.com/takataka5845/items/53f2d29991f7b1023949)へ）📡🌡️📲
🚀 Kubernetes上でVMを動かしてみた

# 🚀 Kubernetes上でVMを動かす？KubeVirtで“仮想マシン再発見”してみた話

## 🧠 はじめに

Kubernetesといえば「コンテナを動かすためのオーケストレーター」。
しかし最近は、そのKubernetes上で仮想マシンを動かすことが注目されています。

その技術的中心にあるのが KubeVirt です。

本記事では、KubeVirt を使って Kubernetes クラスタ上で VM を起動し、cloud-init を使って Ubuntu VM に nginx を自動展開するところまでをわかりやすく紹介します。

## 🌍 なぜ Kubernetes 上で VM？

"仮想マシンはもうコンテナで置き換えられる"と思われがちですが、実際の現場はそんなに簡単ではありません。

以下のようなケースでは VM が必須です：

🛠 レガシーな商用ソフト (systemd 依存や特定ライブラリ必須)

📆 特定OS上でしか動作しないアプリケーション

🧪 研究やテストでフルOS環境が欲しい

🔐 コンテナでは保証できないセキュリティ・カーネル管理

🥉 KubeVirtとは？

KubeVirt は Kubernetes の CRD (独自のリソース)を使って、仮想マシン (VM)を Pod のように操作できるようにする拡張機能です。

内部的には libvirt + QEMU + Kubernetes API を統合しています。

#### 特徴

仮想マシンを YAML で管理

CNI/ストレージなど Kubernetes の基盤技術を残らず使用

Pod と同じようにスケジュールされる

## 🔧 KubeVirt の実装手順

#### 1. オペレーターのインストール
```
kubectl create -f https://github.com/kubevirt/kubevirt/releases/latest/download/kubevirt-operator.yaml
kubectl create -f https://github.com/kubevirt/kubevirt/releases/latest/download/kubevirt-cr.yaml
```

#### 2. Ubuntu VM (nginx付き) のデプロイ
```
vim kubevirt-vm.yaml
```
```
apiVersion: kubevirt.io/v1
kind: VirtualMachine
metadata:
  name: ubuntu-vm
  namespace: default
spec:
  runStrategy: Always
  template:
    metadata:
      labels:
        kubevirt.io/domain: ubuntu-vm
    spec:
      domain:
        devices:
          disks:
            - name: containerdisk
              disk:
                bus: virtio
            - name: cloudinitdisk
              disk:
                bus: virtio
        resources:
          requests:
            memory: 1024Mi
            cpu: "1"
      volumes:
        - name: containerdisk
          containerDisk:
            image: quay.io/containerdisks/ubuntu:22.04
        - name: cloudinitdisk
          cloudInitNoCloud:
            userData: |
              #cloud-config
              users:
                - name: ubuntu
                  plain_text_passwd: ubuntu
                  lock_passwd: false
                  sudo: ['ALL=(ALL) NOPASSWD:ALL']
                  shell: /bin/bash
              ssh_pwauth: true
              disable_root: false
              chpasswd:
                expire: false
```
```
kubectl apply -f kubevirt-vm.yaml
```
ポイント：cloud-init を使ってユーザー/パスワードを作らないと、コンソールからはログインできません。

#### 3. VMの確認 & 接続

##### 1. ステータス確認
```
kubectl get vm -n default
kubectl get vmi -n default
```

##### 2. virtctl コマンドのインストール
```
VERSION=$(curl -s https://api.github.com/repos/kubevirt/kubevirt/releases/latest | grep tag_name | cut -d '"' -f 4)
curl -L -o virtctl https://github.com/kubevirt/kubevirt/releases/download/${VERSION}/virtctl-${VERSION}-linux-amd64
chmod +x virtctl
sudo mv virtctl /usr/local/bin/
```
##### 3. コンソール接続
```
virtctl console ubuntu-vm -n default
```
そして、次のようにログイン:
```
ubuntu login: ubuntu
Password: ubuntu
```
成功すると Ubuntu のテキストログインに入れます。

#### 📖 参考リンク

KubeVirt 公式ドキュメント

NGINX公式: Content Caching

#### ✍️ おわりに

KubeVirt は Kubernetes の基盤技術の利点を保ちつつ、VMの音も好きも取り入れられる便利な技術です。

例えば CDN/エッジ計算/レガシー資産を活用したインフラなど、Pod のみでは難しかった環境構築が、KubeVirt によって Kubernetes 上で簡単に実現できるようになります。さらにknative等と組み合わせれば、kubernetesでECSのようなクラウド基盤の構築も実現が可能となります。