OmniAICreator/Qiita-1.07M huggingface dataset:
[Java] length, length(), size()の違い



## 要約
|    | 種類 | 対象 | 対象の例 |
|----------|---|---|---|
| [length](#length)   | フィールド | 配列 |int[], double[], String[]|
| [length()](#length) |  メソッド | 文字列 | String, StringBuilder|
| [size()](#size)   |  メソッド | コレクション |List, ArrayList, Set|


[フィールドvsメソッド](#フィールドvsメソッド)


## length
`.length`は配列のフィールド(情報)に直接アクセスします
```java
//配列の長さ
int[] nums = {4, 10, 7};
nums.length;    // 3
```



## length() 
`.length()`はメソッドを呼び出すことで、文字列オブジェクトのフィールドメンバーにアクセスします
```java
//文字列の長さ
String str = "abcde"
str.length();
```


## size()
`.size()`はCollectionクラスで定義されているメソッドを呼び出し、要素数をカウントします

```java
// リストを作成 
List<String> l = new ArrayList<String>();
       
// リストに要素を追加 
l.add("abcde"); 

// リストの要素数
l.size(); //5

```


:::note warn
listが**空**の時は0が、listが**null**の時は`NullPointerException`が出力されます。
:::


## フィールドvsメソッド

一言で言えば、**フィールド=情報**、**メソッド=処理**のイメージです。 

- **フィールド**: フィールドはクラスの中でデータの値を保管するために使用する
- **メソッド**: クラスの中で特定の処理を行うために必要なプログラムをまとめたもの

詳しくは[こちらの記事](https://eng-entrance.com/java-basic-method-field#:~:text=%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E3%81%A8%E3%81%AF%E3%82%AF%E3%83%A9%E3%82%B9%E3%81%8C,%E3%81%8C%E6%9B%B8%E3%81%8B%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%E3%80%82)などを参考にしてください。

---

### 参考
* [【Java】lengthとlength()とsize()の違い](https://qiita.com/keketon/items/f03ba40317b02a014f64)
* [【初心者向け】Javaのメソッドとフィールドの基本まとめ](https://eng-entrance.com/java-basic-method-field#:~:text=%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E3%81%A8%E3%81%AF%E3%82%AF%E3%83%A9%E3%82%B9%E3%81%8C,%E3%81%8C%E6%9B%B8%E3%81%8B%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%E3%80%82)
* [ GeekforGeeks | length vs length() in Java](https://www.geeksforgeeks.org/length-vs-length-java/)
* [ GeekforGeeks | List size() method in Java with Examples](https://www.geeksforgeeks.org/list-size-method-in-java-with-examples/)
【Vim】vim-trailing-whitespaceの導入方法

# はじめに
スマホ（Android）で開発するのでVimの環境構築は必須です。

# 動作環境
* Sony Xperia 10 IV
* Android OS 12
* UserLAnd 3.1.4
* Ubuntu 20.04.5 LTS
* Git 2.39.0
* Vim 8.1.3741
* Yarn 1.22.19

# 設定ファイルを編集
以下のように編集して、Vimを再起動します。
* 編集前
```~/.vimrc
call plug#begin()
call plug#end()
```
* 編集後
```~/.vimrc
call plug#begin()
Plug 'bronson/vim-trailing-whitespace'
call plug#end()
```

# vim-trailing-whitespaceをインストール
:PlugInstallでvim-trailing-whitespaceをインストールします。
```vim
:PlugInstall
```
以下のように表示されたらインストール完了です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3118198/7a4daa33-0204-4313-4618-779c2336309e.png" width=50%>

# スクリーンショット
不要な空白が赤色で表示されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3118198/73a8afdd-6739-8669-02a1-ae6afc874f03.png" width=50%>
新規PR作成時のGitHubとの連携初回手順　自分用　＃駆け出しエンジニア

プログラミングを学び始めて・・・78日目　初投稿
※自分用に記録しています間違えている可能性があります

1. GitHubでリモートリポジトリを作成
2. VScodeを開く
3. Clone Git RepositoryでGItHubに繋いで直接リポジトリに接続
4. ローカルリポジトリ保存場所を聞かれるので好みの場所に保存
5. 新規ファイル（index.htmlなど）を作成し<!DOCTYPE html>などで簡易入力
6. git branch /*ブランチの位置確認
7. git checkout -b ブランチ名　/*プルリクエスト用ブランチ作成
8. git branch /*ブランチの位置確認
9. git add .　/*変更をインデックスに登録
10. git commit -m "コメント"　/*変更をプルリクエスト用ブランチにコミット
11. git push --set-upstream origin プルリクエスト用ブランチ名）　
    /*プルリクエスト用ブランチをリモートリポジトリにpush
12. ターミナルの左端に黄色のお知らせマークが出るのでクリック
13. GitHubのPull request画面に遷移するのでPullrequestする
14. 自分1人ならMarge pull request して完了

いろんな方法があると思うけど、わたし的な方法はこれかな
次回からも上手くできるといいな
また問題が起きたら改善しよう！
python-VLCを使用したミュージックプレイヤー

## music-player-using-python-VLC 

https://github.com/reiji990/music-player-using-python-VLC

Python-VLCを使った.flacファイル用のミュージックプレイヤーです。  
GUI部分もPythonで書いており、Tkinterを使用しています。  
MacOS用に作成したものですが、Windowsでも動作します。
始めにアーティスト名、アルバム名を入力すると、Musicフォルダ内でワードが部分一致したアルバム内の.flacファイルを再生します。  

![画面収録 2023-03-18 21 27 23](https://user-images.githubusercontent.com/101491438/226106478-b50e9510-fbc7-43fe-a426-54de8e486a00.gif)

## 事前準備

- Python実行環境
- VLCのインストール
- python-VLCの導入
- Musicフォルダの準備  
  Musicフォルダは、CDリッピング等で作成される下記構成の物をご準備ください。  
  Music/アーティスト名/アルバム名/.flacファイル  

## インストール後の作業

musicfolderpath.txtに再生するMusicフォルダのpathを入力してください。  
例:/Users/ユーザー名/Music  

## 操作

一般的なミュージックプレイヤーと異なる挙動の説明です。

- music player.pyを実行し、アーティスト名、アルバム名を入力すると、Musicフォルダ内でワードが部分一致したアルバム内の.flacファイルを再生します。  
- 「Album」「Playlist」ボタン押下で再生中のアルバムリスト、プレイリストが表示されます。他のボタン操作で表示が消えます。
- トラック移動は「<<」「>>」ボタンの他、テキストボックスに数字を入力して「Select」ボタン押下で指定のトラックに移動できます。
- 「Return」ボタン押下で入力フレームに戻ります。
- シークバーは飾りです。ここから操作はできません。。
TypeScriptのinterfaceについて

TypeScriptのインターフェイスは、オブジェクトの型を定義するためのものです。
インターフェイスは、プロパティ、メソッド、およびイベントのシグネチャーを定義します。
実装者はこのシグネチャーに従って、オブジェクトを作成することが求められます。

例:

```typescript
interface MyInterface {
  value: string;
  printValue(): void;
}

class MyClass implements MyInterface {
  constructor(public value: string) {}

  printValue() {
    console.log(this.value);
  }
}

const instance = new MyClass("Hello, TypeScript!");
instance.printValue(); // "Hello, TypeScript!"
```
このように、インターフェイスは、オブジェクトが持つべきプロパティやメソッドなどのシグネチャーを定義することで、コードの互換性を保証します。
【Vim】nord-vimの導入方法

# はじめに
スマホ（Android）で開発するのでVimの環境構築は必須です。

# 動作環境
* Sony Xperia 10 IV
* Android OS 12
* UserLAnd 3.1.4
* Ubuntu 20.04.5 LTS
* Git 2.39.0
* Vim 8.1.3741
* Yarn 1.22.19

# 設定ファイルを編集
以下のように編集して、Vimを再起動します。
* 編集前
```~/.vimrc
call plug#begin()
call plug#end()
```
* 編集後
```~/.vimrc
call plug#begin()
Plug 'arcticicestudio/nord-vim'
call plug#end()
```

# nord-vimをインストール
:PlugInstallでnord-vimをインストールします。
```vim
:PlugInstall
```
以下のように表示されたらインストール完了です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3118198/e031a4e4-ddca-4ebe-8a62-3978b8e13cbb.png" width=50%>

# カラースキームを適用
以下のように編集して、Vimを再起動します。
* 編集前
```~/.vimrc
call plug#begin()
Plug 'arcticicestudio/nord-vim'
call plug#end()
```
* 編集後
```~/.vimrc
call plug#begin()
Plug 'arcticicestudio/nord-vim'
call plug#end()

colorscheme nord
```

# スクリーンショット
* 適用前
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3118198/0c49a149-8adb-1d95-4604-f06d3bb62a11.png" width=50%>

* 適用後
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3118198/7298827a-6f84-62f3-91dd-f717b47dc5e2.png" width=50%>
git, githubのメモ


## 前提
- commit add push はしたことある
- それ以外は分からん奴のメモ


## ゴール
- プルリクエストとか
- イシューとか
- ブランチとかわかる


## サイトで遊んでみた

http://k.swd.cc/learnGitBranching-ja/


## 動画のメモ

https://youtu.be/WHwuNP4kalU


### ローカル
- gitはmasterブランチ
- githubはmainブランチ


ブランチの作成
`git branch ○○(ブランチ名)`

ブランチの一覧表示
`git branch -a`

HEAD:自分が今いるブランチを指すポインター

ブランチの切り替え
`git switch ○○(ブランチ名)`

ブランチを新規作成して、そちらに切り替え
`git switch -c ○○(ブランチ名)`


ブランチのマージ
`git merge ○○(ブランチ名)`

github上にあるブランチをローカルでマージ
`git merge △△(リモート名)/○○(ブランチ名)`


コンフリクトの解消方法:生成されたファイルを再度手動で書き換える

### git,githubとやり取り

初期設定

`git config -global user.name "kajiyai"`

`git config -global user.email "kajiyai@example.com"`


リモートリポジトリをローカルに追加

`git remote add origin(リモート名) URL(リモートURL)`

リモートリポジトリにプッシュ

`git push origin(リモート名) main(ブランチ名)`

＝＝＝＝ここから初見だった＝＝＝＝＝

リモートリポジトリから情報取得(49:00~~)

`git pull origin(リモート名) main(ブランチ名)`
`git fetch origin(リモート名)`

pull = fetch + merge

コンフリクトが起きそう→fetch,merge
コンフリクトが起きなそう(ex. 修正完了してて最新verにしたい)→pull



### プルリクエスト

#### プルリクエストとは

自分が修正した内容をプッシュ→その内容で問題なければ皆、プルしてね(要請)=プルをリクエスト


存在意義
- コードの高品質化

### 手順
1. mainを最新に更新
1. ブランチを作成
1. ファイル修正・コミット
1. プッシュ
1. プルリクエスト
1. コードレビュー
1. マージ



なぜか山浦氏のUdemyのコース買ってあった...困ったら見る



## GitHub Actions

### GitHub Actiontsとは

CI/CDツール。
github上の様々なイベントをトリガーにできて、自動処理してれるツール？
例)マージ→コンフリクトしないか検証したり(?)


> GitHub Actionsを一言で説明するならば「GitHub上で動作するサーバレス実行環境」です。上記のブログ> 記事の英語版では "built by you, run by us" と謳っていますが、実はGitHubが自分たちのインフラ上> でユーザの代わりにコマンドやコードを実行するのは本機能が初めてのことです。

https://codezine.jp/article/detail/11450


https://github.co.jp/features/actions



リモートブランチでプルリクエスト出来なかった時

要約：ローカルとリモートで履歴が異なるとエラーが起きる

fetchとかmergeとかpullとかしよう。

https://note.com/for_research/n/n0d60602650d1#PiTRr


https://qiita.com/mikumikumikumiku/items/3353018c72a1bf306f21
[Python]Dataframeで簡単に行の変化率を計算する

## はじめに
広告のクリック回数の週ごとの変化率を見るとします。

```python
import pandas as pd

import pandas as pd

data = {'date': ['2022-12-01', '2022-12-08', '2022-12-15', '2022-12-22', '2022-12-29'],
        'ad_clicks': [10000, 15000, 20000, 17000, 18000]}
df = pd.DataFrame(data)
df['date'] = pd.to_datetime(df['date'])
```

|  |date | ad_clicks |
|:-----------|------------:|:------------:|
| 0       | 2022-12-01        | 10000         |
| 1     | 2022-12-08      | 15000       |
| 2       |2022-12-15        | 20000         |
| 3         | 2022-12-22         | 17000           |
| 4       | 2022-12-29       | 18000       |

## 一週間前のデータ列を作る
ここでdfのshiftメソッドを使います！

```python
df['ad_clicks_prev_week'] = df['ad_clicks'].shift()
```

|  |date | ad_clicks |ad_clicks_prev_week|
|:-----------|------------:|:------------:|:------------:|
| 0       | 2022-12-01        | 10000         |NaN|
| 1     | 2022-12-08      | 15000       |10000.0|
| 2       |2022-12-15        | 20000         |15000.0|
| 3         | 2022-12-22         | 17000           |20000.0|
| 4       | 2022-12-29       | 18000       |17000.0|

実行するとad_clicksのずらした結果をclicks_prev_weekに格納できました。

※もし二週間ごと計算したい場合は、shift(2)でできます。

## 変化率を計算する
```python
df['ad_click_rate'] = ((df['ad_clicks'] - df['ad_clicks_prev_week']) / df['ad_clicks_prev_week'])
```

|  |date | ad_clicks |ad_clicks_prev_week|ad_click_rate|
|:-----------|------------:|:------------:|:------------:|:------------:|
| 0       | 2022-12-01        | 10000         |NaN|NaN|
| 1     | 2022-12-08      | 15000       |10000.0|0.500000|
| 2       |2022-12-15        | 20000         |15000.0|0.333333|
| 3         | 2022-12-22         | 17000           |20000.0|-0.150000|
| 4       | 2022-12-29       | 18000       |17000.0|0.058824|

## 変化率をパーセント(%)で表示する
```python
df['ad_click_rate'] = df['ad_click_rate'].apply(lambda x: '{:.2%}'.format(x))
```

|  |date | ad_clicks |ad_clicks_prev_week|ad_click_rate|
|:-----------|------------:|:------------:|:------------:|:------------:|
| 0       | 2022-12-01        | 10000         |NaN|NaN|
| 1     | 2022-12-08      | 15000       |10000.0|50.00%|
| 2       |2022-12-15        | 20000         |15000.0|33.33%|
| 3         | 2022-12-22         | 17000           |20000.0|-15.00%|
| 4       | 2022-12-29       | 18000       |17000.0|5.88%|

これで簡単に行ごとの変化率が計算できます！
ぜひ試してみてください〜
Next.jsでのLinkコンポーネントの記述の仕方で変更点をおさえる！！

先日Next.jsのバージョンは13.0にアップデートされました。その際にLinkコンポーネントの記述方が変わったみたいなので調べてみました。

### この記事を読む対象者
・Next.jsのバージョンが13になってLinkコンポーネントの記述方を情報収集している方

### 読了時間
・5分もかかりません。

## 新Linkコンポーネントの記述法
```index.tsx
<Link href='/'>
  ホームに戻る
</Link>
```

## 以前の記述法
```index.tsx
<Link href='/'>
  <a>ホームに戻る</a>
<Link>
```

### 変更点
以前はLinkコンポーネント内にaタグをネストする必要があったが、不要になった。
公式ドキュメントでは[こちら](https://beta.nextjs.org/docs/api-reference/components/link)の箇所です。

### 疑問に思ったこと
[こちらの記事](https://zenn.dev/luvmini511/articles/b5e9f02cadd160)によると以前、Linkコンポーネント内にaタグをネストしていたのはセマンティックコーディングとSEOのためにネストしていた。もう記述の必要がなくなり、SEOの観点からみても機能は失われずに、Linkコンポーネント上で行ってくれているのか。

↓参考記事
https://zenn.dev/k_kazukiiiiii/articles/5e8a72ec1a5d27
シーク法のgoでの実装

## 背景
DBからページネーション用のデータのリストを取ってきたい機会がありました。今までDBを全然扱ってこなかったので、色々調べていると、offset法とシーク法が主な実装方法で、**offset法はクソ遅い**ということがわかりました。そこで、シーク法をGoで実装したときのコードを共有したいと思います。
offset法とシーク法の比較についての資料は、以下の3つの資料がわかりやすかったです。
- [OFFSETは前の行を読み飛ばすのにはよくない方法](https://use-the-index-luke.com/ja/sql/partial-results/fetch-next-page)
- [offsetでページネーションは遅い。これからはシーク法だ！](https://qiita.com/madilloar/items/b4e786a932ef9d4551b9)
- [で、オフセット法に比べてシーク法のページネーションはどれだけ早いの？RDB毎に。](https://qiita.com/madilloar/items/5625e61cf3e348d08ef8)

## 方法
シーク法は最後に取得したデータをもとに、次のデータからリストを取得する方法です。順番を決めているカラムがユニークな場合(primary keyなど)は、それ自身で比較して次のデータを見つければいいですが、そうでない場合は、ユニークなデータと一緒に最後のデータの次のデータを見つける必要があります。

## 実装
実装にはgormを使っています。
#### 順番を決めているカラムがユニークな場合(id)
idを比較して、次のデータからデータを取得します。
```unique.go
// orderはasc
// lastData.Idには前回取得時の最後のデータのidが格納されている
db.Limit(pageSize).Order("id asc").Where("id > ?", lastData.Id)
```
#### 順番を決めているカラムがユニークではない場合(name)
まず、nameで比較します。ただ、nameのみでの比較では次のデータが一意に決められない可能性があるため(同名の場合など)、ユニークなidも合わせて比較します。
```notUique.go
// orderはasc
// lastDataには前回取得時の最後のデータのnameとidが格納されている
db.Limit(pageSize).Order("name asc, id asc").
						Where("CASE WHEN name > ? THEN 1 WHEN name = ? THEN id > ? ELSE 0 END",
					    lastData.Name, lastData.Name, lastData.Id)
```

最後に取得したデータをフロントに返す時などは、並び順を決めるデータ(上の例のnameやid)を格納した構造体をエンコードしてstringに変換して渡せばいいと思います。逆に、フロントから受け取る時はデコードして、構造体(上の例のlastDataのような感じ)に格納すれば、複数の並び順に対応することができます。　

## 感想
offset法が遅い理由は最初のデータから検索するからですが、シーク法だと速い理由は何なんですかね？知っている方いたら教えてほしいです。
where句で検索する際は、すでにDB内部でindex化されているデータを検索するので、速いとか？
【Flutter】画像のプレビュー画面（ピンチイン・ピンチアウト）の作り方

よくある画像のピンチイン・ピンチアウトは`InteractiveViewer`を使用して実装することができます。
ただし、InteractiveViewerだけだと2枚目のスクリーンショットのように画像サイズが固定されてしまい、その中で拡大してしまいます。

```dart
InteractiveViewer(
  minScale: 0.1,
  maxScale: 3,
  child: SizedBox(
    width: MediaQuery.of(context).size.width,
    height: MediaQuery.of(context).size.height,
    child: FittedBox(
      child: Image.network("https://picsum.photos/seed/picsum/1500/500"),
    ),
  ),
);
```

そこで、SizeBoxで外側の大きさを`MediaQuery.of(context).size`にし、FittedBoxで比率を固定しながらリサイズすることで3枚目のように拡大することができます。

| 元画像 | SizedBoxなしの場合 | SizedBoxでサイズ指定した場合 |
| ---- | ---- | ---- |
| ![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/985195/1ea7167a-8c4b-886c-f297-66f6309f51ff.png) | ![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/985195/cc49a7fc-ceee-0089-4429-0a726b6b0729.png) | ![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/985195/00bc7300-4e73-1aac-4406-9609d2e8e754.png) |

色々探してもうまく表示されなかったのでメモ

### 探したところ
https://www.woolha.com/tutorials/flutter-using-interactiveviewer-widget-examples

https://github.com/flutter/flutter/issues/58997
【Vim】lightlineの導入方法

# はじめに
スマホ（Android）で開発するのでVimの環境構築は必須です。

# 動作環境
* Sony Xperia 10 IV
* Android OS 12
* UserLAnd 3.1.4
* Ubuntu 20.04.5 LTS
* Git 2.39.0
* Vim 8.1.3741
* Yarn 1.22.19

# 設定ファイルを編集
以下のように編集して、Vimを再起動します。
* 編集前
```~/.vimrc
call plug#begin()
call plug#end()
```
* 編集後
```~/.vimrc
call plug#begin()
Plug 'itchyny/lightline.vim'
call plug#end()
```

# lightlineをインストール
:PlugInstallでlightlineをインストールします。
```vim
:PlugInstall
```
以下のように表示されたらインストール完了です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3118198/7b417dda-143e-aa9a-75c5-549032bbe65a.png" width=50%>

# スクリーンショット
ステータスラインを表示させるとデフォルトで以下のように表示されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3118198/512ac977-439f-8c70-4dee-8bd9f3215795.png" width=50%>
poetryのインストール

```
curl -sSL https://install.python-poetry.org | python3 -
```
このコマンドを実行する。

インストールされたら、プロジェクトのディレクトリに移動し、
```
poetry init
```
を行う。

この記事を参考にさせて頂きました。
https://qiita.com/ksato9700/items/b893cf1db83605898d8a#poetry%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB

https://python-poetry.org/docs/
【Nuxt3】coc-volarの導入方法

# はじめに
スマホ（Android）で開発するのでVimの環境構築は必須です。

# 動作環境
* Sony Xperia 10 IV
* Android OS 12
* UserLAnd 3.1.4
* Ubuntu 20.04.5 LTS
* Git 2.39.0
* Vim 8.1.3741
* Yarn 1.22.19

# 設定ファイルを編集
以下のように編集して、Vimを再起動します。
* 編集前
```~/.vimrc
call plug#begin()
Plug 'neoclide/coc.nvim', {'branch': 'release'}
call plug#end()

let g:coc_disable_startup_warning = 1
```
* 編集後
```~/.vimrc
call plug#begin()
Plug 'neoclide/coc.nvim', {'branch': 'release'}
Plug 'yaegassy/coc-volar', {'do': 'yarn install'}
call plug#end()

let g:coc_disable_startup_warning = 1
```

# coc-volarをインストール
:PlugInstallでcoc-volarをインストールします。
```vim
:PlugInstall
```
以下のように表示されたらインストール完了です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3118198/eb67093d-b623-37cb-0578-553c9e08c649.png" width=50%>
AWS ストレージまとめ(S3、EBS、NFS、FSx)

## ストレージの種類
* インスタンスストア
    * EC2インスタンスに接続された物理ストレージ
    * 高速だが永続化されない
    * 一瞬しかいらないデータとかしか置かない
* S3
    * 6つのストレージクラスがある
        * https://dev.classmethod.jp/articles/should_i_choice_s3_storage_class/
    * データをオブジェクトとして保存
    * AZ内で冗長化されている
    * AWS Storage Gatewayでオンプレからアクセスできる
* EBS
    * ブロックストレージ
    * **AZに拘束される**
    * 基本EC2インスタンスにアタッチして使う
* NFS
    * 複数のAZに冗長化されている
    * **Linux、Macからしか扱えない**
    * たくさんのサーバーからアクセスするようなときはだいたいこれ
* FSx
    * Amazon FSx for Windows File Server
        * **Windowsからアクセスできる**
        * 「Active Directory」が出てきたらだいたいこれ
        * **実はLinuxやMacからもアクセスできる**
        * オンプレから使うにはAWS Direct ConnectやVPNがいる
    * Amazon FSx for Lustre
        * **めっちゃ高性能**
SpringBoot  ContextListenerクラス内でなぜかAutorewiredが機能しない時に実施した対処

SpringBootでAutowiredがうまく機能せずとても困たので忘備録としてメモ。
@Autowiredで生成されるはずのBean(インスタンス)にアクセスすると何故かnullPointerExceptionが発生。
ContextListenerクラスのcontextInitializedメソッドの中でのみ発生した。他のクラスでは問題なくAutowiredを利用してBeanが生成されている状態。

原因は未だに分からないのだが、以下のようにServletContextクラスや、WebApplicationContextクラスを利用することでBeanを取得することができた。

以下のコードは上手くいかなかった例

```java
...
import jp.co.com.sampleApplication.SampleField;
...

@WebListener
public class SampleApplicationContextListener implements ServletContextListener {

    //前提としてSampleFieldクラスには@Componentを付与している状態
    //SampleFieldクラスはgetSample()という簡単なゲッターを持っているとする
    @Autorwired
    SampleField sampelField;

    @Override
	public void contextInitialized(ServletContextEvent sce) {
        SpringBeanAutowiringSupport.processInjectionBasedOnCurrentContext(this);        
        //ゲッターgetSample()を呼び出すとnullPointerExceptionが発生してしまう
        sampleField.getSample();
    }


    @Override
	public void contextDestroyed(ServletContextEvent sce) {
        ...
        ...
	}
}
```
以下の記述だと問題なく処理が成功する
```java
...
import jp.co.com.sampleApplication.SampleField;
...

@WebListener
public class SampleApplicationContextListener implements ServletContextListener {

    //@Autorwired
    //SampleField sampelField;

    @Override
	public void contextInitialized(ServletContextEvent sce) {
        SpringBeanAutowiringSupport.processInjectionBasedOnCurrentContext(this);

        //Context系のクラスを使用してBeanを取得する
        ServletContext context = sce.getServletContext();
        WebApplicationContext wac = WebApplicationContextUtils.getRequiredWebApplicationContext(context);
        SampleField sampleField = wac.getBean(SampleField.class);
        
        //nullPointerExceptionにならない 
        sampleField.getSample();
    }


    @Override
	public void contextDestroyed(ServletContextEvent sce) {
        ...
        ...
	}
}
```


@Autowiredではダメだが、WebApplicationContextクラスを使用すればDIコンテナにあるBeanにアクセスできている模様?....なぜなのだろうか...。
OpenCVのカスケード分類器でちいかわを認識させる


# はじめに
ちいかわの漫画からちいかわの顔画像だけを抜き取るものを作ります。
技術的な部分やカスケード分類器については[こちら(OpenCVのカスケード分類器を自作して画像認識)](https://www.pc-koubou.jp/magazine/21280)を見ていただければと思います。
ネットに公開されているちいかわの顔画像だけを簡単に取得できればうれしいと思い始めました。（大量のちいかわの顔があると楽しいので）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2172062/005d88a3-9554-1f36-a538-c6fe8a1cb502.png" width="70%">



# 既存のアニメ顔検出カスケード分類器の利用

まず、[OpenCVによるアニメ顔検出ならlbpcascade_animeface.xml](https://ultraist.hatenablog.com/entry/20110718/1310965532)という記事で公開されているカスケード分類器を利用してちいかわが検出されるのか試してみました。
しかし、残念ながらちいかわの顔は検出されませんでした。
一般的なアニメ顔とは異なるので難しいのだと思います。

# ちいかわを認識するカスケード分類器の作成
ちいかわの顔は一般のアニメキャラクターの顔とは異なるため新たにカスケード分類器を作る必要があります。

カスケード分類器を作るためには正解画像「7000枚」、不正解画像「3000枚」が必要らしいです。正解画像というのはちいかわの顔だけを切り抜いたモノになるのですが、手作業でちいかわの顔画像を7000枚を用意するのは大変です。

諦めようと思っていたのですが、OpenCVには1枚の画像から複数の正解パターン画像を生成する「createsamples」というプログラムがあり、これを使うことで少数の正解画像でも分類器が作れるようです。

[前述のサイト](https://www.pc-koubou.jp/magazine/21280)と同様に正解画像1枚からcreatesamplesを利用して1000枚の正解データを作り学習を行いました。

正解データとして利用したちいかわ
![image95.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2172062/1d219db0-2f5c-7f60-81ba-0bdb5a3f9574.png "正解データとして利用したちいかわ")

# 実行結果１
赤い四角の内側がちいかわの顔として認識された部分です。明らかに失敗しています。正解データが少ないのでしょうか。
![result_tmp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2172062/e72a4e37-8b27-f12a-fce0-110b45271efb.png )

# カスケード分類器の改良
正解データの数が少なかったのだろうと考え、手作業でちいかわの画像を100枚ほど切り抜き、正解データの数を増やしました。苦しい作業でした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2172062/5584ca61-8d52-0890-8811-c6a17a3d9194.png)

この100枚の正解画像から「createsamples」を用いて4000枚分の正解データを生成し、1000枚の不正解画像と合わせて学習を行います。
不正解画像は「100日後に死ぬワニ」で有名なきくちゆうき先生のツイッターから拝借しました。

# 実行結果２
枠の中がちいかわの顔と判定された部分です。外れていたり、ウサギの顔を認識していたりする部分はありますが、最初よりはよくなったと言えます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2172062/edb6c4b6-509a-1a2f-de78-c1d2840799e1.png" width="70%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2172062/005d88a3-9554-1f36-a538-c6fe8a1cb502.png" width="70%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2172062/82d678ab-a7a5-ba7f-d1c1-1f06e5d833e8.png" width="70%">

# 今後
今回作成した分類器を用いてより多くのちいかわの画像を取得し、正解データの数を増やしていくことで高精度な分類器を作成したいです。
【Vim】coc.nvimの導入方法

# はじめに
スマホ（Android）で開発するのでVimの環境構築は必須です。

# 動作環境
* Sony Xperia 10 IV
* Android OS 12
* UserLAnd 3.1.4
* Ubuntu 20.04.5 LTS
* Git 2.39.0
* Vim 8.1.3741
* Yarn 1.22.19

# 設定ファイルを編集
以下のように編集して、Vimを再起動します。
* 編集前
```~/.vimrc
call plug#begin()
call plug#end()
```
* 編集後
```~/.vimrc
call plug#begin()
Plug 'neoclide/coc.nvim', {'branch': 'release'}
call plug#end()```

# coc.nvimをインストール
:PlugInstallでcoc.nvimをインストールします。
```vim
:PlugInstall
```
以下のように表示されたらインストール完了です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3118198/0afda686-90ed-2db0-ebad-3ed89672cd37.png" width=50%>

# 警告の抑止
Vimのバージョンによっては起動時に警告が表示されるので、設定ファイルを以下のように編集します。
* 編集前
```~/.vimrc
call plug#begin()
Plug 'neoclide/coc.nvim', {'branch': 'release'}
call plug#end()
```
* 編集後
```~/.vimrc
call plug#begin()
Plug 'neoclide/coc.nvim', {'branch': 'release'}
call plug#end()

let g:coc_disable_startup_warning = 1
```
VSCodeのGo言語デバッグで、"go: cannot find main module..."とエラーが出る【M1Mac】

# VSCodeのGo言語デバッグで"go: cannot find main module..."とエラーが出る【M1Mac】

## 環境
MacBook Pro (2021)M1Pro

## 原因
おそらく環境構築した時に入力されたPATHにデバッグしようとしているディレクトリが入っていない事によるエラー?(拙い英語力で曲解)

## 解決策
VSCodeの設定settings.jsonに設定を追加する

### 1 設定画面を開く
ステータスバーの"Code">"基本設定">"設定"を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125452/83fddb94-8ed7-9e1c-3bdb-2e433aaafd71.png)

### 2 settings.jsonを開く
VSCode右上のファイルみたいなマークが目印
![スクリーンショット 2023-02-05 17.11.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125452/f308abc1-6333-a126-b77e-06b87c81ae7e.png)


### 3 設定を最後の鉤括弧手前に追記する
```
//go module settings
"go.toolsEnvVars": {
    "GO111MODULE": "auto",
},
```
画像の場合、追記した部分は60~63行目
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125452/f65d0a74-91ca-1341-1cc8-d8b036fe8fd4.png)

### 4 保存して完了！

Ctrl+Sで保存すると右下に「リロードしますか」と出るので実行するとデバッグができるようになります。
【ASP.NET Core6.0】bool値の入力フォームでhiddenの値が自動生成されて困った話

# 環境
ASP.NET Core 6.0

# 問題
bool値の入力フォームを作ると、勝手にhiddenの値がformタグ終了直前に出力される。
``` ExampleEntity.cs
// エンティティ
public class ExampleEntity
{
    public bool IsDeleted { get; set; }
}
```
```form.cshtml
<form method="post">
    <input asp-for="@Model.IsDeleted">
    <!-- 他 -->
    <!-- の -->
    <!-- コ -->
    <!-- ｜ -->
    <!-- ド -->
</form>

// ↓↓↓↓↓　実際出力されるHTML　↓↓↓↓↓
<form method="post">
    <input name="IsDeleted" type="checkbox" value="false" />
    <!-- 他 -->
    <!-- の -->
    <!-- コ -->
    <!-- ｜ -->
    <!-- ド -->
    <input name="IsDeleted" type="hidden" value="false" />  // ← これがいらない
</form>
```

# 解決方法
Program.csに下記を追記する
``` Program.cs
services.Configure<MvcViewOptions>(options =>
    options.HtmlHelperOptions.CheckBoxHiddenInputRenderMode =
        CheckBoxHiddenInputRenderMode.None);
```

# 参考
[ASP.NET Core のフォームのタグ ヘルパー](https://learn.microsoft.com/ja-jp/aspnet/core/mvc/views/working-with-forms?view=aspnetcore-6.0)

# あとがき
複数のEntityを更新・追加・削除できる画面を作成時に何故かbool値のあるフォームのみ下記のような現象が起きました。

① Entityを追加ボタンを押下（Ajaxで入力フォームを取得）
② ①の入力フォームを未入力のまま、更新ボタンを押下
③ 入力エラー画面が表示される
④ ①で追加した空のEntityの削除ボタンを押下
　（DBには登録されていないので①で追加されたHTMLをJSで削除）
④ 更新ボタンを押下すると、削除したはずのEntityが追加された状態でまたエラー画面が表示される

原因は上記の通り、formの最後にhiddenが追加されおり、その値がPOSTされたため、削除したと思っていたEntityが削除できておらず・・・。
bool値がないEntityはできてるのに、このEntityだけなんでこうなるのさとはまったので記録として残しておきます。
【wxpython】使用できるフォント一覧

## はじめに
wxpythonでstatictextのフォント変えたい！と思った時に、1つもフォント比較の記事が見つからず...同じことを思った誰かの役に立てば幸いです。
ちなみにフォント以外のstatictext関連は[こちらの記事](https://www.python-izm.com/gui/wxpython/wxpython_statictext/)でほぼ事足りるかと思います。

環境はpythonが3.7.5, wxpythonは4.2.0です。

## フォント一覧
とりあえず一覧はこちら。
#### 英語表記　
All these places have their moments. 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2543544/1a153062-1fcc-098b-806a-b6648103bcf9.png)
#### 日本語表記　
日々鍛錬し、いつ来るともわからぬ機会に備えよ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2543544/89b966e1-2ccf-ea96-a8a6-fdae5f037a13.png)
頭に振ってあるF* S* W*の数字で各フォントを識別しております。好みのフォントに目星をつけつつ次の章にお進みください。

## フォントの設定方法
```python:font_check.py
import wx
text = wx.StaticText(self, id=-1, label='書きたい言葉')
font = wx.Font(pixelSize, wx.FONTFAMILY_DEFAULT, wx.FONTSTYLE_NORMAL, 
            wx.FONTWEIGHT_NORMAL, underline=False,faceName="", encoding=wx.FONTENCODING_DEFAULT)
text.SetFont(font)
```
StaticTextのフォントは上記の方法で設定できます。([参考の公式ページ](https://docs.wxpython.org/wx.Font.html))
今回は[wx.FONTFAMILY](https://docs.wxpython.org/wx.FontFamily.enumeration.html#wx-fontfamily)と[wx.FontStyle](https://docs.wxpython.org/wx.FontStyle.enumeration.html#wx-fontstyle)と[wx.FontWeight](https://docs.wxpython.org/wx.FontWeight.enumeration.html#wx-fontweight)を変更してみました。  wx.FONTFAMILYがFと、wx.FontStyleがSと、wx.FontWeightがWと対応しています。以下に対応表を載せます。

|     | wx.FONTFAMILY            | wx.FontStyle        |wx.FontWeight       |
|:---:|:-------------------------|:--------------------|:-------------------|
| 1   | wx.FONTFAMILY_DEFAULT    | wx.FONTSTYLE_NORMAL |wx.FONTWEIGHT_NORMAL|
| 2   | wx.FONTFAMILY_DECORATIVE | wx.FONTSTYLE_ITALIC |wx.FONTWEIGHT_BOLD  |
| 3   | wx.FONTFAMILY_ROMAN      | wx.FONTSTYLE_SLANT  |
| 4   | wx.FONTFAMILY_SCRIPT     | wx.FONTSTYLE_MAX    |          |
| 5   | wx.FONTFAMILY_SWISS      |        |

たとえば F5 S1 W2のフォントが気に入った場合は、先ほどのコードを
```python:font_check.py
import wx
text = wx.StaticText(self, id=-1, label='書きたい言葉')
font = wx.Font(pixelSize,  wx.FONTFAMILY_SWISS , wx.FONTSTYLE_NORMAL, 
            wx.FONTWEIGHT_BOLD, underline=False,faceName="", encoding=wx.FONTENCODING_DEFAULT)
text.SetFont(font)
```
このように書きかえればOKです。

なお[wx.FontEncoding](https://docs.wxpython.org/wx.FontEncoding.enumeration.html#wx-fontencoding)はありすぎて今回やりきれず、wx.FONTENCODING_DEFAULTで固定にしました。一応、wx.FONTENCODING_CP932が日本語対応ぽかったのでちらりと試してみたのですが結構変わりそうでした。
またwx.FontWeightも横着して2種類しかやりませんでしたがもっとあるので[公式](https://docs.wxpython.org/wx.FontWeight.enumeration.html#wx-fontweight)をよければ覗いてください。

## おわりに
wxpythonのバージョンが対応していないものだったのか、公式にある風に書いてあるものがいくつかエラーが出ました。
誰も変えたくならないのかも、非常に需要の低い記事を書いてしまったかもしれません...
フォント一覧を表記するために書いたコード全体は[こちら](https://github.com/r-sugahara/wxpython)。
【Api Gateway】CORS有効化実行時にエラーとなる場合の対処法

# はじめに
みなさんAWSはお好きですか？(笑)
私はどうにも苦手なのですが、最近はAWSとも仲良くしていく必要があり、うる覚えだった知識を再度掘り起こしながら調整しています。
今回はその過程で出たcors有効化時のエラーについて対処法をまとめておこうと思います。

# エラー解消方法
表示されていたエラーは以下になります。
![cors_error.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354522/fdaa4b75-6a1d-6d95-6b3c-addfe3815710.png)

名称を見たらなんとなく何をすべきなのかわかるのですが、具体的に何をどう追加すれば解消するのか手順をまとめます。

まず怒られている原因はエラーの内容通りoriginを捌けないからなので、post側の設定を確認します。
メソッドレスポンス項目を選択すると現状は何も設定がないかと思います。
![スクリーンショット 2023-02-05 16.32.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354522/60f69b11-f368-69da-289d-c7c04dc857a7.png)

ここに設定がないことが原因で怒られているので、怒られている対象の設定を追加します。
追加する場合はレスポンスの追加から調整可能です。

![スクリーンショット 2023-02-05 16.34.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354522/c7983952-20e4-81a5-0511-d04494c2083c.png)

httpのステータス欄に２００画像右端のチェックマークを選択
すると以下画面が作成されるかと思います。

![スクリーンショット 2023-02-05 16.35.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354522/79b54566-2c23-0d0d-4c4f-4ffbbd3124b2.png)

上記と同様の状態になりましたら、ヘッダーの追加からヘッダー情報を追加します。
今回怒られている対象は、**Access-Control-Allow-Origin**に対してなので、ヘッダーには左記パラメータを追加してチェックボタンを選択します。

![スクリーンショット 2023-02-05 16.36.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354522/d93de873-d962-6a8d-d98a-b801ad5cfb40.png)

これでヘッダー情報の付与は完了です。
deployを行うことで反映されますので、忘れず対応しましょう。

この状態で再度CORS有効化を実行すると、成功するかと思います。


# さいごに
そのうち理解を深めるためにCORSとは何かという記事もまとめたいと思います！
AWSのAutoScalingについてまとめ(SAA試験対策)

## AutoScalingとは

オートでスケーリングしてくれるすごいヤツ。

### 主要な対象サービス
EC2
Aurora
DynamoDB
ECS
ElastiCache
EMR
SageMaker
他

https://docs.aws.amazon.com/ja_jp/autoscaling/application/userguide/integrated-services-list.html 

## スケーリングの種類
* 動的なスケーリング
    * 簡易スケーリング(非推奨)
        * CPU使用率が〇〇%を超えたら…とかそういう単純なやつ
    * ステップスケーリング
        * CPU使用率が50%を超えたら〇〇する、60%を超えたら△△する、みたいに多段階に設定できる。一個だけでもいいので簡易スケーリングの完全上位互換。
    * ターゲット追跡スケーリング **(推奨)** 
        * CPU使用率がxx%になるようにしてね、と指定するといい感じに自動でスケールイン、アウトしてくれる。
※上ではCPU使用率を例にしたが、使用できるメトリクスは色々ある
https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/viewing_metrics_with_cloudwatch.html

* 予測スケーリング
    * 機械学習で稼働状況を予測して勝手にスケーリングしてくれるすごいヤツ。
    * 「通常の営業時間にはリソースの使用率が高く、夜間や週末はリソースの使用率が低いといったサイクルがあるトラフィック」みたいに**需要の変動がある(が、特定の日時ではない)ことが問題文に示唆されていたらこれを選ぶ。** 
* スケジュールスケーリング
    * 手動でスケーリングの日時を指定する。
    * 「毎月1日にバッチ処理が実行され～」とか**特定の日時のみに需要が増大することが問題文に示唆されていたらこれを選ぶ。**
【UserLAnd】UbuntuでYarnをインストール

# はじめに
家にPCがないのでスマホ（Android）で開発環境を構築しようと考えました。

# 動作環境
* Sony Xperia 10 IV
* Android OS 12
* UserLAnd 3.1.4
* Ubuntu 20.04.5 LTS
* Node.js 18.13.0
* Npm 9.3.1
* Yarn 1.22.19

# Yarnをインストール
Yarnをインストールします。
```bash
$ npm install -g yarn
```

# Yarnのバージョンを確認
Yarnのバージョンを確認します。
```bash
$ yarn --version
1.22.19
```
macセットアップ

## 環境
- macOS Ventura 13.2
- iMac　Intel Core i5

## 最初にする
- ソフトウェアアップデート
    - appleマーク > このmacについて > ソフトウェアアップデート

## システム環境設定
### 自分の名前
- icloud > safari > offにする

### bluetooth
- 自分のデバイス > iマーク > 検出されるデバイス名を変更できる
### ネットワーク
- ファイアウォール > onにする

### 通知
- ヒント > offにする

### 集中モード
- デバイス間で共有 > offにする

### スクリーンタイム
- デバイス間で共有 > offにする

### 一般
- airdropとhandoff
    - Handoff > offにする
        - appleデバイス同士でドキュメントやsafariで表示しているページを連携できる機能
    - airplayレシーバー > onにする
        - ネットワーク経由で音楽や映像をストリーミング再生できる機能
    - airplayを許可 > 現在のユーザ
    - パスワードを要求 > offにする
- 日付と時刻
    - 日付と時刻を自動的に設定 > onにする
    - 現在の位置情報に基づいて、時間帯を自動的に設定 > onにする
        - 上記で日本時刻にならない場合は、"日付と時刻を自動的に設定""現在の位置情報に基づいて、時間帯を自動的に設定"を両方offにし、"タイムサーバ"に"Appleアジア (time.asia.apple.com.)""最も近い都市"に"tokyo - 日本"と入力する

### 外観
- サイドバーのアイコンサイズ > 中
- スクロールバー > スクロール時に表示
- スクロールバーをクリックして > クリックされた部分へジャンプ
    - クリックでページ内遷移する機能

### アクセシビリティ
- ショートカット > 全てoff

### コントロールセンター
- コントロールセンターモジュール
    - メニューバーに表示する項目を設定できる

- 時計
    - 日付を表示 > 常に表示
    - 曜日を表示 > onにする

### プライバシーとセキュリティ
- 位置情報サービス
    - システムサービス > 時間帯の設定 > onにする
- セキュリティ
    - ダウンロードしたアプリケーションの実行許可 > app storeと確認済みの開発元からのアプリケーションを許可
    - filevault
        - ディスクの暗号化機能。パスワード忘れたらログインできなくなる。timemachineの設定に制限が生まれる

### デスクトップとDock
- ウィンドウをしまう時のエフェクト
    - ウィンドウ左上の黄色ボタン押下時のエフェクトを設定できる
- ウィンドウのタイトルバーをダブルタップして > 拡大/縮小
    - タイトルバーをダブルタップするとウィンドウの幅が広く/狭くなる
- ウィンドウをアプリケーションアイコンにしまう > onにする
- メニューバーを自動的に表示/非表示 > offにする
- 最近使った書類、アプリケーション、およびサーバの表示数 > 50
- ホットコーナー > 左下 > Launchpad
    - マウスを画面四隅に移動させた時の動作を設定できる機能

### ユーザとグループ
- アカウントを追加 > ユーザ追加可能
- グループ > iマーク > ユーザメンバー
    - グループに追加したいユーザをonにする

### キーボード
- キーのリピート速度 > 最速
- リピート入力認識までの時間 > 最短
- fnキーを押して > 絵文字と記号を表示
    - fnキーを押すと絵文字を選択できるようになる😀
- キーボードナビゲーション > onにする
    - tabでフォーカスを次に移動。tab+shiftでフォーカスを前に移動
- ショートカット > アクセシビリティ > voiceoverのオン/オフ > offにする
- ファンクションキー > F1、F2 などのキーを標準のファンクションキーとして使用 > onにする
    - onにするとF1キーなどを標準的なファンクションキーとして使えるようになる。逆に音量調整などの制御を行いたい場合は、fnを押しながら対応するキーを押下すること

### マウス
- ポイントとクリック > 軌跡の速さ > 最速
- ポイントとクリック > ナチュラルなスクロール > onにする
    - onにすると指を動かした方向にスクロールされる
- ポイントとクリック > 副ボタンのクリック > 右側をクリック
    - windowsでの右クリック。ここをonにしない場合は、ctrlを押しながらクリックすると同様の動作になる
- ポイントとクリック > スマートズーム > onにする
    - １本指でダブルタップするとコンテンツを拡大表示する機能
- その他のジェスチャ > ページ間をスワイプ

## Finder
- 設定
    - 一般 > デスクトップに表示する項目 > すべてonにする
    - 一般 > 新規Finderウィンドウで次を表示 > 書類
    - サイドバー > サイドバーに表示する項目を選択する
    - 詳細 > 全てのファイル名拡張子を表示 > onにする
    - 詳細 > 拡張子を変更する前に警告を表示 > offにする
    - 詳細 > フォルダを常に先頭に表示する場所 > 名前順で表示しているウィンドウ
- 表示
    - タブバーを表示 > onにする
    - ステータスバーを表示 > onにする
    - パスバーを表示 > onにする

## ユーザ間ファイル共有の設定
- "MacintoshHD>ユーザ>共有"をよく使う項目に追加
    - デフォルトで用意されている全ユーザに読み書き権があるフォルダ
- 共有したいフォルダ等の権限変更
    - 右クリック > 情報を見る > 共有とアクセス権

## safari
- safari > 設定 > 詳細 > webサイトの完全なアドレスを表示 > onにする
- safari > 設定 > 詳細 > メニューバーに"開発"メニューを表示 > onにする

## chromeアプリ
- Chrome > 終了する前に警告メッセージを表示する > offにする
【Vim】プラグインの導入方法

# はじめに
スマホ（Android）で開発するのでVimの環境構築は必須です。

# 動作環境
* Sony Xperia 10 IV
* Android OS 12
* UserLAnd 3.1.4
* Ubuntu 20.04.5 LTS
* Git 2.39.0
* Vim 8.1.3741
* Yarn 1.22.19

# vim-plugをインストール
Vimのプラグインマネージャーをインストールします。
```bash
$ curl -k -fLo ~/.vim/autoload/plug.vim --create-dirs https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim
```

# 設定ファイルを編集
導入したいプラグインをbeginとendの間に追記していきます。
```~/.vimrc
call plug#begin()
call plug#end()
```
【備忘録】WSL2のインストール手順のメモ

## この記事を読んだら何ができるようになる？
**WindowsのPCでWSL2が使えるようになる！**

## What is WSL2？
Linux用 Windowsサブシステムの略
Windows上でLinuxを実行できる環境を提供してくれるソフトウェア。

## インストール手順

### 前提条件
>　以下のコマンドを使用するには、Windows 10 バージョン 2004 以上 (ビルド 19041 以上) または Windows 11 を実行している必要があります。 それより前のバージョンの場合は、手動インストール ページを参照してください。


### WSLコマンドのインストール
Power Shellを管理者として実行し、管理者モードの状態で以下コマンドを実行する。
インストールが完了したら、PCを再起動する。

```
wsl --install
```

PC再起動後にPowerShellを再度開いて(管理者権限でなくても良い)以下コマンドを実行し
WSL2が有効になってるかを確認する。

```
wsl -l -v

  NAME            STATE           VERSION
* Ubuntu-22.04    Running         2
```
コマンド実行後に、上記のような出力がされてればOK
(ubuntuのバージョンは、どのバージョンをインストールしたかで異なる可能性がある。)

WSL2のインストールは以上で完了。


## 補足
WSL2からWindows上のファイルにアクセスすることも可能だが、処理に時間がかかる。
Windows上にあるファイルをLinuxで操作したい場合は、WSL2側にファイルを移動してから作業するようにしましょう。
今回は、インストールに着目した内容になるのでファイル移動についての説明は割愛します。

## 参考
https://learn.microsoft.com/ja-jp/windows/wsl/install?source=recommendations
CSSの文法

# link要素
・HTMLから外部情報を関連づける際に使用
・rel属性、href属性と一緒に使用するのが一般的

# rel属性
・relationの略で、参照先のファイルが現在のファイルとどのような関係であるのかを明らかにする
・属性値には決められたワードを記載

# href属性
・hyper referenceの略で、参照先の外部ファイルの場所を明らかにする
・属性値にはファイルの場所、ファイル名を記載

# セレクタ
・CSSによる装飾を、その部分のHTMLに適用するかを選択するための記述

# プロパティ
・セレクタで指定したHTMLの「何を変えるのか」を選択するための記述

# 値
・プロパティで設定する内容を決めるための記述
文系エンジニアLPIC202合格体験記

# 軽く自己紹介
文系卒2年目インフラエンジニアです。
所持資格:
LPIC101,102,201
AWS CLF,SAA,SAP


LPIC取得期間:
101から202まで全て約3週間ずつ
仕事前と仕事終わりに2時間ずつ&土日に数時間
＝測っていないが約80時間で1つの資格を取得するイメージ

202は620点で合格


# 記事を書くきっかけ
LPIC201までとは別の勉強法で挑んだ202が1番効率が良かった気がするので備忘録的に記しておく



# 学習方法
201まではあずき本（テキスト）を1周読んでから白本（問題集）を実施していたが、202は白本をテキスト代わりに1周読み、2周目で問題集として利用した。
具体的に何をしたかと言うと、まず1問ずつNotionというメモアプリに問題と解説を自分なりにまとめていった。そして次の日に前日まとめた章の問題を解いた。あずき本は問題集の解説が物足りない時に辞書的に利用した。
ここまでで2週間。

最後の1週間はPing-tを全ヒットになるまで仕上げた。4日で1周してその後2日で、もう1周して全ヒットにする感じだ。この時点でやっと少し理解ができる。
Ping-t1周目まではほぼ暗記のような感じだ。もちろんわからない単語などについては都度ググるが、そこで完全に理解しようとしないことがミソだ。理解しようとすると負荷がかかるので、さらっと何回も調べる内に理解していく。そのほうが結果的にノンストレスで早いはず。

記事の趣旨とは少しズレるが、202は白本の模擬試験が非常に評判が良かったので気休め程度に試験当日の朝に解いたら6問ほど同じ問題が出題されたのでおすすめ。

# 試験を終えて
文系卒で入社後即受験したAWS SAAの次にストレス値の高い試験だった。202はLPICの中で最難関と言われるだけあると感じた。今回テキストを読まないという選択をして良かったと思う。（最初にテキストを読もうとしたが意味がわからなさすぎて挫折した）

次は303を受験するので、黒本（問題集）で同じ方法を試してみようと思う。
任意座標データでパズル(登記所備付地図)

G空間情報センターで公開されている登記所備付地図には任意座標でそのまま読み込んでも利用できないデータがあります。  
それをQGISを利用して"おおよそこのへんであろう"場所に持ってくる作業をしたいと思います。  
あくまでおおよその場所にしか持ってこれないのを承知の上での作業になります。

なおダウンロードしたファイルはmojxml2geojsonを利用しあらかじめgeojsonに変換してあります。  

https://www.geospatial.jp/ckan/dataset/xml2geojson/resource/59a4e495-32f5-4740-a4d3-901ac8767b6d

## データがおおよそどこの場所なのか確認する
正しく表示されないのはもちろん覚悟の上でQGISに読み込みます。  
このときレイヤ及びプロジェクトの座標系は平面直角座標系に設定しておきます。  
![スクリーンショット 2023-02-05 153110.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/827162/d6e2b351-0310-2225-ed11-9f2810baf012.png)
本来の場所とは全く違う場所、違う大きさで表示されてしまいましたね。 

## 基盤地図情報を表示させる  
おおよその場所に移動させたいため、背景地図に何らかの地図を表示させます(OSMとか)。  
さらに細かい部分を調整するため基図となる絵が欲しいので国土地理院のHPから基盤地図情報をダウンロードします(要登録)。 
ファイルを解凍すると複数のxmlファイルが入っていますが、下記のファイルくらいあれば今回の作業ではいいのではないでしょうか。場所によっては測量の基準点やら行政区画線、河川区域のラインなど場所に応じたものを使うのが良いかと思います。   

|タグ名|クラス名|
|-|-|
|BldL|建築物の外周線|
|RdEdg|道路縁|

https://www.gsi.go.jp/kiban/

https://fgd.gsi.go.jp/download/documents.html  

登記所備付地図のいわゆる法務省様式xmlファイルとは違い、基盤地図情報のxmlファイルはQGISで直接読み込むことができます。


## 正しい位置に持ってくる  
ここからはかなり人力での作業になります。  
ダウンロードしたデータとQGISに表示させている基盤地図や背景地図タイルを見比べて特徴のある部分を探します。  
いったん表示させたファイルをプリントスクリーンして見比べながら作業しました。  

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/827162/7319574d-d25e-2c2a-17a8-6478640cc073.png)  

なんとか似ている場所を見つけました

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/827162/1ff1d11e-cf11-842d-2405-54fdf64376b9.png)  

いつからかわかりませんが、QGISのジオリファレンサウィンドウはレイヤメニューのほうに移動しました。  
そして現在はベクタデータも読み込めるようです。  
レイヤメニュー→ジオリファレンサ→左上のベクタ読み込みボタン  
から任意座標ファイルを読み込みます。  

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/827162/c9736ee7-db30-2922-04aa-85c8f88cb8ec.png)

変換パラメータの設定で多項式1にしておきます。
出力先の座標系は使い道によってですが、今回は同じ平面直角座標にしておきました。  
出力ファイル形式も任意で、とりあえず標準のジオパッケージで作業します。  
操作方法はラスタの場合と変わらないので割愛、念のためスナップオプションを有効にしてスナップさせながら作業します。  

3点ほどコントロールポイントを作成しました。  
スタートボタンで変換実行。  

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/827162/d1000d67-3478-2fbd-a7bb-2009ee1ce71f.png)

おおよそそれらしい場所に表示されました。  

## その他の任意座標ファイル  
今回使用したファイルは1つのファイルに1ブロックのデータのみでしたが、  
ものによっては1つのファイルに複数ブロック格納されいているものもあるようです。  
それら複数ブロックが入っているものの各任意座標の原点は同じものではないと思いますので、  
ブロックごとに作業する必要があるかもしれません。  

また、今回は市街地の区域だったため、道路縁をコントロールポイントとし変換をかけましたが、  
農地や河川沿いなどの場合は農林水産省様から公開されている筆ポリゴンや、河川区域系のデータ、  
行政区画線にまたがるような場合はそれらのデータを基盤地図情報なり、国土数値情報から入手して使用するなど、いろいろな方法があると思います。

https://www.maff.go.jp/j/tokei/porigon/
PythonでFastAPI+gunicornを使用しBasic認証をかけたAPIサーバを立てる


## 環境
Amazon Lightsail(LAMP)
以前別の用途で作ったのを再利用しただけなので、LAMPであることに特に意味はない

## uvicornでAPIサーバーを動かす

Basic認証をかけたかったので、[FastAPIでBasic認証 - Qiita](https://qiita.com/taumu/items/e448259a132bdbacf31c)の通りbasic_auth.pyを用意し、API部分を下記の通り実装  
host="0.0.0.0"を指定することでローカル以外でもアクセスできるようにしている


```python:myserver.py
import uvicorn
from fastapi import FastAPI, Depends
from basic_auth import verify_from_api
from fastapi.responses import FileResponse

app = FastAPI()

@app.get("/")
async def root(_ = Depends(verify_from_api)):
    return FileResponse("image.png", media_type="image/png")

if __name__ == "__main__":
    uvicorn.run(app, host="0.0.0.0", port=8000)

```

pipで必要なものをインストール
```
pip3 install fastapi uvicorn
```

lightsail環境で、pipでインストールしたコマンドが使えなかったため、パスを通す
```
PATH=$PATH:/home/bitnami/.local/bin
```
echo $PATHで増えたことを確認

実行
```
python3 myserver.py
```
http://サーバアドレス:8000/ にアクセスするとBasic認証をチェックした上でimage.pngを返すAPIができあがった


## 環境変数の設定
Linuxサーバは接続が切れると環境変数が消えるらしいので、下記で永続化
[Linuxで環境変数を永続化させる方法と手順について – Rainbow Engine](https://rainbow-engine.com/linux-envvar-permanent/)

## gunicornを使ってバックグラウンドで動作させる
uvicornだとプロセスがフォアグラウンドになるので、代わりにgunicornを使用

```
pip3 install gunicorn
```


-D でバックグラウンドで実行できる
```
gunicorn -k uvicorn.workers.UvicornWorker --bind "0.0.0.0:8000" myserver:app -D
```

## 参考にした記事
* [PythonでAPIを爆速で構築してみた - Qiita](https://qiita.com/yota_dev/items/ab8dea7f71c8a130d5bf)
* [FastAPI、uvicorn + gunicorn で デーモン化したWebサーバーの起動、確認、停止方法 - Qiita](https://qiita.com/hachicomb/items/39c83252c10b05a421f1)
* [TypeError: \_\_call\_\_() missing 1 required positional argument: 'send' · Issue #2154 · benoitc/gunicorn](https://github.com/benoitc/gunicorn/issues/2154)
* [gunicornをバックグラウンドで実行する方法 - Qiita](https://qiita.com/kotmats/items/26d12343acab0c2f24e7)
AWS cloud9 connectingのまま

備忘

## 1.目的
・CI/CDアクセス用にCloud9を構築する。 
## 2.構築
インスタンスタイプ以外はデフォルトで構築。
![WS20230205_000.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2640045/a2acbee2-3546-7f04-c048-fc17032c4cc1.jpeg)
![WS20230205_002.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2640045/74ca1118-d18b-ca62-6785-51375f9392f4.jpeg)
![WS20230205_001.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2640045/fbd08125-88a9-744c-86ad-562faa233603.jpeg)
## 3.事象
connectingのまま　画面遷移せず。
![WS20230205_006.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2640045/2ec98fad-bcdc-cdcf-24de-308c2a22fc89.jpeg)
![WS20230205_004.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2640045/57421ae4-4686-2f95-edee-98b12fb50a6e.jpeg)
## 4.原因／対策
①Connectionが「SSM」だっため。
→connectionを「SSH」に変更。
②サブネットがプライベートネットワークだっため
→パブリックネットワークに変更
![WS20230205_005.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2640045/d48e613e-346f-21df-acf2-6ef9b76f40b1.jpeg)
![WS20230205_008.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2640045/0bb0bb66-a5a4-8f94-048c-12ec9b407ef7.jpeg)
## 接続確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2640045/2eedc838-e6a0-e041-0789-e5d6d5c0ab70.png)
UnityとEpic Online Servicesを組み合わせたオンラインゲームの作成～①Developer Portal編～

# ①Developer Portalの設定

Epic Online Servicesでの開発連載記事の第1回が仕上がりました！まだご覧になっていない方は、前回のこちらの記事も見てみてください。

https://qiita.com/Ayuchan/items/bd9e80a1b998f4c2dc8c

## 下準備：
epicGamesのアカウントを作成する(2段階認証も済ませる)



## Developer Portalで製品を作る

①作成したアカウントを使って、epicgames公式ページの右上にあるDeveloper Portalにアクセス
![DeveloperPortal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668183/d89322e1-463a-947d-c54e-06e84487c968.png)



②「組織」で開発するか「個人」で開発するかを聞かれる。あとからメンバーを増やして「組織」として開発することも出来るので「個人」を選んでおく。


③Developer Portalに入ると、organizationやらサンプルプロジェクトやら、色々なページがあるので色々見たり触ったりしてみる！
![Developer_Portal画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668183/7c943fbf-d37e-abfa-be17-6364a83ec576.png)


④既に「ユーザ名's Product」というサンプルプロジェクトがあるはずなのでそのページを開く。そして、このサイトのとおりにクライアントの設定等々をする。

https://dev.epicgames.com/ja/news/how-to-set-up-epic-online-services-eos

※上記サイトの手順６にて、次のように書かれていますが、無効のままテスト実行を行うと必ずエラーになるのでこの段階で全て有効にしておいても良いです。

```
[機能] では、このクライアント (サンプル アプリ) がアクセスするサービスを選択することができます。
また、有効にした機能ごとに個別の操作を決めることもできます。
サンプルをビルドするときにこれらの機能を有効するため、ひとまずすべて無効のままにしておきます。
```

最初は全部のボタンがグレーになっていますが、全て有効にしましょう！
![製品設定 — Epic Online Services _ デベロッパーポータル - Google Chrome 2023_01_26 1_12_58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668183/22d2b812-b444-fd48-a302-dcf7a776f26b.png)



## Developer PortalでEAS(Epic Acount Service)を設定する

以下のサイトを参考にしながら、Developer PortalでEAS(Epic Account Service)の設定を行いましょう。

https://dev.epicgames.com/ja/news/player-authentication-with-epic-account-services-eas#setting-up-for-eas-in-the-developer-portal

※上記サイトの手順５にて、次のように書かれています。しかし後々「friend_listが設定されていません」という旨のエラーが出るので「friend_list」の項目は「必須」にしておくとよいです。
```
ここで、アプリケーションがユーザーに要求できる権限を設定できます。 
後でその機能を実装するときに他のアクセス許可を有効にするため、今のところ、基本プロファイルのアクセス許可のみを有効にしておきます。 
[Save（保存）] をクリックして確定します。
```

![製品設定 — Epic Online Services _ デベロッパーポータル - Google Chrome 2023_02_05 16_27_25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668183/14f823fa-dc69-deda-b15f-4dd24fadf946.png)


# 次の手順

次の記事では、今回Developer Portal上で作成したアプリケーションをUnity上で扱えるように設定します！


### ②EOSとUnityの接続
公式HPで紹介されているGitHubからEOSSDK用のパッケージをUnityにインストールします。




### ③EOSを応用したゲーム作り
Epic Online Servicesの機能を実際のゲームに活用していきます。
fly.ioリリースにて.envファイル内のAPIキーを適用させるには

普段はリリースコマンド打てば.envファイルに保存されているAPIキーが自動で適用されるのですが、何かしらの原因で適用されていなかった時の備忘録です。(開発OSはwindowsです)

# 結論
```powershell:powershell
flyctl secrets set APIの名前=APIキー
```
という感じで、`flyctl secrets set`の後にご自身の.envファイルに書いてある`APIの名前=APIキー`を打ち込めばオッケー
複数ある場合はスペースを空けて連続して打ち込むことも出来るようです。

# エラー
`Error No change detected to secrets. Skipping release`
と出た場合、公式ドキュメント等によると
>既にその名前のシークレットが存在し、変更が検出されなかったため、更新や変更は行われなかったことを示しています。

だそうです。
今登録されている環境変数を確認する方法として、
```powershell:powershell
flyctl secrets list
```
登録している環境変数を解除する方法として、
```powershell:powershell
flyctl secrets unset APIの名前=APIキー
```
等があるので是非活用してみてください！
# 参考
https://fly.io/docs/flyctl/secrets-set/
【Rails】論理削除を実装しているモデルに対しては destroy を呼べないようにしたい


モデルに👇のメソッド追加
```
  before_destroy :prevent_destroy
  def prevent_destroy
    raise "Destroy is not allowed for Article model. Because article model has a soft delete feature. Use discard function instead of destroy."
  end
```


物理削除しようとするとこうなる👇

```
irb(main):001:0> Article.destroy_all
/app/models/article.rb:31:in `prevent_destroy': Destroy is not allowed for Article model. Because article model has a soft delete feature. Use discard function instead of destroy. (RuntimeError)
```

これで安心😌
棚卸資産

# 棚卸資産
｢棚卸資産｣は言葉の中に含まれているとおり、```会社が所有する｢資産｣```です。
販売目的で仕入れた商品や製品等が、```販売されないまま社内に滞留している状態```を指します。

# 出典
https://biz.moneyforward.com/accounting/basic/19631/#i:~:text=%EF%BD%A2%E6%A3%9A%E5%8D%B8%E8%B3%87%E7%94%A3%EF%BD%A3%E3%81%AF%E8%A8%80%E8%91%89%E3%81%AE%E4%B8%AD%E3%81%AB%E5%90%AB%E3%81%BE%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%E3%81%A8%E3%81%8A%E3%82%8A%E3%80%81%E4%BC%9A%E7%A4%BE%E3%81%8C%E6%89%80%E6%9C%89%E3%81%99%E3%82%8B%EF%BD%A2%E8%B3%87%E7%94%A3%EF%BD%A3%E3%81%A7%E3%81%99%E3%80%82%E8%B2%A9%E5%A3%B2%E7%9B%AE%E7%9A%84%E3%81%A7%E4%BB%95%E5%85%A5%E3%82%8C%E3%81%9F%E5%95%86%E5%93%81%E3%82%84%E8%A3%BD%E5%93%81%E7%AD%89%E3%81%8C%E3%80%81%E8%B2%A9%E5%A3%B2%E3%81%95%E3%82%8C%E3%81%AA%E3%81%84%E3%81%BE%E3%81%BE%E7%A4%BE%E5%86%85%E3%81%AB%E6%BB%9E%E7%95%99%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E7%8A%B6%E6%85%8B%E3%82%92%E6%8C%87%E3%81%97%E3%81%BE%E3%81%99%E3%80%82

# 感想
知らないから勉強になった。
スプラトゥーン3のガチャシミュレーターを作ってみた

## はじめに

久しぶりにがっつり趣味でプログラムを書いてみました。

成果物はこちら
https://hiyoko3.github.io/splat-capsule-simulator/

## 背景

スプラトゥーン3内にあるガチャ機能でどうしても１等が出ず、シミュレーターで我慢しようとしていたのですが、探しても見つからなかったので作りました。
(ぱっとググっただけなのでちゃんと探せばあったかも)

## 設計
実際にガチャシミュレーターを作る上でロジックやデータ構造が複雑になりそうだったので事前に簡単な設計を行いました。

### 論理モデル設計
スプラのガチャを実装するためには以下の仕様を満たす必要があります。

- ガチャを引くとカプセルが出る(ex. 金銀銅赤青紫)
- カプセルの色によって排出するアイテムが決まる(ex. 期間限定、フードチケット、二つ名)
- アイテムの中にはさらに抽選が必要なものがある(ex. 二つ名であれば「激レアの」「天然記念物」と2つ出力される)

以上から、下記のような論理モデルを設計しました。
※ 時間をかければより洗練されたものにできるかと思いますが、そこまでのモチベはなかったのでひとまず仕様を満たせばOKというテンションです。

![splat-capsule-DB.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97131/17bc4312-391d-046a-b799-58d9243107e3.png)

- ガチャグループ: カプセルの中身になります。ここで期間限定プレートや二つ名と言ったマスターデータを持ちます。
- ガチャアイテム: 実際の出力するアイテムのマスターデータです。
- グループガチャアイテム: ガチャグループとガチャアイテムを紐付けるモデルです。カプセルの色でどのガチャアイテムを排出するかはこのモデルから算出します。

### ガチャシステム

#### 確率分布

[こちらのサイト参考](https://wikiwiki.jp/splatoon3mix/%E3%81%8F%E3%81%98%E5%BC%95%E3%81%8D)

#### カプセルの出力ロジック

これを参考に実装しました(というかこれで大体網羅できてた)。

https://qiita.com/41semicolon/items/9d4d200c14b09cb28fd9

```javascript
function gacha(config, rval) {
  let accum = 0;
  for (const item of config) {
    accum += item.prob;
    if (rval < accum) return { id: item.id };
  }
  throw new Error('should not reach here');
}
```

#### アイテムの出力ロジック

こちらは偏りのないランダム出力なので乱数を用いて値を決定します。

```javascript
const random = Math.floor(Math.random() * (max - min + 1)) + min;
return itemList[random];
```

## 実装

設計ができたので実際に作ってみます。

### 利用技術

- Vue 3
    - Vite
    - typescript

### アセットについて

基本的にCSVとSVG画像として管理しています。
元データは以下のページに配置しています。

[アセットマスターデータ配置場所](https://github.com/hiyoko3/splat-capsule-simulator/tree/develop/doc
)

#### 画像

途中までは draw.io を利用して作成していましたが、モチベが尽きた & あまりのデザインセンスの無さに絶望したので攻略サイトの画像URLをそのまま引用させてもらいました。

>[参考にした攻略サイトはこちらに記載してます](https://github.com/hiyoko3/splat-capsule-simulator/blob/develop/README.md)

#### 二つ名や各種オブジェクトのテキストなど

画像同様モチベがつき(ry
攻略サイトを参考にしています。

>[参考にした攻略サイトはこちらに記載してます(再掲)](https://github.com/hiyoko3/splat-capsule-simulator/blob/develop/README.md)

#### シミュレーター用のデータ(JSON)を作成

シミュレーターではJSON形式のデータを読み込むため、CSVにまとめたデータをJSON形式に変換する必要があります。
手作業で一つ一つ行うのは手間なのでJSONに変換するスクリプトを作りました。

[スクリプト配置場所](https://github.com/hiyoko3/splat-capsule-simulator/tree/develop/script
)

```shell
# 実行例
$ node script/CSV2Json.js 'CSVファイル' '任意のID'
```

### プログラム

スパゲティコードになったので割愛。
ソースコード見てください。

https://github.com/hiyoko3/splat-capsule-simulator

## 終わりに

制作時間は合計20時間ぐらいです。

久しぶりに頑張りました。楽しかったです :)