OmniAICreator/Qiita-1.07M huggingface dataset:
Vuexの概要


# Vuexとは

コンポーネントが共有するデータの状態を、グローバルに管理するライブラリ。
storeと呼ばれるアプリケーションのデータの状態を保持するコンテナを使用して、
コンポーネントとデータの取得・保存を行う。

#storeの４つの機能

##state
アプリケーション全体のデータの状態を管理。
データの状態を確認したり、特定のデータの状態を見つけることができる。

##mutations
stateの更新だけを行う。
actionsを通じてコミット（実行）される。
データの変更をデバッグするとき、mutationsのおかげでデバッグが容易になる。

##actions
mutationsの呼び出しやAPIとの非同期通信を行う。
※actions自体は直接stateを変更できない。

##getters
computedと同様の動きをして、stateの値を算出したものを返す場合に役立つ。
値がキャシュされ、gettersが依存しているstateが更新されない限り再評価しない。

##相関図

![Vuexの流れ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1061608/8bbb6b0c-2c0f-a24b-e8df-5e2d08d0754b.png)


#まとめ
必ず、mutationsを通じてstateを変更する。
４つの機能に分けたことで、データの流れを追いやすくデバッグのしやすい状態管理を実現できる。

参考教材
https://www.techpit.jp/courses/24
WSLgとOpenCVを使って動画と画像を表示してみる

## はじめに
この記事ではWSL2の新機能 WSLg と OpenCV を使用してWSLから画像と動画を表示してみる。
使用言語は C++ と Python3。
## 必要パッケージをインストールする
```shell:
$ sudo apt update && sudo apt upgrade
$ sudo apt install git 

# C++
$ sudo apt install libopencv-dev build-essential

# Python
$ sudo apt install python3 python3-pip
```

## レポジトリをcloneし、動画ファイルを配置する
まずは今回使うコードと画像が含まれたレポジトリをクローンする。 

```shell:
$ git clone https://github.com/nashinium/Miku-on-OpenCV.git
```
次に、レポジトリに含まれていない動画ファイルを所定のディレクトリに配置する。適当な動画を入手したら `video.mp4`に名前を変更し、次のディレクトリに配置する。`./Miku-on-OpenCV/src/media`
`Miku.png`と同じディレクトリに動画ファイルを置けたらOK。

## C++ で
#### コンパイル

```shell:Compile
$ cd Miku-on-OpenCV/
$ g++ src/main.cpp `pkg-config --cflags --libs opencv4`
```
#### 実行
動画と画像のどちらを表示するか選ばされるので`p`又は`v`を入力してEnterする。
パソコン起動後、初めてWSLgを使う場合メディアが表示されるまで少し時間がかかる。

```shell:Run
$ ./a.out

# Prompt
Select media type which you want to display... ('v' for video, 'p' for Picture)
>>
```
次のように画像、又は動画が表示されればOK。
![Screenshot_23.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1969204/d6590fd7-5251-6c72-cb5c-a355756a9065.jpeg)



## Python で
#### pipを使用して必要なモジュールをインストールする

```
$ pip install opencv-python
```
#### 実行
画像を表示したい場合は`PicMiku.py`、動画は`VideoMiku.py`。

```sh
$ cd Miku-on-OpenCV/src

# 画像を表示する
$ python3 PicMiku.py

#動画を表示する
$ python3 VideoMiku.py
```

次のように画像、又は動画が表示されればOK。
![Screenshot_24.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1969204/e2576f13-dbf4-cf2d-aa3a-19f390ec3ea2.jpeg)
[Ruby] AtCoder過去問 C - 100 to 105

##はじめに
AtCoder過去問をRubyで解いてみました。
よろしくお願いします。

問題はこちらから確認してください↓

https://atcoder.jp/contests/sumitrust2019/tasks/sumitb2019_c

##C - 100 to 105
まずは入力を受け取ります。
その後xの十のくらいまでの二桁をx_tenに代入します。

```ruby
x = gets.to_i
x_ten = x % 100
```

僕の考え方は100の位以降の桁は一旦無視して、x_tenを5で割り、その答えをcntに代入、そして余りを4で割り、その答えをcntに足し、余りを3で割り...を1まで繰り返します。

余りを出す計算と割り算の答えをcntに追加していく計算を別にしていますが、上記のことをコードに落とし込んだのが↓です。

```ruby
x = gets.to_i
x_ten = x % 100
 
five_rem = x_ten % 5
four_rem = five_rem % 4
three_rem = four_rem % 3
two_rem = three_rem % 2
 
cnt = x_ten / 5
cnt += five_rem / 4
cnt += four_rem / 3
cnt += three_rem / 2
cnt += two_rem / 1
```

十の位までのxを5から順番に割って、割り切れなかった数字を次の数字が割って...という処理で、百のくらいは無視して、5, 4, 3, 2, 1をそれぞれ何個使ってx_tenを作れるかの最小値がcntに入っています。

実際は、5, 4, 3, 2, 1のどれかを一回使うごとに+100がついてきてます。
つまりcntを100倍すれば、下二桁をxに合わせたときの百のくらいが分かります。

xの百の位は```x-x_ten```で表現できます。
cntの100倍がxの百の位以下であれば1を出力できます。足りない分は100を使えばいいので下二桁に影響を与えずに百の位を合わせに行けます。

逆にcntの100倍がxの百の位を超えてしまうようなら、下二桁を合わせたときに百の位はどう頑張っても、合わせられないので0を出力します。

```ruby
x = gets.to_i
x_ten = x % 100
 
five_rem = x_ten % 5
four_rem = five_rem % 4
three_rem = four_rem % 3
two_rem = three_rem % 2
 
cnt = x_ten / 5
cnt += five_rem / 4
cnt += four_rem / 3
cnt += three_rem / 2
cnt += two_rem / 1
 
if cnt * 100 <= x-x_ten
  puts 1
else 
  puts 0
end
```

##おまけ
最後のif文の条件式はcntに100を掛けなくてもcntとx/100を比べてもできましたね。

あと、僕はクソ真面目に解きましたが、xの百の位の数字に5をかけた数字がxの下二桁以上であれば、合計価格がちょうどx円で買い物ができるという法則を見つけられたなら下記のようにより明快な短いコードを書けます。

```ruby
x = gets.to_i
x_ten = x % 100
n = x / 100
 
if n * 5 >= x_ten
  puts 1
else 
  puts 0
end
```
壊れたHDDを修理してサルベージする奮闘記

# PCの電源が壊れHDDがすべて壊れた
ある日突然バチバチッと音と焦げ臭い匂いと共にPCが落ちてしまい、ひとまず予備の電源で故障範囲がどこまでか調べたところ、OSがインストールされているm.2のSSDは無事だったものの、SATA電源で接続されているHDDがすべて認識していませんでした。
マザーボードが無事だったのはよかったもののストレージが飛ぶのは精神的にダメージでかかったです。

# どうにかサルベージできないか試みる

壊れたHDDからデータを救出するのに業者を使うと、大なり小なりあれど数万円はかかる為個人で依頼するにはお財布的に厳しいので自分でできないかとチャレンジすることにしました。

# 失敗談
## その1 HDDの基板交換

まずは電源が起因でHDDが壊れたならデータは無事でHDDを裏返したところの基板側が壊れたと推測し、オークションで同型のHDDを用意して基板を交換すればデータ取り出せるのではないかとチャレンジしたのですが結果としてはダメでした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/115485/935848eb-ded6-4f8b-f6a5-f2655881e28c.png)
調べたところ基板に実装されているEEPROMに本体と対になる情報を持っているそうです。
EEPROMが無事なら直せる兆しが見えてきました。

# その2 EEPROMの吸い出し
https://www.amazon.co.jp/gp/product/B07W7RQ53X
CH341AというROMライターを購入し、壊れた基板からROMを吸い出し、ドナーに書き込んでみたのですがこちらも失敗。
クリップの線が長すぎてノイズになっているのか、バイナリで見ると前半部分はうまく吸い取れているように見えますが、途中からおかしいように見えました。

### 余談
CH341Aのツールでウィルスが入っているものがあるなど話がでているので使用には注意が必要そうです。
下記を見るにGitHubで提供している方がいるのでこちらが良いかもしれません。
https://github.com/boseji/CH341-Store

# 成功した方法
EEPROMを壊れた基板から取り外してドナーに移植しました。
すると無事HDDを認識することができたので新品のHDDにデータをすべて移行しました。
コツとしては上にハンダを乗せてからヒートガンで温めながらピンセットなどで取り外すときれいに取り外せます。

今回そもそも電源の保証が切れて2年以上経っているものを使い続けた結果がHDD壊れた要因だと思うので、使いまわし続けるのはよくないなと思いました。
CSSの拡張言語『SCSS』について

#『SCSS』とは？
CSSを見やすく、書きやすくする拡張言語の『SASS』の1つ。
直訳すると『文法的に素晴らしいスタイルシート』。
実際にCSSとして使用するためにはSCSSファイルをCSSファイルにコンパイル（変換）する必要がある。

#『SASS』と『SCSS』の違い
SASS・・・インデントを使う記法でCSSとはかなり相違がある。通常のCSSルールで記述するとエラーがでる
SCSS・・・CSSと互換性があるので通常のCSSルールで書いてもエラーがでない。記述方法がCSSとほぼ同じでとっつきやすい

#『SCSS』を使うメリット
①変数が使える
　→phpやjavascriptのように変数によく使う値を格納しておけるので、変更する際に1箇所の変更ですむ
　→自分で分かりやすい変数名をつけれるのでコードが解析しやすくなる
②階層構造を使える
　→htmlのように階層構造でコードを記述できるので、記述量を減らせたりメンテナンスしやすいコードにすることが出来る
③ミックスインという機能が使える
　→『@mixin』というコードを使うことでコードの塊（関数に似ている）を作成し、複数の場所で呼び出して使用することが出来る
④継承という機能が使える
　→親要素で指定したスタイルを別の子要素でそのまま使用したり、追加でスタイルを当てて使用したりすることが出来る

#『SCSS』のコンパイル手順
###①エディタのダウンロード
代表的なコードエディタ
・Brackets
・Sublime Text
・Visual Studio Code
・Atom
###②コンパイラの準備
####GUIコンパイラ
・koala
・prepros
→アプリを立ち上げてファイルかフォルダを選択すると、アプリを立ち上げている間は自動でコンパイルしてくれる。
コンパイル後のスタイルも選択できる。

####プラグイン『Live Sass Compiler』を使用する（VSCodeのみ）
①『Live Sass Compiler』をインストール
②コンパイルの監視を開始
③SCSSのコーディングを行う
Python Elasticsearchクライアントの実装

# はじめに

ESがいくつかのクライアントとのAPIを提供し、ここでpythonを使って、実装しながら、使い方を解説する。

# 事前準備

* Elasticsearch7.15.0 インストール
* Python3.9.7 インストール
* kibana7.15.0 インストール(なくてもよい、postmanでもなんでも好きなのがあれば)
* CentOS8.3(linuxじゃなくてもよい)

※Elasticsearchとkibanaバージョン一致しないと動かない。

## Elasticsearchパッケージインストール

```shell
# python -m pip install elasticsearch
```

## クライアントに接続

ESにデーターを詰めたいため、ESのサーバーに接続
以下のサンプルはES三台構成とする、SSL通信ならhttp_authが必要。

```python
from elasticsearch import Elasticsearch

es = Elasticsearch(
    [
        {"host": "172.x.x.x", "port": 9200}, 
        {"host": "172.x.x.x", "port": 9200},
        {"host": "172.x.x.x", "port": 9200}
    ],
    http_auth=("username", "secret"), 
    timeout=3600
)
```
`es = Elasticsearch()`だけならローカルの9200を接続しに行く。

## インデックス作成

```python
# インデックス名はnewsのインデックスを作成
result = es.indices.create(index='my-index', ignore=400)
print(result)
```

実際のプログラミングにはエラーをキャッチするように、`ignore=400`などを使用した方がよい。
ignoreを使うと、同じ名前のインデックスが作成されたらエラーを無視する意味。

## インデックス削除

```python
result = es.indices.delete(index='my-index', ignore=[400, 404])
print(result)
```

404は存在してないインデックスを削除しようとするとエラーが発生する。
そのエラーを無視(ignore)する

## データー挿入

indexメソッドを使用する。DB作成みたいなもので、引数にはindex、doc_type、bodyが必要です。

```python
# bodyとして使う
doc = {
    'level': 'info',
    'timestamp': datetime.now(),
    'detail': 'connect',
}
# インデックスmy-indexを作成する
res = es.index(index="my-index", doc_type="log", id="100001", body=doc)
# 結果出力
print(res['result'])
```

index()メソッド使う時に`id`指定しなくても良いです。その場合、自動にid番号が振られる。

create()メソッドもデーターの挿入できる。create()メソッド使う時idは必須となる。

配列型の挿入方法

```python
datas = [
    {
        'title': 'hello morning',
        'date': '2021-11-16'
    },
    {
        'title': 'hello morning2',
        'date': '2021-12-16'
    },
    {
        'title': 'hello morning3',
        'date': '2021-12-17'
    },
    {
        'title': 'hello morning4',
        'date': '2021-12-18'
    }
]

for data in datas:
    es.index(index='my-index', doc_type='log', body=data)
```

## データー更新

```python
doc = {
    'level': 'info',
    'timestamp': datetime.now(),
    'detail': 'connect',
}
result = es.update(index='my-index', doc_type='log', body=doc, id=1)
print(result)
```

idを指定し、update()メソッドで更新する

## データー削除

```python
result = es.delete(index='my-index', doc_type='log', id=1)
print(result)
```

id指定で削除する

## インデックス取得

```python
res = es.get(index="my-index", id='100001')
print(res['_source'])
```
## 検索

```python
# 検索(最初の100件)
query = {
  "size": 100, 
  "query": {
    "match_all": {}
  }
}
res = es.search(index="my-index", body=query)
for hit in res['hits']['hits']:
    print(hit['_source'])
```

`res['hits']['hits']`ヒットした情報の一ページ目の情報が取得できる

`res['hits']['total']`ヒットした件数が取得できる
D3.jsのグラフのタイトルにアイコンをつける

#はじめに
デザイン上、D3.jsのグラフのタイトルに画像のアイコンを表示させる必要があったので、調べてみたメモ。

#やり方
単にSVGのImageタグをD3の流儀に従って張り付けるだけ。
座標はうまいこと調整しよう。

```js
// グラフタイトルのアイコン
svg.append("image")
   .attr("x", 0)
   .attr("y", 0) 
   .attr("href", "https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image/mdn_logo_only_color.png")
   .attr("height",20)
   .attr("width",20)

// グラフタイトル
svg.append("text")
    .attr("x", 24)
    .attr("y", 12)
    .attr("font-size", "13px")
    .attr("text-anchor", "top")
    .attr("font-weight", 700)
    .text("タイトル");
```

するとこんな感じで画像がタイトルの横にアイコンっぽく表示される。当たり前っちゃー、当たり前の話だ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329816/9996efcd-100c-6f5e-f262-9b8e23fd67e3.png)

#参考
- https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image
[heroku]Exec format errorというエラーの解決方法

# はじめに
本記事では、herokuへDockerコンテナをリリース後、
データベースを更新するようなコマンドを入力したところ、
`Exec format error`というエラーが発生したので、解決方法を記述します。

# ターミナルにて
`rails-docker-mkato`はアプリ名です。

```
% heroku container:release web -a rails-docker-mkato
Releasing images web to rails-docker-mkato... done
% heroku run bundle exec rake db:migrate RAILS_ENV=production -a rails-docker-mkato
Running bundle exec rake db:migrate RAILS_ENV=production on ⬢ rails-docker-mkato... up, run.3205 (Free)
Error: Exec format error
```

## ログを確認

```
2021-10-08T10:19:30.373656+00:00 heroku[web.1]: Starting process with command `sh /start.sh`
2021-10-08T10:19:31.572087+00:00 app[web.1]: Error: Exec format error
2021-10-08T10:19:31.715922+00:00 heroku[web.1]: Process exited with status 126
2021-10-08T10:19:31.785102+00:00 heroku[web.1]: State changed from starting to crashed
2021-10-08T10:19:31.912808+00:00 heroku[web.1]: State changed from crashed to starting
2021-10-08T10:19:50.024750+00:00 heroku[web.1]: Starting process with command `sh /start.sh`
2021-10-08T10:19:50.982798+00:00 app[web.1]: Error: Exec format error
2021-10-08T10:19:51.102356+00:00 heroku[web.1]: Process exited with status 126
2021-10-08T10:19:52.245987+00:00 heroku[web.1]: State changed from starting to crashed
```

# 結論

以下のサイトに倣って、コマンドを入力しましたところ解決しました。
[M1 MacでHeroku containerにデプロイしたら Exec format error と出て困った話](https://zenn.dev/daku10/articles/m1-heroku-container-trouble-exec-format-error)

### M1 Macでx86向けのDocker Imageをビルドする
ということが必要みたいです。


コマンド入力
`ユーザ名は自身が使用するusername`です。

`build`して`push`するのでまあまあ時間がかかりました。

```
$ docker buildx build . --platform linux/amd64 -t username/example:latest
$ docker tag username/example registry.heroku.com/example/web
$ docker push registry.heroku.com/example/web
$ heroku container:release web -a example
```

再度コマンド入力

```
% heroku run bundle exec rails db:migrate RAILS_ENV=production -a rails-docker-mkato
Running bundle exec rails db:migrate RAILS_ENV=production on ⬢ rails-docker-mkato... up, run.1740 (Free)
```

特にエラーは起きませんでした。

以上です。

# 終わりに
herokuへデプロイする流れとかもしっかり理解しないといけないなと反省もしました。

以下参考サイトです。
[M1 MacでHeroku containerにデプロイしたら Exec format error と出て困った話](https://zenn.dev/daku10/articles/m1-heroku-container-trouble-exec-format-error)
[Docker Buildx](https://matsuand.github.io/docs.docker.jp.onthefly/buildx/working-with-buildx/#build-multi-platform-images)

明日も頑張ります！
GitLab RunnerをGKEで稼働させる

## 概要
GCE：ubuntu 18.04 lts
GitLab: 14.1.2-ee

GitLab RunnerをGKEで稼働させかつ安くできないか試します

## GKEの作成

1. GitLabにログインし、Kubernetes　→　Google GKEを選択
![gke1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1901173/1e868fec-a32b-82a3-5f42-af0088771414.png)
GitLabからGKEを作成しようとすると認証エラーが出ることがある
※認証を通すには過去記事を参照
[GitLabの認証でGoogle OAuth2を利用](https://qiita.com/motoori/items/a1d85ad1f9fea6b2922d)

2. クラスタ情報を入力
・クラスター名（任意）
・リージョン（とりあえず東京）
・安くしたいのでn1-standard-1
※microインスタンスを選択すると、このあとHelmとGitLab Runnerがインストールできないので注意
![gke2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1901173/772a441c-e1c0-aa67-8e87-fef99df6e36e.png)

数分待つと出来上がってます
![gke3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1901173/d9d02528-77bb-9584-9d9c-14d1e6f42e71.png)

HelmとGitLab RunnerをGtiLab上からインストールしようとしたのですが、
何やらメッセージが・・・
※One-click application management was removed in GitLab 14.0. Your applications are still installed in your cluster, and integrations continue working. More information.
ワンクリックアプリケーション管理はGitLab14.0で削除されたのこと

仕方ないので、自分で入れます。

## GKEのノードをオートスケールさせる
1. GCPにログインし、Kubernetes Engineから先ほどGitLab経由で作成したクラスタを選択

1. ノードプールの追加を選択
1. ノード数を入力し、自動スケーリングの有効化にチェックを入れる
![gke5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1901173/e7903081-a807-b5e0-df7c-d488943519ee.png)

1. ノードを選択し、マシンスペックを適切な値を選択し「プリエンプティブルノードを有効化」にチェックを入れます
    プリエンプティブルノードにすることによって、可用性が保証されなくなりますが、劇的に料金が安くなります
![gke6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1901173/f5e9f51e-b8b6-5825-9233-4c6d0c284105.png)

4. 最初から作成されていた「default-pool」というノードプールを削除します(プリエンプティブルとして作成されていないため)
5. gitlab-ci.ymlに環境変数を指定することで、利用するCPUやメモリの量を指定します。

これで、だいぶん安くなるはず
どのくらい安いかは後日追記・・・。
【CSS】htmlやbodyにoverflow: hidden;をするとスクロールできなくなる

## overflowとは

overflowとはCSSのプロパティの１つで「要素のボックスからはみ出た部分をどう扱うか」を指定します。
cssでよく使うやつですね。

```styles.css
.box {
  /* 初期値。はみ出た部分はそのまま表示される。 */
  overflow: visible;

  /* はみ出た部分が非表示。 */
  overflow: hidden;

  /* はみ出た部分が非表示。その中でスクロールできる. */
  overflow: scroll;

  /* ブラウザにより表示が変わる（基本的にはスクロールできる状態に） */
  overflow: auto;
}
```

## じゃあbodyに当てればはみ出た部分消してくれるってこと？


ふーん、便利じゃん。

```styles.css
body {
  overflow: hidden;
}
```

これでレスポンシブして要素がはみ出ても変な余白ができたりしないはず！
しかし、別の問題が発生します。
### あれ？スクロールできなくなったんだけど？？？
bodyにoverflow: hidden;してしまうとビューポートへ適用されてしまいます。
ビューポートとは、簡単にいえば「ブラウザのウインドウに表示されている領域」を指します。
つまり、表示されている領域からはみ出るすべての要素が非表示になってしまうのです。

##　解決策
```styles.css
body {
  overflow: scroll;
}
```

ここまで読んでくださった君のような勘のいい方はもうお気づきですね。
### bodyにoverflowするときはscrollにしましょう。
スクロールできて要素がはみ出たときに変な余白を消すことができます。

## 逆に言えばoverflow: hidden;使えばスクロールさせない

モーダルを作るときとかは使えるテクニックですね。
golangでpostgresを操作する。

golangでormなしにpostgresを操作する機会があり、色々学びがあったのでまとめ見たいと思います。


# 使用ライブラリ
`github.com/lib/pq`
`database/sql`

#配列
postgresには配列型があり、柔軟に複数の値を操作できます。
集約関数から、マッチした値を配列に変換してDISTINCTを掛ければ一意な値の配列が得られたりします(速さは保証しません)。

golangで書く場合は以下の通りです。

```golang
targetIds = []int{400,500}
// queryに配列を埋め込む
db.Query(`SELECT * FROM t WHERE id = ANY($1)`, pq.Array(targetIds))

// query結果を配列に変換する
var x []sql.NullInt64
db.QueryRow(`SELECT ARRAY[235, 401]`).Scan(pq.Array(&x))
```

`pg.Array`関数でgolangの配列 <-> query を簡単に行えます。

#json
postgresにはjson型があり、mysqlと比べると簡単にデータを整形できます。jsonをカラムとして変換したりなど扱いやすい形に変換できます。
今回は単純にjson型からデータを引っ張る場合です。

```golang
// 書き込み
insertQuery := "INSERT into t jsonColumn (jsonData) values($1)"
d, _ := json.Marshal(newData)
db.Exec(insertQuery, d)

// 読み込み
selectQuery := "SELECT jsonColumn FROM t"
row, _ := db.QueryRow(selectQuery)
var jsonRaw null.String
row.scan(row, &jsonRaw)

var resultStruct <適当な構造体>

json.Unmarshal([]byte(jsonRaw), &resultStruct)
```

単純に jsonに変換して埋め込むだけでOKです。
jsonパッケージを利用しましょう。

#pkを返す
postgresはinsertした瞬間にpkがあればそれを返してくれます。
golangだと以下の通り

```golang
var targetId int
insertMasterQuery := "INSERT INTO t (id) VALUES (DEFAULT) RETURNING id;"
err := database.QueryRow(insertMasterQuery, newsId).Scan(&targetId)
```
#最後に
おそらく、本番で使う場合はormなどと組み合わせることとなります。postgresは多機能で柔軟な処理が行える反面、覚えることも多いです。
ただ、基本さえ押さえておけば、混乱することは少ないと思います。
laravel8 jetstreamでbootstrap5を利用してハンバーガーボタンが効かない対処

laravel8 のログイン認証一式をやってくれるjetstreamですが
livewire/inertiaどちらを選んでもCSSとしてtailwindがベースとなるようです。
livewireがbladeベースのテンプレートファイルで画面を実装するフレームワーク
inertiaがvueやreactなどのSPAで画面を実装するフレームワーク用だそう。
team機能を使う場合は`--teams`をつける。

```bash:bash
$ composer require laravel/jetstream
# liveeireを使う場合
$ php artisan jetstream:install livewire
# liveeireでteamsを使う場合
$ php artisan jetstream:install livewire --teams
# inertiaを使う場合
$ php artisan jetstream:install inertia
# inertiaでteamsを使う場合
$ php artisan jetstream:install inertia --teams
```

このtailwindをbootstrap5で置き換えてくれるのが
[nascent-africa/jetstrap](https://github.com/nascent-africa/jetstrap)

```bash:
$ composer require nascent-africa/jetstrap
$ php artisan jetstrap:swap livewire --teams
$ npm install && npm run dev
$ php artisan migrate
```

以上でTOP画面からlogin/registerなどの画面
ログイン後のdashboard画面やプロフィール設定画面などが実装される。

問題はここからで
スマホだとレスポンシブの関係でヘッダーメニューが
三本線の「ハンバーガーボタン」で表現されるがこちらが反応しませんでした。

原因はbootstrap5の変更でdropdownメニューのdata属性が
`data-*`が
`data-bs-*`に変わったのがjetstrapでは正しく置換されていないようでした。

対象となるボタンの実装されているファイルの以下の個所を変更

```html:resources/views/navigation-menu.blade.php
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
            <span class="navbar-toggler-icon"></span>
        </button>
```
macでジェスチャーが使えなくなったときの対処法 (ミッションコントロール)

## 背景

最近、とある資格試験をonVUEというアプリを使って受けた際にミッションコントロール等のトラックパッドのジェスチャーが使えなくなりました笑

その際に少し詰まったので解決策をメモとして残します。

## 答え

macにはdefaultsコマンドというものを使ってプロパティの設定ができるそうです。

ターミナルを開き以下のコマンドを打ってください。

```:terminal
defaults read com.apple.dock mcx-expose-disabled
```

返ってきた値が`1`の場合はジェスチャーが無効になっているので、以下のコマンドを打ってください。

```:terminal
defaults delete com.apple.dock mcx-expose-disabled && killall Dock
```

再度最初のコマンドを打ってみると`does not exist`と返ってくるはずです。

## 参考資料

[Mission Controlが起動しない](https://discussionsjapan.apple.com/thread/251082436)

[macOSでの各種設定を自動化するdefaultsコマンド](https://memo.yammer.jp/posts/macos-defaults)
配列同士の計算

自作のECサイトでカート内商品の合計金額を算出が必要となったため、色々試してみたところ一番しっくりくる記述法があったため忘れないように記録。

```total_price.rb
 # items = CartItem.includes(:product)  //商品情報をincludesで取得
  def total_price(items)
    quantity = items.pluck(:quantity)  # :quantity(購入個数) のレコードの配列を取得

  # quantity = {1, 2, 3}

    price = items.pluck(:price)        # :price(購入金額)のレコードの配列を取得

  #  price = {1500, 1200, 1000}

    total_price = quantity.zip(price).map{|q,p| q*p}.sum   

  # .zip(price) = {[1, 1500], [2, 1200], [3, 1000]} <----quantityとpriceの配列をzipで結合
  # .map{|q,p| q*p} = {1500, 2400, 3000} <----mapで商品ごとの個数*金額を算出
  # .sum <----最後にsumで合計金額を算出

    total_price = add_tax(total_price)  # 消費税を計算
    return total_price
  end
```

これで合計金額の算出完了！！以上！！！！
CTF環境づくり

# CTF環境作り

今回CTFへ初挑戦ということで、win10にvirtualboxをインストールしてkali-linux
を動かした時に引っかかったところを書き残していく。

## virtualboxのインストール
ここは[公式](https://www.virtualbox.org/)からexeファイル落としてきて
基本ポチポチでインストールする。

## kali-linuxのisoファイル取得
・[kaliの公式ホームページ](https://www.kali.org/get-kali/)からisoファイルを
　インストールする。（ディスクっぽいアイコンのやつ）

## kali-linuxのインストール
・ストレージは50GBは欲しいかも
　* 初期設定でのパッケージインストールでlarge選んで合計17GB取ってたんで
　　それ考えると最低30GBは欲しいかも...
・ファイル共有設定を行う
　　　　　　　　　　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488536/5c4eefee-34ac-60b1-a4a9-6c06b409b31c.png)
トラックボールを作ってみた【試作編】

##前説
自作のトラックボールを考えてたのは結構前からだけど、単純にマウスを流用すると動作が逆になってしまうので、これじゃ無理かなと思ってました。
ここ最近自作キーボードを始めたので情報収集でぐぐってると、トラックボールもインプリしているキーボードの作例もあるし、トラックボール単体の作例も見つけることができました。
中でもボール単体で使う作例のaballやPloopy Nanoは、キーボードにキーを割り当てて本体を小さく収めるという構想で作成されているトラックボールで、初めて見た時はとてもインパクトがあるものでした。

**aball**
https://github.com/brickbots/aball
![aball](https://raw.githubusercontent.com/brickbots/aball/master/photos/finished_single.jpeg)
**Ploopy Nano**
https://ploopy.co/shop/nano-trackball-kit/
![ploopy nano](https://raw.githubusercontent.com/ploopyco/nano-trackball/master/nano.jpg)
自作してみようと思った時の一番の問題は光学部品の入手と思います。aballで使われているものはADNS-9800のブレイクアウト基板ですが、国内で入手するのが難しそうでした。
Ploopy Nanoはキットなので海外通販で買えそうなんですが、まぁまぁな送料となるから購入をためらってしまいました。

##下調べ
aballで使っている光学部品は入手し難いし、Ploopy Nanoで使われている光学部品はビット・トレード・ワンで購入できるのですが、単体で購入したあとの構成が難しそう...

と思ってたところ、@ataruno_keyさんのつぶやきが目に入ってきました。

https://twitter.com/ataruno_key/status/1432310304558370830

これで光学部品の確保は確実になりました。しかも税込み330円。

@ataruno_keyさんが使われてるちいさなトラックボールはビット・トレード・ワン,遊舎工房で販売されています。このトラックボールはPAW3204というセンサーが使われていて、QMKに組み込んで使用できるライブラリも公開されています。
![btotb](https://bit-trade-one.co.jp/selfmadekb/wp-content/uploads/sites/6/2020/04/P1470267-2048x1152.jpg)
近所のダイソーで購入し、動作確認もせずにセンサーICの刻印を確認するとMX8650とみえました。データシートを見るためにMX8650をキーワードに検索をかけたら、すぐにでてきました。

すでに@ataruno_keyさんが組み込まれていたので、信号系はおなじになっていると推測してましたが、確認のためにビット・トレード・ワンからPAW3204のデータシートを入手してみると同じなことが分かりました。

##試作
実現性を確認するためにブレッドボードで実装してみました。
必要な物品は以下の通りで、適当な配線や半田道具を別途用意しました。

|物品|入手先など|URL|
|:|:|:|
|ブレッドボード|Amazonや電子パーツやさん|https://amzn.to/3ivSHPT|
|ダイソーマウスから引っぱがした光学部品|ダイソー|https://bit.ly/3owIciX|
|ProMicro|小さいのが欲しかったからAmazon|https://amzn.to/2WCaU6m|
|双方向レベルシフト|Amazon|https://amzn.to/3BeIeiY|
|トラックボールの玉|手持ちがなければAmazonで|https://amzn.to/3owXNik|

ダイソーマウスは、廃盤になったり、仕様が変わったりするかもしれません😅

光学部品とProMicro間の接続を簡単な回路図を書いてみて、それをもとにブレッドボードで試作回路を作成しました。

**回路図**
![すごいラフな回路図](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283328/834a2d7b-1cd6-afee-f0e8-72edc872f27e.jpeg)
回路図で省略して書いていないのが、電源と双方向レベルシフトです。
電源5VとGNDはUSBからの給電で、3.3VはProMicroから給電をしています。
今回使用の光学部品は3.0Vが定格ですが、10%には収まっているのがんばってもらいます。もし定格を超えるようでしたら、レギュレータで降圧すると良いと思います。
双方向レベルシフトの接続は、マイコン側がHVで光学部品側がLVとなります。電源はHVは5V、LVは    3.3Vへ接続します。
すべての部品のGNDは共通でUSBへ接続します。

**ブレッドボードの試作回路**
![ブレッドボード](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283328/c1d69203-1221-d37c-073c-590d54b2aa3e.jpeg)
回路図をもとにブレッドボードに組んでみたのが上の画像で、QMKでプログラムを書いてあげると無事動作することが確認できました。
プログラムはビット・トレード・ワンのトラックボールを組み込んでいるキーボードのものを参考にして書いてみました。

引き続き組み込みの検討です。つづく。
Pillow(PIL)で生成するgifの画質を上げる

## 単刀直入
`im.quantize()` するだけ

## はじめに
Pythonの画像処理ライブラリのPillowを使えば、簡単にgifアニメーションを作ることができます。
詳しいことはみんな大好き[note.nkmk.me](https://note.nkmk.me/python-pillow-basic/)に譲りますが、適当に画像を数枚開いてオプションを決めるだけです。

```python:makegif.py
from PIL import Image

im1 = Image.open("hoge.png")
im2 = Image.open("huga.png")
images = [im1, im2]
images[0].save('test.gif', save_all=True,
               append_images=images[1:], optimize=False, duration=500, loop=0)
```

![test.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349064/0bd7ef89-1c09-633b-cd86-e715b58ddc2d.gif)

たのしいアニメができました。

## 写真の場合
では、いらすとやのようなシンプルなイラストではなく、**写真でも試してみましょう**。
![test.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349064/94072069-e6f1-aadb-4609-e60d8d3427c7.gif)

監視カメラを通して見たような**酷い画質**になってしまいました。
何故……。

＊追記
スマホから見るとそんなに画質が悪くないように見えるかもしれません。
PCからだと結構酷さがわかります。（追記終わり）

## gifの制限と回避
> 2色モノクロから16777216色 (= 224) 中256色 (= 28) までの色サポート

https://ja.wikipedia.org/wiki/Graphics_Interchange_Format

そうだったんですね。昔から私を楽しませてくれていたgifたちは**256色の制限**の中で戦っていたらしいです。
しかしこれでは困ります。というかガビガビじゃない写真のgifも見たことある気がします。

調べてみると以下のような記述を見つけました。(Deepl訳に少し追記)
> もうひとつの方法は、「量子化(the quantize method)」です。現在、マルチフレームGIFを作成する際、PillowはWebパレットを使って画像を変換しています。量子化を使って画像を最初にPに戻した方が、使われている正確な色をよりよく表現できるように思えます。
https://github.com/python-pillow/Pillow/issues/3660

いまいちピンと来ませんが、Pillowで開いたイメージに.quantize()することでいい感じになるらしいです。
やってみましょう。

```python:makegif.py
from PIL import Image

im1 = Image.open("gohan1.jpg").quantize()
im2 = Image.open("gohan2.jpg").quantize()
im3 = Image.open("gohan3.jpg").quantize()
images = [im1, im2, im3]
images[0].save('test2.gif', save_all=True,
               append_images=images[1:], optimize=False, duration=800, loop=0)
```

![test2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349064/b33b52b2-0975-87ef-aba2-bea677b8b19a.gif)
**！！！**
美味しそうです！これなら食えますね！！

## なにが起こったの？
Pillowのquantizeによって、飯の画像を256色まで**いい感じに減色**しました。

https://pillow.readthedocs.io/en/stable/reference/Image.html

今回はデフォルトのままなので、**メジアンカット(option=0)という方法**で減色されたようです。
**他にもmaximum coverage, fast octreeの方法**が選べるようです。(libimagequantという方法もあるようですが、実行できませんでした)

それぞれを比較してみましょう。
![画像1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349064/27c3c992-ccb4-8602-c790-2752ecd72f7f.png)

maximum coverageの劣化が酷いですね。ほか2つはかなり似ていますが、手前の白飯を見ると若干fast octreeのほうが上手く減色できている気がします。

## まとめ
Pillowでgifがボケたときはとりあえずquantize！
Rails 下書き機能の実装で使うenum,draft ,status,publishedについて

# draft publishedとは
***draftは下書き***のことです。***publishedは公開***のことです。***statusは状態***のことです。
下書きをしたり、書いた記事を公開したりする時に使います。
statusは***enum(列挙型)と合わせて使われる***ことがよくあります。
***enum***の資料です。

- 参考資料
https://qiita.com/shizuma/items/d133b18f8093df1e9b70

# 下書き記事と公開記事を作成
下書き記事と公開記事を作成を作成するには、modelのarticle.rbなどに
```enum,status,draft,published```を使います。
これは記事の状態を表す記述です。


```models/article.rb
enum status {　draft: 0, publishe: 1}

```
他にもこのような書き方があるみたいです。

```models/article.rb
enum status { draft: "draft", published: "published"}

```

削除も入れる時は```deleted```も記述できるみたいです。

```models/article.rb
enum status { draft: 0, published: 1,deleted: 2}
```
配列で表すと下のようにできるみたいです。
```models/article.rb
enum state: [:draft, :published, :deleted]
```
# データベースに記事を保存しておくためのstatusカラム追加
```
$ rails g migration AddStatusToArticles status:integer
```
- 補足
integerはstringでも使えるみたいです。
draft: "draft"のような書き方をした場合。

statusカラムの追加をするために、
```*******_add_status_to_articles.rb```に下のように追記します。
```*******_add_status_to_articles.rb
class AddStatusToArticles < ActiveRecord::Migration[6.0]
  def change
    add_column :articles, :status, :integer, default: 0, null: false
  end
end
```
他にも
```
add_column :articles, :status, :string, default: "draft"
```
みたいなやり方もあるみたいです。
***status:integerのintegerをstring***にしたら上記みたいにもできるみたいです。

- ***マイグレーション実行(データベース反映)***
```
$ rails db:migrate
```

### 最後に
この辺のやり方で下書き保存機能はできました。
開発している環境によって変わってくる場合があるので、
参考にしてみてください。

### 参考資料

https://pgmg-rails.com/blogs/21
https://www.autovice.jp/articles/124?tag_id=41
https://qiita.com/shimadama/items/798f3f02058b6f91a248
https://kimuraysp.hatenablog.com/entry/2017/01/07/102403
CORSの背景であるSOPとは?

# 目的
CORSが存在する背景にはSOPがあるのを理解する

# SOPとは
**protocol、host、port**がすべて同じでなければリソース要請ができません。 
SOPは、ウェブブラウザとサーバーの関係で発生し、サーバーとサーバーの関係では発生しません。 
直観的に言えば、ユーザーの**シートベルト**機能です。
ブラウザで、オプションを設定してSOPをオフーすることができます。

## 概要
まず、MDNドキュメントの説明です。
![Screen Shot 2021-10-09 at 15.01.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2054418/1b768dc7-0486-3832-6e9f-42df1c34b3ee.png)

### 要約
- SOPは1つのOriginでロードされた文書またはスクリプトが他のOriginのリソースと相互作用する方法を制限する重要なセキュリティメカニズムである。
- セキュリティ脅威となる文書を隔離し、セキュリティ脅威から保護することができる。
- つまり、ウェブブラウザで動作するプログラムは、`ロードされた位置 (Same Origin)`にあるリソースのみアクセスできるというポリシーだ。

# Same Originとは？
上の要約の3行めでロードされた位置にあるリソースのみ` Same Origin `アクセスできると言っておきました。

下の表は ` http://fukuoka.com/service/sugoi.html `と` Same Origin `なのかを比較したものです。

| URL | 同じか | 理由 |
|:-----------|------------:|:------------:|
| http://fukuoka.com/entry/hajimete.html | 同じ | パスだけが異なる |
| http://fukuoka.com/service/js/sugoi.js | 同じ | パスだけが異なる |
| https://fukuoka.com/service/sugoi.html | 不一致 | protocolが異なる |
| http://fukuoka.com:8080/service/sugoi.html | 不一致 | portが異なる　|
| http://tokyo.com/service/sugoi.html | 不一致 | hostが異なる |

- 2つのURLを比較して、protocol, post, hostが同じだったら ` Same Origin `

# Originの継承
- `about:blank`・`javascript:URL`といったURLが含まれたページで実行されるスクリプトは、当該URLに含まれた文書の原本を継承します。

- このタイプのURLにはオリジナルのサーバーに対する情報が含まれていないからです。

# IE における例外事項
IEは` SOP `が適用されないケースがあります。
こちらの例外事項は標準外であり、他のブラウザーはこのような挙動に対応していません。

## Trust Zones
双方のドメインが高く信頼されたゾーン (企業のドメインなど) である場合は、同一オリジンの制限が適用されません。

## Port
IEは` SOP `確認要素にPort番号を含みません！
よって、` http://fukuoka.com:8080/service/sugoi.html ` と `http://fukuoka.com/service/sugoi.html`は` Same Origin `とみなされ制限は適用されません。

# オリジンの変更 - Deprecated
- 一部の制限事項があるページは独自の出処を変更することができます。
- スクリプトは` document.domain `の値を現在ドメインまたは` 現在 domain ` の ` super domain ` に設定できます。
- しかし、この機能は` SOP `で提供するセキュリティ保護機能を弱め、ブラウザの出典モデルを複雑にし、相互運用性の問題とセキュリティバグを誘発するため、もはや使用されることはありません。

![Screen Shot 2021-10-09 at 16.12.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2054418/63f69354-9ac5-ef3a-9add-f6d7acd9e41e.png)

- API Documentでも、いくつかのBrowserがサポートしても、今は標準から除外されているし、使わない方が良いと書かれています。
- **現在ディプリケート状態**
UITextFieldのレイアウト(メモ)



##まえがき
• notionでメモ程度に書いてるのをQiitaでまとめてみた!
• 自分用
# TextFieldの境界線幅の設定
```swift
 textField.layer.borderWidth = 1       
 textField.layer.borderColor = UIColor.secondaryLabel.cgColor
幅とカラーはお好みで
```
##レイアウトイメージ
####何も設定しない場合

![スクリーンショット 2021-10-09 16.02.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1679562/1fc2d80d-fcc4-5f8a-ed20-e5edd7b09b5f.png)

####textField.layer.borderWidth = 1  の場合 (カッケェー)

![スクリーンショット 2021-10-09 16.06.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1679562/5934782c-188d-c11f-530f-bb691b1d4821.png)


####textField.layer.borderWidth = 10  の場合 (煉獄並の太眉)
![スクリーンショット 2021-10-09 16.03.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1679562/9239da3f-b3c1-61bd-26c8-5b80f6840a34.png)


## エンターキーの設定
```swift
textField.returnKeyType = .continue
色んな種類があるからやってみてねー
```

![スクリーンショット 2021-10-09 13.06.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1679562/3b8c3e54-a6e2-2032-0922-8eda7a83b64b.png)


## TextField内に空白を作る

```swift
textField.leftViewMode = .always
textField.leftView = UIView(frame: .init(x: 0,
                                         y: 0,
                                         width: 50,
                                         height: 0))
幅はお好みに
```


####幅指定がある場合この場合は50のスペースがある
![スクリーンショット 2021-10-09 15.59.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1679562/9ce6c61a-940c-9010-8176-de57dfc3d1cc.png)


####指定しない場合
![スクリーンショット 2021-10-09 15.57.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1679562/ba06c040-08b1-09fb-ea50-5761a68565f5.png)

##終わりに
誰かの参考になれば幸いです
Qiitaさんいつもお世話になってるので感謝
間違えてるところ等ありましたら教えてくださいー

##参考
https://developer.apple.com/documentation/uikit/uitextfield
https://qiita.com/apukasukabian/items/39ed1711520f6a0aa013
Android: SDK Managerに含まれていないCMakeバージョンを使用する

私はFlutterでアプリを開発しているのですが、依存するライブラリがC/C++のコードを含んでおり、Android向けのビルドではCMakeのバージョンも指定されていました。Android Studioで該当バージョンのCMakeをインストールしてもエラーでビルドできなかったため独自にインストールして対応しました。[^1]
私がAndroidのネイティブ周りに明るくないこともあり手こずったのでメモしておきます。

#環境
- macOS 11.6
- Android Studio 4.1.1

#Androidのdevelopersサイト
CMakeのインストール方法について[公式の開発者向けサイト](https://developer.android.google.cn/studio/projects/install-ndk?hl=ja#kts)にも以下のような記述があります。

>
1. CMake の公式ウェブサイトから CMake をダウンロードしてインストールします。
2. Gradle で使用する CMake バージョンをモジュールの build.gradle ファイルで指定します。
3. CMake のインストール パスを PATH 環境変数に追加するか、次に示すようにプロジェクトの local.properties ファイルに含めます。build.gradle ファイルで指定した CMake バージョンを Gradle が見つけられない場合は、ビルドエラーになります。

この記事はこれの補足的な情報になります。

# 手順
今回はCMakeのバージョン3．18.1を利用する例として記述しています。

### CMakeのインストール
1. [GitHubのページ](https://github.com/Kitware/CMake/releases) から該当するバージョンのCMakeを探してダウンロードします。
2. macでは.dmgをダウンロード。開くとCMakeのアプリが出てくるのでApplicationフォルダへ移動。

### build.gradleにCMakeバージョンを記述
私の場合は利用するライブラリ側に記述があったので不要でしたが、自分で設定する場合は以下のような記述が必要です。

```
externalNativeBuild {
    cmake {
        version '3.18.1'
        path 'src/main/cpp/CMakeLists.txt'
    }
}
```

### プロジェクトの local.propertiesファイルにCMakeのパスを設定
cmakeが入っているのは `/Applications/CMake.app/Contents/bin`の中なのですが、ここで指定するパスはbinフォルダの親のContentsまでを指定する必要があります。

```
cmake.dir=/Applications/CMake.app/Contents
```

以上でビルドができるようになるかと思います。

[^1]: Android StudioのSDK Managerからcmake 3.18.1をインストールしてビルドすると `Invalid revision: 3.18.1-g262b901` というエラーが出てビルドができなかった。
Amplify×Nuxt.jsで外部APIにPOSTしようとしたらハマった話

## 背景
Nuxt.jsをAmplify CLIでデプロイして外部オリジンのAPIをPOSTしようとしていた。
amplify cliでのデプロイにはManaged Hosting(amplifyhosting)を採用していた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923148/b682d534-0a80-42c5-849f-6c58b62c4cc4.png)

また、CORS対策のために、以下のようにproxy設定をしていて、ローカルでは問題なく動いていた。

```nuxt.config.js
const backendBaseUrl = process.env.BACKEND_BASE_URL || 'http://localhost:3003'

export default {
  ...
  axios: {
    baseURL: backendBaseUrl,
    proxy: true,
    prefix: '/api',
    credentials: true,
  },
  proxy: {
    '/api/': {
      target: backendBaseUrl,
      pathRewrite: { '^/api/': '' },
      changeOrigin: true,
    }
  },
  ...
}
```

## 現象
proxy経由で外部APIに対してPOSTを叩くと、status code 405(MethodNotAllowed)のエラーが発生した
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923148/1d43526a-2602-81bc-1524-a95bdab67c0e.png)

どうやらcloudfrontがPOSTを拒否しているみたい
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923148/e7cbaab1-2913-08a0-c194-23c1cce6d275.png" width=70%>

## 解決策

自分の場合は、特定のパスに対して、書き換えてリダイレクトすることでPOSTが成功した

```json
[
    {
        "source": "/api/<*>",
        "target": "(Your API URL)/<*>",
        "status": "200",
        "condition": null
    }
]
```
こちらの設定はAmplify consoleの「書き換えて、リダイレクト」から設定することができる
<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923148/047db806-f5db-0114-ed63-8a8a9c5efa86.png width=30%>
「編集」を押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923148/7031dacf-5ccd-6862-25d0-eac80746a142.png)
「テキストエディタを開く」を押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923148/4cd56abf-9ef5-9fd5-6ff0-bb63eb710159.png)
ここでsourceとtargetを設定してあげる
<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923148/c4dad58a-c4ce-9982-19a0-4fd44c638ba6.png width=70%>
保存してからPOSTを叩き直すと成功した

## 参考
https://stackoverflow.com/questions/67988787/aws-amplify-405-methodnotallowed-error-in-post-method-with-nuxt-js-proxy
【Rで統計解析】まとめ

Rで行う基本的な統計解析のコードをまとめています。ページは随時アップ予定です

# 1. RとRStudioのインストール【Rで統計解析 準備編】
RおよびRStudioのインストール方法を紹介しています。

https://qiita.com/yasainiki/items/382736604488fabbfa75

# 2. RStudioの基本操作【Rで統計解析 基礎編】
RStudioの画面の見方や基本的な操作を紹介しています。

https://qiita.com/yasainiki/items/248af07b8705d4b8fc91

# 3. R パッケージのインストール方法と使い方【Rで統計解析 基礎編】
RStudio上でのパッケージのインストール方法を紹介しています。

https://qiita.com/yasainiki/items/28ca881aa80e022dcaa3

# 4. 一元配置分散分析（One-way ANOVA）【Rで統計解析 実例編】
Rを使った一元配置分散分析の方法を紹介しています。

https://qiita.com/yasainiki/items/8c7b26dbe2c69ffd176c

# 5. 多重比較【Rで統計解析 実例編】
Rを使った多重比較の方法を紹介しています。

https://qiita.com/yasainiki/items/b91366f7ee2824dd5828

# 6. 相関分析・線形回帰・線形混合モデル回帰【Rで統計解析 実例編】
Rを使った相関分析・線形回帰・線形混合モデル回帰の方法を紹介しています。

https://qiita.com/yasainiki/items/3bb65a98a8d9b0efbe64
円周率の小数点以下の各桁の数字の分布

# 円周率の小数点以下の各桁の数字の分布

Julia では，円周率は任意の精度 $k$ として，`BigFloat(π, k)` で簡単に求めることができる。小数点以下 $n$ 桁必要な場合，$k > \frac{n}{ \log_{10}2}$ とする。末尾の計算誤差を考慮すれば $k$ より少し大きめの整数を指定する方がよいだろう。<br>
小数点以下 10000 桁までならば，


```julia
k = 10000 / log10(2)
```




    33219.280948873624



$k = 33240$ とすれば十分であろう。


```julia
33240 * log10(2)
```




    10006.237055870735



`BigFloat(π, 33240)` で整数部を含む円周率が求められ，`string(x)` で文字列に変換し，`[3:10002]` で小数点以下 10000 桁を取り出し，`Char[y...]` で各桁に分解し，`parse.(Int, z)` で整数ベクトルに変換する。


```julia
d = parse.(Int, Char[string(BigFloat(π, 33240))[3:10002]...]);
```


```julia
# データベクトルの長さ（データの個数）
length(d)
```




    10000




```julia
# 度数分布
using FreqTables
freq = freqtable(d)
```




    10-element Named Vector{Int64}
    Dim1  │ 
    ──────┼─────
    0     │  968
    1     │ 1026
    2     │ 1021
    3     │  974
    4     │ 1012
    5     │ 1046
    6     │ 1021
    7     │  970
    8     │  948
    9     │ 1014



各数字がほぼ均等に出現している。


```julia
# 結果を棒グラフで表示
using Plots
bar(freq, ylabel="frequency", xlabel="digit", xticks=(1:10, string.(0:9)), label="")
```



![fig1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1653782/b4fca468-7077-a13a-0df8-0faa760505b3.png)
Google Cloud StorageのSigned URLでアップするときのCORS設定

主に自分用ですが、たぶん1年後忘れてそうなのでメモすることにしました

# GCSでSignedUrlを発行してクライアント側でアップしたい

よくあるケースですよね。とりあえずSignedUrlを発行するところは、以下のドキュメントを見て簡単にできました。

https://cloud.google.com/storage/docs/access-control/signing-urls-with-helpers#upload-object

そうして出来上がったURLをDropzone.jsに食わせてアップロードしようと思ったのですが、CORSエラーに引っかかりました。
こちらの記事なども参考にしたのですが、そのままではアップロードできませんでした。

https://qiita.com/kai_kou/items/7938fee7f0009f40ad8f

# 最終的に成功したCORS設定

```JSON
[
    {
      "origin": ["https://example.com"],
      "responseHeader": ["content-type", "cache-control","x-requested-with"],
      "method": ["PUT"],
      "maxAgeSeconds": 3600
    }
]
```

今回クライアントサイドからはPUTしかしないので、GETなどは入れていませんがお好みで追加してください。当初Content-typeのみをresponseHeaderにセットしていたのですが、それだとだめでした。

Preflightリクエストのリクエストヘッダを見てみると、以下のheaderを要求していたので、追加しました。

![2021-10-09cors](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8727/498a5c72-621b-a827-0fca-5e9c6ec3185c.png)


# それだけだとダメだった

それだけだとなぜかCORSエラーが出て頭を抱えていたのですが、githubのissueなどを参考に、明示的にContent-typeをセットするといけたとありました。

```JavaScript
# Dropzoneのoptionに追加
～そのほかのオプション～,
sending: function(file, xhr) {
  var _send = xhr.send;
  xhr.setRequestHeader("Content-type","application/octet-stream");
  xhr.send = function() { // そもそもGCSにアップするときのハック
    send.call(xhr, file);
  }
}, 
```

どうも、CORSエラーじゃないエラーでもCORSのエラーとしてブラウザに出てきてしまうみたいです。
【Maven】Eclipseでローカルリポジトリの変更方法

# Mavenのローカルリポジトリ
Mavenでダウンロードした依存ライブラリのjarファイルなどを置く場所。

Windowsの場合は下記の場所がデフォルトになっています。

~~~
"C:\Users{ログインユーザー名}.m2\repository"
~~~

# setting.xml作成

任意の場所にsetting.xml作成を作成します。
内容は以下の通り。

```setting.xml
<settings xmlns="http://maven.apache.org/SETTINGS/1.0.0"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://maven.apache.org/SETTINGS/1.0.0
                          http://maven.apache.org/xsd/settings-1.0.0.xsd">
      <localRepository>ローカルリポジトリのパス</localRepository>
      <interactiveMode/>
      <usePluginRegistry/>
      <offline/>
      <pluginGroups/>
      <servers/>
      <mirrors/>
      <proxies/>
      <profiles/>
      <activeProfiles/>
</settings>
```

# Eclipseの設定

ウィンドウ > 設定 > Maven > ユーザー設定 を開きます。

![ローカルリポジトリ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1798422/25eb474f-4ea0-dc8c-fa13-e29d1eb1446a.png)
ユーザー設定で作成した「setting.xml」を設定します。
[JavaScript] URLからwindow.location.XXXで色々クエリを取得する。

特定のクエリが変わった時だけレンダリングを行うという処理を書こうと思った時に、window.location.XXXのXXXの部分の指定に色々あるということを学んだので、メモ。

##window.location.XXXの色々
URLが`https://higu.com:8080/higu/scraps?status=openv#here`の場合

```jsx
window.location.href      // -> "https://higu.com:8080/higu/scraps?status=open#here"
window.location.protocol  // -> "https:"
window.location.host      // -> "higu.com:8080"
window.location.hostname  // -> "higu.com"
window.location.port      // -> "8080"
window.location.pathname  // -> "/higu/scraps"
window.location.search    // -> "?status=open"
window.location.hash      // -> "#here"
window.location.origin    // -> "https://higu.com:8080"
```

##その他の便利な機能
URLが`https://higu.com:8080/higu/scraps?status=open#here`の場合

###?の後のクエリだけ欲しい
```jsx
window.location.search.substring(1)  // -> "status=openv#here"
```

###特定の場所のクエリが欲しい
```jsx
ver query = window.location.href;

// /higuの前
query.split("/higu")[0];  // -> "https://higu.com:8080"

// /higuのの後
query.split("/higu")[1];  // -> "/scraps?status=openv#here"

// status=openだけ
var tmp = query.split("/scraps?")[1];
tmp.split("#here")[0];  // -> "status=open"
```

参考：[こちら](https://note.kiriukun.com/entry/20190209-get-current-url-in-javascript )
C# PC画面ロック 検出

みなさんこんにちは。

本日紹介する内容は、WindowsPCが検知されたことを検出する方法です。
画面ロック中は〇〇、解除中は〇〇したい。という機能が実現できます。

###仕組み
画面のロック検知をするためには、画面の状態を通知する必要があります。
通知をする仕組みとして、「WTSRegisterSessionNotification」
という「wtsapi32」の機能を利用します。

通知を受けた後、画面のステータスを確認し、
ロック状態のステータスコードと等しい場合、PCがロックされたと認定します。

###開発環境
Windows10　
※他のOSでは動作確認しておりませんが、恐らく問題なく動作します

###コード紹介

```c#:Form1.cs
using System;
using System.Windows.Forms;
using System.Runtime.InteropServices;


namespace LockDetect
{
    public partial class Form1 : Form
    {
        [DllImport("WtsApi32.dll")]
        private static extern bool WTSRegisterSessionNotification(IntPtr hWnd, [MarshalAs(UnmanagedType.U4)] int dwFlags);
        [DllImport("WtsApi32.dll")]
        private static extern bool WTSUnRegisterSessionNotification(IntPtr hWnd);

        const int NOTIFY_FOR_THIS_SESSION = 0;

        const int WM_WTSSESSION_CHANGE = 0x2b1;

        const int WTS_SESSION_LOCK = 0x7;
        const int WTS_SESSION_UNLOCK = 0x8;
        const int WTS_SESSION_REMOTE_CONTROL = 0x9;

        public Form1()
        {
            InitializeComponent();

            // 画面状態の通知に必要
            WTSRegisterSessionNotification(this.Handle, NOTIFY_FOR_THIS_SESSION);
        }

        protected override void WndProc(ref Message m)
        {
            // 画面状態が変更された
            if (m.Msg == WM_WTSSESSION_CHANGE)
            {
                int value = m.WParam.ToInt32();

                switch (value)
                {
                    case WTS_SESSION_LOCK:
                        Console.WriteLine("PCがロックされました");
                        break;

                    case WTS_SESSION_UNLOCK:
                        Console.WriteLine("PCのロックが解除されました");
                        break;

                    case WTS_SESSION_REMOTE_CONTROL:
                        Console.WriteLine("PCがRDP制御されました");
                        break;
                    default:
                        break;
                }
            }

            base.WndProc(ref m);
        }
    }
}

```

以上がコード紹介となります。
是非、ご参考ください。

今回はステータスコードとして、
ロック、アンロック、RDPのみ紹介していますが、他にも何種類かあるので
興味がある方は色々調べてみてください。
面白いステータスがあれば是非、共有いただけると幸いです。


###参考
>[MicroSoft : WTSRegisterSessionNotification](https://docs.microsoft.com/ja-jp/windows/win32/api/wtsapi32/nf-wtsapi32-wtsregistersessionnotification?redirectedfrom=MSDN)

>[pinvoke.net : wtsregistersessionnotification (wtsapi32)](https://www.pinvoke.net/default.aspx/wtsapi32.wtsregistersessionnotification)
transactionにおける例外処理の扱い方

# はじめに
基本的には、以下のスライドを参考にまとめたものになります。
https://speakerdeck.com/jnchito/number-rubykansai-2018-01-13

# 例外とは
例外とは、それ以上プログラムを実行できない状況のこと。また、[Wikipedia](https://ja.wikipedia.org/wiki/%E4%BE%8B%E5%A4%96%E5%87%A6%E7%90%86)によると例外(exception)はシステム担当者が問題解決を行う必要がある。と書かれている。

# 例外処理とは
発生した例外を適切に処理すること。
[Wikipedia](https://ja.wikipedia.org/wiki/%E4%BE%8B%E5%A4%96%E5%87%A6%E7%90%86)によると、
「システムの設計で想定されておらず、ユーザー操作によって解決できない問題に対処するための処理である。例外処理の結果として問題が解決されないとシステム障害になる。」
と書かれている。


# エラーとは
[Wikipedia](https://ja.wikipedia.org/wiki/%E4%BE%8B%E5%A4%96%E5%87%A6%E7%90%86)によると、
「ユーザーが解決すべき問題はエラー(error)と呼ぶ」
と書かれている。


# 例外処理の使い所
これまでに例外とエラーの定義についてみてきた。これらの定義に則ると例外を扱う必要があるのは次のような場合である。

**問題がにユーザーによって解決できない**

具体的には以下のようなケースが考えられる。

* プログラムのミス
* ネットワークエラー
* OSのエラー
* データベースのダウン

などである。

逆に例外処理として扱うべきではないパターンは次のような場合である。

**問題がユーザーによって解決できる**

具体的には以下のようなケースが考えられる。

* 入力フォームによる入力ミス
* 認証、認可が必要な操作へのアクセス

ちなみに例外とエラーについてWikipediaでは業務エラー、システムエラーと区別している。また紹介したスライドでは業務エラーをビジネス例外、システムエラーを技術的例外と呼んでいる。

# transactionでの例外、エラーの扱い
まず、前提知識としてRailsにおけるtransactionの動作について説明する。
Railsでは以下のようにtransactionを定義する。

```ruby
ActiveRecord::Base.transaction do
  record.save!
end
```

このブロック内で何かしらの例外が発生した場合にrollbackが行われるようRailsが処理を行なっている。
では、以下のコードではどうなるか？

```ruby
ActiveRecord::Base.transaction do
  record.save!
  rescue Exception
  false
end
```

ここでは、自ら例外を補足しています。この場合**Railsは自動でrollbackしてくれない！**
なので自分でrollbackさせてあげる処理を書く必要がある。

```ruby
ActiveRecord::Base.transaction do
  record.save!
  rescue Exception
  raise ActiveRecord::Rollback
end
```

詳しくはこちらの記事を参照しました。
[トランザクション中にrescueするとロールバックしないので注意!](https://qiita.com/ytnk531/items/a0db31ee4311425a3933)

以上を踏まえるとRailsにおけるtransaction処理は以下のようにするのがベストプラクティスらしい

```ruby
def save
  success = true
  ActiveRecord::Base.transaction do
    # save
    success &= record1.save
    success &= record2.save
    unless success
      raise ActiveRecord::Rollback
    ned
  end
  success
end
```

ここでは、`save`メソッドを用いてる。`save!`にしない理由としては、`save!`は、バリデーションに失敗した場合でも例外を発生させる。しかし、バリデーションに失敗する原因はほぼユーザーに起因するものである。したがって、業務エラーに区分されるため例外として扱わずただのエラーとして処理を行う。　

# 最後に
もっと一般的な例外の扱い方については以下の記事を参考にすると良い。
https://qiita.com/jnchito/items/3ef95ea144ed15df3637
gitは分散型っていうけど結局集中型でやってるケースの方が多いんじゃないの？

gitの勉強を始めるまでは、
**「gitは分散型だから作業者間でのやりとりができる」**
とかいうのを見て、
gitだとそーいうやり方をするのね・・・それが便利なのね・・・
となんとなく思っていたのですが

実際gitの勉強を始めてみると、結局
**中央に親リポジトリみたいなのを用意してみんなそこにプッシュする運用**
でやるのがスタンダードっぽくないですか？？？

それって、svnと同じじゃん

分散型のメリットって、
**作業者間でのやりとりができる**ところじゃなくて、
履歴も含めてローカルリポジトリに置いておくから、
**通信の発生が少なくて済む**
＋
**もし消えても一か所でも残っていれば復元できる**
の方がメインってことなのかな、と思いました
***
あと、
**ローカルリポジトリがあるから影響を気にせず自由にコミットできる**
ってやつ

svnだってブランチ切っちゃえば同じじゃないですか？？？

私、"ローカルリポジトリ"って響きと、"自由にコミットできる"って言い方から、
てっきり**コミット先がローカルとリモートと2ヶ所あって
いろいろ試した跡はリモートに残さずに済む**のかと思ってました

でも、プッシュしたら結局ぜーんぶみんなに見られちゃうんですよね
それならsvnでブランチ切ってやるのと一緒じゃないかと思うんです

gitはブランチ切るコストが小さい
→TortoiseSVNはハードリンクみたいな仕組み使ってるからかブランチ切るの一瞬だったよ

gitはマージが楽
→TortoiseSVNもマージ情報保持してくれるから自動でマージ範囲出してくれるよ

gitの、**ブランチはポインタ**っていう仕組みは画期的というかすごく自然で、好きになったのだけど、
大幅なメリットがあるかと言われると、まだわからない。。。
Angularインストール/よく使うコマンド

# Angularインストール

```:インストール可能なバージョン表示
$ npm view @angular/cli
```

```:最新版インストール
$ npm install -g @angular/cli
```

```:バージョン指定インストール
$ npm install -g @angular/cli@11.0.0
```

# プロジェクト作成

```:プロジェクト作成
$ ng new [プロジェクト名]
```

# コンポネント作成

```:プロジェクト作成
$ ng g component [コンポーネント名]
```

# サービス作成

```:サービス作成
$ ng g service [サービス名]
```

# モジュール作成

```:モジュール作成
$ ng g module [モジュール名]
```

# アプリ実行

```:アプリ実行
$ ng serve
```
論理和とNull合体演算子の違い

## はじめに
JavaScriptでコード書いているとき、 `null` や `undefinde` と上手く付き合うために以下のような記法をよく使うと思います。

```
&& ... 論理積
|| ... 論理和
hoge?.huga ... オプショナルチェーン
?? ... Null合体演算子
```

このうち `論理和` と `Null合体演算子` の違いを理解せずに使用されているケースをたまに見るため、その違いについて改めて記事として書こうと思いました。そのため、非常に短い記事になります。

## 論理和とNull合体演算子の違い
一言で言うと
**論理和は左の値がfalsyの時、次の右の処理がよばれる**
**Null合体演算子は左の値が null または undefinde の時、次の右の処理がよばれる**
です。
falsyな値とは以下です。([公式](https://developer.mozilla.org/ja/docs/Glossary/Falsy)から引用)

|||
| ---- | ---- |
|  false  |  falseキーワード  |
|  0  |  数値ゼロ  |
|  -0  |  数値マイナスゼロ  |
|  0n  |  BigInt で、論理値として使用された場合、 Number と同じ規則に従う  |
|  ""  |  空文字列の値  |
|  null  |  何も値が存在しないこと  |
|  undefinde  |  プリミティブ値  |
|  NaN  |  非数  |

つまり `論理和` を使用すると
上記テーブルの値以外であれば短絡させます。

```javascript
let toyA; //undefinde
const toyB = toyA || "doll"
// toyB ... "doll"

const count = 0 || 1
// count ... 1

const noNameMan = ""
const friendName = noNameMan || "Sakuragi"
// friendName ... "Sakuragi"
```

これに対し `Null合体演算子` は `null` と `undefind` のみ短絡させます。

```javascript
let toyA; //undefinde
const toyB = toyA ?? "doll"
// toyB ... "doll"

const count = 0 ?? 1
// count ... 0

const noNameMan = ""
const friendName = noNameMan ?? "Sakuragi"
// friendName ... ""
```

この違いを理解して使用しないと思わぬバグを招いてしまうため注意です。

## 終わりに
最後まで読んでいただきありがとうございました。
[Null 合体(??)](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator)
NFSでホームディレクトリが同期されているサーバに対するVScodeのremotessh方法

# 状況

VSCodeはログインユーザのホームディレクトリ配下に`~/.vscode-server`を生成するので、ここがNFSで複数マシン間で同期されていると不具合を起こす場合があります。

# 解決方法
1. サーバにログインして`~/.vscode-server`がもしあれば消します。`fuser`等を駆使してプロセスをkillしないと`device or resource busy`エラーが出て`sudo rm`出来ない場合があります。
1. VSCodeのRemoteSSHで普通に接続します。そうするとサーバに`~/.vscode-server`が新しく生成されるはずです。この状態で通常は問題ないのですが、複数マシン間でこのディレクトリが同期されるゆえに他のサーバに接続できなくなるときがあります。それを防ぐために`~/.vscode-server`を同じサーバ上のNFS同期されていない場所に移動させます。`rsync -a ~/.vscode-server /foo/bar`
1. 最後に`ln -s /foo/bar ~/.vscode-server`でシンボリックリンクを貼っておけば大丈夫です