OmniAICreator/Qiita-1.07M huggingface dataset:
STM32L010とACM1602K(キャラクター液晶)とMCP9701で温度を表示(VSCのcubeide)


x MCP9701-E/TO 販売コード 103199

x 原因は、わからないが液晶がちらつく場合は、ウェートを調整してね!!


x cubeideは、初心者ころしである。
x MXは、動ないと思っていた　初心者にトラブルの自己解決は、不可能？
x VSCでnecleo-l010を選択
x 動けば正義、細かい事を気にするな
x STM32L010F4P6との違い、ピン数、内部温度センサー、コンパレータ
x いつも、動くと思うなよ(バクや頻繁なアップデートの為)
x 改造 PB3->PB1 , PA15 -> PA3
x ADCの値がじゃっかん低めに出る　原因不明　補正した
x ADCの値がじゃっかん低めに出る 全部つくり直した　4℃から5℃低いが納得
x 74hc164を使用

目的
ADCのテスト

LCD_ACM160K_9701_010_2内をいろいろ適当にコピー


https://os.mbed.com/users/caa45040/code/f303_h_p1/



主なプログラム(後は、めんどいので省略、各自、自習の事)


```c++


int main(void)
{
  /* USER CODE BEGIN 1 */

  /* USER CODE END 1 */

  /* MCU Configuration--------------------------------------------------------*/

  /* Reset of all peripherals, Initializes the Flash interface and the Systick. */
  HAL_Init();

  /* USER CODE BEGIN Init */

  /* USER CODE END Init */

  /* Configure the system clock */
  SystemClock_Config();

  /* USER CODE BEGIN SysInit */

  /* USER CODE END SysInit */

  /* Initialize all configured peripherals */
  MX_GPIO_Init();
  MX_ADC_Init();
  MX_USART2_UART_Init();
  /* USER CODE BEGIN 2 */


    char data_read[8]; //バッファー
    int  tempval;      //温度


    //GPIOの初期化
    DW(en,GPIO_PIN_RESET);     //ビットが0 
    DW(swdclk,GPIO_PIN_RESET); //ビットが0 

    //液晶の初期化
    for(int ii=0;ii<8;ii++){ 
        seg1( lcd_int[ii] , 0);HAL_Delay(2);
    }//for

    //画面クリア
    seg1(   0x01  , 0  ); 
    HAL_Delay(1000);

    seg1( 0x80+0x00 , 0  ); //1ライン目にカーソルを移動
    ns_printf("START");HAL_Delay(1500); //debug

    //画面クリア
    seg1(   0x01  , 0  ); 
    HAL_Delay(5);

    int a;



  /* USER CODE END 2 */

  /* Infinite loop */
  /* USER CODE BEGIN WHILE */
  while (1)
  {
    /* USER CODE END WHILE */


        seg1( 0x80+0x00 , 0  ); //1ライン目にカーソルを移動

        //温度センサーの初期化
        //set address 0

        //温度の読み込み
        // Read temperature register
        a=4096;
        HAL_ADC_Start(&hadc);
        if( HAL_ADC_PollForConversion(&hadc, 1000) == HAL_OK )
        {
            a = HAL_ADC_GetValue(&hadc);
        }
        HAL_ADC_Stop(&hadc);

        //温度の保存
        // Calculate temperature value in Celcius

        tempval =((a*1692)>>12)-205;
        //tempval = 1234; //debug

        //表示用の変数の初期化
        int s = tempval;
        int n0,n10,n100,n1000;

        n10   = (s*6554)>>16;;     // 1234 -> 123
        n0    = s - (n10 *10);     // 1234 -  1230 -> 4
        n100  = DVI10(n10);        // 123  -> 12
        n10   = n10 - (n100 *10);  // 123  -  120 -> 3
        n1000 = DVI10(n100);       // 12   -> 1
        n100  = n100 - (n1000*10); // 12   -  10  -> 2

        //画面に表示
        data_read[0] = '0' + n1000;
        data_read[1] = '0' + n100;
        data_read[2] = '0' + n10;
        data_read[3] = '.';
        data_read[4] = '0' + n0;
        data_read[5] = 'C';
        data_read[6] = 0;
        ns_printf(data_read);

        //1.7秒待つ ちらつき防止
        HAL_Delay(1700);



    /* USER CODE BEGIN 3 */
  }
  /* USER CODE END 3 */
}


```
JavaScriptの文字列のメソッド

#概要
Rubyを学んできて、JSにも手を出し始めた。文字列メソッドに関して違いがあったのでこちらに備忘録として書いていく。

##文字列の長さを調べる
ただ length プロパティを使用すればよいので、とても簡単

```
let browserType = 'mozilla';
browserType.length;
```



##特定の文字列を扱う
前の例と関連しているが、文字列に対して角括弧記法を使用することで文字列中の任意の 1文字が得られる。

```
browserType[0];
=>"m"
```

文字列の一番最後の文字を取得したいときは、先ほどの length プロパティと組み合わせてt次のようにする

```
browserType[browserType.length-1];
=>"a"
```

##部分文字列を探して抽出する
長い文字列の中に、ある文字列が存在するか調べたいとき、探したい部分文字列を引数に取る indexOf() メソッドを使用する。

```
browserType.indexOf('zilla');
=> 2 #部分文字列"zilla"の開始位置が 2 (0、1、2 — つまり 3文字目)で 
      あるから。
     #見つからなかった場合は-1を返す。

```

##slice() メソッド
その文字列のどこから始まるかが分かっており、どこで終わっているかがわかれば、その部分文字列をslice() メソッドを使用することで抽出する。

```
browserType.slice(0,3);
=>'moz'

browserType.slice(2);
=>'zilla'
```
・最初の引数は抽出を始める最初の位置
・第2引数は抽出する最後の文字の直後の位置（この場合先頭から 4番目の 
  手前までの文字列が切り出されている）
・第２引数がない場合は第１引数（この場合は2文字目）から残りの文字列
　をすべて返す。

##大文字、小文字の切り替え

```
let radData = 'My NaMe Is MuD';
radData.toLowerCase();
=>'my name is mud'
let radData = 'My NaMe Is MuD';
radData.toUpperCase();
=>'MY NAME IS MUD'
```
##文字列の一部分を書き換える
replace()メソッドを使用することで、ある部分文字列を他の文字列に置き換えることができる。

```
browserType.replace('moz','van');
=>'vanilla'
```
この場合、第1引数の'moz'を第2引数の'van'に置き換えている。

##おわりに
最後まで読んでいただきありがとうございました。
【VRChat】AimConstraintを用いて羅針盤を作成する

## 概要
- AimConstraint で目的地の方向を常に向く矢印（羅針盤）を作成する

## はじめに
私の作成したVRCWorld「[Music Stellar Lake](https://vrchat.com/home/launch?worldId=wrld_c330cf97-4ffb-40a9-b872-79a36905134d)」の公開に際して
ワールド内で使っているギミックの中から
特に汎用的なものをピックアップしていくつか紹介していこうと思っています

もし「役に立ったー！」となったらワールドに遊びに行ってもらえると
（ついでに #musicstellarlake のハッシュタグでツイートしてもらえると）
嬉しいです！


## 環境

- VRCSDK 3.0 2021.08.04.15.07
- Unity 2019.4.29f1
- Usharp v0.20.2

## 大まかな手順
1. 向かせたい場所にGameObjectを配置する
1. `VRC_Pickup` をつけたオブジェクトの子に矢印オブジェクトを作成
1. 矢印オブジェクトの `Aim Constraint` を設定する
1. （オプション）もっと羅針盤らしい挙動にする


## 手順１：向かせたい場所にGameObjectを配置する
- 目的地の位置に GameObject を置きます
    - 空の GameObject でOKですがわかりやすいように赤い Cube を置きました
    - ヒエラルキー上は `Aim At` 

## 手順２：`VRC_Pickup` をつけたオブジェクトの子に矢印オブジェクトを作成
- `Indicator Handle` という名前で Sphere を作成
- 子オブジェクトとして矢印オブジェクト（ `arrow` ）を追加
- ヒエラルキーはこんな感じになります

|手順２までのヒエラルキー|
|------|
|![hiera.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169868/ae7f7e64-8b0b-87a3-27c6-14773b7c07b5.png)|

- `Indicator Handle` に `VRC_Pickup` を追加し、 `Rigidbody`  コンポーネントの `Use Gravity` と `Is Kinematic` を適切に設定
    - 本筋ではないため説明を割愛します
- `arrow` の `transform` の `position` を設定して矢印が見えるように
    - 今回は y = 1 としました

## 手順３：矢印オブジェクトの `Aim Constraint` を設定する

- `arrow` オブジェクトに `Aim Constraint` を追加

|Aim Constraint の追加|
|---|
|![addcomp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169868/6136a573-f396-35ec-78ae-ea3b28b54278.png)|

- ウィンドウ左上の四方向に矢印が出ているアイコンをクリックし、Unity の Move Tool を有効にする
- Move Tool アイコンの右側のほうに `Local` となっているアイコンがあることを確認する
    - **もしここが `Global` となっているようならクリックして `Local` に変更する**
        - ここではツールを使って表示したり動かしたりする基準をローカル座標とするかグローバル座標とするかを決定しています

|Move Toolと Local 確認|
|---|
|![move tool.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169868/f36ed544-299b-f74d-448a-eccd1ca8719a.png)|


- **`arrow` の `transform` の `rotation` がすべて0なのを確認し**、矢印の向きが x, y, z のどちら向きかを確認する
    - `rotation` を 0 にするのを忘れてしまいがちなので注意
    - 今回の場合は z のマイナス方向に矢印が向いています

|矢印の向きをチェック|
|---|
|![yajirushi1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169868/378c25f3-b73b-c8c4-79bd-bc11d1f69af5.png)|

- 先ほどの矢印の向きに合わせて `Aim　Constraint` の `Aim Vector` を設定する
    - 今回であれば Z方向 の負の向きなので　(x, y, z) = (0, 0, -1) となる

|矢印の方向をZ=-1に設定する|
|----|
|![zminus1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169868/c0e5e9d7-9215-8bee-0767-541fae3e55a8.png)|

- `Aim Constraint` の `Sources` の `+` ボタンをクリック
- `Aim At` オブジェクトをドラッグ＆ドロップで `Sources` に追加
- **`Aim Constraint` の `Zero` ボタンをクリックして完成!!!!!**


|完成時の動作|
|-----|
|![CompleteAnim.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169868/79e7fdcc-0006-cef8-10f6-72e74c7ba7b1.gif)|

## （オプション）もっと羅針盤らしい挙動にする
- この実装だと目的地が上の方にあると矢印が上を向きます
- もし羅針盤のようにy軸方向にのみ回転させたい場合には `Aim Constraint` の `Constraint Settings` の `Freeze Rotation Axis` の x と y からチェックを外してください

|More 羅針盤設定|
|------|
|![more羅針盤.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169868/9889864b-5713-6a0a-bdc8-1cabd496bdbb.png)|
OpsRamp 監視エージェントのバージョンアップ


不具合が発生した際にサポートへ問い合わせると、監視エージェントをアップデートして欲しいと回答が来ることがあります。管理対象が多い場合は一括バージョンアップしたい所です。そこでOpsRampのポータルでバージョンアップする方法を記載しておきます。


### 1台ずつアップデートする場合

"Setup" > "Monitoring" > "Vistara Agentのアップデート" からエージェントをアップデートします。この状態で"今すぐアップデートする"をクリックしても何も処理されません。
※エラーメッセージも何も表示されないのでずっと待ち続ける事に。。

| ![2021-1120-200230.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333529/53667270-8c66-822a-96e1-85c313a46910.jpeg) |
| :-- |


"アップデート可否"の"許可する"をクリックします

| ![2021-1120-200412.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333529/79e50459-b2c5-604e-1241-55a4aa12893e.jpeg) |
| :-- |


"Yes"をクリック

| ![2021-1120-200424.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333529/233543ad-1388-e19d-ccc2-f8eaf100bbc5.jpeg) |
| :-- |



"アップデート可否"が"Don't Allow"に変り、これでアップデートする事が出来るようになりました。
ここで"今すぐアップデートする"をクリックします。

| ![2021-1120-200450.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333529/a9d8fce4-7cf2-bfee-25ee-58f0598a48b4.jpeg) |
| :-- |


"Yes"をクリックします。
※早ければ1分程度でアップデートが完了します。今回は監視エージェントが最新バージョンだったので何も変化ありません。

| ![2021-1120-200504.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333529/dd52d30a-f64b-21c1-7a1b-2f466133e34a.jpeg) |
| :-- |


### 全台一斉アップデートする場合

左上のチェックを入れて、

| ![2021-1120-200833.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333529/2e46a895-10e5-7924-bb34-92cf01d58e24.jpeg) |
| :-- |


表の上にある"許可する"をクリック

| ![2021-1120-200851.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333529/3097efd8-e46d-3a30-7e54-ac99239cc512.jpeg) |
| :-- |


"Yes"をクリック

| ![2021-1120-200901.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333529/0ad59606-c013-cfd1-9b55-9ee797a51858.jpeg) |
| :-- |


"アップデート可否"の列が全て"Don't Allow"に変ったので、もう一度全台にチェックを入れて表の上の"今すぐアップデートする"を実行しましょう。

| ![2021-1120-200912.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333529/48c4b9c5-9541-342c-b1a6-253429c2ea84.jpeg) |
| :-- |



不具合の修正が頻繁に行われているので、できるだけ最新バージョンへの更新をしましょう。


おわり。
【javascript】メソッドチェーン

# チェーンメソッド
異なるメソッドを連続して実行することができる。

# case
* Personクラスにhello,introduce,shakeHands,byeというメソッドがある。

```js

class Person {
	constructor(name, age) {
		this.name = name;
		this.age = age;
	}

	hello(person) {
		console.log(`${this.name} says hello ${person.name}`);
	}

	introduce() {
		console.log(`Hi, I'm ${this.name}, ${this.age} years old.`);
	}

	shakeHands(person) {
		console.log(`${this.name} shake hands with ${person.name}.`);
	}

	bye(person) {
		console.log(`Goodbye, ${person.name}.`);
	}
}

const bob = new Person('Bob', 23);
const tim = new Person('Tim', 33);

bob.hello(tim);
bob.introduce();
bob.shakeHands(tim);
bob.bye(tim);
```
* 実行するとそれぞれ以下の要素がコンソールに出力される。
    * Bob says hello Tim
    * Hi, I'm Bob, 23 years old.
    * Bob shake hands with Tim.
    * Goodbye, Tim
* 問題は、実行する時にそれぞれ、のメソッドを以下のように実行することになる。

```js
bob.hello(tim);
bob.introduce();
bob.shakeHands(tim);
bob.bye(tim);
```
* これを以下のように連続して実行するにはどうするか？

```js

bob.hello(tim)
   .introduce()
   .shakeHands(tim)
   .bye(tim)

```

## 結論

各メソッドの戻り値に`this`を追加してPersonオブジェクトを返してあげる

```js

hello(person) {
		console.log(`${this.name} says hello ${person.name}`);
		return this;
	}

```

なぜか?
* 最初のhallo()を実行した時にhalloにはPersonのオブジェクトが渡っていないため、連続して、メソッドを追加できない。

* そこで、Personオブジェクトの各メソッドの戻り値にthisを渡すことで実行後もPersonオブジェクトを維持することができる。
    * thisにはpersonオブジェクトが存在しprototypeにはメソッドが格納されていることが確認できる。
    * ![スクリーンショット 2021-11-20 20.28.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378066/5d88bddb-0fa9-eb9c-0eab-a7db355778e7.png)

* 最終的のコード

```js

class Person {
	constructor(name, age) {
		this.name = name;
		this.age = age;
	}

	hello(person) {
		console.log(`${this.name} says hello ${person.name}`);
		return this;
	}

	introduce() {
		console.log(`Hi, I'm ${this.name}, ${this.age} years old.`);
		return this;
	}

	shakeHands(person) {
		console.log(`${this.name} shake hands with ${person.name}.`);
		console.log(this)
		return this;
	}

	bye(person) {
		console.log(`Goodbye, ${person.name}.`);

	}
}

const bob = new Person('Bob', 23);
const tim = new Person('Tim', 33);

bob.hello(tim)
	.introduce()
	.shakeHands(tim)
	.bye(tim);

```
Sobelフィルタ(OpenCV C++)

# Sobelフィルターについて

- エッジの強調が強い
- そのためノイズが強調されやすい
- カーネル(3x3)のイメージ ↓

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/e0508d03-a2f5-aa53-604f-dd894155ca33.png)

# OpenCVでの使用方法

![Screenshot from 2021-11-20 20-28-30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/8210990b-05a6-2069-5461-03176d3f667e.png)

- `src`: `入力画像`
- `dst`: `出力画像(サイズ,チャンネル数が同じ)`
- `ddepth`: `出力画像の深さ (下の表の組み合わせのように選択可)`
- `dx` : `1にするとx方向に微分する(0 or 1)`
- `dy` : `1にするとy方向に微分する(0 or 1)`
- `ksize`: `カーネルのサイズ`
- `scale`: `カーネル要素にかかる倍率`
- `delta`: `わからない`

![Screenshot from 2021-11-20 20-38-25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/c6109150-e471-38ec-4704-4d56ada8e72f.png)
※ddepthが-1のときは入力と同じ深さ

## C++サンプル
フィルタを実行するサンプルは以下のようになります。結果のエッジを強調するために`kernelサイズ`はそのままの`3`に,`scale`は`10`としています。

```
cv::Mat img = imread( "images/template.jpg" );

cv::Mat gx, gy;
cv::Sobel(img, gx, CV_16S, 1, 0, 3, 10); // x方向微分
cv::Sobel(img, gy, CV_16S, 0, 1, 3, 10); // y方向微分
```

`cv::imshow()`でそれぞれの`Mat`を見ると以下のようになりました。

![Screenshot from 2021-11-23 13-41-50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/388e6f76-8035-ff76-f829-51458b19802c.png)

# 参考

[Sobelフィルタについての説明](https://www.mitani-visual.jp/mivlog/imageprocessing/sobel001.php)

[OpenCVのドキュメント・Sobelフィルタ関数説明](https://docs.opencv.org/4.x/d4/d86/group__imgproc__filter.html#gacea54f142e81b6758cb6f375ce782c8d)

[OpenCVのドキュメント・ddepthの組み合わせについて](https://docs.opencv.org/4.x/d4/d86/group__imgproc__filter.html#filter_depths)

[Mat一覧](https://tech-blog.s-yoshiki.com/entry/76)

[Mat::type()の値](https://koshinran.hateblo.jp/entry/2017/10/30/200250)
VS Code 1.62 の新機能 - ペア括弧ガイド機能の改善

https://code.visualstudio.com/updates/v1_62#_improved-bracket-pair-guides

[v1.61で追加された](https://qiita.com/12345/items/76ac66f30285fe0f4557)ペア括弧ガイド機能が改善された。

今回、ペア括弧のガイド線に対応する構文部分に下線が入るようになり、それがガイド線と繋がって表示されるようになった。つまり、この括弧の範囲はこの構文が対象だよというのが視覚的によりわかりやすくなった。
また、インデントの状態によって縦ガイド線の位置が調整されるようになった。
![bracket_pair_guide.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181011/d60d8465-e15a-1344-090b-e8b51748f6eb.gif)
設定 `Editor > Guides: Bracket Pairs` を `true` に設定すると有効になる(デフォルトは`false`)。`active`に設定した場合はアクティブでないペア括弧のガイド線は色付けされない。
また、設定 `Editor > Guides: Bracket Pairs Horizontal` を `true` に設定するとアクティブでないペア括弧の横のガイド線も薄色で表示されるようになる(デフォルトは`active`)。ただし最初の設定を`active`にしていると設定が効かないので両方とも`true`にする必要がある。

さらに、ガイド線の色もカスタマイズできるようになった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181011/71dfdc27-40fb-c087-ad7f-e2309b359742.png)
`editorBracketPairGuide.activeBackground1`と`editorBracketPairGuide.background1`が一番外側のガイド線のアクティブ色/非アクティブ色の設定項目となり、設定項目としては`1`から`6`の6種類ある。実際に何色使われているかは各言語(拡張子)ごとに異なる。上記JavaScriptの場合はデフォルトは3色でループしている。が、この場合も4,5,6と指定することで使用色を増やすことは可能。

また、設定`editor.language.brackets`および`editor.language.colorizedBracketPairs`を使用して、どの括弧をペア認識させるか、ガイド機能の対象にするかを[言語ごとに設定できる](https://code.visualstudio.com/updates/v1_62#_customizable-bracket-pairs)ようになった。
AtCoder Some Sums (AtCoder Beginner Contest 083) へのコメント

問題
https://atcoder.jp/contests/abc083/tasks/abc083_b

13,14,,,などの数字は1+3、1+4,,,と足す必要がある。
数字のままでは13を1と3に分解することができないので、13を一度文字列に変えて1と3に変更する→数字に戻して1と3を足し合わせる必要がある。


```Python
N, A, B = map(int, input().split())

answer = 0

for i in range(N+1):
  s = str(i) # 数字の20を文字の20に変える 
  n_list = list(map(int, s)) # 右のlist(~で配列を宣言し、map関数で文字列sをintに変換
  summary = sum(n_list)
  
  if A <= summary <= B # summaryがA以上B以下の時、足す
       answer += i

print(answer)

```
HTTP request smugglingってなんぞ

BurpのScan実行結果に「HTTP request smuggling」なる脆弱性が存在した。初耳なので調べるナッシー！

## 概要

PHPの一部バージョンでApacheとの接続にApache2hanlerを用いている場合に存在する脆弱性

リクエストヘッダに特定のヘッダを付与すると、レスポンスボディにリクエストボディの文字列が付与されてしまう脆弱性
リクエストボディにscriptタグを記載することで標的に任意のjsを実行させることができる。

脆弱性番号: CVE-2018-17082

## 詳細

リクエストヘッダに「Transfer-Encoding: chunked」と「Content-Length:${任意の数字}」を付与すると、レスポンスボディにリクエストボディの内容が反射されてしまう。

このリクエストボディにscriptタグを用いてjavascriptを記載することで、任意のjavascriptを標的に実行させることができる。

### Transfer-Encoding: chunkedとは？

HTTPでデータのサイズがわからない場合にチャンクとして分割して送ることを示す

### Content-Lengthとは？

ボディのバイト長

## 攻撃手法

この脆弱性がどうやって攻撃に利用されるかよくわからないッシー！
ユーザーが自分でリクエストヘッダを弄る状況が考えられないし、他者にヘッダを強制されるとは思えない

## 攻撃原理

リクエストボディに相反するTransfer-Encoding: chunkedとContent-Lengthを同時に指定すると、RFCでは「Transfer-Encoding」を優先する事になっているが、実装ミスでそうでないためこの脆弱性が産まれた

## ソースコードベースの解説

該当issueを見つけたけど理解不能ナッシー！

https://github.com/php/php-src/commit/23b057742e3cf199612fa8050ae86cae675e214e

## 対策

主にphpのアップデート

## 参考リンク

徳丸さんの動画がすごいわかりやすかったナッシー！

https://yamory.io/blog/about-http-request-smuggling/
https://www.youtube.com/watch?v=VUBR1rVAquw
https://wa3.i-3-i.info/word16371.html
FlutterのプロジェクトでAndroidStudioのToolWindowsが足りない

# 現象
View/Tool Windows
の中にあるEmulatorとかが足りない

# 環境
 - Mac
 - AndroidStudio
 - Flutter

# 対策
これ

https://halzoblog.com/flutter-device-file-explorer/

File/Project Structure
 → Project Settings/Modules
 → +ボタンからAndroidを追加
![スクリーンショット 2021-11-20 19.28.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620387/894ded30-47db-9b23-2f90-bd344bda6587.png)
Chromeの新機能（背景変更とタブ検索）


![スクリーンショット 2021-11-20 18.54.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/935646/2a07f206-c5de-2000-9738-c54c1b35f5da.png)

こちらのボタンで背景とテーマカラーの変更が可能に〜！
早速変更してみました、綺麗な写真ですね。。。
ちなみにグレートバリアフリーらしいです。
外国も綺麗ですね、沖縄も負けないけど。ﾜﾗ

個人的にPCを自分の好きなようにカスタマイズできるとめっちゃテンション上がるんで
すごく嬉しい機能です❤️ わ〜い　　（笑）



あとタブの検索も追加されましたね。
![スクリーンショット 2021-11-20 19.07.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/935646/1dda12b6-813d-01e0-b4f4-4e64fe0e8e23.png)


画面右上の矢印マーク（表記の仕方は２通りあるらしい）をクリックすると
検索窓が出てきます。

たくさん調べ物した時にあのタブどこだっけ、、？汗
って時に非常に助かります。

あと作業効率も上がりますね。
地味に嬉しい機能です。（笑）


アップデートって楽しいですよね、どんな新機能が追加されたんだろうって
これからもChromeさん、お世話になります＾＾
【Pytorch】RuntimeError: Expected a 'cuda' device type for generator but found 'cpu'【Dataloader・データローダー】

ある日こんなエラーが

```
epoch: 1
Traceback (most recent call last):
  File "train.py", line 168, in <module>
    main()
  File "train.py", line 77, in main
    train_loss = train(
  File "train.py", line 115, in train
    for data, label, mask in dataset:
  File "/home/ubuntu/.pyenv/versions/3.8.8/lib/python3.8/site-packages/torch/utils/data/dataloader.py", line 521, in __next__
    data = self._next_data()
  File "/home/ubuntu/.pyenv/versions/3.8.8/lib/python3.8/site-packages/torch/utils/data/dataloader.py", line 560, in _next_data
    index = self._next_index()  # may raise StopIteration
  File "/home/ubuntu/.pyenv/versions/3.8.8/lib/python3.8/site-packages/torch/utils/data/dataloader.py", line 512, in _next_index
    return next(self._sampler_iter)  # may raise StopIteration
  File "/home/ubuntu/.pyenv/versions/3.8.8/lib/python3.8/site-packages/torch/utils/data/sampler.py", line 226, in __iter__
    for idx in self.sampler:
  File "/home/ubuntu/.pyenv/versions/3.8.8/lib/python3.8/site-packages/torch/utils/data/sampler.py", line 124, in __iter__
    yield from torch.randperm(n, generator=generator).tolist()
RuntimeError: Expected a 'cuda' device type for generator but found 'cpu'
```

通常、ロスなどを取るときなどに、片方はGPUで片方がCPUだと計算できないよ、というものが、なんと学習する前のデータロードするタイミングで...知らんわ笑

調べてみるとどうやら、

```
    torch.set_default_tensor_type("torch.cuda.FloatTensor")
```

こいつが悪さをしていたらしい。というわけでコメントアウトすればとりあえず動いた

バージョン
Pytorch 1.9.1

参考
https://github.com/dbolya/yolact/issues/664
Vue-flatpickr-component導入と日本語化

## 概要
日付と時刻を入力する必要があるVueシステムの作成にて。
chromeでは動いた`<input type="datetime-local">`君が、Firefoxでは、動作不十分だった。(時刻の入力フォームが出てこないため、時刻だけ手打ちになる)

これではダサいので、ブラウザに頼らない日時入力フォームを作ることになった。
選ばれたのはVue-flatpickr-componentでした…

当記事では筆者がつまづいた部分だけまとめています。

## 導入

まず、Vue V2.x を使っている場合、、読み込むバージョンをきちんと指定しないと動かない....。
~~こういう事ってライブラリにはよくあることなんですかね？~~

```cmd:yarn派ですかnpm派ですか
yarn add vue-flatpickr-component@^8
npm install vue-flatpickr-component@^8
```
ソース　https://github.com/ankurk91/vue-flatpickr-component/issues/43

## 日本語化

これに関しては記事はいっぱいあるものの、やってることが分かりづらかった…
日本語化って何が変わるの？というのはまあ、Novemberが11月とかになる。

「こういうのの言語設定とかって、オプションの`lang`とかに`"ja"`とか入れるんでしょ？」

と、思うのだが、Vue-flatpickr-componentではこちら側で言語ファイルを、読み込んでそいつをオプションに渡してやる必要がある。~~なんでstringで渡さないんですかね....？~~

__そして、ここがまた分かりづらいのだが、読み込むファイルは「node_modules/vue-flatpickr-component」内には無い。
Vue版をインストールすると付いてくる「node_modules/flatpickr/dist/l10n」内にある。__

この中の`ja.js`を読み込む訳だが、ja.jsを見れば分かる通り、ja.jsではモジュールのエクスポートがそれぞれ、
*　名前付きエクスポート:Japanese
*　デフォルトエクスポート:ja
となっている。

つまり、名前付きエクスポートを使うのであれば`{Japanese}`にしないと読み込めない。
~~ここまでたどり着くのにnode_modules開かんとなのがもうさあ...と思ってしまう。~~

ここまでを踏まえた結果、こんな感じのコードになる。

```vue:dateTimeInput.vue
...
<flat-pickr v-model="flatdate" name="date" id="date" :config="flatOption"></flat-pickr>
<script>
import flatPickr from 'vue-flatpickr-component';
import {Japanese} from 'flatpickr/dist/l10n/ja.js';
import 'flatpickr/dist/flatpickr.css';

export default{
  components: {
    flatPickr
  },
  data:function(){
    return {
      flatOption:{
        locale: Japanese,
        enableTime: true,
        dateFormat: "Y-m-d H:i",
        time_24hr: true
      },
    }
  }
}
```

CSSは読み込むだけでいい感じになるが、土日色付けとかは自分でやらなきゃみたい。

## おまけ：土日・祝日スタイル
```scss:style.css
@import 'flatpickr/dist/flatpickr.min.css';

// $red : #f00;
// $blue : #25bdcf;

.flatpickr-calendar .flatpickr-innerContainer {
    /* 日曜日：赤 */
    .flatpickr-weekdays .flatpickr-weekday:nth-child(7n + 1),
    .flatpickr-days .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):nth-child(7n + 1) {
        color: $red;
    }
    /* 土曜日：青 */

    .flatpickr-weekdays .flatpickr-weekday:nth-child(7),
    .flatpickr-days .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):nth-child(7n) {
        color: $blue;
    }
}

```

参考にしました。https://notes.sharesl.net/articles/1923/

祝日も色付けしたい場合は、またどこかから祝日のデータを引っ張ってきて解析して祝日用クラスを付与して....って感じでやります。

終わります。こういうぐだぐだって、だいたいstackOverFlowやgithubのライブラリissueに行かないと終わりませんよね...。

愚痴ばかりで失礼しました！！
シェル　作業効率がアップする便利なショートカットキー一覧

#シェルとは

**OSと対話するためのインターフェイス（窓口）を提供するソフトウェアのこと**

https://pikawaka.com/word/shell

#環境
`macOS Big Sur 11.2.3`

#シェルコマンド一覧

###カーソルの移動コマンド

| コマンド | 内容 |
|:-:|:-:|
| ⌘ + f  | 一文字次へ移動  |
| ⌘ + b |  一文字前へ移動 |
| ⌘ + a | 行の先頭に移動  |
| ⌘ + e  | 行の最後に移動  |
| Meta + f (esc + f)  | 一単語へ移動  |
|  Meta + b (esc + b) | 一単語前へ移動  |

:::note alert
単語単位の移動 ・・・ escキー を押した後に fキー を押すと実行される
:::

###文字列の編集

| コマンド | 内容 |
|:-:|:-:|
| ⌘ + h  | カーソルの左を1文字削除  |
| ⌘ + d  |  カーソル部分を１文字削除 |
| ⌘ + w  | カーソル一の単語を削除（カーソルの前部分）  |
| ⌘ + u | カーソルの位置から行頭まで削除  |
| ⌘ + k  | カーソルの位置から行末まで削除  |
| ⌘ + y  | 最後に削除した内容を導入  |

###トラブル時の対応

| コマンド | 内容 |
|:-:|:-:|
|  ⌘ + c | 実行中のコマンドを強制終了  |
|  ⌘ + l | 画面の削除。文字化けした時のクリアにも使用  |
|  ⌘ + s | 画面表示のロック（キーボードから文字の入力を受け付けない）  |
| ⌘ + q  | 画面表示のロック解除  |

###補完・コマンド履歴

| コマンド | 内容 |
|:-:|:-:|
|  Tab | コマンドやパスの補完  |
| Ctrl + p、　または↑キー  | １つ前の履歴を見る  |
|  Ctrl + n、　または↓キー |  １つ後の履歴を見る |
| Crrl + r  | コマンド履歴のインクリメンタル検索  |
|  文字の入力 | コマンド履歴から検索  |
| Ctrl + r  | １つ前の検索結果へ移動  |
| Enterキー  | 現在の検索結果を実行  |
| Escキー  | 現在の検索結果を表示したままコマンドラインに戻る  |
|  Ctrl + g | 検索結果を破棄し、コマンドラインに戻る  |

##参考教材

https://www.udemy.com/course/unscared_linux/
SQLインジェクションを防ぐ 〜2


---
#####SQLコードインジェクション防止の８のベストプラクティス 
https://snyk.io/blog/sql-injection-cheat-sheet/

######第２章です。

[序章](https://qiita.com/bricolageart/items/f87dd0d98f1e1b5c4666)
1. [クライアントサイドの入力バリデーションに依存しない](https://qiita.com/bricolageart/items/b442165360ef24d093da)
2. [制限された権限を持つデータベースユーザーを使用する](https://qiita.com/bricolageart/items/a857fa1c058a4527f155)
3. [プリペアドステートメントとクエリパラメータ化を使用する](https://qiita.com/bricolageart/items/ffe99886bdcdbf32658e)
4. [コードをスキャンしてSQLインジェクションの脆弱性を探す](https://qiita.com/bricolageart/items/37b13aaa59a28c148ac5)
5. [ORMレイヤーを使用する](https://qiita.com/bricolageart/items/1532b73057a260aaa755)
6. [ブロックリストに依存しない](https://qiita.com/bricolageart/items/6d4a78da2870dce6edf7)
7. [入力バリデーションを行う](https://qiita.com/bricolageart/items/36689c797a678e406b6c)
8. [ストアドプロシージャに注意する](https://qiita.com/bricolageart/items/2abfb7ef48a6bfd990bf)


[チートシート（英語）はこちら](https://snyk.io/wp-content/uploads/8-best-practices-to-prevent-SQL-injection-attacks.pdf)


### 2.制限された権限を持つデータベースユーザーを使用する
 
前述のように、SQLインジェクション攻撃にはさまざまな種類があります。他よりも有害なものもあります。考えてみてください`"SELECT * FROM USER WHERE USERID = '" + userid +"'"`のようなものだとします。`" foo' OR '1'='1 "`というインジェクションは、すべてのユーザーを提供することになり、すでに有害です。`" '; UPDATE message SET password = 'EVIL`は、侵入者がすべてのエントリを変更することが可能であり、さらに問題を引き起こします。
アプリケーションのデータベースユーザーを作成するときは、そのユーザーの権限について考える必要があります。そのアプリケーションには、すべてのデータベースの読み取り、書き込み、および更新の機能が必要でしょうか？ テーブルをTRUNCATEやDROPについてはどうでしょう？プリケーションのデータベースに対する権限を制限すれば、SQLインジェクションの影響を最小限に抑えることができます。
アプリケーションのために単一のデータベースユーザーを持たず、複数のデータベースユーザーを作り、それらを特定のアプリケーションロールに接続するのが賢明でしょう。セキュリティ問題は連鎖的に発生する可能性が高いので、大きな被害を防ぐためには、連鎖のすべてのリンクに注意する必要があります。



2つめは以上です。
最後までお読みいただきありがとうございました！

######次回はSQLインジェクションを防ぐ 〜3に続きます。


SQLインジェクションに関する英語全原文は[こちら](https://snyk.io/blog/sql-injection-cheat-sheet/)です。

---
######Contents provided by:
Jesse Casman, Fumiko Doi, Content Strategists for Snyk, Japan, and Randell Degges, Community Manager for Snyk Global
nginx(Elastic Beanstalk)で413 Request Entity Too Largeが発生した場合の対処

# 現象
開発中のアプリで、画像データをBese64エンコードしてJsonに含めてバックエンドにPOSTした場合に、413 Request Entity Too Largeが発生。

他の参考サイトを元に、プロジェクトルートに「.ebextensions」フォルダを作成し、その中にnginxの設定変更ファイルを作成するもうまくいかず。。。
[Elastic Beanstalk にファイルアップロードができない (nginxで413エラー)](https://qiita.com/rh_taro/items/9d2976629e1de853d378)

```yml:.ebextensions/01-nginx-max-body.config
files:
  "/etc/nginx/conf.d/client-max-body-size.conf":
    mode: "000755"
    owner: root
    group: root
    content: "client_max_body_size 100M;"

container_commands:
  01-nginx_reload:
    command: sudo nginx -s reload
```

# 原因を調べる
sshでec2に侵入し、「/etc/nginx/conf.d」配下を見てみるも、confファイルが作成されていない。
そもそもここでいいんだっけ？と思い、「/etc/nginx/nginx.conf」を見てみると、、、

```
include conf.d/elasticbeanstalk/*.conf;
```

読み込まれる先は、「/etc/nginx/conf.d」ではなく、「/etc/nginx/conf.d/elasticbeanstalk」だった。
なのでそのように設定ファイルを書き換えてやる。

# 解決
以下のように設定ファイル書いてやって、デプロイしたらファイル作成されて、無事設定も反映されてました。

```yml:.ebextensions/01-nginx-max-body.config
files:
  "/etc/nginx/conf.d/elasticbeanstalk/client-max-body-size.conf":
    mode: "000755"
    owner: root
    group: root
    content: "client_max_body_size 100M;"

container_commands:
  01-nginx_reload:
    command: sudo nginx -s reload
```
[Windows]ロリポップにssh接続してphpファイルを実行するまで

## 概要
最近仕事でPHPを触り始め、ようやく理解も始まってきた。
node.js含め、jsばっかり触ってたので、これを気にnodeではさわれなかったレンタルサーバーで遊びたい。
手始めにロリポップで借りてるレンタルサーバーで遊べるか確認することにした。
が、どうもコマンドプロンプトで普通に[ssh]しても接続できない。
ロリポップのssh自体が自己責任やらなんやら、自分の力でやってください。とのことなので、自力で頑張るしかないようだ。

## 環境
執筆日・2021/11/20
ロリポップ契約：スタンダードプラン
ssh接続：Putty
FFFTP事前使用

## 準備
1. ロリポップ＞ユーザー専用ページ＞サーバーの管理・設定＞SSH
より、SSH機能をONにしておく。
2. サーバー・アカウント・接続ポート・SSHパスワードが現れるので、メモするかウィンドウ開いておく。
3. SSH接続に、今回はPuttyというやつを使ってみた。インストールする。
    * 解説分かりやすかった：https://qiita.com/ponsuke0531/items/43491db4e8e8fed08651
    * インストール：https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html
4. インストーラーは全部英語で分かりづらかったが、特に選択肢とかなかったので簡単にインストールできる。


## SSH接続
> 2022/08/13追記：Windows Terminalなら普通に`ssh`コマンド使えたわ.......。


インストールしたPuTTyを起動し、SSH接続していく。
開くとこんな画面になると思う。
![rorissh1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/990851/ede9a257-a888-ed0b-7a9f-272a2b3a5a83.png)
サーバーと接続ポートにそれぞれロリポップのSSH設定画面で入手した情報を入力。
=>Openをクリック。

ログイン名を聞かれるので、同じくロリポップのアカウント名をコピペ。（コピペは右クリックすると勝手にしてくれた。）
パスワードを聞かれるので、同じく（略）
なお、パスワードはコマンドラインの常識らしく打っても見えないがきちんと入力されている。やっぱり右クリックでペーストするのが一番楽だった。

### 接続できた！
![rorissh3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/990851/0e73524d-af14-1eca-4c22-4c4ccd6c8c75.png)


composerも使えるみたい。 `composer -v`
![rorissh2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/990851/b3e52cec-0b4d-43a3-a29c-9b3b41c89700.png)

## 閑話本題　（）

FFFTPがあるようならテスト用のPHPファイル該当ロリポップサーバーに上げておく。
今回はクソシンプルな以下を使用。

```php:test.php
<?php
    echo('test!!');
?>
```

これもさっき知ったコマンドだが...test.phpを実際に実行してみる。
[test.php]をアップロードしたディレクトリまで[cd]コマンドで移動し、
`php -f test.php`

応答が返って来れば実行ができたってことだ！

![rorissh4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/990851/a43e2c57-e4ba-e518-d53c-8000933a7d00.png)

やったで。

####--END--
新・FizzBuzz

##新・FizzBuzz

自分の中で「これは新しいFizzBuzzだ！」と思っただけなので、感じ方に個人差はあると思います。なるほどなっと私は感じたのでこんな書き方もありますよということです。。。

PHP8から導入された[「match式」](https://www.php.net/manual/ja/control-structures.match.php)を使ったFizzBuzzの書き方です。
matchは「値を返せるswitch式」のようなものです。


```FizzBuzz.php
function FizzBuzz (int $min, int $max) {
    foreach(range($min, $max) as $value){
        $output = match(true){
            $value % 15 === 0 => 'FizzBuzz',
            $value % 5 === 0 => 'Buzz',
            $value % 3 === 0 => 'Fizz',
            default => (string)$value
        };
        echo $output . '<br>';
    }
}
```

コードが短くて見やすく書けるのがいいですね。

引数に出力を開始する最小値(\$min)と、どこまで出力するのかの最大値(\$max)を受け取って、range関数でその範囲の数値を配列として作成して、foreachで回してmatchの制約式(true)に引っかかった出力を変数に代入して毎回echoしています。defaultでFizzBuzz以外の数値を文字列にキャストして代入しています。
STM32L010とACM1602K(キャラクター液晶)と内部ADCで値を表示(VSCのcubeide)


x cubeideは、初心者ころしである。
x MXは、動ないと思っていた　初心者にトラブルの自己解決は、不可能?
x VSCでnecleo-l010を選択
x 動けば正義、細かい事を気にするな
x STM32L010F4P6との違い、ピン数、内部温度センサー、コンパレータ
x いつも、動くと思うなよ(バクや頻繁なアップデートの為)
x 改造 PB3->PB1 , PA15 -> PA3

目的
ADCのテスト




LCD_ACM1602K_ADC_010_1内をいろいろ適当にコピー


https://os.mbed.com/users/caa45040/code/f303_h_p1/


主なプログラム(後は、めんどいので省略、各自、自習の事)



```c++


int main(void)
{
  /* USER CODE BEGIN 1 */

  /* USER CODE END 1 */

  /* MCU Configuration--------------------------------------------------------*/

  /* Reset of all peripherals, Initializes the Flash interface and the Systick. */
  HAL_Init();

  /* USER CODE BEGIN Init */

  /* USER CODE END Init */

  /* Configure the system clock */
  SystemClock_Config();

  /* USER CODE BEGIN SysInit */

  /* USER CODE END SysInit */

  /* Initialize all configured peripherals */
  MX_GPIO_Init();
  MX_USART2_UART_Init();
  /* USER CODE BEGIN 2 */


    char data_read[8]; //バッファー
    int  tempval;      //温度


    //ADCの初期化
    ADC_INIT1();


    //GPIOの初期化
    DW(en,GPIO_PIN_RESET);     //ビットが0 
    DW(swdclk,GPIO_PIN_RESET); //ビットが0 

    //液晶の初期化
    for(int ii=0;ii<8;ii++){ 
        seg1( lcd_int[ii] , 0);HAL_Delay(2);
    }//for

    //画面クリア
    seg1(   0x01  , 0  ); 
    HAL_Delay(1000);

    seg1( 0x80+0x00 , 0  ); //1ライン目にカーソルを移動
    ns_printf("START");HAL_Delay(1500); //debug

    //画面クリア
    seg1(   0x01  , 0  ); 
    HAL_Delay(5);

    int a;

  /* USER CODE END 2 */

  /* Infinite loop */
  /* USER CODE BEGIN WHILE */
  while (1)
  {
    /* USER CODE END WHILE */


        seg1( 0x80+0x00 , 0  ); //1ライン目にカーソルを移動

        //温度センサーの初期化
        //set address 0

        //温度の読み込み
        // Read temperature register
        a=9999;
        HAL_ADC_Start(&hadc);
        if( HAL_ADC_PollForConversion(&hadc, 1000) == HAL_OK )
        {
            a = HAL_ADC_GetValue(&hadc);
        }
        HAL_ADC_Stop(&hadc);

        //温度の保存
        // Calculate temperature value in Celcius

        tempval = a;
        //tempval = 1234; //debug

        //表示用の変数の初期化
        int s = tempval;
        int n0,n10,n100,n1000;

        n10   = (s*6554)>>16;;     // 1234 -> 123
        n0    = s - (n10 *10);     // 1234 -  1230 -> 4
        n100  = DVI10(n10);        // 123  -> 12
        n10   = n10 - (n100 *10);  // 123  -  120 -> 3
        n1000 = DVI10(n100);       // 12   -> 1
        n100  = n100 - (n1000*10); // 12   -  10  -> 2

        //画面に表示
        data_read[0] = '0' + n1000;
        data_read[1] = '0' + n100;
        data_read[2] = '0' + n10;
        data_read[3] = '0' + n0;
        data_read[4] = '.';
        data_read[5] = 0;
        ns_printf(data_read);

        //1.7秒待つ ちらつき防止
        HAL_Delay(1700);


    /* USER CODE BEGIN 3 */
  }
  /* USER CODE END 3 */
}



```
grid_mapを使ってみる(2)

前回grid_mapのinstall方法やデモの動作をしました。

https://qiita.com/hoshianaaa/items/b88369e24b3d621ea5eb

今回はオリジナルの画像をgrid_mapとして表示したいと思います。

## デモ

まず標準で用意されている画像をgrid mapとして表示するデモを実行します。

```
roslaunch grid_map_demos image_to_gridmap_demo.launch
```

すると以下のようなgrid mapがrviz上に表示されます。

![Screenshot from 2021-11-20 18-15-21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/55259b7a-2478-afaa-8380-ea1c520f9577.png)

launchの中は次のようになっています。

```xml:image_to_gridmap.launch
<launch>
  <rosparam command="load" file="$(find grid_map_demos)/config/image_to_gridmap_demo.yaml" />

  <!-- Load the image. -->
  <node pkg="grid_map_demos" type="image_publisher.py" name="image_publisher" output="screen">
    <param name="image_path" value="$(find grid_map_demos)/data/eth_logo.png" />
    <param name="topic" value="~image" />
  </node>

  <!-- Launch the grid map image to grid map demo node. -->
  <node pkg="grid_map_demos" type="image_to_gridmap_demo" name="image_to_gridmap_demo" output="screen" />

  <!-- Launch the grid map visualizer -->
  <node pkg="grid_map_visualization" type="grid_map_visualization" name="grid_map_visualization" output="screen" />

  <!-- Launch RViz with the demo configuration -->
  <node name="rviz" pkg="rviz" type="rviz" args="-d $(find grid_map_demos)/rviz/grid_map_demo.rviz" />
</launch>

```

## オリジナル画像の出力

先程のデモを参考に次はオリジナルの画像を出力してみます。
以下のようにlaunchを作成します。`image_path`は自分の使用した画像のパスを入力してください。

```xml:image_to_gridmap.launch
<launch>
  <rosparam command="load" file="$(find grid_map_demos)/config/image_to_gridmap_demo.yaml" />

  <!-- Load the image. -->
  <node pkg="grid_map_demos" type="image_publisher.py" name="image_publisher" output="screen">
    <param name="image_path" value="$(find grid_map_samples)/src/template_match.png" />
    <param name="topic" value="~image" />
  </node>

  <!-- Launch the grid map image to grid map demo node. -->
  <node pkg="grid_map_demos" type="image_to_gridmap_demo" name="image_to_gridmap_demo" output="screen">
    <param name="resulution" value="0.01" />
    <param name="max_height" value="1.0" />
  </node>

  <!-- Launch the grid map visualizer -->
  <node pkg="grid_map_visualization" type="grid_map_visualization" name="grid_map_visualization" output="screen" />

  <!-- Launch RViz with the demo configuration -->
  <node name="rviz" pkg="rviz" type="rviz" args="-d $(find grid_map_demos)/rviz/grid_map_demo.rviz" />
</launch>

```

今回は以下のようなopencvのtemplate matchサンプルの結果の画像を使用しました。([opencv templat matching サンプル](http://labs.eecs.tottori-u.ac.jp/sd/Member/oyamada/OpenCV/html/py_tutorials/py_imgproc/py_template_matching/py_template_matching.html))

![Screenshot from 2021-11-20 17-02-12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/c968e39f-3fdc-ef85-c203-b801556a14ee.png)

実行すると以下のようになり,2次元の結果を立体的に表示できました。

![Screenshot from 2021-11-20 18-11-38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/0c41a974-a5a7-9231-9f9a-635467470126.png)
Liunx プロセス・ジョブ コマンド一覧

#プロセスとは
**実行中のプログラムのこと**

- コマンドを実行するたびに実行ファイルをメモリに格納し、メモリ上でCPUがプログラムを実行
 - 一つ実行するたびに新しいプロセスが一つ作成される

#ps
**実行中のプロセスを表示するコマンド** 語源 : `process status`

```shell
# 構文
$ ps [オプション]
```
##aux
- **全ユーザーのプロセスを詳細情報も含めて表示するオプション**
 - **オプション**だが**`-`を付けなくてもOK**
 - `x`：**psコマンドを実行したユーザーの全プロセス**
 - `a`：**全ユーザーのプロセス**
 - `u`：**詳細情報を合わせて表示させる**

```shell
# 構文
$ ps aux
```

#ジョブとは
- **まとめて実行されるプロセスの集まり**
 - シェル毎に管理されている
- **ジョブとプロセスの違い**
 - プロセスは、OS全体で統一して管理。システムが自動で実行しているプログラムや他ユーザーが実行しているコマンドを一括して管理 
 - ジョブは、そのジョブを実行するシェルで管理

```shell
# プロセスの場合、「ps aux」、「grep bash」、「less」の３つを生成
$ ps aux | grep bash | less
# ジョブの場合、「ps aux | grep bash | less」とコマンドを一つにまとめて生成
```

#バックグラウンド と フォアグラウンド

- **バックグラウンド**
 - シェルの画面外でコマンドを実行すること
 - ユーザーが対話的に操作できないこと
- **フォアグラウンド**
 - シェルの画面内で実行すること
 - ユーザーの入力を受け付けるジョブの状態のこと


##jobs
**現在のジョブの一覧の表示するコマンド** 語源 : `jobs`

```shell
# 構文
$ jobs
# 出力結果(ジョブID、実行状況、実行コマンドの表示)
 [1]+ 実行中　sleep 10 &
```

#fg
- **ジョブをフォアグラウンドにするコマンド** 語源 : `foreground`
 - ジョブをフォアグラウンドに戻して対話的に操作したい時に使用

```shell
# 構文
$ fg %<ジョブID> 
```

#bg
- **ジョブをバックグラウンドにするコマンド** 語源 : `background`
 - 長時間かかる処理をバックグラウンドで実行することでコマンドが終了するのを待たなくても良くなる

```shell
# 構文
bg %<ジョブID>

# 始めからバックグラウンドで実行する場合
$ <コマンド> &
```

##停止コマンド

```shell
Ctrl + z
```

#kill
- **ジョブやプロセスを終了させるコマンド** 語源 : `kill process`
 - **停止中**や**バックグラウンドのジョブ**で使用 
 - **フォアグラウンドのジョブ**は`Ctrl + c`で終了できる

```shell
# 構文
$ kill [オプション] %<ジョブID>
$ kill [オプション] %<プロセスID>
```

- **補足**
 - 正確には、`kill`コマンドはシグナルを送信するコマンド
 
```shell
# 構文
$ kill -<シグナル名> <プロセスID>

# デフォルトではTERMという終了を指示するシグナルを送信している
$ kill -TERM <プロセスID>
# 省略可
$ kill <プロセスID>

# 強制終了するシグナル（非推奨）
$ kill -SIGKILL <プロセスID>
# 数値が割り当てられており、「-9」に置き換えても実行できる
$ kill -9 <プロセスID> 
```

##参考教材

https://www.udemy.com/course/unscared_linux/
Linux パーミッションの基本的知識 （読み方・指定方法・コマンド一覧）

#パーミッションとは
**ファイルやディレクトリを「誰がどのように操作できるか」を定めた権限のこと**

#ファイルのオーナーとグループ
**ファイルには全てのオーナー（所有者）とグループ（所有グループ）が設定されており、権限管理されている**

- **詳細**
 - **前提**：`Liunxではユーザーごとにアカウントを発行する`
 - **オーナー**：`ファイルの所有者`
 - **グループ**：`ファイルの所有グループ`
 - ユーザーをグループに所属させ、グループに権限を与えることで複数ユーザーの権限を一括管理することができる

```shell
# 具体例
$ ls -l /bin/less
# 出力結果
 -rwxr-xr-x 1 root root 158240 11月 18 2021 /bin/less
```

###出力結果の概要

- `-`   : **ファイルタイプ**
- `rwx` : **オーナーのパーミッション**
- `r-x` : **グループのパーミッション**
- `r-x` : **その他ユーザーのパーミッション**
- `1` : **ハードリンク数**
- `root` : **オーナー名**
- `root` : **グループ名**
- `158240` : **バイトサイズ**
- `11月 18 2021` : **タイムスタンプ**
- `/bin/less` : **ファイル名**

###パーミッションの記号

| 記号 | 内容 |
|:-:|:-:|
| r  | read（読み込み）  |
| w  | write（書き込み）  |
| x  | execute（実行）  |

###rwxr-xr-xの場合の権限

| 対象 | 読み込み | 書き込み | 実行 |
|:-:|:-:|:-:|:-:|
| オーナー  | ○  |  ○ |  ○ |
| グループに属するユーザー  |  ○ |  × |  ○ |
| その他ユーザー  |  ○ | ×  |  ○ |

#chmod
**ファイルやディレクトリのパーミッションを設定するコマンド**

###記号での指定（相対指定）

| 記号 | 内容 | 記号 | 内容 |
|:-:|:-:|:-:|:-:|
| u  | 所有者の権限  | +  | 権限の追加  |
| g  | グループの権限  | -  | 権限の削除  |
| o  | その他ユーザーの権限  | =  | 記述した権限にする  |
| a  | 全ユーザーの権限  |   |   |

```shell
# 構文
$ chmod [ugoa] [+-=] [rwx] <ファイル名> # [ ]内は、どれか一文字を指定

# 所有者に対して読み取り権限を追加する場合
$ chmod u+r <ファイル名>
```

###数値での指定（絶対指定）
**記号を数値に置き換えて指定することも可能**

| パーミッション | 数値 | オーナー | グループ | その他 |
|:-:|:-:|:-:|:-:|:-:|
| r（読み取り）  | 4  |  rwx | r-x  |  r-x |
| w（書き込み）  | 2  | 4 + 2 + 1  | 4 + 1  | 4 + 1  |
| x（実行）  | 1  | 7  | 5  |  5 |

```shell
# 構文
$ chmod <8進数の数値>　<ファイル名>

# オーナー以外書き込みができないよう指定する場合
$ chmod 755 <ファイル名>
```

#sudo（スドゥー）
**管理者権限を持つ特別なユーザーとしてコマンドを実行できるコマンド** 語源 ： `switch user and do`

- **背景**
 - システムの根幹に関わる作業が誰にもできると危険
 - そのため、システムの根幹に関わる作業は**スーパーユーザー（root）**だけができるようにする

```shell
# 構文
$ sudo <コマンド>

# / の直下にstorageディレクトリを作成する場合（ルートディレクトリ直下の作成は、通常はエラーになる）
$ sudo mkdir/storage
```

#yum
**パッケージのインストールするときに使用するコマンド**

:::note alert
パッケージのインストールは、管理者権限がないと実行できない
:::

```shell
# 構文
$ yum install <パッケージ名>

# パッケージ（git）をインストールする場合
$ sudo yum install git

# パッケージ（git）をアンインストールする場合
$ sudo yum remove git
```

##参考教材

https://www.udemy.com/course/unscared_linux/
Linux 標準入出力 コマンド一覧

#標準入出力とは
- **標準入力**
 - プログラムの標準の出力
 - キーボードが通常使われる
- **標準出力**
 - プログラムの標準の出力
 - ディスプレイが通常使われる
- **標準エラー出力**
 - プログラムのエラーメッセージの出力
 - ディスプレイが通常使われる

:::note
Linuxではコマンドの入出力先を抽象化することで、入出力先を柔軟に変更できる
:::

#【>】 リダイレクト
**入出力先を変更する機能**

- **入力のリダイレクト**
 - キーボードの代わりにファイルから入力する機能
 - 同じ入力を頻繁する場合、入力する情報をファイルにまとめておき、リダイレクトすることで入力が楽になり、ミスも少なくなる

```shell
# /etc/hostsファイルを入力元にして`cat`コマンドを実行
$ cat < /etc/hosts
# 実行結果
1 127.0.0.1 localhost
2 ::1      localhost6
```

- **出力のリダイレクト**
 - コマンドの実行結果を画面に表示するのではなく**ファイルに保存**する機能

```shell
# lsコマンドの出力先をls.txtにして保存
$ ls > output.txt
$ cat > output.txt
# 出力結果
ダウンロード　 ドキュメイント
```

- **標準入出力の数値**
 -  OSが識別するために用いる識別子

| 入出力 | 数値 |
|:-:|:-:|
| 標準入力  | 0  |
| 標準出力  | 1  |
| 標準エラー出力  | 2  |

- **エラー入力のリダイレクト**
 -  エラー結果を画像に表示するのではなくファイルに保存する機能
 -  **出力**と**エラー出力**は別で、エラー出力は`「2>」`を使用

```shell
$ ls /hoge 2> error.txt
$ cat error.txt
# 出力結果
ls: /hogeにアクセスできません:
```

- **出力とエラー出力をまとめる**
 - 出力をリダイレクトした後に`「2>&1」`と記述する

```shell
# 標準エラー出力を標準出力と一緒にする場合
$ ls / /hoge > output.txt 2>&1
$ cat output.txt
# 出力結果
ls: /hogeにアクセスできません: # 「　/hoge　」 の結果
bon boot dev etc home lib # 「　/ 」　の結果
```

- **リダイレクトで追記する**
 - `「>」`でリダイレクト指定するとファイルを**上書き**する
 - `「>>」`でリダイレクト指定するとファイルに**追記**する

```shell
# output.txtファイルに「Hello！」という文字列を追加する場合
$ echo Hello! >> output.txt
```

:::note
echo・・・画面に文字列を表示する時に使用するコマンド
:::

#/dev/null
**入力先として指定しても何も返さず、出力先として指定してもデータは消えて何も表示されないスペシャルファイルのこと**

- **入力先として指定**
 - 入力が何もない状態になる
 - コマンドのテストなどで入力を空にしたい時に使用する
- **出力先として指定**
 - 結果が何も表示されない
 - 結果が大量にあり、結果を非表示にしたい時に使用する

```shell
# 入力先として指定した場合
$ cat < /dev/null
# 出力結果
$ # 何も表示されない

# 出力先として指定した場合
$ ls / > /dev/null
# 出力先として指定
$ # 何も表示されない

# エラーの出力結果を非表示にする場合
$ ls /hoge 2> /dev/null
```

#【 | 】パイプライン
- **複数のコマンドを連携させる機能**
 - コマンドの標準出力を別のコマンドの標準入力につなげる

```shell
# 構文
コマンド | コマンド

# binディレクトリ配下の大量ファイルをスクロール表示で確認する場合
$ ls /bin | less

# 「systemd」という文字列に絞り込んで表示させる場合
$ ls /bin | grep systemd
```

#pbcopy（mac限定）
**標準入力の内容をクリップボードにコピーするコマンド**

```shell
# 「 hoge 」という文字をコピー
$ echo hoge | pbcopy
```

- **例）公開鍵の内容をコピーする場合**

```shell:.ssh
# GitHubに公開鍵を追加する際にコマンドを使用
$ pbcopy < id_rsa_github.pub
```

#pbpaste（mac限定）

- **クリップボードの内容を標準出力に書き出すコマンド** 

```shell
$ pbpaste

# 出力結果
# hoge
```

##参考教材

https://www.udemy.com/course/unscared_linux/
Web ページを手っ取り早く PWA 化してインストール可能にする

Web ページをアプリとしてインストール (ホーム画面に追加) できるようにするまでの、イージーモードな手順です。

## アイコン画像を用意する

アイコン画像は、複数のバリエーションを用意することもできますが、「`144x144` 以上の `png` １枚」が最低限必要です。

## manifest.json を用意する

PWA には、アプリケーションの情報をおさめた `manifest.json` が必須です。最低限の内容はこんな感じになります：

```json
{
  "name": "<アプリ名>",
  "short_name": "<短いアプリ名>",
  "icons": [{
    "src": "icon.png",
    "sizes": "144x144",
    "type": "image/png"
  }],
  "start_url": "/",
  "display": "fullscreen"
}
```

`display` は必須ではありませんが、設定しないと普通にブラウザ画面で表示されてしまってアプリ感が出ません。

## サービスワーカーを生成する

サービスワーカーは主にアプリをキャッシュして、オフライン時でも動くようにするためのプログラムです (その他、プッシュ通知のやりとりとかもろもろのバックグラウンド処理をやらせることもできます)。

Web ページの PWA 化には必須ですが、最低限のものは `workbox` という CLI ツールで生成できるのでここでは自動生成してしまいます。

`workbox` をインストールして、

```
npm install workbox-cli
```

ウィザードで設定ファイルを生成します。

```
npx workbox wizard
```

キャッシュしたいファイル形式にチェックを入れたりするだけで設定ファイル `workbox-config.js` が生えます。

設定ファイルを用意したら `generateSW` コマンドで実際のサービスワーカーを生成できます。

```
npx workbox generateSW workbox-config.js
```

デフォルト設定だと `sw.js` という名前で生成されると思います。

`sw.js` にはキャッシュすべきファイル名がベタ書きされているので、アプリの構成が変わった時は更新する必要があります。

`husky` や GitHub Actions などで push するたびに自動更新するようにしておくと便利かもしれません。

## manifest.json とサービスワーカーを読み込む

最後に、 PWA 化したい Web ページで `manifest.json` とサービスワーカーを読み込みます。

```html
<link rel="manifest" href="manifest.json">
<script>
  if ("serviceWorker" in navigator) {
    navigator.serviceWorker.register("sw.js");
  }
</script>
```

## 動作確認とトラブルシュート

PWA の動作確認には Web サーバー (https または localhost) が必要です。適当に Web サーバーを立ち上げて、ページを開いてみてください。

僕はエディタから簡易 Web サーバーを立ち上げられるようにしています (https://github.com/skeeto/emacs-web-server)。

![スクリーンショット 2021-11-20 18.02.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54240/2203e57a-4cb1-6379-a7da-93f613ab5308.png)

URL 欄にインストールボタンが出ていれば無事動いています。

インストールボタンが出ない場合は、デベロッパーツールの `Application` タブを開くと、サービスワーカーの動作状況や `manifest.json`　の問題を見ることができます。

![スクリーンショット 2021-11-20 18.05.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54240/15109f4f-6ff0-fec2-f163-3f111ccc14c9.png)

「アイコンの画像サイズが `144x144` になってないよ」とかで怒られてるケースが多いと思います。

## おまけ：インストールを促す

アプリがインストール可能な状態になると `beforeinstallprompt` イベントが発行されるので、これにフックすると独自のダイアログでインストールを促すことができます。

```js
let installEvt;
window.addEventListener('beforeinstallprompt', (e) => {
  installEvt = e;
  e.preventDefault();
  showInstallDialog();
});
```

このとき、イベントのオブジェクトを保存 (`installEvt`) しておくと、後で `.prompt` メソッドを呼ぶことで実際にインストールさせることもできます (`prompt` の名前の通り、ユーザーはキャンセルすることもできます)。

```js
installButton.onclick = () => installEvt.prompt();
```
LibreOffice Calc VBAでasciiart

#手順

新しいLibreOffice Calcファイルを用意します。
名前はtest.odsとします。

Alt+F11キーでBasicマクロダイアログが現れます。
（ツール → マクロ → マクロの管理 → Basic）

マクロの記録先からtest.odsを選択し、新規作成ボタンをクリックすると新しいモジュールダイアログが現れます。
名前はModule1とします。

LibreOffice Basicウィンドウが現れるので以下のソースをコピペします。

```vb
' asciiart LibreOffice Calc VBA
Option VBASupport 1

Sub Main
	Range(Columns(1), Columns(80)).ColumnWidth = 1
	For r = 1 To 25
		For c = 1 To 79
			Cells(r, c).Value = mandel(c - 40, r - 13)
		Next
	Next
	Cells.Font.Name = "Courier New"
End Sub

Function mandel(x, y)
	ca = x * 0.0458
	cb = y * 0.08333
	a = ca
	b = cb
	s = " "
	For i = 0 To 15
		t = a * a - b * b + ca
		b = 2 * a * b + cb
		a = t
		If (a * a + b * b) > 4 Then
			s = Hex(i)
			Exit For
		End If
	Next
	mandel = s
End Function
```

Sub Mainにカーソルを移動し実行（F5キー）します。
![vba.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257554/1eff1409-a4a8-33a7-0317-e4f9da1cd467.png)
セルに以下の関数を入力して利用することもできます。

```
=mandel(cell("col") - 40, cell("row") - 13)
```
C#で楽しいゲーム作り講座　あたり判定編

こちら数学？が主な内容となっております。そして死ぬほど間違っております。まあまああっていると思うのでご参考程度にお願いします。そして2Dゲームを想定しています。

:::note warn
特にあたり判定とかについて調べたわけでもなく、私の試行錯誤で作ったものだらけです。こんな記事読まずにSIV3Dの物理を参考にしましょう。
:::
#必要な条件
あたり判定といってもただ当たったというのがわかるだけでは足りません。どこに当たって、その法線ベクトルはどれかなどがわからないと物理的な動きをさせられないです。
・当たっていることがわかる
・どの場所で当たったかわかる
・高速で物体が動いているときもすり抜けないようにする
以上の条件が必要です。

#当たっていることがわかる
基本的には全ての物体は辺の集まりでできています。なので辺と辺が交差していたら当たっているとみなしてよいはずです。
辺と辺が交差しているか調べる式はこの通りです

```C#:kousaman.cs
float ax1,ay1,ax2,ay2;
float bx1,by1,bx2,by2;

double c1=(ax2-ax1)*(by1-ay1) - (ay2-ay1)*(bx1-ax1);
double c2=(ax2-ax1)*(by2-ay1) - (ay2-ay1)*(bx2-ax1);
double c3=(bx2-bx1)*(ay1-by1) - (by2-by1)*(ax1-bx1);
double c2=(bx2-bx1)*(ay2-by1) - (by2-by1)*(ax2-bx1);

if(c1*c2<0&&c3*c4<0)
{
 Console.WriteLine("kousa!!");
}
```

これで線の交差を判定できますね♡
[詳しくは](https://qiita.com/zu_rin/items/e04fdec4e3dec6072104)

![atari1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2295239/95bbe267-6bfc-ce1f-9979-fa624a39e465.png)


さらに、小さい図形が大きい図形にすっぽり収まってしまったときのことを考えると、領域内に点があるかどうか判定する関数も必要です。これは図形ごとに違います。円であれば簡単ですが多角形は回転角度を考慮しなければならないためちょっとめんどくさいです。
円は頂点がありませんが適当に円周を分割して頂点としちゃいましょう。

この二つがあれば特定の図形二つがぶつかっているか否かを判定できます。

#どの場所で当たったかわかる
物理的な動きをさせるためには当たった個所の面を特定する必要があります。
厳密なシミュレーションは不可能なので1フレーム前の位置関係からどの辺にぶつかったかを特定しましょう。多分これでまあまあうまくいきます。
なのでこんなメソッドを作ります。これは四角形の場合ですね。

```C#:Rectangle.cs
public override double gethosen(float px, float py)
        {
            float dx = px - gettx();
            float dy = py - getty();
            //これで回転も含めて相対座標に変える
            double ddx = dx * Math.Cos(-rad) - dy * Math.Sin(-rad);
            double ddy = dx * Math.Sin(-rad) + dy * Math.Cos(-rad);

            double b = Math.Atan2(h, w);
            double a = Math.Atan2(ddy, ddx);
            double res ;
            //後は角度によって4つに場合分けする。回転を足すのを忘れずに
            if (-b <= a && a <= b) res= rad;
            else if (b <= a && a <= Math.PI - b) res= Math.PI / 2 + rad;
            else if(-Math.PI + b <= a && a <= -b) res= -Math.PI / 2 + rad;
            else res=  Math.PI+rad;
            return Math.Atan2(Math.Sin(res), Math.Cos(res));
        }
```

そして次のイメージで移動する距離を決めます。
![atari2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2295239/14fd448b-28f2-818d-e148-cd5551cbe0fa.png)

下手ですが十字の交わるところが四角形に中心だと思ってください。
橙は法線ベクトルで標準化した点の中で最も中心との差が小さい(-負の距離も含む)点で求められます。すいません国語力がないのでまとめに言葉で説明できません。
青の求め方は簡単ですね。
後は橙+青に中心を移動させればよいのです。しかしこれにも問題があります。
![atari3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2295239/1565ef61-6cd4-0bcb-b076-eb4143da6a05.png)

こういう場合判定をしてしまうと瞬間移動したみたいになってしまいますので

![atari4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2295239/0f5d2a05-2f26-cb9f-f710-f3c7cba62b1a.png)

こう、基準となる図形を変えればいい感じになります。なので移動距離が小さい方を採用するとまあまあうまくいきます。
#高速で物体が動いているときもすり抜けないようにする
物体が高速移動するとすり抜けてしまうのでそれを防止するためにこんなイメージでやりましょう。

![atari5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2295239/a18dbc1d-8740-5a66-a8b8-f81c06ae5a51.png)
一フレーム前の図形の頂点と新しく線分を作り、その線分で判断すれば割とどうにかなります。多分線が交差しないパターンは全部点が含まれるパターンでカバーできると思います

#最後に
あたり判定を厳密にやろうとすればするほど重くなっていきます。なので自分のゲームに最適なあたり判定の程度にしましょう。
mosquitto 2xでローカルでしか通信できず、設定追加が必要

mosquitto 2xの以下
mosquitto-2.0.13-install-windows-x64.exe
を使用したら、ローカルでしか通信できながった現象。

mosquitto.conf へ

以下

```conf:(mosquitto.conf)
listener 1883
allow_anonymous true
```

を追加し、その後以下のように起動

```bat
>mosquitto -c mosquitto.conf
```

したら動作するようになった。

参考
https://www.fixes.pub/program/308070.html
ローコードで勤怠アプリを作る〜備忘録〜

##はじめに

https://zenn.dev/gaomar/books/385c1178d6efbb/viewer

こちらを参考にしています。
AppSheetの仕様変更に伴い、上記サイト通りに行かなかった部分について、備忘録的に記載します。

##変更点

`4-6. AppSheet側の設定`から仕様が変わっています。

`Automation`
`New Bot`でBot名を決める
`Configure Event`＞`Create a custom event`
処理したいEvent Typeを選択する
`Add a step`＞`Create a custom step`＞`Run a task`下方のボックスをクリック＞`New Task`＞`Call a webhook`を選択

##Tips(enebularでのデバックの方法)
■`共通`の`inject`をフローに出すと「タイムスタンプ」となり、連結してボタンを押すとデバックができるようになる。
■`共通`の`debug`をフローに出して、連結しておくと、`デプロイ`ボタン下方の「虫マーク」で実行結果が得られる。


#####うまくいかない点は適宜修正します。
##それぞれのマニュアル
■AppSheet

https://step-up-appli.com/appsheet/options%e3%82%aa%e3%83%97%e3%82%b7%e3%83%a7%e3%83%b3/

■enebular

https://docs.enebular.com/ja/getstarted/introduction