OmniAICreator/Qiita-1.07M huggingface dataset:
【PowerApps】メール文作成アプリを作ろう（後編）

# メール文作成アプリを作ろう

前編では **AI ハブでカスタムプロンプト** を作成しました。  
後編では、作成したプロンプトを活用して **メール文作成アプリ** を作る手順を説明します。

---

## **完成イメージ**
まず、作成する画面のイメージは以下の通りです：

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2524942/bdcf04ac-72d0-53b3-7c59-74b7e2a70b73.png)


---

## **1. プロンプトをアプリに追加する**

PowerApps の **データの追加アイコン** から、前編で作成した「カスタムプロンプト」を追加します。

1. 左メニューの「データ」を選択。  
2. 「データソースの追加」から、**メール文作成プロンプト** を検索して追加。  

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2524942/9ca0840d-b839-8c3e-6567-2abaccd6f343.png)


---

## **2. シチュエーション入力とボタン設定**

### **シチュエーション入力欄**

「シチュエーション」欄には **SITUATION** という変数を設定します。  

1. 各ボタンの「OnSelect」に、以下の関数を設定します：  
   ```plaintext
   Set(SITUATION, "退任")  
   ```
   ボタンを押すことで、該当する **シチュエーション** テキストが変数に格納されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2524942/3fc73036-fed9-8b4e-073c-fda255588353.png)

---

## **3. 文章作成ボタンの設定**

「文章作成ボタン」には、**Output** という変数にプロンプトの出力結果を格納する設定を行います。

### **OnSelect 設定**
ボタンの `OnSelect` プロパティに以下のコードを入力します：

```plaintext
Set(Output, メール文作成プロンプト.Predict(TextInputCanvas1_2.Value, TextInputCanvas1.Value, TextInputCanvas1_1.Value))
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2524942/fcdf66dc-d2a7-1a2b-104c-ce2b69336795.png)

### **Predict関数の引数**
- **TextInputCanvas1_2.Value**: シチュエーション  
- **TextInputCanvas1.Value**: あなたの名前  
- **TextInputCanvas1_1.Value**: 得意先担当者の名前  

---

## **4. 出力結果を表示する**
右側のメール案表示エリアには、**Output** 変数の値を表示するようにします。

### **設定内容**
`Output.Text` を表示するように設定します。

これで、ボタンを押すと **メール文が自動生成** されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2524942/11b1c0d0-08e8-ad26-a994-55e394aabaae.png)

---

## **5. 動作テスト**
最後に「**文章作成ボタン**」をクリックして動作を確認しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2524942/b6758970-90ee-614b-b28c-f7baa928ae38.png)

---

## **6. トラブルシューティング**

### **出力結果が正しくない場合**
`Predict` 関数の入力順が間違っている可能性があります。  
`Predict` の後に **`(`** を入力すると、順番ガイドが表示されますので、その順番に従いましょう。

---

## **応用: 精度を上げる方法**
今回のアプリは直接メール文を生成しましたが、以下の **2段階アプローチ** も可能です：

1. **「メール文を作成するプロンプト」** を生成。  
2. そのプロンプトを元に **最終的なメール文を生成**。

この方法なら、プロンプトの精度確認・調整を行いながら、より高品質なメール文を生成できます。

---

## **まとめ**
これで **PowerApps と AI プロンプト** を活用した **メール文作成アプリ** が完成しました！  
AI と連携することで、日々の業務を大幅に効率化できます。

- **前編**：AI ハブでカスタムプロンプト作成  
- **後編**：メール文作成アプリへの実装  

今後も AI の活用を通じて、さまざまなアプリを作成してみてください！
オープンソース化されたVZエディタをブラウザ上で動かしてみる

# はじめに
この記事は、[オープンソース Advent Calendar 2024](https://qiita.com/advent-calendar/2024/opensource) の2日目の記事となります。

[MS-DOS用エディタの名作「VZ Editor」がオープンソースソフトウェアに](https://gihyo.jp/article/2024/11/vz-editor)というニュースが飛び込んできました。

これは動かしてみたい！

# ブラウザ上で動かしてみる

### ダウンロードするもの
1.VZのFDイメージ
https://github.com/vcraftjp/VZEditor/blob/main/FDImage/VZ_IBM.BIN

![スクリーンショット 2024-12-15 22.25.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/0cbedc52-d1d0-290a-943e-e905a7da5f3c.png)
このボタンでダウンロード。

2.FreeDOS
https://www.freedos.org/download/
ページ右下あたりの
![スクリーンショット 2024-12-15 22.29.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/0f75962a-a24f-bade-c1d8-7c2dd35bf3fd.png)
のボタンでダウンロード。


### エミュレータサイトへ
こちらのページに行きます。

https://www.kero2.org/js/IBM-PC.htm

AドライブにダウンロードしたFreeDOSの以下のファイルを
![スクリーンショット 2024-12-15 22.32.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/49c52bb9-bb59-5554-6740-1924503f5e1e.png)

BドライブにダウンロードしたVZのFDイメージをマウントします。
![スクリーンショット 2024-12-15 22.33.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/6de71bec-5e84-6450-b18e-5879f9d7edeb.png)

# いざ起動！
リセットボタンを押します
![スクリーンショット 2024-12-15 22.35.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/053e7c7f-4d63-e884-a25d-3b65988e597d.png)

![スクリーンショット 2024-12-15 22.37.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/330b8f05-03d5-b120-187c-f3baaeaf3c39.png)

Enterキーを押します
![スクリーンショット 2024-12-15 22.38.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/8df80888-3585-21a7-3d11-ed0310845f4e.png)
Nを押してEnterを押します

DOSが起動しました。
b:
dir
と入力します。
何かキーを押します。
![スクリーンショット 2024-12-15 22.41.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/caff09e8-6d0d-5527-79ef-098f0fd5b14c.png)

VZ.BATがありますね。

VZ
と入力します。

![スクリーンショット 2024-12-15 22.42.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/530c6dde-e2b1-74b1-79e6-9cd000288151.png)

VZが起動しました！。

適当なファイル名を入れます

![スクリーンショット 2024-12-15 22.47.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/1d7ed489-82b7-0168-1dea-c02b7bc0a39c.png)

Yを入力してEnterを押します。
![スクリーンショット 2024-12-15 22.48.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/cf0c5f80-a44a-5bdf-a6af-4ce81ab083b9.png)

これは昭和世代には、懐かしいですね。

![スクリーンショット 2024-12-15 22.52.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/7da05974-2c1f-9941-990d-9325e0beb516.png)

タイムスタンプが1993年　気がつけば３０年。
オープンソースありがとう。
miseで管理できるCLIツールが爆増しました

# miseで管理できるCLIツールが爆増しました
## 要約
- miseが扱えるその他のパッケージマネージャーにaquaというCLIマネージャーが追加されました
- aquaにはインストール可能なCLIツールを管理する公式レジストリ`aqua-registry`を保有しています
- aqua-registryに登録されているパッケージは1600を超えており、それらをmise経由でインストールできます

## miseが扱えるパッケージマネージャーにaquaが追加されました
mise v2024.11.8より、miseが扱えるパッケージマネージャーにaquaが追加されました。

https://github.com/jdx/mise/releases/tag/v2024.11.8

これによりnpmやcargoでインストールするCLIツールと同様に、aquaが管理しているaqua-registryからパッケージを導入することができます。

```bash
mise:~# mise use -g aqua:BurntSushi/ripgrep
mise aqua:BurntSushi/ripgrep@14.1.1 ✓ installed                                                               mise ~/.config/mise/config.toml tools: aqua:BurntSushi/ripgrep@14.1.1
mise:~# rg --version
ripgrep 14.1.1 (rev 4649aa9700)
```

## aquaが使えると何が嬉しいのか

aquaはGo言語製のCLIツールマネージャーです。
asdfと異なる点として、aquaが使用するCLIツールの公式レジストリである`aqua-registry`を保有しています。
`aqua-registry`はaqua公式がメンテンナンスしているため、「パッケージをインストールするために外部プラグインをインストールする」という作業を減らすことができます。

https://github.com/aquaproj/aqua-registry

::: note
他にもRenovateと連携して、自動でCLIツールのバージョンをアップデートしてくれるという機能もあります。とても便利です。
:::

aqua-registryでは日々mise, asdf, aquaのプラグイン数を数えて報告するissueがあります。

https://github.com/aquaproj/aqua-registry/issues/19792

記事執筆時点(2024年12月15日)のmise, asdf, aquaのパッケージ数は以下のとおりです。
```
mise: 737
asdf: 821
aqua: 1657
```


圧倒的な数ですね。仮にmiseとasdfのパッケージが被ってなく、それらがaquaに入っているとしても、1657 - (737 + 821) ≒ 100くらいのCLIツールがaqua-registryに登録されています。
実際はこれ以上のツールがaqua-registryにあるため、miseで管理できるツールが大量に増えたと言えるでしょう。

## CLIツールがaquaにあるか調べる
これだけ大量のCLIツールがあると、自分が使いたいCLIツールがaqua-registryに既にあるか気になりますよね。
そういう場合には`aquaproj/aqua-registry`の`registry.yaml`を確認すると良いです。
ただし、ファイルが巨大なので`aquaproj/aqua-registry`の`pkg`ディレクトリからお目当てのパッケージを探すのも良いでしょう。

https://github.com/aquaproj/aqua-registry/blob/main/registry.yaml

## 終わりに
miseが扱えるパッケージマネージャーにaquaが入ったことで、1600以上のパッケージをmiseで管理することができるようになりました。

これの応用として、デバッグ用のツールやビルドで使うツールを`mise.toml`で管理することで、開発者に`mise install`を叩いてもらうだけでビルドツールを導入してもらえることになります。
ビルド時に環境依存なパッケージが足りなくてビルドができなくなることや、デバッグ時のツールが不足していてCLIツールのインストール方法から教えるなどの手間が省けるかと思います。
開発環境を標準化するという意味で非常に嬉しい機能追加です。

それでは、よりよい開発環境のバージョン管理ライフをお過ごしください。
VsCode 拡張機能を入れ忘れてた

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2680230/fbf0911f-9865-7e1f-bf7e-cde347d2c4b1.png)

# はじめに
大体の開発は VsCode を利用してます。VsCode で Dev Container を利用する事が多いため、VsCode の拡張機能などは Dev Container で管理しています。
そのため、サクッと Dev Container を利用せずに自身の環境でそのまま開発してしまうと、「いつも入っている 
 VsCode 拡張機能が無い。。。」って事になります。
 と、言うか忘れて、拡張機能が入ってると思って開発してしまうので注意が必要です。

今回は、上記ように忘れてしまったため、PC を新しくした際に忘れそうな VsCode の拡張機能をメモします。

# VsCode 拡張機能

|拡張機能 |概要 |備考 |
|---|---|---|
|[Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) |スペルチェッカー |- |
|[EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig) |タブなどのエディタ共通設定 |- |
|[ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) |静的コード解析 |- |
|[Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) |コードフォーマッター |- |
|[Indent-Rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow) |インデントをカラー表示 |もう標準でも良いかも |
|[Japanese Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.VSIntelliCode) |日本語化 |好みで |
|[YAML](https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml) |YAML表示 |- |
|[Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one) |Markdown表示 |- |
|[Markdown Preview Mermaid Support](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid) |Markdown Mermaid表示 |- |
|[Mermaid Editor](https://marketplace.visualstudio.com/items?itemName=tomoyukim.vscode-mermaid-editor) |Markdown Mermaid表示 |これ不要かも |
|[markdownlint](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint) |Markdown Checker |- |
|[TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight) |TODO強調 |好みで |
|[Todo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree) |TODO一覧表示 |- |
|[Trailing Spaces](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces) |空白表示 |Prettierがあれば不要かも |
|[vscode-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons) |アイコン表示 |もう標準でも良いかも |

※各言語系、コンテナ系以外の忘れそうな拡張機能のみ記載してます。

# おわりに

改めて見直すと、重複している拡張機能がありそうです。。。
たまには見直す事が大事ですね。

各言語系、コンテナ系も含めたら結構数になりますね。どこかまとめてる Qiita を探したいと思います。

---

**参考（感謝）**

- [Visual Studio Code](https://code.visualstudio.com)

- [Devcontainer(Remote Container) いいぞという話 ~開発環境を整える~](https://qiita.com/yoshii0110/items/c480e98cfe981e36dd56)
- [VSCode Dev Containersでユーザーが追加した拡張機能を保持](https://zenn.dev/greendrop/articles/8bf88aad068f7d)
- [おすすめVSCode拡張機能11選と、実はもう不要なもの4選](https://itokoba.com/archives/9850#toc6)
toioのおさんぽ

# はじめに
私たちのチームはITコンテストでの入賞を目指して一年間活動を続けました。
結果として、**ヒーローズリーグ2024**というコンテストへ<font color="Red">**toioのおさんぽ**</font>という作品を出展しております。
ここではその取り組みや実績、今後の展望をまとめていきます。


# 企画段階
まず、ヒーローズリーグの過去の受賞作品を分析したところ、**スマホやPCで動くアプリよりもガジェットを用いた作品**の方が<font color="Red">**受賞率が高い**</font>という結論に至りました。
これはヒーローズリーグの審査基準に相性がいいのがスマホやPCの画面上で動くアプリよりも、より動的なガジェット作品だからではないかと考えています。
#### 審査基準
・**チャレンジ度**<br>　必要なのは「ぶっとび度」「アイデア」「変化球」「独創性」
　**誰もが思いつかない作品を！**

・**ギーク度**<br>　必要なのは「コダワリ度」「完成度」「突き抜け度」
　**誰もがすごいと思う作品を！**

・**ワクワク度**<br>　必要なのは「体験」「デザイン」「表現方法」
　**誰もが触ってみたいと思う作品！**

#### やりたいこと
入賞を目指してガジェットを使用すると決まった後は作品の方向性を決めていきました。

- <INS>**世界観やストーリー</INS>**<br>ジブ〇作品のような世界観の箱庭<br>庭園を管理したり散策するロボット

- <INS>**実現したいこと</INS>**<br>自動で動いて鑑賞できる作品

- <INS>**使用するガジェット**</INS><br>チームで調べた中からtoioを選定
# toioとは
使用したガジェットはtoioという、**プログラミング的思考を養うためのキューブ型ロボットトイ**です。

<img alt="hogehoge" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530030/d4d0c1a0-e220-a799-183e-1a8a676144e2.png" width="30%">

本来はビジュアルプログラミングが使われることが多いのですが、今回は**toio SDK for Unity**を使用することで<font color="Red">自由度を高め</font>ました。
また、**Micro:bit**を併せることで<font color="Red">より多彩な動きや表現の実現</font>を目指しました。

# 作品の投稿 [toioのおさんぽ]
本作品で出来ることを簡単にまとめてみました。
#### 機能一覧

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530030/6fe5cb23-0835-3ee0-ed96-e98bcbfa0f81.png)

それぞれの機能は動画にまとめてあります。
実際にロボットがジオラマで動いている様子と合わせてご覧ください。
<iframe width="400" height="300" src="https://www.youtube.com/embed/T1T6_kKh74g" title="toioのおさんぽ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

# 実績について
今回は初めて挑戦することばかりでしたが、学びの多い活動となりました。
一年間の活動を通じて得た実績について簡単にまとめてみたのでご覧ください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530030/10d3afd0-c5b2-decc-d56a-88e1a2d45cf8.png)

尚、実績2の**スクラム開発**は主に<font color="Red">**アジャイル開発で用いられる開発手法**</font>ですが、現場で実践しているメンバーの発案で今回の活動に取り入れました。

:::note info
スクラム開発の詳細は該当メンバーが[こちら](https://qiita.com/sato_626/items/eb4a14396d62575542f1)の記事にまとめているので合わせてみていただけますと幸いです。
:::

#### 作品投稿ページ
実際の作品はProtoPediaに掲載済みです。
こちらも気になったら是非見てみてください。

https://protopedia.net/prototype/6150

# 今後の展望
最後になりますが、今回は目標としていたコンテストの入賞は実現出来ませんでした。

そのため、また来年リベンジする予定です。
toioの開発を通じて技術力のアップや更なるチャレンジを目指すとともに、来年開催予定のヒーローズリーグ2025に作品を出展、今度こそ入賞できるように精進していきます！
【tailwindcss】configの設定メモ

## heightを12分割する
```js
/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      minHeight: {
        section: "960px",
      },
      height: {
        "1/12": "8.33%",
        "2/12": "16.67%",
        "3/12": "25%",
        "4/12": "33.33%",
        "5/12": "41.67%",
        "6/12": "50%",
        "7/12": "58.33%",
        "8/12": "66.67%",
        "9/12": "75%",
        "10/12": "83.33%",
        "11/12": "91.67%",
        "12/12": "100%",
      },
    },
  },
  plugins: [],
};

```
Github ActionsとArgoCDってどう違うの

# はじめに
「ArgoCDって結局なんのためのツールなんだろう？」
自分が初めてArgoCDの名前を聞いてさっくりネットで調べた時に思ったことは上の疑問でした。自分にとってはCDツールならGithub Actionsでいいじゃないかと思っていたからです。
実際にGithub Actionsでコードをビルドしてテストを実行、Kubernetesにデプロイすることは可能です。だからこそなんで専用ツールが必要なのかわからなかった自分なりに調べたことをここにまとめていこうと思います。

# Github Actionsでできること
前述したようにGithub Actionsはコードのビルドからテスト、デプロイまでを自動化できるCI/CDプラットフォームです。具体的には以下のようなことができます。

- 柔軟なワークフロー定義
    - Github Actionsではyamlファイルでワークフローを定義でき、pushやpull requestをトリガーにイベントを実行できる
- 簡単に組み込める豊富なアクション
    - github marketplaceに既存のアクションがあり、それを参考にして簡単に処理を組み込める
    - 環境変数やシークレットを使って開発と本番など環境分岐したデプロイアクションなども可能

これだけ聞くと単純なデプロイ程度はGithub Actionsで事足りそうな気がしてきます。
しかし、実際の業務でGithub Actionsのみを使用すると色々足りない部分が生じてくるのです。

- 環境の状態把握
Github Actionsではデプロイの実行結果等は分かりますが、実際にアプリケーションが動いているか、今どうなっているかをモニタリングできません。これではプロダクトの監視に支障が出てしまいます。また、Github Actionsを介さずクラスタに変更を加えたことを検知できず、これはアプリケーションの動作だけではなくセキュリティ上の問題にもつながってしまいます。
- クラスタ間の一元管理
実際の業務上では一つではなく複数のクラスタを管理することもあります。Github Actionsではそれぞれのクラスタに関して個別にワークフローを実行する必要があり、管理が難しくなります。

# Argo CDでできること
Argo CDは上記の問題点を補えます。Argo CDはGithub Actionsでは対応が難しい継続的な状態管理、環境の一貫性という課題に特化したソリューションを提供できます。

- 環境の一貫性
単一のArgo CDインスタンスから複数のクラスタを一元的に管理できます。クラスタごとの設定はGit上でディレクトリを分けることで管理することができます。

- 継続的な状態管理
Argo CDは継続的にクラスタの状態を監視し、Gitで定義された最新状態との差分を検知します。また、例えば`kubectl edit`等で無理やり書き換える変更があった場合にも検知を行います。そしてその内容がWeb上で視覚的に表示されるため、アプリケーションの動作確認のコストが軽くなります。
また、デプロイの進行状況をリアルタイムで確認することができ、問題が発生した場合の自動ロールバック機能も存在します。

ただ、Argo CDはあくまでCDに特化したツールであり、CIプロセスに関してはGithub Actionsで行うしかありません。

# 結論
正直個人開発レベルならGithub Actionsで事足りるのかなと自分は思っています。しかし、企業規模になり保守運用等を行う場合にはArgo CDを導入することで運用の効率化とプロダクトの質の向上に貢献できるのです。運用上の安全性を担保するにはGithub Actionsだけでは役不足です。
あくまでどちらか一つではなく、Github ActionsとArgo CDは得意分野が異なる補完的なツールと言えるのではないかと思います。これらを組み合わせて安全なCI/CDパイプラインを作るのが今のクラウドネイティブ環境に向いているのではないかと自分は思っています。
VMware 製品の最新のアイコンはどこからダウンロードできる？？

## はじめに

VMware 製品のアイコンは、Broadcom による買収前は、[VMware Brand Portal](https://www.vmware.com/brand/portal.html) から、必要なトレーニングを完了後ダウンロードが可能でした。
現在、該当の URL にアクセスをするとページがなくなってしまっており、ダウンロードができなくなっております。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/441095/d497363d-c04d-2714-3afa-c035cdf05133.png)

今回、アイコンのダウンロード方法をまとめてみました。

## VMware 製品のアイコン

VMware 製品のアイコンとは、以下のような vSphereや、vSAN、NSX、VCF などを指しています。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/441095/2927e870-528a-23eb-0f16-a244db2c5a94.png" width=30%>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/441095/f1bae12a-8473-51ca-5d6f-211c69f7c820.png" width=50%>


## 最新のアイコンやロゴのダウンロード方法

1. まず、[Broadcom Partner Portal](https://partnerportal.broadcom.com/web/partner-portal) にログインします。
    もし Partner Portal にアクセス権がない場合は、登録を行う必要があります。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/441095/bb41f7ed-30c6-14d3-d910-d7f45a0c8562.png)
    
    Partner Portal にアクセス権はあるけれども、ログインがうまくいかない場合は、SB C&S さんの[ガイド](https://licensecounter.jp/vmware/information/notice/2024/04/011960.html)が参考になるかもしれません。

1. 最初の画面で ”VMware by Broadcom” の **Learn More** をクリックします。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/441095/535f2cd9-59fe-5bae-c31d-420af40cb191.png)

1. 左ペイン一番下の "Quick links" から **VMware Brand Guidelines** をクリックします。
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/441095/c86586a2-871b-374a-9c6a-e5d8b08c92da.png" width=37%>

1. ダウンロードされた PDF ファイルの中に **VMware by Broadcom Brand Box Folder** のリンクがあるのでクリックします。
1. **Brand Elements** のフォルダ配下に様々なマテリアルがあるので必要なものをダウンロードします。
    Product Icons フォルダ: 各製品のアイコンをダウンロードできます。
    Logo フォルダ: VMware by Broadcom ロゴなどダウンロードできます。
    その他も複数のフォルダがあります。

## まとめ
VMware 製品の最新のアイコンダウンロード方法をまとめてみました。
一度わかってしまえば簡単ですが、情報がないとなかなか辿り着けないと思いますので、参考になれば幸いです！
【小しくじり】どうして32bit版のTerraformをインストールしてしまったんだろう?

# 事象
- TerraformにNewRelicの[Synthetics](https://registry.terraform.io/providers/newrelic/newrelic/latest/docs/resources/synthetics_monitor#import)をimportしようとした際に↓のエラーが発生
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2774397/3bd5dfcf-3572-3473-1e75-97bdd4afdfdf.png)


# 原因
- ローカルのTerraformが32bit版であったためでした。（我ながら「なんで？」という。。）
- エラー内容も32bit版で処理できる数値の範囲を超えてしまっているから無理っすという内容に見えますね
- こちらGithub上にも[Issue](https://github.com/newrelic/terraform-provider-newrelic/issues/2256)があがっておりました。

# 対応
- 普通に64bit版に移行しましょう。。
- ↓赤枠の方です。。[公式サイトより](https://developer.hashicorp.com/terraform/install#windows)
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2774397/1ce4fe3f-933d-1456-9365-d79a11fd6fcf.png)
- ちなみに以下のコマンドでどちらのVerかを確認できます。
```terraform:確認コマンド
terraform -v

出力例：
PS C:\hogehoge> terraform -v
Terraform v1.10.0
on windows_amd64 　　　　　　　←左記は記載の通り64bit版。32bit版だと[windows_386]と表示されます。
```
# まとめ
- ド素人の凡ミスですが、参考になれば幸いです。
- 余談ですが、タイトルの元ネタは東方神起です。（は？）
Next.jsのプロジェクト構造 ~ Pages Router ~

# はじめに
Next.jsを触ったことがあるものの、基礎的な部分がよくわかっていないまま開発をしていたので、改めて一から勉強し直すためにまとめていこうと思いました。

今回はNext.jsのプロジェクト構造についてです。

# プロジェクト構造
今回まとめているのは、Pages RouterのNext.js ver14の内容です。

## Top level folder
- `public`：静的なファイル（画像、フォント、スタイルシート等）を置く
- `src`：プロジェクトのソースコードを整理するために任意で使用されるディレクトリ
- `pages`：Pages Router用。srcの中にある場合もある

## Top level file
- `next.config.js`：Next.js の設定ファイル
- `package.json`：プロジェクトの依存関係とスクリプト
- `instrumentation.ts`：OpenTelemetry等、アプリケーションのパフォーマンスや動作を計測・監視するためのコードを記述するファイル
- `middleware.ts`：ミドルウェアを設定するファイル
- `.env`：環境変数
- `.env.local`：ローカル環境変数
- `.env.production`：本番環境変数
- `.env.development`：開発環境変数
- `.eslintrc.json`：ESLintの設定ファイル
- `.gitignore`：git管理から外すファイルを記載するファイル
- `next-env.d.ts`：Next.js の TypeScript 宣言ファイル
- `tsconfig.json`：TypeScript の設定ファイル
- `jsconfig.json`：JavaScript の設定ファイル

## pagesディレクトリ内
### ファイル
- `_app` `.js|.jsx|.tsx`：Next.js のカスタム App コンポーネントを定義する。これによって、全てのページに共通のレイアウトや状態管理、グローバルなスタイルを適用できる
- `_document` `.js|.jsx|.tsx`：Next.js のカスタム Document コンポーネントを定義する。これによって、サーバーサイドでレンダリングされる HTML ドキュメントの構造をカスタマイズ（`<html>`や`<body>` タグのカスタマイズ、メタタグの追加、カスタムフォントの読み込み等）できる
- `_error` `.js|.jsx|.tsx`：アプリケーション内で発生するエラー（404エラーや500エラーなど）に対してカスタマイズされたエラーページを表示できる
- `404` `.js|.jsx|.tsx`：404 エラーページ
- `500`	`.js|.jsx|.tsx`：500 エラーページ

### ディレクトリ構成
#### Routes
```
パターン1
pages/
├── index.js        // ホームページ (/)
├── about.js        // ネストされたページ (/about)
└── contact.js      // ネストされたページ (/contact)

パターン2
pages/
├── index.js        // ホームページ (/)
├── about/
│   └── index.js    // ネストされたページ (/about)
└── contact/
    └── index.js    // ネストされたページ (/contact)
```

#### Dynamic Routes
```
パターン1
pages/
├── [user]/
│   └── index.js    // 動的ルートセグメント (/user1, /user2)
├── [...slug]/
│   └── index.js    // キャッチオールルートセグメント (/a, /a/b, /a/b/c)
└── [[...slug]]/
    └── index.js    // オプションキャッチオールルートセグメント (/, /a, /a/b, /a/b/c)

パターン2
pages/
├── post/
│   └── [id].js     // 動的ルートセグメント (/post/1, /post/2)
├── docs/
│   └── [...slug].js // キャッチオールルートセグメント (/docs/a, /docs/a/b, /docs/a/b/c)
└── docs/
    └── [[...slug]].js // オプションキャッチオールルートセグメント (/docs, /docs/a, /docs/a/b, /docs/a/b/c)
```

# 参考

https://nextjs.org/docs/14/getting-started/project-structure
Raspi上でずんだもんにしゃべってもらう方法

この記事は、「IoTLT Advent Calendar 2024」の 16日の記事です。

Raspi上で音声合成をしたかったので、Voicevoxを使ってずんだもんにしゃべってもらいました。
同様のことをしたい人のため、要点だけに絞って説明します。

![スクリーンショット 2024-12-15 223036.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/4bf2b68b-8c51-c4bb-9b5d-4d3df9558e72.png)


ちなみに、今回の使用環境は下記となります。

## 使用環境：
Hard: Raspberrypi 5 
OS: Ubuntu24.04 LTS

まずは仮想環境を構築します

## Dockerのインストール

以下コマンドでインストールして、ユーザー権限で実行できるようになります。

```shell
$ curl -fsSL https://get.docker.com -o get-docker.sh
$ sudo sh get-docker.sh
$ sudo gpasswd -a $USER docker
$ newgrp docker
```
スクリプト実行後は少し時間がかかりますが、コマンドが完了するまで少し待ちます。

### Dockerの動作確認

Dockerが正しくインストールされていることを確認するため、Docker上のHello worldしてみます。

```shell
$ docker run --rm hello-world
```

## Voicevox のサーバを起動する

次に`Docker`コンテナを使用してVoicevoxのサーバを起動します。
以下のようにコンテナを起動すればOKです。

```shell
docker pull voicevox/voicevox_engine:cpu-ubuntu20.04-latest
docker run --rm -p '127.0.0.1t:50021:50021' voicevox/voicevox_engine:cpu-ubuntu20.04-latest
```
Dockerイメージは結構大きいので、コーヒーでも飲みながら完了するまで待ってください。
Docker内のVoicevoxサーバが起動したら、別のターミナルを起動して、下記コマンドで音声ごうせいをおこないまｓ

起動したサーバに対して
1. 音声合成用のクエリ作成（JSONファイル作成）し、
2. 生成された合成音声の出力(WAVEファイル作成)を行い
3. 合成された音声をaplayコマンドでスピーカに出力します

```bash
$ curl -s -X POST "localhost:50021/audio_query?speaker=1" --get --data-urlencode "text=こんにちは、世界" > query.json \
&& curl -s -H "Content-Type: application/json" -X POST -d @query.json "localhost:50021/synthesis?speaker=1" > audio.wav \
&& aplay audio.wav
```

これでRaspiにつながったモニター・スピーカからずんだもんの声が聞こえます。
スピードは上記コマンドを打って体感で２秒くらいになりました。

## おわりに

`Raspberry Pi 5`からDocker上のVOICEVOX APIにアクセスして、音声合成を行うことができました。
【Cisco PacketTracer】自主学習兼環境構築

# 1.目的
自主学習兼環境構築を実施することでPacketTracerで何を作成するか迷っている初学者の参考になる記事を作成する

# 2.環境
・Cisco Packet Tracer 8.2.2

# 3.前提
Cisco Packet Tracerは事前にインストールしてあること

https://www.netacad.com/courses/getting-started-cisco-packet-tracer?courseLang=en-US

# 4.本記事でのゴール
・PCとサーバー間で疎通ができること

# 5.構築
用意するもの(Cisco PacketTracer内で)
・PC1台
・サーバ1台
・Copper Cross-Over 1本

PCやサーバに設定する値は本記事と同値にする必要はございません
構築方法を記載していくので自身で考えたい方はここで一旦ストップしてください



①まず、PCを画面下部からドラッグアンドドロップでLogical spaceに持ってきます
②サーバも同様に画面下部からドラッグアンドドロップでLogical spaceに持ってきます
③PCとサーバをCopper Cross-Overで接続
④PCをクリックし、[Desktop]タブの[IP Configration]をクリックする
⑤下記値のみ更新し、設定画面を閉じる(設定は自動保存される)
・IPv4 Address　　　：　172.16.0.100
・サブネットマスク　：　255.255.255.0
⑥Serverをクリックし、[Desktop]タブの[IP Configration]をクリックする
⑦下記値のみ更新し、設定画面を閉じる(設定は自動保存される)
・IPv4 Address　　　：　172.16.0.1
・サブネットマスク　：　255.255.255.0
⑧PCをクリックし、[Desktop]タブの[Command Pronpto]をクリックする
⑨下記を入力して、疎通確認を実施する。
```Command Pronpt
ping 172.16.0.100
```
構築は以上です。

# 6.最後に
次回以降は今回作成した環境に肉付けしていく形で進めていこうかなと思います。
最後までお読みいただきありがとうございます。
CSSの入れ子

# きっかけ
カードのホバーに対応して、カードタイトルの色を変えたい。

# 内容
やりたいことはこんなイメージ

![Group 17.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958920/d780ef0c-8479-27c9-d1b4-a7b11213fe62.jpeg)
コードとしてはこんな感じ

```html
<!-- html -->
<a class="card" href="#">
    <img src="noImage.jpg" class="card-img-top" alt="商品画像">
    <div class="card-body">
        <h5 class="card-title">テスト</h5>
        <p class="card-text">これはテストです。</p>
    </div>
    <ul class="list-group list-group-flush">
        <li class="list-group-item">発売日：2024/12/15</li>
        <li class="list-group-item">
            <div class="d-flex justify-content-between">
                <p>ジャンル：{{ $types[$item->type] }}</p>
                <p>在庫〇</p>
            </div>
        </li>
    </ul>
</a>
```

```css
/* 上手くいかない現状のcss */

.card {
    width: 18rem;
    cursor: pointer;
}
.card-title {
    font-weight: bold;
}
.card-title:hover {
    color: rgb(51, 111, 202); 
    transition: color 0.3s ease; 
}
```
cardクラス全体にホバーの疑似クラスを付けてポインターにはできた。
しかし、card-titleクラスだけをホバーにして色変化を設定してしまうと、タイトル上でホバーしないとtitleの色が変化しない…。困った。
CSSで入れ子の記述ができないものか。

# 調べたこと
CSSでの入れ子方法、、、普通にありました！

親名:hover 子名 {} 

と、単に繋げて書くだけ。
シンプルすぎて盲点だった。

```css
/* 入れ子のcss */

.card {
    width: 18rem;
    cursor: pointer;
}
.card-title {
    font-weight: bold;
}
.card:hover .card-title {
    color: rgb(51, 111, 202); 
    transition: color 0.3s ease; 
}
```

# メモ
そういえば、今回カードのクリックに対応させるべく、aタグでカードを作った。
始めは、onclick="location.href='{{ url('/items/view/'.$item->id) }}'"でもやってみたけど、onclickは使わないようになってきたという話を聞き変更した。
こういう
「同じ挙動だけど、こっちのがおすすめ」
とかって何で学べばよいのだろうか…。
Roo-Cline 開発効率化ガイド Part.4：既存MCPサーバーの設定とリファクタリング 🛠️

## はじめに

[前回の記事](https://hamaruki.com/roo-cline-mcp-guide-part-3/)では、Roo-Clineを使って自然言語指示だけでMCPサーバーを作成・デプロイする方法をご紹介しました。今回は、その続編として既存のMCPサーバーを設定し、さらにリファクタリングを行う方法をご紹介します。

実際のプロジェクトでは、新規開発だけでなく、既存のコードベースのメンテナンスやリファクタリングも重要な作業です。Roo-Clineは、このような作業もスムーズにサポートしてくれます。

## 実装の流れ

<blockquote class="twitter-tweet" data-media-max-width="800"><p lang="ja" dir="ltr">roo-clineでMCPサーバーをフルオートで作ってみる②<br>開発用にgithubのMCPをクローンしてきて、そこからの設定をお願いしたら普通にやってくれた。。。ホントにMCP系はトンデモナイな。。。 <a href="https://t.co/usIFrSO9jA">https://t.co/usIFrSO9jA</a> <a href="https://t.co/HBVUWtLGeM">pic.twitter.com/HBVUWtLGeM</a></p>&mdash; Maki@Sunwood AI Labs. (@hAru_mAki_ch) <a href="https://twitter.com/hAru_mAki_ch/status/1868161208593084919?ref_src=twsrc%5Etfw">December 15, 2024</a></blockquote> 

### 1. プロジェクトのクローンと初期設定

まず、既存のMCPサーバーをクローンします：

```bash
git clone https://github.com/sunwood-ai-labs/source-sage-mcp-server.git
```

Roo-Clineは、このコマンドの実行後、自動的に以下の作業を行いました：

1. 依存関係のインストール（`npm install`）
2. TypeScriptのビルド
3. MCP設定ファイルの生成

### 2. MCP設定ファイルの自動生成

Roo-Clineは、`cline_mcp_settings.json`を以下のように自動生成しました：

```json
{
  "mcpServers": {
    "source-sage": {
      "command": "node",
      "args": ["C:/Users/makim/Documents/Cline/MCP/source-sage-mcp-server/build/index.js"],
      "disabled": false,
      "alwaysAllow": []
    }
  }
}
```

この設定により：
- サーバーの実行コマンドとパスが適切に設定
- セキュリティ設定が適切に構成
- 自動実行の設定が最適化

### 3. コードのリファクタリング

次に、MCPサーバーのコードベースに対して以下のリファクタリングを実施しました：

#### モジュール構造の最適化
```plaintext
src/
├── types/         # 型定義の集約
├── utils/         # 共通ユーティリティ
├── services/      # ビジネスロジック
├── server/        # MCPサーバー実装
└── index.ts       # エントリーポイント
```

#### デフォルト設定の改善
```typescript
// file-utils.ts
export const getDefaultIgnorePatterns = (): string[] => {
  return [
    '.git',
    'node_modules',
    'package-lock.json',  // 追加
    '__pycache__',
    '*.pyc',
    '.DS_Store',
    '.SourceSageAssets'
  ];
};
```

#### パス指定方式の改善
```typescript
// 変更前: 相対パスでの指定
path: './your-project'

// 変更後: 絶対パスでの指定
path: 'C:/Users/your-name/path/to/your-project'
```

## Roo-Clineの処理フロー解説

今回のタスクでは、Roo-Clineは以下のような流れで処理を実行しました：

1. **プロジェクト分析**
   - リポジトリのクローンと構造解析
   - 必要な依存関係の特定
   - 最適化可能な箇所の特定

2. **環境設定の自動化**
   - 依存関係のインストール
   - ビルドプロセスの実行
   - 設定ファイルの生成

3. **コードリファクタリング**
   - モジュール構造の最適化
   - 設定値の改善
   - パス指定方式の標準化

4. **検証とテスト**
   - 設定の整合性チェック
   - 機能テストの実行
   - エラーハンドリングの確認

## リファクタリングの成果

リファクタリングにより、以下の改善が実現されました：

1. **コードの保守性向上**
   - 責務の明確な分離
   - モジュール間の依存関係の整理
   - テストのしやすさの向上

2. **使用性の改善**
   - 絶対パスによる安定した動作
   - デフォルト除外設定の最適化
   - エラーハンドリングの強化

3. **開発効率の向上**
   - 設定ファイルの標準化
   - 実行環境の一貫性確保
   - トラブルシューティングの容易さ

## まとめ

今回の事例では、Roo-Clineを使用することで、以下の作業を効率的に実行できることが確認できました：

1. 既存MCPサーバーの設定自動化
2. コードベースの自動リファクタリング
3. デフォルト設定の最適化

特筆すべきは、これらの作業がすべて自然言語での指示だけで実現できた点です。Roo-Clineの自動化機能により、開発者はより本質的な開発作業に集中できるようになります。

## 参考リンク

- [Roo-Cline GitHub](https://github.com/RooVetGit/Roo-Cline)
- [Model Context Protocol](https://github.com/modelcontextprotocol)
- [Source Sage MCP Server](https://github.com/sunwood-ai-labs/source-sage-mcp-server)

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
コミュニティの勉強会で学んでいることについて

ohです。この記事はTechCommit Advent Calendar 2024の15日目の記事です。

https://adventar.org/calendars/10584

TechCommitでは曜日ごとに輪読会などの何らかの勉強会が開催されているのですが、自分もその中のいくつかに参加させてもらっています。
この記事ではそれらの勉強会で学んでいることについて、簡単に書きたいと思います。

## LeetCode解く会

LeetCodeはプログラミングの問題を解きながらアルゴリズムやデータ構造などについて学ぶことができるサービスです。

https://leetcode.com/

LeetCode解く会では、毎週解く問題を決めて各自が解いてきた回答を見ながらみんなで話し合ったりしています。

自分で解くだけでも勉強になりますが、他の方の回答を見たり色々議論したりする中で気づくことも多いのでさらに勉強になります。

LeetCodeの問題にはEasy、Medium、Hardの3つのレベルがあり、最近はMediumの問題を解いています。
最初はなかなか難しく感じることも多かったですが、最近は前から比べるとだいぶ慣れて解けるようになってきた気がします（問題によっては難しいものもありますが）。

また問題にはそれぞれDynamic Programming、Sliding Windowなど、利用するアルゴリズムの種類によってTopicが付いているのですが、何度か解いているとそれらのアルゴリズムを使う際のコツみたいなものがわかってきます。

続けていると段々解ける問題が増えていって楽しいです。

## 輪読会

輪読会は曜日ごとにいくつか開催されています。

進め方としては、約1時間の中で前半は各自で本を読み進めて、後半は読んだところの感想や疑問点をMiroのボードに付箋を貼っていき、それを見ながら話しあったりする感じが多いと思います。

対象となる本はその都度変わりますが、現在自分が参加している会では次の本を読んでいます。

- AWS運用入門
- ［改訂新版］イラストでわかるDockerとKubernetes

https://www.sbcr.jp/product/4815615499/

https://gihyo.jp/book/2024/978-4-297-14055-7

一応普段の仕事でAWSやコンテナを使ってはいますが、これまで知らなかった部分を深く知ることができたり、復習になったりもして学びが多いです。

自分だけで本を読むときと違い、その場で疑問点などについて話したり、他の方の話を受けての気づきがあったりするのでより勉強になります。
詳しい方がいるとわからない部分について解説してくれたりもするのでとてもありがたいです。

## チーム開発の会

コミュニティ内のメンバーでチーム開発をする会で、漫画レコメンドアプリの開発を行っています。

利用する技術としては、React、TanStack Query/Router、GraphQL、Ruby on Rails、AWSなどが採用されています。
詳しくは [アドベントカレンダー1日目のinoueさんの記事](https://blog.tech-commit.jp/1814/) を御覧ください。

今はTanStack Query/RouterやGraphQLをキャッチアップするために、TanStackの公式ドキュメントを読んだり、「初めてのGraphQL」という本の輪読会を行ったりしています。

https://tanstack.com/

https://www.oreilly.co.jp/books/9784873118932/

少し前にはAWSでの環境構築や、Ruby on Railsで認証周りの部分をみんなでモブプロしながら開発したりもしていました。

自分は今の仕事ではプログラムを書いてアプリを開発する機会があまりないので、とても勉強になっています。

今後はここで学んだ技術なども使いながら個人でも何か作ってみたいと思います。

## おわりに

TechCommitの勉強会に参加することで様々な技術や知識に触れることができ、とても勉強になっています。
またコミュニティには日々学ばれている方や色々な活動をされている方がいて、とても刺激になります。
自分も見習ってもっとスキルアップできればと思います。💪
[Swift]Package.swiftのライブラリのバージョン指定方法について

# はじめに

こんにちは、FJ2123です。
今回は、SPM(Swift Package Manager)を利用したマルチモジュール構成でアプリを開発する際の、Package.swiftのバージョン指定方法についての小ネタを書きたいと思います。

# 本題
```swift
import PackageDescription

let package = Package(
    name: "TestApp",
    platforms: [.iOS(.v17)],
    products: [
        .library(
            name: "AppFeature",
            targets: ["AppFeature"]
        )
    ],
    dependencies: [
        .package(url: "https://github.com/pointfreeco/swift-composable-architecture", exact: "1.16.1"),
    ],
    targets: [
        .target(
            name: "AppFeature",
            dependencies: [
                .composableArchitecture
            ]
        ),
    ]
)

extension Target.Dependency {
    static var composableArchitecture: Self { .product(name: "ComposableArchitecture", package: "swift-composable-architecture") }
}

```

上記のようなPackage.swiftがあったとするとき、
packageのdependenciesの部分で


```
exact: "1.16.1"
```

の部分を

```
branch:"main"
```

と指定することができる

File > Packages > Resolve Package Versions でバージョンの更新をすることを忘れずに！


# 懸念点
- ライブラリのmainブランチのコードが使われるので、動かないということはほぼないとは思うが、発生しているエラーがissueを探しても見つからないときは試してみてもいいかもです。(筆者の場合これで大体のエラーは直った)
- ですが、一番はエラーが修正されたバージョンを見つけて、それを反映させるのがベターなやり方な気がしています、、、、
【PHP】指定した文字数だけを残しマスキングする

指定した文字数分の後ろだけそのままで、残りをマスキング

```php5
private function maskString($string, $keepLength=3):string {
    return "xxxxxx" . substr($string, -1 * ($keepLength));
}


// xxxxxxHI
$maskText = maskString("ABCDEFGHI",2);

```
pythonをvscodeで実行したい-python３と無印の攻防

## python3をvscodeでcode run使って実行したい
VSCodeで実行したいけど、以下のようにエラーが出ます。![スクリーンショット 2024-12-15 21.48.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3906022/eafbf5c2-4e87-0916-b059-3dcf86367bd5.png)
そのまま読むと、
~~~app.pyのエラー
zsh: command no found: python
~~~
そのまま読むと、
**「pythonってコマンド、使えないよ」**
ということ。
確かに、ターミナルでもpython3 --versionと打たなくては、
バージョンが見れなかった。

### ただ単に変数が通ってないだけだ！
ということで、以下の記事を参考に、変数通したら、
できるようになったよ。

https://qiita.com/omo_taku/items/bc97f69391b2f4627f36
【FileMaker】今まで経験したテスト環境と理想のテスト環境

悩ましいテスト環境の構築.
どの言語でも悩ましいと思いますが、[FileMaker](https://www.claris.com/ja/filemaker/)でのテスト環境も「どういうふうにテスト環境を作ろうかな」と毎回悩みます。

今までの経験上、「こんなテスト環境があったな」というのを挙げてみます。
また、それを踏まえて「本当はこうなっていると安心して修正・テストができるのよ」も締めとして結びたいと思います。

:::note warn
Claris FileMakerの本流ではない（かもしれない）テスト環境も含まれます。
あくまでも、自身が経験したテスト環境になります。
:::

# こんなテスト環境で作業しました

## 1.本番環境で直接直す
あります、あります。
「本番環境しかありません」
というところ、あります。
現場に到着したら、「そのまま本番環境で作業してください」
と言われて、運用している隣で修正・テストをしたこともあります。
「これしかない」ので、仕方なく、本番環境で直します。
ヒヤヒヤです。

ただ、文言の変更など、軽微な修正の場合は、本番環境で直接直すことは、よくあります。

## 2.運用中ファイルを別の環境にコピーして修正
FileMaker ServerやFileMaker Cloudを利用せず、単体で運用しているクライアントもいらっしゃいます。
その場合は、本番ファイルをこちらに送ってもらい、それを修正・テストして送り返します。
送り返したファイルを本番の運用ファイルとして使ってもらいます。

これは、意外と安全な方法で、運用中のファイルとは別に作業ができるので、安心して作業ができます。
ただ、長期間かかる修正には不向きで、すでに修正箇所がわかっていて、夕方受け取ったら次の日の営業開始までに修正・テストが終わるような場合に、この方法を適用しています。

## 3.本番サーバにテスト環境を構築
本番サーバに、バックアップからテスト用ファイルを持ってきて修正・テストをし、問題なければ今まで使っていたファイルのデータをテスト用ファイルにマージします。
もしくは、本番ファイルに修正内容をパッチします。
テストサーバの用意がなかったり、サーバにあるファイルをPCにダウンロードして作業できない環境では、これもよくあります。

ファイル名の接頭辞や接尾辞に「_test」や日付をつけたりして、運用中のスタッフが触らないように注意喚起して作業をします。

テストファイルがあるだけ、ホッとします。


## 4.テスト環境にダウンロードして修正・テスト
本番サーバからテストサーバや、場合によっては開発者のPCにダウンロードして修正・テストをして、問題がなければ、[FileMaker Data Migration Tool](https://support.claris.com/s/article/New-FileMaker-data-migration-tool?language=ja)を使ってマイグレーションをして本番サーバに新ファイルをアップします。

この環境であれば、とても安心して修正・テストが行えます。

しかし、マイグレーションツールはコマンドラインで行うので、技術者でなくても開発できてしまうFileMakerユーザには少し敷居が高いかも知れません。

# 本当はこうなっていると安心して修正・テストができるのよ

クライアントの環境によっては、ベストな修正・テスト環境ができるわけではないのは重々承知ですが、やはり開発する側としては、本番環境に依存せず、影響せず、な環境でテストをしたいわけです。

また、テストのバージョン管理もしたいですが、FileMaker専用のバージョン管理は今までなかったように思います。
最近、その風穴をあける[Devin](https://www.devin.fm/)というバージョン管理、デプロイ自動化、回帰テストができるツールが登場しました。

引用：https://kotovuki.co.jp/service/devin

こちらは、とても期待しています。
テストサーバを立てる必要はありますが、先の4の環境をさらに強化した、FileMakerのテスト環境のオールインワン（とまでいけるかはまだわかりませんが）ができる気がします。

どんなテスト環境でもいいのですが、できれば安心してFileMakerのファイルを修正・テストをしていきたいのは、FileMakerに携わっているすべての人が思っていることではないでしょうか？

ローコード開発が可能なFileMakerでもこうしたツールを使って安心安全なテスト環境で作業をしていきませんか？
Bitcoinの基礎について学習

2008年、サトシ・ナカモト（といわれている人物またはグループ）による論文の発表および最初のブロックが生成されてから、16年以上経ちましたね。

これまで、なんとなくその存在を知っている程度でしたが、ちゃんと学習してみようと思いました。

# Bitcoin とは
### 1. インターネット上で管理されているお金みたいなもの
普段私たちが使っているお金は、日本円やアメリカドルといった、国が発行しているものですね。それに対して、ビットコインは、国ではなく、インターネット上で動く特別なプログラムによって管理されているデジタルなお金です。
世界中どこでもインターネットにつながっていれば送金したり、受け取ったりできます。

### 2. 銀行ではなく、みんなで管理する
普通のお金は、銀行が管理していますね。預金残高や取引履歴は銀行のサーバーに記録されていて、私たちは銀行を信頼してお金を預けています。

それに対して、ビットコインは「ブロックチェーン」と呼ばれる技術を使って、取引の記録を世界中に分散して保存しています。たくさんのサーバーでデータを分散して管理しているので、特定の誰かや組織が勝手にデータを書き換えることはできません。これは、銀行のように一つの場所に記録を集中させて管理するよりも安全だと言われています。

### 3. 透明性と匿名性が高い
ビットコインの取引はすべて公開されています。
どこからどこへ、いくら送金したか、誰でも確認できます。そして、その個人名は誰にも分かりません。この透明性と匿名性も、ビットコインの信頼性を高める要素の一つです。

### 4. 発行枚数が制限されている
日本円やドルは、必要に応じて国が追加で発行できます。しかし、ビットコインは発行枚数が2100万枚に制限されています。
これにより、通貨としての価値が保証されてますが、現在の価格上昇を見ると、この希少性がいいのか悪いのか、よく分かりませんね。

# 半減期について
ビットコインには、半減期というものがあります。
これは発行枚数の上限や現在の供給量に影響するのではなく、新規発行であるマイニング報酬に影響します。

### マイニングとは

ビットコインの取引は、ネットワーク上にブロードキャストされ、誰でも確認できます。しかし、これらの取引はまだ確定しておらず、正式に記録されるには、**ブロック**と呼ばれるデータ構造に格納され、**ブロックチェーン**に追加される必要があります。このブロックの作成と追加を行う作業が**マイニング**です。


### マイニングによるブロックへの追加と報酬

マイニングによるブロックへの追加は、既存のビットコインに関する取引です。
これには非常に複雑な計算を行う必要があり、それを誰よりも早く成功させたマイナーに対して、報酬として新しいビットコインが発行されます。
これがマイニング報酬であり、半減期でこの報酬が半減することで、新規発行されるビットコインが減る仕組みになってます。

発行枚数が上限に達すると、新規発行は停止されます。
それ以降もマイニングは必要であり、マイニング報酬は、取引手数料の一部になるのでは、と思われます。

マイニングについては、また改めてまとめようと思います。

### 現在のビットコイン発行量
以下のサイトで確認する限りでは、2024年12月15日時点で、ビットコインの供給量は `19,796,193 BTC` でした。（94%が発行済）
https://coinmarketcap.com/ja/currencies/bitcoin/

### まとめ

- ビットコインは、インターネット上のデジタル通貨
- 発行上限が決まっており、希少性が高い
- 「マイニング」と呼ばれる計算競争で新しいビットコインが発行される
- 発行上限に達したら新規発行は停止される
- 新規発行の停止後は、取引手数料の一部が報酬になると考えられる
- マイニング報酬は約4年ごとに半減する
- 革新的ではあるが、価格変動リスクなど、大きな課題も残されている
あえてのデスクトップアプリで間違えやすいポイント５選

あえてWEBではなくデスクトップに手を出した私。
本意ではなく会社の必然によるものでしたが、pythonデスクトップアプリでいろいろ開発してきました。
その反面、数々の失敗をしました。
chatgpt様様な私ですが、「全然コードが動かない」「開発がうまく行かない」
と悩んだ日々です、、
tkinterを使う人はとても少ないと思いますが、もし使っている方がいたら参考にしてください！





## 1. mainloop()の呼び出し忘れ
### mainloop()を呼び出さないとウィンドウが表示されません
→ Tkinterアプリケーションはmainloop()を呼び出してイベントループを開始する必要があります。これを忘れると、GUIウィンドウが一瞬表示された後、すぐに終了してしまいます

```python:python
import tkinter as tk
root = tk.Tk()
label = tk.Label(root, text="Hello, Tkinter!")
label.pack()
# root.mainloop() を忘れる

```


#### 💗修正方法 : スクリプトの最後で必ずroot.mainloop()を呼び出します

```python:python
import tkinter as tk
root = tk.Tk()
label = tk.Label(root, text="Hello, Tkinter!")
label.pack()
root.mainloop()  # イベントループを開始
```





## 2. ウィジェットのサイズと親要素のサイズの混同
### ウィジェットのサイズを設定したつもりでも、親要素のサイズが優先されることがある
→pack()やgrid()を使用すると、親要素のサイズは子ウィジェットのサイズに基づいて自動調整されます。pack_propagate(False)を使って自動調整を無効にする必要があります


```python:python
import tkinter as tk
root = tk.Tk()
frame = tk.Frame(root, width=300, height=200)
frame.pack()  # サイズが適用されない
root.mainloop()
```

#### 💗修正方法 : 自動調整を無効にする設定を追加します

```python:python
import tkinter as tk
root = tk.Tk()
frame = tk.Frame(root, width=300, height=200)
frame.pack_propagate(False)  # サイズの自動調整を無効化
frame.pack()
root.mainloop()
```


## 3. イベント関数に引数を渡す際の誤り
### イベントハンドラー関数に引数を渡したい場合、間違えて括弧付きで直接呼び出してしまう
→command引数で括弧を付けると、その場で関数が実行され、ボタンを押したときには何も動作しません


```python:python
import tkinter as tk
def on_click(msg):
    print(msg)

root = tk.Tk()
button = tk.Button(root, text="Click Me", command=on_click("Button clicked"))  # 実行される
button.pack()
root.mainloop()
```

#### 💗修正方法 : lambdaを使って関数に引数を渡します


```python:python
import tkinter as tk
def on_click(msg):
    print(msg)

root = tk.Tk()
button = tk.Button(root, text="Click Me", command=lambda: on_click("Button clicked"))  # 正しい
button.pack()
root.mainloop()
```


## 4. ウィジェットの削除方法の間違い
### ウィジェットを削除するつもりで単に非表示にするコードを書いてしまう
→ pack_forget()やgrid_remove()はウィジェットを非表示にするだけで、削除するわけではありません


```python:python
import tkinter as tk
root = tk.Tk()
label = tk.Label(root, text="Hello, Tkinter!")
label.pack()
label.pack_forget()  # 非表示にするが削除はされていない
root.mainloop()
```


#### 💗修正方法 : ウィジェットを完全に削除するにはdestroy()を使用します

```python:python
import tkinter as tk
root = tk.Tk()
label = tk.Label(root, text="Hello, Tkinter!")
label.pack()
label.destroy()  # ウィジェットを削除
root.mainloop()
```

## 5. 文字列が変更されないLabelウィジェット
### Labelのテキストを直接変更しようとして効果がない

→ ウィジェットが正しく更新されていない可能性があります

```python:python
import tkinter as tk
root = tk.Tk()
label = tk.Label(root, text="Hello, World!")
label.pack()
label["text"] = "Updated Text"  # 実行後に変更されない
root.mainloop()
```



#### 💗修正方法 : config()を使用してプロパティを明示的に更新します

```python:python
import tkinter as tk
root = tk.Tk()
label = tk.Label(root, text="Hello, World!")
label.pack()
label.config(text="Updated Text")  # 正しい方法
root.mainloop()
```
キーボード的デバイスを自作した

Firm Wareまわりで少し苦戦したのでメモ的に記録
どちらかというとキーボードよりは拡張デバイス寄りかもしれない
# キーボード構成

5キー+ショートカット4つ+メディアキー6つのデバイスが欲しかったので秋月で10個300円で売ってたタクトスイッチをまず用意した。ショートカットとメディアキーは同時に扱うこともないのでマイブームなトグルスイッチ((ON)-OFF-(ON))を採用。ダイソーのカードケースを加工して収めることにした。マイコンはXIAO RP2040を使用。タクトスイッチ部分は想定用途的に5キー同時に扱う可能性があるので3x5マトリクスを構成した。本筋と離れるので配線と加工は省略。

# Firm Ware

QMK, Vial, PRK, Kermite....
複数の手段が提供されておりよいなと思ったのだが、初めて挑戦する身としてはどのサービスがよいのかわからなかったので簡単そうなものから触ってみることにした。
ちゃんと紹介してる[サイト](https://blog.alglab.net/archives/about-keyboard-firmware-2023/)もあり、ありがたい。

#### Kermite
webページで完結し、キーマップもその場で作成できる。QMKのように登録されたものでなければブラウザ上で完結しないということもなく、実際に入力を確認しながら作成できるため非常に楽。
欠点としては拡張的なキーは用意されてない部分があり、メディアキーが必要な場合は不適？

#### Vial

対応firm wareの用意の時点でわからなくなり、まともに扱うこともできなかった。

#### PRK Fireware

rubyで編集できるやつ。環境があればオフラインで完結するし書き換えも特別な処理がなく簡単。欲しいキーもそろっていたが、結局動作させることができずよくわからなかった。

#### QMK Fireware

結局これを使った。
登録されたキーマップは超簡単に変更とかできる　らしい。
登録されていないものはブラウザで弄ることも作ることもできないのでQMKをインストールします。どっかに書いてあったかもしれないがインストール時にフォルダ名に2バイト文字の入ったディレクトリを指定するとコンパイル時にエラーを吐いた。

ベースレイアウト選択後の部分、[他の](https://qiita.com/mizuhof/items/c2f9eb173b21593d969e) [記事](https://zenn.dev/nananauno/articles/99a896a5c6baa8)ではMCUを聞かれているのだがそのような聞かれ方をしなかったので勘で進めたらいけた。
~~~C
...
Ψ What Powers Your Project
Ψ Is your board using a separate development board, such as a Pro Micro,
or is the microcontroller integrated onto the PCB?

For more information, see:
https://docs.qmk.fm/compatible_microcontrollers
Using a Development Board? [y/n] n               //←ここのこと
Ψ Select Microcontroller
Ψ For more information, see:
https://docs.qmk.fm/compatible_microcontrollers
Microcontroller?
        1. AT32F415
        ...
        21. RP2040
        ...
        42. WB32FQ95
Please enter your choice: [13] 21
Ψ Created a new keyboard called <keybord name>.
~~~

参考になったのは
1 https://note.com/akasha_min/n/ne4649d6b02be
2 https://qiita.com/mizuhof/items/c2f9eb173b21593d969e
3 https://zenn.dev/nananauno/articles/99a896a5c6baa8
ColとRowの識別は単純なマトリクスの場合ダイオードを入れる側がColと覚えておけばよさそう。

# おわり

自作デバイスつくりたい
→キーボードのキーってモーメンタリだから同様の特性のスイッチなら使えるのでは？
という動機で作りましたができましたね。それはそうか。
AIを創りたい

# はじめに
オリジナルのAIを創りたい!!
でも、開発の仕方とかなんにもしらない...
Pythonの知識は少々あるが...

とりあえず有名な松尾教授のロードマップを参考に
> https://weblab.t.u-tokyo.ac.jp/lecture/learning-roadmap/

# 数学
数学は書籍の購入を検討
ロードマップ参照

# Python
Pythonの基礎については以下のサイトで学ぶ
> https://utokyo-ipp.github.io/
本も持っているからそれも使う

簡単なところはスキップ
練習問題はやる

1-1 黄金比を求めてください。黄金比とは、5 の平方根に 1 を加えて 2 で割ったものです。約 1.618 になるはずです。
```
>>> import math
>>> (math.sqrt(5)+1)/2
1.618033988749895
```
1-2 
f フィート i インチをセンチメートルに変換する関数 ft_to_cm(f,i) を定義してください。 ただし、1 フィート = 12 インチ = 30.48 cm としてよい。
```
>>> def ft_to_rm(f, i):
      return (f*30.48)+(i*30.48/12)
>>> ft_to_rm(5,2)
157.48000000000002
>>> ft_to_rm(6,5)
195.57999999999998
```

二次関数の値$ax^2+bx+c$ を求めるquadratic(a,b,c,x)を定義してください。
```
>>> def quadratic(a,b,c,x):
...   return a*(x**2) + b*x + c
...
>>> quadratic(1, 2, 1, 3)
16
>>> quadratic(1, -5, -2, 7)
12
```

二次方程式 $ax^2+bx+c$ に関して以下のような関数を定義してください。
+ 判別式 $b^2-4ac$ を求める qe_disc(a,b,c)
+ 解のうち、大きくない方を求める qe_solution1(a,b,c)
+ 解のうち、小さくない方を求める qe_solution2(a,b,c)

ただし、qe_solution1 と qe_solution2 は qe_disc を使って定義してください。 二次方程式が実数解を持つと仮定してよいです。
```
>>> import math
>>> def qe_disc(a,b,c):
...   return b*b - 4*a*c
...
>>> def qe_solution1(a,b,c):
...   return (-b - math.sqrt(qe_disc(a,b,c))) / (2*a)
...
>>> def qe_solution2(a,b,c):
...   return (-b + math.sqrt(qe_disc(a,b,c))) / (2*a)
>>> qe_disc(1,-2,1)
0
>>> qe_disc(1,-5,6)
1
>>> qe_solution1(1, -2, 1)
1.0
>>> qe_solution2(1, -2, 1)
1.0
>>> qe_solution2(1, -5, 6)
3.0
>>> qe_solution1(1, -5, 6)
2.0
```

今日はここまで(2024/12/15)
Rを学びたい Step20 結局何で正規分布と確率って関係するの？？

## はじめに
Rを学びたいStep20です。[前回](https://qiita.com/koji0705/items/cc875644a5111364faab)までに標準正規分布の振り返りを実施していました。標準化することで異なるデータでも比較できるようになりました。
ただ、標準化することで、なぜ確率や統計に生きてくるのか？分布を作っただけでは確率とは関係ないよね？🤔ってことが腑に落ちないので、今回学んでいこうと思います。

## 「標準化して比較する」話からなぜ「確率」の話につながるのか？
さて表題通り、なぜ正規分布が確率の話につながるのか。ここを理解していこうと思います。
前回までの話では、標準化すると下記のような分布になることがわかっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/8dfdd165-b1c0-31ac-843e-0e068418fde5.png)

ここからですね。よく見る下記図。何で、標準偏差1までに68%、標準偏差2までに95%、標準偏差3までに99.74%って言えるの？そもそもこの図と確率って関係あるの？？って事が解き明かしたい課題です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/8c83372e-63c5-a55c-f720-45a4707ba8d4.png)


## 正規分布と確率の関係
正規分布では、曲線の下の面積が「確率」を表している。
これが確率と正規分布のつながり。
	•	縦軸は「確率密度」 (Probability Density Function: PDF)。
	•	横軸は「データの値」。


```math:
\begin{align}
P(a \leq X \leq b) = \int_a^b f(x) \, dx \\
•f(x) ：正規分布の確率密度関数  \\
•a  から  b  までの面積が、その範囲にデータが存在する確率になる。\\
\end{align}
```

## なぜ正規分布が確率に使われるのか？

### 理由1: 正規分布は「積み重なった要因」の結果だから

中心極限定理という数学的法則がポイントだよ。
	•	中心極限定理とは：
無数の小さな独立した要因が組み合わさってできるデータは、どんな分布の要因でも、正規分布に近づくというもの。

例：テストの点数

テストの点数は「たくさんの小さな要因」が積み重なって決まるよね？
	•	勉強量、睡眠時間、体調、試験中の集中力、問題の難しさ……など。

これらの要因が無数に組み合わさると、全体の分布は自然と正規分布に近づくんだ。

### 理由2: 正規分布は確率のルールに従っている

正規分布は次の確率の基本ルールを満たしているから、確率計算に使えるんだ。
1.	確率の合計は1になる
 •	正規分布の曲線の下の面積全体は「1」になる。
→ 「すべてのデータがどこかに存在する確率が100%」という意味だよ。
数式で表すと：

```math
\int_{-\infty}^{\infty} f(x) \, dx = 1
```

2.	確率は部分的な面積で表せる
•	 a  から  b  の範囲にデータが存在する確率は、曲線の下の「その範囲の面積」になる。

### 理由3: 正規分布の左右対称性と標準偏差

正規分布は平均を中心に左右対称で、標準偏差によって「確率の範囲」が決まるよ。

例えば：
	•	平均 ±1標準偏差 → 約68% のデータが含まれる。
	•	平均 ±2標準偏差 → 約95% のデータが含まれる。
	•	平均 ±3標準偏差 → 約99.7% のデータが含まれる。

このように、正規分布の形が「確率の範囲」として非常に使いやすいんだ。

## 具体例：正規分布と確率の関係

問題：

「テストの点数が平均70点、標準偏差10点の正規分布に従うとき、80点以上を取る確率は？」

ステップ1：標準化する

```math
z = \frac{x - \mu}{\sigma} = \frac{80 - 70}{10} = 1
```

→ 80点は「平均から1標準偏差上」に位置する。

ステップ2：標準正規分布を使う

標準正規分布表を見れば、 z = 1  以下の確率は 0.8413。
80点以上の確率は：

```math
P(X \geq 80) = 1 - 0.8413 = 0.1587
```
→ 約15.87%の確率で80点以上を取れる。

## 結論

正規分布が確率に利用される理由は：
	1.	自然現象やデータが正規分布に従いやすい（中心極限定理）。
	2.	曲線の下の面積が確率を表すという確率のルールに適合している。
	3.	計算が便利（標準化すればどんな正規分布も標準正規分布で確率計算できる）。
妖怪クリストッフェルと仲良くなれないかぁ・・(1. 基底編)

# はじめに

『秋葉原ロボット部 理論グループ Advent Calendar 2024』の投稿です
線形代数が大好きからはじまり、『一般相対性理論を一歩一歩数式で理解する』読書会で何とか理解したいと、日々楽しく追い詰められています

<img src="https://m.media-amazon.com/images/I/61QAwiBMpbL._SL1068_.jpg" width=15%>

自分にとって一番ショックが大きかった接続係数 クリストッフェル記号について記事にしました、直感的に理解できればと思い自分のための復習的に書いています、敷居の高さで恨みを込めて"妖怪"と書いてしまいましたが、理解とともに友達になれてきた気がします、実はとてもよいやつだと思います（多分）

**ここからの話は、$\mathbb{R}^2$つまり、２次元平面での話です、$\mathbb{R}^3$ではありません**
直線座標としていますが、ここからの話は、**標準基底**としています

# 直線座標と曲線座標

この書籍では、直線座標から始めて曲線座標、曲率と進んでいきます
この記事では直線座標と直線座標をテーマにしています

```mermaid
graph LR
xx[["直線座標"]]
uu[["曲線座標"]]
kk["曲率"]
xx-->uu-->kk
```

## 座標について

通常、座標を表現するために、基底の線形結合を用います、座標 $(2,3)$というときには、$2 \vec{e_1} + 3 \vec{e_2}$、つまり、$x$方向に大きさ1のベクトルの２倍と$y$方向に大きさ1のベクトルの３倍を足したものと考えます、この標準基底をみんなで共有しているので、誰でも$(2,3)$の位置情報を共有できるわけです、つまり、基底が決まらなければみんなと同じ議論ができないことになります
それで、ここでの話は、この基底が曲線の場合にどうすんのって話です

<hr>
(p430)
平面に直線座標$(x_1,x_2)$と曲線座標$(u_1,u_2)$が入っていて，直線座標$\vec{x}=(x_1, x_2)$は，曲線座標によって $\vec{x}=(x_1(u_1, u_2), x_2(u_1, u_2))$と表されているものとします

※ 曲線座標で$\vec{x}$が$(u_1, u_2)$ で**媒介変数表示**されています

$$
\begin{array}{ccc}
\mathbb{R}^2 & \longrightarrow & \mathbb{R}^2 \\\\
(u_1, u_2) & \longmapsto & (x_1(u_1, u_2), x_2(u_1, u_2))
\end{array}
$$

- 直線座標 : $\vec{x}=(x_1, x_2)$
- 曲線座標 : $\vec{x}=(x_1(u_1, u_2), x_2(u_1, u_2))$

この座標の基底について議論を進めます

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71601/e7a044df-5367-d8d3-2494-4ffc676fbb07.png width=70%>

## 直線座標の基底
- 直線座標の基底は、馴染みのある標準基底 $\\{ \vec{e_1}, \vec{e_2} \\}$です（としています）
- 曲線座標と同様に、接ベクトルを考えれば、偏微分したものは、位置$\(x_1, x_2\)$に依存しない定ベクトルとなります（曲線座標と比べてみてください）
$$
\begin{array}{l}
\cdot \ \  \frac{\partial \vec{x}}{\partial x_1} = \frac{\partial}{\partial x_1} \left( x_1 \vec{e_1} + x_2 \vec{e_2} \right) = \vec{e_1} \\\\
\cdot \ \  \frac{\partial \vec{x}}{\partial x_2} = \frac{\partial}{\partial x_2} \left( x_1 \vec{e_1} + x_2 \vec{e_2} \right) = \vec{e_2}
\end{array}
$$

- 直線座標をまとめると
    - 直線基底は２次元平面上のどこにあっても同じ定ベクトル
    - 直線基底は、$\vec{x}$ の位置に依存しない、位置の関数とならない
    - 直線基底は、グローバルは基底と言えます

<hr>

## 曲線座標の基底
- 曲線座標の基底は、空間全体で定ベクトルとなるような具合のよい基底はありません
- 全体ではなく、各点においての接ベクトルを基底とすることで対応します（$(u_1, u_2)$の関数とはなりますが、基底がなければ始まりません）
- 局所的に採用される基底です

$$
\begin{aligned}
\cdot \ \ \frac{\partial \vec{x}}{\partial u_1} \\\\
\cdot \ \ \frac{\partial \vec{x}}{\partial u_2}
\end{aligned}
$$

- 曲線座標をまとめると
    - 曲線座標の基底は２次元平面全体ではなく、**各点においての基底**です
    - 曲線座標の基底は、$\vec{x}$ の位置に依存し、位置$(u_1, u_2)$の関数となります
    - 曲線座標の基底は、ローカルな基底と言えます（局所的）

# 曲線座標を議論するための仕掛け

曲線座標を議論するための仕掛けは、**媒介変数**です、媒介変数表示することで、合成関数の微分が利用できるようになります

- $x_1 = x_1(u_1, u_2)$
- $x_2 = x_2(u_1, u_2)$

この辺は、$(u_1, u_2)$から $(x_1, x_2)$の写像があり、しかも微分可能とか・・・深い話があるようですが

$$
\begin{array}{ccc}
\mathbb{R}^2 & \longrightarrow & \mathbb{R}^2 \\\\
(u_1, u_2) & \longmapsto & (x_1(u_1, u_2), x_2(u_1, u_2))
\end{array}
$$

- 直線座標 : $\vec{x}=(x_1, x_2)$
- 曲線座標 : $\vec{x}=(x_1(u_1, u_2), x_2(u_1, u_2))$

接続係数のお話は、[『妖怪クリストッフェルと仲良くなれないかぁ・・(2. 接続係数編)』](https://qiita.com/osawat/items/b863b0e5998c0ba8c101)に続きます

# 後記

コメントや誤りの指摘などありましたら、大歓迎です、大らかな気持ちで、お願いいたします