OmniAICreator/Qiita-1.07M huggingface dataset:
rex0220 項目書式プラグイン

kintone 画面で、項目を書式表示するプラグインです。

主な特徴
・ラベルと値の書式指定
　ラベルの書式は、詳細画面のみ適用
　値の書式は、詳細画面と一覧画面に適用
・計算式で書式条件を指定
　[計算式プラグイン](https://qiita.com/rex0220/items/ae83c6d5ce50ff7a9a73)と同様の関数を使用できます。
・テーブル項目対応
・PC・モバイル対応

※ Ver.13
・プラグイン設定で、添付ファイル項目の設定を追加

※ Ver.12
・DIC_MAP 関数を追加
・EV_INFO 関数に、appId オプション追加
・APP_URL, LOOKUP_GETID, RELATED_GETID 関数追加
・TABLE_DATA, TABLE_MAP, TPDIC 関数追加
　TABLE_DATA(TABLE_MAP(テーブル1,
　TPDIC("ドロップダウンT2",ドロップダウンT1, "数値T2",数値T1, "金額T2", 単価T1*数量T1)))
・プラグイン設定画面初期処理でエラー発生時に、ダイアログ表示するように変更
・kintone.Promise を Promise に変更

# 項目書式プラグインの使用例

- [rex0220 項目書式プラグイン ステータスの書式設定](https://qiita.com/rex0220/items/0bc632aa00069456c6e2)
- [rex0220 項目書式プラグイン 日付による書式設定](https://qiita.com/rex0220/items/86b5e2e65e98b5b716fa)
- [rex0220 項目書式プラグイン 曜日によるテーブル行の書式設定](https://qiita.com/rex0220/items/97faeaf43b47223f2754)

# 項目書式プラグインの画面表示例

- 一覧画面
![2022-11-11_21h50_35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/858992e7-09c1-130b-0ae8-ad89b2b3ed0c.png)

- 詳細画面
![2022-11-11_21h51_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/43a78ee0-e534-7d1e-8898-3e2470eafd1c.png)

- スマホ表示例
![2022-11-11_21h53_16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/32c15a0c-038e-1489-5d02-73665d5d98a6.png)

# プラグインの設定

- NOTE： プラグイン設定についてのメモ等
- プラグイン有効
- 一覧別設置：　書式表示する一覧を指定
- フィルタ：　表示する項目を絞り込み
- プラグイン設定のダウンロード
- プラグイン設定のアップロード
- 詳細：　詳細画面で書式を適用
- 一覧：　一覧画面で書式を適用
- ラベルの書式
- 値の書式
- 運用環境に反映


※テーブルに書式を指定した場合、テーブル行に適用される
テーブル内項目の書式を指定した場合、テーブル行の書式より優先となる

![2022-11-11_21h56_48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/dc977674-0f35-4753-205c-95fc48f0f2ff.png)

## ラベルの書式

「＋」ボタンで条件別書式を追加

- 条件：　書式を適用する条件を計算式で指定
- テーマ：　カラーパレットで選択すると、文字色と背景色がまとめて設定されます。
- 文字色：　カラーパレットで選択すると、文字色が設定されます。
- 背景色：　カラーパレットで選択すると、背景色が設定されます。
- 文字サイズ：　サイズを選択するか数値[px]を指定
- 文字修飾：　太字、下線、打ち消し線を選択
- プレビュー：　指定された書式でラベルをプレビュー

![2022-11-11_22h05_37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/dbf0241c-0683-837e-ce9f-6670103672f2.png)

## 値の書式

「＋」ボタンで条件別書式を追加

- 条件：　書式を適用する条件を計算式で指定
- テーマ：　カラーパレットで選択すると、文字色と背景色がまとめて設定されます。
- 文字色：　カラーパレットで選択すると、文字色が設定されます。
- 背景色：　カラーパレットで選択すると、背景色が設定されます。
- 文字サイズ：　サイズを選択するか数値[px]を指定
- 文字修飾：　太字、下線、打ち消し線を選択
- プレビュー：　指定された書式で項目値をプレビュー

※指定した条件は、上から順番に判定し、条件が TRUE になったら、その書式を適用します。

下記は、同じ結果になります。

- 「対応状況!="完了"」と期限を判定し、最後に「対応状況="完了"」を判定
![2022-11-11_22h12_23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/56ef369e-8230-1ae0-a50f-abd44cd5264f.png)
- 最初に「対応状況="完了"」を判定し、あとは期限のみ判定
![2022-11-12_01h09_34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/30ff2128-7b53-f48e-4c63-bc299c9132b5.png)


# 注意事項
- 既に、JavaScript によるカスタマイズを行っているアプリの場合、処理が競合して、エラーになる場合があります。その場合は、該当するアプリでプラグインの使用を中止してください。
XrmServiceToolkit.Soap.Fetch

	// 関連付けエンティティデータ存在チェック
	var emailFlg = false;
	var getInfo =
	    "<fetch>" +
	    "<entity name='new_entity1'>" +
	    "<filter>" +
	    "<condition attribute='new_field1' operator='eq' value='" + offer.new_hospitalname.Id + "' />" +
	    "<condition attribute='new_field2' operator='eq' value='1' />" +
	    "<condition attribute='new_field3' operator='eq' value='1' />" +
	    "<condition attribute='statecode' operator='eq' value='0' />" +
	    "<condition attribute='new_entity2●' operator='not-null' />" +   //lookup
	    "<condition attribute='new_field5' operator='not-null' />" +
	    "</filter>" +
	    "<link-entity name='new_entity2' from='new_entity2id' to='new_entity2●'>" +
	    "<attribute name='new_field11' />" +
	    "<filter>" +
	    "<condition attribute='new_field22' operator='eq' value='0' />" +
	    "<condition attribute='statecode' operator='eq' value='0' />" +
	    "<condition attribute='new_field33id' operator='not-null' />" +
	    "</filter>" +
	    "</link-entity>" +
	    "</entity>" +
	    "</fetch>";

	var resultList = XrmServiceToolkit.Soap.Fetch(getInfo);
	if (resultList.length > 0) {
	    // メール送信ダイアログの表示
	    if (window.confirm("宛先に送信しますか？")) emailFlg = true;
	}
【java 三項演算子】

## 【三項演算子】

```java:標準
[型][変数] = [条件] ? [TRUEの場合] : [FALSEの場合] ;
```

➀基本的なString型を判定して出力結果をString型に出力するタイプ。
判定：String　　出力：String
```java:三項演算子
String str = "sanko";
String yes_no = str == "sanko" ? "YES" : "NO";
System.out.println(yes_no);
```
出力結果：'<font color="Red">YES</font>' 

三項演算子を使わずに書くと
```java:通常
String str = "sanko";
if (s == "sanko") {
	yes_no = "YES";
} else {
	yes_no = "NO";
}
System.out.println(yes_no);
```

➁int型を判定して出力結果をString型に出力するタイプ。
判定：int　　出力：String
```java:三項演算子
int num = 20;
String s = num > 10 ? "TRUE":"FALSE";
System.out.println(s);
```
出力結果：'<font color="Red">TRUE</font>' 

➂int型を判定して出力結果をint型に出力するタイプ。（あまり使わなそう）
判定：int　　出力：int
```java:三項演算子
int num = 10;
int n = num != 10 ? 100 : 0 ;
System.out.println(n);
```
出力結果：<font color="Red">0</font>

### まとめ 
***
最近ようやく理解してきて実践的に使えるようになったのでここでアウトプット
実装するのに何行もかかっていたものを1行で書けてしまうのは驚くべき機能です。実際の現場では使うところと使わないところがあるそうですが、可読性のところで少し問題があるそうですが使える現場では積極的に使っていきたいものでありますね！


※三項演算子の解釈色々あると思います。上記は個人的見解です。
「開発を加速するためのテスト講座」から得た学び

# この記事について

ソフトウェア開発のテスト講座を受講した感想です。

# 講座の概要

**開発を加速するためのテスト講座**
**〜アジャイル開発にも適用できるシフトレフトなアプローチ〜**

https://event.shoeisha.jp/cza/agile-testing

開催日：2022年11月09日

講師は『Agile Testing Condensed』や『The BDD Books - Discovery』の翻訳者であるブロッコリーさんでした。
~~本は買ったけどまだ読めてないです~~

# 受講した目的

- 開発での不安 => 速くて信頼できるテストが必要
- テストについての知識を深めたい

# 講座での学び

## テストの目的は？

改まって聞かれると「バグを検出する」とか「品質を測るため」くらいしか考えていなかったのですが、リリース可否などの「意思決定にため」や「欠陥の作り込み防止」も目的に含まれていました。
（同時にテスト技術者資格制度 Foundation Level シラバスなるもの存在を知りました）

テストを改善するにあたって、そもそもの目的を把握しておくのは大切ですね。

## 顧客へ価値を提供するためのテスト

パスワード認証のテストを考えたとき、私は「文字数の境界値テスト」や「異常値テスト」「極端値テスト」などを挙げていました。
（この視点は『セキュア・バイ・デザイン』の影響が大きい）

もちろんこうした機能に注目したテストも必要ではありますが、「顧客に価値を提供する」という視点も大切であると再認識しました。

ではパスワード認証がどんな価値を提供するのかというと、ユーザのアカウントや情報を守るものだと思います。となると「ユーザのアカウントや情報を守れているか」という視点でのテストが考えられそうです。
（『セキュア・バイ・デザイン』にも心配事（concern）という観点があったんですがね・・・）

## テストはフェーズではなくアクティビティ

ワークでテストについて考えていると設計や要件定義に立ち返っているような事があり、テストが「工程（フェーズ）」よりもずっと近くにある感覚がありました。
これはTDDをやってる時と同じような感覚です。
テストという活動を通して洗練させていくイメージが得られました。

## 何をテストするか

バグの不在は証明できないので「十分に動いていることを証明できて、かつ最小のテストケース」を考える必要があります。
そのために「何をテストするか」や「なぜそのテストなのか」が大切になります。

> "テストコードには What"

https://twitter.com/t_wada/status/904916106153828352

## 協力する

今回初めて「Three Amigos」という言葉を聞きました。
POと開発者、そしてQAの３者がそれぞれの視点から協力して要件を確認するということですが、特に「責任分担している訳ではない」という点が重要になりそうです。
個人のマインドはもちろん、組織体制や仕組みなどと一緒に実現していくことが大切だと思います。

# まとめ

- テストの目的を知ろう
- 「顧客へ価値を提供できているか」に注目したテストもしよう
- テストをフェーズとして独立させず、あらゆるところで考えよう
- テスト分析やテスト設計で効果的なテストをしよう
- QAを含めた関係者と協力しよう

講座の内容は、講話を踏まえたワークを交えたもので、実際に体験できる点が素晴らしいと思いました。インプットも大切ですが、アウトプットしてフィードバックを得ることの大切さが実感できます。
テストを学ぶことのモチベーションがより上がったので、受講して良かったです。

# 謝辞

講師のブロッコリーさん、運営の皆様、一緒にワークショップをしたチームの皆様ありがとうございました。
全体の折れ線とフィルターを適用した折れ線を同一グラフで表示する方法

## 前提
本手順はフィルター適用順序原理を利用しております。
具体的には、​Fixed LOD関数のフィルターは、ディメンションフィルターより先に適用さる点を利用して実装しました。
フィルター適用順序のドキュメント​：

https://help.tableau.com/current/pro/desktop/ja-jp/order_of_operations.htm

## 手順
:::note info
1.折れ線グラフを作成
2.計算フィールドを作成
({Fixed 折れ線グラフのディメンション:SUM[折れ線グラフのメジャー])
3.2で作成した計算フィールドを行に配置し、二重軸を選択
4.「軸の同期」を選択し、「ヘッダーの表示」のチェックを外す
5.対象項目の「フィルターを表示」をクリックする
6.表示されたフィルター欄の右クリック→「カスタマイズ」→「"すべての値を表示"」のチェックを外す
7.フィルターし、動作確認。全体の折れ線は動かず、フィルターされた折れ線がフィルターに応じて変動することを確認
:::
### ​1.折れ線グラフを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562390/b571f5e0-96af-30ac-5d47-ff4b488050cd.png)
### 2.計算フィールドを作成
({Fixed 折れ線グラフのディメンション:SUM[折れ線グラフのメジャー])
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562390/c75d70f9-6109-764d-c08d-99bc8f0033ee.png)
### 3.2で作成した計算フィールドを行に配置し、二重軸を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562390/e3564713-a5c0-7b71-1def-8730ba1bd90e.png)
### 4.「軸の同期」を選択し、「ヘッダーの表示」のチェックを外す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562390/003f6164-5196-8c15-e92b-eccf46f21928.png)
### 5.対象項目の「フィルターを表示」をクリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562390/fd7592eb-4774-6ee9-8491-e4a1adbbc59f.png)
### 6.表示されたフィルター欄の右クリック→「カスタマイズ」→「"すべての値を表示"」のチェックを外す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562390/1bdc2390-1dcf-dda1-768a-abfae0e0eeb4.png)
### 7.フィルターし、動作確認。全体の折れ線は動かず、フィルターされた折れ線がフィルターに応じて変動することを確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562390/fadd8daa-b572-7aae-7e74-408b5952e185.png)
iPadでアプリ開発環境を構築する（React Native編）

最近のiPad（Air以上）はM1やM2チップが搭載され、ラップトップとの違いはメモリ容量くらいの差しかないのではないかと思います。そのため、iPadで十分アプリ開発が出来るのではないでしょうか。iPadなのでAndroidアプリ開発には不向きですが、ハイブリッドアプリやマルチプラットフォーム向けの言語であればiOS/Android両方に対して開発できます。

特にiPadであれば、自分用のPCがない学生の方でもチャレンジしやすいのではないでしょうか。今回はReact Native向けのアプリ開発環境を整えてみたので、方法を紹介します。

## 必要なもの

まず以下のサービスアカウントが必要です。

- [Expo](https://expo.dev/)

## ExpoをPWAとして配置する

ベストな方法としてはPWAの利用になります。iPadのSafariで[Expo](https://expo.dev/)にアクセスして、Webサイトをホーム画面に追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/714c9d77-72e5-f3b3-4eff-d9c1704e48bd.png)


アイコンもExpoのものが表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/c0556f76-9c9d-1b05-4e64-38753dcbe89c.png)


立ち上げると、専用アプリのように開きます。

![ED037320-BF6D-4E7C-A6B1-5F505EBBCB68_1_105_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/bdf7f41c-afc7-3879-1058-6ed4b7755ec0.jpeg)

### 開発スタイル

Expoを使った場合、3ペイン表示がデフォルトになります。左からファイルツリー、エディタ、プレビューです。エディタ、プレビューはそれぞれ閉じられます。

![BE31616F-BBD5-4AC5-8AD8-7E14DEFD6B8D_1_105_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/a3257d8f-f896-185d-1633-cf6222722bc5.jpeg)

スマートフォン側にExpo Goアプリをインストールすれば、ファイルの編集をリアルタイムで反映しながら開発を進められます。

![IMG_4A252FEFE3DF-1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/c7147195-cca1-78e7-b026-c687a80d96c0.jpeg)


### ビルド可能

Expoではビルド環境も提供されています。フリーでも月間30回ビルドできます。月間99ドルのサブスクリプションで、300回/月のビルドが可能になります。

## CodeSandboxを使った方法

[CodeSandbox](https://apps.apple.com/jp/app/codesandbox/id1423330822)アプリにはReact Nativeテンプレートが用意されています。これはExpoではなく、純粋なReact Nativeになります。

![B400ACE3-F37E-4290-9152-7F2AE70FADC6_1_105_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/34e05ed6-4fb4-bfd9-8de6-b11dadc98142.jpeg)

このCodeSanboxアプリを使った際に感じた課題は以下の通りです。

### package.jsonがない

package.jsonは利用できません。その代わりにGUIでパッケージを解決します。

### プレビューはあるが、恐らくネイティブプラグインは使えません

プレビューはWebサーバーで表示されるものになります。そのため、ネイティブ機能に依存するものは利用できないでしょう。

### ビルド環境はありません

CodeSandboxではpackage.jsonがないので、ビルド用スクリプトは実行できません。

## まとめ

今回はiPadでのReact Nativeアプリ開発にチャレンジしました。Expoを使えばビルド環境を含めて、十分に開発できそうです。iPadで手軽にスマートフォンアプリ開発にチャレンジしてみたい方は参考にしてください。

ニフクラ mobile backendは[React Native用にSDKを提供](https://github.com/NCMBMania/ncmb-react-native)しており（コミュニティSDKであり、公式サポートは受けられません）、React Nativeアプリでも利用可能です。ぜひお試しください！
ReactでHTMLの文字列をレンダリングしたい！

<h2>結論</h2>
dangerouslySetInnerHTMLを使うことで実現できる。

```
const hoge = "<div style='color: red;'>サンプル</div>";

<div dangerouslySetInnerHTML={{ __html: hoge }}></div>;
```

<h2>参考</h2>

https://qiita.com/k_hoso/items/ccc9c5ddf00ff57d76ac
Instana AgentのUndefined Zoneを変える

# はじめに
Instana Host Agentをインストールするときにワンライナーを使って簡単にインストールすることができますが、ワンライナーでインストールすると、Zoneの設定がデフォルトの`Undefined Zone`になります。とても簡単な内容ですが、これを変更する手順について書きます。  

本手順は以下の環境で実施しています。
- IBM Cloud VPC VSI
- RHEL 7.9, 8.5

# Zone設定とは？
Instana Agentに設定するメタ情報の1つです。
後述の設定テンプレートを見ればわかりますが、Zoneの情報として物理的な情報を付与しておくことで、問題が発生したときの参考情報とすることができます。

デフォルトでは、設定されておらず、設定ファイルでは以下のようにコメントアウトされています。

```yaml
# Hardware & Zone
#com.instana.plugin.generic.hardware:
#  enabled: true # disabled by default
#  availability-zone: 'Datacenter A / Rack 42'
```


この設定は必須ではなく、設定の有無でInstana Agentの機能は変わりません。
ただし、インフラストラクチャーのマップビューのデフォルト表示がゾーン毎にグループ化する設定になっているため、気になる人には気になります（自分を含め...）。

![スクリーンショット 2022-11-11 15.17.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319123/054c44c0-efe7-cd13-6fc0-b04ac72f78db.png)

# 設定方法

## 1. configuration_zone.yamlを作成
Zone情報として設定する値はインフラストラクチャービューでグループ表示したい単位で良いと思います。
複数のZoneファイルを手元で管理するとしたら、`configuration_zone_XXXX(ゾーン名等識別子).yaml`の方が良いかもしれません。

```shell
cat <<EOF > configuration_zone.yaml
# Hardware & Zone
com.instana.plugin.generic.hardware:
  enabled: true # disabled by default
  availability-zone: 'jp-tok-default-vpc'
EOF
```
## 2. サーバーにファイルを配置
以下は、あくまで参考で。Agentが動作しているサーバーに設定ファイルを配置します。
```shell
# $HOSTは対象サーバー
scp configuration_zone.yaml $HOST:/opt/instana/agent/etc/instana/
```

ファイルを配置すると、Instana Agentはconfiguration*.yamlを自動的に読み込んでくれます（Agentの再起動は不要）。

ログには以下の様に出ます。
```
2022-11-11T07:04:26.894+0000 | INFO  | a-config-service | PluginConfigurationFilesImpl     | 51 - com.instana.agent - 1.1.667 | Parsed configuration file /opt/instana/agent/etc/instana/configuration.yaml
2022-11-11T07:04:26.897+0000 | INFO  | a-config-service | PluginConfigurationFilesImpl     | 51 - com.instana.agent - 1.1.667 | Parsed configuration file /opt/instana/agent/etc/instana/configuration_zone.yaml
```

:::note
Instana Agentのconfiguration.yamlを直接編集しても良いですが、設定毎にファイルを分けておいた方が、大規模展開や自動化への組み込みに便利かと思います。
:::

## 3. 設定確認

UIを確認すると、Zoneが変更されていることが分かります。（少し時間がかかるかもしれません）

![スクリーンショット 2022-11-11 20.49.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319123/bde7e87e-d7a7-12cd-d2f0-c19f96cd2def.png)

# おわりに

今回はZoneの設定でしたが、他の設定も同じように変更できます。少しでも参考になれば幸いです。
文字列とリストの変換

文字列を一文字ずつにリスト化する方法、及び、一文字ずつのリストを文字列に統合する方法を知らなかったので書きました。

# 文字列を一文字ずつのリストにする

```python
# 「あいうえお」をリストにする
mojiretsu = 'あいうえお'
mojilist = list(mojiretsu)
```

# 一文字ずつのリストを文字列に統合する

```python
mojiretsu = ''.join(mojilist)
```

# 参考文献
@cress_cc. "文字列を１文字ずつのリストにする". Qiita. 2019/05/09. https://qiita.com/cress_cc/items/5600be0416a0be72ecfb, (2022/11/11).

ひろ. "Pythonのリストと文字列を相互に変換する方法まとめ". HEADBOOST. 2021/05/06. https://www.headboost.jp/python-strings-into-a-list/#index_id0, (2022/11/11).
なんとなく1dライフゲーム

ライフゲームというのを作ったことがないので作ろうと思ったら、なんとなくかったるかったから、「1dならかったるさが少ない」と思って書いた。(これをライフゲームと言うのかすら不明)

#### tldr
カオスは多様性を生む。

#### ルール
- 状態数は30
- それぞれのセルは初期状態15を持つ。
- ユニバーサル確率Pがある。
- Pは時間を追うごとに標準偏差が増加する。
- Pの中心は、そのセルがこれまでにとってきた状態の平均をまず出し、window sizeの範囲の周囲のセルの平均を取る。

#### コード
```python
import numpy as np
import pandas as pd
from PIL import Image, ImageDraw
from tqdm import tqdm
import matplotlib.pyplot as plt

images = []

width = 500
height = 10
init = 0.1
k = 30
step = 1000
ws = 1

length = width//height
colors = [x*(255//k)for x in range(k)]
prevs = [[k//2 for _ in range(length)]]
large_image = []
for i in tqdm(range(step)):
    x = [int(a) for a in np.mean(prevs, axis=0)]
    y = [abs(int(np.random.normal(np.mean(x[max(0,j-ws):j+(ws+1)]), scale=init*np.log(i+1)))) %k for j in range(length)]
    prevs.append(y)
    large_image.append([colors[y[i]] for i in range(length)])

images = []
for x in tqdm(prevs):
    im = Image.new('RGB', (width, height), (255,255,255))
    im = np.asarray(im)
    for i in range(length):
        im[:, i*height:(i+1)*height] = colors[x[i]]
    img = Image.fromarray(np.uint8(im))
    images.append(img)

images[0].save('test.gif', save_all=True, append_images=images, optimize=False, duration=40, loop=0)

a = np.array(large_image)
im = Image.fromarray(np.uint8(a))
im.save("a.png")

plt.plot(np.array(prevs)[:, 1])
plt.savefig("plot.png")

print(np.mean(pd.DataFrame(prevs).corr()))
```

#### 2次元化
時間軸をつなげて全てが同時に起こっているように1次元を2次元化すると以下になる。(縦軸が時間)
コミュニケーションを行わせるセルの範囲でギザギザのパターンが変化する。

|ws=1|ws=3|ws=15|
|--|--|--|
|![a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2933444/7f5bfa59-2246-a940-184d-a170bf0dbb36.png)|![a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2933444/e2afdd13-1be0-6489-af17-baa92e2d2e92.png)|![a_15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2933444/9a726283-b56d-db6a-b86b-08e819ef884a.png)|

#### 参考
- https://stackoverflow.com/questions/63307053/typeerror-image-object-does-not-support-item-assignment
- https://numpy.org/doc/stable/reference/random/generated/numpy.random.normal.html
- https://code-maven.com/create-images-with-python-pil-pillow
- https://note.nkmk.me/en/python-pillow-gif/
【Git】gitでたまに役に立つコマンド

忘れがちだけれど、たまに役に立つというコマンドを個人的に集めてみました。
* git addする前のファイルの変更を元に戻すコマンド

```
git checkout .

#追加したファイルがあれば以下を実行してファイルを削除

git clean -df .
```

* git addする前のbranchの名称を変更するコマンド
```
git branch -m new_branch_name
```
* リモートの状態をマスターに合わせるコマンド
```:ターミナル
git fetch origin

git reset --hard origin/master
```
https://teratail.com/questions/30854

* コミットの取り消し

```:ターミナル
git reset --soft HEAD^
```
大学入試問題文?集（別巻第1巻）数学の参考書と問題集の通称を調べてみた。著作権法も

探し方がわるいのか、通称の一覧表が見つからなかったので、作ってみました。

#　未整理
(2023/07/07修正)
はい完 ハイレベル 数学I・A・II・B の完全攻略 (駿台受験シリーズ)

# 一覧表
| 読み方 | 通称  | 名称  |  出題年度表示有り無し |索引有無|
| --- | --- | --- | --- |--- |
| アオチャート | 青チャート | チャート式 |年度表示なし(20221111) |有 |
| アオホン | 青本  | 駿台大学入試完全対策シリーズ |年度別(20221111) | |
| アカホン | 赤本  | 20xx年版大学入試シリーズ |年度別3年〜7年(20221113) | |
| エフジー | FG  | Focus Gold |調査中(20221111)| |
| ジュウモン | 重問  | 20xx実戦 数学重要問題集 |一部表示無し(20221113)| |
| チェクリピ | チェクリピ | チェック＆リピート |調査中(20221111)|無|
| ヒョウモン | 標問 | 標準問題精講 |年度表示なし(20221111)|無|


# おまけ

参考書と問題集をあわせて、"参問集"という人は、いませんでした。
ヒットしませんでした。

https://www.google.com/search?q=%E2%80%9D%E5%8F%82%E5%95%8F%E9%9B%86%E2%80%9D&rlz=1C1CHBD_jaJP908JP908&oq=%E2%80%9D%E5%8F%82%E5%95%8F%E9%9B%86%E2%80%9D&aqs=chrome..69i57j0i546l5.23368j0j7&sourceid=chrome&ie=UTF-8

教科書と参考書と問題集をあわせて、"教参問"という人は、いませんでした。
ヒットしませんでした。

https://www.google.com/search?q=%E2%80%9D%E6%95%99%E5%8F%82%E5%95%8F%E2%80%9D&client=ms-android-huawei&sxsrf=ALiCzsZGTbhbppUBHCDDOrbip2nL10jicw%3A1668252593441&ei=sYNvY5-7Gsm5hwOD3YaQAw&oq=%E2%80%9D%E6%95%99%E5%8F%82%E5%95%8F%E2%80%9D&gs_lcp=ChNtb2JpbGUtZ3dzLXdpei1zZXJwEAMyBQgAEKIEMgUIABCiBDIFCAAQogQyBQgAEKIEMgUIABCiBDoKCAAQRxDWBBCwAzoECCMQJ0oECEEYAFDCY1iIugFgp8YBaABwAHgAgAGtBYgBlwiSAQkwLjEuMS41LTGYAQCgAQHIAQrAAQE&sclient=mobile-gws-wiz-serp

問題文に出題年度表示の有り無し:問題の出題年度がないと不便です。大学名は、あったと思います。
著作権のためですか？

# 参考
(2023/05/24移動しました)

https://qiita.com/mrrclb48z/items/c3a27c6a2848629ff90c
意外と出てこない「年月」関係の0paddingについて（2022年3月->202203）

最近YYYY年mm月というデータを「YYYYmm」に持ち直す際に、
1~9月だとそのまま結合すると
2022年1月-> 20221
となり、202201のようなものがいいんだよな〜っていうことがあると思います。

そこで、0 paddingというものを知りました。

知る前はゴリ押しでif文とかで作ってたんですが、先輩のレビュー時にアドバイスというか教えていただき、1行であたかも簡単にできることを知りました。
（今考えれば、だれでもこういうデータの変換をするので、そういう関数くらいあるよね、とは思うんですが、そのときは「変換せねば！」という思いでいっぱいでした。）

# 組み込み関数formatで一撃
結論はこれでした。

```
import re

wareki_regex = "(\d*)年(\d*)月"

year_month = "2022年3月"

m = re.match(wareki_regex, year_month)

year, month = m.group(1), int(m.group(2))

print(f"year={year}, month={month}")
print(format(month, '02'))
# これ
print(f"0 padding month -> {format(month, '02')}")

year_0padding_month = year + str(format(month, "02"))

print(year_0padding_month)

>>>
year=2022, month=3
03
0 padding month -> 03
202203

```

大体、`format(value, '希望するformat')`という感じなんですが、valueは特に記載がないものの、intの方が好ましい感じでした。（実際文字列のまま入れるとエラー出ました。。）
参考元：http://dalmore.blog7.fc2.com/blog-entry-172.html

# 終わり
これだけなんですが、実際に「こういう関数って当たるまで知らずに過ごしちゃうよね」って思った案件だったので、自分の復習も兼ねて書きました！
sed や grep などの -e と -E は機能として対称ではない

# していた勘違い

|option|勘違い|
|------|-----|
|-e|基本正規表現。複数個書ける。|
|-E|`-e` の拡張正規表現版。複数個書ける。|

例えば `grep -e xxx -e yyy` は `grep -E xxx -E yyy` とも書けると思っていた。

# 正しくは

-E は、拡張正規表現を使うためのフラグ。よって -E を複数個書けないし、そもそも expression を引数にとることができない。

```bash
# イケる
$ echo aaa | grep -e bbb -e 'a\{3\}'
aaa

# イケない
$ echo aaa | grep -E bbb -E 'a{3}'
grep: a{3}: No such file or directory
```

# cf. man grep

```
       -E, --extended-regexp
              Interpret PATTERN as an extended regular expression (ERE, see below).
             :
       -e PATTERN, --regexp=PATTERN
              Use PATTERN as the pattern.  If this option is used multiple times or is combined with the -f (--file) option, search for all patterns given.  This option can be used to protect  a  pattern
              beginning with “-”.
```

# まとめ

基本のキではあったが `-E` は引数をとらないフラグ、という理解がなかった。
もし拡張正規表現を複数定義したい場合は -E と -e を組み合わせればよさそう。

```bash
$ echo aaa | grep -E -e 'bbb' -e 'a{3}'
aaa
```
Pythonで標準入力された場合の基本的な処理

競プロに手を出したばかりで標準入力の処理を最近知ったので、一番基本的なやつの備忘録です。
# 一つのものだけ標準入力された場合

```python
# 文字列が与えられた場合
a = input()

# 数字が与えられた場合
b = int(input()) 
```

# 横並びで入力が与えられた場合

文字列の場合は以下。

```python
list = input().split()
```

数字で入力が与えられた場合、以下のようにするとエラーが出る。

```python
list = int(input().split())
```

intの中身がリスト形式なのは駄目らしい。代わりに以下のようにすれば良い。

```python
l = list(map(int, input().split()))
```

※入力が縦一列の場合は「一つのものだけ標準入力された場合」を行数分繰り返せば良い。

後はこれの応用で、できそうな気がしました。
もう少し詳しくなったら加筆します。

# 参考文献

@jamjamjam. "初心者向けAtcoder標準入力セット(Python)". Qiita. 2021/12/14. https://qiita.com/jamjamjam/items/e066b8c7bc85487c0785, (2022/11/11).
AWS GlueのSensitive data検出の日本向けパターン

# 初めに

AWS GlueではSensitive Data Detection featureとしてPII等の機微情報の検出やマスキングを行う機能があります。今までは日本固有のパターンは提供されていませんでしたが、2022/11/08に下記の日本固有のパターンが機能として追加されました。

![glue_pii_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276167/2ec7b577-a6d0-cd94-f0e2-cdd21f146822.png)

日本固有の
- 銀行口座番号
- 運転免許証番号
- マイナンバー番号
- パスポート番号

の検出を行うことができるようになりました。

# 使用方法

GlueのAPIを使ってSensitive Data Detection featureを使うこともできますが、Glue Studioでより簡易に使用することができるので、ここではGlue Studioを使用します。  

Glue Studioのジョブ作成画面で `Action` → `Detect Sensitive Data`を選択します。
![glue_pii_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276167/6ff3fd1a-b489-e329-b83b-0b9cbf523f14.png)

Detect Sensitive Dataの設定の `Types of sensitive information to detect`で`Select categories`を選択し、Categoriesに`Japan`を選択すると上記に記載した日本固有のパターンのデータの検出を行うことができます。  
Actionsには
- Enrich data with detection results (１カラム追加し機微情報の検出結果をそのカラムに記載する）
- Redact detected text（機微情報をマスキングする）
の選択肢があります。
![glue_pii_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276167/1c6f9e11-c04a-9bbf-3e71-627b9e1705b5.png)

簡易な構成としてGlue Data Catalogをインプットとしてデータを読み込み、Detect Sensitive Dataの処理を行なってAmazon S3に結果を出力するというようなジョブを作成/実行ができます。

![pii_blog_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276167/26f9ac67-6dff-ccaf-6730-fbf4e596e87a.png)

# 機微情報の検出パターンの実験

データだけを見て機微情報を判断しているのかスキーマ(列名)も考慮して機微情報を判断しているのかが気になったので検証を行なってみました。  
(2022/11/10時点の検証結果になります。検出パターンに関しては今後変わる可能性もあると思われるのでご注意ください。）

## 入力データ

S3上に配置されているCSVデータになります。データとしてはパスポート番号のフォーマットのデータになります。また、2カラム構成ですがそれぞれのレコードには同じデータが格納されています。

```
XS1234567, XS1234567
TT0001850, TT0001850
```

このCSVデータはGlue Data Catalogでカタログ化されており、1カラム目はパスポート番号だと想像できないカラム名、2カラム目はパスポート番号を思わせるカラム名にしてあります。

![pii_blog_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276167/1f81037d-ebd5-8884-2ffc-aad4c0aa44d9.png)

## 実験結果

Glue StudioのDetect Sensitive Dataの処理を実行し機微情報の検出結果をカラムとして付与してS3に出力されたファイルの内容が以下となります。

```
{"col0":"XS1234567","passport":" XS1234567","DetectedEntities":{"passport":[{"entityType":"JAPAN_PASSPORT_NUMBER","start":1,"end":10}]}}
{"col0":"TT0001850","passport":" TT0001850","DetectedEntities":{"passport":[{"entityType":"JAPAN_PASSPORT_NUMBER","start":1,"end":10}]}}
```

JSONの最後の項目の `DetectedEntities`に機微情報が検出されたカラムと検出内容が記載される形になるのですが、データは同じなのに`passport`カラムは検出され、`col0`カラムは検出されていないようです。  
この結果からGlue Data Catalogをインプットとした場合、スキーマ情報も考慮して機微情報の検出を行なっているように見えます。  

ただ、インプットをGlue Data Catalogではなく他の形式にした場合など挙動は変わってくる可能性はあると思いますので、実際にこの機能を利用する場合は実験をしながら利用可否を判断していくのが良さそうです。
🔰超初心者のこの先の超初心者の皆様に向けて#3

＊論理演算
真理値に対する演算でBool型には否定、論理積、論理和の３つがあります。

＊否定
真理値の真偽を逆にする演算です。
！を使用します。
let a = true
結果true
let b = !a
結果false

＊論理積
与えられた複数の真理値がいずれも真であれば、真となります。
＆＆を使用します。
let a = false && false
結果false
let b = false && true
結果false
let c = true && false
結果false
let d = true && true
結果true

＊論理和
与えられた複数の真理値の少なくともどれか１つが真あれば、真となります。
||を使用します
let a = false || false
結果false
let b = false || true
結果true
let c = true || false
結果true
let d = true || true
結果true
npm アップデート：Bootstrap 5 で sass エラー

## 問題

npm アップデートし、Sass コンパイルしようとすると以下のエラーが発生
"Deprecation Warning: $weight: Passing a number without unit % (100) is deprecated."

## 原因と解決方法

`/` を使っての計算が廃止された sass 1.56.0 にアップデートしたことが原因。v1.55.0 にダウンデートすることで暫定的に解決した。
[v5.3.0 でフィックスされる予定](https://github.com/twbs/bootstrap/issues/37424)とのこと。

## 参照

* [Incompatible with sass 1.56.0 · Issue #37424 · twbs/bootstrap](https://github.com/twbs/bootstrap/issues/37424)
* [Fix deprecation warning with sass 1.56.0 by blankse · Pull Request #37425 · twbs/bootstrap](https://github.com/twbs/bootstrap/pull/37425)

* [Bootstrap 5 のビルドで DEPRECATION WARNING: Using / for division is deprecated - Web Design Leaves](https://www.webdesignleaves.com/wp/htmlcss/1956/) 以前にも同様なことがあった模様
【Perl初学者】正規表現のトリミング

本日は日記的につらつら書こうかと...

今回はPerlの正規表現を用いたトリミング技術を紹介しようと思います。

正規表現の概要についてはこちら
[正規表現とは](https://qiita.com/takopa/items/6c504dcaac2d3853f958)
よく使われる正規表現についてはこちら
[よく使われる正規表現](https://qiita.com/takopa/items/abaebb2b6c738acbe792)
を参照にどうぞ。

## 日付(yyyymmdd形式)に文字列をトリミングする
```;hello.pl
my $date = 2022-11-08;
$date =~ s/^\s*(.*?)\s*$/$1/;#文字列をトリミング
$date =~ s/^(\d{4})-(\d{2})-(\d{2})$/$1$2$3/;#ハイフンが入っていた場合、除去する
$date =~ s/^(\d{4})\/(\d{2})\/(\d{2})$/$1$2$3/;#スラッシュ形式の場合は除去する

if ($date =~ /^(\d{4})(\d{2})(\d{2})$/){
    return print "$date\n";
};

#結果 20221108
```

### 文字列をトリミング

`$date =~ s/^\s*(.*?)\s*$/$1/;`
最初のsはパターンマッチs/この中を/ここに保存/という意味
今回は`$1`が入っているため、()中をグループ化して置換して`$1`に保存している

### ハイフンが入っていた場合、除去する

`$date =~ s/^(\d{4})-(\d{2})-(\d{2})$/$1$2$3/;`
\dは0~9の文字のどれかを想定しているという意味
今度は{4(または2)}は、直前の表現(今回だったら\d)が4(2)文字を想定しているよという意味

### スラッシュ形式の場合は除去する

`$date =~ s/^(\d{4})\/(\d{2})\/(\d{2})$/$1$2$3/;`
`\/`は、`/`を想定しているという意味

`if ($date =~ /^(\d{4})(\d{2})(\d{2})$/){
    return print "$date\n";
};`

最後にトリミング終えた文字列を想定の正規表現と比較し、整合したら出力させる

まとめ
正規表現は奥が深くて楽しいです。
一発で立体表現

顔面の立体表現って大変ですよね。そこで、自己流ではありますが、立体表現のウェイト付けのHow toをまとめてみました。
あくまで自己流なので、そこのところよろしく！

まずは、大ざっぱに、メッシュを切ります。ポイントは、３Ｄモデルのローポリゴンっぽく、立体を意識して頂点を打つことです。<b>頂点数を増やしすぎるのはＮＧです。</b>
このとき、<b>輪郭が切れても気にしません。</b>突起物も無視です。ウェイトを付け終わってから対処します。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1781010/62409627-c3f8-ac7a-b976-9b9cf7450eaf.png)

メッシュを切ったら、ベースとなるボーンと、パース用のボーンをバインドします。一般的には、Headとか名付けてるボーンですね。それと、パース用のボーンです。捻らないならこのボーンは何処にあっても構いません。今回の例では、ダルマのど真ん中にありますが、いつもは顔の横辺りに置いてます。

さて、まずは、一発で大まかなウェイトを打ってしまいます。一番大きく動く部分。球体であれば中心。真正面の人面なら眉間からおでこあたりでしょうか。そこに打つウェイトを設定します。

ベースを１００％としたメッシュに、追加モードでパース用のウェイトを設定します。値はお好みで。あまり大きくすると、ベースとなるボーンの影響が小さくなり、首を傾げた時にあまり傾かなくなってしまうので、多くても３０％くらいかな、と思います。

ウェイト追加の円を、素材より少し大きくなるまで、サイズのつまみをドラッグして調整します。フェザーの値は９０くらいにしておきます
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1781010/14144626-9e3f-9863-3fe7-dab9094dcd24.png)


円の中心を、立体の中心に合わせて１回クリック。これで大ざっぱに立体的なウェイトが設定出来ました。動かしてみるとこのとおり、少しそれっぽくなります
![daruma.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1781010/bdbcbaf1-e97b-3c4b-046e-9aa75b8ee1f6.gif)
なんか、口周りが出っ張っているように見えませんか？　ウェイトが多いところは出っ張り、足りないところは凹んでいるように見えます。ということで、次は凹んでいるところにウェイトを足していきます。

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1781010/ca502395-4f36-32bb-8283-036abcfb5c31.png)
こんな感じの設定で、ブラシで塗るようにウェイトを加算していきます。実際、ペンタブでやっている人もいます。

![daruma2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1781010/1e89f499-40de-4836-e37f-73ea1e218169.gif)
どうです？　ちょっと立体っぽくなりましたよね？　あとは、形状に合わせて頂点を増やし、輪郭も整えていきます

![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1781010/d0f948b0-03a3-8c2a-9cc7-c0fceee546a8.png)

ウェイト調整が適当であれば、あとはパース用ボーンと組み合わせて、ぐりぐり動かせるようになっているはずです！
![daruma2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1781010/c8fec056-e683-4919-eb0c-745273c76daf.gif)

以上、一発立体表現でした。参考になれば嬉しいです。
[UE4]プルダウンメニューでスライドインアニメーション

# はじめに

プルダウンメニューの候補を表示する際に、リストをスライドインさせる方法の備忘録です。

https://twitter.com/abricheese/status/1591009916361539585

# 環境

Windows10
UE4.27.2

# 実装

1. 画像のように、スライドインさせたいもの（今回は「Border_PullDown」：**※1**）を別の要素（今回は画像で選択中の「CanvasPanel」：**※2**）の子要素に配置します。
1. ※2のクリッピングを「Inherit」に設定します。
1. ※1と※2を同じサイズにします。

クリッピングを「Inherit」に設定することで、※2の外側にはみ出した部分を非表示にすることができます。
これにより、※1を※2の外側から内側に動かすことで、スライドインを表現することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668217/e4854d61-74c1-c0de-4238-e8713e4706c1.png)

アニメーションを作成します。
スライドインさせたいもの（今回は「Border_PullDown」）をトラックに追加し、Transform＞変換＞Yの値を変化させます。

0フレーム：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668217/3350b3ae-8c88-35ca-d379-541930db3f93.png)

最終フレーム：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668217/7f8cf8fe-3a44-a582-ab61-3e270169631e.png)

あとはリストを展開する際にアニメーションを再生してあげればOKです。
（デモ用に適当に作った動作例）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668217/d2844c9f-c01d-7704-42ca-50825c4c6e12.png)
Adalo で画像をアップロードして次のページで表示する ( Image Picker )

# ページに Image Picker を配置する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89618/88bfbf82-e0c1-caea-cf60-0db8c5e288d3.png)

# ボタン

Custom Action で何かの Collection を Create するようにしておく
Image プロパティの値として Image Picker の画像を指定する
別のページに Link しておく

<img width="1114" alt="image" src="https://user-images.githubusercontent.com/13635059/201317724-7fd428d8-900b-49da-b29b-3440ec8004bf.png">

# リンク先

リンク先のページでは Current の Collection の画像を表示させる

<img width="1440" alt="image" src="https://user-images.githubusercontent.com/13635059/201317471-7fd1d3bb-8d38-49d7-a3b4-9d22731058bf.png">



# 画面の動きの例

![image](https://user-images.githubusercontent.com/13635059/201316904-d0691e6b-6f17-463d-bbc4-f531de707868.png)
![image](https://user-images.githubusercontent.com/13635059/201317770-106b35a4-d24f-4fe1-aa33-6a488cc4781a.png)

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ


# Twitter

https://twitter.com/YumaInaura
基本情報技術者【単語】

|単語|内容|
|---|---|
|**絶対値**|**数直線上において、数字が原点からどれだけの距離にあるのかを表す数字**|
|**逆ポーランド記法**|**後置記法とも呼び、式の被演算子を最初に列挙し、演算子を最後に記述する表現形式**|
|**基数**|**数値を表現する基準となる数で、2進数や10進数などの「n進数」のnの部分の事**|
|**補数**|**足すと桁が1つ上がる数のうち最も小さい数**|
|**右算術シフト**|**ビット列全体を右にずらす算術シフトのこと**|
|**右ビットシフト**|**nビット右シフトは1/2n倍**|
|**左算術シフト**|**ビット列全体を左にずらす算術シフトのこと**|
|**左ビットシフト**|**nビット左シフトは2n倍**|
|**論理演算**|**真と偽の2通りの状態を取る真偽値（真理値/ブール値）の間で行われる演算**|
|**符号部**|**プラスなら0で、マイナスなら1で表す**|
|**指数部**|**動かした小数点の数**|
|**仮数部**|**実際の数字を表す部分**|
|**標準正規分布**|**平均値0、分散(標準偏差)1の正規分布の事**|
|**正規分布**|**左右対称で平均を中心に左右に裾野を持つ、釣鐘や富士山のような形をしているカーブ**|
|**標準偏差**|**データが平均値の周辺でどれくらいばらついているか**|
|**確率変数**|****|
|**期待値**|**確率を考慮した平均値**|
|**独立した事象**|**2つの事象について、一方がおこるかおこらないかによって他方のおこる確率が変わらないとき**|
デバック環境を構築するMac M1編　外付けSSDにmac OSをインストールする Ventura

デバック環境を構築するMac編　外付けSSDにmac OSをインストールするの続きとしてm１Mac編になります。

https://qiita.com/usashirou/items/825bf3031fd5e1cced86
# 外付けSSDを準備する
最初に外付けSSDをAFPSフォーマットでフォーマットしましょう。
__フォーマット：APFS 
方式：GUIDパーテーションマップ__ 
を選択し消去します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/46e4898d-b1be-6b75-2388-45d76c719f2a.png)
![スクリーンショット 2022-10-28 22.35.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/b7d4920c-c5b7-84f3-94f5-b0b19a35a7d6.png)
# Venturaをダウンロードする
Venturaのイメージをダウンロードしソフトウェアアップデートからアップグレードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/0863188d-a4c9-8774-8a75-2e8503a97620.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/44582a6c-670c-dae8-8e4d-f5599b6954cf.png)
__同意する__ で、進みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/44eef09d-559d-fda3-46e3-763034ca6165.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/4df6239e-ec8a-d916-bb8e-c99828607fc0.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/07046bbf-4348-d240-0e17-7ac6a51c138c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/62af02e6-2b22-4c93-3d6c-866c51f275ee.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/2ee7b842-4342-0093-4661-cd18129f320f.png)
# インストール先を選択する
__すべてのディスクを表示__ をクリックし、外付けSSDを表示させます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/58e82a28-c279-ebb1-3934-b96d8f8b9cfc.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/5041a2ec-9d9a-0f65-d7e5-fdbb31fc0e4f.png)
![スクリーンショット 2022-10-28 23.50.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/784f5f0a-a0f0-a1ff-e777-27b85e9f70db.png)
![スクリーンショット 2022-10-28 23.50.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/ff601279-c68c-5506-9b69-b1a0672d1646.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/ab9bdb0e-36a7-d83a-9d64-db73ca1b2bc6.png)
![スクリーンショット 2022-10-28 23.50.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/4ec3d17a-130c-010e-f30b-1ff2b0323c35.png)
![スクリーンショット 2022-10-29 0.35.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/d5489676-3eb3-4d5a-4c77-908b2d001994.png)
# Ventura起動
問題がなければ何度かの再起動後にVenturaが起動すれば問題ありません。
なお、USBハブによってはエラーが発生して起動しない場合があります。
この場合、USBハブを変えてみることをお勧めします。
![スクリーンショット 2022-10-29 13.08.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/a2e0fa3e-9dd1-a8a5-9d93-ab1541060062.png)
Androidジェスチャーナビゲーションエリアの背景色変更方法

今回はジェスチャーナビゲーションエリアの背景色を変更してみたいと思います。

ジェスチャーナビゲーションエリアとはどこかというと、下の黒の部分です。

![Screenshot_20221026_124713.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274615/350602ac-7506-e6b0-ba91-382db89a1a9e.png)


こちらの色を変更していきます！

※Android 10（API レベル 29）以降の Android 対象です。


公式

https://developer.android.com/training/gestures/gesturenav?hl=ja#edge-to-edge


# ジェスチャーナビゲーションエリアの背景色変更方法



```　values-v29/themes.xml
<style name="Theme.MyApplication" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <item name="android:navigationBarColor">@android:color/white</item>
</style>
```
    
themeに設定するとアプリ内で全ての色が変更されます。

```AndroidManifest.xml
    <application
        android:theme="@style/Theme.MyApplication">
    </application>
```
themeはマニフェストで設定します。

コードで変更もできるみたいです。

```MainActivity.kt
window.navigationBarColor = Color.WHITE
```

windowのsetNavigationBarColorを使用します。

https://developer.android.com/reference/android/view/Window?hl=ja#setNavigationBarColor(int)

こちらが変更した画面です。

![Screenshot_20221026_124734.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274615/258a47a0-7bc4-10ed-025d-16a36a10e274.png)


以上です
AWS CDKでSecrets ManagerのgenerateSecretString, secretObjectValue, secretStringValueを作ってみる

# 背景
`cdk`で `secrets manager`を使ってパスワードや環境変数を登録するときに、
1. `generateSecretString`
1.  `secretObjectValue`
1.   `secretStringValue`

のパターンをそれぞれまとめてみました。


# 環境
Typescript: ^4.8.2
aws-cdk: ^2.44.0


# generateSecretString オプションなし

## generateSecretString: コード

```ts
const generateSecretString = new aws_secretsmanager.Secret(this, 'GenerateSecretString', {
      generateSecretString: {
        secretStringTemplate: JSON.stringify({ username: 'postgres', say: 'hi mom' }),
        generateStringKey: 'password',
      },
    });
```

## generateSecretString: コンソール画面

![スクリーンショット 2022-11-11 17.09.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183059/efb3a78f-1900-e735-6799-4d0d1df3c4b4.png)|
|:-:|

- `generateStringKey`で定義した`password`だけランダムな文字列を生成してくれる
- `generateStringKey`で生成してくれるキーはひとつだけ

# generateSecretString: オプションあり

オプションで`excludeNumbers`や`excludeCharacters`を使って生成する文字列を調整することができるので試しに生成してみた。

## generateSecretString: コード

```diff_typescript
const generateSecretString = new aws_secretsmanager.Secret(this, 'GenerateSecretString', {
      generateSecretString: {
        secretStringTemplate: JSON.stringify({ username: 'postgres', say: 'hi mom' }),
        generateStringKey: 'password',
+       excludeNumbers: true,
      },
    });
```

## generateSecretString: コンソール画面
![スクリーンショット 2022-11-11 17.49.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183059/c30383ee-d927-a4a3-8ca6-e6e667f69d23.png)

- excludeNumbers(数字を除く)のとおり、数字がない文字列を生成している
- その他オプションは下記を参照

https://docs.aws.amazon.com/cdk/api/v2/docs/aws-cdk-lib.aws_secretsmanager.CfnSecret.GenerateSecretStringProperty.html#interface-generatesecretstringproperty

# secretObjectValue

## secretObjectValue: コード

```ts
import { randomBytes } from 'node:crypto';
import { SecretValue } from 'aws-cdk-lib';

const generateRandomString = () => randomBytes(10).toString('hex');

const secretObjectValue = new aws_secretsmanager.Secret(this, 'SecretObjectValue', {
      secretObjectValue: {
        username: SecretValue.unsafePlainText('postgres'),
        say: SecretValue.unsafePlainText('hi mom'),
        password: SecretValue.unsafePlainText(generateRandomString()),
        password2: SecretValue.unsafePlainText(generateRandomString()),
      },
    });
```

## secretObjectValue: コンソール画面

![スクリーンショット 2022-11-11 17.39.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183059/29871f74-cbee-c1a0-4dfe-f21bca987066.png)|
|:-:|

- `secretObjectValue`に渡したオブジェクトがそのまま保存される
- ランダムな値を利用したいキーがある場合は、自前でランダムな文字列用意


# secretStringValue

## コード

```ts
const secretStringValue = new aws_secretsmanager.Secret(this, 'SecretStringValue', {
      secretStringValue: SecretValue.unsafePlainText('hi mom'),
    });
```

## 作成したシークレットの値をコンソール画面で表示

![スクリーンショット 2022-11-11 17.44.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183059/688a4358-71ef-ceb1-690b-2cb7964fdc19.png)

- 文字列のみ。key/value形式ではない。
AndroidStudioとgradleとpluginのバージョンメモ

## 記事の目的
- AndroidStudioのgradleとそのPluginの書かれてる場所のメモ
- 対応するバージョンの見方のメモ
- AndroidStudioのバージョンとの兼ね合い

## 混乱したところ
- "Gradle"と呼ばれるものと、"GradlePlugin"と呼ばれるものは別物。
- "Gradle"だけあってもAndroidアプリをつくれないので、"GradlePlugin"を入れる必要がある

## AndroidStudioのgradleのバージョンが書いてあるところ
gradle-wrapper.popertiesのdistributionPath

↓7.5
![スクリーンショット 2022-11-11 18.18.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731109/0091f855-ade0-5e2c-d7d8-39688fcf4b8e.png)

## GradleのPluginのバージョンが書いてあるところ

build.gradle

↓7.3.1 
![スクリーンショット 2022-11-11 18.20.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731109/c9e7266e-1f1e-393b-19de-6124a08b33c6.png)

## gradleとそのpluginは対応するバージョンがあるので確認する

https://developer.android.com/studio/releases/gradle-plugin

（例）pluginのバージョンが7.3の時のgradleバージョンは最低でも7.4ないといけないが、私は7.5を設定しているのでOK
![スクリーンショット 2022-11-11 18.16.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731109/54d1d81d-1ea3-69e2-f522-6fbe18c89aff.png)

## AndroidStudioのバージョンとの兼ね合い
じゃあpluginのバージョンを7.4にすればいいじゃん、となるが、
私はAndroidStudioのバージョンがDolphinなので、
下の表より、Dolphinはplunginの最高が7.3。
よってpluginを7.4にできない。
![スクリーンショット 2022-11-11 18.33.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731109/ef3fea29-a78e-2dca-42c4-70ab8cc8b42c.png)

https://developer.android.com/studio/releases#android_gradle_plugin_and_android_studio_compatibility
【SwiftUI】UIWindowを使うときの注意点

# はじめに
UIWindowをSwiftUIで使う際に落とし穴があるので記事にしておきます。

# 悪い例
```swift
let scene = UIApplication.shared.connectedScenes.first as? UIWindowScene
```

# 良い例
```swift
let scene = UIApplication.shared.connectedScenes.first(where: { $0.activationState == .foregroundActive }) as? UIWindowScene
```

# 悪い例を使うとどうなるか
iPadでクラッシュする

# おわり
何が正解かわかりませんが、
もしかしたら、SceneDelegateから取得する方法が正しい方法かもしれません

https://zenn.dev/usk2000/articles/1a1a433500b03a

https://qiita.com/shiz/items/3b829b1521f9723aa875

https://zenn.dev/konomae/articles/55759a688a7dfc
Prometheus始めてみた #1 -概要から導入まで-

prometheusを触る機会があり，自分の環境で使ってみました．
本記事は「"Prometheus Up & Running"(Brian Brazil, O'Raily Media, 978-1-492-03414-8, 日本語版「入門 Prometheus」 オライリー・ジャパン」を参考にしております．

# Prometheusとは
正確には[公式ホームページ](https://prometheus.io/)の方が詳しいと思うので概要だけでも紹介します．
> Prometheusは，「オープンソースのメトリクスベースモニタリングシステム」．

と本には書いてありました．じゃあ，メトリクス，モニタリングって何？ってところから入りましょう．

### メトリクスとは
メトリクスはイベントから出された様々な情報を，扱える大きさに削減するための方法の一つだそうです．
といっても，分かりにくそうなので，メトリクスが具体的にどういった情報を指すのかというと，HTTPリクエストを受け付けた回数，リクエストの処理に使った時間，現在処理中のリクエストの数などが挙げられます．この辺りは実際にprometheusを使って取得した方がわかりやすいと思います．

### モニタリングとは
ここで，prometheusが行うモニタリングについて少し話しておきます．基本的には，アラート，デバッグ情報の提供，トレンド調査，修理のための部品提供を行なっています．こうした機能の詳細についてはまた後で書くつもりです．

# Prometheusを触ってみよう
そろそろ読むのも飽きてきた頃だと思うので，実際にprometheusを触ってみましょう．
## その前に環境
基本的にlinuxが推奨されてます．自分はmacユーザなのですが，今は便利な世の中なのでlimaっていうツールでlinux環境が簡単に用意できます．(この話も後日書こうと思ってます)
今回の記事ではlinuxを想定して書いていきます．

## 早速インストール
まず，インストールなのですが，これがかなり簡単です．
[こちら](https://prometheus.io/download/)のリンクからダウンロードできます．
おそらく拡張子が.tar.gzのファイルがダウンロードされるので，下記のコマンドで解凍し，そのディレクトリに移動します．
```
$ tar -xzf prometheus-*.linux-amd64.tar.gz 
$ cd prometheus-*.linux-amd64/
```

そして，prometheus.ymlというファイルに下記の設定があることを確認します．
```
global:
    scrape_interval: 10s
scrape_configs:
    - job_name: prometheus
      static_configs:
      - targets:
          - localhost:9090
```

# 実行してみよう
上の準備ができたら，./prometheusコマンドを実行するだけで自分のマシン上でprometheusを実行することができます．
```
$ ./prometheus 
ts=2022-11-09T13:33:57.316Z caller=main.go:512 level=info msg="No time or size retention was set so using the default time retention" duration=15d
ts=2022-11-09T13:33:57.316Z caller=main.go:556 level=info msg="Starting Prometheus Server" mode=server version="(version=2.40.0, branch=HEAD, revision=c08d76b363f0d8052f3d2298df06b616af30900e)"
ts=2022-11-09T13:33:57.316Z caller=main.go:561 level=info build_context="(go=go1.19.3, user=root@79e0ee4d5b14, date=20221107-18:11:08)"
ts=2022-11-09T13:33:57.316Z caller=main.go:562 level=info host_details="(Linux 5.15.0-47-generic #51-Ubuntu SMP Thu Aug 11 07:51:15 UTC 2022 x86_64 lima-default (none))"
...
```
ちなみに，ここで立ち上げたのはPrometheus本体です．つまり，監視する側であり，監視される側については今後の記事で書きます．
確認するには，http://localhost:9090 にアクセスすることで確認できます．
以下のような画面が出てくれば，成功です．
![スクリーンショット 2022-11-11 18.04.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2744507/cfc2df4b-3d3c-8709-1da7-441da53ed22b.png)

# まとめ
今回は，prometheusの導入から実行までやってみました．次回からは，実際のprometheusの使い方について書いていきたいと思います．
Google Cloud Professional Data Engineer勉強対策＆合格記

2022/10に受験して合格しました。
Google Cloud Professional Data Engineer合格記です

![download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317462/00cc8c4d-e2a4-053d-12f1-a193ae464306.png)

## Professional Data Engineerとは？
[公式サイト](https://cloud.google.com/certification/guides/data-engineer?hl=jay)より引用すると下記の通りです。
> Professional Data Engineer は、データを収集、変換、公開して、データに基づいて意思決定できるようにします。

## 筆者経歴
* GCPは未経験
* AWSは業務経験あり

## 試験対策
DL勉強、GCP勉強、試験対策の3段階で実施しました。

### DL勉強
下記Couseraを受講しました（Google Developer ML Bootcampに参加しているので、無料で受講できました。ありがとうございます）

https://www.coursera.org/specializations/deep-learning

### GCP勉強

下記の公式チュートリアルを行いました。
ラボは詰まりそうなところはやりました。

https://cloud.google.com/training/data-engineering-and-analytics?hl=ja#data-engineer-learning-path

### 試験対策
#### umedy

下記で試験対策しました。3回分の模擬試験がありますが3週しました。

https://www.udemy.com/course/google-cloud-professional-data-engineer-s/learn/quiz/5452330/results?expanded=837608238#reviews
 
#### 公式模擬試験

公式の模擬試験も実施しました。
最初は半分も解けなかったでしたが、全て正解になるまで行いました。

https://docs.google.com/forms/d/e/1FAIpQLSd4j4bcgbYenBRFIL6Kb0cvXp13qCQ-z6JzowgDxRaPITn56g/viewform?hl=ja


## 試験に関して

テストセンターとオンライン受験を選べますが、オンライン受験しました。
家で受けられるのはよいですね。
下記参考を見て、オンライン受験の雰囲気をつかんでおきました。
カメラの解像度が悪く、スタッフさんと色々やり取りが発生したので、環境周りで詰まるなどが嫌な方はテストセンター行ったほうがよいです

https://support.google.com/cloud-certification/answer/9907748?hl=ja

https://dev.classmethod.jp/articles/google-cloud-online-proctored-certification-report/

https://blog.g-gen.co.jp/entry/2021/12/24/090857

https://www.blog.danishi.net/2022/08/06/post-6149/


## 謝辞

Google Developers Machine Learning Bootcampに参加したため、オンライン講義料＆受験料を負担していただきました。
この場を借りて感謝申し上げます。
vscodeで[packages.Load error: err: exit status 2: stderr: go: no such tool "compile" go: no such tool "compile"]エラー発生したときの対処法

## 詳細
vscodeでgo.modにて以下エラー発生
```
packages.Load error: err: exit status 2: stderr: go: no such tool "compile" go: no such tool "compile"
```
![Screen Shot 2022-11-11 at 17.54.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323144/8a340e3b-dd58-2a10-5aba-1d65edf95488.png)

## 結論

### vscodeのsetting.jsonのgopathが間違ってた

ローカルの$GOPATHが
```bash
$ echo $GOROOT
/usr/local/go
```

なのに、vscodeのsetting.jsonで指定されたpathが`/usr/local/go/bin`なので事象発生してた

![Screen Shot 2022-11-11 at 18.00.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323144/a356d607-0d93-dd16-dfcb-4c53d6f9c722.png)

ローカルと同じGOPATHにしたら解決

![Screen Shot 2022-11-11 at 18.02.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323144/8902476b-2b72-c924-1d0a-4100d380b458.png)

## 原因
brewでインストールしたgoをアンインストールしたあと、公式サイトのパッケージのからインストールしたのでそれが原因
brewと公式サイトのパッケージではGOPATHが違うのにそれに合わせてvscodeのGOPATHを修正しないとエラー発生するという当たり前の話だった。
こうゆうのすごい単純なのに意外と気づかなくて沼ったので共有しました😂
ていうかそもそもsetting.jsonにGOPATHを設定する必要自体なさそう・・・。
Hexabase Dart/Flutter SDKの使い方（認証の永続化）

[Hexabase（ヘキサベース）](https://www.hexabase.com/)は企業向けのBaaS（Backend as a Service）を提供しています。認証やデータストア、ファイルストレージ、リアルタイム通知などの機能があり、企業向けのシステム開発に必要な機能をまるっと提供しています。

APIはREST APIとGraphQLを提供しています。そのAPIをラップしたSDKも開発を進めています。SDKは現在、TypeScriptとDart向けに開発しています。Dart向けのSDKは、もちろんFlutterでも利用できます。

この記事ではDart/Flutter SDKについて、認証の永続化に対応したので利用法を紹介します。

## パッケージとソースコード

パッケージはpub.devで公開しています。

[hexabase | Flutter Package](https://pub.dev/packages/hexabase)

ソースコードはGitHubにて公開しています。ライセンスはMIT Licenseです。

[hexabase/hexabase-dart: Hexabase SDK for Dart & Flutter](https://github.com/hexabase/hexabase-dart)

## インストール

インストールは `dart pub get` で行えます。

```
dart pub get hexabase
```

## インポート

SDKをインポートします。

```dart
import 'package:hexabase/hexabase.dart';
```

## 初期化

まずインスタンスを作成します。

```dart
var client = Hexabase();
```

別なファイルで再度インポートした場合には、以下でインスタンスを取得してください。

```dart
var client = Hexabase.instance;
```

## 認証

Hexabase Dart/Flutter SDKでは以下の2パターンによる認証を提供しています。

### メールアドレスとパスワードによる認証

```dart
var client = Hexabase();
client.persistence = Hexabase.persistenceLocal;
await client.login('you@example.com', 'password');
```

### Auth0を使った認証

```dart
// Auth0のトークンを用意します
await client.loginAuth0('AUTH0_TOKEN');
```

## 認証の永続化

認証をlocalStorageやNSUserDefaults、SharedPreferencesに保存する場合には、認証前に以下を実行してください。

```dart
// 永続化
client.persistence = Hexabase.persistenceLocal;
// 認証
await client.login(keys['email'], keys['password']);
```

## 認証状態の確認

認証状態を確認する場合は、 `isLogin` メソッドを実行します。この時にはセッションの有効性チェックも行うので、有効期限が切れていればfalseが返ってきます。トークンが無効な場合は、ローカルのセッションデータも削除されます。

```dart
if (await client.isLogin()) {
	// ログイン有効
	var user = client.getCurrentUser();
} else {
	// ログインしていない or トークンが無効
}
```

## ログアウト

ログアウトはログアウトAPIの実行、そしてローカルストレージの削除などを行います。

```dart
var user = client.getCurrentUser();
await user.logout();
```

## デモ

単純な認証デモを、以下のURLで試せます。認証はローカルストレージに残りますので、消す場合にはログアウトを行ってください。

[Zapp!](https://zapp.run/edit/flutter-zd180614d190?entry=lib%2Fmain.dart&file=lib%2Fmain.dart)

## ドキュメント

詳しい使い方はドキュメントをご覧ください。

[User | Hexabase SDK](https://hexabase.github.io/hexabase-dart-sdk-docs/docs/SDK/User)

## まとめ

Hexabase Dart SDKを使うことで認証処理はもちろん、認証状態の永続化も簡単に実現できます。ぜひお試しください。

Dart SDKはFlutterでも利用できます。Flutterで使えると言うことは、iOS/Androidといったスマートフォンアプリやタブレットアプリはもちろん、Webやデスクトップアプリ開発でも利用できます。ぜひHexabaseをDart SDKとともに活用してください。

[hexabase | Flutter Package](https://pub.dev/packages/hexabase)
AWS,Azureの構成図をdiagrams.net(旧draw.io)で作る

## 構成図ってどうやって作るん？？？
技術系の記事によく出てくるこういう図↓ の作り方がよくわからず、少しネットの海をさまよったので、メモ程度に残しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462497/8c43df25-7fa6-1bfc-c8a7-d091dc991a39.png)
[図の引用元](https://aws.amazon.com/jp/builders-flash/202204/way-to-draw-architecture/?awsf.filter-name=*all)

## なんてツール？
[**diagrams.net (旧draw.io)**](https://app.diagrams.net/)を使って書きます。
このツールは、Web上などで↓のようなデザインを書くことができ、データはローカル上、クラウド上(Google Drive,GitHubなど)に保持することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462497/3b8b2e89-f628-13fb-ac2d-c3fb51f0b821.png)


diagrams.net (旧draw.io)は、VSCodeに拡張機能があり、VSCode上でも編集することができます。
私は、「[Draw.io Integration](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio)」という拡張機能を入れて、使っています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462497/b151459c-8f0a-2fbe-03b2-5e755d96a1b2.png)

## AWS,Azureの構成図の書き方
VSCodeで書きます。
ファイルの形式を.drawioとし、ファイルを作ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462497/17908a47-1392-6027-5a6c-af33212d09e3.png)
編集画面の左下に「その他の図形」とあるのでクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462497/1746b964-efef-2ad1-165d-a428355c30a1.png)

ポップアップが出てくるので、AWS,Azure好きなものを選び、適用しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462497/ea1c0cee-b19f-be80-79e7-dc22e909a114.png)

すると、左の図形メニューにいっぱいAWS,Azureっぽいパーツが出てくるので、これを利用して書きましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462497/575d0fdd-4675-5dc3-6823-295dfee8a35b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462497/aafb9f2f-7108-ea14-97f0-7219940c43d7.png)

## 画像として保存する
編集画面の左上のファイルメニューから、「Export」をすることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462497/a62357de-22de-aa18-0ece-cece887186e7.png)
svg,pngが選べるので、好きなもので保存しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462497/e01ffb65-1ca5-1274-2aa6-9ee99f939b40.png)


## おしまい
おしまい！構成図これで書こう！