OmniAICreator/Qiita-1.07M huggingface dataset:
【React④】Props

#Propsとは
* Propsとはコンポネントの属性、あるデータの属性で参照できるもののこと
* {}で囲って渡していく
    * 受けわたせるデータ型は文字列、数値、真偽、配列、オブジェクト、変数などなんでも
    * 文字列は{}なしでもok
* 例えばUserのComponentに対してnameというPropsを与えることができる

###keyの指定
ReactではバーチャルDOMでどのDOMが変更されたかを管理し、変更点のみ実際のDOMに反映している。`key={index}`のようにそれぞれのDOMにkeyを与えてあげることで必要最低限なDOM範囲を管理している


```React
//エラー文
array,iterator should have a unique "key" prop.
```


```React
import React from 'react';

const App = () =>{
    const profiles = [
        { name:"Taro", age:10 }, 
        { name:"Hanako", age: 5 },
        { name:"Noname" }
    ]
  
    return (
      <div>
      {
        profiles.map((profile,index) => {
          return <User name={profile.name} age={profile.age} key={index}/>
        })
      }
      </div>
    )
  }
  
  //外からの入力を参照して画面に出力することができる
  const User = (props) =>{
    return <div>Hi!, I am {props.name},and {props.age} years old! </div>
  }
  
  //ageが入力されなかったときにage1がデフォルト値として1が渡される
  User.defaultProps ={
    age:1 
  }
```
#Propsでデータを受け渡す

親コンポーネントから子コンポーネントにPropsデータを受け渡す。

```React:Blog.jsx
//親コンポーネント
import React from 'React';
import Article from "./Article";

//title={"React"} が子コンポーネントに受け渡される
class Blog extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        return(
            <>
            <Article title={"React"} />  
            </>
        )
    }
}

export default Blog
```

```React:Article.jsx
import React from 'React';

const Article = (props) =>{
    return(
        <div>
            <h2>{props.title}</h2>
        </div>
    )
};

export default Article
```

#いろんな型のデータを渡す
子コンポーネントに以下を渡します
`title={"React"}` 、`order={3}` 、`isPublished={true}` 、`author={"authorName"}`

 
```React:Blog.jsx
import React from 'React';
import Article from "./Article";

class Blog extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        const authorName = "Facebook";
        return(
            <>
              <Article 
                title={"React"} 
                order={3} 
                isPublished={true} 
                author={"authorName"} 
              />  
            </>
        )
    }
}
export default Blog
```

```React:Article.jsx
import React from 'React';

const Article = (props) =>{
    let publishState ="";
    if (props.isPublished){
        publishState = "公開"
    }else{
        publishState = "非公開"
    } 
    return(
        <div>
            <h2>{props.title}</p>
            <p>順番：{props.order}</p>
            <p>著者：{props.author}</p>
            <p>{publishState}</p>
        </div>
    )
};

export default Article
```

#再利用する

```React:Blog.jsx
import React from 'React';
import Article from "./Article";

class Blog extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        const authorName = "Facebook";
        return(
            <>
              <Article title={"React"} />  
              <Article title={"JSX"} />  
              <Article title={"Component"} />  
              <Article title={"Props"} />  
            </>
        )
    }
}
export default Blog
```
【AWS】AWS Deep Learning AMIのJupyter Notebookを自動起動する方法

##初めに
AWSのインスタンスを起動するたびにコマンドからJupyter Notebookを起動させるのが面倒だったので、自動起動させるように設定したかった

##前提
1. AWS Deep Learning AMIを利用してインスタンスを作成してあること
2. OSがUbuntuであること
3. [こちら](https://docs.aws.amazon.com/ja_jp/dlami/latest/devguide/setup-jupyter.html)の設定が終わっていること

## 概要
1. systemdのサービスにパスを渡すファイルを作成する
2. systemdにサービスを登録する

以上！

## 手順
###1. systemdのサービスにパスを渡すファイルを作成する
[こちら](https://qiita.com/FPC_COMMUNITY/items/1f6711732a3db1a4817c)が参考になりました。

```
echo $PATH
```

で表示されたパスを全てコピーする

```
sudo vi /etc/sysconfig/ubuntu
```

ここに表示されたパスを記載する

###2. ユニット定義ファイル作成
細かい設定はよく分かりません

```
sudo vim /lib/systemd/system/hogehoge.service
```

```/lib/systemd/system/hogehoge.service
[Unit]
Description=Jupyter Notebook

[Service]
Type=simple
EnvironmentFile=/etc/sysconfig/ubuntu  # 1. で作成したファイル -> これがないと「conda: command not found」みたいに出てくる
ExecStart=/home/ubuntu/anaconda3/bin/jupyter-notebook --config=/home/ubuntu/.jupyter/jupyter_notebook_config.py --certfile=/home/ubuntu/ssl/mycert.pem --keyfile /home/ubuntu/ssl/mykey.key
# オプションの「config」「certfile」「keyfile」はAWSのリファレンス通りの場所なので、場所を変更している場合は書き換える必要がある
User=ubuntu
Group=ubuntu

[Install]
WantedBy=multi-user.target
```

###3. サービスに登録
```
sudo systemctl enable hogehoge.service
sudo systemctl start hogehoge.service
```

上記でサービスに登録ができるので、念のためステータスを確認しておく

```
sudo systemctl status hogehoge.service
```
> Active: active (running) 

となっていれば正常に動作しており

> Found new kernels in environments: conda_python3, conda_python2, conda_pytorch_p36, conda_pytorch_p27, ...

と表示されていればcondaコマンドが問題なくサービスに登録できている(手順1のようにファイルを作成しないと、ここでエラーが表示される)

###4. Jupyter Notebookにアクセス
ローカルホストのブラウザから

> *https:**//AWSインスタンスのipアドレス:8888*

にアクセスして画面が表示されれば後は通常通り使用することができる

###5. 補足
> この接続ではプライバシーが保護されません

と出るのですが、それを回避したい場合は[こちら](https://docs.aws.amazon.com/ja_jp/dlami/latest/devguide/setup-jupyter-config.html)が参考になると思います。
なでしこの研究 その4

#概要

なでしこをplunkerでホスティングしてみた。
再帰、やってみた。
コッホ曲線、やってみた。

#サンプルコード

```
●koch(nを)
　もし(n <= 0)ならば
　　2だけカメ進む
　　戻る
　ここまで
　n-1をkoch
　60だけカメ左回転
　n-1をkoch
　120だけカメ右回転
　n-1をkoch
　60だけカメ左回転
　n-1をkoch
ここまで

カメ作成。
[0,300]にカメ起点移動。 
90だけカメ右回転    
1にカメペンサイズ設定
青色にカメペン色設定
5をkoch

```

#成果物

https://embed.plnkr.co/plunk/gmpUYTxDLHrvGEBs


以上。
スクロールダウンしたときにヌルッとでてくるヘッダーの作り方

##はじめに
Web制作をしていくなかで、スクロールダウンをしたときにヘッダーとは異なるヘッダーを常時だしておきたいときに、こちらの方法で実装しました。

備忘録として、メモを残しておきます。

#コードの書きかた
class名はjsが適用されるときはプリフィックスとして、jsを付けています。

```html:index.html
<div id="js-header">
 <div class="js-header__menu">
  <ul class="js-header__list">
          <li><a href="#">メニューA</a></li>
          <li><a href="#">メニューB</a></li>
          <li><a href="#">メニューC</a></li>
          <li><a href="#">メニューD</a></li>
          <li><a href="#">メニューE</a></li>
        </ul>
      </div>
  </div>
```

```css:style.css
#js-header {
  line-height: 66px;
  top: -66px; /* 上に隠す高さ */
  left: 0;
  width: 100%;
  margin: 0 auto;
  overflow: scroll;
  position: fixed;
  opacity: 0;
  z-index: 1000;
}
```

```javascript:script.js

  jQuery(function () {
    "use strict";
    var flag = "view";

    $(window).on("scroll", function () {      
      if ($(this).scrollTop() > 200) {
        if (flag === "view") {
          $("#js-header").stop().css({opacity: '1.0'}).animate({
            top: 0
          }, 500);
          flag = "hide";
        }

      } else {
        if (flag === "hide") {
          $("#js-header").stop().animate({top:"-66px",opacity: 0}, 500);
          flag = "view";
        }
      }
    });
  });
```

どっかからひろってきたコードです。
理解はできていないくても普通に使えたんですが、せっかくなので1行ずつみていきますか。



```javascript
  jQuery(function () {
    "use strict";
    var flag = "view";
```
falg変数のデフォルト値として「view」を指定しています。変数flagを使わないと、ページをスクロールしていると常に同じ処理が繰り返されてしまうようです。

```javascript

    $(window).on("scroll", function () {      
      if ($(this).scrollTop() > 200) {
        if (flag === "view") {
          $("#js-header").stop().css({opacity: '1.0'}).animate({
            top: 0
          }, 500);
         // flag変数の値を「hide」に変更
          flag = "hide";
        }
```

scrollが２００に到達したら#js-headerにopacity:1.0を与える指示をしています。
もともとのCSSには、opacity:0;を指定しておいて、スクロールしたときにopacity:1.0にすることで表示させているんですね。
ちなみにこの200の数字の単位は、pxなはず。

top:0というのはcssでtop:-66pxで上に隠していたのを下におろして表示させるための指示です。
書いていて思いましたが、opacityでも非表示にして、高さでも隠してなぜダブルでやっているんだろうか、、。

また、500(0.5秒)という数字を変えると表示される速度が変わります。好みに合わせてください。

```javascript

      } else {
        if (flag === "hide") {
          $("#js-header").stop().animate({top:"-66px",opacity: 0}, 500);
          flag = "view";
        }
      }
```
今はhideのフラッグがたっています。
こちらでは、スクロールアップしていったときに通常のヘッダーの表示に切り替える指示をだしています。
※ヌルッとでてきたヘッダーを隠す指示

同様に、top:-66pxとopacity:0を500(0.5秒)で行っています。
そして、flagをviewに戻しています。

#まとめ
今までコピペで対応してきたんですが、応用力を高めるためにコピペ内容を自分なりにまとめてみました。
非常に勉強になったので今後も続けていきます。

たぶん。



■参考にした記事
マークダウンの書き方
https://qiita.com/shizuma/items/8616bbe3ebe8ab0b6ca1

ヘッダーの作成方法
https://naughties.net/2018/02/05/scroll-fixed-header/
https://mae.chab.in/archives/2699
なでしこの研究 その3

#概要

なでしこをplunkerでホスティングしてみた。
zundoko、やってみた。

#サンプルコード


```
nは0
wは0
(wは0)の間
　もし、(2の乱数)が0ならば
　　nは(n+1)
　　「ズン」と表示
　違えば
　　「ドコ」と表示
　　nは0
　ここまで
　もし、nが4ならば
　　「ドコ　キ・ヨ・シ！」と表示
　　wは1
　ここまで
ここまで

```

#成果物

https://embed.plnkr.co/plunk/zHehmGTMcMU5wQO1


以上。
なでしこの研究 その2


#概要

なでしこをplunkerでホスティングしてみた。
fizzbuzz、やってみた。

#サンプルコード


```
iを１から99まで繰り返す
　ｆは0
　もし、i％15＝0ならば
　　「fizzbuzz」と表示
　　ｆは1
　ここまで    
　もし、i％3＝0 && f=0ならば
　　「fizz」と表示
　　ｆは1 
　ここまで    
　もし、i％5＝0 && f=0ならば
　　「buzz」と表示
　　ｆは1
　ここまで    
　もし、ｆ＝0ならば
　　iを表示
　ここまで
ここまで
```

#成果物

https://embed.plnkr.co/plunk/k9eFqJyL5Ufu1YGU

以上。
rpm yum wget　configure

rpm -Uvh インストールのみ　⇦　wgetやcurlでダウンロードしてきたrpmパッケージ
　単体のみ

yum ダウンロードしてインストール　
　依存関係全て


https://www.youtube.com/watch?v=UVLTU-62uZ4&feature=youtu.be
11.18秒


wgetやcurlでダウンロードしてきた↓

```shell:qiita.sh
% tar zxfv mecab-X.X.tar.gz
 % cd mecab-X.X
 % ./configure 
 % make
 % make check
 % su
 # make install
```

https://www.atmarkit.co.jp/ait/articles/0103/09/news002_2.html
Goでbit全探索

Donutsプロコンチャレンジ
B - Tokyo 7th シスターズ
https://atcoder.jp/contests/donuts-2015/tasks/donuts_2015_2

```Go:
package main
import(
  "fmt"
  "bufio"
  "os"
  "strconv"
  "strings"
  "go/types"
  "go/token"
)
var rdr=bufio.NewReaderSize(os.Stdin,10000000)
func readLine()string{
  l,_,_:=rdr.ReadLine()
  return string(l)
}
func readInts()[]int{
  s:=strings.Split(readLine()," ")
  res:=[]int{}
  for i:=0;i<len(s);i++{
    i,_:=strconv.Atoi(s[i])
    res=append(res,i)
  }
  return res
}
func chmax(x,y int)int{if x>=y{return x}else{return y}}
func contains(x int,sl []int)bool{
  res:=false
  for i:=0;i<len(sl);i++{
    if sl[i]==x{
      res=true
      break
    }
  }
  return res
}
func main(){
  tmp:=readInts()
  n,m:=tmp[0],tmp[1]
  A:=readInts()
  B:=[]int{}
  I:=[][]int{}
  for i:=0;i<m;i++{
    tmp:=readInts()
    B=append(B,tmp[0])
    I=append(I,tmp[2:])
    for j:=0;j<tmp[1];j++{
      I[i][j]--
    }
  }
  //fmt.Println(n,A)
  //fmt.Println(B)
  //fmt.Println(I)
  ans:=0
  for bits:=0;bits<(1<<uint64(n));bits++{
    score:=0
    combo:=[]int{}
    for i:=0;i<n;i++{
      if (bits>>uint64(i))&1==1{
        score+=A[i] //本人の得点
        combo=append(combo,i)
      }
    }
    if len(combo)>9{
      continue
    }
    cnt:=0
    //bonus:=0
    for i:=0;i<m;i++{
      cnt=0
      for j:=0;j<len(combo);j++{
        if contains(combo[j],I[i]){
          cnt++
        }
      }
      if cnt>=3{
        score+=B[i]
        //bonus+=B[i]
      }
    }
    //if score==6100{fmt.Println("score",score,"combo",combo,"cnt",cnt,"B[i]",bonus)}
    ans=chmax(ans,score)
  }
  fmt.Println(ans)
}
```
【Python】iterdir()など使用時に出る[Errno 20] Not a directory: '***/.DS_Store'

Pythonでiterdir()などを使うと、タイトルのようなエラーが出てきます。
Mac独自の.DS_Storeという隠しファイルのせいで、関数が実行できない時出てきます。
対処としては、.DS_Storeを消せば良いだけです。

###そもそも.DS_Storeとは
>.DS_Store は、Finderがフォルダの設定を記録するためのファイルです。
[参考サイト](https://beadored.com/ds_store-asepsis/#DS_Store)

###対処
ファインダーでもコマンドラインでもいいので消します。

コマンドラインの場合、
邪魔な.DS_Storeが入っているフォルダに移動し

```
find . -name ".DS_Store" -delete
```

で消します。
[参考サイト](https://stackoverflow.com/questions/45093911/oserror-errno-20-not-a-directory-ds-store)

終了です。
Windowsドメイン環境で使うZoomセットアップ

ユーザー環境を作りこんでプロファイルをばっちりにしても、Zoomの設定がコピーされなくて泣いた。そして調べた。

##分かりにくいんだよ、Zoom
Mass Installation and Configuration for Windows
https://support.zoom.us/hc/en-us/articles/201362163-Mass-Installation-and-Configuration-for-Windows

やっと流れ着いたWebページでいろいろ知る。

##インストール
普通のヤツもIT管理者向けも同じノリで使える。
あらかじめアンインストールしてから実行したほうがわかりやすかった。

###基本形
msiファイルがある場所でコマンドを実行するとインストールされる。

```
msiexec /package ZoomInstallerFull.msi /lex zoommsi.log
```

###制限とパラメータ
「ZConfig」で指定するとパラメータを変更したうえで、変更を禁止にできる。
「ZRecommend」で指定するパラメータを変更したうえで、変更を許可できる。
規定値だけ変更したいなら後者で指定すればOk

###文法例

```
msiexec /i ZoomInstallerFull.msi  ZConfig="nogoogle=1;nofacebook=1," ZRecommend="AudioAutoAdjust=1" 
```

###パラメータ

Google loginをenableにしたいなら「0」にする。

| Description | Default | MSI option and value |
|:-:|:-:|:-:|
| Disable Google login option  | Disabled  | nogoogle, 1  |

##自分がやりたいこと
「初期値は指定するけど、変更はご自由に」なのでZRecommendを使う。

Zoom＞設定＞ビデオ
　HDを有効：ON
　マイビデオをミラーリング：OFF
Zoom＞設定＞オーディオ
　マイク「自動で音量を調整」：OFF
　ミーティング接続時に、自動的にコンピューターでオーディオに参加：ON

```
msiexec /package ZoomInstallerFull.msi /norestart /lex msi.log ZRecommend="Use720pByDefault=1;EnableMirrorEffect=0;AudioAutoAdjust=0;AutoJoinVOIP=1"
```

英語から日本語メニューに該当するものを探すのが大変だった。
macOSにVirtualBoxをインストールした時の話

# はじめに
インフラの知識不足を痛感しており、Linuxを触れる環境を作るために手持ちのMacBookAirにVirtualBoxをインストールしたのでその手順を残してきます。

# 環境
macOS 10.15.7 Catalina
VirtualBox 6.1.14

# VirtualBoxのダウンロード
下記URLからダウンロードページへアクセスする
https://www.virtualbox.org/wiki/Downloads

自分の環境に合わせたインストーラーをダウンロードする
私はmacOSなので「OS X hosts」を選択
![スクリーンショット 2020-10-20 8.56.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90440/e41910ac-6400-901a-0e91-da58e25f1eb9.png)

# VirtualBoxのインストール
ダウンロードしたインストーラーをダブルクリックする
![スクリーンショット 2020-10-20 8.58.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90440/dafe9102-cd28-2efe-5e50-846df7c5002a.png)

Double click on this icon（このアインコンをダブルクリック）の説明通りに「VirtualBox.pkg」をダブルクリックする

「続ける」ボタンを押下
![スクリーンショット 2020-10-20 8.59.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90440/99c9bc9f-5cc3-bf1e-c98e-879c575a600c.png)

「インストール」ボタンを押下
パスワード入力を求められたらパスワードを入力する
![スクリーンショット 2020-10-20 8.59.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90440/6938560c-6350-86cd-6af0-3ded693b82b9.png)

...し...しっ...失敗だと!?
![スクリーンショット 2020-10-20 9.01.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90440/29478457-283d-6f6b-aec4-34b24a495c19.png)

システム環境設定 > セキュリティとプライバシー > 一般タブを選択
左下の「変更するにはカギをクリックします。」を押下してパスワードを入力
開発元"Oracle Ameria,Inc."の...(省略)の許可ボタンを押下
![スクリーンショット 2020-10-20 9.03.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90440/47256a6f-329c-7b3e-e028-7eb2050ceed4.png)

これで読み込みブロックが解除されました
![スクリーンショット 2020-10-20 9.04.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90440/f75cdf96-877d-c91d-58cf-e97cad12564d.png)

もう一度「VirtualBox.pkg」をダブルクリックしてインストールを進めると正常に完了します
![スクリーンショット 2020-10-20 9.06.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90440/ddc3a163-e645-a071-e1b8-9751b96779bc.png)

アプリケーション > VirtualBox.appをダブルクリックするとVirtualBoxが起動します
![スクリーンショット 2020-10-20 9.08.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90440/e9a8153b-bce7-2208-98c3-df1d3aad3cae.png)
react-native-track-playerのiOSのプレイヤーで一時停止が効かない

capabilitiesの設定が必要です！

![A9228270-254F-4BAD-89CA-31FA9651D106.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82779/74780f44-b867-d23f-fc59-fb41c05931ae.png)


```js
await TrackPlayer.updateOptions({
    stopWithApp: true,
    capabilities: [
        TrackPlayer.CAPABILITY_PLAY,
        TrackPlayer.CAPABILITY_PAUSE,
        TrackPlayer.CAPABILITY_SKIP_TO_NEXT,
        TrackPlayer.CAPABILITY_SKIP_TO_PREVIOUS,
        TrackPlayer.CAPABILITY_STOP
    ],
    compactCapabilities: [
        TrackPlayer.CAPABILITY_PLAY,
        TrackPlayer.CAPABILITY_PAUSE
    ]
})
```

example動かして気づいた・・・


## 参考文献

https://github.com/react-native-kit/react-native-track-player/blob/dev/example/react/screens/PlaylistScreen.js#L18-L31
cliでs3を操作してみる(mac)

cliでs3を操作(バケットの作成やアップロード、ダウンロードなど)できるように設定をしていくつか実行してみます。

#s3とは
s3とはamazon web serviceが提供してくれるオンラインストレージである。
dropboxに似ているものです。

#前提
* Homebrewをインストールしていること　→　[こちらを参考にしました](https://qiita.com/zaburo/items/29fe23c1ceb6056109fd)
* awsのアカウントを作成していること


#まず、awscliをインストールする

    $ brew install awscli

を実行することでcliからawsを操作できるようになります。

#次に、awsに接続する

    $ aws configure
    AWS Access Key ID [None]: 'アクセスキー'
    AWS Secret Access Key [None]: 'シークレットキー'
    Default region name [None]: '設定したregion(東京だと"ap-northeast-1")' 
    Default output format [None]: json

とすることでawsへの接続ができるようになります。

ここまできたらcliでs３を操作できるようになります。いくつかやってみます。
#いくつか操作をしてみよう
###バケットを作る
s3ではバケットという大元を作らないといけません。こちらをcliで作ってみます。

    $ aws s3 mb s3://(バケット名)

とすることでバケットを作ることができます。やってみると

    $ aws s3 mb s3://trainingtomosuke
    make_bucket: trainingtomosuke

となり、`trainingtomosuke`というバケットができました。

###アップロードをする
バケットに以下のテキストをアップロードしたいとする。

    'test.txt'
    test,test,test,test,test


このとき、このファイルがあるところのディレクトリに移って以下を実行します。

    $ aws s3 cp (アップロードしたいファイル) s3://(バケット名)

では、先ほど作ったバケットに`test.txt`をアップロードしたいと思います。

    $ aws s3 cp test.txt s3://trainingtomosuke
    upload: ./test.txt to s3://trainingtomosuke/test.txt

となり、アップロードできました。
確認のために`aws s3 ls s3://trainingtomosuke/test.txt`で見てみると

    $ aws s3 ls s3://trainingtomosuke
    2020-10-19 20:39:59         29 test.txt

と表示されており確かに、アップロードができています。

#ダウンロードしてみる

    $ aws s3 cp (アップロードしたいファイル) s3://(バケット名)

のところを

    $ aws s3 cp s3://(バケット名)/(ダウンロードしたいファイルのパス) (ダウンロードしたいディレクトリ)

にするとダウンロードできます。大体、わかってきたと思いますが`aws s3`と頭につけて実行すればs3の操作ができます。

    $ aws s3 cp s3://trainingtomosuke/test.txt ./
    download: s3://trainingtomosuke/test.txt to ./test.txt

となってダウンロードできました。


#まとめ
`aws s3 [options] [ファイルまたはバケット] [ファイルまたはバケット]`でs3の基本的な操作ができます。
皆さんも練習がてらにcliを触ってみてください。


#参考文献
[AWS CLIでS3を操作するコマンド一覧](https://qiita.com/uhooi/items/48ef6ef2b34162988295)
[AWS-CLIの初期設定のメモ](https://qiita.com/reflet/items/e4225435fe692663b705)
AndroidStudioでブランチ切り替えた時に起こった謎のエラー

# 経緯
AndroidStudioでのアプリ開発時、別ブランチのアプリをビルドする際に下記のエラーが発生しました

「__*Entry name 'res/interpolator/btn_checkbox_checked_mtrl_animation_interpolator_0.xml' collided*__」

探しても上記のファイルはどこにも見当たらず

# 結果
原因の詳細は分からなかったが、以前ビルドしたapkとの衝突が起きているようだったので、それらを削除してあげることで解消できました

Variantsによってフォルダは異なりますが、候補となるのは下記のフォルダと思われます

- projectFolder\build
- projectFolder\debug
- projectFolder\release
- projectFolder\app\build
- projectFolder\app\build\debug
- projectFolder\app\build\release

これらの中からapkが入っているフォルダを全て削除することでビルドすることができました

エラーの文言は人によって微妙に異なるかもしれませんが、似たようなエラーが出た方は参考にしてください

参考したサイトは[こちら](https://stackoverflow.com/questions/60406047/getting-error-says-entry-name-res-layout-test-toolbar-xml-collided-while-c)です
【Python】 指定した期間の日時リスト作成

#やりたいこと
2020年10月29日 05:00から2020年11月1日 00:00の期間で6時間間隔のリストを作成したい

#pythonコード
```python
from datetime import datetime, timedelta

def perdate(start, end, delta):
    current = start
    while current < end:
     yield current
     current += delta

for result in perdate(datetime(2020, 10, 29, 5,0,0), datetime(2020, 11, 1, 0,0,0), timedelta(hours=6)):
    print (result)
```

#実行結果
```python
2020-10-29 05:00:00
2020-10-29 11:00:00
2020-10-29 17:00:00
2020-10-29 23:00:00
2020-10-30 05:00:00
2020-10-30 11:00:00
2020-10-30 17:00:00
2020-10-30 23:00:00
2020-10-31 05:00:00
2020-10-31 11:00:00
2020-10-31 17:00:00
2020-10-31 23:00:00
```

#参考記事
- [datetime/timedelta](https://www.sejuku.net/blog/23606)
- [yield](https://techacademy.jp/magazine/15824)
Carbon で1週間の日付と曜日を取得する

PHPのCarbonで、日付と曜日（日本語）のリストを取得する方法をシェアします。

### 実行環境

- `Laravel Framework 6.18.23`
- `"nesbot/carbon": "2.0"`

### 取得したい結果

```
array: [
    0 => "10/18 (日)"
    1 => "10/19 (月)"
    2 => "10/20 (火)"
    3 => "10/21 (水)"
    4 => "10/22 (木)"
    5 => "10/23 (金)"
    6 => "10/24 (土)"
]
```

### ソースコード

Laravelの `config/app.php` で `'locale' => 'ja'` の設定しておく。


```php
$numOfDays = 7; //日付を取得する日数

$dt = new Carbon();
$format = 'MM/DD (ddd)';

$week[0] = $dt->today()->isoFormat($format);

//Carbonのインスタンスが上書きされないようにcopy()して日付を加算
for ($i=1; $i < $numOfDays ; $i++) {
  $week[$i] = $dt->copy()->addDay($i)->isoFormat($format);
}

dump($week);

```

### 参考

https://carbon.nesbot.com/docs/
https://uiuifree.com/blog/develop/php-carbon-ja-weekday/
JuliaでNumPyのadd.atを再現してみる

タイトルそのまま。
# 再現したいNumPyのコード
NumPyではin-placeな変更である。

```python:Python(NumPy)

>>> A = np.ones((3,3))
>>> A
array([[1., 1., 1.],
       [1., 1., 1.],
       [1., 1., 1.]])
>>> B = np.array([[1, 1, 1], [2, 2, 2]])
>>> B
array([[1, 1, 1],
       [2, 2, 2]])
>>> np.add.at(A, [0, 2], B)
>>> A
array([[2., 2., 2.],
       [1., 1., 1.],
       [3., 3., 3.]])
```
# Juliaのコード
`+=`演算子に`.`演算子を付加して`.+=`とし，ブロードキャストを行っていることに注意。
`+=`はブロードキャストを行わず，in-placeな変更ではない。
しかし，`.+=`では（当然）ブロードキャストを行うが，**in-placeな変更である**[^1]。

[^1]: http://web.eecs.umich.edu/~fessler/course/598/demo/pass-by-sharing.html

```julia:Julia

julia> A = ones(3,3)
3×3 Array{Float64,2}:
 1.0  1.0  1.0
 1.0  1.0  1.0
 1.0  1.0  1.0

julia> B = [1. 1. 1.; 2. 2. 2.]
2×3 Array{Float64,2}:
 1.0  1.0  1.0
 2.0  2.0  2.0

julia> selectdim(A, 1, [1, 3]) .+= B
2×3 view(::Array{Float64,2}, [1, 3], :) with eltype Float64:
 2.0  2.0  2.0
 3.0  3.0  3.0

julia> A
3×3 Array{Float64,2}:
 2.0  2.0  2.0
 1.0  1.0  1.0
 3.0  3.0  3.0
```
# Sources
[numpy.ufunc.at — NumPy v1.19 Manual](https://numpy.org/doc/stable/reference/generated/numpy.ufunc.at.html)
[Arrays · The Julia Language](https://docs.julialang.org/en/v1/base/arrays/#Base.selectdim)
[Multi-dimensional Arrays · The Julia Language](https://docs.julialang.org/en/v1/manual/arrays/#Broadcasting)
[Mathematical Operations and Elementary Functions · The Julia Language](https://docs.julialang.org/en/v1/manual/mathematical-operations/#man-dot-operators)
mindの研究 その19

#概要

mindが謎なので調べてみた。
vistaに入れた。
atcoder、やってみた。

#文字列内の、'1' の個数をカウントする


```
メインとは
　文字列１は　文字列
　数１は　変数
　数２は　変数
　数２に　０を　入れ
　文字列入力し　文字列１に　入れ
　ここから
　　文字列１から　一文字切り出し　数１に　入れ
　　もし　数１が　'1'に　等しい　ならば
　　　数２に　１を　加え　数２に　入れる
　　つぎに
　　もし　数１が　０に　等しい　ならば
　　　打ち切り
　　つぎに
　繰り返し
　数２を　数値表示する


```

以上。
【React③】Component

#Componentとは

ComponentはUIを作成するためにあり、**見た目(View)**と**機能(Controller)**で成り立っている。
webの構造はComponentのツリー構造をしていて
headerのComponentのなかにnavigation、login のComponentが含まれる。
ReactではComponentを一個ずつ作ってWebアプリなどを構成する。

###Componentのメリット
* **再利用性**
    * 一つのComponentを作ると引数(Props)を渡すことができる
    * 例：buttonというコンポネントからlogin、log-outボタンを作成できる
* **分割管理**
    * Component同士は疎結合なので、影響し合わない
* **修正変更、新機能追加**が簡単
    * 疎結合であることから、修正変更が必要なComponentのみ変更することができる

###Componentの種類

* **Class Component**：クラスによって定義されたComponent
    * React.Componentを継承
    * constructorでpropsを初期化
    * ライフサイクルやstateを持つ
        * webページが表示されるときに生成され、ユーザの操作や次のページへの遷移すると消える
    * propsにはthisが必要(このclass内のpropsを使うため)
    * render内でJSXをreturn
    * 最近推奨されてない

```React
//App=Class Component

import React, { Component } from 'react';

class App extends Component{
    constructor(props){
        super(props);
    }
    render() {
        return(
            <div>
                <h2>{this.props.title}</h2>
            </div>
        );
    }
}
```

* **Functional Component**：関数型で定義されたComponent
    * ES6のアロー関数で記述
    * stateを持たない
    * propsを引数に受け取ることができる　
    * JSXをreturnする

```React
//App=Functional Component

import React from 'react';
//Functional Componentでは{Component}のimportは不要

const App = (props) =>{
    return (
        <div>
            <h2>{props.title}</h2>
        </div>
    );  
}
```
mindの研究 その18

#概要

mindが謎なので調べてみた。
vistaに入れた。
atcoder、やってみた。

#二つの整数a,bの積の偶奇を判定する。


```
メインとは
　文字列１は　文字列
　文字列２は　文字列
　合否は　変数
　数１は　変数
　数２は　変数
　数３は　変数
　文字列入力し　文字列１に　入れ
　文字列１を　数値変換し　数１と　合否に　入れ
　文字列入力し　文字列２に　入れ
　文字列２を　数値変換し　数２と　合否に　入れ
　数１に　数２を　掛けて　数３に　入れ
　数３を　２で　剰余を　数３に　入れる
　もし　数３が　０に　等しい　ならば
　　「Even」を　表示する
　さもなければ　
　　「Odd」を　表示する
　つぎに


```

以上。
Power BI の SharePoint Online リスト コネクタ がイイ感じに変わりそうなのである。

まだベータですけどね、これまでわちゃわちゃしていたのがグッと整理されたっていう感じだ。(2020-10時点)。これまでいろいろと補うために FieldValuesAsText フィールドを展開とかしてたのよね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193509/deace376-c2f8-0a94-5202-d4f7ead7648a.png)
# これまでの SharePoint Online リスト コネクタ は
このポストのきっかけでもあるし。前身のPower BI for Office 365 時代からあーでもないこーでもないと。こういう経緯もあったんだよって思ってもらうとよいかなと。で、どういう不遇というか出来事があったかというと、

**たぶん en-US 環境以外は調子悪かった**
SharePoint 自体の更新によるものだったのだけど、のちに SharePoint に関わる Power Query の関数に \<option> 引数 ApiVersion フィールド が追加された。ApiVersion を "15" か "Auto" にするとよいよ。

**生 EntityPropertyName の時があった**
よほど訓練されてないとわかんないですよね。記憶は定かでないけど少ししたら修正されたけど、たしかこんな感じだった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193509/6bcf62e5-7ec3-0598-b445-c8d52afda957.png)

**いまでも EntityPropertyName であることに変わりはない**
現在でもEntityPropertyNameがインポートされるであろう列の列名として使われているのである。EntityPropertyName のうちエンコードされた文字列をデコードしてるっていう現在。やろうと思えばこんなことできる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193509/2035e504-117a-576f-8183-e1da92085784.png)
狙わないとならないですけどね。で、以前こんなポストをしていたのだ。

- [Power Query で取得した SharePoint リストの列名を置き換えたかった](https://bi.kagata.info/2017/07/get-view-of-SharePoint-custom-list-with-Power-Query.html)

書き直したいなと思い続けて幾星霜🤪もういいよねとなった。
# どうなるか
データを取得するという場面で使いやすくなる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193509/8ff7a1ec-a4e7-b24b-b87a-9640338c8335.png)

- SharePoint リストのビューに設定されたフィールドとか必要な部分だけ取得できる
- インポートするSharePoint リストの列名が表示された列名になる。
- 日付時刻列が現地時間に (UTC + 0 → Site settings 依存かな)

```text
SharePoint.Tables( url as text, option as record )

option
[ ApiVersion = 14 | 15 | "Auto" ]
[ Implementation = "2.0", ViewMode = "Default" | "All" ]
```

# 内部的ところ
SharePoint リストアイテムの取得じに利用する API が変わる。
**1.0 (Current)**

```text
GET https://{site_url}/_api/Web/Lists(guid'{list_guid}')/Items
```
**2.0 (Beta)**

```text
POST https://{site_url}/_api/Web/Lists(guid'{list_guid}')/RenderListDataAsStream
```

[Working with lists and list items with REST - Retrieve items as a stream](https://docs.microsoft.com/en-us/sharepoint/dev/sp-add-ins/working-with-lists-and-list-items-with-rest#retrieve-items-as-a-stream)

[Working with lists and list items with REST - RenderListDataAsStream body parameter properties](https://docs.microsoft.com/en-us/sharepoint/dev/sp-add-ins/working-with-lists-and-list-items-with-rest#renderlistdataasstream-body-parameter-properties)
Request body に含められた パラメタに "DatesInUtc" がなかったので、UTC ではなく Local time だったということでしょう。Site setting に依存はよい場面はあるけれども、異なるタイムゾーン設定されたサイトのリストを見るよというときあらかじめ調べる必要がある感じになってしまうのか。オプションスイッチをコネクタに持たせてくれるとよいかもな。

# 思ったこと🙄
コンテンツタイプから列名とか探したり、FieldValuesAsText フィールドを展開する必要がなりそうでやれやれなのである。

# その他
- [Power BI 勉強会 - connpass](https://powerbi.connpass.com/)
- [Power BI Desktop を使い始めるには](http://qiita.com/PowerBIxyz/items/6c4735cb5b5712e70981)
- [Excel で Power Query を使い始めるには](http://qiita.com/PowerBIxyz/items/52e563037b855a099ca9)
DNSの仕組みとAWSのRoute53について簡単にまとめた

AWSのRoute53を触った時に、DNSについて改めてしっかり学びなおしたのでそのメモ。

参考にした記事は以下
https://wa3.i-3-i.info/word1288.html
## DNSの構成要素

まずDNSサーバーは複数ある。
- フルサービスリゾルバ(DNSキャッシュサーバ)
- 権威サーバ

フルサービスリゾルバは、PCが問い合わせするサーバ。
なんとしてでもIPアドレスに関する情報を解決してくれるサーバである。
問い合わせた情報の結果はキャッシュで持ち、無駄な問い合わせを少なくするようにしてる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182163/43ddaa41-b494-dcac-9dd6-d469e1ea4981.png)


権威サーバは、フルサービスリゾルバがアクセスする先のサーバ。
問い合わせに対する動作は以下の３つ
1. 自分の管理している情報にドメイン名とIPアドレスの対応が書いてあればそれを教えてあげる
2. 自分では管理していないけど委託していれば、委託先を教えてあげます
3. 全然分からない問い合わせであれば「知らない」と答えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182163/02c2c5ae-bf5a-e255-1b78-1dd3f6c7724b.png)
## 権威サーバの持つゾーンファイルについて

権威サーバは、DNSレコードを記載したゾーンファイル(AWSではルートテーブル)で情報の管理をしている。


|  DNSレコードの種類  |  説明  |
| ---- | ---- |
|  SOAレコード  |  ゾーン（管理する範囲）に関する情報あれこれが書かれた行  |
|  NSレコード  |  管理を委託しているDNSサーバさんの名前が書かれた行  |
|  MXレコード  |  そのドメイン宛のメールの配送先メールサーバが書かれた行  |
|  Aレコード  |  ドメイン名に対応するIPアドレス（IPv4形式）が書かれた行  |
|  AAAAレコード  |  ドメイン名に対応するIPアドレス（IPv6形式）が書かれた行  |
|  CNAMEレコード  |  ドメイン名に付けた別名（あだ名）が書かれた行 |
|  CNAMEレコード  |  ドメイン名に付けた別名（あだ名）が書かれた行 |
|  TXTレコード | コメント等の、なんか適当な文章が書かれた行 |

## AWSについて
Route53は、ゾーンファイルを管理するサービス。
ドメインごとにDNSレコードを管理できるようになっている。
最もシンプルなレコードでは以下を設定できる。
- DNSレコードの種類
- レコード名：home.example.comなど、どのURLに設定するか。
- 参照先IPアドレス・値など

AWS上のAタグでは、以下のようにAWSリソースを指定することも可能。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182163/190fc787-f42a-8f81-7970-a83d90474683.png)
設定できるのは
- S3
- API gateway
- ALB/NLB
- CloudFront
などなど。
人生曲線を python で描いてみる

タイトル通りです．

人生曲線とは，これまでの自分の経験を時系列で振り返り，
x軸を年齢，y軸をモチベーション（幸福度，充実度）として，プロットしたものです．

次に，y軸が高くなっていくところ，低くなっていくところ，に着目し，
なぜそのようになったのかを繰り返すことで，自分の本質的な価値観が分かる，という仕掛けです．

記載のコードの使い方は，自分の経験に合わせて，`x`, `y` のデータを改変し，
「ああ，そうそうこんな感じ」というようなグラフが出力される次数を探します．

```python:lifeCurve
import numpy as np
import matplotlib.pyplot as plt

x = np.array([15.0, 16.5, 18.0, 21, 24.0, 25, 26, 27, 28, 29, 30, 33, 35, 37, 45, 53, 62])
y = np.array([15.0, 10.0, 20.0, 30, 24.0, 20, 15, 12, 10, 18, 25, 40, 50, 100, 70, 80, 120])
xp = np.linspace(min(x), max(x), 1000)

plt.rcParams["font.size"] = 20
fx = np.poly1d(np.polyfit(x, y, 6)) # ← 次数はいま6．ここを調整．
fig, ax = plt.subplots(figsize=(20,10))
ax.plot(xp, fx(xp), '-', color='blue')
ax.scatter(x, y, color='deepskyblue', s=32)
ax.axhline([0], color='black')
ax.set_xlim(min(x), None)
ax.set_ylim(0, 1.2*max(y))
ax.set_ylabel('Motivation Level')
ax.set_xlabel('My age')

color = '#1e90ff'
p1 = np.linspace(20, 23)
ax.fill_between(p1, fx(p1), 0, facecolor=color, alpha=0.5)
p2 = np.linspace(28, 40)
ax.fill_between(p2, fx(p2), 0, facecolor=color, alpha=0.5)
p3 = np.linspace(50, 60)
ax.fill_between(p3, fx(p3), 0, facecolor=color, alpha=0.5)
fig.savefig('./data/img/lifeCurve.png'))
```

![lifeCurve.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463767/d242d47e-14f5-97c9-4eab-6c359f184991.png)
PHPでファイルをダウンロードする【作成中】

[PHPでファイルをダウンロードする方法とよくあるエラー](https://www.flatflag.nir87.com/force-download-833)
[PHPでファイルを開いて読み込む](https://qiita.com/tadsan/items/bbc23ee596d55159f044)
初心者のプログラミング２

# 勉強の記録
## 勉強した内容
- 前回の復習
- ツイッターなどでよくある診断ツールの作成。

## 何をベースに勉強してるか
- [N予備校 プログラミング入門](https://www.nnn.ed.nico/home)

## 内容の詳細
### わかったことについて
- 前回に引き続き同じ内容でしたが、プラスして分かった事。
今まではconsole.log で一つ一つのエラー確認をしていましたが、
consolo.assert()を使ってのエラー確認を学びました。
ただ自身の認識では、A＝Aでない場合はエラーメッセージを出すという認識ですが
間違ってるかも知れない…。


### むずかしかったよ
- 前回は全体的に難しいと書きましたが、今回理解できていない部分をピックアップするなら
return result.replace(/\{userName\}/g, userName);　
というコードですが。
/\\/この辺りが良く分からない。
何だコレ状態です。

## 次回やる予定のこと
- 次回はいよいよツイート昨日の完成の授業です！
内挿と外挿の範囲をpythonで可視化

内挿と外挿の範囲を理解するために作ったコード．

過学習への注意も必要だが，外挿の範囲において，
得られた近似式が適用可能かどうかは十分に吟味しないといけない．

また，近似する目的が「予測」ではなく，「分析」である場合，
必要以上に変数を多くしたり，次数を上げると，解釈が難しくなるので，
如何に簡単，というかシンプルに仕立てられるか，が課題（腕の見せ所？）．

<font color='red'>赤破線部</font>：外挿範囲，<font color='blue'>青実線部</font>：内挿範囲 としています．

```python:interpolation_and_extrapolation
import numpy as np
import matplotlib.pyplot as plt

x = np.array([2.0, 3.5, 4.0, 4.5,  5.0,  5.5])
y = np.array([3.0, 3.2, 3.9, 5.2, 8.4, 10.5])
xp = np.linspace(2, 5.5, 100)
xp1 = np.linspace(0, 2, 100)
xp2 = np.linspace(5.5, 8, 100)

for val in range(1, 6):
    fx = np.poly1d(np.polyfit(x, y, val))
    plt.rcParams["font.size"] = 20
    fig, ax = plt.subplots(figsize=(15, 10))
    ax.plot(xp, fx(xp), '-', color='blue')
    ax.plot(xp1, fx(xp1), '-', color='red', linestyle='dashed')
    ax.plot(xp2, fx(xp2), '-', color='red', linestyle='dashed')
    ax.scatter(x, y, color='deepskyblue', s=32)
    s = '$y =$'
    for idx, deg in enumerate(reversed(range(0, val+1))):
        if (fx.coef[idx] > 0) & (idx != 0):
            s += '$ +$'
        if deg > 1:
            s += f' ${fx.coef[idx]:.2f} x^{deg}$'
        if deg == 1:
            s += f' ${fx.coef[idx]:.2f} x$'
        if deg == 0:
            s += f' ${fx.coef[idx]:.2f}$'
#     ax.text(0.05, 0.8, s=s, size='x-large', transform=ax.transAxes)
    ax.axhline([0], color='black')
    ax.axvline([2], color='gray', linestyle='dotted')
    ax.axvline([5.5], color='gray', linestyle='dotted')
    ax.set_xlim(0, 8)
    ax.set_ylim(-3, 14)
    ax.set_title(s)
    ax.set_ylabel('response variable')
    ax.set_xlabel('explanatory variables')
    fig.savefig(f'./data/img/inter_and_extrapolation{val}.png')
```
1次近似
![inter_and_extrapolation1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463767/b254dcde-802e-adbc-68be-ebf6ede02e55.png)
2次近似
![inter_and_extrapolation2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463767/05d132f6-4112-f9e5-0581-3a29aef0c2c9.png)
3次近似
![inter_and_extrapolation3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463767/2852f266-3f5f-794b-7a8e-8e985df220b8.png)
4次近似
![inter_and_extrapolation4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463767/7bcf8fca-0712-a074-f717-d2ff951daab4.png)
5次近似
![inter_and_extrapolation5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463767/0386a7c6-efc6-3127-24db-629e78c63c0e.png)
windows10で快適なCUI環境を構築する(2020)

## はじめに



- WSL2環境を構築する
  - [3年前の記事](https://qiita.com/vitway/items/e209fb4a4eb307de2d28)の時点で *Bash on Ubuntu on Windows* と呼ばれていたものは *Windows Subsystem for Linux (WSL)* へと名称変更された
  - 本質的には同じものではあるものの、導入方法が大きく変更されている
  - WSL1からWSL2へ更新することで機能・パフォーマンスが向上する
    - [WSL 1 と WSL 2 の比較](https://docs.microsoft.com/ja-jp/windows/wsl/compare-versions)

- Windows Insider Programへの参加が必要な時期があったが、正式版となった現在は不要
- ターミナルはWSLのデフォルトのものでも十分実用に耐えられるようになった
  - より快適に使うには`wsl-terminal` や`Windows Terminal`の利用をおすすめ
  - この記事では`wsl-terminal`を使う




## WSLの有効化

PowerShellを管理者として開き、以下を実行

```PowerShell
dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
```

PC再起動

## WSL2への更新

### Windowsのバージョンの確認

Win+R -> `winver`でOSバージョンが以下を満たしていることを確認する。

> x64 システムの場合:バージョン 1903 以降、ビルド 18362 以上。
> ARM64 システムの場合:バージョン 2004 以降、ビルド 19041 以上。

このバージョン未満だった場合はWindows Updateで最新のバージョンに更新する。

### 仮想マシンプラットフォームを有効にする

PowerShellを管理者として開き、以下を実行

```PowerShell
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
```

PC再起動

### WSL2 Linuxカーネルの更新

https://aka.ms/wsl2kernel に従って、 [wsl_update_x64.msi](https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi) をダウンロードして実行する。

### WSL2を既定のバージョンとして設定

PowerShellを管理者として開き、以下を実行

```PowerShell
wsl --set-default-version 2
```

## Microsoft Storeから任意のディストリビューションを入手

例: Ubuntu 20.04 LTS
https://www.microsoft.com/store/apps/9n6svws3rx71



## wsl-terminalを使う

https://github.com/mskyaxl/wsl-terminal/releases から最新版を入手して適当なディレクトリに展開するのみ。

通常の`wsl-terminal`の他、v0.8.11からタブが使える`wsl-terminal-tabbed`もリリースされているので、好みで選択。

以下では `c:\wsl-terminal`に展開したものとする。

### 使い方

`c:\wsl-terminal\open-wsl.exe`を実行するのみ。

ただし、起動後のカレントディレクトリがexeのあるディレクトリになってしまうため、以下のように`-l`で起動するショートカットかバッチファイルを作ると便利。

```
c:\wsl-terminal\open-wsl.exe -l
```

### ログインシェルをzshに変更

`c:\wsl-terminal\etc\wsl-terminal.conf`

```
[config]
title="        "
shell=/usr/bin/zsh
use_tmux=0
keep_wsl_running=0
```

事前に一旦bashでログインしてからLinux側にzshを入れておく必要あり

### フォントを変更

wsl-terminalを起動してから、コンテキストメニューの`Options -> Text -> Font`で好みのフォントに変更できる。

Consolasや[Miryca](https://myrica.estable.jp/)が視認性がよく、おすすめ。
__name__

```python:test.py

print(__name__)
```

```python:出力

__main__
```

```python:test2.py

import test
```

```python:出力
test
```

test.pyを直接実行すると__name__にstr型の__main__が代入される。
またtest.pyを外部からインポートするとstr型のファイル名testが代入される。つまり、

```python
if __name__ == '__main__':
    main()
```

のmain()は外部からインポートされた場合は実行されず、直接実行した場合のみ実行される。
Windows で Blender 2.90 の python に Pytorch をインストールする

基本的には Blender 2.8x にインストールするのと大差ないです。2.90 になってインストールできなくなるかと思いきや、予想以上にあっさり入りました。あんまり情報量ないですが、メモしておきます。

# 前提

- Windows 10 Home/Pro
- Blender 2.90

Blender は `C:\Program Files\Blender Foundation` にインストールされているものとします。CUDA や GPU のドライバはインストール済みとします。

# 手順

1. PowerShell を**管理者権限で**開きます。
2. pip を upgrade します。
3. pytorch をインストールします。

こんだけです。

```.powershell
> cd C:\Program Files\Blender Foundation\Blender 2.90\2.90\python\bin

> ./python -m pip install --upgrade pip
Collecting pip
  Downloading https://files.pythonhosted.org/packages/cb/28/91f26bd088ce8e22169032100d4260614fc3da435025ff389ef1d396a433/pip-20.2.4-py2.py3-none-any.whl (1.5MB)
     |████████████████████████████████| 1.5MB 1.1MB/s
Installing collected packages: pip
  Found existing installation: pip 19.2.3
    Uninstalling pip-19.2.3:
      Successfully uninstalled pip-19.2.3
Successfully installed pip-20.2.4

> ./python -m pip install torch==1.6.0+cu101 torchvision==0.7.0+cu101 -f https://download.pytorch.org/whl/torch_stable.html
Looking in links: https://download.pytorch.org/whl/torch_stable.html
Collecting torch==1.6.0+cu101
  Downloading https://download.pytorch.org/whl/cu101/torch-1.6.0%2Bcu101-cp37-cp37m-win_amd64.whl (1021.6 MB)
     |████████████████████████████████| 1021.6 MB 750 bytes/s
...
Successfully installed future-0.18.2 pillow-8.0.0 torch-1.6.0+cu101 torchvision-0.7.0+cu101
>
```

Pytorch のインストールコマンドは、いつものように公式ページで CUDA のバージョンなどを選んで出てきたものをコピペするだけです。

- [Pytorch](https://pytorch.org/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/71cb5532-8c64-4621-bd65-e9de92a0e12f.png)

ついでに pip で matplotlib など、必要なものをいれておきます。

```.powershell
> ./python -m pip install matplotlib            
Collecting matplotlib
  Downloading matplotlib-3.3.2-cp37-cp37m-win_amd64.whl (8.5 MB)
     |████████████████████████████████| 8.5 MB 1.3 MB/s
...
Successfully installed certifi-2020.6.20 cycler-0.10.0 kiwisolver-1.2.0 matplotlib-3.3.2 pyparsing-2.4.7 python-dateutil-2.8.1 six-1.15.0
```

## Blender の python console でテスト

問題なくインストールされていれば、Blender の python console で `import torch` とか通ります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/4b47dcf8-0088-83a2-350c-84056165e271.png)

ちなみに pytorch_example/mnist/main.py を実行しようとしたら、アクセス権限がないというエラーが出ました。一応これは、管理者権限で blender を実行することで回避はできます。ユーザがアクセスできるフォルダに blender をインストールすることでも回避できます。
k8s でコンテキストを切り替える

基本的なことだけど、久々に触ったら忘れていたので、書いておく。

kubernetes　を久々に触ったら、コンテキストが切り替わっていることに気づいた。現在のコンテキストを調べて、一覧を見て、不要なのは削除したい。

# 現在のコンテキスト

うむ。予想どおり変なのになってる。

```bash
$ kubectl config current-context
kafka-k8-cluster-helm
```

# コンテキストの一覧

```bash
$ kubectl config get-contexts
CURRENT   NAME                    CLUSTER                 AUTHINFO                                     NAMESPACE
          kafka-k8-cluster-helm   kafka-k8-cluster-helm   clusterUser_kafka-k8_kafka-k8-cluster-helm   
*         tsushikeda              tsushikeda              clusterUser_RemoveKEDA_tsushikeda 
```

# コンテキストの変更

```bash
ushio@DESKTOP-KIUTRHV:~/Code/Project/keda/v2/sample-go-servicebus-queue$ kubectl config use-context tsushikeda
Switched to context "tsushikeda".
```

# コンテキストの削除

```bash
$ kubectl config delete-context kafka-k8-cluster-helm
deleted context kafka-k8-cluster-helm from /home/ushio/.kube/config
```

# config のサブコマンド

思い出せなかったのは `config` のサブコマンドだった。

```bash
$ kubectl config --help
Modify kubeconfig files using subcommands like "kubectl config set current-context my-context"

 The loading order follows these rules:

  1.  If the --kubeconfig flag is set, then only that file is loaded. The flag may only be set once and no merging takes
place.
  2.  If $KUBECONFIG environment variable is set, then it is used as a list of paths (normal path delimiting rules for
your system). These paths are merged. When a value is modified, it is modified in the file that defines the stanza. When
a value is created, it is created in the first file that exists. If no files in the chain exist, then it creates the
last file in the list.
  3.  Otherwise, ${HOME}/.kube/config is used and no merging takes place.

Available Commands:
  current-context Displays the current-context
  delete-cluster  Delete the specified cluster from the kubeconfig
  delete-context  Delete the specified context from the kubeconfig
  get-clusters    Display clusters defined in the kubeconfig
  get-contexts    Describe one or many contexts
  rename-context  Renames a context from the kubeconfig file.
  set             Sets an individual value in a kubeconfig file
  set-cluster     Sets a cluster entry in kubeconfig
  set-context     Sets a context entry in kubeconfig
  set-credentials Sets a user entry in kubeconfig
  unset           Unsets an individual value in a kubeconfig file
  use-context     Sets the current-context in a kubeconfig file
  view            Display merged kubeconfig settings or a specified kubeconfig file

Usage:
  kubectl config SUBCOMMAND [options]

Use "kubectl <command> --help" for more information about a given command.
Use "kubectl options" for a list of global command-line options (applies to all commands).
```
DateTime::formatメソッドに指定するフォーマットを無意味に長くすると，不具合を引き起こしやすい．

## TL;DR

- `index.html`という文字列をフォーマットとして `\DateTime::format()` メソッドに引き渡したところ，`i801Asia/Tokyox.013108Saturday` という出力が生成された．
- `format()` メソッドに指定するフォーマットは，必要最低限とする．変換されない文字列と誤認して、`n`, `e`などを指定してしまうと面倒なことになる．
- 自分の想定通りに動くか，細かい単位で動作確認・テストを行う．

## 環境

- PHP7.2
- Ubuntu18.04 LTS

## 経緯

今日の日付情報を保持した `\DateTime` クラスからディレクトリパス（文字列）を `format()` メソッドを用いて生成し，それをキーとして指定してS3にファイルをアップロードするという処理にて，予期せぬ挙動が発生しました．
DateTime
具体的には，

- 2020/08/index.html

というパスにファイルを自動でアップロードしたかったものが

- 2020/08/i801Asia/Tokyox.013108Saturday

というパスにファイルがアップロードされてしまい，自動生成されるはずの目的のページが生成されないという意図せぬ挙動となりました．

## CLIで実行して確認

`\DateTime` 型のインスタンスを取得し， `format()` 関数にフォーマットを引き渡して呼び出してやれば，渡したフォーマットに応じた文字列が返ります．

```
php > $date = new \DateTime();
php > echo $date->format('Y')
php > ;
2020
php > echo $date->format('m');
08
```

今回の問題箇所についても実行してみます．

```
php > echo $date->format('Y/m/index.html');
2020/08/33801Asia/Tokyox.013108Saturday
```

ああ．．．

下記のように変更を行い，正常に動作するようになりました．

```
php > echo $date->format('Y/m/').'index.html';
2020/08/index.html
```

## 教訓

- `format()` メソッドに指定するフォーマットは，必要最低限とする．変換されない文字列だからといってむやみに詰め込まない．
- 自分の想定通りに動くか，細かい単位でチェックを行う．
- `var_dump()` さんありがとう．
【Python】GitHubのipynbファイルを日本語に翻訳してダウンロードするnotebook

#はじめに
[前回](https://qiita.com/Cartelet/items/215d509d5d00fb04c08c)、プログラムのコメントを日本語に翻訳するスクリプトを書きましたが、同じ要領でipynbファイル(Jupyterのファイル)ごと翻訳できるだろうということで書いてみました。
GitHubに上げといたのでColaboratoryから実行できるようにリンクを張っておきます。→　[ipynb_translator.ipynb - Colaboratory](https://colab.research.google.com/github/Cartelet0423/ipynbTranslator/blob/master/ipynb_translator.ipynb)

#使い方
GitHubに上がっているipynbファイルのURLをペーストして実行すると、翻訳されたものがダウンロードされます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501281/506d7f25-555d-42de-1184-4e18320e50b9.png)
swiperでエラーが出ないのに、意図しない動き

## なんか動きがきもい
コンソールエラーとか吐いてない、意味わかんない

## 原因はeasingでした
必死にjsと睨めっこしたって、開発画面を凝視してエラー探したってあるわけない。
だってeasingはcss animationで上書きして指定するんだもの。

## 感想
アニメーションをどっちに任せるか、迷うところ。
厳密に定義して、readmeに書いた方がいい。（コレに限らず、どっちの言語でも表現できるようなやつは）
jsは重いかもだけど、エラー出してくれる（かも）だし、
css大好きマンだけど気持ちが揺らいだ。
Laravel7 でCSSが読み込めない

_Laravel 7.25.0です。_

_CSSの場所：_
Laravel/public/css/app.css
_HTMLの場所_
Laravel/resources/views/layouts.blade.php

##問題点
何故かCSSが読み込めなかった。

##解決

    <link rel="stylesheet" href="/css/app.css">
を

    <link rel="stylesheet" href="{{ asset('css/app.css') }}">

に変えたら読み込めました。

##原因
不明です。（すみません）

##参考
https://teratail.com/questions/126308


おしまい。
Raspberry Pi 4 と Raspberry Pi OS 64bit に Docker をインストール

# はじめに

```
$ lsb_release -a
No LSB modules are available.
Distributor ID: Raspbian
Description:    Raspbian GNU/Linux 10 (buster)
Release:        10
Codename:       buster
$ uname -m
aarch64
```

# docker

```
$ curl -fsSL https://get.docker.com -o get-docker.sh
$ sudo sh get-docker.sh
$ sudo usermod -aG docker `whoami`
$ exit
```

ここでグループを反映させるために再ログイン

```
$ sudo systemctl status docker
$ docker version
```

# docker-compose

https://docs.docker.com/compose/install/ を参考にやると失敗した。
（aarch64 用が無かった）

ので、pip でインストール

<!--
しようとしたけれど依存パッケージの `bcrypt` のビルドに失敗するのでこれもダメ。
-->

```
$ sudo apt -y install python3-pip
$ pip3 install --upgrade pip
$ sudo pip3 install -U docker-compose
```

<!--
ので、これ。
docker で docker-compose を実行することになる。仕方ない。

```
$ sudo curl -L --fail https://raw.githubusercontent.com/linuxserver/docker-docker-compose/master/run.sh -o /usr/local/bin/docker-compose
$ sudo chmod +x /usr/local/bin/docker-compose
```
-->
【C++】ウィンドウスタイルを維持しながらタイトルバーを消す方法 

C++/Win32でテキストエディタを作成しています。自分のブログでも書いたのですが、海外の方で悩まれてる方が多そうなのでこちらでも記載。ウィンドウスタイルを維持しながらタイトルバーを消す方法です。
タイトルバーを自作したい人向けです。タイトルバーを自作したい人っていますか？

C++でやるならこれ一択と思いました。私が調べて実装した内容がほぼすべて網羅されているように思います。対象OSもWindows7/8/8.1/10なので十分ですね。

BorderlessWindow
https://github.com/melak47/BorderlessWindow

ただ、このウィンドウにも問題があって、ウィンドウスタイルを残すために DwmExtendFrameIntoClientArea で上下左右に 1px 枠線を付けているのですが、ウィンドウの色が白であればいいんですが黒にすると目立っちゃうんですよね。

解決策が見つからず悩んでいたのですが、この枠線(非クライアント領域)は GDI+ だと上書きできるようです。もし、悩んでいる方がいたら是非試してみてください。ちなみにDirect2Dでも上書きできました。アルファ値を設定できる描画だと上書きできるようです。

・変更前の白枠線がある状態
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494272/04b6c349-9e45-2e48-8857-65365efac3e2.png)
・GDI+で青線上書後
![無題1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494272/9f9988f1-eca3-6648-dfb2-ff0cbefe9665.png)

※タイトルバーだけ消して、ウィンドウの影やエフェクトはそのままです。
Can't set locale; make sure $LC_* and $LANG are correct!

# はじめに

こういうのとか

```
Can't set locale; make sure $LC_* and $LANG are correct!
```

こういうのが出たとき

```
locale: Cannot set LC_CTYPE to default locale: No such file or directory
locale: Cannot set LC_MESSAGES to default locale: No such file or directory
locale: Cannot set LC_ALL to default locale: No such file or directory
```

# 対処

```
$ export LC_ALL=en_US.UTF-8
$ sudo locale-gen en_US.UTF-8
$ sudo update-locale LANG=en_US.UTF-8
```
Laravel 【初心者】 PHPフレームワーク Laravel入門 第2版 の内容を一部図式化してみた件 ⑪フォームリクエスト

#はじめに
この記事はプログラミングをはじめたばかりの素人が、メモするのに利用しています。
内容には誤りがあるかもしれません。

#PHPフレームワーク Laravel入門 第2版 について
Laravelを独学で学ぶにあたり、評判がよかったのでAmazon Kindleで購入しました。
**内容も色々な方法が書いてあるので、Laravelをはじめて勉強される方にはおすすめの本です。**

Amazon リンク
https://www.amazon.co.jp/gp/product/B08625YD7H/ref=ppx_yo_dt_b_d_asin_image_o09?ie=UTF8&psc=1

#図式化について
学習中に、文字だけだとイメージが掴みづらかったので、自分の為に作成したものです。
また方法が色々あり過ぎて混乱したので、整理する意味もあります。
ディレクトリを覚えるのにも使いました。

コードは必要なものだけ抜粋しているので、全てではありません。
これだけ見ても勉強にはならないので、**PHPフレームワーク Laravel入門 第2版**を是非購入してみて下さい。

※ちなみに著者の方とは何の関係もありません。

素人が作成した物なので、参考程度に使ってください。

#フォームリクエスト

![fr.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/760252/8a277a2f-b953-abd2-8a6e-ed9129d59708.jpeg)
Laravel 【初心者】 PHPフレームワーク Laravel入門 第2版 の内容を一部図式化してみた件 ⑩バリデーション

#はじめに
この記事はプログラミングをはじめたばかりの素人が、メモするのに利用しています。
内容には誤りがあるかもしれません。

#PHPフレームワーク Laravel入門 第2版 について
Laravelを独学で学ぶにあたり、評判がよかったのでAmazon Kindleで購入しました。
**内容も色々な方法が書いてあるので、Laravelをはじめて勉強される方にはおすすめの本です。**

Amazon リンク
https://www.amazon.co.jp/gp/product/B08625YD7H/ref=ppx_yo_dt_b_d_asin_image_o09?ie=UTF8&psc=1

#図式化について
学習中に、文字だけだとイメージが掴みづらかったので、自分の為に作成したものです。
また方法が色々あり過ぎて混乱したので、整理する意味もあります。
ディレクトリを覚えるのにも使いました。

コードは必要なものだけ抜粋しているので、全てではありません。
これだけ見ても勉強にはならないので、**PHPフレームワーク Laravel入門 第2版**を是非購入してみて下さい。

※ちなみに著者の方とは何の関係もありません。

素人が作成した物なので、参考程度に使ってください。

#バリデーション

![v1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/760252/e5ba9898-2e3d-9b44-8da6-4bb977cf6649.jpeg)

#バリデーション(エラー表示)

![v2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/760252/6ac137e2-fabd-33a2-64e8-7744c68ae278.jpeg)

#バリデーション(フィールド毎にエラー表示)

![v3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/760252/7dacb20a-6544-da92-ab41-f07502d974bc.jpeg)

#バリデーション(ディレクティブを利用したエラー表示)

![v4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/760252/ac19b9fa-b7cb-f1ac-3a3d-d22eb67b3d83.jpeg)
Laravel 【初心者】 PHPフレームワーク Laravel入門 第2版 の内容を一部図式化してみた件 ⑨グローバルミドルウェア ミドルウェアグループ

#はじめに
この記事はプログラミングをはじめたばかりの素人が、メモするのに利用しています。
内容には誤りがあるかもしれません。

#PHPフレームワーク Laravel入門 第2版 について
Laravelを独学で学ぶにあたり、評判がよかったのでAmazon Kindleで購入しました。
**内容も色々な方法が書いてあるので、Laravelをはじめて勉強される方にはおすすめの本です。**

Amazon リンク
https://www.amazon.co.jp/gp/product/B08625YD7H/ref=ppx_yo_dt_b_d_asin_image_o09?ie=UTF8&psc=1

#図式化について
学習中に、文字だけだとイメージが掴みづらかったので、自分の為に作成したものです。
また方法が色々あり過ぎて混乱したので、整理する意味もあります。
ディレクトリを覚えるのにも使いました。

コードは必要なものだけ抜粋しているので、全てではありません。
これだけ見ても勉強にはならないので、**PHPフレームワーク Laravel入門 第2版**を是非購入してみて下さい。

※ちなみに著者の方とは何の関係もありません。

素人が作成した物なので、参考程度に使ってください。

#グローバルミドルウェア ミドルウェアグループ

![gmiddle.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/760252/4eab76e3-b001-295f-01eb-41c889669053.jpeg)
Laravel 【初心者】 PHPフレームワーク Laravel入門 第2版 の内容を一部図式化してみた件 ⑧アクション後に実行するミドルウェア

#はじめに
この記事はプログラミングをはじめたばかりの素人が、メモするのに利用しています。
内容には誤りがあるかもしれません。

#PHPフレームワーク Laravel入門 第2版 について
Laravelを独学で学ぶにあたり、評判がよかったのでAmazon Kindleで購入しました。
**内容も色々な方法が書いてあるので、Laravelをはじめて勉強される方にはおすすめの本です。**

Amazon リンク
https://www.amazon.co.jp/gp/product/B08625YD7H/ref=ppx_yo_dt_b_d_asin_image_o09?ie=UTF8&psc=1

#図式化について
学習中に、文字だけだとイメージが掴みづらかったので、自分の為に作成したものです。
また方法が色々あり過ぎて混乱したので、整理する意味もあります。
ディレクトリを覚えるのにも使いました。

コードは必要なものだけ抜粋しているので、全てではありません。
これだけ見ても勉強にはならないので、**PHPフレームワーク Laravel入門 第2版**を是非購入してみて下さい。

※ちなみに著者の方とは何の関係もありません。

素人が作成した物なので、参考程度に使ってください。

#アクション後に実行するミドルウェア

![amiddle.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/760252/bc117815-7595-7671-4bec-55374aeac454.jpeg)
Laravel 【初心者】 PHPフレームワーク Laravel入門 第2版 の内容を一部図式化してみた件 ⑦アクション前に実行するミドルウェア

#はじめに
この記事はプログラミングをはじめたばかりの素人が、メモするのに利用しています。
内容には誤りがあるかもしれません。

#PHPフレームワーク Laravel入門 第2版 について
Laravelを独学で学ぶにあたり、評判がよかったのでAmazon Kindleで購入しました。
**内容も色々な方法が書いてあるので、Laravelをはじめて勉強される方にはおすすめの本です。**

Amazon リンク
https://www.amazon.co.jp/gp/product/B08625YD7H/ref=ppx_yo_dt_b_d_asin_image_o09?ie=UTF8&psc=1

#図式化について
学習中に、文字だけだとイメージが掴みづらかったので、自分の為に作成したものです。
また方法が色々あり過ぎて混乱したので、整理する意味もあります。
ディレクトリを覚えるのにも使いました。

コードは必要なものだけ抜粋しているので、全てではありません。
これだけ見ても勉強にはならないので、**PHPフレームワーク Laravel入門 第2版**を是非購入してみて下さい。

※ちなみに著者の方とは何の関係もありません。

素人が作成した物なので、参考程度に使ってください。

#アクション前に実行するミドルウェア

![bmiddle.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/760252/ea660662-f077-3a20-79b4-9a1464461904.jpeg)