OmniAICreator/Qiita-1.07M huggingface dataset:
Google Colablatoryでフォルダ移動が突然できなくなってしまった話


# はじめに
書籍などを勉強するときはなるべく写経をするようにしており、環境を用意するのが面倒なのでGoogle Colabratoryを普段から利用しています。

ライブラリなどが簡単にインストールできる＆入っているのでストレスなく書籍が勉強できます。
いつも通りに書籍の勉強をしようとしていて、カレントディレクトリを`drive/MyDrive/Colab Notebooks/`にしようとした際に問題は起きました。

# 問題

いつも通りにカレントディレクトリを`drive/MyDrive/Colab\ Notebooks`に移動しようとしました。

```
!cd  ./drive/MyDrive/Colab\ Notebooks
```

しかし、パスがあっているのにもかかわらずディレクトリが移動しませんでした。

```
!ls

# 結果
/drive sample
```

# 解決方法

無意識に使っていた`!cd`がColabでは利用できませんでした。`!ls`は利用できます。
いつもJupyterでは利用していたため無意識で使っていましたが、考えてみるといままでは`cd`で移動していたことに気づきます。

ここで、`cd`コマンドについてまとめておきます。

|コマンド|利用可否|
|---|---|
|cd|〇|
|%cd|〇|
|!cd|×|

# おわりに
このレベルの記事を出すかは迷いましたが、気づくのに５分以上かかってしまったのでまとめることにしました。

ここでは、`%`と`!`についての違いは載せていませんが、調べるとでてきますので気になった方は調べてみるとよいでしょう
[python] math.floorのオーバーフローで詰まった話

## 概要
以下の問題にて、math.floorの過信から、なかなかACを通せなかったので、その過程をまとめました。
[ABC048 B問題](https://atcoder.jp/contests/abc048/tasks/abc048_b)

## 解き方の経緯
B問題だったので、大体全探索だろうと思い、

- 片っ端から%を用いて余りの判定、aとbの範囲内か判定する

という方法を考えましたが、a, b, xが10^18のオーダーなので、断念。
続いて、

- $a <= x*i <= b$を満たすiを繰り返し処理で探していく

という方法も考えましたが、xの大きさにより、こちらも計算量が膨大になる可能性があるため、断念。
最後に、

- aとbをxで割り、その差によって、条件を満たす個数を出す（累積和的なイメージ）

を考え、両端の処理だけ上手いことやれば、答えが出せということで実装していきました。

## 実装について

やっと**本題**です。何も考えず、両端をmath.floorとmath.ceilを用いて導こうとしていました。


```python
import math

a, b, x = map(int, input().split())

# 条件の範囲の両端をそれぞれ求める
left = math.ceil(a/x)
right = math.floor(b/x)
 
# 条件を満たす数字をrangeの個数で求める
ans = len(range(left, right))
 
# 右端のみ、bがxで割り切れると個数が変わるので、判定
if b % x == 0:
  ans += 1
 
print(ans)

```

しかし、以下の

``` input.txt
1 1000000000000000000 3

```
が
- 333333333333333311
（理想は全て3）となり、途方に暮れました。

ここで、色々と調べてみるとpythonのmath.floor/ceilでは**float型**が用いられており、そのfloat型は**Cのdouble型**を元に実装されていて、10進数だと上限が**15桁**ほどが限界らしい。
[参考にしたpythonのドキュメント](https://docs.python.org/ja/3/library/stdtypes.html#numeric-types-int-float-complex)
[参考にしたCの記事](https://www.cc.kyoto-su.ac.jp/~yamada/programming/float.html)

ところがどっこい、pythonのint型には、上限がないため、精度の高い計算を行う場合は、できる限りint型を使った方が良いらしい。

ということで、math.floorから四則演算の//に変更した実装は以下です。

```python
a, b, x = map(int, input().split())

# 値が切り捨てられている場合のみ、+1をする
left = a // x

if a % x != 0:
  left += 1

right = b // x

ans = len(range(left, right+1))

print(ans)
```

## 結論
math.floor, math.ceilでは15桁くらいでオーバーフローが起きる。
（atcoderでは、これによってWAに…！！）

int型には上限がないため、桁数が多い場合には、通常の四則演算を用いよう！
Dockerの本を読んでみた -4章編-

##前回までのおさらい
読んでいる本はこちら
[Docker/Kubernetes 実践コンテナ開発入門](https://www.techbookrank.com/books/5c043e93f53e80000483916e)
3章まで読み終わったので、今回は4章編となる。
3章編については以下に記載
[Dockerの本を読んでみた -3章編-](https://qiita.com/anoneiro7/items/e9ee64de1ae6af115028)

##章の流れ
これまで学習してきた章の実践として、4章が存在する。
よって、Dockerの基礎なんてもう知ってるよ！っていう方は4章からやるのが良いのかもしれない。
章内の主題としては、「Webアプリケーションを実際に構築してみようー！」というもので、作成フローから順々に説明されている。

##Webアプリケーションの仕様
###そもそも、アプリケーションを作成のフローとは？
一般的に、Webアプリケーションを作成しよう！となった場合のフローとして、
**「企画」→「設計」→「開発」**
が主流となる。

それぞれのフローで具体的にどんなことを行うのかということについて、以下にまとめた。
**「企画」**では、どんな人がいつ使うのかといったターゲット決めを行う
**「設計」**では、サイトマップ、ワイヤーフレームの作成、データベースの設計を行う
**「開発」**では、プログラミング言語などを使って設計した仕組みを作っていく

今回は「企画」部分は省略し、「設計」部分から実践演習として問題が定義されていた。


###アプリケーションの仕様
実践演習として定義されたものは以下となる。
>・TODOを登録・更新・削除できる
・登録されているTODOの一覧を表示できる
・ブラウザから利用できるWebアプリケーションとして構築する
・ブラウザ以外のプラットフォームからでも利用できるように、JSON APIのエンドポイントも作成する

####アーキテクチャ(設計図)
作成するアプリケーションはDocker Swarmを使用し、オーケストレーション機能を持たせる。
また、イメージごとに使用するサービスを分ける方式を取っていた。

|イメージ名|用途|Service名|Stack名|
|---|---|---|----|
|MySQL|データストア|mysql_master,mysql_slave|MySQL|
|API|データストアを操作するAPIサーバ|app_api|Application|
|Web|ビューを生成するアプリケーションサーバ|frontend_web|Frontend|
|Nginx|プロキシサーバ|app_nginx,frontend_nginx|Application Frontend|

####Nginx
アプリケーションのフロントエンドサーバ及びAPIの前段として、Nginxを配置し、リバースプロキシとして動作させる。
Nginxを配置するのはキャッシュ利用、バックエンドの柔軟なルーティングやアクセスログの出力を容易にする為とあった。

####配置戦略
今回作成するTODOアプリも、Swarmクラスタ上でそれぞれのServiceを展開する方式を取る。


###TODOアプリケーションの全体像
作成していくフローとして以下が記載されていた。本の内容を引用する。
>１、データストアとなるMaster/Slave構成のMySQL Serviceの構築
２、MySQLとデータのやり取りをする為のAPI実装
３、ウェブアプリケーションとAPI間にリバースプロキシとなるNginxを通じてアクセエスできるように設定
４、APIを利用してサーバ再度レンダリングをするWebアプリケーションを実装
５、フロント側にリバースプロキシ(Nginx)を置く

##作っていく
###MySQL編
本内では、gitに参考資料が記載されているので、そこから取ってきた上で構築を進める流れとなっている。

###API編
APIのイメージを作成出来るファイルがGitに公開されているので、それを見ながら作業を進めていく感じ。

###Nginx編
API編と同様でしたね。

###Web編
最後に、WebアプリケーションをNode.jsで構築する流れとなっていた。
Node.jsが分からない場合は、以下を参照すると勉強になったので記載する。
[Node.jsとはなにか？なぜみんな使っているのか？](https://qiita.com/non_cal/items/a8fee0b7ad96e67713eb)
この章でも、今までと同様に見本となるgitが公開されているので、作業する環境にgitをcloneして作業する。


###次回の話
5章は以下に記載したので、興味がある方はどうぞ。
[Dockerの本を読んでみた -5章編-](https://qiita.com/anoneiro7/items/0a3efe1bbdcf79c0276b)

##まとめ
WebアプリケーションをDockerでつくってみよう〜ハンズオン章だったと思う。
そもそもWebアプリの構成部分で理解が進んでないと割ときついと思ったので、これ知らんーってなったらその都度調べつつ実施するのが望ましい。


##参考資料
[Ruby on Railsで作る！Webアプリケーションを0から開発するフローとは](https://techacademy.jp/magazine/9084)
MySQL（MariaDB）で複数DBの移行（ダンプ・リストア）

## ■ ダンプ

### ● DBを指定するパターン

- データベース名を複数指定して dump する（データベース名は事前に `show databases;`で取得しておくこと）
- `--routines` ストアドプロシージャ, `--events`  イベント も含める
- `--add-drop-table` で既存テーブルを削除してリストアする情報を含める

```
$ mysqldump --add-drop-table --routines --events --databases aaa bbb ccc > dumps.sql
```

### ● 全DBをdumpするパターン

```
$ mysqldump --add-drop-table --routines --events --all-databases > dumps.sql
```

## ■ リストア

- データベースの作成、選択は、ダンプファイルの中に書かれているのでこれだけでOK

```
$ mysql < dumps.sql
```

## ■ 使用例

ダンプ

```
$ mysqldump -u [username] -h [hostname] -p --add-drop-table --routines --events --databases dbname1 dbname2 dbname3 > dump.20210729.sql
```

リストア

```
$ mysql  -u [username] -h [hostname] -p < dumps.20210729.sql
```
SIGNATEBEGGINERコンペまとめ

##【第12回_Beginner限定コンペ】従業員の離職予測
###はじめに
・本記事では2021年7月に開催されたSIGNATE Beginnerコンペに関して、どのようなタスク処理をしたかをまとめた記事となっている。
・まとめの意義としては、自分自身の学習の為である。後学の為に、自分が行った処理やモデルの実装を残しておくこととする。

####1.タスクと評価指標の分析
タスク：二値分類→従業員が離職するか否か
テーブルデータ：1200/36カラム
評価指数：Accuracy(正答率）とerror rate

評価指数の話をする前に`混合行列(confusion matrix)`に触れる。
混合行列は評価指数ではないが、正例であるかを予測値とする評価指標でよく利用される。
予測が、正しいか誤りかによって以下の4つに分類される。
1.**TP（True Positve、真陽性）**：予測値を正例として、その予測が正しい場合
2.**TB（True Negative、真陰性）**：予測値を負例として、その予測が正しい場合
3.**FP（False Positve、偽陽性）**：予測値を正例として、その予測が誤りの場合
4.**FN（False Negatibe、偽陰性）**：予測値を負例として、その予測が誤りの場合

Accuracyは予測が正しい割合、error rateは誤っている割合を表す指標。
正解のレコード数を全てのレコード数で割ることで求められる。

$$Accuracy=\frac{TP+TN}{TP+FP+FN+TN}$$
$$erro rate = 1 - accuracy$$

#####2.データの前処理と特徴量の作成
今回扱ったデータの中には欠損値が含まれていなかった為、
aws_synthetics_canaryのterraformを扱っているときに「minimum field size of 1」などと出る


## 参考
https://github.dihe.moe/hashicorp/terraform-provider-aws/issues/18636#issuecomment-829884821

## エラー
```
InvalidParameter: 1 validation error(s) found.
│ - minimum field size of 1, GetCanaryInput.Name.
```

## コード
```tf
resource "aws_synthetics_canary" "canary" {
  name                 = "${var.product}-${var.env}-canary"
  artifact_s3_location = "s3://vamdecmi-canary/"
  execution_role_arn   = aws_iam_role.iam_for_canary.arn
  handler              = "pageLoadBlueprint.handler"
  zip_file             = var.zip_file
  runtime_version      = "syn-nodejs-puppeteer-3.1"

  schedule {
    expression = "rate(5 minute)"
  }
}
```

## 対処方法
- 0分のときは単数系(minite)
- 1分以上のときは複数形（minites）

```
  schedule {
    expression = "rate(5 minutes)"
  }
```

罠。。。
Lazada、Alibaba Cloud CDNでASEANのW11（独身の日）対応を拡大

*アリババクラウドビデオクラウドチーム*

東南アジア最大のEコマース企業であるLazadaは、「2018 W11(独身の日) ショッピングフェスティバル」において、2,000万人以上の消費者がLazadaのウェブサイトやアプリを閲覧し、買い物をしたことを報告しました。

Lazadaは東南アジア最大のB2Cプラットフォームで、インドネシア、マレーシア、フィリピン、シンガポール、タイ、ベトナムの東南アジア6カ国をカバーし、約6億人の消費者にサービスを提供しています。W11（独身の日）の期間中、Alibaba Cloudのライブブロードキャストソリューションにより、LazadaはW11 Galaをタイとマレーシアにストリーミング配信し、より多くの東南アジアの人々に向けて放送を拡大しました。

##東南アジアにおけるコンテンツ配信の高速化

Alibaba Cloud CDNは、2014年からお客様に正式にサービスを提供しています。合計1500以上のノードと300以上の海外ノードを持ち、北欧、北米、東アジア、東南アジアの70以上の国と地域をカバーしています。その事業内容は、映像、金融、電子商取引をカバーしており、全世界の総帯域幅は120Tbpsを超え、国内外のユーザーのニーズに応えています。

Alibaba Cloudはその強力なインフラにより、モバイルアプリ、ウェブ、ダイナミクス、ストリーミング、セキュリティ、エンドツーエンドのネットワークアクセラレーションなど、世界トップクラスのCDN製品を構築しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647921/322a0ac7-24e0-5084-8692-796800eb2673.png)
LazadaのW11において、CDNは、トラフィックの急激な増加によるソースサイトへのアクセス時の過剰なアクセス、接続不良、重いレイテンシーなどの問題を解決しました。その結果、ウェブサイトとアプリの両方でデータ転送の安定性とアクセス効率が改善され、ユーザーのスムーズなインタラクションと良好なショッピング体験が確保されました。

##低遅延E2Eライブストリーミングソリューション
Alibabaが毎年開催している W11（独身の日)ショッピングフェスティバルは、単なるオンラインショッピングではなく、今やお祭りのような扱いになっています。W11 Galaでは、Alibaba Cloudが持つグローバルなインフラと長年培ってきたライブ放送技術を組み合わせて、ライブ放送ソリューションを形成しました。W11 Galaは、最も近いL1エッジノードにストリーミングされ、L2ノードのアップリンクで加速された後、シンガポールのライブセンターに到着し、トランスコード、スライス、録画などの処理が行われました。再生クライアントは、最も近いL1エッジノードからビデオストリームを取得します。L1にビデオストリームが存在しない場合は、L2ノードからストリームを取得します。L2にストリームがない場合は、センターからストリームを取得します。CDNは、リンク全体のネットワークジッターを監視し、スマートな自動スケジューリングによって、タイとマレーシアにおける低レイテンシーで安定したスムーズなライブ放送体験を保証することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647921/4e96b6a9-c87e-3a06-04e3-91cabc30a9d3.png)
現在、Alibaba Cloud CDNは、年間110EBデータ以上を数十億のインターネットデバイスに配信しており、競争の激しいビジネス環境において、お客様のデジタル体験の継続的な向上に貢献しています。

*本ブログは英語版からの翻訳です。オリジナルは[こちら](https://www.alibabacloud.com/blog/594205?spm=a2c5t.11065265.1996646101.searchclickresult.1b42439a7u5Cn8)からご確認いただけます。一部機械翻訳を使用しております。翻訳の間違いがありましたら、ご指摘いただけると幸いです。*


*アリババクラウドは日本に２つのデータセンターを有し、世界で60を超えるアベラビリティーゾーンを有するアジア太平洋地域No.1(2019ガートナー)のクラウドインフラ事業者です。
アリババクラウドの詳細は、こちらからご覧ください。
[アリババクラウドジャパン公式ページ](https://www.alibabacloud.com/ja)*
【FileMaker】限りある文字フィールドでなんとなくうまく納める - 条件付き書式編

[前回](https://qiita.com/tyuma/items/c064e642f21cbf1239fd)に引き続き、第2弾です。
前回は計算フィールドに設定した文字フィールドに収めるための文字サイズコントロールでしたが、今回は、レイアウトで指定する文字サイズコントロールです。

みんな大好き（？）、条件付き書式です。
条件付き書式は、そのレイアウトに配置したオブジェクトに限るので、前回のようなどこでも同じ設定、というわけではありませんが、こちらの条件付き書式の方がみなさんよく使っていると思います。

# 条件付き書式の設定方法

![スクリーンショット 2021-07-29 17.07.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/f4ac14b8-80a9-6c56-1237-a95787ffcc74.png)

条件付き書式のウインドウの中で、「その他の書式...」にサイズの他にもスタイルなどの指定ができますので、計算式で対応しきれなかったりレイアウト固有で色々表示をコントロールしたい場合は、条件付き書式もぜひ活用してみてください。

# 使い分けは？
私は、複数のレイアウトで似たようなフォーマットの時は前回の計算フィールドを活用、レイアウト固有でここしか使わない、というときには条件付き書式、という感じでゆるく使い分けています。
書式の設定がテーブル設計とレイアウト設計に分かれてしまうのは仕方ないですが、複数レイアウトで同じ設定を何度も繰り返すのは時間がかかるしミスもしがちなので、どちらがメンテナンス的に楽かな、と考えて実装しています。

（とはいえ、修正する時は漏れがないかなどガッツリ見直さなければなりませんが、、、）

# 計算式で設定する際のスタイル
この条件付き書式で設定できる書式は、「塗りつぶし色」以外は計算式でも設定できます。
Claris FileMakerのヘルプでは、[書式関連のヘルプ](https://help.claris.com/ja/pro-help/content/text-formatting-functions.html)がまとまって確認できます。
![スクリーンショット 2021-07-29 17.39.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/2328c5bf-3fda-149d-8246-672b8e42db29.png)

試してみてください。
【GCP】Firestore 調査メモ

Firestore について 調べた内容を随時追記します。
該当箇所のリファレンスを貼り付ける形式にします。（時間節約＆信憑性確保のため）

## Firestore とは
クラウドベースの NoSQL データベース。
>Cloud Firestore は、クラウドホストの NoSQL データベースであり、iOS アプリ、Android アプリ、およびウェブアプリからネイティブ SDK を介して直接アクセスできます。
https://firebase.google.com/docs/firestore?hl=ja

Firestore は、Firebase が提供する2種あるデータベースの内の1つ。
>Firebase は、クライアント アクセスやリアルタイムのデータ同期が可能な 2 つのクラウドベースのデータベース ソリューションを提供します。
・ Cloud Firestore は、Firebase のモバイルアプリ開発用の最新データベースです。直感的な新しいデータモデルでRealtime Database をさらに強化しています。Cloud Firestore は、Realtime Database よりも多彩で高速なクエリと高性能なスケーリングが特長です。
・ Realtime Database は従来からある Firebase のデータベースです。リアルタイムのクライアント間同期が必要なモバイルアプリのための、効率的でレイテンシが低いソリューションです。
https://firebase.google.com/docs/firestore/rtdb-vs-firestore?hl=ja

## 主な特長
こちらより重要っぽい機能をピックアップして記載する。

https://firebase.google.com/docs/firestore?hl=ja

### 柔軟性
階層構造を持つデータモデル。
コレクション -> ドキュメント -> データ
>Cloud Firestore データモデルは、柔軟な階層型データ構造に対応しています。データはドキュメントに格納され、ドキュメントはコレクションにまとめられます。ドキュメントには、サブコレクションの他に複雑なネスト オブジェクトを含めることができます。

ネスト構造による拡張もできる。
>ドキュメント内にサブコレクションを作成し、データベースの拡大に合わせて拡張できる階層型データ構造を構築できます。

### 高機能なクエリ処理
>Cloud Firestore では、個別のドキュメントを取得する場合や、クエリ パラメータに一致するすべてのドキュメントをコレクションで取得する場合に、クエリを使用できます。クエリには複数の連鎖フィルタを使用でき、またフィルタ処理と並べ替え処理を組み合わせることができます。デフォルトではクエリにはインデックスが付いているので、クエリのパフォーマンスは、データセットではなく結果セットのサイズに比例します。

### スケーラビリティのある設計
>Cloud Firestore は、Google Cloud の強力なインフラストラクチャの優れた機能（自動マルチリージョン データ複製、強整合性の保証、アトミックなバッチ オペレーション、リアル トランザクション サポート）を提供します。Cloud Firestore は、世界でも最大規模のアプリからの最も過酷なワークロードに対応できるように設計されています。

## データモデル

https://firebase.google.com/docs/firestore/data-model?hl=ja

ドキュメント内のデータはキーバリューのペアで格納される。
>各「ドキュメント」には、一連のキーと値のペアが含まれています。Cloud Firestore は、小型のドキュメントの大きなコレクションを格納するために最適化されています。

## ベストプラクティス

https://firebase.google.com/docs/firestore/best-practices?hl=ja

### データベースのロケーション
コンピューティングリソースと同じロケーションに設置してホップを少なくする。
>データベース インスタンスを作成するときは、ユーザーとコンピューティング リソースに最も近いデータベースのロケーションを選択してください。広範囲に及ぶネットワーク ホップはエラーが発生しやすく、クエリのレイテンシを増加させます。

### 同一ドキュメントに対する更新
>ドキュメントの書き込み上限は 1 秒あたり 1 回、同時接続数の上限はデータベースあたり 1,000,000 件であることに注意してください。これらの上限はソフトリミットであり、Cloud Firestore によって超過が制限されるものではありません。ただし、これらの上限を超えると、全体的な読み取りと書き込みのレートによっては、パフォーマンスに影響することがあります。

>同じドキュメントを 1 秒間に何度も更新しないでください。ドキュメントを頻繁に更新しすぎると、アプリケーションで競合が発生します。レイテンシの増加やタイムアウト、その他のエラーなども発生します。


## データの管理
### トランザクションの失敗
> トランザクションが失敗するとエラーが返され、データベースには何も書き込まれません。トランザクションをロールバックする必要はありません。ロールバックは Firestore により自動的に実行されます。
https://cloud.google.com/firestore/docs/manage-data/transactions?hl=ja#transaction_failure
[Swift]構造体のメンバーごとの初期化子(initializer)はいつ使用できるのか。

※この記事は[Swift by Sundell](https://www.swiftbysundell.com/tips/when-can-memberwise-initializers-be-used/)の内容を日本語に翻訳したものです。

Swiftでは、構造体として定義された型は、コンパイラーによって合成されたデフォルトの初期化子（いわゆる「メンバーごとの初期化子」）を自動的に取得します。これは、コンパイラーが指定された構造体のメンバー（つまり、その格納されたプロパティ）に基づいて生成するためです。

たとえば、 `name`プロパティと` preferences`プロパティを持つ `User`構造体を定義した場合、メンバーごとの初期化を使用して、これら2つのプロパティの値を渡すだけでインスタンスを作成できます。

```.swift
struct User {
    var name: String
    var preferences: Preferences
}

let user = User(name: "John", preferences: Preferences())
```

一方、計算されたプロパティは、コンパイラがメンバーごとの初期化子を合成するときに完全に無視されます。したがって、初期化子を追加しても、以前と同じように上記の初期化子を使用し続けることができます。

```.swift
struct User {
    var name: String
    var preferences: Preferences
    var icon: Icon { .user }
}

let user = User(name: "John", preferences: Preferences())
```

Swift 5.1以降、メンバーごとの初期化子はデフォルトのプロパティ値も考慮に入れます。つまり、`preferences`プロパティにデフォルト値を指定すると、`name`を渡すだけで`User`インスタンスを作成できるようになります。

```.swift
struct User {
    var name: String
    var preferences = Preferences()
}

let user = User(name: "John")
```

クールな点の1つは、型に`private`プロパティがある場合でも、それらのプロパティに次のようなデフォルト値がある限り、型のメンバーごとの初期化子を使用し続けることができることです。

```.swift
struct User {
    var name: String
    private var preferences = Preferences()
}

let user = User(name: "John")
```

ただし、`private`プロパティにデフォルト値がない場合は、そのタイプのイニシャライザを手動で作成する必要があります。これにより、そのプロパティの値を外部から挿入できるようになります。

```.swift
struct User {
    var name: String
    private var preferences: Preferences

    init(name: String, preferences: Preferences = .init()) {
        self.name = name
        self.preferences = preferences
    }
}

let user = User(name: "John")

// ↓でもOK
let user = User.init(name: "John")
```

ただし、メンバーごとのイニシャライザーのアクセスレベルが`internal`より高くなることはありません。つまり、タイプが定義されているモジュール内でのみ内部的に使用できます。

これは最初は奇妙な制限のように思えるかもしれませんが、データの内部構造に縛られることなく、常にパブリック消費用の明示的なAPIを設計する必要があるため、メリットがあります。

したがって、要約すると、次の場合に構造体のメンバーごとの初期化子を使用できます。

- そのすべてのメンバーが表示されるか、デフォルト値がある場合。
- 構造体が定義されているのと同じモジュール内にインスタンスを作成している場合。

他のすべてのケースでは、少なくとも今のところ、初期化子を手動で実装する必要があります。

### 元の記事

[When can a struct’s memberwise initializer be used?](https://www.swiftbysundell.com/tips/when-can-memberwise-initializers-be-used/) Swift by Sundell
Dockerコンテナをgrepやjqでパイプラインさせる

dockerコンテナにつなげている場合、コンテナから出てくるログに対してパイプをつなげたいということが度々生じるが、実現するのにかなり苦労したので、備忘録として残しておく

## grepでパイプラインさせる

コンテナログから最新のログを出し、垂れ流したい場合はこのようにします。`-f`のみだと全部出てくるため、`--tail`オプションも併用しています。

※ 出力したいコンテナ名を`container_name`としています。

``` shell
docker logs container_name -f --tail 1
```

これを`grep`でパイプラインさせる場合は、以下のことに注意する必要があります。

* docker logsのログは`STDOUT`および`STDERR`双方に出力されることがあるため、`|&`でパイプラインさせる
* `grep`では出力がバッファされてしまうので、`--line-buffered`オプションもつけてバッファさせないようにしておく（ここでさんざんハマりました）

したがって、このようにすれば`grep`でパイプラインできるようになります。

``` shell
docker logs container_name -f --tail 1 |& grep --line-buffered [ここに絞り込みたい条件を記載]
```

## さらにjqでパイプラインさせる

docker logsの結果にjsonで流し込んでいる場合は、jqでパイプラインさせたいときがあります。

その場合は、以下のことに注意する必要があります。

* jsonの部分を取り出したいので、grepで抽出させる。もちろんバッファされないようにするため、`--line-buffered`も併用しておく
* その結果をjqに入れるが、バッファさせないようにするため`--unbuffered`オプションをつけておく

したがって、このようにすれば`jq`でパイプラインできるようになります。

``` shell
docker logs container_name -f --tail 1 |& grep --line-buffered -io '{.*}' | jq --unbuffered  '.'
```
CSS変数でbackground-imageを指定するとChromeとSafariで挙動が異なるのを解決する

# Chrome と Safari で挙動が違う

CSS変数で background-image を指定したら Chrome と Safari で挙動が違ったので備忘録として残しておきます。

## 失敗した実装

下記のようにCSS変数を使って指定します。
`https://xxx.xxx/test/` という URL で想定しています。

動作サンプル
https://sygnas.github.io/cssvar-sample/

```html:/test/index.html
<link rel="stylesheet" href="./css/hoge.css">
<div class="imgbox" style="--img:url('../img/foo.jpg')"></div>
```
```css:/test/css/hoge.css
.imgbox{
  background-image: var(--img);
}
```

## 結果

Chrome は表示されるが、Safari は表示されない。

## 問題点

相対パスで画像を指定した時、下記のような違いがあるようです。

### Chrome : OK : CSSファイルを起点とした相対パスとして処理
`https://xxx.xxx/test/css/hoge.css` を起点とした `../img/foo.jpg`
→ `https://xxx.xxx/test/img/foo.jpg`

###Safari : NG : 表示URLを起点として処理
`https://xxx.xxx/test/` を起点とした `../img/foo.jpg`
→ `https://xxx.xxx/img/foo.jpg`

## 解決策① 絶対パス

**絶対パスで指定する。**
一番簡単な解決方法です。

```html:/test/index.html
<div class="imgbox" style="--img:url('/test/img/foo.jpg')"></div>
```

しかし相対パスしか使えないパターンもあるので今回は別の方法を模索します。

## 解決策② HTML 側に CSS を記述

HTML 側に記述すれば Chrome、Safari どちらも問題ありません。

Vue や React ではコンポーネント内に CSS を書くことが多いのでこちらの方法もアリですね。
変則的ですが `background-image` の部分だけ HTML 側に書くという方法もあります。


```html:/test/index.html
<link rel="stylesheet" href="./css/hoge.css">
<style>
.imgbox{
  background-image: var(--img);
}
</style>
<div class="imgbox" style="--img:url('./img/foo.jpg')"></div>
```
```css:/test/css/hoge.css
.imgbox{
  /* background-position とか他の部分はここに書く */
  background-size: contain;
  background-position: center center;
  /* background-image: var(--img); */
}
```

# おわり

CSS の挙動については Safari が IE のような立ち位置になりつつあり困りますね……。
CSSだけで画像をトリミングする方法


画像を一覧で表示する際、画像によってサイズが異なる場合に統一して見やすくする方法。

#画像を中央の位置でトリミング

```css
.image { 
object-fit: cover;
}
```

を追加することで中央できれいにトリミング可能。

#画像を任意の位置でトリミングする

中央以外の位置でトリミングしたい時は object-position プロパティーを設定。
左上を基準にして、object-position: 横の位置と縦の位置を記述する

#トリミングせずに余白を表示する
object-fit: cover; を指定していたところを object-fit: contain; に変更するのみ。
全方位木dpをpythonで


##全方位木dpとは
ある頂点についての何かしらの通り数はDFSによる木dpで$O(N)$で計算できるとき、その通り数を全頂点について求めるdpです。
愚直にDFSすると当然$O(N^2)$となりますが、**1つの頂点に対する**DFSの結果を再利用することにより、$O(N)$の計算量を達成します。

全方位木dpのアルゴリズム自体の解説はわかりやすいものが大量にネットに転がっているのでここでは割愛させていただきます。（説明能力の欠如）

概念は理解できたものの自力で実装ができず、他の方々のコードを読んでも全く理解できずにドはまりしたので、コメント多めのものを以下に記載します。

解いた問題は↓です。
[Educational DP Contest / DP まとめコンテスト V - Subtree](https://atcoder.jp/contests/dp/tasks/dp_v)

用いている関数とその用途は以下の通りです。
・dfs1 : 頂点0を根とする木dp(各辺について1度ずつdp計算。ここで調べた方向を順方向とします)
・dfs2 : 順方向と逆方向の木dp

dfs1ではdp1を、dfs2ではdp2を更新していきますが、重要なのは「dp1[cu]はcuを黒く塗る通り数を、dp2[cu]は**cuの1つ前の頂点**を黒く塗る通り数を表している」ということです。

これを理解するために相当の時間を溶かしました。

```python
import sys
sys.setrecursionlimit(10**6)

N,M=map(int,input().split())
xy=[[int(i) for i in input().split()] for _ in range(N-1)]

G=[[] for _ in range(N)]
for x,y in xy:
    x-=1; y-=1
    G[x].append(y)
    G[y].append(x)

#順方向のdp
#dp1[cu] : 順方向でcuを黒く塗る通り数
dp1=[1]*N
def dfs1(cu, p=-1):
    for to in G[cu]:
        if to==p: continue
        dfs1(to,cu)
        dp1[cu]*=dp1[to]+1
        dp1[cu]%=M

ans=[-1]*N

#逆方向のdp
#dp2[cu] : 逆方向で「cuの1つ前の頂点」を黒く塗る通り数
dp2=[1]*N
def dfs2(cu, p=-1):

    #dp1の左右からの累積配列を計算
    acc_l=[1]*len(G[cu])
    acc_r=[1]*len(G[cu])
    for i in range(len(G[cu])):
        to = G[cu][i]
        if i-1>=0:
            acc_l[i]=acc_l[i-1]
        if to==p:
            continue
        acc_l[i]*=dp1[to]+1
        acc_l[i]%=M
    for i in range(len(G[cu])-1, -1, -1):
        to = G[cu][i]
        if i+1<len(G[cu]):
            acc_r[i]=acc_r[i+1]
        if to==p:
            continue
        acc_r[i]*=dp1[to]+1
        acc_r[i]%=M
    
    #逆方向のdp
    for i in range(len(G[cu])):
        to = G[cu][i]
        if to==p:
            continue
        tmp=1
        if i-1>=0:
            tmp*=acc_l[i-1]
            tmp%=M
        if i+1<len(G[cu]):
            tmp*=acc_r[i+1]
            tmp%=M
        dp2[to]=(dp2[cu]*tmp+1)%M
        dfs2(to,cu)
    
    #ans[cu]=(p以外からのdp1)*(p(=cuの1つ前の頂点)からのdp2)
    ans[cu]=1
    if len(acc_r):
        ans[cu]=acc_r[0]
    if p>-1:
        ans[cu]*=dp2[cu]
        ans[cu]%=M

dfs1(0)
dfs2(0)
for a in ans:
    print(a)
```
PHP-JWTで発生した Cannot handle token prior to [time stamp] エラーの解決

## 事象
Laravel + PHP-JWT + CognitoでユーザーをJWT検証で認証するWebアプリにて、
ある日突然ローカルでのみJWT検証でエラーが発生する事象が発生しました。

#### 環境
- Laravel 6 + nginx + AWS Cognito
- Jwt検証用ライブラリ： Firebase/PHP-JWT　(https://github.com/firebase/php-jwt)

#### エラー内容

```
Firebase\JWT\BeforeValidException: Cannot handle token prior to [time stamp]

(Google訳: [タイムスタンプ]より前のトークンを処理できません)
```

## 原因
JWTを発行するサーバー(Cognito)と検証側サーバー(ローカルサーバ)側で**時刻が一致しない場合**に起きるようです(下記Github issue参照)。

##対処法
`$leeway`変数を再定義してサーバー時刻ずれを秒単位で許容することで回避できるそうです(defalutは0)。

ドキュメントによると数分以上の設定は非推奨とのことです。公式のサンプルでは1分に設定されていますが、今回は5秒に設定しました。
再発した場合はさらに許容時間を増やそうと思います。

```php
use Firebase\JWT\JWT;

class JWTSampleClass
{
    public static $leeway = 5; //5秒の時刻ズレの誤差を許容
    
  //
}
```


## 参考
https://github.com/firebase/php-jwt/issues/51
[Rails→Vue]一対多の関係にある親子オブジェクトをネストさせた状態で取得する

[[Vue→Rails]ネストされた状態の親子孫オブジェクト（一対多の関係あり）を全て同時にデータベースに保存する](https://qiita.com/saitaman_zarathustra/items/dec7e1c2bb64ed57ccc4)では、Vue側で作ったネストされたデータを複数のテーブルに保存した。
この記事では、別々のテーブルに保存されたそれらのデータを再びネストされた形でVueコンポーネント側で取得する。


# 前提条件
#### モデル
親：School
子：Student

```school.rb
# 親
class School
 has_many :students
```
```student.rb
# 子
class Student
 belongs_to :school
```
#### 保存されているレコード
```
School
{ id: 1, school_name: 'first' }
{ id: 2, school_name: 'second'}

Student
{ id: 1, student_name: 'Suzuki', age: 13, school_id: 1 }
{ id: 2, student_name: 'Hirano', age: 14, school_id: 1 }
{ id: 3, student_name: 'Nagai',  age: 15, school_id: 1 }
{ id: 4, student_name: 'Sato',   age: 13, school_id: 2 }
{ id: 5, student_name: 'Iguchi', age: 14, school_id: 2 }
{ id: 6, student_name: 'Arai',   age: 15, school_id: 2 }
```

# axios.getによるデータの取得
$axiosはインスタンスプロパティに追加済み
schools#indexにgetリクエストを送りデータを取得する

```vue
<script>
...
  this.$axios.get('schools')
  .then(res => {
    console.log(res)
  })
  .catch(err => {
    console.log(err)
  })
...
</script>
```
# コントローラ
#### to_jsonメソッドの使用
**includeオプション**でstudentsを指定する。```school.students```で取得されるstudentの配列をschoolにネストさせることができる。

```schools_controller.rb
  def index
    schools = School.all
    string = schools.map.to_json(include: :students)

    render json: string
  end
```

# 取得できるデータ
to_jsonのincludeオプションで指定した'students'がそのままキー名になる。

```javascript
data: [
   {
      schoolName: 'first',
      students: [  // studentsがそのままキー名になる
         { studentName: 'Suzuki', age: 13 },
         { studentName: 'Hirano', age: 14 },
         { studentName: 'Nagai',  age: 15 }
      ]
   },
   {
      schoolName: 'second',
      students: [
        { studentName: 'Sato',   age: 13 },
        { studentName: 'Iguchi', age: 14 },
        { studentName: 'Arai',   age: 15 }
      ]
   }
]
```

# 【追記】 キー名を変えたいとき
students以外のキー名にしたいとき（例：studentDataなど）
※キャメルケースの場合、一応Rubocopから怒られます

#### モデル
アソシエーションを取得するメソッドを親側に新しく定義し、目的のキー名をメソッド名にする。

```school.rb
class School < ApplicationRecord
  has_many :students

  def studentData # 目的のキー名
    self.students
  end
end
```
#### コントローラ
to_jsonメソッドの**methodsオプション**でそのメソッド名を指定する。
メソッド名がそのままキー名になる。

```schools_controller.rb
  def index
    schools = School.all
    string = schools.map.to_json(methods: :studentData)

    render json: string
  end
```
#### 取得できるデータ
```javascript
data: [
   {
      schoolName: 'first',
      studentData: [ // studentDataがそのままキー名になる
         { studentName: 'Suzuki', age: 13 },
         { studentName: 'Hirano', age: 14 },
         { studentName: 'Nagai',  age: 15 }
      ]
   },
   {
      schoolName: 'second',
      studentData: [
        { studentName: 'Sato',   age: 13 },
        { studentName: 'Iguchi', age: 14 },
        { studentName: 'Arai',   age: 15 }
      ]
   }
]
```


# 参考文献
https://qiita.com/eggc/items/29a3c9a41d77227fb10a
RDSのスキーマがいじれなくて困った話

AWSでAuroraのデータベースを構築しました。

スキーマの設計をいじろうとコマンドを実行してみる。
（あ、qiita超初心者でしたがコードの挿入ができるようになりました！ヤッター）

```ruby:qiita.rb
REVOKE ALL ON schema public FROM public;
```
そして出てくるエラーがこれ。

```ruby:qiita.rb
ERROR:  cannot execute REVOKE in a read-only transaction
```
多分だけど『このトランザクションは読み取り専用だからREVOKEってコマンドは実行できない』
みたいなことを言っている。気がする。

困っていたら同期の子が解決法を教えてくれました！

postgresにアクセスするときに使うこのコマンドにトリックがあったらしい。

```ruby:qiita.rb
psql -h <エンドポイント> -U <ユーザー名> -d postgres
```
<dl>
  <dt>ここの！<エンドポイント>！</dt>

AWSでデータベース作成したときにエンドポイントが2つあったんですね。
で、いつもはそれのリーダーインスタンスを使ってたんですね。(写真上。roが付いてる)
だけど書き込みがしたいからライターインスタンスを使ってみたらできたっていうもんですから私も試してみました！
![エンドポイント.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1780205/f07d5d85-839e-abf3-e394-f09111cc25d0.png)

そしたらなんと書き込みができました！

```ruby:qiita.rb
postgres=> REVOKE ALL ON schema public FROM public;
REVOKE
```
REVOKE・・・なんか好きな英語になりました:blush:
SSH設定が原因でFilezillaでSFTP接続ができない。

久々のQiita記事投稿です。

最近AWSの書籍[^1]でネットワークの基礎を勉強しつつAWSのサービスを触っています。
AWS自体というわけではなく、SSH設定周りでつまづきました。


## 環境
macOS 11.5

## FilezillaのSSH設定
サーバー(EC2インスタンス)へSFTPで接続する際のSSHの設定。事前にFilezillaの設定>SFTPで秘密鍵(my-key.pem)を指定しておきます。そしていざ接続を試みますが、エラーがでて接続できない。

```
エラー:      	FATAL ERROR: No supported authentication methods available (server sent: publickey,gssapi-keyex,gssapi-with-mic)
エラー:      	サーバーに接続できません
```

## 原因
秘密鍵の指定パスに日本語が入っていたため。

## 後書き

Filezillaは仕事でもサーバーのファイル操作関連で使用していましたが、そもそもの基礎部分を知らずにつかっていたなぁと実感しました。
本書[^1]ではそもそものSSHやポート、IPアドレスなどのネットワークの基礎知識が初心者でも理解できるよう丁寧に説明されており、なかなか楽しみながら進められています。


[^1]: [Amazon Web Services 基礎からのネットワーク＆サーバー構築　改訂3版 Kindle版](https://www.amazon.co.jp/Amazon-Web-Services-%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E3%81%AE%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF%EF%BC%86%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E6%A7%8B%E7%AF%89-%E6%94%B9%E8%A8%823%E7%89%88-%E5%A4%A7%E6%BE%A4-ebook/dp/B084QQ7TCF/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=Amazon+Web+Services+%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E3%81%AE%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF%EF%BC%86%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E6%A7%8B%E7%AF%89&qid=1627540335&sr=8-1)
マイグレーションをロールバックエラーの対処

実行したマイグレーションをロールバックする際に、
NOFILEが存在しエラーが起きてしまう対処法。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1307773/f8f822a8-8398-0eb8-b189-26ced59cce5f.png)

下記手順で1度DBを吹き飛ばして、再度実行する

```console
bundle exec rake db:drop
bundle exec rake db:create
bundle exec rake db:migrate
bundle exec rake db:migrate:status
```
【備忘録】Trail:ユーザー向けのSalesforce組織の準備

#Home Pageの作成
Lightning BuilderからHome Pageを作製した。
Salsforceでは、所定の位置に追加したい機能をドラッグするだけでその会社に合ったHome Pageを作製できるということを知れた。
#取引先の一覧を表示
アプリケーションランチャー アプリケーションランチャーアイコン の [Sales (セールス)] を選択し、
[Accounts (取引先)] タブをクリックすると、取引先一覧を参照することができる。
このとき、参照したい産業等の条件を設定することにより、自分が担当する企業様の
電話番号等をリスト形式でまとめることができることを知った。
#Chatterグループの活用
公開やプライベートとしてchatterグループを作成することにより、情報をいち早く交換することができる。
社内SNS等としての活用が見込まれる。
【Drupal】フォームフィールドをカスタムしたい時のフック関数

例えば、カスタムしたいフィールドを含むコンテンツタイプのシステム内部名称が「hoge_content_type」、
カスタムしたいフィールドのシステム内部名称が「field_fuga_date」とする。
またfield_fuga_dateのフィールドは日付型でyyyy/mm/ddからyyyy/mmの形式に変更したいとする。


##### yyyy/mm形式のフィールド
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308799/6245e3fb-1fee-097f-8ca9-0707e77b9ee8.png)

#### 通常のフィールドの時
```php
<?php

use Drupal\Core\Form\FormStateInterface;

/**
 * Implements hook_form_alter().
 */
function MY_MODULE_form_alter(&$form, FormStateInterface $form_state, $form_id) {
  if ($form_id == 'node_hoge_content_type_edit_form') {
    $form['field_fuga_date']['widget'][0]['value']['#date_date_element'] = 'month';
    $form['field_fuga_date']['widget'][0]['value']['#date_date_format'] = 'Y-m';
  }
}
```
$form_idの値は、念の為kint関数を用いるかしてコンテンツ登録画面にアクセスし正しい値を確認した方が良い。

#### Paragraph内のフィールドの時

```php
 /**
  * Implements hook_field_widget_WIDGET_TYPE_form_alter().
  */
 function MY_MODULE_field_widget_entity_reference_paragraphs_form_alter(&$element, &$form_state, $context) {
   if ($element['#paragraph_type'] == '＜パラグラフのシステム内部名称＞') {
     // yyyy/mmの形式にする
     $element['subform']['field_fuga_date']['widget'][0]['value']['#date_timezone'] = 'Asia/Tokyo';
     $element['subform']['field_fuga_date']['widget'][0]['value']['#date_date_element'] = 'month';
     $element['subform']['field_fuga_date']['widget'][0]['value']['#date_date_format'] = 'Y-m';
   }
 }
```
[Java] テストコードでprivateメソッドのException発生をテストする方法

## 環境
- Java 1.8.0_282
- Spring Boot 2.4.9

## 概要
Spring Bootのテストコードで、privateメソッドのException発生をテストしたところ、全て`InvocationTargetException`となってしまうので、その対策方法について調べた。

## テスト対象のクラス
以下のメソッドでは引数にListが渡され最初の要素を取得しているが、もし空のListが渡された場合、存在しない要素を取得しようとすることになるので、`ArrayIndexOutOfBoundsException`が発生することを期待する。

```java:テスト対象のクラス
public class SampleService {
    // Listの最初の要素を取得する
    private Long samplePrivateMethod(List<Long> array) throws ArrayIndexOutOfBoundsException {
        return array.get(0);
    }
}
```

## テストコード
前述の通り、`ArrayIndexOutOfBoundsException`が発生するかをテストしたい。しかしprivateメソッドをテストする場合、`assertThrows`でチェックすると`InvocationTargetException`を拾ってしまう。

そのため、まずassertThrowsで`InvocationTargetException`が発生することをチェックし、その戻り値の中に`ArrayIndexOutOfBoundsException`があるかどうかをチェックするという方法を取る。


```java:テストコード
@ExtendWith(MockitoExtension.class)
public class SampleServiceTest {

    private SampleService sampleService;

    @Test
    public void sampleTest() throws Exception {
        // テスト対象のクラスとprivateメソッドと引数の型（List.class）
        Method method = SampleService.class.getDeclaredMethod("samplePrivateMethod", List.class);
        // privateメソッドの実行を許可
        method.setAccessible(true);

        // samplePrivateMethodの引数にArrays.asList()、つまり空のListを渡す。
        // privateメソッドを実行すると、method.invoke()のExceptionであるInvocationTargetExceptionが発生する。
        InvocationTargetException e = assertThrows(InvocationTargetException.class, () -> method.invoke(sampleService, Arrays.asList()));

        // InvocationTargetExceptionの戻り値の中に、ArrayIndexOutOfBoundsException.classがあるかどうかでチェックする
        assertEquals(ArrayIndexOutOfBoundsException.class, e.getCause().getClass());
    }
}
```

以上

## 参考
- [privateメソッドをテストする時メモ](https://qiita.com/mabubu0203/items/1a142ff3789735ff1c1f)
【Docker】Productionではマルチステージビルドが必要な理由　no.35

![パンプキン カフェ (12).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/7168fe6b-3475-ea4e-6e08-93ac9d064b85.png)


今回の記事は[前回の記事](https://qiita.com/Mayumi_Pythonista/items/d736fe7609a227051c1c)の続きである。

Reactによるアプリの開発の流れの最終段階。

Production Phaseにおいては、Dockerfile.dev ではなく、Dockerfileを書くことになる。

このProductionのためのDockerfileには『FROM』が2つ以上書かれ、2つのステージに分けてDocker Imageが作られることになる。(マルチステージビルドと呼ばれる)

今回の記事では

<ul>
<li>なぜProduction(本番)ではマルチステージビルドが必要になるのか</li>
<li>Production用のサーバーで人気なnginxの概要</li>
</ul>

を書いていく

#npm run start とnpm run buildの違い

npm run startではDevelopment用のサーバーも実行されていた
![npm run start.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/a2ebb174-2c5d-5a40-bd07-6423467def66.png)

それがProduction Phaseに移り、npm run buildを実行するとDevelopment Phaseの時に実行されていたDevelopment用のサーバーがなくなる。

npm run build は、Development Phaseの時に複数のファイルに分かれていたHTML CSS Javascriptなどを1つのファイルにして吐き出すことになる。その時にWebサーバーは用意されない。

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/5f476f42-7374-41bb-ae09-ab1a3bf459c0.png)

##なぜnpm run buildではサーバーが実行されないのか

Development phaseにおいてはソースコードを書き換えたり、その書き換えたソースコードをreloadしてくれるサーバーが必要であった。

それが、Production phaseではソースコードを書き換えることが無いのでDevelopmentの時とは違うサーバーが必要。

Productionの段階で必要なサーバーは

ブラウザーからのリクエストに反応して、ReactアプリケーションのコードやHTMLコードなどをレンダリングしてくれるだけの機能を持ったWebサーバー。

このProductionのためのWebサーバーで最も人気のあるものの1つが『nginx』になる。

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/72f43777-5d8e-27e7-7079-6c2543636a55.png)


では、『npm run build』のコマンドを実行するためにベースのイメージにnodeを使ったのに、サーバーはnginxで実行するというのを可能にするにはどのようにDockerfileを書けばいいだろうか？


![FROM nodealpine.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/6e86fb93-a071-bf39-f0ae-d3cd8c6d351b.png)

npm run buildを実行するために、ベースイメージにnode:alpineを使ったContainerをさらに、nginxのイメージを使ってWebサーバーを作るにはどうしたら良いのだろうか？

#マルチステージビルドのDockerfile
ステージを分けてDockerfileを書くことで上記の問題を解決する事ができる


![2021-07-29_15-52-20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/05e61d1a-d540-5602-90dd-2ad7fc5dfd3b.png)

buildステージによって、HTML CSS JavaScriptコードからbuildファイルを作る

runステージによって、nginxのwebサーバーを実行させる。
httpieをcronから実行する場合の注意事項

# 背景（発生した課題）

[httpie](https://httpie.io/)を利用したcronジョブをシェルで書いて実行したところ、手動でシェルを実行する場合とcronから実行する場合で以下のような違いが発生してハマったのでメモ。

シェルの概要

```sh:cronjob.sh
http https://httpbin.org/anything
```

## 手動でシェル実行した場合の結果

こちらは想定どおり、methodはGET。

```manual-res.json
{
    "args": {},
    "data": "",
    "files": {},
    "form": {},
    "headers": {
        "Accept": "*/*",
        "Accept-Encoding": "gzip, deflate",
        "Host": "httpbin.org",
        "User-Agent": "HTTPie/2.4.0",
        "X-Amzn-Trace-Id": "Root=1-61024c67-710a451f58849cfb47ca8bc9"
    },
    "json": null,
    "method": "GET",
    "origin": "xxx.xxx.xxx.xxx",
    "url": "https://httpbin.org/anything"
}
```

## cronから実行した場合

なぜか、methodがPOSTになり、Content-Typeに `application/json` が設定されている。

```json:cron-res.json
{
  "args": {}, 
  "data": "", 
  "files": {}, 
  "form": {}, 
  "headers": {
    "Accept": "application/json, */*;q=0.5", 
    "Accept-Encoding": "gzip, deflate", 
    "Content-Length": "0", 
    "Content-Type": "application/json", 
    "Host": "httpbin.org", 
    "User-Agent": "HTTPie/2.4.0", 
    "X-Amzn-Trace-Id": "Root=1-61024b79-489758182df5146a616157de"
  }, 
  "json": null, 
  "method": "POST", 
  "origin": "xxx.xxx.xxx.xxx", 
  "url": "https://httpbin.org/anything"
}
```

# 原因と対処方法

[公式のドキュメント](https://httpie.io/docs#best-practices)をよく読んだから、以下の記述がありました。。。


> The default behaviour of automatically reading stdin is typically not desirable during non-interactive invocations. You most likely want to use the --ignore-stdin option to disable it.
> 
> It is a common gotcha that without this option HTTPie seemingly hangs. What happens is that when HTTPie is invoked for example from a cron job, stdin is not connected to a terminal. Therefore, rules for redirected input apply, i.e., HTTPie starts to read it expecting that the request body will be passed through. And since there’s no data nor EOF, it will be stuck. So unless you’re piping some data to HTTPie, this flag should be used in scripts.
> 
> Also, it might be good to set a connection --timeout limit to prevent your program from hanging if the server never responds.

というわけで、以下のように `--ignore-stdin`をつけることで解決しました。

```sh:cronjob.sh
http --ignore-stdin https://httpbin.org/anything
```
WSL2 & Windows10 & Docker Desktop for Windows 環境でproxy設定

# 初めに

結構書かれている内容だけど、備忘録もかねて、タイトル通りの環境で `docker build` をするための設定を記録する。

プロキシは電気通信大学で使用するものをそのまま利用した。

# Docker Engine

`"buildkit"` の項を `false` にする。全文は下記の通り。理由不明。

```json
{
  "builder": {
    "gc": {
      "defaultKeepStorage": "20GB",
      "enabled": true
    }
  },
  "debug": false,
  "experimental": false,
  "features": {
    "buildkit": false
  },
  "insecure-registries": [],
  "registry-mirrors": []
}
```

# `config.json`

PowerShellからdockerコマンドを実行する場合は `C:/Users/<ユーザー名>/.docker/config.json` を下記のようにする。

```json
{"credsStore":"desktop","proxies":{"default":{"httpProxy":"http://proxy.cc.uec.ac.jp:8080","httpsProxy":"http://proxy.cc.uec.ac.jp:8080"}},"stackOrchestrator":"swarm"}
```

***再起動をする***

# 終わりに

これでできるはず。なにか手違いがあったらスマン。
【React】The above error occurred in the <img> componentの対処法【styled-components】

<h2>症状</h2>
Reactでstyled-componentsを使用して、画面レイアウトの修正をしていたところ、下記のエラーが発生し画面が白飛びしてしましました。
翻訳すると、「上記のエラーは<img>コンポーネントで発生しました」となりました。
imgコンポーネントで不具合が起きているようです。

```terminal:error
index.js:1 The above error occurred in the <img> component:

    at img
    at O (http://localhost:3001/static/js/vendors~main.chunk.js:71248:6)
    at div
    at O (http://localhost:3001/static/js/vendors~main.chunk.js:71248:6)
    at div
    at O (http://localhost:3001/static/js/vendors~main.chunk.js:71248:6)
    at div
    at O (http://localhost:3001/static/js/vendors~main.chunk.js:71248:6)
    at Home (http://localhost:3001/static/js/main.chunk.js:8060:86)
```

```react:Home.jsx
import React from "react";
import styled from "styled-components";
import userImage from "./images/user-image.jpg";

const userImageWrapper = styled.img`
`;

const userImage = styled.div`
`;

export const Home = ()=> {

  return (
    <userImageWrapper>
      <userImage src={userImage} alt={userImage}></userImage>
    </userImageWrapper>
  )
}
```

<h2>解決方法</h2>
userImageコンポーネントにimg、その親のコンポーネントにdivのスタイルに変更することで解決しました。
imgを表示させるコンポーネントではなく、その親のWrapperコンポーネントに対して、imgタグが適用されていたため、エラーが起こっていたようです。

```react:Home.jsx
import React from "react";
import styled from "styled-components";
import userImage from "./images/user-image.jpg";

const userImageWrapper = styled.div`
`;

const userImage = styled.img`
`;

export const Home = ()=> {

  return (
    <userImageWrapper>
      <userImage src={userImage} alt={userImage}></userImage>
    </userImageWrapper>
  )
}
```
【Drupal】ラジオボタンのN/Aを消したい

「リスト（テキスト）」のフィールドタイプを作成し制限を1にして設定を保存後、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308799/5a313836-5328-fc85-62d1-ef9078dcb82b.png)

フォームの表示管理からWIDGETを「チェックボックス/ラジオボタン」に設定すると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308799/cb73a351-0622-3e3d-aab7-8b8d27fe4926.png)

ラジオボタンのフィールドを作成できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308799/e6035b66-b5fc-8302-5276-f284e5133b7d.png)

このとき表示される「N/A」がいらないときの処理について忘れないように記しておきます。（もっといい方法あるかもしれませんが。）

カスタムモジュールのディレクトリ名を**「remove_radio_list_na」**としておきます。

### MY_MODULE.info.yml
```modules/custom/remove_radio_list_na/remove_radio_list_na.info.yml
name: Remove Radio List N/A
description: ラジオボタンにN/Aは表示しないようにします。
type: module
core: 8.x
core_version_requirement: ^8 || ^9
package: Custom
```
### MY_MODULE.module
```php:modules/custom/remove_radio_list_na/remove_radio_list_na.module
<?php
 
/**
 * Implements hook_element_info_alter().
 */
function remove_radio_list_na_element_info_alter(array &$info) {
  if (isset($info['radios'])) {
    $info['radios']['#process'][] = 'remove_radio_na';
  }
}
 
function remove_radio_na($element) {
  if (isset($element['#field_name'])
  && ($element['#field_name'] === ＜フィールドのシステム内部名称＞)) {
    unset($element['_none']);
  }
  return $element;
}
```
Slidev マークダウンでサクサク書けるプレゼンツール

Slidev マークダウンでサクサク書けるプレゼンツール
https://www.slideshare.net/kinneko/slidev

![demo-export01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/04860dfc-f1e8-5aa0-5be9-d24476da835f.jpeg)

スライドをマークダウンでサクサク作りたい
![demo-export02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/63f26c2b-7823-0b82-562a-40ebe33f4c94.jpeg)

slidev
![demo-export03.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/1412ae9c-60a6-7e75-35f2-5aa2f800807a.jpeg)

読み方
![demo-export04.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/bb1fe628-3e6e-b1f6-c17d-9993604e484a.jpeg)

起動はmdを指定するだけ
![demo-export05.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/810535ce-49bd-1c46-8ec8-531314736df9.jpeg)

右下にカーソルを持っていくとツールバーが表示
![demo-export06.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/7242f926-c2ec-3e6f-b1b0-d58833cce130.jpeg)

多彩な表現ができる
![demo-export07.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/a3c57e38-f20e-961f-9de6-53645d7cb10e.jpeg)

コードブロックの挿入
![demo-export08.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/d5b24ef8-8865-adfb-e351-257f1803e1a1.jpeg)

コードのハイライト(行の強調)
![demo-export09.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/531d7444-6f8e-e488-90d4-d4cd2e3e7f3b.jpeg)

コードのステップ強調
![demo-export10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/067ec1e4-db0b-d037-26bb-9c60546bd876.jpeg)

コードのインラインエディタMonaco
![demo-export11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/9c26d531-cc16-deef-e3ac-da2200738b9d.jpeg)

TeX表現を使う
![demo-export12.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/250add6e-0f9c-8d16-fc32-a58b486718b9.jpeg)

ダイヤグラム図を描く
![demo-export13.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/fcc9452a-18b4-cfce-efb3-dc3195f58a15.jpeg)

ダイヤグラム図を描く（日本語はダサい）
![demo-export14.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/fab6e304-1798-bd52-1636-d7a3336a0a45.jpeg)

twiiterを貼る(id指定のみ)
![demo-export15.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/0540bdc0-e7c1-930c-76b7-734dc5f0959c.jpeg)

PDFの書き出しができる
![demo-export16.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/3fdd8d3e-e891-2adb-f48b-8581fff1df6a.jpeg)

Slidev
![demo-export17.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/eefed22f-bcdd-4029-dfc0-830f84af5050.jpeg)

いいことしか書かなかったけど...
![demo-export18.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/39afe357-df20-8149-ab15-bb7601e71fb3.jpeg)

Markdownでプレゼンが書けるSlidevを試す -1-｜kinneko｜pixivFANBOX
https://www.fanbox.cc/@kinneko/posts/2494578

Markdownでプレゼンが書けるSlidevを試す -2-｜kinneko｜pixivFANBOX
https://www.fanbox.cc/@kinneko/posts/2494928

Markdownでプレゼンが書けるSlidevを試す -3-｜kinneko｜pixivFANBOX
https://kinneko.fanbox.cc/posts/2498236

7まで続く予定です！ここは更新しないので、探してみてね。
Bootstrapでの文字、背景色の変更方法

Bootstrap公式サイトの
Documentation→Utilities→Colorsで使用できる文字色と背景色を確認することができる。

https://getbootstrap.jp/docs/5.0/customize/color/

#Color
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1307773/082d9e22-7098-afba-ca2d-c5f54da2a66c.png)


「text-primary」や「text-secondary」などのクラスを指定してすることで対応した文字色に設定することができる。

```css
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
```

#Background color

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1307773/8e41c1a1-9255-864e-f277-0c8a0b12569f.png)

```css
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-dark">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
```
react覚書


# react覚書


作り込まれて複雑なreactソースになすすべがないため、
100ぶんの１くらいは理解に努めるために書いてみました。





## Reactの最小単位の型

- ソース内容

```
react-lesson
　└ src/
　│　├ components
　│　│　 App.js
　│　index.js
　└ index.html
```


```index.htmls
<!DOCTYPE html>
<html>
  <head>
    <title>React App</title>
  </head>
  <body>
    <!-- idを指定してください -->
    <div id="root"></div>
    
    <script src="bundle.js"></script>
  </body>
</html>
```

```index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

// 以下に指定されたコードを貼り付けてください 
ReactDOM.render(<App />, document.getElementById('root'));
```

```App.js
import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello World</h1>
        <p>一緒にReactを学びましょう！</p>
      </div>
    );
  }
}

```




----------------
## コンポーネントの理解と追加(作成と表示)



```Language.js
// Reactをインポートしてください
import React from 'react';

// Languageクラスを定義してください

class Language extends React.Component {

  render() {
  return(
    <div className='language-item'>
        <div className='language-name'>HTML & CSS</div>
        <img className='language-image' src='https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/html.svg' />
      </div>
    )
  }
}
```


```App.js
import React from 'react';
// Languageコンポーネントをインポートしてください
import Language from './Language'

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>言語一覧</h1>
        <div className="language">
          {/* Languageコンポーネントを呼び出してください */}
          <Language/>
          
        </div>
      </div>
    );
  }
}

export default App;
```



```index.html
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="stylesheet.css">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>
</html>
```


```stylesheet.css
html {
  font: 100% / 1.5 "Lato", "Hiragino Maru Gothic Pro", "Meiryo UI", Meiryo, "MS PGothic", sans-serif;
  background: #f9fbfe;
}

h1, h2, h3, h4, h5, h6, p, div {
   color: #2b546a;
   font-weight: normal;
}

h1 {
  font-size: 1.5rem;
}

body {
  margin: 0;
  padding: 0;
}

h1 {
  padding-top: 40px;
  text-align:center;
}

p {
  text-align:center;
}

.language {
  height: 400px;
  width: 810px;
  padding: 0 70px;
  margin: auto;
}

.language-item {
  width: 240px;
  height: 250px;
  background: #ffffff;
  margin: 15px;
  float: left;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
  border-radius: 3px;
  position: relative;
}

.language-name {
  position: absolute;
  left: 0;
  right: 0;
  top: 40px;
  margin: auto;
  text-align: center;
}

.language-image {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px;
  margin: auto;
  height: auto;
  width: 60%;
}
```



```index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.render(<App />, document.getElementById('root'));
```
[Java] JPAのNo default constructor for entityエラーについて

## 環境
- Java 1.8.0_282
- org.springframework.boot:spring-boot-starter-data-jpa: 2.4.9

## 現象
以下のModelを実行すると、

```java
@Entity
@Builder
@Table(name="sample_table")
public class SampleModel {
    @Id
    private Long id;
    private String name;
}
```

以下のエラーが出る。

```java
Caused by: org.springframework.orm.jpa.JpaSystemException: No default constructor for entity:  : com.example.bot.spring.models.SampleModel; nested exception is org.hibernate.InstantiationException: No default constructor for entity:  : com.example.bot.spring.models.SampleModel
```

`No default constructor for entity` とある。

## 原因
簡単に説明すると、

- デフォルトコンストラクタとは引数なしの空のコンストラクタのこと
- `@Builder`が付与されていると、引数ありのコンストラクタが自動生成される
- 既にコンストラクタが存在しているとデフォルトコンストラクタは生成されない

詳しく説明すると、今回の例で`@Builder`が自動生成するコンストラクタは以下。求められているのは `public SampleModel() {}` のような空のコンストラクタ。

```java
@Entity
@Builder
@Table(name="sample_table")
public class SampleModel {
    @Id
    private Long id;
    private String name;

    // このようなコンストラクタを@Builderが自動生成する
    public SampleModel(Long id, String name) {
        this.id = id;
        this.name = name;
    }
}
```

つまり、`@Builder`が邪魔をしている。しかし`@Builder`は使いたい。

## 解決方法
デフォルトコンストラクタを明示的に定義し、`@Tolerate`を付与することで回避できる。
こうすると、デフォルトコンストラクタが既に存在していても、`@Builder`が引数ありのコンストラクタを生成してくれる。

```diff
@Entity
@Builder
@Table(name="sample_table")
public class SampleModel {
    @Id
    private Long id;
    private String name;
+
+    @Tolerate
+    public TaskCommandModel() {}
}
```

以上

## 参考
- [@Builderのクラスに引数なしのコンストラクタを設置したい](https://ti-tomo-knowledge.hatenablog.com/entry/2018/06/12/152037)