OmniAICreator/Qiita-1.07M huggingface dataset:
JS Promise

#Promise
Promiseオブジェクトは非同期処理の最終的な完了処理(もしくは失敗)及びその結果の値を表現します。

```javascript
var promise1 = new Promise(function(resolve, reject){
      setTimeout(function(){
        resolve('foo'); 
      }, 300);
    });

    promise1.then(function(value){
      console.log(value);
    });

    console.log(promise1);

    //Promise {<pending>}
    //"foo"
```

##構文
```javascript
new Promise(executor);
```
###引数
- executor
 - 二つの引数resolveとrejectを取る関数。executor関数はresolve関数とreject関数が渡されてPromiseが実装されるとすぐに実行されます(Promiseコンストラクターがオブジェクトを返すよりも前にexecutorは実行されます)。resolve関数とreject関数は呼び出されるとPromiseに対してそれぞれresolve(解決)もしくはreject(拒否)を行います。executorは通常、非同期の作業を開始して、完了した際にresolve関数(成功した場合)もしくはreject関数(エラーが発生した場合)のいずれか一方を呼び出します。executor関数でエラーが投げられた場合、Promiseはrejectされます。executorの返り血は無視されます。

#参考
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise
background とbackground-colorの違い

#backgroundは省力形でまとめて書ける:grin:

背景指定の省略形です。
省略したbackgroundしか使わないようにすれば、`短く表記`できます。

```css
.hitokage{
background: #000 url(image/hitkage.gif) repeat-x fixed right bottom;  
}
 ```
上の例は｢background-color｣｢background-image｣｢background-repeat｣｢background-attachment｣｢background-position｣って順番に記述しています。



##backgoundプロパティー種類
①background-color:
②background-size:　※ここにcoverはよく使う♪
③background-image:url(   )　※カッコ内はクォーテーションはつけない
④background-position:
⑤background-repeat: repeat-〇　←あまり使わない
※⑥background-attachment←ほとんど使わない

##background-positionの使い方、意味
背景画像の位置の初期値を指定します。
何も指定しなければ左上端（top leftまたは0 0）の状態です。

top・right・bottom・left・center　で指定。
※組み合わせての指定も可能。
例）background-position:` top right`;  ←こうすれば、右上に表示される♪

それ以外にもpxやem,%で細かい位置の調整もできる。
例）background-position: `50px 100px`;   ←topから50px　leftから100pxの状態です。


ちなみに、ドットインストールの動画では、

background-size:cover
background-position: `50% 50%`; ※垂直方向　水平方向　の順で使用していました♪



最後に、

知らなかったbackground-repeatの使い方を書いておきます。
※使うことはほとんどないように思います:joy:

名前の通り、背景画像の繰り返し方法を指定します。
何も指定しなければ`縦横方向`に繰り返される repeat がかかっている状態です。

```
background-repeat: repeat-x;   
background-repeat: repeat-y; 
background-repeat: no-repeat;   
```
repeat-xは横方向`だけに`・repeat-yは縦方向`だけに`指定された背景画像を繰り返します。
no-repeatは背景画像を繰り返さないです。
PHP For Beginnersチュートリアル　その11　データベースからのデータの取得

##このシリーズの目的

体系的なwebコーディングの訓練ができるようになるためにPHPの初学のきっかけかつ、PHPでログインフォームやフォームを実装することができるようになるために

[PHP For Beginners](https://www.youtube.com/playlist?list=PLgt-G5tEOlKX4LKrBCYfjcyrp7wmnRdAL)

上記のチュートリアルを進めているのでその備忘録。

[前回](https://qiita.com/shitikakei/items/b3947e5d2782e085c1db)

##内容

**今回のチュートリアル**

[PHP Tutorial - How To Get Data From MySQL Database
](https://www.youtube.com/watch?v=1kM8420VLzI&list=PLgt-G5tEOlKX4LKrBCYfjcyrp7wmnRdAL&index=12)

**このチュートリアルでやること**

・データベースからのデータの取得について確認をする

＊チュートリアルをやる前に自分でデータベースを予め作っておくこと。
作り方がわからなければこれまでのチュートリアルからの補足からその4へ飛んで確認してほしい。


**成果物**

```php:index.php

<!DOCTYPE html>
<html lang=ja>
<head>
	<meta charset="UTF-8">
	<title> Getting Data From MySQL Database With PHP</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-8 offset-md-2">
				<table class="table table-hover table-bordered">
					<tr>
						<td>ID</td>
						<td>Name</td>
						<td>Country</td>
					</tr>
	
					<?php 
					$conn = new mysqli('localhost', 'root' , '', "gettingMySQL" );

					$sql = $conn -> query('SELECT * FROM country');
					 while ($data = $sql -> fetch_array()) {
					 	echo "<tr>
					 	<td>" . $data['id'] . " </td>
					 	<td>" . $data['name'] . " </td>
					 	<td>" . $data['country'] . "</td>
					 	</tr>";
					 	
					 }
				 ?>
				</table>
			</div>
		</div>
	</div>
</body>
</html>
```

## これまでのチュートリアルからの補足

下記チュートリアルでやったことからの補足が今回のチュートリアルである。

[PHP For Beginnersチュートリアル　その4](https://qiita.com/shitikakei/items/6085a90feed3e2d9f3b5)

[PHP For Beginnersチュートリアル　その6](https://qiita.com/shitikakei/items/51df3898292acf5b1fbe)

fetch_arrayとかqueryってなんだっけとなったらもう一度確認してほしい。
下記の注釈で記載するが補足としては上記のチュートリアルでは取得する値を指定していたが、今回はすべて取得する処理はどうなるかということである。

## 今回のコードの注釈

```php:query(SELECT......)について

$sql = $conn -> query('SELECT * FROM country');


```

query関数でSELECTから始まる場合、データベースに登録されているデータの値を取得するためのクエリ文になるということは学習済だが、これまではSELECTに取得したいデータの値を指定していたのに対して今回はアスタリスクを指定することですべての値を取得することができる。
今回は取得した値をテーブルにして表記する形になっている。
Visual Studio 2008 Express 版の入手方法

自身のブログ記事で書いていた内容の移植です。(ブログを削除した為)
タイトル通りの内容で、Visual Studio 2008 Express 版の入手方法のメモです。
※ Microsoft 公式からのダウンロードです。

## 手順
まず、Google で "Visual Studio 2008 Express PDF" と検索します。
そうすると、検索結果として以下のような結果が得られるかと思うので赤枠で囲ったリンクをクリックします。
以下の URL をクリックすると以後説明する PDF が表示またはダウンロードされます。
[Visual Studio 2008 Express Edition with Service Pack 1 のダウンロード](http://download.microsoft.com/download/4/9/1/4915E136-7EE3-4D8A-9529-B988266649E6/vstudio_2008_product_express_default.pdf)
![Choice01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192353/0df4785d-7bf9-0f39-e165-9edb440c4a6e.png)

PDFファイルを開くと当時のVisual Studio 2008 Express版をダウンロードするウェブサイトが表示されます。
ダウンロードのリンクをクリックすれとブラウザが立ち上がり、インストールファイルをダウンロードすることができます。
![result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192353/5ccff718-467e-235e-af9f-ccace701ebbe.png)

また、ページを下にスクロールすると VB, C#, C++, Web の4つを含むISOイメージファイルもダウンロードすることができます。
![result02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192353/cd611c9e-82c3-7545-162c-a75beec17958.png)
PHP For Beginnersチュートリアル　その10　ファイルアップロードの振り返り

##このシリーズの目的

体系的なwebコーディングの訓練ができるようになるためにPHPの初学のきっかけかつ、PHPでログインフォームやフォームを実装することができるようになるために

[PHP For Beginners](https://www.youtube.com/playlist?list=PLgt-G5tEOlKX4LKrBCYfjcyrp7wmnRdAL)

上記のチュートリアルを進めているのでその備忘録。

[前回](https://qiita.com/shitikakei/items/0b3d675f123bf1622831)

##内容

**今回のチュートリアル**

[PHP Tutorial For Beginners: File Upload
](https://www.youtube.com/watch?v=O4MDyzhSY7Y&list=PLgt-G5tEOlKX4LKrBCYfjcyrp7wmnRdAL&index=11)

**このチュートリアルでやること**

・PHPでのファイルのアップロードについて再度確認をする


**成果物**

```php:index.php

<?php 

if (isset($_POST['submit'])) {
	// echo "<pre>";
	// print_r($_FILES);

	$targetfile = "uploads/".basename($_FILES['attachment']['name']);
	$extension = pathinfo($targetfile,PATHINFO_EXTENSION);
	// echo $extension;
	
	if($_FILES['attachment']['size'] > 500000) 
		echo "your file is too big!";

	else if($extension != "png" && $extension != "jpg" && $extension != "jpeg")
		echo "Only the image files are allowed!";

	else if(file_exists($targetfile)) 
		echo "File with name already exists!";
	
	 else if(move_uploaded_file($_FILES['attachment']['tmp_name'],$targetfile))

		echo "File Uploaded!";
}



 ?>

 <!DOCTYPE html>
 <html>
 <head>
 	<title>PHP File Upload test</title>
 </head>
 <body>
 <form action="index.php" method="post" enctype="multipart/form-data">
	<input type="file" name="attachment"><br>
	<input type="submit" name="submit" value="Upload">
 </form>
 </body>
 </html>
 
```

## 大まかな手順

今回と次回はこれまでのチュートリアルで出てきたことについて改めて補足を兼ねて基本を確認する回である。今回はその7のチュートリアルでサクッと出てきた、PHPでのファイルのアップロードについて。

1.PHPの設定について

```php:index.php

<?php 

 echo phpinfo();

?>

```

PHPのバージョンや設定を確認するためのコマンド。
直接ターミナル出力したり色々あるが、これはindex.phpを読み込むとwebブラウザで表示するようなものになっている。
確認して変更する項目があるなら今度はphp.iniを探して編集する。
今回用があるのはfile_uploadとfile_max_uploadの2項目。
前者はファイルのアップロード機能のオンオフ、後者はアップロードするファイルのサイズの上限を指定する項目なので、それぞれ目的に応じて編集する。
編集したら再起動(私はXAMPPで仮想環境を作っているのでXAMPPのApacheとMysqlを再起動する)し、もう一度phpinfoを確認して変更されているかどうか確認をする。

2.ファイルのアップロードのための下準備

その7でも触れたが、ファイルをアップロードした際には仮に保存されるフォルダとそこからファイルを移して保存しておくフォルダの2つが必要である。
前者は用意されているが、後者は自分で予め用意しておく必要があるので準備しておく。

3.今回実装する処理

・アップロードされるファイルサイズに制限をつける
・アップロードされるファイルの拡張子に制限をつける
・同一のファイルはアップロードされないようにする

今回想定されているファイルのアップロードは画像のアップロードなので、例えば動画ファイルやあまりにもサイズが大きいものは弾かれるようにしておくということ。

## 今回のコードの注釈

アップロードの基本であるbasename及びmove_upload_fileについては以下を参照してほしい。

[PHP For Beginnersチュートリアル　その7](https://qiita.com/shitikakei/items/4cf7c57c8a7fbd3c3f65)


```php:pathinfo()について

$extension = pathinfo($targetfile,PATHINFO_EXTENSION);


```

pathinfoはパスを取得するための関数で具体的にはディレクトリ名、名前。拡張子、拡張子を覗いたファイルの名前が連想配列で取得される。
引数の次にオプションを設定すると連想配列の中から任意の値だけ返すようになる。

オプションは


| オプション名      　|    取得する値      　　　　|         例         |
|:-----------------|------------------:|:------------------:|
| PATHINFO_DIRNAME 　　　　|      ディレクト名　　　|   /home/test/web        |
| PATHINFO_BASENAME|            ファイル名 　　　|       web.jpg       |
| PATHINFO_EXTENSION|          拡張子 　　　　|        jpg        |
| PATHINFO_FILENAME |                拡張子なしのファイル名　　　　　|         web         |

と以上4つがあるので取得したい値に応じて指定する。
今回は拡張子を取得したいのでPATHINFO_EXTENSIONを指定する。

## 参考

[pathinfo](https://www.php.net/manual/ja/function.pathinfo.php)
Qiitaで画像のサイズを変える方法


ＳＴＥＰ１
OneNoteを使ってブラウザから画像の貼り付けをします。

ＳＴＥＰ２
`![ファイル名](URL)`

という形で出るので、

`<img width="表示幅" alt="ファイル名" src="URL">`

とコピペをすれば変更が可能です。

表示幅はpx、でも、％でも大丈夫です:sunny:


下に具体例をあげておきます(^^)

`![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458009/b635324d-9b0f-d416-1699-3e2b1337c699.png )`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458009/b635324d-9b0f-d416-1699-3e2b1337c699.png )

↓

`<img width="50%" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458009/b635324d-9b0f-d416-1699-3e2b1337c699.png">`

<img width="50%" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458009/b635324d-9b0f-d416-1699-3e2b1337c699.png">

という感じです。ここから、たくさん投稿頑張ります:yum:
【OculusQuest】×【scrcpy】バッチ叩けばOK！簡単ミラーリング

##ミラーリング
~~2019/08/10 時点では提供元不明のアプリをOculus公式のミラーリング機能で~~
~~ミラーリングすることはできません、、、~~

(2019/09/17 追記)
いつの間にかできるようになってました。。。やったね！！！

なので、みなさんALVRやscrcpy[^1]などを利用されていることだと思います。

私もその一人なのですが、
コマンドの入力に時間がかかってデモの時にあたふたしたのでバッチを作りました。
これでチンパンの私も一瞬にしてドヤ顔ミラーリングができます。

##バッチの作り方
**※Windows専用となります。**

念のため、「バッチってどうやって作るねん」っていう数週間前の私と同じ方向けに作り方も書きます。

**テキストエディタ(メモ帳など)に自動化したい処理を書いて、ファイル名の`txt`の部分を`bat`に変えます**

終わりです。あとは保存して、使うときはダブルクリックでOKです。


##作ったバッチ
作ったといっても先駆者の方[^2]のバッチをかき集めただけですが、
scrcpyの接続[^3]まで自動化したものは探しきれなかったので作りました。

使ってみると今までポチポチ入力してたのがアホらしくなる便利さでした。
QuestとPCをケーブルで接続した状態でバッチを実行します。

```
adb disconnect

for /F "usebackq delims=" %%s in (`adb shell "ifconfig wlan0 | grep 'inet addr:' | sed -e 's/^.*inet addr://' -e 's/ .*//'"`) DO set ip=%%s
echo %ip%
adb tcpip 5555
adb connect %ip%:5555
adb devices

choice /c YN /m "接続に成功しましたか？成功した場合はケーブルを抜いてください"
@echo off
if errorlevel 2 goto :no
if errorlevel 1 goto :yes

:no
echo 終了します。接続を確認して再度バッチを起動してください。
pause
exit /b

:yes
echo 5秒後に起動します。

cd "ファイルの保存場所\scrcpy-win64-v1.10"

:LOOP
    timeout /T 5 > NUL
    adb wait-for-device
    scrcpy -s %ip%:5555 -c 1000:1000:110:220 
goto :LOOP

```
---
2019/09/17 修正

**USBケーブルを抜くタイミングが早いと、Scrcpyの立ち上げに失敗する**
というのを発見しました。(私のPC上での再現性は非常に高かったです)

なのでYキーを押してから、5秒後にScrcpyを立ち上げるように変更しました。

あとコメントで@shiena さんからアドバイス頂いてた、
`adb wait-for-device`　と　接続のループを取り入れてます。(ありがとうございます！！！)

また、複数台同じネットワークにスマホや同様のデバイスが接続されている場合は、
「どれに接続したらええんですか？」と怒られます。

なのでScrcpyを立ち上げる際に、これですよ～ってのを教えてあげてます。
`-s %ip%:5555`の部分です。どのデバイスか指定してます。

```
scrcpy -s %ip%:5555 -c 1000:1000:110:220 
```
ただ、`adb connect`の段階でデバイスを指定しないと意味がないかもしれません。
(よくわかってないので詳しい方「それ意味ないよ」とかコメントください)


##adb server version (40) doesn't match this client (41); killing

バージョンの違いを怒られ続けていました。
「なんかよくわからんけど動くからヨシ！」状態だったので調べました。
[Stackoverflow](https://stackoverflow.com/questions/56948676/adb-server-version-40-doesnt-match-this-client-41-killing)に解決方法がありました。

Android のSDKフォルダ(私はここにありました→　`C:\Users\ユーザー\AppData\Local\Android\Sdk\platform-tools`)
からファイルを三つほどパクればOKです。

adbサーバーが立ちあがった状態でコピーしようとすると、「まだ動いてるからやめて」って言われるので、
`adb kill-server`　してからコピーしましょう。

---

使い方は指示に従うだけです。
事前に、最後の方の`cd`以下にscrcpyの保存先ディレクトリを貼り付ける作業だけ行います。

下記の箇所で
普通にscrcpyを起動すると左右のディスプレイがそのまま二画面で映ってしまうのを
切り取って一画面のみ表示しています。
`scrcpy -c 1000:1000:110:220`

万が一、下記のエラーコードが表示された場合は接続に失敗しているので
きちんと接続されていたか、ケーブルを抜くタイミングが正しいかなどを
確認してください。
![errorScrcpy.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244071/a3dc895f-7746-5b5c-06f8-8a60e92b98b3.png)


[^1]: [scrcpy入手場所](https://github.com/Genymobile/scrcpy)
[^2]: [参考リンク](https://qiita.com/Tomoyuki_Mikami/items/183be9b0698ee00f7fac)
[^3]: [参考リンク](https://qiita.com/divideby_zero/items/1151ab760cbaa3d43d45)
あなたがnpm installをしてはいけない時

### [記事を移転しました](https://blog.minimalcorp.com/posts/LisaFQmT1N2KwGE-S3IqlA)。

以下の概要をみて、興味があればご覧ください。

### 概要

あなたは普段、何気なく `npm install` を使っていることでしょう。  
しかし、 `npm install` が何をしているのか、実は誤解している人も多いと思います。

記事のタイトルは釣りではないので、どんな時に `npm install` は問題を起こすのか、説明できない人は以下を読み進めてください。これは多くの開発者が無意識に無視している、とても重要な事項だと思っています。

なお、npm 4.x系以下の方は本記事の対象ではありません。

[続き -> https://blog.minimalcorp.com/posts/LisaFQmT1N2KwGE-S3IqlA](https://blog.minimalcorp.com/posts/LisaFQmT1N2KwGE-S3IqlA)
DonkeyCar 3.1.0「Azure Virtual Machine」を使ってGPUで訓練する

#ディープラーニング用仮想マシンを作成
Azure にサインイン
ポータル画面を開く
「＋リソースの作成」をクリック
"Deep Learning"で検索
「Deep　Learning Virtual Machine」をクリック
「作成」をクリック
##１ 基本
「Name」名前を決める
「Select OS type for ...」はLinuxを選択
「User name」は仮想マシンにログインするユーザー名を決める
「Password」は同パスワードを決める
「Confirm password」は上と同じものを再入力
「サブスクリプション」はそのまま
「リソースグループ」は新規作成で名前を決める
「場所」は「East US(米国東部)」
「OK」をクリック
##２ Settings
「Virtual machine size」
デフォルトの「NC6」で良いが変更する場合は「サイズを変更します」をクリックしてVMサイズを選んで「選択」をクリック
##３ 概要
「OK」が青くなったらクリック
##4 購入
「作成」をクリック
4分ほど待つとインスタンスが作成されたとメッセージが出る
#vmに接続
Azureポータル画面左側メニューの「Virtual Machines」をクリック
作成した名前をクリック
「パブリックIPアドレス」にターミナルからsshで接続する
#vmにDonkeyをインストール
$ wget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh
$ bash ./Miniconda3-latest-Linux-x86_64.sh
$ mkdir projects
$ cd projects
$ git clone https://github.com/autorope/donkeycar
$ cd donkeycar
$ git checkout master
仮想環境を作成
$ conda env create -f install/envs/ubuntu.yml
仮想環境に入る
$ conda activate donkey
$ pip install -e .[pc]
$ conda install tensorflow-gpu==1.13.1
$ donkey createcar --path ~/mycar
$ cd ~/mycar
#vmに教師データファイルをアップロード
ラズパイのターミナルで
$ rsync -rtv ~/mycar/data/tub_xxx (vmのユーザー名)@(vmのパブリックIPアドレス):~/mycar/data
オプション
r：ディレクトリを再帰
t：ファイルのタイムスタンプを保持
v：経過表示
z：圧縮して転送
--delete：同期元にないファイルを同期先から削除する
ラズパイのmyconfig.pyでDEFAULT_MODEL_TYPE = 'linear'等を変更していたら
$ rsync -tv ~/mycar/myconfig.py (vmのユーザー名)@(vmのパブリックIPアドレス):~/mycar/
もしconfig.pyも変更していたら
$ rsync -tv ~/mycar/config.py (vmのユーザー名)@(vmのパブリックIPアドレス):~/mycar/
#訓練
vmのターミナルで
$ time python manage.py train --tub ./data/tub_xxx --model ./models/mypilot.h5
訓練のタイプをmyconfig.pyの書き直しをせずに既定のlinearから変更する場合は「--type=(linear|categorical|rnn|imu|behavior|3d|localizer|latent)」で指定する
「Epoch xxxxx: early stopping」が出れば訓練終了
#モデルファイルをラズパイにダウンロード
ラズパイのターミナルで
$ rsync -tvz (vmのユーザー名)@(vmのパブリックIPアドレス):~/mycar/models/mypilot.h5 ~/mycar/models/
#ラズパイで自動運転走行
$ python manage.py drive --model=~/mycar/models/mypilot.h5
#vmを停止
Azureポータル画面左側メニューの「Virtual Machines」をクリック
作成した名前の右端の「・・・」をクリックして「停止」を選択
#再ログイン
$ conda activate /data/anaconda/envs/donkey
$ cd ~/mycar
#リソースを削除
Azureポータル画面左側メニューの「Resource groups」をクリック
削除するリソース名の右端の「・・・」をクリックして「削除」を選択
削除するリソースの名前を入力
#料金
https://azure.microsoft.com/ja-jp/pricing/details/virtual-machines/linux/
「NC6」(デフォルトのインスタンスのサイズ)の従量課金は￥100.80円/時間
vmを停止してもストレージの課金は発生する
継続して使うのでなければ完全に削除してまた使う時にvmを作成しインストールを行う
#使用した費用の確認方法
左側メニューの「サブスクリプション」をクリック
「従量料金」をクリック
「コスト管理」の「コスト分析」をクリック
「累積コスト」をクリックして「1日あたりのコスト」を選択
実際の料金は翌日以降でないと反映されないようだ．．．
Macのスクショをいい感じに保存したい！

macは`Command`+`Shift`+`4`でスクリーンショットが取れて便利！

ですが，撮れること以外はいろいろ不満点があります．

- デスクトップに保存するな！
- 日本語(2バイト文字)混ぜるな！
- **半角スペース入れるな！**
- pngで保存するな！

などなど．

なので，ターミナルと`automator`を少しいじってDesktopのサブフォルダに日本語なしでスペースを削ってjpgにして保存します．

## 手順１. 保存場所と名前を変える

これはいくつか記事がすでにでているためこちらを参考にすると良いかと思います．

[Macのスクリーンショットの保存先と名前を変更する](https://qiita.com/makky_tyuyan/items/e308bf1ae1f883152004)

こちらを参考に以下をターミナルに入力します．

```shell
$ defaults write com.apple.screencapture location ~/Desktop/ScreenShot/
$ defaults write com.apple.screencapture name "ScreenShot"
$ killall SystemUIServer
```

これでスクショの名前が`ScreenShot 2019-08-09 1.08.35.png`となり，`~/Desktop/ScreenShot`下に保存されます．スクショだらけでデスクトップが埋まるという事態はこれで避けられます．

## 手順2. ImageMagickを手に入れる

CLIで画像処理を行う定番のツールとしてImageMagickを入手します．これはbrewコマンドで一発です．

```shell
$ brew install imagemagick
```

## 手順3. Automatorを使ってスペースを消し圧縮したjpeg画像にする

あとは，Macにもともと入っている`Automator`を使って`~/Desktop/ScreenShot`にあるファイルを圧縮します．

F4を押すなりして`Automator`で検索し，起動します．

<img width="NaN" alt="ScreenShot_2019-08-10_1.21.46.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217391/f98c6fe3-c8a3-aef0-90fb-65909d1e50f4.jpeg">

起動したら新規書類からフォルダアクションを選択します．

<img width="681" alt="ScreenShot_2019-08-10_1.23.20.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217391/cc3b16be-7b4a-f740-1ccf-d0baf637d87b.jpeg">

その後画面上部の，`"フォルダアクション"は，次の場所に追加されたファイルやフォルダを受け取る`の横にある選択欄から`その他`を選択し，先ほどの`~/Desktop/ScreenShot`を指定します．

追加されたスクショに対して横のタブにある操作を順番に適用していくことができます．

ここでは以下の順序で画像を変更します．

```
1. pngをjpgに変換する
2. 半角スペースをアンダーバーに置き換える
3. 容量を小さくする．
```

それぞれ

```
1. イメージのタイプを変更
2. Finder項目の名前の変更: テキストを置き換える
3. シェルスクリプトを実行
```

のアクションでこれを行うことにします．左上にある検索窓を活用して追加してください．

<img width="1057" alt="ScreenShot 2019-08-10 1.30.33.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217391/d7f2a6d7-27ae-d039-23ae-e5ae991551f0.jpeg">

まず`イメージのタイプを変更`は変更後のタイプを`JPEG`にします．

次に`Finder項目の名前の変更`は`日付または時刻の追加`プルダウンを選択し，`テキストを置き換える`を選びます．検索文字列を` `(半角スペース)，置換文字列を`_`に変更します．

最後にシェルスクリプトを実行で以下の1行シェルコードを入れます．その際，入力の引渡し方法は`引数として`を選択します．

```shell
for f in $@;do /usr/local/bin/convert $f -strip -quality 85 -colorspace sRGB $f; done
```

<img width="1059" alt="ScreenShot_2019-08-10_1.37.55.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217391/5cf5c206-0371-c991-9c21-b94c00e930c0.jpeg">

これで完成です．スクショを撮ると自動で画像をjpgにし，いい感じに圧縮してくれます．

ただ，ここの圧縮は任意ですが，結果として990KBほどのpng画像を160KBほどのjpg画像にすることができます．速度重視のブログ等を運営している方ならば，なるべく画像の容量は低く抑えたいかと思うので，小手先のテクニックですがなかなか重宝するのではないかと思います．
Ruby on Rails ページに画像を表示するときのメモ

# 目的
- ビューファイルやCSSに画像を載せる方法のメモを記載する。  
※本記事はRuby on Rails超初心者の筆者がまとめたものです。情報が正確ではない可能性があります。優しくコメントをくださると幸いです。

# まとめポイント
- CSSファイルはpublic直下に画像ファイルを設置する。
- 画像を呼び出す際はファイル名の前に必ず`/`(スラッシュ)をつける。
- ビューファイル内での画像ファイル(test.png)の呼び出し

``` html
<img src="/test.png">
```
- CSSファイル内での画像ファイル(test.png)の呼び出し

``` css
background-image: url("/test.png");
```

※内容は少ないですが、まとめたかったので短い記事ですいません。
Sublime TextにFTP機能を追加

Sublime TextにSFTPプラグインを導入してFTP機能を追加します．

# SFTPのインストール

command+shift+P（Macの場合 windowsは多分control+shift+P）を押すと，このような画面が出ます．
![スクリーンショット 2019-08-10 0.36.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458267/366108a4-b1a1-3df2-55c8-ec9fbe8861de.png)
ここにinstallと入力して`Package Control: Install Package `を選択してください．
さらにSFTPと入力してSFTPを選択し，Package Control Messagesというファイルが開けばインストール完了です．


#接続設定

###プロジェクトの作成
ローカルに，サーバからダウンロードしたファイルを保存するためのフォルダを作成します．
作成したフォルダをSublime Textにドラッグ&ドロップするとサイドバーにフォルダが表示されます．
![スクリーンショット 2019-08-10 0.50.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458267/68998ade-0778-15b2-08fd-eed342e8654d.png)




###設定ファイルの編集
フォルダ名を右クリックし，SFTP ＞ Map to Remote...を選択すると，sftp-config.jsonが開きます．
大体はデフォルトのままでいいです．ホスト名，ユーザー名，パスワード，アップロード先のパスは任意の設定に変更してください．
パスは必ずルートディレクトリからの絶対パスを指定してください．パスワードを指定しておくと，1回目の接続以降はパスワードの入力が不要となります．


```sftp-config.json
{
    // The tab key will cycle through the settings when first created
    // Visit http://wbond.net/sublime_packages/sftp/settings for help
    
    // sftp, ftp or ftps
    "type": "sftp",

    "save_before_upload": true,
    "upload_on_save": false,
    "sync_down_on_open": false,
    "sync_skip_deletes": false,
    "sync_same_age": true,
    "confirm_downloads": false,
    "confirm_sync": true,
    "confirm_overwrite_newer": false,
    
    "host": "hostname",
    "user": "username",
    "password": "password",
    //"port": "22",
    
    "remote_path": "サーバのアップロード先のパス",
    "ignore_regexes": [
        "\\.sublime-(project|workspace)", "sftp-config(-alt\\d?)?\\.json",
        "sftp-settings\\.json", "/venv/", "\\.svn/", "\\.hg/", "\\.git/",
        "\\.bzr", "_darcs", "CVS", "\\.DS_Store", "Thumbs\\.db", "desktop\\.ini"
    ],
    //"file_permissions": "664",
    //"dir_permissions": "775",
    
    //"extra_list_connections": 0,

    "connect_timeout": 30,
    //"keepalive": 120,
    //"ftp_passive_mode": true,
    //"ftp_obey_passive_host": false,
    //"ssh_key_file": "~/.ssh/id_rsa",
    //"sftp_flags": ["-F", "/path/to/ssh_config"],
    
    //"preserve_modification_times": false,
    //"remote_time_offset_in_hours": 0,
    //"remote_encoding": "utf-8",
    //"remote_locale": "C",
    //"allow_config_upload": false,
}
```

ダウンロード・アップロードする際はフォルダ名を右クリックし，Upload FolderまたはDownload Folderを選択します．
ショートカットもありますが，ここでは割愛します．

#参考
[SublimeText 3] SFTPでページ更新が劇的に変わる！
https://creatorhyp.com/tips/sublimetext-3-sftp/
Ruby on Rails ビューファイルをCSSで装飾するときのメモ

# 目的
- HTML形式であるビューファイルをCSSを用いて装飾する方法をまとめる。  
※本記事はRuby on Rails超初心者の筆者がまとめたものです。情報が正確ではない可能性があります。優しくコメントをくださると幸いです。。。ごめんなさい！！

# まとめポイント
- CSSファイルはapps/assets/stylesheets直下に作成する。
- CSSファイルの命名法則は「ビューファイル名 + 拡張子(.scss)」  
home.html.erbファイルの装飾を行うCSSファイルの名前は「home.scss」となる。
- RailsのCSSの記法は素のCSS記法と差はない。

※内容は少ないですが、まとめたかったので短い記事ですいません。
irisマハラノビス2

以前にもマハラノビスとirisの記事を書いたけど、
前の記事見直すと分かりにくいし、いい記事を書いてくださった方がいたので。
コードを少し改修しています。

[この記事](https://qiita.com/akikicool/items/a92324428ab8767147cb)


#早速

```R
train_index <- c(1:10)
train <- iris[train_index,]#setosaであれば受け入れる
test <- iris[-train_index,]#setosaも含むがはじきたいものも含んでいる
```

#マハラノビス距離を求めるための分散共分散行列と列平均
```R
## Training (setosa)
center <- apply(train[,1:4], 2, mean)
covar <- cov(train[,1:4])
```

```R
#Calculate distance
test[1,1:4]
#   Sepal.Length Sepal.Width Petal.Length Petal.Width
#11          5.4         3.7          1.5         0.2
test[41,1:4]
#   Sepal.Length Sepal.Width Petal.Length Petal.Width
#51            7         3.2          4.7         1.4
test[91,1:4]
#    Sepal.Length Sepal.Width Petal.Length Petal.Width
#101          6.3         3.3            6         2.5

```

人間がこの数値だけ見ても何がどの種に該当するかわからない。
成長によるばらつきだってあるだろうし。


```R
mahalanobis( test[1,1:4], center, covar ) #setosa
#     11 
#4.85708 
mahalanobis( test[41,1:4], center, covar ) #versicolor
#      51 
#1424.809 
mahalanobis( test[91,1:4], center, covar ) #virginica
#     101 
#3176.181 
```

setosaだけはマハラノビス距離が近いものであると判定されている。
判別できている

元記事ではヒストがあったがコードはなかったので以下。

```R
colect<-mahalanobis( test[1:40,1:4], center, covar ) #setosa

fake_1<-mahalanobis( test[41:90,1:4], center, covar ) #versicolor

fake_2<-mahalanobis( test[91:140,1:4], center, covar ) #virginica

hist(fake_2,col="red",xlim=c(0,4900))
hist(fake_1,col="blue",add=T)
hist(colect,add=T)
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275572/3b129f3d-1aeb-4f30-8e15-63a73c858906.png)

setosaはほとんどすべてが0付近に集まっている。
他の種は離れている。
同じような特徴を持っている変数があっても、他の変数で差があれば検知できる。
データ分析する前に考えたいこと

#データ分析する前に考えたいこと
ここ最近ちょっと忙しく、半年ぶりの投稿です。
そして、コードではなくデータ分析する前に考えたいこと、というテーマです。
（Qiita的に良いのかな、、、)

仕事柄何かと「分析できませんか？」と言われることが多いのですが、データ分析や統計モデルは何も魔法ではないので、データがないと何も出来ないし、データが有ってもアプローチが悪い場合には、結果をミスリードする可能性が高いんですね。

##衝動買される商品の広告効果
例えば、「広告の効果でどれだけ売上が上がったか知りたいです！」というお題の場合、
「なぜ広告打つ → 売上が上がる」となるのかがすごく大事です。
例えば、コカ・コーラやいろはすの新味などは衝動買いも多い商材なので、
「広告接触によって、認知が高まり、購買につながる」ということは十二分に考えられます。広告接触から購入までのタイムラグもそんなになさそうです。
なので、この場合は「広告効果＝売上」としても何かしら良い結果は出せそうです。

##在庫があるような商品の広告効果
一方、家に常に在庫があるような商品、マヨネーズやドレッシングの場合、
広告接触したからと言って、すぐに購入につながるとは考えにくです。
もちろん、マヨネーズが切れていて買わなきゃ！と思い出して買う人もいるかと思いますが、基本的には家にあるマヨネーズが消費され、すぐには購入に繋がらないのではないでしょうか？（もちろん、長いスパンで見ると広告接触によって、在庫買いや家庭のマヨネーズの消費が刺激され、購入につながると思います。しかし週次や月次ではなかなか見えなさそう、という意図です）
なので、この場合は単純に「広告効果＝売上」とすると、「効果なし」という結論が出てしまいかねません。
そのため、「広告接触によって消費者がどんな行動をするのか？それはそのくらいの期間で起こるのか？」というのをよく詰めないと、誤ったアプローチになりかねません。

##マヨネーズの広告の効果とは？
また、「CMを見て、消費者はマヨネーズを使った料理を作る。広告の効果は使用の刺激」と考えている場合、「CMの効果 = マヨネーズの使用量」で良いのでしょうか？
マヨネーズは「マヨネーズのCMを今日は3回見たし、マヨネーズたくさん使っちゃおう！！」という商材でもないので、おそらく使用量も少し遠い変数と言えます。
「CMを見る → マヨネーズを使った料理を作ろうと思う → ○人分を□日分作ろう」というフローが想定され、マヨネーズの使用量は作る量に大きな影響を受けるはずです。
今回の仮定の場合は、「CMの効果 = マヨネーズ使用料理を作る可能性の増加」が一番素直な効果量と言えそうです。

##現実はそう簡単ではない
ここまで書きましたが、現実は「クライアントの要望」「データが取れない」等様々な要因があり、因果が遠そうな変数を用いざるを得ないことが多々あります。
ただ、前者に関しては上手く説得するスキルを身に着けたいものです。分析する側としても「クライアントのためになる（少なくともミスリードはしなそうな）分析」をしたいので、、
Visual Studio のソースコードをアクティブにしたらソリューションエクスプローラーでも選択

デフォルトでは有効になっていないオプションなので、知っている人は使っているケド、知らない人は知らない機能。Visual Studioで、ソースコードなどのウィンドウを選択してアクティブにしたら、ソリューションエクスプローラーでも同じファイルを選択するようにすることができます。
![ActivateAndSelect.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474869/8334a830-c196-3ddd-0ad7-f8215d4e502c.png)
ツール > オプション から「アクティブな項目をソリューションエクスプローラーで選択された状態にする」をチェックします。
![vsoption.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474869/4a6407e9-0eaf-7990-0e9d-dc03414f183b.png)
ソースを沢山開いて行方不明になりかけているときに、ソリューションエクスプローラーの「すべて折りたたむ」を選んだあと、ファイルのウィンドウをクリックすると、さっとそのファイルだけを選んだ状態にできてとても便利です。

他の人の Visual Studio を代わりに操作して話を聞くときに、ちょっと設定変えさせてね、とこれを有効にすると、大抵「もっと早く教えてほしかった」と言われます。
Railsのモデルでの条件付きバリデーションの正しい書き方

## Railsのモデルでの条件付きバリデーション

Railsアプリケーションのモデルにおけるバリデーションを行う際に、自分の書き方が良くなかったことから色々とバリデーションの書き方の勉強になったので、まとめてみます。

Railsのモデルファイルを考えた時、そのモデルがあるフラグがONである場合のみバリデーションを実行したいとします。その時に自分は次のように書いてしまっていました。今回は仮にMessageというモデルとします。

```message.rb
class Message

  ...

  attr_accessor :send_flag

  before_validation :check_send_date

  ...

  private

  def check_send_date
    ... if send_flag # (send_flagがONである場合のみ実行)
  end
end
```

上のコードが自分が書いた良くなかったコードの例です。before_validationで必ずバリデーションメソッドを実行して、メソッドの中に条件文を書くことにより、send_flagがONになっている場合のみチェックが実行されるように書いていましたが、この書き方だと条件に関らずバリデーションメソッドが実行される事になります。つまり行う必要がない場合でも現状バリデーションメソッドを無駄に実行しています。そこでバリデーションメソッドに条件を書くのではなく、

```message.rb
class Message
  ...
  attr_accessor :send_flag
  before_validation :check_send_date, if: -> { send_flag == true } # ←条件文をbefore_validationに移行

  ...

  private

  def check_send_date
    ...
  end
end
```

また今回の例だけでなく、Railsのコントローラーのcreateメソッドが実行されるタイミングでのみバリデーションメソッドを実行したいという時などもあると思います。そのような時はbefore_validationの行の末尾などにon::create を加えると、コントローラーのcreateメソッドが実行される時にのみバリデーションが実行されます。

## まとめ

Railsのモデルでバリデーションを実装する場合、不要にバリデーションが実行されるのを防ぐため条件や、条件を付け加える場所をしっかりと考えて無駄のないバリデーションを行っていきたいと思います。
WSLでターミナルの文字色を変える(2019/8/10版)

WSLの文字色がデフォルトでは見にくくて変える方法調査したので備忘録

# ColorTool
コンソール文字色を変えるにはMSがGitHubで公開しているColorToolというツールを使用すればいいと下記サイトでわかった。
https://shigeo-t.hatenablog.com/entry/2018/12/30/050000

GitHubのリリースページは下記
https://github.com/microsoft/terminal/releases

いろんなツールのリリースが混じっているけどColorToolの最新リリースは現在のところ3ページにあるColor Tool April 2019
https://github.com/microsoft/terminal/releases/tag/1904.29002

zipをDLしたあと解凍したフォルダにコマンドプロンプトで入る。
C:\User\username\Downloads\以下に解凍したとすると

```
cd C:\User\username\Downloads\ColorTool
```

参考サイトによるとその後色を変えるにはテーマ名を次のように指定すれば良いと書いてあった。(テーマがsolarized_darkの場合)

```
colortool -d solarized_dark
```

しかしこのように入力しても次のエラーが発生してテーマをロードできなかった。

```
Could not find or load "solarized_dark"
```

エラー名でググったところ次のissueを発見
https://github.com/microsoft/terminal/issues/770

なに、原因としては単純でColorToolフォルダ以下のschemesフォルダ内に書くテーマのファイルが入っているのだがテーマファイルを拡張子込みで入力しなければいけないというだけだ
ということで下記のように指定し直した。

```
ColorTool.exe -d solarized_dark.itermcolors
```

すると正常にロードされて、WSLのコンソールを開くと文字や背景色を無事変更することができた。

ということで日本語で最新情報がなかったため書いてみた。
これで快適なWSL生活を！
これまでの復習、コンポーネントを別ファイルにしてコールする（React基礎講座5）

# はじめに

今回は、これまでの復習として、Reactのコンポーネントを他のファイルから定義させて、それを読み込みレンダリングさせるというような処理を書きたいと思います。

# シリーズ

本記事はReact基礎講座のための連載になっています。気になる方のために、前の章は以下です。

[React Component について（React基礎講座3） \- Qiita](https://qiita.com/ryosuketter/items/7eb93d2d8402862403e9)

最初の記事は、以下です。

[Reactを使ってJSXの内容をレンダリングする（create\-react\-app）（React基礎講座1） \- Qiita](https://qiita.com/ryosuketter/items/dbac89f398787a1a73d4)

## まずは基本形を書いて行きます

```react:index.js
import React from "react";
import { render } from "react-dom";

render(<App />, document.getElementById("root"));
``` 

では、`<App />` のコンポーネントの中身を書いて行きましょう。

引数は 名前 `name` と 職業 `job` を直接受け取れるようにしましょう。

呼び出す側では引数を渡すようにしましょう。

```react:index.js
import React from "react";
import { render } from "react-dom";

const App = ({ name, job }) => (
  <div>
    {name} {job}
  </div>
);

render(<App name="ryosuketter" job="engineer" />, document.getElementById("root"));
```

これで、view側には、意図通りレンダリングされたと思います。

![スクリーンショット 2019-08-10 00.02.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14191/64001eca-802d-0109-9202-7e62a74d3194.png)

# コンポーネントを別ファイル（component.js）で切り出す

`index.js` 同階層に `component.js` を作成して、コンポーネントを独立させましょう。

```react:component.js
import React from "react";

export const App = ({ name, job }) => (
  <div>
    {name} {job}
  </div>
);
```

`index.js`では、`App`コンポーネントを呼び出すだけにしましょう。

```react:index.js
import React from "react";
import { render } from "react-dom";
import { App } from "./Component";

render(
  <App name="ryosuketter" job="engineer" />,
  document.getElementById("root")
);
```

![スクリーンショット 2019-08-10 00.02.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14191/64001eca-802d-0109-9202-7e62a74d3194.png)

これで同じ結果になったと思います。React はコンポーネントを別ファイルで切り出すことはよくあるので、この作業になれるといいと思います。

# 参考

- 改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで | 山田 祥寛
AndroidX 導入手順

# AndroidXとは？

- AndroidチームがJetpack内でのライブラリの開発、テスト、パッケージ、バージョン管理、リリースに使用しているオープンソースプロジェクト。

- 元のAndroid Support Libraryを大幅に改良。Support Libraryと同様に、AndroidXもAndroid OSとは個別にリリースされ、Androidの下位互換を提供する。

- 同等の機能と新しいライブラリを提供することで、完全にSupport Libraryの代わりとなる。

※SupportLibraryはv28で終了しているので、早めにAndroidXへ移行するのがおすすめ
  
  
# AndroidXを使用する

## 新規プロジェクトでAndroidXを使用する方法

build.gradle(app)で次の2つを設定
Compile SDKをAndroid 9.0（API Lv28）以上  

```build.gradle
android {
    compileSdkVersion 28
    ...
```

dependenciesのSupportLibraryをAndroidXに書き換える

```build.gradle
// 既存のSupport Library
dependencies {
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
}

// AndroidXに書き換える
dependencies {
    implementation 'androidx.appcompat:appcompat:1.0.2'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
}
```

gradle.propertiesで次の2つを設定

```gradle.properites
android.useAndroidX=true
android.enableJetifier=true
```

## 既存のプロジェクトを移行する方法
今回は取り扱わないので下記を参照してください。
[AndroidX への移行](https://developer.android.com/jetpack/androidx/migrate)
  

## バージョンについて
依存関係を記載する際にどのバージョンが適切なのか迷う場合があると思います。そのときは下記を参照して確認してみてください。  

- [MVN REPOSITORY](https://mvnrepository.com/repos/google)
- [Google's Maven Repository](https://dl.google.com/dl/android/maven2/index.html)
  

以上


# 参考

- [AndroidXの概要](https://developer.android.com/jetpack/androidx/)
- [AndroidX リファレンス](https://developer.android.com/reference/androidx/packages)
ShellScriptに入門する(1日目)

[ShellScriptに入門する(1日目)](https://qiita.com/kshiva1126/items/955e8f636adae57aaff5)
[ShellScriptに入門する(2日目)](https://qiita.com/kshiva1126/items/fff8bb8d11f4590cc5bb)
[ShellScriptに入門する(3日目)](https://qiita.com/kshiva1126/items/f303453d00ea1aaaad8a)
[ShellScriptに入門する(4・5・6日目)](https://qiita.com/kshiva1126/items/53f65ef205d5342f7023)

今日から10日間かけてShellScriptを勉強していく
とりあえず[Shell Scripting Tutorial](https://www.shellscript.sh/)を進める
環境 OS: Ubuntu19.04; Shell: zsh

# 導入
適当なディレクトリで作成

```
% echo '#!/bin/sh' > first.sh
% echo '# This is a comment.' >> first.sh
% echo 'echo Hello ShellScript # This is a comment, too!' >> first.sh
```

``` first.sh
#!/bin/sh
# This is a comment.
echo Hello ShellScript # This is a comment, too!
```
1行目の`#!/bin/sh`は/bin/shで実行しますよ〜って宣言
Perlが使いたかったら`#!/usr/bin/perl`みたいに書けばいいみたい
2行目のように`#hogepiyo`みたいな感じでコメントが書ける
3行目ではechoコマンドで引数のHello ShellScriptを出力している
行の途中からでも`#`でコメントできる

作成後にパーミッションを755に変更し、実行する

```
% chmod 755 first.sh
% ./first.sh
Hello ShellScript
```

もちろん同じ結果になる

```
% echo Hello ShellScript
Hello ShellScript
```

# 変数(Part1)

新たにvar.shを作成し、以下のように記述

``` var.sh
#!/bin/sh
MY_MESSAGE="Hello ShellScript"
echo "$MY_MESSAGE"
```

```
% chmod 755 var.sh
% sh var.sh
Hello ShellScript
```

var.sh2行目で変数MY_MESSAGEにHello ShellScriptを代入している
また以下のように"="の前後にスペースを入れた状態で実行したところnot foundとなった

``` var.sh
#!/bin/sh
MY_MESSAGE = "Hello ShellScript"
echo "$MY_MESSAGE"
```

```
% sh var.sh
var.sh: 3: var.sh: MY_MESSAGE: not found
```

3行目で変数を出力している `$VARIABLE`のように書けば変数にアクセスできる

次のShellScriptではreadコマンドで受け取った入力をそのまま変数に代入後に、変数展開された文字列を出力している

``` var2.sh
#!/bin/sh
echo "What is your name?"
read MY_NAME
echo "Hello $MY_NAME - what a brilliant day."
```

```
% chmod 755 var2.sh
% sh var2.sh
What is your name?
kshiva
Hello kshiva - what a brilliant day.
```

今日はここまで
明日も引き続き入門していく
javascriptで、イテレータに直接mapとかfilterを使いたい

Arrayのメソッド使うためだけに、イテレータにArray.fromを使うと、無駄にメモリを使うことになって気持ち悪い。そこで、任意のイテレータをラップする方針にして、こんなコードを試しに書いてみた。

```js
// ArrayLikeIterator.js
class ArrayLikeIterator {
  constructor(it) {
    this.it = it;
  }
  *map (callback) {
    for(const item of this.it) {
      yield callback(item);
    }
  }
  *filter (callback) {
    for(const item of this.it) {
      if(callback(item)) {
        yield item;
      }
    }
  }
  reduce (callback, initial) {
    let result = initial;
    for(const item of this.it) {
      result = callback(result, item);
    }
    return result
  }
  every (callback) {
    for(const item of this.it) {
      if(!callback(item)) {
        return false;
      }
    }
    return true;
  }
  some (callback) {
    for(const item of this.it) {
      if(callback(item)) {
        return true;
      }
    }
    return false;
  }
  get [Symbol.iterator] () {
    return this.it[Symbol.iterator].bind(this.it);
  }
}
export const it = base => new ArrayLikeIterator(base);

// main.js
import { it } from "ArrayLikeIterator";
const result = it(new Set([1,2,3])).map(v => v * 2)
console.log(Array.from(result))
```

Array.fromよりメモリの節約になるものの、ネイティブのメソッドを使えなくなるデメリットもあるから、パフォーマンスが上がるかは実装依存だろうし、そう考えると、わざわざ使う意味ないなって思って、気持ちが萎えてきたので、qiitaに投稿して寝る。

まぁ、SetをObject.createで拡張した方が使い勝手は良いかもしれない。
nodebrewの欠点を紹介します

## nodebrewの欠点を紹介します
Node.jsのバージョン管理ツールnodebrewは便利ですが、フォルダごとにバージョンを分けることが出来ないという欠点があります。

ちなみに、これはndenvを使用することで解決できます。
この記事が参考になれば幸いです。
## 終わりに
私は現在、Web3のサービスの開発をしています。詳しくはこちらの記事をご覧下さい。
        [無料でイーサリアムが当たる、Web3時代の寄付サイトを作った話](https://note.com/kenroda/n/n814347fbdcd7)
2分探索をC言語で実装してみた（日本語崩壊）

##自分用メモ

データ構造とアルゴリズムの勉強をしていたら、2分探索というものが出てきた。
超簡潔に述べると指定したデータを効率よく探す方法である。

※前提として、配列の中身は左から小さい順に並んでいるとする。
（例）[1, 4, 7, 9, 11, 15]

細かいことは置いといて、
探索する数値が配列の真ん中の値よりも、小さいのか、同じなのか、大きいのかで分類していく。探索する数値が真ん中の値と同じになれば、探索成功である。探索する数値が配列の真ん中よりも小さければ、真ん中の値を配列の最大の数として同じように、範囲を狭めていく。真ん中よりも大きい場合も同じようにしていく。
といった感じにやっていくと、最も手間がかかった際でも、

```math
n (\frac{1}{2})^k  = 1 \\



n:全体の操作数の上限\\
k:nを半分にする操作の数


```
こう書けるので、操作数が

```math
k=\log_2 n

```

となる。


参照URL：
http://www.grapecity.com/developer/support/powernews/column/clang/054/page03.htm

~~~ c
#include<stdio.h>

/*探索の対象の配列　――11個*/
int arry[] = {1, 3, 5, 8, 12, 16, 19, 24, 26, 31};

int main(void){
    /*配列の範囲を狭めるための添字*/
    int lowid, midid, highid;
    /*探索する値*/
    int target;

    /*添字の範囲を初期化*/
    highid = 10;
    lowid = 0;

    /*コマンドから入力*/
    scanf("%d", &target);

    /*値が見つかるまで繰り返す*/
    while (lowid <= highid){
        /*int型の計算なので小数点は切り捨て*/
        midid = (lowid + highid) / 2;
        /*過程を出力*/
        printf("lowid=%d, midid=%d. highid=%d¥n", lowid, midid, highid);

        /*見つかればループを抜ける*/
        if(arry[midid] == target){
            break;
        /*値の大小を調べて探索範囲を狭めていく*/
        }else if(arry[midid] < target){
            lowid = midid + 1;
        }else{
            highid = midid -1;
        }
    }
    /*探索の結果見つかれば値を表示*/
    if (arry[midid] == target){
        printf("値 %d は %d 番目に見つかりました。\n", target, midid + 1);
    }else{
        printf("値 %d は見つかりませんでした。", target);
    }
    return 0;
}
~~~
Ubuntuのキーボードの反応が悪い原因がわかった

# はじめに
最近UbuntuPCでコーディングしていると、よく入力漏れによるミスが発生していました。
キーボード壊れたかなと思い、購入を検討していた中で、
キーボードの設定が原因だったことが判明したため、ここに記載します。


# 原因
バウンズキーが有効になっていたせいでした。
![Screenshot from 2019-08-09 22-43-52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277723/47d435de-adfd-3ac6-594c-9854489efaf0.png)

# バウンズキーとは？
書いてあるとおりなんですが、
誤入力防止のために高速で同じ文字を入力できないようにするための機能です。

最初はリピートキーが悪いのかと思いましたが、
リピートキーはキーを長押しすると連打したと認識する機能なので、
関係ない上に、これを無効にしちゃうとカーソルで移動やBackspaceなどで丸々消したいときなんかも連打しないと行けなくなるので、こっちは有効のままにしましょう。

# バウンズキーを無効にする方法
１．右上の▼をクリックし、設定ボタンをクリック(工具のマークです)
２．「ユニバーサルアクセス」を選んで、「タイピング支援[AccessX](T)」をクリック
![Screenshot from 2019-08-09 23-09-16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277723/743b346c-da31-85fc-c828-3c6d616c424d.png)

３．バウンズキーをオフにする
![Screenshot from 2019-08-09 23-09-38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277723/e242c3fd-192e-ade6-51cd-8aa5024cb592.png)

以上！！

# 最後に
なんでバウンズキーが有効になってたかはわからないです。
もしかしたらデフォルトでオンになってるのだろうか・・・？
これまで、レスポンス悪いと思ってたのは実はPCのスペックのせいじゃなかったのかも。
ちゃんと正確にタイピングできるようになったし、これから趣味コーディングが捗るかも！！
機械学習で分析する時のメモ

実験系のデータを機械学習で分析する時に、考えていることを整理してみました。
今の所、条件・組成の最適化問題には便利だけど、自分で考えた方が早いことが多いです。

##始める前
・なぜ、機械学習が必要か。手段が目的になっていないか。
・もっと理論的に考えて実験するアプローチの方が効率良いのではないか。
・最適化か新規手法の探索か。
・原因・機構の解明に力を注ぐべきか。

##手法の選択
・世の中にあるアプリーケーションは。その特徴は。
・pythonでプログラミングする意味は。
・ITに強いエンジニアに外注するのではなく、自分でやる意味は。
・楽に使えるパッケージはないか。それを使わない理由は。
・車輪の再開発になっていないか。また、再開発の必要性は。

##データについて
・十分な量と質があるか。
・さらにデータを取る必要はあるか。
・実験データ以外にもデータベースから取れるデータはあるか。
・説明変数は足りているか。逆に、余計なものはないか。
・前処理は適切か。欠損値、外れ値の処理は。
・訓練データとテストデータの抽出方法は適切か。ランダムサンプリングは問題ないか。
・交差検証の具体的な手法は。

##アルゴリズムの選択
・どの手法が最適か。該当分野での常套手法はないか。
・ハイパーパラメータは最適か。過学習の恐れはないか。

##分析結果について
・分析結果は妥当か。
・モデルの精度と過学習のバランスは。
・外挿領域について、結果を信頼して良いか。

##今後の実験
・次にどういう実験条件を行うべきか。
・機械学習の必要性はあったか。直感と反する条件や、見過ごしていた条件はあるか。
パンくずリスト実装

#[初心者]パンくずリストの実装を行った。
**忘れないためのメモとして、簡単にまとめる。**

まず、どのように実装するといいのか調べた。

その結果、パンくずリストを実装するのに便利なgemが２つあることがわかった。

1. breadcrumbs_on_rails

2. gretel
　　　　　　　　　　　　　　の２つである。

それぞれの特徴として、

- breadcrumbs_on_rails　は、コントローラに記述が必要であり、カスタマイズがしやすい。

- gretel　は、コントローラに記述する必要がないため、シンプル。

今回、初の実装であるためシンプルで、コントローラに記述する必要のない**gretel**を使うことにした。



**今回、行った手順**

1. GEMのインストール
2. 設定ファイルを生成
3. 設定ファイルを編集
4. Viewにパンくずを表示させる記述 

の以上である。

###1.GEMのインストール

Gemfileに以下を記述

```ruby:Gemfile
gem 'gretel'
```

```
$ bundle install
```
###2.設定ファイルの生成
```
$ bundle exec rails generate gretel:install
```
これにより、config/breadcrumbs.rb　が生成された。
###3. 設定ファイルを編集

```ruby:config/breadcrumbs.rb
crumb :任意の名前 do
  link "表示するリンク名", リンク先のパス
  parent :親リンクを指定
end
```

```ruby:config/breadcrumbs.rb
"例"
crumb :root do
  link "メルカリ", root_path
end

crumb :show_user do
  link "マイページ", user_path
  parent :root
end
```
のように記述した。
###4. Viewにパンくずを表示させる記述
```ruby:app/views/layouts/application.html.erb
<%= breadcrumbs pretext: "先頭に挿入する文章を記述、いらない場合は削除する", separator: " &rsaquo; " %>
```
を表示したい場所に記述する。

```
&rsaquo; は、出力されると › になる。
```
そして、表示したいviewファイルに、対応した以下を記述するとパンくずリストが表示される。

```ruby
<% breadcrumb :対応した名前 %>
```

#####追記：パンくずを特定のページのみで表示させたい場合、application.html.erbに記述してしまうとすべてのページで読み込まれてしまうため、表示したいviewファイル内で以下のように記述する。

```ruby
<% breadcrumb :対応した名前 %>
<%= breadcrumbs pretext: "先頭に挿入する文章を記述、いらない場合は削除する", separator: " &rsaquo; " %>
```
*よく使うなら、renderしてあげるとわかりやすいかも(2行目の記述を)*

 **順番が違うと表示されないため、注意が必要**

以上で、終わり
間違えていたらすみません。
何か追加で分かり次第追加していきたい。
Redisを導入メモ(Windows,Docker)

こちらのサイトのDockerとRedisを使う部分で躓いたので、メモとして書きます。
[Djangoとchannelsを使ってチャットアプリを作成する]
(https://luck2515dev.hatenablog.com/entry/2019/04/08/224251)

##Dockerインストール
自分はWindows HomeなのでHyper-Vが動きません、なので代わりに[Docker Toolbox](https://docs.docker.com/toolbox/overview/)を利用しました。

#####ダウンロード方法に関しては下のサイトを参考にしてください。
[ダウンロード方法](https://qiita.com/KIYS/items/8ac37f6757a6b7f84569)

#DockerにRedirをインストール
```docker run -p 6379:6379 -d redis:2.8```をDockerのコマンドラインで実行してください。
そして、```docker ps```を打つとインストールされていることがわかります。

#####Dockerコンテナの作成、起動~停止方法は下のサイトを参考にしてください。
[Dockerコンテナの作成、起動~停止まで](https://qiita.com/kooohei/items/0e788a2ce8c30f9dba53)

#WindowsにRedirをインストールします。
WindowsにRedirをインストールしないとShellでの
`async_to_sync(channel_layer.send)('test_channel',{'type':'hello'})`の後にターミナルに
```Connect call failed('127.0.0.1',6379)```とエラーが出るはずです。

<font color="Red">エラーが出ないようにするために(Redirを使うために)Windowsにインストールします。
このサイトは凄くわかりやすいので参考にしてください！！</font>

[RedisをWindowsにインストールする手順](https://weblabo.oscasierra.net/redis-windows-install/)

#最後に
Windowsにインストールができましたら、```python manage.py shell```で出力したい結果がエラーが出ずに出るはずです。

#参考サイト
[Windows環境にDocker Toolboxをインストールする](https://qiita.com/KIYS/items/8ac37f6757a6b7f84569)
[RedisをWindowsにインストールする手順](https://weblabo.oscasierra.net/redis-windows-install/)
[Dockerコンテナの作成、起動～停止まで](https://qiita.com/kooohei/items/0e788a2ce8c30f9dba53)
ROS2 Dashing Docker通信

# 背景

前回に続きというか、ほぼ同じ内容だが、ROS2 Dashのdocker imageを利用してROS2 docker間でROS2通信(正確にはeProsima FastRTPS DDSI-RTPS通信)が疎通することを確認した。Docker間で特に手順を必要とせずにdocker networkで通信させれば、特定のROS2 node軍(群)を複数のdocker imageに分配してdeployすることができるし、別にcrystal使ってもいいし、Eシリーズを使ってもいいので、ROS2 applicationを開発する側としては嬉しいじゃんという話。

# 手順

1. ros2 dashingのdocker imageをdownloadする。
2. docker runして必要なpackageをインストールする。
3. ros2 demoを実行する。

# 環境

Host Linux: Ubuntu 16.04.6 LTS
Docker version 18.09.7, build 2d0083d
Host環境にはROS2はインストールしていない。(汚したくないから)

# 実際にやってみる

### ros2 dashingのdocker imageのdownload

```
# docker pull ros:dashing
# docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
ros                 dashing             9dadb912c594        6 days ago          837MB
```

これだけでOK!!!


### docker runして必要なpackageのインストール

今回はros_dash dockerからros_dash_2 dockerへtopic送信してみる。
使うのは提供されているdemo_nodes_cpp packageのtalker/listenerを利用する。

[Terminal-1]

```
/// ros_dash docker
# docker run --name ros_dash -v /home/tomoyafujita/docker_ws:/root/docker_ws -it 9dadb912c594

root@23c0445301fd:~# apt update
root@23c0445301fd:~# apt install net-tools iputils-ping ros-dashing-demo-nodes-cpp
```

[Terminal-2]

```
/// ros_dash_2 docker
# docker run --name ros_dash_2 -v /home/tomoyafujita/docker_ws:/root/docker_ws -it 9dadb912c594

root@23c0445301fd:~# apt update
root@23c0445301fd:~# apt install net-tools iputils-ping ros-dashing-demo-nodes-cpp
```

### ros2 run 実行

[Terminal-1]

```
root@b328e1e39a4a:~/docker_ws# ros2 run demo_nodes_cpp talker
[INFO] [talker]: Publishing: 'Hello World: 1'
[INFO] [talker]: Publishing: 'Hello World: 2'
[INFO] [talker]: Publishing: 'Hello World: 3'
[INFO] [talker]: Publishing: 'Hello World: 4'
[INFO] [talker]: Publishing: 'Hello World: 5'
[INFO] [talker]: Publishing: 'Hello World: 6'
[INFO] [talker]: Publishing: 'Hello World: 7'
[INFO] [talker]: Publishing: 'Hello World: 8'
...
```

[Terminal-2]

```
root@23c0445301fd:~# ros2 run demo_nodes_cpp listener
[INFO] [listener]: I heard: [Hello World: 20]
[INFO] [listener]: I heard: [Hello World: 21]
[INFO] [listener]: I heard: [Hello World: 22]
[INFO] [listener]: I heard: [Hello World: 23]
[INFO] [listener]: I heard: [Hello World: 24]
[INFO] [listener]: I heard: [Hello World: 25]
[INFO] [listener]: I heard: [Hello World: 26]
[INFO] [listener]: I heard: [Hello World: 27]
...
```

できました。
おすすめ自作 React hooks集1 (useBooleanState)

# おすすめ自作 React hooks集1

* [おすすめ自作 React hooks集2](https://qiita.com/pikohideaki/items/4238dd17818e58c33799)
* [おすすめ自作 React hooks集3](https://qiita.com/pikohideaki/items/5b87fedb6f1218f07d21)
* [おすすめ自作 React hooks集4](https://qiita.com/pikohideaki/items/4cbc3cf403fd110412ae)

## 公式ドキュメントへのリンク

* [React hooks API](https://ja.reactjs.org/docs/hooks-intro.html)
* [カスタムフックの作成](https://ja.reactjs.org/docs/hooks-custom.html)

## useBooleanState

ダイアログの開閉状態などのbooleanのstateを書くのに、毎回無駄に長い同様の処理を書いていたのでまとめたもの。
超簡単だけどあると便利。

```ts
import { useState, useCallback } from 'react';

export const useBooleanState = (
  init: boolean
): [boolean, () => void, () => void] => {
  const [state, setState] = useState<boolean>(init);

  const setTrue = useCallback(() => {
    setState(true);
  }, []);

  const setFalse = useCallback(() => {
    setState(false);
  }, []);

  return [state, setTrue, setFalse];
}
```

使用例

```tsx
import { Dialog } from "somewhere";

export const MyComponent = () => {
  const [dialogIsOpen, open, close] = useBooleanState(false);

  return (
    <div>
      <Dialog open={dialogIsOpen} onClose={close} />
      <button onClick={open}>Open Dialog!</button>
    </div>
  )
}
```

使用前

```tsx
import { Dialog } from "somewhere";

export const MyComponent = () => {
  const [dialogIsOpen, setDialogIsOpen] = useState<boolean>(false);
  
  const open = useCallback(() => {
    setDialogIsOpen(true);
  }, []);

  const close = useCallback(() => {
    setDialogIsOpen(false);
  }, []);

  return (
    <div>
      <Dialog open={dialogIsOpen} onClose={close} />
      <button onClick={open}>Open Dialog!</button>
    </div>
  )
}
```


---

おすすめ自作 React hooks集は随時追加予定です。
CakePHP2.x で特定のアクションのみAuthコンポーネントから除外する 

CakePHP2.x で Auth コンポーネントで認証している場合、特定のアクションだけ認証が不要な場合があります。例えば、公開 Web APIなどの場合、認証が不要になるかもしれません。
その場合、 AppController.php の beforeFilter で __AuthComponent の allow メソッド__で除外できます。AppController.php だと全てのコントローラーに影響してしまうので、個別のコントローラーで制御したい場合は、beforeFilter をオーバーライドして、同様の書き方で行えます。

[公開するアクションの作成][auth_allow]

```php5
// madokaとhorumaとmamiさんとkyokoのアクションのみ許可。
// その他の書き方もあるので、公式ドキュメントを参照されたし。
$this->Auth->allow('madoka', 'homura', 'mami', 'kyoko');
```

[auth_allow]:https://book.cakephp.org/2.0/ja/core-libraries/components/authentication.html#id24
Kibana で使える Elasticsearh の状態確認のためのリクエストたち

Elasticsearch につないだ Kibana の dev tool で使える便利エンドポイントをここに記録します。直接 Elasticsearch にリクエスト飛ばしても同様のことができるとは思いますが、Kibana の dev tool の記法に沿ったものを紹介します。

Kibana で ElasticSearch にリクエストをここから投げられます。
http://your_host_name:5601/app/kibana#/dev_tools/console?_g=()

index として your_index があって設定されている場合を前提にしています。
設定についてはこちらの記事に書きました => https://qiita.com/yamotuki/items/3c9e19d3c8f40144fbf8

# 環境
Kibana v6.2.3
ElasticSearch v6.7.0 

# 便利エンドポイントたち
### Index が作られているか確認

```
GET /_cat/indices?v
```

### Index の Mapping や Setting などみれる

```
GET /your_index/
```



### search 全件
実質的にIndexの内部全部見るやつ。

```
GET /your_index/_search
{
  "from": 0,
  "size": 10000
}
```

### ワード指定 search 

```
GET /your_index/_search
{
  "query": {
    "query_string": {
        "analyze_wildcard": true,
        "default_operator": "AND", 
        "query": "ここに単語*"
    }
  }
}
```

### Indexの削除

```
DELETE /your_index/
```

### tokenizerがどうやって動いているか確認
analyzer を入れている場合のみ。
以下のクエリで指定する analyzer 名は `GET /your_index/` で取得したsettingsのところで確認できます。

```
POST /your_index/_analyze?pretty
{"analyzer": "my_ja_analyzer", "text": "ここに文章を入れます"
}
```
出力にトークナイズされた結果が出ますので、どういう感じに検索にマッチするか想像できます。

### plugin 入っているかを確認したい

```
GET /_nodes/plugins
```
Arduino IDEでESP32 Cameraのサンプルコードが見つからなかった時のメモ


環境はmacOS 10.14です。 [IoTLTのオープンチャット](https://line.me/ti/g2/vdyV6zMuTDNu6c5I09zpPQ)で解決しました！

結論から言うと昔手動で入れたボードライブラリのゴミが悪さしてた模様です。

## どんな状態だったか

M5CameraをMFT2019で購入したので試そうとしたんですが、Arduino IDEにカメラのサンプルコードが出てこなく、記事を調べると色々な人の画面で普通にサンプルコードが表示されているので何かおかしいなぁという感じの状態でした。

<img src="https://i.gyazo.com/c7ad1bb70eced3ff3d001d9c2776e138.png" width="600px">

## この辺は試した

* [arduino-esp32のボードライブラリ](https://github.com/espressif/arduino-esp32)の最新化
* Arduino IDE再起動

## 解決した手順

* 手順1: `Arduino/libraries/ESP32`を削除
* 手順2: ボードライブラリの削除&再インストール
* 手順3: Arduino IDEの再起動

これで

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/9a6a476c-3cf8-aa71-96a6-5a5df38beaf0.png" width="600px">

## 原因

過去にインストールしたライブラリのゴミが悪さしてた模様です。昔のEPS32のライブラリは手動インストールだったので色々と今と違うみたいですね。

もともと、`Arduino/libraries/ESP32`のパスが認識されていて、このESP32フォルダをまるっと削除することで`/Library/Arduino15/packages/esp32/hardware/esp32/<バージョン>/libraries/ESP32`のパスが認識されてサンプルコードも新しいものが表示されるようになりました。

## IoTLTのオープンチャットで解決！

昨日始まったばかりのLINEオープンチャットに[IoTLT](http://iotlt.connpass.com/)のオープンチャットがあるのですが、そこで質問したらノリッピーさんが答えてくれて解決しました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/bb6df1d4-cbe9-23af-65ec-63d7613bd52b.png" width="600px">


みんなもぜひ入ってみてください！(と宣伝...笑)

* オープンチャット「IoTLT」の招待リンク
	* https://line.me/ti/g2/vdyV6zMuTDNu6c5I09zpPQ
* 初めての人はオープンチャットのアクティベートをしましょう
	* [LINE OpenChatを使ってみたので始め方を解説してみる](https://protoout.studio/posts/line-openchat-intro)