OmniAICreator/Qiita-1.07M huggingface dataset:
git warning: the following paths have collided


### 環境
mac os

### 症状
１． 同じディレクトリに対して２つのコマンドを実行した結果、lsコマンドと、git rm -rコマンドで差異が生じる

```zsh
git rm -r End を入力後タブキーを押す
EndUsers        EnduserDevices  EnduserEvents   Endusers
```

```bash
ls -la|grep End
drwxr-xr-x    - kazukinakamura 15 3 18:00 EnduserDevices
drwxr-xr-x    - kazukinakamura 15 3 18:00 EnduserEvents
drwxr-xr-x    - kazukinakamura 15 3 18:00 EndUsers
```

２． git clone時Warningが発生する
warning: the following paths have collided (e.g. case-sensitive paths
on a case-insensitive filesystem) and only one from the same
colliding group is in the working tree:


### 原因

mac osでは大文字小文字を区別しない

>Which OS are you using? This error is caused by your filesystem not being case sensitive, like the default on Mac OS X.

https://stackoverflow.com/questions/7383426/cloning-a-git-repo-and-it-already-has-a-dirty-working-directory-whaaaaa

### 対策
消したいフォルダを消す

今回消したいディレクトリはEndUsersなので

```bash
git rm -r EndUsers/
```

### 参考
https://qiita.com/inductor/items/6d58afd9f6b741208439
[Android]Firebase Performance Monitoringを導入する

タイトル通りFirebase Performance Monitoringを実装するだけの記事。

## 前提

Firebaseの導入は完了している事。
まだの場合は[Firebaseの導入についての公式の記事](https://firebase.google.com/docs/android/setup?hl=ja)を参照。

## 実装

プロジェクトレベルの`build.gradle`に以下を書き足す。

```gradle
buildscript {
    :
    dependencies {
        :
        classpath 'com.google.firebase:perf-plugin:1.3.1'
    }
}
```

アプリレベルの`build.gradle`に以下を書き足す。

```gradle
:
dependencies {
    :
    implementation 'com.google.firebase:firebase-perf:19.0.5'
}
```

既にprotobufを利用している場合、二重インポートでエラーになるという既知の問題があるので、以下のようにして回避する。

```gradle
:
dependencies {
    :
    implementation ('com.google.firebase:firebase-perf:19.0.5',{
        exclude group: 'com.google.protobuf'
    })
}
```

## 確認

導入したアプリを立ち上げて適当に触ってみる。
しばらくすると、Firebase Performance Monitoringの画面で「検出しました。反映されるまで24時間ほどかかります。お待ちください。」といった表示が出る。
更に丸一日経過すると、画面に数値が反映される。

以上のように、基本的には導入するのみでいい感じに計測してくれるが、[自分でカスタム計測を仕込むこともできる](https://firebase.google.com/docs/perf-mon/get-started-android?hl=ja#add-trace-annotation)。

## 参考

- [Android 向け Performance Monitoring を使ってみる  |  Firebase](https://firebase.google.com/docs/perf-mon/get-started-android?hl=ja)
- [java.lang.RuntimeException: Duplicate class com.google.protobuf.AbstractMessageLite when adding firebase remote config · Issue #1143 · firebase/firebase-android-sdk](https://github.com/firebase/firebase-android-sdk/issues/1143)
【Rails】time_ago_in_words（ヘルパーメソッド）

#time_ago_in_words
Railsのヘルパーメソッドの一つで、投稿機能で「○分前に投稿」等の表示をさせるために使用されます。

##実行例
```rb
  <span class="timestamp">
    Posted <%= time_ago_in_words(micropost.created_at) %> ago.
  </span>
```
このようなコードの場合、投稿時間が5時間前だと`Posted about 5 hours ago.`と表示されます。
argo UIのアクセス方法がv2.5から変更になってた件

## 概要

バージョンをあげてからargo UIを使おうとしたら使えなくなった。

```
$ kubectl -n argo port-forward deployment/argo-ui 8001:8001
Error from server (NotFound): deployments.extensions "argo-ui" not found
```

調べると[argo UIへのローカルアクセス方法がv2.5から変更](https://github.com/argoproj/argo/blob/master/docs/argo-server.md#argo-server)とのこと。


## v2.5未満でのアクセス

```bash

$ kubectl -n argo port-forward deployment/argo-ui 8001:8001
```

http://localhost:8001/ にアクセスすると、ローカルマシンでargo UIが利用できた。


## v2.5以上

```bash

$ argo server -n argo
INFO[0000]                                               authMode=server baseHRef=/ managedNamespace= namespace=argo
WARN[0000] ConfigMap 'workflow-controller-configmap' does not have key 'config' 
INFO[0000] Config Map:                                  
INFO[0000] establishing configmap watch                 
INFO[0000] Argo Server started successfully on address :2746 
INFO[0000] configmap watch established

```

これだけ。ちなみに2746番のポートのみのアクセスになる。

http://localhost:2746/ へアクセスすると、ローカルマシンでargo UIが利用できる。

>v2.5 and after
>It replaces the Argo UI.

とのこと。

もしくは
```
$ kubectl -n argo port-forward deployment/argo-server 2746:2746
```

いずれにせよ http://localhost:2746/ にアクセスする。

<img width="1680" alt="スクリーンショット 2020-03-15 18.08.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164543/ea21a60e-5eea-34c7-cc74-da35137398af.png">

## 参考

Argo Server
https://github.com/argoproj/argo/blob/master/docs/argo-server.md#argo-server
STM32CubeIDEを使ってみよう How To STM32CubeIDE 日本語版 (15) TimerでLチカしよう

STM32CubeIDEを使ってみよう How To STM32CubeIDE 日本語版 (14) PWMでサーボモーター（SERVO)を動かしてみようの続きです。
https://qiita.com/usashirou/items/59410a385ac930e0f5b2

今回は、タイマーを使ってLEDを光らせます。
なんだ、Lチカか
と思われると思いますが、タイマーを使うLチカは割り込みが入っており、意外と面倒です。
今回は、簡単なコマンドがあるのでこれでやってみましょう。

##設定する
まず今回、使うのは、LEDなのでLD2ですね。
これにはTimer2　TIM2がアサインされています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/a373da6b-8717-8ee1-5bdb-0d52e6a6b70e.png)

左側のTimersからTIM2を選択し
ClockSouceをInternalClockにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/df77f6cf-11ab-4bfb-ac49-d142ae05be5b.png)
次は、クロックの設定です。
Clock Configurationをクリックし、最後の周波数を42MHzにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/b3bf0b51-7eb7-a2db-f8f7-dc3f1acf5a08.png)

次は、出力を1Hzにします。
1Hzとすることで1秒間に1回動くこととなります。
４２MHｚを１Hzにするために４２００００００で割る必要があります。
今回は、42000と1000で割ります。
（0が含まれるので-1かな？？）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/fe1e04b5-6c60-5fa4-c602-145756bccc3d.png)
次にNVICを設定します。
NVICは割り込みの機能になります。
GlobalInterruptのチェックを入れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/7c022d2e-cfab-387e-2f7e-59cdd911a94a.png)

これで、1Hz毎に割り込みが入ることになります。
Generationでコードを生成します。

##プログラム
今回は以下を追加します。

```
  HAL_TIM_Base_Start_IT(&htim2);
```
```
/* USER CODE BEGIN 4 */
void  HAL_TIM_PeriodElapsedCallback(TIM_HandleTypeDef *htim){
	HAL_GPIO_TogglePin(LD2_GPIO_Port,LD2_Pin);
}
/* USER CODE END 4 */
```
初めに、タイマーを起動させます
HAL_TIM_Base_Start_ITは割り込みあり
HAL_TIM_Base_Startは割り込みなしです

今回は割り込みありなのでHAL_TIM_Base_Start_ITを選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/d0e64386-9022-2c06-a6be-b59bf8aec7aa.png)
Tim2を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/e4e08bb2-242c-e623-665e-82742f8a10e4.png)

これで割り込み機能付のタイマーが始動しました。
次は、LEDを点滅するプログラムです。
プログラム自身は
HAL_GPIO_TogglePin(LD2_GPIO_Port,LD2_Pin);
ですね。
では、起動させるには？
void  HAL_TIM_PeriodElapsedCallback(TIM_HandleTypeDef *htim)
と入れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/aeb50f02-7687-1d4a-ec3c-17630fa7a08b.png)

これに先ほどのLチカのプログラムを入れればLEDが割り込み毎に点滅するようになります。

あれ？
Mainのプログラムに何も入っていない。
そうです、これは、1秒間に一回1Hz毎に割込みが動くのです。

割込みが入るとHAL_TIM_PeriodElapsedCallbackに飛びます。
ここで、LEDを点滅するプログラムを入れれば動作可能となります。

#####* 参考 [メモ] タイマー割り込みでLチカ (STM32L1-TIM2使用)
https://qiita.com/mt08/items/636a76deb2661392b98e

これを拡張すれば、いろいろな事が出来ますね
STM32CubeIDEを使ってみよう How To STM32CubeIDE 日本語版 (14) PWMでサーボモーター（SERVO)を動かしてみよう

STM32CubeIDEを使ってみよう How To STM32CubeIDE 日本語版 (14) PWMでサーボモーター（SERVO)を動かしてみようの続きです。

今回は、STM32CubeIDEを使ってみよう How To STM32CubeIDE 日本語版 (13) ADCをOLEDへ表示させようを活用して可変抵抗に合わせてサーボモーターを動かしてみます。
(13)のファイルにSTM32CubeIDEを使ってみよう How To STM32CubeIDE 日本語版 (13) PWMでサーボモーター（SERVO)を動かしてみようを見てサーボの設定を加えます。

##配線
STM32CubeIDEを使ってみよう How To STM32CubeIDE 日本語版 (12）にServoの配線を追加したものになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/ffa12e43-7b8b-cce0-7893-58a49e1c5162.png)


##設定
ピン設定です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/4bd2ecf9-1110-d418-aca6-0c3437083417.png)
前回同様内蔵クロックも設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/3b1c569c-98ff-9e9f-5c24-d5a2e9a88d19.png)

##コード追加
PWMのスタートと、サーボの設定をします。

```
HAL_TIM_PWM_Start(&htim3, TIM_CHANNEL_1);
```
サーボは、今回 servovalを用意しました。

```
float servoval;
```


servovalには、可変抵抗の変化に合わせて値を入れていきます。
25～125の間で動いてほしい
可変抵抗は、0~4096です。
今回は、(adcval*0.024)+25としました。
この値は各自で調整してみてください
万が一、サーボモーターが発熱したり、異音を発していたら、コネクタを外してください。
範囲外に移動させようとすると異音や、発熱します。

```
servoval= (adcval*0.024)+25;
__HAL_TIM_SET_COMPARE(&htim3,TIM_CHANNEL_1,servoval);
HAL_Delay(500);
```
追加したコードです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/db64b4e5-6b27-5261-c958-c7a76e6379c7.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/9a42ed22-9b0c-3037-5f55-3f2bd84a57b0.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/2defb001-c1e1-e98f-9a05-7b5f1e0b69e8.png)
以上で、可変抵抗のボリュームに合わせてサーボモーターが動くようになったはずです。
プログラムはこちらで公開しています。
https://github.com/taisirou/STM32-CubeIDE-Full/tree/master
Windows10のDockerでCentOSの遊べる環境を作る

## 概要
WindowsでDockerを使う。
CentOS7イメージを作成し、インストールやコマンドの練習に使えるようにする。
適宜追記していく。

## 検証環境
* Windows10 Home
* Docker : 19.03.1

## Docker系操作
### CentOS7のイメージを取得
```
docker pull centos:7
```

### 起動
```
docker run -it -d --name centos7 centos:7
```

### コンテナ内コマンドの実行
```
docker exec -it centos7 /bin/bash
```

* ユーザ指定で起動
* 
```
docker exec -it --user <ユーザ名> centos7 /bin/bash
```

### イメージの確認
```
docker images
```

### イメージの削除
```
docker rmi <イメージID>
```

### コンテナの確認

* 起動中コンテナのみ

```
docker ps
```

* 起動中コンテナ以外も

```
docker ps -a
```

### コンテナの削除
```
docker rm <コンテナID>
```

* 複数削除

```
docker rm <コンテナID1> <コンテナID2>
```

* コンテナ一括削除

```
docker rm `docker ps -a -q`
```

## Linux系操作
### ユーザの確認
```
cat /etc/passwd
```

### ユーザ追加
```
useradd -m <ユーザ名> 
```

### ユーザパスワード設定
```
passwd <ユーザ名>
```

## 参考
* [dockerでCentOSのイメージを使ってみる - Qiita](https://qiita.com/aky100200/items/e33d073137fd863184cd)
* [Dockerイメージとコンテナの削除方法 - Qiita](https://qiita.com/tifa2chan/items/e9aa408244687a63a0ae)
* [Dockerコンテナの作成、起動〜停止まで - Qiita](https://qiita.com/kooohei/items/0e788a2ce8c30f9dba53)
コマンドラインから文字列の取得

# 初めに
Atcoderの文字列取得の定石を貼ります。

#コマンドラインから複数行一度に取得

```go
package main

import(
   "fmt"
   "bufio"
   "stdin"
)

func main(){
  lines := getStdin()
  for k,v := range lines{
    fmt.Printf("line[%s]=%s\n",k,v)
  }
  
}

func getStdin() []string {
	stdin := bufio.NewScanner(os.Stdin)
	lines := []string{}
	for stdin.Scan() {
		if err := stdin.Err(); err != nil {
			fmt.Fprintln(os.Stderr, err)
		}
		lines = append(lines, stdin.Text())
	}
	return lines
}
```

実行結果

```terminal
$go run sample.go
a b c d e//コマンドライン入力
f g h i j//コマンドライン入力
line[0]="a b c d e"//出力
line[1]="f g h i j"//出力
```


#コマンドラインから得た文字列を空白区切りで返す(string型)

```go
func splitspace(line string) []string {
	words := strings.Split(line, " ")
	return words
}
```

#コマンドラインから得た文字列を空白区切りで返す(int型)

```go
func splitspace(line string) []int {
	buf := strings.Split(line, " ")
	num := stringToInt(buf)
	return t
}

func stringToInt(i []string) []int {
	f := make([]int, len(i))
	for n := range i {
		f[n], _ = strconv.Atoi(i[n])
	}
	return f
}
```
インデックスとは何ぞや　

いまいち理解していないインデックスについて勉強中、、、。
自分なりにまとめてみた。

##インデックスとは
DBのテーブルに大容量のデータがあるとき、高速で目的のデータを取り出すためのもの。
頻繁に検索対象になるカラム（webサービスとかの利用者テーブルならログインIDとか、、）を取り出して、その並び順を格納したもの
SQLのWHERE句とかIN句とか＜、＞を使うときに使用される。
インデックスを使った方が早いとか、使わない方が早いとかは勝手に自動判断してくれるらしい、、。

##メリットもデメリットもある
インデックスは索引みたいなもの！索引があった方が検索は早くなる。とくにデータ量が多い時なら。
しかし、データ量が然程多くないなら、あまりインデックスは効果を発揮しない。
それどころか、UPDATEやINSERT処理はオーバーヘッドが生じてしまう。つまり、インデックスを再作成する処理が+αで走るので逆に時間がかかる。
しかし、大容量のテーブル程UPDATEよりSELECT処理の方が負荷が高いのでインデックスを使った方がいい。

##複合インデックス
複数のカラムをインデックスに用いたもの。
例えばこんな感じに使う↓

ユーザーテーブル(インデックス：ログインID、パスワード)

| ログインID |パスワード|名前|登録日時|更新日|
|:-----|:--------:|-----:|-----:|-----:|
|001a|aaaaa|佐藤|2020/01/01 00:00:00|2020/03/01 00:00:00|
|002b|bbbbb|伊藤|2020/01/02 00:00:00|2020/03/02 00:00:00|
|003c|ccccc|後藤|2020/01/03 00:00:00|2020/03/03 00:00:00|
|004d|ddddd|加藤|2020/01/04 00:00:00|2020/03/04 00:00:00|

こんなテーブルがあったとき、SQL分のWHERE句が　
・WHERE ログインID = ? AND パスワード = ? 
・WHERE　ログインID = ?
ならインデックス使える！でもインデックスの2個目のカラムであるパスワードから始まっていたら使えない。↓
・WHERE パスワード = ? 

##参考
<https://qiita.com/towtow/items/4089dad004b7c25985e3>
<www.hi-ho.ne.jp/tsumiki/doc_1.html>
Xcode11でUIScrollViewのAutoLayoutの制約をかける

# はじめに
UIScrollViewのAutoLayoutの制約をかける場合、かけ方にクセがあり、かつ作業途中でエラーが発生するため、少し手こずるんですよね。
ここではXcode11でUIScrollViewのAutoLayoutの制約をかける方法を記載します。

# チュートリアル

## 環境

- Xcode11
 
## 手順
### 1. ScrollViewを配置
ViewControllerのView上にScrollViewを配置します。
<img width="811" alt="スクリーンショット 2020-03-15 14.39.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598786/eaece054-ca5a-7007-73d7-683a2c572941.png">
### 2. ScrollViewにAutoLayoutの制約をかける
ViewController上のSafeAreaとScrollViewの両方を選択します。
<img width="810" alt="スクリーンショット 2020-03-15 15.12.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598786/cc35a289-11fe-ce4d-d7b8-a9454c07afcb.png">
画面右下の**Alignボタン**を選択し、Top/Bottom/Trailling/Leadingの４辺に制約をかけます。
ここでは0を設定します。
<img width="819" alt="スクリーンショット 2020-03-22 20.36.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598786/9d1af3a9-3e4a-37b8-b740-02709af92c2e.png">
かけた後IB上でエラーが発生しますが、一旦無視して下さい。
<img width="809" alt="スクリーンショット 2020-03-15 14.44.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598786/8792da11-28bb-1d8b-05f1-28413b8664d1.png">
### 3. Viewを配置
ScrollView上にViewを配置します。
ここではScrollViewとの違いを分かりやすくするため、Viewの背景色を赤色に設定しています。
<img width="811" alt="スクリーンショット 2020-03-15 15.00.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598786/6cf0ec22-8495-fa41-d912-862d0a4d2daa.png">
### 4. ViewのAutoLayoutの制約をかける
ScrollViewのContentLayoutGuideとViewの両方を選択し、画面右下の**Alignボタン**から、Top/Bottom/Trailling/Leadingの４辺に制約をかけます。
<img width="816" alt="スクリーンショット 2020-03-22 20.38.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598786/32219f9e-70ee-00b4-e663-d0ebbd4c4575.png">
次にViewを選択しながら右クリックでScrollViewのFrameLayoutGuideへドラッグ&ドロップし、Equal Widthを選択します。
<img width="429" alt="スクリーンショット 2020-03-15 16.16.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598786/5ddbb01e-2488-72b1-375f-9e3bd19adbfb.png">
最後にViewを選択し、画面右下のAdd new constraintsボタンから、Heightに制約をかけます。
ここでは1000を設定します。
<img width="816" alt="スクリーンショット 2020-03-15 16.24.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598786/2b1d3dd5-dd6b-e48f-6133-330d32bc74a0.png">
以上です。
魔法JS☆あれい 第3話「もうsortもreverseも怖くない」

登場人物

丹生（にゅう）あれい
魔法少女「魔法（マジカル）JS（女子小学生）☆あれい」として活動中。

イテレー太
正体不明の魔法生物。

* [第1話「popでpushした、ような……」](https://qiita.com/8amjp/items/e44e707ccc8c95b4a40d)
* [第2話「shiftはとってもunshiftって」](https://qiita.com/8amjp/items/3fc1b2defd28ba1c2df3)

## sort()

イテレー太「あれい、状況説明をサボるけど、今戦闘の真っ最中だよ！」
あれい「ついにサボるとか言い出したなこの駄犬」
イ「そしていつものように、僕が魔法世界から召喚したデータを、あれいの配列魔法を使って、敵の弱点に合わせた値に変換して`return`する事で、ダメージを与えて敵を倒してよ！」
あ「そこだけはセリフが説明的なんだよな」
イ「さて、今回僕が魔法世界から召喚したデータは……これだよ！」

```js
items = [
  { name: '越前おろしそば', price: 650 },
  { name: '海老天おろしそば', price: 1100 },
  { name: 'あげおろしそば', price: 850 },
  { name: 'とろろおろしそば', price: 800 },
];
```

あ「あー、今度は福井の蕎麦屋のメニューか」
イ「そして、今回の敵の弱点は、『要素の`price`の値が低い順に並んだ配列』だよ！」
あ「なんだよその弱点。あと第3話にして急に難度が上がったな」
イ「さあ、あれいの配列魔法で、メニューを安い順に並べ替えて`return`して倒してよ！」
あ「面倒くせえなあ……」

```js
items.sort((a, b) => a.price - b.price); 
```

あ「これでいいのか」
イ「あれい、もうちょっと試行錯誤して盛り上がろうよ」

### 解説

> 配列の要素を_[in place](https://ja.wikipedia.org/wiki/In-place%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0)で_ソートします。このソートは [stable](https://en.wikipedia.org/wiki/Sorting_algorithm#Stability) ではありません(訳注:同じ序列を持つ値の順番が保証されません)。 デフォルトではUnicodeコードポイントの昇順にソートされます。

（[MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)より）

`sort()`メソッドは、その名の通り、配列の要素をルールに基づいて並べ替えます。
引数無しで`sort()`メソッドを実行した場合、配列の要素は値の小さい順（昇順）に並べ替えられますが、具体的には下記の比較関数の戻り値によって順番が判定されます。

```js
items.sort((a, b) => a < b ? -1 : a > b ? 1 : 0); 
```

まず2つの要素（`a`、`b`）を選び、値を比較します。`a`が比較対象の`b`より小さければ順位が上、大きければ順位が下、同じならば同点として判定します。この繰り返しにより、すべての要素が順番に並べ替えられます。
しかし、今回の例のような階層構造の配列の場合、この方法では大小を判定できないため、意図どおりに並べ替えることができません。そういう場合は、比較関数の中で『どの値を比較対象にするか』を明示する必要があります。今回の例では、要素であるオブジェクトの`price`の値を比較しています。

```js
items.sort((a, b) => a.price < b.price ? -1 : a.price > b.price ? 1 : 0); 
```

さらに、比較対象が単純な数値であれば、下記のように簡単に記述することができます。比較の結果、正の数・負の数・0のいずれかが返ればよいからです。

```js
items.sort((a, b) => a.price - b.price); 
```

## reverse()

イ「さて、次の敵が出てきたよ！」
あ「おう」
イ「そして、次の敵の弱点は、なんと『要素の`price`の値が高い順に並んだ配列』だよ！」
あ「ああ」
イ「さあ、あれいの配列魔法で、今度は高い順に並んだメニューを`return`して倒してよ！」
あ「面倒くせえなあ……」

```js
return items.reverse();
```

あ「これでいいのか」
イ「あれい、お願いだからもうちょっとやる気出してよ」

### 解説

> 配列の要素を _[In-place アルゴリズム](https://ja.wikipedia.org/wiki/In-place%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0)_ で反転させます。最初の要素は最後に、最後の要素は最初になります。

（[MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse)より）

`reverse()`メソッドは、配列の要素の順番を反転させるだけの単純なメソッドです。これ以上特に説明することがありません。

## 次回予告

spliceさん、本当に優しいメソッドだったんだ。
配列の要素を取り除いたり、置き換えたり、追加したりする為にどういうメソッドがいるのか、私達に思い知らせる為に、この人は……

[第4話 fillも、spliceも、copyWithinもあるんだよ](https://qiita.com/8amjp/items/0741e35b70ea32711265)
FlaskでContext Processorsを使用する方法

# 概要
テンプレートで共通で使いたい変数や関数を定義するのためには、Context Processorsが便利です。

## 変数編
例えば、今日の日付をテンプレートで表示したい場合は、以下のようなContext Processorを定義しておくと、毎回テンプレートに渡す必要がなくなるので、便利です :smile: 

```python
@app.context_processor
def jst_today():
    from datetime import datetime, timedelta, timezone
    JST = timezone(timedelta(hours=+9), 'JST')
    jst_today = datetime.now(JST).strftime('%Y/%m/%d')
    return dict(jst_today=jst_today)
```

テンプレートでは以下のようにして、今日の日付を表示することができます。

```html
{{ jst_today }}
```


## 関数編
数字に通貨の単位をつけて返す関数は、以下のようにして定義しておくと便利です。

```python
@app.context_processor
def utility_processor():
    def format_price(amount, currency=u'円'):
        return u'{0:.2f}{1}'.format(amount, currency)
    return dict(format_price=format_price)
```
テンプレートでは以下のように呼び出すことができます。

```html
{{ format_price(100) }}
```

## 参考
[1] https://flask.palletsprojects.com/en/1.1.x/templating/#context-processors
[Android]in-app updates APIの検証方法

本記事では表題の通り、in-app updates APIのテスト方法のみ説明する。
テスト方法がよく分からず試行錯誤した結果なので、もっと良い方法があるかも知れない。

実装方法については以下の記事がとても良いので参照されたい。
[Android in-app Updates API 解説と雑感 - Qiita](https://qiita.com/consomme72/items/bcda09cf36e4fc6d31b7)
なお当該記事の`An update has just been downloaded.`はサンプルプログラムのままになっており、うっかりそのまま使っちゃうと「あぁ〜」となるので、いい感じに変更されると良い。

## 手順

### 準備

in-app updates API対応バージョンのapkまたはaabを用意する。
バージョンコード/バージョン名はリリース済みのものより上である必要がある。

### テスターの登録

Playコンソールにログインする。
対象のアプリをクリックする。
リリース管理→アプリのリリースに遷移する。
「内部テスト版」の「管理」をクリックする。
<img width="494" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9104/3232941c-451f-e78e-7119-0eaff20e582a.png">

「テスターの管理」の右側のキャレットをクリックし、展開する。
<img width="483" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9104/25667d0e-c4d9-2c82-3d94-81641da1bdff.jpeg">

「新しいリストを作成」をクリック。
<img width="473" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9104/bd7e1bba-3103-26b8-81ef-863721a05a92.jpeg">

リスト名は任意で問題ない。
メールアドレスにテストしたいユーザーのメールアドレスを入力する。
入力が終わったら「作成」。
<img width="423" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9104/33d234bc-9b1d-a56d-6c7c-107a5a70a830.png">

テストしたいユーザーでログインしたブラウザで、「テスターの管理」セクションにあったオプトインURLを踏む。
すると以下のような画面が表示されるので、「プログラムに参加する」。

<img width="373" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9104/1390de37-3629-3f3e-f046-42e8c502af13.png">

以上でテスターの登録は完了。
反映には1日ほどかかった。

### 1度目のアプリのアップロード

1度目でin-app updates APIを仕込んだバージョンをアップロードし、
2度目でアップデートの挙動を確認するため、少なくとも2度必要。

先程の「内部テスト版」画面に遷移する。
「テスターの管理」で先程作成したリストにチェックが付いている事を確認する。
付いていなかったらチェックする。

右上から「リリースを作成」する。
ここでin-app updatesの処理を含めたapkまたはaabをアップロードする。
このバージョンには念の為にLogCatへのログ出力を含んだバージョンにしておく事をおすすめする。
万が一エラーで死んでいた場合にアップデートが機能しているかの確認がしづらいからだ。
後は通常のリリース手順なので割愛する。

### Playストアからテスターユーザーでダウンロード

テスターユーザーでログインした状態で、Playストアで反映されるのを待つ。
反映されたらアップデートする。
アプリを立ち上げるかはアプリによって任意に実施すると良い。
一度テスターの状態が反映されると、次のアップデートからは即時に反映される。

### Playストアの自動更新をOFFにする

アップデートし終わったら、アプリ内アップデートをテストするために自動更新をOFFにしておく。
Playストアのアプリ詳細ページから右上のハンバーガーメニュー「…」をタップし、「自動更新の有効化」のチェックをはずす。
<img width="273" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9104/8c12f91c-7cb5-a025-7115-63968e246027.jpeg">

### 2度目のアプリのアップロード

バージョン番号だけ上げたバージョンでも良いので、新しいapkまたaabを準備し、[1度目のアプリのアップロード](#1度目のアプリのアップロード)の手順と同様の手順で内部テスト版として公開する。
この時点ではログ出力は削除しておいても良いかも知れないが、状況によって判断する。

### Playストアでアップデートがある事を確認

テスターユーザーでPlayストアでアップデートが公開されている事を確認する。
おそらく即座に反映されているはずだ。
**Playストアでアップデートはしない** 。

### in-app updatesが発動するかのテスト

1つ前のバージョンのアプリを何度か開いて、アップデートが来ていないか確認する。
in-app updatesは記事執筆時点ではPlayストアとそれなりのタイムラグがあるので、3時間ほど待つ事もある。
アップデートが届いている場合、Flexibleバージョンを実装している場合は以下のようなダイアログが表示される。
<img width="273" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9104/e2340f91-7a3d-a2a7-2f54-3e8aef8398e5.png">

動作確認が取れれば、内部テストから昇格して本番公開するなどする。
動作確認がNGであれば、[2度目のアプリのアップロード](#2度目のアプリのアップロード)を繰り返す。

### 事後処理

テストが完了したら、Playストアの自動更新をONにする。

## 所感

残念ながら今のところ非常に手間がかかる。
もうちょっとなんとかならないか。
Torexコイル一体型昇圧DC/DCコンバータ　XCL102

ボタン電池でLED付きのBluetoothデバイスを動かそうとするとどうしてもボタン電池の内部抵抗が高いことと、出力が弱いために、LEDを点灯させることができません。
そんな時に、使うのが昇圧DCDCコンバーターです。

ただし、安易に使えるものではないのは、インダクター（コイル）が必要になるからです。
コイルなんて、普通に使えるんじゃ？
と思われますが、意外と、相性や制約があるために、きちんと選定をしないと動かないというケースがかなりあります。
そんな中で今回は、Torex社の昇圧コンバーターXCL102を紹介します。

##Torexとは？
Torex社は１９９２年か１９９５年に設立された日本の会社です。
https://www.torex.co.jp/company/
日本に本社があり、連絡すると、FAEが出てきてくれます。（私は半年音沙汰なかったので特別かな？？）
##コイル一体型昇圧DC/DCコンバータ XCL102
https://www.torex.co.jp/products/built-in-dcdc-converters/series/?name=xcl102

##使用方法
今回紹介するXCL102は、コイルをDCDCコンバーターの上に載せたもので
コイル自身は、市販されているものを削って載せているとのことで、使用に際して、若干問題があります。

何が問題かというと、コイルとDCDCコンバーターをつなぐ配線がうまくいかないのです。
https://www.torex.co.jp/products/built-in-dcdc-converters/series/?name=xcl102
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/884cdc9c-bc7f-fede-db46-6c5560921420.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/b4ea17df-2fe5-618f-c338-30a01a736e9f.png)

LXとL2を最短でつなぐと、アンテナになるとのことで、推奨レイアウトにならないのです。
結果として、GNDをつなぎ、LXとL2は、基板間を行き来することとなります。

##モジュール
そんなことを考えなくても、使える基板が売っています。
秋月電子通商
３．３Ｖ出力昇圧ＤＣＤＣコンバーター
AE-XCL102D333CR-G]
http://akizukidenshi.com/catalog/g/gK-13066/
５Ｖ出力昇圧ＤＣＤＣコンバーター
AE-XCL102D503CR-G
http://akizukidenshi.com/catalog/g/gK-13065/

この製品のいいところは、3.3V,5V以外にも各種そろっているところです。
今回使用にあたり、LEDに対する電圧と電流から４V出力といったものも同じ回路で使用可能です。
当然、コイルが必要ありませんから、そのまま転用可能です。
細かいバリエーションがあることは設計において融通が利いて非常にいいといえます。

ちなみに、今回は、テストにおいて、秋月電子の3.3V,5V、そして、Torex社からサンプルで４V品を試すことができました。
![DSC_0285 (2).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/e86929d9-240d-174c-9384-7c2c2b3b4dfe.jpeg)
本当は、この石以外も試したかったのですが
例えばXCL219（1.0A コイル一体型降圧DC/DCコンバータ）とか・・・
https://www.torex.co.jp/products/built-in-dcdc-converters/series/?name=xcl219

ちなみに、DigiKey等でチップ1個を買うより秋月でモジュールを買うほうが安いというのは笑えない現実です
Pulse Secure


# 概要
Pulse Secureがログイン時に起動してしまうと困る場面が多かったので、自分用にメモです。

# 手順

### LaunchAgentsからpulseSecureを削除
```shell
$ sudo rm /Library/LaunchAgents/net.pulsesecure.pulsetray.plist
```

## 起動時
```
$ open /Applications/Pulse\ Secure.app/Contents/Plugins/JamUI/PulseTray.app
```

メニューバー用のプラグインを直接呼べばOKです

# ちなみに
筆者はAutomatorを使って、起動時のシェルをアプリケーション化して使っています。
WSL上でRobosenseを動かす


## WSL上にROSを導入

WSL(Windows Subsystem for Linux)上にROSを入れることをすでに試みた方がいらっしゃるので、
下記を参照し、ROSのインストールまでを済ませる。
[WSL(Windows Subsystem for Linux)でROSを動かす](https://naonaorange.hatenablog.com/entry/2018/11/05/200715)

XサーバーはXming前提なので、windows上からインストールする。

##Robosense ドライバのインストール

下記ネイティブのubuntuと同様にRobosenseを導入
[ROS kinetic上でRobosenseを動かす](https://qiita.com/takapen_jp/private/288046ef87e3a5d3e2d9)

Robosense接続用NICのIPアドレスは、Windows上から設定すればOK
Xming上にrvizが起動し点描が開始する。

<img width="611" alt="wsl_robosense.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599011/dedffcc0-640e-6fec-5bf0-b87bf8bb0a01.jpeg">
JIRAの使い方

# JIRAとは
JIRAとはAtlassian社が開発した企業向けのソフトウェアであり、チームでソフトウェア開発を行う際の課題&プロジェクト管理ツールです。チームの誰が何の開発プロジェクトの何の課題をいくつ担当しているか、今開発にどのくらいの未解決の課題があるかなどが可視化できます。そのため、膨大なメールを捌いたり、エクセルに情報を手動でまとめて管理することと比較し、JIRAはプロジェクトの進捗管理を効率化してくれるツールです。

ソフトウェアの種類としては自分のサーバにデプロイする版とクラウド版があります。また、無料トライアルはありますが、基本的には月額$10~の有料です（2020年3月現在）。最悪、個人でも利用できる値段ではあり、ソフトウェアかいはでなくてもタスク管理などに利用できるのではないかと思います。

公式ホームページは以下のURLから行けます。
[https://www.atlassian.com/ja/software/jira](https://www.atlassian.com/ja/software/jira)

# JIRAの使い方
クラウド版のJIRAを使い、機能を簡単に示したいと思います。

ソフトウェア開発はプロジェクトごとに管理できます。下の画像のように`プロジェクト`タブから`Create project`を押すと、新しいプロジェクトが作成できます。ここでは、`プライベートな作業`というプロジェクトを作成してみました。

![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602996/36646fa5-94d2-1b31-fad0-6738afeb1113.png)

プロジェクトの中では課題を作ることができます。課題とはその開発プロジェクトの中で取り組むべき作業のことです。下の例では`プライベートな作業`というプロジェクトの中に、`Qiitaを書く`という課題を作成しました。

![キャプチャ3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602996/c99cef09-a56d-f7c6-1258-a876fc54ef1a.png)

`課題タイプ`としては、以下の選択肢があります。

![キャプチャ1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602996/0669e2a2-02d2-f1de-163b-abd5ea34333d.png)

`ステータス`としては、以下の状態があります。

![キャプチャ2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602996/77f5ecce-9c45-c734-7b2c-82603f7f90ec.png)

課題を2つ作ってみた状態が下の図です。課題はチケットとも呼ばれ、チケットが二つ並んでるようにも見えます。

![キャプチャ4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602996/9a4a3684-79e4-5959-0ec5-8ccbe315264e.png)

また、現在の課題の数や、誰がどのぐらいの課題を抱えているかなどが把握できるようなダッシュボードを作ることができます。タブから`詳細`→`ダッシュボード`→`ダッシュボード`の作成を選び、必要な欄を記入すると下の図のような画面になります。

![キャプチャ5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602996/104e98f0-2636-48dc-1f49-19713695f935.png)

この画面において`新しいガジェットを追加`を押すと、下のようなグラフの選択画面が出ますので、好きなグラフを選択していきます。

![キャプチャ6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602996/fa21559c-9466-3753-a49e-ddd1b2ab2b15.png)

すると下の図のようにグラフが生成されます。左下の図では、現在解決していない課題が2件あるというのが一目瞭然で分かります。また、右の円グラフでいうと、今のところ担当者が一人しかいないので100%が私のタスクになっていますが、複数人いれば誰にタスクが集中しているかなどが一目瞭然になります。

![キャプチャ7.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602996/86912e7d-86c6-daad-16c6-f23ad004bd47.png)

また、JIRAは追加のソフトウェアを入れることで、ソフトウェア開発レビューツールであるGerritとも連携することができます。課題にGerritへのレビュー提出を紐づけることができ、課題から提出したレビューへ飛ぶことができるリンクが生成されます。紐づけは、課題の管理番号をレビュー提出時のコミットのメッセージに記入することで可能です。課題の管理番号とは例えば、`Qiitaを書く`という課題では、上の図にあるように`BAPZ-1`という番号です。JIRAだけでは一般的な課題&プロジェクト管理ツールですが、Gerritと連携できることでソフトウェアのアジャイル開発に非常に適したツールになります。

以上です。
Python scikit-learnで実施した決定木の結果を可視化する

PCを新しくして、決定木を初めてやろうとしたら、可視化する環境にする方法を忘れていて少し時間がかかってしまいました。ここに、自分用の備忘メモの意味を込めて記載します。

[graphvizの公式ページ](http://www.graphviz.org/)
ここからDownloadのページに行き、以下のstable版をダウンロードする。
<img width="539" alt="Graphviz_install.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225870/cf386e66-2ae0-b7fe-fd14-014cc4089871.png">

.msiファイルをダウンロードします。
ダウンロードしたこのmsiファイルをダブルクリックしてインストールします。
<img width="388" alt="Graphviz_wizard.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225870/a8276c6c-0920-d537-20a3-358585b9fcaf.png">



コマンドプロンプト

```
pip install graphviz
pip install pydotplus
```
<img width="734" alt="pip_install.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225870/16573430-3606-ae28-29a2-8777d63c688e.png">


そして、「dot.ext」ファイルがあるディレクトリをPathに追加する。
システムの詳細設定を開いて、環境変数をクリックします。
<img width="521" alt="システムの詳細設定.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225870/ca06aebb-c08a-6540-8798-aade5b8efe7c.png">

そしてPathに「dot.ext」があるディレクトリを追加します。私の場合は
C:\Users\ユーザー名\Anaconda3\envs\仮想環境名\Library\bin\graphviz
でした。
<img width="576" alt="path.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225870/46fd67b3-651c-c8b7-09f8-54d1e635bed0.png">

これで可視化できるようになりました！
![Treeできあがり.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225870/20d76e69-df4f-b1ce-47c7-5d45ee06443f.png)
AWS IAMユーザーとは


# はじめに

個人的に、AWSの使用で「難しい」と思うのは、独自の用語や日本人には馴染みのない用語が頻繁に出てくることです。

今回はAWSのアカウントとIAMユーザーについて簡単にまとめたいと思います。


# ルートユーザー

IAMユーザについて理解するためには、まずルートユーザーについて知っておく必要があります。

AWSに登録するときは、他のwebサービスと同様に`メールアドレス`と`パスワード`を使用します。

`メールアドレス`と`パスワード`でコンソール画面にアクセスしている状態が、ルートユーザーです。

ルートユーザーは、全ての情報や権限にアクセスすることができます。



## 他要素認証

このままでは、`メールアドレス`と`パスワード`が流出した際に全ての権限も一緒に流出してしまいます。
そこで、AWSでは他要素認証の設定ができます。

`MFAデバイス`の設定を行うことで、認証コードを使用することができるようになります。

この設定を行うことで、次回ログインの際は`メールアドレス`と`パスワード`と`MFA認証コード`の3つが必要になります。


# IAMユーザー

しかしながら、相変わらずルートユーザーは全ての権限にアクセスできることに代わりはありません。

IAMユーザーは、権限を限定したユーザーのことです。

AWSの機能と権限は多岐にわたるので、アクセス権限が限定されたユーザー設定があると、チームで使用する時なども便利なのです。




基本的には、IAMユーザーでAWSを使用をすることが推奨されています。


# まとめ

- ルートユーザー：全ての権限にアクセスできる（できてしまう）ユーザー

- IAMユーザー：必要な権限にのみアクセスできる仮想ユーザー
Rails Turbolinksをページ毎に無効化する方法

# Turbolinksをページ毎に無効化する技を学ぶ

そもそもTurobolinksとは？

Turbolinksはリンクを生成する要素であるa要素のクリックをフックにして、
移動した先のページをAjaxで取得します。

その後、取得ページのデータが遷移前のページと同じものがあれば再利用し、
title・body要素を置き換えて表示します。
データを再利用するので、アプリケーションの速度向上などのパフォーマンスの向上を
させることができます。

<a href="https://github.com/turbolinks"><img src="https://avatars1.githubusercontent.com/u/16996872?s=200&v=4" height="100px;" /></a>公式ページ




## しかし　jqueryと競合することが多く、ページによってはオフにしたい！

考えられる方法は次の3通り

1,Turbolinksを全削除する

2,gem  jquery-turbolinksを使用する（Rails４）または素直にturbolinksで記述する

3,Turbolinksを部分的にオフにする

# 1,全削除

#とりあえず全部消す（あんまオススメではありません)
*turbolinksは付き合い方によってはとってもイイ奴です。

gemファイルからturbolinksの項目を削除

```ruby:Gemfile
# Use jquery as the JavaScript library 

 gem 'jquery-rails' 
 # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks 
 gem 'turbolinks', '~> 5' ←　ここをコメントアウト
 # gem 'turbolinks', '~> 5' 
 # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder 
 gem 'jbuilder', '~> 2.5' 
# Use Redis adapter to run Action Cable in production 
```
application.js

```rails:app/assets/javascripts/application.js
//= require jquery 

//= require jquery_ujs 
//= require turbolinks ←　ここを削除
//= require owl.carousel 

//= require_tree . 
```
layoutのapplication.html.haml

```rails:app/views/layouts/application.html.haml 
= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'

 'data-turbolinks-track': 'reload'の記述を削除
```
turbolinksの記述をとにかく削除すればOK

## 2,turbolinksで素直に記述する（まずはここで向き合うべき)


javascript

```javascript:app/assets/javascripts/script.js
//初回読み込み、リロード、ページ切り替えで動く。
$(document).on('turbolinks:load', function() { });

//初回読み込み、ページ切り替えで動く。リロードは動かない
$(document).on('turbolinks:render', function() {　});

//ページ遷移前に行いたい処理用。ページ切り替えでもリロードでも動かない
$(document).on('turbolinks:request-start', function() {　});avascripts/script.js


```
coffeeの場合

```javascript:app/assets/javascripts/script.js
//初回読み込み、リロード、ページ切り替えで動く。
$(document).on 'turbolinks:load', -> 

//初回読み込み、ページ切り替えで動く。リロードは動かない
$(document).on 'turbolinks:render', -> 

//ページ遷移前に行いたい処理用。ページ切り替えでもリロードでも動かない
$(document).on 'turbolinks:request-start', ->
```
Rails5以上であれば　とりあえず'turbolinks:load'としておく。gem jquery-turbolinksの読み込みも必要なし！

## 3,部分的にオフにする（ページ毎)
views/layouts/application.html.hamlの%bodyタグ内の記述を変更する

```haml:app/views/layouts/application.html.haml
%body
- if content_for?(:body_attributes)
  = yield(:body_attributes)

```
turbolinksをオフにしたいビューページに以下を追記する

```haml:
- content_for(:body_attributes) do
 data-turbolinks="false"

```

リンク先をturbolinksオフにしたい場合

%div{"data-turbolinks" => "false"}でリンクタグを囲う

```haml:
%div{"data-turbolinks" => "false"}
  = link_to "Home", root_path

```
またはlink_toの属性に追加する

```haml:

=link_to new_user_registration_path, class: "btn-def--mail","data-turbolinks": false do
```

オススメは２番でゴリゴリ記述していきたいところですがうまく行かない場合、３番ですかね〜

では今回はこのくらいで。
ReactのHooksの使い方① -useState-

# 初心者のためのReact Hooks

なるたけ分かりやすく解説してみます。

## 話す内容

以下の流れで、話していきます。
1：Hooksとは？
2：簡単な使い方(useState)
3：API連携する際の使い方(Reactのフックの使い方②で解説します。)

3までいけば、実用的な使い方を少し習得できるかと思います。

## そもそもHooksとは？

Hooksの導入は、React16.8以降からの機能です。**stateなどの機能をクラス型ではなく、関数型で書けるようになった**というのが特徴です。今まで、componentDidMount, componentDidUpdate, componentWillUnmountと書いてライフサイクルメソッドを回していましたが、フック使うことでより簡潔に書けることが出来ます。

使う際は、
> import React, { useState } from 'react';

などと書いて使うことがほとんどです。

Hooksの種類は、カスタムフック（自分で作るオリジナルのフックのこと）をのぞいて、10種類あります。全て、必ずuseXXXから始まります。カスタムフックもuseXXXとするのが一般的です。

基本のHooks
**・useState**
**・useEffect**
**・useContext**

追加のHooks
・useReducer
・useCallback
・useMemo
・useRef
・useImperativeHandle
・useLayoutEffect
・useDebugValue

その中でも、基本のHooksが上3つ**(useState, useEffect, useContext)**なので、これを最初に使えるようにしましょう。**今回の記事ではそのうちの1つ、useStateに絞って解説**していきます。

## 簡単な使い方
説明だけ見てても、意味ないので早速使っていきましょう。
codesandboxを使用することとします。

https://codesandbox.io/s/wizardly-borg-jt7j4

リンクには、React環境とuseStateを使用する準備がされているので、追加でコードを書けば即時にHooksが使えます。

それでは、上のリンクを元に、Hooksの説明に入っていきます。

### useStateの導入
１行目からですが、{ useState }となっていますよね。そもそも、useXXX系は、React側で宣言されている関数です。そのため、その関数を使うことを表記するために{useXXX}と明記して導入する必要があります。

### 押すとカウントが増えるボタンを作る
今回作るのはカウント型ボタンの作成です。ベースはこんな状態。

```
import React,{useState} from "react";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
    </div>
  );
}
```
次に、**useStateに現在の state の値と、それを更新するための関数とをペアにして返していきます。**



```
export default function App() {
  // state = count, setCountがcountを更新するための関数。
  const [count, setCount] = useState(0);
  return (
    <div className="App">
    </div>
  );
}
```

ここでは、state変数を宣言しています。第一引数のcountは、状態を保持してくれるものです。第二引数のsetCountは、countを更新してくれるための関数です。
useState(0)の0は、stateの初期値です。

次に、関数(setCount)の部分を作っていきます。

```
export default function App() {
  const [count, setCount] = useState(0);
  return (
    <div className="App">
      // 下の部分が新たに追加。
      <p>You clicked {count} times</p>
      <button onClick={()=>setCount(count + 1)}>click me</button>
    </div>
  );
}

```

**{count}**の部分は、毎回button内にあるonClickメソッドが押されるたびに１ずつ増えていきます。buttonが押されると表示が変わる部分は、この {count} 部分です。

> onClick={( )=>setCount(count + 1)}

今回、useState関数は
> const [count, setCount] = useState(0);

と、**初期値を0としているため、0 + 1となり２が返されます。**これがもし
> const [count, setCount] = useState(5);

初期値が5となっていれば、5 + 1なので、{count}は6になります。

完成したのは以下になります。ちょっと手を加えています。というのも、button自体にロジックを持たせるのはよくない為、buttonには関数を呼ぶことだけをしています。(handleClickの部分)
https://codesandbox.io/s/infallible-chatterjee-lb91e

## まとめ
ReactのuseStateについて説明してみました。
次回は、Reactのフックの使い方②で、簡単なAPI実装を含めたフックの使い方を解説したいと思います。
Makrdownの表内フォントサイズを変更する方法

Markdownで、表内のフォントサイズを変更する方法を調べたので備忘録として。

```
<style>
table, th, td {
    font-size: 50%;
}
</style>
```

とかMarkdownファイル内に書いておけばフォントサイズは変わるのであるが、
これだけだと、Markdown内の全部の表に適用されてしまう。
個別適用したいこともあるかもしれないので、その場合は子要素セレクタを使って以下のようにする。

```
<style>
.smalltable > table, .smalltable > th, .smalltable > td {
    font-size: 50%;
}
</style>
```

上記は、`smalltable` というクラスの子要素になっている `table` ではフォントサイズを `50%` にするっていう意味。

試しに以下のように記述する

```
Tableのフォントサイズ変更のサンプル

<style>
.smalltable > table, .smalltable > th, .smalltable > td {
   font-size: 50%;
}
</style>

<div class="smalltable"> 

表1
|  TH  |  TH  |
| ---- | ---- |
|  TD  |  TD  |
|  TD  |  TD  |

</div>

表2
|  TH  |  TH  |
| ---- | ---- |
|  TD  |  TD  |
|  TD  |  TD  |
```

[Tableのフォントサイズ変更のサンプル](https://github.com/nobutnk/sample/blob/master/table.md)

VSCodeのプレビューでは反映されたけど、Qiita, Githubだと効いてない...

一応VSCodeでのキャプチャ
![markdownで表のフォントサイズ変更.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230309/0ca2f680-3894-4b2b-8be2-201850b04f00.png)
jsonファイルからディレクトリを生成するスクリプト

## はじめに
以下のようなjsonファイルがあったとします。

```json:sample.json

{
    "data": [
        {
            "no": "1",
            "date": "2020-01-28T00:00",
            "place": "japan",
            "age": "22",
            "sex": "female"
        },
        {
            "no": "2",
            "date": "2020-02-14T00:00",
            "place": "australia",
            "age": "50",
            "sex": "male"
        }
    ],
    "last_update": "2020-03-14T23:14:01.849130+09:00"
}
```

このファイルから以下のようなディレクトリを生成するスクリプトです。

<img width="812" alt="スクリーンショット 2020-03-15 16.42.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/a25eef2c-986f-b8b6-e8f0-985567579d98.png">

keyとlistのindexで階層分けという事です。

## json2dir
https://github.com/Kanahiro/json2dir

jsonファイルを再帰的に解析して、生成すべきdirectoryリストを返します。

```python:sample.py
import json2dir

jsondict = {
#jsondictは前述のsample.jsonをdict型として読み込む
}

root_dir = 'api/sample'
os.makedirs(root_dir, exist_ok=True) #api/sampleというディレクトリを生成

#本スクリプトによりディレクトリ一覧を生成
dirs = json2dir.dir_list_of(jsondict, root_dir)
'''
dir = ['api/sample/data', 'api/sample/data/0', 'api/sample/data/0/no', 'api/sample/data/0/date', 
'api/sample/data/0/place', 'api/sample/data/0/age', 'api/sample/data/0/sex', 'api/sample/data/1', 
'api/sample/data/1/no', 'api/sample/data/1/date', 'api/sample/data/1/place', 'api/sample/data/1/age', 
'api/sample/data/1/sex', 'api/sample/last_update']
'''

#api/sample以下に、dirに基づきディレクトリを生成
for d in dirs:
    os.makedirs(d, exist_ok=True)
```

以上でディレクトリが生成されます。

## 終わりに
ちなみにpipでjson-to-dirというパッケージが配布されていますが、（たぶん）Python2.x系で書かれててちゃんと動きませんでした（ので作りました）。
必要性がありそうならpipパッケージにしたいなって思っていますが、自分の必要性は満たせたのでとりあえず後回しにしています。
初心者から始めるJava、インスタンス

#はじめに
この記事は備忘録である。
参考書レベルの内容だが、本記事に掲載するコードについては、
~~**間違えた**ものが中心となる。これは実際にコーディング中に間違えた部分を掲載し、自分で反省するために投稿するという目的によるもの。~~
また、後日にJavaSilver試験問題の勉強を兼ねて復習するため、深い部分の話はここでは触れない。

##環境
言語：Java11、JDK13.0.2
動作環境：Windows10

#インスタンス
以前、オブジェクトとインスタンスを混同して話していたように記憶しているが、改めて触れてみたい。
まずはいつもの通り`Cat`クラスを用意する。

```Java:Cat.java
class Cat
{
  public static int sumCats = 0;

  private int age;
  private double weight;

  public Cat()
  {
    age = 0;
    weight = 0.0;
    sumCats++;
    System.out.println("新しい猫ちゃんがやってきましたよ！");
  }

  public void setCat(int a,double w)
  {
    age = a;
    weight = w;

    System.out.println("この猫、年齢は" + age + "歳、体重は" + weight + "kgです。");
  }

  public static void showSumCats()
  {
    System.out.println("今は全部で" + sumCats + "匹の猫がいます。");
  }
}
```
この`Cat`クラスを使って2匹の猫を用意した場合を考える。

・**2匹の猫**は、同じ`Cat`クラス由来である別々の**オブジェクト**である。
・2匹の猫は、それぞれの`age,weight`フィールドを有している。

以上のとき、2匹の猫はそれぞれのオブジェクトに関連付けられたフィールドである**インスタンス変数(instance variable)**と、オブジェクトに関連付けられたメソッドである**インスタンスメソッド(instance method)**を有する。
これらインスタンスな変数とメソッドは「オブジェクトが生成(`new`)されてからアクセス可能になる」。

今まで持っていた誤解
・オブジェクト≒インスタンス

　⇒オブジェクト毎のフィールド・メソッド　＝　インスタンス変数・メソッド　*new!!*
##クラス変数・クラスメソッド
しかし、オブジェクトが生成されるより前に扱いたいメンバ（フィールド・メソッド）もある。そのために、**クラスそのものと関連付け**がなされたメンバを`static`で宣言して使うことが出来る。

`public static void showSumCats()`は、
`public static int sumCats = 0;`と宣言された**クラス変数`sumCats`**を参照し、`new`するたびに**コンストラクタCat()**が呼び出され、自動でインクリメントされるようになっている。これにより、「何回Catオブジェクトを生成したか」と「猫の総数」をリンクさせている。
`showSumCats()`は、`static`であるため、「一度もCatオブジェクトを生成していな」くても呼び出すことが出来るメソッドである。よって「猫0匹」を示すこともできる。

##this.ってなんだろう
**インスタンスメソッド内でのみ**、`this.age`や`this.weight`と書いて、オブジェクトに関連付けられたフィールド値のみを示すように書くことが出来る。
ローカル変数の話は割愛。

#終わりに
これからmain関数内で扱おうとしている変数・メソッドがクラス関連かオブジェクト関連か、`static`で判別してよく理解していないと、ここを突かれる問題はかなり多い。

#参考
出来るだけ自分で変数や式を書いてコンパイルしているので、完全に引用する場合はその旨記述する。

[やさしいJava 第7版](http://mana.on.coocan.jp/yasaj.html)
[Java SE11 Silver 問題集](https://book.impress.co.jp/books/1118101186)（通称黒本）
VSCodeのコードスニペットが便利だった

# 概要
[前回](https://qiita.com/aky100200/items/f18a549b1a0b8686e0c0) 、C++の環境を構築したが、構文が覚えられず、競技プログラミングをやるときには毎回テンプレートをコピペしていた。
調べたらVSCodeにはコードスニペットを登録する機能があったので、今回はこれを使ってテンプレートを登録する。

## 手順
1. 「ファイル」→「基本設定」→「ユーザースニペット」を選択。
2. 言語を選ぶ。
  言語毎に設定ファイルが作成される。
例：C++ → cpp.json

3. ファイルが開いたら以下を追記して保存する。

```json:cpp.json
	"Print to console": {
		"prefix": "main",
		"body": [
			"#include <bits/stdc++.h>",
			"using namespace std;",
			"",
			"int main() {",
			"  int n,m;",
			"  cin >> n >> m;",
			"  ",
			"  int r = 0;",
			"  cout << r << endl;",
			"}",
		],
		"description": "Main Template"
	}
```

4. 設定ができていると「.cpp」のファイル編集中に「main」 と打つと上のスニペットを呼び出せるようになる。

## 参考
* [独自のスニペットを作成 | 非公式 - Visual Studio Code Docs](https://vscode-doc-jp.github.io/docs/userguide/userdefinedsnippets.html)
最強のPySpark用Docker作った

# はじめに
PySparkの勉強始めよう！っておもったら結構めんどくさいですよね。

- 正しいJava Versionのインストール（Java8じゃないとだめとか）
- pythonの設定（Python3?2?3.5以上じゃないとだめ？？）
- Jupyter notebookで快適に勉強したい
- 当然bigdataに挑戦したくなったらS3やAzureStorageでデータの読み書きしたい。
- ちゃんとした環境変数の設定。(JAVA_HOME? SPARK_HOME? なにそれ？）

全部、まるっとDokcerイメージにしました。

# イメージの内容物

baseimage: phusion/baseimage:0.11 (ubuntu 18.04ベース)
openjdk-8-jre
hadoop 3.2.1
spark 2.4.5
Anaconda3-2019.10-Linux-x86_64(python3.7.4)
Jupyter notebook
pixiedust 1.1.18

# 実行方法

まずはローカルで作業用ディレクトリを作成

```shell

mkdir sparkstudy
cd sparkstudy
docker run -v `pwd`:/work -p8888:8888 -it --rm neppysan/pyspark
```
すると、以下の表示が出ます。最後の行の`https://127.0.0.1...`をコピペしてブラウザに貼る。

```shell

To access the notebook, open this file in a browser:
            file:///root/.local/share/jupyter/runtime/nbserver-6-open.html
    Or copy and paste one of these URLs:
            http://2457d17b9863:8888/?token=7a466b3b8d558c34ea7b62ef3b6da95ed83a403d0a210847
     or http://127.0.0.1:8888/?token=7a466b3b8d558c34ea7b62ef3b6da95ed83a403d0a210847
```

するとJupyter Notebook ができるので、`work`をクリックすると、自分のディレクトリに移動できる。
イメージが5Gぐらいあるので、最初のダウンロードはすこし時間がかかる。

# Jupyter Notebook

S3やAzureStorageの接続方法のサンプルを書いた。
sample.ipynbを同梱したからみてみて。

# 参考


git にいろいろ詳しく書いた。
https://github.com/ShumpeiWatanabe/pyspark/blob/master/Dockerfile
ブラウザアプリ作り(1)　とりあえず動く状態にする→iOSアプデで不要に...

Youtubeなどの動画を観ながら別の作業をしたい。
よくある場面としては実況動画を見ながら関連する情報を検索する、というのがあります。あるいはTwitterのTLを見ながらYoutubeの動画音楽を再生したいということもありますよね(YoutubeMusicに課金するのはなんか悔しい)。そこで、これらのニーズに応えられるブラウザアプリを作っていきたいと思います。

今回進んだのは以下です。
・WKWebViewを使った2画面ブラウザ
・セーフエリアの設定
・動画のブラウザ内再生


まず、ブラウザの実装です。
以下のサイトを参考にさせていただきました。
[SwiftUIでWebViewを使う](https://qiita.com/wiii_na/items/36123cf901839a8038e2)

コードは上Qiita記事の円コピなので省略します。WebView.swiftを新しく作成して、ContentView.swiftでWebView(loadUrl:<URL>)で呼び出すんですね。非常にわかりやすいです。
<img width="1000" alt="スクリーンショット" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158553/9b4e5e06-cbf7-0e7e-566f-7ee707a4ee55.png">

次に、画面を分割してみます。
VStackでビューを2つ並べてみます。
<img width="1000" alt="スクリーンショット" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158553/a4577876-b514-6d38-5eaa-6e75ad8f78c0.png">

いい感じです。
次に、高さを調整します。Youtubeには画面の3割を、残りを他に割きます。
参考：[SwiftUIの肝となるGeometryReaderについて理解を深める](https://qiita.com/masa7351/items/0567969f93cc88d714ac)

```ContentView.swift
struct ContentView: View {
    var body: some View {
    GeometryReader {geometry in
      VStack{
            WebView(loadUrl: "https://www.twitter.com")
              .frame(width: geometry.size.width, height: geometry.size.height * 7 / 10)
              WebView(loadUrl: "https://www.youtube.com")
        }
    }
  }
}
```
<img width="1304" alt="スクリーンショット" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158553/3ac94d21-aace-8014-738d-01718ba67274.png">
画面を7:3で分けられました。

下のセーフエリアがもったいないので、ここも使えるようにします。VStackに

```
.edgesIgnoringSafeArea(.bottom)
```

をつけてやります。

最後に、デフォルトだとYoutubeを再生し始めると全画面になってしまうのですが、これが起きないようにします。

参考：[How can I add web view preferences to a swift ui web view](https://stackoverflow.com/questions/58902095/how-can-i-add-web-view-preferences-to-a-swift-ui-web-view)

変更するのは先ほど作成したWebView.swiftです。

```WebView.swift
import SwiftUI
import WebKit

struct WebView: UIViewRepresentable {
    var loadUrl:String
    var allowsInlineMediaPlayback: Bool{true}

    func makeUIView(context: Context) -> WKWebView {
      let webConfiguration = WKWebViewConfiguration()
      webConfiguration.allowsInlineMediaPlayback = true
      return WKWebView(frame: .zero, configuration: webConfiguration)
    }

    func updateUIView(_ uiView: WKWebView, context: Context) {
        uiView.load(URLRequest(url: URL(string: loadUrl)!))
    }
}
```
<img width="1309" alt="スクリーンショット" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158553/d563441d-546b-8271-1d76-70429c421711.png">


これで、ひとまず使える当初の目的にかなったアプリにはなりました。
まだまだ機能が足りていないので、随時勉強&追加していきます。

今回作成したコード
https://github.com/KanikaniYou/MultiTube


追記：iOSのアップデートで、このアプリの必要性が皆無になってしまいました。ちょっと別のアプリを考えます。
RailsでRspecの導入



 「Everyday Rails - RSpecによるRailsテスト入門」を一通り行ったので少しずつまとめていく。今回は導入について
<h2>Gemfile インストール</h2>

```
group :development, :test do
  gem 'rspec-rails', 'version'

end
```
rspec-railsのライブラリは、rspec-coreというrspecの核的なもの以外に、独立したgemが含まれており、Rails向けの便利機能などをパッケージとして簡単みインストールできる。
Rails以外のアプリケーションなどの場合は、これらを個別にインストールする必要がある。

記入後、bundle install を実行。

<h2>テストデータベース</h2>

　まずはテストデータベースが存在するか確認。存在しなければ作成する必要がある。config/databese.ymlを開き、自分のアプリケーションが、どのデータベースに接続しているか確認。

```
config/database.yml

test:
   <<: *default
database: db/test.sqlite3
```
初期設定を変更して居なければ、このように表示されるはず。
大事なのはdatabase: db/test.sqliteの箇所で、必要であれば自分で変更。

そして、次はターミナルからコマンドを実行しデータベースを作成。コマンドは以下の通り。

```
$ bin/rails db:create:all
```

テストデータベースが無ければ作成され、存在するなら教えてくれる。すでに存在した状態で実行しても教えてくれるだけで、データベースが消去されることはないので心配いらない。
　むしろ、確認できる。


<h2>RSpecのインストール</h2>

```
$ bin/rails generate rspec:install
```

これによってspecフォルダが作成される。ここに、テストファイルなど追加していく。その他には、spec_hepler.rb,rails_helper.rbなどのカスタマイズ するファイルが作られる。

補足：出力を読みやすくする
そのままでは読みづらいRSpecの出力を文書にして読みやすくする設定。
.rspecファイルに以下を記入。

```
--require spec_helper
--format documentation
```

<h2>binstubによる高速化</h2>

binstubをインストールするとSpringの恩恵が受けられ、テストスイートが早くなる。

```
Gemfile

group :development do
  gem 'spring-commands-rspec'
end 
```

bundle install後に以下のコマンドを実行。

```
$ bundle exec spring binstub rspec
```
これにより、binディレクトリにrpecという実行ファイルが作られる。以上で完了。




<h2>まとめ</h2>

* Gemfile追加
* テストデータベース作成
* Rspecインストール
* binstubによる高速化


参考文献　『Everyday Rails - RSpecによるRailsテスト入門』　著：Aaron Sumner 　訳：伊藤淳一・秋元利春・魚振江
rootユーザ以外だと、コピーコマンドで所有者が完全に保持されないことがある

## 結論
所有者を保持したままディレクトリをバックアップ(cp, tar)したいときは、rootユーザで実行したほうが無難

## 内容
レガシーなWebサーバーでサーバーのメンテナンスをするときに、バックアップの取得やtarアーカイブを作成したりする際の話です。
例えばコピーを作成するときに"--preserve=all"コマンドをつけたり、tarでtar.gzを作成するときに"-p"コマンドをつけたりすると、パーミッション・所有者情報が保持されるはずです。
なのですが、実際にはコマンドを実行したユーザでコピーを作成できないファイルがあった場合、元のファイルの所有者が保持されず、コマンドを実行したユーザが所有者として設定されてしまいます。
こうしたケースでは、rootユーザでコマンドを実行することで、所有者を完全に保持しながらコピー可能です。

## 例
wordpressのバックアップコピーを作成した際に、ファイル所有者がapacheユーザからコマンド実行ユーザに勝手に書き換わってしまうことが過去にありました。
wordpressはapache経由でのPHPプロセスによって動くため、ユーザがapacheから変わることで、ファイルアップロードなどでエラーが発生する可能性があり事故のもとになります。

## 参考
https://www.atmarkit.co.jp/ait/articles/1606/02/news021.html
worldmapjs を使ってみた

https://worldmapjs.org/ を使ってみました。
が、先に書いておくと、うまく利用できませんでした



# やったこと

1. https://worldmapjs.org/ から `worldmap.v1.js` と `worldmap.v1.css` をダウンロード
    * ページ内のリンクは 404 になってしまう。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603093/69612b1b-be29-772f-21ea-c9b362411470.png)
    * なので、上記ページ自体が利用している下記の URL からダウンロードした
        * https://worldmapjs.org/files/worldmap.v1.js
        * https://worldmapjs.org/files/worldmap.v1.css
2. 上記を自前の index.html にくみこむ。
    * DOWNLOADS & INSTALLATION を参考に次のようにしてみた。

```html
<html>
  <head>
    <title>WorldMap.js のサンプル</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">

    <!-- Latest compiled JavaScript -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://d3js.org/topojson.v1.min.js"></script>
    <script src="https://d3js.org/d3.geo.projection.v0.min.js"></script>
    <script src="https://d3js.org/queue.v1.min.js"></script> 
  </head>

  <body>
    <div id="mapcontainer" align="center"></div>
    <link rel="stylesheet" href="worldmap.v1.css"> 
    <script src="worldmap.v1.js"></script>
    <script>
      var createmap = new Worldmap({  
        elementid: "#mapcontainer",
      });
    </script>
  </body>
</html>
```

# 結果

`world` という変数が未定義の様子だった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603093/82146099-103f-4fdb-8866-6dd63ad15868.png)

ほかの地図ライブラリも試したいので、いったんここで調査打ち切り。