OmniAICreator/Qiita-1.07M huggingface dataset:
メモ

~~~Java
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;

@Service
public class MessageService {

    @Value("${greeting.morning}")
    private String morningMessage;

    @Value("${greeting.afternoon}")
    private String afternoonMessage;

    @Value("${greeting.evening}")
    private String eveningMessage;

    @Value("${error.E101}")
    private String errorE101Message;

    @Value("${error.E102}")
    private String errorE102Message;

    public String getMorningMessage() {
        return morningMessage;
    }

    public String getAfternoonMessage() {
        return afternoonMessage;
    }

    public String getEveningMessage() {
        return eveningMessage;
    }

    public String getErrorE101Message() {
        return errorE101Message;
    }

    public String getErrorE102Message() {
        return errorE102Message;
    }
}
~~~
~~~Java
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;

@Component
public class MessageLogger {

    private static final Logger logger = LoggerFactory.getLogger(MessageLogger.class);

    @Autowired
    private MessageService messageService;

    public void logMessages() {
        logger.info("Morning Message: {}", messageService.getMorningMessage());
        logger.info("Afternoon Message: {}", messageService.getAfternoonMessage());
        logger.info("Evening Message: {}", messageService.getEveningMessage());
        logger.error("Error E101 Message: {}", messageService.getErrorE101Message());
        logger.error("Error E102 Message: {}", messageService.getErrorE102Message());
    }
}
import org.springframework.boot.CommandLineRunner;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Bean;
~~~
~~~Java
@SpringBootApplication
public class Application {

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }

    @Bean
    public CommandLineRunner run(MessageLogger messageLogger) {
        return args -> {
            messageLogger.logMessages();
        };
    }
}

~~~Java
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;

@Service
public class MessageService {

    @Value("${greeting.morning}")
    private String morningMessage;

    public String getMorningMessage(String name) {
        return String.format(morningMessage, name);
    }
}
~~~

~~~Java
@Component
public class MessageLogger {

    private static final Logger logger = LoggerFactory.getLogger(MessageLogger.class);

    @Autowired
    private MessageService messageService;

    public void logMessages() {
        String name = "John"; // 例えば、名前をJohnとしますが、実際の名前をここに指定します
        String morningMessage = messageService.getMorningMessage(name);
        logger.info("Morning Message: {}", morningMessage);
    }
}
読書一言感想月記（2024年3月）

# はじめに
初めまして！
エンジニアになって数年、今まで本を読むだけでしたが、もっとプライベートで楽しみながら成長したい！自分が学んだ足跡を残していきたい！と思い記事を書きました！
最終的には自在に開発できるようになりたいと思っています。:triumph:
いろいろな記事を参考にさせてもらっています。:bow_tone2:
その中でもこれってどういう意味？とかつまづいたところを念入りに書いていこうかと思います。:fist:

# 今回の目的
本は読んでるけど、どれくらい読んでいるだろう、どんな本だったけ？というのと記録したい、でも書いていると読むのに時間がかかるというのもあり、一言記事を書いてみることにしました。

# 今月読んだ本
### Visual Studio Code完全入門　Webクリエイター&エンジニアの作業がはかどる新世代エディターの操り方

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

拡張機能周りで便利なものがまとまっていて読み応えがありました。Intelligenceが各プログラミング言語で用意されているのも知らなかったので勉強になりました。

### React Angular Vueをスムーズに修得するための最新フロントエンド技術入門

https://bookplus.nikkei.com/atcl/catalog/21/S70210/

いままでリクエスト＆レスポンスで画面をすべて再描画する従来型Webで開発していたので、モダンWebへの変遷を学べたのは大きかったです。

### 「やりたいこと」も「やるべきこと」も全部できる！ 続ける思考

https://honto.jp/netstore/pd-book_32953053.html

継続を趣味という著者の考えに共感しました。というより継続を趣味と言っていいんだという新しい考え方をもらった気がします。
また無理に続けようとすると続かないというところと共感でき、自分の考えが整理できました。

### React Hooks 入門: フックの基礎や使い所をしっかり理解して使いこなす

https://bookmeter.com/books/16795497

Reactを触って間もなかったのでHooksを敬遠してましたが、この本のおかげでだいたいの内容を整理することができました。
JavaScriptの自作ライブラリをGitHubのクイックスタートに沿って作成する①

# はじめに

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

今回はGitHubのクイックスタートに沿って自作ライブラリを作成してみようと思います。

https://docs.github.com/ja/packages/quickstart

GitHubの公式のクイックスタートに従って行っていこうと思います。


# NPMに登録

まずは以下に登録します。

https://www.npmjs.com/



# 公式のクイックスタート

>GitHub に新しいリポジトリを作成し、ノードに .gitignore を追加します。 詳しくは、「新しいリポジトリの作成」を参照してください。

>ローカル コンピューターにリポジトリを複製します。

まずリポジトリを作成します。

`sample_package`という名前で作成し、ローカルにクローンをし、VSCodeでフォルダを開きました。

![スクリーンショット 2024-03-30 14.07.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/0eddb604-4137-5169-9415-9edf1b94e050.png)


> index.js ファイルを作成し、「Hello world!」を表示する基本的なアラートを作成します。

![スクリーンショット 2024-03-30 14.09.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/4d099b40-3fe5-043d-8b2a-9d556e74f19a.png)

こんな感じで`index.js`を作成しました。

```js:index.js
console.log("Hello, World!");
```

>npm パッケージを npm init で初期化します。 パッケージ初期化ウィザードで、 @YOUR-USERNAME/YOUR-REPOSITORY の形式で名前を入力し、テスト スクリプトを exit 0 に設定します。 これにより、パッケージの情報が付いた package.json ファイルが生成されます。

以下コマンドを実行し、`package.json`ファイルを生成しました。

```
npm init
```

nodeをインストールしてなかったら、インストールします。

>npm install を実行して package-lock.json ファイルを生成し、変更をコミットして GitHub にプッシュします。

```
npm install
```

を実行しました。

>.github/workflows ディレクトリを作成します。 そのディレクトリ内に、release-package.yml という名前のファイルを作成します。

`.github/workflows`フォルダを作成し、`release-package.yml`を作成しました。

```yml:release-package.yml
name: Node.js Package

on:
  release:
    types: [created]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 16
      - run: npm ci
      - run: npm test

  publish-gpr:
    needs: build
    runs-on: ubuntu-latest
    permissions:
      packages: write
      contents: read
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 16
          registry-url: https://npm.pkg.github.com/
      - run: npm ci
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}

```

>package.json ファイルを編集して、publishConfig キーを指定します。

package.json ファイルに以下を追加しました。
```json
  "publishConfig": {
    "@xxxxx": "https://npm.pkg.github.com" //xxxxxのところはnpmの自分のアカウントの名前を書いてください
  }
```

# ローカルで実行

以下コマンドでpublishしてみてください。

```
npm publish
```

すると、以下の容易にnpmに作成されています。

![スクリーンショット 2024-03-31 23.38.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/1a4469f1-a17e-b15b-2fcf-15e60dff1421.png)



# おわりに

次回はGitHubActionsを使用してPushした時にpublishしてみようと思います。

この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！

# 参考

https://docs.github.com/ja/packages/quickstart

# 次の記事
CVE-2024-3094　Backdoor in XZ Utils

# はじめに
本記事は2024年3月29日に発見されたXZ Utilsの脆弱性（CVE-2024-3094）の概要について記載しています。

## 背景
[XZ Utils](https://ja.wikipedia.org/wiki/XZ_Utils)は、色々なLinuxディストリビューションで広く使用されている圧縮ライブラリです。

2024年3月29日、MicrosoftのPostgreSQL開発者であるAndres Freund氏によって、SSHパフォーマンスの問題を調査中にXZ Utilsを構成しているliblzma内で悪意のあるコードを発見し、Openwallの[セキュリティメーリング リスト](https://www.openwall.com/lists/oss-security/2024/03/29/4)で報告されました。

## 影響
CVE Numbering Authority（CNA）であるRed Hat社によって、[CVE-2024-3094](https://nvd.nist.gov/vuln/detail/CVE-2024-3094)が割り当てられています。

ライブラリの影響範囲は、XZ Utilsの5.6.0及び5.6.1のバージョンが影響を受けます。悪意のあるコードは難読化されていて、ダウンロードパッケージに含まれています。

本記事執筆時点では、実際に侵害されたなどの事例は確認できていませんが、特定の条件下で悪意のある攻撃者によって、バックドアを用いたsshd認証に対する不正アクセスの可能性が懸念されています。

## 原因
脆弱性が作り込まれた原因については、本記事執筆時点では不明です。

Openwallの[セキュリティメーリング リスト](https://www.openwall.com/lists/oss-security/2024/03/29/4)の投稿を見ると、コミッターが直接関与しているか、システムに侵害があった可能性を仄めかしていますが、後者の可能性は低いと言われています。

>Given the activity over several weeks, the committer is either directly
involved or there was some quite severe compromise of their
system. Unfortunately the latter looks like the less likely explanation, given
they communicated on various lists about the "fixes" mentioned above.

## 対応
基本的には各ディストリビューションの公式情報をご確認ください。

現在把握できている各ディストリビューションの公式情報について、以下に記載します。

### 影響を受けるディストリビューション

| Distribution | Advisory |
|:-|:-|
| Arch Linux | [The xz package has been backdoored](https://archlinux.org/news/the-xz-package-has-been-backdoored/) |
| Debian（※unstable[^1]） | [CVE-2024-3094](https://security-tracker.debian.org/tracker/CVE-2024-3094) |
| Fedora Linux 41・Fedora Rawhide users | [Urgent security alert for Fedora Linux 40 and Fedora Rawhide users](https://www.redhat.com/en/blog/urgent-security-alert-fedora-41-and-rawhide-users) |
| Kali Linux | [All about the xz-utils backdoor](https://www.kali.org/blog/about-the-xz-backdoor/) |
| openSUSE Tumbleweed・openSUSE MicroOS | [openSUSE addresses supply chain attack against xz compression library](https://news.opensuse.org/2024/03/29/xz-backdoor/) |
| Ubuntu(※noble-proposed)| [CVE-2024-3094](https://ubuntu.com/security/CVE-2024-3094) |

[^1]: [不安定版 (unstable) ディストリビューション (sid)](https://www.debian.org/releases/sid/index.ja.html)

### 影響を受けないディストリビューション
| Distribution | Advisory |
|:-|:-|
| Amazon Linux | [CVE-2024-3094](https://aws.amazon.com/jp/security/security-bulletins/AWS-2024-002/)
| Debian（※stable） | [[SECURITY] [DSA 5649-1] xz-utils security update](https://lists.debian.org/debian-security-announce/2024/msg00057.html)
| Red Hat Enterprise Linux (RHEL) | [CVE-2024-3094](https://access.redhat.com/security/cve/CVE-2024-3094)
| SUSE Linux Enterprise・Leap | [CVE-2024-3094](https://www.suse.com/security/cve/CVE-2024-3094.html)

# おわりに
その他のLinuxディストリビューションについては、現在確認中だと思われるため、それぞれの公式情報をご確認ください。

## 参考
- [Urgent: Secret Backdoor Found in XZ Utils Library, Impacts Major Linux Distros](https://thehackernews.com/2024/03/urgent-secret-backdoor-found-in-xz.html)
ITパスポート システムの信頼性

・平均故障間隔（MTBF）
システムが正常に稼働している時間の平均時間
平均故障間隔が長いほど、システムの信頼性が高い
・平均修復時間（MTTR）
システムが故障して修復している時間の平均時間
平均修復時間が短いほど、システムの保守性が高い

・稼働率
システムが正常に稼働している割合
稼働率が高いほど、システムの可用性が高い
稼働率=MTBF/（MTBF+MTTR）
・直列システムの稼働率
稼働率=稼働率Aｘ稼働率B
・並列システムの稼働率
稼働率=1-（1-稼働率A）ｘ（1-稼働率B）
・バスタブ曲線
各装置の故障率と時間の関係のグラフ
・予防保守
定期的にシステムをメンテナンスし、故障の前兆をとらえて部品を交換すること
Edgeのアドレスバー検索で勝手にBing検索にリダイレクトされるsysredirector.com対策

ChatGPT先輩がCopilotに利用されていることもあり、Edgeがデフォルトブラウザになり1年近くになりそうな今日このごろ。

まさかマイクロソフト製のブラウザをデフォルトにする世界になるなんて10年前では考えられませんでした。

1年経過して、Geminiの方が出力が早いのでやっぱりchromeに戻ろうかなっておもっていますが、スイッチングコストの高さを痛感してます。

> Edgeのアドレスバー検索で勝手にBing検索にリダイレクトされるsysredirector.com対策

以前よりEdgeのアドレスバー検索すると、なんだかBingで検索される症状が時々発生していました。

たいていアップデートのタイミングで勝手に設定がデフォルトにもどるから、設定をし直せばどうにかなってました。

ただ、今回のアップデートで、検索エンジンをGoogleにしても、Bingにリダイレクトするsysredirector.comという処理が入っているのは私だけなのかもしれないという状況になってます。

sysredirector.comがなにかについては、朝の忙しい時間なので調べてません。

ただ、Bing検索はなれないので、Google検索に確実に戻す方法を勝手に考えました。

> sysredirector.comでリダイレクトされる仕組み

なんとなく、google.comをデフォルトにしていることで、google.comをキーにしてリダイレクトされる気がしました。

未検証です。

そこで、 `https://www.google.co.jp/search?q=` をキーにすればよいのではと適当に思いつき、設定したらリダイレクトされないので一応良いかなというのが今です。

> 設定手順

1. 次のEdge設定URLをクリック
[edge://settings/?search=%E3%83%90%E3%83%BC%E3%81%A8%E6%A4%9C%E7%B4%A2](edge://settings/?search=%E3%83%90%E3%83%BC%E3%81%A8%E6%A4%9C%E7%B4%A2)


1. 黄色になっている `バーと検索` をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39256/9c1526ca-5eda-7fa8-a204-47fa9b1d1cfc.png)


1.  `検索エンジンの管理` をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39256/e91e46b5-fb5e-22e2-95da-263af0358ef7.png)

1.  右上の `追加` をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39256/359e0469-b36d-f763-94bc-1bf5baa95f30.png)

1.  上から順番に `Google日本` と `https://www.google.co.jp/search?q=%s` を利用してコピー&ペーストで設定する
1.  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39256/5d7a1277-9ae5-bba7-5a1a-d52f3055467f.png)
1. `Google日本` の右端にある `・・・` をクリックして `規定に設定する` を選択して追加する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39256/b443b3e8-773c-4629-2ebb-5b70012f8dfc.png)

1.  ページを戻って次のようになってたらOK

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39256/cdc828ef-de46-6160-9358-ce918cd7d000.png)

> 教えて

sysredirector.comの処理が入るのが私だけだったら教えて下さい。

一度クリーンインストールし直そうかなって思いながら2年ぐらい経過中。
今の開発組織でチャレンジしていること

# はじめに
私が勤務している職場はBtoB、BtoCでWebサービスを提供しています。
私を含め障害者雇用と一般雇用の方が一緒に開発しているため、コーディングルール、開発手法を含め、組織としてやりやすい開発手法をとっています。

## チャレンジしていること
①　アジャイル開発
弊社はADHDの方も一定数いらっしゃるため、集中力を短時間、短い周期で回しやすいアジャイル開発を中心に、ペアプロも導入しています。

② コーデイングルールの明確化
弊社はASDの方(私も含めて)がいらっしゃるため、コーディングルールにこだわりを持っている方が多いため、なるべくシンプルで明確なコーディングルールを策定しています。

# 最後に
現在チャレンジしていることを簡単にご紹介いたしました。
Kubernetesクラウドネイティブアソシエイト（KCNA-JP）受験記録

### はじめに
先日、認定Kubernetesクラウドネイティブアソシエイト（KCNA-JP）資格を取得しましたので、受験記録として残します。

### 試験概要
- 試験内容：60問中75％以上で合格
  - Kubernetes基礎46%
  - コンテナ オーケストレーション：22%
  - クラウド ネイティブ アーキテクチャ：16%
  - クラウド ネイティブの可観測性：8%
  - クラウド ネイティブ アプリケーションの配信：8%
- 受験料：$275
  - [認定Kubernetesクラウドネイティブアソシエイト (KCNA-JP)](https://training.linuxfoundation.org/ja/certification/kubernetes-and-cloud-native-associate-kcna-jp/)
  - eラーニング教材であるKubernetesとクラウドネイティブ基礎 (LFS250-JP) をセットにした場合は$328となります。
  - 不合格になっても追加の費用なく1回のみ再受験が可能です。
  - 現在売り切れになっていますがping-tで大幅に割引されていました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3759761/4efef405-18bf-33fe-d14d-4528fe4801a1.png)

### 学習方法
- Kubernetesとクラウドネイティブ基礎（LFS250-JP）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3759761/95c21ba2-125d-476e-a5a4-71b71322faee.png)
  - kubernetesクラスタの運用保守の業務を半年程経験しましたが、LFS250のみでは試験対策としては不十分でした。（出題内容を網羅出来ていないように感じ、また、日本語が怪しい箇所もありました。）
  - 下記サイトは学習の参考になりました。特に公式ドキュメントは一通り目を通しておいた方が良いと思います。
    - [kubernetesの公式ドキュメント](https://kubernetes.io/ja/docs/concepts/overview/)
    - [Kubernetes道場 Advent Calendar 2018](https://qiita.com/advent-calendar/2018/k8s-dojo) 

### 試験形式
- PearsonVUEを介さないオンライン試験のため、レンタルスペースを借りて受験しました。
- 試験官とは英語でのチャットのやり取りで、試験開始前の指示がありました。
  - 部屋の周囲や机の状態の確認（ノートPC内蔵カメラでも問題なかったです。）
  - スマートフォンを鞄に片付ける
  - 飲み物の有無

### 受験するにあたって参考にした記事
- [Kubernetes技術者認定とは？難易度や出題範囲など認定試験詳細やおすすめ学習法を解説](https://freelance-start.com/articles/937#title6)
- [認定Kubernetesクラウドネイティブアソシエイト (KCNA-JP) 受験体験記](https://qiita.com/yukinocist/items/6b7dae9d8bce1432b786)

### その他
- Credlyに対応しておりバッチを取得できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3759761/ab5e59d3-9b70-4f52-e810-9889237eea10.png)
【JavaScript】Type Castingとは

# Type Castingとは
型変換 (または型キャスト) とは、あるデータ型から別のデータ型へのデータの転送を意味します。

```js
let a;
let b;
let c;
let d;

a = Number("3.14"); //数値に変換
b = String(3.14);   //文字列に変換
c = Boolean("");    //真偽値に変換
d = Boolean("pizza");

console.log(a, typeof a); //3.14 'number'
console.log(b, typeof b); //3.14 string
console.log(c, typeof c); //false 'boolean'
console.log(d, typeof d); //true 'boolean'
```
Qiitaに投稿されている記事情報には何があるの？

使うタイミングが来るか分かりませんが、QiitaのAPIが気になっていたので少し確認してみました。
今回は記事にしか触れていませんが、他のAPIはこちらに記載されています。

https://qiita.com/api/v2/docs#%E6%A6%82%E8%A6%81

:::note warn
APIの利用には制限があるようなので、一旦そこだけ気をつけました。
・認証している状態ではユーザーごとに1時間に1000回まで、認証していない状態ではIPアドレスごとに1時間に60回までリクエストを受け付けます。
:::
※今回は認証していない状態で利用しています。

# Itemsの構成
## リクエスト
```
https://qiita.com/api/v2/items?page=1&per_page=20&query=user:kiNako_aNko
```
今回はVSCodeのREST Clientを使っていますが、そのままブラウザで叩いても大丈夫です（だいぶ見づらいですが・・・）
※queryについては[後述参照](#queryオプション) 

それにしてもこの拡張機能楽すぎる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3726019/b2afc9a3-f2cb-9b2d-6a45-c88cab61b6a8.png)

## レスポンス
レスポンスの構成は以下の通りです※さらにリストが持っている構成は割愛
| KEY | 説明 |
|:-:|:-:|
| rendered_body  | HTML形式の本文  |
| body  |  Markdown形式の本文 |
| coediting  | 共同更新状態かどうか (Qiita Teamでのみ有効) |
| comments_count  |  コメントの数 |
|  created_at | データが作成（公開？）された日時  |
| group  | Qiita Teamのグループ  |
|  id | 記事の一意なID  |
|  likes_count | 「いいね」の数  |
| private  | 限定共有状態かどうか (Qiita Teamでは無効) |
| reactions_count  |  絵文字リアクションの数（Qiita Teamでのみ有効） |
| stocks_count  |  ストックされた数 |
|  tags |  記事に付いたタグ一覧 |
| title  |記事のタイトル   |
| updated_at  |  最後に更新された日時 |
| url  | 記事のURL  |
|  user | ユーザー情報  |
|page_views_count  | 閲覧数  |
| team_membership  |  Qiita Team のチームメンバー情報 |
| organization_url_name  | 記事のOrganization の url_name  |
| slide  |  スライドモードが有効かどうか |

こんな感じです（rendered_bodyとbodyは長いので割愛）
```json
{
    "rendered_body": "",
    "body": "",
    "coediting": false,
    "comments_count": 0,
    "created_at": "2024-03-18T07:03:51+09:00",
    "group": null,
    "id": "4a8734aff6ce5c061bf3",
    "likes_count": 9,
    "private": false,
    "reactions_count": 0,
    "stocks_count": 8,
    "tags": [
    ],
    "title": "重要なテストケースは確保しつつテスト工数を減らす方法",
    "updated_at": "2024-03-18T07:03:51+09:00",
    "url": "https://qiita.com/kiNako_aNko/items/4a8734aff6ce5c061bf3",
    "user": {
    },
    "page_views_count": null,
    "team_membership": null,
    "organization_url_name": "crane-i",
    "slide": false
  }
```

閲覧数がnull・・・？

# 閲覧数を確認したい
認証が必要そうだったので、今回は諦めました。
今度トークン取得してリベンジします。

# queryオプション
今回はuserしか使っていませんが、オプションは以下の通りです。
※複数指定したい場合は"+"で繋げる
| オプション名 | 説明 |使用例|
|:-:|:-:|:-:|
| title  | タイトルに指定の文字列を含む  |title:記事情報 |
| body  | 本文に指定の文字列を含む	  |body:閲覧数|
| code  |  コードに指定の文字列を含む	 |code:json|
| tag  | 指定のタグを持つ	  |tag:API|
| -tag	  |  指定のタグを持たない |-tag:API|
| user  | 指定のユーザー	  |user:kiNako_aNko|
| stocks  | ストック件数  |stocks:>100|
| created  |  作成日	 |created:>2024-03-24|
|  updated | 更新日	  |updated:>2024-03-24|

# さいごに
APIを使えば色々分析もできて面白そうなので、今後はきちんと認証してやってみようと思います。
Googleフォームで受け取った値をGoogle Docに反映させる方法 with GAS

同じフォーマットの書類を何度も作成する事が通常業務の中で発生する方もいると思います。
同一の契約書の書面の中に名前と住所と就業開始日を入れる等、契約書の締結相手によって情報は変わる場合、フォーム経由で作成依頼者から情報を受け取ってドキュメントに反映させられたら便利と思いませんか？

そんな方法を下記のリポジトリにGASのコードとGoogleフォームとGoogleドキュメントと共に示しました。
サンプルは雇用契約書ですが、様々な書類の自動作成に応用できると思います。


Github repo：https://github.com/HibikiDaBull/Hibiki_GAS-Hacks/blob/main/GAS%20Code_how%20to%20apply%20value%20from%20Google%20form%20to%20Google%20Doc

Googleドキュメントサンプル：https://docs.google.com/document/d/19TpSooLhsBHlCisv93mM_Tp6an4xisJToJ5hDUy61c0/edit


Googleフォームサンプル：https://docs.google.com/forms/d/1zO9vA_aTyRsmvcKaHmqcdfi3JyVcT4q_3l4HzO-8Xhg/edit
OpenStack CLIの補完設定メモ

devstackで環境構築したあとによく忘れるのでメモ。`.bashrc`に突っ込んでおく。

```shell
source $HOME/devstack/openrc admin admin
source <(openstack complete --shell bash)

# コマンド名をosでalias
alias os=openstack
complete -F _openstack os
```
2024/4/01主にITとかセキュリティの記事

そこまでSSDにやらせるか？　ベンダーが開発する“AI組み込みSSD”の可能性(3/30)
https://techtarget.itmedia.co.jp/tt/news/2403/30/news05.html

日本版デジタル市場法がもたらす中国・ロシアのマルウェア天国(3/30)
https://sakisiru.jp/48172

「サイバー犯罪者」対「政府連合」　軍配はどちらに上がるのか(3/30)
https://kn.itmedia.co.jp/kn/articles/2403/30/news067.html

2024年は脱パスワードが進むか？　企業規模で見る「パスキー」の導入割合(3/29)
https://kn.itmedia.co.jp/kn/articles/2403/29/news143.html

カナダが中国共産党のハッカー集団APT31の攻撃を公表(3/29)
https://www.epochtimes.jp/2024/03/214155.html

［社説］TikTokの安保リスクに向き合え(3/30)
https://www.nikkei.com/article/DGXZQODK230HD0T20C24A3000000/

ODA70周年を機に対中供与の大失態の反省を　その４　日本の援助が軍事インフラ建設に(3/29)
https://news.infoseek.co.jp/topics/japanindepth_82071/

AWS入門ブログリレー2024〜Amazon Simple Email Service(Amazon SES)編〜(3/30)
https://dev.classmethod.jp/articles/introduction-2024-amazon-simple-email-service/

【2024年最新】日本のおすすめメタバースプラットフォーム一覧！(3/30)
https://xrcloud.jp/blog/articles/business/3290/
ABICを用いて増減法でパラメータ選択を行う重回帰分析用ソフト

ABICを用いて増減法でパラメータ選択を行う重回帰分析用ソフト。
そのpython版がほぼ固まりつつあります。
関心のある方はRes:してください。
その数によって、ソースをupするかどうか決めます。
－－－－－－
このソフトは、特定の医療検査項目の測定の異常を検出する目的で作ったBASICのそれがベースにあります。
百項目近い検査データ相互の関連から、検査結果の異常や一見正常に見える結果を示している病的異常を検出しようとするものでした。
検査項目１つをチェックする重回帰式に必要な説明変数は１つから多くて数項目。
ただその項目を全項目について、各々百項目近い中から探さねばなりませんでした。
40数年前の8-bit-PCとしては莫大な計算量です。そこでこの仕様となった次第です。
このソフトでは検査項目の方がサンプル数よりも多いことも想定されています。
ABICが変数増減法で最小になれば、そこで説明変数の捜索は打ち切られます。
モデルが過学習になる前にパラメータの増加が打ち切られるのです。
なお、開発当初のものはAICを用いていました。
それは、今振り返ると過学習をしていたことがよくわかります。
16項目の全自動分析機の項目間相互チェックに５～７項目の説明変数が選ばれたこともあったのです。
それでも、この方法で選ばれた血清イオン化カルシウムの推定法から、多くの副甲状腺機能亢進症の患者さんが発見されました。
－－－－－－
文責：廣瀬敏之(臨床検査技師)
マイクラサーバーをディスコードBOTから起動、終了出来るようにした

# 初めに
マイクラサーバーを自分のPCに立てたけど、複数人でやるとき自分がいちいちPCで起動、終了コマンド打つのめんどいなーと思ってこの記事を書きました。24時間鯖起動は電気代的にちょっと...って人向けです。
*PCは24時間起動で常に自分のディスコードBOTが動くことを想定しています。
*マイクラ以外でも同じPCで実行するものなら何でもできます。
## この記事でできること
- ディスコードでコマンドを入力すると自動的にマイクラ鯖が起動、終了します。
- いま鯖が起動しているかどうかもコマンドで確認できます。

もし起動コマンドを２連続で打っても１回しか起動しませんので安心してください。


### この記事で解説していないこと
- マイクラ鯖の構築方法


## サーバー起動シェルスクリプト作成
みなさんが普段入力しているサーバーの起動コマンドがあると思いますので、コマンドを記述したシェルスクリプトファイルを作成します。
僕の場合のコマンド↓
```
java -Xms20G -Xmx20G -jar mohist-1.20.1-550-server.jar
```
以下にshファイルを記述しますが、ご自分のコマンドに適宜変えてください。
また、このshファイルは裏画面でCLIを起動し、コマンドを実行させています。
**shファイルは普段起動コマンドを実行しているディレクトリに配置してください**


shファイルは今回
"dsc_run.sh"
"dsc_status.sh"（サーバーが今起動しているか確認するよう）
"dsc_stop.sh"
の３つ作成します。


dsc_run.sh
```
#!/bin/bash

# スクリーンセッションの名前を定義
SESSION_NAME="minecraft_server"

# 既にスクリーンセッションが存在するか確認
if screen -list | grep -q "\.$SESSION_NAME"; then
    echo "サーバーが既に起動しています。"
else
    # スクリーンセッションを作成してサーバーを開始
    screen -dmS $SESSION_NAME java -Xms20G -Xmx20G -jar mohist-1.20.1-550-server.jar
    sleep 10  # 10秒待つ
    echo "サーバーが起動しました。"
fi
```

dsc_status.sh
```
#!/bin/bash

# スクリーンセッションの名前を定義
SESSION_NAME="minecraft_server"

# 既にスクリーンセッションが存在するか確認
if screen -list | grep -q "\.$SESSION_NAME"; then
    echo "サーバー:起動中"
else
    echo "サーバー:停止中"
fi
```
dsc_stop.sh
```
#!/bin/bash

# スクリーンセッションの名前を定義
SESSION_NAME="minecraft_server"

# スクリーンセッションが存在するか確認
if screen -list | grep -q "\.$SESSION_NAME"; then
    # サーバーを停止する
    screen -S $SESSION_NAME -p 0 -X stuff "stop$(printf \\r)"
    sleep 10  # 10秒待つ
    # スクリーンセッションを終了
    #screen -S $SESSION_NAME -X quit
    echo "サーバーが停止しました。"
else
    echo "サーバーは起動していません。"
fi
```



## ディスコードBOT作成
コマンドが来たとき、上で作成したshファイルを実行するようにBOTを動かしているpythonファイルを書き換えます。
作成まではここで解説されています。

https://qiita.com/1ntegrale9/items/9d570ef8175cf178468f

dir_pathにはshファイルがあるディレクトリのパスを記述してください
async def on_messageの中のif分岐を追加
```
import os
import subprocess

dir_path = "YOUR PATH" #shファイルのパスを記述

#メッセージ受信で起動する関数
@client.event
async def on_message(message):
  try:
  
    if message.content.startswith('!micra_run'):
      await message.channel.send('マイクラサーバー起動中・・・')
      # シェルスクリプトを実行し、標準出力を受け取る
      result = subprocess.run(f'cd {dir_path} && ./dsc_run.sh', shell=True, capture_output=True, text=True)
      await message.channel.send(result.stdout)
      
    if message.content.startswith('!micra_stop'):
      await message.channel.send('マイクラサーバー停止中・・・')
      result2 = subprocess.run(f'cd {dir_path} && ./dsc_stop.sh', shell=True, capture_output=True, text=True)
      await message.channel.send(result2.stdout)
      
    if message.content.startswith('!micra_status'):
      result3 = subprocess.run(f'cd {dir_path} && ./dsc_status.sh', shell=True, capture_output=True, text=True)
      await message.channel.send(result3.stdout)
```

今回はコマンドを!micra_runのようにしています。


### ディスコードからコマンド入力

ディスコードBOTを起動させて以下のコマンドを実行しました

![スクリーンショット 2024-04-01 033434.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3675164/09a47bc0-f0f7-c21c-739d-9dff1bd2d123.png)


## おわりに

クラウドが主流になりつつある現代で24時間PCを起動させてる人少ないと思いますが(僕はPCが余っていたのでローカルでやっています)、これでディスコード鯖にいる人なら誰でもマイクラを起動させることが出来るようになりました。友達とやるくらいなら使えるんじゃないかと思います。
【Mac】カーソルの「A」や「あ」を非表示にする方法【Sonoma】

## はじめに

Somomaでは、キーボードの言語を切り替えた際に現在の入力言語を示すインジケータがテキストカーソルに表示されます。

![スクリーンショット 2024-04-01 2.04.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/d252db1d-890c-bfad-8945-1fd66fa097b7.png)

このインジケータを非表示にする方法について記載します。

## 非表示にする方法

ターミナルで以下のコマンドを実行します。

```terminal
defaults write kCFPreferencesAnyApplication TSMLanguageIndicatorEnabled 0
```

コマンドを実行した際に起動されていたアプリケーションではまだインジケータが表示されます。

![スクリーンショット 2024-04-01 2.01.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/048b42ee-61a8-a84d-88bc-d4bdb500e3b7.png)

アプリケーションを再起動するとインジケータが表示されなくなります。

:::note warn
Caps Lockがオンになっている時にはインジケータが表示されます。
:::

## 再表示したい場合

再表示する場合には以下のコマンドを実行します。

```terminal
defaults write kCFPreferencesAnyApplication TSMLanguageIndicatorEnabled 1
```

## 参考

https://www.alfredforum.com/topic/21080-alfred-doesnt-show-the-text-cursor-in-macos-sonoma-if-the-redesigned-text-cursor-is-disabled/#comment-109517
Viteで作成したReactアプリのファイルのサイズを可視化する

# はじめに
パフォーマンスチューニング等を行う際に肥大化したファイルの特定と改善のため、
バンドル後のファイルのサイズを確認したい時があります。
本記事では **rollup-plugin-visualizer** を使用し、Viteで作成したReactアプリのバンドル後のファイルサイズを確認します。


**・rollup-plugin-visualizer**

https://github.com/btd/rollup-plugin-visualizer


# 環境
- vite：5.2
- React：18.2
- rollup-plugin-visualizer：5.12



# インストール

インストールの方法はドキュメントに記載されています。
npmとyarnしか記載されていませんでしたがpnpmでもインストールできました。

```terminal
npm install --save-dev rollup-plugin-visualizer
```

・ドキュメント：https://github.com/btd/rollup-plugin-visualizer#installation


# ViteConfigの設定
`rollup-plugin-visualizer`をインストール後に`config`ファイルに設定を追記します。
今回はビルド時に、バンドル後ファイルのステータスが記載されている`bundledFileStatus.html`を出力します。

```ts:vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
// インポート文を追加
import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
  plugins: [
    react(),
    // 設定を追加
    visualizer({ 
      // ビルド後に出力されるファイル名
      filename: 'bundledFileStatus.html',
      // ビルド後に出力されるファイルを自動で開くかどうか
      open: true ,
      // テンプレートの種類
      template:'treemap',
    }),
  ],
})

```

今回はテンプレートの種類を`'treemap'`としていますが、そのほかにも`'sunburst'`, `'network'`, `'raw-data'`等があります。

詳細はドキュメントに記載されています。

https://github.com/btd/rollup-plugin-visualizer?tab=readme-ov-file#options


# フォルダ構造
本記事にて使用したサンプルのフォルダ構造は以下の通りです。
Reactで簡単なページを1つ作成しています。

### ◆フォルダツリー
```
root
│
└src
　│  App.tsx
　│  main.tsx
　│
　└─components
　    ├─AricleContainer
　    │      └AricleContainer.tsx
　    │        ～～
　    │
　    ├─footer
　    │      └Footer.tsx
　    │        ～～
　    │
　    ├─header
　    │      └header.tsx
　    │        ～～
　    │
　    └─MainContainer
　            └MainContainer.tsx
　             ～～
```

参考までに、上記のフォルダ構造で作成したページをブラウザで確認しておきます。
ブラウザで確認したものは以下の通りです。
今回はassets等も使っておらず、ファイルサイズもかなり小さくなると思われます。

### ◆ npm run dev で立ち上げた際のブラウザ画面

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/9dce8b46-760f-be56-a735-bae0f6f8f236.png)


# ビルド実行
ビルドを実行すると、`bundledFileStatus.html`が出力されます。
ブラウザから`src`配下のフォルダを確認します。
一番上がrootで一番下が各tsxファイルとなっており、本記事のプロジェクトのフォルダツリー構造が見てとれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/ab3bf40f-ec38-3ca0-7bae-19fb41aee560.png)


`src`配下では`App.tsx`が最も大きな四角形であり、ファイルサイズが一番大きくなっています。
カーソルを各ファイルの上に乗せると、それぞれファイルサイズが確認できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/ed3438db-ec9d-ecc6-0cf3-753c182d38fb.png)

# 終わりに
今回は簡単なサンプルで`rollup-plugin-visualizer`を使用し、バンドル後のファイルサイズを確認しました。
複数のライブラリや重たくなりそうな<canavs>要素を取り入れたファイルを作成して、
再度ファイルサイズを見てみると、また見え方が変わってくると思うので時間があれば確認したいと思います。
Tclでバイナリデータ入出力する時の留意点

Tclではファイル入出力、シリアル通信、ソケット通信でバイナリデータの読み書きができますが、fconfigureの-translationオプション等をちゃんと理解しておかないと、訳が分からない挙動に見えることがあります。

## Tclでバイナリデータ入出力する時の留意点
- チャンネルをfconfigureで-encoding binaryと-translation binaryに設定する。
- バイナリデータの書き出しにはputs -nonewlineを使う。
- バイナリデータの読み込みにはreadを使う。
- 通信の場合はfconfigureで-blocking 0も設定する。

## -encoding binary
バイナリデータ入出力に注目した場合は、入出力するバイナリデータを改竄してしまわないようにするための設定になります。

## -translation binary
バイナリデータ入出力に注目した場合は、入力するバイナリデータに含まれる0x0Aという値のバイトを削除してしまなないようにするための設定になります。

## puts -nonewline
putsは文字列に改行を付加してチャンネルに出力するコマンドです。

私は-translation binaryとしてputsを実行すると改行が付加されないと誤解していてハマりました。

Tclインタプリタ内では改行コードは\n(LF 0x0a)ですが、-translation binaryはTclインタプリタ内の改行コードをそのまま使うという意味で、従って-translation lfと同じ意味になるため、-nonewlineオプションを付けずにputsで出力すると0x0aが追加されてしまいます。

要するにputsにおける-translationは「何を追加するか」という指定であって、何も追加したくないならputs -nonewlineで出力しなければならないのでした。

逆に言うと、-translation設定が何であれ、puts -nonewlineを使えばバイナリデータを出力できるので、-translation binaryはバイナリデータ出力には関係無いということになります。

## read
Tclの入力コマンドには
- gets
- read

の2つがありますが、バイナリデータ入力にgetsは使えません。

私は-translation binaryとしてgetsを実行すると改行コードも含めて入力されると誤解していてハマりました。

Tclインタプリタ内では改行コードは\n(LF 0x0a)ですが、-translation binaryはTclインタプリタ内の改行コードをそのまま使うという意味で、従って-translation lfと同じ意味になるため、getsで入力すると0x0aという値のバイトが削除され、そのバイト以前のデータだけが取得されます。

要するにgetsにおける-translationは「何を削除して入力を中断するか」という指定であって、何も削除したくないならgetsは使えないのでした。

一方、readですが、私はreadはまるっと全部手を加えずに読むコマンドで-translationは-nonewlineで削除する一番最後についている改行コードの指定だろうと誤解していました。

ハマったというほどの被害がなかったのは、バイナリデータを扱う場合は常に-translation binaryを設定していたからですが、しかしそれは以下の挙動を理解してそうしていたわけではありませんでした。

readはまるっと全部手を加えずに読んでいるわけではありませんでした。

Tclインタプリタ内では改行コードは\n(LF 0x0a)ですが、readは読み込み結果を\nでsplitすれば-translation binaryのgetsを繰り返し実行した時のように1行づつ取り出せるように、-translation設定に応じてすべての改行コードを変換してしまうのでした。

-trasnlation設定のうちauto、cr、crlfではCR(0x0d)やCR(0x0d)/LF(0x0a)をLF(0x0a)に置換してしまうため、バイナリデータ入力でこれをやってしまうと0x0dという値のバイトが削除されてしまいます。lfやbinaryでは後でlfでsplitできるようlfのまま残すため、実質的に無変換で入力することになるのでした。

## -blocking 0
readはファイル末尾まで読み込もうとするため、相手側がチャンネルを閉じずにバイナリデータ送受信が継続するような通信の場合、-blocking 1でreadを実行するとフリーズしてしまいます。

-blocking 0でreadして、取り敢えず既に届いているデータを全部取得して変数にappendしておいて、パケット末尾まで受信できているかどうかは別途受信データを解析して判断しなければなりません。

## 所感
-translationがputs、gets、readにどのように作用するのかは、Tclインタプリタは入力された文字コードや改行コードのまま処理しているのではなく、内部表現用の文字コードや改行コードになるよう入力時に変換して取り込み、内部表現から外用に変換して出力している、と明確に意識できるようになるまで不可解で、処理系のバグすら疑ってしまいました。
Javaで、ディレクトリの一覧を取得。拡張子はproperties。List<String>に結果を格納したい

```java
import java.io.File;
import java.net.URL;
import java.util.ArrayList;
import java.util.List;

public class PropertiesFileList {

    public static void main(String[] args) {
        // クラスパスを基準としたディレクトリのパス
        String directoryPath = "/directory"; // ディレクトリが直下にある場合

        // クラスローダーを使用してリソースを取得
        ClassLoader classLoader = PropertiesFileList.class.getClassLoader();
        URL resource = classLoader.getResource(directoryPath);

        if (resource != null) {
            // try-with-resourcesを使用してファイルリソースを自動的にクローズ
            try (var directoryStream = new File(resource.getFile()).listFiles()) {
                // 結果を格納するリスト
                List<String> propertiesFiles = new ArrayList<>();

                // ファイル一覧を走査して拡張子が.propertiesのファイルを抽出
                if (directoryStream != null) {
                    for (File file : directoryStream) {
                        if (file.isFile() && file.getName().endsWith(".properties")) {
                            propertiesFiles.add(file.getName());
                        }
                    }
                }

                // 結果を出力
                for (String fileName : propertiesFiles) {
                    System.out.println(fileName);
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
        } else {
            System.out.println("ディレクトリが見つかりませんでした。");
        }
    }
}
```
【git stash】変更内容を別のブランチに移動する方法

あるブランチで作業中に、commit前の変更内容を別のブランチに移動する方法をまとめます。

## 変更の退避
```
$ git stash -u
```

コミットしていない変更を対比し、ブランチ上に変更がない状態にします。
`-u`コマンドは新規作成ファイルも退避することができます。
通常、新規作成ファイルは追跡されていない状態のため、`-u`コマンドを使用する必要があります。

## ブランチの移動
使用していたブランチから、新しく変更を適応したいブランチに移動します。
状況に応じて、新規作成と既存ブランチへの移動を使い分けてください
### 新しくブランチを作成
ここでは、新しくブランチを作成していきます。
```
git swich main
```
ここでmainを最新に更新
```
git pull origin main
```
新規ブランチの作成
```
git switch -c <新しいブランチ名>
```
例えば`feature/new-branch`という新しいブランチを作成する場合は
```
git switch -c feature/new-branch
```

### 既存ブランチへの移動

すでにブランチが存在する場合は、そのブランチに移動します。
```
git swich <ブランチ名>
```

## 移動した変更の適応
```
git stash pop
```

このコマンドでstashされた変更がすべてブランチに適応されます。


## 変更のpush
これ以降は、通常のpush作業を行います。

```
git add -A
```
`-A`コマンドは、除外設定されているファイル以外のすべての変更をaddします。

```
git commit -m "コミットメッセージ"
```
""の間にメッセージを追加し、コミット。
`-m`コマンドはメッセージ追加コマンド。
```
git push -u origin 新しいブランチ名
```
`-u`コマンドは、ローカルブランチとリモートブランチを連結させます。
これ以降、ローカルからpushやpullを行う際に、ブランチ名を入力する必要がなく、`git push``git pull`の入力だけでよくなります。
GitでPRから特定のコミットを排除する

# 初めに
PRを作るときに前回のタスクのコミットを引き継いでたりとか、rebaseの時に間違ったりとかして不要なコミットが紛れ込んでしまうことがあります。
今回はそれを解決する方法です。

## GitでPRから特定のコミットを排除する方法

### 1. rebase
ローカルブランチ実行
`10`の部分は削除したいコミットの1つ前までの数字（`HEAD~10`の部分はコミット番号でもいける）
```terminal
$ git rebase -i HEAD~10
```
### 2. 削除
エディタが開くと思うので削除したいコミットの`pick`を`drop`に変更
`:wq`で保存してエディタを抜ける

### 3. push
最後にpushする
```terminal
$ git push -f origin {ブランチ名}
```
IBM Cloud Container Registerを少し触ってみた



## IBM Cloud CLI インストール

最初から何もないので、まずインストール
```bash
curl -fsSL https://clis.cloud.ibm.com/install/osx | sh
```

ログイン
```bash
ibmcloud login --sso
```

プラグインの一覧表示
```bash
ibmcloud plugin repo-plugins
```

コンテナーレジストリー（cr）プラグインをインストール
```bash
ibmcloud plugin install cr
```

## コンテナー作成

グループを作成
```bash
ibmcloud resource group-create ignacio-group
```

ネームスペースを作成（且つ グループに紐付け）
>Namespaces are created in a specified resource group to configure resource access at that level. If no resource group is specified or targeted, the default resource group is used
```bash
ibmcloud cr namespace-add -g ignacio-group ignacio-namespace
```


ネームスペースの一覧表示
```bash
ibmcloud cr namespace-list
```

ちなみに、ネームスペースの削除
> Important: When a namespace is removed, any images stored in that namespace are deleted permanently, and the action cannot be undone.
```bash
ibmcloud cr namespace-rm <my_namespace>
```

### ローカルのイメージを作成

Dockerではなく、以下はpodmanを利用

Podman Desktopを初回起動
```bash
podman machine init
podman machine start
```

Dockerfileを作成

```docker: Dockerfile
# Use Alpine Linux as the base image
FROM alpine:latest

# Install basic packages (optional)
RUN apk add --no-cache bash

# Set the default command
CMD ["/bin/bash"]
```
現在のフォルダーにあるDockerfileをmy-basic-linuxという名前でビルド

```bash
podman build -t my-basic-linux .
```

## イメージをIBM Cloudのレジストリーにアップロード

地域毎のホストネームが異なるため、今のレジストリードメインを調べる
```bash
ibmcloud cr region
```
> You are targeting region 'ap-north', the registry is '**jp.icr.io**'.

アップロード

まずタグを作る: `podman tag <local-image-name> <registry-domain>/<namespace>/<image-name>:<tag>` それで、プッシュ `podman push <registry-domain>/<namespace>/<image-name>:<tag>`. しかし、podmanからプッシュするために （podmanから）ibmcloudへログインしている必要がる。そのため、ログインコマンドをプッシュの直前に行う

```bash
podman tag my-basic-linux jp.icr.io/ignacio-namespace/my-basic-linux:1.0
```

```
ibmcloud cr login --client podman
```

```
podman push jp.icr.io/ignacio-namespace/my-basic-linux:1.0
```

できた！

## 確認

イメージリストを取得し、上記アップロードしたものが存在することを確認する。
```
ibmcloud cr image-list
```
> | Repository                                   |Tag  | Digest |        Namespace      > |     Created  |      Size |    Security status|
> |---|---|---|---|---|---|---|
> | `jp.icr.io/ignacio-namespace/my-basic-linux` | `1.0` | 6094d4a3ebfe | ignacio-namespace | 23 hours ago | 4.3 MB |  - |


## Vulnerability Assesmentを利用してみる

特定なイメージに対してアセスメントを実行。`cr`コマンドの中で`va`サブコマンドを利用

```
ibmcloud cr va jp.icr.io/ignacio-namespace/my-basic-linux:1.0

```

> Checking security issues for 'jp.icr.io/ignacio-namespace/my-basic-linux:1.0'...
>
> Image 'jp.icr.io/ignacio-namespace/my-basic-linux:1.0' was last scanned on Mon Apr  1 13:51:09 UTC 2024
> The scan results show that NO ISSUES were found for the image.
>
> OK

## 公式ドキュメント


- [cloud.ibm.com - Registry getting started](https://cloud.ibm.com/docs/Registry?topic=Registry-getting-started#gs_registry_images_pushing)
- [cloud.ibm.com - Registry tutorial](https://cloud.ibm.com/docs/Registry?topic=Registry-registry_tutorial_workflow)
OneNoteからObsidianへ移行した話

# はじめに
こんにちは！なっしーです！
今回は私が普段使っているノートツールの話をしようと思います。

# これまでのノートツールの使い方とOneNote
大学時代に紙のノートをやめ、OneNoteで板書を取るようになりました。
理由としては、
- ほとんどの授業は基本的にPC持ち込みOKだったこと
- 毎日PCと教科書とノートを持っていくのはちょっと重すぎたこと
- PCさえ持ってくれば忘れ物をしても割と何とかなる環境が欲しかったこと
- 字を書く速度の遅さとそもそもの字の汚さ
- 使用していたPCがSurfaceで、ペンを持っていたこと ※1

といった感じで、諸々全部解決できるのがOneNoteだったので使用していました。

文字をキーボード入力でき、手書きでもササッと書けるところが魅力的に感じていました。

# なぜObsidianに移行したか
OneNoteに満足してしばらくは使っていましたが、以下の問題点にぶつかりました。
- PCで取ったノートをスマホで確認はできたが、通信制限中は閲覧に時間がかかりすぎたこと（というか、そもそも動作が重い？）
- MSアカウントが大学でもらったライセンスだったので、卒業後のデータの管理周りが面倒くさそうだったこと

そもそもOneNoteでできることは他のノートツールでも実現可能な場合が多いので、OneNoteの管理が面倒くさくなった私は移行を決意しました。

Obsidianを選んだ理由としては、
- マークダウンが利用可能だったこと
- ローカルで管理が可能だったこと
- 必要な機能だけプラグインを入れれば良いこと
- グラフビューが面白かったこと
- デイリーメモが手軽に書けること

があります。
Notionも考えはしましたが、多機能さよりシンプルさを求めていたのでObsidianを選択しました。

# 勉強環境にどう影響があったか
この移行を行ってから、以下の変化がありました。
- デイリーノートに日々読んでいるニュースや記事を書きとめるようになったこと
（それまでは記事は読んで終わりだった）
- 勉強内容によってタグ付けを行えるので読み返すのが楽になったこと ※2
- PCでもスマホでもノートをサクサク読めるようになったこと

勉強の面倒くささが軽減され、かなり良かったなと思っています。

# 入れているプラグインと同期方法
コアプラグインはデフォルトのまま、コミュニティプラグインだけ入れています。
- Auto Card Link（デイリーノートでの記事の書きとめのため）
- Excalidraw（手書き機能）

PCとスマホのデータ同期にはGoogleドライブとFolder Sync（スマホアプリ）を使用しています。
gitのプラグインはスマホ版が上手く動かせなかったので断念しました。

ファイルの削除周りが面倒くさい同期方法ではありますが、基本的にファイルを削除するようなことをしていないので、現状で満足しています。

# 現在の勉強方法
主に日々読んだ記事のブックマーク的な使い方をしてしまっていますが、本腰を入れて勉強するときはXPPenの液タブ（2万円）と共にObsidianを使っています。

いろいろな勉強方法を試しましたが、結局手書きで繰り返し書く方法が一番効率良かったので、モニターに教科書や問題集、液タブにObsidianという環境で勉強をしています。
1年で資格を6個取得できる程度の効率は…あるんじゃないですかね…？（実体験）

# おわりに
今回はObsidianへの移行の話をさせていただきました！
勉強方法の参考になれば幸いです！

---
※1　SurfaceはSurfaceでもlaptopだったので、机に画面を押し当てトラックパッド部分に顎を引っかけた異様な姿勢で授業を受けていました。キーボード入力の時はPCの向き（？）を元に戻してました。その後コロナ禍に差し掛かり、家で暇つぶしの趣味で無理をさせた結果Surfaceはお亡くなりになりました。南無。ペンは弟に譲りました。

※2　OneNoteでもタグ付けは可能ですがカスタムタグは定義が必要なので面倒で使ってませんでした。ハッシュタグの手軽さが欲しかったんです。
cloneしたリポジトリが要求するRubyバージョンが新しい時のアップグレード手順

# この記事を読んでほしい人

- rails6から7へのバージョンアップがうまくいかない人
Rubyのインストール時に`make: *** [build-ext] Error 2`のようなビルドエラーが出て、進めなくなっている人です。

- macOSで開発環境を構築している人
新しいプロジェクトを始める際や、職場や個人のプロジェクトで特定のRubyバージョンを必要としていて、それに合わせて環境をセットアップしようとしている人です。

# Ruby 3.2.0のインストールに失敗した時の対処法

Rubyの新しいバージョンのインストールは通常簡単ですが、たまに予期せぬエラーに直面することがあります。この記事では、`rbenv` を使用して Ruby 3.2.0 をインストールしようとした時に発生した問題と、その解決法について詳しく共有します。

## 問題の説明

`rbenv`を使用してRuby 3.2.0をインストールしようとすると、`make: *** [build-ext] Error 2`というエラーが発生し、インストールが失敗しました。
```
rbenv install 3.2.0
```
エラーの完全なメッセージは以下の通りです。
```
BUILD FAILED (macOS 14.3.1 using ruby-build 20230512)
...
make: *** [build-ext] Error 2
```
## 解決策

エラーメッセージの内容と自分で行った調査に基づき、以下のステップで問題を解決しました。

### 1. Homebrewの更新

```bash
brew update
brew upgrade
```

### 2. rbenvとruby-buildの更新
```
brew upgrade rbenv ruby-build
```

### 3. Rubyのインストールの再試行
依存ライブラリがすでにインストール済みであるため、再度Rubyのインストールコマンドを実行しました。
```
rbenv install 3.2.0
```
これでOKです。どうやら最初の試みでは何らかの一時的な問題があったようです。
### 4. 新しいRubyバージョンの設定
最後に、新しくインストールしたRubyバージョンをプロジェクトのローカルバージョンとして設定して終了。
```
rbenv local 3.2.0
```
WindowsにElixirを導入する

初めまして。Nyayutaと申します。
この春から高専に入学します
X(旧Twitter)を見てると、Elixirを導入するのに失敗している方が所々見受けられます。
実際、私も導入に苦戦しました。
そこで、私が成功したやり方を書きます。
これが合っているかはわからないので、間違えていれば指摘くださると幸いです。
# ①導入する
まずはElixirのサイトにアクセスします。
この時、**日本語版のサイトにアクセスしてしまうとエラーを吐く** ので、英語のサイトにします。
[このサイト](https://elixir-lang.org/install.html)にアクセス。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3720839/13538152-f7c0-02f3-91cd-489f4e38e478.png">
このような画面が出ます。
では、今回は1.4のwindowsを選択。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3720839/8c65bdfe-b400-243a-c453-3e43f98c3c59.png">
この画面に飛んだら、まずはErlangをダウンロードします。
`Download and run the Erlang installer`を選択。
この時、新しいタブで開いておきます。
<img width="500 src=""https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3720839/05839c5c-9317-d636-5214-1f97a4bf7e49.png">
Erlangのサイトに飛べたら、基本は最新のものを選んでOK。
今回だとErlang 26.2 3ですね。
`Dawnload Windows installer`を選択し、対応したbitのものをインストール。
インストーラーを実行してください。特に設定をいじる必要はありません。
インストールが終了したら、タブを閉じて、Elixirのページに戻ります。
そうしたら、**先ほどダウンロードしたErlangと対応したものをダウンロード**します。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3720839/6f0c56e5-08c2-a513-93bf-ec45e8031d54.png">
ダウンロードしたら、インストーラーを実行。これも設定を変える必要はありません
これで、おそらくダウンロードできているはずです。
# ②確かめる
では、インストールできているか確かめましょう。
コマンドプロンプトを起動。
起動出来たら、`iex`と入力します。
成功したら、ファイル名が書かれているところに`iex(1)>`と出るはずです。
# ③触ってみる
せっかくなので少し触ってみます。
まずはHello Worldしてみます。
`IO.puts("Hello, World!")`
すると以下のような表記になるはずです。
<img width=500 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3720839/5d9e8a26-2db4-10a7-4132-d58065507cc9.png">
これはpythonでいうprintコマンドです。
では、終了しましょう。
`ctrl+c`を2回入力してください。
バッチジョブを終了するか聞かれるので、その時に適した終わらせ方をします。
# ④Livebook
Elixirを使うときに使えるアプリケーションがLivebookです。
これは、Elixir開発者であるJosé　Valim氏が所属しているDashbit社が開発しているアプリケーションで、Elixirにも対応しています。
せっかくなのでこれも入れてみます。
[Livebookのサイト](https://livebook.dev/)にアクセス
<img width=500 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3720839/ec360d25-8462-a7e7-f45f-fd7e0ae994f4.png">
`install Livebook`を選択。
<img width=500 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3720839/332f6bc3-da2d-7085-8c47-8599ac0ae756.png">
`Run on your machine`のwindowsを選択。
インストーラーを実行。
インストールできたら起動してみましょう。
<img width=500 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3720839/8747c1dc-cc2a-2963-7d3d-8adfe3d26ef2.png">
この画面が出たら成功です。
# ⑤最後に
拙い文章ですが、読んでくださりありがとうございました。
まだまだ私もElixirを勉強中ですので、温かい目で見ていてくださると幸いです。
AIコード補完拡張機能 Codeium を触ってみる

https://codeium.com/

> A free AI powered toolkit for developers
# コード保管機能
グレーの文字が補完部分。tabを押すと補完が適用される。
![スクリーンショット 2024-03-31 23.56.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603181/1813af79-28b5-5768-d7d6-09c5ee26a059.png)

# Refactor 機能
Refactor コマンドを押すと
色々選択できるようになっている。
![スクリーンショット 2024-03-31 23.46.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603181/2645721b-8fd4-b9f1-686b-530719460bff.png)

### 気になったのを使ってみる。
#### make this faster and more efficient
自動でリファクタリングしてくれる。
![スクリーンショット 2024-03-31 23.57.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603181/75c8a8fe-db1b-881f-94d6-bdbf684d141c.png)

#### generate unit tests
utを生成してくれる。
![スクリーンショット 2024-04-01 0.00.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603181/4bb791d1-7f54-089c-d6b0-bec6847cfba1.png)
テスト内容を見て、
start greater than end の結果が納得いかないな。
と思ったのでchat機能を使って修正してもらう！
# chat機能
#### コード修正を依頼
修正案を提示してくれる。
![スクリーンショット 2024-04-01 0.04.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603181/0afe11d0-6e6c-9bd1-0adf-5a4f4625f90d.png)

#### コードの説明を求める
ちょっとコード量多いreact component に対して説明を求めたが簡潔に回答してくれた。
![スクリーンショット 2024-03-31 23.38.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603181/98a054e1-79be-ac53-f970-edfb8b650e83.png)
完全未経験が入社前に知っておきたかった事３選（勉強しとけばよかったこと）


アラサー地方住高卒フリーターは、とても運よくエンジニアとしてアルバイト採用され、１か月が終了した。振り返りをするとともに自分の例を紹介しながらこれからエンジニアになりたい完全未経験の初心者の参考になれば幸いである。

## 簡単に自己紹介
高校卒業後、いくつかのアルバイトを転々としながらどうにか生きながらえてきた。３０歳が近づくにつれ焦りを覚え、エンジニアになりたいと考えようやく重たい腰を上げる。

### 採用された時の状況（採用された理由の推測）
基本情報を合格しその後いくつかの会社から祈られているなか採用される。バイトを月２００時間こなしながら学習を続けているという意欲を買われたのではと推測。

プログラミングに関してはProgateとpaiza(Bランク)をやっていたくらい。言語はPython一本でした。

実際実務に入るとこれまでやってきた勉強は全然お粗末なものであったとわかるが、その中でも特にこれやっとくべきだったとか、これ知ってたらもっと業務はかどっていたとかこの後上げていく項目を３つ紹介しますがこれを見て「お前そんなレベルでよく入れたな」と思うかもしれませんが温かい目で見てやってください。
## 変数や関数の名前
paizaの問題を解くとき変数や関数の命名をaとかsなど適当に名前を付けていたツケが回ってきました。
コードを人に見られるという経験がないので、本当にこの名前でいいかとか今まで一度も考えたことがなかったことで特に最初困りました。
```html:具体的には
1文字だけの適当な名前
m = "ok"
a = 11

日本語で命名
goukei = a + s
```
独学中はこんな感じでやってたので変数の名前考えるのがこんなに大変だったとは！？
先輩から勉強になる記事をもらったのですが特に前半自分に刺さりまくった。

https://qiita.com/ouauai/items/d38eeef9f0af5a4a87da

４と10のことですね。
あとキャメルケースとスネークケースの使いわけとか。

https://qiita.com/am_nimitz3/items/7b01af53751dba5d8fb1

## Git
独学オンリーでやっている人は特に気にしたほうがいいです。
「今やってもよくわからんし入社してから実戦で覚えればいいや」と考えていた私はGitの初歩的な操作で半日潰れてしまいました。一応専用のマニュアルをもらって操作していきますがまあ時間がかかるはかかる。実際にVSコードで自分が作ったファイルをGitで管理して慣れていればもっとスムーズにできていただろうなと反省。

https://qiita.com/gold-kou/items/7f6a3b46e2781b0dd4a0
## Javascript
自分は今までの職場で「こういうの自動化したいな」という気持ちがあり、Pythonを主として学習していました。
入社する際にメインの言語はTypescriptを扱っていくとのことでその前段階のJavascriptから触っていくと話を聞いて、ちょこっとProgateでレベル上げをしていましたが実際業務に入ると何も勉強していないに等しいくらいのひどいレベルでできなかった。「くえりーせれくたぁ」「げっとばいあいでー」何？なんか違うの？とか胃が痛かった。
別にJSやらないよって人も今見ているウエブサイトの内容をコードで理解できるくらいにはないとかなりしんどいと思う。実際しんどかったしまだしんどい。
getElements,querrySelecter,forEach,eventListennerあたりは使いこなすレベルにいたかった。

## 最後に
もし今も独学で孤独に学習を続けていたらきっとだらだらと時間が過ぎていただけだろう。
独学でだらだら学習を続けていた人が苦労した、苦労している話は以上となりますがまだまだやれることはあると思うしやっていきたいです。自分はLINEやってない系友達皆無の孤独人間なので一緒に頑張る目標を持つ仲間が欲しくてこうして記事として残しました。孤独に頑張る方への励みになれればと思います。
EC2上でアタッチされているIAMロールをaws-cliの名前付きプロファイルで利用できるように設定する

EC2にIAMロールをアタッチした場合、OS上にアクセスキーやシークレットキーを登録する必要なくEC2上でIAMロールに設定した権限を利用できるようになります。

このようなインスタンス上でスクリプトを動かうような場合、profileを指定せずに記述したりできますが。

EC2にアタッチしている認証情報を元にプロファイル名をつけて利用できる方法があるのでメモ。

## ドキュメント

[Amazon EC2 インスタンスメタデータの認証情報を使用する](https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/cli-configure-metadata.html#cli-configure-metadata-configure)

## ~/.aws/credentials

aws-cliで利用するcredentialsファイルへ下記のように設定すればEC2にアタッチされた認証情報を元にプロファイル名をつける事ができます

```text
[profile profilename]
credential_source = Ec2InstanceMetadata
region = region
```

`credential_source = Ec2InstanceMetadata`と設定する事で、プロファイル名を付ける事ができます。

ドキュメントではEC2にアタッチされている認証情報を元に、role_arnを指定して`arn:aws:iam::123456789012:role/rolename`へスイッチする記述がされています。

```text
[profile profilename]
role_arn = arn:aws:iam::123456789012:role/rolename
credential_source = Ec2InstanceMetadata
region = region
```

## 総評

たまにEC2にアタッチした情報を指定するのに何を書けばいいのか忘れては調べ直している事があったので、`Ec2InstanceMetadata`を使えばよいとメモ。
vue.jsを使って52週貯金チャレンジ用のSPAを作ってみた

:::note warn
注意
**vue.js**を使ってみた感想記事なので技術的な部分にはあまり触れません。
:::

**vue.js**を学ぶ一環で何かSPAを作りたいな～と思い立ち、自課題として「**52週貯金チャレンジ**」の日本語版を作ってみました。vue.jsで作る前にネイティブJSでも作成したので、その違いを比較してみました。

そんな訳で今回作成したSPAがこちら。

https://vue3-app-calculator-52week.vercel.app/

## 作成の経緯と「52週貯金チャレンジ」とは
以下ライフハッカーより引用。
> やり方はとても簡単。毎週、貯金する額を少しずつ増やしていき、1年間の貯金額の成長を見守るだけです。

https://www.lifehacker.jp/article/227579save-money-with-the-52-week-money-challenge/

簡単に言うと少額の積立貯金です。
調べた限りスタートからゴールまでの金額を算出できるサイトが外貨換算のみ（見た感じドルがほとんど）で円換算のサイトが無く、それなら作ろう！と思った次第です。

## 実装要件
今回のSPAに実装した機能はこんな感じ。
### メイン要件
* 週毎の金額の算出
* 貯金する週の日付の出力
* 最初の週から最終週までの金額の合計
* 金額入力欄のバリデート
（全角・数字以外入力、未入力からのフォーカスアウトでエラー表示）
* 正しく入力されたらエラー非表示
* 三桁以上の金額はカンマ区切り
### そのほか
* 52週貯金を説明する為のモーダル実装
* スタイルはtailwindを使用

## ネイティブJSで作ってみる
vue.jsを使用するのが初めてだったのでまず素のJavaScriptで作って実装のイメージを固めました。

計算と出力の役割を持つ要素をそれぞれ指定して、それらに実装要件の処理を書いていく～というまぁ通常の実装ですね。

## vue.jsで作成する際気を付けた事
vue.jsはJavaScriptライブラリです。
ネイティブJSで書いてる時と違い、当然**ライブラリ独自の作法**というものがあって、これに則って書かないとこれまた当然意味が無い。
なのでネイティブJSで書いた処理をvueが持つ機能と照らし合わせてどう書き換えるかを意識しながら作成に取り組みました。

## vue.jsとネイティブJSの違い
素のJavaScriptである程度組んだ後に改めてvue.jsで組んでみて最初に思ったのは「**めっちゃ便利じゃん！**」という事。

まずネイティブJSだと**①計算と出力の役割を持つ要素の指定、②イベントを指定した上で処理を書く。**（DOM取得とイベントリスナー）

しかしvue.js（React.jsなども）だとこの二つの工程が省略できる。
実行したい処理を書いて、vueの作法に則て書いていけばアラ不思議！でした。

**jQueryが手間の簡易化ならvueやReactはそれすらも無くせられるといった感じです。**

ただ逆に言うと、、、というか当然ですが**①②**の工程を省略するためにはvueの公式ドキュメントやリファレンスを読み解いていかないとせっかくの便利な機能を活かした制作ができない。
前提知識（JavaScriptに対する理解）と、それ以上にドキュメントを読み進める力（ある意味勇気）が無いと難しいなあといった感じです。


## 終わりに
技術的なところを大分端折ってしまいましたが、通常のコーディングとライブラリ（フレームワーク）を使用した場合とでどう違うか、またメリットデメリットについて参考になれば幸いです。

最後にもう一度、今回作成したSPAを紹介↓

https://vue3-app-calculator-52week.vercel.app/

## 2024年4月4日追記
金額を入力する欄に数字以外が入力、計算出来てしまうバグを修正いたしました。
他、スマホでアクセス時にキーボードが数字入力になるようにも調整。
@mogamoga1337 様ご連絡ありがとうございました :bow_tone1:
銀の弾丸がついに見つかりました！

## ついに銀の弾丸が発見されました！

<p class="codepen" data-height="500" data-slug-hash="dyLzzYV" data-editable="true" data-user="mu-tomoya" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/mu-tomoya/pen/dyLzzYV">
  銀の弾丸</a> (<a href="https://codepen.io/mu-tomoya">@mu-tomoya</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

みなさん、いまのスクロールしてみましたか？ついに皆さんの探していた、銀の弾丸が見つかりました！いやあ、まさか銀の弾丸を自分が発見できるとは思いませんでした。こんなところに隠れていたとは。

思えば、[人月の神話](https://ja.wikipedia.org/wiki/%E4%BA%BA%E6%9C%88%E3%81%AE%E7%A5%9E%E8%A9%B1)からでした。「銀の弾丸などない」と言われてから、約50年、あらゆるエンジニアがずっと探し求めていました。銀の弾丸を見つけては否定されをずっと繰り返されてきて、「フレームワークは銀の弾丸ではない」「オブジェクト指向UIは銀の弾丸なのではないか」、挙げ具の果てには「仕事に銀の弾丸を求めるな」とまで言われてきました。私は、銀の弾丸など存在しないと誰かが言ったということは、その銀の弾丸が存在したことを知っているから、ないと言ったのではないかと思い、日夜寝る間も惜しみ銀の弾丸を探し求め続けました。

Qiitaでも、実に500以上の記事が銀の弾丸について言及していましたが、銀の弾丸そのものを見つけたという記事は一つも見つかりませんでした。みんなプログラミングの話ばかりしています。

それが、2024年4月1日、ついに銀の弾丸が発見されました！

ここからは、どうして私がこの銀の弾丸を発見できたのか、CSSの奥地へと向かってみたいと思います。ちなみに、この銀の弾丸はなんと、**JavaScriptを一切使っておりません**

## 解説

まず、この弾丸の形はどうやってできているのか、それは、四角の部分と楕円の部分に分かれています。
四角の部分を普通にclassで作り、そして先の楕円の部分を、擬似要素を使って丸めます。

そして、角を丸めます

```css
.silver-bullet {
  height: 60px;
  width: 180px;
  filter: drop-shadow(0 0 0.25rem #333);
  background: linear-gradient(1.3deg, #757575 0%, #9E9E9E 50%, #E8E8E8 70%, #9E9E9E 80%, #757575 90% 100%);
  ...
  &:after {
       ...
  background: linear-gradient(1.3deg, #757575 0%, #9E9E9E 50%, #E8E8E8 70%, #9E9E9E 80%, #757575 90% 100%);
       border-radius: 50% 50%;
  }
}
```

https://qiita.com/7note/items/6295807a451b6dbf2404

この記事を参考に、数値を微調整してbackgraoundを銀のグラデーションにしました。


次に、弾の溝を表現します。borderを使って、溝と、楕円と四角が重なる部分に線を引きます

```css
 &before {
    width: 158px;
    height: 58px;
    left: 20px;
    border-left: solid 1px #adb0bc;
    border-right: solid 1px #adb0bc;
}
```
こんな感じでうまいこと数値を調整します。

さらに、どうやってこの銀の弾丸が飛んでいるのか。

これは、CSSの新機能、スクロールドリブンアニメーションを使っています。（ただし、今現在はChrome系のブラウザでしか動きません）

これを使うと、スクロールにあわせてアニメーションを実行することができます。

```css
@keyframes  anim {
  from {
    margin-left:-100%;
  }
  to {
    margin-left:100%;
  }
}

.anim {
  animation: anim linear;
  animation-timeline: scroll();
}
```

最後に、スクロールが実行できるように、画面の高さを広げます。
```css
body {
  width: 100vw;
  height: 1000px;
}
```
以上が、私がどうやって銀の弾丸が発見できたのかの詳細でした。

## 最後に
この記事は、エイプリルフール企画です。プログラミングに銀の弾丸なんてありません。常に知識をアップデートしていきましょう。

## 参考

https://qiita.com/degudegu2510/items/a6faf04f07afdece9022

https://qiita.com/7note/items/6295807a451b6dbf2404