OmniAICreator/Qiita-1.07M huggingface dataset:
FlutterでiOS開発において、Simulatorでデバッグ起動は可能だが、Ad Hoc配信で実機起動した場合にアプリ画面が白くなる問題

FirebaseのApp Distributionの機能を使い、アプリを実機にダウンロードすることは無事にできたのですが、
そのアプリを開くと、画面が白くなり、その後進まないという問題がありました。そもそもProvisioning Profileの設定でてこずっていて、何が原因か、問題の切り分けが難しかったので、記録として残しておきます。

問題と解決は以下です。
[https://github.com/flutter/flutter/issues/24887](https://github.com/flutter/flutter/issues/24887)

XcodeでArchiveをする前に、Command Lineで
```flutter build ios --release```
を実行する必要があり、それを実行することで解決をしました。
[公式サイト](https://flutter.dev/docs/deployment/ios)の「Create a build archive」の項に書いてありましたので、きちんと見ていたら解決できていた問題だと思いました。
Provisioning profileやXcodeのVersionの問題かと思い、色々試行錯誤していたのですが、Swiftで開発していた時はこのような問題に遭遇したことがなかった(単に知らなかっただけかも)ので、結構時間を費やしてしまいました。

もし同じ問題を抱えていた人がいた場合、参考になれば幸いです。
Nimで擬似乱数生成

# 普通に擬似乱数
普通に使うならrandomモジュールを使えばOK。
randomモジュールはxoroshiro128+っていうアルゴリズムを使ってるので、
高速だし、精度も結構いい感じらしい。
初期化もrandomize呼ぶだけだし、randとかsample、
shuffleも用意されてるので簡単に使える。
ただし、「このモジュールを暗号化の目的に使用しないでください！」
ってソースコードのドキュメントに書いてあったよ！

```nim
randomize()
echo rand(100)
echo rand(1..6)
echo ["red", "blue", "green", "yellow", "purple"].sample
var cards = ["Ace", "King", "Queen", "Jack", "Ten"]
cards.shuffle
echo cards
```

```text:実行結果
61
5
blue
["Ace", "Ten", "Queen", "Jack", "King"]
```

# 精度を求めるならおなじみのメルセンヌ・ツイスタ
mersenneモジュールを使えばOK。
ただ、初期化もseedを指定する必要があったり、getNumくらいしかないので、
配列からランダムに要素を取得したり、配列をシャッフルしたりする場合は
自前で実装する必要があるっぽい。

```nim
var mt = newMersenneTwister(epochTime().uint32)                                 
for i in 0..5:                                                                  
  echo mt.getNum  
```

```text:実行結果
3216456070
2133890191
954212601
768115248
2338104972
1234515665
```

以上〜。
Laravelで、view('target.view', ['id' => $id, 'name' => $name]) を少しでもスマートに書きたい

## はじめに

皆さんはLaravelライフをエンジョイしてますか？
私は職場でのLaravel歴が長いことから、公式ドキュメントに書いていないような方法で実装を勧めていることが多いです。
Laravel初心者の方には理解に苦しむようなコードを書くことも多く、普段からチームメンバの力量に合わせて適材適所で力を発揮しています。（キリッ）

さて、今回はLaravelでビューにパラメータを渡す際の小技を、初心者の方や使い慣れてきた方向けに紹介していきたいと思います。

### 公式ページに記載されているビューへのパラメータの渡し方
```php:例1
// ビューへ渡すパラメータを事前に連想配列として準備し…
$user = \App\User::first();
$data['user'] = $user;

// ビューを指定する際に引数として渡す
return view('hello', $data);
```

```php:例２
// ビューへ渡すパラメータを事前に準備し…
$user = \App\User::first();

// ビューを指定する際に連想配列として渡す
return view('hello', ['user' => $user]);

```

どうです？イケてますか？連想配列をわざわざ作るコードを書くのは辛いと思いますが…。
私の身の回りの開発者の中でも、特にPHP初心者の方はこの書き方で書いていることが多いです。
上記の例では`$user`のみのため、まだましな方だと思います。

でも過去には、以下のようなコードを書いていた人もチームメンバに遭遇したことがあります。

```php:カオスコード1
$data['a'] = $a;
$data['b'] = $b;
$data['c'] = $c;
$data['d'] = $d;
$data['e'] = $e;

return view('hello', $data);
```

```php:カオスコード2
return view('hello', [
    'a' => $a,
    'b' => $b,
    'c' => $c,
    'd' => $d,
    'e' => $e,
]);
```

いやだ！！、こんな書き方はしたくない！
そもそも変数名と同じキーを指定する連想配列を定義するなんてイケてない！

### 連想配列をわざわざ作るコードなんて書きたくない場合
```php:compact関数を使うパターン
// ビューへ渡すパラメータを事前に準備し…
$user = \App\User::first();

// ビューのパラメータを指定するタイミングに一気に連想配列を作成する
return view('hello', compact('user'))
```

私の場合は上記のようにPHP標準の[compact関数](https://www.php.net/manual/ja/function.compact.php)を利用し、見るからにイケてないコードを意図的に排除しています。
このように書くことで少しはスッキリ感じないでしょうか？
それによりカオスコードが少しは許容できるような見た目になります。

```php:許容できるようになったカオスコード2
return view('hello', compact('a','b','c','d','e'));
```

またビューのパラメータは連想配列で渡すことになってますが、実はオブジェクトを渡す方法もあります。
この方法については後日新しい記事として取り扱う予定です。

以上
初心者によるプログラミング学習ログ 135日目

# 100日チャレンジの135日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

135日目は、

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>135日目<br><br>・Udemyで架空のwebサイトのメイン部分構築<br><br>またしても寝落ち。。。<a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#早起きチャレンジ</a><a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E3%81%A4%E3%81%AA%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアとつながりたい</a> <a href="https://twitter.com/hashtag/photoshop?src=hash&amp;ref_src=twsrc%5Etfw">#photoshop</a></p>&mdash; ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) <a href="https://twitter.com/yudapinokio/status/1185671031303786496?ref_src=twsrc%5Etfw">October 19, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
RNNの勾配消失・爆発についてまとめてみる

# 勾配消失・爆発っていまいちわからない
機械学習を勉強していてRNNの勾配消失・爆発っていまいちわからないな～と感じて、調べた結果何となく腑に落ちたので忘れないうちにまとめておこうと思います。
間違いがあったら教えていただけると嬉しいです。

# そもそも勾配って？
機械学習において学習（最適なパラメータを探すこと）をする際、パラメータ（重さやバイアス）をどちらの方向（減らすのか、増やすのか）に更新するのか決めるのに損失関数（学習で予測した答えと用意した答えの誤差を計算する）というものを参考にします。
パラメータを損失関数が少なくなる（正解との誤差が少なくなる）方向に更新するっていうことですね。
では、各パラメータの更新する方向を決めるのに具体的にはどうやっているのかということですが、
偏微分を使ってそのパラメータが微小に変化したとき損失関数にどれだけ変化を与えるかを求めています。この微小に変化させたとき損失関数が減る方向に微小に変化させる感じです。
勾配は、この各パラメータに対する偏微分をまとめたものです。

# 勾配が消失する理由
まずRNNの計算グラフを見てみます。
![RNNレイヤの計算グラフ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323051/d648617c-2466-ab59-a591-0ae4ff42ae4e.png)
図中のMatMulは行列の積、+は行列の和、tanhはハイパボリックタンジェントとします。
RNNを使った人なら見たことある計算グラフですよね。
逆伝播時の流れをhに着目してみたときの計算グラフは次のようになります。
![RNNの勾配消失について.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323051/07f8436a-6652-d521-7dae-79505bbeb87c.png)
この逆伝播時に重要になってくるのがtanhです。
このtanhが勾配消失の原因になっています。
tanhの微分を見ていくとこの理由がわかります。

```math
\begin{align}
y &= tanh(x) = \frac{ e^x - e^{-x} }{ e^x + e^{-x}} \\
y'&= \Bigl( \frac{ e^x - e^{-x} }{ e^x + e^{-x}} \Bigr)' \\
&=\frac{ (e^x + e^{-x})^2 - (e^x - e^{-x})^2 }{ (e^x + e^{-x})^2}\\
&=\frac{ 4 }{ (e^x + e^{-x})^2}\\
\end{align}
```
ここで微分が終わっていますがのちの説明をしやすくするため変形していきます。

```math
\begin{align}
&=\frac{1}{\Bigl(\frac{e^x+e^{-x}}{2}\Bigr)^2}\\
&=\frac{1}{cosh^2x}\\
&=\frac{cosh^2x-cosh^2x+1}{cosh^2x}\\
&=1-\frac{cosh^2x-1}{cosh^2x}\\
&=1-\frac{sinh^2x}{cosh^2x}\\
&=1-tanh^2x\\
&=1-y^2
\end{align}
```
yは順伝播時のtanhの出力が入ってきます。
これを逆伝播時に流れてくる勾配にかけていきます。
つまり時間を経るたび1より小さい数が乗算されていくため、勾配がだんだんと小さくなっていき消失してしまうわけです。

# 爆発の原因
先ほどの図をもう一度見てみましょう。
![RNNの勾配消失について.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323051/07f8436a-6652-d521-7dae-79505bbeb87c.png)
+の逆伝搬はただデータを流すだけなので、爆発の原因は行列の積MatMulにありそうです。
行列の積の逆伝播は自分とはほかのノードの値を乗算するので、次のようになります。
![RNNの勾配消失について (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323051/0f7c963a-7699-1494-8cef-93bcbf8bd159.png)
見てわかる通り重みWをかけていくので、時間がたつにつれて勾配がどんどん大きくなってしまいます。これが勾配が爆発する理由です。

#おわりに
とりあえず、自分が腑に落ちた理解がこのような感じです。
間違えていたり、もっとわかりやすい考え方あるよと思った方是非教えてください。

#　参考にした書籍や記事
[斎藤康毅-ゼロから作るDeep Learning ❷ ―自然言語処理編](https://www.oreilly.co.jp/books/9784873118369/)
[誤差逆伝播法をはじめからていねいに](https://qiita.com/43x2/items/50b55623c890564f1893)@43x2 様
[計算グラフの逆伝播でtanhの微分を求める](https://qiita.com/miya8/items/3c7b8807aafc93ecef48)@miya8 様
[RNNとLSTMを理解する](http://sagantaf.hatenablog.com/entry/2019/06/04/225239#2-%E5%8B%BE%E9%85%8D%E6%B6%88%E5%A4%B1%E7%88%86%E7%99%BA%E5%95%8F%E9%A1%8C) ブログ「sagantaf」様
[ゼロから作るDeep Learning]勾配式実装準備 Pythonで微分と偏微分を実装してみた。

#はじめに
この記事は**ゼロから作るディープラーニング 5章ニューラルネットワークの学習**を自分なりに理解して分かりやすくアウトプットしたものです。
文系の自分でも理解することが出来たので、気持ちを楽にして読んでいただけたら幸いです。
また、本書を学習する際に参考にしていただけたらもっと嬉しいです。

#微分の知識が必要な理由
ニューラルネットワークの学習では、ニューラルネットワークでの処理から損失関数までを一つの関数と捉えて、各重みやバイアスなどのパラメータを変数と捉えて、各パラメータで偏微分を行うことで最適なパラメータへの方向を導き、少しずつパラメータを最適化していきます。

つまり、ニューラルネットワークの学習において微分の知識は最重要だと言うことです。
今回は、各パラメータの偏微分をまとめたものである勾配を導き出す式**勾配式**を実装するために、まずは微分と偏微分をPythonで実装したいと思います。

#微分
微分とは簡単に説明すると傾きのことです。
微分は関数の変数の値を極少量増加させた時に関数全体の値がどれだけ変化したかを表します。
中高で習った関数の傾きとは変数Xが１増加した時に関数全体の値Yがどれだけ変化したかを表したものでした。
そう考えると、Xの増加量が１から極少量に変わっただけなのでほとんど同じです。

では実装してみます。

```python
# 良い微分の実装
def slopeing_pro(f, x, h = 1e-4):
    return (f(x + h) - f(x - h)) / (2 * h) # 数値微分の誤差を小さくする
```
上の実装で注目するべき部分は、**1e-4** と **(f(x + h) - f(x - h)) / (2 * h)**です。

1e-4は10の-4乗(0.0001)を表します。この値を極少量として変数に足します。ここで注意点ですが、この値を極端に小さくしすぎてはいけません。(1e-50など)
コンピュータはものすごく小さな数の処理が苦手です。そのため、極端に小さな数を使ってしまうとうまく処理ができなくなってしまいます。

(f(x + h) - f(x - h)) / (2 * h)は真の微分と数値微分との誤差を小さくするために、本来の微分の数式を改良したものです。
(f(x + h) - f(x)) / h のままだと真の微分(瞬間変化量)と数値微分(変数が極少量増加した時の全体変化量)の誤差が大きくなってしまいます。その問題を解消するために上のような改良を施します。

# 偏微分
偏微分とは、２つ以上の変数が使われた関数(多変数関数)を各変数一つ一つで微分することを言います。
簡単にいうと、一つの変数に絞り、絞った変数にだけ極少量の増加させて微分を求めます。
ニューラルネットワークの学習では、各パラメータを変数とおいて各パラメータで偏微分をして、それをまとめた勾配というものを利用するので、偏微分はすごく重要です。

では実装します。

```python
# 偏微分実装
def slopeings_one(f, x, y, h = 1e-4):
    return (f(x + h, y) - f(x - h, y)) / (2 * h)

# 二変数関数
def two_func(x,y):
    return (4 * x) + (3 * y)

slopeings_one(two_func, 2, 3)
```

上の実装は二変数関数のxだけに対応した偏微分です。
実際の勾配式には、全ての多変数関数かつその全ての変数に対応できるような実装が求められます。
日本語プログラミング言語「プロデル」を使ってみる

TTSneoという日本語プログラミング言語があります。2004年前後にかなり張り切って書いていたのですが，しばらく疎遠になっていました。故に，その後継とも言えるプロデルはついぞ今日まで触ったことがありませんでした。今回ふと思い立って，プロデルを使ってみることにしました。

## プロデルとは

プロデルは，TTSneoの作者でもあるゆうと氏が開発している日本語プログラミング言語です。

### 文法の特徴

なるべく自然な日本語になるように設計されています。実際には，上手にクラスやメソッドを定義する言語能力が必要です。日本語は英語と異なり語順で格が決まらない言語です。従って，引数の順番を覚えなくても良いなどのメリットがあります。これは極端な例ですが，JavaScript等のjoin()とPythonのjoin()を混同するようなこともありません。プロデルでは

```
配列を「，」で繋げる
```

あるいは，

```
「，」で配列を繋げる
```
と書けます。

尤も，「繋げる」が配列に属すのか文字列に属すのかはこの文からは分からなくなります。

ところで，英語プログラミング言語というのは聞いたことがありません。主流の言語は，英単語を使っていますが，英語っぽくはありません。特に，大きいものから順に書いていくのは英語っぽくないと思っています（プロパティ of オブジェクトのような書き方の方が自然）。

```
Join the array with ' '.
```

などと書けば動くプログラミング言語があると~~嬉しくなります~~（嬉しいかどうかと自然言語っぽいかどうかは別）。

### 概観

Visual C#.NETで開発されている言語ですので，.NET用の中間コードにコンパイルできます。インタプリタもあります。Visual Basic 6.0よろしくフォームデザイナがついており，Windowsアプリケーションを作るのに向いていると思います。Office連携やWWWサーバなどもできます。

プロデルは，初心者向け言語ではありません。ドキュメントの整備が進んでいないので（故にこのアドベントカレンダーの意義は高い），懇切丁寧なチュートリアルのあったTTSneoと比べると参入障壁は大きいと言えます。しかし，他の言語を経験していれば，特にこれといって悩むことはないと感じました。

### 動作環境
.NETなので，基本的にはMicrosoft Windowsで動作しますが，[マッキントッシュ用のOSやLinux](https://rdr.utopiat.net/files/mono.html)でも動作するようです。

## 使ってみる

まず，プロデルデザイナを起動してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150160/f91a7e1e-35d4-121d-d959-78e296f8df1f.png)

とりあえず何か書いてみたいと思います。ちょうど手元に，[日本語版Wikipediaから作られたtext8](https://github.com/Hironsan/ja.text8)で学習したSkip-gramモデルがありましたので，これを読み込んでみたいと思います。
今回，データのファイル名は，`ja.text8.dim300.w2.txt`です。[word2vec](https://github.com/dav/word2vec)を使って，ウィンドウサイズ2，次元数300で学習させたものです。

```
生データは，「ja.text8.dim300.w2.txt」から読み込んだものの行区切り。
メタデータは，生データ（1）を「 」で分割したもの。
【ベクトル：辞書】
2からメタデータ（1）まで【カウンタ】にカウントして繰り返す
	行は，生データ（カウンタ）を「 」で分割したもの。
	ベクトル（「［行（1）］」）は，行の2番目からメタデータ（2）個切り出したもの。
繰り返し終わり
最大値は，｛-1，「」｝。
ベクトルの見出しを【単語】へそれぞれ繰り返す
	もし単語が「_こんにちは」でないなら
		現在値は，ベクトル（「こんにちは」）とベクトル（単語）でコサイン距離を計算したもの。
		もし現在値が最大値（1）より大きいなら
			最大値は，｛現在値，単語｝。
		もし終わり
	もし終わり
繰り返し終わり
最大値を表示。

［ベクトルA：配列］と［ベクトルB：配列］でコサイン距離を計算する手順
	もし　ベクトルAの個数が，ベクトルBの個数でないなら
		「大きさの違うベクトルです」というエラーを発生させる。
	もし終わり
	【コサイン】は，0.0。
	【大きさ：配列】
	大きさは，｛0.0，0.0｝。
	ベクトルAの個数回【カウンタ】にカウントして繰り返す
		大きさ（1）は，大きさ（1）＋ベクトルA（カウンタ）^2。
		大きさ（2）は，大きさ（2）＋ベクトルB（カウンタ）^2。
		コサインは，コサイン＋ベクトルA（カウンタ）×ベクトルB（カウンタ）。
	繰り返し終わり
	もし大きさ（1）×大きさ（2）が0なら
		0を返す。
	もし終わり
	コサイン÷（（大きさ（1）×大きさ（2））の平方根）を返す。
終わり

［文字列：文字列］を［区切り文字：文字列］で分割する手順：配列
	【配列】は，｛｝。
	【現在位置】は，1。
	【次の位置】。
	繰り返す
		次の位置は，文字列の現在位置文字目から区切り文字を探したもの。
		もし次の位置が0なら
			文字列の現在位置文字目以降を配列に加える。
			繰り返しから抜ける
		でないなら
			文字列の現在位置文字目から次の位置-現在位置文字，取り出したものを配列に加える。
			現在位置は，次の位置＋1。
		もし終わり
		もし現在位置が文字列の文字数より大きいなら，
			繰り返しから抜ける
		もし終わり
	繰り返し終わり
	配列を返す。
終わり
```

「こんにちは」と最もコサイン距離の近い単語を出力しています。
結果は以下のようになりました。

```
{0.738469664846242,_春夏秋冬}
```

「こんにちは」に近いのは「春夏秋冬」です。納得の結果ですね。
プロデルデザイナ上で実行するとかなり時間がかかりますので，コンパイルして実行しました。

### 簡単な解説

日本語で書かれているので，大抵のことはソースコードを読めば分かってしまうものと思われます。そこで，プロデル独特の表現を用いている部分のみ説明します。

まず，`【　】`ですが，これは変数の宣言です。

手順というのは，perlでいうところのサブルーチン，Visual Basicでいうところのサブプロシージャに相当するものです。関数の引数は，助詞と型によって同定されます。戻り値を使う場合は，`～したもの`という表現を用います。

一つ目の手順は，コサイン類似度を計算するものです。二つ目の手順は，いわゆるsplitです。プロデルにはjoin相当の手順はありますが，split相当の手順がない（配列化という手順はありますが……）ので，実装しました。
Cognito UserPoolのユーザーネームとメールアドレスの文字数の限界にトライしただけ

# TL;DR

ユーザーネームは128文字、メールアドレスは320文字（2019-10-24時点）


# 検証

## ユーザーネーム
129文字（`test+1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234`）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96286/4d856e47-0e2d-7cff-3a3f-908438a9cbf5.png)

128文字（`test+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123`）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96286/ccf942e5-b43f-066d-1683-9c040a9dadb5.png)


## メールアドレス
321文字（`test+1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234@example.com`）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96286/e1ef49e5-dc06-9005-8dc1-ed1dd2ce0e31.png)

320文字（`test+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123@example.com`）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96286/b4c767c5-cc68-8f71-b79a-29ae5333f767.png)
IE11 と reCAPTCHA と core-js を組み合わせると何かが壊れることがある

# 何が起きたか

IE11 で [core-js](https://github.com/zloirock/core-js) を使った JavaScript を動かしてるとこに reCAPTCHA の`www.google.com/recaptcha/api.js` を組み合わせたらこんなエラーが発生した。

```
SCRIPT5005: 文字列を指定してください
recaptcha__ja.js (2,220)
```

色々調べてると core-js の[to-primitive.js](https://github.com/zloirock/core-js/blob/1418f5f620f218c95b9bcfa88eb1e0f9e0b0a044/packages/core-js/internals/to-primitive.js#L13)からもエラーが出てる。IE11は catch されない throw は構文エラーになるやつ。

```
SCRIPT5022: catchステートメントでは適用されますが、throwステートメントでは適用されません
```

Symbol のポリフィルが reCAPTCHA との兼ね合いでエラー起こすようになってる？

# 解決策

[Cannot convert object to primitive value with core-js 3.1.3 + webpack #566 の Cobertos さんのコメント](https://github.com/zloirock/core-js/issues/566#issuecomment-514667729)通り、recaptcha/api.js を core-js より後ろで呼ぶようにしたら怒られなくなった。
※編集中 Linuxコマンドの結果を捨てる時に使う /dev/nulll 2>&1 について簡単にまとめる 編集中※

# 記載内容に誤りがあるため現在編集中です。今しばらくお待ちください。

↓編集中です
---
# 目的

- 新人の時にノートに書いた内容を記事にする。
- 案外知らない`/dev/null 2>&1`の意味を簡単に知る。

# そもそも`/dev/null 2>&1`って？

- コマンドから得られるあらゆる出力を捨てるものである。
- `何かしらのコマンド > /dev/null 2>&1`とすることにより「何かしらのコマンド」から得られる出力を捨てることができる。
- エラーをコンソールに出力したくない時や、敢えてコマンドの結果を隠す時に使用される。

# `/dev/null 2>&1`の意味は？

```
# |     ①    |②  |   ③  | ④  |
$ 何かしらのコマンド > /dev/null 2>&1
```
- 上記のように羅列した内容を区切って簡単に説明する。  

① 文字通り何か知らのコマンドが入る。結果を出力したくないコマンドを書く。
② 何かしらのコマンドの結果を後ろの④の`2>&1`に渡している。
③ 通常の出力を捨てる。
④ エラーの出力を通常の出力として扱うようにしている。これがあるとエラー出力は全て通常の出力になる。

- 紹介したコマンドは上記のような処理が行われている。
- 一文で書くと「①で結果が出力され、その結果が②によって④に渡され、④でエラー出力も通常の出力も通常出力として扱われ、③で通常の出力を捨てている。」

---
TelloをUnityでC#するTelloLibを使って

UnityでC#してドローン制御したかったのでメモ

###TelloのWifiにPCを接続

ノートPCなどですとWifi接続が楽ですね

###TelloUnityDemoで楽をする

Gitにサンプルコードあったので、乗っかります
https://github.com/comoc/TelloForUnity

TelloLibは後入れなので、下記のものを追加します
https://github.com/comoc/TelloLib.git

###映像がでないけど色々データ取れた

![無題2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/f258b53c-f2f5-754c-1971-e8f626d558a2.png)

とりあえず。Windowsのファイアウォールを全部OFFにしたら表示できた。。

```
Windows Specific Settings
Please confirm the Windows Firewall settings of your Unity Editor. Public network access is required to receive the video stream from Tello.
```

って書いてあった。。
https://github.com/comoc/TelloForUnity
に。。


###TelloをStationModeへ

ほんとはTelloをStationModeにすれば
他のWifiにぶら下がれるので
つぎは、このあたり設定したいです。


##参考サイト

Tello SDK 1.3.0.0
https://terra-1-g.djicdn.com/2d4dce68897a46b19fc717f3576b7c6a/Tello%20%E7%BC%96%E7%A8%8B%E7%9B%B8%E5%85%B3/For%20Tello/Tello%20SDK%20Documentation%20EN_1.3_1122.pdf

Tello SDK 2.0
https://dl-cdn.ryzerobotics.com/downloads/Tello/Tello%20SDK%202.0%20User%20Guide.pdf

TelloForUnity
https://github.com/comoc/TelloForUnity

TelloLib
https://github.com/Kragrathea/TelloLib

TelloLib
https://github.com/comoc/TelloLib.git

UnityでUDPを送信してみる
https://qiita.com/nenjiru/items/d9c4e8a22601deb0425b

Tello EDUをNode-REDから station mode にして操作するメモ
https://www.1ft-seabass.jp/memo/2019/05/01/tello-edu-meets-nodered-setting-station-mode/
基本情報技術者試験はゲーム作成に役立つか

#はじめに
私は2019秋季基本情報技術者試験を受けました。その勉強を通じて、”ゲーム作成に役立つか”という観点で、ゲーム作成・プログラミング初学者が感想を話したいと思います。

”基本情報技術者試験はゲーム作成に役立つか”

に対する端的な結論だけ先に書いておきます。

”人による”

です。そりゃそうだろって感じですが。

#基本情報技術者試験とは
まず簡単に基本情報技術者試験がどのような内容かを簡単に説明します。
以下が問われる分野の一部です。
 
**基礎理論**：2進数の話、論理式など
**ソフトウェア・ハードウェア**：命令や記憶の方法など
**プログラム**：アルゴリズムや言語など
**セキュリティ**：攻撃方法とその対策など
**ネットワーク**：他のパソコンと接続する方法など
**データベース**：データの扱い方やSQL文など
**ITマネジメント・ストラテジ**：プロジェクトの進め方、業務の管理など

テストは午前のテストと午後のテストに分かれており、それぞれで6割以上正答すると合格です。午前のテストでは主に知識が、午後のテストではそれを運用できる力が求められているといった感じです。これについては問題を実際に見てみるとわかりやすいと思います。

詳しく知りたい方はこんな記事を読まないでリンクに行ってください。

* [独学で基本情報者試験に合格しました](https://qiita.com/mk777/items/15a9397d48afa6a3e7e4)（簡潔です）
* [情報処理技術者試験の試験要項](https://www.jitec.ipa.go.jp/1_13download/youkou_ver4_3.pdf)（文句なしに具体的）
* [基本情報試験ドットコム](https://www.fe-siken.com/feis.html)（テスト受けるなら見た方がいいと思います）

#結論
実際に勉強をしてみて、私は基本情報技術者試験が役立つかどうかは”人による”だと感じました。というのも、知識なので持っていて損なことでは全くないですが、もっと優先してやるべきことがある人は多くいると思うからです。


* **より面白いゲームを作りたい人**
* **一人でゲームを作っている人**

にはオススメできないかなと感じました。

**ゲームを作る際にこの試験が特に役立つのは、ゲームを実際に楽しむ人から見えない部分だと思います。**私は特にチームでのゲーム開発時の効率アップに役に立つと思いました。例えばチームで開発する時に基本的な知識は共通認識としてある方が良いですし、データやイメージなどの情報を効率良く整理しておく際にこの試験での知識が役に立つと思います。

逆に、ゲームを実際に楽しむ人から見える部分をより良くしようと考えるなら、ゲームの作成、アウトプット、改善を繰り返すしかないような気がするので、この部分を極めたい人にはこの試験は効果が低いのではないかと思いました。

#最後に
これらは全て主観的な意見です。
基本情報試験は応用の範囲が広いと感じましたので、繰り返しにはなりますが、勉強して損はないと思います。
ReactNativeでQRコード生成

QRコードを生成するライブラリはいくつかありますが、Canvasに依存していたり、SVGとして出力するしかなかったりするため、ReactNativeで使おうとすると問題があるケースが多いです。

簡単すぎる記事で申し訳ないですが、ReactNativeとの相性が良さそうな[qrcode-generator](https://www.npmjs.com/package/qrcode-generator)を使ったコンポーネント例を載せておきます。

```javascript:QRCode.js
import React from 'react';
import PropTypes from 'prop-types';
import { Image } from 'react-native';
import qrcode from 'qrcode-generator';

export default class QRCode extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      size: null
    };
    this.onLayout = this.onLayout.bind(this);
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.size !== this.props.size) {
      this.setState({
        size: null
      });
    }
  }

  onLayout(e) {
    const { width } = e.nativeEvent.layout;
    if (this.state.size !== width) {
      this.setState({ size: width });
    }
  }

  render() {
    const { data, cellSize, margin, typeNumber, errorCorrectionLevel } = this.props;
    const size = this.state.size || this.props.size;
    const QRCode = qrcode(typeNumber, errorCorrectionLevel);
    QRCode.addData(data);
    QRCode.make();
    let calculatedCellSize = cellSize;
    if (typeof calculatedCellSize !== 'number' && typeof size === 'number') {
      calculatedCellSize = typeof margin === 'number' ? Math.round((size - margin * 2) / QRCode.getModuleCount())
        : Math.round(size / (QRCode.getModuleCount() + 8));
    }
    const uri = QRCode.createDataURL(calculatedCellSize, margin);
    return (
      <Image
        key={uri}
        onLayout={this.onLayout}
        style={{
          width: size,
          aspectRatio: 1
        }}
        source={{ uri }}
      />
    );
  }
}

QRCode.defaultProps = {
  typeNumber: 0 // 自動
};

QRCode.propTypes = {
  data: PropTypes.string.isRequired, // データ文字列
  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, // 画像の大きさ
  cellSize: PropTypes.number, // セルの大きさ
  margin: PropTypes.number, // 余白の大きさ
  typeNumber: PropTypes.number, // 型番
  errorCorrectionLevel: PropTypes.string.isRequired // 誤り訂正レベル
};
```
propsの型番、誤り訂正レベルについてはこちらを参照してください。

[QRコード - Wikipedia]
(https://ja.wikipedia.org/wiki/QR%E3%82%B3%E3%83%BC%E3%83%89#QR%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E7%94%A8%E8%AA%9E)

セルの大きさ、余白、型番は何も入れなければ自動的に決定されるようになりますので、基本的に非推奨です。
sizeには文字列（`100%`など）を入れた場合にも自動で画像の解像度が調整されるようにしてみました。

シンプルなQRコードの生成はこれで最低限かつ安定してできますが、色を変えたりロゴを配置したりするのには対応していないので、その点ほかのライブラリ（Expoだとそれぞれ不具合ありですが[react-native-qrcode-svg](https://github.com/awesomejerry/react-native-qrcode-svg)や[react-native-qrcode](https://github.com/cssivision/react-native-qrcode)）に劣ります。

→[Canvasを使った記事に追記しました](https://qiita.com/mildsummer/items/14e10277d1d46ad09032)
スクレイピングツール5選 | 無料のソフトウェア型スクレイピングツール

##Webスクレイピングとは？
**[Wiki](https://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0)からのWebスクレイピングの説明をご参照ください。**
[Webスクレイピング](https://www.scrapestorm.com/jp/)（英: Web scraping）とは、ウェブサイトから情報を抽出するコンピュータソフトウェア技術のこと。ウェブ・クローラーあるいはウェブ・スパイダーとも呼ばれる。 通常このようなソフトウェアプログラムは低レベルのHTTPを実装することで、もしくはウェブブラウザを埋め込むことによって、Webのコンテンツを取得する。
ウェブスクレイピングは多くの検索エンジンによって採用されている、ボットを利用してウェブ上の情報にインデックス付けを行うウェブインデクシングと密接な関係がある。ウェブスクレイピングではウェブ上の非構造化データの変換、一般的にはHTMLフォーマットからデータベースやスプレッドシートに格納・分析可能な構造化データへの変換に、より焦点が当てられている。また、コンピュータソフトウェアを利用して人間のブラウジングをシミュレートするウェブオートメーションとも関係が深い。ウェブスクレイピングの用途は、オンラインでの価格比較、気象データ監視、ウェブサイトの変更検出、研究、ウェブマッシュアップやウェブデータの統合等である。
今回はWebスクレイピングを目指す、五つの無料のソフトウェア型スクレイピングツールを紹介する。
##1.ScrapeStorm
[ScrapeStorm](https://www.scrapestorm.com/jp/)は、人工知能を基づき、プログラミングしなくても、ほとんどすべてのWebサイトからデータを抽出できると言う[Webスクレイピングツール](https://www.scrapestorm.com/jp/)である。
　強い機能を持って、使いやすいだ。URLを入力だけで、自動的に抽出するデータと次のページボタンを識別できる。複雑なルール設定が必要ないし、1‐Clickでスクレイピンができる。
　ScrapeStormは、Windows、Mac、およびLinuxに適応するソフトウェアである。Excel、HTML、Txt、CSVなどのさまざまなファイル形式で結果をダウンロードできる。 さらに、データベースやウェブサイトにデータをエクスポートできる。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482909/c4698468-e939-77dd-635c-fdc122605228.png)
##2.ParseHub
ParseHubは、誰でもWebからデータを取得する、視覚的なデータ抽出ツールである。
Webスクレイパーを再度編成する必要がない。APIを持たないWebサイトからAPIを簡単に作成できる。ParseHubは、インタラクティブなマップ、カレンダー、検索、フォーラム、ネストされたコメント、無限スクロール、認証、ドロップダウン、フォーム、Javascript、Ajaxなどを簡単に処理できる。ParseHubは、全員向けの無料プランと、大規模なデータ抽出ニーズがあり企業向けのエンタープライズプランを提供する。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482909/1579f0d4-2ae4-5a1f-3bf1-7701dc3d9f19.png)
##3.Cyotek WebCopy
「Cyotek WebCopy」は、Webサイトのコンテンツをローカルディスクへコピーできるソフト。 指定したWebサイトのコンテンツをスキャンしてURLの一覧を取得したり、ローカルディスクへダウンロードすることが可能。自分のサイトにリンク切れがないかチェックしたり、サイトのバックアップを作成したり、オフラインで閲覧するためにコピーをとったりするのに利用できる。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482909/643e91d4-0f3d-8b51-9233-c33bca805752.png)
##4.HTTrack
HTTrackは、GNU General Public LicenseのVer3ライセンスで公開している、オープンソースのWebクローラ及びオフラインブラウザである。 World Wide Web上のサイトをインターネット経由でローカル環境にダウンロードが可能であり、初期設定ではオリジナルのサイトの相対的なリンク構造に基づき各ファイルを配置している。 また、既存のミラーサイトを更新して中断したダウンロードを再開できる。 基本的なCUIと2種類WebHTTrackのGUIによる操作が可能であり、CUIはスクリプトやcronに組み込みが可能である。 クローラはRobots Exclusion Standardによりダウンロード出来ない場合もある。 基本的なJavaScriptやアプレット及びAdobe Flash内部のリンクもダウンロード可能であるが、式やサブルーチンにより生成された複雑なリンクは無効化される。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482909/6b9f28bc-7c3d-1942-90ac-62dc1fb884fd.png)
##5.Getleft 
Getleft Web サイト グラバーは、すべてのリンクをダウンロードしようとする。それが行くように、それは絶対リンクを相対リンクに変更を取得するように元のHTMLページを変更して、アクティブなページへのリンクは、結果のページに変更を取得。ユーザーが設定したオプションに従って完全な web サイトをダウンロードする。
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482909/f41a11f8-d78f-44eb-3440-284cba4d5caf.png)
Windows：Google日本語入力：U+XXXXでUnicodeを入力するには

Windowsの日本語IMEはGoogle日本語入力にしている。
以前、[Windowsデフォルトの日本語IMEを殺す方法](https://qiita.com/query1000/items/959ae6542dc6fbd61bb1)も記事に書いた。

Google日本語IMEの機能として、Unicodeスカラー値をU+XXXX（XXXXは16進数4桁または5桁）のように入力するとそのUnicode文字が変換候補に出る。
たとえばU+00E9と書くとPokémon Goのé（アクサン・テギュ付きe）が入力できて便利だ。

![ime.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107571/cf9d67e4-5d07-a386-d5e7-3d88611a1fd9.png)

これが、出る時と出ないときがあって、悩んでいたが、めっちゃわけのわからない設定項目だったので書く。
タスクバーに、英語入力モードのときは「A」、日本語入力モードのときは「あ」になっているGoogle日本語入力アイコンを右クリックして「プロパティ」を選択する。

で、「Google日本語入力プロパティ」ボックスの「入力補助」ボックスの「シフトキーでの入力切替」において、「英数字」を選択して「適用」「OK」を押す。

![ime.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107571/d9304b57-510c-39f9-43d7-515e049fa257.png)

なぜかわけがわからないんだけど、これでU+XXXX機能が有効になる。

（この項終わり）
Webアプリを作る【Webサーバー, ユーザー認証, データベース】

Webアプリの**Webサーバー**, **ユーザー認証**, **データベース**ってどうすればいいのかな...:open_mouth:

# はじめに
今回はWebアプリケーションのサーバサイド, **Webサーバー**, **ユーザー認証**, **データベース**が使えるようになるチュートリアルの紹介です.
まだWebアプリのフロントサイドを作ってない人でも大丈夫. テンプレが用意されています.

紹介するチュートリアルは[こちら](https://aws.amazon.com/jp/getting-started/projects/build-serverless-web-app-lambda-apigateway-s3-dynamodb-cognito/). Amazonの**AWS**というサービスを使っていきます.
準備するものは, [AWSのアカウント](https://aws.amazon.com/jp/register-flow/)(無料で作れます)だけ. AWSの[無料利用枠](https://aws.amazon.com/free/)でこのチュートリアルができます.

ではいきましょっ! 超簡単です.:wink:

# AWSのサービス
![Serverless_Web_App_LP_assets-16.7cbed9781201a79b9efa761807c4312e68b23485.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303261/5d4202a8-88e5-0150-f9f2-4453512edd5a.png)
簡単に今回使うサービスの説明.

Webアプリなので, ブラウザで表示させるHTMLやCSSなどのファイルがあります. そういったファイルは**S3**(上の図の①)と呼ばれるWebサーバーに保存します.

ユーザーの管理や認証は**Cognito**(②)で行います. 今回は, メールアドレスとパスワードで認証します.

Webサイトからデータベースにアップロードする仕組みを作るために, **API Gateway**④, **Lambda**⑤, **DynamoDB**⑥を使います(それぞれの説明は後述).

# チュートリアルの紹介
AWSのチュートリアルを実行すれば, WebアプリのWebサーバー, ユーザー認証, データベースの仕組みが理解できます.
ただAWSのチュートリアルは少し手順が多いので, 目的や流れを先に理解しておきましょう.

### チュートリアルの目的
作るWebアプリでは, まずメールアドレスとパスワードでユーザー認証ができます. さらにウェブサイト上の地図をクリックすると, その地点に乗馬のリクエストが送れて, そこに馬のアイコンが走ってくるというWebアプリです.
チュートリアルの目的は, WebサーバーにHTMLなどのファイル(テンプレが用意されている)を置いて, ユーザー認証を作り, データベースへアクセス(乗馬リクエスト)することです.

### チュートリアルの流れ
**1. WebサイトのファイルをWebサーバーにアップロードして公開する**
>a. Webサイトのファイル(HTML, CSS, JavaScriptなど)をWebサーバー(**S3**)にアップロードする.
>b. 匿名ユーザーがWebサーバーにアクセスできるようにする.
>c. URLからWebサーバーにアクセスできるようにする.


**2. ユーザー管理と認証の仕組みを作る**
>a. ユーザーを管理するフォルダ(**Cognito**のユーザープール)を作る.
>b. Websiteからアクセスできるようにする(メアドとパスワードでの認証設定はアップロードしたファイルに記述済み).


**3. データベースにアクセスする処理を作る**
>a. 乗馬リクエストをアップするためのデータベース(**DynamoDB**のバケット)を用意する.
>b. 乗馬リクエストをアップして, 馬のアイコンを送る処理(**Lambda**の関数)を作る.
>c. bの処理をWebsiteから呼び出すための仕組み(**API Gateway**のAPI)を作る.

以上の流れを意識しながら, ぜひ[チュートリアル](https://aws.amazon.com/jp/getting-started/projects/build-serverless-web-app-lambda-apigateway-s3-dynamodb-cognito/)をやってみてください!:slight_smile:
Azure NSGのInboundソースアドレスがフルオープンになっていないかチェックする

Azure Network Security Groupで、InboundのsourceAddressPrefixが"*" つまり、全世界開放になっているものがないかチェックするシェルスクリプトです。
このシェルスクリプトではポートは絞っていませんが、例えば22と3389に絞ってチェックするのも少し変更を加えれば可能です。

# 実行環境
* Linuxサーバ

# 前提
* Azure CLIがインストールされていること

# シェルスクリプト作成

```bash:azure-nsgcheck.sh
#!/bin/bash

for subscriptionId in `az account list | jq -r .[].id`
do
  echo "SubscriptionId: $subscriptionId Check Start!!"
  for resourceGroupName in `az group list --subscription $subscriptionId | jq -r .[].name`
  do
    for nsgName in `az network nsg list -g $resourceGroupName --subscription $subscriptionId | jq -r .[].name`
    do
      for sourceAddressPrefix in `az network nsg show -g $resourceGroupName --subscription $subscriptionId -n $nsgName | jq -r '.securityRules[] | select(.direction == "Inbound").sourceAddressPrefix'`
      do
        set -f
        if [ "$sourceAddressPrefix" = '*' ]; then
          echo "Hit!!! SubscriptionId: $subscriptionId , ResourceGroupName: $resourceGroupName , NSGName: $nsgName"
        fi
      done
    done
  done
  echo "SubscriptionId: $subscriptionId Check End!!!"
done
```

# シェルスクリプト実行

* 全開放になっているNSGがあれば、Hit!!!と表示されます。

```
$ az login
$ bash azure-nsgcheck.sh
SubscriptionId: [Your Subscription Id] Check Start!!
Hit!!! SubscriptionId: [Your Subscription Id] , ResourceGroupName: [Your Resource Group Name] , NSGName: [Your NSG Name]
SubscriptionId: [Your Subscription Id] Check End!!
```
Nuxt.jsにvue-konvaを追加する

#前提
Nuxt.jsプロジェクトは、すでに作成されていることします。
Nuxt.js 3向けです。

# konva、vue-konvaとは

konvaは、HTML5 CanvasのJavaScriptのフレームワークです。
Vue.js向けに、kovaをコンポーネント化したvue-konvaというものがあります。

# vue-konvaの追加方法

慣れた方であれば、当たり前で、簡単でしょうが、
初めてだと難しいと思われるので手順を残しておきます。

## 1. konvaをインストール

nuxt.jsのプロジェクトがあるところでコマンドを実行してください。

```
npm install vue-konva konva --save
```

yarnコマンドを使用している場合は下記を実行してください

```
yarn add vue-konva konva
```

## 2. plugins/vue-konva.jsファイルを作成

``` plugins/vue-konva.js
import Vue from 'vue';
import VueKonva from 'vue-konva'

Vue.use(VueKonva)
```

## 3. nuxt.config.jsのpluginsキー内にファイルパスを追加

pluginsと書かれた箇所を見つけて次のように追加してください。

``` nuxt.config.js
/*
  ** Plugins to load before mounting the App
*/
   plugins: ["~/plugins/vue-konva"],
/*
   ** Nuxt.js dev-modules
*/
```
## 4. pages/index.vueに、下記を記述し動作確認

```pages/index.vue

<template>
  <v-stage :config="configKonva">
    <v-layer>
      <v-circle :config="configCircle"></v-circle>
    </v-layer>
  </v-stage>
</template>

<script>
export default {
  data () {
    return {
      configKonva: {
        width: 200,
        height: 200
      },
      configCircle: {
        x: 100,
        y: 100,
        radius: 70,
        fill: "red",
        stroke: "black",
        strokeWidth: 4
      }
    };
  }
};
</script>

<style>
</style>
```
どのコンポーネントに記述しても大丈夫です。

## 5.ブラウザでアクセスし動作確認

http://localhost:3000 にアクセスし、次のような円が出たら成功です。
（背景の色は、白になっていると思います）

![2019-10-24_19h10_43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42567/8249a504-fe0e-6a98-24b7-7e839c184658.png)


背景の色は、Nuxt.jsのプロジェクトの設定（UIコンポーネントのインストール状況）によって変わります。
私の場合、Nuxt.jsのプロジェクト作成時に、Vuetifyを入れているので黒になってます。


## window is not undefindedとエラーメッセージが出たとき

`<client-only></client-only>` で、囲んでください。
SSR モード だと出てしまいます。

```vue
<client-only placeholder="Loading...">
    <v-stage :config="configKonva">
      <v-layer>
        <v-circle :config="configCircle"></v-circle>
      </v-layer>
    </v-stage>
</client-only>
```

# 最後に
他のプラグインも、同じ手順で追加可能です。
楽しいNuxt.jsライフを！
ではまた。

# 参考 
https://ja.nuxtjs.org/guide/plugins/
https://konvajs.org/docs/vue/
Vue.jsでのチェックボックス全選択の動きが変？リアクティブの検出

## はじめに
チェックボックスを`v-model`で配列をバインドする場合ではなく、form submitにおける`:checked`と`value`を利用した際にハマったことです。

## 背景
今回このように、「全て」というチェックボックスを置き、全選択・全解除機能を実装しようとしました。（後々の説明でわかりやすいように、Booleanを括弧内に表示しています）
<img width="702" alt="スクリーンショット 2019-10-24 17.19.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252687/703336dd-e502-dd29-cd98-8bfefe41917a.png">

実装はこちら↓↓

```vuejs

<template>
...
  <form>
    ...
    <div>
      <input
        type="checkbox"
        :value="checkAll"
        :checked="checkAll"
        label="全て"
        @change="handleCheckAll"
      >
    </div>
    <input
      v-for="item in items"
      :key="item.id"
      :value="item.id"
      label="item.name"
      @change="handleCheckbox"
    >
    ...
  </form>
...
</template>

<script>
...
data() {
  return {
    items: [
      { id: 1, name: '木工事' }
      ...
    ],
    obj: {
      1: true,
      ...
    },
    checkAll: true
  }
},
...
methods: {
  handleCheckAll() { // 全選択・全解除
    this.checkAll = !this.checkAll
    for (const key in this.obj) {
     this.$set(this.obj, key, this.checkAll)
    }
  },
  handleCheckbox(id) { // 個別のチェックボックス
   this.obj[id] = !this.obj[id]
   const values = object.values(this.obj) // オブジェクトからvalueの配列を作成
   this.checkAll = values.every(value => value)  // 全てtrueかどうか
  },
  ...
}
...
</script>
```
(*本来はカスタムコンポーネントやVuexデータを利用していますが、サンプルコードとして大幅に省略しております*)

しかしこれでは、うまく行きませんでした。
![bad.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252687/89e63ba5-a573-af0d-f7ab-c9f98a32019e.gif)
2つ目のチェックボックスをクリックしても、Booleanが切り替わらないのです。それにより、全選択・全解除してもうまく全て切り替わってくれません。`console.log`で`obj`を見るとうまく状態が切り替わっていますが、画面上はこのような動作になっています。

## なぜか
公式ページ([リアクティブの探求](https://jp.vuejs.org/v2/guide/reactivity.html))に書いてありました。
> モダンな JavaScript の限界(そして Object.observe の断念)のため、Vue.js はプロパティの追加または削除を検出できません。

> (中略)

>既存のオブジェクトに複数のプロパティを割り当てたいということがあるかもしれません。例えば、Object.assign() や _.extend() を使って。しかし、オブジェクトに追加された新しいプロパティは変更をトリガしません。このような場合は、元のオブジェクトとミックスインオブジェクトの両方のプロパティを持つ新たなオブジェクトを作成してください


ふむふむ。
単にオブジェクトのプロパティを変更しただけでは、それを検出できないそうです。

## ということで修正した
チェックボックスをクリックした時に、対象の中身を書き換えるのではなく、オブジェクトをコピーしてしまい、それのプロパティを変更。そして元のdataに上書きするということをします。

```vuejs

<script>
  ...
  methods: {
    ...
    handleCheckbox(id) {
      const newObj = JSON.parse(JSON.stringify(this.obj)) // ディープコピー
      newObj[id] = !newObj[id] // コピーしたものの値を変更
      this.obj = newObj // 書き換える
      ...
    },
    ...
  }
  ...
</script>
```

すると！
期待していた挙動が確認できました。
![good.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252687/811d879d-05c5-39ec-df47-84dedebbc247.gif)


## さいごに
Vueにはリアクティブの探求で知らないとハマるケースがところどころあると思います。もしオブジェクトを扱っていて、あれ、おかしいな？というケースに出くわしたら、一度今回のような箇所を疑ってみると解決するかもしれません。
ifやswitchが式じゃなくて困る時の対処

# javascriptのifやswitchは式ではない
javascriptのifやswitchは式ではなく文です。
要するに、それ自体が値を返すことが出来ません。
関数型言語はifが式のものも多いですが(kotlinとか)
javascriptは後方互換性が重視されるタイプの言語なのでクラシカルな文形式です。

と言うわけで、コードを固い方向に寄せるためになるべくconstを使おうとしたりすると
すぐ問題にぶち当たります。

例えば、以下のようなコードは通りません。

``` javascript
const hoge;
if(fuga){
 hoge = "fuga";
}else{
 hoge = "piyo";
}
```

constの初期化時に条件に応じて異なる値を入れるというようなありふれたケースにすらjavascriptのifは対応できないわけです。
当然、switch文も同様です。妥協してletやvarを使うのも手ですが、なるべくそれは避けたいですし、
React+JSXにおける``{}``の中など単純にそれだけで逃げられないケースもあります。

### 三項演算子
一番手軽な解決策は三項演算子です。
演算子は値を返すので問題はありません。

``` javascript
const hoge = fuga ? "fuga" : "piyo";
```
条件部分や返すべき結果が短い場合は上記のようにいい感じになります。

しかし、常にそううまく行くわけではありません。
例えばcaseがいくつも連なるswitch文やifの条件部分が長いものまで三項演算子で書くのはどうでしょうか。

``` javascript
const hoge = fuga ? "fuga" : piyo ?  "piyo" : hogehoge ? "hogehoge" :"hogePiyo"
```
短めのものを3つつなげただけでこれなので、相当気持ち悪いコードになることは間違いありません。
縦はともかく右方向に長いコードは可読性がかなり低くなります。
言語を問わず三項演算子を蛇蝎のごとく嫌う人がたまにいますが、おそらくこういうコードで苦しんだことがあるんでしょう。

### 関数に切り出す
``` javascript
function decideFugaOrPiyo(fuga) {
  if(fuga){
    return "fuga";
  }
  return "piyo";
}
const hoge = decideFugaOrPiyo(fuga);
```
そういう場合に有効な手段が、関数への切り出しです。
関数に切り出せば複雑な条件やswitch文があろうと問題ありません。
命名が適切ならば可読性もむしろ上がるケースが多いでしょう。

しかし、大した長さでは無かったり、再利用する予定のない場合はいちいち切り出した方が読みにくい場合もあります。

### 即時関数を使う
``` javascript
const hoge = (() => {
  if(fuga){
    return "fuga";
  }
  return "piyo";
})();
```
わざわざ切り出すほど複雑ではなくかといって三項演算子を使うにはちょっと…と言うようなケースには即時関数が便利です。
少々括弧が多くなりますが、思いの外インデントも深くならない(せいぜい1段下がるだけ)なので可読性の点でもそこまで悪くないと思います。

# まとめ
* 短い・シンプル=>三項演算子
* 長い・複雑・再利用する=>関数切り出し
* 中間くらい=>即時関数
MATLAB←→ROSでカメを動かす

#概要
MATLAB(Windows)からROS(Ubuntu)にメッセージを送って，turtlesimパッケージのカメを動かす．

#環境
- Ubuntu 16.04 LTS
- ROS1 Kinetic Kame
- Windows 10
- MATLAB R2018b

#環境変数の設定
ここをちゃんと設定しないとROSネットワークが正常に動作しません．
データ送信は出来ても，受信はできないということが起きます．

ポイントは，`ROS_HOSTNAME`と`ROS_IP`を同一にすることです．

##MATLAB
```matlab:matlab
setenv('ROS_MASTER_URI','http://ここにUbuntuのIPアドレスを入力してください:11311');
setenv('ROS_HOSTNAME','ここにWindowsのIPアドレスを入力してください');
setenv('ROS_IP','ここにWindowsのIPアドレスを入力してください');

rosinit
>>The value of the ROS_MASTER_URI environment variable, http://ここにUbuntuのIPアドレスが表示されます:11311, will be used to connect to the ROS master.
>>The value of the ROS_HOSTNAME environment variable, ここにWindowsのIPアドレスが表示されます, will be used to set the advertised address for the ROS node.
>>Initializing global node /matlab_global_node_83800 with NodeURI http://ここにWindowsのIPアドレスが表示されます:64160/

```
成功すると上記のようになります．

##ROS
bashの設定ファイル`.bashrc`に以下のコードを追加します．

```bash:.bashrc
export ROS_HOSTNAME=ここにUbuntuのIPアドレスを入力してください
export ROS_IP=ここにUbuntuのIPアドレスを入力してください
export ROS_MASTER_URI=http://ここにUbuntuのIPアドレスを入力してください:11311
```
設定したら`source`コマンドで`.bashrc`を再読み込みするか，端末を開きなおしましょう．

ちゃんと設定できているかは`echo`コマンドで環境変数を表示させることで確認できます．

```bash:terminal
echo $ROS_IP
echo $ROS_MASTER_URI
```
ここまで終わったら，ROSのマスターを起動しturtlesimのturtlesim_nodeを起動しておきましょう．

#カメを動かす
##メッセージの作成

以下のメッセージを生成します．

```matlab:matlab
chatterpub = rospublisher('/chatter', 'std_msgs/String')
chattermsg = rosmessage(chatterpub);

chattermsg.Linear.X=2.0
chattermsg.Linear.Y=0.0
chattermsg.Linear.Z=0.0
chattermsg.Angular.X=0.0
chattermsg.Angular.Y=0.0
chattermsg.Angular.Z=1.8
```
以下のコマンドでメッセージを送ると，カメが円を描くように動きます．

```matlab:matlab
send(chatterpub,chattermsg)
```



#参考URL
- https://qiita.com/MENDY/items/94cb23bf7a52441d0443
- https://jp.mathworks.com/help/robotics/examples/get-started-with-ros.html
[小ネタ] 反応エリアを拡大する

# 細い所にある UI
主にデザイン的な理由で、細い所にボタンを置かなくてはならない場合があります（下図参照）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12977/ca786a69-f481-f94f-eb01-79f215ca5fc1.png)

# ボタンの見た目の範囲しか押せないと誰が決めた？

先の画像のボタンは 16x15 [pixel][^1] ですが、この見た目の範囲より大きい反応範囲を設定できます。
それが

[TouchTargetExpansion プロパティ](http://docwiki.embarcadero.com/Libraries/Rio/ja/FMX.Controls.TControl.TouchTargetExpansion)

です。

TouchTargetExpansion プロパティを使うと押せる範囲を広げられます。
下図は DocWiki から拝借したものです。

![TouchTarget.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12977/fcf78d95-f940-bf18-2887-be173c790aec.png)

TouchTargetExpansion は TBounds 型のプロパティでオブジェクトインスペクタで見ると下図のようになります。
ここに適切な値、たとえば全てに 4 を設定すると上下左右に 4 [pixel] ずつ押せる範囲が広がります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12977/f19ca629-9e22-b3ac-1b95-ab246eac236e.png)

# まとめ
モバイル向けアプリケーションはマウスではなく指で操作するため、TouchTargetExpansion を適切に設定して快適な UX に仕上げたい所です。

[^1]: FireMonkey は仮想解像度で動作するため、ここでいう 1 [pixel] が実際の画素で 1 [pixel] になるわけではありません。
【PHP】PDOクラスインスタンス時の例外処理

#PDOとは?
PHP Data Objectsの略称で、PHP標準（5.1.0以降）のデータベース接続クラスのことです。

## 例外処理とは
予め例外が発生しそうな処理を予期し、発生したらスローという形で送られるのでキャッチで処理を行う。

### try-catch
例外が発生するかもしれない処理をtryに記述する
例外が発生した場合の処理をcatchに記述する

#### if文との違い
if文 は条件分岐で、 try は例外時のアクションの規定です。
if でその時点での条件を調べて処理を分岐させます。
trueかfalseどちらに進んでも逐次的な動作（上から順に動く）です。
try-catchは後続の処理が継続不可となる事態が発生した場合は処理を中断させる。

## コード例
```php
function hogePDO()
{
    try {
        // PDOクラスのインスタンス化を実行しているがエラーが発生するかもしれない
       return new PDO(DSN, DB_USER, DB_PASSWORD);
    } catch (PDOException $e) {
        // 指定されたデータベースへの接続に失敗した場合の処理
        // PDOExceptionクラスがスローされる、それをキャッチする処理
        // $eはPDOExceptionクラスをインスタンスした物
        // $eからgetMessageメソッドを実行している
        echo $e->getMessage();
        exit();
    }
}
```

## 備考
- Exception頭文字をとって「$e」とするのが慣習となっている

## 公式
- [PDO](https://www.php.net/manual/ja/book.pdo.php)
- [PDOExceptionクラス](https://www.php.net/manual/ja/class.pdoexception.php)
[SQL]BIGQUERYショートカットとか間違いやすいこととか

#ショートカット

command e で、選択部分の部分実行が可能。中間テーブルの中身を調べる時とかに便利。

command return で全体の実行が可能

#間違いやすいこと（チェック項目）

NULLと０
特にCASE WHEN xxx THEN  xxx ELSE NULL or 0 END
のところとか、間違えない様に。
















SQL小技集
https://qiita.com/ool/items/75da830e7373138c8125
UTCとJST
https://qiita.com/ool/items/6be9cc290c8ad9e0f5bc

今流行りの量子コンピューター
[量子コンピューター]Qisikitでアダマールゲートを実装する
https://qiita.com/ool/items/1a5041edddc11b14efc0

[Qiskitのアカウント認証の仕方]Qiskit IBMQ プロバイダー
https://qiita.com/ool/items/e80c1266cda68984a103
Qiskitの使い方
https://qiita.com/ool/items/2227d2d515caa5087752
[量子コンピューター]Qiskit Tutorials
https://qiita.com/ool/items/2a5038df1471635d442c
.NET Core 3.0のPublish Single File概要

# はじめに

本スライドは「C# Tokyo」ユーザーグループの下記のイベントの発表資料です。

[.NET Core 3.0 リリース記念 C# Tokyo 2019/10](https://csharp-tokyo.connpass.com/event/148492/)

---

# .NET Core 3.0の魅力

- 単一実行可能ファイル
- Side by Sideの復活
- 快適な動作速度
- WPF・WinFormsのサポート
- 先進的な機能の数々

---

# 本日のお題

- 単一実行可能ファイル
    - Runtimeの同梱・非同梱
    - AOTコンパイル

---

# 何がうれしいのか？

- 配布品質の向上（配布ミス削減）
- 配布先環境のRuntime非依存
    - Runtimeの混在が可能
    - Runtimeの逐次バージョンアップが容易に
- AOTによる起動速度の向上

---

# 注意点

- これがすべてじゃないのが注意点
- でかい
- 初回起動速度の低下（unzip処理が発生）
- でかい
- 実行パスが配置した場所と異なる
- でかい

--- 

# とはいえ...

- サーバーサイドではメリットが勝ちそう？※
- ランタイム非同梱ならクライアントでも？

導入背景によるので一概にはなんとも
※IISやWindows Serviceへの登録はまだ未確認

---

# 具体的なパラメーター

|No.|項目|説明|
|--:|:--|:--|
|1|/p:PublishSingleFile|単一ファイルの実行可能バイナリの作成|
|2|/p:PublishReadyToRun|AOTコンパイル|
|3|/p:PublishTrimmed|不要コードの削除|
|4|[Warp](https://github.com/dgiagio/warp)|同上（サードパーティ製）|
|5|--self-contained|ランタイム同梱するか否か|

---

# Demo

---

# Demo Script

```cmd
mkdir Demo
cd Demo
dotnet new sln
mkdir ConsoleApp
cd ConsoleApp
dotnet new console
dotnet sln ..\Demo.sln add ConsoleApp.csproj
dotnet run

dotnet publish -c Release -r win10-x64
dotnet publish -c Release -r win10-x64 /p:PublishSingleFile=true
dotnet publish -c Release -r win10-x64 /p:PublishSingleFile=true /p:PublishReadyToRun=true
dotnet publish -c Release -r win10-x64 /p:PublishSingleFile=true /p:PublishReadyToRun=true /p:PublishTrimmed=true

[Net.ServicePointManager]::SecurityProtocol = "tls12, tls11, tls" ; Invoke-WebRequest https://github.com/dgiagio/warp/releases/download/v0.3.0/windows-x64.warp-packer.exe -OutFile warp-packer.exe

.\warp-packer --arch windows-x64 --input_dir bin\Release\netcoreapp3.0\win10-x64\publish --exec ConsoleApp.exe --output ConsoleApp.exe

dotnet publish -c Release -r win10-x64 /p:PublishSingleFile=true /p:PublishReadyToRun=true --self-contained=false
```
---

# 空コンソールアプリのファイルサイズ

|No.|項目|Case1|Case2|Case2|Case3|Case4|Case5|
|:--|:--|:-:|:-:|:-:|:-:|:-:|:-:|
|1|/p:PublishSingleFile|-|TRUE|TRUE|TRUE|TRUE|TRUE|
|2|/p:PublishReadyToRun|-|-|TRUE|TRUE|TRUE|TRUE|
|3|/p:PublishTrimmed|-|-|-|TRUE|TRUE|-|
|4|Warp|-|-|-|-|TRUE|-|
|5|--self-contained|-|TRUE|TRUE|TRUE|TRUE|FALSE|
||サイズ|161[KB]|65.8 [MB]|65.8 [MB]|25.4 [MB]|12.0[MB]|162 [KB]|

---

# 空WPFアプリのファイルサイズ

|No.|項目|Case1|Case2|Case2|Case3|Case4|Case5|
|:--|:--|:-:|:-:|:-:|:-:|:-:|:-:|
|1|/p:PublishSingleFile|-|TRUE|TRUE|TRUE|TRUE|TRUE|
|2|/p:PublishReadyToRun|||TRUE|TRUE|TRUE|TRUE|
|3|/p:PublishTrimmed||||TRUE|TRUE|-|
|4|Warp|||||TRUE|-|
|5|--self-contained||TRUE|TRUE|TRUE|TRUE|FALSE|
||サイズ|164[KB]|149 [MB]|149 [MB]|134 [MB]|55.5[MB]|164 [KB]|

---

# .csprojにも書けます

```xml
<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <OutputType>Exe</OutputType>
    <TargetFramework>netcoreapp3.0</TargetFramework>
    <PublishTrimmed>true</PublishTrimmed>
    <PublishReadyToRun>true</PublishReadyToRun>
  </PropertyGroup>
</Project>
```

# 参考情報

公式ドキュメント
https://github.com/dotnet/designs/blob/master/accepted/single-file/design.md#user-experience

なぜか詳しいおっちゃんのサイト
https://www.hanselman.com/blog/MakingATinyNETCore30EntirelySelfcontainedSingleExecutable.aspx

---

# 完
ArduinoでPROGMEMを使ってみる

# PROGMEMとは
- Flashメモリにデータを格納するためのもの

# Arduinoの仕組み
- ATmega328P
    - プログラムとデータが物理的に分離された領域に配置される

| 種類 | 容量 | 揮発性 |
|:---|:---:|:---:|
| Flashメモリ | 32kB | 不揮発性 |
| SRAM | 2kB | 揮発性 |
| EEPROM | 1kB | 不揮発性 |

## Flashメモリ
- スケッチ書き込み時に使われる
- その後SRAMにコピーされる
    - intとか使った場合はこのタイミングでコピーされる

## SRAM
- スケッチの実行中に変数の作成と操作がおこなれる領域

## EEPROM
- 長期的に情報を記録するための領域

# 問題点
- 大きなデータを扱うときにSRAMを使うと足りなくなってしまう
- そこでFlashメモリに書き込み、必要な時だけSRAMに読み込むことでSRAMを圧迫せずに済む
    - このためのPROGMEM!!

# PROGMEMを使ってみる
## 変数の宣言
- ググると `prog_int16_t` を使えみたいなのが書いてるけどそれはもう古いぞ
- 正しくは `const 型　変数 PROGMEM = hoge;`

## 読み出し
- `pgm_read_byte (フラッシュメモリ上アドレス)`
- つまりは `pgm_read_byte(&(変数))`


## サンプルコード
- 2次元配列も大丈夫
- 昔のバージョンだと　`#include <avr/pgmspace.h>` がいるみたい

*(ファイル名は.inoだけどハイライトつけたいので.c)*

```progmem.c
const int train_x[4][2] PROGMEM = {{0,0},{0,1},{1,0},{1,1}};

void setup(){
	Serial.begin(9600);
	Serial.println("Values from PROGMEM");
}

void loop(){
	for(int i = 0; i < 4; i++){
		for(int j = 0; j < 2; j++){
			int tmp = pgm_read_byte(&(train_x[i][j]));
			Serial.println(tmp);
		}
	}
	while(1);
}
```
http モジュール(node.js)で、ローカル画像ファイルを使用する。

この記事は、**[httpモジュール](https://nodejs.org/docs/v10.14.2/api/http.html)**で、ローカル画像ファイルを使う方法を書き込んだ
個人的なメモです。:point_up:


httpモジュール内で、画像を表示させる一番簡単な方法として、

**画像アドレスを使用する**

```
//html
<img src="http://○○○○○○">

//pug
img(src="http://○○○○○○")
```

が、あります。が、この方法は任意の画像をどこぞにアップロードして画像アドレスを
取得しなければなりません。
例えば私が**N予備校**の授業で作った**[アンケートページ](https://dry-retreat-31961.herokuapp.com/index)**では、
グーグルドライブに画像をアップロードして、そこからアドレスを取得して使っています。:cloud:

尚、グーグルドライブの画像を使うにはちょっとクセがあります。

:writing_hand:　**[グーグルドライブ](https://www.google.com/intl/ja_ALL/drive/)の画像を使う場合**
グーグルドライブにアップロードした任意の画像→
右クリック→「共有可能なリンクを取得」で取得するURL　・・では**エラー**になってしまいます。

```
//「共有可能なリンクを取得」でコピーできるURL
https://drive.google.com/open?id=○○○○○○○○○○
```

利用するには、このアドレスの「id=」の前を入れ替えます。

```
//表示用のアドレス
http://drive.google.com/uc?export=view&id=○○○○○○○○○○
```

↑表示用のアドレスでidを入れ替えればOK。

~~これでも十分なんですけどね。~~

##httpモジュール内のWebページでローカル画像を読み込ませる。
本題です。やり方としては、上に書いた通り、画像URL（画像が表示されるアドレス)があれば
画像が使えるので、画像を表示させるアドレス(パス)を作ります。
使用してる画像ファイル(参考
![buta.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212989/291da8fa-ee3c-d60e-b806-1b6c2bbb4b97.png)　buta.png
ファイル構成
index.js 　(http.createServerしてるファイル)
views 　　(ページをレイアウトするpugファイルなどなどを入れたディレクトリ)
　┣ pugファイル
　┗ images　 (画像ファイルを入れているディレクトリ)
　　　┣ buta.png

```
const fs=require("fs");　//　←　超重要(忘れやすい)

  switch (req.url) {
    case '/index':
      ${indexにリクエストが来た時に動く関数}(req, res);
      break;
    case '/images/buta.pug':  //　←　アドレスは任意。本当はuuidとか使うのがいいのかもしれませんが。
      res.writeHead(200, {
      'Content-Type': `image/png; charset=utf-8`  //　← ここがキモ！
      });
      var image = fs.readFileSync("./views/images/buta.png", "binary"); // ← ファイルpathはその環境に合わせてください
      res.end(image, "binary");
      break;
    default:
      break;
  }
```

switch文で画像アドレスを作り、そこにリクエストがきたら**fsモジュール**で画像を読み込んで表示させるというただそれだけです。
readFileは``Sync``にしないとエラーがでます。(私の環境だと)
※　jpg画像の場合は``'Content-Type': `image/jpeg;``です。(jpgではない)
これでローカル画像が使えます:v_tone1:
例)
``<img src="/images/buta.pug">``

**まとめ**
*Express*フレームワークは偉大

:star2:参考にさせてもらったContent-Typeまとめページ:star2:
:point_right:　https://qiita.com/AkihiroTakamura/items/b93fbe511465f52bffaa
テスト環境で<meta name="csrf-token">が消える

meta要素からCSRFトークンを取り出すJavaScriptがあると、テスト環境でページが動かなくなることがあります。テスト環境ではallow_forgery_protectionのデフォルトがfalseで、falseだとmetaが埋め込まれないからです。

```ruby:config/environments/test.rb
config.action_controller.allow_forgery_protection = false
```

metaがないせいでテストが落ちるときは、一時的に設定を変更します。

```ruby
before do
  ActionController::Base.allow_forgery_protection = true
end

after do
  ActionController::Base.allow_forgery_protection = false
end
```
buefyのデフォルトアイコンをFont-Awesomeにする

```
Vue.use(Buefy, {
    defaultIconPack: 'fas',
    // ...
})
```

これだけでよかった。
https://buefy.org/documentation/constructor-options/

- 全てのフォームにちまちまと`icon-pack="fas"`を仕込まなくてもよかった。
- `b-numberinput`のプラスマイナスのアイコンを変更できなくて絶望しなくてもよかった。
- `b-numberinput`のソースを追いかけて「`iconPack="fas"`ならいけるやん…！」とか感動しなくてもよかった。
- 冷静に考えてできないわけないだろ、と思われるものはちゃんと調べよう。
pylint をインストールしようとして sitecustomize のエラーに悩まされた話

# 概要
Visual Studio Code で [Python 拡張機能](https://marketplace.visualstudio.com/items?itemName=ms-python.python)をインストールしたら

>Linter pylint is not installed.

と出たので，指示通り pylint をインストールしようとしたら sitecustomize 絡みのエラーが出た．エラーを解消するには `usercustomize.py` を自分で書いて設置すればよい．

なお，筆者の Python バージョンは下記の通り．

```
Python 3.8.0 (tags/v3.8.0:fa919fd, Oct 14 2019, 19:37:50) [MSC v.1916 64 bit (AMD64)] on win32
```

# 詳細
Visual Studio Code のダイアログに従って pylint をインストールしようとすると

```
>python -m pip install -U pylint --user
```
と同等のコマンドが実行される．ところが，`Preparing wheel metadata ...` のところで次のようなエラーを吐いた．

```
ERROR: Command errored out with exit status 1:
     command: 'C:\Users\ユーザー名\AppData\Local\Programs\Python\Python38\python.exe' 'C:\Users\ユーザー名\AppData\Local\Programs\Python\Python38\lib\site-packages\pip\_vendor\pep517\_in_process.py' prepare_metadata_for_build_wheel 'C:\Temp\tmpv4cd53yk'
         cwd: C:\Temp\pip-install-6tndi160\lazy-object-proxy
    Complete output (12 lines):
    running dist_info
    creating C:\Temp\pip-modern-metadata-pfp85tml\lazy_object_proxy.egg-info
    writing C:\Temp\pip-modern-metadata-pfp85tml\lazy_object_proxy.egg-info\PKG-INFO
    writing top-level names to C:\Temp\pip-modern-metadata-pfp85tml\lazy_object_proxy.egg-info\top_level.txt
    writing manifest file 'C:\Temp\pip-modern-metadata-pfp85tml\lazy_object_proxy.egg-info\SOURCES.txt'
    reading manifest file 'C:\Temp\pip-modern-metadata-pfp85tml\lazy_object_proxy.egg-info\SOURCES.txt'
    writing manifest file 'C:\Temp\pip-modern-metadata-pfp85tml\lazy_object_proxy.egg-info\SOURCES.txt'
    creating 'C:\Temp\pip-modern-metadata-pfp85tml\lazy_object_proxy.dist-info'
    Error in sitecustomize; set PYTHONVERBOSE for traceback:
    SyntaxError: (unicode error) 'utf-8' codec can't decode byte 0xe0 in position 0: unexpected end of data (sitecustomize.py, line 7)      
    error: invalid command 'bdist_wheel'
```
エラーメッセージを見ると `sitecustomize.py` に問題がありそうなのだが，このファイルが存在するはずの `C:\Users\ユーザー名\AppData\Local\Programs\Python\Python38\Lib\site-packages` にファイルそのものが存在しなかった．

色々調べた結果

- [最近のUnicodeDecodeError - Qiita](https://qiita.com/ousttrue/items/527a9c3045f710806aa9)

の通りに `usercustomize.py` を作成し，先ほどの `C:\Users\ユーザー名\AppData\Local\Programs\Python\Python38\Lib\site-packages` に設置したら，無事 pylint のインストールができた．


# 参考
- [最近のUnicodeDecodeError - Qiita](https://qiita.com/ousttrue/items/527a9c3045f710806aa9)
Capybara+ChromeでJavaScriptのエラーを出力

headless Chromeを使ったテストで、JavaScriptのエラーのせいで先に進まないときは、次のコードを埋め込んでコンソールの内容を調べられます。

```ruby
puts page.driver.browser.manage.logs.get(:browser).collect(&:message)
```

`get(:browser)`が返すのは、[Selenium::WebDriver::LogEntry](https://seleniumhq.github.io/selenium/docs/api/rb/Selenium/WebDriver/LogEntry.html)オブジェクトの配列です。

JavaScriptの`console.error`、`console.warn`の内容も出力できます。`console.log`、`console.info`、`console.debug`の内容は出せません。
WSLでpbcopyを使う

MacOSでは`pbcopy`のコマンドを使うことで、出力をクリップボードにコピーすることができます。

```
$ echo hoge | pbcopy
```
これをWSLで使いたい

WSL上でUbuntuが動いてるので、「[Macのpbcopyをubuntuでも使う](https://qiita.com/yoshikyoto/items/1676b925580717c0a443)」で書かれている`xsel`というコマンドを使ってみる

```
$ sudo apt-get install xsel
$ echo hoge | xsel --clipboard --input
xsel: Can't open display: (null)
: Inappropriate ioctl for device
```

環境変数でDISPLAYを設定しないとダメっぽい
めんどくさそうので他の方法をとる

Windowsの`clip.exe`が同じ仕事をしてくれて、WSLで呼び出すことが可能らしいので

```
$ echo hoge | clip.exe
```

クリップボードにコピーできました
こっちの方がWSLだとスマートな気がします

最後にエイリアスを定義する

```
alias pbcopy = 'clip.exe'
```


## 参考
- [WSLからWindowsのクリップボードを入出力したい](https://blog.tmyt.jp/entry/2018/02/02/171311)
- [WSL 環境で標準出力をクリップボードにコピーする](https://qiita.com/7iva/items/9ecd7f2f178cd7c1d0b3)