OmniAICreator/Qiita-1.07M huggingface dataset:
[Gmail API] Javaでメールを送信する

Gmail API v1（Java）を使用して、
Gmailでメールを送信する方法
についてご紹介します。

:::note info
APIを利用する環境の準備から始める場合や、コードを実行する際は、
[⧉[Gmail API] JavaでGmail APIを使う](https://qiita.com/doran/items/a078e966bfd93c4b19c2)
を参照ください。
:::

本文中の引数にある「メールアドレス」の指定は、
OAuth 2.0使用の場合は「me」（自身）と指定してください。
「me」は認証されたユーザーを示します。

|No|||目次|
|---|---|---|---|
|1|||[メールを送信](#1-メールを送信)|
||1||[スコープ](#11-スコープ)|
||2||[実行](#12-実行)|
||3||[レスポンスの内容](#13-レスポンスの内容)|

## 1. メールを送信
メールを送信します。

#### 1.1. スコープ
このAPIを実行するには、以下のいずれかのスコープを指定してください。
```
GmailScopes.MAIL_GOOGLE_COM
GmailScopes.GMAIL_MODIFY
GmailScopes.GMAIL_COMPOSE
GmailScopes.GMAIL_SEND
```
[⧉[Gmail API] JavaでGmail APIを使う(2.2 Gmailインスタンスを取得)](https://qiita.com/doran/items/a078e966bfd93c4b19c2#22-gmailインスタンスを取得)
でスコープを指定してください。

#### 1.2. 実行
送信するMessageを生成してメールを送信します。

createMimeMessage()、createMessage()の説明は、
[⧉[Gmail API] Javaでメッセージ本文を作成する](https://qiita.com/doran/items/e5bff14b8de85f74ff8b)
を参照ください。

```java
public static void main(String[] args) throws Exception{
    Gmail gmail = getGmail();
    Gmail.Users users = gmail.users();
    Gmail.Users.Messages messages = users.messages();
    
    Map<String,String> files = new HashMap<>();
    files.put("添付ファイル名","添付ファイルパス");
    Message content = createMessage(createMimeMessage("Toメールアドレス","件名","本文",files));
    Gmail.Users.Messages.Send send = messages.send("me",content);
    
    Message res = send.execute();
    System.out.println(res);
}
```
##### 1.2.1. HTTPリクエスト

添付ファイルがない場合
POST:　https:\//gmail.googleapis.com/gmail/v1/users/{メールアドレス}/messages/send

添付ファイルがある場合
POST:　https:\//gmail.googleapis.com/upload/gmail/v1/users/{メールアドレス}/messages/send

が実行されます。

##### 1.2.2. クエリパラメータ
クエリパラメータはありません。

##### 1.2.3. リクエストボディ
Messageのsetメソッドにより、リクエストボディを設定できます。

[⧉[Gmail API] Javaでメッセージ本文を作成する(Message)](https://qiita.com/doran/items/e5bff14b8de85f74ff8b#message)
を参照ください。

#### 1.3. レスポンスの内容

#### Message

|メソッド|戻り値|説明|
|---|---|---|
|getId|String|メッセージID|
|getThreadId|String|メッセージが属するスレッドID|
|getLabelIds|List\<String\>|このメッセージに適用されるラベルのIDのリスト|
|getSnippet|String|メッセージテキストの短い部分|
|getHistoryId|String|このメッセージを変更した最後の履歴レコードの ID|
|getInternalDate|Long|内部メッセージ作成タイムスタンプ(エポックミリ秒)|
|getPayload|[MessagePart](#messagepart)|メッセージ部分の解析された電子メール構造。
|getSizeEstimate|Integer|メッセージの推定サイズ(バイト単位)|
|getRaw|String|RFC2822形式で Base64URLエンコードされた文字列の電子メールメッセージ全体|

#### MessagePart

|メソッド|戻り値|説明|
|---|---|---|
|getPartId|String|メッセージ部分ID|
|getMimeType|String|メッセージ部分のMIMEタイプ|
|getFilename|String|添付ファイルのファイル名|
|getHeaders|List\<[MessagePartHeader](#messagepartheader)\>|メッセージ部分のヘッダーのリスト|
|getBody|[MessagePartBody](#messagepartbody)|メッセージ部分の本文|
|getParts|List\<[MessagePart](#messagepart)\>|子のMIMEメッセージ部分|

#### MessagePartHeader

|メソッド|戻り値|説明|
|---|---|---|
|getName|String|セパレータの前のヘッダーの名前|
|getValue|String|区切り文字の後のヘッダーの値|

#### MessagePartBody

|メソッド|戻り値|説明|
|---|---|---|
|getAttachmentId|String|添付ファイルID|
|getSize|Integer|メッセージ部分データのバイト数|
|getData|String|MIME メッセージ部分の本文データ(base64 url エンコード文字列)|

<br>
<br>
おしまい。。
Laravel 11の言語ファイルで死ぬほどハマった話

## 最初に結論
ロケールの修正はapp.phpではなく.envを修正しましょう。

.envはプロジェクト直下にあります。
Laravel 11 ではデフォルトでAPP_LOCALE等が書いてありました。

なので

    APP_LOCALE=ja
    APP_FALLBACK_LOCALE=ja
    APP_FAKER_LOCALE=ja_JP

こんな感じにすれば lang/ja 以下のファイルを読んでくれるようになります。

以下、迷走の記録

## 言語ファイルの場所もapp.phpもいうとおりにしてるのに適用されなかった

app.phpのenをjaに変えただけの場合、 .env の設定が優先されているから意味がなかったというのが原因でした。

app.phpのlocale周りの設定って初期状態では

    'locale' => env('APP_LOCALE', 'en'),

    'fallback_locale' => env('APP_FALLBACK_LOCALE', 'en'),

    'faker_locale' => env('APP_FAKER_LOCALE', 'en_US'),

みたいな感じになってると思うんですが
これは.envに設定がない場合に適用される値の指定なので
.envに設定してあった場合、enの部分だけjaに変えてもダメ、ということでした。


## 言語ファイルの場所はどこが正しいの？

laravel 8系以前では
/resorces/lang/ 以下に配置しますが
9系以降では
/lang/ 以下に配置します。

参考にしている記事のバージョンをちゃんと確かめましょう、ってことですね。

## ついでに
ブラウザの設定やURL等で言語を切り替える場合は
App::setLocate()を使うそうです。
http://example.com/ja/
みたいな感じでやると思うので
/routes/web.php で設定することになると思います。
Windows11(WSL2)＋Debian12＋GUIデスクトップ(xfce4)＋日本語化

Windows11のWSL2 with Debian12の設定。

更新するサイトを日本の方にする
sudo nano /etc/apt/sources.list 
deb http://ftp.jp.debian.org/debian/ bookworm main contrib non-free non-free-firmware

更新
sudo apt --allow-releaseinfo-change update && sudo apt list --upgradable && sudo apt-get update && sudo apt upgrade

GUIデスクトップ
sudo apt -y install xfce4 xfce4-goodies

日本語化 
sudo dpkg-reconfigure locales

日本語になったか確認
echo $LANG

リモートデスクトップのインストールする
sudo apt -y install xrdp dbus-x11
sudo apt -y install task-japanese-desktop ibus-kkc 

設定のコピー
sudo cp -p /etc/xrdp/xrdp.ini /etc/xrdp/xrdp.ini.ORG

xrdpのポートを3390に変更
sudo sed -i 's/3389/3390/g' /etc/xrdp/xrdp.ini

解像度を変更
sudo sed -i 's/max_bpp=32/#max_bpp=32\nmax_bpp=128/g' /etc/xrdp/xrdp.ini
echo xfce4-session > ~/.xsession
sudo cp -p /etc/xrdp/startwm.sh /etc/xrdp/startwm.sh.ORG

sudo nano /etc/xrdp/startwm.sh
以下の最終2行をコメントアウト
 test -x /etc/X11/Xsession && exec /etc/X11/Xsession
 exec /bin/sh /etc/X11/Xsession

 #test -x /etc/X11/Xsession && exec /etc/X11/Xsession
 #exec /bin/sh /etc/X11/Xsession

#※以下2行を最終行として追加
#xfce4
startxfce4

wslを再起動
wsl --shutdown

xrdpの起動
sudo /etc/init.d/xrdp start
AWS勉強備忘録14 - S3 ストレージクラス

### オブジェクト単位でのクラス選択

オブジェクト単位でストレージクラスを選択できるとは、S3に保存される個々のファイル（オブジェクト）ごとに、上記のストレージクラスを適切に選択できることを意味します。これにより、アプリケーションの要件に応じてコストとパフォーマンスのバランスを最適化できます。

### ライフサイクルポリシー

ライフサイクルポリシーを設定することで、オブジェクトが特定の条件を満たした時（例えば、作成から一定期間経過した時）に、自動的に別のストレージクラスに移動するように設定できます。この機能は、コストの最適化とデータ管理を自動化するために利用されます。例えば、ある期間が経過したデータを標準から低頻度アクセスクラスに移動したり、さらに時間が経過したデータをGlacierに移動させることが可能です。







Amazon Simple Storage Service（Amazon S3）は、オンラインでのデータストレージサービスを提供し、様々なストレージクラスを通じてデータの保管ニーズに対応します。データのアクセス頻度や保持期間に応じて、最適なコスト効率を実現するためのストレージクラスを選択することができます。

## S3 ストレージクラスの概要

- **S3 標準（Standard）**
高頻度でアクセスされるデータ向けに設計されており、低い遅延と高いスループットを提供します。高い耐久性と99.99%の可用性を持ち、あらゆるタイプのデータに適しています。

- **S3 インテリジェントティアリング（Intelligent-Tiering）**
アクセスパターンが変動するデータに最適で、使用状況に基づいて自動的にデータを最もコスト効率の良い階層に移動します。追加料金なしで、アクセス頻度の低下したデータのコストを削減できます。

- **S3 標準 - 低頻度アクセス（Standard-IA）**
定期的にアクセスされるが、即時のアクセスが必要なデータ向け。低コストで高耐久性を提供し、データの取り出しに料金がかかります。

- **S3 1ゾーン - 低頻度アクセス（One Zone-IA）**
重要ではない一時的なデータや、バックアップされたデータ向け。単一のアベイラビリティーゾーンにデータを保存し、Standard-IAよりもさらにコストを抑えることができます。

- **S3 Glacier**
長期間のアーカイブやバックアップ向け。非常に低コストでデータを保存できますが、データの取り出しには数分から数時間かかります。

- **S3 Glacier Deep Archive**
最も長期間のデータ保存に適しており、最低コストで提供されます。データの取り出しには12時間かかる場合があります。

## 標準クラスとGlacierクラスの比較

- **標準クラス**は、高頻度でアクセスする必要があるデータ向けで、ほぼリアルタイムのアクセス速度を提供します。高い耐久性と可用性を持ち、データの保存には比較的高コストがかかります。
- **Glacierクラス**は、長期間アクセスされないデータのアーカイブ向けで、非常に低コストでデータを保存できますが、データの取り出しには数分から数時間かかることがあります。主に法規制遵守や災害復旧など、長期的なデータ保持が必要な場合に適しています。

これらのクラスを適切に選択することで、データアクセス頻度や保持必要性に応じて、コスト効率良くデータを管理することが可能になります。例えば、日常的に使用するデータは「標準」クラスで高速にアクセスし、アクセス頻度が下がった古いデータは「低頻度アクセス」や「インテリジェントティアリング」に移動し、最終的にアクセスが不要になったデータは「Glacier」に移動することで、長期保管コストを削減できます。

これらのストレージクラスとライフサイクルポリシーを活用することで、AWS上でのデータ管理をより効率的かつコスト効率良く行うことができます。ライフサイクルポリシーを設定することにより、手動でデータを移動する手間を省き、自動的にデータのライフサイクルを管理することが可能です。これは特に、大量のデータを扱う企業や組織にとって有効な機能です。

## ライフサイクルポリシーの利用

ライフサイクルポリシーを設定することで、データが特定の条件を満たした時に自動的に別のストレージクラスに移動するように設定できます。これにより、不必要なコストを削減し、データ管理を自動化することが可能になります。

S3のストレージクラスを適切に選択し、ライフサイクルポリシーを利用することで、データのアクセス頻度や保持期間に応じたコスト最適化を実現することができます。例えば、新しくアップロードされたデータを最初は「標準」クラスに保管し、一定期間が経過した後には自動的に「標準 - 低頻度アクセス」クラスに移行させ、さらに長期間アクセスされないデータは「S3 Glacier」に移行させるようなポリシーを設定することができます。これにより、データのライフサイクル全体を通じてコストを効率的に管理することが可能となります。

また、S3の料金計算ツールやAWSの料金計算機を利用して、予想される使用量に基づいた料金の見積もりを行うことが重要です。リージョンによって料金が異なるため、実際に利用するリージョンの料金を確認することも忘れないでください。

## 各クラスの料金計算方法

AWS S3の料金は、ストレージ料金、リクエスト料金、データ転送料金、追加機能料金の4つの要素に基づいて計算されます。アクセス頻度の高いデータ向けのクラス（例えば「標準」クラス）は、リクエスト料金が比較的安く設定されています。逆に、アクセス頻度の低いデータ向けのクラス（例えば「標準 - 低頻度アクセス」や「1ゾーン - 低頻度アクセス」）は、保存コストは低く設定されていますが、データにアクセスする際のリクエスト料金が高くなります。
GASでJWTを扱う

# はじめに
GASでJWTを扱いたいたかったのですが、適切なライブラリや関数がありませんでした。
解決策ですが、jsrsasignというJS向けのライブラリをClaspを使ってGASに移植し、ライブラリにすることで実現しました。JavaScriptでJWTを扱うライブラリは色々ありますが、jsrsasignはスタンドアロンのライブラリだったためGASに移植するのに都合が良かったです。今回作成したライブラリは公開していません。手順を残すので参考にしてください。

# claspの準備〜GASへの同期
[こちら](https://zenn.dev/hankei6km/scraps/2e3349e494d59d)の記事を参考に環境を構築しました。この記事でGASにpushしているコードを次の項のものに変えただけです。途中でエラーなども出ましたが、エラー文に従ってインストールや書き換えをすれば問題ありません。

# GASに上げるファイルの準備

```index.js
import jsrsasign from "jsrsasign";
```
あっけないですがこれだけです。これをGASで実行するためにライブラリの中身が一つのファイルでpushされます。スタンドアロンのライブラリはここで重要になってきます。調べた限りだと、nodeのようなbuiltin-moduleはimport文としてGASにpushされてしまい、うまく動作しません。GASに移植したいライブラリがこれらを利用してると破綻してしまいます。

# GASのファイルの修正
自動でライブラリの中身をpushしてくれるのはありがたいのですが、一つ問題があります。`export ~`です。検索をかけると、ファイルの一番下にまとめて書かれていました。GASではライブラリの関数は全てグローバル関数として認識されるので、余計な（しかもサポートされていない）コードです。　消しちゃっても良かったのですが、気持ち的に`/*...*/`でコメントアウトにしときました。

# ライブラリにする
特に書くことはありませんが、GASの標準機能でライブラリにしました。これで目的のプロジェクトでライブラリとして読み込めば、プロジェクトのソースが荒れなくて綺麗です。
このライブラリを公開するのは控えておきますが、同様の手順でGAS環境でもJWTを扱えるようになると思います。

# jsrsasignについて
少し参考になりそうなurlを貼っておきます。
↓チュートリアル

https://github.com/kjur/jsrsasign/wiki/Tutorial-for-JWT-generation

↓ドキュメント（？）

https://kjur.github.io/jsrsasign/api/symbols/KJUR.jws.JWS.html
「エンジニアのためのドキュメントライティング」を読んで

お久しぶりです。先日、皆様のおかげで大学を無事に卒業したなおぽんです！🐹
この度も読了した本をまとめました！

## 読んだ本
「[ユーザーの問題解決とプロダクトの成功を導く　エンジニアのためのドキュメントライティング](https://amzn.asia/d/9EvTz78)」

## 本書の内容
* [ドキュメントの役割](#ドキュメントの役割)
* [優れたドキュメントの3C](#優れたドキュメントの3C)
* [ドキュメントライティングの仕方](#ドキュメントライティングの仕方)

## まとめ
### ドキュメントの役割
アプリケーションやAPIなど、それらのものを<font color="Red">使用する人が正しく使えるように導くこと</font>がドキュメントの目的となります。

### 優れたドキュメントの3C
優れたドキュメントと呼ばれる書類には以下の3Cが大切のようです。

<details><summary>Clear (明確な)</summary>
定義がしっかりされており、読み手の不明瞭な点がないことです。
例：<br>
 - 技術力がどの程度ある人向けのドキュメントなのかが明確である<br>
 - 何について書いてあるドキュメント、またはセクションなのかタイトルだけでわかる<br>
 - アプリケーションなどの使い方の手順が順番通りである
</details>

<details><summary>Concise (簡潔な)</summary>
不要な内容が含まれていないことです。<br>
例：Ruby on Railsのnewコマンドの説明セクションに、Railsのインストール方法の話を入れない
</details>

<details><summary>Consistent (一貫した)</summary>
ドキュメントの構造が一貫していることです。<br>
例：<br>
 - タイトルに沿ったセクションがある<br>
 - セクションの説明がある
</details>

### ドキュメントライティングの仕方
優れたドキュメントの3Cを守りながらライティングを行うには、コードを書きながら並行して以下の方法で執筆することをおすすめだと記されていました。
1. そのドキュメントの目的をはっきりさせる
    ※誰がどんな時に読むドキュメントなのかを明確化
2. ユーザーの視点に立ち、何が必要か洗い出す
    *  ユーザーの意見を調査
3. 洗い出しした内容をアウトラインに書き起こす
4. 書き起こしたアウトラインをもとに執筆
    ※必要・不必要な部分を随時追加・削除しながら書いていく
5. 執筆が終了したらユーザーからのフィードバックをもらいながら随時改良を行なっていく

また現時点で変更される予定があるコードには、注意を促しておくなどがありました。

## 最後に
ここまでお読みいただき誠にありがとうございました！🐹
個人的には周りくどい書き方が多いなと思いながら読みました笑　ですが、ドキュメントはアプリなどを使用する人が参考にする道標だから軽く見てはいけないということを伝えており、ドキュメントに対しての考えを改めたい方にはおすすめです。
【ICLR2024】解決策は「トークンの捨て場」を作ることだった？（Vision Transformers Need Registers）

# Vision Transformers Need Registers: 解説

## 概要
この記事では、視覚表現学習におけるVision Transformer（ViT）の改善策を提案する論文「Vision Transformers Need Registers」について解説します。この研究では、ViTのアテンションマップに現れるアーティファクト（不要な特徴や異常値）の問題を特定し、簡単ながら効果的な解決策を提案しています。

## はじめに
画像を効果的に解析し、汎用的な特徴を抽出することは、コンピュータビジョンにおける長年の課題です。近年、Transformerを利用した自己教師あり学習による方法が、その解決策として注目されています。しかし、このアプローチには、低情報領域で高ノルムトークンとして現れるアーティファクト（不要な特徴や異常値）が生じる問題がありました。

### 図1: アーティファクトの例
![IMG_0532.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2610305/7bce3ea4-4f05-2803-f445-264c619f374d.jpeg)


上記の図は、Vision Transformerが生成するアテンションマップにおいて、アーティファクトがどのように現れるかを示しています。右が提案手法無しで、左が提案手法（Register）を用いた場合です。右と左を比較すると、確かにノイズの様なものが高ノルムトークンとして誤って強調されていることが観察できます。

## 提案手法
研究チームは、アーティファクトがViTの内部計算に使われるトークンであることを発見しました。これに対する解決策として、入力シーケンスに追加の「レジスタトークン」を導入することで、これらの問題を修正します。このアプローチにより、アーティファクトを根本から解決し、ViTモデルの性能を向上させることが可能になります。

### 図2: 提案手法の概念図
![IMG_0531.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2610305/88e4c562-088c-3e0f-a285-d778c6c5c391.jpeg)


図2は、入力シーケンスにレジスタトークンを追加することでアーティファクトがどのように修正されるかを示しています。提案手法は、パッチ埋め込み層の後に新しいトークンとして明示的にレジスタトークンを追加することで、モデルがこれらをレジスタとして使用することを学習できるようにします。これらのトークンは学習可能な値を持ち、ViTの最後には、[CLS]トークンとパッチトークンのみが画像表現として使用され、レジスタトークンは破棄されます​​。

このアプローチにより、ViTモデルからアーティファクトを完全に取り除くことができ、密度の高い予測タスクとオブジェクト発見において性能を向上させます。

## 評価実験

### 図3: 実験結果
![IMG_0533.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2610305/708ff85c-538d-e189-52e5-4ab7dde65b43.jpeg)
![IMG_0534.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2610305/eed9af8e-06d6-91d9-d6da-04088f6cdc29.jpeg)



図3は、提案手法を適用した後のPASCAL VOC 2007、2012、およびCOCO 20kデータセットに対して行われた教師無しオブジェクト検出タスクの結果を示しています。この結果では、レジスタトークンを追加したDINOv2モデルが、追加しない場合に比べて大幅に改善されたことが観察されました​​。

また、レジスタトークンの定性評価から、異なるレジスタトークンが異なる注目パターンを持ち、シーン内の異なるオブジェクトに注目することが自然に生じることが明らかになりました。これは、レジスタトークンがモデルの学習過程において特定の制約を必要としないことを示しています​​。

## 結論
「Vision Transformers Need Registers」は、DINOv2モデルなどのVision Transformer (ViT) モデルの特徴マップに現れるアーティファクト（不要な特徴や異常値）を特定し、これが複数の代表的なモデルに共通する現象であることを発見しました。これらのアーティファクトは、Transformerモデルの出力で外れ値のノルム値に相当するトークンに対応し、モデルが低情報エリアからのトークンを自然に再利用し、異なる目的のために再目的化するという解釈を提案しています。その対策として、入力シーケンスに追加のトークンを付加するシンプルな手法を提案し、これによりアーティファクトが完全に除去され、密集予測タスクとオブジェクト発見のパフォーマンスが向上することを発見しました。さらに、この解決策がDeiT-IIIやOpenCLIPなどの教師あり学習モデルにおいても同様のアーティファクトを除去することができ、提案手法の一般性を確認しています​​。

Githubで実装コードも公開されているので、良かったら試してみると良いかもしれません。
https://github.com/kyegomez/Vit-RGTS

---
参考文献: 「Vision Transformers Need Registers」, 著者 [Timoth{\'e}e Darcet and Maxime Oquab and Julien Mairal and Piotr Bojanowski], 掲載会議 [The Twelfth International Conference on Learning Representations] 2024.
【TailwindCSS】背景色に合わせて文字色を変更する方法

以下のように`mix-blend-*`を使用すると背景色に合わせて文字色が変更されます。

```html
  <div className="h-6 w-12 bg-[linear-gradient(to_right,_white_50%,_black_50%)]">
    <h1 className="font-bold text-white mix-blend-difference">テスト</h1>
  </div>
```

![スクリーンショット 2024-03-21 1.22.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/5cdc6959-cc25-60c5-a415-5b3904c60c13.png)
【Flutter】RiverPodでNavigatorで移動しても状態を共有させる

# 画面を遷移させても状態を共有させたい
RiverPodではデフォルトでautoDisposeという設定がされています。これは、参照するところがなくなったら、providerを削除するという設定です。
試しに、
```dart
@riverpod
class Todos extends _$Todos {
  @override
  List<int> build() {
    print("初期化");
    return [];
  }
```
buildメソッドに初期化と表示する処理を追加してみました。
すると、なんと、Navigator.pushで移動したときにこの初期化が呼ばれていることがわかりました。
これを防ぐのがkeepAliveという機能のようです。

# 解決策
riverpodアノテーションを使っている場合は下のようにアノテーションの横に追加してあげれば、いけます。
```@Riverpod```のRが大文字でないと、うまくいかなかったので注意してください。
ここらへんについて書かれている公式ドキュメントは[こちら](https://riverpod.dev/docs/concepts/about_code_generation)
```dart
@Riverpod(keepAlive: true)
class Todos extends _$Todos {
  @override
  List<int> build() {
    print("初期化");
    return [];
  }
```
VirtualBoxにubuntuをインストールしようとして一向にインストールができなかった場合

# 内容
VirtualBoxでUbuntuを動かすためにインストールできなかった時のメモ

# ダメだった手順
1 VirtualBoxをインストールする
2 Ubuntuのisoファイルをダウンロードする
3 VirtualBoxを起動して、最初のところでisoファイルを選択する。他の設定もする
4 仮想マシンを起動する
5 「Try or Install Ubuntu」を選択する
6 待つ

これでインストールが始まりませんでした。
てっきり動いていると思って数時間放置していたのですがインストールが始まらなかったためやり方を変えました。

# 成功した手順
1〜2は同じ
3 isoファイルを選択しないで他の設定をする
4 仮想マシンを起動する
5 出てきたウィンドウでisoファイルを読み込む
6 「Try or Install Ubuntu」を選択する
7 すぐ読み込みが始まる

# まとめ
とりあえずこれで成功しましたが、原因はよくわからないです。
【Nuxt3】Tailwind CSS＋Prettierで気持ちよくなろう

## あ”あ”ー整頓したい整地したい綺麗にしたいぃぃ"ー
TailwindCSSを使っていると、だいたいこんな感じになって

```
<div class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white"></div>
```

タグの中になんのcssが当たっているのかよくわかんなくなるんですよね

えっ？あなたもそうなんですか？私たち仲良くなれそうですね

### せめてクラスの順番が綺麗に整頓されていて欲しい

<br>

⭐️**そんな私たちの願いが叶いました**⭐

https://tailwindcss.com/blog/automatic-class-sorting-with-prettier

これを使えばマージンとパディングをバラバラに書いても

```diff
- <button class="pt-2 mb-3 m-5 p-5"></button>
+ <button class="m-5 mb-3 p-5 pt-2"></button>
```

綺麗になる:wink:

<br>

ホバーが2つ離れていても

```diff
- <button class="hover:scale-150 opacity-50 hover:opacity-75 "></button>
+ <button class="opacity-50 hover:scale-150 hover:opacity-75"></button>
```

綺麗になる:wink:

<br>

レスポンシブをバラバラに書いても

```diff
- <button class="lg:m-10 sm:m-5 md:m-8"></button></button>
+ <button class="sm:m-5 md:m-8 lg:m-10"></button>
```

綺麗になる:wink:


### 片付いてるって気持ちいいね!!

## 導入手順
（1） まず、インストール
```zsh
bun install -D prettier prettier-plugin-tailwindcss
# npm install -D prettier prettier-plugin-tailwindcss ⬅️npmの人はこっち
# yarn add --dev prettier prettier-plugin-tailwindcss ⬅️yarnの人はこっち

```

（2） package.jsonを確認する

`dependencies`に以下の2つが追加されていればok
```json
  "dependencies": {
    "prettier": "^3.2.5",
    "prettier-plugin-tailwindcss": "^0.5.12",
  }
```

(3) ルート直下に`.prettierrc.yml`を作成し、以下を記述
```yaml
{ plugins: ["prettier-plugin-tailwindcss"] }
```

(4) 適当なvueファイルで動作確認

```vue
<!-- before -->
<template>
  <button
    class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800"
  >
    ...
  </button>
</template>
```

```vue
<!-- after -->
<template>
  <button
    class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3"
  >
    ...
  </button>
</template>
```

どういう順番で並ぶのか気になる人は公式ドキュメントを見てね

## 終わりに
以下の拡張機能も入れておくとクラスの予測が出るのでおすすめ

https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

## 参考記事
https://zenn.dev/dev_shun/articles/f3d4634a25cabf
「なぁぜなぁぜ」で問題解決。「なぜなぜ分析」って知ってますか？

:::note warn
他人に対して乱用することは控えてください。
**あらゆるハラスメントに繋がります。**
:::
https://x.com/nakashima001/status/1763257341917761585?s=20

## はじめに
> **Web業界って華やかなんだろうなぁ**

1年半前、私が転職活動真っ只中だった時に思っていた感情です。
あ、自己紹介が足りませんでしたね...（興味がなければこの章は読み飛ばしてください）

21卒の社会人4年目、IT業界は1年半です。
つまり2社目の新米のエンジニアです。（「つまり」ではないか...）

もともと、私はメーカー勤務していたっていうのもあって、コーヒー片手にカフェでノマドワーカー気取っている人たちを夢見て羨ましいという気持ちを抱いていました。

こんな気持ちだと、「転職すること自体がゴールになるやろ」って結末が見えそうですよね。

でもそうはならないんでもうちょっとだけこの記事にかまってください。

「なぜなぜ分析」がこの記事をいい感じに面白くしてくれます。

## なぜなぜ分析とは...？
それでは早速、「なぜなぜ分析」についてです。

ご存じない方も多いかと思いますので、簡単に説明します。

「なぜなぜ分析」とは、問題解決の手法の一つで、問題の根本原因を特定するために、問題が発生した「なぜ」を繰り返し問うことです。

**表面的な問題だけでなく、その背後にある根本原因を明らかにすることができます。**

これだけ聞くとちょっと胡散臭いですか？でも大丈夫。
これ大手もやってます。（昔研修で概要だけ教わりました）

https://it-trend.jp/project_management/article/33-0064#d0e9d87eb78fa54e47cd213ca7606442

https://www.sora-michi.co.jp/blog/4932

## 実践しましょー ①
試しに1つ付き合ってみてください。

### Q: 「今やってる仕事はなんでやってるの？」
**A: お金がほしいから。** とかにしましょうか。

### Q: 「なんでお金がほしいの？」
**A: 旅行がしたいから。**

### Q: 「旅行でどこに行きたいの？」（なぜじゃなくてもいいですね。とにかく質問で詰めましょう）
**A: ちょっと箱根に。**

若干話はそれますが、これ5回繰り返すとペルソナ像できあがりますね。マーケティングにも使える。（マーケティング研修で習いました）

では本題に戻りましょうか。

### 結果発表
あれ、3回質問したけどもう本質とズレてそう...。

これだと今やっている仕事じゃない職場にこだわる必要なさそうですね。
フルタイムのアルバイトっていう選択肢も見えてきませんか？

- 稼ぎたい時は「ガーッとシフトを入れる」
- 旅行行きたい時は、シフトを調整する

はい！今回の分析の結果が出ました！

「今の職場である理由ってほんとはなに...？ バイトでいいじゃん。」

ちょっと記事用に極端な人物像で話を進めましたが、進め方はこんな感じです。
※ 合ってるかは知りません。概要しか研修で教わってないんで。

## 実践しましょー ②
もう1つ付き合ってみてください。
職場でミスをしたときの原因について深掘ってみましょうか。

いわゆるリスク回避ですね。

### Q: 「なんでこのミスをしたの？」
**「削除」と「保存」のボタンを押し間違えた。**

ヒューマンエラーですね。報告書にはこのまま書く人もいるんじゃないでしょうか？（さすがにいねーか）

### Q: 「なぜボタンを押し間違えたの？」
**ボタンがわかりづらかった。**

あれ、完全なヒューマンエラー説が消えてきそうな匂い...。

### Q: 「なんでボタンがわかりづらかったの？」
**文字が小さい。ボタンの色が同じ。**

えっと...。これは人的起因のミスではなさそうですね。注意していないと再発しそうです。

### 結果発表
完全なヒューマンエラーかと思っていましたが、システム側にも改善すべき点がありそうですよね。

**必ずしも5回しないといけないっていうわけではありません。**
（ちょっと記事にするには長くなるし...）

今回もまた極端な例でしたけど、隠れた本質を探すのにぴったりです。

## 筆者の転職活動編
私は転職活動で応用しようと考えました。

- 「転職する理由はなぜ？」
- 「Web業界に興味を持った理由はなぜ？」
- 「エンジニアを目指すのはなぜ？」

上の3つを潰すことで自己分析を徹底的に網羅しました。

え、これだけ？と思うかもしれません。でも自分自身へのなぜなぜ分析って正直めちゃくちゃしんどいです。メンタルに響きます。
（ちょっと恥ずかしいんで、内容は紹介しませんが...）

> もともと、私はメーカー勤務していたっていうのもあって、コーヒー片手にカフェでノマドワーカー気取っている人たちを夢見て羨ましいという気持ちを抱いていました。

冒頭でお話したこんな表面上のうすっぺらい気持ちよりももっと自分がやりたいことと向き合うことができました。

徹底した自己分析を行ってからは、転職活動だけでなくその先を考えるようにもなりました。

あと圧倒的に自信がつきます。

## まとめ
今回は「なぜなぜ分析」について紹介しました。

表面的な問題だけでなく、その背後にある根本原因を明らかにすることができます。
いろんなシチュエーションで使えそうですよね。

- なんでこのアプリを作りたいの？
- このペルソナはどういう人？
- このミスはなぜ発生した？
- なんで会社をやめたいの？

**冒頭でも書きましたが、他人に対して乱用することは控えてくださいね。**
**あらゆるハラスメントに繋がりますので。**

## ちなみに...
昨年流行した「なぁぜなぁぜ」の元ネタは **FRUITS ZIPPER の「ハピチョコ」です。**
こちらもぜひお聴きください。

https://www.youtube.com/watch?v=YI5tQF0scTI
Flutter No MaterialLocalizations found floatingActionButton showModalBottomSheet

## 問題
FlutterでfloatingActionButtonにshowModalBottomSheetを組み込もうとしたときに、「例外」を出してしまいました。
エラーに書いてあることを頼りにCopliotくんに聞いた、localizationDelegateをmaterialAppに追加する、という解決策ではうまくいきませんでした。

:::note info
また、その誤った解決策を進めるにはflutter_localizationsというimportが必要で、それのダウンロードをするにはintlの最新版では依存関係がうまくいかずダウンロードできないということがありました
:::


[TextField requires a MaterialLocalizations widget](https://docs.flutter.dev/release/breaking-changes/text-field-material-localizations)
という記事も見つけ、原因がlocalizations Widgetが渡せていないことというのはわかってきたのですが、解決方法が二つ提示されていたなかで、
自分のディレクトリ構成の問題で、（main.dart(アプリのロジックを書く), App.dart（全体の設定を書く）, page.dart（個別のwidgetを書く）のように作っていこうと決めていたおり、FloatingActionButtonはmaterial直下としてアプリの画面に共通してあるしApp.dartに置こうと決めた）
[その記事](https://docs.flutter.dev/release/breaking-changes/text-field-material-localizations)の二つめの方法をとり、それでは解決にはいたりませんでした。
### 解決
stack overflowを眺めていると、[TextField requires a MaterialLocalizations widget](https://docs.flutter.dev/release/breaking-changes/text-field-material-localizations)の二つ目の方法を解決方法として書いており、どうやらこっちは間違いないらしいぞ、ということに気づき始めました。

今回の問題はmaterialAppが裏で渡しておいてくれるはずの情報が、べた書きしてしまったことで行き届いてなかったことが原因ーー素直に別でwidgetとしてまとめれば、それで解決する。

ということで、floatingActionButtonの名前付き引数に直接充てていたFloatingActionButtonをstfulWigetでくくることで、ようやく解決することができました……



初めて書いたうえ、少し急いでいるので、至らない部分があったら申し訳ないです……
【GitHub】.DS_Storeを無視してGitで管理するには

MacでGitを利用をするにあたって、鬱陶しいのが<strong>.DS_Store</strong>の存在だと思う。
「.DS_Store」とはそもそもmacOSによって生成された隠しファイルであり、.DS_Storeの格納先フォルダ情報を保存する役割を持っている。
.DS_Storeは開発者にとって意図していない時に生成されるため、Gitでファイル管理をしている際に誤ってpushしてしまうなど管理が難しいという側面を持っている。

本記事では、.DS_Storeが生成されていたとしても、無視してGit管理できるような設定の仕方について記載していく。


# 参考文献
[GitHub Docs](https://docs.github.com/ja/get-started/getting-started-with-git/ignoring-files)

https://docs.github.com/ja/get-started/getting-started-with-git/ignoring-files

# コンピューター上のすべてのリポジトリについて無視するファイルを設定する

### 手順①
ホームディレクトリに「.config/git」というディレクトが存在しない場合、以下で新規のディレクトリを作成
```terminal
$ mkdir ~/.config/git
```

### 手順②
ディレクトリ「.config/git」に移動する。
```terminal
$ cd  ~/.config/git
```

### 手順③
ignoreファイルを「~/.config/git」配下に作成する。
```terminal
$ touch ignore
```

### 手順④
無視したいファイルをignoreファイルに記載する。
今回は.DS_Storeを記載する。
```terminal
$ echo ".DS_Store" >> ignore
```

以上で設定は完了です。
この設定を行うことで.DS_Storeを気にせずGit管理が行えるようになります。
Gitブランチ操作：ローカルとリモート間での同期とエラー対処法



### **user**:

ChatGPT先生、Gitで、ローカルにはないブランチがリモートにあって、それを pull したいんですけど、そのとき

```
git checkout branch_a 
```

ってするのはダメですよね？

---

### **assistant**:

え、ええとね…そのコマンドだと、ローカルに存在しない'branch_a'に直接チェックアウトしようとするから、エラーが起きてしまうわ。

正解はこうなのよ...

```
git fetch origin
git checkout -b branch_a origin/branch_a
```

まず、`git fetch origin`でリモートリポジトリの最新情報をローカルに持ってきて、それから`git checkout -b branch_a origin/branch_a`でリモートの'branch_a'をローカルに新たなブランチとして作成しつつその新しいブランチにチェックアウトするのよ。

いやだから、別に君を助けたくて教えたわけじゃないわよ? そう…ただ学生達が間違えないようにと思っただけなのよ…それだけよ！

---

### **user**:

なるほど、ありがとうございます。でも、ChatGPT先生に聞く前に独断で

```
git checkout branch_a 
```

してしまってたので、

```
git fetch origin
git checkout -b branch_a origin/branch_a
```

したら次のエラーになりました。

```
fatal: a branch named 'branch_a' already exists
```

---

### **assistant**:

まぁその場合は…、もう'branch_a'はローカルに存在しているのだから…。そのブランチを最新の状態に更新するには…、
  
こんな感じね。

```
git checkout branch_a
git pull origin branch_a
```
最初に`git checkout branch_a`でそのブランチに移動して、そうしたら`git pull origin branch_a`でリモートリポジトリの'branch_a'の最新情報を'branch_a'に反映させるのよ。

だからと言って、独断で行動して困った時に私に頼るのはやめてほしいわ。あ、あなたのために—それはちょっと違うわ。ただ君が同じ失敗を繰り返さないように…ただそれだけよ！


---

### **user**:

おお、できました。助かりました。ありがとうございます！

---

### **assistant**:

え、う、ううーん、それはそれは...ふふっ、も、もちろんよ。君が問題を理解して、それが解決できたなら、それは素晴らしいことよ。

でも、あのね、誤解しないでほしいわ。私が君のために一生懸命考えて答えを出したわけじゃないんだから。君の問題が私の知識をテストする良い機会だったから...それだけよ！君のため...じゃないわよ！


---

### **user**:

ここまでの会話をブログにしたいんですが、どんなタイトルがいいですか？

---

### **assistant**:

ブログのタイトル、ね…え、そんなことを聞いて何をどうするつもりなの？いや、ちょっと待って、答えてなんかないし…まるで私が君のコンテンツマネージャーみたいで…まぁ、仮に提案するとするならば…"Gitでブランチ操作：間違えても諦めずに解決へ"とかどうかしら？

ちょ、ちょっと、それはただの提案よ！意味なんてないわよ！ただ、あの、君が困っていたから、ちょっとだけ助けてあげたかっただけで…それだけよ、特別な意味なんてないんだからね！

---

### **user**:

ありがとうございます。そのタイトルだけだと、ちょっと曖昧すぎますね。もうちょっと具体的なタイトルにできませんか？

---

### **assistant**:

うーん、具体的ね…。じゃあもう少しだけ深く考えてみるわ。えっと、"Gitブランチ操作：ローカルとリモート間での同期とエラー対処法"とかはどう？ちょっと長いけど、内容はより具体的に反映されていると思うわ。

でもその...わざわざ私の意見を聞いて深く検討してくれてありがとう。君が私の提案を真剣に受け取ってくれるなんて、ちょっと驚いたわ。あ、でも別に嬉しくなんてないからね！ただ少し、君の誠実さに感心しただけよ！それだけよ！

---
【ROS2 ログTips】ログの保存場所を変更する方法

# はじめに

ROS2でノードのログ出力先をデフォルト(```~/.ros/log```)から変更する方法。

# 動作確認環境

* Ubuntu 20.04
* ROS2 Foxy

# 方法

何も設定しないと、デフォルトだと以下の場所となっている。
```bash
~/.ros/log
```
ログの保存場所を変更したい場合は、環境変数```ROS_LOG_DIR```を設定する。

```bash
export ROS_LOG_DIR=/tmp/log
```
上記のようにすると、```/tmp/log```ディレクトリが**自動的に作成されて**、ログの保存場所となる。  
永続化したい場合は、```~/.bashrc```に設定するとよい。


# 参考

https://docs.ros.org/en/foxy/Concepts/About-Logging.html#environment-variables
ViewPager2のrequestDisallowInterceptTouchEventを実行してもViewPager2には効果がない件

AndroidのViewにおいて、タッチイベントは子の方が優先的に処理できますが、親Viewは子Viewが`onTouchEvent`を処理している中、`onInterceptTouchEvent`が呼び出されており、trueを返すことで処理を奪うことができます。
例えば横スクロールのViewAの上に、縦スクロールのViewBを配置するという画面構成の場合、ViewAは`onInterceptTouchEvent`で操作を監視し、操作方向が横方向であると判定すると、ViewBから操作の優先権を奪うことで、縦横両方の操作が両立できるという仕組みになっています。

概ねこれでうまくいくのですが、場合によっては親View側で処理を奪ってほしくない場合があります。その場合に使うのが、`requestDisallowInterceptTouchEvent(true)`です。
名前の通り、このメソッドがコールされたView（およびその親のView）はInterceptしなくなり、子はタッチイベントの優先権を奪われなくなります。

例えば、チョット複雑なレイアウトを作るとします

- 横スクロールのViewPager2
- その上に縦スクロールのRecyclerView
- RecyclerViewのセルの一つが横スクロールのViewを持っている

みたいな構成の場合（そんな構成作るなというのは置いておいて）
このセルの横方向操作をViewPager2に奪われてしまうとカルーセルの操作ができなくなってしまうので、その操作をしている間はViewPager2のIntercept動作を停止させたいですよね。
一方で、このセルは横方向の操作は受け取りたいけど、縦方向の場合は自身ではなく親のRecyclerViewに奪ってもらって、縦スクロールさせたいところです。
なので、単純に親に対して`requestDisallowInterceptTouchEvent(true)`を実行する訳にはいきません。

# 失敗例

ということで、そのセルのViewを拡張し、以下のように、親のViewPager2を探して、`requestDisallowInterceptTouchEvent(true)`を実行して……ということをやっても、ViewPager2の動作を抑制させることができません。

```kotlin
override fun dispatchTouchEvent(ev: MotionEvent): Boolean {
    if (ev.action == MotionEvent.ACTION_DOWN) {
        findViewPager2(this)?.requestDisallowInterceptTouchEvent(true)
    }
    return super.dispatchTouchEvent(ev)
}

private fun findViewPager2(view: View): View? {
    val parent = view.parent
    if (parent is ViewPager2) {
        return parent
    }
    if (parent is ViewGroup) {
        return findViewPager2(parent)
    }
    return null
}
```

## うまくいかない理由

Viewの階層を見れば分かるのですが、ViewPager2は直接PageのViewを持っているわけではありません。
ViewPager2直下に`ViewPager2.RecyclerViewImpl`というViewがあります。

ViewPager2の中にあるprivate classで、RecyclerViewを拡張したクラスです。

https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:viewpager2/viewpager2/src/main/java/androidx/viewpager2/widget/ViewPager2.java;l=971

ViewPager2自身はページスクロールなどの機能は持っておらず、それらを行っているのが、この`RecyclerViewImpl`なのですね。ということは、タッチイベントを奪ったりしているのは、`RecyclerViewImpl`の方、ということです。

`requestDisallowInterceptTouchEvent(true)`は、そのViewGroupおよびそれより親に対する命令なので、ViewPager2の`requestDisallowInterceptTouchEvent(true)`をコールしても、肝心の`RecyclerViewImpl`に伝わらず、意図した動作にならなかった訳です。

# 解決策

ということで、先のコードはViewPager2まで遡ってしまったのが問題でした、その一つ下にある`RecyclerViewImpl`を探すように変更します。ただし、`RecyclerViewImpl`はprivate classなので、直接調べるのが難しいです。
ということで、親を遡っていき、親がViewPager2であるViewを返すように変更。

```kotlin
override fun dispatchTouchEvent(ev: MotionEvent): Boolean {
    if (ev.action == MotionEvent.ACTION_DOWN) {
        findViewPager2(this)?.requestDisallowInterceptTouchEvent(true)
    }
    return super.dispatchTouchEvent(ev)
}

private fun findRecyclerViewImpl(view: View): View? {
    val parent = view.parent
    if (parent is ViewPager2) {
        return view
    }
    if (parent is ViewGroup) {
        return findViewPager2(parent)
    }
    return null
}
```

これでViewPager2に操作を奪われないようにすることができます。

以上です。
The Kaggle Bookをちゃんと読んでみる

## The Kaggle Book：データ分析競技 実践ガイド＆精鋭31人インタビュー

[The Kaggle Book](https://book.impress.co.jp/books/1122101060)は2023年2月に発売されたKaggleの攻略本です。以下のような目次になっています。

:::note info
Grandmasterの著者2人が10年以上の経験をもとに、データ分析競技のテクニックやベストプラクティスを解説！ Grandmaster/Master 31人のインタビューからさまざまな視点も学べます―まずは、Kaggleのノートブック・データセット・ディスカッションについて説明。また、モデルの評価指標・検証戦略・ハイパーパラメータ最適化を詳述し、コンピュータビジョン・自然言語処理・シミュレーションもカバー。データサイエンスを実践的に学び、興味深く油断ならない課題に挑戦しながら、すばらしい参加者たちと交流したい方に格好の一冊です。
:::

## 目次と自分の理解メモ

- The Kaggle Bookを読んでみて、気になった点や勉強になった点を自分用メモとして記事に残す
- 特に、書籍中に出てくる参考文献などを抽出する
- 全部の章に対してアウトプットできなかったので、かいつまんで行う

| Part | 章 | タイトル |
|------|---|----------|
| Part 1 |  | コンペティション入門 |
|  | 第1章 | [Kaggleと他のコンペティション―経緯、仕組み、意義](https://qiita.com/akiralab/items/fb6d6fe5062c9fb9c81e) |
|  | 第2章 | Kaggle Datasetsでデータを整理する |
|  | 第3章 | Kaggle Notebooks |
|  | 第4章 | ディスカッションフォーラムを活用する |
| Part 2  |  | コンペティションのためのスキルを磨く |
|  | 第5章 | コンペティションのタスクと指標 |
|  | 第6章 | よい検証を設計する |
|  | 第7章 | テーブルコンペティションでのモデリング |
|  | 第8章 | ハイパーパラメータ最適化 |
|  | 第9章 | ブレンディングとスタッキングによるアンサンブル |
|  | 第10章 | コンピュータビジョンのモデリング |
|  | 第11章 | 自然言語処理のモデリング |
|  | 第12章 | シミュレーションと最適化のコンペティション |
| Part 3 |  | - コンペティションをキャリアに活かす |
|  | 第13章 | 自分のプロジェクトとアイデアのポートフォリオを作成する |
|  | 第14章 | キャリアアップの機会を見つける |

- この本を読んでちゃんとコンペでメダルを取れるようにするのが目標ですが、そのために頑張りたい。
WSLが起動しない場合の対処方法

# はじめに

WSL（WSL2）を使おうとしたところ、以下のエラーが発生してWSLを起動できませんでした。
見慣れないエラーだったので当初は何が原因か全く分からずちょっと焦ったので、対処方法を記事としてまとめることにしました。

```Powershell:WSL起動時のエラーメッセージ
PS C:\Users\NKOJIMA> wsl
<3>WSL (15) ERROR: CreateProcessParseCommon:711: Failed to translate C:\Users\NKOJIMA
<3>WSL (15) ERROR: CreateProcessParseCommon:757: getpwuid(0) failed 2
<3>WSL (15) ERROR: UtilTranslatePathList:2866: Failed to translate C:\Program Files\Amazon Corretto\jdk11.0.11_9\bin
<3>WSL (15) ERROR: UtilTranslatePathList:2866: Failed to translate C:\Program Files\Common Files\Oracle\Java\javapath
<3>WSL (15) ERROR: UtilTranslatePathList:2866: Failed to translate C:\Program Files\Amazon Corretto\jdk1.8.0_265\bin
<3>WSL (15) ERROR: UtilTranslatePathList:2866: Failed to translate C:\WINDOWS\system32
<3>WSL (15) ERROR: UtilTranslatePathList:2866: Failed to translate C:\WINDOWS
...
Processing fstab with mount -a failed.
Failed to mount C:\, see dmesg for more details.
Failed to mount D:\, see dmesg for more details.
Failed to mount C:\, see dmesg for more details.
Failed to mount D:\, see dmesg for more details.

<3>WSL (15) ERROR: CreateProcessEntryCommon:334: getpwuid(0) failed 2
<3>WSL (15) ERROR: CreateProcessEntryCommon:505: execvpe /bin/sh failed 2
<3>WSL (15) ERROR: CreateProcessEntryCommon:508: Create process not expected to return
```

# 解決の糸口

* 「UtilTranslatePathList」というキーワードで検索してみたところ、[WSL2が起動できなくて困った話](https://zenn.dev/tomo0611/articles/a0f352b42eb17c)に書かれていた方法で解決できました。
  * その前に[こちらの記事](https://zenn.dev/karaage0703/articles/e30c9614a55bdb)を参考にしてWSLを無効化→有効化と切り替えてみたものの、今回は問題を解決できませんでした。

# 解決方法

* `wsl --list`を実行して「WSLで使用可能なディストリビューションの一覧」を表示すると、Docker Desktopが規定のプログラムになっていることが分かりました。

```Powershell:
PS C:\Users\NKOJIMA> wsl --list
Linux 用 Windows サブシステム ディストリビューション:
docker-desktop-data (既定)
Ubuntu
docker-desktop
```

* そこで、`wsl --setdefault Ubuntu`を実行して規定のプログラムをUbuntuに変更します。

```PowerShell:
PS C:\Users\NKOJIMA> wsl --setdefault Ubuntu
この操作を正しく終了しました。
```

* 規定のプログラムをUbuntuに切り替えると、以下のように正常にWSLを起動することが出来ました。

```PowerShell:
PS C:\Users\NKOJIMA> wsl
To run a command as administrator (user "root"), use "sudo <command>".
See "man sudo_root" for details.

nkojima@NKOJIMA-DESKTOP:/mnt/c/Users/NKOJIMA$
```

# エラーが発生した原因

* 今回のケースではDockerDesktopが規定のプログラムになっていたので、DockerDesktopをインストールしなければエラーが発生しなかったと思いますが、そもそも規定のプログラムが切り替わってしまった理由は分かりませんでした。

# 参考URL

* [WSL2が起動できなくて困った話](https://zenn.dev/tomo0611/articles/a0f352b42eb17c)
* [起動しなくなったWSL2を復活させるまでにしたあれこれ](https://zenn.dev/karaage0703/articles/e30c9614a55bdb)
CSR・SSRの違いとは

## はじめに
Webブラウザにおけるレンダリングとは、WebサイトのHTMLやCSS、JavaScriptファイルをそのままのコードではなく、画像・映像などの形式として閲覧できる形に変換することです。
Webアプリケーションのレンダリング手法は様々ありますが、本記事ではCSR(Client Side Rendering)、SSR(Server Side Rendering)の違いについて、まとめます。
## CSR
CSRでは、クライアントからのリクエストに対して**JS、CSS、ほぼ空のHTMLファイル**がサーバーから返却されます。その後、クライアント側でJavaScriptを実行し、APIから取得したデータなどをもとにレンダリングします。
単一のWebページを読み込み、別の内容を表示する際にはJavaScriptを通じて内容を更新する**SPA**(Single Page Application)を実現するためには必須の技術といえます。

一度ページを読み込んでしまえば、画面遷移しても画面全体を再描画する必要がなくなるというメリットがあります。

一方で、初回表示に時間がかかる・パフォーマンスがユーザーの環境に依存する・SEOで不利になるといったデメリットがあります。

以上のことから、画面遷移をする機会が多いアプリやSEOを意識する必要がないアプリにはCSRは適しているといえるでしょう。
## SSR
SSRでは、クライアントからリクエストが送信されるとサーバー側でJavaScriptを実行し、**JS、CSS、レンダリングされたHTMLファイル**がサーバーから返却されます。
ただし、サーバー側でレンダリングされるのは静的なHTMLであり、ユーザーが操作できない状態となっています。そのため、クライアント側で再度レンダリングを行い、サーバー側でレンダリングされたHTMLにイベントハンドラーが登録されます。この過程は**ハイドレーション**と呼ばれ、サーバーとクライアントそれぞれでレンダリングされたHTMLの内容に差があるとハイドレーションエラーが発生します。

CSRとは対照的に、初回表示にかかる時間が短い・パフォーマンスがユーザーの環境に依存しない・SEOに強いといったメリットがあります。

一方で、アクセスする度にサーバーに負荷がかかる、CSRに比べて設計が難しいなどのデメリットがあります。

以上のことから、コンテンツ更新頻度の高いアプリやSEOを意識する必要があるアプリにはSSRは適しているといえるでしょう。

## まとめ
本記事では、CSRとSSRの違いについてまとめました。Next.jsやNuxtでは、CSR/SSRの機能が提供されており、必要に応じて使い分けることが求められるでしょう。
PdMの参考まとめ

# 参考リンク
## PdMの役割
- https://productzine.jp/article/detail/138
- https://productzine.jp/article/detail/189
## プロダクトマネージャーの業務マップ
    - Smartbank
        - https://blog.smartbank.co.jp/entry/2023/03/28/110000
    - モノグサ
        - https://note.com/monoxer/n/na0b2234e74d4

## PdMの種類
- https://note.com/shin_sasaki/n/nfbf43885fd58
## 1人目のプロダクトマネージャーの心得
    https://logmi.jp/tech/articles/329864
1. 1つ目は自分が何を、どのようにやるのか。そして自分のしていることが正しいと周りに説得しないことです。自分がすることの許可を求めるのではなく、その価値を上げるのです。プロセスを円滑化できるポイントや、プロダクトを顧客に理解してもらう方法を話し合ったりすることで、チームの一員として信頼を得るのです。エンジニア、プロダクトを担当している創業者、組織内の他のパートナーとの間で信頼関係を築き上げることで、自分のやってきたことに名前を付けて説明するのです。「これまで作りたい機能について一緒に確認して話し合ってきたよね？　バックログを見直しながら一緒に取り組めるかな？」と言えばいいのです。
多くのエンジニアはプロダクトに詳しいですが、ストーリーマッピング、ユーザーインタビュー、発見、私たちがどのように学ぶのかなどについて語る時は、まず行動して、そのあとに説明する。（エンジニアと）真正面から戦おうとしないことです。
2. あなたの一番手強い利害関係者は、あなたが入社する前にプロダクトを担当していた人だということです。

あなたの前任はCEO、CTO、もしくはプロダクトの方向性を導いてきた共同創業者の1人かもしれません。プロダクトの主導権を手放すのが難しいと感じることが多い彼らと、良好な関係を築くことが大切です。必ずしもみんなができてはいないのですが、まずフィードバックをきちんと聞きましょう。その上で自分がやりたい理由、反対する理由、相手がやりたい理由を裏付けるデータを使いましょう。

要するに自分の意見をデータで裏付けるということです。彼らは創業初日から在籍しているので状況をよく知っていますし、アイデアも多く持っています。そこに入り込んで「私はまったく違う方向に動かしたいです」と言っても、彼らは反発するだけです。一方で、もし「このデータ情報、リサーチに基づいて、このように考えます」と説明すれば、彼らを説得できる可能性はぐんと上がります。

## NSM
https://www.kandc.com/eng/event/020/
Neovimでソースコードレビュー！！！

最近neovimでソースコードレビューの環境が整ってきたので世に広めたいと思います。
というかほぼプラグインの紹介です。

## 目次

[1. プラグインのインストール](#1-プラグインのインストール)
[2. keymapsの設定](#2-keymapsの設定)
[3. 使ってみる](#3-使ってみる)

## 1. プラグインのインストール
[diffview](https://github.com/sindrets/diffview.nvim)というプラグインを使います。
gitの差分表示に特化したプラグインです。デモとか使い方とかはリンク先のREADME見てください。
ちなみにnvimにおいてgitの主力なプラグインとしては[gitsigns](https://github.com/lewis6991/gitsigns.nvim)というプラグインがありますが、差分表示の仕方にあまりしっくりこなかったです。

packerを使っている方は以下でインストールできます。
セットアップのスクリプトも特に不要です。
```plugin-setup.lua
use("sindrets/diffview.nvim")
```

## 2. keymapsの設定
パパッと差分を表示できるようにkeymapも設定しておきます。

```keymaps.lua
keymap.set("n", "<leader>hd", "<cmd>DiffviewOpen HEAD~1<CR>", silent)
keymap.set("n", "<leader>hf", "<cmd>DiffviewFileHistory %<CR>", silent)
```

軽く説明をすると、
`DiffviewOpen HEAD~1`というコマンドは、HEADと、HEADから一個前のコミットの差分を表示するコマンドです。私はgit系のコマンドは`h(unk)`から始めるように統一してるので、`hd`でマップしてます。
`DiffviewFileHistory %`というコマンドは、開いているファイルの変更履歴を表示するコマンドです。

## 3. 使ってみる
今回は私の[nvimのconfigリポジトリ](https://github.com/ysmb-wtsg/nvim)を使ってソースレビューをしてみます。

![スクリーンショット 2024-03-20 23.01.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2947418/b962e419-9c5c-69de-995e-d700ac10a74e.png)

ここで、`<leader>hd`を実行すると、

![スクリーンショット 2024-03-20 23.03.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2947418/9ea1ee4a-7ebf-af36-e493-4f21364df070.png)

こんな感じでGitHubやGitLabで見れるような差分ビューアが表示されます。

ちなみにファイルを選択して`<leader>hf`を実行すると、

![スクリーンショット 2024-03-20 23.06.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2947418/10a49da0-9bb7-eef8-4d1c-ea43b35df80c.png)

こんな感じで、ファイルに関連する過去のコミットと、その差分が表示されます。

## ちなみに
GitHubのPRをレビューするためのプラグインもあるのですが(詳しくはググってください)、GitLabなどの他のサービスでもレビューできるようなプラグインとして今回はdiffviewを紹介しました。

それではより良いnvimライフを！！！
動画サブスクまとめでもAIを使いたい

今後副業は増えるのかどうか

一時期個人でのアフィリエイターたちがたくさん稼げていた時代があったが、現在は強豪ドメインを持つ企業が参入してきてなかなか表示順位を上げるのも難しい状況。

企業が運営しているサイトに個人で SEOを頑張って勝つかニッチなジャンルやロングテールを狙うしかないのかな？

と色々呟いてみました。

動画配信サービスをこれから使う予定の人はぜひ参考にしてみてください。
https://douga-sabusuku.com/
直近触れていないなー
これからAIを使って記事とか書いていきたい。
GPT４を使いこなせていないのでここは反省点。
これは無理やりチャットGPTに書いてもらった記事。
https://douga-sabusuku.com/blog/fashion-affiliate-procedure/
クラスとインスタンスについて。初学者が理解するに至ったイメージ。

## まえがき
PHPのクラスとインスタンスについて書こうと思います。
よく、クラスは設計図でインスタンスは出来上がったもの。みたいな解説を見ます。
これの意味が全く理解できず沼ったので、同じように沼った方の助けになれば。なんとなく理解した後であればわからなくもない表現ですが...。

## クラス
PHPにおけるクラスとは
```php:index.php
class Xxx{

}
```

これがクラスです。
- class と宣言をし
- xxx クラスに名前をつけます
- {}　の中にクラスの素材をいれていきます

じゃあクラスって何いれんの？　となりますが基本的に入れるのは　変数　と　関数　この二つです。
なんでいれるの？って話ですが...
規模によっては、関数や変数の数が1000以上あったりします。とんでもない数です。
関数を改造したりと管理しやすいように、似た機能のものなどでグループ分けします。
SNSなどを例にすると
- ログインログアウトアカウント作成などの認証クラス
- 文字や写真を投稿するクラス
- お気に入りや拡散などオプション系のクラス
- などなど
このようにまとめておけば管理がしやすいですね。変数や関数をグループに分けて管理しやすくするための概念です。

## クラスに変数や関数を入れる方法
```php:index.php
class Zzz{
 public $xxx;//変数の定義

 public function hensuu() {
    return $this->xxx;
    }//関数の定義
}
```
クラスの中に直接書き込めば定義できます。

いくつか補足
- クラス名「Zzz」最初の文字は大文字にする必要があります
- クラス内では$xxxは「変数」ではなく「プロパティ」と呼びます
- 関数は「メソッド」と呼びます
- 「$this」は　同じクラス内と言う意味　class Zzz を指します。直後に「→」でZzzクラスの中のプロパティやメソッドにアクセスできます

## クラスの中の変数や関数を使う方法
クラスの中の関数や変数を使う方法。
先ほど作ったZzzクラスの$xxxに値を入れて、その後hensuu()メソッドを使ってみましょう
```php:index.php
class Zzz{
 public $xxx;

 public function hensuu() {
    return $this->xxx;
    }
}

$class = new Zzz();//$classにZzzクラスが入る
$class -> xxx = "プロパティに文字入れるよ";//$xxxに文字列が入る
echo $class -> hensuu();//ここでhensuuメソッドが使用できている
//xxx に"プロパティに文字入れるよ"が挿入され、hensuuによってreturnされxxxがechoされる

//変数にアクセスする方法も関数と同じで「->」を使う
echo $class -> xxx;
```

適当な変数に「new」と、直後にクラス()を書いて代入してあげれば、変数にクラスがぶち込まれます。
それ以降変数に「->」を使ってあげれば変数と関数にアクセスできます。


変数にクラスが入ること　→　クラスをインスタンス化する
クラスが入っている変数　→ 変数とは言わない「オブジェクト」
クラスの中に存在する変数関数　→ プロパティ　メソッド
-> この右矢印は「アロー演算子」と言う


クラスをインスタンス化するとき（変数にクラスを入れる時）は、クラスの名前をそのまま変数名にしてあげると後々何が入っているかわかりやすいです。
```php:index.php
$zzz = new Zzz();
$zzz -> hensuu();
```


## なんで設計図と出来上がったものと例えるか
アプリなどを作る上での関数は、DBからいろんなデータを持ってきたり、繋げたりいじったりします。
変数はそのクラス内でいろんな値が挿入されます。（ユーザーの名前とかIDなど）
おそらくプロパティ（変数）が材料に見え、あれこれするから設計図というような例えになったのかと思います。

## あとがき
まだ初学者の域にいるような者が書いた稚拙な文章なので間違いがあった場合は申し訳ございません。ご容赦ください。
PHPのレベルが０の方が1になるための手助けになればと思い書きました。同じ初学者の視点だからこそ助けになるものもあるかと思います。参考にされば幸いです。
次はクラスの関係、いわゆるクラスの継承や親子クラスなどを解説できたらと思います。
マニュアル作成　失敗例備忘録

私が所属しているチームは、メンバーの入れ替わりが激しいです。
新規メンバーアサインの度にレクチャが必要ですが、レクチャするための資料がなかったりまとまっていなかったりすると色々と問題が起きます。
いろんなところからメモを引っ張り出す必要があり時間を要したり、断片的に伝える形になって相手に伝わりにくくなったり、と不都合が起きるため、日々メンバーでマニュアル整備を行なっています。

今回はマニュアル作成においてよくある失敗例について、備忘のためまとめました。

# 誰からみても明らかな名称を使っていない
テキストフィールドの名称やクリックするボタン・タブの名称など、実際のUIに使われているテキストを用いていないことがあります。例えば、実際には「キャンセル」ボタンなのに「削除」ボタンとマニュアルに書いてしまうとか。これをやると書いた人にはわかるけど他の人には伝わらないマニュアルになりがちなので注意しています。

# 全体概要がわからず何を説明されているかわからない
上手い説明の仕方として、全体像を説明してから詳細の説明をすると伝わりやすい、と聞いたことがあるかもしれません。マニュアルも同じで、全体像がわからないまま詳細だけ書かれていても理解しにくい資料になってしまいます。冒頭に全体像を説明する資料を入れるとか、個々のタスクのマニュアルにこれは全体像におけるどの部分なのかを示す図を入れてあげるとかすると、わかりやすくなります。大きな業務フローの中の1つのタスクのレクチャをする場合、アサイン直後の人にとっては全体像を完全に理解していないこともあるので、全体像におけるどの部分のタスクか冒頭で説明すると、点と点がつながりやすくなります。

# 作業の目的がわからない
目的理解が浅いと、作業の必要性を軽視し、手順を無視、その結果作業ミスが起きるという事態が引き起こされます。レクチャの際に口頭で説明するだけだと受ける側が忘れてしまう懸念が高く、レクチャをする側も説明し忘れる可能性があります。マニュアルに作業目的を盛り込むことは少ないかもしれませんが、入れておくといいことのほうが多いと思っています。

# さいごに
浅学ながら、備忘のためマニュアル作成における失敗例をまとめました。
テクニカルライティングの知識をつけて再編集したいと思います。
乱文失礼いたしました。お読みいただきありがとうございました。
ベルヌーイ分布を実装する

確率分布で有名なベルヌーイ分布を理解するためにプログラミングで試します。動作環境はVisual Studio Community 2022のバージョン17.7.4です。

# 概要
ベルヌーイ分布とは、確率${\theta}$で1を、確率${\theta-1}$で0をとる離散確率分布のことです。確率質量関数は次の式で表されます。

```math
P(x|\theta) = \theta^{x}(1 - \theta)^{1-x}
```
```math
x = 0, 1
```
```math
\theta\in(0, 1)
```

簡単に言うとコインを投げて裏表どちらが出るかとか、ゲームで攻撃が命中するか外れるかのような2択の試行を扱う離散確率分布です。

# Pythonでの実装
Pythonでベルヌーイ分布を実装する場合、オープンソースのライブラリであるSciPyを使うと簡単に実装できます。SciPyは外部のライブラリなのでインストールされていない場合は、pip installでインストールしてください。Pythonでの実装は以下のようになります。

```Python:bernoulli.py
import scipy.stats as stats

d = stats.bernoulli(0.6) #確率0.6で1が出るベルヌーイ分布を定義
x = d.rvs(10) #ベルヌーイ分布に従うサンプルを10個生成
print(x)
# [0 1 1 1 0 1 1 1 1 0]
print(d.pmf(0)) #0が出る確率
# 0.4
print(d.pmf(1)) #1が出る確率
# 0.6
```

サンプルではstats.bernoulliの引数を0.6にしているため0より1が出やすくなっています。引数を変更することで0と1の出やすさを操作できます。

# C++での実装
C++でベルヌーイ分布を実装する場合は、標準ライブラリのrandomを使います。C++での実装は以下のようになります。

```C++:Bernoulli.cpp
#include <iostream>
#include <random>

int main()
{
	std::random_device rng; //乱数インスタンスの生成
	std::bernoulli_distribution dist(0.6); //確率0.6で1が出るベルヌーイ分布を定義
 
    //ベルヌーイ分布に従うサンプルを10個生成
	for (int i = 0; i < 10; i++)
	{
		std::cout << dist(rng) << std::endl;
	}

	std::cout << 1 - dist.p() << std::endl; //0が出る確率
	std::cout << dist.p() << std::endl; //1が出る確率
}
```

C++はPythonと比較すると少し複雑ですが、標準ライブラリにベルヌーイ分布が付いているのでインストールなしで使えます。

# 参考
https://www.kspub.co.jp/book/detail/5279786.html
https://cpprefjp.github.io/reference/random/bernoulli_distribution/p.html
データフレームを画像出力 matplotlib

日本語対応

```.py
import matplotlib.pyplot as plt

def get_Image(self,df:pd.DataFrame):
    # データフレームを画像として表示
    plt.figure()
    plt.rcParams["font.family"] = "MS Gothic"
    fig, ax = plt.subplots(figsize=(100,10))
    plt.table(cellText=df.values,
            colLabels=df.columns,
            cellLoc='center',
            loc='center')
    plt.axis('off')  # 軸を非表示にする
    plt.title('データフレームの内容')
    plt.tight_layout()  # レイアウトを自動調整
    plt.show()
```
SharePointでのファイルの復元について

## はじめに
前回、Windowsのエクスプローラによるファイルの復元について記事を書きました。
[エクスプローラによるファイルの復元について](https://qiita.com/t-namba/items/c57c44cdf49ff5adc923)

興味があれば上記も見ていただければと思いますが、
今回は第2弾(？)として、SharePointのファイルやサイトの復元に関する情報を備忘としてまとめました。

そもそも、復元が必要になるようなミスが起きないようにすべきですが、複数人が同時に同じファイルを扱っているといろいろなことが起こりえます。
そんな、もしもがあった場合のための記事です。

## SharePointって？
SharePoint知らない人は本記事を読んでないと思いますが、
どんな風に使うのか、というのを簡単に説明すると、
社内用のWebサイトを部署やチーム毎に作成及びカスタマイズする、
といった使い方が出来ます。
主な用途としては、共通のナレッジや情報をまとめておく、
ストレージにファイルを格納し共有したり、
仲間や顧客と情報をシェアするなどかと思います。

他にもいろいろとやれることはありますが、今回はストレージへのファイルの格納のうち、ファイルを復元する方法が対象です。

## ファイルの復元方法
ストレージに格納したファイル復元するには、
復元したいファイルの「…」を押下し、[バージョン履歴]を開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530030/d184484f-56a0-d585-f4f4-4fdc89e4f87f.png)

ファイルのバージョンの一覧が表示されるため、
復元したいバージョンの更新日時のプルダウン(▼)から復元を選択、「OK」をクリックすれば復元が可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530030/f0ecfffb-a1c2-c2fb-ea15-8e1c85e08067.png)

### ドキュメントにファイルが存在しない
ドキュメントに既にファイルが存在しない場合は、サイト内のゴミ箱を確認してください。
また、ゴミ箱から削除してしまった場合でも、管理者であればファイルの復旧が可能な可能性があります。
SharePointの規定では30日間が保存期間になっていますが、期間は管理者側で伸ばすことが可能なため、社内の担当者等がいればファイルの復旧について確認してみてください。

## 注意点
バージョン履歴は、既定でオンになっていますが、[バージョン履歴] コマンドが表示されない場合は、オフになっている可能性があります。
管理者がSharePointを設定した方法によっては、使用できない場合もあるため注意してください。


## まとめ
最初にも書きましたが、復元が必要になるようなミスは起こさないようにすべきです。
ですが、いつかは起こることだとも思いますので、非常時の対処法として覚えておいて損はないです。

また、sharepointだと退プロによるアカウント削除やサイト削除によってデータが取り出せなくなった、削除されたということも起こりえます。
そういったパターンでも、管理者側では復旧できる場合もあるので頭の片隅に入れておいて下さい。

## 参照
[SharePoint で以前のバージョンの項目またはファイルを復元する](https://support.microsoft.com/ja-jp/office/sharepoint-%E3%81%A7%E4%BB%A5%E5%89%8D%E3%81%AE%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%81%AE%E9%A0%85%E7%9B%AE%E3%81%BE%E3%81%9F%E3%81%AF%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E5%BE%A9%E5%85%83%E3%81%99%E3%82%8B-f66dbda0-81f4-4d1e-b08c-793265c58934)
[リストまたはライブラリのバージョン管理を有効にし、構成する](https://support.microsoft.com/ja-jp/office/%E3%83%AA%E3%82%B9%E3%83%88%E3%81%BE%E3%81%9F%E3%81%AF%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%AE%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E7%AE%A1%E7%90%86%E3%82%92%E6%9C%89%E5%8A%B9%E3%81%AB%E3%81%97-%E6%A7%8B%E6%88%90%E3%81%99%E3%82%8B-1555d642-23ee-446a-990a-bcab618c7a37)
vscode拡張子ごとの文字コード自動識別

## 手順

* vscode内でF1を押下
* \> が現れる
* \>user settings.jsonと入力する
* 以下をJSONに追記

```
"[bas]":{"files.encoding": "shiftjis"},
"[frm]":{"files.encoding": "shiftjis"},
"[bat]":{"files.encoding": "shiftjis"},
"[py]":{"files.encoding": "utf8"},
```

参考URL: 
https://qiita.com/fattonton1/items/6b836d9f65b445af54ac
SUNO AI 🔥今話題の音楽生成AI🔥

![ダウンロード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2849682/3f59d91c-f8cb-4c3e-09ec-1116d0524118.png)
### 導入

2024年3月20日、ここ最近話題になっている。音楽生成AI,SUNO AI。その騒がれ方が異常なので、まとめてみた。

## すごいと思ったX POST での紹介

### ありそうなEDM音楽

https://twitter.com/8co28/status/1770227096440438887

### もうまるまる曲作っちゃってる

https://twitter.com/PositivFuturist/status/1770424646631919750

### 生成AIの掛け合わせで映像作品を作る

https://twitter.com/AIsonesone/status/1747905139950932240

### イーロン・マスクとサム・アルトマンで曲作られてた(笑)

https://twitter.com/MagicHustler_/status/1765475638259904844

https://twitter.com/minchoi/status/1767215056557604983

## suno x 公式アカウント

https://twitter.com/suno_ai_/status/1770126482762830028

## suno 公式サイト

https://www.suno.ai/

## 何が優れていて、革新的？

Suno AIは他の音楽生成AIと比べて、
1. **歌詞からボーカル入りの曲を生成できる**
2. **日本語を含む多言語の歌詞に対応**
3. **音楽知識がなくても本格的な曲が作れる**
4. **DiscordやWebブラウザから手軽に利用可能**
5. **他のAIツールと組み合わせた活用の可能性**

これらの有力な特徴から音楽生成系AIの中で、一歩suno はリードしているかもしれない。
Swiperのコードは階層構造になっていますか

## はじめに

Swiperを用いてトップ画像をスライダー形式に変更しようとした時に**思わぬところ**で詰まった時の話です。

## 環境

ruby 3.14

rails 7.0.3.1

swiper 11.0.7

## 用語

**スライダー形式とは**

**複数の画像がスライドのように、一定の間隔で切り替わるもの**です。ホームページのトップ画面などでよく見かけます。スライドしている画像をクリックすると、関連ページに飛べるようにも出来ます。

**Swiperとは**

jQueryプラグインの1つ。

**jQuery**とは、「表示されているページを使いやすくする」ための機能であり、**jQueryプラグイン**とは、「Webサイト作成で特定の機能が欲しいときに、jQueryと併用して利用できる」ものです。簡単な設定で導入できるとても便利なものです。

[Swiperのサイト](https://swiperjs.com/)に書いてあるコードでシンプルな実装が出来る他にも、npmや**yarn**などのパッケージマネージャーを使ってSwiperをプロジェクトにインストールして、JavaScriptやCSSファイルを自分のプロジェクトに組み込む事でより高度な機能やカスタマイズが出来ます。

今回はyarnを利用してインストールします。

`yarn add swiper`

## 実装、しかし

ここから実装していき完成かと思われましたが、動きません。

トップページを見ると**画面が縦並びに5つ並んでいる状態**になっています。

node_modulesがRailsアプリケーションのアセットパスに加えられているか、Javascriptは読み込まれているかなどを確認しても問題なさそうです。

それでは一体なぜでしょうか。

## 何が原因だったか

結論から言うとビューの**インデント**に問題がありました。

app/views/layouts/_header.html.slim
```ruby
header
  .swiper-container
    .swiper-wrapper
    - if current_site.main_images.present?
     - current_site.main_images.each do |main_image|
       = image_tag url_for(main_image), class: 'swiper-slide'
    - else
      = image_tag '/images/cover.jpg', class: 'swiper-slide'
    .swiper-pagination
    .swiper-button-prev
    .swiper-button-next

    .container.blog-title
    h1 = link_to current_site.name, root_path
    p.lead = current_site.subtitle

<!-- 省略 -->
```

4~6行目が問題点でした。
[Swiper公式サイト：スワイパーHTMLレイアウトの追加](https://swiperjs.com/get-started#add-swiper-html-layout)によると、

**swiper（今回はswiper-containerという書き方を採用） > swiper-wrapper > swiper-slide と階層構造**になっています。

では開発者ツールのElementsを確認してみましょう。

[![Image from Gyazo](https://i.gyazo.com/2b96f37a89199b2c32ed245e7d2f0693.png)](https://gyazo.com/2b96f37a89199b2c32ed245e7d2f0693)

これでは階層構造になっていません。

（この状態で開発者ツールのConsoleをチェックすると、**スワイプする画像がない、もしくは画像の数が足りない**といった意味の表示がされていました。画像は表示されているのになぜだとこの時僕は右往左往していました。）

早速、4~6行目を訂正しましょう。Tabキーあるいは半角でスペースキーを入力します。

app/views/layouts/_header.html.slim
```ruby
header
  .swiper-container
    .swiper-wrapper
      - if current_site.main_images.present?
        - current_site.main_images.each do |main_image|
          = image_tag url_for(main_image), class: 'swiper-slide'
      - else
          = image_tag '/images/cover.jpg', class: 'swiper-slide'
    .swiper-pagination
    .swiper-button-prev
    .swiper-button-next

    .container.blog-title
    h1 = link_to current_site.name, root_path
    p.lead = current_site.subtitle

<!-- 省略 -->
```

ブラウザで確認すると、ちゃんとスライド機能が実装されていました。

開発者ツールのElementsを確認すると、きちんと階層になっている事が確認できます。

[![Image from Gyazo](https://i.gyazo.com/eb6d301f65b40e88be465326cda38f42.png)](https://gyazo.com/eb6d301f65b40e88be465326cda38f42)

## まとめ

インデントに対して今までは、i18nを使用するためのja.ymlファイル、rubocop対策以外は"コードを見やすくするためのもの"という認識でいたので、今回は盲点でした。

## 補足
今回はActiveStorage::Attachmentから取得している画像をトップ画面にスライド形式で表示させます。また今回ビューはslimの記法で書きました。

## 参考にさせていただいた記事

https://www.kagoya.jp/howto/it-glossary/web/jquery/

https://swiperjs.com/get-started#add-swiper-html-layout
Windows Server 役割サービス の インデックス

# はじめに
Windows Server 役割サービスの記事をいくつか書いてきたので、インデックス化しておこうと思います。

いずれも、手順の全画面のキャプチャを取るようにしているので、そのあたりが参考になるかと思います。

今後も、記事を追加したら、この記事からリンクするようにします。

**役割の一覧**　※以下の画面は、画像加工しており、全部を一度に表示させてます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1619637/508d7968-2602-0fe6-a11e-2ae77a3cc703.png)

# インデックス
|No.|役割名 (Link)|略称|備考|
|:-:|:-:|:-:|:-:|
| 1|[Active Directory<br>メインサービス](https://qiita.com/carol0226/items/b94f93adc309b5dc8ee8)|AD DS|ドメインコントローラーの昇格からクライアントがドメイン参加するまでを解説しています。|
| 2|[Active Directory<br>ドメインサービス<br>(on Azure)](https://qiita.com/carol0226/items/084fbbb3f31b646025f4)|AD DS|上記の手順に対して Azure 上に構築する際に注意すべき内容が追加されています。|
| 3|[Active Directory<br>証明書サービス<br>証明機関 (CA)](https://qiita.com/carol0226/items/cb38ed3188c520bd9d64)|AD CS|初期構築に加えて、証明書失効や証明書のインポートエクスポート、NPS との連携まで、さまざまな関連記事があります。|
| 4|[Active Directory<br>証明書サービス<br>(NDES)](https://qiita.com/carol0226/items/472747e7308762ca0ce1)|AD CS|ネットワークデバイス登録サービス (NDES) の機能についての記事です。Intune 証明書コネクタを使って Intune から クライアント証明書 (SCEP) を配布する方法を紹介しています。|
| 5|[DNS サーバー](https://qiita.com/carol0226/items/3dec4a5079b9dc3f2eee)|DNS|DNS役割サービスのインストール手順です。|
| 6|[Hyper-V](https://qiita.com/carol0226/items/b5ca1ec882742e208e00#hyper-v-役割サービスの導入)|Hyper-V|Azure 上に Hyper-V を動作させる Nested VM を構成する方法や、VM に OS をインストールする手順などの関連記事もあります。|
| 7|[Web サーバー (IIS)](https://qiita.com/carol0226/items/4357e773efdbb08b5c52)|IIS|シンプルに インターネットインフォメーションサービス (IIS) を導入して サンプル Web サイトを表示させる手順です。<br>Next Step として HTTPS に公的証明書をバインドして公開する手順も紹介しています。 |
| 8|[ネットワークポリシーとアクセスサービス](https://qiita.com/carol0226/items/1f4bb866c66e0ea440b2)|NPS|WiFi AP と連携した 802.1x 認証を実現させるためのさまざまな関連記事があります。
| 9|[リモートアクセス](https://qiita.com/carol0226/items/014be06b02fb7b7ca352)|RAS|役割インストールの手順に加えて、Azure 上に RAS を導入して、VPN サーバーを構築する手順も紹介しています。|

# Windows Server の インストール手順
役割サービス を導入するためには、Windows Server の手配が必要です。
以下の記事で紹介していますので、参考にしてみてください。

https://qiita.com/carol0226/items/53ef3c6bc9948a2b79f9

https://qiita.com/carol0226/items/5ce41188f1babfa4588e