OmniAICreator/Qiita-1.07M huggingface dataset:
無限ループが好きだという話


0.まえがき
============
小さいころからなぜか無限ループにはまってしまう事がある。
はまるといっても、自分がいつの間にかその世界にいて抜け出せないわけでなく、
興味を持つという意味。

・円周率を果てしなく覚える
3.14159265358979323846264338327950288419716939937510582097494459・・・
　(けっこう忘れてる)
・ドラクエ5？でマドハンド相手に一人×きせきの剣でAボタン押しっぱなし放置し、いつの間にかレベル99
・同様にメモリ機能を持つコントローラ使用し、無限ループ箇所を見つけレベル99
　確かff6の滝とかだったか？
・マジックザギャザリングでトークン無限大作成(詳細は忘れた)

ずっと同じこと繰り返しのFOR文に興味があるわけではなく、
繰り返した結果に付随した生成物に興味がすごくある。(侘寂？？)

さて普段仕事では効率的やらなんやらでそんな事を考えている余裕もないため、たまに無限ループを求めてドラクエをしてしまう事がたまにあるが、外出できないし違う事でも考えようと思い、無限ループを考えてみた。

1.なんの無限ループをしようか
============
最終的にはループしながら得をする事をしたいんだけど、例えば気軽にスクレイピングとかしてサーバダウンすると犯罪なってしまうし、既に体が無限ループぽいものをすぐにでも欲しがってしまってるので、1Hほど考えてスマホとPC間のカメラ画像無限ループという単純なテーマにした。
鏡と鏡を合わせた中に映る画像は見れないけど、カメラとPC間でループさせれば画像がどんどん劣化していって何になるんだろうという疑問と興味。
ハードソフト絡めた他のテーマについても順次やっていきたいなぁ。

ちなみにこのテーマ最初に思いついたのは、テレビ＜pc＝スマホみたいな製造業の順列においてスマホが撮った画面を鏡のように反射させる事でテレビの一矢報いた感を出したかったけど、結局やりにくかったのでpc-スマホ間にしたという悲しい話。

2.DOE
============
使用環境：
　PC、スマホ、
　アプリ「LetsView」「camera」のみ
DOE風景：
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448643/269098a3-d147-545d-1594-872bbed510a2.jpeg" width=30%>
3.結果動画
============
<https://youtu.be/nvs9YQhidxE>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448643/ab86ab78-f0ee-aeb3-9715-0dfb14e1bcd5.jpeg" width=20%><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448643/f3190298-8d6e-4ba5-a8e3-639fb07a7fca.jpeg" width=20%><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448643/3567aaef-0a5c-a7cf-f946-3c9b85efcd6c.jpeg" width=20%>
###3-1.0:00～1:00　カメラの撮像範囲＞pcに映るスマホ範囲
　　カメラの撮像範囲が広いため、スマホの中のスマホの中のスマホの中の・・・といった感じが繰り返される。
　　行きつく先のスマホの画面が気になる。
###3-2.1:00～2:30　カメラの撮像範囲＝pcに映るスマホ範囲
　　繰り返しの回数が多くなり、画像の劣化と合わさって宇宙のような世界観に陥る
###3-3.2:30～3:06　カメラの撮像範囲＜pcに映るスマホ範囲
　　カメラに映る部分の拡大が劣化を伴い繰り返される。
　　結果、3-2とは違う宇宙にたどりつく
4.続く？
============
　3-1はよく見る鏡合わせで起こる画像であったけど、
　3-2、3-3の中に宇宙を見た！
　ほかに何かおもしろいの取れたら編集しなおします。
　
　全然違う話、アンドロイドの「音声文字変換」アプリを話しながら使うと
　自分が発した言葉が文字として出ることを認識待ちしてしまい
　自分の脳が制御回路的負のループに陥りましたー。
　ゆっくり話す練習にはなるかもですが、喋る事を目的とした場合は
　話題をフィードバックしてほしいので、こういうアプリ作ったら流行るかも？
rails s が実行できなくて困ってます。力を貸してください

<img width="875" alt="スクリーンショット 2020-05-02 16.55.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630569/cf79a709-2fce-ff00-9ca1-7bdf9ff26d3e.png">
gemやbundleをアップデートしてもrails s　を実行したときにこのようなエラーが出ます。
解決方法を教えて下さい。お願いします。
clispでlispを簡単に動かしてみよう！

# lisp(リスプ)とは
情報系の学科でやらされるcarとcdr(カーとクダー）な言語である！ 
cd...dr(クダ...ダー)!

## clisp(シーリスプ)とは
common lispさんのことである

# 早速簡単に使ってみよう
## clispインストール
```bash
$ brew install clisp
```

## viエディタか何かでhello.lispを書いてみよう
```hello.lisp
(setq a "hello")
(setq b "world")
(print (concatenate 'string a b))
```

## 実行結果
```bash
$ clisp hello.lisp

"helloworld" 

```

----
よかったよかった
P5.js 日本語リファレンス(fill)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の fill関数を説明します。

## fill()

### 説明文

図形の塗りつぶしに使用する色を設定します。たとえば fill(204, 102 , 0) を実行すると その後に描画されたすべての図形はオレンジ色で塗りつぶされます。この色は現在の colorMode() に応じて RGB または HSB で指定されます。 デフォルトのカラーモードは RGB で各値の範囲は 0〜255 です。デフォルトのアルファ範囲も 0〜255 です。

単一の文字列引数が指定されている場合 RGB、RGBA および16進数の CSS カラー文字列とすべての名前付きカラー文字列がサポートされます。このカラー文字列の場合、2番目の引数としてのアルファ値はサポートされていません。RGBA 形式を使用する必要があります。

p5.Color オブジェクトを提供して背景色を設定することもできます。

### 構文

fill(v1, v2, v3, [alpha])

fill(value)

fill(gray, [alpha])

fill(values)

fill(color)

### パラメタ

- v1  
Number：現在の色の範囲を基準にした赤または色相の値

- v2  
Number：現在の色の範囲を基準にした緑または彩度の値

- v3  
Number：現在の色の範囲を基準にした青または明るさの値

- alpha  
Number：アルファ値(オプション)

- value  
String：カラー文字列

- gray  
Number：グレー値

-  values  
Number[ ]：色の赤、緑、青、およびアルファ値を含む配列

- color  
p5.Color：塗りつぶしの色

### 例

```javascript
function draw() {
    fill(51); // 濃いグレー値
    rect(20, 20, 60, 60);

    fill(255, 180, 100); // R、G、Bの整数値
    rect(100, 20, 60, 60); // 肌色で描画

    colorMode(HSB);  // カラーモードで HSB を設定
    fill(100, 204, 100); // H,S,Bの整数値
    rect(180, 20, 60, 60); // 緑色で描画

    fill('red'); // 名前付き SVG/CSS カラー文字列
    rect(260, 20, 60, 60); // 赤色で描画

    fill('#fae'); //  3桁の16進数で RGB を設定
    rect(20, 100, 60, 60); // 桃色で描画

    fill('#AA22FF'); // 6桁の16進数で RGB を設定
    rect(100, 100, 60, 60); // 濃い紫色で描画

    fill('rgb( 250,250,0 )'); // R、G、B の整数値を設定
    rect(180, 100, 60, 60); // 黄色で描画

    fill('rgba( 0,255,220,0.25 )'); // R、G、B、A の整数値を設定
    rect(260, 100, 60, 60); // エメラルド色で描画

    fill('rgb( 100%, 0%, 100% )'); // //パーセント RGB で設定
    rect(20, 180, 60, 60); // 紫色で描画

    fill('rgba( 100%, 100%, 0%, 0.1 )'); // //パーセント RGBA で設定
    rect(100, 180, 60, 60);  // 黄色で描画

    colorMode(RGB);
    fill(color(0, 0, 255)); // p5 Colorオブジェクトで設定
    rect(180, 180, 60, 60);  // 青色で描画
}
```

### 実行結果

![fill.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43467/9b773a95-7a39-fc63-b407-76fced02293f.jpeg)


### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
Install Wordpress

# Install MySQL 5.7

```bash
#!/usr/bin/env bash

sudo yum localinstall https://dev.mysql.com/get/mysql57-community-release-el7-8.noarch.rpm -y

#sudo yum install mysql-community-client -y
sudo yum install mysql-community-server -y

# https://docs.cloudera.com/documentation/enterprise/latest/topics/cm_ig_mysql.html
sudo yum install mysql-connector-java* -y
cd ~/
mkdir tools/
cd tools/
wget https://dev.mysql.com/get/Downloads/Connector-J/mysql-connector-java-5.1.46.tar.gz
tar zxvf mysql-connector-java-5.1.46.tar.gz
sudo mkdir -p /usr/share/java/
cd mysql-connector-java-5.1.46
sudo cp mysql-connector-java-5.1.46-bin.jar /usr/share/java/mysql-connector-java.jar


sudo systemctl start mysqld.service
# Get MySQL Pwd
sudo grep 'A temporary password is generated for root@localhost' /var/log/mysqld.log |tail -1
echo "Old Password:"
sudo grep 'A temporary password is generated for root@localhost' /var/log/mysqld.log |tail -1 | awk '{print $NF}'
echo "New Password:"
echo "haahahahahahahaha"
# Reset MySQL Pwd
sudo /usr/bin/mysql_secure_installation

mysql -uroot -phaahahahahahahaha --force < ~/git/ops/hwx-field-cloud/cdpdc/ranger.script.sql

# mysql -uroot -phaahahahahahahaha

# Reset mysql root password
# http://www.ihp.sinica.edu.tw/dashboard/docs/reset-mysql-password.html




# JDBC driver cannot be found. Unable to find the JDBC database jar on host
# sudo yum -y install mysql-connector-java
```

# Install Apache2

```bash
sudo yum install httpd -y
sudo systemctl enable httpd
sudo systemctl start httpd

# Open port for お名前.com
# https://go-journey.club/archives/5103

sudo firewall-cmd --add-service=http --permanent
sudo firewall-cmd --add-service=https --permanent
systemctl restart firewalld
firewall-cmd --list-all
```

http://httpd.apache.org/docs/2.4/install.html

## php

```bash
sudo yum install epel-release yum-utils -y
sudo yum install http://rpms.remirepo.net/enterprise/remi-release-7.rpm -y
sudo yum-config-manager --enable remi-php73
sudo yum install php php-common php-opcache php-mcrypt php-cli php-gd php-curl php-mysqlnd -y

```

# Download Wordpress

https://wordpress.org/

```bash
curl -O https://wordpress.org/latest.zip
```
DjangoのHTMLテンプレート

# はじめに

ここでは、djangoのHTMLテンプレートファイルの作成方法について解説します。
モデルとしては、[前の記事](https://qiita.com/yukiya285/items/327d440910d7a8307562)に書いている`SampleModel`を利用するものとします。


# HTMLファイルにおける変数、関数の埋め込み

HTMLファイル内で、`{{ 変数名 }}`とすると、`views.py`から渡された変数をHTMLファイル内に埋め込むことができます。
また、`{% 関数名 引数1 引数2 ... %}`とすることで、関数を用いて表示内容を制御することもできます。


## レコード一覧の表示

クラスベースビューの場合、表示するレコード一覧が`モデル名_list`としてテンプレートに渡されます。
このレコード一覧を`{% for %}`を用いて一つずつ取り出して、表示します。
関数ベースビューの場合も同様に、モデルのレコード一覧を`context`としてHTMLファイルに渡すようにすると良いでしょう。

```html:app/samplemodel_list.html
{% for sample in samplemodel_list %}
    <h1>{{ sample.char_sample }}</h1>
    <p>{{ sample.text_sample }}</p>
{% endfor %}
```


## 個々のレコードの表示

クラスベースビューの場合、個々のレコードは`モデル名`としてテンプレートに渡されます。

```html:app/samplemodel_detail.html
<h1>{{ samplemodel.char_sample }}</h1>
<p>{{ samplemodel.text_sample }}</p>
```


# まとめ

ここでは、djangoのHTMLテンプレート作成の基本について解説しました。
次回は、テンプレートの継承やカスタムタグの作成について取り上げる予定です。
Windows 10でsshしようとするとBad owner or permissions on .../.ssh/config

表記のエラーが出た時の解決策メモ。

結論からいうと **configファイルを削除した** ら接続できた…。

参考サイトを参考にconfigファイルのオーナーや権限を設定してみたり、一度削除して作成し直したりしたけど変わらず。深追いはしていない…。

# 参考

Bad owner or permissions on C:\\Users\\USER/.ssh/config · Issue #1763 · cmderdev/cmder https://github.com/cmderdev/cmder/issues/1763

[備忘録]win10 ver1903以降でssh接続しようとすると"Bad owner or permissions on ..."と表示されあったまってた話。 - Qiita https://qiita.com/HaKo/items/958809b21e7a9834b630
Cython で const オブジェクトを渡すときにどうしても怒られる。

## 概要
C++の関数をCython でラップしようとしてたとき、
C++側の関数は引数に入るオブジェクトをconstとしていました。

その際、そこにcyhtonで呼んだ関数からの出力（C++の型のものが返ってきています）を渡そうとすると、

```
cannot convert "<some_custom_object>" to "const <some_custom_object>"
```

のようなエラーになり、どうやってこれを解決すればいいか迷っていました。
もしどなたか解決策を知っていらっしゃったらだれかアドバイスいただけると助かります。


## 状況説明

概略的には

#### C++ 側

```test.cpp
test_1(const<some_custom_object> &x){
    do something;
}
```

となっていて、シンプルに入ってくる引数がconstとして渡されています。
この関数は外部ライブラリから取ってきており、これをとりあえず変更することはしません（できません）。


#### Cython 側

```test.pyx
cdef my_function():
    <some_custom_object> を何かの関数から返してもらい、その結果を上のtest_1に入れたい。
    return test_1(<some_custom_object>

```

これにより、

```
cannot convert "<some_custom_object>" to "const <some_custom_object>"
```
のようなエラーとなりました。どうやってこの条件下で渡せばいいのかわからなかったので、
応急処置として、自作のC++関数をつくり、test_1をラップしました。
つまり、

```test.cpp

test_1_copy(<some_custom_object> x){
    return test_1(x);
}

```

とすることで、内部ではもともと渡したかったtest_1にconstとして渡すのですが、ラップした関数にはそのような制約をつけないようにしました。
全然問題を解決しているわけではないのですが、問題を見えなくしました、、、



とりおき備忘録として。



おわり。
P5.js 日本語リファレンス(colorMode)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の colorMode関数を説明します。

## colorMode()

### 説明文

`colorMode()` は p5.js がカラーデータを解釈する方法を変更します。デフォルトでは `fill()`、`stroke()`、`background()`、`color()` のパラメータは R​​GB カラーモデルを使用して 0〜255 の値で指定します。これは `colorMode(RGB, 255)` を設定することと同じです。 `colorMode(HSB)` を設定すると代わりにHSBカラーモデルを使用できます。デフォルトでは、これは `colorMode(HSB, 360, 100, 100, 1)` です。 HSL を使用することもできます。

注：既存のカラーデータは、それらが作成されたカラーモードを記憶しているため描画に影響を与えることなく好きなようにモードを変更できます。

### 構文

`colorMode(mode, [max])`

`colorMode(mode, max1, max2, max3, [maxA])`

### パラメタ

- mode  
定数：赤、緑、青、色相、彩度、明るさ(または明度)に対応するRGB、HSB、HSL のいづれか

- max
Number：すべての値の範囲(オプション)

- max1  
Number：現在のカラーモードに応じて、赤または色相の範囲

- max2  
Number：現在のカラーモードに応じて、緑または彩度の範囲

- max3  
Number：現在のカラーモードに応じて、青または明るさ/明度の範囲

- maxA  
Number：アルファの範囲(オプション )

### 例

```javascript
function draw(){
  noStroke();
  colorMode(HSB, 100); // カラーモードをHSBに設定

  for(let i = 0; i < 100; i++){
    for(let j = 0; j < 100; j++){
      stroke(i, j, 100);
      point(i, j);  // 100 x 100 の正方形に点を描画する
    }
  }

  noFill() ;
  colorMode(RGB, 255, 255, 255, 1); // カラーモードをRGBに設定
  strokeWeight(4);
  stroke(255, 0, 10, 0.3);
  ellipse(40, 40, 50, 50);
  ellipse(50, 50, 40, 40);
}
```

### 実行結果

![colorMode.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43467/054de4b9-c4b3-b8e2-36eb-a1bdb682f3fc.jpeg)


### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
Cythonでパッケージを作るときにフォルダ間インポートで悩んだときはこれをみて。

## 概要
Cythonで```setup.py```などを書いてパッケージを作ろうとしていたとき、
基本的にフォルダ構成はカオスになる気がしてます。
なぜかというとCythonでC++をラップするとき、どうしてもC++側の実装をラップする箇所は、C++側のヘッダーのコードをCython側にも書き写さなければいけないからです。

これによってファイル数が増加し、フォルダを色々分けないといけなくなります。
このとき、```__init__.py``` の意味とか、なぜ置くか、みたいなところを全くわかっていないと（私のこと）、詰みます。


##  どうするのが一番よさそうか
ソースコードが多いので、色々フォルダに分けるところまではいいのですが、
```pyx```ファイルから```pxd```ファイルを```cimport``` するとき、
およびフォルダをまたいで```pxd```ファイルを```cimport```するとき、
ファイルがみつかりません、みたいなエラーが出ることがあります。

そのようなエラーで時間を無駄にしないために、
このようにするのがいいのかなと考えます。

- C++とCythonのコードはフォルダで分ける
- Cythonのコードが入ったフォルダがサブディレクトリを持つとき、それぞれに```__init__.py```を置く。
- Cythonのコードに書く```cimport```は全てプロジェクトの親ディレクトリ(setup.pyがあるところ)から見たパスで書く。


## フォルダ構成

例えばこのようなフォルダ構成にします。

```bash

setup.py

cpp_code/*

cython_code/
        | -- __init__.py
      folder_a
        | -- __init__.py
        | -- test_a.pyx
        | -- test_a.pxd
      folder_b
        | -- __init__.py
        | --  test_b.pyx
        | --  test_b.pxd
        
```

このようなとき、各フォルダに```__init__.py```をおき、
例えば```test_b.pxd```が```test_a.pxd```をインポートしたいときは、

```test_b.pxd

from cython_code.folder_a.test_a cimport *
```

みたいな感じで統一して書くと、おそらくあまりインポートエラーに悩まされずに済むと思います。



備忘録的な感じでまとめました。


おわり。
Cythonが嫌いになる寸前で解決したエラー備忘録

## 概要
ハンドリングの難しいCythonですが、
エラーに悩まされてCythonを嫌いになる前にここに答えがあればいいなと思い、
自分が色々悩まされて時間を投下してしまったエラーたちを備忘録的にまとめていきます。
随時追加していきます。


### Python のlist を受け取り、ポインタをC++に引き渡したいのだが、、

ここを見てください、まずは```vector```を```cdef```で定義し、その中に```list```としてもらったものを格納します。そのあとにポインタを取って引き渡します。
https://stackoverflow.com/questions/59535760/cython-cannot-convert-python-object-to-const-float

### Cython compiled C extension: ImportError: dynamic module does not define init function がビルド成功した後importで出る。

あなたのコードはきちんとビルドできてるので、心配しないでください、
おそらく```setup.py```の中の```Extension```の所の名前と、メインの```pyx```ファイルの名前が異なるっているだけです、ここを見てください。
https://stackoverflow.com/questions/8024805/cython-compiled-c-extension-importerror-dynamic-module-does-not-define-init-fu


### module 'cython' has no attribute 'declare' が出る

```bash
python setup.py build_ext --inplace
```

などをすると、

```
module 'cython' has no attribute 'declare'
```

が出て悩んでいたが、とてもしょうもないミスだった。


理由は、setup.py をもちいてパッケージにするフォルダ名が```cython```にしていたから。
これを他の名前に変更するとこのエラーは出なくなった。
P5.js 日本語リファレンス(clear)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の clear関数を説明します。

## clear()

### 説明文

バッファ内のピクセルをクリアします。この関数はキャンバスのみをクリアします。 createVideo() や createDiv() などの createXXX() 関数によって作成されたオブジェクトはクリアされません。メインのグラフィックスコンテキストとは異なり createGraphics() で作成された追加のグラフィックス領域のピクセルは全体的または部分的に透明にすることができます。この関数はすべてをクリアしてすべてのピクセルを 100% 透明にします。

### 構文

clear()

### 例

```javascript
//マウスを押すと画面がクリアされます。
function setup(){
  createCanvas(300, 300) ;
}

function draw(){
  ellipse(mouseX, mouseY, 20, 20) ;
}

function mousePressed() {
  clear();
}
```

### 実行結果
https://editor.p5js.org/bit0101/sketches/W3E2-FNfz


### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
CSS 基礎・基本 margin padding! #6

今日は、二つ目の投稿で少し疲れ気味ですが、前回のに書いたように階層を少し意識して見やすく書けるように努力していきたいと思います。私の勉強ノートを活用してもらえると嬉しいです。

#CSS 基礎・基本 margin padding
ページレイアウトの一つの機能であるmargin,paddingについて理解し扱えるよようにしていきます。

##ボックスモデル
要素のサイズに大きくかかわってくるボックスモデルについて

###border
`margin`と`padding`の境界をわかりやすくするために、枠線を指定。
`.box { border: 3px solid #777; }`

###padding
.boxの内側の余白を設定！
これにより、効果範囲をさらにチェック！
`.box { padding: 20px; }`

###margin
.boxの外側の間隔を設定！
これも、同様にやってみると効果範囲を実感できます。
`.box { margin: 20px; } `

###height
.boxの高さを設定！
`.box { height: 150px; }`

###width
.boxの幅を設定！
`.box { width: 150px; }`

すべての要素はボックスと呼ばれる四角形の領域を持っている。
各ボックスは、content area,padding,border,marginの領域がある。これらを、ボックスモデルを呼びます。

###ボックスモデルの計算ルール
ボックスモデルの計算ルールの変更には`box-sizing`を利用する。
`box-sizing`は、要素の高さと幅を計算するルールを決めれる。
最初は`content-box`になっている。

- content-box:heightとwidthで指定した領域内には、paddingと`border`と`margin`は含まれない。
- border-box:heightとwidthで指定した領域内に、`padding`と`border`も含まれる。

##paddingの指定方法！
さまざまなpaddingの指定方法について

###上下左右同時に
.box内側に上下左右同時に余白を設定！
`.box { padding: 20px;}`

###上下と左右分けて
.boxの内側に上下と左右に分けて空白を設置！
`.box { padding: 20px 50px;}`
20pxが上下、50pxが左右

###上と左右と下を分けて
.boxの内側に上と左右と下を分けて空白を設置！
`.box { padding: 20px 50px 100px;}`
上に20px 左右に50px 下に100px

###上下左右を別々に
.boxの内側に上下左右を分けて空白を設置！
`.box { padding: 20px 50px 100px 150px;}`
上に20px 右に50px 下に100px 左に150px

###paddingのプロパティ
paddingは、４つのルールからできておりそれは、
`padding-top`,`padding-right`,`padding-bottom`,`padding-left`である。
これらを簡略化して書いたものが先ほどまでの例である。

##mariginの指定方法！
こちらにも、同様の様々な指定方法があります。どれも同じなので違うところだけ書きます。

###marginのプロパティ
marginも、４つのルールからできています。
`margin-top`,`margin-right`,`margin-bottom`,`margin-left`です。

###marginのセンタリング
.boxの外側の間隔をセンタリング配置
`.box{ margin:20px auto;}`
autoは要素の間隔を適切な値に置き換えます。

##marginの相殺
隣り合う要素同士で起こる相殺について
`margin`の相殺とは、隣り合う要素同士で`margin-top`と`margin-bottom`の値が比較され、大きいほうが適用される。

###入れ子でのmargin
入れ子になった要素同士でも`margin`の相殺は起きる。
子要素の`margin`が`親より大きい場合は、子要素は親要素の外側にはみ出します。

###marginの相殺を制御1
marginの相殺は、隣り合う要素の`border`があるときは上下の境界となるため相殺は発生しなくなる。
また、`padding`や`height`や`min-height`の場合も相殺は発生しない。

###marginの相殺を制御2
テキストなどのようなインラインコンテンツがある場合も、相殺が発生しなくなる。

## ネガティブmargin
ネガティブmarginの設定

###ネガティブmarginを設定！ネガティブmarginを設定するには、`margin`の値をマイナスにする。
`margin-top: -50px;`
ネガティブマージンを指定された要素は、値が指定された方向に進む。

###左右にネガティブmargin
左右のネガティブmarginでは`width`を設定してない要素の左右に要素が広がる

widthと併用した場合、`width`の値が優先される。
ネガティブmarginは`left`が優先されるため左に引っ張られる。


今日はここで終わります。
一応階層を作ってみましたがまだまだ分かりにくいところが多いかもしれません。次書くときに、またきれいにできればと思います。
リストを他のリストの順番に合わせてソートしたい

# なにをしたいか
- 複数の関連するリストがあるときに、一つのリストのソート順に合わせて他のリストもソートしたい
- sortedのlambdaを使ったkeyの指定が、よく辞書型のデータの例で説明されるが、辞書型に収められていない関連するデータも多いのでメモ。

# 人の名前を年齢順にソートしたい
### 同名の人はいない場合
下のような２つの配列があるとき、agesのソート順に合わせてnamesを入れ替えたい

```python
names = ["Alice", "Bob", "Charlie"]
ages = [10, 30, 20]
```

うまくいくが、

```python
people = {name: age for name, age in zip(names, ages)}
people = sorted(people.items(), key=lambda x: x[1])
names_sorted = [name for name, _ in people]  # ['Alice', 'Charlie', 'Bob']
```

この方法だと、同じ名前の人がいた場合にうまくいかない。

### 同名の人がいる場合

```python
names = ["Alice", "Bob", "Charlie", "Charlie"]
ages = [10, 30, 20, 5]
```

dictionaryにすると、二人目のCharlieで一人目が上書きされてしまう

```python
people = {name: age for name, age in zip(names, ages)}
people = sorted(people.items(), key=lambda x: x[1])
names_sorted = [name for name, _ in people]  # ['Alice', 'Charlie', 'Bob']
```

dictionaryにしないでやってみるとうまくいく。

```python
people = [[name, age] for name, age in zip(names, ages)]
people = sorted(people, key=lambda x: x[1])
names_sorted = [name for name, _ in people]  # ['Charlie', 'Alice', 'Charlie', 'Bob']
```
P5.js 日本語リファレンス(background)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の background関数を説明します。

## background()

### 説明文

background() は p5.js キャンバスの背景に使用される色を設定します。デフォルトの背景は透明です。この関数は通常 draw() 内で使用され各フレームの先頭で表示ウィンドウをクリアしますが、setup() 内で使用してアニメーションの最初のフレームに背景を設定したり、背景を1回だけ設定する必要がある場合に使用したりできます。

色は現在の colorMode() に応じて RGB 、HSB、HSL で指定します。デフォルトは RGB で各値の範囲は0〜255です。デフォルトのアルファ範囲も0〜255です。

単一の文字列引数が指定されている場合 RGB、RGBA および16進数の CSS カラー文字列とすべての名前付きカラー文字列がサポートされます。このカラー文字列の場合、2番目の引数としてのアルファ値はサポートされていません。RGBA 形式を使用する必要があります。

p5.Color オブジェクトを使用して背景色を設定することもできます。

背景画像を設定するために p5.Image を使用することもできます。

### 構文

background(color)

background(colorstring, [a])

background(gray, [a])

background(v1, v2, v3, [a])

background(values)

background(image, [a])

### パラメタ

- color  
p5.Color：color() によって作成された値

- colorstring  
String：色文字列。可能な形式には RGB、RGBA、パーセントRGB、パーセントRGBA、3桁の16進数、6桁の16進数が含まれます

- a  
Number：現在の色の範囲を基準にした背景の不透明度(デフォルトは0〜255)(オプション)

- gray  
Number：白と黒の間の値を指定します

- v1  
Number：赤または色相値(現在のカラーモードに依存)

- v2  
Number：緑または彩度の値(現在のカラーモードに依存)

- v3  
Number：青または明るさの値(現在のカラーモードに依存)

- values  
Number[ ]：色の赤、緑、青、アルファ成分を含む配列

- image  
p5.Image：loadImage() またはcreateImage() で作成され、背景として設定する画像(スケッチウィンドウと同じサイズである必要があります)

### 例

```javascript
background(51); //グレースケール整数値

background(255, 204, 0); // R、G、Bの整数値

colorMode(HSB); // カラーモードで HSB を設定
background(255, 204, 100);

background('red'); // 名前付き SVG/CSS カラー文字列

colorMode(RGB); // カラーモードで RGB を設定
background('#fae'); // 3桁の16進数で RGB を設定

background('#222222'); // 6桁の16進数で RGB を設定

background('rgb(0, 255, 0)'); // R、G、B の整数値を設定

background('rgba(0, 255, 0, 0.25)'); // R、G、B、A の整数値を設定

background('rgb(100％, 0％, 10％)'); //パーセント RGB で設定

background('rgba(100％, 0％, 100％, 0.5)'); //パーセント RGBA で設定

background(color(0, 0, 255)); // p5 Colorオブジェクトで設定
```


### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
Vuexで複雑にネストしたデータを管理する

## はじめに

お仕事で複雑にネストしたデータを、複数ページに渡って管理するアプリケーションを作成する必要がありました。
はじめは[こちら](https://tech.unifa-e.com/entry/2019/05/29/095443)の記事を参考に、Vuexなしで実装していたのですが、どうやらネストしたデータはバインドできないみたい(?)なので、今更ながらVuexに入門しました。ほとんど調べて出てきた内容を参考にすんなりできたのですが、少し詰まったところがあったのでそこらへんを中心にまとめようと思います。
ソースコードは以下のGitHubリポジトリにおいてあります。(Laravelはまったく使ってません。)
https://github.com/shimech/laravel-vue-demo

## 環境

- macOS Catalina 10.15.4
- PHP 7.4.5
- Laravel 7.9.2
- Vue 2.6.11
- Vuex 3.3.0

## ディレクトリ構成

```
resources
└── js
    ├── bootstrap.js
    ├── components
    │   └── vuex
    │       ├── Check.vue
    │       └── Input.vue
    └── vuex
        ├── app.js
        ├── router.js
        └── store.js
```

## Vuexの仕組み

### 1. `Vuex.Store` のインスタンスに、管理したいデータや、そのデータを編集する関数などを定義する。

```store.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

const stateTemplate = {
    name: "",
    emailList: [""]
};

const deepCopyObj = obj => JSON.parse(JSON.stringify(obj));

const store = new Vuex.Store({
    state: [deepCopyObj(stateTemplate)],
    mutations: {
        setName(state, { index, name }) {
            state[index].name = name;
        },

        (省略)

    }
});

export default store;
```
※オブジェクトをディープコピーしないと本体を編集してしまうので注意

[Vuex.Store API Reference](https://vuex.vuejs.org/api/#vuex-store)

### 2. 1で作成したインスタンスを `Vue` のインスタンスのプロパティに定義する。

```app.js
require("../bootstrap");

import Vue from "vue";

import store from "./store";
import router from "./router";

window.Vue = Vue;

const app = new Vue({
    el: "#app",
    store: store,
    router: router
});
```

### 3. 2のVueインスタンスに定義されたVue Componentから、 

```js
this.$store.state
````

で `store` にアクセスできる。
今回は、 `vue-router` を経由してComponentを定義しています。

```router.js
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);

import Input from "../components/vuex/Input.vue";
import Check from "../components/vuex/Check.vue";

const routes = [
    {
        path: "/vuex",
        component: Input
    },
    {
        path: "/vuex/check",
        component: Check
    }
];

const router = new VueRouter({
    mode: "history",
    routes: routes,
    scrollBehavior() {
        return { x: 0, y: 0 };
    }
});

export default router;
```

## 詰まったところ

### `Vuex.Store` の `mutations` の関数に複数の引数を渡したい！

A. 第二引数をオブジェクトにするだけ

定義側

```store.js
setEmail(state, { indexState, indexEmail, email }) {
    state[indexState].emailList[indexEmail] = email;
}
```

呼び出し側

```Input.vue
updateEmail(indexState, indexEmail, email) {
    this.$store.commit("setEmail", { indexState, indexEmail, email });
}
```

### `v-for` の中でうまくその要素だけ操作するには？

A. `v-for="(item, index) in list"` で `index` を渡す

もっといいやり方があれば教えてください。

## 参考記事

- [Vuex で Action, Mutation に第3引数を渡したくなったら](https://mseeeen.msen.jp/deal-with-multiple-arguments-with-action-or-mutation-in-vuex/)
Ubuntu/Arch 系（というか非RH系）でのルーター設定のメモ

# DNSとDHCP
## DNSはsystemd-resolvedを使う
NetworkManager がネットワークを管理するデーモンになっている（基本的な設定ファイルは/etc/NetworkManager/NetworkManager.conf）。デフォルトではDNSとして systemd-resolved が使われるのだが、これが DNS 用に53番ポートをバインドしてしまっている。NetworkManagerが利用するDNSサービスをdnsmasqに設定してもいいのだが（それが本来だが）、ここでは敢えてそうしない。

## DHCPはdnsmasqを使う
DHCP server としては dnsmasq を利用するのが軽量かつ簡単なのだが、上記の通り systemd-resolved が53番ポートを専有しているので、設定ファイル /etc/dnsmasq.conf で`port=0`としてDNS機能を切って、もっぱらDHCP daemon として動作させる。

## DNSとDHCPのポートを開放する
ローカル側からDNSとDHCPを利用する必要があるので ufw かなんかで

DNS 53
DHCP 67/udp

を

```
ufw allow from 192.168.0.0/16 to any port 53
```
とかして LAN 側に開放する。必要なら（もちろん必要なので）

SSH 22

も開放する。これらのデーモンを

```
# systemctl enable --now dnsmasq
```

などとしてブート時に起動するよう設定する。


## dnsmasqの設定
/etc/dnsmasq.confで：

```
dhcp-range=interface:eno1,192.168.1.100,192.168.1.200
dhcp-host=12:34:56:78:90:ab,192.168.1.99
dhcp-option=option:dns-server,1.1.1.1,8.8.8.8
```
のようにする。

# IP Forwarding
デフォルトではLinuxカーネルがIP forwardingを無効にしているので、カーネルパラメータ(/proc/sys/net/ipv4/ip_forward)を設定する。


```
# sysctl -w net.ipv4.ip_forward=1
```

# ファイアウォール
ufw を使っているならば、/etc/ufw/before.rulesに転送設定を書く。

私の環境では NICが２つ、WAN側（enx...）とLAN側(eno1)がある。openvpn-client@ovpn設定ファイルが起動されていると、OpenVPNはtun0というネットワークデバイスを作り、ルーティングを設定して外部へ出ていこうとするパケットがデフォルトでtun0からNordVPNのゲートウェイを通って出ていくようになる。`enx+`という表記は enx* な総てのデバイスにマッチする。

```
*nat
-F
-A POSTROUTING -o enx+ -j MASQUERADE
-A POSTROUTING -o tun0 -j MASQUERADE
COMMIT
```

# OpenVPN クライアントの設定
/etc/openvpn/client にVPNサーバーの接続情報を書き込んであるovpnファイルを置く。この際に拡張子は.confにすることに注意。たとえば nordvpn.conf のようにする。

```
# systemctl enable --now openvpn-client@nordvpn
```

のようにして有効にする。@以下の部分は設定ファイル名に対応する。これで tun0 が作られ、デフォルトゲートウェイが NordVPN のゲートウェイになる。

起動時に認証情報を手入力はできないので、設定ファイルの
auth-user-pass という行を auth-user-pass xxxxx などとし、認証情報を

```
(your-id@xxxx.org)
(your-password)
```
として順に書いた2行ファイルをxxxxxという名前で置いておく（この id と pw は NordVPN のマイページからそれ用のものを入手できる）。中身を見られると困ったことになるので、所有権とパーミッションに注意する（きちんと設定していないと動作はもちろんするがopenvpnのログで怒られる）。

# 経路指定
ある一定の宛先（たとえば133.0.0.0/8）のパケットは tun0 ではなく直接（VPNを通らず）外に出ていくようにしたい。この場合はゲートウェイ（たとえば 133.XXX.YYY.254 がVPNを使わない場合の本来のゲートウェイであるとして）を指定すればいい。

```
ip rule add table 200 priority 200
ip route add 133.0.0.0/8 via 133.XXX.YYY.254 table 200
```

ある一定のマシンからのパケットをVPNを通さずに送り出すなら、そのマシンにDHCPで192.168.XXX.0/24などを割り当てて

```
ip rule add from 192.168.XXX.0/24 table 100
ip route add all via 133.168.XXX.254 table 100
```
などとする。ルーティングテーブルの番号を普通に名前で指定したいなら`/etc/iproute2/rt_tables`に書いて登録しておく。

だが、これらの設定は non-persistent なので、openvpn の conf ファイルに次のように追記し：

```nordvpn.conf
script-security 2
up /etc/openvpn/up.sh
```

`up.sh` として上の`ip`コマンドなどをスクリプトにしておけば、openvpn 起動時に実行される（スクリプトの最後は`exit 0` などにしておかないと openvpn を再起動した際などに既に存在するテーブルを二重に登録しようとしてコケたというような無害なエラーでも再起動に失敗するので注意）。
#Ruby ( Rails ) ActiveInteraction receives keyword args or hash ?


ActiveInteraction seems various type args

```rb
require "active_interaction"

class ServiceClass < ActiveInteraction::Base
  string :x
  string :y

  def execute
    p x
    p y
  end
end

# OK
# Keyword args
ServiceClass.run!(x: "X1", y: "Y1")

# OK
# Convert Hash to keyword args
ServiceClass.run!(**{ x: "X2", y: "Y2" })

# OK
# Hash args
# No Warning happens
ServiceClass.run!({ x: "X3", y: "Y3" })

# OK
# Not Symbol string key
ServiceClass.run!({ "x" => "X4", "y" => "Y4" })

# OK
# Not symbol string key
# Convert Hash to keyword args
ServiceClass.run!(**{ "x" => "X5", "y" => "Y5" })


class Foo
  def initialize(x: , y:)
    @x = x
    @y = y
  end

  def run!
    p @x
    p @y
  end
end

# OK
# Keyword args
Foo.new(x: "XX1", y: "YY1").run!

# OK
# Convert Hash to keyword args
Foo.new(**{ x: "XX2", y: "YY2" }).run!

# OK
# Hash args
# warning: Using the last argument as keyword parameters is deprecated; maybe ** should be added to the call
Foo.new({ x: "XX3", y: "YY3" }).run!

# NG
# Not Symbol string key
# ArgumentError
Foo.new({ "x" => "XX4", "y" => "YY4" }).run!

# OK
# Not symbol string key
# ArgumentError
Foo.new(**{ "x" => "XX5", "y" => "YY5" }).run!

```

# Original by Github issue

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











<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
FireFox で service worker から見たブラウザの URL が正しくならない現象

# 現象

webpush を実装して FireFox で動作確認をしていたところ、以下の現象に遭遇した。

1. ページにアクセスする
2. pushState で URL を変更する
3. webpush を受信して client.url を見ると 1 の URL が参照される

Chrome では 2 の URL になってくれるのに。。。
今実装しているプロダクトでは以下の要件があるので URL を見て判定をしないといけないので困った。

* 通知された URL をアクティブなページで表示していた場合は通知を表示しない
* 通知をクリックした時に通知された URL が非アクティブなタブで開いていた場合は、それをアクティブにし、そうでない場合はタブを開く

# 環境

Mac 10.15 (Catalina)
FireFox 75.0

# 解決方法

client.url を見るのはやめた。

postMessage で URL を取得する方針に変更。
service worker からアプリに URL リクエストを postMessage して、
アプリ側ではそれを受けて location.href を postMessage で返信する。
実装は雰囲気こんな感じ。

sw.js

```javascript
let resolveUrl = null;

const fetchUrl = client => {
  return Promise.race([
    new Promise(function (resolve) {
      resolveUrl = resolve;
      client.postMessage({ type: 'sw:requestUrl' });
    }),
    new Promise(function (resolve) {
      setTimeout(function () {
        resolve();
      }, 5000);
    })
  ]);
}

self.addEventListener('push', event => {
  if (!self.Notification || self.Notification.permission !== 'granted') {
    return;
  }

  const url = event.data.json().url;

  const notify = async () => {
    const clientList = await self.clients.matchAll({
      type: 'window'
    });
    
    for (let i = 0; i < clientList.length; i++) {
      const client = clientList[i]
      const clientUrl = await fetchUrl(client);
      if (
        client.visibilityState === 'visible'
        && clientUrl === url
      ) {
        return;
      }
    }
    self.registration.showNotification('通知', {});
  };
  event.waitUntil(notify());
});

self.onmessage = function(e) {
  if (e.data.type !== 'url') return;
  resolveUrl && resolveUrl(e.data.url);
};
```

アプリ側


```typescript
const listener = (e: MessageEvent) => {
  if (e.origin !== location.origin || typeof e.data !== 'object') return;
  switch (e.data.type) {
    case 'sw:requestUrl':
      navigator.serviceWorker.controller?.postMessage({
        type: 'url',
        url: `${location.href}`
      });
      return;
    default:
      return;
  }
};
navigator.serviceWorker.addEventListener('message', listener);
```

これでなんとか解決。
[CloudFormation]WebACLAssociationのArnが指定できない

# 問題
AWS::WAFv2::WebACLAssociationでWebACLとALBの紐付けをしようとするが、スタック作成時に「WebACLがArnで指定できてない」とFailedする。

参照値を見ると、!Ref MyWebACLでは「my-webacl」のようにIDが出力されている。（!Ref MyALBではちゃんとArnが出てるのに...）

```yaml:before.yml
  WebACLAssociation:
    Type: AWS::WAFv2::WebACLAssociation
    Properties:
      WebACLArn: !Ref MyWebACL
      ResourceArn: !Ref MyALB
```

# 解決策
ALBとWebACLではデフォルトの戻り値が異なる。

ALBではArn [(ドキュメントはこちら)](https://docs.aws.amazon.com/ja_jp/AWSCloudFormation/latest/UserGuide/aws-resource-elasticloadbalancingv2-loadbalancer.html#aws-resource-elasticloadbalancingv2-loadbalancer-return-values)
WebACLではphysical ID [(ドキュメントはこちら)](https://docs.aws.amazon.com/ja_jp/AWSCloudFormation/latest/UserGuide/aws-resource-wafv2-webacl.html#aws-resource-wafv2-webacl-return-values)

ドキュメントに従い、Fn::GetAttでArnを使えばOK。

```yaml:after.yml
  WebACLAssociation:
    Type: AWS::WAFv2::WebACLAssociation
    Properties:
      WebACLArn:
        Fn::GetAtt: MyWebACL.Arn
      ResourceArn: !Ref MyALB
```

# さいごに
ちゃんとドキュメントを読むって大事。つい面倒くさがって適当にググっちゃうけど。
pip install

zshにして、pipコマンドが使えなくなって、
pip3でinstallしても使えなかった。

python3.7 -m pip install oauth2client 

でいけた。
インストールの場所が違う。

shuji@taniguchinoMacBook-Pro resale % pip3 show selenium
Name: selenium
Version: 3.141.0
Summary: Python bindings for Selenium
Home-page: https://github.com/SeleniumHQ/selenium/
Author: UNKNOWN
Author-email: UNKNOWN
License: Apache 2.0
Location: /usr/local/lib/python3.7/site-packages
Requires: urllib3
Required-by: 

shuji@taniguchinoMacBook-Pro resale % python3.7 -m pip show selenium
Name: selenium
Version: 3.141.0
Summary: Python bindings for Selenium
Home-page: https://github.com/SeleniumHQ/selenium/
Author: UNKNOWN
Author-email: UNKNOWN
License: Apache 2.0
Location: /Library/Frameworks/Python.framework/Versions/3.7/lib/python3.7/site-packages
Requires: urllib3
Required-by:
macOS Catalina10.15.4 + Processing3.5.4 で viodeライブラリが使えなかった件

つい先日 Processing を知って、線書いたり雪降らせて遊んでいたのですが、Videoライブラリ(カメラ)試そうとしたらクラッシュして、思いっきりハマったので記事残します。

# 環境
* macOS Catalina 10.15.4
* Processing 3.5.4
* videoライブラリ 1.0.1(多分)
* 試したコード
	* [公式HPのサンプル](https://www.processing.org/reference/libraries/video/Capture.html)

# 先に結論
**Processing 3.5.3 入れれば使えます**
その後 3.5.4を実行もすることもできます👏

# Processingとは
wiki参照
> 電子アートとビジュアルデザインのためのプログラミング言語であり、統合開発環境(GUI)>である。アーティストによるコンテンツ制作作業のために、詳細な設定を行う関数を排除している。 視覚的なフィードバックが即座に得られるため、初心者がプログラミングを学習するのに適しており、電子スケッチブックの基盤としても利用できる。Java を単純化し、グラフィック機能に特化した言語といえる。

つまり、↓ライブハウスとかで流れてるようなエフェクトを簡単に作れるIDE(統合開発環境)と把握。
(ちなみに映像は大好きなサカナクション主催のクラブイベントNF)
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/oRuHiCx9MII/0.jpg)](http://www.youtube.com/watch?v=oRuHiCx9MII&t=76)
https://youtu.be/oRuHiCx9MII?t=76


# 何が起きたか？
実行したら以下のログはいてクラッシュします。
`Could not run the sketch (Target VM failed to initialize)
For more information, read revisions.txt and Help → Troubleshooting.
`

調べてみると、CatalinaでProcessingのvideoライブラリのcaptureが使えない問題があったとの事。

* [Mac OS CatalinaでProcessingのVideoキャプチャが動かなくなった時の対処法](https://note.com/soohei/n/n87bca61ba561)
* [Processing video library 使えない問題について(macOS Catalina)](https://qiita.com/kikpond15/items/9cb21d9091034bd3ae71)

ただ、やってみたが変わらず同じエラーが出る…

# 原因
Processingがカメラにアクセスするのを、OSが許可してなかったから（多分）

twitterで検索してたらたまたま発見した、この方の呟きで分かりました🙏
そういえばカメラのアクセス聞かれなかったな…
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Catalina にしてから Processing で Camera が効かず。この方法を試しつつ、 3.5.3 に落としたらようやく動いた。3.5.4 から始めると、カメラへのアクセスを聞かれなかったのは気のせい？<a href="https://t.co/DfIjJ1UYux">https://t.co/DfIjJ1UYux</a></p>&mdash; OYA takashi (@tscp) <a href="https://twitter.com/tscp/status/1247023955765911552?ref_src=twsrc%5Etfw">April 6, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

当たり前だけど、以下の場所にもProcessingの項目自体がない。
設定 > セキュリティとプライバシー > プライバシー > カメラ


# 対応
twitterにも書かれてあったとおり、Processing3.5.3入れて試しました。
するとカメラへのアクセス確認のダイアログが出てきて、何の問題もなく疲弊した顔が映し出されました٩( 'ω' )و
セキュリティとプライバシーのカメラにもProcessingがちゃんとチェックされてました。


この状態でProcessing3.5.4で試すと、問題なく動きます。
ViewModelについて

# ViewModelとは

詳細はhttps://developer.android.com/topic/libraries/architecture/viewmodel

ざっくり説明すると、Activityのライフサイクルには以下の問題がある。

* `onSaveInstanceState()`を利用したデータの保存は、データ量が多い場合は適していない。
* 非同期処理中に画面が再生成された場合、非同期処理を中止して再実行するなどのリソースが無駄になる。

UIでは、データの表示、ユーザからの要求の対応、OSとのやり取り（権限の取得）を行うようする。
そして、DBへのアクセスやネットワークからのデータの取得は、UIから切り離して実装するほうが良い。

それが容易に実装できるのが、`ViewModel`クラス

# 実装

#### ViewModel本体の実装

`ViewModel`クラスを継承したクラスを実装する。
このクラスには、保持しておきたいデータを定義する。

```
/**
 * ViewModelクラスを継承したクラス
 */
class MainViewModel : ViewModel() {
    /**
     * 保持するデータ
     */
    val name: MutableLiveData<String> by lazy {
        // nameを初期化
        MutableLiveData<String>().also {
            it.value = loadName()
        }
    }

    private fun loadName(): String {
        return "initName"
    }
}
```

#### ViewModelの取得

ActivityやFragmentでViewModelクラスを継承したクラスを取得する。

```
viewModel = ViewModelProviders.of(this).get(MainViewModel::class.java)
```

#### ViewModelにアクセスする

ViewModelが保持している値を取得・変更する。

```
viewModel.name.value = "new value"
```

# 最後に

今回はものすごいシンプルな実装でこれだけだと、あまり効果的な使用方法がぴんと来ないが、
ViewModelを継承したクラスのデータ初期化時の処理を記述することでUIとロジックの分離ができる。

DBへのアクセスやネットワークからのデータ受信はまた今度。
自宅でFTPサーバーの立ち上げ

色々あって自宅でFTPサーバーをVirtualBOxで立ち上げました。
実機マシンのOSはWindows10です。

1. VirtualBoxインストール
2. Ubuntuイメージファイルのインストール
3. VirtualBoxでネットワーク設定の変更
5. vsftpdインストール
6. vstpd設定変更
7. 再起動
8. 接続確認

## 1. VirtualBoxインストール

[VirtualBoxダウンロードページ](https://www.virtualbox.org/wiki/Downloads)からVirtualBoxをダウンロード、インストールします。

## 2. Ubuntuイメージファイルをインストール
[Ubuntuの仮想ハードディスクイメージファイルダウンロードページ](https://www.ubuntulinux.jp/download/ja-remix-vhd)からUbuntuのイメージファイルをダウンロード、インストールしてUbuntuをVirtualBox上で立ち上げます。

## 3. VirtualBoxでネットワーク設定の変更
1. VirtualBox Managerで立ち上げたUbuntuを選択
2. 設定→ネットワークを選択
3. 割り当てをブリッジアダプターに選択。
ブリッジアダプターを選択すると192.168.0.XのIPアドレスがUbuntuに割り当てられる。

## 4. vsftpdインストール
Ubuntuを起動し、端末に下記コマンドを入力

```
sudo apt-get install vsftpd 
```

## 5. vstpd設定変更

エディタにはvimを使用

```
sudo apt-get install vim
sudo vim /etc/vsftpd.conf
```
下記を変更

```
anonymous enable=NO
write_enable=YES
chroot_local_user=YES
chroot_ocal_enable=YES
chroot_list_file=/etc/vsftpd.chroot_list
pasv_enable=YES
```
ftpをするユーザーを登録

```
sudo vim /etc/vsftpd.chroot_list
```

## 6. 再起動

```
sudo reboot
```
## 7. 接続確認
Windows10から下記を入力
もしくはffftpのようなソフトを使うのもアリ。

```
ftp 192.168.0.x(UbuntuのIPアドレス)
```

参考
https://qiita.com/feifo/items/0fde474005589afcff68
http://park12.wakwak.com/~eslab/pcmemo/linux/vsftpd/vsftpd6.html
https://qiita.com/morih90/items/56aec95f25c0158848b0
CDIの勉強（その１）

## CDIの勉強(その１)

CDIについての実践的なサンプルは、以下の記事が参考になります。
https://blogs.oracle.com/wlc/weblogic-server-12cjava-ee-68-cdi1

## 実際にやってみた

### はじめてのCDI
実際に実行したときのウェブブラウザの状態がこれです。
![pic006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292074/a7d909a3-3657-8d63-6f90-89023e1b87b3.png)

わかったことは、

- コンテナ（アプリケーションサーバー）が、HelloEnglish (今回の場合、hello)のインスタンスを生成してくれる。
- コンテナがインスタンスを生成するので、interface を宣言する必要がある。

### スコープの指定

実際に実行したときのウェブブラウザの状態がこれです。
![pic007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292074/1dc9e7f1-1b9f-6d70-9012-564a599d7e2c.png)

デフォルトのスコープと呼ばれる@Dependent の場合、Servletのライフサイクルと同じになりました。

Beanクラスに、@RequestScoped にした場合の実行例は次のようになりました。
HttpRequest毎に、Beanが消滅するので、何度やっても呼び出し回数は、1 であることは納得いきました。
![pic008.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292074/ba26040b-b0fc-db42-d28b-6d60bbd3afcb.png)

セッションスコープの場合、ブラウザ毎に状態を持っていることの確認もできました。
キャプチャは、同じになってしまうので省略。

### おまけ
おまけにて、Bean のライフライクルについての説明があった。

次回の記事は[こちら](https://qiita.com/yasu-suge/items/8d09b40f4431604bb216) になります。
PHP データベース　MySQL (PDO)　（正確がわからない）

メモ
-

データベースを接続して、データをアップロードする．
cmd：

```bash
cd /Applications/MAMP/Library/bin/
./mysql -u root -proot
```


コード：
-
すでにデータベースとテーブルを作成してから、データをアップロードするだけ

```php
<!DOCTYPE html>

<head>
    <title>Count Fat</title>
    <h1> Count Fat</h1>
</head>
<hr />
<body>

<?php
    $id = $gender = $height = $weight = $bmi = "";

    function text_input($data){
        $data = trim($data);
        $data = stripslashes($data);
        $data = htmlspecialchars($data);
        return $data;
    }
    function getSimpleValue($post_name, &$value){
        if(!empty($_POST[$post_name])){
            $value = text_input($_POST[$post_name]);
        }
        else{
            $value = "Null!";
        }
    }
    getSimpleValue("ID", $id);
    getSimpleValue("Height", $height);
    getSimpleValue("Weight", $weight);
    getSimpleValue("Gender", $gender);

?>

<form action = "<?php echo htmlspecialchars($_SERVER["PHP_SELF"])?>" method = "POST">
ID: <input type = "text" name = "ID"><br>
Height: <input type = "text" name = "Height">CM<br>
Weight: <input type = "text" name = "Weight">KG<br>
Gender: 
Female<input type = "radio" name = "Gender" value = "Female">
Male<input type = "radio" name = "Gender" value = "Male"><br>
<input type = "submit" value = "Submit"><br>
</form>
<hr />
<?php

    $bmif = function($w, $h){
        $h /= 100;
        return $w / ($h * $h);
    }; 
    $server = "localhost";
    $user = "root";
    $pw = "root";
    $dbname = "myDBPDO";
    $bmi = $bmif($weight, $height);
    

    try {
        $conn = new PDO("mysql:host = $server;dbname=$dbname", $user, $pw);
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

        
        $gender = "\"".$gender."\"";

        $sql =<<<EOL
        INSERT INTO Diet
            (id, gender, height, weight, bmi)
        VALUES 
            ($id, $gender, $height, $weight, $bmi)
        EOL;
        $conn->exec($sql);
        echo "</ hr>". "Your data uploaded.";
    }
    catch(PDOException $e){
        echo $sql . "<br>" . $e->getMessage();
    }
    $conn = null;
    echo "ID:" . $id . "<br>";
    echo "Height:" . $height . "<br>";
    echo "Weight:" . $weight . "<br>";
    echo "Gender:" . $gender . "<br>";
    echo "BMI" . $bmi . "<br>";

?>

</body>

</html>

```
（備忘録）AWSアカウント作成＆初期設定

# 1. はじめに
2020年5月2日に[ヤマムギ](https://yamamugi.connpass.com/)様主催にて開催された[ヤマムギ vol.7 AWSアカウント作成 & 最初の設定ハンズオン](https://yamamugi.connpass.com/event/174792/)でのAWSアカウント作成について、自分への備忘録としてまとめてみました。ご参考になれば幸いです。

# 2. 学んだ内容

- AWSアカウントの作成
- ルートユーザーのMFA設定
- パスワードポリシーの設定
- IAMグループの作成
- IAMユーザーによる請求情報の有効化
- IAMユーザーの作成
- 請求アラームの作成

# 3. 学習サイト

- [ヤマムギ vol.7 AWSアカウント作成 & 最初の設定ハンズオン 手順](https://www.yamamanx.com/yamamugi-7-handson/)

# 4. 参考サイト

- [Multi-factor Authentication](https://aws.amazon.com/jp/iam/features/mfa/?nc1=h_ls)
- [Google Authenticator](https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2)
- [セルフペースラボ（一部、無料のトレーニングあり、アカウント登録必要）](https://aws.amazon.com/jp/training/self-paced-labs/)
- [AWSハンズオン資料](https://aws.amazon.com/jp/aws-jp-introduction/aws-jp-webinar-hands-on/?trk=aws_blog)
- [AWS無料利用枠](https://aws.amazon.com/jp/free/?all-free-tier.sort-by=item.additionalFields.SortRank&all-free-tier.sort-order=asc)
- [日本語住所を英語表示変換サイト](http://judress.tsukuenoue.com/)
- [JAWS-UG](https://jaws-ug.jp/)

# 5. ハンズオンで得た豆知識

- 仮想MFAデバイス（多要素認証）は、はじめての方なら[Google Authenticator](https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2)がおすすめ。
- AWSアカウント作成時の住所登録は、英語表記でおこなうこと。
- 請求情報はバージニア北部リージョンからしか参照できないらしい。
- リージョン毎に各サービス料金が異なる。（北米がコスト安のイメージ、ただし西部は割高）
- バージニア北部(us-east-1)リージョンは、特殊なリージョンであり、グローバルサービスやリージョンのないサービスの場合は、バージニア北部リージョンを利用する必要があるケースがある。
- アラームは10個まで無料。（請求情報アラートくらいは登録しておくとよい。）
- タグを適切につけておくと、何かと便利である。
- t2、t3の数字部分はバージョンを表す数字である。
- t3aはもっと安いです。(CPU選ばないならオススメです。）
- t2でないと無料枠適用とならないケースもあるらしい。

# 6. おわりに
AWS学習の参考になれば幸いです。
ハンズオン開催してくださいました[ヤマムギ](https://yamamugi.connpass.com/)様、感謝いたします。

2020/05/02 NISHIZONO Takahiro
Cognito+API Gateway+LambdaでログインAPIを作りたいんだー！

[前回](https://qiita.com/seobomi/items/d2ab34bf2d3c4dcc98d5)の続きで、Cognitoを使ったユーザ認証を行う。

#やりたいこと
APIでログイン
- ログイン名 と パスワードをリクエストボディに指定しAPIをコールしアクセストークンを取得する

#参考
[LambdaでCognito認証(ユーザー認証)](https://qiita.com/minmax/items/12e65cd51d85f419faa5)

#やってみよう
###Lambda用IAMロール
前回同様に、Lambdaの基本的なポリシーに加えて、「AmazonCognitoPowerUser」をアタッチする。

###ログイン用のLambda関数を作成
前回と異なっていた点ですが、引数に渡すUSERNAME・PASSWORDは大文字で記載しないとエラーになりました。

```index.js
'use strict';

const AWS = require('aws-sdk');
const cognito = new AWS.CognitoIdentityServiceProvider();

/**
 * SignIn
 */
exports.handler = async (event, context) => {
  const response = {};
  let loginName;
  let password;
  console.log(event);
  
  // Validation
  if (!(event.body) || !('loginName' in JSON.parse(event.body)) || !('password' in JSON.parse(event.body))) {
    response["statusCode"] = 400;
    return response;
    
  } else {
    let reqestBody = JSON.parse(event.body);
    
    loginName = reqestBody["loginName"];
    password = reqestBody["password"];
  }

  // SignIn parameters
  const params = {
    AuthFlow: 'USER_PASSWORD_AUTH',
    ClientId: process.env['APP_CLIENT_ID'],
    AuthParameters: {
        USERNAME : loginName, 
        PASSWORD: password
    }
  };
  
  response["headers"] = {"Access-Control-Allow-Origin" : "*", "Content-Type" : "application/json"};

  // SignIn
  try {
      const result = await cognito.initiateAuth(params).promise();
      console.log('User sign in success!!!', JSON.stringify(result, null, 4));
      
      response["statusCode"] = 200;
      response["body"] = JSON.stringify(result['AuthenticationResult']);
      return response;
  }
  catch(err) {
      console.log('User sign in failed...' + err);
      
      if ((err.code == 'NotAuthorizedException') || (err.code == 'UserNotConfirmedException')) {
          response["statusCode"] = 400;
      } else {
          response["statusCode"] = 500;
      }
      
      return response;
  }
};
```

###API Gateway リソース・メソッドの追加
前回同様、「Lambdaプロキシの統合」にチェックを入れ、作成したLambda関数を選択する。

API Gatewayからのテスト実行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613712/00c32040-5957-b356-9cf5-54ee8cbab8fa.png)

無事にアクセストークンが取得できたので、目的達成！！！

#感想
レスポンスの有効期限(expired)が3600なのでん？と思ったら、アクセストークン・IDトークンの有効期限は1時間固定のよう。
変更できないのか??　調べておきます。
アプリクライアントの設定で指定したトークンの有効期限はリフレッシュトークンの有効期限のことである。

#今後の宿題
 - ユーザ情報を取得する
devise

この記事は初学者が記載しております。

##　deviseの使い方を詳しく書く

gemfile

```
gem 'devise' 
```
ターミナルにて

```
bundle install
```


```
rails g devise:install
```

####作成されるfile

config/initializers/devise.rb
config/locales/devise.en.yml

rails g devise コマンドをターミナルにて

```
rails g devise user
```
####作成されるfile

app/models/user.rb
db/migrate/2014**********_devise_create_users.rb
test/fixtures/users.yml
test/models/user_test.rb

config/routes.rbに以下の様な記述が自動的に追記されます。

```
Rails.application.routes.draw do
  devise_for :users
```

##devise_forとは
ルーティングを一気に生成してくれるヘルパーメソッドです。
この記述によりログインや新規登録が使える様になります。

また、current_userやuser_signed_in?などのヘルパーメソッドも利用できるようになります。

ターミナルにて

```
 rake db:migrate
```
rake routes

#rake routes
この記事は、rake routesの理解を深める為の記事になります。
また、初学者による記事の為間違い等ある可能性がありますが、ご指摘頂けると喜びます。

まず、rake routesとは、resourcesメソッドを使用した場合など、ルーティングという各アクションを呼び出す為のパスワードの一覧を表示させる為に
使うコマンドに当たります。

※resourcesってなに？って方は別記事読んでみましょう♩

#※使い方
mac使用ターミナルにて、パスワード一覧を表示したいデータに作業ディレクトリを合わせ　「rake routes」と記載するだけです。
なにも出なかった場合、スペルミスかroutes.rbに定義していないかです。

#※一覧表
私は、この表の意味が全くわからなかった。
なので、この記事を書いております。
<img width="1099" alt="スクリーンショット 2019-09-27 2.34.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480998/becf6269-347a-58b2-ed7a-cf8c10e2bdd7.png">

では、解説に入ります。
まず、見て頂きたいのは一番上にある四つの項目

①Prefix(プレフィックス)


②Verb(ヴァーブ)
  get    =サイトを閲覧する時につかう
  post   =保存する
  delete =削除する
  patch  =更新する

③URI　Pattern
ここがパスワードを表示している所です。
詳しくは④で説明なので先に④読んでね

/products/:product_id/reviews(.:format)  


④Controller＃Action
⬆️のパスが使われた際どこに向かうかを表しております。

２列目の
reviews#create　の場合
reviews（コントローラー）のcreate（アクション）に向かうために必要なパスを③が表示しております。

<img width="788" alt="Rake routes.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480998/9c143f62-1d37-ca22-d9f5-e4e25eb22d69.png">
AWS　紹介

この記事は初学者がAWS意味わかんねってなったので各種サービスをわかりやすく紹介していきます。

順不同です。

##Amazon Route53

AWSの提供するフルマネージド型のDNSサービスです。

ドメインとIPアドレスをつなぐ役割です。

123.45.67.89(IPアドレス）

http://www.abcd.com(abcd.comがドメイン名)

ドメイン名で検索すればIPアドレスの部分を表示する
それが、DNSです。

要するに好きなドメイン名にできるよってことです。

##RDS

AWSのリレーショナル型のデータベースです。

一言で言うとDBです。

MysqlやOracle経由で使えます。


##EC2

Amazonが提供している仮想サーバー構築サービスです。

IPアドレスを発効してくれます。

使い方は難しい気がします。


##S3

実は？EC2と一緒です。仮想サーバー

イメージ的にですが、静的Webサイト（HP等）はS3のみで可能ですが
動的Webサイト（アプリ等）はEC2&S3みたいな感じで使うっぽいでです。


##VPS

セキュリティー機能


##ALB

Webからのアクセスを分散するために必要なサービスが「ALB」です。

##ACM

Webサイトの常時SSL化
「○」と「〇」は違う文字です。

# 丸印「○」と漢数字のゼロ「〇」は違う文字だが、区別しにくいフォントが多い。
「○」と「〇」は違う文字だけど、どちらも「まる」で変換できちゃいます。
資料でマトリクスを作るときなど混用してしまわないように注意。

**Windowsのフォント例**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407847/6ae65cb1-cebe-fa5e-53ac-3c30dfd2e70a.png)


# 対策：キー入力で区別する
「まる」で変換しようとするから「○」と「〇」を混用してしまう。
だったらキー入力を変えれば間違えないよね。ってことで

漢数字のゼロ「〇」は、ずばり「ぜろ」で入力する。

丸印「○」は「まる」以外で変換できないので、単語登録で適当な読みを登録しておく。
たとえば「おｋ」で登録しておけば o＋k＋変換 と流れるように入力できる。


# (おまけ)「○」と「〇」の詳細

|  | ○ (丸印) | 〇 (漢数字) |
|:-:|:-:|:-:|
| **よみ** | まる | まる、ぜろ、れい |
| **JIS** | 0x217B | 0x213B |
| **Shift-JIS** | 0x819B | 0x815A |
| **UNICODE<br/>(文字名)** | U+25CB<br/>(WHITE CIRCLE) | U+3007<br/>(IDEOGRAPHIC NUMBER ZERO) |
| **UTF-8** | 0xE2 0x97 0x8B | 0xE3 0x80 0x87 |
| **UTF-16** | 0x25CB | 0x3007 |
| **UTF-32** | 0x000025CB | 0x00003007 |
pythonのjanomeを簡単に使ってみよう

# pythonのjanomeライブラリとは
`辞書内包の形態素解析器`で日本語を分解してくれる！

## janome公式ドキュメント
https://mocobeta.github.io/janome/

# 早速簡単に使ってみよう
## 環境
```bash
$ python3 -V
Python 3.7.3
```
## 仮想環境構築
```bash
$ mkdir janome-sample    
$ cd janome-sample 
$ python3 -m venv venv
$ source ./venv/bin/activate
```
## wordcloudインストール
```bash
$ pip install janome
```

## janomeを実行
```python3

$ python3
Python 3.7.3 (default, Mar  6 2020, 22:34:30) 
[Clang 11.0.3 (clang-1103.0.32.29)] on darwin
Type "help", "copyright", "credits" or "license" for more information.

>>> from janome.tokenizer import Tokenizer
>>> t = Tokenizer()
>>> for token in t.tokenize(u'曲が終るとゴーシュはもうみんなの方などは見もせずちょうどその猫のようにすばやくセロをもっ て楽屋へ遁げ込みました'):
...   print(token)
... 
曲	名詞,一般,*,*,*,*,曲,キョク,キョク
が	助詞,格助詞,一般,*,*,*,が,ガ,ガ
終る	動詞,自立,*,*,五段・ラ行,基本形,終る,オワル,オワル
と	助詞,接続助詞,*,*,*,*,と,ト,ト
ゴーシュ	名詞,一般,*,*,*,*,ゴーシュ,*,*
は	助詞,係助詞,*,*,*,*,は,ハ,ワ
もう	副詞,一般,*,*,*,*,もう,モウ,モー
みんな	名詞,代名詞,一般,*,*,*,みんな,ミンナ,ミンナ
の	助詞,連体化,*,*,*,*,の,ノ,ノ
方	名詞,非自立,一般,*,*,*,方,ホウ,ホー
など	助詞,副助詞,*,*,*,*,など,ナド,ナド
は	助詞,係助詞,*,*,*,*,は,ハ,ワ
見	動詞,自立,*,*,一段,連用形,見る,ミ,ミ
も	助詞,係助詞,*,*,*,*,も,モ,モ
せ	動詞,自立,*,*,サ変・スル,未然ヌ接続,する,セ,セ
ず	助動詞,*,*,*,特殊・ヌ,連用ニ接続,ぬ,ズ,ズ
ちょうど	副詞,一般,*,*,*,*,ちょうど,チョウド,チョード
その	連体詞,*,*,*,*,*,その,ソノ,ソノ
猫	名詞,一般,*,*,*,*,猫,ネコ,ネコ
の	助詞,連体化,*,*,*,*,の,ノ,ノ
よう	名詞,非自立,助動詞語幹,*,*,*,よう,ヨウ,ヨー
に	助詞,副詞化,*,*,*,*,に,ニ,ニ
すばやく	形容詞,自立,*,*,形容詞・アウオ段,連用テ接続,すばやい,スバヤク,スバヤク
セロ	名詞,一般,*,*,*,*,セロ,セロ,セロ
を	助詞,格助詞,一般,*,*,*,を,ヲ,ヲ
もっ	動詞,自立,*,*,五段・タ行,連用タ接続,もつ,モッ,モッ
て	助詞,接続助詞,*,*,*,*,て,テ,テ
楽屋	名詞,一般,*,*,*,*,楽屋,ガクヤ,ガクヤ
へ	助詞,格助詞,一般,*,*,*,へ,ヘ,エ
遁	名詞,一般,*,*,*,*,遁,*,*
げ	名詞,接尾,一般,*,*,*,げ,ゲ,ゲ
込み	動詞,自立,*,*,五段・マ行,連用形,込む,コミ,コミ
まし	助動詞,*,*,*,特殊・マス,連用形,ます,マシ,マシ
た	助動詞,*,*,*,特殊・タ,基本形,た,タ,タ
>>> 
```

----
よかったよかった
Pythonからコマンドを実行

# コード
```py
import subprocess
import sys


def exec_cmd(cmd):
    # cmd文字列の前後にスペースが入っていたら削除 -> スペースで分割しlist化
    cmd_split = cmd.strip().split()
    # stdoutの設定で標準出力を取得
    cp = subprocess.run(cmd_split, stdout=subprocess.PIPE)
    # cp = subprocess.check_output(cmd_split)
    if cp.returncode != 0:
        print(f'{cmd_split[0]} faild.', file=sys.stderr)
        sys.exit(1)
    # 標準出力があれば返す
    if cp.stdout is not None:
        return cp.stdout
```

# 実行

コマンドを文字列でそのまま渡す

```py
cmd = 'touch file.py'
exec_cmd(cmd)
```

リストの場合はスペース区切りでjoin()

```py
files = ['file1.py', 'file2.py', 'file3.py', 'file4.py', 'file5.py']
files_sep_space = ' '.join(files)
cmd = f'touch {files_sep_space}'
exec_cmd(cmd)
```