OmniAICreator/Qiita-1.07M huggingface dataset:
最近実践したAtomic Designで学んだこと

# Atomic Designについて
僕がAtomic Designについて勉強するときに参考にしたサイトです
https://note.com/tabelog_frontend/n/n07b4077f5cf3

開発でフロントエンドを触る機会ができたので、どうせするならとAtomic Designを取り入れることにしました。

こういうフレームワークのようなディレクトリ構造はとったことがないので、どういういう風に書けばいいか初めはわからなかったのですが、書いていくうちにしっくりくるディレクトリ構造を作ることができたので共有です。

## 私が使用したディレクトリ構造
Reactでの開発を想定しています

~~~
src
 ├components
    ├atoms
    ├molecules
    ├organisms
 ├pages
 ├routes
    ├validation
    ├Route
 ├functions 
 └util
~~~

### pages
ここには一番親となるファイルを書きます
ここには値や処理は書かずコンポーネントのみを書きます

### components
#### organisms
   ここにはページ全体に関連するStateや関数などを記述します
   また、複数のmoleculesを記述し、定義した変数や関数を渡して処理をさせます

#### molecules
ここでは親から受け取ったStateや関数を使ったりAtomsを使ったりします。
基本的には描画を担当するイメージです

ただ、このコンポーネントのみで完結するような関数や変数はここで定義します

#### atoms
ここは最小限の構成で記述していきます。
一番意識することは汎用的なものを作成することなので、ここではできる限り関数や変数は定義しません。
関数の処理などを入れたいときはPropsでその関数を渡してもらって処理をするように実装します。


### functions
ここではorganismsで実行したい処理を記述します。
本当はorganismsで処理を記述したいのですが、そこに書いてしますと1ファイル内のコード量が増えてしまうのでここで管理するようにしています。


### utils
ここは名前の通り汎用的なデータを保管する場所です
多くのコンポーネントで利用されるであろう型やContextなどをここで定義してあげるようにしています。


## 最後に
Atomic DesignならTemplateもだろと思った方もいたかもしれないですが、個人的にディレクトリの数を増やしてしまうとこれはどこに書くんだっけ？みたいになってしまってめんどくさくなってしまったので、今回は3階層にしてみました


みなさんはどのようにしてディレクトリを分けていますでしょうか？
JavaScript すっきりリファクタリング 2

ネット上で見かけたJavaScriptのコードをリファクタリングしていく企画です。

## 元コード

CSVファイルを取得して、それから&lt;table&gt;タグを作る。

```js:元コード
let res = await fetch("data.csv");
let csv = await res.text();
let lines = csv.split("\n");
let table = document.createElement("table");

for (let i = 0; i < lines.length; i++) {
    let line = lines[i];
    let cells = line.split(",");
    let tr = document.createElement("tr");
    for (let j = 0; j < cells.length; j++) {
        let td = document.createElement("td");
        td.textContent = cells[j];
        tr.appendChild(td);
    }
    table.appendChild(tr);
}
```

## 新コード

```js:新コード
const csv = await fetch("data.csv").then(res => res.text())
const table = document.createElement("table")

for(const line of csv.split("\n")){
    const tr = table.insertRow()
    for(const value of line.split(",")){
        tr.insertCell().append(value)
    }
}
```


- 他の問題は「[すっきりリファクタリング](https://qiita.com/tags/%e3%82%b9%e3%83%83%e3%82%ad%e3%83%aa%e3%83%aa%e3%83%95%e3%82%a1%e3%82%af%e3%82%bf%e3%83%aa%e3%83%b3%e3%82%b0)」タグからどうぞ。
SwiftUI List中のButtonのタッチ範囲を変更する。

listのrowにbuttonを配置しているとき、rowのbutton以外をタッチして反応され困っていた。
特にlist全体に.onTapGesture {}属性をつけていると、干渉がひどかった。



```
.buttonStyle(PlainButtonStyle())
```
このmodifierをButtonにつけると、タッチ範囲がrow全体ではなく、button部分のみになる。

例:
```
  FavoriteButton(isSet: $liked)
                .buttonStyle(PlainButtonStyle())

```




参考:
https://stackoverflow.com/questions/63087817/strange-buttons-behaviour-in-a-list-swiftui
【小ネタ】GitHubでそのリポジトリのコラボレーター(以上の権限を持つ人)を簡単に表示する方法

よく忘れるのと日本語で記載している記事がなかったので、備忘的な意味で記事にした。

下記URLの`organization_name`と`repo_name`を任意のリポジトリのものに変更すれば表示される。
```
https://github.com/organization_name/repo_name/issues/show_menu_content?partial=issues/filters/authors_content
```

例えば私がコントリビュートしたことのある`python/typeshed`なら下記となる。

https://github.com/python/typeshed/issues/show_menu_content?partial=issues/filters/authors_content

## 追記
GitHubにログインしていると、自分自身についてはコラボレーター以上の権限があっても表示されなかった。

自分自身が含まれていることの証明をしたいなら、
- GitHubからいったんログオフする
- GitHubへログオンしていないブラウザからアクセスする

ことが必要。

## 参考
https://stackoverflow.com/questions/37495745/how-can-i-get-the-number-of-collaborators-in-someone-elses-github-repository
AWS Graviton とは

## 勉強前イメージ

新しいサービス？

## 調査

### AWS Graviton とは

グラビトンと読み、ARMベースで作られているAWSが独自に設計したプロセッサになります。
ARMとはアームと読み、スマートフォンや携帯電話・タブレットでよく使われる小型かつ省電力のCPUのアーキテクチャになります。
詳細は [こちら](https://qiita.com/miyuki_samitani/items/25e9673136ad03f15ce2) をごらんください。

元々パワーが必要なコンピュータにはインテルのx86が主流で、省電力なARMはスマートフォンなどで使われていました。
しかし、AppleのM1チップ(ARM)がインテルのCPUを上回るということで認知度が上がりました。
Apple同様、小型で省電力のCPUがサーバに使われるようになりました。

AWSではEC2はもちろん、RDSやEMRなどでGravitonのCPUのインスタンスを選択することができます。
インスタンスでは `c6g.medium` や `t4g.medium` など `g` がついたインスタンスを選択することでGravitonが使えるようになります。
インスタンスタイプの確認方法は [こちら](https://qiita.com/miyuki_samitani/items/3a6bd44196335ce2fc5a) に記載しております。

AWS独自のARMプロセッサはA1,Graviton2 があり最新はGraviton3になります。

## 勉強後イメージ

AWSが作ったプロセッサか。
ただインテル製のCPUからインスタンス変更しようかなってときは簡単にできないから難しいね。

## 参考

- [AWS Graviton2 (EC2) を検証した結果、採用しています](https://www.seeds-std.co.jp/blog/creators/2022-05-24-183714/)
- [サクッとわかるGraviton3。AWSの第3世代カスタムARMプロセッサ](https://zenn.dev/quiver/articles/c180040daa05ab)
【初心者向け】4パターンのバリデーションレベルについて学ぶ【Rails】

## 1. はじめに
初心者の場合だと、バリデーションは特に何も考えずにモデルで定義しているという人は結構いるのではないでしょうか。ただ業務で開発していたり、自主アプリの規模が大きくなってきたりすると、「モデルで定義する方法が最適解なのか？」という疑問が湧いてくる場面があると思います。

私も業務で開発していて、この辺が気になり始めた1人です。せっかくなので今回バリデーションレベルについて調べて、あれこれ考えたことをこの記事に残しておこうと思います。同じような人の役に立てばと思います。

※以下はRailsの想定で話を進めています(考え方自体はフレームワークを超えて共通した内容かと思います)


## 2. ４パターンのバリデーションレベル
さて、そもそもバリデーションレベルは4パターンあります。それが以下の通り。

① モデルレベル
② データベースレベル
③ コントローラレベル
④ フロントエンドレベル

1つずつ詳しく見ていきます。

## 3. ①モデルレベル
#### メリット
* データベースに依存しない
-> バリデーションの仕組み(データベース制約等)がDBに依存するみたいなことがない
* エンドユーザーがバイパスできない
-> フロント側でバリデーションをOFF(ブラウザでJavaScriptをOFF等)にしてスキップさせるみたいなことができない
* テスト・メンテナンスがしやすい
-> 1と関連する話だが、DBに依存するようなことがないため保守がしやすい

#### デメリット
* メソッドによってはバリデーションがスキップされてしまう
   * バリデーションがかかるメソッド
```create, create!, save, save!, update, update!```
   * バリデーションがスキップされるメソッド
```decrement!, increment!, insert, touch, update_all, update_column, upsert etc...```


#### 補足
最も馴染みがあるのがこのパターン。
Railsガイドには正しいデータのみDBに保存する場合は、モデルレベルでバリデーションを実行するのが最適と示されています。

## 4. ②データベースレベル

### メリット
* 安全性が他のパターンと比べて最も高い
-> 結局、アプリケーション層でバリデーションをかけてもすり抜けられたら意味がない
* 利用頻度が非常に高いテーブルの一意性バリデーションをかけることができる

### デメリット
* テストや保守が面倒
-> バリデーションの仕組みがDBに依存する場合があるため

### 補足
他の3パターンと異なり、唯一のDB層。
ここを通り抜けることはできないので、バリデーションの強さとしては最強です。


## 5. ③コントローラレベル
### メリット
* 特定の場合に限ってバリデーションをかけるみたいなことができる

### デメリット
* コントローラが複雑化して、テストや保守が困難になる

### 補足
コントローラレベルでのバリデーションを考える時、よく話題に上がるのが[Form Objectパターン](https://thoughtbot.com/blog/activemodel-form-objects)。

## 6. ④フロントレベル

### メリット
* ユーザビリティ向上につながる
-> フォーム送信で考えると、ユーザは送信を待たずににフィードバックを得ることができる

### デメリット
* セキュリティレベルが低い
-> ブラウザでJavaScriptをOFFにされていた場合、直接コンソール上で実行された場合などはバリデーションをすり抜けることができてしまう

## 7. ４パターンの関係図
4パターンのバリデーションの関係を図にすると下記のような感じになります。

バリデーションの強さだと、フロント ＜ コントローラ ＜ モデル ＜ DB になります。
結局、DB以外のレベルはバリデーションを何らかの形でスキップされたら、DBに誤ったデータが登録される可能性があることは意識しておきたい点です。

![スクリーンショット 2022-11-24 22.42.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638783/dbd39a5e-bebf-80d6-f1dd-4e765d7ac66e.png)



## 8. 考えたこと

上記それぞれのパターンのメリデメと関係性を踏まえた上で、個人的には下記のような考えに落ち着きました。

* アプリケーション層でブロックしたとしても、何らかの形ですり抜けられてしまったらDBに正しくないデータが保存される可能性がある。DBレベルのバリデーションは積極的に検討したい

* モデルレベルも基本的には保守のしやすさ等から積極的に検討したい。モデルレベルのデメリットである「メソッドによってはバリデーションがスキップされてしまう」件については、まずは「そもそもバリデーションがスキップされる更新系のメソッドをどうしても使用する必要があるのか？」の方に目を向けたい

* コントローラはなるべくスッキリした実装にしたい(複雑な処理を増やして保守を大変にしたくない)ので、コントローラレベルは基本使用しない。特定の条件の場合にバリデーションを通したい時やモデルでその条件を指定するとファットモデルになりそうな時に初めて検討してみるというのが良さそう

* UXにこだわるのであれば、モデルレベルやデータベースレベルとの併用であればフロントレベルを検討してみても良いかも


## 9. さいごに
バリデーションレベルのトピックは、大枠の良し悪しはあれど、一概にこれが正解といった明確な答えはない奥深いテーマのようです。

「モデルのバリデーションかけとけば大丈夫でしょ！」みたいな安易な考えは捨てて、さらに開発経験を積む中で、その場にあった最適解を出せるよう今後も追求していきたいと思います。

## 参考
https://techracho.bpsinc.jp/hachi8833/2021_12_02/55771

https://railsguides.jp/active_record_validations.html#%E3%83%90%E3%83%AA%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E8%A1%8C%E3%81%AA%E3%81%86%E7%90%86%E7%94%B1

https://coffee-engineer4.com/2021/07/31/%E3%80%90rails%E3%80%91%E3%83%90%E3%83%AA%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%B9%E3%82%AD%E3%83%83%E3%83%97%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E6%99%82%E3%81%AB%E8%80%83/
VBA 分からん

VBAでセミナーの参加者を自動で転帰し、シート2で曜日・時間ごとに平均参加者を計算するコードを作成中です。
ループ処理で曜日・時間を取得する事が出来ていたのに突然「引数の数が一致していません」などエラーが出るようになってしまいました。コード修正中です。

```vb
Sub 参加者自動集計()

    Dim sheet As Worksheet
    Dim sheet2 As Worksheet
    Set sheet = Worksheets("アウトプット")
    Set sheet2 = Worksheets("参加者数傾向")
    
    Dim data As String
    Dim data2 As String
    Dim data3 As String
    Dim Cdata As Date
    Dim A, B
    Dim i As Long
    Dim arry As Variant
    Dim date_time As String
    Dim myrange As Range
    Dim myObj As Range
    Dim keyword As String
    Set myrange = sheet2.Range("B5:Q5")
    Dim tbl As ListObject
    Set tbl = sheet2.ListObjects("テーブル1")
    Dim xlLastRow As Long                 'Excel自体の最終行
    Dim lastRow As Long                   '最終行
    Dim row As Integer
    
    'tbl.DataBodyRange.Select '正常にテーブル全体が取得できている
     tbl.HeaderRowRange(2).Range.Select
     tbl.ListRows(10).Range.Select
    
        For i = 5 To 6
        
         data = sheet.Cells(2, i)
         data2 = Mid(data, InStr(data, "(") + 1)
         data3 = Left(data2, InStr(data2, ")") - 1)
         
         Cdata = sheet.Cells(3, i)
         B = CStr(Cdata) 'CStrは日付などを文字列に変換する
            'Debug.Print B 文字列に変換された開催時間が全て取得出来ている
         
         date_time = data3 + B
           'Debug.Print date_time 'String型での曜日と時間が全て取得出来ている
           
         
         keyword = date_time
         
         Set myObj = myrange.Find(keyword, LookAt:=xlWhole)
            Debug.Print myObj.Column  'myObj.Column 'データが一致する列が取得できている
         
         
        Next i
    
```

その後

```vb
data = sheet.Cells(2, i)
```
を

```vb
data = sheet.Range("B" & i)
```
に戻したら直りました。
何なんだろう？
GAS 基礎編③メモ

GASの勉強中です。
自分用メモ

## 確認用メッセージボックスの表示

```javascript
 if (Browser.msgBox('シートの初期化', '実行していいですか？', Browser.Buttons.OK_CANCEL) === 'cancel') {
    return;
  }
```

```javascript
# function全体
function initSheet() {
  var sheet = SpreadsheetApp.getActiveSheet();
  var names = ['taguchi', 'fkoji', 'dotinstall'];
  var i;
  var scores = [];

  if (Browser.msgBox('シートの初期化', '実行していいですか？', Browser.Buttons.OK_CANCEL) === 'cancel') {
    return;
  }

  sheet.clear();

  for (i = 1; i <= 10; i++) {
    scores.push([
      names[Math.floor(Math.random() * names.length )],
      Math.floor(Math.random() * 101 )
    ]);
  }

  sheet.getRange(1, 1, 10, 2).setValues(scores);
}
```
【Mac】Zoomのミュート切り替えのショートカットキーを設定する

# はじめに
こんにちは、株式会社 Acompany の竹田です。
本記事は[Acompany Advent Calendar 2022](https://qiita.com/advent-calendar/2022/acompany)の6日目の記事となります。

# Zoomで突然話しかけられて慌てる
ってことが多いのですが、みなさんはどうでしょう？
私は突然話しかけられると

1. Zoomのウィンドウをアクティブにする
2. マウスのポインタが意外なところにあることに気づく
3. ミュートボタンを押して返事をする

ということが起きて変な間が空いてしまいます。
これが個人的にはちょっと嫌で、1動作で全部処理させることにします。

# 設定方法
以前はWindowsを使っており、同様のことをしていました。
Windowsをご使用の方は以下の記事をご参考にしてください。

https://qiita.com/take_m/items/f2df78d807723c5fd26e

## Karabiner-Elementsをインストールする
今回はKarabiner-Elementsを使って設定します。
以下のページからインストールしてください。

https://karabiner-elements.pqrs.org/

キー割り当ての設定ができて非常に便利なツールです。

## ショートカットの設定をインポートする
「Control → Commandに変換する」といった単純な設定は`Simple Modification`から設定できるのですが、今回やりたいのは1つのキー入力に対して

- Zoomをアクティブにする
- ミュートを切り替える

という2つの命令を紐付けるため、`Complex Modification`から設定します。
`Add rule` -> `Import more rules from the Internet (Open a web browser)`
でルールコンテンツの一覧が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231065/a1996bde-9c05-4972-bc46-0743a2b427f0.png)

検索窓に「zoom mute」と入力して検索すると`Keychron K8 Microphone Button to Zoom Mute`が出てくるので、インポートしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231065/78cc7606-7c6d-5037-59b4-746403c45628.png)

インポートされたルールをEnableしてやれば設定完了です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231065/ca61cb27-14c4-a898-7cc2-b4579081bc3d.png)

# 使い方
Zoom会議を開いている状態で`Fn + Space`を押すと、Zoomがアクティブになり、ミュートが切り替わります。
これでいつ話しかけれられても大丈夫です。
Javaで何か作ってみる(2022/11/24 Day35)

## 今日やった事
- 何もしなかった。
## 参考にしたもの
- 特になし。
## 所感
- 今日は本当何も勉強しなかった、ただただ反省。。。しかも2日連続
## 明日の予定
- 引き続き、Javaの勉強を進めていく。明日こそは。。。
「平面直角座標への換算」（国土地理院）のoutファイルからPythonでDXF作図する

国土地理院さんの「平面直角座標への換算」
https://vldb.gsi.go.jp/sokuchi/surveycalc/surveycalc/bl2xyf.html
↑で一括計算すると作成されるoutファイルからCADに一気に作図（円をプロット）するプログラムを書きました。

10個程度の座標であれば手入力でも良いでしょうが、50個100個となると入力ミスも増えてストレスが溜まるものだと思います。
私の直近で行った業務では約17000個の座標入力が必要であり、仮に1個の入力で10秒かかるとしても170000秒(約47時間)、8時間勤務だとしても５日で終わらない量のデータを取り扱う必要がありました。
数週間前に作成したプログラムが予想以上に便利だったので、皆さまにも使って頂きたいと思い記事にしました。

※データ量が10億個以下であれば1秒程度で作図が完了します。
※Windowsでの使用を想定していますが、Mac,Linuxでも動作確認済みです。（コマンドが若干異なります...）

導入
---------------------------------------
1.Pythonをインストール

2.コマンドプロンプトで以下のコマンドを実行
```
pip install ezdxf
```

使い方
---------------------------------------
1.ソースコードをどこでもいいので保存します。(拡張子は.py)
2.コマンドプロンプトで以下のコマンドを実行します。（pythonファイルはドラッグ＆ドロップがオススメ）
```
python ******.py
```

3.outファイルをドラッグ＆ドロップ（またはファイルパスを手入力）

コードの説明
---------------------------------------
①outファイルの6行目以降をリストへ追加
②半角スペースで区切りリストへ追加
③X座標を抽出しリストへ追加
④Y座標を抽出しリストへ追加
⑤X座標とY座標および半径を引数として円を作成する


ソースコード
---------------------------------------
```python
import os
import ezdxf 
from decimal import Decimal

i = 0
list1 = []
list2 = []
x_list = []
y_list = []

filepath = input(".outファイルをドラッグアンドドロップしてください。＞＞")
with open(rf"{filepath}",encoding="utf-8") as f:
    for line in f:
        i += 1
        if i > 5:
            list1.append(line)

for i in range(len(list1)):
    list2.append(list1[i].split())
for j in range(len(list2)):
    x_list.append(list2[j][2])
for k in range(len(list2)):
    y_list.append(list2[k][3])

doc = ezdxf.new("R2010", setup=True)
doc.layers.new(name="MyLine2", dxfattribs={'linetype': 'CONTINUOUS', 'color': 1})
msp = doc.modelspace()

for l in range(len(x_list)):
    x = Decimal(y_list[l])
    y = Decimal(x_list[l])
    msp.add_circle(center=[x,y], radius=10, dxfattribs={'layer': 'MyLine2'})

msp.add_circle(center=[x,y], radius=1000, dxfattribs={'layer': 'MyLine2'})
doc.saveas('sample.dxf')

print("作図完了")
print("ファイル名：sample.dxf")
print("ファイル作成場所",os.getcwd())
```

半径はradius=10の部分を変更して使ってください。
（最後にradius=1000と大きめの円を入れている理由は見つけやすいためです。）

参考記事
---------------------------------------
https://qiita.com/shushin/items/f8b82cd07311ac896bc1
Javaで何か作ってみる(2022/11/23 Day34)

## 今日やった事
- 何もしなかった。
## 参考にしたもの
- 特になし。
## 所感
- 今日は本当何も勉強しなかった、ただただ反省。。。
## 明日の予定
- 引き続き、Javaの勉強を進めていく。
NFCリーダでGPGしてみた

# はじめに
今回やりたかったのは、
1. `Yubikey 5 NFC`で
1. `NFC`リーダーを経由して
1. `GPG`（今回はGitの署名）を使うこと。

USBポートに突き刺さるYubikeyを眺めるうちに「いつかへし折るのでは？」と、過去のトラウマが蘇った。
ならば物理接続をやめれば破損しないはずだ、というのが今回の動機。

意外とGPG & NFCの情報が少ないので、自分の動作環境を公開しておく。

:::note alert
本記事の内容は、これら機器の動作を保証するものではありません。
参考としてとらえていただくようお願いします。
:::

# 結論
Mac: 普通にできた
Windows: NFCリーダーのドライバ入れたらできた

# 動作検証
## 使用機材
- USB-NFC3 (I-O DATA製、NFCリーダライタ）
## Mac
`gpg version 2.2.40`にて動作確認。

`USB-NFC3`をUSB接続し、`Yubikey`を上に載せるだけで動いた。
`gpg --card-status`も`git commit`もOK。
署名時にも、いつものPIN入力画面が出て正常に処理された。

## Windows
`gpg version 2.3.0`にて動作確認。

ただ接続しただけだと、`gpg --card-status`でカードの情報が正しく取れなかった。
（認識まではされているが、中の鍵について情報が取れなかった）

`USB-NFC3`サポートソフト（Ver.1.05）を入れると動作した。

# おわりに
知識ゼロのやってみた記事を投稿するべきか相当迷いましたが、
そもそもの情報が少ないようなので投稿に踏み切りました。

`Yubikey 5 NFC`、製品名に`NFC`が付いてるんだからPCでもNFCしたいじゃん？という記事でした。
ArduinoIDE 2.0でM5stack Core2の開発環境を作る

# はじめに。
この記事では，M5stackCore2の開発環境を，ArduinoIDE2.0で準備する手順について説明します。

# USBドライバのインストール
WindowsにM5StackCore2用のデバイスドライバをインストールします。
https://docs.m5stack.com/en/download
の「USB DRIVER & OPEN SOURCE LIBRARY」から，「CH9102_VCP_SER_Windows」をダウンロードしてインストールして下さい。

# Arduino IDE2.0のインストール
Arduinoの公式サイトからインストーラをダウンロードしてインストールします。本記事は，2.0.2で試しました。
https://www.arduino.cc/en/software
Windowsの場合，デバイスドライバのインストール許可を聞かれますので，全部「はい」でインストールします。

# 日本語化
デフォルトでは英語表示なので日本語化します。
メニューから「File」→「Preference」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457890/5f67801f-9ac8-3f9d-7a29-482da9c61e48.png)

Languageを「English」から「日本語」に変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457890/fdf753a0-d3ca-ec34-0523-26f48eb153ed.png)

メニューが日本語化されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457890/32023442-0bf8-8753-22e9-8a8ffc01abb0.png)


# ボードマネージャのインストール
デフォルトの状態ではM5stack Core2のボードが登録されていません。
ですので，M5stackCore2の書込みができるようにボードを登録します。

「ファイル」→「基本設定」を選びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457890/7eb31218-48e2-d32f-9835-343260144bb6.png)

追加のボードマネージャのURLに，下記URLをコピペします。
```
https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/arduino/package_m5stack_index.json
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457890/2a5bae19-63a2-2a36-b995-528888bdc93d.png)

しばらく待つと完了します。

# ボードマネージャでM5StackCore2を追加

「ツール」→「ボード」→「ボードマネージャ」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457890/12915f1b-f0aa-c595-db53-56285a31c6af.png)

検索窓に「m5stack」と入力します。
「M5stack by M5Stack Official」が出てくるので，インストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457890/56fe4bc1-6697-f120-6d31-a9bb73662c66.png)


# ライブラリのインストール
M5stack Core2用のライブラリをインストールします。

「ツール」→「ライブラリ管理」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457890/8533d284-77ab-ebbe-b34a-f11ada4c5540.png)

検索窓に「core2」と入力します。以下の3つをインストールします。依存パッケージのインストールを聞かれるので，依存パッケージもインストールして下さい。
- M5core2 by M5stack
- M5GFX by M5stack
- M5Unifiled by M5stack
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457890/0dd29e0b-a8c3-f09a-550e-ff5cba7e11e5.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457890/17ae7b1d-f53e-0bec-3b52-4c93ff1286db.png)

# M5stack Core2を認識させる。
この時点で，接続先としてM5StackCore2を選択できるはずです。M5StackCore2を接続します。
✔→▷の右にあるドロップダウンをクリックし，「他のボードとポートを選択」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457890/5d20614c-d31c-87a2-c683-ca2a15b044c8.png)

ボードの検索窓で「M5」と入力し，「M5stack-Core2」を選択します。M5StackCore2がつながっているであろうシリアルポート(USB)を選択してOKします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457890/41c0f3c3-258a-6c45-4614-2a4edaffec11.png)

# 接続確認
「ツール」→「ボード情報を取得」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457890/1a50979f-573f-a7d5-7bec-c481f2425132.png)

ボード情報のBNとして「M5stack-Core2」が表示されていれば認識されています。おつかれさまでした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457890/13d4ae46-67ce-dbe7-7035-4014e2cd1a2d.png)
機械学習の疑問点

# 背景
機械学習を学んでいく中で出てきた不明点について調査する

## 尤度、最尤推定とは
・尤度
尤もらしさを表す指標
・最尤推定
最も尤もらしい量を推定すること
(=尤度が最大となる最尤推定量を求めること)
参考＜https://okigaru-data-science.com/maximum-likelihood/＞

## 機械学習と深層学習の違いとは
・機械学習
「入力→モデル→出力」といったプロセスで実現される。
モデルの種別は主に下記3個
- 教師あり・・・正解データを与える
               高い精度で予測を行いたい時に使用させる
- 教師なし・・・正解データは与えず、データ同士の関連を学習する。
               データ同士の関連を学習させる。よって、異常の判別やデータの分類を行いたい時に使用される
- 強化学習・・・目的に基づいて、最も良い結果を得られる方法を学習させます。碁、将棋のAIや、自動運転に使われます。

・深層学習（ディープラーニング）
深層学習では、ディープニューラルネットワークと呼ばれる手法を用いて学習を行います。
深層学習（ディープラーニング）のポイントは、データが各層で処理されていく中で、データの持つ特徴が判断されるという点です。他の手法のようにデータが持っている特徴を人間が教えなくても、ニューラルネットワークが特徴を見つけます。
これは、人間がデータの特徴をうまく扱えないような抽象的な問題であっても結果を出せるということです。そのため、画像認識、音声処理、言語処理といった分野で大きな成果を上げています。

・機械学習と深層学習の違いとは
●機械学習
- 人間がデータの特徴を判断する
- 具体的な学習目的や内容については人間が手を加え、学習と分析の効率化を図る
- アルゴリズムは「教師あり」「教師なし」「強化学習」の3つに分類

●深層学習（ディープラーニング）
- 機械学習の手法の1つ
- 機械がデータの特徴を判断する
- 何を学ぶべきなのかも機械が判断するため、抽象的な問題の解決を効率化する
- アルゴリズムは「教師あり」「教師なし」「強化学習」の3つすべてに応用
- 高機能だが、ニューラルネットワークのトレーニングには大量のデータが必要のため、学習に時間がかかり、高い処理能力を持つコンピュータも求められるといった課題がある
⇒ 目的や手段によって使い分けることが重要

<参考）https://www.dsk-cloud.com/blog/difference-machine-learning-and-deep-learning>

## クラスタリングと分類の違い
・クラスタリング 
教師なし学習で、どのグループに所属するなどの答えはなく、データをもとに特徴を学習しグループ分けします。

・分類
どのグループに所属するかの答えをもとに学習したモデルを用いて、答えが未知のデータがどのグループに所属するかを予測します。

参照＜https://ledge.ai/clustering/＞

## カスケード型識別器（分類器）とは 
- アンサンブル学習の一種。複数の学習モデルを融合させて一つの学習モデルを生成する手法
- 複数の強識別器を連結した識別器
- 手前にある強識別器ほど判別基準を緩く（誤検出を高く）することで、特徴量が少なくなり計算時間を高速化
  → 非正解の入力を手前の強識別器で素早く排除でき、全体の処理を高速化できます。

参照＜https://algorithm.joho.info/machine-learning/cascade-object-detector/＞

## 学習データ、検証データ、評価データ
Coming soon
XSS について

## 勉強前イメージ

クロスサイトスクリプティングは知ってるけど、種類があるらしいよ！

## 調査

### XSS について

XSSとは、クロスサイトスクリプティングと読み
動的サイトに不正なスクリプトを挿入することで、サービスを利用しているエンドユーザーに攻撃行うサイバー攻撃です。
脆弱性の中では特に有名ですが、IPAへの届け出で2021年の4月～6月では最も多く報告されているものになります。

詳細は [こちら](https://qiita.com/miyuki_samitani/items/f9d7feaf06aff447c691)

### XSSの種類

- Reflected XSS

反射型と呼ばれています。
メールやサイトに不正なスクリプトのリンクを設置して脆弱性のあるサイトへ飛ばします。
ユーザに不正なスクリプトを実行させて情報の取得を行います。
スクリプトは送信者へ返ることから反射型と呼ばれています。

- Stored/Persistent XSS

格納型や蓄積型、時速型とも呼ばれています。
webアプリケーションにスクリプトを格納させて、ユーザが閲覧するたびにスクリプトが実行されるものです。
スクリプトが実行され情報が取得されてしまいます。
メールを送ったりしなくてもよいので、効率的ではあります。

- DOM Based XSS

Document Object Modelの略でwebブラウザ上で稼働するjavascript上の脆弱性を使って
webブラウザ上でスクリプトを実行させて情報の取得を行います。
DOM Based XSSはクライアント側だけの処理で攻撃が完了してしまう特徴があります。

## 勉強後イメージ

種類あるなんて知らなかった・・・・

## 参考

- [クロスサイトスクリプティング（XSS）とは？攻撃の被害と対策](https://hnavi.co.jp/knowledge/blog/cross-site-scripting/)
- [「クロスサイト・スクリプティング（XSS）」の脆弱性の種類： ](https://www.ipa.go.jp/files/000024726.pdf)
画像処理を使った球状黒鉛鋳鉄（FCD）の黒鉛球状化率の測定（新旧規格の比較）

# はじめに
今年（2022年）4月にJIS G5502 球状黒鉛鋳鉄品が改正されました。ここでは、改正前（G5502-2007）を旧規格、改正後（G5502-2022）を新規格と呼ぶことにします。これらの規格において、組織画像から画像処理によって黒鉛球状化率を測定する方法として、次のものが規定されています。なお、詳しい測定方法について知りたい方はJIS等でご確認ください。

## 新規格
JIS法：JIS G5505-2020 CV黒鉛鋳鉄品 と同じ方法です。

ISO法：次の①、②の方法があります。
①ISO945-1の黒鉛形状区分のタイプⅥおよびⅤに分類される黒鉛の全面積を、全黒鉛の面積で割って求める方法
②丸み係数が0.6以上の黒鉛の面積を、全黒鉛粒子の面積で割って求める方法

## 旧規格
組織写真等から黒鉛球状化率を測定する方法と同様な方法で行うと規定されています（画像処理の方法は規定されていません）。なお、組織写真等から球状化率を測定するには、旧規格の「黒鉛粒の形状分類図」のⅤとⅥの黒鉛数を、全黒鉛数で割って求めます。

## 新旧規格の球状化率の比較
同じ画像を用いて、新規格（JIS法、ISO法の②）と旧規格で黒鉛球状化率を求め、結果を比較しました。旧規格については、丸み係数のしきい値で形状ⅤとⅥの黒鉛を分類しました。用いた丸み係数のしきい値は0.452<sup>2)</sup>と0.42<sup>3)</sup>で、これらのしきい値を用いる方法を旧規格A、Bと呼ぶことにします。

旧規格A：しきい値0.452
旧規格B：しきい値0.42

球状化率の評価に用いた最小黒鉛の大きさは、いずれの方法についても10μmとしました。

下表に結果を示します。新規格に比べて旧規格の球状化率が大きいことが分かります。特に、新規格のJIS法と旧規格Bの結果を比較すると、旧規格Bの方が約10％大きくなっています。
新規格のJIS法は以前NIK法と呼ばれていたものと同じです。NIK法で得られる球状化率は、旧JISで得られる球状化率に比べて10％程度低い値を取る<sup>4)</sup>ので、上記の約10％の差はこのことを表していると考えられます。一方、ISO法②においても旧規格に比べて大きいしきい値を0.6としているため、旧規格に比べて低めの球状化率になるのは否めないと考えられます。

表　新規格（JIS法、ISO法の②）と旧規格（丸み係数法）による黒鉛球状化率(%)
|ファイル名  |新規格<br>JIS法|新規格<br>ISO法の② |旧規格A<br>丸み係数0.456|旧規格B<br>丸み係数0.42|
|---|---|---|---|---|
|Sample1  |83.5  |86.2  |91.3  |93.1  |
|Sample2  |82.8  |89.5  |89.8  |92.8  |
|Sample3  |82.4  |87.7  |91.8  |93.5  |

## プログラム
旧規格の球状化率の測定プログラム
https://github.com/repositoryfiles/Nodularity-G5502-2007

新規格の球状化率の測定プログラム
https://github.com/repositoryfiles/Nodularity

## 終わりに
JISでは、新規格、旧規格とも球状化率80％以上を求めています。新規格は旧規格に比べて低めの球状化率になりやすいので、新規格での球状化率を求められた際は注意すべきと考えます。なお、JIS G5502の7.6.1には、球状化率が80％未満の場合の合否判定についての記載があることからも、厳しい規格になったことが窺（うかが）い知れます。ご参考になれば幸いです。

# 参考
1)[球状黒鉛鋳鉄品のJIS改正について, 鋳物, 59-5, 1987, pp.254-260](https://www.jstage.jst.go.jp/article/imono/59/5/59_254/_pdf/-char/ja)
2)[青木ほか, 画像解析を用いた球状黒鉛鋳鉄の黒鉛球状化率の評価方法, 近畿大学工学部研究報告, 55, 2021年, pp.1-6](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&ved=2ahUKEwj2nvjmsMT7AhWWHnAKHdaLDDMQFnoECBAQAQ&url=https%3A%2F%2Fkindai.repo.nii.ac.jp%2F%3Faction%3Drepository_action_common_download%26item_id%3D22402%26item_no%3D1%26attribute_id%3D40%26file_no%3D1&usg=AOvVaw3x--XJEIGIfdYg7wYjjBOW)
3)[斎藤, 画像処理による球状黒鉛鋳鉄品の黒鉛球状化率判定試験, 工業技術研究報告書, 50, 2022年, pp.42-44](http://www.iri.pref.niigata.jp/pdf/houkoku/r3houkoku.pdf#page=45)
4)新版 球状黒鉛鋳鉄品の標準顕微鏡組織写真集, 1996, （社）日本強靭鋳鉄協会, pp.2-4
対話形式のシェルを作る

対話型のシェルを作成することがよくあるので、備忘も兼ねて作成方法を簡単に記載します。

## 対話型のシェル

ユーザーからなんらかのインプットを受けてそのインプットをもとにシェルで処理を行い、結果を出力したりする。
今回は血液型を入力すると、どのような性格かを出力するシェルを参考に解説します。

```bash:blood_type.sh
#!/bin/sh

echo "あなたの血液型を入力してください。"
read -p '[A/B/O/AB]'  bloodtype

echo -e "\n${bloodtype}型でよろしければyesと入力してください。"
read -p '[yes]' agree

if [ $agree != "yes" ]; then
    exit 1
fi

echo ""
case "$bloodtype" in
    a | A)   echo "A型の人は几帳面です";;
    b | B)   echo "B型の人は好奇心旺盛です";;
    o | O)   echo "O型の人は穏やかな性格です";;
    ab | AB) echo "AB型の人は感受性が豊かです";;
    *)       echo "正しく読み取れませんでした。";;
esac
```

■シェルの実行結果
![スクリーンショット 2022-11-24 22.16.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581663/073d019e-c5c9-805d-c187-401a3d7c6c5b.png)

### 1.ユーザーからの入力を変数に格納する
readコマンドを使ってユーザーからの入力を変数（bloodtype,agree）に格納します。
-pオプションで入力する前に表示する文字列（[A/B/O/AB],[yes]）を指定できます。

```bash
echo "あなたの血液型を入力してください。"
read -p '[A/B/O/AB]'  bloodtype

echo -e "\n${bloodtype}型でよろしければyesと入力してください。"
read -p '[yes]' agree
```

### 2.if文で条件分岐

if分で条件（agreeがyesではない）に一致する時、exit 1でシェルを終了します。

```bash
if [ $agree != "yes" ]; then
    exit 1
fi
```

### 3.case文で条件分岐
大文字小文字どちらでも対応できるような条件で、それぞれのケースに一致した場合の処理を記載します。


```bash
echo ""
case "$bloodtype" in
    a | A)   echo "A型の人は几帳面です";;
    b | B)   echo "B型の人は好奇心旺盛です";;
    o | O)   echo "O型の人は穏やかな性格です";;
    ab | AB) echo "AB型の人は感受性が豊かです";;
    *)       echo "正しく読み取れませんでした。";;
esac
```

以上、シェルで何か作りたい時の参考にしてください。
react-transition-group使ってみた

```
import { useState } from "react";
import { CSSTransition } from "react-transition-group";
import styled from "@emotion/styled";

const MyStyles = styled.div`
    .fade-enter-done {
      background: red;
      height: 100px;
    }
    
    .fade-enter {
      height: 0;
      overflow: hidden;
    }

    .fade-enter-active {
      transition: height 1s;
      background: green;
      height: 100px;
    }
`;

export const  App = () => {
  const [animate, setAnimate] = useState(false);
  return (
    <MyStyles>
      <button onClick={() => setAnimate((prev) => !prev)}>
        {animate ? "falseにする" : "trueにする"}
      </button>
      <CSSTransition classNames="fade" in={animate} timeout={1000} unmountOnExit>
        {(state) => {
          return <h1>{state}</h1>;
        }}
      </CSSTransition>
    </MyStyles>
  );
}
```
Vue.jsに使えるアニメーションのライブラリ4つ

Vue.jsでアニメーションやりたいと思ったのですが日本語の記事がなかったので、書きます。


## v-wave ... ウェーブアニメーション導入のためのシンプルなライブラリ
マテリアルデザインにあるリップルエフェクトを実装できるライブラリで、かなり更新頻度も高く、人気らしい。
Nuxt用の設定もあってラクラクに導入できそうです。

Website:
https://justintaddei.github.io/v-wave/

GitHub:
https://github.com/justintaddei/v-wave

## VueAnimXYZ ... 何でもできて、イケてる感じ
AnimXYZが出しているVueバージョンのもの。

Website: 
https://animxyz.com/

GitHub: 
https://github.com/ingram-projects/animxyz

Vue Installation:
https://animxyz.com/docs/#vue-installation


## vue-kinesis ... 色々な動きをつけられる

Website:
https://aminerman.com/kinesis/

GitHub:
https://github.com/Aminerman/vue-kinesis


## vue2-particles ( vue3-particles ) ... 多機能だが複雑で面倒

Website: 
https://particles.js.org/

GitHub:
https://github.com/matteobruni/tsparticles/tree/main/components/vue

## おわりに
私は結局-waveに落ち着きました。
他のライブラリは何でもできる感があって逆に萎えちゃいました。

実際、リップルエフェクトのウェーブがあれば大概のアニメーション需要に応えられるかもしれません。だからv-waveはずっと人気なのかも。

感想はかなーり主観的な私個人の感想が入っているので、ちゃんと検討したい方はそれぞれしっかりみてみると良いと思います。
「New Relic実践入門」を読んだ

【完走賞】MxShun ひとりマラソン 🏃 Advent Calendar 2022 毎週月曜日は読書した内容をアウトプットしよう！2記事目です。

New Relic はアプリケーションパフォーマンス管理ツールのひとつです。

今回は「New Relic実践入門」を読んだので、その内容を簡単にまとめたいと思います。

https://www.shoeisha.co.jp/book/detail/9784798166599

## オブザーバビリティとは
**オブザーバビリティ**（**可観測性**）とは、複雑な IT システムやアプリケーションの状態といったデジタル上の動きを常に把握するという性質、および把握するための取り組みを指します。
似たような言葉に「モニタリング（監視）」がありますが、事前に定義された異常に発生したときに単に通知するモニタリングに対し、「オブザーバビリティ（可観測性）」を備えたシステムでは問題が生じた原因とシステムの動作がどのようになっているかをリアルタイムに把握できる点で区別されます。また、長期的なアプリケーションパフォーマンスの改善や品質の向上に取り組むことも可能になり、利用者のユーザー体験も把握できるようになります。
オブザーバビリティによって、システムおよびデジタルサービスの運用監視技術を進化させることができるのです。

## オブザーバビリティに必要不可欠な３要素
### 収集
複雑なマイクロサービスアーキテクチャ、増え続けるデプロイメント、さらにクラウド化やコンテナ化されたシステムのすべてのテレメトリーデータを収集する必要があります。
これらのデータを詳細かつ間断なく集めるために、オープンソースの情報収集エージェントを利用すれば、徹底的かつオープンな収集が可能になります。たとえば、メトリクス用の Prometheus、Telegraf、StatsD、DropWizard、Micrometer、トレース用のJaeger、Zipkin、ログ収集・フィルタリング用のFluentd、Fluent Bit、Logstashなどがあります。

### 分析
収集したデータからなんらかの洞察が得られないのであれば収集の意味がありません。
データの分析や構造化は、重要な情報をできるだけ速く効率的に明らかにするための鍵となります。

### 可視性
オブザーバビリティの目的は、テレメトリーデータに可視性と明瞭性を与え、アクションに結び付けることです。定義したアラートや AIOps によるプロアクティブな異常検知によってアプリケーションの以上や問題を早期に発見し改善できるため、平均検出時間（MTTD）や平均修復時間（MTTR）が劇的に短縮されます。

## テレメトリーデータとは
**テレメトリーデータ**とは、メトリクス、ログ、トレースといったシステムの状態を表すデータを意味しています。

### メトリクス
**メトリクス**は定期的にグループ化または収集された測定値の集合で、特定期間のデータの集計を表します。

### ログ
**ログ**は特定のコードが実行されたときのシステムが生成する単なるテキスト行です。開発者や運用・保守派、コードのトラブルシューティングを行い、コードの実行をさかのぼって検証および調査することをログに大きく依存しています。

### トレース
**トレース**はマイクロサービス間もしくは異なるコンポーネント間のイベントもしくはトランザクションんの連携する状態を表します。

## New Relic One の全体像
New Relic のプラットフォームは「New Relic One」と呼ばれ（2021年現在）、大きく次の３つから構成されます。

### 1. Telemetry Data Platform
New Relic Agent を含む OSS ツールによって取得される、あらゆるテレメトリーデータを保管します。さらに、保管データに対してクエリを実行することによって、チャート作成やそれらのダッシュボード表示ができます。

### 2. Full-Stack Observability
計測データを New Relic の長年の知見に基づいて分析・可視化したユーザーインターフェースを提供します。

### 3. Alerts and Applied Intelligence
従来型の閾値ベースのアラートの作成及び通知を行うと同時に、AIOps のコンセプトに基づき、システムの以上を自動検知したり、さまざまなアラートの取り組みとアラート同士の関連付けを行います。

## おわりに
ユーザの要求やビジネスロジックの複雑化に伴い、それを実現するシステムも高度・複雑化しています。特にマイクロサービスの爆発的な流行に伴い、アプリケーションパフォーマンスのボトルネックの検知や各マイクロサービスの問題の切り分けが難しくなっているのを肌に感じています。
New Relic を用いることでシステムの状態と潜在的な課題をあぶり出し、さらに定常運用も簡素化・効率化できるという点でよいサービスだと感じました。

今回まとめたのは本書１部の極わずかな部分で、残りの多くの書面は具体的な New Relic のサービスの利用手順やTips、ケース別の活用方法などが細かくまとめられています。

https://www.shoeisha.co.jp/book/detail/9784798166599
音楽の力でロング・ディスタンス友情を維持するツール

### WHYこのプロジェクト？
今年4月に、仕事のために台北から東京に移住しました。
今まで半年過ぎて東京に在住しても、時々寂しさを感じます。
ラインやフェースタイムが便利でも、対面じゃないとできないことたくさんあります。
一番懐かしいのは、友人と一緒に映画を見ることとライブに行くことです。
技術がとてもすごく、今はロング・ディスタンスでもNetflix Partyで一緒に映画見えます（しかし電波の要求がありますので、よく予定作成しても見えない場合があります）
そして、一緒にライブに行くことは無理だが、Spotifyで共有プレイリストが作れます。
でも結局、皆が仕事や生活を忙しすぎて、そのプレイリストを忘れてしまいことがよくあります。
ロング・ディスタンスでも、大切な友情を維持するために、Spotify＆Lineを連携するノーコードツールを作りました！
### 使った技術
・iPaaSのIFTTT：Spotify(If This)/ Line(Then That)
### IFTTTの画面
![截圖 2022-12-01 下午6.57.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2885175/ae1c1039-9857-2be6-f152-d11aaf2fda5d.png)
### 機能紹介
共有プレイリストに、誰か新しい曲を追加しましたら、Lineに通知を送信します。
その通知が含む内容は 1.曲名 2.アーティスト名 3.アルバム名 4.プレイリスト名 5.加入者 6.加入時間 と7.曲のSpotifyリンクです！
### 実装動画
<blockquote class="twitter-tweet"><p lang="zxx" dir="ltr"><a href="https://t.co/BRbjcyhqp9">pic.twitter.com/BRbjcyhqp9</a></p>&mdash; W. Hsu (@winniexedge) <a href="https://twitter.com/winniexedge/status/1595766399103746048?ref_src=twsrc%5Etfw">November 24, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### 感想
どんな仲良い友達でも、距離が長くなりましたら、友情が絶対に薄くなります。
例えば、デンマークで1年間留学した時に、海外の親友たくさんできました（国籍は本当に色々：タイ・シンガポール・フランス・デンマーク。。。）。
しかし、今まで4年間を経って、最初に１ヶ月１回しゃべる頻度でも、半年または１年間１回になってしまいました。
この機能を通して、友達様々な国に散らばでも、より友情が続けられると思います。
もちろん、ロング・ディスタンスの恋人も是非運用できます。
Storybook  で特定の Story で Controls を無効にする

# 概要

[Storybook](https://storybook.js.org/) のアドオンの一種である [Controls](https://storybook.js.org/docs/react/essentials/controls) を使用するストーリーとしないストーリーがある際に、使用しないストーリーでは Controls パネルを使用できないようにする。

# モチベーション

粒度の小さいコンポーネントは1ストーリーで複数の props パターンをレンダリングすることがあり、その場合は Controls が不要になるため。

# バージョン

- `@storybook/react` 6.5.12

# 対応方法

各ストーリーの `parameters` フィールドで、 props ごとに Controls を無効化するための `exclude` オプションが使用できるが、ここで正規表現を用いることができるので、全ての props がマッチするようにする。

```js
export default {
  title: 'SampleComponent',
  component: Component,
  parameters: {
    controls: {
      exclude: /.*/g
    }
  }
```

こんな感じになる。

![スクリーンショット 2022-11-24 21.59.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/914610/c90d769d-0fc3-b2b5-e7d2-ec7b7ef5cc33.png)

# 参考

https://stackoverflow.com/questions/69061079/how-can-hide-storybook-control-per-story-arg?rq=1
【日記】プログラマーになって２ヶ月

## なろうと思ったきっかけ

プログラマーなる前まではスポーツトレーナーとして活動しておりました。
その時は若干「IT業界」というものに憧れはあったものの、まさかその業界に足を踏み入れるとは思っていませんでした。

きっかけは仕事中に腰のヘルニアをやってしまった際　。元々高校の部活などがハードで腰を壊しては治り壊しては治りの繰り返しだったので、このヘルニアを機に体資本の業界からは引退しようと思いました。

そしてもう一つのきっかけとなったのが、攻殻機動隊。はじめはよくわからない内容だなあって感じの感想でしたが、Youtubeの考察動画や、アニメに出てくる用語解説の動画などを見てこのアニメすごいな、と感じてきました。そしてアニメ２周目を見終わるころにはもう電脳化したいとまで思うほどになりました。こうしてITへの興味がどんどん上がっていってこの業界に転職することを決意しました。

## 未経験スタート
自分が入った会社は最初の半年間でプログラミングの研修を社内で行い、合格→修了したら現場に入れるというものでした。自分は当時パソコンも購入したばかりで、ろくにタイピングもできなかったので研修序盤は随分苦労したのを覚えています。言語は主にPHPを学んでいました。よく「PHPは初学者でも学びやすい」とウェブサイトで見た覚えがありますが、それでも自分には充分に難しかったです。何度も挫折を経験しました。特に自分は学習していてシンタックスエラーを頻繁に起こしていたのでなんでこんな初歩的なミスで何時間も悩んでるんだろう。。と痛感しておりました。土壇場でなんとか研修を修了した自分は晴れてプログラマーデビューを果たしました。

## プログラマーになってみて
正直まだ２ヶ月なので覚えることが多すぎて毎日しんどい思いをしています。ただ前の仕事で感じていた体資本の業界への不安などは解消され、今の仕事の方が自身の成長を実感できる瞬間がおおいのでやりがいは大いに感じております。
またプログラマーと一概に言っていますが、コードを書いてレビューをいただく機会で、コミュニケーションをとる機会が多いので、コード以外のスキル（例えばなぜこう言ったコードを書いたのかを説明できる文章構成能力）などが成長できると感じており、大変満足しております。３ヶ月目も頑張りたいと思います。ありがとうございました。
Pythonで中学 文字式の計算

Pythonで中学 数学の「文字式の計算」をする方法を紹介します。

## はじめに

Pythonがインストールしてあることが前提です。

また、ターミナルなどでファイルの実行結果を出力できることが前提です。

なお、Pythonでの基本的な計算方法を知っておく必要があります。
こちらの記事を参考にしてください。

https://qiita.com/akiba_burari/items/5bb4c083b30768a33aa1

## 必要なもの

Pythonが使えるデバイス。
パソコン、ラズパイ、タブレット、スマホなど。

※自分はChromebookのLinuxを使っています。

## sympyをインストールする

まずはじめに、代数計算のためのPythonライブラリ「sympy」をインストールします。

最新版をインストールしましょう。
```
pip3 install sympy==1.9
```
sympyをインストールするには、Pythonがすでにインストールされていることが前提です。
インストールできない人は以下の方法でインストールできるかもしれません。
```
sudo apt-get install python-pip
sudo pip install sympy
```


## コードを作成する

以下のコードをコピペして自分のファイルに保存してください。

※ファイル名は基本的に何でもいいのですが、絶対に「sympy.py」にはしないでください。ライブラリ名と同じ名前になるので正しく実行できません。

### 4(2×X-3)-(3Y-5)


```
import sympy

x = sympy.Symbol('x')
y = sympy.Symbol('y')

expr =4*(2*x-3) - (3*y-5)

print(expr)

#出力結果→ 8*x - 3*y - 7
# 答え 8x-3y-7
```

## 応用例

中学の「文字式の計算」を実際に解いてみましょう。

### 1次式の加減

### (2X-3)-(3X-7)


```
import sympy

x = sympy.Symbol('x')
y = sympy.Symbol('y')

expr =(2*x-3)-(3*x-7)

print(expr)

#出力結果→ 4 - x
#答え 4-x
```





### 1次式と数の乗法


### -(-6Y+9)÷(-3)

```
import sympy

x = sympy.Symbol('x')
y = sympy.Symbol('y')

expr =-(-6*y+9)/(-3)

print(expr)

#出力結果→ 3 - 2*y
#答え 3-2y
```




### いろいろな計算


### 3(2X-3)-2(4X-5)

```
import sympy

x = sympy.Symbol('x')
y = sympy.Symbol('y')

expr =3*(2*x-3)-2*(4*x-5)

print(expr)

#出力結果→ 1 - 2*x
# 答え 1-2x
```

## 関連記事

【超基礎編】Pythonで中学 数学の問題を自動作成する方法 - Qiita 

https://qiita.com/akiba_burari/items/f8a11cf0533b889e0af3

Pythonで中学 比例の計算・グラフを描く方法 - Qiita 

https://qiita.com/akiba_burari/items/954f832b408fef353aa3

Pythonで中学方程式の計算 - Qiita 

https://qiita.com/akiba_burari/items/d185a2224c7bb87e5cdf

Python で計算する準備　足し算・引き算・掛け算・割り算・分数・累乗 - Qiita 

https://qiita.com/akiba_burari/items/5bb4c083b30768a33aa1
【VSCode】推奨拡張機能をワークスペースに設定する方法

VSCodeではプロジェクトに設定ファイルを設置することでワークスペースごとに推奨・非推奨の拡張機能を表示することができる機能があります。

VSCodeの設定の統一は後々行うと、拡張を導入したことでの修正が必要になるなど時間コストがかかる可能性があるのでプロジェクト初期に行うのがおすすめです。

また、開発途中で拡張機能を設定した場合でもチームメンバーへ共有できるで開発環境の統一に便利です。

## 推奨拡張機能を表示する

[公式ドキュメント](https://code.visualstudio.com/docs/editor/extension-marketplace#_workspace-recommended-extensions)

### 設定方法

1. 推奨したい拡張機能のページにアクセスします。

    ![スクリーンショット 2022-11-24 19.42.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/718184/ada4907f-4713-27ae-ff78-e484c1d31204.png)

1. command+shift+pでコマンドパレットを開き、 `拡張機能：ワークスペース フォルダーの推奨事項に拡張機能を追加する Extensions: Add to Recommended Extensions (Workspace Folder)` を選択します。

    ![スクリーンショット 2022-11-24 19.45.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/718184/b4e9ef3b-86c0-fd00-881a-ebaa37fbd719.png)

    .vscode/extensions.jsonがない場合は生成され、拡張機能が `recommendations` に追加されます。

    ![スクリーンショット 2022-11-24 19.49.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/718184/c00d03c1-c867-3dd3-8c56-1eb57fe4a289.png)

以上で設定は完了です！

recommendationsは `{publisher}.${name}` の形式で記述します。

 `{publisher}.${name}` は拡張機能の詳細の画面右にある識別子から確認可能です。

![スクリーンショット 2022-11-24 19.53.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/718184/43ac3684-ebae-2294-ddd1-aea5bb7afcb5.png)

または、拡張機能のメニューから「拡張機能IDをコピー」でも取得できます。

![スクリーンショット 2022-11-24 20.29.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/718184/77e82be8-35da-84ed-b5e1-ee40844598c6.png)

### 推奨機能のインストール方法

1. 推奨機能を表示

    推奨拡張機能をインストールしていない環境でそのプロジェクトを開くと、右下にポップアップが表示されるので、「推奨事項を表示」をクリックします。
    
    ![スクリーンショット 2022-11-24 21.19.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/718184/45fa4c61-14b3-a705-8479-1b209bd67b9b.png)
    
    または、拡張機能メニューを開いて、検索窓に  ****`@recommended`** と入力することでも表示可能です。
    
    ![スクリーンショット 2022-11-24 20.25.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/718184/5c9278d1-f5f9-19e1-b0aa-bc7ca33eae5b.png)


1. 推奨機能をインストール

インストールされていない拡張機能はインストールボタンが表示されるので、クリックすることでインストール可能です。

まとめてインストールする場合は、ワークスペースの推奨事項の横にある↓マークをクリックします。

![スクリーンショット 2022-11-24 21.39.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/718184/451fcbc9-f7d9-eb6a-b5b7-42d8dec44739.png)


## 参考

- ****[【VSCode】拡張機能の推奨設定方法、インストール方法](https://de-milestones.com/vscode-how-to-setup-recommended-tools/)****
- ****[チームで推奨するVSCode拡張機能を共有するtips](https://future-architect.github.io/articles/20200828/)****
- ****[VSCodeの拡張機能・設定を共有してチームみんなでエンジョイナイスDX](https://qiita.com/otsuky/items/f46f5ee9eb11b3a9a4ba)****

---

## 最後に

非推奨拡張機能についての設定方法も参考にはありましたが、特にポップアップも表示されないし、検索方法も見つけられなかったので表示できなかった…。

公式でキーワード検索してもヒットしなかったから今は使えなくなったのか？

disabledの設定もしてみたけどwarningが出てたし、検索してもヒットしなかったから使えなさそう。

非推奨拡張の設定についてよかったらアドバイスください！
動的型付け・静的型付けの簡易的整理と Go 言語の魅力について

# 本記事の目的

* 動的型付け・静的型付けの概念がよくわかってなかったので簡潔に整理した。
* ついでに Go 言語が(個人的に見た感じ)人気な理由についても確認したので、そのメモ。

# 結論

* 動的型付け言語 : 変数などのデータ型の宣言がいらないプログラミング言語
* 静的型付け言語 : 変数などのデータ型の宣言が必要なプログラミング言語

| 種別 | 特徴 | 具体的言語　|
|---|---|---|
| 動的型付け | ・記述量が少なく、簡単に書ける <br> ・解釈の余地がある書き方となるため、複数人での開発だと各コードの意味することが分からず、保守性で物足りないところあるかも | Python, Ruby, PHP... |
| 静的型付け | ・プログラム実行前にバグやエラー箇所を特定できる <br> ・メモリを最適化しパフォーマンス向上させる | Java, C#, Go... |

結論としては・・・
* 生産性をとるなら「動的型付け言語」
    * すばやく学んですばやく実装する、とかであればこちらが向いてそう
* 実行速度や保守性をとるなら「静的型付け言語」
    * 利用者が多くてユーザ体験を重視しないといけない・・・となるとこちらが向いてそう

金融機関では Java が使われていることが少なくないみたいだが、上記背景ゆえかも。スピードよりかは安定運用を重視しての言語採用。

* 静的型付け言語は保守性に優れているものの、動的言語の特徴である「記述量が少なく、簡単に書ける」がなく、学習ハードルが高い・・・。しかし、Go 言語はシンプルにつくられており学習しやすい。いわば「動的ならではの書きやすさ」と「静的ならではの保守しやすさ」のいいとこどりをしているからこそ人気！と言えそう。

# 参考記事

以下記事を参照させていただきました。ありがとうございました！

https://webpia.jp/dynamic-static/

https://qiita.com/wann/items/16920b070dc0483f152a

https://qiita.com/toryuneko/items/c023031b61886cae2a99

https://qiita.com/HiromuMasuda0228/items/39785017ce1e748f38a0
Pietを始める前に知らないと後悔するプログラムの終了条件

# Pietの仕様

https://www.dangermouse.net/esoteric/piet.html

Pietは二次元の画像データをインタープリターが解釈する言語です。
そのため、ソースコードのように明確な端がなく、いくつかの条件を用いて明示的に終了させる必要があります。
もし、明示的に終了をさせないとそのソースコードは無限ループに陥る可能性があります。

公式の<strong>解釈(interpretation)</strong>には以下の二つが終了条件が提示されています。

> If after eight attempts the interpreter cannot leave its current colour block, there is no way out and the program terminates.

要約:インタプリタがカラーブロックから抜け出せなくなったら終了

> If it retraces its route entirely within a white block, there is no way out of the white block and execution should terminate.

要約:ずっとカラーブロックじゃないところを循環してたら終了

どちらに書いてあることもほとんど同じで、これ以上変化する余地がないとみなされた場合は終了すると書いています。

# 典型的な停止(終了)パターン
以下では典型的な停止パターンを示します。

## 十字パターン
![stop_0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2634586/438658bd-d1e9-5d42-f9f9-5e78297fbf85.png)

カラーブロックが十字のパターンです。
これはどの方向から侵入しても必ず停止します。

## I字パターン
![stop_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2634586/54cd2610-12aa-6e91-898e-5d47a8769887.png)

カラーブロックがI字のパターンです。
これはどの方向から侵入しても必ず停止します。

## 空白パターン
![stop_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2634586/0d7137c9-1047-5164-3332-556401cf53b1.png)

これは空白だけで停止させるパターンです。
左上、右上、左下、右下の座標は`(0,0)`,`(4,0)`,`(4,4)`,`(0,4)`とします。
この時、`(0,1)`から右向きに、`(3,0)`から下向きに、`(4,3)`から左向きに、`(1,4)`から上向きに侵入した場合に必ず停止します。

# 停止パターンの一般化
## カラーブロックの場合
カラーブロックの場合、その画像を必ず停止させるのは簡単です。
停止させたいカラーブロックの中で、x座標が最も小さいブロックの左、x座標が最も大きいブロックの右、y座標が最も小さいブロックの上、y座標が最も大きいブロックの下に黒いブロックを置くだけです。ただし、同率がある場合はその同率の中で、もう一つの座標が座標が最も大きいものと小さいものに適応されます。

![creature.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2634586/b71371a2-0105-b93b-6c06-6b1b9fa3879f.png)

この例では足(?)ではy座標が最大となるブロックが二つあるので、その中でx座標が最大のものと最小のもののどちらの下にも黒ブロックをおきます。
尻尾ではx座標が最大となるブロックがいくつもあるのですが、その中でも、y座標が最大と最小のブロックの右に黒ブロックをおいています。

## 白ブロックの場合
白いブロックで停止させる場合は比較的難易度が高いです。

白いブロックで停止させるには、<b>他のカラーブロックに入らずに</b>、ある座標を循環するようなコードを書けばいいです。

おなじ場所を循環するというのは、同じ座標を同じ進行方向で通過したということで判断できます。
もし同じ座標を別に通過したいだと分岐が発生する場合があります。

![stop_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2634586/3f798bc9-9666-f68c-3920-c7265dd89045.png)

このような例では`(5,5)`と`(5,4)`を2回通過していますが、巡回はしてないので停止はしません。

ただ、これ以上白いブロックで停止する例で示すのは少し難しいです。
それどころか循環に入る位置なんかも独特なので私個人として白色のブロックで停止させることはあまりしません。

もし、白で停止させたい場合は手で確認するのが最も確実です。

# 停止を忘れるとどうなるか
無限ループが発生します。
無限ループを作りたい場合はそのしようを活用すると良いでしょう。
【SwiftUI】iOS16から追加されたLabeledContentとは？

# はじめに
iOS16から`LabeledContent`というものが追加されていました。
`LabeledContent`って`Label`となにが違うのって思ったのでちょっと調べてみました。

# 違い
![Simulator Screen Shot - iPhone 14 - 2022-11-24 at 20.29.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/bc659aa1-7495-560f-4944-58b8bd7352aa.png)

`LabeledContent`はUITableViewCellのAccessoryType的なことができる機能っぽいですかね。
ただ、AccessoryTypeより自由度が高そうです。

# 実装方法
## 基本形
Contentの中には何でもいれることができます。
```swift
struct ContentView: View {
    var body: some View {
        LabeledContent {
            Text("SubTitle")
        } label: {
            Text("Title")
        }
    }
}
```

## URL
```swift
struct ContentView: View {
    private let url = "https://qiita.com/SNQ-2001"
    var body: some View {
        List {
            LabeledContent(
                "URL",
                value: URL(string: url)!,
                format: .url.path(.omitIfHTTPFamily)
            )
        }
        .listStyle(.grouped)
    }
}
```
![スクリーンショット 2022-11-24 20.59.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/9bf28bf0-ed26-5415-a288-2b15f3c9bac7.png)

## 日付
```swift
struct ContentView: View {
    var body: some View {
        List {
            LabeledContent(
                "Data",
                value: Date.now,
                format: .dateTime.day()
            )
        }
        .listStyle(.grouped)
    }
}
```
![スクリーンショット 2022-11-24 21.07.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/b686cd3a-960c-a1c4-90e1-a88f035d830b.png)

## パーセント
うまく表示できなかったので空白にしておきます。
誰かアドバイスください。
国によってパーセントの表記が違うのが原因？

## 数値
小数点を四捨五入しています。
```swift
struct ContentView: View {
    var body: some View {
        List {
            LabeledContent(
                "数値",
                value: 50.51142535,
                format: .number.notation(.compactName)
            )
        }
        .listStyle(.grouped)
    }
}
```
![スクリーンショット 2022-11-24 21.12.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/071f81c1-75a6-3e4c-f8ba-ae19a1cfb22d.png)

# おわり
めっちゃ便利なコンポーネントです。
iOS16からしか使えないので出番はまだないと思いますが、これからが楽しみです。
Markdown記法を初めて学んだので書く

### Markdown記法とは  

1. 手軽に文章構造を明示できること
2. 簡単で、覚えやすいこと
3. 読み書きに特別なアプリを必要としないこと
4. それでいて、対応アプリを使えば快適に読み書きできること
引用元：[日本語Markdownユーザー会「Markdownとは」](https://www.markdown.jp/syntax/)

この文章読んだだけじゃさっぱりですが。  
  
この記述で文章を書くと読みやすくなる。そんな認識です。  

**使い方**  


- #を文字の頭につけることでh1タグの役割をしてくれる


# これは例えです (h1) 
## これは例えです(h2)
### これは例えです(h3)

##の数で見出しの大きさが変わる。  
#の後に半角スペースが必要！  

**箇条書きリスト**
-,+,*のいずれかを文章の前に入れると下記のように表示される  

- これは例えです
+ これは例えです
* これは例えです

**番号付きリスト**
番号表記でリストを作りたい時は1.のように数字とピリオドをつける  

1. これは例えです
2. これは例えです
3. これは例えです  
  

などなど。  
まだまだ覚えられていないけどとりあえずMarkdown記法はこんな感じ。  
今度から使えるよう勉強します！
BigQueryでテーブルの作成者を監査ログから調べる方法

BigQueryのテーブルはDETAILSタブから多くの情報を確認することができますが、テーブルの作成者に関する情報は載っていません。

![スクリーンショット_2022-11-24_20_54_27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74551/7dde1058-602e-3e93-b6a9-a4a004735d03.png)

なので、監査ログからテーブルの作成者を調べる方法について説明します。
まずは、以下の記事を参考に監査ログをBigQueryに保存します。

https://qiita.com/shiozaki/private/302aa331c16c5e1badf7

その後、以下のクエリを実行することで、テーブルの作成を行ったユーザーを調べることができます。

```sql
select
  protopayload_auditlog.authenticationInfo.principalEmail as email,
  split(protopayload_auditlog.resourceName, "/")[safe_offset(1)] as project_id,
  split(protopayload_auditlog.resourceName, "/")[safe_offset(3)] as dataset_id,
  split(protopayload_auditlog.resourceName, "/")[safe_offset(5)] as table_id,
  timestamp,
from `<プロジェクトID>.audit_log.cloudaudit_googleapis_com_activity_*`
where
protopayload_auditlog.serviceName = "bigquery.googleapis.com" and
array_length(protopayload_auditlog.authorizationInfo) = 1 and
protopayload_auditlog.authorizationInfo[safe_offset(0)].permission = "bigquery.tables.create" and
regexp_contains(protopayload_auditlog.resourceName, r'projects/.+/datasets/.+/tables/.+')
```
Elixirの無限ループは、なぜStack overflowしないのか？

Elixirで無限ループしたい時、どうしますか？

たぶん、再帰で実現することになると思います。

[この記事](
https://qiita.com/GeekMasahiro/items/e9526add7135db12ac60)を書いた
LEDの点滅では、点滅を無限に繰り返したかったので、次のようにしています。

```Elixir
  defp toggle_pin_forever(output_gpio) do
    GPIO.write(output_gpio, 1)
    GPIO.write(output_gpio, 0)
    toggle_pin_forever(output_gpio)
  end
```

C言語だったら、これってやっちゃダメな典型で、すぐにスタックオーバフローします。
この無限ループって、スタックオーバフローしないのか？
Elixirは関数呼び出しの時にスタック不要な仕組みになってるのか？
と疑問がいっぱい。

末尾再帰の場合はスタックを消費しない仕組みになってるからでした。

https://ja.wikipedia.org/wiki/%E6%9C%AB%E5%B0%BE%E5%86%8D%E5%B8%B0#:~:text=%E6%9C%AB%E5%B0%BE%E5%86%8D%E5%B8%B0%EF%BC%88%E3%81%BE%E3%81%A4%E3%81%B3%E3%81%95%E3%81%84%E3%81%8D,%E5%91%BC%E3%81%B3%E5%87%BA%E3%81%97%E3%82%92%E6%9C%AB%E5%B0%BE%E5%91%BC%E3%81%B3%E5%87%BA%E3%81%97%E3%81%A8%E3%81%84%E3%81%86%E3%80%82

ああ。なるほど。これで安心して無限ループできます。

この記事に、Stack overflowするElixirのプログラムをつけようと思ったんですが、発生させられませんでした。
発生できたら、追記します！


末尾再帰を使って最適化する記事があったので、参考にリンクを付けておきます。

参考
https://qiita.com/gumiTECH/items/def3ab5797266bb6db41
IAMが複数のMFAデバイスをサポート

## 概要

2022年11月16日、AWSはIAMユーザに対して複数のMFAデバイスをサポートするようになりました。
https://aws.amazon.com/about-aws/whats-new/2022/11/aws-identity-access-management-multi-factor-authentication-devices

## 何がうれしいのか

今まではIAMユーザ毎で、単一のMFAデバイスのみのサポートでした。
その場合、万が一MFAデバイスを紛失した場合にログイン出来なくなる、MFAデバイスを家に忘れたため取りに帰らないといけない、など困るケースがありました。

今回のアップデートによって、複数のMFAデバイスの割り当てが出来るようになり、利便性が増しました。

:::note warn
便利になった反面、複数登録できるようになったことによるセキュリティリスクもありますので、その点も踏まえてご検討ください。
:::

## 試してみた

では、実際に試してみます。

:::note info
なお、今回はMFAデバイスとして、Chrome拡張機能のAuthenticatorを利用します。
:::

まず、AWSコンソールでIAMを開き`認証情報`タブをクリックします。
既にMFAデバイスが1つ割り当てられてることが確認できます。
以前ですと、これ以上割り当てることが出来ませんでしたが、アップデートにより追加できるようになりました。
`MFAデバイスの割り当て`をクリックします。
![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87924/b64b5e00-c61a-193b-5004-370dd3d22a59.png)



追加するMFAデバイス名を入力し、`続行`ボタンをクリックします。
![2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87924/13d072ae-90e2-0c12-8889-d1e674226312.png)

`🖊`マークをクリックした後、`+`ボタンをクリックして追加を行います。
![3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87924/d807715e-c271-2820-03d2-71116a3fe923.png)
![4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87924/64baa138-5055-007a-67e2-836b0cc755fa.png)

今回は`QRコードをスキャン`か`シークレットキーの手動入力`が選べますが、今回は`QRコードをスキャン`を選択します。
![4-2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87924/f739c9cf-2a98-7097-8e23-9c83818c0b67.png)

スキャンが完了するとAuthenticatorへの登録が完了しますので、Authenticatorに表示されたMFAコードをそれぞれ連続して入力します。
入力が完了したら、`MFAの割り当て`をクリックします。
![5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87924/e6b04925-70af-a294-4044-6d96f55209a3.png)
![6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87924/c9179bb3-42d6-3a9a-ea2f-53de615e0d40.png)

MFAデバイスの割り当てが完了し、一覧に表示されました。
これで次回ログイン時から、登録したMFAデバイスでのAWSコンソールへのログインが可能になりました。
![7.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87924/9db417f6-9d49-1dfe-d64e-b47d78ae6c2c.png)


## 終わりに

今回はIAMのMFAについてのアップデート情報を説明させて頂きました。
内容としてはシンプルなものになりますが、ご参考になれば幸いです。
Googleサイトで自分ポータルを作る。病院内ポータルもつくれたよ。




## ブックマークって意外と開くまで数クリックいるよね

ってことで、**自分向けポータルサイト**を作ってみました。

用意するもの
- Googleアカウント
- Googleサイト　https://sites.google.com/
- 適当なアイコン
- 気力

<br>
<br>

**そしてこちらが出来上がり**になります。

![pot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2945267/b946edf9-be2d-0ca9-e747-bb8c8b6b595a.png)

### アイコンをクリックするだけで、自分の普段つかうサービスへアクセスできる手軽さ！！

chromeなど、いつも使うブラウザの既定に設定すれば、ブラウザ立上時に常開いてくれるので便利です。
**作り方はいたって簡単**です。

- Googleアカウントを準備する
- Googleサイト　https://sites.google.com/　へ接続して、新しいサイトを作成する
- 自分が普段使うリンクを準備する
- スマフォのUIのように押しやすくするため、何か適当なアイコンを準備する
- 対外公開をするものではないので、公開設定は必ず、一般公開の検索エンジンNGリクエスト
- Googleマップを入れると便利
- スマフォでも自動でレイアウト変更してくれるので便利


![potar2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2945267/51bf2bd4-c5f8-fd1f-9267-6451da7bebab.png)

![prtal3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2945267/818861d0-21db-2fc7-e1aa-d39b696ae537.png)




## 備考
ほんとはこれ、病院内で（電カルやセキュアな情報以外の）サービスやリンクが散乱していて、
端末キッティングや問い合わせ誘導その他もろもろが面倒だったんで
**コーポレートスタッフ向けの便利なリンク集をインスタントで作った**のが目的でした。

URLを知っていたら接続できるのですが、外に漏れたとて、**ただのリンク集**であって
そこからのサービスは**2段階認証などで当然セキュア**だったり
内線番号などの表も掲載してますが、**そこはリンク先をイントラサイト**にすれば外部から
インターネット側からはみられることはなかったり
Googleフォームなどの申請フォームを置くことで社内申請にも対応できます。
（その辺は作りこみ入ります）


**ポリシーガチガチなところでは使えない手ですが、お手軽業務改善（工数削減・情報集約）としてはいいと思います**