OmniAICreator/Qiita-1.07M huggingface dataset:
UnityでStartCoroutineを実行した際のNullReferenceException対策

UnityでStartCoroutineメソッドを実行した際に、なぜかNullReferenceExceptionのエラーが発生して2時間ほどハマったので、その解決策をメモしておきます。

結論から言うと、Update()メソッド以外のメソッドからコルーチン処理を実行する（StartCoroutineメソッドを実行する）場合は、そのコルーチン処理を呼び出すためのオブジェクトをnewで直接生成してはならないようです。

StartCoroutineの使い方について解説している他の参考サイトなどでは、Update()メソッド内からStartCoroutineを実行している事例しか見当たらなかったため、今回のように他のメソッドから実行したい場合はどうすればよいのか悩みました。

まず、Updateメソッド内からコルーチン処理を呼び出す事例を載せておきます。

```EventManager.cs
public class EventManager : MonoBehaviour
{
    void Update()
    {
        //Updateメソッド内からコルーチン呼び出し（この場合は正常に実行できる）
        StartCoroutine("Event");
    }

    //コルーチン関数"Event"を定義
    IEnumerator Event()
    {
        Debug.Log("あいうえお");

        //マウス左クリックを待つ処理
        yield return new WaitUntil(() => Input.GetMouseButtonDown(0));

        Debug.Log("かきくけこ");
    }
}
```
出力結果を確認すると、正常に実行できていました。

次に、エラーが発生した事例を載せておきます。

```EventManager.cs
public class EventManager : MonoBehaviour
{
    public static void CallEvent(string eventName)
    {
        //EventManager のオブジェクトをnewで生成
        EventManager eventManager = new EventManager();
        //コルーチン呼び出し（この場合はエラーが発生する）
        eventManager.StartCoroutine("Event");
    }

    //コルーチン関数"Event"を定義
    IEnumerator Event()
    {
        Debug.Log("あいうえお");

        //マウス左クリックを待つ処理
        yield return new WaitUntil(() => Input.GetMouseButtonDown(0));

        Debug.Log("かきくけこ");
    }
}
```
今回は、他のクラスからCallEventメソッドを呼び出して"Event"というコルーチン処理を実行しようとしています。しかし、実行結果はNullReferenceExceptionが発生してしまいました。
MonoBehaviour（及びそれを継承したEventManagerクラス）をnewで直接生成しているのがエラーの原因です。

ではどうするのかと言うと、newではなくAddComponentメソッドを使ってオブジェクトを生成します。そのサンプルを載せておきます。

```EventManager.cs
public class EventManager : MonoBehaviour
{
    public static void CallEvent(string eventName)
    {
        //AddComponentでオブジェクトを生成
        EventManager eventManager = (new GameObject("適当なオブジェクト名")).AddComponent<EventManager>();
        //コルーチン呼び出し（この場合は正常に実行できる）
        eventManager.StartCoroutine("Event");
    }

    //コルーチン関数"Event"を定義
    IEnumerator Event()
    {
        Debug.Log("あいうえお");

        //マウス左クリックを待つ処理
        yield return new WaitUntil(() => Input.GetMouseButtonDown(0));

        Debug.Log("かきくけこ");
    }
}
```
はい、これでエラーなく正常に実行できました。
画像アップロードにS3を使用メモ

#herokuでデプロイした際にS3を画像アップローダー先として指定する場合メモ
Rails5.2.3
carrierwave (2.1.0)

carrierwaveで画像をアップロードできる様になっている
またS3という前提で進めます。

外部のストレージを選択しアップロードするのを補助してくれる
fog-awsというgemを追加してbundle installする。

```ruby:Gemfile
gem 'fog-aws'
```

アップロードにfogを使用するための設定を行う。
storage :fileをコメントアウトし
storage :fogのコメントアウトを外す。

```ruby:app/uploaders/image_uploader.rb
# storage :file
  storage :fog
```

fogのアップロード先の設定をする
/config/initializers直下に、carrierwave.rbというファイルを作成し、
下記のコードをそのままコピペする。

```ruby:/config/initializers/carrierwave.rb
require 'carrierwave/storage/abstract'
require 'carrierwave/storage/file'
require 'carrierwave/storage/fog'

CarrierWave.configure do |config|
  config.storage = :fog
  config.fog_provider = 'fog/aws'
  config.fog_credentials = {
    provider: 'AWS',
    aws_access_key_id: Rails.application.credentials.aws[:access_key_id],
    aws_secret_access_key: Rails.application.credentials.aws[:secret_access_key],
    region: 'ap-northeast-1' #アジアパシフィック（東京）を表している
  }

  config.fog_directory  = 'ここにバケット名を入れる'
  config.asset_host = 'https://s3-ap-northeast-1.amazonaws.com/ここにバケット名を入れる'
end
```

credentials.yml.encの内容は暗号化されてるため、エディタなどで直接ファイルを開いて編集することはできません。

そこでviを利用して環境変数：EDITORにviを指定してrails credentials:editコマンドを実行します。

```ruby:ターミナル
$ EDITOR="vi" bin/rails credentials:edit
```

上記のコマンドで出てきたcredentials.yml.encの内容に対して、
上３行のコメントアウトを外しインデントを整え、
access_key_idと、
secret_access_keyをそれぞれ入力します。
そしてescでインザートモードを終えて:wqで保存します。


```ruby:credentials.yml.enc
aws:
  access_key_id: 123
  secret_access_key: 345

# Used as the base secret for all MessageVerifiers in Rails, including the one protecting cookies.
secret_key_base: 8be8e637d755f79c799048bed8be0c...
```

本番環境ではmaster keyの指定漏れを防ぐためにconfig/environments/production.rbでconfig.require_master_key = trueを有効化することが推奨されてるようですのでコメントアウトを外す。

```ruby:config/environments/production.rb
config.require_master_key = true
```

credentials.yml.enc を使っている場合は、以下のコマンドで master.key を heroku の環境変数としてセット

```ruby:ターミナル
$ heroku config:set RAILS_MASTER_KEY=`cat config/master.key`
```

タイムゾーンを変更するため、
config/application.rb に以下を追記

```ruby:application.rb
config.time_zone = "Tokyo"
config.active_record.default_timezone = :local
```

以上で設定は完了し、あとはherokuでの作業となります。

```ruby:ターミナル
$ heroku login
$ git push heroku master
$ heroku open
```
Do We Need Zero Training Loss After Achieving Zero Training Error?

https://arxiv.org/pdf/2002.08709.pdf

Takashi Ishida, Ikko Yamane,  Tomoya Sakai, Gang Niu, Masashi Sugiyama

杉山先生の理研AIP。


### 概要
- パラメータの数が十分大きいネットワークでは訓練データを完全に記憶し、訓練エラーが0になった後もロスが小さくなっていく。
- テストエラーは逆に上昇する。いわゆる過学習。
- 訓練ロスを十分小さい値(flooding level)周辺に維持するように学習すると過学習を抑制できる。
- 具体的にはflooding levelより低くなったら gradient descent でなく ascent する。1行で実装できる。
- 副作用として性能も向上した。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412142/db93857b-5d99-e118-14e8-e1e03dcd1ece.png)

### 評価
合成データと、MNISTなどのベンチマークで評価。early stopping無しでも安定して性能がでている。early stoppingを行った場合よりも多くの場合性能が向上している。
LinuxをDiscord Botで操作してみた

#初めに

この記事は僕がPythonで作ったDiscord Botを簡単に共有できればと思い書いたものです
あまり詳しくは書きませんが誰かの役に立てれば幸いです

#このBotで出来ること
Discord からLinuxを操作できます
「ls」コマンドや 「less」コマンドなど基本的に何でも使えます。
ただvimやsudoなどユーザーが追加で入力するものなどは使えません(コード追加すれば可能だと思われ)
二千文字の制限がDiscordにあるのでそれ以上のものは送信できません。
あとエラー処理してないのでvimなど開こうとするとbotが飛びます。

#実行環境
Debian 10
Python 3.7.3

#コード
```python

import subprocess

# インストールした discord.py を読み込む
import discord

# 自分のBotのアクセストークンに置き換えてください
TOKEN = 'ボットのトークン'

# 接続に必要なオブジェクトを生成
client = discord.Client()

# 起動時に動作する処理
@client.event
async def on_ready():
    # 起動したらターミナルにログイン通知が表示される
    print('ログインしました')

async def job(message):
    await message.channel.send('そろそろ寝ましょう！')

# メッセージ受信時に動作する処理
@client.event
async def on_message(message):
    # メッセージ送信者がBotだった場合は無視する
    if message.author.bot:
        return
    # 「/neko」と発言したら「にゃーん」が返る処理

    if message.content == '/neko':
        await message.channel.send('にゃーん')

    if message.content == '/konn':
        await message.channel.send("こん")

    if message.author.id == DiscordのユーザーID:
        messStr = str(message.content)#ユーザーのメッセージを取得
        messList = messStr.split(" ")#ユーザーのメッセージをスペース区切りで配列にする

        res = subprocess.check_output(messList)#そのコマンドを実行、出力をresに代入
        res = res.decode("utf-8")#resをutf-8ででデコード
        await message.channel.send(res)#メッセージを送信
    else:
        await message.channel.send("権限がありません")

client.run(TOKEN)
```

#ユーザーIDについて
途中で出てきたユーザーIDというのはDiscordで確認できます。
そのIDを使ってコマンドを実行してよいユーザーなのかを判定しています。

###IDを表示する方法
ユーザー設定→テーマ→開発者モード をオンにします
そしてDiscordのユーザーを右クリックしてIDをコピーから参照できます。
【Day73】積み上げ日記

##学習内容
■JavaScriptの役割
・レスポンスをJSONにすることで、必要な情報だけをレンダリングして、表示することができる。

■Webページに表示する流れ
・API→JSONデータ→JSONデータをDOM操作してパースする→JSONをHTMLに変換→Webページ

■オブジェクトリテラル
・{ } の中で宣言したもの
・オブジェクトリテラルは変数に代入可能

■高階関数、コールバック関数

■匿名関数

■forEach（JavaScript標準メソッド）


##学習ポイント
■関数は機能ごとに小分けにする
■関数の中に関数を入れたい場合（機能の中に機能を入れたい）、高階関数を使う。
■confirm()、alert()の違い（参考記事にて）
■forEachは配列と一緒に使う

##参考記事
■confirm()、alert()の違い
https://uxmilk.jp/14032
SlackBOT Node.js axios await asyncを使ったPOSTリクエスト

# はじめに
最近のJavaScriptでGET,POSTリクエストするには``axios``を使うのがイケてるらしいが、非同期の処理になるためコールバック地獄が起こる。それを解決するために`async` `await`を使ったPOSTリクエストのサンプルコード(個人的なメモ）

SlackBOTに指定のチャンネルにテキストを投稿させるためのコードです。
``カスタムインテグレーションではなく、「App」の方です``
基本的なPOSTリクエストなので応用は効くと思います

#コード
```javascript:node.js
const axios = require('axios');//npm install axios　してね

//Slackにメッセージを送る
//引数1(文字列) : チャンネル名 (例: #勤怠履歴)
//引数2(文字列) : 送りたいメッセージ
const postSlack = async (ch,msg) =>{
	console.log('postSlack...')
	const req_url = 'https://slack.com/api/chat.postMessage'
	console.log('req_url:' + req_url);
        
    //これを使わずにオブジェクトで送るとJSONの形式ガーーーー！！みたいなErrorがでます
	let params = new URLSearchParams();

	params.append('token','アクセストークン') //正式なものをいれてください
	params.append('channel',ch)
	params.append('text',msg)

	const res = await axios.post(req_url, params)

	return res
}
```

## 呼び出し方
```javascript:index.js
const test = async () => {
 const result = await postSlack('#general','こんにちはせかい')
 console.log('result: ' + JSON.stringify(result.data))
}
```

## 結果
<img width="250" alt="スクリーンショット 2020-05-29 午後6.38.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252959/7fa12164-fe62-f463-e5d4-ca997e42d63e.png">

うまく動かない場合は
SlackAppの管理画面から「OAuth & Permissions」→から以下の権限を与えてください（不要な権限があるとは思いますが、個人的な設定です



``channels:manage``
``channels:read``
``chat:write``
``chat:write.customize``
``chat:write.public``


## 遭遇したエラー
``new URLSearchParams()``を使わないときに遭遇したエラー

```
(node:73150) UnhandledPromiseRejectionWarning: TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'ClientRequest'
    |     property 'socket' -> object with constructor 'TLSSocket'
    --- property '_httpMessage' closes the circle
    at JSON.stringify (<anonymous>)
    at test (/Users/merarli/WebstormProjects/hogehoge/index.js:1143:32)
    at processTicksAndRejections (internal/process/task_queues.js:85:5)
(node:73150) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:73150) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

```
JavaScript でのオブジェクト作り方


# JavaScriptのオブジェクトは、二種類の方法で作成することが出来る

## オブジェクトリテラルでの生成  
 

```ruby:javascript

var obj1 = {  
   val: 'hoge',  
   func: function(){  
     console.log('fuga');  
   } 
};
```

## new演算子での生成  

```ruby:javascript

var obj2 = new Object(); 
obj2.val = 'hoge'; 
obj2.func = function() {  
   console.log('fuga'); 
};
```

> 一般的にはオブジェクトリテラルを使う方法が好れる。 変数名に変更があった場合に一箇所だけ直せば済むことや、プロパティやメソッドの宣言が固まっていて見やすかったりするためです。

#ドット演算子によるプロパティアクセス

```ruby:javascript
var obj = {  
   name : 'hoge' 
}; 


console.log(obj.name); // hoge
```

> ドット演算子でのプロパティアクセスでは、プロパティ名が変数の命名規則に則っている必要があるため、数字から始まっていたり使用できない記号が含まれている名称を使用した場合はエラーになります。

#コンストラクタとnew演算子
> オブジェクトのインスタンスを生成するには、コンストラクタをnew演算子で呼び出します。

```ruby:javascript
function hoge(name) {  
  this.name = name;  
  this.walk = function() {  
   console.log(this.name + 'が歩きます');  
  }; 
}  

var taro = new hoge('太郎'); 
taro.walk(); // 太郎が歩きます
```

> 注意として、newを付け忘れると、呼び出そうとした際に「未定義エラー」が発生するため要確認です。

# 独自オブジェクトの生成

> Objectは、JavaScriptの全てのオブジェクトにとって基底となる存在です。 ユーザ独自のオブジェクトを用意する場合は、Objectをインスタンス化してプロパティやメソッドを追加します。

```ruby:javascript
//Objectをインスタンス化 
var myhoge = new Object();  

//プロパティを追加 
myhoge.name = 'myObj';
  
//メソッドを追加 
myhoge.getName = function() {  
  return this.name; 
}  
//独自オブジェクトのメソッドを呼び出す 
 console.log(myhoge.getName()); // myObj

```

> Objectをインスタンス化したオブジェクトが利用できるメソッドとして、一般的に以下のようなものがあります。

## toString 
> オブジェクトの値を表す文字列を返す 

## valueOf 
> 指定されたオブジェクトのプリミティブな値を返す 

## hasOwnProperty 
> 指定したプロパティがオブジェクト自身が保持しているかどうかを返す

#まとめ
##参考
> Object について
[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object)

##すぐに実践できるサイト
[https://codepen.io/](https://codepen.io/)
React始めました。(環境構築編)

#はじめに
おはようございます。こんにちは。こんばんは。
ワタタクです。
今回から数回にかけてReact.jsを勉強していこうと思います。

**※この記事は初学者用かつ自分の勉強用で書いていきます。**
**※Macを使っての解説です。**

#ゴール
Reactを使ってアプリケーションを作れるようになる。
最終的にFirebaseを用いてのチャットボット的な物を作成する。

#React.jsとは
[公式サイト](https://ja.reactjs.org/)

- SPA(Single-Page Application) を実現する JavaScript フレームワークの一つです。
- Facebook 社によって開発され、Facebook の Web サイトでも利用されています。
- 2020年4月現在の最新バージョンは 16.13.1 です。
- JavaScript の中に直接 HTML/XML を記述する JSX という技術を利用しています。
- JavaScript は ES6 の文法である import やアロー関数を取り入れています。 

#create-react-appとは
reactの環境開発を簡単に行なってくれるもの

#環境構築
何か新しい言語を始めようとするには、最初に環境構築を行うことがほとんどの場合必要ですのでやっちゃいましょう。
自分の場合はReact.jsを触る前にVue.jsを触っているので、nodeやnpmといったものがもうすでに入っていますが、初学者向けに0からやっていきます。
まずはnode.js
<img width="517" alt="1__bash.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116696/f2e04493-f5b3-454d-6669-64fbec18b6ca.png">

あります。（バージョン情報が出ればインストールされています。）
インストールがまだの方は[こちら](https://nodejs.org/ja/download/)のインストーラーを使うことをお勧めします。

インストールが完了するとnpmも同時に使えるようになります。
##npm（Node Package Manager）とは?

- Node.jsのモジュール管理ツールです。
- フロントエンドで使用するJavascriptのパッケージ（例えば、vueといった有名なフレームワーク、gulpなどのビルドシステム等）のインストールとバージョン管理に使います。
- [公式サイト](https://www.npmjs.com/)

<img width="237" alt="1__bash_と_初めてのFirebaseを触ってみる_Authentication_.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116696/569dd808-4081-dd74-e300-0ad15bebe1f1.png">

それでは、いよいよReactアプリを作成します。
以下のコマンドを入力して下さい。

```console
$ npx create-react-app hello
```
**※helloはプロジェクト名です。**
#実行

```console
$ cd hello
$ npm start
```
<img width="1426" alt="React_App.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116696/f7650acc-89d2-fb12-17ff-7e4e23e8ce18.png">


以上。お疲れ様でした。

#サーバーアップ

```console
$ npm run build
```
できた``buildフォルダ``の中身を本番サーバに置く。


#最後に
もし、間違い等、アドバイス、ご指摘等有れば教えていただけたら幸いです
次回は基本的な書き方とかやっていきます。

最後まで読んでいただきありがとうございました。
[Twitter](https://twitter.com/watataku9)やってます。良ければチェックして見てください。:point_up::point_up::point_up:
インターネットの仕組みを復習


#ルーターとインターネットプロトコル


通信とは相手に、共通認識を与えること
多くの相手と通信ができるようにした仕組みがインターネット

ネットワークでは、物理的な接続と、論理的な道(データリンク)が必要。
データリンクの中の交通ルールがプロトコル

ネットワーク同士を繋げたのが、インターネット

しかし、このままではデータリンクが異なる
それを合わせるために機器などを全て統一するのは不可能、、、

そこで、データリンクは異なったまま、その通信を専用通信機器を通すようにしました

それがルーター

そして、今までのデータリンクも残しながら
インターネットプロトコル(IP)という全く新しいルールを追加

ルーターはIP以下(IP、データリンク)を層をみる機械

IPアドレスを割り振れば、データリンクによらずに共通で使える

データリンクではMACアドレス
IPではIPアドレスを使う
※1つのMACアドレスに対して1つ付与される

IPアドレスは管理が繁雑にならないよう、同じ管理者のネットワークごと(LAN)で
連続した末尾になっている

図解付きの解説はこちら
https://www.youtube.com/watch?v=BGfhIR4599I
WebStorm + node + dockerでデバッグ

こちらの記事の方法で、WebStormでも問題なく実施、感謝
https://qiita.com/silverbirder/items/ec6d7b61cc61d9501189

1 引数 --inspect=0.0.0.0:9229 を付けて、docker上でアプリ起動
dockerでもdocker-composeでも特に変わらず
9229ポートを開けておくのを忘れずに

2 デバッグの構成、Attach to Node.js/Chrome を構成、ポートに9229を設定

3 dockerが動いてる状態で、デバッグ実行
SoXでmp3ファイルからスペクトログラムを作成する方法

SoX（Sound eXchange）とは音声処理ユーティリティです。
soxコマンドでmp3ファイルからスペクトログラムを作成する方法を説明します。

# ffmpegでステレオのmp3をモノラルのmp3に変換

```sh
$ ffmpeg -i sound01.mp3 -ac 1 sound01-mono.mp3

# モノラルは-ac 1
# ストレオは-ac 2
```

# mp3モノラルの音源の波形
![mp3_sound01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263312/bcf7c1ea-8eb7-1c34-69c3-7d666cfc2a2f.png)

# mp3モノラルの音源からスペクトログラムを作成
```sh
$ sox sound01-mono.mp3 -n spectrogram -o sound01-mono.png
```

# スペクトログラムの作成結果の画像
![sound01-mono.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263312/5ad4e9d8-1c97-ba3a-15de-5a28bfb3780f.png)

# SoXのバージョンの確認
```shell-session
$ sox --version
sox:      SoX v
```
LambdaからSlackにメッセージを送る際のソースコードと複数回メッセージを送る際の注意点

AWSのLambda関数から、SlackのIncoming Webhooksでメッセージを送信する機会があり、少々躓いた箇所があったので備忘録として残しておきます。
Lambda関数やIncoming Webhooksは準備できている想定として、これらの作成手順は省略します。

# 環境
- macOS
- AWS Cloud9
- Node.js 12

# 実行コード
Lambda関数を1度実行する度に、Slackメッセージを1件だけ送るような場合は、以下のコードで動くと思います。
1度のLambdaで複数回メッセージを送る場合は、注意点があるので後ほど説明します。

```javascript
const env = process.env
const request = require('request');

exports.handler = function(event, context) {

    // リクエスト設定
    const options = {
                        url: env.WEB_HOOK_URL,
                        headers: {
                            'Content-type': 'application/json'
                        },
                        body: {
                            "username": "jinto",
                            "text": "Hello !!"
                        },
                        json: true
                    };

    //メッセージ送信
    request.post(options);
   
    return "success !!";
}
```


## 1度のLambdaで大量のメッセージを送る場合
２〜３件程度のメッセージであれば上記のコードをそのままfor文等で繰り返しても問題ないと思いますが、数十件〜数百件のメッセージを1度のLambdaで処理したい場合は注意が必要です。
仮に上記のコードを、

```javascript
for(let i = 0; i < 100; i++) {
    //メッセージ送信
    request.post(options);
}
```
このように100回繰り返した場合、Slackにはメッセージが数件〜数十件しか届かないと思います。自分もここで躓きました。

どうやら、requestメソッドは非同期的に処理されるので、**requestを100回実行し終わる前に、Lambda関数の実行そのものが終了してしまう**ようです。
大量のメッセージを送信したい場合には、requestをpromise化し、async〜awaitで1件ずつ止めてあげると上手く動きます。
Node.jsには、`request-promise`という便利なライブラリがあったので、こちらを使用しました。コードを以下に示します。

```javascript
const env = process.env
const requestPromise = require('request-promise');

exports.handler = async(event, context) => {

    // リクエスト設定
    const options = {
                        url: env.WEB_HOOK_URL,
                        headers: {
                            'Content-type': 'application/json'
                        },
                        body: {
                            "username": "jinto",
                            "text": "Hello !!"
                        },
                        json: true
                    };
    for(let i = 0; i < 100; i++) {
        /* 通常のrequestだと非同期的に処理されるので、
           処理が終わる前にLambda関数が閉じてしまう */
        await requestPromise.post(options); 
    }

    return "success !!";
}
```

ご参考までに。
HTML&CSS~Flexbox編~

# プログラミングの勉強日記
2020年5月29日　Progate Lv.64

###Flexbox
　CSSを使ったレイアウト方法の1つである

###`display:flex;`
　指定した要素の子要素を横並びにする
<img width="571" alt="flexbox1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/6519c4b7-6aa3-f9e2-0a3c-95b16ddc83b0.png">

```html:HTML
<ul class="list">            <!--親要素-->
  <li class="li1">item1</li> <!--横並びにしたい要素-->
  <li class="li2">item2</li> <!--横並びにしたい要素-->
  <li class="li3">item3</li> <!--横並びにしたい要素-->
  <li class="li4">item4</li> <!--横並びにしたい要素-->
</ul>                        <!--親要素-->
```
```css
.list{
  display:flex;
}
```

###`flex:auto;`
　指定した要素の幅を親要素に合わせて伸縮できる
<img width="571" alt="flexbox2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/7d6621dc-89ff-1354-78ea-e9ff58111db0.png">

```html:HTML
<ul class="list">            <!--親要素-->
  <li class="li1">item1</li> <!--横並びにしたい要素-->
  <li class="li2">item2</li> <!--横並びにしたい要素-->
  <li class="li3">item3</li> <!--横並びにしたい要素-->
  <li class="li4">item4</li> <!--横並びにしたい要素-->
</ul>                        <!--親要素-->
```
```css
.list{
  display:flex;
}
.list li{
  flex:auto;
}
```

###`flex-wrap:wrap;`
　子要素のサイズに応じて繰り返す。繰り返したい要素の親要素に指定する。折り返したい要素自身には列数に応じたwidthを指定する。
<img width="571" alt="flexbox3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/3778609a-b98d-fb89-d4a2-6807433212cf.png">


```html:HTML
<ul class="list">            <!--親要素-->
  <li class="li1">item1</li> <!--横並びにしたい要素-->
  <li class="li2">item2</li> <!--横並びにしたい要素-->
  <li class="li3">item3</li> <!--横並びにしたい要素-->
  <li class="li4">item4</li> <!--横並びにしたい要素-->
</ul>                        <!--親要素-->
```
```css
.list{
  display:flex;
  flex-wrap:wrap;
}
.list li{
  flex:auto;
  width:50%; /*2列に折り返したい場合は50%と指定する*/
}
```

###`flex-direction:column`
　子要素を上から下へ並べる。縦に並べたい要素の親要素に指定する。（下記の例では中央寄せに配置している）
<img width="571" alt="flexbox4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/69eabbc8-e911-bf70-37bb-10c26a7694da.png">


```html:HTML
<ul class="list">            <!--親要素-->
  <li class="li1">item1</li> <!--横並びにしたい要素-->
  <li class="li2">item2</li> <!--横並びにしたい要素-->
  <li class="li3">item3</li> <!--横並びにしたい要素-->
  <li class="li4">item4</li> <!--横並びにしたい要素-->
</ul>                        <!--親要素-->
```
```css
.list{
  flex-direction:column;
}
.list li{
  margin:0 auto;
  width:50%; 
}
```
TypeORM で search_path(スキーマ検索パス) を設定する

# 環境
- PostgreSQL
- TypeORM

# 目的
TypeORM でデフォルトで使う Schema を設定して、実行時に毎回指定しなくても良いようにする。

# 前提
- [TypeORM をシングルトンで使う](https://qiita.com/tktcorporation/items/e8a6d2310d548ac48671)

ここで作ったコネクション管理クラスに追記する形で実装する。

# 実装

## dbconnection.ts

```ts
import { Connection, createConnection } from 'typeorm';

export class DBConnection {
    private static con?: Connection;
    static get = async () => {
        if (!DBConnection.con) return DBConnection.create();
        if (DBConnection.con && DBConnection.con.isConnected)
            return DBConnection.con;
        return DBConnection.con.connect();
    };
    private static create = async (): Promise<Connection> => {
        DBConnection.con = await createConnection();

        // -- 追記ここから --
        await DBConnection.con.query(
            `SET search_path TO ${スキーマ名};`,
        );
        // -- 追記ここまで --

        return DBConnection.con;
    };
    static close = async () => {
        if (!DBConnection.con) return;
        if (DBConnection.con && DBConnection.con.isConnected)
            DBConnection.con.close();
        DBConnection.con = undefined;
    };
}
```

これで Schema の指定なしで SQL が書ける。
dockerでマルチドメインのWebサーバー構築（https-portal+php-apache+mysql+phpmyadmin）

# 目的
最近Dockerを自学しました、忘れないようにもの作りをしたい。
# やりたいこと
docker-composeで以下のWeb環境を作りたい。

1. Webサーバー：
 - php+apache2
 - 複数のドメイン
 - https対応
2. DBサーバー：
 - mysql
 - phpMyadmin

# Dockerの勉強
お世話になったサイトを紹介します！
１. https://knowledge.sakura.ad.jp/13265/
いつもお世話になったさくらのナレッジにある記事です。結構簡単に分かりやすく書いている文書です。
入門として最初これを読んで見た方がいいでしょう

2. http://docs.docker.jp/
Docker 公式日本語サイトです。内容が多いですが、ざっくりと読みました。内容としてはちょっと古いところがあるんですが、入門には全然問題ない。

3. https://youtu.be/RppfZGuLsmA
次はYoutubeのビデオです。インド人作られた内容です。英語はなかなか慣れていないため、Youtubeの字幕を見ながら内容を見覗きました。

# 今回の内容で使うDockerイメージ
#### SteveLTN/https-portal
https-portalはhttps のリクエストを受け取り、他のコンテナの http へ転送するリバースプロキシとして動作する nginx です。
### php:5.6-apache
Webサーバーを構築するイメージですが、php7もあるが、今回試験の目的で一旦php5.6を選択した。

#### phpmyadmin/phpmyadmin
Mysqlデータベースを管理するため、phpmyadminも入れておきたい。

# docker-compose.ymlの設計
さっそくですが、docker-compose.ymlの中身を覗きます。

```yaml


version: '3'
services:
　web:
   image: php:5.6-apache
   container_name: php56-apache-web
   volumes:
    - "./html:/var/www/html"
    - "./apache.conf:/etc/apache2/sites-enabled"
   #ports:
   # - "8080:80"
   networks:
    docker-net-001:
     aliases:
      - example-site1.jp
      - example-site2.jp
 https-portal:
  image: steveltn/https-portal
  ports:
   - 80:80
   - 443:443
  restart: always
  environment:
   STAGE: local
   DOMAINS: 'example-site1.jp -> http://example-site1.jp, example-site2.jp -> http://example-site2.jp'
  networks:
   - docker-net-001
 mysql:
   image: mysql:5.7
   container_name: php56-apache-mysql
   volumes:
    - "./.data/mysql:/var/lib/mysql"
   restart: always
   environment:
    MYSQL_ROOT_PASSWORD: rootpwd@12345
    # MYSQL_DATABASE: wordpress
    # MYSQL_USER: wordpress
    # MYSQL_PASSWORD: wdpwd@12345
   networks:
    - docker-net-001

 phpmyadmin:
   image: phpmyadmin/phpmyadmin
   container_name: php56-apache-phpmyadmin
   environment:
    - PMA_HOST=php56-apache-mysql
   ports:
    - "3333:80"
   networks:
    - docker-net-001

 
networks:
 docker-net-001:
```

## 確認ポイント
Webサーバーでは、マルチドメインを運用するので、Apacheでは、ドメイン名でバーチャルサイトを設定しています。
詳しくはapache.conf/example-site1.jp.confを参考してください。
なので、Webサーバにドメインごとにアクセスできるように設定する必要があるので、以下のようにNetworkでaliasでドメイン名ごとに定義します。

```yaml
 web:
  ....
   networks:
    docker-net-001:
     aliases:
      - example-site1.jp
      - example-site2.jp
```

これで、https-portalでドメインごとにWEBのコンテナに設定します。

```yaml
https-portal:
 ...
 environment:
   STAGE: local
   DOMAINS: 'example-site1.jp -> http://example-site1.jp, example-site2.jp -> http://example-site2.jp'
```

mysqlとphpmyadminは特に工夫せずに大体同じサンプルコードを使っていました。

# 最後
今回作ったサンプルは以下のURLから参考してください。
https://github.com/lzs0627/docker-sample01
[Jest] DIしたオブジェクトのメソッド呼び出しをテストする

こんにちは、スープです。
医療テックのスタートアップのお手伝いをしています。

DIしたオブジェクトのメソッド呼び出し方法を調べました。
わかりやすくするために、シンプルな例を示します。

```ts
export class CarFactory {
  constructor(private logger: ILogger) {}

  public create(name: string): void {
    this.logger.log(`creating ${name} car...`)
  }
}
```

このとき、コンストラクターインジェクションされた `logger` の `log` が呼ばれていることをテストしてみます。

```ts
describe('CarFactory', () => {
  test('create', () => {
    const logger = new Logger();
    const carFactory= new CarFactory(logger);

    const spy = jest.spyOn(logger, 'log');

    // オプショナルで、Logger.log の挙動を指定したい場合は mockImplementation を呼ぶ
    spy.mockImplementation(() => console.log('log is being called'));

    const carName = 'Toyota'
    carFactory.create(carName);

    // 呼び出されていることをチェック
    expect(logger.log).toHaveBeenCalled();
    // 想定通りの引数で呼び出されていることをチェック
    expect(logger.log).toHaveBeenCalledWith(`creating ${carName} car...`);

    // これでリセットできる
    spy.mockRestore();
  });
});
```

## 参考
https://jestjs.io/docs/en/jest-object#jestspyonobject-methodname
【rails】javascriptのファイル名がコントローラと同じ場合にイベント発火しなかった時の記録

javascriptのイベントが発火しない。

```ruby:app/assets/javascripts/users.js

$(function(){
  $("#user-search-field").on("keyup", function() {
    console.log("OK");
  });
});
```

jsのファイル名を変えてみた。

```ruby:app/assets/javascripts/test.js

$(function(){
  $("#user-search-field").on("keyup", function() {
    console.log("OK");
  });
});
```

イベント発火した。

いろいろなファイル名を試した。

○　test.js
○　ttt.js
○　user.js
×　users.js
×　groups.js
○　group.js

コントローラと同じファイル名だけダメ。

よくみたら次のようなファイルがあることに気付いた。

app/assets/javascripts/...
 groups.coffee
 users.coffee

coffee scriptの影響を疑い、coffeeファイルを削除すると、イベント発火するようになった。

もう一回、railsを再起動するとエラー。

```
LoadError: cannot load such file -- coffee_script 
```

cofee-railsをuninstall

```ruby:Gemfile
# gem 'coffee-rails', '~> 4.2'
```

```console:terminal
bundle install
```

```console:terminal
rails tmp:cache:clear
```

解決！

### 参考
https://qiita.com/yakimeron/items/7945a1350bd4b8c2438b
ESLintのルールを一部警告対象外にする

- コードコメントを使って一部のみを警告対象から除外する方法です
  - [パターン1：「この行だけ！このルールだけ!特別扱いして無視したい！」](#パターン1この行だけこのルールだけ特別扱いして無視したい)
  - [パターン2：「このファイル全体的に、このルール無視したい！」](#パターン2このファイル全体的にこのルール無視したい)



---

## パターン1：「この行だけ！このルールだけ!特別扱いして無視したい！」
#### 記法
ある特定のルールを 特定の箇所のみで許容したいときは 
許容したい行の直前にこのフォーマットでコメントを書くと、`[rule-name]`に記載したルールだけが無視されます。

```
  // eslint-disable-next-line [rule-name]
```


#### 例えば

ESLintには`==`での比較を禁止し、`===`を使うよう促すルール「eqeqeq」というものがあります。
eqeqeqルールを有効にしている場合、以下のコードでは2箇所で警告が出ます。


```javascript.js
  const target = 1;
  if ('2' == target) { //だめ
    return;
  } else if ('3' == target) { //だめ
    return;
  }
```


ここに`eslint-disable-next-line`のコメントをつけると

```javascript.js
  const target = 1;
  if ('2' == target) {
    return;
  // eslint-disable-next-line eqeqeq
  } else if ('3' == target) {
    return;
  }
```

5行目の`'3' == target`は無視されます。







## パターン2：「このファイル全体的に、このルール無視したい！」

#### 記法

このフォーマットでコメントを書くと、`[rule-name]`に記載したルールだけが無視されます。
`0`はoffを意味します。
ファイル内のどこに書いても、全行に適用されます。

```
/* eslint [rule-name]: 0 */
```


#### 例えば


こうすると2箇所とも無視されます。


```javascript.js
  /* eslint eqeqeq: 0 */


  const target = 1;
  if ('2' == target) {
    return;
  } else if ('3' == target) {
    return;
  }
```
Ruby 複数の配列を結合する

# はじめに
配列は要素に別の配列を持つことができるので、

```ruby
[1,2,3,[4,5,6],7,8,9]
とか
[[1,2,3],[4,5,6],[7,8,9]]
```
みたいな形の配列を作ることができます。
元々別々の配列を上記のように一つの配列にする場合、配列を結合・追加するメソッドや演算子はたくさんあります。

- `push`
- `<<`
- `+`
- `concat`
- `unshift`

ですが、色々使っていたら混乱してきました。
しかも使い方が少しずつ違うようですのでいくつか試してみましたのでこちらにまとめます。

## 1. `push`メソッド

pushメソッドは配列の最後尾に要素の一つとして指定された値を追加します。

```ruby
a = [1,2,3]
b = [4,5,6],[7,8,9]
c = [10,11,12],[13,14,15]

a.push(b)
=> [1, 2, 3, [[4, 5, 6], [7, 8, 9]]]
b.push(a)
=> [[4, 5, 6], [7, 8, 9], [1, 2, 3]]
b.push(c)
=> [[4, 5, 6], [7, 8, 9], [[10, 11, 12], [13, 14, 15]]]
```

追加する配列が複数であってもレシーバーの配列の**要素一つ分**になるようです。
なので`b = [4,5,6],[7,8,9]`は`[[4,5,6],[7,8,9]]`として最後尾に追加されています。

また、`push`メソッドは破壊的メソッドです。レシーバーは値が変更されます。

```ruby
a.push(b)
=> [1, 2, 3, [[4, 5, 6], [7, 8, 9]]]

a
=> [1, 2, 3, [[4, 5, 6], [7, 8, 9]]]
```

## 2. `<<`演算子
`<<`演算子は`push`メソッドと同じ動作のようです。

```ruby
a = [1,2,3]
b = [4,5,6],[7,8,9]
c = [10,11,12],[13,14,15]

a << b
=> [1, 2, 3, [[4, 5, 6], [7, 8, 9]]]
b << a
=> [[4, 5, 6], [7, 8, 9], [1, 2, 3]]
b << c
=> [[4, 5, 6], [7, 8, 9], [[10, 11, 12], [13, 14, 15]]]
```
同じですね！
破壊的メソッドであるという点も同じです。

```ruby
a << b
=> [1, 2, 3, [[4, 5, 6], [7, 8, 9]]]

a
=> [1, 2, 3, [[4, 5, 6], [7, 8, 9]]]
```

## 3. `+` 演算子
+演算子は追加する配列の要素を一つずつ追加します。

```ruby
a = [1,2,3]
b = [4,5,6],[7,8,9]
c = [10,11,12],[13,14,15]
d = [-1,-2,-3]

a + b
=> [1, 2, 3, [4, 5, 6], [7, 8, 9]]
b + a
=> [[4, 5, 6], [7, 8, 9], 1, 2, 3]
b + c
=> [[4, 5, 6], [7, 8, 9], [10, 11, 12], [13, 14, 15]]
a + d
=> [1, 2, 3, -1, -2, -3]
```
`a`の配列では要素は数値一つ一つですので、値が最後尾に追加されていきます。
`b`の配列では要素は配列一つ一つですので、配列のまま最後尾に追加されていきます。

```ruby
[[1, 2, 3], [4, 5, 6], [7, 8, 9]]
```
としたい場合には

```ruby
[a] + b
=> [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
```
というように`a`自体を配列の要素としてあげれば良さそうです。

`+`演算子は値に変更を加えません。

```ruby
a + b
=> [1, 2, 3, [4, 5, 6], [7, 8, 9]]

a
=> [1, 2, 3]
```
## 4.`concat`メソッド
`concat`メソッドは`+`演算子とほとんど同じ動作をします。

```ruby
a = [1,2,3]
b = [4,5,6],[7,8,9]
c = [10,11,12],[13,14,15]
d = [-1,-2,-3]

a.concat(b)
=> [1, 2, 3, [4, 5, 6], [7, 8, 9]]
b.concat(a)
=> [[4, 5, 6], [7, 8, 9], 1, 2, 3]
b.concat(c)
=> [[4, 5, 6], [7, 8, 9], [10, 11, 12], [13, 14, 15]]
a.concat(d)
=> [1, 2, 3, -1, -2, -3]
```
同じです。

```ruby
[a].concat(b)
=> [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
```
配列の要素として扱う方法もこちらでも有効です。

ただし、`concat`メソッドは破壊的メソッドです。

```ruby
a.concat(b)
=> [1, 2, 3, [4, 5, 6], [7, 8, 9]]

a
=> [1, 2, 3, [4, 5, 6], [7, 8, 9]]
```
ここが`+`演算子との違いですね。

## おまけ.`unshift`メソッド
`unshift`メソッドは`push`メソッドによく似ています。

- `push`メソッドは**最後尾**に追加します。
- `unshift`メソッドは**先頭**に追加します。

```ruby
[[1, 2, 3], [4, 5, 6], [7, 8, 9]]
```
この形を作りたい場合`+`演算子等でのやり方を載せましたが、`unshift`メソッドを使っても実現できます。

```ruby
a = [1,2,3]
b = [4,5,6],[7,8,9]

b.unshift(a)
=> [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
```

# さいごに
配列を配列のまま結合する方法をまとめた記事を見つけられなかったので、自分でまとめてみました。
間違い等ありましたら教えてください。
構成図をコード管理できるDiagram as Code(Diagrams)を試してみた

# Diagram as Code(Diagrams)を試す

https://diagrams.mingrammer.com/

普段、構成図はCacooなどのオーサリングツールを利用していますが、
Pythonコードで構成図を描画できるというツールを使ってどこまで書けるか試してみました。

## 結論、所感

- シンプルに書けるので謳われてる通り、新しいシステムのプロトタイプ化が素早くできるのがよい
- 学習コストも低く、Pythonに慣れてさえいればすぐ書き始められる
- フォントサイズの変更属性はあったが、注釈とか書く方法がわからなかった

## 環境について

- macOS Catalina
- Python 3.6.8

## 動作要件

- Python 3.6 以上
- Graphviz が必要

## 事前準備

新しく仮想環境を作りその中にパッケージをインストールしていきます。
この手順は任意です。

```bash
python -m venv ~/envs/diagrams
source ~/envs/diagrams/bin/activate
```

## Installation

https://diagrams.mingrammer.com/docs/getting-started/installation

```bash
# Homebrewでインストール
brew install graphviz
# pipでインストール
pip install diagrams
```

## 例題

とりあえず例題を使って出力してみました。

```python
from diagrams import Diagram
from diagrams.aws.compute import EC2
from diagrams.aws.database import RDS
from diagrams.aws.network import ELB

with Diagram("Web Service", show=False):
    ELB("lb") >> EC2("web") >> RDS("db")
```

```bash
python diagram.py
2020-05-29 13:50:05.901 +[__NSCFConstantString length]: unrecognized selector sent to class 0x
2020-05-29 13:50:05.905 *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '+[__NSCFConstantString length]: unrecognized selector sent to class 0x'
```

早速、エラーに遭遇しました。
まったく原因がわからず、issueなど漁りながらとりあえず元々インストール済みだったgraphvizをアップグレードすることにしました。

```bash
brew upgrade graphviz
```

バージョンを 2.40.1 -> 2.44.0 にアップグレードできました。

```bash
python diagram.py
```

無事出力できました。

## お試し構成

```python
from diagrams import Cluster, Diagram
from diagrams.aws.compute import EC2, ElasticBeanstalk
from diagrams.aws.database import RDS
from diagrams.aws.network import ELB, Route53
from diagrams.onprem.client import Client

graph_attr = {
}

def draw():
    with Diagram("web_service", show=False, graph_attr=graph_attr, direction="TB"):
        route53 = Route53('route53')
        client = Client('client')

        client >> route53

        with Cluster("ElasticBeanstalk"):
            with Cluster("WEB"):

                with Cluster("Subnet1"):
                    web1 = EC2("web")
                    lb1 = ELB("lb1")
                    lb1 >> web1

                with Cluster("Subnet2"):
                    web2 = EC2("web")
                    lb2 = ELB("lb2")
                    lb2 >> web2

                route53 - [lb1, lb2]

            with Cluster("DB"):
                db_master = RDS("master")

                with Cluster("Subnet3"):
                    rds1 = RDS("slave1")

                with Cluster("Subnet4"):
                    rds2 = RDS("slave2")

                db_master - [rds1, rds2]

                [web1, web2] >> db_master

if __name__ == '__main__':
    draw()
```

## 出力イメージ

![web_service.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228453/23aacc76-6555-3d95-ccbd-c6d4c3792f68.png)
VoiceText Web APIでWindowsで利用すると音声ファイルが開けない場合

## 環境
Windows10

## 起こったこと
Windowsではデフォルトではcurlが入っていなかったのでわざわざ入れるのもあれかなって思ったからGit bashを開いてcurlを使って
VoiceText Web APIをマニュアル通りに叩いたら音声ファイルはちゃんとダウンロードできたが、実際に開いてみろと開けない。

ファイルを開くと、

```
ファイルを再生できません。このアイテムのファイル形式がサポートされていないか、ファイル拡張子が正しくないか、ファイルが破損している可能性があります。
```
って表示される。

ウーン...ウーン...ファ！？ウーン...

##解決方法
ん？？OSの問題か？って思って自分が持ってるサーバー(linux系)を使ってAPI叩いてみたら無事に再生された。

全く同じコマンドでAPI叩いてんのになんでWindowsの時だけファイルが破損しているかで再生できないのか分からんけど、開発している中でWindowsサーバー使う人あんまいないと思うし、とりあえずCentOSは問題なかったので、ちょっと試しにWindowsで叩いたら再生できなかった人は素直に他のos使えばいける

Windowsのときだけできない理由は知らん(王者の風格)
slickでレスポンシブ覚書

- [slick \- the last carousel you'll ever need](https://kenwheeler.github.io/slick/)

# ①通常のSPもPCもスライドさせる、設定だけ変える
```js
    $ele.slick({
      centerMode: true,
      slidesToShow: 1,
      variableWidth: true,
      infinite: true,
      responsive: [
        {
          breakpoint: 768,
          settings: {
            dots: true
          }
        }
      ]
    });
```

# ②SPのみスライド
slickの機能でできる

- [スマホのときはslickを無効にする](https://shinobu.tumblr.com/post/161049739080/%E3%82%B9%E3%83%9E%E3%83%9B%E3%81%AE%E3%81%A8%E3%81%8D%E3%81%AFslick%E3%82%92%E7%84%A1%E5%8A%B9%E3%81%AB%E3%81%99%E3%82%8B)

# ③PCのみスライド
これが厄介

- [slick\.jsを使用したスライダをスマホでは適用させてPCでは静止画表示にする方法 \| ジーニアスブログ – WEB制作会社ジーニアスウェブのお役立ちブログ](https://www.genius-web.co.jp/blog/web-programming/how-to-use-slick-js-to-apply-sliders-on-a-smartphone-to-the-rest-of-the-picture-on-a-pc.html)

そのままだと
>Uncaught TypeError: Cannot read property 'add' of null
と言うエラーが出る

- [slick\.js で Uncaught TypeError: Cannot read property 'add' of null のエラーがでる \| Proglad](https://www.proglad.tokyo/2017/08/slickjs-uncaught-typeerror-cannot-read.html)

```js
    if (window.innerWidth <= 768){ //PC
      $ele.not('.slick-initialized').slick({
        centerMode: true,
        slidesToShow: 1,
        variableWidth: true,
        infinite: true,
        dots: true
      });
    } else { //SP
      $('.ele.slick-initialized').slick('unslick');
    }
```
【JavaScript】二段階削除の挙動（遊び）

##prompt()、confirm()の使い方
コードをコピペして、ChrpmeDevで実際に試してください。

```
function deleteTweet(){
  console.log("ツイートを削除しました")
}

function notion(){
  const input = window.prompt("コードネームをいれてください")
  if(input === "たいぞうグレイト"){
    if(confirm("本当に削除しますか？")){
      deleteTweet();
    }
  }
}

notion();

```
KarakeSubtrait.rs Implement Ninja protocol.


### Rustのサブトレイト確認してたらアイエエエエエエ

```rs
struct Ninja {
  name: String,
}

trait NameGetable {
  fn get_name(&self) -> String;
}
trait Chop {
  fn chop(&self) -> String;
}
trait Reigi {
  fn rei<T: NameGetable>(&self, teki: &T) -> String;
}
// サブトレイト 複数のトレイトは+で繋ぐ、ワビサビ!!
trait Karate : Reigi + Chop + NameGetable {
  fn exec<T: Karate>(&self, teki: &T);
}

impl NameGetable for Ninja {
  fn get_name(&self) -> String {
    self.name.to_string()
  }
}
impl Chop for Ninja {
  fn chop(&self) -> String {
    "Wasshoi!!".to_string()
  }
}
impl Reigi for Ninja {
  fn rei<T: NameGetable>(&self, teki: &T) -> String{
    format!("ドーモ、{}=サン。{}です。", teki.get_name(), self.name)
  }
}
impl Karate for Ninja {
  fn exec<T: Karate>(&self, teki: &T) {
    println!("{}", self.rei(teki));
    println!("{}", self.chop());
  }
}

fn keishikiBi<T: Karate>(fighter1: &T, fighter2: &T) {
  fighter1.exec(fighter2);
}

fn main() {
  let ninjaSlayer = Ninja { name: "ニンジャスレイヤー".to_string() };
  let darkNinja = Ninja { name: "ダークニンジャ".to_string() };
  keishikiBi(&ninjaSlayer, &darkNinja);
}

>> ドーモ、ダークニンジャ=サン。ニンジャスレイヤーです。
>> Wasshoi!!
```

## まとめ
挨拶後すぐに攻撃するな。
JavaScript(ES6)のexportとimportについて調べてみた

#ES6で導入されたexportとimportについて調べた


**注！完全に自分用の忘備録です。**

##&lt;script type="module"&gt;が必須
**import / export** を使うにはscriptのtype属性に ```module``` の指定が必須です。
指定しないと以下のようなエラーになります。

```
Uncaught SyntaxError: Cannot use import statement outside a module
```

##&lt;script type="module"&gt;の実行タイミング
type="module"のスクリプトは最後に実行されます。
またDOM構築後に実行されるので、今までのようにheadタグに読み込むかbodyの閉じタグの上で読み込ませるか考える必要がありません。


###実装例(その1)
```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JSサンプル</title>
</head>
<body>
<script type="module" src="import.js"></script>
</body>
</html>
```

```javascript:import.js
// 'module.js'でexportされたclassをimportする。
import { Point, Rectangle } from './module.js';

// importしたクラスを使用する。
const p = new Point(1, 2);
const r = new Rectangle(0, 0, 5, 5);
console.log(p.toString());
console.log(r.toString());
```

```javascript:module.js
// classをexportしている。
export class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    toString() {
        return `{x:${this.x}, y:${this.y}}`;
    }
}
export class Rectangle {
    constructor(x, y, width, height) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
    }
    toString() {
        return `{x:${this.x}, y:${this.y}, width:${this.width}, height:${this.height}}`;
    }
}
```

##export defaultが推奨されている
特に理由がなければexportはdefaultが推奨されています。
参考：[Default exports are favored](https://exploringjs.com/es6/ch_modules.html#sec_design-goals-es6-modules)

#一旦まとめ
export、importの構文に振れる機会がそんなに多くなくてまだ完全に理解していないので、この記事は自分の理解度と共にアップデートしていく予定です。
[記録用] Day.1　統計学のお勉強


日記
====
完全独習　統計学入門という統計学の勉強を始めるにあたっての入門書で
勉強を始めた。
統計学を勉強し始めた理由は、数学がもともと好きだったのが2割で、世の中のおもしろい規則性とか関係性を見出したいが3割で、
将来役立つから早めにできるようになりたいが5割です。
今日は90minくらいやって、本の半分くらいやりました。
正規分布と標準正規分布の違いや意味についての理解に苦しんだけど、
なんとなくわかった気がする。

たぶん練習問題たくさんとかないといけないんだろうなー。
過去問とかも平行してやりはじめよう。

＞以下、エッセンスとしてメモしたもの
===========
統計学は主に2つのパーツから成り立っている
 - 記述統計｜あるデータの中から特徴や傾向を掴むこと。起源は古代にまで遡る。
 - 推測統計｜部分から全体を推測する。｜20Cになってから確立された方法論
 
この筆者は標準偏差が統計学でもっとも重要なことだと理解している。
標準偏差は、データが平均値の周辺にどのくらいの広がりや散らばりを持っているかを表す統計量のこと。
標準偏差を理解しないと、それ以降発展しずらい。


この本では確率を使わない。
統計｜過去に起きたことに関する記述（観測されたデータの集まり）
確率｜未来に起きることに関する記述
これらの違いは、時間軸を行き来することで消滅していく。
これらに対して同じ計算手法を行うため、混乱が起こる。


縮約
1.グラフ化
2.1つの数字で特徴を代表（代表する数字を統計量という）

1.グラフ化
・度数分布表
階級を決めて、階級値を決めて、度数を出して、相対度数を出して、累積度数を出す。
縮約によって、ローデータである細かい各数値が失われる代わりに、大まかな傾向/特徴が見出せる

グラフ化のデメリットとして、1.読み手により解釈が別れてしまう。→図だから。2.スペースを取りすぎること
そのために統計量がある（分散/標準偏差/平均/etc..）

 
平均値の捉え方
・データは数値的に広がっているが、その広がりの中から1点を全データを代表する数値として選び出したもの
データは平均値の周辺に分布している。


・多く現れるデータは平均値に与える影響が大きい。

メモ：幾何平均があまりわからん


標準偏差の捉え方
・データは平均値を基点にしてその前後に広がっているもの。
・しかし、その広がりがどの程度であるかはわからないため、それを明らかにするのが標準偏差
・バスの事例。全てのデータを二乗平均する。


標準偏差とは波の大きさである。 （サーファーにとって

S.Dがわかると、
1セットのデータの中にある1つのデータの意味がわかる。
2複数のデータのセットを比較して出てくる違いがわかる


テストの点数で、平均点とどれくらい離れているかは重要ではなく、
標準偏差、つまりデータの散らばりにおいて、どの辺に自分がいるのかが重要。
Pythonで__END__(もどき)を実現する

PerlやRubyの`__END__`。それなりに大きいテキストデータをプログラムの末尾に置いておけるので便利である。しかし、Pythonでは使用できない。複数行文字列はあるが、後置することができない。

そこで、こういうものを末尾に置くと「データ」が読み込めるモジュールを作ってみた。

```
'''
__END__
データ
'''
```

ただし、引用符は`'''`と`"""`の両方に対応しているが、同じものをデータ部内に書くことができない。不完全ではあるが、改善が難しそうなので現時点でのものを公開する。

Python2/3両対応です(PyPyでも動くようです)。

```py:enddata.py
import sys
from io import StringIO

def getdata():
    ret = StringIO()
    with open(sys._getframe().f_back.f_code.co_filename,'rb') as f:
        strStart = None
        while True:
            line = f.readline()
            if not line or line.rstrip().decode('utf-8') == '__END__':
                break
            strStart = line.rstrip()
        # read until the str finishes as ret should not contain trailing quote
        prev = None
        while True:
            line = f.readline()
            if not line or line.rstrip() == strStart.rstrip():
                break
            if prev is not None:
                ret.write(prev)
            prev = line.decode('utf-8')
        if prev is not None:
            ret.write(prev)
    ret.seek(0)
    return ret
```

```py:test.py
#!/usr/bin/python
from enddata import getdata

print(getdata().read().rstrip())

'''
__END__
Hello END World!
'''
```

`Hello END World!`が出力される。
静的HTMLページに問い合わせフォームを導入する

いろんなサービスがありますが、Responsive Mailformを使用します
[FIRSTSTEP](https://www.1-firststep.com/)さんありがとう  
[こちら](https://www.1-firststep.com/archives/462)のページからダウンロードしましょう

# 選んだ理由

- HTMLに組み込める
- ページ移動なしチェック
- 入力必須項目設定可能
- ふりがな自動入力
- 郵便番号自動入力
- CSSでデザイン変更
- 著作権表示不要
- カスタマイズ自由
- レスポンシブ

要するにHTMLとCSSの知識で導入できるというとてもありがたいもの(笑)

# 必要な条件
PHPが作動するサーバー

# 手順
1. 展開したダウンロードファイルをサーバーにすべてアップする
2. php\config.php内の$rm_send_address[]の値に受け取るメールアドレスを入力
3. htmlファイルを開いていらない項目削除
4. 必須項目にはクラス名に【required】追加
5. 問い合わせフォームへ飛ばしたい元ページにaタグを設定

# まとめ
デザインもいま風なのでそのままでも十分使いやすいです
カスタマイズもOKとのことなのでCSSわかるなら変更できます
【JavaScript】コールバック関数に匿名関数をいれてみる

##匿名関数について
匿名関数がない場合とある場合で分けてます。
書き方が違います。
現場でよく使われるらしいです。
機能は一緒です。

```
//子機能2（匿名関数なし）
function followCancel(){
  console.log("本当にフォローを外しますか？");
}

//子機能2(匿名関数)
const followCancel = function(){
  console.log("本当にフォローを外しますか？");
}
```
Layout Validation を使いこなせ

## Layout Validation とは
[Android Studio 4.0](https://developer.android.com/studio/releases/#4-0-0) から使えるようになった、様々な画面サイズやデバイスの構成におけるレイアウトを同時にプレビューするためのツールです。  

画面サイズだけでなく、Dark Theme や色覚多様性、多言語、テキストサイズの変更までも確認することができます。

## 使い方
Android Studio 4.0 以降でレイアウトのファイルを開くと IDE に `Layout Validation` のボタンが表示されます。  
![layout-validation-tab.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126298/0f17855e-ee3b-41b9-286e-ceab35f14c5e.png)

### 様々な画面サイズの確認

左上のドロップダウンより `Pixel Devices` を選択することで様々な Pixel 端末の画面サイズでのレイアウトを確認することができます。  

<img width="887" alt="Pixel Devices screen" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126298/292cbd5c-dd63-09c5-f528-12a79efc825b.png">

### 色覚多様性の見え方の確認

左上のドロップダウンより `Color Blind` を選択することで色覚多様性の見え方を確認することができます。

<img width="881" alt="Color Blind screen" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126298/927a0db1-d61b-92db-199f-d7e8708b02de.png">

### フォントサイズの変更の確認

左上のドロップダウンより `Font Sizes` を選択することでテキストサイズが変更された場合の見え方を確認できます。

<img width="882" alt="Font Sizes screen" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126298/b4a9b554-b7b6-84df-ac48-b3dfd4dd4cdf.png">

### Dark Theme の確認

左上のドロップダウンより `Custom` を選択するとドロップダウンの右に端末のアイコンが表示されます。
その端末のアイコンから表示されるポップアップで設定した端末の状態を追加することで様々なレイアウトの確認をすることができます。  

Dark Theme の場合は

- Theme に `.DayNight`
- Night Mode に `Night time`

を設定することで Dark Theme のレイアウトの確認ができます。  

<img width="882" alt="Night Mode setting screen" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126298/daca1636-ee73-9f61-1632-d43ce9feb1dc.png">

そのほかにも横向きや多言語での確認も設定することができます。  




これまで端末で設定を変更して確認していた部分が改善されて、レイアウトの確認が捗りますね😇
切り離さないビッグデータとデータ分析！データ分析の重要さ

####データとは？ーー幾つかのデータの定義を紹介します。
データは、事実または観察の結果であり、客観的なものの論理的な誘導であり、客観的なものを表すために使用される原子要素です。
データは情報の形式とキャリヤーであり、記号、単語、数字、音声、画像、動画などが含まれます。 データと情報は不可分です。
データは情報の表現であり、情報はデータの意味合いです。 データ自体は無意味であり、データはエンティティの動作に影響を与える場合にのみ情報になります。
データは連続値であり、音や画像などはアナログデータと呼ばれる、シンボルやテキストなどはデジタルデータと呼ばれます。
コンピュータシステムでは、データはバイナリ情報単位0、1の形式で表されます。
ビッグデータには極めて高速に、多くの異なる形式で生成された大量のデータです。膨大なデータ量と複雑なデータ型があり、低値密度、データ処理の適時性などは、従来のデータの特性とは異なります。
![alt](https://jp.scrapestorm.com/wp-content/uploads/2020/05/big-data-e1589005261558.jpg)
####ビッグデータの定義
ビッグデータ（英: big data）とは、一般的なデータ管理・処理ソフトウエアで扱うことが困難なほど巨大で複雑なデータの集合を表す用語である。
####ビッグデータの特徴(4V)
#####1.膨大なデータ量(Volume)
企業はデータ量の大幅な増加に直面しています。たとえば、IDCの最新のレポートでは、2020年までに世界のデータ量が50倍になると予測しています。 現在、ビッグデータの規模は依然として絶え間なく変化する指標であり、単一のデータセットの規模は数十テラバイトから数ペタバイトの範囲です。 つまり、1PBのデータを保存するには、50GBのハードドライブを搭載した20,000台のパソコンが必要になります。 さらに、さまざまな予期しないソースがデータを生成する可能性があります。
#####2.低値密度(Value)
値の密度は、データの量に反比例します。ビデオを例として、1時間のビデオで、中断しない連続監視では、有用なデータは1〜2秒しかない場合もあります。強力なアルゴリズムを通じてデータを浄化するのは現在、ビッグデータを背景に早急に解決すべき問題である。
#####3.極めて高速(Velocity)
高速は、データが作成および移動される速度を表します。 高速ネットワークの時代では、ソフトウェアのパフォーマンスを最適化する高速コンピュータプロセッサとサーバーに基づいてリアルタイムデータストリームを作成することが一般的な傾向である。
#####4.多くの異なる形式(Variety)
過去に保存しやすいテキストベースの構造化データと比較して、Webログ、オーディオ、ビデオ、画像、地理的位置情報などの非構造化データが増えています。これらのデータは、データ処理機能により高い要求を課します。
ならば、ビッグデータの時代に、こう言う海量、高成長率、多様な情報資産を利用するにはさぞデータ分析に切り離さない。
![alt](https://jp.scrapestorm.com/wp-content/uploads/2020/05/%E3%83%87%E3%83%BC%E3%82%BF%E5%88%86%E6%9E%90-500x273.png)
####データ分析の概要
データ分析とは、適切な統計分析方法で収集された大量のデータを分析し、有用な情報を抽出して結論を形成し、詳細な調査とデータの要約を実施するプロセスを指します。
#####役割：
ステータス分析、原因分析、予測分析
####データ分析のタイプ：
記述的データ分析は主要な分析方法であり、私たちの仕事で最も一般的に使用されるデータ分析方法です。
探索的データ分析は、データ内の新機能の探索に焦点を当てています。
確認データ分析は、以前の仮定の信憑性を検証することに焦点を当てています。
分析を通じてのみ、多くのインテリジェントで詳細かつ貴重な情報を入手できます。 そのため、ビッグデータの分野では、ビッグデータの分析手法が特に重要であり、最終的な情報が価値あるものであるか否かにデータ分析は決定的な要素であると言えます。
実機とシミュレータでフォントサイズが違う？UITableViewCellのカスタムビューのフォントサイズをポイント固定で指定してはいけない

## 実機とシミュレータのフォントサイズが違う？
UITableViewに配置するカスタムTableViewCellをつくったときの話。

- 参考：[カスタムTableViewCellを作るときにはだいたいこうやってます\-プロトタイプで作るか、xibで作るか \- Qiita](https://qiita.com/naochi___/items/dcbf58acb925fc716af5)

実機テストのとき **「カスタムTableViewCellのフォントサイズが小さい」** という現象がありました。調べた結果、UILabelのFont設定をポイント指定していたことが原因だったのですが、そこに至るまでに時間を吸われたので、おなじ沼にハマらないように :memo:

### シミュレータでの見え方
> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883/79e67f6f-f180-df46-2baa-dd51ff7f599d.png)
>
> 上：標準のUITableViewCell
> 下：カスタムUITableViewCell


### 実機での見え方
> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883/d913741f-4047-1853-a413-96d470318080.png)
>
> 上：標準のUITableViewCell
> 下：カスタムUITableViewCell

## フォントサイズが変わる

標準のUITableViewCellに注目してみると、
**実機とシミュレータでフォントサイズが変わっている**ことがわかりました。

具体的には、シミュレータでは`.SFUI-Regular 17.00pt`、実機のときは`.SFUIDiplay-Semibold 23.00pt`となっていました。

> シミュレータ
> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883/b74ce50a-2fc6-d96c-8741-e590ee00e33a.png)


> 実機
> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883/4123a32a-b14f-94c7-58b5-c4a3d1df878c.png)


## UILabelのFontの設定をポイント固定にしてはいけない

UILabelのFontを`System 18.0`に設定していました。この設定を`Body`に変更することで、実行時の適切なFontに変更されることがわかりました。

### Text StyleからBodyを選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883/70902114-7f32-fd71-0216-d293e3bdb246.png)


### Fontが追従しないNGパターン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883/fad4df19-b28b-4530-f903-e7d0d6db533a.png)


### Fontが適切に変更されるOKパターン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883/66df4ef8-e317-a211-5278-dc2e68315354.png)
【JavaScript】高階関数について

##高階関数について
関数の中に関数を入れたい（機能の中に機能を入れたい）場合に用いる。

##高階関数の構文
```
function 高階関数（コールバック関数）{
  //処理
　コールバック関数（）
}
```

##実際の文
```
//子機能１（コールバック関数で呼ばれる関数）
function tweetCancel(){
  console.log("ツイートキャンセルしていいんですか？");
}

//子機能2（コールバック関数で呼ばれる関数）
function followCancel(){
  console.log("本当にフォローを外しますか？");
}

//親機能1（高階関数）
function confirmed(fn){
  if(window.confirm("実行しますか？")){
    fn();
  }
}

//親機能1と子機能2を実行
//実行順序は親機能の処理に準ずる
confirmed(followCancel);
```

■処理を実行する時、 **fn = 子機能の関数名** が入る。

■子機能はコールバック関数として呼ばれる。



※実際にこのコードをChromeDevで実行してみると、わかります。
Git＆GitLabの初期設定

* [自分とこの環境下におけるGit & GitLabレクチャー](https://qiita.com/NeK/private/dee76f411cf2488b6873)

# 対象OS
- 研究室のUbuntu
    - terminalやATOMなどからでも使用できるが設定はterminalにて行うこと．

# 設定のための確認
GitLabを用いて研究室内でプログラムの共有を行う．そこで，GitLabにアクセスして設定のための以下の情報を確認しておくこと．

- フルネーム
- メール

## GitLabへのアクセス方法

- 研究室内UbuntuへのID, Passwordを用いる．
- 研究室GitLabのログインページにて，LDAP Username, passwordに入力しSing inする．
- Sing in後，右上のアイコンから「設定」をクリックする．
    - 左ペインのプロフィールを選択(されているはずだが)する．
        - フルネームとメールの内容を確認する．
            - 後のuser.nameとuser.emailの設定で使用する．

![Inkedgitlab-settings_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284261/5100d446-cfa1-bae2-cd99-5a49387ddc28.jpeg)

# 各種設定
## Gitの初期設定

```terminal
$ git config --global user.name "[フルネーム]"
$ git config --global user.email [メール]
$ git config --global init.defaultBranch main
```

[フルネーム]，[メール]にあたるところはGitLabで確認したフルネームとメールとする．
社会問題からgitで使用されていたデフォルトブランチ名"master"は"main"へとシフトすることになった．そこでデフォルトブランチ名を明示的にmainに指定する．GitLabも14.0(2021/6/22リリース予定)からデフォルトブランチ名がmainになる模様．

### 例
- フルネーム
    - Ichiro Tanaka
- メール
    - icchi@gmail.com
- コマンド

```terminal
$ git config --global user.name "Ichiro Tanaka"
$ git config --global user.email icchi@gmail.com
$ git config --global init.defaultBranch main
```

## GitLab使用のための設定
GitLabとssh接続でファイルをアップロードしたりダウンロードする時にパスワードなしで簡単にやり取りするための設定．

### SSH公開鍵の確認
以下のコマンドで公開鍵(id_rsa.pub)が既にあるか確認する．

```terminal
$ ls ~/.ssh
```

以下のファイルがあれば次のSSH公開鍵の作成を飛ばしてもかまわない．

- id_rsa
    - 秘密鍵．他人に見せないように．
- id_rsa.pub
    - 公開鍵．他人に見せる用．

### SSH公開鍵の作成
id_rsa.pubがなければ作成する．

```terminal
$ ssh-keygen
```

途中でパスフレーズ(passphrase)を求められるが，何も入力せずエンターキーで進める．

### GitLabでのSSH公開鍵の利用
id_rsa.pubの中身をGitLabの然るべきところに張り付ける．まずid_rsa.pubの中身をコピーする．
例えば以下のコマンドで表示された文字列をコピーする．

```terminal
$ cat ~/.ssh/id_rsa.pub
```

次にGitLabにアクセスし，右上のアイコンの設定から左ペインのSSH鍵(図では赤丸で示したプロフィールから7つ下)をクリックすると，文字列を張り付けられるページになる．
「キー」のところに張り付けて，「キーを追加」ボタンを押す．

![Inkedgitlab-settings_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284261/5100d446-cfa1-bae2-cd99-5a49387ddc28.jpeg)

# 確認
自分のでなくても，誰かの適当なプロジェクトをclone出来ることを確認する．