OmniAICreator/Qiita-1.07M huggingface dataset:
【Mac強化計画 #1】Homebrewをインストールしよう

![Homebrew](https://s3-ap-northeast-1.amazonaws.com/img.hq9/qiita/homebrew-logo.png)

[Homebrew](https://brew.sh/index_ja)はエンジニアだけでなく、WEBデザイナーにとっても必須ツールです。

今回は、まだHomebrewをインストールしていないWEBデザイナーのために、**Homebrewの導入**についての解説をして行きたいと思います。

## その前にXcodeはインストールしてますか？

HomebrewはGitとRubyで動いているため、それらがインストールされている必要があります。
Macの場合、Command Line Tools for Xcodeをインストールすることで、その環境を簡単に構築することができます。

```shell:shell
$ xcode-select --install
```
よく、Command Line Tools for Xcodeさえインストールすれば問題ないという記事を見かけますが、WEBデザイナーに限って言えばXcode本体もインストールしておいた方が良いと思います。

Xcodeをインストールしておけば、iOSデバイスのエミュレータが使えるようになるので、各種iOSデバイスでの表示確認がデスクトップ上でできるようになります。

[Mac App StoreからXcodeをダウンロード](https://apps.apple.com/jp/app/xcode/id497799835)

## Homebrewのインストール

[Homebrew](https://brew.sh/index_ja)のサイトにアクセスし、インストールの下に書いてあるコードをターミナルにコピペします。

```shell:shell
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```

## インストールの確認
ターミナルの画面が止まったら、以下を入力します。

```shell:shell
$ brew -v  
Homebrew 2.2.6
```
バージョンが表示されればインストール成功しています。
atomでftp接続する方法をまとめた（ftp-remote-editやremoteftpなどなど）

# この記事の内容

- atomでftp接続してeditしたのをすぐに反映させたい
- 本来gitなどを通した方がいいがそれすらする必要がないちょっとしたテストなどのアップ

# ftp-remote-edit

atomにはいくつかftp接続のpackageがあるが下記２つがメジャー

- ftp-remote-edit
- remote-ftp

remote-ftpはプロジェクトファイルごとにfileを設定して接続するものでftp-remote-editはサーバーに接続してそのサーバーの情報をそのまま出すもの。今回はftp-remote-editの方がイメージに近いのでそちらを採択。

## 注意

ftp-remote-edit-plusと言うのがあったがなんかそちらだとうまくいかなかった。別物なのんかな？

## editserverでサーバー情報をいれる

- packageをいれる
- toggleを出す
- editserverでサーバー設定
- そしたらサーバーの中身が出る

と言う順番でやればok。簡単。

## 違うサーバーにアクセスしたいとき

一度ログインした後に違うサーバーに入りたいときはeditserverから設定

>Right click and select "Edit Servers" to open the configuration view. Here you can add, edit and delete your (s)ftp server settings.

https://atom.io/packages/ftp-remote-edit

# なぜftpクライアントソフトを使わないのか？

ただアップロードするだけのものだとeditしてすぐにアップというのができなくて今回の用途には不向き。cyberduckだとeditorに接続してできそうだけどできるだけツールを分けたくないのでatomのpackageで対応することにした。

## ただしこういうときはftpクライアントソフトを使った方がいい

ただftp-remote-editはtimeoutの制限が結構厳しく、ちょい大きめの物をあげるときは難しいのでその場合はcyberduckなどを使おう。
Raspberry Pi とANBE BME280で気温・湿度・気圧を取得

# TR;TD
Raspberry PiにANBE BME280を取り付けるのに成功したので、その記録

# 買ったもの

## [BME280](https://www.amazon.co.jp/dp/B0768STXQR/ref=cm_sw_r_tw_dp_U_x_E8yDEbS17Q8XQ)
ANBEのやつ。
自室とベランダの両方を計測したかったので2つ入りを購入。
![IMG_4864.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193460/26948a7d-91fb-fced-8278-8c00e447d854.jpeg)


## [ジャンパワイヤー（メス・メス）](https://www.amazon.co.jp/dp/B0768STXQR/ref=cm_sw_r_tw_dp_U_x_E8yDEbS17Q8XQ)
[前回](https://qiita.com/yoc/items/57cd5c7461ab3975a496#%E3%82%B8%E3%83%A3%E3%83%B3%E3%83%91%E3%83%AF%E3%82%A4%E3%83%A4)間違えてオスメスのジャンパワイヤを買ったので、メスメスのジャンパワイヤを購入。

# 作業

## はんだ付け
がんばる。下手だけど。
![IMG_4865 (1).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193460/7884f922-f656-8de6-bafe-3171480ae396.jpeg)


## 接続

[ここ](http://www.gunjo-gentokan.com/?p=646)を参考にさせてもらい、[前回買ったRaspberry Pi Zero HW](https://qiita.com/yoc/items/57cd5c7461ab3975a496#raspberry-pi-zero-wh)に接続する。
![IMG_4867.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193460/9ddb6f0a-6a59-3e6c-3742-01dea9dcee30.jpeg)

1番目(VCC)と6番目(SDO)は何も接続しない。

2番目(GND) => 9番ピン
3番目(SCK/SCL) => 5番ピン
4番目(SDA/SOI) => 3番ピン
5番目(CSB) => 1番ピン

と接続する。

## 接続確認

```
$ sudo apt-get install -y i2c-tools
（中略）
$ i2cdetect -y 1
     0  1  2  3  4  5  6  7  8  9  a  b  c  d  e  f
00:          -- -- -- -- -- -- -- -- -- -- -- -- -- 
10: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 
20: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 
30: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 
40: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 
50: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 
60: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 
70: -- -- -- -- -- -- 76 --  
```
76ってなってればOKらしい。

## 計測してみる
ありがとう。スイッチサイエンス

```
$ git clone https://github.com/SWITCHSCIENCE/samplecodes.git
$ sudo pip install smbus2
$ python samplecodes/BME280/Python27/bme280_sample.py
temp : 18.63  ℃
pressure : 1011.76 hPa
hum :  45.17 ％
```

# まとめ
ハードウェアー頑張ったので、次はソフトウェアーがんばる。
【REACT】カンタンなSPAサイトの仕組み

#JavaScript学習をはじめてから2ヶ月目でSPAに触れてみた所感
基本的なweb制作のスキルはすでに獲得していて、次のステップにJavaScriptを選択してみました。
理由をカンタンに説明すると、web制作をより深く学習していく中で、SPA（シングルページアプリケーション）という技術への興味が高ぶったからです。
そこで、実際にJavaScriptを本格的に学びはじめてからSPAに触れてみた所感を共有できればと思い記事を投稿しようと思います。
これからSPAを学ばれる方に少しでも参考になれば幸いです。


#今回使用する技術
・React Router
 　→Routeコンポーネント、Linkコンポーネント


#1.ディレクトリの作成
※既に環境構築済みの想定
　→[まだの方はこちらから](https://qiita.com/komosyu4649/items/b59e3d4776b11c6eab27)
sample（好きなディレクトリ名）> src> App.jsとindex.js のみのシンプルな構造

```jsx:App.js
import React from 'react';

function App() {
 return (
   <h1>hello</h1>
 );
}

export default App;

```

```jsx:index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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




#2.React Routerのインストール
・VSコード内のターミナルに"npm install react router-dom"とコマンドを入力してインストールを行います。
すると、package.jsonの"dependencies"内に"react-router-dom"がインストールされたことがわかります。

```package.json
{
  "name": "sample",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "gh-pages": "^2.2.0",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.0"
  },
```
となれば問題ないかと思います。


#3.コンポーネントの追加
SPAサイトの特徴である複数のページを要せずとも、ページ遷移ができる仕組みはコンポーネントが支えています。
ということで、src> components> Top.jsxとAbout.jsxの2つの関数コンポーネントファイルを作成し、とりあえずh1要素のみ入力しておきます。

```Top.jsx

import React from 'react';

function Top() {
    return(
        <h1>TOP</h1>
    );
}


export default Top;

```

```About.jsx

import React from 'react';

function About() {
    return(
        <h1>ABOUT</h1>
    );
}


export default About;

```


#4.ルーティングの設定
実際の表示ページとなるApp.jsに以下の要領でルーティング設定を行います。

```jsx:App.js
import React from 'react';
import {
  BrouserRouter as Router,
  Route
} from "react-router-dom";
import Top from './components/Top';
import About from './components/About';

function App() {
 return (
   <Router>
     <Route path="/" exact component={Top} />
     <Route path="/about/" exact component={About} />
   </Router>
 );
}

export default App;

```
package.jsonで読み込んだreact-router-domから①BrouserRouterをasキーでRouterとして②Routeの2つを読み込みます。

そして、function App内ではRouterを親要素。Routeをその中の子要素として記入します。

そのRoute内の“path”にURLセット。
“exact”の役割はpathが完全一致した時のみ表示できるようにします。
“component”はpathにセットしたURLをクリックする時に表示したいコンポーネントを指定できます。


#5.いざ、表示の切り替え

最後の仕上げです。
通常、ページの切り替えはaタグで行われますが、Linkタグを使うことで、非同期処理が実現できます。

```jsx:App.js
import React from 'react';
import {
  BrouserRouter as Router,
  Route、
　Link
} from "react-router-dom";
import Top from './components/Top';
import About from './components/About';

function App() {
 return (
   <Router>
     <ul>
       <li><Link to="/">トップ</Link></li>
       <li><Link to="/about/">アバウト</Link></li>
     </ul>
     <Route path="/" exact component={Top} />
     <Route path="/about/" exact component={About} />
   </Router>
 );
}

export default App;

```

Router,Routeのならびに“Link”を読み込みます。

そして、Routerタグ内にLinkタグをセットすることで、クリックすると非同期でのページ遷移、夢のSPAサイト（超簡易版）を実現することができます。

#まとめ
まだまだ自分は勉強中の身ですが、SPAサイトは非常に面白い仕組みで、これからよく使われる技術のひとつだと思うので、勉強していきたいものですね。
【UnityPlayground】音を出したい

Assetsに格納してある音ファイルをMaincameraにドラッグアンドドロップする。
下図では、Maincameraにアタッチしています。

![a01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/a227521c-d848-ca6e-4ec2-0fe9e68fdaab.png)
tkinterで背景画像を設定するときウィンドウ全体に表示する方法

#はじめに
tkinterを使って背景画像を表示した際に
Canvasを使って表示すると左の画像のように白枠が入ってしまいました。
それが嫌だったので右の画像のようにウィンドウ全体に表示させる方法を記載します。
![Lenna_all.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515098/d8104934-419a-9bdd-cb72-c3a892bf367a.png)

#環境
Windows10 64bit
Python 3.6.9
tkinter 8.6

#概要

画像を表示するのにLabelを使います。

#手順

使用した画像(256x256)
![Lenna.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515098/c873b607-3f4d-09d1-d875-1201563c152d.png)

```ruby:Labelを使う場合(全体に表示される)
import tkinter as tk

# ウィンドウの作成
root = tk.Tk()
root.title("Test")
root.geometry("256x256")

# ファイルを参照
background = tk.PhotoImage(file="Lenna.png")

# Labelの作成
bg = tk.Label(root, image=background)
bg.pack(fill="x")

# ウィンドウの描画
root.mainloop()
```

#まとめ
Canvasを使って表示した場合に白枠が入っていたため
Labelを使った表示を行うというものでした。
Canvasの枠を消す方法や他に効率の良い方法をご存じでしたら
ご教示頂けますと幸いです。
vCenterでコマンド操作

# vCenter コマンドライン操作

## DCLIコマンドの使い方
1. vCSAへSSHにてrootでログインします。
1. DCLIコマンドに入る
 ```dcli +interactive``` 

### 仮想マシン一覧
```com vmware vcenter vm list``` 
### 仮想マシン操作
- CDROM作成(iso)

```vcenter vm hardware cdrom create --backing-type ISO_FILE --backing-iso-file "iso PATH.ISO" --vm vmid``` 

- CDROM接続
```vcenter vm hardware cdrom connect --cdrom 16000 --vm vmid``` 

- CDROM削除
```vcenter vm hardware cdrom delete --cdrom 16000 --vm vmid```
渋谷のとあるプログラミングスクールの開発チームのEmoji Prefix紹介

## 背景

goodpatchさんの [Emojiで楽しく綺麗なコミットを手に入れる](https://goodpatch.com/blog/beautiful-commits-with-emojis/) に刺激を受けて、弊社でも楽しくて綺麗なコミットにしたいなーと思って、チームメンバーで集まって、絵文字コミットの運用を2019年12月から運用開始しました。

3ヶ月たって、ルールも固まってきたのでQiitaに公開します。

## 弊社の開発チーム概要

- とある渋谷のプログラミングスクールを運営する会社の開発チームです。
- 開発に携わるエンジニアは、4人程度の小規模開発です。
- プログラミングスクールの開発部隊ということで常に新しいものに挑戦しています

## Emoji Prefixとは

Emoji Prefixは「Gitのコミットメッセージの先頭にEmojiをつけよう」というGitコミットメッセージのスタイルガイドです。

[Complete list of github markdown emoji markup] (https://gist.github.com/rxaviers/7360908) をみていただくと、Emoji Prefixに使うことができる絵文字を確認することができます

## 弊社のEmoji Prefixルール

コミットの内容に対応した`<:emoji:>` を以下から適切なものを選び、文頭につけること

**形式：**
`git commit -m "<:emoji:> <content>"`

**例：**
`git commit -m ":monkey:  機能追加しました"`
:monkey:  機能追加しました

| 意味 | 絵文字 | <:emoji:> |
| --- | --- | --- |
| add <br> コード新規追加 | :monkey:  | `:monkey:` |
| modify <br> コード修正 |:banana:  |`:banana:`  |
| remove<br> コード削除 |:skull:  |`:skull:`  |
| fix<br> バグ修正 |:fu:  |`:fu:`  |
| verup<br> ライブラリ(Gemなど)バージョンアップ |:alien:  |`:alien:`  |
| doc<br> README.mdなど文書の追加、修正 |:pencil:  |`:pencil:`  |

### add コード新規追加

:monkey: : (monkey)

addとmodifyはセットで考えてみました。addされたものはリファクタされてmodifyされるべきだと思いますので　サル:monkey:がたくさんきたらやっぱりエサ :banana: をあげないといけないので、どんどんaddしたらmodifyしたくなるのではないかと考えました。

### modify コード修正

:banana: : (banana)

addとセット。サル:monkey:のエサ:banana:ってことです（笑。

### fix  バグ修正

:fu: : (fu)

バグを修正した時の`マジ倒してやったぜ`って気持ちを込めてみました。バグはごく滅したいですね。

### remove コード削除

:skull: : (skull)

addされたサル:monkey:が死ぬ:skull:ということです。

### verup ライブラリ(Gemなど)バージョンアップ

:alien: : (alien)

猿をエイリアンにしていきたい、バージョンアップしていくことで宇宙の真理へと近づいていきたい、という意味を込めてみました。

### doc README.mdなど文書の追加、修正

:pencil: : (pencil)

これは普通に文書といえば:pencil:ってことです。


## emojiコミットを取り入れてみてよかったこと

### コミットの粒度が明確になった

コード新規、修正、削除という粒度でコミットすべきということが明確になりました。

絵文字コミットを決める前は、粒度に明確な決めがなく、個々のエンジニアが決めていたので、これを期に粒度を統一できたことはよかったと思います。

### 楽しいコミットになった

楽しいコミットになって嬉しかった。
**特にバグ修正:fu:は最高です。**

<img width="984" alt="スクリーンショット 2020-03-21 12.01.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112294/0770f113-880e-1209-351a-9c8dfaca880a.png">

### チーム内の雰囲気が良くなった

`Emoji Prefixをやりたい！` って提案してみたところ、一人の新人君がすごくやる気を出してくれて、楽しい絵文字コミット案をたくさん出してくれました。

コミット案ベースで新人君に色々とツッコミを入れたところチーム内の雰囲気が良くなったと実感しました。
Emoji Prefixのお陰で楽しいプロセスを経て決めたせいなのかみんなこのルールを守ってくれています
Photoshopでトランクス描いてみた【イラスト】

# Photoshopでトランクス描いてみた【イラスト】
今回はadobeのソフト**Photoshop**を使用して、イラストの線画と呼ばれる工程を実際に挑戦してみました！！
本来は色塗りもして掲載したかったのですが、失敗しました、、泣

実際に描いたのが下の画像です↓↓
![トランクス.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509309/6b1106ef-930b-ea1b-961e-9d98cfc41769.jpeg)

## イラストも描けちゃいます
下の項目でPhotoshopについては少し紹介してますが写真加工のイメージが強いと思いますが、アニメや漫画でよくみるイラストを描くことが可能です。
↓↓以下記事にてすぐに描ける設定方法など掲載しているの参考にして下さい！！
**<a href="https://cravecreation.net/%e3%80%90photoshop%e3%80%91%e3%81%84%e3%81%be%e3%81%99%e3%81%90%e6%8f%8f%e3%81%91%e3%82%8b%e3%83%96%e3%83%a9%e3%82%b7%e8%a8%ad%e5%ae%9a/">「【Photoshop】今すぐにでも描けるブラシ設定」</a>**
**<a href="https://cravecreation.net/">「イラストメイキング紹介　CRACRE」</a>**

今回使用した機能
- ブラシ
- パス
- レイヤー
- マスク
- アクション機能

線画の段階だとPhotoshopで上記の機能を使用して完成しました。

## Photoshopとは
<font color="LightSkyBlue">Adobe Photoshop</font>
有名なソフトなので一度は聞いた事がある人も多いと思います。
Adobe社が提供しているソフトの1つが
本来は画像加工用のソフトのため、画像編集、写真加工に関しては最強と言えます。デザインやイラストの作成などさまざまな用途に活用できます。
世界中のプロのデザイナーの多くが利用しています。

実際、使用感として個人的には使い易いです！

価格：月額980円/年額11,760円になっています。

## さいごに
Photoshopには現状、7日間のお試し期間があるのでイラスト描いてみたいという方は良ければ試してみて下さい！！

好きな絵を描けるようになってくると楽しいですよ！！
CpawCTF - Quection23 [Reversing] またやらかした！

#CpawCTF - Quection23 [Reversing] またやらかした！

* 問題
    * またprintf（）をし忘れたプログラムが見つかった。
とある暗号を解くプログラムらしい…
    * +実行ファイル

* IDAで逆アセ
    * mainから重要なところだけ抜き出し
    * 値の初期化<br>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416717/5703b6a5-5933-98a5-6bbd-2099635ce8fa.png)
    * 順番に値を入れてって<br>
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416717/e51c871d-43e4-3057-b39a-7cffcc3699ea.png)

    * [ebp+var_80]が0D以下の間だけloc_804847Aをやる
        * [ebp+var_80]は最初0から始まって1ずつインクリメント
        * つまり14回loc_804847Aにはいる
    * loc_804847A
        * [ebp+var_7C]とeaxでxorをとる
        * [ebp+var_7C]は0x19で固定
        * eaxは[ebp+var_78+eax*4]
            * eax*4は0 - 14まで入る
       ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416717/900dd036-a22b-9729-a60d-95eb71cd2d1c.png)

* c++で書き直したあと実行して終了

~~~
#include <bits/stdc++.h>
using namespace std;

#define INF 2e9
#define INF_LL 1LL<<60
#define ll long long

#define REP(i, n) for (ll (i) = 0 ; (i) < (ll)(n) ; ++(i))
#define REPN(i, m, n) for (ll (i) = m ; (i) < (ll)(n) ; ++(i))
#define REP_REV(i, n) for (ll (i) = (ll)(n) - 1 ; (i) >= 0 ; --(i))
#define REPN_REV(i, m, n) for (ll (i) = (ll)(n) - 1 ; (i) >= m ; --(i))

int main(){
    int var[] = {0x7a, 0x69, 0x78, 0x6e, 0x62, 0x6f, 0x7c, 0x6b, 
                    0x77, 0x78, 0x74, 0x38, 0x38, 0x64}; 
    int var2 = 0x19;
    int ans[14];

    REP(i, 14) {
        ans[i] = var[i] ^ var2;
    }

    REP(i, 14) {
        cout << (char)ans[i] << " ";
    }
    cout << endl;

    return 0;
}
~~~
【rails】多対多モデルのデータdestroyで出たエラー

多対多モデルのデータをdestroyしようとしたらエラーが出たときに対処した方法。

```
ActiveRecord::StatementInvalid in MemosController#destroy
Mysql2::Error: Cannot delete or update a parent row: a foreign key constraint fails (`memo-space_development`.`tag_memos`, CONSTRAINT `fk_rails_fe5087fe05` FOREIGN KEY (`memo_id`) REFERENCES `memos` (`id`)): DELETE FROM `memos` WHERE `memos`.`id` = 7
```

```app/controllers/memos_controller.rb
class MemosController < ApplicationController
  before_action :set_memo_content, only: [:show, :edit, :destroy]

  def destroy
    @memo.destroy
  end

  private

  def set_memo_content
    @memo = Memo.find(params[:id])
    @tags =@memo.tags
  end
```

```app/views/shared/_contents_center.html.haml
    .wrapper__contents__center__memo__bottom__icon__delete
      = link_to icon('fas',' fa-trash-alt'), memo_path(@memo), method: :delete
```

### モデル
####   memos table
##### Table Definition
|Column|Type|Options|
|------|----|-------|
|title|string|null: false|
|text|string||
|image|string||
|user|references|null: false, foreign_key: true|
|tag|references|null: false, foreign_key: true|

#### Association
  * has_many :tag_memos
  * has_many :tags, through: tag_memos
  * belongs_to :user

####   tags table

##### Table Definition

|Column|Type|Options|
|------|----|-------|
|name|string|null: false, index: true|
|user|references|null: false, foreign_key: true|

##### Association
  * has_many :tag_memos
  * has_many :memos, through: tag_memos
  * belongs_to :user

####   tag_memos table

##### Table Definition
|Column|Type|Options|
|------|----|-------|
|memo|references|null: false, foreign_key: true|
|tag|references|null: false, foreign_key: true|

##### Association
  * belongs_to :memo
  * belongs_to :tag

##原因

メモデータをdestroyしようとしたときに、中間テーブルに設定された外部キー制約に違反すること。
（削除しようとしたメモデータのIDが、中間テーブルで外部キーに指定されている。）

##対処法①

モデルに、dependent:オプションを設定する。

```app/models/memo.rb
class Memo < ApplicationRecord
  has_many :tags, through: :tag_memos, dependent: :destroy
```

dependentオプションとは、
モデルが削除されるときの、関係づけされたモデルに対する挙動を定義するものです。
とのことです。

##対処法②
中間テーブルのデータを先にdestroyすると、目的のデータもdestroyできた。

```app/controllers/memos_controller.rb
  def destroy
    tag_memo = TagMemo.where(memo_id: @memo.id)
    tag_memo.each do |tm|
      tm.destroy
    end
    @memo.destroy
  end
```

###参考文献
https://www.stacky-health.work/2018/08/17/ruby_on_rails_dependent/
https://qiita.com/Ushinji/items/650fa295a3054d2fe582
git-bashでaliasを使うために.bashrcを作成

git-bashでもよく使うコマンドをalias化しておこうと思ったものの
ホームディレクトリに.bashrc .bash_profile などのファイルが存在しない

.bashrc を作成

~~~
touch ~/.bashrc
~~~

git-bashを起動すると以下のメッセージが表示される

~~~
WARNING: Found ~/.bashrc but no ~/.bash_profile, ~/.bash_login or ~/.profile.

This looks like an incorrect setup.
A ~/.bash_profile that loads ~/.bashrc will be created for you.
~~~

~/.bashrcが見つかったけど、~/.bash_profile などが見つからないので
~/.bashfileを読み込む~/.bash_profileをあなたのために作っておきました

という感じの内容で、以下のファイルが生成されていた。

~~~~
$ cat ~/.bash_profile
# generated by Git for Windows
test -f ~/.profile && . ~/.profile
test -f ~/.bashrc && . ~/.bashrc
~~~~

手持ちの書籍「新しいLinuxの教科書」によると、
bashの設定ファイル読み込み順序は以下のようになっているらしい

ログインシェルとして起動

~~~~
/etc/profileを読み込む
↓
~/.bash_profileを読み込む
↓
~/.bashrcを読み込む（設定になっていることが多い）
~~~~
非ログインシェルとして起動

~~~~
~/.bashrcを読み込む
~~~~

git-bashでもこの作法にのっとった感じに~/.bash_profile を作成してくれるということだろうか
転職日記13日

おはようございます

やっと自分で一つwebサイトを作ることができました。

と言っても、railsチュートリアルを元に自分なりにコンセプトを持ったページや機能を

付け加えただけで、youtubeで語られているようないわゆるrailsチュートリアルに毛が生えた

ようなものという言い方が正しいと思います。

ですが、これを作ってみて得た、あ、俺も作れるんだという成功体験と、

正直、掲示板とかに作ったから見てくれとあげたら禿鷹に狙われた動物の死体のように

肉を啄まれて、骨しか残らないようなこのポートフォリオを奥さんがすごいと褒めてくれたのがとても嬉しかった。

おそらく今月中に就職はできなくなったけど、諦めないで頑張ります。

ここにgithub載せます。そしてよければフィードバックください。

https://github.com/goto-ui/chocolat_lovers

よろしくお願いいたします。
Docker 7歳の誕生日おめでとう！

# これはなに？

ただDockerの誕生日を祝うだけの記事です

```bash
$ docker run -it lukaszlach/7th

                                                              .---,                                       .---,
                                                             /#    `\                          .---,     /#    `\
                                                             |      |                         /#    `\   |      |
                                                             '.   _/   .---,                  |      |   '.   _/
                                                 .---,         `(^    /#    `\                '.   _/      `(^
                                                /#    `\         )    |      |                  `(^          )
                                                |      |        (     '.   _/                     )         (
                                                '.   _/                 `(^                      (
                                                  `(^                     )
                                                    )                    (
                                                   (
                                                                                 .---,
                                      .---,                                     /#    `\
          HAPPY 7th BIRTHDAY         /#    `\                                   |      |
                Docker               |      |                                   '.   _/
                                     '.   _/                                      `(^
               *  *  *                 `(^                                          )
              *|_*|_*|*_                 )                                         (
          .-'`|* |* |*| `'-.            (
          |`-............-'|
          |                |
          \   _  .-.   _   /
        ,-|'-' '-'  '-' '-'|-,
      /`  \._            _./  `\
      "._    `""""""""""`    _."
         `''--..........--''`

      https://docker.com/birthday

```
Serverless Frameworkのlambdaアプリにカスタムドメインを付与する

[前回作成したLaravelのサーバレスアプリ](https://qiita.com/umihico/items/64fcf159f68ebd866170)にカスタムドメインでアクセスできるようにします。 
ACMで証明書を取得します。Route53経由の方はDNS経由で簡単に取得できます。サブドメインはワイルドカードで申請するのみです。
**Lambda関数がEdgeの場合は、`us-east-1`(バージニア北部)のACMである必要があります。東京のACMは関係ありません。**

<img width="1359" alt="スクリーンショット 2020-03-21 10.54.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256466/fffa0073-78c4-5390-6d74-49f64c3fd5c9.png">

発行済になったら`serverless-domain-manager`のインストールします。[a4e6e25d](https://github.com/umihico/laravel-demo/commit/a4e6e25d6f0bad21ee835888f49eb77b5c5644b7)

```bash
$ npm install serverless-domain-manager --save-dev
```

`serverless.yml`を編集します。[8c313faf](https://github.com/umihico/laravel-demo/commit/8c313faf7c3f81f0ba072dbf4bbe0fbf3e5c0329)


```diff:serverless.yml
+ custom:
+   customDomain:
+   domainName: laravel-demo.umihi.co
+     certificateName: umihi.co
+     basePath: ''
+     stage: ${opt:stage, self:provider.stage}
+     createRoute53Record: true
+     endpointType: 'edge'
+     securityPolicy: tls_1_2

provider:
  name: aws
  region: ap-northeast-1
  runtime: provided

plugins:
  - ./vendor/bref/bref
+   - serverless-domain-manager

```

最後に`sls create_domain`して`sls deploy`しますが、`create_domain`実行後は最大４０分待つ必要があります。

```bash
$ sls create_domain
Serverless: Custom domain laravel-demo.umihi.co was created.
            New domains may take up to 40 minutes to be initialized.

$ sls deploy
Serverless: Packaging service...
Serverless: Excluding development dependencies...
Serverless: Uploading CloudFormation file to S3...
Serverless: Uploading artifacts...
Serverless: Uploading service laravel-demo.zip file to S3 (14.2 MB)...
Serverless: Validating template...
Serverless: Updating Stack...
Serverless: Checking Stack update progress...
..............
Serverless: Stack update finished...
Service Information
service: laravel-demo
stage: dev
region: ap-northeast-1
stack: laravel-demo-dev
resources: 12
api keys:
  None
endpoints:
  ANY - https://td3rzowchc.execute-api.ap-northeast-1.amazonaws.com/dev
  ANY - https://td3rzowchc.execute-api.ap-northeast-1.amazonaws.com/dev/{proxy+}
functions:
  website: laravel-demo-dev-website
layers:
  None
Serverless: Created basepath mapping.
Serverless Domain Manager Summary
Domain Name
  laravel-demo.umihi.co
Distribution Domain Name
  Target Domain: aaaaabbbbbcccc.cloudfront.net
  Hosted Zone Id: XXXXYYYYYZZZZZ
Serverless: Run the "serverless" command to setup monitoring, troubleshooting and testing.
```

https://laravel-demo.umihi.co にアクセスできるようになりました。
カスタムドメイン＋証明書＋サーバレス＋Laravelの完成です。

Cloudfrontの文字が見えますが、当該IDは、 https://console.aws.amazon.com/cloudfront
には無く、API Gateway配下の https://ap-northeast-1.console.aws.amazon.com/apigateway/main/publish/domain-names
で確認できます。
簡単なゲームを作ってみよう(Win or Lose)

#簡単なゲームを作ってみよう

[ドットインストール](https://dotinstall.com)の[はじめてのJavaScript](https://dotinstall.com/lessons/basic_javascript_v4)で「#11 簡単なゲームを作ってみよう」をやっあと、
ふと思い立ったのでFlutterで作ってみました。

#仕様

1. 5つのマスがあり、5つのうちランダムで1つが「Win」、4つが「Lose」になる。
2. 「Lose」が選択された場合、マスに"Lose!"が表示される。
3. "Lose!"が表示されるのと同時にマスが小さくなる。
4. 「Win」が選択された場合、マスに"Win!"が表示される。
5. "Win!"が表示されるのと同時にマスが青からピンクに変わり、回転しながら四角形から円に変わる。

こんなところでしょうか。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140080/254e1abe-7225-3d04-0321-9687bf90b178.gif" width=50% height=50%>

#作ってみる

とりあえず、以下がマスを操作するソースコードです。
もっと効率の良い書き方や操作の仕方、お行儀の良い書き方など教えていただければありがたいです。

* winnerはランダムで「Win」を設定しています。
* for文でマスをつくり、リストのindexとwinnerとが一致したら「Win」の操作、それ以外は「Lose」の操作をします。
* RotationTransitionでマスの回転、AnimatedPaddingとAnimatedContainerでマスのサイズ、色の変更、文字の挿入をしています。


```Dart
class MyCard extends StatefulWidget{
  MyCard({Key key, this.index}) : super(key: key);

  final int win = winner;
  final int index;

  @override
  _MyCardState createState() => _MyCardState();
}

class _MyCardState extends State<MyCard> with SingleTickerProviderStateMixin {
  Color _mycolor = Colors.blue[500];
  String _mytxt = '';
  double _width = 100, _heigth = 100, _padding = 10, _radius = 0;

  final Tween<double> turnsTween = Tween<double>(
    begin: 1,
    end: 2,
  );
  AnimationController _controller;

  initState() {
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return card();
  }

  void _winorlose(){
    setState(() {
      if (widget.index == widget.win) {
        _mycolor = Colors.pink[100];
        _mytxt = 'Win!';
        _radius = 100;
        _controller.forward();
      } else {
        _mytxt = 'Lose!';
        _width = 80;
        _heigth = 80;
        _padding = 20;
      }
    });
  }

  Widget card() {
    return GestureDetector(
      onTap: () {
        _winorlose(); 
      },
      child: RotationTransition(
        turns: turnsTween.animate(_controller),
        child: AnimatedPadding(
          duration: const Duration(milliseconds: 500),
          padding: EdgeInsets.all(_padding),
          child: AnimatedContainer(
            duration: const Duration(milliseconds: 500),
            width: _width,
            height: _heigth,
            child: Center(
              child: Text(_mytxt),
            ),
            decoration: BoxDecoration(
              color: _mycolor,
              borderRadius: BorderRadius.circular(_radius),
            ),
          )
        ),
      ),
    );
  }
}
```

#こんな感じになりました
<img = src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140080/b6d8dbdb-9477-1b4b-2513-1341ac4c0732.gif" width=50% height=50%>

#終わりに
読んでいただきありがとうございました。
そういえば、Google Mapsの操作も放置したままだったな。。。
【KMapper/KRowMapper】null入力を無視してマッピングを行う【Kotlin】

自作ライブラリ、`KMapper`/`KRowMapper`の機能紹介です。

- [Kotlin向けModelMapper的なライブラリ、KMapperを作った \- Qiita](https://qiita.com/wrongwrong/items/10048638e9fb4a652b01)
- [Kotlin向け高機能RowMapper、KRowMapperを作った \- Qiita](https://qiita.com/wrongwrong/items/59ce062e62e7edc39c80)
- [ProjectMapK](https://github.com/ProjectMapK)

バージョンは`KMapper 0.17`/`KRowMapper 0.4`で書いています。

# null入力を飛ばしてマッピングを行う
`ProjectMapK`で作成しているマッピングライブラリでは、`null`不許可の引数に対しても、渡された値が`null`であれば`null`を渡しています[^hosoku]。

一方、場合によっては[複数入力](https://qiita.com/wrongwrong/items/0578aba623abf6de1b59)の内`null`でないもの、あるいはデフォルト値を用いたいという場合も有ります。
そのような場合、以下のように`KParameterRequireNonNull`アノテーションをパラメータに付与することで、null入力を無視したマッピングが行えます。

```kotlin
data class Dst(val fooId: Int, @KParameterRequireNonNull val barStr: String = "default value")
data class Src(val fooId: Int, val barStr: String?)

val src = Src(1, null)

val dst = KMapper(::Dst).map(src)
println(dst) // -> default value
```

[^hosoku]: これはライブラリが極力黒魔術的な挙動にならないよう、「先に入力された引数が正」という方針を取っているためです。
Cloud Run のgrpc  portについて

Cloud Run のgRpc portは、今は、443のみ！？

https://github.com/salendron/google-cloud-run-golang-grpc-auth-demo


> address: this has to be the address of your demo server service, without https, but with posrt > 433. This is important, because Cloud Run will allow acccess to your service only vie port 443, > no matter on which port the server internally started.


https://medium.com/@petomalina/%EF%B8%8Fserverless-grpc-with-cloud-run-bab3622a47da


やられた～。
std::vector<クラス> の初期化でNo matching constructor for initialization

大きいサイズのstd::vectorに値を追加していく際はpush_back()は遅いので，最初に空の配列を用意し，要素代入で初期化してゆくほうが速いとのこと．これをクラスのvectorでやろうと思ったときにハマったのでメモ．

以下のページで解決した．

* [create a vector of instances of a class in c\+\+ \- Stack Overflow](https://stackoverflow.com/questions/19657728/create-a-vector-of-instances-of-a-class-in-c)

```c++
// Nはサイズ，Student(0)でコンストラクタを呼び出している．
std::vector<Student> vec(N, Student(0));

``` 

もしStudentクラスがデフォルトコンストラクタを持っていなければ，

```c++
std::vector<Student> vec(N);
```
とするとコンストラクタが呼び出せずエラーになる．(No matching constructor for initialization of "...")

No matching constructor for initialization of ...のエラーについては下記記事もまとまっていて良い．

* [error: No matching constructor for initialization of ‘T’ エラーの対処 \| MaryCore](https://marycore.jp/prog/xcode/no-matching-constructor/)
【解決方法】Macで gem ffi の インストール (アップデート) に 失敗する

# 問題

`bundle update`を実行した際に、**ffi** のインストール(アップデート)に失敗した

```terminal
$ bundle update

# ...(略)

Fetching ffi 1.12.2 (was 1.10.0)
Installing ffi 1.12.2 (was 1.10.0) with native extensions
Gem::Ext::BuildError: ERROR: Failed to build gem native extension.

# ...(略)

extconf failed, exit code 1

Gem files will remain installed in /Users/xxxxx/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/ffi-1.12.2 for inspection.
Results logged to /Users/xxxxx/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/extensions/x86_64-darwin-18/2.6.0-static/ffi-1.12.2/gem_make.out

An error occurred while installing ffi (1.12.2), and Bundler cannot continue.
Make sure that `gem install ffi -v '1.12.2' --source 'https://rubygems.org/'` succeeds before bundling.

In Gemfile:
  middleman was resolved to 4.3.6, which depends on
    middleman-core was resolved to 4.3.6, which depends on
      listen was resolved to 3.0.8, which depends on
        rb-inotify was resolved to 0.10.1, which depends on
          ffi

```

# 試したこと

**ffi** をバージョン指定でインストール(アップデート)しようとしても失敗した

```terminal
$ gem install ffi -v '1.12.2'

Building native extensions. This could take a while...
ERROR:  Error installing ffi:
        ERROR: Failed to build gem native extension.

# ...(略)

```

# 解決方法

**Xcode Command Line Tool** をインストールした上で、**ffi** をインストール(アップデート)したら成功した

```terminal
$ xcode-select --install

xcode-select: note: install requested for command line developer tools
```

```terminal
$ gem install ffi -v '1.12.2'

Building native extensions. This could take a while...
Successfully installed ffi-1.12.2
Parsing documentation for ffi-1.12.2
Installing ri documentation for ffi-1.12.2
Done installing documentation for ffi after 41 seconds
1 gem installed
```
FizzBuzz問題のリファクタリング【Ruby】

## 修正ポイント
- if文のネストをなくす
- 条件が当てはまる確率が低い方から先に記述
- while分をeachメソッドに変更
 - 変数の数を減らす
 - コードを減らす

## リファクタリング前
```ruby
def fizzBuzz(count)
  i = 1
  while i < count + 1 do
    if i % 3 == 0 then
      if i % 5 == 0 then
        puts 'FizzBuzz'
      else
        puts 'Fizz'
      end
    elsif  i % 5 == 0 then
      puts 'Buzz'
    else
      puts i
    end
    i += 1
  end
end

fizzBuzz(20)
```
## リファクタリング後
```ruby
def fizzBuzz(count)
  (1..count).each do |c|
    if    c % 15 == 0
      puts 'FizzBuzz'
    elsif c %  5 == 0
      puts 'Buzz'
    elsif c %  3 == 0
      puts 'Fizz'
    else
      puts c
    end
  end
end

fizzBuzz(20)
```
Excelに数式内で変数を定義できるLET関数が追加されるらしい

マイクロソフトのサイトでは、プログラミング言語でいう**変数**というワードではなく、計算結果に名前を割り当てるもの、と説明されている。

# 仕様
詳細は [**LET 関数**](https://support.office.com/ja-jp/article/let-%E9%96%A2%E6%95%B0-34842dd8-b92b-4d3f-b325-b8b8f9908999) を参照して欲しい。

```:構文
= LET (name1, name_value1, calculation_or_name2 [name_value2, calculation_or_name3...])
```

VBAのLETステートメントとは別物。（もっとも、LETステートメントは省略できるので書いている人を私は見たことが無い。Visual Basicの元になったBASIC言語の初心者向けマニュアルにはLETが頻出していたと記憶するが・・・）

# 使用例
A1セルにある、氏名「山田　太郎」から、名「太郎」のみを抽出するとき、

```
= RIGHT(A1, LEN(A1) - FIND(" ", A1))
```

のように書いていたと思う。事務屋さんでは良く出てくる式だ。
LETを使うと次のように書ける。

```
= LET(name, A1, RIGHT(name, LEN(name) - FIND(" ", name)))
```

式としては長くなっているが、参照先がひとつなので保守性が高い。
この例だと名前付きセルと大差ないが、分かり易さ優先で挙げた。
入れ子になると見にくいので、今後は、数式エディタというかフォーマッタの実装が期待される。

# その他
[Microsoft Tech Community](https://techcommunity.microsoft.com/t5/excel-blog/announcing-let/ba-p/1233572)では、「Excelが同じ計算を繰り返す必要がないため、LET関数使用時は2倍の速さで計算できる」と説明している。

Office Insiderでは既に使えるので、興味のある人は試してみたら如何だろうか :point_right_tone2: [**Office Insider になる**](https://insider.office.com/ja-jp)
正式リリースは2020年の後半を予定しているとのこと。

先日のXLOOKUP関数リリースといい、最近のOfficeは進化が速いので、ウォッチしておくと良いかも。
【Django】ModelFormにてあらかじめ入力値を与える方法

##ModelFormとは
ModelFormとはdjango.forms.Modelformで呼び出すことができるあらかじめ用意されているインスタンス。このインスタンスを継承したFormクラスを作成することで、Models.pyに定義したテーブルをそのままに参照できる。つまり、ユーザーからのフォーム入力によってデータベースへの登録や更新を行いたいときに用いられる。

##今回のテクニックはどこで使うのか？
例えば「タイトル、現在時刻、作成者」をフィールドに持つデータモデルについて、ユーザからのフォーム入力を実装するとき、わざわざ現在時刻と作成者をユーザにうたせる作業はUXを下げてしまう。そういった、ユーザにわざわざうってもらう必要のない情報や自動的に情報を与えたいときなどにフォームに初期値を与えて、該当するフィールドを非表示(Hidden)にしてしまう方法によって実現できる。

##まずテンプレート上での非表示の設定の仕方
```python:forms.py
from django import forms
from .models import Event


class EventCreateForm(forms.ModelForm):

    class Meta:
        model = Event
        fields = ('eventtitle','eventdate','location','agenda','author')
        widgets={'author':forms.HiddenInput()
        }
```

ModelFormを知らない方へ軽く説明しておくと、基本的にMetaクラス内で様々な条件をうっていきます。model変数にはmodels.pyのEventクラスをインスタンス化させて指定します。fields変数にはリスト型でフォームにいれるフィールドを指定します。

widgets変数はフィールドのhtmlでのinput表示を変更したり、エラーメッセージの指定など様々なオプションを指定できます。

**今回まずこのwidgets内にてauthorフィールドをHiddenInputにして非表示にしています。**

##views.pyでのフォーム情報の追加
```python:views.py
from django.contrib.auth.models import User
from .forms import EventCreateForm

def createeventfunc(request):
    if request.method == 'POST':
        form =EventCreateForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('遷移先')
        return render(request,'createevent.html',{'form':form})
    #Getメソッドの時、下を実行
    #default_dataにてauthorフィールドへの値をセット
    else:
        default_data = {'author':User.objects.get(pk=request.user.pk)}
        form = EventCreateForm(default_data)
        return render(request,'createevent.html',{'form':form})
```

formオブジェクトを作る際にデフォルトの値を引数をして与えられます。
上の例ではまずGetメソッドでurlおよびcreateeventfunc()が呼び出された場合、author:ログイン中のユーザのid(pk)をデフォルトのデータとしてformオブジェクトを生成。そしてそのformオブジェクトをレンダーしています。
form内でsubmitが押されたとき(POST送信とします)、上のif文が実行されます。form.save()とするだけでデータベースへの登録が完了します。
決定係数

# 決定係数
2変数間の関係を直線

$$ \hat{y} = ax + b $$

で近似した場合の当てはまりの良さを示す指標
最小二乗法によるフィッティングした場合は、$R^2 = r_{xy}^2$ であり常に０以上 
（$\hat{y} = \infty $ のとかするとマイナスになる)
決定係数が１に近いほど良いモデル

## 定義
$$ R^2 = 1 - \frac{\displaystyle\sum_{i=1}^{n}\( y_i - \hat{y_i}\)^2}{\displaystyle\sum_{i=1}^{n}\(y_i - \overline{y}\)^2} = \frac{残差変動}{全変動} = r_{xy}^2
\qquad
\hat{y_i} \ は回帰で予測された値
$$

|変動|意味|
|---|---|
|全変動|データのばらつき|
|残差変動|回帰モデルと実際の値のずれ|

全変動（$\hat{y} = \overline{y}$ で回帰モデル作成）に対してどれくらい誤差が少なくなったか？
残差変動=0（完璧に予測）の場合は$R^2=1$ となり
$R^2=0$ の場合は $\hat{y} =\overline{y}$ で予測するのと同じという意味 


## 相関係数の２乗である事の証明
最小二乗法でフィッティングした場合は、

$$ 
\hat{y} = ax + b \quad a = \frac{S_{xy}}{S_x^2} \quad b = \overline{y} - a\overline{x}
$$ 

において


```math
\begin{align}
全変動 &=  \displaystyle\sum_{i=1}^{n}[(y_i -(ax_i +b)]^2
\\\\[1pt]
&= \displaystyle\sum_{i=1}^{n}[y_i - \overline{y} - a(x_i  -  \overline{x} )]^2
\\\\[1pt]
&= \displaystyle\sum_{i=1}^{n}[(y_i - \overline{y})^2 - 2a(y_i - \overline{y})(x_i  -  \overline{x} ) + a^2(x_i  -  \overline{x} )^2]
\\\\[1pt]
&=\displaystyle\sum_{i=1}^{n}(y_i - \overline{y})^2 - 2a\displaystyle\sum_{i=1}^{n}(y_i - \overline{y})(x_i  -  \overline{x} ) + a^2\displaystyle\sum_{i=1}^{n}(x_i  -  \overline{x} )^2
\\\\[1pt]
&= nS_y^2 - 2\frac{S_{xy}}{S_x^2}\displaystyle\sum_{i=1}^{n}(y_i - \overline{y})(x_i  -  \overline{x} ) + (\frac{S_{xy}}{S_x^2})^2\displaystyle\sum_{i=1}^{n}(x_i  -  \overline{x} )^2
\\\\[1pt]
&= nS_y^2 - 2\frac{S_{xy}}{S_x^2}\frac{n}{n}\displaystyle\sum_{i=1}^{n}(y_i - \overline{y})(x_i  -  \overline{x} ) + (\frac{S_{xy}}{S_x^2})^2\frac{n}{n}\displaystyle\sum_{i=1}^{n}(x_i  -  \overline{x} )^2
\\\\[1pt] 
&= nS_y^2 - 2n\frac{S_{xy}^2}{S_x^2} + n(\frac{S_{xy}}{S_x^2})^2S_x^2
\\\\[1pt]
&= nS_y^2 - n\frac{S_{xy}^2}{S_x^2}
\end{align} 
```

一方、
$$
残差変動 = \displaystyle\sum_{i=1}^{n}(y_i - \overline{y})^2 = nS_y^2
$$
なので

```math
\begin{align}
R^2 &= 1 - \frac{残差変動}{全変動} 
\\
&= 1 - \frac{nS_y^2 - n\frac{S_{xy}^2}{S_x^2}}{nS_y^2} = \frac{S_{xy}^2}{S_x^2S_y^2} 
\\
&= r_{xy}^2
\end{align} 
```

### 平面への当てはめ
３変数　$y$ = 年齢、$x_1$ = 最高血圧（mmHg）、$x_2$ = 肺活量（ml）に対して

$$y = b_1x_i + b_2x_2 +a$$

と、年齢を３次元の重回帰で表現した場合、決定係数は平面への当てはまり具合となる

重回帰分析では変数が増えるほど決定係数は1に近づくため、変数の数が多い場合は自由度修正済み決定係数を使用する

##多項式回帰
明らかに直線で表現できない事が分かっている場合は、２次式、３次式で表現を試みるのは自然
これらの方法は多項式回帰と呼ばれ、直行多項式（多項式同士の内積$=0$）で表現する

$$ f(x) = a_0 + a_1\phi_1(t) + a_2\phi_2(t) + \cdots + a_n\phi_n(t)$$
Kobitoの代わりにQuiver

# メモ方法の模索

自分のメモ代わりに記録を残す手段を模索しているが、

* Word
* Evernote（外に出せない内容はかけない）
* Kobito
* 普通にMarkdown (MacDownか、VS Code+Preview plugin)
* 表示は[gitbook](https://www.gitbook.com/)をかませて見やすく
* 最近は[docsify](https://docsify.js.org/)

と移行してきた。

参考：[docsifyでgitbookやSphinxより手軽にドキュメントサイトを構築](https://qiita.com/ronny/items/3590d87e712a34f69ad8)

もちろん.mdファイルをまとめておけば良いんだけど、
たまにメモを整理しておきたい欲求もある。
（特にMacでのメモ、タグ付けして整理したい）

docsifyもgitbbookも良し悪しである（ゴリゴリのエンジニアではないので）。
で、Kobitoを探したら普通にサポート終了してた（気づくの遅い）

まあ、ドキュメント増えたらバンバン強制終了するようになったので、
普通に使うのが苦しくなって、移行した経緯もある。

# Kobito-likeなソフトはないのか？

正直markdown記法に慣れるとそこまで負担ではなく、GUIに依存しなくなったが、
とはいえKobito-likeはインターフェースは確かに使いやすく、
何かないのかということで調べてみたら、「Quiver」に移行してた話を発見。

参考：[Kobitoのサポートが終了してしまったので、Quiverに移行するスクリプトを書いた](https://qiita.com/jnchito/items/3a6861c179e2ab4a28a2)

# 使用感

ということで使ってみた感想（これもQuiver使用して記載）

## 良いところ

* 普通に使える
* タグ付けやNotebookの分類も良い感じ
* テーマはSpacegrayが良い感じ（前述のサイト同様）
* 特に日本ご使用は問題なし
* 画像貼り付けも簡単
  * 画像の内容によっては使い分けが良いかも（QiitaはAWSに自動アップロードだった）
  * 画像もlocal保存のよう（[Quiverのnoteはどのように管理されているか](https://qiita.com/nishiys/items/92bd4de881d50b0aaa60)）

![FB7EFBA1860BD9144D01CAB1F30246E8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152580/ed1d76f5-86b1-4de5-b31f-345044d8a797.png)

## ちょっとイマイチ

* Linkを貼るには上のバー（または⌘K）で呼び出す（「⌘」は「コマンド」で出てくる：[参考](https://twi-papa.com/archives/3858)）
  * Linkをつけるときに「http://」が既に入っているが、ちょっと邪魔（アドレスをまるごとコピペするので、しかもhttp!）
* Webからコピペするとスタイルが残るので、これまた上のバーから「Paste and Match style」でテキストのみ貼り付ける

どちらも右クリックで呼び出せると有り難い。

# 結論

結構便利。

上述の画像ののようにプレビュー画面もあるが、ほぼ要らない（今のところ）。
使い勝手が良さげなので、しばらく使ってみよう。

## 要望

* 今のところ、markdownでexportしてQiitaに貼り付けてちょっと整形しているので、（h1タグとか付け直しなので）誰か、Qiitaへの自動投稿とか作ってくれないかな。
* あと、Windowsも使う身なのでMac限定を外してほしいな。

## 余談

QiitaとしてはWebでそのまま書いてくれということなのかな？
dockerのvolumeとbindmountsの違い

# この記事の目的

dockerのvolumeとbindmountsの違いについてまとめる

# volumeとは

https://docs.docker.com/storage/volumes/

dbなどのデータを永続化させるためのものでbindmountと違うのはbindmoutはhostマシーンにデータを置くのに対してvolumeはdocker上に置くので完全に他のcontainerと独立できる。

# bind mountとは

https://docs.docker.com/storage/bind-mounts/

# 補足：tmpfsマウント

実はtmpfsマウントと言うのもあってこれはhostマシーンにもvolumeにも保存しないでメモリに保存されると言うもの。セキュリティ的にどちらにも置けないと言う特殊状況でのみ使うものなのであまり関係ない。
[Git]Cheat Sheet

# 目次

## 1. ローカルレポジトリをリモートレポジトリの時点まで全て戻す

 
```[shell]
$ git reset --hard origin/master
```

## 2. `.gitignore`を書き忘れた際にgit管理対象から外す

`--cached`オプションを付けることにより、ファイルを残したまま管理対象から外すことが可能

- ファイルの場合

```[shell]
git rm --cached [削除したいファイル]
```

- ディレクトリの場合

```[shell]
git rm -r --cached [削除したいディレクトリ]
```
編集した値を画面の入力値にセットする。

# したいこと
※自分用（メモとして記述）
編集した値を画面の入力値にセットする。


# 編集した値を画面の入力値にセットする。


画面の入力値A,Bを取得して、
[A] + [半角スペース] + [B]に編集して画面.Cに出力する。
・画面の入力値A,Bを取得
        String p_A = g_pp.g_fv.getValue("A");
        String p_B = g_pp.g_fv.getValue("B");
・[A] + [半角スペース] + [B]に編集
        String C =p_A + "半角スペース" + p_B;
・画面に出力する。
        g_pp.g_fv.setValue("c", c);

# 画面出力の解説
g_pp.g_fv.setValue("c", c);
g_pp -g_pp[0]   -g_fv

例
[0]←HDR
[1]←HDR
[2]←DTL
だとして
本来は画面指定が必要[g_pp[0]]など、
だが、画面が指定されている場合は指定は不要。


# g_ppとは
        PtnParam g_pp プログラム全体に対するパラメータを設定

# g_fvとは
        どの画面の形式かを指定
        g_fv 入力値（１件用）。
        g_fv2 入力値（一覧用）。
        g_fv3 入力値（マトリックス用）。
RUSTFLAGS の設定方法

備忘録です。

##bash
シェル変数に設定。シェルを終了すると設定は失われる。

```bash
$ RUSTFLAGS="-Ctarget-cpu=native -Cpanic=abort"
```

`export`すると環境変数に設定される。消すときは`unset`。

```bash
$ RUSTFLAGS="-Ctarget-cpu=native -Cpanic=abort"
$ export RUSTFLAGS
$ unset RUSTFLAGS
```

##PowerShell
シェルを終了すると設定は失われる。

```
PS> $env:RUSTFLAGS="-Ctarget-cpu=native -Cpanic=abort"
```

##.cargo/config
`~/.cargo/`ディレクトリ内の [config](https://doc.rust-lang.org/cargo/reference/config.html)ファイルに設定を記述する。デフォルトでは`config`ファイルは存在しないので作成し以下記述する。設定はすべてのビルドに適用される。

```toml
[build]
rustflags = ["-Ctarget-cpu=native", "-Cpanic=abort"]
```

プロジェクト毎に設定したいときは /some_project/.cargo/config に置けばよい。

また、下記のようにエイリアスを設定しておけば、`cargo r`だけでビルドできる。

```toml
[alias]
r = "rustc --release -- -Clto=fat -Ccodegen-units=1 -Ctarget-cpu=native -Cpanic=abort"
```

##VSCode
settings.json に以下を記述。すべてのワークスペースに適用される。

```json:settings.json
"terminal.integrated.env.(linux|windows)": {
    "RUSTFLAGS": "-Ctarget-cpu=native -Cpanic=abort"
}
```

ワークスペース毎に設定するときは、hoge.code-workspace に以下を記述。

```json:hoge.code-workspace
"settings": {
	"terminal.integrated.env.(linux|windows)": {
		"RUSTFLAGS": "-Ctarget-cpu=native -Cpanic=abort"
	}
}
```

##参考
- [Codegen Options](https://doc.rust-lang.org/rustc/codegen-options/index.html)
- [Cargo Configration](https://doc.rust-lang.org/cargo/reference/config.html)
- [Cheap tricks for high-performance Rust](https://deterministic.space/high-performance-rust.html) (-Clto=fat -Ccodegen-units=1 めっちゃ最適化するやつ。ただしビルド遅い。)
魔法JS☆あれい 第5話「joinなんて、concatなわけない」

登場人物

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

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

第1部「ミューテーター・メソッド編」
* [第1話「popでpushした、ような……」](https://qiita.com/8amjp/items/e44e707ccc8c95b4a40d)
* [第2話「shiftはとってもunshiftって」](https://qiita.com/8amjp/items/3fc1b2defd28ba1c2df3)
* [第3話「もうsortもreverseも怖くない」](https://qiita.com/8amjp/items/86f5294981fbebd3fe2d)
* [第4話「fillも、spliceも、copyWithinもあるんだよ」](https://qiita.com/8amjp/items/0741e35b70ea32711265)

## join()

イテレー太「えー、私が魔法世界からデータを召喚しますので、皆さんは魔法少女になって、配列魔法でそのデータを加工して敵を倒してください。はい、あれいさん早かった」
あれい「なんで大喜利チックなんだよこの駄犬」
イ「さて、今回から第2部『アクセサ・メソッド編』なので、大きな制約が加わるよ！　それは『元のデータを変更してはいけない』という制約だよ！」
あ「へえ」
イ「この制約を破ると、それはそれは恐ろしいペナルティを課せられるから気をつけてね！」
あ「例えばどんなペナルティだよ」
イ「自動販売機のお釣りが必ず100円玉とか10円玉ばっかりで返ってくるよ！」
あ「どうでもいいなそりゃ」
イ「さて、気を取り直して、今回僕が魔法世界から召喚したデータは……これだ！」

```js
items = ['崖', '上', 'ポ○ョ'];
```

イ「これを……」
あ「……まさかとは思うが、これを『の』で繋げて『崖の上のポ○ョ』にしろ、とか言わないだろうな」
イ「すごい！　鋭いね、あれい！」
あ「誰でもわかるわ。この行為に何の意味があるんだ」
イ「じゃあ`['風', '谷', 'ナウ○カ']`にする？」
あ「どっちでもいいわ」

```js
return items.join('の');
```

イ「やった！　敵が苦しんでるよ！」
あ「これでダメージ受ける敵もどうかと思うぞ」

### 解説

> `join()` メソッドは、配列 (または[配列風オブジェクト](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects)) の全要素を順に連結した文字列を新たに作成して返します。区切り文字はコンマ、または指定された文字列です。配列にアイテムが一つしかない場合は、区切り文字を使用せずにアイテムが返されます。

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

昔からよく使われるお馴染みのメソッドですね。
私はCSVを作る時に多用してます。

## concat()

イ「さて、続いてのお題にまいりましょう」
あ「だから大喜利じゃねえよ」
イ「今回僕が魔法世界から召喚したデータは……あれ？」

```js
items = ['とっても'];
```

あ「おい、要素がたった1個かよ」
イ「いや、月末だから通信速度制限がかかっちゃって……」
あ「スマホかよ」
イ「あ、来た来た、次のデータだ」

```js
items2 = ['すごい'];
```

あ「おい、早くしろよポンコツ」
イ「ちょっと待って……最後のデータが届くから」

```js
items3 = ['攻撃'];
```

あ「やっと揃ったか」
イ「ごめんごめん。さて、今召喚した3つの配列を、1つに連結してから`return`して敵を倒してよ！」
あ「面倒くせえなあ……」

```js
return items.concat(items2, items3);
```

イ「良かった良かった。早く翌月にならないかな」
あ「魔法生物が料金プランをケチってんじゃねえよ」

### 解説

> `concat()` メソッドは、配列に他の配列や値をつないでできた新しい配列を返します。

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


「concat」は「concatenate」の略で、「鎖状につなぐ」「連結する」という意味です。複数の配列を連携して、1つの配列として返します。使用されたそれぞれの配列には変更を加えません。

## 次回予告

indexOfちゃんは、配列内の要素を探すために前から検索するんでしょ？ 
あの子はindexOfじゃない、後ろから検索するlastIndexOfなんだよ？

[第6話 indexOfなの絶対lastIndexOf](https://qiita.com/8amjp/items/f7e421722e419c1c0a7d)
数十分で始める、Svelte+Firebaseのアプリ生活。

#序
数日前に、[ES2015以降をお勉強するのに、Svelte REPLが楽しかった](https://qiita.com/e-a-st/items/46e39fee451f5006f451)ので、Svelte+Firebaseでwebアプリを作ってみたいと思った（最近、オウンドメディア的なものを作りたいなと思っているもので）。

## Svelteとは？
JSを知っていてSvelteって何という人は、[Svelteで始める頑張らないフロントエンド生活](https://sbfl.net/blog/2019/12/04/svelte-frontend-1/)を参考にすると良い。作ってくれているtodoアプリをどうfirebase化するかは、良い例題となりそう。

#SvelteFireを使って、１時間以内でアプリを作り始める。
Firebaseのエキスパートの方が作ってくださっている[SvelteFire](https://github.com/codediodeio/sveltefire)を元にすると、（朝食のカレーを作ったり食べたりしながら）ほぼ１時間でCloud firestoreに書き込めるところまで行けた。

フロントエンド:
![あぷり.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16455/4fa001a9-de79-f06b-c03d-1d2518e1d0d4.png)

Firestore側:
![firestore.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16455/0947d98e-0924-913a-0eb3-1ab9f0ae0739.png)


以下、Windowsマシンでの作業前提。
https://github.com/codediodeio/sveltefire
# 1)　nodejs+gitforwindowsのインストール
nodejsは、windowsの普通のインストーラーを使った。結構時間がかかった（２０分くらい）
途中から、gitforwindowsも入れると、普通のbashコマンドで、node/npmを扱えるようになる。

# 2) 開発用firebaseアプリ（サーバ側）」の作成
1)と並行してfirebaseにログインし、アプリを設定。firebase初めての人は２０分くらいかかるだろうが、firebase使ったことがあれば３分で終わる。SvelteFireを開発者モード使い始めるためには、アプリ名を決めた後、『匿名ログイン』を許可し、『テストデータベース』にしておく。

普通にfirebaseアプリを作成するのみなので、委細は略。

# 3) 開発用sveltefireアプリ（クライアント側）の導入
おすすめに従い、作業フォルダにsveltefire-template経由でインストールした(npx使用)

```
npx degit codediodeio/sveltefire-template fireapp
cd fireapp
npm install
```
node/npm環境が正常にインストールされていれば、fireappのインストールまで１分もかからないはず。

フォルダ構成:
![ふぃ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16455/b5c2a6be-9c54-2f74-3a0b-593d84c1577f.png)


fibebaseと接続するための設定はただ一点。App.svelte以下の`var firebaseConfig = {...}`のところに、firebaseアプリの設定を貼り付けるのみ。
![コンフィグ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16455/d81bc194-a538-d571-30d5-ae311c350168.png)
※ちなみに、↑はvscodeにsvelte拡張を入れた後の画面。

# 4) 実行
`npm run dev`すると、以下から、svelteアプリにアクセスできるようになる。
http://localhost:5000/

App.svelte等を書き換えると自動でリロードしてくれるので、さっそくにはかどる。

ここから後は、適宜sveltefireを見ながら、クライアント側をsvelteで書いていくことになる。
https://github.com/codediodeio/sveltefire

あと、firebase-toolsは別途入れておいたほうがいいね。

```
npm install -g firebase-tools
```
..おや、gitforwindowsではなく、コマンドプロンプトでしかfirebaseのCLI認証ができないのか。。
おしまい。
第05回　独自開発した「ニューロ型データベースモデリング Ver.1」　全てのデータが簡単に【リンク先】を持てる


###
はじめに
---
【 ニューロ型データベースモデリング Ver.1 】とは

「脳を構成する神経細胞（neuron）が繋がり合って情報を司る」
という仕組み（ネイチャーテクノロジー）に着目し
私が独自で研究・開発 してきた「データベースモデリング」です。
使用する静的テーブルは「２個(２種類)だけ」なのでシンプルな構造となり結果的に基本メンテナンスフリー の 汎用データベースモデリング が出来上がりました。

詳しくは【 [開発の歴史](https://kuhen.org/ndb/?page_id=77)：2016-03-04～05　総務省「異能vation」協力・協賛企業マッチングイベントに「ニューロ型データベースモデリング」が選定される 】をご覧下さい。

###
全てのデータが簡単に【リンク先】を持てる
---
このデータベースモデリングを「ニューロ型」と命名した理由は

　　　　**<font color="Red">全てのデータ</font>**が簡単に【 **<font color="Red">リンク先</font>** 】を持てる

という特徴があるからです。

- 「１対多」接続

この仕組みのおかげでテーブル間の関連付けを設定する「リレーションシップ」をコマンドでいちいち設定しなくて済むし【簡単に設定出来る】ことが非常に便利。
![27.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567414/58430ae7-f701-b263-792b-ec92d59db871.jpeg)

- 「１対１」接続

リレーションを「１対１」にしたい時は各レコードの先頭にある「主キー」をリンク先に登録すれば可能だがそれには「ID（主キー）リンク先」という列を追加することになる。
![28.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567414/14ea0a38-d1a9-3611-776a-a37de1ec7920.jpeg)


###
まとめ
---
開発当初は、各レコードの右端に「グループIDリンク先」が２個（２列）存在していたが、暫くして
「右側に増やすのでは無く下へもう一行（１レコード）増やせばシンプルだ！」
と気が付いてこの形に落ち着いた経緯がある。

テーブル設計時に「リレーションシップ」を固定するより、この方法なら簡単に関連付けと変更が出来るので【データベースを稼働しながら開発（仕様変更）が可能】なデータベースが実現するはずだ。

###
関連投稿記事
---
第04回　[独自開発した「ニューロ型データベースモデリング Ver.1」　既存データを【コンボボックス】として使ってみる](https://qiita.com/kuhen-org/items/05458f9210887dd00b23)
第06回　[第06回　独自開発した「ニューロ型データベースモデリング Ver.2.0」がやっと完成したので公開する](https://qiita.com/kuhen-org/items/20f1c993517ea5b27a8b)
[Elixir] PowerShellでiexを使うには？

# 課題
PowerShellでElixirの`iex`を起動しようとすると、代わりにコマンドレットの`Invoke-Expression`が実行されてしまい、失敗する。
`iex`が`Invoke-Expression`のエイリアス（別名）として登録されているためである。

```
PS C:\> iex

cmdlet Invoke-Expression at command pipeline position 1
Supply values for the following parameters:
Command:
```

`Get-Alias`で確認すると、確かに`iex`がエイリアスになっている。

```
PS C:\> Get-Alias iex

CommandType     Name                                               Version    Source
-----------     ----                                               -------    ------
Alias           iex -> Invoke-Expression
```

# 対処法1
PowerShellではなくコマンドプロンプトを使う。

# 対処法2
`iex`でなく`iex.bat`と拡張子まで入力すればElixirのほうの`iex`が起動できる。

# 対処法3
エイリアスから`iex`を削除する。
`Remove-Item alias:iex -Force`で削除できる。
（read-onlyプロパティの設定されたエイリアスを消すには `-Force`パラメータが必要）

```
PS C:\> Remove-Item alias:iex -Force
PS C:\> iex
Interactive Elixir (1.10.2) - press Ctrl+C to exit (type h() ENTER for help)
iex(1)>
```
ただしこの方法ではPowerShellを起動するたびに設定が元に戻ってしまうので、毎回`Remove-Item`しなければならず面倒である。

# 対処法4

PowerShellプロファイルを編集する。
まずはプロファイルの場所を確認。

```
PS C:\> $PROFILE
（プロファイルの場所が表示される）
```
この場所にプロファイルを用意すれば良い。
まだプロファイルが無い場合は、以下のコマンドで空のプロファイルを作成できる。

```
PS C:\> New-Item $PROFILE -Force -Type FILE
```
プロファイルが作成されるので、メモ帳などで編集してやればよい。
PowerShellから直接メモ帳で開くこともできる。

```
PS C:\> notepad $PROFILE
```
ここに
`Remove-Item alias:iex -Force`
を書いて保存すればOK。

これで次回のPowerShell起動時からは、最初から
`Remove-Item alias:iex -Force`
が実行されたのと同じ状態になる。

元に戻したい時はプロファイルの内容を消すか、ファイルごと削除すればよい。

# 参考
Elixir ForumのQ&A
https://elixirforum.com/t/iex-in-windows-powershell/14622

PowerShellプロファイルについて
http://acoustic-groove2.hatenablog.com/entry/2017/12/06/013928

PowerShell 5 と 6 で Profile の場所が違う
http://www.vwnet.jp/windows/PowerShell/2018032601/PS6Profile.htm