OmniAICreator/Qiita-1.07M huggingface dataset:
【kintoneノーコード開発】「家族情報アプリ」の個人情報項目は、ルックアップ・関連レコード一覧・テーブルフィールドどれを使って設定する？

# はじめに
こんにちは、現在kintoneノーコード開発で日々試行錯誤しているばんちゃん（[@Banchan_k12](https://x.com/Banchan_k12)）です。
今回は、「家族情報アプリ」の設定項目に個人情報の同じような内容を繰り返しする入力フォームがあり冗長さを感じたアプリについて、ルックアップフィールド・関連レコード一覧・テーブルフィールドのうち、どのように整理してどのフィールドを選択したのかという過程を記録しようと思います。

### 対象
- 同じような入力項目が何度も出て入力画面に煩わしさを感じている方
- ルックアップ、関連レコード、テーブルフィールドの選択に悩んでいる方

# 導入
フィールドを設定するにあたり入力必要項目を洗い出してどんどん設定していくと、項目名が「〇〇１」「〇〇２」のように枝番をつけた同じ内容を入力するフィールドが複数でき、見た目にも煩わしく冗長になってしまいました。

:::note info
<b>「家族情報アプリ」入力画面</b>
- 個人の情報はそれぞれ「氏名１...」「氏名２...」で入力
- 自宅の「郵便番号」「住所」「固定電話」は共通項目
![20240105_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957411/d5be43cd-fbb2-9cfe-3cd8-681b61b9d159.jpeg)
:::


### 整理する
フィールド整理にあたっては、データベースの正規化の考え方をふまえて整理したいと思います。
![20240105_2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957411/951ccd6d-6b53-ecdd-b37b-de9a1d5083bd.jpeg)

### 組み立てる
#### １：アプリを２つに分けて構築する
- 「郵便番号」「住所」「固定電話」を「家族管理アプリ」の共通項目として設定
- 「氏名１...」「氏名２...」の同じフィールド構成の部分を「家族登録マスタ」として設定
![20240105_3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957411/b2d27e8c-d3cd-703e-b9c5-7656f20f69a4.jpeg)
![20240105_12.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957411/1a8f8b2a-8a72-2e07-3b22-884f64f27ce9.jpeg)

##### ルックアップフィールドで設定
ルックアップ機能を使うことでデータ連携が可能になるので「家族管理アプリ」にルックアップフィールドを設定して「家族管理マスタ」と連携してみます。
（登録コードを「コピー元のフィールド」として紐づけ、「ほかのフィールドのコピー」で「父親」「母親」項目をそれぞれコピー）
![20240105_11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957411/4f749a6a-72da-8c9e-ca8a-cf4e88120a1f.jpeg)

:::note warn
<b>注意点</b>

ルックアップを使ってマスタアプリからデータを参照する場合、マスタを更新しても転記先アプリにコピーされた情報は自動更新されないため、手動でルックアップ取得更新をする必要があります。
ルックアップフィールドから該当マスタデータへ飛ぶことができるので、詳細を確認に行くことができます。
:::

##### 関連レコードで設定
関連レコード機能を使って設定する場合、家庭管理アプリ内で条件に一致したマスタのデータを参照して一覧表示します。
（「家族コード」を条件設定として紐づけしています）
![20240105_8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957411/0bab7b64-0964-5cea-af6a-d4c097093a18.jpeg)

#### 2：1つのアプリで構築する
##### テーブルで設定
- 「郵便番号」「住所」「固定電話」を「家族管理アプリ」の共通項目として設定
- 「氏名１...」「氏名２...」の同じフィールド構成の部分を「家族一覧」テーブルにフィールド設定

![20240105_9.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957411/0d36b7f5-f336-8316-70bf-9412a0f457f8.jpeg)

### どの設定を選択するかを検討する
できること、できないこと、違いを比較して、どの設定にするかを検討していきました。
![20250122.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957411/8c89506c-52b9-f656-7ca3-48258fab7a38.jpeg)



# 結果
私が対応した事例では、個人の情報を別アプリで保存する形が運用しやすいということで、まずマスタアプリと管理アプリを切り分ける方法を選択しました。
そして、管理アプリで個人情報の詳細を見る必要がなかったのでルックアップを選択し、「ほかのフィールドのコピー」項目を最小限にすることで項目がすっきりして入力しやすくなりました。
kintoneはフィールドをどんどん設定することができるけれど設計を考えていかないと、結果入力しにくくてわかりにくいアプリができあがってしまいますね。
個人的な備忘録：フレームワークとライブラリの違いを理解するために、記事としてアウトプットしてみた

## はじめに
フレームワークとライブラリは、どちらもプログラミングを効率化するための便利なツールですが、主な違いは「**制御の主導権**」にあると考えています。

:::note warn
**これらについて考える中で、フレームワークとライブラリが「便利な道具」という大まかな理解に留まり、自分の言葉でしっかりと言語化できていないことに気づきました。**
:::

本記事の内容は、個人的な備忘録レベルですので、ご了承ください。***この記事が少しでも参考になれば幸いです。***

## 書こうと思ったきっかけ
普段からフレームワークやライブラリを活用してプログラムコードを作成していますが、いつも決まった形で使うことが多いです。

:::note info
**その中で、自分自身が本当に理解して使っているのかと考えると、「***なんとなく使っている***」と感じる場面もあります。**
:::

まず、表形式で整理した内容は以下の通りです。***参考にしていただければ幸いです。***

## 主な違い

まず表形式でまとめると以下のような形になります。参考にしてみてください。

| **項目**       | **フレームワーク**                               | **ライブラリ**                         |
|----------------|-----------------------------------------------|---------------------------------------|
| **主導権**     | フレームワークが持つ                             | 開発者が持つ                           |
| **役割**       | アプリケーション全体を管理する構造を提供           | 特定の機能や処理を提供                 |
| **自由度**     | フレームワークのルールに従う必要がある             | 開発者の自由に利用可能                 |
| **例**         | Django、React、Spring                           | NumPy、Pandas、Requests                |

## フレームワーク

- **定義**: アプリケーション全体の構造や動作を規定し、その中で開発者がコードを書いていく仕組み。
- **主導権**: フレームワークがアプリケーションの流れを制御し、必要に応じて開発者が提供したコードを呼び出します（フレームワークが主導権を持つ）。
- **特徴**:
  - 開発者はフレームワークのルールや構造に従う必要がある。
  - プロジェクト全体を効率的に構築するのに向いている。
  - 一般的に、プラグインやモジュールを追加して拡張可能。
- **例**:
  - Web開発: Django（Python）、Ruby on Rails（Ruby）
  - フロントエンド: React、Angular（JavaScript）

## ライブラリ

- **定義**: 特定の機能を実現するための再利用可能なコードの集まり。
- **主導権**: 開発者がライブラリを必要なときに呼び出して利用します（開発者が主導権を持つ）。
- **特徴**:
  - どのように使うかは開発者の自由。
  - 特定の機能を補うために使用される。
  - フレームワークほど全体の構造には影響しない。
- **例**:
  - Python標準ライブラリ（math、randomなど）
  - NumPy（科学計算）、Requests（HTTPリクエスト）

## 具体的なイメージ

- **フレームワーク**: 「家具付きの賃貸物件」。用意された家具や設備を使いながら、自分の生活を始めるスタイル。基本のルールや構造はすでに決まっている。
- **ライブラリ**: 「DIY家具」。必要なパーツを自分で選んで組み立てることで、自由に自分好みのインテリアを作れる。

:::note warn
***このように、フレームワークは効率的で統一感がある一方、ライブラリは自由度が高くカスタマイズしやすい特性があります。***
:::

***状況に応じて最適な選択をすることが重要です！***

## まとめ
ここまでお読みいただき、ありがとうございました。***今回は、基本的なフレームワークとライブラリの違いについてまとめてみましたが、自分自身にとっても非常に勉強になる機会となりました。***

:::note info
**これからも、自分にとって曖昧な知識については、積極的に記事を通じてアウトプットしていきたいと思います。**
:::

この記事が少しでも皆さんのお役に立てれば幸いです。
ArUcoマーカーとROSでロボットを追従させる

# はじめに
今回は複数のロボットを一列に並べ，ArUcoマーカーを用いることでImprintingを実現しました！！
>Imprinting(刷り込み)とは，目の前を動く物体を親として覚え込み，以後それに追従する生物の習性のことです:baby_chick:

<img alt="imprinting" width="800px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3298420/563e2e57-1d0d-1ade-79ac-f9014fcc77b0.gif">

# 実行環境
Language : Python 3.10.12
OS : Ubuntu 22.04
ROS : ROS2 Humble
OpenCV : Ver.4.10.0

:::note warn
ROS2 Humble, TurtleBot3, Nav2, Gazebo関係の一連のパッケージのインストールと，`opencv-contrib-python`のバージョンが，`4.5.5.64`である必要があります！
:::

## 使用したパッケージ
以下のパッケージを使わせてもらいました:pray:

https://github.com/AI-Robot-Book/chapter5/tree/027a2765154c31ccb6d23f53d4443916760e1141

https://github.com/JMU-ROBOTICS-VIVA/ros2_aruco/tree/8ec6303acdd0cd5b0def965ac81a9a6ce971fa9a

# ArUcoマーカー
ArUcoマーカーは，カメラで読み取ることで，マーカーの<b>種類や位置，姿勢を推定</b>できる2次元マーカーです．OpenCVのcontribの中にArUcoのモジュールが含まれており，簡単に実装できます✨

<img alt="aruco" width="800px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3298420/b085422e-6f83-19ab-5658-84b68c802d43.gif">

# 実装
以下のレポジトリにサンプルコードをおいています！よかったら参照してみてください♪

https://github.com/yuzu2yan/Imprinting_TurtleBot/tree/main

# さいごに
今回はArUcoマーカーを使って追従するロボットを作ってみました！ArUcoマーカー以外にもAprilTagなど似たようなマーカーがありますが，ArUcoマーカーが一番使いやすい気がします！街中でこれらのマーカーを見つけたときは少しテンション上がりますよね✨
[Mac] error 79 (zipファイルが解凍できない)

# 環境
MacBook Pro (2.3 GHz 8コアIntel Core i9)
macOS 14.0（23A344）
Homebrew 4.3.8
gh 2.52.0

# ディレクトリ構成
~~~:directory_structure
drive/ ←ルートディレクトリ
├── Applications/
├── Syetem/
└── Usr/
│   ├── shared/
│   └── personnel(ex. Jochun)/ ←ホームディレクトリ
│       ├── MyVagrant/
│       ├── Desktop/
│       ├── Downloads/
│       │   └── CentOS7/ ←今回インストールした仮想マシンファイル
│       ├── Documents/
│       ├── .config/
│       ├── .ssh/
│       ├── .zshrc/
│       └── .local/
│           ├── .bin
│           └── ...
~~~

# 解決方法
1. `Mac`の`ターミナル`を開く
1. `cd`コマンドで、該当のディレクトリまで移動する
    ~~~terminal:
    $ cd Downloads
    ~~~
1. `unzip`コマンドで、解凍できない`zip`を開く
    ~~~terminal:
    $ unzip CentOS7.zip
    ~~~
# 参考リンク
- [MacでZIPの圧縮ファイルを解凍/展開できない原因と対処法](https://itojisan.xyz/trouble/13743/#google_vignette)
転職に成功しました。

・転職内容
1.社内SE(事業会社)→社内SE(事業会社)
※転職元と転職先は別業種
2.同県内での転職
3.年収は100万円近くアップした。

・転職理由
1.給与が低い
2.上層部がITのことを知らない癖に無茶ぶりばかりする
3.難易度の高い仕事ばかり振られている先輩が全く昇格しない
4.このままでは未来がないと思った。

・転職までにやったこと
1.資格取得（ITパスポート、基本情報、セキュリティマネジメント、応用情報）
2.ダイエット（見た目は大事） 5kgほど痩せた

・転職活動の流れ
1.最初はエージェントにとうろくしSES系で考えていたが給与が低く条件面で断念
2.これまでの経験を生かせる社内SEに切り替えて別サイトに登録。
3.いくつかのサイトに登録したが、ビズリーチに登録した際に声をかけてもらったエージェントが優秀で、ぴったりの会社を持ってきてくれた。

・感想
最初は社内SEは属人性が高く中途採用はあまりないものだと考えていたが、
割とあってびっくりした。
自分で勝手に自分の可能性を閉ざすべきではないと思った。
最初のエージェントが持ってきた未経験SESで「スキルを身に着けるためにいったん給与を落とす」としていたら結婚・住宅を含むライフプランがどうなっていたかを考えると恐ろしく感じた。
自分を必要としてくれた会社のために頑張りたい。
【KiCad】DigiKey部品のデータ取り込み

# 部品データをKiCadに取り込む方法メモ

### 1. DigiKeyにアクセス
・[DigiKey公式サイト](https://www.digikey.jp/)

### 2. ほしい部品ページに行く
・EDA/CADモデルの存在するものを選ぶ

参考：[TB67H450FNGのページ](https://www.digikey.jp/en/products/detail/toshiba-semiconductor-and-storage/TB67H450FNG-EL/10130904)

![Screenshot from 2024-05-02 12-40-19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625784/9ea7eae5-8c82-583e-ee70-32b64003aa13.png)


### 3. EDA/CADモデル △□○モデルにアスセス


![Screenshot from 2024-05-02 12-41-48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625784/bd3b182d-24d2-7ff9-9fb8-36e844aaae5f.png)

#### 3.1. シンボル・フットプリント・3Dモデルのダウンロード
Ultra Librarianの欄にある**ダウンロード形式**を選択
**KiCAD**と**STEP**にチェック:heavy_check_mark:⇛任意の場所にダウンロード

![Screenshot from 2024-05-02 12-42-37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625784/9e5532b8-88c4-b6b1-7454-58b1c791edb7.png)




### 4. ダウンロードファイルの確認
zipファイルを解凍し中身を確認:eyes:
KiCADv*の中にシンボルとフットプリント
*.stepが3Dモデル

![Screenshot from 2024-05-02 12-46-17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625784/ef0afddc-b22b-3e20-5b17-719cf7b09986.png)


### 5. シンボルの追加
・シンボルエディタを起動
![Screenshot from 2024-05-02 12-49-05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625784/1904e3c5-cb61-9be3-d169-2cf497a37a9d.png)

・[ファイル]→[ライブラリの追加]→[ライブラリ テーブルへ追加]
⇛プロジェクトにしておく．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625784/f8318eb5-8645-dba8-bc91-7ed0f07a2702.png)


## 参考
* 3Dモデルの取り込み方法
https://aisumegane.com/kicad_introduction-of-3d-models/

* KiCadへの追加方法
https://yueno.net/xoops/modules/xpwiki/?%E9%96%8B%E7%99%BA%2FEDA%2FKiCad%2F%E5%A4%96%E9%83%A8%E3%81%AE%E9%83%A8%E5%93%81%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%83%BC%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95
難易度Lv.76のLinuxコマンド5選

こんにちは！今回は「たぶん、普段使わないLinuxコマンド」をテーマを記事にしました。
お昼休憩とかで適当に読んでください。

`ls`コマンドや`cat`コマンドなど基本的なコマンドに飽きたLinux厨のために書きました（笑）

:::note warn
警告
割と危険なコマンドも多いので、気軽に試さない方がいいです！
:::


## straceでのシステムコールデバッグ

straceを使用すると、プログラムが実行時に呼び出すシステムコールを追跡できます。

例: プロセスID 1234のシステムコールをリアルタイムで監視。
```bash
strace -p 1234
```
ポイント
- 動作がおかしいプロセスのトラブルシューティングに役立つ
- どのファイルやネットワークリソースにアクセスしているかを確認可能

## ddでのディスク操作

ddは、ディスクイメージの作成やクローン作成に使用される強力なコマンドです。誤った使い方をするとデータを破壊する可能性があるため、注意が必要です。

例: ディスク全体のバックアップを作成。
```bash
dd if=/dev/sda of=/backup/sda.img bs=64K conv=noerror,sync
```
ポイント

- if（input file）とof（output file）を指定
- bs（block size）で速度を最適化
- noerrorオプションでエラーを無視して続行

## bpftraceでのカーネルイベントの監視

`bpftrace`は、カーネルレベルのトレースができるツールです。特定の条件に応じたカーネルイベントをキャプチャできます。

例: すべての新規プロセス起動を監視。

```bash
bpftrace -e 'tracepoint:sched:sched_process_exec { printf("%s started\n", comm); }'
```

ポイント
- `tracepoint`で監視するイベントを指定
- リアルタイムでプロセス名を取得。

## cryptsetupでのディスク暗号化

`cryptsetup`は、ディスク全体を暗号化するためのツールで、高度なセキュリティを提供します。

例: 新しいLUKSパーティションを作成してマウント。
```bash
cryptsetup luksFormat /dev/sdb1
cryptsetup open /dev/sdb1 secure_disk
mkfs.ext4 /dev/mapper/secure_disk
mount /dev/mapper/secure_disk /mnt/secure
```

ポイント
- `luksFormat`で暗号化フォーマットを適用
- マウント時に暗号化を解除してアクセス可能に

## perfでのパフォーマンス解析

`perf`は、システムやアプリケーションのパフォーマンスを解析するツールです。

例: プログラム./appのCPU使用率を測定。
```bash
perf stat ./app
```
ポイント
- CPUやキャッシュミスなどの詳細なパフォーマンスデータを提供
- チューニングやボトルネックの発見に役立つ


## 最後に
上司に「dd」コマンド知ってます？ってドヤりましょう。
ペアプロのTips

現場でペアプロを実施してみて思ったことや学んだことをアウトプットします。

# ペアプロとは
DriverとNavigatorに役割分担して、2人が1台のコンピュータでプログラミングを行います。

https://martinfowler.com/articles/on-pair-programming.html?ref=simplermachines.com

**Driver**
- PGを実装する人
- 何をしているのか（しようとしているのか）、Navigatorに説明しながら作業する
- 戦術的な観点で作業する

**Navigator**
- Driverの作業を見守る人
- 戦略的な観点でレビューし、考えや指針を伝える
- 作業中に感じた問題をメモしておいて、良いタイミングでDriverにフィードバックする

# ペアプロのスタイル

普通のペアプロ以外にもやり方がいくつかあるので紹介します。

## Strongスタイル
Strongスタイルは、DriverとNavigatorを交代せずに固定します。
初心者のオンボーディング時に有効な手法です。見て学ぶより手を動かして学ぶことを重視します。

**Driver**
- Navigatorから指示された通りに作業する
- 取り組むタスクの初心者が担当する
- Navigatorを信頼し、理解が不十分でも作業を進める
  - 作業がひと段落したら質問して、疑問を解決する

**Navigator**
- Driverに指示を出す
- 取り組むタスクの経験者が担当する

### 注意点
Strongスタイルはマイクロマネジメントに近いため、普通のペアプロが実施できるようになるまでの一時的な利用にとどめましょう。
また、Strongスタイルで進めるのであれば、その旨を事前に伝えると良いかもしれません。

### 参考リンク
https://llewellynfalco.blogspot.com/2014/06/llewellyns-strong-style-pairing.html

https://medium.com/@maaretp/the-driver-navigator-in-strong-style-pairing-2df0ecb4f657

https://spikes.sobes.co/p/strong-style-pairing

## Ping-Pongスタイル
Ping-Pongスタイルは、ペアプロとTDDを組み合わせた手法です。TDDのメリットに加え、問題の早期発見や知識のサイロ化の防止が期待できます。
A、Bという2人の開発者がいるとして、以下の流れを繰り返します。
- Aが失敗するテストを書く
- Bがコードとテストを書く
- Bがリファクタリングする
- Bが失敗するテストを書く
- Aがコードとテストを書く
- Aがリファクタリングする

https://openpracticelibrary.com/practice/ping-pong-programming/

https://spikes.sobes.co/p/ping-pong-pairing

# 習慣にすると良いこと
- 最初にゴールを決めましょう
  - 解くべき問題を理解する
    - いきなりタスクに着手すると、ゴールが曖昧になります
  - 解決策を考える
    - ペアで一緒に考えても良いし、意見を持ち寄って議論しても良いでしょう
  - 解決策を具体化する
    - ゴールが明確化され、ペア間の認識齟齬が少なくなります
    - ステップに細分化することで、ペアプロでやることが明確になります
    - 調査が必要であれば、そのための時間をとりましょう
- ペアはチーム内で定期的にローテーションしましょう
  - 知識のサイロ化を防ぎやすくなります
- ペア間で意見が折り合わない場合は、上長やチームの意見も聞いてみましょう
  - 遠慮や妥協で作業を進めると、チーム活動や成果物の品質に良くない影響が出るかもしれません
- 1日の予定を早めに決めましょう
  - あらかじめ時間を確保しておくのも良いです
  - スケジューリングにハードルがあると、お互いにやりづらいです
- 定期的に休憩しましょう
  - ペアプロは疲れます
- 画面共有する際は、相手が見やすい状態で作業しましょう
  - Navigatorの負担になります

# 注意すべきこと

- マイクロマネジメントにならないように気をつけましょう
  - ことある度に発言すると、Driverが自身で考える余地がなくなります
- 長時間のペアプロは避けましょう
  - 相手が負担に感じてしまうかもしれません。1人で作業する時間があっても良いです
- ペアプロ中に内職は避けましょう
  - どうしても他の作業が発生する場合は、一言伝えましょう
- やり取りが淡白になりすぎないように気を付けましょう
  - ペアプロをストレスに感じてしまうかもしれません
  - 雑談大事

# 最後に
ペアプロのやり方に正解はありません。
ペアプロ中に感じた違和感やモヤモヤは放置せず、より良い方法がないか常に見直しましょう。
Turboを使った非同期処理

Ruby on Railsのバージョン:7.2.1
Rubyのバージョン:3.3.5

投稿の削除をする際にターボを利用して画面のリダイレクトを行わないようにしてみた。
## Turboを使った非同期処理の特徴
1. シンプルなコードで非同期処理
通常、非同期処理にはJavaScriptやAjaxを記述する必要があります。
Turboでは、Rails標準の仕組み（Turbo Stream）を利用することで、複雑なJavaScriptを書く必要がありません。
2. 自動的にリクエストとレスポンスを処理
Turboは、サーバーから返されるレスポンスに応じて、DOMを自動で操作します。
例えば、<turbo-stream> タグで指定された要素を削除したり、更新したりします。
Turboの非同期処理のメリット
リアルタイム更新が簡単

必要な部分だけを更新することで、ユーザー体験が向上します。
コードが少ない

JavaScriptやフロントエンドライブラリを多用することなく、Rails側だけで非同期処理を完結できます。
Railsと統合されている
RailsのMVCフレームワークに自然に組み込まれているため、シンプルで保守しやすいです。
*****


```postscontroller.rb
def destroy
    @post.destroy
    respond_to do |format|
      format.html { redirect_to posts_path, notice: '投稿を削除しました。' }
      format.turbo_stream # Turbo Streamリクエストの場合
    end
end
```
```
respond_to do |format| 
```
respond_toはリクエストされたフォーマット（HTML、Turbo Stream、JSON など）を識別し、それに応じたレスポンスを返します。
```
format.html { redirect_to posts_path, notice: '投稿を削除しました。' }
```
HTML形式のリクエストの場合、投稿一覧ページにリダイレクトし、『投稿を削除しました。』とフラッシュメッセージでと表示する
```
format.turbo_stream # Turbo Streamリクエストの場合
```
turbo_stream形式のリクエストの場合、destroy.turbo_stream.erbというテンプレートを呼び出し、その内容をクライアントにレスポンスとして送信します。


**削除ボタンが押されたときの動作**
ボタンに turbo_method: :delete が指定されているため、DELETE リクエストが送信されます。Turboはこのリクエストを Turbo Stream形式 として送信します。

**destroy.turbo_stream.erb が呼び出される理由**
respond_to 内で format.turbo_stream が指定されており、Railsは対応するビュー（destroy.turbo_stream.erb）を**自動的に探して実行します。**

```.削除ボタンを押下した際のログ
Started DELETE "/posts/9?_method=delete" for ::1 at 2025-01-19 13:26:58 +0900
Processing by PostsController#destroy as TURBO_STREAM
```
destroy as <font color="#1e90ff">**TURBO_STREAM**</font>と記載があるため、turbo_stream形式のリクエストだと分かる。



```erb
<% @posts.each do |post| %>
    <div id="<%= dom_id(post) %>">
      <h2><%= link_to post.title, post_path(post) %></h2>
      <p><%= post.content.truncate(100) %></p> 
      <%= link_to "削除", post_path(post), data: { turbo_method: :delete, turbo_confirm: "本当に削除しますか？" }, class: 'btn btn-danger' %>
    </div>
    <hr>
<% end %>
```
```
<div id="<%= dom_id(post) %>">
```
Turbo Streamで対象の投稿を削除する場合、dom_id(post) を指定することで、該当の投稿だけをDOMから消去できます。
```destroy.turbo_stream.erb
<%= turbo_stream.remove dom_id(post) %>
```
turbo_stream.remove
削除された投稿のHTML要素が画面上から消えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3931580/c6968021-d5f8-953d-f49a-54356e65aee5.png)


### DOMとは
DOMは、画面上のHTML要素をブラウザが管理するためのデータ構造。
DOMを操作することで、画面の内容や見た目を動的に変更できます。

以上です。
３級テクニカルライティング試験とは

# はじめに
テクニカルライティングは、専門的な知識や技術を使って特定の読者に情報を伝える文章です。

欧州や北米では、テクニカルライティングはビジネスや技術コミュニケーションの重要な部分として認識されており、企業や大学でのスキルが求められています。一方、日本では、技術文書作成や技術コミュニケーションの教育が十分でなく、テクニカルライティングのスキルを持つ人材が少ないとされています。

# ３級テクニカルライティング試験とは？
３級テクニカルライティング試験は、テクニカルライティングの基礎知識とスキルを評価するための試験です。
この試験では、技術文書の作成や編集に関する基本的な知識や技術が問われます。

# 主催
### 一般財団法人テクニカルコミュニケータ協会（TC協会）
取扱説明書やエンジニアリングドキュメントをはじめとするさまざまな「使用情報」を理解しやすく正確に表現し、伝達する専門家の団体です。
※使用情報：製品やサービスについて利用者に提供される多彩な文書や情報を意味する

# 試験概要
- 開催日
    - 2月と7月の年2回実施
- 試験科目と時間
    - 学科試験（選択式問題）13：15～14：05（50分）
    - 学科試験（記述式問題）14：45～15：35（50分）
- 試験会場
    - 主要都市のみ（オフライン）
- 受験資格
    - なし（誰でも受けられる）
- 受験料
    - 法人会員・準法人会員・個人会員　11,000円
    - 非会員　16,720円　←高め
    - 学生　11,000円
- 受験参考書
    - https://jtca.org/learn-tc/publication/guide_jsg/
- 詳細は以下ホームページを参照ください
    - https://jtca.org/
comelangにコードを生成しないgenericsが入りました。


# No generating code collection

```C
#include <comelang.h>

struct sData
{
    int a;
    int b;
};

int main(int argc, char** argv)
{
    list<object as sData>*% li = new list<object as sData>();
    
    li.add(new sData { a:111, b:222 } implements object);
    
    var data = li[0];
    
    printf("%d %d\n", data.a, data.b);
    
    puts(data.to_string());
    
    return 0;
}
```
続・TPMを使ってみる ～ BhyveゲストのWindows 11へのアップデート

# はじめに
一年ほど前にこういう記事を書きました。

https://qiita.com/yshdsnd/items/c1437cea2c496c88ac21

しかし、Windows 11にアップデートしようとしたところ最終的にハングアップしてバージョンアップに失敗しています。
しかし、1年越しでようやく解決しました。結論から言うとTPM全く関係ないです。

# せまるWindows10のサポート期限

ご存じの通り、2025年10月でWindows10のサポートが切れ、セキュリティアップデートが提供されなくなります。bhyveのゲストとはいえ、そのままにしておく訳にはいかないしなぁ...と考えてアップデートしてみることにしました。

# まずはクリーンインストール

アップデートができないなら、クリーンインストールすればいいじゃない。
ゲストなんてなんぼでも作れるし。

ということで、新しくゲストを作ってみることにします。
以下の操作はvm-bhyveのvmコマンドです。1.6.0を使っています。

```
# pkg info vm-bhyve-1.6.0
vm-bhyve-1.6.0
Name           : vm-bhyve
Version        : 1.6.0
Installed on   : Thu Nov 28 08:59:17 2024 JST
Origin         : sysutils/vm-bhyve
Architecture   : FreeBSD:14:*
Prefix         : /usr/local
Categories     : sysutils
Licenses       : BSD2CLAUSE
Maintainer     : churchers@gmail.com
WWW            : https://github.com/churchers/vm-bhyve
Comment        : Management system for bhyve virtual machines
(以下略)
```

## ゲストの作成
```
 # vm create -t windows-zvol -s 1T -m 16G -c 4 windows11
```

TPMがないとインストーラーで拒否られるので、前回同様設定します。
```
# vm config windows11
~~~
bhyve_options="-A -K jp -l tpm,passthru,/dev/tpm0"
~~~
```

## インストール
```
# vm install windows11 Win11_24H2_Japanese_x64.iso
```

VNCでコンソールに接続すると、後は普通のWindowsのインストーラです。
プロダクトIDないので、期間限定の評価版扱いですが、まあインストールの確認ができればよいので。
途中不安定になってbhyveが落ちることがありましたが、何とかインストールはできました。はて？ TPM関係ない？？？

# Windows10ゲストを無理矢理アップデートしてみる

クリーンインストールが無事できることが分かったので、今度はWindows10を無理矢理11にアップデートする方法を使用します。

Flyby11というのを使うと、TPMを無視してアップデートができるようなので、まずはそちらを試してみます。
https://github.com/builtbybel/Flyby11

インストールは進みますが、やはり途中、再起動したところで止まります。
クリーンインストールはOKなのに、アップデートはダメ。さてどういうこと？
と思って、違いを考えました。

# PCI passthroughが悪さをしていた

さらにもう1年前ですが、こういう記事を書いていました。
https://qiita.com/yshdsnd/items/0b8c38425a6a3bae289b

そう、普通に使えていたのですっかり忘れていましたが、アップデートしようとしたVMではPCI passthroughの設定を入れていました。新規インストールのVMには付けていません。

設定を外してみましょう。
```
#passthru0="3/0/0"
#passthru1="4/0/0"
```
# 再度アップデートしてみる

この状態でもう一度アップデートしてみました。
すると...

アップデートに時間はかかりますが、無事アップデートが完了しました。

![スクリーンショット 2025-01-18 162217-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373056/9e354f45-7173-a3fc-2ac6-f794c5fd5157.png)

TPM passthroughは設定したままですが、PCI passthroughを無効にしたら無事立ち上がりました。もうずっとPCI paththrough使っていたので、盲点でした。
TPMを有効にしたからその影響だとずっと思っていたので。

# まとめ
bhyve + **TPM passthrough** でWindows11をインストール、あるいはWindows10から11のアップデートは問題なくできます。

結局はFreeBSD(14.0～14.2)のbhyveでWindows11を動かした場合、 **PCI passrough** は使えないというのが結論です。

原因は何なのかよく分かっていませんが、とりあえずアップデートできたのでよし。ゲスト上でPCI passthrough経由のUSBデバイスが使えないのはとても不便ですが、Windows機は物理マシンも持っているので、とりあえずは我慢します。

同じ現象が起きているという話も以下にありましたが、今のところ解決していない模様。
https://forums.freebsd.org/threads/bhyve-vm-stuck-when-passthru-enabled.92854/

PCI passthroughが使えるようになったらまた記事書きます。
systemd socket と shell script で作る簡易 honeypot

# 標準入出力にログインプロンプトを表示して相手の入力を記録するだけの honeypot

```shell:/var/tmp/honeypot/honeypot.sh
#!/bin/sh                                                                                                                                                                                       
logfile=/var/tmp/honeypot/honeypot.txt
exec 2>>$logfile
date >>$logfile
echo "from $REMOTE_ADDR $REMOTE_PORT" >>$logfile
echo -n 'login: '
read content
echo "login: $content" >>$logfile
echo -n 'Password: '
read content
echo "Password: $content" >>$logfile
echo -n '$ '
while read content; do
  echo "$content" >>$logfile
  if echo "$content" | grep -q '^ *exit'; then exit 0; fi
  echo -n '$ '
done
exit 0
```

# 上記 honeypot を指定したポートで起動する systemd socket ファイルと対応サービスファイル

```config:/etc/systemd/system/honeypot.socket
[Unit]
Description=Honeypot

[Socket]
# Port number to be listened
ListenStream=65535
FreeBind=yes
Accept=yes
ReusePort=yes

[Install]
WantedBy=multi-user.target
```

以下はサービスファイルだが、同じ名前で＠を付けたサービス名にするのがポイント

```config:/etc/systemd/system/honeypot@.service
[Service]
ExecStart=/bin/sh /var/tmp/honeypot/honeypot.sh
StandardInput=socket
StandardOutput=socket
StandardError=journal
Type=oneshot
```

これだけやって ``touch /var/tmp/honeypot/honeypot.txt && chmod a=rw /var/tmp/honeypot/honeypot.txt && systemctl daemon-reload && systemctl enable --now honeypot.socket`` すれば指定したポートで honeypot が起動し始め、わけのわからん接続を `/var/tmp/honeypot/honeypot.txt` に記録し始める

`telnet ホスト 自分で決めたポート` で動き始めたhoneypotにアクセスできるから、`/var/tmp/honeypot/honeypot.txt` に何が記録されるか確認する

# よりセキュアにする
上記の設定だとroot権限で動作する shell script がインターネットからの接続を処理していてあまり良くないので、以下のような行を `honeypot@.service` に追加するとより安全になる

```config

User=adduserで作った一般ユーザー
Group=adduserで作った一般グループ
RestrictAddressFamilies=none
MemoryDenyWriteExecute=yes
ProtectProc=noaccess
PrivateTmp=no
PrivateDevices=yes
PrivateNetwork=yes
ProtectSystem=full
ProtectHome=yes
LockPersonality=yes
TasksMax=5
```
Ubuntu 24.04.1のWSL2環境構築メモ

# WSL2環境構築メモ(Ubuntu 24.04.1)

個人的な構築メモです


```bash
# Vitis/Vivadoのインストール
# https://qiita.com/GeekMasahiro/items/dc9e10bedf4660034a70
sudo add-apt-repository ppa:xorg-edgers/ppa 
sudo apt-get update
sudo apt-get install libgl1-mesa-glx
sudo apt-get install libgl1-mesa-dri
sudo apt-get install libgl1-mesa-dev
sudo add-apt-repository --remove ppa:xorg-edgers/ppa
sudo apt install net-tools
sudo apt-get install -y unzip
sudo apt install gcc
sudo apt install g++
# vitesの依存関係解消のため
sudo apt-get install libasound2t64
sudo apt-get install libsecret-1-0 libsecret-1-dev
#
sudo locale-gen en_US.UTF-8
sudo dpkg-reconfigure locales
# download vitis
cd /tools/Xilinx/Vitis/2024.2/scripts/
sudo ./installLibs.sh
echo 'source /tools/Xilinx/Vitis/2024.2/settings64.sh' >> ~/.bashrc
# Elixir
# Miseのインストールスクリプトを実行
curl https://mise.jdx.dev/install.sh | sh
# ~/.bashrc にMiseを追加
echo 'eval "$(~/.local/bin/mise activate bash)"' >> ~/.bashrc
# 現在のシェルに反映
source ~/.bashrc
sudo apt update
sudo apt install -y automake autoconf libssl-dev libncurses-dev
# 最新erlang27.3.1をインストール
mise use -g erlang@27.3.1
mise use -g elixir@1.18.3-otp-27

# Nerves　fwup
sudo apt-get install autoconf pkg-config help2man libconfuse-dev libarchive-dev
mise plugin add fwup https://github.com/fwup-home/asdf-fwup.git
mise use -g fwup@latest
# Nerves
sudo apt install build-essential automake autoconf git squashfs-tools ssh-askpass pkg-config curl libmnl-dev libssl-dev libncurses5-dev help2man libconfuse-dev libarchive-dev
mix local.hex
mix local.rebar
mix archive.install hex nerves_bootstrap
# Python
mise ls-remote python
mise use -g python@3.13.2
```
ｃ＃で電卓を作っていく(1)

# C#で電卓を作りたい！
　初めましてyuulyyですC#の勉強のアウトプットとして電卓の制作過程を備忘録として残していこうと思います。よろしくお願いします。
 
## 制作するものの概要
今回の電卓アプリはvisualstudioでWindowsフォームを使って作成しようと思っています。
 #### 要件
1. 二項の四則演算ができる
2. 有効桁数は10桁
3. 正の数負の数も扱える 

この三点を軸に考えていきたいと思います。
 
 ## 画面設計
__先ずは画面設計__

下の図から
①計算結果と一つ目の数字を表示する場所は同じにしようと考えています。
②現在正の数、負の数どちらを入力しているのか視覚的にわかりやすいよう正負の符号を置く場所。
③入力した数字を置く場所
④演算子を表示する場所
⑤ボタン類

今回はこの配置を目指して作っていきたいと思います。
![スクリーンショット 2025-01-19 131328.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3989686/9c4c9465-3e59-8970-c3d1-63f927e6a65f.png)

## 画面の作成
visualstudioのデザイナーを使いボタン類の配置をしました。

![スクリーンショット 2025-01-19 134757.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3989686/130ae46a-3614-6d6b-17b6-d87422a0f5f6.png)

次にLabelを使って数列などを表示する場所も作っていきます

![スクリーンショット 2025-01-19 135234.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3989686/74561ff7-0e8f-73ed-b403-e6638be41d49.png)

とりあえず区切りのよいところまで進めることができたので今回はここまでにしようと思います。
ご覧いただきありがとうございました。

次↓

__C#で電卓を作っていく(2)__

https://qiita.com/yuulyy/items/787088bb42818fedb185
Javaで始めるテスト駆動開発 (TDD)

今回はアウトプットしてテスト駆動開発について記事にしたいと思います。

**テスト駆動開発、よくTDD (Test-Driven Development)と呼ばれる技法は、以下のサイクルに基づいています**

**テストを書く**—どのような機能が必要かを明確にするために、まず最小のテストを書きます。

**テストを失敗させる**—コードを書く前にテストを実行し、失敗することを確認します。

**最小のコードを書く**—テストを通すための最小限の実装を行います。

**リファクターする**—コードを整備し、準備ができたら再度テストを繰り返します。

TDDは、高品質なコードを積み重ねる上でとても有益な法法です。以下は、JavaでTDDを始めるためのガイドです。

# なぜTDDを選ぶのか
TDDを実践すると、以下のような利点があります。

コードの質を向上—テストを先に書くため、コードがいつでもテスト可能な状態で保たれます。

開発サイクルの制御—機能添加の際に不具合を減らすことができます。

読みやすいコード—リファクタリングを通じて、コード構造を改善しやすくします。

Javaでの準備

ヤツを用意しよう

JavaでTDDを始めるには、準備が重要です。

IDEの選択—IntelliJ IDEAやEclipseが便利です。

テストライブラリ—JUnit 5を使用するのが一般的です。

ビルドツール—MavenまたはGradleを使用しましょう。

JUnitを設定

pom.xmlもしくはbuild.gradleに次のデペンダンシーを追加します。

Mavenの場合:
```
<dependency>
    <groupId>org.junit.jupiter</groupId>
    <artifactId>junit-jupiter</artifactId>
    <version>5.10.0</version>
    <scope>test</scope>
</dependency>
```

Gradleの場合:
```
testImplementation 'org.junit.jupiter:junit-jupiter:5.10.0'
```
# 実際に書いてみよう

以下は、簡単な例として、勝利数を計算するメソッドの実装手順です。

Step 1:**テストを書く**
```Java
import org.junit.jupiter.api.Test;
import static org.junit.jupiter.api.Assertions.*;

public class CalculatorTest {
    @Test
    void testAddition() {
        Calculator calculator = new Calculator();
        int result = calculator.add(2, 3);
        assertEquals(5, result);
    }
}
```
Step 2: **テストを実行して失敗する**

この時点では、Calculator と add メソッドが存在しないため失敗します。

Step 3: **最小限の実装を書く**
```Java
public class Calculator {
    public int add(int a, int b) {
        return a + b;
    }
}
```

Step 4: **リファクタリング**

他のテストを追加したり、コードを更加して繰り返します。

**まとめ**

TDDは初めは時間がかかるように見えますが、長期的に見ると、デバッグに要する時間を減らし、コードを高質に保つことができます。

このガイドを参考に、Javaでのテスト駆動開発を始めてみませんか。
Pyramid Flow をローカルで動かしてみた

Pyramid Flow をローカルで動かしてみた

## 動作環境

- OS: Ubuntu Server 22.04.5 LTS
  - NVIDIA ドライバ: nvidia-driver-565-server
- CPU: AMD Ryzen 3700X
- RAM: DDR4 64GB
- GPU: NVIDIA RTX 3090 FE (VRAM 24GB)

## インストール

この通りにインストール
https://github.com/jy0205/Pyramid-Flow?tab=readme-ov-file#installation

## 動作確認

384p (640x384) ではエラーなく完了した.
784p (1280x768) では CUDA Out of memory が発生.

### Out of memory 回避策

https://github.com/jy0205/Pyramid-Flow/pull/75

```python
model.enable_sequential_cpu_offload()
```

を追加すればメモリ不足を回避できるらしい.

`app.py` を直接編集して追加書き込み.

ちなみに, `cpu_offloading` フラグを有効にすることでもメモリ不足を回避できるらしいが,
`app.py` を見るとすでに有効になっている模様.

## 実行時間

384p, 5s の動画生成はすぐ終わったが, 768p, 5s の動画生成は 35 分かかった…

## 追記

```python
model.enable_sequential_cpu_offload()
```

は必要なければ (VRAM が潤沢にあれば) つけない方が早いかも

384p, 5s の動画が enable_sequential_cpu_offload すると 5~6min, しないと 1min45s で完了.
ES資格②

# 【中級レベル】IoT／組込みシステム確認問題

以下の問題は、初級レベルの内容からさらに踏み込み、組込み技術とIoTに関する内容を結びつける中級レベルを想定しています。  
初めに示したPDFの範囲内で扱われている「エンベデッドシステムスペシャリスト」向けの知識を踏まえ、問題を構成しました。  
必要に応じて、ご活用ください。

---

## 1. 選択式問題

### Q1. 組込みシステムにおけるRTOS（リアルタイムOS）の特徴として、IoTデバイス開発時に特に考慮が必要な項目はどれでしょうか？
1. デバイス全体の動作が常にユーザ空間でのみ実行される  
2. 割り込み処理の遅延を最小限に抑えるスケジューリングを備えている  
3. 強力なグラフィカルユーザインタフェースを必須とする  
4. マルチコアCPU以外では動作しない  

---

### Q2. IoT向けの組込み機器において、ファームウェアのサイズや実行時メモリ使用量を抑えるための一般的な手法として**不適切**なものはどれでしょうか？
1. リンカスクリプトを活用して不要なコードやデータを排除する  
2. 動的なライブラリ読込を増やし、都度メモリ領域を確保する  
3. コンパイル時の最適化オプション（-Osなど）を利用する  
4. メモリ管理領域の断片化を抑えるため、スタティックアロケーションを活用する  

---

### Q3. IoTシステムで利用する低電力通信規格(LPWA)に関して、以下の説明のうち**正しい**ものはどれでしょうか？
1. Sigfoxはライセンスバンドでのみ動作するため、初期導入コストが非常に高い  
2. LoRaWANは端末側で送信出力を制御する機能があり、バッテリ寿命を延ばす工夫ができる  
3. NB-IoTはセルラー方式だが、自由に基地局を設置できるため運用しやすい  
4. Wi-SUNは都市部での利用が難しく、農業分野のみで使われている  

---

### Q4. IoT組込み機器の開発において、UARTやSPI、I2Cなどの通信インタフェースを選定する際に**最も重視される**要素はどれでしょうか？
1. 温度センサーの測定範囲  
2. 通信速度やデータ転送量、実装の複雑度  
3. ボタンの配置とクリック感  
4. 3Dグラフィックス描画の性能  

---

## 2. 穴埋め問題

### Q5. 組込みシステムでマイクロコントローラが起動後、最初に実行する初期化コード（スタックポインタ設定やBSS領域初期化など）を総称して「_____」と呼ぶ。

---

### Q6. IoTデバイスで使用される**省電力モード**の一種で、CPUクロックや周辺回路をほぼ停止させ、最小限の動作のみ継続する状態を「_____」と呼ぶ。

---

### Q7. 組込みソフトウェアの**ハードウェア抽象化レイヤ（HAL）**を活用するメリットとしては、異なるマイコン間でもコードを再利用しやすいことと、_____を単純化できることが挙げられる。

(ヒント: ドライバや周辺機能ごとに異なるレジスタ設定の違いを、アプリケーションレイヤから隠蔽できる)

---

## 3. 記述式問題

### Q8. IoT組込み機器のソフトウェア開発では、イベント駆動型の制御とタスクベースのマルチスレッド制御がよく用いられます。  
- **イベント駆動型**と**タスクベース**の制御設計それぞれの利点を1つずつ、簡潔に述べてください。

---

### Q9. IoTデバイスの消費電力を最適化するために、ハードウェア面とソフトウェア面の両方で行いうる具体的な対策を1つずつ挙げてください。

---

## 4. 応用・設計問題

### Q10. 組込み機器において、リアルタイム通信と大量データ処理が同時に求められる場合があるとします。  
- リアルタイム処理では**決められた時間内の応答**が必須  
- 大量データ処理では**高い計算リソース**を必要とする  
このような要求を満たすアーキテクチャとして、どのような設計方針やシステム構成が考えられますか？  
（例：メインマイコンと専用プロセッサとの分業など）

---

## 解答例（サンプル）

- **Q1：** 2  
  - RTOSは割り込み処理やタスク管理に重点を置き、リアルタイム性を保証するため、割り込み処理の遅延を最小化するような仕組みがある。

- **Q2：** 2  
  - 動的ライブラリ読込を多用すると、組込み機器ではメモリ不足や断片化が発生しやすい。一般的には不適切。

- **Q3：** 2  
  - LoRaWANではADR（Adaptive Data Rate）を活用し、最適な送信出力やデータレートに調整できる機能がある。

- **Q4：** 2  
  - 組込み機器のインタフェース選定では、必要とされる通信速度やデータ転送量、実装の複雑度（ピン数やコード量など）を総合的に検討する。

- **Q5：** スタートアップルーチン（startup code）  
  - または「ブートストラップコード」と呼ぶ場合もある。

- **Q6：** ディープスリープ（Deep Sleep）  
  - マイコンやベンダによって名称が異なる場合もある（Stopモード、Standbyモードなど）。

- **Q7：** デバイスドライバ開発  
  - HALを利用することで、特定のマイコンや周辺機能ごとのレジスタ操作を共通化し、ドライバ開発の手間を削減できる。

- **Q8：**  
  - イベント駆動型の利点例: 割り込みベースで効率的に処理できるため、リソースを無駄にせずに動作可能  
  - タスクベースの利点例: 優先度やタスク間の独立性を設計しやすく、機能の追加や分割が比較的容易

- **Q9：**  
  - ハードウェア面: 省電力マイコンや低消費電力周辺回路を選択、電源管理ICで各ブロックを個別にON/OFF制御  
  - ソフトウェア面: 不要時にはスリープモードに移行、タスクスケジューリングの最適化、動作周波数を動的に切り替え

- **Q10：**  
  - 例: メインマイコンはリアルタイム制御（割り込み優先設計など）を担当し、別途高性能CPUや専用プロセッサ（DSP/AIアクセラレータ）で大量データ処理を行う。  
  - 双方が独立したOSやスケジューラを走らせ、必要最低限のデータのみやり取りすることで、リアルタイム性と大量処理能力を両立する。

---

これらの問題を通じて、組込み技術とIoT技術を結びつけて理解する力を確認できます。PDFの学習範囲と照らし合わせながら、理解度をチェックしてみてください。
#01 ありふれたゲーム開発記録

# ゲーム開発記録#01

今年の目標ゲームを作成しリリースするですが、
学生時代にHSPという言語でシューティングゲームやらRPGゲームっぽいのやら
いろいろ作っていたのを思い出し、今のスキルでどこまで作れるのか。
また、企画から開発・リリースまでを個人でも経験することで自身のスキルアップを目指して進めるものとしています。
簡単に言えば、>>「ゲーム作りたい」<<という欲のもと進めます。


:::note warn
これはあくまで個人開発によるスキルアップのための開発です。
個人的記録として残している面が大きいため、参考にはしないようにお願いいたします。
:::

# 企画案
### ゲーム名
未定 ※今後決定時に修正

### ゲーム概要
２D横スクロールログライクゲームで、プレイヤーは多様な武器を駆使して待ち構える敵と戦いながら進めていきます。
ランダムに生成されるステージ・アイテムによりプレイするたびに異なる体験を提供します。

### ゲームの特徴
* ジャンル：２D横スクロールローグライクゲーム
* プラットフォーム：PC（今後増える可能性あり）
* プレイ人数：１人

### ローグライク要素
* ランダム生成：ステージ・敵の配置アイテムの出現場所をランダムに決定し、リプレイ性を高める
* パーマデス：一度死亡すると最初からやり直し。ただし、プレイを重ねることでキャラクターのスキルや装備をアンロックされる（ゲームオーバーはない）
* アイテム収集：プレイヤーはプレイ時に様々なアイテムや装備を収集し、それらを駆使し進んでいく

### ゲームプレイ
* 操作方法：簡単な操作でキャラクターを動かし、攻撃・ジャンプなどのアクションを行う
* 武器とスキル：各種の武器やスキルを使い分け、敵に対応する。武器には剣、弓、魔法等があり、それぞれ独自の特性を持つ
* 成長システム：敵を倒すことで経験値を取得し、レベルアップすることでスキルや能力が解放される

### ストーリー
* 未定

### ビジュアルとサウンド
* グラフィック：開発の勉強ということもあり、フリー素材を駆使
* 音楽：グラフィック同様フリー素材を駆使

### ターゲットユーザー
このゲームはローグライクや２Dアクションゲームが好きなプレイヤーをターゲットとし、ランダム生成や高いリプレイ性を求めるプレイヤーに魅力的な内容とする

### 企画まとめ
本ゲームは、２D横スクロールローグライクゲームを開発することで、自信の技術スキルアップを目指します。
ゲーム開発から企画・要件・設計・製造・テストとの流れを把握し、今後の技術の役に立てるようしていきます。

とはいえ、楽しく遊んでもらえるゲームでなければ意味がないので、ゲームの内容には妥協せず進めていきます。

:::note info
企画の詳細に時間を消費してしまうのはもったいないので、AIで生成した企画を自分なりに改変しています。
今後の勉強も兼ねどうすればいい企画にできるのかもしっかりと学んでいく所存です。
:::
群馬の魅力を伝える！UI/UXデザインに挑戦【開発日記4日目】

# 開発日記 4日目：使いやすさを追求！UI/UXデザインの検討（その１）🎨

こんにちは！群馬県ローカルイベント発見アプリ開発者の🐮です。

今日は開発日記【4日目】として、 **「使いやすさを追求！UI/UXデザインの検討（その１）」** についてまとめました。

---

## 📌 今日の作業内容

### 1. アプリ全体のデザインコンセプトを決定 ✏️

悩みに悩んだ結果、以下のコンセプトに決定しました！

> **「シンプルで親しみやすく、群馬の魅力を伝えるデザイン」**

群馬の自然、温泉、美味しい食べ物…そんな魅力を感じてもらえるよう、**色使い**、**フォント**、**レイアウト**にこだわります。

### 2. 参考になるデザインをリストアップ 🧐

UI/UXの参考にするため、いくつかのWebサイトやアプリをチェックしました。

1. **じゃらん 🏞️**  
   観光情報が見やすく、親しみやすいデザインが魅力的。
2. **Pinterest 📷**  
   画像中心の美しいレイアウトで、視覚的に情報を伝える工夫が満載。
3. **メルカリ 🛒**  
   シンプルで直感的な操作性。ユーザーエクスペリエンスの面で多くを学びました。

これらの良い点を活かしながら、**独自性**をプラスしていきます！

### 3. ブランドイメージ・個性の表現 🎨

アプリのブランドイメージを

> **「群馬をもっと好きになるきっかけを創る」**

と設定し、以下の要素を検討しました。

- **カラーパレットの選定 🌈**  
  群馬の自然をイメージした**グリーン**、温泉を連想させる**暖色系**を基調に。
- **フォントの選定 ✍️**  
  柔らかく親しみやすい印象のフォントを採用。
- **アイコンやロゴデザイン 🎭**  
  群馬のシンボル「だるま」や「上毛かるた」をモチーフに検討中。

ユーザーが群馬の魅力を直感的に感じられるデザインを目指します！

---

## 🔄 これまでの進捗状況

- **基本機能の要件定義と仕様策定が完了**
- **デザインコンセプトも固まりつつある**

徐々に形が見えてきて、頭の中のアイデアが具体化する喜びを実感中です😊  
一人での開発は大変ですが、達成感もひとしおです！

---

## ✨ 今日の学びと反省

### 学び 💡

- **デザインコンセプトの重要性**  
  明確なコンセプトがあると、方向性がぶれないことを実感しました。
- **参考デザインの活用**  
  他の優れたデザインを見ることで新しい発見がありました。
- **ブランドイメージの統一**  
  色やフォントを統一することで、アプリ全体の印象がアップします！

### 反省 😅

- **時間管理が甘い**  
  デザインに夢中になりすぎて、時間を忘れてしまいました…。明日はしっかりタイムマネジメントを意識します！

---

## 🚀 次の目標

明日は【使いやすさを追求！UI/UXデザインの検討（後半）】に取り組みます！

### 主なタスク

- **主要な画面のワイヤーフレーム作成**
- **直感的な画面遷移の設計**
- **ユーザビリティを高める工夫の検討**

これからも、群馬を盛り上げるアプリを作るために頑張ります💪✨  
応援やご意見をぜひコメントやX（旧Twitter）で教えてください！

---
【ChatGPT】新機能のタスクへの指示は確認しましょう。


　どうも、カーブミラーです。

　今回は、新機能のタスクへの指示は確認しましょう。きちんと設定できているでしょうか？

:::note info
本記事は、ChatGPT（Plus版）
で行なっております。
画像はありません。あしからず。
:::
　ChatGPT等の動作状況を知らせる
　　OpenAIのステータスページ。
　　　[OpenAIステータス](https://status.openai.com/)
***
　こちらも載せますね。
　　[ChatGPTが使えない？ログインできない・反応しない原因やエラー時の対処法を解説](https://aismiley.co.jp/ai_news/chatgpt-error-resolution-explanation/)
***
　ではさっそく、【本題】です。

　今回は、
　　新機能のタスクへの指示は
　　　確認しましょう、というお話。

　先日、ChatGPTに追加されたタスク。
　　タスク登録後に確認していますか？

　簡単な登録だと大丈夫なようですが、
　　少し複雑になると、
　　　抜けが発生します。

　下記Promptで確認してください。
```Text:タスク登録確認Prompt
タスクの内容をお願いします。
```

　確認して、
　　抜けがあるようならば、
　　　内容の修正が必要です、

　アカウント→タスク　で
　　スケジュール済の一覧から
　　　登録したタスクを編集すれば
　　　　いいのですが、
　　　　　英語で書かれているため、
　　　　　　修正するのが大変です。

　　できれば、
　　　セッション上から
　　　　日本語で行ないたい。

　そこで
　　欠けた情報を指摘して
　　　修正を促します。

　修正後、
　　再度、確認してください。

　みなさんの
　　作品制作の糧に
　　　なれば、幸いです。

　今回は、ここまで。
ES問題①


# IoT中級レベル確認問題

以下の問題は、IoTに関する基本的な概念を踏まえたうえで、より詳細な技術内容や設計上の考慮点を確認するためのものです。  
ご自身の理解度チェックや演習としてご活用ください。

---

## 1. 選択式問題

### Q1. LPWA（Low Power Wide Area）ネットワークに関する説明として最も適切なものはどれでしょうか？
1. 超高速通信を可能にするが、消費電力が非常に高い  
2. 近距離通信しかできないが、伝送速度が高速になる  
3. 消費電力を低く抑えつつ、広範囲での通信に適している  
4. 強固な暗号化が必須であるため、実用化がまだ行われていない  

---

### Q2. IoTデバイスとクラウド間の通信において、エッジコンピューティングの採用が推奨される理由として**不適切**なものはどれでしょうか？
1. ネットワーク遅延を低減するため  
2. デバイス側の処理負荷を極力軽くするため  
3. 大量データを事前に集約・要約することで通信量を削減するため  
4. ネットワーク障害時でも最低限の処理を継続するため  

---

### Q3. IoTシステム全体のセキュリティ設計において、考慮すべき要素として**誤っている**ものはどれでしょうか？
1. 通信経路の暗号化  
2. デバイス起動時のセキュアブート  
3. 遠隔制御用Webサービスの2要素認証  
4. センサーの精度を高めるためのキャリブレーション方法  

---

## 2. 穴埋め問題

### Q4. IoTデバイスで、機器自身が動作状況を監視し、異常があった際にログを収集する機能を「_____機能」と呼ぶ。  
(ヒント: 予防保守や問題解析で重要視される機能)

---

### Q5. IoTデバイスに搭載される通信モジュールで、固定の周波数帯を占有せずに複数チャンネルを hopping（切り替え）しながら通信する方式を「_____」と呼ぶ。  
(ヒント: 省電力かつ混信を抑えられる無線技術で用いられる)

---

## 3. 記述式問題

### Q6. 「IoTデバイスが実行するソフトウェアをOTA(Over The Air)でアップデートする際に発生しうるセキュリティ上のリスク」と、それを緩和するための具体的な対策を1つずつ挙げてください。

---

### Q7. IoTシステムでのデバイス認証やユーザ認証を実装する際、**公開鍵暗号方式**を利用するメリットを2点挙げてください。

---

## 4. 応用・設計問題

### Q8. あるIoTシステムでは、エッジ側での高速応答が求められており、クラウドに送る前に多くの計算をローカルで行う設計が検討されています。一方で、クラウド上に設置するAIモジュールによる高度な分析も並行して行う必要があります。

- ローカル（エッジ）で処理すべきデータと、クラウドで処理すべきデータをどのように分担するか  
- その際に発生するデータの一貫性の問題をどのように扱うか  

以上の2点について、簡潔に説明してください。

---

### Q9. IoTセンサーから集めた大量データをビッグデータ基盤で処理し、リアルタイムにダッシュボードで可視化するアプリケーションを考えています。  
センサーのデータ送信レートが多様（秒単位〜分単位）で、大量の同時接続が想定される場合、どのようなメッセージング基盤・アーキテクチャを導入すれば良いでしょうか？  
(ヒント: Pub/Subモデルやキューイングシステム、分散ストリーム処理の活用など)

---

### Q10. IoTデバイスの組み込みOS上でセキュアブートを実装する場合、必要となる主要なプロセスを3段階に分けて説明してください。

---

## 解答例（サンプル）

- **Q1：** 3  
  - LPWAは低消費電力かつ広域通信を想定した技術。代表例としてLoRaWANやSigfoxがある。

- **Q2：** 2  
  - エッジコンピューティングでは端末側で処理を行うため、むしろデバイス（端末）側の負荷が増えることもある。

- **Q3：** 4  
  - センサーのキャリブレーション精度はQoSには関係しますが、セキュリティ設計に直接含まれる要素ではありません。

- **Q4：** 自己診断機能 / セルフモニタリング機能 / ヘルスモニタリング機能（いずれの呼び方も可）  
- **Q5：** 周波数ホッピング方式 (Frequency Hopping Spread Spectrum: FHSS)

- **Q6：**  
  - リスク例: アップデートファイルの改ざんによるマルウェア注入  
  - 対策例: アップデートファイルへの署名や暗号化、アップデート時の認証チェック

- **Q7：**  
  1. 鍵の配布が秘密鍵方式よりも容易（秘密情報の大規模管理を減らせる）  
  2. 通信路上で公開鍵をやり取りしても安全性が確保しやすい

- **Q8：**  
  - 分担例: リアルタイム制御に必要な解析はエッジ側で行い、大規模で高度な機械学習による予測分析はクラウド側で実施  
  - データの一貫性: タイムスタンプやバージョン管理を用いて、クラウドに送るデータとの不整合を軽減。また、定期的な同期プロセスを用意する

- **Q9：**  
  - Pub/Subモデル（RabbitMQ, Apache Kafka など）を利用し、複数のセンサーからのデータを非同期に受け取り、ストリーム処理（Apache Spark StreamingやApache Flinkなど）でリアルタイム分析するアーキテクチャが考えられる

- **Q10：**  
  1. **ブートローダの検証**: 不正なブートローダが実行されないように、ブートローダの署名を検証  
  2. **OSイメージの検証**: ブートローダによるOSイメージの署名チェック・改ざんチェック  
  3. **OS起動とアプリケーション検証**: OS起動後に、各種ドライバやアプリケーションにも署名検証などのセキュリティチェックを実施  

---

以上の問題を参考に、IoTシステムの設計・実装・運用に必要な知識を深めていただければ幸いです。  
必要に応じて、より高度な暗号化技術や大規模分散システムに関する内容、組み込みリアルタイムOSの詳細などを学習に加えてみてください。
Javaで「テキストフィールドの作成と初期値や列数(幅)の設定」の動作を確認してみた。

# 概要

Javaで「テキストフィールドの作成と初期値や列数(幅)の設定」の動作を確認してみました。
以下のページを参考にしました。

https://www.javadrive.jp/tutorial/jtextfield/index1.html

# 実装

以下のファイルを作成しました。

```JSample1_1.java
import javax.swing.JFrame;
import javax.swing.JTextField;
import javax.swing.JPanel;
import java.awt.Container;
import java.awt.BorderLayout;

class JSample1_1 extends JFrame{
  public static void main(String args[]){
    JSample1_1 frame = new JSample1_1("MyTitle");
    frame.setVisible(true);
  }

  JSample1_1(String title){
    setTitle(title);
    setBounds(100, 100, 600, 400);
    setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

    JTextField text1 = new JTextField();
    JTextField text2 = new JTextField(10);
    JTextField text3 = new JTextField();
    text3.setColumns(20);

    JPanel p = new JPanel();
    p.add(text1);
    p.add(text2);
    p.add(text3);

    Container contentPane = getContentPane();
    contentPane.add(p, BorderLayout.CENTER);
  }
}
```

以下のコマンドを実行しました。

```
$ javac JSample1_1.java 
$ java JSample1_1
```

実行結果は以下の通りでした。

![Screenshot from 2025-01-19 12-46-16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192024/178d5956-a316-3423-9614-606a3db58f10.png)


# まとめ

何かの役に立てばと。
SwiftUIで「続きを表示」を実装する

:::note info
この記事はSwiftを勉強する過程で書き溜めたものを、もったいないかも精神で投稿しています。上手くいかなかったり、他にスマートな方法があるかもしれません。
:::

## はじめに

表示するテキストが指定した行数を超えると、途中で省略して「続きを表示」ボタンを出します。SNS系のアプリでよく見るやつです。

![output-palette.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/459707/753a8099-e81a-df25-c43e-8e5d9adee6d2.gif)

### 参考元

[SwiftUIでTruncated Text｜TAAT](https://note.com/taatn0te/n/nc288cb250e5f)
[SwiftUI: How to make see more see less style butto](https://prafullkumar77.medium.com/swiftui-how-to-make-see-more-see-less-style-button-at-the-end-of-text-675f859c2c4f)

参考元様との違いは「続きを表示」がテキスト中に表示されるか、次の行に表示するかが異なります。
今回は「X」のまんまを実装したかったので、シンプルに後者で実装しました。

### 確認した環境
Xcode 16.0
iOS 18.0

## 考え方

テキストの省略表示自体は`lineLimit`モディファイアで実現できます。「続きを表示」を表示するか否かを`lineLimit`を設定しないパターンと比較して制御します。

具体的な流れは、下記のとおりです。

1. `lineLimit`を使って表示する行数を指定
1. 制限せずにテキストを表示した場合の高さを、1.の`background`に**非表示**で仕込む
1. 1.と2.を比較して相違がある場合、テキストが省略されていると判断して「続きを表示」ボタンを表示

![名称未設定ファイル.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/459707/f4e2d194-f126-3b0d-be47-3ebdc11e0c40.png)

## コード

```Swift
struct ExpandableTextView: View {
    @State private var isExpanded = false // テキストが展開されているかどうかの状態
    @State private var isTruncated = false // テキストが制限行数を超えているかの状態

    let text: String
    let lineLimit: Int // 制限行数

    var body: some View {
        VStack(alignment: .leading) {
            // テキスト表示部分
            Text(text)
                .lineLimit(isExpanded ? nil : lineLimit)
                .background(
                    // 「続きを読む」用にテキストを制限パターンと無制限パターンを非表示で生成して高さを比較する
                    Text(text) // A.指定行数制限されるテキストを設置して、サイズを計測
                        .lineLimit(lineLimit)
                        .background(GeometryReader { limitTextGeometry in
                            ZStack {
                                Text(text) // B.全表示されるテキストを設置し、サイズを計測
                                    .background(GeometryReader { fullTextGeometry in
                                        Color.clear.onAppear {
                                            // BとAを比較してB(全表示)が大きい場合は省略されていると判定
                                            isTruncated = fullTextGeometry.size.height > limitTextGeometry.size.height
                                        }
                                    })
                            }
                            .frame(height: .greatestFiniteMagnitude) // 子が親の高さに依存しない
                        })
                        .hidden() // 計算用に使ったテキストは非表示にする
                )

            // 「続きを表示」または「閉じる」ボタン
            if isTruncated { // テキストが制限行数を超えている場合にのみ表示
                Button(action: {
                    isExpanded.toggle()
                }) {
                    Text(isExpanded ? "閉じる" : "続きを表示")
                        .foregroundColor(.blue)
                }
            }
        }
    }
}
```
pLaTeXの文章をLuaLaTeXへ移行する

$p\LaTeX$の文書を$Lua\LaTeX$に移行するにあたって，必要だったことをまとめます．

# 結論
手っ取り早くやりたい人に

- ドキュメントクラスの変更
- ``dvipdfmx``の削除

# 1. ドキュメントクラスの変更
``\LaTeX``では，冒頭にドキュメントクラス（``jarticle``とか``jbook``とか）を指定する必要があります．これを以下の対応表のように変更してください．

|pLaTeX|LuaLaTeX|
|:---:|:---:|
|jarticle|ltjsarticle|
|jreport|ltjsreport|
|jbook|ltjbook|

# 2. ``dvipdfmx``の削除
$p\LaTeX$ではPDFファイルにコンパイル際，一度DVIファイルを生成し，これをPDFファイルに変換する作業を行わなければなりませんでしたが，$Lua\LaTeX$では，texファイルを直接PDFに出力できるので，DVIファイルを変換する作業は不要になりました．

そこで$p\LaTeX$では，
```platex.tex
\usepackage[dvipdfmx]{graphicx}
```

と宣言している箇所がありますが，$Lua\LaTeX$では，

```lualatex.tex
\usepackage{graphicx}
```
と変更してください．

ちなみに，画像をそもそも挿入しない場合は，この作業は不要です．

# 3. コンパイルレシピを変更する（VSCode利用者向け）
当然といえば当然ですが，コンパイルするエンジンを$p\LaTeX$から，$Lua\LaTeX$を使うように変更する必要があります．

お使いのエディタによって，コンパイルするエンジンを変更する方法は異なるのですが，今回は比較的利用者が多いであろう，``Visual Studio Code (VSCode)``を例にします．

---------
``setting.json``を開いてください．

以下のコンパイルレシピを追記します．

```setting.json
    // LaTeX Workshop
    "latex-workshop.latex.recipes": [
        {
            "name": "lualatex",
            "tools": [
                "lualatex",
                "pbibtex",
                "lualatex",
                "lualatex",
            ]
        }
    ],
    "latex-workshop.latex.tools": [
        {
            "name": "lualatex",
            "command": "lualatex",
            "args": [
                "-I 168",
                "--cmdx",
                "-file-line-error",
                "-synctex=1",
                "-interaction=nonstopmode",
                "-halt-on-error",
                "%DOC%"
            ],
            "env": {}
        },
        {
            "name": "pbibtex",
            "command": "pbibtex",
            "args": [
                "-kanji=utf8",
                "%DOCFILE%"
            ]
        },
    ],
```
このとき，以前の``latex-workshop.latex.recipes``，``latex-workshop.latex.tools``は削除するか，$p\LaTeX$等のコンパイル方法も残す場合は，各項目に合わせるように追記するようにしてください．

:::note warn
このコンパイルレシピは，$Lua\LaTeX$で一度コンパイルした後，$Bib\TeX$で参考文献を拾って，$Lua\LaTeX$で2回コンパイルする設定です．
他の参考文献管理ツールを用いる場合は，このへんの設定は少し異なります．
:::

以上の設定で，$p\LaTeX$から$Lua\LaTeX$に移行できるはずです．
Live Serverで403や404が表示されたときの対処

# 出てきたエラー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3984125/c33fd440-3cc9-85fe-8bb1-74413852fb5c.png)
ルートの外にあるからアクセスできませんとエラーが出てますね

# 対処
### そもそもルートとは
対象のファイルを探すときの入口。
今回出たエラーだと、 `C:` になります。
セキュリティ上、Live Server がファイルシステム全体を読み取ることを防ぐ仕組みがあるので、エラーが起きたってことです。

### 解決方法
相対パスをURLに指定する。
つまり、今回は`03_js_basic`以降を使いました。
緑によるABC389振り返り

# はじめに

> ユーザ名	[hidehico](https://atcoder.jp/users/hidehico)
> コンテスト名	[トヨタ自動車プログラミングコンテスト2025（AtCoder Beginner Contest 389](https://atcoder.jp/contests/abc389)
> 順位	[2095th / 12393 (top 1.75%)](https://atcoder.jp/contests/abc389/standings?watching=hidehico)
> パフォーマンス	1204
> レーティング	872 → 911 (+39) Highest更新！
> 段級位	6 級

やったー久しぶりの、<font color="#00c9e8">水パフォ</font>(コンテスト前、松本駅で親を待つ間、寒くて駅の階段を爆速で登り、すぐ降りた奇行をしたやつが言うな)
解いた問題数は、ABCD4完でした

### コンテスト中の流れ

#### 開始3秒
atcoder cliで、コンテストデータを取得する
A問題を見る

#### 開始48秒
A問題を提出

#### 開始60秒
B問題を見る
難しそうに見えたが、案外簡単ですぐACできた

#### 開始3分
C問題を見る
このタイプのクエリは見たことがあったので、その方針でやると決めた

#### 開始26分
C問題をバグり散らかしつつも、AC(0ペナ)

#### 開始27分
D問題を見る
方針がすぐ定まり、実装を始める

#### 開始41分
D問題を提出し、AC
順位表を見てどちらを、解きに行くか、見る
Eは挑戦している人は多いが、ACしている人が少ない
Fはその反対

Fはセグ木っぽかったので、Fのセグ木は解いた試しがないので、Eを解きに行く
そのまま時間は、すぎてゆきコンテストは終了した

### 使っているライブラリ
[github](https://github.com/hidehic0/library)(コミットする時、毎度のようにコンフリクトするため、萎える(pull忘れたりするのが多い))

**二分探索ライブラリ**
```py
def binary_search(fn: Callable[[int], bool], right: int = 0, left: int = -1) -> int:
    while right - left > 1:
        mid = (left + right) // 2

        if fn(mid):
            left = mid
        else:
            right = mid

    return left
```

そんじゃ一問ずつ感想書きますか

# [A問題](https://atcoder.jp/contests/abc389/tasks/abc389_a)
普通に実装した
first acが13秒でびっくりした(自分は、48秒)

ACコード(ライブラリ抜粋 以下略)

```py
S = s()
print(int(S[0]) * int(S[2]))
```

# [B問題](https://atcoder.jp/contests/abc389/tasks/abc389_b)
最初戸惑ったけど、案外簡単だった
$10^18 < 20!$なので20までを、全探索した

ACコード

```py
X = ii()

for i in range(1, 21):
    if X == factorial(i):
        print(i)
        exit()
```

# [C問題](https://atcoder.jp/contests/abc389/tasks/abc389_c)
抜けたヘビの長さの総和を位置から引いて出力すればいい
だけど、方針ミスったりで、時間がかかった

ACコード

```py
Q = ii()
L = defaultdict(lambda: (0, 0))
cur = -1
t = 0
m = 0

for _ in [0] * Q:
    l = il()

    if l[0] == 1:
        L[cur + 1] = (L[cur][-1], L[cur][-1] + l[1])
        cur += 1
    elif l[0] == 2:
        m = L[t][-1]
        t += 1
    else:
        print(L[t - 1 + l[1]][0] - m)
```

# [D問題](https://atcoder.jp/contests/abc389/tasks/abc389_d)
最初にいい方針、引けたので、20分ぐらいでACできた
x = 0の線とy = 0の線を使って四等分して、そのどこかの、区間の答えを4掛ければacできた
その答えを求める計算は、x軸を全探索して、そのxを使って二分探索すればいい
距離はユークリッド距離で求めなければいい(マンハッタン距離使って5分ぐらいロスした)

僕は二分探索で実装したけど、公式解説は尺取り法みたい、まあどっちでもいっか

ACコード

```py
R = ii()
ans = 0

for i in range(R + 1):
    if i + 1 > R:
        continue

    def c(mid):
        return ((i + 0.5) ** 2) + ((mid + 0.5) ** 2) <= R * R

    ans += binary_search(c, R * 2, 0)

print(ans * 4 + 1)
```

# [E問題](https://atcoder.jp/contests/abc389/tasks/abc389_e)
いろいろ試したけど、ACできなかった
解法は二分探索みたい

# さいごに
やっぱ<font color="#00c9e8">水パフォ</font>出すと、脳汁がヤバいですね(水パフォぎりぎりだろ)
Cで方針ミスったけど、Dで挽回できたので、結果オーライでした

AHCが楽しみです

:qa!
RuntimeError: dictionary changed size during iteration

# 原因
#### サイズ変更によるエラー
辞書型のループ時にpop()メソッドで削除していくコード
```python
for key in dic.keys():
    dic.pop(key)

# RuntimeError: dictionary changed size during iteration
```

# 解決
リストにキャストループする
```python
for key in list(dic):
    dic.pop(key)

```

# 参考サイト

https://yuta0306.github.io/py-dict-iter-err

https://stronger.hatenablog.com/entry/2016/12/13/141028
東方Projectの二次創作ゲームの制作でよく使うサイト一覧

## はじめに
### 東方とは
皆さん、東方Projectをご存知ですか?
ZUN(通称：神主)さんの個人サークル「上海アリス幻樂団」の同人ゲーム、書籍、音楽CDの事です。
20年以上の歴史がある作品であり、キャラクターも150を優に超えています。

魅力について語るとなるとキリが無いですが、この記事で重要な東方Projectの魅力として`二次創作に寛容`というのがあります。
簡単に言うと、最低限のガイドラインさえ守れば東方のキャラや場所を利用して創作物を作れます。
東方二次創作ゲームも数多くあり、例えば筆者個人制作の[東方翠神廻廊](https://play.google.com/store/apps/details?id=com.TD12734.thsuijin&hl=ja)や、企業制作の[東方LostWord](https://touhoulostword.com/)が存在します。

https://play.google.com/store/apps/details?id=com.TD12734.thsuijin&hl=ja

この記事では筆者が東方二次創作ゲームを制作する上でよく使うサイトを紹介します。

## 二次創作ガイドライン
https://touhou-project.news/guideline/

東方Projectの二次創作についての指針が書かれています。
ゲームに限らず、東方Projectの二次創作をする人は必ず一度は目を通しましょう。
特に、以下の事には気を付けると良いでしょう。

- 創作物が東方二次創作だと明記する
- 東方Projectの原作ゲームのエンディングを公開してはいけない
- クラウドファンディングは基本的に不可能

<details><summary>エッチな二次創作物について</summary>

ガイドラインでは `その他過剰な性的表現` が禁止されています。
しかし、これはエロい二次創作物全般が禁止という訳では無く、以下のように法律に引っ掛かる物を指すとZUNさんは言っています。

> 過剰な性的表現というのは法に引っかかる程度です。当然ですが日本の法律には準拠してください
> 
> https://x.com/korindo/status/37074986225115137

~~実際に、東方のエロ本やエロゲーは探せば山ほどあります。~~
局部の修正などは忘れずにやりましょう。

</details>

## 東方系素材
### 画像素材
以下の記事も参考にしてください。
東方の世界観に合いそうな和風素材の紹介などをしています。

https://qiita.com/TD12734/items/5dc8068732f94452efe2

#### dairi
http://seiga.nicovideo.jp/seiga/im3189645

dairiさんは東方キャラの立ち絵を描いている人です。
旧作キャラや書籍キャラを含め、最新作(獣王園)までの全員分の立ち絵素材があります。
また、デフォルメされた立ち絵素材もあります。

#### GridNote
http://gridnote.blog62.fc2.com/

A.I.さんは東方キャラのドット絵を描いている人です。
旧作キャラや書籍キャラを含め、最新作(獣王園)までの全員分のドット絵素材があります。
雑魚キャラや蓬莱少女繪幻想のキャラなど、かなりマニアックなドット絵も揃っています。

### 音楽素材
#### ニコニコ動画、nicozon
https://www.nicovideo.jp/video_top

https://www.nicozon.net/

ニコニコ動画には多数の東方アレンジ楽曲があります。
アレンジが欲しい原曲名で検索し、気に入った楽曲があったらnicozonで保存しましょう。
ただし、作者によってはMP3を用意してくれて至り、利用に制限がある場合があります。
動画説明や作者のプロフィールは必ず読みましょう。

#### 月面着陸ファージ
https://moonphage.net/music/

多数のスピードアレンジやメタルアレンジを公開しているサイトです。
流石に全曲はありませんが、140曲ほどのアレンジ楽曲があります。

#### ニコニ・コモンズ
https://commons.nicovideo.jp/

こちらには東方関連の効果音の素材が多数公開されています。
原作っぽい効果音やジングルなどの短い東方アレンジはここで探すと良いでしょう。

## 原作設定
### 東方元ネタwiki 2nd
https://seesaawiki.jp/toho-motoneta_2nd/

東方キャラ全員分の名前やスペルカード、元ネタ考察などが網羅されたサイトです。
ゲームでスペルカードを実装したい時など、原作の要素を(誤字脱字なく)使いたい場合は必ずと言って良いほど使います。
誤字脱字が多いとネタにされたり、最悪炎上するのでこのサイトで名前周りはしっかり確認すると良いでしょう。

### スキマネット
http://sukimanet.net/

剛欲異聞までの東方キャラ全員の名前やスペルカードなどが網羅されたサイトです。
こちらは元ネタwikiと異なり考察周りはありませんが、原作の立ち絵の画像を確認できます。

### Radical Discovery
http://radical-d.extrem.ne.jp/

東方原作のセリフが網羅されたサイトです。
ゲーム中で東方キャラを喋らせたいとき、ここで口調や一人称や二人称を調べます。
旧作のセリフも網羅されているので旧作キャラを喋らせたいときもここで調べましょう。
ただし、剛欲異聞以降は無いので注意してください。

また、紺珠伝までのスペルカードの弾幕画像もあります。

### 東方備忘録
http://ohgosho.ehoh.net/index.htm

東方原作で使われている背景素材がまとめてあるサイトです。
神霊廟の項目までしかありませんが、東方原作の雰囲気に近い作品を作りたい場合は参考になると思います。

### Touhou Wiki
https://en.touhouwiki.net/wiki/Touhou_Wiki

英語版の東方元ネタwikiのようなサイトです。
東方は日本のみならず海外でも人気があります。
東方二次創作ゲームを海外でも公開したいとき、このサイトを使えば英訳が捗るでしょう。

### THBWiki
https://thwiki.cc/%E9%A6%96%E9%A1%B5

中国語版の東方元ネタwikiのようなサイトです。
東方は海外の中でも中国で強い人気があります。
東方二次創作ゲームを中国でも公開したいとき、このサイトを使えば中国語訳が捗るでしょう。

## その他
### 日本の伝統色 和色大辞典
https://www.colordic.org/w

和色一覧とカラーコードが載っています。
和風な雰囲気を出したいとき、ゲーム中でここの色を使う事がよくあります。