OmniAICreator/Qiita-1.07M huggingface dataset:
$docker-compose build . でERROR: No such service: . のエラーが出た

Dockerfile, Gemfile, Gemfile.lock, docker-compose.ymlだけ用意して、
Railsのコンテナを立ち上げようと$docker-compose build .したところ、

```
$docker-compose build .
ERROR: No such service: .
```

というエラーが出た。


##やってみたこと①

調べてみて、カレントディレクトリで起動しない時は
docker-compose.ymlに、container_nameの環境変数を設定し、コンテナ名指定でbuildしたらいいとのこと。

container_name: <任意のcontainername(以下x)>
を追記して、$docker-compose build xを実行。

しかし、
`ERROR: No such service: X`
とまたエラーが。


###やってみたこと②

`$ docker-compose up --build`
buildだけではなく、upにbuildオプションをつけて実行。

```
ERROR: for x  Cannot start service app: driver failed programming external connectivity on endpoint x (1a6e5c0ea852dd7d3b92a0456e83a1c17880e38a71563eb3a350693ca620b1ab): Bind for 0.0.0.0:3000 failed: port is already allocated

ERROR: for app  Cannot start service app: driver failed programming external connectivity on endpoint x(1a6e5c0ea852dd7d3b92a0456e83a1c17880e38a71563eb3a350693ca620b1ab): Bind for 0.0.0.0:3000 failed: port is already allocated
ERROR: Encountered errors while bringing up the project.
```


そうすると指定したportがすでに使われているとのエラーが出たので、portを3000:3000から8080:8080に変更して再度`$docker-compose up --build`を実行。

エラーが出ずきちんと走ったので、buildできるかと思ったが、

 `Attaching to X`
で止まってしまった。



###やってみたこと③

$docker-compose --verbose build --no-cache

キャッシュ無視でbuildを実行したところ、

```
Successfully built 1e7c8561a9d9
Successfully tagged foldername_app:latest
compose.cli.verbose_proxy.proxy_callable: docker close <- ()
compose.cli.verbose_proxy.proxy_callable: docker close -> None
```

でbuildが成功した。

```

$ docker-compose ps
        Name           Command   State    Ports
-----------------------------------------------
x   irb       Exit 1
```

StatusがExitになっていたので、`$docker restart x` で再起動したらUPになった。
SSHコマンド実行時に生じたBad owner or permissions on /home/(user_name)/.ssh/config エラーの対処法

# EC2インスタンスにsshしようとした所、エラーが発生
環境は以下の通り

- Ubuntu 16.04
- OpenSSH_7.2p2 Ubuntu-4ubuntu2.10 OpenSSL 1.0.2g

```:実行コマンド
ssh (Hostname)
```

```:エラー文
Bad owner or permissions on /home/(user_name)/.ssh/config
```

# 原因
`~/.ssh/config` の権限のセキュリティが甘くなっている場合(chmod 777等)、 
sshコマンド実行時に
`Bad owner or permissions on /home/(user_name)/.ssh/config`エラーを返す。

# 解決法
`~/.ssh/config`の権限を所有者の読み書きに制限した所、エラーが消えて正常に動作するようになった。

```:解決法
$ chmod 600 ~/.ssh/config
Chromeのハードウェアアクセラレーションの有効・無効の切替方法！

Chromeの設定のハードウェアアクセラレーションとは？

パソコンのブラウザ・Google Chromeには、オプションにハードウェアアクセラレーション機能が搭載されています。ハードウェアアクセラレーション機能とは、Google Chromeにおける画像描画をGPU（グラフィックの描画処理を行うプロセッサ）に任せることで、Webサイトの描画を素早く行ったり、動画を滑らかに再生することができるようになります。

しかし、グラフィックボードを搭載していないパソコンやスペックの低いパソコンでハードウェアアクセラレーションを有効にしていると、ブラウザの動作が重い原因になってしまうことがあります。この場合は、ハードウェアアクセラレーションを無効化することでブラウザの処理を軽くすることができます。

ハードウェアアクセラレーションが有効でないと、Webサイトの描画に違和感があったり動画が滑らかではなくなります。もし動画などを楽しみたいという場合は、動画を再生するときだけハードウェアアクセラレーションを有効にするというのも手です。この記事では、Google Chromeのハードウェアアクセラレーションの有効・無効の切替方法をご紹介していきます。

Chromeのハードウェアアクセラレーションの有効・無効の切替方法

それでは、Google Chromeのハードウェアアクセラレーションの有効・無効の切替方法を説明します。

メニューボタンをクリックして開き、「設定」をクリックGoogle Chromeを起動したらウィンドウ右上のメニューボタンをクリックして開き、「設定」をクリックしましょう。
設定画面を一番下までスクロールして「詳細設定」をクリック新しいタブで設定画面が表示されます。設定画面を一番下までスクロールして「詳細設定」をクリックしましょう。
「システム」の「ハードウェアアクセラレーションが使用可能な場合は使用する」のオン・オフを設定する折りたたまれていた設定項目が表示されるので、「システム」の「ハードウェアアクセラレーションが使用可能な場合は使用する」のボタンをオンにすることで有効に・オフにすることで無効にすることができますよ。
Class env does not exist in... の原因を一瞬で突き止める方法

わりとハマったのでメモを残します。

## 環境
- Laravel 5.8
- PHP 7.1

## 方法
App\Exceptions\Handler::report()内にdd($exception)を追記し、ダンプしたとこで処理を止めてエラーの内容を確認する。

## Class env does not exist in...
Laravelを使っていると、ごく稀に以下のような感じで "Class env does not exist in..." というエラーに遭遇します。
このエラーが出ると、artisanコマンドもcomposerコマンドも動かないし、何をやっても "Class env does not exist" というエラーメッセージが出力されるだけの状態になり、結構面倒です。

```
// こんな感じのエラー。滅多にないが、すごくたまに出る

Fatal error: Uncaught ReflectionException: Class env does not exist in /var/www/html/vendor/laravel/framework/src/Illuminate/Container/Container.php on line 788

ReflectionException: Class env does not exist in /var/www/html/vendor/laravel/framework/src/Illuminate/Container/Container.php on line 788

Call Stack:
    以下スタックトレース...
```

なおかつこのエラーはenvが無いことが原因でもなければ、よくあるcomposer周りのミスが原因でもない場合が結構あるので、エラーメッセージを額面通り受け取ると、本来不具合がある部分に気づけないまま時間を溶かす恐れがあります。

## dd()で本来のエラー原因を探す

「envが無いとか言われたけどenvはある。たぶん何かやらかしたんだろうけど、こんなエラーを引き起こすようなことをした覚えはないし、心当たりもない」
みたいな時は、一旦"Class env does not exist..."から離れてもっとマシなエラーメッセージが得られるようにすれば、解決に近づくことがあります。

```php:app/Exceptions/Handler.php

public function report(Exception $exception)
{
    dd($exception) //<-この1行を追加
    parent::report($exception);
}
```
これでダンプされた時点で処理が止まり、もっとマシなエラーメッセージとスタックトレースが確認できるようになります。
これで得られたエラーメッセージをもとに探ってゆけば、割と楽に解決にたどり着けるんじゃないかなと思います。
Rust の http クライアントの使い方 (Post)

次のページを参考にしました。
[Crate reqwest](https://docs.rs/reqwest/0.10.6/reqwest/)

プロジェクトの作成

```bash
cargo new http_post --bin
```

```text:Cargo.toml
[package]
name = "http_post"
version = "0.1.0"
edition = "2018"

#

[dependencies]
reqwest = { version = "0.10", features = ["json"] }
tokio = { version = "0.2", features = ["full"] }
serde = { version = "1.0", features = ["derive"] }
serde_json = "1.0"
```

```rs:src/main.rs
// --------------------------------------------------------------------
/*
	http_post.rs

					Jul/15/2020
*/
// --------------------------------------------------------------------
use std::collections::HashMap;

#[tokio::main]

async fn main() -> Result<(), Box<dyn std::error::Error>> {
	eprintln!("*** 開始 ***");
	let mut map = HashMap::new();
	map.insert("user", "jiro");
	map.insert("password", "123456");

	let client = reqwest::Client::new();
	let url = "https://httpbin.org/post";
	let resp = client.post(url)
		.json(&map)
		.send()
		.await?;

//	println!("{:#?}", resp);

	let body = resp.text().await? ;
//	println!("{:#?}", body);

	let json: serde_json::Value = serde_json::from_str(&body)?;

	let obj = json.as_object().unwrap();

	for (key,value) in obj.iter() {
		println!("{}\t{}",key,value);
		}

	eprintln!("*** 終了 ***");
	Ok(())
}

// --------------------------------------------------------------------
```

コンパイル

```bash
cargo build
```

実行結果

```text
$ cargo run
    Finished dev [unoptimized + debuginfo] target(s) in 0.06s
     Running `target/debug/http_post`
*** 開始 ***
args	{}
data	"{\"user\":\"jiro\",\"password\":\"123456\"}"
files	{}
form	{}
headers	{"Accept":"*/*","Content-Length":"35","Content-Type":"application/json","Host":"httpbin.org","X-Amzn-Trace-Id":"Root=1-5f0eb9e1-064b695a2db532c4d57d894e"}
json	{"password":"123456","user":"jiro"}
origin	"219.126.137.21"
url	"https://httpbin.org/post"
*** 終了 ***
```

次のバージョンで確認しました。

```text
$ rustc --version
rustc 1.43.0

$ cargo --version
cargo 1.43.0
```
Rust の http クライアントの使い方 (Get)

 次のページを参考にしました。
[reqwest 0.10.6](https://docs.rs/crate/reqwest/0.10.6)

プロジェクトの作成

```bash
cargo new http_get --bin
```

```text:Cargo.toml
[package]
name = "http_get"
version = "0.1.0"
edition = "2018"

#

[dependencies]
reqwest = { version = "0.10", features = ["json"] }
tokio = { version = "0.2", features = ["full"] }
serde = { version = "1.0", features = ["derive"] }
serde_json = "1.0"
```

```rust:src/main.rs
// --------------------------------------------------------------------
/*
	http_get.rs

					Jul/15/2020
*/
// --------------------------------------------------------------------
#[tokio::main]

async fn main() -> Result<(), Box<dyn std::error::Error>> {
	eprintln!("*** 開始 ***");
	let url = "https://httpbin.org/get";
	let client = reqwest::Client::new();
	let resp = client.get(url)
		.send()
		.await?;

//	println!("{:#?}", resp);

	let body = resp.text().await? ;

	let json: serde_json::Value = serde_json::from_str(&body)?;

	let obj = json.as_object().unwrap();

	for (key,value) in obj.iter() {
		println!("{}\t{}",key,value);
		}

	eprintln!("*** 終了 ***");
	Ok(())
}

// --------------------------------------------------------------------
```

コンパイル

```bash
cargo build
```

実行結果

```text
$ cargo run
    Finished dev [unoptimized + debuginfo] target(s) in 0.06s
     Running `target/debug/http_get`
*** 開始 ***
args	{}
headers	{"Accept":"*/*","Host":"httpbin.org","X-Amzn-Trace-Id":"Root=1-5f0eb88b-b00d08d44a66e35878beeb4e"}
origin	"219.126.137.21"
url	"https://httpbin.org/get"
*** 終了 ***
```

次のバージョンで確認しました。

```text
$ rustc --version
rustc 1.43.0

$ cargo --version
cargo 1.43.0
```
BATのgotoでコマンド構文が誤っている場合

# NGなBATファイル

```bat:tset.bat
@echo off
set val=123
set num=456
if %val%==123 (
	if %num%==456 (
		goto hoge
	)
	echo sakura
	:hoge

	echo warabi
)
```

これを実行した結果は以下

```
C:\Users\Administrator\Desktop>test.bat
コマンドの構文が誤っています。

```

# OKなBATファイル

```bat:test.bat
@echo off
set val=123
set num=456
if %val%==123 (
	if %num%==456 (
		goto hoge
	)
	echo sakura
	:hoge
	echo warabi
)
```

これを実行した結果は以下

```
C:\Users\Administrator\Desktop>test.bat
warabi
```

おわかりいただけただろうか。

# 原因＆対処

``if()``のなかの``gotoラベル``は直後にコマンドが無いと駄目らしい。
1つ目と2つ目の違いは``:hoge``の直後に空行があるかないか、だけである。

コマンドならなんでもよくて、コメント文である``rem``でもいい。

```bat:test.bat
@echo off
set val=123
set num=456
if %val%==123 (
	if %num%==456 (
		goto hoge
	)
	echo sakura
	:hoge
	rem #本日は晴天なり
	echo warabi
)
```

``goto``使って``コマンドの構文が誤っています``と言われた場合はチェックしてみてください。

あと``if()``の中でなければ問題はない

```bat:test.bat
@echo off

goto hoge

:hoge

echo warabi
```
UFTでオブジェクトリポジトリマネージャが起動しない

UFT(Unified functional testing)を使用している際にリポジトリマネージャが起動しない事象が発生したので、その解決方法をメモしておきます。
とっても簡単です。

## オブジェクトリポジトリマネージャが起動しない

メニューバーの「リソース>オブジェクトリポジトリマネージャー」を選択したところ、いつもだったらオブジェクトリポジトリマネージャーのウィンドウが開くのに、起動しない。
UFTを見るにどうやらウィンドウ自体は開いているが、表に出てきていない様子。

<img width="366" alt="オブジェクトリポジトリマネージャ.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/121319/fc11d97a-7165-1723-6ff0-3e5630131f6f.png">

これはただディスプレイ外にウィンドウが行ってしまっているだけのようです。
なのでウィンドウを選択した状態で、Alt + Spaceを押下し、ウィンドウを最大化させてやればしっかり表示されました。
DeepSecurityトラブルシューティング

# 監視対象コンピュータが管理対象外になっている
## 症状
以下のようなログが出て、サーバとAgentが通信できない状態。

```
Unable to load agent certificate for verification.
Path is: /var/opt/ds_agent/dsa_core/ds_agent.crt
Error is: error:02001002:system library:fopen:No such file or directory [fopen('/var/opt/ds_agent/dsa_core/ds_agent.crt','r')]
sslCtx:UseCredentials() failed - error:2006D080:BIO routines:BIO_new_file:no such file []
```

## 原因

```/var/opt/ds_agent/dsa_core/ds_agent.crt``` が破損している可能性がある。

## 対応

```
$ sudo /etc/init.d/ds_agent stop
$ sudo rm -f /var/opt/ds_agent/dsa_core/ds_agent.crt
$ sudo /etc/init.d/ds_agent start
$ sudo /opt/ds_agent/dsa_control -a dsm://agents.deepsecurity.trendmicro.com:443/ "tenantID:<テナントID>" "token:<トークン>" "policyid:<ポリシーID>"
```
NugetのCoreTweetパッケージを導入する

# はじめに
C#アプリでTweet連携をするためのNuGetパッケージを導入してみることにした。

## CoreTweetとは
OSSのTwitterライブラリ。2020年7月現在にて、使えるライブラリとされる。

## 環境
| 項目 | 設定値 |
|:-:|:-:|
| OS | Windows 10 |
| 開発環境 | Visual Studio Community 2019 version: 16.6.3 | 


# 1. coreTweetパッケージのインストール

1. [参照]を選択し、[coreTweet]を検索キーワードとして入力。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184939/a07383fb-fdba-1e78-e4a8-4de52a5aef17.png)

2. 左画面にて[CoreTweet]を選択し、インストールするソリューションを選択。[インストール]をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184939/223b39e5-5fe9-f94c-bcdc-64ccb4d0418c.png)

3. ソリューションに加えられる変更を確認し、[OK]をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184939/19eb9e91-52fa-6053-c276-67b50b900a1b.png)

4. インストール済みにバージョン情報が表示されることを確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184939/374ab07d-c1eb-5753-ba37-09df5ee770d8.png)


# 参考
- CoreTweet API ドキュメント http://coretweet.github.io/docs/index.html
- 作って覚えるVisual C# 2017 デスクトップアプリ入門
Alamofire.AFErrorのコード一覧

[Alamofire](https://github.com/Alamofire/Alamofire) のエラー列挙型 [AFError](https://github.com/Alamofire/Alamofire/blob/master/Source/AFError.swift) のコード一覧です。

[Firebase Crashlytics](https://firebase.google.com/docs/crashlytics) の `Crashlytics.crashlytics().record(error:)` でエラーを記録した際にどのエラーが起きているのかわかりにくいので。

| case | code |
| --- | :-: |
| createUploadableFailed | 0 |
| createURLRequestFailed | 1 |
| downloadedFileMoveFailed | 2 |
| invalidURL | 3 |
| multipartEncodingFailed | 4 |
| parameterEncodingFailed | 5| 
| parameterEncoderFailed | 6 |
| requestAdaptationFailed | 7 |
| requestRetryFailed | 8 |
| responseValidationFailed | 9 |
| responseSerializationFailed | 10 |
| serverTrustEvaluationFailed | 11 |
| sessionInvalidated | 12 |
| sessionTaskFailed | 13 |
| urlRequestValidationFailed | 14 |
| explicitlyCancelled | 15 |
| sessionDeinitialized | 16 |
Software Reporter Toolとは？停止しても大丈夫？

Webブラウザ「Chrome」を使っている際に「Software Reporter Tool」と言う、やたらとCPU占有率の高いプログラムが実行される場合があります。「Software Reporter Tool」って？
ではまず「Software Reporter Tool」と言うプログラムが何なのかについてご紹介しておきます。

「Software Reporter Tool」と言うのは、Webブラウザ「Chrome」に最初から組み込まれている管理ツールのことで、もちろん「Google」から発行されている正規のプログラムのため危険などはありません。

機能としては、アプリがクラッシュした際や、「Chrome」の実行に支障をきたすソフトウェアが見つかった場合に、分析結果などを「Google」に報告する働きがあります。
 

正規のプログラムとは言え、CPUへの負荷の大きさや、プログラム名称の不明瞭さなどから、ネット上でも結構不安に思う声が上がっているみたいです。

「Software Reporter Tool」は無効化するべき？
この「Google」が発行元の分析ツールである[「Software Reporter Tool」ですが](https://www.ceodata.com/remove-software-reporter-tool/)、とにかく動作は重いし、機能もいまいちよく分からないしで、プログラム自体を無効化したいと考える方も多いみたいです。

ただ、一応「Software Reporter Tool」を無効化する設定はあるものの、現状ではなぜか「Chrome」を再起動すると勝手に有効化されてしまう仕様になっているらしく、あまり意味のない存在となっています。

設定項目としては以下の手順で表示が可能です。

「Chrome」を起動する。
右上の「」からメニューを開き「設定」を選択する。
「詳細設定」をクリックする。
「リセットとクリーンアップ」内の「パソコンのクリーンアップ」をクリックする。
「Googleに詳細なレポートを送信する」をオフにする。
これで「Chrome」を再起動するまでの間は、「Software Reporter Tool」が実行されるのを防ぐことができます。

とは言え毎回設定を変更するのも面倒ですし、今後もずっと抑止したい場合は別の方法で強制的に停止させておく方法もあります。


どうしても「Software Reporter Tool」を停止したい場合は
「Software Reporter Tool」の実行がどうしても不快な場合には、「Software Reporter Tool」の実行プログラム自体のアクセスを禁止してしまうことで強制的に停止させておくことができます。


まずは、以下の場所を確認して、「Software Reporter Tool.exe」と言う実行ファイルを見つけましょう。

C:\Users\（ユーザー名）\AppData\Local\Google\Chrome\User Data\SwReporter\（バージョン）
 

実行ファイルが見つかったら、以下の手順でアクセスを禁止することができます。

実行ファイルを右クリックして「プロパティ」を開く。
「セキュリティ」タブを選択して右下の「詳細設定」をクリックする。
左下の「継承の無効化」をクリックする。
「このオブジェクトから継承されたアクセス許可をすべて削除します」をクリックする。
「適用」をクリックして「はい」を選択する。
これで、「Chrome」を再起動したとしても「Software Reporter Tool」が実行されることは無くなります。


まとめ
今回は、「Software Reporter Tool」でパソコンが重くなった時の対処法について詳しくまとめてみました。

「Chrome」に組み込まれた安全なプログラムとは言え、パソコンの動作を阻害されてしまってはストレスが溜まっちゃいますよね。


機能的には許可しておいた方がよいものの、パソコンの性能に不安があったり、動作があまりにも重くなってしまうことが頻繁に起こる場合は、思い切って停止してしまうのもいいかもしれません。

ご紹介した内容で一度試してみてください。

パソコンのスペックにもよりますが、ボクの場合は一時的にCPU占有率100％にまで達することもあり、とてもじゃないですが実行中は他の作業をできる状態ではありませんでした。

そもそもこの「Software Reporter Tool」が何なのかも分かりませんでしたし、タスクを終了してもいいのかどうかも不安だったため、色々と調べてみることに…。

今回は、「Software Reporter Tool」が実行されて重くなってしまった時の対処法について詳しくまとめてみました。
Mac office:PowerPointのテンプレートの保存場所

MacのPowerPointのテンプレートの保存パスをメモ代わりに残す


```ruby:PowerPointテンプレートのパス
/Users/User名/Library/Group Containers/UBF8T346G9.Office/User Content/Templates/
```

PowerPoint:16.30 (2020/07/14現在)
アップデートすると変わる危険性があるが....

WindowsのPPでは「テンプレートとして保存」を選択すれば自動的にテンプレート保存用のローカルフォルダに移動するようだが、当方のMacでは確認できずいつものiCloudに保存していたがこれで少しは楽にPP資料作りがスタートできそうである
React.jsでemotionを使うときはJSX Pragmaをつける必要がありまして。

## 普通にimportしただけだと動かない

`Emotion`というCSSフレームワークを使ってちょっとお試しで実装していました。

`package.json`は以下の通りとなっております。

```json
{
  "dependencies": {
    "@emotion/core": "^10.0.28",
    "next": "9.4.4",
    "react": "16.13.1",
    "react-dom": "16.13.1"
  },
  "devDependencies": {
    "@types/node": "^14.0.22",
    "@types/react": "^16.9.43",
    "typescript": "^3.9.6"
  }
}

```

スタイルを設定したいページにEmotionをimportしたのですが・・・。

```typescript
import { Global, css, jsx } from "@emotion/core";
```

これだけだとスタイルが適応されないので調査いたしました。
どうやら下記のように`@jsx jsx`がないとうまいことコンパイルされないようでした。

```typescript
/** @jsx jsx */
import { Global, css, jsx } from "@emotion/core";
```

`jsx`をコンパイルする際は、Emotionは独自のコンパイラを通す必要があり、`/** @jsx jsx */`というJSX Pragmaの記述をしないと動きませんでした。

以下、名著「りあクト！ TypeScriptで極める現場のReact開発」から引用
> 「Emotion はちょっと他のライブラリと違って特殊なことをしているので、使うにあたっていくつか注意事項があるのね。Emotion の文法を使って記述したJSXは通常React.createElement() ではなくEmotion が提供するコンパイラを通す必要があるの。」
「@emotion/core からインポートしてるjsx というのがそのコンパイラね。で、JSX リテラルで書いたコードをそれに渡すためにファイル冒頭で/** @jsx jsx */ の『JSX Pragma』というマジックワードを記述してあげてるの」
「えっ、言われるまで気づきませんでした。そうなんですね」
「さらに、これに起因する注意点が三つあるの。ひとつめは『親コンポーネントでJSX Pragma を使用したら、子のコンポーネントでもJSX Pragma を使わなければならない』こと」
「使わないとどうなるんですか？」
「『ReferenceError: React is not defined』って怒られてコンパイルに失敗するね。場合によっては直上の親コンポーネントにもJSX Pragma が必要なときもある。Presentational Component をインクルードしてContainer Component を作るときとか、それ自体がEmotion を使ってなくてもJSX Pragma を書かないとコンパイルが通らない」

コンパイルエラーとありますが、私の環境ではエラーは出ずに、スタイルが当たらないという状況でした。

## 実装例

Emotionでは子コンポーネントでもJSX Pragmaの記述が必要ということで、
お試しとして、Indexからヘッダーを呼び出すものを実装してみました。

↓こんな感じです。

```
src
│
└─pages
    index.tsx
    header.tsx
```

```tsx:header.tsx
/** @jsx jsx */
import { Global, css, jsx } from "@emotion/core";

const globalCss = css`
  * {
    margin: 0;
    padding: 0;
  }
`;

const styles = {
  titleBase: css`
    height: 168px;
    width: 100%;
  `,
  title: css`
    height: 168px;
    width: 100%;
    font-family: Roboto;
    font-size: 64px;
    color: #ffffff;
    background: #2f80ed;
  `,
};

interface Props {
  title: string;
}

const Header = (props: Props) => {
  return (
    <>
      <Global styles={globalCss} />
      <div css={styles.titleBase}>
        <h1 css={styles.title}>{props.title}</h1>
      </div>
    </>
  );
};

export default Header;
```

```tsx:index.tsx
import Header from "./header";
/** @jsx jsx */
import { css, jsx } from "@emotion/core";

const styles = {
  content: css`
    height: 100%;
    width: 100%;
    font-size: 64px;
  `,
};

export default function Index() {
  return (
    <>
      <Header title="タイトル" />
      <div css={styles.content}>Content</div>
    </>
  );
}
```

起動させると、こんな感じで表示されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624898/55ce24bf-19ca-ffbf-84b3-4ca1e96f6d1c.jpeg" width="400px;">

Emotionをjsxで使いたい場合、JSX Pragmaを忘れずにつける必要がありました。気を付けたいですね
ESP8266　BearSSLでHTTPSサーバー接続

"はとね"さんの記事 "「猫の食生活」を超音波距離センサーでLineに通知してみた"　が、困っていた来客の通知に使えそうなので、早速　パクッてみることにした。　はとね　さん　勝手に引用してごめんなさい。
課題は、自宅の２階にいるとインターフォンの呼び出し音が聞こえなくて宅配の方に何度も再配達をお願いしなければならない事態が続いていて、これを何とか解決したいと常々思っていたのだけれど、良い解決方法が見当たらなかった。　たまたま距離センサーとESP8266の手持ちもあって、Lineに通知が来るシステム組めれば課題は解決とばかり、早速試作にとりかかった。
### 準備
ESP8266は3.3V入出力、手持ちの超音波センサーは5V電源で出力も5Vなので、出力を抵抗で分圧、電源はUSB充電器から5VをESP8266開発ボードのマイクロUSB端子に接続、超音波センサーは開発ボードの5V出力に接続。

####部品リスト
1. ESP8266開発ボード
2. 超音波距離センサー　HC-SR04
3. 10Kオーム抵抗３本（分圧用）
4. LED　1本
5. 220オーム抵抗１本
4. ブレッドボード
5. ジャンパー線
6. USB充電器
7. USBケーブル
####コピペー！
早速、はとね　さんの記事からスケッチをコピペ。　SSID, PASSWORDを自宅の環境に合わせて書き換え。　Line NotificationのページからTokenを取得、これも上書き。　準備完了。

####テスト
スケッチの書き込みはトラブル無く完了。　リセットしてから、動作テスト。　距離センサーの前に手をかざしてみても、変化なし。　スケッチを眺めてみると、ご確認防止の為に約20秒の待ち時間が設定されている、これを１に書き換えて再書き込み。　今度は郷里センサーが検知してLEDがオンになって、んっ！Lineに通知が来ない！！。　とにかく、動作をトレースするためにシリアルモニターをオンしてみると"Connection Failes"のフィードバック。　LKineのサーバーに接続していない。　色んな記事を調べてみると、同じくコピペしたスケッチで動かないので、ESP32にしたら動いたという記事があったので、ESP32開発ボードに取り換え、スケッチのライブラリー参照の部分もESP32用に変えて書き込み、テストすると”ピロピロピロ”とLineに着信。　これにて一見落着ではあるものの、これしきのものんでESP32は大げさだし、ESP8266はたくさんストックもあるので、何とかEPS8266で動かしてみたいと言う、欲求が抑えきれない。

####調査
繋がらない原因はLine NotificationのHTTPSのサーバーにSSL証明なしでつなぎこみに行こうとしている事と分かってきたけど、なんでESP32では同じコードで繋がるのか？　キーワードを変えながらググって見るけれども中々これといった参考になる記事が見当たらない。　2日目　BearSSLなる書込みを発見、

####修正したコード
 BearSSL::WiFiClientSecure client; を一行挿入

```qiita.rb
//Line通知
void sendLineNotify() {
  const char* host = "notify-api.line.me";
  const char* token = "Line Token"; *** Line Notificationから取得したTokenに書きかえ
  const char* message = "%f0%9f%8d%9a"; //ごはんの絵文字をURLエンコードしたもの

  BearSSL::WiFiClientSecure client; // *** この一行で解決 ***

  client.setInsecure();
  Serial.println("Try");
  //LineのAPIサーバに接続
  if (!client.connect(host, 443)) {
    Serial.println("Connection failed");
    return;
  }
  Serial.println("Connected");
```
####ブレッドボードで試作
![IMG_6208.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620544/7b1c838a-a5b1-49bb-e527-326ed329148b.jpeg)

####参照したURL
[ねこの食生活]　https://next.rikunabi.com/journal/20170719_t12_iq/
[BearSSL] https://arduino-esp8266.readthedocs.io/en/latest/esp8266wifi/bearssl-client-secure-class.html
【ExcelVBA】列名のアルファベットと列番号の数字を相互変換する

# RangeとCellsでセルの指定方法が違う
Rangeは基本は列名のアルファベット＋行番号の数字の文字列、Cellsは行番号と列番号をそれぞれ数字で指定するじゃないですか。
たまに列番号をアルファベットに変換したいとか、その逆があるわけです。
そんな時にはこの関数の出番。

**2020/07/20　コメントよりコードに反映**
@takahasinaoki さん、ご指摘とご提案ありがとうございました！

## 列番号(数字)を列名(アルファベット)に変換
引数の列番号の列全体の絶対参照アドレスを取得して`$`で`Split`して列名取得。

```vb
' 列番号→列名
Function ColumnIdx2Name(ByVal colNum As Long) As String
    ColumnIdx2Name = Split(Columns(colNum).address, "$")(2)
End Function
```

## 列名(アルファベット)を列番号(数字)に変換
引数のアルファベットの列全体から列番号取得。

```vb
' 列名→列番号
Function ColumnName2Idx(ByVal colName As String) As Long
    ColumnName2Idx = Columns(colName).column
End Function
```
---
特に列番号→列名は、文字コードが～とか、A～Zが26文字だから～とか、AZ列以降だと～とか、いろいろ考えたんだけど、面倒になってきたのでおそらく一番面倒じゃない方法に行きつきました。
ワンライナーで書けるものはワンライナーがいいよね。後々読んでもわかりやすいし。
ActionController::UrlGenerationErrorを解決したお話

####解決したいこと
トップページ作成中にマイページへアクセスしようとした際に
https://gyazo.com/979b656dfec9fe3815acef2cd0582933
こちらのエラーが発生


```ruby
        %li.Header-nav__listsRight--mypage
          = link_to  "マイページ", user_path


こちらのuser_pathに問題がある模様
```
user_pathに現在ログイン中のユーザーを取得させればよかった。


####解決法

```ruby
         = link_to  "マイページ", user_path(current_user)
```
path指定の後に(current_user)をつければ良いとのことでした
Golangでマルチプログレスバーを表示したい！！

Golangの十八番と言えば並行処理なわけですが、それぞれの処理がどのくらいの進捗なのか知りたい！っということで、pbとuiprogressと言う人気のパッケージを使って動かしてみました。

Golangのプログレスバーを実装するパッケージについては、こちらの記事で紹介しています。
[Golangでプログレスバーを表示するためのパッケージ3選](https://qiita.com/Akazawa_Naoki/items/a63193e3ac4c8cd4f19a)

# pbでやってみた

```golang:main.go
package main

import (
    "log"
    "math/rand"
    "sync"
    "time"

    "github.com/cheggaaa/pb"
)

func processing(wg *sync.WaitGroup, b *pb.ProgressBar) {
    defer wg.Done()
    for n := 0; n < 200; n++ {
        b.Increment()
        rand.Seed(time.Now().UnixNano())
        time.Sleep(time.Millisecond * time.Duration(rand.Intn(100)))
    }
    b.Finish()
}

func main() {
    process_1 := pb.New(200).Prefix("process_1: ").SetMaxWidth(80)
    process_2 := pb.New(200).Prefix("process_2: ").SetMaxWidth(80)
    process_3 := pb.New(200).Prefix("process_3: ").SetMaxWidth(80)

    pool, err := pb.StartPool(process_1, process_2, process_3)
    if err != nil {
        log.Fatal(err)
    }

    var wg sync.WaitGroup
    for _, bar := range []*pb.ProgressBar{process_1, process_2, process_3} {
        wg.Add(1)
        go processing(&wg, bar)
    }
    wg.Wait()
    pool.Stop()
}
```

実行してみるとこんな感じ
![pb_multi.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/454589/e157c3db-c8c7-9080-1020-54c473c3800c.gif)

# uiprogressでやってみた
```golang:main.go
package main

import (
    "math/rand"
    "sync"
    "time"

    "github.com/gosuri/uiprogress"
    "github.com/gosuri/uiprogress/util/strutil"
)

func processing(process_name string, wg *sync.WaitGroup, u *uiprogress.Bar) {
    defer wg.Done()
    u.PrependFunc(func(b *uiprogress.Bar) string {
		return strutil.Resize(process_name + ": ", 11)
	})
    for u.Incr() {
        rand.Seed(time.Now().UnixNano())
        time.Sleep(time.Millisecond * time.Duration(rand.Intn(100)))
    }
}

func main() {
    uiprogress.Start()
    process_1 := uiprogress.AddBar(100).AppendCompleted().PrependElapsed()
    process_2 := uiprogress.AddBar(300).AppendCompleted().PrependElapsed()
    process_3 := uiprogress.AddBar(200).AppendCompleted().PrependElapsed()

    var wg sync.WaitGroup

    wg.Add(1)
    go processing("process_1", &wg, process_1)
    wg.Add(1)
    go processing("process_2", &wg, process_2)
    wg.Add(1)
    go processing("process_3", &wg, process_3)

    wg.Wait()
}
```
実行してみるとこんな感じ
![uiprogress_multi.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/454589/7002b8f9-778d-062d-6963-ebd9aa15fde7.gif)
# まとめ
なんか実際動かしてみると、Dockerでイメージをpullする時みたいでエモいですねw

どちらのパッケージも使いやすいので、馴染みのいい方を選んでカスタムするといいと思います。
Dockerでアリババクラウドのコマンドラインインターフェイスを実行する

**Alibaba Cloud Command Line Interface（CLI）**は、コマンドラインから複数のサービスを制御したり、スクリプトを使って自動化したりできる統合ツールです。

本ブログは英語版からの翻訳です。オリジナルは[こちら](https://www.alibabacloud.com/blog/alibaba-cloud-toolbox---running-cli-in-docker_593883)からご確認いただけます。一部機械翻訳を使用しております。翻訳の間違いがありましたら、ご指摘いただけると幸いです。

Alibaba Cloud Command Line Interface（CLI）は、Alibaba Cloudのサービスを管理するための統一ツールです。1つのツールをダウンロードして設定するだけで、コマンドラインから複数のAlibaba Cloudサービスを制御し、スクリプトで自動化することができます。

CLIでは、内部で各種製品のSDKを利用して、意図した結果を実現しています。このインストールは、新しいSDKのバージョンが頻繁にリリースされることを考えると、メンテナンスが大変な場合があります。また、前提条件がインストールされているマシンにアクセスできない場合も面倒です。

このような状況ではDockerが便利です。Dockerの主な利点は、ソフトウェア開発のための標準化された単位に、すべての依存関係を持つアプリケーションをパッケージ化できることです。仮想マシンとは異なり、コンテナは高いオーバーヘッドを持たないため、基盤となるシステムやリソースをより効率的に利用することができます。

このドキュメントでは、CLIを自由に起動するために使用できる、事前にパッケージ化されたAlibaba Cloud CLI Dockerイメージについて説明します。また、コンテナのデータを永続化する方法についても説明しています。

#前提条件
1、Dockerがインストールされているマシンです。やり方がわからない場合は、[このチュートリアル](https://www.alibabacloud.com/blog/How-to-Install-and-Use-Docker-on-Ubuntu-16-04_470612?spm=a2c65.11461447.0.0.c2017a06oZ0axA)を参照してください。
2、インターネット接続が機能していることです。

#はじめに
開始するには、Alibaba Cloud CLI Dockerイメージを取得する必要があります。使用ケースに応じて、以下のコマンドのいずれかを実行してください（以前にイメージが取得されていない場合は、最新のイメージも取得されます）。

###インタラクティブモード

```
docker run -ti aliyunca/aliyuncli-python-toolbox:latest sh
```

###デタッチドモード

```
docker run -dti aliyunca/aliyuncli-python-toolbox:latest sh
```

これらの呼び出しの両方について、CLIを設定する必要があります。

```
# configure the CLI

$ aliyuncli configure

Aliyun Access Key ID [None]: my_access_id

Aliyun Access Key Secret [None]: mypassword

Default Region Id [None]:

Default output format [None]:

# make calls to Aliyun!

$ aliyuncli ecs

usage: aliyuncli <command> <operation> [options and parameters]

[ecs] valid operations as follows:

ActivateRouterInterface               | AddTags  

AllocateEipAddress                     | AllocatePublicIpAddress

ApplyAutoSnapshotPolicy          | AssociateEipAddress

AssociateHaVip                          | AttachDisk

....



# get some help regarding the function

aliyuncli ecs DescribeImages help
```

注: dockerイメージは、初期のCLI設定を永続化するように設定することができます。これは、ユーザが信頼しているコンピュータでのみ行う必要があります。ハイライトされたパラメータを置き換える必要があります。

以下のコマンドを実行して、CLIパラメータを保存するローカルフォルダ参照を渡します。

```
docker run -dti \

      -v {Full local folder path}:/root/.aliyuncli \

      aliyunca/aliyuncli-python-toolbox:latest sh
```

環境変数も尊重されています。

```
docker run -dti \

      --env ALI_ACCESS_KEY={API Key} \

      --env ALI_ACCESS_SECRET={API Secret} \

      --env ALI_DEFAULT_REGION=ap-southeast-1 \

      --env ALI_OUTPUT_FORMAT=json \

      aliyunca/aliyuncli-python-toolbox:latest sh
```

#結論
このドキュメントでは、自分で環境を維持するための複雑な作業を経ることなく、Alibaba Cloud CLIにアクセスする簡単な方法を説明しています。これにより、CLIのインストールの一部としてインストールされる依存関係からホストコンピュータを解放することもできます。

*アリババクラウドは日本に２つのデータセンターを有し、世界で60を超えるアベラビリティーゾーンを有するアジア太平洋地域No.1(2019ガートナー)のクラウドインフラ事業者です。
アリババクラウドの詳細は、こちらからご覧ください。
[アリババクラウドジャパン公式ページ](https://www.alibabacloud.com/ja)*
fp-ts 関数を繋げる

fp-tsでは `pipe` という関数で関数を繋げていきます。Haskellの `do` やScalaの `for` に相当するものですが、
表現力はなかり見劣りします。

## Monadクラスを使用した場合の関数の２形態

Monadクラスの例として`Option`を用いていますが、`Reader`でも`TaskEither`でも共通の話題です。

Monadクラスで関数を扱っていると、以下のような関数の形態に出くわします。形態ごとに関数の繋げ方が違ってきます。


### liftされた関数

liftされた関数はちゃんとした関数なので他の関数と合成が可能。

```typescript
(ma: Option<A>) => Option<B> // liftされた関数
```

### 閉じ込められた関数

Monadクラスのインスタンスの中に関数が閉じ込められているので、これ自体は関数ではない。なので、他の関数との合成はできないし、そのままでは呼び出せない。その代わり閉じ込められた関数を呼び出す仕組みが用意されている。

```typescript
Option<(a: A) => B> // 閉じ込められた関数
```

## 関数を繋げる: liftされた関数用

以下の方法で関数をliftします。共通で代表的なものは以下の２つです。他にも亜種、各Monadクラス特有のliftについて色々あります。

### map

`(a: A) = >B`という関数を`(ma: Option<A>) => Option<B>`に変換する。

```typescript
map: <A, B>(f: (a: A) => B) => (ma: Option<A>) => Option<B>
```

### chain

`(a: A) => Option<B>`という型の関数を`(ma: Option<A>) => Option<B>`に変換する。

```typescript
chain: <A, B>(f: (a: A) => Option<B>) => (ma: Option<A>) => Option<B>
```

## 関数を繋げる: 閉じ込められた関数用

### ap

`ap` を使うことで閉じ込められた関数 `<B>(mab: Option<(a: A) => B>)` を
引数 `<A>(ma: Option<A>)` で呼び出すことができます。これにも色々亜種、各Monadクラス特有のものがあります。

```typescript
ap: <A>(ma: Option<A>) => <B>(mab: Option<(a: A) => B>) => Option<B>) => Option<B>
```
AndroidStudioをアップデートしたら起動しなくなる

## 参考にした記事
[Android Studioが起動しない問題を解決した](https://medium.com/@oikawa/solved-doesnt-start-android-studio-on-macos-8564d4f79ff8)
この記事はここに書いてあることそのまんまです
検索がめんどくさいので自分メモ用

## 環境
- Mac
- [Pleiadesプラグイン](https://mergedoc.osdn.jp)で日本語化

## 解決したい内容
AndroidStudioが起動しない
アイコンをクリックしても最初の画面が表示されない

## 改善策
Users/(ユーザーネーム)/Library/Preferences/AnfroidStudio(バージョン)
のファイルを消す
最新版消して直らなかったら過去バージョンも消したら良いんじゃないかな
ショートカットとかの設定は全部消えます

二回やって二回起動しなくなったから、日本語化が原因かなぁ
[Unity]Shader書く人は.cgincがあると幸せになれる

#前書き
一度ShaderGraphを使用してあまりの便利さにLabで書くのをやめようとしたDemです。
Unityも便利な機能が増えてきていますが、やはり勉強しながらならちゃんと書いた方がいいですね。

#よく使われるやつ

よくUnlitShaderを書く際に**#include"UnityCG.cginc"**と書くことがありますね。
これを読み込むとUnity側が用意してくれている便利な機能が一通り使用可能になります。そもそも作成時でデフォルトで書かれていますが。
実際このUnityCG.cgincの中身もGitHubから見ることができたりします。
[こちら](https://github.com/TwoTailsGames/Unity-Built-in-Shaders/blob/master/CGIncludes/UnityCG.cginc)から飛ぶことができます。
使用していてもまだまだ使ったことない機能がたくさんありますね・・・。

#.cginc作ってみよう
自作した関数などを.cgincにまとめていつでも使えるようにしてみましょう。
作り方は簡単で...
**メモ帳を作って拡張子を.cgincにするだけです。**
![コメント 2020-07-14 141635.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482043/94be6c89-f2b0-8a52-abe8-4d7f958b85ac.png)
はい、これだけです。簡単ですね。あとはこの中に自作関数を記述するだけです。
では、サンプルとして僕がテストで割と使用するリムライトを.cginc内に記述してみましょう。

```Hoge.cginc
//RimLightの計算
//1:
float UnlitRimLight(float3 normal, float3 worldPos, float rimPower) {
	//頂点のワールド座標からカメラの位置のベクトルを求める
	float3 L = normalize(worldPos.xyz - _WorldSpaceCameraPos.xyz);
    //dotで値が0だと垂直で、1だと平行 1-して値を逆にする
	float d = 1 - saturate(abs(dot(normal, L)));
	d = pow(d, rimPower);
	return d;
}
```

読み込み方法は同じで**#include".cgincファイル"**で読み込みます。

```RimLight.shader

Shader "Unlit/RimLight"
{
    Properties
    {
		_RimPower("Rim Power",Range(0.1,5.0)) = 2
		[HDR]
		_RimColor("Rim Color",Color) = (1,1,1,1)
    }
    SubShader
    {
        Tags { "RenderType"="Transparent" "Queue" = "Transparent"}
		Blend SrcAlpha OneMinusSrcAlpha

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"
			#include "../cginc/Hoge.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
				float3 normal:NORMAL;
            };

            struct v2f
            {
				float3 normal:NORMAL;
				float3 worldPos:TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

			float _RimPower;
			float4 _RimColor;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
				o.worldPos = mul(unity_ObjectToWorld, v.vertex);
				o.normal = UnityObjectToWorldNormal(v.normal);
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
				float3 normal = normalize(i.normal);
				float c = UnlitRimLight(normal,i.worldPos,_RimPower);
				return _RimColor * c;
            }
            ENDCG
        }
    }
}


```

fragの部分がずいぶんとすっきりしますね。関数名もしっかりと命名すればどんな機能かもわかりやすくなります。
読み込み方が"../cginc/Hoge.cginc"となっているのはファイルパスの問題です。Shaderから見て.cgincファイルがどこにあるのかを
把握して読み込みましょう。
僕はこんな感じでcgincとShaderのファイルを分けているため、上記のような書き方をしています。
![コメント 2020-07-14 141359.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482043/ab3e0447-2f9f-8f07-a6c9-a4f8ef24bb71.png)

#終わりに
Shaderを書いて汎用性があるならとりあえずcgincにまとめてみるのもいいでしょう。肥大化してきたら機能ごとに分けたりすると後々使いやすくなったりもしますからね。

ではでは、またどこかで・・・。
[フロント]ルーティングの基本

##react-router-domのルーティングについて記載
今回はreact-router-domについてだが、大方ルーティングにおいてはどれでも考え方は同じである。

##基本的なルーティング設計
###大元のコンポーネントにpath毎の表示したいコンポーネントを記述
注意すべきなのはSwitchは上から順に確認しているため、hoges/:hoges_Idとhogesの順番が逆だった場合には、pathがhoges/:hoges_Idだとしてもhogesで引っかかってしまう点。


```App.js
export default function App() {
  return (
    <Router>
      <div>
        <Switch>
          <Route path="/fuga">
            <Fuga />
          </Route>
          <Route path="/hoges/:hoges_Id">
            <Hoge />
          </Route>
          <Route path="/hoges">
            <Hoges />
          </Route>
          <Route path="/">
            <Redirect to="/hoges" />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}
```

###それぞれのコンポーネントでクリック時に発火するように設定
react-router-domではuseHistory()と呼ばれるAPIが用意されている。
これをクリック時に利用することでURLが切り替わり、指定のコンポーネントの表示が容易に実行できる。
(https://reactrouter.com/web/api/Hooks/usehistory)
Tensorflowエラー解除・kerasの使い方

Visual C++　のインストールが必要

```python
# ---------------------------------
# データ等の準備
# ----------------------------------
import numpy as np
import pandas as pd

# train_xは学習データ、train_yは目的変数、test_xはテストデータ
# pandasのDataFrame, Seriesで保持します。（numpyのarrayで保持することもあります）
# one-hot encodingされたものを読み込む

train = pd.read_csv('C:/Users/takayuki/Desktop/kaggleで勝つ/input/sample-data/train_preprocessed_onehot.csv')
train_x = train.drop(['target'], axis=1)
train_y = train['target']
test_x = pd.read_csv('C:/Users/takayuki/Desktop/kaggleで勝つ/input/sample-data/test_preprocessed_onehot.csv')

# 学習データを学習データとバリデーションデータに分ける
from sklearn.model_selection import KFold

kf = KFold(n_splits=4, shuffle=True, random_state=71)
tr_idx, va_idx = list(kf.split(train_x))[0]
tr_x, va_x = train_x.iloc[tr_idx], train_x.iloc[va_idx]
tr_y, va_y = train_y.iloc[tr_idx], train_y.iloc[va_idx]

# tensorflowの警告抑制
import os
os.environ['TF_CPP_MIN_LOG_LEVEL'] = '1'
import tensorflow as tf
tf.compat.v1.logging.set_verbosity(tf.compat.v1.logging.ERROR)

# -----------------------------------
# ニューラルネットの実装
# -----------------------------------
from keras.layers import Dense, Dropout
from keras.models import Sequential
from sklearn.metrics import log_loss
from sklearn.preprocessing import StandardScaler

# データのスケーリング
scaler = StandardScaler()
tr_x = scaler.fit_transform(tr_x)
va_x = scaler.transform(va_x)
test_x = scaler.transform(test_x)

# ニューラルネットモデルの構築
model = Sequential()
model.add(Dense(256, activation='relu', input_shape=(train_x.shape[1],)))
model.add(Dropout(0.2))
model.add(Dense(256, activation='relu'))
model.add(Dropout(0.2))
model.add(Dense(1, activation='sigmoid'))

model.compile(loss='binary_crossentropy',
              optimizer='adam', metrics=['accuracy'])

# 学習の実行
# バリデーションデータもモデルに渡し、学習の進行とともにスコアがどう変わるかモニタリングする
batch_size = 128
epochs = 10
history = model.fit(tr_x, tr_y,
                    batch_size=batch_size, epochs=epochs,
                    verbose=1, validation_data=(va_x, va_y))

# バリデーションデータでのスコアの確認
va_pred = model.predict(va_x)
score = log_loss(va_y, va_pred, eps=1e-7)
print(f'logloss: {score:.4f}')

# 予測
pred = model.predict(test_x)

# -----------------------------------
# アーリーストッピング
# -----------------------------------
from keras.callbacks import EarlyStopping

# アーリーストッピングの観察するroundを20とする
# restore_best_weightsを設定することで、最適なエポックでのモデルを使用する
epochs = 50
early_stopping = EarlyStopping(monitor='val_loss', patience=20, restore_best_weights=True)

history = model.fit(tr_x, tr_y,
                    batch_size=batch_size, epochs=epochs,
                    verbose=1, validation_data=(va_x, va_y), callbacks=[early_stopping])
pred = model.predict(test_x)

```
if文でfalse判定される条件式（JS）

```js
if (undefined) {
  // 実行されない
}

if (null) {
  // 実行されない
}

if (0) {
  // 実行されない
}

if ('') {
  // 実行されない
}

if (false) {
  // 実行されない
}
```

- undefined
- null
- 0
- 空文字
- false

は全てif文内ではfalse判定されます。（雰囲気で使っていたのでまとめた←）
上記項目の頭に!をつけて使うと便利に使えます。
```(例) if (!null) {} ```
【Vue】Vue3でScopedCSSが改善されるという話

# 更新内容
https://github.com/vuejs/rfcs/pull/119

## ScopedCSSの改善
以下のissueで議論されている下記の問題がこの更新で改善されます。
https://github.com/vuejs/vue/issues/11245#issuecomment-604150460

> scoped によって、親コンポーネントのスタイルは子コンポーネントに漏れません。ただし、子コンポーネントのルートノードは親スコープの CSS と子スコープの CSS と両方によって影響を受けます。これは、設計上、親はレイアウトが目的で子のルート要素をスタイルすることができます。
https://vue-loader-v14.vuejs.org/ja/features/scoped-css.html

## v-slot, ::v-deep, scopedのスタイリング記述方法の改善
ScopedCSSの記述方法が改善されます。
ディープセレクタの記述方法は従来,以下の記述でしたが,

```style2.vue
<style>
.a ::v-deep b ...
.a >>> b ...
.a /deep/ b ...
</style>
or
<style scoped>
.a ::v-deep b ...
.a >>> b ...
.a /deep/ b ...
</style>
````
以下のような記述ができて、`v-slot`, `::v-deep`, `scoped`の記述がより直感的にスタイリングできるようになるみたいです。


```style3.vue
<style> <!-- global -->
/* deep selectors */
.a ::v-deep(.b) ...

/* slot */
.a ::v-slotted(.b) ...

/* global */
.a ::v-global(.b) ...
</style>

<style scoped> <!-- scoped -->
</style>

<style deep> <!-- ::v-deep -->
</style>

<style slotted> <!-- ::v-slotted -->
</style>
```

#おわりに
何か間違えや質問などあればコメントお願いします。
androidのchromeでweb speech apiを使う

ずっと音声認識やりたくていろいろ試していました。

web speech apiの存在は知っていたけど、、javascriptが嫌だなぁと避けてましたが、、
やはり良さそうだと思ってちょっと頑張ってみました。

```web_speech_api.html
<style>
	body{
		text-align: left;
                font-size:40px;
		-webkit-text-size-adjust:100%;
             }

        div.status{
		color:gray;
		font-size:30px;
		-webkit-text-size-adjust:100%;
	}

</style>


<body>

<div id="status-div" class=status></div>
<div id="result-div"></div>

</body>
<script>
  let finalTranscript = '';
function SPEECH(){
  const resultDiv = document.querySelector('#result-div');
  const statusDiv = document.querySelector('#status-div');
  SpeechRecognition = webkitSpeechRecognition || SpeechRecognition;
  let recognition = new SpeechRecognition();
  recognition.lang = 'ja-JP';
 // recognition.interimResults = true;暫定的な結果はandroidだとうまく出来ませんでした
  recognition.continuous = true;
  recognition.start();
  recognition.onaudiostart = function(){
	statusDiv.innerHTML = "STATUS>>認識中";
  };
  recognition.onaudioend = function() {
   	statusDiv.innerHTML ="STATUS>>再読込完了";
        SPEECH();
  };
 recognition.onnomatch = function() {
　       statusDiv.innerHTML="STATUS>>　　　";
  };
  recognition.error = function() {
         statusDiv.innerHTML="エラー<br>ブラウザで更新してください";
  };
  recognition.onresult = (event) => {
    let interimTranscript = ''; //暫定的な結果はandroidだとうまく出来ませんがなんとなく残してます
    for (let i = event.resultIndex; i < event.results.length; i++) {
      let transcript = event.results[i][0].transcript;
      if (event.results[i].isFinal) {
       	finalTranscript = '>'+transcript+'<br>'+finalTranscript;
      } else {
        interimTranscript = transcript;//暫定的な結果はandroidだとうまく出来ませんがなんとなく残してます
      }
    }

	resultDiv.innerHTML = finalTranscript;
  }

}
  window.onload =function(){
   SPEECH();
};
</script>
```

連続で認識させたかったので、音声認識の部分を丸ごと関数にして、音が途切れて音声認識が終了したらまたその関数を呼び出す
みたいな感じにしてます。（注：httpsサーバーに置かないと、呼び出しの度にマイクの使用許可を確認してきます。。）

pythonのある環境でしたら、このファイルが置いてあるディレクトリで

```
python3 -m http.server 8080
```
でローカル環境で試すこと出来ます
【python】 リスト内の特定の要素の数を取得

# リストの中に特定の要素がいくつあるかを数える

リストの要素に、ある要素がいくつあるかを数えたいとき、count()が使えます。
また、これは文字列に対しても使えます。

## count()

```python
l = [1, 2, 2, 3, 3, 3]
print(l.count(2)) 

# 出力結果: 2
```

```python
s = 'hello world!'
print(s.count('o'))

# 出力結果: 2
```

## その他

```python
l = [1, 2, 2, 3, 3, 3]
print(len([a for a in l if a == 2]))  # 2
```
```python
l = [1, 2, 2, 3, 3, 3]
print(sum([a == 2 for a in l]))  # 2
```

条件にあてはまる要素の数え上げにはこちらで対応できます。
Head要素内の記述

###meta要素
文書のメタ要素を記述する。

メタ情報には、文書の説明、文字エンコーディングなどが含まる。
meta要素はhead要素内だけで使用される。

###title要素
Webページのタイトルを記述する。
検索エンジンの結果ページに一覧表示されるところ。

###link要素
スタイルシートなど、外部ファイルを参照する時に使う。
PHP トレイトとは


## トレイト

class内の中にclassを追加してそのメゾットなどを再利用することができる



### サンプルコード.

```php:sample.php
<?php

class Car
{
 public function run()
 {
 echo "running by Car\n";
 }

 public function horn()
 {
 echo "beeeep!! by Car\n";
 }
}

trait Honda
{
 public function run()
 {
 parent::run();
 parent::horn();
 echo "running!! by Honda\n";
 }
}

class Machine extends Car
{
 use Honda;
}

$machine = new Machine();
$machine->run();

# running by Car
# beeeep!! by Car
# running!! by Honda



```

## 参考
https://www.php.net/manual/ja/language.oop5.traits.php
Lookerのカスタム書式設定で￥を表示する方法


Lookerの日本語マニュアル見ても「￥」の表記方法が書かれていなかったので、備忘として残します。


## やりたい事
Lookerのグラフや表の金額情報に「￥」を表示させる

## 下調べ
デフォルトの設定情報はこちらに書かれています。
https://docs.looker.com/ja/exploring-data/custom-formatting

ここを見てみると、「￥」表記についての記述がない事に気付きます。

えっ。まじすか！？
日本にLooker普及させる気マジである？大丈夫？とLookerさんに問い正したい気持ちに駆られました。
それはまたの機会にして、とりあえずLiveChatで聞いてみたら、「￥」はデフォルト設定ないので、エスケープして試行錯誤必要。という事のようでした。

## 手順
下図の通り、
- EDITからValesタブを選択する
- Value Labelsをアクティブ化する
- Value Formatにエスケープさせたコードを記入する

```
--頭に￥表記して、１０００単位の区切りを入れる書式

\¥#,##0
```

![スクリーンショット 2020-07-14 12.39.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242038/24b065cc-ed72-021a-4410-c0b3d49ad8c2.png)

- 出来上がり！
![スクリーンショット 2020-07-14 12.39.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242038/b32a7fca-c8a9-afae-9de7-f0df107fa060.png)

##　あとがき？
日本語表記もデフォルトで使えるといいなと思います。
Looker自体欧米主体で普及しているのは間違い無いと思うのですが、日本でLooker普及率を上げるにはこの手のローカライズも重要なのではと思いますので、今後のアップデートでデフォルト設定して欲しいと切に願います。
コードを書くということ Ruby

# rubyでコードを書くって行為とは・・・
　rubyの書き方、思考方法は本で読んで、取り敢えず動かしてみるだけでは見えてこないものが多いです。他者のコードを読むにも読解力が低い状態だと、習慣的な表現にさえ詰まる。また、こちらがその習慣を知らないと習慣慣れした人たちから逆に自分の書いたコードで驚かれることだってある。前に書いた命名の仕方だったりがそれにあたりますが、今回はそれとはまた別種の学んだものを纏めておこうと思います。

## クラスメソッドのself
　このクラスメソッドに書かれてるselfってなんなのか・・・書かないとそのメソッドを呼ぶこともできない。なんでやねんって話なんですよね。一番最初に思う疑問は。オブジェクト指向にそもそも慣れてないと、ここで躓くのです。

答えはクラスメソッドを示すためのものです。レシーバーがクラス名になるメソッドです。
下記は書籍で見たクラスメソッドの書き方です。呼び出す際に、クラス名であるGreeterをレシーバーにして、greetメソッドを呼んでいます。

```class_method.ruby
class Greeter
	class << self
		def greet
			puts "おはこんばんちわ"
		end
	end
end

Greeter.greet
```

下記はselfをレシーバーみたいに使った書き方ですね。クラス自身のgreetメソッドということだと思っています。初っ端はこれだけを見たのでなんのこっちゃわかりませんでした。

```self.rb
class Greeter
	def self.greet
		puts "おはこんばんちわ"
	end
end

Greeter.greet
```

クラス自身のgreetメソッド、と捉える理由として、下記の書き方ができるからです。selfではなく、直接クラス名をレシーバーみたいに書いても、greetメソッドを呼び出すことができます。

```class.rb
class Greeter
	def Greeter.greet
		puts "おはこんばんちわ"
	end
end

Greeter.greet
```

ではなぜ、クラスメソッドにおいて、selfを使うのか？

- selfを書いておいて、インスタンスメソッドと差異化
- 二度書き防止

の２点にあると思われます。後日、インスタンスメソッドとの違いも記述する予定です。

### クラス関係の余談
　とあるコードではrailsのActive Supportにおけるclass_attributeにおいても、slefが使用されているのを見たことがあります。これもselfの部分をFirebaseクラスに書き換えてやっても動いたことから、このclass_attributeも呼んで字の如く、Class#に分類されるもののようですね。

```firebase.rb
class Firebase
  require 'google/cloud'

  class_attribute :contact
  self.contact = Google::Cloud.new(ENV['GOOGLE_PROJECT']).firestore
end
```

## ロジックの初手は肝要

> ビリヤード台で左上から右下45度でボールを発射して壁で理想的な反射をする場合、ボールはどの座標を通って何ステップでコーナーの穴に落ちるか

ゲームプログラミングのコードを課題として頂いた時（ゲームプログラミングであることは後になって気づいたことですが）に、今まで有限ループでのロジック組みに取り組んでいたために、(例えば、1ヶ月のユーザー登録者数を計算するので、DB上から取り出したユーザーの分だけループさせたいのような)この手の無限ループロジックの発想が出てこなかった。そも思考ロジックの土台すらままなっておらず、この課題は答え合わせになるまで解く事ができなかったものです。

```billiard.rb
x_max = ARGV[0]
y_max = ARGV[1]

if !x_max || !y_max
  puts "引数を指定してください"
  exit 1
end

x_max =  x_max.to_i
y_max =  y_max.to_i

#状態
x = 1
y = 1
step = 1
x_way = 1
y_way = 1

puts " #{step} (#{x},#{y})"
x += 1
y += 1
loop do
  step += 1
  puts " #{step} (#{x},#{y})"

  if y == 1 && x == x_max || x == 1 && y == y_max || x == 1 && y == 1 || x == x_max && y == y_max
    puts "GOAL!!"
    break
  elsif x == x_max
    x_way = -1
  elsif y == y_max
    y_way = -1
  elsif x == 1
    x_way = 1
  elsif y == 1
    y_way = 1
  end

  x += x_way
  y += y_way
end
```

以下、学んだものを纏めます。

### 状態(state)管理
プログラムは扱うデータの状態変化である。
今回のビリヤード問題において具体的化させると、

- 引数で与えられた数によって作られる盤面
- ボールの初期値
- ボールの進行方向

何の状態を変化させ、何が固定化されていると目的のコードを作れるかを考える。

### 境界条件
何がきっかけで、状態の変化に繋がるのか、もしくは終了になるのかを見極めて条件式、状態に対し動きを与える処理を書く。
今回のビリヤード問題において具体的化させると、

- 四方の壁にあるx軸とy軸の方向にある最小値と最大値

ということになります。これを抑えることでどのタイミングでボールの移動状態が変化するかを判断できます。条件式を考える上で、重要になる。ロジックの走りは、境界条件を意識する。

### 正しい無限ループ
プログラミングにおける無限ループは、

**ループを実行しながら終了条件が見えてくるものに関して無限ループを使用する。言い換えると、プログラムを書いてる時に終了条件が明らかに分からないものを利用して無限ループを使用する。**

ゲームのプログラムなんてのはまさにそれキャラのダッシュモーションはユーザーの入力に依存するので、入力される限り無限ループさせる必要がある、という事ですね。

無限ループにおける利用はDB関係でも必要になる。大量のデータをループで処理する場合、殆ど無限ループと変わらない数のループを要するので、一定条件を満たしたら、終了するような設計にする必要がある。

## 感想
ロジックを組むにおいて、そもそも有限ループか、一定条件まで続くループなのか、でコードを書く事ができていなかった故に、今回の課題はろくに辿り着けることができなかったが、重要な思考としての無限ループは理解できてよかった。
GASで第一営業日が土日だったら平日に実行させる、をしようとしたら汎用性ありそうなコードに

会社で総務的な仕事をしていると、
第一営業日に必ずこんなことをやる！という業務が出てきますよね。

今回は、GoogleAppsScriptのトリガーで「毎月1日」に実行する設定をしているけど、1日が平日じゃなければ月曜に実行させたい

という気持ちで書いたコードを記載します。

外部の会社と複数のチャットワークチャンネルでやり取りしていて、毎月1日に全チャンネルに「請求書ください」とつぶやくbotを作成したくて以下のようなコードを書きました

```
function checkDay(){
  var day = new Date();
  var setTime = new Date();
  var day_num = day.getDay();
  
  //曜日毎の処理わけ
  if(day_num != 0 || day_num != 6){
    sendCw()

  } else if (day_num == 0 ){
    setTime.setDate(setTime.getDate() + 1);
    setTime.setHours(9);
    setTime.setMinutes(00);
    ScriptApp.newTrigger('sendCw').timeBased().at(setTime).create();

  } else if (day_num == 6){
    setTime.setDate(setTime.getDate() + 2);
    setTime.setHours(9);
    setTime.setMinutes(00);
    ScriptApp.newTrigger('sendCw').timeBased().at(setTime).create();
  }
}

function sendCw(){
　//チャットワークに通知する設定
}
```

これだけです。


###詳細

`var day_num = day.getDay();`
これでまず、曜日を取得します。
曜日は数字としてデータが返ってきます。
それぞれ、以下のように対応しています。
0 = 日曜
1 = 月曜
2 = 火曜
3 = 水曜
4 = 木曜
5 = 金曜
6 = 土曜

なので、実行した日が
0（日曜）もしくは6（土曜）以外。
つまり平日であれば、その日のうちにSendCWを行います。

もし、実行した日が日曜や土曜なら、次の処理に進みます。
次が私的に少し詰まったところです。

利用したのは、
`ScriptApp.newTrigger`
というものです。

これは、読んで字の如しですが
新しくトリガーをセットできるものです。
今回は、
土曜であれば今日+2日後（月曜）
日曜であれば今日+1日後（月曜）
の、それぞれ9時に、sendCwというファンクションを動かす
という設定を行いました。

この、日時の入れ方はいろいろあるようで、かなり混乱しましたが、[こちら](http://cly7796.net/wp/javascript/to-automatically-execute-the-processing-at-the-specified-date-and-time-in-the-google-apps-script/)の記事を参照し、解決まで進みました。

今回はchatworkで利用しましたが、
今後は社内メンバーへのSlack通知にも、使いたいと思っています。

トリガーを新たにセットできるとなると、かなりできることも広がりますね！
VueJS でYubinbangoライブラリを使えるようにする改修

# 概要

郵便番号で都道府県情報検索して住所自動入力する機能があれば便利だとおもいます。インターネットでそんなライブラリがあるか検索してみると下記のJSライブラリ見つけました。

- [Yubinbango](https://github.com/yubinbango/yubinbango)

導入方法はすごく簡単で手順書によっては下記のようにフォームをおけばOKです。

```html
    <form class="h-adr">
      <span class="p-country-name" style="display:none;">Japan</span>

      〒<input type="text" class="p-postal-code" size="3" maxlength="3">
      <input type="text" class="p-postal-code" size="4" maxlength="4"><br>

      <input type="text" class="p-region" readonly /><br>
      <input type="text" class="p-locality" readonly /><br>
      <input type="text" class="p-street-address" /><br>
      <input type="text" class="p-extended-address" />
    </form>
```
もちろんJSライブラリのインポートもしなければならないです。

```html

    <script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>

```

ただ開発しているシステムのフロントはVueJSで実装していることで通常JSライブラリを使えるようにNPMでライブラリ導入してapp.jsでrequiredしましたが下記のような問題が発生しました。

 - 郵便番号入力したら住所情報自動検索はできましたが他の入力欄でキー叩いたら住所欄の内容は空白になってしまいました。

# 原因の調査

いろいろ調査してみたらやっと原因がわかりました。VUEJSは通常のDOM使わずに自分のDOMでUI要素のみなを管理しているということが忘れてしまいました。そういうことで問題発生のながれは下記のようです

- YubinbangoはJSライブラリだからJQUERYでHTMLのDOMつかって都道府県の情報を検索完了したあと、住所欄探して検索結果自動的に入れてくれる。
- VUESJはHTMLのDOM使わないことで行った住所欄の更新について分かりません。
- VUEJSは次の更新操作で住所らんの値を自分持っている値（NULLかも）で入れてしまって空白となる。

# 改修

使えなくて残念の気持ちしながらもう一回解決方法探してみると「Yubinbango-Core」とういう物見つけましていい記事も見つけました。

https://qiita.com/kiyc/items/752f5a167c975582ebc2

教えたくれた通りにしてみたら想像外に[YubinBangoCore.core is not a constructor]とか「TypeError: Cannot read property 'Core' of undefined"」というJSエラーが出てきました。

YubinbangoのGithubでみなからのFeedbackみてみると既存の問題のようです。

- [YubinBango module が export されていない](https://github.com/yubinbango/yubinbango-core/issues/4)

しょうがないだからYubinbangoExportさせるようにNodeModuleのJSファイルを直接修正することにしました。

![スクリーンショット 2020-07-14 11.33.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139068/3053baeb-38d6-df52-e25e-2749c86e90c3.png)

```app.js

window.YubinBango = require('yubinbango-core')

```

```HelloWorld.vue
<template>
  <div class="hello">
    <input v-model="zip"/>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    props: {
      msg: String
    },
    data: function(){
      return {
        zip: null,
        address :null
      }
    },
    watch: {
      zip: function(zip) {
        let _this = this;
        new window.YubinBango.Core(zip, function(addr) {
          console.log(addr);
          _this.pref_id  = addr.region_id // 都道府県ID
          _this.locality = addr.locality  // 市区町村
          _this.street   = addr.street// 町域
        })
      }
    }


  }
</script>

```


あまりよくない方法ですが暫定的な策としてつかっても良さそうです。もちろんnpm更新で修正したコードがなくなる可能性があることでお気をつけてください。

以上です。