OmniAICreator/Qiita-1.07M huggingface dataset:
Linux bash リダイレクトを整理してみた

## 初めに

今までlinuxコマンドの実行結果をプログラムの中で一時ファイルなどに吐き出して
処理する際に誰かのコピペで何とかしてきたのですが、


https://book.impress.co.jp/books/1120101147

を読んでいてリダイレクト内容が明確になったのでメモとして書いておきたいと思います。

他の方も同じ内容の記事を書かれていますが、私の個人的なメモとして残したいと思います。

## リダイレクトとは
例えば lsコマンドの結果をファイルに保存したいとき
``` Shell
$ ls > outfile
```
のようにするとlsの実行結果をoutfileに保存することができますが少し深堀したいと思います。

## そもそもファイルディスクリプタとは
C言語とかでファイルに何かを書き込もうとするときファイルディスクリプタ(fd)というのを使用して書き込みます。
``` C
  int fd = open ("filename",O_RDWR);
```
みたいな形でファイルディスクリプタ取得して書き込みます。
ただファイルディスクリプタには３つの特殊なものがあります。
| fd | 内容|
|---|---|
| 0 | 標準入力|
| 1 | 標準出力<br>一般的に処理実行時の結果を表示|
| 2 | 標準エラー出力<br>一般的に処理を実行しようとしたときエラー・ワーニングなどが起きた時に内容が出力される|


## リダイレクトの一覧

|コマンド|内容|
|---|---|
| $ cmd 1> outfile      | cmdの標準出力の結果をoutfileに出力|
| $ cmd > outfile       | 同上 (標準出力１を省略） |
| $ cmd 2> outfile      | cmdの標準エラー出力をoutfileに出力|
| $ cmd 1>> outfile     | cmdの標準出力の結果をoutfileに出力（outfileに追記）|
| $ cmd >> outfile      | 同上 (標準出力１を省略）
| $ cmd 1> outfile 2>&1 | cmdの標準出力をoutfileに出力<br>標準エラー出力をfd1(outfile)に出力|
| $ cmd > outfile 2>&1  | 同上 (標準出力１を省略）|
| $ cmd 1>> outfile 2>&1| cmdの標準出力をoutfileに出力<br>標準エラー出力をfd1(outfile)に出力<br>(outfileに追記）|
| $ cmd >> outfile 2>&1 | 同上　（標準出力1を省略)|
| $ cmd 2> outfile 1>&2 | cmdの標準エラー出力をoutfileに出力<br>標準出力をfd2(outfile)に出力|
| $ cmd 2> outfile >&2  | 同上 (標準出力1を省略）|
| $ cmd 2>> outfile 1>&2| cmdの標準エラー出力をoutfileに出力<br>標準出力をfd2(outfile)に出力<br>(outfileに追記)|
| $ cmd 2>> outfile >&2 | 同上 (標準出力1を省略）|
| $ cmd &> outfile      | cmdの標準出力、標準エラー出力をoutfileに出力 |
| $ cmd &>> outfile     | 同上 (outfileに追記）|

## まとめ
webなどで見かけるのは標準出力１を省略しているパターンが多くこれをこれを知らないと意味不明な呪文のようになって混乱していました。
上の表のように順に書いたら多少は整理できたかと思います。
VSCode環境構築備忘録(Python+GithubCopilot+etc)

## 事前準備
- Python
- VSCode

## VSCode: プラグインのインストール
Extensionsから以下をインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283079/26eb2c8e-a62a-ba47-c841-31eba3dd5445.png)

- Python (ID: ms-python.python)
- Ruff (ID: charliermarsh.ruff)
- Mypy Type Checker (ID: ms-python.mypy-type-checker)
- Remote Development (ID: ms-vscode-remote.vscode-remote-extensionpack)
- Git History (ID: donjayamanne.githistory)
- Github Copilot (ID: ms-vscode-remote.vscode-remote-extensionpack)
    - ログインが必要

## VSCode: Python周りの設定
検索窓(ctrl+shift+p)から設定(Preferences: Open Settings (UI))を開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283079/51419324-e89e-44ce-0f54-029d5814f37f.png)

以下の設定を行う
- Editor: Format On Save -> True
- Editor: Default Formatter -> Ruff
    - フィルターに「@lang:python defaultFormatter」と入れることで、Pythonファイルの場合のみ適用することができる
- Files: insertFinalNewline -> True
- Mypy-type-checker: Args -> --config=pyproject.toml
- terminal.integrated.env.windows へ以下の設定を記述する

```json
"terminal.integrated.env.windows": {
    "PSExecutionPolicyPreference": "RemoteSigned"
}
```

## Python: pyproject.toml
プロジェクトフォルダのルートにpyproject.tomlを配置し、以下の設定を記述する。
※プロジェクト方針があるならそれに従う。

```toml: pyproject.toml
[tool.ruff]
select = ["F", "B", "I", "E", "W"]
ignore = []
fixable = ["ALL"]
line-length = 119
indent-width = 4
target-version = "py312"

[tool.ruff.lint.mccabe]
max-complexity = 5

[tool.ruff.isort]
force-single-line = true

[tool.ruff.format]
quote-style = "double"
indent-style = "space"
skip-magic-trailing-comma = false
line-ending = "auto"

[tool.mypy]
ignore_missing_imports = true # 未解決インポートを無視する
# Disallow dynamic typing
disallow_any_unimported = true # 未解決の型を禁止
disallow_any_expr = true       # 型のない式を禁止
disallow_any_decorated = true  # 型のないデコレータを禁止
disallow_any_explicit = true   # 型のない明示的な型アノテーションを禁止
disallow_any_generics = true   # 型のないジェネリックを禁止
# Untyped definitions and calls
disallow_untyped_calls = true      # 型定義のない関数の呼び出しを禁止
disallow_untyped_defs = true       # 型定義のない関数の定義を禁止
check_untyped_defs = true          # 型定義のない関数の定義をチェック
disallow_untyped_decorators = true # 型定義のないデコレータを禁止
# Configuring warnings
warn_redundant_casts = true # 冗長なキャストを警告
warn_unused_ignores = true  # 未使用の型アノテーションを警告
warn_return_any = true      # 戻り値の型がAnyであることを警告
warn_unreachable = true     # 到達不能コードを警告
# Miscellaneous strictness flags
strict_equality = true # 厳密な等価性を有効にする

```
[Excel] セルに関数の数式がそのまま表示される

# 数式がそのまま表示された
関数の数式がセルにそのまま表示された。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3550683/ae322e22-c5a0-053b-0063-5637f367f222.png)


# 原因
こうなる原因は3つくらいあるようだ。
> 参考URL：[数式がそのまま表示される原因](https://helpforest.com/excel/fx_formula/ex060018.htm)
>

▼今回は、<mark>書式設定が「文字列」になっていたことが原因</mark>だった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3550683/0a4a3348-a6b7-a657-59c7-d1a3fed04abd.png)
文系SEがVMware、vSphere、vCenterについてまとめてみた

こんにちは！

今回は、VMwareについてまとめました。
エンジニアをしていると検証環境の構築のために、仮想環境を準備することが多々あると思います。

本記事では、VMware関連の用語についてまとめてみました。
現場でよく耳にするVMwareってなんぞやといった際の参考になればと思います。



# VMwareとは
VMwareは企業名です。
正式名称はVMware, Inc

本拠地はアメリカで、日本にも、東京都港区と大阪府北区に２拠点、存在しています！

:::note info
**ポイント**
世間的には**VMware**といった単語があたかも仮想構築ソフトのように呼ばれていますが、正式には異なります。
:::

# vSphereとは
vSphere は VMware, Incが提供する仮想化プラットフォームです！
vSphereを使えば、可用性に優れた仮想化環境を比較的簡単に構築することができます！
主なコンポーネントとしてESXiやvCenterなどが挙げられます！

:::note info
**イメージ参考**
後述するESXiやvCenterなどを動かすための基盤的なイメージ
vCenterで複数サーバを管理する場合、管理者が定期的にサーバ状態を確認する必要がある。
管理者がVMware vCenter Serverにアクセスし操作する際に使うGUIベースのインターフェイスがvSphere Client。

:::


## ESXiとは
ESXiとはVMware, Incが提供している、ハイパーバイザーです!
仮想化の土台となる部分で、1台の装置に何台もの仮想マシンを立てることができます！
その為、物理サーバと比べてコストと場所を節約できます！
また、その他のメリットとして、仮想マシンのCPUやメモリ、ディスク等の構成を簡単に設定・変更することができます！

:::note info
**ポイント**
よく耳にする仮想ソフトではMicrosoftの**Hyper-V**などがあります。
ざっくりイメージで考えれば、自分の持ってるPCの中に仮想環境を構築する際に動くやつってイメージ
:::

# vCenterとは
vCenterは、VMware, Incが提供している仮想化管理サーバです！
複数のESXiで作成した仮想マシンをvCenter上で運用・管理することができる為、運用負荷を軽減できるというメリットがあります！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596363/2f8c6de4-9b93-f53d-b029-bc48b0316255.png)


複数のサーバーに、同じ内容の作業を一括で適用したり、仮想マシンを別のサーバーに移動したりすることが可能です。

それだけでなくvCenterがあると、vSphere HA やDRS、vMotionという機能を使うことができます！

::: note info
**補足：vSphere HA**
サービスが急に使えなくなったりする可能性を下げて、安定した状態に素早く戻す仕組み
ESXiに何か障害が起きてダウンした場合に、そこで稼働していた仮想マシンを、別のESXiに移動させてダウンタイムを少なくする事ができる
:::

::: note info
**補足：DRS**
クラスタ間の負荷分散を自動的に行う
あるESXiサーバの負荷が高まった際に、仮想マシンをリソースに余裕がある別のESXiサーバへ自動的に移動させる機能。これにより、ESXiサーバのリソースを効率よく活用でき、パフォーマンスの低下を防止することができます！

**注意事項**
自分が意図してないサーバに移動してしまったりなど少し複雑な部分もある
:::

::: note info
**補足：vMotion**
物理サーバのメンテナンスなど計画的に物理サーバを停止する必要がある場合に使用する移行機能
:::

::: note warn
**vSphere HA とvMotionの比較**

vSphere HA:
機能としては常に有効にしておき、いざ物理サーバに障害が起きた際に自動で保護してくれる復旧の仕組み

vMotion:
計画的に物理サーバを停止する必要がある場合に使用する移行機能
:::
# まとめ

ハイパーバイザーである「ESXi」上で仮想マシンが動作し、
仮想化管理の役割を担う「vCenter Server」はESXi上のリソースを一元管理・運用し、
これらをひとまとめにしたプラットフォームを「vSphere」と呼ぶ！
AWS で利用可能な Amazon の提供する IPv6 の料金について

# 疑問

AWS の VPC では Amazon の提供する IPv6 プールを利用することができる。
IPv4 については 1EIP あたり $0.005 / hour となっているが、IPv6 の料金についてはドキュメント上でその料金が無料であることを確認できなかった。

おそらく無料だとは思うが、このことはどこに記載されているのだろうか？


# 暫定回答

公式ドキュメントが見つかればそちらを記載する。

- 自身の AWS アカウントで VPC に Amazon の提供する IPv6 を割り当てたが課金されなかったためおそらく無料
- [AWS re:post での回答](https://repost.aws/questions/QUCO6dPYWdS_C5KRGq0L4oow/does-aws-charge-for-ipv6-address) で AWS ブログ内に無料である旨 (no additional charge) が記載されている

> IPv6-only subnets and EC2 instances are available in all AWS commercial and AWS GovCloud (US) regions at **no additional charge**.
> https://aws.amazon.com/about-aws/whats-new/2021/11/amazon-virtual-private-cloud-ipv6-subnets-ec2-instances/ から引用
第四回: WEBサイトはなぜ速いのか

こんにちは、[株式会社カスタマトリックス](https://www.customatrix.co.jp/)の寺尾です。

こちらは **新卒社員と学ぶWEBプログラミング** 企画になります。
可能な限り毎日更新していくのでご期待ください。

本日は第四回、「**WEBサイトはなぜ速いのか**」を説明していきます。
普段私たちは世界中のWEBサイトを利用していますよね。しかし、読み込みの遅さにストレスを感じる事は通信環境以外ではあまりないかと思います。

前回はこちら
https://qiita.com/r-terao/items/24db8c8bb75e518bb0f7

第一回はこちら
https://qiita.com/r-terao/items/e6237c4dc59db9e96ec6

# 前回のあらすじ
前回学んだ事は覚えていますでしょうか？

- IPアドレスに色々な情報を足す事でどこのサーバのどのファイルを必要としているのかが明確になる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2273193/1b909096-01e4-6608-6f62-0b4335bdab91.png)

# 引き続き間に横たわる距離
前回どんなに離れていてもどこにあるか分からなくても、サーバを特定してアクセスする事が可能な事を学べましたが、とはいえ結局データが地球の裏側にあったら物理的にアクセスに時間がかかる事に変わりはありません。

これを解決する画期的な仕組みがWEBには存在します。

# データのキャッシュ
**キャッシュ**という言葉を聞いた事はあるでしょうか？
現金ではなく、一時保存データの事を指します。

一度受け取ったサイトの情報をクライアントに一時的に保存する事で、一定期間の内はわざわざサーバにリクエストをせずともサイトを表示する事ができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2273193/73ac3694-1237-9502-9ac6-3549a3984e89.png)

# CDN
クライアント側での高速化の工夫としてキャッシュを紹介しましたが、結局最初のアクセスには時間がかかる事は変わりありません。

これを解決するためのサーバ側の工夫が **CDN（コンテンツデリバリネットワーク）** の利用です。

CDNというのは世界中あちこちに設置されているキャッシュサーバにWEBサイトのデータをコピーし、ユーザに一番近いキャッシュサーバが元サーバ（オリジンサーバ）の代わりにWEBサイトを届ける仕組みです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2273193/6a5d7832-7284-36fa-538f-e03f9de99292.png)

この「ユーザに近いキャッシュサーバ」を **エッジ** 、エッジを利用した技術を **エッジコンピューティング** と呼びます。

ユーザのアクセスに対して自動的にエッジを判断し適切にアクセス先のサーバを振り分ける事がCDNの最大の仕事になります。

このようにデータを分散する事で、高速化だけでなくデータの喪失やサーバの処理落ちを防ぐ事もでき、非常に効果的にWEBサイトを運用できるようになります。

# サイトデータの小型化
そもそも送受信するデータが小さければWEBサイトの速度は当然速くなります。
これを成し遂げるための工夫をいくつか紹介します。

- 遅延ロード（Lazy Load）
    今すぐ必要でない分は後からダウンロードする（例えば、文字だけ先に表示して画像は少し遅らす）
- SSR/SSG
    重たいJavaScriptの処理はサーバで可能な限り終わらせて、軽いHTML/CSSのみ返却する
- Minify/TreeShaking
    不要な改行や使っていない画像などを省いたり、変数名などを短くしたり、様々な工夫でコードを壊す事なくファイルを小さくする

# まとめ
- なるべく毎回データを取りに行かなくて済むようにクライアント側で一時的にコピーを保存する
- 遠くへアクセスせずに済むように、物理的に近くのサーバに予めコピーを入れておく
- そもそもWEBサイトのファイルを小さくする事で通信量を減らす

様々な工夫でWEBサイトは高速にユーザの手元に届くわけです。

さて、ここまでWEBサイトの基盤知識三部作をお届けしました。
英語の名称も多くあり、一度で覚えきる事はきっと難しいでしょう。
しかし、第一回でも書いた通りこの企画は **単語を知る・覚える・学ぶ** を目的としています。
まずは「CDN」と聞いたときに **なんかどこかで見たことあるぞ！** と思えるようになる事が大事です。一発で「コンテンツデリバリネットワーク」と言えなくてもあきらめる必要はありません。この記事でも他の方の開設でも読めば思い出せるのでそれで良いのです。

次回はついにプログラミング言語に触れて実践的な内容をやっていこうと思います。

# おまけ
株式会社カスタマトリックスはエンジニアを募集しています！
完全未経験でも可！

- 新卒の方
https://www.customatrix.co.jp/newgrads/index.html

- 中途の方
https://customatrix.co.jp/career/index.html

https://www.instagram.com/cmx_pr/
Module not found: Can't resolve 'react-redux' in 'xxx/yyy/zzz/src'と出てきたときの対処法

<h1>初めに</h1>
Reactを使用してサンプルプログラムを作っていざ動かそうとしたときにエラーが出てしまい
せっかく作ったプログラムが動かない。

そんな経験エンジニアなら一度や二度ならずとも経験していると思う。

そこでこの記事ではodule not found:Can't resolve 'react-redux' in　＊＊＊
が出てきたときの対処法について書きたいと思う。

#<h1>対処法</h1>
./src/index.js
Module not found: Can't resolve 'react-redux' in 'xxxx/yyyy/react/memo/src'

こんなエラーが出てきてしまい、動かない。
そんなときはズバリ下記コマンドを実行してほしい

```
$ npm i -S redux
# OR
$ yarn add redux
```

```
$ npm i -S react-redux
# OR
$ yarn add react-redux
```


これであなたのプログラムも息を吹き返すのでは。

では、また次回の記事で
Web アプリに自作マップを導入するには？：Part1 ライブラリ編

## はじめに

[神ゲー攻略](https://kamigame.jp/)でエンジニアをやっている yoko です。神ゲー攻略ではゲームの攻略で使える便利なツールを日々開発しています。特に最近は以下のようなマップサービスの開発を進めています。

- 日本版： https://kamigame.jp/map/
- 英語版： https://gmtreks.com/

今回はこのマップサービスを開発する中で溜まった知見を紹介できればと思います。
Part1 はマップライブラリ紹介編です。



## 前提

一般公開されている GeoJSON などを使って地図を作るのではなく、自分でゼロからマップを作るという前提で進めます。

## マップライブラリについて

代表的なマップライブラリのトレンドは以下です。

![スクリーンショット 2024-08-22 14.58.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558421/8ae484ab-2b11-13a2-7aa4-d4561664723f.png)

leaflet と mapbox-gl が人気であることがわかります。
今回はこの2つと mapbox-gl の OSS 版である maplibre-gl について見ていきます。

### Leaflet
https://leafletjs.com/

HTML をベースにマップを構築するライブラリで、学習コストが低くシンプルに始めることができます。


#### メリット
- HTML/CSS でマップを構築できるので基本的な Web の知識があれば学習コストは小さい
- マップに必要な機能は網羅されている

#### デメリット
- マーカーも HTML で描画するのでマーカーの数が多いとブラウザが重くなる
- HTML で作ったマーカーを Canvas で描画するのが難しい
  - [leaflet-markers-canvas](https://github.com/francoisromain/leaflet-markers-canvas) というライブラリはあるが、マーカーの画質が悪くなる
  - GeoJSON を作ってから Canvas に描画するのはありかも？
- タッチパッドでのズームがスムーズに行われない（飛び飛びにズームする）
  - https://github.com/Leaflet/Leaflet/issues/4410 
  - https://github.com/Leaflet/Leaflet/issues/7476


### Mapbox

https://www.mapbox.com/

有料のマップライブラリ。Mapbox 中心となって仕様を定めた[ベクトルタイル](https://docs.mapbox.com/ja/data/tilesets/guides/vector-tiles-introduction/)を使って WebGL で描画します。
元々は OSS でしたが、version 1.x から non-OSS となったため後述する MapLibre GL JS がフォークされて生まれました。

#### メリット
- 描画パフォーマンスが良い
  - WebGL & ベクトルタイル
- Search API　など MapLibre にはない機能を提供している
  - https://docs.mapbox.com/api/overview/
- [mapbox-studio](https://www.mapbox.com/mapbox-studio)というマップ編集ツールがある
- ドキュメントがわかりやすい
  - 特に描画パフォーマンスの改善はかなり参考になる
    - https://docs.mapbox.com/help/troubleshooting/mapbox-gl-js-performance/  

#### デメリット
- 学習コストが高い
  - マップスタイルの仕様: https://docs.mapbox.com/style-spec/guides/
  - パフォーマンスの考慮: https://docs.mapbox.com/help/troubleshooting/mapbox-gl-js-performance/  
- 従量課金 （無料枠はある）なので予算的に使えない可能性がある
  - https://www.mapbox.com/pricing#maps 


## MapLibre GL JS

https://maplibre.org/

前述の通り、Mapbox version 1.x をフォークした OSS。Mapbox と同じく WebGL で描画されるしベクトルタイルも使える。

#### メリット
- 描画パフォーマンスが良い
- 基本的に必要な機能は網羅されている

#### デメリット
- 学習コストが高い
  - マップスタイルの仕様: https://maplibre.org/maplibre-style-spec/
  - パフォーマンスの考慮
- Mapbox に比べて足りない機能がある

## ライブラリの選定

データが少なく描画パフォーマンスを気にしなくていい → Leaflet

大量のデータを扱う → MapLibre

MapLibre で満足できない → Mapbox


がいいんじゃないかなーと思います
ラズパイでSPI接続LCDを使う


# 使用したディスプレイ

amazonで2000円ちょっとで売ってるやつ

http://www.lcdwiki.com/3.5inch_SPI_Module_ILI9488_SKU%3AMSP3520

# 動作確認環境

Raspberry Pi 4

# 接続

| name | pin # | GPIO |
|-|-|-|
|VCC | 2 | - |
|GND | 20 | - |
|CS | 24 | 8 |
|RESET | 31 | 6 |
|DC/RS | 29 | 5 |
|SDI(MOSI) | 19 | 10 |
|SCK | 23 | 11 |
|LED | 22 | 25 |
|SDO(MISO) | 21 | 9 |

# 作成したもの
https://github.com/tyano463/msp3520

# 制限事項

タッチ操作は非対応

# 懸念点

文字列単体で表示すると、表示領域以外の色がくすむ

全体を一括で表示する必要があるのかもしれない

# その他

## 一般ユーザで実行してpermission deniedになる場合

SPIグループを作成する
```
sudo groupadd spi
```

一般ユーザをspiグループに追加する
```
sudo usermod -aG spi [username1]
sudo usermod -aG spi [username2]
...
# 触りたいユーザ分追加する
```

udevのルールを作成する

/etc/udev/rules.d/99-spi.rules
```
KERNEL=="spidev*", MODE="0660", GROUP="spi"
```

udevを再起動（若しくはマシンごと再起動)
```
sudo udevadm control --reload-rules
sudo udevadm trigger
```
無制限にSpotifyの音楽をMP3にダウンロードする方法

<p>Spotifyは、世界中で人気のある音楽ストリーミングサービスですが、楽曲をオフラインで楽しむためにはプレミアムプランへの加入が必要です。しかし、何とかしてSpotifyの音楽を無料でMP3にダウンロードし、無制限に楽しみたいと考える方も多いでしょう。この記事では、<a href="https://musicfab.ne.jp/how-to-convert-spotify-music-to-mp3" target="_blank">Spotifyの音楽をMP3にダウンロード</a>する方法を紹介します。</p>
<h4>無料でMP3に変換するためのツール</h4>
<p><a href="https://musicfab.ne.jp/best-spotify-converter-osusume" target="_blank">Spotifyの音楽をMP3に変換</a>するには、専用のソフトウェアが必要です。ここでは、無料で利用できる「Spotify ダウンローダー」というツールをおすすめします。このソフトは、Spotifyの楽曲を高音質のMP3形式に変換することが可能です。さらに、曲数や時間の制限がなく、好きなだけダウンロードできます。ダウンロード手順</p>
<ol>
<li>
<p><strong>ソフトのインストール</strong><br />まず、公式サイトからSpotify ダウンローダーをダウンロードし、インストールします。</p>
</li>
<li>
<p><strong>Spotifyの音楽を選択</strong><br />インストール後、Spotifyアプリを開き、ダウンロードしたい曲やプレイリストを選択します。</p>
</li>
<li>
<p><strong>リンクをコピー</strong><br />選択した曲やプレイリストのリンクをコピーします。</p>
</li>
<li>
<p><strong>ダウンローダーに貼り付け</strong><br />コピーしたリンクを<a href="https://musicfab.ne.jp/best-spotify-downloader" target="_blank">Spotify ダウンローダー</a>に貼り付け、「ダウンロード」ボタンをクリックします。</p>
</li>
<li><strong>変換とダウンロード</strong><br />ダウンロードボタンをクリックすると、ソフトが自動的にSpotifyの音楽をMP3形式に変換し、パソコンに保存します。変換が完了すると、無制限にMP3ファイルとして楽しむことができます。</li>
</ol>
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-[20px] text-message flex w-full flex-col items-end gap-2 break-words [.text-message+&amp;]:mt-5 overflow-x-auto whitespace-pre-wrap" dir="auto" data-message-author-role="assistant" data-message-id="941c5796-02cf-414c-a3fe-82deb3f4a564">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<h4 class="markdown prose w-full break-words dark:prose-invert light">利用上の注意点</h4>
<p>この方法で<a href="https://musicfab.ne.jp/how-to-download-spotify-music" target="_blank">Spotifyの音楽をダウンロードする</a>際には、以下の点に注意してください：</p>
<ul>
<li>
<p><strong>著作権に関する問題</strong><br />ダウンロードした音楽を個人の利用範囲で楽しむことは合法ですが、第三者に配布することや商業目的で利用することは法律で禁止されています。</p>
</li>
<li>
<p><strong>音質の低下</strong><br />無料のツールを使用する場合、音質が若干低下する可能性があります。音質にこだわる場合は、有料のプレミアムプランを検討するのも一つの方法です。</p>
</li>
</ul>
<h4>まとめ</h4>
<p>Spotifyの音楽を無制限にMP3にダウンロードすることができる「Spotify ダウンローダー」は、非常に便利なツールです。ただし、著作権に配慮し、ダウンロードした楽曲を個人利用に留めることを心がけましょう。この方法を使えば、お気に入りのSpotify音楽をどこでも自由に楽しむことができます。</p>
</div>
</div>
</div>
<div class="mt-1 flex gap-3 empty:hidden -ml-2"> </div>
「自分の意見」が分からない人へ

## 本の情報
**タイトル**
言葉にする習慣 思いがまとまる・伝わる「言語化力」の身につけ方

**著者**
さわらぎ 寛子

## 本の内容
世の中に どうやって自分の思いを伝えるか=書き方や伝え方 を著した本は多くあるが、そもそも自分の思いが何なのか / 自分の思いが言葉になっていない という人が多い。
「どう伝えるか」を考える前に、「自分の思いを知る」「自分の思いを言葉にする」段階が必要となる。

* 自分の思いを知る
思いを知るには、思いをどんどん体から出していく必要がある。
例えば、面白いと思ったときに、どの要素に対してその気持ちを抱いたのか、なぜその気持ちを抱くに至ったのかを考えてみると自分の言葉が出てくる。
→「面白い」という大きな袋から、どんなボール(要素)が入っているかを取り出し、自分の思いに近いものを選ぶイメージ
気持ちに限らず、物事を観察して鮮明に捉えられるようになると、「自分の言葉」で考えることができるようになる。

* 自分の思いを言葉にする
思いを言葉にするには、相手に伝わることを考える必要がある。
「相手が一番知りたいことは何か」を念頭に置いて、伝えたいことに根拠や具体的な行動を加えたり、似た言葉でもニュアンスに注意して最も適切な言葉を選択したりしていく。

小さなことに気付けることが仕事でもプライベートでもうまく行くことにつながる。
突然何か大きなことが起こるということはなく、小さなことから繰り返し自分の言葉で考えていくことで、少しずつ大きなことに近づいていくしかない。
自分の言葉を使い、主語を自分にして考えることで、自分の生活をよくしていくことができる。

## ためになった点
* 「要するに」より「何が一番」
なにか伝えるときは自分の中で考えた結果なので、「要するに」を伝えなければいけないというイメージがあった。
もちろん状況によって「要するに」が求められる場面もあるだろうが、「何が一番」という考え方自体が自分になかったので、新鮮味があった。
これなら思いや考えを言葉にしやすくなると感じたので、この考え方は意識するようにしたい。

* まとめは最後にすること
「まとめる前に広げることを恐れてはならない」という記述があった。
これを読んで、まとめにたどり着くことだけを考えた結果、必要な要素を見落として不十分なまとめになることが多いと感じた。
安易なゴールを求めず、「広げる」作業を行うことを心がけたい。


## まとめ
思考力に関する本を読む中で「思考力を高めるには、考えを言葉にし続ける」必要があると分かりました。
そこでこの本を手に取ったのですが、「自分の思いを知る」の部分が、概念としても具体的な行動としても大きなヒントになったように思います。
常に思考力や論理が求められる仕事に限らず、日常を言葉にできるようにしていきたいと思います。
【SQL】どのテーブルに該当カラムがあるか検索したい

## はじめに
業務でMySQLを利用しているのですが、使用したいカラムがどのテーブルにあるのか見つけるのが大変なときがありました。
片っ端から膨大な数のテーブルの中身を確認するのもかなり手間だったため、クエリでできないか調べ、まさにこれ！というものを見つけたので備忘録として残そうと思います。

## 該当カラムがあるテーブルを検索するクエリ
検索できるクエリは以下です。

```sql
select table_name, column_name from information_schema.columns where column_name = '検索対象カラム名';
```

これで実行すると、該当カラム名と併せてテーブル名が結果として表示されます。
知らないカラムや使用頻度が低いカラムだとどのテーブルにあるのかわからなくなってしまうので、これから重宝しようと思います。
**※上記のクエリだと全テーブルを検索することになるので、検索を短縮するためにもデータベースを指定するなどしたほうがよさそうです。**

## 最後に
今回は、MySQLで該当カラムがあるテーブルを検索するクエリをご紹介いたしました。
"**information_schema**"がかなり便利なようなので、詳しく調べて活用しようと思っています。

最後までお読みいただき、ありがとうございました:sun_with_face:
cloudRunはリビジョンアクションでトラフィックを変更すると最新にならない

## 概要
cloudRun>リビジョンタブ>該当のリビジョン>トラフィックを管理
からトラフィックの管理をすると
次にデプロイした**最新のリビジョンが100％のトラフィックにならない**

## 理由
cloudRunは前回の設定を保持するため

## 対応
サービスの詳細の横にある[新しいリビジョンの編集とデプロイ]　> セキュリティタブ　> このリビジョンをすぐに利用するのチェックが外れている（defaultではチェック状態のはず）のでを入れる

これによって次のデプロイからの最新のリビジョンに100％のトラフィックが流れると思います。

## 参考

https://qiita.com/z_ohnami/items/1bd29f2d81b53a92d03f

https://syossan.hateblo.jp/entry/2020/05/11/130124
RubyXLでExcelファイルを読み取る時ハマったこと

# TL;DR

```rb
workbook = RubyXL::Parser.parse_buffer(buffer)
workbook.stream
```

上記コードは`Stream`とか書いていますが、巨大TEXTファイルを読み取る時みたいに、一行ずつ読んで性能アップすることはないので、かえって遅くなります。
こちらのメソッドは単にWebサーバーに送信されたExcelファイルを、ファイルハンドラーのままで処理可能にして、明示的に一時ファイルを保存しなくて済むように作られています。

オーソドックスな`workbook = RubyXL::Parser.parse("path/to/Excel/file.xlsx")`の方が断然早いですが、そもそもRubyXLやPythonのOpenPyXLのようなサードパーティーモジュールは巨大Excelファイルに不向きです。

巨大Excelファイルをプログラム的に処理するには、現段階Excelの中にVBAを書くしかないと思います。

# 実験
## 巨大Excelの作成

```rb
require 'benchmark'
require 'rubyXL'

file_path = 'test.xlsx'

# Create a test file
COL_SIZE = 50
ROW_SIZE = 5000

def init_xlsx(col_num, row_num)
  workbook = RubyXL::Workbook.new
  sheet = workbook[0]
  add_cells(sheet, row_num, col_num)

  workbook
end

def add_cells(sheet, col_num, row_num)
  (0...row_num).each_with_index do |row, i|
    sheet.add_cell(row, 0, i)
    (1...col_num).each_with_index do |col, j|
      sheet.add_cell(row, col, "#{i}:#{j}")
    end
  end
end

Benchmark.bm do |x|
  x.report("Create Xlsx:") do
    workbook = init_xlsx(COL_SIZE, ROW_SIZE)
    workbook.write(file_path)

    puts "#{COL_SIZE}*#{ROW_SIZE}"
  end
end
```

### Benchmark
```
       user     system      total        real
Create Xlsx:50*5000
  4.297000   0.032000   4.329000 (  6.334323)
```

実は上記50列*5000行のExcelはたっだの1.3MBしかなくて、Excelファイル的にぜんぜん「巨大」とは言えないです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87438/d61bfc00-8faa-0d84-0265-64cd0106b917.png)

## Batch
```rb
file_path = 'test.xlsx'

Benchmark.bm do |x|
  x.report("Batch: ") do
    workbook = RubyXL::Parser.parse(file_path)
    p workbook[0][0][1].value
    p workbook[0][20][10].value
  end
end
```

### Benchmark
```
       user     system      total        real
Batch: "0:0"
"20:9"
  8.500000   0.140000   8.640000 ( 13.540754)
```

## Stream
```rb
file_path = 'test.xlsx'

Benchmark.bm do |x|
  x.report("Stream: ") do
    f = File.open(file_path)
    workbook = RubyXL::Parser.parse_buffer(f)
    workbook.stream
    p workbook[0][0][1].value
    p workbook[0][20][10].value
  end
end
```

### Benchmark
```
       user     system      total        real
Stream: "0:0"
"20:9"
 13.797000   0.125000  13.922000 ( 21.485774)
```

# 考察
XLSXファイルは、ZIPで固めたXMLファイル(群)である。
ZIPにせよ、XMLにせよStreamで処理できるような単純な構造ではないため、この結果も納得できます。

そもそも[RubyXL](https://github.com/weshatheleopard/rubyXL/blob/master/lib/rubyXL/parser.rb)の`parse_buffer`メソッドは、[RubyZip](https://www.rubydoc.info/gems/rubyzip/1.2.1/Zip%2FFile.open_buffer)の`Zip::File.open_buffer`から来たものなので、本家でも「一時ファイルを保存せず、処理したい時使ってね」としか言ってなくて、勝手にStream的な処理ができて、性能アップできるぞと過大解釈した自分が悪かったです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87438/4f984dd5-be0b-20e5-4688-7d86f906b089.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87438/605bbd31-2752-8e2b-7d73-26fd53d4bce8.png)


# 参考

- [RubyXL I/O](https://github.com/weshatheleopard/rubyXL/tree/master?tab=readme-ov-file#label-I-2FO)
Seleniumで引っかかったことを解決する

## 構築時の環境
Selenium4.0.0, java8, Maven 
Mavenビルドまで成功
## 引っかかったエラー
AppTest.java実行時にエラーが発生した。
```
%ERROR  2,testGoogleSearch(com.example.AppTest)
%TRACES 
org.openqa.selenium.remote.http.ConnectionFailedException: Unable to establish websocket connection to (以下略)
```
## 試したこと
- WebDriver起動時のエラーをデバッグログを出すことで探索すると以下の記述で止まっていた
```
[1724305784.821][DEBUG]: DevTools WebSocket Event: Target.detachedFromTarget (session_id=) browser {
   "sessionId": "(略)",
   "targetId": "(略)"
}
```
- 何らかの理由で接続が切れているが、原因が分からないまま
## 最終的な解決
Seleniumが最新ではないと気づきバージョンアップ
-> Seleniumがjava11でコンパイルされているので、java8ランタイムでは実行できないから11にしないといけない、というエラーが出る(55.0=java11, 52.0=java8)
```
java.lang.UnsupportedClassVersionError: org/openqa/selenium/WebDriver has been compiled by a more recent version of the Java Runtime (class file version 55.0), this version of the Java Runtime only recognizes class file versions up to 52.0
```
-> java8から11にバージョンアップ
-> テストケースが通った
## まとめ
Seleniumへの理解がまだまだ足りていないと思いました。javaとSeleniumのバージョン関係にも注意してみると、構築でうまくいったのに実施が出来ず詰まることは無くなると思います。本記事は取り急ぎアウトプットで忘れないために書いたので、今後もっと具体的なお話が出来ればと思います。
【VSCode】 覚えておきたい！　おすすめショートカットキー

こんにちは！
1年目の小川です。

今回はVSCodeのショートカットキーについてまとめていきたいと思います。

# こんな人に読んでほしい！
* VSCodeをこれから使う人
* VSCodeを使い始めた人
* すでに使用していて作業効率を上げたい人

# コマンドの紹介

 | コマンド | ボタン | 
 | ------ | ------ | 
 | ^ | Ctrl | 
 | ⌘ | command | 

# 用語解説
以下では、用語だけでは分かりにくいものも出てくると思うので、どのような操作なのかを解説します。

 | 用語 | 意味 | 
 | ----- | ----- | 
 | クイックオープンウィンドウ　| ファイルを検索できる画面上部に出てくる検索バーのこと | 
 | コマンドぱレッド | コマンドやショートカットキーを調べられる検索バーのこと | 
 

# ファイルの操作

| 操作内容 | Windows | Mac | 
| ------ | ------ | ------ |
| 新規ファイル | ^ + N | ⌘ + N | 
| ファイルを開く | ^ + O | ⌘ + O | 
| ファイルを保存 | ^ + S | ⌘ + S | 
| ファイルを閉じる | ^ + W | ⌘ + W | 
| タブを切り替える  | ^ + shift + [ または } | ⌘ + shift + [ または ] |
| Explorer(フォルダやファイルの一覧)を開く | ^ + shift + E | ⌘ + shift + E | 
| クイックオープンウィンドウを開く | ^ + P | ⌘ + P | 
| コマンドぱレッドを開く　 | ^ + shift + P | ⌘ + shift + P | 
| エディタを分割 | ^ + \ | ⌘ + \ | 
| エディタ間の移動 | ^ + 1 | ⌘ + 1 | 
| サイドバーの開閉 | ^ + B | ⌘ + B | 
 

# 編集操作

 | 操作内容 | Windows | Mac | 
 | ------ | ------ | ------ | 
 | コードの自動整形 | Shift + Alt + F | Shift + Option + F | 
 | 行の削除 | ^ + Shift + K | ⌘ + Shift + K | 
 | 行を複製 | Alt + Shift + Down | Option + Shift + Down | 
 | 行の先頭へ移動 | Home | ⌘ + ← | 
 | 行の末尾へ移動 | End | ⌘ + → | 
 | 全体の先頭へ移動 | ^ + Home | ⌘ + ↑ | 
 | 全体の末尾に移動 | ^ + End | ⌘ + ↓ | 
 | 選択範囲をコメントアウト | ^ + / | ⌘ + / | 
 | ファイル内の文字検索 | ^ + F | ⌘ + F |  
 | ファイル内の文字の置換 | ^ + H | ⌘ + Option + F | 
 
# 最後に
今回は、VSCodeのショートカットキーをまとめてきました。
特によく使うものを記載しています。
ぜひ、活用してみてください！
ここまで読んでいただきありがとうございました！！
neovimのinsertモードでカーソルが細くなってしまう問題への対処法

## 現象

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3718390/52a2d42f-a202-11a9-c2f2-5ee89565d0d9.png)
こんな感じでカーソルが細くなるのが嫌だったのでカーソルを太くする方法を探した。
意外と検索に引っかかりにくかったので忘備録代わりに書いておく。

---

## 解決策

init.vimに以下を追加

```vim
set guicursor=a:block "fix insert mode cursor is bar
```

カーソルが太くなった!!
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3718390/f95ad92d-b334-6a1e-1b0d-211ab335c827.png)
JavaとPHPの文法の違い

## はじめに
JavaとPHPは、どちらも広く使われているプログラミング言語ですが、その文法には多くの違いがあります。本記事では、JavaとPHPの基本的な文法の違いを中心に解説します。これから両言語を学ぶ方や、どちらか一方の言語に慣れている方に役立つ内容となっています。

## 1. 変数の宣言と型指定

### Java
Javaでは、変数を宣言する際に必ずデータ型を指定します。これは、Javaが静的型付け言語であるためです。

```java
int num = 10;
String text = "Hello, World!";
```

### PHP
一方、PHPでは変数にデータ型を明示的に指定する必要はありません。PHPは動的型付け言語であり、変数の型は実行時に決定されます。

```php
$num = 10;
$text = "Hello, World!";
```

## 2. クラスとオブジェクトの定義

### Java
Javaは純粋なオブジェクト指向言語であり、すべてのコードはクラスの中に配置されます。以下は、クラスとオブジェクトの基本的な定義です。

```java
class Animal {
    String name;

    void speak() {
        System.out.println("Animal speaks");
    }
}

public class Main {
    public static void main(String[] args) {
        Animal dog = new Animal();
        dog.name = "Dog";
        dog.speak();
    }
}
```

### PHP
PHPはオブジェクト指向をサポートしていますが、必須ではありません。以下は、PHPでのクラスとオブジェクトの定義例です。

```php
class Animal {
    public $name;

    public function speak() {
        echo "Animal speaks";
    }
}

$dog = new Animal();
$dog->name = "Dog";
$dog->speak();
```

## 3. 配列の扱い

### Java
Javaでは、配列は固定サイズであり、そのサイズは宣言時に指定する必要があります。また、配列の型も宣言時に指定します。

```java
int[] numbers = new int[5];
numbers[0] = 1;
numbers[1] = 2;
```

### PHP
PHPの配列は柔軟性があり、サイズは動的に変化します。配列には異なる型の値を混在させることができます。

```php
$numbers = array(1, 2, 3);
$numbers[] = 4;
```

## 4. ループ構文

### Java
Javaのループ構文は標準的で、`for`、`while`、`do-while`が用意されています。

```java
for (int i = 0; i < 5; i++) {
    System.out.println(i);
}

int i = 0;
while (i < 5) {
    System.out.println(i);
    i++;
}
```

### PHP
PHPも同様に`for`、`while`、`do-while`のループ構文をサポートしています。

```php
for ($i = 0; $i < 5; $i++) {
    echo $i;
}

$i = 0;
while ($i < 5) {
    echo $i;
    $i++;
}
```

## 5. 関数の定義

### Java
Javaでは、関数はメソッドとしてクラス内に定義されます。関数は明確な戻り値の型を持つ必要があります。

```java
public class Main {
    public static void main(String[] args) {
        System.out.println(add(5, 3));
    }

    public static int add(int a, int b) {
        return a + b;
    }
}
```

### PHP
PHPでは、関数はクラス内でも外でも定義できます。戻り値の型指定はオプションです。

```php
function add($a, $b) {
    return $a + $b;
}

echo add(5, 3);
```

## まとめ
JavaとPHPの文法にはいくつかの顕著な違いがあります。Javaは厳格な型付けとオブジェクト指向を重視しているのに対し、PHPは柔軟性と簡易さを重視しています。どちらの言語にもそれぞれの強みがあり、プロジェクトや目的に応じて適切な言語を選ぶことが重要です。
React + SpringBoot でアプリを作成してみた【Daily Devotional App】

## 1.プロジェクトを作成する

公式：[spring initializr](https://start.spring.io/)

① ブラウザを開き、(https://start.spring.io/) を入力し、開く
② 下記を入力し、Dependenciesで下記を選択し、『GENERATE』ボタンを押す

- Project: Maven
- Language: Java
- SpringBoot: 3.1.1
- jar
- 17

- Group: com.example
- Artifact: springboot_3_daily_devotional
- Name : springboot_3_daily_devotional
- Description: Demo projects for Spring Boot
- Package name: com.example.springboot_3_daily_devotional

Dependencies

- Spring Boot DevTools
- Lombok
- Spring Web
- H2 Database
- Spring Data JPA

## 2.基本的なデータベースをセットアップする

(1)application.propertiesを編集する

(2)resources/data.sqlを作成する

(3)resources/schema.sqlを作成する


## 3.パッケージの設定する

(1)src/main/java/com/example/springboot_3_daily_devotionalにmodelパッケージと
Devotinal.javaを作成する

(2)src/main/java/com/example/springboot_3_daily_devotionalにrepositoriesパッケージとDevotinalRepository.javaを作成する

(3)src/main/java/com/example/springboot_3_daily_devotionalにservicesパッケージとDevotionalService.javaを作成する

(4)src/main/java/com/example/springboot_3_daily_devotionalにcontrollersパッケージとDevotionalController.javaを作成する

## 4.プロジェクトを生成する

(1)Vite.js を使用する

```
$ cd src/main
$ npm create vite@latest
cd frontend 
npm install
```
(2)frontend/srcにAppRoot.jsxを作成する

(3)main.jsxを編集する

## 5.フロントエンドのプロキシの作成する

(1)vite.config.jsを編集する

## 6. Boostrapを使用する

(1)bootstrapをインストールする

```
npm install bootstrap --save
```

(2)index.cssを編集する


## 参考サイト
[Master React & Spring Boot with This Step-By-Step Daily Devotional App Tutorial!](https://www.youtube.com/watch?v=bHixqwfhIqM&t=1884s)
CarrierWaveでアップロードしたCSVファイルをダウンロードする備忘録

### はじめに
CarrierWaveを使用してアップロードしたcsvファイルをダウンロードする機能を実装したのでその備忘録として残そうと思います。

### コントローラーの実装

コントローラーのコードは下記の感じで書きます。


```ruby:hoges_controller.rb
def export_csv
    @hoge = Hoge.find(params[:id])

    if @hoge.csv_file.present?
      send_file @hoge.csv_file.path, type: @hoge.csv_file.content_type, disposition: 'attachment'
    end
  end

  private
  
 def hoge
    params.require(:hoge).permit(:csv_file)
  end

  ```


  #### send_fileメソッド
  クライアント(ファイルを要求しているユーザーのブラウザ)にファイルを送信
  ##### path: 送信するファイルのパス

  ##### type: @hoge.csv_file.content_type

 content_type はそのファイルの MIME タイプを取得するためのメソッド

  ##### deposition: 'attachment'
  ブラウザに対してファイルをダウンロードするよう指示


  ### あとは
  route.rbで export_csvメソッドを実行するパスを作成して、フロントエンドでクリックしてダウンロードできるようにすればOK


  ### 感想
  メソッドを覚えるだけでした。
  ありがとうございました！
AWS BuilderCards プレイ会をしました！

## AWS BuilderCards

AWS Builder Cardsをご存知ですか？
AWSサービスのカードを使って遊ぶカードゲームで、AWSのサービスやアーキテクチャについて楽しく学べることができます。

https://aws.amazon.com/jp/builders-flash/202405/japanese-builder-cards/

BuilderCardsは現在一般販売されていませんが、全国の JAWS-UGでゲーム体験イベントを開催しています。気になる方はぜひ参加してみてください！

今回はAWS関連イベントの景品として部内メンバーがBuilderCardsを入手することができたので、さっそくプレイ会を開催してみました。

## プレイの準備

プレイ時に必要なカードマットとガイドの日本語版が公開されているので、印刷しておくとスムーズにプレイすることができます。

https://github.com/jaws-ug/AWS-BuilderCards-Japanese

カードマットの印刷は少し工夫が必要です。
- MarketPlaceマット　→　A3印刷でピッタリでした
- プレイヤースペース　→　A2印刷が必要ですが印刷が難しかったため、半分ずつA3印刷をしてテープでつないでます

また、カードを保護するために64x89、66x91のスリーブをかぶせましたが、既存の箱には入らなくなりました（泣）もうちょっと1,2mm小さめのスリーブの方がよいかもしれません。

```plantuml
@startuml
<style>
root {
  Padding 0
  Margin 0
}
footer {
  FontColor black
  FontSize 17
}
</style>
footer 準備完了！
title <img:https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3738941/2133e154-2418-18c0-ed8a-7616e4b2fc3e.jpeg>
@enduml
```

## Let’s Play!
![マットセット後](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3738941/05be3f54-a503-f70f-3905-e82e8873af12.jpeg)

### プレイの流れ
プレイはざっくり以下のような流れになります。

1. 10枚ずつスターターカード、2枚のビルダーカードでスタート
2. 手持ちのカードを5枚並べて、並べたカードを組み合わせてアーキテクチャをデプロイ
3. アーキテクチャのTCO、AWSome クレジットから新しいビルダーカードやWell-Architectedカードを1つ購入
4. 2,3を繰り返しWell-Architectedカードがなくなったら終了。Well-Architectedカードのポイントが高い人が勝ちです！

### 勝つための戦略
ビルダーカードにはTCOやAWSome クレジットの追加や基本1回のビルダーカードの購入回数の増加の効果がついてます。これらの多くは一緒にデプロイされるビルダーカードのサービスが発動条件になります。「○○サービスと組み合わせてデプロイされたら、TCOが+3ポイント」感じなので、手持ちのカードの効果発動条件を考えて新しいカードを購入する選ぶことが大事です。

ビルダーカードの組み合わせは、大きくLambdaを軸にしたサーバレス系、EC2を軸にしたサーバあり系またはRedshiftのようなAnalytics系に分かれるイメージで、プレイを始める際は、どの系統でゲームを進めるかを事前に検討することが重要です。

## プレイ後の感想

![BuilderCardsプレイ中](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3738941/f6bb615a-d07a-2652-afbf-208c144e262b.jpeg)

当日プレイした5人のメンバーから、以下のような感想が寄せられました
- 普段業務で使用しないAWSのサービスについて学ぶ機会となった
- EC2カードが最強すぎる
- サービス間の関連性や組み合わせについての理解が深まった
- プレイヤー数に応じてビルダーカードの枚数を調整するとよいかもしれない。また、サービスの偏りを防ぐためにカードをよくシャッフルすると、さらに楽しめると思う

メンバー全員にとって、BuilderCardsを通じてAWSともう少し親しくなれる良い機会となりました。また機会があればぜひプレイしたいですね。
re:InventやSummitで大会が開催されたら、より面白いかもしれません！
Composerに入門しました。

# 初めに
BOOTHで販売されている[Composerの教科書 -モダンなPHP開発の基礎知識-](https://booth.pm/ja/items/5291022)を過去に一度読了したはいいものの所々忘れてたりもしたので改めて入門しました。メインは自分のための備忘録なのでより詳しい内容についてはリンク先から購入をオススメします。

# バージョン指定の早見表

||例|説明|
|-|-|-|
|①|1.0.2|特定のバージョンのパッケージのみ指定|
|②|>=1.0,<2.2|対象とするバージョンの範囲を指定|
|③|1.0 - 2.1|対象とするバージョンの範囲を指定|
|④|1.0.*|バージョン番号のパターンを指定|
|⑤|~1.2.3|特定のバージョン以降を指定(最後の数字のみ更新)|
|⑥|^1.2.3|特定のバージョン以降を指定(最初の数字以外を更新)|

- スペースやカンマ(,)で区切るとAND
- パイプ(|)で区切るとOR
- ②と③は同じ意味
- ④は「>=1.0,<1.1」と同じ意味
- 「~1.2」は「>=1.2,<2.0」と同じ、「~1.2.3」は「>=1.2.3,<1.3」と同じ
- 「^1.2」は「>=1.2,<2.0」と同じ、「^1.2.3」は「>=1.2.3,<2.0」

# コマンド早見表
||コマンド|説明|
|-|-|-|
|①|composer init|初期化|
|②|composer require [パッケージ名]|パッケージを新規インストール(composer.jsonも書き換えられる。)|
|③|composer require [パッケージ名]:バージョン番号|指定バージョンでパッケージを新規インストール(composer.jsonも書き換えられる。)
|④|composer update|composer.jsonの記述バージョン指定範囲内で最新バージョンがインストールされる。|
|⑤|composer update [パッケージ名]|指定パッケージのみcomposer.jsonの記述バージョン指定範囲内で最新バージョンがインストール|
|⑥|composer show|インストール済みのパッケージ表示|
|⑦|composer info|インストール済みのパッケージ表示|
|⑧|composer remove [パッケージ名]|指定パッケージの削除|
|⑨|composer search [キーワード]|コマンドでパッケージ検索(Packagistの方が探しやすいので多分ほぼ使わない。)|
|⑩|composer browse [パッケージ名]|Packagistの情報を基に指定パッケージのソースページまでWebブラウザでジャンプ|
|⑪|composer create-project --prefer-dist laravel/laravel [プロジェクト名]|Laravelプロジェクトのスケルトン作成|
|⑫|composer create-project --prefer-dist cakephp/app [プロジェクト名]|CakePHPプロジェクトのスケルトン作成|
|⑬|composer require [パッケージ名] --dev|開発用パッケージのインストール|
|⑭|composer install --no-dev|開発用パッケージを除いてパッケージをインストール(本番環境向けコマンド)|
|⑮|composer update --no-dev|開発用パッケージを除いてパッケージをcomposer.jsonの記述バージョン指定範囲内で最新バージョンにストール(本番環境向けコマンド)|
|⑯|composer help|composerコマンドのマニュアル確認|
|⑰|composer help [コマンド]|指定したcomposerコマンドのマニュアル確認|
|⑱|composer self-update|composer本体の更新|
|⑲|composer validate|composer.jsonの記述チェック|
|⑳|composer diagnose|Composer関連の状態チェック|

# Composerによるパッケージ導入までの流れ

## コマンドのみ
```shell
# 対話的にComposer使用のための事前準備を実施
composer init

# ライブラリを追加でインストール
composer require [追加したいライブラリ名]※1
```
※1：開発環境用でインストールする場合は`composer require [追加したいライブラリ名] --dev`でOK

## composer.jsonを修正 + コマンド

require or require-devに必要なパッケージを以下の例のように記述
```shell:composer.json
{
    ...
    "require": {
    
        "abraham/twitteroauth": "6.*",
        "monolog/monolog": "*"
    },
    "require-dev": {
        "phpunit/phpunit": "^11.3"
    }
}
```
その後以下コマンド実行
```shell
composer install
```
3Dスキャナーのコンピュータグラフィックスへの応用

3D スキャナーは、物体の 3 次元の形状や質感をキャプチャするために使用されるデバイスです。デジタル技術の進歩に伴い、3D スキャナーはコンピューター グラフィックス (CG) においてますます重要な役割を果たしています。本稿では、3Dスキャナの基本原理とCGへの応用、今後の開発動向について紹介します。

3Dスキャナの基本原理
3D スキャナーは、レーザー、光学、構造化光、写真測量などのさまざまな技術を通じて、物体の 3 次元形状と色の情報をキャプチャします。スキャナーはデータを、コンピューターで編集および操作できるデジタル モデルに変換します。

一般的な 3D スキャン技術
レーザー スキャン: レーザー ビームを使用して物体の表面上の距離を測定し、複数の測定を通じて完全な 3D モデルを生成します。
構造化光スキャン: 物体の表面に格子パターンを投影し、パターンの変形を通じて物体の形状を計算します。https://www.revopoint3d.jp/pages/portable-3d-scanner-pop3plus
写真測量: 複数の角度から撮影した写真から 3D モデルを構築します。

3DスキャナーのCGへの応用
1. 映画およびテレビの制作
映画やテレビ業界では、リアルなデジタル キャラクターやシーンを作成するために 3D スキャナーが使用されています。 CG アーティストは俳優の表情や体の動きをスキャンすることで、非常にリアルな仮想キャラクターを生成できます。
![e3a363220dbb36162a9b2a4ca03ea1e2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3824290/7f5d3e30-d794-3336-a46b-8595ac3598e2.png)

2. ゲーム開発
ゲーム開発者は 3D スキャナーを使用して、ゲーム環境やキャラクターの詳細なモデルを作成します。これにより、ゲームのビジュアル品質が向上するだけでなく、開発時間も短縮されます。

3. 仮想現実と拡張現実
3D スキャナーは、より没入型の VR および AR 体験の作成に役立ちます。現実世界のオブジェクトやシーンをスキャンすることで、開発者はこれらの要素を仮想環境で再作成できます。
![07d5dedfe0c5ffe7ed9efabca95387be.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3824290/ba8ba57c-dfa2-ae2e-6bf6-a99ddc149ac7.png)

4. 文化遺産の保護
博物館や考古学者は、3D スキャン技術を使用して遺物や遺物を文書化して保存しています。デジタルモデルは、元のオブジェクトを損傷することなく、研究、展示、教育に使用できます。

5. 工業デザインと製造
工業デザインでは、3D スキャナーはエンジニアのリバース エンジニアリングや品質検査に役立ちます。既存の製品のスキャンされたモデルを使用して、設計を改善したり、交換部品を製造したりできます。

![f81d766499d9f27e5b9a341bf7a26965.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3824290/028297a3-bb7c-0f5c-f9ad-e27265d0dee5.png)
今後の開発動向
テクノロジーが進歩するにつれて、3D スキャナーはより持ち運びやすく効率的になります。以下に将来の傾向をいくつか示します。

より高い解像度と精度: 新世代のスキャナーは、より詳細なモデルを提供します。
リアルタイムのスキャンと処理: リアルタイムのフィードバックと処理速度の向上により、スキャン プロセスがよりスムーズになります。
クラウド コンピューティングとビッグ データ: クラウド テクノロジーと組み合わせることで、大量の 3D データの保存と処理がより便利になります。

コンピューター グラフィックスにおける 3D スキャナーの用途は拡大し続けており、複数の業界でイノベーションと開発が推進されています。映画やテレビ、ゲーム、文化保存や工業デザインなど、3D スキャン テクノロジーは私たちの創作と体験の方法を変えています。
初心者がLeetCode解いてみたSeason1(1.TwoSum)

# LeetCode(1. TwoSum)
>整数numsと整数targetの配列が与えられたとき、それらが足し合わされてtargetになるような2つの数値の添字を返す。 各入力は正確に1つの解を持つと仮定してよく、同じ要素を2度使ってはならない。 答えはどのような順番でも返すことができる。

```csharp
public class Solutions {
    public int[] TwoSums(int[] nums, int target) {

    }
}
```

まず`target`にならないといけないため、配列をforループで回す。
```csharp
using System;

public class Solution {
    public int[] TwoSum(int[] nums, int target) {
        var result = new int[2];

        for(var i = 0; i < nums.Length; i++) {
            for(var j = 0; j < nums.Length; j++) {
                if(i == j) continue;

                if((nums[i] + nums[j]) == target) {
                    result = [i, j];
                }
            }
        }

        return result;
    }
}public class Solutions {
    public int[]
}
```

この場合の結果はRuntime:164ms/Memory:47.64MBでした。<br>
いろいろ考えてみたんですがダメでした。<br>

解法を見てみました。<br>

## ハッシュテーブル
```csharp
// nums = [3, 5, 12];
public class Solution {
    public int[] TwoSum(int[] nums, int target) {
        var map = new Dictionary<int, int>();

        for(int i = 0; i < nums.Length; i++) {
            // map[3] = 0;
            // map[5] = 1;
            // map[12] = 2;
            map[nums[i]] = i;
        }

        for(int i = 0; i < nums.Length; i++) {
            // targetが8なら8 - 3で5がキーのmapが存在すればよい。
            int complete = target - nums[i];

            // map[complete] != iは同一の値を使わないように
            if(map.ContainsKey(complete) && map[complete] != i) {
                return new int[] {i, map[complete]};
            }
        }

        return null;
    }
}
```

## ワンタイムハッシュ
上記の場合だと二回ループを回さなければいけないですが、下記だと、違った場合次の要素を単一のループの最後で入れることで、可能になります。

```csharp
public class Solution {
    public int[] TwoSum(int[] nums, int target) {
        var map = new Dictionary<int, int>();

        for(var i = 0; i < nums.Length; i++) {
            int complete = target - nums[i];

            if(map.ContainsKey(complete) && map[complete] != i) {
                return new int[] {i, map[complete]};
            }

            map[nums[i]] = i;
        }

        return null;
    }
}
```
AstroでPHPを出力する

AstroでWordPressテーマを作成する際に使用した小物類の備忘録。

## PHPタグ出力コンポーネント

slotの中身をエスケープせずに `<?php` と `?>` の間に展開するだけの単純なもの。

```tsx:PHP.astro
---
const php = await Astro.slots.render('default');
---

<Fragment set:html={`<?php ${php} ?>`} />
```

- 参照: [set:html (Astro Docs)](https://docs.astro.build/ja/reference/directives-reference/#sethtml)
- `replace(/\s+/gm, ' ')` などに通して簡易的にminifyするのもアリ

### 使用方法

PHPタグの代わりに使用する。

```tsx:index.astro
---
import PHP from 'path/to/PHP.astro';
---

<PHP>if($foo):</PHP>
  <p><PHP>echo $foo;</PHP></p>
<PHP>endif;</PHP>
```

出力は以下のようになる。

```php
<?php if($foo): ?>
  <p><?php echo $foo; ?></p>
<?php endif; ?>
```

エスケープが必要な文字を含む場合は `is:raw` ディレクティブを使用する。

```tsx:index.astro
<PHP is:raw>foreach($items as $i => $item):</PHP>
  <PHP>if($i !== 0):</PHP>
    <p><PHP>echo $item['foo'];</PHP></p>
    <p><PHP>echo $item['bar'];</PHP></p>
  <PHP>endif;</PHP>
<PHP>endforeach;</PHP>
```

- 参照: [is:raw (Astro Docs)](https://docs.astro.build/ja/reference/directives-reference/#israw)

## コンポーネント間のPHPタグの受け渡し

細かく検証していないが、この程度の内容であればそのままで問題ない。

```tsx:index.astro
<PHP>
  // ...
  $title = $foo . $bar;
</PHP>
<Layout
  title='<?php echo $title; ?>'
  permalink='<?php the_permalink(); ?>'
>
...
</Layout>
```

```tsx:Layout.astro
---
interface Props {
  title: string;
  parmalink: string;
}

const { title, permalink } = Astro.props;
---

// （中略）

<title set:html={title} />
<meta property='og:url' content={permalink} />
```

title要素については `title='echo $title;'` を渡して `<title><PHP>{title}</PHP></title>` で受けることもできるが、PHPタグを受け渡す場合のフォーマットは統一しておいた方がよいと思われる。

PHP専用のコンポーネントであればテンプレートリテラル型で定義してもいいかも知れない。

```typescript
interface Props {
  foo: `<?php ${string} ?>`;
} 
```

## 拡張子の書き換え

ビルドされたHTMLのうちPHPとして使用するものを `astro:build:done` フック内で判別して拡張子を書き換える。
判別方法はパスでも二重拡張子でも決め打ちでもなんでも構わない。

```ts:astro.config.ts
import fs from 'node:fs';
import fg from 'fast-glob';

export default defineConfig({
  build: {
    format: 'preserve',
  },
  integrations: [
    {
      name: 'html2php', // 適当でよい
      hooks: {
        'astro:build:done': async ({ dir }) => {
          // 出力ディレクトリ内のHTMLファイルをリストアップ
          const files = await fg.glob(`${dir.pathname}/**/*.html`);
          await Promise.all(
            files.map(async (file) => {
              // 例1: ファイルパスに `wp-content` が含まれていたら拡張子をPHPに書き換え
              if (file.includes('wp-content')) {
                await fs.promises.rename(file, file.replace('.html', '.php'));
              }
              // 例2: 二重拡張子 `.php.html` なら拡張子をPHPに書き換え
              if (file.endsWith('.php.html')) {
                await fs.promises.rename(file, file.replace('.php.html', '.php'));
              }
            }),
          );
        },
      },
    },
  ],
});
```

- 参照: [astro:build:done (Astro Docs)](https://docs.astro.build/en/reference/integrations-reference/#astrobuilddone)
OMC220B (933,整数)

OnlineMathContestに関する記事です。
初学者レベルなので、基本的な所から理解できていません。
公式の解説で理解できない所を自分なりに復習する目的で記事を残すことにしました。

https://onlinemathcontest.com/contests/omc220/tasks/4571

$10^6$未満の正整数は$0$～$999999$($9$が$6$個)です。
$10^5$未満の数も先頭に$0$をつければ、広義では$6$桁の整数です。

また、「各位の和が$6$以下になる」は、「$10^0$～$10^5$のラベルが付いた$6$つの箱に$1$～$6$個のボールを入れる」に言い換えても同じです。

公式の解説を自分なりに解釈すると、
$10^0$～$10^5$の箱に加えて、「ゴミ」箱を$1$つ用意して、計$7$つの箱に$6$個のボールを入れる組み合わせを計算しています。

$6$個のボールを$7$つの箱に入れる方法は、$_{6+7-1}C_6=924$通りになります。

(ボールを箱に入れる方法について、自分の理解の為に記事にしました。)

https://qiita.com/msykkb/items/4d4d930ff0812a39151b

$924$通りのうち、$0$を除外した$923$通りが正しいのですが、この問題で求めるのは組み合わせではなく総和です。
$0$を足しても値は同じなので、特に考慮しません。

$6$個のボールを箱に入れる操作を$924$回したとき、入ったボールの総和は$6×924$個です。
箱は$7$つで、すべての入れ方を網羅していることからそれぞれの箱に入るボールの個数は同じになるので、各箱には$\frac{6×924}{7}=792$個ずつボールが入ります。

このうち、「ゴミ」箱以外の箱に入った回数で総和を計算します。
$792×\Sigma_{i=0}^510^i=792×111111=87999912$。
フロントエンド開発におけるテスト手法と主要ツールのガイド

## フロントエンド開発における各種テスト手法

### UIコンポーネントテスト

UIコンポーネント単体テスト

→一つの関数、一つのコンポーネントを対象に行うテスト

　UIコンポーネントは単体テストとの相性がよい。

UIコンポーネント結合テスト

→非同期処理の実行結果などの外部要因も含めたテスト。

### ビジュアルリグレッションテスト

ある特定の開発時点からの差分を検出して不具合を検証するテスト。

### E2Eテスト

ヘッドレスブラウザ（テストマシン用の見えないブラウザ）を用いて行う。

DBに接続した挙動や画面遷移を含めたテストに向いている。

### Storybook

## 有名なフロントエンド開発用テスティングフレームワーク/ツール

### 1. **Jest**

- **説明**: Jestは主にJavaScriptやTypeScriptで書かれたコードのユニットテストや統合テストに使用されるテスティングフレームワークです。Reactを含む多くのJavaScriptフレームワークとよく統合され、スナップショットテストやモック機能などの便利な機能も提供します。
- **主な用途**: ユニットテスト、統合テスト

### 2. **Playwright**

- **説明**: Playwrightは、クロスブラウザのエンドツーエンドテストを行うためのフレームワークです。ヘッドレスブラウザを使って、ユーザーが実際に行う操作をシミュレーションし、ウェブアプリケーションが正しく動作するかをテストします。Chromium、Firefox、WebKitなど複数のブラウザをサポートしています。
- **主な用途**: エンドツーエンドテスト（E2Eテスト）

### 3. **reg-suit**

- **説明**: reg-suitは、視覚的なリグレッションテストを行うためのツールです。以前のバージョンのウェブページのスクリーンショットと現在のバージョンのスクリーンショットを比較し、デザインやレイアウトに変更がないかをチェックします。CI/CDパイプラインでの自動化にも対応しています。
- **主な用途**: ビジュアルリグレッションテスト

### 4. **Storybook**

- **説明**: Storybookは、UIコンポーネントの開発およびテストを行うためのツールです。コンポーネントを独立して開発・テストする環境を提供し、コンポーネントの見た目や挙動をドキュメント化しながら確認できます。また、Storybookに追加できるアドオンを利用して、コンポーネントのスナップショットテストやアクセシビリティテストなども行えます。
- **主な用途**: コンポーネントの開発、ドキュメンテーション、テスト

### まとめ

- **Jest**: ユニットテストや統合テスト向け。
- **Playwright**: エンドツーエンドテスト（E2Eテスト）向け。
- **reg-suit**: ビジュアルリグレッションテスト向け。
- **Storybook**: UIコンポーネントの開発、ドキュメンテーション、テスト向け。
鉱工業指数レポートを全て取得する

本記事では、経済産業省のウェブサイトから全ての鉱工業指数レポートのPDFリンクとその公開日を自動的に取得するPythonコードについて解説します。

### ステップ1: メインページの内容を取得
まず、メインページから必要な情報を取得するために、requestsライブラリを使用してHTMLコンテンツをダウンロードします。次に、BeautifulSoupを用いてページのHTMLを解析し、必要なリンクを抽出します。

```python
import requests
from bs4 import BeautifulSoup

# メインページのURL
url = 'https://www.meti.go.jp/statistics/tyo/iip/kako_press.html'

# ページの内容を取得
response = requests.get(url)
response.raise_for_status()

# BeautifulSoupでHTMLを解析
soup = BeautifulSoup(response.content, 'lxml')
```
ここでは、requests.get()でウェブページの内容を取得し、BeautifulSoupでその内容を解析しています。このステップにより、ページ上に存在するすべてのリンクや要素にアクセス可能な状態になります。

### ステップ2: PDFリンクと公開日を取得
次に、特定のパターンに一致するリンクを抽出します。今回は、href属性に/reference/を含むリンクを対象にします。また、リンクから日付情報（年と月）を正規表現で抽出し、これをフォーマットして表示します。
```python
import re

# href属性に'/reference/'を含むリンクをすべて取得
reference_links = soup.find_all('a', href=lambda href: href and '/reference/' in href)

# ベースURL
base_url = 'https://www.meti.go.jp/statistics/tyo/iip/'

# リンクをプリント
for link in reference_links:
    pdf_url = base_url + link['href']
    
    # 正規表現で日付部分を抽出
    match = re.search(r'b\d{4}_(\d{6})', link['href'])  # YYYYMM形式の6桁をキャプチャ
    if match:
        year_month = match.group(1)
        year = year_month[:4]  # 最初の4桁を年として取得
        month = year_month[4:]  # 残りの2桁を月として取得
        formatted_date = f"{year}-{month}"
        print(f"日付: {formatted_date} | URL: {pdf_url}")
```
ここでは、BeautifulSoupで取得したリンクから、/reference/という文字列を含むものをフィルタリングし、それらのリンクの中から特定のパターンに一致する日付を抽出しています。この日付とリンクをフォーマットし、ユーザーフレンドリーな形式で出力します。

### 出力例
コードを実行すると、次のような形式で日付とリンクが出力されます。
```
日付: 2024-01 | URL: https://www.meti.go.jp/statistics/tyo/iip/result/pdf/reference/b2020_202401refsj.pdf
```
この形式により、日付情報が一目で分かるだけでなく、リンク先へのアクセスも容易になります。データ解析や報告書作成時に非常に便利です。

### コード全体
```python
import requests
from bs4 import BeautifulSoup
import re

# メインページのURL
url = 'https://www.meti.go.jp/statistics/tyo/iip/kako_press.html'

# ページの内容を取得
response = requests.get(url)
response.raise_for_status()

# BeautifulSoupでHTMLを解析
soup = BeautifulSoup(response.content, 'lxml')

# href属性に'/reference/'を含むリンクをすべて取得
reference_links = soup.find_all('a', href=lambda href: href and '/reference/' in href)

# ベースURL
base_url = 'https://www.meti.go.jp/statistics/tyo/iip/'

# リンクをプリント
for link in reference_links:
    pdf_url = base_url + link['href']
    
    # 正規表現で日付部分を抽出
    match = re.search(r'b\d{4}_(\d{6})', link['href'])  # YYYYMM形式の6桁をキャプチャ
    if match:
        year_month = match.group(1)
        year = year_month[:4]  # 最初の4桁を年として取得
        month = year_month[4:]  # 残りの2桁を月として取得
        formatted_date = f"{year}-{month}"
        print(f"日付: {formatted_date} | URL: {pdf_url}")

```
【Figma】MUIを使ってWebアプリのUIデザインをやってみた！～プロトタイプ編～

# はじめに
こんにちは！
[AXLBIT株式会社](https://axlbit.com/)の中村（@ax-nakamura）です。
今回初めてFigmaを使ってワイヤーフレームとプロトタイプ作成に取り組んだので備忘録としてその時調べたことを残します。
前回は[ワイヤーフレーム編](https://qiita.com/ax-nakamura/items/4b420205a34d5dcc64ec)を書いたので、今回はプロトタイプ編です！
# プロトタイプとは
プロトタイプとは、
**画面のUIデザインの完成形を確認でき、さらにボタン押下やページ遷移もシミュレーションできる状態** のことです。
Figmaのプロトタイプ機能を使うと、特定のボタンを押したときに別のページに遷移する動きを設定できます。
# MUIとは
MaterialUI[^1]の略称で、オープンソースのReactUIライブラリの一つで、Googleのデザイン標準MaterialDesignとして使われていることも有名です[^2]。様々な用途に対応したコンポーネントやボタンが用意されており、それらを全てFigmaデータとして自分の作業ページ上でそのまま使うことができます。
また、デザインから開発まで同じキットを使って行うことができ、シームレスな実装が期待されます。
今回Reactでのフロントエンド実装を視野に入れていたため、コンポーネントを使い回せるようにMUIを使いました。
自分で1からコンポーネント作成するより断然早かったです！
## 使い方
1.Figmaファイルを[こちら](https://www.figma.com/community/file/912837788133317724)からDLする
2.自分のプロジェクト一覧画面でインポートする
3.任意のコンポーネントをコピーして使用したいプロジェクト内で使う
# プロトタイプの作成方法
## 基本手順
### ワイヤーフレームを参考にパーツを配置する
作成したワイヤーフレーム内のテキスト、テキストボックス、ボタンの配置に合わせてMUIコンポーネントを配置する
※ボタンの色変更、フォント変更はMUI有料版の使用が必要
### テキストの内容や色を決める
テキストの内容や色は自由に変更することができます。色変更の際にはコンポーネントの色サンプルを使用すると統一感が出ます。
![スクリーンショット 2024-08-19 153224.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3346634/945554d5-c3d8-622e-3365-dd817352e5f0.png)

▲MUIをインポートした状態でパレットボタンを押すと、「ライブラリ」に登録された色が入っている

### ページ遷移を指定する
作成する全てのページのパーツ配置ができたら、プロトタイプモードを使用して、ページ遷移を指定します。

①「デザイン」モードから「プロトタイプ」モードに切り替える
![スクリーンショット 2024-08-19 154342.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3346634/365fabea-e858-4876-828a-e01ca3278a22.png)

②押下したいボタンの上にカーソルをホバーする
![スクリーンショット 2024-08-19 154423.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3346634/ab3acca9-47ab-10b0-8078-d53a0acdf792.png)
▲ホバーすると＋マークがボタンに出てきます

③クリックしたままドラッグして遷移先のページに矢印をつなげる
![スクリーンショット 2024-08-19 154445.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3346634/ed4584a7-6902-0d22-6a11-d00be311f202.png)

④インタラクションを決める
　トリガー…何をきっかけに遷移するか。ボタンクリックでページを変えたいときは「クリック時」にする
 　アクション…トリガーで指定した行動が起こったときどう動くか。ページを変えたいときは「次に移動」にする
  　移動先…矢印の先が遷移先だが、上手く繋げられないときはこちらで選ぶこともできる
   　アニメーション…遷移の動き方について指定ができる。即時は押下と同時に切り替わる。ディゾルブにすると瞬きのような遷移の切り変わりになる。好みで変更する。
![スクリーンショット 2024-08-19 154458.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3346634/3adc581e-2cbd-1031-8cd2-75856a06462d.png)

⑤完成！画面右上の再生ボタンから作成したプロトタイプを動かせるのでプロトタイプ指定したボタンを押してみる。
![スクリーンショット 2024-08-19 155722.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3346634/f189d602-4c36-3114-a7ae-c95144f9e241.png)
![スクリーンショット 2024-08-19 155739.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3346634/c7a40f58-e41b-3bc1-7d80-a6d230d3c21d.png)
▲検索ボタンを押すと次のページに切り替わりました

# おわりに
Figmaでデザインワイヤーフレームからプロトタイプまで作ることができました。
今回初めて取り組んだため制作に2週間ほどかかりましたが、UIキットのように便利なツールやほかにもプラグインがたくさんあり、慣れればもっと早くプロトタイプまで作れそうだと思いました！引き続き勉強して表現の幅を増やしていきたいです。
最後までお読みいただきありがとうございます。
皆さんもぜひFigma触ってみてください！

# 参考文献
[^1]:Material UI https://mui.com/material-ui/v
[^2]:Material UI Overview https://mui.com/material-ui/getting-started/