OmniAICreator/Qiita-1.07M huggingface dataset:
自身のパスワード忘れを世にも奇妙な物語にすり替える従業員のパスワード管理をしてみた


## ●私のパスワードが勝手に変わっているんです！
こんにちは。小売業で販売課長をしている石ゴリです。
私の部下である従業員達（特にご高齢の皆様）が、
・勤怠管理のパスワード
・電子申請のパスワード
・安否確認のパスワードetc…忘れる問題が多発！
しまいには「**私のパスワードが勝手に変わっているんです！**」なんて
世にも奇妙な物語のような言い訳にすり替える方々多数いらっしゃいます。
もちろん実際はただ忘れているだけなんですが。。。

ただ、確かに何個もあるパスワードを覚えるのって大変です。
普段からパソコン・スマホをいじらないご高齢の従業員なら尚更です。
そこでNode-REDを使用して初心者の私が１週間で問題解決に向けて
何ができるのかチャレンジしてみました！


## ●できたこと
https://twitter.com/i/status/1680218217061699584



**苦難を乗り越え、顔を認識し、ID（社員番号）とPASS（パスワード）をLINEBotを通じて教えてくれました！！**

## ●使用ツール
・teachablemachine
・Node-RED
・LINEBot
・Make

## ●完成手順
①teachablemachineによる機械学習設定（誰の顔？IDとPASSは？）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471031/884247de-f6f9-a33a-d2fa-f73f5df9339e.png)


②Node－REDとteachablemachineを連携させて顔とIDとPASSを判定する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471031/00e0c9ce-f974-6bf2-f5c3-eb6d49e3815e.png)
③makeを使用し判定結果をLINEBotに繋げる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471031/42008260-e480-4807-2849-e0758996aa69.png)
														
## ●私のつまづきポイント
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471031/55e4ac76-a071-d4a8-62a1-0bdff1658f13.png)
こちらで説明しているように人物を機械学習してもらうためには
サンプル画像400枚以上をおすすめします。そして色んな角度で。
なぜならサンプル枚数が少なるすぎるとこんなになります…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471031/e9988d44-62c9-46df-339b-335d59589be4.png)
まず頭皮全然違うだろっ！でも判別してくれません！調子悪いのか？！Node-RED！！
でも違うんです。サンプル枚数が少なすぎたのです。（この時はサンプル150枚で実施も不確実）
色んな角度で多くの枚数を機械学習してもらうことで精度が格段に上がります！皆さんもぜひ参考に！
## ●同じ初心者の思いを救いたい！
また初心者の方にわかりやすく説明できるようそれぞれの詳細を別記事にまとめさせていただきました。あるあるだと思うのですがQiitaの記事見てできそうだからやってみよう！と思ってやってみると中間が省略されていて迷子になる事がたくさんあるので。救済できれば幸いです！
https://qiita.com/s053050g/items/f590391466358c42bf68

## ●今後の改良予見
・実務レベルで使うためにも本当はLINEでとった写真をLINEで返すようにした方が良いですね。
※今回はNode-REDとTeachableMachineを繋いだ結果をLINEで返しています。

## ●参考記事（大変お世話になりました！）
●その積み方で大丈夫？！初心者がLINEに送った画像をTeachable Machineに評価判定させるLINE botを作ってみました！　https://qiita.com/jiko111/items/5fcd75924f59d900e12h
●Qiita書き方メモ　https://qiita.com/hiroyuki_hon/items/f2a779bb295fd12646ab
●あれどこに何個をあったっけ？をAIですぐさま解決！！1人に1台どうですか？https://qiita.com/sasakikoudai/items/1aae94a8e3e6feeef3df
●https://atlabo-handson-08.netlify.app/#2https://atlabo-handson-08.netlify.app/#2
BIツール、なぜ必要？どう使うの？①

はじめに「なぜレポートを作成する必要があるのか」との疑問はあるでしょうか。

従来のレポートは、EXCELの表で作成したり、プログラミングで指定のフォーマットで開発したりしました。エクセル表で表示しきれない部分がありますよね。プログラミングの場合、仕様確認等で開発サイクルが長くなる場合がありますよね。

Vividata Desktop、無料のBIツールではドラッグアンドドロップでレポートを作ることができます。

次に、データの整理を行うでしょう。どんなレポートにもデータが必要なので、まずデータを保存する場所を見つける必要があります。多くの企業はMySQLやOracleなどの独自のデータベースを持っており、Vividata Desktopのデータソースモジュールを利用して接続することができます！設定は難しいではないです！データベース以外にも、日常的に保存するデータは多いでしょう。たとえば、Excel表などです。これらのExcel表のデータも整理する必要があります。

データ整理は何を行うでしょうか。

まずはデータの属性です。例えば名前、性別、日付などのディメンションデータ、あとは数値等のKPIというメジャーデータに対して整理を行います。したがって、ディメンションデータを整理の時、グループの作成、入力値の変更、Null値の置換、列の分割、スペースの削除、日付カラムとして新規作成、メジャーに変換などの整理方式があります。同様に、メジャー項目を処理する際には、新規データビニング、数字データの特性や中央値の計算、新規フォルダ、計算列カラムの作成、解析アルゴリズム作成などもあります。

もちろん、個人情報、企業情報等のデータに対してマスク処理を行う必要があるよね。
Podmanでdns-route53プラグインを使用してLet's EncryptのSSL/TLSサーバ証明書を取得する

# はじめに
PodmanでLet's EncryptのSSL/TLSサーバ証明書を取得する方法は以下で説明しました。

https://qiita.com/tabimoba/items/b512bdd77719bb23e02c

webrootやmanualでの証明書更新は何かと手間なので（特にワイルドカード証明書を取得したい時にとても面倒なので）、dns-route53プラグインを使用して対応する方法を以下にまとめました。

なお、Podmanのインストールや各種初期設定についてはここで説明しません。上記記事をご参照ください。


# 手順

### １．IAMユーザーの準備
route53を操作するためのIAMユーザーを作成します。
IAMポリシーの例（https://certbot-dns-route53.readthedocs.io/en/stable/ より）
```
{
    "Version": "2012-10-17",
    "Id": "certbot-dns-route53 sample policy",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "route53:ListHostedZones",
                "route53:GetChange"
            ],
            "Resource": [
                "*"
            ]
        },
        {
            "Effect" : "Allow",
            "Action" : [
                "route53:ChangeResourceRecordSets"
            ],
            "Resource" : [
                "arn:aws:route53:::hostedzone/YOURHOSTEDZONEID"
            ]
        }
    ]
}
```


### ２．podmanでcertbotを実行する
次のコマンドを実行します。
```sh
# podman run -it --rm \
-e AWS_ACCESS_KEY_ID=<IAMユーザーのアクセスキーID> \
-e AWS_SECRET_ACCESS_KEY=<IAMユーザーのシークレットアクセスキー> \
-v /etc/letsencrypt:/etc/letsencrypt \
-v /var/www/html:/var/www/html certbot/dns-route53 certonly \
--dns-route53 \
-d example.org \
-d *.example.org \
--agree-tos \
--server https://acme-v02.api.letsencrypt.org/directory
```

# 補足
Docker/Podmanを利用したcertbotプラグインを利用した証明書発行・更新は、Route53以外にも対応しています。

対応プラグインについては以下をご参照ください。

https://hub.docker.com/r/certbot/certbot

# 参考

https://hub.docker.com/r/certbot/dns-route53

https://certbot-dns-route53.readthedocs.io/en/stable/
DAY20-24 Youtubeで学ぶHTML

# DAY20
230715
HTML初心者向けyoutube動画を見ました:tv:
今回学習に使わせていただいたyoutube動画は
堀口セイトさん（https://twitter.com/seito_horiguchi）
の　世界一わかりやすいHTML講座↓
<iframe width="560" height="315" src="https://www.youtube.com/embed/IR_srJ2zL3o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
すでに入門書を読んでコーディングしたことがあったので、すっと頭に入りました。

入門書はこちら↓　Kindle Unlimitedで見られます
<a href="https://www.amazon.co.jp/%E5%88%9D%E3%82%81%E3%81%A6%E3%81%AEHTML%E5%85%A5%E9%96%80%E8%AA%AD%E6%9C%AC-EguchiYuuki-ebook/dp/B0C3DLG49T?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=1DD02NDJKQN3W&keywords=html&qid=1689484633&sprefix=html+%2Caps%2C213&sr=8-9&linkCode=li2&tag=sakura010e-22&linkId=a3c3f6b8d7cbf3381cf4bdb9ab0790f4&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B0C3DLG49T&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=sakura010e-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=sakura010e-22&language=ja_JP&l=li2&o=9&a=B0C3DLG49T" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
この動画では、入門書にはなかったVSCの簡単な操作方法とかsection,dig,spanタグを知れました。
aタグの中にはけっこういろんなタグを入れられるとか。ulタグ、olタグのすぐあとはliタグしかこれないとか。（liタグの中にはほかのタグ入れてもOK）
今はhtml5が主流だけど、今までの名残もあるので、タグについてコンテンツモデルで考えるよりブロックレベル要素・インライン要素で考えたほうがわかりやすいとか。
classは複数あっても大丈夫。 idは１つだけ。（プログラミング的にはidのほうが処理早くなる）
ただしCSS使うときはidあんまり使わない。（CSS自体が処理が早い、コードを使いまわすことが多いから）
→javascriptの時はなるべくid。CSSのときはなるべくclassを使うといい。
あとタグがエラーかどうか判定してくれるサイトの紹介もありました。
https://html5.validator.nu/
ぼんやりとしかわからなかったところの解像度がちょっと上がったかなと思いました。
動画を見ながらメモ代わりに書きましたが、間違っている部分があるかもしれません:sweat_smile:
ここ違うよ　とか補足があるよって方はコメントで教えてくださるとうれしいです。

# DAY21-24
230716-19
プログラミングの勉強はしてないです。
【Tableau】路線データを扱ってみた

## 概要
業務で路線データを扱ったので、路線データ可視化の手順をまとめようと思います。


## 手順
##### 1. 路線データをダウロード
国土数値情報ダウンロードサイトから路線データをダウンロードします。
(https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N02-v3_1.html)


##### 2. tableauでデータを読み込む
データはこのようになっています。
![スクリーンショット 2023-07-20 1.15.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728184/6e2c4726-03d0-ba30-14c8-c147373bbe03.png)

utf8の中身
![スクリーンショット 2023-07-20 1.16.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728184/02808df2-5f5b-89e8-cd4f-27f6abb57751.png)

今回はutf8/N02-22_RailroadSection.geojson を使用します。
(utf8内のファイルじゃないと文字化けが起きる模様)
![スクリーンショット 2023-07-20 1.11.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728184/9cdae378-cb02-200c-ed65-93575e765747.png)

N02 003に路線名、N02 004に鉄道名、ジオメトリに空間データが格納されています。



##### 2. mapで可視化する。
ジオメトリを選択して右上の表示形式でマップを選択すれば可視化されます。
![スクリーンショット 2023-07-20 1.11.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728184/5a9f62e4-0410-5230-6f43-9136c53a5e7f.png)



##### 3. 路線名を色に指定する。
まだ何が何だかわからないため、路線ごとに色分けをします。
![スクリーンショット 2023-07-20 1.12.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728184/27892249-6e2d-4699-0c4f-c01d5142a6cc.png)


##### 4. 背景を調整する。
メニューのマップ>マップレイヤーを選択すると調整画面が出てくるのでお好みで調整します。
![スクリーンショット 2023-07-20 1.27.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728184/2b48afdb-15c2-afb1-7b55-280bba87dc25.png)



## 注意点
数値データ等の別テーブルと結合する際に注意が必要です。
ジオメトリの影響で一つの鉄道名-路線名でも複数行になっていることがあります。
別テーブルと結合しても複数行になるため、数値を合計にしてしまうと行の分だけ水増しされた数値が表示されてしまいます。
数値を扱う際には注意しましょう。

![スクリーンショット 2023-07-20 1.28.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728184/f48eb5e0-75ac-eb19-bf80-875c1d3cc1d1.png)
【Tableau】行をパラメータで可変にしたい

## やりたいこと
グラフの行をパラメータで可変にしたい

## 背景
ユーザーによって見たい粒度が異なるダッシュボードを作成する際に、シートを複数作成して切り替えることも可能ですが、
行が複数個、選択肢も複数個になった場合はシートを数十枚作らなければならず、手間もかかりパフォーマンスも落ちます。
そこでパラメータによる行入れ替えの手順をまとめました。
今回は二つの行を入れ替えできるようにします。


## 手順
##### 1. 整数型のパラメータを二つ作成する
![スクリーンショット 2023-07-20 0.38.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728184/7bb69d59-c0dd-3cc4-5471-2ca75bc2942e.png)

パラメータ2で選択なしの場合はパラメータ1と同じにする
![スクリーンショット 2023-07-20 0.38.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728184/bad1dae5-91bb-6275-3e8a-efdb6debc2f4.png)





##### 2. 計算フィールドを2つ作成する
params1とparams2が同じの時はNULLになるようにしています。
![スクリーンショット 2023-07-20 0.40.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728184/c4eb960b-9b9d-763a-ec64-46070abc19bd.png)

![スクリーンショット 2023-07-20 0.42.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728184/db551e9e-ab92-1666-4c15-ffb9f6c1123f.png)





##### 3. 作成した計算フィールドを行に指定する。
パラメータを選択することでユーザーがドリルダウンの粒度を選択できるようにできました。

![スクリーンショット 2023-07-20 0.43.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728184/ba1e35cf-8c2e-f097-69d9-497868649274.png)
![スクリーンショット 2023-07-20 0.43.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728184/d5baebbf-afe6-dbcf-7e42-4da6b0447344.png)




paraams1のみの指定も正常にできています。
![スクリーンショット 2023-07-20 0.43.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728184/f45d195b-ca0b-ded0-2166-e24880b4670e.png)
![スクリーンショット 2023-07-20 0.43.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728184/cd13e25b-a5ef-5cab-b93e-3ef7e47ac2e9.png)
【Tableau】スクショ用に数値マスキング機能をつけたい

## やりたいこと
スクショ用に数値マスキング機能をつけたい

## 背景
ダッシュボードのスクショをそのまま資料に載せたいけど、社外秘の数値が含まれるため手動でマスキングしなければならないという悩みが寄せられたので、作成したダッシュボードにマスキング機能を追加しました。


## 手順
##### 1. bool型のパラメータを作成する
![スクリーンショット 2023-07-20 0.14.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728184/6d6933b8-6153-7d99-5d41-9132d7363d2d.png)



##### 2. ラベル用の計算フィールドを作成する
マスキングありの時はNULLになるようにします。
![スクリーンショット 2023-07-20 0.18.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728184/f47d46d9-1cb0-558e-eef2-e4c958b9f81d.png)




##### 3. 作成した計算フィールドをラベルに指定する。
マスキングのパラメータを選択することで数値を非表示にすることができました。
![スクリーンショット 2023-07-20 0.24.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728184/f4c89f2f-9cf0-510e-3c7e-ba9861fcb064.png)

![スクリーンショット 2023-07-20 0.24.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728184/4d0d7c7c-de15-aa0d-ad33-2bc6f9ddc3d2.png)
【Tableau】別ダッシュボードへのフィルターアクションを適用すると遷移してしまう

## やりたいこと
フィルターアクションを用いて別のダッシュボードにフィルターをかけたい

## 背景
可視化用ダッシュボードをぽちぽちいじってフィルターを適用してから、ダウンロード用のダッシュボードへ遷移したいということが業務上でありました。
その際に別ダッシュボードへのフィルターアクションを適用すると、アクションが起こった際にダッシュボードを遷移してしまったため、解決方法をまとめました。


## 修正前
フィルターアクション
![スクリーンショット 2023-07-19 23.38.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728184/bc9789a8-6827-4870-f486-e1fd77ce7370.png)

ダッシュボード1
![スクリーンショット 2023-07-19 23.40.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728184/663b5774-f0d2-ba74-2858-fbfa1b3236d3.png)


ダッシュボード2
![スクリーンショット 2023-07-19 23.40.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728184/26eda923-316a-36cc-01b7-96fddea322de.png)

クリックするとダッシュボード2に遷移してしまいます



## 修正手順
##### 1. ダッシュボードにフィルターアクションを適用したいシートを表示させる
他シートのレイアウトが崩れないように浮動で表示します。
![スクリーンショット 2023-07-19 23.40.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728184/8a553017-4d6d-b5d5-a34d-6ea9f67ac103.png)


##### 2. シートを小さくする
可視化は別にしたくないのでサイズは最小限にしておきます。
![スクリーンショット 2023-07-19 23.41.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728184/5a6ff31d-125b-b67c-f3ac-054723d443c3.png)



##### 3. フィルターアクションを変更する
ダッシュボード1内でのフィルターアクションに変更します。

![スクリーンショット 2023-07-19 23.56.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728184/ebe63bad-2606-8257-011b-6937f174a7b6.png)


以上の手順により、画面遷移することなく別ダッシュボードへのフィルターアクションを適用できます。
cscの作法 その414

# 概要
cscの作法、調べてみた。
練習問題、やってみた。

# 練習問題
automationでexcelのa1セルに書き込め。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/9af03bee-bb13-e5e0-8805-945a65823826.png)

# サンプルコード

```
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Text;
using System.Threading;
using System.Windows.Automation;
using System.Runtime.InteropServices;
using System.Windows.Forms;

namespace App
{
	class Program {
		static void Main(string[] args) {
			AutomationElement aeForm;
			Process excel = Process.Start(@"C:\Program Files (x86)\Microsoft Office\Office12\excel.exe");
			Thread.Sleep(2000);
			aeForm = AutomationElement.FromHandle(excel.MainWindowHandle);
			aeForm.SetFocus();
			Console.WriteLine("ok3");
			SendKeys.SendWait("hello world!\n");
			//excel.CloseMainWindow();
		}
	}
}
```

以上。
[VB.NET]Magick.NETで画像の品質を変更する方法

調べても地味に見つからなかったので、Magick.netで画像のクオリティを変更する方法を記載しておく。

```vb:Form.vb
    Dim img As Object
    img = New ImageMagick.MagickImage("C:\image.jpg")
    img.Quality = 100 '0(低画質) - 100(高画質) で指定
    img.Write("C:\image_converted.jpg") '変換後のファイルを書きだし
```

.Qualityに数値指定するだけ。
AppScanで保存されないときがある問題と解決策(=非アクティブな状態で保存すること)

# 問題

脆弱性対策で使うツール**AppScan**で「ctrl+s」で保存しているのに保存されないときがある・・・
ググっても全然(日本語の)情報ヒットしないｗ

# 解決策

フォーカスを外すなど**非アクティブな状態で「ctrl+s」すると保存されます。**
アクティブな状態なものは保存されない仕様のようです。おそらく・・・

---

### 例:タイムアウト値を10→20に変更したい
初期値:10
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183481/be4254f2-2c5b-9266-83dc-32793c11e5c9.png)
### アクティブな状態で保存しても・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183481/ac3b0f3b-ac8c-9f9a-a09c-5d9b24ade06c.png)
※テキストにカーソルがあって、テキストが青くアクティブな状態になっている
↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183481/be4254f2-2c5b-9266-83dc-32793c11e5c9.png)
初期値の10に戻ってしまう

### 非アクティブな状態で保存すると！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183481/df27a9e1-7551-2c28-18be-2ab9531e458c.png)
↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183481/df27a9e1-7551-2c28-18be-2ab9531e458c.png)
20で保存される！

おわり！
1分で分かるRECOROKUを使ったオンライン会議動画管理

# はじめに
RECOROKUとはオンライン会議の動画管理システムです。
[HP](https://recoroku.com/)にある通り、以下をメッセージとして掲げています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312001/c168b24a-d9d8-0517-c252-788b66bda439.png)

これだけでどういうものかなんとなく分かると思いますが、細かい機能は省いてメインの機能を説明すると、

1. オンライン会議動画を録画（もしくは後からアップロード）
2. 自動で文字起こしをして、文字起こしされた発言から動画の当該部分にジャンプできる
3. 全動画の発言全体から動画の当該部分を検索できる

以下の画像は実際の利用画像です。最初の画像の左側の文字起こし部分をクリックすると動画の当該部分にジャンプします。また、上側に検索ボックスがあると思いますが、ここに検索したい文字列を入力すると全ての動画から該当する発言を一覧で表示してくれます（2枚目の画像）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312001/ac3f763d-d5f8-a68f-fa8c-5606f04afe8b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312001/49f17940-fb1b-677c-be50-6775f4e6d2d3.png)


# メリット

- 欠席者も後から会議内容を動画を見ずに確認できる
- 理解できなかった部分が検索しやすいので後から確認できる
- メモも残せるので、チャットでシェアされたリンクとかをメモで残しておけば後からでも飛びやすい
- 動画全体から発言を検索できるので、どの会議で誰が発言したか検索しやすい

# デメリット
- フリープランだと文字起こしファイルをアップロードしないと、自動で文字起こししてくれない
- 直感的な操作がしづらい部分がある（動画の録画への動線とか）

# ユースケース
少し触ってみて、社内勉強会で運用してみたいなと感じました。
理由としては、以下です。

- 欠席者が後から動画だけでなく、文章で内容が理解できる
- 出席者もよく分からなかったところを動画で探すのではなく、文章で検索できる
- 過去の勉強会の動画も含めてまとめて単語検索とかできるので、理解していない専門用語とかで検索すればそれに合った動画が見つかる

# まとめ
正直、まだまだ修正できる部分は多いのかなとは感じますが、良いサービスだなと思います。新しいサービスですので、修正含めて、新しい機能などこれからに期待です。
価格に関しては月3万え程度しますが、ユーザー20人まで入れるので一人当たりで考えると妥当な金額かなと思います。

# 補足
まとめまでで、大体1分間で読める分量にしましたが、補足として以下を残しておきます。

### プランによる違い
触り始めた時には完全にフリープランで、気づいたらおそらく30日間限定で有料プランと同じ扱いになっていました。
そのため、現状今から登録される方は30日間は有料プランと同じものを試せるかと思います。

フリープランの場合は動画を後からアップロードする際に、自動で文字起こしをつけてくれません。
そのため、自分で文字起こしファイルをアップロードする必要があります。

google meet等、文字起こしがついてこないオンライン会議サービスだと有料プランを使うか、自動文字起こしサービスを別で利用する必要があります。最近だとOpenAIから文字起こしできるAPIも出たので、それを使うことで一応は無料プランでの運用は可能です。
ただ、結局他の文字起こしサービスやOpenAIも無料ではないので、その辺は各自のご都合にお任せします。

### 文字起こしファイルの作成方法
自動文字起こしサービスだと、例えば[Notta](https://www.notta.ai/)がありますが、こちらは無料プランでは文字起こしファイルのエクスポートができませんでした。他も調べた感じ、無料で文字起こし可能なサービスは見当たりませんでした。

OpenAIでの文字起こしファイルの生成については、[こちらの記事](https://qiita.com/_akira19/items/f2ae819f242c812b86a1)にまとめました。先にも書いた通り、完全無料ではないですし、API自体は25MBまでの音声ファイルしか受け付けてないので、長い音声や高品質のファイルの場合はもう一工夫は必要になります。

### 改善点
個人的に改善してほしいなと思った点もいくつか挙げておきます。

UIに関しては六角形のハニカムみたいなものがうっすらずっと見えていますが、視認性下がるので正直いらないのかなと思いました。

また、文字起こしファイルのアップロードっていう項目はあるものの形式の指定とかなく、間違った形式のものでもエラーなくアップロードできてしまい、文字起こしは表示されないという状態だったので、形式の指定とか、間違ったものはアップロードできないようにしてくれると親切かなと思いました。


あとは、バグなのか自分の環境の問題か分かりませんが、以下が発生しました。
- 動画を録画したが、アップロードに失敗したと表示がでた（翌日試したらアップロードできたので一時的なものだったのかもしれません）
- 自分で文字起こしファイルをアップロードした場合には、発言が検索できたが、サービスで自動でつく文字起こしは検索できなかった
React Server Componentsについて調べた

## この記事は何
社内勉強会用の資料のメモです。
React Server Componentsについてまとめています。

## React Server Componentsとは

React Server Componentsとは、文字通りサーバーでコンポーネントの生成を行い、そのコンポーネントデータをクライアントで取得、レンダリングするという技術です。

https://qiita.com/naruto/items/c17c79ec5c2a0c7c4686

↑の記事がわかりやすいので参考にしてみてください。

サーバーで実行を行うため、以下のような特徴があります。

1. useStateやuseContext、useEffectなど、コンポーネントをリレンダーする処理は実行できない(propsは受け取れる)
1. async/awaitなどを使うことが可能（呼び出し元では`Suspense`を用いて非同期的に描画を行う）
1. Server ComponentsからClient Componentsを呼ぶことが可能

簡単なイメージだとこんなことができるようになります。

```jsx:Server Componentの実装
const ServerComponent = async ({ id }) => {
  const { data } = await axios.get(`/endpoints/${id}`)

  return(
    <ClientComponent data={data} />
  )
}
```

```jsx:Client Componentの実装
const ClientComponent = ({ data }) => {
  return(
    <div>Hello {data.name}</div>
  )
}

```

## 何が嬉しいの？

得られるメリットは設計面、パフォーマンス面の二つの側面であります。

### 設計面のメリット
設計面で一番大きなメリットは、「データの取得処理とそのデータを用いたDOMの表現が簡潔になる」ことです。

今まではReactでデータのフェッチなど、外部アクセスを行おうと思うと、以下のような実装をする必要がありました。

```jsx
const Component = (id) => {
  const [data, setData] = useState(null)

  useEffect(() => {
    axios.get(`/endpoints/${id}`)
      .then(result => {
        setData(result.data)
      })
  }, [])

  return data ? (<div>Hello {data.name}</div>) : null
}
```

このように、データを取得して表示を行うだけでも、状態、副作用（非同期処理）という二つの概念を意識して実装する必要があります。
今回の例はシンプルですが、実際の開発現場ではこのような実装が大量にあり、なかなか直感的にやっていることを理解するのが難しい場面も多いのではないでしょうか。

また、JSのコードはすべてブラウザに配信されてしまうため、DBへの直接のアクセスなどはできず、毎回APIを用意し、アクセスを行う必要が出てきます。

Server Componentsはこの「処理（データアクセス）を行い、処理の結果を元にDOMを作る」という処理をより簡潔かつコンポーネントという単位に閉じた実装へと変えていきます。

これはいわゆる今までのフルスタックフレームワークにあったような「ビジネスロジックの処理→描画」というステップを文字通り一方向のステップで行っていくのと近い体験を提供します。

以下の記事により詳しい解説が書かれていたので参考にしてください。

https://zenn.dev/uhyo/articles/react-server-components-multi-stage

### パフォーマンス面のメリット
Server Componentsはパフォーマンス面にも色々メリットがあります。

メリットは以下の通りです。

#### JSのバンドルサイズの削減
Server ComponentsはクライアントではJSコードを持っておく必要はないため、単純にクライアントで持っておくJSファイルのサイズはその分削減できます。

ただ、Server Componentsのデータサイズが元のJSのコードサイズよりも大きくなってしまうパターンもあるようです。

https://qiita.com/uhyo/items/06b0cd7292256f66d7b7

#### データのフェッチスピードの高速化
Server Componentsは文字通りサーバーで実行されるので、同じサーバー内などにAPIがあればクライアントからリクエストを送るよりフェッチのスピードは高速化しやすい特性があります。DBへのアクセスなども直接行うことが可能です。
これにより全てをクライアントで実装するより、描画のスピードを上げることが可能です。

#### その他
そのほかにも、「Code splittingの自動化」「コンポーネントマウント時の処理のスピード」など、いろいろパフォーマンス面でのメリットがあるようです。


## 参考文献

https://zenn.dev/g4rds/articles/287c53498d17a1

https://zenn.dev/uhyo/articles/react-server-components-multi-stage

https://postd.cc/how-react-server-components-work/

https://qiita.com/naruto/items/c17c79ec5c2a0c7c4686

https://nextjs.org/blog/next-13#server-components

https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components
[Flutter] FirebaseのsignUpのエラーの一覧

![スクリーンショット 2023-07-20 9.12.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/4cb8fd32-af03-a547-fdd5-bf5457b63ffc.png)



ちゃ！いせりゅーです。

今更ですが、Firebaseを使用したアプリを作成しております。

FireaseのsignUpのエラーの一覧を記載してみました。エラーハンドリングの際に参考になればなと思っております。

:::note alert
これもあるよ！というものがあればコメントいただけると嬉しいです😁
:::


# 
```
[firebase_auth/invalid-email] The email address is badly formatted.
```
### 解説
- 指定したメールアドレスが適切な形式でないことを示しています。
- ユーザーがメールアドレスの入力欄に何も入力せずに送信したり、"username@"や"@domain.com"のような不完全なメールアドレスを送信した場合にこのエラーが出ることがあります。
- メールアドレスは一般的に「username@domain.com」の形式ではないとエラーになります。

### おすすめメッセージ
- 入力したメールアドレスが正しくない形式です。もう一度確認してください。

# 

```
[firebase_auth/wrong-password] The password is invalid or the user does not have a password.
```

### 解説
- ユーザーがパスワードを間違えて入力したか、あるいはパスワードが設定されていないユーザーであることを示しています。
- ユーザーが以前に設定したパスワードを忘れて間違えて入力した場合やパスワードなしで登録した（たとえば電話番号認証等を使用）ユーザーがパスワードを入力してしまった場合もこのエラーが出現します。

> 「パスワードが違う」と「パスワードを設定していない」の２つをそれぞれ別のエラーで出して欲しいな。。。。）


### おすすめメッセージ
- 入力したパスワードが間違っています。もう一度確認してください。
- パスワードをお忘れですか？「パスワードをリセット」からパスワードをリセットできます。


# 

```
[firebase_auth/too-many-requests] Access to this account has been temporarily disabled due to many failed login attempts.
```
### 解説
- 特定のアカウントに対して多くのログイン試行が失敗したため、一時的にそのアカウントへのアクセスが無効化されているエラーです。

### おすすめメッセージ
- ログイン試行が多すぎます。しばらく時間を置いてから再度お試しください。
- セキュリティ上の理由から、一時的にこのアカウントへのアクセスが無効化されています。

# 

```
[firebase_auth/user-not-found] There is no user record corresponding to this identifier. The user may have been deleted.'
```
### 解説
- ユーザーが既に削除されたアカウントでログインをした際に、出現するエラーです。

### おすすめメッセージ
- 入力された識別子に対応するアカウントが見つかりませんでした。メールアドレスを再度確認してください。
- 指定されたユーザーが見つかりません。アカウントが削除された可能性があります。アカウントを新たに作成する必要がある場合は、「新規登録」をクリックしてください。

# 最後に
・SNS系のアプリはAppleに通りづらいですね。毎日格闘なうです。頑張ります。
2023年のAWSアップデート追いかけてみる（7月前半編)

どうも、気づいたら2個もAWS資格を失効してた若松です。

AWSのアップデートってre:Inventのときだけ必死に追いかけるのに年明けになるとサボっちゃうの何なんですかね？
ご多分に漏れず、私も2023年のアップデートを全然追いかけられていません。
当然ながら、AWSは年中アップデートを続けているわけで、その数も年々多くなってきて追いかけるのが大変です。
そこで、2023年分のアップデートを一気に舐めて、個人的に熱いと思ったものをピックアップしていきます。
※現時点で翻訳記事が出ていないものはGoogle翻訳で日本語化したタイトルにしています。

（追記）一覧にまとめました

https://qiita.com/t_wkm2/items/2b0fcf742b94c2eacea2

# AWSアップデート2023年7月前半編
#### [Meta の Llama 2 基礎モデルが Amazon SageMaker JumpStart で利用可能になりました](https://aws.amazon.com/about-aws/whats-new/2023/07/llama-2-foundation-models-meta-amazon-sagemaker-jumpstart/)
お前Microsoftと手を組んだはずでは、、と思っていたらきっちりSageMakerにも対応しているようです。
さすがにAzureほど簡単に使えるようにはなってないと思いますが。

#### [AWS Fargate は Seekable OCI を使用してコンテナの起動を高速化します](https://aws.amazon.com/about-aws/whats-new/2023/07/aws-fargate-container-startup-seekable-oci/)
Seekable OCIは初めて聞きましたね。
コンテナのLazy Loadみたいなもののようです。
ファットなコンテナは作りたくないものですが、これで起動高速化の恩恵が得られるケースも多いと思います。
イメージ自体に何か細工をする必要がないというのも嬉しいですね。

#### [Amazon Connect Wisdom がチャットエージェントで利用できるようになりました](https://aws.amazon.com/about-aws/whats-new/2023/07/amazon-connect-wisdom-chat-agents/)
Amazon Connect Wisdomは問題解決に関する情報を提供してくれるサービスです。
今までは通話情報から問題を推察して情報のレコメンドをしてくれる機能でしたが、チャットでも利用できるようになりました。
当然ながら日本語はまだなんだと思いますが、これができたらチャット応答の品質向上と対応時間削減が同時に実現できそうですね。

#### [AWS Lambda と Amazon EventBridge パイプが強化されたフィルタリングをサポートするようになりました](https://aws.amazon.com/jp/about-aws/whats-new/2023/07/aws-lambda-eventbridge-pipes-enhanced-filtering/)
LambdaとEventBrigdge Pipesの呼び出し時にイベントのフィルタリングができるようになったようです。
実際のLambdaやEventBrigdge Pipesが呼び出される前に不要なイベントを削れるため、起動数の削減に繋がりますね。
また、フィルタリングのコードも書かなくてよくなったのでコードの削減にも繋がりそうです。

#### [AWS Lambda が Lambda 関数の再帰ループを検出して停止するようになりました](https://aws.amazon.com/jp/about-aws/whats-new/2023/07/aws-lambda-detects-recursive-loops-lambda-functions/)
これは界隈でも少し話題なっていましたね。
設定ミス等により同じイベントでLambdaが無限ループして◯◯◯万円溶かした、みたいな事故は稀によく起こります。
それを回避するため同じイベントで16回呼び出されたら次の呼び出しを停止してデッドレターキューに放り込んでくれるようです。
これで安心して眠れる人も多いはず。。

#### [AWS CodeBuild が GitHub Actions をサポート開始](https://aws.amazon.com/jp/about-aws/whats-new/2023/07/aws-codebuild-github-actions/)
CodeBuildからGitHub Actionsを呼び出せるようになったようです。
ステージごとにスクラッチで書いていたコマンドをGitHub Actionsを呼び出すように変更し、再利用可能にするということのようです。
できればbuildspec.ymlを書かなくていい世界線に行けると嬉しいが、、

#### [Amazon CloudWatch がクロスアカウント Service Quotas のサポートを開始](https://aws.amazon.com/jp/about-aws/whats-new/2023/07/amazon-cloudwatch-cross-account-service-quotas/)
CloudWatchがクロスアカウントに対応していたこと自体にびっくりしているのですが、これを設定することでクォータの制御も集約できるようになったようです。
クロスアカウントのところもうちょっと詳しく追いかけなきゃ。。

#### [Amazon ECS は、長時間シャットダウンされたタスクと並行してタスクをより早く起動できるようになりました](https://aws.amazon.com/jp/about-aws/whats-new/2023/06/amazon-ecs-tasks-faster-prolonged-shutdown/)
コンテナがシャットダウンしている最中に新しいコンテナを起動できるようになったようです。
コンテナを入れ替えるだけでめっちゃ時間かかる！みたいなことがなくなるのは嬉しいですね。

# まとめ
本当は2023年分すべてを追いかける予定だったんですが、思ったよりも量が多くて挫折しました。
6月以前のものは次回に持ち越します。。

（追記）一覧にまとめました

https://qiita.com/t_wkm2/items/2b0fcf742b94c2eacea2
ESP-EROOM-32

エラー内容

最大1310720バイトのフラッシュメモリのうち、スケッチが236797バイト（18%）を使っています。
最大327680バイトのRAMのうち、グローバル変数が21048バイト（6%）を使っていて、ローカル変数で306632バイト使うことができます。
esptool.py v4.5.1
Serial port COM7
Connecting......................................

A fatal error occurred: Failed to connect to ESP32: Wrong boot mode detected (0x13)! The chip needs to be in download mode.
For troubleshooting steps visit: https://docs.espressif.com/projects/esptool/en/latest/troubleshooting.html
Failed uploading: uploading error: exit status 2

解決策
スケッチを書き込むときは、BOOTボタンを長押し（書き込み終わるまで）で書き込める。

補足
①USBケーブルとの相性がある。認識しないときは、ほかのUSBケーブルに変えると動くこともある。
②挙動がおかしいときはとりあえずいったんリセットする。
ドコモのeSIMプロファイルを誤って削除したときの対処法【docomoでeSIMの再発行】

ドコモオンラインショップでnanoSIMからeSIMに変更したのですが、スマホを初期化したためeSIMプロファイルが削除されてしまいました。

nanoSIMは無効になっているため、ドコモオンラインショップで再度eSIMを作ることができませんでした。

# ドコモオンラインショップの電話で`eSIMへの変更`をキャンセルする


ドコモオンラインショップ📞151で`eSIMへの変更`をキャンセルし、nanoSIMを有効化してもらいましょう。
再度、nanoSIMからeSIMに変更することでeSIMを設定できます。
無料でできます。ドコモオンラインショップでeSIMのキャンセル処理はできないとのことでした。
キャンセルする際は電話するしかありません

# まとめ

物理SIMはなくさないようにしましょう

https://latest-japan.com/esim-story-docomo/

https://kawaii.flier.jp/2023/02/20/post-283/
プロセスとスレッドの役割について理解した事をまとめる

# 概要
プロセスとスレッドについて、`ChatGPT`に問ていて確認した。ただ、私の現在のIT知識では、その内容を理解しきれなかったので、`ChatGPT`に確認しながら分かった内容をまとめる。

# `Chat GPTの説明`
## プロセスの説明
　コンピュータ上で実行されるプログラムの実行単位を示す。プロセスは、メモリ空間やファイルハンドルなどのリソースを持ち、それらのリソースを利用してプログラムの実行を行う。プロセスは独立した実行環境を持ち、他のプロセスとは別々に実行される。また、プロセスはOSによって管理され、必要に応じて作成・終了・一時停止などの操作が行われる。

## スレッドの説明
　プロセスの中で実行される実行単位です。プロセス内に複数のスレッドを持つことができ、それらのスレッドは同じメモリ空間を共有する。スレッドは、同じプロセス内で共通のデータにアクセスできる為、プロセス内の処理を並列に実行することが可能となる。スレッドは軽量な実行単位であり、プロセス内での切り替えが比較的高速に行われる。


# 自身の解釈
## プロセスの要約
- プロセスは、**実行中のプログラム**の事を示す
- プロセスAとプロセスBは、相互干渉する事ができない
- プロセスは、下記コマンドにて確認が可能
```sh
$ ps
# 出力結果(例)
PID TTY          TIME CMD
  420 pts/1    00:00:00 bash
  532 pts/1    00:00:00 ps
```
## スレッドの要約
- スレッドは、**プログラム内で複数のタスクを同時に実行する**為の仕組みを示す
- 最初に適切なスレッド数を予測して設定し、その後実際の負荷やパフォーマンスをモニタリングし、必要に応じてスレッド数を調整する
- スレッドは、どのプロセスでも動作する事が可能
- PCのメモリ容量やCPUによって、スレッドの作成数には限界がある為、プロセスを立ち上げ過ぎると処理が低下する
- スレッドは`linux`コマンドで状況を確認する事ができない

# 参考資料
- [プロセス（IT用語辞典バイナリ）](https://www.sophia-it.com/content/%E3%83%97%E3%83%AD%E3%82%BB%E3%82%B9)
- [プロセス　|「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典](https://wa3.i-3-i.info/word11032.html)
- [スレッド　|「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典](https://wa3.i-3-i.info/word12453.html)

# 感想
`IT`関連に3年程関わっているが、今更`プロセス`と`スレッド`について触り程度だが理解した。インフラ関連の業務を行う事が多くなる為、この辺りも含めて今後は、幅広く理解していきたい。
Unity 2021.3.xでAndroid33をビルドできるようにする

## 環境
- Unity 2021.3.9f1（Appleシリコン版）
- Android Studio 2022.2.1 Patch 2
- macOS Ventura 13.4.1（22F82）

## エラー

- Androidのリリースビルド（aab）を作成しようとすると、下記のエラーが発生する。 
- エラーメッセージの通りで、android 33のSDKがないからインストールして、再起動してね、という内容。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37873/3129bab7-875f-4c30-9703-c0e7a43a4851.png)

```
Target Android SDK not installed

Android SDK does not include your Target SDK of 33.
Please use the Android SDK Manager to install your target SDK version. Restart Unity after SDK installation for the changes to take effect.
```

## 対応手順
### 大まかな流れ

デフォルトでは、UnityはUnityHubでインストールしたAndoirdSDKを使ってビルドを行います。
`Unity 2021.3.9f1`では、SDK33をインストールしてくれないので、エラーが発生しているわけです。

ですので、UnityHubでインストールしたAndroidSDKから33のSDKを見つけられるようにしてあげれば良いというわけです。

具体的には、

1. Android Studio経由で、SDK33をインストールする
1. 1.でインストールしたSDK33をUnityが使うSDKにコピーする

という手順を踏みます。

### 0. UnityHubでインストールAndroidSDKにandroid-33が含まれていないことを確認する

UnityHubから、現在利用中のUnityEditorの保存先を確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37873/ce44fbfe-a884-7b53-569c-3e5a361e7123.png)

`PlaybackEngines` > `AndroidPlayer` > `SDK` > `platforms` を確認します。

私の環境では、具体的なパスは下記の通りでした。

```
/Applications/Unity/Hub/Editor/2021.3.9f1-arm64/PlaybackEngines/AndroidPlayer/SDK/platforms                                       
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37873/432f943e-5f69-6726-d7a1-a8f821119f41.png)

`android-33`が存在しないことを確認できました。

### 1. Android Studio経由でplatform-33をインストールします

Android Studioを起動します。
さらに、SDK Managerを起動します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37873/4de279c2-5258-0252-6782-13fee0dc4e0a.png)

必要なSDKにチェックをいれ、Applyを押します。今回は`Android 13.0`をインストールします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37873/4a1efb95-7879-cbed-d13e-388e5d43208a.png)

インストールが終わると、`Android SDK Location`で設定されているパスに`platform-33`（API Level33に必要なライブラリなど）がインストールされます。

### 2. Android Studio経由でインストールしたplatform-33をUnityEditorにコピーする

最終的には、このようになります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37873/fb5e6e48-5b61-94d0-2515-df928d59676b.png)

### 3. UnityEditorを再起動しビルドする

新しくインストールしたplatformを認識してくれないようなので、UnityEditorを再起動します。

## まとめ

無事にビルドできました。

今回手動でSDKを追加しているので、PCの入れ替えなどを行うと同様のエラーに遭遇する可能性があります。
新しいUnityEditorを使うという選択肢もあると思いますが、新しいUnityEditorを使うと、それはそれで不具合がでたりするので気軽にできない場合もあると思います。

そんなときは、今回のような手順でサポートするAndroidSDKを追加して凌ぐことが可能です。

## その他

試していませんが、Android Studioでなく、UnityEditor付属のSDKManagerを利用しても対応できそうです。今回はGUIがすでに用意されており気軽に試せるという意味でAndroid Studioを使ってSDKを追加しました。
【CSS】【position】height100%,width100%の親要素の高さを子要素が検知しない時の魔法

## 条件
１. position:relativeで親要素にwidth:100%,height:100%を設定している。
2.left,right,top,bottomなどで子要素がうまく配置できない。

## 解決策
親要素にoverflow:hiddenを追加する。
（なぜか高さを検知するようになる）
hタグを生成する汎用的なコンポーネントを作りたい【Next.js・TypeScript】

これまで勉強しては間があいて、少し忘れてを繰り返してきました。
まとまった時間ができたのでもう一度基礎からコンポーネントの作り方をおさらいしています。

:::note info
【本記事をオススメしたい人】
・ReactやNext.js、TypeScriptを勉強し始めてまもない人
・汎用的なコンポーネントを作りたいけど上手くいってない人
:::

## hタグの見出しレベルをコンポーネント呼び出し時に指定したい
`<heading lebel={1} text="headingに入るテキスト">`みたいに記述すると
```html
<h1>Headingタグで囲まれたテキストがここに入ります。</h1>
```
のように出力されるイメージです！


結論は、下記のようなコードを書いて実現しました。

```tsx:heading.tsx
import { ReactNode, ElementType } from 'react';

type Props = {
  level: number;
  text: string;
};

const Heading = ({ level, text }: Props) => {
  let HeadingTag = `h${level}` as ElementType;
  return <HeadingTag>{text}</HeadingTag>;
};

export default Heading;
```

```tsx
import Heading from '@/components/elemets/heading/heading';

const HeadingView = () => {
  return (
    <main>
      <Heading
        level={1}
        text="Headingタグで囲まれたテキストがここに入ります。"
      />
    </main>
  );
};

export default HeadingView;
```

:::note info
【実装のポイント】
基本的な記述で実現できます。
ただ、let HeadingTag = h${level} as ElementType;の箇所で`as ElementType`を型アサーションを利用して文字列をHTMLのエレメントであることを明記しないとタグとして認識してくれないので思った動作をしてくれません…
:::

## hタグの下にサブタイトルのようなテキストを設置したい場合
作ったコンポーネントをさらに拡張を試みました！
HTMLで表現すると下記のように表示させたいと思いました。

```html
<hgroup>
  <h1>Headingタグで囲まれたテキストがここに入ります。</h1>
  <p>Headingのサブタイトル</p>
</hgroup>
```

hタグの下にサブタイトルを表示させて、hgroupタグで囲まれるようにします。
先ほどのコードを下記のように修正しました。

```diff_tsx:heading.tsx
import { ReactNode, ElementType } from 'react';

type Props = {
  level: number;
  text: string;
+  children?: ReactNode;
};

const Heading = ({ level, text, children }: Props) => {
  let HeadingTag = `h${level}` as ElementType;
-  return <HeadingTag>{text}</HeadingTag>;
+  let returnHtml = <HeadingTag>{text}</HeadingTag>;

+  if (children) {
+    returnHtml = (
+      <hgroup>
+        <HeadingTag>{text}</HeadingTag>
+        {children}
+      </hgroup>
+    );
+  }

+  return returnHtml;
};

export default Heading;
```

```diff_tsx
import Heading from '@/components/elemets/heading/heading';

const HeadingView = () => {
  return (
    <main>
      <Heading
        level={1}
        text="Headingタグで囲まれたテキストがここに入ります。"
      >
+        <p>subtitleを入力する場合</p>
+      </Heading>
    </main>
  );
};

export default HeadingView;
```

### 変更点の解説

```diff_tsx
// 一度変数に入れて代入します。
-  return <HeadingTag>{text}</HeadingTag>;
+  let returnHtml = <HeadingTag>{text}</HeadingTag>;

/*
  分岐処理の追加
  「children」つまり`<Heading>`タグで囲まれた要素がった場合再代入して返すHTMLを変更します。
  `hgroupタグ`でラップし、childrenを内部にレンダリングされるようにします。
*/
if (children) {
  returnHtml = (
    <hgroup>
      <HeadingTag>{text}</HeadingTag>
      {children}
    </hgroup>
  );
}
```

正直この方法が良いのかはわかりませんが、シンプルだと思っています。
もしよかったらご意見ください！
イベントファシリテーションで大事にしたいこと


# はじめに
学生向けのアイデアソンや新入社員向けのワークショップなど、数時間〜半日近いイベントで直近ファシリテーターを担当した経験をもとに、気づいたことなどをアウトプットしてみます。
定常業務の打ち合わせの場だけでなく一度限りのワークショップなど、ファシリテーションといってもシーンや参加者、目的によって一括りにできないという気づきがありました。今回は特にオンラインイベントでファシリテーションを担当する際に大事にしていること/大事にしたいことを備忘録として書いてみます。


# ファシリテーションとは
一旦、ChatGPT先生に聞いてみました。
![Screenshot 2023-07-18 at 7.15.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643991/523b39a7-4bdc-6b62-f088-1dd131d3d286.png)
>目標は、全員が参加し、尊重され、結果が受け入れられる環境を作ること

簡単ではないですが大事ですね…
イベントでのファシリテーションは、定例の打ち合わせでのファシリテーションと異なり、初めましての人が多かったり、プログラムが詳細に決められていたりなど違いがあるかと思います。
司会者では？と思う方もいるかもしれないですが、司会者はプログラム進行に重きを置いている一方、ファシリテーターは参加者に問いかけたり発言を求めたり双方向コミュニケーションを重視している点で異なると思っています。



# ファシリテーションで大事にしたいこと
書きたいことのイメージはこちらです。
事前準備と当日の進行・場づくりの２つに分けてみました。
参加者に楽しんでもらいたいのはもちろんですが、自分が楽しむマインドも忘れないようにしたいです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643991/75e480e2-327e-861e-304c-2dabafd4f402.png)





## 事前準備
イベントの内容やワークで使用するファイル、タイムライン等の基本的な設計・準備以外で大事だと思うことについて書いています。準備が8割…！
* **イメトレとスクリプト作成**
当日どんな人が参加してどんなアウトプットが出そうか、冒頭どうやって説明しようかなどイメージトレーニングしておくと当日落ち着いて話すことができ、いろんなシナリオを想定できます。またイメトレしながらスクリプト作成もします。こんなふうに話すだろうなを軽くメモした程度のもので、ほぼお守りでそれ通りに話すことはあまりないですが、あると安心できます。

* **サポートメンバーにどんな協力が必要か伝える**
こういう場合にどう対応してほしいか、このワークの時はこんな視点で参加してほしいなど詳細に伝えることで力を借りながらスムーズに進行できます。（前回ここが不足していたので反省点…）

* **環境面のセッティング**
ベストな環境は模索中ですが、こんな環境で臨んでいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643991/12575677-a945-21d9-851d-b14be9564e60.png)

    * PCは共有する画面とチャットツールを配置し、不要なアプリは閉じておく
    * チーム名や参加者のニックネームは付箋に書いて見えるところに貼っておく
    * 参加者が頷いているのを見ると安心して進められるので、反応が見れるようにモニター用意
    * 印刷したタイムラインシートとメモ帳・ペンを手元に用意
    * すぐ時間を確認できるようにデジタル時計を置いておく（スマホの場合は、時計アプリで常時表示にしておきます）
    * 飲み物、充電、空調などを整えておく
   

## 当日の進行・場づくり
* **時間厳守**
当たり前ではありますが、意識することが大事だと思っています。当日ハプニングが起きたり、ワーク量を読み誤ったりすると大幅に時間がずれてしまうこともあるので事前準備から気をつけたいです。


* **サポートメンバーのコメント確認**
イベント終わりに振り返るとなぜ自分で気が付かなかったんだろう？と思うこともありますが、進行に集中していると視点が抜け落ちていたりします。なので客観的に「今こうですが大丈夫ですか？」とリアルタイムで伝えてもらえるのはとてもありがたいです。トラブルがあった際、臨機応変に対応するためにチェックできる状態にします。


* **参加者の状況把握**
ファシリテーター自身がワークに介入する場合もあれば、参加者にチーム内ワークの進行を任せる場合もありますが、内容の理解度や進捗具合は都度把握できるとベストだと思います。
一つのワークや区切りのついた時点で疑問点がないか確認したり、途中の成果物を見ながらチームの状況に合わせてアドバイスしたりなど、ここはサポートメンバーにも協力いただきながら進めるのが良さそうです。

* **発話を促し、一方的なコミュニケーションを避ける**
オンラインだとクロストークが難しいのが課題です。チャットやリアクションボタンなどで反応いただけるととても嬉しいのですが、【参加者に発話してもらう】のが重要だと感じています。プログラム通り進めていくと一方的に話す時間がどうしても長くなってしまい、聴いてもらえているのか不安になります。
参加者側も一人の話を聞き続けるのはつまらないと思うので、サブファシリテーターの方と会話形式で進めると、ラジオ感覚で聴けるのでインプットしてもらいやすくなるのかなと考えています。
また「質問はありますか？」と問いかけても人数が多い場合は反応しづらいと思うので、感想などコメントをできれば名指しで早めの段階で聞いていくと、参加者の状況も都度把握することができそうです。


# おわりに

オンラインイベントの場合、伝わる情報の大半が声と話す内容で占められると思うので、テンション上げなきゃと思っています。ですが、対面ほど反応が明確に見えないため、どうしてもエネルギーを消耗しがちだと感じます。
とはいえ、好きな場所から参加できていろんな方とコミュニケーションが取れるというメリットもあるので、全員に楽しんでもらえるような場を提供できるようコツを掴んでいきたいと思います。
反省も兼ねて次回トライしたいことも書いているので、また見返そうと思います！
まだまだ経験不足なのでとにかく場数をこなしていきたい…！
Unity Remote 5 が動かない(windows、ios)

Unity Remote 5 が動かない時の原因メモ

1.iosにswitch platformしてない
2.itunesがpcにインストールされていない
3.USBがつながってない

上が確認できても、つながらない場合は、ひたすらUnity Remote を立ち上げなおしたりすると、いつかつながる。
Fastlaneを使わずにiOSアプリのビルド・配信を行う

# はじめに

iOSアプリのビルドやApp Store Connectへの配信を自動化する際には、Fastlaneを利用するケースが多いかと思います。Fastlaneは大変便利なツールですが、Rubyを導入したりBundlerでバージョンを管理したりと環境構築が少し面倒と感じる事があるかと思います。

そこで、本記事ではFastlaneを使わずにXcodeに付随する`xcodebuild`コマンドだけでiOSアプリのビルド・配信を行う方法を説明します。

## 環境

- Xcode14.3.1 (14E300c)


## 手順

### 1. Releaseビルドの署名設定をAutomaticにする

本記事ではXcode13から導入されたcloud signingを利用するため、Releaseビルドの署名設定を「Automatically manage signing」に設定してください。
※cloud signing については、[こちら]()の記事を参考にしてください。

![スクリーンショット 2023-07-19 21.42.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33433/16299b61-d8e5-9752-49c1-7a51eb8cf3d7.png)

### 2.App Store ConnectでAPIキーを作成する

`xcodebuild`コマンドからcloud signingによる署名、App Store Connectへの配信を行うために必要なAPIキーを作成します（ロールはAdminで作成してください）。

![スクリーンショット 2023-07-19 22.00.32.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33433/8514ac1d-ca21-3b58-9a62-968d7a77e787.jpeg)

- 作成したAPIキーはプロジェクトのルートディレクトリなどに設置してください
    - gitなどのバージョン管理ツールには含めないように注意
    - GitHub ActionsなどのCIサービスから利用する場合は、Secretsに登録しておいてビルド前のステップで復元するなどの対応が必要
- IssuerID、キーIDも`xcodebuild`コマンドのオプションとして指定する必要があるので控えておいてください 

### 3. ExportOptions.plistを作成する

Archivesファイルをipaファイルにエクスポートする際の設定を記載したExportOptions.plistを作成し、プロジェクトのルートディレクトリなどに設置してください。

下記に最低限必要な設定を記載したサンプルはこちら。他のkeyについては`$ xcodebuild -help` で確認できるので、必要に応じて追記ください。

```xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>destination</key>
	<string>upload</string>
	<key>manageAppVersionAndBuildNumber</key>
	<true/>
	<key>method</key>
	<string>app-store</string>
	<key>signingStyle</key>
	<string>automatic</string>
</dict>
</plist>
```

### 4. ビルド用スクリプトを作成する

`xcodebuild`コマンドを用いてビルド・配信を行うには、Archivesファイルの作成・ipaファイルのエクスポートの2ステップが必要になるため、それらを記述したシェルスクリプトを作成します。

```bash
#!/bin/bash
readonly ARCHIVE_PATH=<任意のアーカイブ出力先>
readonly IPA_PATH=<任意のipa出力先>

# generate achive
xcodebuild -scheme <スキーマ名> archive -archivePath $ARCHIVE_PATH \
    -allowProvisioningUpdates \
    -authenticationKeyIssuerID <IssuerID> \
    -authenticationKeyID <キーID> \
    -authenticationKeyPath <APIKeyのパス>

# generate ipa
xcodebuild -exportArchive \
    -archivePath $ARCHIVE_PATH \
    -exportPath $IPA_PATH \
    -exportOptionsPlist <ExportOptions.plistのパス> \
    -allowProvisioningUpdates \
    -authenticationKeyIssuerID <IssuerID> \
    -authenticationKeyID <キーID> \
    -authenticationKeyPath <APIKeyのパス>
```

あとは上記スクリプトを実行すれば、アーカイブの作成・ipaファイルのエクスポート・App　Store　Connect　への配信まですべて自動で行われます。

GitHub ActionsなどのCIツールからビルドする際も、APIKeyをSecretsから復元したり、IssuerID・キーIDなどは環境変数から読み込むようにして、ビルドステップで上記スクリプトを実行するだけでビルド・配信を自動化することができます。
Springbatch バリデーション

理解しました。汎用的なチェックメソッドを作成して、数値チェックや桁数チェックを行うサンプルコードを以下に示します。これにより、異なる条件で配列の要素をチェックできるようになります。

```java
import java.util.Arrays;

public class ArrayElementCheck {
    public static void main(String[] args) {
        // 整数型の配列を作成
        int[] numbers = { 10, 25, 7, 32, 18 };

        // 数値チェック
        System.out.println("=== 数値チェック ===");
        checkArray(numbers, ArrayElementCheck::isNumber);

        // 桁数チェック
        System.out.println("=== 桁数チェック ===");
        checkArray(numbers, n -> isDigitCount(n, 2)); // 2桁の数値かどうかをチェック

        // 他のチェックを追加したい場合はここにメソッド参照を追加

        // String型の配列を作成
        String[] words = { "apple", "banana", "cherry", "date" };

        // 文字数チェック
        System.out.println("=== 文字数チェック ===");
        checkArray(words, n -> isCharacterCount(n, 5)); // 5文字の単語かどうかをチェック
    }

    // 数値チェック用メソッド
    public static boolean isNumber(int number) {
        return true; // ここに数値チェックのロジックを追加
    }

    // 桁数チェック用メソッド
    public static boolean isDigitCount(int number, int digitCount) {
        return String.valueOf(number).length() == digitCount;
    }

    // 文字数チェック用メソッド
    public static boolean isCharacterCount(String word, int charCount) {
        return word.length() == charCount;
    }

    // 汎用的な配列要素チェックメソッド
    public static <T> void checkArray(T[] array, CheckFunction<T> checkFunction) {
        for (int i = 0; i < array.length; i++) {
            T element = array[i];
            boolean result = checkFunction.check(element);

            // チェック結果を出力
            System.out.println("Element " + (i + 1) + ": " + element);
            System.out.println("Check Result: " + result);
            System.out.println("-----------------------");
        }
    }

    // 関数型インターフェースの定義
    interface CheckFunction<T> {
        boolean check(T element);
    }
}
```

上記のサンプルコードでは、`ArrayElementCheck`クラスに`isNumber`、`isDigitCount`、`isCharacterCount`など、異なるチェックを行うメソッドを追加しました。これらのメソッドはそれぞれ数値のチェック、桁数のチェック、文字数のチェックを行います。

また、`checkArray`メソッドは汎用的な配列要素チェックメソッドです。このメソッドは関数型インターフェース`CheckFunction`を使用して、異なるチェックロジックをカプセル化しています。`checkArray`メソッドは配列とチェック用の関数を受け取り、配列内の要素に対してチェックを実行しています。

これにより、異なるチェック内容を簡単に追加・変更できるようになります。必要に応じて、さらなるチェックメソッドを追加し、`checkArray`メソッドを呼び出して異なるチェックを行うことができます。
[Python] Whisper APIを使って文字起こしファイルを生成する

# はじめに
OpenAIが提供しているWhisper APIで自動文字起こしできるっぽいので試してみました。

価格は2023年7月20日現在、$0.006/分ですのでかなり安いかなと思います。
1時間の音声で大体50円くらいですね。

# コード
Dockerでささっとやりたかったので、ChatGPTに聞いて全部書いてもらいました。
docker compose v2使っています。

```Dockerfile
FROM python:3.9-slim

# 作業ディレクトリを設定
WORKDIR /app

# 必要なパッケージをインストール
RUN apt-get update && apt-get install -y \
  && rm -rf /var/lib/apt/lists/*

# 必要なPythonのパッケージをインストール
RUN pip install openai

# コンテナ起動時に実行されるコマンドを設定
ENTRYPOINT ["python", "/app/whisper.py"]
```

```compose.yml
services:
  web:
    build: .
    volumes:
      - .:/app
    env_file:
      - ./.env
```

```.env
OPENAI_API_KEY=
```

```whisper.py
import openai
import os
openai.api_key = os.getenv("OPENAI_API_KEY")

audio_file= open("./audio.mp3", "rb")
# response_formatを指定することで文字起こしファイルを作成できる。（デフォルトはjson）
transcript = openai.Audio.transcribe("whisper-1", audio_file, response_format="vtt")

with open("output.vtt", "w", encoding="utf-8") as file:
    file.write(transcript)
```

肝はresponse_format指定するところですね。
詳細は[公式ドキュメント](https://platform.openai.com/docs/api-reference/audio/create#audio/create-response_format)を参照してください。

あとは、上記のコードがあるディレクトリに音声ファイルと、空のvttファイルを設置して`docker compose up`すれば完了です。

# まとめ
かなり簡単に文字起こしできました。
ただし、Whisper APIは25MBまでのファイルサイズしか受け付けていないため、音声品質を下げたり、良いところでファイルを分割したりは必要になるかと思います。
データ主導のふりかえり！YWT, Mad Sad Glad, Timeline

# はじめに
ふりかえりは、アジャイル/スクラムやプロジェクトマネジメントなどでよく利用される重要な活動です。ただ、それだけに限定されずいろいろなシーンで活用できるもので、チームやプロジェクトの過去の結果をもとに学びをえて、改善につなげるプロセスです。

数多くのふりかえり手法があると思いますが、KPTやKPTAなどを毎回実施しているチームもあるかと思います。
私自身も、KPT自体は嫌いではなくどちらかというと好きではあるのですが、他のふりかえり手法も試してみると新たな気づきが得られると思います。
ということで、個人的に重要だと思う**データ収集**のステップをスムーズに行える手法をいくつか共有します。

# ふりかえりの流れ
[アジャイルレトロスペクティブズ(書籍)](https://www.amazon.co.jp/dp/4274066983)には、ふりかえりの流れについて以下のように記載されています。
1. 場を設定する
1. データを収集する
1. アイディアを出す
1. 何をすべきか決定する
1. レトロスペクティブを終了する

普段ふりかえりをしていると、そういえばこのスプリントって何をしてたっけ？でもよかったこと、悪かったことなどを書き出さないと！というような気持ちになることがあると思います。
そのため、**データを収集する**というステップは、ふりかえりをリラックスして行うためにも重要だと感じています。

今回は、このデータ収集プロセスが（個人的に）比較的ストレスなく実施できるふりかえり手法を紹介します。

# YWT
「Y:やったこと」「W:わかったこと」「T:次にやること」という軸で次につながるアクションを決めていくというふりかえり手法です。
まず、はじめに「Y:やったこと」を思い出しふせんに書くことから始まるため、ストレスなくデータ収集を行うことができます。画像の例だと、「懇親会」「LiveShareを実施」などシンプルにやったことを記載しています。
また、やったこと、分かったことをベースに次にやることを考えるという性質上、悪かったことだけではなくよかった取り組みからも次のアクションが生まれやすいという点も個人的には良い点だと思います。

<img width="600" alt="YWT" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128594/016b8542-fb7a-0b69-d126-f7eb666dd72d.png">

# MAD SAD GLAD
各メンバーが感じた「MAD:いらいらや不満」「SAD：悲しかったこと」「GLAD：うれしかったこと、喜び」という感情をもとにしたふりかえり手法です。
こちらも、感情という切り口でその期間のことを思い出すことに集中できること、単純に実施したことだけではなく自身または他者の感情に向き合うきっかけづくりという点でもおすすめです。
MADの例：手動のテスト配信めんどう。PC重すぎる

<img width="600" alt="MSG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128594/f23de706-67ee-af08-6c02-7562e8b0c365.png">

# タイムライン(Timeline)
期間中にあったことをタイムライン上に時系列で書き出す（精度は重視しない）ことで、その期間を思い出してふりかえろうというものです。このふりかえりでは出来事はもちろん、感情的な部分にも着目するため、YWTとMadSadGladの要素が混ざっているような印象を持っています。また、長期間をふりかえるときによく利用される手法でもあります。

実際に、1年をふりかえるときに利用してみました。プロジェクトに関することだけでなく、プライベートなことも含めた出来事とその時の感情を合わせて見える化することで、モチベーションややる気が上がったタイミングが各個人ごとに異なることもわかり面白かったです。

画像の例は、一番下がタイムライン上にプロジェクト内/プロジェクト外での出来事を記載し、真ん中がその時の各個人のモチベーショングラフです。そして、一番上がそれらを材料にKeep/Problemを書き出したものになっています。
<img width="600" alt="Timeline" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128594/cdbdc8b7-fe2a-7501-7629-ce8f17c18cf7.png">


# さいごに
ふりかえりに正解はないと思いますが、いつも同じふりかえりをしていてマンネリ化している場合などは、Qiitaの他の記事や書籍など先人たちの知恵などを参考にいつもとは違うふりかえりをしてみるのも良さそうです。過去実施してきた中で、メンバーの評判が良かった手法の共通点がデータ収集プロセスにあると思い、参考として共有させていただきました。また、おすすめのふりかえりがあれば教えていただけると嬉しいです！

# 参考
- [アジャイルレトロスペクティブズ(書籍)](https://www.amazon.co.jp/dp/4274066983)
アジャイルを体験！紙ひこうきワークショップ

# はじめに
少し前に、アジャイル開発の特徴を体験してもらうために、**紙ひこうきワークショップ**を実施しました。
コロナ前はよく実施していましたが、コロナ禍だったということもありオフラインで集まることが少なくなっていたので、個人的にも久しぶりの実施になりました。

アジャイル開発について知らなかったり、知識としては知っているけど実践したことがない方にアジャイル開発の特徴を知ってもらうためには、座学よりもやはり体験として理解してもらうことが印象にも残り効果的ではないかと思っています。

ですので、これから周囲や社内にアジャイル開発を広げていくぞ！という方の参考になればと思い、実施の流れや、注意点、参加者のコメントなどを共有します！

# そもそもアジャイル開発ってなに？
「計画→実装→テスト」といったプロセスを、1週間~1ヶ月の短い期間ごとに繰り返し、動くソフトウェアを作っていく開発手法で、以下のような特徴があります。

- 反復的なアプローチ
    - 短い期間に区切り開発を繰り返すことで、早期に価値を提供し、フィードバックを得ることができます。
- 顧客との関与
    - 動くソフトウェアをもとに、顧客やステークホルダーからの定期的なフィードバックやレビューを行い、要求変更や変化に対して素早く対応することができます。
- 自己組織化されたチーム
    - チームは自身でタスクを管理し、作業の見積もりや進捗管理を行い、チームで協力してプロジェクトを推進します。
- シンプルで柔軟なプロセス、持続的な改善
    - 必要最小限の文書化とルールにとどめ、チームの経験をもとに期間ごとにふりかえりを行いプロセスを改善していきます。

これらの特徴を体験として理解するためのワークショップとして有名な紙ひこうきワークショップについて実際に実施しましたので、流れを共有します。

# 紙ひこうきワークショップとは
## 概要
チームごとに、以下のルールを満たす紙ひこうきをたくさん作ろうというシンプルなワークショップです。

```
ルール
・A4用紙の1/4だけを使います。
・紙ヒコーキは先端が丸まっている必要があります。
　　　　・鋭い先端を切り取るのにはさみを使ってください。
・飛ばすのに成功した紙ヒコーキの数をカウントしてください。
　　　　・テストエリアでしか飛ばせません。
　　　　・3メートル飛ばさなければいけません。
　　　　・1機につき1回しか飛ばせません。
・各チームメンバーは1つの紙を連続して折ることはできません。一度折ったら他のメンバーに紙を渡してください。
・各スプリント終了時の仕掛品は破棄しなければなりません。
```

## 事前準備
- チーム分け
    - 3~4名が適切。わいわい盛り上がりやすいように少人数がおすすめです。
- チームごとに利用するリソースの準備
    - A4の紙
    - はさみ（チームにひとつ）
    - 予実管理表（チームごとに紙を配布、もしくはホワイトボード）
      <img width="150" alt="予実管理表" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128594/351a2497-3858-37cb-76eb-f77eb24a8522.png">

- テストエリア
    - 3mのテストエリアをチームごとに用意

## 進め方
以下の流れで実施しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128594/9af899db-7bf8-b98c-3a3c-9bab9e349f5f.png)
<!--
実施風景
<img width="300" alt="説明風景" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128594/570260a6-b87a-fbe0-28e7-eb6aa68e5e6d.png"><img width="300" alt="実施風景" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128594/c3432afa-a9b3-dca9-61f6-4a707f894b5f.png">
-->
実施前は、計画の時間が短いと思い少し延ばそうと思いましたが、変更しないのがおすすめです。理由は、事前にしっかりと計画しても思い通りの結果が出るわけではなく、やってみることで初めてわかる部分もあるという気づきにもつながるからです。

## 実施結果
今回は３チームに分けて実施しました。結果は以下のとおりです。
<img width="300" alt="結果" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128594/b47204ac-306f-6c7f-faa2-6d722d2fea79.png">
どのチームも回数を重ねるごとに、成功する紙ひこうきの数が増え、予測の精度が向上し、無駄になる数（3m飛ばなかった。または、仕掛品）も減るという結果になりました。

# 参加者のコメント
こちらが参加者のコメントです。
- 知識では知っているが、ワークショップを通して短く繰り返していくアジャイル開発のプロセスを体感することができた。
- はじめから正確に予測することはやっぱり難しいと感じた。まずは、考えすぎず実践してみることが見積もり、計画の精度を上げるのに役立つことがわかった。
- 普段実施しているアジャイル・スクラムの各プロセスをわかりやすく体感できてよい。実際にアジャイル・スクラムを実施している上で今回参加したが、学びが多かった。
- このワークショップは以前にも実施したことがあるが、完了しなかったタスクがこのワークショップでいう仕掛品のことであり、実際の開発と結びつけることができ、感覚的にもより深く理解できた。

# さいごに
今回は紙ひこうきを飛ばすということが目的でしたが、実際の開発も同じように計画→実施→ふりかえりを短期間で繰り返していきます。そのサイクルを体験できると言う点ですごくわかりやすく、お題もとっつきやすく参加者もリラックスして楽しめるワークショップなので、個人的にもおすすめです。
また、紙ひこうきワークショップは、これからアジャイル開発について理解したい方向けというイメージを持っていましたが、すでに実践している方にも学びがあると言うところが一番の気づきでした。
広めのスペースが用意できる場合は、最近はみんなでリアルで会うことも増えてきたと思いますので、ぜひ実施してみてください！

# 参考
- [アジャイルソフトウェア開発宣言](https://agilemanifesto.org/iso/ja/manifesto.html)
- [紙ヒコーキワークショップをやりました
](https://dev.classmethod.jp/articles/scrum-training-airframe/#toc-17)
    - 実施時の画像があり、わかりやすいです！
【React】テスト実装で抑えておきたい"Testing Trophy"について超簡単に解説する

# はじめに
Reactが公式で推奨している`React Testing Library`というテスト用のライブラリがあります。

https://ja.legacy.reactjs.org/docs/testing.html

このライブラリは **`Testing Trophy`** という考え方に基づいて開発されており、Reactのテスト方針を考えるにあたってぜひとも抑えておきたい内容になります。

本記事ではこの **`Testing Trophy`** について、簡潔に解説していきます。

# Testing Trophyとは
`React Testing Library`の開発者であるKent C. Dodds氏が提唱している、**どのテストを重視すべきであるかをトロフィーの形で表現した考え方**のことを指します。

## テストの種類
Testing Trophyでは、テストは次の4種類に分けられます。

- **静的テスト（Static）**
    - コードを作成するときにタイプミスや入力エラーを検出するテスト
- **単体テスト（Unit）**
    - 個々の独立した部品が期待通りに動作することを確認するテスト
- **結合テスト（Integration）**
    - 複数の部品が調和して動作することを確認するテスト
- **E2Eテスト（End to End）**
    - ユーザーのように振る舞うロボットがアプリをクリックしていき、正しく機能するかを確認するテスト

## トロフィーの見方
トロフィーは下図のように表現され、**下から上に進むにつれて**、

- 開発コストが大きくなる
- テストの実装速度が遅くなる
- ソフトウェアの信頼性が高まる

という特徴を持ちます。

重要なのは、`コスト/速度`と`信頼性`のトレードオフであり、**トレードオフのバランスが優れているほどトロフィー内の体積が大きく表現**されております。

![DVUoM94VQAAzuws.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267522/c6ebdcf0-5ae3-11d7-247d-a4dc57347406.jpeg)

## 結論
`Testing Trophy`では、**Integration**が最も`コスト/速度`と`信頼性`のバランスに優れており、テスト実装の労力の大半はここに費やすべきであると結論づけられております。

`React Testing Library`もIntegrationの実装を重視した設計となっているので、Reactアプリのテスト方針を考える際には、この点を意識しておきたいです。

# 最後に
今回は`Testing Trophy`について、重要なポイントを簡潔にまとめて解説しました。
参考にしたKent氏の記事は最後に記載しておくので、興味があれば是非こちらも確認してみてください。

以上

# 参考文献

https://kentcdodds.com/blog/the-testing-trophy-and-testing-classifications

https://kentcdodds.com/blog/write-tests

https://kentcdodds.com/blog/static-vs-unit-vs-integration-vs-e2e-tests