OmniAICreator/Qiita-1.07M huggingface dataset:
【JavaScript】consoleのいろんな使い方

Consoleオブジェクトにはいろんなメソッドが提供されています。

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

↓

```
console {debug: ƒ, error: ƒ, info: ƒ, log: ƒ, warn: ƒ, …}
memory: (...)
debug: ƒ debug()
error: ƒ error()
info: ƒ info()
log: ƒ log()
warn: ƒ warn()
dir: ƒ dir()
dirxml: ƒ dirxml()
table: ƒ table()
trace: ƒ trace()
group: ƒ group()
groupCollapsed: ƒ groupCollapsed()
groupEnd: ƒ groupEnd()
clear: ƒ clear()
count: ƒ count()
countReset: ƒ countReset()
assert: ƒ assert()
profile: ƒ profile()
profileEnd: ƒ profileEnd()
time: ƒ time()
timeLog: ƒ timeLog()
timeEnd: ƒ timeEnd()
timeStamp: ƒ timeStamp()
context: ƒ context()
Symbol(Symbol.toStringTag): "Object"
get memory: ƒ ()
set memory: ƒ ()
__proto__: Object
```

これだけあるにも関わらず、 `log()` 以外はどうも影が薄いように感じています。
なので、 `console` に隠された（？）メソッドをいくつかピックアップしてみました。

# 目的
 - `console` のいろんなメソッドの使い方を把握する


## assert()
第1引数の値がfalseならエラーを出力する。

```javascript
const method = (num) => {
    console.assert(num > 0 , num + ' is NG.');
}

method(1);
method(0);
method(-1);
```
![image27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122485/acda53df-70de-0be0-d8d1-9acb25983c6a.png)

## clear()
コンソールをクリアする。

```javascript
console.log('hoge');
console.log('hoge');
console.clear();
console.log('fuga');
console.log('fuga');
```
![image28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122485/557eb90d-6060-5136-4dd4-72e079da831f.png)

## count()
呼び出された回数を出力する。

```javascript
const method = () => {
    console.count('counter');
}

method();
method();
method();
```
![image29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122485/8d114861-033c-6d83-e06a-4a694361fabb.png)

## error()
エラーを出力する。

```javascript
console.error('error');
```
![image26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122485/37623799-fcf1-b680-699f-7564fa5cf200.png)

## group() / groupEnd()
インデントを開始する。 / インデントを終了する。

```javascript
console.group('Indent1');
console.log('hoge');
console.log('hoge');
console.group('Indent2');
console.log('fuga');
console.log('fuga');
console.groupEnd();
console.log('hoge');
console.log('hoge');
console.groupEnd();
```
![image30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122485/1ea499bc-1685-6fa2-bef1-6103944f8acd.png)

## table()
表形式でログを出力する。

```javascript
const ary = [100,200,300,400];
const obj = {
    'a':100 ,
    "b":200 ,
    "c":300 ,
    'd':400
};
console.table(ary);
console.table(obj);
```
![image31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122485/b907d20d-09a0-8c05-0848-dd643065f769.png)

## warn()
警告を出力する。

```javascript
console.warn('warn');
```
![image25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122485/39590eb8-813a-5616-a7a8-8b1161b0336e.png)


# まとめ
いかがでしょうか？

Consoleオブジェクトはログを出力するだけの存在ではないことがわかります。
`table()` や `group()` なんかは使い方次第では `log()` よりも便利そうです。

`console` を使いこなせるようにお役に立てれば幸いです。
製薬企業研究者がコマンドライン操作の基本についてまとめてみた

# はじめに

ここでは、コマンドラインを用いてディレクトリおよびファイルを操作する方法について解説します。

# ディレクトリ関連の操作

## カレントディレクトリの表示

今いるディレクトリを表示するには、`pwd`を用います。

```bash
$ pwd
```


## ディレクトリの新規作成

新しくディレクトリを作成するには、`mkdir`を用います。

```bash
$ mkdir 作成するディレクトリ名
```


## 別のディレクトリへの移動

別のディレクトリに移動するには、`cd`を使います。

```bash
$ cd 移動先のディレクトリ名
```

## ディレクトリ名の変更

既にあるディレクトリの名前を変更するには、`mv`を用い、新しいディレクトリ名を入力します。

```bash
$ mv 元のディレクトリ名 新しいディレクトリ名
```


## 別のディレクトリへのディレクトリの移動

既にあるディレクトリを、別にディレクトリに移動する場合にも`mv`を使います。
移動対象のディレクトリを指定するとともに、移動先のディレクトリを指定します。

```bash
$ mv ディレクトリ名 移動先のディレクトリ名
```


## ディレクトリのコピー

既にあるディレクトリをコピーして新しいディレクトリを作成するには、`cp`を用います。
`-r`は、ファイルではなくディレクトリを対象としていることを示します。

```bash
$ cp -r コピーするディレクトリ名 新しいディレクトリ名
```

## ディレクトリの削除

既にあるディレクトリを削除するには、`rm`を用います。
こちらにも、`-r`をつけます。

```bash
$ rm -r ディレクトリ名
```


# ファイル関連の操作

## ファイルの内容の表示

既にあるファイルの中身を表示するには、`cat`を使います。

```bash
$ cat ファイル名
```


## ファイルの新規作成

新しくファイルを作成するには、`touch`を使います。

```bash
$ touch ファイル名
```


## ファイル名の変更

既にあるファイルの名前を変更するには、`mv`を使います。
対象とするファイル名を指定するとともに、新しいファイル名を入力します。

```bash
$ mv 元のファイル名 新しいファイル名
```

## ファイルの移動

既にあるファイルを別のディレクトリに移動する場合にも、`mv`を使います。
対象とするファイル名を指定するとともに、移動先のディレクトリ名を入力します。

```bash
$ mv 元のファイル名 移動先のディレクトリ名
```


## ファイルのコピー

ファイルをコピーするには、`cp`を使います。

```bash
$ cp コピーするファイル名 新しいファイル名
```


## ファイルの削除

ファイルを削除するには、`rm`を使います。

```bash
$ rm ファイル名
```


# まとめ

ここでは、コマンドラインを用いたディレクトリおよびファイルの操作方法の基本について解説しました。
ここに書かれているコマンドが頭に入っていれば、マウスをクリックしなくてもディレクトリやファイルを操作できるようになります。
Unity/IL2CPPでJSONを使う

UnityのIL2CPPで、普通にJSONライブラリを使おうとするとReflection関係でエラーが発生して使えないため、IL2CPPでも使えるライブラリとその使い方を書いておきます。

使ったバージョンは、 Unity 2019.3 です。

## 1. JsonUtility

Unity標準のJSONライブラリです。Dictionaryなど一部の型には対応していませんが、IL2CPP下でも使えます。

```csharp
using System;
using UnityEngine;

[Serializable]
public class Item {
    public string Name;
    public int Value;
}

string json = JsonUtility.ToJson(item);
Item item = JsonUtility.FromJson<Item>(json);
```

## 2. Newtonsoft.Json

普通に使おうとすると他のライブラリ同様、エラーになりますが、以下の手順で動作させることができました。

1. Newtonsoft.Json の [Nuget Package をダウンロード](https://www.nuget.org/packages/Newtonsoft.Json)  
2. 拡張子の `.nupkg` を `.zip` に変えて解凍
3. `lib\netstandard2.0` 以下にある dll ファイルを Unity のプロジェクトに追加 (`lib\net45` ではない)
4. 加えて以下の `link.xml` もプロジェクトに追加

```xml
<linker>
<assembly fullname="System.Core">
<type fullname="System.Linq.Expressions.Interpreter.LightLambda" preserve="all" />
</assembly>
</linker>
```

あとは通常通り使えるはずです。

```csharp
using Newtonsoft.Json;

string json = JsonConvert.SerializeObject(item);
Item item = JsonConvert.DeserializeObject<Item>(json);
```

ちなみに [Newtonsoft.Json for Unity](https://github.com/jilleJr/Newtonsoft.Json-for-Unity) が使えるとの情報もありましたが、手元ではエラーで動きませんでした...

**参考リンク**

https://stackoverflow.com/a/59486989/8320511
https://issuetracker.unity3d.com/issues/il2cpp-notsupportedexceptions-exception-is-thrown-in-build-with-newtonsoft-dot-json-plugin

## その他

[Utf8Json](https://github.com/neuecc/Utf8Json) には、 IL2CPP 用に[事前コード生成の機能](https://github.com/neuecc/Utf8Json#pre-code-generationunityxamarin-supports
)があるのですが、シリアライズするクラスにジェネリクスを使っていたせいか、これも手元ではエラーで動かすことができませんでした...

こちらで動かなかったライブラリも、バージョンや環境によってはうまくいくこともあると思いますので、いろいろ試してみてください。
C言語　平方根を返すコード②

前回の復習

スピードも考慮して実装した。
C言語　平方根を返すコードを自作する - Qiita
https://qiita.com/Kchan_01/items/51a9bda94ac62e3ef56c


##条件

- 数値の平方根を返す関数を作成します（存在する場合）。
- 平方根が無理数の場合は0。
- 2秒以内に返す。


##コード

```c
int ft_sqrt(int nb)
{
    int root;

    if(nb <= 0 || nb > (46340 * 46340))
        return (0);
    root = 0;
    // while(nb >= root && root <= 46340){ 指摘いただき、書き換え
    while(nb >= root * root){
        root++;
        if(nb == root * root)
            return (root);
    }
    return (0);
}
```

##テストケース

```c
    for(int i = -10; i < 30; i++)
        printf("%d : sqrt : %d\n", i, ft_sqrt(i));
    printf("%d\n", ft_sqrt(46340 * 46340));
    printf("%d\n", ft_sqrt(46340 * 46340 + 1));
    printf("%d\n", ft_sqrt(46340 * 46340 - 1));
    printf("%d\n", ft_sqrt(INT_MAX));
```

##所感
計算の際、int * intの上限はintということに気づいていなくて、20分くらい時間を使ってしまった。long intに代入するとしても、intの間で計算していることに変わりはないので気をつけたい。

問題理解　7分
コーディング　1０分
テストケース　２５分
最終コーディング　5分
【gnuplot】三項演算子によって条件付きのプロットをする

グラフを書く際に用いるgnuplotですが、基本的な使い方は既に紹介されているサイトが多いため、少し変わった使い方を1つ紹介します。

# 定義域条件付きのグラフをプロットしたい
例えば、$y<0$が存在しない現象に対して近似した数式が$x=0$の時$y<0$だとします。例えばこんな式です。

$y=12x-40$
$y<0$が存在しないですがモデル式として成立させるため$y<0$の時$y=0$だと仮定します。


$y=12x-40　(y≧0)$
$y=0(y<0)$

このような時、gnuplotでどうプロットすればよいのでしょうか。

#plot時に三項演算子が使える
gnuplotでplotする際のコマンドは今回の場合では

```
plot 12x-40
```

となります。そうすると、
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295196/bcd93d07-30b9-02a4-2994-cc5c37500f8b.png)

このようなグラフになります。（体裁を整える部分の説明は割愛）

$y<0$のとき$y=0$にすればよいので、plotする際のコマンドは

```
plot 12*x-40 <0 ? 0 : 12*x-40
```
となります。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295196/62a988ee-50d2-c07d-b985-095fd71a3f87.png)

これで、$y<0$のとき$y=0$にできました。

#まとめ
gnuplotで何らかの条件付き数式のグラフを作成したい場合、三項演算子を用いると実現できます。逆に一定部分を描画しないという設定もすることもできます。
コマンド操作は何が凄い？

# この記事は？

この記事では、コマンド操作 (Character-based User Interface, CUI) が、マウス操作 (Graphical User Interface, GUI) よりも優れている点について語ります。
基本的にはLinuxのsh系シェルを中心に話を進めますが、Windowsは例外という訳ではありません。
実技的な話は少なめです。Linux、サーバ管理の勉強を初めたことでコマンド操作を余儀なくされ、コマンドについて知りたて触りたてであったり、コマンド恐怖症になりつつある初心者の方向けに書きました。

# 「コマンド」と言われると･･･？

「コマンド操作」と言われ、「難しそう」「何ができるか分からない」「GUI (マウス操作) でやらせろ！」と思われる方は、きっと少なくないことでしょう。大半の人は、コマンド操作に一度は抵抗を持ったことがあるかと思われます。少なくとも、一昔前の私もその一人でした。

Linuxを初めたての頃は、右も左も分からず、ブラウザで調べて見つけたサンプルコードを見よう見まねで打ち込み。何のメッセージも出てこなかったら、「これで良いのかな？よう分からんが、多分動いているから**ヨシ**！」。よく分からない文がザーっと黒画面に流れた後にFinishとかSuccessとかが出てきたら「ホッ」。FailureとかErrorとか出てきたら「ガックシ」。

コンピュータ・情報技術の初期の時代は、PCはコマンド操作が基本。GUIはリッチな存在。時は流れ、ハードの性能が飛躍的に向上した現代では、GUIは当たり前の存在。GUIでほとんどこなせる現代なら、CUIは無縁では･･･？

# コマンド操作のココが凄い！

ただ、そんなコマンド操作には、GUIには無い便利さがあります。しばらくコマンド操作を触って、私が見つけたコマンド操作の便利さを、この記事で紹介致します。

## 其の一 - 環境の依存が小さい

GUIの表示は、標準出力に比べ複雑です。GUIを表示しようとすると、どうしてもグラフィックライブラリが必要になってきます。外部ライブラリを用いるということは、必然的に環境の依存が大きくなってきます。

CUIだと、基本的に入出力は標準入力 (キー入力) と標準出力 (コマンド画面への文字出力) のみ。この機能はOSから提供されているものであるため、環境依存は必然的に小さいと言えます。(稀に、フォントの不揃い等によって正常な表示ができないこともあります。ただ、英数字のみが出力されるものであれば、表示の不具合はとても少ないです。)

## 其の二 - 目的の動作を高速に行える

GUIツールを用いて何かのファイルを処理しようとしたとき、大抵はユーザによる手動のマウス入力が必須です。例えば、単純に動画の変換をしたいだけだとしても、ソフトを立ち上げ、ファイルを選択し、設定を確認し、出力開始と、数ステップの操作が必要になります。また、選択した設定がいちいち戻されたりする場合は、操作ミスで違う設定で変換･･･なんて事態が発生することもあり得ます。

また、グラフィックの処理というのは、ある程度の負荷がかかります。ある程度の負荷がかかる訳ですから、起動も時間がかかります。「これをしたいだけなのに、ソフト起動に時間を奪われる･･･。」なんて経験をしたことが、少なからずあるかと思われます。

CUIアプリだと、コマンドを一発叩くと、(途中でユーザ入力が求められるもので無ければ) すぐに目的の動作が始まり、終われば次のコマンドの入力待ちになります。付与するオプションをそのままに入力ファイルを変えれば、同じ処理を簡単に他のファイルで実行できます。(オプション未指定時、入力・出力ファイルによって自動設定される場合もあり。)

複雑なグラフィック表示も伴わないため、(よほど下手な作りでなければ) 起動も動作も迅速です。一度起動・設定して以降はほとんど人の手が触れることのない、例えばサーバマシンの現場では、余分なUIや処理は極力抑えたいとされます。そういった現場では、GUIのアプリやライブラリがインストールされていない環境でのCUI操作が今でも現役であることは珍しくありません。

加えて、「GUIが変わってどこに何があるか分からん！」なんて事態も、CUIには無縁です。(稀にコマンドのオプション名が変わったり、非推奨になったりすることもありますが。)

## 其の三 - 目的の動作の自動化がしやすい

GUIにはできない (もしくはやり辛い) けどCUIでは手軽にできることの一つに、「(半)自動化ができる」という点があります。コマンドを並べてつくることのできる「シェルスクリプト (Windows ではバッチファイルとも)」。よく使う一連のコマンドをシェルスクリプトとして書いておけば、そのシェルスクリプトを実行するだけであっという間にいつもの作業完了。

シェルスクリプトでは、一連のコマンドをループで実行できるループ構文や、状態によって実行するコマンドを変える条件分岐構文が用意されています。また、正規表現を用いることで、ファイルパス等の文字列の処理を行うことも可能です。これらを活用すれば、指定した当該ファイルの数だけ一定のコマンドをループさせて全ファイルに処理を行ったり、あるファイルを複数のソフトに順番に処理を通したり、といった芸当もシェルスクリプトではおちゃのこさいさい。

仮に、これをGUIで実現しようとした場合、マウス操作のクリック判定位置やウィンドウ表示の変化等の情報を取得し、無理やりマウス操作をエミュレートすることになるでしょう。不可能ではないとしても、かなり大掛かりになります。(当然ながら、GUI表示の処理は余分ということになります。)

# コマンド操作の弱いトコ

CUIがGUIに勝る点を述べてきましたが、当然その逆のCUIがGUIに劣る点もあります。

例えば3Dモデリングや動画編集等は、普通は常に完成形を確認しながら作業を進めるものです。CUIでは3Dモデルや画像等の複雑な表示や、マウスやペンタブレット等による複雑な入力はできません。そのため、

起動速度の観点においては、例えばディスクパーティションソフトのように頻繁には使用しないソフトでは、そこまで起動速度を重視しなくとも問題は少ないです。(起動だけで精一杯のような弱いマシンでは話は別ですが･･･。) すると、(よほど下手なGUIでなければ) 状態が図で確認しやすい方が利用しやすいです。私も、ディスクパーティション設定なんかはGUIに甘えます。(例えばGParted。)

# おしまいに

コマンド操作は取っ付きにくいと感じるのは事実と思います。初めたばかりの頃は、何を打っているのかさっぱり分からないこともあるかと思います。コマンドを打つ時間よりも調べる時間の方が長いこともよくあることと思います。ただ、そこまでハードルが高いと心配するものでもないかと私は思います。こういうのは、時間をかけてしだいに慣れてゆくものですので。

以上、コマンド操作の凄いコトに関してでした。
Firestoreで指定の条件にマッチするDocumentだけ削除する

```swift

self.db.collection("orders").whereField("uid", isEqualTo: self.user.uid).getDocuments { (snapshot, error) in
                snapshot?.documents.forEach({ (doc) in
                    doc.reference.delete()
                })
            }
```


https://stackoverflow.com/questions/47180076/how-to-delete-document-from-firestore-using-where-clause
【Unity(C#)】OculusQuestのハンドトラッキングでボタンを押す

##Oculus Integration
この記事内では`Oculus Integration`の使用を前提に話を進めていきます。

`Oculus Integration`内のコード自体は
私レベルでは理解不能なことをいっぱいやっていますが、
パーツを部分的に使用すれば本当に使いやすくなっているのが
今回使ってみて改めてよくわかりました。

ありがとうOculus。
(贅沢言えばハンドジェスチャーのステートとかほしい、、、)

##デモ

作成中のお絵描きアプリでRedo,Undo機能の呼び出しにボタンを使いました。

![HandPaint1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244071/de675c1b-28d5-c2f9-5eae-d60e1087d815.gif)

##準備

下記リンクを参考に、デモシーンからボタンをパクってきていろいろ設定します。

【参考リンク】：[Oculus Quest ハンドトラッキングを試してみた](https://gaprot.jp/2020/03/05/oculus-quest-handtracking/)



##コード

一部を抜粋して貼ります。

```C#
        [SerializeField] private ButtonController _redoButtonObj, _undoButtonObj, _paintButtonObj;

        private HpPaintFunctionState _paintFunctionState;

        private void Start()
        {
            //Redoボタンが押されたらFunctionステートを変更
            _redoButtonObj.InteractableStateChanged.AddListener(modeChangeToRedo);
            
            //Undoボタンが押されたらFunctionステートを変更
            _undoButtonObj.InteractableStateChanged.AddListener(modeChangeToUndo);
            
            //Paintボタンが押されたらFunctionステートを変更
            _paintButtonObj.InteractableStateChanged.AddListener(modeChangeToPaint);
        }


        /// <summary>
        /// Redoモードに変更
        /// </summary>
        /// <param name="obj">リスナー登録時に必要な引数</param>
        private void modeChangeToRedo(InteractableStateArgs obj)
        {
            if (obj.NewInteractableState == InteractableState.ActionState)
            {
                _paintFunctionState = HpPaintFunctionState.Redo;
            }
        }
        
        /// <summary>
        /// Undoモードに変更
        /// </summary>
        /// <param name="obj">リスナー登録時に必要な引数</param>
        private void modeChangeToUndo(InteractableStateArgs obj)
        {
            if (obj.NewInteractableState == InteractableState.ActionState)
            {
                _paintFunctionState = HpPaintFunctionState.Undo;
            }
        }
        
        /// <summary>
        /// Paintモードに変更
        /// </summary>
        /// <param name="obj">リスナー登録時に必要な引数</param>
        private void modeChangeToPaint(InteractableStateArgs obj)
        {
            if (obj.NewInteractableState == InteractableState.ActionState)
            {
                _paintFunctionState = HpPaintFunctionState.Paint;
            }
        }
```

**`InteractableState.ActionState`という状態になっていれば
各機能(Redo,Undo,Paint)へ切り替わる** という関数を
**それぞれのボタンのステートが切り替わった際に実行されるイベント**として登録しています。


##まとめ
・`ButtonController`の`InteractableStateChanged`に
　イベントを登録することでステート変化時に任意の処理が実行可能。

・登録するイベントには`InteractableStateArgs`を引数で渡して
　どのステートからどのステートに移行したかに応じた処理が書ける。
Ubuntu 18.04にTeamviewer15をインストール

# Ubuntu 18.04にTeamviewer15をインストール
- 個人的な記録
- [GUIでのインストール](https://www.linuxmania.jp/howtouse-teamviewer.html)がうまく行かなかったため
- ほとんどすべて こちらの記事 [『Ubuntu 16.04でTeamviewerインストール』](https://qiita.com/tktwk77/items/6f32f7fc0c2e7c1f9eae) を参考にした。
- 実家のwindows7オンボロ端末をubuntuにしてみただけなのでLinuxのことは何も知らないに等しい。

## 環境確認
- バージョン確認

```bash
$ cat /etc/lsb-release
DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=18.04
DISTRIB_CODENAME=bionic
DISTRIB_DESCRIPTION="Ubuntu 18.04.4 LTS
```
- アーキテクチャ

```bash
$ arch
x86_64
```

## Teamviewerダウンロード

```bash
$ wget https://download.teamviewer.com/download/linux/teamviewer_amd64.deb
```
- wget :[URL] URLに指定したファイルをダウンロードするコマンド


## インストール　１回目
-  インストールしようとすると怒られる
 -  依存関係のあるパッケージがないらしい

```bash
$ sudo dpkg -i teamviewer_amd64.deb
dpkg: 依存関係の問題により teamviewer の設定ができません:
 teamviewer は以下に依存 (depends) します: libqt5qml5 (>= 5.5) | qt56-teamviewer ...しかし:
  パッケージ libqt5qml5 はまだインストールされていません。
  パッケージ qt56-teamviewer はまだインストールされていません。
```
## 依存関係のあるパッケージを追加
-  [こちら](http://ytyaru.hatenablog.com/entry/2019/11/23/000000)の「調べる７」を参考にする
 - パッケージが入ってないなら入れればいいのね。なるほど。 
 - しかしまたしても依存のエラー

```bash
$ sudo apt install -y qml-module-qtquick-templates2
以下のパッケージには満たせない依存関係があります:
 qml-module-qtquick-templates2 : 依存: libqt5qml5 (>= 5.9.0~beta) しかし、インストールされようとしていません
... 
E: 未解決の依存関係です。'apt --fix-broken install' を実行してみてください (または解法を明示してください)。
```

- 何かfixっぽいコマンドを実行してみてください、と言っているからやってみよう
 - root権限で実行しないといけなかったらしい

```bash
$ apt --fix-broken install
E: ロックファイル /var/lib/dpkg/lock-frontend をオープンできません - open (13: 許可がありません)
E: Unable to acquire the dpkg frontend lock (/var/lib/dpkg/lock-frontend), are you root?
```
- root権限で実行しないといけなかったらしい
- 【 sudo 】[スーパーユーザー（rootユーザー）の権限でコマンドを実行する](https://www.atmarkit.co.jp/ait/articles/1611/28/news036.html)

```bash
$ sudo apt --fix-broken install
```
- これで成功



## アップデート

```bash
$sudo apt-get update
```
- 【apt-get】[Ubuntuのパッケージ管理システム。
インストールしたいアプリケーションを一括でインストール/アンインストールできる](http://kawatama.net/web/296)

## インストール 2回目
```bash
$ sudo dpkg -i teamviewer_amd64.deb
```
- 【dpkg】　debian系のパッケージを管理するためのコマンド(https://eng-entrance.com/linux-package-dpkg)

- ↓こっちでもよかったのかも

```bash
$sudo apt-get install -f
```


## 初回起動

```bash
$ teamviewer
```
Windows10上のSpacemacsでデフォルトエンコードをUTF8にする

# 概要
Windows10でSpacemacsを使っていると、新規作成したファイルのエンコードが `dos`になる。

僕はMacでは `utf-8-unix`を使っているので、Windowsでもデフォルトはそっちにしたい。毎回 `set-buffer-file-coding-system` ( `Ctrl + x Return f`)で変えるのはしんどい。


# デフォルトのエンコードを変える
変える。 `.spacemacs` ( `Space f e d`)に、以下のような設定を加える。

今回は `utf-8-unix`で。

```emacs-lisp:.spacemacs(抜粋)
(defun dotspacemacs/user-config ()

  ;; デフォルトのエンコードをUTF8にする
  (set-default-coding-systems 'utf-8-unix)

)
```
SpacemacsのVim Stateで1文字だけ削除するときはクリップボードにコピーさせない

# 概要
SpacemacsのVim State (Evil State)において、何文字か削除する時はつい `x`を連打しているが、これをやると **無意味な1文字が永遠にコピーされ続ける**。Vimだからそれはそうだけど。。。

クリップボード拡張アプリと連携して「ﾖｫｼ!!!コピーすっぞ」と思ってクリップボード履歴を開くと半分以上が1文字のゴミに埋もれて悲しい気持ちになること一入。

スペース (空白)で埋め尽くされているともはやきれそうになる。


# 1文字だけ削除する場合はコピーさせない
Vim Normal Stateにおける `x`と `X`のキーバインドを **削除だけ**に変更する。

`.spacemacs` ( `Space d e f`)から `user-config ()`にキーバインド設定を加える。

```emacs-lisp:.spacemacs(抜粋)
(defun dotspacemacs/user-config ()

  ;; 1文字だけの削除でクリップボードにコピーしない
  (define-key evil-normal-state-map (kbd "x") 'delete-forward-char)
  (define-key evil-normal-state-map (kbd "X") 'delete-backward-char)

）
```


cf. [Evil - don't yank with only whitespace to register](https://emacs.stackexchange.com/questions/39434/evil-dont-yank-with-only-whitespace-to-register)
[Python] 上位ディレクトリにある自作パッケージをインポートして使いたい

Pythonで上位ディレクトリにある自作パッケージをインポートして使いたいが、相対パスによるインポートや、スクリプト内でsys.pathを変更したくない場合の対処方法がなかなか見つからなかったので、書き置きします。

結論的には `setup.py` を作成し `pip install -e .` というコマンドを使います。


# 構成

ディレクトリ構成例：

```
project
+ mypackage
|  + __init__.py
|  + module_a.py
+ myprogram1
|  + executor
|    + executor.py
|  + tests
|    + ...
|  + env
|  + requirement.txt
+ myprogram2
|  ...
+ setup.py
```

`executor.py` からみて上位フォルダに有る `mypackage` という自作パッケージをインポートして使いたい。 

`myprogram1`, `myprogram2` ... は独立していて、それぞれ**別の仮想環境(virtualenv)**、**パッケージ管理(pip)**, **単体テスト(testsフォルダ）**で構成が可能。

私の場合、Serverlessフレームワークで構成された独立してデプロイ可能なAWS Lambdaのサービス用のディレクトリが複数あり、また共通処理としてLambdaLayerを上位のフォルダに配置していたため、ローカルでLambdaの関数からLambdaLayerが正しくインポートできずにいた。

# 詳細

## 自作パッケージ作成

module_a.py の中身

```python

def hello():
    print('Hello World')
```


## setup.py の 配置

以下のような `setup.py` をルートディレクトリに置く。

```shell
from setuptools import setup, find_packages

setup(name='myproject', version='1.0', packages=find_packages())
```

find_packages() は自動的に `__init__.py` が存在するパッケージを探索してくれる。 ルートディレクトリからは、mypackageが見つかる。

それ以外のsetup()の中身は適当です。

## 自作パッケージをpipインストール

あとは各ディレクトリで以下のコマンドを実行することで、自作パッケージをインストールする。

```bash
cd myprogram1
```

```bash
pip install -U -e ../
```
-U または --upgrade はパッケージを最新状態に更新する。
-e または --editable は自作パッケージを編集し保存する際、自動的に変更を認識してくれる為、自作パッケージの再インストール(pip install)が不要になる。

## 自作パッケージのインポート

executor.py

```python

from mypackage import module_a # 自作パッケージ

module_a.hello() # 呼び出し
```



## 実行

```shell
> python executor/executor.py
Hello World
```


# 参考

* [pip install -e コマンド](https://pip.pypa.io/en/stable/reference/pip_install/#options)


# 修正履歴

* 20/6/28 一部修正と、説明がシンプルになるように削りました。
【UE4】オブジェクトに当たり判定を付けてアイテムの取得する処理を作る 初心者向け【UnrealEngine】

UE4で配置したオブジェクトがキャラクターと衝突した時、反応する仕組みをブループリントで作ります。

今回はこんな感じで配置したハンバーガーを消してみる
--------
![アイテムゲット2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497331/c77360e9-4642-57b9-c0f6-e7a12effcacb.gif)




1.当たり判定を付けるためにブループリントを作る
-----

![ブループリント作成.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497331/83a2542e-049c-8364-f9d6-c07bc0338a64.png)

当たり判定を付けたい好みのオブジェクトを配置し[詳細]->[ブループリント/スクリプトを追加]を押してブループリントを作る

2.作ったオブジェクトのブループリントに当たり判定用の球体(SphereCollision)を追加
-----------
![コリジョン追加.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497331/4e08f8ba-8eb3-89cd-8d51-3825f02e666c.gif)

追加したSphereCollisionに何か衝突した時のイベントを作る為
SphereCollisionの[詳細]->[イベント]の中のOnComponentBeginOverlapを選択します。

###### On Component Begin Overlap は他のアクターと衝突した時に呼ばれるイベントです

3.最後に衝突した時の内容を組み込めば完成
--------------------------------
![ヒットした時の処理を作る.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497331/8e61e300-27cd-1cf0-0f24-e42f2345bcbc.png)

OnComponentBeginOverlapを選択した後、イベントグラフを確認するとOnComponentBeginOverlapのイベントが追加されていると思うので、イベントが呼び出された時(他のアクターと衝突した時)にこのアクターを消す処理を作っていきます。

今回はプレイヤーと当たった時にこのアクターを消すという処理を作りたいので、Cast to (プレイヤーのブループリント名)　というノードを使い、衝突したアクターがプレイヤーなのか判定し、プレイヤーの場合DestroyActorでアクターを消す処理を続行するようにします。
#####※ Cast toで判定をしていない場合地面と接触するだけで消えるので注意


おわりに
---------------
消す前に何か効果を持たせると色々面白いことが出来そうですね。
【Ruby】繰り返しについて

rubyの繰り返し文についてまとめておきます。

#繰り返しを行うには？
以下のような構文又はメソッドを利用して繰り返し文を書くことが可能です。
今回はそれぞれの使い方をまとめて見ます。

・timesメソッド
・for文
・eachメソッド

##timesメソッド

一定の回数だけ同じ処理をさせたい場合はtimesメソッドを利用します。

```ruby:qiita.rb
5.times do
    p "りんご"
end

```

```実行結果.rb

"りんご"
"りんご"
"りんご"
"りんご"
"りんご"
```

ブロック内で繰り返しの数値を使いたいときはdoの後に|変数|を加えます。

```ruby:qiita.rb
5.times do |i|
    p "りんご#{i+1}個を食す"
end
```
```実行結果.rb
"りんご1個を食す"
"りんご2個を食す"
"りんご3個を食す"
"りんご4個を食す"
"りんご5個を食す"
```

##for文

timesメソッドとは異なりfor文はメソッドではないので記述方法が異なります。
1から10まで加算する繰り返し文は以下のようにできます。

```ruby:qiita.rb
sum =0

for i in 1..10 do
    p sum += i
end
```

```実行結果.rb
1
3
6
10
15
21
28
36
45
55
```

1..10の部分をオブジェクトに変更することも可能です。


```ruby:qiita.rb
fruits =["りんご","なし","さくらんぼ","みかん"]

for i in fruits do
    p i
end

```

```実行結果.rb
"りんご"
"なし"
"さくらんぼ"
"みかん"
```

fruits配列の要素分処理を繰り返しています。
for文と同じことをeachメソッドでも記載することが可能です。

##each文

each文は以下のように記述します。

```each.rb
オブジェクト.each do |変数|
　繰り返したい処理
end
```

for文と同じ処理をeachメソッドで記述すると・・・・

```ruby:qiita.rb
fruits =["りんご","なし","さくらんぼ","みかん"]

fruits.each do |i|
    p i
end

```
```実行結果.rb
"りんご"
"なし"
"さくらんぼ"
"みかん"
```

同じ結果が得られました！
powershellでレジストリを操作（各ウィンドウのタイトルバーの色を変更）

レジストリをコマンドラインで操作する方法。
レジストリ操作はpowershellネイティブのコマンドレットだと操作しずらいように感じたので通常はコマンドプロンプトから呼び出すreg.exeコマンドをpowershellから呼び出して使ってみました。


#ウィンドウのタイトルバーの背景色を変更
以下の1-3のコマンドをPowershellで実行するとタイトルバーの背景色を変更できます。
####1.ウィンドウのタイトルバーの背景色を有効化
```powershell:powershell.ps1
$reg_path = "HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\DWM"
$reg_name = "ColorPrevalence"
$reg_type = "REG_DWORD"
#有効化
reg add $reg_path /V $reg_name /T $reg_type /d "0x1"
#設定値の確認
reg query $reg_path /V $reg_name /T $reg_type
```

####2.アクセントカラーを指定
```powershell:powershell.ps1
$reg_path = "HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\DWM"
$reg_name = "AccentColor"
$reg_type = "REG_DWORD"
#赤にする
reg add $reg_path /V $reg_name /T $reg_type /d "0xff0000ff"
#緑にする
reg add $reg_path /V $reg_name /T $reg_type /d "0xff00ff00"
#青にする
reg add $reg_path /V $reg_name /T $reg_type /d "0xffff0000"
#黄色にする
reg add $reg_path /V $reg_name /T $reg_type /d "0xff00b9ff"
#設定値の確認
reg query $reg_path /V $reg_name /T $reg_type
```
0xff + 青 + 緑 + 赤の順に指定する。普通(Red Green Blue 形式）と逆。

####3.透明効果を無効化
```powershell:powershell.ps1
$reg_path = "HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Themes\Personalize"
$reg_name = "EnableTransparency"
$reg_type = "REG_DWORD"
#無効化
reg add $reg_path /V $reg_name /T $reg_type /d "0x0"
#設定値の確認
reg query $reg_path /V $reg_name /T $reg_type
```




【参考】regコマンドでなくpowershellコマンドレットの場合

```powershell:powershell.ps1
$reg_path = "HKCU:\SOFTWARE\Microsoft\Windows\CurrentVersion\Themes\Personalize"
$reg_name = "EnableTransparency"
#有効化
 Set-ItemProperty ($reg_path ) -Name $reg_name -Value 1
#設定値の確認
 Get-ItemProperty ($reg_path ) -Name $reg_name
```



#【参考】スタートメニュー・タスクバーの色の有効化
タスクバーの色は何故かレジストリ設定変更だけではうまくいかない。
上記1-3のコマンドを実行した後で更に以下を実行

```powershell:powershell.ps1
$reg_path = "HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Themes\Personalize"
$reg_name = "ColorPrevalence"
$reg_type = "REG_DWORD"

#有効化
reg add $reg_path /V $reg_name /T $reg_type /d "0x1"
#設定値の確認
reg query $reg_path /V $reg_name /T $reg_type
```
その後、GUIで
デスクトップ右クリック⇒個人用設定⇒色　からアクセントカラーを選ぶとタスクバーの色も変更された。

#補足

#####(1)各ユーザのカスタマイズしたテーマの保存場所
` C:\Users\ユーザ名\AppData\Local\Microsoft\Windows\Themes\Custom.theme `

#####(2)テーマ指定に関するローカルグループポリシー
カスタマイズしたThemeを読み込ませるポリシーをコンピュータの全ユーザに適用
`Local Compute Policy →　User Configuration → Administractive Templates → Control Panel → Personalization → Load a spcific theme`

################################################################################
#参考文献
################################################################################

[元大雑把SEの雑記ブログ/レジストリの変更をコマンドで実行する方法]
(https://oozappase.com/windows/regcommand/ "link")

[Windows10 のタイトルバーに好きな色を付け、タスクバーはデフォルトの暗い色を利用する方法](https://freesoft.tvbok.com/win10/desktop/taskbar_color.html "link")

[【Windows10】透明効果の(オン/オフ)とタスクバーの透明度を上げる(レジストリ)]
(https://paso-kake.com/it/windows10/6450/ "link")
【Rails】スレッドのレス投稿機能

プログラミング初心者です。
Ruby on Railsで掲示板のスレッドにレスを紐付けて投稿していく機能を作成しました。
結構苦戦したので、備忘のため貼り付けます。

【スレッド（親、tree）controller】

```
  def show
    @tree = Tree.find(params[:id])
    @response = Response.new(:tree_id => params[:id]) #ここを投稿用に使う
    @responses = @tree.responses.all
  end
```

【レス（子、response）controller】

```
  def create
    @response = current_user.responses.new(response_params)

    if @response.save
      redirect_to tree_url(@response.tree_id), notice: "投稿「#{@response.text}」を登録しました"
    else
      render tree_url(@response.tree_id)
    end
  end

  private

  def response_params
    params.require(:response).permit(:text, :user_id, :tree_id)
  end
```

【スレッド（親、tree）viewのshow】

```
= form_with model: @response, url_for: { controller: :responses, action: :create }, local: true do |f|
  .form-group
    = f.label :text, "コメント"
    = f.text_field :text, class: "form-control", id: "response_text"
  = f.hidden_field :tree_id
  = f.submit "投稿", class: "btn btn-primary"
```
【routes.rb】

```
  post "/responses", to: "responses#create"
  resources :trees
```

## 感想
特にルーティングエラーが多く発生しました。肝となるコードは以下の２点です。

```
# 入力フォーム
url_for: { controller: :responses, action: :create }
```
```
# ルーティング
post "/responses", to: "responses#create"
```
Vim 原理主義者である私の最強にして究極の ~/.vimrc を公開する

# この文章のターゲット
この記事は、Vim 原理主義者の `~/.vimrc` を公開するものです。何か特定のプラグインやキーバインドを紹介するものではありませんので、そこはご注意ください。
# 原理主義
## 原理主義とは

コンピュータ界隈には、時に畏れ敬われ、時にあざ笑われような"原理主義者"と呼ばれる人々が存在します。

この語について述べる前に、真逆のものをイメージしてみてください。みなさんの周りには、このような人はいませんか。

- Caps Lock と Ctrl を入れ替える
- Mac ユーザなのに HHKB を使う
- `~/.bashrc` に`alias vim='emacs'`という記述がある

このような設定をしている人々は、原理主義者ではありません。原理主義者というのは、Emacs を使用していてどれほど左小指が痛くなろうと、包み込まれるような打鍵感の誘惑に負けそうになろうと、また Emacs 急先鋒であろうと、マシンではなくあくまで自分を適応させようとする人々のことです。

すべてにおいて原理主義者である人は非常に少なく、誰かが原理主義者であるとするならば大抵は、「〇〇原理主義者」と呼ばれるのが一般的です。たとえば、上に挙げた3つのようなことに強い嫌悪感を示し、あくまで Apple が設定したデフォルトを愛し使い続けようとする人々は

Mac 原理主義者

であるとされます。
## なぜ人々は原理主義者になるのか
コンピュータを愛するギークや、こだわりの強い人々は、自分の愛するものが

"洗練"されており
何らかの"対称性"をもち
"一貫性"がある

ことを求めます。

それらの3つの必要条件を"最強の進化"や"最強の変態"によって達成する人がいれば、"必要かつ十分な装備"や"速度と機能度の両立"によって満たす人もいます。

その一方で、"何も変更しない"や"初期状態"こそが最強であると考える人もいます。それが原理主義者なのですが、彼らはこう考えています。

- "デフォルト"とは至高の洗練、対称性、一貫性である
- カスタマイズとはそれらの美しさを"汚す"行為である
- 世界中の何万台ものマシンが自分の環境と完全に同一の状態にある

Ctrl ボタンは左最下部(だけど最左端じゃない)にあるよりも、a ボタンの左にあったほうが良いです。一生で小指への負担がどれほど減るのか、考えただけで眠れなくなります。

しかし、かといってキーバインドの設定を実際にやってしまうというのは、愛する Mac を否定することであり、葛藤しながら Caps Lock と Ctrl の配置をこのように決定した Apple のエンジニアへの冒涜にほかなりません。こうして私は、Mac 原理主義者であり続けるのです。

そして世界中のエンジニアも原理主義者であり続けるのです。

# 私の `~/.vimrc`
様々な人々が、自分の自慢の `~/.vimrc` を公開しています。私もその例にもれず、自分の `~/.vimrc` を愛しているし、誇りを持っています。自分が長い時間と苦労をかけて辿り着いた極地を公開するのは恥ずかしい気持ちですが、

これが、私の `~/.vimrc` です。

```C:~/.vimrc

```

# 究極の `~/.vimrc` に至るまで
## エディタ戦争における Vim
Editor War と呼ばれる聖戦で、Vim 側の人間の主張は、最終的にはこれに落ち着くとされています。Vi と Vim は今同一サイドにいるわけですが、

> Ubiquitous. Essentially all Unix and Unix-like systems come with vi (or a variant) built-in. Vi (and ex, but not vim) is specified in the POSIX standard.

要するに

「デフォルトで入ってる！」

これが Vim の最強の武器です。Vim 信者を支える唯一の真実でもあります。「デフォルトの OS で Emacs はないけれど Vi はある」、これが Vim こそが UNIX および Linux において公式であり公認の唯一のエディタであるという証明です。

それが Vim はデフォルトであるべきだという Vim 原理主義者たちの教義になっています。

## Vim と Emacs の立ち位置
Vim 原理主義者によると、Vim と Emacs の立ち位置は以下のようになっています。

- Vim はデフォルトのエディタ。デフォルトの状態こそが最も洗練されていて、対称性があり、一貫性がある
- Emacs は改造に改造を重ねて手に馴染ませた状態こそが最強

Emacs は、使うほどに色艶が増す漆器のようなものです。使って初めて完成する、汚して初めてエディタとなるエディタです。それこそが Emacs の洗練であり、対称性であり、一貫性なのです。

一方で Vim に関しては

「デフォルトの Vim こそが究極の Vim である」

というのが、Vim 原理主義者たちの思いです。

# 結論
Vim の存在意義を考えたとき、Vim 原理主義者たちが至った結論はこうでした。

> デフォルトの Vim こそが究極の Vim である

それこそが Vim 原理主義者である私が、この `~/.vimrc`に辿り着いた理由です。

# さいごに
ちなみに、僕はどっちかというと Emacs 派です！
【初心者用】htmalでwebサイトを作るときにまず入れる必須タグ



<h1>htmlでサイトをつくる際にまず知るべき事</h1>
<p>
htmalでwebサイトを作るときに基本的には

　　　　　「head」 「body」 「footer」

の3つの部分によって構成されています。

<p>
<p>


このあたりに関してはprogaetを学んでいる方ならご存知かとは思います。しかし、いざ実際にページを作成してみるとheadには何を入れればいいのか？、
<p>
<p>

bodyはどんな風にみせればいいの？という疑問が生まれるのではないでしょうか。そこで今日は
heaｄ前に入れるものとhead内冒頭にまず最初に必ず入れるべきコードをお伝えします。<p>
<p>


<h2>そもそもheadとは</h2>

headはユーザーが見ることはできないwebサイトの基盤となっている部分です。
<p>
<p>
レストランで言えば厨房のようなイメージです。
このhead＝厨房内で文字コードを入力し料理するからこそユーザーに見えやすいコンテンツが提供されているとそんな風に捉えて頂ければ大丈夫です。
<p>
<p>
<p>





<h3>!DOCTYPE html</h3>


htmlにてwebページを作成する際にこの文章はhtmlで書きます！と宣言する必要があリます。

そこでこの!DOCTYPE htmlをいれることによってこのファイルhtmalで作成します！と宣言することができるんですね。

この!DOCTYPE htmlまずファイルを作成した一番はじめに入れるようにしましょう
<p>
<p>
<p>


<h3>html lang=“ja”</h3>


次にすべき事はこのhtmlコードは日本語で描きます！と宣言する作業です。

html lang=“ja”とありますが英語の場合はhtml lang=“en”となり、それぞれの言語に合わせて最初に入れておきましょう。
<p>
<p>
<p>


<h3>meta charset="utf-8"</h3>

コンピューター上には文字を理解するために必要な文字コードというものが存在します。

このmeta charset="utf-8"は文字コードの指定を表していますのmetaって何？という方、

metaタグについてはまたお伝えしますが、いまはこのmeta charset="utf-8"を入力するとパソコン側がutf-８をつかえばいいのね！と理解してくれると覚えてください。

<p>
<p>
<p>
<p>
プログラミングはただ丸暗記する必要はありませんが基盤となる概念は理解して置く必要があります。なぜこのコード、タグが必要なのか、そこだけ理解できれば他を暗記する必要はありません。

<p>
次回はその他にheadに入れるべきタグをご紹介します。
[Docker]CMDとENTORYPOINTの挙動の違い

## はじめに
Docker初心者です。自分用に記載。
今回、Dockerfileに記述する命令、`CMD`と`ENTRYPOINT`に関する記事を投稿してみました。

## Dockerとは

> Dockerはコンテナ仮想化を用いてアプリケーションを開発・配置・実行するためのオープンソースソフトウェアあるいはオープンプラットフォームである。

> Dockerはコンテナ仮想化を用いたOSレベルの仮想化によりアプリケーションを開発・実行環境から隔離し、アプリケーションの素早い提供を可能にする。かつその環境自体をアプリケーションと同じようにコード（イメージ）として管理可能にする。Dockerを開発・テスト・デプロイに用いることで**「コードを書く」と「コードが製品として実行される」間の時間的ギャップを大きく短縮できる。**
(Wikipediaより)

つまりdockerを使うメリットは、

- 起動・実行にかかる処理の負荷(オーバヘッド)が少ないため、高速
- 環境をコード化(イメージ化)することで、そのコードをもとに誰でも同じ環境を作ることができる。
- 環境の設定を変更したとき、再構築の時間が短くて済む。また、システムの廃棄も容易。

## Dockerfileとは
Dockerイメージを作るやつ。

## わからなかったこと
`CMD`も`ENTRYPOINT`もどちらもコンテナ起動時に実行するコマンドなのははわかったが、
`docker run`実行時に、どう挙動が違うのか？

## CMDとENTRYPOINTの挙動の違い
これらの記事を参考にしました。
http://docs.docker.jp/engine/reference/builder.html#cmd-entrypoint
https://gist.github.com/goldeneggg/e2b2d7ca9ea2e649df5f

docker run の際、**コマンド引数指定あり**の時に挙動の違いがありました。
また、`ENTORYPOINT`のみ、シェルを介す書き方と、介さない書き方にも違いがあることもわかりました。

| | CMD ls（シェルを介す）|CMD ls -l（オプションあり）|CMD ["ls", "-l"]（シェルを介さない）| ENTRYPOINT ls（シェルを介す）|ENTRYPOINT ls -l（オプションあり）|ENTRYPOINT ["ls", "-l"]（シェルを介さない）
|:--|:--|:--|:--|:--|:--|:--
|**docker run　の際、コマンド引数指定なし**|CMDで指定したコマンドを実行するだけ|CMDで指定したコマンドを実行するだけ |CMDで指定したコマンドを実行するだけ|ENTRYPOINTで指定したコマンドを実行するだけ|ENTRYPOINTで指定したコマンドを実行するだけ|ENTRYPOINTで指定したコマンドを実行するだけ
|**docker run の際、コマンド引数指定あり**|引数で指定したコマンドが実行される|引数で指定したコマンド(とオプション)が実行される|引数で指定したコマンド(とオプション)が実行される|ENTRYPOINTで指定したコマンドがそのまま実行される|ENTRYPOINTで指定したコマンドがそのまま実行される|**エラーになる** (引数で指定したコマンドがオプション扱いになるため)

#### CMDの場合
- 上の表を見てわかる通り、シェルを介す場合でも介さない場合でも`docker run`の際、コマンド引数を指定してあると、`CMD`で書いたものは無視されます。(公式で言うと、上書きされます。)


#### ENTRYPOINTの場合

- **シェルを介す場合**
 - `docker run`の際、コマンド引数を指定してあげても、Dockerfileに書いた`ENTRYPOINT`で指定したコマンドがそのまま実行されます。引数の方は無視されます。
- **シェルを介さない場合**
 -  `docker run`の際、コマンド引数を指定してあげてしまうと、エラーになります。これがちょっとややこしい。実際例を見てもらったほうが分かりやすいと思います。

```Dockerfile:Dockerfile

FROM centos
MAINTAINER hoge

ENTRYPOINT ["ls", "-l"]
```
```shell

% docker run --rm IMAGE_ID ls -lh
ls: cannot access ls: No such file or directory
:
```
このように、`ENTRYPOINT`のparam部分 `-l`が コマンド引数 `ls` で上書きされます。
つまり、**paramの部分だけ上書きされます。**

であれば、`docker run`の際、lsコマンドの引数としてオプションを指定したらどうなるのでしょうか？
**結果**

```shell
% docker run --rm IMAGE_ID -lh
dr-xr-xr-x  2 root root 4.0K Apr 12 01:10 bin
drwxr-xr-x  4 root root  80K May  2 07:57 dev
drwxr-xr-x 40 root root 4.0K May  2 07:57 etc
drwxr-xr-x  2 root root 4.0K Sep 23  2011 home
:
```
エラーを吐かず、オプションとして認識されました。
UNVT をワンラインで Raspberry Pi にインストール

## 経緯
国連ベクトルタイルツールキット （UNVT） を Raspberry Pi に実装する方法として、これまで Docker を使ってきたところですが、[UNVT 進捗 20200319](https://qiita.com/hfu/items/ed42f4089a08095e25d5)で共有したとおり、ウェブ系のツールを Raspbian レベルに降ろす「メザニン」方式を試したりしていました。

技術の最近の状況を確認したところ、`ogr2ogr` や `Tippecanoe`、 `vt-optimizer` などのジオ系のツールについても Raspbian レベルに降ろすことができる見通しが立ちました。本日の仕事はその具体の実装です。

### 技術的詳細
技術的には、Tippecanoe を Raspbian でコンパイルできるようになったということであり、きれいな Node.js ツール群を Raspbian に導入できるようになったということです。

前者については、LDFLAGS に `-latomic` オプションを加えることをみつけることができたのが個人的にはブレークスルーでした。また、`apt` で導入可能な `ogr2ogr` のバージョンが 2.4.0 になり、UNVT にとってワイヤーフォーマットであるところの GeoJSON Text Sequences (`GeoJSONSeq`) のサポートが楽に得られるようになったことも大きいです。

（GDAL を Raspbian でソースからコンパイルする必要もあったとすると、こういうワンラインインストーラーを作ろうとは思わなかったかもしれません。）

## 成果
フレッシュな Raspbian Lite の上で、

```zsh
curl -sL https://unvt.github.io/equinox/install.sh | bash -
```

と実行すれば、UNVT の主要ツールが導入されるようになりました。詳細は [gh:unvt/equinox](https://github.com/unvt/equinox) をご覧ください。

今後、生産やホストを行うプロジェクトの `Rakefile` に `task :world` として、上記のワンライナーが呼び出されるようにしていきたいと考えています。タスク名を `world` にするのは [FreeBSD の例](https://kaworu.jpn.org/freebsd/make_world)への敬意からです。UNVT プロセスは `rake world` から始めていくものにしていきます。

## 注釈
いまのところ一連の作業は Raspbian Lite の上で行っている。WiFi を含むネットワークの設定が簡単であるためで、いわゆる「デフォルト厨」的な考え方に基づいています。

今後、他のプロジェクトとの連携の必要などに合わせて、例えば Raspbian から Ubuntu あるいは Alpine Linux に移行するかもしれません。

また、必要に応じて `osmium` などを `equinox` に加えるかもしれません。
【自己位置推定の基礎】ベイズの定理と全確率の定理のグラフィカルモデル

# この記事の要約

- グラフィカルモデルの話を簡単にする
- 自己位置推定で利用される確率計算（ベイズの定理，全確率の定理）に利用されるグラフィカルモデルをまとめる



# グラフィカルモデル

グラフィカルモデルとは，確率変数間の関係や依存を図的に表現したモデルです．グラフィカルモデルを用いてモデル化を行うと，どの様な問題を扱っているかが非常に理解しやすくなります．また，式を展開する上でも非常に役に立ちます．

グラフィカルモデルにも色々な種類があります（有向グラフ，無向グラフ，因子グラフなど）．自己位置推定では基本的に**有向グラフ**を扱います．特に，**有向非循環グラフ**と呼ばれるものを用います．このグラフは別名**ベイジアンネットワーク**とも呼ばれます．



## 表記のルール

グラフィカルモデルでは**未知変数**と**可観測変数**を扱います．未知変数は推定したい変数であり，可観測変数は観測できている変数です．自己位置推定においては，推定したい自己位置が未知変数となり，センサの観測値や地図が可観測変数となります．グラフィカルモデルでは，未知変数を白，可観測変数を灰色のノードで表現します（文献によっては色が逆になっていることもあるので注意してください）．また，矢印は依存関係を表し，*矢印の先の変数が矢印の根元の変数に依存している**ということを意味します．したの図であると，「可観測変数$B$は，未知変数$A$に依存している」ということを意味します．

![hidden_and_observable_variables.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329950/0c67641e-2070-1206-1fac-dc4b2e0cbbfb.jpeg)



# ベイズの定理

この記事[【自己位置推定の基礎】確率の基礎のお話](https://qiita.com/NaokiAkai/items/52591ec258c5ed6eeaa4)でベイズの定理に関する話をしています．ベイズの定理とは，条件付き確率を以下の様に計算できるというものです．

```math
p(A | B) = \frac{p(B | A) p(A)}{p(B)} = \frac{p(B | A) p(A)}{\sum_{A} p(B | A) p(A)}
```

この式に対応するグラフィカルモデルが，上に示したものとなっています．求めたい未知変数が$A$であり，可観測変数$B$が条件となっており，対応していることがわかります．この様な関係が成り立つときには，上式の様に式を変形することができます．

自己位置推定では，センサ観測が自己位置に依存しているということを仮定します．すなわち，センサ観測を可観測変数としてベイズの定理を適用することで，未知変数である自己位置に対する確率分布を求めることができます．



# 全確率の定理

この記事[【自己位置推定の基礎】確率の基礎のお話](https://qiita.com/NaokiAkai/items/52591ec258c5ed6eeaa4)では，全確率の定理にも触れています．全確率の定理とは，確率変数$A$に対する確率を求める際に，確率変数$B$に関する知識を導入することができるものです．

```math
p(A) = \sum_{B} p(A | B) p(B)
```

この式に対応するグラフィカルモデルは以下の様になります．未知変数$A$が未知変数$B$に依存していることを意味しています．

![law_of_total_probability.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329950/e39e9260-f106-f460-e97e-a1b2928a519d.jpeg)

自己位置推定では，自己位置が時系列的に発展していくものとします．すなわち，現時刻の自己位置を求めるにあたり，1時刻前の自己位置の情報が利用できます．すなわち全確率の定理を適用することで，1時刻前の情報を利用した自己位置に対する確率分布を求めることができます．



## 注意点

上の例では，明示的に未知・可観測変数といっていますが，実際はどちらでも大丈夫です．ただ，自己位置推定の定式化にあたり必要となる式の展開に合わせて，あえて明示的に変数を定義しています．



# まとめ

この記事では，ベイズの定理と全確率に対応するグラフィカルモデルの話をしました．次回の記事では，自己位置推定で利用されるグラフィカルモデルを説明し，それを式展開する話をします．
RDCManとの別れ、そして新たなリモートデスクトップとの出会い

# 2021/06/23更新

RDCManが復活しました！

https://forest.watch.impress.co.jp/docs/news/1333313.html

ダウンロードはこちらから可能です。

https://docs.microsoft.com/ja-jp/sysinternals/downloads/rdcman

操作画面は懐かしいあのレイアウトです！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182636/2664736e-257d-d1f4-9027-57e65c8808ed.png)

-----

# この記事の想定対象読者

* システム管理者
    * Windows Client/Serverを複数抱えている人
    * 複数リモートデスクトップ接続をする人

# 記事の背景

Remote Desktop Connection Manager（通称、RDCMan）をご存知でしょうか？
この記事をご覧になられる方の多くはご利用されているかと思います。

Windowsのリモートデスクトップ接続（mstsc.exe）は、宛先が一つの端末であればよいのですが、
それが5台、10台と複数の端末に接続をしなければならないときに活躍していた、
マイクロソフト公式の複数リモートデスクトップ接続アプリケーションです。

![01_01_RDMan.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182636/55824dde-5fc9-34da-1793-9f40920a6083.png)

`自宅内に検証用に起動しているWindows Server 2012R2とWindows Server 2019で試しています`

----

2020年3月のマイクロソフトから発表された内容に個人的に衝撃を受けました

[複数のリモートデスクトップ接続を管理できる「RDCMan」に脆弱性、修正予定はなく公開終了へ](https://forest.watch.impress.co.jp/docs/news/1240782.html)

---

はい、マイクロソフトが公式にRDCManの脆弱性告知とともに、公開終了しました。
（現在アクセスしてもDLできません）

----

# 代わりとなるソフトウェアについて

色々と調べると、以下の２つがマイクロソフト公式から辿れました。

[リモート デスクトップ クライアント](https://docs.microsoft.com/ja-jp/windows-server/remote/remote-desktop-services/clients/remote-desktop-clients)

先に記載しますが、***Windows ストア*** が、
この記事で触れたい複数リモートデスクトップ接続可能なアプリケーションです。

## [Windows デスクトップ](https://docs.microsoft.com/ja-jp/windows-server/remote/remote-desktop-services/clients/windowsdesktop#install-the-client)

> Windows デスクトップ用のリモート デスクトップ クライアントを使用して、
> 別の Windows デバイスからリモートで Windows アプリとデスクトップにアクセスできます。

と書いてありますが、注意書きに以下の記載があります。

> 現在、このクライアントは、***Windows 仮想デスクトップ*** からのリモート アプリと
> デスクトップへのアクセスのみをサポートしています。

![03_01_RemoteDesktop.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182636/4fa8ec81-9876-769e-197f-78113fc37c98.png)

パット見て、なんらデザインだけ刷新されたリモートデスクトップのようにみえます。

![03_02_ConnectMS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182636/eff7a13b-ba51-1e87-e835-6081ad92d6e7.png)

ですが、 `申し込む` というところを押すと、マイクロソフトアカウントのログインが必須となります。

## [Windows ストア](https://www.microsoft.com/ja-jp/p/microsoft-リモート-デスクトップ/9wzdncrfj3ps?activetab=pivot:overviewtab)

見た目は大きく変わらないのですが、右上に `＋追加` が初めから表示されます。

![02_02_RemoteDesktop.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182636/e06023e8-75d1-ca53-f77d-8013b13c1207.png)

設定をすると、複数リモートデスクトップでの接続可能となります。

![02_04_RemoteDesktoMulti.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182636/ac87f336-8b4d-53a4-dd15-d4b73e9ea02f.png)

RDCManと違って、それぞれのセッションごとにウィンドウが作られるのことが、
この新しいアプリケーションの特徴と思います。

----

リモート先の追加は、`＋追加`を押して接続先IPアドレスとログイン情報（credential）を登録すればOKです。

![02_03_RemoteDesktop_Add.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182636/368cc6bd-bffc-bc56-d8ad-0ff349b19767.png)

![02_05_RemoteDesktop.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182636/4605a5d3-a389-e4a8-5ba2-03acc5a4f891.png)

この記事が自分と同じようにRDCManを使っている人の参考になれば幸いです。
opencv_createsamples.exeが終わらない

#opencv_createsamples.exeがいつまでたっても終わらない！！
そんな方はpositiveimagelistの文字エンコードを確認して下さい。
もしUncodeだった場合、utf-8などに変換してみてください。
それで動かなければこの記事は的外れです。

#症状
コマンドプロンプト、またはPowershellでopencv_createsamples.exeを実行するものの
「Create traning samples from images collection ...」で止まってしまう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241416/daa2290a-d758-5645-1401-336300f39394.png)

さらにCPUも結構食ってて一見動いてるのでは？と思ってしまいました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241416/6e630a7a-c50d-7d2e-248c-68cb967ea6b3.png)


#経緯
Windows10でやりたかったのですが、ファイルリストを作るときにPowershellで実行しました
↓こんな感じに

```
get-childitem *.* -include *.jpg |%{Add-Type -assemblyname System.Drawing;$src=[System.Drawing.Image]::FromFile($_.fullname); [string]$_.name + " 1 0 0 " + [string]$src.Width +" " + [string]$src.Height}>poslist.txt
```

画像フルサイズでよければこのコマンドで一発で読ませられちゃうぜ！！
と実行して全然終わらない。

明らかに時間かかりすぎだろ、と思って画像ファイルを減らしても、サイズを小さくしても終わらない・・・！！

試しに1枚の画像からだと実行できたので環境としては問題ない。


``-show``オプション付けてリストを読み込ませると「応答なし」になってしまうのでどうもファイルパス自体読めてなさそう？？
ということでいろいろ試行錯誤・・・。

ふとpositiveimagelistのエンコードを確認するとUnicode・・・！
いやこれじゃね？と思ってutf-8に変換したらすんなり実行できました。


こんなことに時間を結構割いてしまったのは悔しい・・・。
PHPで階乗を計算する関数

備忘録。PHPで階乗を計算するプログラム。

再帰関数を使わずに実装。

```sample.php

echo factorial_of($num);

function factorial_of($num){
    
    $num2 = $num-1;
    
    while($num2>0){
        $num *= $num2;
        
        if($num2>=1){
            $num2--;
        }
    }
    
    return $num;
}

```
再帰関数で実装。


```sample2.php
echo factorial_of($num); 

function factorial_of($num){
    
    if($num>0) {
        return $num *= factorial_of($num-1);
    }
    
    return 1;
}
```
[js]コールバック関数が分からないから調べてみた



##コールバック関数とは

引数に渡す関数のことをコールバック関数という・・・。
文だけだと分かりづらいのでコードで見ていきましょう。




```javascript

function hello(name) {
 console.log(name());//引数に()をつけることで関数を実行する
}

function getname() {
  return 'code mafia';
}

hello(getname);

```



###動作内容
①hello(getname)でhello関数に引数として(getname)を渡す。


②hello関数は渡された(getname)を(name)として受け取る。
function hello<font color="Red">(name)</font>←中身はgetname


③hello関数でconsole.log(name())でgetname関数を実行する。

④getnameの戻り値はcode mafiaなので
console.log(name())
↓
console.log('code mafia')となる

このプログラムでコールバック関数となるのは、<font color="Red">function getname</font>となります。

###なぜ function getnameなのか

最初のコールバック関数の定義を振り返りましょう。
『引数に渡す関数のことをコールバック関数という』


function getname関数はfunction hello関数に引数として渡されていますね!なので、コールバック関数はfunction getnameとなります。
SinatraでTodoアプリ作ってみた

## 概要
環境構築〜MVCの動きが一通り表現できるまでの道のりを解説します。
ruby on Railsを用いて、Webアプリを作成した経験があったので、MVCの動きをどのように表現できるのかを確認する練習として作成しました。
ruby on Railsでアプリケーションを作成したことがある人向けへの説明になります。

##環境構築編
ruby,rails,mysqlがインストールされている前提での説明になります。
mysqlでのテーブル作成に関しての説明は他の記事に譲ります。
今回はDB名：sinatra_practice、テーブル名：commentとしています。

###sinatraのインストール
Sinatraとは、軽量なWebアプリケーションフレームワークです。
gemとして用意されているので、下記のコマンドでインストールします。

``` sinatra.command
gem install sinatra
```

###sinatra_contribのインストール
sinatra_contribとは、コードを変更した際、Webサーバーを再起動せずに変更点を反映してくれるgemです。
このgemは必須ではないですが、開発がとても効率的になるので、インストールすることをおすすめします。

```
gem install sinatra-contrib
```

## 実装編
まずフォルダ構造、完成コードを掲載します。

```フォルダ構造.
.
├── myapp.rb 
├── views
│   ├── index.erb

```

```myapp.rb 
require 'sinatra'
require 'sinatra/reloader'
require 'active_record'

ActiveRecord::Base.establish_connection(
  adapter:  "mysql2",
  host:     "localhost",
  username: "root",
  password: "",
  database: "sinatra_practice",
  socket: "/tmp/mysql.sock"
)

class Comment < ActiveRecord::Base
end
 
get "/" do 
  @comments = Comment.all
  erb :index
end

post "/new" do 
  Comment.create({body: params[:body]})
  redirect '/'
end

post "/delete" do
  puts params
  Comment.find(params[:id]).destroy
  redirect '/'
end
```
```index.erb
<!DOCTYPE html>
<html lang="ja">
<head>
    <mata charset="utf-8">
    <title>ToDo</title>
</head>
<body>
    <h1>ToDoリスト</h1>
    <ul>
        <% @comments.each do |comment| %>
        <li data-id= "<%= comment.id %>">
            <%= comment.body %>
            <form method="post" action="/delete">
              <input type="hidden"  name="id" value="<%= comment.id %>">
              <input type="submit" value="done!">
            </form>
        </li>
        <% end %>
    </ul>
    <form method="post" action="/new">
        <input type= "text" name="body">
        <input type= "submit" value="追加">
    </form>
</body>
</html>
```

### myapp.rbに関して
ruby on Railsを触ったことがある人向けへの解説ですが、普段あまり意識しないことも記載しておきます。

- require
    - ライブラリの読み込み
        - sinatra/reloaderは環境構築でインストールしたinatra-contribの変更を自動反映してくれる
        - active_recordはDBのデータをRubyオブジェクトとして扱えるようにするもの
            - railsのインストールが必要
- ActiveRecord::Base.establish_connection
    - DBへの接続情報を指定

##まとめ
SinatraはMVCを意識せずミニアプリを作成するにはもってこいだと感じました。
コードが動かない、記載について詳しく解説してほしい等あったらご連絡ください
Railsのtext_fieldにCSSをあてる方法

## text_fieldにCSSってどうやってあてるんだっけ？
Railsアプリケーション作成時にフロント部分を作成していた時に

```ruby:example.haml.html
.item__name
  商品名
  .name--input
    = f.text_field :name, placeholder: "40文字まで"
```

のようなhamlを作成していざscssを記述しようとしたときに
この`text_filed`にどうやってCSSをあてるのかが
ふと考えると分からなかったんです。

同じような`number_field`や`submit`などにも使えるやり方なので
是非覚えておいたほうがよいです。

##そもそも`text_field`で作られるHTMLは何なのか？
上の`= f.text_field :name, placeholder: "40文字まで"`で作られるHTMLを
chromeの検証で確認してみると
`<input placeholder="40文字まで" type="text" name="item[name]" id=item_name>`
というものが作成されているのがわかるかと思います。

text_fieldとかはRailsがviewを簡潔に記述するために用意してくれているヘルパーメソッドのため
簡単な記述で実際はこういうHTML文の作成もしてくれています。
この作成されたHTMLにあてるようにCSSを記述すればOKです。

今回はSCSSを使い記述しました。
##CSSをあててみよう
```scss:example.scss
.item__name{
  input[type="text"]{
    width: 100%;
    height: 20px;
    font-size: 14px;
  }
  ::placeholder{
    padding: 5px 5px;
  }
}
```
と指定して記述すると、`text_field`にCSSをあてることができます。
`placholder`はCSSの擬似要素のため上記のような記述をする必要があります。

ヘルバーメソッドを使って記述した場合にどのようなHTML文が作成されているのかを確認すると解決できる部分でしたね。

## 参考先
[rails フォームの大きさをcssで変更する](https://qiita.com/tomoharutt/items/f8402ab886329d9684ba)

[CSS: カスケーディングスタイルシート::placeholder]
(https://developer.mozilla.org/ja/docs/Web/CSS/::placeholder)
Pythonで毎日AtCoder #11

### はじめに
[前回](https://qiita.com/taxfree_python/items/6c712aa34adc9bee310a)
11日目です。

### #11
[問題](https://atcoder.jp/contests/abc041/tasks/abc041_b)

**考えたこと**
Xは最大で$10^{27}$になるので、うまくmodを使って計算しました。

```python
a, b, c = map(int,input().split())
mod = 10**9+7
print(a*b%mod*c%mod)
```
[コード](https://atcoder.jp/contests/abc041/submissions/11020711)

### まとめ
今日は2時間くらい麻雀してたので疲れた。明日のAGCは、Aだけでも解きたい!
[Python]ランダムに発生するXMLを解析する[ElementTree]

#ライブラリインポート
XML解析に必要なライブラリElementTreeをインポートします。
globはフォルダ内のXMLのPathを取得
pandasは配列に格納。pandasからcsvに書き出しとMySQLに保存を実行します。

```
from xml.etree import ElementTree
import glob
import pandas as pd
```

#XML
こんな感じのXMLデータを解析します。
offsetは秒単位の時間が格納されています。
86400秒は24時間

```
-<Day>
 -<EventCollection>
  -<Event>
   <Offset>0</Offset>
   <Value>70</Value>
  </Event>
  -<Event>
   <Offset>86400</Offset>
   <Value>69</Value>
  </Event>
   -<Event>
   <Offset>172800</Offset>
   <Value>73</Value>
  </Event>
<Day>
```

#フォルダからXMLを取得して解析
フォルダ内にダウンロードされたXMLのPathを取得して解析します。

```
xmlfile = glob.glob("C:/Users/user/*") #fileにXMLファイルパスを格納

file = len(xmlfile) #XMLファイル数をカウント

i_file = 0 #XMLファイルを上から順番に指定するための番号_0が一番最初

for i in range(file):
    XMLFILE = xmlfile[i_file]
    i_file += 1
    tree = ElementTree.parse(XMLFILE)  # XMLファイル読み込み
    root = tree.getroot() # XMLの中身を取得

    # listを準備
    Day = []　
    Night = []

    #forを利用して数値を全てlistに格納
    for e in root.findall('.//Day/EventCollection/Event/Value'):
        Day.append(e.text)
    for e in root.findall('.//Night/EventCollection/Event/Value'):
        Night.append(e.text)

    print(Day)
    [70,69,73]
```

#ListをPandasに格納してからcsvに保存

```

#listを1つにまとめる
listData = [Day, Night]

# listDataをDataFrameに変換。.Tは行と列を入れ替え
df = pd.DataFrame(listData).T

# カラム名を追加
df.columns = ['Day', 'Night']

#csvのpathを設定してpandasDataFramをcsvに保存
filename = 'C:/Users/user/csv/AAA.csv'
df.to_csv(filename, index=False)
```
#MySQLにDataFrameを保存
csvで出力したDataFrameをMySQLにも保存します。

ライブラリをインポート

```
from sqlalchemy import create_engine
```

```
url = 'mysql+mysqlconnector://[user]:[pass]@[host]:[port]/sampleDB'
engine = create_engine(url, echo=True)

#df.to_sqlで'sampleDB_table'にdfに格納したデータを保存
df.to_sql('sampleDB_table', engine, index=False, if_exists='append')
```

これを私はFileMakerから実行させていますが、Windowsであればタスクスケジューラなどで定期的に実行させればデータが自動的にデータベースに格納されていき、のちの解析に使えるようになります。
今後は、PHP、javascriptなどを利用してデータの見える化（BIツール）、その次に機械学習（AI）に取り組んでいきたいと考えています。
【REACT】stateを学びましょう！

# 概要

stateを理解し、使って見ましょう！

# state?

REACTでstateは、Component内部で変えることができる値
REACTには、二種類のstateがあります。

- class型Componentが持っているstate
- 関数型Componentで`useState`という関数で使うstate

# class型Component

`create-react-app`や
https://codesandbox.io/?from-app=1
で、projectを作成しましょう


## 簡単な数字カウンター

```react:count.js
import React, { Component } from "react";

class Count extends Component {
  constructor(props) {
    super(props);
    // stateの初期値を設定
    this.state = {
      number: 0
    };
  }

  render() {
    // stateを呼ぶとき使う
    const { number } = this.state;
    return (
      <div>
        <h1>{number}</h1>
        <button
          onClick={() => {
            // setStateを使って、stateに新しいvalueを設定
            this.setState({ number: number + 1 });
          }}
        >
          +1
        </button>
      </div>
    );
  }
}

export default Count;
```

[結果](https://8knes.csb.app/)

# 関数型Component

## Hi & Good bye

```react:Say.js
import React, { useState } from "react";

const say = () => {
  const [message, setMessage] = useState("");
  const onClickEnter = () => setMessage("Hello");
  const onClickLeave = () => setMessage("Good Bye");

  return (
    <div>
      <button onClick={onClickEnter}>Enter</button>
      <button onClick={onClickLeave}>Leave</button>
      <h1>{message}</h1>
    </div>
  );
};

export default say;
```

[結果](https://jgm7z.csb.app/)


## 問題

【Red】、【Blue】ボタンを追加して、ボタンをクリックしたら、
`<h1>{message}</h1>`の messageの色が変わるようにしましょう！

hint 
`style`を使いましょう！

[正解](https://72pyj.csb.app/)
CakePHP4 で Security Salt を生成する

Security Salt を生成 は、Laravel だとコマンドがあるんですが、CakePHP4 だとコマンドが提供されていないようなので、自前で生成します。

# この記事でわかること

- Security Salt の生成方法
- この記事内のソースは以下で公開しています。
    - https://github.com/katsuhiko/cakephp-vue-study


# Security Salt の生成

Docker コンテンを使って Security Salt を生成します。
Docker（Docker Desktop） をインストールしておくと、こんな感じでローカル環境に依存せずにコマンド/シェルが使えるようになるので便利です。おすすめです。

```sh
docker run --rm -it debian:10 sh -c "cat /dev/urandom | LC_CTYPE=C tr -dc '[:alnum:]' | head -c 64; echo ''; sleep 1"
```

` failed to resize tty, using default size ` っというメッセージが表示されることがあるので、最後に sleep を噛ませています。


# でも通常だとわざわざ生成する必要はありません

` ./config/app_local.example.php ` を ` ./config/app_local.php ` へコピーしてから、` composer install ` を実施すると、 ` ./config/app_local.php ` の ` __SALT__ ` が自動で生成された Security Salt へ置換されます。

通常の開発であれば、Security Salt の生成は意識する必要はありません。