OmniAICreator/Qiita-1.07M huggingface dataset:
LinuxへRemoteDevelopmentで接続する際の認証エラーを解消する

# LinuxへRemoteDevelopmentで接続する際の認証エラーを解消する

## 概要

WindowsPCにおいてVSCodeのRemoteDevelopmentでVirtualBoxのLinux(Ubuntu)に接続しようとすると認証エラーになってパスワードの入力を求められるのを解消したい。

- ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3951560/af294469-fd83-bd25-d284-96a2ca667843.png)

```shell
Bad permissions. Try removing permissions for user: BUILTIN\\Users (S-1-5-32-545) on file C:/vm/vagrants/terraform/.vagrant/machines/default/virtualbox/private_key.
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@         WARNING: UNPROTECTED PRIVATE KEY FILE!          @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Permissions for 'C:\\vm\\vagrants\\terraform\\.vagrant\\machines\\default\\virtualbox\\private_key' are too open.
It is required that your private key files are NOT accessible by others.
This private key will be ignored.
Load key "C:\\vm\\vagrants\\terraform\\.vagrant\\machines\\default\\virtualbox\\private_key": bad permissions
vagrant@terraform's password:
```

### 設定

- .ssh/config の設定
    ```config
    Host terraform
      HostName terraform
      User vagrant
      ForwardAgent yes
      IdentityFile C:\vm\vagrants\terraform\.vagrant\machines\default\virtualbox\private_key
    ```

## 原因

エラーログにある通り、秘密鍵(private_key)のパーミッションが問題。

秘密鍵はオーナのみアクセス可能なパーミッションにする必要がある。

## 対策

1. 秘密鍵(private_key)のプロパティからセキュリティタブを開く
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3951560/6349f095-b365-18b4-b388-97b76181c355.png)
1. 詳細設定をクリックし詳細設定ダイアログを表示
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3951560/0725e134-b8b4-e3cd-f4f7-dedb2040e292.png)
1. 継承の無効化をクリックし「このオブジェクトから継承されたアクセス許可をすべて削除します。」をクリック
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3951560/afe636a6-faf5-9776-d8f4-6ecf39ca428b.png)
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3951560/7ca0a323-6220-376f-8236-2298fd62b951.png)
1. 追加ボタンをクリックしアクセス許可エントリダイアログを表示
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3951560/956ca72e-a545-805f-69f3-e9413233dde4.png)
1. プリンシパルの選択をクリックし、自分自身を追加
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3951560/427d259e-393a-d15c-4190-3c0ba22e996d.png)
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3951560/24285b9c-856f-60a9-af1a-672e465a2b64.png)
1. アクセス許可を読み取りのみにしてOKボタンをクリック
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3951560/52b22f9b-45f6-85d1-239d-76461e8821ba.png)
1. 設定完了
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3951560/40d4542d-b75d-34cd-a016-99065984444e.png)
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3951560/0faa25d9-8796-2b27-a674-710d807cc8bc.png)
github パスキーをタブレット専属とすることに

# github割と認証要求する問題

 githubってブラウザアクセスのとき、割と頻回に認証を要求してきます。
 単なるパスワード認証ならいいけど、それ以外を要求することもおおいみたいで
 それが私にとって問題です

 そういう認証が要求されるときの選択肢はつぎのとおりです

 - リカバリーコード
 - スマホの認証アプリ
 - ブラウザの認証アプリ
 - SMSに番号を送ってもらう
 - キー

 ## リカバリーコード

 高い確率で書いてあるノートを持参しているので、これでいけるけど、使ったやつに取り消し線
 してないので、そいつを入力してしまい、ストレスがたまることがあります

 ## スマホの認証

 スマホを持ってきてないとか家に忘れたってことがあるので、これはリスキーです。

 ## ブラウザの認証

 わたくしのタブレットはandroidなので、そういうのができるのかわかりません。

 ## SMS

 これもスマホをわすれてると終わるので（　＾ω＾）・・・

 ## キー

 キーがいいのかな？そうおもって、タブレットとキーを必ず一緒にしておくようにすることにします。
 これで運用してみて様子を見ることに。

 パスキーのスペアも購入検討中です
テックリードの職務経歴書の書き方

この記事は「転職活動して気づいたこれをやっていれば/やってよかった をシェアする Advent Calendar 2024」に参加した記事です。

https://qiita.com/advent-calendar/2024/engineering-careers-2


## 自分の転職活動で感じた職務経歴書の表現の難しさ

私は今年に転職したため、転職活動の中で職務経歴書を通じて自分のスキルや経験を適切に伝える難しさを改めて実感しました。

特に技術力が高まると、技術言語やフレームワークの知識を持っていることだけが強みではなく、その「技術をどのように活用して広く影響を与えることができるか」を表現する必要が出てきます。

現在のエンジニア向けの職務経歴書フォーマットはメンバークラスのエンジニアのフォーマットになっているケースが多くあり、そのフォーマットに従っても表現に不足が出てしまうため工夫が必要に感じました。


## 転職後の採用を通して感じたきっかけ

転職後は引き続きエンジニア採用に関わる立場になったため、職務経歴書の確認や面接を担当しています。その中で、実力を持ちながらも職務経歴書で表現ができていない人が多いと感じる場面が多々あり、非常にもったいないと感じます。

自身の転職経験と採用側の視点を通じて感じたことを活かして、今回はテックリード級のエンジニアが職務経歴書で実力を上手く表現するための要素を書いてみたいと考えました。


## テックリードはメンバーエンジニアと職務経歴書の表現の仕方を変える必要がある

以前に職務経歴書について記事を書いたことがありますが、基本はこちらの内容は前提に、テックリードだからこその要素で何を書くべきかをまとめてみたいと思います。

https://qiita.com/newta/items/77eb14b1d67bc7ef1980


エンジニアとして経験を積み、中級以上のエンジニアになってくるとテックリードを経験することがあります。
テックリードを経験した職務経歴書はメンバーエンジニアの職務経歴書とは全く別の観点で記載する必要があります。

---
しかし、多くの場合、職務経歴上で上手く表現できている人は少ないです。なぜでしょうか。
それは、エンジニアの多くは転職を多く経験しておらず、プロのエージェントはエンジニアリングのプロではありません。しかし、良い職務経歴書を書くにはエンジニアリングの知識と転職の選考の知識の両方が必要です。

そのギャップによって、自分の実力を十分に伝える職務経歴書にすることが難しく、それを改善するチャンスもなく、残念ながらマッチする会社と出会う機会を失っているかもしれません。

この記事の職務経歴書の書き方で、自分の実力が正しく伝わる職務経歴書をつくってもらえると嬉しいと思っています。


## メンバークラスとは違うテックリードの役割

テックリードは技術的な方針を決める役割です。そのためには、技術的リーダーシップを取り、技術的なチームの支援、そして、システムの品質の担保を行うことに責任を持ちます。

つまり、システムをどう作るかの中心の役割となり、チームを推進し、システムの品質維持のための仕組みを作る必要があります。


## テックリードに必要な職務経歴書の表現

表現方法にはいくつもの切り口がありますが、今回は５つの観点に注目しました。

- 技術的意思決定 - リーダーシップ
- 技術を広く捉える - システムに閉じない技術
- チームに変化を起こす - 主体的行動
- 仕組みで解決する - 馬力でない解決
- 技術的探究心 - エナジージェネレーター


### 技術的意思決定 - リーダーシップ
技術名を書くときに、既に決まっていた技術を使ったのか、自分でいくつかの選択肢の中から導入を決めたのかで技術に対する理解度の深さが変わります。
技術名を書くだけでなく、技術の導入にどのように貢献したか、意思決定の背景を記載すると良いです。
その際に、この技術をなぜ選んだのかが伝わるとよりベストです。

### 技術を広く捉える - システムに閉じない技術
技術を書くときにシステムを作るだけの観点になっていますが、テックリードは事業で実現したいことをシステムで作り上げる観点が必要です。
つまり、技術とは事業などの背景があって、最適なものは変わります。
それぞれの技術には特性があるだけであり、メリット・デメリットが存在します。

技術のエピソードには事業やチームの背景があって調整した技術の進め方があるはずです。
これらを言語化して表現できるとより良いです。

### チームに変化を起こす - 主体的行動
主体的な行動力はエンジニアにも期待されることが多いですが、テックリードは主体的に行動した結果、自分自身のシステム実装の活動だけでなく、チームへの良い変化を与えることが当たり前に期待されます。
システム実装は１人でつくるものではなく、技術はテックリード１人で解決するものではないです。チーム全員の総合力がシステムの品質に繋がります。

つまりシステムの品質を高めるためには、チームへの何かしらの変化を与えなければ、単純に技術を使っているチームになるだけで、品質を高める文化は作り出せません。
技術を高める文化をリードする役割もテックリードに期待される主体性の１つです。
チームに変化を起こす文化づくりでもチームのフォロワーではなく、リードする主体性が必要です。

自分がいることで起こしたチームの変化を書いておくと良いです。

### 仕組みで解決する - 馬力でない解決
テックリードはチームで一番技術力が高いです。しかし、ずっとレビューマシーンや設計マシーンとしてチームのパーツになっていてはテックリードのレベルもチームのレベルも上がっていきません。

仕組みの代表としてCI/CDは基本的に導入しますが、仕組みによって品質を維持できるようなことを促すことで、テックリードがチームのパーツとしての負担を減らし、新しい技術課題の解決へ向き合える状態にできることが必要です。

どのような仕組みをチームに導入したのかを書いておくと良いです。

### 技術的探究心 - エナジージェネレーター
これら４つの行動を起こすためには、そもそも技術が好き、良いシステムを作ることを目指したいという思いが必要です。それらは周りの誰かから与えられるものではなく、自分の内から生まれるエネルギーです。このエネルギーが行動力の源泉です。この根源的な思いが技術への思いです。

なぜ技術が好きで、これまでその思いがあることで、技術的な理解や貢献につながった行動を書いておくと良いです。


## まとめ

どの観点でもメンバーに期待するときよりレベル感が高いということです。
同じ技術を表現するときに、理解のレベル感の高さを表現できているかに気をつける必要があります。

技術力はレバレッジが効く、大きな力があるものだと思っています。
その中心に立つテックリードへの期待は大きいですが、チームをリードしていたという事実だけでは十分にその実力が伝わりません。

多くの書類選考が問題なく通る人であっても、面接の時に自分の実力を伝えやすくなる練習として、職務経歴書をブラッシュアップして損はしません。

ぜひ自分の実力を正しく伝えられるように考える機会になればと思います。
【初心者向け】AWS CLIから複数リソースに一括でタグ付けを行う方法

こんにちは。
AWS初心者インフラエンジニアの青木です。

シェルスクリプトを用いて同一アカウント・同一リージョン内にある複数のEC2インスタンスのARNを指定し、一括でタグ付けを行いました。

AWS初心者の私は配列の指定法で少々沼ってしまったので、同じようなAWS初心者さんのお力になれればと思います。

本記事では、以下のAWS公式ドキュメントに沿って処理を進めています。
https://awscli.amazonaws.com/v2/documentation/api/latest/reference/resourcegroupstaggingapi/tag-resources.html

## 1. CloudShellでbashファイルを作成
CloudShellに以下のコマンドを入力します。
~~~
vi failename.sh
~~~
filenameの部分はお好きなファイル名を指定してください。

## 2. bashファイルにスクリプトを書き込む
1.でファイルを作成すると、自動で作成したfilename.shが開きます。
filename.sh内に、以下のスクリプトを書き込んでください。
~~~
aws resourcegroupstaggingapi tag-resources \
        --resource-arn-list arn:aws:ec2:ap-northeast-1:accountID:instance/instanceID arn:aws:ec2:ap-northeast-1:accountID:instance/instanceID \
                --tags stop-start=on
~~~
--resource-arn-list の後にタグ付けしたいEC2インスタンスのARNを貼り付けます。
2つ以上のインスタンスにタグ付けしたい場合、上記のように半角1文字分の(空白)をあけて列挙してください。

--tags 配下にはkey=valueとなるように任意の値を指定してください。

※ARN名を「"」で囲んだり、列挙するARN名とARN名の間に「,」を入れるとエラーの対象となりうまく動作しませんでした。bashでは空白一文字や「"」の有無でもエラーとなってしまうようなのでご注意ください！

## 3. bashファイルを保存して閉じる
2.が書き込めたら、`ESC`キーを押下 → `:wq`と入力してbashファイルの入力を保存・終了してください。

## 4. 作成したbashファイルを実行
3.が完了したらCloudShellの画面に戻るので、そのまま以下のコマンドを入力します。
~~~
bash tag-test.sh
~~~
tag-testの部分は、1.で作成したファイルの名前に置き換えてください。

## 5. 出力結果を確認
以下の出力となれば問題なく完了している合図です。
~~~
{
    "FailedResourcesMap": {}
}
~~~

以上で説明は終了です。
お疲れ様でした！

最後までお読みいただき、ありがとうございました。
Windowsフォルダパス逆引きメモ

必要に迫られたWindowsフォルダパスの逆引きメモになります

## 概要

`Windows 11 Pro 24H2`をCドライブにインストールした場合を基準としています

## システム関連

### hostsファイル

```
C:\Windows\System32\drivers\etc\hosts
```
【備忘録】Azure  ハブ&スポーク


# ハブ＆スポークとは

Azure ハブ&スポーク（hub ＆ spoke）とは「ハブ」と呼ばれる仮想ネットワークと「スポーク」と呼ばれる仮想ネットワークを接続した構成のことを言います。

公式ドキュメント

https://learn.microsoft.com/ja-jp/azure/architecture/networking/architecture/hub-spoke?tabs=cli

# ハブ
全ての通信はこの「ハブ」と呼ばれる仮想ネットワークを通ることになります。
オンプレミスや、インターネットなど外部からの通信がこのハブを経由し、スポークへ配置された各サービスに到達します。

ハブに配置するサービス例としては下記があります。
・Azure Bastion ホスト
・Azure Firewall
・Azure VPN Gateway
・Azure ExpressRoute ゲートウェイ

# スポーク

「スポーク」と呼ばれる仮想ネットワークではAzure VMなどのアプリ・サービスが配置されます。
また、公式ドキュメントの図をよく見るとわかりますがスポークはハブの後ろに複数くっつけたりします。
ハブとはピアリングをして接続します。

# どんな時に使うのか

#### 用途毎に仮想ネットワークを分けたい場合
スポークを分けてあげることで、別々に管理可能です。
スポーク同士の通信は一見、繋がっているようで分離されており通信できません（ルーティングがない）

よく見かけるのは開発用、本番用に分ける構成です。

#### Azure　Firewallなどのサービスを必ず経由させたい場合
Firewallの例で言うとハブに配置することで必ずFirewall経由の通信をスポークに届けることができ、逆にスポークからの通信も制御可能です。
Firewallの他にはBastion、Gateway、DNSやADサーバなどを配置したりします。

#### オンプレミスとクラウドを繋ぐ時
絶対というわけではありませんが、よく採用されている印象です。
オンプレ⇒ハブへアクセスさせます。

# 注意点

・基本的にオンプレミスとAzure内でIPアドレス空間が重複しないようにする必要があります。ハブ、スポークなど仮想ネットワークが複数作成されるため、アドレス空間は要注意です。
・ハブに障害があると全システム使用できません
・一度ハブを経由する分、通信遅延する可能性があります
・仮想ネットワークを複数使用するためピアリングが必要です。ピアリングは通信量が若干発生します。
OpenSearchのngramの設定を検討する

# はじめに
この記事は[株式会社うるる（ULURU）Advent Calendar 2024](https://qiita.com/advent-calendar/2024/uluru) の17日目の記事です。
私はこれまで全文検索エンジン（SolrやOpenSearch）を利用したシステムにいくつか携わってきました。全文検索エンジンで使用するngramには、これまでbi-gram(バイグラム)を使用してきましたが、昨年tri-gram(トリグラム)を使用しているシステムに携わり、それが有効なケースもあるとわかったのでそれを記事にしたいと思います。

# 全文検索を実装するための基本的な方法
全文検索エンジンで使用するインデックスの作成方法は形態素解析とngramの2種類あります。そして検索時には両方を併用するという方法を採用していることが多いかと思います。
形態素解析やngramとは何か、また両方を併用するにはどうすればよいのかという点については、「[Elasticsearchで日本語の全文検索の機能を実装する](https://www.elastic.co/jp/blog/how-to-implement-japanese-full-text-search-in-elasticsearch)」の記事がとてもわかり易いので参考にしてください。

# ngramの設定の選択肢
ngramはN文字ずつに文章を区切る方法で、このN文字を具体的に何文字にするのかを決める必要があります。
## bi-gram
一般的には2文字とするbi-gramが採用されます。ただしその場合、検索語が1文字のものは検索できないという欠点があります。この欠点を補う方法として、1文字づつで作成するuni-gram作成しておき、検索語が1文字のときはuni-gramを、2文字以上のときはbi-gramを使用するという方法があります。
形態素解析も併用している場合は、1文字の検索語は形態素解析にまかせてngramでヒットしなくてもよいとする方法がとれます。私の携わったシステムでは主にこの方法が採用されていました。
bi-gramを使用する際の注意点としては、検索する際に語順の一致も条件とするフレーズ検索にする必要がある点です。「バイク」という検索語の場合、「バイ」と「イク」で検索するので、フレーズ検索を使用しないと、バイクという単語がなくても「バイキング」と「イクラ」を含む文章でもヒットしてしまうためです。

## tri-gram
tri-gramを利用する場合の実現方法は、uni-gram、bi-gram、tri-gramを作成しておき、検索語に合わせて使用するインデックスを切り替えるという方法があります。
1文字ならuni-gram、2文字ならbi-gram、3文字以上ならtri-gramを使用します。この場合、語順の一致も条件とするフレーズ検索を利用する必要は、ほとんどのシステムではないと思います。検索語が「バイキング」の場合、「バイキ」「イキン」「キング」の3語が、「バイキング」を含まない文章でたまたまヒットすることはほとんどないためです。

## 検索性能
2000万件ぐらいのデータで実際に計測してみた結果は以下のとおりです。
参考までにuni-gramの計測結果ものせています。

**検索ワードが2文字（水道）**
|方法 |性能 |
|---|---|
|uni-gram + フレーズクエリ |10ms |
|bi-gram + フレーズクエリ |2ms| 
|tri-gram|2ms |

**検索ワードが4文字（水道工事）**
|方法 |性能 |
|---|---|
|uni-gram + フレーズクエリ |27ms |
|bi-gram + フレーズクエリ |12ms| 
|tri-gram|3ms |

**検索ワードが2文字で2つ（水道、工事）**
|方法 |性能 |
|---|---|
|uni-gram + フレーズクエリ |23ms |
|bi-gram + フレーズクエリ |8ms| 
|tri-gram|8ms |

2文字以下の検索では差は出ませんが、3文字以上（3文字での比較結果が残っておらず上記の結果は4文字ですが）の検索ではtri-gramの性能がよいようです。

## もう一つの選択肢？
OpenSearchのngramの設定では、複数のインデックスを同時に作成する設定が可能です。「min_gram: 1、max_gram: 3」とするだけで、uni-gram、bi-gram、tri-gramが全て作成されて検索時にはそれらを併用して検索する機能になります。これはよい方法のように思えるのですが、実際には3つのインデックスを同時に検索する挙動になるので性能的には良くありませんでした。「bi-gram+フレーズクエリ」と比較した場合の結果は以下のとおりです。

**検索ワードが3文字（バイク）**
|方法 |性能 |
|---|---|
|bi-gram + フレーズクエリ |8ms| 
|ngram(1〜3)複合|9ms |

**検索ワードが7文字（コールセンター）**
|方法 |性能 |
|---|---|
|bi-gram + フレーズクエリ |11ms| 
|ngram(1〜3)複合|19ms |

# どの方法がよいか？
性能的にtri-gramはよいのですが、以下のデメリットがあります。
- bi-gramだけに比べて、インデックスのサイズが大きくなる
- 検索語により使用するインデックスを切り替えるのは実装が煩雑になる
- OpenSearchのフィルターで、文字数が変わるような変換をしているときには対応ができない
    - 実際、tri-gramを採用しているシステムではこのフィルターの変換を行っているため、特定の検索語では不正確な結果となる課題がありました

以上のことから基本的にはbi-gramを採用するのが無難で、性能に特化させたいケースだけtri-gramの採用を検討するのがよいと考えています。はじめに紹介した「[Elasticsearchで日本語の全文検索の機能を実装する](https://www.elastic.co/jp/blog/how-to-implement-japanese-full-text-search-in-elasticsearch)」の記事では以下の記述がありますが、その通りだなと思いました。

>日本語では、一般的にはバイグラムが使われます。ただし、バイグラムの場合、細かく分割されすぎることがあり、パフォーマンスとして良くない場合もあります。パフォーマンス重視の場合、特定のフィールドに対し、tri-gram（トリグラム）を利用するといった使い分けも考えられます。

# おわりに
明日は、眞島さん(@shin_majima)の記事です！
ご覧いただきありがとうございまいた！
『プログラミング学習が楽しくなる！VSCodeの拡張機能紹介！！』


## はじめに
初めましての方も、そうでない方も、こんにちは！
RUNTEQで学習中の みゆきち と申します。
完全未経験、まだまだひよっこの私ですが、[RUNTEQ Advent Calendar 2024](https://qiita.com/advent-calendar/2024/runteq)の17日目を担当させていただきます。


今年のテーマは『プログラミングでの"ワクワク"』ということで、私が楽しくPCと戯れるために導入している拡張機能について紹介しようと思います！


### 本記事の対象者
- プログラミング初学者の方
- 開発環境をカッコよく、可愛くしたい方
- モチベーションを上げたい方

***

### ◼︎カッコいい系
## ◼︎[Matrix Theme](https://marketplace.visualstudio.com/items?itemName=UstymUkhman.matrix-theme)
[![Image from Gyazo](https://i.gyazo.com/798451fd375da940f3e56ae38611a6b5.png)](https://gyazo.com/798451fd375da940f3e56ae38611a6b5)
黒の背景に緑の文字！めっちゃマトリックスじゃないですか！？
見やすさはさておき、なんかすごいことやってる感出せますね！

## ◼︎[Hacker Sounds](https://marketplace.visualstudio.com/items?itemName=mattogodoy.hacker-sounds)
タイポ音がいい感じの電子音になります！（無駄に作業してる感がでる。褒めてる。）

**「おいおい無茶言うなって…しゃあねぇ、3分で片付けてやるよ!」** という気分の時には上記でハッカー気分を楽しんでみてください笑

***
### ⚫︎可愛い系
## ⚫︎[Pink Panda Dark](https://marketplace.visualstudio.com/items?itemName=TheHelpfulTipper.pinkpanda-dark-theme)
[![Image from Gyazo](https://i.gyazo.com/a9e493087e8809cbcb2b480a750f02ae.png)](https://gyazo.com/a9e493087e8809cbcb2b480a750f02ae)
ダークテーマでありながら、ピンクが入っていてめっちゃ可愛い！
黒とピンクの組み合わせ大好き！


## ⚫︎[Celestial Magic Girl Icon Theme](https://marketplace.visualstudio.com/items?itemName=klyap.vscode-celestial-magic-girl-icon-theme)
[![Image from Gyazo](https://i.gyazo.com/838a41b086bfcd18dfdfe4a0d704a3bb.png)](https://gyazo.com/838a41b086bfcd18dfdfe4a0d704a3bb)
アイコンがリボンやハートになります。
魔法少女っぽさがあってゆめかわいい！


私は、可愛い系２種に加えて、[indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)や[Rainbow End](https://marketplace.visualstudio.com/items?itemName=jduponchelle.rainbow-end)を入れて、コーディングミスを防ぐようにしています！！


## 最後に
冒頭にも書きましたが、私は完全未経験でプログラミングの学習をしています。
実際、始めてみたら分からないことだらけ。（初学者だから当たり前なんですが…）
良くないと分かってはいるけれど、周りと比べてしまい焦りや不安も溢れます。

そんな時のモチベUP法の一つとして、拡張機能を使ってみるのもアリなんじゃないかなと思います！
（安全性や動作性に影響を与えてしまうものもあるので注意ですが。）

最後まで読んでいただきありがとうございました！！
Javaで学ぶアルゴリズム -シェルソート

# シェルソート

挿入ソートの良さ（ソート済みに近い状態では高速）を活かし、また欠点（挿入先が離れている場合は移動回数が増える）を補うようなソートアルゴリズム。クイックソートが出てくるまでは最速だった。

> シェルソート（改良挿入ソート、英語: Shellsort, Shell sort, Shell's method）は、1959年にドナルド・シェルが開発したソートのアルゴリズム。挿入ソートの一般化であり、配列の中である程度間隔が離れた要素の組ごとに挿入ソートを行い、間隔を小さくしながら同様のソートを繰り返すことで高速化するアルゴリズムである。ただし、挿入ソートと異なり、安定ソートではなくなる。

https://ja.wikipedia.org/wiki/%E3%82%B7%E3%82%A7%E3%83%AB%E3%82%BD%E3%83%BC%E3%83%88

# 実行環境

- JUnit 5
- Java 8

# テストコード

```java:
import static org.hamcrest.CoreMatchers.is;
import static org.hamcrest.MatcherAssert.assertThat;

import org.junit.jupiter.api.DisplayName;
import org.junit.jupiter.api.Test;

public class ShellSortTest {

	@DisplayName("配列を渡すとソートされた配列が返ること")
	@Test
	void testStraightExchange() {
		int[] array = { 5, 12, 7, 0, 1, 14, 6, 9, 8, 3, 2, 11, 4, 13, 10 };
		int[] expected = { 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14 };

		int[] actual = ShellSort.shellSort(array);
		assertThat(actual, is(expected));
	}

	@DisplayName("要素が1つしかない配列を渡すと要素が1つしかない配列が返ること")
	@Test
	void testStraightExchangeOneElement() {
		int[] array = { 5 };
		int[] expected = { 5 };

		int[] actual = ShellSort.shellSort(array);
		assertThat(actual, is(expected));
	}

	@DisplayName("空の配列を渡すと空の配列が返ること")
	@Test
	void testStraightExchangeEmpty() {
		int[] array = {};
		int[] expected = {};

		int[] actual = ShellSort.shellSort(array);
		assertThat(actual, is(expected));
	}

	@DisplayName("すでに昇順でソートされた配列を渡すとソートされた配列が返ること")
	@Test
	void testStraightExchangeAlreadySorted() {
		int[] array = { 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14 };
		int[] expected = { 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14 };

		int[] actual = ShellSort.shellSort(array);
		assertThat(actual, is(expected));
	}

	@DisplayName("要素が重複した配列を渡すとソートされた配列が返ること")
	@Test
	void testStraightExchangeDuplicateElement() {
		int[] array = { 5, 3, 5, 2, 1, 5, 3, 2, 5, 3, 5 };
		int[] expected = { 1, 2, 2, 3, 3, 3, 5, 5, 5, 5, 5 };

		int[] actual = ShellSort.shellSort(array);
		assertThat(actual, is(expected));
	}
}
```

# シェルソートアルゴリズム

```java:
public class ShellSort {

	/**
	 * シェルソート（挿入ソートの改良版）
	 * 挿入ソートのメリットを活かし、デメリットを補うアルゴリズム
	 * @param array
	 * @return sortedArray
	 */
	public static int[] shellSort(int[] array) {
		int[] sortedArray = array.clone();
		// h-ソートの間隔を決定
		// 間隔の決定方法はいくつかあり、最適は場合による
		// 以下は Knuth さんが提案した方法
		int h = 1;
		while (h < sortedArray.length / 3) {
			h = h * 3 + 1;
		}

		// 間隔を縮小していきながらソート
		while (h >= 1) {
			for (int i = h; i < sortedArray.length; i++) {
				int temp = sortedArray[i];
				int j;
				for (j = i; j >= h && sortedArray[j - h] > temp; j -= h) {
					sortedArray[j] = sortedArray[j - h];
				}
				sortedArray[j] = temp;
			}
			h = h / 3; // 間隔を縮小
		}
		return sortedArray;
	}
}
```
SESに約10年在籍したエンジニアが自社開発企業に転職して感じた、SESと自社開発企業の違い5選

## はじめに
こんにちは。2024年10月に自社開発企業に転職しました、sayaと申します。
タイトルの通り、転職前はSESに約10年在籍しておりました。
転職をして二か月経ち、前職との環境や仕事の進め方が違って面白いな～と感じることが多々ありますので、その中でも特にこれは！というものを挙げてみたいと思います。

:::note info
個人の感想記事です。
SESと自社開発企業のどちらが良いか、という記事ではありません。どちらにも良さがあると考えています。
:::

## 1. 帰属意識
SESあるあるだと思うのですが、前職では会社への帰属意識が低かったです。
自社からお客様先に直接常駐する場合だとそうでもないのですが、いわゆる二次請け、三次請けだと自分がどこ所属の人間なのか時折分からなくなりがちです。
例えば、A企業を経由しB企業のエンジニアとしてC企業に常駐している時、C企業のプロパーさんにはB企業として、B企業のプロパーさんにはA企業として、A企業のプロパーさんには自社として対応しますが、「あれ？自分はどこ所属として話せばいいんだっけ？この人は○企業だから…」と一瞬悩む時がありました。

## 2. 技術の深掘りか？引き出しの数か？
自社開発企業では、開発システムに使用している技術を使い倒す方向にあり、その技術に特化して詳しくなれるかと思います。
一方SESは、案件ごとに使用する技術、言語が異なるのでその分引き出しが増える傾向にあります。
また、案件が変わるたびにキャッチアップするので、未経験の技術や言語に対するハードルが下がる(フッ軽になる)側面もあると思います。
SES在籍時、AWSを使うシステムで、エンジニアがフルスタック対応する案件に参画した際は、業務で必要だったこともあり体系的に勉強し、併せて資格取得もしました。
自社開発企業でインフラ、開発でチームがはっきり分かれている場合だと、開発チームがインフラ周りを直接設定することは少ないと思われるので、もし最初からそのような企業だったら、AWSやクラウド、インフラに触れるのは座学や個人学習だけで、業務で実践する機会は少なかったかもしれません。
※上記のように分かれていなかったり、チームを兼任できたり異動できる企業もあるかと思います。

## 3. 学習に対する意識の方向
SESでは面談や単価交渉の機会が比較的多く、契約更新できないかもという恐怖(自分だけかも？)があったので、スキルシートに書けたり面談で話せる内容を意識した学習をしていました。
もちろん自社開発でも半期や四半期ごとに目標を定量的に立てますが、SES在籍時はより市場価値を上げるための学習の比率が大きかったように思います。
個人的には、後ろ向きではなく前向きに学習できるようになりました(…)

## 4. 上司や会社からの評価
これは自分の場合だけかと思うのですが、SES時代は基本的に1人だけで案件に参画していたので、自分の仕事ぶりを近くで見て知っている自社の人間がいませんでした。
担当営業さん経由で客先の上長から評価を聞けましたが、そもそもその上長とあまり業務で関わっていないパターンもあり、「それって本当なのかな？」や「何を根拠に？」という内容の評価も実際のところありました。
客先の上長やメンバーと対面で評価してくれる案件もありましたが、本当にそれは案件によります。客先によってはプロパーと非プロパーを明確に区別していることも。
自社開発企業だと、一緒に仕事してる人に評価してもらえる環境かと思います。

## 5.非IT業界の人への説明
これも自分の場合だけかと思うのですが、SESという業態を家族や友人に説明するのが難しかったです。
技術派遣というと、ニュース等を見て「あんた派遣切りになってない？大丈夫？」と言われたりします。
派遣≠正社員と思っているようです。SES企業の正社員なのでそういうことはないのですが(案件切られたり等近しいことはある…)
あんた今どこで働いてるの？と聞かれたとき、「今は○○って会社で仕事しているよ」と説明しつつ、「プロパーじゃないんだけどね…」とも思っていました。
SES所属エンジニアの方で、IT業界に明るくない家族や友人に自分の仕事をうまく説明できたぞという方がいらっしゃいましたら、ぜひコメントにて教えてください。
ただ自社開発企業であっても、製品がtoBだと「○○っていう、××をするシステムを作っているよ」と説明しても馴染みが無いので「へ～…？」というリアクションというになるかと思います。

## おわりに
同じIT業界なのに違いがたくさんあり、日々興味深く感じながら仕事をしています。
SIerは未経験なので、SIer経験者のあるあるも聞いてみたいです。
新入社員から見たスタジオ・アルカナを過去の自分やこれからの新卒に向けて補足してみる

スタジオ・アルカナに新卒で入社し、エンジニアとして働かせていただいているKです。
以前記事（ https://www.wantedly.com/companies/company_1297386/post_articles/924835 ）にしていただいた研修後、プロジェクトにアサインされ、日々優しい先輩方に助けていただきながら業務を行っています。
さて早いもので入社から8ヶ月、研修から4ヶ月が経過しました。
スタジオ・アルカナって実際どんな感じなの？研修は面倒見てもらえるかもしれないけどその後は？といった疑問・不安に、過去の自分やこれから新卒での入社を考えている方々へ向けて書いていこうと思います。

## 研修後について
メンターさんと一緒のプロジェクトにアサインされました。研修後いきなり野に放たれるものだと思っていたので、そうではなかったので安心しました。
研修中は朝会・夕会の二回のハドルがあったのですが、研修後は絶対ではなくなりました。しかし現在でもわからないところや進捗報告のためにハドルは1日に数回繋いでいただいているので、そこまで変化はありません。
プロジェクト自体は研修の内容を思い出しつつ、都度都度調べつつ取り組んでいます。わからないことだらけですが謎解きみたいで面白いです。大きなインシデントを生み出さないためにコードと動作を複数人で確認してもらえるので、実務に対して必要以上に臆することはないかなと思います。
自分が携わっているものが実際に世の中で使われているのって結構すごいことなのでは？としみじみ噛み締めながら唸っています。

## アルカナメンバーについて
みんな優しいです。今まで両手ほどの種類のバイトを経験してきましたが、グループ会社を含め、こんなにいい人たちがたくさんいらっしゃる環境はなかったです。私自身スタジオ・アルカナを就職先にさせていただいた一番の決め手は働いている方々の人柄だったので、そこは入社後も印象が変わらないままで良かったです。
心理的安全性を重視していて、フットワーク軽く相談できます。不和は相手の意見の本意を知らないまま進行していってしまうことが原因だと考えているので、モヤっとしたら言葉にできる環境はとても魅力的だと感じます。
ただこれは自分への戒めでもあるのですが、みんな優しい分、自分で自分に厳しくならなければ怠けていってしまうなと思います。頑張れ。頑張ります.....。
構成としては30代の既婚・子持ちの方が多い感覚です。ご家族の都合に合わせてフレックスやリモートを上手く利用されています。また、一度転職しても戻って来られる方もいるそうなので、将来設計をされている方や長く働きたい方にとって居心地のいい場所なのではないかと思います。
もちろん20代の方もいらっしゃいます。歳が近い方の活躍を見ると、自分とそう変わらないのにすごいな〜という気持ちになりつつ、自分もああなりたいなと目標にできるのでモチベーションが高まります。

## ハラスメントについて
むしろ上の立場の方々が怯えてます笑
近年では「若害」という言葉もあるそうで、なんにせよ相手が不快な思いをしたら害になるということを忘れずに仕事をしていきたいです。

## 業務外交流について
最近ネット上で「飲み会は断れ」、「仕事外のコミュニケーションはいらない」などの意見をよく見ます。
弊社ではイベント事は自由参加型なのでそういう振る舞いをしたければ全然できますし、他にやりたいことがあったり本当にそういった場が苦手だったりするなら参加しなくったって構わないと思います。でもアルカナ、ひいてはナシエルのイベントは結構楽しいよ、という話を少ししたいと思います。
よくあるのはチーム飲み会におかしパーティ、カラオケ。先日はグループ会社の方々とのサウナ会も開催されました。サウナ会は数十人規模だったのでサウナで整った後、レンタルスペースを借りての飲み会がありました。サウナを楽しめた以上に、全く接点のない事業部の方々と交流でき、とても刺激的なイベントでした。
現代の若者が飲み会を忌避するのは上の立場の人間を立てたり、気を遣ったりしなくてはいけない場だからかと思います。けれど弊社はそんなこと全くなくて、社長がトングを持って焼肉を焼くような会社です。そのため他社での勤務経験はありませんが、イベントに対する感覚が世の中のスタンダードとは異なるのではないのかなと思います。

## おわりに
新卒の視点からスタジオ・アルカナについて説明してみました。
会社選び良かったなーと思いながら日々平和に過ごしています。会社や上司への文句を話す友達の会話に入れないのが今の所の不満かな。
この記事が少しでも就活の参考になれば幸いです！
swift-dependencies で Key に引数を渡す

Pointfree の提供している [swift-dependencies](https://github.com/pointfreeco/swift-dependencies)ですが、非常に利用方法も簡単で、テスト時の利用など使い勝手の良いものになっています。

しかし、 riverpod の Provider にできるように、引数を渡してその引数に応じた値を取得できるようにしたい場合はないでしょうか？

例: 
```dart
ref.watch(activityProvider('recreational'))
```
https://riverpod.dev/ja/docs/essentials/passing_args

このようなあると便利な機能を swift-dependencies でどう実現するのか、その方法を考えて利用してみたので、その方法を共有します。

# （自分の）結論

こちらの discussion で提案されているようなやり方で指定できるようにしました。

https://github.com/pointfreeco/swift-dependencies/discussions/286

```swift
@Dependency(\.hoge[.paramA]) var hoge
```

## 実現の仕方

具体的には、 `DependencyValueContainer` という class を作ってあげて、これを `@Dependency` で指定して取得する値の型にします。

```swift
final class DependencyValueContainer<Value, Argument> where Argument: Hashable {
    fileprivate var values: [Argument: Value] = [:]
    var create: (Argument) -> Value

    public init(create: @escaping (Argument) -> Value) {
        self.create = create
    }

    public subscript(argument: Argument) -> Value {
        if let value = values[argument] {
            return value
        }

        let newValue = create(argument)
        values[argument] = newValue
        return newValue
    }
}

```

swift-dependencies は `DependencyValues` に登録した値が持っているプロパティなどにアクセスし、その値を取り出してあげることもできるので、その仕組みを利用するイメージです。

依存関係の登録例:

```swift
private enum HogeContainerKey: DependencyKey {
    static var liveValue: DependencyValueContainer<Hoge, ParamA> {
        DependencyValueContainer { argument in
            return Hoge(argument: argument)
        }
    }
}

extension DependencyValues {
    public var hoge: DependencyValueContainer<Hoge, ParamA> {
        get { self[HogeContainerKey.self] }
        set { self[HogeContainerKey.self] = newValue }
    }
}
```

こうすると、冒頭にあったように以下のように値を取り出すことができるようになります。

```swift
@Dependency(\.hoge[.paramA]) var hoge
```


# 他の候補

## クロージャ

欲しい値を引数を与えると作ってくれるクロージャを `DependencyValues` に登録する手法です

イメージ:
```swift
private enum HogeContainerKey: DependencyKey {
    typealias HogeCreate = (ParamA) -> Hoge
    static var liveValue: HogeCreate = { paramA in
        Hoge(paramA)
    }
}
```

使い方次第ですが、使う箇所ごとに毎回別のインスタンスが生成されてしまうことから、この手法はやめました。

## `initialize` のような関数を用意する

初期化用関数を生やす方法ですが、あまり綺麗ではないのと、呼び忘れてランタイムにクラッシュすることに気づきにくいため、やめました。

```swift:Hoge.swift
lazy var paramA: ParamA

func initialize(paramA: ParamA) {
    self.paramA = paramA
}
```

## 対象のクラスの関数すべてに共通のパラメータを渡せるようにする

名前の通りです。
可能ならこの方法でやるのが一番なのですが、今回元となった対応箇所では20個ほど共通の関数があるのと、 `var` で定義されていた computed property 等も中でそのパラメータを利用していたため、対応自体の大変さから見送りました。

# 終わりに

今回は swift-dependencies の key に引数を渡す（風）の方法を紹介してみました。
DI の方法を何かしらから変えていくような場合には欲しくなる場面もあるかもしれないので、もしそんな場面に遭遇したら試してみてもらえるとありがたいです。
Azure DNSでホストされたカスタムドメインのサブドメインを委任する方法について

# 0. はじめに
Azure 上にデプロイした PaaS サービス (Azure App Service, Azure Functions, Azure API Management など) では、サービス毎に既定のドメイン (Azurewebsites.net など) が割り当てられています。
しかしながら、商用としてサービスを公開したい場合など、独自のドメイン (カスタム ドメイン) を利用したいと考えられることが多いのではないかと思います。
前回は、[Azure DNSでカスタムドメインをホストする方法について](https://qiita.com/nobtak/items/00e4ee88cfc166a441e8) に関する記事を作成しましたが、今回は、Azure DNSでホストされたカスタムドメインのサブドメインを委任する方法についてまとめてみようと思います。

## 目次
[0. はじめに](#0-はじめに)
[1. Azure DNSでホストされたカスタムドメインのサブドメインを委任する方法について](#1-azure-dnsでホストされたカスタムドメインのサブドメインを委任する方法について)
[2. 最後に](#2-最後に)

# 1. Azure DNSでホストされたカスタムドメインのサブドメインを委任する方法について
:::note info
**前提**
- Azure DNS にサブドメインの親ドメインが既にホストされていること。
※ Azure DNS にカスタムドメインをホストする方法については、 [Azure DNSでカスタムドメインをホストする方法について](https://qiita.com/nobtak/items/00e4ee88cfc166a441e8) を参照
:::

**1) Azure ポータル -「DNS ゾーン」にアクセスし、「+ 作成」を選択します。**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3540203/0177e298-aa65-2931-32b8-0aa5ed58cdff.png)
　
**2)「このゾーンは、既に Azure DNS でホストされている既存のゾーンの子です」にチェックを入れ、親ドメインのサブスクリプション、親ドメインを選択後、「名前」欄にサブドメイン名を入力し、「次: DNS Zone Editor」を選択します。**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3540203/edf672a7-070d-bbbe-19f0-e8037c91a181.png)
　
**3) 必要に応じて事前に登録したい DNS レコードなどを登録後、「確認および作成」を選択します。**
※ DNS レコードなどは後から作成可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3540203/93eabf6a-c4cf-f714-f061-9bf4b2497002.png)
　
**4) 入力した内容が正しいことを確認後、「作成」を選択します。**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3540203/42bf398f-aef1-2885-1330-8f02f1dddf0b.png)
**※ Azure DNS にホストされた親ドメインのサブドメインがデプロイされます。**

:::note info
**補足**
- サブドメインのデプロイが完了後、親ドメインのDNSレコードにサブドメイン用の「NS」レコードが作成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3540203/9bf307b7-a2a9-209d-c658-19c2cdec179b.png)
:::
　
**5) インターネットにアクセス可能なマシンから「nslookup -type=SOA <サブドメイン>.<ドメイン名>」コマンドを実行し、Azure DNS ゾーンのネームサーバーから応答が返ってくることを確認します。**

```
C:\WINDOWS\system32>nslookup -type=SOA sub1.*********.com
サーバー:  *******.*******
Address:  ****:***:****:****:***:****:****:****

権限のない回答:
sub1.*********.com
        primary name server = ns1-09.azure-dns.com
        responsible mail addr = azuredns-hostmaster.microsoft.com
        serial  = 1
        refresh = 3600 (1 hour)
        retry   = 300 (5 mins)
        expire  = 2419200 (28 days)
        default TTL = 300 (5 mins)
```

# 2. 最後に
今回は、Azure DNSでホストされたカスタムドメインのサブドメインを委任する方法についてまとめてみました。
ドメイン公式登録サービスから独自ドメインを購入した場合においても、Azure DNS にホストすることで、簡易にサブドメインの払い出しが可能となります。
そのため、Azure DNS 以外の外部DNSで独自ドメインを運用していない場合、および、新規で独自ドメインを払い出し、Azure 基盤上のみで利用したい場合においては、Azure DNS にカスタムドメインをホストし、運用していくのも良いのではないかと思います。


:::note info
**本ブログに記載した内容は個人の見解であり、所属する会社、組織とは全く関係ありません。**
:::
新卒1年目の振り返り/新卒エンジニア採用支援サービスのBtoB Marketing

## 1.はじめに
株式会社ハウテレビジョン Product&Marketing Division BtoB Marketingに所属する山本純也です。2024年4月に新卒入社して以来取り組んでいる「外資就活ドットコム/新卒エンジニア採用サービス」の利用企業開拓について振り返ってみたいと思います。

こちらは、HowTelevision Advent Calendar2024 17日目の記事になります。

## 2.取り組み概要
本題に入る前に少し余談ですが、今振り返るとこのPJTに参加したきっかけはハウテレビジョンに新卒として入る面白さを象徴しているなと思います。

入社前の2024年2月に卒業も決まり内定者インターンとして働いていると突然、
「エンジニアサービス立ち上げのPJTスタートするから山純も入れておいたよ」と声を掛けられる。
企業開拓をメインミッションとするメンバーはPJTに1人、ここから始まりました。

新卒（入社前）に新しいサービスの立ち上げのボールを渡すことは普通の会社ではなかなか見られないかと思いますが、一方ではチャンスでありこの会社の面白さだと思います。

具体的なミッションとしては、外資就活ドットコムが新規にソフトウェアエンジニア（＝SWE）志望学生と新卒SWEを採用したい企業向けのサービスを立ち上げることになり、その利用企業側の商談獲得を担うことになりました。

▼初めて原稿から携わったプレスリリース（OGPをもう少し頑張ればよかったと反省）
https://prtimes.jp/main/html/rd/p/000000089.000026700.html

他社の長期インターンでも企業開拓の経験はありましたが、いわゆる新卒エージェントのアウトバウンドセールスのみ。
コール以外の開拓の経験もほとんどない中で初めてのBoBMarketingかつ、馴染みのないSWEという領域で新サービスとchallengingなミッションが入社前からスタートしました。

## 3.どんなサービスなの？
企業開拓にあたってはまず自社のサービスがどんなものなのか？どんな価値を提供するものなのか？の理解が不可欠です。

サービスの概要としては、
・求人掲載、イベント、スカウトを通じて学生にアプローチできる
・採用成功に対してお金を企業から頂くビジネスモデル
という一般的なビジネスモデルやメイン機能となっております。

その中でも他サービスと比較しても特徴的な部分は、
・長期インターンなど学外での開発経験を持つ学生が多い
・旧帝大/早慶などの難関大生の利用割合が高い
・ビジネス職掲載をメインとするメディアで技術に加えビジネスへの関心の高い学生が多い
などが初期に導入いただいた企業様の声から見えてきました。

手前味噌にはなりますが、既存の外資就活ドットコムによるアセットやユーザーマーケティングの成功もあってかなりハイレベルなSWE志望学生に活用いただいており、それが独自の価値に繋がっている状態です。

USP（Unique Sales Point）は明確でアピールはしやすい一方で、そもそも新卒SWE採用をしている企業は世間的に見れば少なく企業開拓は苦戦することになります...。

▼サービス概要はこちら
https://go.gaishishukatsu.com/swe-eng/all/

## 4.企業開拓のあれこれ
幸いにも外資就活ドットコムを既に利用いただいていたベンチャー企業を中心に初期顧客は獲得できた一方で、自身の勉強不足も相まって企業開拓における「これだ！」という勝ちパターンがまだ見つかってない状況です。

ターゲットが狭く、特定の個社を獲得できるとインパクトが大きい状況ではABM（Account Based Marketing）が必要だと思いながらも、様々な企業に使っていただく、ABMを実施するにあたって深さが必要などを鑑みると何がいいのか手探り状態ながら進んでいます。

その中でもこれはやってよかったなというものでいうと、オフラインでのアプローチでしょうか。
弊社の学生向けイベントでもオフライン回帰の現象が見られたように、BtoBにおいても展示会や訪問での商談/打ち合わせなどオフラインの価値が改めて見直されているかと思います。

人事や採用担当者間の小規模な交流会から、CTO/VPoEなどが集まる大規模カンファレンスなど複数スポンサーという形で参加させていただきましたが、Webマーケティングやオンラインでは会いにくい人にかなり会えた実感、多くの一次情報を得られた、直接/間接にせよ企業開拓にもつながったと振り返っています。

途中にも記載したようにまだまだ答えは見つかっていませんし、全社として掲げる高い成長目標、個人が任せられた期待役割に結果を返しきれていない現状ではあります。

TRY&ERRORを繰り返しながら立ち上がったばかりのSWE領域のこのサービスをより良いものにしていく、広く知って活用してもらえるようになることを目指していきたいと思います。

## 5.最後に
ハウテレビジョンではエンジニア採用支援事業の立ち上げを共に牽引していただける仲間を募集しております。
外資就活ドットコムという強力な既存のアセットを活用しながら、高いOwnershipとChallengeを持って成長を実現する味わい深い仕事をご一緒にいかがでしょうか？

https://herp.careers/v1/howtv/_2kZbXrEfIbo
web.xmlのjsp設定をspringに移行する。

## web.xmlとは？
web.xmlは、JavaのWebアプリケーションにおけるデプロイメント記述子。

## デプロイメント？
アプリケーションやシステムを実際に利用できる環境に配置・展開すること。

## 中に何を書くの？
主に
filter
servlet
error-page
jsp-config
session-config
などを設定する。

## その前に、springでweb.xmlが使えるの？
springプロジェクトでは、web.xmlがあっても良いけど、最近のSpringアプリケーションでは、Java ConfigやSpring Bootの導入によりweb.xmlは不要。web.xmlを使わない設定方法が主流になっている。

主流に合わせたいので、
従来のweb.xmlの設定が必要な場合に、どうやってその内容をSpringに設定するか？を調べた。
私の環境はspring boot 2.7.18で、jspを使っている。


## 方法１：application.properties
例えば、
jspのサイズが大きすぎて、tomcatからjsp 65535 bytes limitsエラーが出た。

```
The code of method _jspService(HttpServletRequest, HttpServletResponse) is exceeding the 65535 bytes limit Stacktrace:
```
これの解決策としては、web.xmlに以下の設定を<servlet>のinit-paramとして記載すること。
1. genStringAsCharArray = true
2. mappedFile = false
3. trimSpaces = true
```
<servlet>
　    <servlet-name>jsp</servlet-name>
　    <servlet-class>org.apache.jasper.servlet.JspServlet</servlet-class>
　    <init-param>
　      <param-name>ここにgenStringAsCharArrayとかの設定名</param-name>
　      <param-value>ここに設定値</param-value>
　    </init-param>
```

しかし、私のプロジェクトにはweb.xmlがない。
なのでspringのapplication.propertiesで、同じ設定を１ラインで書くことが出来る。

```
server.servlet.jsp.init-parameters.ここにgenStringAsCharArrayとかの設定名 = ここに設定値
```
これで解決。

## 方法２：ConfigurableServletWebServerFactory
例えば、
全てのjspに自動で含まれる部品のjspを設定したい時。
これは従来のweb.xmlではこんな感じで設定できる。
```
    <jsp-config>
        <jsp-property-group>
            <url-pattern>*.jsp</url-pattern>
            ...
            <include-prelude>/WEB-INF/jsp/部品のjsp.jsp</include-prelude>
            ...
        </jsp-property-group>
    </jsp-config>
```
しかし、私のプロジェクトにはweb.xmlがない。
なのでspringでBeanを一個作って対応する。


@SpringBootApplicationタグが付いているクラスが対象。
```
...

@Bean
    public ConfigurableServletWebServerFactory configurableServletWebServerFactory ( ) { 
        return new TomcatServletWebServerFactory() { 
            @Override 
            protected void postProcessContext(Context context) { 
                super.postProcessContext(context); 
                JspPropertyGroup jspPropertyGroup = new JspPropertyGroup(); 
                jspPropertyGroup.addUrlPattern("*.jsp");
                ...
                jspPropertyGroup.addIncludePrelude("/WEB-INF/jsp/base.jspf");
                ...
                JspPropertyGroupDescriptorImpl jspPropertyGroupDescriptor = new JspPropertyGroupDescriptorImpl(jspPropertyGroup); 
                context.setJspConfigDescriptor(new JspConfigDescriptorImpl(Collections.singletonList(jspPropertyGroupDescriptor), Collections.emptyList())); 
            } 
        }; 
    }
...
```

#### （　・。。・　）🖐

間違っている内容がありましたら、教えて頂ければ喜びます。
すぐできる！Node.jsを最新版や特定のバージョンにアップデートする方法

MacでNode.js使っていてエラーが出たので最新版にアップデートしたときの手順をまとめておこうと思います。

Node.js入れたのは結構前でHomebrew使ってた気がしたのでそのあたりからチェックしてみます。

## 自分がどの方法でNode.jsをインストールしたか確認
Node.jsは大きく分けて、Homebrewで直接Node.jsをインストールしている場合と、nodebrewなどのバージョン管理ツールを使っている場合があり、まずはそこからチェックします。

ターミナルを起動して以下のコマンドを実行。
```
which node
```

- `/usr/local/bin/node`のようなパスが表示された場合、Homebrewで直接インストールしている可能性が高いです
- `~/.nodebrew/current/bin/node`のようなパスが表示された場合、nodebrewを使っています

## nodebrewを使っている場合
nodebrewを使っている場合は、以下の手順でアップデートを行います。

### 1.nodebrewのアップデート
まずはnodebrew自体を最新の状態に更新します。以下のコマンドを実行します。
```
brew upgrade nodebrew
```

### 2.インストール可能なNode.jsのバージョンを確認
以下のコマンドでインストール可能なNode.jsのバージョンを確認します。

```
nodebrew ls-remote
```

### 3.Node.jsを最新版にアップデート: 
最新の安定版をインストールする場合は、以下のコマンドを実行します。

```
nodebrew install-binary latest
```

特定のバージョンをインストールしたい場合は、バージョン番号を指定します。

例: `nodebrew install-binary v16.15.1`

### 4.使用するNode.jsのバージョンを指定
以下のコマンドで、使用するNode.jsのバージョンを指定します。

```
nodebrew use latest
```

最新版ではなく特定のバージョンを指定する場合は`nodebrew use v16.15.1`のようにします。

### 5.Node.jsのバージョン確認
以下のコマンドでバージョンを確認します。

```
node -v
```

最新バージョンが表示されていれば成功。

切り替わらない場合はターミナルの再起動などを試してみてください。


## Homebrewで直接Node.jsをインストールしている場合
Homebrewの場合は以下の手順でアップデートを行います。

### 1.Homebrewのアップデート
まずはHomebrew自体を最新の状態に更新。ターミナルで以下のコマンドを実行します。

```
brew update
```

### 2.Node.jsのアップデート
次にNode.jsをアップデートします。以下のコマンドを実行。

```
brew upgrade node
```

### 3.Node.jsのバージョン確認
アップデートが完了したら、以下のコマンドでバージョンを確認します。

```
node -v
```

最新バージョンが表示されていれば成功。

切り替わらない場合はターミナルの再起動などを試してみてください。


## アップデートしたバージョンを元に戻したり、特定のバージョンに変更するには？
最新バージョンにしたけど、やっぱり元に戻したい！とか特定のバージョンでテストしたい！という場合は自由にバージョンを変更できます。

nodebrewを使っている場合は、簡単にバージョンを変更することができます。

nodebrewのインストールは[こちら](https://qiita.com/kiharito/items/4785d4d54c967b8ddc9a)の記事が参考になると思います。

### 1.インストール済みのNode.jsバージョンを確認
以下のコマンドで、nodebrewでインストール済みのNode.jsバージョンを確認します。

```
nodebrew ls
```

過去にインストールしたバージョンが一覧で表示されます。

使いたいバージョンがこの中にない場合はアップデートしたときの方法を使って特定のバージョンに変更できます。

### 2.過去のバージョンを使用
戻したいバージョンを指定して以下のコマンドを実行します。例えば、v16.15.0に戻したい場合は以下のようになります。

```
nodebrew use v16.15.0
```

### 3.Node.jsのバージョン確認
以下のコマンドでバージョンを確認します。

```
node -v
```

これで指定したバージョンに戻っていることを確認できます。
転職活動で気づいた！第一印象と準備の重要性：私の面接対策

## はじめに
今回は下記アドベントカレンダーに参加したので「転職」に関する記事を書きたいと思います

https://qiita.com/advent-calendar/2024/engineering-careers-2

## 転職活動を始めた中での気づき
私は現在、エンジニアへのキャリアチェンジを目指して転職活動を行っています。
活動を進める中で特に感じたのが「第一印象」の大切さと「準備」の重要性です。
これらは技術面だけでなく、面接全体の印象を左右する大きなポイントだと気づきました。

## 第一印象対策：笑顔と表情のトレーニング
面接では「第一印象が大切」という話をよく耳にします。
実際に私も、笑顔の人には良い印象を持ちやすいと感じていましたが、自分の笑顔に違和感があり、改善が必要だと思いました。:sweat:
そこで始めたのが、割りばしを使った笑顔トレーニングです。
**口角を割りばしの上に持ち上げるイメージで10秒×10回、夜の歯磨き後**に実施しています。
始めた頃は自分の笑顔に違和感がありましたが、現在では抵抗感が少なくなりました。
下記記事のほかにもYouTube動画等、参考になるものが沢山あります。ぜひご自身の取組みやすいものを参考にしてみてください。

https://kichijouji-kyousei.jp/gummy-smile-improvement/#:~:text=%E3%81%BE%E3%81%9A%E3%80%81%E5%89%B2%E3%82%8A%E7%AE%B8%E3%82%92%E6%A8%AA%E3%81%AB%E3%81%97,%E3%81%8B%E7%B9%B0%E3%82%8A%E8%BF%94%E3%81%97%E3%81%A6%E3%81%84%E3%81%8D%E3%81%BE%E3%81%97%E3%82%87%E3%81%86%E3%80%82


## 声のトレーニングと工夫
また、自分の声が聞き取りにくいと感じており（電話で名前を伝えると必ず聞き返されてしまう💦）、改善したいと思っていました。
そんな時、偶然テレビ番組で紹介されていた方法を知り、これならできそうだと感じて実践を始めました。
実践前後で比較していないので何とも言えませんが、こちらのトレーニングをしてみるとちゃんとのど？あたりを使っていることを実感できます。
この「実感できている」という事がいいのかな。

https://www.nhk.jp/p/torisetsu-show/ts/J6MX7VP885/blog/bl/pnR8azdZNB/bp/pANO16dax7/


## 面接準備：エクセルを活用した質問対策
面接の基本的な質問に対してスムーズに答えられるよう、回答例をエクセルにまとめています。移動時間やスキマ時間を活用し、それを見ながら声に出して練習することで、頭の中を整理し、回答を磨いています。
いきなり見ないですらすらいうのは難しいのでほぼ見ながら練習しています。

## さいごにまとめ
転職活動を通じて、第一印象の改善や準備の重要性に気づきました。
笑顔や声のトレーニングを実践することで少しずつ自信がつき、準備の大切さを実感しています。
これからも努力を続け、目指すキャリアを実現するために精一杯取り組んでいきたいと思います！！
WSL2+Docker でディスク容量が圧迫される問題を解決する

## 環境
- Windows11
- WSL: 2.0.14.0
- Docker: 27.3.1

## 手順

1. `ext4.vhdx` の位置を特定し、サイズの確認
    1. `C:\Users\{UserName}\AppData\Local\Packages\CanonicalGroupLimited.Ubuntu_{ランダムな文字列}\LocalState\ext4.vhdx`など
2. cmdなどからwsl2を起動
3. `docker system prune`
4. スペースが確保されたことを確認
5. wslをシャットダウン（`wsl --shutdown`)
6. Windows PowerShellを管理者権限で起動
7. `cd {ext4.vhdxまでのパス}`
8. `Optimize-VHD -Path ext4.vhdx -Mode Full`
9. 容量が増えたことを確認

## 所感
何度も擦られてそうな内容ですが備忘録的に。
`docker build` を行う機会が多い場合、体感2か月程度で40GBくらいは持っていかれているように思う。大半がbuild cache であり、多少利用していないimage に占有されている印象。

`docker system prune` で消したくないものが消えそうな場合は、`docker image prune`と `docker builder prune` を行うだけでも十分な結果が得られそう。

`ext4.vhdx`のサイズを自動調整してくれるオプションとか……ないですかね。
自動調整のオプションや容量肥大化の予防策等ご存じの方、是非ご教示ください:pray:
[Swift] Codableのenumでjsonの値がnil または 空の時にデコード失敗させない

# 事象
こういう構造体でAPIのレスポンスを受け取りたいが、typeがnilやキーがない時にデコード失敗してしまう
```swift
struct Hoge: Decodable {
    let id: Int
    let type: HogeType?
}
enum HogeType: Int, Codable {
    case fuga = 1, piyo
}
```

# 対策
これをしてあげればHogeの構造体のデコードで失敗しなくなり、typeがnilやキーが存在しない時にはデコード失敗しなくなる
またはlet type: HogeType とすれば正しくデコード失敗してくれる
```swift
protocol CommonCodable: RawRepresentable<Int>, Codable {}
extension CommonCodable {
    // Optionalをサポートするinit(from:)のカスタム実装
    init(from decoder: Decoder) throws {
        let container = try decoder.singleValueContainer()
        let rawValue = try? container.decode(RawValue.self)
        if let value = Self(rawValue) {
            self = value
        } else {
            // RawValueがデコードできなかった場合、Optionalの場合はnilを返す
            if Self.self is Optional<Any>.Type {
                self = Optional<Any>.none as! Self
            } else {
                throw DecodingError.dataCorruptedError(in: container, debugDescription: "Invalid raw value for \(Self.self)")
            }
        }
    }
}

enum HogeType: Int, CommonCodable {
    case fuga = 1, piyo
}

```

忘れてた
これも必要（まぁなくても書き方変えるだけで良いけども）
```swift
extension RawRepresentable {
    init?(_ rawValue: RawValue?) {
        guard let rawValue = rawValue else { return nil }
        guard let value = Self(rawValue: rawValue) else { return nil }
        self = value
    }
}
```
Microsoft Fabric のミラーリング機能で Snowflake と連携する

## はじめに
Microsoft Fabric (以降 Fabric) では、Ignite 2024 で Azure SQL Database とのミラーリングに加えて、Snowflake に対するミラーリングが一般公開がアナウンスされましたので、その機能に関して触れてみたいと思います。

Microsoft Fabric Advent Calendar 2024 の 19 日目の記事です。

https://qiita.com/advent-calendar/2024/msfabric

Azure SQL Database とのミラーリングに関しては、以下の記事でまとめています。

https://qiita.com/aki_kawa/private/2175ae5cccaeeaf54502

:::note warn
本情報の内容（添付文書、リンク先などを含む）は、作成日時点でのものであり、予告なく変更される場合があります。
:::
## ミラーリング とは
ミラーリングは Fabric と外部のソースをほぼリアルタイムで連携する機能になります。以下のブログで発表されているように、Snowflake へのミラーリングの一般公開が行われました。Snowflake の Change Data Capture (CDC) の機能を利用して、Fabric の Onelake 上にデータをランディングさせ、テーブルに変換することでミラーリングを実現しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958625/2264cb70-05c6-06bb-e1c6-f40be830ee13.png)


[Announcing the General Availability of Mirroring for Snowflake in Microsoft Fabric](https://blog.fabric.microsoft.com/en-GB/blog/announcing-the-general-availability-of-mirroring-for-snowflake-in-microsoft-fabric/)



## 制限事項
ミラー化された Snowflake を実施する際の制限事項に関しては、以下の公開情報にありますので、利用される際には予め確認ください。

[Snowflake からの Microsoft Fabric ミラー化データベースの制限事項](https://learn.microsoft.com/ja-jp/fabric/database/mirrored-database/snowflake-limitations)

## 手順

以下の公開情報を参考に、Snowflake からのミラーリングを進めて行きます。

[チュートリアル: Snowflake から Microsoft Fabric のミラー化されたデータベースを構成する](https://learn.microsoft.com/ja-jp/fabric/database/mirrored-database/snowflake-tutorial)

1.Snowflake にてデータを用意します
今回はこちらのリンクから、Parquet 形式のタクシー乗車データ Green Taxi Trip Records をダウンロードし、テーブルを作成しておきました。

[TLC Trip Record Data](https://www.nyc.gov/site/tlc/about/tlc-trip-record-data.page)

2.接続情報を取得します
Fabric 側でミラー化された Snowflake を作成するために、必要な情報を Snowflake にて取得します。
URL に関しては以下のようにしてリンクを取得可能で、後ほど利用するためメモしておきます。 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958625/76ee6cfc-9874-2e46-2fcd-01681b9c5cf7.png)

ウェアハウス名に関しては、[ウェアハウス] から利用するウェアハウス名を以下のように確認できるので、こちらもコピーしておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958625/76a85367-dd39-9faa-8641-fa976ead674e.png)


3.ミラー化された Snowflake を選択します
Fabric ポータルにアクセスして、ワークスペースから [作成] アイコンを選択します。
[データ ウェアハウス] セクションにおいて、[ミラー化された Snowflake] を選択します。

4.ミラー化された Snowflake を作成します

手順 2 で取得した URL から https:// を削除します。

```例
https://xxxx.japan-east.azure.snowflakecomputing.com
↓
xxxx.japan-east.azure.snowflakecomputing.com
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958625/e1d03540-0123-87af-99b0-dadc2daed63f.png)

5.データベースを選択します
ミラーリングに利用するデータベースを選択して、ミラーリングを構築します

6.データを確認します
[ミラー化された Snowflake] の SQL 分析エンドポイントを選択すると、データが反映されていることが確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958625/09dfdd7a-ff74-b75f-34de-7b612dfe1993.png)


ミラーリングしたデータの活用は以下のようにして、利用することが可能です。

https://qiita.com/aki_kawa/private/2175ae5cccaeeaf54502#%E3%83%9F%E3%83%A9%E3%83%BC%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%97%E3%81%9F%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AE%E6%B4%BB%E7%94%A8

## まとめ
Snowflake で更新されたデータをミラーリング機能を利用して、Fabric からもほぼリアルタイムに参照できることが確認できました。これによって、Fabric に存在するデータも組み合わせて分析が可能になります。
TinyGo のコマンドラインを補完する tinygo-autocmpl

この記事は TinyGo Advent Calendar 2024 7 日目の記事です。
TinyGo に限らずですが、コマンドラインツールは補完が出来ると助かるケースはあるので、そのための設定を紹介します。

https://qiita.com/advent-calendar/2024/tinygo

![tinygo-autocmpl.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63649/7d3a61c1-4b30-02e5-0154-b0744d0077f0.gif)

## コマンドライン補完とは何か？

雰囲気としては、、、コマンドラインからコマンドやオプションなどを入力するときに、途中まで入力して `TAB` を何回か押すと候補が出たりそのまま入力出来たりする機能です。

例えば、以下のように `tinyg` まで入力して

```shell
$ tinyg
```
 
 `TAB` を押すと (他に候補が無い場合は)  `o` という文字が補完されて `tinygo` になります。

```shell
$ tinygo
```

あるいは私の環境では `tiny` まで入力して `TAB` を 2 回を押すと以下の表示になりました。これは、 `tinydisplay` や `tinygo-docker` などの候補があるよ、という表示です。

```shell
$ tiny
tinydisplay.exe        tinyfontgen.exe        tinyfontgen-ttf.exe
tinygo.exe             tinygo-autocmpl.exe    tinygo-docker.exe
tinygo-edit.exe        tinygo-used-files.exe
```

## TinyGo のコマンドライン補完は？

現状オフィシャルでは用意されていません。ので、以下の sago35/tinygo-autocmpl を作成しています。日常的に使用するオプション等はほぼ網羅できていると思います。

https://github.com/sago35/tinygo-autocmpl

## 設定方法

今の所 bash / zsh / clink に対応しています。以下のように eval コマンド等で設定が出来ます。永続化させるには `~/.bashrc` 等に設定してください。

```shell
# bash
$ eval "$(tinygo-autocmpl --completion-script-bash)"

# zsh
$ eval "$(tinygo-autocmpl --completion-script-zsh)"

# clink (windows)
$ tinygo-autocmpl --completion-script-clink > %LOCALAPPDATA%\clink\tinygo.lua
```


## まとめ

TinyGo のコマンドライン補完についてまとめました。TinyGo 本体と別に開発しているので、最新オプションが足りない等のケースが発生することはあります。適宜 Issue や Pull Request 等で教えてください。

良い TinyGo ライフを。

https://github.com/sago35/tinygo-autocmpl
hyper-vが壊れた時

## だいたい久しぶりに起動したときにはエラーになる。肝心なときにも
私だけ？
毎回微妙に症状が違って困るのでできるだけメモしていきたい。

### その１：外付けHDD（仮想マシンのデータ保存先に指定している）

選択した仮想マシンの起動中にエラーが発生しました。
で仮想ディスクがおかしい的なメッセージだった。
#エラーメッセージのコピペ忘れた。

外付けHDDを抜き差しで再接続後、Hyper-vマネージャを再起動したらOK。

### その２：不明。ネットワーク関連

```plaintext:アラートメッセージ
[Window Title]
Hyper-V マネージャー

[Main Instruction]
選択した仮想マシンの起動中にエラーが発生しました。

[Content]
'仮想マシンA' は起動できませんでした。

Emulated Ethernet Port (インスタンス ID 718032DA-6EFB-4EF4-8152-9A2FBDA945BF): 電源をオンにできませんでした。エラー '無効なアドレスにアクセスしようとしています。'。

[Expanded Information]
'仮想マシンA' は起動できませんでした。(仮想マシン ID D8D5E597-90AE-4EAD-9A4E-03BB6D778873)

'仮想マシンA' Emulated Ethernet Port (インスタンス ID 718032DA-6EFB-4EF4-8152-9A2FBDA945BF): 電源をオンにできませんでした。エラー: '無効なアドレスにアクセスしようとしています。' (0x800701E7)。(仮想マシン ID D8D5E597-90AE-4EAD-9A4E-03BB6D778873)

[V] 詳細の表示(D)  [閉じる(C)]
```

ネットワークアダプターをあれこれ切り替えてもダメ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3916302/c95ff705-3587-1be0-3446-1caa0d4c15d9.png)
アダプタを削除して、`ハードウェアの追加`から再度、元の仮想スイッチを指定したらOK。

ゲストOS起動後、固定IPだったので新しく作ったネットワークインターフェースに対して再度設定が必要。
Ubuntuだったので、下記手順で再設定。

```bash:ネットワークインターフェースの確認
$ ip a
1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000
    link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00
    inet 127.0.0.1/8 scope host lo
       valid_lft forever preferred_lft forever
    inet6 ::1/128 scope host noprefixroute
       valid_lft forever preferred_lft forever
2: eth0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc mq state UP group default qlen 1000
    link/ether 00:15:5d:00:6d:03 brd ff:ff:ff:ff:ff:ff
    inet 172.18.167.219/20 brd 172.18.175.255 scope global eth0
       valid_lft forever preferred_lft forever
    inet6 fe80::215:5dff:fe00:6d03/64 scope link
       valid_lft forever preferred_lft forever
3: docker0: <NO-CARRIER,BROADCAST,MULTICAST,UP> mtu 1500 qdisc noqueue state DOWN group default
    link/ether 02:42:60:15:ff:63 brd ff:ff:ff:ff:ff:ff
    inet 172.17.0.1/16 brd 172.17.255.255 scope global docker0
       valid_lft forever preferred_lft forever
4: br-f98cbccb55eb: <NO-CARRIER,BROADCAST,MULTICAST,UP> mtu 1500 qdisc noqueue state DOWN group default
    link/ether 02:42:63:7a:ea:d6 brd ff:ff:ff:ff:ff:ff
    inet 172.19.0.1/16 brd 172.19.255.255 scope global br-f98cbccb55eb
       valid_lft forever preferred_lft forever
```
前回のネットワークインターフェースの名前はenp1s0だった。今回はeth0。
毎回思うけど、eth0がこのゲストで設定するネットワークインターフェースだ！ってのはどうやって見分けるんだろう。#そして今回も調べていない。。。

/etc/netplan 配下のファイル（今回は99-enp1s0-fix.yamlだった）を書き換え
```bash
# sudo bash
$ cd /etc/netplan/
$ cat 99-enp1s0-fix.yaml
network:
    version: 2
    renderer: networkd
    ethernets:
        enp1s0:
            dhcp4: false
            dhcp6: false
            addresses: [172.18.167.219/20]
            routes:
              - to: default
                via: 172.18.160.1
            nameservers:
              addresses: [8.8.8.8, 8.8.4.4]
$ cp 99-enp1s0-fix.yaml  99-eth0.yaml
$ sed -i -e 's/enp1s0/eth0/' 99-eth0.yaml
$ mv 99-enp1s0-fix.yaml 99-enp1s0-fix.yaml.org 
$ netplan apply
```
vuetify3 v-data-tableのtrにclassをつけたい

### 1.問題
v-data-tableで展開されるtrのtdにある特定の値「user.status」が「0」の時は、trのClassにyellowのclassを付けて行をハイライトさせたい。

### 2.解決
v-data-tableに:row-propsをつけて、Classを設定するメソッドを設定したら、特定の行がハイライトするように動きました。以下がコードです。

```
v-data-table(:headers="headers" :items="filteredItems" :row-props="addTrClass")
...略

data() {
  return {
    headers: [
      {title: 'ステータス', align: 'center', key: 'user.status', width: '100%'},
    ],
  }
}
...略

methods: {
  addTrClass({ item }) {
    return {class: item.user.status === 0 ? 'yellow' : ''}
  }
}
```
### 3.その他
ネットの記事を見ていると、v-slotをオーバライドして…といった記事がありましたが、オーバライドしてしまうと、trやtdに自動でつくべきclassが付きません。また、headersに入れてる値も自動で展開できなくなりました。

あと、vuetify2だと「item-class」というもう少し直感的な名前なんですが、vuetify3から「row-props」に代わっていました。

### 4.参考文章
公式
https://vuetifyjs.com/ja/api/v-data-table-rows/

githubのissues
https://github.com/vuetifyjs/vuetify/issues/16991#issuecomment-2488965788

### 5.最後に
いいね👍もらえると励みになります！
【Rust✖︎WASM】画像を爆速SEO対応できるようにした

# はじめに
こんにちは。細々とプログラミングをしている[sotanengel](https://x.com/sota_eng_prog)です。

前回、RustをWASM形式に変換してWebアプリ作った([【Rust✖︎WASM】定義書から自動でRustの構造体ファイルを作成するWASM公開！](https://qiita.com/sotanengel/items/21615b4b44ce3af9f854))んですが、
テキスト形式のファイルを変換するだけだとRustの「高速処理の恩恵」を得られてないと思ったので、今回は画像をWebP形式に変換するWASMアプリを実装しました！！

Webアプリや具体のコードに触れてみたい方は以下のサイトをご覧くださいませ。

https://sotanengel.github.io/image-webp-converter-wasm/

https://github.com/sotanengel/image-webp-converter-wasm

以下、背景だったり苦労した点を紹介していきます👀

# 背景
## そもそもWebP形式ってなに？
Googleさんが開発した新しい画像フォーマットです。
画像サイズをいい感じに圧縮することができるのが特徴です。
↓[公式サイト](https://developers.google.com/speed/webp?hl=ja)より

```
WebP 可逆圧縮画像は、PNG 画像と比べてサイズが 26% 小さくなります。
WebP の非可逆画像は、同等の SSIM 品質インデックスで同等の JPEG 画像よりも 25 ～ 34% 小さくなります。
可逆 WebP は透明性をサポート（アルファ チャンネルとも呼ばれます）しますが、コストはわずか 22% の追加バイトです。
非可逆 RGB 圧縮が許容される場合、非可逆 WebP は透明度もサポートしており、通常は PNG よりもファイルサイズが 3 倍小さくなります。
```

↓さくらインターネットさんの分かりやすい解説

https://imageflux.sakura.ad.jp/column/webp/

## 画像サイズとSEOの関係性
「画像サイズを圧縮すると何が嬉しいの」って話なんですが、SEO順位を改善することに繋がります。
Googleさんはページの読み込み速度をモバイル検索のランキング要因に利用することを明言しているため、ページ内のデータサイズを減らした方がいいんですよね〜
つまり「(サイトの中でもサイズを喰っている)画像を圧縮率の良いWebP形式にする」のはSEO対策として割に合っているというわけです。

https://www.suzukikenichi.com/blog/is-page-speed-a-ranking-factor-in-mobile-search/

https://developers.google.com/search/blog/2018/01/using-page-speed-in-mobile-search?hl=ja

# 苦労した点
## 1. ライブラリの選定
[Issue](https://github.com/sotanengel/image-webp-converter-wasm/issues/1)を見てもらえればわかるんですが、選定でめっちゃ実装に時間かかりました。。。。
最初の時点で「[webp](https://crates.io/crates/webp)」と「[image-webp](https://crates.io/crates/image-webp)」があったんですが、webpの方がドキュメントしっかりしてたんで採用したんですよね。そしたら全然WASMへの変換でコンパイルが通らなくなってしまい・・・・
1週間くらい悩んだ結果、webpライブラリの大元であるlibwebp-sysクレートで「Cに依存するから無理やで」みたいなIssueを発見し、webpではなくimage-webpへの転換をしました。

https://github.com/NoXF/libwebp-sys/issues/11

## 2. ライブラリのドキュメント不備
webpクレートが使えなかったので、image-webp使うことにしたんですが、
READMEに記載の情報がこれしかなく絶望する(なお、exampleのコードもない)。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1758960/3ae957b2-dc1b-7fdf-d984-f5137bf7868a.png)

仕方なしに実装コード上のテストを確認し、GPTさんに土下座しながら実装完了しました。
↓私流のサンプルコードはこちら

https://github.com/sotanengel/image-webp-converter-wasm/blob/main/src/main.rs

※後続の人が困らないようにimage-webpにPR今度出します😇

# さいごに
ライブラリが使えないという危機に直面しながら実装できて本当によかったです！
欲しい機能などあれば以下からリクエスト出してくださいまし👀

https://github.com/sotanengel/image-webp-converter-wasm/issues