OmniAICreator/Qiita-1.07M huggingface dataset:
Marp for VSCodeで自作CSSテーマがうまく適用されない時に確認すべきこと

# はじめに
Marp for VSCodeで資料の見た目かっこよくした〜い！となったら、CSSでテーマを書いて設定するかと思うのですが、CSS別ファイルにして読み込ませる際思わぬトラップがあったのでまとめてみたいと思います。

# 前提：PC環境など
+ Mac OS 13.0
+ Visual Studio Code 1.84.2

# 確認すべきこと
## その１： 設定にCSSファイルへの相対パスを指定しているか
初回設定で引っかかりがちなのはこちら。
特定のフォルダにテーマおいて絶対パスで参照できたら便利だよね！と考えると思うのですが、Marp for VSCodeではテーマの読み込みに関して絶対パスをサポートしていません。

https://github.com/marp-team/marp-vscode/issues/110

相対パスで書きましょう。
私は設定に以下のように書いておいて、テンプレ保存しているフォルダ(~/Document/marp_themesとか)を作成したい資料入れているフォルダにどーんとコピーしてくるみたいな運用にしています。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594517/2702fd78-68b2-243c-a01f-8ac115527b22.png" width=50%>

## その２:「フォルダーを開く」で作業する場合、どのフォルダーを開いたか
これ最近引っかかってびっくりしました。
VSCodeでファイル>フォルダーを開くからmdファイルを開いて作業する際、開いたフォルダがVSCodeにとってのカレントディレクトリ的扱いになるので、開くフォルダを間違うと相対パスの参照先が思った位置になっていない場合があります。
言葉で書くととてもわかりづらい気がするので以下例です

### 前提
下のような場所にmdファイル、テーマのCSSファイルが保存されているとします
```
Document/
├── work/
│   └── marp_test/ 
│       └── test.md  <--- スライドにしたいmdファイル 
│       └── marp_themes/ 
│           └── test_theme.css  <--- 適用したいCSSテーマ
```

また、Markdown > Marp:Themesの設定で
`./marp_themes/test_theme.css`が設定されていることとします。

あまり重要じゃないので折りたたみますが、test_theme.cssは以下のようなものを用意しました。

<details>
<summary>test_theme.css</summary>

```css

/* @theme test */

@import 'default';

section.title h1 {
    font-size: 80px;
    font-family: '001Shirokuma', serif;
    justify-content: center;
}

section.slide {
    font-size: 24px;
    font-family: 'Hiragino Sans';
    justify-content: start;
}

section.slide h2{
    font-size: 40px;
    position: relative;
    top: -5%;
    margin-bottom: -30px;
}

section.slide h3{
    font-size: 28px;
    margin-left: 15px;
}

```

</details>

タイトルフォントは変化が見やすいようにしろくまフォントを使用しています。

https://www.lazypolarbear.com/entry/font-shirokuma

### テーマが適用できる場合
VSCodeのファイル>フォルダーを開くで`marp_test`フォルダを開きます
この場合相対パス`./marp_themes/test_theme.css`が示す先にちゃんとファイルがあるので、テーマが適用されてテーマで指定通りの体裁になったものがプレビューに表示されます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594517/417706b5-831d-e9fe-dad4-86213ce54f65.png" width=80%>

### テーマが適用されない場合
今度はVSCodeのファイル>フォルダーを開くで1つ上の`work`フォルダを開いてみます
CSSのテーマが適用されていないものがプレビューされます。
この場合の参照先は`/Document/work/marp_themes/test_theme.css`になっているので、テーマが読み込めないということです。

![スクリーンショット 2023-12-06 22.20.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594517/ee61a3cf-0bdd-8905-01cf-bf5c2561ca69.png)

### つまり...
うまくCSS読み込めてないなというときは、自分がどうやってmdファイルを開いたのかも見直してみてください。

## その３：その他拡張機能によって思っているのとは違うパスを参照していないか
以下記事が参考になりました

https://qiita.com/atw0_0w/items/ca0699010600db169b55

私はパスが変わってしまうような拡張機能いれていなかったので遭遇していないエラーですが、入れているものによってはさらに自分がどのパスを開いているのかを気にしなくてはいけないみたいです。

# おわりに
気にすべきことは以下3つです
1. Markdown > Marp:Themesの設定がCSSへの相対パスになっているか
1. 自分が今どこのフォルダを参照しているか
1. パス名が変わるような拡張機能を入れていないか


よりよいMarp for VSCodeライフを！
クライアントサイドのみでExcel出力

# 記事概要
クライアントサイドの処理のみで、事前に準備したTemplateであるExcelファイルの中身を更新・DLを実現する。


# 利用ライブラリ
- xlsx-populate
- FileSaver.js

# スクリプト
```html
<html lang="ja">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx-populate/1.21.0/xlsx-populate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="margin:100 auto;width:400px;">
        D4 => <input id="D4" type="text" value="test1"></input>
        <hr />
        D5 => <input id="D5" type="date" value="2023-05-29"></input>
        <hr />
        <button id="btn">
            EXCEL EXPORT
        </button>
    </div>
</body>
</html>

<script>
    // https://github.com/dtjohnson/xlsx-populate
    const exportExcel = (url, values) => {
        fetch(url)
            .then(response => response.arrayBuffer())
            .then(async buffer => {
                const workbook = await XlsxPopulate.fromDataAsync(buffer)
                values.map((v) => workbook.sheet(v.sheet).cell(v.cell).value(v.value))
                const wbout = await workbook.outputAsync()
                const blob = new Blob([wbout], { type: 'application/octet-stream' })
                const fileName = `test_${new Date().getTime()}.xlsx`
                saveAs(blob, fileName)
            })
    }

    document.querySelector('#btn').addEventListener('click', () => {
        const url = './test.xlsx'
        const values = [
            { sheet: 'Sheet1', cell: 'D4', value: document.querySelector('#D4').value },
            { sheet: 'Sheet1', cell: 'D5', value: document.querySelector('#D5').value }
        ]
        exportExcel(url, values)
    })
</script>
```

上記htmlを作成して、同じ階層に「test.xlsx」を作成しておく。
失業したエンジニアは資格試験に挑戦したほうがいい４つの理由

## はじめに
エンジニアで失業し、雇用保険（失業保険）を受給して就活をしたい人向けの情報です。

## 資格をとろう
失業中に資格を取りましょう。

### 理由その1：求職活動実績となる

雇用保険の受給が決まったら、4週間に1回、決められた認定日にハローワークに行きます。その際、前の認定日から次の認定日まで、「求職活動」を**2回**していなければなりません。（初回認定日は1回）ちゃんと就職する気があるよということを示さないと、雇用保険は貰えないのです。
この求職活動とは、応募、窓口相談、ハローワーク主催のセミナーや合同会社説明会などの他に、資格試験の受験も対象になります。
以下はハローワークのサイトからの引用です。

> 求職活動の範囲（主なもの）は、次のとおりであり、単なる、ハローワーク、新聞、インターネットなどでの求人情報の閲覧、単なる知人への紹介依頼だけでは、この求職活動の範囲には含まれません。
> 
> 1. 求人への応募
> 1. ハローワークが行う、職業相談、職業紹介等を受けたこと、各種講習、セミナーの受講など
> 1. 許可・届出のある民間機関（民間職業紹介機関、労働者派遣機関）が行う、職業相談、職業紹介等を受けたこと、1. 求職活動方法等を指導するセミナー等の受講など
> 1. 公的機関等（（独）高齢・障害・求職者雇用支援機構、地方自治体、求人情報提供会社、新聞社等）が実施する職業相談等を受けたこと、各種講習・セミナー、個別相談ができる企業説明会等の受講、参加など
> 1. 再就職に資する各種国家試験、検定等の資格試験の受験

https://www.hellowork.mhlw.go.jp/insurance/insurance_procedure.html

この5番にあるように、**再就職に役立つような資格試験の受験が求職活動となります**。

離職理由もいろいろで、就活に積極的になれない気分の人もいるでしょう。ならば、とりあえず資格を目指して勉強するのはいいと思います。

### 理由その2：履歴書に書ける
当たり前ですが履歴書に書ける項目が増えると就活に有利ですし、勉強して自分の価値を上げる努力しました！と、やる気とのびしろをアピールできます。

### 理由その3：やることがあると生活に張りが出る
無職になると、朝早く起きなくてもいいし、土日祝も関係ないので夜更かしもし放題。なにをするでもなく、だらだらとSNSに脳内を垂れ流してつい時間が過ぎてしまうことも。
しかし、資格試験の勉強をしなければ！と思うと、とりあえず「やらなきゃいけないことがある」ので、生活に張りが出ます。
わたしはなぜか無職なのに「一日ヒマ」と思ったことがありません。おかしい。（遊ぶ予定も詰め込んでいるからですが…）
しっかり頭を働かせて勉強するためには、食事もちゃんと摂って散歩などして程々に体も動かし、健康でいましょう。

### 理由その4：自己肯定感を保てる
失業中はネガティブになりがちです。自分がダメだからこんな状況に…と思ってしまうかもしれません。
でも、資格に挑戦して合格したら自己肯定感が爆上がりです。
「自分、がんばったよ！」というじんわりした嬉しさが、次の行動への原動力です。

### おわりに
こんなことを書きましたが、試験勉強というものは自己肯定感が下がり、もうダメなのでは…無理なのでは…と思うことも何度もあります。
**でも仕事しながら勉強するよりはずっと楽です。**
せっかくなのでこの期間を有意義に使いましょう。
一緒にがんばりましょう！
PMOってな～に？

# 記事を書こうと思った背景・経緯

仕事をしていて自分の思うPMOと実際にプロジェクトでPMOの人が果たしている役割・タスクについてGAPがあるなと感じて下記ツイートしました

https://x.com/nanaki11/status/1731813088134119593?s=20

思っていた以上にリアクションがあり、かつ賛同いただく意見が多かったのでまとめて書いてみよう思ってみました

# ツイートで話してるPMOとは？
ツイートで話してる **「コンサルに入るとやらされるスキルの身につかないPMO」** とは・・・
一言でいうと **「プロジェクトを進めることのみに終始してる人」** ですかね
あとでちゃんとした定義も調べて書こうと思いますが、プロジェクトの進行を補助する人みたいなことを書かれてると思うんですよ
それを読んで
・会議の設定（会議の日時調整・会議室抑える）
・議事録の作成
・報告資料の作成
・・・
みたいな日々必要な雑用とも言える作業で終わってしまう人をイメージして書きました
もちろん大規模PJだとそういった作業をやってるとすぐ定時になってしまいそれだけで終わってしまうのもわかります
ただそれだけでは不十分だよねって話をさせていただければと思いました

# PMOの定義
## PMO協会
ググったらそういう協会があるみたいです
そこから引用すると以下のように書いていました

> PMOとは"Project Management Office(*1)"の略です。日本語では「プロジェクトマネジメントオフィス」、「プログラムマネジメントオフィス」と一般的に呼ばれます。
PMOは、組織内における個々のプロジェクトマネジメントの支援を横断的に行う部門や構造システムを言います

## IPA
IPAが出している「ITプロジェクトの「見える化」」という資料には以下の記載がありました

> 　プロジェクト・マネジメント・オフィス（以下、PMO）は、企業や組織の全体価値の向上という視点から、複数のプロジェクトが円滑に実施されるように、より上位の統合的マネジメントを実現するために導入された組織であ
る。

# PMとPMOの違い
たぶんPMOって言葉を聞いた人が最初に思うのはPMとPMOって何が違うの？話だと思います。
プロジェクトを支援したり、マネジメントしたりするならPMもPMO同じじゃないかと・・・

その場合、以下の図がわかりやすいと思いました。
PMは発注者側でもSIベンダー側でもプロジェクトが立ち上がってそれぞれにPMは存在します
またDXなどで発注側でも複数の目的がある場合、ビジネス側・IT側でそれぞれにステークホルダーがいたりして複雑になります

そこで全ての領域・会社横断して調整を行うPMOという存在が必要になるわけです

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137987/7808fa86-13a9-c96d-2978-d9c633bd8474.png)

# 最後に
## 私の意見
Twitterで連投した内容を多少文章を整えて記載します

> コンサルでSM以上になると、専門でもない会議に出て「論点がおかしい、進め方がおかしい」とか違和感に気がつく人いるじゃん
PMOの役割ってあれだと思うんだよ
会議室をとる、週次資料を作る、課題を整理してリスト化するとかは「PJを進行するための手段」だと思うのです
じゃあPMOの人はSM以上の人が持ってる超能力に見える予知能力が必要なのか？って言われるとそれは違くて、ちゃんと自分がやるプロジェクトの専門知識
それは誰が判断出来るか？位の知識はつけないといけないと思う
実際PJの進行上、大人数のプロジェクトだとそういう「雑用」をやる人がいると助かる
しかし忙しさにかまけて専門知識の勉強をせずにいると雑用係になって結果「PMOってスキルが身につかない」ってなるんだろうなって

## 寄せられた意見で参考になったもの紹介

上記で書いたPMOとこの記事で言ってることって何が違うの？っていうとこちらのninoさんのいう **「各セクションで宙ぶらんりんになったボールをあるべき場所におく」** が大切だと思いました
極論プロジェクトって時間が経てば絶対進む（毎日みんな出社して仕事してる）し、なんかしら仕事してればプロジェクトの支援は出来ているんですよね
でもそれじゃあだめだよね？ってことが伝われば嬉しいです


https://x.com/2no553/status/1731881888128573574?s=20

# 追記分 PMOの種類
この記事を執筆後、PMOって一言に言っても複数種類あるよね？って話がまとめて見ました

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137987/52b600dc-5a75-4e21-e71e-e7ef1641b227.png)

https://www.jp-em.com/pmo_type/

https://www.project-management-support.com/what/kinds.html

# 参考情報
[日本PMO協会 - 日本PMO協会｜NPMO](https://www.npmo.org/m)
[ITプロジェクトの「見える化」](https://www.ipa.go.jp/archive/publish/qv6pgp0000000yoy-att/000005136.pdf)
ブラウザ上の任意の場所をクリックした際、その要素を取得

# はじめに
ブラウザで開発ツールを使用して、いろいろいじっていると
時たま、今マウスカーソルが当たっている要素は何に該当するのだろうか。
時になることがある。
(開発ツールでもできるが、1度クリックするともう一度できないため。)

![](https://storage.googleapis.com/zenn-user-upload/c75bc80168f9-20231206.png)

# 結論
```
document.addEventListener('click', function(event) {
const clickedElement = event.target;
console.log(clickedElement);
});
```
いたるところでクリックすると、開発ツールのConsoleに出てきます。
試してみてください。

![](https://storage.googleapis.com/zenn-user-upload/a71884e39a73-20231206.png)
[Linux] Intel One Api 2024.0.0でFFTW3インストール

## はじめに
　久しぶりにIntel One Api最新版をインストールしFFTW3をmake & Installしようとしたらエラーが発生。エラーメッセージをググっても役に立つ情報も見つからず少し手こずったのでメモ書きします。

 ## Intel One Api最新版（2023/12)
 　2023年12月時点でIntel One Apiの最新版はバージョン2024.0.0。このオフラインインストーラーをダウンロードしインストール。設定は[こちら](http://www2.yukawa.kyoto-u.ac.jp/~koudai.sugimoto/dokuwiki/doku.php?id=intel_software:oneapi:%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB "One Api")を参考に行えば問題なくインストールできた。

## FFTW3インストールしようとしたら、、
　[こちら](https://www.fftw.org/ "fftw3")からfftw3圧縮ファイルをダウンロード。2023年12月時点の最新版はバージョン3.3.10。[こちら](http://www2.yukawa.kyoto-u.ac.jp/~koudai.sugimoto/dokuwiki/doku.php?id=%E6%95%B0%E5%80%A4%E8%A8%88%E7%AE%97%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA:fftw3 "fftw3 install")を参考に圧縮ファイルを解凍、fftw-3.3.10ディレクトリに移動し
 `./configure --prefix=/usr/local/fftw3 CC=icx MPICC=mpiicc F77=ifort --enable-mpi --enable-threads`
 を入力したら、could not find mpiicc library errorでconfigureが止まってしまった。
　このエラーメッセージをググると古いQ & Aがヒットし、.bashrcなどにmpiライブラリディレクトリパスを通せば良いとあったが全く解決しなかった。mpiiccに問題がありそうな気がしたので
`mpiicc -V `
と入力したら
`/opt/intel/oneapi/mpi/2021.11/bin/mpiicx: 1: eval: icc: not found`
なるメッセージが返ってきた。One Api 2024.0.0ではmpiiccではなくmpiicxなのだとわかる。
そこで
 `./configure --prefix=/usr/local/fftw3 CC=icx MPICC=mpiicx F77=ifort --enable-mpi --enable-threads`
 としたら問題なくconfigureされ、その後のmakeとsudo make installもできた。

 ## Intel One Api 2024.0.0のmpiバージョン
 　Intel One Api2024.0.0に含まれるmpiディレクトリを確認するとバージョン2021.11であり、それまでの2021.10.0からバージョンアップされていた。このバージョンアップによりコマンド名が変わったのかもしれない。
  古いOne ApiではCCがiccだったのだがバージョンアップによりicxに変わった。今回のコマンド変更も同様なものなのかもしれない。というのもmpiiccはmpi + iccなのだからmpiバージョが上がればmpi + icxでmpiicxとするのが自然な感じだからだ。

## 最後に
　いつも簡単にインストールできていたFFTW3インストールにトラブって少し焦ったが注意深く調べれば解決できてよかった。FFTW3のconfigure時のエラーメッセージをググっても有効な情報がヒットしなかったため少し苦労した話でした。
SI開発の標準化で大事なこと

# はじめに  
## この文章について  
10分ぐらいで読めるようにしています。  

題材はエンタープライズ・V型モデルでのSI開発の標準化です。

## 寄稿（者）の背景
業務アプリやアプリ方式（アプリ共通）に従事してきました。

V型のウオーター・フォールモデルの開発しか経験しておらず、アジャイル開発は経験ないです。

その中で「何でも屋さん」的に動いた末、一番経験して痛い目みたのが「標準化とその考え方」だと思ってます。

以下のような方に届くといいなと思って書いてます。
    - 経験のない中で「標準化やれ」と言われどう臨めばいいか分からない
    - 標準化を進めているが周囲からの評判が悪い

・・・

なんやかんやで「標準化」って「テクニカルなこと」だけではなく、「精神論（心意気）」、「マネジメント」も大事なんだよな～  

# SI開発の標準化で大事なこと（本編）
## 精神論（心意気）
### 目線（目的意識）
「標準的なルールを規定する」のは仕事の一部でしかない。

現実的なワークロードで守れないルールは陳腐化するか開発チームの足かせとなり生産性を下げる。

「SI開発を成功させうる標準化」＋「エンハンスに向けて開発チームの文化になりえる標準化」を目指すべき。

「納品時のシステム」の目線だけでなく「エンハンスに耐えうるチームも納品する」という目線（目的意識）が欲しい。

### 長大／厳格なガイドを極力書かない
長大なガイドは読む意欲、ひいては生産性を下げる。

例えばV型モデルの下流工程でプロジェクトがスケールアップすることが多い。

その時、新任開発者のガイド読了が開発のクリティカルパスの場合、下流工程立ち上げ直後の生産性が出ないし、遅延が発生する。

また厳格すぎるガイド（ルール）は開発者の意欲を削ぐ。

大事なところをだけを抑えて、ある程度開発者（各チーム）に自由な裁量を与える。

一部のルール崩し（≒個別最適化）の相談をされたら柔軟に対応すること。

![IMG_0763.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3589073/dd5765e4-fc28-ea29-71b3-7c4222138684.jpeg)


### ツール（自動化）を活用
例えば、ソースコードの静的チェックツールなどがある場合、コーディングルールを文書化しない。

ツールを利用することを標準ルールとして、低いワークロードでルールを守らせる。

そもそも守るのにワークロードのかかるルールは尊重されないため、文化として定着するのに苦しみが伴う。

### 教育計画をおざなりにしない
「ガイドの読み合わせ会」、「今更聞けないことも聞いてＯＫなＱＡ会」など開催してリードする。

「”読みました”の星取表」、「ガイドとセットのサンプル作成」などを作成して提供する。
（例えば、先行開発に標準化担当もＪＯＩＮして、その成果をサンプルとすればよい）

「ルール／ガイドを作ってオシマイ」ではなくて、あの手この手で「文化が根付くところまで」までナビゲートすること。

また、リードする側が苦しくならないように上記のようなことを「教育計画」としてスケジュールに織り込むこと。

## マネジメント

### 言葉の定義（用語集／辞書）    
プロジェクト内で頻出する言葉についてはきちんと「言葉の定義」をすべき。

文脈が曖昧だったり、相手（会話、読者、他）の基礎知識次第で解釈がブレてしまう。

最悪のケースだと、見積時の「単位」の認識齟齬にもつながり、予算ショートを招く。

 作成するルールやガイド類だけでなくプロジェクト内のコミュニケーションに欠かせないことなので「言葉の定義」をリードする。

用語集や辞書などを整備するとよい。

### 数の関係（モノの単位）の規定    
言葉の定義と並行して、言葉同士の「数の関係（モノの単位）」を定義すべき。

- 簡単な例（方式チームの領分かもしれない）	
    - ユーザから認識できる画面ごとに画面設計書を１Book
	- １画面：nコンテナ
	- １コンテナ：１ｗａｒ：nＡＰＩ（のインターフェース）
	- １ＡＰＩ：１Controller：nUsecase：ｍRepository

数の関係（モノの単位）が曖昧だと、見積やスケジュール作成など「モノを作成する前」の段階で躓いてしまう。

ER図のような形で言葉の数の関係を図示するとよい。
```mermaid
erDiagram
    "画面" |o--o{ "UI部品" : "一部分"
    "画面" }o--o{ "API（IF）" : "API呼び出し"
    "UI部品" }o--o{ "API（IF）" : "API呼び出し"
    "API（IF）" }|--|| "リソース" : "CURDごとのIF"
    "API（IF）" }o--|{ "API（IF）" : "API呼び出し"
    "API（IF）" }|--|| "war" : "包含"
    "war" ||--|| "コンテナ" : "1コンテナ1war"
```
### 「標準化チーム」の標準化    
SI開発では「設計開発標準化チーム」が設置されることがある（以降「標準化チーム」）

各チームに先駆けて標準化を進めなければいけないチームが、以下の例だと、品質管理の文脈で後手を踏む。
（V字モデルでSI開発する場合、Vの字の左側の上部～中部で発生しやすい）

- 例）
    - 「PMOチーム」はアプリケーションチームの設計に先駆けて、品質管理ルールを規定する。
    - 「標準化チーム」はアプリケーションチームのために活動を行うので自チームのルール作成が後手になる。
    → レビュー記録の方法や集計方法のルールがない状態で「標準化チーム」は活動することになる。

これは各チームや影響する活動のクリティカルパスを読み、リカバリや合流するスケジュールをしておくことで対処する。

（踏襲できるか、輸入できるルールがあるならそれを積極活用でもよし。チケット管理ルールなど特に）

# さいごに
少しでもご興味もってもらえる方がいるなら、今後もこの文脈で寄稿したいです。

ご質問などあればぜひ。
【SwiftUI】TimelineViewを使って波を作る

# はじめに
TimelineViewを使って波を作ってみました。
繰り返しのアニメーションはTimelineViewと相性が良さそうです。

# サンプルアプリ
![Simulator Screen Recording - iPhone 15 - 2023-12-06 at 22.14.44.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/39261a5a-1047-1dae-eb4f-8ce74a83c119.gif)

# 実装
```swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        TimelineView(.animation) { timeline in
            GeometryReader { geometry in
                Path { path in
                    path.move(to: CGPoint(x: 0, y: geometry.size.height / 2))
                    
                    // stride(from: 開始値, to: 終了値, by: 刻み幅)
                    /// `by`の刻み幅を`to`に追加しないと右側に隙間が発生しちゃう
                    stride(from: 0, to: geometry.size.width + 3, by: 3).forEach { x in
                        let time = timeline.date.timeIntervalSince1970
                        let y = sin(Double(x) / 180.0 * .pi + time) * 20 + Double(geometry.size.height / 2)
                        path.addLine(to: CGPoint(x: x, y: CGFloat(y)))
                    }
                    
                    // 波の下半分を塗りつぶす
                    path.addLine(to: CGPoint(x: geometry.size.width, y: geometry.size.height))
                    path.addLine(to: CGPoint(x: 0, y: geometry.size.height))
                    path.closeSubpath()
                }
                .fill(.blue)
            }
        }
        .ignoresSafeArea()
    }
}
```

# おわり
いい感じにできました。

# 参考記事
https://capibara1969.com/2815/
Practical Data Privacy

データプライバシーに関するものは、日本ではエンジニアリングからは遠いことが多く、「機微なデータをテストで使う時はその項目をマスクする」くらいしか語られていなかったり、サービスを退会しても割とデータそのまま残してたり、と無頓着な現場も多くあるように思えます。

<a href="https://www.amazon.co.jp/Practical-Data-Privacy-Enhancing-Security/dp/1098129466"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8475/0e5c41c4-4df5-03b7-1030-d1618af78c14.png" alt="Practical Data Privacy書影" width="200"></a>

## 匿名化と仮名化

データプライバシーを確保するにあたって、まず匿名化と仮名化を区別しなくてはなりません。

<dl>
  <dt>仮名化</dt>
  <dd>データの識別情報を別のものに置き換える</dd>

  <dt>匿名化</dt>
  <dd>データから識別情報を取り除き、元のソースがわからないようにすること</dd>
</dl>

仮名化の手法としては以下の種類がある。

|仮名化手法|説明|例|
|:-------|:---|:---|
|マスキング|データに「マスク」を適用することで、多くの場合、値を標準的な一連の値に置き換える。|888-23-5322 → XXX-XX-5322|
|トークン化|1対1の置き換えを可能にするルックアップテーブルを介して、識別可能なトークンを置き換える。|Mondo Bamber → Fiona Molyn|
|ハッシュ化|ハッシュの仕組みを使って、データを解釈しにくくする。だが、まだ元のデータとの紐付けはある。|foo@bar.com → 32dz22945nzow|
|暗号化|暗号やその他の暗号技術を用いて、データを類似のデータに置き換えること。これも元のデータとの紐付けが残ることが多い。|(0)30 4344 3333 → PYHgXEzWaqKANNBEEZJceg==|

仮名化によってはプライバシーは保護できないし、部分的に匿名化してもプライバシーを完全には保護できません。

すなわちテストのために本番データを仮名化や匿名化してテスト環境に持ってくる、というのは、割とやっている現場は多いように思えますが、センシティブデータが直接漏れることはないものの、個人を特定できることはある、という点に注意しなければなりません。

ちょっと極端な例ですが、データベースに含まれる顧客の住所が以下のようなカラムに分かれて格納されていたとします。

* 都道府県
* 市区町村
* 番地以降

住所が漏洩しては不味いので、各項目を暗号化します。

|都道府県|市区町村|番地以降|
|----|----|----|
|AP2Ht2hsvO3XqCQ8Rk187A==|NNBs/OOSVjmzA/JwZHsSjg==|2-1-1|
|6TLAg7HgX8GCfWK1cgrGwA==|/kCvD2FjrIDB6P9K0nU5iw==|3-7|
|AP2Ht2hsvO3XqCQ8Rk187A==|erpdivO7JUDyU4qDdHyHfg==|6-12-1|

暗号化してあるから、鍵が漏洩しない限り大丈夫と一見思ってしまいがちですが、このデータが十分にたくさんのレコード数があれば、これと都道府県および市区町村の人口統計と比べると、都道府県や市区町村の推測が出来てしまいます。

このように他の断片的な情報と組み合わせて、統計的推測を加えることで、非匿名化や再識別化が出来てしまうので、完全にプライバシーが保護されるわけではないということなのです。

これは実際に過去何度か問題になっています。

* Netflix Prize問題: IDを仮名化していたが、別の映画レビューサービスの投稿履歴との突合で個人が特定された
* マサチューセッツ医療データ問題： 氏名を削除して匿名化されたデータから個人が特定された

https://www.jstage.jst.go.jp/article/itej/69/2/69_155/_pdf

プライバシー保護はグラデーションであって、どこまで守りたいかによって適切なレベルを選ぶ必要がある、と『Practical Data Privacy』では述べられています。特に第3者に公開する場合は、強いプライバシー保護が求められます。
![プライバシー保護のグラデーション](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8475/1d001d76-6e03-de2e-d700-3698137a87e9.png)

## 差分プライバシー

この匿名化、仮名化したデータに対して、非匿名化や再識別化させないために、データの統計処理に影響を及ぼさない範囲でノイズを含めて保護する手法を差分プライバシーと呼ばれています。

※　理論的な解説は記事末尾にリンクした日本銀行金融研究所のPaperが詳しいです。

ただ差分プライバシーは、攻撃者が有用な情報を得られる確率を下げる手段に過ぎないので、プライバシーが完全に保証されるわけではありません。

## まとめ

『Practical Data Privacy』には、差分プライバシー以外にも、多くのプライバシー研究の成果が紹介されていたり、GDPRやCCPAの解説が載っていたりするので、非常に勉強になります。

データプライバシーは、現在はビッグデータや機械学習の大量データの利活用の分野でホットなテーマですが、近い将来、アプリケーション開発においても必要な知識・設計になると思われます。

日本銀行金融研究所のこのPaperが、『Practical Data Privacy』に書かれているエッセンスを含んでいるので、データプライバシーに少し脅威・興味を感じた方はまずこちらをまず読んでみると良いかと思います。
https://www.imes.boj.or.jp/research/papers/japanese/kk41-4-4.pdf
Vite × Railsのnet::ERR_CONNECTION_REFUSEDエラーの解決策

## 事象

最近、フロントエンドのビルドツールとして人気のあるViteと、バックエンドフレームワークであるRailsを組み合わせて開発を行っていた際、ブラウザのコンソールにnet::ERR_CONNECTION_REFUSEDというエラーが発生しました。この記事ではその対処法を共有いたします。

## 原因

このエラーは、ViteがデフォルトでローカルホストのIPv6アドレス（::1）を使用するため発生していました。これにより、Railsサーバーとの接続が拒否され、フロントエンドからのリクエストが失敗する状態になっていました。

## 対処法

問題を解決するためには、Viteの設定ファイル（config/vite.json）でホストをIPv4アドレス（127.0.0.1）に明示的に設定する必要がありました。以下のように変更することで、エラーが解消され、Railsサーバーへの接続が成功しました。

```config/vite.json
"development": {
    "autoBuild": true,
    "host": "127.0.0.1",
    "publicOutputDir": "vite-dev",
    "port": 3036,
}
```

自らの備忘録のために投稿してますが、なにかお役に立てましたら幸いです！:clap:
また、なにか間違ってましたらご指摘いただけますと幸いです！:pray:
犬がうんちする前に回るから回った回数をグラフにした

# うんちする前に回る回数

| 日付  | 回った回数 |
|--- |---|
| 11/27 | 1         |
| 11/28 | 0         |
| 11/29 | 2         |
| 11/30 | 1         |
| 12/1  | 0         |
| 12/2  | 2         |
| 12/3  | 3         |
| 12/4  | 0         |
| 12/5  | 1         |
| 12/6  | 0         |

# データ分析

```mermaid
pie
  title うんちする前に回った回数の割合
  "11/27": 1
  "11/28": 0
  "11/29": 2
  "11/30": 1
  "12/1": 0
  "12/2": 2
  "12/3": 3
  "12/4": 0
  "12/5": 1
  "12/6": 0
```

## pythonで分析
```python
import pandas as pd
import matplotlib.pyplot as plt

data = {
    '日付': ['11/27', '11/28', '11/29', '11/30', '12/1', '12/2', '12/3', '12/4', '12/5', '12/6'],
    '回った回数': [1, 0, 2, 1, 0, 2, 3, 0, 1, 0]
}

df = pd.DataFrame(data)

plt.figure(figsize=(8, 8))
plt.pie(df['回った回数'], labels=df['日付'], autopct='%1.1f%%', startangle=140)
plt.title('回った回数の割合')
plt.show()
```

## 本当のクソグラフができた
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354194/589f23ef-c6e8-5fbe-0fda-449b2b0d4976.png)

# オチ
そんなんねーよ
3日目：A Model of Saliency-based Visual Attention for Rapid Scene Analysis(1998)　その2

### A Model of Saliency-based Visual Attention for Rapid Scene Analysis(Christof, 1998)
chatGPTを用いた論文要約サービスを使いつつ、再度まとめを投稿．

#### 概要

この論文では、視覚的注意システムが紹介されています。このシステムは、初期の霊長類の視覚システムの行動と神経アーキテクチャに着想を得ています。多スケールの画像特徴を組み合わせて、単一のトポグラフィックな顕著性マップを作成します。その後、動的ニューラルネットワークが、顕著性が低くなる順に注意を向ける場所を選択します。このシステムは、複雑なシーン理解の問題を、詳細に分析するために選択される顕著な場所を、計算効率的な方法で迅速に分解します。

顕著性マップは、視覚的注意システムにおいて、視野内の各場所の顕著性を表現するために使用されます。このマップは、複数の特徴マップを組み合わせることで構築されます。特徴マップは、画像の異なる特徴を表現するために使用されます。例えば、強度、色、方向などがあります。

特徴マップは、異なるモダリティを表現するために異なる方法で計算されます。例えば、強度特徴マップは、画像の輝度値を使用して計算されます。色特徴マップは、画像のRGB値を使用して計算されます。方向特徴マップは、画像のエッジの方向を使用して計算されます。

特徴マップは、正規化演算子を使用して結合されます。正規化演算子は、特徴マップの値を正規化し、顕著な場所を強調し、ノイズや顕著でないオブジェクトを抑制することで、マップの顕著な場所を強調します。正規化演算子は、特徴マップの値を比較し、顕著な場所を強調するために使用されます。

最終的な顕著性マップは、正規化された特徴マップを組み合わせることで構築されます。このマップは、視野内の各場所の顕著性を表現するために使用され、注意を向ける場所を選択するために使用されます。


#### どうやって複雑なシーンを分解したの

このシステムの重要な点は、視覚的注意に基づいて迅速に最も顕著な場所を特定し、それらを詳細に分析するために優先することで、複雑なシーン理解の問題を効率的に分解する能力にあります。このシステムは、初期の霊長類の視覚システムの挙動と神経構造に着想を得ており、そのようなタスクに利用可能な神経ハードウェアの速度が限られているにもかかわらず、複雑なシーンをリアルタイムで解釈する驚異的な能力を持っています。

このシステムは、視覚的注意に基づくメカニズムを利用して、視野内で最も顕著な場所を迅速に特定し、それらをさらなる分析や処理のために優先することができます。これにより、システムは計算リソースを最も関連性の高い情報の部分に集中させることができます。これにより、システムは複雑なシーン理解の問題をより小さな、より管理しやすい部分に分解し、詳細に分析することができます。

全体として、このシステムが視覚的に迅速かつ効率的に視野内で最も顕著な場所を特定する能力は、物体認識、視覚的検索、およびシーン理解など、幅広い応用に重要な意義を持っています。


#### どうやって顕著性の箇所を減らしていくの？

システムは、顕著性マップを利用して、顕著性が高い場所から順に注意を向ける場所を選択します。顕著性マップは、視野内の各場所の顕著性をスカラー量で表現するもので、複数の特徴マップを組み合わせることで構築されます。このマップを利用することで、システムは視野内で最も顕著な場所を迅速かつ効率的に特定し、それらをさらに分析や処理の優先順位に従って選択することができます。

具体的には、顕著性マップの最大値が最も顕著な場所を表し、そこに注目することで、システムは最も活発な場所を選択します。このプロセスにより、システムは視野内で最も顕著な場所を迅速かつ効率的に特定し、それらをさらに分析や処理の優先順位に従って選択することができます。


#### この論文の貢献は？

この論文の主な貢献は、初めて顕著性マップを利用して、視覚的注意のメカニズムを実装したことです。このシステムは、複数の特徴マップを組み合わせて顕著性マップを構築し、最も顕著な場所に注目することで、視野内で最も重要な情報を迅速かつ効率的に特定することができます。

このシステムは、複雑なシーン理解の問題を効率的に分解することができ、物体認識、視覚的検索、およびシーン理解など、幅広い応用に適用されることができます。また、このシステムは、初期の霊長類の視覚システムの挙動と神経構造に着想を得ており、生物学的にプラウシブルなアプローチを採用しているため、人間の視覚システムの理解にも貢献しています。

この論文は、視覚的注意の研究分野において、顕著性マップを利用したアプローチの先駆けとなり、その後の研究に大きな影響を与えました。

#### この論文の限界は？

この論文のシステムにはいくつかの限界があります。まず、このシステムは、特定の特徴マップに明示的に表現されているオブジェクトの特徴のみを検出できるため、特徴の結合を検出することができません。また、再帰的なメカニズムや運動チャネルなど、人間の視覚システムの重要な側面を現時点では実装していません。

さらに、システムは特定の特徴に対しては高い性能を発揮しますが、未実装の特徴タイプに対しては検出能力が制限される可能性があります。また、特定の画像の照明や色の変動が大きい場合には、システムの顕著性マップが人間の主観的な顕著性と異なることがあります。

このような限界は、システムの現在の実装における課題であり、将来の研究や改良によって克服される可能性があります。

### 所感
chatGPTの威力を痛感．
それでも短いスパンでの論文読み、記事作成はちょっと辛い…
メンターを任されてまずやったこと

## メンターって何だろう
今年に入り、中途入社のメンバーとインターン生のメンターを担当しました。
これまで後輩の技術的なサポートはあっても、メンターは人生初です。メンティーとしての経験はありますが、メンターがどういうものなのかしっかり考えたことはありませんでした。機会もなかったため、技術書でそのワードを見かけても読み流していました。

そんな状態ではまずいと思い、理解するため主に3つのことをやりました。
その中でメンターが何のかを学び、自分なりの考え方を持つことができました。

## 3つのやったこと
以下の通りです。次の章からそれぞれで得た学びや考えについてお話しします。
- 書籍から学ぶ
- 自分のメンターから学ぶ
- 周りに相談する

## 書籍から学ぶ
まず初めに、メンターについて書かれている書籍をいくつか読みました。その中でもためになったものを抜粋します。

### 人生を変えるメンターと出会う方法~自分の磨き方、高め方~
この本でメンターの重要性が理解できました。
内容としてはメンターの見つけ方が主で、人生が大きく変わるということが書かれています。そこまで壮大な話ではないにしろ、自分がメンティーに与える影響が少なからずあることを自覚できました。メンティーが社内でメンターを選べないからこそ、責任を持って取り組もうと決意しました。

### エンジニアリング組織論への招待 ~不確実性に向き合う思考と組織のリファクタリング
直接答えを教える「他社説得」ではなく、自分で考えて答えを見つけてもらう「自己説得」が大事ということを学びました。正直に言えば、答えを教えてしまった方が楽ではあります。しかし何もわからない状態や、考えて意味がないもの（知っているかどうかの問題）を除いて、自己説得してもらうように意識しています。

もう一つ「悩む」と「考える」の違いがとても参考になりました。
前者は状態で、後者は行動です。「自己説得」の際に、悩んで手が止まっているのであればヒアリングして考えられるように誘導することが大切です。

### SOFT SKILLS ソフトウェア開発者の人生マニュアル
仮想メンターという概念が書かれています。
実際にメンターではないが、自分がやろうとしていることのお手本となるような人物もしくは本を見つけるという意味です。これを知り、自分のお手本となる仮想メンターを探すきっかけになりました。

「教える」という行為は自分のためにもなります。
人に何かを教えることで、表面的な理解しかできていない部分に気づき、そして人に説明できるまで深く理解することができるようになります。つまり自身の成長に繋がるため、メンターをやる上でのモチベーションの一つとして役立ちました。

### 情熱プログラマー ソフトウェア開発者の幸せな生き方
著者はメンター（師匠という表現をしています）を見つけることと、メンターになることをアドバイスしています。
ここでもメンターとして何かを教えることは、自分の理解を深めるために役立つということが書かれています。

### 任せるコツ
内容はメンターとはずれますが参考になりました。
仕事をお願いする際に、自分も相手も楽になるためのノウハウが書かれています。最初のうちは自分の業務をメンティーと一緒に進めることがあり、得意なことやモチベーションに感じること、成長に繋がることは何かを考えて該当するタスクを割り振るようにしました（極論該当しないものは自分が巻き取る）。

## 自分のメンターから学ぶ
自分は入社してから2人のメンターに付いてもらいました。2人に共通して言えることは、親身になって対応してくれたという点です。
声を掛ければいつ何どきでも応じてくれましたし、忙しいからちょっと...と断られたことがほぼないように思います。物分かりが良くないため同じ質問をしてしまうこともありましたが、嫌な顔せず毎回丁寧に教えてくれました。また夜練と称し、定時後にペアプロを頻繁に実施してもらっていたこともありました。あと、よく雑談に付き合ってくれもしました。

こうして振り返ると、とてもメンターに支えられ、誰よりも恩恵を受けています。だからこそ、真摯に取り組まなければいけないと強く思いました。自分がしてもらったことを自分もする、そして組織のカルチャーを引き継いでいこうと考えました。

## 周りに相談する
書籍や自分のメンターから学び、自分のメンターとしての考え方がある程度は形成できました。それを周りに話してアドバイスやフィードバックをもらい、より良い形になることを目指しました。
- 自分のメンターでもあった上司
- メンター経験がある先輩
- メンティー本人

## 最後に
実際にメンターをやってみて一番大事だと思ったことは、相手（メンティー）に寄り添うことです。結局のところどんなやり方も人に合う合わないがあるので、正解は人それぞれです。メンティーを思いやり、愛をもって接することで適した方法が見つかり、メンター業務は上手くいくものだと感じました。
ただ軸となるものは必要になるので、本記事でお話ししたような方法で自分なりの考え方を見つけることは大切だと思います。
ケルベロス認証について



- チケットを用いて認証をおこなう手法
    一度認証を行うと、その後のログイン手続きが不要になるのが特徴
Active Directoryなどに使われている
チケットを発行するチケットをユーザーに発行する
ユーザーはそのチケットをもってリクエストを行い、クライアント側は認証サービスに問い合わせを行う
認証サービスはチケットの有効性を確認して、OKならばログイン許可の旨をクライアントに伝える

認証サービス（Keycloakなど）にIDとパスワードを入力
認証サービスで認証を完了
TGSでKDCが管理するIDがアクセスできるサーバーの情報を元に、各サーバーにチケットを発行
アクセス可能なサーバーに、TGSで発行されたチケットを提示、認証完了

クライアントとサーバ間の通信を暗号化する

サーバとクライアントの信頼関係情報を一括管理するデータベース
認証サーバ
チケット発行サーバ
プリンシパル→認証を行うユーザーやサーバのこと
- レルム→ケルベロス認証のシステムを一塊として定義した名称


認証サーバとチケット発行サーバは同一マシン上でも行けそう

他の認証方式との違い
→チケットの有無？
SSO認証方式の一種
Kaggle コマンドの locale バグ

```bash
$ kaggle competitions download -c blood-vessel-segmentation
time data 'Fri, 03 Nov 2023 22:06:42 GMT' does not match format '%a, %d %b %Y %H:%M:%S %Z'
```

```bash
$ kaggle -v
Kaggle API 1.5.16
```

手っ取り早く

```bash
export LC_ALL=C
```

でエラーを回避できた。

これは locale 依存な %a で英語 Fri を datetime.strptime しようとしているために locale が英語以外だとエラーになる。私は ja_JP になっていた:

```bash
$ python3
>>> import locale
>>> locale.getlocale(locale.LC_TIME)
('ja_JP', 'UTF-8')
```

Ubuntu 22.04 LTS & Python 3.11.5

私が一度バグ報告したけど、その時は python locale が英語以外になりうるのかわからなかったので、en_USに対処できただけで引き上げた。他に困っている人があまりいなそうなのでここにひっそりと記録を残す。

https://github.com/Kaggle/kaggle-api/issues/484
__**__のまとめ

こんにちは。生成AIのプロジェクトに関わることが増えてきたのでPythonを勉強しています。
今まで、Javaを4年してきたから、なかなか慣れるのに時間が・・・！

今日は、各オブジェクトが持っている「__**__」をまとめたいと思います。
JavaでいうObjectが持っている,toStringなどが相当するという認識。

## 一覧

オブジェクト(object())を作成して、dirメソッドを使って出てきたものを対象とします。
```python
dir(object())
['__class__', '__delattr__', '__dir__', '__doc__', '__eq__', '__format__', '__ge__', '__getattribute__', '__getstate__', '__gt__', '__hash__', '__init__', '__init_subclass__', '__le__', '__lt__', '__ne__', '__new__', '__reduce__', '__reduce_ex__', '__repr__', '__setattr__', '__sizeof__', '__str__', '__subclasshook__']
```


|メソッド/属性|役割|オーバーライドのトリガー|
|---|---|---|
|\_\_class\_\_  |インスタンスのクラスを取得     |不要|
|\_\_delattr\_\_        |属性の削除を制御       |del obj.attr|
|\_\_dir\_\_    |属性やメソッドのリストを返す   |dir(obj)|
|\_\_doc\_\_    |ドキュメンテーション文字列     |不要|
|\_\_eq\_\_     |等価性の比較   |obj1 == obj2|
|\_\_format\_\_ |フォーマット時の処理   |format(obj, format\_spec)|
|\_\_ge\_\_     |大なりイコールの比較   |obj1 >= obj2|
|\_\_getattribute\_\_   |属性へのアクセスを制御 |obj.attr|
|\_\_getstate\_\_       |オブジェクトの状態をシリアライズ       |不要|
|\_\_gt\_\_     |大なりの比較   |obj1 > obj2|
|\_\_hash\_\_   |ハッシュ値の取得       |hash(obj)|
|\_\_init\_\_   |インスタンスの初期化   |不要|
|\_\_init\_subclass\_\_ |サブクラスの初期化     |不要|
|\_\_le\_\_     |小なりイコールの比較   |obj1 <= obj2|
|\_\_lt\_\_     |小なりの比較   |obj1 < obj2|
|\_\_ne\_\_     |非等価性の比較 |obj1 != obj2|
|\_\_new\_\_    |インスタンスの生成     |不要|
|\_\_reduce\_\_ |シリアライズ時の処理   |不要|
|\_\_reduce\_ex\_\_     |拡張版のシリアライズ時の処理   |不要|
|\_\_repr\_\_   |オブジェクトの文字列表現       |repr(obj)|
|\_\_setattr\_\_        |属性への代入を制御     |obj.attr = value|
|\_\_sizeof\_\_ |オブジェクトのメモリサイズ     |不要|
|\_\_str\_\_    |オブジェクトの文字列表現       |str(obj)|
|\_\_subclasshook\_\_|  サブクラスの判定        |不要|

他にも、\_\_enter\_\_や\_\_exit\_\_もあるみたい・・・！
ちょうぜつ読んでみた

この記事は カオナビ Advent Calendar 2023 (シリーズ2) 8日目です。

https://qiita.com/advent-calendar/2023/kaonavi

## はじめに
カオナビでサーバサイドエンジニアとして働いている**ふじのん**です。

カオナビでは「ホンダナ」という、月に１冊好きな本を購入できる制度があります。
今回はじめて「ホンダナ」を利用して、[ちょうぜつソフトウェア設計入門](https://www.amazon.co.jp/dp/4297132346)を購入しました。

折角、読書がんばってするなら、セットでアウトプットもしちゃえということで筆を取りました。

## 書籍紹介
プログラミング言語の入門を済ませたけれど、もっとよく書きたいと思っている、中級者を目指す方のための本です。
本書はいわゆる「オブジェクト指向」を中心とした話がメインになりますが、正確にいうと「ソフトウェア工学のうち、かつてオブジェクト指向というトレンドをベースとして発達してきた領域」について記載されています。
また本書は、オブジェクト指向について、かなり高度なところから詳細までの説明をする本とは異なり、基礎的な価値観から順序立てて理解しやすい形（ストーリー仕立て）で紹介されています。そのため、ぜひ順番に読み進めることをお勧めします。

## クリーンアーキテクチャ

### :tent:クリーンアーキテクチャとは

横文字を見るとウッとなるふじのん向けですかね？ とてもありがたい。
とても素敵な解説から始まります。クリーンなアーキテクチャ、「きれいって何？」

アーキテクチャは「構造」
クリーンアーキテクチャって、「きれいな構造」にするには？ という知見がまとめられた用語なんですね。

###
### :milky_way:きれいな構造

きれいの反対はきたない　ですね、きたない構造は何がまずいか？
<font color="DarkOrange">*意味を認識するのに時間がかかる* </font>

実体験でも、構造が整理されたコードを読む際、2時間ほどで、どういう方針で組み立てられた設計か把握でき
どのような対策を行うことで、問題を解決できるか把握しやすかったけれど、
構造が整理されていないコードを読んだ場合、8時間ほどかかっても、不安が取れない感じです。

<details><summary>:writing_hand:分かりやすいたとえ話</summary><div>

---
おもちゃ箱が３つあります。

ぐちゃぐちゃの場合、クマのぬいぐるみはA、B、Cどれに入れましょう？
勝手に整理していいかわからない場合、とりあえずAに入れたりしませんか？

Aは本、Bはぬいぐるみ、Cはつみきのように整理されている場合、
クマのぬいぐるみは、ほとんど考えることなくBに入れますよね。

構造を整理するというのは、次に使う人が整理して使うかどうか？ にも影響があるんですね。

---
</div></details>

###
### :eyes:依存
次は別の着眼点で構造を見ていきます。
プログラムには依存が存在します。
風が吹けば桶屋が儲かるみたいな話です。

全く依存しない、依存されない、モジュールはただの:put_litter_in_its_place:ゴミなので
各モジュールは必ず繋がりがあります。

依存先のコードが書き換わった場合、依存している処理は何らかの影響があります。
どうすれば、この辛さを最小化できるかを考えるのが健全です。

依存先のコードを頻繁に書き換えないようにすれば、辛さが最小化できるのではないでしょうか？
（価値あるリファクタリングにするには、ファイルに対するコミット数を見てみるのも良さそうだなと感じました。）

### :milky_way:きれいな構造

1. ひとつの関心がひとつの箇所に閉じている
1. 依存する / 依存されるの関係各所をできるだけ減らす
1. できるだけ変更頻度の高い事情に依存しない

### さいごに

はしごを外すような形になってしまうのですが、
クリーンアーキテクチャは銀の弾丸ではなく、コンセプトのようなものです。
クリーンアーキテクチャ使って書きましょうは、きれいなプログラム書きたいですね
と似たようなものなので、具体的にどう整理するか？ はそれぞれ考える必要があります。

カオナビでも、具体的にどう整理するか？ を考え、やってみて、また考えを繰り返し
巨大なプロダクトの運用を支えています。

それではシリーズ2の9日目の記事もお楽しみください！！

https://corp.kaonavi.jp/recruit/recruitment/
非機能要件ってなんぞ？

こちらの記事は<a href="https://qiita.com/advent-calendar/2023/trustbank">トラストバンク Advent Calendar 2023</a>の8日目の記事です。


こんにちは。普段QA業務を担当しているkotsutaです。

さて、秋頃からQA組織を今後どうしていくかを話す場がありまして、「非機能要件」なるこれまで遭遇してこなかった単語が度々社内で飛び交っており、不勉強ながら良い機会なので非機能要件がどのようなものなのかをまとめてみました。


## 「機能要件」と「非機能要件」の違い

+ 機能要件：実現したいシステムの機能や動作を定義するもの。
+ 非機能要件：システムの信頼性やUX観点で満たしておく必要のある要件。

「非機能要件は機能要件以外の要件」として位置づけられてます。

非機能要件の観点は案件オーナーからは要件定義時に出てきづらいものなので、
担当開発者や関わるQAが汲んで挙げていくしか無いのですが
インフラまわりやセキュリティ、作られる機能に対しての専門知識が必要となります。

## 「非機能要求グレード」
機能要件の背景に潜む「それ以外」を読み解けというわけでもなく、それを行うのにやたらに広域な知識が必要かというとそうでもなくて、非機能要件にはちゃんとした定義があります。

独立行政法人 情報処理推進機構（IPA）が定めた「非機能要求グレード」として、次の6項目に大きく分類されるそうです。

#### ・可用性
そのシステムを安定的に継続稼働させるための要件や、万が一障害が発生した際の復旧方法の要件、
またバックアップ体制などの対策方法などは「可用性」に分類されます。


#### ・性能・拡張性
システムの情報処理性能や、ピーク時の負荷対策などの定義、
今後リソース増強のための機能拡張が可能かについても「性能・拡張性」に分類されます。


#### ・運用・保守性
リリースされた機能が実際に運用フェーズに移った際に必要となる運用マニュアルが整備されているか、
また、システムの監視体制があるかなどが「運用・保守性」に分類されます。


#### ・移行性
現行システムから新システムへ移行する際に検討すべきこと、
移行スケジュールの調整や、リハーサルの実施などが「移行性」に分類されます。


#### ・セキュリティ
システムの安全保証のため、ユーザーごとに権限を設け利用できる機能にアクセス制限をかけたり、
不正なアクセスや操作が行なわた場合に監視・追跡機能を設けるなどの要件が「セキュリティ」に分類されます。


#### ・環境・エコロジー
システムの消費エネルギーや、たとえばサーバーなどの機器の設置箇所の安全性などの要求がこちらに分類されるらしい
（参考サイトや資料を読んでもあまり落ちなかった。WEBサービス以外では重要視する必要あるのかも？）


## 「非機能要求グレード」の項目を理解した上で思い返してみると…あるある

表面上の機能要件を満たしていれば目的のものは作られるが、要件定義時に非機能要件への考慮が漏れていたばかりに、
考慮漏れ不具合が出たり、リリースできなかったりなど、これまでにも思い当たることがいくつかあります。

たとえば、
データ内の特定の単語をチェックする機能で、リリース時にはチェック対象が少なかったので問題がなかったが、実際に使用して年々チェック対象のデータ量が増加した場合に負荷に耐えられずスロークエリ出てしまった機能とか（…性能・拡張性の考慮不足）

ある機能を操作する際にアカウントのアクセス制限機能が設けられていなかったため、不特定多数が利用できる状態になっており、そのままリリースされてた場合、今後問題になる可能性があるとリリース直前の指摘で取り下げられた機能とか（…セキュリティ面の考慮不足）


嬉しいことに新規開発案件の仕様検討段階でお声掛けされることが多々あるのですが、要件定義時にはオモテで見えている機能要件ばかり目が行ってしまいがちになっています。今後は非機能要件も指摘できるよう心がけて行きたいと思います。


## エンジニア募集中です
トラストバンクでは一緒に働くなかまを募集しています（QAエンジニアの方もぜひ！！！！！）

https://www.wantedly.com/companies/trustbank/projects
自衛官からエンジニアへ Elixirから始める Web開発 Part 7

この記事は「Elixir Advent Calendar 2023」7日目の記事です
東京にいるけどfukuokaexのYOSUKEです。

普段は 合同会社TheWaggle で教材開発・システム開発・研修講師などマルチに活動してます。

このシリーズでは、文系ですらない、体育会系でも始められるプログラミング学習　というテーマで元自衛官だった僕が
自衛官からエンジニアになってもらいたいという気持ちを込めて、普段は大人しいですが、このコラムシリーズでは、あえて、体育会系のノリで、貴様ら理屈で覚えるなら体で覚えろ！というノリで書いてみたいと思います。

なので、初学者向けですが、理論は後回し、まずは動かして体感しろってノリの第7回目です。

それでは、いくぞ！

## 人はそれを「変数」と呼ぶ
いいか、貴様ら！
前回、「貴様の持つ小銃の口径は何口径だ？と聞かれたら 5.56mm と答えられる」 この表現をプログラムで書く場合について教えると言っただろう。

その時に使ったデータの型はどんな名前の呼び方だったか覚えてるか？

何！ 忘れただと！！！ 
貴様という奴は、体に覚え込ませる必要があるようだな。よし、そのまま駆け足だ、掛け声を真似してついてこい！

（心の中で掛け声を叫んでるようにリズム良く読みましょう、* は隊員を表現してます）
「イチ、イチ、イチ、ニィ」
* 「イチ、イチ、イチ、ニィ」

「今日は」
* 「今日は」

「天気が」
* 「天気が」

「いいね！」
* 「いいね！」

「マップは」
* 「マップは」

「キーと」
* 「キーと」

「バリューの」
* 「バリューの」

「データ」
* 「データ」

「欲しい」
* 「欲しい」

「値を」
* 「値を」

「入れて」
* 「入れて」

「出して」
* 「出して」

「入れて」
* 「入れて」

「出して」
* 「出して」

「気分が」
* 「気分が」

「いいね」
* 「いいね」

思い出したか！「マップ」だ「キー」と「バリュー」の関係で整理するデータ構造だ！
と言うことで早速、マップを準備しよう。

```elixir
%{ 
   "名称" => "20式5.56mm小銃" ,
   "種類" => "小銃" ,
   "製造国" =>  "日本" ,
   "口径" =>	"5.56 mm" ,
   "銃身長" => "330 mm" ,
   "使用弾薬" =>	"89式5.56mm普通弾" , 
   "装弾数" => "30発" ,
   "作動方式" => "ガス圧作動方式" ,
   "全長" =>	"851 mm (銃床最小 779 mm)" ,
   "重量" => "3.5 kg" ,
   "発射速度" =>	"650 – 850発/分" ,
   "有効射程" =>	"500 m以上"
}
```

よし、この状態で、前回先に述べた「貴様の持つ小銃の口径は何口径だ？と聞かれたら 5.56mm と答えられる」方法を教えてやろう。

まず、貴様の名前をいえ！
アサルトだと！　物騒な名前だな。よしいいだろう。アサルト！　貴様はプログラムの世界では `asult` と呼ぶことにしよう。
なぜ、カタカナではなく、英語のしかも半角文字を使うかだと？

それは色々と都合がいいからだ！ いいか貴様らにはまだ理屈は早い！　とりあえず、名前をつけるときは`半角英数字`を使うと覚えておけ！いいな、話しがややこしくなるから、この話しはこれで終いだ！

まず `asult`にマップのデータを持たせよう。

```elixir

asult = %{ 
   "名称" => "20式5.56mm小銃" ,
   "種類" => "小銃" ,
   "製造国" =>  "日本" ,
   "口径" =>	"5.56 mm" ,
   "銃身長" => "330 mm" ,
   "使用弾薬" =>	"89式5.56mm普通弾" , 
   "装弾数" => "30発" ,
   "作動方式" => "ガス圧作動方式" ,
   "全長" =>	"851 mm (銃床最小 779 mm)" ,
   "重量" => "3.5 kg" ,
   "発射速度" =>	"650 – 850発/分" ,
   "有効射程" =>	"500 m以上"
}
```

`=` はパターンマッチと教えたはずだが、`asult`のように半角英数で書かれて、かつ`:コロンも ```" "``` ダブルクォテーションもついてない場合には、自由にパターンマッチすることができる。

ちなみに、`asult`は、最初は何もパターンマッチされてないとエラーが出る。

![スクリーンショット 2023-12-06 21.35.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/deac6a46-4215-b7f0-6f3c-dd045b9eb0b1.png)

`asult` 貴様、何も装備をしてないのか！それでも軍人か！　戦場に銃を持たずに何しに行く気だ！と怒られてるようなものだ。必ず、最初に装備をさせる必要があると思え！


よし、いよいよ「貴様の持つ小銃の口径は何口径だ？と聞かれたら 5.56mm と答えられる」方法を伝授しよう！

```elixir
asult["口径"]
```

![スクリーンショット 2023-12-06 21.45.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/eb4beefb-f71b-7f46-bd9a-a4490322df5b.png)

これが、言わば貴様らに銃を持たせ、貴様らが持っている銃の口径は何だ！と聞いてるようなものだ！

よし、これでやり方はわかったか！ では、"重量" を聞きたい場合はどうする？

```elixir
asult["重量"]
```

そうだ！　キーを伝えるんだ！
よーし！　いいぞ、これで貴様はマップデータを使う方法を覚えたな！
他にも色々な方法があるが、貴様にはまだ早い！

今日はここまで、それでは次回 Part8でまた会おう！
TypeORMでDate型使えない問題

## 環境
Typescript  4.5.2
Express    4.16.1
TypeORM 0.3.17
postgreSQL  15

## 状況

TypeORMのEntityでnullableなDate型を定義したいのですが、以下のコードでエラーが出ました。
```typescript:
@Column({ nullable: true, type: "Date" })
  time!: Date|null;
```

```text:エラー内容
TS2769: No overload matches this call.
  The last overload gave the following error.
    Argument of type '{ nullable: boolean; type: string; }' is not assignable to parameter of type '(type?: any) => Function'.
      Object literal may only specify known properties, and 'nullable' does not exist in type '(type?: any) => 
Function'.

20   @Column({ nullable: true, type: "Date" })
```

ここで調査してみると、TypeORMにはDate型はなく、string型で表現されるらしいです。
https://github.com/typeorm/typeorm/issues/2176

そこでstring型に変更しましたがまたエラーが出ます。
```text:
TypeORM connection error:  
DataTypeNotSupportedError: Data type "Object" in "Schedule.time" is not supported by "postgres" database.
```
これについてはこれと同じくtype:'varchar'を明示してあげることでうまくいきました。
https://stackoverflow.com/questions/64350794/typeorm-message-data-type-object-in-is-not-supported-by-postgr
Rustで意外と便利なマクロを作ってみた話

# 動機
構造体の値を変更する際、フィールド値が大量にあるような状態で、
以下のように可変参照を受け取り、変更する方法で実行することがまどろっこしいと感じたため、なにか別の方法がないか探ってみた。

```rust
pub struct User {
    id: String,
    name: String
    age: i32
}

// 変更することが想定されるフィールド値が増える度にmut_XXXが増えていく…
impl User {
    pub fn mut_name(&mut self, name: impl Into<String>) {
        self.name = name.into();
    }
    
    pub fn mut_age(&mut self, age: impl Into<i32>) {
        self.age = age.into();
    }
}

fn main() {
    let mut user = User::default();
    user.mut_name("new name");
    user.mut_age(32);
}
```

フィールド値を公開すればそれでいいんじゃないか。
と言われればそれはそうなのだが、それはそれでどうにも気持ちが悪い
もっと素直に扱いたい。

# 思いついたもの（その１）
フィールド値を全公開した全く同じ構造体を用意して、相互に取り扱う


```rust
pub struct User {
    id: String,
    name: String
    age: i32
}

pub struct DestructUser {
    pub id: String,
    pub name: String
    pub age: i32
}

impl User {
    pub fn into_destruct(self) -> DestructUser {
        DestructUser {
            id: self.id,
            name: self.name,
            age: self.age,
        }
    }
}

impl DestructUser {
    pub fn freeze(self) -> User {
        User {
            id: self.id,
            name: self.name,
            age: self.age,
        }
    }
}

fn main() {
    let user = User::default();
    let mut dest = user.into_destruct();
    
    dest.name = "new name".to_string();
    dest.age = 32;
    
    let user = dest.freeze();
}
```

メソッドが増殖することはなく、お互いのフィールド値を一致させるだけで良いので取り扱いが楽になった。
ただ、変換のたびに値を消費しているため可変参照に比べて効率は良くはなさそう。

# 思いついたもの（その２）
可変参照を公開したフィールド値に詰め替えて、クロージャ内で扱う

```rust
pub struct User {
    id: String,
    name: String
    age: i32
}

pub struct UserMut<'a> {
    pub id: &'a mut String,
    pub name: &'a mut String
    pub age: &'a mut i32
}

impl User {
    pub fn substitute(&mut self, f: impl FnOnce(&mut UserMut)) {
        f(&mut UserMut {
            id: &mut self.id,
            name: &mut self.name,
            age: &mut self.age
        })
    }
}

fn main() {
    let mut user = User::default();
    
    user.substitute(|origin| {
        *origin.name = "new name".to_string();
        *origin.age = 32;
    });
}
```

可変性のスコープもよく見える、大分スッキリしたのではないだろうか。

# と、思いついたものを手続き型マクロにしてみた

https://github.com/HalsekiRaika/destructure

以下のDeriveMacroで付与することで
* `destructure::Destructure`
  * `pub fn into_destruct(self) -> DestructXXX`
  * `pub fn freeze(self) -> XXX`
  * `pub fn reconstruct(self, f: impl FnOnce(&mut DestructXXX)) -> Self`
  * `pub fn try_reconstruct<E>(self, f: impl FnOnce(&mut DestructXXX) -> Result<(), E>) -> Result<Self, E>`


* `destructure::Mutation`
  * `pub fn substitute(&mut self, f: impl FnOnce(&mut XXXMut))`
  * `pub fn try_substitute<E>(&mut self, f: impl FnOnce(&mut XXXMut) -> Result<(), E>) -> Result<(), E>`

が自動導出される。
関わったプロジェクトで使用したがそれなりに便利で、改良を試みている。

# さいごに
Getter/Setter自体がRustと相性が悪いと話は聞いたことがあるが、確かにそうかもしれない。

（こういった記事を書くのは初めてなので読みにくかったらごめんなさい。）
ローカルスナップショットを使って検証を効率化しよう

# ローカルスナップショットを使って検証を効率化しよう

## はじめに
- macを運用していると、初期化したりちょっと前に戻った状態でテストしたいなどきれいな状態が簡単に作れたらと思う時があるだろう
    - 私もその一人だ
- だが、初期化して実験して、初期化して、、、の繰り返しは1回の試行に対して初期化に時間がかかりすぎる
    - 仮想環境でもよいのだが実機でしか試せないこともあるだろう
    - 私と同じ苦労をする人が減ることを祈ってこの記事を執筆する

## 注意事項
:::note alert
この記事の内容は初期化など端末の保存領域に大きく影響します
データなど保証しかねる旨ご了承ください
:::

## macのローカルスナップショットってなんなんだ？
- バックアップを本体の保存領域に保存する仕組み
    - https://support.apple.com/ja-jp/102154
    - 復元はTime Machineから実施できる
- 保存期間は24時間
    - 大事だからもう1回 <font color=red>保存期間は24時間です</color>
    - 朝、出社して昨日の続きしよって思ったらデータないじゃんなんてこともしばしば…
        - 気を付けましょう

## 方法
- スナップショットを作る！
    ```Shell
     tmutil localsnapshot
    ```
    - これで今時点の環境を保存できます！
    - あとは、作業をして戻したいときにTime Machine開いて時間を巻き戻すだけ
- 保存されているかな？の確認
    ```Shell
    tmutil listlocalsnapshots /
    ```
    - 保存されているスナップショットの一覧が表示されます
        - 形式は
            - `com.apple.TimeMachine.YYYY-MM-DD-HHmmss`
        :::note alert
        (dataless)と表示されているデータは壊れています
        よくわからんけどよし！！ということをしないようにしましょう      
- スナップショットを削除する
    - スナップショットもバックアップです
    - 環境によりますが、ストレージを圧迫している場合は削除も必要です
        ```
        sudo tmutil deletelocalsnapshots スナップショットが作られた日時
        ```
## まとめ
- スナップショットを使って簡単にバックアップを管理することができるようになりましたね！
- コマンドに慣れていない場合は、ちゃんと指差し確認をして実行しましょう
- 気を付けることに越したことはないですからね(・・)b

## 参考資料
https://support.apple.com/ja-jp/102154
Deducing thisで子クラスにも繋がるメソッドチェーン

# はじめに
C++23から使える Deducing thisを使った、ちょっとしたテクニックを紹介します。

もし、あなたがメソッドチェーンを使ったコーディングを好むなら、`this`を返すようなメソッドを作ったことがあったかもしれません。
しかし継承が絡むと順序を気を付ける必要が出てきます。

# 問題になるケース
例として以下のコードを見てみましょう。

```cpp
class Actor
{
public:
    Actor& setId(int id)
    {
        this->m_id = id;
        return *this;
    }
private:
    int m_id;
};

class Hero : public Actor
{
public:
    Hero& setHp(int hp)
    {
        this->m_hp = hp;
        return *this;
    }
private:
    int m_hp;
};
```

以下のような順番でのメソッドチェーンは問題ないですが、
```cpp
Hero hero;
hero
    .setHp(10)
    .setId(1)
    ;
```
メソッドを呼ぶ順番を変えると、繋がらなくなります。
```cpp
Hero hero;
hero
    .setId(1)
    // .setHp(10) setIdの戻り値は Actor& なので setHp へ繋げられない
    ;
hero.setHp(10);
```

これは当然の結果ですが、親クラスのメソッドを呼んだ時点で、子クラスのメソッドへは繋げることができなくなります。

今回の例くらいなら、順番を気を付けるだけでいいかもしれませんが、
どうしても親クラスのメソッドを先に呼びたいケースがあるとすれば
メソッドチェーンで気持ちよくなりたい あなたは チェーンが途切れることにモヤモヤするかもしれません。

# ここでも使えた Deducing this

親クラスのチェーンするメソッドを修正してみましょう。

```cpp
    template<class Self>
    Self& setId(this Self& self, int id)
    {
        self.m_id = id;
        return self;
    }
```

こうする事で、子クラスから呼んだ場合の関数の戻り値が子クラスの型になります。

:::note warn
仮想関数(`virtual`)の場合はDeducing thisが使えないことには注意
:::

よって以下のコードが成功します。

```cpp
Hero hero;
hero
    .setId(1)
    .setHp(10) // setIdの戻り値は Hero& なので setHp へ繋がる
    ;
```

もちろん子クラスが複数でも問題ありません。

```cpp
class Actor
{
public:
    template<class Self>
    Self& setId(this Self& self, int id)
    {
        self.m_id = id;
        return self;
    }
private:
    int m_id;
};

class Hero : public Actor
{
public:
    Hero& setHp(int hp)
    {
        this->m_hp = hp;
        return *this;
    }
private:
    int m_hp;
};

class Enemy : public Actor
{
public:
    Enemy& setExp(int exp)
    {
        this->m_exp = exp;
        return *this;
    }
private:
    int m_exp;
};

int main()
{
    Hero hero;
    hero
        .setId(1)
        .setHp(10)    // setIdの戻り値は Hero& なので setHp へ繋がる
        ;
    Enemy enemy;
    enemy
        .setId(2)
        .setExp(100) // setIdの戻り値は Enemy& なので setExp へ繋がる
        ;
}
```

これで継承関係があっても自由に気持ちよくメソッドチェーンを繋げられます。

# まとめ

Deducing thisを使ったテクニックとして
親クラスのメソッドを先に呼んでも子クラスのメソッドにチェーンする方法を紹介しました。

- これまでthisを返すようなメソッドチェーンのパターンで継承関係があると順序を気を付ける必要があった
    - 親クラスに定義した`this`を返すメソッドを子クラスから呼んでも戻り値が親クラスの型になるので、子クラスのメソッドにチェーンできない
- Deducing thisを使うことで上記問題を解決できる
    - 親クラスに定義した`this`を返すメソッドを子クラスから呼んだら戻り値が子クラスの型になるので、子クラスのメソッドにチェーンできる
    - ただし仮想関数の場合はできない
- 気持ちよいメソッドチェーンライフを送れる

# 参考

そもそもDeducing thisとはなんぞやみたいな話は以下が参考になります。

- [メンバ関数の新しい書き方、あるいは Deducing this](https://zenn.dev/acd1034/articles/221117-deducing-this)
- [Explicit object parameter (deducing this) - cppreference.com](https://en.cppreference.com/w/cpp/language/member_functions#Explicit_object_parameter)
- [Deducing this (P0847R7)](https://www.open-std.org/jtc1/sc22/wg21/docs/papers/2021/p0847r6.html)
iOS SimulatorでアニメーションGIFを作る方法

# 概要
個人的な需要があったのでiOS Simulatorの画面録画をGIFアニメーションにする方法を調べました。
その際、参考にさせていただいた方法と若干異なっていること、そして非常に簡単にアニメーションGIFが作成できた為、共有するために記事を書きました。

今回は[こちらの記事](https://qiita.com/KenUehara/items/63f263fed45d9d445444)で使用したアニメーションGIFを作った方法をそのまま解説します。

- - -
# 詳細

### 1. アニメーションGIFを作成したいアプリでiOS Simulatorを起動する

以下のようにiOS Simulatorを起動し、撮影したい画面を表示します。

![スクリーンショット 2023-12-06 21.07.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576326/43ceb7c8-6198-2646-fafd-3e931c9dba57.png)


### 2.撮影を開始する

以下の画像の赤枠内をクリックする、もしくは`command+R`で画面の録画を開始します。

![Group 10570.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576326/05c6a477-c05e-d110-b200-09de67784daa.png)

画面の録画が開始されると以下の画像の赤枠内のようにカメラアイコンが停止アイコンに変わります。

![Group 10572.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576326/0cdebfa6-d522-811a-13b9-c75b1b70669f.png)

### 3.撮影を終了する

画面の録画を停止し、保存するには停止アイコンをクリックします。

![Group 10572.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576326/0cdebfa6-d522-811a-13b9-c75b1b70669f.png)

画面の録画を停止すると、以下の画像の赤枠のように保存された画面の録画のプレビューが表示されます。

![Group 10573.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576326/ec30121f-b109-a823-9f1a-8815fcf4c57c.png)

プレビューを右クリックすると保存する形式を選択できます。
赤枠内の`Save as Animated GIF`を選択すると、デスクトップに画面の録画のGIFファイルが保存されます。

![Group 10571.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576326/27cf32d4-9e9c-ef52-3014-ce2af427a1cc.png)

以下のアニメーションGIFが今回の一連の流れで作成したものになります。

![Simulator Screen Recording - iPhone SE (3rd generation) - 2023-12-06 at 21.13.07.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576326/f8915456-d57a-c403-af89-a064afe9566f.gif)


以前はターミナルでエイリアスをつけたりとかして録画の起動をしていた記憶があったのですが、今はショートカット一発で起動できるようになっているんですね、便利になりました。
#プログラミング #Javascript # バグネタ

ずっと使ってる人だと当然だろうけど、たまに使うと忘れててやらかすもの。

```
> [Number(3),Number(15),Number(10),Number(1)].sort()
> (4) [1, 10, 15, 3]0: 11: 102: 153: 3length: 4[[Prototype]]: Array(0)
```

なんでかというと下記の仕様の通り、文字列に変換されてからソートされるから。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
ただ数値順にしたいだけでもこうせにゃならん。

```
～.sort(
    (a, b) => {
        return (a > b ? 1 : -1);
    }
);
```
div に対して border-radius: 50%が利かない

# やりたいこと
div を親に持つ 画像を丸表示にしたい

画像を丸表示にしたい。
![](https://storage.googleapis.com/zenn-user-upload/03dc5a35ed3b-20231206.png)



```html
<div class="form_input_wrapper profile">
    <div class="cropped_image_container profile" id="cropped_image_container">
        <img id="cropped_icon" class="cropped_icon" alt="トリミング結果" src="#">
        <button id="remove_cropped_image_button" class="remove_cropped_image_button profile" type="button">&times</
button>
    </div>
</div>
```

```css

.cropped_image_container.profile {
    position: relative;
    top: 0;
    left: 0;
    width: 18rem;
    height: 18rem;
    border-radius: 50%;
}

.remove_cropped_image_button {
    width: 4rem;
    height: 4rem;
    text-align: center;
    border-radius: 50%;
    font-size: 2.4rem;
    background-color: #f6f5f4;
    
    position: absolute;
    top: 0;
    left: 14rem;

}

```

# 原因、解決策

親要素にborder-radiusを設定するだけではだめ。

1.というか子要素だけでいい。(親も設定してもいいけど、今回は子のみ)

2.親要素にoverflow: hiddenを設定する必要がある。

1の場合

![](https://storage.googleapis.com/zenn-user-upload/148366b0d37a-20231206.png)

2の場合(×ボタンが隠れた)

![](https://storage.googleapis.com/zenn-user-upload/224c11f73df6-20231206.png)



# 終わりに
やりたかったことは 1であるので1を採用
プロフィールアイコン画像表示に採用した。
最近のwebサービスは プロフィール画像が丸表示が多いので、
自身のプロダクトに導入してみた。
Pythonでjsonファイルの読み取りと書き込み

### 本記事の背景
jsonファイルはWebをはじめ、IoT、アプリケーションの設定などでいろんな場面で使われているため、本記事はPythonでjsonファイルを扱うための基本的な知識をおさらいする

### 完成形 
クラス実装のソースコードは以下です。
なお、VSCode上、jsonの内容に日本語が含まれている場合は、文字化けする

```Py
import os,json

class Config():
    # ファイルパスの設定
    def __init__(self) -> None:
        # カテゴリー情報を管理するJson
        self.category_info = os.path.join(os.getcwd(), 'category_info.json')
    # jsonファイルを取得する
    def get_json_info(self):
        with open(self.category_info, mode='r', encoding='utf-8') as json_file:
            return json.load(json_file)
    # jsonファイルを更新する
    def set_json_info(self, category_key, category_value):
        try:
            # jsonファイルの読み込み
            with open(self.category_info,'r', encoding='cp932') as json_file:
                json_data = json.load(json_file)
                json_data[category_key] = category_value
            # jsonファイルの更新
            with open(self.category_info, 'w', encoding='cp932') as json_file:
                json.dump(json_data, json_file, indent=4)
        except:
            print('jsonファイル更新失敗しました。')
    # イニシャライズ
    def initial_json(self):
        json_data = {
            "category_01": "生活"
        }
        with open(self.category_info, 'w', encoding='cp932') as json_file:
                json.dump(json_data, json_file, indent=4)

if __name__ == '__main__':
    ins = Config()
    ins.initial_json()
    print(ins.get_json_info())
    ins.set_json_info('category_02','学校')
    d = list(ins.get_json_info().values())
    print(d)
```
### jsonと辞書型の変換
実際のjsonデータは辞書型で構成されているため、辞書型に変換したり、リストに変換したりするので、以下でよく使う事例を示す.

```Py
if __name__ == '__main__':
    ins = Config()
    # keyをListとして取り出す
    k = list(ins.get_json_indo().keys())
    print(k)
    # valueをListとして取り出す
    v = list(ins.get_json_info().values())
    print(d)
```