OmniAICreator/Qiita-1.07M huggingface dataset:
更新ボタンを押したら、「A と、見せかけてB」の文字列がランダムに更新されるようなWebサーバをjavascriptを使って作成してみる

# 目的
更新ボタンを押したら、「A と、見せかけてB」の文字列がランダムに更新されるようなWebサーバをjavascriptを使って作成してみた際の備忘録です

# コード

フォルダ構成

```
test/
     index.html
     sample.js
```

```html:index.html
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Sample</title>
  <script src="sample.js"></script>
</head>
<body>
  <input type="button" value="更新" onclick="sample();">
  <div id="area1">と、見せかけて </div>
</body>
</html>
```

```Js:sample.js
var data = ['りんご',
            'みかん',
            'いちご',
            'パイナップル',
            'ドラゴンフルーツ'];

/**                                                                                                                               
 * 配列の値からランダムで1つ選択して返す                                                                                          
 * @param arr arrayData (required) 選択する配列の内容                                                                             
 * @return str                                                                                                                    
 */
function choose_at_random(arrayData) {
    var arrayIndex = Math.floor(Math.random() * arrayData.length);
    return arrayData[arrayIndex];
}

function sample(){
    var getData = choose_at_random(data);
    var getData2 = choose_at_random(data);
    var str = getData + "、と、見せかけて、" + getData2;

    console.log(str);

    //document.getElementById("area1").innerText = "変更しました";                                                                
    document.getElementById("area1").innerText = str;
}
```

コマンドラインからWebサーバを起動

```
python3 -m http.server 8080 --cgi
```

# テスト

ブラウザからindex.htmlにアクセス

```
http://0.0.0.0:8080
```

更新を押すたびに「と、見せかけて」の文字列が変わればOK
<img width="574" alt="と見せかけて1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/344880/5134eae9-aea4-7a91-7abc-6c66a85e82d9.png">
<img width="572" alt="と見せかけて2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/344880/113bc7ee-cae6-e815-a39a-a2a1b39f1f88.png">

# 参考
[[JavaScript] HTML内の文字を動的に変更する（innerText）](https://javascript.programmer-reference.com/js-dom-inntertext/)
[配列の値の中からランダムで選択する](http://cly7796.net/wp/javascript/get-one-randomly-from-the-specified-multiple-values/)
[【JavaScript入門】joinや+演算子で配列や文字列を連結・結合する](https://www.sejuku.net/blog/21149)
[pythonでローカルwebサーバを立ち上げる](https://qiita.com/okhrn/items/4d3c74563154f191ba16)
FirestoreでonSnapshotがadd/update/set/deleteの結果より先に呼ばれる

# 問題

FiresotreでCollectionの更新をListenしている場合、addの結果(id取得前)より先にonSnapshotが発火するようである。

自分自身がaddした結果かどうか判定する必要がある場合、addの結果のdoc IDが手に入っていない状態ではそれができない。

下記の例で、 Aのadd処理の後、Firebaseから処理が非同期的に帰ってきてBでDocumentのIDを取得できる。この時、自分が追加したデータのリストとしてmyDataに格納する。onSnapshotでは他人からのデータ追加も含めて通知がやってくるが、Bの前にCが発火するため、自分のデータを判定することができない。


```Javascript
var myData = [];

//......

firebase.firestore().collection("hoge").add({fuga: "fugu"}) // A
.then(async (docRef) => {
        myData.push(docRef.id);  // B
});

firebase.firestore().collection("hoge").onSnapshot((snapshot) => {
    snapshot.docChanges().forEach(async (change) => {
        if (change.type === "added") { // C
            if(myData.indexOf(change.doc.id)>=0){ /* 自分がaddしたデータ */ }
            else{ /* 自分以外のデータ, 処理 */ }
        }
    });
});
```

# 案0
自分自身が追加したデータも他からのデータも特に区別する必要のないような設計にする。これができれば一番良いし、原則これを目指すべきだろう。ただ諸事情によりできない場合もある。

# 案1
Record自体に一意性が十分保証されるような乱数等を入れおいて判定する。


```Javascript
var myData = [];

//......

var randv = rand(); // 本当はもっと堅牢なGUID生成
myData.push(randv);
firebase.firestore().collection("hoge").add({fuga: "fugu", token:randv}) // A
.then(async (docRef) => {
        // myData.push(docRef.id);  // B
});

firebase.firestore().collection("hoge").onSnapshot((snapshot) => {
    snapshot.docChanges().forEach(async (change) => {
        if (change.type === "added") { // C
            if(myData.indexOf(change.doc.data().token)>=0){ /* 自分がaddしたデータ */ }
            else{ /* 自分以外のデータ, 処理 */ }
        }
    });
});
```

# 案2
A -> Bの間にmyDataを参照する処理が入らなければ良い。同期の仕組みであるMonitor的なものを導入してそれを阻止する。[こちら](https://qiita.com/hbjpn/items/821345cfd698419a4462)のMonitorクラスを使うと下記のようにかける。

```Javascript
var monitor = new Monitor();
var myData = [];

//.........

await monitor.enter();
firebase.firestore().collection("hoge").add({fuga: "fugu"}) // A
.then(async (docRef) => {
        myData.push(docRef.id);  // B
})
.finally(()=>{
        monitor.exit();
});

firebase.firestore().collection("hoge").onSnapshot((snapshot) => {
    snapshot.docChanges().forEach(async (change) => {
        if (change.type === "added") { // C
            await monitor.enter();
            if(myData.indexOf(change.doc.id)>=0){ /* 自分がaddしたデータ */ }
            else{ /* 自分以外のデータ, 処理 */ }
            monitor.exit();
        }
    });
});
```
Laravelで検索機能（検索したい項目だけ）を実装する 

PHP 7.1.29
Laravel Framework 5.5.48

Laravelにて以下の検索を行う。
・お届け先氏名
　┗自由入力で部分一致
・注文日
　┗開始日・終了日を選択して、その期間内の注文を検索
　　開始日のみ入力されている場合：開始日以降の注文を全て表示
　　終了日のみ入力されている場合：終了日以前の注文を全て表示としてください

※注文日、お届け先の氏名の複合条件でも検索されるように実装する。


<img width="514" alt="スクリーンショット 2020-04-12 14.51.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509323/7fe1dffc-4afa-9b82-e53c-9d0154818e6f.png">

`````
public function search(Request $request)
{
	// 検索機能
	$query = $this->purchase->query();
	// 名前検索
	if (!empty($request->name)) {
		$query->where('full_name', 'like', "%{$request->name}%")->get();
	}
	// 日付検索（開始日）
	if (!empty($request->start_date)) {
		$query->where('created_at', '>=', $request->start_date)->get();
	}
	// 日付検索（終了日）
	if (!empty($request->end_date)) {
		$query->where('created_at', '<=', $request->end_date)->get();
	}
	$purchases = $query->get();

	return view('admin.purchase.index', compact('purchases', 'request'));
}
`````

queryを使用することで
必要な検索のみを追加してDBよりデータを取得する。
PG::DuplicateTable: ERROR:  relation "active_storage_blobs" already exists をなおす

# 概要
Rails6にてTrixが使えない現象が発生し仕方がないのでaction_textを再インストールした時に発生したエラーです。その時以外でもgemの再インストールした時にも発生していたのですが、毎回対象のテーブルを削除してマイグレーションをやり直していたのですが、そんな必要なかったようです。

# action_textをインストール
下記のような形でaction_textを再インストールしました。

```
./bin/rails action_text:install
```

上記のコマンド実行後にマイグレーションをすると下記のエラーが発生しました。

```
 docker-compose exec web ./bin/rails db:migrate
== 20200412032659 CreateActiveStorageTables: migrating ========================
-- create_table(:active_storage_blobs, {})
rails aborted!
StandardError: An error has occurred, this and all later migrations canceled:

PG::DuplicateTable: ERROR:  relation "active_storage_blobs" already exists
```

テーブルがバッティングしてますという意味ですね。
対象のテーブルを削除してマイグレーションをすればいいのですが、面倒です。

# マイグレーションをリセット

マイグレーションをやり直しします。
[データベースをリセットする](https://railsguides.jp/active_record_migrations.html#%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%E3%82%92%E3%83%AA%E3%82%BB%E3%83%83%E3%83%88%E3%81%99%E3%82%8B)

```
./bin/rails db:migrate:reset

Dropped database 'app_development'
Dropped database 'app_test'
Created database 'app_development'
Created database 'app_test'
== 20200325153814 CreatePosts: migrating ======================================
-- create_table(:posts)
   -> 0.1883s
== 20200325153814 CreatePosts: migrated (0.1889s) =============================

== 20200411034205 CreateArticles: migrating ===================================
-- create_table(:articles)
   -> 0.0431s
== 20200411034205 CreateArticles: migrated (0.0437s) ==========================

== 20200412032659 CreateActiveStorageTables: migrating ========================
-- create_table(:active_storage_blobs, {})
   -> 0.3124s
-- create_table(:active_storage_attachments, {})
   -> 0.1944s
== 20200412032659 CreateActiveStorageTables: migrated (0.5082s) ===============

== 20200412032660 CreateActionTextTables: migrating ===========================
-- create_table(:action_text_rich_texts)
   -> 0.1888s
== 20200412032660 CreateActionTextTables: migrated (0.1892s) ==================
```
どうやらresetコマンドはテーブルをdropした後にcreateしているようです。
必要なデータが入っていないか注意はした方がいいですね。
［解決済エラー］nativebase 2.13.12 にて Module not found: Can't resolve

[Nativebase公式ドキュメント(Quick Setup)](https://docs.nativebase.io/docs/GetStarted.html)


ここに書いてある公式ドキュメントの手順でパッケージを導入したら

```
node_modules/native-base/dist/src/basic/IconNB.js
Module not found: Can't resolve '@expo/vector-icons/Fontisto' in 'node_modules\native-base\dist\src\basic'
```

エラーを吐かれた。


[error on nativebase 2.13.12 and expo 36.0.0 (REACT-NATIVE)](https://github.com/GeekyAnts/NativeBase/issues/3100)

適当に調べてたらGithub issues にて議論されていました。どうやらnativebaseのバージョンを「2.13.12」から「2.13.8」にダウングレードしてバージョンを固定するとエラーが吐かれなくなるみたいです。早く修正されるといいですね。

```
npm i --save-exact native-base@2.13.8
```
dartでjson配列のparse方法

自分用メモ。内容は[こちら](https://mitubaex.hatenablog.com/entry/2018/02/15/043252)からfork


```
import 'dart:convert';

// 今回はUser型を定義しました
class User {
  final String name;
  final String hobby;

  User(this.name, this.hobby);

  // map to User
  User.fromJson(Map<String, dynamic> json)
      : name = json['name'],
        hobby = json['hobby'];

  // map to json
  Map<String, dynamic> toJson() =>
    {
      'name': name,
      'hobby': hobby,
    };
}

void main() {
  // 対象json文字列
  final String json = """[{"name":"mituba", "hobby":"anime"}, {"name":"mit", "hobby":"ani"}]""";

  // string to List<User>
  List<Map<String, String>> jsonArray = JSON.decode(json);
  List<User> userList = jsonArray.map((i) => new User.fromJson(i)).toList();

  userList.forEach((i) => print(i.name + ':' + i.hobby));
  // ---output---- 
  // mituba:anime
  // mit:ani

  print(JSON.encode(userList));
  // ---output---- 
  // [{"name":"mituba","hobby":"anime"},{"name":"mit","hobby":"ani"}]
}
```
JavascriptでMonitor(同期)

## Monitorクラス

稀ではあるが、JavascriptでCtirical Section的なものを導入したくなる時がある。
同期方法の一種である[Monitor](https://ja.wikipedia.org/wiki/%E3%83%A2%E3%83%8B%E3%82%BF_(%E5%90%8C%E6%9C%9F)) を実現するMonitorクラスを作ってみた。


```Javascript
function Monitor(){
    this.promises = [];
    this.resolvers = [];
}

Monitor.prototype.enter = function(){
    this.promises.push(new Promise((res,rej)=>{ this.resolvers.push(res); })); // This promise is for the next waiter
    return this.promises.length == 1 ? Promise.resolve(true) : this.promises[this.promises.length-2];
};

Monitor.prototype.exit = function(){
    if(this.promises.length<=0) return; // Invalid use of exit
    this.resolvers[0](true); // Invoke the first waiter
    this.promises.shift();
    this.resolvers.shift();
};
```
## 使い方

atomicにしたい処置をawait monitor.enter(), monitor.exit()で囲む。await monitor.enter()は他にCritical Sectionに入っている処理がある場合、それが終わるまでブロックする。Javascriptはシングルスレッドなのでatomicに処理したい部分の少なくとも一箇所は、非同期に実行している一連のコード(thenチェーン)になるでしょう。

## 例

money=10000円に対して1000円減らして2000円足す、という処理が何らかの理由で非同期で実行されていてかつ不可分に実施する必要がある場合(つまり、money=9000円の状態で参照されてはならない).

```Javascript
// Monitor object
var monitor = new Monitor();

//....

// Part A
await monitor.enter();
var money = 10000; 
doSomething()
.then(()=>{
  money -= 1000;
})
.then(()=>{
  money += 2000;
})
.finally(()=>{
  monitor.exit();
});

// .... 別の場所 ....
// Part B

await monitor.enter();
if(money >= 10000)
   console.log("お金足りるよ");
else
   console.log("お金足りないよ");
monitor.exit();

```
pythonでPearsonの相関係数の信頼区間を算出する

pythonで相関係数の信頼区間をだしたい時ってありますよね。
統計系はRかpythonかくらいの流れなのに、（少なくとも僕が調べた限りは・・・）pythonに相関係数の信頼区間を求めるよく使われているfunctionはscipyなどでは定義されていなさそうです。

ですので、自前実装してみました。

# Code

``` python
def corr_CI(a, b, alpha = 0.95):
    r = stats.pearsonr(a, b)[0]
    n = len(a)
    if n <= 3:
        AssertionError("Not enough amount data")
    z= 0.5*np.log((1+r)/(1-r))
    za = stats.norm.ppf(0.5 + 0.5 * alpha) 
    zl = z - za * math.sqrt(1/(n-3))
    zu = z + za * math.sqrt(1/(n-3))
    rhol = (math.exp(2 * zl) - 1 )/ (math.exp(2 * zl) +1 )
    rhou = (math.exp(2 * zu) - 1 )/ (math.exp(2 * zu) +1 )
    return rhol, rhou
```

# 利用例

例えば、iris datasetで利用してみるなら

``` 
import pandas as pd
from sklearn import datasets
iris = datasets.load_iris()
df = pd.DataFrame(iris.data, columns=iris.feature_names)
sl = df["sepal length (cm)"]
sw = df["sepal width (cm)"]
corr_CI(sl, sw)
```
とすると信頼区間の下限、上限が出力される

# 参考資料
https://bellcurve.jp/statistics/course/9591.html
というかほぼコピペ・・・
アフィン変換を回転と拡大縮小に分解する（特異値分解編）

#はじめに
座標ベクトルに行列を掛けて別の座標に変換する事をアフィン変換と呼びます。通常アフィン変換は、次の５つの要素に分解できます。→[具体例で学ぶ数学「アフィン変換の意味と４つの基本要素」](https://mathwords.net/affine),　 [イメージングソリューション「アフィン変換」](https://imagingsolution.net/imaging/affine-transformation)

* 平行移動
* 回転
* 拡大縮小
* 反転
* せん断


しかし、特異値分解で考えると、アフィン変換はせん断、反転を除く３つの基本要素に分解できると考えることもできます。

#アフィン変換とは
n次元ベクトル$x$を$x'=Ax+b$に変換することをアフィン変換といいます。例として2次元の

```math
A=
\begin{pmatrix}
1 & 2 \\
3 & -1
\end{pmatrix}
, b=
\begin{pmatrix}
2 \\
3
\end{pmatrix}
```
の場合を考えます。$x=(1,2)$の点が$x'=(7,4)$に変換されます。
<img width="50%" alt="411f4c4b-5ea3-bde3-3e4c-a5a65fa0efdf.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535482/82342cd9-b95c-2697-66be-a01550fae3b5.png">

幅１高さ２の青い長方形が、右上の水色の傾いた平行四辺形に変換されます

#アフィン変換を回転と拡大縮小とに分解する
この変換が、

回転10.9[deg] → X方向3.19倍、Y方向-2.19倍 → 回転79.1[deg]
(もう少し正確には
10.9 ： 10.900704743175904
3.19 ： 3.192582403567252
-2.19 ： -2.192582403567252
79.1 ： 79.09929525682409）

に分解できます。図で書くとこんな感じ
![分解.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535482/4147aeaa-8fed-795b-1e92-2fab8c8aa75e.png)

拡大縮小はX軸とY軸で別の拡大率を設定できるので、形が変わってしまいます。図では長方形が平行四辺形になっています。ちょっと変な気がするかもしれませんが、実際に計算して確認してみてください。
　回転行列と拡大縮小行列の積を計算すると、以下のように元の行列に近い値なっていることを確認できます。

```math
\begin{pmatrix}
\cos\theta_1 & -\sin\theta_1 \\
\sin\theta_1 & \cos\theta_1
\end{pmatrix}
\begin{pmatrix}
\alpha_1 & 0\\
0 & \alpha_2
\end{pmatrix}
\begin{pmatrix}
\cos\theta_2 & -\sin\theta_2 \\
\sin\theta_2 & \cos\theta_2
\end{pmatrix}
\approx
\begin{pmatrix}
1 & 2 \\
3 & -1
\end{pmatrix}
\\
\theta_1=10.900704743175904[deg] \\
\theta_2=79.09929525682409[deg] \\
\alpha_1=3.192582403567252 \\
\alpha_2=-2.192582403567252 \\
```
つまり、アフィン変換は回転とX軸Y軸方向の拡大縮小、そのあとの回転に分解できることがわかります。
このように分解できる理由について、以下に特異値分解を使って説明します

#特異値分解
特異値分解は、[「特異値分解を詳しく解説」](https://qiita.com/kidaufo/items/0f3da4ca4e19dc0e987e)にあるように、一般の行列を２つの直行行列で対角行列を挟んだ形に分解する手法です。

```math
A=U\Gamma V^T
```
$U,V$は直交行列、直交行列は各列、各行が直交している行列なので、ほとんど回転行列なんだけど、座標軸の正の向きが逆になってる場合があるので、それを考えると、軸方向の反転$U_f$と回転行列$U_r$に分解できる。つまり

```math
U=U_r U_f, V=V_r V_f
```
これを上の特異値分解の式に代入すると

```math
A=U_r U_f\Gamma V_f^T V_r^T
=U_r (U_f\Gamma V_f^T) V_r^T
```
ゆえに、$X$を$A$でアフィン変換する$AX$の計算はベクトル$X$を$V_r^T$で回転し各軸方向に$\gamma_i$で拡大縮小、反転したあと$U_r$で再び回転する処理に分解されます。
#まとめ
このように考えると、アフィン変換は

* 平行移動
* 回転
* 拡大縮小（反転含む）

と分解できると考えることができて、イメージしにくい「せん断」処理を考えなくていいので、便利なこともあるでしょう。というページでした。
CLIでは上手くいくのにSSH Tunnel Manager では上手くいかない場合の対処法

# "expected key exchange group packet from server" ってなんだよ

ポートフォワーディングを設定する際、毎回スクリプトをバックグラウンドで起動させているのがかっこ悪い…と思い、
業務でも使っているSSH Tunnel Managerを利用することにしました。
ですが、cliと同じ内容を設定しているはずなのに、
 
```expected key exchange group packet from server
```
というエラーが出て一向に成功しなかったので、対処法のメモ。
結論としては、SSH Tunnel Managerが「バージョンの古い」「PuTTYを利用している」のが原因でした。

# 対処
## 前提
【環境】
クライアント:Windows 10
サーバ:Windows 10(OpenSSHを利用)

【状態】
CLIでのポートフォワーディングは成功している、つまり
・ファイアウォールの穴あけは完了
・公開鍵の設定、秘密鍵の格納は完了
・アドレスやポートの誤りではない

## 対処1. 秘密鍵をPuTTY用のフォーマットに変換する。
原因のうち、「PuTTYを利用している」の部分に該当する箇所です。
考えてみれば当然ですが、OpenSSHなんてものがWindowsに搭載されたのはつい最近のことで、
Windowsでssh接続を行うにはPuTTYを利用する必要があります。
ただ、PuTTYでの鍵交換するときの秘密鍵には*.ppkという固有のフォーマットがあるため、
SSH Tunnel Managerの秘密鍵にもそれを登録する必要があります。

PuTTY形式への変換の具体的な手順は下記サイト様が詳しいです。
https://mseeeen.msen.jp/convert-ssh-secret-key-from-rsa-to-putty/

ざっくり説明すると、[ダウンロードサイト](https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html)からputtygen.exeをダウンロード⇒変換です。

上記サイトではTeraTermの場合の説明をしており、TeraTermではファイル形式が違っても(面倒なだけで)大丈夫、と書いてありますが、
SSH Tunnel Managerでは駄目みたいですね。

## 対処2. SSH Tunnel Managerのplink.exeのバージョンを最新化する。
原因のうち、「バージョンの古い」の部分に該当する箇所です。

下記サイト様にもありますように、アプリケーションが利用しているplink.exeのバージョンが古いとエラーになるそうです。
http://tayu.github.io/xming/pklink/2016/07/27/Xming-error/

対処法としては、
1. [ダウンロードサイト](https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html)からplink.exeをダウンロード
2. "SSH Tunnel Manager\Tools\plink.exe"をダウンロードしてきたplink.exeに置き換える
3. 念のためSSH Tunnel Managerを再起動
になります。

# まとめ
1. 秘密鍵は.ppkに変換
2. plink.exe は最新化する
docker sync ( docker-sync.yml ) で unison / rsync の Stragegy をコマンドの環境変数もしくは.envファイルで切り替える #docker

# docker-sync.yml

(他の設定は色々省略)

```
syncs:
 app-sync:
  sync_strategy: "${DOCKER_SYNC_STRATEGY}"
```


# .env ファイルに指定する場合

```
DOCKER_SYNC_STRATEGY=rsync
```

```
docker-sync start
```

# コマンドの環境変数に指定する場合

```
DOCKER_SYNC_STRATEGY=unison docker-sync start
```

```
DOCKER_SYNC_STRATEGY=rsync docker-sync start
```

stopなどの場合も同じ環境変数が必要になるので、わりと面倒



# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/3065








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
「イシューからはじめよ」の概要をマインドマップでまとめました

# イシューからはじめよ

[Issueからはじめよ](https://www.amazon.co.jp/%E3%82%A4%E3%82%B7%E3%83%A5%E3%83%BC%E3%81%8B%E3%82%89%E3%81%AF%E3%81%98%E3%82%81%E3%82%88%E2%80%95%E7%9F%A5%E7%9A%84%E7%94%9F%E7%94%A3%E3%81%AE%E3%80%8C%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%AA%E6%9C%AC%E8%B3%AA%E3%80%8D-%E5%AE%89%E5%AE%85%E5%92%8C%E4%BA%BA/dp/4862760856)が良書だったので、概要をマインドマップでまとめました。
短い時間で最大の成果を出すためのテクニックや考え方が書かれています。
エンジニアは限られた期限内で成果を求められるため、この本から得られる学びは多いと思います。


![イシューからはじめよ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617772/734b96f9-1dd3-e3c3-0ea2-07bfa13ea20b.png)
rspec導入まで(自分用メモ)

# gem 'rspec-rails' を記述

gemfile

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

# bin/rails g rspec:installでインストール

`$ bin/rails g rspec:install`

# gem 'spring-commands-rspec' を記述(Speingを使いたい場合)

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

# bundle exec spring binstub rspec でbinディレクトリ内にrspecの実行用ファイルを作成

`$ bundle exec spring binstub rspec`

# bin/rspecでインストールできている確認

`$ bin/rspec`

# rails g で何かを作成した際に、RSpec用ファイルも作るようにする

```config/application.rb
# 省略
module Sample
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 6.0
    
   # ここを記述
    config.generators do |g|
      g.test_framework :rspec,
        fixtures: false,    # fixtureなどのファイルは作らないようにする
        view_specs: false,
        helper_specs: false,
        routing_specs: false
    end
  end
end
```

-------------------
参照: https://leanpub.com/everydayrailsrspec-jp
ざっくりとPHPで学ぶ！忙しい人のためのデザインパターン入門②Singletonパターン

# 一言で言うと？
あるクラスが一回しかインスタンス化が出来ないようにし、そのインスタンスが唯一無二であることを担保する。（ひとつのインスタンスを使いまわす。）
# どんなシチュエーションで使うの？
- 正直自分、絶対必要なシチュエーションがあんまりぴんと来てないです、、、
- とりあえず、一つのインスタンスを使い回す必要のある時？

# 実装
## 実装の概要
※わかりやすさ重視ですごく無理やり考えたSingletonパターンの実装ですので、本来のSingletonパターンの意図としては間違っているかもしれませんので悪しからず。

- Shibuyaクラスが存在する
- プロパティにcountryとprefectureを持つ（国名と都道府県）
- 国名と都道府県は不変（？）のものであり、インスタンス毎に冗長にならないので、singletonパターンで一つのインスタンスを使い回す。

## サンプルコード

### Singletonパターンなクラス

```Shibuya.php
<?php

namespace App;

class Shibuya
{
    // 国名
    private $country;

    // 都道府県
    private $prefecture;

    // 検証用ID
    private $id;

    /**
     * 一つしか作らないインスタンス格納用変数
     * 
     * Undocumented variable
     *
     * @var [type]
     */
    private static $instance;

    private function __construct()
    {
        $this->country = 'Japan';
        $this->prefecture = 'Tokyo';
        // ランダムな数字を生成し、検証用IDに
        $this->id = rand(1000000, 2000000);
    }

    /**
     * インスタンス取得
     * 
     * Undocumented function
     *
     * @return void
     */
    public static function getInstance(): Shibuya
    {
        // プロパティにインスタンスが格納されていなければ、新しく生成。すでにあればそれを返す。
        if (empty(self::$instance)) {
            self::$instance = new Shibuya();
            echo 'インスタンスがまだ作られていなかった為、作成しました。' . "\n";
        }
        return self::$instance;
    }

    /**
     * IDを取得
     * 
     * Undocumented function
     *
     * @return void
     */
    public function getId(): int
    {
        return $this->id;
    }

    /**
     * インスタンスを複製しようとした際の例外処理
     * 
     * Undocumented function
     *
     * @return void
     */
    public final function __clone()
    {
        throw new \Exception(get_class($this) . 'のインスタンスは複製できません。' . "\n");
    }
}
```

### 実行クラス

```Singleton.php
<?php

namespace App;

use App\Shibuya;

require 'vendor/autoload.php';

// staticメソッドでインスタンス化
$singleton_1 = Shibuya::getInstance();
$singleton_2 = Shibuya::getInstance();

// 検証用ID取得
$id_1 = $singleton_1->getId();
$id_2 = $singleton_2->getId();

echo 'ID : ' . $id_1 . "\n";
echo 'ID : ' . $id_2 . "\n";

// 検証用IDの一致確認
if ($id_1 === $id_2) {
    echo 'IDが一致しています。' . "\n";
}

// インスタンスの一致確認
if ($singleton_1 === $singleton_2) {
    echo 'インスタンスが一致しています。' . "\n";
}

// 複製された時の確認
$singleton_3 = clone $singleton_1;

```

## 実行結果

```
インスタンスがまだ作られていなかった為、作成しました。
ID : 1168743
ID : 1168743
IDが一致しています。
インスタンスが一致しています。
PHP Fatal error:  Uncaught Exception: App\Shibuyaのインスタンスは複製できません。
...省略

```

## 地味に気をつけたいポイント

- Singletonパターンクラスのコンストラクタをprivateに
(これをしないとstaticメソッド経由無しにインスタンス化出来てしまうので）
- __cloneメソッドのオーバーライドの際に「final」をつける
（これをしないとサブクラスでオーバーライドし、複製できてしまうので）

# 参考
PHPによるデザインパターン入門 - Singleton〜いくつ作るかを制限する
http://shimooka.hateblo.jp/entry/20141212/1418363981
pythonで「A と、見せかけて B」と、出力してくるコードをローカルWebサーバ上で動かす

# 目的
pythonで「A と、見せかけて B」と、出力してくるコードをローカルWebサーバ上で動かす際の備忘録です

# 準備

以下を参考にさせて頂きました。

> [【Mac】PythonでCGIが動く簡単なHTTPサーバー作りたい](https://qiita.com/uni_uniq/items/5e75e057ca0d93a764c2)

# コード

ファイル構成

```
test/
  index.html
  cgi-bin/cgi-test.py
```

```html:index.html
<html>
    <head>
        <title>サーバーテスト</title>
        <meta http-equiv="content-type" charset="utf-8">
    </head>
    <body>
    <form action="/cgi-bin/cgi_test.py" method="POST">
        <div>
            <label for="season">test</label>
            <input type="text" name="season" value="test">
            <button>送信</button>
        </div>
    </form>
    </body>
</html>
```

```py:cgi-bin/cgi-test.py
#!/usr/bin/env python                                                                                                             

import cgi
import cgitb
import random

cgitb.enable()

print("Content-Type: text/html; charset=utf-8\n\n")

print("<html><body>")
form = cgi.FieldStorage()

#for key in form:                                                                                                                 
#    value = form[key].value                                                                                                      
#    print('<p>%s: %s</p>' % (key, value))                                                                                        

l = ["りんご",
     "みかん",
     "いちご",
     "パイナップル",
     "ドラゴンフルーツ"]

def bot():
    string1=random.choice(l)
    string2=random.choice(l)

    string=string1+"、と、見せかけて、"+string2
    print(string)
bot()

print("</body></html>")
```

webserverを起動

```
$ python3 -m http.server 8080 --cgi
```

# テスト
ブラウザに、"http://0.0.0.0:8080"を入力してindex.htmlを表示
送信ボタンを押して、「Aと、見せかけてB」が表示されればOK

<img width="540" alt="と見せかけて1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/344880/dd91ed5b-35a3-be1a-366e-2bdc9e0124b3.png">
<img width="540" alt="と見せかけて2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/344880/4d3d3c55-c14f-7614-923f-71d4aac8e557.png">


# 参考
[【Mac】PythonでCGIが動く簡単なHTTPサーバー作りたい](https://qiita.com/uni_uniq/items/5e75e057ca0d93a764c2)
[ゼロからはじめるPython 第43回 Pythonを使ったWebサイトは百円で運用できる(その1)](https://news.livedoor.com/article/detail/15803955/)
[Pythonしか書きたくない人が、AWS上にWEBアプリを作ってみました。](https://qiita.com/IKEH/items/d1495a37649c25bcfc27)
[なな転び八起きのAWS開発日記](https://aws.amazon.com/jp/campaigns/manga/vol1-1/)
[みんなのPython Webアプリ編 - フォームの処理](https://coreblog.org/ats/stuff/minpy_web/04/02.html)
Struts2でSタグ内にJavaの値を設定する方法

#【やりたい事】
入力フォームではない、画面に表示された文字列を
データ更新する際の条件として入力フォームと合わせて使いたい為に、
ボタン押下時にサーブレットへ送信したい。

例
テーブル名：選手管理テーブル management　
カラム①：所属チーム team (画面に表示されている)
カラム②：選手名 player (入力フォームに入力する)
実行したいSQL文：update management set player = (入力した値) where team = (画面に表示された文字列);

#【やりがちな事】
Java内でSQL文を実行して、実行結果を画面上で表示する場合は、

`<%=rs.getString("player")%>`ですが、

この値を、Sタグ内で使いたい場合は、純粋に

`<s:submit type="submit" value="<%=rs.getString("player")%>">`になりそうですが、

これでは、エラーになってしまいます。

#【値を正しく入れる方法】
OGNL式を取り入れます。

①セッションに取得した値を格納
Java文中
`session.setAttribute("player",<%=rs.getString("player")%>">)`

②hiddenタグに値を格納
HTML文中
`<s:hidden name="player"  value = '%{#session.player}'/>`
`<s:submit type="submit" value="更新"/>`

これで、Struts2における
入力フォームの他に、画面に表示されたデータを
サーブレットに送信することができます。
Spring Frameork のDIについてのメモ

Springの勉強しているときに、 @ServiceやBeanという言葉が結構出てきてちゃんと整理したくなったので、まとめて見ました。

# DIとDIコンテナ
## DI
Springの大きな特徴にdependency injection(以下DI)があります。
これは、コンポーネント間(クラス間)に依存性があるオブジェクトを外部から注入することによって、実装と依存を排除するパターンです。

```kotlin

class Service {

    private var dbService: DBService
    private var apiService: APIService

    constructor(dbService: DBService, apiService: APIService) {
        // DI
        this.dbService = dbService
        this.apiService = apiService
    }

}

```

こんな感じで、使いたいクラスやオブジェクトをそのクラス内で初期化したり、設定したりせず外部から受け取る物です。
こうすることで、初期化などの処理をServiceクラスが持つ必要がなくなるので、実装のみに注力でき、初期化のタイミングを考える必要がなくなります。

今回はコンストラクタを持ちいて行っていますが、setter,methodを使って行うケースもあります。

## DIコンテナ
DIはわかりましたが、これには問題があります。DIのオブジェクトが増えると引数もガンガン増えていきます。
引数増えると、Serviceクラスを外部で使いたい場合は大変になります。

```kotlin

var service1 = Service1()
var service2 = Service2()
var service3 = Service3()

var service = Service(service1,service2,service3)
```

上記のようにインスタンスは大変になり、依存クラスに変更が起きた場合は全ての初期化処理を変更しないといけません。

なのでDIするための情報を専用のクラスに渡して(登録して)インスタンスの生成してもらい、必要なインスタンスの組み合わせのみを受け取る形にします。
この機構がDIコンテナです。

# Springの特徴

ここまで、DI関連を解説してきましたが、Springの特徴はこのDI関連です。というわけでSpringのDI周りを解説していきます。

## SpringのDI
SPringにおける最小のDIサンプルを書くとこんな感じになります。

```kotlin
@Component
class A{
    @Autoweired
    private lateinit var a: A
}
```

@AutoweirdというアノテーションをつけるとそのクラスがSpringの管理下あるクラスなら自動でDIをしてくれます。

Springの管理下というのは以下のアノテーションがついているクラスのことを指します。

|アノテーション |説明
|---|---|
|@Controller|リクエストの受け取るなどのコントローラ層に該当するクラスにつける|
|@Service| ビジネスロジックを扱うサービス層に該当するクラスにつける|
|@Repository|DBの操作など、永続層に該当するクラスにつける |
|@Component|上記の該当しないクラスにつける |

これを与えることで、クラスの情報などを読み取り、DIコンテナに登録してくれます。

## SpringのDIコンテナ
SpringのDIコンテナは、まず生成する情報(コンフィグレーション)を取得して、その情報を元にオブジェクトを作ります。
このDIコンテナから生成されて、管理されるオブジェクトをSpringではBeanと呼びます。

コンフィグレーションは先ほどのアノテーションを与えたクラス自動で生成されます。
そのほかにも自身で定義したりできます。

# 最後に
今回はわかりやすくDIコンテナと読んでいますが、実際のSpringのドキュメントにはDIコンテナという言葉はなく、
一貫して、IoCコンテナと読んでいます。
なので実際ドキュメント読む際や、もっと詳しく調べる際は、IoCコンテナでググることをお勧めします。
さわっておぼえるDocker入門🐳#4（コンテナはなぜ軽いか）

# はじめに

Dockerコンテナはなぜ軽いのか、仮想マシンに比べて高速で動作するのかを確認します。


# 目的

**Dockerを触りながら、コンテナイメージとコンテナレイヤーについて確認する**

今回は、下記の操作を行います。

- タグを指定してイメージをDockerHubからダウンロード
- pull済みのイメージを確認
- 同一イメージに複数のタグをつけて管理
- イメージのレイヤーを確認



# 環境

- macOS Mojave 10.14.6
- Docker engine 19.03.5


# まずはDockerのインストール

https://www.docker.com/


# コンテナをアレコレしてみる


## コンテナのタグ

コンテナにはタグがついています。

DockerHubのイメージを見てみると、`バージョン`や`latest` `mainline`など、タグがついています。

また、タグを指定してイメージをpullすることができるようになっています。


## `Docker Pull`

タグを指定して、3つのnginxイメージをpullしてみます。

```bash
# latestタグを指定してイメージをpull
docker pull nginx:latest
```

```bash
# mainlineタグを指定してイメージをpull
docker pull nginx:mainline
```

```bash
# mainline-alpineタグを指定してイメージをpull
docker pull nginx:mainline-alpine
```

※ `Alpine Linux`は超軽量セッティングのOSです。


## `Docker image ls`

今pullしたイメージを確認するには、以下のコマンドを実行します。

```bash
docker image ls
```

先ほどpullしたイメージが以下のように表示されました。


```
$ docker image ls
REPOSITORY              TAG                 IMAGE ID            CREATED             SIZE
nginx                   latest              ed21b7a8aee9        12 days ago         127MB
nginx                   mainline            ed21b7a8aee9        12 days ago         127MB
nginx                   mainline-alpine     377c0837328f        5 weeks ago         19.7MB
```


**`latest`と`mainline`の「IMAGE ID」が同じになっています。**

あれ？なんでかな？

とおもったのですが、これがコンテナイメージの肝です。

つまり、`latest`のイメージと`mainline`のイメージは、実は同一の内容なのです。


## イメージはコンテナのメタデータ

そもそもイメージとはコンテナのメタデータであり、起動時の設定です。

内容が同じであれば、Dockerはうまくそれを利用して使い回すことができます。

`docker image ls`で出力された内容をみると、127MBのイメージが2つあるように見えますが、実際には127MBの容量しか使用されていません。


## イメージはレイヤー構造

イメージはいくつもの層が重なって構成されています。

共通するレイヤーがあれば使い回し、ディスクの容量を節約し、ひいては高速化に繋がります。


## `docker history`

以下のコマンドを使用することで、imageレイヤーの差分をたどることができます。

```bash
docker history nginx:latest 
```

イメージがレイヤーの積み重ねであり、その差分を記録していることで、共通部分を使い回すことができます。
それによってコンテナイメージは軽量になっています。


## `Docker image inspect`

以下のコマンドを使用することで、イメージのメタデータを確認することができます。

```bash
docker image inspect nginx:mainline
```

コンテナのIDや、作者はもちろん、

**デフォルトで使用するポート**や**環境変数**なども確認することができます。


# まとめ

下記の操作を行いながら、Dockerが軽量である理由や、
イメージがメタデータと差分のレイヤーであることを確認しました。

- タグを指定してイメージをDockerHubからダウンロード
- pull済みのイメージを確認
- 同一イメージに複数のタグをつけて管理
- イメージのレイヤーを確認

ちなみに、コンテナを起動してアレコレすると、このイメージにさらに差分が積み重なっていきます。
Chromeだけで特定サイトに複数アカウントでログインする方法

Windowsのウェブ開発でユーザー権限によるテストを行う際に、開発中のサイトの管理画面をログイン・ログアウトでユーザーを切り替える場合がよくあると思います。以下からはこんな手間かけずにChromeだけで複数アカウントを使い分ける方法を記述します。

1.セコンドユーザー用のフォルダを作成する。
Chromeのデフォルトのクッキー、キャッシュなどの情報は「C:\Users\\{ユーザー}\AppData\Local\Google\Chrome\」の「User Data」ファルダに保存されます。
同じディレクトリで、「2nd User Data」の空ファルダを作成します。

2.セコンドユーザー用のショートカットを作成する。
デスクトップでChromeデフォルトのショートカットをコピーして、プロパティのリンク先を下記のように変更して適用します。
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --user-data-dir="C:\Users\\{ユーザー}\AppData\Local\Google\Chrome\2nd User Data"
![新しいビットマップ イメージ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/611901/c6b749ac-091a-27df-ba77-952cc2a11c02.jpeg)

以上の設定完了後、セコンドユーザー用のショートカットでChromeを再起動すると、同じドメインの管理画面でもデフォルトのショートカットで起動したChromeとはお互いに影響せず、それぞれのアカウントで利用できます。
Mac で docker-compose コマンドがエラーで動かない ( pyenv とか python とか言ってくる ) #docker

# エラー

```
$ docker-compose --version

Traceback (most recent call last):
  File "/Users/yumainaura/.pyenv/versions/3.7.3/bin/docker-compose", line 5, in <module>
    from compose.cli.main import main
  File "/Users/yumainaura/.pyenv/versions/3.7.3/lib/python3.7/site-packages/compose/cli/main.py", line 17, in <module>
    import docker
  File "/Users/yumainaura/.pyenv/versions/3.7.3/lib/python3.7/site-packages/docker/__init__.py", line 2, in <module>
    from .api import APIClient
  File "/Users/yumainaura/.pyenv/versions/3.7.3/lib/python3.7/site-packages/docker/api/__init__.py", line 2, in <module>
    from .client import APIClient
  File "/Users/yumainaura/.pyenv/versions/3.7.3/lib/python3.7/site-packages/docker/api/client.py", line 8, in <module>
    import websocket
  File "/Users/yumainaura/.pyenv/versions/3.7.3/lib/python3.7/site-packages/websocket/__init__.py", line 23, in <module>
    from ._app import WebSocketApp
  File "/Users/yumainaura/.pyenv/versions/3.7.3/lib/python3.7/site-packages/websocket/_app.py", line 36, in <module>
    from ._core import WebSocket, getdefaulttimeout
  File "/Users/yumainaura/.pyenv/versions/3.7.3/lib/python3.7/site-packages/websocket/_core.py", line 34, in <module>
    from ._handshake import *
  File "/Users/yumainaura/.pyenv/versions/3.7.3/lib/python3.7/site-packages/websocket/_handshake.py", line 30, in <module>
    from ._http import *
  File "/Users/yumainaura/.pyenv/versions/3.7.3/lib/python3.7/site-packages/websocket/_http.py", line 31, in <module>
    from ._socket import*
  File "/Users/yumainaura/.pyenv/versions/3.7.3/lib/python3.7/site-packages/websocket/_socket.py", line 30, in <module>
    from ._ssl_compat import *
AttributeError: module 'websocket._ssl_compat' has no attribute 'ssl'


```

# 調べる

docker コマンドはシステム ( たぶん Docker for Mac でインストールされたやつ ) のものを使っているが
docker-compose コマンドは python のものを利用していることが判明

```
which docker
/usr/local/bin/docker
```

```
which docker-compose
/Users/yumainaura/.pyenv/shims/docker-compose
```


# 解決

pip の docker-compose を使わないようにした

`pip uninstall docker-compose`

```
$ which docker-compose
/usr/local/bin/docker-compose
```

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/3064








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
コマンドでフォーク元ではなく、自分のリポジトリ（master）から新しくブランチを作る方法。

チーム開発では、フォーク元から新しくブランチを切って開発すると思います。

その際、フォーク元のリポジトリが常に最新とは限りませんし、フォーク元のリポジトリからブランチを切ることが不都合なこともあると思います。

これは自分の場合だけかもしれませんが、
Githubデスクトップだけでは、フォーク元のリポジトリからしかブランチを切れませんでした。
そこで、コマンドで

```
$  git checkout -b 新しいブランチ名
```

これでフォーク元からではなく、自分のリポジトリ（master）から新しくブランチを作る事ができます。
おうちから受験してみた：オンライン試験 AZ-900 - Microsoft Azure Fundamentals

コロナ対策で引きこもり中に、AWS 認定ソリューションアーキテクト – アソシエイトを受験しましたが、受験会場がドン引きするくらいの密集状態だったので、身の危険を感じて他の試験を受けに行くのを躊躇していました。が、業務上、どうしてもMicrosoft Azure Fundamentalsを期限内に受験する必要があったので、どうすっかなーと考えていました（もっと早く受ければよかったのだけど）。調べてみると、自宅から受験できるようなので、ちょっと試してみましたのでメモしておきます。


###1. 受験した内容 

AZ-900 - Microsoft Azure Fundamentals
https://docs.microsoft.com/ja-jp/learn/certifications/exams/az-900
ここでは受験対策にはふれませんが、内容は入門者向けなので難易度は高くない内容のものです。会社で集合研修を受けたので、バウチャーをあらかじめ入手したうえでの受験でした。対策は、その集合研修で使った資料のみ使用しました。

###2. オンライン受験をするための準備

オンライン受験するためには、ピアソン（Pearson VUE）から受験します。試験申し込み時に「ピアソン」を選んだ後に、会場を選択するのではなく、「家かオフィスから」の受験を選択することで可能です。

オンライン受験にあたっては、以下の条件が必要です。

- 完全に一人になれる部屋がある
リモートで受験をするためには、閉じられた空間で一人になる必要があります。受験中はマイクとカメラがオンになっているので、他人との会話は絶対に禁止とされています。例えば、一人暮らしでワンルームの場合は、友達や恋人が遊びに来ちゃうとか、ご家族がいらっしゃる場合、お子さんが部屋に入ってきてしまうとか、お父さんがお茶を入れにやってくる、ということは阻止しなければなりません。

- 受験PCが条件を満たしているか
持っているPCやMacはインターネットに接続できて、カメラとマイクが装備されている必要があります。
事前に以下で確認することが可能です。
https://www.pearsonvue.co.jp/microsoft/onvue

- パスポートを持っている
受験の直前に身分証明のためのドキュメントのチェックをします。ドキュメントとして、選択できるのは「運転免許証」と「パスポート」でした。パスポートならば、アルファベットで名前が確認できるのですぐに確認が可能です。

###3. 日本語で受験可能か？

言語の設定は、以下の３つ箇所で存在すると思います。

#####・試験監督が日本語対応しているか
はい、日本語対応しているようです。試験官とはオンラインの会話とチャットでコミュニケーションをとることができます。ただし、私が受験した時は日本語対応は平日のみしか空いていなかったので、英語の試験官を選びました。なので、土曜日の午前中の受験が可能でした。日常会話レベルのやり取りができれば問題はないと思います。（おそらくフィリピンからじゃないかな...イントネーションから想像。）
参考まで、英語で聞かれたこと：身分証明書のドキュメントを見せてくれる？（ウェブカメラでパスポートを見せる）なんかビープ音がするけど何？（外にトラックが止まってた。「外の音だよ」で問題なし。）女性の試験官で複数の受験を対応しているようで、ちょっと大変そうでした（笑）

#####・受験アプリケーションのUIが日本語対応しているか
受験時にはOnVUEというアプリケーションをブラウザからダウンロードして受験します。すべて日本語対応していました。

#####・試験自体が日本語で受けられるか
日本語で受験可能でした。試験を申し込むときに、言語選択をお間違えないように。また、受験中に英語のオリジナル文も確認できるボタンがありましたので、訳が変だな、と思ったらご活用ください。

###4. 試験直前に確認すること

試験当日は、試験を申し込んだときに送られてきたメールの指示に従い、マイクロソフトの教育サイトから、予約した試験を選択することで、試験の準備を行うことができます。手順が思っていた以上に時間がかかったので１時間くらい前から準備した方がよいと思います。

OnVUEを使って確認したこと
・自分の顔の写真を撮影、アップロードする
・身分証明書を写真で撮影、アップロードする
・部屋の様子を指示に従い4枚撮影、アップロードする

この撮影と作業は、受験用のパソコンをつかってもよいですし、携帯電話から行うこともできます。携帯で行う場合は、SMSを使ってセッション情報を送信し、情報を紐づけることができます（よくできてる！）。

この動画がイメージしやすいです↓
https://youtu.be/h-0E9jGEOnA


手順の途中で意図せぬ問題が起こって、アプリケーションが終了してしまうこともあるかと思います（私もそうでした）。そうなっても、最初の手順から行えば問題ないので、落ち着いて、あきらめずメールの指示の最初から確認を再度開始しましょう。

すべてがクリアできると、最後に試験官とセッションが張られて、再度、ライブで顔のチェックと身分証明書のチェックを行います。最終確認が終了すると試験官が問題をリリースすると、試験が開始します。

###5. 試験中の注意点

試験中は、常にカメラとマイクがオンになっており監視状態にあると思ってください。特に何も問題がなければ、試験官とコミュニケーションをとることはありませんので、試験に集中してください。試験会場同等のイメージで受験すれば、特に怪しい行動とはみられないはずです。頑張ってください！


###6. 試験終了

おつかれさま！試験終了後にすぐに結果がわかります。終わったらすぐおうちですので、そのまま寝転ぶのもよし、祝杯をあげるのもよし、号泣するのもよし。この気軽さがおうちから受験の醍醐味かもしれません。

###7. おうちから受験、やってみた感想

アプリケーションや手順が本当によく考えられていました。不正とかできるんじゃない？とちょっと思いましたが、ここまでちゃんと確認するのであれば、不正も難しいと思います。また、一回オンライン試験で受験してしまうと、会場に行く意味とか考えてしまいます。いやー本当に、身の危険を感じるくらいの密集度だったのですよ。もっとたくさんの試験がこの方式に対応してくれるといいのに！ということで、コロナ引きこもりの時期をうまく活用して、今度もこの方法で試験を受けたい！と思っています。AWSの上級試験も、今の時期はこれで受けたいなあー。
スプレッドシートにGoogleAppsScriptで交通費を算出する関数を作る

# はじめに

表題の通りなんですが、Googleスプレッドシートに書いている交通費を算出する関数をGoogleAppsScriptで作成します。
距離に応じて１回あたりの交通費を書くだけですね。

#### 交通費の参考例
| 距離下限 | 距離上限 | 月額 | 日額 |
|---|---|---|---|
| | 2km未満 | ¥0 | ¥0 |
| 2km以上  | 10km未満 | ¥4,200  | ¥210 |
| 10km以上 | 15km未満 | ¥7,100  | ¥355 |
| 15km以上 | 25km未満 | ¥12,900 | ¥645 |
| 25km以上 | 35km未満 | ¥18,700 | ¥935 |
| 35km以上 | 45km未満 | ¥24,400 | ¥1,220 |
| 45km以上 | 55km未満 | ¥28,000 | ¥1,400 |
| 55km以上 |         | ¥31,600 | ¥1,580 |


## 1. 「メニュー」＞「ツール」＞「スクリプトエディタ」を選択
これでスクリプトエディタを開きます。
権限求められたりする時は許可してください。
この時点でわからない方は[こちら](http://www.dcom-web.co.jp/technology/googleappsscript/)のサイトなど初心者向けのサイトを探して作ってみてください。（たぶん他のサイトのほうが詳しいｗ）

## ２. 関数を定義する
スクリプトエディタで以下のようなスクリプトを書きます。
この例の場合は日額の交通費を算出してみています・

```as
function 交通費(距離) {
  if (距離 < 2.0) return 0;
  else if (距離 < 10.0) return 210;
  else if (距離 < 15.0) return 355;
  else if (距離 < 25.0) return 645;
  else if (距離 < 35.0) return 935;
  else if (距離 < 45.0) return 1220;
  else if (距離 < 55.0) return 1400;
  
  return 1580;
}
```

## 3. セルで使用する
以下のような形で、普通の関数と同じようにオリジナルの関数を呼び出してあげてください。
![スクリーンショット 2020-04-12 13.04.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/289684/4ab9d1ea-7686-98db-d00e-97b527a68bd6.png)

うまくいくと以下のように値が取得できます。
![スクリーンショット 2020-04-12 13.05.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/289684/fb7fa6ff-b6ac-ed26-6a2e-eac2af819d9e.png)
Azure Functions × LINE Notify を試してみた

# はじめに
[Azure for Students](https://azure.microsoft.com/ja-jp/offers/ms-azr-0170p/)という学生に優しいサービスがあった！！
だからAzureをいろいろ試してみることにした！
第2弾として、[Azure Functions](https://azure.microsoft.com/ja-jp/services/functions/)で[LINE Notify](https://notify-bot.line.me/ja/)を試してみた！
※自身が今後利用するためのメモ書き

# LINE Notify
## マイページへ移動
[こちら](https://notify-bot.line.me/ja/)からLINE IDでログインする
<img width="1177" alt="スクリーンショット 2020-04-12 0.20.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/b5ccfd6e-7ab4-3d24-9a08-92fe74c03ab6.png">
その後、マイページを開く
![IMG_5499.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/30220178-8ac6-9d65-9c3b-85210bb855fb.jpeg)

## アクセストークンの取得
「アクセストークンの発行」をクリック
<img width="1177" alt="スクリーンショット 2020-04-12 0.28.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/b8e268e7-c478-d34d-e8e3-898ac9018782.png">
「トークン名」と「通知を送信するトークルーム」を設定して、アクセストークンを発行する
__発行したアクセストークンをメモしておく__

## LINEで作業
設定したトークルームにLINE Notifyを招待する

# Azure Functions
## サービスの作成
[こちら](https://qiita.com/RyogaTakao/items/68a22c8bd27f1bacfba8)の記事を参考に、サービスを作成する

## requestモジュールのインストール
プラットフォーム機能の「コンソール(Bash/SSH)」を選択し、起動する
<img width="889" alt="スクリーンショット 2020-04-11 23.28.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/9d799a44-1191-1952-9ed8-630775941ae7.png">
![IMG_5501.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/034d123b-103d-c526-d8e6-2376bbfc1f93.jpeg)

「npm install request」とコマンドを入力し、モジュールをインストールする(「npm init」は必要ない)

```bash:bash
$ npm install request
```
インストールが完了したら、関数に戻る

## 関数の設定
関数に下記のコードを追加する

```javascript:index.js
module.exports = async function (context, req) {
    context.log('JavaScript HTTP trigger function processed a request.');

    'use strict';

    const request = require('request');
    let Token = '<先ほどメモしたアクセストークン>';

    const options = {
        form: {
            message: '<送信するメッセージ>'
        },
        headers: {
            'Content-type': 'application/x-www-form-urlencoded',
            'Authorization': `Bearer ${Token}`
        },

        url: 'https://notify-api.line.me/api/notify',
        method: 'POST',
        json: true
    }

    request(options, (err, res, body) => {
        body = JSON.stringify(body, null, 2);
        console.log(body);
    });
};
```

上記のコードの下記の部分を先ほどメモしたアクセストークンに書き換える

```
let Token = '<先ほどメモしたアクセストークン>';
```

実行ボタンを押して、試してみる！

# おわりに
メモ書きのため、伝わりにくい部分があったら申し訳ありません。
アドバイスをコメントなどでもらえると助かります。
Nuxtのルーティングをシンプルにまとめてみた

# Nuxtのルーティングをシンプルにまとめてみた
現在Vueのフレームワーク、Nuxt.jsを学習中なので、自分へのメモも兼ねてNuxtのルーティングについてシンプルにまとめてみました。

[Git Hub](https://github.com/dai-570415/nuxt-routing)からデータダウンロード可能です
[https://github.com/dai-570415/nuxt-routing](https://github.com/dai-570415/nuxt-routing)

## Nuxtのルーティングアーキテクチャ

- layouts
- components
- pages

この3フォルダを使います。

### layouts

ベーステンプレート
default.vue（初期ファイル）
single.vue(名称任意)

主に共通で表示させたい部品を入れる
（例）ヘッダー、フッター、コンテンツの大枠タグ　など

[HowTo]

```vue:layouts/default.vue
<nuxt />
```
pagesのファイルが呼び出される
※特に設定は不要

```vue:layouts/default.vue
<AppNavigation />

<script>
  import AppNavigation from '~/components/AppNavigtion.vue';

  export default {
    components: {
      AppNavigation
    }
  }
</script>
```
componentsの中に作成した
ナビゲーションが呼び出される
※インポートとコンポーネント設定必須

### components
ルーティングナビゲーション
ナビゲーションリンクを作成することができる

AppNavigtion.vue(名称任意)

[HowTo]

```vue:components/AppNavigtion.vue
<nuxt-link to="/">home</nuxt-link>
<nuxt-link to="/child">child</nuxt-link>
```

### pages
ルーティングファイル
SPAファイルを格納

このページのみ表示したい部品を入れる

index.vue（初期ファイル）
child.vue(名称任意)

```vue:pages/index.vue
<script>
export default {
    // 何も設定しないとdefault.vue
}
</script>
```

```vue:pages/child.vue
<script>
export default {
    // single.vueが適応される
    layout: 'single'
}
</script>
```

## まとめ
Nuxtのルーティングアーキテクチャには以下3フォルダを使う。
- layouts　ベースのテンプレート
- components　ナビゲーションリンクのコンポーネントを作成
- pages　実際にナビゲーションするファイルを格納

ルーティングに関しては正解はありません。
要件によって最適な構造を見つけていくことが重要です。
ベストプラクティスを考え構成してみてください。

## 最後に
ここまで説明した内容をJPGにまとめましたのでよろしければ参考にしてください。

![nuxt_アーキテクチャ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393193/654e7c0e-73bf-c9d3-7fbe-7cb59e9bea7b.jpeg)

[Git Hub](https://github.com/dai-570415/nuxt-routing)からデータダウンロード可能です
[https://github.com/dai-570415/nuxt-routing](https://github.com/dai-570415/nuxt-routing)
Unity Tip

#Animator Override Controller 활용하기
애니메이터 오버라이드 컨트롤러는 원본의 애니메이터 컨트롤러를 확장하는 에셋으로 사용된 `특정 애니메이션을 대체`하지만 원본 구조, 파라미터와 로직을 유지합니다.

하나의 Animator Controller의 로직에서 애니메이션 Clip만 다른것으로 사용하기 원할때 => 같은 상태, 다른 Animation


#DefaultExecutionOrder 또는 Edit - Project Settings - Script Execution Order

[DefaultExecutionOrder(-1)]
public class ExcutionTest : Monobehaviour
{
}

스크립트 이벤트 함수 호출 순서 제어
Minecraft BE ScriptingAPI 第6回講座

# 【Minecraft BE】のscriptingAPI開発講座(6)
お久しぶりです。
version 1.14になってからScriptingAPIに追加要素があったので、紹介します。
この記事では、某RPGのようなダメージメッセージを出力するものをやってみようと思います。

## 注意
ScriptingAPI は現段階でWindows10にしか対応していません。
Android,iOS,XboxOne,Switchでは開発できません。~~(AndroidはBlockLauncherという外部ツールを使えばできます)~~
現在1.14では一部の端末でBlockLauncherが起動しません。

## 開発環境
windows10 Minecraft version 1.14.30

## entityに与えたダメージを出力しよう！
今回使用する、イベントは `minecraft:entity_hurt`です。
このイベントはserver側でしか動作しないので、server側に書きます！

では早速( 'ω')

```JavaScript:server.js
const system = server.registerSystem(0, 0);

system.initialize = function () {
    this.listenForEvent("minecraft:entity_hurt", (eventData) => this.entityHurt(eventData));
};

system.entityHurt = function (eventData) {
    //処理
};
```

こうですね。
ここまでは前回の記事を見ていればわかると思います。
処理部分ですが、
entityを攻撃すれば、
[int:damege] のダメージを与えた！
entityからダメージを受ければ、
[string:player_name] は [int:damage]のダメージを受けた！
というふうに出力してみたいと思います。

では、`minecraft:entity_hurt`のパラメーターを見てみましょう。

|Name           |Type                |
|:--------------|:-------------------|
|absorbed_damage|Integer             |
|attacker       |Entity JS API Object|
|block_position |Vector [a, b, c]    |
|cause          |String              |
|damage         |Integer             |
|entity         |Entity JS API Object|
|projectile_type|String              |

結構豊富ですね。
今回使うのは`attacker`と`damage`、`entity`を使用します。
左から、攻撃したentity、ダメージ量、攻撃されたentityです。

では追加していきます。

```JavaScript:server.js
const system = server.registerSystem(0, 0);

system.initialize = function () {
    this.listenForEvent("minecraft:entity_hurt", (eventData) => this.entityHurt(eventData));
};

system.entityHurt = function (eventData) {
    //-----ここから追加-----
    var BroadcastEventData = this.createEventData("minecraft:display_chat_event");

    if(eventData.data.attacker.__identifier__ == "minecraft:player") {

        BroadcastEventData.data.message = "§c" + eventData.data.damage + "のダメージを与えた！";
        this.broadcastEvent("minecraft:display_chat_event", BroadcastEventData);

    } else if(eventData.data.entity.__identifier__ == "minecraft:player") {

        var player_name = this.getComponent(eventData.data.entity, "minecraft:nameable");
        BroadcastEventData.data.message = "§c" + player_name.data.name + " は " + eventData.data.damage + "のダメージを受けた！";
        this.broadcastEvent("minecraft:display_chat_event", BroadcastEventData);
    }
};
```

少し量が多いですが頑張っていきましょう！
まず、if文でplayerが攻撃した場合を検知します。
攻撃したentityが格納されているのはパラメーターの`attacker`ですので、
`eventData.data.attacker`ですね。
`eventData`の後の`data`はわすれやすいので注意してくださいね！

そしてそのあと、
`BroadcastEvent`をつかって出力させたい文字列を指定し、出力させます。

else ifでは攻撃されたentityがplayerだった場合、とします。
出力させるときにプレイヤーのゲーマータグを表示させたかったので。`getComponent`メソッドを使い、プレイヤーのゲーマータグを持ってきます。
あとは同様、`BroadcastEvent`をつかって出力させます。

以上で完成です。
![スクリーンショット (69).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266165/a74f004d-7603-b7e6-5882-2d9188724341.png)

1.14の新要素はまだあるので次回をお楽しみに！
何かわからないことがあれば、お気軽にご連絡ください。

[前回](https://qiita.com/Button/items/2a4268ae682a3150d095) 見ているentityを取得しよう！
Djangoのfilterまとめ

先日Djangoで開発をしていて、検索機能が必要になりました。
ただ、いつも「あれ、絞り込みの書き方なんだっけ？」となるのでまとめてみました。
追記や間違っている箇所などあれば、ご指摘いただけると幸いです。

# 構成
* 概要
* 厳しめ検索
* ゆるめ検索
* 大文字小文字を区別しない

## 概要：Djangoのfilter
Djangoのモデルには、objectという属性があり、この中に`Manager`クラスのインスタンスが入っています。
`filter`とは、この`Manager`クラスに用意されている機能で、文字通り欲しいデータを**フィルター（絞り込む）**際に便利な機能です。

## 厳しめ検索
厳しめ検索と名付けてしまいましたが、これから紹介するのはFilterしたい内容に完全に一致するものを絞り込む検索です。

この検索では、**大文字と小文字も区別して完全一致**で検索されます。

例

```
user_name = "hoge" //探したいユーザー名を変数としておきます。
data = User.objects.filter(name=user_name)
```

 Userモデル内のnameフィールドが上で定義したuser_nameと一致するものを取得します。
こうすることで、hogeという名前に完全に一致するものだけに絞り込むことができます。

## ゆるめ検索
では次にゆるめの検索についてみていきましょう。
「hogeなんて名前に完全一致するやついるかわかんないじゃん、でも、hogefugafooっていうめちゃくちゃプログラマーみたいな名前の人ならいるかもじゃん」っていう時、よくありますよね。

そんな時に、"hoge"に完全一致する物だけじゃなく、**"hoge"を含む検索**がしたいというときに、使うのが、このゆるめな検索です。

### ゆるめ検索の書き方
* **を含む検索**
<br>
`フィールド名__contains=値`
* **で始まる検索**
<br>
`フィールド名__startswith=値`
* **で終わる検索**
<br>
`フィールド名__endswith=値`

です。

具体的な使い方をみていきましょう。

### 含む検索
```
user_name = "fuga"
data = User.objects.filter(name__contains=user_name)
```
これで、"hogefugafoo"さんも取得することができました。
そのほかの検索も同様です。

### で始まる検索
```
user_name = "fuga"
data = User.objects.filter(name__startswith=user_name)
```
この場合は、"fuga"で始まるなので、"hogefugafoo"さんは一致しませんが、"fuga太郎"さんは一致します。

### で終わる検索
```
user_name = "fuga"
data = User.objects.filter(name__endswith=user_name)
```
この場合は、"hogefugafoo"さんは一致しませんが、"山田johnfuga"さんは一致します。

## 大文字小文字を区別しない
さて、ここまでくると、大文字と小文字の区別をしないなんていうさらにゆるーい検索がしたいこともあるでしょう。
そんな時は、**`i`**をつけるだけです。

### 大文字小文字を区別しない書き方
* **大文字小文字を区別しない厳しめだけどゆるめな検索**
<br>
`フィールド名__iexact=値`
* **大文字小文字を区別しない、かつゆるめなゆるゆる検索**
   - **含む検索**
   <br>
   `フィールド名__icontains=値`

   - **で始まる検索**
   <br>
   `フィールド名__istartswith=値`

   - **で終わる検索**
   <br>
   `フィールド名__iendswith=値`


最後まで読んでいただきありがとうございました。
後日、数値検索や複数条件でのAND検索OR検索について書いていきますので、どうぞよろしくお願いします。
週休3日、1日6時間勤務達成したい

週休3日、1日6時間勤務達成したい、と思って書いた「コロナ以前」のおぼえがき

## 週休3日、1日6時間勤務のために

1. すぐやること
2. 時間をきめてやること
3. 社内でやること
4. いつでもどこでもやれること

を分ける。



### 1. すぐやること （重要・急ぎ）

すぐやる意味があること

放置すると思い出すのに追加のコストがかかること

#### 具体的には: 

- この「すぐやること」以外の「TODO化」
- タスクチケット管理
- 顧客問い合わせ返信
- ソースコード読み書き


###  2. 時間をきめてやること（重要ではない・急ぎ）

その時間にやる意味があること。Slackのリマインダーに頼る。そんなにない。

#### 具体的には:

- 勤怠打刻
- 工数入力


###  3. 社内でやること（重要・急ぎではない）

人と直接話して決めること

社内に必要なリソースがある物事

#### 具体的には:

- デイリースクラムの相談
- One on one、雑談
- 物品受取、キーパーソンのとこに行って質問したり相談したりすること


### 4. いつでもどこでもやれること（重要でも急ぎでもない）
究極、電車の中でも、寝かしつけの布団の上でもやれること
Slack上で自分宛に投げつけているメモ、クラウド上においてあるメモの清書
脳内で考えをまとめること
具体的には今日やることのリスト化、こういう雑文の文書化


## 心がけ：

1. 自分の勤務時間を明示するまたは固定する

2. 自分の仕事内容、進捗を最大限可視化する
2-1. ここでSlackが便利なんだがSlackは作業ログツールであってチャットツールではないということ

3. 1,2 をふまえて、勤務時間外に自分の代替を頼める人を複数人つくっておく

4. 3 の人の負担を最大限減らすこと（報告相談質問ふくむ）を勤務時間中に全力で、集中してやる

5. 4 までは誰にでも当てはまるお話。ここからはその人のバックグラウンドに従い考える。1-4 と同じく、外部リソース含めて家事育児も分担できる体制にしておく

6. 5 と合わせて、日頃から子どもに「おかーさんはかいしゃにいく」「おとーさんは今日はおともだちとごはんだからおそい」など納得感を得るための説明をしておく

7. 6と合わせて、休みの日は子どもと全力で遊びストレスを溜めさせないようにする。金はかけない。近所の児童館で十分

8. 7と合わせて、自分がストレスを溜めないように寝る。これが一番大事。寝よう！！  


## 2020.04 追記：

... と思っていたけど、3. も、オンラインでお互いできるとなったら、もう少し柔軟にお仕事を考えられそうだなと思う。これからどうできるかに期待。

## 2021.09 追記：

https://qiita.com/e99h2121/items/4fc2ec01907908ff9d24