OmniAICreator/Qiita-1.07M huggingface dataset:
Wio Terminalの実行ファイルを配布するなら.UF2を

# 動機

Wio Terminalにデフォルトで入っていたゲーム「jumper」が公開されました。
[jumper source code on GitHub](https://github.com/Seeed-Studio/Seeed_Arduino_Sketchbook/tree/master/examples/jumper)

自作スケッチをWio Terminalに転送してゲームが出来なくなった人も、ここからスケッチをダウンロードしてArduino IDEでコンパイル、Wio Terminalへ書き込みすれば、またあの激ムズゲームを楽しむことができますｗ

ただ、、、
この「jumper」スケッチ、コンパイルするのにアレとかソレとか、Arduino IDEにいくつかのライブラリを入れないとコンパイルが通ってくれない、少し手のかかるスケッチでして、、、
もっと手軽にWio Terminalのソフトを入れ替えできないかなーと思い、調べました。

# Arduino IDEってどうやって書き込んでいるの？

スケッチ（ここではsimple.ino）をコンパイルすると、arm-none-eabi-g++などが、.binや.hexを生成します。
ざっくりとした流れはこちら。

```
arm-none-eabi-g++
 -> simple.ino.map
 -> simple.ino.elf

arm-none-eabi-objcopy
 simple.ino.elf -> simple.ino.bin

arm-none-eabi-objcopy
 simple.ino.elf -> simple.ino.hex

Arduino IDE
 -> simple.ino.with_bootloader.hex

bossac
 simple.ino.bin --offset=0x4000 -> Wio Terminal

```

ポイントは最後のところ。
bossacというツールで、.binをオフセット0x4000でWio Terminalへ書き込んでいます。

# もう一つの書き込み手段

Wio TerminalのブートローダーはUF2 Bootloaderというのを使っていて、ブートローダーモード（リセットを素早く2回やるやつね）にすると、USB接続しているPCにドライブが表示されるんです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109634/5b7e492c-956a-2f2a-992b-9f758c7e1098.png)

中を見ると、ファイルが3つ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109634/10e31fe7-2f2b-a50a-035a-8fd528313bf3.png)

なんと、このドライブに.uf2というファイルをコピーすることで、Wio Terminalへソフトを入れ込むことができるんです！！

# .uf2ファイルの作り方

> .binを.uf2に変換するWebサイトを立ち上げました。
> https://seeedjp.github.io/uf2/
> 使い方は、こちらをご参照ください。→ https://lab.seeed.co.jp/entry/2021/03/29/120000

[ここ](https://github.com/microsoft/uf2/blob/master/utils/uf2conv.py)にあるuf2conv.pyを使うと、.binから.uf2を作ることができます。
具体的なコマンドはこちら。

```
>python uf2conv.py -c -b 0x4000 -o jumper.ino.uf2 jumper.ino.bin
Converting to uf2, output size: 201216, start address: 0x4000
Wrote 201216 bytes to jumper.ino.uf2

>
```

`-c`と`-b 0x4000`のオプションを忘れずに。

# まとめ

* Wio Terminalをブートローダーモードにすると、ドライブが出現
* ドライブに.uf2を放り込むと書き込まれる
* .uf2は、.binからuf2conv.pyを使って生成

# おまけ

むずかしすぎ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109634/11cb99f8-7cc2-0f28-cb84-312281905298.png)
HTML&CSS~初級編~, JavaScript Ⅰ,Ⅱ,Ⅲ

# プログラミングの勉強日記
今までのまとめ（2020年5月14日から5月23日まで）
これから勉強した内容をQiitaでまとめていきたいと思います。

## HTML&CSS~初級編~

##### HTMLの全体構造

```HTML:全体構造
<!DOCTYPE html>　
<html>
  <head>
  </head>
  <body>
    <h1>program</h1>
    <p>HTML</p>
  </body>
</html>
```

1行目はDOCTYPE宣言と呼ばれるHTMLのバージョンを宣言する
<head>要素にはwebページの設定に関する情報（ここに記述した内容はWebページには表示されない）
<body>要素の中には実際に表示したい内容を入れる


######paddingとmarginの使い分け

〇padding：borderの内側の余白を作る
〇margin：borderの外側の余白を作る

1.paddingは背景の色や背景画像が設定されるが、marginで設定された余白には背景の色や背景画像が表示されない。
　→背景画像や背景の色を表示させたい場合はpaddingを使う

2.marginには変なバグが生じることがある
　marginが重なり合うときは相殺されることやmarginが親要素をはみ出すことなど。
　→marginを使用するときには、極力上下方向についてはどちらか片方のみにする
　　親要素と子要素の余白を開けるときはpaddingを使用する
　　隣り合うHTML同士の余白を開けるときはmarginを使う

#####テキスト入力を受け取る要素：input要素 textarea要素

```CSS:テキスト入力
<form>
  <p>input要素</p>
  <input>
  <p>textarea</p>
  <textarea></textarea>
  <input type="submit">
  <input type="submit" value="保存">
</form>
```
input要素：1行のテキストを受け取るための要素<font color="blue">（※終了タグが不要）</font>
textare要素：複数行のテキスト入力を受け取るための要素
value属性：ボタンに表示させる名前を変更できる
送信ボタン：input要素を使う。input要素にはtype属性を指定することができ、submitを指定すると入力欄ではなく送信ボタンになる。


##JavaScript(Ⅰ,Ⅱ,Ⅲ)
######コンソールの出力：`console.log("〇〇");`
　〇〇に入る文字列はダブルクオーテーションかシングルコーテーションで囲まれる。数値の場合は囲まない。文字列の連結には＋を使う。

######変数の定義：`let 変数名 = 値;`
　変数は文字列や数値と同様に扱うことができる。
　変数のメリット：同じ値を繰り返し使える。変更に対応しやすい。値の意味がわかりやすい
　変数のルール：英単語を用いる2語以上は大文字で区切る
　変数の更新：変数名＝新しい値（letはつけない）
　
######定数の定義：`const 定数名　= 値;`
　<font color="blue">定数は値を更新することができない。</font>
　定数のメリット：更新ができないので、予期せぬ更新を防ぐことができる

#####テンプレートリテラル（連結方法）　
　以下のように文字列の中で`${定数}`を使う。<font color=blue>文字列事態をバッククォーテーションで囲う。</font>（文字列の連結には＋を用いることもできる）

```javascript:テンプレートリテラル
const name="田中";
const age=18;
console.log(`${name}は${age}歳です`); //テンプレートリテラル
console.log(name+"は"+age+"歳です");  //＋を用いた文字列の連結
```
#####オブジェクト
　配列に定数と同様に複数のデータをまとめて管理するのに用いられる。それぞれの値にプロパティと呼ばれる名前を付けて管理する。「プロパティ:値1, プロパティ:値2」のように作る。（定数に代入可）
　→オブジェクトを取り出すためには「オブジェクト.プロパティ名」を使う。

#####オブジェクトを要素に持つ配列
　配列の要素には文字列や数字だけでなくオブジェクトも使うことができる。

```javascript
const profile=[
  {name:"田中",age:16},
  {name:"斎藤",age:18}
];
console.log(profile[1]);     //コンソール結果：{name:"斎藤",age:18}
console.log(profile[1].age); //コンソール結果：18
```

 同様にして、オブジェクトの値の部分にも文字列や数値だけでなく、オブジェクトを用いることができる。

#####関数
　いくつかの処理をまとめたもの。下の例のように「function()」と書いて、その後ろに中括弧でまとめた処理を書くことで関数を定義（用意）できる。

```javascript
const introduce=function(){
  console.log("こんにちは");
  console,log("私は田中太郎です");
};
introduce(); //関数の呼び出し
```
また、これは`const introduce = ()=>{`と各こともでき、「()=>」の書き方を<font color=orange>アロー関数</font>という。

#####戻り値
　呼び出しもとで受け取る処理結果のことである。`return 値`とかく。returnは戻り値だけではなく、関数の処理を終了させる性質を持つ。<font color=blue>なので、returnの後にある関数内の処理は十個されない。</font>

#####スコープ
　関数の引数や関数内で定義した定数や変数はその関数内でしか使うことができなく、その範囲のことをスコープという。

#####その他
　for文やwhile文などはC言語と書き方は同じである。ただ、比較演算子であるaとbが等しいときは「===」と書くため、C言語とは異なる。
dockerfileでRUN sudo〜をつかうとbuildに失敗するときの対処

### Dockerfileをbuild中・・
以下のエラーが発生しました。
翻訳すると「sudo: tty が存在せず、askpass プログラムが指定されていない」とのこと。

```bash
sudo: no tty present and no askpass program specified
```

### エラーの箇所は・・？
rootユーザからhostと同名のユーザに切り替えて、
`sudo`を使ってコマンドを実施している部分です。

```Dockerfile
〜〜〜〜上記略
USER $HOME_USER

RUN sudo apt-get    install -y  \
〜〜〜〜以下略
```

### 原因・対応
原因を調べたところ、`sudo`するときにpassword要求されていることにあるらしいです。
なので、sudoersにpasswordなしの設定を加えることにしました。

コンテナの中の`/etc/sudoers`をDockerfileと同じ階層にコピーして、最終行に以下を追記します。
(myusernameは$HOME_USERの値)

```bash
# /etc/sudoerの最終行に以下を追記
myusername  ALL=(ALL) NOPASSWD: ALL
```

Dokerfileに`ADD sudoers /etc`を追記

```Dockerfile
〜〜〜〜上記略
ADD sudoers /etc
USER $HOME_USER

RUN sudo apt-get    install -y  \
〜〜〜〜以下略
```

### これで解決・・？
これで`sudo`するときにパスワードが不要になり、buildし直すとエラー自体は発生しなくなりました。

### 注意
ただし、個別ユーザにsudoするときに全権を与えるのでセキュリティ的には危険です。
さらに気になって調べた所、[Dockerfile のベストプラクティス](http://docs.docker.jp/engine/articles/dockerfile_best-practice.html)のUSERの項目に以下の記載がありました。
>TTY やシグナル転送を使わないつもりであれば、 sudo のインストールや使用を避けたほうが良いでしょう。使うことで引き起こされる問題の解決は大変だからです。もし、どうしても sudo のような機能が必要であれば（例：root としてデーモンを初期化するが、実行は root 以外で行いたい時）、 「 gosu 」を使うことができます。

### 結論
というわけで、Dockerfile内ではsudoは使わずに、厳密にUSERコマンドで適宜切り換えていくやり方がいいかもしれません。

## 参考
- [Linux/sudoを使う](https://www.masatom.in/pukiwiki/Linux/sudo%25A4%25F2%25BB%25C8%25A4%25A6/)
- [How to fix 'sudo: no tty present and no askpass program specified' error?](https://stackoverflow.com/questions/21659637/how-to-fix-sudo-no-tty-present-and-no-askpass-program-specified-error)
- [sudoers覚え書き](https://qiita.com/progrhyme/items/6f936033b9d23efb1741)
- [Dockerfile のベストプラクティス](http://docs.docker.jp/engine/articles/dockerfile_best-practice.html)
その仮引数(構造体,クラス)は値か参照か[C,C++,C#]

##仮引数（parameter）の３つのパターン
C++のコードを眺めていると以下のような3つのパターンの構造体、クラスの仮引数に出くわします。

```c
//①
void hoge( TEST test)
{
    test.a++;
}
//②
void hoge( TEST *test)
{
    test->a++;
}
//③
void hoge( TEST &test) 
{
    test.a++;
}
```
Cでは①②のパターン、 
C#では①のパターンのみ出くわします。

上記３つのパターンの仮引数は各々の言語で以下のように分類されます。

| |  C  |  C++  | C# |
| ---- | ---- | ---- | ---- |
|値|  ①(※)  |  ①(※)  |  ①(TESTが構造体の場合)  |
|参照|  ②  |  ②③  |  ①(TESTがクラスの場合)  |

特に、①はC#は一見、値のように見えて(TESTがクラスの場合)参照されているということに注意してください。

実は①はC/C++の場合も値ではないかもしれません。

##※構造体,クラスは基本的に値渡しされない
基本的にサイズが大きい構造体,クラスは値型として引数がコピーされるのではなく、
ポインタ渡し、または参照渡しをして使用されることが多いです。

よって、C/C++で①が使われることはほぼありません。

それにもかかわらず、①が使われる場面がCで割と出てきます。
そういうときは、
Cの場合、

```c
typedef void* TEST;
```
voidポインタがTESTとして新しい名前に定義されている。
または

```c
typedef struct {
    int    a;
} *TEST;
```
structのポインタがTESTとして新しい名前に定義されている。

C++の場合、

```c++
typedef shared_ptr<foo> TEST;
```
fooのポインタがTESTとして新しい名前に定義されている。

というように一見値型のように見えてポインタ型として、どこかで再定義されています。
(区別できるように、Cの場合 PTEST、C++の場合 TESTPtrというように接頭語、接尾語が付けられることが多い)

[](
C++は上記のような再定義はせず素直にクラスを定義し、③がよく使用されます。
C#も同様に値型を参照するために、ref キーワードが用意されています。
)

つまり、①~③の仮引数は十中八九、参照です。

intやdoubleのような値型は単純ですが、
結局のところ、TESTのようなオリジナルの型の場合、定義を調べないと
その仮引数が値として使われているか、参照として使われているかはわかりません。

##上記の関数に渡すときの型

| |  C  |  C++  | C# |
| ---- | ---- | ---- | ---- |
|①|  [実体⇒実体]<br>TEST test;<br>hoge(test);<br><br>or<br><br>TEST \*test;<br>hoge(*test);<br>※  |  [実体⇒実体]<br>TEST test;<br>hoge(test);<br><br>or<br><br>TEST \*test = new TEST();<br>hoge(*test);<br>※  |  [実体⇒参照] <br>\(クラスの場合)<br>TEST test = new TEST();<br>hoge(test); |
|②|  [ポインタ⇒ポインタ]<br> TEST *test;<br>hoge(test)<br><br>or<br><br>TEST test;<br>hoge(&test) | [ポインタ⇒ポインタ]<br> TEST *test = new TEST();<br>hoge(test)<br><br>or<br><br>TEST test;<br>hoge(&test)   |  -  |
|③|  -  |  [実体⇒参照]<br>TEST test;<br>hoge(test);<br><br>or<br><br>TEST \*test = new TEST();<br>hoge(*test);<br>  |  -  |

##あとがき
ポインタの概念をよく理解せず、オブジェクト指向のPython3やらC#をやって、C/C++をやると混乱します。

某漫画のように
「最初の入り口がオブジェクト指向なんだよね最近の子って」
「そうそう そんなんじゃ使いものにならねえっての」
となります。
MacにMySQLインストール

本当に自分が忘れないようにメモとして

## HomeBrew
https://brew.sh/index_ja

CatalinaはzshがデフォルトだからHomebrewをzshでできるようにしないとだけどやり方忘れた。

## Install

```zsh
brew install mysql
```

## 起動

```zsh
brew services start mysql
```

## ログイン

```zsh
mysql -uroot
```

## 停止

```zsh
brew services stop mysql
```
【Docker/ECR/ECS】  コンテナ入門まとめ③

#前編
- [Docker / ECR / ECS コンテナ入門まとめ①](https://qiita.com/umaibou1126/items/d4d5973feafc788e8a29)
- [Docker / ECR / ECS コンテナ入門まとめ②](https://qiita.com/umaibou1126/items/8d654b219bd8e0f05524)

#参考文献
- [AWS CLI で Amazon ECR に docker イメージを push する](https://qiita.com/aokad/items/17a06c2384041bd60d16)
- [Amazon EC2 Container Service (ECS)を試してみた](https://dev.classmethod.jp/articles/ecs-ataglance/#return-note-126407-1)
- [CircleCI+ECS+ECR環境でDockerコンテナのCD(継続的デプロイ)環境を構築する -前編-](https://dev.classmethod.jp/articles/circleci-ecr-ecs-1/)
- [CircleCI+ECS+ECR環境でDockerコンテナのCD(継続的デプロイ)環境を構築する -後編-](https://dev.classmethod.jp/articles/httpdev-classmethod-jpcloudcircleci-ecr-ecs-2/)

#前準備

####◆ Dockerインストール
```
$ sudo yum update -y

$ sudo amazon-linux-extras install docker
```

####◆ Docker起動
```
$ sudo systemctl start docker
```

####◆ dockerグループにユーザ追加
```
$ sudo usermod -a -G docker ec2-user
```

####◆ dockerアクセス確認
```
$ docker info
```

#ECR編

####◆ ECRログイン
```
$ aws ecr get-login --no-include-email  ※出力される長いコマンドでログイン
```

####◆ ECRリポジトリ作成
```
$ aws ecr create-repository --repository-name sample  ※リポジトリ名
```

####◆ 環境変数セット
```
$ export registryId=[出力されたレジストリId]
$ export region=ap-northeast-1 　※リージョン名
$ export imagename=sample
$ export tag=ver1
```

####◆ Dockerイメージ作成
```
$ docker build -t ${imagename}:${tag} .
```

####◆ Dockerイメージtag付け
```
$ docker tag ${imagename}:${tag} ${registryId}.dkr.ecr.${region}.amazonaws.com/${imagename}:${tag}
```

####◆ Dockerイメージプッシュ
```
$ docker push ${registryId}.dkr.ecr.${region}.amazonaws.com/${imagename}:${tag}
```


#ECS編

####◆ IAMロールの作成

- 「AmazonEC2ContainerServiceforEC2Role」ポリシーの付与

```:ecs-role
{
  "Version": "2020-5-23",
  "Statement": [
    {
      "Action": "ecs:*",
      "Effect": "Allow",
      "Resource": "*"
    }
  ]
}
```

####◆ クラスター作成コマンド
```
$ export region=us-east-1
$ export cluster=sample-cluster
$ aws ecs create-cluster --region ${region} --cluster-name ${cluster}
$ aws ecs list-clusters --region ${region} --output json
```

####◆ ec2作成
- AMI選択：ami-34ddbe5c
- IAMロール：上記のecs-roleを使用
- ユーザデータ：下記入力

```:userdata
#!/bin/bash
echo ECS_CLUSTER=[クラスター名] >> /etc/ecs/ecs.config
```

####◆ ECS/EC2紐付け確認
```
$ aws ecs list-container-instances --cluster ${cluster} --output json --region ${region}
$ ssh ec2-user@XX.XX.XX.XX    ※ec2ログイン
$ sudo docker ps
```

####ECSタスク登録・実行

- 参照：[Amazon EC2 Container Service (ECS)を試してみた](https://dev.classmethod.jp/articles/ecs-ataglance/#return-note-126407-1)

```
$ vim sample.json
```

```sample.json
[
  {
    "environment": [],
    "name": "sample",
    "image": "sample-image",
    "cpu": 10,
    "portMappings": [],
    "entryPoint": [
      "/bin/sh"
    ],
    "memory": 10,
    "command": [
      "sample",
      "360"
    ],
    "essential": true
  }
]
```

#####■ タスク登録コマンド
```
$ aws ecs register-task-definition --family sample --container-definitions file://sample.json --region ${region} --output json
```
#####■ タスク確認
```
$ aws ecs list-task-definitions --region ${region}
```

#####■ タスク実行コマンド
```
$ aws ecs run-task --cluster ${cluster} --task-definition sample:1 --count 1 --region ${region} --output json
```

#####■ タスク実行確認
```
$ sudo docker ps
```
Excelでこんなことやってたよなー、をPythonに置き換える　その２

手こずったので、日付操作についてメモしておく


## 曜日を知りたい

```Python
df['day_of_the_week'] = df.['date'].dt.weekday
```
月曜〜日曜を、０〜６の数値で得られる。


## 契約期間を知りたい

想定は「契約開始日」と「契約終了日」があって、解約のみ「契約終了日」が入力されている状態。

|name  |start_date  |end_date    |
|---   |---         |---         |
|A     |2000-01-01  |2000-12-31  |
|B     |2001-01-01  |Nat         |
|      |            |            | 

こんな感じのデータ


####１、期間計算用の列を作る
```Python
df['calcu_date'] = df.['end_date']
df['calcu_date'] = df.['end_date'].fillna(pd.to_datetime('20200523')
```
新しく列を作って、契約終了日を代入。
空白の箇所には今日の日付を入れる（計算したい日付を入れればいい、end_dateに注意しながら）

####２、期間を計算する -契約していた月数が欲しい場合-
```Python
from dateutil.relativedelta import relativedelta
df['period'] = 0

for i in range(len(df))
    xxx = relativedelta(df['calcu_date'].iloc[i], df.['start_date'].iloc[i])
      #xxxの出力結果は　→　relativedelta(years=+3, months=+11, days=+29)　　こんな感じ
    df['period'].iloc[i] = xxx.year*12 + xxx.months
```
relativedeltaで日付の計算ができるので利用。これで年・月・日の差を教えてくれます。
月数を知りたいので年には×１２、月はそのままで足し算。


####3、期間を計算する -契約していた日数が欲しい場合-
```Python
import datetime
df['period'] = 0

for i in range(len(df))
    xxx = df['calc_date'].iloc[i] - df['start_date'].iloc[i]
    df['period'].iloc[i] = xxx.days
```
relativedeltaでできるのかなーと思いましたが、月ごとに日数が違うので断念。
timedeltaでやる方がわかりやすいといえばわかりやすい。


relativedeltaは月末とか、１ヶ月後とかそういった計算もできるみたい。
契約についてのデータいじるときこういう操作をよくやっていたので使えそう。
GASのスクレイピングについて教えていただきたいです

プログラミングのスクレイピングについてです。
アプリブンのサイトから、アプリのURL、名前、会社名をスクレイピングしようとしていますが、以下のようなエラーコードがでてしまいます。

どうしたらいいでしょうか？よろしくお願いいたします。

Exception: https://app-liv.jp のリクエストに失敗しました（エラー: 404）。サーバー応答の一部: <!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <met...（応答の全文を見るには muteHttpExceptions オプションを使用してください）（行 35、ファイル「コード」）詳細表示しない



//参照サイトhttp://www.initialsite.com/w01/14311
function scrapSample() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('シート1'); //
var getUrl = 'https://app-liv.jp/business/all/0002/popular/';

//UrlFetchApp.fetch() でトップページのURLへアクセス。getContentText() でトップページのテキストデータが取得
var content = UrlFetchApp.fetch(getUrl).getContentText('UTF-8'); 

//new RegExp で記事URLの正規表現をitemRegexp として作成します
//class=”applink”/正規表現/g のようにオプションにgを選択して、一致するものを全てをマッチさせるようにしています。
var itemRegexp = new RegExp(/<a href=.*?" class="c-app-card-block">/g);

//content のうち、この条件にマッチした部分をitem に配列として格納
var item = content.match(itemRegexp);
var items = [];


//item に格納したURLはaタグやclass名がついたままなのでreplace() でURLの文字列だけにしたものをitemURL へ代入
for (var i = 0; i < item.length; i++) {
var itemURL = item[i]
.replace('<a href=','')
.replace(/"/g,'')
.replace(/class=c-app-card-block>/,'');

//items へpush() して二次元配列として格納します。
items.push([itemURL]);
}

var spanRegexp = new RegExp(/<span>.*?<\/span>/);
var spans = [];

for (var j = 0; j < items.length; j++) {
//UrlFetchApp.fetch() で先ほどitems に格納した記事URLへアクセスし、取得したテキストデータをitemCont へ代入します。

var spanCont = UrlFetchApp.fetch(items[j],).getContentText('UTF-8');
var span = spanCont.match(spanRegexp)[0]
spans.push([span]);

}

//sheet.getRange() で範囲を指定し、setValues() 二次元配列に格納してある記事タイトルと記事URLを書き込みます。
sheet.getRange(2, 1, spans.length, 1).setValues(spans);
sheet.getRange(2, 2, spans.length, 1).setValues(items);
}
Javascript -オブジェクト-　自分用ノート

## オブジェクト
<p>複数のプロパティをもつデータのまとまり。</p>
<p>各種データをひとまとめにして、１つの変数として扱えるデータ。</p>


### オブジェクトの作り方

❶プロパティ数が０のオブジェクトを作成して変数に保存する

```Markdown:書式
let 変数名 = {}
```
＊オブジェクトは変数だけでなく定数の定義も有。

<br>
❷プロパティが１個以上あるオブジェクトを作成する 

```Markdown:書式
let 変数名 = {プロパティ名1:データ, プロパティ名：データ, .....,プロパティ名X：データ}； 

例：let book = {title: 'javaScript入門', price: 2500, stock: 3};
```

プロパティ名は個数制限はない

### ＜オブジェクトのからデータを読み取る、書き換える＞。

### ＜データを読み取る＞

```Markdown:書式
オブジェクト.プロパティ名

例:console.log(book.stock);
 console>> 3
```


```Markdown:書式
オブジェクト名['プロパティ名']

例:console.log(book['price']);
console>> 2500
```

### ＜データを書き換える＞

```Markdown:書式

オブジェクト名.プロパティ名 = 新しいデータ;

または

オブジェクト名[プロパティ名] = 新しいデータ;

```
<br>
<br>
## for...in文（オブジェクトのプロパティを読み取り、繰り返す文）
オブジェクトのプロパティを全て読みとることだけを目的にした繰り返し専用文。

❶for...in文を用意

```Markdown:書式
for(let 変数名 in オブジェクト){
処理内容
}

例for(let p in book){
   }
```

❷プロパティ名を読み取る


```Markdown:書式
p

```
＊変数名は何でも構わないが基本的にp


❸プロパティ名データを読み取る

```Markdown:書式
オブジェクト[p]

例：book[p]

```

※book.pと書くとプロパティデータではなくpプロパティを取得してしまう（全然違う意味）


## オブジェクトと配列の違い
配列：インデックス番号がついており、繰り返し処理できちんと番号順で出てくる
オブジェクト：　順序が崩れることもある
筑波大学の機械学習講座：課題のPythonスクリプト部分を作りながらsklearnを勉強する (3)

[筑波大学の機械学習講座：課題のPythonスクリプト部分を作りながらsklearnを勉強する (1)](https://qiita.com/legacyworld/items/a3763760e65774dc0e33)
[筑波大学の機械学習講座：課題のPythonスクリプト部分を作りながらsklearnを勉強する (2)](https://qiita.com/legacyworld/items/5a72c83860c1d0b1d352)
https://github.com/legacyworld/sklearn-basic

# 課題 3.2 多項式単回帰の訓練誤差とテスト誤差
Youtubeの解説は第4回(1) 40分あたり
$y = \cos(1.5\pi x)$に$N(0,1)\times0.1$の誤差を載せた30個の訓練データを作り、多項式回帰を行う。
ここから交差検証が入る。
1次から20次まで順に回帰していく。
訓練データはこれ。
![training.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629456/c70dde33-3983-96b9-0cad-7eababacc438.png)

ソースコード

```python:Homework_3.2.py
import pandas as pd
import numpy as np
import matplotlib.pyplot as plt
from sklearn.preprocessing import PolynomialFeatures as PF
from sklearn import linear_model
from sklearn.pipeline import Pipeline
from sklearn.metrics import mean_squared_error
from sklearn.model_selection import cross_val_score

DEGREE = 20

def true_f(x):
    return np.cos(1.5 * x * np.pi)

np.random.seed(0)
n_samples = 30

# 描画用のx軸データ
x_plot = np.linspace(0,1,100)
# 訓練データ
x_tr = np.sort(np.random.rand(n_samples))
y_tr = true_f(x_tr) + np.random.randn(n_samples) * 0.1
# Matrixへ変換
X_tr = x_tr.reshape(-1,1)
X_plot = x_plot.reshape(-1,1)

for degree in range(1,DEGREE+1):
    plt.scatter(x_tr,y_tr,label="Training Samples")
    plt.plot(x_plot,true_f(x_plot),label="True")
    plt.xlim(0,1)
    plt.ylim(-2,2)
    filename = f"{degree}.png"
    pf = PF(degree=degree,include_bias=False)
    linear_reg = linear_model.LinearRegression()
    steps = [("Polynomial_Features",pf),("Linear_Regression",linear_reg)]
    pipeline = Pipeline(steps=steps)
    pipeline.fit(X_tr,y_tr)
    plt.plot(x_plot,pipeline.predict(X_plot),label="Model")
    y_predict = pipeline.predict(X_tr)
    mse = mean_squared_error(y_tr,y_predict)
    scores = cross_val_score(pipeline,X_tr,y_tr,scoring="neg_mean_squared_error",cv=10)
    plt.title(f"Degree: {degree} TrainErr: {mse:.2e} TestErr: {-scores.mean():.2e}(+/- {scores.std():.2e})")
    plt.legend()
    plt.savefig(filename)
    plt.clf()
```

前回の課題3.1ではPolynomialFeaturesで$x,x^2,x^3$等を用意してから、LinearRegressionを行っていたが、pipelineというのを使うと一発で出来ることを学んだ。
実際に課題3.1の解説動画の中のソースコードを見るとpipelineを使っていた。
何も難しいことは無く、`steps`で処理内容を列挙するだけである。

```python
steps = [("Polynomial_Features",pf),("Linear_Regression",linear_reg)]
pipeline = Pipeline(steps=steps)
pipeline.fit(X_tr,y_tr)
```

この部分以外で課題3.1と異なるのは交差検証が入っていることである。
プログラムでいうとこの部分。

```python
scores = cross_val_score(pipeline,X_tr,y_tr,scoring="neg_mean_squared_error",cv=10)
```
`cv=10`でデータを10分割してから1部分をテストデータにしてテスト誤差を評価している。
基本的にはこのテスト誤差が小さいものが優れていることになる。
プログラムを実行すると1.png - 20.pngまで20個のグラフファイルが作成される。

- 訓練誤差が最も小さいもの = 次数が20

![20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629456/1b245a98-36f3-92ed-4c24-affaf28eefb4.png)

- テスト誤差が最も小さいもの = 次数が3

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629456/2c127931-ddc1-f8fd-2be0-aa40c25a3f37.png)

ここから如何に過学習がだめかということがわかる。
ReactNativeの「No bundle URL present」の解消法

## 概要
ReactNativeで機能追加をすることになりとりあえず```react-native run-ios```で起動してみようとしたらエラーが出ました。
どうやら結構出るエラーで下記のサイト等を参考にやってみるがダメだった。。。
なんとか解決できたので備忘録として残しておきます。
・https://qiita.com/wktq/items/9139f4c0bdf52bd71c93
・http://sottar.hatenablog.com/entry/2018/01/03/171524

## エラー内容
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278263/0284ad61-c5fb-e8f2-0cfd-c6603b54d96b.png" width=50%>

## 解決策
動画の通りに進めていくことで解決できました！
https://www.youtube.com/watch?v=eCs2GsWNkoo

### 手順
1. Xcodeを起動
2. main.jsbundleの削除
3. [File]→[New]→[File]→[Empty]で「main.jsbundle」を新規作成
4. ターミナルを起動
5. プロジェクトフォルダまで移動
6. ```react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios```を実行
7. 先ほど新規作成した「main.jsbundle」に書き出されるのを確認
8. ```react-native run-ios```を実行
CircleCI入門

## CircleCIとは？

https://www.youtube.com/watch?v=b2l4zTS8lPg

Youtubeを見ていると出てくる、CircleCIという言葉。

CI（継続的インティグレーション）/CD（継続的デリバリー）を提供するサービス。

継続的インテグレーション：アプリケーションのコード最新化・テスト
継続的デリバリー：リポジトリからソースのデプロイ

## CircleCIでHelloWorld

GitHubやBitbucketにアカウントを登録するが必要

リポジトリを作成して、.circleciと言うフォルダを作り、
その中のconfig.ymlで記述する。

https://circleci.com/docs/2.0/hello-world/#section=getting-started

config.ymlは、上記のドキュメントにある内容を元に記載する。

```yml
version: 2.1
jobs:
  build:
    docker: 
      - image: circleci/node:4.8.2 # the primary container, where your job's commands are run
    steps:
      - checkout # check out the code in the project directory
      - run: echo "hello world" # run the `echo` command
```

ファイルをGitリポジトリに反映する

https://github.com/harutotanabe09/CircleCIBegin

## CircleCIにセットアップ

https://circleci.com/

CircleCIのページに移動して、該当のリポジトリでログイン

ログイン後にメニューバーからAddProjectを選択して、上でつくったリポジトリを選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230829/07f9d446-70e7-1c5c-2004-db26b412dbb8.png)

Add Manuallyを選択

![スクリーンショット 2020-05-23 18.41.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230829/e4499a4c-0ec0-048f-31d9-a8717dd41745.png)

StratBuildingを選択

![スクリーンショット 2020-05-23 18.41.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230829/69f66421-a64f-f8f0-d697-d5d05a61986f.png)

ビルドが始まり、以下のメッセージが表示されれば成功

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230829/6ed6c0f4-47d6-831d-5a13-7ea3151f7ee1.png)
[git]最初のコミットのコメントを修正する

#なんの記事？
個人開発の新規プロジェクトにて、最初のコミットを忘れていたせいで、（意図せず「最初のコミット」になってしまったコミットの）コメントがなんだかカッコわるい状態になってしまいました。


<img width="433" alt="スクリーンショット 2020-05-15 0.56.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120785/a853b903-6428-3bb1-906c-7c236fff5cc8.png">
*masterブランチの最初のコミットなのに「作業中断時コミット」ってなんやねん...*[^nanyanen]

[^nanyanen]: 個人開発プロジェクトのトピックブランチでは、作業結果を失わないために中途半端な状態でも意図的にコミットするようにしています。その際につけるコメントを「作業中断時コミット」としていますが、流石にmasterの、しかも最初のコミットがそのコメントなのはいただけません。



しかも2つ目のコミットを実施した直後に気づいたので、単純に`git commit --amend`するだけでは対処できず。

以下の方法でそれらしいコメントに修正することができたので、記録しておきます。

#注意事項
チームで開発しているプロジェクトでは、rebaseは禁じ手かなと思っています。
今回の事例はあくまで個人開発プロジェクトであり、影響範囲がわかっているので実施しました。

#方法

最初のコミットを指定するときは、--rootオプションを使います。

```
$ git rebase -i --root
```
エディタが起動します。

```
pick 1b833b2 作業中断時コミット
pick 62d0d4f 最低限の計算ができるようになった。商品数はまだ固定。
```
編集します。

```
r 1b833b2 作業中断時コミット
pick 62d0d4f 最低限の計算ができるようになった。商品数はまだ固定。

（以下略）
```

保存後、すぐに別のエディタが起動しますので、ここでコメントを書き換えます。

変更前

```
作業中断時コミット
  
# Please enter the commit message for your changes. Lines starting
# with '#' will be ignored, and an empty message aborts the commit.
（以下略）
```

変更後

```
init
  
# Please enter the commit message for your changes. Lines starting
# with '#' will be ignored, and an empty message aborts the commit.
（以下略）
```

保存します。

```
Successfully rebased and updated refs/heads/master.
```

のように表示されたら成功です。
あとは、リモート側に強制プッシュしておきます。
（チーム開発時には禁じ手です。個人開発で、影響範囲がわかっているからできること。。。）


```
$ git push -f
```

リモート側も更新されていることを確認しましょう。

<img width="433" alt="スクリーンショット 2020-05-15 1.11.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120785/f164be79-db38-a78f-0772-0ab760083189.png">

それらしくなりました。

#反省点
コミット前に、`git status`で、どこのブランチにいるかを確認しましょう。
ESP32 で UART ダンプ

とあるマイコンボードと PC 間の UART 通信がヘンだったので、通信ソフトの問題かな？ 改行コードの変換がうまくいってないようだったのでESP32で受信した文字コードを表示するプログラムでデバッグ。

# 環境

- Arduino 1.8.10 for Linux
- esp32 by Espressif System Version 1.0.3
- WEMOS LOLIN32

# スケッチ

```

//HardwareSerial Serial1(2);
void setup() {
 Serial.begin(115200);
 Serial2.begin(115200);
}

void loop() {
 if (Serial2.available()) {
    int inByte = Serial2.read();
    Serial.println(inByte);
    Serial2.println(inByte);
 }
 delay(1);
}
```

# 配線

- ESP32 の 17が Serial2 の TX
- ESP32 の 16が Serial2 の RX

となるのでGNDと共に測定対象に接続する。
![IMG_20200523_183236.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/934073b0-1956-423d-9c26-8041b3d1334c.jpeg)


写真は、PC につなげた USB シリアルモジュールからの改行コードを調べるようにしている。

# 結果


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/dc46c3f0-6a04-a2ce-8faa-ecddbf1e0b5c.png)

おっと、キーボードから入力した改行を、CRLFにして送信したかったのだが、CRだけになってますね。キーボードのエンターが LF と思い違いしていました。それが原因か・・・。

picocom の --omap オプションを crcrlf に変更して、無事トラブルは解消しました。
IoTデバイスを作ろう～マイコンでWiFiを考える～

先に結論を書きます
ESP-32モジュールがベスト

IoTデバイスを作る際に、通信手法を考えることになります。
Bluetoothや、WiFi,LPWAなどがありますが、距離と、手軽さからWiFi通信をしたい人が多いと思います。
数年前までデバイスをWiFiにつなげたいと思うと非常に大変でしたがESP-8266のおかげで、この敷居が非常に低くなりました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/48a416f5-ff09-5224-c7f8-6c971e86468c.jpeg" width="500">
ESP-8266の対抗馬としてRTL8710なども存在しましたが、メジャーにはなれませんでした。

現在ですと、ESP-32が中心だと思います。
しかし、ESP-32には大きな問題があります。
今回は、ESP-32以外のチップ、モジュールが無いかを含めて少し見てみましょう。

#主要チップ及びモジュール
##Espressif Systems
・ESP-8266
・ESP-32
##Realtek 
・RTL8720
##Siliconlabs
・AMW0x7 
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/cc30096e-3ba9-fa51-8bc1-4c9b9acad109.jpeg" width="350">
##Cypress
・CYW4356
*RaspberryPiなどの通信部に使用されています。
＊CYW4356/CG8674はBluetooth5対応のようです。
##MediaTek
・Azure Sphere　MT3620
MicroSoftのAzureSphere用に作られており、10年の供給保証があります。

##一覧
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/1909def0-beaa-dcd7-8470-556735bbec0d.png)

技適の問題、入手性の問題、電流の問題を考えた場合、ESP-32が一番コスト的にも、使い勝手的にも良いという結果になります。
ただし、Realtek社のチップは、技適取得されているものが少ないですが、ESP-32の対抗馬だけあり、性能面もよく
技適取得されたモジュールがでまわるのを楽しみにしています（Seeeed社ヘ向けて）
周回カウンタ


# 周回カウンタ

モスとのレベルUP効率を検証するコードを発掘。
当時ネットで流行ってて作っただけのものです。
初期はこれで検証できたようだし、Lvupも頑張ってたな


``` 周回カウンタ.js


/**
 * 周回回数をカウントして、jsonを返送する
 *
 * @param num1 {Number}
 * @param num2 {Number}
 *
 */
router.get('/', (req, res) => {

    const num1 = req.body.num1;
    const num2 = req.body.num2;
    // let num1 = 30;
    // let num2 = 80;

    const x1 = 26 * Math.pow(eval(num1) - 1, 2.4);
    const x2 = 26 * Math.pow(eval(num2) - 1, 2.4);
    const x3 = Math.floor(x2 - x1);

    const stage = {
        1: {name: '智彗の風', exp: 1500},
        2: {name: 'マッハ88万', exp: 1820},
        3: {name: '暗黒九泉', exp: 2400},
        4: {name: '栄光の廃墟', exp: 2900},
        5: {name: '瀑布魔術', exp: 3180},
        6: {name: 'グリモア', exp: 3400},
        7: {name: '炎の遁術師', exp: 3480},
        8: {name: 'イエローC', exp: 3980},
    };

    const result = stage;

    Object.keys(stage).forEach((d, i) => {
        const val = stage[d];
        const time = Math.ceil(Number(x3) / Number(val.exp));

        result[d].c = isNaN(time) ? '--' : time;
        if (i + 1 >= Object.keys(stage).length) {
            res.json(result);
        }
    });
});

```
フォルダ内にある全てのCSVを一つのCSVにまとめる方法

inputフォルダ内に複数のCSVファイルがあり、それを一つのCSVにまとめて出力させている

```{python}
import glob
import pandas as pd 

files = glob.glob('input/*.csv')
files.sort()

df_list = []
for file in files: 
    df_next = pd.read_csv(file)
    df_list.append(df_next)
df = pd.concat(df_list, ignore_index=True)
df.to_csv('output.csv')
```
DataFrameを分割して保存する方法

以下のkの値を指定することで、1DataFrameあたりの行数を指定することが可能

```{python}
k = 10000  # 1DataFrameあたりの行数
dfs = [df.loc[i:i+k-1, :] for i in range(0, len(df), k)]
for i, df_i in enumerate(dfs):
    fname = str(i) + ".csv"
    df_i.to_csv(fname)
```
macにJenkinsをインストールする

# 概要
homebrewを利用して、macにjenkinsをインストールします
# homebrewのインストール
homebrewとは、mac用のパッケージ管理システムです。

以下、公式サイトにも書かれていますが、ターミナルで次のコマンドを実行しインストールします。

```sh
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

**■ macOS 用パッケージマネージャー — Homebrew**
https://brew.sh/index_ja.html

## AdoptOpenJDKのインストール
JenkinsのインストールにJDKが必要なため、次のコマンドでAdoptOpenJDK8をインストールします。

```sh
brew cask install homebrew/cask-versions/adoptopenjdk8
```

# Jenkinsのインストール
次のコマンドでインストールしましょう。

```sh
brew install jenkins
```

以上でJenkinsのインストールは完了です。

[次の記事](https://qiita.com/beckyJPN/items/c30da24ac30118d46392) で、起動からセットアップまで進めたいと思います。
Markdownで、DataFrameを表として表示させる方法

以下の関数を実行することで、Markdown用の表形式で出力することができる。

```{python}
def df_table(df):
    for col in df.columns:
        print('|', col, end="", sep='')
    print('|')
    
    for col in df.columns:
        print('| ---- ', end="", sep='')
    print('|')
    
    for row in range(len(df)):
        print('|', end="")
        for col in range(df.shape[1]):
            print(df.iat[row,col],'|', end="", sep='')
        print()

```


```
| sepal length (cm) | sepal width (cm) | petal length (cm) | petal width (cm) | target | 
| ---- | ---- | ---- | ---- | ---- |
| 5.1 | 3.5 | 1.4 | 0.2 | setosa | 
| 4.9 | 3.0 | 1.4 | 0.2 | setosa | 
| 4.7 | 3.2 | 1.3 | 0.2 | setosa | 
| 4.6 | 3.1 | 1.5 | 0.2 | setosa | 
| 5.0 | 3.6 | 1.4 | 0.2 | setosa | 
```

それをコピペしてMarkdownファイルに出力すると、
以下のように表として表示することができる。

| sepal length (cm) | sepal width (cm) | petal length (cm) | petal width (cm) | target | 
| ---- | ---- | ---- | ---- | ---- |
| 5.1 | 3.5 | 1.4 | 0.2 | setosa | 
| 4.9 | 3.0 | 1.4 | 0.2 | setosa | 
| 4.7 | 3.2 | 1.3 | 0.2 | setosa | 
| 4.6 | 3.1 | 1.5 | 0.2 | setosa | 
| 5.0 | 3.6 | 1.4 | 0.2 | setosa |
【Laravel】マジックナンバーの解決方法

#マジックナンバーとは
>プログラムにおけるマジックナンバー（英: magic number、魔法の数字）とは、何らかの識別子もしくは定数として用いられる、プログラムのソースコード中に書かれた具体的な数値である。

ex)

```php:UserController
public function store()
{
    User::create(['user_type' => 1);
}
```

あとあと1ってなによ？となる

#解決方法

#1 定数

クラス定数として定義しておいて、使いたいところで呼び出す

```php:User

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class User extends Model
{
    protected $fillable = [
        'user_type',
    ];

    const ADMIN  = 1;
    const NORMAL = 2;
    const ZAKO   = 3;
}

```

```php:UserController
public function store()
{
    User::create(['user_type' => User::ADMIN);
}
```

##Enum
列挙型

PHPにはないので、パッケージなりで導入
色々あるので用途に合うやつ選択

数が多いならこっちがよさげ...?

```
composer require bensampo/laravel-enum
```

```php

<?php

namespace App\Enums;

use BenSampo\Enum\Enum;

final class UserType extends Enum
{
    const Admin = 1;
    const Normal = 2;
    const Zako = 3;
}
```

```php:UserController
public function store()
{
    User::create(['user_type' => UserType::Admin);
}
```

##Config

```php:usertype.php
<?php

return [
    'Admin' => 1,
    'Normal' => 2,
    'Zako' => 3,
];
```


```php:UserController
public function store()
{
    User::create(['user_type' => config('usertype.Admin')]);
}
```


不備、より良い方法有りましたら教えていただけますと助かります
Vue + Apollo + GraphQLを使っていてmutationの後にUIが更新されない場合

Apolloを使っていてmutationを使ってデータの更新をした場合、updateを呼んでキャッシュを更新する必要がありました。ドキュメントに書いていたけど見つけるまでハマったのでメモ。


```
updateRelationship(relationship, variables) {
        this.$apollo.mutate({
          mutation: updateCompanyUserRelationship,
          variables: variables,
          // updateを呼んであげる
          update: (store, {data: {todo}}) => {
            const data = store.readQuery({query: userQuery, variables: {company_id: this.currentCompany.id}});
            store.writeQuery({
              query: userQuery,
              variables: {
                company_id: this.currentCompany.id
              },
              data
            });
          },
        }).then(() => {
          this.$notify({
            group: 'foo',
            title: 'ユーザー情報を更新しました。',
          });
          this.$refs['modal'].hide();
          this.refresh();
        });
      },
```
HTMLでフォームを作成する


今回、某プログラミングスクールで学習した事をアウトプットしたいと思います！

# 完成図
![Image from Gyazo](https://i.gyazo.com/8c29e6f8ae2e709b270804886b88fda4.png)


# 早速実践！！

```index.html

~省略〜

        <h3>メールで予約</h3>
        <form>
          <input type="text" placeholder="名前を入力してください"><br>
          <textarea placeholder="予約日時やご要望をお書きください"></textarea><br>
          <label>
            <input type="radio" name="RadioGroup1" value="0">男性
          </label><br>
          <label>
            <input type="radio" name="RadioGroup1" value="1">女性
          </label><br>
          <select>
            <option value="0">学生</option>
            <option value="1">社会人</option>
          </select>
          <div class="questionaire">
            Maison Avalloの利用は初めてですか？<br>
            <label>
              <input type="checkbox" name="Checkbox" value="0">
                初めて
            </label>
            <label>
              <input type="checkbox" name="Checkbox" value="1">
                2回目以降
            </label><br>
          </div>
          <input type="submit" value="予約メールを送る">
        </form>

~省略~
```
<br>
# それでは解説します！

# form要素
form要素は、「アンケートフォーム」や「お問い合わせフォーム」を表すブロック要素です。

# input要素
フォームの入力欄や実行ボタンなどを作成することができる要素です。
input要素にはtype属性というものがあり、それを指定することによって様々な種類のフォーム部品を作り出すことができます。

text : １行のテキスト入力欄を作成します
checkbox : チェックボックスを複数作成することができます
radio : 複数の中から１つしか選択できない、ラジオボタンを作ります
submit : 送信ボタンを作ります

# textarea要素
複数行のテキスト入力欄を作成する要素です。

# value属性
送信ボタンを押したときに、どのような値が送られるのかを決めることができます。

# placeholder属性
入力フォームに仮の文字列を入れることができます。

# label要素
フォームの構成部品（一行テキストボックス・チェックボックス・ラジオボタン等）と、 その項目名（ラベル）を明確に関連付けるための要素です。ラジオボタンとテキストをlabel要素で囲むことによって、文字の部分をクリックしたときもラジオボタンを選択することができます。クリックがしやすくなり、デザインの幅も拡がるというメリットがあります。

# select要素
フォームの選択メニューを表す要素です。選択肢全体を囲みます。

# option要素
メニューの選択肢を作成するときに使用します。この要素内の文字列が、メニューの選択肢として表示されます。option要素で指定する選択肢は、select要素の間に記述します。

<br>
最後まで見て頂きありがとうございます！！
この記事が少しでも参考になれば嬉しいです:pray_tone2:
[GAS] Googleカレンダーから今日の予定を引っ張ってくる!

## やりたいこと
今日の予定を引っ張ってきたい。

## つまづくこと
今日の00:00～23:59までのやつがほしいのに・・・。

## 結論
### コード
```js
function get_today_calendar_events(calendar_id) {
  // Googleカレンダーにアクセス
  calendar = CalendarApp.getCalendarById(calender_id)

  // momentで今日00:00を取得 → string形式に
  var string_today = Moment.moment().format('YYYY-MM-DD 00:00:00')
  // momentに変換
  var moment_today = Moment.moment(string_today)
  // dateに変換
  var date_start = moment_today.toDate()
  // 1日後を作成
  var date_end = new Date(date_start.getTime() + (1* 24 * 60 * 60 * 1000))
  var events = calendar.getEvents(date_start, date_end)

  console.info('Number of events: ' + events.length)
  return events
}
```

### 使うもの
- [Moment.js](https://momentjs.com/)
    - ライブラリのスクリプトID `MHMchiX6c1bwSqGM1PZiW_PxhMjh3Sh48`

### 応用
`(1* 24 * 60 * 60 * 1000)`
の1 → 2, 3,・・・ と変えていけば、何日以内とかも可能。

起点となる日付をずらせば、明日の予定なども取得できる。
sam apiGateway lambda callback 502


# SAM apiGatewayに返却するフォーマット

## 経緯
Googleの検索をAPI以外でやりたくなりました。

そこでGoogle検索になんどもAPIを介さずにアクセスしていたら怒られました。
サーバからやっていたら too meny access 〜〜というエラーが返されるようになり、そこから数時間使えない。
API使えばいいいので困りはしないけれど、解決しておきたくて、ちょっと迂回してみました。

試したところIPを変えれば動くため、動的に変わるIPを持つ仕組みに乗っかろうと考えてlambdaを、
前段に通信が必要だったためapiGatewayを設けて apiGateway + lambda の構成になりました。

この構成で必要になる、lambdaからapiGatewayに返すcallbackのフォーマットを残しておきます。

### lambdaからapiGatewayに返すコールバックフォーマットはこうすればOK

    var response = {
        "statusCode": 200,
        "headers": {
            "my_header": "my_value"
        },
        "body": JSON.stringify(responseBody),
        "isBase64Encoded": false
    };
miniKFのインストール（mac）

## 前提

macOSにminiKFをいれたので、簡単なメモを残します。基本的には公式ドキュメント通り（macOS用）にいきます。

#### 公式ドキュメント

- [公式ドキュメント１](https://www.kubeflow.org/docs/started/workstation/getting-started-macos/)
- [公式ドキュメント２](https://www.kubeflow.org/docs/started/workstation/getting-started-minikf/)

## 1. VagrantとVirtual Boxのインストール

[公式ドキュメント１](https://www.kubeflow.org/docs/started/workstation/getting-started-macos/)にあるように、上記２つをインストールする。ダウンロードして、ポチポチ進めていくだけなので詳細は省略。Vagrantが入ったかどうかは以下のコマンドで確認。

```{bash: terminal}
$ which vagrant
/usr/local/bin/vagrant
```

## 2. 適当なディレクトリを作成して、miniKFをインストール

[公式ドキュメント２](https://www.kubeflow.org/docs/started/workstation/getting-started-minikf/)にあるコマンドを順番に実行していく。

```{bash: terminal}
$ mkdir -p {適当なディレクトリ}
$ cd {適当なディレクトリ}
```

```{bash: terminal}
$ vagrant init arrikto/minikf
A `Vagrantfile` has been placed in this directory. You are now
ready to `vagrant up` your first virtual environment! Please read
the comments in the Vagrantfile as well as documentation on
`vagrantup.com` for more information on using Vagrant.}
```

```{bash: terminal}
# 私の環境で30分ぐらいかかりました、
$ vagrant up
Bringing machine 'default' up with 'virtualbox' provider...
==> default: Box 'arrikto/minikf' could not be found. Attempting to find and install...
    default: Box Provider: virtualbox
    default: Box Version: >= 0
==> default: Loading metadata for box 'arrikto/minikf'
    default: URL: https://vagrantcloud.com/arrikto/minikf
==> default: Adding box 'arrikto/minikf' (v20200305.1.0) for provider: virtualbox
    default: Downloading: https://vagrantcloud.com/arrikto/boxes/minikf/versions/20200305.1.0/providers/virtualbox.box
Download redirected to host: storage.googleapis.com
==> default: Successfully added box 'arrikto/minikf' (v20200305.1.0) for 'virtualbox'!
Plugin 'vagrant-persistent-storage' is missing, running `vagrant plugin install vagrant-persistent-storage`...
Installing the 'vagrant-persistent-storage --version '>= 0.0.47'' plugin. This can take a few minutes...
Fetching vagrant-persistent-storage-0.0.48.gem
Installed the plugin 'vagrant-persistent-storage (0.0.48)'!
Plugin installed successfully, please re-run `vagrant up`.
```

`please re-run vagrant up`と表示されているので、再度実行。

```{bash: terminal}
# 5分程度かかりました
$ vagrant up
Bringing machine 'default' up with 'virtualbox' provider...

...（長いので、途中を省略します）...

==> default: Machine 'default' has a post `vagrant up` message. This is a message
==> default: from the creator of the Vagrantfile, and not from Vagrant itself:
==> default:
==> default:     Welcome to MiniKF!
==> default:     Visit http://10.10.10.10/ to get started.
==> default:
```



## 3. 起動確認

以下のコマンドで作成した適当なディレクトリ名が表示されているかで、起動確認をとることができる。

```{bash: terminal}
$ vagrant global-status
id       name    provider   state   directory
------------------------------------------------------------------------
5a28c3e  default virtualbox running {作成した適当なディレクトリ名}
```

また、`10.10.10.10`にアクセスして確認することも可能。私の環境では、以下のページが表示された。

![sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/574616/0e24e4b8-68eb-e785-8f03-67537505d329.png)
Slack GitHubアプリ スラッシュコマンド一覧

Slackにはアプリ用のコマンドを実行するスラッシュコマンドと呼ばれるものがあります。

SlackのGitHub公式アプリにも`/github`というスラッシュコマンドがあるのですが、どのような機能を提供しているのか、まとまっている情報源が全然見当たりませんでした。

しばらく探したところ、連携機能のGitHubプロジェクトのドキュメントに記載があったので、こちらでもまとめようかと思います。

# コマンド一覧

## GitHubアプリの招待

```
/invite @github
```
GitHubアプリを利用する場合、slackチャンネルに招待する必要があります。これはその際に使います。
GitHubのスラッシュコマンドではないのですが、一応紹介します。


## GitHub認証

```
/github signin
```
SlackにGitHubアプリを入れたあと、自分のGitHubアカウントの情報を利用するために認証する必要があり、その際に利用します。

## 連携リポジトリ設定
```
/github subscribe owner/repo
/github unsubscribe owner/repo
```

連携するリポジトリを選択します。
連携する場合は`subscribe`、連携を解除する場合は`unsubscribe`を使います。
`owner`と`repo`には対象とするGitHubリポジトリのオーナー（オーガナイゼーション）名、リポジトリ名をそれぞれ指定してください。

```
/github subscribe list
```
現在連携しているリポジトリは上記コマンドで確認できます。

## 通知対象設定
```
/github subscribe owner/repo [feature]
/github unsubscribe owner/repo [feature]
```
`[feature]`にアクション名を指定することで通知するアクションの通知ON/OFFができます。
選択可能なアクションは下記のようになっています。

| feature             | 説明              | 初期設定              |
|:--------------------|:------------------|:------------------|
| issues              | イシューのオーブン＆クローズ             | ON              |
| pulls               | プルリクエストの生成もしくはマージ         | ON              |
| statuses            | プルリクエストのStatus                | ON              |
| commits             | default branchに対する新しいコミット<br>初期設定ではmasterブランチ             | ON              |
| deployments         | deploymentsステータスの更新          | ON              |
| public              | リポジトリのpribateからpublicへの変更   | ON              |
| releases            | リリースの公開                       | OFF              |
| reviews             | プルリクエストのレビュー                | OFF              |
| comments            | プルリクエストとイシューに対するコメント     | OFF              |
| branches            | ブランチの作成と削除                  | OFF              |
| commits:all         | 全てのブランチに対する全コミット          | OFF              |
| +label:"your label" | イシュー、プルリクエスト、コメントへのラベル検索した結果  | OFF     |

ちょいちょい意訳入ってます。
また、`+label`の使い方もいろいろとTipsがありそうなので、詳細を確認したい方は[原文](https://github.com/integrations/slack)を御覧ください。

また、複数同時に設定することも可能です。

```
/github subscribe owner/repo reviews comments
```

## プルリクエスト / イシュー操作
```
/github open [owner/repo]
```

新しいイシューをオープンします。

```
/github open [pull request link]
/github close [issue link]
```
既存のプルリクエストもしくはイシューをオープン、クローズする場合は`[issue link]`を指定します。

# 参考

https://github.com/integrations/slack
Lチカで始めるテスト自動化(2)テストスクリプトの保守性向上

##1. はじめに
[Lチカで始めるテスト自動化](https://qiita.com/pbjpkas/items/fd4bd2689deda2d793aa)の続編です。

テストスクリプトを書いていて次のようなことが気になりました。

- 粒度が細かくてアセンブラを書いているような気がしてくる
- テストを改修するたびに "アセンブラ" を書き直すのはコーディングレベルのミスを起こしそう

```sh:テストスクリプトのサンプル
# relay ON
send,n
sleep,1
send,v
rcvd
eval_int_gt,1600
eval_int_lt,2000
```

そこで下記2点を目標にテストスクリプトの保守性向上を図ります。

1. テストケースのレベルでテストスクリプトをレビュー、チェックできるようにする
2. （単機能の）テストスクリプトを再利用しやすくする

具体的には[共有スクリプト](https://www.google.co.jp/search?hl=ja&as_q=共有スクリプト+自動テスト)の考え方を参考にします。

1. 個々の機能ごとにスクリプトを切り出してパーツ化する
2. テストの内容に合わせて個別のスクリプトを連結する "スクリプトジェネレータ" を作る

##2. テストスクリプトのパーツ化
[全部入りのテストスクリプト](https://qiita.com/pbjpkas/items/fd4bd2689deda2d793aa#74-%E3%83%86%E3%82%B9%E3%83%88%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88)を個々の機能ごとに分割します[^1]。それぞれのスクリプトファイルはscript-partsフォルダへ配置します。

```sh:setup.csv
# setup
# wait for if restart Arduino Uno
sleep,2
#
# Open UART
open_uart,COM3
#
# model and version check
send,i
rcvd
eval_str_eq,Arduino Test Bench Ver.100
#
# relay assigned Pin number check
send,p
rcvd
eval_int_eq,12
```

```sh:operation_relay_on.csv
#
# relay ON
send,n
sleep,1
```

```sh:operation_relay_off.csv
#
# relay OFF
send,f
sleep,1
```

```sh:eval_int_gt1600-lt2000.csv
#
# eval_int_gt1600-lt2000
send,v
rcvd
eval_int_gt,1600
eval_int_lt,2000
```

```sh:eval_int_lt0200.csv
#
# eval_int_lt0200
send,v
rcvd
eval_int_lt,200
```

##3. スクリプトジェネレータ
個別のテストスクリプトをテストの内容に合わせてバッチファイルで連結します。

```script-generator.bat
REM script generator for LED Light Test Bench

set script_parts_dir=script-parts
set script_file_name=script.csv

REM テストベンチのセットアップ
copy /b %script_parts_dir%\setup.csv %script_file_name%

REM リレーをONし、LEDの電圧が1600mVより大きく2000mVより小さいこと
copy /b %script_file_name% + %script_parts_dir%\operation_relay_on.csv
copy /b %script_file_name% + %script_parts_dir%\eval_int_gt1600-lt2000.csv

REM リレーをOFFし、LEDの電圧が200mVより小さいこと
copy /b %script_file_name% + %script_parts_dir%\operation_relay_off.csv
copy /b %script_file_name% + %script_parts_dir%\eval_int_lt0200.csv
```

##4. 保守性向上の例
例として「テスト対象機器に電源を投入しただけではLEDが点灯していないこと」のテストを追加します。

9行目、10行目にeval_init_lt0200.csvを再利用してテストを追加できました。

```script-generator_v2.bat
REM script generator for LED Light Test Bench

set script_parts_dir=script-parts
set script_file_name=script.csv

REM テストベンチのセットアップ
copy /b %script_parts_dir%\setup.csv %script_file_name%

REM LEDが点灯していないこと(LEDの電圧が200mVより小さいこと)
copy /b %script_file_name% + %script_parts_dir%\eval_int_lt0200.csv

REM リレーをONし、LEDの電圧が1600mVより大きく2000mVより小さいこと
copy /b %script_file_name% + %script_parts_dir%\operation_relay_on.csv
copy /b %script_file_name% + %script_parts_dir%\eval_int_gt1600-lt2000.csv

REM リレーをOFFし、LEDの電圧が200mVより小さいこと
copy /b %script_file_name% + %script_parts_dir%\operation_relay_off.csv
copy /b %script_file_name% + %script_parts_dir%\eval_int_lt0200.csv
```

##5. おわりに
生のテストスクリプトを読み書きするのと比べて、スクリプトジェネレータ（バッチファイル）はスクリプトの再利用やテストケースの粒度での改修、チェックがしやすくなりました。

[^1]: 連結したときに読みやすいよう適宜コメントを追加します。
[Kubernetes]Graceful Shutdownしたい

![スクリーンショット 2020-05-23 17.55.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9307/40fc6e93-ece2-e04c-a4f3-196676e738d9.png)
Infra Study Meetup #2「VM 時代の開発とKubernetes による Cloud Native な開発のこれから」
https://www.youtube.com/watch?v=9YpN9-RCwWE
シンプルなImageEffect　その10。TilePattern

Twitterでアップした、TilePatternImageEffectのシェーダコードを貼っておきます。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">今日のシンプルなImageEffect「TilePattern」<br><br>走査線と似ているけど、こちらはVPOSを使っていないので#pragma target 3.0が不要＆画像を切り替えることで模様を切り替えられます。 <a href="https://t.co/btPXdVQrAc">pic.twitter.com/btPXdVQrAc</a></p>&mdash; MIYAKE (@ScreenPocket) <a href="https://twitter.com/ScreenPocket/status/1260390662735724544?ref_src=twsrc%5Etfw">May 13, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

画面に均一なパターンで１枚画像を重ね合わせて、雰囲気を彩ることが出来ます。
画像を変更することで、色々カスタマイズが可能です。
また、**Tile用のテクスチャは必ずRepeart属性にする**のをお忘れなく！
今回のコードでは、テクスチャの白みに合わせて、二乗色（明度が下がりつつ、彩度が上がるようなイメージ）を載せています

```glsl:TilePattern.shader
Shader "ScreenPocket/ImageEffect/TilePattern"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _TileTex ("Tile Texture", 2D) = "black" {}
        _TileCountH ("Tile Count Horizontal", Float) = 64
    }
    
    SubShader
    {
        // No culling or depth
        Cull Off ZWrite Off ZTest Always

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float4 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };
            
            float _TileCountH;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv.xy = v.uv;
                o.uv.zw = v.uv * _TileCountH;
                //縦横比で縦のドット数を補正する
                o.uv.w *= _ScreenParams.y / _ScreenParams.x;
                return o;
            }

            sampler2D _MainTex;
            sampler2D _TileTex;

            fixed4 frag (v2f i) : SV_Target
            {
                half4 col = tex2D( _MainTex, i.uv.xy );
                float rate = tex2D( _TileTex, i.uv.zw  ).r;
                col = lerp(col,col*col,rate);
                return col;
            }
            ENDCG
        }
    }
}
```
![RectTile.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61266/6b8767d3-d8b4-1643-cc82-88dc65962f6c.png)
↑の画像を_TileTexに流し込んだ↓の見た目が結構気に入っています。
![スクリーンショット 2020-05-23 17.53.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61266/02d874f5-4623-790e-edb2-4691b78609fa.png)
とうとう１０個目ですね。
手軽に導入しやすい＆組み合わせやすいImageEffectを今後も貼っていきたい所です。
QuickSight の使い方 - ユーザの招待とデータ共有編

##はじめに
今回は、QuickSight を用いたユーザの招待と、データの共有方法について簡単に紹介したいと思います。


■やりたいこと
・閲覧権限のみを付与した ユーザを作成したい（ユーザは、IAMユーザと紐付けたい）
・QuickSight 上の可視化してある特定の分析データを、閲覧権限を持ったユーザと共有したい

##ユーザの招待方法
###ユーザを招待する側の設定
QuickSight の閲覧ユーザの招待方法について、紹介したいと思います。
手順は以下です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321349/cdd18703-0aff-870a-6b93-64a500011bc6.png)
①QuickSight の画面右上のアイコンをクリックし、「QuickSIght の管理」を選択します。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321349/f09da182-67c2-be16-73b9-1aa1ba945811.png)
②画面左の「ユーザを管理」を選択したら、「ユーザを招待」を選択


![2020-05-21_12h09_14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321349/919080bd-80c3-23bb-c2f6-ad05f5aa488d.png)
③「ユーザを招待」を選択すると、ユーザ登録となりますので、下記の情報を入力します。

■情報

- ユーザ名：登録する IAM ユーザ名
- Eメール：ここ宛に QucikSight 登録のメールが届く
- ロール；閲覧・作成・管理のどこまでのロールを許可するかを選択
- IAMユーザ：作成するユーザが、既存のIAMユーザと紐付ける場合は「はい」を選択

###招待された側の設定
ここからは、QuickSight アカウントに招待された側の手順になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321349/eb49f62e-72ea-76a3-40ec-6aaaf0744b34.png)
①上記で設定したメールアドレス宛に QuickSight からメールが届いているので確認し、クリックします

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321349/46879665-58ba-3f96-f30c-36bb26ba0364.png)
②下記の情報を入力し、無事にサインインできたら完了です。

■入力情報
・QuickSight のアカウント名（これは管理者に確認）
・IAM ユーザ名
・IAM ユーザのログインパスワード

##データ共有
###ダッシュボードの公開
次に、閲覧権限を有した ユーザと QuickSight 上で可視化したデータを共有する手順を紹介します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321349/230d150a-08d2-f9ef-7b8a-65fd57afe2b0.png)
①共有したいデータのダッシュボードを開いた状態で、右上の「共有」を選択
②「ダッシュボードの公開」を選択
(※「分析の共有」は「閲覧」権限のユーザとは共有できません。)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321349/757687d6-cb39-b431-0ec6-531de1ba46f1.png)
③公開するダッシュボードの名前を決めたら、「ダッシュボードの公開」を選択

以上の手順で、閲覧権限ユーザは、公開されたダッシュボードを見ることが可能となります。
データの予測などを実施する場合は、「作成」や「管理者」権限を持ったユーザを招待し、
「分析の共有」を選択する必要があります。

##おわりに
QuickSight にユーザの招待方法と、データ共有方法は以上となります。
上記の設定を利用することで、複数のユーザと可視化したデータを共有することができるようになります。
特定のデータのみを複数のユーザと共有したい場合など、是非、使用して下さい。