OmniAICreator/Qiita-1.07M huggingface dataset:
ngrokで接続したと思ったらすぐ落ちる[対処法]

Flutterをngrok経由で表示させる途中、下記を実行。
```terminal
$ ngrok config add-authtoken <AuthToken>
$ flutter run -d web-server --web-port <ポート番号> 
$ ngrok http <ポート番号>
```
一瞬セッションステータスが表示されたと思ったら一瞬で落ちて下記が表示された。(一度もセッションが確立した覚えがないのに...)
```terminal
Your account is limited to 1 simultaneous ngrok agent session.
```
デフォルトでregionがusらしいのでapに変更すると成功した。
```terminal
$ ngrok http <ポート番号> --region ap
```
「’」を使用すると何が変わる？【JavaScript】

私の前々回の記事と前回の記事を読んでくださった方の中で、alert()の（）内に違和感を覚えて方はいらっしゃいますでしょうか？
※該当箇所をこれから記載しますので、リンク先に遷移してご確認いただかなくて問題ありません。

【前々回の記事】

https://qiita.com/monouge/items/b1a71acecdf6cf4536dd



【前回の記事】

https://qiita.com/monouge/items/7396a9d2e6dee879a2c0



前々回の記事では以下のように記載しました。

```
alert('初めてのJavaScriptです！');
```

一方で前回の記事では、

```
alert(A * 2);
```

と記載しました（Aは事前に宣言した変数・入れ物で、値「10」が入っています）。

2つを比較すると、前者では（）内に「’」が使われているのがわかります。

今回はこの「’」を使用すると何が変わるのかについて説明していきます。

<h2>文字列として認識するために「’」を使用する</h2>

さて、既に答えが出てしまっていますが、「’」を使用すると、「’」で囲った範囲が文字列として認識されるようになります。


```html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>タイトル</title>
    	<script>
		// 変数Aを宣言します。
		let A;
		
		// 変数Aに値を代入します。
		A = 10;
		
		// 変数Aを2倍した値を表示します。
		alert(A * 2);
		
		// 文字列として表示します。
		alert('A * 2');
		</script>
  </head>
  <body>
  </body>
</html>
```


上記のように書いてみると違いがはっきりしてわかりやすいかと思います。
注目すべきポイントは、

```
// 変数Aを2倍した値を表示します。
alert(A * 2);
		
// 文字列として表示します。
alert('A * 2');
```

です。
試しに実行してみると、最初に「20」と表示され、次に「A * 2」と表示されます。

![exe_result1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982997/5cac26a4-4077-05ee-65a8-823847112b11.png)

![exe_result2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982997/deaab9ef-bd5a-a358-2981-1f49f051d1da.png)


つまり、「’」で囲むと、その囲んだ範囲を文字列としてそのまま表示するのです。


<h2>変数に文字列を代入する場合</h2>

文字列として認識するために「’」を使用するといったことは、実際の実行結果も確認したことでご理解いただけたかと思います。

ここからはもう一歩踏み込んで、変数に文字列を代入することを考えてみます。

```html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>タイトル</title>
    	<script>
		// 変数Aを宣言します。
		let A;
		
		// 変数Aに文字列を代入します。
		A = 'いつもお世話になっております。';
		
		// 変数内の文字列を表示します。
		alert(A);
		</script>
  </head>
  <body>
  </body>
</html>
```


変数については、以下の記事で紹介しました（再掲です）。

https://qiita.com/monouge/items/7396a9d2e6dee879a2c0

重要な部分は

```
// 変数Aに文字列を代入します。
A = 'いつもお世話になっております。';
```

です。
「いつもお世話になっております。」を文字列として認識させるために、「’」で囲んでいます。
もし、「’」を使用せずに、以下のように記述するとどうでしょうか？

```html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>タイトル</title>
    	<script>
		// 変数Aを宣言します。
		let A;
		
		// 変数Aに文字列を代入します。
		A = いつもお世話になっております。;
		
		// 変数内の文字列を表示します。
		alert(A);
		</script>
  </head>
  <body>
  </body>
</html>
```

何も表示されません。これは「いつもお世話になっております。」が「’」で囲まれていないためエラーとなります。
コンピュータ側としては「’」に囲まれていない「いつもお世話になっております。」に直面した際に、「これは変数かな？　いやでもこれまでに宣言されていないし……。何なのかわからない」となり、うまく認識できないわけです。

```
// 変数内の文字列を表示します。
alert(A);
```


一方で、上記のalert(A)については「’」を使用しません。これは「A」という文字列としてコンピュータ側に認識させたいのではなく、Aという変数として扱ってほしい（=Aという入れ物の中身について、コンピュータに着目してほしい）からです。


<h2>おわりに</h2>

少しややこしいところもあり、頭がこんがらがってしまった方もいらっしゃるでしょうか？

・「’」で囲んだ範囲は文字列として認識される。

上記を理解しておくことは重要なのですが、完璧に理解する必要はないと思っています。頭の片隅にこの知識があれば十分です。

というのもプログラミングは試験とは異なり、答え（=実行結果）を見ても良いからです。実際に書いてみて実行することができるので、その実行結果から間違っている部分を推察できれば問題ありません。
ただ、何も知らない状態ですと、その間違っている部分を見抜くことができません。
そういった意味で完璧に理解する必要はないものの、困った時に「そういえばそんなこともあったかも……」と思い出せるくらいには知っておくことが大事です。
思い出した時にわからなければネットで検索してしまえば良いわけですから。

引き出しだけは用意しておくこと。そういった考えで勉強を進めていけば、気負いせずゆったりと、しかしご自身の身になる、継続しやすい学習スタイルになるのではないかと思います。



今回の記事を作成するにあたって、以下を参考にいたしました。ありがとうございます。

【参考文献】

https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Strings
インスピレーションを受けられる海外のWEBデザイン参考サイト

前回の記事では韓国出身のデザイナーとして
日本で働きながら感じたことについて簡単に投稿しました！

今回はその記事の続編！
第2弾としていわゆる海外のデザインについてです。
新しいインスピレーションが欲しい方のために
インスピレーションを受けられる海外のWEBデザイン参考サイトを3つのカテゴリに分けて紹介していきます。
まずは、ビジュアルのインプットを増やせるサイトから始めさせていただきます！

## ビジュアルのインプットを増やせるサイト
### dribbble
いつもデザインの参考資料を検索する際は、pinterestにお世話になっていますが、
もっと良質のインプットが欲しい時は、デザインに特化したサイトを見るのも良いかと思います！

ページ上部カテゴリのWebdesignカテゴリを押すと世界中の様々なWEBデザイナーのポートフォリオが見れます。
最近はモバイルサイトのデザインが大事になっていますのでMobileカテゴリも見てみると良いかと思います。

https://dribbble.com/

### awwwards
ユーザービリティ、創造性、コンテンツ、開発の４つの観点で審査されてキュレーティングされているAwwwardsです。
エンジニアの立場からデザインを評価しているところが新鮮ですね。
開発の容易性や、構築しやすさなど、エンジニアの立場も考えているので
協力についてのインスピレーションを受けれられると思います。
私はWEBデザイン以外にも英文タイポグラフィをよく見ています。
NETSEAではアパレル系のバナーを作成する機会がありますので、
おしゃれでトレンドなタイポグラフィをみると役に立ちます。

国別でもフィルタリング検索が可能なので日本国内のサイトも参考にできる有益なサイトです！
https://www.awwwards.com/

## 海外企業のデザインブログ
###  Googleのデザインブログ

クオリティの高いイラストで見るだけでも楽しいGoogleのデザインブログです。
デザインから技術の全般的なカテゴリまで幅広く記事が掲載されています。

https://design.google/

LibraryカテゴリではGoogleで厳選されたタイポグラフィー記事も載っています。

https://design.google/library/google-fonts/

マテリアルデザインに関する様々な情報もあります。

###  META(facebook)のデザインブログ

2014年から2022年までの記事を集めたアーカイブでデザイントレンドや方法論を一目でチェックできます。

https://medium.com/designatmeta

その中で6年前の記事ですが、デザイン改善の考え方に関して改めて考えさせられた記事を紹介したいと思います。
https://medium.com/designatmeta/how-to-make-your-not-so-great-visual-design-better-67972eee3825

### Spotifyデザインブログ
ポップとトレンドなデザインのインスピレーションが欲しい時なら
Spotifyのデザインブログがおすすめです。
マウスを動かすと見えるモーションも楽しいです。
デザインだけではなく記事のクオリティもとても高いです。

https://spotify.design/

## デザイン記事を定期的に購読できるサイト
### webdesignernews（デーリー）
毎日WEBデザイナーとエンジニアに有益な最新記事を確認できますので
最新情報を常に把握できます！

https://webdesignernews.com/

### speckyboy（週刊）
毎週新しい記事が投稿されるオンライン・マガジンです。
デザイン記事以外にも有益なデザインテンプレが無料で手に入ります！
写真やタイプに効果を追加するフォトショップのアクションがたくさん掲載されています！
https://speckyboy.com/

## それ以外にも、、、
### uxmovement
良いデザインと悪いデザインを比べて見られますので
UIデザインの参考になるサイトです。

https://uxmovement.com/

## 終わりに
個人的な思いですが、たくさんのビジュアルに目を通しておくとインスピレーションをたくさん受けられると思います。
そのために海外のアウトプットをよく見ることも役に立つかと思います。

もちろん海外のアウトプットの検索は
英語でアプローチすることになるので怖いですね。
私もどっちかというと英語が苦手な方ですが、
最近、技術の発展で翻訳機能も本当に良くなリましたし
分からない単語はネットですぐ検索できる時代なので
英語力が低くても心配しなくて良いかと思います。

まだまだですが、頑張ってまとめてみた今回ご紹介したサイトがぜひ皆さんにとして参考になれば幸いですー！
SSM Run Commandを使ってEC2（Windows OS）上でAWS CLIを実行しようとしたときにつまずいた話

## 環境

```
OS：Windows Server 2016 Datacenter
SSM Agentバージョン：2.3.542.0
```

## やりたかったこと

SSM Run Commandを実行してEC2（Windows OS）上にあるファイルをS3にアップロードしたい。

実行したドキュメントはAWSが用意している `AWS-RunPowerShellScript`

commandsパラメータとして

```
"aws s3 cp s3://hogehoge/fugafuga.csv {file_to_path}/fufafuga.csv"
```

を渡して、`{file_to_path}/fufafuga.csv`を S3バケット `hoghoge`上にアップロードしたいという非常にシンプルなもの。

## 事前準備

EC2上でRun Commandを実行するために必要な

1. SSエージェントのインストール
1. EC2への権限の付与

などは

[【AWS】【SSM】Systems Manager の SSM エージェントをインストールその他設定して Systems Manager から認識されるようにする設定手順【Windows】](https://go-journey.club/archives/12803)

[【公式】Systems Manager Run Command を使用してコマンドを実行](https://docs.aws.amazon.com/ja_jp/systems-manager/latest/userguide/run-command.html)

などに十分たくさん書いてあるので、それらを参考にお願いします（適当すいません）

## なにが起きた？

問題なく実行できるだろうなーと思ってドキュメントを実行したら異常終了。

ログを見てみると

```:ログ
用語 'aws' は、コマンドレット、関数、スクリプト ファイル、または操作可能なプログラムの名前として認識されません。
```

「あーSSMエージェント用のユーザーがAWS CLI見れていないんでしょ、どうせシステム環境変数にパスが入ってないやつね」

とおもって環境変数を確認に行くと

![パス通っているやん.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/471646/62da9fa8-82ae-46a7-fa53-755c46d60fea.png)

ちゃんとシステム変数に登録されてらあ。

## 結論

SSMエージェント再起動したら無事正常終了するようになりました。

```powershell:実行したコマンド
Stop-Service AmazonSSMAgent
Start-Service AmazonSSMAgent
```

たぶんですが、

1. エージェントのインストール
2．AWS CLIのインストール

っていう順番で行っていたので、エージェントの再起動が必要だったみたいですね。

そりゃそうかなあと思う内容ではあるものの、結構はまってむかついたので記事にしてみました。

## まとめ

困ったときの再起動ですね！（最強）
Enhanced Notes in salesforce Lightning

[まとめページに戻る](https://qiita.com/Keiji_otsubo/items/60afc2a8d211b6f7d89f)
[まとめN～Z](https://qiita.com/Keiji_otsubo/items/92f92bb9f668ca9688be)



+ [ユーザーが拡張メモを使用してメモを追加すると、他のユーザーはそれらを表示することしかできず、編集することはできません。デフォルトでは、メモの権限は他のユーザーに対して読み取り専用に設定されています](https://salesforce.stackexchange.com/questions/319888/enhanced-notes-in-salesforce-lightning)

When sharing a note in Lightning Experience, you can provide Viewer access only. There is no Collaborator access. Notes doesn’t support simultaneous editing, and this restriction prevents multiple people from editing a note at the same time. If multiple people change a note at the same time, they overwrite each other’s changes


Lightning Experience でメモを共有する場合、閲覧者アクセスのみを提供できます。コラボレーター アクセス権はありません。メモは同時編集をサポートしていません。この制限により、複数のユーザーが同時にメモを編集することはできません。複数のユーザーが同時にメモを変更すると、互いの変更が上書きされます


+ [メモ機能の自動保存について](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007FW02H)

:::note
アイデアには自動保存の機能を無効化するオプションがあがっています。

コメントを見ても回避策は提案されていないようですね。

https://ideas.salesforce.com/s/idea/a0B8W00000GdbGIUAZ/ability-to-disable-note-autosave-functionality-in-lighting-experience
:::

+ [Notes prioritization](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007HKqZS)

:::note
Looks like this is still an idea:

Pin Notes to Top of Notes List View
https://ideas.salesforce.com/s/idea/a0B8W00000GdbmQUAR/pin-notes-to-top-of-notes-list-view
:::

# メモの機能

+ [状況確認の簡易な議事メモを登録して運用したいのですが、なにかうまい方法はありますでしょうか？ ](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX00000KCSNP)

現在は商談の「メモ」機能を使いはじめていますが、以下2点で困っているため、別機能やワークアラウンド含めてアイデアがあれば教えて下さい

登録した人しか編集できないので、複数人で共同編集できない
レポートやダッシュボードで表示できないので、個別案件を開いてメモを入力してまた検索に戻って・・・と手番が多い

:::note
ちょっと古い英語の投稿ですがヒントになるかもしれません。私は外国語がよく理解できないのでWEB翻訳で投稿しますが、概要はつかめると思います。 


会議メモ オブジェクを作って、必要なオブジェクトと参照関係を作ったようです。確かにこれなら他の人と共有できます。このカスタムオブジェクトの最終更新日の大きい順で検索するようなビューがあればこのオブジェクトだけを検索することで最近修正されたものを追いかけることができすです。 

関連先に商談もあるのでクリックすれば商談も確認できます。 数式項目を使って商談の中で特に確認したい項目を参照しておけば、このオブジェクトだけでも結構検索できると思います。ただ数式だと検索してもヒットしないので、フローなどで値をセットしておいてもいいかもしれません（商談が変わった時にも自動化が必要ですが...）

--- WEB翻訳 
以前の会社 (FS、FS Cloud は使用していません) では、リード、商談、アカウントへの参照を含むカスタム オブジェクトを作成しました。この方法で使用した主な理由は 2 つあります。まず、ノイズを生み出す他のアクティビティが多数ありましたが、これらの目的は実質的な会話のためでした。次に、会議連絡先という関連オブジェクトを作成し、他のアカウントの連絡先をタグ付けできるようにしました。会計士、弁護士、家族などの人々です。 

標準のイベント オブジェクトはありましたが、カスタムの会議メモ オブジェクトとカスタムの会議連絡先オブジェクトを作成しました。すべてのメモがそこに保存されたため、イベント レコード自体は編集されていませんでした。これが、イベント レコードに添付された連絡先への更新メールをトリガーするものです。 

https://trailhead.salesforce.com/trailblazer-community/feed/0D54S00000A90XeSAJ
:::
ドメインのリダイレクト【拡張ドメイン】

+ [Domain redirections](https://trailhead.salesforce.com/en/trailblazer-community/feed/0D54S00000KhgcUSAR)

# 1. サンドボックスに [以前の私のドメインの URL を現在の私のドメインにリダイレクト] オプションが表示されますが、本番環境では表示されません。 その理由はありますか？ 

このオプションは、[私のドメイン] に変更をデプロイした後にのみ使用できます。それ以外の場合、リダイレクトする以前の [私のドメイン] URL はありません。私の推測では、強化されたドメインがサンドボックスに展開されていると思います。これは、展開された [私のドメイン] の変更です。


このオプションを使用できないもう 1 つの理由は、変更をデプロイしてから[以前の私のドメインを削除] をクリックした場合です。(チェックボックスと同様に、このボタンは [私のドメイン] に変更をデプロイした後にのみ表示されます。)

# Winter '25 が組織でリリースされた後、この URL リダイレクトを使用できますか?

あなたの*.force.comサイトの URL は 、 Winter '25まで リダイレクトされます。これらのリダイレクトは、そのリリースで停止します。すべてのお客様は、拡張ドメインを展開してからリダイレクトが停止するまでの時間を利用して、新しいサイト URL に移行することをお勧めします。次の手順をお勧めします。

1. 組織設定で古いサイト URL が使用されている場所を明らかにするために、テスト中にそれらのリダイレクトを一時的に無効にします。詳細については、「以前の Force.com サイト URL のリダイレクトを無効にする」を参照  してください。
2. 新しい URL について顧客/ユーザーに通知します。リダイレクトは設定されていますが、新しい URL にリダイレクトするための追加の手順です。さらに、これは古い *. force.com URL はリダイレクトされなくなりました。大まかなガイダンス については、「私のドメインの変更についてユーザーと顧客に通知する」を参照してください。 
3. 私のドメインのホスト名リダイレクト をログに記録し、そのログを使用して、古い URL が使用されている場所を特定します。これにより、訪問者にブックマークやリンクを更新するよう促すことができます。

# リダイレクトの設定がない

+ [リダイレクト設定について](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000Jg9YoSAJ)

もしかしたら、古いURLのリダイレクトなので初めから拡張ドメインが有効になっている組織にはこの機能はないのかもしれないです。

追記: 2022/10/18に作成した環境にもないですね。これも初めから拡張ドメインになっていた環境みたいです。2022/8/4作成分にはありました。
気になる一文がありました....

Summer '22 以降で作成されたすべての対象組織では、デフォルトで拡張ドメインが取得されます。

https://help.salesforce.com/s/articleView?id=sf.domain_name_rename.htm&type=5

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/3ec3fd50-5b09-51d5-29d9-83751242a80e.png)
棒グラフを表示する(SPSS Modeler データ加工逆引き10-8)

# 棒グラフを表示する（新グラフ）

![スクリーンショット 2022-11-15 11.57.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/c2963a7a-a5d3-0840-d355-6e4e810d3c15.png)

## 1.想定される利用目的

・データの度数分布の確認
・ばらつきのあるグループの比較


## 2.サンプルストリームのダウンロード

https://github.com/yoichiro0903n/blue/blob/main/bar.str?raw=true

## 3.サンプルストリームの説明

![スクリーンショット 2022-11-15 14.11.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/58e856b9-044e-152c-fe18-facdb9ccbafe.png)

入力するデータを確認するため[テーブル]を実行します。

![スクリーンショット 2022-11-15 14.11.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/a6fc411b-53e5-93a3-40c1-61afbf2cbe26.png)

[棒グラフ]ノードで従来の棒グラフを表示します。
![スクリーンショット 2022-11-15 14.12.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/1d2bc316-e5e7-f034-8c3d-5eac5ac6e5a5.png)

[ユーザー入力]ノードを右クリックして[データの表示]を選択します。
![スクリーンショット 2022-11-11 14.15.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/1ef9f2d0-77cb-20ba-4894-df147b7e4b05.png)

棒グラフを選択します。
![スクリーンショット 2022-11-15 11.53.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/85a8d347-0bd0-6f2b-5ce8-c8dc0acfc6fb.png)

以下の画面左の設定に従いセットします。

![スクリーンショット 2022-11-15 11.51.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/4e32d672-7d88-4053-f59e-876174f718ed.png)

![スクリーンショット 2022-11-15 11.52.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/b6d44075-0429-75c5-e76c-277937201216.png)

![スクリーンショット 2022-11-15 11.52.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/cacb58a9-a63d-11ee-ce52-fa6638871a74.png)

#### 注意事項

新グラフ機能はバージョン18.1以降で装備されました。

## 4.参考情報

#### 新グラフを解説した記事

https://www.ibm.com/blogs/solutions/jp-ja/learn-modeler-04/

#### SPSS Modeler ノードリファレンス目次

https://qiita.com/416nishimaki/private/503037195081d3323eee

#### SPSS Modeler 逆引きストリーム集（データ加工）

https://qiita.com/416nishimaki/private/4bf813e6cba84b2a1008
PHP 連想配列の値を使って配列に置換する ( array_values )

# 例

```php
array_values(
  array(
    "A" => 10,
    "B" => 5,
    "C" => 7
  )
);
```

結果

```
Array
(
    [0] => 10
    [1] => 5
    [2] => 7
)
```


# チャットメンバー募集


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

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


# Twitter

https://twitter.com/YumaInaura
LeetCode 

### Longest Substring Without Repeating Characters
三問目です。
前から順番に見ていってチェック済のものをstd::set<char>に入れて一致するものがあればそこでチェック終了してサイズを比較。
以前チェックを始めた場所の次の場所からチェックを開始。
これO(n^2)オーダーなので遅いのであんまり良くないはず
何かいい方法ありますかね？
```C++
class Solution
{
public:
    int lengthOfLongestSubstring(string s)
    {
int ans = 0;
    int start = 0;
    std::set<char> memo;
    for (int i = 0; i < s.size(); ++i)
    {

        auto iter = memo.find(s[i]);
        if (iter != memo.end())
        {
            ans = memo.size() >= ans ? memo.size() : ans;
            start++;
            i = start-1;
            memo.clear();
        }
        else
        {
            memo.insert(s[i]);
        }
    }
    ans = memo.size() >= ans ? memo.size() : ans;
        return ans;
    }
};
```
Flutter スクロールバーを追加したのに表示されなかった対応

## 概要
Flutterでアプリを作っていてドロワーメニュー（Drawer）にListViewを乗せていました。
そこに常時スクロールバーを表示したくて単純にListViewに対してScrollbarでラップしてみたのですが
確認すると以下のようなエラーが出たのでその対応を共有します。

## エラー内容
```
When Scrollbar.thumbVisibility is true, the associated ScrollController must only have one ScrollPosition attached.
```
## 対応内容
どうやらScrollBarとListViewに同じコントローラーを設定しないといけないようでした。
コードは以下となります。

```
final scrollController = ScrollController();// これを追加

Expanded(
  child: Scrollbar(
    controller: scrollController, // これを追加
    thumbVisibility: true,
    radius: const Radius.circular(15),
    child: ListView(
      controller: scrollController,// これを追加
      children: [
       ・・・・
      ],
    ),
  ),
),
```
テストが好きになるテスト駆動開発-モブプロ開発を行っているチームでやっている取り組み-

# はじめに

本記事は[モブプロ開発を行っているチームでやっている取り組み Advent Calendar 2022](https://qiita.com/advent-calendar/2022/mob_torikumi_example)の13日目の記事です

今回は「テスト駆動開発」について紹介します。
と言いましても、テスト駆動開発の内容についてこの記事で紹介するというよりは、テスト駆動開発をどのようにチームに取り入れたか、どのような変化がチームにあったかについて主に書こうと思っております。

テスト駆動開発自体の詳しい内容はこの後紹介する書籍を読んでみてください

# 前回

https://qiita.com/Sicut_study/items/3e791557a96dcb00e8c0

# Chapter#12 テスト書いてないだって？

じん「みなさんは今までTDDとかで開発ってしてましたか？」
アール「私はじんさんと一緒に開発してたのである程度TDDで書いてました」
ミュート「TDD????」
ベープ「TDDって何のことですか？」
じん「テスト駆動開発の略称です。最初にテストを書いて、それを通すコードを実際に書きながらシステム開発をする手法です」
アール「この開発をしてからテストが楽しいと思えるようになりましたね」
ベープ「私前職も含めて手動でテストすることはありましたが、自動テスト書いたことないですね」
ミュート「私もやったことないですね。テスト自体は経験ありますが、自信は全然ないですし、会社でテストがないプロジェクトたくさんですよね」

このときじんの脳内にはとある画像が浮かんだ

![1665964585.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/c839326f-106f-ee02-7271-3d298c3827fa.png)

じん「いやさすがにテスト書いてないレベルはまずいです」
じん「このチームではこれからテストを書ける、テストの考え方がわかるのは大前提として、テスト駆動開発で基本的な開発を回していきます」
アール「テスト駆動開発が一番開発の楽しいところですもんね」
ミュート「なぜそんなにテストで楽しめるんだ、、、」

# テスト駆動開発について

テスト駆動開発を導入するきっかけになったのは私がこの本を読んだのが始まりでした

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/57bb2e06-bfee-a20e-c65f-3dc7cceb5107.png)
[テスト駆動開発](https://www.amazon.co.jp/%E3%83%86%E3%82%B9%E3%83%88%E9%A7%86%E5%8B%95%E9%96%8B%E7%99%BA-Kent-Beck/dp/4274217884/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=A55B6HKA75FD&keywords=%E3%83%86%E3%82%B9%E3%83%88%E9%A7%86%E5%8B%95%E9%96%8B%E7%99%BA&qid=1669334870&qu=eyJxc2MiOiIyLjk4IiwicXNhIjoiMi4wMiIsInFzcCI6IjEuNzgifQ%3D%3D&sprefix=%E3%83%86%E3%82%B9%E3%83%88%E9%A7%86%E5%8B%95%E9%96%8B%E7%99%BA%2Caps%2C176&sr=8-1)

おそらくテスト駆動開発をチームで始めようと思った方のほとんどが読んだことのあるであろう名著です

テスト駆動開発をチームで広めるためには、テスト駆動開発を実践できる人が必要だと思います。
そこで私はこの本でテスト駆動開発について学び、日々の開発をなるべくテスト駆動開発で書くようにトレーニングを積みました

そして、実際にチームに適応する際に、すべての人がこの本を学習しているわけではなく、私のチームはテストすらままならないレベルでした。
いきなりテスト駆動開発を実践で教えても考え方や流れが理解できないと思いつつ、書籍を全員が読むのを待ってられないということで以下の動画を全員で視聴する時間を作りました

https://www.youtube.com/watch?v=Q-FJ3XmFlT8

この動画がかなり良くできており、書籍の大事なノウハウをまったく知らない状態からでも学ぶことができます
テスト駆動開発をチームに導入する際には最初に全員でぜひ視聴してほしいです

ここまでいったら実際にテストを書きながらテスト駆動開発について学ぶフェーズに移りました
私がいままでやってきたテスト駆動開発の経験を教えつつ、**なぜテストを書くのか**、**テスト駆動開発にどんなメリットがあるのか**を理解してもらうことを意識しました

テストはなくても開発はできます、そのようななくても何とかなるものをやらせるというのは難しいものです。
アフリカの部族に靴を売るのがとても難しいという理屈と同じです

常々なぜテストから書いたほうがいいのか、テストを書いたほうがいいのか理解してもらうように教えました


また、テスト駆動開発をやるうえで**ToDoリスト**の作成にも力をいれました (後日の記事であげます)
なるべく粒度を下げて、テストケースレベルにまで細かくしたToDoリストを作らせることで、新人が開発のゴールまでの道を逆算できるようなトレーニングを行いました

このような努力もあり、いまでは私が教えなくてもモブプログラミングでテスト駆動開発をしながら開発ができるようになりました

テスト駆動開発を行ったことで以下のメリットがありました
- テストから書くので必要最低限のコードで機能を作れる
- リファクタリングできれいなコードになる
- 目標までを逆算できるようになる
- テストを書くのが好きになった
などなど

導入する敷居は高いように見えますが、モブプログラミングでやっているチームであればできると思っておりますのでぜひ挑戦してみてください

# 次回

https://qiita.com/Sicut_study/items/d099fbc445115808db55

# おわりに

今回も紹介程度でしたので短い記事になりました
テスト駆動開発については私が説明するより書籍を読んでいただくのが一番早いと思っています
デメリットがとても少なく、かなり気に入っている開発方法になりますので気になった方はぜひ試してみてください

モブプログラミングとかなり相性が良いですよ！
BigQueryでSTRING型のJOINを高速化する方法

BigQueryでJOINをする際にSTRING型のカラムを使って結合すると、クエリに時間がかかることがあります。
実際にBigQueryのベストプラクティスにもSTRING型ではなくINT型を使うことが推奨されています。

```sql
select ...
from table1
join table2 on table1.str_key = table2.str_key -- 遅い
```

https://cloud.google.com/bigquery/docs/best-practices-performance-compute#use_int64_data_types_in_joins_to_reduce_cost_and_improve_comparison_performance

とはいえ、分析の要件によってはSTRING型でのJOINが必須な場合もあります。
そのようなときのためにSTRING型のJOINを高速化する方法を紹介します。

BigQueryには `FARM_FINGERPRINT` というハッシュ関数があり、この関数を使うことでSTRING型をINT型に変換できるので、この関数の適用結果を使ってJOINを行います。
また、ハッシュ関数を使っているので関数適用前の値が一致しなくても適用後の値が一致してしまうことが極稀に発生します。
そのため、where句でそのようなレコードを除外しています。

https://cloud.google.com/bigquery/docs/reference/standard-sql/hash_functions#farm_fingerprint

```sql
select ... 
from table1
join table2 on farm_fingerprint(table1.str_key) = farm_fingerprint(table2.str_key)
where table1.str_key = table2.str_key -- joinの方が先に処理されるのでwhere句の処理対象のレコードは多くない
```
リモートワークの今後

![24857792_s.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23130/dcdcb372-0a6f-308e-7e35-334968307339.jpeg)
海外では、Twitter,google等の大手IT企業がリモートワークを縮小していく傾向にあります。
日本では、まだ出社マストにするIT企業は出ていませんが、日本人の方が集まって仕事したい人種ではないかと思います。
従って、徐々にリモートワークは、エンジニアも含めて減っていくのではと思います。

# リモートワークの是非
リモートワークは、ベテラン・シニア陣には、便利な仕組みです。出社しなくても良いので効率的だし、訪問が減ったし、ミーティングも移動がなくて効率的。周りからの邪魔がなく、自分ひとりで仕事に集中出来て効率的。子供の世話も出来てプライベートと仕事のバランスが取りやすい。一人で仕事をこなせてしまうベテラン・シニア陣には良いことばかりです。

一方、これから仕事を勉強していく新人や若手にとっては、非常に非効率だと思います。質問しようにも質問のタイミングを悩んだり、周りの会話を聞いて情報収集を出来なかったり、同期の活躍を見て、モチベーションを上げる事が出来なかったり。
そして何より、新しい物を生み出す仕事は集まって議論しながらやった方が効率が良いと思います。温度感とか空気感とかが結構大事なのではと思います。
従って、そのうち出社マストに変えていくのも必要だと思ってます。

# 一方でテクノロジーの変化もある
とはいえ、テクノロジーは進化します。近い将来、VR・XR色々なテクノロジーの進化により出社していて議論するのと変わらない状態になってきます。
そして、自分たちの想定もしない部分で若者は変化に対応していきます。生まれた時からスマホをもってた人達は、TikTokで政治の情報を収集したり、恋人とラインを繋ぎっぱなしで生活したり、リモートワークネイティブ世代は、リモートワークが前提なので、今は非効率でも効率的なやり方を作り出すし、それが前提で仕事をしていきます。
絶対に出社して顔合わせるべきと凝り固まったステレオタイプな老害の意見ではなく、ちゃんと若者の意見も聞きながら、状況も見ながら最適なやり方を見出すべきだと思います。
Rails - コントローラーで特定アクションだけ before_action をスキップする例 ( skip_before_action ) 

```rb
class FooController < ApplicationController
  skip_before_action :foo_method, only: [:index]

  def index
     ...
  end
end
```


# チャットメンバー募集


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

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


# Twitter

https://twitter.com/YumaInaura
専門領域の違うメンバーが集まるチームのマネジメント



# 記事を書くにあたって
 エンジニアの方々が専門領域について、Advent calendarに記事を書く中、
非エンジニアの私の記事で良いのか！？と思いつつ。

モノづくりの１つの体制（組織構造）として、
弊社では、Planner、Designer、Engineerが、1つのチーム内に存在しており、
その中で、非エンジニアの私が、Managerを担い、経験したこと、感じている事を書こうかと思います。

# 1つのチームに異なるロールが属する組織構造
弊社のモノづくり体制は、以前、企画部・開発部があり、似た領域のメンバーがチーム内に属していましたが、
約２年ほど前から、プロダクトの担当領域毎に責務を担うチームとして、チーム内にPlanner、Designer、Engineer（フロントエンド、バックエンド、機械学習）が属する構造に変化しました。

この構造によって、担当プロダクトの課題をチーム内に閉じて進めることができるため、課題解決までのスピードが比較的早まったと感じます。
一方で、Plannerと機械学習Engineerの対話など、ロールや専門領域が異なるメンバー間のコミュニケーションが増加するなど、従来の組織とは、異なるハードルがあることも確かです。

# ロールが異なるメンバーが集まった協業
まず、「ロールが異なる」と書きましたが、同じロールでも過去の経験や得意領域、価値観等が異なるため、それぞれのメンバーと向き合い、相互理解、敬意を持った言動が必要なことは、どのような組織でも同じです。
それを前提としても、専門領域に尖ったメンバー同士が集まり、同じ課題・方向性に向かって進んでいたとしても、目先の課題、対話で利用する単語の違い（俗にいう「プロトコルの違い」）によって、コミュニケーションコストが高まったり、認識齟齬が生じやすい環境であると思います。
また、対話する先や内容、タイミングによって、求められる粒度が異なるため、担当領域の垣根を超えた周辺知識が求められる環境であると思います。

# より成果を挙げていくために考えること
先にも書いた通り、弊社の組織構造は、開発スピードをあげる１つの手段として有効と考えます。
そのメリットを享受するために、個人的に心がけていること、組織としてサポート頂いている事を書きます
※ 以下は、個人的に感じていることです。

## イキイキ仕事ができる環境を整備
1日の活動時間のうち、多くを費やす仕事時間。
その時間が例えば、苦痛であり、時間の経過をまつ状態であれば、新しいアイデアが生まれたり、価値提供ができる状態とはかけ離れた状態であり、チームの成果は上がりません。

Baseにあるのは、それぞれのメンバーのパフォーマンスが最大化されること、そして、その相乗効果によって、1+1が2以上を生み出すと思っています。

「イキイキ仕事をする環境」は、書いたり、表現するのは簡単ですが、各チームメンバーのWillや今のPhase、（仕事以外も含む）置かれている状況によって違い、今日・明日・明後日でも変化するので、そう簡単に構築できる物ではないですし、構築完了のゴールがないものかもしれません。

ただ、変化する状況の中、イキイキ仕事ができる舞台を整えることが、マネジメントの仕事の１つと思っています。

## 個々人のStyleを理解
弊社に参画し、私が学んだ大きな１つ。
マネジメントに係わる方であれば、「当たり前」なことで、"何をいまさら！？"かもしれませんが。

人それぞれ、得意・不得意があったり、綿密な計画を立ててから行動する人やまず行動する人、最低限のコミュニケーションで黙々と成果を挙げていく人・・・様々な方々で構成されているのが現状です。
これは、人それぞれのStyleや個性、価値観であって、全く同じ人は居ないという断言をしても良いぐらいだと思います。

一方、PlannerやEngineerというラベルのようなものがロールとして付いています。

気をつけていることは、「Styleを重視出来ているか！？」ということです。

"PlannnerだからXX"や"上司だからXX”と言われると、言われた本人はどんな気持ちになるでしょう？
ユーザーの課題解決やチーム運営をしていく中で、必要な領域がありますが、その領域を（ロールに関係なく）メンバーがカバーしあえれば良いのではないかと考えています。
イメージ的には、「◯◯さんは、XXが得意だから、この部分お願い出来ます？□□は私がやろうと思います」のように、領域の垣根を超え、価値提供をしていければと思っています。


## 弊社行動指針（Scientific）
俗に「プロトコル」の違いによるコミュニケーションコストの増加や、認識齟齬、そもそも"話が噛み合わない"状態を感じることがあります。

弊社の行動指針の１つ。
 - Scientific
　数字をビジネス、プロダクトの共通言語として、すべての事象や方針決定においてできる限り数字の裏付けを基に実施され、評価され議論が行われる

この行動指針（Scientific）を意識することで、「プロトコル」の違いによる課題を一定割合、解決することができると考えています。　　
    
## 最低限の知識を有する努力と、相手に解る様に説明する努力
対話する上で、前提知識が異なることで、話が合わなかったり、検討や理解が進まないことがあります。

担当領域の垣根を超えて、メンバー間で協業しカバーしあう関係性を作るには、担当領域だけでなく、周辺知識や最低限の知識を学ぶ努力は必要だと思っています。
また、話す側は、相手の立場や課題解決に対し論点にしている事を理解し、相手向けの話し方、内容を心がける努力が必要だと思っています。

一言でいうと「ホスピタリティ」になるかと思います。

## 目標達成支援と成長支援
私自身も元Engineerでしたが、それ以降の十数年は、企画職やマネジメント職を担ってきたので、
DesignerやEngineerに対して、最新技術やトレンド、今後のキャリアに関する積極的なアプローチが難しくなっています。

そのため、弊社では、EM（Engineering Manager）やTL（Tech Lead）と連携をして、目標設定および、成長支援をサポートしています。

期末の評価時には、EM, TLとの連携はもちろんのこと、各メンバーと一緒に仕事をしたチーム内外の方々にお話を伺って、様々な角度から情報を集めることで、正当な評価ができるような仕組み、体制で臨んでいます。

# さいごに
専門領域の違うメンバーが集まるチームのマネジメントについて、経験し、感じている事を書きました。
私自身、マネジメントが得意なんて言えないですし、今後も言える状態にはならないでしょう。
なぜなら、個性も違う、価値観も違う、その上、それぞれの強み、専門領域も違うからです。
マネジメントに、成功パターン・勝ちパターンというものは存在せず、過去に似た経験があっても、全く同じ状態ではなく、そのまま適用することはできないことが多いです。
この状況の中でどうするか！？それは、人と向き合い、各チームメンバーのStyleを理解し、それを尊重したマネジメントが重要ではないかと思っています。

優秀な現メンバーと、イキイキ仕事ができる環境で、ユーザーの課題解決ができればと思います。
ReDoS とは

## 勉強前イメージ

ReZeroみたいな....
Dos攻撃したら返ってくるってこととか？

## 調査

### ReDoS とは

Regular expression Denial of Service の略で
Regular expression(正規表現) を使った脆弱性を使った攻撃のことを指します。

なぜ正規表現が攻撃になるかというと、正規表現によるパターンのマッチングには膨大な計算が必要になることがあります。
その正規表現を使ってリソースを専有して `可用性を奪う` 攻撃になります。
正規表現はあらゆる場所で利用されているので攻撃の範囲はとても広いです。

正規表現についての詳細は [こちら](https://qiita.com/miyuki_samitani/items/c39d1f12224d59b5e13e) に記載しております。

### ReDoSの原因

ReDoSが発生してしまう原因として、 `バックトラック` が増加しているからです。
`バックトラック` とは片方の分岐に進み文字列を処理していった結果、次の文字を処理できなかった場合に一旦状態を分岐の前まで戻してから
別の分岐を試行することで計算量が膨大になります。
あくまでマッチしなかった際に起こりえます。

### ReDoSの対策

- 正規表現の書き方の注意

繰り返しの文字や繰り返しのネストを使わないことが重要です。
文字列の長さに対して計算量が増えていきます。

- 文字数の制限

正規表現の入力文字を制限することで軽減することはできます。
ただ、少ない文字数でも影響が出る場合もあるのであくまで軽減になります。

- 可視化ツールやチェッカーを使う

正規表現を可視化するツールなど用いて複雑になっていないかチェックすることが必要です。

- タイムアウトを設定する

正規表現のマッチング処理が終わらずリソースを消費するのが攻撃です。
ですので一定時間処理に時間がかかるようであればタイムアウトを行い正規表現の見直しが必要です。

## 勉強後イメージ

正規表現すらも攻撃になってしまう・・・！

## 参考

- [その正規表現の書き方で大丈夫？ ReDoS 攻撃の怖さと対策方法](https://yamory.io/blog/about-redos-attack/)
- [20日目: 正規表現が ReDoS 脆弱になる 3 つの経験則](http://www.rcc.ritsumei.ac.jp/2021/1220_12435/)
<tr>のheightをpxで指定する

```
<table>
  <tr>
    <th>aaa</th>
    <th>bbb</th>
    <th>ccc</th>
  </tr>
  <tr>
    <td colspan='3' style="padding: 0; border: none">
       <div style="height: 100px; overflow: hidden">
         ★★★ ここの高さを変える ★★★
       </div>
    </td>
</table>
```
IPAddrを利用せずにIPをvalidateする

##### 一番シンプルなコード
引数ipの値が0から始まったり、文字列の場合は`ti.to_i.to_s == ti`がうまく働く。


```ruby
def is_valid_ip(ip)
  target_ip = ip.split('.')
  target_ip.size == 4 && target_ip.all? {|ti| ti.to_i.to_s == ti && (0..255).include?(ti.to_i)}
end
```

##### たまに見るifに条件いっぱいのコード

たまにif文の中で条件を列挙しまくって、最後`return true`とかするのを見るがそういうい時は、booleanを判定できるメソッド使った方が戻り値をわざわざ書かないで済むから良いかも

```ruby
def is_valid_ip(ip)
  target_ips = ip.split('.')
  return false if target_ips.count != 4
  target_ips.each do |ti|
    return false if ti.include?(' ') or ti[0] == "0" or ti.to_i > 255 or nil == (ti =~ /\A[0-9]+\z/)
  end
  
  return true
end
```
GitHub ActionsでVariable 'AbortSignal' must be of type と言われるエラーの対処法

こんにちは。[virapture株式会社](https://virapture.com)でCEOしながら[ラグナロク株式会社](https://ragna-rock.com)でもCKOとして働いている[@mogmet](https://twitter.com/mogmet)です。

本日はトラブルシュート記事です。

## 原因
GitHub Actionsでビルドしたら突然下記のエラーに襲われました。

```../../node_modules/@types/node/globals.d.ts(72,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'AbortSignal' must be of type '*** new (): AbortSignal; prototype: AbortSignal; abort(reason?: any): AbortSignal; timeout(milliseconds: number): AbortSignal; ***', but here has type '*** new (): AbortSignal; prototype: AbortSignal; timeout(milliseconds: number): AbortSignal; ***'.```

どうやらAbortSignalという型が競合してるみたいです。

## 解決法

下記issueにありました。

https://github.com/microsoft/TypeScript/issues/51567

どうやら@types/nodeをupdateすれば治るようです。
なので、一度入れ直して再度インストールした上でビルドしたら治りました。

```sh
$ yarn remove @types/node
$ yarn add @types/node -D
```

## まとめ

@types/nodeをアップデートせよ！

最後に、[ワンナイト人狼オンライン](https://online.1nite-jinro.com/link/blog)というゲームを作ってます！よかったら遊んでね！

https://online.1nite-jinro.com/link/blog

他にも[Camecon](https://camecon.me/)や[Offcha](https://offcha.com/)、問い合わせ対応が簡単にできる[CSmart](https://csmart.jp/lp)、フリーランスのコミュニティの[NextFreelance](https://next-freelance.net/)といったサービスも作ってるのでよかったら使ってね！

https://camecon.me/

https://offcha.com/

https://csmart.jp/lp

https://next-freelance.net/

また、チームビルディングや技術顧問、Firebaseの設計やアドバイスといったお話も受け付けてますので御用の方は弊社までお問い合わせください。

https://virapture.com/

ラグナロクでもエンジニアやデザイナーのメンバーを募集しています！！楽しくぶち上げたい人はぜひお話ししましょう！！

https://ragna-rock.com
【Laravel】ページネーション件数を指定しないと、デフォルトで15件になる

## はじめに

Laravelでは`paginate`メソッドを使って簡単にページネーションを実装することが出来る。

実装の中で、ページネーション機能を作るわけではないがページネーションの形式（LengthAwarePaginator）でデータを取得する為、件数を指定せずに`paginate`メソッドを使用したことがあった。

 `paginate` メソッドの引数に件数を渡さなければ、全件？たくさん？取得してくれるのかなと思いきや、15件しか取得せずおどろいたので、調べたことをまとめておく。

## paginateメソッドはどこにあるのか

 `paginate` メソッドは `Illuminate/Database/Eloquent/Builder.php`に定義されていた。

```php
public function paginate($perPage = null, $columns = ['*'], $pageName = 'page', $page = null)
{
		$page = $page ?: Paginator::resolveCurrentPage($pageName);

    $total = $this->toBase()->getCountForPagination();

    $perPage = ($perPage instanceof Closure
        ? $perPage($total)
        : $perPage
    ) ?: $this->model->getPerPage();

    $results = $total
        ? $this->forPage($page, $perPage)->get($columns)
        : $this->model->newCollection();

    return $this->paginator($results, $total, $perPage, $page, [
        'path' => Paginator::resolveCurrentPath(),
        'pageName' => $pageName,
    ]);
}
```

$perPageの引数を渡さなかった場合、 `$this->model->getPerPage();` が呼ばれている。

 `$this→model`は `Illuminate/Database/Eloquent/Builder.php` で下記の通り定義されている。

```php
/**
 * The model being queried.
 *
 * @var \Illuminate\Database\Eloquent\Model
 */
protected $model;

// 中略

/**
 * Set a model instance for the model being queried.
 *
 * @param  \Illuminate\Database\Eloquent\Model  $model
 * @return $this
 */
public function setModel(Model $model)
{
    $this->model = $model;

    $this->query->from($model->getTable());

    return $this;
}
```

### Modelで定義されているデフォルトのperPage

下記は`vendor\laravel\framework\src\Illuminate\Database\Eloquent\Model.php` からの抜粋。

クラス変数 `$perPage = 15;` がページ上部で定義されており、セッター、ゲッターの実装で `$perPage` を返している。

```php
/**
 * The number of models to return for pagination.
 *
 * @var int
 */
protected $perPage = 15;

/**
 * Get the number of models to return per page.
 *
 * @return int
 */
public function getPerPage()
{
    return $this->perPage;
}

/**
 * Set the number of models to return per page.
 *
 * @param  int  $perPage
 * @return $this
 */
public function setPerPage($perPage)
{
    $this->perPage = $perPage;

    return $this;
}
```

## さいごに

やはりフレームワークの機能を使う時は、きちんと意図した挙動をしているか確認する必要があるなと改めて思った。

またフレームワーク内部のソースコードで、こういう風にセッターゲッターの実装がされているのだなと勉強になった。
bananapi raspbianでアップデートエラー

os入手先
https://wiki.banana-pi.org/Banana_Pi_BPI-M2_ZERO#Raspbian
```
2020-04-10 update Raspbian Stretch, kernel 4.4
```
対象

```
Linux bpi-iot-ros-ai 4.4.55-BPI-M2Z-Kernel #1 SMP PREEMPT Fri Apr 10 16:05:55 HKT 2020 armv7l
```
```
$ cat /etc/os-release
```
```
PRETTY_NAME="Raspbian GNU/Linux 9 (stretch)"
NAME="Raspbian GNU/Linux"
VERSION_ID="9"
VERSION="9 (stretch)"
VERSION_CODENAME=stretch
ID=raspbian
ID_LIKE=debian
HOME_URL="http://www.raspbian.org/"
SUPPORT_URL="http://www.raspbian.org/RaspbianForums"
BUG_REPORT_URL="http://www.raspbian.org/RaspbianBugs"
```

アップデートでエラー
```
sudo apt upgrade -y
```
```
Err:1 http://raspbian.raspberrypi.org/raspbian stretch/main armhf python3-isort all 4.2.5+ds1-2
  404  Not Found [IP: 93.93.128.193 80]
Err:2 http://raspbian.raspberrypi.org/raspbian stretch/main armhf python3-pygments all 2.2.0+dfsg-1
  404  Not Found [IP: 93.93.128.193 80]
E: Failed to fetch http://raspbian.raspberrypi.org/raspbian/pool/main/i/isort/python3-isort_4.2.5+ds1-2_all.deb  404  Not Found [IP: 93.93.128.193 80]
E: Failed to fetch http://raspbian.raspberrypi.org/raspbian/pool/main/p/pygments/python3-pygments_2.2.0+dfsg-1_all.deb  404  Not Found [IP: 93.93.128.193 80]
E: Unable to fetch some archives, maybe run apt-get update or try with --fix-missing?
```

解決方法
https://raspberrypi.stackexchange.com/questions/93604/raspberry-pi-sudo-apt-get-update-not-working/93630#93630

```
sudo rm /var/lib/apt/lists/* 
sudo rm /var/lib/apt/lists/partial/* 
sudo apt update
sudo apt full-upgrade -y
```
IntelliJ で ssh による Git 操作ができるまで

# 環境
- Windows 10
- IntelliJ IDEA Community Edition 2022.2.3

# 困ったこと
- IntelliJ で GitHub からプロジェクトを Clone するのに手間取ったので備忘録
- WSL (Windows Subsystem for Linux) では GitHub は普通に使えていた。

# 原因
- WSL で参照する SSH 鍵と IntelliJ (Git Bash) で参照する SSH 鍵のフォルダが異なっていたため。

# 対処
下記に SSH キーペアの設定が WSL 環境で完了している場合、していない場合の対処を記載する。

## 共通
1. Git アカウントを連携し、"Clone git repositories using ssh" を選択する
https://pleiades.io/help/idea/github.html

2. Git Bash (Git for Windows) をインストールする
https://gitforwindows.org/

2. IntelliJ からターミナル (alt + F12) を開き、Git Bash を起動する

### WSL で設置済みの場合
3. WSL のターミナルを開く
3. 利用している秘密鍵を GitBash が参照する .ssh フォルダは以下に移動する
```
cp ~/.ssh/${secret_key} /mnrt/c/Users/${user_name}/.ssh 
```

### WSL で未設定の場合
2. SSHキーペアを作成する
https://docs.github.com/ja/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent

2. GitHub に公開鍵を登録する
https://docs.github.com/ja/authentication/connecting-to-github-with-ssh/adding-a-new-ssh-key-to-your-github-account
OpenSSLの証明書ストアへのDER形式の証明書の読み込み

# はじめに
コマンドに関する情報は多いが、ライブラリとして使用する際に情報が妙に少ないOpenSSL。
証明書の検証のためにストアに読み込む際に色々と苦労したので、そこで調べた内容を書いていこうと思う。

# 通常の証明書ストアへの証明書の読み込み
証明書ストアへのX.509証明書の読み込みには、「X509_STORE_load_file_ex」や「X509_STORE_load_file」を使用する。
また、証明書を読み込むディレクトリを指定する場合は、「X509_STORE_load_path」を使用する。

ただし、これらはPEM形式のファイルしか読み込むことができない。
「X509_STORE_load_path」に関しては、PEM形式かつファイル名がハッシュ形式のファイルしか読み込めない。
そのため、上記のAPIを利用してDER形式のファイルを読み込みたい場合には、証明書をPEM形式に変換するしか無い。

とはいえ、そこまで不便なこともないだろうと、DER形式の証明書を直接読む方法がないかと調べたら、
単独のAPIが用意されているわけではないが、他のAPIを色々使って読むことができた。

# DER形式の証明書ファイルの読み込み
読み込みを行う証明書の条件を指定するには、「X509_LOOKUP～」のAPIがある。
証明書ストアへのLOOKUPのコンテキストを取得し、そのコンテキストに指定を行うことで、PEMではなくDER形式の証明書を読み込むことができる。

## 読み込むファイルの条件指定
まず、以下のAPIで証明書ストアのLOOKUPのコンテキストを取得する。
```
X509_LOOKUP *X509_STORE_add_lookup(X509_STORE *store, X509_LOOKUP_METHOD *meth);
```
呼び出しの際、第2引数には「X509_LOOKUP_file()」を指定する。
これはファイル内の証明書を読み込む指定になっている。

## ファイルの読み込み
次に、取得したLOOKUPのコンテキストを以下のAPIで第1引数に指定する。
読み込むファイル名を第2引数に、
読み込むファイルの形式を第3引数に指定する。
```
int X509_LOOKUP_load_file(X509_LOOKUP *ctx, char *name, long type);
```

X509_LOOKUP_load_fileのtypeに指定するファイルの形式は、以下の定義となっている。。
```ruby:x509.h
# define X509_FILETYPE_PEM       1
# define X509_FILETYPE_ASN1      2
# define X509_FILETYPE_DEFAULT   3
```
DER形式のファイルを指定する場合にはtypeに「X509_FILETYPE_ASN1」を指定することで、DER形式のファイルを読み込むことができる。

# ディレクトリからのDER形式の読み込み
ファイルと同様に、「X509_STORE_add_lookup」を使用して、第2引数には「X509_LOOKUP_file()」を指定したあとで、
「X509_LOOKUP_add_dir」を使用すればいいと思うが未検証。
検証後に更新予定。
2022/11/25主にITとかセキュリティの記事

複数サーバにサイバー攻撃 - 施設設備の施工会社
https://www.security-next.com/141631

金沢市の会社にサイバー攻撃　身代金要求型「ランサムウェア」(11/22)
https://www3.nhk.or.jp/lnews/kanazawa/20221122/3020013386.html

自分は詐欺にはあわない？注意深い人でも巧妙な詐欺メールの文言には騙されてしまうことが判明：Visa調査(11/23)
https://japan.cnet.com/release/30804511/?ref=rss

サイト脆弱性で8,483名のクレジットカード情報流出か、akaran(11/22)
https://cybersecurity-jp.com/news/75360

破綻したFTX｢前代未聞｣イカサマ経営驚愕の実態
中身はあのエンロンよりずっとひどかった(11/23)
https://toyokeizai.net/articles/-/634766

FTX破綻による仮想通貨危機はスイスに利益をもたらすか？(11/23)
https://www.swissinfo.ch/jpn/business/ftx%E7%A0%B4%E7%B6%BB%E3%81%AB%E3%82%88%E3%82%8B%E4%BB%AE%E6%83%B3%E9%80%9A%E8%B2%A8%E5%8D%B1%E6%A9%9F%E3%81%AF%E3%82%B9%E3%82%A4%E3%82%B9%E3%81%AB%E5%88%A9%E7%9B%8A%E3%82%92%E3%82%82%E3%81%9F%E3%82%89%E3%81%99%E3%81%8B-/48077344?utm_campaign=swi-rss&utm_source=multiple&utm_medium=rss&utm_content=o

国内大学のアカウント漏洩、2022年は頻度が過去最高水準(11/23)
https://univ-journal.jp/196237/

先週のサイバー事件簿 - 三菱電機の家電製品にDoSを受ける脆弱性(11/23)
https://news.mynavi.jp/article/20221123-security/

サイバー防御責任者任命へ、政府　24年度予算で新組織(11/23)
https://www.47news.jp/politics/8607370.html

不正アクセス記録“消去”可能性　病院へのサイバー攻撃「侵入口」とみられる業者が『ソフトウェア更新』で(11/22)
https://nordot.app/967624626406834176?c=220450040231249399

埼玉大学が約2100件個人情報流出　「ドッペルゲンガー・ドメイン」気づかず(11/22)
https://nordot.app/967625735225950208?c=220450040231249399

GoogleがGluptebaボットネットに勝訴、ロシアに拠点置く犯罪者に金銭的制裁(11/23)
https://news.mynavi.jp/techplus/article/20221123-2520151/

Google、悪意ある「Cobalt Strike」を特定するための緻密な調査を実施(11/23)
https://news.mynavi.jp/techplus/article/20221123-2519936/

新しいランサムウェア「AXLocker」「Octocrypt」「Alice」に注意(11/23)
https://news.mynavi.jp/techplus/article/20221123-2519933/

Docker Desktop 4.14登場。コンテナごとのCPUやメモリ消費量のグラフ化、コンテナイメージの依存関係などをビジュアルに表示可能(11/24)
https://www.publickey1.jp/blog/22/docker_desktop_414cpu.html

ジョブ型人事制度やリスキリング、「DX人的資本」をめぐる5つの誤解(11/24)
https://xtech.nikkei.com/atcl/nxt/column/18/02265/112100002/

Windowsの環境をLinuxにまるごと引っ越し、手順を踏めば簡単(11/24)
https://xtech.nikkei.com/atcl/nxt/column/18/02231/102100003/

大阪の救急病院にランサムウエア　電子カルテ被害で手術・診療停止(11/24)
https://xtech.nikkei.com/atcl/nxt/mag/nc/18/020800017/111600805/

三菱地所が全社1万人にデジタル教育　不動産事業の変革へデータ活用促す(11/24)
https://xtech.nikkei.com/atcl/nxt/mag/nc/18/020800017/111600807/

インボイス制度IT対応に黄信号　個人・中小零細で対応済みは1％(11/24)
https://xtech.nikkei.com/atcl/nxt/mag/nc/18/092400133/111600092/

ランサムウエアの「身代金」　意図せぬ支払いにリスク(11/24)
https://xtech.nikkei.com/atcl/nxt/mag/nc/18/020800017/111600810/

優先制御(11/24)
https://xtech.nikkei.com/atcl/nxt/mag/nnw/18/031500132/111600009/

PR TIMESでシステム障害　メンテナンス契機に複数発生(11/24)
https://xtech.nikkei.com/atcl/nxt/mag/nnw/18/031800050/111600045/

「シン・デジタル証券」実現へ、三菱UFJ信託銀が異種ブロックチェーン決済技術(11/24)
https://xtech.nikkei.com/atcl/nxt/column/18/00001/07427/
each 入れ子

〜問題〜
配列内の果物と値段の合計額を出力せよ。![スクリーンショット 2022-11-25 1.42.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2929112/c73add83-09c2-eeb0-dc6e-ea8350689534.png)
![スクリーンショット 2022-11-25 1.43.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2929112/9939420f-0103-9b64-da89-69e6cead78bf.png)


~解答~

![スクリーンショット 2022-11-25 1.44.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2929112/b948c7e3-678e-1efe-bc1b-8702900130ee.png)

〜解説〜
　each文を使用し、配列内の要素を順に取り出すようにするべきと考えた。また、ブロック変数はitemとpriceに設定する事で、2つの要素を順に取り出せると考えた。
　結果を式展開にてputsで出力した。
　
　
　
　
　

〜模範解答〜
![スクリーンショット 2022-11-25 1.50.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2929112/5662af53-df3a-3e0e-bafd-d929413e1561.png)


　
〜模範解説〜
　　3行目でfruits_priceから["apple", [200, 250, 220]]という値を取り出し、変数fruits_priceを代入する。
　4~7行目で、fruitの1番目の値[200, 250, 220]から値を1つずつ取り出して、自己代入しながらsumを出力している。
![スクリーンショット 2022-11-25 2.09.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2929112/daeb600a-e398-8617-836c-f0421570b208.png)

自分の解答と出力結果は同じだが、他にも様々な出力方法がある事が理解できた。
二重ハッシュ

〜問題〜

配列の内部に、
複数のユーザーの情報をハッシュとして持つ変数user_dataがあります。↓
![スクリーンショット 2022-11-23 16.29.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2929112/32e90478-5af1-cefe-07cf-8b1cf2b5c938.png)
user_dataで、全ユーザーの名前だけが出力されるように
Rubyでコーディングしてください。
　
　
　
　
　
　
　
　
　

〜解答〜![スクリーンショット 2022-11-23 16.30.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2929112/95066637-57dc-0aaa-214d-5008fa276fd0.png)
　
　
　
　
　
　
〜解説〜
ハッシュの取得は↓
ハッシュ[取得したい値のキー]

その為

ハッシュ[:user][:profile][:name]
で名前だけを取得することができる。

今回は配列内にハッシュが存在しているから
each文でハッシュを1つ1つ取り出してから取得する必要があるので
解答のように記述することになった。
値(3教科)の平均値を計算する。

〜問題〜

国語が80点、英語が50点、数学が70点の場合のテストの平均点を出力して下さい。

※条件 変数を使用すること


〜模範解答〜


![スクリーンショット 2022-11-23 16.09.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2929112/2eba3611-7500-ff1b-df2a-30fc2868bb94.png)

~模範解説~

　条件があるので、まずスコアを変数に代入する。
　平均値も変数を用いる事で見やすくなります。

　変数を用いない場合

　puts "3教科の平均点は、
　#{(japanese_score + english_score + math_score) / 3}点です。"

　と見にくい表記になります。
いまさらAI学んでみた（第３回）

# はじめに
こんにちは、株式会社ジールの[@Suguru-Terouchi](https://qiita.com/Suguru-Terouchi)です。

[いまさらAI学んでみた（第１回）](https://qiita.com/Suguru-Terouchi/items/9fdd86bde61658d06e2d)、[いまさらAI学んでみた（第２回）](https://qiita.com/Suguru-Terouchi/items/bf66da44cf0160e55dc5)と続いて第３回目になります。
前回、以下のような形で「ネコ」という答えと共に画像データを教えていく手法を「教師あり学習」という話をしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1963640/495d50a9-78c7-0b5b-50cc-32317ce2cbdc.png)

「教師**あり**学習」というくらいなので逆に「教師**なし**学習」という手法があるので
今回は「教師なし学習」について書いていきたいと思います。

# 教師なし学習ってなに？
簡単にいうと「教師あり学習」から答えの「ネコ」という情報を与えない手法です。
え、そんな意地悪なことしなくてもええやん・・・と思うかも知れませんが、
「教師あり学習」と「教師なし学習」では用途が違います。

ではまずはおさらいからです、前回、教師あり学習の説明をする際に「ネコ」と「イヌ」を見分けるという話をしましたが、
これは別の言い方をすると入力されたデータを「ネコ」か「イヌ」に分類分け（カテゴライズ）を行っていてそこから回答を導き出していました。
※厳密にはもう一つ、株価の予測や気象分析等に利用される「回帰」という用途もあります。

では「教師なし学習」はなにが違うのかというと、「ネコ」や「イヌ」のように明確な答えがない問題に対して使います。
あー、ナルホド意地悪したいんじゃなくて、答えを教えたくても教えられないってことですね。納得です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1963640/b73132c7-a3e3-e08b-9183-47490294c430.png)

・・・ただ明確な答えがない問題と言われてもパッとは思いつかないですよね？

身近な例でいうとAmaz〇nのような通販サイトでお買い物をしている時に
「この商品を買った人はこれも買ってるよ！」というような形でおススメ（レコメンデーション）された経験があるかと思いますが、
これは「教師なし学習」によるものなんですね。
正式には「アソシエーション分析」といい、データ間の関連を発見する手法になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1963640/16d73b56-895f-5071-be81-3fc198abbdc9.png)
・・・開店したばかりでデータが少なかったのか、おススメ失敗してしまいましたが、
データが集まって来ることによって成功率も上がってくるはずです！

# まとめ
このように「教師なし学習」は入力されたデータから**共通点や傾向を見出し**、グループ分けするための手法となります。
「教師あり学習」と比べると「教師なし学習」は少しイメージしにくい部分があるかも知れませんが、
人間が同じことをするよりも遥かに大量のデータを読み込み、そこから想像も付かないような発見をするかも知れない可能性のある手法なんですね。
ただし、良いことだけではなく、「教師なし学習」は答えがないためにデータによっては導き出された答えが役に立たないこともあるようです。

# おわりに
いかがでしたでしょうか。
第３回になり多少難易度が上がってきているかも知れませんが、このまま一緒に頑張っていきましょう。
次回は手法としては最後になる強化学習について記載したいと思います。

# データ活用をサクッと始めるなら！
株式会社ジールでは、「ITリテラシーがない」「初期費用がかけられない」「親切・丁寧な支援がほしい」「ノーコード・ローコードがよい」「運用・保守の手間をかけられない」などのお客様の声を受けて、オールインワン型データ活用プラットフォーム「ZEUSCloud」を月額利用料にてご提供しております。
ご興味がある方は是非下記のリンクをご覧ください：
 
https://www.zdh.co.jp/products-services/cloud-data/zeuscloud/?utm_source=qiita&utm_medium=referral&utm_campaign=qiita_zeuscloud_content-area
ピアリングについて

●ピアリング
異なるリージョン間、異なるサブスクリプションに存在する仮想ネットワークとのピアリング、異なるテナントに存在する仮想ネトワークとのピアリングも行える。

※アドレス空間が重複している２つの仮想ネットワークをピアリングで接続することはできない

ピアリングの設定は推移しないので、通信したい２つの仮想ネットワークで明示的に設定する必要がある

■ピアリング構成済みの仮想ネットワークでアドレス空間の変更を行うには、ピアリングの再設定または同期操作のいずれかが必要

■仮想ネットワーク上に作成したVPNゲートウェイは、他の仮想ネットワークからも使用できる様に構成可能。そのためには、VPNゲートウェイを貸すための設定と、VPNゲートウェイを借りるための設定を各ピアリング設定で行う必要がある
Python 3 Typing 早見

書きかけ。
知りたい typing の書き方があったらコメントしていただければ調べます。

# 入門

### 変数に使う
```Python
hoge: int = 1
```

変数を宣言せずに type hint だけ書くこともできる。

```Python
hoge: int
```

宣言したように見えるが呼び出すと not defined となる。

### 関数の返り値に使う
```Python
def fuga(hoge: str) -> bool:
    return True
```

# 基本

### リスト
```Python
__list: list[str]
```

### 辞書
```Python
__dict: dict[str, str]
```

### 全てを受け入れる型 Any
```Python
from typing import Any

anyyyyy: Any
```

### 複数の型
```Python
from typing import Union

hoge: Union[int, str] = 1
hoge: int | str = 1  # python 3.10
```

### 決められた値のみ許可
```Python
from typing import Literal

hoge: Literal['hoge', 'hoge2', 2, False] = 'hoge'
```

# 応用
### 引数の型によって返り値の型を変える その1(overload)
```Python
from typing import overload

@overload
def fuga(hoge: int, piyo: int) -> int: ...
@overload
def fuga(hoge: int) -> None: ...


def fuga(hoge: int, piyo: int | None = None) -> int | None:
    if piyo is None:
        return None
    else:
        return hoge + fuga
```

### 引数の型によって返り値の型を変える その2(TypeVar)
```Python
from typing import TypeVar

_HogeType = TypeVar('_HogeType')


def fuga(hoge: _HogeType) -> _HogeType:
    return hoge
```

TypeVarに入ることのできる型を限定することもできる。
```Python
from typing import TypeVar

_HogeType = TypeVar('_HogeType', HogeClass, FugaClass)
```

### クラスそのもの（インスタンスではない）を型アノテーションに指定
```Python
hoge: type = HogeClass
```

でも良いが...

```Python
from typing import Type

hoge: Type[HogeClass] = HogeClass
```

と書くこともできる。**TypeVar**との組み合わせが便利。

```Python
from typing import Type, TypeVar, Any

_HogeType = TypeVar('_HogeType')


def fuga(hoge: Type[_HogeType], __dict: dict[str, Any]) -> _HogeType:
    return hoge(**__dict)
```

関数fugaの引数で与えられたクラスに応じて、返り値の型もそのクラスのインスタンスになる。

### 決められたキーのみを持つ辞書

```Python
from typing import TypedDict

class HogeDict(TypedDict):
    hoge: str
    fuga: int
    piyo: bool

__dict: HogeDict
```


### 自身と同じクラスを返すメソッド (python 3.11)

```Python
class HogeClass():
    def hogehoge(self) -> HogeClass:  # NameError: name 'HogeClass' is not defined
        return HogeClass()
```

これは not defined エラーとなる。なので typing.Self を使う。

```Python
from typing import Self

class HogeClass():
    def hogehoge(self) -> Self:
        return HogeClass()
```
古いPCを使って　nvme をクローン　そして縮小


nvme クローンの機械は　高価です

![スクリーンショット_2022-11-25_00-38-30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211097/c79e9cd6-7108-cb82-6036-6e1cb676fdc5.png)

**USBメモリから起動できない**タイプのノートPCなので　こうしました
起動できるなら　USBメモリから起動し　USBハードディスクに　nvme全体のイメージを保存するほうが簡単です



```
# dmesg | grep Xeon
[    0.321878] smpboot: CPU0: Intel(R) Xeon(R) CPU           X3430  @ 2.40GHz (family: 0x6, model: 0x1e, stepping: 0x5)



とふるいのですが　これにgarudalinuxをいれてます

# uname -ar
Linux rimergy 5.15.78-1-lts #1 SMP Fri, 11 Nov 2022 06:02:50 +0000 x86_64 GNU/Linux


```



それで

----

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211097/836355d1-a679-5883-ba9c-10eb93475f45.png)
の登場です

採取コンテナの中に　古い富士通にサーバーをいれただけの　職場でのメインマシンです
MBR　　USB2.0　しかないので　ふるさがわかるとおもいます

![2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211097/8425e6ba-f5e2-edd2-e2ec-99546aa45558.jpeg)

使用したアダプターは　以下の１のほうです
２は後ろにぶつかるので使用できませんでした

![Photo Marker_20221125_010046.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211097/71b272e8-3a10-c44e-6478-159ec3cb5440.jpeg)

![Photo Marker_20221125_042352.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211097/67bf754b-54fb-b448-1082-0078c9637d23.jpeg)

----
----

上の古いサーバーは突然死したので
現在は以下の　これまた古いワークステーション（USB　３ポートなし）でしてます

![スクリーンショット_2022-12-10_06-23-57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211097/78a83ce7-b9ed-c9d2-d6ab-1d78a1b40867.png)

コマンドは　いつもの

```
# dd if=/dev/nvme0n1 of=./nenga-nvme128G-16k.img bs=16k status=progress

77207404544 bytes (77 GB, 72 GiB) copied, 380 s, ***203 MB/s***
```






これで　イメージができたので
    あとは　imgを　/dev/nvme0n1 にdd で書き戻すだけでした

```
dd if=nenga-nvme-16k.img of=/dev/nvme0n1 bs=16k
```



## X-1) 256GB nvme　を　１２８GB　nmve へ

https://www.youtube.com/watch?v=cVDtBgkjErM

￼
256 GB の nvme は
前半の128 GB に Windows 11
その後に Linux を入れています

128000000/16
8000000
なので

dd if=nenga-nvme-16k.img of=/dev/nvme0n1 bs=16k　count=8000000
でいいはずですが　
ぎりぎりなので
dd if=nenga-nvme-16k.img of=/dev/nvme0n1 bs=16k　count=8800000

後は 
gdiskで
今はいらない Linux の領域をのけたらよかったです
webshell とは

## 勉強前イメージ

webサーバで実行できるシェル的な・・・

## 調査

### webshell とは

web経由でサーバのコマンドを実行することを可能にするバックドアの一種になります。
PHPやPythonなので作られていて一度サーバ内に侵入・設置されるとバックドアとして機能して任意のコマンドが可能になってしまいます。
そのため、データの情報漏洩やサーバ停止等が発生してしまいます。
また、他のサーバへの踏み台サーバやランサムウェアに感染したりなど他のサーバへ被害を拡大させてしまうことにも繋がります。

webshellはいろんな言語に対応することができたり難読化されたり
また設置が比較的簡単なことから検知が難しいと言われています。

webshellは見つからないように
エラーページとして偽装されたり、プレフィックスコードがついていたりまた、そもそもファイル名が不正なファイルと似たようなもので偽装したりしています。

## 勉強後イメージ

バックドアなのですね。
結構PHPの攻撃が多いらしい。

## 参考

- [ウェブシェル(webshell)とは？](https://www.prsol.cc/post-613/)
- [注意喚起：サイバー犯罪者のコントロールパネル WebShell](https://rms.ne.jp/digital-certificate-news/webshells_the-criminals-controlpanel)
既存のVue3プロジェクトにVuetify3を導入する

<INS><h2>はじめに</h2></INS>

Vuetify3がリリースされましたね！
今回は既存のプロジェクトにてVuetify3を導入する手順を記載します。

<INS><h2>前提</INS></h2>

Vue3のプロジェクトを作成していること。


<INS><h2>環境</h2></INS>

```terminal 
$ node -v
v16.18.1

$ npm -v
8.19.2
```
<INS><h2>手順</INS></h2>

<h3>１．Vuetify3をインストールする</h3>

```terminal
$ npm install vuetify@next
```

<h3>２．vuetify.jsファイルの追加</h3>

pluginsフォルダの中にvuetify.jsを作成します。
※今回mdiも追加しておきました。
```vuetify.js
import "vuetify/styles";
import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
import { aliases, mdi } from "vuetify/iconsets/mdi";

const vuetify = createVuetify({
  components,
  directives,
  icons: {
    defaultSet: "mdi",
    aliases,
    sets: {
      mdi,
    },
  },
});

export default vuetify;

```

<h3>３．main.jsファイルの編集</h3>
routerを入れている場合、以下のようになります。<br>
環境に合わせて変更してください。

```main.js
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
//追加
import vuetify from "./plugins/vuetify";

import "./assets/main.css";

const app = createApp(App);

//修正
app.use(router);
//追加
app.use(vuetify).mount("#app");
```

<h3>４．ボタンタグを追加</h3>
試しにボタンタグを入れてみます。

```AboutView.vue
<template>
  <div class="about">
    <v-btn elevation="2">test</v-btn>
  </div>
</template>
```

<h3>５．Vuetifyが効いているか確認</h3>

```$npm run dev```実行でブラウザを確認してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2963387/452cf76e-d8f6-88cb-b035-b68de092fb96.png)
問題なく表示されました！

参照元：https://next.vuetifyjs.com/en/getting-started/installation/#frequently-asked-questions
Educational DP Contest H

## 初めに
思考のアウトプット練習です。実装例もあるので誰かの参考になれば嬉しいです。

## H - Grid 1
https://atcoder.jp/contests/dp/tasks/dp_h

### 方針
(0始まりになっています)
$(0,0)$からあるマス$(i,j)$に移動する経路が何通りあるかを$dp[i][j]$で管理する。
簡単のために全てのマスが空マスであることを考えるとマス$(i,j)$からは$(i+1,j)$と$(i,j+1)$に移動することができる。
よって遷移は
```math
dp[i][j+1]+=dp[i][j],(0 \leq i < H,0 \leq j < W-1) \\
dp[i+1][j]+=dp[i][j], (0 \leq i < H-1,0 \leq j < W) 
```
となる。
今回は移動先が壁である場合、移動できないので$(i,j+1)$,$(i+1,j)$が空マスかどうかを都度チェックする必要がある。


実装例
```c++
#include <bits/stdc++.h>
using namespace std;
using ll = long long;

ll MOD = 1000000007;
int main() {
  ll h, w;
  cin >> h >> w;
  vector<string> g(h);
  for (ll i = 0; i < h; i++) {
    cin >> g[i];
  }
  vector<vector<ll>> dp(h, vector<ll>(w));
  dp[0][0] = 1;
  for (ll i = 0; i < h; i++) {
    for (ll j = 0; j < w; j++) {
      if (i + 1 < h && g[i + 1][j] == '.') {
        dp[i + 1][j] += dp[i][j];
        dp[i + 1][j] %= MOD;
      }
      if (j + 1 < w && g[i][j + 1] == '.') {
        dp[i][j + 1] += dp[i][j];
        dp[i][j + 1] %= MOD;
      }
    }
  }
  cout << dp[h - 1][w - 1] << endl;
}
```