OmniAICreator/Qiita-1.07M huggingface dataset:
Azure P2S VPNの証明書認証の仕組みと運用について

Azure P2S VPNの証明書認証に関する仕組みと運用について書いてみようと思います。
本記事も以前の記事の派生になります。
派生元の記事はこちらです。
最初の記事[AWS Client VPNとAzure P2S 機能比較 01~AWS Client VPN構築編01~](https://qiita.com/hidekko/items/5dc7de8f3cde645959b2)
2番目の記事[AWS Client VPNとAzure P2S 機能比較 02~AWS Client VPN クライアントPC設定編~](https://qiita.com/hidekko/items/c7e65dbd5985ec260c9f)
3番目の記事[AWS Client VPNとAzure P2S 機能比較 03~Azure P2S構築編~](https://qiita.com/hidekko/items/0ba2fb85b6c89da5fe84)
4番目の記事[AWS Client VPNとAzure P2S 機能比較 04~Azure P2S クライアントPC設定編~](https://qiita.com/hidekko/items/44bb46daf35d3ba91b41)

# Azure P2S VPNで使われる自己署名証明書について
[こちらの記事](https://qiita.com/hidekko/items/0ba2fb85b6c89da5fe84#1-2-%E3%83%AB%E3%83%BC%E3%83%88%E8%A8%BC%E6%98%8E%E6%9B%B8%E3%81%A8%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88%E8%A8%BC%E6%98%8E%E6%9B%B8%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B)で記載しているPowerShellで作成される証明書は自己署名証明書です。

## 証明書って？
通常インターネット上で利用される証明書はエンタープライズ証明書と呼ばれるもので、第三者証明機関が証明書に記載されているドメインの正式な所有者の存在を様々な方法で認証する仕組みです。
様々な方法とは具体的に3つあり、ドメイン認証、企業存在認証、EV認証、の3つです。

|認証レベル|認証項目|発行速度|価格|
|---------|-------|-------|----|
|ドメイン認証|ドメイン名の利用権|早い|低価格|
|企業存在認証|ドメイン名の利用権、組織の法的実在性|中くらい|中価格|
|EV認証|ドメイン名の利用権、組織の法的実在性、組織の運営、承認者・署名者の確認|遅い|高価格|

これはエンタープライズ証明書なので今回は無関係ですが、今回調べてみてEV認証を初めて知りましたので記載しておきます。

## それで自己署名証明書って？
エンタープライズ証明書ではなく、第三者認証されない証明書です。
PowerShellで作成されるのはこの自己署名証明書です。

## 自己署名証明書って安全なの？
何をもって安全とするか、ですが、当然エンタープライズ証明書の方が安全ですが、P2S VPN接続に於いて行われている認証という点だけでいえば自己署名証明書でも安全です。
ここで結局**何をもって安全とするか**という話になるのですが、ここで運用の観点が入ってきます。

## 実際にどういう点で運用が関連するの？
ユーザがクライアント証明書を盗まれた、クライアント証明書をインストールされたパソコンを紛失した、といった、<font color="Red">クライアント証明書が外部に流失した</font>という場合を考えると非常にわかりやすいです。

## クライアント証明書が紛失したらどうなるの？対処としてどういう運用が正しいの？
<font color="Red">クライアント証明書を紛失した＝社外の人が社内にアクセスできるようになる</font>
非常にまずい状況ですね。
<font color="Red">**ですので、この紛失したクライアント証明書に対応するルート証明書を失効させます。**</font>
実際のパラメータでいうと下図の<font color="Red">赤枠</font>ですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643392/ab6da128-0d17-f859-1c77-54b7108cafd1.png)
これでどういうことが起きるかというと、この失効したルート証明書に対応するクライアント証明書はP2S VPN接続時に行われる証明書認証時に<font color="Red">**失効済み証明書**</font>として扱われ、認証に失敗してVPN接続が確立しません。

## じゃあどういう設計、運用が正しいの？
クライアント証明書、ルート証明書を1セット作って、全P2S VPN利用ユーザでこのクライアント証明書を使いまわす、という設計、運用も可能ですが、上述のクライアント証明書の紛失を考慮すると1ユーザずつクライアント証明書、ルート証明書を作成して、どのユーザがどのルート証明書(に対応するクライアント証明書)を利用しているか管理し、ユーザの退職やクライアント証明書の社外流失が判明した時点で失効させる運用が正しいと言えます。

本日はここまで。
配列要素をループ処理（JavaScript）

こんにちは。

配列の要素をループ処理する方法を調べました[^1]。

#### そのまま for of ループさせる
```javascript
for (const e of arr) {
  console.log(e);
}
```

#### インデックスで for ループさせる
```javascript
for (let i = 0; i < arr.length; i++) {
  console.log(i, arr[i]);
}
```

* なお下記（for in ループ）もインデックスでループさせていますが使用上注意が必要とのことです。
```javascript
for (const i in arr) {
  console.log(i, arr[i]);
}
```

#### 全要素を処理（ループではない）
```javascript
arr.forEach((e, i) => 
  console.log(i, e)
);
```

```forEach``` と ```map``` がこのタイプです。```break```できません。callbak 関数の第二引数で index が得られます。

#### Object.entries() を介して for of ループ
```javascript
for (const [i, e] of Object.entries(arr)) {
  console.log(i, e);
}
```
* Object.entries() は ```[key, value]``` を要素とする配列を作ります。したがって配列を与えれば```[index, element]```を要素とする配列を作ります。

#### Array.prototype.entries() を介して for of ループ
```javascript
for (const [i, e] of arr.entries()) {
  console.log(i, e);
}
```

* Array.prototype.entries() から得たイテレータを for of ループさせています。


[^1]: 参考：「[JavaScript の Array 処理はどれが速いのか？ (2021 年 12 月)](https://qiita.com/sg0hsmt/items/85dc1857b259ce7f2b25)」、「[JavaScriptのfor速度比較が意外な結果だったのでシェアしてみる](https://qiita.com/Hibikine_Kage/items/660392270c466b3f9805)」、「[2019年版: JavaScriptのループの考察](https://qiita.com/shibukawa/items/4cae2a1410754d519232)」、「[JavaScript で forEach を使うのは最終手段](https://qiita.com/diescake/items/70d9b0cbd4e3d5cc6fce)」、「[for ... of 文でインデックス(index)の値を使う方法](https://qiita.com/TakahiRoyte/items/dca532dd64bc782ad849)」
ループ制御文（break、continue）を使って演習

# 問題
1から10までの和を求める処理を行ってください。ただし計算の途中で合計値が30以上となった場合は 繰り返しを中断し、現在の値を出力するプログラムをbreakを使用して作成してください。

```java
public static void main(String[] args) {
	int sum = 0;
	for (int i = 0; i <= 10; i++) {
		if (sum >= 30) {
			break;
		}
		sum += i;
	}
	System.out.println("合計:" + sum);
}

//演算結果
//合計:36

```

# 問題
for文とcontinueを使用し、0~10までの奇数のみを表示します。ただし9は出力しないよう作成してください。

```java
public static void main(String[] args) {
    final int BREAK_NUM = 9;
	for (int k = 0; k <= 10; k++) {
		if (k == BREAK_NUM) {
			break;
		}
		if ( k % 2 == 0) {
			continue;
		} 	
		System.out.println(k);
	}
}
//演算結果
//1
//3
//5
//7

```

# 補足
- breakは以降の処理をスキップして繰り返しを終了する。
- continueは以降の処理をスキップして繰り返しの先頭に戻る。
※ループカウンタに対する処理（インクリメントなど）は実行される。
【Playdate】日本語英語テキスト切り替えサンプル

![0sample_playdate.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100912/5090bc3a-777e-1bbf-835e-9a9b0190e69e.gif)
playdateはインターフェースは英語ですが、ゲームを自作する際日本語ローカライズファイルを用意すればゲーム内の言語切替を実装することが可能です。
言語切替はゲーム内で変更するよう実装することも可能ですが、playdateのシステムメニュー内で日本語英語テキストの切り替えができるサンプルを作ります。
今回も[こちら](https://qiita.com/sada_lp1/items/1751040555361bae33b7)をベースにして作成します。

## 英語・日本語文字列ファイルの作成

Playdateのローカライズは、`source`ディレクトリのルートに配置した`en.strings``jp.strings`という文字列ファイルを使用します。
まず`source`ディレクトリのルートに`en.strings``jp.strings`を作成します。

```
myProjectName/
    source/
        main.lua
        en.strings  ← 追加
        jp.strings  ← 追加
        Images/
            playerImage.png
            background.png
```

それぞれファイル内にキーと値を記述します。

```en.strings
"HELLO" = "HELLO!"
```

```jp.strings
"HELLO" = "こんにちは!"
```

## ローカライズ設定とローカライズテキストの読み込み

次に`main.lua`を編集します。

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

local gfx <const> = playdate.graphics

local playerSprite = nil

-- 追加ここから -----------------------
-- 現在の言語
local lang = "jp" -- jp | en
-- システムメニュー
local menu = playdate.getSystemMenu()
local options = {
	"jp", "en",
}
local menuItem, error = menu:addOptionsMenuItem("Language", options, "jp", function(value)
	lang = value
	-- 再描画
	gfx.sprite.redrawBackground()
end)
-- 追加ここまで -----------------------

function myGameSetUp()

	local playerImage = gfx.image.new("Images/playerImage")
	assert( playerImage )

	playerSprite = gfx.sprite.new( playerImage )
	playerSprite:moveTo( 200, 120 )
	playerSprite:add()

	local backgroundImage = gfx.image.new( "Images/background" )
	assert( backgroundImage )

	gfx.sprite.setBackgroundDrawingCallback(
		function( x, y, width, height )
			backgroundImage:draw( 0, 0 )
			
            -- 追加ここから -----------------------
			-- テキスト表示
			gfx.setImageDrawMode(gfx.kDrawModeFillWhite) -- 文字色が黒いので白くする
			gfx.drawLocalizedTextAligned("HELLO", 200, 80, kTextAlignment.center, lang)
			gfx.setImageDrawMode(gfx.kDrawModeCopy) -- 着色せず描画する
            -- 追加ここまで -----------------------
		end
	)

end

myGameSetUp()

function playdate.update()

	if playdate.buttonIsPressed( playdate.kButtonUp ) then
		playerSprite:moveBy( 0, -2 )
	end
	if playdate.buttonIsPressed( playdate.kButtonRight ) then
		playerSprite:moveBy( 2, 0 )
	end
	if playdate.buttonIsPressed( playdate.kButtonDown ) then
		playerSprite:moveBy( 0, 2 )
	end
	if playdate.buttonIsPressed( playdate.kButtonLeft ) then
		playerSprite:moveBy( -2, 0 )
	end

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

end
```

## 簡単な解説
Playdateのシステムメニューの編集は、`playdate.getSystemMenu()`でメニューオブジェクトを呼び出します。
次にメニューオブジェクトのメソッド `menu:addOptionsMenuItem` を使い、メニュー名と変更値の指定を行うようにしています。
サンプルでは`lang`という現在の言語設定を管理する変数に、言語を切り替えるたび格納し、更に画面の再描画を行っています。

ローカライズテキストの表示は `gfx.sprite.setBackgroundDrawingCallback` メソッド内に記述している
`drawLocalizedTextAligned`メソッドで指定しています。
第一引数に 各stringsファイルに記述したキーを指定、第二第三引数がxy座標、第四引数テキストの寄せ、第五引数が言語指定となります。
前後に`setImageDrawMode`メソッドで描画モードの指定をしているのは、文字が黒く表示されるため背景と同化しないにするためです。
白塗りで描画するよう設定し、テキストを描画した後、描画を元の塗りのまま描画するよう設定しています。
AWS認定SysOpsアドミニストレーター アソシエイト（SOA-C02）合格したので勉強方法メモ

# はじめに
2022年12月4日にAWS認定SysOpsアドミニストレーター アソシエイト（SOA-C02）を受験して何とか合格できました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Sysopsアドミニストレーター アソシエイト受かってた！よかった✨ <a href="https://t.co/YcW9Okax3Z">pic.twitter.com/YcW9Okax3Z</a></p>&mdash; taka@フリーランスなインフラエンジニア (@TAKA_INFRA) <a href="https://twitter.com/TAKA_INFRA/status/1599385918527635456?ref_src=twsrc%5Etfw">December 4, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


SAAの勉強方法はかなり情報がありますがSysOpsアドミニストレーター アソシエイトはSAAに比べると少ないため参考になれば思い、自分自身の勉強方法を書いておきます。

# 学習方法
1. TechStock(旧Koiwa)
2. AWS サンプル問題
3. AWS認定資格試験テキスト
4. 試験ラボサンプル

勉強時間は全体でおよそ40時間ぐらいでした。比率は6:1:2:1ぐらいです。
今回はUdemyやTutorials Dojoは使いませんでした。

## TechStock(旧Koiwa)

https://techstock.jp/

一番時間をかけたのはTechStock(旧Koiwa)による問題演習です。問題数も豊富ですし、実際の試験にもほぼ同様の問題が何問で出題されておりました。

問題数は現在98セット(1セット=7問)とかなりの数がありますが、前半は少し古い内容ですので#51以降の問題をこなすとよいと思います。

ちなみに私はTechStockでは下記の流れで勉強しました。

1. #51~移行の問題を2周。2周目に間違えた問題はお気に入り登録
2. お気に入り登録した問題だけ1周　⇒間違えた回答を読み込む
3. お気に入り登録を全削除
4. 本試験モード1周
5. 本試験モードの履歴から間違えた問題を見直し⇒間違えた問題はお気に入り登録（ワンボタンでできます）
6. お気に入り登録した問題1周
7. お気に入り登録を全削除
8. 3~7を繰り返して9割以上を安定できるようにする

## AWS サンプル問題

AWSサンプル問題URL
https://d1.awsstatic.com/ja_JP/training-and-certification/docs-sysops-associate/AWS-Certified-SysOps-Administrator-Associate_Sample-Questions.pdf

10問の選択式問題と試験ラボが大問1問のサンプルが公開されています。すべての問題に解説が載っているため必ず目を通しておきましょう。

試験ラボ問題は、画面含めてこんな雰囲気だというのを見ておくとよいです。


## AWS認定資格試験テキスト

AWS認定資格試験テキスト AWS認定SysOpsアドミニストレーター - アソシエイト
https://www.amazon.co.jp/dp/481560908X

AWS認定SysOpsアドミニストレーター - アソシエイト AWS認定資格試験テキストの巻末模擬試験に選択式問題と試験ラボが載っています。

試験ラボが心配な方はこの書籍の模擬問題も合わせてやるとかなり安心だと思います。参考書としてもSysops試験を体系的に学習できるためおすすめです！

## 試験ラボサンプル
Sysops試験に申し込みをすると、試験ラボのサンプル問題が受講についてのメールが届きます。

試験を受けたあとなので、改めて実感しましたが、この試験ラボサンプルは必ず受けた方がよいです。試験の雰囲気がよく分かります。

実際の試験ラボでは仮想環境上でAWSコンソール画面を操作することになります。サンプルでも同様に仮想環境にアクセルして問題を解く過程が体験できます。

サンプル試験ラボでは最大3回まで問題を受けることができます（3回とも同じ問題内容です）

1回目は雰囲気をつかんで、2回目は全問題の回答、3回目は任意ぐらいで受けるとよいでしょう。

操作に不安なサービスがあればとにかくハンズオンや自身のAWSアカウントで操作して慣れておきましょう。

ちなみに試験ラボではGoogle検索やAWSドキュメントの閲覧はできないので注意です。

# 時間ペース配分

SysOpsアドミニストレーター アソシエイトの試験時間は180分です。この時間内で選択式問題と試験ラボ（大問は2問または3問）を回答しないといけません。

また選択式問題を回答して試験ラボに移ると、選択式問題には戻れなくなります。さらに試験ラボ大問1を回答して試験ラボ大問2に移ると今度は試験ラボ大問1には戻れなくなります。

そのため試験時間の配分ペースを少し考えながら回答しなければなりません。

公式の推奨では試験ラボ大問1つにつき20分を充てることが推奨されています。余裕を持って30分ぐらいと考えると試験ラボには1時間ぐらいは残しておくとよいでしょう。

ちなみに私のペース配分は下記でした。

|  |予定ペース  |実際ペース  |
|---|---|---|
|選択式問題  |90分  |58分  |
|試験ラボ大問1  |45分  |38分  |
|試験ラボ大問2  |45分  |33分  |
|Total| 180分 | 129分(51分余り)|

急がずに回答してこのペースだったので焦る必要はないと思います。確実に回答しましょう。

# 試験ラボ回答中に起きたこと

試験ラボは仮想環境のため挙動が怪しくなることがあります。以下は私が回答中に発生したことです。

1. コンソール上で作成ボタンを押しても反応ない　⇒もう一度作成ボタン押す
2. ボタンを押して画面が切り替わっても作成できていない場合がある　⇒もう一度ボタン押す
3. EventBridgeでルール作成を行うと、なぜかポリシーが足りないエラーが表示される　⇒1~2分後にルール一覧を見るとルールは作成されている
4. ALB削除後に画面をリフレッシュして削除されたことを確認してから、再度ALBを作成しようとすると同じ名前のALBが存在するエラーが表示される　⇒1~2分後にもう一度作成すると正しく作成された

テストセンターでの受験でしたがかなりタイムラグがあることが分かります。頭の片隅にでもおいておきましょう。
  

# おわりに
個人的にはSAAよりもSysopsの方が試験ラボ含めて難しく感じました。実機での操作経験が点数に表れやすい試験だと思うのでしっかりと対策しておきましょう。
受託アジャイルで変わる大日程の組み立て方

# はじめに

- 工程以外の基準でスケジュールを考えることになるよ。という話。
- タイトルは大日程って言って書いてるけど、まぁ優先順位の考え方の話だよ。
- 「アジャイルは計画立てない」みたいな話もあるけど、それでうまくいくと思える状況ならそうすればいいし、うまくいかないと思うなら多分うまくいかんよ。
- 受託アジャイルの現場は、ウォーターフォールPJと足並み揃える場面などもあり、そこに向けた準備等も考えると、ある程度中長期的なスケジュールイメージはあった方が良いと思ってるよ。

# 先人の知恵

https://www.ryuzee.com/contents/blog/7147

大日程の考え方以外にも色々書いてあるけど、ボリュームが多いので、今回は大日程の話だけ。

# 実感としてのウォーターフォールとの違い
## 工程はスケジュールの前提にならない

ウォーターフォールの案件を考えると、基本的には設計→製造→テスト→移行といった流れで考えることが多いのですが、アジャイルだとその必要性がなくなります。
そもそも１スプリントで設計〜リリースまでやることを目指すのであれば、工程云々はどうとでもなります。（実際はどうともならん部分はあるが）

## 何を目的にアジャイルを選択したのかが重要
### 要件の不確実性
ニーズが不明、結果として要件が不明、市場にリリースしないとニーズすら測れない。
そういったものであれば、MVPの整理などから入っていくことでしょう。
多くのアジャイルがこのタイプだと思っています。
先人の知恵にあげた記事もこの前提で記載されています。

「市場で何を優先的に検証していくのか？」というビジネス上の優先順位判断がポイントになります。
何かしらのマイルストーンなどもあるでしょう。このキャンペーンは来年の夏に間に合わせたい！とか。

### 実現方法の不確実性
要件はある程度明確だが、どのようにそれを実現していいかわからないケース。
なかなかニッチなケースだとは思いますが、今の現場がまさにそうなので、意外とあるもんだな、という印象。

（今の案件ではないですが）オンプレ基盤が保守できなくなったので、クラウドに移行したい。といったときに、クラウド都合に合わせてアプリを作り替えるケースなどはあります。
クラウドサービスなどは実装してみないと細かい挙動が不透明な部分が多く、ウォーターフォールの場合PoCなどで事前に潰し込むことも多いと思います。

この場合は技術的リスクを先に潰し込むことを求められます。
見通し精度をどんどんあげていくためにはリスクが高い部分を先に食わないと、ずっと見通しは不透明なままです。

### 後回しにされがちだけど優先すべきだと個人的に思ってること

「移行・リリース」あたりは特に優先するべきだと思ってる。
受託アジャイルとかだと、リリースタイミングが固定化されていて、後回しになるケースもあると思う。

でも、移行・リリースこそが一番魔物が潜むタイミングなのはみんな実感してるはずなので、とにかく空っぽでもいいからリリースした方が良いと思ってる。
外部公開はしなくてもよい。ただ定期的にリリースできる仕組みは整えておくのが良い。

DevOps界隈でもよく言われる話。
ここら辺はもう少し深掘りして書きたいので別の記事として書きます。


# とはいえ、本質的なところはウォーターフォールと変わらない
うだうだ書いたけど、結局は

1. PJとして目指していることを明確にする
1. 「提供すべき価値」「リスク」を洗い出す
1. 「ビジネス観点でのイベント」「各種マイルストーン」を整理して中期的なターゲットを明確にする
1. 「工程」にこだわりすぎずに線を引く

という話。最後だけが特徴的なだけで、本質的な考え方はそう大きく変わらないはず。

# 受託アジャイルでの実際
これが全てではないと思いますし、あくまで一例としてみてください。

**大きな分類**

「開発スプリント」「リリーススプリント」の二種類がメジャーですけど、場合によってはもう少し細かくしてもいいと思います。
結合テストやシステムテストをどちらに含めるかはPJによって決めればいいと思いますが、結合テストは開発スプリントに、システムテストはリリーススプリントに入れてます。
ただ、結合テストやシステムテストが意味するところもPJによって違う気がするので、この例にいかほどの意味があるかはよくわからん。

**ウォーターフォール案件と足並みを揃える**

アジャイル開発側だけの都合だけでスケジュールは組めないことが多いです。
足並みを揃えることがある程度求められてきます。
外部接続テストなどのタイミングなどは考慮する必要が出てくるでしょう。

そういう意味で、ある程度ウォーターフォールライクなスケジュール表の作成は必要にかられる場面はあるかと思っています。


# まとめ

- スケジュールの考え方の基本はウォーターフォールと本質的なところは変わらない
- 「工程」という制約は少し緩くなるので、自由度が増す。（その分納得するのが難しくなる）

**あくまでもサンプルとして**

ちょっと実例持ってくるの微妙な予感したので、だいたいのイメージで。

- 「要件定義〜システム内結合テスト」をサイクリックに回す「開発スプリント」の単独線をしばらく走らせる。チームの成長やスケールも合わせて考える。
- 「システム外結合テスト・システムテスト」などの「リリーススプリント」は、移行のタイミングや審査の内容に合わせて考える。（必要に応じて都度やる）
- ウォーターフォールPJと足並み揃えるようなマイルストーンがあるなら、そこに向けての整理も必要。

この記事薄いかなぁ・・・
でもこれ以上具体的に書こうとすると結構PJの個別事情を話さないと意味わからんくなるのと、その場合の塩梅がちょっと見つかんないので、許して・・・

# 次回予告

次回は「スクラムマスターとしてファシリテーションするときに注意していること」を書きます。
Processing でオーディオインターフェースから入力をする

　この記事は[N・S高等学校 Advent Calendar 2022](https://qiita.com/advent-calendar/2022/n-s-highschool)の10日目です。

　私はN/S高等学校の職員で12月まで通学プログラミングコース代々木のメンターを担当していました。通学プログラミングコース（通称プロクラ）はプログラミングを活用したものづくりを通して学ぶ環境で、作りたいものが具体的にある方には最適な環境かと思います。[N/S高等学校 通学プログラミングコースの公式 Twitter アカウント](https://twitter.com/procla_official)(https://twitter.com/procla_official) もあるので、ぜひチェックしてみてください！

# TL;DR
　N/S高等学校の通学コース（通学プログラミングコースを含む）では、「キャンパスフェスティバル」という、いわゆる文化祭にあたるイベントが全国各地にあるキャンパスで実施されます。
　プロクラ企画としても作品展示などを行なっていて、私も今年度はタイトルにあるようにオーディオインターフェースから入力を取り、Processing でビジュアライズする作品を作って出品しました。
![スクリーンショット 2022-12-02 23.45.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13938/d21b6443-31e5-75df-dfdf-52264b04cc31.png)

　ソースコードは [GitHub](https://github.com/satoyuichi/GuitarVisualEffects)(https://github.com/satoyuichi/GuitarVisualEffects) で公開しています。

　この作品を開発するにあたり、オーディオインターフェースを利用する記事が見当たらなかったため要点を記事にすることにしました。

# 実装環境
　今回の実装環境は以下の通りです。
+ macOS Monterey 12.6
+ Processing 4.0.1
+ [Soundライブラリ](https://processing.org/reference/libraries/sound/index.html)(https://processing.org/reference/libraries/sound/index.html)

# オーディオデバイスを列挙する

```java
import processing.sound.*;

void setup() {
  Sound.list();
}
```

　このようにするとコンソールに以下のように出力されます。同じデバイス名が複数ある場合は、`max　inputs` が 1 以上の `device id` の番号が候補になります。例えば以下の場合は、3, 5 になります。
```text
device id 0: Port LCD-DF241SXV
  max inputs : 0
  max outputs: 0
device id 1: Port iMacのマイク
  max inputs : 0
  max outputs: 0
device id 2: Port iMacのスピーカー
  max inputs : 0
  max outputs: 0
device id 3: Default Audio Device
  max inputs : 1   (default)
  max outputs: 2   (default)
device id 4: LCD-DF241SXV
  max inputs : 0
  max outputs: 2
device id 5: iMacのマイク
  max inputs : 1
  max outputs: 0
device id 6: iMacのスピーカー
  max inputs : 0
  max outputs: 2
```

# オーディオデバイスを選択する
　オーディオデバイスは`Sound.inputDevice(deviceId)`で選択できます。先ほどのリストでPCのマイクを選択する場合は以下のようになります。同じようにオーディオインターフェースの番号を指定すれば、そのデバイスが選択されます。
```java
import processing.sound.*;

void setup() {
	Sound sound = new Sound(this);
	sound.inputDevice(5);
}
```

# 信号を取り込む
　信号を取り込むには`AudioIn`クラスのインスタンスを作成し、`start()`メソッドを呼ぶことで信号の取り込みが始まります。
```java
import processing.sound.*;

void setup() {
	Sound sound = new Sound(this);
	sound.inputDevice(5);

	audioIn = new AudioIn(this, 0);
	audioIn.start();
}
```

# 信号解析をする
　信号解析、例えばフーリエ解析をしたい場合は`FFT`クラスのインスタンスを利用します。例えば以下のようになります。

```java
import processing.sound.*;

FFT fft;
int bands = 512;
float[] spectrum = new float[bands];

void setup() {
	Sound sound = new Sound(this);
	sound.inputDevice(5);

	audioIn = new AudioIn(this, 0);
	audioIn.start();

    fft = new FFT(this, bands);
    fft.input(audioIn);
}

void draw() {
    fft.analyze(spectrum);

    //　以下、配列spectrumから数値を取り出す
}
```

　他の解析をしたい場合も同じようにSoundライブラリの各種クラスを利用して解析をすることができます。その他の解析器などについては[Soundライブラリのマニュアル](https://processing.org/reference/libraries/sound/index.html)(https://processing.org/reference/libraries/sound/index.html) を参照ください。
　実際の活用方法は先のGitHubで公開しているソースコードも参考にしてみてください。

# オーディオインターフェースから入力できない場合がある
　原因が特定できていないのですが、正常に動作しない場合が確認されています。　
- iMac21,1
- macOS 12.6 (21G115)
- Darwin 21.6.0
- USB ハブ
- ZOOM AMS-24 ← オーディオインターフェース

特にエラーは出ていないので、オーディオインターフェースからの信号の大きさの問題かもしれません。
do-while文を使って演習

# 問題
配列を宣言し、以下の要素を格納してください。「新宿」が出るまで出力してください。
継続条件にboolean型を使うこと。

```java
public static void main(String[] args) {	
	String [] Tokyo = {"中央", "渋谷", "葛飾", "江戸川","新宿", "台東", "中野", "世田谷"};
	boolean isContinue = true;
	int i = 0;
	do {
		if (Tokyo[i].equals("新宿") ) {
			isContinue = false;
		} else {
			System.out.println(Tokyo[i]);
		}
		i++;			
	} while (isContinue);	
}

// 演算結果
// 中央
// 渋谷
// 葛飾
// 江戸川

```

# 補足
- do-while文は後に継続条件を書く。
→必ず1回は処理する。
- カウンタ変数はブロックの外で定義する。
- 配列は「データ型　[]　変数名」もしくは「データ型　変数名[]」で定義する。要素の代入も同時に行える。
- 配列の要素番号は０，１，２，・・・となるので要素数―１となる点に注意。
- 文字列の等価判定はequals()を使う。
- boolean型を継続条件に使うと、trueの場合継続することになる。
始めてのiOS

初めてiOS開発環境はmacOS上で導入した。
　
今一歩、iOSでアプリを作る気力が起きなかった。

当時は、iPhoneは使っていたが、Line機材としてだけだった。　

ブラウザでもあまり入力をすることがなかった。

最近、スマフォだけで仕事をしようとした。　

一覧：携帯計画者日記（0）

https://qiita.com/kaizen_nagoya/items/005d38c6f55c85570e74
　
以前より操作方法は慣れてきた。　
仕事で使えるところまで来ていない。　

Siriも少し使った。声がでなくなり、少し利用から遠ざかった。

iOS(iPhone)を何のためにどう使うかが見定まっていない。

初めてiOSのプログラミングをした時は、macOSとの共通部分にしか興味がなかったのが敗因かもしれない。

# 50歳からのプログラミング言語入門。docker(152)

https://qiita.com/kaizen_nagoya/items/5c7cec79cb3b15237076

Objective Cの勉強する時に、IOSとmacOSに共通のアプリ設計を学んだ。　

Apple(iPhone, iOS, Mac, macOS)の歴史を振り返る

https://qiita.com/yum_fishing/items/c8180a3ab7db5af38082


 <この項は書きかけです。順次追記します。>

# 「今後が絶望的な5つのプログラミング言語とは？」記録

https://qiita.com/kaizen_nagoya/items/8dde93e91710e4c22c72

Ruby
R
Objective-C
Haskell
Perl

## 自分の好きな順　

R, Objective-C Ruby, Haskel, Perl 

## 自分がよく使う順　
R, Ruby, Haskel, Objective-C, Perl


# これから試す資料

[macOS][iOS]EventKitを試す

https://qiita.com/m_yukio/items/cb552a4b9d571128a315

[macOS][iOS]iCloud Driveに文書を格納する

https://qiita.com/m_yukio/items/ca256423369246fe5cdf


# 参考資料　
CPUの歴史と言語・OS・ネットワーク＜書きかけ＞

https://qiita.com/kaizen_nagoya/items/0148d8a07dfea115dbbe

[macOS][iOS]SwiftでFrameworkを実装する

https://qiita.com/m_yukio/items/d01b9bbf20ad74d7237f

[macOS][iOS]iCloudドキュメント・ストレージに書き込む

https://qiita.com/m_yukio/items/1e9d48173fc0670e4c17

iOS / macOS どちらでも使用できる UIKit/AppKit クラスの定義を考える

https://qiita.com/daisuke-t-jp/items/270e1359071a0e865acf

 ＜この記事は個人の過去の経験に基づく個人の感想です。現在所属する組織、業務とは関係がありません。＞

# 文書履歴(document history)
ver. 0.01 初稿 20221205















50歳からのプログラミング言語入門。docker(152)

https://qiita.com/kaizen_nagoya/items/5c7cec79cb3b15237076
### 最後までおよみいただきありがとうございました。

いいね　💚、フォローをお願いします。

####  Thank you very much for reading to the last sentence.

Please press the like icon 💚　and follow me for your happy life.
[windows][volta]windowsのnodeバージョン管理ツールとしてvoltaを利用してみた。

# 初めに
普段はmac使ってるんですけど、たまたまwindowsでコードを書く機会があってその時にvoltaを利用したので使い方を簡単に残します。
補足・間違いなどがあればコメントいただけると幸いです🙇
他に便利と思った内容は加筆していきます〜✨

## インストール
[こちらのリンク](https://docs.volta.sh/guide/getting-started)にあるWindows Installationの「download and run the Windows install」のリンクからインストーラーをダウンロードして実行してください。
インストール後にコマンドプロンプトを開いて以下のコマンドを入力しましょう。バージョンを表す数字が返ってくればOKです。
```
volta  -v
```

## nodeのインストール
以下のコマンドでnodeをインストールすることができます。
```
volta install node@(バージョン)
```
具体的にはこんな感じです！バージョンを指定しない場合は最新版がインストールされます。
```
volta install node@15
```

## バージョン確認
```
volta list node
```
でインストールされているnodenのバージョンを一覧で確認することができます！こんな感じになります！
```
C:\Users\orenonamae>volta list node
:zap:️ Node runtimes in your toolchain:
    v14.21.1
    v15.14.0 (default)
C:\Users\orenonamae>
```

### defaultバージョンの切り替え
切り替え専用のコマンドは用意されていないようで、前述の
```
volta list node@(バージョン)
```
をすることにより、変更することができます！

## バージョンの固定
プロダクトごと（ディレクトリごと）にnodeのバージョンを固定することもできます。
```
volta pin node@(固定したいバージョン)
```
gdbに文字列をそのまま出力させる設定

あるプログラムをgdbでデバッグしているときに，16進数の文字列表現が入っている文字列を確認したら以下のように表示されました．

```
(gdb) print some_string
$1 = 0x55eda9605f90 "55aa", '0' <repeats 29 times>, "46f", '0' <repeats 28 times>, "107c00000202", '0' <repeats 76 times>, "1", '0' <repeats 47 times>...
```

文字列全体を表示してくれてないし，なんやこの繰り返し表現は．
文字列全体を表示し，変な繰り返し表現をさせないように，`.gdbinit`に以下の設定を追加

```
set print elements 0
set print repeats 0
```

そんでさっきと同じことをやってみる．

```
(gdb) print some_string
$1 = 0x558eb89130a0 "55aa0000000000000000000000000000046f0000000000000000000000000000107c0000020200000000000000000000000000000000000000000000000000000000000000000000000000001000000000000000000000000000000000000000000000000000000000000000000000000000000000000000ac79cfd1f71772b1fe3f99f7cffb849a209afd3f35c26821a2da0fc90040bcf0175c293baab8ff3ffe8a1bcd4b789ad400400000000000000080ff3f7f030000000800000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000801f0000"
```

これでいいのだ．
POAP の紹介

[SBT：譲渡不可 NFT の紹介](https://qiita.com/blueplanet/items/23385c773ee0759ad821) で説明した vitalik の Soulbound タイトルの記事にも出ていて、`proof of attendance protocol` 出席証明プロトコルの略語であり、ズバリ「参加証明バッチ」です。
EIP ではなく普通に[１つのサービス](https://poap.xyz/) の実装になっています。

![Screen Shot 2022-12-05 at 21.22.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4777/464a4e00-3ee9-b89d-ae02-2c7be8b028e0.png)

## 使い方
[poap.xyz](https://poap.xyz/) サービスの内容としては、
- イベント主催側はイベントを登録してイベントを公開する
- 参加側はイベントページに行って、NFT を mint する
- もらった NFT はサイト上で確認できて、もちろん自分のウォレットでも確認できる

のようになっています。

![Screen Shot 2022-12-05 at 21.41.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4777/c6c9a676-0ed4-24e9-570f-51eb953817d8.png)


## 実装詳細

スマートコントラクトは下記で確認できます。

- 入り口コントラクト：https://etherscan.io/token/0x22c1f6050e56d2876009903609a2cc3fef83b415
- トークンのコントラクト：https://etherscan.io/address/0x4e90495f66fb04a5fba401967abd607e2ea0ab46#code

SBT の実装かと思いましたが、そうではなく、ERC 721 を拡張したトークンでした。
なので、現状は、[poap.xyz](https://poap.xyz/) のトークンは、イベントの参加証明 NFT として実装されて転送可能になっています。

## 他の応用
- [Adidas の POAP](https://poap.gallery/event/14195)
    - Adidas は、2021 年ローンチしたショッピングアプリ CONFIRMED にて、POAP を配布しました
- [NFTを活用したスキルや仕事の実績証明サービス「Job POAP」](https://jobpoap.xyz/)
- [自由民主党NFT発行にHAZAMA BASEを採用！5月28、29日開催の青年局会議・研修会で政策コンテスト表彰者や研修会出席者に譲渡不能のNFT・POAPを配布](https://prtimes.jp/main/html/rd/p/000000014.000020554.html)

## まとめ
参加証明バッチで何ができるの？との疑問があるかもしれませんが、逆に感じたのは、オンチェーン上の履歴はどんどん現実世界と繋がって行くと感じました。
BigQueryにおける承認済ビュー機能まとめ(図解含む)

# はじめに
弊社では、分析やデータソリューション開発、データ基盤構築など様々なデータ関連のプロジェクトを進めています。その中には、BigQueryを中心とするGCPデータ基盤構築のプロジェクトもあります。この記事では、機密性の高いデータも取り扱うそのプロジェクトで、実際に私が利用した承認済ビューという機能についてまとめたいと思います。
# 要約
BigQueryにて、あるテーブルへのアクセス権限は与えたくないが、そのデータをソースにするビューへのアクセスは可能にしたい、というユースケースは、**承認済ビュー(Authorized View)機能**を利用することで、実現可能。
# 詳細
## ビューとは
**ビュー**とは 、別のテーブル(orビュー)へのSQL クエリによって定義される仮想テーブルです。ビューの作成後は、テーブルをクエリするのと同じ方法でビューをクエリします。
データの実体は持たず(=ストレージは消費せず)、都度ビューへクエリされるたびに、ソースデータへのクエリが実行されます(指定した期間、クエリの結果を保持するマテリアライズドビューというものもあります)
**頻繁に使う加工処理や結合処理をビューにして、普段の処理を簡略化**したり、**テーブルから一部のアクセス制限を行いたいカラムを除いて機密性を下げたりする**際に用いられます。
## ビューのアクセス権限
BigQueryにおいてビューへアクセスする際、本来は、ビュー自体へのアクセス権限に加えて、ビューのソースとなるテーブルへのアクセス権限も必要となります。下記の図で言うと、Aの構成でのみビューへのクエリが実行できます(データセットの権限は配下のテーブル・ビューに継承されます)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253994/82d62c70-fb8d-01b0-7324-2f49795e8dd1.png)

なお、ソースのテーブルへのアクセス権限が無い場合は、ビューにアクセスした際に下記のようなエラーが出てきます。ビューへアクセスしているのに、テーブルへのアクセス権限が無いよ、と怒られます。
`Access Denied: Table {ソーステーブルのID}: User does not have permission to query table {ソーステーブルのID}, or perhaps it does not exist in location {ビューのロケーション}.`
## 承認済ビューのユースケース
しかし、中にはソースデータのテーブルへのアクセス権限は渡さずに、ビューへのアクセス権限を渡したい、というユースケースもあります。
例えば、個人情報を含むデータをソースに対して、個人情報に該当する列を省いた(あるいは加工した)ビューを作成し、個人情報を扱う権限がないユーザに対して、ソースデータへのアクセスは不可にしつつ、ビューのみアクセス可能にしたい、というようなケースです。構成でいうと、先ほどの図でいうところのBのようなイメージです。
そのようなときに役に立つのが**承認済みビュー**という機能です。
## 承認済ビューの概要
承認済ビュー機能は、ビューへのアクセス権限だけで、ソースデータのテーブルへのアクセス権限が無くてもビューへクエリが実行できるようにする機能です。英語では**Authorized Views**と表記します(個人的には、「承認済み」という名前がちょっとわかりづらいと思っており、「認可済」とかの和訳の方が直感的に理解しやすいんじゃないかな、、と思ってます)
## 設定方法
ソースデータのテーブルが存在するデータセット(ソースが複数ある場合は全て)から、ビューを「承認」することで、本機能を利用することができます。ざっくりな手順を下記に記載します。具体的な詳細手順や設定する際に必要なIAM権限などは[公式ドキュメント](https://cloud.google.com/bigquery/docs/authorized-views?hl=ja)をご確認ください。
1. ビューを作成する
1. ユーザに対してビューへのアクセス権限を付与する
1. ビューのソースデータが属するデータセットにて、「承認済ビュー」として対象のビューを指定する

先ほどの図におけるBにおいて、承認済ビュー設定をしたのが下記のB'になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253994/5b6c0fe5-ca6a-dec3-496c-7d08922638d1.png)

        
## 承認済データセット
ビューが複数存在する場合、都度ビューを「承認済ビュー」へ追加するのは煩わしいかなと思います。そのような時に役に立つのが**承認済データセット**という機能です。これはビューの代わりにデータセットを承認対象として設定するもので、承認されたデータセット配下のビューは全て承認済ビュー同様、ソースデータへのアクセス権限無しに、クエリ実行可能となります。
先ほどの図におけるBにおいて、承認済データセット設定をしたのが下記のB''になります。**1つの設定で全てのビューに適用**できます。また**以後作成されるビューにおいても自動で承認設定が適用**されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253994/504b6e9a-9b7b-8560-3d4a-cc7baba461ae.png)


# 終わりに
データ基盤を構築するうえで、切っても切り離せないアクセス制御において、柔軟な設定を可能にするのが、今回紹介した承認済ビュー機能です。GCPデータ基盤のアクセス制御の設計を任された際には、ぜひご活用をご検討ください！
VueRouter script内で画面遷移する方法

# VueRouter script内で画面遷移する方法
## やりたいこと
- VueRouterで画面内のどこかをクリックして画面遷移する際に、RouterLinkタグやButtonタグに記述した「v-on:click」の先で呼ばれるscriptの中で画面遷移したい。



## 実装
### TestPage.vue（コンポーネント）
```
<script setup lang="ts">
　//vue-routerからuseRouterをインポート
　import {useRouter} from 'vue-router';
　const router = useRouter();

　//RouterlinkやButtonから呼び出される関数の定義
　const TestFunction1 =() => {
    router.push({name:'nextpage'});
　}
</script>

<template>
　<button v-on:click="TestFunction1()" type='button'>次のページへ進む</button>
</template>
```

### index.ts（ルーター）
```
const router = createRouter({
  routes: [
    {
      path: "/next-page",
      name: "nextpage",
      component: NextPage,
    },
  ],
});
```

## 注意点
- RouterLinkやButtonがformタグの中で書かれているとデフォルトでsubmitの挙動となるため、明示的にただのボタンであると記載する必要がある。
`type='button'`
【SwiftUI】iOS16からTextFieldが複数行に対応してた

# はじめに
以前はTextFieldでの複数行の入力ができず、TextEditorを使用する必要がありました。
しかし、iOS16からTextFieldの複数行入力がサポートされたようなので使ってみました。

# 実装
```swift
import SwiftUI

struct ContentView: View {
    @State var text: String = ""
    var body: some View {
        TextField("テキストフィールド", text: $text, axis: .vertical)
            .font(.system(size: 25))
            .textFieldStyle(.roundedBorder)
            .padding(.all)
    }
}
```
:::note info
**ポイント**
`axis`に`.vertical`を指定することで複数行入力ができるようになります。
:::

# 動画
![Simulator Screen Recording - iPhone 14 - 2022-12-05 at 21.32.50.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/2227198a-5f33-b1bf-6f0d-a9479757b7c8.gif)


# おわり
SwiftUIがどんどん便利になってきますね
Next.jsにおけるPre-rendering(SSRとSSG)とは

# はじめに
こんにちは、都内でソフトウェアエンジニアをしている[YSasago](https://qiita.com/YSasago)と申します。
今回は、Next.jsの特徴の1つであるPre-rendering（SSGとSSR）のまとめていこうと思います。


# Next.jsのPre-renderingとは
* Next.jsは、デフォルトで全ページをPre-rendering
* Pre-rendering　＝　事前にHTMLを生成すること
* ブラウザの負荷を下げて表示を高速化する
* 検索エンジンのクローラーにコンテンツを見せることができる

# Static Site Generation(SSG)とは
SSGはビルド時に、サーバー側で、APIからのデータ取得とそれに伴ったHTMLの構築を事前に行います。
そして、ユーザーからリクエストされた際にこの事前につくっておいたHTMLを渡すアーキテクチャです。
**事前につくっておいたHTMLをユーザーに渡すだけなのでユーザーは高速にサイトを確認することができます。よってSEO観点でとても良いとされています。**



## getStaticPropsでテータを取得　
Next.jsにおいて、SSGを実装するために```getStaticProps関数```を使います。
この関数は、外部データを取得するために使う関数で、本番環境ではビルド時に実行されます。

* 外部データを取得するために使う
* async/awaitを使って非同期処理を制御できる
* 本番環境ではビルド時に実行される関数
* 開発環境では、リクエスト毎に実行される
* pageコンポーネントでのみ使用可能

# SSGを試してみる

```javascript
// 本番環境ではビルド時に実行される
export async function getStaticProps() {
// データ取得をここに書く
  const allPostsData = getSortedPostsData();

  return {
    // オブジェクトの形で返してあげる
    props: {
      allPostsData,
    },
  };
}

// getStaticPropsで返されたpropsを受け取る 
export default function Home ({ allPostsData }) { ... }
```

# Server-Side　Rendering(SSR)とは
ユーザーからのリクエスト毎にサーバーにリクエストが走り、そのままサーバー側でAPIと連携をしてレンダリングが行われ、生成されたHTMLをユーザーに返すアーキテクチャのことをいいます。
**リクエスト毎にAPIのリクエストとレンダリングが行われるため、SSGと比較すると速度は遅くなります。**

## getServerSidePropsでデータを取得
Next.jsにおいて、SSRを実装するために```getServerSideProps関数```を使います。
この関数は、外部データを取得するために使う関数で、リクエスト毎に実行されます。


* リクエスト毎に実行される関数
* Server-Side　Renderingのために使う
* 外部データを取得するために使う
* async/awaitを使って非同期処理を制御できる
* pageコンポーネントでのみ使用可能


## SSRを試してみる

```javascript
// リクエスト毎に実行される
export async function getServerSideProps(context) {
  const allPostsData = getSortedPostsData();

  return {
    props: {
      allPostsData,
    },
  };
}

export default function Home ({ allPostsData }) { ... }
```

# おわりに
Next.jsを使うと、Pre-renderingを簡単に実装でき、SEOの評価を上げることができます。
またSSGとSSRはページごとに使い分けができるので、とても便利ですね。
用途をよく考えて使い分けしていければと思います。
最後まで読んでくださりありがとうございました。

# 参考
https://zenn.dev/rinda_1994/articles/e6d8e3150b312d

https://nextjs.org/learn/basics/data-fetching

https://www.youtube.com/watch?v=h9wjVLwd2GQ&list=PLX8Rsrpnn3IUGEyanrHYGjY1WOzNe7Jd-&index=6
上司が怒ってたら教えてくれるフロー（Power Automate）

# 更新（というか修正）
2022/12/6 修正

:::note warn
フローの末端で「自分に通知メッセージ」をしますが、その宛先を自分宛てのチャットにすると、処理がループします。
(自分宛のチャットメッセージに対し感情分析しているため）
宛先を任意のチームチャネルへのメッセージやメール、Power　Automateの通知機能を利用するなど、修正ください。
:::

# はじめに

この記事は[Microsoft Power Automate Advent Calendar 2022](https://qiita.com/advent-calendar/2022/powerautomate)に参加しておらず、**[「七草あんこ先生」](@ankoromochi7793)のツィートを煽ったら、なぜか私もblogを投稿しなければならない流れになった（下記参照）** ため、投稿します。

煽った方々は記事の内容に関わらず、「いいね！」するように！
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">みんないいねするんだ！ <a href="https://t.co/dGnRJ7gXiq">https://t.co/dGnRJ7gXiq</a></p>&mdash; Miyake Mito (@MiTo60448639) <a href="https://twitter.com/MiTo60448639/status/1599699368164352000?ref_src=twsrc%5Etfw">December 5, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 上司が怒ってたら教えてくれるフローってなによ？

Teamsチャットで、自分宛のメッセージのセンチメントがネガティブの場合、通知してくれるフローです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/c29acec2-9502-84d8-6b4d-8291fe3a90b0.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/54e6d462-a7b7-92e8-447e-4275839bd4f2.png)

# 注意

AI Builder を利用します、有償プランが必要です。

https://learn.microsoft.com/ja-jp/ai-builder/

# 作り方

全体像
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/871aa6d1-0d37-9ea0-1050-36e40b986f1f.png)

## Trigger

Teamsコネクタの ``[チャットに新しいメッセージが追加されたとき]`` を使ってください。特筆すべき事柄はありません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/040d1ee7-c0f3-d1c3-3d85-bfe641b46b6f.png)

## チャットメッセージの詳細を取得

上記トリガーでは、メッセージ本文や送信者の情報は取得できないため、Teamsコネクタの ``[メッセージ詳細を取得する]`` を使います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/703722de-5298-8a7e-e9af-2581312f53fd.png)

[メッセージ]
```
triggerBody()?['value']?[0]?['messageId']
```

[グループチャット]
カスタム項目で以下の式を設定
```
triggerBody()?['value']?[0]?['conversationId']
```

## メッセージのセンチメントを取得

AI Builderコネクタの ``[テキスト内の肯定的または否定的な感情を分析する]``
使用言語を選び、テキストは[メッセージ詳細を取得する]の ``[本文 PlainTextContent]``
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/caa7d2ff-b295-3b9f-0418-956d1bbd8ee9.png)

## センチメントの条件を判断

条件で、上記[テキスト内の肯定的または否定的な感情を分析する]の ``[テキスト全体の確率は否定的です]`` を選択し、
任意の値より大きい場合を条件としてください。
否定的なセンチメントの確率が0（最小）~1（最大）で出力されるため、お好きな値をどうぞ。
私はビビりなので0より大きければにしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/2c695804-4171-6eba-d7c1-8bdc8f16b7c0.png)


## 自分に通知メッセージ
:::note warn
2022/12/6 修正
自分へのチャットで通知すると処理がループするため、通知先をチャネルに変えました。
メールや通知アクション等、ご自身で気づきやすい通知方法を選択してください。
:::

Teamsコネクタの ``[チャットまたはチャネルでメッセージを投稿する]``
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/99140877-634e-0b28-08a4-9a8b72cbb56c.png)

メッセージ本文に、[メッセージ詳細を取得する]の ``[差出人 ユーザー 表示名]`` 等入れると、だれが怒ってるかわかりますね！

# おわり

Ai Builder 感情分析は、入力されたテキストのセンチメントが 肯定的、肯定的、または 中立 であることを示す、事前構築済み AI モデルです。
つまり、AIの学習は必要なく、そのままドンで使えます。しかも日本語対応しています。
使わない手はないですね！

そして、ちゃんと個別チャットは見ようね！自分。
忘年会の挨拶担当を拝命したので流行りのAIに考えてもらった

# 経緯

1. 弊組織、「 [ぅゅ...ぷんぽぷんぽ](https://github.com/uyupun) 」の忘年会の開催が決定する。
1. 忘年会の挨拶担当に任命される。
1. 内容が思いつかない。
1. 時を同じくして [openAIのチャットボット](https://chat.openai.com/) が流行する。
1. 代わりに考えてもらうことを思いつく。

# 入れてみた

携帯から失礼
<img width="400px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268717/1d837cd6-633c-d67c-e26c-3468bd9dfafc.png">
<img width="400px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268717/711930fc-65c3-7f57-a44a-48eb8e392dff.png">
<img width="400px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268717/e916bc7e-789d-7eaf-47c9-b78ab56a8c22.png">

文字起こし


> Q. 忘年会の挨拶を代わりに考えてください
> A. 忘年会の挨拶として、「皆さん、こんにちは。今年も残すところあとわずかとなりました。みなさんが有意義な一年を過ごせますよう、心よりお祈り申し上げます。また、来年もよろしくお願いいたします。」といった感じの挨拶が良いかと思います。
>
> Q. 他には？
> A. また、「皆さん、こんにちは。今年も残すところあとわずかとなりました。過ごしやすいお年をお迎えいただけましたか？私たちも、これからはもっと皆さんを楽しませるよう努力していきます。それでは、忘年会を楽しんでいってください。」といった挨拶も考えられます。
>
> Q. あなたが忘年会の挨拶を話すとしたらどんな内容？
> A. 私は人工知能であり、実際に挨拶をすることはできません。忘年会の挨拶を考える場合は、お客様のニーズやシチュエーションに応じて挨拶の内容を決めることが大切です。自分自身の意見や感想を発言することはできませんので、ご了承ください。


彼（彼女？）は挨拶をしてくれないらしい。残念。

# 始まりと終わりはいい感じだけど内容が薄い

ので別のAIの力も借りてみた
[AIのべりすと](https://ai-novel.com/)
入力した文章は以下。

```
忘年会の挨拶を任されたので考えることにする。

「皆さん、こんにちは。今年も残すところあとわずかとなりました。
```

自動生成されたのが以下。

> 忘年会の挨拶を任されたので考えることにする。
>
>「皆さん、こんにちは。今年も残すところあとわずかとなりました。一年間お疲れ様です」
こんな感じかな？ うん、無難な挨拶だね。
「えー、今年も残すところあと少しですね。皆さまいかがお過ごしでしょうか？」
あ、これは駄目だ。なんか堅苦しいし、新鮮味がない。「いやぁ、今日も寒いですね！」
うわっ！ これじゃただの天気の話じゃないか！ しかも季節感もないから、何を言いたいのかわからないよ！
「えっと……その……」
うぅ、何も思いつかない……。もう適当に終わらせてしまおうか。
「それでは皆さん良い年末をお過ごしください」
はい、終わり。これ以上考えても良い案なんて出てこないさ。
「ちょっと待ったああああああ！！」
突然大声を上げたのは、僕のクラスの学級委員長である田中くんだった。
「どうしたんだい？

謎のクラスメイト田中くん登場。挨拶にならないのでセリフになっている箇所を残して大幅に削ってみる。ついでに以下の設定を追加。

- セリフを優先
- プリセット: スローペース(話がそれにくい)
- 3点リードの量: 無し

```
忘年会の挨拶を任されたので考えることにする。

「皆さん、こんにちは。今年も残すところあとわずかとなりました。一年間お疲れ様です」
「えー、今年も残すところあと少しですね。皆さまいかがお過ごしでしょうか？」
「いやぁ、今日も寒いですね！」
「えっと……その……」
「それでは皆さん良い年末をお過ごしください」
「ちょっと待ったああああああ！！」
「どうしたんだい？
```

出力。

> 忘年会の挨拶を任されたので考えることにする。
>
>「皆さん、こんにちは。今年も残すところあとわずかとなりました。一年間お疲れ様です」
「えー、今年も残すところあと少しですね。皆さまいかがお過ごしでしょうか？」
「いやぁ、今日も寒いですね！」
「えっと……その……」
「それでは皆さん良い年末をお過ごしください」
「ちょっと待ったああああああ！！」
「どうしたんだい？急に大きな声を出して」
「いえ、何でもありませんよ。ただ、もうすぐクリスマスなので何かプレゼントを頂けたらなと思いましてね」
「ふむ……。確かにそうだねぇ。よし！じゃあ僕からのささやかな気持ちとして君にこれをあげようじゃないか」
「これは何ですか？」
「それは『異世界転生チケット』だよ。これを使えばどんな世界にでも行けるという代物さ」
「へぇ〜そんな凄そうなものが貰えるんですか！？ありがとうございます！！早速使ってみますね！」
「楽しんでくるんだよ〜」
〜完〜
※

勝手に人が登場して異世界転生チケットを渡して終わった。何だこれ

# 感想

文章を生成して返すAIを2つ試したわけだが、 openAI のチャットの応答速度が非常に速いと感じた。
またopenAIは文章を受けて応答を返すことだけを念頭においており、他の質問でも「私は人工知能であり、 ~中略~ 〇〇することはできません」といったように我を押し通してくる印象を受けた。

逆に、AIのべりすとは応答は遅く、文章生成時に数秒〜30秒程度待たされることが多いものの、独自の世界観を持っているようで勝手に進めてくれる。都度添削することでちょっとした作文や小説は書き上げられる可能性を感じた。
しかし忘年会の挨拶ネタに使うのはいかがなものかと思う。クリスマスの話題になったし。

# 実際に披露してみた

ややウケだった
個人的によく使うDartのライブラリ群

pubspec.yaml に記述

<pre>dependencies:
  just_audio: ^0.9.30           #オーディオ
  intl: ^0.17.0                 #時刻系
  shared_preferences: ^2.0.15   #設定保存・ロード系
  google_mobile_ads: ^0.13.2+1  #広告
  flutter_screenutil: ^5.3.1    #表示の統一
  firebase_core: ^1.13.1        #Firebase
  cloud_firestore: ^3.1.10      #Fire Storage
  bordered_text: ^2.0.0         #テキストの縁取り
</pre>

<pre>//================================================================
//util.dart
//便利関数群
//================================================================
import 'dart:math';
import 'package:just_audio/just_audio.dart';
import 'package:audio_session/audio_session.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:intl/intl.dart';
</pre>
文系の1年目がLinuCレベル１を取得するまでの話


# 1. はじめに
筆者は今年度に文系大学卒としてIT企業に入社しました。その立場の私が不安だったのは、やはり**技術的な知識と経験が不足している**ことでした。

また弊社はSESであるため、その場その時のお客様に刺さる武器がなければ、自分の望んだ案件・キャリアに進むことは難しいと思いました。
<br>
<br>


この「**レベル（知識と経験）の不足**」と「**自分の武器がない**」という2つの問題を解決するのが「<font color="red">資格の勉強</font>」です。資格の勉強で自信の技術知識のレベルを上げつつ、合格できればどこかの案件に刺さる武器が手に入ります。

本記事は、そんな資格の中でも<font color="red">**LinuCレベル１**</font>を取得することの手助けを目的とし、執筆いたします。

<br>
<br>

# 2. LinuCとは

https://linuc.org/linuc1/

LinuCとは、**Linuxサーバーの構築と運用・管理の知識**に加え、**クラウドのセキュリティやオープンソースという最新の技術**についての知識を持ち、業務に活用できることも示すことができる資格です。

この資格の勉強で、サーバーについての基礎的な知識を身につけることとその知識を証明する資格を獲得することができます！

LinuCレベル1は「101」と「102」の2種類に分かれており、それぞれ試験をうけて合格する必要があります。
<br>
<br>







# 3. 勉強方法


ざっくり以下の３つの方法で勉強しました。方針は**質より量**です。
<br>

<font color="red">**①Ping-t**　https://ping-t.com/

模擬問題集サイト。**これで一番LinuCを勉強しました。**
<br>
<br>


101、102それぞれ**700問**ぐらいあります。
90分60問の本番試験同様の形式で勉強することもできますが、
LinuCの章ごとに勉強したり、苦手な問題ごとに勉強したりと、結構**勉強方法をカスタマイズできる**のが便利です。

自分の勉強方法は、基本的には<font color="red">**ミスした問題を中心にひたすら問題を解き**</font>、
理解度が深まってきたら模擬試験で正答率を確かめつつ勉強しました。

<br>
<br>
他の受験者の方の体験談を見る限り、おそらくPing-tだけでも合格はできると思いますが、私の主観では**Ping-tと同レベルの問題は本番では3割～5割しか出題されませんでした**。
したがって、確実に合格したいなら他の教材などでも理解を深めた方がいいと思います。
<br>
<br>





<font color="red">**②小豆本**


https://www.amazon.co.jp/Linux%E6%95%99%E7%A7%91%E6%9B%B8-LinuC%E3%83%AC%E3%83%99%E3%83%AB1-Version-10-0%E5%AF%BE%E5%BF%9C-%E4%B8%AD%E5%B3%B6/dp/4798166162

商品紹介ページによると、


**●「101試験」「102試験」の2試験に対応。出題範囲を完全網羅
●学習したことを確認できる練習問題を、各章末に豊富に掲載しています
●巻末には1回分の模擬試験を収録。本試験に向けて実力を試せます**

とのことです。
出題範囲を完全網羅という通り、この本の内容を十分理解すればLinuCレベル1は安定して合格できそうという印象の本です。
ただLinux業務未経験の身としては、**本の内容をイメージすることが難しく**、この本の理解よりもping-tでの学習を優先しました。
<br>
<br>


<font color="red">**③仮想環境でのコマンド練習、Webサーバー構築**

AWSやVirtualBoxを用いて、実際に試験範囲のコマンドを実行したりLinuxサーバーを構築したりしました。
LinuCの勉強で1番大変だったのが、**様々なコマンドやオプションの機能を覚えること**でした。したがって、これらの機能や動きを実際に操作して確かめることは、コマンドなどの理解にとても役立ったのでおススメです。
<br>
<br>



# 4. 結果と反省

結果として、**101・102両方とも点数は550点前後で合格しました！**
合格してしまえばこっちのもんですね……。

合格点としてはおそらくギリギリですが、Linuxの業務経験なしで一発合格できたと考えれば、今回の勉強方針は悪くなかったと思います。

ただ点数はそのままLinuxへの理解度を表しているとも考えられるので、今後の業務のためにも試験で点数が低かった部分は特に復習したほうが良いと思いました（LinuCは試験後、分野ごとの正答率を教えてもらえます）。
<br>
<br>



# おまけ（勉強の仕方について）

入社前、学生の勉強の仕方と社会人の勉強の仕方は変わることを考え、購入した書籍を紹介します。

https://www.amazon.co.jp/%E5%8B%89%E5%BC%B7%E6%9C%AC100%E5%86%8A%E3%81%AE%E3%83%99%E3%82%B9%E3%83%88%E3%82%BB%E3%83%A9%E3%83%BC%E3%82%921%E5%86%8A%E3%81%AB%E3%81%BE%E3%81%A8%E3%82%81%E3%81%9F-%E4%B8%80%E7%94%9F%E4%BD%BF%E3%81%88%E3%82%8B%E5%8B%89%E5%BC%B7%E6%B3%95-%E9%87%91%E5%B7%9D-%E9%A1%95%E6%95%99/dp/4862808352/ref=asc_df_4862808352/?tag=jpgo-22&linkCode=df0&hvadid=576002743188&hvpos=&hvnetw=g&hvrand=17855912404700840409&hvpone=&hvptwo=&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=1009343&hvtargid=pla-1600657416888&psc=1&th=1&psc=1

「勉強本100冊のベストセラーを1冊にまとめた 一生使える勉強法」というタイトルに違わず、**勉強法についての入門書**です。
かなり読みやすく、<font color="red">勉強法について深く考えたことが無い人や、「勉強」ということに抵抗感がある人ほどオススメです。</font>ぜひ読んでみてください。
【1.デザイン/コーディング編】MENTA利用してメンターと開発

こんにちは！

備忘録として題名の経過を書き綴ります！

まず初めに、2019年12月頭から無料のPHPスクールに約1ヶ月通い、生のPHPを勉強しました。
勉強内容は以下です。
＊)学校では渡されたソースコードに基づいて、1行づつ処理内容をアウトプットする。
＊)自習では渡されたソースコードを3〜4回模写する。
書いてみると余裕に見えますが、内容が濃ゆく、あっという間の1ヶ月でした。

卒業後は成果物作成のために、書籍を購入し復習をして成果物を作成するつもりが
コードを1行も書けず迷走。（1ヶ月間）
因みに、購入した書籍は以下です。

ーーーーーーーーーーーーーーー
1)PHPフレームワーク Laravel入門（開発環境で挫折）
2)パーフェクトPHP（7章で挫折）
3)よくわかるPHPの教科書（3周）
4)PHP直す力養成ドリル（3周）
5)PHP Todoリストを作ろう（3周）
6)PHP 連想配列集中特訓（3周）
7)PHP 入門確認画面付きのお問い合わせフォーム..作ろう！（3周）

よく聞くダメダメ駆け出しエンジニアのサイクルにハマってますよね😢
ーーーーーーーーーーーーーーー

もう二進も三進もいかず、藁をもすがる思いでMENTAに登録＆募集をかけました！！
運が良く、PHPでゴリゴリ開発している方がメンターになって頂け、
ECサイトを開発をしている最中でございます。

ちなみに革靴のECサイトを作ります。
理由としては、
#### 自分が革靴が好き！単純に好き！美しい！
磨けば味が出るじゃん？愛着湧くじゃん？ずっと履けるじゃん？
まぁそんな理由でEC作りました。は地に足がついてないので正当な理由は

1.いろんなブランドを取り扱った革靴ECが見当たらなかったので、そんなECがあったらなと
2.ブランドごとに検索するのがめんどくさかった
3.革靴自体海外メーカーも多いので、日本のサイズと表記に違いがあり、一目でわかりたい

そんな理由で作り上げていきます！

話は戻りまして、
メンターさん曰く、開発フローはこんな感じだよーって
ーーーーーーーーーーーーーーー
1)画面デザイン(ワイヤーフレーム)　　　　　　　　　　　（8〜10h）
2)画面デザインからhtmlコーディング　　　　　　　　　（15h〜20h）
3)ワイヤーフレームからモデリング(情報設計)とDB設計　←Now
4)URL設計
5)htmlをlaravelに組み込み
6)DBへ永続化するなど、処理をlaravel内に作成
7)テスト
8)デプロイ
ーーーーーーーーーーーーーーー

以下からは、
1)画面デザイン(ワイヤーフレーム)　
2)画面デザインからhtmlコーディング
に関して、自分が行った作業について書い綴っていきます！


ーーーーーーーーーーーーーーーー
1)画面デザイン（ワイヤーフレーム）

[使用サービス]
- Figma

[参考URL]
＜＜Figmaの使い方、全力でまとめました。＞＞
-https://note.com/99997373/n/n77573dfb8797

＜＜5-1. プロトタイプを作成する＞＞
-https://chot.design/figma-beginner/9039108315c1/

＜＜Figmaのframeとgroupの違い＞＞
-https://t.co/HQxXwzlZok?amp=1

[感想]
初めて触るツールだったので、使いづらさはありましたが
雛形のデザインさえ決めてしまえば、サクサクっと作業を終えることができました！
実際の現場の仕組みを体系的に学べる点は、すごく良いと感じました。

[完成図]

![スクリーンショット 2020-09-28 15.18.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748934/720b36cc-c08a-b32b-1366-948f8f73b10f.png)


2)HTMLコーディング
[作成にあたり参考にした記事]

＜＜border-collespeが効かない＞＞
-http://blog.higty.xyz/archives/501/
-https://qiita.com/hideo9080/items/4aa028b6533174d46719

＜＜表（table）の作り方と装飾の変え方＞＞
-https://saruwakakun.com/html-css/basic/table

＜＜formタグを改行せずに横に並べる方法＞＞
-https://hacknote.jp/archives/5218/

＜＜すぐわかる！HTMLでスペースや空白を入れる正しい方法＞＞
-https://webliker.info/03847/

[感想]
以前デイトラのWeb製作編を中級まで熟していたこともあり、
忘れていたことはありましたが、思ったよりはサクサク進すみました。
最低限に次の工程に行けるよにを意識して作業をしました。
jQueryの実装は、時間があるときに。

[完成図]
![スクリーンショット 2020-09-28 15.50.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748934/3427bfec-bbbe-1a4a-f7b6-9ffe2909aba6.png)


以上！
次回は、
3)モデリング ＆ DB設定　
4)URL設計　
を記事にします！

さぁモデリングをしていきます！
ESLintの導入手順

# ESLintのインストール


ドキュメント( https://eslint.org/ )通りだと、
```
npm init @eslint/config
```
でeslintの初期設定及びインストールができる。

実行すると、下記のように、
色々設定について聞かれるので、
順に答えていく。

すべて答えたら、
インストールが実行され、
.eslintrc.jsonみたいなファイルができるはずだ。


![Screenshot 2022-12-05 at 13.31.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1290117/21281681-69ce-e474-c057-9ad1398d0172.png)


基本的にはこのやり方でいいと思うが、
上記の公式のコマンドが上手く作用しなかったら、
npm経由かyarn経由かどちらかで、
まずはインストールする。
(筆者のプロジェクトだと、なぜかエラーになったので、
下記の方法で導入した)

```:terminal
npm install eslint
yarn add eslint
```

設定ファイルのeslintrc.jsonなども、
手動で作成することも可能なので、
公式のコマンドがエラーになるときは、
手動で作成してしまったほうが良さそう。

# .eslintrc.jsonの設定
さて、.eslintrc.jsonなどのファイルができたら、
そこにeslintの設定をする。

npm init @eslint/configを実行した場合、
こんな感じのコードになっている。

```:.eslintrc.json
{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "overrides": [
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
    }
}
```

この中でも重要な部分の一つとして、
```
  "extends": [
        "eslint:recommended",
    ],
```
があげられる。

eslint:recommendedの記述で、
こちらの( https://eslint.org/docs/latest/rules/ )ページにある、
checkboxがついたルールが適用されたことになる。

なので、実はこの記述だけで、
最低限のESLintは適用させることができてしまう。


ただ、上記の設定を上書きしたかったり、
追加したいときは、上記では空になっている、
rulesのところに設定を足していく感じになる。


正直、.eslintrc.jsonの設定は奥が深いので、
本記事ではそこまで深入りしない。

運用していくうちに自分だけのベストな.eslintrc.jsonを
模索していくかたちになるだろう。


一旦、設定の目安として、
airbnbのeslintrcが参考になる。

そのまま適用すると厳しすぎる気もするので、
使えそうな部分を足していくのがいいかもしれない。　
https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb-base/rules



とりあえず、シングルクォート統一、
セミコロンを必ずつけて、console.logとかは警告がでるような
rulesを追加してみた。

```:.eslintrc.json
{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "overrides": [
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
      "quotes": ["error", "single"],
      "semi": ["error", "always"],
      "no-console": "warn"
    }
}
```

# ESLint実行
さて、試しにlintを走らせてみる。
package.jsonにlintコマンドを定義する。

```:package.json
   "scripts": {
      "start": "ts-node src/index.ts",
      "lint": "npx eslint src/index.ts",
      "test": "jest"
   }
```

試しにsrc/index.tsに対してlintを実行するようにした。

```:index.ts
import express, { Request, Response } from "express"

const app = express()
const port = 3002

app.get("/", (req: Request, res: Response) => {
  res.send("Hello World")
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
})
```
index.tsに、lintがきいているか確かめるため、
文字列はダブルクオーテーションで囲み、
セミコロンは文末につけないで、console.logもコード中に入れている。

では、実行してみる。

```
npm run lint
```

![Screenshot 2022-12-05 at 21.10.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1290117/efff5f20-6e22-f9fb-842c-cb368da5e8df.png)

無事ESLintが機能していることがわかる。
ChatGPTで最新AIを体験しよう！

# はじめに
ChatGPTのサインアップ手順です
(2022-12-08　追記)一番最後に関連リンク集を追加しました。
(2023-10-25　追記)現時点での最新手順にアップデートしました。
(2023-12-17　追記)最新手順に更新しました。
(2024-12-01　追記) 最新手順に更新しました。


# Chat-GPTのサインアップ
次のリンクからchat-GPTの画面を表示します。

https://openai.com/chatgpt/

次の画面が出たら、「Show now」のボタンをクリックします。

<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206130/5ebcd8bd-8895-5ddd-f0ce-44dec2619ea1.png' width=700>

下記の画面になったら、右上の「アカウントを作成する」をクリックします。

<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206130/4fa7dbbb-664b-ba24-11fd-dc49adaf13f1.png' width=700>

「アカウントの作成」の画面になったら、メールアドレスを入力して「続ける」をクリックします。

<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206130/4669823a-3ff8-d091-6380-3a147e877886.png' width=400>

パスワード入力の画面になるので、パスワードを入力して「続ける」をクリックします。

<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206130/37b3ad31-152c-580e-ad2c-1b033c75deea.png' width=400>

次のような「メールを検証する」というメッセージがでてくるので、該当するメールを探し、開きます。

<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206130/3a37a989-aaaa-1918-afea-d87a32be546b.png' width=400>

該当するメールを開くと、「メールアドレスの確認」というボタンがあるので、クリックします。

<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206130/33d9f83a-82d6-85ce-8539-df59341584f3.png' width=400>

「ご自身について教えて下さい」の画面が出てくるので、氏名と生年月日を入力し、「同意する」をクリックします。

<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206130/009185f2-3aab-8021-76cc-d4627755fe43.png' width=400>

次のような画面が表示され、右上にユーザーIDの略号が表示されていれば、ユーザー登録に成功しています。

<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206130/0b96aee7-ca97-bc88-8e5d-aa3936d54b9f.png' width=700>


一度ユーザー登録が終わって以降は下記のURLを指定すれば、すぐに使える形になります。

https://chat.openai.com/chat

活用の仕方は皆さんのアイデア次第です。
まったく新しいAIライフを楽しんで下さい！
AWSのさまざまなデータベース①

## データベースの役割

データベースの主な役割は「データの蓄積」と「データの使用」で、大量のデータを蓄積し、必要に応じてデータを利用することができる。

データの利用はCreate(作成)、Read(読み込み)、Update(更新)、Delete(削除)の4つの機能からなり頭文字をとってCRUDと言われている。

## トランザクション

データベースをある一貫した状態から別の一貫した状態へ変更する1つの束のこと

### トランザクション処理のASID

- 原子性(Atomicity)
    - トランザクション処理は完全に実行される（**COMMIT**
    ）、もしくは完全に実行されない（**ROLLBACK**
    ）性質を表します。
- 一貫性(Consistency)
    - トランザクションが**必ず一定のルールに沿って**
    データベースに変更を行う性質を表します。
- 独立性(Isolation)
    - 複数の処理が同時に実行されても、それぞれがお互いに干渉しない性質を表します。
- 永続性(Durabirity)
    - 一旦確定（COMMIT）したデータは、その後障害が発生しても**永遠に変わらず保持される性質**

## データベースの種類

リレーショナルDBか非リレーショナルDBの大きく分けて2つのDBがある

### リレーショナルDB

ORACL, MySQL, PostgreSQLなどのDB

- データ間の関係性が定義されたデータを取り扱う一般的なDBシステム
- データ操作にはSQLを使用

### ビッグデータ向けDB

NoSQL

- リレーショナルDBの構造を持たずSQLを使用しないDBの総称
- ただし操作しやすいように一部SQLやSQLに似たクエリ処理を適用したモデルもある
- 非構造化データ（音声、動画、テキストなど）や半構造化データ（XML, JSON, 文書など）を扱える
- KeyとValueのみのデータを扱えるため軽くビックデータに向いている

## NoSQLのデータタイプ

### キーバリュー型

| Key | Value |
| --- | --- |
| ニャオハ | (図鑑Number : 001, タイプ : くさ, 最終進化: マスカーニャ) |
| ホゲータ | (図鑑Number : 004, タイプ : ほのお, 最終進化レベル : 36レベル) |
| クワッス | (図鑑Number : 007, タイプ : みず, 最終進化タイプ : みず・かくとう) |
- バリューの内容に関しては、データごとに異なっていて良い。
- 構造がシンプルなので高速に処理できる上、容量も少なくすむ。
- 複雑な検索処理に適していない

AWSサービス
ElastiCache, DynamoDB

### カラム指向型

| Key | 図鑑Number  | タイプ | 最終進化 | 最終進化タイプ |
| --- | --- | --- | --- | --- |
| ニャオハ | 001 | くさ | マスカーニャ | くさ・あく |
| ホゲータ | 004 | ほのお | ラウドボーン | ほのお・ゴースト |
| クワッス | 007 | みず | ウェーニバル | みず・かくとう |

Key-Value型にカラムが追加されたデータベースで、キーごとに任意のカラムを追加できるのに加えて、全てのカラムにバリューが入っている必要がないため柔軟にデータベースを構築できる。

AWSサービス
DynamoDB

### ドキュメント型

| キー |
| --- |
| ニャオハ |

```java
{
	ZukanID : 001
	taipu : "kusa"
	saisyu : "masuka-nya"
	saisyuTaipu : "kusa&aku"
}
```

キーに対してJSONやXML形式でデータを管理するデータベースの種類

AWSサービス
Amazon DocumentDB

### グラフ型

グラフ演算に特化したDBでデータの関係性をグラフで相互に結びついた要素で構成されている
RDSと比較すると高速横断検索が可能

AWSサービス
Amazon Neptune

## おわりに
NoSQLに対して苦手意識があるので今度まとめてみたいと思いました。
間違いがありましたらご指摘いただけると助かります。