OmniAICreator/Qiita-1.07M huggingface dataset:
windowsでiverilog その58

#概要

windowsでiverilogやってみた。
配列の作法、調べてみた。

#配列の作法

memoryを想定。
２次元は、無い。
initialで、初期化。
wireも、できそうだが、不明。

#サンプルコード


```
module ram(input clk, input load, input [11:0] addr, input [15:0] d, output reg [15:0] q);
	reg [15:0] mem[256:0];
	initial
	begin
		mem[0] = 16'h1000;//push 0
		mem[1] = 16'h300f;//set 15
		mem[2] = 16'h200f;//get 15
		mem[3] = 16'h101a;//push 26
		mem[4] = 16'hf00f;//>
		mem[5] = 16'h5005;//if 5 
		mem[6] = 16'h200f;//get 15
		mem[7] = 16'h1061;//push 97
		mem[8] = 16'hf000;//+
		mem[9] = 16'he000;//out
		mem[10] = 16'h200f;//get 15
		mem[11] = 16'h1001;//push 1
		mem[12] = 16'hf000;//+
		mem[13] = 16'h300f;//set 15
		mem[14] = 16'h4002;//jp  2
		mem[15] = 16'h0000;//i
	end
	always @(posedge clk)
	begin
		if (load)
		begin
			mem[addr] <= d;
		end
		q <= mem[addr];
	end
endmodule

```

以上。
パスワード付きPDFのパスワードがわからなくなった？pdfcrackならなんとかしてくれるかも

Note: 悪用は禁物なコマンドです。

以前頂いたPDFがパスワード付きになっていたが、パスワードがどうしても思い出せない。多分、数字4桁だったのだが…という機会があり、pdfcrackを使ったら瞬殺でパスワードを見つけてくれました。

```sh
pdfcrack -f hoge.pdf -n 4 -m 4 -c0123456789
```

`-n`: minimum password length
`-m`: maximum password length
`-c`: char set

## 参考

http://manpages.ubuntu.com/manpages/trusty/man1/pdfcrack.1.html
Svelte×TypeScriptでJSPrimerのTodoアプリを書いてみた。

## 動機
色んな技術に興味はあるが、
実際に手を動かすということが全く出来ていないので、
勉強がてらJSPrimerのTodoアプリをSvelteで書いてみました。

## ソースコード

Svelteのシンタックスハイライトがないので、
JavaScriptのハイライトを当てていて、若干おかしいですが..
こんなシンプルに書けるんですね:blush:
storeの使用はしていないです。
export部分やindex.htmlは割愛してます。

```js:App.svelte
<script type="ts">
	class Todo {
		id: number;
		title: string;
		isComplete: boolean;
		constructor(id: number, title: string, isComplete: boolean) {
			this.id = id;
			this.title = title;
			this.isComplete = isComplete;
		}
	}

	let id: number = 0;
	let todo: string = '';
	let todos: Array<Todo> = [];

	const addTodo = (): void => {
		id += 1;
		let newTodo = new Todo(id, todo, false);
		todos = [...todos, newTodo];
		todo = '';        
	}
	const deleteTodo = (todo: Todo): void => {
		todos = todos.filter(t => t !== todo);
	}
</script>

<svelte:head>
	/*
		Copyright (c) 2016-present jsprimer project
		Code released under the MIT license
		https://jsprimer.net/use-case/todoapp/final/final/index.css
	*/
	<link rel="stylesheet" href="https://jsprimer.net/use-case/todoapp/final/final/index.css" />
</svelte:head>

<div class="todoapp">
	<form on:submit|preventDefault={addTodo}>
		<input
			class="new-todo"
			type="text"
			placeholder="What need to be done?"
			autocomplete="off"
			bind:value="{todo}"
		/>
	</form>
	<div class="todo-list">
		<ul>
			{#each todos as todo}
				<li>
					<input type="checkbox" bind:checked={todo.isComplete}>
						{#if todo.isComplete}
							
{@html todo.title}

						{:else}
							{@html todo.title}
						{/if}
						<button class="delete" on:click={() => deleteTodo(todo)}>x</button>
				</li>
			{/each}
		</ul>
	</div>
	<footer class="footer">
		<span>Todoアイテム数: {todos.length}</span>
	</footer>
</div>

<style>
</style>
```

## 今後
Todoのモデルは外部クラスに切り出す等、
まだまだ洗練の余地はあると思う..
[TodoMVC](http://todomvc.com/) にはフィルター機能もあるので付けられたら良き。

TypeScriptの扱いもまだまだなので、
これからも実際に手を動かすということを大事にしていきたい。

SvelteやRustでWebアプリを作りたいと思う今日この頃。

ESbuildの使用についても記載されているので余力があれば試す。
https://github.com/sveltejs/svelte-preprocess/issues/177

## 参考
[JavaScript Primer](https://jsprimer.net/)
[Svelte公式](https://svelte.dev/)
[TypeScript公式](https://www.typescriptlang.org/)
[TypeScript Deep Dive 日本語版](https://typescript-jp.gitbook.io/deep-dive/)
[rollup.js](https://rollupjs.org/guide/en/)
[React] React Hooksでどのdependencyが変化したのかわからないだって？ そう、そんなときはusePreviousだ！

こんにちは。 @nerikosans です。みなさん、React Hooksしていらっしゃいますでしょうか。
今日は僕がHooksで詰まって3時間溶かして学んだことのメモを書いていこうと思います。

# 悲劇
例えば arrow function があったとして、それをhooksのdepsに入れてしまうと各render毎に異なるオブジェクトとして認識されてしまうのは日本書紀にも記述がありますね。
つまり

``` tsx

const getMySuperBenriFunction = () => {
  return (a: number, b: number) => a + b;
}

const benri1 = getMySuperBenriFunction();
const benri2 = getMySuperBenriFunction();

console.log(benri1 === benri2)  // => false
```
であり、

``` tsx

import getMySuperBenriFunction from './getMySuperBenriFunction';

const MySupremeComponent: React.FC = () => {
  const benri = getMySuperBenriFunction();
  const [v1, setV1] = React.useState(1);
  const [v2, setV2] = React.useState(3);

  // v1, v2が変わると出力
  // benriが変化することは想定してない
  React.useEffect(() => {
    console.log(benri(v1, v2));
  }, [v1, v2, benri]);

  return (
    <div>
      (ここにすごいUI)
    </div>
  )
}
```

みたいなことをすると全renderで `useEffect` が走って非常につらい気持ちになります。

# デバッグ策
さて、前述のarrow functionの件はもちろんヤマトタケルの時代から決まっているのですが、うっかりこれを失念してしまったとしましょう。

そんなとき、「なぜこの `useEffect` が走るのかわからない...どのdepsが変化しているんや...」という調査を比較的ラクにできる手法を紹介します。
つまり、変数の値を前サイクルと比較できればよいのです。

ということでご登場願いましょう、**`usePrevious`**さーん！

### usePreviousさん
``` tsx
function usePrevious<T>(value: T) {
  const ref = React.useRef<T>();
  React.useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}
```

### usePreviousさんの勇姿
``` tsx


function usePrevious<T>(value: T) { /*...*/ }

const MySupremeComponent: React.FC = () => {
  /* ... */
  console.log(usePrevious(benri) === benri) // => false

  React.useEffect(() => {
    console.log(benri(v1, v2));
  }, [v1, v2, benri]);

  return (
    {  /*...*/ }
  )
}
```

ということで、 `usePrevious` さんを用いて前サイクルと比較すれば、どのdepsの変化でEffectが発火しているのか、比較的早く発見できるでしょう。最高！

### usePreviousさんの出自
なお、御大はReact公式FAQで[紹介されています](https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state)。公式hookになる可能性もあるみたいです。

# おまけ
hooksプロのみなさんには言うまでもないかと思いますが、この問題の解決策は

``` tsx
const getMySuperBenriFunction = () => {
  return React.useCallback((a: number, b: number) => a + b, []);
}
```
と `benri` 自体をcallbackに入れることですね。
VisualStudioを開いてるだけでCPU使用率が爆上がりになってしまう

※適当流の対応なので原因を深く掘り下げて調べてません
同じような原因で引っかかる人はあんまりいないかもしれません
あとVisualStudio初心者なので知ってる人はコメントで教えてくれれば追記すると思います…多分

#Visual Studioが激重

何故か裏で開いてるだけのVisual Studio 2019がCPU使用率数十パーセントになったりならなかったりを繰り返していてPCのファンが超うるさい

#結論

`C:\Users\%USER%\.git`フォルダを削除した
なんでこんなフォルダあるのだろうと思ったけどターミナルを起動したときに`git init`打ってしまったのかなと想像

##原因らしきもの

タスマネから見るとVisual Studio下のGit for WindowsがCPU負荷の殆どを占めていた
なのでVisual Studioの[ツール(T)]→⚙オプション→◢ソース管理→プラグイン管理から現在のソース管理プラグインを`Git`から`なし`に変更するとファンの音が収まる
→CPU使用率が下がった！
ソース管理を`Git`に戻してVisualStudioをもう一度起動すると再びファンが騒々しくなる

このとき下のコンソール出力に`C:\Users\logiteca7を読み込んでいます・・・`と表示されていたので下にあるピクチャとかドキュメントも全部Git管理しようとしてるのかなと思って当該フォルダ下の`.git`フォルダを削除する
→これが原因？

##感想
コードの編集はテキストエディタばっかり使って本格的なIDEを利用したことが無かったのでVisualStudioはまだ全然よく分かってないです
なんでホームフォルダ下の`.git`を規定で読み込むのー？とかとか
早く使いこなしたいっす
【Unity】たまに使うアセットのGUIDを確認するWindow

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86424/2856e26e-ffb0-13cb-139b-7b4fa06b7dcf.png)

なんだかんだ.metaファイルやアセットバンドルやシーンのトラブルシューティングで使うやつ

``` cs
using UnityEngine;
using UnityEditor;

namespace AssetTool {
	public static class FindGUID  {

		[MenuItem("Tools/Find by GUID")]
		static void Start() {
			FindGUIDWindow.Open();
		}
				
	}
	
	public class FindGUIDWindow : EditorWindow {

		private Object asset;
		private string guid;

		public static void Open() {
			var window = (FindGUIDWindow) GetWindow(typeof(FindGUIDWindow));
			window.titleContent = new GUIContent("Find GUID");
			window.Show();                
		}

		private void OnGUI() {
			GUILayout.Label("GUIDを入力するとアセットを検索します。\nまたはアセットをドラッグ&ドロップするとGUIDを表示します。");
			
			var oldGUID = guid;
			guid = EditorGUILayout.TextField("GUID", guid);
			if (oldGUID != guid) {
				asset = AssetDatabase.LoadAssetAtPath<Object>(AssetDatabase.GUIDToAssetPath(guid));
			}

			var oldAsset = asset;
			asset = EditorGUILayout.ObjectField(asset,typeof(Object),false);
			if (asset != oldAsset) {
				guid = AssetDatabase.AssetPathToGUID(AssetDatabase.GetAssetPath(asset));
			}
		}
	}	
}

```
【小ネタ】PhoenixのWebsocketのタイムアウト時間が開発中に短かったので無限に変更

# はじめに
PhoenixのChannelを触っていて、タイムアウトがうっとうしかったので時間を伸ばせる方法を探して実際に使ってみました。

## wscatでPhoenixに接続しているとすぐにタイムアウトする

```
Disconnected (code: 1000, reason: "")
```

Websocketのデバッグツールの`wscat`でPhoenixのChannelの動作確認をしているとき、一度はこのメッセージをみたことがあるかと思います。

デバッグ中にいちいち切断が切れて面倒なので、タイムアウトしないようにします。

## コード

```elixir:endpoint.ex
socket "/socket", MyModuleWeb.UserSocket,
    websocket: [
      timeout: :infinity
    ],
    longpoll: false
```

これだけでできます。
もともとは、

```elixir
websocket: true
```
となっているところをこのようにするだけで大丈夫でした。

# さいごに
Websocket周りに詳しくなっていけると開発が楽しくなっていくなって思います。

# 参考リンク
> https://elixirforum.com/t/socket-timeout-change-in-phoenix-1-4-9/24841
Test-Time Training with Self-Supervision for Generalization under Distribution Shifts

Yu Sun 1 Xiaolong Wang 1 2 Zhuang Liu 1 John Miller 1 Alexei A. Efros 1 Moritz Hardt 1

https://arxiv.org/pdf/1909.13231.pdf

- training とtestのdistribution が違う場合を想定
- test setのデータだけを使ってself-supervised learningを行うことで、distributionの相違をアジャストする
- LeCun によれば"transductive learning"という枠組みに属するとのこと。90年代に研究されていたらしい。
- オンラインへも適用可能。

### 手法
- もともとメインタスクのほかにauxタスクを用意しておく。この場合メインはクラス分類、auxはローテーションの予測。
- この2つのタスクを、あるレベルまでは共有するY字型のCNNで学習する。

- テスト時に、auxタスクを使ってテストデータに対してYの根っこの共有している部分だけを再学習する。auxタスクはself-supervisedタスクなので、ラベルは使わない。

### 感想
- 割と単純な手法で性能がでるようだ。
- ラベルを見ないとはいえ、テストデータをさきにみていいのか、という気はするが、まあいいのだろう。
うんこクロックCSSの開発に成功した

[うんこ回転CSSの開発に成功した](https://qiita.com/nurarihyong/items/4b23accdfbb65a5bcda8)という記事の続きです。

#動機
前回CSSでうんこを自由に回転させる能力を得たので、それを活かして何か作りたくなりました。
で、うんこCSSでアナログクロックっぽいものを作ってみることにした。

#実装内容
ソースコードは、長いのでgithubに上げようと思います。
→あげました[github](https://github.com/mixgrill/unkoclock)
画像で見た方がハナシが速いので貼っておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647892/5a1f57f3-1729-ffa8-dc8b-e59ce0e0f8b3.png)
[ここ](https://emptyset.sakura.ne.jp/uc/)にHTMLはアップロードしています。

#苦労した点
針が中心からちょっとずれるのを修正するのが大変だった（いまだに少しずれているけどなおすきなし。

#説明
コーディングのほとんどはCSSです。
理屈としては、CSSで針とか、パネルとか、壁紙とかメモリとか、振り子を定義していって、
それをposition: absolute で配置していきます。
動作はjavascriptで1秒に1回タイマで時間を取得し、取得した時間からそれぞれの針の角度を計算し、transform:rotate(角度)の調整を入れるという動作になっています。
値の更新はリアクティブにしたかったのですが、vueもreactもその用途には大袈裟すぎると思ったので knockoutjs というヤツを使っています。

#おまけ
ブラウザ依存でうんこのフォントがかなり違うため、ブラウザによって表示がずいぶん違います。リストしておきます。
## Android スマホ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647892/5a1f57f3-1729-ffa8-dc8b-e59ce0e0f8b3.png)
白い歯が素敵です。ちょっと古いAndroidだと、
ちょっと湯気だったうんこだった感じでしたが、省略します。

## Firefox
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647892/881df36b-6d99-98e9-8845-f0f5103ce204.png)
ポップでかわいい

## IE 11
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647892/3d538f11-8253-e7ca-0183-14d367143cf6.png)
えっ？

#まとめ
IE 11 が大嫌いな理由が1つ増えた。

以上
ELB (ALB) のヘルスチェックが Request timed out になって悩んだ

ぜんぜん大した話ではないのですが、検索しても答えが見つからず、しばらく悩んだので。

<img width="569" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2596/8d10eed0-7f59-edb4-fc34-29a38655fadd.png">

## ロードバランサのアウトバウンドルールが閉じていた

リクエストが通るには、

 * ロードバランサに設定したセキュリティグループのアウトバウンドルール
 * インスタンスに設定したセキュリティグループのインバウンドルール

の双方で接続を許可する必要があります。

インスタンスのインバウンドルールばかり見ていて、ロードバランサのアウトバウンドルールが閉じていることになかなか気づきませんでした。。 :cry: 

## その他

ALB のセキュリティグループの推奨設定が以下にあります。
https://docs.aws.amazon.com/ja_jp/elasticloadbalancing/latest/application/load-balancer-update-security-groups.html
アウトバウンドを絞るのは、ALB のルールを間違えて、変なサーバにリクエストを送るのを防ぐためでしょうか。

今回は特に関係ありませんでしたが、ヘルスチェックのリクエストは以下のような内容になるそうです。Host ヘッダは IP になるとのこと。
https://aws.amazon.com/jp/premiumsupport/knowledge-center/elb-fix-failing-health-checks-alb/

```
GET / HTTP/1.1
Host: 10.0.0.1:80
Connection: close
User-Agent: ELB-HealthChecker/2.0
Accept-Encoding: gzip, compressed
```
【rails】activehashについて

###Active Hashとは
ハッシュ形式の値をActive Recordと同じように操作できるようにするgem
Relationも貼れるので便利

###基本的な使い方
以下のような書き方ができる

```ruby:app/models/plan.rb
class Plan < ActiveHash::Base
  self.data = [
    {id: 1, name: "free"},
    {id: 2, name: "silver"},
    {id: 3, name: "gold"},
  ]
end

class Plan < ActiveHash::Base
  self.data = [
    {id => 1, name => "free"},
    {id => 2, name => "silver"},
    {id => 3, name => "gold"},
  ]
end

class Plan < ActiveHash::Base
  fields :name
  add id: 1, name: "free"
  add id: 2, name: "silver"
  add id: 3, name: "gold"
end
```



```ruby:ターミナル 
pry(main)>Plan.first
=> #<Plan:0x00007ffd3d2c43f8 @attributes={:id=>1, :name=>"free"}>
```
<br>
relationを貼りたいモデルに以下を記載すればアソシエーションを利用してデータを操作できる。
ActiveHashのモデル側には特に追記することはない

```ruby
extend ActiveHash::Associations::ActiveRecordExtensions
belongs_to_active_hash :ActiveHashのモデル名
```


###

参考
https://qiita.com/DON4024/items/78edb7a309ee96766952
https://qiita.com/Toman1223/items/8633142312bfa886d50b
Rakuten Casaのルーター機能の有効化

## 現在この方法は使えません！！

コメントの指摘にある通り、現在はこの方法でルーター機能を有効にできなくなっているようです。
いくつかの有用なコメントを残しておくため、この記事は削除せずにおきますが、ご注意ください。
また、筆者はすでに楽天モバイルを解約しており、現状について答えることはできません。
解約理由は、首都圏での電波品質が低く、常用に耐えなかったためです。


## はじめに

Rakuten Casa(以下、Casa)はデフォルトでPPPoEやDS-Liteが有効になっていないません。
下記の通り設定を行うことで、ルーターなしで、ONU(モデム)に直接接続して使用することができました。

CasaはオープンソースプロジェクトのOpenWrtで動作しているようです。
細かい設定方法は https://openwrt.org/ を参考にすることができます。

設定を間違えると容易に動作不能になるため、設定は自己責任でお願いします。
また、個別のトラブルには答えません。楽天モバイルに問い合わせてください。


## 物理配線

<img width="50%" src="https://network.mobile.rakuten.co.jp/assets/img/area/rakuten-casa/top/img_casa_step02.png">

公式ではこのようにルーターを別途用意する必要があると書いてあります。
しかし、本体のルーター機能を有効にすることで、別途ルーターを用意する必要がなくなります。

下記の設定では、ルーターを介さずに、ONU(モデム)とCasaのWANを直接ケーブルで接続します。
ルーターは押し入れにしまうか、メルカリに出品してください。
準備ができたら、ONUとCasaの電源を入れてください。


## ブラウザから設定画面を開く

PCかタブレットか何かをCasaのWi-Fiに接続しておいてください。
ブラウザで http://192.168.210.1/ にアクセスします。
ログインします。デフォルトのパスワードは "admin" です。

### 言語が英語になっている場合
上部メニュー「System」の「System」を開き、「Language and Style」に移動します。
「Language」を「auto」か「日本語」に変更します。
変更したら、下部「Save & Apply」ボタンを押します。
勝手に日本語の画面に切り替わらない場合は http://192.168.210.1/ を開きなおします。


## IPv4の設定

IPv4(PPPoE)の設定を行います。
この設定を行うことでCasaをインターネットに接続することができます。

### 設定方法
上部メニュー「ネットワーク」の「インターフェイス」を開きます。
「WAN」にある「編集」ボタンを押します。
「プロトコル」を「PPPoE」に変更して、「プロトコルの切り替え」ボタンを押します。
「PAP/CHAP ユーザー名」と「PAP/CHAP パスワード」にそれぞれPPPoEの接続用のIDとパスワードを入力します。
下部「保存 & 適用」ボタンを押します。

### 確認
以上で設定は完了です。設定の反映まで数分かかる場合があります。
必ず、Rakuten MobileのスマホでLTE通信ができるか確認してください。
通信の確認ができれば作業は終了です。


## IPv6の設定

IPv6 over IPv4(DS-Lite)の設定を行います。
集合住宅などでは、PPPoE(IPv4)は日中に速度が低下することがあります。
IPv6 over IPv4の設定を行うことで、日中でも速度低下なしにインターネットを使うことができます。


### 注意
PPPoEの設定を行った上でこの設定を行う必要があります。
停電などでCasaが再起動された場合、PPPoEの設定からやり直す必要があります。
正直かなりめんどいです。
どうしてもPPPoEでは速度に不満がある場合にだけ、以下の設定をおすすめします。

### 設定方法
上部メニュー「ネットワーク」の「インターフェイス」を開きます。
「WAN6」にある「編集」ボタンを押します。
「プロトコル」を「DHCPv6 client」に変更して、「プロトコルの切り替え」ボタンを押します。
下部「保存 & 適用」ボタンを押します。
しばらくすると「インターフェイス」の画面に戻ります。
「WAN」にある「編集」ボタンを押します。
「プロトコル」を「Dual-Stack Lite (RFC6333)」に変更して、「プロトコルの切り替え」ボタンを押します。
「DS-Lite AFTR address」に「2001:f60:0:200::1:1」と入力します。
下部「保存 & 適用」ボタンを押します。

### 設定完了
以上で設定は完了です。設定の反映は数秒で終わります。
必ず、Rakuten MobileのスマホでLTE通信ができるか確認してください。
通信の確認ができれば作業は終了です。
(残念ながら、LTEでは10Mbpsも出ないですね。。。)


日中でも300Mbps以上出ますね。( 参考：https://fast.com/ja/ )
有線接続ですが、私の環境では一度だけ970Mbpsの回線速度を記録しました(笑)
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">早朝にIPv6で回線速度計測したらほぼ理論値叩き出したわ。光回線すごすご。 <a href="https://t.co/HqynZMZxlu">pic.twitter.com/HqynZMZxlu</a></p>&mdash; 冬眠中狸 (@jin0g) <a href="https://twitter.com/jin0g/status/1262492221950947329?ref_src=twsrc%5Etfw">May 18, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>




## おわりに

繰り返しになりますが、
設定を間違えると容易に動作不能になるため、設定は自己責任でお願いします。
また、個別のトラブルには答えません。楽天モバイルに問い合わせてください。

### 困りごと

ネイティブIPv6がLANに割り振られません。
設定方法が分かれば教えて欲しいです。
Understanding deep learning requires rethinking generalization【Abstract】【論文 DeepL 翻訳】

この記事は自分用のメモみたいなものです.
ほぼ [DeepL](https://www.deepl.com/home) 翻訳でお送りします.
間違いがあれば指摘していだだけると嬉しいです.

翻訳元
[Understanding deep learning requires rethinking generalization](https://arxiv.org/abs/1611.03530)

前: ないよ
次: [【1 Introduction】](https://qiita.com/tomato_/items/ec2f68a6a69e2a18110c)

# Abstract

### 訳文

巨大なサイズにもかかわらず, 成功した深層人工ニューラルネットワークは, トレーニングとテストの性能の間に驚くほど小さな差を示すことができる. 従来の常識では, 一般化誤差が小さいのは, モデルファミリーの特性か, トレーニング中に使用される正則化技術のいずれかに起因するとされてきた.
広範囲にわたる系統的な実験を通して, これらの従来のアプローチが, なぜ大規模なニューラルネットワークが実際にうまく一般化するのかを説明することができないのかを示す. 特に, 我々の実験では, 確率的勾配法を用いて訓練された画像分類のための最新の畳み込みネットワークが, 訓練データのランダムなラベリングに容易に適合することを明らかにした. この現象は, 明示的な正則化の影響を受けず, 真の画像を完全に構造化されていないランダムノイズで置き換えた場合にも起こる. 単純な深度 2 ニューラルネットワークが, パラメータの数がデータポイントの数を超えた時点で, すでに完全な有限サンプル表現力を持っていることを示す理論的な構築によって, これらの実験的知見を裏付ける.
我々は, 従来のモデルと比較することで, 我々の実験結果を解釈する.


### 原文

Despite their massive size, successful deep artificial neural networks can exhibit a remarkably small difference between training and test performance. Conventional wisdom attributes small generalization error either to properties of the model family, or to the regularization techniques used during training.
Through extensive systematic experiments, we show how these traditional approaches fail to explain why large neural networks generalize well in practice. Specifically, our experiments establish that state-of-the-art convolutional networks for image classification trained with stochastic gradient methods easily fit a random labeling of the training data. This phenomenon is qualitatively unaffected by explicit regularization, and occurs even if we replace the true images by completely unstructured random noise. We corroborate these experimental findings with a theoretical construction showing that simple depth two neural networks already have perfect finite sample expressivity as soon as the number of parameters exceeds the number of data points as it usually does in practice.
We interpret our experimental findings by comparison with traditional models.
Railsアプリで画像の保存先をS3に変更する。その2

## はじめに
[前回の記事](https://qiita.com/ysda/items/49fa6e8318c874a57b9e)からの続きです。


## 安全にAWSのキーを扱えるようにする
AWSキーの漏洩を防ぐため、キーの内容は環境変数に設定します。
環境変数が分からない人はググって調べてみましょう！


## AWSのキーの設定
carrierwave.rbのなかに[:access_key_id]や[:secret_access_key]といった記載がありました。
ここには予め設定したキーが入り、Rails5.2では「credentials.yml.enc」というファイルで管理されます。

それではcredentials.yml.encをエディタで開いてみましょう。
以下のように暗号化された文字列が表示されると思います。
![スクリーンショット 2020-07-26 23.23.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/ab3cebe2-4098-b91b-c917-ab149ce57ba5.png)

これをターミナルからVSCodeを起動できるよう設定を行います。
VSCodeで、「Command + Shift + P」を同時に押してコマンドパレットを開きます。
続いて、「shell」と入力しましょう。
メニューに「PATH内に'code'コマンドをインストールします」という項目が表示されるので、それをクリックします。
この操作を行うことで、ターミナルから「code」と打つことでVSCodeを起動できるようになります。

それではターミナルから以下のコマンドを実行しましょう。
復号化されたcredentials.yml.encがVSCodeで表示され、編集可能となるはずです。

```
% EDITOR='code --wait' rails credentials:edit
```

AWSのaccess_key_idとsecret_access_keyを以下のように編集しましょう。
![dcEU4PX7s6ICcTD1595774207_1595774265.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429077/9083c413-4d04-8f50-28fe-2821f9c75ae4.png)

## master.keyの設定
credentials.yml.encはmaster.keyというファイルで復号化を行います。
しかし、本番環境にmaster.keyを配置することはセキュリティ上問題があります。
そのため、本番環境の環境変数にmaster.keyの中身を設定しましょう。

EC２インスタンスにログインし、環境変数の設定を行うファイルを開きます。

```
sudo vim /etc/environment
```
ローカル開発環境で「config/master.key」の値をコピーして、本番環境のRAILS_MASTER_KEYに設定します。

```
RAILS_MASTER_KEY='master.keyの値'
```
これで環境変数が設定できたはずなので、EC2インスタンスにログインし直して以下のコマンドで環境変数を確認しましょう。

```
env | grep RAILS_MASTER_KEY
```

## まとめ
環境変数を参照する流れをまとめますと以下のようになります。
1.credentials.yml.encをローカル環境のmaster.keyで復号する
2.credentials.yml.encを編集し、access_key_idとsecret_access_keyを設定する。
3.本番環境にデプロイする
4.master.keyの内容を本番環境の環境変数に設定する。
5.本番環境のcredentials.yml.encが環境変数を用いて復号可能となる。


前回の記事と上記の設定を行えば、S3に画像をアップロード出来るようになるはずです！多分！以上！
エセ関西弁アナグラム

###作りました
クソ診断をしていると，毎日クソみたいなポストをする必要があるので自動化しようかなと思いひな型を作りました．

```python
import random

def inv_dict(d):
    return {v:k for k,v in d.items()}

ese = {"エ":1, "セ":2, "関":3, "西":4, "弁":5}
mahi = {"ま":1, "っ":2, "ひ":3, "好":4, "き":5}
inv_ese = inv_dict(ese)
inv_mahi = inv_dict(mahi)

instr = ""    #将来的にはAPIで自動取得
for i in range(5):
    i = random.randrange(4)+1
    instr += inv_ese[i+1]
print(instr)

outstr= ""
for txt in list(instr):
    outstr += inv_mahi[ese[txt]]
print(outstr)

if instr == "エセ関西弁":
    print("Congratulations!!")
```

###なんでこんなものを組んだのか，それが分からない
```実行結果
関弁西西セ
ひき好好っ
```
一応成功．
逆引き用の辞書しか使ってないやんけ！という印象．
将来的には自動取得するつもりですが，現時点では自分で診断結果を作ってるからただの自作自演．


>不正して
>「エセ関西弁」って投稿したら
>彼は気がついてくれるのだろうか？

こういう人もいるので，ネイティブな結果をリダイレクトして走るコマンドも考えておく必要がありますね．
PHPのビルトインウェブサーバをsystemdのサービスとして登録する

PHPにはビルトインウェブサーバが付属していますので、WEB用のPHPスクリプトをちょっとテストするのに便利です。ただ、ある程度継続して使い続けるためには、サービスとして登録する必要があります。そんな時にどうするかという話です。


#### 想定環境
1. PHPのWebアプリのテスト、ローカルポータルサイトの構築などの目的
2. LAN内のLinuxサーバ、またはLinuxPC上に設置（グローバルに公開しない）

ローカルにかつ一時的に利用することを想定しています。恒常的なサービスにする場合は記事末を見てください。


#### 手順
1. .serviceファイルを用意する
2. .serviceファイルを/lib/sysem/systemdにコピーする
3. サービスを有効化する
4. サービスを起動する

.serviceファイルは、ウェブサーバで起動するPHPスクリプトとペアにして、同じディレクトリ内に置いておくと管理のために便利です。


#### .serviceファイル
.serviceファイルはリスト2のように記述します。「{ }」内には具体的な値が入ります。なお、筆者はDebianを使っていますので、サービスの実行ユーザをwww-dataにしています（お使いのOSの習慣に従って、適宜変更してください）。

```text:リスト1
[Unit]
Description = {Description}

[Service]
ExecStart = /usr/bin/php -S {HOSTNAME}:{PORT} {SCRIPTPATH}
User = www-data
Group = www-data

[Install]
WantedBy = default.target

```

##### {HOSTNAME}
ウェブサーバをPC上で起動する場合は

    localhost あるいは 127.0.0.1

にしてください。これにより、LAN内であっても他のホストからのアクセスができません。LAN内の別ホスト上で起動する場合は

    プライベートアドレス あるいは そのアドレスを指すローカルホスト名

にします。

##### {PORT}
Webサービスであることを明示的に示すためには、ポートは

    8080 〜 8089

を使うのが良いでしょう。他のサービスと重複しなければ何でも良いのですが、特権ポート（1023以下）は避けた方が無難です。

##### {SCRIPTPATH}
ビルトインウェブサーバにより起動されるPHPスクリプト名です。必ずフルパスで指定してください。

##### {DESCRIPTION}
「systemctl status」コマンド等の結果として表示されるサービスの名前です。.serviceファイルのベース名（拡張子を取り除いた部分）を使うのが無難でしょう。


#### サービスの登録と起動
筆者はリスト2のようなスクリプトを使っています。「register-service」と名付けてパスの通っている場所に保存しています。このスクリプトは、.serviceファイルが置かれたディレクトリをカレントにしないと実行できないようになっています。これは、あくまでも一時的なサービスであることを強調するためです。

```bash:リスト2（register-service）
01: #!/usr/bin/env bash
02: NAME=$1
03: # 第1引数でサービスの名前を定義する
04: if [ "${NAME}" == "" ]; then
05: 	echo "Service name required."
06: 	exit 1
07: fi
08: NAME=${NAME%.service}
09: SNAME=${NAME}.service
10: # カレントディレクトリに定義ファイルが存在するか
11: if [ ! -f "${SNAME}" ]; then
12: 	echo "${SNAME} not found."
13: 	exit 1
14: fi
15: LDIR=/lib/systemd/system
16: # 同じ名前のserviceが存在するか
17: if [ -e ${LDIR}/${SNAME} ]; then
18: 	echo "Service ${NAME} already exists."
19: 	exit 1
20: fi
21: # .serviceファイルをコピーする
22: sudo cp ${PWD}/${SNAME} ${LDIR}/${SNAME}
23: # serviceを有効化する
24: sudo systemctl enable ${NAME}
25: # serviceを起動する
26: sudo systemctl start ${NAME}
```

例えば、「php8081.service」を登録する場合には、そのファイルの存在するディレクトリをカレントにして

```bash
$ register-service php8081
```

などと実行します。一般のサービスへできるだけ影響を与えないように、.serviceファイルの存在するディレクトリで実行します。


#### サービスの削除
一時的なサービスですので、いつかは削除します。その際、サービスをdisableする前に、stopしなければならないことに注意してください。サービスが起動中にdisableしてしまうと、ゾンビのようなサービスが残ってしまいます（リスト3）。

```bash:リスト3
$ sudo systemctl status php8081
● php8081.service
     Loaded: not-found (Reason: Unit php8081.service not found.)
     Active: active (running) since Mon 2020-07-27 00:35:21 JST; 2min 49s ago
...
 7月 27 00:36:36 chiimama systemd[1]: php8081.service: Current command vanished from the unit file,
    execution of the command list won't be resumed.
```

筆者は、サービスを間違いなく削除するために、リスト4のスクリプトを利用しています。

```bash:リスト4（unregister-service）
14: （ここまでリスト2と同じ）
15: # serviceを停止する
16: sudo systemctl stop ${NAME}
17: # serviceを無効化する
18: sudo systemctl disable ${NAME}
19: # .serviceファイルを削除する
20: sudo rm ${LDIR}/${SNAME}
```
【Ruby】シンプルなPingクライアントを作ってみた

# 概要
ICMP Echo Requestの送信・受信を1回だけ実行するシンプルなクライアントを作ってみたので、忘れないうちに実装時に学習したことや、気をつけたこと等をつらつらとメモ。

### 成果物リンク
https://rubygems.org/gems/simple_ping
https://github.com/kuredev/simple_ping

## 目的
- ネットワークプログラミングの練習
- gem パッケージ公開の練習
- 気晴らし

# どんなものか/使い方

### できること
- ping(ICMP)した結果の成否をtrue/falseで返却する
- 宛先の指定はIPアドレス

### できないこと
- FQDNでの宛先指定
- リトライ
- 送信データのカスタマイズ（ID指定やデータ部の指定等）
- 等など

## 使い方サンプル

```ruby:ping.rb
require "simple_ping"

ping_client = SimplePing::Client.new(src_ip_addr: "192.168.1.100")
puts ping_client.exec(dest_ip_addr: "192.168.1.101") ? "Success!" : "Failed.."
```

※実行時にはroot権限が必須

```sh:console
> sudo ruby ping.rb
Success!
```

# 実装メモ

- ソケットプログラミングを行うこととなるが、 [ドキュメント](https://docs.ruby-lang.org/ja/latest/class/Socket.html#C_-S-O-C-K_-D-G-R-A-M)を見るといくつかソケットにも種類があるが、今回はICMPヘッダを直に触るので、 `SOCK_RAW` （Rawソケット）を用いる。
    - 第一引数には `Socket::AF_INET` を指定する。IPヘッダ以上のヘッダを触ることができる。
- 最終的にデータを送信([send](https://docs.ruby-lang.org/ja/latest/method/BasicSocket/i/send.html))するときはデータを文字列で指定する必要がある。用意したICMPヘッダのデータ列を1ByteずつASCIIコードに従って文字列に変換する必要がある。
    - 例えば、「識別子」が65であれば、[ASCIIコード](http://www3.nit.ac.jp/~tamura/ex2/ascii.html)上では65は `A` になるので `A` を送信する必要がある。
    - Ruby 上では `65.chr` 等とするとASCIIコードにしたがって文字を取得できる。[参考](https://maku77.github.io/ruby/number/ascii-char.html)
    - ただしエンコーディングの種別は[設定によって変わる](https://docs.ruby-lang.org/ja/latest/method/Integer/i/chr.html)らしいので注意する
- 受信する際は [`recvfrom`メソッド](https://docs.ruby-lang.org/ja/latest/method/Socket/i/recvfrom.html)によって受信し、データは文字列で取得できる
    - 取得したデータはIPヘッダも含んだ形でのデータとなっている。
    - IPヘッダのサイズは基本的に20Byteなので（違う場合もあるようだが今回は実装上は想定していない）ICMPヘッダのデータは21Byte目から順番に取得できる
    - 例えばICMPヘッダ先頭の「タイプ」であれば以下のように取得できる
        - `bytes` メソッドで文字列をASCIIコードに変換できる

```ruby
mesg, _ = socket.recvfrom(1500)
mesg[21].bytes[0] #=> 0
```

- 受信時には受信したパケットが送信した物の帰りのパケットかを判定する必要があるが、「ID」と「シーケンス番号」と「タイプ」を照合して、送信・受信の対応を確認する（以下RFCの通り）

> 受信したエコーメッセージに含まれるデータは、エコーリプライメッセージのデータとして返されなければならない。
識別子とシーケンス番号は、エコー送信者がエコー要求とそのリプライとを対応させるのに使用される。例えば TCP や UDP がセッションを特定するために使用するポート番号のように識別子を使用してもよいし、エコー要求のたびにシーケンス番号を増加させてもよい。エコーを返す側は、エコーリプライの中で同じ値を返す。
http://srgia.com/docs/rfc792j.html

# 参考

RubyでいろいろなSocket作って遊んでみた。 - Qiita https://qiita.com/MikuriyaHiroshi/items/b0a40f5e7b7be1ef327c

【Ruby】RawSocketを使ったネットワークプログラム – Euniclus https://euniclus.com/article/ruby-port-scan/

BasicSocket#send (Ruby 2.7.0 リファレンスマニュアル) https://docs.ruby-lang.org/ja/latest/method/BasicSocket/i/send.html

Internet Control Message Protocol - Wikipedia https://ja.wikipedia.org/wiki/Internet_Control_Message_Protocol#ICMP%E3%83%98%E3%83%83%E3%83%80

ASCII コードと文字を変換する (ord, chr, bytes, unpack, codepoints) | まくまくRubyノート https://maku77.github.io/ruby/number/ascii-char.html

RFC792(INTERNET CONTROL MESASAGE PROTOCOL) http://srgia.com/docs/rfc792j.html
Laminasことはじめ

[Laminas](https://getlaminas.org)をとりあえずローカルで動かしてみようという記事です。
おや？Laminasをご存じない？
PHPといえばZend、そう、ZendFrameworkがLinux Fundationに移行されて後続的にOSSとして開発されているのがLaminasです。

Laminasにもいくつかパッケージがあり、

- Component and MVC
- Mezzio(ZendExpressiveの後続)
- API Tools

今回はMVCのSkeletonをローカルで動かすまでをやってみます。
ありがたいことにこんな素敵なリポジトリがあり、READMEを追って作業するだけであっという間に立ち上がります。
https://github.com/laminas/laminas-mvc-skeleton


# 導入
ちなみにMacOS環境でローカルにPHP7.4,Composerを導入済みです。

適当なディレクトリを作成してcomposerを実行するだけですね。

```zsh
$ mkdir laminas
$ composer create-project -sdev laminas/laminas-mvc-skeleton laminas
```

実行するとコンソールで対話式に色々聞かれます。
適当に選んでいきます。

```zsh
Do you want a minimal install (no optional packages)? Y/n
N

Would you like to install the developer toolbar? y/N
Y

Would you like to install caching support? y/N
Y

Would you like to install database support (installs laminas-db)? y/N
Y

Would you like to install forms support? y/N
N

Would you like to install JSON de/serialization support? y/N
Y

Would you like to install logging support? y/N
Y

Would you like to install MVC-based console support? (We recommend migrating to zf-console, symfony/console, or Aura.CLI) y/N
Y

Would you like to install i18n support? y/N
Ｎ

Would you like to install the official MVC plugins, including PRG support, identity, and flash messages? y/N
Y

Would you like to use the PSR-7 middleware dispatcher? y/N
Y

Would you like to install sessions support? y/N
Y

Would you like to install MVC testing tools for testing support? y/N
Y

Would you like to install the laminas-di for laminas-servicemanager? y/N
Y
```
一通り必要なパッケージの有無を求められました。
続いて設定ファイルに関して聞かれます。

```zsh
  Please select which config file you wish to inject 'Laminas\Cache' into:
  [0] Do not inject
  [1] config/modules.config.php
  [2] config/development.config.php.dist
  Make your selection (default is 1):

Remember this option for other packages of the same type? (Y/n)
N
```
ここでN(No)にするとパッケージ毎にどうするか聞かれるのでだいたいデフォルトでいいんじゃないですかね・・・

Y(Yes)を選んでも以下の項目は再度聞かれます。Developmentモードのときだけ必要なやつの設定ですね。

```zsh
Please select which config file you wish to inject 'Laminas\DeveloperTools' into:
  [0] Do not inject
  [1] config/modules.config.php
  [2] config/development.config.php.dist
  Make your selection (default is 1):
N
```

これで導入は完了。
ご丁寧にVagrantとDockerのローカル環境の設定があるので今回はDockerで起動してみます。

```zsh
$ docker-compose up -d --build
```

`http://localhost:8080`にアクセスすると以下のような画面が表示されます。
<img width="1080" alt="スクリーンショット 2020-07-27 0.48.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89213/94bb5f0a-5d7e-fc7f-16d2-d8c944603258.png">

自分たちが開発していくアプリケーションは`modules/Application/src`になります。以前ZendExpressiveのv2系をやったことがあるんですがまた違ったディレクトリ構造ですね・・・
PSR-7,DI,UnitTestがデフォルトでついてる（任意選択）のは今どきのPHPフレームワークって感じですね。
とはいえPSR-7といいつつlaminas-psr7bridgeでLaminas独自の型に変換してるので純粋なPSR-7じゃないっぽい？

公式ドキュメントも豊富なので良さそうですね。とはいえフルスタックなフレームワークなだけに機能豊富で一通りの使い方を覚えるのには骨が折れそう・・・
chmod 775 でアクセス権限変更

###`chmod`コマンドは、ファイルやディレクトリのパーミッション(アクセス権限）を変更できます。



まず、変更したいファイルがある`bin`ディレクトリまで行き、ファイルの詳細を確認する

```
$cd 〇〇

$ls -l

-rw-r-----@ 1 username  staff    2020  7  1 02:12 shutdown.bat
-rwxr-xr--@ 1 username  staff    1902  7  1 02:12 shutdown.sh
-rw-r-----@ 1 username  staff    2022  7  1 02:12 startup.bat
-rwxr-xr--@ 1 username  staff    1904  7  1 02:12 startup.sh
```
左側に注目！ `-rwxr-xr--`

###左から
`-` -> ファイルという意味。フォルダの場合は、`d`

`rwx` -> 所有者(u)が、読み込み(r)、書き込み(w)、実行(x)が可能

`r-x` -> グループ(g)が、読み込み(r)、実行(x)が可能

`r--` -> その他(o)が、読み込み(r)が可能

#775でその他の実行を可能にする

###数字の意味
それぞれに数字が割り当てられていて、

読み込み(r) -> 4

書き込み(w) -> 2

実行(x) -> 1

となっている。　番号の和で変更させる。

すなわち上記例の`-rwxr-xr--`は、754となっている。
`rwx` -> 7
`r-x` -> 5
`r--` -> 4

###変更コマンド
その他(o)の実行(x)を可能に

```
$chmod 755 *.sh
```
`*.sh`は.shファイル全てが対象

詳細確認

```
$ls -l

-rw-r-----@ 1 username  staff    2020  7  1 02:12 shutdown.bat
-rwxr-xr-x@ 1 username  staff    1902  7  1 02:12 shutdown.sh
-rw-r-----@ 1 username  staff    2022  7  1 02:12 startup.bat
-rwxr-xr-x@ 1 username  staff    1904  7  1 02:12 startup.sh
```
変更完了

#変更後の利用例です。 Tomcat

```
$./startup.sh

Using CATALINA_BASE:   /Users/username/java_development/apache-tomcat-10.0.0-M7
Using CATALINA_HOME:   /Users/username/java_development/apache-tomcat-10.0.0-M7
Using CATALINA_TMPDIR: /Users/username/java_development/apache-tomcat-10.0.0-M7/temp
Using JRE_HOME:        /Library/Java/JavaVirtualMachines/jdk-14.0.1.jdk/Contents/Home
Using CLASSPATH:       /Users/username/java_development/apache-tomcat-10.0.0-M7/bin/bootstrap.jar:/Users/username/java_development/apache-tomcat-10.0.0-M7/bin/tomcat-juli.jar
Tomcat started.
```

http://localhost8080
にアクセス

[![Image from Gyazo](https://i.gyazo.com/9a197a1fcce2301842c7e53a0f588066.png)](https://gyazo.com/9a197a1fcce2301842c7e53a0f588066)
TypescriptのGenericsを理解する

# 概要
Genericsの勉強のメモとして残しておく

## Genericsとは何？
GenericsはC#やJavaにも搭載されている機能でありTypescriptに限った機能ではありません。
簡単に説明すると抽象的な型引数を使用して、実際に利用されるまで型が確定しないクラスや関数, インターフェースを実現するためのものだ。
型を定めながらも具体的な型づけは、その場面ごとで変えられるといった構文です。簡単なコードを織り交ぜながら説明していきます。

## 何気なく使っているGenerics
Promiseなんかはわかりやすい例です。
簡単なPromise型を返す変数を用意するとします。
どこでGenericsが使われているかというと `<string>` の部分です。これはPromiseでどんな型を返すかは実装者は柔軟に決めることができます。今回はstringなのでthenでチェーンした内部ではlengthメソッドを呼び出せることがわかります。

```ts
const promise = new Promise<string>((resolve, reject) => {
  setTimeout(() => {
    resolve('終了');
  }, 2000)
});
promise.then((data) => {
  console.log(data.length);
})
```
ではPromise型のインターフェースはどうなっているんだろう？

```ts
interface Promise<T> { }
```
このように抽象的な型引数<T>を定義し、実際に利用されるまで型が確定しないような宣言になっています。
実装者は場面ごとにPromiseでどのような型を返したいのか宣言でき、柔軟かつ型安全なコードを書けるようになります。

## 独自Generics
とても簡単な例で説明します。

```ts
const sampleString = (a: string) => {
 return a;
}

const sampleNumber = (a:number) => {
 return a;
}

sampleString('hoge');
sampleNumber(1);

```
上記のような同じ処理だけど受け取る型、返却する型が違う場合の関数を一つにしたい時ってあるかと思います。そうした場合はみなさんどうしますか？

```ts
const sampleAny = (a: any) => {
 return a;
}
sampleAny('hoge');
sampleAny(1);
```
anyなんかで簡単に一つにはできますが型安全ではないですよね＞＜
できればanyは使いたくない。。。

関数のオーバーロードなんかもあるかもしれませんね。
でも型に対して一個づつオーバーロードして行くのもしんどいっすよね。

そういった時に、型引数を導入してGenericsで解決することができます！！

```ts
const sampleGenerics = <T>(a: T) => {
 return a;
}
sampleGenerics<string>('hoge');
sampleGenerics<number>(1);
```
このように書くと、実際に利用されるまで型が確定しない関数を作成されます。`sampleGenerics<string>`の引数は文字列だけ。`sampleGenerics<number>`の引数は数値だけが許される。
また、もっと他の型も利用可能で、`sampleGenerics<Date>`と書くと日付時刻だけが許される。
といったように型の安全性を高めると共にとても汎用性ある関数を定義できます。

## 型引数への制約
さっき出した`sampleGenerics`はどの型でも許容してました。
しかし、引数で受け入れる値を特定の型のみの制約を設けたいという場面も多々出てくるかと思います。

そういう場合はどうするんだろう？？

簡単なコードで説明します。
第一引数にオブジェクト、第二引数にそのオブジェクトに存在するkeyを受け取る関数を定義します。
ここでつける制約は、第一引数で受け取ったオブジェクトに存在するkeyしか第二引数では受け取れないようにするということです。
実際に見てみましょう！

```ts
const sample = <T extends object, U extends keyof T>(obj: T, key: U) => {
  return obj[key];
}
sample({name: 'Max'}, 'name'); // No Error
sample({name: 'Max'}, 'age'); // Error
```
このように第二引数の型に`keyof T`を定義することによって第一引数のobjに存在するkeyのみを引数として受け付けるという制約をつけることができます。

これは便利ですね〜〜！！

## まとめ
今回本当に初歩的な部分しかまだインプットできていませんが、Typescriptには重要不可欠なトピックであることは間違いないと思いました。自分は実際の仕事でGenericsを扱ったコードを書いたことがないので、これから勉強してバリバリ使えるようになっていきたいと思いました。

## 参考
[Typescript公式 -Generics](https://www.typescriptlang.org/docs/handbook/generics.html)
Ant Design で Menu を含んだ Layout.Header の高さを変更

# Ant Design で Menu を含んだ Layout.Header の高さを変更

And Design の [Layout](https://ant.design/components/layout/#components-layout-demo-top) にて `Menu` を含んだ実例の記述がありますが、
以下 CSS を適用することで任意の高さに変更します。 (記述は SCSS です)

```scss:antd-layout-header-height-with-menu
// ここで Header 向けの任意の高さを指定
$header-height: 50px;
// Header に指定する line-height
// calc() を使用しているのは line-height の微調整が必要になるケースがあるため
$header-line-height: calc(#{$header-height} + 1px);

.ant-layout-header {
  height: $header-height;
  line-height: $header-line-height;
}
```

## 詳細

[Layout](https://ant.design/components/layout/#components-layout-demo-top) により以下の記述をベースとします。

```jsx:layout-base
import React from "react";

import { Layout, Menu } from "antd";

const { Header, Content, Footer } = Layout;

export default () => {
  return (
    <Layout className="layout">
      <Header>
        <div className="logo" />
        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={["2"]}>
          <Menu.Item key="1">nav 1</Menu.Item>
          <Menu.Item key="2">nav 2</Menu.Item>
          <Menu.Item key="3">nav 3</Menu.Item>
        </Menu>
      </Header>
      <Content style={{ padding: "0 50px" }}>Content</Content>
      <Footer style={{ textAlign: "center" }}>Footer</Footer>
    </Layout>
  );
};
```

### Header の height のみを変更

height を変えるので Header に `style={{ height: 50 }}` を指定してみます。

```jsx:height-only
・・・
      <Header style={{ height: 50 }}>
・・・
```

すると、 Header の高さは変わりましたが Menu がそのままです。

![height-only](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116435/d09f173f-c1e7-94e0-00c2-9c4cf3adf7a9.png)

これは以下のように Menu 自体には height は指定されておらず、
Menu の line-height が .ant-layout-header の inherit になっているためのようです。

![menu-height](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116435/d071d61f-490a-8676-698b-b131d3f538d0.png)

そこで・・・

### Header にセレクタを指定したスタイルを適用

Header に対して CSS でのスタイル指定を行います。

```jsx:header-styled
・・・
      <Header className="styled">
・・・
```

`className="styled"` を指定し、 CSS での記述を適用します。

```scss:header-styled
$header-height: 50px;
$header-line-height: calc(#{$header-height} + 1px);

.ant-layout-header.styled {
  height: $header-height;
  line-height: $header-line-height;
}
```

これで Header と Menu の高さが調整されました。

![header-styled](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116435/be220968-bd30-521d-68bb-42d40f76eb15.png)

[CodeSandbox での実例](https://codesandbox.io/s/antd-layout-header-menu-height-5mjt9)
Python プロパティの良さを探す。

pythonのプロパティに関しての記事です。

`__slots__`やコメント、型ヒントなどは省略しています。

## あまり恩恵がわかりにくい例

1.インスタンス変数のみ

```
class Data:

    def __init__(self):
        self.x = "a"
```

2.プロパティで書いたパターン


```
class Data:

    def __init__(self):
        self._x = "a"

    @property
    def x(self):
        return self._x

    @x.setter
    def x(self, arg_x):
        self._x = arg_x
```
✴︎1 アンダースコア(_)は直接アクセスして欲しくない変数につけます。
   より強固にする場合はアンダースコアを二つにする(__)

上記のクラスをどちらを使っても同じ結果になります

```
data = Data()
print(data.x)
data.x = "b"
print(data.x)

>>a
>>b
```

この二つの例だけでは恩恵がわかりにくいですが、いくつかのポイントに注目しておくと良いです。

　1.プロパティでは直接値を保持するインスタンス変数をプロパティを介していじっている事
　2.プロパティでは値を取得するまたはセットする場合に処理(確認)する構造を持たせやすいこと。


## 例１　自身が保持する値(設定)が、他の値に依存するパターン

まずはインスタンス変数のみでクラスを用意してみました。

```
class Lock:
    """
    錠クラス
    """
    def __init__(self):
        self.word = ""
        self.number = 0

        self.input_state = {
                            "word": self.word,
                            "number": self.number
                            }
```

```
lock1 = Lock()
lock1.word = "a"
print(lock1.input_state)
>> {'word': '', 'number': 0}
```
wordに"a"を入れたのに、input_stateの"word"の値は変化していませんよね。
これはinput_stateは初期化時に値が決まってしまうため、"word"の値は更新されません。
(初期入力時だけ覚えこませる変数としてならありかも知れません。)

```
class Lock:
    """
    錠クラス

    """
    def __init__(self):
        # 暗証番号
        self.word = ""
        self.number = 0

    @property
    def input_state(self):
        return {
                "word": self.word,
                "number": self.number
                }
```

```
lock1 = Lock()
lock1.word = "a"
print(lock1.input_state)
>> {'word': 'a', 'number': 0}
```

今度はwordが変更された時にinput_stateは更新されていますね。

## 例2 バリデイトしたい場合

今度はwordに"b"を入れるのは禁止にしたい場合を考えます。

```
class InvalidWordError(Exception):
    pass


class Lock:
    """
    錠クラス

    """
    def __init__(self):
        # 暗証番号
        self._word = ""
        self.number = 0

    @property
    def word(self):
        return self._word

    @word.setter
    def word(self, arg):

        if arg == "b":
            raise InvalidWordError()

        self._word = arg

    @property
    def input_state(self):
        return {
                "word": self.word,
                "number": self.number
                }

```

aを入力する場合

```
lock1 = Lock()
lock1.word = "a"
print(lock1.input_state)

>> {'word': 'a', 'number': 0}

```


bを入力する場合

```
lock1 = Lock()
lock1.word = "b"
print(lock1.input_state)

>Traceback (most recent call last):
>  File "〇〇.py", line 39, in <module>
>    lock1.word = "b"
>  File "〇〇.py", line 23, in word
>    raise InvalidWordError()
>〇〇.InvalidWordError

```

今回は無効な文字("b")が入った場合に例外を出す様にしています。

他の開発者がクラスを扱いやすくするための工夫は大事ですね。
またプロパティはカプセル化にも通じる話だと思うのでオブジェクト思考では欠かせない存在。。
やらかしJS先生がforEachを大嫌いになった話❌

#Overview

過去にバグになってしまったものを忘れないよう書き留めておくシリーズです。
今回の題材は`Array.prototype.forEach()`です。以下は私が当時のコードを思い出しながらさらり書いたコードです。(動作未確認)
複数のサイトのHTMLを取得して、ファイル出力しています。

```javascript

import fs from "fs";
const fsPromises = fs.promises;

const writeFile = async (filename, json) => {
	const callback = err => { if (err) console.error(err); };
	await fsPromises.writeFile(filename, JSON.stringify(json), callback);
}

async function crawl() {
	const result = {};
	["https://www.google.co.jp/", "https://www.yahoo.co.jp/"].forEach(async (url) => {
		const res = await fetch(url);
		result[url] = await res.text();
	})

	await writeFile("urls.json", result)
	console.log("result:", result);
}
crawl();

```

#Target reader

- この結果がわからない方

#Prerequisite

- JavaScriptを一通り理解している
- 出力結果はChromeで実行したが、環境によって出力内容が微妙に異なることがあることに注意。
- 実行環境はNode V10系。（2020年7月時点で既にちょい古め）

#Body

##答え合わせ

正解はこうなる。

```text:terminal
> "result:" Object {  }
```

何も出ないが正解:joy:
出力されたファイルの中身も同様に空のオブジェクト。

どうして何もないっていないかというと、`forEach`でawaitがないため。
awaitがないということはawaitの部分でファイル出力の方に処理が進んでしまう。
ではawaitいれればと思うが、実はこのawaitは意味がない。
詳しくは@frameairさんが書かれている記事を参照してください。
https://qiita.com/frameair/items/e7645066075666a13063

解決策は`Promise.all()`、もしくは一つずつ処理しないといけない場合は`for...of`で一つずつawaitすればいい。
`Promise.all()`はエラーの際に扱いにくいため、`Promise.allSettled()`がこれからはよさげ。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled

私が`forEach`を嫌いになった理由は、非同期処理があるかないかで書き方を変更しないといけないのが面倒だから。
極めつけとしては、asyncを入れても実行時エラーにならないのがつらい:sob:
ESLintで静的チェック、もしくはテストコードでカバーしておけばいいといえばそれまでですが:sweat_smile:

#Conclusion

**`forEach`はawaitできないため、非同期処理を何気なく追加したらバグになる可能性がある！**
`forEach`を利用するなら、非同期処理が入ったときに`Promise.all()`、`Promise.allSettled()`もしくは`for...of`に切り替えること。
vue でコンポーネントを作るときのファイル構成のモヤモヤを解決したい

# 事の発端

現在仕事ではangular を使用して悪戦苦闘しながら社内webシステムを作っています。
angularで好きだなーと思う中で、コンポーネントのファイル構成が自分の中でスッキリしています。

何がスッキリしているかというと、コンポーネントを作ると
以下のようにファイルがはっきり分かれるのが好き。

```
hoge.component.html
hoge.component.css
hoge.component.ts
```

vue-cliで作るとこの全部がvueファイルの中に全部入りになってしまうのが
自分の中でモヤモヤしてました。
※ 自分が知らないだけ？

そんなときに、別のことをgithubで調べていると
[anlularのような構成](https://github.com/jsrkstr/vuesimple/tree/c51f69f009beb3bdaa8b8aada9c94f9bba648b9b/src/bm-frontend-common/components/date-range-picker) で作っている方がいて、おぉぉぉ！コレだ！と思いました。

そんでもって毎回作るのは大変なので、以下のようなボイラープレートを作成して、これから使っていこうと思っています。

# 仕組み

難しいことはできないので、以下のような構成を事前に準備。

```bash
$ tree ./boilerplate/
./boilerplate/
├── Template.component.css
├── Template.component.html
├── Template.component.vue
└── Template.component.vue.ts
```

css、htmlは空ファイルでおいておくとして、vue、vue.tsファイルは一応
以下のようにしておきます。

```html:Templete.component.vue
<template src="./{{ Template }}.component.html"></template>
<style scoped src="./{{ Template }}.component.css"></style>
<script lant="ts" src="./{{ Template }}.component.vue.ts"></script>
```

```typescript:Templete.component.vue.ts
import { Component, Vue, Prop, Emit } from "vue-property-decorator";

@Component
export default class {{ Template }}Component extends Vue {
  constructor() {
    super();
  }
}
```

ボイラープレートが出来たところで、以下のようなスクリプトを準備します。

```bash:make_component.sh
#!/bin/bash
compname=$1

cp -r ./boilerplate ./src/components/${compname}

exts=(css html vue vue.ts)
for ext in ${exts[@]}; do
  mv ./src/components/${compname}/Template.component.${ext} \
     ./src/components/${compname}/${compname}.component.${ext}
done

exts=(vue vue.ts)
for ext in ${exts[@]}; do
  filepath=./src/components/${compname}/${compname}.component.${ext}
  sed -ri "s/[{]{2} ?Template ?[}]{2}/${compname}/g" ${filepath}
done
```

このスクリプトを以下のように実行してやると

```bash

$ ./make_component.sh Hoge
$ tree ./src/components/
./src/components/
├── Hoge
│   ├── Hoge.component.css
│   ├── Hoge.component.html
│   ├── Hoge.component.vue
│   └── Hoge.component.vue.ts

$ cat ./src/components/Hoge/Hoge.component.vue
<template src="./Hoge.component.html"></template>
<style scoped src="./Hoge.component.css"></style>
<script lant="ts" src="./Hoge.component.vue.ts"></script>

$ cat ./src/components/Hoge/Hoge.component.vue.ts
import { Component, Vue, Prop, Emit } from "vue-property-decorator";

@Component
export default class HogeComponent extends Vue {

  constructor() {
    super();
  }

}
```

自分の中ではかなりスッキリ。超自己満足。

ここまでお付き合いしていただきありがとうございます。
Serverlessフレームワークで${aws:username}を使う

Serverlessフレームワークで`${aws:username}`のような[IAM ポリシーエレメント(IAM Policy Elements)](https://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/reference_policies_variables.html)を使用するとエラーとなります。

```bash

Invalid variable reference syntax for variable aws:username. You can only reference env vars, options, & files. You can check our docs for more info.

```

Serverlessの[Valuables](https://www.serverless.com/framework/docs/providers/aws/guide/variables/)と記法が被っているからですね。

# 対処法
以下のように`provider`に`variableSyntax`を設定して、ServerlessのValuablesの記法を変更する必要があります。

```yaml
provider:
  name: aws
  runtime: python3.8
  region: ap-northeast-1
  variableSyntax: "\\${{([ ~:a-zA-Z0-9._\\'\",\\-\\/\\(\\)]+?)}}"
```

これにより、ServerlessのValuablesは`${{xxx}}`という記法に変わります。これでIAMの ポリシーエレメントが `${...}`の記法で使えるようになりました。
が、これだけでは今度はCloudFormationでエラーとなります。

```bash

Error: The CloudFormation template is invalid: Template format error: Unresolved resource dependencies [aws:username] in the Resources block of the template

```

この場合は↓のようにエスケープする必要があります。

- `${aws:username}` -> `${!aws:username}`

以上で無事、IAM ポリシーエレメントが使用可能となりました。
2重に対応しないといけないのは厄介ですね。Serverless側でどうにかできないかという[issueも立っていますね](https://github.com/serverless/serverless/issues/3565)。

# 環境

- Serverless: 1.76.1
MySQLでユーザーを作成するときにパスワードを簡単なものに設定できるようにする

###MySQLのバージョン確認
```
mysql> select version();
+-----------+
| version() |
+-----------+
| 8.0.19    |
+-----------+
```


###ユーザーを追加する

```
mysql> create user dbuser01@localhost identified by '6AVAkig2';
ERROR 1819 (HY000): Your password does not satisfy the current policy requirements
```
`password : 6AVAkig2`

ランダムに選んだ文字列。
かつ
`数字、大文字、小文字`が入っていますが、エラーになります。

```
mysql> set global validate_password.policy=Low;
```
これにすれば文字数だけ満たせば大丈夫。
8文字以上なら小文字だけでも大丈夫なはず。

###デフォルト値は変更できない
いったんMySQLを終了してからもう一回管理者で入ってユーザーを作成しようとしても、

alidate_password.policyの値がMidiumに戻って、特殊文字も入れないといけない設定に戻っちゃう。困っちゃう。
JS初心者がKintoneカスタマイズ行うために その3

###こんばんは！「りょうちん」です~
####Kintoneだいぶ分かるようなってきました！

・イベント・ハンドラー：イベントはjsが発火するタイミング。ハンドラーはそのイベントで行う処理。
・return event：ハンドラーがrecordオブジェクトの値を変更。eventをreturnすることで反映。
・Kintone JavaScript API：Kintoneをjsでカスタマイズする際に便利な関数群。
・Kintone REST API：Kintoneアプリのレコード操作(CRUD処理)が行える関数群。
・Kintone JavaScript APIのKintone.api.url()でREST APIが多少容易に扱える。
・Promise：処理の順序が把握しやすくなるためレコードの操作が扱いやすい(同期的処理)、
　コールバック関数の使用と比較して簡素に記述できる。

後は[「素人が始めたkintoneカスタマイズ （ドシキンカス）〜初心者がはじめの一歩を踏み出すための虎の巻〜」](https://pj.asunote.jp/first_step_of_kintone_customise/)

上記のブログはKintoneカスタマイズの全容をざっと把握できるのでいいかもです。

明日からまた1週間頑張りましょう！
競技プログラミング練習記 No.56【ABC107練習】

初回 -> [はじめに](https://qiita.com/easychoco/items/a9ae28aca97cfe47091f)

[ABC107](https://atcoder.jp/contests/abc107)を解きました。
3完です！
D問題は解けていません。

|問題|時間|アルゴリズム|実行時間
|:-:|:-:|:-:|:-:|
| A |  1min |-| 8ms|
| B | 22min |-| 5ms|
| C | 34min |-| 24ms|

# まとめ
先にまとめを載せます。これ自体は最後に書いてます。

A問題のような、足すと同じ数値になる構造の考え方はいろんな場面で使います。
C問題のインデックス調整にもこの考え方を使いました。

## A - 	Train
```c++
  int n, i;
  cin >> n >> i;
  cout << n - i + 1;
```
前から`i`両目は後ろから`n - i + 1`両目ですね。
`i`と`n - i + 1`を足すと`n + 1`になることを意識すると考えやすいです。

例えば、4両編成の時、前から1両目と後ろから4両目は同じ車両ですね。
このとき、`1 + 4 = 5`になります。
前から2両目と後ろから3両目は同じ車両で、このときも`2 + 3 = 5`になります。
この`5`という数は4両編成の`4`に`1`を足した数です。

これを意識すると考えやすくなります。

## B - 	Grid Compression
``` c++
  int h, w;
  cin >> h >> w;
  vector<string> a(h);
  for(int i = 0; i < h; ++i)
  {
    cin >> a[i];
  }

  vector<bool> col(w, false);
  vector<bool> row(h, false);
  for(int i = 0; i < h; ++i)
  {
    for(int j = 0; j < w; ++j)
    {
      if (a[i][j] == '#')
      {
        row[i] = true;
        col[j] = true;
      }
    }
  }

  for(int i = 0; i < h; ++i)
  {
    if (!row[i]) continue;
    for(int j = 0; j < w; ++j)
    {
      if (col[j]) cout << a[i][j];
    }
    cout << endl;
  }
```

行と列ごとに別の配列を用意して、黒いマスが含まれているときにチェックします。
そのあとの出力時にマスごとに見て、行と列の両方にチェックがあれば出力するようにすれば答えになります。

## C - Candles

``` c++
  ll n, k, x;
  cin >> n >> k;
  vector<ll> x_posi;
  vector<ll> x_nega;
  for(int i = 0; i < n; ++i)
  {
    cin >> x;
    (x < 0 ? x_nega : x_posi).emplace_back(x);
  }
  reverse(x_nega.begin(), x_nega.end());

  ll ans = 1LL << 60;
  int ps = x_posi.size();
  int ns = x_nega.size();
  for(int i = 0; i <= k; ++i)
  {
    int pi = i - 1;
    int ni = k - i - 1;
    if (ps <= pi) continue;
    if (ns <= ni) continue;

    ll cost = 0;
    if (ni < 0) cost = x_posi[pi]; 
    else if (pi < 0) cost = -x_nega[ni];
    else cost = min(x_posi[pi] * 2 - x_nega[ni], x_posi[pi] - x_nega[ni] * 2);

    ans = min(ans, cost);
  }
  cout << ans;
```

入力はソート済みでもらえますね。
入力数列上で連続する長さ`K`の範囲を選び、その範囲内のろうそくに火をつける操作を考えます。
このにかかる時間を求めて、全体で最も小さくなるものが正解です。

また、開始地点は`0`で固定なので、`0`から見て大きい数と小さい数で分けました。
つまり、非負の数と負の数で分けました。そうするとかかる時間を求めやすくなります。

非負の数から`i`個選び、負の数から`k - i`個選び、かかる時間を求めて最小化しました。
配列のインデックスは0から始まるので、調整が少し複雑でした。

かかる時間を計算するときには負数を正数に直すのですが、負数のまま扱ったことが原因で1WAしました。
あらかじめ正数になおしておけばよかったかもしれません。


以上です。ありがとうございました。
localhost の Tomcat9 (Java11) で必要なポート 8080 はすでに使用中です

#注意:Macユーザーです
Eclipse内でTomcatを使用し、jspやサーブレットを接続するとき、

不用意に開きすぎたサーバーのポート番号の競合などにより、

任意のポート番号へ接続できない時がある。

#解決法
まずは、ターミナルでオープンされているファイルのネットワークソケットを表示させる。


```
$ Isof -i:8080
```
`Isof`コマンド -> オープンしているファイルを一覧表示させる
`-i`オプション -> ネットワークソケットを対象とする

```
COMMAND   PID      USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
     ⚪️⚪️⚪️⚪️⚪️
```
PIDの下に表示された数字を確認する。


`kill`コマンドで実行中のプロセスを終了させる。

```
$ kill ⚪️⚪️⚪️⚪️⚪️
```

サーバーを再起動させて、接続完了！！
ポートフォリオ作成

Qiitaの更新は初めてですが、これから自分で得た知識や工夫を書いていきたいと思います。

僕の一番最初の記事は、今現在作成しているRailsのポートフォリオについて。
これまでにプログラミングスクールで学んだことの復習と自分への訓練として、作成しています。

◎ポートフォリオ概要
■主な機能
ブログ投稿、チャット、写真投稿

■細かな機能
ユーザー登録、ログイン、ログアウト

■今後実装予定
個人の投稿一覧のビュー修正、フォロー機能、コメント機能

■ターゲット
２歳児程度からそれ以降のお子様を持つママさん

■ターゲット選定理由
乳児期に比べ若干の時間が取れるが、居住地近辺のリアルな環境においてのママ友界隈などではうまくいかない場合があるので、ネット上に”ママ”という同じ環境下にあるユーザー同士の交流の場を設けたいと考えたため。

■開発した理由
前職で女性向けコンテンツを多く担当したため、女性をターゲットとしたアプリケーション開発が現状自分に向いていると思ったため。また、自分自身が母子家庭で育ったため、母親に絞ったコンテンツ開発をしたいと考えたため。

■工夫点
・ビュー面
フロントから主な３つの機能に遷移できるように実装。その際に、ビュー同士が影響しないように、機能ごとにレイアウトを変更するなどして実装。
また、ターゲットを女性にしているため、なるべく可愛らしい雰囲気の色使いやデザイン性を心がけました。
・ルーティング面
あまりストレスがかからないよう、クリックする場所を少なくしました。基本的にそれぞれの機能を使える箇所とフロントを行き来できる程度にしています。
・機能面
子育てでの気苦労や頑張りを”共感”し合えたり、子育てに役立つ情報を”共有”し合えるようにして、女性が大事にする相互のコミュニケーション性を強くしてます。主な３つの機能の目的は以下です。
①ブログ投稿においては、子供の成長記録やその日の出来事、思い出を共有できたり、「頑張っているよね」ということを共感し合えるようなきっかけをもたらすと考えています。
②チャット機能では、グループ作成をして話したいユーザー同士で話せるようにし、コミュニティを気付けるようにしています。ネットならではの”気兼ねしないやりとり”を実現できることを目的にしています。
③写真投稿機能は、機能ページが”Idea Room"としており、お子様の写真を載せるというよりは、子育てで工夫したことや役立った商品、コンテンツ、情報などを共有できるようにする目的を持たせています。
※敢えて、ブログ機能にも写真投稿機能をつけていないのは、いくらユーザーを女性限定にしても、お子様のお顔をそのままアップロードすると、セキュリティ面であまり望ましいと言えないため省いています。

以上、近々でデプロイを行いますが、デプロイ後も追加付与したいことや機能としてあった方が望ましいであろうものは追加していきたいと思います。

まだまだ、未熟者の大したことのないアプリですが、頑張っていきます。