OmniAICreator/Qiita-1.07M huggingface dataset:
中間テーブルがあるDB設計

##はじめに
次はもっと複雑です。
中間テーブルを用いたDB設計をしていきます。
紙に書いた後にQiitaに書き起こす。
効率よくならんものか、この頭…💦

…と、言ってないでさっさとやりましょう。

## usersテーブル
|Column|Type|Options|
|------|----|-------|
|email|string|null: false|
|password|string|null: false|
|username|string|null: false|
##### ※email/password/username空欄を許可しない「NOT NULL」を設定。【null: false】

### Association
- has_many :posts
- has_many :comments

##### ※usersテーブル⇆postsテーブル = 「１対多」
##### ※usersテーブル⇆commentsテーブル = 「１対多」
#####  なので両方とも【has_many】

## postsテーブル
|Column|Type|Options|
|------|----|-------|
|title|text|null: false|
|text|text|null: false|
|user_id|integer|null: false, foreign_key: true|
##### ※/title/text/user_idは空欄を許可しない「NOT NULL」を設定。【null: false】
##### ※user_idを外部キーとして設定。【foreign_key: true】

###Association
- belongs_to :user
- has_many :comments
- has_many :posts_tags
- has_many :tags, through: :posts_tags

##### ※postsテーブル⇆usersテーブル = 「多対１」なので【belongs_to】
##### ※postsテーブル⇆commentsテーブル = 「１対多」
##### ※postsテーブル⇆posts_tagsテーブル = 「１対多」
　→【has_many】
##### ※postsテーブル⇆tagsテーブル = 「１対多」かつ、中間テーブルとしてposts_tagsテーブルを設けている。
　→【has_many **,through:】

## tagsテーブル
|Column|Type|Options|
|------|----|-------|
|text|text|null: false|
### Association
- has_many :posts_tags
 
- has_many :posts, through: :posts_tags


##### ※tagsテーブル⇆posts_tagsテーブル = 「１対多」なので【has_many】

##### ※tagsテーブル⇆postsテーブル = 「１対多」かつ、中間テーブルとしてposts_tagsテーブルを設けている。
　→【has_many **, through:】

## posts_tagsテーブル
|Column|Type|Options|
|------|----|-------|
|post_id|integer|null: false, foreign_key: true|
|tags_id|integer|null: false, foreign_key: true|
### Association
- belongs_to :post
- belongs_to :tag

## commentsテーブル
|Column|Type|Options|
|------|----|-------|
|text|text|null: false|
|user_id|integer|null: false, foreign_key: true|
|group_id|integer|null: false, foreign_key: true|

###Association
- belongs_to :post
- belongs_to :user


##まとめ
　・エンティティとその属性を明確に
　・エンティティ間のリレーションを明確に
　・どのデータにどんな制約がつくか
　・ER図にして表す

　これらが大事だと思った。

以上
【jQuery】ログイン画面をフェードインさせたい

前回のjquery導入が完了し、
最初のログイン画面をフェードインさせたかったので
簡潔にご紹介。

# アクセスして少ししてから表示させたい
[![Image from Gyazo](https://i.gyazo.com/2ba18fd5073ba877403b2210077323f8.gif)](https://gyazo.com/2ba18fd5073ba877403b2210077323f8)

## jsファイルに記述

```js:sample.js
$('head').append(
  '<style>body{display:none;}'
  );
  $(window).on("load", function() {
  $('body').delay(450).fadeIn(1200);
  });
```
deleyとfadeinの()の中身は任意で。
ミリ秒で書いています。
____________________________________
※私はapplication.jsで、jsファイルをまとめて読み込んでいるので
作業していませんが、そうでない方は
html側でjsファイルを読み込む必要があります。

ご覧いただきありがとうございました。
バ美肉！バ美肉！バ美肉

# これが..俺なのか？
![スクリーンショット 2020-04-11 23.38.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/584171/e83d7783-2fb8-2826-723d-d877765a904b.png)

こちらの記事を参考にさせていただき自分もVtuber体験してみました。
[【Mac】30分でミライアカリにバ美肉してビデオ会議するまでのログ](https://qiita.com/tktktktk/items/a024b9df15efe7b36ad6)

## バ美肉とは
「バーチャル美少女受肉またはバーチャル美少女セルフ受肉である。」
こんな言葉があることを初めて知った...

## 方法
基本的に上記にあげた記事を参考にしてただければバ美肉は可能である。
個人的には「ミライアカリ」よりも「キズナアイ」の方が馴染みがあったため、キズナアイでバ美肉チャレンジしてみました。
DLはこちらから可能です。
[キズナアイの公式サイト](https://kizunaai.com/download/)
※注意事項をよく確認して使用してください。


## 補足
参考記事の中で紹介されているCamTwistについて設定で少し悩んだので、細かい設定を補足します。

![スクリーンショット 2020-04-11 23.50.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/584171/48e2fc07-9c4c-5b8d-3f1e-35c56e312b73.png)


右側のSettingをご覧ください
Vtuberとしての画面だけを出力しようとした際に、違う画面も一緒に出力されてしまいました。
そのため、

[FaceVTuberの設定]
・popWindowをクリックするとVtuberの動きが出力する画面Windowが出ます。
・そのWindowを別ブラウザで開きます。(これをしないと下のセレクトボックスに出ない)
※同じデスクトップ上に全ての画面がないとフェイストラッキングが反応しないので注意

[CamTwistの設定]
・Confine to ....にチェック
・select from ...にチェック
・セレクトボックスからVtuberの画面を選択する
・Vtuber画面にキャプチャする画面範囲の枠が出るので調整する
これで余計な画面が入らないようにすることができます。


## 最後に
近年見かけることも多くなったVtuberですが、大手Vtuberもモデルを配布してみんなが体験できるようになっているのはとても良いことですね、思っていたよりもツールの用意が簡単でびっくりしました。
参考記事を書いてくださった方には感謝です。

本記事はVtuberコンテンツ体験を遊んでみたことを書き残しました。
営利目的などの意図はありませんのでご了承ください。
使用の際には個人の責任に置いて、使用上の注意をよく読んでから使用してください。
mac Hammerspoon / マルチモニタ環境でカーソルを対象モニタの画面中央に移動するホットキー

# 序章

CatchMouseを使ってたんですがcmd+tabでアプリが候補に出てきてうざいなと思っていたので代替が無いかと探してました。
見つからないので Hammerspoon で対応できそうだなと思ったのでやりました


# 結果

普通に動いた。
Hammerspoon は MiroWindowsManager など他の機能も使っていたのでアプリをまとめられたのが良かった。
 

# サンプル

```lua:${HOME}/.hammerspoon/Spoons/CatchMouse.spoon/init.lua
local obj={}
obj.__index = obj

-- Metadata
obj.name = "catchMouse"

function obj:bindHotkeys(mapping)

  for key,value in pairs(mapping) do
    local displayNo = value[1]
    local modifiers = value[2]
    local key = value[3];

    hs.hotkey.bind(modifiers, key, function ()
      moveDisplayCenter(hs.screen.allScreens()[displayNo])
    end)

  end

end

function moveDisplayCenter(screen)

  local screenFullFrame = screen:fullFrame()
  local screenCenterPoint = {}
  screenCenterPoint.x = screenFullFrame.x + screenFullFrame.w/2
  screenCenterPoint.y = screenFullFrame.y + screenFullFrame.h/2
  print(screenCenterPoint.x, screenCenterPoint.y)
  hs.mouse.setAbsolutePosition(screenCenterPoint)

end

function obj:init()
  print("Initializing CatchMouse")
end

return obj

```


```lua:${HOME}/.hammerspoon/init.lua
hs.loadSpoon("CatchMouse")

-- ホットキーのマッピング。
spoon.CatchMouse:bindHotkeys({
  -- monitor-index, modifier-keys, key
  {1, {"ctrl", "shift"}, "1"},
  {2, {"ctrl", "shift"}, "2"}
})

```

# issue

ほんとうはgithubにあげてspoonsとして登録してもらえたら良いかな。とも思ってたけど案内見つからなかったので諦めた。

# 参考

http://www.hammerspoon.org/docs/index.html
Apacheのインストール・起動


#Apache

Apache（アパッチ）とは世界中で使用されているWebサーバーソフトウェア(HTTPサーバー)のこと

以下ではAWSのLinuxサーバーにApatchをインストールしてみた

##Apacheのインストールコマンド
`sudo yum -y install httpd`

##Apacheの起動コマンド
`sudo systemctl start httpd.service`

##Apacheの起動確認コマンド
`sudo systemctl status httpd.service`

正常に起動されていると以下が表示される

<img width="711" alt="スクリーンショット 2020-04-11 23.28.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272157/f6fdf5a8-8573-dbe1-5cd8-7bc3bba820a5.png">

##全てのプロセスをCPUやメモリの使用率付きで表示する
`ps -axu`

ps:プロセス　ax:全て　u:CPUやメモリの使用率
以下のようにappacheの項目があればOK
<img width="665" alt="スクリーンショット 2020-04-11 23.36.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272157/a6968d64-8a10-ba50-4f93-b6ab434fcd63.png">


## サーバー起動時にApacheの自動起動設定コマンド
`sudo systemctl enable httpd.service`

以下のように表示されればOK
<img width="836" alt="スクリーンショット 2020-04-11 23.42.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272157/bbeec1e3-f78f-3e9e-86a6-a215460dcca1.png">


## Apacheの自動起動設定確認コマンド
`sudo systemctl is-enabled httpd.service`

enabledと表示されていればば、設定されている。

#最後に
Apacheのインストール後、その他ネットワークの設定に問題なければApacheのホームページが表示できるはずです。
<img width="1319" alt="スクリーンショット 2020-04-12 0.03.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272157/201d4253-8e49-8bc7-90da-768b94013a48.png">

次回はWordpressをインストールし、
DBの設定・Lamdaでのサーバー処理の自動化等を行う予定です。
MSYS2_ARG_CONV_EXCL="*" によるパス変換の抑制

# 概要

NSIS で作ったセットアップは `/S` オプションの指定により、サイレントセットアップになるのですが…

MinGW の bash から起動するとうまくいきません。

ところが、こうすると `/S` を渡せるようになりました:

```sh
MSYS2_ARG_CONV_EXCL="*" ./Setup_pdftifgather.exe /S
```

## うまくいかない理由

```sh
./Setup_pdftifgather.exe /S
```

![2020-04-11_23h35_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364126/3956d4ce-cdd3-b8eb-983c-5c93a705cd57.png)

`S:/` という、S ドライブのルートディレクトリを指し示すパスに変換されていました。

## MSYS_NO_PATHCONV

`MSYS_NO_PATHCONV=1` が良いらしいとか、良薬的効果を期待して試しましたが、効果は出ず…

そもそもググってもドキュメントもソースコードも出てこないので、現状追求のしようがありません…
sort

挿入ソート
平均計算量O(n^2)
最悪計算量O(n^2)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275793/85c65a01-b2c0-ec78-9428-52e5507b4443.png)

```c++
int main() {
	int n;
	cin >> n;
	vector<int>a(n);
	REP(i, n) {
		cin >> a[i];
	}
    //挿入ソート
	for (int i = 1; i < n; ++i){
		//挿入したい値
		int v = a[i];
		//vを挿入する適切な場所jを探す
		int j = i;
		for (; j > 0; --j) {
			if (a[j - 1] > v) {
				a[j] = a[j - 1];
			}
			else break;
		}
		a[j] = v;
		//各ステップの配列を出力してみる
		cout << "after step" << i << ":";
		for (int i = 0; i < n; ++i)cout << a[i] << " ";
		cout << endl;
	}
	return 0;
}
```
元々の数列がほとんど整列済みの場合は、高速に動作する (ほとんど swap する必要がないため)

マージソート
平均計算量　O(nlogn)
最悪計算量　O(nlogn)

問題をいくつかの部分問題に分解してそれぞれ再帰的に解く分割統治法を使う

mergesort(a,left,right):配列aのleft~right部分a[left:right]をソートする
right-left==1ならリターン
mid=(left+right)/2
mergesort(A,left,mid)
mergesort(a,mid,right)
a[left:mid]とa[mid:right]をマージしてa[left:right]全体をソート済み状態にする、という再帰関数を用意しておき
mergesort(a,0,n)を呼ぶ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275793/7407778c-662f-5807-e8aa-23fd3537b56c.png)

```c++
void mergesort(vector<int>&a, int left, int right) {
	if (right - left == 1)return;
	int mid = left + (right - left) / 2;
	mergesort(a, left, mid);
	mergesort(a, mid, right);
	//一旦左と右のソート結果をコピーしておく。右側は左右反転
	vector<int>buf;
	for (int i = left; i < mid; ++i)buf.push_back(a[i]);
	for (int i = right - 1; i >= mid; --i)buf.push_back(a[i]);
	int iterator_left= 0;
	int iterator_right = (int)buf.size() - 1;
	for (int i = left; i < right; ++i) {
		if (buf[iterator_left] <= buf[iterator_right]) {
			a[i] = buf[iterator_left++];
		}
		else {
			a[i] = buf[iterator_right--];
		}
	}

}
int main() {
	int n; cin >> n;
	vector<int>a(n);
	for (int i = 0; i < n; ++i) {
		cin >> a[i];
	}
	mergesort(a, 0, n);
	for (int i = 0; i < n; ++i) {
		cout << a[i] << " ";
	}
	cout << endl;
}
```

```c++
int L[500010], R[500010];
int a[500010];
int cnt = 0;
void merge(int A[], int n, int left, int mid, int right) {
	int n1 = mid - left;
	int n2 = right - mid;
	for (int i = 0; i < n1; ++i) {
		L[i] = A[left + i];
	}
	for (int i = 0; i < n2; ++i) {
		R[i] = A[mid + i];
	}
	L[n1] = INF;
	R[n2] = INF;
	int i = 0, j = 0;
	for (int k = left; k < right; ++k) {
		cnt++;
		if (L[i] <= R[j]) {
			A[k] = L[i++];
		}
		else {
			A[k] = R[j++];
		}
	}
}
void mergesort(int A[], int n, int left, int right) {
	if (left + 1 < right) {
		int mid = (left + right) / 2;
		mergesort(A, n, left, mid);
		mergesort(A, n, mid, right);
		merge(A, n, left, mid, right);
	}
}
int main() {
	int n; cin >> n;
	for (int i = 0; i < n; ++i) {
		cin >> a[i];
	}
	mergesort(a, n, 0,n);
	for (int i = 0; i < n; ++i) {
		cout << a[i] << " ";
	}
	cout << endl;
	cout << cnt << endl;
	return 0;
}
```
Visual Studio 2019（とTortoiseGit）で、Githubにshhで接続する

## 前準備

+ [TortoiseGitのセットアップ](https://qiita.com/SkyLaptor/items/6347f38c8c010f4d5bd2)
+ [VisualStudioとGitHubを連携させてみた](https://qiita.com/elu_jaune/items/eb354558d0dc39add152)

以上の2記事を参考に、TortoiseGitとVisualStudioの準備をする。
※この段階では、TortoiseGitではshhでGitHubに接続できるが、VisualStudioではhttpsでしか接続できない。

## Pageantをスタートアップに追加

"C:\Program Files\TortoiseGit\bin\pageant.exe"へのショートカットを"C:\Users\{ユーザー名}\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup"に配置

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307479/8dfa2a0d-1aa5-83d0-0264-53c3e90ce293.png)

## Pageantに登録

Pageantを実行し、タスクトレイのPageantを右クリックし、AddKeyを選択。
作成した.ppkファイルを登録する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307479/56ea51fe-1e19-9030-eebd-d1c402527165.png)

※Pageantに登録した.ppkファイルはPageantを終了するかログアウトをするともう一度登録しなおす必要がある。
ショートカットへの引数として.ppkファイルを登録しておけば、AddKeyの作業は省略できる。
ただし、パスフレーズを設定している場合は毎回聞かれるので、良し悪しあり。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307479/19d27371-9201-ce2b-eb3b-9996559c9108.png)

## SSHサーバーのフィンガープリントを追加

PowerShellで以下のコマンドを実行

```PowerShell
& 'C:\Program Files\TortoiseGit\bin\TortoiseGitPlink.exe' git@github.com
```

## 環境変数の追加

環境変数にGIT_SHHを追加し、値をC:\Program Files\TortoiseGit\bin\TortoiseGitPlink.exeとする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307479/3b9d6b25-07a9-18db-1976-8b0dc800c454.png)

## VisualStudioで接続

以上の手順で、httpsでなくshhを使いリポジトリにアクセスできるようになるはず。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307479/409e2e04-7296-119b-5499-903cda002897.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307479/08074f7d-da70-611b-0ad5-80120863cd42.png)


## 参考にしたサイト様

[Using SSH Keys in Visual Studio Code on Windows](https://www.cgranade.com/blog/2016/06/06/ssh-keys-in-vscode.html)
[pagent起動時に秘密鍵の読み込みを自動化](https://qiita.com/n_slender/items/c0f916129b6e61cc5d04)
SwiftUIのListの余白を消す方法

みなさんSwiftUI楽しんでいますでしょうか？
自分はSwiftUIでNeumorphismデザインを適応するOSSを作ったり、Musicアプリを開発したりしています。
https://github.com/tsuzukihashi/NeumorphismUI

今回は、SwiftUIのListを使用した際に表示されるリストを消す方法を絶対忘れるのでメモしておきます。
## 準備
わかりやすいようにリストに色をつけてみました。
![スクリーンショット 2020-04-11 22.38.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/a054f2c4-d47c-5ab8-dd7e-69375ea2086b.png)
`Text`の余白ではない物がついてますね〜

```swift
struct SwiftUIView: View {
    private let colors: [Color] = [.red, .blue, .green]
    var body: some View {
        List {
            ForEach(0..<3) { (row: Int) in
                Text("\(row)")
                    .background(Color.white)
                    .listRowBackground(self.colors[row])
            }
        }
    }
}
```

## 使用するメソッド
Listの余白を制御するには、`listRowInsets(_:)`を利用します。

```swift
struct SwiftUIView: View {
    private let colors: [Color] = [.red, .blue, .green]
    var body: some View {
        List {
            ForEach(0..<3) { (row: Int) in
                Text("\(row)")
                    .background(Color.white)
                    .listRowBackground(self.colors[row])
                    .listRowInsets(EdgeInsets())
            }
        }
    }
}
```

![スクリーンショット 2020-04-11 23.02.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/7de41071-f6bd-c081-70af-7f59401622fb.png)

このとき、気をつけなくてはいけないところは`List`の中の要素は`ForEach`で呼ばないといけないところです。
そもそもこれをしないと、`listRowBackground` も適用されないのでお気をつけください。

![スクリーンショット 2020-04-11 23.12.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/5fbe5fb7-4768-f8f5-1d0b-8a9d74e18a9a.png)


```swift
struct SwiftUIView: View {
    private let colors: [Color] = [.red, .blue, .green]
    var body: some View {
        List(0..<3) { (row: Int) in
            Text("\(row)")
                .background(Color.white)
                .listRowBackground(self.colors[row])
                .listRowInsets(EdgeInsets())
        }
    }
}
```
終わり！！！！

## 参考
- https://developer.apple.com/documentation/swiftui/list/3270239-listrowinsets
- https://stackoverflow.com/questions/56614080/how-to-remove-the-left-and-right-padding-of-a-list-in-swiftui
MT4 で使うファイル形式

#はじめに

プログラマーの性質というか何というか自分が触る環境を一通り知っておきたいということで、まずはファイル形式。

#MT4 で使うファイル形式

MT4 で使うファイル形式として以下のようなものがあります。

- mq4：ソースファイル (C/C++ でいう .c とか .cpp とか)
- mqh：ヘッダーファイル (C/C++ でいう .h とか .hpp とか)
- ex4：ソースファイルをコンパイルした出力ファイル (恐らく dll と同じだと思う)

MetaEditor ではファイル生成用のウィザードがありますので、それを利用すれば適切なファイルが出来上がります。
Laravel HerokuへデプロイでCSSが反映されない事件

#前提
フレームワークでLaravelを使用。
ローカルでは問題なくCSSが反映されるが、
Herokuへデプロイすると一度リロードしないとCSSが反映されない事件が発生。

##原因
キャッシュが残っている。

##解決方法
自分は以下の方法で解決。

```app.blade.php
//変更前
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
```

```app.blade.php
//変更後
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
```

##参考記事
https://readouble.com/laravel/5.4/ja/mix.html
「バージョン付け／キャッシュ対策」の項目を参考にしました。（※記事の下の方にあります）
Gatsby ブログやコンテンツ一覧で抜粋と続きを読むリンクの表示をする方法


Gatsbyでブログの一覧ページを作るときにタイトルと抜粋、続きを読むリンクを表示したいときのやり方。

ドキュメントはこちら
https://www.gatsbyjs.org/packages/gatsby-transformer-remark/

## プラグインをインストール
```
npm install --save gatsby-transformer-remark
```

## コンフィグ設定
```js
// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      excerpt_separator: `<!-- end -->`,
    },
  },
],
```

## grphqlでデータ取得
抜粋をHTMLで返す場合にはformatの設定が必要。テキストでいいなら`excerpt`のみでOK。

```jsx
{
  allMarkdownRemark {
    edges {
      node {
        excerpt(format: HTML)
      }
    }
  }
}
```

## コンポーネントでデータ表示
```jsx
const ExcerptComponent = (props) => {
  const post = props.data.node.frontmatter
  const content = props.data.node
  return (
    <h2 className="title">{post.title}</a></h2>
    <p className="excerpt" dangerouslySetInnerHTML={{ __html: content.excerpt }}/>
    <a href={post.slug}>続きを読む</a>
  )
}
```

## markdownにタグを入れる

```
---
title: コンテンツのタイトル
description: コンテンツの説明文
date: 2020-04-02T11:30:00+09:00
slug: "excerpt-test"
---

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti, accusantium, ut ducimus voluptate perferendis sequi asperiores iusto.

<!-- end -->

ここから下は抜粋に表示されない

Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde vel labore quia quas molestiae doloremque nisi saepe illo optio. Rem repudiandae est ipsum eius cum ipsam iusto odio vel labore?
```
SIGNATEで「レンタル自転車の利用者予測」をやってみた。

SIGNATEの「レンタル自転車の利用予測」をやっみた。

環境を整える。

```.py
import pandas as pd
import numpy as np
from matplotlib import pyplot as plt
from sklearn.linear_model import LinearRegression as LR
```
ファイル取得。

```.py
train = pd.read_csv("train.tsv",sep="\t")
test  = pd.read_csv("test.tsv",sep="\t")
sample = pd.read_csv("sample_submit.csv",header=None)
```
trainファイルを確認。
<img width="772" alt="スクリーンショット 2020-04-11 19.14.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29856/273818dd-249a-cc81-b468-d75f3bb7b0f8.png">

今回cntの予測をするのでcntとの相関を確認する。

```.py
train.corr()
```
<img width="992" alt="スクリーンショット 2020-04-11 19.16.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29856/44e6e731-ec2f-d13d-b7ba-d09faa66d862.png">
"hr","temp","atemp"が相関強そう。

```.py
trainX = train[["hr","temp","atemp"]]
testX = test[["hr","temp","atemp"]]
y = train["cnt"]
model = LR()
model.fit(trainX,y)
pred = model.predict(testX)
sample[1] = pred
sample.to_csv("submit.csv",index=None,header=None)
```

SIGNATEにアップする。
結果は、508人中、217位。

もう少し説明変数を加えてみる。

```
pred2 = model.predict(trainX)
train["res"] = train["cnt"] - train["pred2"]
train.sort_values(by="res")
```
<img width="960" alt="スクリーンショット 2020-04-11 23.03.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29856/daf0b803-d466-88bd-513b-86cc8373102e.png">
weathersit（天気）も影響ありそうなので、説明変数に加えてみて再度分析
SIGNATEにアップすると、
結果は、508人中、214位と僅かに改善。

今後、もう少し学習して精度を上げていきたい。
[Unity初級]弾を撃つ

#概要
マウスの右クリックで弾を出す
#本文
```cs

    public GameObject PreBall;
    void Update()
    {
        if (Input.GetMouseButtonDown(0) == true){
            GameObject ball = Instantiate(PreBall);
            ball.transform.position = this.transform.position;
            Rigidbody rbody = ball.GetComponent<Rigidbody>();
            rbody.AddForce(this.transform.forward * 1000);
        }
    }

```
コードを入力して
![スクリーンショット_(46).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/84d5a136-09f0-43e1-6ed6-9159ee1376f5.png)

弾のプレハブをドラッグアンドドロップ
未だに Internet Explorer を使ってアクセスしてくる人を笑うスクリプト

令和になってもInternet Explorer（以下 IE ）を使っている人を笑うスクリプトを作った。

- [デモサイト](https://laugh-at-ie.netlify.com/) （IE9以降でアクセス & ミュート解除してみてください）

- [IEなんて持ってないよって人向けのキャプチャ動画.mp4](https://github.com/the-fukui/storage/raw/master/laugh-at-ie.mp4)

- [GitHub](https://github.com/the-fukui/laugh-at-IE)

# 使い方

**scriptタグのペースト** / **npm install** の2パターンに対応している

## scriptタグを使う方法

```html
<script src="https://unpkg.com/laugh-at-ie/dist/index.js"></script>
<script>
var laugh = new LaughAtIE();
laugh.init();
</script> 
```

これをページに貼り付けるだけ

## npm install する方法

```sh
npm install laugh-at-ie
```
して、

```javascript
import LaughAtIE from 'laugh-at-ie'  
 
const laugh = new LaughAtIE()
laugh.init()
```

を貼り付ける。
当たり前だがクライアントサイドでしか動かないので注意。

# カスタマイズ

*new LaughAtIE()* のオプション引数を設定することで、音源を変更したり、笑い声の再生時にお好みの関数を実行することができる。
下記はデフォルトの設定。


```javascript
var laugh = new LaughAtIE({
    onLoad: {
        //ページ読み込み時の設定
        sound: 'https://laugh-at-ie.netlify.com/sound/laugh.mp3', //再生する音源
        callback: function(){} //再生時（ページロード時）に実行する関数
    },
    onError: {
        //ページでエラーが発生したときの設定
        sound: 'https://laugh-at-ie.netlify.com/sound/laugh2.mp3',
        callback: function(e){
            //エラー時はエラーメッセージを引数に取ることができる
            alert('Error!\n\n' + e)
        }
    }
});
laugh.init();
```
<br>
カスタムした設定はデフォルトの設定とマージされるので、例えばエラー時の音源だけを変えたい場合は

```javascript
var laugh = new LaughAtIE({
    onError: {
        sound: './your-custom-sound.mp3',
    }
});
laugh.init();
```
とだけ指定すれば、デフォルトの設定を引き継ぎつつ、エラー時の音源だけを変更することができる。

### サンプル

[デモサイト](https://laugh-at-ie.netlify.com/) の設定はこんな感じ。

```javascript
function error(e) {
    var confirm = window.confirm('Error message: ' + e + '\n\nAn error occured. Do you want to get Chrome?');
    if (confirm) {
        location.href('https://www.google.com/chrome/')
    }
}
 
function welcome() {
    alert('Are you still using Internet Explorer???');
}
 
var laugh = new LaughAtIE({
    onLoad: {
        callback: welcome
    },
    onError: {
        callback: error //末尾に()をつけてしまわないように！
    }
});
laugh.init();
```

# ☕
レガシーなWebアプリ、サイトを使い続けたいとい理由でIEを使い続ける人がいるのも重々承知していますが、IEはWeb開発者にとって長年悩みの種であるので、モダンブラウザへ移行してほしいですね。
当のMicrosoftも使うのやめて[^1]って言ってますし。

あと、ライブラリっぽく公開するのは初めてなので何かあったら笑いながら指摘して下さい。

[^1]: [マイクロソフト、企業にInternet Explorerの使用をやめるよう要請。「IEは技術的負債もたらす」](https://japanese.engadget.com/2019/02/08/internet-explorer-ie/)

$Thank$ $you.$
MT4 で自動売買 (EA) プログラミングをはじめてみる

#はじめに

以前から FX って胡散臭いなぁと思っていたのですが、自動売買 (EA (Expert Advisor)、以下 EA ) でプログラミングができるというのを知って、「面白そう！」って思ったのがきっかけでした。

ということで、EA プログラミングをはじめようと思います。

#開発環境

プログラミングを始めるためには開発環境を準備する必要があります。

- Windows 10 Pro
- FXTF MT4 Version: 4.00 build 1260
- MetaEditor Version: 5.00 build 2302

##証券会社の口座

当たり前なのですが、EA には証券会社の口座が必要です。
更に EA プログラミングを実行（デバッグも含め）するために取引ができる状態にしないといけません。

とはいえ、これまで FX に触れたことがない人は口座を持っていないと思いますので、デモ口座という無料のアカウントを発行してもらえるところがあり、プログラミングだけをするのであればそれで十分です。

私は EA 用の証券会社は [FXTF](https://www.fxtrade.co.jp/) を使っていますが、ここもデモ口座は作れます。

##MT4 (MetaTrader4) と MetaEditor
EA を実行するには MT4 というツールを使います。
この MT4 に、プログラミングをするための MetaEditor という IDE がバンドルされています。
(イメージ的には Eclipse みたいな感じ？)
コーディングには MetaEditor じゃないと駄目というわけではないのですが、そんなに使いにくい IDE でもないですし、ビルドまでまとめて出来るので十分かと…。

##開発言語
肝心の開発言語は MQL という言語を使うのですが、もうほぼ C/C++ です。
むしろ Win32 系なので MessageBox とか GetLastError とかそのまんま使えます。

```
if (GetLastError() != ERR_NO_ERROR) {
    MessageBox(...);
}
```

という感じです。
最初は SQL に似てるので全く知らん言語かと思ってましたが C/C++ で良かったです。
クラスも使えます (多少癖あり) し、すんなり使えました。

#おわりに

上記までで MT4 プログラミングを始めるための準備は揃いましたので、実際にプログラミングをしていきましょう。
蟻本　区間スケジューリング問題

@drkenさんの[AtCoder 版！蟻本 (初級編)](https://qiita.com/drken/items/e77685614f3c6bf86f44#2-1-%E3%81%99%E3%81%B9%E3%81%A6%E3%81%AE%E5%9F%BA%E6%9C%AC-%E5%85%A8%E6%8E%A2%E7%B4%A2)の区間スケジューリング問題の類題を2問触って見ました

##キーエンス プログラミング コンテスト 2020 B

```c++

#include <bits/stdc++.h>
#define rep(i,n) for(int i = 0;i < (n);i++)
using namespace std;
using ll = long long;

int n,ans = 0;
int now = -2e9;
vector<pair<int,int>> v;

int main(){
    cin >> n;
    rep(i,n){
        ll x,l = 0; cin >> x >> l;
        v.push_back(make_pair(x+l,x-l));
    }
    sort(v.begin(),v.end());
    rep(i,n){
        if(v[i].second < now) continue;
        else{
            now = v[i].first;
            ans++;
        }
    }
    cout << ans << endl;
}

```

##ABC103 D　

```c++

#include <bits/stdc++.h>
#define rep(i,n) for(int i = 0;i < (n);i++)
using namespace std;
using ll = long long;
using pii = pair<int,int>;

int main(){
    int n,m;
    cin >> n >> m;
    vector<pii> q(m);
    rep(i,m){
        int a,b;
        cin >> a >> b;
        q[i].first = b;
        q[i].second = a;
    }
    sort(q.begin(),q.end());
    int ans = 1;
    int t = q[0].first;
    rep(i,m){
        if(t <= q[i].second){
            ans++;
            t = q[i].first;
        }
    }
    cout << ans << endl;
}

```

###感想
今回は、区間スケジューリング問題を触ってみました。1問目を解いたときはうまく理解できませんでしたが、2問目を解いたときにうまく理解できました。
AWSアーキテクト設計及びWell Architected Framework

#AWSアーキテクチャ設計の基礎
###AZの選択：
①.1つのリージョンにつき２つのAZ（アウェイラビリティゾーン）を利用して設計することが基本。
何故ならば、3つ以上のはコスト効率が低下すること
②.S3を利用してDBのバックアップを取ること。

###VPCの設定（マルチVPC方式・マルチアカンウト方式）
2つ以上のVPCでアーキテクチャを設計することが基本となる。しかし、一人など小規模で利用する場合には、１つのVPCを推奨する。

###サブネットの分割
サブネットはCIDR範囲で分割したネットワックセグメント
・パブリックサブネット：トラフィックがインタネットゲートウェイにルーティングされるサブネット。インタネット接続あ必要なリソースを備えるインタネットのアクセス制御に利用する。

・プライベートサブネット：インタネットゲートウェイへのルートがないサブネット。インタネットから隔離することでセキュリティを高める。

・サブネットのサイズは[/24]以上の大きいサブネットを推奨する。（例：10.0.1.0/24)

.1つのAZに対して、1つのパブリックサブネットと1つのブライベートサブネットが基本。

#Well-ArchitectedFramework 
Well-ArchitectedFrameworkで提唱されている５つの設計原則
①信頼性
②優れたパフォーマンス
③セキュアなアプリケーション
④コスト最適化
⑤エクセレンスなオペレーション

####信頼性
主要サービス
基盤：IAM、VPC, Auto Scaling, ELB, Cloud Formation
変更管理：CloudTrail, AWS config
障害管理：Cloud Watch

####パフォーマンス
パフォーマンスの基本対応領域は
①コンピューティング：Auto Scaling, Lambda
②ストレージ:EBS,S3,Glacier,EFS
③データベース:RDS, Dynamo,Elastic search, Aurora, Redshift
④容量と時間のトレードオフ: Cloud Front, Elasti Cache

####セキュリティ
セキュリテイの基本対応領域は
①データ保護：ELB, EBS, S3, RDS, KMS
②権限管理：IAM, MFA
③インフラ保護：VPC
④検出制御：CloudTrail, Cloud Watch, AWS GuardDuty, Amazon Inspector

####コスト
コスト最適化の主要サービス
①需要と供給の一致：Auto Scaling
②コストの効率のリソース：EC2購入方式, Truted Advistor
③支出の認識：Cloud Watch, 見積ツール
④継続した最適化：AWS最新情報、Truted Advistor
 
####エクセレンスなオペレーション
①準備：Cloud Formation、Codeシリーズ、Runbook playbook
②運用：System Manager, Service Catalog, CloudTrail, AWS Artifact, 
AWS GuardDuty, Cloud Watch, AWS config, API Gateway
PythonでSeleniumを使用してのスクレイピング

#はじめに

Pythonでスクレイピングする時のSeleniumについてまとめました。スクレイピングはかなり楽しいです。自分が使用した用途は、ショッピングの自動化、データの収集など他にも幅広い用途があります。

#環境
Windows10
Python
Selenium
自分が使用したい専用のブラウザのドライバー(例：ChromeDriver)

#Seleniumのインストール
まだ、Pythonの環境構築をしていない人は[こちら](https://www.python.jp/install/windows/install_py3.html)をクリックして下さい。Pythonについての環境構築の仕方がの掲載されています。(Windows版)

Pythonの環境を既に構築している人は、Seleniumをインストールして下さい。

`pip install selenium`

#ブラウザのドライバーをダウンロードする

使用するブラウザに合わせたドライバーが必要になります。(例：ChromeDriver)

#PythonでSeleniumを使用してブラウザを開く

Seleniumを使用してブラウザを開きます。

```python
from selenium import webdriver

driver = webdriver.Chrome() #()の中にdriver_pathを記述
driver.get(URL)
driver.close()
driver.quit()

```
まず、1行目でブラウザを開きます
2行目で開きたいURLを指定します
3行目はページを閉じます
4行目はブラウザを終了します

driver_pathは同じディレクトリの中にドライバーがある時には、記述しなくてokです。

#要素の取得
次に、ページの操作をするために必要な要素の取得です。
自分はよくこの二つを使用します。

<b>id</b>
`get_id = driver.find_element_by_id("idをこの中に記述")`
idは確実に取れてくるのでオススメです。

<b>xpath</b>
`get_xpath = driver.find_element_by_xpath("xpathをこの中に記述")`
画面が変更したりするとよく変更されるのでその都度xpathを記述しなおしてます。

そして、HTML上になくて取ってくることが出来ないけどあの値が欲しいという時にオススメなのがjsから取ってくることです。
`price = driver.execute_script("jsの処理を記述")`
上記のように記述することで、画面上に無いがjs側で処理している値を取得することができます。

jsにも無い時があるので、その時は諦めるしかないですね:sweat:

#ボタンをクリックする
フォームのボタンをクリックしたい時などは、`click()`でクリックすることができます。

`driver.find_elemnt_by_id('idをこの中に記述').click()`
上記の処理でボタンの要素をクリックすることができる。

#sleep処理を使用しよう
よく、要素が取れなくてエラーがでる時があります。そういう時には`sleep()`を使用して画面が表示されるのを待ちましょう。

#おわりに
他にも沢山のseleniumは使い方があるんですが、この記事ではみなさんにどんなことができるを知ってもらうために書きました。さらに詳しく知りたい人はどんどん他の人が書いた記事を見て知識を増やして下さい。そして、すべてを自動化させましょう‼

#参考
https://kurozumi.github.io/selenium-python/installation.html
https://qiita.com/nadechin/items/0a34e2182132cc1a821b
GatsbyJS + Netlifyで環境変数を利用するのに迷った話

私は自分のポートフォリオサイトを[GatsbyJS](https://www.gatsbyjs.org/)で作成して[Netlify](https://www.netlify.com/)でホスティングしています。
タイトルの通り、環境変数で迷った話とその解決策を書きます。

## この記事を要約すると

Gatsbyで作ったサイトをNetlifyなどでホスティングするなら、環境変数の名前は全て`GATSBY_`から始めるのが楽。

## 本題に入る前に

迷った話の前に、GatsbyとNetlifyそれぞれの環境変数の設定の仕方について書きます。
既にご存知の方はこのセクションは飛ばしてください:pray:

### Gatsbyの環境変数

[公式ドキュメントはこちら](https://www.gatsbyjs.org/docs/environment-variables/)

Gatsbyはデフォルトでは`.env.development`と`.env.production`の2種類の環境変数に対応しています。

以下のコードを書くと`process.env.ENVIRONMENT_VARIABLES`の書式で環境変数を呼び出せるようになります。

```javascript:gatsby-config.js
require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})
```

`gatsby develop`を叩いたときは`.env.development`が
`gatsby build`または`gatsby serve`を叩いたときは`.env.production`が読まれます。

### Netlifyの環境変数

team > 対象のsite > Site settings > Build & deploy > Environment > Environment variables >
Edit variables

と進むとNetlify上で環境変数を設定できます。

以下はスクショ

![Frame 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/cd21481e-cf1f-7140-bc60-73e00b432ed3.png)

![Frame 7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/1460fec4-ff26-cb41-b49c-3f0364a847fc.png)


![Frame 6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/763df89f-308e-e4a5-e419-daab8c194515.png)


![Frame 5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/77dd68bc-bba0-7427-c678-cc2ab6fab7fc.png)

![Frame 4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/21ffeace-7381-4bf9-cd2a-6fc72262745c.png)


![Frame 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/cae40dd2-dcdd-692e-3557-2d69e3bf013d.png)


`Key`と`Value`、それぞれに任意の値を入れてSaveすれば次回のデプロイから有効化されます。

## 何に迷ったか

やっと本題です。
`.env.*`ファイルをリポジトリにアップしているのは良くありません。

そのためやりたかったことは以下です。

1. `.env.development`と`.env.production`、ともにはローカルだけに置いて開発時だけ使う
1. Netlifyに環境変数を保存、本番のビルドではこちらを使用

ですが普通のやり方でNetlifyで保存した環境変数がビルド時に使われることはありませんでした。

## 解決策

**`.env.*`の中の変数も、Netlifyに保存する変数も、どちらも`GATSBY_`から始める**

でした。

`.env.development`と`.env.production`以外の場所に保存されている環境変数であっても、`GATSBY_`プレフィックスを持っていれば使用できるようです。

## おまけ

ここまで色々書いたんですが、私のサイトは開発環境でも本番環境でも使用する変数の中身は一緒です。

そのため`gatsby-config.js`の記載を以下のように変更し、

```diff:gatsby-config.js
- require("dotenv").config({
-   path: `.env.${process.env.NODE_ENV}`,
- })
+ require("dotenv").config()
```

`.env.development`と`.env.production`を`.env`に統合し、

`.env`内の変数に全て`GATSBY_`プレフィックスを付与すれば、

```diff:.env
- ENV_VAR = XXXXX
+ GATSBY_ENV_VAR = XXXXX
```

同じ値を2つのファイルに記載する必要がなくなって少し楽になりました。
めでたしめでたし。
pythonで「A と、見せかけて B」と、出力してくるコードをtkinterで動かす

# 目的
pythonで「A と、見せかけて B」と、出力してくるコードをtkinterで動かす際の備忘録です

# 準備

tkinterは、PythonでGUIを組むことのできるツールです。
以下を参考にさせて頂きます
> [Python Tkinterのボタンでイベント処理](https://watlab-blog.com/2019/05/13/tkinter-button/)
> [PythonのTkinterを使ってみる](https://qiita.com/nnahito/items/ad1428a30738b3d93762)

# コード

```py:sample.py
import tkinter as tk
import random

l = ["りんご",
     "みかん",
     "いちご",
     "パイナップル",
     "ドラゴンフルーツ"]

def bot():
    string1=random.choice(l)
    string2=random.choice(l)

    string=string1+" と、見せかけて "+string2

    label = tk.Label(text=string)  # ラベルを定義                                                                    
    x = random.randrange(640)
    y = random.randrange(480)
    label.place(x=x, y=y)                  # ラベルを設置                                                            

window = tk.Tk()                                        #ウィンドウを定義                                            
window.title("Title")                                   #ウィンドウタイトルを設定                                    
window.geometry("640x480")                              #ウィンドウサイズを設定                                      

btn = tk.Button(window, text='と、見せかけて', command = bot)   #ボタンの作成                                        
btn.place(x=10, y=10)

window.mainloop()                                       #メインループとして待機状態にする                    
```

# テスト
![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/344880/e347242d-13df-2a14-f571-308535eb2a82.gif)


# 参考
[Python Tkinterのボタンでイベント処理](https://watlab-blog.com/2019/05/13/tkinter-button/)
[PythonのTkinterを使ってみる](https://qiita.com/nnahito/items/ad1428a30738b3d93762)
AWSクラウドプラクティショナー認定試験学習のまとめ

AWS認定試験のクラウドプラクティショナーに合格しました。

<img width="659" alt="AWS000.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6311/fee407f9-7097-95e4-e6ce-99fff985b8ac.png">

合格までに取り組んだ内容をまとめておきます。

## クラウドプラクティショナーとは

<img width="929" alt="AWS001.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6311/9d97451e-67bc-2aa9-2c1c-477d9bee3be3.png">

AWSを体系的に学びなおしたい場合にまず取得を考えたい資格。
非エンジニアでも、取得を目指す方もいます。

例えば、技術者としてAWSのサービスを利用しているが、
セキュリティや料金体系については明るくない方にお勧めしたい資格だと思います。

## 背景

AWSの経験(といっても基礎的なサービスだけ)が2年未満であったものの、
実務で必要な範囲を表面的に知っている、使える、という程度でした。

改めて体系的に学んでしっかり身につけたいと考え、その指標としてわかりやすいAWS認定を受けることにしました。

## 学習方法

トータルで20時間～25時間程度、本腰入れてからの勉強期間は2週間です。

### AWS公式トレーニング

まとめてガッツリ取組んで、学習時間は10時間程度です。

<img width="766" alt="AWS002.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6311/4539fbaa-3d91-4448-f060-2129f2a09c08.png">

[AWS Cloud Practitioner Essentials (Digital) (Japanese)](https://www.aws.training/Details/Curriculum?id=34408)

公式なので安心感がありました。
このトレーニングは無料で、講師はAWSのエンジニアです。

独特な雰囲気ですが、ポイントがきっちりまとまってます。

### AWSホワイトペーパー

要所を抑えつつじっくり確認して、学習時間は4時間程度です。
※少なめと思うかもしれませんが、もともと表面的には知っている状態だからかなと思います。

<img width="910" alt="AWS003.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6311/bd27dafe-8206-1631-1983-0d4188ec07a5.png">

[AWS Well-Architected](https://aws.amazon.com/jp/architecture/well-architected/) が重要です。
これには、AWSが出しているホワイトペーパーを読み込むことをおすすめします。

今回は AWSブログの [AWS Well-Architected フレームワークホワイトペーパー 日本語版の更新](https://aws.amazon.com/jp/blogs/news/aws-well-architected-whitepaper/)から得られる情報で学びました。

Google先生が示してくれる色々な情報やまとめ記事もわかりやすくて良いのですが、
AWSが使っている単語や文章、ニュアンスなどに慣れておくと、試験の際に役立つと思います。

と、いうのも、私も色々と参照しましたが、実際の試験が終わったあとに振り返ると、
ホワイトペーパーを読み込むことが一番の近道だったなと感じたからです。

ホワイトペーパーは難しい表現が多く、文章ばかりで辛いと思いますが、
どこにどんなことが書いてあるのか、ポイントをまとめるように読むようにしました。

### AWSソリューションアーキテクトアソシエイト対策本

スキマ時間にコツコツと実施して、学習時間は5時間程度です。
私は、ソリューションアーキテクトアソシエイトを取得したいと思っていたため、この書籍を購入しました。

<img width="384" alt="AWS004.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6311/1e7286b9-98f1-f232-10f8-6d506105fc53.png">

要点がまとまっていてわかりやすく、クラウドプラクティショナー合格後も活用しています。

## まとめ
クラウドプラクティショナーであれば、AWSの公式サイトだけで十分受かると思います。
不明点をWebで補完すると良いかな。繰り返しトレーニングを受けることで理解も深まると思います。
※選択肢としては、Udemy(有料)もあり。

### 感想
思っていたよりも「請求と料金」に関する問題が多かった気がします。
想定内でしたが、技術的な問題よりも、クラウドの概念的な部分が多かったと思います。
※今回に限ったことかもしれませんが

CBT形式が初めてだったので、独特な空気感で時間が経てば経つほど不安感が増しました。
※私の座席のマウスが使いづらくて何度も誤クリックしました。これも焦る。

### ポイント
自信がある問題すらも疑うような感覚になったので、知識を信じて回答することが大事だと思います。

40分くらいで一巡して、見直す時間をキッチリとることがポイントでした。
※「後で見直す」というマークが付けられるので活用すること。

最新のサービスからの問題もあったので、[【2020年】AWS全サービスまとめ](https://dev.classmethod.jp/articles/aws-summary-2020/) で、一通りのAWSサービスは抑えておくと良かった。
vue.jsでapexchartsを使いチャートを作ってみる

chart.jsが有名みたいで、ちょっと触ってチャートを表示してみたのですが、非常に操作しづらかったので、apexchartsを使ってみました。個人的には、こちらのほうがオススメかも。

```sh
# https://github.com/apexcharts/vue-apexcharts
$ yarn add apexcharts vue-apexcharts
```

今回作ったのは、vue+apexcharts+axiosという構成で、毎日更新されてるぽいcovid-19のjsonがあるのですが、値をとってきてチャートで表示することにしてみました。

https://syui.cf/covid-vue-chart

```sh
$ git clone https://github.com/syui/covid-vue-chart
$ cd !$:t
$ yarn install
$ yarn serve
```

内容は非常にシンプルで以下のような書き方になりました。axiosでjsonを取ってきて配列に入れてあげる感じ。あと、type:lineがやりたくてoptionかなあと思ったのですが、vue-apexchartは、htmlで`type="line"`みたいです。

チャートを作成するときは、jsonのkeyやら確認する必要がありますので、`this.items = res.data`して表示してます。これはなくてもいい。

```js:main.js
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import VueApexCharts from 'vue-apexcharts'

Vue.component('apexchart', VueApexCharts)
Vue.config.productionTip = false
Vue.use(VueAxios, axios, VueApexCharts)

new Vue({
  render: h => h(App)
}).$mount('#app')
```

```html:App.vue
<template>
	<div id="covid19">
		<h1>covid19</h1>
		<div>
			<apexchart width="95%" type="line" :options="chartOptions" :series="series"></apexchart>
		</div>
		<div v-for="(item, idx) in items" v-bind:key="idx">
			<li  v-if="idx === 'Japan'">
				{{ idx }} {{ item }}
			</li>
		</div>
	</div>
</template>

<script>
import axios from 'axios';
export default {
	created(){
		axios.get('https://raw.githubusercontent.com/pomber/covid19/master/docs/timeseries.json').then((res) => {
			var confirmed = []
			var confirmedt = []
			var date = []
			res.data.Japan.forEach(function (key) {
						confirmed.push(key.confirmed)
			})
			res.data.Thailand.forEach(function (key) {
						confirmedt.push(key.confirmed)
			})
			res.data.Japan.forEach(function (key) {
						date.push(key.date)
			})
			this.series = [{ data: confirmed },{ data: confirmedt }]
			this.chartOptions = {
				xaxis: { 
					categories:	date
			}}
			this.items = res.data
		}).catch((error) => {
			console.error(error)
		})
	},
	data () {
		return {
			chartOptions: {
				chart: {
					id: 'vuechart-example'
				},
				xaxis: {
					categories: [] 
				}
			},
			series: [ {name: "japan", data: [] }, {name: "Thailand", data: [] } ]
		}
	}
}
</script>
```

注意点としては、gh-pagesは、サブディレクトリになるので、vue.config.jsで`publicPath`を設定してやることです。index.htmlのlink pathが`/`なので。

昨日、マンガのやつでちょっとだけvueを触ったこともあり、vue、楽しかったので、今日もついつい触ってしまいました。
【jQuery】最後までスクロールしなければいけない利用規約を作成

# はじめに
利用規約で、利用者が目を通した証拠になるように
**下までスクロールしないと同意ボタンを押せない仕組み**になっているものがあります。
今回はそのような仕組みを再現します。

# 手順
#### ボタンとテキストボックスを作成
まずは画像のように利用規約の**テキストボックス**と**同意ボタン**を用意します。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/456505/c1ca3743-e8b3-3882-8322-d9ea41289a85.png)

**[テキストボックス]CSSは割愛**

```html:html
<div id="terms" class="box">
  <p>【利用契約条項】<br>
    利用規約の文章です<br>
    省略....
    ここで終わりです。<br>
  </p>
</div>
```

**[ボタン]CSSは割愛**

```html:html
<a id="confirm-register" class="agree" disabled>同意する</a>
```

#### ボタンの属性をdisabledにする

ボタンの属性に**disabled**をつけることによって、**開いたときに使えない状態(画像では分かりやすくCSSで色を薄くしている)**になっています。


#### ロジック説明
1. **全長**を取得する
1. **表示領域** + **スクロールした値** = **スクロールした高さ**を取得
1. (**全長** - **スクロールした値**) / **全長**　を計算し、**何％までスクロールしたか**を取得する
2. **disabled属性**を削除する

#### Javascriptの作成


```javascript:javascript
$(function() {
  $('#terms').bind('scroll', function() {
      //全長を取得
      scrollHeight = $('#terms').get(0).scrollHeight;
      //スクロールした高さを取得
      scrollPosition = $('#terms').height() + $('#terms').scrollTop();
      //スクロールの位置が下部何%の範囲に来た場合の処理(例:3%)
      if ((scrollHeight - scrollPosition) / scrollHeight <= 0.03) {
          $('#confirm-register').removeAttr('disabled');
      }
  });
});
```

### 完成
※　動作確認のためテストでgoogleに遷移させています

![ezgif-7-56b7c313419c.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/456505/52edc3d8-97e2-8a3a-ab2a-88be100314db.gif)










# 参考文献

[ページの下までスクロールしたときに何らかの処理を実行する例](https://www.softel.co.jp/blogs/tech/archives/4308)
pythonで「A と、見せかけて B」と、出力してくるコードを作成する

pythonで「A と、見せかけて B」と、出力してくるコードを作成する

# 目的
pythonで「A と、見せかけて B」と、出力してくるコードを作成した際の備忘録です

# 準備

pythonのchoiceを使います。

> [random.choice](https://docs.python.org/ja/3/library/random.html#random.choice)

# コード

```
import random

l = ["りんご",
     "みかん",
     "いちご",
     "パイナップル",
     "ドラゴンフルーツ"]

string1=random.choice(l)
string2=random.choice(l)

print(string1, " と、見せかけて ", string2)
```

```
$ python sample.py
りんご  と、見せかけて  ドラゴンフルーツ
```

# 参考
[Pythonでリストからランダムに要素を選択する](https://note.nkmk.me/python-random-choice-sample-choices/)
[random.choice](https://docs.python.org/ja/3/library/random.html#random.choice)
Pandasを用いて複数のグラフを描く

#Pandasを用いて複数のグラフを描く
1つの領域に複数のグラフを描く方法についてです. 例えば, [こちらの記事](https://qiita.com/marks_hunt/items/107aeab752f23af16c50)ですとpandasに加えてmatplotlibをimportして描画をしていますが, 今回はpandasのライブラリのみを用いて描画する方法について書きます.

以下のように,ax1に1つ目のグラフの描画情報を代入し, 2つ目のグラフのplotの引数のaxに1つ目のグラフ情報であるax1を代入することで実現できるようだ. こうすることで, matplotlibを使わずに簡潔に記述することができる.

```python

import pandas as pd
import numpy as np

#データフレームの作成.
df = pd.DataFrame(np.arange(12).reshape(4, 3),
                  columns=["colA", "colB", "colC"],
                  index=["row1", "row2", "row3", "row4"])

#1つ目のグラフ.
ax1 = df.plot(x="colA", y="colB")
#2つ目のグラフ.
df.plot(x="colA", y="colC", ax = ax1)
```
そして, 出力結果は以下である.

<img width="385" alt="screenshot.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285948/0e3b33cb-a8d1-c68f-a902-1aae7a30fc7f.png">


#参考文献
https://stackoverflow.com/questions/42128467/matplotlib-plot-multiple-columns-of-pandas-data-frame-on-the-bar-chart/42131286
医療人としての初歩 PythonでDICOM画像を表示する


診療放射線技師、医学物理士をやっている者です。
プログラミングを学習していく過程を備忘録として記事に残していきます。
今後誰かの参考になれば幸いです。


# DICOM画像を表示したい
医療現場でPythonを使って何をしたいですか？
Pythonは医用画像処理において盛んに活用されており、機械学習の分野においても画像から病変を自動認識するというようなテーマはたくさんあります。
医療の現場で使う画像はDICOM（ダイコム）という形式のデータで、
医療分野でプログラミング、主に画像処理を行う上でDICOMの知識は必須と言えます。
そしてとりあえずやってみたい第一関門が**「Pythonで画像を表示させる」**です。


### DICOMとは
まずはDICOMについて整理しておきましょう（自分のためにも）。

DICOMとは、**"Digital Imaging and Communications in Medicine"**の頭文字をつなげた略語で、
医療画像情報などを通信するために利用する標準規格で、世界的に利用されています。
通信されるデータには、一般的にイメージされる画像データだけではなく、患者名や患者ID、検査日、機器名、撮影条件など、多くの項目が付帯情報として定義されています。

検査に使う機械や通信機器には様々なメーカーのものがある中で、独自のルールでデータを扱うのではなく、DICOMのようなメーカーに依存しない共通のルールを使うことで、より円滑にデータ管理ができるのです。

昔は（今でも一部の施設では）フィルムのレントゲン写真等が診断で使用されていましたが、医療画像もアナログからデジタルに移行したことで、膨大な医療データを管理しやすくなりました。DICOMの存在もそれに役立っているのです。


余談ですが、放射線治療分野には診断分野にはない少し特殊なDICOMデータがあります。
今回画像を表示させる過程では必要のない知識ですが、私自身放射線治療部門に従事しておりますので、少しだけ触れておきます。
放射線治療のDICOMデータ(DICOM RT)には、他の画像モダリティのDICOMと同様に画像系のものと、座標情報や機器の設定情報などの非画像系のものがあります。
![alt](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/570980/f86d28b1-0738-82ef-cd95-a52028d98ead.png)
RT doseは線量情報、RT Structureはコンツール情報、RT Planは機器の動作情報を表し、それぞれが情報として紐付いて治療が成り立っています。

【参考】DICOM逆引きBOOK　
（セミナースライドを閲覧できます→　 [DICOM勉強会資料](http://www.jira-net.or.jp/dicom/dicom_data_01.html)）

この他にも[一般社団法人 日本画像医療システム工業会【JIRA】：DICOMの世界](http://www.jira-net.or.jp/dicom/)には、DICOMに関する有益な情報がたくさん掲載されていますので、是非参考にしてみてください。

# 画像表示もPythonなら超簡単！
C#を少し勉強していた時期があったのですが、
CT画像を１スライス表示させる事すらできませんでした。
なので私の中では画像を表示させる事すらかなり高いハードル...。
とりあえずでできることではないと思っていました。

**しかし!!**
Pythonだと簡単にそれができたのです！
驚きでした。こんなに簡単なのかと。
豊富なライブラリのおかげで簡単なコードを知っているだけで表示することができます。
ライブラリを作ってくれた方に感謝です。
*Thanks, I appreciate it!*（今日英会話教室で習ったフレーズ）

今回は無料で使えるDICOM画像を使いますので、
手元にDICOM画像がなくても問題ありません。
お世話になるのはまたしても[DICOMの世界](http://www.jira-net.or.jp/dicom/dicom_data_01_02.html)です。
感謝しかないですね。
*"CR_LEE_IR6a.dcm"* という胸部のCR画像を用います。

###環境(Mac)
python 3.7.4
matplotlib  3.1.1
pydicom 1.2.2
ターミナル（Jupyter Notebookは使っていません）
Atom（テキストエディタならなんでも可）


###全体コード
```python:show_dicom.py
from matplotlib import pyplot as plt
import pydicom

cr = pydicom.read_file("CR_LEE_IR6a.dcm")

plt.imshow(cr.pixel_array, cmap = "gray")
plt.show()

```

**※使用するDICOMデータ(.dcm)はコード(.py)と同じディレクトリに保存しておきましょう。**

###出力画像
<img width="461" alt="スクリーンショット 2020-04-11 19.16.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/570980/72c8b942-7017-3d29-5083-d0c08d76cb59.png">


以上です。
超簡単じゃないですか？
たったの5行で画像を表示することができました。
matplotlibやpydicomなど既存の素晴らしいモジュール活用することで、簡単なコードでここまでできます。

Pythonの文法については割愛します。
是非やってみて下さい。

最後に非常に有益なサイトをご紹介します。
**ユーロメディック医学物理室** [医学物理室ブログ](https://medphys.euro-meditec.co.jp/blog/)
放射線治療分野でPythonを活用する際に大変ためになる情報が詳しく書かれております。
役に立つこと間違いなしですので、気になる方は要チェックです!
Chromebook HP C101PAにインストールしたArchLinuxでサウンドがヘッドホン端子から出るようにする(pulseaudio)

以前、ALSAで音が出るようにした。
https://qiita.com/OldS9l/items/6159e066c8d8177f1de9

その後、LMMSでも触ってみようとしたときに、ALSAだと占有してしまうので、pulseaudioが使いたくなった。

LMMSで出力先にpulseaudioを指定すると、やっぱり本体スピーカーから出る。

対応させる。

----

pulseaudioは元々入っていたかpacmanで入れたかは定かではない。

pulseaudioの設定ファイルは `/etc/pulse/` にあるが、
https://wiki.archlinux.jp/index.php/PulseAudio#.E8.A8.AD.E5.AE.9A
それをいじるのはおすすめしないという事なので、とりあえずホームにコピー。

```
$ cp -r /etc/pulse ~/.config/pulse
```

で、 `~/.config/pulse/default.pa` を編集。
中程に行を追加する。

```~/.config/pulse/default.pa
### Load audio drivers statically
### (it's probably better to not load these drivers manually, but instead
### use module-udev-detect -- see below -- for doing this automatically)
#load-module module-alsa-sink
load-module module-alsa-sink device=hw:0,2       ☜この行を追加
#load-module module-alsa-source device=hw:1,0
#load-module module-oss device="/dev/dsp" sink_name=output source_name=input
#load-module module-oss-mmap device="/dev/dsp" sink_name=output source_name=inpu
t
#load-module module-null-sink
```

自動認識だとhw:0,0の方を掴んでしまうので、
hw:0,2を手動で認識させる、という形。

書いたらpulseaudioを再起動。

```
$ pulseaudio -k
```
これでヘッドホンから音が出る。
【Rails】date_fieldで過去日付の登録を防ぐ方法

#はじめに
Railsでformを使ってデータを登録する事は非常に多いと思います。その中で日付を登録する事も多いと思いますが、ユーザーに過去の日付を登録させたくないケースがあるかと思います。
今回はその対処方法を紹介します。

#環境
- Rails:5.0.7
- Ruby:2.5.1

#前提
自分が開発している予約アプリを例にしています。reservationモデルのreceivedate(受取日)に制限をかけます。カラム型はdataです。

#ソースコード(form)
```:haml(html)
 =form_for [@user, @reservation], url:{ action: :confirm } do |f|
   .document-group-form__field
     .document-group-form__field--left
       = f.label :receivedate, '受取希望日', class: 'document-group-form__label'
     .document-group-form__field--right
       = f.date_field :receivedate, class: 'document-group-form__input'
```

#対象方法(コントローラーでエラーハンドリング)
```:reservations_controller.rb
  def confirm
    @documents = Document.all
    @reservation = Reservation.new(reservation_params)
    if @reservation.invalid?
      redirect_to new_user_reservation_path(current_user), alert: '予約情報が不足しています'
    elsif @reservation.receivedate < Date.today
      redirect_to new_user_reservation_path(current_user), alert: '過去の日付は選択できません'
    end
  end
```

自分はnew→createの間に確認画面を追加しているので、confirmアクションのコントローラーでエラーハンドリングしていますが、createアクションに記述すれば問題ないかと思います。
ALBのアベイラビリティーゾーンはパブリックサブネットに配置しなければならない

## はじめに
複数のECSをマルチAZにて配置してALBでバランシングをする一般的な構成を
構築していたのですが思わぬところで躓いたのでその解決方法になります。

## 失敗した構成
下記の図のような構成で外部向けにALBを作成しアベラビリティーゾーンに、
マルチAZでプライベートサブネットを設定。
外に出るときはパブリックサブネットに配置したNatGateWay経由で出て行くような構成を考えました。
![alb-fail.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68719/744edd36-552e-41e3-127e-d589d3c2dea8.png)

が、、
このような構成で構築してしまうとそもそも外から繋がらなくなってしまいました。。
EC2→ロードバランサー→サブネットを編集で見てみると下記文言が。。

「インターネット向けロードバランサーを作成中ですが、次のサブネットにはアタッチされたインターネットゲートウェイが存在しません」

## 原因
外部向けALBのアベライビティーゾーンはプライベートサブネットに配置してはならず、
パブリックサブネットに置かなければならない。

## 解決後の構成
ALBのアベライビティーゾーンをパブリックサブネットに変更、
パブリックサブネットを経由してプライベートサブネットに配置したECSにアクセス、
NatGateWay経由で外にでる構成に変更。
これでECSをプライベートサブネットに配置しつつマルチAZ構成が実現できました。

![alb-success.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68719/51a07369-231c-f1ec-dc9f-faf247248101.png)

## まとめ
はじめてAWSの構成を1から構築したこともあり色々つまずきました。。
AWSはネットワークの構成を組むのが最初の難関だと思いました。
設定がミスっていても設定ができてしまうところが難しい。。
初心者のKubernetes入門（書籍 Kubernetes 実践入門の写経から学ぶ）Service 編

# 背景
個人的にインフラの知識以上にこれからのアプリケーションが動く環境を作ってデプロイしたりしてこれからの知識を身に着けたい。そしてより一層、自分の知識のアップデートをしたいと思いました。

その中でこの本に出会い、これから少しずつやったことを残し、未来の自分への手紙としてもあり、見つめ直せればと思いました。

# 引用や参考と今回の自分の勉強用の書籍の紹介
[技術評論社『Kubernetes実践入門』のサンプルコード](https://github.com/kubernetes-practical-guide/examples)
[Kubernetes実践入門 プロダクションレディなコンテナ＆アプリケーションの作り方](https://gihyo.jp/book/2019/978-4-297-10438-2)
![](http://image.gihyo.co.jp/assets/images/cover/2019/9784297104382.jpg)


## 実際の学びについて

書籍を読みながら、章ごとに少しずつ進めていきたいと思います。
GitHub のソースコードも使いながら学んで行きたいと思います。

# 勉強開始

- https://github.com/kubernetes-practical-guide/examples/blob/master/ch1.3.6/my-svc.yaml

```yaml:my-svc.yaml
apiVersion: v1
kind: Service
metadata:
  name: my-svc
  namespace: default
spec:
  type: ClusterIP
  selector: # Podの集合をグルーピングするLabelセレクタ (1)
    app: nginx
  ports: # 公開するポートのリスト (2)
  - protocol: TCP
    port: 8080 #サービスが公開するポート
    targetPort: 80 #転送先のPodのポート
```

# コマンド郡

## 実行前

<img width="1141" alt="スクリーンショット 2020-04-11 21.02.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174596/fad7f6ce-fb04-0fc6-37dc-3cd40a85522a.png">

## Deployment のマニュフェストファイルを適用する
```
$ kubectl apply -f my-svc.yaml
```

## 実行後
<img width="1139" alt="スクリーンショット 2020-04-11 21.03.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174596/bb30704f-26e3-8573-d6a6-7ced6817f748.png">

## 次は ConfigMap をやっていきます。

アプリケーションの設定情報の分離について仕組みを一旦実行して感覚を掴みたいと思います。

## 最後に

Service についてはどのようにアクセスができるのかの仕組みとかの基礎部分だと思います。
書籍には、３章でより詳しく説明しますとなっているので、楽しみにしながら、概要のイメージを掴みながら学習していきます。
早起きは三文の徳（朝日で鳴るアラームをArduinoで作る）

##概要
コロナでずっと家にいて生活のリズムが狂ってきたので、Arduinoで朝日の光に反応して鳴るアラームを作りました.
もちろんスヌーズ機能などはついていません.
これで規則正しい生活が送れるようになることでしょう.


##配線
使ったものは主に以下の5つ.
- Arduino UNO
- ブレッドボード
- フォトトランジスタ（光に反応するセンサー）
- 圧電スピーカー
- 220Ωの抵抗

配線のイメージ図は以下になります.
照度計で計測した電流をA0で読み取り、その大きさに応じて13番のポートから圧電スピーカーに電流を流す仕組みになっています.
<img width="972" alt="スクリーンショット 2020-04-11 20.55.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/391115/23e0d368-edba-3d15-8e46-a767a2f1b578.png">

##実装
実装したコードは以下になります.
照度が一定値を超えた場合に、光の量に応じて音の高さが高くなるように実装しました.
音が高い方が鬱陶しいので起きたくなることでしょう.

```C++:light-alarm.ino
int sensorValue = 0;

void setup() {
  // put your setup code here, to run once:
  Serial.begin(9600);
  // pinMode(13,OUTPUT);
}

void loop() {
  // put your main code here, to run repeatedly:
  
  sensorValue = analogRead(A0);
  Serial.println(sensorValue);

  if(sensorValue >= 3) {
    tone(13,sensorValue*50);
  }
  else {
    noTone(13);
  }
}
```
##デモ
閾値は実際に値を見て調整した方がいいでしょう.
音階などが鳴るようにしてみても面白いかもしれません.

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Arduinoで光に反応するアラーム作った<br>朝日と共に起きれます <a href="https://t.co/oF47veSzNx">pic.twitter.com/oF47veSzNx</a></p>&mdash; Ryota Nomura (@ryooota765) <a href="https://twitter.com/ryooota765/status/1248938212812185601?ref_src=twsrc%5Etfw">April 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Vue.jsでDiscordのクローンを作ってみた

Vue.js勉強中に、ふとDiscordのクローンを作ってみたいと思ったので実際にやってみました。

vue.jsで作ったdiscord-clone
![discord-clone](https://i.gyazo.com/b71491f53d9605b7c3709bd9bbc518e0.png)

#本家とクローンを比較

本家のスクショが以下（ブラウザ版）

![discord本家スクショ](https://forum.playvesteria.com/uploads/default/original/2X/5/5dc7b0c5f667e0e2af8d3c14ed8dc4691ceccfb4.jpeg)

そして今回作ったクローンのスクショが以下

![discord-clone スクショ](https://i.gyazo.com/8ebe0caf8bb5e7febf436d3f5821b852.png)

公開URL: https://sigr.io/portfolio/discord-clone/


チャットのリアルタイム送受信が行えます
Discord本家はWebSocketは使っていないみたいですが、私はWebSocketのほうが使い慣れてるのでSocket.IOを採用してみました。

フロントはVue.jsとVuetifyですが、Discord風のUIに寄せるためにけっこうscssを書きました。

#レスポンシブにも対応
本家はスマホ向けアプリがあるのでレスポンシブではありませんがレスポンシブにしてみました。

![gif](https://i.gyazo.com/0ee2e6702bdbb0ec5f8f221cfeb99400.gif)

スマホ表示のときはVuetifyの`v-navigation-drawer`コンポーネントにサイドメニューを格納するようにしました。

#アバター変更機能
![avatarchanger](https://i.gyazo.com/07deb7786915f020c76f38514f617ac5.gif)

なんとなく実装。
ただしリロードしないとメンバーリストやチャット上では変更が適用されませんTT

需要のかけらもありませんが、やっぱ自分が作りたいものを作るのが最高です:relaxed: