OmniAICreator/Qiita-1.07M huggingface dataset:
【React × TypeScript】作成したコンポーネントにcssを適用する方法

# １．はじめに

`create-react-app` でポートフォリオを作成しています。


### 困ったこと

”ボタンコンポーネント”みたいなものを作り、それを中央寄せにしたり、
ボーダーを付け加えたりと「css」を適用する方法がいまいちわからず困っていましたが、
解決できたのでその方法をシェアしておきます。


# ２．propsの受け渡し

Reactでは「props」という仕組みを使って、”子コンポーネント”から”親コンポーネント”にデータを簡単に受け渡すことが出来ます。

今回は、”クリックできるボタン”のようなコンポーネントを”子コンポーネント”として作成し、それを”親コンポーネント”のページに設置して、propsの受け渡しを実装します。


### コード概要

まずは”子コンポーネント”からです。

``` ClickButton.tsx
import React from "react";
import scss from "./button.module.scss";

interface Props {
  label: string;
  style: any;
}

const ClickButton: React.FC<Props> = (props) => {　// *1
  return (
    <>
      <div className={scss.button} style={props.style}> // *2
        {props.value}　// *3
      </div>
    </>
  );
};

export default ClickButton;
```

`*1`のラインにある`(props)`を記述することで、そのあとの`*2` `*3`の`{props.style}`や`{props.label}`を「props」としてコンポーネント間を経由して、受け渡すことが出来るようになります。 

`{props.style}`は、この”ClickButtonコンポーネント”を親のコンポーネントで使うときに、`divタグ`に対して`style={{ margin: 0 auto }}`、を適用するために（※それ以外でも使用できます）記述しました。

`{props.value}`は、”ClickButtonコンポーネント”を配置する場所がいくつかあるのですが、その場所ごとに中身の文字を変えたかったので記述しました。

例）
![スクリーンショット 2021-05-23 0.41.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1472874/241f01c7-fe9d-9750-af78-1fa417500b77.png)


![スクリーンショット 2021-05-23 0.41.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1472874/51ce5549-9fef-293f-200c-0120c9f30389.png)


次に、実際にpropsの”中身”を流し入れる”親コンポーネント”のコードです。


```About.tsx
import React from "react";
import ClickButton from "../../component/button/ClickButton"; 
import scss from "./about.module.scss";
import WorkImg from "../../component/workImg/WorkImg";

const About = () => {
  return (
    <div className={scss.container}>

      // 中略

      <ClickButton value={"ABOUT MORE"} style={{}}/> 
      <WorkImg />
      <WorkImg />
      <WorkImg />
      <WorkImg />
      <WorkImg />
      <WorkImg />
      <ClickButton value={"WORKS"} style={{ margin: "0 auto" }}  /> 
    </div>
  );
};

export default About;

```

さきほどの”子コンポーネント”で指定したpropsに、下記コードのように”実際に表示させたい”（適用させたい）数値や値を入力することで、propsのデータ受け渡しが可能になりました。

`<ClickButton value={"ABOUT MORE"} style={{}}/> `
`<ClickButton value={"WORKS"} style={{ margin: "0 auto" }}  />`


### 補足

propsとして渡す属性を`style`ではなく`className`とすれば、親コンポーネントで`@material-ui/core`の`{makeStyle}`を使って、いわゆる`css`のようにスタイルをまとめて指定する事もできます。

# ３．まとめ

プログラミングのコードを書く上で、”流れ”や”つながり”を意識することは本当に重要だなと感じています。

まだまだ、プログラムを書く”考え方”みたいなものが身に付いていないのですが、少しずつ理解を深めながら頑張っていきます！


# 参考サイト

[Lesson06: 初めてのprops](http://basic-react.axlight.com/html/lesson-06.html)
【Python】ロギングでGmail送信する

ロギングの全体像としては下の記事をご覧いただきまして、今回はメール送信部分のみ扱います。

<https://qiita.com/ryoheiszk/items/362ae8ce344966b5516c>

# はじめに

Gmail経由でエラーログを送信したいと思ったわけですが、これといった記事が見つからなかっため困っていました。

何とか動作したため、ここに共有しておきます。

# 全体の流れ

`logging.handlers.SMTPHandler()`はTLSに対応していないため、オーバーライドして`TlsSMTPHandler()`を作ります。

そこから生成したインスタンスにおいて、Gmail用の設定を流し込んで完了です。

# 実際のコード

```python:module.py
import logging
import logging.handlers


class TlsSMTPHandler(logging.handlers.SMTPHandler):
    """
    loggingをGmailで送信させるために、SMTPHandlerをオーバーライドしてTLSに対応させる。
    参考: https://gist.github.com/Agasper/8ef727892f7d8d63e0ac
    """
    def emit(self, record):
        """
        Emit a record.

        Format the record and send it to the specified addressees.
        """
        try:
            import smtplib
            try:
                from email.utils import formatdate
            except ImportError:
                formatdate = self.date_time
            port = self.mailport
            if not port:
                port = smtplib.SMTP_PORT
            smtp = smtplib.SMTP(self.mailhost, port)
            msg = self.format(record)
            msg = "From: %s\r\nTo: %s\r\nSubject: %s\r\nDate: %s\r\n\r\n%s" % (
                self.fromaddr,
                ",".join(self.toaddrs),
                self.getSubject(record),
                formatdate(), msg)
            if self.username:
                smtp.ehlo()  # for tls add this line
                smtp.starttls()  # for tls add this line
                smtp.ehlo()  # for tls add this line
                smtp.login(self.username, self.password)
            smtp.sendmail(self.fromaddr, self.toaddrs, msg)
            smtp.quit()
        except (KeyboardInterrupt, SystemExit):
            raise
        except:
            self.handleError(record)


def set_logger(module_name):
    """共通のロガーを定義する

    Args:
        module_name (str)

    Returns:
        logger
    """
    logger = logging.getLogger(module_name)

    emailHandler = TlsSMTPHandler(
        mailhost=("smtp.gmail.com", 587),
        fromaddr="from_gmail",
        toaddrs=["to_email"],
        subject="{Urgent} CHECK LOGS",
        credentials=("from_gmail", "google_app_pw")
    )

    formatter = logging.Formatter(
        "%(asctime)s [%(levelname)s] (%(filename)s | %(funcName)s | %(lineno)s) %(message)s")

    emailHandler.setFormatter(formatter)

    logger.setLevel(logging.DEBUG)
    emailHandler.setLevel(logging.WARNING)

    logger.addHandler(emailHandler)

    return logger
```

```python:main.py
import module


logger = source.module.set_logger(__name__)

logger.debug("debug")
logger.info("info")
logger.warning("warning")
```
Running distinct count by ClickHouse

```sql:DDL
CREATE TABLE test_running_sum(
    inventory_id UInt32,
    user_id UInt32,
    timestamp DateTime
) engine = MergeTree()
ORDER BY (inventory_id, timestamp)
```

```sql:DML
INSERT INTO test_running_sum VALUES
(0, 1, '2021-01-01 10:00:00'),
(0, 2, '2021-01-01 10:00:00'),
(0, 3, '2021-01-01 10:00:00'),
(0, 1, '2021-01-01 11:00:00'),
(0, 4, '2021-01-01 11:00:00');
```

こうなって

| inventory\_id | user\_id | timestamp |
| :--- | :--- | :--- |
| 0 | 1 | 2021-01-01 10:00:00 |
| 0 | 2 | 2021-01-01 10:00:00 |
| 0 | 3 | 2021-01-01 10:00:00 |
| 0 | 1 | 2021-01-01 11:00:00 |
| 0 | 4 | 2021-01-01 11:00:00 |

実際に集計するときは `uniqCombinedMerge` / `uniqCombinedState` を WINDOW と一緒に使うと

```sql:
SET allow_experimental_window_functions = 1; -- 2021/05/23 時点では必要
SELECT date_trunc('hour', timestamp) as hour
     , uniqCombined(user_id) as UU
     , uniqCombinedMerge(uniqCombinedState(user_id)) OVER (ORDER BY date_trunc('hour', timestamp)) as `Running UU`
FROM test_running_sum
GROUP BY date_trunc('hour', timestamp)
ORDER BY date_trunc('hour', timestamp);
```

ちゃんとこうなる

| hour | UU | Running UU |
| :--- | ---: | ---: |
| 2021-01-01 10:00:00 | 3 | 3 |
| 2021-01-01 11:00:00 | 2 | 4 |

真の UU との比較がしたければ `uniqCombined` を `uniqExact` に変えたものも出せば良い

```sql
SELECT date_trunc('hour', timestamp) as hour
     , uniqCombined(user_id) as `UU`
     , uniqCombinedMerge(uniqCombinedState(user_id)) OVER (ORDER BY date_trunc('hour', timestamp)) as `Running UU`
     , uniqExact(user_id) as `Exact UU`
     , uniqExactMerge(uniqExactState(user_id)) OVER (ORDER BY date_trunc('hour', timestamp)) as `Exact Running UU`
FROM test_running_sum
GROUP BY date_trunc('hour', timestamp)
ORDER BY date_trunc('hour', timestamp);
```

当然このサイズでは差が出ない

| hour | UU | Running UU | Exact UU | Exact Running UU |
| :--- | ---: | ---: | ---: | ---: |
| 2021-01-01 10:00:00 | 3 | 3 | 3 | 3 |
| 2021-01-01 11:00:00 | 2 | 4 | 2 | 4 |


Reference
===
* ClickHouse Documentation
  * [&#91;experimental&#93; Window Functions - Window Functions | ClickHouse Documentation](https://clickhouse.tech/docs/en/sql-reference/window-functions/#experimental-window-functions)
  * [SQL Reference / Aggregate Functions / Reference / uniqCombined](https://clickhouse.tech/docs/en/sql-reference/aggregate-functions/reference/uniqcombined/)
  * [SQL Reference / Aggregate Functions / Aggregate Function Combinators](https://clickhouse.tech/docs/en/sql-reference/aggregate-functions/combinators/)
* 2019 年の時点で Sate/Merge に言及していてスゴイ
  * [HyperLogLog feature of ClickHouse - HyperLogLog feature of ClickHouse - Speaker Deck](https://speakerdeck.com/ocadaruma/hyperloglog-feature-of-clickhouse?slide=9)
Arduino UNOとMCP3425で0から2.048000Vまで62uV単位をシリアル出力


STM32L010用に軽量コンパクト版

xNJL5513Rの実験で必要になったために開発

1.SCLとSDAを接続、プルアップも忘れずに
2.電源の接続
3.下記のソースコードを書き込む
4.コンパイル実行で表示されたら終了
5.おわり


```c++

#include <Wire.h>

#define ADD 0x68

//10の割り算 0から1028までは、正しい。主に0から999
//#define DVI10(n) ((n*205)>>11)

//16ビットadcの4ビットの変換テーブル
#define ADC4BIT { 0   , 62 ,125 ,187 ,250 ,312 ,375 ,437 ,500 ,562 ,625 ,687 ,750 ,812 ,875 ,937 }

char ch_hex_a_b[5];
char *ch_hex_a(int l_num)
{
  int a,b,c;
  
  b=l_num/10;
  c=l_num-(b*10);
  a=b/10;
  b=b-(a*10);
  
  ch_hex_a_b[0] = '0' + a;
  ch_hex_a_b[1] = '0' + b;
  ch_hex_a_b[2] = '0' + c;
  ch_hex_a_b[3] = 0;

  return(ch_hex_a_b);
}//ch_hex_a


void setup()
{

  Wire.begin();         //i2cの初期化
  Serial.begin(9600);

    // 7 *(1)待ち
    // 6 *(0)
    // 5 *(0)
    // 4 (0)ワンショット,*(1)連続
    // 3 | (00)12ビット,(01)14ビット
    // 2 | *(10)16ビット
    // 1 I *(00)x1,(01)x2
    // 0 I (10)x4,(11)x8

  //初期値の書き込み
  Wire.beginTransmission(ADD);
    Wire.write(0b10011000); //16bit 15sps PGA x1
  Wire.endTransmission();

} //setup

int read_data()
{
  //2文字の読み込み
  Wire.requestFrom(ADD, 2);

  //戻し
  return ( (Wire.read() << 8 ) + Wire.read() );
}//read_data


int s;   //101
int ii;     //ループカウンタ
int bit4[]=ADC4BIT;

void loop()
{
  s = read_data();
  //s = (65536/2)-1;
  //s = 65536/4;

ii=(s >> 4);
if     ( ii >= 2000 ) { ii = ii - 2000; Serial.print("2.");    }
else if( ii >= 1000 ) { ii = ii - 1000; Serial.print("1.");    }
else                  {                 Serial.print("0.");    }
  
  Serial.print( ch_hex_a( ii ) );
  
  ii = bit4[ s & 0xf ];
  Serial.print( ch_hex_a( ii ) );
  
  Serial.println("");

  delay(1000);
} //loop



```
Herokuデプロイ　流れメモ

# 背景
毎回Herokuデプロイする流れをメモ。

# 使用技術

- Ruby 2.6.7
- Rails 6.0.3.6
- MySQL 5.6.51

# 流れ

- （リモートリポジトリとローカルリポジトリのデータを一致させておく）
    - ローカル→リモート：　`git push`
    - リモート→ローカル：
        - リモート→ローカル(origin/master)：　`git fetch origin master`
        - origin/master→master：　`git merge origin/master`
- Herokuへpush
    - `git push heroku`
- DBをリセット
    - `heroku run rails db:migrate:reset RAILS_ENV=production DISABLE_DATABASE_ENVIRONMENT_CHECK=1`
- マイグレーション
    - `heroku run rails db:migrate`
- シード
    - `heroku run rails db:seed`
- デプロイ状態を確認
    - `heroku open`

# 所感

個人的に有用だと思うのは、DBリセットのコマンド。
かなりググって探り当てたコマンドなので、ありがたみが深い。
Laravelのvalidationの表現を広げる【配列、階層】

#普通に個別に配列対応
validation関連でいろいろな表現があることがわかったので、整理していきます。

````php:通常の配列の場合
<input name="array[name]" />
<input name="array[title]" />
````

配列の場合、どう書いていくのかというと、`.`で区切ります

````:こんな具合に区切ります
'array.name'
'array.title'
````
実際にvalidationのruleを作ると、下記になります。

````php:validaton
public function rules()
    {
        return [
            'array.name' => 'required|string',
            'array.title' => 'required|string',
        ];
    }
````

#すべてに対して対応する場合

````php:validaton
public function rules()
    {
        return [
            'array.*' => 'required|string',
        ];
    }
````
でまとめることができます。
しかしながら、これだと一つ通過すると、他も通ってしまうようです。
（間違ってたら、教えてください）

# さらに階層を深めて実施する場合

````php:validaton
public function rules()
    {
        return [
            'array.*.name' => 'required|string',
        ];
    }
````

3階層目のnameに対して、共通のvalidationを実施することができます。
Vue CLI 3をインストールしてみた

vagratの仮想環境でVue CLI 3をインストールしてみました
忘備録として記載します

# はじめに
vueを使用するには、nodeが必要です
インストールした際のnodeのバージョンはこちら

```
$node -v
v15.7.0
$ npm -v
7.4.3
```

ついでに私の仮想環境では、nodenvをいれバージョンを切り替えれるようにしてます。
[Node.js バージョン管理nodenvを使ってみる](https://qiita.com/erichama427/items/8f5db41b3d731083b8aa)

またVue CLIの公式サイトはこちら

https://cli.vuejs.org/

#インストール
npmを使ってインストールします

```
npm install -g @vue/cli
```

ついでにVue CLIの上限バージョン指定したい場合は、こちら

```
npm install -g @vue/cli@^3.1.0
```

#プロジェクトの作成
vue createを使って[hello-world]というプロジェクトを作成します

```
vue create hello-world
```

こちらを叩くと、どのVue CLIバージョンのプロジェクトを作るか選択できます

```
Vue CLI v4.5.12
┌───────────────────────────────────────────┐
│                                           │
│   New version available 4.5.12 → 4.5.13   │
│     Run npm i -g @vue/cli to update!      │
│                                           │
└───────────────────────────────────────────┘

? Please pick a preset: 
  Default ([Vue 2] babel, eslint) 
❯ Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
  Manually select features 
```
その他、色々選択が出てきますが、

# 実行する

フォルダが作成できているので、対象に移動し、[npm run serve]で実行します

```
 $ cd hello-world
 $ npm run serve
```

##### エラー発生
私がこれを実行する以下のエラーがでました、、順々にエラーを解消していきました


>エラー内容
Error: Cannot find module '@vue/cli-plugin-eslint'


vue/cli-plugin-eslintがないのでインストール

```
$ npm install -g @vue/cli-plugin-eslint`
```
次にこちらが発生

> エラー内容
Error: Cannot find module 'vue-template-compiler/package.json'


こちらを参考に以下のを実行
https://qiita.com/kurosuke1117/items/908ff2eefd7697048254

```
$ npm i -g @vue/compiler-sfc

#　上だけじゃうまく行かなかったのでこちらも実行
$ npm install vue-template-compiler
$ vue add vue-template-compiler
```
ここまでやると別のエラーが

> エラー内容
Syntax Error: TypeError: Cannot read property 'parseComponent' of undefined

こちらを参考に以下を実行
https://github.com/vuejs/component-compiler-utils/issues/82

```
npm i @vue/cli-service
```

実行できるようになりました！！よかった

![名称未設定2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276326/ff02a31c-d3f2-ceda-3784-6ef3f180084d.png)


# その他

### vagarnt 環境で実行する場合

https://kawadev.net/vue-cli3-hmr/

vue.config.jsを作成し、内容を変更します
host部分とportを仮想を合わせて変更します

```
module.exports = {
  devServer: {
    host: '192.168.00.00',
    port: '8080',
    watchOptions: {
      poll: true
    }
  },
  configureWebpack: {
    devtool: 'source-map'
  }
}
```

### vue ui実行
vue uiという簡単に操作できるものがあります
vagrant環境の場合-Hオプジョンを使えばIPアドレスも指定できます

```
vue ui -H １92.168.00.00
```


今回はここまで。
これからどんどん学んで深めていきたいです
【React】雑にハンドラを定義する

<h2>ハンドラ？</h2>
ハンドラ＝ハンドル。つまり成業するもの
ここでいうハンドラは、イベント発生時に起動するファンクションのこと

書くより、見ると分かりやすいかと思います。
こんな感じです


```react:react.jsx
import react frim "react;

export const = () => {

　　#起動したハンドラはコンソールにNEKO!と値を出力します
    function submitHandle() => {
        console.log("NEKO!")  
    }

    return (#ここでonClickされたときに代入したハンドラが起動します
      <button onClick={submitHandle}>ボタン</button>
    )
}

```

また、別の書き方もできます
ハンドラを別に切り出さず、そのまま書いてしまう方法です。

```react:react.jsx
import react from "react";

export const =() => {
    
return (#ここでonClickされたときに代入したハンドラが起動します
      <button onClick={() => {console.log("NEKO!")}>ボタン</button>
    )
}

```

複数のボタンで参照するハンドラの場合は、別で切り出して共通化して、固有のものであればそのまま書くぐらいの使い分けでいいのかもしれません。
Flow Builder を使用したフローの作成 ⇒ フローの基本  Flow Builder の概要

１．フローコネクタはどのようなことを行いますか?
２．フロー要素はどのように分類できますか?
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634241/24e0a30b-fbd9-ee3d-6b03-5378c9c4acc7.png)
React+Material-UIでスマホのみにタブを表示させる

#はじめに
 PCとスマホの両方にレスポンシブで対応しないといけないが、スマホのみでタブメニューを表示させたい場合にご参考ください。
React(TypeScript), Material-UIで開発しています。　

#やりたいこと
1. PCではGridを使い縦3列にコンポーネントを配置したい
2. スマホでは、3つのコンポーネントのどれを表示するか選択できるタブを表示させたい
3. スマホでは、タブの選択で動的にコンポーネントを1つずつ表示させたい 


###PCでの表示
![スクリーンショット 0003-05-22 18.01.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329020/4abb2121-3e0e-b873-dbf7-a7d8bc384a6a.png)

###スマホでの表示
![スクリーンショット 0003-05-22 18.04.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329020/947182eb-10d5-5a4a-0cff-292fb8ee7f7d.png)



#方針
1. Material-UIのTabを利用する
2. State変数を配列で宣言し、スマホとPCで設定する初期値を変える
3. Tabの選択で、それぞれの数字を配列に入れる
3. 変数がそれぞれの数字を持っているかいないかで、表示を出し分ける


#実装

###1.UseStateで宣言
スマホの表示幅を600px未満とし、```window.innnerWidth```で判定する。Material-UIのGridが600px未満でxsと定義されているため同様にした。PCサイズの場合は、```valueTabs```に1,2,3の数字を初期値として入れる。スマホサイズの場合は1のみを初期値として入れる。


```TypeScript:index.tsx

const [valueTabs, setValueTabs] = useState(window.innerWidth > 600 ?  [1,2,3] : [1])

const handleChangeTabs = (event: React.ChangeEvent<{}>, newValue: number) => {
    setValueTabs([newValue])
  };
```

###2.タブの作成
スマホのみで表示させるため、```<Hidden smUP>```とする。変数```valueTabs```は配列のため、配列の一番最初の値のみを```value```に入れる。 

```TypeScript:index.tsx
<Hidden smUp>
  <Tabs 
    value={valueTabs[0]} 
    onChange={handleChangeTabs} 
    aria-label="ant example" 
    variant="fullWidth"
  >
   <Tab value={1} label="Tab1"  />
   <Tab value={2} label="Tab2"  />
   <Tab value={3} label="Tab3"  />
 </Tabs>
</Hidden>

```

###3. コンポーネントの表示の出し分け

```someメソッド```を使い、配列の中の特定の値があるかどうかを判定する。 ```&&条件```を使い、条件が```true```の場合にのみ中身を表示をさせる。```Grid item```で、PCの場合は3分割( ```sm={4}``` )、スマホの場合は全画面表示( ```xd={12}``` )を行う。


```TypeScript:index.tsx
  {valueTabs.some((a) => a == 1) &&(
   <Grid item xs={12} sm={4} >
    //ここにコンポーネント1の中身を記述
   </Grid>
  )}
```



#完成

```TypeScript:index.tsx

import {Tabs,Tab,Hidden,Grid} from "@material-ui/core"

const [valueTabs, setValueTabs] = useState(window.innerWidth > 600 ?  [1,2,3] : [1])

const handleChangeTabs = (event: React.ChangeEvent<{}>, newValue: number) => {
    setValueTabs([newValue])
  };


return (

<Hidden smUp>
  <Tabs 
    value={valueTabs[0]} 
    onChange={handleChangeTabs} 
    aria-label="ant example" 
    variant="fullWidth"
  >
   <Tab  value={1} label="Tab1"  />
   <Tab value={2} label="Tab2"  />
   <Tab value={3} label="Tab3"  />
 </Tabs>
</Hidden>


<Grid container alignItems="stretch" >
  {valueTabs.some((a) => a == 1) &&(
   <Grid item xs={12} sm={4} >
    //ここにコンポーネント1の中身を記述
   </Grid>
  )}

 {valueTabs.some((a) => a == 2) &&(
  <Grid item xs={12} sm={4} >
   //ここにコンポーネント2の中身を記述
  </Grid>
 )}

 {valueTabs.some((a) => a == 3) &&(
  <Grid item xs={12} sm={4} >
   //ここにコンポーネント3の中身を記述
  </Grid>
 )}
</Grid>

)
```

タブを表示させ、中身を出し分けること自体はMaterial UIの公式サイトの内容で十分ですが、PCではタブを表示させずスマホでのみ表示させたいという場合にあまり参考になる記事が見つからず時間がかかりました。 変数を配列にし、各コンポーネントに該当する数字があるかないかで判断することで、一定シンプルに書くことができました。



#参考

 [MaterialUI公式サイト](https://material-ui.com/components/tabs/)
保存失敗でエラーが出ない

# 強制的にエラーを出す
```〇〇.model.erb
purchase = Purchase.create!
```

保存できていないが、エラーも出ない状況で試すコード "!"
これを記述すると強制的にエラーが出るようになります。

# 似た機能として
ruby on railsやJavaScriptでは

```〇〇.rb
binding.pry 
```

 ```〇〇.js
console.log
```

などを使用して情報が取得できているか確認できます。
指定した周波数の音のwavファイルを作成する

```python:noisy_doremi.py
#ノイジーなドレミファソラシドのwavファイルを作成する
import numpy as np
import wave
import struct
import matplotlib.pyplot as plt
from numpy import zeros
import random

fname = 'doremifasorashido.wav'
wf = wave.open(fname, 'w')
ch = 1                          #チャンネル数は1CH（モノラル）
width = 2                       #サンプルサイズは2バイト
samplerate = 44100              #サンプリングレートは44.1kHz
wf.setnchannels(ch)             
wf.setsampwidth(width)          
wf.setframerate(samplerate)

time = 10                       #10秒
all_samples = time * samplerate #データ総数(10×44100個)

# 信号データを作る (numpy の ndarray で)
freq = [261.6, 293.7, 329.6, 349.2, 392, 440, 493.9, 523.3] # 周波数はドレミファソラシド の周波数[Hz]
x = np.linspace(0, time, all_samples+1) # all_samplesを周波数freqの数で分割
y = zeros(all_samples)                  # all_samples分の0行列を作成
slice = int(all_samples/len(freq))      
for i,j in enumerate(freq):
    noise = np.random.rand(slice)       #あえてノイズを加える。あえてね。
    y[slice*i:slice*(i+1)] = np.sin(2*np.pi*j*x[slice*i:slice*(i+1)]) + noise # 周波数 freq[Hz] の正弦波

y = np.rint(32767*y/max(abs(y)))        # [-32767,32767] の範囲に収める
y = y.astype(np.int16)                  # 16ビット整数に型変換する
y = y[0:all_samples]                    # all_samples 個のデータに打ち切る

# ndarray から bytes オブジェクトに変換
data = struct.pack("h" * all_samples , *y)

# データを書き出す
wf.writeframes(data)
wf.close()
ラジオボタンやチェックボックスを三項演算子でcheckedを維持する。LaravelのBlade対応。validationでのリダイレクトでも維持

#結論はこれ
````php:
<input type="radio" name="test" value="1"
        {{ old("test") == 1 ? "checked" : "" }} />
```
結論上の通りです。
`{{ }}`の中に三項演算子の内容を記述する。

````
{{ 条件 ? true : false }}
````

`old()`でリダイレクト前の回答を取得しています。


````
{{ old('nameの名前') ? "checked" : "何もしない" }}
````

# 他の書き方を知る

## @ifを使う

````php:@ifを使う
@if(条件) checked @enfif 
````

````php:@ifを使った場合
<input type="radio" name="test" value="1" @if(old("test") == 1) checked @endif />
````

## nameが配列の場合

下記のように、nameを配列で管理したい場合がある。

````php:nameが配列の場合
<input type="checkbox" name="test_ids[]" value="{{ $test_id }}">
````
この場合はどうすればよいでしょうか？

### STEP1：条件を入れる

````php:三項演算子の場合
<input type="checkbox" name="test_ids[]" value="{{ $test_id }}" 
　{{ in_array((int)$testId, old('test_ids')) ? checked : "" }}>
````

````php:@ifの場合
<input type="checkbox" name="test_ids[]" value="{{ $test_id }}" 
　@if(in_array((int)$testId, old('test_ids')) checked @endif>
````

-　ポイント：[]はいらない。old('配列')で配列を取得
-　in_array(配列に含まれているか確認したいターゲット, 配列)でtrue, falseでチェック

### STEP2：old()の引数を増やす
old()ですが、投稿後は表示可能ですが、投稿する前はデータがないので表示できず、エラーの原因になります。
そのため、第二引数にデフォルト値を追加します

````php:old()の理解を深める
old(表示させたいname, デフォルト値：第一引数がない場合に使用)
````
この第二引数は、editなどの編集画面でよく使います。

````php:@ifの場合
<input type="checkbox" name="test_ids[]" value="{{ $test_id }}" 
　@if(in_array((int)$testId, old('test_ids', $data['test_ids'])) checked @endif>
````

こうすることで、old('test_ids')が`null`でも$data['test_ids']があるので、in_array()が実行されます。
しかし、まだエラーの要因があります

### STEP3:型を揃える

コードの補完性を高めるために、型を指定したいはずです。その手順をお伝えしていきます

```php:in_arrayの型まで厳密にさせる
in_array(配列に含まれているか確認したいターゲット, 配列, true)
```
trueを入れない場合、 "=="で実行されます。文字の場合は文字数がintとされてしまいます。
つまり、通って欲しく無い場合も通過します
なので、 型まで厳密にチェックする"==="を利用したいです。そこでtrueを追加します


````php:@ifの場合
<input type="checkbox" name="test_ids[]" value="{{ $test_id }}" 
　@if(in_array((int)$testId, old('test_ids', $data['test_ids']), true) checked @endif>
````
これで型までチェックされるようになります。
そうするとエラーが発生します。

#### 配列の型を指定する（キャスト）


old('name')で取得した値はstring型です。
なので、

````php:配列によって型が違う
old('test_ids', $data['test_ids'])
// old('string型の配列', 'int型の配列')
````
のように、配列の中身の値が、"string"と"int"で違う場合があります。
こうなると

```php:in_arrayの型まで厳密にさせる
in_array(配列に含まれているか確認したいターゲット（int型）, old("string"の配列, intの配列), true)
```
のように、第一引数がint型の場合、old('test_ids')で取得した配列はstring型のためエラーになります。

なので、配列の型を決めます。

````php:array_mapを理解する
array_map(実行したい関数, 対象の配列)
````

````php:int型にしたい場合はintval()を実行
array_map('intval', 対象の配列)
array_map('intval', old('test_ids', $data['test_ids']))
````

```php:string型にしたい場合はstrval()を実行
array_map('strval', 対象の配列)
array_map('strval', old('test_ids', $data['test_ids']))
```
これで配列の中身を一気にキャスト（型指定）します

#### ターゲットの型を指定する（キャスト）
配列の中身の型を指定できたところで、ターゲットの中身もキャストしていきましょう

````php:
(型) 対象の値
````
で型指定します。

````php:intの場合
(int)$testId
````

````php:stringの場合
(string) $testId
````
これでターゲットの型を指定できます。
簡単ですよね

#### これらを合算します

````php:最終的にこうなる
<input type="checkbox" name="test_ids[]" value="{{ $test_id }}" 
　@if(in_array((int)$testId, array_map('intval',old('test_ids', $data['test_ids']))) checked @endif>
````

これで

````php:
　@if(in_array（'int型のターゲット', 'int型の配列'）) checked @endif
````
が成立します。

初期値でもチェックされますし、oldで投稿後の値でもチェックされます
error解決メモ ValueError: The truth value of a Series is ambiguous.

## はじめに
　pandasのdataframeを扱う中である条件に従って場合分けした値が代入された新たな列を追加したい時に出てきたValueError: The truth value of a Series is ambiguousについて解決方法を残しておきたいと思います。

### 事象
　今回行おうとしたことはF,M,XNAの３つの値で表された性別データがあり、そのデータに0,1,2で置き換えた列を追加する作業です。
　いろいろなやり方があると思いますが今回は関数を作り、それを使いデータを作ろうとしたところエラーが出ました。その時の疑似データと書いたコードは以下の通りです。

```python:data
import pandas as pd

df= pd.DataFrame(['M','F','M','XMA','F','F'], columns=['GENDER'])
df
-----------
GENDER
0	M
1	F
2	M
3	XMA
4	F
5	F
```
```python:code
def gender_number(gender):
    if gender == 'M':
        return 0
    elif gender == 'F':
        return 1
    else:
        return 2

df['GENDER_INT'] = gender_number(df['GENDER'])
-----------
ValueError: The truth value of a Series is ambiguous. Use a.empty, a.bool(), a.item(), a.any() or a.all().
```
seriesの値があいまいだと言われています。多分ですが各要素一つ一つ返すのか全体で関数を適用するのかわからないのだと考えられます。（間違っていたらごめんなさい）

### 解決方法
　seriesの各要素ごとに関数を適用するには**map関数**を使えばできるようです。
そのコードが下記になります。

```python:map
df['GENDER_INT'] = df['GENDER'].map(gender_number)
df
-----------
	GENDER	GENDER_INT
0	M	0
1	F	1
2	M	0
3	XMA	2
4	F	1
5	F	1
```
うまくいきました。ご参考になれば幸いです。


### 追記（他の方法で列を追加してみた）
　apply関数の場合

```python:apply
df['GENDER_INT'] = df['GENDER'].apply(gender_number)
```

lambda関数を使った場合

```python:lambda
df['GENDER_INT'] = df['GENDER'].apply(lambda x: 0 if x=='F' else 1 if x=='M' else 2)
```
現在時刻を（〇〇年〇〇月〇〇日〇〇秒）形式で表示する





##はじめに
どうも、はじめまして「ばたにー」です。初めてのQiitaでの投稿になります。
自身の勉強時のアウトプットとして今後は活用していく予定です。

今回はその第一回目として超簡単な内容になります。ご容赦ください。

###実際のコード


まず現在日時を表示

```
  //UNIXタイムスタンプの形式になります
  //UNIXタイムスタンプとは 1970年1月1日午前0時0分0秒（UTC）からの経過秒数

  echo time();
  //1621693637
```

次にdate関数を使い現在日時を年月日と時刻でわかる形に表示

```

  //date関数の第二引数はデフォルトで現在時刻が入ります
  echo date("Y-M-D H:i:s");
  //2021-May-Sat 23:27:17

```

これでも分かるとは思いますが、見慣れた表示にするには

```
  echo date("Y年m月d日 H時m分s秒");
  //2021年05月22日 23時05分17秒
```


こんな感じで表示を変えることができます。
ちなみに年をあらわす「Y」だと４桁「y」だと２桁など表示が変わります。
その他こまかな内容は下記をご確認ください。

[PHP公式ドキュメントの詳細ページ](https://www.php.net/manual/ja/datetime.format.php)


以上になります！ありがとうございました。
間違っていたり、別の方法などあればコメントにてご指摘ください。



（21/05/23 09:17追記）
コメントにてもっとシンプルな書き方をご指摘いただきました。ありがとうございます！

```
echo date("Y年m月d日 H" . "時" . "m" . "分" . "s" . "秒");
```
こんな書き方にしなくても記事の書き方で大丈夫です。失礼しました。
DenodoからAzure Synapse Analytics(旧SQLDWH)への接続

DenodoからAzure Synapse Analytics(旧SQLDWH)に接続
----------------------------
Synapseって聞いたときは何だか分からなかったのですがAzure SQL Data Warehouse の進化版だったのですね。

エンタープライズ データウェアハウスとビッグデータ分析がまとめられた無制限の分析サービスで、データ探索およびアドホック分析にはサーバーレスのオンデマンドクエリを使用し、最も要求の厳しいデータウェアハウスのニーズにはプロビジョニング済みのリソースを使用して実行することで、1 つのサービスですべてのワークロードに対応できるそうです。列ストアインデックスを使って高速化しているようです。

今回Denodo様の以下のナレッジを参考にDenodoからAzure Synapse Analyticsに接続してみました。
参考リンク：How to connect to Azure SQL Data Warehouse from Denodo
https://community.denodo.com/kb/view/document/How%20to%20connect%20to%20Azure%20SQL%20Data%20Warehouse%20from%20Denodo?category=Data+Sources

【環境】
Denodo 8.0 20210209

SQLプールへの接続文字列の取得
----------------------------
Azure Synapse Analyticsのワークスペースなどの設定はまっぴぃさんの記事を参考にしました。
Azure Synapse Analytics workspace 環境構築
https://qiita.com/ymasaoka/items/2f311dff91de84e13f36

Azureポータルから必要なワークスペースを作成します。また接続に必要なSQLプールも適切なData Warehouseユニット(DWU)を指定して作成します。

その後SQLプールにアクセスして[接続文字列]の[データベース接続文字列の表示]のリンクをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1506100/c5b767f5-a3a9-2b25-2dff-6a12b55f1baf.png)
[JDBC]タブの[JDBC(SQL認証)]の文字列をコピーして保存しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1506100/13c5eb21-0a9d-0d77-ae23-2465430ae432.png)

Denodoからの接続
---------------------------------------
Design StudioでJDBCを選択して[Azure Synapse SQL(aka Azure SQL Data Warehouse]を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1506100/2db55f3c-99ac-3253-8cfa-3784d5bf0364.png)
ここでJDBC接続文字列のuserとpasswordは後で指定する為に削除します。
jdbc:sqlserver://denodo-example.sql.azuresynapse.net:1433;database=pool1;user=sqladminuser@denodo-example;password={your_password_here};encrypt=true;trustServerCertificate=false;hostNameInCertificate=*.sql.azuresynapse.net;loginTimeout=30;

以下の値を入力してテスト接続が成功する事を確認します。

| 項目     | 設定値                        |
|--------------|---------------------------------------------------|
| Database URL | jdbc:sqlserver://denodo-example.sql.azuresynapse.net:1433;database=pool1;encrypt=true;trustServerCertificate=false;hostNameInCertificate=*.sql.azuresynapse.net;loginTimeout=30; |
| User | sqladminuser |
| Password | Synapseワークスペース作成時に入力したパスワード |
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1506100/db58fcea-6f20-5ed1-4ae4-a0fb4b1c9de8.png)
テーブルを作ってない状態ですがCREATE BASE VIEWをクリックするとスキーマ情報も見れますね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1506100/48de0465-70fc-1a19-3767-7f7135bb1da9.png)
更にAzure Active Directory認証で接続する場合は接続文字列のAuthenticationMethodパラメタで適切なパラメタを指定する必要があるようです。
* Azure Active Directory 認証を利用した接続
https://docs.microsoft.com/ja-jp/sql/connect/jdbc/connecting-using-azure-active-directory-authentication?view=sql-server-ver15

それはさて置き接続は直ぐに出来ました！
Expressで画像データ取得時にarrayBufferがちゃんと帰ってこない

#初めに

題材がピンポイントですが、自分のように知らないで引っかかってしまう人向けの記事です。
画像データに限らず、バイナリデータを取得して送信したいのなら当てはまる話だと思います。

##内容

axiosを使ってexpressにhttpリクエストした際に、axiosのresponseTypeにarrayBufferを指定して、expressでarrayBufferを返すようにしたのだけど、なぜかちゃんと帰ってこない！
と思ったら、express側ではbufferを返せばいいみたいです。

以下に、一例としてコードの一部を載せておきます。


##フロント側

apiにリクエストを送ります

```js:index.js
import axiosBase from "axios";
import axiosConfig from "./axios.config.js";
const axios = axiosBase.create(axiosConfig);

axios
  .get('/api')
  .then((response) => {
    const blob = new Blob([response.data], { type: 'image/jpeg' });
    const iconUrl = URL.createObjectURL(blob);
  })
  .catch((err) => {
    console.log(err);
  });
```


↓設定ファイルです。


```js:axios.config.js
module.exports = {
  responseType: 'arraybuffer' //ここでハマることもあるのでちゃんと設定する
};
```

##サーバー側

※s3で画像を取得した場合の例です

```js:server.js
app.get('/api', (req, res) => {
  const params = {Key: 'key名', Bucket: 'Bucket名'};
  s3.getObject(params, (err, data) => {
    //自分はここでわざわざarrayBufferに変えて送ってしまっていました...
    res.send(data.Body);
  });
});
```


自分は、axiosでresponseTypeに'arraybuffer'って設定してるんだからarraybufferを返せばいいんでしょ？と、素人考えでarraybufferをexpress側から返してしまいました。

s3の場合は取得してそのまま返せばできました。

##参考URL
[Stack Overflowにあった質問](https://stackoverflow.com/questions/27728480/how-to-return-arraybuffer-from-http-request-in-node-js)
Nuxt.jsでGA4(Google Analytics 4) eコマースの設定方法


Nuxt.jsでGA4(Google Analytics 4) eコマースの設定をする方法になります。
タグマネージャーを使用して設定するので、[@nuxtjs/gtm](https://www.npmjs.com/package/@nuxtjs/gtm)を使用します。

## gtm-moduleをインストール
Nuxt.jsでタグマネージャーの設定をするために、@nuxtjs/gtmをインストールします。

```
yarn add @nuxtjs/gtm 
or 
npm install @nuxtjs/gtm
```
### nuxt.config.jsで設定する

```js:nuxt.config.js
export default {
  modules: [
    '@nuxtjs/gtm',
  ],
  gtm: {
    id: 'GTM-XXXXXXX' // タグマネージャーのid
  }
}
```
インストール後`nuxt.config.js`でタグマネージャーのidを設定します。

## eコマースのイベントを設定する
Nuxt.jsで測定したいeコマースのイベントを設定します。
GA4(Google Analytics 4) eコマースには、決済やカートに入れるなど様々なイベントがあります。

https://support.google.com/analytics/answer/10119380?hl=ja

今回は、購入のイベントを例に解説します。

```js
this.$gtm.push({ ecommerce: null })  // Clear the previous ecommerce object.
this.$gtm.push({
  event: 'purchase',
  ecommerce: {
    affiliation: 'Google Store',
    coupon: 'SUMMER_FUN',
    currency: 'USD',
    items: [
      {
        item_id: 'SKU_12345',
        item_name: 'jeggings',
        coupon: 'SUMMER_FUN',
        discount: 2.22,
        affiliation: 'Google Store',
        item_brand: 'Gucci',
        item_category: 'pants',
        item_variant: 'black',
        price: 9.99,
        currency: 'USD',
        quantity: 1
      },
      {
        item_id: 'SKU_12346',
        item_name: 'jeggings',
        coupon: 'SUMMER_FUN',
        discount: 2.22,
        affiliation: 'Google Store',
        item_brand: 'Gucci',
        item_category: 'pants',
        item_variant: 'gray',
        price: 9.99,
        currency: 'USD',
        quantity: 1
      }
    ],
    transaction_id: 'T_12345',
    shipping: 3.33,
    value: 21.09,
    tax: 2.22
  }
})

```

`this.$gtm.push({})`にて、タグマネージャーにイベントを送信することができます。
項目は全て設定する必要はありません。
Nuxt.jsの`methods`等でイベントを送信することが可能です。

## タグマネージャーでeコマースの設定をする
続いて、タグマネージャーでeコマースの設定をします。

### 変数の設定
![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559347/1b16d237-f813-6bcf-5548-e1384ab618da.png)
上記の`this.$gtm.push({})`で設定した項目をデータレイヤー変数として設定します。
`ecommerce.items`、`ecommerce.value`、`ecommerce.tax`など、設定した項目ごとに作成する必要があります。

### トリガーの設定
![2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559347/2c5e08da-4c3c-fa8c-d3dd-93c5b2b36a18.png)
トリガーのイベントを設定をします。今回は`event: 'purchase'`としてるので、同じイベント名で設定する必要があります。

### タグの設定
![3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559347/4067e508-2c9f-6cab-e19f-2fcf33bd6d92.jpeg)
![4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559347/df6b1ca7-461d-3358-14b3-3be3810211cc.png)

上記の画像のようにタグの設定をします。
- タグの種類: GA4 イベント
- 設定タグ: GA4のアナリティクスコード
- イベント名: purchase
- イベントパラメータ: 上記で作成したデータレイヤー変数を値としてセットする
- トリガー: 上記で作成したpurchaseのトリガー

イベントパラメータの種類について↓

https://developers.google.com/tag-manager/ecommerce-ga4?hl=ja

## GA4(Google Analytics 4) eコマースで確認
![eコマース.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559347/6b89e211-8101-9785-350d-c09e11001d7a.png)
GA4(Google Analytics 4)のeコマースの項目で測定できていれば、設定は完了です。



https://developers.google.com/tag-manager/ecommerce-ga4?hl=ja
Ruby 始めました

Rubyの勉強初めて２週間くらい。
右も左も分からない所からやっとそれらしい事ができるようになってきました。


```ruby:qiita.rb
puts “いくら引き落としますか？“
count = gets.chomp.to_i
total_price = 10000 - count -110

if count <= total_price
 puts “#{count}円引き落としました。残高は#{total_price}円です。”
else
 count >= total_price
 puts “残高不足です“
end
```

やっと出来た！と思ったら4000までは順調に動きましたが5000を入力すると表示されたのは残高不足・・・

あれ？

なんで？

まだ残高あるはずやろ？

何が間違ってるのかも分からなかった為、質問した結果

【count が5000のとき total_price = 10000 - count -110 は4890になるので count <= total_price は成立しませんね。】

最初は？？？となりましたがよく考えると理解出来ました。

ただどう修正すれば良いのかも分からなくなってしまったので一旦全削除。

作り直したのが

```ruby:qiita.rb
def kouza(zandaka, withdraw)
  fee = 110
  if zandaka >= (withdraw + fee)
    zandaka -= (withdraw + fee)
    puts "#{withdraw}円引き落としました。残高は#{zandaka}円です"
  else
    puts "残高不足です"
  end
end

zandaka = 10000
puts "いくら引き落としますか？手数料110円かかります"
withdraw = gets.to_i
kouza(zandaka, withdraw)
```
やっと出来ました。

いつどこで使うのか使いどころが分からないまま勉強してますが、とりあえず一歩前進。
【Java】AtCoderのABC-202に参加しました（レート：272→277）。

こんばんは。

2021/5/22に、AtCoderのABC-202に参加しました。
レートは以下の通りとなっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402487/9d4a93cd-a5f9-a356-040e-21978053067e.png)

C問題まで突破しました。
ただ、B問題が一度TLE、C問題は試行錯誤してしまったのと操作ミスで3回エラーになってしまい減点もあった模様です。
レートは272→277にアップ。しょぼいですね。最高レート（278）を次回は更新したい。

###A問題

さいころを3つ振る。
出た目の裏側の数を合計する。

おお、これは簡単だと思い、すぐ解けました。

```Java

import java.util.Scanner;

public class Main{

public static void main(String args[]){
  Scanner sc = new Scanner(System.in);
  int a = sc.nextInt();
  int b = sc.nextInt();
  int c = sc.nextInt();
  System.out.println((7-a)+(7-b)+(7-c));

}
}

```


###B問題


0,1,6,8,9からなる文字列を、180度回転させた文字列を答える。
つまり6は9になったり、0は0のままだったりし、かつ文字列が逆になります。

ここで、文字列を1つずつif文で判定するロジックにしたところ、TLEになりました。痛恨のミスですね。case文の文法を度忘れしてしまったので・・。
文法、調べなおして書きました。

```java

import java.util.Scanner;

public class Main{

public static void main(String args[]){
  Scanner sc = new Scanner(System.in);
  String s = sc.next();
  String scn = "";
  for (int i=0;i<s.length();i++){
    switch(s.charAt(i)){
      case '0':
       scn = "0" + scn;
       break;
      case '1':
       scn = "1" + scn;
       break;
      case '6':
       scn = "9" + scn;
       break;
      case '8':
       scn = "8" + scn;
       break;
      case '9':
       scn = "6" + scn;
       break;
     }
  }
  System.out.println(scn);

}
}
```

###C問題

Nこの文字列A,B,Cがある。
Ai=Bcjとなる組み合わせを求める。

Aiを読み込み、一個ずつ調べるとTLEになってしまいます。
そこで、値読み込みの時にこのような処理を入れました。

1~N＊2の2次元テーブルを用意する。
N=3の時はこんな感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402487/ecbd31bd-8924-d6df-428e-6260137bab77.png)


これは、読み込んだ値がいくつあるかを数えています。

N　3
A　1 2 2
B　3 1 2
C　2 3 2

例えばこんな入力例の場合、こうなります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402487/9cb33a28-8d80-c8b0-d147-d4a4d6c00b1b.png)


Aは、1が1個、2が2個。
Cでいうと、
c[0]は2、b[2-1]は1なので、1つ目の配列に1加算。
c[1]は3、b[3-1]は2なので、2つ目の配列に1加算
c[2]は2、b[2-1]は1なので、1つ目の配列に1加算
こうやっていくと、この配列を順次読み込み、A*Bを加算していくと組み合わせの数が求められると考えました。

こんなプログラムです。

```java

import java.util.Scanner;

public class Main{

public static void main(String args[]){
  Scanner sc = new Scanner(System.in);
  int n = sc.nextInt();
  long a[] = new long[n];
  long b[] = new long[n];
  long c[] = new long[n];
  long hai[][] = new long[n][2];
  for (int i=0;i<n;i++){
   a[i] = sc.nextInt();
   hai[(int)(a[i]-1)][0] = hai[(int)(a[i]-1)][0] + 1;
  }
  for (int i=0;i<n;i++){
   b[i] = sc.nextInt();
  }
  for (int i=0;i<n;i++){
   c[i] = sc.nextInt();
    //System.out.println(i);
   hai[(int)(b[(int)(c[i]-1)]-1)][1] = hai[(int)(b[(int)(c[i]-1)]-1)][1] + 1;
  }
  long cnt = 0; 
  for (int i=0;i<n;i++){
    cnt = cnt + hai[i][0]*hai[i][1];
  }
System.out.println(cnt);
  
}
}


```


###最後に

・エラーが出たときは、値の範囲を超過していないかを確認する。
　C問題ではNの範囲が10^5だったので油断し、int型を使ってしまいました。long型でないとだめですね。

・焦らない。
　c問題の回答を、A問題を選択してエラーという痛恨のミス。気を付けます。

パフォーマンスはいまいちでしたが久々にC問題まで解けていい気分です。最近何をやってもさえないですが、引き続き頑張ります。
Rubyアルゴリズム（Add Digits）

## 問題
Given an integer num, repeatedly add all its digits until the result has only one digit, and return it.

Example 1:

```
Input: num = 38
Output: 2
Explanation: The process is
38 --> 3 + 8 --> 11
11 --> 1 + 1 --> 2 
Since 2 has only one digit, return it.
```
Example 2:

```
Input: num = 0
Output: 0
``` 

Constraints:
0 <= num <= 231 - 1
 

Follow up: Could you do it without any loop/recursion in O(1) runtime?

## 私の回答

```ruby
def add_digits(num)
    int = num.digits.sum
    while int.to_s.length >= 2 do
        int = int.digits.sum
    end
    p int
end

number = gets.to_i
add_digits(number)
```

RunCodeして出力される答えはあっているのに、赤字で「Wrong Answer」も一緒に表示される。何故だ…

**やったこと**

```ruby
int = num.digits.sum
```
これについては、まず配列にして桁ごとに切り分けて

```ruby
38.digits # => [3, 8]
```
足した。シンプル。

```ruby
[3, 8].sum # => 11
```
そして桁数が一桁になるまでwhileで分解→足し算を繰り返してみた。

```ruby
    while int.to_s.length >= 2 do
        int = int.digits.sum
    end
```

**でもWrong Answerらしい！！**
動かしてみる限りあっていそうなのに。何故？



　



ここから追記

## 解決しました

結論：インプット値の取得とかいらなかった

LeetCodeの仕組みをよくわかってなかったですが、最後の

```ruby
number = gets.to_i
add_digits(number)
```

ここがいらなかったです。
AtCoderとはまた違うんですね。

**最終的な回答**


```ruby
def add_digits(num)
    int = num.digits.sum
    while int.to_s.length >= 2 do
        int = int.digits.sum
    end
    return int
end
```

pをreturnにし、無事Acceptedになりました。
tsxファイルでジェネリクスを使うとエラーが表示される

tsxファイルでジェネリクスを使うとエラーが出ます。(vscodeのインテリセンスやprettierなどでエラーが出る)

こんな感じです。↓

```tsx
// Error, JSX element 'T' has no corresponding closing tag.
const func = <T>() => {};
```
JSXの正規表現に引っかかってしまっているエラーです。

解決策としては、

```tsx
// カンマを入れる
const func = <T,>() => {};
```

```tsx
// object型を継承する
const func = <T extends object>() => {};
```
等があります。

typescriptリポジトリでこの問題について言及されているので、詳しくはこちら
https://github.com/microsoft/TypeScript/issues/15713
[AWS_課題1]SSHアクセスできない

##環境
[AWS CloudTech](https://aws-cloud-tech.com/)の実践課題1にて得られるスタック

##トラブルシュートのセオリー
インフラSES在職3年程度の人間としては、以下がセオリーという肌感覚でいる。
①物理的で基本的なとこから確認していく。
②ローカルPC → 接続先に向かって実施する。

あとはAWS素人なりに可能性の高そうなとこを優先して実施した。

##トラブルシュート
まずはSSHアクセスしてみるが、タイムアウトになり接続できないのでトラブルシュートしていく

####1. EC2インスタンスが起動しているか
`CloudTechTest 実行中` 
→問題無し。

####2.  インターネットゲートウェイはアタッチしているか
そもそもどのVPCなのかを確認。 
`vpc-…xxx…1acb`
インタネットゲートウェイのうち、上記のVPCにアタッチしているものを確認。
`igw-….xxx…e626 Attached`
→問題無し。

####3.  Security GroupでSSHが許可されているか
実務でも、FWを通るなら最も可能性が高そうな原因であり、出題者としても出しやすい被疑箇所だ。
`stack-test1-InstanceSecurityGroup-…xxx…NSFI`

|タイプ|プロトコル|ポート範囲|ソース|説明|オプション|
|---|---|---|---|---|---
|SSH|TCP|22|0.0.0.0/16|
→インバウンドルールのソースがデフォルトルートでなくなっているので、`0.0.0.0/0`に修正
　→SSH接続してみるが繋がらない...「え!?違うの?」と思いながら答え合わせ動画を見ると、もう一つ原因があるとのこと。(どこまでも実務に近くて良い課題!!)

####4.  変なACLが設定されていないか
   あまり可能性は無さそうだが、FWの次に見ておくべきな気がしたので確認。 
インバウンドルール

|ルール番号|タイプ|プロトコル|ポート範囲|送信元|許可/拒否
---|---|---|---|---|---
100|HTTP (80)|TCP (6)|80|0.0.0.0/0| Allow
101|SSH (22)|TCP (6)|22|0.0.0.0/0| Allow
102|カスタム TCP|TCP (6)|1024 - 65535|0.0.0.0/0| Allow
*|すべてのトラフィック|すべて|すべて|0.0.0.0/0| Deny

アウトバウンドルール

|ルール番号|タイプ|プロトコル|ポート範囲|送信先|許可/拒否
---|---|---|---|---|---
|102|カスタム TCP|TCP (6)|1024 - 65535|0.0.0.0/0| Allow
*|すべてのトラフィック|すべて|すべて|0.0.0.0/0| Deny

→アウトバウンドルールで、SSHが許可されていないから戻りのパケットが拒否されてしまいそう。
　→自信が無かったのでとりあえず、答え合わせ動画を見ると原因ではなかった。
　　→(追記)戻りのパケットは`ルール番号102`によって許可されている。`ポート範囲1024-65535`は**一時ポート**というもの。[AWS 一時ポートについて](https://docs.aws.amazon.com/ja_jp/vpc/latest/userguide/vpc-network-acls.html#nacl-ephemeral-ports)

####5.  戻りのルーティング(EC2→ローカルPC)があるか
FWの次に可能性が高そうなことだ。 答え合わせ動画で原因がこれであることを知った。
EC2インスタンスがいるサブネットのルートテーブルを確認。

送信先|ターゲット
---|---
0.0.0.0/16|igw-...xxx...e626
10.0.0.0/16|local
→送信先がFW同様に0.0.0.0/16になっているので、0.0.0.0/0に修正。

##確認
最後にSSH接続して、成功した。

##感想
課題を通して手を動かすことで、「あの設定はどうやって見るんだっけ？」という基本的な操作を覚えられたように感じる。
引き続きコンテンツを消化していく。

##参考
この記事はAWS初学者を導く体系的な動画学習サービス
「AWS CloudTech」の課題カリキュラムで作成しました。
https://aws-cloud-tech.com
Unhandled Exception: PlatformException(sign_in_failed, com.google.android.gms.common.api.ApiException: 10: , null, null)の対処法

`Firebase Authentication`を使ってGoogleアカウントを登録しようとすると、以下のエラーが発生しました。

```
[ERROR:flutter/lib/ui/ui_dart_state.cc(199)] Unhandled Exception: 
PlatformException(sign_in_failed, com.google.android.gms.common.api.ApiException: 10: , null, null)
```

## 解決方法
Firebaseにフィンガープリント（`SHA-1`・`SHA-256`）を追加すると解決しました。

## 手順

「androidディレクトリ」で以下のコマンドを実行すると、`SHA-1`・`SHA-256`が表示される。

```bash
$ ./gradlew signingReport

Variant: ...
Config: ...
Store: ...
Alias: ...
MD5: ...
// これ
SHA1: ...
// これ
SHA-256: ...
Valid until: ...
```

以下から、Firebaseの設定。

歯車アイコンから「プロジェクトを設定」を選択。

![スクリーンショット 2021-05-22 22.44.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365643/843367d7-d9e8-9d10-66cd-51d2c89a2943.png)

マイアプリ -> Androidアプリから「フィンガープリントを追加」を選択する。

![スクリーンショット 2021-05-22 22.54.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365643/181cf795-0d1f-6c7c-5c7e-92d814400e4c.png)

`./gradlew signingReport`で出力した`SHA-1`・`SHA-256`を「証明書のフィンガープリント」に追加して保存する。

![スクリーンショット 2021-05-22 22.48.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365643/74f37940-e26e-a2f4-63cd-b622b1be7631.png)
Covid-19感染状況の推移をgoogle colab（python）で自動グラフ化！

<h4>1. はじめに</h4>
新型コロナの国別100万人あたりの感染者の推移について、エクセルで毎回膨大なデータを編集してグラフ化するのが大変だなぁと思っていたところ、これって自動化できるんじゃない？と思って、作成したプログラムを紹介します。GoogleColabを使って１クリックで描画してくれるので、便利だと思います。
Matplotlibの使い方とPandasをマスターすればこんなに便利だというイメージを掴む演習としても最適かと思います。
（ちなみに、今回データソースとして使ったオックスフォード大学のサイトour world dataに行くと、国を選択すれば描画してくれるツールも掲載されているので、そちらの方で十分では？という声があるかもしれません。しかし、例えば、このコードをサーバーに載せて定期的にメールで送ってもらうようなことも出来ますので、Pythonでコードを書くのは意味があったりします。）
なお、毎度のことですが、プログラムの実行など、本件の実践については、ご自身の責任でお願いします。

<h4>2.全体の流れ</h4>
①<a href = "https://ourworldindata.org/">オックスフォード大学のOur World Data</a>にあるowid-covid-data.csvをダウンロード（データ自体はGitHubにもあります。サンプルプログラムではGitHubサイトのUrlを使っています）。
②①のダウンロードとあわせて、CSVをpandas形式で読み込み（pd.read_csv)
③指定した国の100万人あたりの感染者のデータを検索して取り出し、リストに格納していきます。
④グラフ化できるようにデータをマージします。
⑤matplotlibモジュールのpyplotで描画・PNGファイルでのデータ保存をします。

とりあえずやってみたい方は、以下3.のコードをGoogleColabに貼り付けて実行してみてください。

<h4>3.コード</h4>

```python:

import requests
import pandas as pd
import matplotlib.pyplot as plt
from pylab import rcParams
plt.style.use('ggplot') 

#描画の際のサイズを指定します。
rcParams['figure.figsize'] = 15,10

#データファイルのURL
url = "https://github.com/owid/covid-19-data/blob/master/public/data/owid-covid-data.csv?raw=true"

#csvをurlのサイトから取得して、pd形式にします。（①、②）
df = pd.read_csv(url)

#描画をさせたい国のリストです。ここは適宜、変えてOKです。
country = ["Indonesia", "Vietnam", "Thailand", "China", "Japan"]

#とりあえずデータを格納する空のリストです。
pdata = []

#描画させたいデータを取り込んでいきます。（③）
for countries in country:
    qstr = 'location in '+ '"' + countries +'"'
    dfdata= df[['date','new_cases_per_million','location']].query(qstr).rename(columns={'new_cases_per_million': countries}).drop(columns="location")
    pdata.append(dfdata)

#描画させるためにデータをマージします。（④）
pmerge = pd.merge(pdata[0], pdata[1])

for n in range(0, len(pdata)-1):
    pmerge = pd.merge(pmerge, pdata[n+1])

#描画と保存をします。（⑤）
plt.tight_layout()
pmerge.plot(x = "date")
plt.savefig("coviddata.png1", format="png", dpi=500)

plt.show()
plt.close('all')


```

<h4>4.結果</h4>

実行をしてみると以下のような図が出てくると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280313/b1694585-640c-9951-e45a-a9363223ecaa.png)

<h4>5.課題（？）</h4>
ずいぶん線がガタガタです。統計データをそのまま描画してしまっているのでこうなってしまいましたが、移動平均をとるなどしてスムーズにする方法もありますので、トライしてみていただければと思います。
[Java]日付に関する型の変換まとめ

# はじめに
今回はJavaの日付に関する型の変換についてまとめようと思います。

# Date型とCalendar型
Date型は、日時を扱う際に使用する日付型のクラスです。日時に関するざまざまな処理が可能となります。
Calendar型は、Data型同様日時を扱う際に使用する日付型のクラスです。しかし、Date型よりも加算・減算、日時を比較するなどの処理に特化したクラスになります。

# String型とDate型
## String型→Date型
1. はじめにSimpleDateFormatクラスで日付のフォーマットを指定する。
2. parse(String型)メソッドにより変換
3. 例外処理する必要あり(ParseException)


```Java
public class FormatChange  {
	public static void main(String[] args) throws ParseException{
		// 日付の定義
		String strDate = "2021/5/21";
		// SimpleDateFormatで日付フォーマット設定
		SimpleDateFormat sdf = new SimpleDateFormat("yyyy/MM/dd");
		// parse()メソッドで変換
		Date Datedate = sdf.parse(strDate);
		// Date型で出力
		System.out.println(Datedate); // =>Fri May 21 00:00:00 JST 2021
	}
}
```

## Date型→String型
1. はじめにSimpleDateFormatクラスで日付のフォーマットを指定する。
2. format(Date型)メソッドにより変換


```Java
public class FormatChange  {
	public static void main(String[] args){
		// 現在の日付を取得
		Date Datedate = new Date();
		// SimpleDateFormatで日付フォーマット設定
		SimpleDateFormat sdf = new SimpleDateFormat("yyyy/MM/dd");
		// format()メソッドで変換
		String strDate = sdf.format(Datedate);
		// String型で出力
		System.out.println(strDate); // =>2021/05/21
	}
}
```

# Date型とCalendar型
## Date型→Calendar型
1. Date型のインスタンス生成
2. Calendar型のインスタンス生成
3. setTime(Date型)メソッドにより変換

```Java
public class FormatChange  {
	public static void main(String[] args) throws ParseException{
		// 現在の日付をDate型で取得
		Date Datedate = new Date();
		// Calendar型のインスタンス生成
		Calendar calendar = Calendar.getInstance();
		// setTime()メソッド変換
		calendar.setTime(Datedate);
                // Calendar型で出力
		System.out.println(calendar); // =>java.util.GregorianCalendar[time=1621525339771,areFieldsSet=true,areAllFieldsSet=true,lenient=true,zone=sun.util.calendar.ZoneInfo[id="Asia/Tokyo",offset=32400000,dstSavings=0,useDaylight=false,transitions=10,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2021,MONTH=4,WEEK_OF_YEAR=21,WEEK_OF_MONTH=4,DAY_OF_MONTH=21,DAY_OF_YEAR=141,DAY_OF_WEEK=6,DAY_OF_WEEK_IN_MONTH=3,AM_PM=0,HOUR=0,HOUR_OF_DAY=0,MINUTE=42,SECOND=19,MILLISECOND=771,ZONE_OFFSET=32400000,DST_OFFSET=0]
	}
}
```

## Calendar型→Date型
1. Calendar型のインスタンス生成
2. getTime(Calendar型)メソッドにより変換


```Java
public class FormatChange  {
	public static void main(String[] args) throws ParseException{
		// 現在の日付をDate型で取得
		Calendar calendar = Calendar.getInstance();
		// getTime()メソッドで変換
		Date date = calendar.getTime();
		// Date型で出力
		System.out.println(date); // =>Fri May 21 00:50:15 JST 2021
	}
}
```

# 参考ページ
[Javaの日付データ型変換（Date, Calendar, String）](https://qiita.com/ayaka105/items/1a68ed7ad84743dde7d5#datecalendar%E3%81%AE%E5%A4%89%E6%8F%9B)
Pythonで連番処理をする方法（連続ファイルをバッチ処理する方法）

#
10桁マーカーの連番ファイルを1000ごとに読み込んでいきたい場合は次のように書けばよい．２通りの方法を示す．

```:single.py
for i in range(1000,9001,1000):
    path1 = "result_%010d" %(i)
    path2 = "result_"+'{0.010d}'.format
```

ゼロ埋めでなくスペース埋めする場合

```
path1 = "flow_%10d" %(i)
path2 = "result_"+'{0.10d}'.format
```

２重のマーカーがあるなら

```double.py
for c in range(1,5+1,1):
    for i in range(1000,9001,1000):
        path1 = "result_%1d_%010d" %(c,i)
        path2 = "result_"+'{:1d}'.format+"_"+'{0.010d}'.format
```


以上！
擬似チーム開発　ワークフロー

# 背景

最近、ポートフォリオ作成の際に擬似チーム開発のワークフローで開発を進めていたが、毎回メモを読みながら進めていて効率が悪かったので、記事化していつでも見れるようにしたい。

# 流れ

- GitHub上でIssueを作成
- ローカルリポジトリでブランチを作成し、そのブランチ上に移動
    - `git co -b ブランチ名`

- 上記ブランチ上で開発
- （必要なタイミングでコミット）
  - `rubocop -a`
  - `git add -A`
  - `git commit -m "コメント"`
- ローカルリポジトリのブランチからリモートリポジトリへpush
    - `git push origin ブランチ名`
- 上記ブランチからmasterブランチへco
    - `git co master`
- 該当ブランチでプルリクを作成
- プルリクの内容を確認
- プルリクからマージ
- プルリクをクローズ
- Issueをクローズ
- リモートリポジトリからローカルリポジトリのorigin/masterにfetch
    - `git fetch origin master`
- ローカルリポジトリのorigin/masterからmasterにマージ
    - `git merge origin/master`

# このワークフローについて

まだ独学中だが、このワークフローで開発を進めることのポジティブな面として、以下を実感した。

- プルリク作成は、チームに対して自分のコードを説明するのに役立つ
    - 特に、コードの目的や自分が採った解決手段、懸念点を伝えられる点で有用
- Issue作成は、自分の問題意識をチームに伝える役割がある
HTML＆CSSの超基本①準備編

個人勉強用も兼ねて作っておきました。
初学者用記事で、できるだけシンプルに書いていこうと思います。
今回はHTMLです。
#用意するもの
・メモ帳
私はサクラエディタ使ってます

・HTMLの本１冊
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
<a href="https://www.amazon.co.jp/1%E5%86%8A%E3%81%A7%E3%81%99%E3%81%B9%E3%81%A6%E8%BA%AB%E3%81%AB%E3%81%A4%E3%81%8FHTML-CSS%E3%81%A8Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%85%A5%E9%96%80%E8%AC%9B%E5%BA%A7-Mana/dp/4797398892?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=%EF%BD%88%EF%BD%94%EF%BD%8D%EF%BD%8C&qid=1621689820&sr=8-5&linkCode=li2&tag=euphonic-22&linkId=28ced74fd7c1a79286dc80009cf0f2e3&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=4797398892&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=euphonic-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=euphonic-22&language=ja_JP&l=li2&o=9&a=4797398892" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
なんでもいいですが、私はこれを使ってます。インターネットで検索するのも良いけど１冊あると何かと便利

#最初に書いておくこと
```
<!DOCTYPE html>
<html lang="ja">

（ここに色々書く）

</html>
```


#とりあえず１文書こう
用意したメモ帳に書きましょう。拡張子を.htmlにしてね。
![2021-05-22_22h37_17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1516522/bdfded89-86f2-395c-d08a-8de071aa5053.png)

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


<p>おはよう</p>

</html>

```

![2021-05-22_22h39_24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1516522/eeef0584-6708-57b5-30b1-0d0df626a15d.png)
やったね！ブラウザで表示されたよ！

今日はここまで！