OmniAICreator/Qiita-1.07M huggingface dataset:
ドラクエ風RPGでマップに当たり判定を持たせる

#できるようになること
下の画像のようなMapを作れるようになる。
（キャラクターが移動不可なMap）

![スクリーンショット 2020-05-13 2.57.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631096/e714f28f-3dc1-ecb3-c13b-8eff415118ff.png)

#やり方
（１）キャラクターを用意する
（２）マップを用意する
Create→2DObject→TitleMap
（３）Tile PaletteでMapを作る
windowタブ→2D→TilePalette
（４）Playerに
・RigidBody2D
・BoxCollider2D
をつける
（詳細は下の画像）
![スクリーンショット 2020-05-13 3.02.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631096/a5ae4414-0ca9-d4ec-418d-0b8f1c6b3da8.png)
（５） *（2）にてMapを作成すると
ヒエラルキーにGrid > Tilemapが出現する。
TilemapにTileMapCollider2Dをつける
![スクリーンショット 2020-05-13 3.04.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631096/f3bbd01a-1c70-30f6-1018-b7bbf0522f2e.png)

＝＝＝＝＝＝
ここまででmapに当たり判定を持たすことができる。

#当たり判定を持たせないMapを作る
違うTileMapを新たに作成するそこにはTilemapCollider2Dを付けない

#摩擦を除外する
![スクリーンショット 2020-05-13 3.06.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631096/650fe808-3819-b78c-bbe3-5c1053805eeb.png)
Materialsというフォルダーを新規に作成しPhysicsMaterial2Dを作る
![スクリーンショット 2020-05-13 3.07.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631096/bcedaf9a-2497-ec64-3256-06f69ed7272b.png)
![スクリーンショット 2020-05-13 3.06.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631096/fcad6655-2d68-ddb6-5555-1c67f5f8e519.png)
Friction（摩擦）を0にする
![スクリーンショット 2020-05-13 3.07.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631096/04491422-2a83-952c-8b54-4de6ab2dd662.png)
PlayerのBoxCollider2DのMaterialに装着する

#追記：Tilemapを1つにして摩擦を少なくする
![スクリーンショット 2020-05-13 3.12.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631096/e09ad49f-f884-284d-6a3f-a66f0429c143.png)
今のままだと上の画像のようにmapの素材1つ1つにColliderがかかっているので
プレイヤーが移動する時にひっかかってしまいます。
![スクリーンショット 2020-05-13 3.13.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631096/483cde89-a243-7674-eb20-35f2a4842a6a.png)
新たにCompositeCollider2Dをつけて
TilemapCollider2DのUsedByCompositeにチェックをいれる。

この時点で再生ボタンを押すとステージごと動き出すので
RigidBodyのBodyTypeをStaticに変更します
そうするとステージは動かなくなります
RailsでRakeタスクの作成手順

最近の勉強で学んだ事を、ノート代わりにまとめていきます。
主に自分の学習の流れを振り返りで残す形なので色々、省いてます。
Webエンジニアの諸先輩方からアドバイスやご指摘を頂けたらありがたいです！

#1.Rakeタスクファイルを生成
```
$ rails g task task_sample
```
作成されたrakeファイル

```lib/tasks/task_sample.rake
# 名前空間
namespace :sample do
  # タスクの説明 desc => description（説明）
  desc ""
  # task_name => タスクの名前
  task task_name: :environment do
    # 実行したい処理を記述する場所
  end
end
```
定義したタスクがきちんと表示するコマンド

```
rake -T
```
以下のような名前のタスクが存在すれば定義は成功です。

```
rake sample:task_name    # 実行したい処理を行うタスク
```

#2.カラムのRecordをUpdateするrake task

特定のIDをもつUserの `traget`を `true`にする。

```lib/tasks/task_sample.rake
namespace :data do
  desc "dataを更新"
  task update: :environment do
    ids = [xx,xx,xx,xx]
    User.where(id: ids).each do |u|
      u.target = true
      u.save!
    end
  end
end
```

`task update: :environment do`の記述はモデルにアクセスする場合は `:environment`　を指定する必要があります。
[【Rails】Rakeタスクに:environmentがないとNameErrorが出る](https://qiita.com/aiandrox/items/6ecd919e86a7bd7440fe/)

rakeタスクを実行するコマンド

```
rake data:update[environment]
```

Herokuでrakeタスクを実行するコマンド

```
heroku run rake data:update[environment]
```

#参考記事
・[RailsでRakeタスクの作成](https://qiita.com/suzuki-koya/items/787b5562d2ae1a215d94/)
・[Rakeタスクの実装](https://qiita.com/yoshito410kam/items/26c3c6e519d4990ed739/)
・[railsで複数のRecordをUpdateするrake taskを作る(新カラム作成時など)](https://qiita.com/gymnstcs/items/bca1e5986bffd6ec69c5/)
【Golang】スライス

#【Golang】スライス
Golangの基礎学習〜Webアプリケーション作成までの学習を終えたので、復習を兼ねてまとめていく。 基礎〜応用まで。

```
package main
//スライス 可変長配列
//関数では参照渡しされるので、本体の値も変わる。配列とは違う。

import "fmt"

func main() {
	//宣言
	//スライス = 可変長配列
	//[]にするとサイズ変更できる。
	var a []int = []int{100, 200}

	//宣言
	b := [] string{"A", "B"}
	fmt.Println(b)
	//>>[A, B]

	//宣言
	//[]を作る nil メモリーに確保しない。bとは違う。
	//メモリーは深い領域なので、最初は、あまり気にしなくてもいい
	var c []int
	fmt.Printf("len=%d cap=%d value=%v\n", len(b), cap(b), b)
	fmt.Printf("len=%d cap=%d value=%v\n", len(c), cap(c), c)
	fmt.Println(c)
	//>>[]





	//aに300を追加
	a = append(a, 300)
	fmt.Println(a)
	//>>[100, 200, 300]

	//代入
	a[0] = 1000
	fmt.Println(a)
	//>>[1000 200 300]


	//スライス作成
	d := []int{1, 2, 3, 4, 5, 6}
	fmt.Println(d)
    //値の取り出し
	fmt.Println(d[2])
	//>>3

	//2~4の前まで
	fmt.Println(d[2:4])

	//~2前まで
	fmt.Println(d[:2])

	//2~最後
	fmt.Println(d[2:])

	//全て
	fmt.Println(d[:])

	//copy コピー先、コピー元
	copy := copy(d, a)
	fmt.Println(copy)
	//成功したコピー数
	//>>3
	//先頭から塗りつぶすようにコピーする
	fmt.Println(d)
	//>>[1000 200 300 4 5 6]



	//簡易スライス式
	//完全スライス式 は省略
	//配列からスライスを作成する方法


	//リスト内リスト（スライス内スライス）
	var board = [][]int{
		[]int{0, 1, 2},
		[]int{3, 4, 5},
		[]int{6, 7, 8},
	}
	fmt.Println(board)
	//>>[[0 1 2] [3 4 5] [6 7 8]]



	//スライスのmakeとcap
	//メモリーを気にするような開発の場合。
	//最初は気にせずやるほうがいい
    //#################################
    //make
	//make 長さ3, キャパシティ５ [0,0,0]のスライスを作成
	n := make([]int, 3, 5)

	//宣言 make
	//[]を作る 空 メモリーに確保する
	l := make([]int, 0)
	fmt.Println(l)
	//>>[]

	//len() 長さ
	//cap() キャパシティ（容量）
	//%d 整数
	fmt.Printf("len=%d cap=%d value=%v\n", len(n), cap(n), n)
    //>>len=3 cap=5 value=[0 0 0]

	//追加 長さ変更 [0,0,0,0,0]
	n = append(n, 0, 0)
	fmt.Printf("len=%d cap=%d value=%v\n", len(n), cap(n), n)
	//>>len=5 cap=5 value=[0 0 0 0 0

	//追加
	//[0,0,0,0,0,1,2,3,4,5]
	n = append(n, 1, 2, 3, 4, 5)
	//長さとキャパシティが変わる.10,10に
	fmt.Printf("len=%d cap=%d value=%v\n", len(n), cap(n), n)
	//>>len=10 cap=10 value=[0 0 0 0 0 1 2 3 4 5]

	//引数一つの場合 は長さ、キャパが同じ（今回は３）になる
	e := make([]int, 3)
	fmt.Printf("len=%d cap=%d value=%v\n", len(e), cap(e), e)
	//>>len=3 cap=3 value=[0 0 0]
	
	//#################################


	


	//for文
	// c = make([]int, 5)
	f := make([]int, 0, 5)
	for i := 0; i < 5; i++ {
		f = append(f, i)
		fmt.Println(f)
	}
	fmt.Println(f)

	/*答え
	[0]
    [0 1]
    [0 1 2]
	[0 1 2 3]
	[0 1 2 3 4]
	[0 1 2 3 4]
    */
}

```
Cannot complete the install because one or more required items could not be found. Software currently installed: Amazon RDS Management

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64293/c29c57d7-e0e9-1e7c-52b9-3e6b4696108e.png)

# Error

```
Cannot complete the install because one or more required items could not be found.
Software currently installed: Amazon RDS Management 1.0.0.v201807201743 (com.amazonaws.eclipse.rds.feature.feature.group 1.0.0.v201807201743)
Missing requirement: Amazon Relational Database Service (RDS) Plugin 1.0.0.v201807201743 (com.amazonaws.eclipse.rds 1.0.0.v201807201743) requires 'osgi.bundle; org.eclipse.datatools.connectivity.ui.dse 1.1.0' but it could not be found
Cannot satisfy dependency:
From: Amazon RDS Management 1.0.0.v201807201743 (com.amazonaws.eclipse.rds.feature.feature.group 1.0.0.v201807201743)
To: org.eclipse.equinox.p2.iu; com.amazonaws.eclipse.rds [1.0.0.v201807201743,1.0.0.v201807201743]

```

# 解決策

### 手順
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64293/5d752b81-5c19-27ec-d0e7-e9fabc6db403.png)



### Eclipseでの操作場所

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64293/0ace3e29-d577-dbf8-9dc2-8b71a2870436.png)


### 操作後

オレンジ色のボックスアイコンがメニューバーに現れる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64293/f062743f-2ddc-bec2-4c8e-a28f9ab5ec90.png)


# 参考

* [AWS Toolkit for Eclipse | AWS](https://aws.amazon.com/jp/eclipse/)
[postgresql]本番データをステージングに突っ込んだ際の個人情報マスクする

最近の勉強で学んだ事を、ノート代わりにまとめていきます。
主に自分の学習の流れを振り返りで残す形なので色々、省いてます。
Webエンジニアの諸先輩方からアドバイスやご指摘を頂けたらありがたいです！

#個人情報をマスクする

[[Heroku] ProductionのDatabasesをStagingに反映](https://qiita.com/hirokik-0076/items/2d718cb11fa74efb4a4a/)する！
Herokuで本番データをステージングに突っ込みたいけど個人情報やし、うかつに突っ込めない…

1.ステージングのpostgresqlに接続する

```
$ heroku pg:psql
```

2.emailをマスク化コマンド

・[replace、substring、strposの説明](https://www.postgresql.jp/document/8.0/html/functions-string.html/)

```
update users set email = replace(email,substring(email, 1, strpos(email,'@')-1),concat('xxxxxxx_',id));
```

実行後、以下の様になる
`xxxxxxx_1@gmail.com`

3.nameをマスク化コマンド

```
update users set name = replace(name,substring(name, 1, length(name)),concat('xxx_',id));
```
実行後、以下の様になる
`xxx_1`


#参考記事
・[マスク  【 mask 】 ](http://e-words.jp/w/%E3%83%9E%E3%82%B9%E3%82%AF.html/)
・[MySQLで個人情報をマスキング](https://qiita.com/murak/items/7add80e9624b1abf103a/)
・[mysqlでメールアドレスにマスクをかけるよ](https://kimuraysp.hatenablog.com/entry/2016/07/26/014334/)
・[運用に耐えるRailsによるWebアプリケーションの作り方](https://qiita.com/seri_k/items/605e6f75da838ae00007/)
・[文字列関数と演算子](https://www.postgresql.jp/document/8.0/html/functions-string.html/)
Development Environment

## ZSH + Oh-my-zsh things

```bash:zsh
# install shell with package manager
sudo apt install zsh

# set as default shell
chsh -s $(which zsh)

# test if it worked
echo $SHELL

# install oh-my-zsh
sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

# install zsh-auto-suggestions
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
```
【Git】Git init後の初回コミットを取り消す方法

メモとして残します。

bashの履歴で他コミットを編集してコミットをしようとしたが、コメントをそのまま使ってしまったので、
初回であるこのコミットをロールバック。

#■対処法
```shell
 git update-ref -d HEAD
```
DartPadにソースコードを動的に埋め込む

みなさん、こんにちは
とあるサラダ🥗の会社で開発やってます umatoma です。

DartPadにソースコードを動的に埋め込むことをやってみたので、
紹介したいと思います。

# DartPadとは

DartPadはDartやFlutterを試すためのオンラインエディタです。
イメージとしてはCodePenのDart・Flutter版ですかね。

https://dartpad.dev/
![スクリーンショット 2020-05-13 1.16.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632977/67f01f77-bfbc-242e-4904-44ec4037e39d.png)


# DartPadをHTMLに埋め込む方法

### gistを指定する

`main.dart`ファイルを含んだgistを作成し、IDを指定するだけでOKです。

```html
<iframe src="https://dartpad.dev/embed-flutter.html?id=b6409e10de32b280b8938aa75364fa7b"></iframe>
```

こちらの方法は簡単で良いのですが、
gistに上げる手間や修正するのにgistの方を見に行かなければならないのは微妙な点です。


### \<code\>\</code\>をDartPadに変換するスクリプトを使う

公式で、変換用のスクリプトが用意されていて、
指定されたフォーマットで code タグを設置してあげると、
DartPadに変換しソースコードを埋め込んでくれます。

```html
<script type="text/javascript" src="https://dartpad.dev/inject_embed.dart.js" defer></script>

<pre>
    <code class="language-run-dartpad:theme-light:mode-flutter">
        main() => print("Hello, World!");
    </code>
</pre>
```

gistを使う方法に比べこちらは
ブログ本文などと同じ場所に埋め込み用のソースコードが記述できるため
管理が楽になりますね。

ただ、 code タグが動的に読み込まれるようなサイトの場合は、
このスクリプトでは対応できていないのが残念な点です。



# 動的に\<code\>\</code\>を生成しDartPadにソースコードを埋め込むには

公式から提供されているスクリプトの中で、code タグを読み込み DartPadにソースコードを埋め込む処理はあるはずなので、それと同じ処理を行ってあげれば良いです。

code タグを DartPadに変換しソースコードを埋め込む処理はこんな感じです。

```javascript
const snippets = document.querySelectorAll('code');
for (const snippet of snippets) {
    const message = {
        sourceCode: { 'main.dart': snippet.innerText },
        type: 'sourceCode',
    };

    const iframe = document.createElement('iframe');
    iframe.setAttribute('src', 'https://dartpad.dev/embed-flutter.html');

    iframe.onload = () => {
        iframe.contentWindow.postMessage(message, '*');
    };
    snippet.parentNode.replaceChild(iframe, snippet);
}
```

あとは任意のタイミングで↑の処理を呼んであげれば良いですね。


# まとめ

- DartPadはDartやFlutterを試すためのオンラインエディタ
- DartPadをHTMLに埋め込む方法は2通りある
    - gistを使う方法
    - codeタグから変換するスクリプトを使う方法
- codeタグが動的に読み込まれる場合にDartPadを使うには
    - スクリプト内の該当処理を流用すればOK


# 最後に

Flutter入門用のWebサイトを公開しているので、興味があったら使ってみて下さい。
コンテンツは随時追加していく予定です。

Flutterで始めるアプリ開発
https://www.flutter-study.dev/

# 参考情報

- https://github.com/dart-lang/dart-pad/wiki/Embedding-Guide
- https://github.com/dart-lang/dart-pad
Go + Google Cloud SDK の環境を Docker で準備する

# なぜ Docker

詳しい理由は 
[Cloud Functionsで消耗したくない人のために、開発環境のベストプラクティスをまとめていったらDockerに行き着いた話](https://qiita.com/pannpers/items/244a7e3c18d8c8422e4f)
こちらの記事が参考になりそうです。

軽くまとめると

- ローカル環境を汚さなくて良い
- コマンド一発で同じ環境ができるので楽
- Google Cloud SDK の認証情報をコンテナに閉じ込められる => 複数アカウント、プロジェクトの管理がしやすい

あたりの理由になるかなと思います。

ここで Node.js で説明されている部分を Go に置き換えたのがこの記事、くらいに思っていただければささっと読めるかもしれません。

# docker-compose で書く
docker-compose で書くのが好きなので、中身を置いておきます。

```
version: "3.8"
services:
  gcloud:
    image: tktcorporation/google-cloud-sdk-golang:291.0-go1.13
    working_dir: /go/src/app
    volumes:
      - .:/go/src/app
```

この記述では、下記の構成のコンテナが作成できます。

| Package           | Version |
| :---------------- | :------ |
| Golang            |  1.13   |
| Google Cloud SDK  |  291.0  |

image の タグは `291.0-go1.11`, `291.0-go1.12`, `291.0-go1.13` に対応しているので、 別のバージョンの Golang を動かしたい場合はタグを切り替えてください。(2020/05 時点)

そもそも Golang ってどう使うの？モジュールとかどうやって管理するの？みたいな話はこちらをどうぞ
-> [Golang の modules 管理](https://qiita.com/tktcorporation/items/d2cc6e38868d2f302deb)

# Google Cloud SDK の使用準備

```bash
$ docker-compose run gcloud /bin/bash
$ gcloud auth login
...
Go to the following link in your browser:

    https://accounts.google.com/o/oauth2/auth?response_type=code&client_id=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
```

`https://accounts.google.com/o/oauth2/auth?response_type=code&client_id=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx` のリンクに飛んで、
Google アカウントでログインして、
そこで表示されるコードをコピーして、
コンテナにそのコードを入力。

とすると、ログインが完了する。

あとは、プロジェクトの設定をしたり、好きに作業する。

# Dockerfile を書く場合
[docker-compose で書く](#docker-compose-%E3%81%A7%E6%9B%B8%E3%81%8F) で使用している image(tktcorporation/google-cloud-sdk-golang:291.0-go1.12) の中で書いている Dockerfile も置いておきます。

各パッケージのバージョンを変更したい時だったりに使えるかと思います。

```Dockerfile
FROM google/cloud-sdk:291.0.0

ENV GOPATH /go
ENV PATH $GOPATH/bin:/usr/local/bin:$PATH

ENV GOLANG_VERSION 1.13.1

RUN curl -Lso go.tar.gz "https://dl.google.com/go/go${GOLANG_VERSION}.linux-amd64.tar.gz" \
    && tar -C /usr/local -xzf go.tar.gz \
    && rm go.tar.gz

ENV PATH /usr/local/go/bin:$PATH
```
Golang ゴールーチンで並列数を指定して実行


```golang
package main

import (
  "sync"
  "time"
  "fmt"
)

func sub(message string) {
    fmt.Printf("%s start\n", message)
    time.Sleep(5 * time.Second)
    fmt.Printf("  -> %s end\n", message)
    time.Sleep(1 * time.Second)
}

func getMessages() (messages []string) {
  messages = []string{
    "a",
    "b",
    "c",
    "d",
    "e",
    "f",
    "g",
    "h",
  }
  return
}

func main() {
    // 並列数
    concurrency := 4
    // 並列キューを作成
    limit := make(chan int, concurrency)
    // WaitGroup 作成
    var wg sync.WaitGroup
    for _, message := range getMessages() {
        // WaitGroup のカウンタを上げる
        wg.Add(1)
        // 並列処理開始
        go func(message string, wg *sync.WaitGroup, limit chan int) {
            // WaitGroup のカウンタを下げる
            defer wg.Done()
            // 並列キューに値１を入れる
            limit <- 1
            // 並列処理させたい関数を実行
            sub(message)
            // 並列キューから値を取得する (<-limit)
            fmt.Printf(" (%d <-limit)\n", <-limit)
            time.Sleep(2 * time.Second)
        }(message, &wg, limit)
    }
    // WaitGroup のカウンタが0になるまで待つ
    wg.Wait()
}
```

実行結果

```
h start
d start
a start
b start
  -> b end
  -> a end
  -> d end
  -> h end
 (1 <-limit)
 (1 <-limit)
 (1 <-limit)
 (1 <-limit)
g start
c start
e start
f start
  -> c end
  -> f end
  -> e end
  -> g end
 (1 <-limit)
 (1 <-limit)
 (1 <-limit)
 (1 <-limit)
```
Build an app using SQL Server 目次

# はじめに

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/03ede4a6-fec4-b30f-6a73-24ea953d00b9.png)

今回は、SQL Server を使ったアプリを開発しようということで、[Building an app using SQL Server][Link1] の内容をベースに、SQL Server を使ったアプリ開発関連の記事を一元管理できるように目次ページを作成しました。
※ページは、随時更新予定です。

# C＃

- [Create C# apps using SQL Server on Windows][Qiita-C#Win]
- [Create C# apps using SQL Server on macOS][Qiita-C#mac]
- [Create C# apps using SQL Server on Ubuntu][Qiita-C#Ubuntu]
- [Create C# apps using SQL Server on SLES][Qiita-C#SLES]
- [Create C# apps using SQL Server on RHEL][Qiita-C#RHEL]


# Node.js

- [Create Node.js apps using SQL Server on Windows][Qiita-Node#Win]


---
[Qiita-C#Win]:https://qiita.com/ymasaoka/items/944e8a5f1987cc9e0d37
[Qiita-C#mac]:https://qiita.com/ymasaoka/items/7d7bc2de76dbee559a56
[Qiita-C#Ubuntu]:https://qiita.com/ymasaoka/items/08d6228320832c3dd6f6
[Qiita-C#SLES]:https://qiita.com/ymasaoka/items/28cdbd55d9874d94ea56
[Qiita-C#RHEL]:https://qiita.com/ymasaoka/items/dfc1cb4b9441c92ec730

[Qiita-Node#Win]:https://qiita.com/ymasaoka/items/516fca97db9c37040619

[Link1]:https://sqlchoice.azurewebsites.net/en-us/sql-server/developer-get-started/
【Laravel Homestead】npm installをしたらエラーが出たのでなんとか解消した話。

メモとして残します。

Laravel homesteadに用意されているnpmライブラリをとりあえず、インストールしようとしたら、エラーが出た

#■こんなエラー
```shell
vagrant@homestead:~/code/Laravel$ npm install
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

npm ERR! code EPROTO
npm ERR! syscall symlink
npm ERR! path ../@babel/parser/bin/babel-parser.js
npm ERR! dest /home/vagrant/code/Laravel/node_modules/.bin/parser
npm ERR! errno -71
npm ERR! EPROTO: protocol error, symlink '../@babel/parser/bin/babel-parser.js' -> '/home/vagrant/code/Laravel/node_modules/.bin/parser'

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/vagrant/.npm/_logs/2020-05-12T15_50_20_922Z-debug.log
```

ん？以前もこんなことがあったような気がするが、ネットを漁っていたら、原因が判明。
今回の環境はWindowsのため、CMDでいつも通り、`vagrant up`をしていたが、どうやらこれが原因だったらしい。

#■対処法
**Vagrant upは管理者権限で起動したCMDで実行**しないと、どうやら、コケるらしい。
仕事で使用しているPC上でのCMDはデフォで管理者で起動しているため、今回このようなことでつまずいた・・・

#■おわりに
こういうことがあると面倒だから、CMDは常に管理者で起動するように設定しよう。
asp.net coreでサービス作ったから宣伝兼ねて技術公開する -3_3.環境設定(AP) その２-

##前回の続きとなります。

asp.net coreでサービス作ったから宣伝兼ねて技術公開する -3_2.環境設定(AP) その１-
https://qiita.com/ArataKinjo/items/ec3a5b8714d512c63da2



##7.リバースプロキシ設定
参考サイト：
Win上でビルドした.NET Core Webアプリを、CentOS7で実行するまでの最短環境構築 （開発デプロイ編）
https://qiita.com/miyapei/items/28f1b7360614551e7f15


前回の「4.作成したモジュールのデプロイ確認」でWebサービスが起動した際に、ポートがxxxxで開始されました。というような表示がされます。
まず、どこでポート番号が決められるのか。
それは、「Program.cs」に記載されております。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/5b33403f-182a-302d-7ab6-ed0cd2aa8f9f.png)



このポート番号でサービスが開始され、指定したURL[http://app.zero-one-system.co.jp:5010] でブラウザでアクセスすれば、アプリを動かすことが出来ます。
が、ポート番号は、http(80)、https(443)のみとなりますので、内部的にポート番号を80番アクセルを5010番へ変換してアクセスする必要があります。

そこで使用するのが、リバースプロキシ機能です。
上記のURLを参考に設定してください。


##8.System.Drawingが使えない！？

さて、動かしてみたところ、色々動きませんでした。
まずはASP.NET Core2 上では、画像の編集・加工が行えないのです。
開発時にも、Bitmapオブジェクトがなかったため、まぁしょうがないですね。ある意味想定内です。

色々と検索し、似たような記事を見つけてみました。

Ubuntu 18.04 LTSの.NET CoreでSystem.Drawing.Commonを使う
https://hnys.jp/develop/system-drawing-common/


これを参考に、インストールしてみました。
Ubunts用のインストールコマンドを、CentOS用のインストールコマンドに切り替えただけなんですがね。

そのコマンドはこちら：

```ap_cmd-8.bat
yum install libgif-dev autoconf libtool automake build-essential gettext libglib2.0-dev libcairo2-dev libtiff-dev libexif-dev
```

これでうまく行きました。
100%の動作保証ができるわけではありませんが、本サービスでは問題なく動作しております。



##9.Google Cloud SDK インストール
参考サイト：
Red Hat / CentOS 用のクイックスタート
https://cloud.google.com/sdk/docs/quickstart-redhat-centos?hl=ja

このサイトを参考に、一つ一つ設定していきます。
実際に流したコマンドを転記しようかと思ったんですが、これがなかなか設定に苦戦してしまって・・・。


さらに設定完了→半年後→いきなり動かなくなった・・・。
ということもあり、常に最新の情報を調べたほうが良いと考えております。
この件は今は解決しているので、別の記事にて。


##10.SSL通信の導入
通信を行う上で、暗号化（セキュリティ）も大事になります。
とはいえ、そこまでお金をかけてガチガチにしている訳ではないのですが、
メールアドレスがパスワードを入力して貰う必要があるので、全く対応しないわけにも行かない。

ということで、フリーのSSLを導入しました。

参考サイト：
Let's Encryptで無料SSL証明書を取得する
https://qiita.com/shojimotio/items/4fa82b21390e8a6d8446

もうね。このサイト様様ですよ。
これ通りで全てOKです。

##11.SSLに対応したhttp設定
ここで設定するのは、2つ。
1.httpsでアクセスした際の証明書の利用設定
2.http(80番ポート)でアクセスを行ってきた場合、強制的にhttps(443番ポート)へ遷移させる

1は、[10]で記載されてる通り設定すれば、OKです。
2も、同様にhttpの設定ファイルを修正することで実現できます。

参考サイト：
Let's Encryptで無料SSL証明書を取得する
https://qiita.com/shojimotio/items/4fa82b21390e8a6d8446
【mod_rewrite】「wwwあり」かつ「https」にリダイレクトさせる
https://qiita.com/takahashi-kazuki/items/f452562f2b4d490a86ca


##あとがき
これでAPサーバの設定は全て終わりです。
我ながらよくやったと言いたいとこですが、いやー楽しいですねｗ
「自分で考えて、自分で実装して、自分で作ったものを動かす」
これがやりたかった！
もっともっと精進します。



【是非お試しください】※完全無料です
TanaToru -本棚管理サービス-
　https://app.zero-one-system.co.jp/TanaToru/
Githubリポジトリのアカウント管理

# 記事のきっかけ
仲間何人かでGithubを使用してWEBアプリ開発の練習的なことをしているのですが、メンバーに付与している権限が違ってpushできない事態が起きました。調べていくと単純な設定ミスなのですが、この場でアウトプットして記憶に刻み込もうと思います。

# 経緯
元々プライベートリポジトリを使用していて、４人で作業していました。
後々もう一人作業に参加することになり、１人をcollaboratorとしてではなく、organizationのメンバーへと変更し、５人で作業開始・・・
しかし、メンバーへと変更された人が、pushできなくなってしまいました。

# 調査と対応
メンバーへと変更したユーザーに対して付与する権限を、設定していませんでした。
Githubのリポジトリに関して関われるアカウントの種類としては、大きく２つあり、

- 組織（organization）に属するアカウント
- 組織には属さないが、その組織のリポジトリにアクセスできるアカウント

があります。

それぞれ付与できる権限があるのですが、組織に属するアカウントでは、

- Owner権限：組織に関わる全ての操作ができる
- Member権限：リポジトリの作成はできるが、メンバーに関わる操作やpush, pullなどはできない。

ここまでで、だいたい想像がつくかもしれませんが、、、そうです。メンバーへと変更された人は、Owner権限ではなく、Member権限でした。
そのため、この権限をOwnerへ変更することで、問題は解決できました。

# 補足
プライベートリポジトリではcollaboratorsが３人までという制約上このような対応となりましたが、よくよく考えてみると、仲間内の作業なので全員組織内のOwnerにしてもよかったのではないかと今更になって感じました・・・
今回調査した際に参考にさせていただいた記事を載せておきます。ここでは、collaboratorsに関する権限についても、触れられています。
https://qiita.com/chari/items/ee16bf16715f4bbcbd9b

そもそも今回は、アカウントの管理方法について、十分に下調べしないまま作業をしていたことが問題でした。今後も色々なサービスやツールが登場してくると思いますが、複数人で作業をする際のメンバーアカウントの管理方法は前もって考えるようにしようと思います。
Goで「ネットワーク受信接続を許可しますか？」を回避する

<img width="423" alt="スクリーンショット 2020-05-12 23.02.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6373/e778c0f2-f249-3d02-e576-d718d6e81384.png">

# はじめに結論
`goのサーバ起動のコードを修正すれば出さないようにできます。`
`他の言語でも同様のやり方で回避できるはずです。`
下のMacのファイアウォール設定を修正して出ないよう設定するのはおそらく無理です。
ファイアウォールのオフはやめておいたほうが良いです。
<img width="400" alt="スクリーンショット 2020-05-13 0.31.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6373/a0e7dade-0640-61b2-9d0a-b3c01967deb8.png">


# 環境
MacOS Mojave 10.14.6
go v1.13.8
gin v1.4.0

# 原因
`0.0.0.0` でサーバを起動していることが原因
例えば、`0.0.0.0:8080`で起動すると、
ローカルのすべてのIPv4アドレスに対して `8080` ポートでサーバが待機します。
たいていは、`127.0.0.1`と`192.168.xx.xx`の２つくらいかと。
参考: https://ja.wikipedia.org/wiki/0.0.0.0

なので、このままだとMacの外部にポート開放しようとしてるけど大丈夫？という意味で
`「ネットワーク受信接続を許可しますか？」`
とMacのファイアウォールが聞いてきます。
用途もなしにこのまま「許可」すると、セキュリティ上良くないです。
「拒否」しても外部に公開されないだけで、`127.0.0.1` には公開されているので、
ローカルからはアクセス可能です。

# 警告を消す方法
サーバ起動のIPを以下のように指定します(ポートは任意)
`127.0.0.1:8080`

`127.0.0.1` はループバックアドレスと呼ばれていて、`localhost`でアクセスできるあれです。
<img width="407" alt="スクリーンショット 2020-05-13 0.26.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6373/502c8650-07ae-58f1-bed2-00a544a954b1.png">
ループバックアドレスにだけサーバを公開すれば警告は止まります。

以下のginのサンプルアプリだと設定ファイルでループバック指定しているので警告が出ません。
https://github.com/eddycjy/go-gin-example/blob/master/conf/app.ini

**!注意! 単純に書き換えるとデプロイ先のサーバがアクセスできなくなります(実装はこの後説明)**

# 実装
Macローカルでは `127.0.0.1`、それ以外のサーバでは `0.0.0.0`
を環境変数で切り替えられるように実装します。

```go
srv := &http.Server{
    Addr:    fmt.Sprintf("%s:%d", os.Getenv("HOSTNAME"), os.Getenv("PORT")),
    ...
}
srv.ListenAndServe()
```
環境変数の切り替え方法は種々あるので、ここでは省略します。

# 参考記事
[Suppressing Accept Incoming Network Connections warnings on OSX](https://medium.com/@leeprovoost/suppressing-accept-incoming-network-connections-warnings-on-osx-7665b33927ca)
[Firewall blocks Go development server](https://stackoverflow.com/questions/18978622/firewall-blocks-go-development-server)
[macでGo echoサーバーを再起動する度にファイアウォールのアラートが出るのを回避する](https://qiita.com/k_kinukawa/items/cc0bb6609e3adc026b41)

# おまけ
### srv.ListenAndServe()のデフォルト値
srv.ListenAndServe() にAddrを渡さないとデフォルト値として、
`:http` が使われます。
これは `0.0.0.0:80` の意味になります。
`:8080` こういうのをあえて指定しているのをたまに見かけますが、それも上のようにホスト名が解釈されます。
参考:
https://golang.org/pkg/net/http/#Server.ListenAndServe
https://golang.org/pkg/net/#Dial (たぶんここ）

### なぜ警告が毎回出るのか
`go run` で毎回自動コンパイルしているのが原因かなーと予想しています。
開発時はビルドがかわりまくるので、FWの設定でなんとかするのは厳しそうですね。

### 調べにくさ
「golang ネットワーク受信接続を許可しますか」
で調べても、ファイアウォールオフにするとか、設定で許可するとか、ハックなことするとか
そういうのしかヒットしないので
「golang mac firewall」
でググる必要がありました。
なので日本語の警告名まんまでヒットしそうな記事を書きました。

### chromeの 0.0.0.0 論争
[Google Chromeで0.0.0.0が使えない問題](https://qiita.com/amuyikam/items/0063df223aed40193ba9#google-chrome%E3%81%A70000%E3%81%8C%E4%BD%BF%E3%81%88%E3%81%AA%E3%81%84%E5%95%8F%E9%A1%8C)

調べてる過程で面白い記事を見つけました。
今まで、 `localhost` or `127.0.0.1` でローカルアクセスしてましたが、chromeでは `0.0.0.0` でも良いみたいです。
ただ、wikiには

```
0.0.0.0は全ビットが0のIPアドレスであり、無効、不明、または適用外の対象を指定するために使用されるルーティング不可のメタアドレスである
https://ja.wikipedia.org/wiki/0.0.0.0
```
とあり、本来はルーティングしてはいけないものなので、アクセス用途で使うのはやめておいたほうが良さそうです。
Google 安全性の低いアプリのアクセスを有効にする方法

# 目的

- Googleのセキュリティ設定である「安全性の低いアプリのアクセス」の設定方法をまとめる

# 前提情報

- 本作業は２段階認証を有効にしているアカウントでは実施できない。
- 先に２段階認証を解除する必要がある。

# 詳細

1. 安全性の低いアプリを許可したいアカウントでGoogleにログインする。
1. Googleのホームにアクセスする。
1. 下記の矢印部分をクリックする。

    <img width="1789" alt="スクリーンショット_2020_05_12_11_17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/b774fb0e-8cdf-5205-7329-33007fc2a2c1.png">

1. 「Googleアカウント管理」をクリックする。

    <img width="1074" alt="スクリーンショット 2020-05-12 11.19.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/762fde3a-803a-470e-c654-3365aca40bc6.png">

1. 「セキュリティ」をクリックする。

    <img width="1780" alt="Google_アカウント.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/7452fbe4-f0b9-51bc-40aa-7c7245e6f287.png">

1. 「アクセスを有効にする(非推奨)」をクリックする。

    <img width="1790" alt="Google_アカウント.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/880f7d8c-c5ac-1a22-7781-fad92a9345d5.png">

1. 矢印の部分をクリックして有効にする。

    <img width="1794" alt="安全性の低いアプリのアクセス_と_Google_二段階認証設定をONにする方法_-_Qiita.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/c036563c-777c-e81a-7039-8d67e6a17b74.png">
JavaScriptの変数、定数、関数

## はじめに
改めて基本を学びました。

##変数varとlet
<b>・varは関数内のどこからでも呼び出すことが可能
・letはブロック{}内のみ参照可</b>

varを使った場合

```javascript
const Test = (scope) => {
  if (scope === 'function') {
    var message = 'テスト'
   }
 console.log(message)  //「テスト」が表示される
}
Test('function')
```

letを使った場合

```javascript
const Test = (scope) => {
  if (scope === 'block') {
    let message = 'テスト'
   }
 console.log(message)  //エラーになる
}
Test('block')
```
下記の様にブロック内だとログが出力できる

```javascript
const Test = (scope) => {
  if (scope === 'block') {
    let message = 'テスト'
    console.log(message)  //「テスト」が表示される
   }
}
Test('block')
```
letの方がES６から採用された変数になります。
参照できる範囲をブロック内に限定したことで、万が一関数の別の場所に同じ変数名があったとしても、それによるバグが起きなくなり、保守性が向上しました。

#定数const
定数は基本的に代入した値を変更できません。
しかし、配列やオブジェクトは定数宣言しても変更（追加や削除）が可能です。

```javascript

const name = "太郎";
name = "花子"; //変更不可

const numArray = [1, 2, 3];
numArray.push(4); //変更可能 

const textObject = {id: "hoge" value: "fuga"}
textObject["name"] = "bar" //変更可能
```

##関数

名前付き関数

```javascript

function nameFunc(message) {
  console.log(message);
};

nameFunc('これは名前付き関数です。');
```
アロー関数

```javascript

const arrowFunc = (message) => {
  console.log(message)
};

arrowFunc("これはアロー関数です。");
```

ワンラインのアロー関数

```javascript

const users = {
 setUser: "Shimpex"
};

const getUsername = (userId) => users[userId]; //returnを省略し、１行で記述できる

//  複数行で書いた場合
//  const getUsername = (userId) => {
//    return users[userId]
//    } ;

const username = getUsername('setUser');
console.log(username);

```

##参考
https://www.youtube.com/watch?v=EXxIVEC72mU
【Laravel Homestead】Homestead.yamlの変更したらvagrant reload

メモとして残します。

先日、こんなことがあった。。
[【Laravel Homestead】Homestead.yamlがを修正して、再度Vagran Upで起動したが反映されない？](http://qiita.jp)
しかし、めちゃくちゃ優しい方が、コメントでもっと簡単な方法を教えてくださいました。
簡単な方法というよりは、

Homestead.yamlを変更してからVagrant destoryをして、Vagrant upをしてましたが、reloadというコマンドをすればいいと、コメントをいただきました。

#■対処法
```shell
vagrant reload --provision
```

#■おわりに
今回はHomesteadを例に出しましたが、
VCCWだったら、site.ymlの変更時にもこの方法で反映させるみたいですね。。
【Python】listの使い方2　リスト値の参照、要素数、最大値、最小値

#はじめに
とみーさんのブログの[Python入門者のための学習ロードマップ](https://obgynai.com/python-roadmap/)に沿ってPython学習を進めています。
今回は[【Python入門】list（リスト）の使い方の総まとめ（前編）](https://obgynai.com/python-list-1/)の後半を扱います。

#対象者
- とみーさんブログで学習中の方
- listの使い方の概要を知りたい方

#環境
Google Colaboratory

#学習内容
1. リスト値の参照、スライス

2. リストの要素数、最大値、最小値

##1　リストの値を参照
```
#リスト値の参照　No(index)
#リストの値を要素Noで参照する方法
list_num = [1,2,3,4]    #1,2,3,4のリストを作成
print(list_num[0])      #リストの左端をprint
```
```text:実行結果
1
```
```
#逆から
print(list_num[-1])    #リストの右端をprint
print(list_num[-3])    #リストの右から3つめをprint
```
```text:実行結果
4
2
```

```
#スライス
list_num = [0,1,2,3,4,5,6,7,8,9,10]    #0,1,2,3,4,5,6,7,8,9,10のリストを作成
print(list_num[1:5])                #1から5までをprint
```
```text:実行結果
[1, 2, 3, 4]　　　　*終了要素の1つ前までの範囲で取得されるのに注意
```

とびとびで取ってきたいとき

```
print(list_num[1:10:2])    #1から10の間で2ステップでprint
```
```text:実行結果
[1, 3, 5, 7, 9]
```


2次元で取得したいとき

```
list_two_dim =[[1,2,3],[4,5,6],[7,8,9]]
print(list_two_dim[0][1])
```
```test:実行結果
2
```

0: 1, 2, 3　つまり、0行目の1列目をprintしています。なので、2になる
1: 4, 5, 6　列の側も左から0, 1, 2です
2: 7, 8, 9
##2　リストの要素数、最大値、最小値
```
#リストの要素数　len()
list_num = [0, 1, 2, 3, 4]    #0,1,2,3,4のリスト作成
print(len(list_num))          #len()でlist_numの要素数をprint
```
```text:実行結果
5
```

```
#最大値
list_num = [0,4,2,5,2,6]
print(max(list_num))
#最小値
print(min(list_num))
```

次回は追加append, expend, insertと削除clear, pop,remove, delについて予定しています。

#参考
[【Python入門】list（リスト）の使い方の総まとめ（前編）](https://obgynai.com/python-list-1/)
MATLAB R2019b + Psychtoolboxによる心理実験プログラムのコンパイルに関しての備忘録

#はじめに
コロナウイルス感染防止の関係で対面での実験が行えなくなったので、今まで実験室で行っていた実験のプログラムをコンパイルして実行ファイル化し、リモートで実験をやることになった。
その際、コンパイルするにあたって色々つまづいたところの個人的メモです。
初投稿なので、不慣れなところもあるかもしれませんがよろしくお願いします。

#環境
- Windows 10
- MATLAB R2019b
- Psychtoolbox

#実験プログラムをコンパイルしてみる
今まで使っていた実験プログラムを特にいじることなくMATLAB Compilerでコンパイルしてみた。
![2020-05-11 (7).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/345945/99e4e1bc-743b-12ed-7462-948fb54aca8c.png)
しかし、ダメ。

###考えうる原因
 - Psychstartupがうまくいってない
 - 無効なMEXファイル

調べたら、どうやら**MATLAB R2019b**と**Psychtoolboxの最新バージョン**の組み合わせだとうまくコンパイルできないっぽい。

#Psychtoolboxのダウングレード
Psychtoolboxをダウングレードしていく。
`>> UpdatePsychtoolbox(PsychtoolboxRoot, 'PREV')`

Revisionのバージョンを10579まで下げたら直った。

`>> PsychtoolboxVersion
ans = 
    '3.0.16 - Flavor: beta - Corresponds to SVN Revision 10579`

調べたらRevision 10580にてScreen等の変更があったようで、これが原因かもしれない。

#ダウングレード大事
ダウングレード大事ですね・・・。
あといちいちコンパイルするのも面倒なので、PsychopyとかProcessingでプログラムを書いた方がいいのかもしれません。(Psychopyだと実験結果のデータを格納するフォルダを勝手に作ってくるので、パス操作とかそういうのに詳しくない被験者にも安心かも)

#追記
Windows 64bitで実行ファイルを実行するときは、GStreamerのMSVC runtimeを入れるのをお忘れなく。
BULMAについてまとめてみた。



railsで、オリジナルアプリを作成中のプログラミング歴3ヶ月の者です。

オリジナルアプリを作成する中で、rails6にBootstrapを入れようとするとなかなかの手間で、エラーが続き時間を食ってしまったので、方向転換しました。
参考にした記事(https://qiita.com/kazutosato/items/d47b7705ee545de4cb1a)

cssフレームワークをBULMAにしようするので、簡単に概要をまとめてみました。

[BULMA](https://bulma.io/)
上記が公式ホームページになります。

###BULMAとは？

モバイル優先のオープンソースのcssフレームワークです。
Bootstrapしかcssを知らなかった私からみた、大きな違いは、CSSだけで成立しているということです。


```
<div class="columns">
  <div class="column">
    First column
  </div>
  <div class="column">
    Second column
  </div>
  <div class="column">
    Third column
  </div>
  <div class="column">
    Fourth column
  </div>
</div>
```

全体をcolumnsクラスで囲って、左から4カラム並べられるようです。
実にシンプル。

```
<div class="columns">
  <div class="column is-four-fifths">is-four-fifths</div>
  <div class="column">Auto</div>
  <div class="column">Auto</div>
</div>
```

上のBULMAでは、最初のカラムだけ全体を5としたときの４を大きさに指定して、残りの二つのカラムでは自動で残りの幅を二等分して配置してくれるみたいです。
これもわかりやすくて、使いやすそう。


###BULMAの基本構文（修飾子）
```
<a class="button">
  Button
</a>
```

クラスにボタンを渡すと、ボタンができます。

```
<a class="button is-primary">
  Button
</a>
```
基本的に、BULMAは"is-"または"has-"で始まるみたいです。直感的に英語の文章みたいでわかりやすいですね。
primaryは色の指定です。

```
<a class="button is-small">
  Button
</a>
```

is-[small or medium or large]で大きさの指定ができます。
上記では、buttonクラスも存在するので、小さなボタンが出来上がります。



上記で紹介したのは、BUlMAのごく一部です。
こちらの記事が、とても参考になりました！！！
>[CSSフレームワークのススメ - BULMAの導入と覚え書き](https://qiita.com/belq/items/10ec41f656e47ee2b540)
Vue Test Utils カスタムコンポーネントでv-modelを適用したときのテスト

# Vue Test Utils カスタムコンポーネントでv-modelを適用したときのテスト

## やりたいこと
以下のようなカスタムコンポーネントにv-modelを適用したときに入力値をdataに反映させてテストをする。

```sample.vue
<template>
  <div>
    <formInput v-model="test" type="text"></formInput>
  </div>
</template>

<script>
import formInput from '~/components/formInput.vue'

export default {
  components: { formInput },
  data() {
    return {
      test: ''
    }
  }
}
</script>
```

## NG例
input要素だと[ドキュメント](https://vue-test-utils.vuejs.org/ja/api/wrapper/#setvalue)にある通り、以下のようにdataに値を反映することができる。
しかし、上記のようなカスタムコンポーネントでこのコードを実行すると"wrapper.setValue() cannot be called on this element"のようなエラーが表示される。

```sample.spec.js
import { shallowMount } from '@vue/test-utils'
import Foo from '~/pages/sample.vue'

const wrapper = shallowMount(Foo)

describe('input要素だとこれでパスする', () => {
  test('テストする', () => {
    const textInput = wrapper.find('[type="text"]')
    textInput.element.value = 'some value'

    expect(wrapper.vm.test).toBe('some value')
  })
})
```

## 解決策
inputイベントを発火させることで、入力値をdataに反映させてテストすることが可能。

```sample.spec.js
import { shallowMount } from '@vue/test-utils'
import Foo from '~/pages/sample.vue'

const wrapper = shallowMount(Foo)

describe('カスタムコンポーネントのv-modelでもこれでパスする', () => {
  test('テストする', () => {
    const textInput = wrapper.find('[type="text"]')
    textInput.vm.$emit('input', 'some value')

    expect(wrapper.vm.test).toBe('some value')
  })
})
```
## 参考
[こちら](https://qiita.com/simezi9/items/c27d69f17d2d08722b3a)にある通り、v-modelはv-onとv-bindを1行で表現したものなので、イベントを発火することでdataを更新することができます。

```
<input v-model="searchText">
<input :value="searchText" @input="searchText = $event.target.value">
```

誰かの役に立つことを願って。。
OpenModelicaで感染症の数理モデル「SIRモデル」を実装する（規制、緩和を繰り返す例）

# 基本のSIRモデルで接触率（感染率）を周期的に変化させる
既出記事、「[OpenModelicaで感染症の数理モデル「SIRモデル」を実装する（死亡率、再感染率を反映する）](https://qiita.com/nobby-n/items/fec14c16aa40f23bc123)」で作成したモデルで 再感染率を周期的に変化させ、規制状態と緩和状態を繰り返すとどのようなグラフになるかシミュレーションしてみます。

このモデルの前提条件
- 基本のSIRモデルとし、死亡率、再感染率は 0とする
- ワクチンは使用しない

**なお、以下のシミュレーションは全て仮のパラメータでモデルの検証をしただけであり、実際の数値を反映・予想したものではないことをお断りしておきます。**

# モデルの変更点
cl_SIRbetaInput の β値入力に TimeTableで 15日おきに 100%、20%（80%減）を繰り返す設定にします。60日以降は100%のままとします。
β値の変化をグラフ上で見やすくするために gainを追加して、100, 20 に変換。

## 作成したモデル
![30_SIR_timetable.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620386/9b83c11e-29d8-8174-9b7e-12f6e06c8249.png)

# シミュレーション結果
## 感染可能者、感染者、新規感染者、回復者をグラフで見る
![30_SIR_timetable_graph.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620386/0f5898f2-7637-0941-068b-c3689fc85f0f.png)


## 感染者、新規感染者のみのグラフ
感染者の推移だけを拡大して確認します。
基本のSIRモデルで接触率を100%、20%と周期的に変化させると感染初期には規制を緩和した途端に新規感染者数が増加し始め、再度規制すると減少していくことが確認できます。
また、時間が経過して（グラフの60日目以降）回復者（抗体獲得者）が50%を超えるくらいに増えれば、接触率が高まっても新規感染者数は漸減していくようです。
![31_SIR_timetable_graph.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620386/2f8e42af-0455-ce7f-c5ad-c21f2e65bd0a.png)

## 緩和時でも接触率を50%減程度に管理した場合のグラフ
60日までは管理した効果で抑えられているように見えます。
ただし、そこから緩めてしまうと新規感染者が激増します。
抗体獲得者が一定数に満たないうちに緩和するといけないようです。
![32_SIR_timetable_graph.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620386/e52871cf-36b3-f10e-4a8e-5bd1ef524224.png)

# 関連記事
[OpenModelicaで感染症の数理モデル「SIRモデル」を実装する](https://qiita.com/nobby-n/items/48803407f67f62b2c8f9)
[OpenModelicaで感染症の数理モデル「SIRモデル」を実装する（ワクチンの効果を見る）](https://qiita.com/nobby-n/items/87b7d6eb470c2c54e167)
[OpenModelicaで感染症の数理モデル「SIRモデル」を実装する（死亡率、再感染率を反映する）](https://qiita.com/nobby-n/items/fec14c16aa40f23bc123)
[感染病の数学予測モデルの紹介　(SIRモデル）](https://qiita.com/kotai2003/items/3078f4095c3e94e5325c)

# OpenModelicaモデル
GitHub上で公開しました。
[pk_SIRｍodel.mo](https://github.com/Nobby-n/modelica/tree/9bc2ee15c3560373f2b5f6081820ed88e4323174/SIR)
PythonでABC098-Cを解く

### はじめに
PyBegiの人が解いてたので、便乗して解きます。

### [ABC098-C Attention](https://atcoder.jp/contests/abc098/tasks/arc098_a)

**考えたこと**
問題の制約的に最大でも$O(N)$程度で収めないといけないので、それぞれのリーダーごとに計算していては間に合わない。そこで、累積和を使います。これで毎回$sum$しなくても各リーダーごとに計算できます。ちなみに、Pythonの$sum$の計算量は$O(N)$です。ここまで分かったらやるだけ。

```python
n = int(input())
s = input()

count_e = [0] * n
count_w = [0] * n
for i in range(n):
    if i == 0:
        if s[i] == 'E':
            count_e[i] = 1
        else:
            count_w[i] = 1
        continue
    if s[i] == 'E':
        count_e[i] = count_e[i-1] + 1
        count_w[i] = count_w[i-1]
    else:
        count_e[i] = count_e[i-1]
        count_w[i] = count_w[i-1] + 1

ans = 10 ** 9 #e+wは高々3*10**5程度ですが、余裕を持たせています
for i in range(n):
    if s[i] == 'E':
        e = count_e[-1] - count_e[i] #累積和を使う
        w = count_w[i]
    else:
        e = count_e[-1] - count_e[i] #累積和を使う
        w = count_w[i] - 1 #自分の分を引く
    ans = min(ans,e+w)
print(ans)
```

### まとめ
制約を見て使えるアルゴリズムを思いつけるようになってきているので嬉しい。ではまた、おやすみなさい。
GASでReactを実行するテンプレート

## はじめに
Google Apps ScriptにはWebAppsという機能があり、簡易なWebアプリを構築し、配布する事が出来ます。例えば個人的に開発したWebアプリを少し無料でお試し公開したい、社内で業務改善ツールとして使ってもらいたい、そんな時に活躍します。この記事ではそんなGoogle Apps ScriptをスムーズにReactで構築出来るボイラープレートを作りましたので、是非使って頂ければと思い、以下に説明を記載します。

https://github.com/ymuichiro/react-gas-boilerplate

## テンプレートの画面イメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633687/c29eabab-7a15-248b-3e29-160ae35d41ed.png)


## 利用するライブラリ
以下の通りとなります。ローカルからGoogle Apps Scriptを更新する為に clasp というツールを利用します。また、通常のWebサーバーへの構築と異なり、素のJavascriptをアップロードする事が出来ない為、Webpackのプラグインを追加しています。
※ Webpackのバージョンが古いものを利用しているのは、利用したいプラグイン`html-webpack-inline-source-plugin`の更新が随分前からされなくなっている為で、最新のWebpack環境で使う方法を私は見つけられませんでした。

```package.json
{
  "dependencies": {
    "@emotion/react": "^11.9.3",
    "@emotion/styled": "^11.9.3",
    "@mui/icons-material": "^5.8.4",
    "@mui/material": "^5.8.7",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "recoil": "^0.7.4",
    "typescript": "4.4.4"
  },
  "devDependencies": {
    "@google/clasp": "^2.4.1",
    "@types/google-apps-script": "^1.0.49",
    "@types/node": "^16.7.13",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@types/webpack": "^5.28.0",
    "html-webpack-inline-source-plugin": "1.0.0-beta.2",
    "html-webpack-plugin": "4.2.0",
    "ts-loader": "6.2.2",
    "webpack": "4.42.1",
    "webpack-cli": "3.3.11",
    "webpack-dev-server": "3.10.3"
  }
}
```

## 使い方

### 初期設定

本レポジトリをローカルに取得し、依存モジュールをインストールして下さい。

```
git clone https://github.com/ymuichiro/react-gas-boilerplate.git
yarn install
```

ローカルからGoogle Apps script側を操作する為、最初にログインを行う必要があります。

```
yarn run init
```

ソースファイルのアップロード先を指定します。`.clasp.json`を開き、`scriptId`にアップロード先となるスクリプトファイルのIDを入力して下さい。<br>

```json
{
  "scriptId": "******************",
  "rootDir": "./server"
}
```

スクリプトファイルのIDはURLの以下****の箇所となります。

```
https://script.google.com/home/projects/****/edit
```

問題なく構築が出来たか確認します。

```
yarn run build
```

処理が完了したらエディタの画面より新規Web Appsを[デプロイ](https://developers.google.com/apps-script/guides/web#deploy_a_script_as_a_web_app)して下さい


### UIの確認を行うとき

以下を実行し、dev-serverを起動します

```
yarn run start
```


## ReactからApp Scriptを呼ぶ時
`src/functions/hello.ts` に以下のようなスクリプトがあります。

```
export async function callhello() {
  return new Promise((resolve, reject) => {
    google.script.run
      .withSuccessHandler((result: string) => {
        alert(result);
      })
      .withFailureHandler(() => {
        alert('error at withFailureHandler');
      })
      .hello();
  });
}
```

これはWebアプリケーション側よりGAS上の関数を実行する記載方法で以下のような構文になります。

```
google.script.run.withSuccessHandler(__コールバック関数__}).実行するGASの関数名();
```

`実行するGASの関数名`となっている所にGoogle Apps Script側の任意の関数名を記載します。これだけでクライアント側とGoogle Apps Script側で連携する事が出来てしまいます。

上記、もし何かのお役に立てばお使い頂ければ幸いです。
宜しくお願い致します。
date_selectで入力した日付がDBに保存されない！

#date_selectとは？
生年月日を入力してもらう際、ユーザーに直接入力してもらうのではなく

選択式で入力してもらうようにしたい場合

date_selectというものを使う

```haml:
.member-main__form
  = f.label '生年月日', {class: 'member-main__form--label'}
  %span.member-main__form--require 必須
  %p.member-main__form--select
    != sprintf(f.date_select(:birthday, require:true,with_css_classes:'XXXXX', prompt:"--",use_month_numbers:true, start_year:Time.now.year, end_year:1900, date_separator:'%s'),'年 ','月 ')+'日'
```

<img width="682" alt="スクリーンショット 2020-05-12 22.42.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595035/ab925961-7fd0-3616-8e0c-14d41b5d71ed.png">

#問題発生
実装したはいいが問題が発生した

選択した生年月日の数値がDBに保存されていないのだ

#原因
色々調べた結果マイグレーションファイルに着目した

```ruby
t.integer :birthday,  null: false
```

このデータ型のintegerが原因ではないかと考えた

integerとは整数だけを保存する型であり

date_selectで入力した数値は整数では保存されないのではと思い

以下のようにdate型にしたみた

```ruby:
t.date :birthday,  null: false
```

するとDBにしっかりと保存することができた

#DBを確認
保存された内容をSequel Proで確認してみると
<img width="98" alt="スクリーンショット 2020-05-12 23.42.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595035/7c66175d-f21c-dd7b-2cdd-26a4ac7e00e8.png">

上のように年-月-日となって保存されており

整数以外に記号"-"が入っているのが確認できる

これではinteger型で保存できないのは当然である

# まとめ
date_selectで入力させるときはDBの方はdate型で保存させるようにしよう
【Day70】積み上げ日記

##今日やったこと
■チャットアプリの作成
−Firebaseの実装
　−送信ボタンを押したらどういう機能が必要か
　−ダッシュボードの設定

■TableViewの復習

##疑問点
■なぜcountが突然でてきたのか？
−indexPathと組み合わせることで、インクルメントの機能を持つことができる

##参考記事
■JSONの使い方
https://techacademy.jp/magazine/15272
rails routesコマンドについて

【開発環境】
macOS Catalina
バージョン 10.15.3
ruby 2.5.1
Rails 5.2.4.2
visual studio code

#rails routesコマンドについて
railsでルーティング設定をした後にルーティングの行き先どうなってるっけという時に使えます。

```
$ rails routes
```

ターミナルに入力すると

例

```
Prefix  Verb  URI Pattern       Controller#Action
posts   GET   /posts(.:format)  posts#index
（以下省略）
```

という風に表示されれば成功です。

Verb GET : HTTPメソッド、今回はGETです。
GETメソッドはページを表示する操作のみを行う時に使いますね。

URI Pattern : WebサイトにおけるURLのようなものです。

Controller#Action posts#index : リクエストを処理するコントローラーとアクションを表しています。
今回ですと、post_controller.rbのindexアクションで処理するよという意味です。

これでルーティングがどこに行っているか確認できますね。

##おわりに
今回はrails routesコマンドについてまとめました。
よく使うコマンドなので覚えておきたいですね。

最後までご覧いただきありがとうございました。
CSSで長方形の画像の中央を丸く切り取って表示する

## はじめに

CSSで画像の中央を丸く切り取って表示する方法についてまとめます。
正方形でない画像でも対応できるようにしました。

自分用のメモです。

## 方法

<img src="https://1.bp.blogspot.com/-8_l_PiLfpLM/Xexql96D-6I/AAAAAAABWhI/sraryavz1Og3RznKXkux8Rf1MEcg1hZbACNcBGAsYHQ/s1600/job_sakaya_man.png" width="170">

この画像の中央を丸く切り取って表示したいとします。

### 1. 画像を表示したいところに空の`div`要素を書く

```html:index.html
<div class="circle-img daiginjo"></div>
```

丸く切り取るためのクラス名`circle-img`と、この画像を表わすクラス名`daiginjo`をつけておきます。

### 2. 中央を丸く切り取るためのCSSを書く

```css:styles.css
.circle-img {
  width: 100px;
  height: 100px; /*widthとheightは同じ値にする*/
  border-radius: 50%;
  background-size: cover; /*画像をいい感じの大きさに調整*/
  background-position: center center; /*画像をタテヨコ両方向に中央寄せ*/
}
```

`width`と`height`はお好みの値にしてください。

### 3. 画像を背景画像として設定する

```css:styles.css
.daiginjo {
  background-image: url(画像のパス);
}
```

丸く切り取りたい画像を、手順1で書いた空の`div`要素の背景画像として設定してあげましょう。

### 4. できあがり

<img width="100" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445469/966f273e-b4a4-82a1-27d7-58bde3948404.png">

めでたく画像の中央を丸く切り取って表示することができました。

## まとめ

このようにすれば`circle-img `を使い回しすることができるので、便利だと思います。

おしまい。

## 参考文献

[画像を丸く円形にくり抜いて表示するCSS - にしし ふぁくとりー](https://www.nishishi.com/css/trim-image-to-circle.html)
（NVIDIA）物体向き推定　自己教示学習の内容理解

※テキストをそのまま貼り付けており、失礼します。

##対象論文
（NVIDIA）物体向き推定　自己教示学習（CVPR2020採択）
Self-Supervised Viewpoint(SSV) Learning from Image Collections
https://arxiv.org/abs/2004.01793

##概要
教師なしでviewpointを推定。
GANでviewpoint（向き）とstyleを推定。
誤差の概念は、①GAN・Discriminator、②画像⇔viewpoint（向き）・styleの可逆性、③反転の可逆性、の3つ。
2年前の教師あり推定と同等の性能を実現。

##詳細
CVPR 2020採択。
向き推定だが、他にも利用できる。

viewpoint（向き）
　azimuth 　　方位角
　elevation 　仰角（上下方向）
　tilt　　　　傾き（左右方向）

　角度それぞれをベクトルの回帰問題と正負のクラス分類に置き換えて推定

Viewpoint（向き） NetworkとSynthesis（合成） Networkの2つで構成

（1）Viewpoint（向き） Network
　①Viewpoint（向き）、②Style（顔）、③Real or synthetic（合成）判定の3つを推定
　→Styleを顔と仮定すると理解しやすい

（2）Synthesis（合成） Network
　①Viewpoint（向き）、②Style（顔）から④Synth（合成）を推定
　→①Viewpoint（向き）は変えない
　　②Style（顔）を別のStyle（顔）に置換

Viewpoint Networkの誤差は3つ（細かくは4つ）

（1）Generative consistency（一貫性）
　(a)Image consistency（一貫性）
　　Realと④Synth（合成）それぞれから学習済VGGで特徴量を抽出、誤差算出
　　→Realと④Synth（合成）から同じ特徴量が得られるようにしたい

　(b)Style（顔） and viewpoint（向き） consistency（一貫性）
　　サンプルの①Viewpoint＋②Styleと、
　　サンプルの①Viewpoint＋②Style→Synthesis（合成） Network→④Synth（合成）→Viewpoint Network→①Viewpoint＋②Styleの、
　　誤差を算出
　　→Synth（合成）から同じ①Viewpoint＋②Styleを推定したい

（2）Symmetry constraint
　Realの①Viewpointと、
　Realを反転→Viewpoint Network→①Viewpointのa（方位角）・t（傾き）は正負を反転、e（仰角）はそのままで、
　誤差を算出
　→反転しても仰角（e）は変わらないことに基づく
　→反転したRealから同じ①Viewpointを推定したい

（3）Discriminator loss
　Realと、④Synth（合成）それぞれと、
　Realと、④Synth（合成）それぞれ→Viewpoint Network→③Real or synthetic（合成）判定、
　との誤差
　→③Real or synthetic（合成）判定を正しく判定したい

Synthesis（合成） Network
　HoloGAN
　　3D ConvNet→3D Rotation→3D ConvNet→2D Projection→2D ConvNet
　①Viewpoint（向き）、②Style（顔）から④Synth（合成）を推定
　→①Viewpoint（向き）は変えない
　　②Style（顔）を別のStyle（顔）に置換

Synthesis（合成） Networkの誤差は3つ

（1）GAN loss
　Realと、
　④Synth（合成）→Viewpoint Network→③Real or synthetic（合成）判定と、
　の誤差
　Viewpoint Networkの「（3）Discriminator loss」と対。
　→Synth（合成）をRealとだましたい

（2）Style（向き） and viewpoint（向き） consistency（一貫性）
　サンプルの①Viewpoint＋②Styleと、
　サンプルの①Viewpoint＋②Style→Synthesis（合成） Network→④Synth（合成）→Viewpoint Network→①Viewpoint＋②Styleの、
　誤差を算出
　Viewpoint Networkの「（1）Generative consistency（一貫性）」の「(b)Style（顔） and viewpoint（向き） consistency（一貫性）」と同じ。
　→Synth（合成）から同じ①Viewpoint＋②Styleを推定したい

（3）Flip image consistency（一貫性）

　サンプルの①Viewpoint＋②Style→Synthesis（合成） Network→④Synth（合成）と、
　反転した①Viewpoint＋②Style→Synthesis（合成） Network→④Synth（合成）の反転画像の、
　誤差
　→反転以外同じ①Viewpoint＋②Styleから反転以外同じ画像を生成したい

第2ネットワークのデモ
②Style固定で①Viewpointのa（方位角）・t（傾き）、e（仰角）を変える

定量＆定性評価
　2年前の教師あり推定以上。
　去年の教師あり推定にやや劣る。

##参考
https://github.com/NVlabs/SSV
https://research.nvidia.com/publication/2020-03_Self-Supervised-Viewpoint-Learning
https://www.nvidia.com/en-us/gtc/session-catalog-details/?search=S22193
https://ai-scholar.tech/articles/viewpoint/viewpoint-ssv-pascal3d-hologan-cycle-consistency
鉛筆画風のImageEffectシェーダコード

Twitterにアップした鉛筆画風のImageEffectシェーダコードを貼っておきます

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">エッジ抽出周りを触っていたら、鉛筆画っぽくなるImageEffect出来た。 <a href="https://t.co/EySZAODW73">pic.twitter.com/EySZAODW73</a></p>&mdash; MIYAKE (@ScreenPocket) <a href="https://twitter.com/ScreenPocket/status/1260193871511711744?ref_src=twsrc%5Etfw">May 12, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

エッジ抽出で全然別のシェーダを触っていたのですが、
ふと「パラメータ調整したら鉛筆画っぽく出来るかも？」と思い色々触ったところ、
中々気に入った見た目が出来たので貼っておきます。

```glsl:Pencil.shader
Shader "ScreenPocket/ImageEffect/Pencil"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
    }
    
    SubShader
    {
        // No culling or depth
        Cull Off ZWrite Off ZTest Always

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                return o;
            }

            sampler2D _MainTex;

            //隣接ピクセルの平均色を取得する
            fixed4 Gather(sampler2D tex, float2 coord, float2 offset)
            {
                return (tex2D( tex, coord + offset)
                      + tex2D( tex, coord + float2(offset.x, -offset.y))
                      + tex2D( tex, coord + float2(-offset.x, offset.y))
                      + tex2D( tex, coord - offset)) / 4.0;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                fixed4 color = tex2D( _MainTex, i.uv );
                
                //隣接ピクセルの平均色を取得
                fixed4 neighbor = Gather(_MainTex, i.uv, _ScreenParams.zw - 1.0);
                //隣接色との差を絶対値で取る
                fixed4 neighborDistance = abs(color - neighbor);
                
                //RGBの中で一番大きい差を求める
                fixed maxValue = max(neighborDistance.r, neighborDistance.g);
                maxValue = max(maxValue, neighborDistance.b);
                
                //平滑化させつつ値調整
                return (1.0 - (saturate( maxValue + 0.9 ) - 0.9) * 6);
            }
            ENDCG
        }
    }
}

```

![スクリーンショット 2020-05-12 22.06.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61266/f700de5a-6da1-92a7-f0d6-e380e2a66beb.png)
![スクリーンショット 2020-05-12 22.19.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61266/f1ca8d10-67b5-588e-3875-3198e09a3553.png)

マジックナンバーが多くて申し訳ないけど、とりあえず版ということで。
gitブランチ作成コマンド

### 準備

```
$ git clone (リポジトリのURL)
$ cd (リポジトリ名)
$ git branch
* master
```

### 新しくブランチを作成

```
$ git checkout -b (作成したいブランチ)
$ git push -u origin (作成したいブランチ)
```

## 既存のリモートブランチをベースに作成する場合

```
$ git checkout -b (作成したいブランチ) origin/(作成したいブランチ)
$ git push -u origin (作成したいブランチ)
```

# 参考
[git branch コマンド](https://qiita.com/chihiro/items/e178e45a7fd5a2fb4599)
[gitでリモートブランチをローカルにcheckoutする](https://qiita.com/YusukeSuzuki@github/items/3bd5752783fd2c2f8805)
[git コマンド branchの作り方](https://qiita.com/TetsuTaka/items/5ab227a8bd2cd7106833)