OmniAICreator/Qiita-1.07M huggingface dataset:
Redisより早いとかいうKeyDBを試してみた!

`KeyDB`とかいう`Redis`の代わりになりそうな面白そうなものを見つけたので試してみる。

docs: https://keydb.dev/
github: https://github.com/JohnSully/KeyDB

Redisのforkとだけいうあって、使い勝手は普通のRedisと変わらない使い方ができるそう。Forkしたことによってより迅速な開発が可能になったのだとか。

## 計測

性能計測には`redis-benchmark`を使用

参考: http://mogile.web.fc2.com/redis/redis409/topics/benchmarks.html

```shell

redis-benchmark --csv -r 6
```

KeyDBはDockerも用意してあるようなので、RedisもDockerで用意することにした。

```shell

docker run -p 6379:6379 -d eqalpha/keydb # KeyDB
docker run -p 6379:6379 -d redis # redis
```

## 結果


```sh:KeyDB

$ redis-benchmark --csv -r 6
"PING_INLINE","9935.42"
"PING_BULK","10183.30"
"SET","10034.12"
"GET","10332.71"
"INCR","10125.56"
"LPUSH","8552.12"
"RPUSH","9554.75"
"LPOP","8560.91"
"RPOP","10690.61"
"SADD","9711.57"
"HSET","9462.53"
"SPOP","9739.00"
"LPUSH (needed to benchmark LRANGE)","8738.20"
"LRANGE_100 (first 100 elements)","8354.92"
"LRANGE_300 (first 300 elements)","5207.79"
"LRANGE_500 (first 450 elements)","3657.11"
"LRANGE_600 (first 600 elements)","2588.73"
"MSET (10 keys)","6128.58"
```

```sh:Redis

$ redis-benchmark --csv -r 6
"PING_INLINE","12020.67"
"PING_BULK","12503.13"
"SET","12301.64"
"GET","11416.83"
"INCR","10298.66"
"LPUSH","10270.10"
"RPUSH","11256.19"
"LPOP","11695.91"
"RPOP","12367.05"
"SADD","13319.13"
"HSET","10828.37"
"SPOP","13586.96"
"LPUSH (needed to benchmark LRANGE)","12948.34"
"LRANGE_100 (first 100 elements)","10706.64"
"LRANGE_300 (first 300 elements)","5632.22"
"LRANGE_500 (first 450 elements)","4065.21"
"LRANGE_600 (first 600 elements)","3404.37"
"MSET (10 keys)","11071.75"
```

redisの方が性能いいじゃねえかどうなってんだ...
【注意喚起】2019/10/08のWindowsアップデートでIE11のUserAgentが変わりました。

IEだけフロントの挙動変えよう～っていうコーディングしていた方、どうやってしていますか？

僕はwindow.navigator.userAgentさんにお世話になっています。

しかし、IEの機能制限が効いていないと報告があり調査すると今までIEの判断に使っていた'MSIE'の文字列がいなくなっており↓のようになっていました。

 "Mozilla/5.0 (Windows NT 6.1; Win64; x64; Trident/7.0; rv:11.0) like Gecko"    

対応としては'MSIE'で判断していたところを'MSIE'と'Trident'の文字列でチェック判断するようにしたら、IE対応できました。

緊急性高そうなので（特に古いシステム使ってる場合）取り急ぎ簡単に書いておきました。
お役に立てば幸いです。
VScode 上でEC2のファイル操作・conda enviromentを使用する方法

# 目的
VScode で EC2へssh接続し、
VScode上でEC2 Deep Learning AMIに入っているCondaを利用してpython Scriptを
動かすまでの手順を記載します。

# 背景
普段はEC2上でjupyter serverを立ち上げてデータ分析を行っているのですが、
VScodeの強力な拡張機能を使ってみたくてやってみました。

#前提
Windows環境で実施しました。
Vscodeをinstall済み
EC2を立ち上げ済み
Gitをインストール済み

# VScode上の設定


MARKET PLACEからRemote Developmentをインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295881/3f9f4a5f-bc78-4308-4553-f17b593ef2aa.png)

左にRemote Developmentのアイコンが表示されるので、そこを押してから
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295881/4f110bf9-79df-08e5-90ca-40b36cdca86b.png)

sshを設定する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295881/5cb7d0d2-4a83-c7d6-29c8-67d50c863c94.png)

```
Host EC2
    HostName xxx.xxx.xxx.xxx #EC2のIP
    User ubuntu
    IdentityFile #.pemファイルのディレクトリ
    CheckHostIP no
    ControlMaster auto
    ControlPersist  600
    IdentitiesOnly yes
    ForwardAgent yes
    RemoteForward 22 127.0.0.1:22
```

VScode上の歯車マーク→設定　から検索バーにremote sshを入れて、設定を行います。

設定箇所は
Config File #sshのconfig設定場所を設定
Path #使用するsshの場所を設定
　　　自分はGitのsshでないとpermision deniedが出て、使えませんでした。
Show Login Terminal #有効にする。

次にEC2をクリックしてEC2へ接続する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295881/59d97cc8-36c3-79c6-7044-fc3bc3543ce2.png)


接続したらEC2にもpython extensionを追加する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295881/e488de9a-e574-42ea-4abe-8213c2b70a3f.png)

最後にpython enviromentを使用したいものを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295881/69628461-7955-d3c3-b1ec-4cb4e15c25ca.png)

以上です！あとはEC2上でpythonファイルを作ってコードがりがり書いていきましょう。
Laravel5.8環境で日本語PDF出力(Laravel-dompdf)

# Laravel5.8環境で日本語PDF出力(Laravel-dompdf)

## laravel-dompdfパッケージのインストール

composer.jsonファイルに
"barryvdh/laravel-dompdf": "^0.8.5", を追加して
プロジェクトディレクトリ（/home/public_html）に移動し下記コマンドを実行する。
1.  composer updateを実行
2.  composer require barryvdh/laravel-dompdf

## PDF出力(Route設定)
Route::get('/payslip', 'Payslip\PayslipController@index');
Route::group(['middleware' => 'auth.check.user'], function () {
　　Route::get('/payslip/pdf', [ 'as' => 'payslip.pdf', 'uses' => 'Payslip\PayslipController@printPDF']);
});

##  コントローラー (PayslipController)
    # HTML確認時
    return view('payslip.pdf', $data);


    # PDFファイル出力時
    $pdf = PDF::loadView('payslip.pdf', $data)
            ->setPaper('a4')->setWarnings(false);

     return $pdf->download('payslip.pdf');

## view
1.  resource/view/payslip/index.blade.phpを作成し、下記のリンクを貼る

aタグのリンクURL：{{route('payslip.pdf')}}?ym=201911　（例：2019年11月分）

2.  resource/view/payslip/pdf.blade.phpを作成し、PDF用内容を実装

## 日本語化への対応
1. fontsディレクトリの作成
  storage/fonts
2. IPAフォントのダウンロード
 https://ipafont.ipa.go.jp/old/ipafont/download.html
zipファイル解凍後、storage/fonts/ディレクトリの下にコピー
3. CSSの@font-faceを利用
    <style type="text/css">

        @font-face{
            font-family: ipag;
            font-style: normal;
            font-weight: normal;
            src:url('{{ storage_path('fonts/ipag.ttf')}}');
        }
        @font-face{
            font-family: ipag;
            font-style: bold;
            font-weight: bold;
            src:url('{{ storage_path('fonts/ipag.ttf')}}');
        }
    <style>

 上記で日本語が正しく表示される   
    
## PDFのファイルサイズ問題
日本語化はできましたが、作成したファイルのサイズを確認すると4.5MBになっている。
    
 下記の設定でファイルサイズ問題解決できる。
php artisan vendor:publish --provider="Barryvdh\DomPDF\ServiceProvider"を実行
config/dompdf.php "enable_font_subsetting" => trueにする
    
4.5MBもあったファイルサイズが8KBのサイズまで小さくなった

## レイアウト崩れる問題
今回はユーザーの給与明細をPDFで出力する機能の実装で、ユーザー名などはdivで表などはtableでviewファイルを実装。
   最初はdivなどを使いhtmlで綺麗に表示されて、PDF出力モードに切り替えPDFに書き出すとレイアウトが崩れてしまう(困った)。
   結果的にdivの部分を全部tableに書き直してなんとか解決できた。
HTML（タグ種類）


#とりあえずメモ

<'html>HTML文書であることを示している。
<'head>記述場所
<'title>画面タイトル
<'stile>デザイン設定記述場所
<'body>ブラウザ画面に記述する情報の記述場所を示します。

上記を書くことは必須。
保存する際に拡張子を.htmlにすることによってテキストエディタからブラウザを開くことが出来る。

#####　⇒タグは小文字！！！！！

<'h1>見出しを示します。
<'p>文章や段落を示します。（paragraph：段落のp!!!!!!!!）


<'strong>ほにゃ<'/strong>⇒強調・太字
<'em>ほにゃ<'/em>⇒強調・斜体

<'br/>⇒改行
#####⇒　※<'br/><'br/>を2つ続けて記述するのはだめだよ
　文章の段落変える時は<'p>～<'/p>でマークアップする。
　⇒上下に余白が挿入されます。

<'ul>～<'ul>ここからここまでリストにしますよ～
<'li>～<'li>リストの各項目を示します。
#####　⇒※<'li>は<'ul>の中で使用する。

<'ul>を<'ol>に変更すると1.2.3...と数字でリスト表示できる。
<'ol>と<'ul>を組み合わせることによって

1.アンパン
　・粒あん
　・こしあん
2.食パン
3.カレーパン

的な感じに出来る


- カーソル当てた時にリンクの色を指定する

a:hover {16進数}
{}の中に背景色や文字の大きさを指定すると、カーソルを当てた時のアクションが変わる。


<'div>~~<'/div>⇒グループ分け
<'div id="honyanya">　⇒ 固まりに名前つけている
　　　　　　　　   　　⇒id属性で名前を指定するときは半角英数字かつアルファベットから



- 罫線の設定は一つに出来る

【before】

div#container {border-style: solid;
               border-color: #666666}

【after】

div#container {border: solid #666666}



- padding

上下左右の余白サイズを指定します。

padding:（上）（右）（下）（左）
padding:（上）（左右）（下）
padding:（上下）（左右）
L-02C をWindows 10に繋いでもネットができなかった件

# 概要
L-02CをOnemix 2sに繋いだが、ある日突然、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245977/b4c7ddd7-36c8-0c01-a61e-72a066948e39.png)
モバイルルーターのアイコンを押してもうんともすんとも言わなくなった。
かなり困っていたが、解決できた。



# 環境
・DMMのMVNOユーザ
・L-02C
・Win10

ちなみに、すでにドコモの標準のドライバとツールをインストールしている。
https://www.nttdocomo.co.jp/support/application/xi/utility/card/l02c/

# 手順
Win10だと、OS側に備わったサービスがモバイル通信を管理する。ところが、これに問題があるらしい。
ドコモ標準のツールは「mobile broadbandの自動接続設定が優先されるため」終了されてしまう。

サービスを落としてやれば良い。
スタートメニューで「サービス」を開く。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245977/7d164822-f1d2-e30a-f831-eaf1977b91aa.png)

「WWAN　AutoConfig」を葬れば良い。スクロールして探して右クリック。停止をし、プロパティからスタートアップの種類を無効にすれば完了。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245977/94264ecc-2969-b2ae-2bd0-7363e86c2ecb.png)

標準のツールが使えるようになった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245977/07663258-847f-ae2c-83c5-51d87e1c0a83.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245977/c176890c-8cb0-b931-505c-bdf5f1df38c6.png)

解決。


# 参考
https://iroiro-memo.hatenablog.com/entry/20171105/1511153073
【JavaScript】時間の差分を数値に変換する

## ユースケース
時間の差分を数値と比べたい時などに使えます。

## 必要なもの
・moment.js

## やり方
まずはmomentオブジェクトから。
今回は時間だけを指定して作ります。

```js
const start = moment('900', 'hmm')
const end = moment('1900', 'hmm')
```

diffメソッドを使って差分を取得します。
これの戻り値が数値になっています。

```js
end.diff(start, 'hours') // 10
```

第３引数をtrueにすると差分が中途半端な場合でも.5など少数で返ってくるので大変便利です。

```js
10時.diff(15時30分, 'hours', true) // 5.5
10時.diff(15時45分, 'hours', true) // 5.75
```

他にも「年」「月」などでもいけます。

```js
end.diff(start, 'days', true)
end.diff(start, 'years', true)
```
dockerでGUIアプリ起動可能な環境構築 [クライアント <--> リモートサーバ <--> dockerコンテナ]

# リモートサーバ接続

```
ssh [user name]@[server name] -X
```
- **[user name]** --> ユーザ名がリモートサーバーとホスト間で同じなら省略可

# Dockerfileの作成
適当なテキストエディタで **Dockerfile** という名前のファイルを作成してください（拡張子なし）

```:Dockerfile
FROM [docker image name(base)]:[Tag(base)]

RUN apt-get update && \
    apt-get install -y sudo && \
    apt-get install -y x11-apps && \
    apt-get install -y geeqie && \
    apt-get install -y git

RUN groupadd -g [gid(local)] [group name] && \
    useradd  -u [uid(local)] -g [group name] -G sudo -m -s /bin/bash [user name(in docker)] && \
    echo '[user name(in docker)]:[password]' | chpasswd

RUN echo 'Defaults visiblepw'             >> /etc/sudoers
RUN echo '[user name(in docker)] ALL=(ALL) NOPASSWD:ALL' >> /etc/sudoers

ENV USER=[user name(in docker)]
ENV QT_X11_NO_MITSHM=1

```

- **[docker image name(base)]:[Tag(base)]** --> honghu/keras:mx-cu10.0-dnn7.4-py3-19.01

- **[uid(local)], [gid(local)]**

```
$id
uid=2036(hoge) gid=1000(hoge_group),...
```

- **[group name]** --> developer
- **[user name(in docker)]** --> hoge


# docker imageの作成

```
# Dockerfileのあるディレクトリで実行
docker build ./ -t [docker image name]:[Tag]
```

- **[docker image name]:[Tag]** --> hoge/keras:latest

# docker containerの起動

```
nvidia-docker run \
-it \
--name [docker container name] \
--net host \
--shm-size=[memory size] \
-u $(id -u $USER):$(id -g $USER) \
-w [start directory] \
-e DISPLAY=$DISPLAY \
-v [local directory]:[docker directory] \
-v /tmp/.X11-unix/:/tmp/.X11-unix/ \
-v $HOME/.Xauthority:/home/[user name]/.Xauthority \
[docker image name]:[Tag] /bin/bash
```

- **[docker container name]** --> hoge_keras
- **[memory size]** --> 10gb
- **[start directory]** --> /home/hoge/study
- **[local directory]:[docker directory]** --> /home/hoge:/home/hoge/study
- **[docker image name]:[Tag]** --> hoge/keras:latest
- **[user name]** --> hoge

# local と docker container 間の通信を許可

```
# localで実行
xhost +local:`docker inspect --format='{{ .Config.Hostname }}' [docker container ID or name]`
```

- **[docker container ID or name]** --> hoge_keras

# GUIアプリを起動しても表示できない場合
環境変数 DISPLAY の確認，変更
localとdockerで環境変数DIPSLAYを一致させる

```
# localで実行
$echo $DISPLAY
localhost:10.0

# dockerで実行
$echo $DISPLAY
:1
$export DISPLAY=localhost:10.0
```


# 参考記事
・ https://qiita.com/iganari/items/1d590e358a029a1776d6

・ https://unskilled.site/docker%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A%E3%81%AE%E4%B8%AD%E3%81%A7gui%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E8%B5%B7%E5%8B%95%E3%81%95%E3%81%9B%E3%82%8B/

・https://qiita.com/aoksh/items/1a386ee87594e67784c4
脱出ゲームの作り方　１

■各パネルの画像を設置

画像をダウンロード
![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144922/1ba1840d-d822-5b8f-43d1-0c477ef40af2.png)

Assetsの下にフォルダをドラッグして保存し、フォルダ名をImagesにする
![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144922/9a742b9a-1c59-e1e6-bb0d-f8894670ba0a.png)

UI-Panel 
※Panel：Canvasの背景を設定する
Canvasフォルダの下にPanelが作成される

![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144922/aa212369-d1bc-65ff-60e5-dcc160ff18e6.png)


RoomPanel（背景）を設定

![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144922/bbfa3512-b9b2-48d5-5344-23d2b20dce62.png)


コピーして下記を作る
lightStandPanel（ライト）
drawerPanel（引き出し）
pcPanel（ノートPC）

Inspectorでそれぞれに画像を設定する
チェックを外して、表示を非アクティブにする

■ボタンを作成

RoomPanelの上記の３つの位置にボタンを作成する

CreatEmptyでGameObjectを作成し、
TriggerButtonList
とする

その下に、
UI-Image
Imageを作成し、TriggerButtonとする
ProjectにPrefabsフォルダを作成して、TriggerButtonをドラッグアンドドロップして入れ、プレファブにしておく
※Prefabプレファブ（スタンプ、設計図）
プレファブにしたいオブジェクトを、HierarchyウィンドウからProjectウィンドウにドラッグアンドドロップする

TriggerButtonを複製して３つ作成し、
LightTriggerButton
DrawerTriggerButton
PCTriggerButton
にする

ProjectでプレファブのTriggerButtonを選択し、Open Prefabボタンを押して、Add CompornentでButtonを有効にする
すべてのTriggerButtonにButtonコンポーネントがついているのを確認する

:point_up:
※プレファブにしたら、Hierarchyウィンドウで個別に設定するのではなく、Projectウィンドウで設定していく
※Projectウィンドウは開発者向けの素材を置いて扱うところ


■スクリプトを設定

ProjectにScriptsフォルダを作成し、C#スクリプトGameManagerを作成する

CreatEmptyでGameobjectを作成し、GameManagerとし、このオブジェクトにスクリプトをつける


◇各パネルを取得

:point_up:
publicな変数の宣言

プレファブにしたパネルをスクリプトで取得するためのpublic変数を宣言
GameObject型の変数（プレファブやゲームオブジェクトを入れる）
※ゲームオブジェクト：Hierarchyウィンドウにある全部


```csharp
public class GameManager : MonoBehaviour
{
     // 各パネルを取得
    public GameObject lightStandPanel;
    public GameObject drawerPanel;
    public GameObject pcPanel;
}
```

スクリプトに変数を宣言すると、
InspecterでGameManagerオブジェクトのGameManagerスクリプトに

lightStandPanel
drawerPanel
pcPanel

が出ているので、それぞれにパネルをセットする

◇各TriggerButtonを押したら該当するパネルを表示

```csharp
public class GameManager : MonoBehaviour
{
    public GameObject lightStandPanel;
    public GameObject drawerPanel;
    public GameObject pcPanel;


    // ボタンを押したら該当するパネルを表示
    public void OnClickLightStandTrigger()    //ライトトリガーを押したら
    {
        lightStandPanel.SetActive(true);      //ライトパネルをアクティブにする
    }
    public void OnClickDrawerTrigger()        //引き出しトリガーを押したら
    {
        drawerPanel.SetActive(true);          //引き出しパネルをアクティブにする
    }
    public void OnClickPCTrigger()           //PCトリガーを押したら
    {
        pcPanel.SetActive(true);             //PCパネルをアクティブにする
    }
}
```
Inspectorで下記のTriggerButtonのButtonコンポーネントの On Click() にGameManagerオブジェクトをセットして、
表示される関数をから実行させる関数を設定する

LightTriggerButton　:arrow_lower_right: OnClickLightStandTrigger()
DrawerTriggerButton:arrow_lower_right: OnClickDrawerTrigger()
PCTriggerButton　　:arrow_lower_right: OnClickPCTrigger()



##教材
**Unityゲームスタジオ スタジオしまづ**
**【Unity】初心者からの脱出！？　脱出ゲームの作り方　その１**
https://youtu.be/boSqdZ87ULU
PoweShellでのファイル出力方法あれこれ

## はじめに
　PowerShellではシェルの実行結果をファイルへ出力するのに様々な方法が存在している。
　どのようなコマンドがあり、それぞれどのような特徴があるのか。まとめてみました。

## Start-Process の-RedirectStandardOutput

```PowerShell:Start-Processの基本構文
 Start-Process -FilePath プログラム -ArgumentList オプション -RedirectStandardOutput ログファイル
```
**特徴** 
・別プロセスで実行したプログラムの結果を出力させる方法
・基本的にはファイル出力のみ
・追記は不可

   
##「Start-TranScript」と「Stop-TranScript」

```Powershell:「Start-TranScript」と「Stop-TranScript」の使用例
Start-Transcript -Path hoge.txt

Stop-Transcript
```
**特徴**
・スクリプト内で範囲を絞っての出力が可能
・「Start-Transcript」と「Stop-Transcript」の2つで1セット。
・コンソールとファイル、両方に出力される。
・追記は不可

## Tee-Object

```PowerShell:Tee-Objectの使用例
 ping 127.0.0.1 | Tee-Object -FilePath hoge.txt
```
**特徴**
・出力はUnicodeのみ。エンコード指定はできない。
・ファイルが存在しない場合は作成される
・コンソールとファイル、両方に出力される。
・追記は不可

## リダイレクト

```PowerSHell:例
ping 127.0.0.1 >> hoge.log
```
**メモ**
「>」　：ファイルへ出力（上書き）
「>>」：ファイルへ出力（追記）
「2>」：エラーメッセージのみファイルへ出力（上書き）
　　　　実行結果はコンソールへ表示。
「2>>」：エラーメッセージのみファイルへ出力（追記）
　　　　　実行結果はコンソールへ表示
「2>&1」：エラーメッセージを変数$Errorへ格納し、コンソールにも表示する。
　　　　　実行結果はコンソールへ表示。

## Out-File

```PowerShell:Out-Fileの使用例
 Out-File -FilePath hoge.txt [-Append][-Encoding] 
```
**特徴**
・「-Append」オプションを用いることで追記が可能。
・「-Encoding」文字コードを指定してのエンコード変換出力が可能。
・ファイルへのみ出力される（コンソールへは表示されない）
  
##「Set-Content」と「Add-Content」

```PowerShell:「Set-Content」と「Add-Content」の例
	Get-Date | set-content -Paht hoge.txt
	ping 127.0.0.1 | Add-Content -Path hoge.txt
```
**特徴**
<dl>
<dt>Set-Content</dt>
<dd>・ファイルが存在できない場合は新規にファイルを作成する</dd>
<dd>・既存ファイルへの追記はできない</dd>
<dt>Add-content</dt>
<dd>・既存ファイルへの追記のみ可能。</dd>
<dd>・ファイルが存在しない場合はエラーとなる</dd>
</dl>
Vuetifyのデフォルトのフォントサイズを変更する

## やりたかったこと

ブラウザのフォントサイズの設定に合わせて、文字サイズが変わるサイトにしたかった。
![スクリーンショット 2019-10-16 16.54.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252165/2e4760eb-cfbc-b405-4abd-408c2a1e8f8c.png)
何もしないとブラウザの設定を変更しても文字サイズは同じまま。

## 原因

Vuetifyがデフォルトでhtmlに対してフォントサイズを設定していた

```css
html {
    font-size: 16px; 👈
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
```

## 解決策

`index.html` の html要素に直接指定して書き換える

```public/index.html
<!DOCTYPE html>
<html lang="ja" style="font-size:initial;"> 👈
　　　　　(略)
</html>
```


~~一部書き換わってくれないコンポーネントがありましたが、~~
~~今回は気にならない部分だったのでとりあえずこれでよし。~~
FCMのService Worker で受け取ったプッシュ通知を Angular 側に渡す方法


#この記事でやること#
Angular に導入した FCM の Sevice Worker から受け取ったプッシュ通知をコンポーネント側に渡します。

FCM 導入の細かな点については言及しません。

もし導入部分から知りたい方がいましたら、私が参考にした記事が非常にわかりやすくまとめられているので、そちらを参照してください。

#Angular 側にプッシュ通知の内容を渡す#

```typescript:main.ts

import { Component, OnInit } from '@angular/core';
import { AngularFireMessaging } from '@angular/fire/messaging';

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.scss']
})
export class MainComponent implements OnInit {

 constructor(
    private messaging: AngularFireMessaging,
  ) { }

 ngOnInit() {
    
    // Angular 側へプッシュデータを渡す
    this.messaging.messages
      .subscribe( message => { console.log(message); });
  }
}
```

これでコンソールにはサーバ側で送信したプッシュ通知のタイトル、ボディ、データがコンソールに出力されます。

#参考記事#

+ [Firebase Cloud Messagingで始めるWebプッシュ通知](https://qiita.com/ryo_hisano/items/1171beca22d5a04ed802)
+ [Angular5でのPush通知実装(firebaseあり版となし版)](https://qiita.com/shuuhei/items/e849f9ef456f2ec85edc)
[Swift 5]UITableViewでHeaderにCellを使っている時、reloadRows(at:with:)を使うとHeaderが消えてしまう時は

```swift
tableView.reloadRows(at: [indexPath], with: .none)
```

タイトル通り、Cellを上記のように更新するとHeaderの文字列が消えてしまって困りました。

```swift
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    
    let headerCell = tableView.dequeueReusableCell(withIdentifier: "headerCell")
    // do something

    // セルのままだと`reloadRows`でヘッダーが消えてしまうのでUIViewでラップする
    let view = UIView(frame: .zero)
    view.addSubview(headerCell!)
    return view
}
```

こんな感じでHeaderに指定しているCellをViewでラップすればOK

```swift
return headerCell?.contentView
```
をreturnしても大丈夫でした。

##参考
https://stackoverflow.com/questions/23424951/uitableview-section-header-disappears-if-i-insert-or-delete-rows
[SourceTree]「〜をこのコミットまで戻す」と「コミット適用前に戻す」の日本語がつらい

#はじめに
`SourceTree`で`commit`を取り消しをしようとするとそれっぽい2択を迫られる。
**「〜をこのコミットまで戻す」**と**「コミット適用前に戻す」**
いや、どっち？なんかわかりづらい、、
<img width="658" alt="スクリーンショット 2019-10-16 15.29.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475098/b14df808-e535-7974-a0c2-21a417cc526d.png">
「〜をこのコミットまで戻す」を選択した場合、次の3択を迫られる。
**「Soft-すべてのローカルを保持」**
**「Mixed-作業コピーの変更内容を保持するが、インデックスをリセットする」**
**「Hard-すべての作業コピーの変更内容を破棄」**
<img width="605" alt="スクリーンショット 2019-10-16 15.33.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475098/761d722b-c2c9-2b5d-4fee-bfb6b3441ae9.png">
結局どれ使えばいいの？を場面ごとに整理。。

#多々あるcommitを取り消したい場面
○ `push`する前

- 直前の`commit`メッセージの修正
- 古いやつの`commit`メッセージの修正
- `commit`の取り消し（`reset`）

○ `push`した後

- `commit`の取り消し(`revert`)

# pushする前
## 直前のcommitメッセージの修正
`commit`する画面の右上の「コミットオプション」→「直前のコミットを上書き」
<img width="417" alt="スクリーンショット 2019-10-16 15.41.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475098/2664c890-91a8-e5b8-a3dd-fa66c0506a41.png">

## 古いやつのcommitメッセージの修正
修正したい`commit`の**親commitのところ**で右クリックし、
「〜の子を対話形式でリベース」を選択。
「メッセージを編集」から編集できる。
<img width="620" alt="スクリーンショット 2019-10-16 15.45.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475098/c4717735-4a9e-d5e0-16cc-10751eaf0e12.png">

## commitの取り消し(reset)
戻したいコミットの上で「〜をこのコミットまで戻す」を選択。
###Soft,Mixed,Hardについて
Soft,Mixedはどっちでもいい。
Softは変更内容がStaging済のファイルとして返ってくる
<img width="911" alt="スクリーンショット 2019-10-16 16.10.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475098/4f064b78-8f29-8895-df05-6a2a1d46e4c9.png">
Mixedはステージングに未登録のファイルとして返ってくる
<img width="792" alt="スクリーンショット 2019-10-16 16.15.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475098/657a89f4-f3cc-f569-c54a-9b60f348725f.png">
Mixedをしたあとに手動でファイルを破棄した方が確実なのでHardは使わないかな。

# pushしてしまった後
## commitの取り消し(revert)
branch1をpushしている状態で、push前に戻したい場合
「コミット適用前に戻す」を選択
<img width="636" alt="スクリーンショット 2019-10-16 16.21.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475098/dddc7c76-618a-8a2b-0183-69a6e0f2c71e.png">
一個前のcommitの「commit0」の状態まで戻った新しいcommitが生成する。
<img width="558" alt="スクリーンショット 2019-10-16 16.25.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475098/88304642-69cf-aff6-9fb5-4677cdf7856a.png">
~~どうやらpushしてしまっても１つ前までなら戻れるみたい。~~
あとはコンフリクトとの戦いです。

# おわりに
commitの取り消しができなくて困ってたので、整理してみました。
revertに関してはもう少し深堀りしていかないと。。
Route53 初心者　技術的まとめ

#Route53のルーティングポリシー

**・シンプルルーティング**
　標準のDNSレコードを設定でき、1つのリソースにトラフィックをルーティングする。
　複数のレコードを同じ名前と型で作成することはできないが、同一レコードに複数の値　
　(複数のIPアドレスなど)を指定することは出来る。
　複数の値を1つのレコードに指定すると、Route53は全ての値をランダムな順序で再帰的リゾルバー
　に返し、リゾルバーはこれらの値をDNSクエリを送信したクライアントに返す。
　クライアントはそのうちの1つの値を選択してクエリを再送信する。
　
**・レイテンシールーティング**
　クライアントからAWSリージョンへのレイテンシが最小のエンドポイントを選択する。
　レイテンシーレコードを作成し、そのレコードが存在するリージョンおよびユーザーに対する
　レイテンシーが最も小さいリージョンを識別し、レコードを選択する。
　このルーティングを行うには複数のレイテンシーレコードが必要。

**・フェイルオーバールーティング**
　複数エンドポイントでアクティブ・パッシブフェイルオーバーを設定。
　必ずヘルスチェックと組み合わせて使用する。
　複数リージョンにまたがるシステムで冗長構成。災害発生時ではリージョン間でフェイルオーバー
　サイト障害時はS3静的ウェブサイトホスティングのSorryページを表示
　イメージとしては、正常時はVPCに流し、障害や災害時はS3に飛ばしてsorryページに移行するもの。

**・加重ルーティング**
　同じ名前や種類のレコードセットに重みをつけて、ルーティング先の頻度を決定する。
　ドメイン名やサブドメイン名に複数のリソースを関連付けることが出来、ルーティングの
　トラフィック数を選択できる。
　ヘルスチェックとの組み合わせ可能

**・位置情報ルーティングポリシー**
　DNSクエリの送信元の場所に基づいてトラフィックを処理するリソースの選択可能。
　複数のエンドポイントにわたって負荷を分散できる。

**・複数値回答ルーティング**
　Route53がDNSクエリに対する応答として複数の値(サーバのIPアドレス)を返すよう設定できる。
　複数のAレコードなど記載されている場合など使用。
　
　
##Route53 トラフィックフロー
**・トラフィックフローとは**
Route53でポリシーベースのトラフィックルーティングをビジュアルに簡単に作成・管理できる機能。
複雑なルーティングポリシーを組み合わせたルールを管理できる。
マルチリージョンアーキテクチャで、高可用性、低レイテンシーで複雑なポリシーを適用する必要がある場合などに有効。

**トラフィックフローはトラフィックポリシーとポリシーレコードの2つで成り立つ。**

**・トラフィックポリシー**
　どのような条件に基づきトラフィックをルーティングするかを定義したポリシー
　複数のルーティングポリシーを組み合わせて作成。
　
**・ポリシーレコード**
　トラフィックポリシーが適用されたDNSリソースレコード
　DNS名に関連付ける。関連付けてない場合は課金なし。
　関連付けた場合、1か月50$かかる。
エラーレポートしない例外を動的に判定する

## 問題

1. カスタムExceptionHandlerを使ってエラーレポートを収集している
    - [エラー処理 5\.6 Laravel](https://readouble.com/laravel/5.6/ja/errors.html#report-method)
2. アプリケーションで独自に定義しているExceptionを使ってエラーレスポンスを構築する仕組みが存在する
3. (2) と衝突してしまうため `$dontReport` に無視する例外を追加していた
4. (3) の数が多くなってきたので名前空間でマッチさせて無視したくなった

## 解決法

`shouldReport(Exception $e)` をオーバーライドして `get_class()` の戻り値で判定した。

```php
public function shouldReport(Exception $e)
{
    $className = get_class($e);
    $knownError = Str::startsWith($className, 'App\Exceptions');
    if ($knownError) {
        return false;
    }

    return parent::shouldReport($e);
}
```
rails tutorial 7章 備忘録

- railsの三つの環境
    - test
    - development
        - railsconsoleはdevelopment環境
    - production

- resourcesについて(`resoureces :users`の場合)
    - route.rbに`resoureces :users`を追加することで以下が可能になる
        - ユーザーのURLを生成するための多数の名前付きルートの使用
        - RESTfulなUsersリソースで必要となるすべてのアクションが利用できるようになる

- debuggerを使おう
    - アプリケーションのdebuggerが呼び出された瞬間の内容をしることができる。
    - Userコントローラーの中に差し込むだけで変数の中身が確認できる。
    
```rb:users_controller.rb
def show
    @user = User.find(params[:id])
    debugger
  end
```
```terminal:terminal
(byebug) @user.name
"Example User"
(byebug) @user.email
"example@railstutorial.org"
(byebug) params[:id]
"1"
```

- プロフィール写真Gravaterを使用する
    - Gravatarはプロフィール写真をアップロードするときの面倒な作業や写真が欠けるトラブル、また、画像の置き場所の悩みを解決します(rails チュートリアルより）

- 登録フォームについて
    - name,email,passwordと各フィールドでhtmlが生成される
    - [重要]Railsはnameの値を使って、初期化したハッシュを (params変数経由で) 構成します。このハッシュは、入力された値に基づいてユーザーを作成するときに使われます (railsチュートリアルより)

```erb:new.html.erb

<% provide(:title, 'Sign up') %>
<h1>Sign up</h1>

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <%= form_for(@user) do |f| %>
      <%= f.label :name %>
      <%= f.text_field :name %>

      <%= f.label :email %>
      <%= f.email_field :email %>

      <%= f.label :password %>
      <%= f.password_field :password %>

      <%= f.label :password_confirmation, "Confirmation" %>
      <%= f.password_field :password_confirmation %>

      <%= f.submit "Create my account", class: "btn btn-primary" %>
    <% end %>
  </div>
</div>
```

- マスアサイメントとストロングパラメータについて
    - 複数のカラムを一括で指定できる方法をマスアサイメントという。
        - 例：`@user = User.new(params[:user])`
        - 上記の中身は`@user = User.new(name: "Foo Bar", email: "foo@invalid",password: "foo", password_confirmation: "bar")`←と同義。
    - ストロングパラメータ
        - マスアサイメントは脆弱性を持っており、仮にadmin属性をparamsの中に紛れ込ませると管理者権限を奪うことができる。
        - そういった脆弱性からまもるためにrails4.0からストロングパラメータというテクニックが推奨されている
        - 必須のパラメータと許可されたパラメータを指定することができる。さらに、paramsハッシュをまるごと渡すとエラーが発生するので、Railsはデフォルトでマスアサインメントの脆弱性から守られるようになった。
    - privateキーワードについて
        - web経由で外部ユーザーにさらされないようにするために設定する。
FlutterでFirebaseAuth使ってTwitterログイン機能作るとき気をつけること

めっちゃ簡単なことなんですが, 意外とハマってしまったので備忘録を.
今回はiOSのビルドに関してで, Androidの方は確認してませんので予めご了承ください.

###ビルド環境
- Xcode11
- iOS13

# 結論
[flutter_twitter](https://pub.dev/packages/flutter_twitter)を使いましょう.

# 経緯
やりたかったことは`FlutterでFirebaseAuthを使ってTwitterログインをする`という簡単なことです.

ということで調べつつ進めていると, Twitterログインをするためのパッケージとして[flutter_twitter_login](https://pub.dev/packages/flutter_twitter_login)を使いましょう, ということが色々なブログで書かれています.

じゃあやってみましょうかということで

```yaml:pubspec.yaml
dependencies:
  flutter_twitter_login: ^1.1.0
```
と書いて, いざiOSアプリをビルドしてみようとすると
`fatal error: 'TwitterKit/TwitterKit.h' file not found`
というエラーを吐きます.

いろいろ調べてみたのですが解決しなかったですし, Twitterログインに関して書いてあるブログはどれも2018年以前で, Xcode11が出る以前のブログなんですよねー.
そして`flutter_twitter_login`の最新バージョンの更新日も`Mar 24, 2018`となかなかに古い.
なんだか怪しい空気が漂ってきた.

ということで[pub.devで「twitter」と検索](https://pub.dev/flutter/packages?q=twitter)してみました.
すると[flutter_twitter](https://pub.dev/packages/flutter_twitter)という別パッケージを発見.
READMEに書かれてる内容もほぼほぼ一緒で, 最終更新日も`May 21, 2019`で`flutter_twitter_login`より新しい.

では改めてパッケージをインストール

```yaml:pubspec.yaml
dependencies:
  flutter_twitter: ^1.1.3
```

これでiOSビルドすると無事成功します.

Xcode11によるビルドが原因なのか, まだ原因は究明できてないのですが一旦共有まで.
new Date()を出力したらSafariでNaNになる件

jsonで取得したデータの中から日付を出力させて見たところ、iPhoneでNaNになるよってチェックバックが

```javascript
var date = new Date('2019-09-27 12:00:13');
```

こんな感じで日付を取得しています

## ブラウザの挙動
先程取得したdateをconsoleしてみます

```javascript
console.log(date);
```

### Firefox
`Date Fri Sep 27 2019 12:00:13 GMT+0900 (日本標準時)`
ちゃんと出てますねぇ、、、

### Chrome
`Fri Sep 27 2019 12:00:13 GMT+0900 (日本標準時)`
こちらも大丈夫

### Safari
`Invalid Date`
・・・ダメみたいです

## 対策法
さてどうしたものかとググってみると、
どうも年月日の-（ハイフン）が悪さをしている模様

試しに-を/に変えて出力させてみます

```javascript
var date = new Date('2019/09/27 12:00:13');
console.log(date);
```

`Fri Sep 27 2019 12:00:13 GMT+0900 (JST)`
ちゃんと出力されました

ということで、replaceを使って-を/に置換してやります

```javascript
var dt   = '2019-09-27 12:00:13'
var date = new Date(dt.replace(/-/g,"/"));
```

これで無事Safariでもエラー無く日付が表示されましたとさ
フィンテックエンジニア養成勉強会 #1

#フィンテックエンジニア養成勉強会の参加レポート
[フィンテックエンジニア養成読本」出版記念](https://fintech-engineer.connpass.com/event/146529/)を兼ねた、第一回目の勉強会に参加できる機会に恵まれましたので、参考になったお話について整理しておきます。

##フィンテック企業が提供するサービスについて調べてみた
今回の勉強会では、メガバンク（みずほ・三井住友）によるフィンテックへの取り組みに関する説明はありませんでしたが、インターネットで検索すると多くの情報を読む事ができます。

そういえば、THEO（積立による資産運用）やマネーフォワード（家庭の資産管理）は日本のフィンテック企業で、銀行講座と連携したサービスを提供していますね。

海外のフィンテック企業は、下例の企業が節目となってきた歴史があるとのこと。ネットで検索してみると金融業界は進んでいることを知らずに、目の前の仕事をこなす日々を過ごしてきた気がします。
①[PayPal(オンライン決済)](https://www.paypal.com/jp/webapps/mpp/home)
②[Square(POSレジ)](https://squareup.com/jp/ja)
③[Lending Club(融資)](https://squareup.com/jp/ja)
④[Kabbage(中小企業向け無担保融資)](https://jp.techcrunch.com/2017/08/05/20170803small-business-loan-platform-kabbage-nabs-250m-from-softbank/)
⑤[Findor Bank(支店を持たない銀行)](https://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A3%E3%83%89%E3%83%BC%E3%83%AB%E9%8A%80%E8%A1%8C)
⑥[Atom Bank(アプリ銀行)](https://moneyforward.com/mf_blog/20151128/atombank/)

##破壊から強調へ
支店やATMを持った銀行と連携することでサービス提供しているフィンテック企業もありますが（①〜④）、アプリ銀行（⑤・⑥）が普及する時には、従来と同じ仕事のやり方では完全に駆逐されますね。それから、スマホなどエッジデバイスの機動力の凄さを強く感じますね。

##Tech Giantが参入してきた
「AppleCard」や「Libra」のスタート。フィンテックに関して積極的に情報を探しに行ってはいなかったのですが、金融サービス事業をスタートすることは、新しいというよりも当然の動向でなのでしょうか。

##個人毎に合わせたレポート
使いなれたアプリで、個人に合わせた詳細なレポートが見れるようになる事が予想されるとのこと。他社との差別化でしょうか。

##OAサポートでチャットボット
自分自身の業務で問い合わせを自動化するにはどうすれば良いかな？と思い始めていたので、チャットボットを使う場合に参考になりそうな話が聞けました。
①KPIを決める　(例)チャットだけで解決した率
②他を参考にする
③スモールスタート　（例）やらない事を決める

自分のやりたい仕事を生業とするために、ぜひ、また参加させていただきたいと思っています。
drone.io で タグ付けデプロイを行う時の設定方法

# 概要
drone.io でリリースタグを付けた時にデプロイを行う設定をしてた時に、以下の点で少しハマったので整理しておく。
1. デプロイする時のタグ名の指定
2. デプロイする時のタグ付対象のブランチの指定

# 指定方法

## タグ名の指定
公式ドキュメントにも書いてあるが、`refs/tags/タグ名`をbranchに指定してあげればOK。
ワイルドカードなどの表記も使える。
例えば、`release-` がprefixについているタグ名の場合にデプロイする場合、以下のようにwhenを記述を記述してあげればOK。

```
when:
      event: tag
      branch: refs/tags/release-* 
```

## ブランチの指定
公式ドキュメント調べた感じだと、公式にはサポートされていないみたいだったが、
「本当はmasterブランチにタグ付したつもりだったのに、developブランチにタグ付けしてしまった」といったケースが発生するのが怖かったので、自前で対応するようにした。
具体的には、`DRONE_COMMIT`で、コミット番号を取得できるので、そのコミットが任意のブランチに含まれているかどうかをチェックするようなスクリプトを挟むようにした。

# サンプル
適当に作ったサンプル。デプロイ以外の処理を行う場合も使えるような気がする。

``` .drone.yml
pipline:
  deploy-prd:
    commands:
      - ./deploy.sh
    environment:
      - TAG_BRANCH=master # 対象ブランチ
    when:
      event: tag
      branch: refs/tags/release-* #対象タグ
```

``` deploy.sh
#タグ付時の場合のブランチチェック
if [ -n "${TAG_BRANCH}" ]; then
  git fetch
  branch_check=0
  
  # 対象ブランチのコミットを取得
  for commit in $(git log origin/${TAG_BRANCH} --pretty=%H)
  
  # コミットが含まれるかどうかをチェック
  do
  if [ ${commit} = ${DRONE_COMMIT} ]; then
    branch_check=1
    break
  fi
  done
  if [ ${branch_check} = 0 ]; then
    echo "ブランチが間違っています"
    exit 1
  fi
fi

# TODO: 任意の処理
```
配列内の同じ値をグループ化する方法（Ruby）

##開発環境
ruby 2.5.5
(2.6.0でも動作確認取れました）

# 結論
```array.rb
array = [9, 1, 2, 3, 1, 4, 3, 2, 4, 9]
     
array.group_by(&:itself)
  => {9=>[9, 9], 1=>[1, 1], 2=>[2, 2], 3=>[3, 3], 4=>[4, 4]}
```

これだけです！
まとめると、配列に入っている順番で値が同じ要素をグループ化して表示してくれます。


## 補足
この状態だとデータが扱いにくいので「to_aメソッド」を使用していい感じにします。
（to_aが分からない場合はググってみてください！　今回は説明省きます）

```array.rb

clean_array = (array.group_by(&:itself)).to_a
  => [[9, [9, 9]], [1, [1, 1]], [2, [2, 2]], [3, [3, 3]], [4, [4, 4]]]

clean_array[0]
  => [9, [9, 9]]

clean_array[0][1]
  => [9, 9]

clean_array[0][1].count
  => 2
```

to_aでくくってあげると配列形式になり、扱いやすくなります。

例えば、０番目の配列に入っている数をカウントしたり、なんてこともできます。

便利なのでぜひ使ってみてください〜
API GatewayのCORS許可に関するトラブルシュート

いろいろハマったので参考程度に。

# 現象

- API GatewayでCORSを許可したのに以下のようなエラーが出る

```
No 'Access-Control-Allow-Origin' header is present on the requested resource.
```

- 他のAPIだと発生しないのに特定のAPIで発生する
- curlで調べると正常に返却されている
- 上記のエラーが解決しても、次はCORBエラーと言われる

# 検証＆解決方法

## まずは簡単なAPIを作って検証してみる
Lambdaで素のAPIだけ作ってGETとPOSTで繋いでCORS許可させてみる。
設定もコードもデフォルトのままでよい。
これで成功したらとりあえずブラウザ側に問題はなさそう。

## APIをリソースから作り直してみる
これが意外と効くので、設定を保管しておくかメモっておくかして作り直すのも一つの手です。

## 設定をチェックする
以下、設定してあるメソッド（GET,OPTIONSなど）それぞれ全てチェックします。

### 統合レスポンス
まず統合レスポンスにAccess-Control-Allow-Originが設定されているか確認します。
私の場合、リソースを新たに作る時にCORS有効化にチェックを入れてリソースを作成し、その後メソッドを作ると上記が設定されておらず空になっていました。
逆にメソッドまで全て作成し、後からCORS有効化をすると自動で設定されていました。

<img width="904" alt="スクリーンショット 2019-10-16 16.29.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214400/2a4a7ab0-ede5-7aee-11b3-b93136ee93a1.png">

### メソッドレスポンス
上記同様です。
なおここが空だと、CORBエラーになりレスポンスの値が返りません。

<img width="905" alt="スクリーンショット 2019-10-16 16.29.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214400/552d2a29-d5b0-530d-07a7-e56c24fe0322.png">

以上です
input要素のrangeタイプの値を別の要素へ表示するサンプルコード

# 概要
- `<input>` 要素の `range` タイプの値を別の要素へ表示するサンプルコード
- Chromeで確認。IEは動かないと思われます

![range.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/53115/52b71ac1-a060-946e-e85d-53bcd30d465f.gif)

# コード

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <script type="text/javascript">
  window.onload = () => {
      // (1)イベントを設定
      for (var element of document.getElementsByClassName('range')) {
          element.addEventListener('input', (event) => {
              // (2)ソース要素のvalueを次（隣）の要素のinnerHTMLへセット
              event.srcElement.nextElementSibling.innerHTML = event.srcElement.value;
          });
      }
      // (3)初期表示するためにイベントを起こす
      for (var element of document.getElementsByClassName('range')) {
          element.dispatchEvent(new Event('input'));
      }
  }
  </script>
</head>
<body>
  <div>
    <label>range A</label>
    <input type="range" class="range" value="50"><span></span>
  </div>
  <div>
    <label>range B</label>
    <input type="range" class="range" value="50"><span></span>
  </div>
</body>
</html>
```

# 説明
## html部
- rangeタイプのinput要素を2つ配置しています
    - （「1つだけ対応する」と「2つ以上を対応する」とではアプローチが異なる場合がよくあります）
- input要素の次（隣）に値表示用のspan要素を配置しています
    - サンプルを単純にするため、位置で決め打ちにしています

## script部
### (1)イベントを設定
- rangeクラスの要素全てに `input` イベントリスナーを設定しています

### (2)値の表示
- (1)のイベント処理です
- srcElementはつまり `<input type='range' class='range'>` になります
- srcElementの値(value)を、srcElementの隣の要素、この場合は表示用のspan要素にセットしています

### (3)初期表示
- ページロード時、同じ処理を通して値を表示するため、`input` イベントを起こしています
    - 処理部分を切り出してcallのほうが良いかもしれません

# リンク
- [MDN \<input type="range">](https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input/range)
Deep Learningを学ぶ #2 〜多層パーセプトロンとXOR〜

# 最初に

本記事は以下の本から得た知見を自分用のメモも兼ねてまとめた記事となります。ただし本の内容をそのまま書き写ししているわけではなく、ある程度自身で調べたものや感想が混じっています。ご了承ください。

![f:id:rossamu:20190103000547p:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/r/rossamu/20190103/20190103000547.png) 
[ゼロから作るDeep Learning ―Pythonで学ぶディープラーニングの理論と実装](https://www.amazon.co.jp/dp/4873117585/ref=asc_df_48731175852560261/?tag=jpgo-22&creative=9303&creativeASIN=4873117585&linkCode=df0&hvadid=295686767484&hvpos=1o1&hvnetw=g&hvrand=656573567597747444&hvpone=&hvptwo=&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=1009283&hvtargid=pla-526224399321&th=1&psc=1)

今回はパーセプトロンを用いたXORゲートについて考えていきます。

1 : [Deep Learningを学ぶ #1 〜単純パーセプトロンと論理回路〜](https://qiita.com/4_mio_11/items/44bbd8c73b1f092bbe0c)

以降は「 [Enjoy Engineer Life](https://rossamu.hateblo.jp/) 」にて投稿していきます。

# XORゲート

**排他的論理和**と呼ばれる論理回路です。

| $X_1$ | $X_2$ | $Y$  |
| ----- | ----- | ---- |
| 0     | 0     | 0    |
| 1     | 0     | 1    |
| 0     | 1     | 1    |
| 1     | 1     | 0    |

これはパーセプトロンで実装することができません。

例えばANDやORを図として表してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/913ee2cd-5d68-0657-8e34-f2be7f1ce940.png)



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/38fdaf7d-3f9d-9e41-c74d-14db6c1f56ef.png)



次にXORの図を作成してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/88255475-bf17-3c13-7765-3c9e2ecbf42a.png)


今までのように直線で０と１を分けることができません。分けようと思った場合には、パーセプトロンでは表現ができない曲線（**非線形**）を描かなければなりません。

XORをパーセプトロンで表現するためには、パーセプトロンの「層を重ねる」必要があります。つまり、**「AND, NAND, ORゲートを組み合わせる」**ということになります。この辺は学校で「論理回路」や「デジタル回路」について学んだ時にやった覚えがあるかもしれません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/d9947528-dadc-e54b-32e4-565bc5e0ee9b.png)




| $X_1$ | $X_2$ | NAND | OR   | $Y$(AND) |
| ----- | ----- | ---- | ---- | -------- |
| 0     | 0     | 1    | 0    | 0        |
| 1     | 0     | 1    | 1    | 1        |
| 0     | 1     | 1    | 1    | 1        |
| 1     | 1     | 0    | 1    | 0        |



（実装例）

```python
 def XOR(x1,x2):
     nand_y = NAND(x1,x2)
     or_y = OR(x1,x2)
     xor_y = AND(nand_y,or_y)
     return xor_y
```



このように層（x1,x2→nand_y,or_y→xor_y）を重ねたパーセプトロンのことを**「多層パーセプトロン」**と言います。ニューロンによる表記を行うと以下のようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/c31b1af3-28f9-80cd-db26-1168d1945224.png)


多層パーセプトロンにすることで、より柔軟な表現が可能になります。多層パーセプトロンを用いることで（理論上は）コンピュータを再現することも可能です（ただし骨が折れるレベルの調整が必要とのこと）。

しかし、ここまでの知識だけでは、重みづけを手作業で行う必要があります。この必要性をなくすために適切な重みパラメータを自動学習する性質をもつ「ニューラルネットワーク」について、今後学んでいきます。



# 最後に

これで二章が終わりました。本の1/7が終わったというところです。これからどんどん難しくなっていくと思いますが、できるだけスピーディーに読了したいと思います。
【Python:データ操作自由自在】標準list,array,  numpy;ndarray,  Pandas;DataFrame

# Pythonを使ってデータ分析をするには、まずデータのshaping(形態変形）、その後のML,DLで使いやすい形に変形するのが重要な作業になりますねー
####という事で常套手段のまとめ。

## 何はなくても標準、list と　array





## いらない行・列はDropでカット！　Pandas常套手段；Drop







## Ref.
https://note.nkmk.me/python/
https://note.nkmk.me/python-list-array-numpy-ndarray/
https://note.nkmk.me/python-pandas-drop/
Rubymineのデバッグ時にcould not find a gem debase, ruby-debug-ideが発生するとき

Rubymine: ver.2019.2.3

Rubymineのデバッグをしようとてんとう虫ボタンを押したところ、
`debase, ruby-debug-ide`がインストールされていない、というポップアップが出てきました。

「Yes」をクリックしてインストール開始するも、
`could not find a gem debase-3.0-beta3.gem`
みたいなGem見つかりませんエラーがdebase, ruby-debug-ide両方出てしまいました。



# 解決策
<b>Rubymine上の</b>コンソールで下記コマンドを実行したところうまくいきました。

```
$ gem install --no-document /Applications/RubyMine.app/Contents/rb/gems/ruby-debug-ide-0.8.0.beta8.gem
$ gem install --no-document /Applications/RubyMine.app/Contents/rb/gems/debase-0.3.0.beta8.gem
```


それまで、Mac付属のターミナルでgem installや上記コマンドを実行しても
うまくいきませんでした。

Rubymine上のコンソールで実行しましょう。


＜参考＞
https://qiita.com/nashirox/items/a3d3d47730235c737b00
[mac] mysqlのdemonが起動しない


launchctlのマネージャとしてhomebrew-servicesを用いてmysqlのデーモンの起動を試みたが失敗した

```shell
$ brew services start mysql
# -> Error: mysql: /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/Formula/mysql.rb:168: syntax error, unexpected keyword_ensure, expecting keyword_end
```

以下によって解決

```shell
$ git -C "$(brew --repo)" fetch --tags
$ brew update --force
```

https://github.com/Homebrew/homebrew-core/issues/19957
ログインシェルをfishに変更後にgulpを動かそうとしたら、env: node: No such file or directory って怒られた。

また次もハマらないために自分用メモ～＼( 'ω')／

# 起きたこと
 
ログインシェルをzshからfishに変更後にgulpを動かそうとしたら

```
~/g/develop/works/ gulp
env: node: No such file or directory  
```                                                                                                                                                                     
って怒られた。

同階層に`node_modules`も`gulpfile`も存在するし、
npm周りは一切触ってないのになんでって思ってぐぐったら
パスが通ってない事が原因ぽい。

# 解決策

```
set -U fish_user_paths $HOME/.nodebrew/current/bin $fish_user_paths
```

これでpathが通る:clap:


## 参考
:tropical_fish: [fish tutorial](https://fishshell.com/docs/current/tutorial.html#tut_path)

fish shell めっちゃ 良い なんなの これ
って検索ワードに出てきたから、fishに移行したけど使いやすい！
zshに比べて起動が早いし、補完機能がつよつよだし、
使えないコマンドが赤くシンタックスハイライトされるのいい！
移行してまだ数日しかたってない最高:clap::clap::clap:
日本語プログラミング言語「なでしこ」触ってみた！

日本語でプログラミングができる「なでしこ」というプログラミング言語を触ってみました。
簡単にクジラを表示させるまでのチュートリアルをします。
#なでしことは
日本語プログラミング言語「なでしこ」とは、日本語を用いてプログラムを作ることが出来るプログラミング言語（インタプリタ）です。

敷居が低くこれからプログラミングを始めてみたいという人や、英単語が苦手という人でもプログラミングを体験できます。
詳しくは↓
https://nadesi.com/doc/about/more-info.htm

なでしこの前身はひまわりという名前でした。
#やってみた
####前提条件
動作環境：Windows Vista/7/8/8.1/10 に対応
####ダウンロード
なでしこのサイト->ダウンロード
[なでしこダウンロード](https://nadesi.com/top/index.php?%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89)
![なでしこ1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436285/df2d4f06-97c5-d214-7341-f8b01188de85.png)
コロッケと入力して.zipをダウンロード

ファイルの
SetupNako.exeをダブルクリック
![なでしこ2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436285/a8419969-0694-5a23-72e3-961904afae39.png)


デフォで進めます。その後デスクトップにアイコンができるのでそれを起動
![なでしこ3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436285/d68f6478-1968-d46e-c967-b21f68dcf02b.png)

エディタが開く
![なでしこ4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436285/42e14411-37ca-d383-9809-1d82b08dae9d.png)
nakopad.exeでもエディタ開きます。

[インストールガイド](https://nadesi.com/man/index.php?%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%82%AC%E3%82%A4%E3%83%89)
####実行

クジラを表示させてこんにちはと言わせます。
エディタに”クジラが「こんにちは」と言う”と書きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436285/6dc4b6da-44bb-0f16-8b7a-f6aba8f53d00.png)
エディタの上にある実行ボタンを押します。
![なでしこ5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436285/fa96385b-1d85-d069-4de4-d6af0d117ce9.png)

できましたね！
とりあえず画面に表示させるまでを行いました。

#感想
ちょっと遊ぶなら簡単にできます。
もちろんリファレンスも日本語なので調べやすいです。

なでしこは小学生などのプログラミング勉強にも役立ちそうですね。
プログラミングのとっかかりには良いかもです。
軽くて導入も簡単です。
今後ゲームや簡単なサイトでも作ろうかなと思います。

#参考資料
[公式サイト](https://nadesi.com/top/)
[コラム](https://news.mynavi.jp/series/nadeshiko)
Ubuntu18.04でのOpenVPNサーバ構築注意点

何度もOpenVPNサーバを構築することになりそうなので、自分用に注意点のまとめ。

# openssl.cnfのバージョンが違うよ！
make-cadirで生成されたディレクトリにOpenSSLの各バージョンごとの設定ファイルがあるので、そのディレクトリにシンボリックファイルを作成

```
$ ln -s openssl-1.0.0.cnf openssl.cnf
```

# explicit-exit-notifyに気をつけて
aptでopenvpnとeasy-rsaをインストールするとバージョンの差異の関係でexplicit-exit-notifyがあるとサーバが起動しなくなるらしい

# マスカレードとフォワードを忘れずに！
方法については参考URLのUbuntu16.04での構築記事を参照

# 参考URL
- [Ubuntu16.04 OpenVPN](https://qiita.com/noraworld/items/2fe6be489e1d93c748b8)
- [必要なパッケージ](https://qiita.com/MoriKen/items/7fe17fda8442adb599d9)
- [認証局の設定](https://qiita.com/MoriKen/items/50d226e8c6395487c0a6)
- [server.conf](https://qiita.com/MoriKen/items/75587fd862b3ce93e4eb)
- [explicit-exit-notifyの罠](https://it.hirokun.net/entry/centos7openvpn)
mysql : selectしかできないuserの作り方

特定tableでselectだけできるようにする

phpmyadminからうまくできなかったので、手で打った

```sql
-- 権限適当でuser作る
-- GRANT ALL PRIVILEGES ON *.* TO 'sato'@'%' IDENTIFIED BY 'password';

今回はここからcuiでやった

-- いったん全権限を消す。
REVOKE ALL PRIVILEGES,GRANT OPTION from 'sato'@'%'; 

-- table指定で select だけ許可
GRANT select  ON mydb.mytable TO  'sato'@'%'; 

-- phpmyadmin に historyを残せるように
GRANT select,delete, insert, update  ON phpmyadmin.* TO  'sato'@'%'; 
```

雑。
docker-composeでReact環境構築


## 概要
Dockerを使用した開発や学習することが多くなってきたため、React(create react app使用)学習用の環境をdocker-composeで構築しようと思い、その時の備忘になります。
Dockerはインストールしてある状態から進めます。

※↓はnodeバージョン更新版になってます(追記:20200614)
[docker-composeでreact環境構築(更新版)](https://qiita.com/kerochelo/items/055781400367ef210266)


## 環境
> Docker version 18.09.2
> docker-compose version 1.23.2

## 構築作業

### Dockerfile作成

```Dockerfile:Dockerfile
FROM node:8.16.0-alpine
WORKDIR /usr/src/app
```

### docker-compose.yml作成

```yaml:docker-compose.yml
version: '3'
services:
  web:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
     - ./:/usr/src/app
    command: sh -c "cd react-sample && yarn start"
    ports:
     - "3000:3000"
```

### イメージをビルド

```
$ docker-compose build
```

### React と create-react-app をインストール + アプリ作成

```
$ docker-compose run --rm web sh -c "npm install -g create-react-app && create-react-app react-sample"
```

↓作成ディレクトリ

```
- Dockerfile
- docker-compose.yml
- react-sample
	|- node_module
	|- public
	|- src
```

### 起動

```
$ docker-compose up -d
```

Dockerfileに記載したport番号(今回は"localhost:3000")にアクセスすると、「Reactファイルを編集してみよう！」的な画面になります。

止める場合は

```
$ docker-compose stop
```

でコンテナが停止します。


## 最後に
これで簡単な構築は完了です。Reactの学習をしたい方は[Reactチュートリアル](https://ja.reactjs.org/tutorial/tutorial.html)をやってみるといいかもしれません。

## 参考
- [Dockerfileリファレンス](http://docs.docker.jp/v1.12/engine/reference/builder.html)
- [Composeファイルリファレンス](http://docs.docker.jp/compose/compose-file.html)
- [Reactの開発環境をDockerで構築してみた](https://blog.web.nifty.com/engineer/2714)
Google Cloud DNS の「DNS転送」を使って GCP 外のネームサーバに DNS クエリを転送する

#はじめに

AWS - GCP 間を VPN で繋ぎ、マルチクラウドで色々なアプリケーションを運用していくと、どうしても避けて通れなくなるのが「名前解決」の問題です。

例えば、AWS 側にプライベートドメインを管理するネームサーバを置いている場合、GCP からもそのドメインに所属するサーバについてホスト名（FQDN）でアクセスさせたい場面もあるかと思います。
まだ稼働しているサービスが少ない場合は**力業**で対応することもできますが、数が多くなってくると徐々にフォローできなくなり破綻してしまいます。

2019年の初頭、Google Cloud DNS の新しい機能「**DNS 転送**」が発表されました（投稿時点ではまだベータ版）ので、それを使ってこの問題を解決してみます。


# 構成

以前投稿した「[AWSとGCP間をVPN接続してみた](https://qiita.com/nagase/items/df18e308e6fc98e11aaa)」をベース構成とします。
（AWS-GCP間が Cloud VPN で接続され、BGP によってルートテーブルを相互にアドバタイズしている）

また本投稿では DNS サーバは AWS EC2 上の **AD サーバ ２台**（10.2.0.101、10.2.0.102）により、プライベートドメイン **example.local** の名前解決ができる環境を想定しています。（下図参照）

以上の構成で GCP 側にある GCE VM インスタンスや GKE 上の Pod から送信された example.local 宛の DNS リクエストクエリを、dc1.example.local（または dc2.example.local）にゾーン転送し、名前解決できるように実装することを目標とします。

![Topology.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94476/3c984b8b-33c5-2639-95df-c6930634b9ad.png)

# 実装
## Cloud DNS に 転送ゾーンを登録

Cloud DNS に転送ゾーンを登録するには `gcloud beta dns managed-zones create` コマンドを実行します。
ポイントは `--visibility` に `private` を指定すること（**限定公開ゾーン**といいます。限定公開ゾーンでなければ転送ゾーンを作成できません）、`--forwarding-targets` に DNS リスエストクエリの転送先となる DNS サーバの IP アドレス を指定することです。

```bash
gcloud beta dns managed-zones create private-example-zone \
    --dns-name="example.local" \
    --description="Private example zone forwarding" \
    --visibility="private" \
    --networks="test-vpc" \
    --forwarding-targets="10.2.0.101,10.2.0.102"
```

## Cloud Router にカスタムルート アドバタイズを追加

公式の「[転送ゾーンの作成](https://cloud.google.com/dns/zones/#creating-forwarding-zones)」には、**要件**として次の記載があります。


> ネームサーバーに適用されるオンプレミス ネットワークのファイアウォール ルールで、35.199.192.0/19 からのパケットを許可します。
> （中略）
> VPC ネットワーク内の GCP VM から送信されたすべてのクエリは、35.199.192.0/19 でプロキシされます。

つまり GCE 内から送信された DNS リクエストクエリが Cloud DNS の転送ゾーンと一致した場合、`35.199.192.0/19` が GCP VMインスタンスの代理で、オンプレミスネームサーバにリクエストクエリパケットを転送するようです。

最初にこの記載を見たとき、「んん？ 35.199.192.0/19 に属する DNS Proxy が、インターネットを介して転送先DNSサーバにリクエストクエリを送信するのか？」と思い込んでいましたが（どう見てもグローバル IP アドレスなので）、どうやらそうでは無いようです。

よくよく見ると要件の中ほどには、次のような記載がありました。

>VPC ネットワークからの DNS クエリに対する応答は 35.199.192.0/19 に返す必要がありますが、インターネット経由で送信することはできません。静的ルーティングを使用する Cloud VPN トンネルの場合は、オンプレミス ネットワーク内に、宛先が 35.199.192.0/19 でネクストホップが VPN トンネルのルートを手動で作成する必要があります。

つまり、`35.199.192.0/19` に属する DNS Proxy と転送先DNSサーバ（今回はAWS EC2 側）間の通信は、Cloud VPN のトンネル内を通せば良い、ということです。 

今回の構成では AWS - GCP 間のルーティングは BGP を利用しているので、GCP から AWS に対し `35.199.192.0/19` のルートを、 **Cloud Router** からアドバタイズすることにします。

次のコマンドで Cloud Router にカスタムルート アドバタイズを追加します。


```bash
gcloud compute routers update vpn-router \
    --advertisement-mode custom \
    --set-advertisement-groups all_subnets \
    --set-advertisement-ranges 35.199.192.0/19
```

ポイントは、`--advertisement-mode` に `custom` を指定すること（しないと、カスタムルートを追加することができません）、`--set-advertisement-groups all_subnets` オプションを追加すること（Cloud Router にアタッチされている VPC に属するサブネットへのルートもアドバタイズ）です。

## 転送先 DNS サーバのファイアウォールルールを変更

リクエストクエリの転送先となる（AWS EC2上の）AD サーバのセキュリティポリシーに対し、送信元 IP アドレス `35.199.192.0/19`、UDP 53 番ポートを許可するよう設定を変更します。（方法は割愛します）

# 確認

GCE上の VM インスタンスや GKE 上の Pod から、`xxx.example.local` の名前解決ができるか確認します。（`dig`、`nslookup`、`ping` 等）
[ Android Studio ] 画面変更 

今回はボタンクリックによる画面変更機能を実装してみた。
以下のサイトが特に参考になった。
https://akira-watson.com/android/activity-1.html

##ファイル
MainActivity.java
activity_main.xml(元の画面)
FirstFragment.xml(変更先の画面)
を用意。


##メソッド
onCreate()　→　setScreenMain()
setScreenMain()　→　setScreenFirst()
setScreenFirst()　→　setScreenMain()
を呼び出せるように実装。

##サンプル
以下がサンプルプログラムである。

MainActivity.java

~~~
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        setScreenMain();
    }

    private void setScreenMain(){
        setContentView(R.layout.activity_main);

        Button button = findViewById(R.id.button);

        button.setOnClickListener((View view1)->{
            setScreenFirst();
        });
    }

    private void setScreenFirst(){
        setContentView(R.layout.fragment_first);

        Button returnButton = findViewById(R.id.returnButton);

        returnButton.setOnClickListener((View view1)->{
            setScreenMain();
        });
    }
}
~~~

activity_main.xlm

~~~
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="161dp"
        android:layout_marginTop="386dp"
        android:text="Button"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"></Button>

</androidx.constraintlayout.widget.ConstraintLayout>
~~~

FirstFragment.xml

~~~
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".FirstFragment">

    <Button
        android:id="@+id/returnButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="164dp"
        android:layout_marginTop="380dp"
        android:text="returnButton"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"></Button>

</androidx.constraintlayout.widget.ConstraintLayout>
~~~

##結果
以下の2画面をボタンで行き来できた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506451/afdfdfe4-59e1-7dc1-6fea-35d812a10ce1.png)

##まとめ
画面変更を行ってみたが、画面遷移にはたどり着けなかった。
修正ができ次第、画面遷移の記事を投稿する予定である。
Bash と Zsh で共通の profile を使う

Mac を Catalina にアップデートしたところ、Zsh を使うように勧められたので Zsh に切り替えました。 　
[切り替え方法](https://support.apple.com/ja-jp/HT208050)

Bash と Zsh で環境変数やパスの設定を共通にしたかったので、`.my_rofile` ファイルを作成し、`.bash_profile` と .zprofile から呼び出すようにしました。

`.bashrc` -> `.zshrc`
`.bash_profile` -> `.zprofile`

```bash:.bash_profile
source ~/.my_profile
```

```bash:.zprofile
source ~/.my_profile
```