OmniAICreator/Qiita-1.07M huggingface dataset:
言語やライブラリのバージョン管理を asdf でお手軽に

# はじめに
asdf というバージョン管理ツールの導入方法について解説します。

# asdf とは？
プログラミング言語やライブラリのバージョンを一括で管理できるツールです。
nodeenv や pyenv などで特定の言語のバージョン管理をすることができますが、asdf では複数の言語やライブラリのバージョンをまとめて管理することができます。
もちろん、ディレクトリ毎にバージョンを指定することもできるので、プロジェクトで利用するライブラリのバージョン管理も容易になります。
https://asdf-vm.com/

# 導入
M2 Mac (Ventura 13.0) を前提としています。
別環境で導入する場合は、[公式サイト](https://asdf-vm.com/)を参考に適宜読み替えてください。

## インストール
[HomeBrew](https://brew.sh/) でインストールできます。
```
brew install asdf
```

## 初期設定
asdf 経由でインストールしたツールを使うための初期設定をします

`~/.profile` または `~/.zshrc` に以下の行を追加し、terminal を再起動する。
```
. /opt/homebrew/opt/asdf/libexec/asdf.sh

# 以下のコマンドを実行でもOK
echo -e "\n. $(brew --prefix asdf)/libexec/asdf.sh" >> ${ZDOTDIR:-~}/.zshrc
```

# 基本的な使い方
nodejs のインストールを例に基本的な利用方法を記します。

### プラグインから検索
```
asdf plugin list all | grep nodejs
# nodejs                        https://github.com/asdf-vm/asdf-nodejs.git
```

### プラグインのインストール
```
# asdf plugin add の後に名称とリポジトリの部分をコピペする
asdf plugin add nodejs                        https://github.com/asdf-vm/asdf-nodejs.git
```

### 利用可能なバージョンの確認
```
asdf list all nodejs
# 0.1.14
# ...
# 21.7.1
```

### インストール
```
# バージョンを指定してインストール
asdf install nodejs 21.7.1

# 最新版をインストールする場合は latest を指定
# asdf install nodejs latest
```

### 利用するバージョンの指定
```
# 利用するバージョンをセット
asdf local nodejs 21.7.1

# バージョン確認
node --version
# v21.7.1
```

以下のように `global` を指定すると、すべてのディレクトリで指定したバージョンが適用されます
```
asdf global nodejs 21.7.1
```

# 設定したバージョンの管理
`asdf local` で設定したバージョンは `.tool-versions` というファイルに記載されます。
これをプロジェクトのリポジトリにコミットすれば、ツールのバージョンもコードと合わせて管理することができます。
```
cat .tool-versions
# nodejs 21.7.1
```

# 最後に
バージョン管理ツール asdf の導入方法について記載しました。
個人で使うのにはもちろん、チームで使うのにとても便利なツールなので、ぜひ使ってみてください。
VBA Projectの参照不可になったOCXを登録したい

# 1. はじめに
* VBAのレガシーソースで参照設定になったライブラリを復元したい
* OCXを登録して利用できるようにしたい

# 2. 開発環境
* Windows 10 (64bit)
* Excel 2016
* VBA

# 3. 事象
* 参照不可のライブラリをなんとかしたい
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/be832d9f-9aca-968b-8983-6d5bfd1c8278.png)

# 4. 対応
## 4.1. 対象のOCXを取得する
* 今回は下記サイトを参考にOCXを取得して、ローカルにコピーした
* 
https://kb.seeck.jp/archives/13682

## 4.2. OCXをライブラリとして登録する
* 参照不可のライブラリを登録する
```regsvr32 "C:¥Windows¥SysWOW64¥mscomct2.ocx"```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/ad55dcd7-06db-8371-a72b-d7827c931d50.png)

* 正常終了すると成功メッセーが表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/73d405a0-afd5-63ff-8b5a-fad4b1341279.png)

## 4.3. 動作確認
* 参照不可の状態が解消できた
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/8640e26c-935a-d60e-be47-fef66570778c.png)

# 5. 参考文献

https://itojisan.xyz/trouble/28928/

https://kb.seeck.jp/archives/13682
FPVドローン ラップ計測システム【RotorHazard】を作っちゃおう ～その7～

# 13. 実際に動かしてみよう！

### config.jsonの編集
前回の工作により、3つのRX5808ボールができましたが、こちらがちゃんと認識できているかを再度Windowsデバイスマネージャーで確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500291/88395550-e80c-37d8-6047-381eba156f0d.png)

ちゃんと **COM3、COM4、COM5** で見えています。
それでは前回も記載しましたが `RotorHazard-4.1.0-b2¥src¥server` 以下にある `config.json` にこの情報を記載して、再度RotorHazardを起動しましょう。

```RotorHazard-4.1.0-b2¥src¥server¥config.json
	"SERIAL_PORTS": ["COM3","COM4","COM5"],
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500291/04515c09-e189-1108-2ee2-a76f26f5b8d0.png)

### RotorHazardの起動
また起動をしてみて本格的な動きとセッティングをしてみましょう。
ちなみに、このポート設定がマッチングしていないとエラーが出て起動ができませんので、まずはデバイスマネージャーで最初に確認するように意識してみてください。

<img width="200" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500291/77af0e04-1196-bfbe-cee2-d5603f81cfda.png">

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500291/fa010324-82b1-5782-aad9-becd9945bf77.png)

※起動の途中でコンソール内にてCOM3、COM4、COM5ポートとの通信が確認されるログが表示されるかと思います。これがちゃんと出ていればまずは認識OKです。

また、はまりポイントとして **USBケーブル** がちゃんとしたものでなければなりません。データ通信OKなものをご用意ください。100均ケーブルではデータ通信OKと書かれていても、稀に充電しかできないというハズレなものもあったりしますのでｗ (一度引き当てたことあり)

### 周波数設定について
正しく認識すると、シミュレートモードからちゃんとした正規モードとして起動します。そうしますと **詳細設定** の **周波数設定** の項目で正しく3ノードが認識している状態になるものと思います。
また、**RSSI、ノード最高値、ノード最低値** の値も拾えるようになるはずです。
実際にVTX等が近くにあって電源投入ができるのであれば、ぜひここで電波を発射してみて動きの確認をしてみてください。正直RX5808モジュールの個体差や配線の状況によって、取得される値に差異が見られるようです。あまり神経質になる必要もないですが、まあそういうモノということは頭の片隅に入れておくのが良きっすねｗ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500291/9c396580-9705-a8ab-77a0-eece3e8ee2f9.png)

えー、この後必要となるセッティング等のTipsは…誰かに期待したいところっすｗ
ワイ、動く機体やVTXをすぐに用意できなかったり、皆さんより環境的に不利な部分も多くてー。なので是非これに続いてくれる方に期待したいであります！

一応、RotorHazard for ラズパイ3Bは、もう少しノウハウが整ったら書き起こしていきたいと思います。まずは皆さんも気軽にRotorHazardを作ってみてもらえればと思います。
先日、アキバで3,000円のSurface投げ売りとかやっていたので、絶対相性良いと思うんすよねー。ちなみに今回改めて作成したPCはヤフオクでゲットした2,500円のDELL Latitude E7270で稼働させております。ラズパイ3B+が中古でも6～7,000円もしちゃっているので悩ましい限りっす。

とりあえず、PC編に関しては一旦はここで区切りとしたいと思います。

### ご参考: How to run RotorHazard on Window 11
こちらはYouTubeでワイと同様にPCベースでRotorHazardの作り方を紹介している動画です。
内容はほぼ同一となりますが、わかりやすく説明されていますので、一緒にご確認いただければ理解は深まると思います。(Python 3.9系で紹介)

https://youtu.be/0rRgDVyoMHs?si=y1-zAwM765YJrmnx

そんでもって、新連載！ラズパイ構築編がスタートしましたー！(2024/04/14 更新)

https://qiita.com/tmac116/items/a8e9ebf8aa95154ce1f6
google colabolatoryでcircRNAを同定したい①（下準備編）

はじめまして。
バイオインフォマティクス初心者のsakiです。
しかもPCが得意でない・・・:frowning2:

そんな私ですが、最近circRNAなるものの同定(予測？)がバイオインフォマティクに行われていることを知り、「自分でもやってみたい :triumph:」と一念発起。

私のPCはスペックがイマイチなため、**Google Colabolatory**でなんとか奮闘したいと思います。
これから奮闘記を残していきたいと思っています。
素人のガバガバスキルであるため、「こうすればいい」、「ああすればより良い」、「これはまずい」などご意見あれば、ご教授ください。
# circRNAの同定に使えるツールを調べてみた
まずは下調べ。
## circularRNAって？
non-coding RNAの一種ということですが、翻訳されるものもあるよう。通常のスプライシングとは逆方向へスプライシングが起き(3'→5'へのバックスプライス)た結果、形成される環形のRNAだそうです。
## circRNAの同定に使えるツール
find_circ, CIRCexplore, CIRCexplore2, findcircRNAなどがあります。
de novo解析が可能なアルゴリズムもあるようですが、今回はreference配列を用いた同定を行っていきたいと覆います。どこかでつまづくこともあると思うので、いくつかのpipelineを使ってみたいと思います。
まずは、**circRNAFinder**を使ってみます。
.git/Tutorial.shのコードにある指示を追っていけば何とかできそうな気がします。

# 使用環境を整える
**circRNAFinder**を使ったはいいのですが、その前にちゃんと動作環境を見とくべきだったな、と反省。なぜ見なかったのか、と後々悔やまれました。
というのも、**circRNAFinderはpython2ベースのpipeline**で、google Colaboは2020年初頭にpython2のサポートを終了していたからです。
以降は、途中までcircRNAFinderを使う体で書いてます。ただ、他のツールを使うとしても同様の作業が必要となってくると思われるので、備忘録として残しています。
## google driveの容量を増やす
Tutrial.sh内で使用しているSRAデータを見ると、デフォルトの容量では足りなさそうなので、3か月間は安かったこともあり、200 GBに容量を増量することにしました。
## google colabolatoryにgoogle driveをマウント
gitをクローンして、そのフォルダをdrive内に入れたいと思ったので、まずはdriveをマウントしました。
```python:circRNA.py
from google.colab import drive
drive.mount('/content/drive')
```
## bashを使えるようにする
python以外の言語を使うことも多いので、bash-kernelを追加することにしました。
(必ずしもインストールする必要はなく、冒頭に``%%bash``を付ければbashを起動させることができます。)

こちらのサイト様を参考にしました。
[note.nkmk.me](https://note.nkmk.me/jupyter-notebook-kernels-bash/ "タイトル")

```bash:
#bashの追加
!pip install bash_kernel
!python -m bash_kernel.install
```
## biocondaをinstall
git hub以外でもbioconda経由でプログラムをインストールできたら楽だと思い、biocondaをインストールしました。ついでに、.sraや.fastaqをダウンロードしたり、pair-endのfastqをsplitするのに便利かなと思い、```sra toolkit```もインストールしました
```bash:
#minicondaのインストール
!wget https://repo.continuum.io/miniconda/Miniconda3-py38_4.8.3-Linux-x86_64.sh && bash Miniconda3-py38_4.8.3-Linux-x86_64.sh -bfp /usr/local

!conda config --add channels conda-forge
!conda config --add channels bioconda
#sra-toolsのインストール
!conda install -c bioconda sra-tools -y
```
## gitをクローンする
circRNAFinderのgitをクローンしました。
```bash:
!git clone https://github.com/bioxfu/circRNAFinder.git
```
## カレントディレクトリを変更
クローンしたgitはgoogle Drive > My drive内に移動させました。この作業の前にカレントディレクトリをMy driveに移動させていれば良かったと反省しています。
bashを使用してのカレントディレクトリの変更ができなかったため、pythonを使って変更しました。
```python:circRNA.py
os.chdir('/content/drive/MyDrive')
print(os.getcwd())
```
# とりあえず準備は終わり
ここまででとりあえず、実行環境は整えられたかなと思います。次回は材料集めをしていきます。
WindowsでのiOSアプリの作成方法

:::note alert
結局、Macが必要。
VisualStudioでMacへリモートログインしてビルドする必要あり。
https://learn.microsoft.com/ja-jp/dotnet/maui/ios/pair-to-mac?view=net-maui-8.0
:::
# 開発環境
`確認方法: 設定->システム->バージョン情報`
## デバイスの仕様
* プロセッサ	Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz   1.50 GHz
* 実装 RAM	16.0 GB (15.8 GB 使用可能)
* システムの種類	64 ビット オペレーティング システム、x64 ベース プロセッサ
## Windows の仕様
* エディション	Windows 11 Home
* バージョン	22H2
* OS ビルド	22621.3296
* エクスペリエンス	Windows Feature Experience Pack 1000.22687.1000.0

## Microsoft Visual Studio Community 2022
Version 17.9.5
VisualStudio.17.Release/17.9.5+34723.18
Microsoft .NET Framework
Version 4.8.09032

# 手順
1. Macで「システム環境設定」->「共有」->「リモートログイン」を有効にする
    1. Xcodeをインストールする
    1. 新規プロジェクト作成でiOSプロジェクトを作成し、iOS 17.2 Simulatorをインストールする
1. Visual Studio Community 2022 の操作
    1.ワークロード「.NET マルチプラットフォームアプリのUI開発」をインストール
    1. 新しいプロジェクトの作成
        1. iOSアプリケーション`C#` `iOS` `モバイル`
            1. サポートされているOSバージョンは17.2
            :::note warn
            プロジェクト作成時点の最新Version17.3だとシミュレーション時にエラーとなった。
    1. Macとペアリングする
    :::note alert
    下記のエラーが発生した。
    ワークロード 'ios' をインストールできませんでした。詳細: Unhandled exception: Microsoft.NET.Sdk.WorkloadManifestReader.WorkloadManifestCompositionException: ?????????????????? 'microsoft.net.sdk.maui' 
WindowsのC:\Program Files\dotnet\sdk-manifests\8.0.100\microsoft.net.sdk.ios\17.2.8004をMacの~\Library\Caches\Xamarin\XMA\SDKs\dotnet\sdk-manifests\8.0.100\microsoft.net.sdk.iosへ格納したら成功した。[参考元](https://github.com/dotnet/maui/issues/20686)
:::

# VisualStudioでビルド成功
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2956167/805c4ee2-1036-e39b-9974-573e13ea36aa.png)
「age?: number」と「age: number | undefined」は何が違うの？

# age?: number（オプショナルプロパティ）

これはageプロパティがあってもなくてもいい、ということを表しています。

```tsx
type Human = {
	name: string;
	age?: number;
}

const taro: Human = {
	name: "taro"
	// ageは書かなくてもOK
}

// ageにアクセスしようとしてもコンパイルエラーにはならない（値はundefined）
console.log(taro.age);
```

# age: number | undefined（ユニオン型）

これはageプロパティの値はnumber型かundefined型であることを表しています。この場合、ageプロパティの値を必ず記述しなければなりません。

```tsx
type Human = {
	name: string;
	age: number | undefined;
}

const taro: Human = {
	name: "taro",
	age: undefined, // これを書かないといけない
}

console.log(taro.age);
```

# どっちがいいの？

オプショナルプロパティを使う場合、書かないといけないコード量が少なくてすみます。undefinedを許容できるプロパティが多い型を使う場合、特に楽になります。

```tsx
type Many = {
	a: string;
	b?: number;
	c?: number;
	d?: number;
	e?: boolean;
}

const hoge: Many = {
	a: "test"
	// b〜eについては省略できる
}
```

ただ、オプショナルプロパティは意図して記述していないのか、書き忘れただけなのかがわかりません。この点、ユニオン型は全てのプロパティについて記述が必要なので、記述漏れがあった場合はコンパイルエラーで気づくことができます。

```tsx
type Many = {
	a: string;
	b: number　 | undefined;
	c: number | undefined;
	d: number | undefined;
	e: boolean | undefined;
}

const hoge: Many = {
	a: "test",
	b: undefined,
	c: undefined,
	d: undefined,
	e: undefined,
}
```

このようなメリット、デメリットを理解した上で使い分けるのが良いでしょう。
Sambaの設定は何処まで簡略化出来るか

# 始めに
「Ubuntu Samba」などで検索をかけるといくらでも参考になりそうなサイトが出てくる。
しかし、smb.confに記述する内容が記事によってまちまちなので最低限必要な項目は何か検証する。
# 環境・前提
Ubuntu Server 22.04.4 LTS
事前に、hogeユーザーにsmbpasswdでパスワードを設定しておく。
`/home/hoge/share`を共有ディレクトリとする。
`/home/hoge/share/hoge`と適当なディレクトリを作っておく。
`/home/hoge/share/hoge.txt`と適当なファイルを配置しておく。
# 実験
最低限、共有フォルダのパスのみだとどうなるか試してみる。
```terminal
[share]
path = /home/hoge/share
```
Windowsから確認した所、ファイルやディレクトリは閲覧できるが書き込みはできない。また、ユーザー名・パスワードを省略できない。

このことから、

・デフォルトで`read only`は`Yes`になっている
・デフォルトで`browsable`は`Yes`になっている
・デフォルトで`writable`は`No`になっている
・デフォルトで`guest ok`は`No`になっている

事がわかる。

つまるところ、自分が利用する環境だと`writable`を`Yes`にしてやるだけで良いことになる。すげー簡潔。
# 結論
個人利用かつNAS的な運用をする場合のSambaの使い方は以下の通り。

なお、この設定を推奨するわけではなくあくまで自分のようなズボラな使い方をする人向け。設定を詰めたい人は[こういう記事](https://qiita.com/leomaro7/items/186ed1f9495233e2c6b9)を見ながら各々詰めること。

### 1 Sambaのインストール
```terminal
$ sudo apt install samba
```
### 1.5 共有フォルダ作成・権限の編集
各自適切に。
### 1.5.5 ufwの設定
ufwを利用している場合は445番のポートを開けておく。
```terminal
$ sudo ufw allow 445 
```
### 2 smb.confの編集
```terminal
$ sudo nano /etc/samba/smb.conf
```
```
[share]
path = /home/hoge/share
writable = Yes
```
パスは好きな場所に。

### 3 smbpasswdを設定
```terminal
$ sudo smbpasswd -a hoge
    New SMB password:
    Retype new SMB password:
```
### 4 Sambaを再起動する
```terminal
$ sudo systemctl restart smbd.service
```

### 4 ホストから接続
各クライアント毎に異なるので割愛。

# 一言
わー簡潔で分かりやす。
[React18 + Laravel9]Breezeを使用して、認証機能を実装する

# 概要
React + LaravelにBreezeを導入した時に、CSRF対策関連でエラーが発生したので、備忘録として残します。

# 技術スタック
- フロント 
React18
- サーバー
Laravel 9.52.16

フロント、サーバーのリポジトリは別々に作成しています。

# BreezeをAPIモードで実装する
今回は、フロントとサーバーを別々で開発しているため、bladeを使用しませんでした。そのため、サーバー側はAPIとして開発を進めました。

公式ドキュメントを参考に実装を行いました。

https://readouble.com/laravel/9.x/ja/starter-kits.html#:~:text=install%20react%20%2D%2Dssr-,Breeze%E3%81%A8Next.js%EF%BC%8FAPI,-Laravel%20Breeze%E3%81%AF


### 1. Laravel Breezeのインストール
Composerを使用して、Laravel Breezeをインストールします。
```
composer require laravel/breeze --dev
```

### 2. BreezeをAPIモードで導入する
次に、BreezeをAPIモードでLaravelプロジェクトに導入します。その後、マイグレートをしてUserテーブルを作成します。
``` 
php artisan breeze:install api

php artisan migrate
```

### 3. インストール後、環境変数を設定する
.envファイル内に`FRONTEND_URL`が新たに追加されているので、React側のURLを設定します。
また、APP_URLにLaravel側のURLをセットします。デフォルトでは`http://localhost:8000`となっているはずです。
``` .env
APP_URL=http://localhost:8000
FRONTEND_URL=http://localhost:3000
```

### 4. CSRF対策用の環境変数を追加
この、手順が公式ドキュメントに記載されていなかったため、React側からエンドポイントを叩いた際にエラーが発生し、解消に1時間かかりました...
Breeze導入前は、問題なく使用できていたエンドポイントが419エラーを吐いてしまい、機能しなくなってしまいました。

下記の環境変数を追加することで導入前と同様にエンドポイントが機能するようになりました。
```
SANCTUM_STATEFUL_DOMAINS=localhost
```
下記、記事を参考にして解決できました

https://ytmemo.com/laravel9-sanctum-env-setting/
[golang] 構造体のスライスを重複排除（with ソート）

参考： https://future-architect.github.io/articles/20230816a/
この方法だと、重複排除するには事前にソートしないとダメらしい

https://go.dev/play/p/cATqCg40qdY

例）
SQLでいう
```SQL
select distinct * 
order by classNumber, name, age
```
をgoの構造体のスライスで、やる。

```go
package main

import (
	"cmp"
	"fmt"
	"slices"
)

type user struct {
	classNumber uint8
	name        string
	age         uint8
}

func main() {
	users := []user{
		{classNumber: 2, name: "hanako", age: 12},
		{classNumber: 3, name: "jiro", age: 32},
		{classNumber: 2, name: "hanako", age: 12},
		{classNumber: 1, name: "taro", age: 22},
		{classNumber: 2, name: "yuki", age: 13},
	}
	slices.SortFunc(users, func(a, b user) int {
		c := cmp.Compare(a.classNumber, b.classNumber)
		if c == 0 {
			c = cmp.Compare(a.name, b.name)
			if c == 0 {
				c = cmp.Compare(a.age, b.age)
			}
		}
		return c
	})
	fmt.Println(users)

	sortedUniqueUsers := slices.CompactFunc(users, func(a, b user) bool {
		return reflect.DeepEqual(a, b)
	})

	fmt.Println(sortedUniqueUsers)
}
```

# 結果出力
``` bash
[{1 taro 22} {2 hanako 12} {2 hanako 12} {2 yuki 13} {3 jiro 32}] # いったんソート
[{1 taro 22} {2 hanako 12} {2 yuki 13} {3 jiro 32}] # 重複排除

Program exited.
```
Reactにhuskyを導入してコミット時にコードを綺麗にする


毎回新規プロジェクトを作ると設定を忘れるので、記録。
huskyとそれに付随して使うものを合わせて設定する。
今回は`yarn`を使ってのインストール。

## 必要なものをインストール

### husky
```
yarn add --dev husky

```

### lint-staged 
ステージされているファイルにフォーマッタをかける
```
yarn add --dev lint-staged
```

### ESLintとPrettier
リンターとフォーマッタ
```
yarn add --dev eslint prettier eslint-config-prettier
```

## Git hooksを有効にする
```
// npm 
npx husky install 

// yarn 
yarn run husky install
```

## ESLintとPrettierの設定

```
yarn run eslint --init
```
色々聞かれるので、目的にあった選択肢を確定していく。

Prettierの設定ファイル`.prettierrc`をプロジェクトのルートに作成する。
```
{
// 1行の文字数
  "printWidth": 120,
  // シングルクォートを許容するか
  "singleQuote": true,
  // 文末のセミコロンをどうするか
  "semi": false
}
```

## hooksの作成 
作成する前に`git init`でgitを使用できる状態にすること。
```
yarn husky init
```
.husky以下に`pre-commit`ファイルができるので、編集する。
```
yarn test

npx lint-staged
```

## package.jsonに設定を追加

```
"scripts": {
  "lint-fix": "eslint --fix './src/**/*.{js,ts,tsx}' && prettier --write './src/**/*.{js,ts,tsx}'"
},

"eslintConfig": {
  "extends": [
    "react-app",
    "react-app/jest"
  ]
}

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,ts,tsx}": [
      "yarn lint-fix"
    ]
 }
```

## 補足
`.eslintrc`を編集する。
```
"extends": [  
    "eslint:recommended",  
    "plugin:@typescript-eslint/recommended",  
    // "plugin:react/recommended" ←削除 
  "prettier"  ←追加
],
```
`"plugin:react/recommended"`を削除しないと、` 'React' must be in scope when using JSX `のエラーがでる。

公式を見ると、React v17から仕様変更されているため、このエラーが出るようだ。
```
eslint-plugin-react を使用している場合、react/jsx-uses-react と react/react-in-jsx-scope のルールは不要になりますので、無効にするか削除することができます。
```


参考
https://zenn.dev/otomoti_27/articles/692e1308ce849b
【Figma】Dev Mode（開発モード）をエンジニアに使って欲しい！

## はじめに
みなさんはFigmaのDevモードを使っていますか？

FigmaのDevモードは、2023年6月21日にベータ版として公開され、一部機能をアップデートして、2024年2月1日に正式リリースされました。

正式リリースされてから、2ヶ月ほどたち、いろいろDevモードを使ってみた感想を紹介しようと思います。

## Dev Mode（開発モード）とは？
Dev Mode（開発モード）は、デザイナーとエンジニアのハンドオフを最小限に抑えるためのツールが使えるモードです。

Dev Modeでは、以下の機能を使うことができます。

+ **アノテーション**（Annotation）
+ **測定値**（Measurement）
+ **開発準備完了**（Ready for dev）
+ **変更差分**（Compare changes）

## Qiita株式会社のDev Mode（開発モード）事情
Qiitaでは、まだエンジニアにDev Mode（開発モード）権限を付与していません。
そのため、Figmaのエディタ権限のあるデザイナーで試行錯誤しています。
<font color="gray">※ Qiitaのデザイナーは、UIの作成〜フロントエンドの開発まで担当しています。</font>

特に、Dev Mode（開発モード）を使うことで、より開発しやすいデザインデータにならないかを試行錯誤しています。
現段階で、Dev Mode（開発モード）の機能をどのように使っているか紹介します。

### ⚪︎ アノテーション
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/26258de5-d4e9-d5df-7e36-0754b35f4f0b.png)

アノテーション機能は、以下のように使うのが良さそうだと思いました。

+ 仕様をまとめる
+ WAI-ARIAをまとめる
+ インタラクションをまとめる
+ マークアップをまとめる
+ スタイリングをまとめる


### ⚪︎ 測定値
社内でデザイン〜リリースまで行っている場合は使わないことが多いと思いました。
外部に開発をお願いしたりする場合には、便利だと思います。

### ⚪︎ 開発準備完了
開発準備完了は、Figmaの運用状況によると感じました。
Qiitaでは、issueごとにファイルを分けているので、thumbnailで、デザイン中・開発中・マージ待ちなどの状態を管理しているため、使うことは少なそうです。

1ファイル内で、複数の状態を管理している時は、よく使う機能になりそうです。

### ⚪︎ 変更差分 
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/8111d67d-236e-6e27-7e20-9e1fec657998.png)

変更差分機能は、デザインレビューをする時によく使っています。
特に、細かなデザインの変更する時は、どこが変わっているかパッと変わるので便利です。

変更差分機能のパネルを表示している状態でコメントが残せると、とても便利だと感じます。




## Dev Mode（開発モード）の推しポイント
Dev Mode（開発モード）の推しポイントは以下です。

+ アノテーションにmarkdownが使えるところ
    + Headings：`# hoge`・`## hoge`
    + 太字：`*hoge*`
    + 打ち消し線：`~hoge~`
    + リスト：`-　hoge`
    + オーダーリスト：`1.　hoge`
    + コードブロック： ` ```hgoe``` `
    + インラインコード：`` `hgoe` ``
+ 比べたいFrameを２つ選択すると、変更差分が見られるところ
    + デザインのBefore/Afterを残していると変更差分が見やすくなった
+ Variablesで定義した値を余白（gap, padding）に指定すると、定義した値が表示されるところ


## Dev Mode（開発モード）に感じている将来性
Dev Modeの登場により、エンジニアがFigmaを使用する機会はさらに増えていくと予想されます。
これにより、Figma内でプロダクト開発に関するコミュニケーションが徐々に完結していくことが期待されます。

またQiitaでは、デザインデータを「**プロダクト開発の地図**」として位置づけています。
しかし実際は、FigmaでUIを設計し、ドキュメントツールで仕様をまとめてから開発に移るのが一般的です。

Dev Modeの登場は、この流れを変える可能性を秘めています。
デザイナーが作成したUIを基に、プロダクトマネージャー、デザイナー、エンジニアがFigma内で議論を交わし、仕様を決定し、Figmaを参照しながら開発を進める未来が見え始めています。

最終的には、デザインデータがプロダクト開発の「地図」としての役割を果たす時代が来ると考えています。

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。

https://twitter.com/degudegu2510
FPVドローン ラップ計測システム【RotorHazard】を作っちゃおう ～その6～

# 12. RX5808受信モジュールを装着
ワイにとっては…ここが一番難易度が高いのでありますよｗ
もっとはんだ付けを練習しないといけないのですが、どうしても不器用なのか？きれいにはいかないのです。(それでも昔よりは全然上達はしましたが)
今回も直接Arduino Nano互換機にはんだ付けというのもアレなので、下記のような開発ボードも一緒に注文しました。日本でもアマゾン等でも見かけると思います。本当はRX5808受信モジュールをもドッキングできる開発ボードはあるのですが2000円ぐらいしちゃうのでコスパは良くないかな？ちなみにもっとお安いショップありますので、時間かかっても良いのであれば、そういうところからゆっくり調達してみてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500291/e8ccc31d-fef3-160a-0c16-1e71a3d780c6.png)

RX5808との接続はこちらを参照ください。上手な人はこんな感じに仕上げるぅぅ！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500291/44c0df58-3e00-654a-a11a-a7ef33c00116.png)

https://github.com/RotorHazard/RotorHazard/blob/v4.1.0-beta.2/doc/USB%20Nodes.md

でも、ワイは上手じゃないのでこんな感じぃぃ！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500291/98db75b0-fcdb-4e02-e253-f7aec2ecb5cd.png)

ちょっとでかすぎるし、どう取りまわすのよ…と思いましたが、こんな感じにしました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500291/c1ec34f2-ad01-f9e1-8eca-5b6eb8538a12.png)

ガチャガチャのカプセル(65㎜タイプ)にUSB-Cが上手に入るような穴を開けます。多分結構硬くて、きれいに穴開けするにはリューターが必要と思います。(ワイはリューターで少し小さめに貫通させ、拡張処理と仕上げはゴリゴリ棒やすり使いました)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500291/9dc042dd-15c2-15c6-8a2e-cbabe4bf707e.png)

計算通り、サイズ感はばっちり！
(これは1サイズ大きい65㎜のガチャガチャカプセルでないとダメ)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500291/5b988355-1c89-7038-d809-38922a563c04.png)

ドラゴンボール完成！ｗ

お気付きの方々や、既にRX5808もシュールをご利用の皆さまは認識されているとは思いますが、こいつ凄く熱持ちします。絶対安定して利用したいならばヒートシンク付けたりファンを当てたりする必要があると感じているかと思います。まさにその通り、長時間の利用には適しません。熱ダレ等の不具合はまったくの未知数です。でも30分程度の連続稼働をさせましたが、感覚的には60度もいってないぐらいかなと思いました。中のスポンジとか危なくない？溶けないの？というところも大丈夫っす。良い感じで固定できています。

つづきはこちら

https://qiita.com/tmac116/items/e913e03654291e1e4fb5
AWS Route53とALBを用いた開発/本番環境の切り分けのやり方をまとめてみた

# AWS Route53を用いた【開発環境/本番環境】dev.example.comの構築

本記事ではAWS Route53とALBを用いた開発/本番環境の切り分けのやり方をまとめていきます。
いきなり結論ですが最終的には以下のような画像のような状態になります。

### Route53におけるexample.comの設定
![Route53 example.comの設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3759539/1b76eaef-ce12-3704-bbf5-0142b89cdca9.png)
### Route53におけるdev.example.comの設定
![Route53 dev.example.comの設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3759539/a4fb1b91-237d-0759-5cc0-fa88cf66e7dc.png)

それでは早速具体的にどのようにやっていくか見ていきましょう！

## ベストプラクティス
ベストプラクティスとして、本番環境と開発環境では、同じ構成（VPC内にALBやRDSを配置するなど）を別物として作ることが推奨されています。また、AWSアカウントを分けて管理するのが望ましいとされています。本記事では、dev.example.comを開発環境、example.comを本番環境として扱います。

## Route53でdev.example.com用のサブドメイン設定
### サブドメイン作成

1\. Route53でホストゾーンの作成を行い、dev.example.comのホストゾーンを作成します。
 - ドメイン名: dev.example.com (サブドメイン名を入力)
 - 説明: (使用用途などを明記)
 - タイプ: パブリックホストゾーン (default)
 - タグ: (必要であれば追加)

2\. ホストゾーンを作成すると、NSレコードとSOAレコードが自動で作成されます。NSレコードを親ドメインアカウント側に追加して更新する必要があるので、NSレコードをコピーしておきます。

3\. 親ドメイン(example.com)のRoute53ホストゾーンにて、サブドメインのネームサーバーレコードを追加します。
- レコード名: dev (example.com)
- レコードタイプ: NS - ホストゾーンのネームサーバー
- 値: サブドメインのNSレコード
- TTL: 300 (default)
- ルーティングポリシー: シンプルルーティング (default)

### SSL/TLS証明書の取得
1\. ACMにてdev.example.com用の証明書の発行をリクエストします。
- 証明書タイプ: パブリック証明書をリクエスト
- ドメイン名: dev.example.com (サブドメイン名を入力)
- 検証方法: DNS検証 - 推奨 (default)
- タグ: (必要であれば追加)

2\. 証明書を作成した直後はステータスが「保留中の検証」となります。「Route 53でレコードを作成」→「レコードを作成」を実行すると、Route 53のサブドメインにCNAMEレコードが追加されます。

3\. DNS検証が完了するのを待ちます。数分経過すると、ステータスが「発行済み」になります。

### Application Load Balancerの作成
1\. Application Load Balancer (ALB) (HTTP/HTTPS) を選択します。

2\. リスナーの「ロードバランサーのプロトコル」に、"HTTPS"を追加します。

3\. セキュリティ設定で、取得したSSL証明書を登録します。
- 証明書タイプ: ACMから証明書を選択する (推奨)
- 証明書の名前: ACMで発行した証明書を選択

4\. ターゲットの登録で、使用するEC2インスタンスを登録します。
5\. 使用するEC2インスタンスのセキュリティグループに、HTTPを許可するルールを追加し、ソースには作成したALBのセキュリティグループを指定します。

### Route53とALBの紐付け
1\. サブドメインに、以下のレコードを追加します。
- レコード名: (空欄のまま)
- レコードタイプ: A - IPv4アドレスと一部のAWSリソースにトラフィックをルーティングします。
- エイリアスを「有効」にする
- トラフィックのルーティング先: 「Application Load BalancerとClassic Load Balancerへのエイリアス」→ ALBのリージョンを選択 → 作成したALBを選択

以上の手順で、本記事の冒頭に示したように開発環境としてdev.example.comのサブドメインを構築することができます。本番環境のexample.comについても同様の手順で別途構築する必要があります。

※本Qiitaは[KCompnay](https://kcompany.work/ "KCompnay")のテックブログのです。 個人的に開発に役立つ記事を執筆して公開していきます。
【合格体験記】LPICレベル１

# はじめに
LPIC101と102に合格しました。
実務経験は1年ほどです(AWS環境でLinuxサーバの構築など)


# 勉強方法
### 101
・LPICレベル1スピードマスター問題集: Version5.0対応　⇒　4週
・Ping-t　⇒　2週
・実機でコマンド実行し、確認

### 102
・LPICレベル1スピードマスター問題集: Version5.0対応　⇒　4週

# 勉強期間
### 101
3ヶ月
### 102
1ヶ月

# 結果
### 101
680
### 10２
520(ギリギリセーフ)

# まとめ
#### 実務経験がある方
LPICレベル1スピードマスター問題集をやりこむだけで十分合格は可能だと思います。
ping-tをおすすめしている方は多いですが、スピードマスターのほうが体系的に学べるので知識が定着したと感じたのと、この問題集から同じような問題がかなり出題されました。(特に101)
#### 実務未経験の方
スピードマスター問題集と合わせてあずき本といわれているものでも勉強するのがよいかとおもいます。最初から問題集にとりかかるのはハードルが高いかなと思いますので。。

# 最後に
勉強始めが一番しんどいと思います。
(ぼくも101勉強当初は、覚えるコマンドが多くて一瞬挫折しました。。)

短期集中が良いと思いますが、焦らずに頑張りましょう。
次はLPICレベル2を目指して勉強中です！
WebAssemblyのバイナリ形式(.wasm ファイル)の詳細出力


WebAssemblyのバイナリ形式(.wasm ファイル)を勉強するために作ってみました。

https://github.com/ikiuo/WebAssembly-wasmdump

[WebAssemblyのバイナリ形式(.wasmファイル)](https://webassembly.github.io/spec/core/binary/)の詳細を出力します。

[MDNにて説明されているテキスト形式の例](https://developer.mozilla.org/ja/docs/WebAssembly/Text_format_to_Wasm)から作った simple.wasm では以下のようになります。

```console:
$ python3 wasmdump.py simple.wasm
------------------------------------------------------------------------------
Path: simple.wasm
------------------------------------------------------------------------------
00: 00 61 73 6d             | magic = b'\x00asm'
04: 01 00 00 00             | version = 1
------------------------------------------------------------------------------
08: 01                      | Type Section (id=1)
09: 08                      | section size = 8
0a: 02                      | functype count = 2
                            | typeidx[0]
0b: 60                      |   functype
0c: 01                      |   param[1]
0d: 7f                      |     i32
0e: 00                      |   result[0]
                            | typeidx[1]
0f: 60                      |   functype
10: 00                      |   param[0]
11: 00                      |   result[0]
------------------------------------------------------------------------------
12: 02                      | Import Section (id=2)
13: 19                      | section size = 25
14: 01                      | import count = 1
                            | import[0]
15: 07 69 6d 70 6f 72 74 73 |   module = "imports"
1d: 0d 69 6d 70 6f 72 74 65 |   name = "imported_func"
25: 64 5f 66 75 6e 63       |
2b: 00                      |   func
2c: 00                      |     typeidx = 0
------------------------------------------------------------------------------
2d: 03                      | Function Section (id=3)
2e: 02                      | section size = 2
2f: 01                      | typeidx count = 1
30: 01                      |   typeidx[0] = 1
------------------------------------------------------------------------------
31: 07                      | Export Section (id=7)
32: 11                      | section size = 17
33: 01                      | export count = 1
                            | export[0]
34: 0d 65 78 70 6f 72 74 65 |   name = "exported_func"
3c: 64 5f 66 75 6e 63       |
42: 00                      |   func
43: 01                      |     funcidx = 1
------------------------------------------------------------------------------
44: 0a                      | Code Section (id=10)
45: 08                      | section size = 8
46: 01                      | code count = 1
                            | code[0]
47: 06                      |   code size = 6
48: 00                      |   local size = 0
49: 41                      |   i32.const
4a: 2a                      |     --> 42
4b: 10                      |   call
4c: 00                      |     --> 0
4d: 0b                      |   end
```
（ゼロ戦なみの企画）超高速データ処理ツール作成　理論構築

# 理論構築

言葉の定義を軽深（かるしん　なんちゃって圏論）的に定義しましょう。
[軽深は、アドベントカレンダーに書いてあります。](https://qiita.com/advent-calendar/2023/karushin)
基本的なテーマは、「理解が困難な想定外の状況を的確に理解し、刻々と変化する状況に即興的に、即座に対応できることは、これから、非常に重要になります。」

言葉を分節化しましょう。普段つかっているデータと言う言葉ですら、実はひどく曖昧です。
その前に、試みを軽深的に定義しましょう。

# 試み（企画）とは、目的の最高到達点にその時点の条件下で可能な限り近づけ、他の同様の企画と比較して一歩さきんじることである

- データ
- 処理
- ツール
- 作成
- 超高速

# データ
記憶媒体上に保持されたビット列
もしくは、通信媒体上に流れているビット列で、シリアルの場合もあれば、同期したパラレルの場合もある。
# 処理
入力開始から出力終了までのこと
開始する主体の存在が必要になる。
連続処理も、短い時間では、離散化できるので、処理は、開始と終了があると想定する。
入力、出力はデータに限らず物理的なこともあるが、ここでは、データに限定する
# ツール
処理を行う主体が相互作用するもの。相互作用が生じることで処理が起動もしくは、起動し続ける。データ処理では、データ処理プログラムが該当する
# 作成
処理の出力がツールになること。データ処理のデータ処理の出力のように、自己言及的に定義する

# 超高速データ処理
超高速の最高到達点は、とりあえず具体的な実体があるコンピューターで定義する。
入力終了から出力終了までが１マシンサイクルなこと
HTML: object要素で変な物を仕込む

これもまたonload属性で好き放題やりたい放題とんでもない処理を埋め込めます。
## ド定番
data属性をすり替えて再読み込みを繰り返します(dataURIにより空文字列をひたすら召喚)。見た目の変化はありませんが負荷はかかり続ける代物。
```html
<object onload="title=data,delete data,data=title" data="data:,">
```
## 変異体無限増殖
```html
<object onload="title=data,delete data,data=title,width=height=border=Math.random()*5,write(outerHTML)" data="data:,">
```
## fractal図形召喚
```html
<object onload="write('<canvas id=C>');f=R=>{R=n*3**.5/4,p=p.flatMap(([x,y])=>{t=[[x-n/4,y-R],[x+n/4,y+R],[x-n*3/4,y+R]];return~k?k?t:[t[0]]:p}),n/=2;p.map(([x,y])=>{with(C.getContext`2d`)beginPath(),moveTo(x,y),lineTo(x-n,y),closePath(lineTo(x-n/2,y+(~k?R:-R))),stroke()});k++<M&&setTimeout(f,a)};f(M=6,k=-1,p=[[C.width=C.height=a=1e3,a]],n=a*2)" data="data:,">
```
## 蛇足
[iframeで手品](https://qiita.com/mashuel/items/4f84188a2cf7a8f37271)、[imgで遊ぶ](https://qiita.com/mashuel/items/c1e09d0e704d141d8138)、といった記事と同様の事ができます。変態的発想でどんどん改造して下さい。ちなみにobject要素は閉じtag必要ですが、本記事では省略しやがっております。さすが変態。
Visual Basic (VB.NET) を基本からまとめてみた【基礎】

## Visual Basicとは？

- Microsoftによって開発されたオブジェクト指向のプログラミング言語
- C#と同じく.NETフレームワークの部品が使える

## Visual Studioをインストールする

[Visual Studio](https://visualstudio.microsoft.com/ja/free-developer-offers/)

## 新しいプロジェクトの作成

①新しいプロジェクトの作成をクリック
②空のプロジェクト(.NET Framework)を選択して『次へ』を押す
③新しいプロジェクトを構成し、『作成』を押す
④プロジェクトを選択し、右クリックして『追加』⇨ 『新しい項目』



## フォームに対してツールオブジェクトをドラッグに貼り付ける操作のプログラムを作成

① 表示タブ　→　ツールボックス

## 基本構文
(1)変数

①変数の宣言
```
Dim 変数名 As データ型
```
②定数

```
Const キーワード
※ Constキーワードを使用して定数を宣言する。定数は宣言後に変更できない。
```


## 参考サイト
[Visual Basic (VB.NET) – Full Course for Beginners]()
[プログラミング初心者のためのVB.NET入門講座](https://www.udemy.com/course/vbnet-introductory-course/learn/lecture/17442186#overview)
[Github + Visual Studio 2022: Basic Workflow For Beginners](https://www.youtube.com/watch?v=oCvb-Q5lXb8)
任意のHTML要素を使用した、React TypeScriptにおける関数コンポーネントのベストな書き方を知りたい。いや、教えてください！

# 前置き

フロントエンジニアとしてはたらくと、HTML要素を使用したReactコンポーネントをかくことが多い。
今まで試行錯誤していたが、最近ようやく関数コンポーネントの書き方が確立した。
それが適切か、批判できる点がないか、コードの特徴を洗い出して確かめる。



# コード

```tsx:Koredounan.tsx
import { type FC, type HTMLAttributes, memo } from 'react';

interface Props extends HTMLAttributes<HTML任意Element> {
    // コンポーネント仕様によって増やす
}

const Component: FC<Props> = ({ children, ...attrs }) => {
    // 実装
    return (<任意HTML要素 {...attrs} >
        {children}
    </任意HTML要素>)
};

export const Koredounan = memo(Component);
```

ここでHTML任意Elementはchildrenを受け取ることができるとする。
Propsは柔軟に要素ごとに定義するよう心がける必要があることは認識している。
任意HTML要素とHTML任意Elementは同じHTML要素である。



# コードからわかるルール

- 元要素に応じた`props`を受け取るためにPropsを定義
- コンポーネント`Component`を`React.FC<Props>`で定義
- 子要素と属性を分けるために`props`を`{ children, ...attrs }`に分割
- 元要素に`sttrs`を展開
- 子要素に`children`を展開
- ファイル名と同様のコンポーネント名を`memo`化して`export`
    - `default`にはしない



# 批判点

## `React.memo`の使用を限るべき

個人的には、パフォーマンスの最適化のために使用しているつもりだが、
一般的には、実際に問題が発生している場合にのみ使用を限るべき

https://ja.react.dev/reference/react/memo

> その他のケースでコンポーネントを memo でラップすることにメリットはありません。それを行っても重大な害はないため、個別のケースを考えずに、可能な限りすべてをメモ化するようにしているチームもあります。このアプローチのデメリットは、コードが読みにくくなることです。また、すべてのメモ化が効果的なわけではありません。例えば、毎回変化する値が 1 つ存在するだけで、コンポーネント全体のメモ化が無意味になってしまうこともあります。

---

他の批判点をください。
Svelte slotと名前付きslot

以前にも似たような記事を書いたけど、書き直してみたよ。


# Svelteの名前付き`slot`とは
公式サイトでは、実際に使われている例を提示してくれてます。
一度見てみると感覚はつかみやすいかも（Svelte公式様のこういうのわかりやすい。好き:relaxed:）

https://svelte.dev/examples/named-slots

Svelteでは、`slot`タグを使ってコンポーネントに動的なコンテンツを挿入できる。
名前付き`slot`を使うと、コンポーネント内の特定の場所に特定のコンテンツを挿入できる。

# 普通の`slot`をおさらい
ここで普通のslotの概念を簡単におさらいしておきます。
1. コンポーネント内に動的なコンテンツにしたい場所に`slot`を入れておく
1. コンポーネントを利用する際に、コンテンツを中にいれる`<コンポーネント>要素</コンポーネント>`
### 例
#### コンポーネント定義
例えば、`Card.svelte`コンポーネントがあるとして

```svelte:lib/Card.svelte
<div class="card">
    <header>
        ヘッダー
    </header>
    
    <!-- <slot>デフォルト</slot>でデフォルトの要素を指定も可能 -->
    <slot/>
    
    <footer>
        フッター
    </footer>
</div>
```


#### コンポーネントの利用
```svelte
<script>
  import Card from '$lib/Card.svelte';
</script>

<Card>
  ここに挿入されるコンテンツは、Cardコンポーネントの`slot`の部分に表示される
</Card>
```

:point_down_tone2::point_down_tone2::point_down_tone2::point_down_tone2::point_down_tone2::point_down_tone2::point_down_tone2::point_down_tone2:

実際表示されるときは、こういう順番になるよー
```svelte
<div class="card">
    <header>
        ヘッダー
    </header>
    
    ここに挿入されるコンテンツは、Cardコンポーネントの`slot`の部分に表示される
    
    <footer>
        フッター
    </footer>
</div>
```

# 本題
## 名前付き`slot`の基本
名前付き`slot`を使用するためには、
1. **コンポーネント内で`slot`に名前を付ける**
`<slot name=任意の名前>`
1. **コンポーネントを利用する際に、`slot`を指定**
要素に`<コンポーネント> <要素 slot=名前></コンポーネント>`を属性指定して配置

### 例
#### コンポーネント定義
先程のCardコンポーネントそれぞれを指定できるようにしていく。

```svelte:lib/Card.svelte
<div class="card">
  <header>
    <slot name="header">デフォルトのヘッダー</slot>
  </header>
  <div class="content">
    <slot name="content">デフォルトのコンテンツ</slot>
  </div>
  <footer>
    <slot name="footer">デフォルトのフッター</slot>
  </footer>
</div>

```
上記のコンポーネントには、
+ `header`
+ `content`
+ `footer`

の3つの名前付き`slot`が設定されている。

普通のslotと同様に、指定されなかった場合は、デフォルトが使われる


### コンポーネントの利用

この`Card`コンポーネントを利用する際に、特定の`slot`にコンテンツを挿入するには、`slot`属性を利用します。

```svelte
<script>
    import Card from '$lib/Card.svelte'
</script>

<Card>
  <div slot="header">カスタムヘッダー</div>
  <div slot="content">カスタムコンテンツ</div>
  <div slot="footer">カスタムフッター</div>
</Card>

```

こんな感じで細かい制御ができるようになります！！便利

# 参考リンク

公式ドキュメントはこちら（ドキュメントも日本語化されていて比較的わかりやすい）

https://svelte.jp/docs/special-elements#slot-slot-name-name
#10【勉強メモ】エヴァンス本からざっくり理解するDDD

## 目標
・ふわっとした理解のDDDについて[エヴァンス本](https://www.amazon.co.jp/%E3%82%A8%E3%83%AA%E3%83%83%E3%82%AF%E3%83%BB%E3%82%A8%E3%83%B4%E3%82%A1%E3%83%B3%E3%82%B9%E3%81%AE%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E9%A7%86%E5%8B%95%E8%A8%AD%E8%A8%88-Architects%E2%80%99Archive-%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E9%96%8B%E7%99%BA%E3%81%AE%E5%AE%9F%E8%B7%B5-%E3%82%A8%E3%83%AA%E3%83%83%E3%82%AF%E3%83%BB%E3%82%A8%E3%83%B4%E3%82%A1%E3%83%B3%E3%82%B9/dp/4798121967/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=17W0M5YAY0R9Z&dib=eyJ2IjoiMSJ9.qtIEGNumTF4Fq3OG4r7BcgPPpMccQaiAMFjoQiYsRfAUl2LJ3kucBAwXJG1pE1-9MMyozf_R6XnUk8kwhpkIPyRMzsu94DrC82a2cWHXn2TDjembTcFwG0z4uuYeu7EY_VF_p_KcGaJhu-sFQP2IfF8BXdAN9RWcUsZLGOA8hIhkuAKrptA3cagpPrF5ZoxXjjZ9ctVxNzHN-qanc6enklCzFiHeCY1UpXho238Cgd4eMsXlRTbQ5u_T9ZSbUOj5EOjKzf1jx0xSJbTwFJrRetDuJaorGcsbbNpAuJkvNAs.F3zE4YfUXPLj7DRzsSV4wM07EgTKoLqmpU491uMjIhw&dib_tag=se&keywords=%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E9%A7%86%E5%8B%95%E8%A8%AD%E8%A8%88&qid=1710421495&sprefix=%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E9%A7%86%E5%8B%95%E8%A8%AD%E8%A8%88%2Caps%2C279&sr=8-1)を通して体系的に学習する
・各章の要約をアウトプットすることで知識を定着させる

## 前回の記事
第9章の内容は以下でまとめています。

https://qiita.com/kotemendo2819/items/ee1d4cb6df99735927ce

## 【第10章】しなやかな設計
・しなやかな設計
過去に作成したレガシーによって押しつぶされないようにし、開発の進行に合わせて
プロジェクトを加速させ、楽しく仕事ができる変更を呼び込む設計

ソフトフェアをそのように設計する公式はないが、筆者の経験上うまく適合できるパターンをいかに示していく。

## 意図の明白なインターフェース
クラス操作には、その効果と目的を記述する名前(ユビキタス言語推奨)をつけ、実行手段には言及しない
そうすることで開発者は内部構造を理解しなくても意味を推測し使用することができる。

## 副作用のない関数
プログラムのロジックのうち、できる限り多くの部分を関数におき、非常に単純な操作にする。

・副作用
システムの状態に対するあらゆる変化のうちで将来の操作に影響するもの
例)操作が他の操作を呼び、さらに別の操作を読んでいるような深くネストして
結果が予想しにくいような複雑な処理等。

・関数
目に見える副作用なしに結果を戻す操作

## 表明
操作の事後条件と、クラス及び集約の不変条件を宣言すること。

・事後条件
操作の副作用でメソッドを呼び出すことで保証される結果を記述する。

・事前条件
事後条件が成り立つことを保証するために満たされなければならない条件。

・クラスの不変条件
操作が終わった後のオブジェクトの状態に関する表明。
集約全体に対して宣言することができ、整合性に関するルールを厳密に定義する。

## 概念の輪郭
設計要素を凝集した単位に分解する。その際、ドメインにおける重要な分割に対する自分の直感(※)を考慮する。
※ドメインの知識を優先し、技術的思考を抑える自問自答をする。

・概念の輪郭
ドメインに関する新しく理解された概念や要求にコードが適用されていくことで概念の輪郭が表される

## 独立したクラス
オブジェクト指向の基本である低結合はできる限り徹底し、オブジェクトイメージから他の概念を全て取り除く。
そうすることでモジュールを理解する際の負担を軽減させることができる。

## 閉じた操作
戻り値の型が引数と同じにできる場合、そのように定義する。

## 宣言的な設計
プログラミングの１形式で属性を厳格に記述することでソフトウェアを制御する。
別の開発者が宣言を文字通り解釈することができる。

### `ドメイン特化言語`
特定のドメインの特定のモデルに特化したプログラミング言語。(DSL:Domain Specific Language)
※javaやC#などの汎用言語とは異なる

DSLで書かれたプログラムはユビキタス言語と結びつき表現豊かな実装をすることができる。
一方、言語使用を理解しなければならず改良が難しくなるといった欠点がある。

## まとめ
本章を通してリファクタリング前提の強い設計を学ぶことができた。
p278「設計の宣言的スタイル」以降では、しなやかな設計に準拠した
宣言的スタイルのパターンについてコード例を示しながら解説している(本記事では割愛)ので
時間があればそれも記事にしていこうと思う。

次は「【第11章】アナリシスパターンを適用する」について学習する。

参考になったらいいねやコメントおまちしています！！
【DQチャンプ】Chromebook でゲームパッドをキーマップ（ワイヤレスホリパッド for mobile gaming編）

## 親記事

https://qiita.com/gaming_clomebook/items/82dabb5b61d083e640e6

## 操作したいゲームと現状
ドラゴンクエスト　チャンピオンズ（以下、DQチャンプ）
https://www.dragonquest.jp/champ/
※ゲーム単体については、インストールや動作、タッチパッドによる操作には問題がないものの、chromebookでは、ゲームパッド設定用の専用アプリ「HORI MOBILE GAMING」の設定を行っても、コントローラによるスムーズな操作がを実現出来ていない

## 現在試している方法

以下のハードとソフトを導入して、キーマッピングを可能にしようと試みている。

- 株式会社 HORI | ワイヤレス ホリパッド for Mobile Gaming
https://hori.jp/products/hmg/hmp-002
ハード（ゲームパッド）とソフト（キーマッパー）の配布で、コントローラー非対応のゲームでも操作を可能にできる、としている製品
- ワイヤレスホリパッド for Mobile Gaming専用アプリ 「HORI MOBILE GAMING」
https://play.google.com/store/apps/details?id=com.hori.mobile.game&hl=ja
上記ハード向け専用アプリ。

## 現状の整理
- デバイス（ゲームパッド）の認識（Bluetooth接続による）、 および専用アプリ「HORI MOBILE GAMING」のインストール、起動には全く問題ない
- ただし、起動後の設定画面の挙動はやや不安定で、やはりchromebookのウインドウシステムは想定していないことが予想される

### 横画面での設定

- 横画面とは、Chromebookを水平に置き、画面の回転を0度で使用した場合
- キーコンフィグを完了し、アプリを立ち上げると、実際の挙動は右に90度回転した状態でキーマッピングが反映され、正常な動作にならない

### 縦画面での設定

- 横画面とは、Chromebookを90度回転させて置き、画面の回転も90度にした場合
- 画面サイズが小さくなる問題はあるが、キーマップは意図した通りに動作する
    - 全画面ではなくウインドウモードで起動することもある（再現条件調査中）
- ただし、戦闘画面に入ると、キーマップが拡大した状態になり、意図しない動作を引き起こす
- 現状これ以上取れる対応がない

### 問題が生じている理由に対する仮説
- Chromebookのウインドウモードのことを、「HORI MOBILE GAMING」が全く想定していない
- DQチャンプが、もともとは縦画面ベースで実装され、中心部分を拡大する形で全画面化に対応する実装をしている可能性はあるかもしれない。もしそうであれば、キーマッパーが端末の向きを勘違いして、90度回転した状態で動作する現状と合致する。

### バグの疑い
- キーマップ設定後、特定の操作をするとデバイスの接続が解除される

### 解決案の検討

- メーカー公式の設定アプリがChromebookに対応することよりも、ChromebookのUIを既存のAndroid端末のように制限することの方が、総合的には対応コストが低いのかも。

#### トライ①：タブレットモード

- 「タブレットモード」に切り替えれば従来のAndroid端末のように、シングルウィンドウで動作するのではいか？（以下の記事は切り替えの解説をしている）

Chromebookタブレットをクラムシェルモードに切り替える #Chromebook - Qiita
https://qiita.com/htnk/items/1d61e77beb0667fc1af2

結果：失敗

- 単にバーチャルキーボードが表示されるようになるだけで、シェルそのものの挙動に変化があるわけではない。ただし、ゲームパッドの操作をフィールド移動のパートだけに限れば、あとはタッチだけでそこそこ普通のプレーが出来ることは確認できた。

#### トライ②：開発用仮想デバイスの活用

- Android Studioの開発用の仮想デバイスを活用することが出来るのでは？

Chromebookで仮想デバイスを使ってAndroidアプリを動かしてみる | ツインターボのブログ
https://twinturbo-power.com/2021/03/chromebook%E3%81%A7%E4%BB%AE%E6%83%B3%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6android%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E5%8B%95%E3%81%8B%E3%81%97%E3%81%A6%E3%81%BF.html

結果：検証中止

上記記事によれば「Chrome OSの場合はAndroidアプリを動かすことができるのでAndroidスマホをエミュレートする必要がなく、Chromebookにアプリとして開発中のものがインストールされる形になります」とのことなので、この方法では、現在のChromebookをAndroid端末のように動かす事にはならない
CentOSのファイアウォールでの注意書きについて

## はじめに
　この記事は、最近サーバー構築の練習をしているpizaが「例え行き詰ったとしても、来週になったら絶対忘れてそうだっぷー」と泣いていたので執筆しました。来週、自分がこの記事を書いたことを忘れていませんように、、、

## 背景
　pizaは0先生から特別に頂いた「サーバー構築・運用」の授業資料でクラウドサーバーの理解を深めようとしています。「VMware Workstation 17 Player」上に「CentOS Stream8」を入れ、ネットワークのセッティングを終えたばかりです。かなり順調に進んでいたので、ウキウキでFirewall 設定を始めたところ以下の注意書きが表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2966600/663fbb57-b848-7715-4124-9b5000b471b6.png)

## 概要
```
You're performing an operation over default zone ('public'),
but your connections/interfaces are in zone 'external' (see --get-active-zones)
You most likely need to use --zone=external option.
```
意訳すると、
「君はデフォルトゾーン("public")の操作してるけど、いまいるの"external"ゾーンだよ？場所間違ってない？もし、"external"ゾーンの操作をしたいのなら、「--zone=external」オプションを使う必要があるぞ。」
となりそう。操作対象のゾーンと現在いるゾーン(アクティブゾーン)が違うと表示されるみたい。隣の部屋からインテリアを変えているようなものなのだろうか。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2966600/2fb92ef7-ffa8-523d-1319-a00d194c0486.png)

## 解決
操作対象のゾーンとアクティブゾーンが一緒じゃないから心配のメッセージが届いたみたいなので、以下のコマンドで解決。
```
firewall-cmd --change-interface=public
```

## 感想
　ふんわりとした記事ですが、メモ書きと思えば悪くなさそうです。
 
## 参考
https://qiita.com/hasegit/items/bd5dea283dd77715f441

https://tekneed.com/configure-and-manage-firewall-in-linux/

https://qiita.com/kenjjiijjii/items/1057af2dddc34022b09e
ETEC クラス1の受験メモ

## はじめに
こんにちは。
今回は先日、受験してきたETEC（組込み技術者試験制度）クラス1について感想を備忘録として残したいと思います。

## 学習方法
ETECのサイトの参考図書になっている以下の書籍を参考にしました。
- [組込みシステム開発入門](https://gihyo.jp/book/2021/978-4-297-11966-9)
- [組込み系技術者のための安全設計入門](https://www.dempa.co.jp/dempabooks_05.php)
これらの書籍を何度か繰り返し読んで内容を頭にたたきこみました。

## 受験結果
グレードBのChief Expertでした。
※クラス1試験はクラス2で500点以上のスコアを取得しないと受験できません。

## 感想
最初の30問が具体的な例題から要件などを洗い出して問題を解く必要があり、仕様などを読み解くのにかなり時間がかかる印象です（僕もかなりここで時間を取られました）。
また、後半の60問は知識問題ですが、範囲内から幅広く出題されます。業務などでまったくかかわったことのない分野の用語などは事前に参考書などで勉強していないとまったく歯が立ちません（多肢選択問題なので、わからなくてもどれかは選択できますが。。）。
AWS ソリューションアーキテクト - アソシエイト（SAA-C03）の受験メモ

## はじめに
こんにちは。初めてQiitaに投稿するcnysntryと申します。
今回は初投稿ということで、先日、受験してきたAWSソリューションアーキテクト - アソシエイト（SAA-C03）について感想を備忘録として残したいと思います。

## 学習方法
以下のような学習方法を約3ヵ月ぐらい続けました。
- 市販の『AWS認定ソリューションアーキテクト-アソシエイト』の参考書を3週ぐらい読み直して、頭にたたきこむ。
- その後、Udemyの以下の問題集を解いて本試験の傾向をつかむ。

【SAA-C03版】AWS 認定ソリューションアーキテクト アソシエイト模擬試験問題集（6回分390問）

個人的にはこの問題集はとても役に立ちました。

## 受験結果
760点ということでギリギリの合格でしたが、AWSの基礎知識は身についたかなと実感しています。

## 感想
実際にAWSを使ってみて挙動などを確認するほうがベストだと思いますが、実際にSAA-C03に合格するだけであれば、AWSにまったく触らなくても問題なさそうな感触です。
本番の試験時間は130分と十分に時間があるので、落ち着いて最低2週ほど全問見直すことのがベストだと思います。僕は問題に時間をかけすぎたため、半分ほどの問題しか見直すことができませんでした。
Python と OpenAI API を使う開発の前準備

Python のインストールと、LangChain まわりのモジュールのインストールの手順です。2024/03 現在の情報です。

# 手順

- Git のインストール
- Anaconda のインストール
- Pytorch のインストール
- API Key の取得
- 環境変数の設定

# Git のインストール

すでにインストールされている場合はスキップします。

## Windows の場合

下記からダウンロードしてインストールします。選択できるオプションはすべて default で問題ありません。

- [Git For Windows](https://gitforwindows.org/)

インストールされると「すべてのアプリ」の一覧に Git という項目が追加されます。 

Windows ターミナルにプロファイルを追加することで、ターミナルでも Git Bash を使えるようになります。 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/0f6e9dff-5df5-db31-1dde-b7da45fcc411.png)


## Mac の場合

コマンドラインで下記を実行します。

```bash
$ brew install git 
```

Homebrew がインストールされていない場合は、下記のページを見てインストールします。

- [Homebrew](https://brew.sh/ja/)

# Anaconda のインストール

すでにインストールされている場合はスキップします。

下記からダウンロードしてインストールします。

- [Anaconda Download](https://www.anaconda.com/download)

## Windows の場合

デフォルトのインストール状態では、Git Bash から Anaconda の仮想環境が使えません。Git Bash で下記のコマンドを実行して、Git Bash の起動時に conda コマンドを使えるようにします。

```bash
$ echo '. /c/users/kani/anaconda3/etc/profile.d/conda.sh' >> ~/.bashrc
$ echo 'conda activate base' >> ~/.bashrc
```

## Mac の場合

Mac は Anaconda をインストールすると `~/.bash_profile` に自動的に conda コマンドの初期化処理が追加されます。ターミナルを新たに開くと conda コマンドが使えるようになります。

# python + pytorch のインストール

下記のページでハードウェアやOSなどの組み合わせを選ぶと、インストールのためのコマンドが表示されるので、そのコマンドを実行します。

- [PyTOrch Install](https://pytorch.org/)

よくわからない場合は、下記を見てください。

## Windows (NVIDIA GPUあり) の場合

ターミナルを開いて、下記のコマンドを打ちます。

```bash
$ conda install pytorch torchvision torchaudio pytorch-cuda=12.1 -c pytorch -c nvidia
```

## Windows (NVIDA GPUなし) の場合

ターミナルを開いて、下記のコマンドを打ちます。

```bash
$ conda install pytorch torchvision torchaudio cpuonly -c pytorch
```

## MacOS の場合

ターミナルを開いて、下記のコマンドを打ちます。

```bash
$ conda install pytorch::pytorch torchvision torchaudio -c pytorch
```

## 動作テスト

```bash
$ conda activate pytorch
＄python
>>> import torch
>>> print( torch.__version__)
1.13.0
```

pytorch のバージョンが表示されたらOKです。

# APIKEY などの取得

## OpenAI KEY の取得

OpenAI の API KEY を取得するには、OpenAI のアカウントの作成と、クレジットカードの登録が必要です。

- [OpenAI APIの使い方講座【公式Quickstart】](https://qiita.com/Isaka-code/items/b50983796636503b44c5)

取得したキーを `~/.env` などに保存します。

```.env
export OPENAI_API_KEY='xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
```

## Google API Key の取得

下記のページに取得方法が書かれています。

- [Custom Search APIを使ったGoogle検索結果の自動収集](https://www.system-exe.co.jp/kotohajime15/)

```.env
export GOOGLE_CSE_ID="xxxxxxxxxxxxxxxxxxxxxxx"
export GOOGLE_API_KEY="xxxxxxxxxxxxxxxxxxxxxxxx"
```

## 環境変数を使用する

下記のコマンドを実行してから、KEYを使用するプログラムを実行します。下記コマンドは、ターミナルを開いた後に一度だけ実行すればOKです。

```bash
$ source ~/.env
```
RSpecで学ぶbuildとcreateの違い

# 初めに

「書いて、慣れろ！」をしてると、前提知識の理解が浅いことで苦しみます。
焦らずに、知識を定着させましょう。ということで、FactoryBotのbuildとcreateについて理解できたので書きました。

# 問題

メールアドレスのバリデーション
```ruby
validates :email, uniqueness: { case_sensitive: false }
```

FactoryBotでテストデータを生成
```ruby
email { "info@example.com" }
```

テストデータで生成した小文字のメールアドレスと大文字のメールアドレス ```{ build(:admin_user, email: 'INFO@example.com') }``` が重複するケースを作る
```ruby
RSpec.describe AdminUser, type: :model do
  let(:admin_user) {build(:admin_user)}
  
	describe "バリデーションの検証" do
        context "メールアドレスが大文字と小文字に関わらず、重複した場合" do
	      let(:admin_user) { build(:admin_user, email: 'INFO@example.com') }
	
    	    it "大文字のメールアドレスで登録すると、無効であること" do
                admin_user_with_uppercase_email = build(:admin_user, email:'INFO@EXAMPLE.COM') 
                expect(admin_user_with_uppercase_email).to_not be_valid 
            end
    
        end
    end
end
```

Dockerコンテナで以下コマンドを実行
```docker
rspec spec/models/admin_user_spec.rb
```

バリデーションテストが失敗
```
Failure/Error: expect(admin_user).to_not be_valid
expected #<AdminUser id: nil, name: "AdminUser", email: "info@example.com", created_at: nil, updated_at: nil> not to be valid
```

# 解決方法

createメソッドでテスト実行前に ```info@example.com``` をデータベースに保存する
```ruby
context "メールアドレスが大文字と小文字に関わらず、重複した場合" do
	before do
		create(:admin_user, email: 'info@example.com')
	end
	
	it "大文字のメールアドレスで登録すると、無効であること" do
        admin_user_with_uppercase_email = build(:admin_user, email: 'INFO@EXAMPLE.COM') 
        expect(admin_user_with_uppercase_email).to_not be_valid 
    end
end
```
# 原因

### バリデーションルールの正確な理解

一意性の検証において、データを事前にデータベースに保存する必要性の認識が不足していました。小文字メールアドレスをFactoryBotで生成するだけで十分だと考えていました。

### buildメソッドの挙動

>オブジェクトをメモリ上にだけ生成し、データベースには保存しません。バリデーションのテストやアソシエーションの設定確認など、データベースに保存する必要がない場合に便利です。


# 終わりに

バリデーションルールの理解から順を追ってテストを実施することを学べました。
【ChatGPT＋DALL-E3】で人のPromptをアレンジします。


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

　今回は、人のPromptをアレンジして、画像生成をしていきます。

:::note info
本記事は、ChatGPT（有料版）
＋DALL-E3で行なっております。
画像はあります。　あしからず。
:::
　今日の東京は、いい天気。

　そして、
　　花粉まつりに、黄砂。

　桜も開花したそうなので、
　　見に行きたいですが、
　　　外出はしません😅

　アップするのも
　　忘れて、寝てました(汗)
***
　さて、
　　本題です。

　今回は、
　　人のPromptShareを
　　　ベースに
　　　　アレンジしていきます。

　X-Twitterで、
　　PromptShareを
　　　よく出してくださる
　　　　Umeshさんという方が
　　　　　おいでです。

　今回、彼は
　　対象物を固定した
　　　Promptを出してきました。
　　　　珍しいことです。

　こちらが
　　そのポストです。
[Umeshさんの作品](https://twitter.com/umesh_ai/status/1773787121968369944?t=p4D5cOOIwk2Ek2bAY7XRRg&s=19)

　ひとりの人物を
　　大理石の像にして
　　　それを同じ人物に観賞させる、
　　　　というもの。

　四枚ともに
　　Promptがあり、
　　　それをShareしてくれています。
***
　とにかく、
　　この四つのPromptを
　　　ChatGPTに与えて、
　　　　統合したPromptの作成を
　　　　　依頼しました。
***
***user***
下記の四つのプロンプトを統合して、対象物を指定できるようにしてください

（四つのPrompt）

***ChatGPT***
（英文Prompt）

***user***
対象物は[]でくくってください

***ChatGPT***
（長いので、割愛）

***user***
対象物の要素を[]付きで抜き出してください。対象物は英語で、説明は日本語で

***ChatGPT***
- [professionally dressed man]：テーラードスーツ、ネクタイ、磨かれた靴を着用した専門的に着飾った男性
- [shining white creamy marble]：輝く白くクリーミーな大理石
- [ballet dancer]：バレエダンサー
- [marble sculpture counterpart]：大理石の彫刻の対
- [marble likenesses]：大理石の肖像
***
　あれ？

　おかしいですねぇ。

　男性とバレーダンサーは
　　別々のものなのですが……。

　Promptを出させたところ、
　　ごっちゃになっていました。
***
　本当は、
　　四つのPromptから
　　　ひとつのPromptを作成して、
　　　　対象物を指定するだけで
　　　　　描けるようにしたかった
　　　　　　なのですが……。

　方針を転換します。

　男性鑑賞者と
　　バレーダンサーの像、
　　　という構図にします。

　出されたPromptから
　　手作業で必要な部分を
　　　取り出して編集。

　何度か
　　リトライして
　　　出来上がったのが、こちら。
![1711778396027.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457238/2fa7cda0-5db1-bb82-f85c-bb5f5780f454.jpeg)

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

　本日は、ここまで。
【DQチャンプ】Chromebook でゲームパッド非対応のアプリを操作できるようになるまでの記録

　Qiitaに書くようなことか？とは思いつつも、たまたま手に入ったChromebook Plus で、ゲームパッド非対応のゲームを、ゲームパッドで操作出来るようにするには予想外の困難があり、せっかくなので公開しながらトライアンドエラーしていければと思います。無事に設定できればこの投稿の目的は達成されるので、コメントやアドバイスは大歓迎です。

## 解決したい課題
- Chromebook Plusでゲームパッド非対応のゲームを動作させようとする場合、既存のAndroid端末と異なる構成であることが障害になり、提供されているソリューションが機能しない状況に直面している。
- 現在試している方法では、十分に問題ないレベルの操作や、ある程度納得の行くソフトウェアの設定の完了に至っていないので、これを解決したい。

## 想定している問題発生の理由
- Android向けに提供されているソフト類が機能しない理由としては、Chromebookの特徴であるマルチウインドウや解像度設定の変更が可能であることが一因と考えられるが、そもそもChromebookを前提として開発されたアプリケーションが少ないことや、Chromebookに関する情報が少ないことも、副次的な要因としてはあり得えそうだと考えている。

## 操作したいゲーム
ドラゴンクエスト　チャンピオンズ（以下、DQチャンプ）
https://www.dragonquest.jp/champ/
※インストールや動作、タッチパッドによる操作には問題がないものの、ゲームパッドによるスムーズな操作がを実現出来ていない
※ゲーム自体はスマートフォン実機を前提して、タッチパネルで操作する前提の実装

## 現在試している方法

1. <a href="https://qiita.com/gaming_clomebook/items/9da643eb2d5b0e29a83f">ワイヤレス ホリパッド for Mobile Gaming でキーマップ</a>
2. <a href="https://qiita.com/gaming_clomebook/items/9598c812a27e0dd37708">Panda Gamepad Pro</a>
3. GamepadPro

## 実行方法を模索中

1. Chromebook を Android端末化する（再インストール？）

## 利用を断念したサードパーティアプリ
- Octopus-ゲームパッド、キーマッパー - Google Play のアプリ
https://play.google.com/store/apps/details?id=com.chaozhuo.gameassistant&hl=ja&gl=US

## Chromebook向けにはストアから配布されていないサードパーティアプリ
- Mantis Gamepad Pro 
https://play.google.com/store/apps/details?id=app.mantispro.gamepad&hl=ja&gl=US

## 参考にしているページや記事（未整理）

- 株式会社 HORI | ワイヤレス ホリパッド for Mobile Gaming
https://hori.jp/products/hmg/hmp-002

- Android版「原神」でコントローラーを使う方法 | ねやてつ
https://neyatetsu.com/archives/770

- ChromebookでAndroidアプリをデバッグする方 #Android - Qiita
https://qiita.com/kurun_pan/items/252487246bc45d986b97

- Androidアプリ64bit化必須に向けて検証デバイスのABIを調べる方法 #Android - Qiita
https://qiita.com/p_on_ro/items/5a2f63d6179c994e7acd

- 【RPA】【MacroDroid】Android11以降限定ですが、端末のみでLADBを用いてADBハックし、MacroDroidをより便利に使う方法。
https://blog.goo.ne.jp/oprsfr3saku/e/3dd820af9cb124a836228fb884e54c79

- Chromebookで画面分割する3つの方法 | ライフハッカー・ジャパン
https://www.lifehacker.jp/article/242518how-to-do-split-screen-chromebook/

- WindowsでAndroidStudioにスマートフォンが認識されない時
https://zenn.dev/ballistyx/articles/440293d0508fab

- 小ネタ：adb start-serverできないときの対処: der Raum Sieben
https://formula97.cocolog-nifty.com/der_raum_sieben/2021/08/post-f2fd9b.html

- Panda Gamepad/Mouse Pro | Nes Emulator | Panda Gaming Studio
https://pandagame.app/a

- Operation/Chromebookのディスプレイを実解像度にする手順 - Chrome OSで十分！
https://chrome-os.just4fun.biz/?Operation/Chromebook%E3%81%AE%E3%83%87%E3%82%A3%E3%82%B9%E3%83%97%E3%83%AC%E3%82%A4%E3%82%92%E5%AE%9F%E8%A7%A3%E5%83%8F%E5%BA%A6%E3%81%AB%E3%81%99%E3%82%8B%E6%89%8B%E9%A0%86

### Chromebook 向け game controls feature

- <a href="https://getnavi.jp/digital/783612/">ChromeOS、Androidゲームをキーボード／マウスでプレイできます | GetNavi web ゲットナビ</a>

- <a href="https://helentech.jp/news-28524/">ChromebookでAndroidのゲームをキーボード操作できる機能が全てのゲームで表示されるように(Canary) | HelenTech</a>

- <a href="https://support.google.com/googleplay/answer/7021273?hl=ja#zippy=%2C%E3%82%AD%E3%83%BC%E3%83%9C%E3%83%BC%E3%83%89%E3%81%A8%E3%83%9E%E3%82%A6%E3%82%B9%E3%81%A7%E3%82%B2%E3%83%BC%E3%83%A0%E3%82%92%E3%83%97%E3%83%AC%E3%82%A4%E3%81%99%E3%82%8B">Chromebook に Android アプリをインストールして使用するj - Google Play ヘルプ</a>