OmniAICreator/Qiita-1.07M huggingface dataset:
ApplicationController

![18.ApplicationController.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11525/5edd7f3b-1ce1-490d-aa83-3e648102e15e.png)

https://bliki-ja.github.io/pofeaa/ApplicationController/

Application Controller は、一般的な MVC のコントローラー実装において、バラバラの Page Contorller のせいで起きる問題を解消するアイデアです。

Page Contorller はそれぞれが独立したオブジェクトで、プログラミングにおいてはこの分離された状態が、ほどよい凝集度を与えてくれます。しかし、Web は URL によるハイパーリンクで繋がっています。URL 
 (あるいはルーティング ID) という文字列の整合性が取れなくなると、アプリケーションは正しく機能しなくなります。また、Template View のファイルパスを指定するのも文字列です。これらの文字列プログラミングが苦痛になる最大の理由は、Page Contorller が本質的にバラバラの場所に存在するためです。

Application Controller は、アプリケーションにひとつ、あるいは一連の機能単位ごとにひとつ存在するオブジェクトです。Page Contorller 群が Application Controller を共有すると、そこに共通の知識を委譲できます。同じオブジェクトの中に全体の知識が集まると、あちこちに分散した URL や ID の文字列をメンテナンスする面倒が、一気に楽になります。

ハイパーリンクだけでなく、Service Layer の扱いに関する知識なんかも集約できるかもしれません。ID を文字列で指定するのは、ハイパーリンクやファイル名以外に、データベースのキーにも言えることなので。

Application Controller にとって、機能を直接持つのは負担になります。Page Contorller から何でもかんでも委譲された Application Controller は、依存が肥大化します。異なるページに異なる依存セットがあったものを、すべて抱えることになるからです。実際の仕事はそれぞれの Page Contorller で行うのが得策です。

Application Controller にできるだけ実機能を持たせないことは、単体テストにとっても有利にはたらきます。Page Contorller はその責務上、単体テストしにくい存在のひとつです。とくに、結果得られるものが HTML のビューであった場合、検証ロジックはテンプレートのレイアウトによって変化してしまいます。実動作する機能に関係することから、モックオブジェクトを設けるのにも苦労します。純粋なロジックによるテストで、しかもひとつのオブジェクトのテストだけで、ミスしやすい全体の整合性の多くをカバーできるのは、Application Controller を設けたときの大きなメリットになります。
Marp で作ったプレゼンテーションをオンライン共有する GitHub リポジトリ

:::note info
この記事は [広島大学 HiCoder & ゲーム制作同好会GSD Advent Calendar 2022](https://adventar.org/calendars/7845) の 16日目の記事です。
:::

# Marp

LT などの簡単な発表で使いきりのスライドを作りたい時に、Markdown からスライドを作成できる [Marp](https://marp.app/) というツールを愛用しています。

このことに関しては色々な方が記事にしており、VSCode 拡張機能を使うとライブプレビューも効くので、サクサクスライドを作成できます。

https://qiita.com/tomo_makes/items/aafae4021986553ae1d8

## Marp で作ったプレゼンを共有したい

出来上がるファイルはもちろん Markdown なので Git で管理できるのですが、手元環境で PDF / PowerPoint に変換してスライド共有サイトにアップロードするのは面倒なので、変換と共有を自動でやってくれるリポジトリを作りました。

https://github.com/plageoj/presentations

このリポジトリの `master` ブランチに Markdown をプッシュすると、GitHub Actions で HTML / PDF に変換して、GitHub Pages で公開するようにしています。

公開されたページはこちら。index.html を、シェルスクリプトでいい感じに生成しています。

https://plageoj.github.io/presentations/

リポジトリトップで `filename.md` として作ったプレゼンテーションは、プッシュすると `https://plageoj.github.io/presentations/filename.html` として公開されます。
この URL を送りつければいいのですね。

## テンプレート

この構成がわりと便利だったので、誰でも使えるようにテンプレートとして公開しました。

https://github.com/plageoj/presentation-template

README も Marp で書いています。

### 使い方

1. `Use this template` ボタンから新しいリポジトリを作ります。
1. [リポジトリ設定から GitHub Pages を有効化](https://docs.github.com/ja/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0-github-actions-%E3%83%AF%E3%83%BC%E3%82%AF%E3%83%95%E3%83%AD%E3%83%BC%E3%81%AB%E3%82%88%E3%82%8B%E5%85%AC%E9%96%8B)します。
    - カスタムワークフローはテンプレートに含まれています。
1. リポジトリ内のトップディレクトリに Markdown ファイルを作ります。
1. 通常の Marp プレゼンテーションと同じ書式でプレゼンを作ります。
1. Markdown 内に、`title: <プレゼンタイトル>` を含めると、そのタイトルを使って index をビルドします。タイトルがない場合は index に追加されません。
1. `master` ブランチに push するとスライドがビルドされます。

## できること・今後やりたいこと

これで Marp で作ったスライドを GUI 作業なしで公開できるようになりました。

GitHub Actions 上では DockerHub 上の Marp CLI を使っているのですが、
VSCode 拡張機能と違って Markdown 中の HTML タグを解釈しないようです。
ルビをうちたいときや、`<br>` で改行したい時は注意が必要かもしれません。

今後は、

- フォルダー対応
- 変更のあったファイルだけをビルドして、ビルド時間を高速化する

の2個ができたらいいな……と思っています。
【ルール説明・safety】risky-file-permissions

こちらの記事は[Ansible lint Advent Calendar 2022](https://qiita.com/advent-calendar/2022/ansible-lint) 17日目の記事になります。

今回はルール[risky-file-permissions](https://ansible-lint.readthedocs.io/rules/risky-file-permissions)について説明します。

### risky-file-permissions

ファイルやディレクトリを作成する処理が含まれるモジュールにおいて安全にファイルやディレクトリが作成されるかどうか検証します。

ファイルもしくはディレクトリの作成の処理が含まれるのは以下のモジュールです。（他にもあるかもしれません）

* [ansible.builtin.assemble](https://docs.ansible.com/ansible/latest/collections/ansible/builtin/assemble_module.html)
* [ansible.builtin.copy](https://docs.ansible.com/ansible/latest/collections/ansible/builtin/copy_module.html)
* [ansible.builtin.file](https://docs.ansible.com/ansible/latest/collections/ansible/builtin/file_module.html)
* [ansible.builtin.get_url](https://docs.ansible.com/ansible/latest/collections/ansible/builtin/get_url_module.html)
* [ansible.builtin.replace](https://docs.ansible.com/ansible/latest/collections/ansible/builtin/replace_module.html)
* [ansible.builtin.template](https://docs.ansible.com/ansible/latest/collections/ansible/builtin/template_module.html)
* [community.general.archive](https://docs.ansible.com/ansible/latest/collections/community/general/archive_module.html)
* [community.general.ini_file](https://docs.ansible.com/ansible/latest/collections/community/general/ini_file_module.html)

#### 問題のあるコード

```yaml
---
- name: Unsafe example of using ini_file
  community.general.ini_file:
    path: foo
    create: true
    mode: preserve
```

#### 修正されたコードその１

例えば[community.general.ini_file](https://docs.ansible.com/ansible/latest/collections/community/general/ini_file_module.html)において`create`キーの初期設定は`true`です。これは対象のファイルが存在しない場合はファイルを作成します。

```yaml
---
- name: Safe example of using ini_file (1st solution)
  community.general.ini_file:
    path: foo
    create: false  # falseを設定して新規にファイルを作成しないようにする
    mode: preserve
```

#### 修正されたコードその２

作成されるファイルへパーミッション情報を付与します。

```yaml
---
- name: Safe example of using ini_file (2nd solution)
  community.general.ini_file:
    path: foo
    mode: 0600  # パーミッションを設定しファイルのどのような権限でファイルが作成されるか明示する
    mode: preserve
```

### 参考サイト

* [risky-file-permissions — Ansible Lint Documentation](https://ansible-lint.readthedocs.io/rules/risky-file-permissions/)
TailwindCSS入門～学習動画リスト～


# CSS苦手な人でも大丈夫！ 
イチからレイアウト練習もあったりとCSS苦手な人でも学びやすい内容です。

:::note info
 全7回の動画でTailwindCSSの使い方、基礎・応用を収録しております。
「 CSSフレームワークに慣れる 」がポイントです。
:::



# ◆ TailwindCSS入門～学習動画リスト～

1~5の動画を見たら6・7の演習をやると自分でページを作る際の理解につながりやすいです。


| タイトル | 動画🔗 | 
| ---- | ---- | 
| 1. 人気のCSSフレームワーク「Tailwind CSS」入門編 | 🔽https://youtu.be/j_NutYm_chk |
| 2. レイアウト入門 | 🔽https://youtu.be/S4oJXjfcSlk |
| 3. よく使うクラス(プロパティ)を簡単解説 | 🔽https://youtu.be/yrL4d6ow0sw |
| 4. レスポンシブ/各種プロパティ | 🔽https://youtu.be/rb38-dzcIcw |
| 5. 超便利、無料テンプレート | 🔽https://youtu.be/wNm3vPrEVU0 |
| 6. ゼロから１ページ作る！基礎トレーニング(演習) | 🔽https://youtu.be/8mX3auwlD3o |
| 7. ゼロから１ページ作る！応用トレーニング(演習) | 🔽https://youtu.be/JBNN8TWz6iM |




# ◆おススメ動画集
[JavaScript【 応用力が身につく！実践トレーニング 】 動画集](https://qiita.com/daisu_yamazaki/items/faa70f1638f3cc546b06)
別で、JavaScriptのまとめ動画もQiitaにアップしてますので、そちらもおススメしております。
こちらはかなり数があるので、是非JavaScriptで応用できるようになりたい人は見てください。
きっと役にたつはずです。



# 役立ちましたか？
今後も講義動画増えたら、こちらを更新していきます。
ブックマークしていただければ幸いです。
**チャンネル登録・フォロー・SNSでの拡散も是非お願いいたします。**
##### ✨Twitter : [@daisu_yamazaki](https://twitter.com/daisu_yamazaki)
##### ✨Youtube：https://www.youtube.com/@osozaki






以上
競プロ実践記

アドベントカレンダー2つ目の記事です。今回は私の弱々の競技プログラミングの実践記を書きます。

### 生態
- 使用言語：Python3
- レート：304
- 色：灰
- 参加回数：15回
- 始めた時期：5月下旬

### 目標
とにかくプログラミングを楽しむことと、できれば入水くらいの実力はつけたい。

### コンテスト参加
基本的に参加できる時はしますが、学校やハッカソン・コンペとの両立をしないといけないので、12月は一回も参加できてないのが現状です。年内に入茶する目標でしたが、参加自体できていないので難しい。

### 勉強
勉強自体もそれほどしているわけでもなく、たまに問題を解く程度。コンテスト合わせて117問しか解いていないので、勉強不足です。問題は大体灰色の上位か茶色を自分で完璧に解けるようにします。そのほかも、アルゴリズムの勉強も少ししています。最近は最小全域木の勉強をしました。

### パフォーマンス
勉強はしていないものの、コンテストに出続けているので少しずつ上がっている感じです。直近のものはのぞいて割と茶パフォを安定して出せるようになってきた次第。3完できるようになってくるとより一層楽しくなってきました。今後は緑パフォを目指さないといけない状況で、今後の休みを有効活用したいです。

### メンターさん
メンターさんについてもらっています。毎回コンテスト終わりに復習かねて解説をしてもらっていて、それが一番の成長剤になっています。ありがとうございます。

### 今後の展望
できるだけ早いうちに入茶したいですね。年内入茶というメンターさんとの約束を守ることができず申し訳なさでいっぱいです。1月は学期末試験に追われるので、2月中には入茶して、緑パフォを出せるように、緑の問題にも手をつけたいです。本格的にアルゴリズムを使う問題は割と難易度が広いので、優しいものから徐々に勉強していきたいです。
これからも楽しく、焦らずゆっくりと頑張りたい次第です。

閲覧ありがとうございました！
実時間処理, OESK(58)

実時間処理または高速制御の仕組みは、いろいろ考えることができる。 


<この項は書きかけです。順次追記します。>
This article is not completed. I will add some words in order.

# clock 
CPUのclockがどれだけかによって、どれくらいの処理が可能かが比例する。　
clock以外は同じ処理能力の設計であれば、処理時間はclockに比例する。 

100MHzのCPUは、1GHzのCPUの10分の1の処理速度である。　

# Register 幅 
4bit, 8bit, 16bit, 32bit, 64bit, 128bit と増えてくれば、計算結果のビット数が多いほど、処理精度が高い。もし、計算精度が必要な場合は、同じClockであればRegister幅が広い方が有利だろう。　

メモリアドレスが何ビットかは、次の主記憶装置の大きさに関する事項で分類でき、アドレス幅が何bitあろうが、実メモリが存在しない場合には有り難みが少なく、意味をなさないかもしれない。　

# メモリ容量 
8KB(kiro byte), 64KB, 1MB, 10MB, 100MB, 1GB, 10GB,100GBなど、容量が大きければ、　
あらかじめ複雑な計算結果を値として持って、表記美で結果を渡すことができる。　
どのような処理かによるが、高速化に大容量が関係できることがわかる。　

# 固定小数点、浮動小数点 
計算を整数だけにすれば、高速処理は実現しやすい。　
小数を扱いたい場合も、浮動小数点ではなく、固定小数点にした方が処理速度をかせぐことができるかもしれない。　浮動小数点演算装置の能力による。問題の大きさと、必要な精度により、絶対といえるとは鍵らないかもしれない。

# 割恋処理　
外部からの入力があれば、すぐに必要な処理へCPUのハードウェア機能またはファームウェア機能として実現していれば、高速処理が可能である。　
CPUの設計によっては、レジスタを表裏の２種類もち、高速に切り替える機能をもっている場合があった。　

## 割り込み優先度　
割り込みの種類によって優先度を設定できるCPUがある。　
処理したい割り込みの種類と関連性によるが、割り込み優先度がいくつあるとよいかについての実情はよく存じ上げない。　

個人的には３つか、４つくらいまでは設計できる気がする。　

例えば、ブレーキとアクセルとハンドルとかの入力割り込みと、モータの出力制御割り込みの３種類。　

割込みの概要と簡単な実例

http://memes.sakura.ne.jp/memes/?page_id=1588

## 割り込み禁止区間の最小化　
必要以上に割り込み禁止区間を設定しないことが大事かもしれない。　
最小時間の割り込みに対して、その時間の半分以下で実行できないようだと、他の処理が実行できる確率は極端に減っていくかもしれない。　

例えば、100マイクロ秒ごとの割り込み処理があった場合に、処理時間が50μs以上かかると、他の処理がほとんどできなくなるかもしれない。　
　

![interrupt.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51423/0af8f0ac-8b11-7b76-0a65-be22370773ec.png)

上の図の上の４つが、１、２、４、８と倍の時間間隔の処理で、それぞれが４分の１の時間で終わるようなら納まることがわかる。　

上の図の下の３つは、１、４、１６と４倍の時間間隔の処理で、それぞれが４分の１の時間で終わるようなら治ることがわかる。



# 資源天井規約

OSEK/VDX OSでは、資源を使う処理では、　
その資源に優先度を割り当て、資源待ちによる処理停止(dead lock)が起きないようにする仕組みがある。　

さらに、重要なことは、最優先処理は、資源を割り当てなければ、その天井よりも上で実行でき、制御を妨げない仕組みになっている。　周期の４分の１以下で終わるようであれば、他の処理の設計にも悪い影響は与えないかもしれない。　

例えば、一まわり大きな周期処理の場合も、その周期の４分の１以下で終わるようであれば、ほかの処理の設計にも悪い影響は与えないかもしれない。　


＜この記事は個人の過去の経験に基づく個人の感想です。現在所属する組織、業務とは関係がありません。＞
This article is an individual impression based on the individual's experience. It has nothing to do with the organization or business to which I currently belong.

# 文書履歴(document history)
ver. 0.01 初稿 　20240427
### 最後までおよみいただきありがとうございました。
いいね　💚、フォローをお願いします。
#### Thank you very much for reading to the last sentence.
Please press the like icon 💚　and follow me for your happy life.
Ubuntuでcronを使った定期実行の基礎

# 概要

Ubuntuで…

* 毎日朝5時に再起動。
* 13:05、14:05…のように毎時5分になったらバックアップ実行。

のようなことをしたい。

そのような『定時実行』は『cron』という機能を使えば可能。

この記事ではそのcronの設定方法についての基礎をまとめます。

cronってあんまり触らないから、次触る時は大抵…
**「cronってどーやって設定したっけ？ あ～…完全に忘れてるわこれ！(・ω<) てへぺろ」**
ってなるから、そういう時に読んで思い出す用の記事！

# 設定ファイル単位

まず、cron設定ファイルはユーザー単位で存在する。

設定ファイル編集に入る時のコマンドは下記。
（OSの設定によるが、大抵の場合nanoっていう名前のエディタでcron設定ファイルが開かれる）

```shell:ログインしてるユーザーのcron設定編集に入るコマンド
crontab -e
```

```shell:rootユーザーのcron設定編集編集に入るコマンド
sudo crontab -e
```

「間違って編集しないように or ただ設定がどうなってるかだけ確認したい」
なんて時は ```crontab -l``` または ```sudo crontab -l``` でもいい。
（cron設定確認コマンド）

# 設定ファイルの場所

下記のような場合、cron設定ファイルの場所（ファイルパス）が必要になる。

* ```crontab -e``` はnanoという名前のエディタで開かれるが、慣れてるvimで編集したい。
* cron設定ファイルをバックアップ（コピー）したい。

cronの設定ファイルのパスは『/var/spool/cron/crontabs/ユーザー名』。

つまり、 ```sudo crontab -e``` ではなく、下記のようなコマンドでも設定ファイルの編集は可。

```shell:rootユーザーのcron設定ファイルをvimから直接編集するコマンド
sudo vi /var/spool/cron/crontabs/root
```

# cronは『分 時 日 月 曜日 コマンド』で設定

例えば
**毎時0分に『/home/backup.sh』っていうシェルスクリプトを実行**
って時のcron設定値は下記。

```shell
0 * * * * /home/backup.sh
```

|設定項目|備考|
|--|--|
|分|0～59で設定。|
|時|0～23で設定。（24時間表記の値）|
|日|1～31で設定。|
|月|1～12で設定。|
|曜日|0～7で設定。<br>0=日曜、1=月曜、2=火曜、3=水曜、4=木曜、5=金曜、6=土曜、7=日曜。|

下記のようにコメント残しておくと便利かもね。

```shell
# 分 時 日 月 曜日 コマンド
# 0=日、1=月、2=火、3=水、4=木、5=金、6=土
0 * * * * /home/backup.sh #毎時0分にファイルサーバーバックアップ
```

（参考サイトのURLをコメントに残しておく形でもいいかもね）

# 全てを*にすると1分単位

cron実行間隔の最小単位は1分。
つまり、下記のように設定すると1分ごとに実行される。

```shell
* * * * * /home/backup.sh
```

# 『〇分毎』『〇時間毎』という設定も可

```shell:5分ごとに実行するcron設定値
*/5 * * * * /home/dead_or_alive.sh
```

```shell:３時間ごとに実行するcron設定値
* */3 * * * /home/file_backup.sh
```

* 5分に一回死活監視して、落ちてたら通知飛ばす。
（すぐ通知させたいから1時間に1回だと少ない…）
* 3時間に1回くらいの間隔でファイルサーバーのバックアップとりたい。
（1時間に1回だと多いけど、1日1回では少ない…）

なんて時に使えます。

# 『深夜3～4時は除外』『毎週月～金のみ』という設定も可

『-』で範囲指定、『,』区切りで列挙ができる。

例えば下記のようなこともできる。

```shell:毎時0分、ただし0時～2時と5時～23時のみ実行する設定 = 深夜3～4時は除外という設定
0 0-2,5-23 * * * /tester.sh
```

```shell:毎週月～金曜の午前0時実行する設定 = 土日は除外という設定
0 0 * * 1-5 /tester.sh
```

* 日次の再起動中は死活監視を停止したい。
* 処理が集中する時間帯は実行しない。
* 重いバッチを実行するタイミングとcronによるバックアップが衝突しないように。

なんて時に使えます。

# 設定ファイル変更後に再起動などは不要

Ubuntuやcronの再起動は不要。
『設定ファイルをロードし直す』みたいなこともしなくてOK。

# 蛇足

実行タイミングはできるだけcronに寄せた方がいいと思う。

『cronでは毎時で設定して、シェルスクリプト内で曜日判定して実行する or しないを制御』
みたいなことすると **cronの設定を見ただけだと実行タイミングが分からない** ということになる。
というか、cron設定だけを見て「曜日関係なく実行してるんだ」って勘違いしてバグの元になる。

やむをえずそういう構成にする時はcron設定側にコメント残しておこう！


# 参考サイトさん

https://self-development.info/%E5%AE%9F%E8%B7%B5%E3%81%A7%E4%BD%BF%E3%81%88%E3%82%8Bcrontab%E3%81%AE%E6%9B%B8%E3%81%8D%E6%96%B9%E3%83%BB%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%95%E3%82%92%E3%82%8F%E3%81%8B%E3%82%8A%E3%82%84%E3%81%99/

https://www.yoheim.net/blog.php?q=20190902

# バージョン

Ubuntu 20.04.5 LTS

TODO:毎月31日に設定した時、2月28日は実行されないよね？（月末処理）
TODO:日に0などの想定範囲外の値をセットした時の挙動。（設定ミスした時、設定ミスの行だけスキップ？それとも後続全て止まる？）
Google UXデザイン：モックアップ（統一性・多様性）

# はじめに

わたしが[Google UX Design Certificateで得られた素晴らしい体験][google]を、特に重要だと思われるポイントを小さく分割して、わかりやすく簡潔に紹介していきます。

興味があれば、ぜひ Google UX Design Certificateを受講してみてください。

[google]: https://qiita.com/mapami/items/7a0d0a3d4661c50f8bec

https://www.coursera.org/professional-certificates/google-ux-design

<details><summary>これまでの振り返り</summary>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/f2187262-b8bf-f99d-7690-daa56c7093fc.jpeg" width="700">

</details>

# 統一性と多様性の概念

### 統一性（Unity)
 - デザイン要素をいかにうまく組み合わせて、1つのデザインアイデアを作り上げる。
 - UXデザイナーは、デザイン内のさまざまな要素間の統一性を利用して、ひとつのアイデアを伝えることができます。これが、「まあまあのUIデザイン」と「素晴らしいUIデザイン」の違いになることが多いのです。

### 多様性(Variety)
- デザインに含まれる要素を多様化し、単調さを解消して視覚的な面白さを生み出す。
- UXデザイナーは、多様性を利用することで、異なるが類似した要素を使用して、ユーザーの注意を引きつけることができます。

# 統一性の実例

製品全体の統一感について考えるとき、いくつかのポイントがあります。

- ***<font color="MediumVioletRed">要素同士の配置</font>***
- ***<font color="MediumVioletRed">要素の形状</font>***
- ***<font color="MediumVioletRed">テキスト要素の連続性</font>***

以下のYouTube Musicアプリで説明します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/7cabb252-6c09-75b3-7bfd-200de9c1203e.png" width="600">

#### 要素間の配置（左）

2つの赤い図形は、同じ大きさです。この赤いボックスは、これらの要素が形ではなく、画面上で占める面積の中で統一されていることを表しています。

#### 要素の形（真ん中）

赤い四角は、すべて同じ大きさです。この画面ではさまざまな原理が働いていますが、ボックスのデザインによって、このデザインがすっきりと整理され、ナビゲートしやすくなっていることは間違いありません。

#### テキスト要素内の連続性（右）

- 見出しは、同じ色、同じフォント、同じ配置で表示されています。
- 説明文も、同じ色、同じフォント、同じ配置で、説明文の許容スペースより長くなっても、同じ色、同じフォント、同じ配置です。

これらはすべて、アプリのフローを統一するためのものです。テキストを含む各要素には場所があり、決してスペースからはみ出ることはありません。

# 多様性の実例

Googleフォトのアプリは、デザインに多様性を導入するための一つの解決策を備えています。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/50b4fd3e-0652-bcbe-b4c6-18a5018091bf.png" width="250">

Googleフォトのデザイナーは、この写真集全体を通して、典型的な正方形のグリッドを維持することを選択することができました。その代わりに、一部の画像は長方形として元のサイズを維持することを選択しました。この長方形は、正方形の画像の中に散りばめられており、美的センスに優れています。このように、画像に変化を持たせることで、ユーザーの興味を惹きつけています。

# 統一性と多様性のバランス

ニュースメディアのアプリについて考えてみましょう。ほとんどの記事は、統一されたデザインを持っており、白い背景に濃い色のテキストを使用します。

ここで、天気予報の速報ニュースがあったとします。ニュース速報の背景は、赤や黄色など明るい色になるかもしれません。このように、速報に多様性を持たせることで、統一感をなくし、ストーリーに緊急性を持たせることができます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/645311da-ef4e-da57-8483-215e97652945.png" width="400">

このように多様性を持たせることで、速報性を際立たせることができますが、それは他のストーリーのスタイルが統一されているからこそできることです。

統一性と多様性をバランスよく組み合わせることで、ユーザーの注意を引きながら、視覚的な手がかりを提供することができます。

しかし、注意しなければならないことがあります。あまりに多様性に富んでいると、調和がとれなくなり、重要な情報が読みづらくなります。大切なのはバランスです。

# さいごに

デザインプロセスの早い段階で、統一性や多様性といった原則について考えておくことは、とても良いアイデアです。これらの概念を取り入れながら作業を進めることで、ユーザーが製品デザインに関わり続けることを保証する、真に魅力的な製品を生み出すことができるのです。
OpenCV を Visual Studio と C++ で動かす

# VirtualBox の支配からの脱却

OpenCV なんて、Python で書けばいいんですけど、授業の関係で C++ を使うらしいです。Python のコードもあるらしいんですが、「Python でしか書けないから C++ のコードわかんな～い」というのはダサいです。環境ぐらいは欲しいんですが、WSL だとうまくいきませんでした。教授が配る Ubuntu を VirtualBox に入れればそれでいいんですが VirtualBox は重いので別の方法をとりましょう。

# Visual Studio

Visual Studio は 統合開発環境 (IDE) です。コンパイルや実行、デバッグ、コーディングなどを単一のアプリで行います。今回は C++ を動かします。

## 導入

https://visualstudio.microsoft.com/ja/downloads/

ここからコミュニティを無料ダウンロードしましょう。

https://learn.microsoft.com/ja-jp/visualstudio/install/

https://learn.microsoft.com/ja-jp/cpp/build/vscpp-step-0-installation/

ここら辺を参考に C++ の環境を整えます。

Hello world! くらいをしときましょう。 Ctrl + B でビルド（コンパイル）して F5 で実行です。

# OpenCV

OpenCV は画像処理に便利なライブラリです。stdio.h みたいなものです。

## 導入

https://opencv.org/releases/

ここから Windows 版をダウンロードしましょう。

# フォールバック位置の設定

このままだと、いくつもコードを作ると重くなります。原因のファイルを別の場所に保管するように設定して、その中だけを定期的に削除するようにして、容量を軽くします。

## 設定方法

Visual Studio のフォールバック位置を自分で作ったフォルダにしよう。中は定期的に削除しよう。

# テンプレートの作成

テンプレートを作成し、環境変数を一々追加しなくてもいいようにしましょう。

## 作成方法

https://learn.microsoft.com/ja-jp/visualstudio/ide/how-to-create-project-templates/
Ruby WASMを少しだけ触ってみる

Rubyをブラウザで動かせるようになったらしいです
日々Rubyを書いているエンジニアとしてはHello Worldぐらいはやってみたいので実行してみました

こちらのExampleを参考にやってみます

https://github.com/ruby/ruby.wasm/tree/main/packages/npm-packages/ruby-wasm-wasi/example

## Hello Wasm
ブラウザのコンソールにHello, Wasmと表示してみます

```html:hello_wasm.html
<html>
  <script src="https://cdn.jsdelivr.net/npm/ruby-head-wasm-wasi@0.5.0/dist/browser.script.iife.js"></script>
  <script type="text/ruby">
    puts "Hello, Wasm!"
  </script>
</html>
```

![1457d886ea54bab5894501c313193a5b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362594/f2f28db0-cbb8-e3d4-fb64-e87d298309d3.png)

動きました！！！

## DOM操作
DOM操作をやってみます
formに入力された値を受け取ってそのまま表示してみます

```html:hello_wasm.html
<html>
  <script src="https://cdn.jsdelivr.net/npm/ruby-head-wasm-wasi@0.5.0/dist/browser.script.iife.js"></script>
  <input id="input" type="text">
  <div id="result"></div>
  <script type="text/ruby">
    require "js"

    document = JS.global[:document]

    input = document.getElementById 'input'
    result = document.getElementById 'result'
  
    input.addEventListener 'change' do |e|
      result[:innerText] =  e[:target][:value]
    end
  </script>
</html>

```

JSのAPIをRubyから利用しているみたいですね！
実行してみます

![b8f15de67821d621f36574207faf3876.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362594/f18ff853-c891-13f3-09c4-af0e49f86c1b.png)

表示されましたね

## まとめ
Quick Exampleを動かしてみただけで複雑なことは何もやらなかったですが、ブラウザ上でRubyの実行をできるのがシンプルに面白いですね
今後どうなっていくのか、非常に楽しみです
一人前のその先へ！！！一歩踏み出すためのエンジニアキャリアwhy型・how型という考え方

この記事は[モチベーションクラウドシリーズアドベントカレンダー2022](https://qiita.com/advent-calendar/2022/mcs)の20日目の記事です。
（どうやら、去年も20日目に書いてたみたいですw去年書いたもう少し若手向けの記事は[こちら](https://qiita.com/vankobe/items/d4cc886f89a4b62e8977)）

こんにちは！モチベーションクラウドシリーズの開発チームでエンジニアリングマネージャーをしている江上です。弊社開発チームは、新卒からエンジニアになったメンバーも多くおり、若手の成長が組織の成長を牽引しています。
4年前に内製化が始まり、当時新卒として配属されたメンバーも一人前と認められ、チームリーダーなどを任されるようになってきました。中途でジョインしてくれる人たちも、そのフェーズの人が多い気がします。そんな一人前を乗り越えたフェーズになるとこんなことがよく起きてる気がします。

- 一人前と認められたことで、「あとは自力で頑張れ」って感じで放置され、教えてくれる人もいなくなった
- 今までは、誰に聞いてもある程度答えてもらえていたが、だんだん課題に応じて聞く相手が変わってきた
- チームリーダーとして、得意不得意に関わらず、様々なことをやらなければいけなくなり自信がなくなってきた・疲れた

この記事ではそんな「一人前にはなれたので、その先を目指す」フェーズにいる人たちに向けて、成長を加速するためのwhy型・how型という考え方を紹介しようと思います。自分の目指す先を決めたり、それを実現するための道筋を立てる上で少しでも参考になれば幸いです。

## 課題：リーダーは全てを求められる or リーダーじゃなければ求められない
**もともと考えていたキャリアの階層構造**
![キャリアの階層構造](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68146/3a0dbe12-72fd-49a1-485c-3a6b9bb0f5de.jpeg)
もともと、弊社では上記のような階層構造があることを前提に、[輝かしい未来](https://qiita.com/vankobe/items/d4cc886f89a4b62e8977)など将来キャリアの設計を行っていました。しかし、いよいよリーダーになろうという人が増えたことで、上記リーダー層においていくつか課題が見えてきました。
（弊社だと、why型の人が比較的多いので以下のようになりましたが、how型の人が多い組織だと課題も逆転してるかも）

- リーダーとして期待をかけられると、なんでもできるスーパーマンを求められてしまう
- プロジェクトやチームの管理が苦手な人には、一般的なリーダー像が当てはまらずに、周りが何を求めていいかが曖昧になり期待されにくい

どっちをとってもシンドイため、キャリアアップに対して消極的になってしまいます。また、成長を加速する上では周りのサポートも不可欠ですが、このままだと何をしたらいいのか？周りも迷ってしまいます。

## リーダー層におけるwhy型とhow型という考え方
そこで、リーダー層にwhy型とhow型という考えを取り入れました。

**why型・how型を取り入れた後のキャリアの階層構造**
![why型・how型を取り入れた後のキャリアの階層構造](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68146/cd63b5a0-2ac7-7801-d1e8-fd43a86359a5.jpeg)

### why型の定義
| 項目|内容 |
|:-|:-|
| 特徴|「なんでやるのか？」を考える。プロダクト志向な人 |
|保有すべきスキル | 要件定義力、プロジェクトマネージメント力、フルサイクルにおける各フェーズへの理解 |
| 責任を持つこと| チームの状態・プロセス　|
| やること| プロジェクト管理・プロセス改善・要件定義書の作成・設計・実装・テスト　など|
| その後のキャリア| マネージャー / VPoE / 事業責任者 / テックリード / CTO など|
| 後輩育成時の責任| ポータブルスキルの育成 ≧ 技術スキルの育成|
| かけられる期待| 「なぜやるのか？」「事業インパクトは？」までを自ら思考して提案することができる|


### how型の定義
| 項目|内容 |
|:-|:-|
| 特徴|「どうやって実現するのか？」を考える。技術志向な人|
|保有すべきスキル |特定領域の技術理解、秀でた設計力・実装力 |
| 責任を持つこと| システムの品質・可用性・生産性、その人にしか解けない課題の解決　|
| やること| 設計・実装・テスト・アーキテクチャ・リファクタetc　|
| その後のキャリア| スペシャリスト / CTO / テックリード など|
| 後輩育成時の責任| 技術スキルの育成 ≧ ポータブルスキルの育成|
| かけられる期待| 「どうやると最高のシステムになるか？」「どうしたら最強か？」　を自ら思考して提案することができる。（ 「なぜやる？」「事業インパクト？」はマネジャーやwhy型が伴走する）|


## why型とhow型に合わせて、責任や行動を変える
上記のように、why型・how型で求められる責任や行動は変わってきます。そうすると、自然と参加する会議や身につけるべきスキルや思考も分化していきます。

そこで、それぞれのタイプにむけて、弊社で行っている施策を以下に並べてみました。自分がどちらのタイプか？によって自社で参加すべき会議の精査や、スキルアップする上で考えるべき観点の参考にしていただければと思います。

### why型に向けた施策
期待されるのは、なぜやるのか？を考え、チームを牽引して事業を成功させることです。
そのため、以下のようなことを実施・企画しています。
- プロジェクトマネージメントの勉強会の実施
- 要件定義の勉強会の実施
- プロジェクト進捗の報告主体者への任命
- 実施しているプロセス改善やチーム施策の共有

### how型に向けた施策
期待されるのは、どうやるのか？を考え、個力を存分に使いながら、時にはチームを牽引し、その人にしか解けない課題を解決することで、事業の成功に貢献することです
そのため、以下のようなことを実施・企画しています。
- プロダクトの技術課題の洗い出し
- 取り入れたい技術・アーキテクチャの議論
- 開発環境のアップデートに関する議論
- 実施している技術的挑戦の共有

## 最後に
いかがだったでしょうか？why型・how型というのは、便宜上分けただけであり完全に2分されるものではないと思います。また、分けたからといって事業やチームの状態によっては結局両方やらないといけないケースもあると思います。ただ、自分がどっちに近いのか？どっちもできるのか？を知ることで、適切に周りの期待を調整したり、誰かに頼るきっかけになるといいなと思っています。
それでは、良い開発人生を！
wsl の インストール エラー 0x8024001e

<!--
wsl の インストール エラー 0x8024001e
wsl wsl2 エラー インストール winget
-->
# 概要っぽい
wsl2 (Ubuntu) をインストールしようとすると、 0x8024001e のエラーが出た。

# 冒頭の結論
1.シャットダウンしてからwinget無しでインストールする。
~~~
wsl --shutdown
wsl --install Ubuntu
~~~
## 以上です
　お疲れ様でした。
　以下は、メモ用に試行錯誤していったものを記述しています。良ければ読んで下さい。

# エラー内容の説明
0x8024001e はパッケージの破損を意味するエラーらしい

# 1.パッケージを手動インストール
## 1-1理論(対処)
別手法でダウンロードして、そのファイルを実行する。
## 1-2実行
~~~
$ winget show -e --id Canonical.Ubuntu.2204
~~~
ダウンロード URL: にブラウザでアクセス。
## 1-3結果
DLしたファイルを実行するも、同様のエラーだった。

# 2.wingetを使わない戦法
## 2-1実行(対処)
~~~
$ wsl --install Ubuntu
~~~
## 2-2結果
~~~
PS C:\Users\hoge> wsl --install Ubuntu
インストール中: Ubuntu
Error: 0x8024001e
Error code: Wsl/InstallDistro/0x8024001e
~~~
## 2-3解析
　変化なしだった。

# 3.成功 - 一回黙らせてみる
　shutdown を実行する。
　その後は 2.と同じで wingetを使わない。
## 3-1実行
~~~
$ wsl --shutdown
$ wsl --install Ubuntu
~~~
## 3-2結果(成功)
~~~
PS C:\Users\hoge> wsl --shutdown
PS C:\Users\hoge> wsl --install Ubuntu
インストール中: Ubuntu
[==========================77.0%=============              ]
~~~

# 結論
　[冒頭の結論](#冒頭の結論)で述べた。
VSCodeでの変更を即座にブラウザに反映する。


コードを編集するたびVSCodeで保存してブラウザをリロードするのがめんどくさかったのでコードの変更を即座にブラウザに反映することにしました。
## ①VSCodeの保存設定を自動保存にする

VSCodeの「ファイル」→「自動保存」にチェック！
これVSCodeの変更が自動的に保存されるようになります。
![スクリーンショット 2022-12-18 22.33.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3014485/aeffe231-34d0-1420-a457-e21cc8e60c38.png)


## ②ブラウザを自動更新する拡張機能「Live Server」を入れる。

VSCodeのサイドバーの拡張機能から「Live Server」をインストールします。

![スクリーンショット 2022-12-18 22.31.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3014485/4b6bcc99-330a-90d9-3349-61c7e3d9b6c9.png)

拡張機能をインストールすると`Go Live`アイコンが下の青い領域 (ステータスバー) に表示されるはずです。
（されない方はVSCodeを再起動してみてください。）
![スクリーンショット 2022-12-18 22.37.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3014485/2786ae9a-36f5-3007-93e4-69360377e476.png)
`Go Live`ボタンをクリックすると`Live Server`と連動できます。

これでVSCodeでの変更を即座にブラウザに反映することができました！
QiitaでTeX形式の数式を書いてみる

# 基本の書き方
今後数式を挿入することが多々あると思うので練習がてら書いてみます．
文中では数式に変換したい部分を`$`で囲む．

>構文：`$` y =x `$`  
>結果：$y =x$

なんて簡単なことでしょう．ほとんど練習するまでもないようです．

# とりあえずいっぱい数式を書いてみる

### 運動方程式  
$F=m\ddot{x}$
  
### 回転行列  

数式エリアとして設定するときにはコードブロックに`math`を指定.
```math
\bf{R} = 
\begin{pmatrix}
\sin \alpha \cos \beta& -\sin \beta & \cos \alpha \cos \beta\\
\sin \alpha \sin \beta&\cos \beta & \cos \alpha \sin \beta\\
-\cos \alpha & 0 & \sin \alpha\\
\end{pmatrix}
```
死ぬほど面倒だった．なるべくやりたくないな...
<br>
飽きたので随時テンプレとして使えそうな数式は追加していきます．
カメラをゲームパッドで操作

「instantNeRFで遊ぶ Advent Calendar 2022」の25日目・最終日です。

今日はinstantNeRFのカメラをゲームパッドで操作する方法について検討しました。

:::note
業務外の個人的な検討活動です。
:::

:::note alert
警告
環境や入力内容によっては現在使用できている状況が壊れることがあります。
あなたの責任と判断で試してください。私は責任を取りません。
:::

#### テストデータ
sketchfabのNefertiti statueを使用させていただきました。ありがとうございます。

https://sketchfab.com/3d-models/nefertiti-statue-d148f771c3f44225b56cb7ce8d3c5ce6

#### PCとの接続確認
予めWindowsとゲームパッドの接続を確認しておきました。

https://volx.jp/dualsense-connect-usb-bluetooth


#### imgui_impl_glfw.cpp
testbed.cuを読んでいたら呼び出し先のimgui_impl_glfw.cppにgamepadという単語を見つけました。

#### imgui.cpp
- ImGuiIO()
Settingsというコメントを見つけたので、試しにゲームパッドが有効になりそうなenumを割り当て直したところ、ゲームパッドの操作が有効になりました。

![24-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103446/d67e5ebf-6c43-4c14-5561-7f6a4b68b3f3.png)

- NavUpdate()
試しにRStickの設定を追加しました。
![24-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103446/2c13ec51-872e-e37b-8077-693d0190a0a4.png)

#### imgui.h
試しにImGuiNavInputのマッピングを追加してみました。
![24-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103446/bdc266c0-9a79-772a-b5a7-3f668902edfc.png)

#### mapping.h
使うゲームパッドのマッピングがなかったので"glfw mapping"をネットで検索して見つけたMappingを追加しました。

#### testbed.cu
L3とR3にビューのリセット、LStickとRStickに視点の移動を設定しました。ドローンのコントローラのmode2を真似ました。

![24-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103446/aa3feebb-0ab7-ad47-9895-2f2babd3d25f.png)
![24-5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103446/aebdd0e2-5b02-3dbe-d662-6b5ce1e72eb1.png)

#### testbed.exe
ビルドしなおして実行した様子です。
理屈はよく分かりませんが動きました。
<iframe width="560" height="315" src="https://www.youtube.com/embed/zHmxYppAIzA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

#### 最後に
本当にたくさんの仕組みが仕掛けてあり楽しめました。
もっときれいに再生するための撮影方法や、ネットワークの具体的な実装、複数のネットワークの合成などの編集など、まだまだ検討しきれていないです。

Unityへの実装も興味深いです。

https://github.com/NVlabs/instant-ngp/issues/1060

そしてnerfStudioも検討してみたいです。

https://docs.nerf.studio/en/latest/

新年も取り組みたいことが満載です。
よう先生の呼吸・循環生理学Qiita

自分のまとめも兼ねて、医学部生(高学年)〜初期・後期研修医が使えるくらいの感じで、キモとなりそうな呼吸生理学をまとめていきます(~~要するに今さら成書を読むのが大変な方達を対象にしてます~~)。

ハッシュタグは **#よう先生の呼吸・循環生理学Qiita** とします。

直接的にQBとか過去問とかについて回答する場ではありません(*Twitter*でリプくれてもあまり答えないかもですし、国試予備校の先生の方が問題の解き方はプロだと思いますので)。

下のような感じで考えてますが、変わるかもしれません。上記ハッシュタグで追いかけてください。

# 目次
## 右心不全と左心不全の病態鑑別
左心不全だけ、右心不全だけ、左心不全から右心不全に至ったもの。これらの病態を鑑別しましょう(これができないことには同仕様もありません)。まずは簡単なイメージを頭に置きましょう。フランク・スターリングの心臓の法則についても触れると思います。

## 右心不全をきたす主な病態について
肺が悪いことが循環動態に与える影響について考えましょう。

## 左心不全をきたす主な病態について
ここで肺水腫とARDSの鑑別についても触れると思われます。

## 心エコーによる循環動態の評価
かなり理想的なViewが撮れる状態での話にはなりますが。

## 人工呼吸管理について
- 陽圧が何をしているのか
- 人工呼吸器からの離脱とは結局どういうことなのか？ ,etc.

細かいモードについては触れませんし、細かい英語のモードを覚えるのが大事なのでもありません。人工呼吸管理を学ぶとき最も困るのが、**陽圧(あるいはPEEP)が何をしているのかが解っていない**、に尽きますね。なので陽圧による影響に焦点を絞って論じます。離脱については、多くの病態で、**陽圧からの離脱**であることが自然と理解されると思います。

## 陽圧換気が適した病態について

## 陽圧換気が適さない病態について
実は陽圧換気が適さない病態があります。*心不全＝陽圧換気*とだけ覚えていてはだめですよ。

# 目標
仰々しく書きましたが、ゆるく更新して行きます。(~~元々私が暗記が苦手だったんで~~)細かい診断基準などは出来るだけ触れずに、疾患名の羅列にならないように、脳内に呼吸循環のイメージを抱けるような記載を心がけます。
dotfilesの配置はGNU Stowを使おう！

HRBrain Advent Calendar 2022、23日目の記事です。

https://qiita.com/advent-calendar/2022/hrbrain

## はじめに

こんにちは。株式会社HRBrainでエンジニアリングマネージャーをしている山口です。

いろいろなウイスキーでハイボールを作って飲むYouTubeチャンネルを見ていたら、すっかりウイスキーに沼ってしまいました。是非コメントでオススメのウイスキーを教えてください。

本記事では、GNU Stowを使ったdotfiles管理について紹介します。

![ヌーのイラスト](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106236/90bbeb1c-5b6c-79c4-b04b-5a428c17b067.png)

## dotfilesって何？

dotfilesとは、ドット（.）から始まる設定ファイルのこと。ホームディレクトリで`ls -la`を実行すると表示されるアレです。

![ls -laの実行結果](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106236/753f7a31-03b5-2001-4d99-daebf74dd93d.png)

基本的には自動的に作成されるものが多いですが、`.ssh/config` `.zshrc`などは自分好みに編集しますよね。

マシン交換時に毎回設定するのも面倒なので、自分用リポジトリを持っている人も多いのではないでしょうか。

## GNU Stowって何？

https://www.gnu.org/software/stow/

GNU Stowとは、シンボリックリンクファームマネージャーです。

システム上にあるソフトウェアやパッケージを、別のディレクトリにインストールされているように見せるシンボリックリンク、これを簡単に管理できます。

今回はこのStowを利用して、dotfilesを任意の場所に配置しようって魂胆です。

## やってみよう

### dotfilesを集める

まずは管理したいdotfilesを1つに集めます。パッケージ名などでディレクトリを分けておくと良いです。

```
dotfiles
├── code
│   ├── keybindings.json
│   └── settings.json
├── git
│   └── git
│       ├── config
│       └── ignore
├── ssh
│   └── config
├── tig
│   └── .tigrc
└── zsh
    ├── .zpreztorc
    ├── .zprofile
    └── .zshrc
```

Visual Studio Code・Git・SSH・tig・zshの設定を置くとしたら、こんな感じでしょうか。

### Stowを実行する

dotfilesをまとめることができたら、あとはもうStowを実行するだけです。

```zsh
stow -R -v -d ./dotfiles -t ~ ssh tig zsh
stow -R -v -d ./dotfiles -t ~/.config git
stow -R -v -d ./dotfiles -t ~/Library/Application\ Support/Code/User code
```

`-d`で指定したディレクトリ内にあるパッケージへのシンボリックリンクが、`-t`で指定したディレクトリに作成されます。

![stowの実行結果](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106236/41223324-4cea-3cc2-77e8-fe43dec15eeb.png)

良い感じ！

もうこれで、マシンを入れ替える度に、たくさんのdotfilesを`cp`や`ln`でいちいち配置しなくてもいいですね！

実際に自分が使っているリポジトリを公開しているので、もし良かったら参考にしてください。

https://github.com/yug1224/dotfiles

## 最後に

HRBrainでは引き続き仲間を募集しております。最新の募集状況などは下記からご確認ください。

https://www.hrbrain.co.jp/recruit
DevContainerでDockerの引数オプションを使いたい

## DevContainerでDockerの引数オプションを使いたい

## 忙しい人のための要約
- DockerのオプションをDevContainer上で設定するには　`runArgs`で渡せばいい
- こういうことDevContainerで見るにはどうすればいいかなという時には[devcontainerのプロパティのRef](https://containers.dev/implementors/json_reference/)を読むと良い


## きっかけ

[DockerのDocument](https://docs.docker.com/config/containers/resource_constraints/)ではメモリ量の設定の項目があったがこれに対応するDevContainerの設定がわからなくて困った。Dockerコマンドを間接的に呼んでいるのでDockerではなくDevContainer側で設定を渡してあげる必要がある。

## そうだ一次情報を読もう

ということで[DevContainerの公式ドキュメント](https://containers.dev/)です。こういうことではまって以降ライブラリーを使う時には一次情報である公式Docの場所を探すようになりました。こういうものは習慣化してリファレンスに残しておくとちょっとした疑問が出た時に便利です。
公式リファレンスのOverViewを見ると、コンテナの用途の広がりにより開発用途のライブラリー等を入れたコンテナの必要性が生まれてきたことなど「この技術の嬉しさ」が書かれており ~~酒のつまみに使える~~読み物としても公式Documentは面白いものとなっています。

DevContainerの[reference](https://containers.dev/implementors/json_reference/)ページには`devcontainer.json`に書くことができるプロパティが一覧で載っています。代表的なのは以下にあります。

- **forwardPorts**：ポートフォワードに関わるコンテナ設定です。Docer Composeと併用する時には使い所が多そう。1台構成の場合はDevContainer側がよしなにホストとポートをくっつけてくれますDockerの `-p`オプションに近い働きをしている。
- **mounts**： コンテナに.devcontainerが置かれているディレクトリーに加えて別なディレクトリーもマウントしたい場合に使う。Dockerの`--mount` に対応。
- **runArgs**: DockerCLIを呼び出す時の追加引数を設定することができる。

今回の場合引数の`--memory=8g`というオプションを付け加えたいのでDevContainerに以下のような値を書き加える。
```
(前略）
        "image": "mcr.microsoft.com/devcontainers/typescript-node:18-bullseye",
        "runArgs": [
                "--memory=6g"
        ],
（中略）
}
```

## 最後に

日本語化されていないものでもオプションなどなら読めることも多くあるので英語だからと敬遠せずに食らいついていきましょう…！
~~それはそれとしてDevContainerのDocument日本語化されて欲しい。~~
ただの人事担当者が会社のモーションロゴを作った話


## はじめに

本稿は<b <a href="https://qiita.com/advent-calendar/2022/systemi22">システムアイ Advent Calendar 2022</a></b>の記事です。

非エンジニアであり、ただの人事担当者が 「会社のロゴが動いたらかっこいいよね」 という気持ちだけで、`After Effects`でモーションロゴを作った話です。

これを読んで、"畑違いのことをやってみる"精神に 『健闘を讃えたい:clap_tone2:』 という人が1人でもいてくれたら嬉しいです。


<details><summary>参考にしたサイト・動画</summary>

* <a href="https://www.udemy.com/course/after_effects_motion_graphics/">現役クリエイターが教える！After Effects モーショングラフィックス「超」入門</a>
* <a href="https://www.youtube.com/@ActionPlanet">Action Planetあくしょんプラネット</a>
* <a href="https://helpx.adobe.com/jp/after-effects/user-guide.html">After Effects ユーザーガイド
</a> 

</details>

## 自分たちで作れるでしょ！

ある日、グループ会社の会社紹介動画を見る機会があり、現役エンジニアであり弊社の代表から「うちもこれ作ろう」と言われたのが始まりでした。その動画は外注で○十万という費用をかけて作られたものでしたが、「まあ、自分たちで作れるでしょ！」と言われ...
"あれ？作れるかな、作れるかも:fist_tone2:"という脳の錯覚が起こり始めました。

`After Effects`初心者が抑えておきたいポイントを勝手にまとめてみます。

## 発想の転換

ロゴそのものに柔軟なアニメーションをつけて動かす為には、Illustratorのデータに沢山小細工をしておく必要があります。デザイナーさんと連携を取れる環境なら依頼可能ですが、それはできなかったので、ロゴではなく、その周りにモーションを持たせていくことにしました。

↓完成したモーションロゴ
![☆推し　白ベース背景有_1_AdobeExpress.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342244/d3a1ef61-1931-160c-bffd-e8a2ade3959a.gif)

モーショングラフィック入門レベルでもこれが作れました。工夫した点は下記です。
* ロゴの周囲にモーションをつける
* 背景画像に濃淡をつける
* ショートカットキー暗記

## 侮れないショートカットキー
何かとショートカットを覚えるとかなり作業効率になりますよね。初心者の私でもかなり使ったのが下記です。

```ruby: 超基本
選択ツール: V
```
必ず選択ツールに戻すようにクセづけると、操作ミスを減らすことができます。

```ruby:レイヤープロパティ表示
位置: P
回転: R
スケール: S
不透明度: T
アンカーポイント: A
キーフレームが打たれたプロパティ表示: U
```
P(位置)を表示した後にT(不透明度)も一緒に表示したいとなった時、上記のショートカットキーに`+ Shift`を追加するとプロパティ項目を追加表示することができます。

例：　`P`のあと`T + Shift`
![shortcut-key2-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342244/2baa1394-fa5a-a2e0-71cc-08b03aadeeba.png)
ちなみに`+ Shift`を押さないと、前に表示させていたP(位置)がT(不透明度)を押すと消えてしまいます。追加して一緒に表示させたい時は忘れずに。

```ruby:キーフレーム追加
位置： Option + Shift + P
回転: Option + Shift + R
スケール: Option + Shift + S
不透明度: Option + Shift + T

Windowsは`Option`を`Alt`に変更してください。
```
キーフレーム追加はかなり使います。`Option` + `Shift`にずっと左手置いたままでもいいかもしれないです:innocent:

```ruby:タイムライン微調整
１フレーム先に移動：　Command + →
１０フレーム先に移動：　Command + Shift + →

Windowsは`Command`を`Ctrl`に変更してください。
```
前に移動する場合は矢印を逆「←」にするといけます。
`Ctrl`もしくは`Command`キーをおしたまま矢印キーを連打で自由にフレーム移動が可能です。

## おわりに
『`After Effects`はキーフレームを打つ作業だ』
本当にこれに尽きると思います。 "キーフレームによってアニメーションする" という表現が、正しいかわかりませんが、しかし、時の流れにキーフレームを打ち、動きを加えていく..そんなイメージです。

最後に、会社のロゴ刷新に合わせて作り直したモーションロゴも載せちゃいます。ちょっと成長ver.と言えますかね・・:sweat_smile:


![OP_new_AdobeExpress.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342244/9ca8f261-5e7f-9114-03db-7923a62499e7.gif)
同じpage内で同一のStimulus controllerを何度も利用したいとき

# 概要
PF用にアプリを個人開発しているRailsしか知らない素人です。親愛なるDHHが提供するHotwireを完全に理解した　までも行きついていません。何もかもが霧の中、私はどこにいるのか… 
その　Hotwireに含まれる必要十分なJSパッケージ、 Stimulusのcontrollerを同じページ内で何度も使用する状況の際、なんかうまくいかないなぁ🤔、ハマったなぁ😂、ということがあったのですが、とても単純なことで解決できたので、Stimulusはいいぞ👍、もっと流行ってくれというご祈祷として記事を作成します。

## 環境
この記事作成当時の一番latest releaseのversionを使用してました。
```Gemfiles.rb
# 抜粋です
gem 'stimulus-rails', '~>1.2.1'
```

## やりたかったこと
タイトルの通り、同一page内で同じstimulus controllerを何度も利用したい。

## 結論
使う場所ごとに個別にcontrollerを宣言してその中でtargetやactionを記載すればうまくいきました。

## 経緯
pageの先頭や`application.html.erb`の`main`タグのすぐ下で`data-controller`を宣言しているのをよく見かけていたので、それに倣ってかどうかわからないのですが、pageの先頭のdivタグで宣言しておいてその中で`data-ホニャララ-target`や`data-action`を複数書いてました。
ここではpreviewという名前のcontrollerを何度も利用したいとします。
```erb
<div data-controller="preview">
    <div data-preview-target="source" data-action="preview#imagePreview">
    ...
    </div>
    <div data-preview-target="source" data-action="preview#imagePreview">
    ...
    </div>
</div>
```
普通に変な感じがするなぁと思いますよね。それではやっぱりダメなんですね。
結論で述べた通り、使いたいところで個別にcontrollerを宣言すれ動作しました。

```erb
<div>
    <div data-controller="preview">
        <div data-preview-target="source" data-action="preview#imagePreview">
        ...
        </div>
    </div>
    <div data-controller="preview">
        <div data-preview-target="source" data-action="preview#imagePreview">
        ...
        </div>
    </div>
</div>
```

## 所感
下記の参考サイトが詳しいですのですが、stimulusのcontrollerは単一責任にするべしとのことです。そうすることで再利用性が高ますぞとのこと。自分ができているかは置いといてなるほどなぁと。実際に再利用しようと思ってやってみると中々うまくいかなくてどうしましょうとなったので、同じ思いをする人が一人でも減ったらいいと思ってマス。（こんなことでハマるのは私以外にいないか…）
一個controllerという部品できればいろんなところに簡単に適用できるので楽ちんです。
**stimulusはいいぞ👍**

## 参考サイト

https://techracho.bpsinc.jp/hachi8833/2022_06_30/119133
Markdown で AsciiMath を使う方法

ファイルの上部に下のヤツをコピペする。`@@` ~ `@@`の間に数式が書ける。

```md
<script type="text/x-mathjax-config">
  MathJax.Hub.Config(
    {
      jax: ['input/AsciiMath'],
      extensions: ['asciimath2jax.js'],
      asciimath2jax: {delimiters: [['@@','@@']]}
    }
  );
</script>
<script src="http://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js?config=TeX-AMS_CHTML-full"></script>

@@ [[1,2],[3,4]] @@
```

---

参考

http://asciimath.org/
Vue.js3系  郵便番号を入力すると自動で住所入力する機能

# はじめに
Vue.js3で郵便番号を入力すると自動で住所入力する機能を使用したいと思い備忘録もかねて記事を書こうと思います。
# 結論
下記のライブラリをインストールすると使用可能です。
```ターミナル
$ npm i yubinbangou-core2@^0.6.3
```
インストール後、package.jsonの中にyubinbangou-core2がインストールされている事を確認
```package.json
"dependencies": {
    "yubinbango-core2": "^0.6.3"
}
```

# Vueファイルに記述
インストールしたライブラリを使用するためにyubinbangou-core2をインポートする

```pages/index.vue
<script setup>
import { Core as YubinbangoCore } from '@yubinbango-core2';
</script>                       
```

# 存在する郵便番号を入力しconsole.logで表示されるか確認
YubinbangoCoreを使うためにはnewを使ってインスタンスを作成する必要があります。
（postcodeを文字列として扱っている理由は、int型で実行するとエラーになるためです。原因は分からないです。。。）

第二引数はコールバック関数になっておりvalueに住所が返ってきます。
ちなみに、`@change`は入力フォームから離れるとイベントが発生します。
console.logで確認します。
```pages/index.vue
<script setup>
import { reactive } from 'vue'
import { Core as YubinbangoCore } from '@yubinbango-core2';

const form = reactive({
    postcode: null
})

const fetchAddress = () => {
    new YubinbangoCore(String(form.postcode), (value) => {
        console.log(value)
    })
}
</script>

<template>
<input type="number" name="postcode" @change="fetchAddress" v-model=form.postcode>
</template>
```

確認するとこのように返ってきます。
`value.キーの値`で値が取得できます。
```console.log
{
    extended: ""
    locality: "新宿区"
    region: "東京都"
    region_id: 13
    street: "四谷坂町"
}
```

# まとめ
郵便番号のinputタグに郵便番号を入力
入力後、カーソルを離すとfetchAddressが実行される
addressタグでは、v-modelを使用していますのでreactive対応しているaddressの値が変われば、住所に値が入る仕組みになっています。


```pages/index.vue
<script setup>
import { reactive } from 'vue'
import { Core as YubinbangoCore } from 'yubinbango-core2';

const form = reactive({
    postcode: null,
    address: null
})

const fetchAddress = () => {
    new YubinbangoCore(String(form.postcode), (value) => {
        //console.log(value)
        form.address = value.region + value.locality + value.street
    })
}
</script>

<template>
<label>郵便番号</label><br>
<input type="number" name="postcode" @change="fetchAddress" v-model=form.postcode><br>
<label>住所</label><br>
<input type="text" name="address"  v-model=form.address><br>
</template>
```
Memory Managementin Javascript

## はじめに

株式会社エアークローゼットでエンジニアをしているtangoと申します。

この記事は[エアークローゼット　アドベントカレンダー2022](https://qiita.com/advent-calendar/2022/air-closet "エアークローゼット　アドベントカレンダー2022")の19日目の記事になります。

今回はJavascriptでメモリ管理について話したいと思いますので、ぜひ最後までご覧ください。

## 背景

みんなさん、C言語を触ったことがありますか？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103998/d4e1ec12-5c33-ea25-81ef-d0bda101edc0.png)

C言語を触ったことがある人にとってはわかると思いますが、大体3ステップを分けています。
① 必要なメモリを割り当てる
② 割り当てられたメモリを使用する
③ メモリを解放する

ここでのポイントは、 手動でメモリを解放するというところです。 結構めんどくさいのところですね。
もちろん、メモリを解放しなくても大丈夫ですが、そのプログラムプログラム内で確保したメモリがどんどん増えていきます。
言い換えると、他のプログラムが使用できるメモリがどんどん減ることになります。 

では、Javascriptではどのようにメモリ管理が行われるでしょうか？ 
答えは、メモリが不要になった時に自動的に解放してくれます。このプロセスが、ガベージコレクション（GC）と呼んでいます。

しかしプログラムの書き方によっては、確保したメモリがGCによって開放されずにメモリが肥大化し、内部処理を圧迫していくことになります。

## ガベージコレクション（GC）
Javascriptは2つのデータを持ってます。
① プリミティブ型
② 参照型

・プリミティブ型（string, int, boolean）は気にしなくても自動的にメモリを解放されます。
・参照型（ojbect, array）は自動的に解放されないケースがありますので、注意が必要です。

ガベージコレクションが実行するたびに、プログラム全体が中断されるため、ガベージコレクションの頻度が高くなると、
パフォーマンスに影響を与える可能性がある。

ガベージコレクションは2つの主要なアルゴリズムを使用して、不要な参照と達成不能コード、参照カウントとマークアンドスイープを検索します。

### 参照カウント
・参照のないオブジェクトを探します。
・オブジェクトを指す参照がゼロの場合は、オブジェクトを解放できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103998/97a986f5-1513-9d59-60e5-3534550668ae.png)
変数```user```はオブジェクト```{name: “Alex”}```を参照してます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103998/cc94ce96-f25f-3f3c-69ef-29678ca3f14b.png)
```user = null```をセットすると、参照がなくなる。
オブジェクト Alex は到達不能になりました。ガベージコレクタはデータを捨て、メモリを解放します。

### 2つの参照
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103998/67d176b6-7672-504a-e69e-46c6ee0c9dd4.png)
```user```の参照を```admin```にコピーします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103998/31d521e4-afe1-b034-8285-7d7a69aec998.png)
```user = null```をセットしても、オブジェクトはadmin経由で達成可能なため、解放できない。
```admin = null```をセットしたら、オブジェクトが達成不能になり、解放できるようになります。

### 循環参照
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103998/29abc7af-435b-0a6e-4350-a1bb983e8212.png)
```person, employee = null```をセットしても、
循環参照を持っているため、これらのオブジェクトを解放できない

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103998/ba15e74e-6c9a-5849-c4f8-22d7d7fe988e.png)

## サマリ
・ガベージコレクションは自動で実行される。実行を制御したり、防ぐことができない
・オブジェクトは達成可能な場合はメモリ上に保持される
・オブジェクトへの参照がなくなった場合は、自動的にメモリを解放される

### あとがき
最後までご覧いただきありがとうございました。
[エアークローゼット Advent Calendar 2022](https://qiita.com/advent-calendar/2022/air-closet)はまだ続きますので、興味あれば、ぜひ他のエンジニア、PMの記事もご覧いただければと思います。
データセンターからの撤収で困った話

謎のアドベントカレンダー、第 24 話です。

社外向けサービスの AWS 移行が完了し、データセンターから撤収することになったときの話です。

## DR サイトめんどくさい問題

遠方なので、廃棄業者の手配や筆者含め作業メンバーの移動などもろもろ面倒でした。

手配を漏らすと二度現地に行かないといけなくなりますし。

なお、手伝ってもらった SI 業者の方が「フロントのネジを隠す機構」の存在を忘れてサーバーをラックから外せず、しばらくあたふたしていたのは内緒です。

（ほかにもコンビニでシュークリーム大噴出事件を起こしたりとか楽しい方でした）

## データの消去とドライブの破壊難しい問題

ラックの本数も増えデータ量も増え処分が必要なドライブの本数も増え…といったところで悩ましいのがデータの消去とドライブの物理破壊の問題です。

![hdd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123899/6e5b5f63-6da1-6887-4c0b-8eeb55add353.png)

ストレージの大容量化とアプライアンス化によりデータ領域を確実に消去するのも難しくなりました。

（今は SSD が多いので余計に大変ですね。修理交換と廃棄を考えると、自動暗号化ドライブの採用は必須ですね）

ドライブについては専門業者に依頼してポータブル破壊機（磁気消去＆穴あけ機）を持ち込み、強力な磁気を照射しながら穴をあけて破壊した上で産業廃棄物処理業者に引き渡し…なのですが、カートリッジ部分を外さないとポータブル破壊機に入れることができません。

（基本的には破壊後にサーバー本体とともに産業廃棄物処理業者に引き渡して、全体を破砕後マニフェストを受け取る流れでした）

数百個のドライブ 1 つ 1 つを、精密ドライバーで小さなネジを外しながらカートリッジから外していく作業がとにかく大変でした。

精密ドライバーはグリップが細く金属製だったこともあり、人差し指と親指の先の皮がめくれました（手袋してるとそもそも回せない…）。

特に、DR サイトは寒い時期に撤収したので、ドライブの破壊も機器の搬出口（要は建物の外）で震えながら作業をしました。

## 最終的に

物理の機器と設置拠点がなくなってしまうのは寂しい気がしましたが、同時にすっきりした気分にもなりました。

さっぱり。

---

ラスト、25 日目の記事に続きます。

- **[https://qiita.com/hmatsu47/items/f6d4e9f550f2adf65695](https://qiita.com/hmatsu47/items/f6d4e9f550f2adf65695)**

https://qiita.com/hmatsu47/items/f6d4e9f550f2adf65695
俺がユーザーだ

# 自分のためにつくるのがわかりやすい
　どこにでも書いているようなことだが、個人開発は自分をターゲットにすると非常にやりやすい。普段どのようなことに困っていて、「こんなことあったらいいな」と解決策を妄想しているのであれば話は早い。つくってしまおう。

# わたしの場合
　自分の場合も、まさに「俺がユーザー」だった。週ごとの振り返りを文章でまとめてslackに投稿している期間があったが、一から打ち込むのが非常に面倒くさい。なにか良いツールがないかと思ったが、そんなにないのだ不思議。TODOリストは数多くあるが、「目標をたてて、振り返りをする」という仕様に特化したツールは見なかった。

　じゃぁつくろう！

# 迷っても「俺がユーザー」だから大丈夫
　ものを作っていくと迷いが生じることがある。特にユーザーの操作性に関わること。これを実現するにはAとBどちらの方法を使えばいいが、どっちがユーザーにとって好ましいのかわからない。とか。

　俺がユーザー！　であれば問題はない。開発者が好きな方を選べばいい。開発者=ユーザーだと、そんなかんじでスムーズにいく。

# おわり
　個人開発ははじめは全然ユーザーはいないはずなので、この考えはわりとよかったりする。自分がストレスのないやり方、すきなやり方、それに沿って開発しちゃえばいい。なんてったって、個人開発だから。
「買ってよかったもの」を共有しあう社内アドベントカレンダーについて

[LIFULL Advent Calendar 2022](https://qiita.com/advent-calendar/2022/lifull)で「お、みんな**カレンダー1**を埋めてくれてるやん！2も作ったろ！」と安易な気持ちで作ったのですが、それ以上参加者が伸びなかったので、小ネタですが投稿します😅

LIFULLには社内の「**買ってよかったものアドベントカレンダー**」という2018年から突如始まった風習があります。これは年末に「今年買ってよかったもの」を共有し合うものです。

![スクリーンショット 2022-12-18 21.25.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127762/441a3d02-564d-14a2-5772-9363bd9c0500.png)

今年も次のようなテーマの話が一日一個投稿されています。

* ふるさと納税を始めて役に立った話
* オーダーメイド枕を買ってよく眠れるようになった話
* 世界で100人くらいしかやってなさそうなゲームを始めた話
* 統計学やデータ解析について勉強になった本

例えば今年入社の @JeongJaeSoon さんがけっこうリモートワークの環境を整えていて、自分もいくつか役に立ちそうなものがありました。その一部が「[（番外編）日本での新生活を始めて、デスク環境を新たに構築](https://qiita.com/JeongJaeSoon/items/7af3f9cf84595f0dbb37)」で紹介されています。彼の環境をいくつか真似してみようと思います。

> ![スクリーンショット 2022-12-18 21.34.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127762/40b49ab9-971a-7eef-8e5f-8ea38ad5020f.png)

非公式に社員が勝手にやってる謎のイベントなのですが、次のような点で（少なくとも私にとっては）実際に役立ってるし、実は普段話せないノウハウを共有できる良い習慣だと思っています。

* ここ最近は「これって宣伝目的の記事じゃない？」とか思ってしまって、ネットの情報を鵜呑みにできないから助かる
* 気になるものがあったら、コメントで聞いてしまえる
* 「あの人って今どんなものに興味持ってるんだろう」っていう、リモートワークで難しい雑談のきっかけになる
* 「今年買ってよかったもの」というテーマなら気軽に投稿しやすい
* 年末に自分が使っているツール（キーボードやデスク等）を見直すいい機会になる

この記事を書くにあたって「実は他の会社でも似たことやってるんじゃないか？」と思って、「社内アドベントカレンダー」というキーワードで検索したところ、いくつかヒットしました。実は私が気づいていなかっただけで、メジャーな風習なのかもしれません。もしほかの会社で「自分たちの会社はこうやってる」みたいな面白い知見があったらコメントください！

* [2020年社内アドベントカレンダーを開催しました](https://currentia.co.jp/recruit/477/)
* [自作キーボードの沼を覗いた👀～社内アドベントカレンダーの様子をお伝えします！](https://style.biglobe.co.jp/entry/2021/02/17/110000)
* [社内アドベントカレンダーradventについて](https://koyamay.hatenablog.com/entry/2015/01/16/121031)
* [WordPressで社内のアドベントカレンダーをやったお話](https://qiita.com/akiko-pusu/items/09dade692ef12be4d0d4)


特に最初の[カレンティアさんの記事（「2020年社内アドベントカレンダーを開催しました」）](https://currentia.co.jp/recruit/477/)が面白いですね。私たちLIFULLでは気軽な話が多いのですが、設計やディレクションの話などは社外に出そうとするとどうしても一般論っぽい部分しか出しづらいこともあるので、こうした機会に社内向けに仕事の話を書くのもアリなのかもしれません。

それはそうとこの記事は私も読んでみたいですｗ

> **熱量桁違い：舞浜に越して一年が経った今、良かったこと悪かったことまとめ**
> こちらの記事はカレンティア屈指のディズニー狂Mさんの記事です。
>
> ディズニーの城下町舞浜に住むメリット・デメリットを熱狂なファン目線で語っており、
> その熱量は桁違いでした。
Spring Bootで業務アプリに日付や年月を入力したかった話

結論から言うと、「Flatpickr」を使いましょうというお話。
# 前提条件いろいろ
もう来年（2023年）には Internet Explorer は廃止になって勝手にアンインストールされるとかされないとか。それなのにいまだに IE 対応を求めてくる顧客がいるのはなぜなのでしょうね・・・。リリースは来年4月以降なのに。
IE 対応だと HTML やら JavaScript やら色々と制約あるため、種々の条件を検討した結果、 Spring Boot + Thymeleaf + Bootstrap4 で開発することになりました。 Vue とか React は IE 対応で苦労しそうなので使いません・・・。
# 日付や年月を入力したい
業務アプリは大抵の場合、日付入力が必要になります。入力のしやすさを求められるので、単なるテキストボックスに「YYYY/MM/DD形式で入力してください」などという仕様は許されるはずもなく、カレンダーからの入力を求められます。ところがBootstrap4で開発を進めていくと、なんとも面倒なことに、 bootstrap-datepicker は Bootstrap3 までしか対応してないし、jQuery の datepicker を使おうとすると jQuery UI のバージョンが合わなかったりして一筋縄ではいきませんでした。
# Flatpickr
色々調べたら Flatpickr は Bootstrap や jQuery に依存しないということで、これを導入することにしました。

Maven の pom.xml にはこんな感じで dependency を定義します。
```
<!-- https://mvnrepository.com/artifact/org.webjars.npm/flatpickr -->
<dependency>
  <groupId>org.webjars.npm</groupId>
  <artifactId>flatpickr</artifactId>
  <version>4.6.13</version>
</dependency>
```

ビューには \<head> 配下にこんな感じで書いて css と js を読み込みます。今回は「日付入力」だけでなく「年月入力」も必要なので monthSelect プラグインを導入し、 css クラス名は日付入力を fl-datepicker に、年月入力を fl-ympicker とすることにします。なお dateFormat は submit したときにサーバー側で受け取る日付文字列のフォーマットで、 altFormat で画面表示の際の日付文字列のフォーマットを定義することができます。
```
<!-- Flatpickr -->
<link rel="stylesheet" th:href="@{/webjars/flatpickr/dist/plugins/monthSelect/style.css}">
<link rel="stylesheet" th:href="@{/webjars/flatpickr/dist/flatpickr.min.css}">
<script th:src="@{/webjars/flatpickr/dist/flatpickr.min.js}" defer></script>
<script th:src="@{/webjars/flatpickr/dist/l10n/ja.js}" defer></script>
<script th:src="@{/webjars/flatpickr/dist/plugins/monthSelect/index.js}" defer></script>
<script>
window.addEventListener('DOMContentLoaded', function () {
  flatpickr('.fl-datepicker', {
    locale: 'ja',
    altFormat: 'Y年m月d日',
    altInput: true,
    dateFormat: 'Y-m-d'
  });
  flatpickr('.fl-ympicker', {
    locale: 'ja',
    altInput: true,
    plugins: [new monthSelectPlugin({
      altFormat: 'Y年m月',
      dateFormat: 'Y-m'
    })]
  });
});
</script>
```

\<body> には\<input type="text"> を使ってこんな感じで書きます。
```
<div class="form-group">
  <label for="ymd1">日付１：</label>
  <input type="text" id="ymd1" class="fl-datepicker" value="2022/12/02"><br>
</div>
<div class="form-group">
  <label for="ym1">年月１：</label>
  <input type="text" id="ym1" class="fl-ympicker" value="2022/12"><br>
</div>
```
---
IE で表示すると、日付はこんな感じになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102402/fdef5eda-77e5-03d3-62ba-dd6308dc2228.png)

年月はこんな感じ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102402/30cba6db-bca2-8e66-17c9-b3586c92b26e.png)

# その他いろいろ
Flatpickr は MIT ライセンスなので業務利用も可能です。
見た目をカスタマイズしたい場合は[公式サイト](https://flatpickr.js.org/)や[flatpickr - にほんご。](https://tr.you84815.space/flatpickr/)を参考にしてください。

ちなみに Windows 11 で IE 11 を表示するには、「コントロールパネル」で「インターネットオプション」を開いて、「プログラム」タブの「アドオンの管理」をクリックして、「ツールバーと拡張機能の詳細」をクリックします。
VSCodeでElixirのデバックする方法

# はじめに

IO.inspect()にはお世話になってます。

エラーがでたら、その都度、IO.inspectを仕込んで、値確認こんなデバックよくやってます。

でも、デバッカーを使って、サクッと動作を見たい時もあります。

VSCodeでデバッカーを使う方法についての情報が見当たらなかったので、書いてみます。

Pythonのプログラムの場合、デバッカーを起動すると、選択中のPythonファイルが自動的に実行されてデバッカーが起動します。
しかし、Elixirの場合は、このような機能はありません。
[ここ](https://gist.github.com/Tomboyo/ef8db1ed6beb2a88a8d5fb1d7ff3d76b)に良い方法があったのでこの設定例を使って説明します。


# 環境設定

* VSCodeにElixirLS をインストール

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532235/e997f195-c178-4e25-db21-84d0991e83fe.png)

- デバッカーの設定を開く(①を選択して、②の設定ボタンを押す)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532235/9f97f9da-000f-4fed-6df7-6389c2f90482.png)

launch.jsonがエディター画面に表示されます。その内容を、以下の内容に書き換えます。
configurationsに残したい設定がある場合は、適宜残してください。よくわからない場合は、丸ごと入れ替えで大丈夫です。

```json
{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "inputs": [
        // This input allows us to prompt the VSCode user for arguments when we run a debug configuration.
        {
            "id": "runArgs",
            "type": "promptString",
            "description": "Enter arguments for `mix run -e`"
        }
    ],
     "configurations": [
        // This configuration runs `mix run -e ...` with arguments supplied by the user.
        {
            "type": "mix_task",
            "name": "mix run",
            "request": "launch",
            "task": "run",
            // Prompt the VSCode user for arguments with `"${input:runArgs}` and pass those along to `mix run -e ...`
            "taskArgs": [
                "-e", "${input:runArgs}"
            ],
            "startApps": true,
            "projectDir": "${workspaceRoot}",
        }
    ]
}
```


# 使い方

③の三角ボタンを押して、デバッカーを起動
入力欄に実行する関数を入力する（mix run -eの引数になります）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532235/f001b91a-b4f4-f06b-9b73-27626491400e.png)

後は、VSCodeのデバッカーの操作方法で操作できます

# 変数の値を見てみる

PythonやJS、Cなどのデバッカー画面と比べると、変数名の表示がちょっと変わってます。
変数名@1のように@1が付加されてます。これは、拘束されると、この番号が増えていくようになってます。

次の例は、３１行目で停止して、agentの値を表示した場合です。
左上のVARIABLES欄を見ると、agent@1と、agent@2があります。

agent@1は、この関数が呼び出された直後のagentです。
agent@2は、30行目を実行して拘束したagentです。
30行目のset_model()は、agent.modelを更新する処理をしています。
agent@1、agent@2比べてみると、modelの値がセットされている事を確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532235/afab1140-fd81-0b08-e500-4befc794913c.png)


参考
https://gist.github.com/Tomboyo/ef8db1ed6beb2a88a8d5fb1d7ff3d76b