OmniAICreator/Qiita-1.07M huggingface dataset:
kintone 2021年の rex0220 プラグインふりかえり

１２月ということで、2021年の rex0220 プラグインふりかえりを行います。


# 概要

2021年は、コロナで外出の機会が少なく、その分暇な時間が増えたせいかプラグインをいじる時間が多くなりました。
プラグインのバージョンアップ、ランキング、主なプラグインについてまとめてみます。

# プラグインのバージョンアップ
かなりプラグインのバージョンアップ回数が多くなりましたが、バージョンアップが多いから困るというお客様の声が聞こえてこないので、良しとしましょう。

- プラグインのバージョンアップ 118回
- 新規プラグイン 4本

# rex0220 プラグインランキング
日本の売上ランキングと中国・台湾サブスクの利用ランキングをまとめてみます。

## 売上本数ランキングベスト３
買い切りプラグインの売上本数ランキングベスト３です。
rex0220 最初のプラグインのタブ表示プラグインが１位です。

1. タブ表示プラグイン
1. 計算式プラグイン
1. 項目絞り込みプラグイン

## 売上金額ランキングベスト３
買い切りプラグインの売上金額ランキングベスト３です。
単価の違いから、売上金額では、計算式プラグインが１位になりました。
同じく、rex0220 プラグインの中では最も高価な関連レコード集計プラグインがランク入り。
タブ表示プラグインは、本数で稼いでランク入り。

1. 計算式プラグイン
1. 関連レコード集計プラグイン
1. タブ表示プラグイン


## サブスク利用プラグインランキング
今年、日本でも株式会社キャップドゥからサブスク利用が開始されました。※パチパチパチ
まだ日本ではご契約数が少ないので、中国・台湾のサブスクのランキングです。

サブスク利用の１位は、意外な項目検証プラグインです。
入力チェック用に、サブスクをご契約いただいているほとんどのお客様にご利用いただいています。
サブスクは、本数で金額が決まる契約のためか比較的高価なプラグインがランク入りしてます。

1. 項目検証プラグイン
1. 計算式プラグイン
1. 関連レコード集計プラグイン

# タブ表示プラグイン

おかげさまで、ロングセラーで売上本数１位でした。
今年は、PC表示時のタブカスタマイズ機能追加がメイン。

- タブ間のマージン、最小幅、背景色、文字色、ボーダー表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/9f8858c5-e894-de02-c428-dc0a06916cb8.png)

# 計算式プラグイン

rex0220 イチオシの計算式プラグイン。
関数追加、スペースフィールドへの計算結果表示機能追加、計算式ツールの改良と結構変わりました。

## 関数追加

関数は、14個追加してました。計算式を使えるプラグインには同様にバージョンアップしています。
ただ関数追加は、そろそろネタ切れの感じがします。
※SQRT, LET, FIXED, CHOOSE, ISNUMBER, TDUPCK, TR_COUNT, TR_COUNTA, TR_AVE, TR_MAX, TR_MIN, TR_SUM, ABS, PI 

LET 関数で、計算式内で変数を使えるようになったのが大きな変更ですね。
複雑な計算式を切り出して分かりやすくしたり、繰返し使う計算式を変数に置き換えることで計算式を短くしパフォーマンス改善にもなります。

LET 関数の適用例
当日に近い未来日付の取得計算にLET 関数を適用してみます。
IF関数で何度もDATE_FORMAT(TODAY(),"X")をTDという変数に入れて、MIN 関数で A, B, C を比較してます。

- LET 関数なし
DATE_FORMAT(MIN(
IF(DATE_FORMAT(TODAY(),"X")<fieldcodA, fieldcodA),
IF(DATE_FORMAT(TODAY(),"X")<fieldcodB, fieldcodB),
IF(DATE_FORMAT(TODAY(),"X")<fieldcodC, fieldcodC)))

- LET 関数利用
LET(
TD,DATE_FORMAT(TODAY(),"X"),
A,IF(TD<fieldcodA, fieldcodA),
B,IF(TD<fieldcodB, fieldcodB),
C,IF(TD<fieldcodC, fieldcodC),
DATE_FORMAT(MIN(A,B,C))))

## 計算式の入力サポート機能

計算式ツールの改良で、計算式の入力サポート機能を追加しています。
関数の使用例も表示されますので、ご利用ください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/08741205-bdfc-28af-317d-6aae5451f14d.png)

# 関連レコード集計プラグイン

リアルタイムで、レコード更新時に他アプリへ集計するプラグインです。
今年は、テーブル項目へ集計する機能が主な変更でした。

- 集計先にテーブル項目を追加
- テーブルからテーブルへの集計機能追加


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/957379dd-7fcf-38fa-4157-4e47e4091604.png)

# 項目検証プラグイン

中国で一番人気です。
kintone の入力項目必須チェック、バリデーションチェック、入力抑止、表示制御を行うプラグインです。
項目の値を変えたタイミングで、チェックを行います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/f1fbce5a-8de7-6cba-9447-6258376303a7.png)

# ちょっと便利なプラグイン

kintone の少し使いにくいところを、ちょっとだけ便利にするプラグインです。
少しずつ機能を追加して、３５個の機能に増えました。

![2021-12-08_10h00_39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/79082245-2e1e-eed9-5740-f32c6f0080f2.png)


# 一括承認プラグイン

今年リリースしたプラグインの中では、一括承認プラグインがお勧めです。
２０万件までの一括承認対応、ステータス更新のパラレル処理と大量レコードのステータスを進めるに便利です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/ab1f95c8-610a-c2c2-f959-e1052eb93908.png)
夜のFANZA女優モード（ダークモード）を実装した

この記事は [驚異のFANZA女優検索](https://fanza-actress-bust-search.azurewebsites.net/) Advent Calendar 2021 の 8 日目の記事です。

# ダークモード
今日はわりと簡単め。ダークモードを実装した。ダークモードでググった時にかなり簡単そうだったので試しに作ってみた感じ。面白味には欠けるし、何番煎じ感はあるものの試しにやってみるのは悪くないと思ったのでやってみた。一番簡単に実装するなら以下を設定するだけ。これだけで白ベースのhtmlだとダークモードに早変わりという感じ。

```css
body {
  background-color: #000;
  color: #fff;
}
```

# 設定している色までは変わらない
ただ実際にはこれだけで済むわけではない。cssを見れば分かると思うが、背景を黒、文字を白にしているだけなので、当たり前の話直接colorやbackground-colorを設定したらその色になる。自分のサービスでも薄くピンク色の背景を付けている所や灰色の背景を付けている所があったが、ダークモードでもそこはそのままの色になっていた。当たり前。問題はそこに違和感がないかだが、モードが切り替わっても同じ色というのは、やはり若干の違和感はあると思う。

# で、設定している色をどう扱うか
これに対してもっとも簡単な対応は、違和感がありつつもそれをスルーすることだと思う。ぶっちゃけ画面の半分以上の背景色が黒くなっていればそれでダークモードと言い張ることは出来る。それでも気になるようであれば次に簡単なのは、直接colorやbackground-colorを設定しているところを止めてしまうことだ。恐らく視覚的な効果を狙って何らかの理由で色を付けていると思うが、その色を止めても成り立つのであれば、止めればそれでダークモードの色になる。それでは駄目な場合は、ダークモードにされた場合、色を付けている所は、別の色に変える方法になると思う。今回はサクッと対応したかったので、スルーと色付けを止めるという方法で解決とした。

# ダークモードの維持
で、これだけではまだダークモード完成ではなくて、実際にダークモードを作るのであれば、当然ダークモードと通常モードの切り替える方法が必要だ。つまりトグルボタンを作って、cssにdarkとnormalを作っておいてjavascriptで、クリックされたことでそれを反転する仕組みが必要になる。さらにどの画面でも反映するようにするには、現状がどっちのモードなのかをクッキーに保存する必要がある。クッキーがないとダークモードにして画面切り替えをしたらまた通常モードに戻ってしまう。

# サーバとクライアントのレンダリング
画面読み込み時の描画に関してはクッキーを見てjavascriptで反映する仕組みをそのまま使うとNG。何故なら一瞬ライトモードで表示した後にjavascriptを解析してダークモードになるため画面がちらつく。サーバーでクッキーの値を見てその値で直接レンダリングする仕組みにしないと駄目だ。この辺は業務でWEBページを作っている人なら常識だと思うが、自分は一連の流れが想像出来ていなかったのではまってしまった。

# ダークモードが合うサービス
まあcssとjavascriptが分かっていればダークモードの実装はそれほど難しくない。そして個人的にはFANZA女優とダークモードの愛称は悪くないと思う。夜のFANZA女優。
Next2D NoCode ToolでJavaScriptを使う[初級編]

NoCode Toolは、JavaScriptを使用した動的なアニメーション制御も可能です。
JavaScriptの制御はキーフレームと同じく、フレーム毎に追加が可能で、主にアニメーションやムービーを反応させたり、タイムライン上でDisplayObjectを制御させたりすることができます。

今日はタイムラインを制御するコードを紹介できればと思います。

# 事前の情報共有
NoCode ToolのJavaScriptのスコープ(`this`)はJavaScriptを実行するMovieClipをスコープとして設定しています。

```javascript
this.play();
this.stop();
this.gotoAndPlay(1);
this.gotoAndStop("EndFrame");
```
上記のように、スコープ(`this`)がないと正しく起動しませんのでご注意ください。

それ以外は通常のJavaScriptと何も変わらないため、これまでの記述でもES6記述でも動かす事が可能です。

# タイムライン制御を行う関数

## Play
ムービークリップのタイムライン内で再生ヘッドを移動します。

```javascript
this.play();
```

## Stop
ムービークリップ内の再生ヘッドを停止します。

```javascript
this.stop();
```

## フレームにラベル名を付ける
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/78eb59db-b633-7c04-e3ae-8e6e3a194108.png" width="500">

タイムラインの指定フレームに任意のラベル名を追加する事ができ、追加したラベルの文字列をキーに指定のフレームに移動する事ができます。

サンプル画像では、10フレーム目にJavaScriptを埋め込んでいます。
以下のサンプルコードは同じフレーム番号を指定している事と同義になります。

## gotoAndPlay
指定されたフレーム番号もしくはラベル名のフレームから再生を開始します。

### フレームを指定
下記のJavaScriptを10フレーム目に追加すると、15フレーム目に移動して再生を継続します。

```javascript
this.gotoAndPlay(15);
```

### ラベル名を指定
下記のJavaScriptを10フレーム目に追加すると、ラベルからフレーム番号を認識して15フレーム目に移動して再生を継続します。

```javascript
this.gotoAndPlay("target");
```

## gotoAndStop
指定されたフレーム番号もしくはラベル名のフレームに再生ヘッドを送り、そこで停止させます。

### フレームを指定
下記のJavaScriptを10フレーム目に追加すると、15フレーム目に移動して、そこで再生を停止させます。

```javascript
this.gotoAndStop(15);
```

### ラベル名を指定
下記のJavaScriptを10フレーム目に追加すると、ラベルからフレーム番号を認識して15フレーム目に移動して再生を停止させます。

```javascript
this.gotoAndStop("target");
```

## nextFrame
次のフレームに再生ヘッドを送り、`停止`します。

```javascript
this.nextFrame();
```

## prevFrame
直前のフレームに再生ヘッドを戻し、`停止`します。

```javascript
this.prevFrame();
```

如何だったでしょうか？
もし、この記事を見て、興味が出た方はこちらか動作確認ができます。
[NoCode Tool](https://tool.next2d.app)

また、その他の関数に関しては、`Next2D Player`の[API Docs](https://next2d.app/docs/player/)から閲覧できます。

明日はこれらの制御関数や、マウス・タップのイベント制御を行うJavaScriptのサンプルコードを紹介ができればと思います。
Oracle Cloud Infrastructure OCI 認定試験 (期間限定無償受験) 2021年12月7日〜2022年3月31日

Oracle Cloud Infrastructure OCI 認定試験 (期間限定無償受験) が開始されました！

期間は2021年12月7日〜2022年3月31日。
Don't miss it!

> 2021 年版の OCI/PaaS 認定資格は 9 つの日本語試験を提供します。
日本語試験は、国内向けの OCI 認定試験の無償試験が提供開始になると、期間中どなたでも各試験 3 回まで無償で受験可能になります。
> 
> Oracle Cloud Infrastructure 認定資格 (日本語試験)
> • Oracle Cloud Infrastructure 2021 Architect Associate (1Z0-1072-21-JPN) 
> • Oracle Cloud Infrastructure 2021 Architect Professional (1Z0-997-21-JPN) 
> • Oracle Cloud Infrastructure Foundations 2021 Associate (1Z0-1085-21-JPN) 
> • Oracle Cloud Infrastructure Developer 2021 Associate (1Z0-1084-21-JPN) 
> • Oracle Cloud Infrastructure 2021 Cloud Operations Associate (1Z0-1067-21-JPN) 
> 
> Oracle Cloud Platform 認定資格 (日本語試験)
> • Oracle Autonomous Database Cloud 2021 Specialist (1Z0-931-21-JPN) 
> • Oracle Cloud Database Services 2021 Specialist (1Z0-1093-21-JPN) 
> • Oracle Cloud Database Migration and Integration 2021 Specialist (1Z0-1094-21-JPN) 
> • Oracle Cloud Platform Enterprise Analytics 2021 Specialist (1Z0-1041-21-JPN)
>
> 出典: https://learn.oracle.com/ols/course/oci-oci/35644/102300/153470#
セカンダリーロールによって変わったこと（そして致命的なこと

# この記事は何？

[Snowflake Advent Calendar 2021](https://adventar.org/calendars/6220) の8日目の記事です。
今日の記事はセカンダリーロールができて何が起こるかを書きます。

# セカンダリーロール

Snowflake にセカンダリーロールという機能ができました。

- 参考：[2021年9月にリリースされたSnowflakeの新機能](https://www.snowflake.com/blog/https-www-snowflake-com-blog-new-snowflake-features-released-in-september-2021/?lang=ja)

>セカンダリロールを使用した役割管理の簡素化
>セカンダリロールが一般的に使用できるようになり、ユーザーに付与されたすべての役割はユーザーセッションで有効化できます。そのためユーザーは、必要なアクションや権限に応じて役割を変更する必要がなくなり、プライマリロールとセカンダリロールに付与された集約権限を使用して、セッション内のオブジェクトに対してSQLアクションを実行できるようになりました。利用すると、セキュリティモデルに多数のロールを設けている組織を筆頭に、多くの組織で役割管理が簡素化します。さらに各データベース内のオブジェクトに対するアクセス権限の内容を役割ごとに変えたクロスデータベース結合などのオペレーションにも有効です。Pinterest社でのセカンダリロール活用法については「What’s New: Snowflakeにおけるセキュリティ」をご覧ください。

この機能は要するに、ユーザに紐付けられたロールを全て同時に行使できるようになるという内容の機能となります。
文中では集約権限という言葉で表されています。

一見すると、セカンダリーロールという名前なので `USE ROLE` していたロールに、もう一つサブのロールをつけるのかな？みたいに思った人が多かったと思うんですが、 **注意してください。その実態はユーザに紐づく全てのロールを同時に行使できるようになるという機能**です。

# セカンダリーロール以前の世界

```
■ 架空のストーリー
社員XさんはBIやデータ分析を主に行うユーザXを使っています。
A社から委託されているデータの分析と、B社から委託されているデータの分析を行うので
それぞれAロールと、BロールをGRANTされています。
もちろんA社とB社は別の会社であるため、JOINなどで紐付けることは禁止されています。
Snowflakeの管理者であるあなたは、XさんにAロールと、Bロールを渡して安心しています。
なぜなら、セッション内ではロールが同時に複数行使されることはなく、
A社のデータとB社のデータは絶対にJOINできないのですから…。
```

どうでしょうか？
上記のような状況あると思いませんか？
もちろんCSVなどの形式でデータをダウンロードするなどすれば、ローカルでA社のデータとB社のデータを紐付けてしまうことは可能かもしれません。
でもセカンダリーロール以前の世界では少なくともSnowflake上ではそれができないように守られていました。

# セカンダリーロール後の世界

お気づきの方もいるかと思いますが、セカンダリーロールを使うと、容易に権限を横断したテーブルの参照が可能となります。
例えば先程の例では、 `SELECT * FROM A社のテーブル, B社のテーブル;` ができるようになるということです。

これは以前の世界では、権限ヒエラルキー上位のロールでしかできなかったことです。

# 実際にやってみよう

A,Bロールを作って、それぞれA,BテーブルにGRANTします。

Aロールで `show tables;` したところ
![Worksheet_-_New_Worksheet__2_2__in_122ms_-_Done.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75613/a987c7a4-ae04-5354-755b-4fe768b99704.png)

Bロールで `show tables;` したところ
![Worksheet_-_New_Worksheet__2_2__in_140ms_-_Done.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75613/f9d93a2c-80b0-bef3-b5e8-b15483a6b394.png)

このようにそれぞれのロールで参照可能なテーブルが異なりますね？

この状態で `select * from A,B;` しても下記のように権限エラーとなります。
![Worksheet_-_New_Worksheet__0_1__in_34ms_-_Failed.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75613/b7462573-572e-5ccd-e9c1-bfd2db5b6140.png)

これがセカンダリーロール以前の振る舞いです。
ではセカンダリーロールを有効にしてみましょう。（この機能はどのユーザでも使えます。

`USE SECONDARY ROLES ALL;`

その後、先程エラーの出た `select * from A,B;` を実行してみます。
![Worksheet_-_New_Worksheet__1_1__in_47ms_-_Done.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75613/9b6c0fa3-40e2-62ec-ba21-710da1f859a4.png)
今度は実行できてしまいましたね。
これまでの権限階層設計がもろくも崩れ去ってしまった瞬間です。

# じゃあどうするか？

- とりあえずユーザを分けよう。ユーザで権限を分けてしまいましょう(RBACの死)。ただしSSOしてる場合には困難な選択肢になることでしょう。一人の物理的人間が複数人分のIDを要求するようになるためです。一般的な企業でこれが許容されるケースはあまりないと思います。
- セカンダリーロールを使わないように運用でカバー。これです。これが答えな気がします。
- ついでにSnowalertを使って、セカンダリーロールの実行を検出しよう。10分ほど遅れますが検出できるはずです。(Snowalertについてはいつか書きます）

# セカンダリーロールを前提にしたベストプラクティスがほしい

いまSnowflakeの機能で一番悩ましい機能がこのセカンダリーロールです。
いまいちベストプラクティスが思い浮かばないです。

もしかしたら私が単純に知らないだけで良いソリューションをお持ちの人がいるような気がします。
いらっしゃったらぜひ教えて下さい〜。
【UXデザイン】【１／３】ユーザビリティとは【初学者の疑問点を簡潔に解説】

## はじめに
　本記事は、プログラミングの学習を始めて1ヶ月の初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

## 今回の疑問点
　今回の疑問点は、

　　_UXデザインとは何か_
　
　です。　

　作成するポートフォリオのデザインについて検討を行なっていた時にユーザーエクスペリエンス（UX）という言葉を思い出しました。しかし、よく耳にするユーザーエクスペリエンスがどういったものなのか理解が不足していると感じ、学習することとしました。
　今回はユーザーエクスペリエンスという概念の一部であるユーザビリティについてまとめていきます。
　別の記事でユーザビリティから概念を広げる形でユーザーエクスペリエンスについてまとめます。
## ユーザビリティとは

###結論
　特定の利用状況において、特定のユーザーが何らかの実用的な目的を果たすために使用する道具を対象とした、有効さ（目的が達成できるか）、効率（目的を達成するためにユーザーがどの程度の資源を費やすか）、ユーザーの満足度（どの程度不快感を感じず利用できるか）の度合い。

###なぜユーザビリティを考慮する必要があるのか
　アナログからデジタルの時代に変化したことで、道具の外観を見て使い方を容易に想像することができなくなり、道具を作成する際に意図的に使い方等をわかりやすく設計する必要が出てきたからです。
　例えば、アナログな道具として、ハサミを思い浮かべてみてください。初めてハサミを見た人でもその使い方をすぐに理解することができると思います。
　次に、デジタルな道具としてスマートフォンを想像してください。一度もスマートフォンを見たことがない人が外観だけを見て使い方を想像することができるでしょうか。少なくともハサミより使い方を想像するのは難しいのではないでしょうか。
　上記のように、デジタル化の影響により、道具とユーザーの道具に対するイメージにギャップが生じるようになったため、このギャップを埋めるべく、ユーザビリティを考慮する必要が出てきました。

###ユーザビリティの3要素の優先順位について
　「結論」の箇所で有効さ（目的が達成できるか）、効率（目的を達成するためにユーザーがどの程度の資源を費やすか）、ユーザーの満足度（どの程度不快感を感じず利用できるか）の３つの要素を列挙していますが、この3要素には以下のような優先順位があります。
`有効さ　→ 効率　→ 満足度`
　優先順位が一番高いのは有効さです。有効さがなければユーザーの目的を達成することができないため、その道具の存在価値がなくなってしまいます。例えば、音楽の聞けない音楽プレーヤーなどは持っている意味がないですよね。
　次に大切なのが、効率です。多少画面が見づらく、覚えることが多く、使いにくくても目的を少ない資源（時間等）で達成することは重要なことです。ものすごく画面が見やすくて商品が探しやすい、かつ、ボタンの配置もわかりやすく押しやすい、けど、商品の購入までにすごく時間がかかるECサイトは困ると思います。
　最後に満足度です。見やすく、使いやすいものであるに越したことはありません。

###ユーティリティについて
　ユーザビリティに近しい概念にユーティリティというものがあります。
　ユーティリティとユーザビリティの違いはユーティリティがより便利にすることでプラスを生み出すことを指すのに対して、ユーザビリティは、マイナスが生じているものを±0にすることを意味します。
　ユーティリティは、便利な機能を増やすことで付加価値を付与するイメージで、ユーザビリティは、現時点で使いにくいものの欠点を改善することで、使いにくくないものにするようなイメージです。


## まとめ
最後にポイントをまとめます。

- ユーザビリティとは、「特定の利用状況において、特定のユーザーが何らかの実用的な目的を果たすために使用する道具を対象とした、有効さ（目的が達成できるか）、効率（目的を達成するためにユーザーがどの程度の資源を費やすか）、ユーザーの満足度（どの程度不快感を感じず利用できるか）の度合い」のこと
- ユーザビリティの3要素の優先順位は`有効さ　→ 効率　→ 満足度`
- ユーティリティはより便利にすることを指し、ユーザビリティは欠点を改善することを指す
paizaでスキルチェックDランクの問題を解き続けたら、何ランクまで解けるようになるか

# はじめに
[TechCommit Advent Calendar 2021](https://qiita.com/advent-calendar/2021/tech-commit) 7日目を担当致しますRachelです！よろしくお願いします。

今回paizaを使ってゆるくプログラミング学習をしてきたので振返ってみました。
この記事は少しプログラミングに慣れてきた初学者で特に作りたいものが無く、なんとなく学習をしてみようと考えている方々向けをイメージしております。


#paizaとは
> ITエンジニア向け国内最大の転職・就職・学習プラットフォーム

https://paiza.jp/

プログラミング学習をしたり、コードを元に求人に応募できる。

###スキルチェック
paiza上で無料で解けるプログラミング問題集。
問題はD, C, B, A, Sの5段階に分けられており、Sランクが最も高い。
各設問では複数のテストケースが与えられ、テストの通過率や回答時間から100点満点で評価される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561857/66314084-6724-1973-7742-4fecc2b23846.png)
出典: https://paiza.jp/guide/career

Java, Rubyなど10以上の言語で解くことができる。

#ルール説明
paizaのスキルチェックでDランク問題をおよそ毎日1問解き続けると、上位ランクの問題は解ける(スコア100点を取る)ようになるのか、どこまで解けるようになるのかを検証する。

- 使用言語: C, Java
- 実行期間: 約半年
- 初期装備: if文, for文, 配列, メソッド定義ができる。
- 初期状態: Dランクは解けるが、Cランクはほぼ解けない。

#学習スタート

**1週間目** (言語: C)
Cランク問題解けず。
文字列の比較部分で躓く。

**1か月目**
Cランク問題解けず。
string(char配列)の文末の扱いに躓く。

**2か月目**
Cランク解けた。約1週間後Bランクも解けた。

**3か月目**
Cランク解ける。
Aランク解けない。プログラムのボリュームが大きくなり、どのような流れで構成すればいいかわからない。


**4か月目** (以降言語: Java)
Cランク解ける。
Bランク解けない。計算部分で躓く。

・・・

###6か月目
Cランク解ける。
Bランク解けた。
Aランク解けない。アルゴリズムがわからない。

#結果
**Bランク問題が解けた。**※ただし問題による。
同じBランク問題でも解けない問題がいくつもあったので、
**安定して解けるようになったランクはCランク**といえる。

###総受験数(2021/12/7現在)
215問


#感想
Dランク問題を解き続けたところ、Cランクの問題が解きやすくなった気がする。
Dランク・Cランクはプログラムの単位が1, 2メソッド程の小さいものだが、Bランク以上になるとより大きくなるため、難しく感じた。
Bランクは何とか解けそうだが、Aランクはアルゴリズムの知識も学んだ方がいいのではないかと思った。

Sランクはまだ先のお話。




# 今後の展望
- Cランクを解き続けたら何ランクまで解けるようになるか
- Aランク、Sランクを解けるようになるまで何が必要か

を検証していきたい。

ありがとうございました。
VMware Cloud on AWS アップデートまとめ (AWS re:Invent 2021 編)

AWS re:Invent 2021 でアナウンスされたVMware Cloud on AWSのアップデートについて調べることがあったのでメモ。

# 1. そもそもAWS re:Inventって？
AWSの年次カンファレンスです。今年もラスベガスにて11/29-12/3に開催されました。オンラインでも参加可能(無料)です。

https://aws.amazon.com/jp/about-aws/events/2021/reinvent/

# 2. そういえばVMware Cloud on AWSって？
オンプレとクラウドのそれぞれに強みを持つ両社が共同開発したクラウドサービスです。Amazon EC2ベアメタルインスタンス上にVMware仮想環境が構築されています。詳解は両社の公式サイトもどうぞ。

https://www.vmware.com/jp/products/vmc-on-aws.html

https://aws.amazon.com/jp/vmware/


# 3. AWS re:Inventアップデートまとめ (VMware Cloud on AWS)
VMware Cloud on AWSはその名のとおりVMwareとAWSで共同開発されたサービスなので、やはりAWS re:Inventあたりで嬉しいアップデートがありました。

### AWS Backup の新機能 – VMware および VMware Cloud on AWS のサポート

VMware Cloud on AWSに対応する待望のバックアップソリューションが対応しました。設定手順など詳解はAWS公式ブログに譲りますが、VMware Cloud on AWSならびにオンプレミスのvSphere環境へのバックアップ (&リストア)に[AWS Backup](https://aws.amazon.com/jp/backup/)が対応しました。今までVMware Cloud on AWSのバックアップは3rd Partyソリューションだけがほぼ唯一のバックアップ手法だったので、これからさらに選択肢の幅が広がりますね。

https://aws.amazon.com/jp/blogs/news/new-for-aws-backup-support-for-vmware-and-vmware-cloud-on-aws/

### Amazon FSx with NetApp ONTAP Integration
最近リリースされたAmazon FSx for NetApp ONTAPとのインテグレーションががアナウンスされました (2021/12/1現在はまだEarly Accessのみの提供です)。今までVMware Cloud on AWSではストレージ領域はVMからAmazon FSxなどをマウントしてオフロードするのがよくある構成でしたが、ESXiからも外部ストレージとしてAmazon FSx for NetApp ONTAPもマウントできるようになるようです。
全てのワークロードをVMware Cloud on AWS組み込みのvSANにするのではなく、外部ストレージも選べると選択肢の幅が広がります！

こちらの VMware Blogでも詳解されています。他にも海外でVMware Cloud on AWS対応の新リージョンなど複数のアップデート記載あります。

> [VMware Cloud on AWS: New Region, External Storage and Purchasing Options](https://blogs.vmware.com/cloud/2021/12/01/vmware-cloud-on-aws-going-big-reinvent2021/)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864151/c996a1ab-dead-1730-2d2d-55d85f0141e4.png)


### VMware Transit Connect Intra-Region Peering with AWS Transit Gateway
こちらもネットワーク設計する際には非常に嬉しいアップデートです。 Intra Region (例えばAWS東京リージョン内)でAWS TGWとvTGW (VMware ManagedのTGW)が接続可能になりました。今まではInter Region (例えばAWS東京リージョンと韓国ソウルのリージョン)だけが接続可能だったので、ネットワーク設計の幅が広がります。

こちらのVMware Blogでも詳解されています。

> [Getting Started with VMware Transit Connect Intra-Region Peering for VMware Cloud on AWS](https://blogs.vmware.com/networkvirtualization/2021/12/getting-started-with-vmware-transit-connect-intra-region-peering-for-vmware-cloud-on-aws.html/)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864151/86f851d8-df7e-2c3a-9c51-391d56f7573b.png)


### ほかにもたくさん..!
上記で紹介した以外にも2021年10月のVMworld 2021の前後でたくさんのアップデートがありました。
本文は英語ですがこちらVMware社の公式ブログにもVMware Cloud on AWSについてアップデートがまとまっていますのでご覧ください。

> [VMware Cloud on AWS: What’s New in Oct 2021 (VMware Cloud Blog)](https://blogs.vmware.com/cloud/2021/10/05/vmware-cloud-on-aws-whats-new-in-oct-2021/)

> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864151/b0a261e0-15f5-61cb-3a3b-a26783164dbd.png)


# 4. 関連記事

https://qiita.com/sanjushi003/items/175aad0ccdbb3488bfda
粒子法の基本理論(MPS法)

こんにちは。粒子法は、大きく分けるとMPS法とSPH法の二つに分けられる。前回の記事でSPH法の基本理論について取り上げたので、今回はMPS法の基本理論について記します。流体力学で用いる方程式など、一部の事前知識は[粒子法の基本理論(SPH法)](https://qiita.com/KionIm/items/02b1aadbfa38b11c3b83)で定式化した物を利用しています。

#目次
[1.MPS法で用いる式](#1-MPS法で用いる式)
[2.球面調和関数](#2-球面調和関数)
[3.球面調和関数変換](#3-球面調和関数変換)
[4.補足と用いたパラメータ](#4-補足と用いたパラメータ)
[5.おわりに](#5-おわりに)

#1. MPS法で用いる式
Notionのシンプルテーブルで列の幅を揃える

アルプ株式会社でエンジニアをしています、集約のエンティティ@pictinyです。
これは[Notion Advent Calendar 2021](https://qiita.com/advent-calendar/2021/notion) 7日目のエントリです。
6日目は[Notionのシンプルテーブルで列の幅を変更する](https://qiita.com/pictiny/items/3667c6afc90cbe47ce0b)でした。

# 列の幅を揃える
シンプルテーブルの列の幅を変更していると幅が不揃いになって見栄えが悪くなることがあります。

シンプルテーブル上部の `←→` アイコンをクリックすると、表全体がページ全体の横幅に合うように拡大され、列の幅が等間隔になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427952/a1f7a6db-a589-5e6b-079a-9b56eb8538dc.png)

ページの[スタイル設定](https://qiita.com/pictiny/items/51a52c976e15430414d4#%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E8%A8%AD%E5%AE%9A)で `full width` を有効にしていると `Fit table to page width` したときの横幅も広くなります。

# まとめ
列の幅は簡単に等間隔にできるので、シンプルテーブルでの幅調整はどんどんやってしまいましょう。
Goを使用するにあたり、ポインタとアドレスでつまづいたので覚書

Goでは値が初期化(定義)されると、値の内容の他にその値がメモリ上のどこにあるかを示すアドレスというパラメータが自動生成される。

### アドレスの仕組み

アドレスを確認する場合

~~~go
&value
~~~
というように、「&+値名」のように書くと、その値のアドレスを参照できる。

~~~go:例1
func main() {
	a := 5
	b := &a 

	fmt.Println(a)
	fmt.Println(&a)
	fmt.Println(b)
	fmt.Println(&b)
}
~~~

~~~go:結果
5
0xc00001a060
0xc00001a060
0xc00000e028
~~~

これは何が起こっているのかというと、aにbのアドレスを代入したので、fmt.Println(b)の戻り値はfmt.Println(&a)の戻り値となる。
また、bは新しく定義されたので、bには値としてaのアドレスがセットされたと同時に、bにはアドレスが割り振られた。

### アドレスに値があれば、アドレスから値を参照することができる

(例1)では、bにはaのアドレスを代入したが、その前にaには値が定義されているので、bからaにセットされている値を参照することができる。

アドレスに値がセットされている場合、

~~~go
*value
~~~
のように、「* + 値名」で参照することができる。

~~~go:例2
func main() {
	a := 5
	b := &a

	fmt.Println(*b)
}
~~~

~~~go:結果
5
~~~

### アドレスの中の値を変えることもできる。

~~~go:例3
func main() {
	a := 5
	b := &a
	*b = 8

	fmt.Println(a)
	fmt.Println(*b)
}
~~~

~~~go:結果
8
8
~~~

bにaのアドレスを代入したのちに、bに割り振られているアドレスにセットされている値(5)を8にしたので、また、bとaはアドレスが同じなので、自動的にaの値も変わる。
【5日目】Python初心者が分岐処理・ループ処理・リストの基本を学ぶ

#分岐処理
ifで偶数奇数のチェックをする処理を作成してみます。

```python
var = 2
if var % 2 == 0 :
    print(str(var) + 'は偶数です。')
else :
    print(str(var) + '奇数です。')

# 2は偶数です。
```

変数varが2の時は上の分岐を通りました。
では、varを3にしてelseの分岐も通るか確認してみます。

```python
var = 3
if var % 2 == 0 :
    print(str(var) + 'は偶数です。')
else :
    print(str(var) + 'は奇数です。')

# 3は奇数です。
```

うまくいきました。
コロン「:」のつけ忘れで動かないミスをしたので、要注意でした。

# ループ処理

whileとforを使って同じ出力結果の処理を作成してみます。

```python:while
counter = 3
while counter >= 1 :
    print('カウント:' + str(counter))
    counter -= 1

print('カウント終了')

# カウント:3
# カウント:2
# カウント:1
# カウント終了
```

rangeでどのようなループにするか指定します。今回は逆順でループするように指定しました。

```python:for
for counter in range(3,0,-1) :
    print('カウント:' + str(counter))
    
print('カウント終了')

# カウント:3
# カウント:2
# カウント:1
# カウント終了
```

# リスト
１つの変数に多くの数字を持たせてみます。
それをループ処理を応用して出力してみます。

```python
numbers = [1,2,3,4,5,6,7,8,9,10]
for number in numbers :
    print('number：' + str(number))

# number：1
# number：2
# number：3
# number：4
# number：5
# number：6
# number：7
# number：8
# number：9
# number：10

```

# おさらい

最後に1から10のリストが格納されている変数の数字をループでチェックし、偶数か奇数かメッセージを出力する処理を作成してみます。

```python:偶数・奇数チェック
numbers = list(range(1,11))
for number in numbers :
    if number % 2 == 0 :
        print(str(number) + 'は偶数です。')
    else :
        print(str(number) + 'は奇数です。')

# 1は奇数です。
# 2は偶数です。
# 3は奇数です。
# 4は偶数です。
# 5は奇数です。
# 6は偶数です。
# 7は奇数です。
# 8は偶数です。
# 9は奇数です。
# 10は偶数です。
```

ご一読ありがとうございました。
【textRain.h】339ByteでMatrixのテキストが雨のように降ってくるアレの話

#1. はじめに
例のESPDisplayの無線化を始めてますけど　ちょっと小ネタです
JavaScriptではよくサンプルがあるんですが

https://gigazine.net/news/20130321-matrix-javascript/

https://on-ze.com/demo/canvas-matrix-background/

なかなか難しいのは "透過ブロック"で前の文字を消すって所
これに関しては　様々なところで解説のサイトさえありました

#2. ESP系でライブラリがありました

https://github.com/delhoume/MatrixRain

ロジックは上記のJavaScriptと同じ感じで
前の文字を消すのは setTextColor って感じです
しかし...ソースが長い

#3. あ、ベンチマーク用として書いても良いかな (339Byte)
って事で書いたら超ちっちゃい
* 初期化はメイン側でお願いします

```
void px(int x,int y,int h,int c){lcd.setTextColor(lcd.color888(0,c,0));lcd.setCursor(x*h,y*h);lcd.printf("%c",random(0x21,0x7e));}void textRain(int x,int y,int h){static int yp[40]={1};for(int i=0;i<x;i++){px(i,yp[i],h,0xff);int p=0;
for(int j=yp[i]-y;j<yp[i];j++){px(i,j,h,(p<<3));p++;}if(yp[i]>y)if(random(1000)>975)yp[i]=0;yp[i]++;}}
```
#4. 実行結果
![IMG_4017.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2063214/9a1097c8-19c8-b2a1-1136-2b799739c2b8.jpeg)
![FullSizeRender.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2063214/56598b6b-df49-78eb-1f44-847f8c7c9c6f.gif)


#5. 全ソース(圧縮無し)
もちろん今回も [LovyanGFX](https://github.com/lovyan03/LovyanGFX) で製作させて頂きました
いやぁ速い速い(嬉

``` textRain.ino
#define _M5DISPLAY_H_
class M5Display {};

//#include <M5Stack.h>
#include <M5StickC.h>
//#include <M5Atom.h>

#include <LovyanGFX.hpp>
static LGFX lcd;

#include "textRain.h"

void setup()
{
  Serial.begin( 115200 );
  lcd.init();
  lcd.setRotation(0);
  lcd.setBrightness(128);
}

void loop()
{
  lcd.fillScreen(TFT_BLACK);
  textRain(lcd.width()/lcd.fontHeight(), lcd.height()/lcd.fontHeight(), lcd.fontHeight());
  delay(1);
}
```

```textRain.h
void px(int x, int y, int h, int c) {
  lcd.setTextColor(lcd.color888(0,c,0));
  lcd.setCursor(x * h, y * h);
  lcd.printf("%c", random(0x21, 0x7e));
}
void textRain(int x, int y, int h) {
  static int yp[40] = {1};
  for (int i = 0; i < x; i++) {
    px(i, yp[i], h, 0xff);
    int p = 0;
    for (int j = yp[i] - y; j < yp[i]; j++) {
      px(i, j, h, (p << 3));
      p++;
    }
    if (yp[i] > y) {
      if (random(1000) > 975) yp[i] = 0;
    }
    yp[i]++;
  }
}

```

#6. まとめ
書いてる途中で
あ？これコンパイラだからサイズ関係ないし　とか
まぁ　色々調べてわかったから良しとします
よろしくお願い申し上げます

#7. おまけ
これを是非 LovyanGFX のデモに加えて頂くとか無いかぁ
コードフォーマッタを適用して一歩上の開発体験、成果物に仕上げよう

## TL;DR フォーマッタを使っていますか？

人間が以下のことを頑張って直す時代は終わりました。

- インデント崩れ
- コーディングフォーマットの統一

機械にやらせましょう。
機械にやらせると楽だし、ミスがありませんし、機械は人間の間違いを指摘してくれたりします。

## サンプルコード

極端な例ですが、似たレベルのはよく目にします。
今回の例は Ruby ですが他の言語にも応用が効くものです。

```ruby
def create
 @user =User.new(user_params)
 if @user.child?
   raise "invalid params"
end

respond_to do |format|
   if @user.save
           format.html { redirect_to @user, notice: "OK" }
           format.json {render :show, status: :created, location:@user}
   else
       format.html { render :new }
       format.json { render json: @user.errors, status: :unprocessable_entity }
   end end end
```

## 何が問題なのか？

```ruby
def create
 @user =User.new(user_params)
 if @user.child?
   raise "invalid params"
end
```

このコードはここで `create` メソッドが終わっているように見えます。
でも実は

```ruby
def create
 @user =User.new(user_params)
 if @user.child?
   raise "invalid params"
 end
 # まだ処理が続くよ!
end
```

`if` の終わりでまだ続きがあります。

せっかく作ったポートフォリオがこんなでは、例えちゃんと動いたとしても以下のマイナスイメージを強く持たれてしまいます。

- 詳しく見る気がなくなる
- 開発効率が悪そうに見える(≒ 仕事が遅い)
- インデントがわかってない(≒ 技術力が低い)

## 機械の力に頼る

一つ一つ丁寧にインデントをチェックし直していく…そんな時代ではなくなりました。
機械の力に頼ってきれいに整えましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21799/5b56b2d6-bc79-8a75-ac76-c97a78390275.png)

例えば VSCode であれば `ドキュメントのフォーマット` の機能があります。
標準ではサポートされない言語はプラグインがあったりします。

他には `[言語名] フォーマッター` や `[言語名] linter` などで検索してみると良いでしょう。

例えば Ruby だと Rubocop が有名で、以下のように自動的にフォーマットを適用してくれます。上のコードは以下のようになり、一気にコードの品質が上がったように見えます。

```ruby
def create
  @user = User.new(user_params)
  raise "invalid params" if @user.child?

  respond_to do |format|
    if @user.save
      format.html { redirect_to @user, notice: "OK" }
      format.json { render :show, status: :created, location: @user }
    else
      format.html { render :new }
      format.json { render json: @user.errors, status: :unprocessable_entity }
    end
  end
end
```

これでやっと、人様に見てもらえるコードのスタートラインに立てます。
厳しいようですが、現場だと機械に弾かれることも多く当然のレベルになります。

ショートカットを覚えるとか自動的にフォーマットを掛けるとか工夫して息を吸うようにフォーマットを掛けるとスムーズに開発できるようになります。

# 終わりに

- エンジニアは何らかのルールに従った統一感を大事にします。
- それに従うには機械が自動的に直してくれたり、チェックしてくれたりします。
- 機械の助けを得ることはスムーズに開発する上でも重要。このへんはあんまり教えてくれる人がいない印象。
iterm2のカラーを変更する方法

# Zshの導入
`$ sudo vi /etc/shells`

- 以下を追記して保存

`/usr/local/bin/zsh`

- ログインシェルを変更

```
$ chsh -s /usr/local/bin/zsh
Changing shell for test_user.
Password for test_user:
```

- 新しいタブを開き、zshを起動

- Homebrewでインストールしたzshが使われているか確認

```
% echo $SHELL
/usr/local/bin/zsh
```

https://qiita.com/iwaseasahi/items/a2b00b65ebd06785b443#%E6%96%B0%E3%81%97%E3%81%84%E3%82%BF%E3%83%96%E3%82%92%E9%96%8B%E3%81%8Dzsh%E3%82%92%E8%B5%B7%E5%8B%95

- こちらの記事を参考にしました

# iterm2のテーマカラーをダウンロード
https://draculatheme.com/iterm

- ↑↑こちらのカラーにしたかったので、上記ページからgithubのリポジトリをクローンするコードをコピー

```
$ git clone https://github.com/dracula/iterm.git
```

- **ターミナル**を開きます

- **iterm2**の場合は、`⌘+,`で設定画面が開くので、そこから、`Profiles > colors > 右下のcolorPresets`と進む。

- その中の、`import`を押すと、Finderが開くので、さきほどcloneしたフォルダを探し出します

- そのフォルダ内から、今回でいえば`Dracula.itemcolors`というファイルがあるので、それを選択します。

- あとは、再度`Profiles > colors > 右下のcolorPresets`と進み、その中に**Dracula**というカラーが追記されているので、それを選択すれば、無事に完了です。
【随時更新】Javaロードマップ項目の具体化


はじめてのチーム開発業務で、Javaを使うことになりました。
大学の頃は、授業でも触れたことがなかったので、これから学んでいきたいと思います！
勉強方法や業務での経験談 など、アドバイスいただけると幸いです。

# Javaロードマップ

以下の記事を参考にさせて頂きました。
自分なりに身に着けたい項目を具体化しています。
https://qiita.com/haruto167/items/5a784df032518277f4a0

### ロードマップ
![https___qiita-image-store.s3.amazonaws.com_0_230829_16d890e9-ebae-14b2-ae31-cd911df9d8fb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/511487/c6001ae0-b381-34f4-3323-4d3420b1dbb3.png)


### 1. 基本文法を学ぶ　30%

    - データ型
    - オブジェクト指向
    - ポリモーフィズム
    - 継承
    - 配列
    - カプセル化
    - 例外
    - インターフェイス
    - ジェネリック
    - コレクション
    - Optional
    - ラムダ/StreamAPI
    - New型推論
 
### 2. IDE（開発者ツール：自分はEclipse）を使いこなす
　　- <a href="https://qiita.com/ITfreshman/items/ebd860641f07cf2b5ecd">デバッグ</a>
　　- 入力補助
　　- ショートカット
　　- プラグイン
　　- 
### 3. プロジェクト管理を学ぶ 30% 

プロジェクト管理を学ぶ [https://qiita.com/ITfreshman/items/603581da72ac6cee0110]

- パッケージ/jar
    - Maven
        - Mavenの基本勉強メモ [https://qiita.com/opengl-8080/items/bb32732f9aa5cb3495d2]
    - Gradle
    - Ant

- ビルド 

### 4. 標準＆ベストプラクティスを学ぶ
### 5. 他人のソースを読む＆ライブラリを学ぶ　
### ★ バージョン管理を学ぶ
### 6. テストコードを学ぶ
### 7. カバレッジを意識したテストコードを書く
### 8. RDBを学ぶ
 DBを選びダウンロード＆操作。
 繰り返しSQLを書き、DDL&DMLの書き方をマスターする。
またORMを学べばJavaからDBを簡単に操作することができるでしょう。
 - SQL攻略 [http://sql.main.jp/] 
 - SQL fiddle http://sqlfiddle.com/
### 9. フレームワークを学ぶ
### 10. よく使う機能を作ってみる
### 11. Webテストを学ぶ
### 12. NoSQLを学ぶ
### 13. キャッシュを学ぶ
### 14. Rest APIを学ぶ
### 15. 認証を学ぶ
### 16. セキュリティを学ぶ
### 17. メッセージングを学ぶ
### 18. 検索エンジンを学ぶ
### 19. Dockerを学ぶ
### 20. Webサーバーを学ぶ
### 21. Webソケットを学ぶ
### 22. GraphQLを学ぶ
### 23. Graph Databaseを学ぶ
### 24. BigQueryや機械学習にチャレンジ
Jestでテスト用の環境変数を設定する



```js
describe('もとの環境変数はprocess.env.EXAMPLE="origin"だが、テスト1のときだけ"hogehoge"としたい', () => {
  const OLD_ENV = process.env;

  beforeEach(() => {
    process.env = { ...OLD_ENV };
  });

  afterEach(() => {
    jest.clearAllMocks();
  });

  it('テスト1', () => {
    process.env.EXAMPLE = "hogehoge"
    // この中ではprocess.env.EXAMPLE = "hogehoge"
  });

  
  it('テスト2', () => {
    // この中ではprocess.env.EXAMPLE = "origin"
  });
});
```
[Nest.js] クエリパラメータをPipeを使って変換する方法

この記事は [株式会社サイバー・バズ Advent calendar 2021](https://qiita.com/advent-calendar/2021/cyberbuzz) 8日目の記事です。

# 概要
[Nest.js](https://docs.nestjs.com/)を使っている時に、`front`から受け取った`Request`を使ってゴネゴネしている時です。

すると、、

**「あれ、、、落ちる。。」**

**「想定した型と合っていない。。。」**

ということがありました。

その時の話です。

# 例
検索処理を例にあげます。

```typescript:dto/searchItem.dto.ts
class SearchItemDTO {
  minPrice: number
  maxPrice: number
  page: number
  limit: number
}
```

```typescript:item/item.controller.ts
@Get()
  async getItems(@Query() searchItemDTO: SearchItemDTO){
    // 検索処理Service
}
```

以下の`Request`を`getItems`に投げました。

```
curl 'http://localhost:3001/items?minPrice=3000&maxPrice=10000&page=1&limit=10'
```

ここで`getItems`に実際に渡ってきた`searchItemDTO`を確認してみると、
全て`string`になっており、`SearchItemDTO`の型と**乖離**していることが分かります。

```
{ minPrice: '3000', maxPrice: '10000', page: '1', limit: '10' }
```

`minPrice`や`maxPrice`を使って`number`前提で計算処理などを書いてしまうと、**落ちる危険**があります。

# Pipes
Nestには、`Pipes`というものが存在します。

https://docs.nestjs.com/pipes

`Pipes`はクライアントからの`Request`を`Controller`に渡す前に処理を挟むことができます。

Documentでも取り上げられているように、**変換**と**バリデーション**の二つが主なユースケースのようです。

# Built-in pipes
汎用的な`Pipes`については、あらかじめBuilt-inで`@nestjs/common`から`import`して使うことができます。

https://docs.nestjs.com/pipes#built-in-pipes

今回は`ParseIntPipe`が使えそうです。

`ParseIntPipe`を使って`getItems`を書き換えてみます。

```typescript:item/item.controller.ts
  @Get()
  async getItems(
    @Query('minPrice', ParseIntPipe) minPrice: number,
    @Query('maxPrice', ParseIntPipe) maxPrice: number,
    @Query('page', ParseIntPipe) page: number,
    @Query('limit', ParseIntPipe) limit: number
  ){
    // 検索処理Service
  }
```

再度`getItems`に渡ってきたプロパティを確認してみると、

```
{ minPrice: 3000, maxPrice: 10000, page: 1, limit: 10 }
```

想定通り`number`に変換されています。

これで目的は果たせましたが、パラメータが増えるたびに`ParseIntPipe`を増やす必要があり、
`item.controller.ts`ファイルが肥大化してしまうおそれがあります。

# ユーザ定義pipe
`pipe`は**自作**することもできます。

まず`DTO`のうち

変換前を`SearchItemDTO`

**変換後**を`SearchItemTransformDTO`

として実際の型と乖離がないように再定義してみます。

```typescript:dto/searchItem.dto.ts
export class SearchItemDTO {
  minPrice: string
  maxPrice: string
  page: string
  limit: string
}
```

```typescript:dto/searchItemTransform.dto.ts
export interface SearchItemTransformDTO {
  minPrice: number
  maxPrice: number
  page: number
  limit: number
}
```

次に`pipe`処理です。

```typescript:pipe/searchItem.pipe.ts
import { PipeTransform, Injectable } from '@nestjs/common'

@Injectable()
export class SearchItemPipe implements PipeTransform<SearchItemDTO, SearchItemTransformDTO> {
  transform(searchItemDTO: SearchItemDTO): SearchItemTransformDTO {
    return Object.entries(searchItemDTO).reduce((acc, cur) => {
      const key = cur[0]
      const value = ['minPrice', 'maxPrice', 'page', 'limit'].includes(key) ? parseInt(cur[1]) : cur[1]
      return { ...acc, [key]: value }
    }, {})
  }
}
```

`SearchItemPipe`を`item.controller.ts`に反映させます。

```typescript:item/item.controller.ts
@Get()
  async getItems(@Query(SearchItemPipe) searchItemTransformDTO: SearchItemTransformDTO){
    // 検索処理Service
}
```

すっきり書けました。

パラメータが増えた場合は、`SearchItemPipe`を編集すれば対応できます。

これで定義した`DTO`と実際の値との間で**乖離が無くなりました**。

他にも方法はあるかと思いますが、一例として参考にしていただければと思います。
【Rails】RSpec、Capybara、FactoryBotの使い方

##テスト用ライブラリ
・RSpec
　RubyにおけるBDD(振舞駆動開発)のためのテスティングフレームワーク。
　Rspecを利用する上で、「テスト」ではなく「spec」という用語を利用する。

・Capybara
　WebアプリケーションのE2E（End-to-End）のテスト用フレームワーク。Rail5.1からRailsに同梱済。
　MinitestやRSpecなどのテスティングライブラリと合わせて使う。

・FactoryBot
　テスト用データの作成をサポートするgem。
　テスト用のデータを簡単に用意し、テストから呼び出して利用することができる。
　一般にデータを作成することを簡単にする仕組みは「ファクトリ」と呼ばれている。

##事前準備
####Rspec
Gemfileにて以下の文を追加し、RSpecのRails用の機能が追加される。

```
gem 'rspec-rails','~>3.7'

$bundle install
```

gemのインストールが終われば、以下のgenerateを実行。

```
$ rails g rspec:install
```

最後にRailsアプリケーションを作成した時に自動で作られたtestディレクトリを削除。
理由としては、Minitestを使う場合にはtestディレクトリ下にテストファイルを格納していくが、Rspecではspecというディレクトリ下にファイルを格納していくため。



```
$rm -r ./test
```

####Capybara
Capybaraはrails newの時にbundle installによりすでにインストールされているので、
RspecでCapybaraを利用するための準備を行う。
spec/spec_helperにて編集を行う。

```
#See http://rubydoc.info/gems/rspec-core/RSpec/Core/Configuration

↓この文を追加
require 'capybara/rspec'
RSpec.configure do |config|
  config.before(:each,type: :system) do
    driven_by :selenium_chrome_headless
  end
↑この文を追加
# rspec-expectations config goes here. You can use an alternate
```

####FactoryBot
Gemfileにて以下の文を追加。

```
gem 'factory_bot_rails','~>4.11'

$ bundle install
```

##specの書き方
・itに到達する前にdescribeやcontextを何個も重ねて使うことができる。（type指定のみ外側のdescribeのみ使用可能）
・内部のdescribe、context、itを並べて複数記述することもできる。

```
describe [テスト対象] , type: [Specの種類] do

 context [ある状況・状態] do
  before do
   [事前準備]
  end

  it [期待の概要] do
  [期待する動作]
  end
 end
end
```

####用語の意味
◆テストケースを分類・整理する・・・・・・・describe、context
◆テストコードを実行する・・・・・・・・・・before、it

**describe**
describeには、```何について仕様を記述しようとしているのか（テストの対象）```を記述。

**context**
contextは、```テストの内容を「状況・状態」のバリエーションごとに分類するため```に利用。
ユーザーの入力内容が正しいかどうか、ログインしているかどうか、管理者かどうかといった、各種の条件をcontextに記述し、続くブロックの中にそのような条件下で想定する動作を記述していく。

**before**
beforeはその領域全体の「前提条件」を実現するためのコードを記述する場所。
describeやcontext内にbeforeを記述すると、```対応するdescribeやcontextの領域内のテストコードを実行する前に、beforeのブロック内に書かれたコードを実行。```

**it**
末端のテストケース。itは期待する動作を文章と、ブロック内のコードで実行。
```itの中に記述したものが期待通りに対象が動作すれば、Specが１件成功したことになる。```

beforeに書くような処理は、内部のitの中に書くことも出来るが、前提条件なのであればbeforeに書くほうがテストとして読みやすくなる。
またbeforeの処理は、itが実行される度に新たに実行されるので、あるテストケースのせいで別のテストケースが影響されることは基本的には無い。

**テストの実行コマンド**

```
$ bundle exec rspec テストしたいファイル
```

###参考著書
[現場で使える Ruby on Rails 5速習実践ガイド](https://book.mynavi.jp/ec/products/detail/id=93905)
WiMAXのホームルーターを抱えてお出かけ(≠お仕事)だ！

初めて書く記事がこれでいいのか、というのがありますが。
より身近になってきたリモートワークと相性の良さげなWiMAXを契約したんで、
お外でどんなもんかなー、というのを記事にしました。

## 書いた動機
コロナ避けのため車移動を増やしたのですが、結構通信量食ってたので
先日ビッグローブのWiMAX+5Gを契約したのです。
で、ふと考えるとリモートワーク（特にWFH）がだいぶ当たり前になってきている中、
外ではどれくらい使えるものなのかな？と思ったことが起因となります。
~~タイトル詐欺ですが、外出先で仕事がしたかったわけではないです。~~

そこで、車にホームルーターを積んで、

+ どれくらい速度が出るのか？
+ 近所だとどの辺で使えなくなりそうなのか？

を確かめてみるかー、ということで今回チョロチョロと走り回ってきました。

## 注意
+ 車内にAC電源取れる用意をしておく必要があります。
+ 運転中の計測は助手にお願いしてます。
+ ホームルーターは、5Ghz帯(屋内)の利用はしないように設定してます。

##実計測
大和市と相模原市と町田市が近いような場所に住んでいるので、そこからスタート
自宅 → 綾瀬飛行場 → 藤沢のはずれ → サザンビーチ → 圏央道で川沿い → 宮ヶ瀬湖周辺
と、神奈川県の真ん中から海に向かって、川沿いを走り、山へ向かうコースにしてます。

海でも山でもリモートワークはできるのか！？を
通信速度の観点から眺めてみようかと。

### 計測結果
| 場所 | ダウンロード(Mbps) | アップロード(Mbps) | コメント |
| --- | --- | --- | --- |
| 自宅 | 10 ~ 11 | 3 ~ 5 | |
| 自宅駐車場 | 26 ~ 28 | 8 ~ 10 | 家出ただけで速度改善・・・ |
| 綾瀬飛行場 | 5 ~ 10 | 0.4 ~ 2 | 米軍キャンプ入口付近で計測 |
| 秋葉台体育館 | 32 ~ 35 | 20 ~ 30 |湘南台から少し離れた場所 |
| サザンビーチ | 20 ~ 23 | 15 ~ 18 |砂浜間際で計測　|
| 圏央道 | 10 ~ 11 | 3 ~ 5 | 海老名などの川沿い、相模原IC近く |
| 宮ヶ瀬湖１ | 27 ~ 31 | 20 ~ 25 | 相模湖寄りのファミマで |
| 宮ヶ瀬湖２ | 34 ~ 43 | 2 ~ 10 | やまびこ大橋で |

各箇所2, 3回雑に測ってる感じです。
高速でも途切れずに計測できたのは少しびっくり。

## 結論と感想
おおよそ、神奈川県内の大きめな道路に面しているところであれば、
爆速とは言えないですが回線速度に問題が生じることはなさそうだなぁという結果になりました。
（というか、電波が入ってくるならば、人がスカスカなところの方が速い）

室内での計測になると、もう少し速度ダウンするのではないかと思いますが、
これでどこでも仕事ができてしまうことがわかりましたね！
この実測結果だと、家の通信が一番しょぼいことになるので外の方がいいんじゃないか、となりましたが・・・

あと、同時接続する端末が少なければ、モバイルタイプのルーターで十分ですね。

さて、この中で例外は飛行場近くになりますが、
この辺は通信速度もですが、発着陸とかの騒音がそれなりにあるので
まぁそもそも自宅で静かな作業をするには向かない環境ですね・・・w

さらに速度が欲しい場合は、室内で5Ghz帯使うかハイスピードモードをオンにすると良さげですね。
（今回はWiMAXがどこまでイケるのかだけ気にしたので使いませんでしたが）

では、n=1の個人感想文、おしまい。
Next.js で Google Fonts を取り扱うメモ



タイトルの通り、Next.js で Google Fonts を使用する方法についての備忘録をまとめます。

# Google Fonts

使用したフォントは Noto Sans Japanese です。

日本語対応フォントで細字から太字まで対応している見やすいフリーフォントが欲しかったので、こちらにたどり着きました。

## 手順

[Google Fonts](https://fonts.google.com/)
にアクセスして画像のようにいい感じに絞り込みをしつつ検索します。

フォントの太さをそれぞれリストに追加していきますと、ページ右の欄にあるラジオボタン（`<link>`と@import ）で`<link>`を選択します。

![Screen Shot 2021-10-27 at 19.41.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/942749/3bb34bc4-fd6d-6328-fe40-9734f9df5ef5.png)

タグが表示されているので、**選択部分**をコピーしておきます。

![Screen Shot 2021-10-27 at 19.58.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/942749/0b2ed5f6-374d-015a-78a5-339bfa9e0916.png)

# Next.js

つづいて Next.js の設定です

[Vercel - Font Optimization](https://nextjs.org/docs/basic-features/font-optimization)

まずプロジェクトの page ディレクトリ配下に\_document.js を作成します。（拡張子は別に TS でも TSX でも可能です）

```js:/pages/_document.js
import Document, { Head, Html, Main, NextScript } from "next/document";

// class Document extends NextDocument {
class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link
            href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;600;700&display=swap"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
export default MyDocument;
```

## next.config.jsでオプションを有効化する
```js:next.config.js
module.exports = {
  experimental: {
    optimizeFonts: true,
  },
};
```
以上です。
取り込むHeadは_app.tsxに直接記載する方法もあるようですね。難しそうに思いましたが意外と簡単に設定できました。

# 参考文献など
[Google Fonts](https://fonts.google.com/)

[using google fonts in nextjs with sass, css and semantic ui react](https://stackoverflow.com/questions/53111300/using-google-fonts-in-nextjs-with-sass-css-and-semantic-ui-react/61660414#61660414)
【Tableau】今年知って便利だったTips①〜ワークシートのスワイプ〜

この記事は[Advent Calendar 2021 Tableau](https://qiita.com/advent-calendar/2021/tableau2021)の8日目の記事となります。

本日は便利な**ワークシートのスワイプ**をご紹介します！
これは今年、あるTips共有会で教えていただいたものになります。
秒で完結するこのスワイプ機能を知ってから作業がかなり楽になったので、まだ知らない人へ是非とも届いたら嬉しいです。

まず赤枠部分のチャートは、ワークシート「ワイン生産国マップ」になっています。
![スクリーンショット 2021-12-07 22.43.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/5ff446e6-1202-305b-b912-ecc4263f2ff2.png)

これをワークシート「ワイン生産国マップ (2)」と入れ替えたい時、一瞬でスワイプすることが出来ます。
![スクリーンショット 2021-12-07 22.45.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/525407b9-3d66-f722-89fc-74b6cd730dcc.png)

###STEP①
まず入れ替えたい元のワークシートを選択してください。（クリックし選択されると黒い縁で囲われます）
![スクリーンショット 2021-12-07 22.46.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/757a4623-569e-e9c5-0cc6-00ca3fede1de.png)

###STEP②
入れ替え先のワークシートにカーソルを持っていくとワークシート名の真横にスワイプマークが現れます（↔︎がカーブした形のマーク）
スワイプマーク部分をクリックしてください。
![スクリーンショット 2021-12-07 22.46.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/263270c2-bf52-c039-6d75-081cd8446fe8.png)

一瞬でワークシートがスワイプされます！
![スクリーンショット 2021-12-07 22.47.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/98281d62-1817-445c-0a63-3469d49c090c.png)


尚、STEP①のワークシートの選択を行なわないと、スワイプマークが出現しません。
![スクリーンショット 2021-12-07 22.58.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/c2b82258-4aa8-d7a5-e29a-dd46c571823b.png)

教えて頂くまで一切気づきませんでした・・・
このTipsを知れたのは、Tabjoの**[お役立ちTips100本ノック!?WorkoutWednesday mini](https://note.com/tabjo/n/nc801ea425440)**に参加したお陰でした。
Tabjoは女性が企画・リードするTableauユーザー会の分科会です。
**つい周りに教えたくなるTipsや、誰でも必ず得るものがある素敵なイベント**だと思います。
企画・リードは女性中心ですが、**参加は男性も可能**なイベントですので是非チェックしてみてください！
Vtuberが自分で準備画面作るときに使った技術の紹介


こちらの記事は `Engineering for Vtuber Advent Calendar 2021` の12日目のものになります。

https://qiita.com/advent-calendar/2021/vtuber

# 準備画面が欲しい！

おはかき！Vtuberの柿色めいとです。
配信をちょいちょいやらせてもらっているんですが初めの頃に待機画面があると「配信ぽいなぁ」なんて思いました…
ということで！無いなら準備画面を作ればいいじゃない…！作るぞ！

[KakiiroMate/PreparationScreen](https://github.com/KakiiroMate/PreparationScreen)

作りました。

![PreparationScreen.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2339347/8b33578b-297e-6e71-3885-2041205bd49b.gif)

こういう感じで知っている技術を使いました。
プロジェクトとしてはAssetsを利用してC#などは多く書かずにいれるように作成しました。

## 使ったもの

- [Unity](https://unity.com/ja)
- [Vroid](https://vroid.com/)

VroidStudio 3Dの体を構築してUnityというツールで準備画面を作成しました。

今回はUnityにフォーカスして説明させていただきます。

## Unityにおいての使用ツール/アセット

- [DoTween Pro](https://assetstore.unity.com/packages/tools/visual-scripting/dotween-pro-32416)

アニメーションを簡単に行えるAsset
準備画面においては左の僕が回っているところや、右半分にある文字のアニメーションに使用しています。
テキストのアニメーションなどはProじゃないといけなかったりと制約があったので購入しました。

- [UnityChanToonShader](https://github.com/unity3d-jp/UnityChanToonShaderVer2_Project)

いい感じに使えるトゥーンシェーダー
柿色めいとの3Dの体を表現しているもの。アウトラインや影の色などの設定をさせてもらっています。
設定する人がすると本当に3Dに見えない表現にできるのですごいです。

- UnityChan Assets(© UTJ/UCL)

UnityChan周りのモデルやアニメーションが入っているAsset
柿色めいとの立っている姿や走っている姿のアニメーションで使わせてもらっています。
サクッとモデルやアニメーション・C#での制御が入ってるので便利です。

- Unity Recorder

Unityの画面を動画になどの出力に変換してくれる。
動画をそのまま出力してくれたツール。
動画出力してループできるように切り取るのは別途動画編集ツールを使っています。

ループを容易にするためにTimelineを使用しようかと思いましたが実装の関係上まだうまくいってなかったので一部のみ使用しました。

- [UniVRM](https://github.com/vrm-c/UniVRM)

VroidStudioで作成した体を扱うもの。
柿色めいとの体を表示するために使用。
Unityで設定した値をUnityからVRMに吐き出したりできるのが便利です。

### フォント

- [たぬゴ](https://tanukifont.com/tanugo/)

ともかく何にでも合うフォント。
お気に入りでおススメです。

## アニメーションのコマ送りについて

右下の走ってる柿色めいとは

https://qiita.com/flankids/items/c36ccdc02031fa304365

こちらの記事を参考に反映させてもらいました。

手元で自分なりに改善しようと思ったのですが上手くいかなかったので流用させてもらっています。

# 他素材について

- ツイッターぽいアイコン
- 上から生えてる柿色めいと

などは別途自作しております。

## まとめ

以上が柿色めいとが自身で作った準備画面でした。かなりアセットを使って自分なりに作りたい画面にできたと思います。
今後もアップデートしてみたりとかやれたらなと思っています！

また別途他のVtuberの方への提供などできるようにVroid周りは切り替えを簡単にできるように作ったりなど工夫をしているつもりです。

この記事を書くにあたって以下の動画で配信しながらたたき台を作成しました。

https://www.youtube.com/watch?v=aOMM19RoZqk

作業配信なのでお時間のある時に是非ご視聴などお願いします！
競プロで使える標準エラーの出力方法(Swift)

私はSwiftにおける競プロの記事をいくつか投稿しています。

- [競プロで使える標準入力の便利メソッド一覧](https://qiita.com/uhooi/items/b8cebb638e9bf5ac9556)
- 競プロで使える標準エラーの出力方法 __←イマココ__
- [競プロで使える便利なエクステンション一覧](https://qiita.com/uhooi/items/ff1113c337d7a756d580)
- [競プロで使えるアルゴリズム関数一覧](https://qiita.com/uhooi/items/d4998e90f3f2fed01e68)

自分で武器を増やしていくのが競プロの面白さのひとつだと思っているので、まずは自分で考えるのがオススメです。
どうしてもわからないときに、私の記事が参考になると嬉しいです :relaxed:

## はじめに

本記事は [エムティーアイ Advent Calendar 2021](https://qiita.com/advent-calendar/2021/mti) の7日目の記事です。
昨日は @rtok さんで [Protocol Oriented Programmingを使ってみて思ったこと](https://qiita.com/rtok/items/80dea6d3567627cf89f1) でした。

Swiftで標準エラー出力する方法を紹介します。

本記事は以下の記事に触発されて執筆しました。

https://qiita.com/amaguri0408/items/61d65c3bea3a5815d704

そのためAtCoderなどの競技プログラミングで使っていただけると嬉しいです。

## 環境

- OS：macOS Big Sur 11.6
- Swift：5.5  
5.2.1（2021/12/07現在のAtCoder）でも動作する
- Xcode：13.0 (13A233)

## 標準エラー出力する

`Foundation` を使って標準エラー出力します。

`Darwin` を使う方法もあるようですが、AtCoderだと「no such module 'Darwin'」だったので見送りました。

```swift:OutputUtils.swift
import Foundation

extension FileHandle: TextOutputStream {
    public func write(_ string: String) {
        guard let data = string.data(using: .utf8) else {
          return
        }
        try? write(contentsOf: data)
    }
}

public func printStandardError(_ value: String, separator: String = " ", terminator: String = "\n") {
    var standardError = FileHandle.standardError
    print(value, separator: separator, terminator: terminator, to: &standardError)
}
```

`printStandardError(_:separator:terminator:)` メソッドを呼び出します。
`print()` メソッドに倣って `separator:` と `terminator:` を用意しましたが、基本的には指定しなくて問題ありません。

```swift:main.swift
printStandardError("I'm uhooi.")
```

標準出力されず、標準エラーのみ出力されます。

```shell-session:標準出力
```

```shell-session:標準エラー出力
I'm uhooi.
```

## おわりに

これでSwiftでも標準エラー出力できました :relaxed: 

以上 [エムティーアイ Advent Calendar 2021](https://qiita.com/advent-calendar/2021/mti) の7日目の記事でした。
明日は @uhooi で [GitHubのPRテンプレート(iOS・Android)](https://qiita.com/uhooi/items/55cfd8fab2147e3a7839) です。

## 参考リンク

- [macos - How can I output to STDERR with Swift? - Stack Overflow](https://stackoverflow.com/questions/24041554/how-can-i-output-to-stderr-with-swift)
なんでもヴェイパーウェイヴにする

# ヴェイパーウェイヴとは

>　音楽的には、1980年代から1990年代にかけての大衆音楽、ラウンジ・ミュージック、スムースジャズ、コンテンポラリー・R&Bなどのサンプリングを基本とし、そこからループ、ピッチダウン、チョップド&スクリュード（英語版）などエフェクトを重ねていくことによって制作される

[ヴェイパーウェイヴ　出典: フリー百科事典『ウィキペディア（Wikipedia）』](https://ja.wikipedia.org/wiki/%E3%83%B4%E3%82%A7%E3%82%A4%E3%83%91%E3%83%BC%E3%82%A6%E3%82%A7%E3%82%A4%E3%83%B4)

# 元ネタ音源

https://www.youtube.com/watch?v=DBjzZwiFy20

# ヴェイパーウェイヴにする
とりあえず遅くしてピッチダウンしてみる

これ使うと遅くなるらしい
https://librosa.org/doc/main/generated/librosa.effects.time_stretch.html

>Or half the original speed
>y_slow = librosa.effects.time_stretch(y, 0.5)

```python:
import librosa
import soundfile as sf
import pydub
from pydub import AudioSegment

path = "/home/dev/tmp/mp/vw.mp3"
path_slow = "/home/dev/tmp/mp/sm.wav"

y, sr   = librosa.load(path, mono=True)

y_slow  = librosa.effects.time_stretch(y, 0.5)

sf.write(path_slow, y_slow, 44100, format='wav', subtype='PCM_24')
```

おしまい

# 聞いてみた

遅くもなってないしなぜかピッチ上がってる。ゴミだろ。ドキュメントは嘘か？

https://soundcloud.com/bjack_mijilme/python-vaporwave


# 今後の展開
遅くしてピッチダウンする

# でも
これはこれで使い道あるエフェクトかもしれない
【Git】間違えてadd,commitしたときの対処方法

##はじめに
「コミットに含めたくないファイルまでステージングしてしまった！」、「前のコミットに現在修正中のものも加えたい！」
「リファクタリング中にあれこれ試していたら機能が動かなくなってしまった。一旦、ファイル変更前の状態に戻したい。」
等など、たまにうっかりやってしまうGitミスを解決する方法をまとめました:sunny:

### add(ステージ）を取り消す。

```
//sample.htmlのステージを取り消す。（ファイル名、ディレクトリ名の指定が可能）
git reset HEAD --　sample.html
//全変更を取り消す。
git reset HEAD -- .
```
### 直前のコミットを取り消しする。

```
//ローカルのファイルを残す
git reset --soft HEAD^
//ローカルのファイルも消す
git reset --hard HEAD^
```

### 直前のコミットを修正する。(現在の変更をaddして追加することも可能。)
エディタが立ち上がるので、コミットメッセージを修正して「esc」→「q」→「w」
（-mでコメントを修正してもOK！）

```
//ファイル名、ディレクトリ名の指定が可能
git commit --amend
```

### ファイル変更の取り消し

```
//sample.htmlへの変更を取り消す。（ファイル名、ディレクトリ名の指定が可能）
git checkout --　sample.html
//全変更を取り消す。
git checkout -- .
```

addの削除、コミットの修正等を行ったら、
「git status」、「git log --oneline」などで確認しましょう！
知り合いに教えたら、知られてなかった便利なショートカット

## 注意書き

僕が、Mac ユーザーなので、ショートカットは全て Mac のキーボード用のになります。

## はじめに
弊社ではしょっちゅうエンジニアが部屋に集まって、大きいモニターを囲ってモブプロを行なっています。

ナビゲーターに vimmer がいて、
vim を勉強している人がドライバーの時は
ナビゲーターから「そこに到達するには、このショートカットが使えるぞ」

と、コーディング以外のことにでもチャチャ入れをして、ワイワイ開発をしています。

そんな中、僕は vim は勉強中なのですが、仕事で使い物にならないので、VSCode を使っています。

で、

扱うアプリを手に入れたら、基本的にひとしきり遊ぶ癖があるので、
みんなが使っていないショートカットを偶然見つけて、使い続けてる。なんてことがよくあります。

それを披露すると、部屋が湧き、気持ちが良くなります。

今回は、
僕がモブプロをしていたり、初学者の方とペアプロをしていたり、してる中で
意外と知られていないんだなーって僕が思ったショートカットをいくつか紹介していきます。

みなさんも、この記事を読んだ後、我が物顔で、披露し、ぜひ気持ち良くなってください

### コマンドパレットの表示 [cmd + shift + p]

cmd + p を使って、ファイルを検索することはよくあると思いますが、
先頭に `>` をつけることで、コマンドを呼び出すことができるのはご存じでしょうか？

弊社のメンバーが、 cmd + p でファイル検索を呼び出して、先頭に `>` を入力してから、コマンドを入力していたのですが、
実は、 cmd + shift + p で、完結します。

### シンボル検索 [cmd + shift + o]

VSCodeでは、
関数やクラス、メソッドなどの定義されたものを **シンボル** として認識されます。

🤔　[cmd + f] と何が違うの？

cmd + f は文字列で検索ため、定義元も参照先も同時にヒットしてしまいます。
しかし、このシンボル検索を行うことで、定義元だけに絞り込んで検索ができるので、アクセスが早いというわけです。

ちなみに、
cmd + p で呼び出したファイル検索の先頭に `@` をつけると同様のことができますが、
工程が長いので、こちらを覚えましょう

### エディタグループを増やす/移動する [cmd + 任意の数字]

エディタグループとは
この枠ひとつのことです。
![スクリーンショット 2021-12-07 午後10.47.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321282/c81418b7-ba22-24e6-e124-427991c4ab05.png)

DnD で、エディタグループを増やしている方はいませんか？


エディタグループが1つしかない場合、
cmd + 2 を実行することで、右側にエディタグループを作成できます。

そこで、cmd + p　などで任意のファイルを開くと、
簡単に2ファイルを見比べることができます。

さらにその状態で、cmd + 1 をすると左側のエディタグループがアクティブになります。

エディタグループのインデックスを使って移動を行う、なければ作成を行う。ってイメージです

### カーソルの行の内容を移動する [alt + ↑/↓]

alt + ↑ とすれば、カーソルの内容を一つ上に、
alt + ↓ とすれば、一つ下に、
内容をそのまま移動することができます。

よく見るのが、関数をマウスで範囲指定し、
cmd + v で切り取り、
任意の場所で、 cmd + p で貼り付ける

これが、shift + ↑/↓ で範囲指定し、
alt + ↑/↓　で移動することができるので、少し早いです。
いや、だいぶ早いです。

### サイドバーを閉じる [cmd + b]

そのままです。

### エクステンションを開く [cmd + x]

そのままです。
拡張機能を検索する窓です。

### エクスプローラーを開く [cmd + e]

これもそのままです。

[cmd + shift + f] は言わずもがなですね。

### 定義元を開く [f12]

定義元が別ファイルであれば
別タブで開きます

### 定義元をウインドウで開く [shift + f12]

タブではなく、こんな感じで開いてくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321282/432d5c75-92e5-6cd6-cb0e-a68185008725.png)

### クイックフィックスを開く [cmd + .]

こんなのを出してくれます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321282/0d80fa22-4491-c4ad-0670-a9f2363d69cc.png)

エラーをホバーするときに出てくる Quick fix です。

## 終わり

どうでしたでしょうか。
知ってたよ、ってのもあったと思います。
実際最後の方が知ってる人多いと思います。

ただ、知らない人はいるなって思ってるので、一応書いてみました。

念のため、VSCode のショートカットの一覧の PDF のリンクも貼っておきます。

https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

もっといいのあるよー、とかあれば教えてください。

個人的にシンボル検索は、激アツです。

JS ではあんまりだったのですが、最近描いてる Go だと結構心強く動いてくれています。