OmniAICreator/Qiita-1.07M huggingface dataset:
【p5.js】『Generative Design with p5.js』P_1_2_1_01 で登場する関数 part.2 map()

この記事は Qiita p5js アドベントカレンダー3日目の記事です。

## これはなに
書籍[『Generative Design with p5.js』P_1_2_1_01](https://editor.p5js.org/generative-design/sketches/P_1_2_1_01)に登場する関数について理解を深める記事です。
今回はmap()。

## map()
mapといえば他の言語だと配列操作の印象がありますが、
p5のmap関数は全然違う目的で使用されるようです。

### Type
```
map(
    value: number,
    start1: number,
    stop1: number,
    start2: number,
    stop2: number,
    withinBounds?: boolean
): number;
```

引数については下記の通り。

- value 動的な値
- start1 valueの下限
- stop1 valueの上限
- start2 valueの下限に対して返す値の下限
- stop2 valueの上限に対して返す値の上限
- withinBounds trueのとき、stop2の値を超えることがなくなるオプション

↑
mapを理解してこれを書くまで結構苦しみました。

### リファレンスより
> Re-maps a number from one range to another.
In the first example above, the number 25 is converted from a value in the range of 0 to 100 into a value that ranges from the left edge of the window (0) to the right edge (width).
> 
>数値をある範囲から別の範囲に再マッピングします。
上の最初の例では、25という数字は、0から100の範囲の値から、ウィンドウの左端（0）から右端（幅）までの範囲の値に変換されます。（DeepL翻訳）

これだけではわからん（素直な気持ち）

### 試してみる
[リファレンス](https://p5js.org/reference/#/p5/map)を参考に下記のコードを試してみました。
コンソールにポインタのX座標とmapの結果を出力します。
（Vueで使用しているため関数の前に'p'があります）

```typescript
p.setup = () => {
  p.createCanvas(500, 500);
  // p.colorMode(p.HSB);
};

p.draw = () => {
  p.background(204);
  let x1 = p.map(p.mouseX, 0, p.width, 25, 75);
  console.log(`mouseX: ${p.mouseX} x1: ${x1}`);
  p.ellipse(x1, 25, 25, 25);
};
```

出力結果がこちら。
mouseXが522のとき、mapの結果は77.2と出ています。

```
mouseX: 522 x1: 77.2
```

mapの結果はellipse()の第一引数にセットされているため、
ポインタが横に動けば描画された楕円も横に動きます。

```typescript
p.ellipse(x1, 25, 25, 25);
```

では何がおこっているのか。

まずstart1は0、stop1はwidthです。
つまりmapにおけるvalueの開始地点は0、
終着地点は500となります。

それを踏まえてstart2とstop2の結果が返る値となります。
start2は25、ということはmouseX(value)が0のときに25を返します。
![スクリーンショット 2021-12-02 19.30.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358229/d49f0315-7412-d7ca-5b9b-ecb67b480313.png)

stop2は75なので、mouseX(value)が500(width)のときに75を返します。
ここでもう一度コンソールに出力した結果を確認しましょう。

```
mouseX: 522 x1: 77.2
```

ポインタのX座標が522、x1が77.2と出ています。
つまり、現在のポインタはcreateCanvasの範囲からはみ出た場所におり、
targetの位置もstop2の値を少し超えた場所に位置しているということになります。
![スクリーンショット 2021-12-02 19.21.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358229/184e740b-4c2e-ae4e-41a8-d7f4779c3006.png)

今回はつけていないですが、第五引数の`withinBounds`にtrueを渡せば
mouseXが500を超えても、mapの返り値は75でストップします。

いやー難しかった！！

### どんなときに使えそうか
「変動する値をもって、範囲を指定したい別の値に置き換えたいとき」
でいいんじゃないでしょうか。

実際に[P_1_2_1_01](https://editor.p5js.org/generative-design/sketches/P_1_2_1_01)で使用している箇所をみてみましょう。

```typescript
tileCountX = int(map(mouseX, 0, width, 2, 100));
tileCountY = int(map(mouseY, 0, height, 2, 10));
```

リンクから挙動を試してみてください。
横軸の正確な目視は難しいですが、
マウスが右いっぱいの時にタイルの数が１行に対して100列、
マウスが下いっぱいの時にタイルが10行になっていることが分かります。

動的な要素で制御したいときはmap()の使用を検討してみると
面白い動きができるかもしれませんね。

## 参考
[p5.js reference | map()](https://p5js.org/reference/#/p5/map)
[『Generative Design with p5.js』P_1_2_1_01](https://editor.p5js.org/generative-design/sketches/P_1_2_1_01)
エンジニアに優しいデザインのお話

こちらは、[ゆるWeb勉強会@札幌 Advent Calendar 2021](https://adventar.org/calendars/6270) の10日目の記事です。

#エンジニアにとってのデザインとは？
エンジニアの皆さんは、デザイナーってひらめきとか、センスとかもう思わないですよね？笑
今ではデザインについて、エンジニア界隈でもかなり認識が変わってきていますが、それでも、デザインはセンスであると認識している人は少なくないと思います。

#デザインはリファクタリング
私はWebのデザインをメインとして仕事していますが、Webアプリ開発を一応経験している人間です。私に言わせてみれば、デザインはリファクタリングなんです。

デザインは、一言で言うと、数多くある情報を整理する作業で、これが結構リファクタリングに似てるのではないかと思っています。私の中のリファクタリングとは、簡単にいうとロジックをわかりやすくしたり、使いまわせるロジックは部品化したりすることです。デザイナーは、情報に優先度をつけて、情報をわかりやすくまとめる作業で、「センス」とか「ひらめき」とかとはだいぶイメージが違うかもしれません。

良いデザイナーほど、ビジュアルを最後の最後に検討しますし、いかに情報をわかりやすく伝えられるかを最優先します。

#四つの言葉を覚えればデザインは大体わかる
コードだと、関数、変数などの用語があり、これらを理解することでプログラミングの第一歩として踏み出せます。これに対し、デザインも基本的な用語があり、これらを覚えれば、デザイナーとしてのリファクタリングができます。

日常の言葉に言い換えると、ずばり
![Web 1366 – 6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277768/47e69a9f-606f-fc0c-fa4f-037c19e88101.jpeg)

この四つです。

#集める！
これは、専門用語でいうと「近接」になります。
同じ特徴、分類に属するものは集めましょうということです。
例えばこんな図形があるとします。
![Web 1366 – 7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277768/19ba0fd0-c74c-5fec-e53b-9de262da2bc6.jpeg)

普通だったらどうしますか？
もちろん、菱形は菱形同士、丸は丸同士を集めますよね？この作業自体はデザインで、下の図に完成すればクリアです。
![Web 1366 – 13.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277768/6ca5c993-ff1c-5b8d-006e-d5ef5ff521a6.jpeg)

#揃える！
これは、専門用語でいうと「整列」です。結構普通の言葉ですけどね笑
無秩序なものに秩序を与える、横一列に並べたり、縦横均等の数に並べたりすればOKです。さきほどの例でいうと、菱形を横一列に並べたり、丸を横二つ縦二つに揃えたりすることです。
![Web 1366 – 17.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277768/184054db-a14a-720f-6b67-99364f8dc607.jpeg)

無秩序な図形がだいぶいい感じになりましたね。まだまだ良くなります。

#メリハリ！
コントラストのことですね。これは、情報に優先順位をつけることです。重要なものはわかりやすく見せると、見る人の負担も軽くなります。先の図で、丸を大きく、三角と菱形を小さくすればだいぶそれらしく見えてきますね。
![Web 1366 – 19.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277768/c803faac-d1ca-21c5-310a-80d75c29cbcd.jpeg)

#繰り返す！
最後は「反復」です。言葉通りで特にいうことありません笑
同じ類のものであれば、別々のデザインを作らずただただ繰り返せばいいだけです。例えばこんな感じです。
![Web 1366 – 22.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277768/e9921e8f-c35a-09ec-19bd-7e4ff1a2d2f0.jpeg)

#デザイナーは難しいことはしていません
デザインはとっつきにくいとか、デザインが苦手とか、結局見方がわかればそれほど難しいことではありません。すごいデザインにも必ずルールがあって、それを私たちが共感できるかどうかだけなんです。共感できなれば、それはそのデザインが私たちをターゲットにしてないことになります笑

もちろん、デザインは「応用美術」で「美」に関わる部分でもあるので、「きれい」とか、「かっこいい」とかは必要です。ただ、それができてないを理由にデザインができないとは言い過ぎです。見た目を追求するあまりに、情報を整理できていないとすれば、それはデザインではなく、アートになります（聞き慣れてる言葉ですね笑）。

#デザインのあるエンジニアライフを
エンジニアはデザイナーと切っても切れない関係です。問題はお互いの理解だと思います。デザイナーに求められるのは論理性とすれば、エンジニアに求められるのは、共感かもしれません。それは物事の感じ方で、少しのコツがわかるだけでも、デザイナーと「あ、こことここグルーピングにしたほうがいいかも」「もう少しこの部分がわかりやすくしたいな」みたいな会話も楽しめます。

デザインのあるエンジニアライフは意外と楽しいかもしれません。
ここでご紹介したデザインの用語を覚えて、いろんなサイトを見るときっと新しい発見があると思います。

それでは良いエンジニアライフを！
scikit-learn使用時に出た'SVC' object has no attribute '_probA' エラーの対処法

# はじめに

scikit-learnを用いて機械学習させたモデルを、学習させたPCと違うPCでモデルを使用しようとしたところ、エラーが出た。
学習させたPCをPC①、使用しようとしたPCを②とする。
結論から言うとバージョンの違いのせいだったため、学習環境にバージョンを合わせれば問題ない。
ただし、筆者の環境においてはエラーが消えたが、必ずこれで消えるという訳ではない。

# 原因

はじめに の中で既に書いたが、scikit-learnのバージョン差によってエラーが出ていた。
バージョンを揃えればエラーを解消できる。
筆者の環境では、バージョンが以下のようになっていた。
PC①：0.23.2
PC②：0.22.2

# 解決までの手順

### バージョン確認
それぞれのPCでscikit-learnのバージョンを確認する
バージョン確認には以下のコードをコマンドプロンプトで使用する。

```
python
import sklearn
print (sklearn.__version__)
```

### 使用環境のバージョンを変える
PC②で、以下のコードをコマンドプロンプトで使用する。
なお、PC②で別のモデルを作成した場合は、そのモデルはPC②で使用不可になるため注意が必要。

```
pip uninstall scikit-learn
```
アンインストールが確認できた後、以下のコードを入力する。
ただし、`0.22.2`についてはPC②のバージョンを入れる必要がある。

```
pip install scikit-learn==0.22.2
```

以上の操作でエラーが消えた。

# 終わりに

この記事では筆者の環境で発生したエラーの解決方法であり、他の環境すべてで対応できる保証はないが、
同様の対応でエラーが解消されることを期待する。

# 参考
https://algorithm.joho.info/machine-learning/python-scikit-learn-version/
https://www.grisoluto.com/entry/python-library-downgread
Salesforceユーザのプロビジョニング(自動生成)方法まとめ

#プロビジョニングとは
新入社員が入社した際、Salesforceにユーザを作らねばならない…という場面を想定します。

ユーザを手作業で作ることもできますが、それを自動化する機能もあります。これを「プロビジョニング」と呼びます。
また、退社した場合には自動的にユーザを無効化することもできます。これを「プロビジョニング解除」と呼びます。
本記事では、その方法をまとめます。

#前提
ユーザのプロビジョニング&プロビジョニング解除を行うには、外部にIDを管理するサービスが存在していることが前提となります。(Active Directory, Azure AD, Ping Identity, Facebook等)
どのサービスを利用しているかによって、方式が変わってきます。

#方式まとめ
|サービス|プロビジョニング方式|プロビジョニング解除方式|仕組み|
|:----|:----|:----|:----|
|Open ID Connect<br />(Facebook, Google等)|Salesforceの設定画面でFacebook, Google等を認証プロバイダに設定時に自動生成される[登録ハンドラ](https://help.salesforce.com/s/articleView?id=sf.external_identity_customize_reghandler.htm&type=5)のコードを編集し、ユーザを自動生成するよう変える。|(不可)|Facebook, Google等を使ってサインアップ/ログイン時に登録ハンドラが自動実行される。|
|Azure AD|Azure ADで[こちらの手順](https://docs.microsoft.com/ja-jp/azure/active-directory/saas-apps/salesforce-provisioning-tutorial)を参照して設定する。|Azure ADで[こちらの手順](https://docs.microsoft.com/ja-jp/azure/active-directory/saas-apps/salesforce-provisioning-tutorial)を参照して設定する。|左記の設定を行うと、Azure ADが裏でSOAP APIを叩いてくれるようになっている。|
|SCIMに対応するSAML IDプロバイダ<br />(例：Ping Identity)|Ping Identityの場合、[こちらの手順](https://docs.pingidentity.com/bundle/pingone/page/acu1583772605336.html)を参照して設定する。|Ping Identityの場合、[こちらの手順](https://docs.pingidentity.com/bundle/pingone/page/acu1583772605336.html)を参照して設定する。|左記の設定を行うと、IDプロバイダが裏で[SCIM エンドポイント](https://help.salesforce.com/s/articleView?id=sf.identity_scim_overview.htm&type=5)を叩いてくれるようになっている。|
|SCIMに対応しないSAML IDプロバイダ|Salesforceの設定画面で[SAML 用のジャストインタイムプロビジョニング](https://help.salesforce.com/s/articleView?id=sf.sso_jit_about.htm&type=5)を有効化する。|標準機能では実現不可。IDプロバイダ側でユーザの無効化時にREST APIまたはSOAP APIを叩いてSalesforceのユーザを無効化する必要がある。|左記の設定を行うと、Salesforceに存在しないユーザがSAMLによってログインしようとした際にSalesforceが自動的にユーザを作成してくれる。|
|Active Directory|[Identity Connect](https://trailhead.salesforce.com/ja/content/learn/modules/identity_connect/identity_connect_intro)を導入する。|[Identity Connect](https://trailhead.salesforce.com/ja/content/learn/modules/identity_connect/identity_connect_intro)を導入する。|Identity Connectは、Active Direcoryのユーザ情報をSalesforceに同期する製品。|
PostgreSQL で cannot call populate_composite on an array と言われる

自分用の備忘録として

PostgreSQL で `jsonb` や `array` と一緒に `jsonb_to_record()` を使っていたら次のエラーがでました。

> cannot call populate_composite on an array

エラーが出る正確な理由はわからなかったのですが、 `jsonb_to_record()` のかわりに `jsonb_array_elements()` をつかうクエリにしたら期待通りの処理になりました。

----

エラーが出るクエリ (一部抜粋)

```sql
select
  t_json.a as a
  ,t_json.b as b
  ,t_json.c as c
  ,t_json.d as d
  ,t_json.e as e
from
  jsonb_to_record(t_json) as t_json (
  a TEXT
  ,b TEXT
  ,c TEXT
  ,d TEXT
  ,e TEXT
)
```

期待通りに動いたクエリ (一部抜粋)

```sql
select
  t_json->>'a' as a
  ,t_json->>'b' as b
  ,t_json->>'c' as c
  ,t_json->>'c' as c
  ,t_json->>'e' as e
from
  jsonb_array_elements(t_json) as t_json
```
2021 年版 Radeon GPU を Linux で powerlimit するメモ

参考情報

https://wiki.archlinux.org/title/AMDGPU

https://www.reddit.com/r/Amd/comments/agwroj/how_to_overclock_your_amd_gpu_on_linux/

https://www.coelacanth-dream.com/posts/2020/11/27/linux-amdgpu-clock-setting/

Vega 前と後でいろいろ設定方法が異る

amdgpu 21.40 を想定します.

## Polaris

```
cat /sys/class/drm/card0/device/pp_od_clk_voltage
```

でカードのクロックリストが取れる. card0 は適宜置き換えます.

RX570 16GB blockchain edition

```
OD_SCLK:
0:        300MHz        900mV
1:        466MHz        900mV
2:        751MHz        900mV
3:       1019MHz        900mV
4:       1074MHz        900mV
5:       1118MHz        900mV
6:       1119MHz        900mV
7:       1275MHz        900mV
```

```
sudo sh -c "echo 's 7 1019 900' > /sys/class/drm/card0/device/pp_od_clk_voltage"
```

`s` でシェーダ(?)クロック, `m` でメモリクロックを調整します.

ただ, 書き込んだだけではまだ反映されません.

`c` コマンド(commit?)を送って反映させるのを忘れずに.

```
sudo sh -c "echo 'c' > /sys/class/drm/card0/device/pp_od_clk_voltage"
```

commit 時 GPU にリセットがかかるようなので, GPU 使うアプリは一旦止めるのが安全そうです.
(昔はハングしたものよ...)

状態は

```
sudo cat /sys/kernel/debug/dri/0/amdgpu_pm_info
```

で確認できます.

1019 MH/s 900mV で teamredminer で ETH 27 MH/s @ 79W になりました.





## RDNA

RDNA2 の　`pp_od_clk_voltage`

```
OD_SCLK:
0: 500Mhz
1: 2199Mhz
OD_MCLK:
0: 97Mhz
1: 1000MHz
OD_VDDGFX_OFFSET:
0mV
OD_RANGE:
SCLK:     500Mhz       2600Mhz
MCLK:     674Mhz       1075Mhz
```

### ワット指定

Vega 以降は可能の模様なので, rocm-smi で watt 指定が楽でしょう..

https://qiita.com/syoyo/items/78f1093696127b64d684
https://qiita.com/syoyo/items/fbc9375683deac7f0019

また, rocm-smi は Polaris はもう対応しなくなっています.
talib をインストールしようとしたらエラーが出る


talibをインストールしようとしたら、

```
"/usr/bin/python3 -u -c "import setuptools, tokenize;__file__='/tmp/pip-install-483d_l2s/ta-lib/setup.py';f =getattr(tokenize, 'open', open)(__file__);code=f.read().replace('\r\n', '\n');f.close();exec(compile(code, __file_ _, 'exec'))" install --record /tmp/pip-record-2os8vbe_/install-record.txt --single-version-externally-managed --com pile --user --prefix=" failed with error code 1 in /tmp/pip-install-483d_l2s/ta-lib/
```
もしくは、

```
cannot find ta-lib library, installation may fail.
```

こんなエラーが出たとき。

#解決する
OSはLinux。

手順はこう。
1.talib 本体をインストールする
2.解凍する
3.pip install する

コードは以下。

```
$ curl -L http://prdownloads.sourceforge.net/ta-lib/ta-lib-0.4.0-src.tar.gz -O && tar xzvf ta-lib-0.4.0-src.tar.gz
$ untar and cd
$ ./configure --prefix=/usr
$ make
$ sudo make install
$ python -m pip install ta-lib
```

#メモ

talibはそのままpipでインストールできないのは知ってた。
ただ、make installをsudoで行うのを忘れていたせいで上記のエラーが出てしまったみたい。
何か引っかかったらとりあえずsudoをつけ忘れていないか確認するのは大事。

参考記事→
https://mrjbq7.github.io/ta-lib/install.html
他のOSでのインストール方法などはこちらから。
Lookerでの分析に開発環境を構築してデプロイも自動化した話



# 要約
1. BIを使ったダッシュボード開発だって開発環境でテストしたい。というかする必要ある。
2. hub&spokeモデルを参考に開発環境を構築してみたら快適だった。

# なぜ開発環境が必要か

LookerをプロダクトにEmbedして使用した場合、プロダクトの一部としてユーザーに提供する性質上、プロダクト開発と同じようにSLAの担保や品質保証といった論点にも対応する必要があります。
そういった流れの中で、一般的なSaaSプロダクトと同じような下記のプロセスでEmbedBIダッシュボードの開発ができないか考えました。

1. Lookerの中に開発環境とテスト環境と本番環境を用意する
2. PRのマージと同時に開発環境とテスト環境には自動デプロイする
3. テスト環境でQAを行いテストが通ったものだけ本番にデプロイする


# hub&spokeモデルとの出会い

当初はLookerのステージングインスタンスの契約を検討しましたが、ユーザー定義ダッシュボード（コード化されていないダッシュボード）のデプロイの難易度が高そうだったのと、価格面で導入を渋っていました。
そこでとある2つの記憶を思い出しました。

1. Lookerのユーザー会で、remote_dependencyとconstantの機能の併用で開発環境を作っていると発表されている人がいた気がする。
2. Lookerの導入コンサルの方から hub&spokeモデルという開発方法を教えていただいた記憶がうっすらある。

この2つの記憶を頼りに、下記のような構成ができないかと思いつきました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/877875/b101e577-4283-96df-61d9-3c84c9bc7142.png)

実際に構築してみるとけっこう秀逸な作りになっていて、今までテストがしづらかったPDT生成関連のテストができたり、開発環境やテスト環境のデータを用いたQAもかなりやりやすくなりました。

# 苦労した点

1. 本番と同じスキーマのデータをテスト環境や開発環境でBigQueryに整備する必要があった。
1. [remote_dependency](https://docs.looker.com/reference/manifest-params/remote_dependency)の更新をGithub Actionsから行うのにコードを作り込む必要があった。(Update ManifestのAPIがあれば楽勝だったのに、、、)

などについて苦労しましたが、総じてリリース前の精神衛生がかなり改善されたので作ってよかったなと思います。
2021-12-02 AXI Verification IPを使う (AXI4LITE)


### 参考

- `1. XilinxのAXI Verification IPを試す。 
    - https://qiita.com/tethys_seesaa/items/9d4c00212d9ea79b1497
- `2. https://support.xilinx.com/s/question/0D52E00006hphJ3SAI/axi-vip-and-axivipv102pkg-is-not-declared?language=ja

### 処理の概要

1. Vivadoでプロジェクトを新規作成
1. Block Designを「sys」という名前で作成する
1. Tools > Create and Package New IP ... > Create a new AXI4 peripheral
    - 設定はデフォルトのまま作成してIP化する
1. myip_0をBlock Designに追加する
1. AXI VIPを追加する
    1. PROTOCOLはAXI4LITEにする
1. aclk, aresetnのピンをMake Externalする (名前をこのようにする)
1. axi_vip_0とmyip_0を接続する
1. Create HDL Wrapperをする
1. Simulation Sourcesにtb.svを作成する
1. Run Simulationをする
1. みたいピンを波形に足す
    1. m_axi_wlast, m_axi_wvalid, m_axi_wready, m_axi_wdata[31:0]
    1. s00_axi_wdata[31:0], s00_axi_rready, s00_axi_rvalid

以下の実装はQiitaの記事からimport axi_vip_pkgを変更している (参考2).

```tb.sv
`timescale 1ns/1ps
//import axi_vip_v1_0_1_pkg::*;
import axi_vip_pkg::*;
import sys_axi_vip_0_0_pkg::*;

module tb();

    localparam int LP_CLK_PERI = 100;
    localparam int LP_RST_PERI = 777;

    // DUT instance
    logic aresetn, aclk;
    sys_wrapper dut(.*);

    task rst_gen();
        aresetn = '0;
        #(LP_RST_PERI);
        aresetn = '1;
    endtask

    task clk_gen();
        aclk = '0;
        forever #(LP_CLK_PERI/2) aclk = ~aclk;
    endtask

    task clk_dly(int n);
        repeat(n) @(posedge aclk);
    endtask

    // VIP decreation
    sys_axi_vip_0_0_mst_t   agent;

    task init_agent();
        agent = new("master vip agent", dut.sys_i.axi_vip_0.inst.IF);
        agent.start_master();
    endtask

    // Transaction method
    task wr_tran();
        axi_transaction  wr_transaction;
        wr_transaction   = agent.wr_driver.create_transaction( "write transaction with randomization");
        WR_TRANSACTION_FAIL: assert(wr_transaction.randomize());
        agent.wr_driver.send(wr_transaction);
    endtask

    task rd_tran();
        axi_transaction  rd_transaction;
        rd_transaction   = agent.rd_driver.create_transaction("read transaction with randomization");
        RD_TRANSACTION_FAIL_1a:assert(rd_transaction.randomize());
        agent.rd_driver.send(rd_transaction);
    endtask

    // Testscenario
    initial begin

        fork
            init_agent();
            clk_gen();
            rst_gen();
        join_none

        clk_dly(100);

        wr_tran();

        clk_dly(100);

        rd_tran();

        clk_dly(100);
        $finish(2);
    end
endmodule
```
    
### 波形の例

m_axi_wdata[31:0]に書き込まれた2f2391d9がs00_axi_rdata[31:0]に読み込まれているので、AXIの通信が成功している？
<img width="1405" alt="image.png (28.7 kB)" src="https://img.esa.io/uploads/production/attachments/6206/2021/12/02/21741/697dc2df-dedc-47ca-8f50-fccc307942a9.png">
PyQt5のチュートリアルを動かす ⑫ ~ QPixmapClassについて

# はじめに

`QPixmap`クラスは`QPaintDevice`オブジェクトとして使用したり、他のウィジェット(ラベルやボタン等)に読み込ませることができます。

Qt APIには,I/Oやその他のピクセル操作に最適化された類似のクラスに`QImage`があります。一方Pixmapは画面に表示するために最適されています。これらは相互に変換も可能です。


# QPixmapオブジェクトに読み込むことができる画像形式

## BMP
Windows Bitmap

## GIF
Graphic Interchange Format (optional)

## JPG
Joint Photographic Experts Group

## JPEG
Joint Photographic Experts Group

## PNG
Portable Network Graphics

## PBM
Portable Bitmap

## PGM
Portable Graymap

## PPM
Portable Pixmap

## XBM
X11 Bitmap

## XPM
X11 Pixmap

# QPixmapオブジェクの操作に便利なメソッドたち

## copy()
QRectオブジェクトからpixmapデータをコピー

## fromImage()
QImageオブジェクトをQPixmapに変換

## grabWidget()
与えられたウィジェットからpixmapを生成

## Load()
イメージファイルをpixmapとしてロード

## save()
QPixmapオブジェクトをファイルとして保存

## toImage()
QPixmapをQImageへ変換

※QPixmapの最も一般的な使い方は,ラベルやボタンに画像を表示することだそうです



# デモ


```pixmap.py
import sys
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *

def window():
   app = QApplication(sys.argv)
   win = QWidget()
   l1 = QLabel()
   l1.setPixmap(QPixmap("test.png"))

   vbox = QVBoxLayout()
   vbox.addWidget(l1)
   win.setLayout(vbox)
   win.setWindowTitle("QPixmap Demo")
   win.show()
   sys.exit(app.exec_())

if __name__ == '__main__':
   window()
```

実行結果

![Screenshot from 2021-12-02 19-42-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/1dcea2ea-756a-e861-3789-5721bd949163.png)
NodeListをループする


document.querySelectorAllした後のループでちょっとわからなくなって、
まあここ見たら解決するけど

https://yuheiy.hatenablog.com/entry/2015/11/01/092356




よく使うのはこの辺り　ﾒﾓﾒﾓφ(・ω・｀).



```javascript
(function(d){
    Object.keys(NodeList).forEach(function (key) {
      console.log(NodeList[key]);
    });

    Array.prototype.forEach.call(NodeList, function (node) {
      console.log(node);
    });

    Array.from(NodeList).forEach(function (el) {
      console.log(el);
    });
})(document);

```
！！初心者必見！！今だからわかるプログラミングをやり始めて知った専門用語集

#はじめに

初めまして！私は今年の春からプログラミングを始めた納豆と申します！！自分がプログラミングを始めた際と比べて自分の中のプログラミング用語集が増えてきたので今回はこれからプログラミングを始める方向けに、今後聞く機会が増えるであろう単語集を紹介したいと思います。この記事が少しでも読んでくださった方の役に立てば幸いです。

##1．github
githubを使うことによって、エンジニアが書いたコードをローカルではなく、WEB上で保存することができます。また、もし新しいコードを書いたけど、前に書いたコードに戻したいって思ったときに、githubを使えば、過去のコードをみれたり、また、チームで開発する際に使えたりします。
##2．デプロイ
デプロイとは、簡単に言うと、つくったWEBアプリやWEBサイトをネットに公開することです。
##3.ソースコード
コンピュータのプログラムやアプリケーションソフトウェアを動作させるための文字列のことです。この下のおまけに書かれているのがまさにソースコードです。
##4.コンパイル
簡単に言うと、人間が書いたソースコードを機械語に翻訳することです。
##5.デバッグ
簡単に言うとバグを見つけてそれを修正することです。
##6.ローコード・ノーコード開発
ローコード開発とはコードを最小限しか書かずにアプリなどを開発する開発方法で、ノーコード開発は名前の通り、プログラミングをせずに開発する開発方法です。


#おまけ
##さまざまなプログラミング言語

##HTML/CSS
これはWEBサイトを製作する際に使われる言語で、HTMLという言語でWEBページの文字や画像、アイコンなどを表示させることができ、それをCSSという言語で色を付けたり、文字の大きさをつけたりするといった感じです。


```html:index.html

<h1>こんにちは</h1>

```
htmlで表示した文字をcssで、色を付けたり、背景に色を付けたりすることができます

```css:style.css

.h1{
     color :blue;
     background-color :green;

}
```

###Python
Pythonというプログラミング言語は、現在かなり、人気がある言語として取り扱われています。主にPythonで作れるものとしては、最近はやりのAI(人工知能)、WEBサイト、ゲーム、業務自動化ツールなど、Pythonという言語を勉強しておけば、かなりのものを作ることができます。比較的学びやすいという点もPythonのいい点です。

```python:python

print("こんにちは")

```

###javascript
  こちらの言語は主にWEBサイトやWEBアプリを作る際に使われます。WEBサイトを作る際にこの言語を使うと、サーバーと通信して情報を送ったり、受信できたり、HTMLやCSSで書かれた画面に動きを与えることができたり、様々なことが可能です。

```javascript:javascript

console.log("こんにちは")

```

###C言語
こちらの言語は習得するのが難しいかわりに、WEBサイト、WEBアプリ、ゲームの開発ができ、これに加え、システムの開発や家電などの家電に組み込むシステム、ロボットなども作ることができます

```c:c

#include <stdio.h>

int main()
{
    printf("こんにちは");
    return 0;
}

```

###Java
こちらの言語でほかの言語と同じようにWEBサイト、WEBアプリ、ゲームの開発ができ、これに加え、システムの開発や家電などの家電に組み込むシステムも作ることができます。また、この言語はオブジェクト指向という概念に基づいています。


```java:java
public class Hello{
     public static void main(String argv[]){
       System.out.println("こんにちは");
  }
}
```

###Ruby

```ruby:ruby

String.new("Hello")

```

・Unity
こちらの言語はゲーム制作に特化した言語であり、２D、３Dのゲームを作ることができ、なんとあのポケモンGOもUnityで作られています。

#さいごに
いかがだったでしょうか。途中から用語というより言語の紹介になってしまった気がしますが、もしお役に立てたなら幸いです。
PyQt5のチュートリアルを動かす ⑪ ~ 描画関数について

# はじめに

すべての`QWidget`クラスは,`QPaintDevice`クラスのサブクラスです。`QPaintDevice`は`QPainter`を使って描画します。そしてペイントデバイスのサイズは左上隅からのピクセル単位で決まります。

`QPainter`クラスはウィジェットやプリンタなどのペイント可能なデバイスに対して低レベルのペイントを行います。通常はウィジェットのペイントイベントで使用されます。`QPaintEvent`はウィジェットの外観が更新されるたびに発生します。

ペインターはbegin()メソッドを呼ぶことでアクティブになり、end()メソッドで非アクティブになります。その間色々なメソッドを使って希望するパターンをペイントできます。

# 描画メソッド一覧
## 1.begin()
対象のデバイスのペイントを開始
## 2.drawArc()
開始と終了角度間の円弧を描画
## 3.drawEllipse()
矩形の中に楕円を描く(短径を指定して、円を描画できる?)
## 4.drawLine()
エンドポイント座標を指定して線を描画
## 5.drawPixmap()
画像ファイルからpixmapを抽出し、指定位置に表示する
## 6.drwaPolygon()
座標配列による多角形を描画
## 7.drawRect()
左上の座標と横、縦のサイズ指定して長方形を描画
## 8.drawText()
与えられた座標にテキストを描画
## 9.fillRect()
短径を`QColor`パラメータで塗りつぶす
## 10.setBrush()
描画用のブラシのスタイルを設定
## 11.setPen()
描画に使用するペンの色、スタイルを設定

# デモ

以下のデモを実行すると色々なメソッドを試すことができます。

```drawing.py
import sys
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *

class Example(QWidget):
   def __init__(self):
      super(Example, self).__init__()
      self.initUI()

   def initUI(self):
      self.text = "hello world"
      self.setGeometry(100,100, 400,300)
      self.setWindowTitle('Draw Demo')
      self.show()

   def paintEvent(self, event):
      qp = QPainter()
      qp.begin(self)
      qp.setPen(QColor(Qt.red))
      qp.setFont(QFont('Arial', 20))
      qp.drawText(10,50, "hello Python")
      qp.setPen(QColor(Qt.blue))
      qp.drawLine(10,100,100,100)
      qp.drawRect(10,150,150,100)
      qp.setPen(QColor(Qt.yellow))
      qp.drawEllipse(100,50,100,50)
      qp.drawPixmap(220,10,QPixmap("test.png"))
      qp.fillRect(20,175,130,70,QBrush(Qt.SolidPattern))
      qp.end()

def main():
   app = QApplication(sys.argv)
   ex = Example()
   sys.exit(app.exec_())

if __name__ == '__main__':
   main()
```

実行すると以下のようになりました。

![Screenshot from 2021-12-02 19-01-19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/b1f66570-b27e-fe08-2c68-fe24ee8cbfc8.png)

# さいごに

個人的に描画した図形をドラッグ&ドロップしたりする方法が気になります。

# 参考

https://www.tutorialspoint.com/pyqt5/pyqt5_drawing_api.htm
[Drupal] 構成の値を取得する方法

## 構成とは
- モジュールの設定などを保存するための形式
- 最初はDBに保存されるが、管理画面やDrushコマンドでDBからYAMLファイルにエクスポートしたり、逆にYAMLファイルからDBにインポートしたりできる（そのためGitなどを使って手軽に別々の環境にデプロイすることが可能）

エクスポートされた構成ファイルの例

```yml
uuid: 8a77ce85-83d7-4c18-ab99-9aa9f8e851ee
name: My Site
mail: my_site@example.com
slogan: ''
page:
  403: ''
  404: ''
  front: /
admin_compact_mode: false
weight_select_max: 100
langcode: ja
default_langcode: ja
_core:
  default_config_hash: yTxtFqBHnEWxQswuWvkjE8mKw2t8oKuCL1q8KnfHuGE
mail_notification: ''

```

## 既存の構成の値を取得する方法
たとえばサイト名を取得したいとする。

### 構成名を確認
まずはサイト名が記録されている構成の名前を取得する。

#### ファイルで確認する場合
- 構成をエクスポートしてファイルに落とし込む
- エディタでサイト名を検索（My Siteなど）
- ヒットしたファイルの名前から`.yml`を抜いたものが構成名（サイト名の場合、`system.site.yml`に入っているので、構成名は`system.site`）
- ヒットしたファイルが多すぎてわからない場合は
  - サイト名を管理画面(`/admin/config/system/site-information`)から修正
  - `drush cex`で構成をエクスポート
  - エクスポートされる構成のリストに出てくる構成名、お前が犯人だぁ！

```
 [notice] Differences of the active config to the export directory:
+------------+-------------+-----------+
| Collection | Config      | Operation |
+------------+-------------+-----------+
|            | system.site | Update    |
+------------+-------------+-----------+


 The .yml files in your export directory (../config/sync) will be deleted and replaced with the active config. (yes/no) [yes]:
 > 
```

#### 管理画面から確認する場合
- `/admin/config/development/configuration/single/export` でなんかそれっぽい構成タイプ・構成名を選択して、サイト名が入ってるか確認（サイト名の場合、`簡易校正` > `system.site`）

### 構成のキーを確認する

構成の中を確認して、何というキーで保存されてるか確認。サイト名の場合、`system.site.yml` の内容は以下なので、`name`がキーになる。

```yml
uuid: 8a77ce85-83d7-4c18-ab99-9aa9f8e851ee
name: My Site　 #　サイト名
mail: my_site@example.com
slogan: ''
page:
  403: ''
  404: ''
  front: /
admin_compact_mode: false
weight_select_max: 100
langcode: ja
default_langcode: ja
_core:
  default_config_hash: yTxtFqBHnEWxQswuWvkjE8mKw2t8oKuCL1q8KnfHuGE
mail_notification: ''

```

### 構成を取得する
構成名とキーがわかればあとは簡単。

```php
$site_name = \Drupal::config('system.site')->get('name');
```
ネストされている値を取得したいときはドットでつなぐ。

```php
$front = \Drupal::config('system.site')->get('page.front');
```
Vue.jsの基本をまとめる（特徴など）

# 【はじめに】

## フレームワークとは

- よくある問題に対するイディオム、方法をまとめたもの。
     本格的なアプリを開発していると、似た問題によく遭遇する。
それを毎回解決していくのは大変&面倒！（前もやったのに、、！）
 →よくある問題解決をあらかじめ用意しておいてくれる「フレームワーク」！
    
- ただし、フレームワークの導入がいつでも正なわけではない。小さいアプリならわざわざフレームワークを学ぶ方が悪
- 主なJSのフレームワークは３つ
 
| Name |about | description |
|:-----------:|:------------|:------------|
|Angular       | Googleを中心に開発されてるフルスタックフレームワーク      |学習コスト高め・比較的難しい・途中からの導入は厄介。最初からちゃんと設計されてこそ力を発揮する|
|React     |Facebookが開発したフレームワークで、ビュー（見た目）相当の機能を提供      | 比較的気軽に導入できる・後からの導入もしやすい      |
|Vue.js       | ビューに特化したシンプルなフレームワーク        |比較的気軽に導入できる・後からの導入もしやすい。         |


## Vueの特徴

- React と比べても特に学習コストが低い
- アプリの成長に合わせての機能追加がしやすい（コンポーネント 作成・ルーティング機能..)
- コンポーネント指向
    
    ....コンポーネントとは、ビュー（見た目）、ロジック、スタイルなどから成るUI部品のこと。Vueでは、部品化されたコンポーネントを組み合わせることで１つのページを構成していく。＝コンポーネント思考。組み合わせてり、入れ子にしたり。。。
    
- ライブラリが豊富
- 簡単に言うなら「UIを宣言的に記述するためのライブラリ」
- あるデータをもとにページを作成。そのデータが変化した際に、UIを再構築して画面に反映させる。これがVueの基本機能。

## Vueが支持されるわけ

- 様々な言語に対応したドキュメント
- より良い機能の提供、メンテナンスがされ続ける

昔は小ー中規模向きとされ、問題がいくつかあったが、アップデートされ、大規模アプリでも幅広くカバーされるようになった。

2020年にはGitHubスター数がReact, Angularをしのぐほどになっている。日本ではLineと言った大手からhey, STUDIOなど中規模以上のアプリにも使われている。

# 【Vueの基本】

## 核となるのはvueクラス

Vue.js を起動させるにはVueクラスをインスタンス化する

 

```jsx
new Vue({...})
```

アプリで利用するデータはオブジェクトで用意しておく。テンプレートからこれを参照する、という役割が基本。

## Vue.jsを理解するための３つの柱

### (1)ディレクティブ

まずVueのtemplateを構成するのは、まずこの２点。

- {{...}} Mastachek構文　与えられた値を組み込む
- v-...属性　ディレクティブ　v-ifなどの様々な機能

ディレクティブを使って機能をつけたり、データを埋め込んだりする

### (2)算出プロパティ

```jsx
<div id="app">
<p>{{ email.split('@').toLowercase() }}</p>
</div>

//computed.js
new.Vue([
el: '#app'
data: {
 email: 'Y_SUZUKI@gmail.com'
}
])
```

わかりづらい、テンプレートはシンプルであるべき

↓ここで

```jsx
<div id="app">
<p>{{ localEmail }}</p>
</div>

//computed.js
new.Vue([
el: '#app'
data: {
 email: 'Y_SUZUKI@gmail.com'
},
computed{
localEmail():{
return this.email.split('@').toLowercase()
}
])
```

 算出プロパティとは、既存のプロパティを算出した結果を取得できるゲッターのこと。

`プロパティ：関数名....` の形で書く

ちなみに👀...
**算出プロパティvsメソッド** 

- 算出プロパティは引数を持てない
    - 引数がいるならメソッド
- 算出プロパティは取得に使う
    - 算出；既存データの「加工を伴う取得」。
    - メソッド；取得・操作・更新が可能。算出でできることはできる
    - 引数を伴わない単純な加工や演算は、算出プロパティを使ったほうがコードの意図が明確になって良い
- 算出プロパティはキャッシュされる
    - 算出；depsが更新されるまで更新されない
    - メソッド；常に実行される

### (3)ライフサイクル

Vueのインスタンス；

生成→要素にマウントされる→データの変更に応じてビューを更新→破棄

- created...まだマウント前。文書ツリーへのアクセスはmounted後

## リアクティブデータ

リアクティブデータとは、

Vueクラスのdataオプションに登録されたデータのこと。

データオブジェクトの変化を検知して、ページに自動反映させることから、リアクティブ（＝反映できる）と呼ばれる。

ここで、**Vueアプリを開発する上で陥りがちな罠**について見ていく！

### (1)リアクティブシステムの制約

開発者は、リアクティブシステムの内部的な挙動を基本意識する必要はない。

が、Javascript  の機能上の制約より、Vueは追加や消去を検知できないため、そこは気をつけなくてはいけない。

そこで、解決策は

- 全てのプロパティを最初に準備する
    - 最初に値が決まっていない場合でも、最低限、空値でプロパティを用意しておく（アプリで利用するデータを一望できるという意味でも良い）
- プロパティ追加をVue.jsに通知する
    - Vue.setなどのメソッドを使って追加＋追加を通知する

### (2)ビューの非同期更新を理解する

リアクティブシステムによるページの（ビュー）の更新は、非同期！

Vueではデータの変更を検知しても、これをすぐにページ（ビュー）に反映するわけではない。

連動して発生する全ての変更をためた上で、最終的な結果をビューに反映させる。

→余計な描写を防いでいる

→ページに表示されたものを関数内で使う場合などは注意！

### (3)ウォッチャーによる明示的な監視

更新のタイミングを手動で制御したい時がある。

例えば、入力値がどんどん更新されるときに、都度リストを取得するのが無駄な時がある。

→入力の切れ目にだけ処理を実行させたい、とする。

そこでwatcher!!

細かい書き方はここには明記しないが、
監視すべきプロパティ、変更後のプロパティの値、変更前のプロパティの値、プロパティ変更時に実行すべき値がセットできる。
importの使い分け

自分用のメモ。
先達のコードを読んでいて、何が違うのかと混乱した部分。

```typescript:
import { sample } as from './sample';
import * as sample from './sample';
import sample = require('./sample');
```
一番上は分かる。
下二つの違いがよくわからない。
調べるとimportとrequireについての使い分けは出てくる。
けれども同時に使う事例がない。
ならば実際に書いて挙動を確認しよう。
importのmoduleとして下記sample.tsがある場合で記述。

```typescript:sample.ts
export interface firstParams {
  id: string;
}

export const sampleNumber = "123";
```

それぞれの挙動結果を確認する。

######1.`import { firstParams } as from './sample';`の場合
sample.tsの中のfirstParamsのみを読み込む。

```typescript:example.ts
import { firstParams } as from './sample';

const sampleConst: firstParams[] = []; // firstParamsの型を付与
```

#####2.`import * as sample from './sample';`の場合
sample.tsの中のexport全てを読み込む。

```typescript:example.ts
import * as sample from './sample';

const sampleConst: sample.firstParams[] = []; // firstParamsの型を付与
const sampleConst2 = sample.sampleNumber; // 123
```

#####3.`import sample = require('./sample');`の場合
sample.tsの中のexport全てを読み込む。

```typescript:example.ts
import sample = require('./sample');

const sampleConst: sample.firstParams[] = []; // firstParamsの型を付与
const sampleConst2 = sample.sampleNumber; // 123
```

#####同じじゃないか？
では、単にimportするのとrequire()をかませて読み込むのとでの違いを考えればいいのか。
さらっと調べるとrequire()は推奨されてないことが多い。
敢えてそれを使って記述しているのは何故？
そんな中、素敵な先人の記事を発見。
**[Node.js: require()は同期型ロード、importは非同期型ロード](https://qiita.com/suin/items/a106289e2d1d8d9c1490)**
詳しくは上の記事をお読みいただきたいのだが、結論はタイトル通り。
require()は同期型ロード、importは非同期型ロードを行う。
つまり、今回の場合はimport先のmoduleが多数の処理をしていると、この設定が効いてくる。
同期的なロードをしたい場合にはrequire()をかませてimportをする必要があると。

#####なるほど結論

```typescript:
import * as sample from './sample'; //　非同期型のロード（CommonJS）
import sample = require('./sample'); //　同期型のロード（ES Modules）
```
表に見える挙動は同じでも、連鎖的に繋がっていることで変わる挙動がある。
連携先の挙動も踏まえた上で使うコードを選ばなければならないと、そういう話でした。
もし何か解釈が間違っているようだったら、是非ともご指摘いただきたい。
ありがとうございました。
LILO とは

## 勉強前イメージ

linuxのブート時のなんちゃらだった気がする

## 調査

### LILO とは

Linux Loader の略で、リロだったりライロウと読みます。
Linuxカーネルを起動するためのブートローダ。
ブートローダの立ち位置は [こちら](https://qiita.com/miyuki_samitani/items/999183984c73daf3d7ee) を見ていただければと思いますが、
OSを起動するためのソフトウェアのことです。
電源を入れた後LILOが起動し、OSを選択できます。

### GRUBとの違いは？

よくブートローダと聞くとGRUBを思い浮かべますが、LILOとGRUBの違いを確認していきます。

- LILO

古くからlinuxで使われてきたブートローダです。
LILOはファイルシステムを認識しないので、カーネルの位置を物理的な位置情報(ブラックリスト)で判断します。
そのHDDの位置情報はLILOの内部に持っており、ブラックリストを参照するので ブラックリスト参照型ブートローダ とも言われます。

- GRUB

高性能のブートローダ。
LILOとは違いファイルシステムを認識できるので ファイルシステム認識型ブートローダ と言われています。

現在は基本的にはGRUB(GRUB2) が使われています。

## 勉強後イメージ

そもそもブートローダに種類があったなんて知らなかった。
今は古いから使われていない的なことなのかな？
どっちにしろ今はGRUB2が主流っぽい。


## 参考

- [Linux道場入門編](https://lpi.or.jp/lpic_all/linux/intro/intro05.shtml)
- [LILO](https://www.weblio.jp/content/LILO)
アジャイル開発とは？

##背景
開発手法はキタミ式で少し読んだくらいだったので、まとめてみることにしました。

##1.アジャイル開発とは？
2000年代以降〜現在までで最もポピュラーな開発手法です。この開発の特徴はスピード感を持った開発ができることでアジャイルというのも素早いという意味があります。

まず初めにアジャイル開発は大まかに仕様や要件を定義します。仕様をあえて決めないことで、途中で仕様が変更しても対応できるようにしています。そして「計画」→「設計」→「実装」→「テスト」のイテレーションというサイクルを1~2週間単位で繰り返し、開発を進めていきます。

アジャイル開発向けのプロジェクトとしては後々、変更がたくさん起こることが予想されるプロジェクトに向いています。

ちなみにアジャイル開発だけでも３種類の開発の手法（スクラム、エクストリーム・プログラミング、ユーザー機能駆動開発）があります。

##2.スクラム
スクラム開発とはアジャイル開発の中でも一番ポピュラーな開発手法で、メンバーが計画し、イテレーション単位で開発に問題がないかを確かめながら開発していきます。

#3.エクストリーム・プログラミング　(XP)
XPでは４つの価値を柱に開発していきます。
その柱というのは「コミュニケーション」、「シンプル」、「フィードバック」、「勇気」です！最近はこの４つに「尊重」が加わったそうです。これはネタではなく、ちゃんとWikipediaでも説明がされています。この手法は簡単に説明すると最初に決めた計画よりも途中の変更を重視しようという開発手法です。どちらかというとプログラマー目線の開発の仕方です。

https://ja.wikipedia.org/wiki/%E3%82%A8%E3%82%AF%E3%82%B9%E3%83%88%E3%83%AA%E3%83%BC%E3%83%A0%E3%83%BB%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0#%E3%82%B3%E3%83%9F%E3%83%A5%E3%83%8B%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3

##4.ユーザー機能駆動開発(FDD)
FDDは顧客主義の開発手法でログイン機能だったり、購入機能のようなユーザー機能を中心に計画を立て設計や開発を行います。

##メリット
アジャイル開発のメリットとしては不具合を少ない工数で抑えることができるという点です。アジャイル開発以前のウォーターフォール開発は最初の設計を重視して開発をするため、トラブルによっては工数が嵩みがちになります。

そしてアジャイル開発はユーザーのフィードバックを受けながら開発を進められることができるので、需要に合ったサービスの開発を行いやすいです。

##デメリット
デメリットとしては変更がたくさんあるので開発の納期が把握しづらいことです。一方ウォーターフォール開発であれば最初の計画に遵守しながら開発するので開発スケジュールがかなり把握しやすいです。
Laravel 可読性の高いコードを書く為のサービス層(app/Serviceフォルダ)の使い方　シンプルに解説！！

# はじめに
Webアプリの規模が大きくなるにつれ、ファットモデル、ファットコントローラ化が進んでしまい、保守性が低下します。
その様な場合、appフォルダ化にServiceフォルダを作成し、その下にコントローラーやモデルの処理を移していきます。
※Service層に入れるべき処理やクリーンアーキテクチャに関しては別の方の記事を参照して下さい。

今後は別の記事でサービスプロバイダやファサード、__constructについても解説していきます！！！

# 目次
<!-- タイトルとアンカー名を編集 -->
1. [Serviceフォルダ作成](#serviceフォルダ作成)
2. [クラス名やメソッドを記述](#クラス名やメソッドを記述)
3. [Controllerでサービスクラスを使用する](#controllerでサービスクラスを使用する)
3. [Viewでサービスクラスを使用する](#viewでサービスクラスを使用する)
3. [最後に](#最後に)

<!-- 各チャプター -->
# Serviceフォルダ作成
・appフォルダ下にServiceフォルダを作成します。
・Serviceフォルダ下にファイルを作成します。今回の場合はCalculation.phpとします。
※実際にはServiceの下にいくつかフォルダを作成して、その下にファイルを作成する構成となります。

```
<?php

namespace App\Services;

class クラス名
{
    // この中にファットコントローラーの原因になっているメソッドを記載する。
}
```

# クラス名やメソッドを記述
こちらは足し算と引き算ができる簡単な処理です。

```
<?php

// Serviceフォルダの下にフォルダを作成している場合、パスを追記してください。今回は特に追加記述なし。
namespace App\Services;

// クラス名を追記
class Calculation
{
　　　　　　　// 足し算のメソッドを追記
    public function addition($number) {
        return $number + 1;
    }

　　　　　　// 引き算のメソッドを追記
    public function subtraction($number) {
        return $number - 1;
    }
}
```


# Controllerでサービスクラスを使用する
これで、Serviceフォルダ内のCalculationクラスにあるメソッドを使用する事が出来ます。

```
//　　Controller(どのコントローラーでもいいです・・・)

//　Calculationクラスのuse宣言
use App\Services\Calculation;

public function index()
{
    // クラスのインスタンス化
    $calculation = new Calculation;
　　　　　　　
    // Calculationクラスのadditionメソッドで足し算を行う。
    // ddの結果　=> 2
    dd($calculation->addition(1));

    // Calculationクラスのsubtractionメソッドで引き算を行う。
    // ddの結果　=> 0
    dd($calculation->subtraction(1));
}
```

# Viewでサービスクラスを使用する
コントローラーだけでなく、Viewファイルでも呼び出す事ができます。
しかし、これでは<font color="blue">__use宣言やインスタンス化の処理をいちいちView側に記載しなければならない為、見づらく保守性が悪くなってしまいます。__</font>
その為、この<font color="blue">__use宣言やインスタンス化をせずに済む方法を次回紹介__</font>します！！

```
Viewファイル

<?php 
    // use宣言
    use App\Services\Calculation;
    // インスタンス化
    $calculation = new Calculation;
?>

// 足し算の処理
<div>{{ $calculation::addition(1) }}</div>

// 引き算の処理
<div>{{ $calculation::subtraction(1) }}</div>

```

【以下出力結果】
![Image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1416941/e3f2d813-bacd-9787-6b6e-1e026183e650.png)


# 最後に
とりあえず、サービス層の使い方を紹介しました。サービス層のクラスを使う際には何の特別なこともなく、ただクラスを作成して、それを使いたいところで使うだけです。
今後は、<font color="blue">__冗長になっているインスタンス化部分の解説と、サービスプロバイダー、ファサード__</font>の解説もしていきます！！
macOSでスクリーンショット名を自動リネームする

## Macをお使いのみなさま〜

スクリーンショットを撮った際、

- ファイル名を分かりやすくしたい

こう思ったことはないですか？？

自分なりの解決方法を見つけたので備忘録的に残しておきます。

## 環境

環境設定を英語にしているため適宜いい感じに日本語に読み替えてください。
余裕があれば日本語でも試したいと思います。。

ちなみに英語ではデフォルトが「Screen Shot 2021-12-02 at 17.55.22.png」となっており、
今回は「21-12-02_175522.png」という名前に変更しようと思います。

```
macOS Big Sur version 11.6
Chip Apple M1
```

## Automator

「mac スクリーンショット 名前 変更」と調べてみても良さげな方法がなく諦めようとしていたところ、
macには`Automator App`なるものがあることを知りました。

今回はこちらのAppを使用して「ファイルが追加される→名前を変更する」というActionを書いていきます！

### 手順

1. `Automator App`を起動する
1. `Folder Action`を選択する
![Screen Shot 2021-12-02 at 18.10.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630300/a97cc5d5-a3dd-6fae-b261-65abbd700d80.png)

1. 検索窓に`run`と入力し、`Run Shell Script`をダブルクリック（またはドラッグする）
![Screen Shot 2021-12-02 at 18.12.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630300/bbaac6cb-104d-dfa1-70dd-62d1bc67c823.png)

1. `Choose folder`の欄にスクリーンショットの保存先を選択
![Screen Shot 2021-12-02 at 18.14.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630300/5f640685-4ad8-ea46-c229-49be35fc24ef.png)
1. `Pass input:`の欄を`as argumants`とする
1. コマンドを以下のように設定する

```shell
echo "$@" | sed -n 's/\(.*\)Screen Shot .\{2\}\(.*\) at \(.*\)\.\(.*\)\.\([^ ]*\) *\(.*\)\.png$/mv "&" "\1\2_\3\4\5\6.png"/p' | zsh
```

1. `Commmand + S`で保存し、名前を適当をつけて完成！！
1. スクリーンショットを撮るとメニューバーに歯車マークが現れ、名前が変更されていることがわかると思います。（もしダメな場合は`sed`のところをよく確認してみてください）
![21-12-02_183739.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630300/6033bc4d-ee70-25c1-833a-c7249ead410d.png)

### 説明

途中に出てきたコマンドは３つに分かれています。

```shell
1. echo "$@"
2. sed -n 's/\(.*\)スクリーンショット .\{2\}\(.*\) \(.*\)\.\(.*\)\.\([^ ]*\) *\(.*\)\.png$/mv "&" "\1\2_\3\4\5\6.png"/p'
3. zsh
```
これらをパイプで繋いで処理を実現しています。
1. `echo`コマンドを用いて引数を表示
2. `sed`コマンドによりファイル名を置換するコマンドを作成(`mv 元ファイル名.png 新ファイル名.png`といった感じ)
3. 上記で作成したコマンドを`zsh`に流して実行する。

## 最後に

「21-12-02_175522.png」という形式ではなく、他の形式に変更したい場合は`sed`コマンドの正規表現部分を書き換えてみてください！
PyQt5のチュートリアルを動かす ➉ ~ドラッグ&ドロップ機能

# はじめに

PyQt5でのドラッグ&ドロップです

ドラッグ&ドロップ機能はユーザーにとって直感的で使いやすいため、多くのデスクトップアプリの機能に用意されています。

`QDrag`クラスを使用するとそのような事ができるようです。

# デモ


```drag_drop.py
import sys
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *

class combo(QComboBox):
   def __init__(self, title, parent):
      super(combo, self).__init__( parent)
      self.setAcceptDrops(True)

   def dragEnterEvent(self, e):
      print (e)

      if e.mimeData().hasText():
         e.accept()
      else:
         e.ignore()

   def dropEvent(self, e):
      self.addItem(e.mimeData().text())

class Example(QWidget):
   def __init__(self):
      super(Example, self).__init__()

      self.initUI()

   def initUI(self):
      lo = QFormLayout()
      lo.addRow(QLabel("Type some text in textbox and drag it into combo box"))
   
      edit = QLineEdit()
      edit.setDragEnabled(True)
      com = combo("Button", self)
      lo.addRow(edit,com)
      self.setLayout(lo)
      self.setWindowTitle('Simple drag and drop')
def main():
   app = QApplication(sys.argv)
   ex = Example()
   ex.show()
   app.exec_()

if __name__ == '__main__':
   main()
```

実行すると以下のようなwindowが表示されます。

![Screenshot from 2021-12-02 18-27-42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/bded4e60-be1b-ce7b-218b-8644dd0624b9.png)

文字を選択しinputボックスにドラッグ&ドロップすると文字が表示されました。

![Screenshot from 2021-12-02 18-29-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/4eaff0b8-c33c-95b2-3b55-45226460fe25.png)

# 参考

https://www.tutorialspoint.com/pyqt5/pyqt5_drag_and_drop.htm
Unity画像のFilter Modeについて

# はじめに
2Dゲームの、特にドット感の強いゲームをUnityで作る際には、画像の素材に対してFilter Modeというプロパティを変更したほうが良い場合が多いです。
下の画像をご覧ください。これはFilter Modeを「Point(No filter)」と「Bilinear」に変更した際の比較画像です。Bilinearだとぼやけた感じがあると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323150/4ac5f505-7d2c-b116-7e03-732fc08fcd99.png)
グラフィック素材：Wolf RPGエディタ ウルファール より

# Unityのフィルターモードとは
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323150/f02d9e29-d1b4-9a6d-e5e1-56fd4a90d12b.png)
> Unity 公式の説明
> 3D 変形で伸長される際に、テクスチャをどのようにフィルタリングするかを選択します。デフォルトは Bilinear です。
> https://docs.unity3d.com/ja/2019.4/Manual/class-TextureImporter.html

分かりやすく言い換えると、フィルターモードは画像を大きくした際に大きくした分の画素情報をどのように決定するかを決めるプロパティです。
例えば、左の白黒画像の画像サイズを縦横2倍にした場合、？の部分はどのように埋めるべきでしょうか？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323150/9d5740ab-0aac-9b80-7ab9-6e1cd1f82574.png)
### Point(No filter)
Point(No filter)ですと、一番近い画素を？に割り当てます。そのためドット感が残ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323150/62aef110-6fc4-eba8-b7e7-24e467ceb1ee.png)

### Bilinear
Bilinearの場合は近くの画素と線形に補完します。例えば、左に白、右に黒がある場合だと、中心の画素はグレーになります。そのため、特にドットの感じの残る画像ではぼかしたような印象を受けるでしょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323150/c3bf3f3f-2d9b-4b85-8986-ae6c7d880c15.png)

# 参考資料
1. https://docs.unity3d.com/ja/2019.4/Manual/class-TextureImporter.html
2. https://www.silversecond.com/WolfRPGEditor/
JavaBeansについて

この記事は、[シアトルコンサルティング株式会社 Advent Calendar 2021](https://qiita.com/advent-calendar/2021/seattleconsulting)の18日目の記事です。
こんにちは、シアトルコンサルティングの小泉です。
##はじめに
今回はJavaBeansについてまとめました。
実務の中でBeansを使用する中でBeansの役割って何なんだろうと疑問に思い調べてまとめてみました。

##ゴール
JavaBeansの役割について理解できるようになる。
## JavaBeansとは
JavaBeansとは、Java言語で再利用可能な部品（モジュール）化されたプログラムを作成するための仕様。また、その仕様に則って開発された部品化されたJavaプログラム（略してBeanとも呼ばれる）。※IT用語辞典より

簡単にいうと、データを保存しておくための倉庫のようなものです。  
例えば、ユーザーから送られてきた氏名や年齢などの情報を個人ごとにそれぞれ整理して保存しておくための仕組みがJavaBeansです。

## JavaBeansの3つの特徴
1：プロパティへのgetter/setterメソッドを持つ  
2：引数のないコンストラクタを持つ  
3：java.io.Serializableを実装している

サンプルコードを下記に示します。

```java
public class UserBean{

    private String name;
    private int age;

    public UserBean (){};

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

}

```
## JavaBeansを使うメリット

JavaBeansを使うメリットは「データの意図しない書き換えを防げること」です。  
各データ属性はprivateであるため、外部からはアクセスできません。  
そのため、必ずインスタンスの生成をしてから、セッターを呼ばなければデータ属性を書き換えられない仕組みです。


## formとentityとdtoの違い
データ保管をしようと思いBeanについて調べていたらform、entity、dto、これらの単語もよく聞くと思います。
一見どれも同じ書き方をしていて違いがわからない方もいらっしゃると思います。  
それぞれの違いはなに？  
結論から言うと、  
formとentityとdtoは３つともBean で、使用目的によって名前が分けられています。

### Form
・Web上の画面の入力情報/出力方法を保有します。

### entity
・DBに登録・更新する値を保有します。  
・DBから取得した値を保有します。

### dto
・データ交換用のbeanであり、様々な情報から必要な情報だけを集めた値を保有します。

##さいごに
JavaBeansの役割について理解いただけましたでしょうか？
今後も実務の中で気になったことなどがあればまとめていきますのでよろしくお願いいたします。
超超個人的、効率の良いスキルの習得方法

# はじめに
こちらは鈴鹿高専 Advent Calendar 2021の8日目の記事です。

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

今年を振り返ると、ネイティブアプリやwebアプリ、サーバー構築、更にはデザイン系と色んな技術について~~浅く~~学んでたな～、と
色々学んで来て自分なりの効率の良い習得方法が分かった気がするのでそれを共有したいと思ってこの記事を書きます、役に立つかは(ry

全て個人の感想や意見です、間違ってることもあると思いますが気にしないでください

では順番に説明(?)をしていきます

# 調べ方
まずは調べ方についてから
「アプリを作りたい！」「サーバーを立てたい！」「premire proを使って動画編集をしたい！」こう思っても初めて挑戦するときはもちろん何も分からないはずです
そこでまずすべきことは、「リファレンスを読む！」「公式チュートリアルを読む！」「ソフトの説明書を読む！」
何を思ってかqi○taとかyh○o知恵袋とか、そこから調べ始めるのはやめましょう(いないとは思うけど某青い鳥で調べ始めるのは論外)
公式が配布しているものというのはとても素晴らしいものです、それなのにqi○taとかyh○o知恵袋とかを始めから読むのは...
英語の資料が多いですがほとんどのリファレンスは簡単な英語です、全部訳せなくても雰囲気でなんとなくの意味は理解できると思うのでぜひまずは英語の公式の資料を読みましょう
え、英語が全く分からない人がいる？？？まさかそんなわけが
<img width="350" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1021455/b892d68a-cebf-edec-ae38-b305f29ea363.png">

まあそういう人はぜひwebブラウザ上で右クリックをしてみてください、日本語に翻訳とかいうボタンが出てくるのでそれを使いましょう(ただ細かいニュアンスとかを察するには適してないのでできれば単語ごとに調べましょう)

## 公式資料を見てもわからない...
公式の資料を見ても分からないときはもちろんあると思います、そういうときはまずはgoogleで、英語で検索をしましょう
世界の人口は78億でそのうち英語人口は17.5億人います、さて、日本語人口は...？はい、1億人ですね、ですから日本語で検索をせずに英語で検索をしましょう、単純計算で記事の量は17倍以上です

## 英語で検索しても分からない…
英語で検索しても分からない時はあると思います
そういう時は検索ワードが適切かを確認しましょう、具体的すぎても抽象的すぎても求めている記事は出てきません
程よく絞ったワードで検索できるよう心がけましょう

## それでも分らない…
それでも分らない、そういう時は技術的に不可能だと諦めましょう
どう調べても出てこないのに諦めずに調べ続けるのは時間の無駄です、ですので代替ツールやSDK、ソフトがないかを調べましょう

# 技術の習得手順・方法
続いては実際に調べながら習得するときの手順・方法について
習得したい技術によっては公式がチュートリアルを用意している場合があります
興味だけで「この技術を学んでみたい！」ということであればチュートリアルをやっておけば良いと思います

しかし作りたいものが定まっていたり、学ぶ目的がハッカソンやコンテストに向けての開発などの時は必要なことを絞って調べましょう
例えば、ReactでuseEffectしか使わないのにuseContextなども学んだり…
学んでおけば後で応用できる可能性もあります、しかし期間が決まっている開発では効率が落ちて間に合わない可能性が出てくるので必要最小限のことを先に学んで実装できるようにしましょう

一番の目標は使うツールをマスターすることではありません、プロダクトを完成させることです(ここ大事)

勘違いしてはいけないのはこれはライブラリやツールに関してだけです、言語を身につけるときには、型・条件式・同期・非同期・関数やクラスの定義などの基本的な部分は最低限マスターしましょう

コピペでも良いのでコードを書いて部分的に実行しながらやると簡単に身につけられると思います、達成感も得られるのでモチベーションも維持しやすいです
習得しようとしているものと似たようなものを既に習得している場合、習得済みのものに置き換えて考えてみると意外とすんなり入ってきます、特に言語仕様を理解する際はこうするとかなり楽です

# その他で大切なこと
## 学んだログを残そう
折角習得した技術です、何かしらでログを残しましょう、後で分からなくなった時に学んでいった過程を思い出せるのでめっちゃ役に立ちます
残し方はなんでも良いです、開発系であれば作ったプロダクトをgitに置いたり、デザイン系であれば作ったものや製作中のソフトのスクリーンショットなどをタグをつけて青い鳥に投稿したり…(不特定多数の人が見れる場所に投稿すると自己顕示欲が満たせるかも？？？)

gitに置いておくときは、APIkeyなどの公開されてはいけないものが入っていないのであれば、パブリックリポジトリにしておくと他の人もそれを見て学べるのでおすすめです

(大見出しの下に小見出しも書きましたがこれだけです)

# まとめ
色々なスキルを身に着けていくことはとても楽しいことだと思います
たとえば開発がメインでも、デザイン系の分野も知っていれば面白いアイデアが湧いてくるかもしれません
視野を広げるためにもぜひ他の分野のスキルも身につけてみませんか？
Salesforce公開グループを作成してみよう

こんにちは。本橋です

今日はSalesdforceの公開グループの作成方法や設定方法をご説明します

##１公開グループ作成方法

まずはクイック検索で「公開グループ」と検索、「新規」ボタンをクリックします
![A1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/3e36c967-9fce-4036-e14e-9d41726b9b05.png)

グループを作成し「保存」をクリックします
![a2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/9a73c825-3b22-d648-3eb1-2941cd29863b.png)

以上により公開グループの作成が完了できます。

では、実際に公開グループを使って何をできるか。を説明します。
公開グループはレコードの共有を効率よくできる方法です。
今回の場合「経営陣」公開グループに「佐藤一郎」「鈴木太郎」を追加しました
この公開グループ「経営陣」をレコード公開設定をすることにより、経営陣。つまり佐藤一郎さんや鈴木太郎さんに効率よくレコードを表示させることが可能となります。

では、どのような場合に公開グループの設定ができるか見てみましょう。

##2公開グループ使用場所1　手動共有
![a3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/46a48bbf-d378-b49c-9544-2cec8bdec571.png)

手動共有とは「誰（どのグループ）にレコード共有をさせますか」という設定です。
あらかじめ特定のユーザに特定のグループを作成すれば、レコードの共有が容易です

##公開グループ使用場所2　レポートフォルダの共有
![a4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/e6fb26f7-db12-14e5-eada-eef98b47d173.png)


レポートフォルダでは「誰（どのグループ）にレポートを共有をさせますか」という設定が可能です。
あらかじめ特定のユーザに特定のグループを作成すれば、レポートの共有が容易です

##公開グループ使用場所3　ダッシュボードフォルダの共有

![a5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/357a8dd8-b1cd-ff2d-57a1-31430cef21d0.png)

ダッシュボードフォルダでは「誰（どのグループ）にレポートを共有をさせますか」という設定が可能です。
あらかじめ特定のユーザに特定のグループを作成すれば、レポートの共有が容易です


##公開グループ使用場所4 共有ルールの設定
![a6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/d25d56a6-e215-d909-fd35-8af7529b62de.png)


共有ルールとは「どの条件のレコードで誰（どのグループ）にレコード共有をさせますか」という設定です。
あらかじめ特定のユーザに特定のグループを作成すれば、レコードの共有が容易です。

##そのほかの使用方法について

ヘルプによると、そのほかナレッジの割り当てなどが可能のようです。

共有ルールに基づいたデフォルトの共有アクセスを設定する
他のユーザとレコードを共有する
他のユーザが所有する取引先責任者の同期を指定する
Salesforce CRM Content ライブラリに複数のユーザを追加する
Salesforce ナレッジの特定のアクションにユーザを割り当てる

詳細は下記ヘルプご参照ください
https://help.salesforce.com/s/articleView?id=sf.user_groups.htm&type=5
【Linux】大量のファイルを、サーバ負荷をあまりかけずに削除する方法

# あるプロジェクトで特定のディレクトリ下に、キャッシュファイルが4000万件もできてしまった。
```bash
# ls -lrt cache/db  #db下に4000万件ファイルがある
```

## 愚直にrm
```bash
$ rm -rf cache/db/*
```

### 結果

削除されない。おそらくファイルインデックスを作成するだけでCPUパワー持って行かれている感じ。

## find + rm
```bash
$ find cache/db/ | xargs rm -rf 
```

### 結果
削除されるが、サーバ負荷がすごい。コマンド流しっぱなしはできない。

## find + head + rm
```bash
$ find cache/db/ -type f | head -1000000 | xargs rm -rf 
```

### 結果
findの出力を絞ることにより、サーバ負荷を上げすぎず削除が可能。
ただし、４０回実行した。。
データドリブンCSへの道のり

<h2>■はじめに</H2>
はじめまして！
モバイルゲームのCSをおもに十何年間対応していたY.Oと申します。
現在の業務もNativeアプリなど、CSを担当領域としております。
今回取り上げるテーマはデータドリブンのCSです。
前置きするとデータドリブンといっても現在のところ、石垣を積んでいる段階です。そのため大きな成果までには至っていないことから、背景や取り組みの一部に焦点を絞ってお話ししたいと思います。

<h2>■CSの役割について</H2>
データドリブンとは一般的には、『データを総合的に分析して、未来の予測、意思決定、企画立案などに役立てる』、また『データを可視化して課題解決に結びつけること』を指すようです。
CSにおいて、なぜデータドリブンをより強く意識することになったのかといえば、お客さまの満足度を高める製品やサービスに資する、付加価値の高い組織へ変えたい、という動機が大きな要因の一つとなっています。
長年CSを携わってきたのですが、プロダクト（開発/運営）と比較してCSは、定量的なデータから分析することや、その分析したデータから提案するスキームが弱い印象でした。
CSをコストと考えてCSにそこまで求められていなかった、ということもありますが、従来のCSにありがちなオペレーション改善での効率化やVOCを伝えることに長けている、、、ぐらいの特性では、組織も人も生き残るが厳しい、、、という考えが根底にあります。

<h2>■取り組みについて</H2>
上記からCSでの分析と改善提案力を高めるため、定量的なデータを分析する素地を高めるようにいろいろ模索しています。ただ、上述の通り取り組み始めたばかりなので、大きな成果までは出ていません。
そのため今回は取り組んだCSポートフォリオ分析の一例を説明いたします。

<h2>■CSポートフォリオ分析について</H2>
<h4>●導入の背景</H4>
お客さまの日々のお問い合わせや要望から改善提案を行う際、問い合わせの件数や規模などのある種平面的な情報をもとにすることが多く、どのお客さまの層で、どの優先度で、、、というような複合的な情報が不足するなど、分析が希薄な提案となっていました。
上記課題に対して、CSポートフォリオ分析、という手法を用いることにより、単なる提案からデータに裏付けされた、且つ、明確な改善の優先順位を添えた提案ができることから、一部タイトルより実施を進めました。

<h4>●分析手法</H4>
CSポートフォリオ分析を簡単に説明すると、サービスに対する『重要度』と『満足度』を4象限でマッピングし、改善の優先度を可視化する手法です。
『重要度』と『満足度』の概要は以下の通りです。
・重要度：項目別の満足度と総合的な満足度との相関度の強さ。総合満足度へ影響を与える度合い
・満足度：サービスや製品の各項目、各機能に対する満足度合い
「重要度」をX軸、「満足度」をY軸とし、改善への優先度を『重点改善項目』『重点維持項目』『維持項目』『改善項目』に分けて可視化します。
改善の優先度は①→②→③→④で判断します。（但し状況やサービス内容によって順番は変わります）
![AC.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550541/e6997b1f-35b7-4f58-2af9-3e09799aea3a.png)

<H4>●運用について</H4>
実際の運用は以下のような流れとなっています。
<B>①お客さまアンケートを実施
②お客さまのサービスの利用状況等の情報からセグメント化
③セグメントごとでのCSポートフォリオ分析の実施
④分析結果からセグメント毎での改善案とその改善優先度の検討、作成
⑤プロダクトへの提案</B>
ポイントとしては、④の具体的な提案内容の検討です。データを読み解くだけでなく、サービスに対する知識やお客様視点が求められるため、ここの担当はある程度習熟度の高い方をお勧めいたします。

分析した際の一例として、プロダクトではイベント実施に重きをおいていたものの、分析からはコミュニケーション機能が全体サービスの満足度に対して関連性が強く、重点して改善すべきと分かったことから、その機能に対するお客さまの意見要望を分析した具体的な内容に落とし込んで、プロダクトへの提案を行っていました。
現在、上記取り組みは一部プロダクトでの実施にとどまっていますが、今後はより多くのプロダクトへ展開することや、提案を実施した効果を測定するスキーム等を検討しています。


<h2>■まとめ</H2>
CSポートフォリオ分析は手段、きっかけであって目的ではありません。これらを恒常的にCSが行うことにより、メンバーのデータに対する意識を強め、且つ、分析手法を付加価値として身につけることができます。
従来のCSの勘所に加えてデータに裏付けされた提案ができることで、CSメンバーのスキルやナレッジが向上することにより、自身の市場価値をアップさせることができます。
その結果としてCSの組織力も向上させることにより、サービスに対するお客さま満足度の向上やプロダクトへの売上/利益への貢献を高めていけるのではないかと考えています。
これらの取り組みはまだ道途中で、自分自身でも日々学びの真っ最中です。今回の話がお読みいただいた方へ何かしらの参考や、きっかけになれば、、、と思います！
VSCodeでスペースが自動削除されてしまう（本体設定が効かない）

VSCodeで急にスペース（空白）が自動削除されるようになってしまった
Trim Trailing Whitespaceの設定をオフにするなどしても効かない．．


#### 原因
"EditorConfig for VS Code"という拡張機能を入れたためだった
無効化したら

VSCode本体の設定が効かない場合は，拡張機能を疑いましょうという教訓
Swift Concurrency で遅延実行

Swift Concurrency な環境で `DispatchQueue` を書きたくないので

## コード
### Before

```swift
DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
  print("遅延処理")
}
```

### After

```swift
Task {
  try await Task.sleep(nanoseconds: 1_000_000_000)
  print("遅延処理")
}
```

## 参考

https://developer.apple.com/documentation/swift/task/3862701-sleep