OmniAICreator/Qiita-1.07M huggingface dataset:
Asciidoctor Maven Pluginを使って良い感じにPlantUML図をHTMLファイルに埋め込む

### この記事のゴール
・Asciidoctor Maven Pluginを使って良い感じにPlantUML図をHTMLファイルに埋め込む。

---
### 作業の流れ
1. プロジェクトフォルダ作成（所要時間：10秒）
2. pom.xmlの設定（所要時間：30秒）
3. adoc形式ファイル作成（所要時間：30秒）
4. ビルド【adoc形式ファイル → HTMLファイルに変換】（所要時間：30秒）

---
#### 作業1：プロジェクトフォルダ作成

・フォルダ「asciidoc-practice」作成

---
#### 作業2：pom.xmlの設定

・asciidoc-practiceフォルダ配下にpom.xml作成
・下記をpom.xmlにコピペ

```
<project xmlns="http://maven.apache.org/POM/4.0.0"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.asciidoc.practice</groupId>
  <artifactId>asciidoc-practice</artifactId>
  <packaging>jar</packaging>
  <version>1.0-SNAPSHOT</version>
  <name>asciidoc-practice</name>
  <url>http://maven.apache.org</url>

  <build>
    <plugins>
      <plugin>
        <groupId>org.asciidoctor</groupId>
        <artifactId>asciidoctor-maven-plugin</artifactId>
        <version>2.1.0</version>
        <!-- process-asciidocゴールはどのフェーズにも紐づいてないので、
            generate-resourcesフェーズに紐づけて、ビルド時にこのフェーズを指定して実行する -->
        <executions>
          <execution>
            <id>asciidoc-to-html</id>
            <phase>generate-resources</phase>
            <goals>
              <goal>process-asciidoc</goal>
            </goals>
          </execution>
        </executions>

        <!-- PlantUML図をadoc形式ファイル内に埋め込むための依存追加 -->
        <dependencies>
          <dependency>
            <groupId>org.asciidoctor</groupId>
            <artifactId>asciidoctorj-diagram</artifactId>
            <version>2.1.2</version>
          </dependency>
        </dependencies>

        <configuration>
          <!-- PlantUMLのやつ -->
          <requires>
            <require>asciidoctor-diagram</require>
          </requires>
        </configuration>

      </plugin>
    </plugins>
  </build>
</project>

```

---
#### 作業3：adoc形式ファイル作成
・下記フォルダ構成でindex.adocを作成する

　asciidoc-practice/src/docs/asciidoc/index.adoc

・index.adocに下記をコピペする（私が個人学習用に作成したやつ）

```
[plantuml]
----

left to right direction
skinparam linetype ortho

actor User

rectangle AWS {

    rectangle Amplify {
        [Frontend] as front
    }

    rectangle VPC1 {
        rectangle ECS {
            [Backend] as back
        }
    }

    rectangle VPC2 {
        database RDS as db {

        }
        [踏み台] as js
    }

}

actor Developer

User --> front : HTTPS
User --> back : HTTPS
back --> db : JDBC
Developer --> js : SSH PortForward

----
```

---
#### 作業4：ビルド(adoc形式ファイル → HTMLファイルに変換)
・asciidoc-practice配下で下記コマンド実行

```
mvn generate-resources
```
・asciidoc-practice/target/generated-docs配下に「index.html」が作成されていることを確認
・下記のような図が表示されていることを確認

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653955/75ee31e4-632b-c877-2e42-09c8dbd01f81.png)

---
### 参考
https://github.com/asciidoctor/asciidoctor-maven-plugin

https://docs.asciidoctor.org/maven-tools/latest/plugin/introduction/
Nuxtでスマホアプリのようにsplash screenを表示させる方法

#こんな感じ
![gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/a7e6b185-6bb3-bccc-ff75-b8abcdf22191.gif)

#はじめに
Nuxtで作ったwebアプリで、スマホアプリのsplash screen（👇のような起動時に表示される画像）を表示させたいと思いました。
![splash-screen-1-860x400.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/7483bb56-a9aa-fc67-81ce-63356c3be46e.png)

よくあるローディング画面とは違って、必ず指定した秒数だけ表示させるようにしたかったので色々と調べた結果をここに記録します！！

#splash screen用の画面
最初の画面が表示される前に、ふんわりとロゴが表示されます。

```vue:components/LoadingScreen.vue
<template>
  <div :class="{ loader: true, fadeout: !isLoading }">
    <div class="page-container">
      <img class="splash" src="@/assets/images/Logo.png" />
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
export default Vue.extend({
  name: "LoadingScreen",
  props: ["isLoading"],
});
</script>

<style scoped>
.page-container {
    max-width: 500px;
    width: 100%;
    margin: auto;
}

.loader {
  background-color: #ffffff;
  bottom: 0;
  color: white;
  display: flex;
  align-items: center;
  text-align: center;
  left: 0;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 0;
}

.splash {
  width: 150px;
}

.fadeout {
  animation: fadeout 2s forwards;
}

@keyframes fadeout {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
</style>
```

#LoadingScreen.vueを一番最初に表示させる
Nuxtで一番上の階層？にある`default.vue`を編集。
**これで`index.vue`が読み込まれる前にsplash screenっぽい感じで、ロゴ画像をふんわりと表示させることに成功しました！**

```vue:layouts/default.vue
<template>
  <div>
    <LoadingScreen :isLoading="isLoading" />
    <transition name="fade" v-if="!isLoading">
      <Nuxt />
    </transition>
  </div>
</template>

<script>
const LoadingScreen = () => import("../components/LoadingScreen.vue");
export default {
  components: {
    LoadingScreen,
  },
  data() {
    return {
      isLoading: true,
    };
  },
  mounted() {
    setTimeout(() => {
      this.isLoading = false;
    }, 1000);
  },
};
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
    transition: opacity 1s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
}
</style>
```


#参考

https://stackoverflow.com/questions/54356211/how-do-i-create-a-splash-screen-in-vuejs
外部ドメインのメールをすべてGmailで操作したい


Gmailで外部ドメインのメールが送信・受信できるらしい。
設定方法は検索すればヒットするが、その仕組みがよく分からなかった。

##外部ドメインを利用できる仕組み

**Gmailから外部ドメインを送信元にしてメールを送信**
外部ドメインのメールサーバを経由して送信する。
サブミッションポート（587）、SMTP-AUTH（ID&PW認証）。

**Gmailで外部ドメインのメールを受信**
Mail Fetcherという機能を利用する。
Gmailのメールサーバをあたかもpop3メールクライアントとして見立て、外部ドメインのメールサーバからメールを取得する。このとき、popで取得したメールを元のメールサーバに残しておくこともできる。
Gmailのメールサーバの容量は一般アカウントで15GBまで。


#参考資料
ITmedia　Gmailで差出人を別のメールアドレスに変更して送信する
https://www.atmarkit.co.jp/ait/articles/1405/14/news015.html

ITmedia　Gmailでメールを集約・一元管理する（受信編）
https://www.atmarkit.co.jp/ait/articles/1401/29/news073.html
AWSアカウントにMFAで入れなくなった時の対応


## Google Authenticatorが初期化された・・・
それまで問題なく使えていたのですが、ある日突然初期化されちゃいました。
引き継ぎもしていたのでどうしようもなかったのですが、自力でMFAを解除出来るとのことなのでやることにしました。
  
## 別の認証要素を使用したサインインで試みる
### メールと電話番号で解除してみる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483933/c8e8ff36-d2ce-4f72-71d2-4713aff5c803.png)
まずは[コンソール画面](https://aws.amazon.com/jp/console/)からルートユーザーからEメールアドレスとパスワードを入力して次へを押します

![MFA.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483933/cc0424f2-ca40-7f59-cb6d-d87194785028.jpeg)
MFAコードの入力画面に遷移するので、送信の下にある「MFAのトラブルシューティング」を押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483933/1189ef2d-1755-3be8-0974-ac5556ec75d4.png)
すると別の認証要素を利用したサインインに遷移します。  登録したEメールが表示されるので「確認Eメールの送信」を押すとこのような画面になります。

メールを確認すると届いているので、本文内にある「[Verify your email address」を押すと、電話番号の確認画面が出てきます。  
上手く行けば発信してくれるのですが、ここで何故か詰まったので、サポートに問い合わせをします。  
  
## サポートへの問い合わせ
### 必要項目の入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483933/43a16a33-ca7f-3945-0693-ebc055b46aa7.png)
画面に表示されている「AWSサポートにお問い合わせください。」を押すとこんな画面が表示されます。  
左の「I'm still having problems and would like to contact AWS Support.」を押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483933/b3c7724d-c16d-a2ec-7e67-d0c1f65a1075.png)
問い合わせに必要な項目を入力します。Support languageを日本語にしてSummitを押すと完了です。

### 電話での対応
数分するとサポートから電話がかかってきます。電話での確認は
 1. 登録しているアドレスを「アルファベットで」回答する
 2. 登録アドレス宛にワンタイムパスワードが送付されるので、その場で答える

でした。これでMFAが無効化されるので、コンソールのログイン画面でIDとパスワードを入力します。

## 無事ログインできました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483933/06b9db63-ae75-7c42-cddf-830696ccf30e.png)
コンソール画面からIAMのダッシュボードを確認するとMFAが無効化されているのがわかりますので、再設定をします。これで再度MFAが有効化できるようになりました。

日本語サポートが平日の9:00-18:00までなので、そこは注意したほうがいいですね。
 

## 参考
[MFA デバイスが故障または紛失した場合のセルフサービスによるリセットの方法](https://aws.amazon.com/jp/blogs/news/how-to-reset-mfa-token/)
DataFrameの中身を等間隔で取り出す

試験データ、例えば引張試験時の変位と荷重をとても細かいサンプリング間隔で取得してしまうと、その後のデータ処理やグラフ化する際にファイルサイズが大きすぎて扱いにくくなる場合があります。そこで、機械的に等間隔でデータを間引く方法をメモしておきます。

仮に、100行のデータを10分の1に間引きたいとします。まずは100行分のダミーデータをDataFrame型で作成します。

```python
import numpy as np
import pandas as pd

# データ作成
np.random.seed(seed=1)
df = pd.DataFrame(np.random.rand(100, 2),
                  columns=['displacement', 'load'])
```

つぎのようなデータができます。

```
    elongation      load
0     0.417022  0.720324
1     0.000114  0.302333
2     0.146756  0.092339
3     0.186260  0.345561
4     0.396767  0.538817
..         ...       ...
95    0.263297  0.065961
96    0.735066  0.772178
97    0.907816  0.931972
98    0.013952  0.234362
99    0.616778  0.949016

[100 rows x 2 columns]
```

DataFrameのインデックスラベルをスライス構文で指定することで、等間隔で行を取り出すことができます。

```python
# 一定間隔で取り出し
step = 10
df_selected = df.loc[::step]
```

ここで、「::」に続く数字が、取り出しのステップとなります。取り出し後のDataFrame（df_selected）の中身は以下のようになります。

```
    elongation      load
0     0.417022  0.720324
10    0.800745  0.968262
20    0.988861  0.748166
30    0.102334  0.414056
40    0.883306  0.623672
50    0.326645  0.527058
60    0.019880  0.026211
70    0.556240  0.136455
80    0.239848  0.493770
90    0.629718  0.210174
```

もともと100行あったものが、10行になりました。
【React】値の受け渡し　Propsとchildren

# はじめに
Reactでは、値の受け渡しにPropsがあります。そして、propsの特別な受け渡し方法としてchildrenがあります。Propsとchildrenについてまとめていきます。

## Props
下記のコードでは、Propsを使って、ColoredMessageコンポーネントに色とメッセージを受け渡しをしています。

```jsx:App.jsx
import { ColoredMessage } from "./components/ColoredMessage";

export const App = () => {

  return (
    <>
      <ColoredMessage color="blue" message="おげんきですか?" />
      <ColoredMessage color="pink" message="元気です！" />
    </>
  );
};
```

```jsx:ColoredMessage.jsx
export const ColoredMessage = (props) => {
  const contentStyle = {
    color: props.color,
    fontSize: "10px",
  };

  return <p style={contentStyle}>{props.message}</p>;
};

```

## children
下記のコードでは、```<ColoredMessage></ColoredMessage>```で囲んだコードをColoredMessageコンポーネントで、props.childrenで受け取ってます。

```jsx:App.jsx


import { ColoredMessage } from "./components/ColoredMessage";

export const App = () => {
  return (
    <>
      <ColoredMessage color="blue">おげんきですか?</ColoredMessage>
      <ColoredMessage color="pink">元気です！</ColoredMessage>
    </>
  );
};

```

```jsx:ColoredMessage.jsx
export const ColoredMessage = (props) => {
  const contentStyle = {
    color: props.color,
    fontSize: "20px",
  };

  return <p style={contentStyle}>{props.children}</p>;
};

```

### 分割代入を使うと短く書ける

```jsx:ColoredMessage.jsx
export const ColoredMessage = (props) => {
  const { color, children } = props; //propsの分割代入
  const contentStyle = {
    color, //propsを省略できる。そして、color:colorの省略記法が使える
    fontSize: "10px",
  };

  return <p style={contentStyle}>{children}</p>; //propsを省略できる
};

```
Windows10の標準OpenSSHのBad permission問題の解決方法

# 状況

- Powershellからsshしようとしても下記のエラーが出てしまう
- VSCodeのRemoteSSHのためにWSLからではなくWindowsから接続できるようにしておきたい

```
PS > ssh foo
Bad owner or permissions on C:\\Users\\MY_USER/.ssh/config
```

# 解決方法

- ファイルの置き場所は`C:Users\MY_USER\.ssh\`以下で良い
- その中のconfigやkeyのパーミッションをプロパティから変えること


パーミッションの変更方法は、

- Right click on file: Properties -> Security -> Advanced -> Disable Inheritance -> Remove all inherited permissions from this object
- 全パーミッションが消えるはずなので、自分のユーザのみ追加しフルコントロールを与える[(参考)](https://qiita.com/eltociear/items/02e8b1f5590b49eb9d87)
- Microsoft Accountを使用しており自分のユーザ名がわからない場合は、`netplwiz`を使用し、ユーザ名を特定する
arduinoでfft

#概要

arduinoでfftやってみた。

#参考にしたページ。

https://qiita.com/nori-dev-akg/items/680e7c96ccb80e1aff4c

#写真

![DSCN0546.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/410e5248-c46a-e10f-db54-cd3c840064c4.jpeg)



#サンプルコード

```
#include "fix_fft.h"
#include <Adafruit_GFX.h>
#include "Adafruit_TFTLCD.h"

#define LCD_CS				A3
#define LCD_CD				A2
#define LCD_WR				A1
#define LCD_RD				A0
#define LCD_RESET			A4
#define BLACK				0x0000
#define BLUE				0x001F
#define RED			 		0xF800
#define GREEN			 	0x07E0
#define CYAN				0x07FF
#define MAGENTA		 		0xF81F
#define YELLOW				0xFFE0
#define WHITE			 	0xFFFF

Adafruit_TFTLCD tft(LCD_CS, LCD_CD, LCD_WR, LCD_RD, LCD_RESET);

#define SAMPLING_FREQUENCY 		15000
#define TIME_FACTOR 			2
#define SCALE_FACTOR 			8
#ifdef LOG_OUTPUT
const float log_scale = 64. / log(64. / SCALE_FACTOR + 1.);
#endif
const float coeff = 1. / TIME_FACTOR;
const float anti_coeff = (TIME_FACTOR - 1.) / TIME_FACTOR;
const unsigned int sampling_period_us = round(1000000 * (2.0 / SAMPLING_FREQUENCY));
int8_t data[64],
	buff[32],
	peak[32];
unsigned long microseconds;
int summ,
	avg;
const char SPLASH_TITLE[] = "SPECTRUM SPEAKER\n @nori-dev-akg";
unsigned long t0;

void setup() {
	OSCCAL = 250;
	ADCSRA &= ~(bit(ADPS0) | bit(ADPS1) | bit(ADPS2));
	ADCSRA |= bit(ADPS2);
	ADCSRA |= bit(ADPS0);
	tft.reset();
	uint16_t identifier = 0x9341;
	tft.begin(identifier);
	tft.fillScreen(BLACK);
	tft.setTextColor(WHITE);
	tft.setTextSize(2);
	//tft.setRotation(3);
	t0 = millis();
};

void loop() {
	tft.fillScreen(BLACK);
	summ = 0;
	for (int i = 0; i < 64; i++)
	{
		microseconds = micros();
		int val = analogRead(A0);
   val = random(256);
		data[i] = (val >> 2) - 128;
		summ += data[i];
		while (micros() < (microseconds + sampling_period_us))
		{
		}
	}
	avg = summ / 64;
	for (int i = 0; i < 64; i++)
	{
		data[i] -= avg;
	}
	fix_fftr(data, 6, 0);
	int8_t reordered[32];
	for (int i = 0; i < 32; i++)
	{
		if (i % 2 != 0)
			reordered[i] = data[i / 2 + 16];
		else
			reordered[i] = data[i / 2];
	}
	for (int i = 0; i < 32; i++)
		data[i] = reordered[i];
	for (int count = 0; count < 32; count++)
	{
		if (data[count] < 0)
			data[count] = 0;
#ifdef LOG_OUTPUT
		else
			data[count] = log_scale * log((float) (data[count] + 1));
#else
		else
			data[count] *= SCALE_FACTOR;
#endif
		data[count] = (float) buff[count] * anti_coeff + (float) data[count] * coeff;
		buff[count] = data[count];
		if (data[count] > 63)
			data[count] = 63;
	}
	uint8_t x,
		y;
	int d;
	for (int i = 0; i < 32; i++)
	{
		d = data[i] / 2;
		x = i * 8;
		y = 200 - (d + 1) * 4;
		tft.fillRect(x, y, 7, 200 - y, WHITE);
		peak[i] = (peak[i] > y || peak[i] == 0) ? y : peak[i];
		//tft.drawLine(x, peak[i], x + 2, peak[i], RED);
	}
	unsigned long t = millis();
	if (t - t0 > 200)
	{
		for (int i = 0; i < 32; i++)
		{
			peak[i]++;
			if (peak[i] > 31)
				peak[i] = 31;
		}
		t0 = t;
	}
 delay(300);
}





```

以上。
JavaScriptでaddEventListener()を使う

#はじめに
JavaScriptでaddEventListener()を使った処理に詰まった。そこで、使い方のメモを自分用に残そうと思う。同じようなことに詰まった方の参考になれば嬉しい。

#やりたいこと
JavaScriptでサイトに挿入した動画が何割が再生されたかをリアルタイムで計算して出力したい。apiで動画が再生された、止まったなどの状態と長さ、現在の再生位置は取得できる。長さ、現在の再生位置から再生された割合を計算する。

#実現方法
addEventListenerとsetIntervalを用いた。apiで動画の状態を取得し、setIntervalを始め、計算した割合を出力する。動画の再生が完了したら処理を停止する。

#詰まったこと
addEventListner is not function エラーが出てしまっていた。下記の2つに書いた初歩的なミスが原因であった。jsに慣れていない人は同じように詰まる人がいるかも？
###①変数のスコープ
対象要素.addEventListener(イベントの種類, 関数)と書くのだが、対象要素がスコープ外にあってエラーが出ていた。

###②文法がミスっていた。
関数の書き方や閉じかっこが足りないなどしょうもないミスがちらほらありました。先ずは初歩的なミスをしていないかを確認、エディタの機能でくだらない文法エラーはしないようにしたい・・・
今後使うときにコピペで使うようにサンプルを貼っておく。

```js
document.addEventListener('DOMContentLoaded', function() {
    //var title = document.getElementById("title"); ← varは古いし、letのほうがよさそう
    let title = document.getElementById("title");
    title.textContent = "はじめまして";
});
```

#ひとこと
慣れていないapiを使っている時はそちらに気が向いており、初歩的なミスに気が付かないことがあった。自分がよくやるミスを覚えておくと気が付きやすいかもと思った。

#参考文献
田中 賢一郎. ゲームで学ぶJavaScript入門 HTML5&CSSも身につく！. 株式会社インプレス. Kindle 版.
ピアソンVUEオンライン試験ー合格したのにも関わらず試験中止にされた話

先程、ピアソンVUEでAZ-900を受験したのですが、、、
［試験終了］ボタンを押し、無事に画面に「合格」の文字と成績表が表示されました。
その下に認定の手続きが記載されていたので、メモを取りに行ったところ、突然チャットに

ピアソンVUE：「今、離席されましたが何かありましたか？」
私：「はい、試験に合格したので認定手続きをメモしようとしています」

すると、なんと！
ピアソンVUE「いかなる理由があろうとも試験中の離席は禁止です。試験を中止します！」

との事。。。いやいや、もう試験は終わってるし。と言うか、［試験終了]のボタンを押した時点で試験中の認識はありませんでした。

画面の一番下を見ると、もう１つ［試験終了］のボタンがあったので、押して良いか確認したところ、

ピアソンVUE：「いえ、こちらで試験を中止にします」

と言って、本当に中止にされてしまいました。
画面上、試験が終わっているのに試験中とは、同期が取れていないのにも程があるなぁなんて感じてしまいました。（しかもチャットで合格した旨も伝えているのに、あまりに厳しい。。。）

と言う事で、たぶん合格を無効にされる事はないと思いますが（と言いつつ、ちょっと心配ですが）、お陰で喜びが一気に吹っ飛びました。

やはり、他の方々も言われている様に、オンライン試験は始まったばかりなので、まだまだいろいろあるのでしょうけど、もうちょっとコミュニケーションをちゃんと取って欲しいですね。

オンライン試験にまだ慣れていない方は、お気をつけください。
arduinoでマンデルブロ

#概要

arduinoでマンデルブロやってみた。

#写真

![DSCN0545.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/bebd5331-6984-de6d-619d-59bd4502edef.jpeg)

#サンプルコード

```
#include <Adafruit_GFX.h>
#include "Adafruit_TFTLCD.h"

#define XP			  8
#define YP			  A3
#define XM			  A2
#define YM			  9
#define TS_MINX		 150 - 40
#define TS_MAXX		 920 - 40
#define TS_MINY		 120 - 40
#define TS_MAXY		 940 - 40
#define LCD_CS		  A3
#define LCD_CD		  A2
#define LCD_WR		  A1
#define LCD_RD		  A0
#define LCD_RESET	   A4
#define BLACK		   0x0000
#define BLUE			0x001F
#define RED			 0xF800
#define GREEN		   0x07E0
#define CYAN			0x07FF
#define MAGENTA		 0xF81F
#define YELLOW		  0xFFE0
#define WHITE		   0xFFFF
#define MINPRESSURE	 10
#define MAXPRESSURE	 1000

Adafruit_TFTLCD tft(LCD_CS, LCD_CD, LCD_WR, LCD_RD, LCD_RESET);

const int MAX = 256;
float cx, 
	cy;
float zoom = 1.0f;
void mandelbrot(float x1, float y1, float x2, float y2) {
	unsigned int i,
		j;
	uint16_t iter;
	uint16_t color;
	float sy = y2 - y1;
	float sx = x2 - x1;
	for(i = 0; i < tft.width(); i++) 
	{
		for(j = 0; j < tft.height(); j++) 
		{
			float cy = j * sy / tft.height() + y1;
			float cx = i * sx / tft.width() + x1;
			float x = 0.0f, 
				y = 0.0f, 
				xx = 0.0f, 
				yy = 0.0f;
			for(iter = 0; iter <= MAX && (xx + yy) < 4.0f; iter++) 
			{
				xx = x * x;
				yy = y * y;
				y = 2.0f * x * y + cy;
				x = xx - yy + cx;
			}
			color = ((iter << 7 & 0xF8) << 8) | ((iter << 4 & 0xFC) << 3) | (iter >> 3);
			tft.drawPixel(i, j, color);
		}
	}
}

void setup(void) {
	int i;
	tft.reset();
	uint16_t identifier = 0x9341;
	tft.begin(identifier);
	tft.fillScreen(BLACK);
	cx = -0.086f;
	cy = 0.55f;
}
void loop() { 
	mandelbrot(-2.0f * zoom + cx, -1.5f * zoom + cy, 2.0f * zoom + cx, 1.5f * zoom + cy);
	zoom *= 0.7f;
	if (zoom <= 0.00001f)
		zoom = 1.0f;
}


```

以上。
【CSRF・XSSとは その対策】

SPA開発をするにあたって、モノリスなアプリケーションと意識するところが違うためにCSRFとXSSへの理解を深める必要があるなーと感じたので、これら２つについて様々なサイトを参考にしながら自分なりのメモとしてまとめてみることにした。

##「XSS」

ユーザーがサイトにアクセスした際に不正なスクリプトが実行されてしまう攻撃手法や脆弱性のこと。

**・基本的な攻撃手法**

スクリプトを埋め込むことで、フォームなどに入力させたユーザー情報を奪い取る。
外部URLからユーザーに不正アクセスをさせて、cookieなどを送信させて奪い取ったり。

**・代表的な対策**

表示する文字を表示前にエスケープ処理するなど。

**XSSの3つの種類**

**・反射型XSS**

これは、外部から受け取ったパラメータをWebページに表示する際に起こる脆弱性だ。
嬉しいことに、ChromeやSafariなどのブラウザでは反射型XSSへの対策が進んでいるらしい。ただ、100%ではないので注意しないといけないようだ。
以下のサイトでは実際にセッションハイジャックの手順が紹介されており、試してみようと思う。

https://www.notion.so/CSRF-XSS-91676e27d74a4688872dd71077536a65#48abbce5807f448f877188a6beec6404

**・格納型/蓄積型/持続型XSS**

これは、DBに悪意のあるスクリプトが保存されてしまうことでそのDBにあるスクリプトを表示する際に悪意のあるスクリプトが毎回実行されてしまうタイプのXSSのことを指します。

ユーザーがアクセスするたびに実行されてしまうため、格納型/持続型と呼ばれます。

**・DOM-based XSS**

これは、ブラウザ側JavaScriptによって起こされる脆弱性のこと。

DOM-based XSSが厄介な理由1
近年のブラウザが用意している「レスポンス内の文字列でスクリプトが発生した場合XSSとみなす」という仕組みが、サーバーにリクエストがいかないDOM-based XSSの場合機能しないことが多い。

理由2
XSSによる被害が大きくなったとしても、ログが残らないがゆえに問題の把握がしにくいということ。

DOM-based XSS を防ぐために知っておきたいこと。
ソース→シンクの流れの中でスクリプトが実行されてしまうので、ソースかシンクとなるメソッドを知っておくと良さそう。
基本的にはDOM操作を適切に行うことを意識して行くべき。以下のページには具体例がある。

[https://gihyo.jp/dev/serial/01/javascript-security/0006?page=2](https://gihyo.jp/dev/serial/01/javascript-security/0006?page=2)

##「CSRF」

ユーザーが予期しないURLやオリジンからリクエストを送らされることで、ユーザーのデータが操作されてしまう攻撃手法のこと。

**・代表的な攻撃手法**

外部URLを介してForm入力を行い、POSTなどのリクエストを送るだけ。

**・対策**

リクエストが正しいルートからのものなのか検証をする。
具体的には、サーバー側がFormページ返却時にトークンを付与。次回リクエスト時にトークンを検証してユーザーの一致を確認するなど。

**モノリスなLaravelで対策を行う場合**

LaravelでのCSRF対策は、バックエンドから配布されたHTMLformとsessionにトークンを仕込み、formなどからリクエストがあった際にform内のトークンとsession内のトークンが一致するか確認することで行っている。

[Laravel 8.x CSRF保護](https://readouble.com/laravel/8.x/ja/csrf.html)

**SPAなLaravalで対策を行う場合**

`/sanctum/csrf-cookie` エンドポイントにリクエストを送信して、アプリケーションのCSRF保護を初期化（有効にして使える状態）する必要がある。
方法は2種類あり、トークンを生成する方法とCookieベースの認証を採用する方法である。

[Laravel 8.x Laravel Sanctum](https://readouble.com/laravel/8.x/ja/sanctum.html)

##「CSRFとCORSの関係」

SPAにおいてCORSは必要不可欠なものだが、CSRF対策はこのCORSを用いた2段階の壁を作ることで実施することができる。

CORSはサーバー側でアクセスを許可するオリジンを設定することで異なるオリジン間の通信を制限するというもの。

`Access-Control-Allow-Origin` というレスポンスヘッダを利用する。

これはあくまでもアクセス制限をしているだけでサーバーに対するアクセス自体は成功してしまう問題がある。

そこで、プリフライトリクエストを使用する。

これによってそもそもサーバー側にリクエストを届かなくできる。

（参照記事）

[SPA の CSRF 対策や CORS について検証する - 30歳からのプログラミング](https://numb86-tech.hatenablog.com/entry/2019/02/13/221458)

**・Preflight request (プリフライトリクエスト)**

> プリフライトリクエストは CORS のリクエストの一つであり、サーバーが CORS プロトコルを理解していて準備がされていることを、特定のメソッドとヘッダーを使用してチェックします。
> 

[Preflight request (プリフライトリクエスト) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN](https://developer.mozilla.org/ja/docs/Glossary/Preflight_request)

これは、OPTIONメソッドを使ったリクエストである。

> これは OPTIONS リクエストであり、 Access-Control-Request-Method,Access-Control-Request-Headers, Origin の3つの HTTP リクエストヘッダー使用します。
> 

OPTIONSメソッドによるリクエストが発生するというのが重要で、ここで許可されていないリクエストは排除されるため、上記のようにサーバー側に不正なリクエストが届くことがない。
これがプリフライトリクエストと呼ばれるものだ。

では、どうやって**Preflight request (プリフライトリクエスト)を発生させるか**だが、その方法はいろいろある。

・リクエストに独自ヘッダをつければ、必ず発生する。
axiosなどでは、application/jsonなどのヘッダがデフォルトでついていたような気がする。
arduinoでsin波

#概要

arduinoでsin波、やってみた。

#写真

![DSCN0544.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/e487ff24-1d79-37ad-f1a9-27961e761cdf.jpeg)


#サンプルコード

```
#include <Adafruit_GFX.h>
#include "Adafruit_TFTLCD.h"

#define XP			  	8
#define YP			  	A3
#define XM			  	A2
#define YM			  	9
#define LCD_CS		  	A3
#define LCD_CD		  	A2
#define LCD_WR		  	A1
#define LCD_RD		  	A0
#define LCD_RESET	  	A4
#define BLACK		  	0x0000
#define BLUE			0x001F
#define RED			 	0xF800
#define GREEN		   	0x07E0
#define CYAN			0x07FF
#define MAGENTA		 	0xF81F
#define YELLOW		  	0xFFE0
#define WHITE		   	0xFFFF

Adafruit_TFTLCD tft(LCD_CS, LCD_CD, LCD_WR, LCD_RD, LCD_RESET);

void setup(void) {
	int i;
	tft.reset();
	uint16_t identifier = 0x9341;
	tft.begin(identifier);
	tft.fillScreen(BLACK);
	tft.setTextColor(WHITE);
	tft.setTextSize(2);
  tft.setRotation(3); 
}
void loop() {
  tft.fillScreen(BLACK);
	int j = random(9) + 1;
	for (int i = 1; i < 318; i++)
	{
		tft.drawPixel(i, 119 + sin(((i * j) * 3.14) / 180) * 95, WHITE);
	}
	delay(1000);
	for (int i = 1; i < 318; i++)
	{
		tft.drawPixel(i, 119 + cos(((i * j) * 3.14) / 180) * 95, YELLOW);
	}
	delay(2000);
}






```




以上。
とりあえずたくさんの単語が欲しいときのプログラム

# 注意
オートコンプリートのAPIポリシー等を検索していみましたが、こういう使い方がいけないみたいな記述はみつけられませんでした、、が実行は自己責任でお願いします。
※正直自分が見つけられないだけかもしれません。

# こんな感じのもの
テストデータなんかを作るときに、とりあえず全角の単語が欲しい時に使用
コンソール上に単語がたくさん出ます(440くらい)
[こちらの方](https://yyhhyy.hatenablog.com/entry/2021/05/22/130000)のプログラムを半分以上流用していますm(_ _)m

# 環境
windows10
python3.9.4

# pip実行(以下パッケージが必要)
``` shell
python -m pip install requests
python -m pip install lxml
python -m pip install numpy
python -m pip install pandas
```

# ソース
``` python:test.py
import pprint
import requests
from lxml import etree
import numpy as np
import pandas as pd

qstrs = ["あ", "い", "う", "え", "お", "か", "き", "く", "け", "こ",
         "さ", "し", "す", "せ", "そ", "た", "ち", "つ", "て", "と",
         "な", "に", "ぬ", "ね", "の", "は", "ひ", "ふ", "へ", "ほ",
         "ま", "み", "む", "め", "も", "や", "ゆ", "よ",
         "ら", "り", "る", "れ", "ろ", "わ" ]

# 単語格納用
google_suglist = []

# ひらがな分ループ
for qstr in qstrs:

    # オートコンプリートのデータを取得する
    google_r = requests.get("https://www.google.com/complete/search",
                    params={'q':qstr,
                            'hl':'ja',
                            'ie':'utf_8',
                            'oe':'utf_8',
                            'output': 'toolbar'})

    google_root = etree.XML(google_r.text)

    google_sugs = google_root.xpath("//suggestion")
    google_sugstrs = [s.get("data") for s in google_sugs]

    for ss in google_sugstrs:
        google_suglist.append(ss)
        # print(ss)

# コンソール出力
for word in google_suglist:
    print(word)
```

# 実行（要らんでしょうが…）
``` shell
python test.py
```

# 最後に
ランダムで１文字生成してとかにすると、もうちょっと良いものになるかも、、
【最新2021年版】webpackでReact、TypeScriptの環境構築【脱初心者】

# 【最新2021年版】webpackでReact、TypeScriptの環境構築【脱初心者】

こんにちは。ゆうじろうです。
今日はwebpackを使ったReact、TypeScriptの環境構築を進めていきます。

では、何がともあれプロジェクトを作成しましょう。


```
mkdir sample-project
cd sample-project
```


作成したプロジェクトで、初期化

```
npm init -y
```
![npm init](//images.contentful.com/fzyvhfvt7qau/5cLxoTxwmzlb47cWL6n9w0/3168e73b3ffe89011b206126e4e041f4/____________________________2021-10-09_12.13.22.png)

上記のようにpackage.jsonができていればOKです。
Reactのプロジェクトなので、Reactをインストールしていきましょう。


```
npm install --save react react-dom
```

webpackを使用するので、同様にwebpackもインストール


```
npm install --save-dev @types/react-dom @types/webpack @types/webpack-dev-server ts-loader ts-node typescript webpack webpack-cli webpack-dev-server
```

次にwebpackの設定ファイルを作成しましょう。


```
touch webpack.config.ts
```

webpackの中身はこんな感じ。


```
import path from 'path';
import { Configuration } from 'webpack';

const config: Configuration = {
    context: path.join(__dirname, 'src'),
    entry: './index.tsx',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/assets',
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
            },
        ],
    },
    mode: "development",
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx'],
    },
    devtool: "inline-source-map",
    devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 3000,
  },
};

export default config;
```

次にTypeScriptの設定ファイルを作成します。


```
touch tsconfig.json
```


その中身がこちら



```
{
  "compilerOptions": {
    "sourceMap": true,
    "baseUrl": "./",
    "target": "es5",
    "strict": true,
    "module": "commonJs",
    "jsx": "react",
    "lib": [
      "ES5",
      "ES6",
      "DOM"
    ],
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
  }
}
```


次にエントリーファイルであるsrc/index.tsxを作成します。


```
mkdir src && touch src/index.tsx
```


index.tsxの中身がこちら。



```
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<h1>Hello World!</h1>, document.getElementById('app'));
```


次にhtmlファイルを作成していきます。



```
mkdir puclic && touch public/index.html
```


public/index.htmlの中身がこちら



```
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <div id="app"></div>
  <script src="/assets/bundle.js"></script>
</body>

</html>
```


ここまできたら、もう何も怖いものはありません。

webpackでbundleしてやりましょう！



```
npx webpack-dev-server
```


![webpack成功](//images.contentful.com/fzyvhfvt7qau/1tkE79TAu8exVmlDQZhef4/eb55f3771ebbe6cb3f0e1bc647aecaff/____________________________2021-10-09_12.30.45.png)

この表示になったら、
http://localhost:3000
にアクセスしてみましょう！

![Hello world](//images.contentful.com/fzyvhfvt7qau/4wBEl2LbIxRf5KOMGMqNkG/9239d684875a00484be5d5b98577f316/____________________________2021-10-09_12.32.01.png)

Hello worldと記述されていればOKです！

お疲れ様でした！

投稿者のサイトもあるから、是非遊びにきてね。

https://proaca.tech
【初学者奮闘録】Cookieを利用したカウンターの作り方（PHP）

###はじめに
この記事は、独学開始から約３ヶ月の実務未経験者が作成したものです。
よって、スキルは非常に未熟なため、決して本記事の内容を鵜呑みにされないよう、ご注意ください。
（未熟な私が記事投稿を行なっている背景については、本文の最後にお伝えします。）
また本記事は、PHP言語の基礎理解を目的としております。
よって、Webアプリ開発におけるルーティングなどについては考慮できておりませんので、ご容赦ください。

###本日の学習課題
今回はCookieを利用したカウンターの作成方法について、アウトプットします。
以下が、完成コードです。

```
function get_count(){

        if (isset($_COOKIE["count"])){
            $count = $_COOKIE["count"] + 1;
        }else{
            $count = 1;
        }

setcookie("count", $count, time() + 30);
}
```
上記のコードを実装してある私の自作WebサイトのURIを下記に貼り付けておきます。
興味のある方は、是非ご確認ください。
https://damp-earth-24115.herokuapp.com/count

※本記事を作成するため、PHP公式マニュアルを参考いたしました。
https://www.php.net/

###解説

これから、上記のコードがどのような流れでプログラムを実行していくかに重点を置いて解説します。

まずは、if文にセットされているisset関数です。
isset関数は、isset関数の引数にセットされている変数に値が入っているか否かをtrue・falseで判定する関数です。
今回のisset関数の引数には、＄_COOKIEという変数が入っているため、この変数に値が入っているかを判定しているということです。
（＄_COOKIEという変数はとても重要な変数ではありますが、後ほど解説いたします。）
isset関数の引数に値が入っていれば、trueと判断され、以下のコードへ移動します。

```
$count = $_COOKIE["count"] + 1;
```

もし値が入っていなければ、falseと判断され、elseへと条件分岐します。

一旦、＄_COOKIEには値が存在しなかったと仮定して、話を進めます。
つまり、elseへと条件分岐し、＄countには『1』が代入されます。
その後、以下のコードへ移動します。

```
setcookie("count", $count, time() + 30);
```

ここでCookieについて説明します。
Cookieとは、Webサーバーとブラウザの狭間で情報を一時的に保管する仕組みのことです。
setcookie関数は、そのCookieへと情報を送信するものです。
setcookie関数の第二引数で＄count（＝１）という情報がCookie内に一時保管され、第一引数で第二引数の情報に"count"という名前を命名します。
この第一・第二引数によって、Cookie内に「"count"という名前の情報（＄count（＝１））が一時保管された」ということになります。
続いてsetcookie関数の第三引数に、Cookie内に一時保管された"count"という名前の情報を何秒間保管し続けるのかについて、定義しております。
今回の場合、【time() + 30】と第三引数に記載されているため、３０秒間の保管としております。
つまり、setcookie関数の第一・第二引数でセットした情報は、セットが完了してから３０秒を超えると、消去されるということです。

setcookie関数によってCookie内に送られた情報の取り出すには、＄_COOKIEを使う必要があります。

＄_COOKIEは上記でもお伝えしましたが、ただの変数ではありません。
スーパーグローバル変数といい、PHP公式ホームページには、『スーパーグローバル変数とは、すべてのスコープで使用できる組み込みの変数』と記載されております。
スコープについて分かりやすい解説されている記事を下記に添付いたしました。
https://techacademy.jp/magazine/19302

＄_COOKIEの後に記載されている["count"]は、先ほどsetcookie関数の第一引数で定義した名前countを識別し、その値を自身に代入することができます。

＄_COOKIEに値が代入されている状態で、再度if文の内容を確認していきましょう。

```
        if (isset($_COOKIE["count"])){
            $count = $_COOKIE["count"] + 1;
        }else{
            $count = 1;
        }
```
＄_COOKIEに『１』がありますので、isset関数はtrueと判定し、【＄count = ＄_COOKIE["count"] + 1;】へ移動します。
＄countには、＄_COOKIE["count"]の１と、その後に記載さている『+1』で、『２』の値が代入されます。

＄countに『２』が代入された状態で、【setcookie("count", $count, time() + 30);】に移動し、先ほど説明した挙動になります。

setcookie関数の第三引数がタイムアップする前に情報を更新し続けられたなら、＄countは無限に数字を伸ばすということとなります。

以上、解説は終わります。

###最後に
上記でもお伝えいたしましたが、私は独学開始から約３ヶ月の実務未経験者です。
そんな未熟な私が記事を投稿しようと決意した理由は、以下の通りです。
・初学者の記事が多く出回るほどに、プログラミングの学習を検討している方の背中を押せると考えたから（私自身、学習を開始するまでに初学者の記事を読み漁っておりました）
・周りに同じ境遇の仲間がいない、孤独な初学者さんの競争心を掻き立てられるのではと考えたから（学習効率を上げるためにはライバルの存在は重要）
・あるいはこのような稚拙な記事を読んだ初学者さんが「自分のレベルはこいつよりも上」と優越感を与えられるのではと考えたから（学習効率を上げるためには自信を持つことも重要）

プロのエンジニア同様、初学者にもそれなりの努めがあると、私は思います。
今後も、下手くそながらも【初学者ページ】を上げ続けて参ります。

最後まで読んでいただき、誠にありがとうございました。
Salesforceでレコードのコピーボタンを作成する方法

Salesforceのオブジェクトには基本的にレコードをコピーするボタンが標準で備わっていますが、特定のオブジェクトでは実装されていません。
今回は取引先とToDoを例に後付でコピーボタンを作成する方法について説明します。

#取引先
①オブジェクトマネージャから取引先をクリック
②「ボタン、リンク、およびアクション」から「新規ボタンまたは新規リンク」をクリック
![スクリーンショット 2021-09-11 3.20.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2003505/337cce12-9209-36f4-724e-9a0198cb2951.png)
③任意のラベル、名前を記載し、表示の種類を「詳細ページボタン」動作を「現在のウィンドウにサイドバーおよびヘッダーなしで表示」エディター部分で「/{!Account.Id}/e?clone=1」と変更して保存
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2003505/32aa71fd-db4a-4d47-490b-32a6ed199cea.png)
④コピーボタンが作成されたので、このボタンをページレイアウトに設置します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2003505/f28a025f-c12d-d92d-1d3c-0816748e4a86.png)
⑤設置すると詳細ページにコピーボタンが配置され、レコードがコピーできるようになりました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2003505/eb2cb130-8713-ce32-e1bf-2995cf1bc79e.png)

#ToDo
ToDoでも同様にボタンを作成して配置するとコピーできるようになります（ToDoの場合はTask.Idであることに注意してください）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2003505/0d4d5dd0-03d3-f0ee-f17e-0fcff0afd03a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2003505/5239aa4e-4fcf-bada-a8a7-363168fcd13e.png)

簡単に作成できるので、業務で使う以外でも構築時のテストを行う際に作成しておくと便利かもしれませんね。
Raspberry Pi4 + USBメモリでNAS構築

# 背景

数多の先人たちの記録をたどって何とかできたので、自分も記録を残しておく。

iPadとWindowsPCのデータのやりとりにクラウドストレージを使うと、反映の待ち時間が長い。
PCのHDDを共有フォルダとして公開しても、PCの電源が落ちていたらアクセスできない。
LANからアクセスできるちょっとしたストレージが欲しい。
ラズパイでファイルサーバーが作れるっぽい。

色々試して出来てから思い出しながら書いてるので、抜け漏れなどによる再現性は保証できません。
あとまだ使ってないので、利便性は分かりません。

# 準備

- Raspberry Pi4
- USBメモリ

# 手順

## 1. USBメモリのフォーマット

FAT32でフォーマットする
普通にフォーマットする(ext4でフォーマットする)と、Windowsで読み込めないらしい。
https://qiita.com/hoshinom78/items/a6552e85423a52b21a2f#fat32-%E3%81%AE%E7%90%86%E7%94%B1
元々置いてるデータを直接コピーしたいのでこれに。

ただしFAT32だと後々面倒だったので、Windowsに刺さないならこれじゃなくて良いと思う。

1. USBメモリをRaspberry Piに刺す
1. 繋がってる場所を探す  
   `sudo fdisk -l`  
->だいたい`/dev/sda1`になってるはず
1. パーティションを作り直す  
`sudo fdisk /dev/sda1`  
パーティションの削除→`d`→１入れる  
パーティションの作成→`n`→`p`→`1`→`(空)`  
終了→`q`  
1. フォーマットする  
`sudo mkfs.vfat /dev/sda1`

http://www.openspc2.org/reibun/RaspberryPI/OS/Raspbian/file_manager/0503/index.html

https://note.com/hitoshiarakawa/n/n711633676e4f


## 2. USBメモリの自動マウント

共有フォルダにするのに、ディレクトリを指定する必要がある。
指し直したりする度に変わったら面倒なので対応。

1. usbmountをインストールする  
`sudo apt install usbmount -y`
1. サービスに登録する  
`sudo mkdir /etc/systemd/system/systemd-udevd.service.d`  
`sudo vim /etc/systemd/system/systemd-udevd.service.d/00-my-countflags.conf`  
以下を入力  

```
[Service]
PrivateMounts=no
```

##### マウントの設定をするために必要な情報を調べる

1. USBメモリのUUIDを調べる  
`sudo blkid /dev/sda1`
1. ユーザーIDとグループIDを調べる  
`id`

https://note.com/hitoshiarakawa/n/nac4a012e1b61

https://min117.hatenablog.com/entry/2021/01/02/233517

##### マウント情報を編集する

1. マウントしたいディレクトリを作る  
`mkdir /media/nas0`  
(ショートカットみたいになってる)
1. /etc/fstabを編集する  
`sudo vim /etc/fstab`  
並んでいるリストの末尾に以下を追加する  
`UUID="調べたUUID"　/media/nas0 vfat uid=1001,gid=1001,iocharset=utf8,umask=000 0 0`

vfatがFAT32でフォーマットしたデバイスと指定
FAT32だと書き込みが出来ないので、uidとgidを指定する必要がある
日本語の文字化けがあるので、charsetを指定

ここ書き込めるようにするのが面倒だった。

https://qiita.com/hoshinom78/items/a6552e85423a52b21a2f

## 3.共有フォルダの作成

1. sambaをインストールする  
`sudo apt-get install samba`  
→青背景の注意書きが出てきたら「いいえ」
1. 設定ファイルを書き換える  
`sudo vim /etc/samba/smb.conf`  
末尾に以下を追記  

```
[storage]
comment = "file storage"
path = /media/nas0
guest ok = no
writable = yes
force user = pi
```

1. sambaサービスを再起動する  
`sudo systemctl restart smbd`
1. sambaユーザーを作成する  
`sudo pdbedit -a pi`  
→パスワード指定  

WindowsPCのディレクトリにラズパイのIPアドレスを打ち込み、sambaのアカウントを入れたらアクセスできる…はず。

https://www.itmedia.co.jp/news/articles/2002/09/news012.html

https://qiita.com/Brutus/items/d3b3caee982852587b77

https://kowaza.blue/post-139/
ACID特性について整理する

# この記事は？
ACID特性についてなんなのか？ということについてあえてACID特性を損なった状況を考えることでより理解が深まるのではないかと思い、自分なりの整理のために記事にしてみました。
概念的な部分でもあるため損なった状況は一例ととらえてみていただけるとありがたいです。

# ACID特性とは？？
「**トランザクションが満たすべき4つの特性**」のことで「**原子性(Atomicity)**」「**一貫性(Consisytency)**」「**独立性(Isolation)**」「**耐久性(Durability)**」の4つの頭文字のACIDをとって「**ACID特性**」と呼ばれています。


# 原子性(Atomicity)
## 原子性(Atomicity)とは？？
トランザクションは必ず「**完全に終わる(COMMIT)**」か「**もとに戻す(ROLLBACK)**」のどちらかであること

## 損なうとどうなるの？？
注文書から注文テーブルと注文詳細テーブルに登録するトランザクションを例に考えます！ 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524088/e45d40ee-1c57-5ebd-31b5-736c9212bc3b.png)
このような状況になってしまうと注文はあるけどその詳細情報はない状況となってデータの不整合が発生してしまいます。


# 一貫性(Consisytency)
## 一貫性とは？
実行前と実行後で**データの整合性**を持ち一貫したデータであるということ

## 損なうとどうなるの？
会社からの給料振込のケースを例に考えます！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524088/75790f83-a536-d023-016d-d5a8393ff9e0.png)
このような状況ではトランザクションの前と後で会社の資金の合計と社員の預金の合計の合算が合わない状況となってしまいます。

# 独立性(Isolation)　または隔離性
## 独立性(Isolation)とは？？
複数のトランザクションは**独立して実行可能**であるということ

## 損なうとどうなるの？？
水道の引き落としと電気代の引き落としが同時に行われたケースで考えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524088/f65bf411-ffa0-a53e-08f3-128c27fd24c4.png)
本来①のトランザクションが終わった後に②のトランザクションは動くべきなのでこのように他のトランザクションに影響を与える処理が同時に実行されるような状況は防がなければいけません。


# 耐久性(Durability)　または永続性
## 耐久性(Durability)とは？？
一旦コミットしてしまったデータは、その後に障害があった場合でも回復できる必要があるということ

## 損なうとどうなるの？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524088/940fa4b0-4643-87e7-a933-2b2bb7ef8ef0.png)
純粋に壊れたらどうすることもできなくなってしまいますので困ってしまいます。
一度コミットが完了したデータには障害からの回復ができるようにする必要があります。


# 終わりに
損なう状況を考えると理解しやすいと思ったものの実際に考えてみるとあくまでも一例に過ぎないなと思いました。
特に一貫性については少し思うところもあり、もっと良い例が出せないものかと思ってもいます。
とはいえ、あくまでもイメージを持っておくことが重要だと思うので自分の理解する限りのイメージを書いてみました。
もっといい例があったりしたら教えていただけると幸いです！
RiftSのケーブル留め作ってみた

RiftSのケーブル留め作ってみました

モデルは[こちら](https://www.thingiverse.com/thing:4995432)

# はじめに
RiftSのケーブルをHMDに止めて置く部分って、何かケーブルに負担もかかる感じだったので3Dプリンター(Ender3 Pro)で印刷してみました。

![FBMA4kjVQAUJWFC.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96808/c73c5d8e-4303-73a7-5b44-5fad38d9b6e4.jpeg)

![FBMA4jvVcAIQehd.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96808/370788d5-e3cd-2b12-5507-a571a1b6807a.jpeg)

# モデリング
取り付け部分とケーブルの太さをはかって
勢いでモデリングします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96808/735ddd6d-8027-8222-bcd3-0fe03f2d636e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96808/862c50d1-e6ed-469e-c672-10a5ca6fc98a.png)

3Dプリントで穴が開いているとかチェックしたりstl出力するために
3D Print Toolboxを使います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96808/d65ed133-20a0-629a-b4f5-049014e1b3a9.png)

これを使う注意点としては、一度ファイルを保存しておかないとスクリプトでエラーが発生するようです。


あと、tinyCAD Mesh toolsを使うとショートカットでブーリアンが簡単にできるので
形を切り抜いたりするのに便利です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96808/a1f3a764-93c1-ccbd-3fa0-fe09663804d8.png)

モディファイアとかでもできるのですが、こっちだと、オブジェクトをシフトクリックで順に選択して、シフト+Ctrl+マイナス　とかで穴が開けられたりします。

たまにうまく機能しない場合は、mキーなどで頂点を整理したり、fキーで面を貼ったり、deleteで不要な頂点など融解したりなど、綺麗な形にしてあげると動いたりします。


# スライサー
Ultimaker Curaでスライスし、g-codeにします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96808/317d8e3e-5c78-9b66-c351-030482eef78e.png)

ここら辺の設定はプリンタやフィラメントの種類でちょっと変わってしまうかもですが、
ここでは速度優先で、インフィルなし、0.28mm
サポートもなくても問題ないかもです。（サポートつけると外すのに苦労する）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96808/38ab3c8f-0ac7-d80b-97de-30358e1d218e.png)

オーバーハングも極端な設定（８０度）とかですが、小さい
オブジェクトならそれほど問題ないです。（あまり距離の長いものとかだとだれてしまう）
モデリングするときに印刷可能な角度を意識しておくとよかったりします。

blenderの3D Print Toolboxでもチェックができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96808/4e2ea3c4-c86c-cc06-a847-ae3718c4cd5b.png)

Curaだとスライス後にプレビューでチェックができるので、おかしくなっているかを確認できたりもします。

あと、Curaにもっていくときに「スケールを適用」ってしておかないとサイズが違う感じで読まれてしまうようです。　もしちがっていたらCura上でもサイズが調整できます。

blenderでSTL出力時にチェックを入れておく
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96808/c7ec190d-5ea7-9dcd-0f7d-074614139e7d.png)

Cura上でもサイズを確認しておく
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96808/73d50e26-3909-d05d-d102-c326486d7684.png)

# 余談
フィラメントの除湿って必要かもです。
自分の環境だと湿度60％くらいある部屋のようなので、
ダイソーの300の入れ物にキリで穴をあけたものにフィラメントをいれて印刷しています。
乾燥剤をいれてあるので、湿度40％くらいにおさまっているようです。

https://twitter.com/tatmos/status/1446493678323650562
【AI・機械学習入門】よく使う Google Colaboratory のショートカットキー

## はじめに
今回は、**Google Colaboratory** (以後、**Colab**)の**ショートカットキー**についてです。
いきなり多くの**ショートカットキー**を詰め込んでも、最初は大変なので、**よく使うショートカットキー**に絞りこんで説明させていただきます。

## 環境
今回紹介するショートカットキーの動作環境は以下の通りです。
**Windows 10**
**Google Colaboratory**

:::note warn
Macをご使用の方は、Ctrl を Cmd に置き換えてください。
:::

## Colab のショートカットキー一覧
ショートカットキーの一覧については、
**Colab** を開き、**ツール** > **キーボードショートカット** から確認することができます。
または、**Ctrl + M H** でも同様に確認することができます。

## Colab でよく使うショートカットキー
今回紹介するよく使うショートカットキーは以下の通りです。

| ショートカットキー | 内容 |
| :----: | :----: |
| Ctrl + M H | キーボード ショートカットを表示 |
| Ctrl + S | ノートブック[^1]を保存 |
| Ctrl + M A | 上にコードセル[^2]を挿入 |
| Ctrl + M B | 下にコードセル[^2]を挿入 |
| Ctrl + M D | 選択したセル[^3]を削除 |
| Ctrl + M Y | コードセル[^2]に変換 |
| Ctrl + M M | テキストセル[^4]に変換 |
| Esc | 現在のセル[^3]の選択を解除 |
| Ctrl + Enter | 現在のセル[^3]を実行 |
| Shift + Enter | セル[^3]を実行して次のセル[^3]を選択 |
| Ctrl + F9 | ノートブック[^1]内のすべてのセル[^3]を実行 |
| Ctrl + M I | 実行を中断 |
| Ctrl + / | 現在の行をコメントにします |
| Shift + Tab | 現在の行のインデント[^5]を解除 |
| Tab | オートコンプリート[^6] |
| Ctrl + Space | オートコンプリート[^6](同上) | 
| Ctrl + Z | セル内の変更を戻す |
| Ctrl + Shift + Z | 最後のセル操作を元に戻す |
| Ctrl + M Z | 最後のセル操作を元に戻す(同上) |
| Ctrl + D | 同じコード/テキストを選択 |
| Ctrl + H | グローバル検索/置換 |

## 覚える順番のオススメ
ショートカットキーは、いきなりすべてを詰め込むのではなく、実際に使ってみて徐々に慣れていくと自然に覚えます。
はじめのうちは、3つくらいを1日打つ練習をすると、すぐに慣れると思いますよ。

1. **Ctrl + S**, **Ctrl + M A**, **Ctrl + M B**, **Ctrl + M D**, **Ctrl + M Y**, **Ctrl + M M**, **Esc**
まずは、これらのショートカットキーを使って、セルの操作に慣れてください。セルの操作はよく行うので、ショートカットキーを覚えることで格段に操作が速くなりますよ。

2. **Ctrl + Enter**, **Shift + Enter**, **Ctrl + F9**, **Ctrl + M I**
つぎに、セルの実行に関するショートカットキーに慣れてください。こちらもセルの操作と同じくらい多く使います。`Ctrl + M I` は、実行を中断します。セルを実行して、実行が完了しないおかしいなと思ったときに使います。

3. **Ctrl + /**, **Shift + Tab**, **Tab**, **Ctrl + Space**
セルの中にコードを記述する際に、よく使うショートカットキーです。
`Tab` と `Ctrl + Space` は、オートコンプリートを行うことができます。どちらか片方使いやすい方を選んで覚えれば大丈夫です。
※私は`Tab`で覚えています。

4. **Ctrl + Z**, **Ctrl + Shift + Z**, **Ctrl + M Z**, **Ctrl + D**, **Ctrl + H**
セルの変更や操作を戻したり、検索/置換を行うショートカットキーです。
`Ctrl + D` と `Ctrl + H` は組み合わせて使用すると、一括置換ができるので便利です。
`Ctrl + Shift + Z` と `Ctrl + M Z`は、最後のセル操作を元に戻すことができます。実験的にセルを追加して実行したが不要なので消したい場合に使用したりします。どちらか片方使いやすい方を選んで覚えれば大丈夫です。
※私は`Ctrl + Shift + Z`で覚えています。

## さいごに
[前回](https://qiita.com/katzed/items/910f4cf77e236ff89998)の記事と合わせて、ショートカットキーについては以上となります。
次回は、いよいよ**Pythonの記事**になります。
まずは、**Pythonでよく使うライブラリの紹介**と各ライブラリはなにができるのかということを身近なものに例えてみたいと思います。

[^1]: ノートブックとは、現在開いているColab環境そのものを指します。ノートブックは、複数のセルと呼ばれるブロックで構成されています。
[^2]: コードセルとは、Python のコードを書き込み、実行するためのセルです。
[^3]: セルには、コードセルとテキストセルの 2 種類があります。
[^4]: テキストセルとは、Markdown 形式で文章を書くためのセルです。
[^5]: インデントとは、文章の行頭に空白を挿入して先頭の文字を右に押しやる字下げのことです。プログラミングでは、Tabで字下げを行い、コードの可読性を向上させるために用いられます。
[^6]: オートコンプリートとは、過去に入力した文字を記憶し、次に入力される内容を予想して表示する機能のことです。プログラミングでは、設定されたコードを途中まで入力すると、該当する候補がオートコンプリートによって表示されます。
pandasでクリックできるリンクを表示する

# 結論

次のようにして、指定した列をクリックできるリンクとして表示することができます。

```
df = pd.DataFrame({'name': ['google', 'pandas'], 'url':['https://www.google.com/?hl=ja', 'https://pandas.pydata.org/']})

def make_clickable(val):
    return '<a href="{}" target="_blank">{}</a>'.format(val,val)

df.style.format(formatter={'url': make_clickable})
```

![スクリーンショット 2021-10-07 23.46.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131596/cad58e75-96f2-60b8-2a47-8e94e9c9d330.png)

# 詳細

Colabなどnotebook環境で、URLを含むDataFrameを表示しようとすると、以下のようになると思います。

![スクリーンショット 2021-10-07 23.16.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131596/355dad45-bef3-a07d-c451-e77a3617f044.png)

できればこのURLをクリックして開けるようにしたいです。
stackoverflowに回答がありました。

https://stackoverflow.com/questions/42263946/how-to-create-a-table-with-clickable-hyperlink-in-pandas-jupyter-notebook

次のコードは、上のstackoverflowからの引用です。

```
df = pd.DataFrame(['http://google.com', 'http://duckduckgo.com'])

def make_clickable(val):
    return '<a href="{}">{}</a>'.format(val,val)

df.style.format(make_clickable)
```

このコードを実行すると、次のように表示されます。

![スクリーンショット 2021-10-09 10.43.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131596/7c1a366f-35c7-6e09-2536-16a5170e352b.png)

クリックできるように見えますが、Colab上ではクリックしても反応しませんでした。（httpのせい？）
httpをhttpsに修正すると、クリックできるようになりましたが、出力セル内でページを開いてしまいました。

## 新しいタブでページを開く

そこで、関数make_clickableで返しているaタグに`target="_blank"`の属性を追加してあげます。
これで新しいタブでページを開くことができます。

```
def make_clickable(val):
    return '<a href="{}" target="_blank">{}</a>'.format(val,val)
```

## 列を指定する

次の例は複数の列を持つDataFrameの場合です。
同じ方法では、全ての列がクリックできるようになってしまいます。

![スクリーンショット 2021-10-09 11.28.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131596/0e8e94f7-b240-d834-c8ff-dbb2858c42a6.png)

適用したい列はDataFrame.style.formatの引数formatterで指定できます。
辞書形式で列と関数を指定します。

```
df.style.format(formatter={'url': make_clickable})
```

![スクリーンショット 2021-10-07 23.46.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131596/cad58e75-96f2-60b8-2a47-8e94e9c9d330.png)

# おわりに

DataFrame.style.formatでフォーマットを指定すると、デフォルトのフォーマットが崩れてしまうため、ここまでの例のように見た目が変わってしまいます。
必要に応じて、以下のドキュメントを参考にフォーマットを調整することができます。

https://pandas.pydata.org/pandas-docs/stable/user_guide/style.html#Formatting-Values

また、今回の内容をまとめたColabを参考として添付しておきます。

https://colab.research.google.com/drive/1OpIQ-wf3JvuV1AZgfK_sXnPbLJEua9_S?usp=sharing
DB関連の用語を復習してみた。

#【DB関連の用語を復習してみた。】

知識の定着を兼ねて備忘録として残します。

##マスタテーブル、トランザクションテーブル
- マスタテーブル
    - システムの保守・運用上の変更が頻繁にない基本となる情報が格納される
- トランザクションテーブル
    - システムの運用上、日々の記録が格納されていく

##主キー、外部キー、一意キー
- **主キー**
    - テーブルのデータを必ず1つ特定できる主要列
        - 1つの列しか設定できない
    - 主キーに設定された列は重複を許さない
    - 主キーは複数列を組み合わすこともできる
        - これを**複合主キー**と呼ぶ
    - 主キーは他のテーブルからデータを参照する時に使用する
        - 基準となるものなのでデータの値が変わらないことが望ましい
        - オートインクリメント等の機械的な連番をデータに設定することがある
        - （機械的に設けられた主キー）
        - これを**サロゲートキー**と呼ぶ
- **外部キー**
    - 他のテーブルのデータと連携するために、他のテーブルのデータの値を格納した列
    - DBの機能に制限をかけることができる
    - 参照先の列にないデータは設定できないようにできる
- **一意キー**
    - テーブルのデータを必ず1つ特定できる列
        - 主キーのように1つの列しか設定できない、ということはない
LocalStack 環境構築 メモ


## LocalStackとは？

* AWSのサービスを擬似的に利用できるフレームワーク
* 対応AWSサービスは、[公式ページ](https://github.com/localstack/localstack/blob/master/doc/feature_coverage.md)を参照のこと

## AWS CLIインストール・設定

### インストール

* 筆者環境はWindowsのため、[こちら](https://awscli.amazonaws.com/AWSCLIV2.msi)からインストーラーをダウンロードし、実行する。

* インストール結果確認

  ```shell
  aws --version
  aws-cli/2.2.44 Python/3.8.8 Windows/10 exe/AMD64 prompt/off
  ```

### 設定

* クレデンシャル設定

  ```shell
  aws configure --profile localstack
  AWS Access Key ID [None]: dummy
  AWS Secret Access Key [None]: dummy
  Default region name [None]: ap-northeast-1
  Default output format [None]: json
  ```

* 設定値確認

  ```shell
  cat ~/.aws/credentials
  [localstack]
  aws_access_key_id = dummy
  aws_secret_access_key = dummy
  cat ~/.aws/config
  [profile localstack]
  region = ap-northeast-1
  output = json
  ```

  

## Docker 環境構築

* Gitからプロジェクトクローン

  ```shell
  git clone https://github.com/atlassian/localstack.git
  Cloning into 'localstack'...
  remote: Enumerating objects: 2199, done.
  remote: Counting objects: 100% (6/6), done.
  remote: Compressing objects: 100% (4/4), done.
  Receiving objects: 100% (2199/2199), 618.62 KiB | 2.07 MiB/s, done.
  
  Resolving deltas: 100% (1435/1435), done.
  ```

  

* Docker起動

  ```shell
  cd localstack
  docker-compose up
  ```



## 動作確認

* ダッシュボードアクセス(http://localhost:8080)
  ![localstack.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586535/50845a98-45b3-ff91-0515-9622b425cfb5.png)



### S3

* バケット作成

  ```shell
  aws s3 mb s3://sample-bucket --endpoint-url=http://localhost:4572 --profile=localstack
  make_bucket: sample-bucket
  ```

  

* バケット確認

  ```shell
  aws s3 ls --endpoint-url=http://localhost:4572 --profile=localstack
  2006-02-04 01:45:09 sample-bucket
  ```

  ※作成時刻がおかしい...？



## 参考情報

* [LocalStack](https://github.com/localstack/localstack)
* [s3 &mdash; AWS CLI 1.20.58 Command Reference](https://docs.aws.amazon.com/cli/latest/reference/s3/)
Mac　個人的に便利なブラウザ系ショートカット７選

#### 初めに
初記事。
何を書いたら良いかもまだわかっていないため、とりあえず簡単な内容から書いていこうと思います。

#### 概要
仕事ではWindowsを使用し、趣味ではMacを使っています。
Macのショートカットキーが、Windowsではcontrolキーを使うところでcommandキーを使うことが
多かったり、

例）WindowsとMacのショートカットキー比較

| ショートカット | Windows | Mac |
|:-|:-:|:-:|
| コピー  | control + C  |  command + C |
|  貼り付け | control + V  | command + V  |
|  全て選択 | control + A  |  command + A |
|  保存 |  control + S | command + S |

そもそもキーの組み合わせが違ったりして困惑することが多いため、*__忘備録と
投稿の練習を兼ねて__*投稿してみることにしました。
ちゃっかりMarkDownk記法の練習も兼ねています。

* * *

#### Mac ブラウザ系ショートカット７選

+ 第7位　タブを切り替える
control + Tab で現在のタブの右タブが選択状態になります。
control + Shift + Tab で、現在のタブの左タブが選択状態になります。
**この操作はWindowsと同じ**です。

- 第6位　ウィンドウの最大化（フルスクリーン）
command + control + F
最大化している状態でこのコマンドを使用すると最大化が解除されます。

* 第5位　スクリーンショットの撮影
command + Shift + 3　で画面全体の撮影。
command + Shift + 4　で選択した部分の切り取り撮影になります。

+ 第4位　新しいタブを開く／タブを閉じる
command + T　で新しいタブを開きます。
command + W　で選択中のタブを閉じます。

+ 第3位　ページの先頭／末尾に移動する
command + 上矢印で最上部へ移動。
command + 下矢印で最下部へ移動。

+ 第2位　ブラウザの戻る／進む
command + \[ (左角かっこ)　が戻る操作。
command + \] (右角かっこ)　が進む操作です。

:::note
ゲーミングマウスの様な、マウスボタンにショートカットキーを割り当てておくスタイルもアリだと思います。
:::

- 第1位　間違えて閉じてしまったタブをもう一度開く
command + Shift + T
`間違えてウィンドウ自体を閉じてしまった時にも便利！`
再度ブラウザを開いてこのショートカットキーを使えば、開いていた全てのタブが復元されます。

- 番外編　ウィンドウを画面の半分にする
Windowsではこのショートカットキーが存在するのですが、Macではデフォルトでは存在しない様です。
以下のように、アプリケーションを入れてショートカットを使えるようにする記事も出てきますので、
頻繁に使用する人は設定しておくことをオススメします。
Macでの画面分割: [参考記事](https://www.pnkts.net/2020/06/20/window-to-half "Macでウィンドウを画面の半分にする")
アプリケーションを入れない場合だと、ウインドウの左上隅にある緑色のボタンにポインタを移動して、
表示されるメニューで「ウインドウを画面左側にタイル表示」または「ウインドウを画面右側にタイル表示」を選択します。

#### 感想
元から知っていたもの、新しく知ったものの中から特に個人的に有用だと思うものをチョイスしました。
この程度の内容でも、書くのに結構時間が掛かってしまいました。
次からはスピード重視で記事を書こうと思いました。