OmniAICreator/Qiita-1.07M huggingface dataset:
Firebase Realtime database によるリアルタイム購読

## Firebase Realtime Databaseとは

FirebaseにはFirestoreとRealtime Databaseが用意されています。
その中でもRealtime DatabaseとはJSON形式でデータを保存します。


:::note info
Realtime Database は従来の Firebase JSON データベースです。シンプルなルックアップと低レイテンシの同期を必要とし、スケーラビリティに制限がある単純なデータモデルを使用するアプリケーションに適しています。
:::

　[Realtime DatabaseとFirestoreの比較](https://firebase.google.com/docs/database/rtdb-vs-firestore?hl=ja)

### Realtime database Onvalue
Firebase Realtime Databaseには二種類のデータ読み取り方法があります。
Firebase Realtime Databaseには、データの読み取り方法として主に **`get`** と **`onValue`** の2種類があります。

- **get**  
  一度だけデータを取得します。単発でデータのスナップショットを取得したい場合に使用します
- **onValue**  
  対象データに変化があった場合に、コールバックが自動的に呼び出されるリアルタイム購読用のメソッドです。常に最新のデータを反映させたい場合に有効です

## 問題点
複数ページで同じデータをリアルタイムに購読する場合、各ページごとに `onValue` を使ってリスナーを登録すると、例えば以下のような状況になります。
- ページAで1回、ページBで1回、さらにページAに戻った際に再度1回 `onValue` を呼んでいると、合計で3つのリスナーが存在する
- 内部的には同じキャッシュやネットワーク接続を利用している場合でも、各リスナーが独立してコールバックを処理するため、**データ変更時に3回のコールバック処理が発生**
- これにより、メモリ使用量やコールバック処理の負荷が増大し、パフォーマンスに悪影響

以下イメージです。
![スクリーンショット 2025-04-03 20.07.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3897405/36e32c27-9ce1-4377-8c29-ddcad1282ae9.png)

## MVCモデルでの上手な適応方法
複数ページでの重複したリアルタイム購読を防ぐためには、**MVCモデルやグローバルな状態管理**（Nuxt 3の `useState` や Piniaなど）を活用して、データの購読を一元管理することが推奨されます。
具体的には、以下のような手法が考えられます。
- **グローバルストアで購読処理を集約する**  
  アプリ全体で共有するデータは、ストアにて一度だけ購読し、そのストアの状態を各ページやコンポーネントで利用

- **リスナーの解除（オフ）を確実に行う**  
  各コンポーネントで `onValue` を使用する場合、Nuxtのライフサイクルフック（`onMounted`/`onUnmounted`）を用いて、コンポーネントの破棄時にリスナーを解除することで、二重購読や不要なリソース消費を防止

以下、コンポーネント内での実装例です。

```vue
<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue';
import { getDatabase, ref, onValue } from 'firebase/database';

const db = getDatabase();
let unsubscribe: () => void;

onMounted(() => {
  const dataRef = ref(db, 'path/data');
  // Firebase v9想定
  unsubscribe = onValue(dataRef, snapshot => {

    snapshot.val();
  });
});

onUnmounted(() => {
  if (unsubscribe) {
    unsubscribe();
  }
});
</script>
```

このように、各ページやコンポーネントで購読の登録・解除を適切に管理することで、重複購読を防ぎ、パフォーマンスの最適化が可能になります。

## まとめ
- Firebase Realtime Databaseのリアルタイム購読機能は、データの変化を即座に反映できる強力な仕組み
- しかし、複数ページで同じデータを購読すると、キャッシュによってネットワーク取得は効率化されるものの、各リスナーが独自のコールバック処理を持つため、メモリ使用量や処理負荷が増加
- そのため、グローバルな状態管理を活用して購読処理を一元化し、不要なリスナーは速やかに解除することが重要

**結果として、堅牢かつ効率的なリアルタイムデータ連携を実現し、ユーザー体験を向上させることができます。**
VScodeとGitHub copilotの連携で嵌った話

# 結論
VScode側のGitHubのログインをやり直せばよかっただけ
解消方法調べた時に試行錯誤したので、万一未来の誰かが同じように嵌った時のための備忘録として投稿

# 経緯
こちらの記事を見て「うちのVScodeにサポートﾈｺﾁｬﾝ召喚してえ〜〜ﾈｺﾁｬﾝ～～」ってなった

https://qiita.com/bonanza-olaf/items/5453fc0e3ad1c8f9f971


# やったこと
## 連携するAIの選定
記事で取り扱ってた「GitHub Copilot」の他、最近話題にあがしるclineとかCursorとかも比較。結果的に「技術学習レベルなら一旦Copilotでいいんじゃね？」とﾈｺﾁｬﾝ召喚優先で決める

## 導入
- VScodeにGitHub Copilotの拡張機能を入れたところまでは問題なし
- GitHub側では「無料プランあるはずなのに登録いるのか？」と不思議に思いつつ一旦pro版の無料トライアルを開始。あとで「やっぱ無料版から始められるじゃん」と気づいて解約

# 問題発生
- 拡張機能を入れたところでいくつかの問題が発生
1. 起動時の警告
- 拡張機能を入れてVScodeを再起動したら以下のエラーが表示
```
Your Copilot experience is not fully configured, complete your setup. You are currently logged in as (GitHubのユーザーID).
```
- セットアップが未完了っぽいのでGitHub側のCopilot設定をいじる
- Copilot側にオプションが色々あったのでとりあえず可否を設定していく
- Copilot用の拡張機能をアンインストール⇔インストールを繰り返す（無意味だった）


2\. ターミナルの「出力」で以下のエラーが発生
```ruby:タスク：GitHub Copilot
[info] [certificates] Removed 11 expired certificates
[info] [auth] Invalid copilot token: missing token: 403
```
- VScodeに表示された「GitHub.comにサインイン」を押しても無反応
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579944/73a051cc-c066-499c-bd15-e3b9c75ae336.png)

- エラー内容ざっと読んだ上でAI（簡単な翻訳程度ならGeminiを使用）に投げたら、どうもVScodeからGitHubに接続する時の認証周りが上手く行かないらしい
- Copilotのパネル側でも「ログインしろ」のボタンが出ているが、クリックしても無反応
- 既に`GitHub Pull Requests`の拡張機能を入れてる以上認証は通ってるはずでは？と嵌り始まる

# 対応
## 他のエラーも確認
- ターミナルの出力元タスク切り替えたらいくつか気になるエラー
```ruby:タスク：GitHub Authentication
[info] Getting sessions for read:user,repo,user:email,workflow...
[info] Got 1 sessions for read:user,repo,user:email,workflow...
```
- 一見認証が通っているように見える
- とはいえエラー内容的に「接続がおかしそうだなー」という感触
- ログインしろと出てるのでコマンドパレットからサインインを入れても無反応

## 困ったこと
久々にVScodeを本格化に触ったので **VScode上のGitHubのログイン状況を確認する場所がわからない** （調べればよかっただけ）

# 解決
- 試行錯誤と調べ物を重ねてる間にVScodeの左下のアカウントマークの存在を思い出す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579944/1e725fba-f996-4008-a0ce-fcb44929799c.png)
- 中身を見たらGitHubにログイン中の表示があったので「これか!?」と思いGitHubからログアウト→再ログインを行う
- ブラウザのGitHub側の指示に従いながら操作して無事に接続・認証成功✌️
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579944/96d7f6d4-265e-4790-b584-402595e4b9cb.png)

# 結果
無事にﾈｺﾁｬﾝをCopilotに召喚できました。かわいいね〜〜。
勉強のモチベに「ﾈｺﾁｬﾝに会いに行く」が爆誕しました。ﾈｺﾁｬﾝかわいいね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579944/0aeff1b2-ab37-42ad-b21f-19391afd437c.png)
過去利用した振り返りフレームワーク

過去に仕事上で利用したフレームワークに関する特徴と、利用してみた所感のまとめです。（随時更新予定）

## KPT
**Keep**（よかったこと、今後も続けたいこと）、**Problem**（問題点）、**Try**（試すこと）
振り返り対象の期間で会ったことをこれらの観点から付箋に書いて挙げていく。
現状の評価 → 改善点の洗い出し → 次のステップへの具体的なアクションプランを明確にすることができる。
10人以下が実施しやすい。（意見の整理のため）
### よかった点
- 思ったことをとりあえず上げやすい
- あったことや成果ベースで振り替えられるのでやりやすい
### よくなかった・うまくいかなかった点
- 付箋を読み上げて発表するだけのようになってしまうと発展性がない
- Tryが「今後やりたいこと」の側面が強くなっていた（それも挙げていいと思うが）
- Keepを「できたこと」として流してしまいがちでKeepできているかの検証ができていない
### フレームワークを活かすため注意したほうがいいと思った点
- 少人数での実施を念頭に、挙がったことに対して意見や感想を言ってProblemやTryに発展させる
- Tryは「今後やりたいこと」のほか、Problemに基づいたTryを挙げることを意識
- 前回のKeepに挙がったことも継続して取り上げる

## Fun Done Learn
**Fun**（楽しかったこと）、**Done**（やったこと・できたこと）、**Learn**（学んだこと）
3つの観点でベン図を書いて、そこに付箋を貼るなどして分類していく。

### よかった点
- 時期やスプリントによってチーム全体で偏りが出がちだったため、テーマの状況が直感的に把握しやすかった
- Funがあることで自分の気持ちを尺度の一つにできるので話しやすい（ポジティブな意見が出る）
- Learnを共有することで知識のアウトプットの一端になった
### よくなかった・うまくいかなかった点
- アクションプランを交えた活用ができなかった
### フレームワークを活かすため注意したほうがいいと思った点
- 最後に「次はどの領域を狙うか」「ベン図が重なっているところに持っていくには」などの観点からアクションプランを策定する
- やったことを洗い出してから各軸に振り分けるとより掘り下げができるかも

## タイムライン
プロジェクトの進行を時系列で振り返る。
二次元グラフのように、x軸を日時、y軸を感情（Good／Bad）として出来事を付箋で記入していく。
仕事上での振り返りだが、プロジェクトに関連しないプライベートなことでも記入可としてやっていた。
### よかった点
- 各出来事に対して心境の変化も取り上げていくため、メンバーの心境や状況を個別に理解しやすい（メンバーやチームの様子がよくわかる）
- 時系列順に振り返りができるため進行が滞らない
- 軸が日時と自分の感情なので、様々な視点から書きやすい
### よくなかった・うまくいかなかった点
- タイムラインで出た振り返り内容とアクションプランが乖離しがち
タイムラインだけでは今後目指すところを決めにくい
### フレームワークを活かすため注意したほうがいいと思った点
- 他の人のGoodを展開し活かせるようなファシリテートをする

## バラ・とげ・つぼみ
**バラ**（ポジティブな出来事）**とげ**（ネガティブな出来事）**つぼみ**（未来に向けて期待していること、ワクワクしていること）
振り返り対象の期間で会ったことをこれらの観点から付箋に書いて挙げていく。
KPTに近い？
### よかった点
- テーマがふんわりしていて幅広いため、漠然としたことでも書きやすい
- KPTと比較すると、つぼみ（展望）のところで「こうなったらいいな」の共有ができる → よく言えばイノベーションのきっかけになるような…
### よくなかった・うまくいかなかった点
- 事前共有できていないと「どういうこと？」となる人が出る
- 問題に対する直接的なアクションプランを立てるのには向いていない
### フレームワークを活かすため注意したほうがいいと思った点
- 振り返りを導入したてのプロジェクトや雑談を交えるくらいの軽さのほうが活きそう

## ポイント
いくつかフレームワーク使用して振り返りを実施しましたが、振り返りを行う際は通じて
- アクションプラン（じゃあ次回までにどうする？何をする？）まで話し合うこと
- 継続して定期的に実施し、前回のアクションプランの結果共有をすること
- 悪かった、できなかったことと同じくらい良かった、できたことを取り上げること

を主軸にしていくことが大切であると改めて感じました…。
重くなりすぎず、かつみんなが目標を明確化できるような振り返りの場を、フレームワークを活かして継続させていきたいです。
ChatGPTでブログ記事を書く時の最強プロンプト

ブログ記事を書く際のプロンプトの例をいくつか示します。目的やスタイルに応じて使い分けてください。  

---

### **1. SEO向けブログ記事のプロンプト**  
**プロンプト例:**  
> 「{キーワード}」について、検索上位を狙えるブログ記事を書いてください。記事の構成は以下のようにしてください。  
> - **タイトル:** 検索されやすいキーワードを含めた魅力的なタイトル  
> - **導入:** 読者の興味を引きつける簡潔な導入  
> - **本文:** 具体的な情報やデータ、事例を交えながら詳しく説明  
> - **結論:** 記事の要点をまとめ、読者が行動を起こしたくなるような締めくくり  
> また、適切な見出し（H2・H3）を入れて読みやすくしてください。  

**実際の使用例:**  
> 「猫の肉球の役割とお手入れ方法」について、SEOを意識したブログ記事を書いてください。タイトルや見出しを工夫し、検索流入を増やせるようにしてください。  

---

### **2. 読者の悩み解決型ブログ記事のプロンプト**  
**プロンプト例:**  
> 読者が抱える「{悩みや疑問}」について、わかりやすく解説するブログ記事を書いてください。以下の構成を守ってください。  
> - **問題提起:** 読者が共感できる形で悩みを提示  
> - **解決策:** 科学的な根拠や具体的な方法を提示  
> - **まとめ:** 読者が実践しやすいようにポイントを整理  
> 専門用語をできるだけ避け、初心者にもわかりやすく書いてください。  

**実際の使用例:**  
> 「猫がスマホに頭突きをする理由」について、科学的な説明を交えながら、飼い主が理解しやすい形で解説するブログ記事を書いてください。  

---

### **3. トレンド・話題のネタに関するブログ記事のプロンプト**  
**プロンプト例:**  
> 最近話題になっている「{トレンドの話題}」について、ブログ記事を書いてください。  
> - **トレンドの背景:** どのように話題になったのかを説明  
> - **詳細:** 具体的な事例やSNSでの反応などを紹介  
> - **今後の展開:** 今後の流行や関連情報を予測  
> 読者がシェアしたくなるような面白い内容を意識してください。  

**実際の使用例:**  
> 「Happy Yonezu」という猫ミームがどのようにして人気になったのか、その背景と拡散の理由について、SNSの反応を交えながら解説するブログ記事を書いてください。  

---

このようなプロンプトを活用すれば、狙ったテーマに沿ったブログ記事を書きやすくなります。目的に合わせてアレンジしてみてください！

実際の活用例は[猫のミームラボ](https://memelabo.com/)
個人的備忘録：mysqldumpによるMySQLのバックアップとリストアの基本を体系的にまとめてみた

## はじめに
このドキュメントでは、MySQLに存在する「flask_db（個人的なDB名）」データベースのバックアップ手順について詳しく説明します。

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

mysqldumpコマンドを使用して、データの保全や復元を目的とした安全なバックアップ方法を紹介しています。

## 書こうと思ったきっかけ
日々の開発や運用の中で、万が一のデータ消失に備えて定期的なバックアップは不可欠です。

特に「flask_db（個人的なDB名）」はアプリケーションと連携して使用される重要なデータベースであり、手動・自動問わず確実なバックアップ方法を記録しておく必要があると感じたため、この記事を書くことにしました。

---

## 登場シーン
MySQLには以下のデータベースが存在します:

```
mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| flask_db           |
| information_schema |
| mysql              |
| performance_schema |
| sys                |
+--------------------+
5 rows in set (0.02 sec)
```

この中の `flask_db（個人的なDB名）`のバックアップを行います。

---

## 基本的なバックアップコマンド

```bash
mysqldump -u ユーザー名 -p flask_db > flask_db_backup.sql
```

例) root ユーザーの場合:

```bash
mysqldump -u root -p flask_db > flask_db_backup.sql
```

実行後、パスワードの入力を求められます。

---

## オプションを付けたバックアップ

InnoDB 一貫性保持 + トリガー/ストアドプロシージャ含む:

```bash
mysqldump -u root -p --single-transaction --routines --triggers flask_db > flask_db_backup.sql
```

---

## バックアップ完了後の確認

```bash
ls -l flask_db_backup.sql
```

上記ファイルが作成されていることを確認しましょう。

---

## リストアの手順

バックアップファイルから復元する場合:

```bash
mysql -u root -p flask_db < flask_db_backup.sql
```

---

## 他オプションや自動化が必要な場合

保存先を変更したり、cron や Docker 環境での実行に対応したりすることも可能です。

---

## まとめ
MySQLの `flask_db` データベースのバックアップは、`mysqldump` コマンドを使うことで簡単かつ確実に行うことができます。

:::note warn
***基本的な使い方に加え、InnoDB向けのオプションやストアドプロシージャ・トリガーへの対応も紹介しました。***
:::

日常的な保守運用の一環として、ぜひ定期的なバックアップとその確認を習慣化しましょう！
HQCに関するメモ

符号系の公開鍵暗号HQCがつい最近PQCに選ばれた。
この暗号は符号は何でもいいが、暗号文に過剰なエラーを加えておき、秘密鍵を知っている人だけがそのエラーの重みを減らすことができる。
そして、その結果誤り訂正可能になる。
McElieceのように符号の構造を隠すのではなく、暗号文に細工をするところが大きな特徴である。
符号にはリードソロモン符号を外符号として、内符号をリードマラー符号を使うなど、かなりマニアックな符号化を使うようだ。
また公開鍵を作るときにエラーベクトル同士の積を撮る場合、Schur積と呼ばれる積を導入しエラーの重みが減るように出来ている。
ここでSchur積とは以下のような演算である。

$$ x\*y=(x_1,x_2,x_3,x_4)*(y_1,y_2,y_3,y_4)=(x_1y_1,x_2y_2,x_3y_3,x_4y_4) $$

$h$を$n$bitサイズの公開乱数とし、以下同様に秘密のエラーベクトルを$sk=(x,y)$とする。
公開鍵は$pk=(h,s=x+h\*y)$である。（これだけ）
暗号化は次のようにする。
２つのランダムベクトル$r=(r_1,r_2)$を使って$u=r_1+h\*r_2$とし、$v=mG+s\*r_2+e$とする。
暗号文は$c=(u,v)$である。
$$m=Decode.(v-u\*y)$$
ここで、エラーベクトルの重みは、
$$w(x\*r_2+r_1\*y+e)<t$$
となるのであろう。ここでエラーベクトル$hyr_2$が消えることでエラーベクトルの重みを減らしている。
.NETでC#を使用してPDFから画像を抽出する方法

PDF文書は、クロスプラットフォームでの安定性とフォーマットの保持性に優れているため、情報交換の主要な手段として広く利用されています。しかし、PDFファイルはコンテナ形式の特性上、内部リソースの効率的な抽出が技術的な課題となっています。特に、埋め込み画像のような非構造化データの取得ニーズはますます高まっています。プログラムによる自動抽出を実現することで、従来の手動キャプチャによる作業効率の限界を突破し、データアーカイブ、マルチメディアリソース管理、文書のインテリジェント解析など、より高度な用途に対応することができます。本記事では、**.NETプラットフォームでC#を使用してPDF文書から画像を抽出する方法**を紹介し、PDF画像の再利用を容易にする手法を解説します。

本記事で使用する方法は、無料の[Free Spire.PDF for .NET](https://jp.e-iceblue.com/introduce/free-spire-pdf-for-net.html)ライブラリを利用します。NuGetパッケージのインストール方法：`PM> Install-Package FreeSpire.PDF`。

## C#でPDF文書からすべての画像を抽出する方法

ライブラリの`PdfImageHelper`クラスを使用すると、PDF文書内の画像を抽出できます。まず、`PdfImageHelper.GetImagesInfo(PdfPageBase)`メソッドを使用して、PDFページ内の画像情報を`PdfImageInfo`コレクションとして取得します。その後、`PdfImageInfo.Image.Save()`メソッドを用いて、抽出した画像を指定の場所に保存します。以下は操作手順です：

1. `PdfDocument`オブジェクトを作成し、`PdfDocument.LoadFromFile()`メソッドでPDF文書を読み込みます。
2. `PdfImageHelper`オブジェクトを作成し、画像情報の取得に使用します。
3. 文書内のすべてのページをループ処理し、`PdfDocument.Pages[]`プロパティで各ページを取得します。
4. `PdfImageHelper.GetImagesInfo()`メソッドを使用して、現在のページの画像情報を`PdfImageInfo`コレクションとして取得します。
5. `PdfImageInfo.Image.Save()`メソッドで、抽出した画像を指定の場所に保存します。
6. リソースを解放します。

**コード例**
```csharp
using Spire.Pdf;
using Spire.Pdf.Utilities;
using System.Drawing;

namespace PDFの画像を抽出
{
    class Program
    {
        static void Main(string[] args)
        {
            // PdfDocumentインスタンスを作成
            PdfDocument pdf = new PdfDocument();

            // PDFドキュメントを読み込む
            pdf.LoadFromFile("Sample.pdf");

            // PdfImageHelperオブジェクトを作成
            PdfImageHelper imageHelper = new PdfImageHelper();

            // PDFドキュメント内のページを順に処理
            for (int i = 0; i < pdf.Pages.Count; i++)
            {
                // 現在のページを取得
                PdfPageBase page = pdf.Pages[i];
                // 現在のページに含まれる画像情報を取得
                PdfImageInfo[] imageInfos = imageHelper.GetImagesInfo(page);
                // ページ内の画像を順に処理
                for (int j = 0; j < imageInfos.Length; j++)
                {
                    // 現在の画像を保存
                    imageInfos[j].Image.Save($"Images/Page{i + 1}-Image{j + 1}.png");
                }
            }

            // リソースを解放
            pdf.Dispose();
        }
    }
}
```

抽出結果
![C#でPDF文書からすべての画像を抽出](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278784/2daffcd2-fab1-472b-91e5-6cf2a68070f8.png)

本記事では、.NETプラットフォームでC#を使用してPDF文書からすべての画像を抽出する方法について解説しました。
拡大されたcanvasでピクセルを綺麗に表示させたい時にはCSSの方が良かった

自分はピクセルなレトロなゲームみたいなものをCanvasで描画した。
## 小さいので`scale`で二倍にする
やってみたけど128pxは小さいので256pxしたいな～と思ってこのようにする。
(最低限に抜粋)
```html:HTML
<canvas width="256" height="256"></canvas>
```
```css:CSS
canvas{
    image-rendering: pixelated;
}
```
```js:JS
ctx.scale(2, 2);
```
## しかし`scale`はガビガビ
しかしこのようにしてピクセルな画像を表示したら
なんかピクセルがガビガビになった。
## そんな時にCSS
こんな風にしたら、ピクセルが綺麗なまま2倍に拡大できた。
```html:HTML
<canvas width="128" height="128"></canvas>
```
```css:CSS
canvas{
    image-rendering: pixelated;
    width: 256px;
    height: 256px;
}
```
```js:JS
// ctx.scale(2, 2);
```
## まとめ
canvasでピクセルが重要なレトロなものを拡大して描画したい場合、`ctx.scale(2, 2)`ではなくCSSで`width: calc(横サイズ * 2px); height: calc(縦サイズ * 2px);`(暗算も可)とすると綺麗。
HTMLのcanvasのサイズはJavaScriptのコンテキストで扱うサイズのままにする

なお一般的にはcanvas+CSSはよくないとされている。

https://qiita.com/WeilSpinor/items/babeeedc4846287e728d
【Android Studio】WebViewで下スワイプにより画面を閉じる

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694762/b8ef435f-f9fa-482b-8511-29fc1ab0b1fa.gif" width="200">

# 概要

AndroidのWebViewで下スワイプにより画面を閉じる処理について解説。
WebViewはJetpack Composeに対応していないため、[前に書いたこちらの記事](https://nakashimaakio.hatenablog.com/entry/2024/11/26/114827)は適用できなかった。

https://nakashimaakio.hatenablog.com/entry/2024/11/26/114827

スクロール可能なWebViewでも下スワイプで画面を閉じるようにする。

# 方法

## 1. 画面を閉じるリスナー作成

`GestureDetector`を使用して、タッチ位置を検知し、その位置に応じてY方向にビューにオフセットをかける。

## 2. WebViewに作成したリスナーをセット

1で作成したコードをWebViewにセット

# 続き

詳しいコードは[こちら](https://note.com/naka_inc/n/n843fc6c00fe9)に記述。

https://note.com/naka_inc/n/n843fc6c00fe9
自宅サーバーでサイトを運用してわかったこと(Apache)

# はじめに
僕的には自宅鯖を立てるのは賛成です。ですが、セキュリティは意識する必要があります。
あとメモリは結構食います。

# デメリット
僕のサーバーはデスクトップOSなので直でアクセスしてコードをいじることはできます。
ですが、モニターがなかったのでメインPCをモニター代わりとしていて、わざわざhdmiをつけるのが面倒でした。
そしてメインPCでSSHでやるようになってからは結構楽になりました。
##### ですが、！！
VS Codeで開くとCPUが100%に張り付くという問題が発生しました。
スペックもceleronってこともありますが、それでも結構ビビりました。
（ただファイルをいじるだけでこんなに重くなるとは。。）

### 集中アクセスに弱い！
集中アクセスに弱いです。　そりゃそう。
XEONとか使ってる人が多い理由も納得できます。
メモリは8GBですが16GBにしようかとも思ってます。（サーバーは強ければいい！）

# メリット
### 何のフレームワークでも動く！
これが一番だよこれが
レンタルサーバーだと、
・PHPだけ❤
・静的なやつとnode.jsは動くようにしといたよ☆
・静的だけで十分でしょっ！
とかこういうのばかりです。
そういってSQLとPHPが入っていてもSSLに対応してなかったり、制限が多かったり。。
それでもやろうと思えばやれると思いますが、やっぱりいろいろなフレームワークに触れることでできることも増える！

### 儲けようと思えば儲けれる
僕は別にブログとかやってないんで、
儲かってませんけど、レンタルサーバーとかでも商用利用禁止とかちらほらあるんで、気を付けてね。

# まとめ
なんでもしたい人は立ててもいいと思う！
だけどセキュリティーは結構気にしよう。って感じです。
OpenWeatherMapAPIを使用して日々の気候情報を集積してみた

### はじめに
近頃気候の変化で体調が影響受けていることが多い気がして、過去の気候情報を確認したかったが、
有料プランなどでないとなかなか過去の気候の実績情報がなかったため集積ツールを自作して日々集積してみることにした。
本記事の内容は、OpenWeatherMapAPIを利用して気候情報を取得する方法になります。

### 概要
本ツールは、Pythonを用いてOpenWeatherMapAPIから以下の情報を取得し、Excelファイルに記録するツール。
- 日付
- 時間
- 温度
- 湿度
- 風速
- 気圧
- 天気

### 手順
#### アカウント作成
アカウント作成については、以下の記事を参考にさせていただきました。
[無料天気予報APIのOpenWeatherMapを使ってみる](https://qiita.com/nownabe/items/aeac1ce0977be963a740)

アカウントを作成すると、デフォルトのAPIキーが払い出される。
キーの追加も可能だが、アクティベートには時間がかかる。

#### 実装
```python
import requests
import pandas as pd
from openpyxl import Workbook, load_workbook
from datetime import datetime
import os

# OpenWeatherMap API
API_KEY = ""  # APIキーを設定
LAT =  # 地点情報(緯度)
LON =  # 地点情報(経度)
WEATHER_URL = f"https://api.openweathermap.org/data/2.5/weather?lat={LAT}&lon={LON}&appid={API_KEY}&units=metric"

# Excel 出力パスを指定
output_dir = r""
os.makedirs(output_dir, exist_ok=True)
excel_file = os.path.join(output_dir, "weather_data.xlsx")  # ファイル名

def fetch_weather():
    """OpenWeatherMap API から現在の天気データを取得"""
    response = requests.get(WEATHER_URL)
    if response.status_code == 200:
        data = response.json()
        temp = data["main"]["temp"]  # 温度
        humidity = data["main"]["humidity"]  # 湿度
        wind_speed = data["wind"]["speed"]  # 風速
        pressure = data["main"]["pressure"]  # 気圧
        weather_description = data["weather"][0]["description"]  # 天気
        timestamp = datetime.now()
        return timestamp, temp, humidity, wind_speed, pressure, weather_description
    else:
        print("APIエラー:", response.status_code)
        print("詳細:", response.text)
        return None

def save_weather_data():
    """天気データを取得してExcelに記録"""
    weather_data = fetch_weather()
    if weather_data is None:
        return
    
    timestamp, temp, humidity, wind_speed, pressure, weather_description = weather_data
    month_str = timestamp.strftime("%Y-%m")  # シート名 (例：2025-04)
    date_str = timestamp.strftime("%Y-%m-%d")  # 日付 (例：2025-04-02)
    time_str = timestamp.strftime("%H:%M")  # 時間 (例：14:00)
    
    try:
        wb = load_workbook(excel_file)  # 既存ファイルを開く
    except FileNotFoundError:
        wb = Workbook()  # ファイルがない場合は新規作成

    if month_str not in wb.sheetnames:
        ws = wb.create_sheet(title=month_str)
        ws.append(["日付", "時間", "温度 (°C)", "湿度 (%)", "風速 (m/s)", "気圧 (hPa)", "天気"])
    else:
        ws = wb[month_str]

    ws.append([date_str, time_str, temp, humidity, wind_speed, pressure, weather_description])
    wb.save(excel_file)
    print(f"データ保存: {month_str} {date_str} {time_str} -> {temp}°C, {humidity}%, {wind_speed}m/s, {pressure}hPa, {weather_description}")

# 天気データ取得＆保存
save_weather_data()
```

### 実装のポイント
- APIキー、観測地点情報、出力ファイル名を適宜設定。
- データは月ごとにシートで管理。
- 定時実行には、Windowsのタスクスケジューラなどのバッチツールを利用。

### 終わりに
ECSなどのサーバを利用すれば問題ないが、ローカル環境では常時ネット接続が必要となる。
Excel管理ではなくデータベースを使用して、日々の体調情報も記録できるアプリ形式に拡張すればもっと便利になると考えられる。
OpenWeatherMapAPIや気候情報APIは活用の幅が広く、さまざまな用途で応用できると感じたため、今後も活用していきたい。
【React Native（Expo）】expo-speechを使ってのテキスト音声読み上げ

## 本記事を作成したきっかけ
現在、G'sACADEMYという学校で、
日々プログラミングの勉強に励んでおり、
卒業制作でReact Native（Expo）を使って
モバイルアプリの開発を行っております。
（未完成機能はありますが、3月末に提出済）

プロダクト自体はまだまだですが、
制作期間でのやったことを振り返って
OUTPUTしたい気持ちが芽生え、記事作成という方法で
OUTPUTしようと思った次第です。

### expo-speechとは
Expoを利用したReact Nativeのアプリで、
テキストを音声読み上げするためのライブラリです。

https://docs.expo.dev/versions/latest/sdk/speech/

### 実行環境
`Expo：52.0.36`
`react-native：0.76.7`
`expo-speech：13.0.1`

### 実装例
```react:speechSample.ts
import { router } from "expo-router"
import { useState } from "react"
import { Appbar, Text } from "react-native-paper"
import { SafeAreaView } from "react-native-safe-area-context"

// 本記事対象のライブラリです。
import * as ExpoSpeech from "expo-speech"

// 改行付きでテキスト作成
const text: string = "こんにちは！\nお元気ですか？\n私は元気です。"
export default function Speech() {

    const [isSpeaking, setIsSpeaking] = useState<boolean>(false)

    /**
     * テキストを音声合成する関数
     * isSpeaking状態がtrueの場合は音声合成を停止する
     * isSpeaking状態がfalseの場合は音声合成を開始する
     * 
     * @remarks
     * ExpoSpeech.speak()で音声合成を実行し、完了した場合はisSpeakingをfalseに戻す
     * エラーが発生した場合はisSpeakingをfalseに戻す
     */
    const handleSpeech = () => {
        // 再生中の場合は、音声を停止する。
        if (isSpeaking) {
            ExpoSpeech.stop()
            setIsSpeaking(false)
            return
        }

        setIsSpeaking(true)

        // expo-speechのパラメータ設定
        const options = {
            language: 'ja',  // 日本語は'ja'を指定
            pitch: 1.0,  // 音声のピッチ
            rate: 1.0,  // 音声速度
            onDone: () => setIsSpeaking(false),  // 再生完了時の処理
            onError: () => setIsSpeaking(false) // 再生中にエラーが発生した時の処理
        }
        // テキストの内容を音声読み上げ
        ExpoSpeech.speak(text, options)
    }

    // UIの部分の補足は特にしません。
    // ヘッダー部に再生用・一時停止用アイコンを配置して、
    // アイコンを押下すると、speakingの値が変更して
    // 音声の再生・一時停止とアイコンが変更されます。
    return (
        <SafeAreaView edges={[]}>
            <Appbar.Header>
                <Appbar.BackAction onPress={() => router.back()} />
                <Appbar.Action
                    icon={isSpeaking ? "pause-circle" : "play-circle"}
                    size={32}
                    onPress={handleSpeech}
                />
            </Appbar.Header>
            <Text>{text}</Text>
        </SafeAreaView>
    )
}
```

こちらでAndroidエミュレータ、
iOSシミュレーターを起動して再生ボタンを押下すると、
音声が読み上げられます。

expo-speechを使って、
こんな簡単にText-To-Speechが実現できるのかと
驚きました。
今後はSpeech-To-Textの実装したいので、
実現できたら記事を作成して展開したいなと思います。
GraphQL(無駄のないデータ操作ができるAPIクエリ言語)とは？💹

## はじめに

先日、実務で初めて触れたGraphQLについて、キャッチアップした内容をまとめておきます！

## 目次

1. [GraphQLとは？](#-graphqlとは)
2. [なぜ開発されたのか？](#-なぜ開発されたのか)
3. [REST APIとの違い](#-rest-apiとの違い)
4. [Query、Mutation、Subscriptionって何???](#-querymutationsubscriptionって何)
5. [実際の導入事例](#-実際の導入事例)
7. [まとめ](#-まとめ)
8. [参考文献](#-参考文献)

## 🧷 GraphQLとは？
GraphQLは「**APIのクエリ言語**（Query Language）」です。
簡単に言うと、「欲しいデータだけを指定して取得できる仕組み」

普通のAPI（REST API）だと、サーバーが決めたデータがそのまま返ってくるけど、GraphQLならクライアント（フロントエンド）が「このデータだけ欲しい！」と細かく指定できる。

## 🧷 なぜ開発されたのか？
2012年に主に3つの理由からFacebookが開発！

### 1. オーバーフェッチ（不要なデータが多すぎる）

REST APIだと「全部入りのデータ」が返ってくることが多い。

でも、スマホアプリとかだと「一部のデータだけ欲しい」のに、無駄にデータを取ることになってしまう。

### 2. アンダーフェッチ（欲しいデータが足りない）

例えば「ユーザー情報＋その投稿一覧」が欲しいとき、REST APIだと「ユーザー情報API → 投稿一覧API」と2回リクエストすることが多い。

### 3. エンドポイントが増えすぎる

REST APIは「ユーザー情報用」「投稿一覧用」など、用途ごとにAPIを作るから、エンドポイントがその分増える。

**💡 GraphQLなら「/graphql」みたいに1つのエンドポイントだけでOK！**

## 🧷 REST APIとの違い
| 比較項目 | REST API | GraphQL |
|-----------|-----------------|-----------|
| データ取得 | 決められた形のデータが返る | 必要なデータだけ指定できる |
| エンドポイント数 | 用途ごとに増える | 1つでOK |
| オーバーフェッチ | あり（不要なデータも取得） | なし（欲しいデータだけ取得） |
| アンダーフェッチ | あり（複数APIを呼ぶ必要あり） | なし（1回のリクエストでOK）|

## 🧷 Query、Mutation、Subscriptionって何???
GraphQLには3つの主要な操作がある！

### 1. Query（データ取得）
例えば「ユーザーの名前とメールアドレスが欲しい！」
```graphql
query {
  user(id: 1) {
    name
    email
  }
}
```
**💡 必要なデータだけ取れる！**

### 2. Mutation（データ更新・作成・削除）
例えば「新しい投稿を作成する」
```graphql
mutation {
  createPost(title: "GraphQL最高！", content: "RESTより便利") {
    id
    title
  }
}
```
**💡 データを変更するリクエスト**

### 3. Subscription（リアルタイム更新）
WebSocketを使って、データの更新をリアルタイムに取得できる

例えば「新しいコメントが投稿されたら即座に通知」
```graphql
subscription {
  newComment(postId: 1) {
    id
    content
    author {
      name
    }
  }
}
```
**💡 チャットアプリや通知系の機能でめっちゃ便利！**

## 🧷 実際の導入事例
GraphQLはめっちゃ多くの企業で使われてる！

* X → モバイルアプリのデータ取得で活用
* GitHub → GitHub API v4はGraphQLベース
* Shopify → eコマースのAPIとしてGraphQLを採用
* Twitter → 一部の内部APIでGraphQLを活用
* Netflix → ユーザーごとにカスタムデータを取得するために使用

## 🎉 まとめ
* GraphQLは「**無駄のないデータ操作(取得・更新)ができるAPIクエリ言語**」
* 特に以下が超便利ポイント🏳️‍🌈
    * オーバーフェッチ・アンダーフェッチを解決
    * エンドポイントを1つに統一
    * リアルタイム更新が簡単
## 💫 参考文献
* [GraphQL](https://graphql.org/)
* [【図解解説】これ1本でGraphQLをマスターできるチュートリアル【React/TypeScript/Prisma】](https://qiita.com/Sicut_study/items/13c9f51c1f9683225e2e)
* [GraphQL と REST の比較](https://aws.amazon.com/jp/compare/the-difference-between-graphql-and-rest/)
iPhoneのメモ帳をテキストファイルにするスクリプト

iPhoneのメモ帳が10,000件を超えました。すっごい便利。しかしこれが消えたら大変なので、テキストに出力してバックアップを取る事にしました。

ChatGPTに聞いて、ローカルに合わせて少々改造
MacのAppleScriptでつくりました

これでひと安心です

```memo2txt.scpt
tell application "Notes"
    -- ★ ここにエクスポートしたいフォルダ名を入れる
    set targetFolderName to "My Folder" -- ← 変更してね！
    
    -- 指定したフォルダを探す
    set targetFolder to missing value
    repeat with aFolder in folders
        if name of aFolder is targetFolderName then
            set targetFolder to aFolder
            exit repeat
        end if
    end repeat
    
    if targetFolder is missing value then
        display dialog "フォルダが見つかりません: " & targetFolderName buttons {"OK"} default button "OK"
        return
    end if
    
    -- メモを取得
    set noteList to notes of targetFolder
    set saveFolder to (path to desktop folder) as text
    
    repeat with aNote in noteList
        set noteTitle to name of aNote
        set noteContent to body of aNote
        
        -- HTMLタグを削除
        set cleanContent to my removeHTMLTags(noteContent)
        
        -- ファイル名に使えない文字を置換
        set cleanTitle to my replaceChars(noteTitle, {":", "/", "\\", "*", "?", "\"", "<", ">", "|"}, "_")
        set filePath to saveFolder & cleanTitle & ".txt"
        
        -- テキストファイルに保存
        my writeToFile(filePath, cleanContent)
    end repeat
end tell

-- HTMLタグを削除する関数
on removeHTMLTags(inputText)
    set AppleScript's text item delimiters to {"<br>", "</div>", "<div>", "<p>", "</p>", "<b>", "</b>", "<i>", "</i>", "<u>", "</u>", "<span>", "</span>", "&nbsp;"}
    set textItems to text items of inputText
    set AppleScript's text item delimiters to ""
    set cleanText to textItems as text
    set AppleScript's text item delimiters to ""
    return cleanText
end removeHTMLTags

-- 文字列の置換関数（ファイル名に使えない文字を「_」に変換）
on replaceChars(textToFix, charList, replacement)
    repeat with aChar in charList
        set AppleScript's text item delimiters to aChar
        set textToFix to text items of textToFix
        set AppleScript's text item delimiters to replacement
        set textToFix to textToFix as text
    end repeat
    set AppleScript's text item delimiters to ""
    return textToFix
end replaceChars

-- テキストをファイルに書き込む関数
on writeToFile(filePath, content)
    set fileRef to open for access file filePath with write permission
    set eof fileRef to 0
    write content to fileRef
    close access fileRef
end writeToFile

```
私の考え

また一個のトピックについて書きます自分の意見です。CSSはプログラミング言語じゃない言うのたくさんいます。基本はcase cading style sheet と言います。HTML CSS言語じゃないでもこの二つないとソフトウェアエンジニア無理かなと感じます。だからwebの開発勉強する前最初にこの二つmarkup language とstylesheet勉強してから前の方すすむのは良いです。最近皆んな最初にフレムワクの方勉強したり　するのでそれは良い方法じゃないと思います。
🧲 距離に負けないチーム力！リモートワーク時代のチームビルディング術

## 🏠 はじめに

コロナ禍以降、私たちの働き方は大きく変わりました。  
特にIT業界では、リモートワーク（テレワーク）が当たり前となり、物理的に会わないままプロジェクトを進めるのがスタンダードになっています。

しかし、その便利さの裏で、

- 「チームに一体感がない」
- 「新しいメンバーが馴染みにくい」
- 「雑談がなくて寂しい」

といった **"人のつながり"に関する悩み**が増えています。

この記事では、そんなリモートワーク時代に必要な「**チームビルディング**」に焦点をあて、**具体的な施策と実践のポイント**をまとめました。


## 💡 リモート環境の課題とは？

まずは、リモートワークにおける代表的な課題を振り返ってみましょう。  
課題を理解することで、どんなチームビルディングが必要かが見えてきます。

### 📌 雑談の自然発生がなくなる
オフィスでは、給湯室やデスク周りなどで自然に会話が生まれていました。  
しかし、リモートでは「用がない限り話さない」という状況になりがちです。

### 📌 チームにいる実感が薄れる
顔を合わせる機会がないと、心理的に「孤立」しやすくなります。  
特に新人や中途入社のメンバーは馴染みにくいと感じがちです。

### 📌 コミュニケーションコストの増加
ちょっとした確認にもSlackや会議を通す必要があり、気軽さが失われます。  
また、テキストだけでは意図が伝わりづらいことも多いです。

### 📌 チームの雰囲気や文化が伝わらない
企業文化やチームの雰囲気は「場」によって伝わる部分も多いため、オンラインだけでは共有しづらいのが現実です。


## ✅ チームビルディング施策10選（実践例つき）

### 1. 🎤 バーチャル雑談タイムの導入

**毎日の朝会後に5分だけ雑談する時間を設ける**ことで、自然な会話の場が生まれます。  
特におすすめなのは、「お題」を決めてみんなで話すスタイルです。

#### ✅ 例：
- 最近ハマっている食べ物は？
- 学生時代の部活は？
- 旅行で行きたい国は？

小さなことでも会話の糸口になると、相手の人柄が見えてチームとしての親近感が増します。

---

### 2. 🍱 オンラインランチ会・飲み会

月1〜2回程度、**希望者で集まるランチ会や飲み会**も効果的。  
仕事の延長で話すのではなく、**"ただ一緒に過ごす"時間**がチームの関係性を築くカギです。

#### ✅ ポイント：
- ZoomやGoogle MeetなどでOK
- 1時間以内で気軽に
- お菓子や飲み物を事前に送ると盛り上がる（Uber Eats クーポンも◎）

---

### 3. 💬 Slackの「#雑談」チャンネルを活性化

SlackやDiscordの「#雑談」チャンネルは、**チームの空気を和ませる大事なスペース**です。

#### ✅ こんな使い方が人気：
- 猫・犬の写真をシェア
- 今日のランチ報告
- ガジェット紹介
- 推しの話（アニメ・ゲームなど）

**スタンプ（絵文字）文化**を促進することで、反応のハードルも下がります。

---

### 4. 🧑‍💻 ペア作業／ペアプロの導入

定期的に**ランダムでペアを組み、作業やコードレビューを一緒に行う**ことで、技術交流と信頼関係が深まります。

#### ✅ 導入のコツ：
- 毎週「ペアの日」を設ける（例：水曜午前）
- 技術面だけでなく「雑談込み」でOKと伝える
- 経験の差があるペアも歓迎（相互成長が期待できる）

---

### 5. 🙌 「ありがとう」を伝える仕組み

感謝の言葉は、チームの雰囲気を前向きに変えます。

#### ✅ 実践例：
- Slackに「#thanks」チャンネルを作る
- 毎週金曜に「一番感謝した人」を共有するイベントを実施
- Googleフォームで匿名のありがとうメッセージを集める

---

### 6. 🎯 定期的な「オフサイト」イベント（オンライン版）

オフラインでの合宿が難しい今でも、**オンラインでの半日イベント**は実施可能です。

#### ✅ オンラインオフサイトのアイデア：
- MiroやFigJamを使った価値観共有ワークショップ
- バーチャル脱出ゲームやクイズ大会
- 「理想のチームとは？」をテーマにした対話会

---

### 7. 🎲 ゲームを取り入れる

ゲームはチームの距離を一気に縮める手段です。  
小さな時間でも「一緒に笑える」瞬間は大切。

#### ✅ おすすめゲーム：
- Gartic Phone（お絵描き伝言ゲーム）
- Skribbl.io
- Among Us（会話のトレーニングにも）
- Zoomでのビンゴ大会

---

### 8. 🧭 チームカルチャーガイドの作成

新しく入るメンバー向けに、**チームのカルチャーを伝えるドキュメント**を作るのもおすすめです。

#### ✅ 内容例：
- チーム内でのNG行動・推奨行動
- よく使うSlackスタンプ辞典
- 1日の流れ、暗黙のルール

---

### 9. 📣 オープンコミュニケーションの促進

「困っていること」「改善したいこと」を遠慮なく言える空気をつくるには、**マネージャーだけでなくメンバー全体の意識づけ**が必要です。

#### ✅ 実践例：
- 「つらいこと報告会」（匿名でもOK）
- 「自分の失敗を語る会」などの心理的安全性強化施策
- ピアレビュー時にポジティブフィードバックを必ず入れる

---

### 10. 📅 1on1を定期化する

マネージャーやリーダーとの1on1は、**個々のメンバーのモチベーションを保つ**ために欠かせません。

#### ✅ コツ：
- 最低でも月1回、30分程度
- 雑談も含めてOK
- 「話す内容がない」というメンバーにも、軽い話題から始める

---

## 📈 チームの変化を可視化しよう

施策を実施するだけでなく、**定期的に振り返る仕組み**を持つことも大切です。

### 🛠 チェック手段の例：
- **KPT振り返り**（Keep / Problem / Try）
- **月1回のミニアンケート**
- **NotionやSlackで「今の気持ち」を可視化するカラム**

少しずつでも、チームにとって「話しやすい」「動きやすい」空気が育つことを目指しましょう。

---

## ✍️ おわりに："人とのつながり"はつくれる

リモートワークは、効率的な働き方を可能にする一方で、**「感情」や「つながり」を意識的に育むことが求められる時代**でもあります。

だからこそ、日々の雑談、小さな「ありがとう」、一緒に笑える時間を**「設計」することがチームビルディングの第一歩**です。

無理なく、楽しく、続けられる形で、  
あなたのチームにもぜひ合った工夫を取り入れてみてください！


## 💬 コメント大歓迎！

この記事で紹介した施策の中で、  
「うちのチームでもやってる！」「こうアレンジしたら良かった！」という声があれば、ぜひコメントで教えてください！

また、「こんな悩みがあるけどどうすればいい？」という相談も大歓迎です😊
nis1バージョンアップメモ(v0.6.101→v0.6.102)

:::note warn
0.6.102のtgzもダウンロード可能になってます。
https://github.com/NemProject/nem/releases/tag/v0.6.102
:::


nis1ノードの最新バージョンが公開されました

https://github.com/NemProject/nem/releases/tag/v0.6.102

以下、v0.6.101からv0.6.102にアップデートした手順です。
間違ってるところがあったらメンゴ

### 元ネタ

https://qiita.com/curupo/items/3d36642c9a19953e8a82

### 参考資料（超絶感謝）

https://qiita.com/ccHarvestasya/items/4e1601e5052e41dc1399


必要なものをインストール
```
sudo apt install maven git jq
```

最新版をクローン
```
mkdir ~/test
cd ~/test
git clone https://github.com/NemProject/nem.git -b v0.6.102 nis1
```

ビルド
```
cd ~/test/nis1/infra
./package.build.sh
./package.prepare.sh
```

ネットワークの指定がされていないので、メインネットかテストネットかを設定する
差分を確認しておく
```
diff ~/package/nis/config.properties ~/test/nis1/infra/package/nis/config.properties
vi ~/test/nis1/infra/package/nis/config.properties
-nem.network = ^M
+nem.network = mainnet
```

現環境の設定をコピーする1
```
ls ~/package/nis/config-user.properties
ls ~/test/nis1/infra/package/nis/config-user.properties
cp ~/package/nis/config-user.properties ~/test/nis1/infra/package/nis/config-user.properties
diff ~/package/nis/config-user.properties ~/test/nis1/infra/package/nis/config-user.properties
```

現環境の設定をコピーする2
```
diff ~/package/nix.runNis.sh ~/test/nis1/infra/package/nix.runNis.sh
cp ~/package/nix.runNis.sh ~/test/nis1/infra/package/nix.runNis.sh
diff ~/package/nix.runNis.sh ~/test/nis1/infra/package/nix.runNis.sh
```

実行権限を付与する
```
sudo chmod +x ~/test/nis1/infra/package/nix.runNis.sh
```

nis1を停止後、バックアップおよび最新バージョンを指定の場所に配置し、最後に最新版をnis1を起動
```
curl http://localhost:7890/node/extended-info | jq
nis1のPIDを確認
ps aux | grep java
プロセスを停止
kill xxxx
ps aux | grep java
curl http://localhost:7890/node/extended-info | jq

バックアップ
cd ~/
mv ~/package ~/package_old_v0_6_101

最新版を配置
mv ~/test/nis1/infra/package ~/

起動
$ cd ~/package
$ ./nix.runNis.sh
$ curl http://localhost:7890/node/extended-info | jq
```

よしなに。

※もし、データベースが壊れたとかでノードが起動しなくなった場合は ~/nem ディレクトリを全消ししてイチから再同期すること
これからJavaを学ぶなら必見！初心者でも安心な実践的なJava講座を紹介

こんにちは、韓国在住のsanaです！

Javaを学びたい方必見！こんな方にオススメの講座を厳選しました📚✨

もしあなたがこんな悩みを持っているなら、この講座がぴったりです！💡

:one: SpringBootやREST APIを素早く学びたい方
もし、短時間で実践的な開発スキルを身に付けたいなら、【1時間で終わるSpringBoot + REST API講座】がオススメ！🚀
初心者でも理解しやすい内容で、現場ですぐ使えるスキルが手に入ります！⚡️

https://u.inf.run/41VQjsD

:two: Javaの基礎をしっかり学び直したい方
Javaの実践的なスキルを学びたい方には【実践Javaプログラミング（Renew）】講座がオススメ！📚 基礎から応用まで、現場で使えるスキルを実際に手を動かして学べます！👨‍💻

https://u.inf.run/3XKrZrj

:three: Javaの基本をしっかりマスターしたい方
初心者でも安心して学べる【なるほどコーディング！Java 基本講座】！📘オブジェクト指向やJavaの文法を基礎から学び、コーディングに自信が持てます！💻

https://u.inf.run/3DSbZwN


どの講座も、初心者から実務に役立つスキルを身に付けたい方に最適！自分に合った講座で、スキルアップを目指してみましょう💪🎯

ファイティン！
Mac での手動ルート証明書の追加

## 確認環境
macOS Sequoia version 15.4
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3971725/8f37272f-3b12-4fb1-b740-0176e7fa1ad3.png)

## 手順
1. ⌘ + Space で、キーチェーンで検索
2. キーチェーンアクセス.app を開く
3. 新しいパスワードアプリで〜と表示されるので、[キーチェーンアクセスを開く] を選ぶ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3971725/a946231f-3f27-42e0-a102-92871080c8ec.png)
4. パスワードを聞かれるので入力
5. キーチェーンアクセスが立ち上がり、ログインで、証明書を選ぶとすでに設定されているルート証明書が見れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3971725/543331b4-660c-4a7f-8725-ea9618efbb16.png)
6. ファイルメニューから、読み込むで、.cer のファイルを読み込みます。これでルート証明書は追加されますが、まだ信頼されていません。
7. 登録されたルート証明書を右クリックし、情報を見るを選びます
7. 信頼カテゴリでこの証明書を使用するときを「常に信頼」にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3971725/dcac00d3-cb10-4757-81e7-055325ed7e31.png)
7. ウィンドウを閉じると、管理者パスワードの入力を求められるので入力します。

以上で、ルート証明書が認識されるようになります。
Vue 3 + FetchでREST APIを呼び出す方法

# Vue 3 + FetchでREST APIを呼び出す方法

REST APIの仕組みがわかったら、次は実際に呼び出してデータを使ってみましょう！この記事では、Vue 3 と Fetch API を使って、外部のREST APIからデータを取得・表示する方法を解説します。

---

## 目次
1. [前提環境](#前提環境)
2. [Fetch APIの基本](#fetch-apiの基本)
3. [Vueでの実装ステップ](#vueでの実装ステップ)
4. [GETリクエストの例](#getリクエストの例)
5. [POSTリクエストの例](#postリクエストの例)
6. [エラーハンドリング](#エラーハンドリング)
7. [まとめ](#まとめ)

---

## 前提環境
- Vue 3 プロジェクトが作成済み（ViteやVue CLIでOK）
- Composition API（`<script setup>`）を使用

---

## Fetch APIの基本

JavaScript標準の `fetch()` 関数を使うことで、外部APIと通信できます。

```js
fetch('https://api.example.com/users')
  .then(response => response.json())
  .then(data => console.log(data));
```

- `.json()` でレスポンスをJSON形式として取得します
- 非同期なので `async/await` を使うのが主流です

---

## Vueでの実装ステップ

1. `ref` で状態（データ）を定義
2. `onMounted()` で初回読み込み時にデータ取得
3. テンプレートに表示

---

## GETリクエストの例

```vue
<script setup>
import { ref, onMounted } from 'vue';

const users = ref([]);

onMounted(async () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/users');
  users.value = await res.json();
});
</script>

<template>
  <h2>ユーザー一覧</h2>
  <ul>
    <li v-for="user in users" :key="user.id">
      {{ user.name }} - {{ user.email }}
    </li>
  </ul>
</template>
```

無料のモックAPIサービス [JSONPlaceholder](https://jsonplaceholder.typicode.com/) を使用しています。

---

## POSTリクエストの例

```js
const createUser = async () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      name: 'New User',
      email: 'new@example.com'
    })
  });

  const data = await res.json();
  console.log('作成されたユーザー:', data);
};
```

- `Content-Type: application/json` を忘れずに
- `body` は JSON 文字列で送信

---

## エラーハンドリング

```js
try {
  const res = await fetch(url);
  if (!res.ok) throw new Error('APIエラー');
  const data = await res.json();
} catch (error) {
  console.error('通信エラー:', error);
}
```

- `res.ok` で HTTP ステータスチェック
- ネットワークエラーも `try-catch` で対応

---

## まとめ

- `fetch()` を使って簡単にAPIと通信できる
- `onMounted()` と `ref` を使えばVueで非同期表示も簡単
- POST/PUT/DELETEも `fetch` のオプションを使えば対応可能
Vue 3 + AxiosでREST APIを呼び出す方法

# Vue 3 + AxiosでREST APIを呼び出す方法

REST APIの仕組みがわかったら、次は実際に呼び出してデータを使ってみましょう！この記事では、Vue 3 と HTTP クライアント「Axios」を使って、外部のREST APIからデータを取得・表示する方法を解説します。

---

## 目次
1. [前提環境](#前提環境)
2. [Axiosとは？](#axiosとは)
3. [Vueでの実装ステップ](#vueでの実装ステップ)
4. [GETリクエストの例](#getリクエストの例)
5. [POSTリクエストの例](#postリクエストの例)
6. [エラーハンドリング](#エラーハンドリング)
7. [まとめ](#まとめ)

---

## 前提環境
- Vue 3 プロジェクトが作成済み（ViteやVue CLIでOK）
- Composition API（`<script setup>`）を使用
- `axios` がインストールされている

```bash
npm install axios
```

---

## Axiosとは？

Axios は、HTTP通信を簡単に行うための JavaScript ライブラリです。標準の `fetch()` よりも書きやすく、デフォルト設定やレスポンスの処理が便利なのが特長です。

```js
import axios from 'axios';

axios.get('https://api.example.com/users')
  .then(res => console.log(res.data))
  .catch(err => console.error(err));
```

---

## Vueでの実装ステップ

1. `ref` で状態（データ）を定義
2. `onMounted()` で初回読み込み時にデータ取得
3. テンプレートに表示

---

## GETリクエストの例

```vue
<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const users = ref([]);

onMounted(async () => {
  try {
    const res = await axios.get('https://jsonplaceholder.typicode.com/users');
    users.value = res.data;
  } catch (err) {
    console.error('取得失敗:', err);
  }
});
</script>

<template>
  <h2>ユーザー一覧</h2>
  <ul>
    <li v-for="user in users" :key="user.id">
      {{ user.name }} - {{ user.email }}
    </li>
  </ul>
</template>
```

---

## POSTリクエストの例

```ts
import axios from 'axios';

const createUser = async () => {
  try {
    const res = await axios.post('https://jsonplaceholder.typicode.com/users', {
      name: 'New User',
      email: 'new@example.com'
    });
    console.log('作成されたユーザー:', res.data);
  } catch (err) {
    console.error('作成失敗:', err);
  }
};
```

- `axios.post(url, データ)` で簡潔にPOST可能
- ヘッダーに `Content-Type` を指定しなくても自動で付けてくれる

---

## エラーハンドリング

Axiosはエラーを `catch()` または `try-catch` で受け取れます。

```ts
try {
  const res = await axios.get('/api/some-data');
  // 成功時処理
} catch (error) {
  if (error.response) {
    console.error('サーバー応答エラー:', error.response.data);
  } else if (error.request) {
    console.error('リクエストは送信されたが応答なし');
  } else {
    console.error('その他のエラー:', error.message);
  }
}
```

---

## まとめ

- Axiosは `fetch` よりも便利で人気が高い
- Vue 3 との相性もよく、非同期処理も簡単に書ける
- `GET`, `POST`, `PUT`, `DELETE` など柔軟に対応可能
Bedrock ナレッジベース が削除できないときの対処法（dataDeletionPolicy: RETAIN）


## はじめに

Bedrock の ナレッジベース 機能を使っていて、
**「S3やRDSを削除したあとに、ナレッジベースが削除できなくなった…」**
という状況に陥った方へ

本記事では、削除失敗の原因と解決方法として **`dataDeletionPolicy` を `RETAIN` に更新するアプローチ**を紹介します。

## 前提条件

この記事は以下の構成を前提としています。
- リージョン：`ap-northeast-1`（東京）
- Bedrock ナレッジベース を使用
- データソースは S3（＋内部的に自動作成された RDS が存在）
- 誤って S3 バケットを **先に削除してしまった**
- コンソールやCLIから Knowledge Base を削除しようとしたがエラー

## 発生した課題

ナレッジベース をコンソールで削除しようとすると、**削除失敗**のままステータスが止まりました。

CLIから削除しても以下のようなエラー：

```json
{
  "status": "DELETE_UNSUCCESSFUL",
  "failureReasons": [
    "Unable to delete data from vector store for data source with ID XXXXXXXX. Check your vector store configurations and permissions and retry your request. If the issue persists, consider updating the dataDeletionPolicy of the data source to RETAIN and retry your request."
  ]
}
```

## 解決方法：dataDeletionPolicy を RETAIN に変更
Bedrockは削除時、S3やRDSなどのベクトルストアデータも削除しようとします。

ところが、S3がすでに存在しないため、削除処理が内部的に失敗。
これを回避するため、「もうデータは消さなくていい」と明示する必要があります。

それが dataDeletionPolicy: RETAIN の設定です。

#### ① データソースの設定を確認
まずは対象のKnowledgeBase IDとDataSource IDを確認します。

```bash
aws bedrock-agent list-knowledge-bases --region ap-northeast-1
```
```bash
aws bedrock-agent list-data-sources
  --knowledge-base-id XXXXXXXX
  --region ap-northeast-1
```
#### ② 現在のデータソース設定を取得
```bash
aws bedrock-agent get-data-source
  --knowledge-base-id XXXXXXXX
  --data-source-id XXXXXXXX
  --region ap-northeast-1
```
これで name, bucketArn, type などが分かります。

#### ③ dataDeletionPolicy を RETAIN に更新
以下のように CLI で上書きします：

```bash
aws bedrock-agent update-data-source
  --knowledge-base-id XXXXXXXX
  --data-source-id XXXXXXXX
  --name "XXXXXX"  # データソース名
  --data-source-configuration '{
    "type": "S3",
    "s3Configuration": {
      "bucketArn": "arn:aws:s3:::XXXXXXX"  # ← 削除済みでもOK
    }
  }'
  --data-deletion-policy RETAIN
  --region ap-northeast-1
```
※削除されたS3バケットのARNでも設定できます。

#### ④ 再度 Knowledge Base を削除
```bash
aws bedrock-agent delete-knowledge-base
  --knowledge-base-id XXXXXXXX
  --region ap-northeast-1
  ```
このコマンドが正常に受理されれば、非同期で削除処理が開始されます。
数分後、以下のコマンドで削除完了を確認
```bash
aws bedrock-agent get-knowledge-base
  --knowledge-base-id XXXXXXXX
  --region ap-northeast-1
```

`An error occurred (ResourceNotFoundException)`
と出れば削除完了です！
Pythonで学ぶ鉄道模型工学の概算

##  はじめに
本記事では、鉄道模型工学の概念を解説するためのPythonコードを紹介します。
##  参考リンクまとめ

https://rtmrw.parallel.jp/engineering/eng-20.html

https://rtmrw.parallel.jp/engineering/eng-01.html

##  Pythonコード


```python
import numpy as np
import matplotlib.pyplot as plt

# 定数
a = 30.05
b = -39.213

# 電圧の範囲（仮定）
voltages = np.linspace(0, 5, 100)  # 電圧を0Vから5Vの範囲で100点生成

# 車速（km/h）を計算
speeds_kmh = a * voltages + b

# 車速を秒速（m/s）に変換
speeds_ms = speeds_kmh / 3.6  # 1 km/h = 1/3.6 m/s

# プロット
plt.figure(figsize=(8, 6))
plt.plot(voltages, speeds_ms, label='Speed (m/s)', color='b')
plt.title('Speed vs Voltage')
plt.xlabel('Voltage (V)')
plt.ylabel('Speed (m/s)')
plt.grid(True)
plt.legend()
plt.show()


```
結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4046871/1d964b79-94cf-4d3c-996e-46ef022a2225.png)

```python
import numpy as np

# 仮定するパラメータ設定（それらしい値を使用）
w1 = 12  # 駆動輪の軸荷重 (N)
w2 = 8   # 従動輪の軸荷重 (N)
theta_deg = 5  # 傾斜角度 (度)
theta_rad = np.deg2rad(theta_deg)  # ラジアンに変換

# 全車両重量
W0 = w1 + w2

# レールからの抗力
f1 = w1 * np.cos(theta_rad)
f2 = w2 * np.cos(theta_rad)

# 出力（プリント風）
print("===== 鉄道模型工学 計算プリント =====")
print(f"駆動輪の軸荷重 w1 = {w1} N")
print(f"従動輪の軸荷重 w2 = {w2} N")
print(f"傾斜角 θ = {theta_deg} 度")
print("-----------------------------------")
print(f"(1) 全車両重量 W0 = w1 + w2 = {W0:.2f} N")
print(f"(2) レールからの抗力 f1 = w1 * cosθ = {f1:.2f} N")
print(f"(3) レールからの抗力 f2 = w2 * cosθ = {f2:.2f} N")
print("===================================")


```
結果

===== 鉄道模型工学 計算プリント =====
駆動輪の軸荷重 w1 = 12 N
従動輪の軸荷重 w2 = 8 N
傾斜角 θ = 5 度
-----------------------------------
(1) 全車両重量 W0 = w1 + w2 = 20.00 N
(2) レールからの抗力 f1 = w1 * cosθ = 11.95 N
(3) レールからの抗力 f2 = w2 * cosθ = 7.97 N
===================================
VMWare Workstation Pro17 のインストール方法

VMWare Workstation Pro17の入手の仕方は下記を参照

https://zenn.dev/isi00141/articles/d3b7bb18165d5b

①ダウンロードフォルダから"VMware-workstation-full-17.6.3-xxxxxx"を選択してダブルクリックをする。
②下記の画面になったら"次へ(N)をクリック"
![インストール1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3827128/23327fe6-0c02-429b-8065-eba2839d85b1.jpeg)
③使用許諾契約書が出てきたら"使用許諾契約書に同意します(A)"にチェックを入れて"次へ(N)"をクリック
![インストール2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3827128/4ca9ddc4-d09d-49fa-b706-8d41c9fad154.jpeg)
④"Windows Hypervisor Platform(WHP)の自動インストール"にチェックを入れて"次へ(N)"をクリック
※開発環境はすでにHyper-Vで構築しているのもあってこの表示になってます※
![インストール3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3827128/26611971-6f24-4fe9-8376-191fe68ab09c.jpeg)
⑤インストール先を変更したい場合は右側の"変更"をクリック
"システムパスへのVMWare Workstationコンソールツールの追加"をチェック入れて、"次へ(N)"をくりっく
![インストール4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3827128/e30f6b31-1fbd-4670-bfb3-f77cecccff8d.jpeg)
⑥"ユーザーエクスペリエンス"の設定は各自選択で
![インストール5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3827128/b8c38047-4216-4358-827f-0cb29de6a6ac.jpeg)
⑦"ショートカット"は任意の設定があるのでお任せ(今回はデスクトップを選択)し"次へ(N)"をクリック
![インストール6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3827128/2bc97905-00a9-4a2c-b68c-12922acfd870.jpeg)
⑧この画面までくればインストールになるので"インストール(I)"をクリック
![インストール7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3827128/924d0c14-9703-4c64-b4e4-8244248b2fae.jpeg)
⑨しばらく待機
![インストール8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3827128/f7e6c348-8c6b-48c0-b789-574f343dde38.jpeg)
⑩インストール完了。"完了(F)"をクリック
![インストール9.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3827128/cf4cfeb9-6c76-416c-b004-e22b549c2316.jpeg)



デスクトップ上にアイコンができているのでダブルクリック
![デスクトップのアイコン.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3827128/8d0dcbb9-0485-40b7-bb7c-7a968f128bbf.jpeg)


起動した直後の画面
![起動画面.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3827128/2e3ef0cf-4024-48e9-ae61-68ed8236ce4f.jpeg)


次の記事からは実際に仮想マシン作成から
VSCodeのかわいい拡張機能が存在する件について

# はじめに

日々のコーディング作業に癒しがほしいと思ったことはありませんか？そんなあなたにぴったりのVisual Studio Code（VSCode）の拡張機能が「vscode-pets」です。この拡張機能を使えば、エディタ内でかわいいペットたちと一緒にコーディングを楽しむことができます。本記事では、「vscode-pets」の魅力と使い方を詳しく紹介します。

# vscode-petsとは？

「vscode-pets」は、VSCodeのエディタ内に仮想ペットを表示できる拡張機能です。ペットたちはエディタ内で自由に動き回り、ボール遊びをしたり、カーソルに反応したりと、癒しを提供してくれます。ペットの種類や色、背景テーマなどもカスタマイズ可能で、自分好みの環境を作ることができます。

# 導入方法

### 1. 拡張機能のインストール
1. VSCodeを開きます
2. 左側のサイドバーから「拡張機能」タブ（ショートカット：`Ctrl + Shift + X` / `Cmd + Shift + X`）をクリック
3. 検索バーに「vscode-pets」と入力
4. 表示された「vscode-pets」を選択し、「インストール」ボタンをクリック

または、クイックオープン（`Ctrl + P` / `Cmd + P`）で以下のコマンドを入力して直接インストールも可能です：
```
ext install tonybaloney.vscode-pets
```

### 2. ペットを呼び出す
1. コマンドパレット（`Ctrl + Shift + P` / `Cmd + Shift + P`）を開きます
2. 「Pet Coding: Start pet coding session」と入力して選択します
3. エクスプローラービューに「VS CODE PETS」というパネルが表示され、最初のペット（デフォルトでは猫）が登場します


# ペットとの遊び方

### ペットを追加する
1. 「VS CODE PETS」パネル内の「+」ボタンをクリック
2. コマンドパレットから追加したいペットの種類や色、名前を設定します
   - 利用可能なペット：猫、犬、キツネ、カニ、トトロなど17種類以上！

### ボール遊び
1. 「VS CODE PETS」パネル内のボールアイコン（○）をクリックすると、ボールが出現します
2. ペットたちがボールを追いかけて遊ぶ様子を見ることができます

### ペットとのインタラクション
- マウスカーソルをペットに近づけると、吹き出しで反応してくれることがあります
- ペットによっては特定のアクションや動きを見せてくれるので、それぞれの個性を楽しめます


# カスタマイズ

### 背景テーマの変更
1. 「ファイル > ユーザー設定 > 設定」を開きます
2. 検索バーに「vscode-pets」と入力
3. 背景テーマ（例：森、ビーチ、お城など）やペットパネルの位置（エクスプローラービューまたはエディタービュー）などを変更できます

### ペットのサイズ調整
同じ設定画面からペットの大きさも変更可能です。デフォルトサイズ以外にも、小さめや大きめの設定が選べます。


# vscode-petsの魅力

1. **癒し効果**  
   コーディング中にふと目に入るかわいい動物たちが心を和ませてくれます。特に長時間作業するプログラマーにはぴったりです

2. **カスタマイズ性**  
   ペットの種類や色だけでなく、背景テーマや配置場所も自由自在。自分だけの癒し空間を作れます

3. **手軽さ**  
   インストールから設定まで非常に簡単で、数分あれば導入可能です。初心者でも安心して使えます



# まとめ

「vscode-pets」はただかわいいだけでなく、コーディング中のリラックス効果も期待できる素晴らしい拡張機能です。日々忙しいプログラマーのみなさんも、この機会にぜひ試してみてはいかがでしょうか？お気に入りのペットと一緒に楽しいコーディングライフを送りましょう！

**インストールリンク**: [vscode-pets - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=tonybaloney.vscode-pets)
VIGOTEC ペンプロッター VG-X4 Writer 指南書

## パソコンとの接続方法
普通にVG-X4とパソコンをUSBtypeBで接続．
![IMG_6015.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728306/78567672-772a-4d5d-9c7d-eb181abb744e.jpeg)
## CNC.jsをインストール
めっちゃ使いやすくていい感じです．
[CNC.jsについての記事](https://qiita.com/mathrax-s/items/0b9cafed7de41871cb11)


## Gcodeの生成方法
下記のサイトを使用してSVGをGcodeに変換．
[svg2gcode](https://sameer.github.io/svg2gcode/#close)

ここでVG-X4のサーボモータの制御は以下のコードが割り振られているので以下のように入力．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728306/2c6e2ae7-1bec-41d8-aa57-2f9dc2a6586c.png)

生成したGcodeをCNC.jsにアップロード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728306/b93d5f52-5ca5-4b30-b2e3-e3c5e30a6960.png)



これで完成です😃
3Dプリンタで追加のパーツも作ったのでぜひ〜〜

https://drive.google.com/drive/folders/1QaUFda92p3Gzbloi1vwnDsepicE1HcUz?usp=drive_link
windows11で、sketchup6 その44

# 概要
windows11に、sketchup6を入れてみた。
rubyで、3Dを書く。
練習問題、やってみた。

# 練習問題
sketchupで、マウスでクリックした場所のｘ、ｙ、ｚを表示するツールを作れ。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/1b2f7297-7c1c-4964-8c0d-6ecb47695266.png)

# サンプルコード
起動　Sketchup.active_model.select_tool PointTool.new

```

require 'sketchup.rb'

class PointTool
	def activate
		puts "activate called"
	end
	def deactivate(view)
		puts "deactivate called"
	end
	def onLButtonDown(flags, x, y, view)
		ip1 = view.inputpoint x, y
		point = ip1.position
		if (point)
			UI.messagebox point
		else
			UI.messagebox "Failure"
		end
	end
end


```

以上。
Vue 3 `defineProps` の基本と活用方法まとめ

# Vue 3 `defineProps` の基本と活用方法まとめ

Vue 3 の Composition API と `<script setup>` 構文の登場により、コンポーネント設計がよりシンプルで直感的になりました。この記事では、その中でも親コンポーネントから子コンポーネントへデータを渡すための仕組みである `defineProps` の使い方と活用方法について解説します。

---

## 目次
1. [こんな人に読んでほしい](#こんな人に読んでほしい)
2. [`defineProps` とは](#defineprops-とは)
3. [基本的な使い方](#基本的な使い方)
4. [型をつける（TypeScript対応）](#型をつける-typescript対応)
5. [オブジェクト構文でバリデーション](#オブジェクト構文でバリデーション)
6. [よくある間違い](#よくある間違い)
7. [まとめ](#まとめ)

---

## こんな人に読んでほしい
- Vue 3 の Composition API を使い始めた人
- `<script setup>` を使ったコンポーネント設計を学びたい人
- 子コンポーネントに親からデータを渡す方法を知りたい人

---

## `defineProps` とは

defineProps は、Vue 3 の `<script setup>` 構文で使える特別な関数です。
これを使うことで、親コンポーネントから渡された値（props）を簡単に受け取ることができます。
```ts
const props = defineProps();
```

これにより、`props` オブジェクトを通じて親からのデータを利用できます。

---

## 基本的な使い方

### 親コンポーネント
```vue
<template>
  <UserCard name="Tanaka" age="25" />
</template>

<script setup>
import UserCard from './UserCard.vue';
</script>
```

### 子コンポーネント（UserCard.vue）
```vue
<script setup>
const props = defineProps(['name', 'age']);
</script>

<template>
  <div>
    <p>{{ props.name }} ({{ props.age }}歳)</p>
  </div>
</template>
```

---

## 型をつける（TypeScript対応）

```ts
interface Props {
  name: string;
  age?: number; // 任意プロパティ
}

const props = defineProps<Props>();
```

このようにすると、props に型がつき、IDEの補完や型チェックが効くようになります。

---

## オブジェクト構文でバリデーション

型ではなく、Vue の従来の構文を使いたい場合はオブジェクト形式も使えます。

```ts
const props = defineProps({
  name: {
    type: String,
    required: true
  },
  age: {
    type: Number,
    default: 18
  }
});
```

この方法では、default 値や required などのバリデーションも設定できます。

---

## よくある間違い

### ❌ オブジェクト構文と TypeScript の型を同時に使う
```ts
// これは NG
const props = defineProps<Props>({ ... });
```

オブジェクト構文と型引数は併用できません。どちらか片方にしましょう。

---

## まとめ

`defineProps` は Vue 3 の Composition API と `<script setup>` 構文を使う上で欠かせない存在です。シンプルな使い方から、型定義やバリデーションまで対応できる柔軟さがあります。

- 受け取るだけなら `defineProps()`
- 型をつけたいなら TypeScript を活用
- バリデーションしたいならオブジェクト構文
統計検定1級　2022　統計応用(理工学)　問1　解説

![img20250402_08580915.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/25bca23c-c150-4f59-b212-67762191c95c.jpeg)
![img20250402_08583886.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/6ea292cd-926d-4013-9b0b-21e43aef3ff1.jpeg)
![img20250402_08590550.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/12138836-60fc-42d7-aa68-dcdc4718421c.jpeg)