OmniAICreator/Qiita-1.07M huggingface dataset:
CSSのobject-fitを学び直す

[ひとりCSS Advent Calendar 2022](https://qiita.com/advent-calendar/2022/css-becolomochi) 19日目です。

object-fit を学び直します。

## object-fit

https://developer.mozilla.org/ja/docs/Web/CSS/object-fit

ごく普通のボックスに、img 要素や video 要素どどのように表示させるかを指定できる。

## 取りうる値

- `none` - 拡大や縮小はされない（実寸）。画像の縦横比変わらず。
- `contain` - ボックス内は埋まらない事がある。画像の縦横比変わらず。
- `cover` - ボックス内がぜんぶ埋まる。画像の縦横比変わらず。
- `fill` - ボックス内がぜんぶ埋まる。画像の縦横比が変わる。
- `scale-down` - none か contain と同じ表示になる。実際のサイズが小さい方が選ばれる。

## つくってみた

Retina 対応を想定し、400px四方の画像を width200px height200px で置いてみた。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41088/a52e18ca-13af-5f13-7ef0-5a9d254b9917.png)

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="VwBZROP" data-user="becolomochi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/becolomochi/pen/VwBZROP">
  accent-color</a> by Beco (<a href="https://codepen.io/becolomochi">@becolomochi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 感想

- none だと Retina 対応できないっぽい
- aspect-ratio と合わせて使うとレスポンシブ対応できる。便利になったなあ
- 縦横比が変わらなくて画像がボケる可能性が低い cover contain は使う回数多そう

## 参考

- https://developer.mozilla.org/ja/docs/Web/CSS/object-fit
今日から始める!ユースケース図入門

ユースケース図に書き方をまとめてみたyo

## 前提

要件定義のうちの一つがユースケース図。


## 書いてみよう
### 基本
基本は以下の２つ。
|  アクター |  ユースケース  |
| ---- | ---- |
|  登場人物 |  アクターがやりたいこと  |

それ以外にも以下も。
|サブジェクト　|  バウンダリ |  エンティティ  |
| ---- | ---- | ---- | 
| ユースケースをグループ化| 画面やボタンなどのインターフェース<br>アクターとシステム内部の境界 |  システム内部で管理するデータ|

### 書く手順
1. アクターから思いつくユースケースを適当に洗い出す。
2. ユースケースに対し「実現するには何が必要か」を考え、追加する。
3. 2まででもイメージできるが、エンティティなども追加するといい。
4. アクターごとにwhile Ture

###  例
![名称未設定ファイル.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3073929/d2a76e63-3b89-e053-cc49-52b6dfea63bb.png)


##  メモ
・手順1ですべてを洗い出そうと思わないこと!徐々にブラシュアップ
・ユースケース名は名詞と動詞にする。（目的を明確する）

## -おすすめツール-
https://app.diagrams.net/
ER図もフローチャートもかける~

##  参考文献
[https://thinkit.co.jp/article/13487](https://thinkit.co.jp/article/13487)
初見でT-DASHを使ってみてうちの会社で使えそうか考えてみた

この記事は「[テスト自動化ツールT-DASHの良い点・悪い点をレビューしてみた！ by T-DASH Advent Calendar 2022](https://qiita.com/advent-calendar/2022/t-dash01)」の18日目の記事です。

https://qiita.com/advent-calendar/2022/t-dash01

今年はアドベントカレンダーの存在をすっかり忘れてしまっていて、気がついたのが15日でもう半分以上終わっていましたとさ。今年は会社のアドベントカレンダーは諦めて、パブリックなアドベントカレンダーに参加しようと思い投稿します。

-----

今年の[シンプルウェイ](https://qiita.com/organizations/simpleway)の目標の一つにテストの自動実行があったですが、目標達成ならず道半ばで頓挫してしまいました。原因はいろいろ考えられるのですが、典型的な原因としては

* 既存のUIテストが手動で行わており、既存のテスト運用を維持しながら自動化のための作業時間を十分に確保できなかった
* SeleniumかLaravel Duskでやろうとしていたので、テストをコード化できるエンジニアが限られてしまっていた

という点が挙げられるかと思います。

ところで、T-DASHというサービスを今回のアドベントカレンダーで初めて知りました。ノーコードでテストを作成・運用できるということで、上記の問題のソリューションになりそうだなと気がついたので、実際に触ってみてメリット・デメリットを考えながらうちの会社で使えそうか検討してみました。

## メリット

:::note info
日本語でシナリオを書ける
:::

これがやはり最大のメリットですね。

テスト自動化って結局プログラム組むことなんですよね。でもプログラム書ける人はプログラマーとして開発チームにアサインしたいのですよ。そうするとテストエンジニアは非プログラマーの集まりになってしまうんですよね。

非プログラマーにテストの自動化コードを書かせるのは非常に障壁が高い! でも、日本語でシナリオを書けるというのはその障壁を取っ払ってくれるのではないかと思います。

また、日本語で書けるというのは既存のテストシナリオを移行しやすくもなります。シンプルウェイのUIテストはGoogle スプレッドシートで管理されているので、加筆・修正していくだけでT-DASHのインポート機能で取り込めそうです。

:::note info
ツールがローカルPCで実行される
:::

シンプルウェイの場合はプロキシが利用できることが重要です。一部のウェブシステムはクライアント企業のローカルネットワーク上に構築されているので、納品前のチェックはクライアント企業のネットワークにVPN接続しつつプロキシ通して通信する必要があります。

他のノーコードテストツールにクラウド上で実行されるものがありますが、これだと上記のシステムには使えないことになってしまうので、うちの会社にとってはアドバンテージです。

## デメリット

:::note alert
機械的な起動に対応していない
:::

シンプルウェイではタスクの自動化にJnekinsを使っているので、機械的にテストを始めたいのですよ。デプロイしたら即テストしたい。

テスト自動化が行えたら次はCI/CDに組み込むことを誰もが考えるのではないかと思います。そのためにはコマンドからテストを開始できるような仕組みが必要かなと思います。

ちょうど別のアドベントカレンダーに「[T-DASHのテストシナリオ実行を自動化出来るかやってみた！](https://qiita.com/94dango/items/9429fa4eec20a994cc61)」とうい記事が投稿されていますが、いまは無理やりな方法しかないのかなと垣間見えます。

:::note alert
Linux版が提供されていない・ヘッドレスモードで動かせない(?)
:::

機械的な起動に関連しますが、CI/CDに組み込むならテスト実行用のマシンでバックグラウンドで実行したいのですよ。

テスト実行マシンにわざわざWindows用意するのもなぁという感じなので、Linuxで動かせるといいなと思いますね。内部的にはPython使っているみたいなので、不可な要望でもなさそうにも思いますが。

また、バックグラウンドで実行するなら画面が見える必要はないので、ヘッドレスモードで動かしたいですね。これはできるのかどうか調べきれていないので、あくまで憶測での要望ですが。

:::note alert
ブラウザの操作記録機能がない
:::

他のノーコードテストツールの売りにブラウザの操作記録機能があるものがあるようですが、これはすごく魅力的な機能だと思います。

まだテストシナリオが整備されていないシステムでツールを利用したいと思ったとき、ブラウザの操作だけでシナリオが自動作成されてかつ日本語化できたら夢のようなのに!

-----

ということで、ざっと一日T-DASHを使ってみて確認できたことからメリット・デメリットを挙げてみました。

うちの会社で使えそうか、ということについては、MAY(使うこともできる)ですかね。ノーコードテストツールを知ってから他の製品も調べてしまったので、ブラウザの操作記録機能がすごくいいじゃん!って思っているのですよね。

まだまだ新しいサービスのようなので今後の発展に期待したいところです。ブラウザの操作記録機能ぜひ実装お願いします!
初心者がDockerを学ぶ　Part1 -Dockerとは-

# はじめに
本記事は業務でDockerやKubernetesを利用するようになったものの、初心者すぎてよくわかっていない私が様々な書籍や講座で調べて学んだ内容を残していくものになっています。
Dockerについてある程度学習した後、Kubernetesの内容に進んでいく予定です。


# Dockerとは
## Dockerってざっくりどんな技術なの？
私みたいな初心者は最初から深い内容を詰め込むとパンクしてしまいます...
まずは「ざっくりこんなもの」から知っていきたい...

ということでまずは[Dockerのドキュメント](https://docs.docker.jp/get-started/overview.html)の概要あたりをちょっと読んでみます。
>Dockerはアプリケーションを開発（developing）、移動（shipping）、実行（running）するためのオープンなプラットフォームです。
>
>Dockerがあれば、アプリケーションを管理するのと同じ方法で、あなたのインフラも管理できます。
>Docker的な手法を最大限活用しますと、テストやコードのデプロイを素早くできますので、コードを書いてから、プロダクション（実行環境）で動かすまでにかかる時間を著しく軽減できます。

>Docker は、コンテナ（container）という緩やかに隔離された環境 （isolated environment）で、アプリケーションのパッケージ化と実行をする機能を提供します。

コンテナという技術でインフラの管理を楽にしてくれる、デプロイが簡単になるみたいな感じでしょうか。

## インフラの管理やデプロイが簡単になるってどういうこと？
はい、ざっくり読んでるだけなので当然こうなります。
ソフトウェア開発では、アプリ開発者がコードを書いて、インフラ/運用エンジニアが本番環境にデプロイするような流れが多いかとおもいます。
この時、開発環境/テスト環境/本番環境で**それぞれが全く同じ環境ではない**ということがよくあります。
つまり「開発環境では動いていたのに本番では動かない」ということが起こります。

そして、Dockerを利用することで、この問題をどうやら解決できるみたいです。
開発者がコードやライブラリをパッケージングしてDocker Imageというものをつくり（コンテナ化して）、インフラ/運用エンジニアにDocker Imageをそのまま渡し本番環境にデプロイする。
こうすることで「開発環境では動いていたのに本番では動かない」ということを防げるんですね。

![docker.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3061337/ddee48ad-ba62-dc61-5e81-109189044df8.png)



## 仮想化の技術（VM）と何が違うの？
コンテナという技術を利用して、別々のマシンで同じ環境を構築する。
なんとなく仮想化と似てますよね。違いとしては以下のような感じです。

- 仮想化
  - ホストOS上にゲストOSを用意してアプリケーションを実行する
- Docker
    - ホストOS上に1つのDocker Engineを起動して複数のコンテナを起動する

![VM_Docker.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3061337/e021171d-4769-211c-c040-bb76bc34c0f6.png)

Dockerを使うときのメリットは、、、
- 軽い
    - ゲストOSを複数作成するわけではないのでプロセッサやメモリの消費が少ない
    - コンテナ上に「OSっぽいもの」はあるが、OSの機能のいくつかをホストOSに託すことで軽くなっている
- ストレージの使用量が減る
    - OSイメージのサイズがだいたい5~10GBくらいに対して、Docker Imageのサイズは1~2GBらしい
- 起動時間が早い
    - 仮想化と比べると、カーネルをいちいちロードする手間が省ける
- 複数環境での運用が楽
    - DockerさえインストールされているOSならどこでもコンテナを起動できる

## ここまで出てきた用語について
コンテナとかdocker ImageとかDocker Engineとか、しれっと出てきてるのに意味説明してない単語ありますね。ここで少しだけ書いときます。

### コンテナ
データやプログラムを入れておくための入れ物、箱みたいないイメージでしょうか。
とりあえずそれくらいのイメージで、、、

### Docker Image
コンテナを作成するための素。
中に入れるソフトウェアによってそれぞれ用意されたイメージを使います。

nginxを利用するために公開されてるイメージを使う、みたいな感じ。
コマンドの使い方とかは後でいろいろ出てくるんですが、下記のような感じでイメージを取得します。

```
docker pull nginx
```
### Docker Engine
Dockerをつかうためにインストールするソフトウェアのこと。        

# Dockerをインストールしてみよう
私はMacBookを使っているので```Docker Desktop for Mac```で行いました。


- Docker Desktop for Mac : https://docs.docker.com/docker-for-mac/install/
- Docker Desktop for Windows: https://docs.docker.com/docker-for-windows/install/
- Linux: https://docs.docker.com/engine/install/

# 最後に
今回はDockerって何？みたいなところからインストールするまでをまとめました。
具体的に手を動かしながら学ぶのはこれからなので退屈な内容になっちゃいましたが、きっとこれから学習を進めるにあたっては通らなければならない大事な部分になると思います。（そうであって欲しい。）
それでは次回[Part2](https://qiita.com/Shiroinu716/items/9f55bea970ec83504704)に進みます。
hugo-academicでポートフォリオを作成する

# この記事について
hugo-adcademicにより、Github Pagesを利用してポートフォリオを公開するまでの手順を共有します。
ご参考までに私が作成したWebページは[このような形](https://junffy.github.io/)になっています。



# ポートフォリオを作成する目的
ポートフォリオは自己紹介だけではなく、自身のこれまでの活動やスキルを他者（人事担当者、エンジニア）にすぐに理解してもらえることに役立ちます。
もし、転職を検討されている方であれば、準備して公開しておくことで人事担当者の方の目に付いてご連絡いただく機会を得ることもできます。

また、ポートフォリオ作成は、自分のこれまでについて改めて見つめ直すことで、足りない部分・これからのチャレンジしたいことを発見する良い機会になります。

# 本環境
- Macbook Air 2020
- Intel Processor
- macOS Ventura 13.1
- hugo v0.101.0+extended darwin
- go version go1.19
- Homebrew 3.6.15

# hugoのインストール
1. hugoのインストール
`$ brew install hugo`
2. hugoのインストール確認
`$ hugo -v`
バージョンが出力されればOK

# goのインストール
1. goのインストール
`$ brew install go`
2. goのインストール確認
`$ go version`
バージョンが出力されればOK

# Githubリポジトリの準備

Githubに新しいソースリポジトリを作成します。
[Githubのstarter-hugo-academicリポジトリ](https://github.com/wowchemy/starter-hugo-academic)から`Use this template`を選択して、リポジトリをforkします。

forkしたAcademic templateをダウンロードします。
```
$ git clone https://github.com/[yourname]/[yourname]-portfolio.git
$ cd [yourname]-portfolio
$ git submodule update --init --recursive
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136035/d171cad6-7bd5-cb52-6b33-4689b60ba95d.png)

`config/_default/config.toml`の`baseurl`自身のGithub Pagesのurlに書き変える。
```sh:config/_default/config.toml
baseurl = "https://[yourname].github.io/"
```

Github Pagesの公開リポジトリをサブモジュールとしてダウンロードする
```
$ git submodule add -f -b master https://github.com/[yourname]/[yourname].github.io.gi public
```
# サンプルポートフォリオの確認

hugoサーバーを起動して、ブラウザ上でローカルサーバーを確認する。
```
$ hugo server
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136035/3934ba19-0596-e977-6045-ec493c1e7261.png)


# サイトコンテンツの更新
`[yourname]-portfolio/content/home`配下のファイルを更新する。
公開予定のないページは対応するマークダウンファイルを削除するもしくは、マークダウンファイル内を`active=false`のように書き変える。

# Github上での公開

```
$ hugo
$ cd public
$ git add .
$ git commit -m"launch my portfolio"
$ git push origin main
```
https://[yourname].github.ioをブラウザで確認する。

# 参考
https://mickaellalande.github.io/post/tutorial/how-to-create-an-academic-github-page-with-hugo/

https://qiita.com/haryon0103/items/e94f6a9c2f2cfe717eb2

https://qiita.com/harumaxy/items/58e7e4273c61e7e260b3
プリザンターで特定のテーブルの閲覧履歴を記録する

本記事は [OSSのノーコード・ローコード開発ツール「プリザンター」 Advent Calendar 2022](https://qiita.com/advent-calendar/2022/pleasanter) 19日目の記事です。

# はじめに
[プリザンター](https://pleasanter.org) にはデータベースにログを記録する機能がありますが、特定のテーブルがどの程度閲覧されているか把握する目的には向きません。本記事では記録テーブルとサーバスクリプトを使用し、独自のログを記録する仕組みを作る方法を説明します。

## テーブルの設定
ログを記録する「記録テーブル」を作成し、下記のように項目を準備します。ログが膨大にならないように、同じ日に同じ人が同じレコードを閲覧した場合には、閲覧数をカウントアップする仕様とします。

|項目|表示名|内容|
|:----|:----|:----|
|タイトル|タイトル|閲覧したレコードのタイトルを記録|
|担当者|閲覧者|閲覧した人を記録|
|分類A|参照ID|閲覧したレコードのIDを記録|
|数値A|閲覧数|同じ人が同じ日に閲覧した回数を記録|
|日付A|閲覧日|閲覧した日を記録|

## サーバスクリプト
閲覧ログを取得したいテーブルに設定します。条件は「画面表示の前」にします。

```JavaScript
// 同じ日に同じレコードを閲覧済か既存の履歴レコードを取得する関数
function getRecord(siteId, date) {
    // 既存レコードを取得する条件のデータ
    // Owner: 自分が閲覧したレコードをcontext.UserIdを使用してフィルタ
    // ClassA: 同じIDのレコードをcontext.Idを使用してフィルタ
    // （完全一致にするためColumnFilterSearchTypesをExactMatchに指定）
    // DateA: 同じ日のレコードを引数から受け取った日付でフィルタ
    let data = {
        View: {
            ColumnFilterHash: {
                Owner: `["${context.UserId}"]`,
                ClassA: context.Id.toString(),
                DateA: `["${date},${date}"]`
            },
            ColumnFilterSearchTypes: {
                ClassA: 'ExactMatch'
            }
        }
    };
    // 条件に合致するレコードを取得
    let records = items.Get(siteId, JSON.stringify(data));
    // C#のオブジェクトなのでlengthではなくLengthでチェック
    if (records.Length === 1) {
        return records[0];
    }
}

// 閲覧履歴を作成する関数
function createRecord(siteId, date) {
    // 作成するレコードのデータ
    // Title: 閲覧しているレコードのタイトルをmodel.Titleで取得してセット
    // Owner: 閲覧しているユーザのIDをcontext.UserIdで取得してセット
    // ClassA: 閲覧しているレコードのIDをcontext.Idで取得してセット
    // NumA: 閲覧数1を初期値としてセット
    // DateA 引数から受け取った今日の日付をセット
    let data = {
        Title: model.Title,
        Owner: context.UserId,
        ClassHash: {
            ClassA: context.Id.toString()
        },
        NumHash: {
            NumA: 1
        },
        DateHash: {
            DateA: date
        }
    };
    // 閲覧履歴のサイトに閲覧履歴レコードを作成
    items.Create(siteId, JSON.stringify(data));
}

// 閲覧履歴の閲覧数をインクリメントする関数
function updateRecord(id, count) {
    // 更新するレコードのデータ
    // NumA: 引数から現在の閲覧数を受け取りインクリメント
    let data = {
        NumHash: {
            NumA: count + 1
        }
    };
    // 対象のレコードIDのNumAをインクリメント
    items.Update(id, JSON.stringify(data));
}

// メイン処理

// 編集画面をリクエストしたときにのみ実行
if (context.Action === 'edit') {
    // ログを記録するテーブルのサイトID
    let siteId = 1291;
    // サーバスクリプト内の日時はUTCとなっているためnew Date()とはしない
    // utilities.Today()を使用してローカル時間の今日を取得
    let date = utilities.Today().toLocaleString();
    // 同じ日に同じレコードを閲覧済か既存の履歴レコードを取得
    let record = getRecord(siteId, date);
    if (record === undefined) {
        // 存在しない場合は閲覧履歴を新規作成
        createRecord(siteId, date);
    } else {
        // 存在する場合は閲覧数をインクリメント
        updateRecord(record.ResultId, record.NumA);
    }
}
```

## 実行結果
記録テーブルに閲覧履歴が記録できました。その他の分類などをmodelオブジェクトから転記することで、クロス集計などを行うことも可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78230/15a52b81-a01e-84c4-f5f3-4b432303820a.png)
./configure: /opt/lampp/bin/apxs: /bin/perl: bad interpreter: No such file or directory

/bin/perlにパールがなかったので、シンボリックリンクを作成
```bash
sudo ln -s /opt/lampp/bin/perl /bin/perl
```

`--with-apxs2=/opt/lampp/bin/apxs`でphpを./configureしたらエラーがでた

```bash
Configuring SAPI modules
checking for Apache 2.0 handler-module support via DSO through APXS... 

Sorry, I cannot run apxs.  Possible reasons follow:

1. Perl is not installed
2. apxs was not found. Try to pass the path using --with-apxs2=/path/to/apxs
3. Apache was not built using --enable-so (the apxs usage page is displayed)

The output of /opt/lampp/bin/apxs follows:
./configure: /opt/lampp/bin/apxs: /bin/perl: bad interpreter: No such file or directory
configure: error: Aborting
```
鉄道用簡易型転落防止装置（無人駅、特急運行対応）

貧乏でもできる簡易型転落防止装置を模索してみたの

## 仕組み

物理的には一切ガードをしない

駅にあるスピーカーやセンサー類を用いる

## そういえばJR拝島駅のホームドアは

https://ja.wikipedia.org/wiki/%E6%8B%9D%E5%B3%B6%E9%A7%85

今は撤去されていますが、かつて昇降バー式ホームドアが設置されており、

このホームドアの特徴として、触れると警告音が鳴ることでした

プレスリリースはこちら(Webアーカイブ）
https://web.archive.org/web/20210214165302/https://www.tacy.co.jp/file/information/6424_261217.pdf

## 同様の仕組みでできないか？

いわゆる、黄色い線の下に重量センサーを埋め込みます。

あわせて、列車が10秒程度以上、その場に静止しているか確認するセンサーを埋め込みます。

```
IF
  黄色い線のセンサーが反応
AND 
  (列車がいない OR 列車が10秒以上停止している）
AND
  鉄道営業時間である
```

で

スピーカーから警告音声を流せば
少しでも転落事故は防ぐことができます。

## 列車が10秒以上停止しているの検出は？

ホームの中央位置(変数A)と、ホーム両端から10mセンサー離れた位置(変数B,C)にレールにセンサーを設置します。

```
if(A && !B && !C) {
  return 停止中;
} else {
  return 線路に何もないか通過中か停止しようとしてるか発車しようとしてる;
}
```
これに秒単位でカウントすればよいことになります。

## この仕様の盲点

列車が発車しようとしているが、10m進むまで検知できないことです。
ですが、目視で十分確認できるかと思われます。

## さいごに
意図的に降りるとか、自殺には対処できませんが、
悲しい事故を安価で少しでも防ぐことはできるはずです。
Rust勉強のために actix-web で Hello world!

この記事は、 [Qiita株式会社のカレンダー | Advent Calendar 2022 - Qiita の 18 日目](https://qiita.com/advent-calendar/2022/qiita-inc)の記事です。

### はじめに
Rustを勉強するため慣れ親しんだWebアプリを作成してRustと親睦を深めることを目的にしています
この記事では簡単に Hollow World を表示までやっていきます

#### Rust のセットアップ

Rust のセットアップに関してはこちらの記事を参考にセットアップした
こちらの記事では割愛させていただきます

https://qiita.com/mziyut/items/3127eb3d975346b1d795

今回Webフレームワークとして actix-web を利用していきます


### プロジェクトのセットアップ

まずプロジェクトのためのディレクトリを作成します

```zsh
$ mkdir ./hello_world
$ cd hello_world
```

次にプロジェクトの初期化を行います
`cargo` を使っていきます
`cargo` はRustのビルドシステム兼パッケージマネージャです

``` zsh
$ cargo init
$ tree
.
├── Cargo.toml
└── src
    └── main.rs
```

ファイルは見ての通り2つ作られます
`Cargo.toml` がプロジェクトの設定ファイルです
`dependencies` 以下に必要なパッケージを記載します

```Cargo.toml
[package]
name = "hello_world"
version = "0.1.0"
edition = "2021"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
```
もう一つのsrc以下のディレクトリに実行ファイルを置くことを期待されています
ここではデフォルトで作成された `main.rs` を見てみる


```rust:src/main.rs
fn main() {
    println!("Hello, world!");
}
```

`Hello, world!` を表示するプログラムになっていることが察せる

では動かしてみる
`cargo run` を実行することでコンパイルされてmain.rsが実行される

``` zsh

$ cargo run
   Compiling hello_world v0.1.0 (/hello_world)
    Finished dev [unoptimized + debuginfo] target(s) in 1.18s
     Running `target/debug/hello_world`
Hello, world!

```


#### actix-web のセットアップ
ここからは実際にセットアップしていきます
`Cargo.toml` に今回使う `actix-web` を追加する
`[dependencies]`セクションにプロジェクトに必要な依存関係を追記することができます

``` diff
[package]
name = "hello_world"
version = "0.1.0"
edition = "2021"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
+ actix-web = "4"
```

`actix-web` のセットアップはこれだけです
ではHollow Worldを表示するように main.rs を修正していきます

```rust:main.rs
use actix_web::{get, post, web, App, HttpResponse, HttpServer, Responder};

async fn hello() -> impl Responder {
    HttpResponse::Ok().body("Hello world!")
}

async fn main() -> std::io::Result<()> {
    HttpServer::new(|| {
        App::new()
            .service(hello)
    })
    .bind(("127.0.0.1", 8080))?
    .run()
    .await
}
```
簡単なコードですが一応コードを見ていきます
`main()` では Appインスタンスを作成して `hello` をルーディングとして設定しています
また`HttpServer`を `127.0.0.1:8080` を指定して起動しています

`hello()` は http status を 200番を指定して`Hello world!`を表示しています
あとは `cargo run` を実行して 127.0.0.1:8080 にアクセスすれば Hello world! と表示されます

はいこれでおしまいです
簡単ですね
ここから機能を作成したりして Rust との親睦を深めていきたいと思います

https://actix.rs/docs/getting-started が分かりやすかったので機能開発等もこちらのドキュメントを参考に進めていきたいと思っています

## 参考にした記事
https://actix.rs/docs/getting-started
https://qiita.com/yoshii0110/items/6d70323f01fefcf09682
【React】react-hook-formを使うなら、zodと組み合わせるといいよ

## はじめに

https://qiita.com/anneau/items/a9b1ad0c70f48558986d

という記事を一つ前のアドベントカレンダーで話しましたが、さらに発展して一つ。

react-hook-formを使うのであれば、zodというスキーマ検証ツールを使うといいよ

という話をします。

## zodの紹介

zodはTypeScriptのスキーマバリデーションツールです。
直感的に使えるので、ざっとREADMEを読めば使えるようになるかと思います。

https://github.com/colinhacks/zod

TypeScriptファーストというのと、シンプルに使えるという点が気に入って使っています。

### スキーマの生成

```ts
const User = z.object({
  username: z.string().min(5, { message: "5文字以上入力してください" }),
  email: z.string().email({ message: "正しいメールアドレスを入力してください" }),
});
```

のようにバリデーションスキーマを作ることができます。

### バリデーション

実際にバリデーションをする場合、`parse`に検証したい値を渡せばできます。

```ts
const user = { username: 'qiitan', email: 'sample@sample.com' }
User.parse(user);
```

:::note
parseだとエラーだった場合、exceptionを発生させるため、safeParseというメソッドも用意されてます。
:::

### 型定義を入手する

zodのスキーマではなく、TypeScriptの型が欲しい場合もあると思いますが、z.inferというtypesにジェネリクスでスキーマを渡すことで実現できます。

```ts
type User = z.infer<typeof User>;
```

## react-hook-form × zod

さて、今回の本題である、react-hook-form × zodという構成ですが、react-hook-formの公式プラグインとして提供されています。

```tsx
import React from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";

const schema = z.object({
  name: z.string(),
  age: z.number()
});

const App = () => {
  const { register, handleSubmit } = useForm({
    resolver: zodResolver(schema)
  });

  return (
    <form onSubmit={handleSubmit(d => console.log(d))}>
      <input {...register("name")} />
      <input {...register("age")} type="number" />
      <input type="submit" />
    </form>
  );
};
```

このようにzodResolverというプラグインを用いて組み込むことができます。

:::note
zodの他にもYup, Zod, Joi, Vest, Ajv など色々用意されてます。
筆者は他をあまり使ったことがないので、他のツールもそれぞれ良いところがあると思いますが、シンプルに使えてTypeScriptファーストなZodが気に入ってます。
:::

## なぜreact-hook-form標準のバリデーションではなく、zodと組み合わせるといいのか

**A. バリデーションロジックをreact-hook-formから切り離すことができるから**

バリデーションロジックというのはとても大切なものです。

react-hook-form標準のバリエーションロジックは、それぞれのフォームを登録する時にオプションとして渡します。

```tsx
<input
  {...register("test", {
    required: true
  })}
/>
```

ですが、これにはいくつかの問題があります。

### 1. ロジックをまとめられる

registerをするのは各コンポーネントになるため、処理が各コンポーネントにばらけます。
該当のコンポーネントに一対一でバリデーションロジックが書かれているというのはそれはそれで都合がいいときもありますが、いくつかの場所で再利用しているコンポーネントだったりすると、追うのが難しくなります。

その点、zodと組み合わせると、useFormするタイミングで全てのバリデーションロジックを流し込むことができるため、一箇所にバリデーションロジックをまとめ上げることができます。

### 2. 再利用性が上がる

標準のバリエーションだと、フォームと密結合になってしまうため、同じバリデーションを送信前や送信後のサーバーサイドで使いまわしたい場合に使うことができません。

フォームのバリエーションをなんとか掻い潜るみたいな悪いことをする人がいないとは限らないので、サーバーサイドでも検証したかったりします。

zodを用いれば、バリデーションロジックのみ切り離すことができるため、サーバーサイドでも同じzodを用いて検証を行うことができます。

### 3. テストが書ける

これが一番大きいかもしれません。

標準のバリデーションだと、バリデーションロジックのみ検証したいのにどうしてもフォームの操作（コンポーネントテスト）が必要になります。

zodを用いれば、バリデーションロジックのみ切り出すことができるため、単体テストを書くことができます。

## まとめ

react-hook-formを使うなら、zodと組み合わせるといいよ

という話をしました。
zodじゃなくてもいいのですが、バリデーションロジックはreact-hook-formから切り離して使うのがいいと思います。
営業＆EC販売領域のDX化


![営業＆EC販売.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1180499/372565e3-c4a1-7cec-fd1a-da2fde5bda87.png)

## DXの起源
DX（デジタル・トランスフォーメーション）は、元々、2004年にスウェーデンのエリック・ストルターマン教授によって提唱された概念です。
2019年に経済産業省が発表した『「DX推進指標」とそのガイダンス』では、DXは以下の通り定義されています。

DXは、本来、データやデジタル技術を使って、顧客視点で新たな価値を創出していくことである。
そのために、ビジネスモデルや企業文化などの変革が求められる。

2020年に総務省が発表した『令和3年版　情報通信白書』では、DXは以下の通り定義されています。

企業が外部エコシステム（顧客、市場）の劇的な変化に対応しつつ、内部エコシステム（組織、文化、従業員）の変革を牽引しながら、
第3のプラットフォーム（クラウド、モビリティ、ビッグデータ/アナリティクス、ソーシャル技術）を利用して、
新しい製品やサービス、新しいビジネスモデルを通して、ネットとリアルの両面での顧客エクスペリエンスの変革を図ることで価値を創出し、競争上の優位性を確立すること

## なぜ今、DX？
DXは単なる流行ではなく、日本政府としても国を挙げて推進していくべき一つの課題だから

その他にも、近い先のIT業界では「2025年の崖」と呼ばれる問題もあります。
「2025年の崖」はこれまでのIT化で培ってきたシステムが抱える問題（老朽化・メンテナンスの複雑化など）です。

これにより企業は次の問題を抱えます。


・　システムの維持には大きなコストが必要

・　知見のあるエンジニアを確保する必要


となります。

システムの維持には大きなコストが必要となり、知見のあるエンジニアを確保する必要があります。
しかし、現行システムを運用保守しているエンジニアの多くは、2025年頃に定年を迎えてしまいます。
このような「2025年の崖」の解決のためにも、迅速なDX推進が必要になっています。

また、「2025年」までに解決しないのであれば、国の産業全体では毎年１２兆円の損失が発生するといわれており、解決が急務となっています。

## MAによりデジタル化した営業DX
営業については既に組織化して「インサイドセールス」と「フィールドセールス」に分けられて、効率化が図られています。

インサイドセールス
見込み顧客（リード）に対して、メールや電話、ウェブ会議ツールなどを活用しながら非対面で行う営業活動およびそのポジション

フィールドセールス
訪問・商談から受注やフォローするポジション

MA(マーケティングオートメーション)を取り入れて、営業プロセスを標準化してデジタルにすることがDXと捉えられることもあります。

![セールスメディア.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1180499/74879b48-60c2-fe80-dad9-e336ba0d95da.png)

引用：[【2022版】インサイドセールスとは？基礎知識やメリット・特徴・役割を解説](https://willof-work.co.jp/salesmedia/article/2964/#i)

MAにはHubSpotなどがあり、webページにアクセスして個人情報を登録して資料請求などをしたところから始まります。
MA発信の営業プロセスは成約率が高くB2BやB2Cで採用されています。

また、リストが存在しない場合に会社のお問い合わせフォーム情報を集めてメッセージを送付する方法もございますが、「売り込む」ではなく「市場から必要にされる」ことが営業には求められていると思います。

## EC業界で進むDX
コロナの流行により世界中で業績が伸びたのがEC業界です。

メーカー企業では既にECを開設してオンライン化が進められていますが、製造過程から倉庫から商品を取り出し梱包して発送というバックオフィスにもデジタル化がすすめられています。

ただし、販売についてECショップは購入を待つという自動販売機に似たシステムとなっています。

しかし現在、SNSやインフルエンサーを活用した「ライブコマース」が流行しています。
「オンラインコミュニケーションEC」により会話を楽しみながら付加価値を加えた販売や欲しい情報の適した広告による販売などが進んでいます。

優れた顧客体験を実現する「LTVの最大化」がキーワードとなっています。

## 最後
ビジネスモデルを変革することがDXの本質です。
情報を収集して日々トライアンドエラーを繰り返す、DX専門業者のナレッジを活用してみてはいかがでしょうか。

引用
[60分でわかる! DX 最前線 (60分でわかる! IT知識)](https://www.amazon.co.jp/60%E5%88%86%E3%81%A7%E3%82%8F%E3%81%8B%E3%82%8B-DX-%E6%9C%80%E5%89%8D%E7%B7%9A-IT%E7%9F%A5%E8%AD%98/dp/4297120321)
Github+vite+amplify+react

# 目的
忘れがちなので、GithubからすぐにCI/CDできるホスティング整備手順。
さくっとフロントの検証アプリを作りたい時に。

# Githubでリポジトリ追加

# git clone
# vite create
```shell
pnpm create vite ./
```

reactを選んでプロジェクト基本構成作成。

# vite.config.ts編集
`base: "./",`を追記。

```vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  base: "./",
  plugins: [react()]
})

```

# Vite + Amplifyへの手当て
```vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  base: "./",
  plugins: [react()],
  define: {
    global: 'window',
  }
})

```

# amplifyで対象レポジトリ追加

# amplify.ymlのbaseDirectory修正
`baseDirectory: /dist`へ変更。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87538/763f0250-4404-39f1-fe3d-45b44357a50b.png)

# manifest.webmanifestをpublic/に配置
```manifest.webmanifest.json
{
  "$schema": "https://json.schemastore.org/web-manifest-combined.json",
  "name": "HackerWeb",
  "short_name": "HackerWeb",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#fff",
  "description": "読みやすいハッカーニュースアプリです。",
  "icons": [
    {
      "src": "images/touch/homescreen48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen168.png",
      "sizes": "168x168",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "related_applications": [
    {
      "platform": "play",
      "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
    }
  ]
}

```

# pnpm
```
pnpm install \
@aws-amplify/ui-react \
@emotion/react \
@emotion/styled \
@fontsource/roboto \
@mui/icons-material \
@mui/material \
@mui/styled-engine-sc \
aws-amplify \
react \
react-dom \
styled-components
```

# aws-exports.ts
aws-exports.jsをtsで扱うことになるが、aws-exports.tsは更新されず、aws-exports.jsが更新されるので、適宜マージする。

# amplify.yml
```
version: 1
appRoot: './web'
frontend:
  phases:
    # IMPORTANT - Please verify your build commands
    build:
      commands: ['npm install --legacy-peer-deps', 'npm run build']
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: './dist/'
    files:
      - '**/*'
  cache:
    paths: ['./web/node_modules']
```

`/web/src`にソースを配置する場合、こんな感じ。
`appRoot`を追加しているが、使い方間違っているかも。
【Playdate】入力した文字をQRコード化して表示する

前回作成した文字入力のプロジェクトを更にカスタマイズして、入力した文字列をQRコード化して表示をしてみます。
キーボード入力終了後に、QRコードを生成し表示します。

<img width="443" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100912/f024abab-5bee-c081-2ac5-22eebaea6db1.png">


```main.lua
import "CoreLibs/object"
import "CoreLibs/graphics"
import "CoreLibs/sprites"
import "CoreLibs/timer"

import "CoreLibs/keyboard"
import "CoreLibs/qrcode"

local gfx <const> = playdate.graphics

local inputText = "Edit PressA"
local qrImage = nil
local qrSprite = nil

function QRDone(image, errorMessage)
	qrImage = image
end

function myGameSetUp()
	-- キーボード: 文字変更時実行
	playdate.keyboard.textChangedCallback = function()
		inputText = playdate.keyboard.text
		gfx.sprite.redrawBackground()
	end
	
	-- キーボード: 変更終了時実行
	playdate.keyboard.keyboardDidHideCallback = function()
		print(playdate.keyboard.text)
		gfx.generateQRCode(inputText, nil, QRDone) -- QRコードを生成する
	end
	
    -- QRコードのsprite設置
	qrSprite = gfx.sprite.new( qrImage )
	qrSprite:moveTo( 70, 120 )
	qrSprite:add()
	
	gfx.sprite.setBackgroundDrawingCallback(
		function( x, y, width, height )
			gfx.drawText(inputText, 20, 20)
		end
	)
end

myGameSetUp()

function playdate.update()
	
	-- Aボタン: 文字入力
	if playdate.buttonIsPressed(playdate.kButtonA) then
		playdate.keyboard.show(inputText)
	end
	
	qrSprite:setImage(qrImage) -- QRコード画像をセットする

	gfx.sprite.update()
	playdate.timer.updateTimers()
end

```

QRコードを使用するには`import "CoreLibs/qrcode"`でコアライブラリからQRコード用のAPIをimportします。
次に`playdate.keyboard.keyboardDidHideCallback`のタイミングでQRコード生成を行います。
`gfx.generateQRCode()`の第一引数にQRコードに変換したい文字列、第二引数にQRコードのサイズ指定(nilで最適化サイズ)、第三引数で生成完了後のコールバック関数を指定します。
ここでは`QRDone`というコールバック関数を指定し、中では生成後の画像(第一引数image)を表示用変数の`qrImage`へ代入しています。
Unity 2022.2 URP14で画面のデプスとノーマルを表示するRenderFeature

# 概要
UnityのバージョンをあげるたびにURPのカスタムレンダーパスは変更が必要になること多いよね。
たいしたものではないけど、誰かの役に立つかもしれないからサンプルをあげてみました。

整理してgithubに置き直しました。(2022/12/22)
https://github.com/hoshino-juushichi/URP14TestPostProcessRenderPass
Vue3で親コンポーネントから子コンポーネントにCSSを適用する方法

# はじめに
こんにちは！
[WEBCAMP ENGINEER COMMUNITY Advent Calendar 2022](https://qiita.com/advent-calendar/2022/webccamp-engineer-community)
18日目担当の[TOKIO](https://twitter.com/tokiengineer)です！

本業のフロントエンド開発にて、Vue.jsを使用しているのですが、
子コンポーネントのCSSは変えずに、__親から子コンポーネントの色、デザインを変えたい__、という場面に直面しました。

今回の記事は、そんな時に親コンポーネントから子コンポーネントのCSSを変更する方法をご紹介します！

※Vue:3.2.41,Vuetify:3.0.2を使用しています。



# 使用画面
![スクリーンショット 2022-12-18 15.05.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985051/52dcbc1e-a9ad-c62f-376a-76eedbe73fe4.png)
↑上記の子コンポーネント（v-card)を親コンポーネント側からCSSで色を変更します！

### 子コンポーネントのコード

##### ※SCSS記法を使用しています。
```vuejs:child.vue
<template>
  <v-card class="card">
    <v-card-title class="title"> タイトル </v-card-title>
    <v-card-text> テキスト</v-card-text>
    <v-btn>ボタン</v-btn>
  </v-card>
</template>

<style lang="scss" scoped>
.card {
  .title {
    background-color: blue;
  }

  .v-card-text {
    background-color: green;
  }

  .v-btn {
    background-color: yellow;
  }
}
</style>
```

# 親から子にCSSを適用する

親から子にCSSを適用する方法は、(自分が知る限りでは)**２パターン**あります。  
### 方法①『ディープセレクタ(v-deep)を使う』　　
この方法では、ディープセレクタ(v-deep)を使って親から子のセレクタを指定して、CSSを適用しています。
#### 実際のコード(親コンポーネント)
```vuejs:parent.vue
<template>
  <Child></Child><!--子コンポーネント-->
</template>

<style lang="scss" scoped>
::v-deep(.card) {/**v-deepで子コンポーネントのクラスor要素を指定)**/
  .title {
    background-color: green;
  }

  .v-card-text {
    background-color: blue;
  }

  .v-btn {
    background-color: red;
  }
}
</style>
```

**::v-deep**の後ろに（）で要素をセレクタするだけです。

### 方法②『グローバルCSSを使う』
※この方法はあまりオススメしません！理由は後述　　

この方法では、CSSの**scoped**というVue側でコンポーネント毎にCSSを付与させる属性を外し、
CSSをローカルスタイル（使用コンポーネントのみ）ではなく、グローバルスタイル（他画面にも影響させる）に変更することを意味します。

### 実際のコード（親コンポーネント)

```vuejs:parent.vue
<template>
  <div class="child">
    <Child></Child><!--子コンポーネント-->
  </div>
</template>

<style lang="scss">/**scopedをつけない**/
.child {
  .card {
    .title {
      background-color: green;
    }

    .v-card-text {
      background-color: blue;
    }

    .v-btn {
      background-color: red;
    }
  }
}
</style>
```

##### 方法②をオススメしない理由
結論、**他の画面のCSSにも影響を及ぼしたり、CSS同士が競合してしまう可能性があるから**です。
グローバルスタイルでCSSを適用してしまうと、他の画面からグローバルスタイルで同じ要素にCSSを適用しようとすると、競合が発生し、優先度が低いCSSが打ち消されてしまいます。　　
（!importantで乗り切れるけど、アンチパターン）　　

また、実際のコードを見ていただけるとわかるのですが、子コンポーネントを子コンポーネントをdivタグなどで囲み、クラスを指定する必要があります。
親のクラスから子のクラスに潜る必要があるので、**不要な要素が一つ増えてしまう**のです。

上記の理由から、グローバルスタイルが汚染されるのと、コンポーネント同士のCSSの連携がぐちゃぐちゃになるので、方法①を使うことをオススメします！



### 方法①or②を使用した後の画面
【変更前】
![スクリーンショット 2022-12-18 15.05.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985051/45eab06e-eb10-da1a-819f-6514f55fc174.png)
　　
【変更後】
![スクリーンショット 2022-12-18 16.10.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985051/f7df8acd-3628-79c0-584d-a92f9cf7ff34.png)

# おわりに

上記のように親から子のCSSを書き換えることができます。
要素やサイズは大体同じだけど、「この画面では違うデザインにしたい！」
という時にとても重宝するCSSの適用の仕方だと思います。
ディープセレクタは他にも書き方があるみたいですが、sassなどのモジュールのバージョンによって適用されなかったり、エラーが発生する場合があるそうなので、基本的にv-deepを使用すれば間違いないと思います。　　

親から子にscopedを付けながらCSSを適用するのは、ドキュメントを読んでも当時は分からなかったので、なかなか苦しみました（笑)
この記事を読んで、Vue使いの方がもっと幅広いデザインを作成できるようになれば嬉しい限りです🙇

ご愛読、ありがとうございました！
開発部が作るだけの部隊にならないために

こんにちは、トラストバンクに入って3年8ヶ月の @trustbank_isobe です。
フロントエンドエンジニアとしてトラストバンクのキャリアをスタートしてから、役割が徐々に増えていき、今はふるさとチョイス事業本部の開発部副部長兼フロントエンドエンジニアチームリーダーとして働いています。

この記事では今年4月に副部長になってから、開発部がプロジェクトに関わっていく際に抱えていた課題に向き合う方法として**プロジェクトグループ**というものを思考し組成した話について書きたいと思います。

前提として、弊社では新しい機能やサービスごとに「プロジェクト」を立ち上げ、必要な人をアサインして進めるというスタイルで開発を進めています。

# プロジェクトと開発部のこれまでの関係
プロジェクトを進める上で開発部がこれまでどのように関わってきたか、簡単に説明すると、
開発部という一つのリソースプールから、プロジェクトに必要な人員を都度見繕ってアサインするというものでした。
![グループ 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502978/fec2b2d6-c68a-42f4-cafc-7dba6363e6d2.png)
<font color="#AAA">この図のSSはサーバーサイドエンジニア、FEはフロントエンドエンジニア、QAはQAエンジニアを表しています</font>

必要な時に必要なだけのリソースを持ってくる、一見普通のことで何も問題無いように見えます。
事実このやり方でプロジェクトの開発を進めることはできていました。

ここで問題になってくるのはこのやりとりが発生するタイミングでした。
このアサインの動きが発生するのはプロジェクトの工程でいうところの開発フェーズ、つまり、すでに作る内容が決まっていてあとは手を動かすのみという段階です。この時点でアサインされると、プロジェクトのスケジュールや内容がほとんど固まっていて開発が意見する余地がありません。

これだと開発部は言われたものを作るだけの部隊になってしまいます。
開発部は会社の中の役割として**事業課題に対して企画段階から関わり、最適な解決手段を提案し実行していく**ということを掲げています。どうにかしてプロジェクトの企画段階から関わりを持てるように改善する必要がありました。

これまでのやり方でも事前に人をアサインすることができればこの問題は解消されます。
しかし、事前にどれだけアサインすれば良いか判断がつかないのと、一つの大きいリソースプールが存在すると、空いている人の時間は少しでも手を動かせる状態にあるタスクで埋めようという意思も働いてしまうので、企画段階でアサインできるリソースがないという状態になっていました。

# 作るだけの部隊にならないために
そこで、開発部を大きな一つのリソースプールとするのではなく、あらかじめいくつかのグループを組成しておいて、グループ単位でプロジェクトにアサインするようにすればプロジェクトの組成段階から関われるのではないかと考えました。
![グループ 18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502978/660ac3cb-fb6f-7949-3881-ef9d9216dbc5.png)

図のように開発部に所属しているサーバーサイドエンジニア、フロントエンドエンジニア、QAエンジニアを合わせて4~6人くらいを目安にグループ分けしました。プロジェクトの傾向としてサーバーサイドの開発が全体の開発工数を占める割合として多いためサーバーサイドエンジニアが多めになっています。
この分け方で現在、グループA~Gの7グループ組成できました。
グループごとに個性のある名前もつけようかと考えましたが、仮でつけていた無機質なアルファベットの名称で定着してしまったのでそのままでいくことにしました。

単純な発想でしたが効果としては大きく、グループに分けたことでプロジェクトの立ち上げフェーズから、「このグループで行きます！」というコミュニケーションが取れるようになり、企画段階から関わらせることはできるようになりました。

また、グループを分けたことによる効果として、開発メンバー内でこれまでとれてこなかったコミュニケーションが取れるようになってきているようです。（FEの人がSSの人にバックエンドについて気軽聞けるようになったり、これまでは知らなかったメンバーの一面を見ることができたりなど）
メンバー間の結束も強くなったので、そういった意味でもグループを組む意義はありました。

ただ、このグループがそれぞれ自走して主体的にプロジェクトに関わっていけるようになるために必要なことはまだあるのと、
プロジェクト開発だけが開発部のやることではなく、プロジェクト以外の適時対応、問い合わせや調査対応などの運用業務などもあります。グループGは適時のタスクを回すグループとして組成していますが、一つのグループだけで全てのプロジェクト外業務を回すことは無理なので、この課題に関しては別で検討を進めています。

# 終わりに
今年私が副部長として行なったものの中で大きかったものが開発部を**作るだけの部隊にさせないためには**という課題に向き合うことでした。グループという形でプロジェクトの企画段階から関われるようにはなりましたが、実際に**事業課題に対して最適な手段を提案して実行できる**ようになるためにこれから何をしていくべきか考える必要があります。
やっとそれを考えるスタートラインに立てたという感じなので、これからも開発部と事業部に貢献できるように頑張りたいと思います。

# 一緒に働いてくれるエンジニア募集してます
トラストバンクでは一緒に働いてくれるエンジニアを募集中です。
色んな職種で募集しているので是非チェックお願いします！
 https://www.wantedly.com/companies/trustbank/projects

# P.S.
Notion公式の認定資格「Notion Certified」に合格しました。
「Notion Essentials Badge」を取得したので社内のSlackアイコンにこれ見よがしに貼ってます。
![スクリーンショット 2022-12-18 16.44.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502978/1e397da1-2c8f-a1f8-eef2-c417deb5a6b5.png)

これからトラストバンクのNotionエバンジェリスト（自称）としても頑張っていきます。
M5Flow で n x n LED Matrix にドット絵を表示する

# 主旨

いわゆる NeoPixel 系の LED をマトリクス状に敷き詰めた LED マトリクスを M5Flow で光らせる必要に迫られたので、どうやるのが簡単なのか試行錯誤してました。

# 課題

この手のLEDマトリクスがちょっと面倒なのは、LED の配置が一次元的になっていて、二次元的に x, y 座標でLEDの位置を指定するということができないところです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/a37f905c-ac84-4383-6c68-331986cd3b51.png)

座標の割り当てを図示すると、上のようになります。先頭から順番に右に向かって順番に番号が進んでいき、次の行は折り返して進んでいきます。左端まで戻って行が進むと、再び折り返して右に進みます。

そのため、通常の画像のピクセルをそのまま x, y 座標に変換して当てはめようとしてもうまくいきません。

座標返還をしてやればいいのですが、配列の扱いが面倒な M5Flow でやろうとすると、なかなか大変です（多分）。

# 結論

というわけで、結局ドット絵エディタを別に作っておいて、ドット絵を座標返還して配列データとして書き込むという、安易な方法に落ち着きました。

- [8x8ドット絵エディタ](https://led-workshop.web.app/#/doteditor)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/52751465-e4e3-d130-47b5-612117477113.png)

「コピー」を押すと、座標返還済みの配列データを作成して、クリップボードにコピーします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/2cca5491-5405-663e-5b7c-c24ba6163cfe.png)

これを、上記のプログラムの「コードを実行」のところにコピペすればOKです。あとは、背景色と前景色を好きな色に指定してやれば光ります。

# ドット絵を動かす

表示するだけなのは何なので、左右に動く（スクロールする）ようにしてみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/42e1f003-e5f9-15ec-37e6-187de3bd8c03.png)

上記のプログラムで横方向（ｘ軸方向）にスクロールします。縦方向も、似たような感じでできます（多分）。

# 結論

モジュール化しようとかちょっと頑張ってたのですが、意外に面倒なので来年の宿題にしました。
Power Apps Cardは何ですか？

# 使ってますか？
　皆さん！Power AppsにCardsがプレビューになってますよ！もう使ってますか？

　また使っていらっしゃらない方、Cardsがなんだかわからない方に朗報です。私が教えてあげます。

# チュートリアルを見る

　では、まずはチュートリアルから

https://learn.microsoft.com/ja-jp/power-apps/cards/tutorials/hello-world-card

　とにかくどんなものか見たい方、動画を作りました。

<iframe width="560" height="315" src="https://www.youtube.com/embed/uZHuRvq-m5M" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

　もう1つチュートリアルがあります。

https://learn.microsoft.com/ja-jp/power-apps/cards/tutorials/simple-shopping-list

　こっちは、日本語で読むと失敗するやつです。コードが間違ってます。だから、こっちも動画を作りました。

<iframe width="560" height="315" src="https://www.youtube.com/embed/jJzEMUYNvyE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

# 何に使うのか
　これだけじゃ、何がいいんだかわからないということだと思いますが、右上の「送信」をクリックしてみてください。

<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/513a39c0-ed84-07fe-7661-d0aec00f75dd.png"/>

<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/29a8b6b8-4cf1-1cc9-f229-5a49c08e4398.png"/>

　こんなメッセーが表示されましたね。そうです、このリンクをTeamsのメッセージに貼り付けて送ると、

<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/d5615092-818e-98b6-f0d9-5282f94ba9ad.png"/>

　カードを送ることができるんです！

　デバッグ情報のJSONの項目を開いてみると、Cardsは実はアダプティブカードなんです。

<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/ac3502df-bf14-ef53-20d6-55b2caf1411d.png"/>

　前後にある情報を切り取ってアダプティブカード・デザイナーに貼り付けると、カードが表示されます。

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864075/c6f9a6e9-21ef-5f26-b518-21087373453e.png"/>

　つまり、Cardsの正体は、より使いやすくなったアダプティブカードだったのです。もう、Power Automateでカードを投げなくてもいいんです。

# さっぱりわからない人にはMiyakeさんが教えてくれる
　いやいや、そもそもアダプティブカードってなんだよという方は、以下のConnpassのページからMiyakeさんの資料をご覧下さいませ。

- [気ままに勉強会 #21 Adaptive Cardsについて－基本編](https://kimamani.connpass.com/event/251162/?utm_campaign=event_participate_to_follower&utm_source=notifications&utm_medium=twitter)
- [気ままに勉強会 #22 Adaptive Cardsについて－応用編](https://kimamani.connpass.com/event/251191/)

　では、よいクリスマスをお迎えください。
【DNSの仕組み】ドメインを購入すると何が起きるのか？


DNSの仕組みは勉強して知っていても、いざ自分でドメインを購入して使ってみるとわからない部分があったりしたので、自分が理解をしたことをまとめる。

思うに、DNSというシステムの仕組みを机上で解説した記事と、そのDNSの現実世界での運用方法であるレジストラについて解説した記事、そのそれぞれは存在するのだがその二者の間をつなぐような解説があまりなされていない気がしたので、そこについて書く。

※この記事は詳細について深く踏み入らないため、または私の理解が浅いために、表現が正確ではないことがあります。

# 前提
DNSの基本的な仕組みを理解していること。

# ドメインの取得
我々はレジストラからドメインを購入する。ドメインを購入するとレジストラはそのドメインのゾーン情報が入る権威DNSサーバを用意した上で、上位のドメイン(.jpや.comなど)を管理している機関であるレジストリにそのドメイン名と用意したDNSサーバのホスト名を渡し、上位ドメインの権威DNSサーバのゾーン情報にそのNSレコードを追加するように頼む。用意するDNSサーバはドメインごとに用意されるのではなく、レジストラが販売したドメインをまとめて入れるDNSサーバになっているのが普通。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2354612/e9ebcf6e-0296-7725-6dae-078024ed0f1b.png)

# 取得したドメインのゾーン情報の編集
取得したドメインのゾーン情報を編集するには、レジストラを通じて編集する。なぜならそのドメインのDNSサーバはレジストラが用意したものだからである。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2354612/f43905cf-d9db-d042-b629-c1036ec4d769.png)

# 取得したドメインのDNSサーバの変更
しかし、取得したドメインの権威DNSサーバは何もレジストラが用意したものしか使えないわけではない。他にDNSサーバを用意すればそれに変更することもできる。変更したい場合はそのDNSサーバのホストをレジストラに伝えれば、レジストラはレジストリに頼んでゾーン情報を変更してくれる。その場合、自分のドメインのゾーン情報は自分で用意したDNSサーバにあるので、そのDNSサーバのやり方で自分のドメインのゾーン情報を編集する。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2354612/97f859a7-d4d1-6607-dc54-2851538c80ce.png)

# 分かりづらかったところ
DNSの解説記事を読むと、example.com を管理する権威DNSサーバのホスト名は ns.example.com のようにそのドメイン内のホストになっていることが多いが実際にはそうである必要はないし、むしろ外部のホストになっていることの方が多いと思われる。

また、権威DNSサーバは一台につき一つのドメインのゾーン情報しか持てないわけではなく、複数のドメインのゾーン情報を持てる。別の言い方をすると一つのDNSサーバは複数のドメインの権威DNSサーバになれるし、であるからしてドメインごとに別の権威DNSサーバを用意する必要はない。よってレジストラはあらかじめ用意した少数のDNSサーバを、販売したいくつものドメインの権威DNSサーバとして使っている。
なんかわからないけどネットワークエラーにて復活

## なんかわからないけどネットワークエラーにて復活

お久しぶりです。

J:COM　さんの方とQiitaさんのところの記事だけネットワークエラーになりました

迷惑URLになってしまっていたようでした。

メッシュWiFiというのを使って

セキュリティイベントを管理から

許可にQiita.comをいれました。

入れても失敗したりしてたのですがキャッシュみたいなのがあるのかな？
ひとまずつながって記事が書けるようになりました

ひとまず復帰できました

なにも
TwitterでQiita公式さんに親切に対応してもらいました。
ありがとうございます＞＜
タスク管理ツール remember the milkのAuth Token発行方法

# Overview
タスク管理ツール [remember the milk](https://www.rememberthemilk.com/) のAuth Tokenの発行方法に躓いたので、備忘録として記載

## 事前準備
- [remember the milk](https://www.rememberthemilk.com/)で会員登録する
- [API Introduction](https://www.rememberthemilk.com/services/api/)でAPI keyの申請を行う

## frobの取得
Auth Token発行時に利用するパラメータの取得を行う

frob取得のURL
```
https://www.rememberthemilk.com/services/auth/?api_key="API key申請時に取得"&perms=read&api_sig="api_sig(署名 ※後述)"
```

### API Sigの生成
frob取得のURLのパラメータとして、署名(`api_sig`)が必要
下記のパラメータを結合し、md5で暗号化する
1. API key申請時に取得した `secret_key` (値のみ)
2. API key申請時に取得した `api_key` (keyと値)
3. `perms` と 種類(`read`, `delete` など)

```ruby
require 'digest/md5'

code = secret_key
code << 'api_key' << api_key
code << 'perms' << 'read'
frob = Digest::MD5.hexdigest(code)
```

URLにアクセスし、下記のようなコードが出力されればOK
```
No callback URL specified for this API key. Your frob value is "ここにfrobのコードが表示される"
```

## Auth Tokenの発行
Auth Token取得のURL
```
https://api.rememberthemilk.com/services/rest/?api_key="API key申請時に取得"&format=json&frob="取得したfrob"&method=rtm.auth.getToken&api_sig="api_sig(署名)"
```

### API Sigの生成
Auth Token取得のURLのパラメータとして、署名(`api_sig`)が必要
下記のパラメータを結合し、md5で暗号化する
1. API key申請時に取得した `secret_key` (値のみ)
2. API key申請時に取得した `api_key` (keyと値)
3. `format` 、 `json`を指定
4. `frob`、上記で取得した `frob` (keyと値)
5. `method`、`rtm.auth.getToken` (keyと値)

```ruby
require 'digest/md5'

code = secret_key
code << 'api_key' << api_key
code << 'format' << 'json'
code << 'frob' << frob
code << 'method' << 'rtm.auth.getToken'

api_sig = Digest::MD5.hexdigest(code)
```

## コード
発行用のRuby Script / Rustで作成しました
- [GitHub - Ruby版](https://github.com/AkioYokoyama/RtmIssueCode/blob/master/Ruby/issue.rb)
- [GitHub - Rust版](https://github.com/AkioYokoyama/RtmIssueCode/tree/master/Rust/issue)

## 参考
- [Authentication](https://www.rememberthemilk.com/services/api/authentication.rtm)
- [rtm.auth.getToken](https://www.rememberthemilk.com/services/api/methods/rtm.auth.getToken.rtm)
受託アジャイルな現場で個人的に取り組んでいること

# はじめに

- 今現場でやってるチャレンジを書く。
- チャレンジ始めたばっかなので、特に成果とかかけるものはない。
- 同じチャレンジしてる人とかいればtwitterとかで声かけてほしー。

# 今やってるチャレンジ

## 大規模アジャイル

https://qiita.com/nh321/items/c2a3d408c610ec721fb5

大規模アジャイル。どれもこれも批判やアンチパターンに溢れてて大変。実際すごくやりづらい。
安直な道に入ろうとすると絶対に良くない未来に行くのがわかるので、アンチパターンと言われるのも良くわかる。

## 受託アジャイルでの品質保証ってどないすればいいねん

https://qiita.com/nh321/items/b20f06c02dff73b89424

まぁほんとわかんない。
品質保証の世界に入っていくとQAエンジニアさんの話とかも漁るようにしてるけど、とても難しい。
目の前の現場での合意は至れてるけど、先を考えるともう少し汎用的な回答の見つけ出し方を見つけたい気持ち。

## CI/CDへのチャレンジ

https://qiita.com/nh321/items/71d9d57736cd9104a43d

- ビルドパイプラインの構築
- トランクベース開発
- 自動テストと手動テストの塩梅の検討

今はここが楽しいポイント。
ちょっと説明するにもまとまりが無さすぎるので記事化がむずい。
まとまったら展開したいなぁ。

## 人材育成

https://qiita.com/nh321/items/9c227f1fbd354168d53b

「みんなが楽しんで学習できる環境・仕組みの構築」ってのはなんかある程度見つけられた気がしてる。
あとは、自分以外でもこの仕組みを回せるようになることだと思って、今はそんなチャレンジしてる。

## 開発者としてこんな現場が欲しかった、の実現

https://qiita.com/nh321/items/b04aeddb11bfb687a7cd

https://qiita.com/nh321/items/6a47047160c2cabbdf61

他にもあるけど、心理的安全性とかを重視しつつ、成長もできる現場ってのが増えていくといいなと思って、まずは足元の自分の現場からそうなるように取り組んでる。
誰にとっても望ましい現場ってのは難しいなぁ、と日々感じつつ、四苦八苦してます。

# さいごに

アドベントカレンダー最後の記事です。
アドベントカレンダー、もっと面白い記事が書けると思ってたけど、思いのほかしょっぱい記事が多くなってしまった。（特にこの記事）
これがまぁ今の実力だと思うので、まずは真面目に現場でチャレンジを続けていこうと思いました。まる。
でもなんだかんだ完走したのは偉いと思うよ。お疲れ、自分。
メリークリスマス&良いお年を、みなさん。

https://qiita.com/advent-calendar/2022/jutakuagile
Javaについて

# はじめに
Javaの案件に参加することになったため、
Javaを理解するために概要を調査しました。
ゆくゆくは環境構築するようことを目標にします。

記載内容に間違いがあればご指摘ください。

# Javaについて調査
下記に基本的な内容をまとめます。
## Javaの概要
[Oracle公式サイト](https://www.oracle.com/jp/java/)
[参考サイト](https://www.sejuku.net/blog/3686)
主にOracleが提供するオブジェクト指向の言語です。
日本では業務システムによく使われていることは知っていましたが、
Web系システムやAndroidアプリにも使われているようです。

## Java SEとJava EEやJava ME
### Java SEとは
https://www.sejuku.net/blog/12902
Java SEとは、Java Platform, Standard Edition の略。
Javaの基本機能をまとめたもの。
さらに拡張したものにはJava EE(Java Enterprise Edition)などがある。

### JVMとは
https://www.javadrive.jp/start/install/index5.html
JVMとは、Java Virtual Machine の略。
Javaアプリケーションを動かすための仮想マシンであり、Java仮想マシンとも呼ばれる。
OSによって専用のJVMをインストールする必要あり。

### JREとは
https://www.javadrive.jp/start/install/index5.html
JREとは、Java Runtime Environmentの略。
Java のプログラムを実行するためのセットとなっている。
JREの中にJVMやJavaSEなどがセットになっている。
Java SEのバージョンに合わせて、JREのバージョンがつけられている。

### JDKとは
https://www.javadrive.jp/start/install/index5.html
JDKとは、Java Development Kitの略。
JREやJVMなどが含まれるJava開発環境。コンパイルやでバックも可能。
こちらもJava SEのバージョンに合わせて、JDKのバージョンがつけられている。
OracleJDKやAdoptOpenJDKなど複数種ある。
JDKをインストールすれば、Javaの開発環境が作れる見込み。

# Javaのフレームワークについて
Spring Framework、Play Framework、Apache Strutsなど多数存在するようですが、
今回はSpring Frameworkのみ記載します。
## Spring Frameworkとは
https://camp.trainocate.co.jp/magazine/spring-framework/
https://camp.trainocate.co.jp/magazine/whats-aop-programming/
DI(Dependency Injection)とAOP(Aspect Oriented Programming)に優れたアプリケーションフレームワーク。
DIとは「依存性の注入」と呼ばれ、クラス同士が疎結合(独立)して保守性や再利用性に優れる。
AOPとは「アスペクト指向プログラミング」と呼ばれ、共通処理を入れ込むことができる仕組みです。
(AOPについてはあまり理解できませんでした。。。)

## Spring Boot
Webアプリケーションに特化したSpringというイメージ。
Spring Frameworkは環境設定が複雑でああるが、Spring Bootはそれらを簡略化したフレームワーク。



## Javaの問題点
調査中に面白いと思った問題点がありました。下記に記載します。
### 参照型変数のNull
https://atmarkit.itmedia.co.jp/ait/articles/1803/15/news012.html
参照型変数（＝オブジェクト型）に対してNullが入っているエラーになる様子。
参照型変数はオブジェクトのアドレスを指しているため、C言語のポインタに近い概念のようです。

### ライセンス問題
[Oracle JDK](https://www.oracle.com/jp/java/technologies/javase/jdk-faqs.html)
[AdoptOpenJDKは無料](https://adoptopenjdk.net/index.html)

どのバージョンがいくらかかるのか？が分かりにくいです。
OracleJDKやAdoptOpenJDKなど使用するものによって料金外形が変わってくる。
基本的に個人利用は無料のようです。

# まとめ
JavaはPythonやPHPに比べて覚える専門用語が多く、ハードルが高い言語と感じました。
しかし、専門用語の意味するところは難しくないため、覚えてしまえば使いこなせそうです。
また、文法などに細かい制約が多く扱いにくい面があり、開発時は注意する必要がありそうです。
AWS CLI 現在起動中のEC2インスタンスを取得する

:::note info
この記事は[miriwoお一人様 Advent Calendar 2022](https://qiita.com/advent-calendar/2022/miriwo)の18日目の記事です
:::

# 概要

- AWS CLIコマンドを使って現在起動中のEC2インスタンスを取得する方法をまとめる。

# 方法

- AWS CLIを実行できる環境で下記コマンドを実行する。

    ```
    aws ec2 describe-instances
    ```
【EEL】Windows11にてGoogle ChromeのGUIウィンドウサイズを調整する方法

# 初めに
　みなさんこんにちは！山崎です。最近GUI開発に興味がわき、「何かいいライブラリないかなあ」ってところにEELに出会いました。
EELについてはほかの人が良い記事をたくさん書いてくれているので、そちらを参考にしてみてください。

#### 参考記事リンク

- [[Python] EelをつかってHTML/CSS/JavaScriptでGUIを構築](https://qiita.com/inoory/items/f431c581332c8d500a3b)

- [[Python][GUI] Eelのページ遷移・新規ウィンドウ表示](https://deecode.net/?p=434)


# 問題点
　参考記事に書いてあるように、EELは非常に便利なんですが、Windows11環境（ほかの環境もかもしれないです）においてWindowサイズが固定できません。
公式ドキュメントには
```app.py
eel.start('hello.html', mode='chrome-app', size=(300, 200))
```
のようにsizeをタプルで渡してあげればできるのですが、少なくともwindowsでは動きません。

そこで、windowsで動くコードを書きました。
`WINDOW_SIZE_HEIGT`や`WINDOW_SIZE_WIDTH`を変えればウィンドウサイズが設定できます。とりあえず動かしたいよ、って人は下記のコードを使えばOKです。
```app.py

import os
import platform
import sys
import eel
# google driverの設定ファイルを保存するディレクトリを作成する
WINDOW_SIZE_HEIGT = 200
WINDOW_SIZE_WIDTH = 600
WINDOW_POSITION_HEIGHT = 100
WINDOW_POSITION_WIDTH = 100
WEB_FOLDER = "web"
START_HTML_PATH = "html/index.html"
PORT = 8080


def main():
    # windowsのバージョンが10以上でなければエラーを出力
    if sys.platform in ['win32', 'win64'] and int(
            platform.release()) >= 10:
        pass
    else:
        raise ("Can't start 'EEL' in this environment.")

    try:
        # google chromeの設定ファイルを作成
        google_dir_path = os.path.join(
            os.getcwd(), r"property\web_driver\chrome"
        )

        os.makedirs(google_dir_path, exist_ok=True)
        os.system(f"attrib +r {google_dir_path}")
        eel.init(WEB_FOLDER)
        eel.start(
            START_HTML_PATH,
            mode='chrome',
            port=PORT,
            cmdline_args=[
                f"--window-size={WINDOW_SIZE_HEIGT},{WINDOW_SIZE_WIDTH}",
                "--window-position="
                f"{WINDOW_POSITION_HEIGHT},{WINDOW_POSITION_WIDTH}",
                f'--user-data-dir={google_dir_path}',
            ]
        )
    except EnvironmentError as e:
        # google chromeが入っていない場合、Edgeを起動
        if sys.platform in ['win32', 'win64'] and int(
                platform.release()) >= 10:
            eel.start('hello.html', mode='edge')
        else:
            raise ("Can't start 'EEL' in this environment.\n"
                   f"Error message: {e}"
                   )


if __name__ == "__main__":
    main()

```

# 解説
　さて、これは明らかにどちらかのバグのせいで、`size=(hoge,hoge)`が機能していないのが問題です。なぜかはわかりませんが、コマンドライン引数に`--user-data-dir=`を設定してあげるとウィンドウサイズの設定が可能になります。
　多分ですが、windows11かgoogle chromeのバージョンが更新されたときにどちらかの仕様が変わったのだと思います。まあ、上のコードでとりあえずは動くので…バグ改善をまちましょう。改善されればここまで長いコードを書かなくて済みます。

# お願い
　コードを見てくれればわかると思いますが、Edgeのウィンドウサイズが設定できません。わかる方がいましたら情報提供お願いします。[Twitter](https://twitter.com/zaki_yuto_1997)でもコメントでもよいので…

# 最後に
　EElは勉強途中ですので、暇ができたら記事を書こうと思います。
今回のエラーで私は休日２日無駄にしましたので、第二の被害者を出さないように備忘録もかねて執筆させていただきました。今後ともよろしくお願いいたします。
脱初学者　CSS設計BEMで可読性向上委員会

## はじめに
この記事はある程度HTML/CSSがかけるようになってきた人が少し初学者から一歩抜け出すきっかけになるようにと書きました。ある程度知識が増え、コードがかけるようになってきたら、次は可読性を高めることを意識しましょう。前提として、今回のスタイリングではCSSを拡張して、書きやすく、見やすくしたスタイルシートであるSassを使用しているのでご了承下さい。


## BEMを使用するメリット
::: note info 
##### クラス名が簡単になる
BEMではページを構成する要素をBlock、Element、Modifierの３つに分類して考えます。
Block、Element、Modifierのみでクラスを命名することでクラス名に悩むことがなくなります。
:::
::: note info
##### 要素の再利用がしやすくなる
以下の例を見て下さい。
「block」というクラス名を元に他のクラスも定義されていますね。
これによって要素が何度も使い回すことができます。

:::

```html
<div class="block">
  <div class="block__element"></div>
  <div class="block__element block__element--modifier"></div>
</div>
```

## 命名規則

それでは実際にBEMを使ってクラスを設計していきます。
BEMの命名規則は以下の通りです。

* BlockとElementはアンダースコア（_）２つでつなぐ
* Modifierにつなぐ場合は、ハイフン（-）２つでつなぐ

## BEMを使ってみよう

それでは実際にBEMを使ってクラスを設計していきます。

```html
<nav class="HeaderNav">
  <ul class="Menu">
    <li class="Menu__list">A</li>
    <li class="Menu__list">B</li>
    <li class="Menu__list Menu__list--backBlack">C</li>
    <li class="Menu__list">c</li>
  </ul>
</nav>
```
navはヘッダーのナビゲーションメニューなので、クラス名をHeaderNavとしました。
「Menu__list–backBlack」は、「Block__Element–modifier」の形をしています。

このHTMLにCSSを当てると、以下のようになります。
```scss
.HeaderNav {
  list-style: none;

  &__list {
    background-color: #3BD1EC;
    color: #FFF;
    float: left;
    font-size: 30px;
    padding: 2% 1%;
    text-align: center;
    width: 23%;

    &--backBlack {
      background-color: #000;
      color: #3BD1EC;
    }
  }
}

```
## 注意点
BEM記法は入れ子構造を推奨していないため、Sassと併用するときに入れ子にしないことをおすすめします。

## 最後に
今回はCSSのクラス設計で必須の知識である、「BEM」について紹介しました。
他にも様々なCSS設計の種類がありますが、「BEM」は特にメジャーな記法です。
スムーズにHTMLを書く上で必須の知識なので、この機会に理解を深めていきましょう。