OmniAICreator/Qiita-1.07M huggingface dataset:
M5StampFlyで遊んでみた話

# M5Stamp Flyを買ってみた。
公式ページには、コントローラーも買えと書いていたが単体で購入。
ひたすらコントローラーのソースとStampFlyのソースを読んでみるとこの間の通信がESP-NOWというWifiを使った特殊な通信（Macアドレスだけで通信しているのでLink層に近いもの？）を使っていることが判明。

なので、M5StampS3を買ってコントローラーをエミュレートするプログラムを書いた。
ついでにArduino Nano Everyが余っていたので９V電源で電池を充電するハードも作成

# M5Stampのボードマネージャには要注意
M5Stackのボードマネージャは２種類ありArduinoIDEで供給されているものとM5Stack本家が供給しているもので内容が異なる。

ArduinoIDEの「追加のボードマネージャのURL」に下記URL追加する。

https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/arduino/package_m5stack_index.json

# M5StampFlyのソースは・・・
こちらは、ドローンのソース
https://github.com/m5stack/M5StampFly

こちらは、コントローラーのソース
https://github.com/m5stack/Atom-JoyStick

# で、M5Stampでシリアルで制御するコントローラーを制作中
現在、シリアルでPCや携帯から制御するためのプログラムを製作中で
とりあえず、飛ぶところまで来ました。

https://youtube.com/shorts/LR_KySrYpsk
lazygit 使ってみた

メモ書きに近いですが、お祭りに乗っておこうということで

[モテるGit管理 (gh, ghq, git-cz, lazygit)](https://zenn.dev/mozumasu/articles/mozumasu-lazy-git)

この記事を読んだので lazygit を使ってみました。
1週間くらい使ってみて思ったことをいくつか書きます。

なおもともと gh, ghq は使っていて git-cz は .gitmessage をもともとちゃんと書いてたこともあり、試しに使いましたが結局使わなくなりました。

.gitmessage については下記記事などが参考になりそうです。

[Git commit と .gitmessage #GitHub - Qiita](https://qiita.com/mnishiguchi/items/aa198ced2a516b67341d)

## GUI 製の Git クライアントを使っていない理由など

いろいろ使ってきたのですが、登録の必要性や更新、git add が誤爆しやすい（これが一番困りものなのですが）などがあり、結局 CLI に戻しました。
また鍵の取り扱いがおかしくなったりなどなど過去にいろいろあり、うんざりしてしまったこともあります。
昨今の環境では GUI での操作が主流となりつつあり、安定もして来ていると思うので、今後私もずっと CUI での操作を続けるかはわかりませんが、今のところは CLI での操作を続けています。

またサーバーでの作業など（直接入ってあれこれすることは減りましたが、ISUCON などで使うことがある）もあるので、CLI での操作を覚えておいて得をしていることも多いです。
昨今だと CodeSpaces でコードや文章を書いてそのままコミット、ということもしているので、そういった意味でも CLI での操作を覚えておくことは大事だと思っています。

というわけで CLI での操作にこだわっているわけですが、いろいろ config などをいじり倒しても手の届きにくいところや、そもそも自分がエイリアス忘れてしまっているなどの問題があり、そういったところを補完してくれるツールを探していました。

## インストール

[jesseduffield/lazygit： simple terminal UI for git commands](https://github.com/jesseduffield/lazygit)

各種環境向けのインストール方法が README に書いてあり、導入は簡単でした。

## キーバインド

https://github.com/jesseduffield/lazygit/blob/master/docs/keybindings/Keybindings_ja.md

これに大体乗っています。デフォルトだと Vim 風味のキーバインドといった印象です。
私は Vim 操作もそこそこやっていたので、割とすぐに手に馴染みました。
逆にマウス操作メインの人はちょっと大変かもしれません。

ありがたいことに `?` キーでヘルプが出るので、それを見ながら操作しているとだいたいのことはできると思います。
（よいユーザビリティだなあと思いました）

## 使い心地

各コミットでの変更を見るのに便利だと感じています。
ファイルの変更がいつ起こったのかを確認する際にいろいろな方法で見ていましたが、 `git log` のコマンドを組み合わせたり覚えたりしておくことが必要でした。
毎回その操作を思い出したり、調べたりするのが面倒だったので、それが楽になったのは大きいです。
（単純に時間効率が上がり、生産性が上がった気がします）

またブランチも見やすくなったので、いちいち `git branch` でそれっぽいのを探したりする必要がなくなりました。
最近は issue 番号のブランチではなく、機能に関連したブランチ命名にしているので、格段に探しやすくなっているように思います。

diff の表示も個人的には満足しています。 `git diff` を適当に行うとどのファイルの変更なのかすぐわからなくなりますが、 lazygit はファイルごとに変更がわかりやすく表示されるので、そういった問題が起きづらいです。

ただショートカットはまだまだ覚えられていないので、もう少し慣れてきたら見方が変わるのかもしれません。
年々作業する時間が減っていることもあり、熟達期間が長くなりそうですが向き合っていこうと思います。
そういう意味で `?` キーですぐにヘルプが出るのはありがたいです。

それと私は tmux で画面を分割して使っているのですが、ディスプレイサイズによっては表示自体が厳しいと感じます。
特にノートパソコンで使うときは画面が小さいので、分割して使うにはやや狭いと感じます。
リポジトリの切り替えなどを高速に行うか、ウィンドウを分割せずに別のターミナルで行うか、といった使い方が必要になるかもしれません。

## まとめ

以前は tig を使っていたのですが、直感的に lazygit の方が使いやすいと感じました。
カラーリングもそうですが、操作性なども含めて使いやすいと感じています。
（tig は使いこなせていなかったり、環境の問題で文字化けしたり、などを経験して結局素の git だけ使っていたみたいな事情もありますが…）

昨今は開発速度がより速くなり、git へのコミットやブランチの切り替え、マージが頻繁に発生します。
それを高速に行っていくためにも、ツールになれたほうがいいんだろうなぁと思う日々です。

それを lazygit は叶えてくれそうな気がするので、今は使いこなしてみようと思います。
個人開発での【GitFlow】について（初学者）

## 1.GitFrowとは
GitFlow（ギットフロー）は、Gitのブランチ管理の手法の一つで、主にチーム開発を前提に設計されています。
本記事では、GitFlowの基本概念、メリット、および使用方法について解説します。

## 2.ブランチとは
ブランチとは、Gitにおける「作業の分岐」のことです。
開発を進める際に、メインのコードとは別の作業ブランチを作ることで、安全に新機能の追加や修正ができます。

##### 例【ガンプラの組み立て。】
mainブランチ　ガンダム（完成品）
 ● 開発ブランチ　develop_gundam（各部品の作成）
・feature/face（顔）
・feature/body（胴体）
・feature/arms（腕）
・feature/legs（足）
・feature/thruster（スラスター）
・feature/weapons（武器）

ブランチごとに作業を進め、完成後に統合することで、効率よく開発を進められます。

## 3.個人開発でGitFlowを採用するメリット
##### 1.チーム開発の流れがイメージできる
個人開発段階でGitFlowを実践することで、チーム開発の際のブランチ運用にスムーズに適応できます。
##### 2.思わぬミスを避けることができる?
作業ごとにブランチを分ける習慣をつけることで、誤った変更をmainブランチに直接加えることを防げます。
##### 3.保守性の向上
本番（デプロイ）ブランチ、開発ブランチ、修正ブランチなどを明確に分けることで、管理が容易になります。

## 4.GitFrowの使用方法
#### 1.基本ブランチの種類
①main【本番環境用】
②develop【開発中】
③feature【新機能開発】
④relese【リリース準備】
⑤hotfix【修正用】

#### 2.開発の流れ
###### ※新リポジトリ作成し、現在位置のブランチがmainからの説明となります。
①開発ブランチの作成
```
git chackout -b develop_gundam
```
※現在位置ブランチの確認
```
git branch
```

②新機能ブランチの作成
```
git checkout -b feature/face
```
③ブランチ内の変更をステージング（結合前の準備）
```
git add .
git commit -m"フェイス完成"
```
現在の状態を確認
```
git status
```

#### ※ここまでがチーム開発で行う処理です。
#### ※以降は管理者がコードを確認し結合するか判断し処理する箇所ですが個人開発のため行います。

④開発ブランチへ統合
```
git checkout develop_gundam
git merge feature/face
```

⑤本番環境へ結合する
```
git checkout main
git merge develop_gundam
```
## 5.まとめ
GitFlowを活用すると、開発フローが明確になり、安全に開発を行えます。
個人開発でも習慣化することで、チーム開発時のミスを減らし、効率的に作業を進められるようになります。
ぜひプロジェクトに適用してみましょう！
OnVUE トラブルシューティング集

## はじめに
[OnVUE](https://www.pearsonvue.com/jp/ja/test-takers/onvue-online-proctoring.html) はPearsonVUE社が出しているオンライン試験ツールです。
本記事は、ツールで要求されるシステムテストの際にハマったところを共有する記事です。

## PCスペック

OSのバージョン: Sequoia 15.2
CPU: Apple M4
メモリ: 24GB

OnVUEのバージョン: 24.17.114

## ネットワークチェックでWebRTCのチェックに失敗する

エラー内容と原因が乖離してますが、アクセスコードの期限が切れているのが
原因のようです。最初から手順をやり直して、アクセスコードを新しく払い出しましょう。

<https://community.wowza.com/t/onvue-issue-with-webrtc/95488>

## セキュアブラウザテストが終わらない

OnVUEのAppleシリコンの対応が不完全のようです。Rosettaで起動しましょう。

![スクリーンショット 2025-01-31 22.13.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158733/f9fd14c0-ac8b-a13c-cb83-a03052accea6.png)

<https://www.reddit.com/r/pmp/comments/1blaqwl/has_anyone_else_experienced_this_issue_with_onvue/>

## 最後のシミュレーションテストでタイムアウトし、そのまま操作が効かなくなる

Macの新規ユーザーを作成し、そのユーザーで OnVUEのシステムテストを行うとうまくいきました。$HOME以下のファイルが悪さしていると考えられますが、原因は不明です。

<https://discussions.apple.com/thread/254965631?sortBy=rank>

## 終わりに

以上のハマりどころから、OnVUEはまだまだ開発途上のツールと思います。
この記事を読んで、少しでも役に立てば幸いです。
【React】useEffectでasyncを使うとエラー？正しい書き方と解決方法

# はじめに
`useEffect`で`async`を使おうとした際にうまく動作しなかったため、その原因と正しい使い方について調べました。

:::note warn
***この記事は<font color="Red">個人的なアウトプット</font>を目的として作成したものです。そのため、誤った情報や不足している内容が含まれている可能性があります。もし間違いや気になる点がございましたら、ぜひご指摘いただけますと幸いです***。
:::

# 事象
`useEffect`で非同期関数を実行しようと、以下のようなコードを書きましたが、正常にデータを取得できませんでした。

```react
useEffect(async () => {
    const data = await fetchData(import.meta.env.VITE_ISSUE_ID);
    console.log(data);
  },[]);
```

# 原因
`useEffect`のコールバック関数は`Promise`を返してしまうと、`React`がそれを正しく処理できず、エラーが発生します。`useEffect`のコールバック関数はクリーンアップ関数を返す必要があり、直接`async`を付けることができません。

# 解決方法
`async`を`useEffect`のコールバック関数につけるのではなく、内部で`async`関数を定義して実行することで、正常にデータを取得できました。

```react
useEffect(() => {
  const fetchDataAsync = async () => {
    const data = await fetchData(import.meta.env.VITE_ISSUE_ID);
    console.log(data);
  };

  fetchDataAsync();
}, []);

```

# 終わりに
今回のエラーを通じて、非同期処理についての理解が不十分であることを実感しました。今後は `async/await`の仕組みや`Promise`の動作をより深く理解し、適切なコードを書けるようにしていきたいと思います


# 参考
『useEffectに非同期関数を設定する方法』Zenn

https://zenn.dev/syu/articles/b97fb155137d1f

『useEffectで非同期処理(async/ await)する際の注意点』Qiita

https://qiita.com/Akihiro0711/items/dae74e3e73063a80b249
GitHub CodespacesからSIGNATE CLI

コンペ参加のハードルって高いですよね
GitHub CodespacesからSIGNATEのコンペに参加できれば少しハードル下がるかなと思って試してみました

以下リンクの案内に従って設定すれば簡単にできたので設定に関しては書くこと無いのですが
アカウントに関して一つ気づきがあったので共有します。

https://github.com/signatelab/signate-cli

https://pypi.org/project/signate/

## アカウントに関しての気づき

Googleアカウント連携でSIGNATEのアカウント作ったのでコマンドラインでAPI Token取得できず。。。＼(^o^)／

> ＊ SNS で会員登録した場合はアカウント設定 画面でのみ API Token を取得可能です。

API Tokenは`~/.signate/signate.json`固定のようですのでAPI TokenだけはCodespaces作るたびに用意が必要になってしまいますね。
（Codespacesのカスタマイズで対応できるのでしょうか、、、 勉強してみてわかりましたら追記します。）

### 2025/02/03 追記

Automatically install dotfiles の仕組みを使えばAPIトークンをいちいちアップロードしなくてよさそうです。

https://docs.github.com/ja/codespaces/setting-your-user-preferences/personalizing-github-codespaces-for-your-account#dotfiles

> . で始まる選択したドットファイル リポジトリ内のすべてのファイルまたはフォルダーが codespace の ~ または $HOME ディレクトリにシンボリック リンクされます。

1. プライベートリポジトリを作ってそこにAPIトークンを配置
2. Setting -> Codespaces -> Dotfiles の Automatically install dotfiles を ☑  
3. プルダウンメニューから1.のリポジトリを選択

とすると、~にAPIトークンがコピーされるようになります。
jQueryでHTML要素を操作する

# はじめに
こんにちはプログラマー2年目の塚田と申します。
今回はJavaScriptでのHTML要素を操作する方法について、
お仕事で使ったものを中心に書いていこうと思います。
※jQueryを使った書き方がメインになります。

# attr()を使う方法
``` html
HTML

<p id="qiita">こんにちは</p>
```

``` js
JS

// class属性の追加
$("#qiita").attr("class","test");

// class属性取得
let get = $("#qiita").attr("class");
→test

// class属性の変更
$("#qiita").attr("class","newTest");

// class属性を再度取得
let get = $("#qiita").attr("class");
→newTest
```

# data()を使う方法
``` html
HTML

<p id="qiita">こんにちは</p>
```

``` js
JS

// class属性の追加
$("#qiita").data("class","test");

// class属性取得
let get = $("#qiita").data("class");
→test

// class属性の変更
$("#qiita").data("class","newTest");

// class属性を再度取得
let get = $("#qiita").data("class");
→newTest
```

attr()とdata()の違い
|方法|メリット|デメリット|
|:-|:-|:-|
|attr("属性名")|どんな属性でも統一的に動作できる|data属性にはdata()のほうが便利|
|data()|data属性を簡単に操作できる|HTMLのdata-**に即時反映されない場合がある|

カスタムデータ属性を操作するならばdata()を使うとよいですが、すべての属性を一括で操作するならばattr()も選択肢になります。

# おわりに
今回はJavaScriptでのHTML要素を操作する方法について書いてみました。
今後も学んだ事を書いていこうと思います。
以上、塚田でした
【備忘録】AWS移行ツール

## はじめに
オンプレからAWSへの移行方法は様々あるので軽くまとめてみました

## 目次
1. [移行準備/管理ツール](#移行準備/管理ツール)
1. [サーバ/DB移行ツール](#サーバ/DB移行ツール)
1. [データ転送ツール](#その他)
1. [その他](#reference)
1. [参考文献](#reference)

<!-- 各チャプター -->
<a id="#移行準備/管理ツール"></a>
## 移行準備/管理ツール
- AWS Migration Hub
    - 移行の進捗状況を一元的に管理
- AWS Application Discovery Service
    - 移行元となるオンプレミス（自社運用）側のシステム情報を収集
    - OSの種類やソフトウエアのバージョン、IPアドレスなどのネットワーク情報
    - 対象システムの移行コストを見積もりのにも役立つ
    - 利用条件として、サーバーにエージェントを導入する必要あり
    - 収集された情報はAWS Migration Hubへ統合される

<a id="#サーバ/DB移行ツール"></a>
## サーバ/DB移行ツール
- AWS Application Migration Service (AWS MGN)
    - システム移行のファーストチョイス
    - 物理環境と仮想環境の両方に対応
    - 以前は、CloudEndureというサードパーティーの製品がこの役割を担っていた
    - 移行元にエージェントを導入して、クラウド上にデータ複製をして移行を実現
    - 移行元のシステムを稼働させたまま、システム負荷を最小限に抑える形でデータ複製を進行
    - サーバ、DB単位ではなくアプリケーションという全体の単位で移行できる
    - AWS Server Migration Serviceというサービスが以前まで利用されていたが、2022年3月31日に廃止となっている
    - 
- AWS Server Migration Service (SMS)
    - 仮想マシンをAWSクラウドへ移行させる
    - 移行元は、VMwareやHyper-V、および Azureなどの仮想マシンである必要があり
    - 物理サーバーは移行させることができない
    - エージェントを導入する必要がない
    - ネットワーク経路としてはインターネット経由のみとなっており、帯域制限ができない点が弱点
    - SMSは同時移行の仮想マシン数に制限があるため、より大規模な移行にはAWS Application Migration Service

- AWS Database Migration Service (DMS)
    - データベースの移行に特化
    - 移行元として物理サーバーのデータベースも選択可能であり、また同種のデータベースだけでなく、異種間のデータベースでの移行も可能
    - 移行方式は一括だけでなく、増分でのデータ同期も可能
    - 移行元データベースが利用可能なまま、移行を進めることができる

<a id="#データ転送ツール"></a>
## データ転送ツール
- AWS Snow ファミリー
    - 大容量のデータをネットワーク経由ではなく専用媒体を輸送する方法でAWSクラウド上へ転送するサービス
    - ネットワーク経由だと数ヶ月もかかるような大容量データを一気に転送する用途
    - AWS Snowcore、AWS Snowball、AWS Snowmobile
- AWS DataSync
    - ネットワーク経由でデータ転送を自動化するオンラインサービス
    - オンプレミスとクラウド間のドライブ同期や、クラウド上にある2つのドライブ間のデータ同期などに使われる
    - クラウド移行の一括転送の用途としても、その後のデータ更新に伴うデータ同期の用途としても使われる
    - 移行元のシステムへエージェントを導入する必要あり
    - ネットワーク経路はインターネット経由の他、AWS Direct Connect経由（専用線）も可能
- AWS Transfer Family
    - 元々AWS Transfer for SFTPと呼ばれていたサービスが拡張したもの
    - FTPプロトコル（SFTP、FTPS、FTP）に対応したデータ転送サービス
    - 転送先としては、Amazon S3とAmazon Elastic File System

<a id="#その他"></a>
## その他
### AWS Application Migration Service (AWS MGN) は AWS Server Migration Service (AWS SMS) や VM Import と何が違うのか

- AWS MGN が使える環境なら MGN
- AWS MGN が使えない環境なら CloudEndure （OSが古い、MGN 未対応リージョン等）
- エージェントがインストールできない環境なら AWS SMS
- AWS SMS が利用できない環境なら VM Import （AWS SMS で必須となる VMware vCenter がない場合の選択肢）

### 移行ツールの変遷
- VMimport:VMwareのVMDKやOVFをインポート
↓
- AWS Server Migration Service:vCenterから直接イメージを抜き出してAWS上に仮想マシンを自動作成するツール

- CloudEndure:OS上からマシンイメージをバックアップして移行するツール

↓
- AWS Application Migration Service:CloudEndureの技術を吸収し再編して完全に自社のサービスとして出してきた

## DB移行ツール
- データベースの移行には、AWS Database Migration Service (AWS DMS) を使用することが最良のアプローチ
- ダウンタイムなしでデータベースを移行できる
- Pg_dumpでも実現可能そう

## 参考文献
- [クラウド移行の最初の一歩～ AWSで使える移行ツール ～](https://managed.gmocloud.com/knowledge/aws/migration04.html)
- [AWS への移行はどうする？ 今後は MGN (AWS Application Migration Service) が主流に](https://aws.taf-jp.com/blog/72788)

- [AWS移行あるある](https://qiita.com/REALKTMR/items/32cb70aca4a79c616fc7)

- [これだけは押さえておきたい、AWS移行全12ツール一挙紹介！](https://aws.amazon.com/jp/blogs/psa/migration_tools/)

- [Amazon RDS の PostgreSQL にデータをインポートする](https://docs.aws.amazon.com/ja_jp/AmazonRDS/latest/UserGuide/PostgreSQL.Procedural.Importing.html)
Gitコマンド 備忘録

よく使うのにいつも忘れてググるコマンドをまとめるついでに個人的によく使うコマンドをまとめる


$ git branch
ローカルブランチを見る

$ git branch -a
全てのブランチを見る

$ git branch -r
リモートブランチを見る

$ git branch <ブランチ名>
現在のプランチを基に新規ブランチ<ブランチ名>を作成

$ git branch -d <ブランチ名>
ローカルブランチを削除

$ git checkout <ブランチ名>
<ブランチ名>に移動

$ git tag -a
全てのタグを見る

$ git pull
リモートの変更をローカルに反映する

$ git add 
インデックスにコミットしたいファイルを登録する
変更された全ファイルが対象

$ git add -A
インデックスにコミットしたいファイルを登録する
新規追加、更新、削除のファイルが対象

$ git add -u
インデックスにコミットしたいファイルを登録する
更新、削除のファイルが対象

$ git add <ファイルパス>
インデックスにコミットしたいファイルを登録する
ファイルを個別に登録

$ git commit -m <コミットメッセ―ジ>
addしたファイルをコミットする
`-m <コミットメッセ―ジ>`はなくてもいい

$git reset --soft HEAD^
直前のコミットを取り消す
コミットしてから間違いに気づいたり、コミットメッセージを変更したいときによく使う

$ git push 
コミット済みのものをリモートにpush

$ git push --set-upstream origin <ブランチ名>
ローカルに作成したブランチをリモートに初めてpushするときにつかう
$ git push を叩いたらエラーになって上記のコマンドがでてくるからそのままコピペして叩いたらOKではある

$ git config credential.helper store
push, pullなどの実行時にいちいちユーザ名, パスワードを聞かれてめんどくさい時に使う
以下のように.git-credentialsにユーザ名とパスワードが平文で保存される
`https://USERNAME:PASSWORD@github.com`

$ git 
`git --help`と同じ
gitの情報がいろいろ出てくる。
この記事を読むよりよっぽどためになる。


$ git remote show origin
現在のブランチの状態が見える。
`tracked`は問題のないブランチ、`stale`はゴミ

$ git remote prune origin
上記のゴミを消すコマンド

【参考】
[git パスワードを毎回聞かれる問題をHTTPSでも解決](https://qiita.com/Kamo123/items/c92b03278b6302c641e3 "git パスワードを毎回聞かれる問題をHTTPSでも解決")
[[Git]コミットの取り消し、打ち消し、上書き](https://qiita.com/shuntaro_tamura/items/06281261d893acf049ed "[Git]コミットの取り消し、打ち消し、上書き")
Tailwindでフォントサイズのクラスに付いてくるline-heightを削除する

## はじめに

Tailwind CSS では、`text-*` クラスを適用すると `font-size` だけでなく `line-height` も一緒に適用されます。
しかし、デザインによってはデフォルトの `line-height` を適応させたくないケースがあります。
本記事ではその解決方法を紹介します。

:pushpin: **検証バージョン: Tailwind CSS v3.3.0**


## 変更前の動作
デフォルトでは `text-*` クラスを適用すると、 `line-height` も一緒に出力されます。

```index.tsx
// テストコード
<div>
    <div className="text-xs">text-xs</div>
    <div className="text-sm">text-sm</div>
    <div className="text-base">text-base</div>
    <div className="text-lg">text-lg</div>
    <div className="text-xl">text-xl</div>
    <div className="text-2xl">text-2xl</div>
    <div className="text-3xl">text-3xl</div>
    <div className="text-4xl">text-4xl</div>
    <div className="text-5xl">text-5xl</div>
    <div className="text-6xl">text-6xl</div>
    <div className="text-7xl">text-7xl</div>
    <div className="text-8xl">text-8xl</div>
    <div className="text-9xl">text-9xl</div>
</div>
```

### 出力されるCSS

![スクリーンショット 2025-01-31 20.34.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42028/59fb549d-7b53-6f0a-3f51-15febc442f80.png)


## `line-height` を削除する設定



`tailwind.config.ts` に以下の設定を追加し、 `line-height` を除外します。


```tailwind.config.ts
import type { Config } from "tailwindcss";
const defaultTheme = require('tailwindcss/defaultTheme');
const defaultFontSize = defaultTheme.fontSize;

const config: Config = {
  theme: {
    extend: {
      fontSize: {
        // ここを追加
        ...Object.fromEntries(
          Object.entries(defaultFontSize).map(([key, value]) => [key, (value as [string, object])[0]])
        ),
      },
      // ...
    }
  }
};
export default config;
```

`defaultFontSize` には下記のオブジェクトが入っているので、
`font-size` の値のみを抽出しています。

デフォルト値の参照
https://v3.tailwindcss.com/docs/theme#referencing-the-default-theme

```
{
    xs: ['0.75rem', { lineHeight: '1rem' }],
    sm: ['0.875rem', { lineHeight: '1.25rem' }],
    base: ['1rem', { lineHeight: '1.5rem' }],
    lg: ['1.125rem', { lineHeight: '1.75rem' }],
    xl: ['1.25rem', { lineHeight: '1.75rem' }],
    '2xl': ['1.5rem', { lineHeight: '2rem' }],
    '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
    '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
    '5xl': ['3rem', { lineHeight: '1' }],
    '6xl': ['3.75rem', { lineHeight: '1' }],
    '7xl': ['4.5rem', { lineHeight: '1' }],
    '8xl': ['6rem', { lineHeight: '1' }],
    '9xl': ['8rem', { lineHeight: '1' }],
} 
```

## 変更後の動作

`line-height` が削除され、 `font-size` のみが適用されるようになりました。

![スクリーンショット 2025-01-31 20.35.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42028/8d573da4-23b2-9acc-e567-fd372466e309.png)
JavaScriptにおける関数の書き方

# はじめに
こんにちはプログラマー2年目の塚田と申します。
最近のお仕事ではJavaScriptの関数についてじっくり触れる機会があり、
「こんな書き方ができるんだ～～」と勉強する毎日です。

特に気になったのは関数の書き方です。
調べてみるといろいろな関数の書き方があったので記事にしてみようと思います。

# 関数宣言
初めに一般的でよく見る書き方である、**functionキーワード**を使う書き方。

```js
function displayName(name){
    return 'こんにちは、' + name + 'さん';
}

console.log(displayName("太郎"));  // →こんにちは、太郎さん
```

次に関数を変数に代入する書き方を試します。
# 関数式(無名関数)
```js
const displayName = function(name){
    return 'こんにちは、' + name + 'さん';
}

console.log(displayName("太郎"))  // →こんにちは、太郎さん
```
この関数の書き方では以下のようなメリットがあります。
・関数名の衝突(重複)を避けられる。
・コードが短くなる。
・その場所でのみ実行することを表現できる。

私も始めてみた時は、わざわざ無名関数で書かなくてもよくないか？
と思っていましたが、意外と便利で使えそうですね。
また、コールバック関数ともいうそうです。

# アロー関数
```js
const displayName = name => 'こんにちは、' + name + 'さん';

console.log(displayName("太郎"));  // →こんにちは、太郎さん
```
アロー関数では関数の定義を簡略化できるという点です。
さっきまで書いていた**function**や**return**は省略されています。
一行で書けるのでとても見やすいですね。

次は関数にデフォルト値を入れた書き方です。
# デフォルト引数
```js
function displayName(name = "太郎"){
    return 'こんにちは、' + name + 'さん';
}

console.log(displayName());  // →こんにちは、太郎さん
```

自分で書いといてなんですが、これ使う機会あるのかな...
知っておいて損はないでしょう！！

ちなみに引数を配列として受け取ることもできるらしいです。
```js
function sum(...numArray){
    let total = 0;
    for(let i = 0; i < numArray.length; i++){
        total += numArray[i];
    }
    return total;
}
console.log(sum(1,2,3,4,5))  // →15
```

# おわりに
今回はJavaScriptでの関数の書き方について書いてみました。
紹介だけで終わってしまいましたが、書き方による利点の詳細については
次回以降、調べて記事にしていこうかと思います。
以上、塚田でした。
Gemini 2.0 Flashについて

## はじめに
こんにちは、水野です。
私は普段ヘルプデスク業務をしており、システムのエラーから一般的なPCの使い方まで
幅広い問い合わせが普段から届くのですが、ユーザにもPCを使い慣れている人から
「キーボードって何ですか」なんて人まで本当に様々です。

そのためPCを使い慣れていない人達向けのツールはないのか、普段から調べたりするのですが
画期的なツールGemini 2.0 Flashを見つけたので、実際に使ってみた感想をお話ししようかと思います。


### Gemini 2.0 Flash
簡単に言うとGoogleが出しているChatGPTのようなもので、
テキストだけでなく、画像、動画、音声などの入力にも対応しています。
その中で着目すべき機能は、画面共有をしながら質問ができる機能かと思います。

先ほど名前を出したChatGPTは画像をアップロードすると、画像内のオブジェクトやシーンを特定し説明をしてくれたり、グラフや図表の内容を解説をしてくれるなどの機能はあるのですが、画面共有をしながら質問に答えてくれる機能はまではありませんでした。

＜実際の使用方法＞
[こちら□](https://note.com/zunda_ai/n/n0c6c73480d1b)のページを参考に
Google AI StudioにログインしてStream Realtimeと進んでいくと以下の画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/b2f25de6-454d-1af8-f7de-8b8af4485d2f.png)

そうしたらShere your Screanを選択すると、どの画面を共有するのか選択するが画面が表示されるので
実際に画面に表示しているアプリ等を選択していきます。

### 利点
画面共有をしながら質問ができるので、画面が遷移していきながらも随時質問をすることができる点が素晴らしいと思います。

実際にゲーム画面を共有し、リアルタイムに質問を投げかけていく動画もYouTube上で見受けられました。
[【新時代】ゲーム画面をリアルタイム分析する最新AI使ったら、Apex Legendsで優勝余裕説
](https://youtu.be/tEKXe4eFBXU?si=P6a15eWnDMdeU9oC)

自分の環境ではExcel・Teams・Outlookの画面共有をしながら
ファイルの添付方法などの簡単な機能について質問を投げたところきちんと回答をしてくれました。
音声ファイルが添付できず実際の回答を共有できず申し訳ないです。

### 欠点
日本語にも対応してくれている点がとても素晴らしいのですが、たまに聞き取れない回答が確認できました。
また、画面共有機能の回答はテキストで返すことはできないなど不都合な点がいくつか見受けられました。

## 最後に
現在はGemini 2.0の実験版として「Gemini 2.0 Flash」が公開されているようなので、
今後、より日本語にも正確に対応できるようになっていってたり、
テキストでの回答もできるようになってもらえると、ヘルプデスクや周りの人に相談する際に
「何がわからないのか」をこちらが汲み取りやすくなるな～と思います。

PCを使うことに慣れていない人でも気軽にサポートを受けつつ、
業務に当たれるような環境を作っていけるような時代が本当に近づいていることを体感できると思うので、ぜひ試しに使ってみてください。
よわよわエンジニア、UI・UX修行を始める ~デザイン4原則、全部言えますか？~

## はじめに
本記事では、UI・UXデザイン方面でつよつよになりたい筆者が、UI・UXデザインに取り組んでいくなかで身に染みて感じたことを書いています。

## デザイン4原則、全部言えますか？

デザインを志す人なら絶対に触れたことがあるはずの原則、「デザイン4原則」。
何も見ないで全部言えますか？
説明できますか？

答えは以下。
- **近接**：関連する項目は近づけてグループ化すること
- **整列**：ページ上のすべてのものを意識的に配置すること
- **反復**：デザインの視覚的要素を作品全体を通してくり返すこと
- **コントラスト**：同一でない要素をはっきり異ならせること

## Markdownで見るデザイン4原則

さてこのデザイン4原則、身の回りのあらゆるデザインに使われているといっても過言ではありません。
今まさにこの記事を読んでいるあなたの目の前にあるMarkdownにおいても、当然デザイン4原則が適用されています。

### 近接

[はじめに]の章、[デザイン4原則、全部言えますか？]の章、[Markdownで見るデザイン4原則]の章で、タイトルと文章がギュッと近くに配置されていて、間に余白が大きく空いているのがわかるでしょうか。

![2025-01-31_21h02_20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1062427/4f81a3d1-a2dd-3513-62c0-e5b1ce98d441.png)

近接とは、関連する要素を近づけてグループ化すること。
近接のメリットは、複数の要素同士が関係のある1つのユニットであることが瞬間的に読み手に伝わることです。
逆に、関連しない要素を近づけてしまうと、読み手の混乱を招いてしまいます。

### 整列

赤い線を引いたところ、章のタイトルや文章の頭がまっすぐ揃っていることがわかるでしょうか。
箇条書きの●も縦にまっすぐ並んでいます。
![2025-01-31_21h12_34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1062427/b831a595-9352-61a2-03e2-42a2408fd2e6.png)

整列とは、ページ上のすべてのものを意識的に配置すること。ページ上のすべての項目が、何か他の要素と視覚的に関連している必要があります。
整列のメリットは、ページ上の要素を(たとえ離れた位置にあったとしても)、他の要素と揃えて配置することによって、ページ上の一体感を生み出せることです。
逆に、ページ上の要素をどことも揃えないで適当に配置すると、画面が無秩序でゴチャついて見えてしまいます。

### 反復

ページ上で、「章タイトルとグレーの線、本文」のセットが章ごとに繰り返されています。これが反復です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1062427/b1ecd12f-3b5d-a7fa-0009-ed30af04956a.png)

反復とは、デザイン上の何かの特徴を作品全体を通して繰り返すこと。
反復させる要素にはフォントや罫線、アイコン、フォーマットなどが挙げられます。
反復のメリットは、デザインに一体感と「おもしろさ(目を惹くアクセント)」を生み出せることです。
また、ページが複数ある場合にも効果的です。例えば、本の章や説の見出しのデザインが統一されて反復されていることで、読み手は「あ、次の章に入ったな」と理解できます。読み手の理解や情報の組織化を助けることにもなるのです。

### コントラスト

タイトルの字、本文に比べると太くて目立ちますよね。これがコントラストです。
![2025-01-31_21h35_50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1062427/427613e1-951c-8fee-7a4d-f9c11edda703.png)

コントラストとは、2つの項目が同じでない場合にはっきりと異ならせること。
コントラストのメリットはページの「おもしろさ」を生み出せることと、読み手の情報の組織化を手助けできることです。
コントラストをはっきりつけて読み手の目を惹きつつ、視覚的に作品の構造をわかりやすくして読者に内容を一瞬で理解させる効果があります。

## まとめ

デザイン4原則は、意識して見てみるとあらゆるデザインというデザインに使われています。
「自分はデザイナーじゃないぜ」という人も、ドキュメントやスライドを作成するときに少し意識してみると良いかもしれません。

## 参考

『ノンデザイナーズ・デザインブック』(Robin Williams 著)
🎨 究極のグラデーションゲートウェイ – 創造性のためのグローバルコンパニオン！🌍🚀  

### 🎨 究極のグラデーションゲートウェイ – 創造性のためのグローバルコンパニオン！🌍🚀 
![Gemini_Generated_Image_yuoqltyuoqltyuoq.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3999431/23157333-3e75-859f-346e-ce3636e864e4.jpeg)


デザイン、アプリ、ウェブサイトを圧倒的なグラデーションでレベルアップする準備はできましたか？  
アートとテクノロジーが融合し、創造力が無限に広がる **究極のグラデーションゲートウェイ** へようこそ！🌈  

### ✨ あなたの作品を変革  
🔥 シームレスで美しいグラデーションを簡単に作成  
🔥 ウェブデザイン、アプリ開発などに即座にエクスポート  
🔥 JavaScript、CSS、HTML に最適化され、高速でスムーズなパフォーマンス  

### 🌍 国際対応で、どこでも使える！  
世界中のどこにいても、[**究極のグラデーションゲートウェイ**](https://akshayadeveloper.github.io/Gateway-To-Gradients/Gateway-To-Gradients.html) はあなたのクリエイティブパートナーです。  
🔤 **お好みの言語** でアクセスし、かつてないデザイン体験を。  

---

### 👑 なぜ私たちを選ぶべき？  
🌟 **使いやすいインターフェース** – 直感的でパワフル  
🌟 **すべてのクリエイターに対応** – 初心者からプロまで  
🌟 **時間を節約** – ツールに悩まず、創造に集中  

---

### 📣 重要なデザインツール  
**無限の可能性を解き放とう！**  
ウェブサイト構築、アプリ開発、アート制作…どんなプロジェクトでも活躍します。  
🔗 **ゲートウェイを探索**：[[ここから 💖]](https://akshayadeveloper.github.io/Gateway-To-Gradients/Gateway-To-Gradients.html) 

---

### 💡 ムーブメントに参加しよう！  
💬 **意見を共有** – フィードバックで成長をサポート！  
📢 **広めよう** – この革新的なツールを世界にシェア！  
💰 **支援する** – 寄付でグローバルな創造性を応援！[(対応暗号通貨寄付)](https://akshayadeveloper.github.io/Gateway-To-Gradients/Gateway-To-Gradients.html)  

---

### 🌟 早期サポーター限定特典  
✨ クリエイティブの先駆者として **プラットフォームで紹介** されるチャンス！  
[**今すぐ参加し、あなたの足跡を残そう！** ](https://akshayadeveloper.github.io/Gateway-To-Gradients/Gateway-To-Gradients.html)

---

## GATEWAY TO GRADIENTS  
📢 **デザイナー、開発者、クリエイターの皆さんへ！**  
一緒に **グラデーションの未来を革新** しませんか？  
無限の可能性を探求し、あなたのビジョンを簡単に実現！  

#UltimateGatewayToGradients #CreativeInnovation #DesignWithoutLimits #GlobalDesignTools #WebDesignMagic #SupportCreativity
#0029（2024/01/31）H.264 と H.265 の違い

# H.264 と H.265 の違い

H.264（AVC）と H.265（HEVC）は、どちらも動画圧縮のためのコーデックですが、以下の点で違いがあります。

| 比較項目  | H.264（AVC） | H.265（HEVC） |
|-----------|-------------|-------------|
| **圧縮率** | 標準的 | H.264より約50%高い圧縮率 |
| **画質** | 同ビットレートなら標準的 | 同ビットレートでより高画質 |
| **処理負荷** | 比較的軽い | 高圧縮のためエンコード・デコード負荷が高い |
| **帯域幅の使用量** | 多い | 少ない（約40〜50%削減） |
| **適用例** | フルHD動画（1080p）や一般的なストリーミング | 4K/8K動画や高品質ストリーミング |

# どちらを選ぶべきか？
- **H.264** は、古いデバイスや低スペックな機器でも再生・処理しやすい。
- **H.265** は、帯域幅を節約しながら高画質を実現できるが、エンコード・デコードの負荷が高い。

IPカメラの場合、ネットワーク帯域やストレージの節約を考えると **H.265 のほうが有利** ですが、古い機器や互換性を考慮するなら H.264 を選ぶこともあります。
【VRChat】lilToonのライティング設定を統一し、アバターの光の反射を最適化する。

## はじめに  

VRChatのアバターを改変する際、マテリアルの設定によってパーツごとに光の反射が異なり、不自然な見た目になることがあります。本記事では、この問題を解決するために **lilToon のライティング設定を最適化** し、統一感のあるビジュアルを実現する方法を解説します。  

また、一般的なVRChatユーザーがlilToonのような高度な技術を扱う際に、どのように情報を調べ、問題を解決していくべきかについても考察します。  

## 環境  

本検証は以下の環境で行いました。  

- **Unity**：2022.3.22f1  
- **VRChat Creator Companion**：2.3.4  
- **シェーダー**：lilToon 1.8.5  
- **使用したアバター**：Platinum 1.2.4, Kipfel 1.1.0  

VRChatのアバター改変における基本的な手順（パッケージのインポートやアップロードなど）は省略します。  
また、本記事の内容は **lilToon の設定を操作できる状態を前提** としています。  

## 変更前後の比較  

### **Before**（設定前）  

![VRChat_2025-01-31_20-01-56.691_1080x1920.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2849368/707019b3-583a-4456-b319-17446da4df5e.png)
  
色や明るさに統一性がなく、不自然に見える部分がある。  

### **After**（設定後）  

![VRChat_2025-01-31_20-24-55.714_1080x1920.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2849368/e24089a5-ac94-c2b6-756b-5470556ad266.png)

色や明暗のバランスが適切になり、全体的に自然な見た目になった。  

## 問題の分析  

### ■ 発生した問題  

- アバターのパーツごとに光の反射が異なり、全体の統一感が損なわれている。  

### ■ 原因の仮説  

- ライティングの計算は **マテリアルのシェーダー設定** に依存するため、lilToon のライティング関連のパラメータが影響している可能性が高い。  
- 使用しているアバターの各パーツで、マテリアルごとに異なるライティング設定が適用されていると考えられる。  

## 調査手順  

### ① 一旦どこにライティング設定があるか見てみる。

あった。

![hair_liltoon_material.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2849368/a6ecc5ef-17f2-7a2e-ad0e-9861ee367b57.png)

### ② 調整すべきパラメータの特定  

髪と服のマテリアルを比較してみました。

髪のマテリアル

![hair_liltoon_material.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2849368/a6ecc5ef-17f2-7a2e-ad0e-9861ee367b57.png)

服のマテリアル

![wear_liltoon_material.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2849368/ac15b24b-77bd-c08c-b1b5-5b1551138b73.png)

なんとなく
- 明るさの下限
- 明るさの上限
- ライトのモノクロ化

あたりが気になるなーと思いつつ、公式ドキュメント（[lilToon公式](https://lilxyzw.github.io/lilToon/ja_JP/base/lighting.html)）を参照してパラメータを調べてみると、以下のパラメータを調節すると良さそうだと分かりました

※それぞれの解決したい課題によって関連項目は異なる可能性があります。各々でドキュメントを読んで判断してください。

| パラメータ | 説明 | 設定方針 |
|------------|------|----------|
| **明るさの下限** | マテリアルの最低輝度を設定 | 統一することで、暗部の差異をなくす |
| **明るさの上限** | マテリアルの最大輝度を設定 | 上限を統一し、過度なハイライトを防ぐ |
| **ライトのモノクロ化** | ライティングの彩度を調整する | 必要に応じて統一（カラーバランスを調整） |
| **影色への環境光影響度** | 影色への環境光の影響度合いを調整 | 環境光の影響を統一し、全体の明暗差を均一化 |
| **Unlit化** | マテリアルをライティングの影響を受けない状態にする | 一部のパーツのみ適用（例：目や装飾など） |

### ③ マテリアルの設定を統一  

上記のパラメータを意識しつつ、基本的には服の値に統一する形で光の反射が一貫するように設定しました。  

## まとめ  

lilToon のライティング設定を適切に調整することで、**アバターの光の反射を統一し、違和感のないビジュアルを実現** できることがわかりました。  

また、今回の検証を通じて、一般的なVRChatユーザーが技術的な問題を解決する際には **公式ドキュメントを活用することが重要** であることを確認しました。

適切に情報を調査しながら試行錯誤を行うことで、より高度なカスタマイズが可能になります。

## 参考資料  

- [lilToon公式ドキュメント - ライティング設定](https://lilxyzw.github.io/lilToon/ja_JP/base/lighting.html)
PineScriptで米国株式とビットコイン（暗号通貨）の連動性・相関性を計算 


## 概要  
近年、ビットコインをはじめとする暗号通貨と米国株式市場との関連性が注目されている。これら資産間の相関性を把握することは、ポートフォリオのリスク管理や市場の動向をより深く理解するうえで重要である。本記事では、TradingViewの[PineScript](https://www.tradingview.com/pine-script-reference/v6/?aff_id=112991&source=qt0j-tradingview)を用いて、米国株式（例：S&P500指数）とビットコインの相関性を計算する方法について解説する。また、実装例を示すとともに、使用時の注意点についても言及する。  

https://www.tradingview.com/pine-script-reference/v6/?aff_id=112991&source=qt0j-tradingview

---

## 対象読者  
本記事は以下のような読者を想定している。  
- TradingViewおよびPineScriptに関心がある方  
- 暗号通貨と株式市場の関連性を分析したい方  
- システムトレードやデータ分析を学びたい方  

---

## 相関性の定義  
相関性は、2つのデータセット間の関係を表す統計的指標である。PineScriptでは`ta.correlation()`関数を用いることで、指定された期間における2つの資産の相関係数を計算することが可能である。相関係数は-1から1の値を取り、以下のように解釈される。  

- **+1**: 完全な正の相関  
- **0**: 無相関  
- **-1**: 完全な負の相関  

---

## 実装手順  

### 1. 必要なデータを準備  
PineScriptでは、データソースとして別のシンボルを参照することが可能である。以下の例では、ビットコイン（BTCUSD）とS&P500指数（SPX）を使用する。  

```pinescript
//@version=5
indicator("Correlation: BTCUSD vs SPX", shorttitle="BTC vs SPX", overlay=false)

// データ取得
btc = request.security("BTCUSD", "D", close)
spx = request.security("SPX", "D", close)

// 相関係数の計算（過去30日間）
correlation_period = 30
correlation = ta.correlation(btc, spx, correlation_period)

// 相関係数をプロット
hline(0, "Zero Line", color=color.gray, linestyle=hline.style_dotted)
plot(correlation, color=color.blue, linewidth=2, title="Correlation")
```

### 2. チャート上での表示  
上記のスクリプトでは、相関係数が-1から1の範囲で変動する様子をチャート上にプロットしている。このグラフを用いることで、2つの資産間の連動性を視覚的に把握することが可能となる。

---

## 使用時の注意点  

### 1. データ精度と更新頻度  
TradingViewの`request.security`関数で取得したデータは、選択した時間軸（タイムフレーム）に依存する。異なる時間軸を使用する場合、結果が異なる可能性がある点に留意すべきである。  

### 2. 相関の一時的な変動  
相関関係は時間とともに変動するものであり、必ずしも一定ではない。特に市場のボラティリティが高い状況下では、相関係数の値が急激に変動する場合がある。そのため、単一の期間における相関性のみを基にした意思決定はリスクを伴うであろう。  

### 3. 過剰解釈のリスク  
相関性が高い場合でも、必ずしも因果関係を意味するわけではない。たとえば、米国株式とビットコインが同じ方向に動くとしても、それが一方の動きによる影響であると断定することは慎重に行う必要がある。  

---

## 応用例  

### 異なる資産クラス間の分析  
本手法は、ビットコインと米国株式に限らず、その他の資産クラス（例えば、金や原油）にも応用可能である。これにより、ポートフォリオ全体の相関性を把握し、リスク分散戦略を立案する助けとなるであろう。  

### トレード戦略への応用  
相関性が高い場合、片方の資産の動きを先行指標として利用する戦略も考えられる。例えば、米国株式市場が急上昇した場合、その動きがビットコインに波及する可能性があると予測し、エントリーのタイミングを計るといった方法が挙げられる。  

---

## 結論  
PineScriptを用いて資産間の相関性を計算することで、マーケットデータをより深く理解し、分析力を向上させることが可能である。本記事の内容が、読者諸氏のトレードや投資判断の一助となれば幸いである。  

TradingViewの可能性をさらに追求し、より洗練されたトレード戦略を構築されることを期待している。

---

APIドキュメント：

https://www.tradingview.com/pine-script-reference/v6/?aff_id=112991&source=qt0j-tradingview

---

## 免責事項  

本記事に記載されている内容は、筆者がTradingViewおよびPineScriptを用いて学び得た知識と経験を基に執筆したものである。内容の正確性および完全性については可能な限り配慮しているが、必ずしもその保証をするものではない。  

自動売買Botの構築や運用、またそれに関連する投資活動は読者自身の判断と責任に基づいて行われるべきであり、筆者および本記事を掲載するプラットフォーム（Qiita）は、それによって生じたいかなる損失や損害に対しても一切の責任を負わないものとする。  

特に、トレードに関する意思決定は市場リスクを伴うため、実運用前に十分な検証とリスク評価を行い、必要に応じて専門家への相談を推奨する。  

読者各位の責任において本記事をご活用いただければ幸いである。
初めてAIでサイトを作ってみた話

# 筆者について

```
name → Koki Teramoto
age → 18
language → ja_JP, en_US
```

# 本編

この度、新しいプロフィールサイトを公開しました。

https://profile.terarin-iw.net/

本当にまだまだやらないといけないことがありますが、とりあえず公開した次第です。ただ、今回はこのサイトの公開までに初めてAIを駆使しましたので、今回はその軌跡を書いておきたいと思います。

## 前提環境

- Next.js
- AWS Amplify

## まずはmakerealで大まかなサイトを作成

とりあえず超絶大まかにイメージを作ってサイトの雛形を作りました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/583428/9bb881fa-397c-7e49-fb98-765aacfd90c9.png)

さて、これをHTMLに表示されますので次はそれをJSXに変換します。

https://transform.tools/html-to-jsx

これを描き始めたら終わりです。

## Geminiでひたすら命令する

あとはGeminiでひたすら命令していくだけです。とりあえず、ダークモードの追加とレスポンシブデザインに対応させました。

> Rewrite code with using Tailwind CSS and devide right section and left section using grid system.

Gridの設定はちゃんとしてくれたのですが、レスポンシブデザインはそんな簡単にいきませんでした。めちゃめちゃバトルしました。ちなみに、この途中で実はテーマスイッチを作らせたりします。

> Make darkmode and add toggle which to switch between two.

ただ、Geminiはi18nには弱かったです。おそらくですが、いろいろなやり方存在するものですので古いi18nのやりかたを紹介したりもしてきました。

> I want to add the translation function on that page. How can you solve?

> Thanks for your suggestion, but could you use i18n library?

と、もうこっから先はひたすら細かい指示ばっかの入力だったので省きますが、それが上のサイトとなりました。

## 感想

今回これを使った感想としては、何個か手順をスキップしてしまったり古い物を紹介してしまったり、そういうことがあったので、そういう時はかなり細かく指示をしなおしたらおおかたは訂正してくれます。

# 最後に

今回初めて使ったのですが、UI以外のロジックやバックグラウンドは自分で書いた方が良さそうですね。ただ、使い方次第ではあると思いますので今後も勉強していきたいと思います。
シェルスクリプトの構文省略形をまとめてみた


こんにちは！エンジニアの篠原です:penguin:
今回は、業務でシェルスクリプトを書く機会があり
ここってもっと短く書けないの？と思い調べたところ
様々な構文省略形がありましたのでまとめてみたいと思います！


## ・if文

if文は、**&&** と **||**　を使って省略することができます。

```shell:&& を使ったtrueパターン
# 通常の構文
if some_command; then
  echo "成功！"
fi

# 省略文
some_command && echo "成功!"
```


```shell: || を使ったfalseパターン
# 通常の構文（失敗時の処理のみ）
if ! some_command; then
  echo "失敗"
fi

# 省略文
some_command || echo "失敗"
```

```shell:&& と || を組合せたパターン
# 通常の構文
if some_command; then
  echo "成功！"
else
  echo "失敗"
fi

# 省略文
some_command && echo "成功！" || echo "失敗"
```



また短い条件文であれば以下のように書くことができます。

```shell
# 通常の構文
if [[ -z "$text" ]]; then
  echo "空です"
fi

# 省略文
[[ -z "$text" ]] && echo "空です"
```



## ・for 文とwhile 文
シェルスクリプトでは改行の代わりに ; を使うことでまとめることができる為、
for 文やwhile 文はこちらを使って短くできます。
ですが、可読性が下がってしまっては意味がないので
簡単なループのときだけ使うのがいいかもしれません。

```shell:for 文
# 通常の構文
for f in *.txt
do
  echo "Processing $f"
done

# 省略文
for f in *.txt; do echo "Processing $f"; done
```

<br>

```shell:while 文
# 通常の構文
while read -r line
do
  echo "Line: $line"
done

# 省略文
while read -r line; do echo "Line: $line"; done
```







## まとめ
シェルスクリプトは改行を整えて書くほうが可読性が上がる場面も多いですが、
ちょっとしたスクリプトなら、ここで紹介した省略形を使うことで短くまとめられるので使ってみるのもありかもです:thumbsup:
以上、篠原でした:penguin:
【読書感想】「好き」を言語化する技術 推しの素晴らしさを語りたいのに「やばい！」しかでてこない

ランニングしながらAudibleで聴いた本の感想です。
本のまとめというより、自分が心に残ったことを3つだけ書いてます。
とりあえずアウトプットが大切と思い、なるべく30分以内で書き上げているので、内容は薄いです。

# 聴いた本

「好き」を言語化する技術 推しの素晴らしさを語りたいのに「やばい！」しかでてこない (ディスカヴァー携書)
三宅 香帆 (著)

本書で紹介される技術は、個人的には「もうやってる」内容が多かったです。ただし、「やっていることが正しかった」と思うことができたので、良かったです。（個人的満足度２／３、一般的なおすすめ度２．５／３）

# 心に残ったこと

## 無自覚性

いきなり本の内容ではないですが、心に残ったキーワード1位でした。
本の中では確か、「この作品、一般には評価されているけど、主人公の無自覚性が好きじゃない」という例文のような文脈で登場していました。

無自覚性は「いろいろな周辺のことに無自覚でいる性質」という意味で登場していたと思います。
私も以前から「**自分を客観的に見ることができない人、見えないものに配慮できず自分の視野だけで判断する人**」が苦手だなと思っていたのですが、
すべて「無自覚性」という言葉で集約できることに気づきました。

## 情報のギャップを埋める

当たり前ですが、相手に合わせたコミュニケーションの重要性を再認識しました。

（オタクの早口はオタク同士だからできるのであり、、）一般人に好きなものを紹介するには、相手の認識している内容と「ハテナ」を正しく察知して、埋めることが必要なのだと思いました。
よく、「マツコの知らない世界」や「ブラタモリ」で出てくる人が「説明うまいな〜」と思いますが、**相手を観察して情報を埋めることができている**んだなと思いました。

これって、仕事で説明ロジックを考えるときなどは、結構当たり前のようにやっていることですよね。。

## 非公開メモを書く

個人的になんとなくやっていた部分だったので、心に残りました。

ライブの感想などは、なるべく新鮮なうちに自分用メモに雑多に書き留めることが重要ということが説かれており、その雑多なメモを後から見返して、「他人に伝えたいのはどこだろう」と取捨選択し、文章を整えていくと良いというテクニックが書かれています。
これを行うことで「当日の感想が雑」と「翌日以降忘れて感想が薄い」というデメリットを避けられるなと再認識しました。

これも、仕事で「メモを最初は雑に書いて、時間が経ってから重要な部分を抜き出して、まとめる」というのに似ているなと思いました。

私は、非公開メモはGoogle Keepを使っていますが、「昔の人は手帳を使っていたのかな」とか、「だから昔の人は何かと手帳を持っていたり、喫茶店で書いていたりしたの」と思ったりしました。
Whisper + Google Colabで文字おこししてみた

こんにちは、エンジニアの風速です。

今回は音声データから文字起こしをする方法を調査していたところ、OpenAIが提供している、Whisperというサービスがあったのでそれを利用しようとしたのですが、APIは有料ですが、Pythonからの使用は無料ででき、Pythonを知らない自分でも簡単にできたので、音声データからテキストになるまでをまとめたいと思います。

## Whisper
https://openai.com/index/whisper/

OpenAIが開発、提供をしている、自動音声認識（ASR: Automatic Speech Recognition）モデルで、多言語対応で、高精度な文字起こしが可能です。

## Google Colab
https://colab.research.google.com/?hl=ja#

Googleが提供するクラウドベースのPython開発環境でGPUも無料で利用できるので、機械学習やデータ分析に適しています。
Google Colabには90分ルールや12時間ルールなどがあり、セッションが切れてから90分や新しいインスタンスを起動してから12時間経つと、インスタンスがリセットされてしまうので、Google Colabの環境を再度使用する場合は、今回のインストールなどの手順を再度実行する必要があります。

## 手順
### ノートブックの作成

GoogleDriveから作成できます。
右クリック > その他 > Google Colaboratory

![スクリーンショット 2025-01-30 23.10.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/3417c63b-10ce-b1a5-2bb1-2c7ede836f70.png)


### GPUの選択
ランタイム > ランタイムのタイプを変更 > ハードウェアアクセラレータ > Python 3, T4 GPU

![スクリーンショット 2025-01-20 19.32.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/13c689c7-8194-cfab-2550-44db5b3c471c.png)

### whisperのインストール
GPUが割り当てられると、Pythonが対話形式で利用できるので、pipでwhisperをインストールします。

```
!pip install git+https://github.com/openai/whisper.git
```

### オーディオファイルのアップロード
今回はzoomでの会議でレコーディングした音声ファイル(.m4aファイル)をそのまま使用します。長さはだいたい32分ぐらいです。
インスタンスに接続されるとwebからファイルシステムにアップロードできます。出力ファイルなどは`/content`配下に置かれるみたいなことをみたので、ここに配置します。

### モデルの選択と文字起こし
利用可能なモデルは以下になります。英語対応のみと、多言語対応があります。
サイズが大きいものを選択すると、文字起こしの精度は上がりますが、必要スペックなども上がります。

![スクリーンショット 2025-01-31 0.08.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/ccb14402-db96-7b99-d5a8-b91477a38f0f.png)


#### 実行コード
``` python
# インポート
import whisper
# モデルの読み込み(今回は日本語なのでbase or small or midium)
model = whisper.load_model("base")
# 音声ファイル
audio = "/content/audiofile.m4a"
# 音声ファイルを文字起こし
result = model.transcribe(audio)
# 文字起こし結果を表示
print(result['text'])
```

`transcribe()`メソッドは30秒ごとの音声を解析して文字起こし

#### 出力結果
個人名などがでてくるので、多くは割愛しますが、以下のように出力されました。実行時間はmodelがbaseの場合はだいたい1分ぐらいで、smallの場合は2分、midiumは4分ぐらいでした。

```
# base
今レコーディングしましたすいませんあ そのでは忘れましたでは 方向世はこれでいいです...
# small
今、レコーディングしました。すいません。すみません。忘れなさい。報告性はこれでいいです...
# midium
今レコーディングしました。すみません。すみません。忘れなしです。方向性はこれでいいです...
```

## まとめ
精度をみると違うように文字起こしされている所もありましたが、普通の会話音声を文字起こししただけで良い精度のものがでてきて、かなり驚きました。実際に人が聞いて文字起こしするよりは早くできるので、small, midiumぐらいでも実用できると思いました。baseだと日本語は厳しいかもというのが自分の感想です。今回使用したGoogle Colabでは外部からの起動などはなかなか難しいと思うので、実際に何かに組み込むなどの用途で使用するには、Pythonの実行環境を他で用意してやるのが良いかなと思いました。

## 参考
https://qiita.com/yoshi8__/items/0124a5a0c83c9b4e2669

https://github.com/openai/whisper
PowerShellにエイリアスを設定してWSLの起動を楽にする

# はじめに

WindowsでPython開発をしているとWSLのコマンドを一々入力するのが面倒になってきました。

ということでPowerShellのエイリアスにコマンドを登録してみます。

## やりたいこと

- PowerShellにコマンドのエイリアスを追加してスムーズにWSL環境へ接続する

## エイリアスに登録するWSLコマンド

WSLで構築した環境の一覧

```powershell
PS C:\Users\Nichi\work> wsl -l -v
  NAME            STATE           VERSION
* Ubuntu-24.04    Stopped         2
```

イメージの起動

```powershell
PS C:\Users\Nichi\work> wsl -d Ubuntu-24.04
nichi@Priv-001:/mnt/c/Users/Nichi/work$
```

# 準備

プロファイルの確認

```powershell
Test-Path $profile
```

プロファイルの作成（確認がTrueなら不要）

```powershell
New-Item -Path $profile -Type File -Force
```

プロファイルの編集

```powershell
notepad $PROFILE
```

開いたメモ帳に関数とエイリアスを書き込んでいきます。

何故関数を使っているかというと、Powershellでは引数ありコマンドのエイリアスは定義できないためです。

```powershell
function wsl-list {
    wsl -l -v
}
Set-alias -Name vl -Value wsl-list

function wsl-up{
    wsl -d Ubuntu-24.04
}
Set-alias -Name vr -Value wsl-up
```

プロファイルの再読み込み

```powershell
. $PROFILE
```

# 実行

とても楽

```powershell
PS C:\Users\Nichi\work> vl
  NAME            STATE           VERSION
* Ubuntu-24.04    Stopped         2
PS C:\Users\Nichi\work> vr
nichi@Priv-001:/mnt/c/Users/Nichi/work$ 
```
MySQL接続エラーの原因

# はじめに
はじめに、以下のようなエラーに出会したことはありますか？
```
ERROR 2013 : mysqlxx::ConnectionFailed: Lost connection to MySQL server at 'handshake: reading inital communication packet', system error: 104 ((nullptr):0). (ALL_CONNECTION_TRIES_FAILED)
```

このエラーが出たらファイアウォールの可能性を疑ってください。
要は、外部からのアクセスができず、通信エラーが発生している可能性が高いです。ファイアーウォールの設定でMySQLの動作しているポートが閉じていないか確認しましょう。

以上。

# 参考

[Lost connection to MySQL server at 'reading initial communication packet', system error: 0](https://stackoverflow.com/questions/5755819/lost-connection-to-mysql-server-at-reading-initial-communication-packet-syste)
Pythonで手軽に3D都市モデルを可視化してみる

# はじめに

[PLATEAU](https://www.mlit.go.jp/plateau/)は国土交通省が推進する、日本全国の都市デジタルツイン実現プロジェクトです。
そんなPLATEAUの3D都市データをPythonから手軽に扱えるライブラリである「[PlateauKit](https://github.com/ozekik/plateaukit)」が気になったので、簡単に試してみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2542055/9ac15e93-cfe2-faa3-7b17-f7bf275a7302.png)

# やったこと

[こちら](https://ozekik.github.io/plateaukit/)のドキュメントを参考に、都市モデルの取得からデータ集計・可視化までを行ってみました。

以下、その結果を紹介していきます。

## 動作環境
Ubuntu 20.04.6 LTS
Python 3.12.4

## ツールのインストール
以下のようにpipで簡単にインストールできます。
```bash
pip install 'plateaukit[all]'
pip install jupyterlab
```

## 都市モデルデータの取得と事前ビルド
はじめに、都市モデルデータの取得と事前ビルドを実行します。今回は渋谷区のデータを使うことにしました。
```bash
# 利用可能な都市モデルの一覧を表示
plateaukit list

# 渋谷区のデータを取得して事前ビルド
plateaukit install plateau-13113-shibuya-ku-2023 -v
plateaukit prebuild plateau-13113-shibuya-ku-2023 -t bldg -t tran
```

## データの可視化・集計

ここから、JupyterLab上で実際に都市データを扱っていきます。

まずはデータセットから指定範囲の都市モデルを取得します。範囲を指定する方法としては緯度経度や住所などいくつか提供されていますが、ここではランドマーク名の指定で渋谷駅周辺のエリアを取得しています。

```python
from plateaukit import load_dataset

dataset = load_dataset("plateau-13113-shibuya-ku-2023")

area = dataset.area_from_landmark("渋谷駅") # 渋谷駅周辺のエリアを取得

area.show() # 3D都市モデルとして表示
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2542055/be580f8a-76c3-4db9-90ba-d1fb525752c7.png)


次に、都市モデルが持つ情報の一つであるusage(建物の用途)を集計してみます。

※以下のarea.gdfは、Pandasを地理空間データ用に拡張したライブラリであるGeoPandasのGeoDataFrameです。通常のPandas.DataFrameと同じような操作ができます。

```python
# 建物の用途情報ごとに集計
usage_counts = area.gdf["usage"].fillna("未分類").value_counts()
usage_counts
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2542055/4f143209-a854-d67a-ecdd-ccc39eceacb8.png)


```python
import plotly.express as px

fig = px.bar(
    x=usage_counts.index,
    y=usage_counts.values,
    labels={"x": "種類", "y": "件数"},
    color=usage_counts.index,
)
fig.update_layout(showlegend=False)
fig
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2542055/f6e96814-81e6-e305-414e-258930ca9bbb.png)


さらに、以下のようにマップ上で建物を用途ごとに色分けして表示することもできます。

```python
color_map = {trace.name: trace.marker.color for trace in fig.data}
color_map = {k: [int(v[1:3], 16), int(v[3:5], 16), int(v[5:7], 16)] for k, v in color_map.items()}

area.gdf.loc[:, "fill_color"] = area.gdf["usage"].fillna("未分類").map(color_map)

area.show()
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2542055/e1a5f61a-d08f-c946-f8af-66a23a012fed.png)

# おわり
以上、PlateauKitの基本的な動作を試してみた結果でした。
今回紹介した以外にも面白そうな機能や応用例があるので、引き続き勉強してみたいと思います。
【React、ChakuraUI】とりあえずそういうことかとなるVstck、Hstack



## 🏗 はじめに
Reactでタスク管理アプリを作る際に、
ChakraUIのstackを使ってUIがすぐ整えられて感動を覚えたので共有したく記事にしました。

Chakra UI を使うとレイアウトを簡単に構築できます。
特に `VStack` と `HStack` を使うことで、要素を縦・横に直感的に配置できます。

本記事では `VStack` と `HStack` の違いを、実際のコードと画像で比較しながら見ていきます。

**（細かい説明は省略します！仕組みや詳細気になることは公式ドキュメントや他記事を参考にしていただけたらと思います）**

---

## 📌 コード例

以下のコードの `Stack` を `VStack` にした場合と `HStack` にした場合のレイアウトを比較してみます。

### 1. `VStack` の場合（縦並び）

```tsx
<VStack spacing={4} align="stretch">
  <Button colorScheme="blue">ボタン1</Button>
  <Button colorScheme="red">ボタン2</Button>
  <Button colorScheme="green">ボタン3</Button>
</VStack>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3909033/353ab241-0dab-7c44-ffde-87be90c810e1.png)


### 2. `HStack` の場合（横並び）

```tsx
<HStack spacing={4}>
  <Button colorScheme="blue">ボタン1</Button>
  <Button colorScheme="red">ボタン2</Button>
  <Button colorScheme="green">ボタン3</Button>
</HStack>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3909033/f13f218f-b9cf-446b-f843-a93f14212a9a.png)

---

## 🔍 `VStack` あり vs なし の比較

僕が作成中のタスク管理アプリにて途中段階ですが
Vstackありなし違いを見ていきましょう。

### 1. `VStack` あり

```tsx
<VStack spacing={4} align="stretch" p={4}>
  <h1 data-testid="title">タスク管理アプリ</h1>
  <Button onClick={openAddModal}>タスクを登録する<IoAddCircleSharp /></Button>
  <TableContainer>
    <Table variant="simple" data-testid="table">
      <TableCaption>タスクリスト</TableCaption>
      <Thead>
        <Tr>
          <Th>タスク名</Th>
          <Th>かかる見込時間</Th>
        </Tr>
      </Thead>
      <Tbody>
        {todos.map((todo) => (
          <Tr key={todo.id}>
            <Td>{todo.title}</Td>
            <Td>{todo.time}</Td>
          </Tr>
        ))}
      </Tbody>
    </Table>
  </TableContainer>
</VStack>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3909033/fb9722e2-2150-37ff-4b31-47cddad31591.png)


### 2. `VStack` なし（フラット配置）

```tsx
<div style={{ padding: "16px" }}>
  <h1 data-testid="title">タスク管理アプリ</h1>
  <Button onClick={openAddModal}>タスクを登録する<IoAddCircleSharp /></Button>
  <TableContainer>
    <Table variant="simple" data-testid="table">
      <TableCaption>タスクリスト</TableCaption>
      <Thead>
        <Tr>
          <Th>タスク名</Th>
          <Th>かかる見込時間</Th>
        </Tr>
      </Thead>
      <Tbody>
        {todos.map((todo) => (
          <Tr key={todo.id}>
            <Td>{todo.title}</Td>
            <Td>{todo.time}</Td>
          </Tr>
        ))}
      </Tbody>
    </Table>
  </TableContainer>
</div>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3909033/f92dc29e-4ff8-a6d5-6724-ad074b6eb144.png)

この例だと小さな差ですが、
子要素全体をVstackで囲うだけで要素感覚や幅を良い感じにしてくれます。

---

## 💡 違いを体感しよう

- `VStack` あり → **縦方向に統一感のあるレイアウト**
- `VStack` なし → **要素がバラバラに配置される可能性**
- `spacing` を調整することで、間隔を簡単に設定可能

実際にコードを書いて動かしてみると、理解が深まるはず！

---

## 🎯 まとめ

Chakra UI の `VStack` と `HStack` を使えば、
要素を **縦** に並べるか **横** に並べるかをシンプルに制御できます。

また、実際のアプリで `VStack` を使うことで、
レイアウトが整理され、**デザインの統一感** も得られます。

ぜひ、自分のプロジェクトで試してみてください！🔥
Same Origin Policyの対応

# はじめに
Node.jsを使ってバックエンドのサーバを構築した時、以下のようなエラーに遭遇したことはありますか？

```
Cross-Origin Request Blocked: The Same Origin Policy disallows
reading the remote resource at https://some-url-here. (Reason:
additional information here).
```

このエラーは、Same Origin Policyによって発生するものです。ドメインやポートを含めたOrigin情報が一致しないときに発生します。そんな場合は、以下のようにアクセス元のOriginを`Access-Contorol-Allow-Origin`というパラメータで許可してあげれば解決します。
```
router.get('/', (req, res) => {
    try {
	res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000')
        res.status(201).send('ok')
    } catch (error) {
        console.error(error)
    }
})
```

以上。

# 参考文献
* [Access-Control-Allow-Origin](https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Access-Control-Allow-Origin)
* * [CORSエラーってなに？どうすれば解決するの？](https://qiita.com/higakin/items/fabe6a23d564b20ad558)
dind(docker in docker)のお供に lazydocker は有能かも

# 背景

dind(docker in docker)を利用している時に、dockerのプロセス含めての監視ができずに苦戦していた。

## 0. structure

```terminal
% tree . -L 2
.
├── Makefile
├── compose.yaml
├── dockerfile      # dind のcontainer
└── workspace       # dind ないのvolume
    ├── Makefile
    ├── api
    ├── compose.yaml
    └── tmp.node.dockerfile

3 directories, 6 files
```

## 1. dindを利用している時に辛いこと

どれほどCPUやvolume, networkが利用されているか判断がつきづらく、ために遅いと感じてしまっていた。

[lazydocker](https://github.com/jesseduffield/lazydocker?tab=readme-ov-file)は、`A simple terminal UI for both docker and docker-compose, written in Go with the gocui library.`通りにGUI visualizeしてくれる機能をもつ。

dindでdocker containerを利用した際に、CPUやmemoryの確認がよういになる。
nodeのcontainerを作成するとこんな感じ。

![スクリーンショット 2025-01-31 20.21.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/1b1f96c3-1b07-ac68-201f-af814a0cfa05.png)

dindのdocker container内に作成した、dockerのservice, container, images, volume, networkの確認を実施が可能です。

## 

`Hostで作成した、container`

```compose.yaml
services:
  dind_container:
    container_name: dind_container
    privileged: true
    build:
      context: .
      dockerfile: dockerfile
      args:
        WORKING_DIR: /workspace
    tty: true
    restart: on-failure:3
    volumes:
      - ./workspace:/workspace
```

```dockerfile
ARG WORKING_DIR

FROM docker:dind

WORKDIR ${WORKDIR}

RUN apk add vim lazydocker
```

`docker container内に作成した nodeのcontainer`

```workspace/tmp.node.dockerfile
ARG NODE_VERSION
ARG ALPINE_VERSION
ARG WORKING_DIR

FROM node:22.13-alpine3.21

WORKDIR $WORKING_DIR

RUN apk add git
```

```workspace/compose.yaml
services:
  node_container:
    build:
      context: .
      dockerfile: tmp.node.dockerfile
      args:
        NODE_VERSION: 22.13
        ALPINE_VERSION: 3.21
        WORKING_DIR: /workspace
    tty: true
    restart: always
    ports:
      - "3000:3000"
    volumes:
      - .:/workspace

```
議事録によく使っているショートカットのメモ(Googleドキュメント)

この辺覚えてから議事録取るの速くなった気がするなということのメモです。
Ctrl+Cとかそういう当たり前すぎるやつは省略します。

::: note
**ほぼGoogleドキュメントの話しかしません。**
:::

# Ctrl+Shift+8：箇条書きリストの作成
範囲選択してマウスで選択でもいいですが、その数秒の短縮ができるだけで体感ちょっと早くなった気がします。

+ 箇条書きのリストってこれです
    + 余談ですがMarkdownの記法も覚えたので早くなりました
        + 直に「・」を打つのも急いでいる時はいいですが、こういう感じで階層構造を自動で作れるので整理のためにはこっちの方が良い気がします
        + とはいえこのリストは全然階層構造になっていませんが


# Ctrl+Alt+（任意の数字）：見出しの設定
Googleドキュメントで見出し設定すると自動でリンク生成されるし目次作成にも便利だし…ということで絶対に使いたいのですが、いちいち範囲選択してカーソルを移動させて見出しのレベル設定して…とやるのは若干手間。
このショートカットを使えば、すぐに見出しが設定できます。
選択する数字はhtmlにおけるh1とかh2とか、マークダウンで言うところの#や##を使うのと同じ感覚です。

# Ctrl+K：文字列へのリンクの付与
議事録を取る際などに、先に文章を打って範囲選択してからCtrl+Kを押すとリンク貼る画面になります。
先にリンク貼ってテキスト修正するよりはこっちの方が圧倒的に速いです。

# おまけ：Googleドキュメント以外でよく使うやつ

## Windowsキー+V：クリップボードからの呼び出し、貼り付け
複数件コピーしたい内容を保持しておけるので、間違って別のものをコピーしてしまったときも履歴からさかのぼって貼れて便利です。
ピン留めもできるので、よく使う文言を追加しておくといちいちコピー元を探さなくてよくなります。

## （Slack）>：引用
1文字打つだけで変えられるので本当に便利です。

## Alt+ Space：ウィンドウの操作
何かでウィンドウの挙動がおかしくなっても、これで取り戻せたり、タスクマネージャから切らなくても閉じるだけでなんとかできることがあります。

# 終わりに
これ便利だよっていうのあったら是非教えてください。